@bspk/ui 1.3.3 → 1.3.5

package/dist/components/TimePicker/Listbox.d.ts

@@ -0,0 +1,15 @@
+import { TimePickerType } from './Segment';
+type Option = {
+    id: string;
+    value: string;
+    label: string;
+};
+type TimePickerListboxProps = {
+    options: Option[];
+    selectedValue?: string;
+    type: TimePickerType;
+    onSelect?: (value: string) => void;
+    onTab?: (e: React.KeyboardEvent) => void;
+};
+export declare function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimePickerListboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{TimeInput → TimePicker}/Listbox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import { getElementById } from '../../utils/dom';
 import { handleKeyDown } from '../../utils/handleKeyDown';
-export function TimeInputListbox({ options, selectedValue, type: kind, onSelect, onTab }) {
+export function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }) {
     const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
         ids: options.map((option) => option.id),
         defaultActiveId: (options.find((option) => option.value === selectedValue) || options[0])?.id || null,
@@ -11,7 +11,7 @@ export function TimeInputListbox({ options, selectedValue, type: kind, onSelect,
         if (activeElementId)
             getElementById(activeElementId)?.click();
     };
-    return (_jsx("div", { "aria-label": `Select ${kind}`, "data-bspk": "time-input-listbox", "data-scroll-column": kind, "data-type": kind, "data-visible": true, id: `${kind}-listbox`, onClickCapture: (event) => {
+    return (_jsx("div", { "aria-label": `Select ${kind}`, "data-bspk": "time-picker-listbox", "data-scroll-column": kind, "data-type": kind, "data-visible": true, id: `${kind}-listbox`, onClickCapture: (event) => {
             const target = event.target;
             if (target.dataset.value)
                 onSelect?.(target.dataset.value);

package/dist/components/TimePicker/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../src/components/TimePicker/Listbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAgBtD,MAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAA0B;IAC7G,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,GAAG,kBAAkB,CAAC;QAC9D,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;QACvC,eAAe,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,IAAI;KACxG,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,IAAI,eAAe;YAAE,cAAc,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC;IAClE,CAAC,CAAC;IAEF,OAAO,CACH,4BAEgB,UAAU,IAAI,EAAE,eAClB,qBAAqB,wBACX,IAAI,eACb,IAAI,kBACD,IAAI,EAClB,EAAE,EAAE,GAAG,IAAI,UAAU,EACrB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC/C,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK;gBAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/D,CAAC,EACD,SAAS,EAAE,aAAa,CAAC;YACrB,GAAG,iBAAiB;YACpB,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,eAAe;YACtB,GAAG,EAAE,KAAK;SACb,CAAC,EACF,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,YAEV,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,6BACgB,MAAM,CAAC,KAAK,mBACT,MAAM,CAAC,KAAK,KAAK,aAAa,iBAChC,eAAe,KAAK,MAAM,CAAC,EAAE,IAAI,SAAS,gBAC3C,KAAK,gBACL,MAAM,CAAC,KAAK,EACxB,EAAE,EAAE,MAAM,CAAC,EAAE,EAEb,IAAI,EAAC,QAAQ,YAEZ,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAH9B,MAAM,CAAC,EAAE,CAIX,CACV,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/TimePicker/Segment.d.ts

@@ -0,0 +1,21 @@
+export declare const MINUTE_BOUNDS: {
+    readonly min: 0;
+    readonly max: 59;
+};
+export declare const HOUR_BOUNDS: {
+    readonly min: 1;
+    readonly max: 12;
+};
+export declare const NUMBER_PLACEHOLDER: "--";
+export type TimePickerType = 'hours' | 'meridiem' | 'minutes';
+type TimePickerSegmentProps<T extends string> = {
+    disabled?: boolean;
+    name: string;
+    readOnly?: boolean;
+    value?: T;
+    type: TimePickerType;
+    onChange: (value: T | null) => void;
+    setRef?: (element: HTMLElement | null) => void;
+};
+export declare function TimePickerSegment<T extends string>({ disabled, name, readOnly, value: valueProp, type: kind, onChange, setRef, }: TimePickerSegmentProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{TimeInput → TimePicker}/Segment.js

@@ -5,7 +5,7 @@ import { handleKeyDown } from '../../utils/handleKeyDown';
 export const MINUTE_BOUNDS = { min: 0, max: 59 };
 export const HOUR_BOUNDS = { min: 1, max: 12 };
 export const NUMBER_PLACEHOLDER = '--';
-export function TimeInputSegment({ disabled, name, readOnly, value: valueProp, type: kind, onChange, }) {
+export function TimePickerSegment({ disabled, name, readOnly, value: valueProp, type: kind, onChange, setRef, }) {
     const ref = useRef(null);
     const selectAll = (element = ref.current) => {
         if (!element)
@@ -135,6 +135,7 @@ export function TimeInputSegment({ disabled, name, readOnly, value: valueProp, t
                 return;
             ref.current = element;
             element.textContent = valueToContent(valueProp);
+            setRef?.(element);
         }, role: "spinbutton", spellCheck: "false", tabIndex: disabled || readOnly ? -1 : 0 }));
 }
 function getNextSibling(elem, selector) {

package/dist/components/TimePicker/Segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.js","sourceRoot":"","sources":["../../../src/components/TimePicker/Segment.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,36 @@
+import './time-picker.scss';
+import { InputProps } from '-/components/Input';
+import { ElementProps, FieldControlProps } from '-/types/common';
+export type TimePickerProps = FieldControlProps & Pick<InputProps, 'size'>;
+/**
+ * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
+ * select a date.
+ *
+ * For a more complete example with field usage, see the TimePickerField component.
+ *
+ * @example
+ *     import { TimePicker } from '@bspk/ui/TimePicker';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, onChange] = React.useState('');
+ *
+ *         return <TimePicker aria-label="Time" name="time" value={value} onChange={onChange} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, onChange] = React.useState('');
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Time</FieldLabel>
+ *                 <TimePicker value={value} onChange={onChange} />
+ *                 <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name TimePicker
+ * @phase UXReview
+ */
+export declare function TimePicker({ value, disabled, id: idProp, invalid: invalidProp, readOnly, name, size, required, onChange: onChangeProp, 'aria-label': ariaLabel, ...props }: ElementProps<TimePickerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './time-picker.css.js';
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { TimePickerListbox } from './Listbox';
+import { TimePickerSegment } from './Segment';
+import { HOUR_OPTIONS, MINUTE_OPTIONS, MERIDIEM_OPTIONS, partsToStringValue, stringValueToParts, } from './utils';
+import { Button } from '../Button';
+import { useFieldInit } from '../Field';
+import { Menu } from '../Menu';
+import { Portal } from '../Portal';
+import { useFloating } from '../../hooks/useFloating';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+/**
+ * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
+ * select a date.
+ *
+ * For a more complete example with field usage, see the TimePickerField component.
+ *
+ * @example
+ *     import { TimePicker } from '@bspk/ui/TimePicker';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, onChange] = React.useState('');
+ *
+ *         return <TimePicker aria-label="Time" name="time" value={value} onChange={onChange} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, onChange] = React.useState('');
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Time</FieldLabel>
+ *                 <TimePicker value={value} onChange={onChange} />
+ *                 <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name TimePicker
+ * @phase UXReview
+ */
+export function TimePicker({ value, disabled, id: idProp, invalid: invalidProp, readOnly, name, size, required = false, onChange: onChangeProp, 'aria-label': ariaLabel = 'Time picker', ...props }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    const menuId = `${id}-time-picker-menu`;
+    const { hours, minutes, meridiem } = useMemo(() => stringValueToParts(value || '00:00'), [value]);
+    const setValue = useCallback((params) => {
+        const nextValue = { hours, minutes, meridiem, ...params };
+        onChangeProp(partsToStringValue(nextValue.hours?.toString(), nextValue.minutes?.toString(), nextValue.meridiem));
+    }, [hours, minutes, meridiem, onChangeProp]);
+    const [open, setOpenState] = useState(false);
+    const { floatingStyles, elements } = useFloating({
+        strategy: 'fixed',
+        refWidth: false,
+        offsetOptions: 4,
+        hide: !open,
+    });
+    const setOpen = useCallback((nextOpen) => {
+        setOpenState(nextOpen);
+        if (!elements.reference || !buttonRef.current)
+            return;
+        // Focus the button when closing the menu
+        if (!nextOpen && open)
+            buttonRef.current.focus();
+        // Focus the hours listbox when opening the menu
+        if (nextOpen && !open)
+            elements.reference.querySelector('[data-scroll-column="hours"]')?.focus();
+    }, [elements?.reference, open]);
+    useOutsideClick({ elements: [elements.floating], callback: () => setOpen(false), disabled: !open });
+    const { hourOptions, minuteOptions, meridiemOptions } = useMemo(() => ({
+        hourOptions: HOUR_OPTIONS.map((h) => ({
+            id: `${id}-hours-${h}`,
+            value: h,
+            label: h.toString().padStart(2, '0'),
+        })),
+        minuteOptions: MINUTE_OPTIONS.map((m) => ({
+            id: `${id}-minutes-${m}`,
+            value: m,
+            label: m.toString().padStart(2, '0'),
+        })),
+        meridiemOptions: MERIDIEM_OPTIONS.map((m) => ({
+            id: `${id}-meridiem-${m}`,
+            value: m,
+            label: m,
+        })),
+    }), [id]);
+    const listBoxRefs = useRef(null);
+    const buttonRef = useRef(null);
+    const [firstField, setFirstField] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "aria-label": ariaLabel || undefined, "data-bspk": "time-picker", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-name": name || undefined, "data-open": open || undefined, "data-readonly": readOnly || undefined, "data-size": size || undefined, "data-value": value || undefined, onClickCapture: () => {
+                    if (disabled || readOnly)
+                        return;
+                    elements.reference?.querySelector('[tabIndex]')?.focus();
+                }, onKeyDownCapture: handleKeyDown({ Escape: () => setOpen(false) }), ref: (node) => {
+                    elements.setReference(node);
+                }, role: "group", tabIndex: -1, children: [_jsx("input", { "aria-hidden": true, "data-sr-only": true, id: id, name: name, onChange: (e) => onChangeProp(e.target.value), onFocus: () => firstField?.focus(), tabIndex: -1, value: value }), _jsx(TimePickerSegment, { disabled: disabled, name: `${name}-hours`, onChange: (next) => setValue({ hours: next || undefined }), readOnly: readOnly, setRef: setFirstField, type: "hours", value: hours }), _jsx("span", { "aria-hidden": "true", children: ":" }), _jsx(TimePickerSegment, { disabled: disabled, name: `${name}-minutes`, onChange: (next) => setValue({ minutes: next || undefined }), readOnly: readOnly, type: "minutes", value: minutes }), _jsx(TimePickerSegment, { disabled: disabled, name: `${name}-meridiem`, onChange: (next) => setValue({ meridiem: next || 'AM' }), readOnly: readOnly, type: "meridiem", value: meridiem }), _jsx(Button, { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", as: "span", disabled: disabled || readOnly, icon: _jsx(SvgSchedule, {}), iconOnly: true, innerRef: (node) => {
+                            buttonRef.current = node;
+                        }, label: `${open ? 'Close' : 'Open'} Time Picker`, onClick: () => setOpen(!open), role: "combobox", variant: "tertiary" })] }), open && (_jsx(Portal, { children: _jsx(Menu, { id: menuId, innerRef: (node) => {
+                        if (!node)
+                            return;
+                        elements.setFloating(node);
+                    }, label: "Select time", owner: "time-picker", style: floatingStyles, width: "fit-content", children: _jsx(FocusTrap, { focusTrapOptions: {
+                            fallbackFocus: () => listBoxRefs.current.hours,
+                            clickOutsideDeactivates: true,
+                        }, children: _jsxs("div", { "data-scroll-values": true, ref: (node) => {
+                                listBoxRefs.current = {
+                                    hours: node?.querySelector('[data-scroll-column="hours"]'),
+                                    minutes: node?.querySelector('[data-scroll-column="minutes"]'),
+                                    meridiem: node?.querySelector('[data-scroll-column="meridiem"]'),
+                                };
+                                const activeHour = listBoxRefs.current.hours?.querySelector('[data-active]');
+                                const activeMinute = listBoxRefs.current.minutes?.querySelector('[data-active]');
+                                const activeMeridiem = listBoxRefs.current.meridiem?.querySelector('[data-active]');
+                                activeHour?.scrollIntoView({ block: 'nearest' });
+                                activeMinute?.scrollIntoView({ block: 'nearest' });
+                                activeMeridiem?.scrollIntoView({ block: 'nearest' });
+                                activeHour?.focus();
+                            }, children: [_jsx(TimePickerListbox, { onSelect: (next) => {
+                                        setValue({ hours: next });
+                                        setTimeout(() => listBoxRefs.current?.minutes?.focus(), 10);
+                                    }, options: hourOptions, selectedValue: hours, type: "hours" }), _jsx(TimePickerListbox, { onSelect: (next) => {
+                                        setValue({ minutes: next });
+                                        setTimeout(() => listBoxRefs.current?.meridiem?.focus(), 10);
+                                    }, options: minuteOptions, selectedValue: minutes, type: "minutes" }), _jsx(TimePickerListbox, { onSelect: (next) => {
+                                        setValue({ meridiem: next });
+                                        setOpen(false);
+                                        setTimeout(() => buttonRef.current?.focus(), 10);
+                                    }, options: meridiemOptions, selectedValue: meridiem, type: "meridiem" })] }) }) }) }))] }));
+}
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimePicker/TimePickerExample.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerProps } from './TimePicker';
+import { ComponentExample } from '-/utils/demo';
+export declare const TimePickerExample: ComponentExample<TimePickerProps>;

package/dist/components/TimePicker/TimePickerExample.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TimePickerExample = {
+    variants: false,
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+};
+//# sourceMappingURL=TimePickerExample.js.map

package/dist/components/TimePicker/TimePickerExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerExample.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePickerExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,QAAQ,EAAE,KAAK;IAEf,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

package/dist/components/TimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/dist/components/TimePicker/index.js

@@ -0,0 +1,2 @@
+export * from './TimePicker';
+//# sourceMappingURL=index.js.map

package/dist/components/TimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimePicker/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/{TimeInput/time-input.css → TimePicker/time-picker.css}

@@ -1,4 +1,4 @@
-[data-bspk=time-input] {
+[data-bspk=time-picker] {
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row;
@@ -6,50 +6,52 @@
   border: solid 1px var(--border-color);
   height: var(--field-height);
   border-radius: var(--radius-sm);
-  padding: 0 0 0 var(--field-padding);
+  padding: 0 0 0 var(--field-padding, var(--spacing-sizing-02));
   width: 100%;
   justify-content: flex-start;
   align-items: center;
 }
-[data-bspk=time-input]:hover:not(:focus-within) {
+[data-bspk=time-picker]:hover:not(:focus-within, [data-disabled], [data-readonly]) {
   background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input]:active:not(:focus-within) {
+[data-bspk=time-picker]:active:not(:focus-within, [data-disabled], [data-readonly]) {
   background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-readonly] {
+[data-bspk=time-picker][data-readonly] {
   --border-color: var(--stroke-neutral-disabled-light);
+  pointer-events: none;
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-disabled], [data-bspk=time-input]:has(input[disabled]) {
+[data-bspk=time-picker][data-disabled], [data-bspk=time-picker]:has(input[disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
+  pointer-events: none;
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-disabled] > *, [data-bspk=time-input]:has(input[disabled]) > * {
+[data-bspk=time-picker][data-disabled] > *, [data-bspk=time-picker]:has(input[disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=time-input][data-invalid] {
+[data-bspk=time-picker][data-invalid] {
   --border-color: var(--status-error);
 }
-[data-bspk=time-input][data-size=small] {
+[data-bspk=time-picker][data-size=small] {
   --field-padding: var(--spacing-sizing-02);
   --field-height: var(--spacing-sizing-08);
   --field-font: var(--body-small);
 }
-[data-bspk=time-input][data-size=medium] {
+[data-bspk=time-picker][data-size=medium] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-10);
   --field-font: var(--body-base);
 }
-[data-bspk=time-input][data-size=large] {
+[data-bspk=time-picker][data-size=large] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-12);
   --field-font: var(--body-large);
 }
-[data-bspk=time-input] [aria-hidden] {
+[data-bspk=time-picker] [aria-hidden] {
   font: var(--field-font);
 }
-[data-bspk=time-input] [data-input] {
+[data-bspk=time-picker] [data-input] {
   background-color: transparent !important;
   border: none;
   outline: none;
@@ -61,30 +63,30 @@
   line-height: var(--field-height);
   width: fit-content;
 }
-[data-bspk=time-input] [data-input][data-type=meridiem] {
+[data-bspk=time-picker] [data-input][data-type=meridiem] {
   text-transform: uppercase;
   margin-left: 0.25em;
 }
-[data-bspk=time-input] [data-input] * {
+[data-bspk=time-picker] [data-input] * {
   pointer-events: none;
 }
-[data-bspk=time-input] [data-bspk=button] {
+[data-bspk=time-picker] [data-bspk=button] {
   margin-left: auto;
 }
-[data-bspk=time-input] [data-bspk=button]:focus {
+[data-bspk=time-picker] [data-bspk=button]:focus {
   outline-offset: -4px;
   border-radius: var(--radius-md);
 }
-[data-bspk=time-input]:focus-within, [data-bspk=time-input][data-open] {
+[data-bspk=time-picker]:focus-within, [data-bspk=time-picker][data-open] {
   --border-color: var(--stroke-neutral-focus);
   outline: 1px solid var(--stroke-neutral-focus);
 }
 
-[data-bspk-owner=time-input][data-bspk-utility=menu] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] {
   overflow: hidden;
   height: 324px;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -95,7 +97,7 @@
   gap: var(--spacing-sizing-04);
   padding: var(--spacing-sizing-04);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
   padding: 0 var(--spacing-sizing-01);
   display: flex;
   flex-direction: column;
@@ -106,7 +108,7 @@
   align-items: center;
   justify-content: start;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -117,20 +119,20 @@
   font: var(--labels-base);
   line-height: var(--spacing-sizing-10);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
   outline: 2px solid var(--stroke-neutral-focus);
   border-radius: var(--radius-sm);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
   background: var(--interactions-neutral-hover-opacity);
   outline: 2px solid var(--interactions-neutral-hover-opacity);
   outline-offset: -2px;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }

package/dist/components/{TimeInput/time-input.css.js → TimePicker/time-picker.css.js}

@@ -1,7 +1,7 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=time-input] {
+style.appendChild(document.createTextNode(`[data-bspk=time-picker] {
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row;
@@ -9,50 +9,52 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   border: solid 1px var(--border-color);
   height: var(--field-height);
   border-radius: var(--radius-sm);
-  padding: 0 0 0 var(--field-padding);
+  padding: 0 0 0 var(--field-padding, var(--spacing-sizing-02));
   width: 100%;
   justify-content: flex-start;
   align-items: center;
 }
-[data-bspk=time-input]:hover:not(:focus-within) {
+[data-bspk=time-picker]:hover:not(:focus-within, [data-disabled], [data-readonly]) {
   background: linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input]:active:not(:focus-within) {
+[data-bspk=time-picker]:active:not(:focus-within, [data-disabled], [data-readonly]) {
   background: linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-readonly] {
+[data-bspk=time-picker][data-readonly] {
   --border-color: var(--stroke-neutral-disabled-light);
+  pointer-events: none;
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-disabled], [data-bspk=time-input]:has(input[disabled]) {
+[data-bspk=time-picker][data-disabled], [data-bspk=time-picker]:has(input[disabled]) {
   --border-color: var(--stroke-neutral-disabled-light);
+  pointer-events: none;
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=time-input][data-disabled] > *, [data-bspk=time-input]:has(input[disabled]) > * {
+[data-bspk=time-picker][data-disabled] > *, [data-bspk=time-picker]:has(input[disabled]) > * {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=time-input][data-invalid] {
+[data-bspk=time-picker][data-invalid] {
   --border-color: var(--status-error);
 }
-[data-bspk=time-input][data-size=small] {
+[data-bspk=time-picker][data-size=small] {
   --field-padding: var(--spacing-sizing-02);
   --field-height: var(--spacing-sizing-08);
   --field-font: var(--body-small);
 }
-[data-bspk=time-input][data-size=medium] {
+[data-bspk=time-picker][data-size=medium] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-10);
   --field-font: var(--body-base);
 }
-[data-bspk=time-input][data-size=large] {
+[data-bspk=time-picker][data-size=large] {
   --field-padding: var(--spacing-sizing-03);
   --field-height: var(--spacing-sizing-12);
   --field-font: var(--body-large);
 }
-[data-bspk=time-input] [aria-hidden] {
+[data-bspk=time-picker] [aria-hidden] {
   font: var(--field-font);
 }
-[data-bspk=time-input] [data-input] {
+[data-bspk=time-picker] [data-input] {
   background-color: transparent !important;
   border: none;
   outline: none;
@@ -64,30 +66,30 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   line-height: var(--field-height);
   width: fit-content;
 }
-[data-bspk=time-input] [data-input][data-type=meridiem] {
+[data-bspk=time-picker] [data-input][data-type=meridiem] {
   text-transform: uppercase;
   margin-left: 0.25em;
 }
-[data-bspk=time-input] [data-input] * {
+[data-bspk=time-picker] [data-input] * {
   pointer-events: none;
 }
-[data-bspk=time-input] [data-bspk=button] {
+[data-bspk=time-picker] [data-bspk=button] {
   margin-left: auto;
 }
-[data-bspk=time-input] [data-bspk=button]:focus {
+[data-bspk=time-picker] [data-bspk=button]:focus {
   outline-offset: -4px;
   border-radius: var(--radius-md);
 }
-[data-bspk=time-input]:focus-within, [data-bspk=time-input][data-open] {
+[data-bspk=time-picker]:focus-within, [data-bspk=time-picker][data-open] {
   --border-color: var(--stroke-neutral-focus);
   outline: 1px solid var(--stroke-neutral-focus);
 }
 
-[data-bspk-owner=time-input][data-bspk-utility=menu] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] {
   overflow: hidden;
   height: 324px;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -98,7 +100,7 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   gap: var(--spacing-sizing-04);
   padding: var(--spacing-sizing-04);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] {
   padding: 0 var(--spacing-sizing-01);
   display: flex;
   flex-direction: column;
@@ -109,7 +111,7 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   align-items: center;
   justify-content: start;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -120,20 +122,20 @@ style.appendChild(document.createTextNode(`[data-bspk=time-input] {
   font: var(--labels-base);
   line-height: var(--spacing-sizing-10);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column] span[aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus {
   outline: 2px solid var(--stroke-neutral-focus);
   border-radius: var(--radius-sm);
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
   background: var(--interactions-neutral-hover-opacity);
   outline: 2px solid var(--interactions-neutral-hover-opacity);
   outline-offset: -2px;
 }
-[data-bspk-owner=time-input][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
+[data-bspk-owner=time-picker][data-bspk-utility=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected=true] {
   background: var(--surface-brand-primary);
   color: var(--foreground-brand-on-primary);
 }

package/dist/components/TimePicker/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const MINUTE_OPTIONS: string[];
+export declare const HOUR_OPTIONS: string[];
+export declare const MERIDIEM_OPTIONS: string[];
+export type Meridiem = 'AM' | 'PM';
+export declare function stringValueToParts(timeString: string): {
+    hours: string | undefined;
+    minutes: string | undefined;
+    meridiem: Meridiem;
+    str: string;
+};
+export declare function partsToStringValue(hours: string | undefined, minutes: string | undefined, meridiem: Meridiem): string;