shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/table/table-pagination.mjs

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Pagination } from '../pagination';
+
+const TablePagination = ({ config }) => {
+  return /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-3 md:px-6", children: /* @__PURE__ */ jsx(Pagination, { ...config }) });
+};
+
+export { TablePagination };
+//# sourceMappingURL=table-pagination.mjs.map
+//# sourceMappingURL=table-pagination.mjs.map

package/dist/common/interactive/table/table-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/table/table-pagination.tsx"],"names":[],"mappings":";;;AAGO,MAAM,eAAA,GAAkB,CAAC,EAAE,MAAA,EAAO,KAAyC;AAChF,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAU,4BAAA,EACb,8BAAC,UAAA,EAAA,EAAY,GAAG,QAAQ,CAAA,EAC1B,CAAA;AAEJ","file":"table-pagination.mjs","sourcesContent":["import { Pagination } from '../pagination';\nimport { TablePaginationConfig } from './types';\n\nexport const TablePagination = ({ config }: { config: TablePaginationConfig }) => {\n  return (\n    <div className=\"border-t px-4 py-3 md:px-6\">\n      <Pagination {...config} />\n    </div>\n  );\n};\n"]}

package/dist/common/interactive/table/types.js

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/common/interactive/table/types.js.map

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

package/dist/common/interactive/table/types.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.mjs.map
+//# sourceMappingURL=types.mjs.map

package/dist/common/interactive/table/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.mjs"}

package/dist/common/interactive/time-picker.js

