@deepnoid/ui 0.1.109 → 0.1.110

package/dist/components/{dateTimePicker/calendar.js → picker/index.js}

@@ -99,14 +99,16 @@ var require_plugin = __commonJS({
   }
 });
 
-// src/components/dateTimePicker/calendar.tsx
-var calendar_exports = {};
-__export(calendar_exports, {
-  calendarStyle: () => calendarStyle,
-  default: () => calendar_default
+// src/components/picker/index.ts
+var picker_exports = {};
+__export(picker_exports, {
+  TimePicker: () => timePicker_default
 });
-module.exports = __toCommonJS(calendar_exports);
-var import_react = __toESM(require("react"));
+module.exports = __toCommonJS(picker_exports);
+
+// src/components/picker/timePicker.tsx
+var import_react2 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
@@ -5010,201 +5012,742 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/dateTimePicker/util.ts
-var formatDateToString = (date) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-var formatStringToDate = (date) => {
-  const formattedDate = new Date(date);
-  return formattedDate;
-};
+// src/components/select/select.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
 
-// src/components/dateTimePicker/calendar.tsx
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/select/select.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Calendar = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
-  const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
-  const [currentDate, setCurrentDate] = (0, import_react.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
-  const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
+var Select = (0, import_react.forwardRef)((originalProps, ref) => {
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
+  const {
+    label,
+    options,
+    helperMessage,
+    errorMessage,
+    classNames,
+    defaultSelectedOptions,
+    onChange,
+    multiple,
+    ...inputProps
+  } = props;
+  const slots = (0, import_react.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(defaultSelectedOptions || []);
+  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const selectWrapperRef = (0, import_react.useRef)(null);
+  const optionWrapperRef = (0, import_react.useRef)(null);
+  const handleToggleSelect = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    } else {
+      if (selectWrapperRef.current) {
+        const rect = selectWrapperRef.current.getBoundingClientRect();
+        setTargetRect(rect);
+        setIsVisible(true);
+        requestAnimationFrame(() => setIsOpen(true));
+      }
+    }
+  };
+  const calculatePositionWithScroll = (rect, height) => {
+    const scrollTop = window.scrollY;
+    const scrollLeft = window.scrollX;
+    const spaceBelow = window.innerHeight - (rect.y + rect.height + 4);
+    const spaceAbove = rect.y - 4;
+    const top = spaceBelow < height && spaceAbove > height ? rect.y - height - 4 : rect.y + rect.height + 4;
+    return {
+      top: top + scrollTop,
+      left: rect.x + scrollLeft
+    };
+  };
+  const handleChangeOption = (option) => {
+    let nextOptions;
+    if (multiple) {
+      const exists = selectedOptions.some((o) => o.value === option.value);
+      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+    } else {
+      nextOptions = [option];
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    }
+    setSelectedOptions(nextOptions);
+    onChange == null ? void 0 : onChange(nextOptions);
+  };
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a2;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 150);
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, []);
   (0, import_react.useEffect)(() => {
-    if (selectedDate) {
-      setCurrentDate(new Date(selectedDate));
+    if (optionWrapperRef.current) {
+      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
-  }, [selectedDate]);
-  const getCalendarDates = (0, import_react.useCallback)(() => {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-    const firstDayOfMonth = new Date(year, month, 1).getDay();
-    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
-    const lastDateOfPrevMonth = new Date(year, month, 0).getDate();
-    let dates = [];
-    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
-      dates.push({
-        date: lastDateOfPrevMonth - i,
-        currentMonth: false
-      });
+  }, [targetRect]);
+  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  const Option = ({
+    option,
+    isSelected,
+    onClick
+  }) => {
+    const slot = select({ ...variantProps, isSelected });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        role: "option",
+        title: option.label,
+        onClick,
+        className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })),
+        children: [
+          option.label,
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: originalProps.size })
+        ]
+      }
+    );
+  };
+  const isControlled = originalProps.value !== void 0;
+  (0, import_react.useEffect)(() => {
+    if (isControlled) {
+      const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
+      const matchedOptions = options.filter((opt) => valueArray.includes(opt.value));
+      setSelectedOptions(matchedOptions);
+    }
+  }, [originalProps.value, options]);
+  (0, import_react.useEffect)(() => {
+    if (!isControlled && defaultSelectedOptions) {
+      setSelectedOptions(defaultSelectedOptions);
+    }
+  }, [defaultSelectedOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: clsx(
+          slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                "data-expanded": isOpen,
+                className: clsx(
+                  slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
+                  inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                ),
+                ref: selectWrapperRef,
+                onClick: handleToggleSelect,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      ...inputProps,
+                      ref,
+                      className: clsx(
+                        slots.select({ class: classNames == null ? void 0 : classNames.select }),
+                        inputProps.readOnly ? "!placeholder:text-body-foreground" : ""
+                      ),
+                      name: void 0,
+                      value: displayValue,
+                      readOnly: true,
+                      size: 0
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Icon_default,
+                    {
+                      name: "brace-up",
+                      size: originalProps.size,
+                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
+                    }
+                  )
+                ]
+              }
+            ),
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+          ] })
+        ]
+      }
+    ),
+    isVisible && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: optionWrapperRef,
+          role: "listbox",
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: position == null ? void 0 : position.top,
+            left: position == null ? void 0 : position.left,
+            width: targetRect == null ? void 0 : targetRect.width,
+            zIndex: 1e3,
+            opacity: isOpen ? 1 : 0,
+            transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
+            transition: "opacity 150ms ease-out, transform 150ms ease-out"
+          },
+          children: options.map((option) => {
+            const isSelected = selectedOptions.some((o) => o.value === option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Option,
+              {
+                option,
+                isSelected,
+                onClick: () => handleChangeOption(option)
+              },
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+Select.displayName = "Select";
+var select_default = Select;
+var select = tv({
+  slots: {
+    base: ["group/select", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    selectWrapper: [
+      "flex",
+      "items-center",
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/select:border-danger-main",
+      "group-has-[p.error]/select:bg-danger-soft",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:hover:bg-danger-soft"
+    ],
+    select: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-body-foreground",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:placeholder:text-danger-main"
+    ],
+    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
+    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    helperMessage: ["text-neutral-main"],
+    errorMessage: ["text-danger-main"],
+    readonly: ["pointer-events-none", "!bg-trans-soft"]
+  },
+  variants: {
+    color: {
+      primary: {
+        selectWrapper: ["text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"],
+        helperMessage: ["text-primary-main"]
+      },
+      secondary: {
+        selectWrapper: ["text-secondary-main"],
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"],
+        helperMessage: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        select: ["text-sm"],
+        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]", "rounded-md"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        select: ["text-md"],
+        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        select: ["text-lg"],
+        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        select: ["text-xl"],
+        option: ["px-[10px]", "py-[11.5px]"],
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
+      }
+    },
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        selectWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:bg-danger-soft",
+          "group-has-[p.error]/select:border-danger-light"
+        ],
+        select: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:placeholder:text-danger-light"
+        ],
+        helperMessage: ["!text-neutral-light"],
+        errorMessage: ["!text-danger-light"]
+      }
+    },
+    isSelected: {
+      true: "",
+      false: ""
     }
-    for (let date = 1; date <= lastDateOfMonth; date++) {
-      dates.push({
-        date,
-        currentMonth: true
-      });
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      isSelected: true,
+      class: {
+        option: "bg-primary-soft text-primary-main"
+      }
+    },
+    {
+      color: "secondary",
+      isSelected: true,
+      class: {
+        option: "bg-secondary-soft text-secondary-main"
+      }
     }
-    const remainingDays = 42 - dates.length;
-    for (let i = 1; i <= remainingDays; i++) {
-      dates.push({
-        date: i,
-        currentMonth: false
-      });
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
+});
+
+// src/components/picker/timePicker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
+  const {
+    classNames,
+    label,
+    errorMessage,
+    valueRange,
+    onChangeRange,
+    size,
+    selectClassNames,
+    placeholder = "",
+    ...inputProps
+  } = props;
+  const [selectedRange, setSelectedRange] = (0, import_react2.useState)(
+    valueRange || { start: "", end: "" }
+  );
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react2.useState)(false);
+  const inputWrapperRef = (0, import_react2.useRef)(null);
+  const panelWrapperRef = (0, import_react2.useRef)(null);
+  const [panelPos, setPanelPos] = (0, import_react2.useState)({ top: -9999, left: -9999 });
+  const displayValue = (0, import_react2.useMemo)(() => {
+    if (selectedRange.start && selectedRange.end) {
+      return `${selectedRange.start} ~ ${selectedRange.end}`;
     }
-    const weeks = [];
-    for (let i = 0; i < dates.length; i += 7) {
-      weeks.push(dates.slice(i, i + 7));
+    return "";
+  }, [selectedRange]);
+  const calculatePosition = (0, import_react2.useCallback)(() => {
+    if (inputWrapperRef.current) {
+      const rect = inputWrapperRef.current.getBoundingClientRect();
+      setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
     }
-    return weeks;
-  }, [currentDate]);
-  const handlePrevMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
+  }, []);
+  const handleFocusInput = () => {
+    calculatePosition();
+    setIsPanelOpen(true);
   };
