bits-ui 1.8.0 → 2.1.0

package/dist/internal/date-time/field/time-helpers.js

@@ -0,0 +1,301 @@
+import { isBrowser, isNull } from "../../is.js";
+import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
+import { ALL_TIME_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from "./parts.js";
+import { getTimeSegments } from "./segments.js";
+import { styleToString } from "svelte-toolbelt";
+import { useId } from "../../use-id.js";
+import { getPlaceholder } from "../placeholders.js";
+import { isZonedDateTime } from "../utils.js";
+export function initializeSegmentValues() {
+    const initialParts = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
+        if (part === "dayPeriod") {
+            return [part, "AM"];
+        }
+        return [part, null];
+    }).filter(([key]) => {
+        if (key === "literal" || key === null)
+            return false;
+        return true;
+    });
+    return Object.fromEntries(initialParts);
+}
+function createTimeContentObj(props) {
+    const { segmentValues, formatter, locale, timeRef } = props;
+    const content = Object.keys(segmentValues).reduce((obj, part) => {
+        if (!isEditableTimeSegmentPart(part))
+            return obj;
+        if (part === "dayPeriod") {
+            const value = segmentValues[part];
+            if (!isNull(value)) {
+                obj[part] = value;
+            }
+            else {
+                obj[part] = getPlaceholder(part, "AM", locale);
+            }
+        }
+        else {
+            obj[part] = getPartContent(part);
+        }
+        return obj;
+    }, {});
+    function getPartContent(part) {
+        const value = segmentValues[part];
+        const leadingZero = typeof value === "string" && value?.startsWith("0");
+        const intValue = value !== null ? Number.parseInt(value) : null;
+        if (!isNull(value) && !isNull(intValue)) {
+            const formatted = formatter.part(timeRef.set({ [part]: value }), part, {
+                hourCycle: props.hourCycle === 24 ? "h23" : undefined,
+            });
+            /**
+             * If we're operating in a 12 hour clock and the part is an hour, we handle
+             * the conversion to 12 hour format with 2 digit hours and leading zeros here.
+             */
+            if (part === "hour" && "dayPeriod" in segmentValues && props.hourCycle !== 24) {
+                /**
+                 * If the value is over 12, we convert to 12 hour format and add leading
+                 * zeroes if the value is less than 10.
+                 */
+                if (intValue > 12) {
+                    const hour = intValue - 12;
+                    if (hour === 0) {
+                        return "12";
+                    }
+                    else if (hour < 10) {
+                        return `0${hour}`;
+                    }
+                    else {
+                        return `${hour}`;
+                    }
+                }
+                /**
+                 * If the value is 0, we convert to 12, since 0 is not a valid 12 hour time.
+                 */
+                if (intValue === 0) {
+                    return "12";
+                }
+                /**
+                 * If the value is less than 10, we add a leading zero to the value.
+                 */
+                if (intValue < 10) {
+                    return `0${intValue}`;
+                }
+                /**
+                 * Otherwise, we don't need to do anything to the value.
+                 */
+                return `${intValue}`;
+            }
+            if (leadingZero && formatted.length === 1) {
+                return `0${formatted}`;
+            }
+            return formatted;
+        }
+        else {
+            return getPlaceholder(part, "", locale);
+        }
+    }
+    return content;
+}
+function createTimeContentArr(props) {
+    const { granularity, timeRef, formatter, contentObj, hideTimeZone, hourCycle } = props;
+    const parts = formatter.toParts(timeRef, getOptsByGranularity(granularity, hourCycle));
+    const timeSegmentContentArr = parts
+        .map((part) => {
+        const defaultParts = ["literal", "timeZoneName", null];
+        if (defaultParts.includes(part.type) || !isEditableTimeSegmentPart(part.type)) {
+            return {
+                part: part.type,
+                value: part.value,
+            };
+        }
+        return {
+            part: part.type,
+            value: contentObj[part.type],
+        };
+    })
+        .filter((segment) => {
+        if (isNull(segment.part) || isNull(segment.value))
+            return false;
+        if (segment.part === "timeZoneName" && (!isZonedDateTime(timeRef) || hideTimeZone)) {
+            return false;
+        }
+        return true;
+    });
+    return timeSegmentContentArr;
+}
+export function createTimeContent(props) {
+    const contentObj = createTimeContentObj(props);
+    const contentArr = createTimeContentArr({
+        contentObj,
+        ...props,
+    });
+    return {
+        obj: contentObj,
+        arr: contentArr,
+    };
+}
+function getOptsByGranularity(granularity, hourCycle) {
+    const opts = {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        timeZoneName: "short",
+        hourCycle: hourCycle === 24 ? "h23" : undefined,
+        hour12: hourCycle === 24 ? false : undefined,
+    };
+    if (granularity === "hour") {
+        delete opts.minute;
+        delete opts.second;
+    }
+    if (granularity === "minute") {
+        delete opts.second;
+    }
+    return opts;
+}
+export function initTimeSegmentStates() {
+    return EDITABLE_TIME_SEGMENT_PARTS.reduce((acc, key) => {
+        acc[key] = {
+            lastKeyZero: false,
+            hasLeftFocus: true,
+            updating: null,
+        };
+        return acc;
+    }, {});
+}
+export function initTimeSegmentIds() {
+    return Object.fromEntries(ALL_TIME_SEGMENT_PARTS.map((part) => {
+        return [part, useId()];
+    }).filter(([key]) => key !== "literal"));
+}
+export function isEditableTimeSegmentPart(part) {
+    return EDITABLE_TIME_SEGMENT_PARTS.includes(part);
+}
+export function isAnyTimeSegmentPart(part) {
+    return ALL_TIME_SEGMENT_PARTS.includes(part);
+}
+/**
+ * Get the segments being used/ are rendered in the DOM.
+ * We're using this to determine when to set the value of
+ * the date picker, which is when all the segments have
+ * been filled.
+ */
+function getUsedTimeSegments(fieldNode) {
+    if (!isBrowser || !fieldNode)
+        return [];
+    const usedSegments = getTimeSegments(fieldNode)
+        .map((el) => el.dataset.segment)
+        .filter((part) => {
+        return EDITABLE_TIME_SEGMENT_PARTS.includes(part);
+    });
+    return usedSegments;
+}
+export function getTimeValueFromSegments(props) {
+    const usedSegments = getUsedTimeSegments(props.fieldNode);
+    for (const part of usedSegments) {
+        const value = props.segmentObj[part];
+        if (isNull(value))
+            continue;
+        // @ts-expect-error shhh
+        props.timeRef = props.timeRef.set({ [part]: props.segmentObj[part] });
+    }
+    return props.timeRef;
+}
+/**
+ * Check if all the segments being used have been filled.
+ * We use this to determine when we should set the value
+ * store of the date field(s).
+ *
+ * @param segmentValues - The current `SegmentValueObj`
+ * @param fieldNode  - The id of the date field
+ */
+export function areAllTimeSegmentsFilled(segmentValues, fieldNode) {
+    const usedSegments = getUsedTimeSegments(fieldNode);
+    for (const part of usedSegments) {
+        if (segmentValues[part] === null)
+            return false;
+    }
+    return true;
+}
+/**
+ * Infer the granularity to use based on the
+ * value and granularity props.
+ */
+export function inferTimeGranularity(granularity) {
+    if (granularity)
+        return granularity;
+    return "minute";
+}
+/**
+ * Determines if the element with the provided id is the first focusable
+ * segment in the date field with the provided fieldId.
+ *
+ * @param id - The id of the element to check if it's the first segment
+ * @param fieldNode - The id of the date field associated with the segment
+ */
+export function isFirstTimeSegment(id, fieldNode) {
+    if (!isBrowser)
+        return false;
+    const segments = getTimeSegments(fieldNode);
+    return segments.length ? segments[0].id === id : false;
+}
+/**
+ * Creates or updates a description element for a date field
+ * which enables screen readers to read the date field's value.
+ *
+ * This element is hidden from view, and is portalled to the body
+ * so it can be associated via `aria-describedby` and read by
+ * screen readers as the user interacts with the date field.
+ */
+export function setTimeDescription(id, formatter, value) {
+    if (!isBrowser)
+        return;
+    const valueString = formatter.selectedTime(value);
+    const el = document.getElementById(id);
+    if (!el) {
+        const div = document.createElement("div");
+        div.style.cssText = styleToString({
+            display: "none",
+        });
+        div.id = id;
+        div.innerText = `Selected Time: ${valueString}`;
+        document.body.appendChild(div);
+    }
+    else {
+        el.innerText = `Selected Time: ${valueString}`;
+    }
+}
+/**
+ * Removes the description element for the date field with
+ * the provided ID. This function should be called when the
+ * date field is unmounted.
+ */
+export function removeTimeDescriptionElement(id) {
+    if (!isBrowser)
+        return;
+    const el = document.getElementById(id);
+    if (!el)
+        return;
+    document.body.removeChild(el);
+}
+export function convertTimeValueToDateValue(time) {
+    if (time instanceof Time) {
+        return new CalendarDateTime(2020, 1, 1, time.hour, time.minute, time.second, time.millisecond);
+    }
+    return time;
+}
+export function convertTimeValueToTime(time) {
+    if (time instanceof Time)
+        return time;
+    return new Time(time.hour, time.minute, time.second, time.millisecond);
+}
+export function isTimeBefore(timeToCompare, referenceTime) {
+    return timeToCompare.compare(referenceTime) < 0;
+}
+export function isTimeAfter(timeToCompare, referenceTime) {
+    return timeToCompare.compare(referenceTime) > 0;
+}
+export function getISOTimeValue(time) {
+    if (time instanceof Time) {
+        return Time.toString();
+    }
+    return new Time(time.hour, time.minute, time.second, time.millisecond).toString();
+}