@@ -0,0 +1,313 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dateFns = require('date-fns');
+var React = require('react');
+var icons = require('@/icons');
+var button = require('../../components/button');
+var input = require('../../components/input');
+var popover = require('../../components/popover');
+var scrollArea = require('../../components/scroll-area');
+var utils = require('../../lib/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const AM_VALUE = 0;
+const PM_VALUE = 1;
+function buildTime({
+  use12HourFormat,
+  value,
+  hour,
+  minute,
+  ampm
+}) {
+  try {
+    if (isNaN(value.getTime())) {
+      throw new Error("Invalid base date");
+    }
+    const newTime = new Date(value);
+    if (use12HourFormat) {
+      if (hour === 12) {
+        newTime.setHours(ampm === AM_VALUE ? 0 : 12, minute, 0, 0);
+      } else {
+        newTime.setHours(hour + ampm * 12, minute, 0, 0);
+      }
+    } else {
+      newTime.setHours(hour, minute, 0, 0);
+    }
+    return newTime;
+  } catch (error) {
+    return null;
+  }
+}
+function TimePicker({
+  value,
+  onChange,
+  use12HourFormat = false,
+  min,
+  max,
+  minuteStep = 1,
+  disabled,
+  modal,
+  label = "Ch\u1ECDn th\u1EDDi gian",
+  className,
+  error,
+  helperText,
+  helperTextClass,
+  size = "default",
+  hasRemoveIcon = true,
+  onClearValue,
+  ...props
+}) {
+  const internalValue = React.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    if (!value) {
+      today.setHours(0, 0, 0, 0);
+      return today;
+    }
+    try {
+      const parts = value.split(":");
+      if (parts.length !== 2 || !parts[0] || !parts[1]) {
+        today.setHours(0, 0, 0, 0);
+        return today;
+      }
+      const hours2 = parseInt(parts[0], 10);
+      const minutes2 = parseInt(parts[1], 10);
+      if (isNaN(hours2) || isNaN(minutes2) || hours2 < 0 || hours2 > 23 || minutes2 < 0 || minutes2 > 59) {
+        today.setHours(0, 0, 0, 0);
+        return today;
+      }
+      today.setHours(hours2, minutes2, 0, 0);
+      return today;
+    } catch {
+      today.setHours(0, 0, 0, 0);
+      return today;
+    }
+  }, [value]);
+  const getAmPm = React.useCallback(() => {
+    return internalValue.getHours() >= 12 ? PM_VALUE : AM_VALUE;
+  }, [internalValue]);
+  const getHour = React.useCallback(() => {
+    if (use12HourFormat) {
+      const hour2 = internalValue.getHours();
+      if (hour2 === 0) return 12;
+      if (hour2 > 12) return hour2 - 12;
+      return hour2;
+    }
+    return internalValue.getHours();
+  }, [internalValue, use12HourFormat]);
+  const getMinute = React.useCallback(() => {
+    return internalValue.getMinutes();
+  }, [internalValue]);
+  const [ampm, setAmpm] = React.useState(() => getAmPm());
+  const [hour, setHour] = React.useState(() => getHour());
+  const [minute, setMinute] = React.useState(() => getMinute());
+  const [open, setOpen] = React__default.default.useState(false);
+  const handleTimeChange = React.useCallback(
+    (newHour, newMinute, newAmpm) => {
+      try {
+        const newTime = buildTime({
+          use12HourFormat,
+          value: internalValue,
+          hour: newHour,
+          minute: newMinute,
+          ampm: newAmpm
+        });
+        if (newTime) {
+          onChange(dateFns.format(newTime, "HH:mm"));
+        }
+      } catch (error2) {
+      }
+    },
+    [use12HourFormat, internalValue, onChange]
+  );
+  const handleClockIconClick = (e) => {
+    e.stopPropagation();
+    setOpen(true);
+  };
+  const hasValue = !!value;
+  const iconSizeClasses = {
+    default: "h-5 w-5",
+    lg: "h-5 w-5"
+  };
+  const hours = React.useMemo(() => {
+    const _hours = [];
+    const startHour = use12HourFormat ? 1 : 0;
+    const endHour = use12HourFormat ? 12 : 23;
+    for (let i = startHour; i <= endHour; i++) {
+      const testDate = new Date(internalValue);
+      const hourIn24 = use12HourFormat ? i === 12 ? ampm === AM_VALUE ? 0 : 12 : i + ampm * 12 : i;
+      testDate.setHours(hourIn24, minute, 0, 0);
+      const disabled2 = min && dateFns.isBefore(testDate, dateFns.startOfMinute(min)) || max && dateFns.isAfter(testDate, dateFns.startOfMinute(max));
+      _hours.push({
+        value: i,
+        label: use12HourFormat ? i.toString() : i.toString().padStart(2, "0"),
+        disabled: disabled2 || false
+      });
+    }
+    return _hours;
+  }, [use12HourFormat, ampm, internalValue, minute, min, max]);
+  const minutes = React.useMemo(() => {
+    const _minutes = [];
+    const _hourIn24h = use12HourFormat ? hour === 12 ? ampm === AM_VALUE ? 0 : 12 : hour + ampm * 12 : hour;
+    for (let i = 0; i < 60; i += minuteStep) {
+      const testDate = new Date(internalValue);
+      testDate.setHours(_hourIn24h, i, 0, 0);
+      const disabled2 = min && dateFns.isBefore(testDate, min) || max && dateFns.isAfter(testDate, max);
+      _minutes.push({
+        value: i,
+        label: i.toString().padStart(2, "0"),
+        disabled: disabled2 || false
+      });
+    }
+    return _minutes;
+  }, [hour, ampm, use12HourFormat, internalValue, min, max, minuteStep]);
+  const ampmOptions = React.useMemo(() => {
+    if (!use12HourFormat) return [];
+    const testAM = new Date(internalValue);
+    const testPM = new Date(internalValue);
+    testAM.setHours(hour === 12 ? 0 : hour, minute, 0, 0);
+    testPM.setHours(hour === 12 ? 12 : hour + 12, minute, 0, 0);
+    return [
+      {
+        value: AM_VALUE,
+        label: "AM",
+        disabled: max && dateFns.isAfter(testAM, max) || min && dateFns.isBefore(testAM, min)
+      },
+      {
+        value: PM_VALUE,
+        label: "PM",
+        disabled: max && dateFns.isAfter(testPM, max) || min && dateFns.isBefore(testPM, min)
+      }
+    ];
+  }, [use12HourFormat, internalValue, hour, minute, min, max]);
+  const displayTime = () => {
+    if (!value) return "";
+    try {
+      return use12HourFormat ? dateFns.format(internalValue, "hh:mm a") : value;
+    } catch {
+      return "";
+    }
+  };
+  const handleClearValue = () => {
+    onChange("");
+    onClearValue?.();
+  };
+  const buttonIcon = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1 flex h-5 w-5 items-center justify-center", children: hasRemoveIcon && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        icons.CloseCircleFilledIcon,
+        {
+          className: "input-remove-icon cursor-pointer hover:opacity-70",
+          onClick: handleClearValue
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        icons.ClockOutlinedIcon,
+        {
+          className: utils.cn("cursor-pointer opacity-50 hover:opacity-70", iconSizeClasses[size]),
+          onClick: handleClockIconClick
+        }
+      )
+    ] }),
+    [
+      hasRemoveIcon,
+      hasValue,
+      disabled,
+      handleClearValue,
+      iconSizeClasses,
+      size,
+      handleClockIconClick
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    popover.Popover,
+    {
+      modal: false,
+      open: disabled ? false : open,
+      onOpenChange: disabled ? void 0 : setOpen,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            value: displayTime(),
+            placeholder: label,
+            disabled,
+            isError: error,
+            label: hasValue ? label : void 0,
+            helpText: helperText,
+            helpTextClassName: helperTextClass,
+            size,
+            showRemoveIcon: false,
+            onClearValue: handleClearValue,
+            buttonIcon,
+            readOnly: true,
+            className: utils.cn(
+              "border-input bg-background focus:border-primary rounded-md border focus:outline-none",
+              {
+                "border-destructive": error,
+                "cursor-pointer": !disabled
+              },
+              className
+            ),
+            onClick: () => setOpen(true),
+            ...props
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "h-48", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 p-2 pr-3", children: hours.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              size: "sm",
+              variant: hour === option.value ? "default" : "ghost",
+              className: "shrink-0 basis-auto",
+              disabled: option.disabled,
+              onClick: () => {
+                setHour(option.value);
+                handleTimeChange(option.value, minute, ampm);
+              },
+              children: option.label
+            },
+            option.value
+          )) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "h-48", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 p-2 pr-3", children: minutes.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              size: "sm",
+              variant: minute === option.value ? "default" : "ghost",
+              className: "shrink-0 basis-auto",
+              disabled: option.disabled,
+              onClick: () => {
+                setMinute(option.value);
+                handleTimeChange(hour, option.value, ampm);
+              },
+              children: option.label
+            },
+            option.value
+          )) }) }),
+          use12HourFormat && /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "h-48", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 p-2 pr-3", children: ampmOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              size: "sm",
+              variant: ampm === option.value ? "default" : "ghost",
+              className: "shrink-0 basis-auto",
+              disabled: option.disabled,
+              onClick: () => {
+                setAmpm(option.value);
+                handleTimeChange(hour, minute, option.value);
+              },
+              children: option.label
+            },
+            option.value
+          )) }) })
+        ] }) })
+      ]
+    }
+  ) });
+}
+
+exports.TimePicker = TimePicker;
+//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=time-picker.js.map

