bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/date-field/date-field.svelte.js

@@ -1,18 +1,16 @@
-import { box } from "svelte-toolbelt";
+import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { getAnnouncer } from "../../shared/date/announcer.js";
-import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../shared/date/field/helpers.js";
-import { createFormatter } from "../../shared/date/formatter.js";
-import { getDaysInMonth, isBefore, toDate } from "../../shared/date/utils.js";
 import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
-import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../shared/date/field.js";
-import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../shared/date/field/parts.js";
-import { createContext } from "../../internal/createContext.js";
-import { useId } from "../../internal/useId.js";
-import { onDestroyEffect } from "../../internal/onDestroyEffect.svelte.js";
+import { createContext } from "../../internal/create-context.js";
+import { useId } from "../../internal/use-id.js";
+import { createFormatter } from "../../internal/date-time/formatter.js";
+import { getAnnouncer } from "../../internal/date-time/announcer.js";
+import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranularity, initSegmentStates, initializeSegmentValues, isAcceptableSegmentKey, isDateAndTimeSegmentObj, isDateSegmentPart, isFirstSegment, removeDescriptionElement, setDescription, } from "../../internal/date-time/field/helpers.js";
+import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
+import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
 export const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
 const DATE_FIELD_LABEL_ATTR = "data-date-field-label";
 export class DateFieldRootState {
@@ -136,14 +134,14 @@ export class DateFieldRootState {
      * Sets the field node for the `DateFieldRootState` instance. We use this method so we can
      * keep `#fieldNode` private to prevent accidental usage of the incorrect field node.
      */
-    setFieldNode(node) {
+    setFieldNode = (node) => {
         this.#fieldNode = node;
-    }
+    };
     /**
      * Gets the correct field node for the date field regardless of whether it's being
      * used in a standalone context or within a `DateRangeField` component.
      */
-    getFieldNode() {
+    getFieldNode = () => {
         /** If we're not within a DateRangeField, we return this field. */
         if (!this.rangeRoot) {
             return this.#fieldNode;
@@ -155,34 +153,34 @@ export class DateFieldRootState {
              */
             return this.rangeRoot.fieldNode;
         }
-    }
+    };
     /**
      * Sets the label node for the `DateFieldRootState` instance. We use this method so we can
      * keep `#labelNode` private to prevent accidental usage of the incorrect label node.
      */
-    setLabelNode(node) {
+    setLabelNode = (node) => {
         this.#labelNode = node;
-    }
+    };
     /**
      * Gets the correct label node for the date field regardless of whether it's being used in
      * a standalone context or within a `DateRangeField` component.
      */
-    getLabelNode() {
+    getLabelNode = () => {
         /** If we're not within a DateRangeField, we return this field. */
         if (!this.rangeRoot) {
             return this.#labelNode;
         }
         /** Otherwise we return the rangeRoot's label node. */
         return this.rangeRoot.labelNode;
-    }
-    clearUpdating() {
+    };
+    clearUpdating = () => {
         this.states.day.updating = null;
         this.states.month.updating = null;
         this.states.year.updating = null;
         this.states.hour.updating = null;
         this.states.minute.updating = null;
         this.states.dayPeriod.updating = null;
-    }
+    };
     setValue(value) {
         this.value.current = value;
     }
@@ -381,7 +379,7 @@ export class DateFieldRootState {
                 const next = castCb(pVal);
                 this.states.hour.updating = next;
                 if (next !== null && prev.dayPeriod !== null) {
-                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })));
+                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })), this.hourCycle.current);
                     if (dayPeriod === "AM" || dayPeriod === "PM") {
                         prev.dayPeriod = dayPeriod;
                     }
@@ -488,24 +486,8 @@ export class DateFieldRootState {
             tabindex: this.disabled.current ? undefined : 0,
         };
     };
