@caratlogic/design-system 0.1.5 → 0.1.6

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

@@ -0,0 +1,3 @@
+import type { TimePickerProps } from './TimePicker.types';
+export declare function TimePicker({ value, onChange, onBlur, name, className, disabled, placeholder, use24Hour, minuteStep, hideFooter, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAY1D,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAA2B,EAC3B,SAAiB,EACjB,UAAc,EACd,UAAkB,GACnB,EAAE,eAAe,2CAiJjB"}

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

@@ -0,0 +1,8 @@
+import type { TimeColumnProps } from './TimePicker.types';
+/**
+ * One scrolling column of the picker (hours, minutes or period). The selected
+ * row is scrolled into view whenever it changes, so reopening the popover lands
+ * on the current value instead of at midnight.
+ */
+export declare function TimeColumn({ label, options, selected, onSelect, }: TimeColumnProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TimePicker.parts.d.ts.map

package/dist/components/molecules/TimePicker/TimePicker.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.parts.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimePicker/TimePicker.parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,2CAmDjB"}

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

@@ -0,0 +1,33 @@
+export interface TimePickerProps {
+    /** 24-hour `HH:mm` (`HH:mm:ss` is accepted and truncated). Empty when unset. */
+    value?: string;
+    /** Fires with `HH:mm`, or `undefined` when cleared. */
+    onChange: (value: string | undefined) => void;
+    onBlur?: () => void;
+    name?: string;
+    className?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Show and pick in 24-hour time. The stored value is always 24-hour. */
+    use24Hour?: boolean;
+    /** Granularity of the minute column. @default 1 */
+    minuteStep?: number;
+    /** Hide the Clear / Now row under the columns. */
+    hideFooter?: boolean;
+}
+export interface ParsedTime {
+    /** 0–23. */
+    hour: number;
+    /** 0–59. */
+    minute: number;
+}
+export interface TimeColumnProps {
+    label: string;
+    options: {
+        value: number;
+        label: string;
+    }[];
+    selected: number | null;
+    onSelect: (value: number) => void;
+}
+//# sourceMappingURL=TimePicker.types.d.ts.map

package/dist/components/molecules/TimePicker/TimePicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimePicker/TimePicker.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,YAAY;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}

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

@@ -0,0 +1,20 @@
+import type { ParsedTime } from './TimePicker.types';
+/** Reads `HH:mm` / `HH:mm:ss`. Returns null for anything out of range. */
+export declare function parseTimeValue(value?: string): ParsedTime | null;
+/** The stored form — always 24-hour, whatever the display format. */
+export declare function toTimeValue(hour: number, minute: number): string;
+export declare function formatTimeDisplay(time: ParsedTime, use24Hour: boolean): string;
+export declare function buildHourOptions(use24Hour: boolean): {
+    value: number;
+    label: string;
+}[];
+export declare function buildMinuteOptions(step: number): {
+    value: number;
+    label: string;
+}[];
+/** The hour as the 12-hour column shows it (12, 1…11). */
+export declare function toHour12(hour: number): number;
+/** Rebuilds a 24-hour hour from a 12-hour column value and its period. */
+export declare function fromHour12(hour12: number, period: 'AM' | 'PM'): number;
+export declare function periodOf(hour: number): 'AM' | 'PM';
+//# sourceMappingURL=TimePicker.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimePicker/TimePicker.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrD,0EAA0E;AAC1E,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAShE;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,OAAO,GACjB,MAAM,CAMR;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,OAAO,GACjB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAYpC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,GACX;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAOpC;AAED,0DAA0D;AAC1D,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,CAGtE;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAElD"}

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

@@ -0,0 +1,3 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.cjs.js

@@ -28609,7 +28609,7 @@ function Modal({ open, onClose, title, icon, children, footer, size = 'md', hide
     return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxRuntime.jsxs(DialogContent, { hideCloseButton: true, style: {
                 width: `min(${maxWidth}px, calc(100vw - 2rem))`,
                 maxWidth: `${maxWidth}px`,
-            }, className: cn('flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-none', className), children: [jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsxRuntime.jsx(DialogPrimitive__namespace.Title, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsxRuntime.jsx("span", { children: title })] }) }), !hideCloseButton && (jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "aria-label": "Close", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-label transition-colors hover:bg-gray-100 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", children: jsxRuntime.jsx(X$2, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsxRuntime.jsx("footer", { className: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
+            }, className: cn('flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-none', className), children: [jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsxRuntime.jsx(DialogPrimitive__namespace.Title, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsxRuntime.jsx("span", { children: title })] }) }), !hideCloseButton && (jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "aria-label": "Close", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-label transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", children: jsxRuntime.jsx(X$2, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsxRuntime.jsx("footer", { className: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
 }
 
 /**
@@ -57696,6 +57696,158 @@ function TagsInput({ value, onChange, placeholder, helperText, uppercase = false
     return (jsxRuntime.jsxs("div", { className: "w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Input, { value: input, onChange: onInputChange, onKeyDown: onInputKeyDown, placeholder: placeholder || 'Type and Press Enter', className: "flex-1 bg-formInput" }), jsxRuntime.jsxs(Button$1, { type: "button", onClick: addTag, disabled: addDisabled, className: "h-9 gap-1.5 disabled:opacity-50", children: [jsxRuntime.jsx(Plus, { className: "h-4 w-4" }), "Add"] })] }), helperText && (jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-muted-foreground", children: helperText })), value.length > 0 && (jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: value.map((tag, idx) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-secondary px-2 py-1 text-xs font-medium text-foreground", children: [tag, jsxRuntime.jsx("button", { type: "button", onClick: () => removeTag(idx), "aria-label": `Remove ${tag}`, className: "cursor-pointer text-muted-foreground transition-colors hover:text-foreground", children: jsxRuntime.jsx(X$2, { className: "h-3 w-3" }) })] }, idx))) }))] }));
 }
 
+/**
+ * One scrolling column of the picker (hours, minutes or period). The selected
+ * row is scrolled into view whenever it changes, so reopening the popover lands
+ * on the current value instead of at midnight.
+ */
+function TimeColumn({ label, options, selected, onSelect, }) {
+    const listRef = React.useRef(null);
+    const activeRef = React.useRef(null);
+    React.useEffect(() => {
+        const list = listRef.current;
+        const active = activeRef.current;
+        if (!list || !active)
+            return;
+        // `scrollIntoView` would scroll the page as well as the column.
+        list.scrollTop =
+            active.offsetTop - list.clientHeight / 2 + active.clientHeight / 2;
+    }, [selected]);
+    return (jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx("span", { className: "px-1 pb-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), jsxRuntime.jsx("div", { ref: listRef, role: "listbox", "aria-label": label, className: "scrollbar-thin h-[184px] overflow-y-auto px-1", children: jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: options.map((option) => {
+                        const isSelected = option.value === selected;
+                        return (jsxRuntime.jsx("button", { ref: isSelected ? activeRef : undefined, type: "button", role: "option", "aria-selected": isSelected, onClick: () => onSelect(option.value), className: cn('rounded-md px-3 py-1.5 text-center text-sm tabular-nums transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', isSelected
+                                ? 'bg-primary text-primary-foreground'
+                                : 'text-foreground hover:bg-muted'), children: option.label }, option.value));
+                    }) }) })] }));
+}
+
+const TIME_PATTERN = /^(\d{1,2}):(\d{2})(?::\d{2})?$/;
+const pad = (n) => String(n).padStart(2, '0');
+/** Reads `HH:mm` / `HH:mm:ss`. Returns null for anything out of range. */
+function parseTimeValue(value) {
+    const match = TIME_PATTERN.exec((value ?? '').trim());
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    if (hour > 23 || minute > 59)
+        return null;
+    return { hour, minute };
+}
+/** The stored form — always 24-hour, whatever the display format. */
+function toTimeValue(hour, minute) {
+    return `${pad(hour)}:${pad(minute)}`;
+}
+function formatTimeDisplay(time, use24Hour) {
+    if (use24Hour)
+        return toTimeValue(time.hour, time.minute);
+    // 0 and 12 both map to 12 — midnight is 12 AM, noon is 12 PM.
+    const hour12 = time.hour % 12 === 0 ? 12 : time.hour % 12;
+    const period = time.hour < 12 ? 'AM' : 'PM';
+    return `${pad(hour12)}:${pad(time.minute)} ${period}`;
+}
+function buildHourOptions(use24Hour) {
+    if (use24Hour) {
+        return Array.from({ length: 24 }, (_, hour) => ({
+            value: hour,
+            label: pad(hour),
+        }));
+    }
+    // 12 first, matching how a clock reads.
+    return Array.from({ length: 12 }, (_, index) => {
+        const hour12 = index === 0 ? 12 : index;
+        return { value: hour12, label: pad(hour12) };
+    });
+}
+function buildMinuteOptions(step) {
+    const safeStep = Number.isFinite(step) && step > 0 ? Math.floor(step) : 1;
+    const options = [];
+    for (let minute = 0; minute < 60; minute += safeStep) {
+        options.push({ value: minute, label: pad(minute) });
+    }
+    return options;
+}
+/** The hour as the 12-hour column shows it (12, 1…11). */
+function toHour12(hour) {
+    return hour % 12 === 0 ? 12 : hour % 12;
+}
+/** Rebuilds a 24-hour hour from a 12-hour column value and its period. */
+function fromHour12(hour12, period) {
+    const base = hour12 % 12;
+    return period === 'PM' ? base + 12 : base;
+}
+function periodOf(hour) {
+    return hour < 12 ? 'AM' : 'PM';
+}
+
+// Only one TimePicker popover should be open at a time — same coordination the
+// DateInput uses, for the same reason: each is its own `modal` Radix Popover, so
+// opening a second does not dismiss the first by outside-click.
+const TIMEPICKER_OPEN_EVENT = 'caratlogic:timepicker-open';
+const PERIOD_OPTIONS = [
+    { value: 0, label: 'AM' },
+    { value: 1, label: 'PM' },
+];
+function TimePicker({ value, onChange, onBlur, name, className, disabled, placeholder = 'Select time', use24Hour = false, minuteStep = 1, hideFooter = false, }) {
+    const [open, setOpen] = React.useState(false);
+    const instanceId = React.useId();
+    const parsed = parseTimeValue(value);
+    React.useEffect(() => {
+        const onOtherOpen = (e) => {
+            if (e.detail !== instanceId)
+                setOpen(false);
+        };
+        window.addEventListener(TIMEPICKER_OPEN_EVENT, onOtherOpen);
+        return () => window.removeEventListener(TIMEPICKER_OPEN_EVENT, onOtherOpen);
+    }, [instanceId]);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (next) {
+            window.dispatchEvent(new CustomEvent(TIMEPICKER_OPEN_EVENT, { detail: instanceId }));
+        }
+    };
+    /** Picking one column before the others commits against a 00:00 baseline. */
+    const commit = (hour, minute) => {
+        onChange(toTimeValue(hour, minute));
+    };
+    const handleHour = (picked) => {
+        const minute = parsed?.minute ?? 0;
+        if (use24Hour) {
+            commit(picked, minute);
+            return;
+        }
+        commit(fromHour12(picked, parsed ? periodOf(parsed.hour) : 'AM'), minute);
+    };
+    const handleMinute = (picked) => {
+        commit(parsed?.hour ?? 0, picked);
+    };
+    const handlePeriod = (picked) => {
+        const period = picked === 0 ? 'AM' : 'PM';
+        const hour12 = parsed ? toHour12(parsed.hour) : 12;
+        commit(fromHour12(hour12, period), parsed?.minute ?? 0);
+    };
+    const selectedHour = parsed
+        ? use24Hour
+            ? parsed.hour
+            : toHour12(parsed.hour)
+        : null;
+    // NOTE: `open` is driven from the button's onClick rather than
+    // <PopoverTrigger>, matching DateInput — inside a modal <SlideOut> the
+    // trigger's built-in toggle does not fire in Safari. <PopoverAnchor> is pure
+    // positioning, so a single controlled toggle stays the only source of truth.
+    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", name: name, onBlur: onBlur, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
+                        if (!disabled)
+                            handleOpenChange(!open);
+                    }, "data-slot": "input", "data-empty": !parsed || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsxRuntime.jsx("span", { className: cn('truncate text-sm md:text-sm', parsed ? 'text-foreground' : 'text-placeholder'), children: parsed ? formatTimeDisplay(parsed, use24Hour) : placeholder }), jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsxRuntime.jsx(Clock, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsxs(PopoverContent, { align: "start", className: "w-auto p-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [jsxRuntime.jsx(TimeColumn, { label: "Hour", options: buildHourOptions(use24Hour), selected: selectedHour, onSelect: handleHour }), jsxRuntime.jsx(TimeColumn, { label: "Min", options: buildMinuteOptions(minuteStep), selected: parsed?.minute ?? null, onSelect: handleMinute }), !use24Hour && (jsxRuntime.jsx(TimeColumn, { label: "AM/PM", options: PERIOD_OPTIONS, selected: parsed ? (periodOf(parsed.hour) === 'AM' ? 0 : 1) : null, onSelect: handlePeriod }))] }), !hideFooter && (jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between gap-2 border-t border-border pt-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                    onChange(undefined);
+                                    setOpen(false);
+                                }, className: "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Clear" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                    const now = new Date();
+                                    commit(now.getHours(), now.getMinutes());
+                                    setOpen(false);
+                                }, className: "rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:text-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Now" })] }))] })] }));
+}
+
 function mapToItem(w, separator) {
     const id = w.id || w.warehouseId || '';
     if (!id)
@@ -67858,6 +68010,7 @@ exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.TagsInput = TagsInput;
 exports.TextHyperlink = TextHyperlink;
+exports.TimePicker = TimePicker;
 exports.ToggleSwitch = ToggleSwitch;
 exports.TruncateTooltip = TruncateTooltip;
 exports.WarehouseComboBox = WarehouseComboBox;