package/dist/common/interactive/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/time-picker.tsx"],"names":["useMemo","hours","minutes","useCallback","hour","useState","React","format","error","disabled","isBefore","startOfMinute","isAfter","jsxs","jsx","CloseCircleFilledIcon","ClockOutlinedIcon","cn","Popover","PopoverTrigger","Input","PopoverContent","ScrollArea","Button"],"mappings":"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","file":"time-picker.js","sourcesContent":["'use client';\n\nimport { format, isAfter, isBefore, startOfMinute } from 'date-fns';\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { ClockOutlinedIcon, CloseCircleFilledIcon } from '@/icons';\nimport { Button } from '../../components/button';\nimport { Input } from '../../components/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';\nimport { ScrollArea } from '../../components/scroll-area';\nimport { cn } from '../../lib/utils';\n\ninterface TimeOption {\n  value: number;\n  label: string;\n  disabled: boolean;\n}\n\nconst AM_VALUE = 0;\nconst PM_VALUE = 1;\n\nfunction buildTime({\n  use12HourFormat,\n  value,\n  hour,\n  minute,\n  ampm,\n}: {\n  use12HourFormat?: boolean;\n  value: Date;\n  hour: number;\n  minute: number;\n  ampm: number;\n}): Date | null {\n  try {\n    if (isNaN(value.getTime())) {\n      throw new Error('Invalid base date');\n    }\n\n    const newTime = new Date(value);\n\n    // Handle 12 AM (midnight) and 12 PM (noon) in 12-hour format\n    if (use12HourFormat) {\n      if (hour === 12) {\n        newTime.setHours(ampm === AM_VALUE ? 0 : 12, minute, 0, 0);\n      } else {\n        newTime.setHours(hour + ampm * 12, minute, 0, 0);\n      }\n    } else {\n      newTime.setHours(hour, minute, 0, 0);\n    }\n\n    return newTime;\n  } catch (error) {\n    // Error building time - return null to indicate failure\n    return null;\n  }\n}\n\nexport interface TimePickerProps {\n  /**\n   * The selected time value in HH:mm format (24-hour)\n   */\n  value?: string;\n  /**\n   * Callback when time is selected\n   * Returns time string in HH:mm format\n   */\n  onChange: (time: string) => void;\n  /**\n   * Use 12-hour format with AM/PM\n   */\n  use12HourFormat?: boolean;\n  /**\n   * Minimum selectable time\n   */\n  min?: Date;\n  /**\n   * Maximum selectable time\n   */\n  max?: Date;\n  /**\n   * Step interval for minutes (e.g., 15 for 15-minute intervals)\n   * Default is 1 (show all minutes)\n   */\n  minuteStep?: number;\n  /**\n   * Whether the time picker is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Custom className for the component\n   */\n  className?: string;\n  /**\n   * Whether to render the popover as a modal\n   */\n  modal?: boolean;\n  /**\n   * Placeholder text for the input\n   */\n  placeholder?: string;\n  /**\n   * Error state\n   */\n  error?: boolean;\n  /**\n   * Label for the input\n   */\n  label?: string;\n  /**\n   * Helper text below the input\n   */\n  helperText?: string;\n  /**\n   * Custom className for helper text\n   */\n  helperTextClass?: string;\n  /**\n   * Size variant of the input\n   */\n  size?: 'default' | 'lg';\n  /**\n   * Whether to show remove icon when there's a value\n   */\n  hasRemoveIcon?: boolean;\n  /**\n   * Callback when clear button is clicked\n   */\n  onClearValue?: () => void;\n}\n\nexport function TimePicker({\n  value,\n  onChange,\n  use12HourFormat = false,\n  min,\n  max,\n  minuteStep = 1,\n  disabled,\n  modal,\n  label = 'Chọn thời gian',\n  className,\n  error,\n  helperText,\n  helperTextClass,\n  size = 'default',\n  hasRemoveIcon = true,\n  onClearValue,\n  ...props\n}: TimePickerProps) {\n  // Convert string value to Date for internal processing\n  const internalValue = useMemo(() => {\n    const today = new Date();\n    if (!value) {\n      today.setHours(0, 0, 0, 0);\n      return today;\n    }\n\n    try {\n      const parts = value.split(':');\n      if (parts.length !== 2 || !parts[0] || !parts[1]) {\n        today.setHours(0, 0, 0, 0);\n        return today;\n      }\n\n      const hours = parseInt(parts[0], 10);\n      const minutes = parseInt(parts[1], 10);\n\n      if (\n        isNaN(hours) ||\n        isNaN(minutes) ||\n        hours < 0 ||\n        hours > 23 ||\n        minutes < 0 ||\n        minutes > 59\n      ) {\n        today.setHours(0, 0, 0, 0);\n        return today;\n      }\n      today.setHours(hours, minutes, 0, 0);\n      return today;\n    } catch {\n      today.setHours(0, 0, 0, 0);\n      return today;\n    }\n  }, [value]);\n\n  const getAmPm = useCallback(() => {\n    return internalValue.getHours() >= 12 ? PM_VALUE : AM_VALUE;\n  }, [internalValue]);\n\n  const getHour = useCallback(() => {\n    if (use12HourFormat) {\n      const hour = internalValue.getHours();\n      if (hour === 0) return 12;\n      if (hour > 12) return hour - 12;\n      return hour;\n    }\n    return internalValue.getHours();\n  }, [internalValue, use12HourFormat]);\n\n  const getMinute = useCallback(() => {\n    return internalValue.getMinutes();\n  }, [internalValue]);\n\n  const [ampm, setAmpm] = useState<number>(() => getAmPm());\n  const [hour, setHour] = useState<number>(() => getHour());\n  const [minute, setMinute] = useState<number>(() => getMinute());\n\n  const [open, setOpen] = React.useState(false);\n\n  const handleTimeChange = useCallback(\n    (newHour: number, newMinute: number, newAmpm: number) => {\n      try {\n        const newTime = buildTime({\n          use12HourFormat,\n          value: internalValue,\n          hour: newHour,\n          minute: newMinute,\n          ampm: newAmpm,\n        });\n        if (newTime) {\n          onChange(format(newTime, 'HH:mm'));\n        }\n      } catch (error) {\n        // Error updating time - ignore silently\n      }\n    },\n    [use12HourFormat, internalValue, onChange],\n  );\n\n  const handleClockIconClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setOpen(true);\n  };\n\n  const hasValue = !!value;\n\n  const iconSizeClasses = {\n    default: 'h-5 w-5',\n    lg: 'h-5 w-5',\n  };\n\n  // Generate hour options\n  const hours = useMemo(() => {\n    const _hours: TimeOption[] = [];\n    const startHour = use12HourFormat ? 1 : 0;\n    const endHour = use12HourFormat ? 12 : 23;\n\n    for (let i = startHour; i <= endHour; i++) {\n      const testDate = new Date(internalValue);\n      const hourIn24 = use12HourFormat\n        ? i === 12\n          ? ampm === AM_VALUE\n            ? 0\n            : 12\n          : i + ampm * 12\n        : i;\n      testDate.setHours(hourIn24, minute, 0, 0);\n\n      const disabled =\n        (min && isBefore(testDate, startOfMinute(min))) ||\n        (max && isAfter(testDate, startOfMinute(max)));\n\n      _hours.push({\n        value: i,\n        label: use12HourFormat ? i.toString() : i.toString().padStart(2, '0'),\n        disabled: disabled || false,\n      });\n    }\n    return _hours;\n  }, [use12HourFormat, ampm, internalValue, minute, min, max]);\n\n  // Generate minute options\n  const minutes = useMemo(() => {\n    const _minutes: TimeOption[] = [];\n    const _hourIn24h = use12HourFormat\n      ? hour === 12\n        ? ampm === AM_VALUE\n          ? 0\n          : 12\n        : hour + ampm * 12\n      : hour;\n\n    for (let i = 0; i < 60; i += minuteStep) {\n      const testDate = new Date(internalValue);\n      testDate.setHours(_hourIn24h, i, 0, 0);\n\n      const disabled = (min && isBefore(testDate, min)) || (max && isAfter(testDate, max));\n\n      _minutes.push({\n        value: i,\n        label: i.toString().padStart(2, '0'),\n        disabled: disabled || false,\n      });\n    }\n    return _minutes;\n  }, [hour, ampm, use12HourFormat, internalValue, min, max, minuteStep]);\n\n  // Generate AM/PM options\n  const ampmOptions = useMemo(() => {\n    if (!use12HourFormat) return [];\n\n    const testAM = new Date(internalValue);\n    const testPM = new Date(internalValue);\n    testAM.setHours(hour === 12 ? 0 : hour, minute, 0, 0);\n    testPM.setHours(hour === 12 ? 12 : hour + 12, minute, 0, 0);\n\n    return [\n      {\n        value: AM_VALUE,\n        label: 'AM',\n        disabled: (max && isAfter(testAM, max)) || (min && isBefore(testAM, min)),\n      },\n      {\n        value: PM_VALUE,\n        label: 'PM',\n        disabled: (max && isAfter(testPM, max)) || (min && isBefore(testPM, min)),\n      },\n    ];\n  }, [use12HourFormat, internalValue, hour, minute, min, max]);\n\n  const displayTime = () => {\n    if (!value) return '';\n    try {\n      return use12HourFormat ? format(internalValue, 'hh:mm a') : value;\n    } catch {\n      return '';\n    }\n  };\n\n  const handleClearValue = () => {\n    onChange('');\n    onClearValue?.();\n  };\n\n  const buttonIcon = useMemo(\n    () => (\n      <div className=\"flex items-center\">\n        {/* Always reserve space for remove icon to maintain consistent width */}\n        <div className=\"mr-1 flex h-5 w-5 items-center justify-center\">\n          {hasRemoveIcon && hasValue && !disabled && (\n            <CloseCircleFilledIcon\n              className=\"input-remove-icon cursor-pointer hover:opacity-70\"\n              onClick={handleClearValue}\n            />\n          )}\n        </div>\n        <ClockOutlinedIcon\n          className={cn('cursor-pointer opacity-50 hover:opacity-70', iconSizeClasses[size])}\n          onClick={handleClockIconClick}\n        />\n      </div>\n    ),\n    [\n      hasRemoveIcon,\n      hasValue,\n      disabled,\n      handleClearValue,\n      iconSizeClasses,\n      size,\n      handleClockIconClick,\n    ],\n  );\n\n  return (\n    <div className=\"w-full\">\n      <Popover\n        modal={false}\n        open={disabled ? false : open}\n        onOpenChange={disabled ? undefined : setOpen}\n      >\n        <PopoverTrigger asChild>\n          <div className=\"w-full\">\n            <Input\n              value={displayTime()}\n              placeholder={label}\n              disabled={disabled}\n              isError={error}\n              label={hasValue ? label : undefined}\n              helpText={helperText}\n              helpTextClassName={helperTextClass}\n              size={size}\n              showRemoveIcon={false}\n              onClearValue={handleClearValue}\n              buttonIcon={buttonIcon}\n              readOnly\n              className={cn(\n                'border-input bg-background focus:border-primary rounded-md border focus:outline-none',\n                {\n                  'border-destructive': error,\n                  'cursor-pointer': !disabled,\n                },\n                className,\n              )}\n              onClick={() => setOpen(true)}\n              {...props}\n            />\n          </div>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <div className=\"flex\">\n            <ScrollArea className=\"h-48\">\n              <div className=\"flex flex-col gap-1 p-2 pr-3\">\n                {hours.map((option) => (\n                  <Button\n                    key={option.value}\n                    size=\"sm\"\n                    variant={hour === option.value ? 'default' : 'ghost'}\n                    className=\"shrink-0 basis-auto\"\n                    disabled={option.disabled}\n                    onClick={() => {\n                      setHour(option.value);\n                      handleTimeChange(option.value, minute, ampm);\n                    }}\n                  >\n                    {option.label}\n                  </Button>\n                ))}\n              </div>\n            </ScrollArea>\n            <ScrollArea className=\"h-48\">\n              <div className=\"flex flex-col gap-1 p-2 pr-3\">\n                {minutes.map((option) => (\n                  <Button\n                    key={option.value}\n                    size=\"sm\"\n                    variant={minute === option.value ? 'default' : 'ghost'}\n                    className=\"shrink-0 basis-auto\"\n                    disabled={option.disabled}\n                    onClick={() => {\n                      setMinute(option.value);\n                      handleTimeChange(hour, option.value, ampm);\n                    }}\n                  >\n                    {option.label}\n                  </Button>\n                ))}\n              </div>\n            </ScrollArea>\n            {use12HourFormat && (\n              <ScrollArea className=\"h-48\">\n                <div className=\"flex flex-col gap-1 p-2 pr-3\">\n                  {ampmOptions.map((option) => (\n                    <Button\n                      key={option.value}\n                      size=\"sm\"\n                      variant={ampm === option.value ? 'default' : 'ghost'}\n                      className=\"shrink-0 basis-auto\"\n                      disabled={option.disabled}\n                      onClick={() => {\n                        setAmpm(option.value);\n                        handleTimeChange(hour, minute, option.value);\n                      }}\n                    >\n                      {option.label}\n                    </Button>\n                  ))}\n                </div>\n              </ScrollArea>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"]}