@cognite/aura 0.3.5 → 1.46104.0

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts

@@ -1,20 +1,20 @@
-import { FC } from 'react';
-import { AmPm } from '../../utils/format-utils';
+import type { FC } from "react";
+import type { AmPm } from "../../utils/format-utils";
 type TimePickerPanelBaseProps = {
-    hour: number;
-    minute: number;
-    onHourChange: (hour: number) => void;
-    onMinuteChange: (minute: number) => void;
-    className?: string;
+	hour: number;
+	minute: number;
+	onHourChange: (hour: number) => void;
+	onMinuteChange: (minute: number) => void;
+	className?: string;
 };
 export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
-    timeFormat: '12h';
-    amPm: AmPm;
-    onAmPmChange: (amPm: AmPm) => void;
+	timeFormat: "12h";
+	amPm: AmPm;
+	onAmPmChange: (amPm: AmPm) => void;
 } | {
-    timeFormat?: '24h';
-    amPm?: undefined;
-    onAmPmChange?: undefined;
+	timeFormat?: "24h";
+	amPm?: undefined;
+	onAmPmChange?: undefined;
 });
 export declare const TimePickerPanel: FC<TimePickerPanelProps>;
 export {};

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js

@@ -1,41 +1,50 @@
-import { cn as e } from "../../../../../../lib/utils.js";
-import { AmPmScroll as t } from "../am-pm-scroll/am-pm-scroll.js";
-import { TimePickerScroll as n } from "../time-picker-scroll/time-picker-scroll.js";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.tsx
-var o = (o) => {
-	let { hour: s, minute: c, onHourChange: l, onMinuteChange: u, className: d } = o, f = o.timeFormat ?? "24h";
-	return /* @__PURE__ */ a("div", {
-		"data-slot": "time-picker-panel",
-		className: e("flex items-stretch", d),
-		children: [
-			/* @__PURE__ */ i("div", {
-				className: "px-3",
-				children: /* @__PURE__ */ i(n, {
-					value: s,
-					onChange: l,
-					type: "hour",
-					timeFormat: f
-				})
-			}),
-			/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }),
-			/* @__PURE__ */ i("div", {
-				className: "px-3",
-				children: /* @__PURE__ */ i(n, {
-					value: c,
-					onChange: u,
-					type: "minute"
-				})
-			}),
-			o.timeFormat === "12h" && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }), /* @__PURE__ */ i("div", {
-				className: "px-3",
-				children: /* @__PURE__ */ i(t, {
-					value: o.amPm,
-					onChange: o.onAmPmChange
-				})
-			})] })
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../../../../lib/utils.js";
+import { AmPmScroll } from "../am-pm-scroll/am-pm-scroll.js";
+import { TimePickerScroll } from "../time-picker-scroll/time-picker-scroll.js";
+export const TimePickerPanel = (props)=>{
+    const { hour, minute, onHourChange, onMinuteChange, className } = props;
+    const timeFormat = props.timeFormat ?? '24h';
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "time-picker-panel",
+        className: cn('flex items-stretch', className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "px-3",
+                children: /*#__PURE__*/ _jsx(TimePickerScroll, {
+                    value: hour,
+                    onChange: onHourChange,
+                    type: "hour",
+                    timeFormat: timeFormat
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "w-px bg-border shrink-0 self-stretch"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "px-3",
+                children: /*#__PURE__*/ _jsx(TimePickerScroll, {
+                    value: minute,
+                    onChange: onMinuteChange,
+                    type: "minute"
+                })
+            }),
+            props.timeFormat === '12h' && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "w-px bg-border shrink-0 self-stretch"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-3",
+                        children: /*#__PURE__*/ _jsx(AmPmScroll, {
+                            value: props.amPm,
+                            onChange: props.onAmPmChange
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 };
-//#endregion
-export { o as TimePickerPanel };
+
+//# sourceMappingURL=time-picker-panel.js.map

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport { cn } from '../../../../../../lib/utils';\nimport type { AmPm } from '../../utils/format-utils';\nimport { AmPmScroll } from '../am-pm-scroll/am-pm-scroll';\nimport { TimePickerScroll } from '../time-picker-scroll/time-picker-scroll';\n\ntype TimePickerPanelBaseProps = {\n  hour: number;\n  minute: number;\n  onHourChange: (hour: number) => void;\n  onMinuteChange: (minute: number) => void;\n  className?: string;\n};\n\nexport type TimePickerPanelProps = TimePickerPanelBaseProps &\n  (\n    | {\n        timeFormat: '12h';\n        amPm: AmPm;\n        onAmPmChange: (amPm: AmPm) => void;\n      }\n    | { timeFormat?: '24h'; amPm?: undefined; onAmPmChange?: undefined }\n  );\n\nexport const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {\n  const { hour, minute, onHourChange, onMinuteChange, className } = props;\n  const timeFormat = props.timeFormat ?? '24h';\n\n  return (\n    <div\n      data-slot=\"time-picker-panel\"\n      className={cn('flex items-stretch', className)}\n    >\n      <div className=\"px-3\">\n        <TimePickerScroll\n          value={hour}\n          onChange={onHourChange}\n          type=\"hour\"\n          timeFormat={timeFormat}\n        />\n      </div>\n      <div className=\"w-px bg-border shrink-0 self-stretch\" />\n      <div className=\"px-3\">\n        <TimePickerScroll\n          value={minute}\n          onChange={onMinuteChange}\n          type=\"minute\"\n        />\n      </div>\n      {props.timeFormat === '12h' && (\n        <>\n          <div className=\"w-px bg-border shrink-0 self-stretch\" />\n          <div className=\"px-3\">\n            <AmPmScroll value={props.amPm} onChange={props.onAmPmChange} />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["cn","AmPmScroll","TimePickerScroll","TimePickerPanel","props","hour","minute","onHourChange","onMinuteChange","className","timeFormat","div","data-slot","value","onChange","type","amPm","onAmPmChange"],"mappings":";AAEA,SAASA,EAAE,QAAQ,iCAA8B;AAEjD,SAASC,UAAU,QAAQ,kCAA+B;AAC1D,SAASC,gBAAgB,QAAQ,8CAA2C;AAoB5E,OAAO,MAAMC,kBAA4C,CAACC;IACxD,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGL;IAClE,MAAMM,aAAaN,MAAMM,UAAU,IAAI;IAEvC,qBACE,MAACC;QACCC,aAAU;QACVH,WAAWT,GAAG,sBAAsBS;;0BAEpC,KAACE;gBAAIF,WAAU;0BACb,cAAA,KAACP;oBACCW,OAAOR;oBACPS,UAAUP;oBACVQ,MAAK;oBACLL,YAAYA;;;0BAGhB,KAACC;gBAAIF,WAAU;;0BACf,KAACE;gBAAIF,WAAU;0BACb,cAAA,KAACP;oBACCW,OAAOP;oBACPQ,UAAUN;oBACVO,MAAK;;;YAGRX,MAAMM,UAAU,KAAK,uBACpB;;kCACE,KAACC;wBAAIF,WAAU;;kCACf,KAACE;wBAAIF,WAAU;kCACb,cAAA,KAACR;4BAAWY,OAAOT,MAAMY,IAAI;4BAAEF,UAAUV,MAAMa,YAAY;;;;;;;AAMvE,EAAE"}

package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.d.ts

@@ -1,10 +1,10 @@
-import { FC } from 'react';
-import { TimeFormat } from '../../utils/format-utils';
+import type { FC } from "react";
+import type { TimeFormat } from "../../utils/format-utils";
 export type TimePickerScrollProps = {
-    value: number | null;
-    onChange: (value: number) => void;
-    type: 'hour' | 'minute';
-    timeFormat?: TimeFormat;
-    className?: string;
+	value: number | null;
+	onChange: (value: number) => void;
+	type: "hour" | "minute";
+	timeFormat?: TimeFormat;
+	className?: string;
 };
 export declare const TimePickerScroll: FC<TimePickerScrollProps>;

package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js

@@ -1,35 +1,42 @@
-import { cn as e } from "../../../../../../lib/utils.js";
-import { SCROLL_CONTAINER_CLASSES as t, SCROLL_ITEM_BASE_CLASSES as n, SCROLL_ITEM_SELECTED_CLASSES as r, SCROLL_ITEM_UNSELECTED_CLASSES as i } from "../scroll-cell-classes.js";
-import { generateHours as a, generateMinutes as o } from "../../utils/time-utils.js";
-import { useEffect as s, useRef as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.tsx
-var u = ({ value: u, onChange: d, type: f, timeFormat: p = "24h", className: m }) => {
-	let h = c(null), g = c(null), _ = f === "hour" ? a(p) : o(), v = u === null ? null : f === "hour" && p === "12h" ? u === 0 ? 12 : u > 12 ? u - 12 : u : u;
-	return s(() => {
-		if (u !== null && g.current && h.current) {
-			let e = h.current, t = g.current;
-			e.scrollTo({
-				top: t.offsetTop - e.offsetHeight / 2 + t.offsetHeight / 2,
-				behavior: "smooth"
-			});
-		}
-	}, [u]), /* @__PURE__ */ l("div", {
-		"data-slot": "time-picker-scroll",
-		ref: h,
-		className: e(t, m),
-		children: _.map((t) => {
-			let a = v !== null && t === v;
-			return /* @__PURE__ */ l("div", {
-				ref: a ? g : void 0,
-				className: e(n, a ? r : i),
-				onClick: () => d(t),
-				role: "option",
-				"aria-selected": a,
-				children: t.toString().padStart(2, "0")
-			}, t);
-		})
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../../../../../lib/utils.js";
+import { generateHours, generateMinutes } from "../../utils/time-utils.js";
+import { HOURS_IN_12H, MIDNIGHT_HOUR } from "../constants.js";
+import { SCROLL_CONTAINER_CLASSES, SCROLL_ITEM_BASE_CLASSES, SCROLL_ITEM_SELECTED_CLASSES, SCROLL_ITEM_UNSELECTED_CLASSES } from "../scroll-cell-classes.js";
+export const TimePickerScroll = ({ value, onChange, type, timeFormat = '24h', className })=>{
+    const scrollContainerRef = useRef(null);
+    const selectedItemRef = useRef(null);
+    const values = type === 'hour' ? generateHours(timeFormat) : generateMinutes();
+    const displayValue = value === null ? null : type === 'hour' && timeFormat === '12h' ? value === MIDNIGHT_HOUR ? HOURS_IN_12H : value > HOURS_IN_12H ? value - HOURS_IN_12H : value : value;
+    useEffect(()=>{
+        if (value !== null && selectedItemRef.current && scrollContainerRef.current) {
+            const container = scrollContainerRef.current;
+            const item = selectedItemRef.current;
+            container.scrollTo({
+                top: item.offsetTop - container.offsetHeight / 2 + item.offsetHeight / 2,
+                behavior: 'smooth'
+            });
+        }
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "time-picker-scroll",
+        ref: scrollContainerRef,
+        className: cn(SCROLL_CONTAINER_CLASSES, className),
+        children: values.map((timeValue)=>{
+            const isSelected = displayValue !== null && timeValue === displayValue;
+            return /*#__PURE__*/ _jsx("div", {
+                ref: isSelected ? selectedItemRef : undefined,
+                className: cn(SCROLL_ITEM_BASE_CLASSES, isSelected ? SCROLL_ITEM_SELECTED_CLASSES : SCROLL_ITEM_UNSELECTED_CLASSES),
+                onClick: ()=>onChange(timeValue),
+                role: "option",
+                "aria-selected": isSelected,
+                children: timeValue.toString().padStart(2, '0')
+            }, timeValue);
+        })
+    });
 };
-//#endregion
-export { u as TimePickerScroll };
+
+//# sourceMappingURL=time-picker-scroll.js.map

package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useEffect, useRef } from 'react';\n\nimport { cn } from '../../../../../../lib/utils';\nimport type { TimeFormat } from '../../utils/format-utils';\nimport { generateHours, generateMinutes } from '../../utils/time-utils';\nimport { HOURS_IN_12H, MIDNIGHT_HOUR } from '../constants';\nimport {\n  SCROLL_CONTAINER_CLASSES,\n  SCROLL_ITEM_BASE_CLASSES,\n  SCROLL_ITEM_SELECTED_CLASSES,\n  SCROLL_ITEM_UNSELECTED_CLASSES,\n} from '../scroll-cell-classes';\n\nexport type TimePickerScrollProps = {\n  value: number | null;\n  onChange: (value: number) => void;\n  type: 'hour' | 'minute';\n  timeFormat?: TimeFormat;\n  className?: string;\n};\n\nexport const TimePickerScroll: FC<TimePickerScrollProps> = ({\n  value,\n  onChange,\n  type,\n  timeFormat = '24h',\n  className,\n}) => {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const selectedItemRef = useRef<HTMLDivElement>(null);\n\n  const values =\n    type === 'hour' ? generateHours(timeFormat) : generateMinutes();\n\n  const displayValue =\n    value === null\n      ? null\n      : type === 'hour' && timeFormat === '12h'\n        ? value === MIDNIGHT_HOUR\n          ? HOURS_IN_12H\n          : value > HOURS_IN_12H\n            ? value - HOURS_IN_12H\n            : value\n        : value;\n\n  useEffect(() => {\n    if (\n      value !== null &&\n      selectedItemRef.current &&\n      scrollContainerRef.current\n    ) {\n      const container = scrollContainerRef.current;\n      const item = selectedItemRef.current;\n      container.scrollTo({\n        top:\n          item.offsetTop - container.offsetHeight / 2 + item.offsetHeight / 2,\n        behavior: 'smooth',\n      });\n    }\n  }, [value]);\n\n  return (\n    <div\n      data-slot=\"time-picker-scroll\"\n      ref={scrollContainerRef}\n      className={cn(SCROLL_CONTAINER_CLASSES, className)}\n    >\n      {values.map((timeValue) => {\n        const isSelected = displayValue !== null && timeValue === displayValue;\n        return (\n          <div\n            key={timeValue}\n            ref={isSelected ? selectedItemRef : undefined}\n            className={cn(\n              SCROLL_ITEM_BASE_CLASSES,\n              isSelected\n                ? SCROLL_ITEM_SELECTED_CLASSES\n                : SCROLL_ITEM_UNSELECTED_CLASSES\n            )}\n            onClick={() => onChange(timeValue)}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {timeValue.toString().padStart(2, '0')}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["useEffect","useRef","cn","generateHours","generateMinutes","HOURS_IN_12H","MIDNIGHT_HOUR","SCROLL_CONTAINER_CLASSES","SCROLL_ITEM_BASE_CLASSES","SCROLL_ITEM_SELECTED_CLASSES","SCROLL_ITEM_UNSELECTED_CLASSES","TimePickerScroll","value","onChange","type","timeFormat","className","scrollContainerRef","selectedItemRef","values","displayValue","current","container","item","scrollTo","top","offsetTop","offsetHeight","behavior","div","data-slot","ref","map","timeValue","isSelected","undefined","onClick","role","aria-selected","toString","padStart"],"mappings":";AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAE1C,SAASC,EAAE,QAAQ,iCAA8B;AAEjD,SAASC,aAAa,EAAEC,eAAe,QAAQ,4BAAyB;AACxE,SAASC,YAAY,EAAEC,aAAa,QAAQ,kBAAe;AAC3D,SACEC,wBAAwB,EACxBC,wBAAwB,EACxBC,4BAA4B,EAC5BC,8BAA8B,QACzB,4BAAyB;AAUhC,OAAO,MAAMC,mBAA8C,CAAC,EAC1DC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,aAAa,KAAK,EAClBC,SAAS,EACV;IACC,MAAMC,qBAAqBhB,OAAuB;IAClD,MAAMiB,kBAAkBjB,OAAuB;IAE/C,MAAMkB,SACJL,SAAS,SAASX,cAAcY,cAAcX;IAEhD,MAAMgB,eACJR,UAAU,OACN,OACAE,SAAS,UAAUC,eAAe,QAChCH,UAAUN,gBACRD,eACAO,QAAQP,eACNO,QAAQP,eACRO,QACJA;IAERZ,UAAU;QACR,IACEY,UAAU,QACVM,gBAAgBG,OAAO,IACvBJ,mBAAmBI,OAAO,EAC1B;YACA,MAAMC,YAAYL,mBAAmBI,OAAO;YAC5C,MAAME,OAAOL,gBAAgBG,OAAO;YACpCC,UAAUE,QAAQ,CAAC;gBACjBC,KACEF,KAAKG,SAAS,GAAGJ,UAAUK,YAAY,GAAG,IAAIJ,KAAKI,YAAY,GAAG;gBACpEC,UAAU;YACZ;QACF;IACF,GAAG;QAAChB;KAAM;IAEV,qBACE,KAACiB;QACCC,aAAU;QACVC,KAAKd;QACLD,WAAWd,GAAGK,0BAA0BS;kBAEvCG,OAAOa,GAAG,CAAC,CAACC;YACX,MAAMC,aAAad,iBAAiB,QAAQa,cAAcb;YAC1D,qBACE,KAACS;gBAECE,KAAKG,aAAahB,kBAAkBiB;gBACpCnB,WAAWd,GACTM,0BACA0B,aACIzB,+BACAC;gBAEN0B,SAAS,IAAMvB,SAASoB;gBACxBI,MAAK;gBACLC,iBAAeJ;0BAEdD,UAAUM,QAAQ,GAAGC,QAAQ,CAAC,GAAG;eAZ7BP;QAeX;;AAGN,EAAE"}

package/dist/components/ui/core/date-time-pickers/time-picker/index.d.ts

@@ -1,3 +1,3 @@
-export { TimePicker } from './time-picker';
-export type { TimePickerProps, ShortcutItem } from './time-picker';
-export type { UseTimePickerProps, UseTimePickerReturn } from './types';
+export { TimePicker } from "./time-picker";
+export type { TimePickerProps, ShortcutItem } from "./time-picker";
+export type { UseTimePickerProps, UseTimePickerReturn } from "./types";

package/dist/components/ui/core/date-time-pickers/time-picker/index.js

@@ -0,0 +1,3 @@
+export { TimePicker } from "./time-picker.js";
+
+//# sourceMappingURL=index.js.map

package/dist/components/ui/core/date-time-pickers/time-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/ui/core/date-time-pickers/time-picker/index.ts"],"sourcesContent":["export { TimePicker } from './time-picker';\nexport type { TimePickerProps, ShortcutItem } from './time-picker';\nexport type { UseTimePickerProps, UseTimePickerReturn } from './types';\n"],"names":["TimePicker"],"mappings":"AAAA,SAASA,UAAU,QAAQ,mBAAgB"}

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.d.ts

@@ -1,16 +1,14 @@
-import { FC } from 'react';
-import { Dayjs } from 'dayjs';
-import { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';
-import { TimeFormat } from '../utils/format-utils';
+import type { JSX } from "react";
+import type { Dayjs } from "dayjs";
+import type { ShortcutItem } from "../shared/shortcuts-panel/shortcuts-panel";
+import { type DateInput, type DateValueProps } from "../utils/date-input";
+import type { TimeFormat } from "../utils/format-utils";
 export type { ShortcutItem };
-export interface TimePickerProps {
-    value: Dayjs | null;
-    onChange: (time: Dayjs | null) => void;
-    timeFormat?: TimeFormat;
-    format?: string;
-    placeholder?: string;
-    shortcuts?: ShortcutItem[];
-    defaultDate?: Dayjs;
-    className?: string;
+export interface TimePickerProps<T extends DateInput = Dayjs> extends DateValueProps<T> {
+	timeFormat?: TimeFormat;
+	format?: string;
+	placeholder?: string;
+	shortcuts?: ShortcutItem[];
+	className?: string;
 }
-export declare const TimePicker: FC<TimePickerProps>;
+export declare function TimePicker<T extends DateInput = Dayjs>({ value, onChange, timeFormat, format, placeholder, shortcuts, defaultDate, valueType, className }: TimePickerProps<T>): JSX.Element;

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js

@@ -1,79 +1,99 @@
-import { cn as e } from "../../../../../lib/utils.js";
-import { Button as t } from "../../button/button.js";
-import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../../popover/popover.js";
-import { DateTimeInput as a } from "../shared/date-time-input/date-time-input.js";
-import { ShortcutsPanel as o } from "../shared/shortcuts-panel/shortcuts-panel.js";
-import { TimePickerPanel as s } from "../shared/time-picker-panel/time-picker-panel.js";
-import { useTimePicker as c } from "./use-time-picker.js";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/time-picker.tsx
-var d = ({ value: d, onChange: f, timeFormat: p = "24h", format: m, placeholder: h, shortcuts: g, defaultDate: _, className: v }) => {
-	let y = m ?? (p === "12h" ? "h:mm A" : "HH:mm"), { isOpen: b, hour: x, minute: S, amPm: C, displayValue: w, handleOpenChange: T, handleApply: E, handleHourChange: D, handleMinuteChange: O, handleAmPmChange: k, handleApplyShortcut: A, inputRef: j, popoverRef: M } = c({
-		value: d,
-		onChange: f,
-		timeFormat: p,
-		defaultDate: _
-	});
-	return /* @__PURE__ */ l("div", {
-		"data-slot": "time-picker",
-		className: e("relative w-full", v),
-		children: /* @__PURE__ */ u(n, {
-			open: b,
-			onOpenChange: T,
-			children: [/* @__PURE__ */ l(i, {
-				render: /* @__PURE__ */ l("div", {
-					ref: j,
-					className: "w-full"
-				}),
-				children: /* @__PURE__ */ l(a, {
-					value: w,
-					format: y,
-					placeholder: h,
-					isOpen: b,
-					variant: "time",
-					ariaLabel: "Time picker"
-				})
-			}), /* @__PURE__ */ l(r, {
-				ref: M,
-				className: "rounded-xl w-auto p-0",
-				side: "bottom",
-				align: "start",
-				children: /* @__PURE__ */ u("div", {
-					"data-slot": "time-picker-content",
-					className: "flex flex-col",
-					children: [/* @__PURE__ */ u("div", {
-						className: "flex flex-row",
-						children: [g && g.length > 0 && /* @__PURE__ */ l(o, {
-							shortcuts: g,
-							onShortcutClick: A
-						}), p === "12h" ? /* @__PURE__ */ l(s, {
-							hour: x,
-							minute: S,
-							amPm: C,
-							timeFormat: "12h",
-							onHourChange: D,
-							onMinuteChange: O,
-							onAmPmChange: k
-						}) : /* @__PURE__ */ l(s, {
-							hour: x,
-							minute: S,
-							timeFormat: "24h",
-							onHourChange: D,
-							onMinuteChange: O
-						})]
-					}), /* @__PURE__ */ l("div", {
-						className: "flex p-2 border-t border-border",
-						children: /* @__PURE__ */ l(t, {
-							variant: "secondary",
-							className: "w-full",
-							onClick: E,
-							children: "Apply"
-						})
-					})]
-				})
-			})]
-		})
-	});
-};
-//#endregion
-export { d as TimePicker };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../lib/utils.js";
+import { Button } from "../../button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover/popover.js";
+import { DateTimeInput } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { TimePickerPanel } from "../shared/time-picker-panel/time-picker-panel.js";
+import { normalizeIn, normalizeOut, normalizeShortcutValue, resolveValueType } from "../utils/date-input.js";
+import { useTimePicker } from "./use-time-picker.js";
+export function TimePicker({ value, onChange, timeFormat = '24h', format, placeholder, shortcuts, defaultDate, valueType, className }) {
+    const displayFormat = format ?? (timeFormat === '12h' ? 'h:mm A' : 'HH:mm');
+    const resolvedType = resolveValueType(value, defaultDate, valueType);
+    const djValue = normalizeIn(value);
+    const djDefault = defaultDate != null ? normalizeIn(defaultDate) ?? undefined : undefined;
+    const handleChange = (time)=>{
+        onChange(normalizeOut(time, resolvedType));
+    };
+    const djShortcuts = shortcuts?.map((shortcut)=>({
+            ...shortcut,
+            getValue: ()=>normalizeShortcutValue(shortcut.getValue())
+        }));
+    const { isOpen, hour, minute, amPm, displayValue, handleOpenChange, handleApply, handleHourChange, handleMinuteChange, handleAmPmChange, handleApplyShortcut, inputRef, popoverRef } = useTimePicker({
+        value: djValue,
+        onChange: handleChange,
+        timeFormat,
+        defaultDate: djDefault
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "time-picker",
+        className: cn('relative w-full', className),
+        children: /*#__PURE__*/ _jsxs(Popover, {
+            open: isOpen,
+            onOpenChange: handleOpenChange,
+            children: [
+                /*#__PURE__*/ _jsx(PopoverTrigger, {
+                    render: /*#__PURE__*/ _jsx("div", {
+                        ref: inputRef,
+                        className: "w-full"
+                    }),
+                    children: /*#__PURE__*/ _jsx(DateTimeInput, {
+                        value: displayValue,
+                        format: displayFormat,
+                        placeholder: placeholder,
+                        isOpen: isOpen,
+                        variant: "time",
+                        ariaLabel: "Time picker"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(PopoverContent, {
+                    ref: popoverRef,
+                    className: "rounded-xl w-auto p-0",
+                    side: "bottom",
+                    align: "start",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        "data-slot": "time-picker-content",
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-row",
+                                children: [
+                                    djShortcuts && djShortcuts.length > 0 && /*#__PURE__*/ _jsx(ShortcutsPanel, {
+                                        shortcuts: djShortcuts,
+                                        onShortcutClick: handleApplyShortcut
+                                    }),
+                                    timeFormat === '12h' ? /*#__PURE__*/ _jsx(TimePickerPanel, {
+                                        hour: hour,
+                                        minute: minute,
+                                        amPm: amPm,
+                                        timeFormat: "12h",
+                                        onHourChange: handleHourChange,
+                                        onMinuteChange: handleMinuteChange,
+                                        onAmPmChange: handleAmPmChange
+                                    }) : /*#__PURE__*/ _jsx(TimePickerPanel, {
+                                        hour: hour,
+                                        minute: minute,
+                                        timeFormat: "24h",
+                                        onHourChange: handleHourChange,
+                                        onMinuteChange: handleMinuteChange
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex p-2 border-t border-default",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    className: "w-full",
+                                    onClick: handleApply,
+                                    children: "Apply"
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=time-picker.js.map

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/ui/core/date-time-pickers/time-picker/time-picker.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport type { Dayjs } from 'dayjs';\n\nimport { cn } from '../../../../../lib/utils';\nimport { Button } from '../../button/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../popover/popover';\nimport { DateTimeInput } from '../shared/date-time-input/date-time-input';\nimport { ShortcutsPanel } from '../shared/shortcuts-panel/shortcuts-panel';\nimport type { ShortcutItem } from '../shared/shortcuts-panel/shortcuts-panel';\nimport { TimePickerPanel } from '../shared/time-picker-panel/time-picker-panel';\nimport {\n  type DateInput,\n  type DateValueProps,\n  normalizeIn,\n  normalizeOut,\n  normalizeShortcutValue,\n  resolveValueType,\n} from '../utils/date-input';\nimport type { TimeFormat } from '../utils/format-utils';\n\nimport { useTimePicker } from './use-time-picker';\n\nexport type { ShortcutItem };\n\nexport interface TimePickerProps<\n  T extends DateInput = Dayjs,\n> extends DateValueProps<T> {\n  timeFormat?: TimeFormat;\n  format?: string;\n  placeholder?: string;\n  shortcuts?: ShortcutItem[];\n  className?: string;\n}\n\nexport function TimePicker<T extends DateInput = Dayjs>({\n  value,\n  onChange,\n  timeFormat = '24h',\n  format,\n  placeholder,\n  shortcuts,\n  defaultDate,\n  valueType,\n  className,\n}: TimePickerProps<T>): JSX.Element {\n  const displayFormat = format ?? (timeFormat === '12h' ? 'h:mm A' : 'HH:mm');\n  const resolvedType = resolveValueType(value, defaultDate, valueType);\n  const djValue = normalizeIn(value);\n  const djDefault =\n    defaultDate != null ? (normalizeIn(defaultDate) ?? undefined) : undefined;\n\n  const handleChange = (time: Dayjs | null) => {\n    onChange(normalizeOut<T>(time, resolvedType));\n  };\n\n  const djShortcuts = shortcuts?.map((shortcut) => ({\n    ...shortcut,\n    getValue: () => normalizeShortcutValue(shortcut.getValue()),\n  }));\n\n  const {\n    isOpen,\n    hour,\n    minute,\n    amPm,\n    displayValue,\n    handleOpenChange,\n    handleApply,\n    handleHourChange,\n    handleMinuteChange,\n    handleAmPmChange,\n    handleApplyShortcut,\n    inputRef,\n    popoverRef,\n  } = useTimePicker({\n    value: djValue,\n    onChange: handleChange,\n    timeFormat,\n    defaultDate: djDefault,\n  });\n\n  return (\n    <div data-slot=\"time-picker\" className={cn('relative w-full', className)}>\n      <Popover open={isOpen} onOpenChange={handleOpenChange}>\n        <PopoverTrigger render={<div ref={inputRef} className=\"w-full\" />}>\n          <DateTimeInput\n            value={displayValue}\n            format={displayFormat}\n            placeholder={placeholder}\n            isOpen={isOpen}\n            variant=\"time\"\n            ariaLabel=\"Time picker\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          ref={popoverRef}\n          className=\"rounded-xl w-auto p-0\"\n          side=\"bottom\"\n          align=\"start\"\n        >\n          <div data-slot=\"time-picker-content\" className=\"flex flex-col\">\n            <div className=\"flex flex-row\">\n              {djShortcuts && djShortcuts.length > 0 && (\n                <ShortcutsPanel\n                  shortcuts={djShortcuts}\n                  onShortcutClick={handleApplyShortcut}\n                />\n              )}\n              {timeFormat === '12h' ? (\n                <TimePickerPanel\n                  hour={hour}\n                  minute={minute}\n                  amPm={amPm}\n                  timeFormat=\"12h\"\n                  onHourChange={handleHourChange}\n                  onMinuteChange={handleMinuteChange}\n                  onAmPmChange={handleAmPmChange}\n                />\n              ) : (\n                <TimePickerPanel\n                  hour={hour}\n                  minute={minute}\n                  timeFormat=\"24h\"\n                  onHourChange={handleHourChange}\n                  onMinuteChange={handleMinuteChange}\n                />\n              )}\n            </div>\n            <div className=\"flex p-2 border-t border-default\">\n              <Button\n                variant=\"secondary\"\n                className=\"w-full\"\n                onClick={handleApply}\n              >\n                Apply\n              </Button>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"],"names":["cn","Button","Popover","PopoverContent","PopoverTrigger","DateTimeInput","ShortcutsPanel","TimePickerPanel","normalizeIn","normalizeOut","normalizeShortcutValue","resolveValueType","useTimePicker","TimePicker","value","onChange","timeFormat","format","placeholder","shortcuts","defaultDate","valueType","className","displayFormat","resolvedType","djValue","djDefault","undefined","handleChange","time","djShortcuts","map","shortcut","getValue","isOpen","hour","minute","amPm","displayValue","handleOpenChange","handleApply","handleHourChange","handleMinuteChange","handleAmPmChange","handleApplyShortcut","inputRef","popoverRef","div","data-slot","open","onOpenChange","render","ref","variant","ariaLabel","side","align","length","onShortcutClick","onHourChange","onMinuteChange","onAmPmChange","onClick"],"mappings":";AAIA,SAASA,EAAE,QAAQ,8BAA2B;AAC9C,SAASC,MAAM,QAAQ,yBAAsB;AAC7C,SAASC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAQ,2BAAwB;AAChF,SAASC,aAAa,QAAQ,+CAA4C;AAC1E,SAASC,cAAc,QAAQ,+CAA4C;AAE3E,SAASC,eAAe,QAAQ,mDAAgD;AAChF,SAGEC,WAAW,EACXC,YAAY,EACZC,sBAAsB,EACtBC,gBAAgB,QACX,yBAAsB;AAG7B,SAASC,aAAa,QAAQ,uBAAoB;AAclD,OAAO,SAASC,WAAwC,EACtDC,KAAK,EACLC,QAAQ,EACRC,aAAa,KAAK,EAClBC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,SAAS,EACTC,SAAS,EACU;IACnB,MAAMC,gBAAgBN,UAAWD,CAAAA,eAAe,QAAQ,WAAW,OAAM;IACzE,MAAMQ,eAAeb,iBAAiBG,OAAOM,aAAaC;IAC1D,MAAMI,UAAUjB,YAAYM;IAC5B,MAAMY,YACJN,eAAe,OAAQZ,YAAYY,gBAAgBO,YAAaA;IAElE,MAAMC,eAAe,CAACC;QACpBd,SAASN,aAAgBoB,MAAML;IACjC;IAEA,MAAMM,cAAcX,WAAWY,IAAI,CAACC,WAAc,CAAA;YAChD,GAAGA,QAAQ;YACXC,UAAU,IAAMvB,uBAAuBsB,SAASC,QAAQ;QAC1D,CAAA;IAEA,MAAM,EACJC,MAAM,EACNC,IAAI,EACJC,MAAM,EACNC,IAAI,EACJC,YAAY,EACZC,gBAAgB,EAChBC,WAAW,EACXC,gBAAgB,EAChBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mBAAmB,EACnBC,QAAQ,EACRC,UAAU,EACX,GAAGlC,cAAc;QAChBE,OAAOW;QACPV,UAAUa;QACVZ;QACAI,aAAaM;IACf;IAEA,qBACE,KAACqB;QAAIC,aAAU;QAAc1B,WAAWtB,GAAG,mBAAmBsB;kBAC5D,cAAA,MAACpB;YAAQ+C,MAAMf;YAAQgB,cAAcX;;8BACnC,KAACnC;oBAAe+C,sBAAQ,KAACJ;wBAAIK,KAAKP;wBAAUvB,WAAU;;8BACpD,cAAA,KAACjB;wBACCS,OAAOwB;wBACPrB,QAAQM;wBACRL,aAAaA;wBACbgB,QAAQA;wBACRmB,SAAQ;wBACRC,WAAU;;;8BAGd,KAACnD;oBACCiD,KAAKN;oBACLxB,WAAU;oBACViC,MAAK;oBACLC,OAAM;8BAEN,cAAA,MAACT;wBAAIC,aAAU;wBAAsB1B,WAAU;;0CAC7C,MAACyB;gCAAIzB,WAAU;;oCACZQ,eAAeA,YAAY2B,MAAM,GAAG,mBACnC,KAACnD;wCACCa,WAAWW;wCACX4B,iBAAiBd;;oCAGpB5B,eAAe,sBACd,KAACT;wCACC4B,MAAMA;wCACNC,QAAQA;wCACRC,MAAMA;wCACNrB,YAAW;wCACX2C,cAAclB;wCACdmB,gBAAgBlB;wCAChBmB,cAAclB;uDAGhB,KAACpC;wCACC4B,MAAMA;wCACNC,QAAQA;wCACRpB,YAAW;wCACX2C,cAAclB;wCACdmB,gBAAgBlB;;;;0CAItB,KAACK;gCAAIzB,WAAU;0CACb,cAAA,KAACrB;oCACCoD,SAAQ;oCACR/B,WAAU;oCACVwC,SAAStB;8CACV;;;;;;;;;AASf"}

package/dist/components/ui/core/date-time-pickers/time-picker/types.d.ts

@@ -1,24 +1,24 @@
-import { Dayjs } from 'dayjs';
-import { ShortcutValueDayjs } from '../shared/shortcuts-panel/shortcuts-panel';
-import { AmPm, TimeFormat } from '../utils/format-utils';
+import type { Dayjs } from "dayjs";
+import type { ShortcutValueDayjs } from "../shared/shortcuts-panel/shortcuts-panel";
+import type { AmPm, TimeFormat } from "../utils/format-utils";
 export interface UseTimePickerProps {
-    value: Dayjs | null;
-    onChange: (time: Dayjs | null) => void;
-    timeFormat?: TimeFormat;
-    defaultDate?: Dayjs;
+	value: Dayjs | null;
+	onChange: (time: Dayjs | null) => void;
+	timeFormat?: TimeFormat;
+	defaultDate?: Dayjs;
 }
 export interface UseTimePickerReturn {
-    isOpen: boolean;
-    hour: number;
-    minute: number;
-    amPm: AmPm;
-    displayValue: Dayjs | null;
-    handleOpenChange: (open: boolean) => void;
-    handleApply: () => void;
-    handleHourChange: (hour: number) => void;
-    handleMinuteChange: (minute: number) => void;
-    handleAmPmChange: (amPm: AmPm) => void;
-    handleApplyShortcut: (shortcutValue: ShortcutValueDayjs) => void;
-    inputRef: React.RefObject<HTMLDivElement>;
-    popoverRef: React.RefObject<HTMLDivElement>;
+	isOpen: boolean;
+	hour: number;
+	minute: number;
+	amPm: AmPm;
+	displayValue: Dayjs | null;
+	handleOpenChange: (open: boolean) => void;
+	handleApply: () => void;
+	handleHourChange: (hour: number) => void;
+	handleMinuteChange: (minute: number) => void;
+	handleAmPmChange: (amPm: AmPm) => void;
+	handleApplyShortcut: (shortcutValue: ShortcutValueDayjs) => void;
+	inputRef: React.RefObject<HTMLDivElement>;
+	popoverRef: React.RefObject<HTMLDivElement>;
 }

package/dist/components/ui/core/date-time-pickers/time-picker/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/components/ui/core/date-time-pickers/time-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/ui/core/date-time-pickers/time-picker/types.ts"],"sourcesContent":["import type { Dayjs } from 'dayjs';\n\nimport type { ShortcutValueDayjs } from '../shared/shortcuts-panel/shortcuts-panel';\nimport type { AmPm, TimeFormat } from '../utils/format-utils';\n\nexport interface UseTimePickerProps {\n  value: Dayjs | null;\n  onChange: (time: Dayjs | null) => void;\n  timeFormat?: TimeFormat;\n  defaultDate?: Dayjs;\n}\n\nexport interface UseTimePickerReturn {\n  isOpen: boolean;\n  hour: number;\n  minute: number;\n  amPm: AmPm;\n  displayValue: Dayjs | null;\n  handleOpenChange: (open: boolean) => void;\n  handleApply: () => void;\n  handleHourChange: (hour: number) => void;\n  handleMinuteChange: (minute: number) => void;\n  handleAmPmChange: (amPm: AmPm) => void;\n  handleApplyShortcut: (shortcutValue: ShortcutValueDayjs) => void;\n  inputRef: React.RefObject<HTMLDivElement>;\n  popoverRef: React.RefObject<HTMLDivElement>;\n}\n"],"names":[],"mappings":"AAYA,WAcC"}

package/dist/components/ui/core/date-time-pickers/time-picker/use-time-picker.d.ts

@@ -1,3 +1,3 @@
-import { UseTimePickerProps, UseTimePickerReturn } from './types';
+import type { UseTimePickerProps, UseTimePickerReturn } from "./types";
 export type { UseTimePickerProps, UseTimePickerReturn };
-export declare const useTimePicker: ({ value, onChange, timeFormat, defaultDate, }: UseTimePickerProps) => UseTimePickerReturn;
+export declare const useTimePicker: ({ value, onChange, timeFormat, defaultDate }: UseTimePickerProps) => UseTimePickerReturn;