package/dist/internal/date-time/field/types.d.ts

@@ -1,6 +1,6 @@
-import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "./parts.js";
+import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from "./parts.js";
 export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
-export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
+export type TimeSegmentPart = (typeof EDITABLE_TIME_SEGMENT_PARTS)[number];
 export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
 export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
 export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;

package/dist/internal/date-time/formatter.d.ts

@@ -1,6 +1,7 @@
 import { type DateValue } from "@internationalized/date";
-import type { HourCycle } from "../../shared/date/types.js";
+import type { HourCycle, TimeValue } from "../../shared/date/types.js";
 export type Formatter = ReturnType<typeof createFormatter>;
+export type TimeFormatter = ReturnType<typeof createTimeFormatter>;
 /**
  * Creates a wrapper around the `DateFormatter`, which is
  * an improved version of the {@link Intl.DateTimeFormat} API,
@@ -22,3 +23,12 @@ export declare function createFormatter(initialLocale: string): {
     selectedDate: (date: DateValue, includeTime?: boolean) => string;
     dayOfWeek: (date: Date, length?: Intl.DateTimeFormatOptions["weekday"]) => string;
 };
+export declare function createTimeFormatter(initialLocale: string): {
+    setLocale: (newLocale: string) => void;
+    getLocale: () => string;
+    toParts: (timeValue: TimeValue, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
+    custom: (date: Date, options: Intl.DateTimeFormatOptions) => string;
+    part: (dateObj: TimeValue, type: Intl.DateTimeFormatPartTypes, options?: Intl.DateTimeFormatOptions) => string;
+    dayPeriod: (date: Date, hourCycle?: HourCycle | undefined) => "AM" | "PM";
+    selectedTime: (date: TimeValue) => string;
+};

package/dist/internal/date-time/formatter.js

@@ -1,5 +1,6 @@
 import { DateFormatter } from "@internationalized/date";
 import { hasTime, isZonedDateTime, toDate } from "./utils.js";
+import { convertTimeValueToDateValue } from "./field/time-helpers.js";
 const defaultPartOptions = {
     year: "numeric",
     month: "numeric",
@@ -95,3 +96,58 @@ export function createFormatter(initialLocale) {
         dayOfWeek,
     };
 }
+export function createTimeFormatter(initialLocale) {
+    let locale = initialLocale;
+    function setLocale(newLocale) {
+        locale = newLocale;
+    }
+    function getLocale() {
+        return locale;
+    }
+    function custom(date, options) {
+        return new DateFormatter(locale, options).format(date);
+    }
+    function selectedTime(date) {
+        return custom(toDate(convertTimeValueToDateValue(date)), {
+            timeStyle: "long",
+        });
+    }
+    function toParts(timeValue, options) {
+        const dateValue = convertTimeValueToDateValue(timeValue);
+        if (isZonedDateTime(dateValue)) {
+            return new DateFormatter(locale, {
+                ...options,
+                timeZone: dateValue.timeZone,
+            }).formatToParts(toDate(dateValue));
+        }
+        else {
+            return new DateFormatter(locale, options).formatToParts(toDate(dateValue));
+        }
+    }
+    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")
+            return "PM";
+        return "AM";
+    }
+    function part(dateObj, type, options = {}) {
+        const opts = { ...defaultPartOptions, ...options };
+        const parts = toParts(dateObj, opts);
+        const part = parts.find((p) => p.type === type);
+        return part ? part.value : "";
+    }
+    return {
+        setLocale,
+        getLocale,
+        toParts,
+        custom,
+        part,
+        dayPeriod,
+        selectedTime,
+    };
+}

package/dist/internal/date-time/utils.d.ts

@@ -1,9 +1,13 @@
 import { CalendarDateTime, type DateValue, ZonedDateTime } from "@internationalized/date";
-import type { DateMatcher, Granularity } from "../../shared/date/types.js";
+import type { DateMatcher, Granularity, TimeGranularity, TimeValue } from "../../shared/date/types.js";
 type GetDefaultDateProps = {
     defaultValue?: DateValue | DateValue[] | undefined;
     granularity?: Granularity;
 };
+type GetDefaultTimeProps = {
+    defaultValue?: TimeValue | undefined;
+    granularity?: TimeGranularity;
+};
 /**
  * A helper function used throughout the various date builders
  * to generate a default `DateValue` using the `defaultValue`,
@@ -15,6 +19,7 @@ type GetDefaultDateProps = {
  *
  */
 export declare function getDefaultDate(opts: GetDefaultDateProps): DateValue;
