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

package/dist/bits/context-menu/index.d.ts

@@ -1,18 +1 @@
-export { default as Root } from "./components/context-menu.svelte";
-export { default as Sub } from "../menu/components/menu-sub.svelte";
-export { default as Item } from "../menu/components/menu-item.svelte";
-export { default as Group } from "../menu/components/menu-group.svelte";
-export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
-export { default as Arrow } from "../menu/components/menu-arrow.svelte";
-export { default as Content } from "./components/context-menu-content.svelte";
-export { default as ContentStatic } from "./components/context-menu-content-static.svelte";
-export { default as Trigger } from "./components/context-menu-trigger.svelte";
-export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
-export { default as Separator } from "../menu/components/menu-separator.svelte";
-export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
-export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
-export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
-export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
-export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { ContextMenuArrowProps as ArrowProps, ContextMenuCheckboxItemProps as CheckboxItemProps, ContextMenuGroupProps as GroupProps, ContextMenuItemProps as ItemProps, ContextMenuGroupHeadingProps as GroupHeadingProps, ContextMenuRootProps as RootProps, ContextMenuRadioGroupProps as RadioGroupProps, ContextMenuRadioItemProps as RadioItemProps, ContextMenuSeparatorProps as SeparatorProps, ContextMenuSubContentProps as SubContentProps, ContextMenuSubContentStaticProps as SubContentStaticProps, ContextMenuSubProps as SubProps, ContextMenuSubTriggerProps as SubTriggerProps, ContextMenuContentProps as ContentProps, ContextMenuContentStaticProps as ContentStaticProps, ContextMenuTriggerProps as TriggerProps, ContextMenuPortalProps as PortalProps, } from "./types.js";
+export * as ContextMenu from "./exports.js";

package/dist/bits/context-menu/index.js

@@ -1,17 +1 @@
-export { default as Root } from "./components/context-menu.svelte";
-export { default as Sub } from "../menu/components/menu-sub.svelte";
-export { default as Item } from "../menu/components/menu-item.svelte";
-export { default as Group } from "../menu/components/menu-group.svelte";
-export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
-export { default as Arrow } from "../menu/components/menu-arrow.svelte";
-export { default as Content } from "./components/context-menu-content.svelte";
-export { default as ContentStatic } from "./components/context-menu-content-static.svelte";
-export { default as Trigger } from "./components/context-menu-trigger.svelte";
-export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
-export { default as Separator } from "../menu/components/menu-separator.svelte";
-export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
-export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
-export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
-export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
-export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
+export * as ContextMenu from "./exports.js";

package/dist/bits/context-menu/types.d.ts

@@ -11,5 +11,5 @@ export type ContextMenuTriggerPropsWithoutHTML = WithChild<{
     disabled?: boolean;
 }>;
 export type ContextMenuTriggerProps = ContextMenuTriggerPropsWithoutHTML & Without<PrimitiveDivAttributes, ContextMenuTriggerPropsWithoutHTML>;