-  const handleNextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+  const handleInputBlur = () => {
+    setTimeout(() => setIsPanelOpen(false), 150);
   };
-  const handleDateSelect = (date, isCurrentMonth) => {
-    if (!isCurrentMonth) return;
-    if (onChangeDate) {
-      const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
-      const formatted = formatDateToString(selected);
-      onChangeDate(formatted);
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      calculatePosition();
+      setIsPanelOpen((prev) => !prev);
+    } else if (e.key === "Escape") {
+      setIsPanelOpen(false);
     }
   };
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    getSelectedDate: () => selectedDate
-  }));
-  const slots = (0, import_react.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
-    }),
-    [slots, classNames]
-  );
-  const getDateTitleProps = (0, import_react.useCallback)(
-    (index) => {
-      return {
-        className: `${slots.dateTitle({
-          class: classNames == null ? void 0 : classNames.date
-        })}`,
-        "data-saturday": highlightWeekend && index === 6,
-        "data-sunday": highlightWeekend && index === 0
-      };
-    },
-    [slots, classNames, highlightWeekend]
-  );
-  const getDateProps = (0, import_react.useCallback)(
-    (dateObj) => {
-      const today = /* @__PURE__ */ new Date();
-      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
-      const formatted = selectedDate ? formatStringToDate(selectedDate) : "";
-      const isSelected = formatted ? formatted.getDate() === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear() : false;
-      const dayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date).getDay();
-      return {
-        className: `${slots.date({
-          class: classNames == null ? void 0 : classNames.date
-        })}`,
-        "data-today": dateObj.currentMonth && isToday,
-        "data-selected": dateObj.currentMonth && isSelected,
-        "data-disabled": !dateObj.currentMonth,
-        "data-saturday": highlightWeekend && dayOfWeek === 6,
-        "data-sunday": highlightWeekend && dayOfWeek === 0,
-        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
-      };
-    },
-    [slots, classNames, selectedDate, currentDate, highlightWeekend]
-  );
-  const calendarDates = getCalendarDates();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "calendar-header mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+  const slots = (0, import_react2.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
+  const renderHourOptions = () => {
+    return Array.from({ length: 24 }, (_, i) => {
+      const value = String(i).padStart(2, "0");
+      return { label: value, value };
+    });
+  };
+  const renderMinuteOptions = () => {
+    return Array.from({ length: 60 }, (_, i) => {
+      const value = String(i).padStart(2, "0");
+      return { label: value, value };
+    });
+  };
+  const defaultSelectClassNames = {
+    selectWrapper: "!w-[80px]",
+    optionsWrapper: "max-h-[300px]"
+  };
+  const handleRangeChange = (type, option) => {
+    const [shRaw, smRaw] = selectedRange.start.split(":");
+    const [ehRaw, emRaw] = selectedRange.end.split(":");
+    const sh = (shRaw != null ? shRaw : "00").padStart(2, "0");
+    const sm = (smRaw != null ? smRaw : "00").padStart(2, "0");
+    const eh = (ehRaw != null ? ehRaw : "00").padStart(2, "0");
+    const em = (emRaw != null ? emRaw : "00").padStart(2, "0");
+    const range = {
+      start: `${type === "startHour" ? option.value : sh}:${type === "startMinute" ? option.value : sm}`,
+      end: `${type === "endHour" ? option.value : eh}:${type === "endMinute" ? option.value : em}`
+    };
+    setSelectedRange(range);
+    onChangeRange == null ? void 0 : onChangeRange(range);
+  };
+  const mergedSelectClassNames = {
+    selectWrapper: (selectClassNames == null ? void 0 : selectClassNames.selectWrapper) || defaultSelectClassNames.selectWrapper,
+    optionsWrapper: (selectClassNames == null ? void 0 : selectClassNames.optionsWrapper) || defaultSelectClassNames.optionsWrapper
+  };
+  const getSelectValue = (timeString, part) => {
+    if (!timeString) return "00";
+    const [hour, minute] = timeString.split(":");
+    return part === "hour" ? hour || "00" : minute || "00";
+  };
+  const handleClearRange = () => {
+    const emptyRange = { start: "", end: "" };
+    setSelectedRange(emptyRange);
+    onChangeRange == null ? void 0 : onChangeRange(emptyRange);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+              type: "text",
+              value: displayValue,
+              placeholder,
+              readOnly: true,
+              onFocus: handleFocusInput,
+              onBlur: handleInputBlur,
+              onKeyDown: handleInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Icon_default,
+              {
+                name: "close",
+                className: "text-neutral-light hover:text-neutral-main mr-[5px] cursor-pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClearRange();
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Icon_default,
+              {
+                name: "clock",
+                className: "cursor-pointer",
+                onClick: () => {
+                  calculatePosition();
+                  setIsPanelOpen((v) => !v);
+                }
+              }
+            )
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }), children: errorMessage })
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-2 grid grid-cols-7 gap-[5px] text-center", children: calendarDates.map((week, weekIndex) => {
-      const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
-      if (!hasCurrentMonthDates) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.default.Fragment, { children: week.map((dateObj, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
-      }) }, weekIndex);
-    }) })
-  ] }) });
+    isPanelOpen && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          ref: panelWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: panelPos.top,
+            left: panelPos.left,
+            zIndex: 1e3
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                select_default,
+                {
+                  options: renderHourOptions(),
+                  value: getSelectValue(selectedRange.start, "hour"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("startHour", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                select_default,
+                {
+                  options: renderMinuteOptions(),
+                  value: getSelectValue(selectedRange.start, "minute"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("startMinute", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "~" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                select_default,
+                {
+                  options: renderHourOptions(),
+                  value: getSelectValue(selectedRange.end, "hour"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("endHour", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                select_default,
+                {
+                  options: renderMinuteOptions(),
+                  value: getSelectValue(selectedRange.end, "minute"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("endMinute", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    )
+  ] });
 });
-Calendar.displayName = "Calendar";
-var calendar_default = Calendar;
-var calendarStyle = tv({
+TimePicker.displayName = "TimePicker";
+var timePicker_default = TimePicker;
+var timePickerStyle = tv({
   slots: {
-    base: [
-      "flex",
-      "flex-col",
-      "w-[240px]",
-      "border",
-      "border-neutral-main",
-      "bg-background",
-      "rounded-md",
-      "p-4",
-      "shadow-lg",
-      "select-none"
-    ],
-    dateTitle: ["text-sm", "font-[500]", "data-[saturday=true]:text-[#1E7EEE]", "data-[sunday=true]:text-[#FF4684]"],
-    date: [
+    base: ["group/timepicker", "flex", "flex-col"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    inputWrapper: [
       "flex",
-      "justify-center",
       "items-center",
-      "h-[25px]",
-      "text-sm",
-      "rounded-full",
+      "justify-between",
+      "border",
       "cursor-pointer",
-      "hover:bg-neutral-soft",
-      "data-[today=true]:border",
-      "data-[today=true]:border-foreground",
-      "data-[saturday=true]:text-[#1E7EEE]",
-      "data-[saturday=true]:!border-[#1E7EEE]",
-      "data-[sunday=true]:text-[#FF4684]",
-      "data-[sunday=true]:!border-[#FF4684]",
-      "data-[selected=true]:!text-white",
-      "data-[selected=true]:border-none",
-      "data-[disabled=true]:!text-neutral-main",
-      "data-[disabled=true]:cursor-default",
-      "data-[disabled=true]:hover:bg-transparent"
-    ]
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/input:border-danger-main",
+      "group-has-[p.error]/input:bg-danger-soft",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:hover:bg-danger-soft"
+    ],
+    input: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-body-foreground",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main",
+      "cursor-pointer"
+    ],
+    icon: ["flex", "items-center", "select-none", "text-body-foreground", "group-has-[p.error]/input:text-danger-main"],
+    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
+    errorMessage: ["text-danger-main", "mt-1", "text-sm"],
+    selectWrapper: []
   },
   variants: {
-    variant: {
-      solid: {}
-    },
     color: {
       primary: {
-        date: ["data-[selected=true]:!border-primary-main", "data-[selected=true]:bg-primary-main"]
+        icon: ["text-primary-main"]
       },
       secondary: {
-        date: ["data-[selected=true]:!border-secondary-main", "data-[selected=true]:bg-secondary-main"]
+        icon: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        input: ["text-sm"],
+        icon: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        input: ["text-md"],
+        icon: ["text-md"],
+        errorMessage: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        input: ["text-lg"],
+        icon: ["text-lg"],
+        errorMessage: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        input: ["text-xl"],
+        icon: ["text-xl"],
+        errorMessage: ["text-md"]
+      }
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        label: ["text-neutral-light"],
+        inputWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:bg-danger-soft",
+          "group-has-[p.error]/input:border-danger-light",
+          "cursor-not-allowed"
+        ],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light",
+          "cursor-not-allowed"
+        ],
+        icon: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
       }
     }
   },
   defaultVariants: {
-    variant: "solid",
-    color: "primary"
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      isRequired: true,
-      class: {}
-    }
-  ]
+    color: "primary",
+    size: "md",
+    full: false,
+    disabled: false
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  calendarStyle
+  TimePicker
 });