bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/utilities/scroll-lock/index.d.ts

@@ -5,4 +5,14 @@ export type ScrollLockProps = {
      * @defaultValue true
      */
     preventScroll?: boolean;
+    /**
+     * The delay in milliseconds before the scrollbar is restored after closing the
+     * dialog. This is only applicable when using the `child` snippet for custom
+     * transitions and `preventScroll` is `true`. You should set this to a value
+     * greater than the transition duration to prevent content from shifting during
+     * the transition.
+     *
+     * @defaultValue null
+     */
+    restoreScrollDelay?: number | null;
 };

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { ScrollLockProps } from "./index.js";
-	import { useBodyScrollLock } from "../../../internal/useBodyScrollLock.svelte.js";
+	import { useBodyScrollLock } from "../../../internal/use-body-scroll-lock.svelte.js";
 
-	let { preventScroll = true }: ScrollLockProps = $props();
+	let { preventScroll = true, restoreScrollDelay = null }: ScrollLockProps = $props();
 
-	useBodyScrollLock(preventScroll);
+	useBodyScrollLock(preventScroll, () => restoreScrollDelay);
 </script>

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte.d.ts

@@ -1,19 +1,4 @@
 import type { ScrollLockProps } from "./index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ScrollLock: $$__sveltets_2_IsomorphicComponent<ScrollLockProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ScrollLock = InstanceType<typeof ScrollLock>;
+declare const ScrollLock: import("svelte").Component<ScrollLockProps, {}, "">;
+type ScrollLock = ReturnType<typeof ScrollLock>;
 export default ScrollLock;

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { TextSelectionLayerImplProps } from "./types.js";
-	import { useTextSelectionLayer } from "./useTextSelectionLayer.svelte.js";
+	import { useTextSelectionLayer } from "./use-text-selection-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte.d.ts

@@ -1,19 +1,4 @@
 import type { TextSelectionLayerImplProps } 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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TextSelectionLayer: $$__sveltets_2_IsomorphicComponent<TextSelectionLayerImplProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type TextSelectionLayer = InstanceType<typeof TextSelectionLayer>;
+declare const TextSelectionLayer: import("svelte").Component<TextSelectionLayerImplProps, {}, "">;
+type TextSelectionLayer = ReturnType<typeof TextSelectionLayer>;
 export default TextSelectionLayer;

package/dist/bits/utilities/text-selection-layer/{useTextSelectionLayer.svelte.js → use-text-selection-layer.svelte.js}

@@ -1,13 +1,10 @@
-import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { composeHandlers } from "../../../internal/composeHandlers.js";
-import { addEventListener } from "../../../internal/events.js";
+import { box, composeHandlers, executeCallbacks, useRefById, } from "svelte-toolbelt";
+import { watch } from "runed";
+import { on } from "svelte/events";
 import { noop } from "../../../internal/noop.js";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
 import { isHTMLElement } from "../../../internal/is.js";
 import { isOrContainsTarget } from "../../../internal/elements.js";
-import { executeCallbacks } from "../../../internal/executeCallbacks.js";
-const layers = new Map();
+globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     #id;
     #onPointerDownProp;
@@ -23,23 +20,24 @@ export class TextSelectionLayerState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#enabled.current,
+            deps: () => this.#enabled.current,
         });
         let unsubEvents = noop;
