@johly/bits-ui 2.18.1

package/dist/bits/calendar/components/calendar.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { watch } from "runed";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { type DateValue } from "@internationalized/date";
+	import { CalendarRootState } from "../calendar.svelte.js";
+	import type { CalendarRootProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
+
+	let {
+		child,
+		children,
+		id = useId(),
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange = noop,
+		placeholder = $bindable(),
+		onPlaceholderChange = noop,
+		weekdayFormat = "narrow",
+		weekStartsOn,
+		pagedNavigation = false,
+		isDateDisabled = () => false,
+		isDateUnavailable = () => false,
+		fixedWeeks = false,
+		numberOfMonths = 1,
+		locale,
+		calendarLabel = "Event",
+		disabled = false,
+		readonly = false,
+		minValue = undefined,
+		maxValue = undefined,
+		preventDeselect = false,
+		type,
+		disableDaysOutsideMonth = true,
+		initialFocus = false,
+		maxDays,
+		monthFormat = "long",
+		yearFormat = "numeric",
+		...restProps
+	}: CalendarRootProps = $props();
+
+	const defaultPlaceholder = getDefaultDate({
+		defaultValue: value,
+		minValue,
+		maxValue,
+	});
+
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
+		placeholder = defaultPlaceholder;
+	}
+
+	// SSR
+	handleDefaultPlaceholder();
+
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? undefined : [];
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
+	const rootState = CalendarRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		numberOfMonths: boxWith(() => numberOfMonths),
+		locale: resolveLocaleProp(() => locale),
+		calendarLabel: boxWith(() => calendarLabel),
+		readonly: boxWith(() => readonly),
+		disabled: boxWith(() => disabled),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		initialFocus: boxWith(() => initialFocus),
+		maxDays: boxWith(() => maxDays),
+		placeholder: boxWith(
+			() => placeholder as DateValue,
+			(v) => {
+				placeholder = v;
+				onPlaceholderChange(v as DateValue);
+			}
+		),
+		preventDeselect: boxWith(() => preventDeselect),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				// oxlint-disable-next-line no-explicit-any
+				onValueChange(v as any);
+			}
+		),
+		type: boxWith(() => type),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
+		defaultPlaceholder,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</div>
+{/if}

package/dist/bits/calendar/components/calendar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarRootProps } from "../types.js";
+declare const Calendar: import("svelte").Component<CalendarRootProps, {}, "value" | "placeholder" | "ref">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/bits/calendar/exports.d.ts

@@ -0,0 +1,15 @@
+export { default as Root } from "./components/calendar.svelte";
+export { default as Day } from "./components/calendar-day.svelte";
+export { default as Grid } from "./components/calendar-grid.svelte";
+export { default as GridBody } from "./components/calendar-grid-body.svelte";
+export { default as Cell } from "./components/calendar-cell.svelte";
+export { default as GridHead } from "./components/calendar-grid-head.svelte";
+export { default as HeadCell } from "./components/calendar-head-cell.svelte";
+export { default as GridRow } from "./components/calendar-grid-row.svelte";
+export { default as Header } from "./components/calendar-header.svelte";
+export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as MonthSelect } from "./components/calendar-month-select.svelte";
+export { default as NextButton } from "./components/calendar-next-button.svelte";
+export { default as PrevButton } from "./components/calendar-prev-button.svelte";
+export { default as YearSelect } from "./components/calendar-year-select.svelte";
+export type { CalendarRootProps as RootProps, CalendarPrevButtonProps as PrevButtonProps, CalendarNextButtonProps as NextButtonProps, CalendarHeadingProps as HeadingProps, CalendarHeaderProps as HeaderProps, CalendarGridProps as GridProps, CalendarGridHeadProps as GridHeadProps, CalendarHeadCellProps as HeadCellProps, CalendarGridBodyProps as GridBodyProps, CalendarGridRowProps as GridRowProps, CalendarCellProps as CellProps, CalendarDayProps as DayProps, CalendarMonthSelectProps as MonthSelectProps, CalendarYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/calendar/exports.js

@@ -0,0 +1,14 @@
+export { default as Root } from "./components/calendar.svelte";
+export { default as Day } from "./components/calendar-day.svelte";
+export { default as Grid } from "./components/calendar-grid.svelte";
+export { default as GridBody } from "./components/calendar-grid-body.svelte";
+export { default as Cell } from "./components/calendar-cell.svelte";
+export { default as GridHead } from "./components/calendar-grid-head.svelte";
+export { default as HeadCell } from "./components/calendar-head-cell.svelte";
+export { default as GridRow } from "./components/calendar-grid-row.svelte";
+export { default as Header } from "./components/calendar-header.svelte";
+export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as MonthSelect } from "./components/calendar-month-select.svelte";
+export { default as NextButton } from "./components/calendar-next-button.svelte";
+export { default as PrevButton } from "./components/calendar-prev-button.svelte";
+export { default as YearSelect } from "./components/calendar-year-select.svelte";