-export type { ArrowProps as ContextMenuArrowProps, ContentStaticProps as ContextMenuContentStaticProps, CheckboxItemProps as ContextMenuCheckboxItemProps, GroupProps as ContextMenuGroupProps, ItemProps as ContextMenuItemProps, GroupHeadingProps as ContextMenuGroupHeadingProps, RootProps as ContextMenuRootProps, RadioGroupProps as ContextMenuRadioGroupProps, RadioItemProps as ContextMenuRadioItemProps, SeparatorProps as ContextMenuSeparatorProps, SubContentProps as ContextMenuSubContentProps, SubContentStaticProps as ContextMenuSubContentStaticProps, SubProps as ContextMenuSubProps, SubTriggerProps as ContextMenuSubTriggerProps, PortalProps as ContextMenuPortalProps, } from "../menu/index.js";
+export type { MenuArrowProps as ContextMenuArrowProps, MenuContentStaticProps as ContextMenuContentStaticProps, MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuGroupProps as ContextMenuGroupProps, MenuItemProps as ContextMenuItemProps, MenuGroupHeadingProps as ContextMenuGroupHeadingProps, MenuRootProps as ContextMenuRootProps, MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioItemProps as ContextMenuRadioItemProps, MenuSeparatorProps as ContextMenuSeparatorProps, MenuSubContentProps as ContextMenuSubContentProps, MenuSubContentStaticProps as ContextMenuSubContentStaticProps, MenuSubProps as ContextMenuSubProps, MenuSubTriggerProps as ContextMenuSubTriggerProps, MenuPortalProps as ContextMenuPortalProps, } from "../menu/types.js";
 export type { MenuRootPropsWithoutHTML as ContextMenuRootPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as ContextMenuContentStaticPropsWithoutHTML, MenuArrowPropsWithoutHTML as ContextMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as ContextMenuCheckboxItemPropsWithoutHTML, MenuGroupPropsWithoutHTML as ContextMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as ContextMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as ContextMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as ContextMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as ContextMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as ContextMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as ContextMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as ContextMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as ContextMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as ContextMenuSubContentStaticPropsWithoutHTML, MenuPortalPropsWithoutHTML as ContextMenuPortalPropsWithoutHTML, } from "../menu/types.js";

