@deepnoid/ui 0.1.109 → 0.1.110

package/dist/components/{dateTimePicker/dateTimePicker.js → picker/timePicker.js}

@@ -99,15 +99,15 @@ var require_plugin = __commonJS({
   }
 });
 
-// src/components/dateTimePicker/dateTimePicker.tsx
-var dateTimePicker_exports = {};
-__export(dateTimePicker_exports, {
-  dateTimePickerStyle: () => dateTimePickerStyle,
-  default: () => dateTimePicker_default
+// src/components/picker/timePicker.tsx
+var timePicker_exports = {};
+__export(timePicker_exports, {
+  default: () => timePicker_default,
+  timePickerStyle: () => timePickerStyle
 });
-module.exports = __toCommonJS(dateTimePicker_exports);
-var import_react7 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
+module.exports = __toCommonJS(timePicker_exports);
+var import_react2 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
@@ -369,99 +369,6 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/dateTimePicker/useDateTimePicker.tsx
-var import_react = require("react");
-
-// 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/dateTimePicker/useDateTimePicker.tsx
-var useDatePicker = ({ initialDate, initialTime }) => {
-  const [selectedDate, setSelectedDate] = (0, import_react.useState)(
-    initialDate ? formatDateToString(initialDate) : ""
-  );
-  const [selectedTime, setSelectedTime] = (0, import_react.useState)(initialTime ? initialTime : "");
-  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
-  const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
-  const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
-  const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
-  const dateInputRef = (0, import_react.useRef)(null);
-  const datePickerWrapperRef = (0, import_react.useRef)(null);
-  const datePickerRef = (0, import_react.useRef)(null);
-  const DATE_PICKER_GAP = 4;
-  const calculatePositionWithScroll = (targetRect2) => {
-    if (targetRect2 && popupWidth && popupHeight) {
-      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
-      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
-      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
-      return {
-        top: top + scrollTop,
-        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-      };
-    }
-  };
-  const handleToggleDatePicker = () => {
-    if (datePickerRef.current) {
-      const rect = datePickerRef.current.getBoundingClientRect();
-      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
-  const handleChangeDate = (date) => {
-    setSelectedDate(date);
-  };
-  const handleChangeTime = (time) => {
-    setSelectedTime(time);
-  };
-  const handleFocusInput = () => {
-    setIsFocusInput(true);
-  };
-  const handleBlueInput = () => {
-    setIsFocusInput(false);
-  };
-  (0, import_react.useEffect)(() => {
-    const onClickOutside = (e) => {
-      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
-        setTargetRect(null);
-      }
-    };
-    window.addEventListener("mousedown", onClickOutside);
-    return () => window.removeEventListener("mousedown", onClickOutside);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (datePickerWrapperRef.current) {
-      setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
-      setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
-    }
-  }, [targetRect]);
-  return {
-    selectedDate,
-    selectedTime,
-    targetRect,
-    popupHeight,
-    isFocusInput,
-    dateInputRef,
-    datePickerWrapperRef,
-    datePickerRef,
-    handleToggleDatePicker,
-    handleChangeDate,
-    handleChangeTime,
-    handleFocusInput,
-    handleBlueInput,
-    calculatePositionWithScroll
-  };
-};
-
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
@@ -5104,936 +5011,742 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/dateTimePicker/calendar.tsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Calendar = (0, import_react2.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
-  const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
-  const [currentDate, setCurrentDate] = (0, import_react2.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
-  const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  (0, import_react2.useEffect)(() => {
-    if (selectedDate) {
-      setCurrentDate(new Date(selectedDate));
-    }
-  }, [selectedDate]);
-  const getCalendarDates = (0, import_react2.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
-      });
-    }
-    for (let date = 1; date <= lastDateOfMonth; date++) {
-      dates.push({
-        date,
-        currentMonth: true
-      });
+// src/components/select/select.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// 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;
+      }
     }
-    const remainingDays = 42 - dates.length;
-    for (let i = 1; i <= remainingDays; i++) {
-      dates.push({
-        date: i,
-        currentMonth: false
-      });
+  }
+  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;
+        }
+      }
     }