-        $effect(() => {
-            if (this.#enabled.current) {
-                layers.set(this, untrack(() => this.#enabled));
+        watch(() => this.#enabled.current, (isEnabled) => {
+            if (isEnabled) {
+                globalThis.bitsTextSelectionLayers.set(this, this.#enabled);
+                unsubEvents();
                 unsubEvents = this.#addEventListeners();
             }
             return () => {
                 unsubEvents();
                 this.#resetSelectionLock();
-                layers.delete(this);
+                globalThis.bitsTextSelectionLayers.delete(this);
             };
         });
     }
     #addEventListeners() {
-        return executeCallbacks(addEventListener(document, "pointerdown", this.#pointerdown), addEventListener(document, "pointerup", composeHandlers(this.#resetSelectionLock, this.#onPointerUpProp)));
+        return executeCallbacks(on(document, "pointerdown", this.#pointerdown), on(document, "pointerup", composeHandlers(this.#resetSelectionLock, this.#onPointerUpProp)));
     }
     #pointerdown = (e) => {
         const node = this.#ref.current;
@@ -48,7 +46,7 @@ export class TextSelectionLayerState {
             return;
         /**
          * We only lock user-selection overflow if layer is the top most layer and
-         * pointerdown occured inside the node. You are still allowed to select text
+         * pointerdown occurred inside the node. You are still allowed to select text
          * outside the node provided pointerdown occurs outside the node.
          */
         if (!isHighestLayer(this) || !isOrContainsTarget(node, target))
@@ -83,7 +81,7 @@ function setUserSelect(node, value) {
     node.style.webkitUserSelect = value;
 }
 function isHighestLayer(instance) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsTextSelectionLayers];
     if (!layersArr.length)
         return false;
     const highestLayer = layersArr.at(-1);

package/dist/bits/utilities/visually-hidden/types.d.ts

@@ -1,3 +1,3 @@
 import type { WithChild } from "../../../internal/types.js";
-import type { PrimitiveSpanAttributes } from "../../../shared/attributes.js";
-export type VisuallyHiddenProps = WithChild<PrimitiveSpanAttributes>;
+import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
+export type VisuallyHiddenProps = WithChild<BitsPrimitiveSpanAttributes>;

package/dist/bits/utilities/visually-hidden/visually-hidden.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
 	import type { VisuallyHiddenProps } from "./types.js";
 	import type { StyleProperties } from "../../../shared/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
 
 	let { children, child, ...restProps }: VisuallyHiddenProps = $props();
 

package/dist/bits/utilities/visually-hidden/visually-hidden.svelte.d.ts

@@ -1,19 +1,4 @@
 import type { VisuallyHiddenProps } 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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const VisuallyHidden: $$__sveltets_2_IsomorphicComponent<VisuallyHiddenProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type VisuallyHidden = InstanceType<typeof VisuallyHidden>;
+declare const VisuallyHidden: import("svelte").Component<VisuallyHiddenProps, {}, "">;
+type VisuallyHidden = ReturnType<typeof VisuallyHidden>;
 export default VisuallyHidden;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-export * from "./bits/index.js";
-export type * from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export * from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/internal/arrays.d.ts

@@ -65,3 +65,26 @@ export declare function forward<T>(array: T[], index: number, increment: number,
  * @param loop loop around the array if the target index is out of bounds?
  */
 export declare function backward<T>(array: T[], index: number, decrement: number, loop?: boolean): T | undefined;
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export declare function wrapArray<T>(array: T[], startIndex: number): T[];

package/dist/internal/arrays.js

@@ -168,3 +168,38 @@ export function backward(array, index, decrement, loop = true) {
     }
     return array[targetIndex];
 }
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export function getNextMatch(values, search, currentMatch) {
+    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+    const normalizedSearch = isRepeated ? search[0] : search;
+    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+    let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+    const excludeCurrentMatch = normalizedSearch.length === 1;
+    if (excludeCurrentMatch)
+        wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+    return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}

package/dist/internal/attrs.d.ts

@@ -6,7 +6,7 @@ export declare function getAriaExpanded(condition: boolean): "true" | "false";
 export declare function getDataDisabled(condition: boolean): "" | undefined;
 export declare function getAriaRequired(condition: boolean): "true" | "false";
 export declare function getAriaSelected(condition: boolean): "true" | "false";
-export declare function getAriaChecked(condition: boolean | "indeterminate"): "true" | "false" | "mixed";
+export declare function getAriaChecked(checked: boolean, indeterminate: boolean): "true" | "false" | "mixed";
 export declare function getAriaOrientation(orientation: "horizontal" | "vertical"): "horizontal" | "vertical";
 export declare function getAriaHidden(condition: boolean): "true" | undefined;
 export declare function getAriaInvalid(condition: boolean): "true" | undefined;

package/dist/internal/attrs.js

@@ -22,11 +22,11 @@ export function getAriaRequired(condition) {
 export function getAriaSelected(condition) {
     return condition ? "true" : "false";
 }
-export function getAriaChecked(condition) {
-    if (condition === "indeterminate") {
+export function getAriaChecked(checked, indeterminate) {
+    if (indeterminate) {
         return "mixed";
     }
-    return condition ? "true" : "false";
+    return checked ? "true" : "false";
 }
 export function getAriaOrientation(orientation) {
     return orientation;

package/dist/internal/{createEventHook.svelte.js → create-event-hook.svelte.js}

@@ -1,4 +1,4 @@
-import { executeCallbacks } from "./callbacks.js";
+import { executeCallbacks } from "svelte-toolbelt";
 export function createEventHook() {
     const callbacks = new Set();
     const callbacksToDispose = [];

package/dist/{shared/date → internal/date-time}/announcer.js

@@ -1,5 +1,5 @@
-import { isBrowser, isHTMLElement } from "../../internal/is.js";
-import { styleToString } from "../../internal/style.js";
+import { srOnlyStylesString } from "svelte-toolbelt";
+import { isBrowser, isHTMLElement } from "../is.js";
 /**
  * Creates or gets an announcer element which is used to announce messages to screen readers.
  * Within the date components, we use this to announce when the values of the individual segments
@@ -11,18 +11,7 @@ function initAnnouncer() {
     let el = document.querySelector("[data-bits-announcer]");
     if (!isHTMLElement(el)) {
         const div = document.createElement("div");
-        div.style.cssText = styleToString({
-            border: "0px",
-            clip: "rect(0px, 0px, 0px, 0px)",
-            clipPath: "inset(50%)",
-            height: "1px",
-            margin: "-1px",
-            overflow: "hidden",
-            padding: "0px",
-            position: "absolute",
-            whiteSpace: "nowrap",
-            width: "1px",
-        });
+        div.style.cssText = srOnlyStylesString;
         div.setAttribute("data-bits-announcer", "");
         div.appendChild(createLog("assertive"));
         div.appendChild(createLog("polite"));

package/dist/{shared/date → internal/date-time}/calendar-helpers.svelte.d.ts

@@ -1,9 +1,7 @@
 import { type DateValue } from "@internationalized/date";
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
-import type { Month } from "./types.js";
-import { type Formatter } from "./index.js";
-import type { CalendarRootState } from "../../bits/calendar/calendar.svelte.js";
-import { RangeCalendarRootState } from "../../bits/range-calendar/range-calendar.svelte.js";
+import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import type { Formatter } from "./formatter.js";
+import type { Month } from "../../shared/index.js";
 /**
  * Checks if a given node is a calendar cell element.
  *
@@ -184,6 +182,5 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
     readonly "data-readonly": "" | undefined;
 };
 export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
-export declare function getCalendarBitsAttr(root: CalendarRootState | RangeCalendarRootState, part: CalendarParts): string;
 export declare function pickerOpenFocus(e: Event): void;
 export {};

package/dist/{shared/date → internal/date-time}/calendar-helpers.svelte.js

@@ -1,13 +1,11 @@
 import { endOfMonth, isSameMonth, startOfMonth } from "@internationalized/date";
+import { afterTick, styleToString } from "svelte-toolbelt";
 import { untrack } from "svelte";
-import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseStringToDateValue, toDate, } from "./index.js";
-import { RangeCalendarRootState } from "../../bits/range-calendar/range-calendar.svelte.js";
-import { getDataDisabled, getDataInvalid, getDataReadonly } from "../../internal/attrs.js";
-import { afterTick } from "../../internal/afterTick.js";
-import { chunk, isValidIndex } from "../../internal/arrays.js";
-import { isHTMLElement } from "../../internal/is.js";
-import { kbd } from "../../internal/kbd.js";
-import { styleToString } from "../../internal/style.js";
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseStringToDateValue, toDate, } from "./utils.js";
+import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
+import { chunk, isValidIndex } from "../arrays.js";
+import { isHTMLElement } from "../is.js";
+import { kbd } from "../kbd.js";
 /**
  * Checks if a given node is a calendar cell element.
  *
@@ -64,7 +62,12 @@ function createMonth(props) {
         if (!startFrom) {
             startFrom = dateObj.add({ months: 1 }).set({ day: 1 });
         }
-        const extraDaysArray = Array.from({ length: extraDays }, (_, i) => {
+        let length = extraDays;
+        if (nextMonthDays.length === 0) {
+            length = extraDays - 1;
+            nextMonthDays.push(startFrom);
+        }
+        const extraDaysArray = Array.from({ length }, (_, i) => {
             const incr = i + 1;
             return startFrom.add({ days: incr });
         });
@@ -186,7 +189,7 @@ export function shiftCalendarFocus({ node, add, placeholder, calendarNode, isPre
          * starting at the beginning of the array, shift focus by the nextIndex
          * amount.
          */
-        // shift the calendard forward a month unless next month is disabled
+        // shift the calendar forward a month unless next month is disabled
         if (isNextButtonDisabled)
             return;
         const firstMonth = months[0]?.value;
@@ -219,6 +222,7 @@ export function handleCalendarKeydown({ event, handleCellClick, shiftFocus, plac
     const currentCell = event.target;
     if (!isCalendarDayNode(currentCell))
         return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (!ARROW_KEYS.includes(event.key) && !SELECT_KEYS.includes(event.key))
         return;
     event.preventDefault();
@@ -228,6 +232,7 @@ export function handleCalendarKeydown({ event, handleCellClick, shiftFocus, plac
         [kbd.ARROW_LEFT]: -1,
         [kbd.ARROW_RIGHT]: 1,
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (ARROW_KEYS.includes(event.key)) {
         const add = kbdFocusMap[event.key];
         if (add !== undefined) {
@@ -431,11 +436,6 @@ export function getCalendarElementProps({ fullCalendarLabel, id, isInvalid, disa
         "data-readonly": getDataReadonly(readonly),
     };
 }
-export function getCalendarBitsAttr(root, part) {
-    const isRange = root instanceof RangeCalendarRootState;
-    const prefix = isRange ? "data-range-calendar-" : "data-calendar-";
-    return `${prefix}${part}`;
-}
 export function pickerOpenFocus(e) {
     const nodeToFocus = document.querySelector("[data-bits-day][data-focused]");
     if (nodeToFocus) {

package/dist/{shared/date → internal/date-time}/field/helpers.d.ts

@@ -1,6 +1,7 @@
 import type { DateValue } from "@internationalized/date";
-import { type Formatter, type Granularity, type HourCycle } from "../index.js";
+import type { Formatter } from "../formatter.js";
 import type { DateAndTimeSegmentObj, DateSegmentPart, EditableSegmentPart, SegmentContentObj, SegmentPart, SegmentStateMap, SegmentValueObj } from "./types.js";
+import type { Granularity, HourCycle } from "../../../shared/date/types.js";
 export declare function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
 type SharedContentProps = {
     granularity: Granularity;

package/dist/{shared/date → internal/date-time}/field/helpers.js

@@ -1,9 +1,11 @@
-import { getPlaceholder, getSegments, hasTime, isZonedDateTime, } from "../index.js";
+import { styleToString } from "svelte-toolbelt";
+import { getPlaceholder } from "../placeholders.js";
+import { hasTime, isZonedDateTime } from "../utils.js";
 import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS, } from "./parts.js";
-import { isBrowser, isNull, isNumberString } from "../../../internal/is.js";
-import { styleToString } from "../../../internal/style.js";
-import { useId } from "../../../internal/useId.js";
-import { kbd } from "../../../internal/kbd.js";
+import { getSegments } from "./segments.js";
+import { isBrowser, isNull, isNumberString } from "../../is.js";
+import { useId } from "../../use-id.js";
+import { kbd } from "../../kbd.js";
 export function initializeSegmentValues(granularity) {
     const calendarDateTimeGranularities = ["hour", "minute", "second"];
     const initialParts = EDITABLE_SEGMENT_PARTS.map((part) => {
@@ -52,7 +54,7 @@ function createContentObj(props) {
             }
             else if (!isNull(value) && !isNull(intValue)) {
                 const formatted = formatter.part(dateRef.set({ [part]: value }), part, {
-                    hourCycle: props.hourCycle === 24 ? "h24" : undefined,
+                    hourCycle: props.hourCycle === 24 ? "h23" : undefined,
                 });
                 /**
                  * If we're operating in a 12 hour clock and the part is an hour, we handle
@@ -177,7 +179,7 @@ function getOptsByGranularity(granularity, hourCycle) {
         minute: "2-digit",
         second: "2-digit",
         timeZoneName: "short",
-        hourCycle: hourCycle === 24 ? "h24" : undefined,
+        hourCycle: hourCycle === 24 ? "h23" : undefined,
         hour12: hourCycle === 24 ? false : undefined,
     };
     if (granularity === "day") {
@@ -238,20 +240,20 @@ export function getValueFromSegments(props) {
     const { segmentObj, fieldNode, dateRef } = props;
     const usedSegments = getUsedSegments(fieldNode);
     let date = dateRef;
-    usedSegments.forEach((part) => {
+    for (const part of usedSegments) {
         if ("hour" in segmentObj) {
             const value = segmentObj[part];
             if (isNull(value))
-                return;
+                continue;
             date = date.set({ [part]: segmentObj[part] });
         }
         else if (isDateSegmentPart(part)) {
             const value = segmentObj[part];
             if (isNull(value))
-                return;
+                continue;
             date = date.set({ [part]: segmentObj[part] });
         }
-    });
+    }
     return date;
 }
 /**
@@ -300,12 +302,10 @@ export function isDateAndTimeSegmentObj(obj) {
  * value and granularity props.
  */
 export function inferGranularity(value, granularity) {
-    if (granularity) {
+    if (granularity)
         return granularity;
-    }
-    if (hasTime(value)) {
+    if (hasTime(value))
         return "minute";
-    }
     return "day";
 }
 export function isAcceptableSegmentKey(key) {

package/dist/{shared/date/field.js → internal/date-time/field/segments.js}

@@ -1,6 +1,6 @@
-import { isAnySegmentPart } from "./field/helpers.js";
-import { isHTMLElement } from "../../internal/is.js";
-import { kbd } from "../../internal/kbd.js";
+import { isAnySegmentPart } from "./helpers.js";
+import { isHTMLElement } from "../../is.js";
+import { kbd } from "../../kbd.js";
 /**
  * Handles segment navigation based on the provided keyboard event and field ID.
  *
@@ -124,6 +124,5 @@ export function getSegments(fieldNode) {
  * Get the first interactive segment within the field identified by the provided ID.
  */
 export function getFirstSegment(fieldNode) {
-    const segments = getSegments(fieldNode);
-    return segments[0];
+    return getSegments(fieldNode)[0];
 }

package/dist/{shared/date → internal/date-time}/formatter.d.ts

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import type { HourCycle } from "../../shared/date/types.js";
 export type Formatter = ReturnType<typeof createFormatter>;
 /**
  * Creates a wrapper around the `DateFormatter`, which is
@@ -17,7 +18,7 @@ export declare function createFormatter(initialLocale: string): {
     toParts: (date: DateValue, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
     custom: (date: Date, options: Intl.DateTimeFormatOptions) => string;
     part: (dateObj: DateValue, type: Intl.DateTimeFormatPartTypes, options?: Intl.DateTimeFormatOptions) => string;
-    dayPeriod: (date: Date) => "AM" | "PM";
+    dayPeriod: (date: Date, hourCycle?: HourCycle | undefined) => "AM" | "PM";
     selectedDate: (date: DateValue, includeTime?: boolean) => string;
     dayOfWeek: (date: Date, length?: Intl.DateTimeFormatOptions["weekday"]) => string;
 };

package/dist/{shared/date → internal/date-time}/formatter.js

@@ -1,5 +1,5 @@
 import { DateFormatter } from "@internationalized/date";
-import { hasTime, isZonedDateTime, toDate } from "./index.js";
+import { hasTime, isZonedDateTime, toDate } from "./utils.js";
 const defaultPartOptions = {
     year: "numeric",
     month: "numeric",
@@ -63,10 +63,11 @@ export function createFormatter(initialLocale) {
     function dayOfWeek(date, length = "narrow") {
         return new DateFormatter(locale, { weekday: length }).format(date);
     }
-    function dayPeriod(date) {
+    function dayPeriod(date, hourCycle = undefined) {
         const parts = new DateFormatter(locale, {
             hour: "numeric",
             minute: "numeric",
+            hourCycle: hourCycle === 24 ? "h23" : undefined,
         }).formatToParts(date);
         const value = parts.find((p) => p.type === "dayPeriod")?.value;
         if (value === "PM") {

package/dist/{shared/date → internal/date-time}/utils.d.ts

@@ -1,5 +1,5 @@
 import { CalendarDateTime, type DateValue, ZonedDateTime } from "@internationalized/date";
-import type { DateMatcher, Granularity } from "./types.js";
+import type { DateMatcher, Granularity } from "../../shared/date/types.js";
 type GetDefaultDateProps = {
     defaultValue?: DateValue | DateValue[] | undefined;
     defaultPlaceholder?: DateValue | undefined;

package/dist/{shared/date → internal/date-time}/utils.js

@@ -155,18 +155,6 @@ function isAfterOrSame(dateToCompare, referenceDate) {
 export function isBetweenInclusive(date, start, end) {
     return isAfterOrSame(date, start) && isBeforeOrSame(date, end);
 }
-/**
- * Determine if a date is between a start and end reference date.
- *
- * @param date - is this date between the `start` and `end` dates
- * @param start - the start reference date to make the comparison against
- * @param end - the end reference date to make the comparison against
- *
- * @see {@link isBetweenInclusive} for inclusive
- */
-function isBetween(date, start, end) {
-    return isAfter(date, start) && isBefore(date, end);
-}
 export function getLastFirstDayOfWeek(date, firstDayOfWeek, locale) {
     const day = getDayOfWeek(date, locale);
     if (firstDayOfWeek > day) {

package/dist/internal/debounce.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line ts/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function debounce(fn, wait = 500) {
     let timeout = null;
     const debounced = (...args) => {

package/dist/internal/events.d.ts

@@ -4,4 +4,18 @@ type GeneralEventListener<E = Event> = (evt: E) => unknown;
 export declare function addEventListener<E extends keyof WindowEventMap>(target: Window, event: Arrayable<E>, handler: (this: Window, ev: WindowEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
 export declare function addEventListener<E extends keyof DocumentEventMap>(target: Document, event: Arrayable<E>, handler: (this: Document, ev: DocumentEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
 export declare function addEventListener<E extends keyof HTMLElementEventMap>(target: EventTarget, event: Arrayable<E>, handler: GeneralEventListener<HTMLElementEventMap[E]>, options?: boolean | AddEventListenerOptions): VoidFunction;
+/**
+ * Creates a typed event dispatcher and listener pair for custom events
+ * @template T - The type of data that will be passed in the event detail
+ * @param eventName - The name of the custom event
+ * @param options - CustomEvent options (bubbles, cancelable, etc.)
+ */
+export declare class CustomEventDispatcher<T = unknown> {
+    readonly eventName: string;
+    readonly options: Omit<CustomEventInit<T>, "detail">;
+    constructor(eventName: string, options?: Omit<CustomEventInit<T>, "detail">);
+    createEvent(detail?: T): CustomEvent<T>;
+    dispatch(element: EventTarget, detail?: T): CustomEvent<T>;
+    listen(element: EventTarget, callback: (event: CustomEvent<T>) => void): () => void;
+}
 export {};