-    createInput(props) {
-        return new DateFieldInputState(props, this);
-    }
-    createLabel(props) {
-        return new DateFieldLabelState(props, this);
-    }
-    createHiddenInput() {
-        return new DateFieldHiddenInputState(this);
-    }
-    createSegment(part, props) {
-        return segmentPartToInstance({
-            part,
-            segmentProps: props,
-            root: this,
-        });
-    }
 }
-class DateFieldInputState {
+export class DateFieldInputState {
     #id;
     #ref;
     #name;
@@ -794,24 +776,19 @@ class DateFieldDaySegmentState {
         });
     };
     props = $derived.by(() => {
-        const segmentValues = this.#root.segmentValues;
-        const isEmpty = segmentValues.day === null;
-        const placeholder = this.#root.placeholder.current;
-        const date = segmentValues.day
-            ? placeholder.set({ day: Number.parseInt(segmentValues.day) })
-            : placeholder;
-        const valueNow = date.day;
-        const valueMin = 1;
-        const valueMax = getDaysInMonth(toDate(date));
-        const valueText = isEmpty ? "Empty" : `${valueNow}`;
+        const date = this.#root.segmentValues.day
+            ? this.#root.placeholder.current.set({
+                day: Number.parseInt(this.#root.segmentValues.day),
+            })
+            : this.#root.placeholder.current;
         return {
             ...this.#root.sharedSegmentAttrs,
             id: this.#id.current,
             "aria-label": "day,",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
+            "aria-valuemin": 1,
+            "aria-valuemax": getDaysInMonth(toDate(date)),
+            "aria-valuenow": date.day,
+            "aria-valuetext": this.#root.segmentValues.day === null ? "Empty" : `${date.day}`,
             onkeydown: this.#onkeydown,
             onfocusout: this.#onfocusout,
             onclick: this.#root.handleSegmentClick,
@@ -840,7 +817,6 @@ class DateFieldMonthSegmentState {
         return `${month} - ${this.#root.formatter.fullMonth(toDate(this.#root.placeholder.current.set({ month })))}`;
     };
     #onkeydown = (e) => {
-        const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
             return;
         if (e.key !== kbd.TAB)
@@ -851,14 +827,14 @@ class DateFieldMonthSegmentState {
         if (isArrowUp(e.key)) {
             this.#updateSegment("month", (prev) => {
                 if (prev === null) {
-                    const next = placeholder.month;
+                    const next = this.#root.placeholder.current.month;
                     this.#announcer.announce(this.getAnnouncement(next));
                     if (String(next).length === 1) {
                         return `0${next}`;
                     }
                     return `${next}`;
                 }
-                const next = placeholder
+                const next = this.#root.placeholder.current
                     .set({ month: Number.parseInt(prev) })
                     .cycle("month", 1).month;
                 this.#announcer.announce(this.getAnnouncement(next));
@@ -872,14 +848,14 @@ class DateFieldMonthSegmentState {
         if (isArrowDown(e.key)) {
             this.#updateSegment("month", (prev) => {
                 if (prev === null) {
-                    const next = placeholder.month;
+                    const next = this.#root.placeholder.current.month;
                     this.#announcer.announce(this.getAnnouncement(next));
                     if (String(next).length === 1) {
                         return `0${next}`;
                     }
                     return `${next}`;
                 }
-                const next = placeholder
+                const next = this.#root.placeholder.current
                     .set({ month: Number.parseInt(prev) })
                     .cycle("month", -1).month;
                 this.#announcer.announce(this.getAnnouncement(next));
@@ -1032,27 +1008,22 @@ class DateFieldMonthSegmentState {
         });
     };
     props = $derived.by(() => {
-        const segmentValues = this.#root.segmentValues;
-        const placeholder = this.#root.placeholder.current;
-        const isEmpty = segmentValues.month === null;
-        const date = segmentValues.month
-            ? placeholder.set({ month: Number.parseInt(segmentValues.month) })
-            : placeholder;
-        const valueNow = date.month;
-        const valueMin = 1;
-        const valueMax = 12;
-        const valueText = isEmpty
-            ? "Empty"
-            : `${valueNow} - ${this.#root.formatter.fullMonth(toDate(date))}`;
+        const date = this.#root.segmentValues.month
+            ? this.#root.placeholder.current.set({
+                month: Number.parseInt(this.#root.segmentValues.month),
+            })
+            : this.#root.placeholder.current;
         return {
             ...this.#root.sharedSegmentAttrs,
             id: this.#id.current,
             "aria-label": "month, ",
             contenteditable: "true",
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax,
-            "aria-valuenow": valueNow,
-            "aria-valuetext": valueText,
+            "aria-valuemin": 1,
+            "aria-valuemax": 12,
+            "aria-valuenow": date.month,
+            "aria-valuetext": this.#root.segmentValues.month === null
+                ? "Empty"
+                : `${date.month} - ${this.#root.formatter.fullMonth(toDate(date))}`,
             onkeydown: this.#onkeydown,
             onfocusout: this.#onfocusout,
             onclick: this.#root.handleSegmentClick,
@@ -1103,12 +1074,12 @@ class DateFieldYearSegmentState {
             ref: this.#ref,
         });
     }
-    #resetBackspaceCount() {
+    #resetBackspaceCount = () => {
         this.#backspaceCount = 0;
-    }
-    #incrementBackspaceCount() {
+    };
+    #incrementBackspaceCount = () => {
         this.#backspaceCount++;
-    }
+    };
     #onkeydown = (e) => {
         const placeholder = this.#root.placeholder.current;
         if (e.ctrlKey || e.metaKey || this.#root.disabled.current)
@@ -1307,6 +1278,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1329,6 +1304,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1336,10 +1315,12 @@ class DateFieldHourSegmentState {
         }
         if (isNumberString(e.key)) {
             const num = Number.parseInt(e.key);
-            const max = "dayPeriod" in this.#root.segmentValues &&
-                this.#root.segmentValues.dayPeriod !== null
-                ? 12
-                : 23;
+            const max = this.#root.hourCycle.current === 24
+                ? 23
+                : "dayPeriod" in this.#root.segmentValues &&
+                    this.#root.segmentValues.dayPeriod !== null
+                    ? 12
+                    : 23;
             const maxStart = Math.floor(max / 10);
             let moveToNext = false;
             const numIsZero = num === 0;
@@ -1414,6 +1395,15 @@ class DateFieldHourSegmentState {
                         this.#root.states.hour.lastKeyZero = false;
                         return `0${num}`;
                     }
+                    /**
+                     * If the new number is 0 and the hour cycle is set to 24, then we move
+                     * to the next segment, returning the new number with a leading 0.
+                     */
+                    if (num === 0 && this.#root.hourCycle.current === 24) {
+                        moveToNext = true;
+                        this.#root.states.hour.lastKeyZero = false;
+                        return `0${num}`;
+                    }
                     /**
                      * If the new number is 0, then we simply return the previous value, since
                      * they didn't actually type a new number.
@@ -2090,38 +2080,45 @@ export function useDateFieldRoot(props, rangeRoot) {
     return setDateFieldRootContext(new DateFieldRootState(props, rangeRoot));
 }
 export function useDateFieldInput(props) {
-    return getDateFieldRootContext().createInput(props);
+    const root = getDateFieldRootContext();
+    return new DateFieldInputState(props, root);
 }
 export function useDateFieldHiddenInput() {
-    return getDateFieldRootContext().createHiddenInput();
+    const root = getDateFieldRootContext();
+    return new DateFieldHiddenInputState(root);
 }
 export function useDateFieldSegment(part, props) {
-    return getDateFieldRootContext().createSegment(part, props);
+    const root = getDateFieldRootContext();
+    return segmentPartToInstance({
+        part,
+        segmentProps: props,
+        root,
+    });
 }
 export function useDateFieldLabel(props) {
-    return getDateFieldRootContext().createLabel(props);
+    const root = getDateFieldRootContext();
+    return new DateFieldLabelState(props, root);
 }
 function segmentPartToInstance(props) {
-    const { part, root, segmentProps } = props;
-    switch (part) {
+    switch (props.part) {
         case "day":
-            return new DateFieldDaySegmentState(segmentProps, root);
+            return new DateFieldDaySegmentState(props.segmentProps, props.root);
         case "month":
-            return new DateFieldMonthSegmentState(segmentProps, root);
+            return new DateFieldMonthSegmentState(props.segmentProps, props.root);
         case "year":
-            return new DateFieldYearSegmentState(segmentProps, root);
+            return new DateFieldYearSegmentState(props.segmentProps, props.root);
         case "hour":
-            return new DateFieldHourSegmentState(segmentProps, root);
+            return new DateFieldHourSegmentState(props.segmentProps, props.root);
         case "minute":
-            return new DateFieldMinuteSegmentState(segmentProps, root);
+            return new DateFieldMinuteSegmentState(props.segmentProps, props.root);
         case "second":
-            return new DateFieldSecondSegmentState(segmentProps, root);
+            return new DateFieldSecondSegmentState(props.segmentProps, props.root);
         case "dayPeriod":
-            return new DateFieldDayPeriodSegmentState(segmentProps, root);
+            return new DateFieldDayPeriodSegmentState(props.segmentProps, props.root);
         case "literal":
-            return new DateFieldDayLiteralSegmentState(segmentProps, root);
+            return new DateFieldDayLiteralSegmentState(props.segmentProps, props.root);
         case "timeZoneName":
-            return new DateFieldTimeZoneSegmentState(segmentProps, root);
+            return new DateFieldTimeZoneSegmentState(props.segmentProps, props.root);
     }
 }
 function prependYearZeros(year) {

package/dist/bits/date-field/exports.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/date-field.svelte";
+export { default as Input } from "./components/date-field-input.svelte";
+export { default as Label } from "./components/date-field-label.svelte";
+export { default as Segment } from "./components/date-field-segment.svelte";
+export type { DateFieldRootProps as RootProps, DateFieldInputProps as InputProps, DateFieldLabelProps as LabelProps, DateFieldSegmentProps as SegmentProps, } from "./types.js";

package/dist/bits/date-field/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/date-field.svelte";
+export { default as Input } from "./components/date-field-input.svelte";
+export { default as Label } from "./components/date-field-label.svelte";
+export { default as Segment } from "./components/date-field-segment.svelte";

package/dist/bits/date-field/index.d.ts

@@ -1,5 +1 @@
-export { default as Root } from "./components/date-field.svelte";
-export { default as Input } from "./components/date-field-input.svelte";
-export { default as Label } from "./components/date-field-label.svelte";
-export { default as Segment } from "./components/date-field-segment.svelte";
-export type { DateFieldRootProps as RootProps, DateFieldInputProps as InputProps, DateFieldLabelProps as LabelProps, DateFieldSegmentProps as SegmentProps, } from "./types.js";
+export * as DateField from "./exports.js";

package/dist/bits/date-field/index.js

@@ -1,4 +1 @@
-export { default as Root } from "./components/date-field.svelte";
-export { default as Input } from "./components/date-field-input.svelte";
-export { default as Label } from "./components/date-field-label.svelte";
-export { default as Segment } from "./components/date-field-segment.svelte";
+export * as DateField from "./exports.js";

package/dist/bits/date-field/types.d.ts

@@ -1,9 +1,8 @@
 import type { DateValue } from "@internationalized/date";
-import type { SegmentPart, WithChildren } from "../../shared/index.js";
+import type { DateOnInvalid, DateValidator, EditableSegmentPart, SegmentPart, WithChildren } from "../../shared/index.js";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes, PrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { EditableSegmentPart } from "../../shared/date/field/types.js";
-import type { DateOnInvalid, DateValidator, Granularity } from "../../shared/date/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { Granularity } from "../../shared/date/types.js";
 export type DateFieldRootPropsWithoutHTML = WithChildren<{
     /**
      * The value of the date field.
@@ -150,10 +149,10 @@ export type DateFieldInputPropsWithoutHTML = WithChild<{
      */
     name?: string;
 }, DateFieldInputSnippetProps>;
-export type DateFieldInputProps = DateFieldInputPropsWithoutHTML & Without<PrimitiveDivAttributes, DateFieldInputPropsWithoutHTML>;
+export type DateFieldInputProps = DateFieldInputPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateFieldInputPropsWithoutHTML>;
 export type DateFieldSegmentPropsWithoutHTML = WithChild<{
     part: SegmentPart;
 }>;
-export type DateFieldSegmentProps = DateFieldSegmentPropsWithoutHTML & Without<PrimitiveSpanAttributes, DateFieldSegmentPropsWithoutHTML>;
+export type DateFieldSegmentProps = DateFieldSegmentPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, DateFieldSegmentPropsWithoutHTML>;
 export type DateFieldLabelPropsWithoutHTML = WithChild;
-export type DateFieldLabelProps = DateFieldLabelPropsWithoutHTML & Without<PrimitiveDivAttributes, DateFieldLabelPropsWithoutHTML>;
+export type DateFieldLabelProps = DateFieldLabelPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateFieldLabelPropsWithoutHTML>;

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CalendarProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { DatePickerCalendarProps } from "../types.js";
 	import { getDatePickerRootContext } from "../date-picker.svelte.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { useCalendarRoot } from "../../calendar/calendar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
 
 	let {
 		children,
@@ -12,7 +11,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: CalendarProps = $props();
+	}: DatePickerCalendarProps = $props();
 
 	const datePickerRootState = getDatePickerRootContext();
 

package/dist/bits/date-picker/components/date-picker-calendar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarProps } from "../index.js";
+import type { DatePickerCalendarProps } 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 DatePickerCalendar: $$__sveltets_2_IsomorphicComponent<CalendarProps, {
+declare const DatePickerCalendar: $$__sveltets_2_IsomorphicComponent<DatePickerCalendarProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DatePickerCalendar = InstanceType<typeof DatePickerCalendar>;

package/dist/bits/date-picker/components/date-picker-content-static.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-	import type { ContentStaticProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { DatePickerContentStaticProps } from "../types.js";
 	import PopoverContentStatic from "../../popover/components/popover-content-static.svelte";
-	import { pickerOpenFocus } from "../../../shared/date/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { pickerOpenFocus } from "../../../internal/date-time/calendar-helpers.svelte.js";
 
-	let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: ContentStaticProps = $props();
+	let {
+		ref = $bindable(null),
+		onOpenAutoFocus,
+		...restProps
+	}: DatePickerContentStaticProps = $props();
 
 	const mergedProps = $derived(
 		mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })

package/dist/bits/date-picker/components/date-picker-content-static.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { DatePickerContentStaticProps } 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 DatePickerContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const DatePickerContentStatic: $$__sveltets_2_IsomorphicComponent<DatePickerContentStaticProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DatePickerContentStatic = InstanceType<typeof DatePickerContentStatic>;

package/dist/bits/date-picker/components/date-picker-content.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { ContentProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { DatePickerContentProps } from "../types.js";
 	import PopoverContent from "../../popover/components/popover-content.svelte";
-	import { pickerOpenFocus } from "../../../shared/date/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { pickerOpenFocus } from "../../../internal/date-time/calendar-helpers.svelte.js";
 
-	let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: ContentProps = $props();
+	let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: DatePickerContentProps = $props();
 
 	const mergedProps = $derived(
 		mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })

package/dist/bits/date-picker/components/date-picker-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { DatePickerContentProps } 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 DatePickerContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const DatePickerContent: $$__sveltets_2_IsomorphicComponent<DatePickerContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DatePickerContent = InstanceType<typeof DatePickerContent>;

package/dist/bits/date-picker/components/date-picker-trigger.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import type { TriggerProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { DatePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
-	import { handleSegmentNavigation, isSegmentNavigationKey } from "../../../shared/date/field.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
 	import { DATE_FIELD_INPUT_ATTR } from "../../date-field/date-field.svelte.js";
+	import {
+		handleSegmentNavigation,
+		isSegmentNavigationKey,
+	} from "../../../internal/date-time/field/segments.js";
 
-	let { ref = $bindable(null), onkeydown, ...restProps }: TriggerProps = $props();
+	let { ref = $bindable(null), onkeydown, ...restProps }: DatePickerTriggerProps = $props();
 
 	function onKeydown(e: KeyboardEvent) {
 		if (isSegmentNavigationKey(e.key)) {

package/dist/bits/date-picker/components/date-picker-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { DatePickerTriggerProps } 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 DatePickerTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const DatePickerTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DatePickerTrigger = InstanceType<typeof DatePickerTrigger>;

package/dist/bits/date-picker/components/date-picker.svelte

@@ -3,12 +3,12 @@
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDatePickerRoot } from "../date-picker.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { getDefaultDate } from "../../../shared/date/utils.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { DatePickerRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
 	import { usePopoverRoot } from "../../popover/popover.svelte.js";
 	import { useDateFieldRoot } from "../../date-field/date-field.svelte.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 
 	let {
 		open = false,
@@ -46,7 +46,7 @@
 		controlledOpen = false,
 		errorMessageId,
 		children,
-	}: RootProps = $props();
+	}: DatePickerRootProps = $props();
 
 	if (placeholder === undefined) {
 		const defaultPlaceholder = getDefaultDate({

package/dist/bits/date-picker/date-picker.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { DateValue } from "@internationalized/date";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { DateMatcher, Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
-import type { SegmentPart } from "../../shared/index.js";
+import type { DateMatcher, SegmentPart } from "../../shared/index.js";
+import type { Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
 type DatePickerRootStateProps = WritableBoxedValues<{
     value: DateValue | undefined;
     open: boolean;

package/dist/bits/date-picker/date-picker.svelte.js

@@ -1,4 +1,4 @@
-import { createContext } from "../../internal/createContext.js";
+import { createContext } from "../../internal/create-context.js";
 class DatePickerRootState {
     props;
     constructor(props) {

package/dist/bits/date-picker/exports.d.ts

@@ -0,0 +1,22 @@
+export { default as Root } from "./components/date-picker.svelte";
+export { default as Calendar } from "./components/date-picker-calendar.svelte";
+export { default as Content } from "./components/date-picker-content.svelte";
+export { default as ContentStatic } from "./components/date-picker-content-static.svelte";
+export { default as Trigger } from "./components/date-picker-trigger.svelte";
+export { default as Arrow } from "../popover/components/popover-arrow.svelte";
+export { default as Close } from "../popover/components/popover-close.svelte";
+export { default as Input } from "../date-field/components/date-field-input.svelte";
+export { default as Label } from "../date-field/components/date-field-label.svelte";
+export { default as Segment } from "../date-field/components/date-field-segment.svelte";
+export { default as GridBody } from "../calendar/components/calendar-grid-body.svelte";
+export { default as GridHead } from "../calendar/components/calendar-grid-head.svelte";
+export { default as GridRow } from "../calendar/components/calendar-grid-row.svelte";
+export { default as Grid } from "../calendar/components/calendar-grid.svelte";
+export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
+export { default as Header } from "../calendar/components/calendar-header.svelte";
+export { default as Heading } from "../calendar/components/calendar-heading.svelte";
+export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
+export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as Cell } from "../calendar/components/calendar-cell.svelte";
+export { default as Day } from "../calendar/components/calendar-day.svelte";
+export type { DatePickerRootProps as RootProps, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerContentStaticProps as ContentStaticProps, DatePickerTriggerProps as TriggerProps, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonProps as PrevButtonProps, } from "./types.js";