bits-ui 2.6.2 → 2.8.0

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

@@ -1,18 +1,17 @@
 import { type DateValue } from "@internationalized/date";
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import type { DateMatcher, Month } from "../../shared/index.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs } from "../../internal/date-time/calendar-helpers.svelte.js";
 import type { WeekStartsOn } from "../../shared/date/types.js";
-type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
+interface CalendarRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: DateValue | undefined | DateValue[];
     placeholder: DateValue;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     preventDeselect: boolean;
     minValue: DateValue | undefined;
     maxValue: DateValue | undefined;
@@ -38,19 +37,21 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     onDateSelect?: () => void;
     monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
     yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
-}> & {
+}> {
     defaultPlaceholder: DateValue;
-}>;
+}
+export declare const CalendarRootContext: Context<RangeCalendarRootState | CalendarRootState>;
 export declare class CalendarRootState {
     #private;
-    readonly opts: CalendarRootStateProps;
+    static create(opts: CalendarRootStateOpts): RangeCalendarRootState | CalendarRootState;
+    readonly opts: CalendarRootStateOpts;
+    readonly visibleMonths: DateValue[];
+    readonly formatter: Formatter;
+    readonly accessibleHeadingId: string;
+    readonly domContext: DOMContext;
     months: Month<DateValue>[];
-    visibleMonths: DateValue[];
     announcer: Announcer;
-    formatter: Formatter;
-    accessibleHeadingId: string;
-    domContext: DOMContext;
-    constructor(opts: CalendarRootStateProps);
+    constructor(opts: CalendarRootStateOpts);
     setMonths(months: Month<DateValue>[]): void;
     /**
      * This derived state holds an array of localized day names for the current
@@ -77,8 +78,8 @@ export declare class CalendarRootState {
     isNextButtonDisabled: boolean;
     isPrevButtonDisabled: boolean;
     isInvalid: boolean;
-    headingValue: string;
-    fullCalendarLabel: string;
+    readonly headingValue: string;
+    readonly fullCalendarLabel: string;
     isOutsideVisibleMonths(date: DateValue): boolean;
     isDateDisabled(date: DateValue): boolean;
     isDateSelected(date: DateValue): boolean;
@@ -87,12 +88,12 @@ export declare class CalendarRootState {
     handleMultipleUpdate(prev: DateValue[] | undefined, date: DateValue): DateValue[] | undefined;
     handleSingleUpdate(prev: DateValue | undefined, date: DateValue): DateValue | undefined;
     onkeydown(event: BitsKeyboardEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         months: Month<DateValue>[];
         weekdays: string[];
     };
     getBitsAttr: (typeof calendarAttrs)["getAttr"];
-    props: {
+    readonly props: {
         readonly onkeydown: (event: BitsKeyboardEvent) => void;
         readonly id: string;
         readonly role: "application";
@@ -102,43 +103,46 @@ export declare class CalendarRootState {
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarHeadingStateProps = WithRefProps;
+interface CalendarHeadingStateOpts extends WithRefOpts {
+}
 export declare class CalendarHeadingState {
-    readonly opts: CalendarHeadingStateProps;
+    static create(opts: CalendarHeadingStateOpts): CalendarHeadingState;
+    readonly opts: CalendarHeadingStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    headingValue: string;
-    constructor(opts: CalendarHeadingStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarHeadingStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-type CalendarCellStateProps = WithRefProps<ReadableBoxedValues<{
+interface CalendarCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
     date: DateValue;
     month: DateValue;
-}>>;
-declare class CalendarCellState {
-    readonly opts: CalendarCellStateProps;
+}> {
+}
+export declare class CalendarCellState {
+    static create(opts: CalendarCellStateOpts): CalendarCellState;
+    readonly opts: CalendarCellStateOpts;
     readonly root: CalendarRootState;
-    cellDate: Date;
-    isDisabled: boolean;
-    isUnavailable: boolean;
-    isDateToday: boolean;
-    isOutsideMonth: boolean;
-    isOutsideVisibleMonths: boolean;
-    isFocusedDate: boolean;
-    isSelectedDate: boolean;
-    labelText: string;
-    constructor(opts: CalendarCellStateProps, root: CalendarRootState);
-    snippetProps: {
+    readonly cellDate: Date;
+    readonly isDisabled: boolean;
+    readonly isUnavailable: boolean;
+    readonly isDateToday: boolean;
+    readonly isOutsideMonth: boolean;
+    readonly isOutsideVisibleMonths: boolean;
+    readonly isFocusedDate: boolean;
+    readonly isSelectedDate: boolean;
+    readonly labelText: string;
+    constructor(opts: CalendarCellStateOpts, root: CalendarRootState);
+    readonly snippetProps: {
         disabled: boolean;
         unavailable: boolean;
         selected: boolean;
     };
-    ariaDisabled: boolean;
-    sharedDataAttrs: {
+    readonly ariaDisabled: boolean;
+    readonly sharedDataAttrs: {
         readonly "data-unavailable": "" | undefined;
         readonly "data-today": "" | undefined;
         readonly "data-outside-month": "" | undefined;
@@ -149,7 +153,7 @@ declare class CalendarCellState {
         readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
     };
-    props: {
+    readonly props: {
         readonly "data-unavailable": "" | undefined;
         readonly "data-today": "" | undefined;
         readonly "data-outside-month": "" | undefined;
@@ -165,21 +169,23 @@ declare class CalendarCellState {
         readonly "aria-disabled": "true" | "false";
     };
 }
-type CalendarDayStateProps = WithRefProps;
-declare class CalendarDayState {
+interface CalendarDayStateOpts extends WithRefOpts {
+}
+export declare class CalendarDayState {
     #private;
-    readonly opts: CalendarDayStateProps;
+    static create(opts: CalendarDayStateOpts): CalendarDayState;
+    readonly opts: CalendarDayStateOpts;
     readonly cell: CalendarCellState;
-    constructor(opts: CalendarDayStateProps, cell: CalendarCellState);
+    constructor(opts: CalendarDayStateOpts, cell: CalendarCellState);
     onclick(e: BitsMouseEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         disabled: boolean;
         unavailable: boolean;
         selected: boolean;
         day: string;
     };
-    props: {
-        readonly tabindex: number | undefined;
+    readonly props: {
+        readonly tabindex: 0 | -1 | undefined;
         readonly "data-bits-day": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly "data-unavailable": "" | undefined;
@@ -197,14 +203,16 @@ declare class CalendarDayState {
         readonly "aria-disabled": "true" | "false";
     };
 }
-export type CalendarNextButtonStateProps = WithRefProps;
+interface CalendarNextButtonStateOpts extends WithRefOpts {
+}
 export declare class CalendarNextButtonState {
-    readonly opts: CalendarNextButtonStateProps;
+    static create(opts: CalendarNextButtonStateOpts): CalendarNextButtonState;
+    readonly opts: CalendarNextButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    isDisabled: boolean;
-    constructor(opts: CalendarNextButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
+    readonly isDisabled: boolean;
+    constructor(opts: CalendarNextButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -215,14 +223,16 @@ export declare class CalendarNextButtonState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-export type CalendarPrevButtonStateProps = WithRefProps;
+interface CalendarPrevButtonStateOpts extends WithRefOpts {
+}
 export declare class CalendarPrevButtonState {
-    readonly opts: CalendarPrevButtonStateProps;
+    static create(opts: CalendarPrevButtonStateOpts): CalendarPrevButtonState;
+    readonly opts: CalendarPrevButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    isDisabled: boolean;
-    constructor(opts: CalendarPrevButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
+    readonly isDisabled: boolean;
+    constructor(opts: CalendarPrevButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -233,12 +243,14 @@ export declare class CalendarPrevButtonState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-export type CalendarGridStateProps = WithRefProps;
+interface CalendarGridStateOpts extends WithRefOpts {
+}
 export declare class CalendarGridState {
-    readonly opts: CalendarGridStateProps;
+    static create(opts: CalendarGridStateOpts): CalendarGridState;
+    readonly opts: CalendarGridStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarGridStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarGridStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "grid";
@@ -248,70 +260,82 @@ export declare class CalendarGridState {
         readonly "data-disabled": "" | undefined;
     };
 }
-export type CalendarGridBodyStateProps = WithRefProps;
+interface CalendarGridBodyStateOpts extends WithRefOpts {
+}
 export declare class CalendarGridBodyState {
-    readonly opts: CalendarGridBodyStateProps;
+    static create(opts: CalendarGridBodyStateOpts): CalendarGridBodyState;
+    readonly opts: CalendarGridBodyStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarGridBodyStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarGridBodyStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarGridHeadStateProps = WithRefProps;
+interface CalendarGridHeadStateOpts extends WithRefOpts {
+}
 export declare class CalendarGridHeadState {
-    readonly opts: CalendarGridHeadStateProps;
+    static create(opts: CalendarGridHeadStateOpts): CalendarGridHeadState;
+    readonly opts: CalendarGridHeadStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarGridHeadStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarGridHeadStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarGridRowStateProps = WithRefProps;
+interface CalendarGridRowStateOpts extends WithRefOpts {
+}
 export declare class CalendarGridRowState {
-    readonly opts: CalendarGridRowStateProps;
+    static create(opts: CalendarGridRowStateOpts): CalendarGridRowState;
+    readonly opts: CalendarGridRowStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarGridRowStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarGridRowStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarHeadCellStateProps = WithRefProps;
+interface CalendarHeadCellStateOpts extends WithRefOpts {
+}
 export declare class CalendarHeadCellState {
-    readonly opts: CalendarHeadCellStateProps;
+    static create(opts: CalendarHeadCellStateOpts): CalendarHeadCellState;
+    readonly opts: CalendarHeadCellStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarHeadCellStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarHeadCellStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarHeaderStateProps = WithRefProps;
+interface CalendarHeaderStateOpts extends WithRefOpts {
+}
 export declare class CalendarHeaderState {
-    readonly opts: CalendarHeaderStateProps;
+    static create(opts: CalendarHeaderStateOpts): CalendarHeaderState;
+    readonly opts: CalendarHeaderStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarHeaderStateProps, root: CalendarRootState | RangeCalendarRootState);
-    props: {
+    constructor(opts: CalendarHeaderStateOpts, root: CalendarRootState | RangeCalendarRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
 }
-export type CalendarMonthSelectStateProps = WithRefProps<ReadableBoxedValues<{
+interface CalendarMonthSelectStateOpts extends WithRefOpts, ReadableBoxedValues<{
     months: number[];
     monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
     disabled: boolean;
-}>>;
+}> {
+}
 export declare class CalendarMonthSelectState {
-    readonly opts: CalendarMonthSelectStateProps;
+    static create(opts: CalendarMonthSelectStateOpts): CalendarMonthSelectState;
+    readonly opts: CalendarMonthSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarMonthSelectStateProps, root: CalendarRootState | RangeCalendarRootState);
+    constructor(opts: CalendarMonthSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly monthItems: {
         value: number;
         label: string;
@@ -329,7 +353,7 @@ export declare class CalendarMonthSelectState {
         };
     };
     onchange(event: Event): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly value: number;
         readonly disabled: boolean;
@@ -337,15 +361,17 @@ export declare class CalendarMonthSelectState {
         readonly onchange: (event: Event) => void;
     };
 }
-export type CalendarYearSelectStateProps = WithRefProps<ReadableBoxedValues<{
+interface CalendarYearSelectStateOpts extends WithRefOpts, ReadableBoxedValues<{
     years: number[] | undefined;
     yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
     disabled: boolean;
-}>>;
+}> {
+}
 export declare class CalendarYearSelectState {
-    readonly opts: CalendarYearSelectStateProps;
+    static create(opts: CalendarYearSelectStateOpts): CalendarYearSelectState;
+    readonly opts: CalendarYearSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
-    constructor(opts: CalendarYearSelectStateProps, root: CalendarRootState | RangeCalendarRootState);
+    constructor(opts: CalendarYearSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly years: number[];
     readonly yearItems: {
         value: number;
@@ -364,7 +390,7 @@ export declare class CalendarYearSelectState {
         };
     };
     onchange(event: Event): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly value: number;
         readonly disabled: boolean;
@@ -372,19 +398,4 @@ export declare class CalendarYearSelectState {
         readonly onchange: (event: Event) => void;
     };
 }
-export declare const CalendarRootContext: Context<RangeCalendarRootState | CalendarRootState>;
-export declare function useCalendarRoot(props: CalendarRootStateProps): RangeCalendarRootState | CalendarRootState;
-export declare function useCalendarGrid(props: CalendarGridStateProps): CalendarGridState;
-export declare function useCalendarCell(props: CalendarCellStateProps): CalendarCellState;
-export declare function useCalendarNextButton(props: CalendarNextButtonStateProps): CalendarNextButtonState;
-export declare function useCalendarPrevButton(props: CalendarPrevButtonStateProps): CalendarPrevButtonState;
-export declare function useCalendarDay(props: CalendarDayStateProps): CalendarDayState;
-export declare function useCalendarGridBody(props: CalendarGridBodyStateProps): CalendarGridBodyState;
-export declare function useCalendarGridHead(props: CalendarGridHeadStateProps): CalendarGridHeadState;
-export declare function useCalendarGridRow(props: CalendarGridRowStateProps): CalendarGridRowState;
-export declare function useCalendarHeadCell(props: CalendarHeadCellStateProps): CalendarHeadCellState;
-export declare function useCalendarHeader(props: CalendarHeaderStateProps): CalendarHeaderState;
-export declare function useCalendarHeading(props: CalendarHeadingStateProps): CalendarHeadingState;
-export declare function useCalendarMonthSelect(props: CalendarMonthSelectStateProps): CalendarMonthSelectState;
-export declare function useCalendarYearSelect(props: CalendarYearSelectStateProps): CalendarYearSelectState;
 export {};

package/dist/bits/calendar/calendar.svelte.js

@@ -1,7 +1,7 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
 import { DEV } from "esm-env";
 import { onMount, untrack } from "svelte";
-import { attachRef, DOMContext } from "svelte-toolbelt";
+import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { useId } from "../../internal/use-id.js";
@@ -9,14 +9,18 @@ import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { calendarAttrs, createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { getDateValueType, isBefore, toDate } from "../../internal/date-time/utils.js";
+export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");
 export class CalendarRootState {
+    static create(opts) {
+        return CalendarRootContext.set(new CalendarRootState(opts));
+    }
     opts;
-    months = $state([]);
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
-    announcer;
     formatter;
     accessibleHeadingId = useId();
     domContext;
+    months = $state([]);
+    announcer;
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(opts.ref);
@@ -83,11 +87,11 @@ export class CalendarRootState {
          * Update the accessible heading's text content when the `fullCalendarLabel`
          * changes.
          */
-        $effect(() => {
+        watch(() => this.fullCalendarLabel, (label) => {
             const node = this.domContext.getElementById(this.accessibleHeadingId);
             if (!node)
                 return;
-            node.textContent = this.fullCalendarLabel;
+            node.textContent = label;
         });
         /**
          * Synchronize the placeholder value with the current value.
@@ -416,9 +420,11 @@ export class CalendarRootState {
     }));
 }
 export class CalendarHeadingState {
+    static create(opts) {
+        return new CalendarHeadingState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
-    headingValue = $derived.by(() => this.root.headingValue);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -432,7 +438,11 @@ export class CalendarHeadingState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CalendarCellState {
+const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");
+export class CalendarCellState {
+    static create(opts) {
+        return CalendarCellContext.set(new CalendarCellState(opts, CalendarRootContext.get()));
+    }
     opts;
     root;
     cellDate = $derived.by(() => toDate(this.opts.date.current));
@@ -485,7 +495,10 @@ class CalendarCellState {
         ...attachRef(this.opts.ref),
     }));
 }
-class CalendarDayState {
+export class CalendarDayState {
+    static create(opts) {
+        return new CalendarDayState(opts, CalendarCellContext.get());
+    }
     opts;
     cell;
     constructor(opts, cell) {
@@ -526,6 +539,9 @@ class CalendarDayState {
     }));
 }
 export class CalendarNextButtonState {
+    static create(opts) {
+        return new CalendarNextButtonState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isNextButtonDisabled);
@@ -554,6 +570,9 @@ export class CalendarNextButtonState {
     }));
 }
 export class CalendarPrevButtonState {
+    static create(opts) {
+        return new CalendarPrevButtonState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isPrevButtonDisabled);
@@ -582,6 +601,9 @@ export class CalendarPrevButtonState {
     }));
 }
 export class CalendarGridState {
+    static create(opts) {
+        return new CalendarGridState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -601,6 +623,9 @@ export class CalendarGridState {
     }));
 }
 export class CalendarGridBodyState {
+    static create(opts) {
+        return new CalendarGridBodyState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -616,6 +641,9 @@ export class CalendarGridBodyState {
     }));
 }
 export class CalendarGridHeadState {
+    static create(opts) {
+        return new CalendarGridHeadState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -631,6 +659,9 @@ export class CalendarGridHeadState {
     }));
 }
 export class CalendarGridRowState {
+    static create(opts) {
+        return new CalendarGridRowState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -646,6 +677,9 @@ export class CalendarGridRowState {
     }));
 }
 export class CalendarHeadCellState {
+    static create(opts) {
+        return new CalendarHeadCellState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -661,6 +695,9 @@ export class CalendarHeadCellState {
     }));
 }
 export class CalendarHeaderState {
+    static create(opts) {
+        return new CalendarHeaderState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -676,6 +713,9 @@ export class CalendarHeaderState {
     }));
 }
 export class CalendarMonthSelectState {
+    static create(opts) {
+        return new CalendarMonthSelectState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -734,6 +774,9 @@ export class CalendarMonthSelectState {
     }));
 }
 export class CalendarYearSelectState {
+    static create(opts) {
+        return new CalendarYearSelectState(opts, CalendarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -795,47 +838,3 @@ export class CalendarYearSelectState {
         ...attachRef(this.opts.ref),
     }));
 }
-export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");
-const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");
-export function useCalendarRoot(props) {
-    return CalendarRootContext.set(new CalendarRootState(props));
-}
-export function useCalendarGrid(props) {
-    return new CalendarGridState(props, CalendarRootContext.get());
-}
-export function useCalendarCell(props) {
-    return CalendarCellContext.set(new CalendarCellState(props, CalendarRootContext.get()));
-}
-export function useCalendarNextButton(props) {
-    return new CalendarNextButtonState(props, CalendarRootContext.get());
-}
-export function useCalendarPrevButton(props) {
-    return new CalendarPrevButtonState(props, CalendarRootContext.get());
-}
-export function useCalendarDay(props) {
-    return new CalendarDayState(props, CalendarCellContext.get());
-}
-export function useCalendarGridBody(props) {
-    return new CalendarGridBodyState(props, CalendarRootContext.get());
-}
-export function useCalendarGridHead(props) {
-    return new CalendarGridHeadState(props, CalendarRootContext.get());
-}
-export function useCalendarGridRow(props) {
-    return new CalendarGridRowState(props, CalendarRootContext.get());
-}
-export function useCalendarHeadCell(props) {
-    return new CalendarHeadCellState(props, CalendarRootContext.get());
-}
-export function useCalendarHeader(props) {
-    return new CalendarHeaderState(props, CalendarRootContext.get());
-}
-export function useCalendarHeading(props) {
-    return new CalendarHeadingState(props, CalendarRootContext.get());
-}
-export function useCalendarMonthSelect(props) {
-    return new CalendarMonthSelectState(props, CalendarRootContext.get());
-}
-export function useCalendarYearSelect(props) {
-    return new CalendarYearSelectState(props, CalendarRootContext.get());
-}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useCalendarCell } from "../calendar.svelte.js";
+	import { CalendarCellState } from "../calendar.svelte.js";
 	import type { CalendarCellProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -16,7 +16,7 @@
 		...restProps
 	}: CalendarCellProps = $props();
 
-	const cellState = useCalendarCell({
+	const cellState = CalendarCellState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useCalendarDay } from "../calendar.svelte.js";
+	import { CalendarDayState } from "../calendar.svelte.js";
 	import type { CalendarDayProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: CalendarDayProps = $props();
 
-	const dayState = useCalendarDay({
+	const dayState = CalendarDayState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,