package/dist/bits/date-field/components/date-field-input.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useDateFieldInput } from "../date-field.svelte.js";
-	import type { InputProps } from "../index.js";
+	import type { DateFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./date-field-hidden-input.svelte";
-	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 {
 		id = useId(),
@@ -13,7 +13,7 @@
 		children,
 		child,
 		...restProps
-	}: InputProps = $props();
+	}: DateFieldInputProps = $props();
 
 	const inputState = useDateFieldInput({
 		id: box.with(() => id),

package/dist/bits/date-field/components/date-field-input.svelte.d.ts

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

package/dist/bits/date-field/components/date-field-label.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useDateFieldLabel } from "../date-field.svelte.js";
-	import type { LabelProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { DateFieldLabelProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		id = useId(),
@@ -11,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: LabelProps = $props();
+	}: DateFieldLabelProps = $props();
 
 	const labelState = useDateFieldLabel({
 		id: box.with(() => id),

package/dist/bits/date-field/components/date-field-label.svelte.d.ts

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

package/dist/bits/date-field/components/date-field-segment.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useDateFieldSegment } from "../date-field.svelte.js";
-	import type { SegmentProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { DateFieldSegmentProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		id = useId(),
@@ -12,7 +12,7 @@
 		child,
 		part,
 		...restProps
-	}: SegmentProps = $props();
+	}: DateFieldSegmentProps = $props();
 
 	const segmentState = useDateFieldSegment(part, {
 		id: box.with(() => id),

package/dist/bits/date-field/components/date-field-segment.svelte.d.ts

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

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

@@ -2,9 +2,9 @@
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateFieldRoot } from "../date-field.svelte.js";
-	import type { RootProps } from "../index.js";
+	import type { DateFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/callbacks.js";
-	import { getDefaultDate } from "../../../shared/date/utils.js";
+	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 
 	let {
 		disabled = false,
@@ -27,7 +27,7 @@
 		controlledValue = false,
 		errorMessageId,
 		children,
-	}: RootProps = $props();
+	}: DateFieldRootProps = $props();
 
 	if (placeholder === undefined) {
 		const defaultPlaceholder = getDefaultDate({

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

@@ -4,11 +4,9 @@ import { type WritableBox } from "svelte-toolbelt";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.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 { DateAndTimeSegmentObj, DateSegmentObj, DateSegmentPart, SegmentValueObj, TimeSegmentObj, TimeSegmentPart } from "../../shared/date/field/types.js";
-import { type Formatter } from "../../shared/date/formatter.js";
-import type { SegmentPart } from "../../shared/index.js";
-import type { DateOnInvalid, DateValidator, Granularity, HourCycle } from "../../shared/date/types.js";
+import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, TimeSegmentPart } from "../../shared/date/types.js";
+import { type Formatter } from "../../internal/date-time/formatter.js";
+import { type Announcer } from "../../internal/date-time/announcer.js";
 export declare const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
 export type DateFieldRootStateProps = WritableBoxedValues<{
     value: DateValue | undefined;
@@ -53,10 +51,10 @@ export declare class DateFieldRootState {
     segmentValues: SegmentValueObj;
     announcer: Announcer;
     readonlySegmentsSet: Set<SegmentPart>;
-    segmentStates: import("../../shared/date/field/types.js").SegmentStateMap;
+    segmentStates: import("../../internal/date-time/field/types.js").SegmentStateMap;
     descriptionNode: HTMLElement | null;
     validationNode: HTMLElement | null;
-    states: import("../../shared/date/field/types.js").SegmentStateMap;
+    states: import("../../internal/date-time/field/types.js").SegmentStateMap;
     dayPeriodNode: HTMLElement | null;
     rangeRoot: DateRangeFieldRootState | undefined;
     name: string;
@@ -66,23 +64,23 @@ export declare 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: HTMLElement | null): void;
+    setFieldNode: (node: HTMLElement | null) => void;
     /**
      * 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(): HTMLElement | null;
+    getFieldNode: () => HTMLElement | null;
     /**
      * 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: HTMLElement | null): void;
+    setLabelNode: (node: HTMLElement | null) => void;
     /**
      * 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(): HTMLElement | null;
-    clearUpdating(): void;
+    getLabelNode: () => HTMLElement | null;
+    clearUpdating: () => void;
     setValue(value: DateValue | undefined): void;
     syncSegmentValues(value: DateValue): void;
     validationStatus: false | {
@@ -98,14 +96,14 @@ export declare class DateFieldRootState {
     isInvalid: boolean;
     inferredGranularity: Granularity;
     allSegmentContent: {
-        obj: import("../../shared/date/field/types.js").SegmentContentObj;
+        obj: import("../../internal/date-time/field/types.js").SegmentContentObj;
         arr: {
-            part: import("../../shared/date/field/types.js").SegmentPart;
+            part: import("../../internal/date-time/field/types.js").SegmentPart;
             value: string;
         }[];
     };
     segmentContents: {
-        part: import("../../shared/date/field/types.js").SegmentPart;
+        part: import("../../internal/date-time/field/types.js").SegmentPart;
         value: string;
     }[];
     sharedSegmentAttrs: {
@@ -144,15 +142,11 @@ export declare class DateFieldRootState {
         "data-readonly": "" | undefined;
         "data-segment": string;
     };
-    createInput(props: DateFieldInputStateProps): DateFieldInputState;
-    createLabel(props: DateFieldLabelStateProps): DateFieldLabelState;
-    createHiddenInput(): DateFieldHiddenInputState;
-    createSegment(part: SegmentPart, props: WithRefProps): DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldYearSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldDayLiteralSegmentState | DateFieldTimeZoneSegmentState;
 }
 type DateFieldInputStateProps = WithRefProps & ReadableBoxedValues<{
     name: string;
 }>;
-declare class DateFieldInputState {
+export declare class DateFieldInputState {
     #private;
     root: DateFieldRootState;
     constructor(props: DateFieldInputStateProps, root: DateFieldRootState);

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

@@ -1,18 +1,18 @@
 import { box } 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 { useRefById } from "../../internal/use-ref-by-id.svelte.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 { onDestroyEffect } from "../../internal/on-destroy-effect.svelte.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 +136,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 +155,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;
     }
@@ -488,24 +488,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 +778,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 +819,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 +829,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 +850,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 +1010,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 +1076,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)
@@ -2090,38 +2063,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 { Granularity } from "../../shared/date/types.js";
 export type DateFieldRootPropsWithoutHTML = WithChildren<{
     /**
      * The value of the date field.