-    const weeks = [];
-    for (let i = 0; i < dates.length; i += 7) {
-      weeks.push(dates.slice(i, i + 7));
+  }
+  return str;
+}
+
+// src/components/select/select.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+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));
+      }
     }
-    return weeks;
-  }, [currentDate]);
-  const handlePrevMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
   };
-  const handleNextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+  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 handleDateSelect = (date, isCurrentMonth) => {
-    if (!isCurrentMonth) return;
-    if (onChangeDate) {
-      const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
-      const formatted = formatDateToString(selected);
-      onChangeDate(formatted);
+  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_react2.useImperativeHandle)(ref, () => ({
-    getSelectedDate: () => selectedDate
-  }));
-  const slots = (0, import_react2.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
-    }),
-    [slots, classNames]
-  );
-  const getDateTitleProps = (0, import_react2.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_react2.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 })
-    ] }),
-    /* @__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_react2.default.Fragment, { children: week.map((dateObj, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
-      }) }, weekIndex);
-    }) })
-  ] }) });
-});
-Calendar.displayName = "Calendar";
-var calendar_default = Calendar;
-var calendarStyle = 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: [
-      "flex",
-      "justify-center",
-      "items-center",
-      "h-[25px]",
-      "text-sm",
-      "rounded-full",
-      "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"
-    ]
-  },
-  variants: {
-    variant: {
-      solid: {}
-    },
-    color: {
-      primary: {
-        date: ["data-[selected=true]:!border-primary-main", "data-[selected=true]:bg-primary-main"]
-      },
-      secondary: {
-        date: ["data-[selected=true]:!border-secondary-main", "data-[selected=true]:bg-secondary-main"]
+  (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 (optionWrapperRef.current) {
+      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary"
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      isRequired: true,
-      class: {}
-    }
-  ]
-});
-
-// src/components/dateTimePicker/timePicker.tsx
-var import_react6 = require("react");
-
-// src/components/list/list.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var List = (0, import_react3.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
-  const { children, classNames } = props;
-  const slots = (0, import_react3.useMemo)(() => listStyle(variantProps), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react3.Children.map(children, (child) => {
-    if (!(0, import_react3.isValidElement)(child)) return child;
-    return (0, import_react3.cloneElement)(child, {
-      ...variantProps,
-      ...child.props
-    });
-  }) });
-});
-List.displayName = "List";
-var list_default = List;
-var listStyle = tv({
-  slots: {
-    base: ["flex", "flex-col"]
-  },
-  variants: {
-    variant: {
-      solid: {},
-      outline: {}
-    },
-    size: {
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {}
-    },
-    color: {
-      primary: {},
-      secondary: {},
-      neutral: {}
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md"
-  }
-});
-
-// src/components/list/listItem.tsx
-var import_react5 = require("react");
-
-// src/components/avatar/avatar.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Avatar = (0, import_react4.forwardRef)(
-  ({ variant = "square", size = "md", classNames, ...rest }, ref) => {
-    const SVGIcon = template["avatar"];
-    const slots = (0, import_react4.useMemo)(() => avatarStyle({ variant, size }), [variant, size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SVGIcon, { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), ...rest }) });
-  }
-);
-Avatar.displayName = "Avatar";
-var avatar_default = Avatar;
-var avatarStyle = tv({
-  slots: {
-    base: ["w-fit", "h-fit", "flex", "items-center", "justify-center", "bg-neutral-soft", "overflow-hidden"],
-    content: []
-  },
-  variants: {
-    variant: {
-      square: {},
-      round: {}
-    },
-    size: {
-      sm: {
-        base: ["size-[20px]", "min-w-[20px]", "min-h-[20px]", "rounded-sm"]
-      },
-      md: {
-        base: ["size-[30px]", "min-w-[30px]", "min-h-[30px]", "rounded-md"]
-      },
-      lg: {
-        base: ["size-[40px]", "min-w-[40px]", "min-h-[40px]", "rounded-lg"]
-      },
-      xl: {
-        base: ["size-[50px]", "min-w-[50px]", "min-h-[50px]", "rounded-xl"]
+  }, [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);
     }
-  },
-  compoundVariants: [
-    {
-      variant: "round",
-      size: ["sm", "md", "lg", "xl"],
-      className: {
-        base: ["rounded-full"]
-      }
+  }, [originalProps.value, options]);
+  (0, import_react.useEffect)(() => {
+    if (!isControlled && defaultSelectedOptions) {
+      setSelectedOptions(defaultSelectedOptions);
     }
-  ],
-  defaultVariants: {
-    variant: "square",
-    size: "md"
-  }
-});
-
-// src/components/list/listItem.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ListItem = (0, import_react5.forwardRef)((props, ref) => {
-  const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
-  const {
-    title,
-    subTitle,
-    size = "md",
-    avatar,
-    startIconName,
-    selected,
-    classNames,
-    onClick
-  } = { ...rawProps, ...variantProps };
-  const slots = (0, import_react5.useMemo)(() => listItemStyle(variantProps), [variantProps]);
-  const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
-  const avatarSize = iconSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      avatar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(avatar_default, { ...avatar, variant: "round", size: avatarSize }),
-      startIconName && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon_default, { name: startIconName, fill: true, size, className: slots.startIcon({ class: classNames == null ? void 0 : classNames.startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-        subTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle }), children: subTitle })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon_default, { name: "right-chevron", size: iconSize, className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) })
+  }, [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
+    )
   ] });
 });
-ListItem.displayName = "ListItem";
-var listItem_default = ListItem;
-var listItemStyle = tv({
+Select.displayName = "Select";
+var select_default = Select;
+var select = tv({
   slots: {
-    base: [
-      "group",
-      "w-full",
+    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",
-      "justify-between",
       "items-center",
-      "gap-[10px]",
-      "bg-transparent",
-      "p-[10px]",
+      "justify-between",
+      "border",
       "cursor-pointer",
-      "select-none"
+      "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"
     ],
-    wrapper: ["flex", "w-full", "items-center", "gap-[10px]", "flex-1", "min-w-0"],
-    startIcon: ["fill-neutral-dark"],
-    titleWrapper: ["flex", "flex-col", "overflow-hidden", "whitespace-nowrap", "text-overflow-ellipsis"],
-    title: ["text-neutral-dark", "font-bold", "truncate"],
-    subTitle: ["text-neutral-main", "truncate"],
-    icon: ["stroke-neutral-dark"]
+    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: {
-    variant: {
-      solid: {},
-      outline: {}
+    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: ["min-h-[40px]", "rounded-sm", "!border-sm"],
-        title: ["text-sm"],
-        subTitle: ["text-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: ["min-h-[45px]", "rounded-md", "!border-md"],
-        title: ["text-md"],
-        subTitle: ["text-sm"]
+        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: ["min-h-[50px]", "rounded-lg", "!border-lg"],
-        title: ["text-lg"],
-        subTitle: ["text-md"]
+        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: ["min-h-[55px]", "rounded-xl", "!border-xl"],
-        title: ["text-xl"],
-        subTitle: ["text-md"]
+        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"]
       }
     },
-    color: {
-      primary: {},
-      secondary: {},
-      neutral: {}
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
+      }
     },
     disabled: {
       true: {
-        base: [
-          "!bg-transparent",
-          "!cursor-not-allowed",
-          "!opacity-disabled",
-          "!pointer-events-none",
-          "!data-[selected=true]:bg-transparent"
+        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"
         ],
-        startIcon: ["!fill-neutral-light"],
-        title: ["!text-neutral-light"],
-        subTitle: ["!text-neutral-light"],
-        icon: ["!stroke-neutral-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: ""
     }
   },
   compoundVariants: [
     {
-      variant: ["solid", "outline"],
-      class: {
-        base: ["border", "border-transparent"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "primary",
-      class: {
-        base: ["data-[selected=true]:bg-primary-soft"],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-primary-main"],
-        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-primary-main"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-primary-main"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "secondary",
-      class: {
-        base: ["data-[selected=true]:bg-secondary-soft"],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-secondary-main"],
-        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-secondary-main"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-secondary-main"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      class: {
-        base: ["data-[selected=true]:bg-neutral-soft"],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong", "group-hover:fill-neutral-strong"],
-        title: ["group-data-[selected=true]:text-neutral-strong", "group-hover:text-neutral-strong"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong", "group-hover:stroke-neutral-strong"]
-      }
-    },
-    {
-      variant: "outline",
       color: "primary",
+      isSelected: true,
       class: {
-        base: [
-          "data-[selected=true]:border-primary-main",
-          "data-[selected=true]:bg-primary-soft",
-          "hover:border-primary-light"
-        ],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
-        title: ["group-data-[selected=true]:text-neutral-strong"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
+        option: "bg-primary-soft text-primary-main"
       }
     },
     {
-      variant: "outline",
       color: "secondary",
+      isSelected: true,
       class: {
-        base: [
-          "group-data-[selected=true]:border-secondary-main",
-          "group-data-[selected=true]:bg-secondary-soft",
-          "group-hover:border-secondary-light"
-        ],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
-        title: ["group-data-[selected=true]:text-neutral-strong"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "neutral",
-      class: {
-        base: [
-          "group-data-[selected=true]:border-neutral-main",
-          "group-data-[selected=true]:bg-neutral-soft",
-          "group-hover:border-neutral-light"
-        ],
-        startIcon: ["group-data-[selected=true]:fill-neutral-strong"],
-        title: ["group-data-[selected=true]:text-neutral-strong"],
-        subTitle: ["group-data-[selected=true]:text-neutral-strong"],
-        icon: ["group-data-[selected=true]:stroke-neutral-strong"]
+        option: "bg-secondary-soft text-secondary-main"
       }
     }
   ],
   defaultVariants: {
-    variant: "solid",
     color: "primary",
-    size: "md"
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
   }
 });
 
-// src/components/dateTimePicker/timePicker.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
-  const TOTAL_HOURS = 12;
-  const TOTAL_MINUTES = 60;
-  const ITEM_HEIGHT = 30;
-  const PERIODS = ["AM", "PM"];
-  const [selectedHour, setSelectedHour] = (0, import_react6.useState)("01");
-  const [selectedMinute, setSelectedMinute] = (0, import_react6.useState)("00");
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react6.useState)("AM");
-  const hourRef = (0, import_react6.useRef)(null);
-  const minuteRef = (0, import_react6.useRef)(null);
-  const periodRef = (0, import_react6.useRef)(null);
-  const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
-  const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
-  (0, import_react6.useEffect)(() => {
-    if (selectedTime) {
-      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
-      setSelectedHour(formattedHour);
-      setSelectedMinute(minute);
-      setSelectedPeriod(period);
-    }
-    if (isFocusInput) {
-      scrollToSelectedTime();
-    }
-  }, [selectedTime, isFocusInput]);
-  (0, import_react6.useEffect)(() => {
-    scrollToSelectedTime();
-  }, []);
-  const parseAndFormatTime = (time) => {
-    const [hour, minute] = time.split(":").map((part) => part.padStart(2, "0"));
-    const parsedHour = parseInt(hour, 10);
-    const period = parsedHour >= 12 ? "PM" : "AM";
-    const formattedHour = parsedHour % 12 === 0 ? "12" : (parsedHour % 12).toString().padStart(2, "0");
-    return { formattedHour, minute, period };
-  };
-  const scrollToSelectedTime = () => {
-    if (selectedTime) {
-      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
-      if (hourRef.current) {
-        hourRef.current.scrollTop = (parseInt(formattedHour) - 1) * ITEM_HEIGHT;
-      }
-      if (minuteRef.current) {
-        minuteRef.current.scrollTop = parseInt(minute) * ITEM_HEIGHT;
-      }
-      if (periodRef.current) {
-        periodRef.current.scrollTop = period === "AM" ? 0 : ITEM_HEIGHT;
-      }
-    }
-  };
-  const handleTimeChange = (hour, minute, period) => {
-    const parsedHour = parseInt(hour);
-    let hour24 = parsedHour;
-    if (period === "PM" && parsedHour !== 12) {
-      hour24 = parsedHour + 12;
-    } else if (period === "AM" && parsedHour === 12) {
-      hour24 = 0;
-    }
-    const formattedTime = `${hour24.toString().padStart(2, "0")}:${minute}`;
-    if (onChangeTime) {
-      onChangeTime(formattedTime);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      listItem_default,
-      {
-        color,
-        selected: period === selectedPeriod,
-        title: period,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(selectedHour, selectedMinute, period);
-        }
-      },
-      `${period}-${index}`
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      listItem_default,
-      {
-        color,
-        selected: hour === selectedHour,
-        title: hour,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(hour, selectedMinute, selectedPeriod);
-        }
-      },
-      `${hour}-${index}`
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      listItem_default,
-      {
-        color,
-        selected: minute === selectedMinute,
-        title: minute,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(selectedHour, minute, selectedPeriod);
-        }
-      },
-      `${minute}-${index}`
-    )) })
-  ] });
-};
-var timePicker_default = TimePicker;
-
-// src/components/dateTimePicker/dateTimePicker.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
+// 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,
-    startContent,
-    endContent,
-    type = "date",
-    value,
-    onChangeDate,
-    onChangeTime,
+    valueRange,
+    onChangeRange,
+    size,
+    selectClassNames,
+    placeholder = "",
     ...inputProps
   } = props;
-  const slots = (0, import_react7.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
-  const {
-    selectedDate,
-    selectedTime,
-    targetRect,
-    popupHeight,
-    isFocusInput,
-    datePickerRef,
-    dateInputRef,
-    datePickerWrapperRef,
-    handleToggleDatePicker,
-    handleChangeDate,
-    handleChangeTime,
-    handleFocusInput,
-    handleBlueInput,
-    calculatePositionWithScroll
-  } = useDatePicker({
-    initialDate: typeof value === "string" ? new Date(value) : void 0,
-    initialTime: typeof value === "string" ? value : void 0
-  });
-  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
-  const getBaseProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
+  const [selectedRange, setSelectedRange] = (0, import_react2.useState)(
+    valueRange || { start: "", end: "" }
   );
-  const getInputWrapperProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
-      ref: datePickerRef
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = (0, import_react7.useCallback)(
-    () => ({
-      ...inputProps,
-      ref: ref || dateInputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0,
-      type,
-      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
-      onChange: (e) => {
-        if (type === "date") {
-          handleChangeDate(e.target.value);
-          if (onChangeDate) {
-            onChangeDate(e.target.value);
-          }
-        } else if (type === "time") {
-          handleChangeTime(e.target.value);
-          if (onChangeTime) {
-            onChangeTime(e.target.value);
-          }
-        }
-      },
-      onFocus: (e) => {
-        handleFocusInput();
-      },
-      onBlur: (e) => {
-        handleBlueInput();
-      },
-      max: "9999-12-31"
-    }),
-    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
-  );
-  const getContentProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
-      size: originalProps.size
-    }),
-    [slots, classNames, originalProps.size]
-  );
-  const getErrorMessageProps = (0, import_react7.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
-  const renderStartContent = () => {
-    if (import_react7.default.isValidElement(startContent)) {
-      const existingProps = startContent.props;
-      const mergedProps = {
-        ...getContentProps(),
-        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
-      };
-      return import_react7.default.cloneElement(startContent, mergedProps);
-    } else {
-      const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...contentProps, children: startContent });
+  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 renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Icon_default,
-    {
-      name: type === "time" ? "clock" : "calendar",
-      size: originalProps.size,
-      className: "cursor-pointer",
-      fill: type === "date"
-    }
-  ) });
-  const renderContentWithIcon = () => {
-    if (import_react7.default.isValidElement(endContent)) {
-      const existingProps = endContent.props;
-      const mergedProps = {
-        ...getContentProps(),
-        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
-      };
-      return import_react7.default.cloneElement(endContent, mergedProps);
-    } else if (errorMessage) {
-      const iconProps = { ...getContentProps(), className: getContentProps().className };
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
+    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 });
     }
+  }, []);
+  const handleFocusInput = () => {
+    calculatePosition();
+    setIsPanelOpen(true);
   };
-  const renderEndContent = () => {
-    switch (type) {
-      case "date":
-      case "datetime-local":
-      case "month":
-      case "week":
-      case "time":
-        return renderDateTimePickerIcon();
-      default:
-        return renderContentWithIcon();
+  const handleInputBlur = () => {
+    setTimeout(() => setIsPanelOpen(false), 150);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      calculatePosition();
+      setIsPanelOpen((prev) => !prev);
+    } else if (e.key === "Escape") {
+      setIsPanelOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...getBaseProps(), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { ...getLabelProps(), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...getInnerWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...getInputWrapperProps(), children: [
-          startContent && renderStartContent(),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ...getInputProps() }),
-          renderEndContent()
+  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_runtime8.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }), children: errorMessage })
       ] })
     ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    isPanelOpen && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
-          ref: datePickerWrapperRef,
+          ref: panelWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
           style: {
             position: "absolute",
-            top: (position == null ? void 0 : position.top) || -99999,
-            left: (position == null ? void 0 : position.left) || -99999,
+            top: panelPos.top,
+            left: panelPos.left,
             zIndex: 1e3
           },
-          children: [
-            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              calendar_default,
-              {
-                color: originalProps.color,
-                selectedDate,
-                highlightWeekend: originalProps.highlightWeekend,
-                onChangeDate: (date) => {
-                  handleChangeDate(date);
-                  if (onChangeDate) onChangeDate(date);
+          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
                 }
-              }
-            ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              timePicker_default,
-              {
-                color: originalProps.color,
-                selectedTime,
-                isFocusInput,
-                onChangeTime: (time) => {
-                  handleChangeTime(time);
-                  if (onChangeTime) onChangeTime(time);
+              ),
+              /* @__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
-    ) })
+    )
   ] });
 });
-DatePicker.displayName = "DatePicker";
-var dateTimePicker_default = DatePicker;
-var dateTimePickerStyle = tv({
+TimePicker.displayName = "TimePicker";
+var timePicker_default = TimePicker;
+var timePickerStyle = tv({
   slots: {
-    base: ["group/input", "flex", "flex-col", "inline-block"],
-    label: ["flex", "items-center"],
-    innerWrapper: ["flex", "flex-col"],
+    base: ["group/timepicker", "flex", "flex-col"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     inputWrapper: [
       "flex",
       "items-center",
-      "transition",
-      "duration-200",
-      "group-has-[p]/input:border-danger-main",
-      "group-has-[p]/input:bg-danger-soft"
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "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"
     ],
-    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
-    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
-    errorMessage: ["text-danger-main"]
+    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: {
-        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
-      },
-      normal: {
-        inputWrapper: [
-          "bg-transparent",
-          "border",
-          "border-neutral-main",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
-      },
-      line: {
-        inputWrapper: [
-          "bg-transparent",
-          "border-b",
-          "border-neutral-main",
-          "!rounded-none",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
-      }
-    },
     color: {
       primary: {
-        inputWrapper: ["has-[:focus]:border-primary-main"],
-        content: ["text-primary-main"]
+        icon: ["text-primary-main"]
       },
       secondary: {
-        inputWrapper: ["has-[:focus]:border-secondary-main"],
-        content: ["text-secondary-main"]
+        icon: ["text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: ["text-sm", "gap-[6px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
-        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
+        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-[8px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
-        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
-        errorMessage: ["text-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-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-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]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-xl"]
-      }
-    },
-    radius: {
-      default: "",
-      none: {
-        inputWrapper: ["rounded-none"]
-      },
-      full: {
-        inputWrapper: ["rounded-full"]
+        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"],
-        innerWrapper: ["flex-1"],
+        wrapper: ["w-full"],
         inputWrapper: ["w-full"]
       }
     },
     disabled: {
       true: {
+        base: ["pointer-events-none"],
         label: ["text-neutral-light"],
-        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        input: ["text-neutral-light", "placeholder:text-neutral-light"],
-        content: ["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"]
       }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
-      }
     }
   },
   defaultVariants: {
-    variant: "solid",
     color: "primary",
     size: "md",
     full: false,
-    disabled: false,
-    isRequired: false
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      isRequired: true,
-      class: {
-        label: ["after:text-danger-light"]
-      }
-    }
-  ]
+    disabled: false
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  dateTimePickerStyle
+  timePickerStyle
 });