@choco-vanille/ui 1.19.0 → 1.20.1

package/dist/components/forms/time-picker/TimePicker.js

@@ -0,0 +1,162 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import z from "../../actions/icon-button/IconButton.js";
+import "../../actions/icon-button/styles/IconButton.css.js";
+import B from "../text-field/TextField.js";
+import "../text-field/styles/TextField.css.js";
+import '../../../ui-kit82.css';import '../../../ui-kit86.css';import '../../../ui-kit91.css';import '../../../ui-kit71.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+/* empty css                                             */
+/* empty css                                                               */
+/* empty css                                                                   */
+/* empty css                                                                                          */
+/* empty css                                                                                          */
+import V from "./components/time-picker-panel/TimePickerPanel.js";
+import { DEFAULT_MINUTE_STEP as Y, DEFAULT_HOUR_STEP as q } from "./constants/index.js";
+import { useTimePicker as G } from "./hooks/useTimePicker.hook.js";
+import { TIME_PICKER_STYLES as J } from "./styles/TimePicker.css.js";
+import t from "../../overlay/popover/Popover.js";
+import "../../overlay/popover/components/content/styles/PopoverContent.css.js";
+import Q from "../../../resources/asset/ClockIcon.svg.js";
+import { cn as W } from "../../../utils/cn.js";
+import { memo as X, useRef as Z, useCallback as i } from "react";
+const $ = X(
+  ({
+    value: u,
+    defaultValue: d,
+    onChange: f,
+    defaultPanelTime: a,
+    minTime: n,
+    maxTime: r,
+    hourStep: h = q,
+    minuteStep: g = Y,
+    showNowButton: C = !1,
+    clearable: S = !1,
+    nowLabel: T = "Now",
+    clearLabel: b = "Clear",
+    id: k,
+    disabled: l,
+    "aria-label": I,
+    "aria-labelledby": y,
+    panelAriaLabel: D = "Time",
+    hoursAriaLabel: E = "Hours",
+    minutesAriaLabel: w = "Minutes",
+    triggerAriaLabel: M = "Open time picker",
+    onKeyDown: p,
+    ...m
+  }) => {
+    const {
+      selectedTime: N,
+      inputValue: P,
+      open: _,
+      inputId: v,
+      handleInputChange: F,
+      handleInputKeyDown: c,
+      handleHourSelect: H,
+      handleMinuteSelect: O,
+      handleNowSelect: R,
+      handleClear: U,
+      setOpen: A
+    } = G({
+      value: u,
+      defaultValue: d,
+      onChange: f,
+      id: k,
+      defaultPanelTime: a,
+      minTime: n,
+      maxTime: r
+    }), s = Z(null), K = i(
+      (e) => {
+        c(e), p?.(e);
+      },
+      [c, p]
+    ), L = i(
+      (e) => {
+        e.preventDefault();
+      },
+      []
+    ), j = i(
+      (e) => {
+        e.preventDefault();
+      },
+      []
+    );
+    return /* @__PURE__ */ x(
+      t,
+      {
+        open: _,
+        onOpenChange: A,
+        children: [
+          /* @__PURE__ */ o(
+            B,
+            {
+              ...m,
+              ref: s,
+              id: v,
+              type: "time",
+              min: n,
+              max: r,
+              disabled: l,
+              value: P,
+              onChange: F,
+              onKeyDown: K,
+              onClick: L,
+              className: W(J.input, m.className),
+              "aria-label": I,
+              "aria-labelledby": y,
+              "aria-haspopup": "dialog",
+              endAction: /* @__PURE__ */ o(t.Trigger, { children: /* @__PURE__ */ o(
+                z,
+                {
+                  icon: Q,
+                  "aria-label": M,
+                  variant: "ghost",
+                  color: "primary",
+                  size: "sm",
+                  type: "button",
+                  disabled: l,
+                  onMouseDown: j
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ o(
+            t.Content,
+            {
+              side: "bottom",
+              align: "end",
+              padding: "none",
+              "aria-label": D,
+              initialFocus: !1,
+              finalFocus: s,
+              children: /* @__PURE__ */ o(
+                V,
+                {
+                  selectedTime: N,
+                  defaultPanelTime: a,
+                  minTime: n,
+                  maxTime: r,
+                  hourStep: h,
+                  minuteStep: g,
+                  hoursAriaLabel: E,
+                  minutesAriaLabel: w,
+                  showNowButton: C,
+                  clearable: S,
+                  nowLabel: T,
+                  clearLabel: b,
+                  onHourSelect: H,
+                  onMinuteSelect: O,
+                  onNowSelect: R,
+                  onClear: U
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+$.displayName = "TimePicker";
+export {
+  $ as default
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/forms/time-picker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["../../../../src/components/forms/time-picker/TimePicker.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\nimport { TextField } from '@components/forms/text-field'\nimport TimePickerPanel from '@components/forms/time-picker/components/time-picker-panel/TimePickerPanel.tsx'\nimport { DEFAULT_HOUR_STEP, DEFAULT_MINUTE_STEP } from '@components/forms/time-picker/constants'\nimport { useTimePicker } from '@components/forms/time-picker/hooks/useTimePicker.hook.ts'\nimport { TIME_PICKER_STYLES } from '@components/forms/time-picker/styles/TimePicker.css.ts'\nimport type { TimePickerProps } from '@components/forms/time-picker/types/TimePicker.props.ts'\nimport { Popover } from '@components/overlay/popover'\nimport ClockIcon from '@resources/asset/ClockIcon.svg?react'\nimport { cn } from '@utils/cn.ts'\nimport { memo, useCallback, useRef } from 'react'\n\n/**\n * A time picker that combines a native `type=\"time\"` text field with a popover\n * listing hours and minutes.\n *\n * - Typing a valid `HH:mm` time updates the popover and calls `onChange`.\n * - Choosing an hour updates the input; choosing a minute also closes the popover.\n * - Incomplete typed values are kept in the input but do not update the selected\n *   time until they become valid.\n * - Closing the popover returns focus to the input.\n *\n * @example\n * ```tsx\n * const [time, setTime] = useState<string | undefined>()\n * <TimePicker label=\"Start time\" value={time} onChange={setTime} />\n * ```\n */\nconst TimePicker = memo(\n    ({\n        value,\n        defaultValue,\n        onChange,\n        defaultPanelTime,\n        minTime,\n        maxTime,\n        hourStep = DEFAULT_HOUR_STEP,\n        minuteStep = DEFAULT_MINUTE_STEP,\n        showNowButton = false,\n        clearable = false,\n        nowLabel = 'Now',\n        clearLabel = 'Clear',\n        id,\n        disabled,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        panelAriaLabel = 'Time',\n        hoursAriaLabel = 'Hours',\n        minutesAriaLabel = 'Minutes',\n        triggerAriaLabel = 'Open time picker',\n        onKeyDown,\n        ...textFieldProps\n    }: TimePickerProps) => {\n        const {\n            selectedTime,\n            inputValue,\n            open,\n            inputId,\n            handleInputChange,\n            handleInputKeyDown,\n            handleHourSelect,\n            handleMinuteSelect,\n            handleNowSelect,\n            handleClear,\n            setOpen,\n        } = useTimePicker({\n            value,\n            defaultValue,\n            onChange,\n            id,\n            defaultPanelTime,\n            minTime,\n            maxTime,\n        })\n\n        const inputRef = useRef<HTMLInputElement>(null)\n\n        const handleKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLInputElement>) => {\n                handleInputKeyDown(event)\n                onKeyDown?.(event)\n            },\n            [handleInputKeyDown, onKeyDown],\n        )\n\n        const handleInputClick = useCallback(\n            (event: React.MouseEvent<HTMLInputElement>) => {\n                // Stops mobile browsers from opening their native time picker.\n                event.preventDefault()\n            },\n            [],\n        )\n\n        const handleTriggerMouseDown = useCallback(\n            (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault()\n            },\n            [],\n        )\n\n        return (\n            <Popover\n                open={open}\n                onOpenChange={setOpen}\n            >\n                <TextField\n                    {...textFieldProps}\n                    ref={inputRef}\n                    id={inputId}\n                    type={'time'}\n                    min={minTime}\n                    max={maxTime}\n                    disabled={disabled}\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleKeyDown}\n                    onClick={handleInputClick}\n                    className={cn(TIME_PICKER_STYLES.input, textFieldProps.className)}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-haspopup={'dialog'}\n                    endAction={\n                        <Popover.Trigger>\n                            <IconButton\n                                icon={ClockIcon}\n                                aria-label={triggerAriaLabel}\n                                variant={'ghost'}\n                                color={'primary'}\n                                size={'sm'}\n                                type={'button'}\n                                disabled={disabled}\n                                onMouseDown={handleTriggerMouseDown}\n                            />\n                        </Popover.Trigger>\n                    }\n                />\n\n                <Popover.Content\n                    side={'bottom'}\n                    align={'end'}\n                    padding={'none'}\n                    aria-label={panelAriaLabel}\n                    initialFocus={false}\n                    finalFocus={inputRef}\n                >\n                    <TimePickerPanel\n                        selectedTime={selectedTime}\n                        defaultPanelTime={defaultPanelTime}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        hourStep={hourStep}\n                        minuteStep={minuteStep}\n                        hoursAriaLabel={hoursAriaLabel}\n                        minutesAriaLabel={minutesAriaLabel}\n                        showNowButton={showNowButton}\n                        clearable={clearable}\n                        nowLabel={nowLabel}\n                        clearLabel={clearLabel}\n                        onHourSelect={handleHourSelect}\n                        onMinuteSelect={handleMinuteSelect}\n                        onNowSelect={handleNowSelect}\n                        onClear={handleClear}\n                    />\n                </Popover.Content>\n            </Popover>\n        )\n    },\n)\n\nTimePicker.displayName = 'TimePicker'\n\nexport default TimePicker\n"],"names":["TimePicker","memo","value","defaultValue","onChange","defaultPanelTime","minTime","maxTime","hourStep","DEFAULT_HOUR_STEP","minuteStep","DEFAULT_MINUTE_STEP","showNowButton","clearable","nowLabel","clearLabel","id","disabled","ariaLabel","ariaLabelledBy","panelAriaLabel","hoursAriaLabel","minutesAriaLabel","triggerAriaLabel","onKeyDown","textFieldProps","selectedTime","inputValue","open","inputId","handleInputChange","handleInputKeyDown","handleHourSelect","handleMinuteSelect","handleNowSelect","handleClear","setOpen","useTimePicker","inputRef","useRef","handleKeyDown","useCallback","event","handleInputClick","handleTriggerMouseDown","jsxs","Popover","jsx","TextField","cn","TIME_PICKER_STYLES","IconButton","ClockIcon","TimePickerPanel"],"mappings":"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"}

package/dist/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),n=require("react"),p=require("../../../../actions/button/Button.cjs");require("../../../../actions/button/styles/Button.css.cjs");const t=require("./styles/TimePickerPanel.css.cjs"),r=require("../../utils/timePicker.utils.cjs"),m=n.memo(({selectedTime:L,defaultPanelTime:R,minTime:i,maxTime:l,hourStep:_,minuteStep:u,hoursAriaLabel:d,minutesAriaLabel:P,showNowButton:T,clearable:I,nowLabel:j,clearLabel:f,onHourSelect:x,onMinuteSelect:C,onNowSelect:h,onClear:M})=>{const o=r.splitTime(L),a=o??r.splitTime(R),E=a?.hour,g=n.useMemo(()=>r.getHourOptions(_).filter(e=>r.isTimeInRange(`${e}:59`,i,void 0)&&r.isTimeInRange(`${e}:00`,void 0,l)),[_,i,l]),v=n.useMemo(()=>r.getMinuteOptions(u).filter(e=>E===void 0||r.isTimeInRange(`${E}:${e}`,i,l)),[u,E,i,l]),N=n.useRef(null);n.useEffect(()=>{N.current?.querySelectorAll('[aria-pressed="true"], [data-reference="true"]').forEach(e=>{const c=e.parentElement?.parentElement;c&&(c.scrollTop=e.offsetTop-c.clientHeight/2+e.clientHeight/2)})},[]);const S=(e,c)=>({"aria-pressed":e,"data-reference":!o&&c?!0:void 0});return s.jsxs("div",{ref:N,className:t.TIME_PICKER_PANEL_STYLES.root,children:[s.jsxs("div",{className:t.TIME_PICKER_PANEL_STYLES.body,children:[s.jsxs("div",{className:t.TIME_PICKER_PANEL_STYLES.group,children:[s.jsx("p",{className:t.TIME_PICKER_PANEL_STYLES.title,children:d}),s.jsx("ul",{"aria-label":d,className:t.TIME_PICKER_PANEL_STYLES.column,children:g.map(e=>s.jsx("li",{children:s.jsx("button",{type:"button",...S(o?.hour===e,a?.hour===e),className:t.TIME_PICKER_PANEL_STYLES.item,onClick:()=>x(e),children:e})},e))})]}),s.jsxs("div",{className:t.TIME_PICKER_PANEL_STYLES.group,children:[s.jsx("p",{className:t.TIME_PICKER_PANEL_STYLES.title,children:P}),s.jsx("ul",{"aria-label":P,className:t.TIME_PICKER_PANEL_STYLES.column,children:v.map(e=>s.jsx("li",{children:s.jsx("button",{type:"button",...S(o?.minute===e,a?.minute===e),className:t.TIME_PICKER_PANEL_STYLES.item,onClick:()=>C(e),children:e})},e))})]})]}),(T||I)&&s.jsxs("div",{className:t.TIME_PICKER_PANEL_STYLES.footer,children:[I?s.jsx(p,{label:f,variant:"ghost",size:"sm",type:"button",onClick:M}):s.jsx("span",{}),T&&s.jsx(p,{label:j,variant:"ghost",size:"sm",type:"button",onClick:h})]})]})});m.displayName="TimePickerPanel";module.exports=m;
+//# sourceMappingURL=TimePickerPanel.cjs.map

package/dist/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerPanel.cjs","sources":["../../../../../../src/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.tsx"],"sourcesContent":["import { memo, useEffect, useMemo, useRef } from 'react'\r\n\r\nimport { Button } from '@components/actions/button'\r\nimport { TIME_PICKER_PANEL_STYLES } from '@components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.ts'\r\nimport type { TimePickerPanelProps } from '@components/forms/time-picker/components/time-picker-panel/types/TimePickerPanel.props.ts'\r\nimport {\r\n    getHourOptions,\r\n    getMinuteOptions,\r\n    isTimeInRange,\r\n    splitTime,\r\n} from '@components/forms/time-picker/utils/timePicker.utils.ts'\r\n\r\n/**\r\n * Two scrollable lists, hours and minutes, used inside the TimePicker popover.\r\n * Options outside the allowed range are not listed. The selected values, or the\r\n * default panel time, are scrolled into view on mount.\r\n */\r\nconst TimePickerPanel = memo(\r\n    ({\r\n        selectedTime,\r\n        defaultPanelTime,\r\n        minTime,\r\n        maxTime,\r\n        hourStep,\r\n        minuteStep,\r\n        hoursAriaLabel,\r\n        minutesAriaLabel,\r\n        showNowButton,\r\n        clearable,\r\n        nowLabel,\r\n        clearLabel,\r\n        onHourSelect,\r\n        onMinuteSelect,\r\n        onNowSelect,\r\n        onClear,\r\n    }: TimePickerPanelProps) => {\r\n        const selected = splitTime(selectedTime)\r\n        const reference = selected ?? splitTime(defaultPanelTime)\r\n        const referenceHour = reference?.hour\r\n        const hours = useMemo(\r\n            () => getHourOptions(hourStep).filter(\r\n                hour => isTimeInRange(`${hour}:59`, minTime, undefined)\r\n                    && isTimeInRange(`${hour}:00`, undefined, maxTime),\r\n            ),\r\n            [hourStep, minTime, maxTime],\r\n        )\r\n        const minutes = useMemo(\r\n            () => getMinuteOptions(minuteStep).filter(\r\n                minute => referenceHour === undefined\r\n                    || isTimeInRange(`${referenceHour}:${minute}`, minTime, maxTime),\r\n            ),\r\n            [minuteStep, referenceHour, minTime, maxTime],\r\n        )\r\n        const rootRef = useRef<HTMLDivElement>(null)\r\n\r\n        useEffect(() => {\r\n            rootRef.current\r\n                ?.querySelectorAll<HTMLElement>('[aria-pressed=\"true\"], [data-reference=\"true\"]')\r\n                .forEach((item) => {\r\n                    const column = item.parentElement?.parentElement\r\n                    if (column) {\r\n                        column.scrollTop = item.offsetTop - column.clientHeight / 2 + item.clientHeight / 2\r\n                    }\r\n                })\r\n        }, [])\r\n\r\n        const getState = (isSelected: boolean, isReference: boolean) => ({\r\n            'aria-pressed': isSelected,\r\n            'data-reference': !selected && isReference ? true : undefined,\r\n        })\r\n\r\n        return (\r\n            <div\r\n                ref={rootRef}\r\n                className={TIME_PICKER_PANEL_STYLES.root}\r\n            >\r\n                <div className={TIME_PICKER_PANEL_STYLES.body}>\r\n                    <div className={TIME_PICKER_PANEL_STYLES.group}>\r\n                        <p className={TIME_PICKER_PANEL_STYLES.title}>{hoursAriaLabel}</p>\r\n                        <ul\r\n                            aria-label={hoursAriaLabel}\r\n                            className={TIME_PICKER_PANEL_STYLES.column}\r\n                        >\r\n                            {hours.map((hour) => (\r\n                                <li key={hour}>\r\n                                    <button\r\n                                        type={'button'}\r\n                                        {...getState(selected?.hour === hour, reference?.hour === hour)}\r\n                                        className={TIME_PICKER_PANEL_STYLES.item}\r\n                                        onClick={() => onHourSelect(hour)}\r\n                                    >\r\n                                        {hour}\r\n                                    </button>\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                    <div className={TIME_PICKER_PANEL_STYLES.group}>\r\n                        <p className={TIME_PICKER_PANEL_STYLES.title}>{minutesAriaLabel}</p>\r\n                        <ul\r\n                            aria-label={minutesAriaLabel}\r\n                            className={TIME_PICKER_PANEL_STYLES.column}\r\n                        >\r\n                            {minutes.map((minute) => (\r\n                                <li key={minute}>\r\n                                    <button\r\n                                        type={'button'}\r\n                                        {...getState(selected?.minute === minute, reference?.minute === minute)}\r\n                                        className={TIME_PICKER_PANEL_STYLES.item}\r\n                                        onClick={() => onMinuteSelect(minute)}\r\n                                    >\r\n                                        {minute}\r\n                                    </button>\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n                {(showNowButton || clearable) && (\r\n                    <div className={TIME_PICKER_PANEL_STYLES.footer}>\r\n                        {clearable\r\n                            ? (\r\n                                <Button\r\n                                    label={clearLabel}\r\n                                    variant={'ghost'}\r\n                                    size={'sm'}\r\n                                    type={'button'}\r\n                                    onClick={onClear}\r\n                                />\r\n                            )\r\n                            : <span />}\r\n                        {showNowButton && (\r\n                            <Button\r\n                                label={nowLabel}\r\n                                variant={'ghost'}\r\n                                size={'sm'}\r\n                                type={'button'}\r\n                                onClick={onNowSelect}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        )\r\n    },\r\n)\r\n\r\nTimePickerPanel.displayName = 'TimePickerPanel'\r\n\r\nexport default TimePickerPanel\r\n"],"names":["TimePickerPanel","memo","selectedTime","defaultPanelTime","minTime","maxTime","hourStep","minuteStep","hoursAriaLabel","minutesAriaLabel","showNowButton","clearable","nowLabel","clearLabel","onHourSelect","onMinuteSelect","onNowSelect","onClear","selected","splitTime","reference","referenceHour","hours","useMemo","getHourOptions","hour","isTimeInRange","minutes","getMinuteOptions","minute","rootRef","useRef","useEffect","item","column","getState","isSelected","isReference","jsxs","TIME_PICKER_PANEL_STYLES","jsx","Button"],"mappings":"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"}

package/dist/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerPanelProps } from './types/TimePickerPanel.props.ts';
+import { MemoExoticComponent } from 'react';
+/**
+ * Two scrollable lists, hours and minutes, used inside the TimePicker popover.
+ * Options outside the allowed range are not listed. The selected values, or the
+ * default panel time, are scrolled into view on mount.
+ */
+declare const TimePickerPanel: MemoExoticComponent<({ selectedTime, defaultPanelTime, minTime, maxTime, hourStep, minuteStep, hoursAriaLabel, minutesAriaLabel, showNowButton, clearable, nowLabel, clearLabel, onHourSelect, onMinuteSelect, onNowSelect, onClear, }: TimePickerPanelProps) => import("react").JSX.Element>;
+export default TimePickerPanel;

package/dist/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.js

@@ -0,0 +1,126 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { memo as z, useMemo as b, useRef as O, useEffect as S } from "react";
+import E from "../../../../actions/button/Button.js";
+import "../../../../actions/button/styles/Button.css.js";
+import { TIME_PICKER_PANEL_STYLES as l } from "./styles/TimePickerPanel.css.js";
+import { splitTime as y, getHourOptions as T, isTimeInRange as d, getMinuteOptions as q } from "../../utils/timePicker.utils.js";
+const K = z(
+  ({
+    selectedTime: k,
+    defaultPanelTime: P,
+    minTime: s,
+    maxTime: c,
+    hourStep: p,
+    minuteStep: m,
+    hoursAriaLabel: f,
+    minutesAriaLabel: u,
+    showNowButton: h,
+    clearable: N,
+    nowLabel: C,
+    clearLabel: H,
+    onHourSelect: R,
+    onMinuteSelect: $,
+    onNowSelect: I,
+    onClear: M
+  }) => {
+    const n = y(k), i = n ?? y(P), a = i?.hour, _ = b(
+      () => T(p).filter(
+        (e) => d(`${e}:59`, s, void 0) && d(`${e}:00`, void 0, c)
+      ),
+      [p, s, c]
+    ), j = b(
+      () => q(m).filter(
+        (e) => a === void 0 || d(`${a}:${e}`, s, c)
+      ),
+      [m, a, s, c]
+    ), v = O(null);
+    S(() => {
+      v.current?.querySelectorAll('[aria-pressed="true"], [data-reference="true"]').forEach((e) => {
+        const r = e.parentElement?.parentElement;
+        r && (r.scrollTop = e.offsetTop - r.clientHeight / 2 + e.clientHeight / 2);
+      });
+    }, []);
+    const g = (e, r) => ({
+      "aria-pressed": e,
+      "data-reference": !n && r ? !0 : void 0
+    });
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: v,
+        className: l.root,
+        children: [
+          /* @__PURE__ */ o("div", { className: l.body, children: [
+            /* @__PURE__ */ o("div", { className: l.group, children: [
+              /* @__PURE__ */ t("p", { className: l.title, children: f }),
+              /* @__PURE__ */ t(
+                "ul",
+                {
+                  "aria-label": f,
+                  className: l.column,
+                  children: _.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      ...g(n?.hour === e, i?.hour === e),
+                      className: l.item,
+                      onClick: () => R(e),
+                      children: e
+                    }
+                  ) }, e))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o("div", { className: l.group, children: [
+              /* @__PURE__ */ t("p", { className: l.title, children: u }),
+              /* @__PURE__ */ t(
+                "ul",
+                {
+                  "aria-label": u,
+                  className: l.column,
+                  children: j.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      ...g(n?.minute === e, i?.minute === e),
+                      className: l.item,
+                      onClick: () => $(e),
+                      children: e
+                    }
+                  ) }, e))
+                }
+              )
+            ] })
+          ] }),
+          (h || N) && /* @__PURE__ */ o("div", { className: l.footer, children: [
+            N ? /* @__PURE__ */ t(
+              E,
+              {
+                label: H,
+                variant: "ghost",
+                size: "sm",
+                type: "button",
+                onClick: M
+              }
+            ) : /* @__PURE__ */ t("span", {}),
+            h && /* @__PURE__ */ t(
+              E,
+              {
+                label: C,
+                variant: "ghost",
+                size: "sm",
+                type: "button",
+                onClick: I
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "TimePickerPanel";
+export {
+  K as default
+};
+//# sourceMappingURL=TimePickerPanel.js.map

package/dist/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerPanel.js","sources":["../../../../../../src/components/forms/time-picker/components/time-picker-panel/TimePickerPanel.tsx"],"sourcesContent":["import { memo, useEffect, useMemo, useRef } from 'react'\r\n\r\nimport { Button } from '@components/actions/button'\r\nimport { TIME_PICKER_PANEL_STYLES } from '@components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.ts'\r\nimport type { TimePickerPanelProps } from '@components/forms/time-picker/components/time-picker-panel/types/TimePickerPanel.props.ts'\r\nimport {\r\n    getHourOptions,\r\n    getMinuteOptions,\r\n    isTimeInRange,\r\n    splitTime,\r\n} from '@components/forms/time-picker/utils/timePicker.utils.ts'\r\n\r\n/**\r\n * Two scrollable lists, hours and minutes, used inside the TimePicker popover.\r\n * Options outside the allowed range are not listed. The selected values, or the\r\n * default panel time, are scrolled into view on mount.\r\n */\r\nconst TimePickerPanel = memo(\r\n    ({\r\n        selectedTime,\r\n        defaultPanelTime,\r\n        minTime,\r\n        maxTime,\r\n        hourStep,\r\n        minuteStep,\r\n        hoursAriaLabel,\r\n        minutesAriaLabel,\r\n        showNowButton,\r\n        clearable,\r\n        nowLabel,\r\n        clearLabel,\r\n        onHourSelect,\r\n        onMinuteSelect,\r\n        onNowSelect,\r\n        onClear,\r\n    }: TimePickerPanelProps) => {\r\n        const selected = splitTime(selectedTime)\r\n        const reference = selected ?? splitTime(defaultPanelTime)\r\n        const referenceHour = reference?.hour\r\n        const hours = useMemo(\r\n            () => getHourOptions(hourStep).filter(\r\n                hour => isTimeInRange(`${hour}:59`, minTime, undefined)\r\n                    && isTimeInRange(`${hour}:00`, undefined, maxTime),\r\n            ),\r\n            [hourStep, minTime, maxTime],\r\n        )\r\n        const minutes = useMemo(\r\n            () => getMinuteOptions(minuteStep).filter(\r\n                minute => referenceHour === undefined\r\n                    || isTimeInRange(`${referenceHour}:${minute}`, minTime, maxTime),\r\n            ),\r\n            [minuteStep, referenceHour, minTime, maxTime],\r\n        )\r\n        const rootRef = useRef<HTMLDivElement>(null)\r\n\r\n        useEffect(() => {\r\n            rootRef.current\r\n                ?.querySelectorAll<HTMLElement>('[aria-pressed=\"true\"], [data-reference=\"true\"]')\r\n                .forEach((item) => {\r\n                    const column = item.parentElement?.parentElement\r\n                    if (column) {\r\n                        column.scrollTop = item.offsetTop - column.clientHeight / 2 + item.clientHeight / 2\r\n                    }\r\n                })\r\n        }, [])\r\n\r\n        const getState = (isSelected: boolean, isReference: boolean) => ({\r\n            'aria-pressed': isSelected,\r\n            'data-reference': !selected && isReference ? true : undefined,\r\n        })\r\n\r\n        return (\r\n            <div\r\n                ref={rootRef}\r\n                className={TIME_PICKER_PANEL_STYLES.root}\r\n            >\r\n                <div className={TIME_PICKER_PANEL_STYLES.body}>\r\n                    <div className={TIME_PICKER_PANEL_STYLES.group}>\r\n                        <p className={TIME_PICKER_PANEL_STYLES.title}>{hoursAriaLabel}</p>\r\n                        <ul\r\n                            aria-label={hoursAriaLabel}\r\n                            className={TIME_PICKER_PANEL_STYLES.column}\r\n                        >\r\n                            {hours.map((hour) => (\r\n                                <li key={hour}>\r\n                                    <button\r\n                                        type={'button'}\r\n                                        {...getState(selected?.hour === hour, reference?.hour === hour)}\r\n                                        className={TIME_PICKER_PANEL_STYLES.item}\r\n                                        onClick={() => onHourSelect(hour)}\r\n                                    >\r\n                                        {hour}\r\n                                    </button>\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                    <div className={TIME_PICKER_PANEL_STYLES.group}>\r\n                        <p className={TIME_PICKER_PANEL_STYLES.title}>{minutesAriaLabel}</p>\r\n                        <ul\r\n                            aria-label={minutesAriaLabel}\r\n                            className={TIME_PICKER_PANEL_STYLES.column}\r\n                        >\r\n                            {minutes.map((minute) => (\r\n                                <li key={minute}>\r\n                                    <button\r\n                                        type={'button'}\r\n                                        {...getState(selected?.minute === minute, reference?.minute === minute)}\r\n                                        className={TIME_PICKER_PANEL_STYLES.item}\r\n                                        onClick={() => onMinuteSelect(minute)}\r\n                                    >\r\n                                        {minute}\r\n                                    </button>\r\n                                </li>\r\n                            ))}\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n                {(showNowButton || clearable) && (\r\n                    <div className={TIME_PICKER_PANEL_STYLES.footer}>\r\n                        {clearable\r\n                            ? (\r\n                                <Button\r\n                                    label={clearLabel}\r\n                                    variant={'ghost'}\r\n                                    size={'sm'}\r\n                                    type={'button'}\r\n                                    onClick={onClear}\r\n                                />\r\n                            )\r\n                            : <span />}\r\n                        {showNowButton && (\r\n                            <Button\r\n                                label={nowLabel}\r\n                                variant={'ghost'}\r\n                                size={'sm'}\r\n                                type={'button'}\r\n                                onClick={onNowSelect}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        )\r\n    },\r\n)\r\n\r\nTimePickerPanel.displayName = 'TimePickerPanel'\r\n\r\nexport default TimePickerPanel\r\n"],"names":["TimePickerPanel","memo","selectedTime","defaultPanelTime","minTime","maxTime","hourStep","minuteStep","hoursAriaLabel","minutesAriaLabel","showNowButton","clearable","nowLabel","clearLabel","onHourSelect","onMinuteSelect","onNowSelect","onClear","selected","splitTime","reference","referenceHour","hours","useMemo","getHourOptions","hour","isTimeInRange","minutes","getMinuteOptions","minute","rootRef","useRef","useEffect","item","column","getState","isSelected","isReference","jsxs","TIME_PICKER_PANEL_STYLES","jsx","Button"],"mappings":"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"}

package/dist/components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit132.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                     */var e={root:"_1p6gdxx0",body:"_1p6gdxx1",group:"_1p6gdxx2",title:"_1p6gdxx3",column:"_1p6gdxx4",item:"_1p6gdxx5",footer:"_1p6gdxx6"};exports.TIME_PICKER_PANEL_STYLES=e;
+//# sourceMappingURL=TimePickerPanel.css.cjs.map

package/dist/components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerPanel.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.d.ts

@@ -0,0 +1,9 @@
+export declare const TIME_PICKER_PANEL_STYLES: {
+    root: string;
+    body: string;
+    group: string;
+    title: string;
+    column: string;
+    item: string;
+    footer: string;
+};

package/dist/components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.js

@@ -0,0 +1,7 @@
+import '../../../../../../ui-kit132.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+/* empty css                                   */
+var o = { root: "_1p6gdxx0", body: "_1p6gdxx1", group: "_1p6gdxx2", title: "_1p6gdxx3", column: "_1p6gdxx4", item: "_1p6gdxx5", footer: "_1p6gdxx6" };
+export {
+  o as TIME_PICKER_PANEL_STYLES
+};
+//# sourceMappingURL=TimePickerPanel.css.js.map

package/dist/components/forms/time-picker/components/time-picker-panel/styles/TimePickerPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/forms/time-picker/components/time-picker-panel/types/TimePickerPanel.props.d.ts

@@ -0,0 +1,34 @@
+export type TimePickerPanelProps = {
+    /** Selected time as `HH:mm`, if any. */
+    selectedTime: string | undefined;
+    /** Time used as reference (scroll position, minute bounds) when none is selected. */
+    defaultPanelTime: string | undefined;
+    /** Earliest selectable time. */
+    minTime: string | undefined;
+    /** Latest selectable time. */
+    maxTime: string | undefined;
+    /** Interval between the listed hours. */
+    hourStep: number;
+    /** Interval between the listed minutes. */
+    minuteStep: number;
+    /** Title and accessible name of the hours list. */
+    hoursAriaLabel: string;
+    /** Title and accessible name of the minutes list. */
+    minutesAriaLabel: string;
+    /** Whether to show the "now" footer button. */
+    showNowButton: boolean;
+    /** Whether to show the clear footer button. */
+    clearable: boolean;
+    /** Label of the "now" button. */
+    nowLabel: string;
+    /** Label of the clear button. */
+    clearLabel: string;
+    /** Called when an hour is chosen. */
+    onHourSelect: (hour: string) => void;
+    /** Called when a minute is chosen. */
+    onMinuteSelect: (minute: string) => void;
+    /** Called when the "now" button is pressed. */
+    onNowSelect: () => void;
+    /** Called when the clear button is pressed. */
+    onClear: () => void;
+};

package/dist/components/forms/time-picker/constants/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=1,T=5,_=new Set([" ","Spacebar"]);exports.DEFAULT_HOUR_STEP=E;exports.DEFAULT_MINUTE_STEP=T;exports.KEYS_THAT_OPEN_NATIVE_PICKER=_;
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/time-picker/constants/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/components/forms/time-picker/constants/index.ts"],"sourcesContent":["export const DEFAULT_HOUR_STEP = 1\nexport const DEFAULT_MINUTE_STEP = 5\n\nexport const KEYS_THAT_OPEN_NATIVE_PICKER = new Set([' ', 'Spacebar'])\r\n"],"names":["DEFAULT_HOUR_STEP","DEFAULT_MINUTE_STEP","KEYS_THAT_OPEN_NATIVE_PICKER"],"mappings":"gFAAO,MAAMA,EAAoB,EACpBC,EAAsB,EAEtBC,EAA+B,IAAI,IAAI,CAAC,IAAK,UAAU,CAAC"}

package/dist/components/forms/time-picker/constants/index.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_HOUR_STEP = 1;
+export declare const DEFAULT_MINUTE_STEP = 5;
+export declare const KEYS_THAT_OPEN_NATIVE_PICKER: Set<string>;

package/dist/components/forms/time-picker/constants/index.js

@@ -0,0 +1,7 @@
+const E = 1, T = 5, _ = /* @__PURE__ */ new Set([" ", "Spacebar"]);
+export {
+  E as DEFAULT_HOUR_STEP,
+  T as DEFAULT_MINUTE_STEP,
+  _ as KEYS_THAT_OPEN_NATIVE_PICKER
+};
+//# sourceMappingURL=index.js.map

package/dist/components/forms/time-picker/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/time-picker/constants/index.ts"],"sourcesContent":["export const DEFAULT_HOUR_STEP = 1\nexport const DEFAULT_MINUTE_STEP = 5\n\nexport const KEYS_THAT_OPEN_NATIVE_PICKER = new Set([' ', 'Spacebar'])\r\n"],"names":["DEFAULT_HOUR_STEP","DEFAULT_MINUTE_STEP","KEYS_THAT_OPEN_NATIVE_PICKER"],"mappings":"AAAO,MAAMA,IAAoB,GACpBC,IAAsB,GAEtBC,IAA+B,oBAAI,IAAI,CAAC,KAAK,UAAU,CAAC;"}

package/dist/components/forms/time-picker/hooks/useTimePicker.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),D=require("../constants/index.cjs"),e=require("../utils/timePicker.utils.cjs"),K=({value:c,defaultValue:d,onChange:k,id:S,defaultPanelTime:p,minTime:l,maxTime:r})=>{const u=c!==void 0,h=t.useId(),b=S??h,[f,C]=t.useState(e.isValidTime(d)?d:void 0),[I,T]=t.useState(e.isValidTime(d)?d:""),[w,a]=t.useState(!1),n=u?e.isValidTime(c)?c:void 0:f;t.useEffect(()=>{u&&(C(e.isValidTime(c)?c:void 0),T(e.isValidTime(c)?c:""))},[u,c]);const i=t.useCallback(s=>{u||(C(s),T(s??"")),k?.(s)},[u,k]),V=t.useCallback(s=>{const o=s.target.value;if(T(o),o===""){n!==void 0&&i(void 0);return}e.isValidTime(o)&&o!==n&&i(o)},[n,i]),m=t.useCallback(s=>{const o=e.splitTime(n)?.minute??e.splitTime(p)?.minute??"00";i(e.clampTime(e.joinTime(s,o),l,r))},[n,p,l,r,i]),y=t.useCallback(s=>{const o=e.splitTime(n)?.hour??e.splitTime(p)?.hour??"00";i(e.clampTime(e.joinTime(o,s),l,r)),a(!1)},[n,p,l,r,i]),g=t.useCallback(()=>{i(e.clampTime(e.getCurrentTime(),l,r)),a(!1)},[l,r,i]),A=t.useCallback(()=>{i(void 0),a(!1)},[i]),E=t.useCallback(s=>{const o=D.KEYS_THAT_OPEN_NATIVE_PICKER.has(s.key),_=s.key==="ArrowDown"&&s.altKey;(o||_)&&(s.preventDefault(),a(!0))},[]);return{selectedTime:n,inputValue:I,open:w,inputId:b,handleInputChange:V,handleInputKeyDown:E,handleHourSelect:m,handleMinuteSelect:y,handleNowSelect:g,handleClear:A,setOpen:a}};exports.useTimePicker=K;
+//# sourceMappingURL=useTimePicker.hook.cjs.map

package/dist/components/forms/time-picker/hooks/useTimePicker.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimePicker.hook.cjs","sources":["../../../../../src/components/forms/time-picker/hooks/useTimePicker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from 'react'\n\nimport { KEYS_THAT_OPEN_NATIVE_PICKER } from '@components/forms/time-picker/constants'\nimport type { UseTimePickerOptions, UseTimePickerReturn } from '@components/forms/time-picker/types'\nimport { clampTime, getCurrentTime, isValidTime, joinTime, splitTime } from '@components/forms/time-picker/utils/timePicker.utils.ts'\n\n/**\n * Manages state and interactions for the TimePicker component.\n *\n * Supports both controlled and uncontrolled modes, keeps the native time input\n * in sync with the popover selection, and only commits valid `HH:mm` values to\n * `onChange`.\n */\nexport const useTimePicker = ({\n    value,\n    defaultValue,\n    onChange,\n    id,\n    defaultPanelTime,\n    minTime,\n    maxTime,\n}: UseTimePickerOptions): UseTimePickerReturn => {\n    const isControlled = value !== undefined\n    const generatedId = useId()\n    const inputId = id ?? generatedId\n\n    const [selectedTime, setSelectedTime] = useState<string | undefined>(\n        isValidTime(defaultValue) ? defaultValue : undefined,\n    )\n    const [inputValue, setInputValue] = useState(\n        isValidTime(defaultValue) ? defaultValue : '',\n    )\n    const [open, setOpen] = useState(false)\n\n    const resolvedTime = isControlled ? (isValidTime(value) ? value : undefined) : selectedTime\n\n    useEffect(() => {\n        if (isControlled) {\n            setSelectedTime(isValidTime(value) ? value : undefined)\n            setInputValue(isValidTime(value) ? value : '')\n        }\n    }, [isControlled, value])\n\n    const updateTime = useCallback(\n        (time: string | undefined) => {\n            if (!isControlled) {\n                setSelectedTime(time)\n                setInputValue(time ?? '')\n            }\n            onChange?.(time)\n        },\n        [isControlled, onChange],\n    )\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newValue = event.target.value\n            setInputValue(newValue)\n\n            if (newValue === '') {\n                if (resolvedTime !== undefined) {\n                    updateTime(undefined)\n                }\n                return\n            }\n\n            if (isValidTime(newValue) && newValue !== resolvedTime) {\n                updateTime(newValue)\n            }\n        },\n        [resolvedTime, updateTime],\n    )\n\n    const handleHourSelect = useCallback(\n        (hour: string) => {\n            const minute = splitTime(resolvedTime)?.minute\n                ?? splitTime(defaultPanelTime)?.minute\n                ?? '00'\n            updateTime(clampTime(joinTime(hour, minute), minTime, maxTime))\n        },\n        [resolvedTime, defaultPanelTime, minTime, maxTime, updateTime],\n    )\n\n    const handleMinuteSelect = useCallback(\n        (minute: string) => {\n            const hour = splitTime(resolvedTime)?.hour\n                ?? splitTime(defaultPanelTime)?.hour\n                ?? '00'\n            updateTime(clampTime(joinTime(hour, minute), minTime, maxTime))\n            setOpen(false)\n        },\n        [resolvedTime, defaultPanelTime, minTime, maxTime, updateTime],\n    )\n\n    const handleNowSelect = useCallback(() => {\n        updateTime(clampTime(getCurrentTime(), minTime, maxTime))\n        setOpen(false)\n    }, [minTime, maxTime, updateTime])\n\n    const handleClear = useCallback(() => {\n        updateTime(undefined)\n        setOpen(false)\n    }, [updateTime])\n    const handleInputKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const isSpace = KEYS_THAT_OPEN_NATIVE_PICKER.has(event.key)\n            const isAltArrowDown = event.key === 'ArrowDown' && event.altKey\n\n            if (isSpace || isAltArrowDown) {\n                event.preventDefault()\n                setOpen(true)\n            }\n        },\n        [],\n    )\n\n    return {\n        selectedTime: resolvedTime,\n        inputValue,\n        open,\n        inputId,\n        handleInputChange,\n        handleInputKeyDown,\n        handleHourSelect,\n        handleMinuteSelect,\n        handleNowSelect,\n        handleClear,\n        setOpen,\n    }\n}\r\n"],"names":["useTimePicker","value","defaultValue","onChange","id","defaultPanelTime","minTime","maxTime","isControlled","generatedId","useId","inputId","selectedTime","setSelectedTime","useState","isValidTime","inputValue","setInputValue","open","setOpen","resolvedTime","useEffect","updateTime","useCallback","time","handleInputChange","event","newValue","handleHourSelect","hour","minute","splitTime","clampTime","joinTime","handleMinuteSelect","handleNowSelect","getCurrentTime","handleClear","handleInputKeyDown","isSpace","KEYS_THAT_OPEN_NATIVE_PICKER","isAltArrowDown"],"mappings":"wLAaaA,EAAgB,CAAC,CAC1B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,GAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,QAAAC,CACJ,IAAiD,CAC7C,MAAMC,EAAeP,IAAU,OACzBQ,EAAcC,EAAAA,MAAA,EACdC,EAAUP,GAAMK,EAEhB,CAACG,EAAcC,CAAe,EAAIC,EAAAA,SACpCC,cAAYb,CAAY,EAAIA,EAAe,MAAA,EAEzC,CAACc,EAAYC,CAAa,EAAIH,EAAAA,SAChCC,cAAYb,CAAY,EAAIA,EAAe,EAAA,EAEzC,CAACgB,EAAMC,CAAO,EAAIL,EAAAA,SAAS,EAAK,EAEhCM,EAAeZ,EAAgBO,EAAAA,YAAYd,CAAK,EAAIA,EAAQ,OAAaW,EAE/ES,EAAAA,UAAU,IAAM,CACRb,IACAK,EAAgBE,EAAAA,YAAYd,CAAK,EAAIA,EAAQ,MAAS,EACtDgB,EAAcF,EAAAA,YAAYd,CAAK,EAAIA,EAAQ,EAAE,EAErD,EAAG,CAACO,EAAcP,CAAK,CAAC,EAExB,MAAMqB,EAAaC,EAAAA,YACdC,GAA6B,CACrBhB,IACDK,EAAgBW,CAAI,EACpBP,EAAcO,GAAQ,EAAE,GAE5BrB,IAAWqB,CAAI,CACnB,EACA,CAAChB,EAAcL,CAAQ,CAAA,EAGrBsB,EAAoBF,EAAAA,YACrBG,GAA+C,CAC5C,MAAMC,EAAWD,EAAM,OAAO,MAG9B,GAFAT,EAAcU,CAAQ,EAElBA,IAAa,GAAI,CACbP,IAAiB,QACjBE,EAAW,MAAS,EAExB,MACJ,CAEIP,cAAYY,CAAQ,GAAKA,IAAaP,GACtCE,EAAWK,CAAQ,CAE3B,EACA,CAACP,EAAcE,CAAU,CAAA,EAGvBM,EAAmBL,EAAAA,YACpBM,GAAiB,CACd,MAAMC,EAASC,EAAAA,UAAUX,CAAY,GAAG,QACjCW,YAAU1B,CAAgB,GAAG,QAC7B,KACPiB,EAAWU,EAAAA,UAAUC,WAASJ,EAAMC,CAAM,EAAGxB,EAASC,CAAO,CAAC,CAClE,EACA,CAACa,EAAcf,EAAkBC,EAASC,EAASe,CAAU,CAAA,EAG3DY,EAAqBX,EAAAA,YACtBO,GAAmB,CAChB,MAAMD,EAAOE,EAAAA,UAAUX,CAAY,GAAG,MAC/BW,YAAU1B,CAAgB,GAAG,MAC7B,KACPiB,EAAWU,EAAAA,UAAUC,WAASJ,EAAMC,CAAM,EAAGxB,EAASC,CAAO,CAAC,EAC9DY,EAAQ,EAAK,CACjB,EACA,CAACC,EAAcf,EAAkBC,EAASC,EAASe,CAAU,CAAA,EAG3Da,EAAkBZ,EAAAA,YAAY,IAAM,CACtCD,EAAWU,EAAAA,UAAUI,EAAAA,eAAA,EAAkB9B,EAASC,CAAO,CAAC,EACxDY,EAAQ,EAAK,CACjB,EAAG,CAACb,EAASC,EAASe,CAAU,CAAC,EAE3Be,EAAcd,EAAAA,YAAY,IAAM,CAClCD,EAAW,MAAS,EACpBH,EAAQ,EAAK,CACjB,EAAG,CAACG,CAAU,CAAC,EACTgB,EAAqBf,EAAAA,YACtBG,GAAiD,CAC9C,MAAMa,EAAUC,EAAAA,6BAA6B,IAAId,EAAM,GAAG,EACpDe,EAAiBf,EAAM,MAAQ,aAAeA,EAAM,QAEtDa,GAAWE,KACXf,EAAM,eAAA,EACNP,EAAQ,EAAI,EAEpB,EACA,CAAA,CAAC,EAGL,MAAO,CACH,aAAcC,EACd,WAAAJ,EACA,KAAAE,EACA,QAAAP,EACA,kBAAAc,EACA,mBAAAa,EACA,iBAAAV,EACA,mBAAAM,EACA,gBAAAC,EACA,YAAAE,EACA,QAAAlB,CAAA,CAER"}

package/dist/components/forms/time-picker/hooks/useTimePicker.hook.d.ts

@@ -0,0 +1,9 @@
+import { UseTimePickerOptions, UseTimePickerReturn } from '../types';
+/**
+ * Manages state and interactions for the TimePicker component.
+ *
+ * Supports both controlled and uncontrolled modes, keeps the native time input
+ * in sync with the popover selection, and only commits valid `HH:mm` values to
+ * `onChange`.
+ */
+export declare const useTimePicker: ({ value, defaultValue, onChange, id, defaultPanelTime, minTime, maxTime, }: UseTimePickerOptions) => UseTimePickerReturn;

package/dist/components/forms/time-picker/hooks/useTimePicker.hook.js

@@ -0,0 +1,76 @@
+import { useId as M, useState as w, useEffect as R, useCallback as c } from "react";
+import { KEYS_THAT_OPEN_NATIVE_PICKER as T } from "../constants/index.js";
+import { isValidTime as d, splitTime as h, clampTime as S, getCurrentTime as Y, joinTime as E } from "../utils/timePicker.utils.js";
+const B = ({
+  value: s,
+  defaultValue: u,
+  onChange: A,
+  id: k,
+  defaultPanelTime: f,
+  minTime: r,
+  maxTime: i
+}) => {
+  const p = s !== void 0, y = M(), D = k ?? y, [K, C] = w(
+    d(u) ? u : void 0
+  ), [_, I] = w(
+    d(u) ? u : ""
+  ), [a, l] = w(!1), n = p ? d(s) ? s : void 0 : K;
+  R(() => {
+    p && (C(d(s) ? s : void 0), I(d(s) ? s : ""));
+  }, [p, s]);
+  const o = c(
+    (t) => {
+      p || (C(t), I(t ?? "")), A?.(t);
+    },
+    [p, A]
+  ), g = c(
+    (t) => {
+      const e = t.target.value;
+      if (I(e), e === "") {
+        n !== void 0 && o(void 0);
+        return;
+      }
+      d(e) && e !== n && o(e);
+    },
+    [n, o]
+  ), N = c(
+    (t) => {
+      const e = h(n)?.minute ?? h(f)?.minute ?? "00";
+      o(S(E(t, e), r, i));
+    },
+    [n, f, r, i, o]
+  ), H = c(
+    (t) => {
+      const e = h(n)?.hour ?? h(f)?.hour ?? "00";
+      o(S(E(e, t), r, i)), l(!1);
+    },
+    [n, f, r, i, o]
+  ), O = c(() => {
+    o(S(Y(), r, i)), l(!1);
+  }, [r, i, o]), V = c(() => {
+    o(void 0), l(!1);
+  }, [o]), b = c(
+    (t) => {
+      const e = T.has(t.key), j = t.key === "ArrowDown" && t.altKey;
+      (e || j) && (t.preventDefault(), l(!0));
+    },
+    []
+  );
+  return {
+    selectedTime: n,
+    inputValue: _,
+    open: a,
+    inputId: D,
+    handleInputChange: g,
+    handleInputKeyDown: b,
+    handleHourSelect: N,
+    handleMinuteSelect: H,
+    handleNowSelect: O,
+    handleClear: V,
+    setOpen: l
+  };
+};
+export {
+  B as useTimePicker
+};
+//# sourceMappingURL=useTimePicker.hook.js.map

package/dist/components/forms/time-picker/hooks/useTimePicker.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimePicker.hook.js","sources":["../../../../../src/components/forms/time-picker/hooks/useTimePicker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from 'react'\n\nimport { KEYS_THAT_OPEN_NATIVE_PICKER } from '@components/forms/time-picker/constants'\nimport type { UseTimePickerOptions, UseTimePickerReturn } from '@components/forms/time-picker/types'\nimport { clampTime, getCurrentTime, isValidTime, joinTime, splitTime } from '@components/forms/time-picker/utils/timePicker.utils.ts'\n\n/**\n * Manages state and interactions for the TimePicker component.\n *\n * Supports both controlled and uncontrolled modes, keeps the native time input\n * in sync with the popover selection, and only commits valid `HH:mm` values to\n * `onChange`.\n */\nexport const useTimePicker = ({\n    value,\n    defaultValue,\n    onChange,\n    id,\n    defaultPanelTime,\n    minTime,\n    maxTime,\n}: UseTimePickerOptions): UseTimePickerReturn => {\n    const isControlled = value !== undefined\n    const generatedId = useId()\n    const inputId = id ?? generatedId\n\n    const [selectedTime, setSelectedTime] = useState<string | undefined>(\n        isValidTime(defaultValue) ? defaultValue : undefined,\n    )\n    const [inputValue, setInputValue] = useState(\n        isValidTime(defaultValue) ? defaultValue : '',\n    )\n    const [open, setOpen] = useState(false)\n\n    const resolvedTime = isControlled ? (isValidTime(value) ? value : undefined) : selectedTime\n\n    useEffect(() => {\n        if (isControlled) {\n            setSelectedTime(isValidTime(value) ? value : undefined)\n            setInputValue(isValidTime(value) ? value : '')\n        }\n    }, [isControlled, value])\n\n    const updateTime = useCallback(\n        (time: string | undefined) => {\n            if (!isControlled) {\n                setSelectedTime(time)\n                setInputValue(time ?? '')\n            }\n            onChange?.(time)\n        },\n        [isControlled, onChange],\n    )\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newValue = event.target.value\n            setInputValue(newValue)\n\n            if (newValue === '') {\n                if (resolvedTime !== undefined) {\n                    updateTime(undefined)\n                }\n                return\n            }\n\n            if (isValidTime(newValue) && newValue !== resolvedTime) {\n                updateTime(newValue)\n            }\n        },\n        [resolvedTime, updateTime],\n    )\n\n    const handleHourSelect = useCallback(\n        (hour: string) => {\n            const minute = splitTime(resolvedTime)?.minute\n                ?? splitTime(defaultPanelTime)?.minute\n                ?? '00'\n            updateTime(clampTime(joinTime(hour, minute), minTime, maxTime))\n        },\n        [resolvedTime, defaultPanelTime, minTime, maxTime, updateTime],\n    )\n\n    const handleMinuteSelect = useCallback(\n        (minute: string) => {\n            const hour = splitTime(resolvedTime)?.hour\n                ?? splitTime(defaultPanelTime)?.hour\n                ?? '00'\n            updateTime(clampTime(joinTime(hour, minute), minTime, maxTime))\n            setOpen(false)\n        },\n        [resolvedTime, defaultPanelTime, minTime, maxTime, updateTime],\n    )\n\n    const handleNowSelect = useCallback(() => {\n        updateTime(clampTime(getCurrentTime(), minTime, maxTime))\n        setOpen(false)\n    }, [minTime, maxTime, updateTime])\n\n    const handleClear = useCallback(() => {\n        updateTime(undefined)\n        setOpen(false)\n    }, [updateTime])\n    const handleInputKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const isSpace = KEYS_THAT_OPEN_NATIVE_PICKER.has(event.key)\n            const isAltArrowDown = event.key === 'ArrowDown' && event.altKey\n\n            if (isSpace || isAltArrowDown) {\n                event.preventDefault()\n                setOpen(true)\n            }\n        },\n        [],\n    )\n\n    return {\n        selectedTime: resolvedTime,\n        inputValue,\n        open,\n        inputId,\n        handleInputChange,\n        handleInputKeyDown,\n        handleHourSelect,\n        handleMinuteSelect,\n        handleNowSelect,\n        handleClear,\n        setOpen,\n    }\n}\r\n"],"names":["useTimePicker","value","defaultValue","onChange","id","defaultPanelTime","minTime","maxTime","isControlled","generatedId","useId","inputId","selectedTime","setSelectedTime","useState","isValidTime","inputValue","setInputValue","open","setOpen","resolvedTime","useEffect","updateTime","useCallback","time","handleInputChange","event","newValue","handleHourSelect","hour","minute","splitTime","clampTime","joinTime","handleMinuteSelect","handleNowSelect","getCurrentTime","handleClear","handleInputKeyDown","isSpace","KEYS_THAT_OPEN_NATIVE_PICKER","isAltArrowDown"],"mappings":";;;AAaO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACJ,MAAiD;AAC7C,QAAMC,IAAeP,MAAU,QACzBQ,IAAcC,EAAA,GACdC,IAAUP,KAAMK,GAEhB,CAACG,GAAcC,CAAe,IAAIC;AAAA,IACpCC,EAAYb,CAAY,IAAIA,IAAe;AAAA,EAAA,GAEzC,CAACc,GAAYC,CAAa,IAAIH;AAAA,IAChCC,EAAYb,CAAY,IAAIA,IAAe;AAAA,EAAA,GAEzC,CAACgB,GAAMC,CAAO,IAAIL,EAAS,EAAK,GAEhCM,IAAeZ,IAAgBO,EAAYd,CAAK,IAAIA,IAAQ,SAAaW;AAE/E,EAAAS,EAAU,MAAM;AACZ,IAAIb,MACAK,EAAgBE,EAAYd,CAAK,IAAIA,IAAQ,MAAS,GACtDgB,EAAcF,EAAYd,CAAK,IAAIA,IAAQ,EAAE;AAAA,EAErD,GAAG,CAACO,GAAcP,CAAK,CAAC;AAExB,QAAMqB,IAAaC;AAAA,IACf,CAACC,MAA6B;AAC1B,MAAKhB,MACDK,EAAgBW,CAAI,GACpBP,EAAcO,KAAQ,EAAE,IAE5BrB,IAAWqB,CAAI;AAAA,IACnB;AAAA,IACA,CAAChB,GAAcL,CAAQ;AAAA,EAAA,GAGrBsB,IAAoBF;AAAA,IACtB,CAACG,MAA+C;AAC5C,YAAMC,IAAWD,EAAM,OAAO;AAG9B,UAFAT,EAAcU,CAAQ,GAElBA,MAAa,IAAI;AACjB,QAAIP,MAAiB,UACjBE,EAAW,MAAS;AAExB;AAAA,MACJ;AAEA,MAAIP,EAAYY,CAAQ,KAAKA,MAAaP,KACtCE,EAAWK,CAAQ;AAAA,IAE3B;AAAA,IACA,CAACP,GAAcE,CAAU;AAAA,EAAA,GAGvBM,IAAmBL;AAAA,IACrB,CAACM,MAAiB;AACd,YAAMC,IAASC,EAAUX,CAAY,GAAG,UACjCW,EAAU1B,CAAgB,GAAG,UAC7B;AACP,MAAAiB,EAAWU,EAAUC,EAASJ,GAAMC,CAAM,GAAGxB,GAASC,CAAO,CAAC;AAAA,IAClE;AAAA,IACA,CAACa,GAAcf,GAAkBC,GAASC,GAASe,CAAU;AAAA,EAAA,GAG3DY,IAAqBX;AAAA,IACvB,CAACO,MAAmB;AAChB,YAAMD,IAAOE,EAAUX,CAAY,GAAG,QAC/BW,EAAU1B,CAAgB,GAAG,QAC7B;AACP,MAAAiB,EAAWU,EAAUC,EAASJ,GAAMC,CAAM,GAAGxB,GAASC,CAAO,CAAC,GAC9DY,EAAQ,EAAK;AAAA,IACjB;AAAA,IACA,CAACC,GAAcf,GAAkBC,GAASC,GAASe,CAAU;AAAA,EAAA,GAG3Da,IAAkBZ,EAAY,MAAM;AACtC,IAAAD,EAAWU,EAAUI,EAAA,GAAkB9B,GAASC,CAAO,CAAC,GACxDY,EAAQ,EAAK;AAAA,EACjB,GAAG,CAACb,GAASC,GAASe,CAAU,CAAC,GAE3Be,IAAcd,EAAY,MAAM;AAClC,IAAAD,EAAW,MAAS,GACpBH,EAAQ,EAAK;AAAA,EACjB,GAAG,CAACG,CAAU,CAAC,GACTgB,IAAqBf;AAAA,IACvB,CAACG,MAAiD;AAC9C,YAAMa,IAAUC,EAA6B,IAAId,EAAM,GAAG,GACpDe,IAAiBf,EAAM,QAAQ,eAAeA,EAAM;AAE1D,OAAIa,KAAWE,OACXf,EAAM,eAAA,GACNP,EAAQ,EAAI;AAAA,IAEpB;AAAA,IACA,CAAA;AAAA,EAAC;AAGL,SAAO;AAAA,IACH,cAAcC;AAAA,IACd,YAAAJ;AAAA,IACA,MAAAE;AAAA,IACA,SAAAP;AAAA,IACA,mBAAAc;AAAA,IACA,oBAAAa;AAAA,IACA,kBAAAV;AAAA,IACA,oBAAAM;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAE;AAAA,IACA,SAAAlB;AAAA,EAAA;AAER;"}

package/dist/components/forms/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TimePicker } from './TimePicker.tsx';
+export { TIME_PICKER_STYLES } from './styles/TimePicker.css.ts';
+export type { TimePickerProps } from './types/TimePicker.props.ts';

package/dist/components/forms/time-picker/styles/TimePicker.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit33.css');;/* empty css                                */var e={input:"nyssl70",content:"nyssl71"};exports.TIME_PICKER_STYLES=e;
+//# sourceMappingURL=TimePicker.css.cjs.map

package/dist/components/forms/time-picker/styles/TimePicker.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/time-picker/styles/TimePicker.css.d.ts

@@ -0,0 +1,9 @@
+export declare const TIME_PICKER_STYLES: {
+    /**
+     * Hides the browser-native clock picker icon on time inputs so the custom
+     * IconButton trigger is the only visible way to open the popover.
+     */
+    input: string;
+    /** Removes the popover content padding so the panel sits flush. */
+    content: string;
+};