package/dist/bits/calendar/index.d.ts

@@ -0,0 +1 @@
+export * as Calendar from "./exports.js";

package/dist/bits/calendar/index.js

@@ -0,0 +1 @@
+export * as Calendar from "./exports.js";

package/dist/bits/calendar/types.d.ts

@@ -0,0 +1,330 @@
+import type { DateValue } from "@internationalized/date";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveHeaderAttributes, BitsPrimitiveSelectAttributes, BitsPrimitiveTableAttributes, BitsPrimitiveTbodyAttributes, BitsPrimitiveTdAttributes, BitsPrimitiveThAttributes, BitsPrimitiveTheadAttributes, BitsPrimitiveTrAttributes } from "../../shared/attributes.js";
+import type { DateMatcher, Month, WeekStartsOn } from "../../shared/date/types.js";
+export type CalendarRootSnippetProps = {
+    months: Month<DateValue>[];
+    weekdays: string[];
+};
+type CalendarBaseRootPropsWithoutHTML = {
+    /**
+     * The placeholder date, used to control the view of the
+     * calendar when no value is present.
+     *
+     * @default the current date
+     */
+    placeholder?: DateValue;
+    /**
+     * A callback function called when the placeholder value
+     * changes.
+     */
+    onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * Whether or not users can deselect a date once selected
+     * without selecting another date.
+     *
+     * @default false
+     */
+    preventDeselect?: boolean;
+    /**
+     * The minimum date that can be selected in the calendar.
+     */
+    minValue?: DateValue;
+    /**
+     * The maximum date that can be selected in the calendar.
+     */
+    maxValue?: DateValue;
+    /**
+     * Whether or not the calendar is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Applicable only when `numberOfMonths` is greater than 1.
+     *
+     * Controls whether to use paged navigation for the next and previous buttons in the
+     * date picker. With paged navigation set to `true`, clicking the next/prev buttons
+     * changes all months in view. When set to `false`, it shifts the view by a single month.
+     *
+     * For example, with `pagedNavigation` set to `true` and 2 months displayed (January and
+     * February), clicking the next button changes the view to March and April. If `pagedNavigation`
+     * is `false`, the view shifts to February and March.
+     *
+     * @default false
+     */
+    pagedNavigation?: boolean;
+    /**
+     * The day of the week to start the calendar on, which must
+     * be a number between 0 and 6, where 0 is Sunday and 6 is
+     * Saturday.
+     *
+     * @default 0 (Sunday)
+     */
+    weekStartsOn?: WeekStartsOn;
+    /**
+     * How the string representation of the weekdays provided via the `weekdays` state store
+     * should be formatted.
+     *
+     * ```md
+     * - "long": "Sunday", "Monday", "Tuesday", etc.
+     * - "short": "Sun", "Mon", "Tue", etc.
+     * - "narrow": "S", "M", "T", etc.
+     *```
+     *
+     * @default "narrow"
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
+     */
+    weekdayFormat?: Intl.DateTimeFormatOptions["weekday"];
+    /**
+     * A function that receives a date and returns `true` or `false` to indicate whether
+     * the date is disabled.
+     *
+     * @remarks
+     * Disabled dates cannot be focused or selected. Additionally, they are tagged
+     * with a data attribute to enable custom styling.
+     *
+     * `[data-disabled]` - applied to disabled dates
+     *
+     */
+    isDateDisabled?: DateMatcher;
+    /**
+     * Dates matching the provided matchers are marked as "unavailable." Unlike disabled dates,
+     * users can still focus and select unavailable dates. However, selecting an unavailable date
+     * renders the date picker as invalid.
+     *
+     * For example, in a calendar for booking appointments, you might mark already booked dates as
+     * unavailable. These dates could become available again before the appointment date, allowing
+     * users to select them to learn more about the appointment.
+     *
+     * `[data-unavailable]` - applied to unavailable dates
+     *
+     */
+    isDateUnavailable?: DateMatcher;
+    /**
+     * Display 6 weeks per month, regardless the month's number of weeks.
+     * This is useful for displaying a consistent calendar, where the size
+     * of the calendar doesn't change month to month.
+     *
+     * To display 6 weeks per month, you will need to render out the previous
+     * and next month's dates in the calendar as well.
+     *
+     * @default false
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Determines the number of months to display on the calendar simultaneously.
+     * For navigation between months, refer to the `pagedNavigation` prop.
+     *
+     * @default 1
+     */
+    numberOfMonths?: number;
+    /**
+     * This label is exclusively used for accessibility, remaining hidden from the page.
+     * It's read by screen readers when the calendar is opened. The current month and year
+     * are automatically appended to the label, so you only need to provide the base label.
+     *
+     * For instance:
+     * - 'Date of birth' will be read as 'Date of birth, January 2021' if the current month is January 2021.
+     * - 'Appointment date' will be read as 'Appointment date, January 2021' if the current month is January 2021.
+     * - 'Booking date' will be read as 'Booking date, January 2021' if the current month is January 2021.
+     */
+    calendarLabel?: string;
+    /**
+     * The default locale setting.
+     *
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * Whether the calendar is readonly. When true, the user will be able
+     * to focus and navigate the calendar, but will not be able to select
+     * dates. @see disabled for a similar prop that prevents focusing
+     * and selecting dates.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the calendar will focus the selected day, today, or the first day of the month
+     * in that order depending on what is visible when the calendar is mounted.
+     */
+    initialFocus?: boolean;
+    /**
+     * Whether to disable the selection of days outside the current month. By default,
+     * days outside the current month are rendered to fill the calendar grid, but they
+     * are not selectable. Setting this prop to `true` will disable this behavior.
+     *
+     * @default false
+     */
+    disableDaysOutsideMonth?: boolean;
+    /**
+     * The maximum number of days that can be selected in multiple mode.
+     * When set, users cannot select more dates than this number.
+     *
+     * @default undefined
+     */
+    maxDays?: number;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
+};
+export type CalendarSingleRootPropsWithoutHTML = {
+    /**
+     * The type of calendar. If set to `'single'`, the calendar will
+     * only allow a single date to be selected. If set to `'multiple'`,
+     * the calendar will allow multiple dates to be selected.
+     */
+    type: "single";
+    /**
+     * The value of the selected date in the calendar.
+     */
+    value?: DateValue;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<DateValue | undefined>;
+};
+export type CalendarMultipleRootPropsWithoutHTML = {
+    /**
+     * The type of calendar. If set to `'single'`, the calendar will
+     * only allow a single date to be selected. If set to `'multiple'`,
+     * the calendar will allow multiple dates to be selected.
+     */
+    type: "multiple";
+    /**
+     * The value of the selected dates in the calendar.
+     */
+    value?: DateValue[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<DateValue[]>;
+};
+export type _CalendarSingleRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML & CalendarSingleRootPropsWithoutHTML;
+export type CalendarSingleRootProps = _CalendarSingleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, _CalendarSingleRootPropsWithoutHTML>;
+export type _CalendarMultipleRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML & CalendarMultipleRootPropsWithoutHTML;
+export type CalendarMultipleRootProps = _CalendarMultipleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, _CalendarMultipleRootPropsWithoutHTML>;
+export type CalendarRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML & (WithChild<CalendarSingleRootPropsWithoutHTML, CalendarRootSnippetProps> | WithChild<CalendarMultipleRootPropsWithoutHTML, CalendarRootSnippetProps>);
+export type CalendarRootProps = CalendarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarRootPropsWithoutHTML>;
+export type CalendarCellSnippetProps = {
+    disabled: boolean;
+    unavailable: boolean;
+    selected: boolean;
+};
+export type CalendarCellPropsWithoutHTML = WithChild<{
+    /**
+     * The date value of the cell.
+     *
+     * @required
+     */
+    date: DateValue;
+    /**
+     * The month DateValue that this cell is being rendered in.
+     */
+    month: DateValue;
+}, CalendarCellSnippetProps>;
+export type CalendarCellProps = CalendarCellPropsWithoutHTML & Without<BitsPrimitiveTdAttributes, CalendarCellPropsWithoutHTML>;
+export type CalendarGridPropsWithoutHTML = WithChild;
+export type CalendarGridProps = CalendarGridPropsWithoutHTML & Without<BitsPrimitiveTableAttributes, CalendarGridPropsWithoutHTML>;
+export type CalendarGridBodyPropsWithoutHTML = WithChild;
+export type CalendarGridBodyProps = CalendarGridBodyPropsWithoutHTML & Without<BitsPrimitiveTbodyAttributes, CalendarGridBodyPropsWithoutHTML>;
+export type CalendarGridHeadPropsWithoutHTML = WithChild;
+export type CalendarGridHeadProps = CalendarGridHeadPropsWithoutHTML & Without<BitsPrimitiveTheadAttributes, CalendarGridHeadPropsWithoutHTML>;
+export type CalendarHeadCellPropsWithoutHTML = WithChild;
+export type CalendarHeadCellProps = CalendarHeadCellPropsWithoutHTML & Without<BitsPrimitiveThAttributes, CalendarHeadCellPropsWithoutHTML>;
+export type CalendarGridRowPropsWithoutHTML = WithChild;
+export type CalendarGridRowProps = CalendarGridRowPropsWithoutHTML & Without<BitsPrimitiveTrAttributes, CalendarGridRowPropsWithoutHTML>;
+export type CalendarHeaderPropsWithoutHTML = WithChild;
+export type CalendarHeaderProps = CalendarHeaderPropsWithoutHTML & Without<BitsPrimitiveHeaderAttributes, CalendarHeaderPropsWithoutHTML>;
+export type CalendarHeadingSnippetProps = {
+    headingValue: string;
+};
+export type CalendarHeadingPropsWithoutHTML = WithChild<{}, CalendarHeadingSnippetProps>;
+export type CalendarDaySnippetProps = {
+    disabled: boolean;
+    unavailable: boolean;
+    selected: boolean;
+    day: string;
+};
+export type CalendarDayPropsWithoutHTML = WithChild<{}, CalendarDaySnippetProps>;
+export type CalendarDayProps = CalendarDayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarDayPropsWithoutHTML>;
+export type CalendarHeadingProps = CalendarHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarHeadingPropsWithoutHTML>;
+export type CalendarNextButtonPropsWithoutHTML = WithChild;
+export type CalendarNextButtonProps = CalendarNextButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CalendarNextButtonPropsWithoutHTML>;
+export type CalendarPrevButtonPropsWithoutHTML = WithChild;
+export type CalendarPrevButtonProps = CalendarPrevButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CalendarPrevButtonPropsWithoutHTML>;
+export type CalendarMonthSelectSnippetProps = {
+    monthItems: Array<{
+        value: number;
+        label: string;
+    }>;
+    selectedMonthItem: {
+        value: number;
+        label: string;
+    };
+};
+export type CalendarMonthSelectPropsWithoutHTML = WithChild<{
+    /**
+     * An array of month numbers (1-12) to display in the select.
+     * This allows for flexible month selection, such as showing only
+     * specific months or seasons.
+     *
+     * @default [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] (all months)
+     */
+    months?: number[];
+    /**
+     * How the month names should be formatted in the select options.
+     *
+     * - "long": "January", "February", etc.
+     * - "short": "Jan", "Feb", etc.
+     * - "narrow": "J", "F", etc.
+     * - "numeric": "1", "2", etc.
+     * - "2-digit": "01", "02", etc.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+}, CalendarMonthSelectSnippetProps>;
+export type CalendarMonthSelectProps = CalendarMonthSelectPropsWithoutHTML & Without<BitsPrimitiveSelectAttributes, CalendarMonthSelectPropsWithoutHTML>;
+export type CalendarYearSelectSnippetProps = {
+    yearItems: Array<{
+        value: number;
+        label: string;
+    }>;
+    selectedYearItem: {
+        value: number;
+        label: string;
+    };
+};
+export type CalendarYearSelectPropsWithoutHTML = WithChild<{
+    /**
+     * An array of years to display in the select.
+     * This allows for complete control over which years appear,
+     * such as showing only years with data or excluding certain periods.
+     *
+     * @default Array from currentYear - 100 to currentYear
+     */
+    years?: number[];
+    /**
+     * How the year should be formatted in the select options.
+     *
+     * - "numeric": "2024", "2023", etc.
+     * - "2-digit": "24", "23", etc.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
+}, CalendarYearSelectSnippetProps>;
+export type CalendarYearSelectProps = CalendarYearSelectPropsWithoutHTML & Without<BitsPrimitiveSelectAttributes, CalendarYearSelectPropsWithoutHTML>;
+export {};

package/dist/bits/calendar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,106 @@
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { Context } from "runed";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+interface CheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    name: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    onValueChange: OnChangeFn<string[]>;
+}>, WritableBoxedValues<{
+    value: string[];
+}> {
+}
+export declare const CheckboxGroupContext: Context<CheckboxGroupState>;
+export declare class CheckboxGroupState {
+    static create(opts: CheckboxGroupStateOpts): CheckboxGroupState;
+    readonly opts: CheckboxGroupStateOpts;
+    readonly attachment: RefAttachment;
+    labelId: string | undefined;
+    constructor(opts: CheckboxGroupStateOpts);
+    addValue(checkboxValue: string | undefined): void;
+    removeValue(checkboxValue: string | undefined): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly "aria-labelledby": string | undefined;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface CheckboxGroupLabelStateOpts extends WithRefOpts {
+}
+export declare class CheckboxGroupLabelState {
+    static create(opts: CheckboxGroupLabelStateOpts): CheckboxGroupLabelState;
+    readonly opts: CheckboxGroupLabelStateOpts;
+    readonly group: CheckboxGroupState;
+    readonly attachment: RefAttachment;
+    constructor(opts: CheckboxGroupLabelStateOpts, group: CheckboxGroupState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface CheckboxRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    name: string | undefined;
+    value: string | undefined;
+    type: HTMLButtonAttributes["type"];
+}>, WritableBoxedValues<{
+    checked: boolean;
+    indeterminate: boolean;
+}> {
+}
+export declare class CheckboxRootState {
+    #private;
+    static create(opts: CheckboxRootStateOpts, group?: CheckboxGroupState | null): CheckboxRootState;
+    readonly opts: CheckboxRootStateOpts;
+    readonly group: CheckboxGroupState | null;
+    readonly trueName: string | undefined;
+    readonly trueRequired: boolean;
+    readonly trueDisabled: boolean;
+    readonly trueReadonly: boolean;
+    readonly attachment: RefAttachment;
+    constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null);
+    onkeydown(e: BitsKeyboardEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    readonly snippetProps: {
+        checked: boolean;
+        indeterminate: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly role: "checkbox";
+        readonly type: "reset" | "submit" | "button" | null | undefined;
+        readonly disabled: boolean;
+        readonly "aria-checked": "true" | "false" | "mixed";
+        readonly "aria-required": "true" | "false";
+        readonly "aria-readonly": "true" | "false";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
+        readonly "data-state": "checked" | "indeterminate" | "unchecked";
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export declare class CheckboxInputState {
+    static create(): CheckboxInputState;
+    readonly root: CheckboxRootState;
+    readonly trueChecked: boolean;
+    readonly shouldRender: boolean;
+    constructor(root: CheckboxRootState);
+    onfocus(_: BitsFocusEvent): void;
+    readonly props: {
+        readonly type: "checkbox";
+        readonly checked: boolean;
+        readonly disabled: boolean;
+        readonly required: boolean;
+        readonly name: string | undefined;
+        readonly value: string | undefined;
+        readonly readonly: boolean;
+        readonly onfocus: (_: BitsFocusEvent) => void;
+    };
+}
+export {};