bits-ui 1.0.0-next.1 → 1.0.0-next.11

package/dist/bits/avatar/components/avatar-fallback.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { FallbackProps } from "../index.js";
+	import type { AvatarFallbackProps } from "../types.js";
 	import { useAvatarFallback } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -11,7 +11,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: FallbackProps = $props();
+	}: AvatarFallbackProps = $props();
 
 	const fallbackState = useAvatarFallback({
 		id: box.with(() => id),

package/dist/bits/avatar/components/avatar-fallback.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FallbackProps } from "../index.js";
+import type { AvatarFallbackProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AvatarFallback: $$__sveltets_2_IsomorphicComponent<FallbackProps, {
+declare const AvatarFallback: $$__sveltets_2_IsomorphicComponent<AvatarFallbackProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AvatarFallback = InstanceType<typeof AvatarFallback>;

package/dist/bits/avatar/components/avatar-image.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ImageProps } from "../index.js";
+	import type { AvatarImageProps } from "../types.js";
 	import { useAvatarImage } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
-	let { src, child, id = useId(), ref = $bindable(null), ...restProps }: ImageProps = $props();
+	let {
+		src,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		crossorigin = undefined,
+		referrerpolicy = undefined,
+		...restProps
+	}: AvatarImageProps = $props();
 
 	const imageState = useAvatarImage({
 		src: box.with(() => src),
@@ -14,6 +22,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		crossOrigin: box.with(() => crossorigin),
+		referrerPolicy: box.with(() => referrerpolicy),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, imageState.props));

package/dist/bits/avatar/components/avatar-image.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ImageProps } from "../index.js";
+import type { AvatarImageProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AvatarImage: $$__sveltets_2_IsomorphicComponent<ImageProps, {
+declare const AvatarImage: $$__sveltets_2_IsomorphicComponent<AvatarImageProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AvatarImage = InstanceType<typeof AvatarImage>;

package/dist/bits/avatar/components/avatar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { AvatarRootProps } from "../types.js";
 	import { useAvatarRoot } from "../avatar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		delayMs = 0,
@@ -14,7 +14,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: RootProps = $props();
+	}: AvatarRootProps = $props();
 
 	const rootState = useAvatarRoot({
 		delayMs: box.with(() => delayMs),

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AvatarRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<AvatarRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref" | "loadingStatus">;
 type Avatar = InstanceType<typeof Avatar>;

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

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/avatar.svelte";
+export { default as Image } from "./components/avatar-image.svelte";
+export { default as Fallback } from "./components/avatar-fallback.svelte";
+export type { AvatarRootProps as RootProps, AvatarImageProps as ImageProps, AvatarFallbackProps as FallbackProps, } from "./types.js";

package/dist/bits/avatar/exports.js

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/avatar.svelte";
+export { default as Image } from "./components/avatar-image.svelte";
+export { default as Fallback } from "./components/avatar-fallback.svelte";

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

@@ -1,4 +1 @@
-export { default as Root } from "./components/avatar.svelte";
-export { default as Image } from "./components/avatar-image.svelte";
-export { default as Fallback } from "./components/avatar-fallback.svelte";
-export type { AvatarRootProps as RootProps, AvatarImageProps as ImageProps, AvatarFallbackProps as FallbackProps, } from "./types.js";
+export * as Avatar from "./exports.js";

package/dist/bits/avatar/index.js

@@ -1,3 +1 @@
-export { default as Root } from "./components/avatar.svelte";
-export { default as Image } from "./components/avatar-image.svelte";
-export { default as Fallback } from "./components/avatar-fallback.svelte";
+export * as Avatar from "./exports.js";

package/dist/bits/button/components/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { RootProps } from "../index.js";
+	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref, ...restProps }: RootProps = $props();
+	let { href, type, children, ref, ...restProps }: ButtonRootProps = $props();
 </script>
 
 <svelte:element

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ButtonRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Button: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Button: $$__sveltets_2_IsomorphicComponent<ButtonRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type Button = InstanceType<typeof Button>;

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/button.svelte";
+export type { ButtonRootProps as RootProps } from "./types.js";

package/dist/bits/button/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/button.svelte";

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/button.svelte";
-export type { ButtonProps as RootProps } from "./types.js";
+export * as Button from "./exports.js";

package/dist/bits/button/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/button.svelte";
+export * as Button from "./exports.js";

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

@@ -1,16 +1,16 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type { WithoutChildren } from "svelte-toolbelt";
 import type { WithChildren } from "../../shared/index.js";
-export type ButtonPropsWithoutHTML = WithChildren<{
+export type ButtonRootPropsWithoutHTML = WithChildren<{
     ref?: HTMLElement | null;
 }>;
-type AnchorElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
+type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
     href: HTMLAnchorAttributes["href"];
     type?: never;
 };
-type ButtonElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
+type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
     type?: HTMLButtonAttributes["type"];
     href?: never;
 };
-export type ButtonProps = AnchorElement | ButtonElement;
+export type ButtonRootProps = AnchorElement | ButtonElement;
 export {};

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

@@ -1,11 +1,11 @@
 import { type DateValue } from "@internationalized/date";
-import type { RangeCalendarCellState, RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
+import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import { type Announcer } from "../../shared/date/announcer.js";
-import { type CalendarParts } from "../../shared/date/calendar-helpers.svelte.js";
-import { type Formatter } from "../../shared/date/formatter.js";
-import type { DateMatcher, Month } from "../../shared/date/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 { type CalendarParts } from "../../internal/date-time/calendar-helpers.svelte.js";
 type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateValue | undefined | DateValue[];
     placeholder: DateValue;
@@ -79,24 +79,24 @@ export declare class CalendarRootState {
      * Navigates to the previous page of the calendar.
      */
     prevPage: () => void;
-    nextYear(): void;
-    prevYear(): void;
-    setYear(year: number): void;
-    setMonth(month: number): void;
+    nextYear: () => void;
+    prevYear: () => void;
+    setYear: (year: number) => void;
+    setMonth: (month: number) => void;
     isNextButtonDisabled: boolean;
     isPrevButtonDisabled: boolean;
     isInvalid: boolean;
     headingValue: string;
     fullCalendarLabel: string;
-    isOutsideVisibleMonths(date: DateValue): boolean;
-    isDateDisabled(date: DateValue): boolean;
-    isDateSelected(date: DateValue): boolean;
+    isOutsideVisibleMonths: (date: DateValue) => boolean;
+    isDateDisabled: (date: DateValue) => boolean;
+    isDateSelected: (date: DateValue) => boolean;
     handleCellClick: (_: Event, date: DateValue) => void;
     snippetProps: {
         months: Month<DateValue>[];
         weekdays: string[];
     };
-    getBitsAttr(part: CalendarParts): string;
+    getBitsAttr: (part: CalendarParts) => string;
     props: {
         readonly onkeydown: (event: KeyboardEvent) => void;
         readonly id: string;
@@ -106,16 +106,6 @@ export declare class CalendarRootState {
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
-    createHeading(props: CalendarHeadingStateProps): CalendarHeadingState;
-    createGrid(props: CalendarGridStateProps): CalendarGridState;
-    createCell(props: CalendarCellStateProps): CalendarCellState;
-    createNextButton(props: CalendarNextButtonStateProps): CalendarNextButtonState;
-    createPrevButton(props: CalendarPrevButtonStateProps): CalendarPrevButtonState;
-    createGridBody(props: CalendarGridBodyStateProps): CalendarGridBodyState;
-    createGridHead(props: CalendarGridHeadStateProps): CalendarGridHeadState;
-    createGridRow(props: CalendarGridRowStateProps): CalendarGridRowState;
-    createHeadCell(props: CalendarHeadCellStateProps): CalendarHeadCellState;
-    createHeader(props: CalendarHeaderStateProps): CalendarHeaderState;
 }
 export type CalendarHeadingStateProps = WithRefProps;
 export declare class CalendarHeadingState {
@@ -144,7 +134,7 @@ declare class CalendarCellState {
     month: CalendarCellStateProps["month"];
     cellDate: Date;
     isDisabled: boolean;
-    isUnvailable: boolean;
+    isUnavailable: boolean;
     isDateToday: boolean;
     isOutsideMonth: boolean;
     isOutsideVisibleMonths: boolean;
@@ -182,7 +172,6 @@ declare class CalendarCellState {
         readonly "aria-selected": "false" | "true";
         readonly "aria-disabled": "false" | "true";
     };
-    createDay(props: CalendarDayStateProps): CalendarDayState;
 }
 type CalendarDayStateProps = WithRefProps;
 declare class CalendarDayState {
@@ -337,48 +326,12 @@ export declare class CalendarHeaderState {
         readonly "data-readonly": "" | undefined;
     };
 }
-export declare function useCalendarRoot(props: CalendarRootStateProps): CalendarRootState | RangeCalendarRootState;
+export declare function useCalendarRoot(props: CalendarRootStateProps): CalendarRootState;
 export declare function useCalendarGrid(props: CalendarGridStateProps): CalendarGridState;
-export declare function useCalendarCell(props: CalendarCellStateProps): RangeCalendarCellState | CalendarCellState;
+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): {
-    id: import("svelte-toolbelt").ReadableBox<string>;
-    ref: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
-    readonly cell: RangeCalendarCellState;
-    "__#62@#tabindex": number | undefined;
-    "__#62@#onclick": (e: MouseEvent) => void;
-    "__#62@#onmouseenter": () => void;
-    "__#62@#onfocusin": () => void;
-    snippetProps: {
-        disabled: boolean;
-        unavailable: boolean;
-        selected: boolean;
-        day: string;
-    };
-    props: {
-        readonly tabindex: number | undefined;
-        readonly "data-bits-day": "";
-        readonly onclick: (e: MouseEvent) => void;
-        readonly onmouseenter: () => void;
-        readonly onfocusin: () => void;
-        readonly "data-unavailable": "" | undefined;
-        readonly "data-today": "" | undefined;
-        readonly "data-outside-month": "" | undefined;
-        readonly "data-outside-visible-months": "" | undefined;
-        readonly "data-focused": "" | undefined;
-        readonly "data-selection-start": "" | undefined;
-        readonly "data-selection-end": "" | undefined;
-        readonly "data-highlighted": "" | undefined;
-        readonly "data-selected": "" | undefined;
-        readonly "data-value": string;
-        readonly "data-disabled": "" | undefined;
-        readonly id: string;
-        readonly role: "button";
-        readonly "aria-label": string;
-        readonly "aria-disabled": "false" | "true";
-    };
-} | CalendarDayState;
+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;

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

@@ -2,13 +2,13 @@ import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internation
 import { DEV } from "esm-env";
 import { untrack } from "svelte";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
-import { useId } from "../../internal/useId.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { getAnnouncer } from "../../shared/date/announcer.js";
-import { createAccessibleHeading, createMonths, getCalendarBitsAttr, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../shared/date/calendar-helpers.svelte.js";
-import { createFormatter } from "../../shared/date/formatter.js";
-import { isBefore, toDate } from "../../shared/date/utils.js";
+import { createContext } from "../../internal/create-context.js";
+import { useId } from "../../internal/use-id.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
+import { getAnnouncer } from "../../internal/date-time/announcer.js";
+import { createFormatter } from "../../internal/date-time/formatter.js";
+import { createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { isBefore, toDate } from "../../internal/date-time/utils.js";
 export class CalendarRootState {
     ref;
     id;
@@ -196,18 +196,18 @@ export class CalendarRootState {
             months: this.months,
         });
     };
-    nextYear() {
+    nextYear = () => {
         this.placeholder.current = this.placeholder.current.add({ years: 1 });
-    }
-    prevYear() {
+    };
+    prevYear = () => {
         this.placeholder.current = this.placeholder.current.subtract({ years: 1 });
-    }
-    setYear(year) {
+    };
+    setYear = (year) => {
         this.placeholder.current = this.placeholder.current.set({ year });
-    }
-    setMonth(month) {
+    };
+    setMonth = (month) => {
         this.placeholder.current = this.placeholder.current.set({ month });
-    }
+    };
     isNextButtonDisabled = $derived.by(() => {
         return getIsNextButtonDisabled({
             maxValue: this.maxValue.current,
@@ -256,10 +256,10 @@ export class CalendarRootState {
     fullCalendarLabel = $derived.by(() => {
         return `${this.calendarLabel.current} ${this.headingValue}`;
     });
-    isOutsideVisibleMonths(date) {
+    isOutsideVisibleMonths = (date) => {
         return !this.visibleMonths.some((month) => isSameMonth(date, month));
-    }
-    isDateDisabled(date) {
+    };
+    isDateDisabled = (date) => {
         if (this.isDateDisabledProp.current(date) || this.disabled.current)
             return true;
         const minValue = this.minValue.current;
@@ -269,8 +269,8 @@ export class CalendarRootState {
         if (maxValue && isBefore(maxValue, date))
             return true;
         return false;
-    }
-    isDateSelected(date) {
+    };
+    isDateSelected = (date) => {
         const value = this.value.current;
         if (Array.isArray(value)) {
             return value.some((d) => isSameDay(d, date));
@@ -281,7 +281,7 @@ export class CalendarRootState {
         else {
             return isSameDay(value, date);
         }
-    }
+    };
     #shiftFocus = (node, add) => {
         return shiftCalendarFocus({
             node,
@@ -325,7 +325,7 @@ export class CalendarRootState {
             }
         }
     };
-    #handleMultipleUpdate(prev, date) {
+    #handleMultipleUpdate = (prev, date) => {
         if (!prev)
             return [date];
         if (!Array.isArray(prev)) {
@@ -349,8 +349,8 @@ export class CalendarRootState {
             }
             return next;
         }
-    }
-    #handleSingleUpdate(prev, date) {
+    };
+    #handleSingleUpdate = (prev, date) => {
         if (Array.isArray(prev)) {
             if (DEV)
                 throw new Error("Invalid value for single prop.");
@@ -363,7 +363,7 @@ export class CalendarRootState {
             return undefined;
         }
         return date;
-    }
+    };
     #onkeydown = (event) => {
         handleCalendarKeydown({
             event,
@@ -376,9 +376,9 @@ export class CalendarRootState {
         months: this.months,
         weekdays: this.weekdays,
     }));
-    getBitsAttr(part) {
-        return getCalendarBitsAttr(this, part);
-    }
+    getBitsAttr = (part) => {
+        return `data-bits-calendar-${part}`;
+    };
     props = $derived.by(() => ({
         ...getCalendarElementProps({
             fullCalendarLabel: this.fullCalendarLabel,
@@ -391,36 +391,6 @@ export class CalendarRootState {
         //
         onkeydown: this.#onkeydown,
     }));
-    createHeading(props) {
-        return new CalendarHeadingState(props, this);
-    }
-    createGrid(props) {
-        return new CalendarGridState(props, this);
-    }
-    createCell(props) {
-        return new CalendarCellState(props, this);
-    }
-    createNextButton(props) {
-        return new CalendarNextButtonState(props, this);
-    }
-    createPrevButton(props) {
-        return new CalendarPrevButtonState(props, this);
-    }
-    createGridBody(props) {
-        return new CalendarGridBodyState(props, this);
-    }
-    createGridHead(props) {
-        return new CalendarGridHeadState(props, this);
-    }
-    createGridRow(props) {
-        return new CalendarGridRowState(props, this);
-    }
-    createHeadCell(props) {
-        return new CalendarHeadCellState(props, this);
-    }
-    createHeader(props) {
-        return new CalendarHeaderState(props, this);
-    }
 }
 export class CalendarHeadingState {
     root;
@@ -452,7 +422,7 @@ class CalendarCellState {
     month;
     cellDate = $derived.by(() => toDate(this.date.current));
     isDisabled = $derived.by(() => this.root.isDateDisabled(this.date.current));
-    isUnvailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current));
+    isUnavailable = $derived.by(() => this.root.isDateUnavailableProp.current(this.date.current));
     isDateToday = $derived.by(() => isToday(this.date.current, getLocalTimeZone()));
     isOutsideMonth = $derived.by(() => !isSameMonth(this.date.current, this.month.current));
     isOutsideVisibleMonths = $derived.by(() => this.root.isOutsideVisibleMonths(this.date.current));
@@ -477,16 +447,16 @@ class CalendarCellState {
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
-        unavailable: this.isUnvailable,
+        unavailable: this.isUnavailable,
         selected: this.isSelectedDate,
     }));
     ariaDisabled = $derived.by(() => {
         return (this.isDisabled ||
             (this.isOutsideMonth && this.root.disableDaysOutsideMonth.current) ||
-            this.isUnvailable);
+            this.isUnavailable);
     });
     sharedDataAttrs = $derived.by(() => ({
-        "data-unavailable": getDataUnavailable(this.isUnvailable),
+        "data-unavailable": getDataUnavailable(this.isUnavailable),
         "data-today": this.isDateToday ? "" : undefined,
         "data-outside-month": this.isOutsideMonth ? "" : undefined,
         "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined,
@@ -504,9 +474,6 @@ class CalendarCellState {
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
     }));
-    createDay(props) {
-        return new CalendarDayState(props, this);
-    }
 }
 class CalendarDayState {
     cell;
@@ -534,7 +501,7 @@ class CalendarDayState {
     };
     snippetProps = $derived.by(() => ({
         disabled: this.cell.isDisabled,
-        unavailable: this.cell.isUnvailable,
+        unavailable: this.cell.isUnavailable,
         selected: this.cell.isSelectedDate,
         day: `${this.cell.date.current.day}`,
     }));
@@ -746,35 +713,46 @@ export function useCalendarRoot(props) {
     return setCalendarRootContext(new CalendarRootState(props));
 }
 export function useCalendarGrid(props) {
-    return getCalendarRootContext().createGrid(props);
+    const root = getCalendarRootContext();
+    return new CalendarGridState(props, root);
 }
 export function useCalendarCell(props) {
-    return setCalendarCellContext(getCalendarRootContext().createCell(props));
+    const root = getCalendarRootContext();
+    return setCalendarCellContext(new CalendarCellState(props, root));
 }
 export function useCalendarNextButton(props) {
-    return getCalendarRootContext().createNextButton(props);
+    const root = getCalendarRootContext();
+    return new CalendarNextButtonState(props, root);
 }
 export function useCalendarPrevButton(props) {
-    return getCalendarRootContext().createPrevButton(props);
+    const root = getCalendarRootContext();
+    return new CalendarPrevButtonState(props, root);
 }
 export function useCalendarDay(props) {
-    return getCalendarCellContext().createDay(props);
+    const cell = getCalendarCellContext();
+    return new CalendarDayState(props, cell);
 }
 export function useCalendarGridBody(props) {
-    return getCalendarRootContext().createGridBody(props);
+    const root = getCalendarRootContext();
+    return new CalendarGridBodyState(props, root);
 }
 export function useCalendarGridHead(props) {
-    return getCalendarRootContext().createGridHead(props);
+    const root = getCalendarRootContext();
+    return new CalendarGridHeadState(props, root);
 }
 export function useCalendarGridRow(props) {
-    return getCalendarRootContext().createGridRow(props);
+    const root = getCalendarRootContext();
+    return new CalendarGridRowState(props, root);
 }
 export function useCalendarHeadCell(props) {
-    return getCalendarRootContext().createHeadCell(props);
+    const root = getCalendarRootContext();
+    return new CalendarHeadCellState(props, root);
 }
 export function useCalendarHeader(props) {
-    return getCalendarRootContext().createHeader(props);
+    const root = getCalendarRootContext();
+    return new CalendarHeaderState(props, root);
 }
 export function useCalendarHeading(props) {
-    return getCalendarRootContext().createHeading(props);
+    const root = getCalendarRootContext();
+    return new CalendarHeadingState(props, root);
 }

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useCalendarCell } from "../calendar.svelte.js";
-	import type { CellProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { CalendarCellProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		children,
@@ -13,7 +13,7 @@
 		date,
 		month,
 		...restProps
-	}: CellProps = $props();
+	}: CalendarCellProps = $props();
 
 	const cellState = useCalendarCell({
 		id: box.with(() => id),