+export declare function getDefaultTime(opts: GetDefaultTimeProps): TimeValue;
 /**
  * Given a date string and a reference `DateValue` object, parse the
  * string to the same type as the reference object.
@@ -31,7 +36,7 @@ export declare function parseStringToDateValue(dateStr: string, referenceVal: Da
 export declare function toDate(dateValue: DateValue, tz?: string): Date;
 export declare function getDateValueType(date: DateValue): string;
 export declare function parseAnyDateValue(value: string, type: string): DateValue;
-export declare function isZonedDateTime(dateValue: DateValue): dateValue is ZonedDateTime;
+export declare function isZonedDateTime(dateValue: DateValue | TimeValue): dateValue is ZonedDateTime;
 export declare function hasTime(dateValue: DateValue): dateValue is CalendarDateTime | ZonedDateTime;
 /**
  * Given a date, return the number of days in the month.

package/dist/internal/date-time/utils.js

@@ -1,8 +1,12 @@
-import { CalendarDate, CalendarDateTime, ZonedDateTime, getDayOfWeek, getLocalTimeZone, parseDate, parseDateTime, parseZonedDateTime, toCalendar, } from "@internationalized/date";
+import { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getDayOfWeek, getLocalTimeZone, parseDate, parseDateTime, parseZonedDateTime, toCalendar, } from "@internationalized/date";
 const defaultDateDefaults = {
     defaultValue: undefined,
     granularity: "day",
 };
+const defaultTimeDefaults = {
+    defaultValue: undefined,
+    granularity: "minute",
+};
 /**
  * A helper function used throughout the various date builders
  * to generate a default `DateValue` using the `defaultValue`,
@@ -34,6 +38,16 @@ export function getDefaultDate(opts) {
         return new CalendarDate(year, month, day);
     }
 }
+export function getDefaultTime(opts) {
+    const withDefaults = { ...defaultTimeDefaults, ...opts };
+    const { defaultValue } = withDefaults;
+    if (defaultValue) {
+        return defaultValue;
+    }
+    else {
+        return new Time(0, 0, 0);
+    }
+}
 /**
  * Given a date string and a reference `DateValue` object, parse the
  * string to the same type as the reference object.

package/dist/internal/dom-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Box } from "svelte-toolbelt";
+export declare class DOMContext {
+    readonly element: Box<HTMLElement | null>;
+    readonly root: Document | ShadowRoot | null;
+    constructor(element: Box<HTMLElement | null>);
+    querySelector: (selector: string) => Element | null;
+    querySelectorAll: (selector: string) => NodeListOf<Element>;
+    getElementById: (id: string) => HTMLElement | null;
+}

package/dist/internal/dom-context.svelte.js

@@ -0,0 +1,26 @@
+export class DOMContext {
+    element;
+    root = $derived.by(() => {
+        if (!this.element.current)
+            return null;
+        return this.element.current.getRootNode();
+    });
+    constructor(element) {
+        this.element = element;
+    }
+    querySelector = (selector) => {
+        if (!this.root)
+            return null;
+        return this.root.querySelector(selector);
+    };
+    querySelectorAll = (selector) => {
+        if (!this.root)
+            return [];
+        return this.root.querySelectorAll(selector);
+    };
+    getElementById = (id) => {
+        if (!this.root)
+            return null;
+        return this.root.getElementById(id);
+    };
+}

package/dist/internal/use-roving-focus.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ReadableBox } from "svelte-toolbelt";
+import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { Orientation } from "../shared/index.js";
 type UseRovingFocusProps = ({
     /**
@@ -16,7 +16,7 @@ type UseRovingFocusProps = ({
     /**
      * The id of the root node
      */
