sheer-ui 0.4.2 → 0.5.0

package/dist/components/time-field/time-field.svelte.js

@@ -0,0 +1,975 @@
+import { CalendarDateTime, Time, ZonedDateTime } from '@internationalized/date';
+import { attachRef, DOMContext, boxWith, } from '../../internal/tools/index.js';
+import { createContext, onMount, untrack } from 'svelte';
+import { createBitsAttrs, boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
+import { BROWSER } from 'esm-env';
+import { kbd } from '../../internal/kbd.js';
+import { createTimeFormatter } from '../../internal/date-time/formatter.js';
+import { getAnnouncer } from '../../internal/date-time/announcer.js';
+import { EDITABLE_TIME_SEGMENT_PARTS } from '../../internal/date-time/field/parts.js';
+import { toDate } from '../../internal/date-time/utils.js';
+import { areAllTimeSegmentsFilled, convertTimeValueToTime, createTimeContent, getISOTimeValue, getTimeValueFromSegments, initTimeSegmentStates, isFirstTimeSegment, isTimeBefore, removeTimeDescriptionElement, setTimeDescription, } from '../../internal/date-time/field/time-helpers.js';
+import { getFirstTimeSegment, handleTimeSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from '../../internal/date-time/field/segments.js';
+import { getDefaultHourCycle, isAcceptableDayPeriodKey, isAcceptableSegmentKey, isArrowDown, isArrowUp, isBackspace, } from '../../internal/date-time/field/helpers.js';
+export const timeFieldAttrs = createBitsAttrs({
+    component: 'time-field',
+    parts: ['input', 'label'],
+});
+const [getTimeFieldRoot, setTimeFieldRoot] = createContext();
+const SEGMENT_CONFIGS = {
+    hour: {
+        min: (root) => (root.hourCycle === 12 ? 1 : 0),
+        max: (root) => {
+            if (root.hourCycle === 24)
+                return 23;
+            if ('dayPeriod' in root.segmentValues && root.segmentValues.dayPeriod !== null)
+                return 12;
+            return 23;
+        },
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+    minute: {
+        min: 0,
+        max: 59,
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+    second: {
+        min: 0,
+        max: 59,
+        cycle: 1,
+        canBeZero: true,
+        padZero: true,
+    },
+};
+function get24HourValueFromTypedHour(hour, dayPeriod) {
+    const parsedHour = Number.parseInt(hour);
+    if (Number.isNaN(parsedHour))
+        return hour;
+    if (dayPeriod === 'AM') {
+        return parsedHour === 12 ? '0' : `${parsedHour}`;
+    }
+    return parsedHour < 12 ? `${parsedHour + 12}` : `${parsedHour}`;
+}
+export class TimeFieldRootState {
+    static create(opts, rangeRoot) {
+        return setTimeFieldRoot(new TimeFieldRootState(opts, rangeRoot));
+    }
+    value;
+    placeholder;
+    validate;
+    minValue;
+    maxValue;
+    disabled;
+    readonly;
+    granularity;
+    readonlySegments;
+    hourCycleProp;
+    locale;
+    hideTimeZone;
+    required;
+    onInvalid;
+    errorMessageId;
+    isInvalidProp;
+    descriptionId;
+    formatter;
+    segmentValues = $state();
+    announcer;
+    readonlySegmentsSet = $derived.by(() => new Set(this.readonlySegments.current));
+    #fieldNode = $state(null);
+    #labelNode = $state(null);
+    descriptionNode = $state(null);
+    validationNode = $state(null);
+    states = initTimeSegmentStates();
+    hourInputDayPeriodHint = null;
+    dayPeriodNode = $state(null);
+    name = $state('');
+    maxValueTime = $derived.by(() => {
+        if (!this.maxValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.maxValue.current);
+    });
+    minValueTime = $derived.by(() => {
+        if (!this.minValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.minValue.current);
+    });
+    valueTime = $derived.by(() => {
+        if (!this.value.current)
+            return undefined;
+        return convertTimeValueToTime(this.value.current);
+    });
+    hourCycle = $derived.by(() => {
+        if (this.hourCycleProp.current)
+            return this.hourCycleProp.current;
+        return getDefaultHourCycle(this.locale.current);
+    });
+    rangeRoot = undefined;
+    domContext = new DOMContext(() => null);
+    constructor(props, rangeRoot) {
+        this.rangeRoot = rangeRoot;
+        this.descriptionId = props.descriptionId;
+        /**
+         * Since the `TimeFieldRootState` can be used in two contexts, as a standalone
+         * field or as a field within a `TimeRangeField` component, we handle assigning
+         * the props based on that context.
+         */
+        this.value = props.value;
+        this.placeholder = rangeRoot ? rangeRoot.opts.placeholder : props.placeholder;
+        this.validate = rangeRoot ? boxWith(() => undefined) : props.validate;
+        this.minValue = rangeRoot ? rangeRoot.opts.minValue : props.minValue;
+        this.maxValue = rangeRoot ? rangeRoot.opts.maxValue : props.maxValue;
+        this.disabled = rangeRoot ? rangeRoot.opts.disabled : props.disabled;
+        this.readonly = rangeRoot ? rangeRoot.opts.readonly : props.readonly;
+        this.granularity = rangeRoot ? rangeRoot.opts.granularity : props.granularity;
+        this.readonlySegments = rangeRoot ? rangeRoot.opts.readonlySegments : props.readonlySegments;
+        this.hourCycleProp = rangeRoot ? rangeRoot.opts.hourCycle : props.hourCycle;
+        this.locale = rangeRoot ? rangeRoot.opts.locale : props.locale;
+        this.hideTimeZone = rangeRoot ? rangeRoot.opts.hideTimeZone : props.hideTimeZone;
+        this.required = rangeRoot ? rangeRoot.opts.required : props.required;
+        this.onInvalid = rangeRoot ? rangeRoot.opts.onInvalid : props.onInvalid;
+        this.errorMessageId = rangeRoot ? rangeRoot.opts.errorMessageId : props.errorMessageId;
+        this.isInvalidProp = props.isInvalidProp;
+        this.formatter = createTimeFormatter(this.locale.current);
+        this.segmentValues = this.#initializeTimeSegmentValues();
+        this.announcer = getAnnouncer(null);
+        this.getFieldNode = this.getFieldNode.bind(this);
+        this.updateSegment = this.updateSegment.bind(this);
+        this.handleSegmentClick = this.handleSegmentClick.bind(this);
+        this.getBaseSegmentAttrs = this.getBaseSegmentAttrs.bind(this);
+        onMount(() => {
+            this.announcer = getAnnouncer(this.domContext.getDocument());
+        });
+        onMount(() => () => {
+            removeTimeDescriptionElement(this.descriptionId, this.domContext.getDocument());
+        });
+        $effect(() => {
+            if (this.formatter.getLocale() === this.locale.current)
+                return;
+            this.formatter.setLocale(this.locale.current);
+        });
+        $effect(() => {
+            if (this.value.current) {
+                const descriptionId = untrack(() => this.descriptionId);
+                setTimeDescription({
+                    id: descriptionId,
+                    formatter: this.formatter,
+                    value: this.#toDateValue(this.value.current),
+                    doc: this.domContext.getDocument(),
+                });
+            }
+            const placeholder = untrack(() => this.placeholder.current);
+            if (this.value.current && placeholder !== this.value.current) {
+                untrack(() => {
+                    if (this.value.current) {
+                        this.placeholder.current = this.value.current;
+                    }
+                });
+            }
+        });
+        if (this.value.current) {
+            this.syncSegmentValues(this.value.current);
+        }
+        $effect(() => {
+            this.locale.current;
+            if (this.value.current) {
+                this.syncSegmentValues(this.value.current);
+            }
+            this.#clearUpdating();
+        });
+        $effect(() => {
+            if (this.value.current === undefined) {
+                this.segmentValues = this.#initializeTimeSegmentValues();
+            }
+        });
+        $effect(() => {
+            this.validationStatus;
+            untrack(() => {
+                if (this.validationStatus !== false) {
+                    this.onInvalid.current?.(this.validationStatus.reason, this.validationStatus.message);
+                }
+            });
+        });
+    }
+    #initializeTimeSegmentValues() {
+        const granularity = this.inferredGranularity;
+        const segments = {
+            hour: null,
+            minute: null,
+            second: null,
+            dayPeriod: 'AM',
+        };
+        if (granularity === 'second') {
+            segments.second = null;
+        }
+        if (this.hourCycle === 24) {
+            segments.dayPeriod = null;
+        }
+        return segments;
+    }
+    #toDateValue(timeValue) {
+        return 'calendar' in timeValue
+            ? timeValue
+            : new CalendarDateTime(2000, 1, 1, timeValue.hour, timeValue.minute, timeValue.second, timeValue.millisecond);
+    }
+    #clearUpdating() {
+        this.states.hour.updating = null;
+        this.states.minute.updating = null;
+        this.states.second.updating = null;
+        this.states.dayPeriod.updating = null;
+    }
+    setName(name) {
+        this.name = name;
+    }
+    setFieldNode(node) {
+        this.#fieldNode = node;
+    }
+    /**
+     * Gets the correct field node for the time field regardless of whether it's being
+     * used in a standalone context or within a `TimeRangeField` component.
+     */
+    getFieldNode() {
+        return this.rangeRoot ? this.rangeRoot.fieldNode : this.#fieldNode;
+    }
+    setLabelNode(node) {
+        this.#labelNode = node;
+    }
+    getLabelNode() {
+        return this.#labelNode;
+    }
+    setValue(value) {
+        this.value.current = value;
+    }
+    syncSegmentValues(value) {
+        const timeValues = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
+            if (part === 'dayPeriod') {
+                if (this.states.dayPeriod.updating) {
+                    return [part, this.states.dayPeriod.updating];
+                }
+                else {
+                    return [part, this.formatter.dayPeriod(toDate(this.#toDateValue(value)))];
+                }
+            }
+            else if (part === 'hour') {
+                if (this.states.hour.updating) {
+                    return [part, this.states.hour.updating];
+                }
+                if (value[part] !== undefined && value[part] < 10) {
+                    return [part, `0${value[part]}`];
+                }
+                if (value[part] === 0 && this.dayPeriodNode) {
+                    return [part, '12'];
+                }
+            }
+            else if (part === 'minute') {
+                if (this.states.minute.updating) {
+                    return [part, this.states.minute.updating];
+                }
+                if (value[part] !== undefined && value[part] < 10) {
+                    return [part, `0${value[part]}`];
+                }
+            }
+            else if (part === 'second') {
+                if (this.states.second.updating) {
+                    return [part, this.states.second.updating];
+                }
+                if (value[part] !== undefined && value[part] < 10) {
+                    return [part, `0${value[part]}`];
+                }
+            }
+            return [part, `${value[part]}`];
+        });
+        this.segmentValues = Object.fromEntries(timeValues);
+        this.#clearUpdating();
+    }
+    validationStatus = $derived.by(() => {
+        const value = this.value.current;
+        if (!value)
+            return false;
+        const msg = this.validate.current?.(value);
+        if (msg) {
+            return {
+                reason: 'custom',
+                message: msg,
+            };
+        }
+        if (!this.valueTime)
+            return false;
+        if (this.minValueTime && isTimeBefore(this.valueTime, this.minValueTime)) {
+            return {
+                reason: 'min',
+            };
+        }
+        if (this.maxValueTime && isTimeBefore(this.maxValueTime, this.valueTime)) {
+            return {
+                reason: 'max',
+            };
+        }
+        return false;
+    });
+    isInvalid = $derived.by(() => {
+        if (this.isInvalidProp.current)
+            return true;
+        return this.validationStatus !== false;
+    });
+    inferredGranularity = $derived.by(() => {
+        return this.granularity.current ?? 'minute';
+    });
+    timeRef = $derived.by(() => this.value.current ?? this.placeholder.current);
+    allSegmentContent = $derived.by(() => createTimeContent({
+        segmentValues: this.segmentValues,
+        formatter: this.formatter,
+        locale: this.locale.current,
+        granularity: this.inferredGranularity,
+        timeRef: this.timeRef,
+        hideTimeZone: this.hideTimeZone.current,
+        hourCycle: this.hourCycle,
+    }));
+    segmentContents = $derived.by(() => this.allSegmentContent.arr);
+    sharedSegmentAttrs = {
+        role: 'spinbutton',
+        contenteditable: 'true',
+        tabindex: 0,
+        spellcheck: false,
+        inputmode: 'numeric',
+        autocorrect: 'off',
+        enterkeyhint: 'next',
+        style: {
+            caretColor: 'transparent',
+        },
+    };
+    #getLabelledBy(segmentId) {
+        return `${segmentId} ${this.getLabelNode()?.id ?? ''}`;
+    }
+    updateSegment(part, cb) {
+        const disabled = this.disabled.current;
+        const readonly = this.readonly.current;
+        const readonlySegmentsSet = this.readonlySegmentsSet;
+        if (disabled || readonly || readonlySegmentsSet.has(part))
+            return;
+        const prev = this.segmentValues;
+        let newSegmentValues = prev;
+        if (part === 'dayPeriod') {
+            const next = cb(prev[part]);
+            this.states.dayPeriod.updating = next;
+            const value = this.value.current;
+            if (value && 'hour' in value) {
+                const trueHour = value.hour;
+                if (next === 'AM') {
+                    if (trueHour >= 12) {
+                        prev.hour = `${trueHour - 12}`;
+                    }
+                }
+                else if (next === 'PM') {
+                    if (trueHour < 12) {
+                        prev.hour = `${trueHour + 12}`;
+                    }
+                }
+            }
+            newSegmentValues = { ...prev, [part]: next };
+        }
+        else if (part === 'hour') {
+            const next = cb(prev[part]);
+            this.states.hour.updating = next;
+            if (next !== null && prev.dayPeriod !== null) {
+                if (this.hourCycle !== 24 && this.hourInputDayPeriodHint !== null) {
+                    prev.dayPeriod = this.hourInputDayPeriodHint;
+                }
+                else {
+                    const dayPeriod = this.formatter.dayPeriod(toDate(this.#toDateValue(this.timeRef.set({ hour: Number.parseInt(next) }))), this.hourCycle);
+                    if (dayPeriod === 'AM' || dayPeriod === 'PM') {
+                        prev.dayPeriod = dayPeriod;
+                    }
+                }
+            }
+            newSegmentValues = { ...prev, [part]: next };
+        }
+        else if (part === 'minute') {
+            const next = cb(prev[part]);
+            this.states.minute.updating = next;
+            newSegmentValues = { ...prev, [part]: next };
+        }
+        else if (part === 'second') {
+            const next = cb(prev[part]);
+            this.states.second.updating = next;
+            newSegmentValues = { ...prev, [part]: next };
+        }
+        this.segmentValues = newSegmentValues;
+        const segmentObjForValue = part === 'hour' && this.hourCycle !== 24 && this.hourInputDayPeriodHint !== null && newSegmentValues.hour !== null
+            ? {
+                ...newSegmentValues,
+                hour: get24HourValueFromTypedHour(newSegmentValues.hour, this.hourInputDayPeriodHint),
+            }
+            : newSegmentValues;
+        if (areAllTimeSegmentsFilled(newSegmentValues, this.#fieldNode)) {
+            this.setValue(getTimeValueFromSegments({
+                segmentObj: segmentObjForValue,
+                fieldNode: this.#fieldNode,
+                timeRef: this.timeRef,
+            }));
+        }
+    }
+    handleSegmentClick(e) {
+        if (this.disabled.current) {
+            e.preventDefault();
+        }
+    }
+    getBaseSegmentAttrs(part, segmentId) {
+        const inReadonlySegments = this.readonlySegmentsSet.has(part);
+        const defaultAttrs = {
+            'aria-invalid': boolToStrTrueOrUndef(this.isInvalid),
+            'aria-disabled': boolToStr(this.disabled.current),
+            'aria-readonly': boolToStr(this.readonly.current || inReadonlySegments),
+            'data-invalid': boolToEmptyStrOrUndef(this.isInvalid),
+            'data-disabled': boolToEmptyStrOrUndef(this.disabled.current),
+            'data-readonly': boolToEmptyStrOrUndef(this.readonly.current || inReadonlySegments),
+            'data-segment': `${part}`,
+        };
+        if (part === 'literal')
+            return defaultAttrs;
+        const descriptionId = this.descriptionNode?.id;
+        const hasDescription = isFirstTimeSegment(segmentId, this.#fieldNode) && descriptionId;
+        const errorMsgId = this.errorMessageId?.current;
+        const describedBy = hasDescription ? `${descriptionId} ${this.isInvalid && errorMsgId ? errorMsgId : ''}` : undefined;
+        const contenteditable = !(this.readonly.current || inReadonlySegments || this.disabled.current);
+        return {
+            ...defaultAttrs,
+            'aria-labelledby': this.#getLabelledBy(segmentId),
+            contenteditable: contenteditable ? 'true' : undefined,
+            'aria-describedby': describedBy,
+            tabindex: this.disabled.current ? undefined : 0,
+        };
+    }
+}
+export class TimeFieldInputState {
+    static create(opts) {
+        return new TimeFieldInputState(opts, getTimeFieldRoot());
+    }
+    opts;
+    root;
+    attachment;
+    domContext;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => this.root.setFieldNode(v));
+        this.domContext = new DOMContext(opts.ref);
+        this.root.setName(this.opts.name.current);
+        $effect(() => {
+            this.root.setName(this.opts.name.current);
+        });
+    }
+    #ariaDescribedBy = $derived.by(() => {
+        if (!BROWSER)
+            return undefined;
+        const doesDescriptionExist = this.domContext.getElementById(this.root.descriptionId);
+        if (!doesDescriptionExist)
+            return undefined;
+        return this.root.descriptionId;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'group',
+        'aria-labelledby': this.root.getLabelNode()?.id ?? undefined,
+        'aria-describedby': this.#ariaDescribedBy,
+        'aria-disabled': boolToStr(this.root.disabled.current),
+        'data-invalid': this.root.isInvalid ? '' : undefined,
+        'data-disabled': boolToEmptyStrOrUndef(this.root.disabled.current),
+        [timeFieldAttrs.input]: '',
+        ...this.attachment,
+    }));
+}
+export class TimeFieldHiddenInputState {
+    static create() {
+        return new TimeFieldHiddenInputState(getTimeFieldRoot());
+    }
+    root;
+    shouldRender = $derived.by(() => this.root.name !== '');
+    isoValue = $derived.by(() => (this.root.value.current ? getISOTimeValue(this.root.value.current) : undefined));
+    constructor(root) {
+        this.root = root;
+    }
+    props = $derived.by(() => ({
+        name: this.root.name,
+        value: this.isoValue,
+        required: this.root.required.current,
+    }));
+}
+export class TimeFieldLabelState {
+    static create(opts) {
+        return new TimeFieldLabelState(opts, getTimeFieldRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref, (v) => this.root.setLabelNode(v));
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick(_) {
+        if (this.root.disabled.current)
+            return;
+        const firstSegment = getFirstTimeSegment(this.root.getFieldNode());
+        if (!firstSegment)
+            return;
+        firstSegment.focus();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-invalid': boolToEmptyStrOrUndef(this.root.isInvalid),
+        'data-disabled': boolToEmptyStrOrUndef(this.root.disabled.current),
+        [timeFieldAttrs.label]: '',
+        onclick: this.onclick,
+        ...this.attachment,
+    }));
+}
+// Base class for time segments - simplified from date-field version
+class BaseTimeSegmentState {
+    opts;
+    root;
+    announcer;
+    part;
+    config;
+    attachment;
+    constructor(opts, root, part, config) {
+        this.opts = opts;
+        this.root = root;
+        this.part = part;
+        this.config = config;
+        this.announcer = root.announcer;
+        this.attachment = attachRef(opts.ref);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocusout = this.onfocusout.bind(this);
+    }
+    #getMax() {
+        return typeof this.config.max === 'function' ? this.config.max(this.root) : this.config.max;
+    }
+    #getMin() {
+        return typeof this.config.min === 'function' ? this.config.min(this.root) : this.config.min;
+    }
+    #formatValue(value, forDisplay = true) {
+        const str = String(value);
+        if (forDisplay && this.config.padZero && str.length === 1) {
+            return `0${value}`;
+        }
+        return str;
+    }
+    onkeydown(e) {
+        const placeholder = this.root.value.current ?? this.root.placeholder.current;
+        if (e.ctrlKey || e.metaKey || this.root.disabled.current)
+            return;
+        if (e.key !== kbd.TAB)
+            e.preventDefault();
+        if (!isAcceptableSegmentKey(e.key))
+            return;
+        if (isArrowUp(e.key)) {
+            this.#handleArrowUp(placeholder);
+            return;
+        }
+        if (isArrowDown(e.key)) {
+            this.#handleArrowDown(placeholder);
+            return;
+        }
+        if (e.key.length === 1 && e.key >= '0' && e.key <= '9') {
+            this.#handleNumberKey(e);
+            return;
+        }
+        if (isBackspace(e.key)) {
+            this.#handleBackspace(e);
+            return;
+        }
+        if (isSegmentNavigationKey(e.key)) {
+            handleTimeSegmentNavigation(e, this.root.getFieldNode());
+        }
+    }
+    #handleArrowUp(placeholder) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
+        }
+        // @ts-expect-error shhh
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                const next = placeholder[this.part];
+                this.announcer.announce(String(next));
+                return this.#formatValue(next);
+            }
+            const current = placeholder.set({
+                [this.part]: Number.parseInt(prev),
+            });
+            // @ts-expect-error shhh
+            const next = current.cycle(this.part, this.config.cycle)[this.part];
+            this.announcer.announce(String(next));
+            return this.#formatValue(next);
+        });
+    }
+    #handleArrowDown(placeholder) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
+        }
+        // @ts-expect-error - this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                const next = placeholder[this.part];
+                this.announcer.announce(String(next));
+                return this.#formatValue(next);
+            }
+            const current = placeholder.set({
+                [this.part]: Number.parseInt(prev),
+            });
+            // @ts-expect-error shhh
+            const next = current.cycle(this.part, -this.config.cycle)[this.part];
+            this.announcer.announce(String(next));
+            return this.#formatValue(next);
+        });
+    }
+    #handleNumberKey(e) {
+        const num = Number.parseInt(e.key);
+        let moveToNext = false;
+        const max = this.#getMax();
+        const maxStart = Math.floor(max / 10);
+        const numIsZero = num === 0;
+        const stateKey = this.part;
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (stateKey in this.root.states && this.root.states[stateKey].hasLeftFocus) {
+                prev = null;
+                this.root.states[stateKey].hasLeftFocus = false;
+            }
+            if (prev === null) {
+                if (numIsZero) {
+                    if (stateKey in this.root.states) {
+                        this.root.states[stateKey].lastKeyZero = true;
+                    }
+                    this.announcer.announce('0');
+                    return '0';
+                }
+                if (stateKey in this.root.states && (this.root.states[stateKey].lastKeyZero || num > maxStart)) {
+                    moveToNext = true;
+                }
+                if (stateKey in this.root.states) {
+                    this.root.states[stateKey].lastKeyZero = false;
+                }
+                if (moveToNext && String(num).length === 1) {
+                    this.announcer.announce(num);
+                    return `0${num}`;
+                }
+                return `${num}`;
+            }
+            if (stateKey in this.root.states && this.root.states[stateKey].lastKeyZero) {
+                if (num !== 0) {
+                    moveToNext = true;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return `0${num}`;
+                }
+                if (this.part === 'hour' && num === 0 && this.root.hourCycle === 24) {
+                    moveToNext = true;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return `00`;
+                }
+                if ((this.part === 'minute' || this.part === 'second') && num === 0) {
+                    moveToNext = true;
+                    this.root.states[stateKey].lastKeyZero = false;
+                    return '00';
+                }
+                return prev;
+            }
+            const total = Number.parseInt(prev + num.toString());
+            if (total > max) {
+                moveToNext = true;
+                return `0${num}`;
+            }
+            moveToNext = true;
+            return `${total}`;
+        });
+        if (moveToNext) {
+            moveToNextSegment(e, this.root.getFieldNode());
+        }
+    }
+    #handleBackspace(e) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = false;
+        }
+        let moveToPrev = false;
+        // @ts-expect-error this is a part
+        this.root.updateSegment(this.part, (prev) => {
+            if (prev === null) {
+                moveToPrev = true;
+                this.announcer.announce(null);
+                return null;
+            }
+            if (prev.length === 2 && prev.startsWith('0')) {
+                this.announcer.announce(null);
+                return null;
+            }
+            const str = prev.toString();
+            if (str.length === 1) {
+                this.announcer.announce(null);
+                return null;
+            }
+            const next = Number.parseInt(str.slice(0, -1));
+            this.announcer.announce(String(next));
+            return `${next}`;
+        });
+        if (moveToPrev) {
+            moveToPrevSegment(e, this.root.getFieldNode());
+        }
+    }
+    onfocusout(_) {
+        const stateKey = this.part;
+        if (stateKey in this.root.states) {
+            this.root.states[stateKey].hasLeftFocus = true;
+        }
+        // Pad with zero if needed
+        if (this.config.padZero) {
+            // @ts-expect-error this is a part
+            this.root.updateSegment(this.part, (prev) => {
+                if (prev && prev.length === 1) {
+                    return `0${prev}`;
+                }
+                return prev;
+            });
+        }
+    }
+    getSegmentProps() {
+        const segmentValues = this.root.segmentValues;
+        const placeholder = this.root.placeholder.current;
+        const isEmpty = segmentValues[this.part] === null;
+        let value = placeholder;
+        if (segmentValues[this.part]) {
+            value = placeholder.set({
+                [this.part]: Number.parseInt(segmentValues[this.part]),
+            });
+        }
+        const valueNow = value[this.part];
+        const valueMin = this.#getMin();
+        const valueMax = this.#getMax();
+        let valueText = isEmpty ? 'Empty' : `${valueNow}`;
+        // special handling for hour segment with dayPeriod
+        if (this.part === 'hour' && 'dayPeriod' in segmentValues && segmentValues.dayPeriod) {
+            valueText = isEmpty ? 'Empty' : `${valueNow} ${segmentValues.dayPeriod}`;
+        }
+        return {
+            'aria-label': `${this.part}, `,
+            'aria-valuemin': valueMin,
+            'aria-valuemax': valueMax,
+            'aria-valuenow': valueNow,
+            'aria-valuetext': valueText,
+        };
+    }
+    props = $derived.by(() => {
+        return {
+            ...this.root.sharedSegmentAttrs,
+            id: this.opts.id.current,
+            ...this.getSegmentProps(),
+            onkeydown: this.onkeydown,
+            onfocusout: this.onfocusout,
+            onclick: this.root.handleSegmentClick,
+            ...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
+            ...this.attachment,
+        };
+    });
+}
+class TimeFieldHourSegmentState extends BaseTimeSegmentState {
+    constructor(opts, root) {
+        super(opts, root, 'hour', SEGMENT_CONFIGS.hour);
+    }
+    onkeydown(e) {
+        const oldUpdateSegment = this.root.updateSegment.bind(this.root);
+        if (e.key.length === 1 && e.key >= '0' && e.key <= '9') {
+            this.root.hourInputDayPeriodHint = this.root.hourCycle === 24 ? null : this.root.segmentValues.dayPeriod;
+            this.root.updateSegment = (part, cb) => {
+                oldUpdateSegment(part, cb);
+                // after updating hour, check if we need to display "12" instead of "0"
+                if (part === 'hour' && 'hour' in this.root.segmentValues) {
+                    const hourValue = this.root.segmentValues.hour;
+                    if (hourValue === '0' && this.root.dayPeriodNode && this.root.hourCycle !== 24) {
+                        this.root.segmentValues.hour = '12';
+                    }
+                }
+            };
+        }
+        super.onkeydown(e);
+        this.root.updateSegment = oldUpdateSegment;
+        this.root.hourInputDayPeriodHint = null;
+    }
+}
+class TimeFieldMinuteSegmentState extends BaseTimeSegmentState {
+    constructor(opts, root) {
+        super(opts, root, 'minute', SEGMENT_CONFIGS.minute);
+    }
+}
+class TimeFieldSecondSegmentState extends BaseTimeSegmentState {
+    constructor(opts, root) {
+        super(opts, root, 'second', SEGMENT_CONFIGS.second);
+    }
+}
+class TimeFieldDayPeriodSegmentState {
+    opts;
+    root;
+    attachment;
+    #announcer;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.#announcer = this.root.announcer;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.dayPeriodNode = v));
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onbeforeinput = this.onbeforeinput.bind(this);
+    }
+    onbeforeinput(e) {
+        if (this.root.disabled.current)
+            return;
+        const data = typeof e.data === 'string' ? e.data.trim().toLowerCase() : '';
+        if (!data)
+            return;
+        e.preventDefault();
+        if (data === 'a' || data === 'p') {
+            this.root.updateSegment('dayPeriod', () => {
+                const next = data === 'a' ? 'AM' : 'PM';
+                this.#announcer.announce(next);
+                return next;
+            });
+        }
+    }
+    onkeydown(e) {
+        if (e.ctrlKey || e.metaKey || this.root.disabled.current)
+            return;
+        if (e.key !== kbd.TAB)
+            e.preventDefault();
+        if (!isAcceptableDayPeriodKey(e.key))
+            return;
+        if (isArrowUp(e.key) || isArrowDown(e.key)) {
+            this.root.updateSegment('dayPeriod', (prev) => {
+                if (prev === 'AM') {
+                    const next = 'PM';
+                    this.#announcer.announce(next);
+                    return next;
+                }
+                const next = 'AM';
+                this.#announcer.announce(next);
+                return next;
+            });
+            return;
+        }
+        if (isBackspace(e.key)) {
+            this.root.states.dayPeriod.hasLeftFocus = false;
+            this.root.updateSegment('dayPeriod', () => {
+                const next = 'AM';
+                this.#announcer.announce(next);
+                return next;
+            });
+        }
+        if (e.key === kbd.A || e.key === kbd.P || e.key === kbd.a || e.key === kbd.p) {
+            this.root.updateSegment('dayPeriod', () => {
+                const next = e.key === kbd.A || e.key === kbd.a ? 'AM' : 'PM';
+                this.#announcer.announce(next);
+                return next;
+            });
+        }
+        if (isSegmentNavigationKey(e.key)) {
+            handleTimeSegmentNavigation(e, this.root.getFieldNode());
+        }
+    }
+    props = $derived.by(() => {
+        const segmentValues = this.root.segmentValues;
+        if (!('dayPeriod' in segmentValues))
+            return;
+        const valueMin = 0;
+        const valueMax = 12;
+        const valueNow = segmentValues.dayPeriod === 'AM' ? 0 : 12;
+        const valueText = segmentValues.dayPeriod === 'AM' ? 'AM' : 'PM';
+        return {
+            ...this.root.sharedSegmentAttrs,
+            id: this.opts.id.current,
+            inputmode: 'text',
+            'aria-label': 'AM/PM',
+            'aria-valuemin': valueMin,
+            'aria-valuemax': valueMax,
+            'aria-valuenow': valueNow,
+            'aria-valuetext': valueText,
+            onkeydown: this.onkeydown,
+            onbeforeinput: this.onbeforeinput,
+            onclick: this.root.handleSegmentClick,
+            ...this.root.getBaseSegmentAttrs('dayPeriod', this.opts.id.current),
+            ...this.attachment,
+        };
+    });
+}
+class TimeFieldLiteralSegmentState {
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'aria-hidden': boolToStrTrueOrUndef(true),
+        ...this.root.getBaseSegmentAttrs('literal', this.opts.id.current),
+        ...this.attachment,
+    }));
+}
+class TimeFieldTimeZoneSegmentState {
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onkeydown(e) {
+        if (e.key !== kbd.TAB)
+            e.preventDefault();
+        if (this.root.disabled.current)
+            return;
+        if (isSegmentNavigationKey(e.key)) {
+            handleTimeSegmentNavigation(e, this.root.getFieldNode());
+        }
+    }
+    props = $derived.by(() => ({
+        role: 'textbox',
+        id: this.opts.id.current,
+        'aria-label': 'timezone, ',
+        style: {
+            caretColor: 'transparent',
+        },
+        onkeydown: this.onkeydown,
+        tabindex: 0,
+        ...this.root.getBaseSegmentAttrs('timeZoneName', this.opts.id.current),
+        'data-readonly': boolToEmptyStrOrUndef(true),
+        ...this.attachment,
+    }));
+}
+export class TimeFieldSegmentState {
+    static create(part, opts) {
+        const root = getTimeFieldRoot();
+        switch (part) {
+            case 'hour':
+                return new TimeFieldHourSegmentState(opts, root);
+            case 'minute':
+                return new TimeFieldMinuteSegmentState(opts, root);
+            case 'second':
+                return new TimeFieldSecondSegmentState(opts, root);
+            case 'dayPeriod':
+                return new TimeFieldDayPeriodSegmentState(opts, root);
+            case 'literal':
+                return new TimeFieldLiteralSegmentState(opts, root);
+            case 'timeZoneName':
+                return new TimeFieldTimeZoneSegmentState(opts, root);
+            default:
+                throw new Error(`Invalid part: ${part}`);
+        }
+    }
+}