import type { JSX, ValidComponent } from "@solidjs/web"; import { type BaseUIChangeEventDetails, REASONS } from "../../internals/change-event-details.js"; import { type MaybeAccessor } from "../../internals/maybe-accessor.js"; import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js"; import { type CheckboxRootState } from "../checkbox-root-context.js"; export type { CheckboxRootState }; export type CheckboxRootChangeEventReason = typeof REASONS.none; export type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails; export interface CheckboxRootProps extends NonNativeButtonProps, Omit, "onChange" | "value"> { /** * Tag/component to render. Defaults to `"button"`. Replaces the * pre-spike `render` prop (axis G). */ as?: ValidComponent; id?: string | undefined; name?: string | undefined; form?: string | undefined; /** * Controlled checked state. When provided (resolved value not * `undefined`), the consumer owns the state — pair with * {@link onCheckedChange}. When omitted, the checkbox manages its own * checked state (seeded from {@link defaultChecked}). Inside a * `` a checkbox with a `value` derives its checked state * from the group's value array instead. */ checked?: MaybeAccessor; /** * Initial checked state when uncontrolled. Read once at mount. Inside a * `` with a `defaultValue`, a checkbox with a `value` * seeds from `defaultValue.includes(value)` instead. * @default false */ defaultChecked?: MaybeAccessor; disabled?: boolean | undefined; onCheckedChange?: ((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void) | undefined; readOnly?: MaybeAccessor; required?: MaybeAccessor; indeterminate?: MaybeAccessor; value?: string | undefined; uncheckedValue?: string | undefined; parent?: boolean | undefined; } /** * The checkbox root. Renders a `