-    rootNodeId: ReadableBox<string>;
+    rootNode: Box<HTMLElement | null>;
     /**
      * Whether to loop through the candidates when reaching the end.
      */
@@ -32,7 +32,7 @@ type UseRovingFocusProps = ({
     onCandidateFocus?: (node: HTMLElement) => void;
 };
 export type UseRovingFocusReturn = ReturnType<typeof useRovingFocus>;
-export declare function useRovingFocus(props: UseRovingFocusProps): {
+export declare function useRovingFocus(opts: UseRovingFocusProps): {
     setCurrentTabStopId(id: string): void;
     getTabIndex: (node: HTMLElement | null | undefined) => 0 | -1;
     handleKeydown: (node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean) => HTMLElement | undefined;

package/dist/internal/use-roving-focus.svelte.js

@@ -3,20 +3,19 @@ import { getElemDirection } from "./locale.js";
 import { getDirectionalKeys } from "./get-directional-keys.js";
 import { kbd } from "./kbd.js";
 import { isBrowser } from "./is.js";
-export function useRovingFocus(props) {
+export function useRovingFocus(opts) {
     const currentTabStopId = box(null);
     function getCandidateNodes() {
         if (!isBrowser)
             return [];
-        const node = document.getElementById(props.rootNodeId.current);
-        if (!node)
+        if (!opts.rootNode.current)
             return [];
-        if (props.candidateSelector) {
-            const candidates = Array.from(node.querySelectorAll(props.candidateSelector));
+        if (opts.candidateSelector) {
+            const candidates = Array.from(opts.rootNode.current.querySelectorAll(opts.candidateSelector));
             return candidates;
         }
-        else if (props.candidateAttr) {
-            const candidates = Array.from(node.querySelectorAll(`[${props.candidateAttr}]:not([data-disabled])`));
+        else if (opts.candidateAttr) {
+            const candidates = Array.from(opts.rootNode.current.querySelectorAll(`[${opts.candidateAttr}]:not([data-disabled])`));
             return candidates;
         }
         return [];
@@ -28,7 +27,7 @@ export function useRovingFocus(props) {
         items[0]?.focus();
     }
     function handleKeydown(node, e, both = false) {
-        const rootNode = document.getElementById(props.rootNodeId.current);
+        const rootNode = opts.rootNode.current;
         if (!rootNode || !node)
             return;
         const items = getCandidateNodes();
@@ -36,8 +35,8 @@ export function useRovingFocus(props) {
             return;
         const currentIndex = items.indexOf(node);
         const dir = getElemDirection(rootNode);
-        const { nextKey, prevKey } = getDirectionalKeys(dir, props.orientation.current);
-        const loop = props.loop.current;
+        const { nextKey, prevKey } = getDirectionalKeys(dir, opts.orientation.current);
+        const loop = opts.loop.current;
         const keyToIndex = {
             [nextKey]: currentIndex + 1,
             [prevKey]: currentIndex - 1,
@@ -65,7 +64,7 @@ export function useRovingFocus(props) {
             return;
         itemToFocus.focus();
         currentTabStopId.current = itemToFocus.id;
-        props.onCandidateFocus?.(itemToFocus);
+        opts.onCandidateFocus?.(itemToFocus);
         return itemToFocus;
     }
     function getTabIndex(node) {

package/dist/shared/date/types.d.ts

@@ -1,9 +1,12 @@
-import type { DateValue } from "@internationalized/date";
-import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+import type { CalendarDateTime, DateValue, Time, ZonedDateTime } from "@internationalized/date";
+import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
 export type Granularity = "day" | "hour" | "minute" | "second";
+export type TimeGranularity = "hour" | "minute" | "second";
 export type HourCycle = 12 | 24;
 export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type DateMatcher = (date: DateValue) => boolean;
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
+export type TimeValidator<T extends TimeValue> = (time: T) => string[] | string | void;
 /**
  * A function that returns a string or array of strings as validation errors if the date is
  * invalid, or nothing if the date is valid
@@ -17,15 +20,28 @@ export type DateRangeValidator = (range: {
     start: DateValue;
     end: DateValue;
 }) => string[] | string | void;
+export type TimeRangeValidator<T extends TimeValue = Time> = (range: {
+    start: T;
+    end: T;
+}) => string[] | string | void;
 /**
  * A callback fired when the date field's value is invalid. Use this to display an error
  * message to the user.
  */
 export type DateOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
+/**
+ * A callback fired when the time field's value is invalid. Use this to display an error
+ * message to the user.
+ */
+export type TimeOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
 export type DateRange = {
     start: DateValue | undefined;
     end: DateValue | undefined;
 };
+export type TimeRange<T extends TimeValue = Time> = {
+    start: T | undefined;
+    end: T | undefined;
+};
 export type Month<T> = {
     /**
      * A `DateValue` used to represent the month. Since days
@@ -52,21 +68,25 @@ export type Month<T> = {
     dates: T[];
 };
 export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
-export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
+export type EditableTimeSegmentPart = (typeof EDITABLE_TIME_SEGMENT_PARTS)[number];
 export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
 export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
 export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
+export type TimeSegmentPart = EditableTimeSegmentPart | "literal";
+export type AnyTimeExceptLiteral = Exclude<TimeSegmentPart, "literal">;
 export type AnyExceptLiteral = Exclude<SegmentPart, "literal">;
 export type DayPeriod = "AM" | "PM" | null;
 export type DateSegmentObj = {
     [K in DateSegmentPart]: string | null;
 };
 export type TimeSegmentObj = {
-    [K in TimeSegmentPart]: K extends "dayPeriod" ? DayPeriod : string | null;
+    [K in EditableTimeSegmentPart]: K extends "dayPeriod" ? DayPeriod : string | null;
 };
 export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
 export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
 export type SegmentContentObj = Record<EditableSegmentPart, string>;
+export type TimeSegmentValueObj = TimeSegmentObj;
+export type TimeSegmentContentObj = Record<EditableTimeSegmentPart, string>;
 export type SegmentState = {
     lastKeyZero: boolean;
     hasLeftFocus: boolean;
@@ -75,3 +95,6 @@ export type SegmentState = {
 export type SegmentStateMap = {
     [K in EditableSegmentPart]: SegmentState;
 };
+export type TimeSegmentStateMap = {
+    [K in EditableTimeSegmentPart]: SegmentState;
+};

package/dist/shared/index.d.ts

@@ -29,8 +29,8 @@ export type WithoutChild<T> = T extends {
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
     ref?: U | null;
 };
-export type { EditableSegmentPart } from "./date/types.js";
-export type { Month, DateMatcher, DateOnInvalid, DateRangeValidator, DateValidator, DateRange, } from "./date/types.js";
+export type { EditableSegmentPart, EditableTimeSegmentPart } from "./date/types.js";
+export type { Month, DateMatcher, DateOnInvalid, DateRangeValidator, DateValidator, DateRange, TimeValue, TimeSegmentPart, TimeRange, TimeValidator, TimeRangeValidator, TimeOnInvalid, } from "./date/types.js";
 export type { WithChild, Without, WithChildren } from "../internal/types.js";
 export { mergeProps } from "svelte-toolbelt";
 export { useId } from "../internal/use-id.js";

package/dist/types.d.ts

@@ -33,6 +33,8 @@ export type * from "./bits/separator/types.js";
 export type * from "./bits/slider/types.js";
 export type * from "./bits/switch/types.js";
 export type * from "./bits/tabs/types.js";
+export type * from "./bits/time-field/types.js";
+export type * from "./bits/time-range-field/types.js";
 export type * from "./bits/toggle/types.js";
 export type * from "./bits/toggle-group/types.js";
 export type * from "./bits/toolbar/types.js";