@deepnoid/ui 0.1.206 → 0.1.208

package/dist/components/picker/index.js

@@ -5215,6 +5215,28 @@ var formatStringToDate = (date) => {
   const formattedDate = new Date(date);
   return formattedDate;
 };
+var convert24To12 = (time24) => {
+  const [HH, MM] = time24.split(":");
+  let h = Number(HH);
+  const minute = MM || "";
+  const meridiem = h >= 12 ? "PM" : "AM";
+  let hour12 = h % 12;
+  if (hour12 === 0) hour12 = 12;
+  const hour = String(hour12).padStart(2, "0");
+  return { hour, minute, meridiem };
+};
+var getCurrent12Hour = () => {
+  const now = /* @__PURE__ */ new Date();
+  let hour = now.getHours();
+  const minute = String(now.getMinutes()).padStart(2, "0");
+  const meridiem = hour >= 12 ? "PM" : "AM";
+  hour = hour % 12 || 12;
+  return {
+    hour: String(hour).padStart(2, "0"),
+    minute,
+    meridiem
+  };
+};
 
 // src/components/button/button.tsx
 var import_react3 = require("react");
@@ -7173,712 +7195,262 @@ var datePickerStyle = tv({
   }
 });
 
-// src/components/picker/timePicker.tsx
+// src/components/picker/timePicker/index.tsx
+var import_react10 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/components/picker/timePicker/Panel.tsx
 var import_react9 = require("react");
-var import_react_dom3 = require("react-dom");
 
-// src/components/select/select.tsx
+// src/components/picker/timePicker/WheelColumn.tsx
 var import_react8 = require("react");
-var import_react_dom2 = require("react-dom");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var ALL_OPTION_VALUE = "__ALL__";
-var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
-  var _a, _b, _c;
-  const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
-  const {
-    label,
-    options,
-    helperMessage,
-    errorMessage,
-    classNames,
-    defaultSelectedOptions,
-    onChange,
-    multiple,
-    enableSelectAll,
-    dropdownIconName = "brace-up",
-    optionIconName,
-    optionIconPlacement,
-    clearable,
-    ...inputProps
-  } = props;
-  const slots = (0, import_react8.useMemo)(() => select({ ...variantProps }), [variantProps]);
-  const [selectedOptions, setSelectedOptions] = (0, import_react8.useState)(defaultSelectedOptions || []);
-  const [targetRect, setTargetRect] = (0, import_react8.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react8.useState)(0);
-  const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const selectWrapperRef = (0, import_react8.useRef)(null);
-  const optionWrapperRef = (0, import_react8.useRef)(null);
-  const isControlled = originalProps.value !== void 0;
-  const openSelect = () => {
-    if (selectWrapperRef.current) {
-      const rect = selectWrapperRef.current.getBoundingClientRect();
-      setTargetRect(rect);
-      setIsVisible(true);
-      requestAnimationFrame(() => setIsOpen(true));
-    }
-  };
-  const closeSelect = () => {
-    setIsOpen(false);
-    setTimeout(() => setIsVisible(false), 150);
-  };
-  const handleToggleSelect = () => {
-    isOpen ? closeSelect() : openSelect();
+var ITEM_HEIGHT = 30;
+var ACTIVE_HEIGHT = 34;
+function WheelColumn({ list, value, onChange }) {
+  const ref = (0, import_react8.useRef)(null);
+  const internalChangeRef = (0, import_react8.useRef)(false);
+  const [currentIndex, setCurrentIndex] = (0, import_react8.useState)(0);
+  const scrollToIndex = (index, behavior = "smooth") => {
+    if (!ref.current) return;
+    const diff = ACTIVE_HEIGHT - ITEM_HEIGHT;
+    let centerOffset = index > 0 && behavior === "auto" ? diff : 0;
+    if (behavior === "auto" && currentIndex !== 0) centerOffset -= 4;
+    const top = index * ITEM_HEIGHT + centerOffset;
+    ref.current.scrollTo({ top, behavior });
   };
-  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 finalizeScroll = (index) => {
+    internalChangeRef.current = true;
+    const v = list[index];
+    setCurrentIndex(index);
+    scrollToIndex(index, "smooth");
+    if (v) onChange(v);
   };
-  const handleChangeOption = (option) => {
-    let nextOptions = [];
-    if (multiple) {
-      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
-        nextOptions = selectedOptions.length === options.length ? [] : [...options];
-      } else {
-        const exists = selectedOptions.some((o) => o.value === option.value);
-        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
-      }
-    } else {
-      nextOptions = [option];
-      closeSelect();
+  const handleClick = (index) => finalizeScroll(index);
+  (0, import_react8.useEffect)(() => {
+    if (!ref.current || !value) return;
+    const idx = list.indexOf(value);
+    if (idx < 0) return;
+    if (internalChangeRef.current) {
+      internalChangeRef.current = false;
+      return;
     }
-    setSelectedOptions(nextOptions);
-    onChange == null ? void 0 : onChange(nextOptions);
-  };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    setSelectedOptions([]);
-    onChange == null ? void 0 : onChange([]);
-  };
+    setCurrentIndex(idx);
+    scrollToIndex(idx, "auto");
+  }, [value]);
   (0, import_react8.useEffect)(() => {
-    const handleClickOutside = (e) => {
-      var _a2;
-      const target = e.target;
-      if (optionWrapperRef.current && !optionWrapperRef.current.contains(target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(target))) {
-        closeSelect();
+    const el = ref.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      let newIndex = currentIndex;
+      if (e.deltaY > 0) {
+        newIndex = Math.min(currentIndex + 1, list.length - 1);
+      } else if (e.deltaY < 0) {
+        newIndex = Math.max(currentIndex - 1, 0);
       }
+      finalizeScroll(newIndex);
     };
-    window.addEventListener("mousedown", handleClickOutside);
-    return () => window.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  (0, import_react8.useEffect)(() => {
-    if (optionWrapperRef.current) {
-      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
-    }
-  }, [targetRect]);
-  (0, import_react8.useEffect)(() => {
-    if (isControlled) {
-      const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
-      const matched = options.filter((opt) => valueArray.includes(opt.value));
-      setSelectedOptions(matched);
-    } else if (defaultSelectedOptions) {
-      setSelectedOptions(defaultSelectedOptions);
-    }
-  }, [originalProps.value, defaultSelectedOptions, options]);
-  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  let allOptionValue = "";
-  if (multiple) {
-    if (selectedOptions.length === 0) {
-      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
-    } else if (selectedOptions.length === options.length) {
-      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
-    } else {
-      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
-    }
-  } else {
-    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  }
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
-  const renderOptions = () => {
-    if (!isVisible) return null;
-    const renderedOptions = [...options];
-    if (multiple && enableSelectAll) {
-      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
-    }
-    return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime10.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"
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [currentIndex, list, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative h-[94px] w-[40px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pointer-events-none absolute left-1/2 top-[30px] h-[34px] w-[40px] -translate-x-1/2 rounded-[10px] shadow-[inset_0_0_0_1.5px_var(--dn-primary-light)]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: "scrollbar-none relative h-full select-none overflow-y-scroll py-[0]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: ITEM_HEIGHT } }),
+      list.map((v, i) => {
+        const isActive = i === currentIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            onClick: () => handleClick(i),
+            className: `flex items-center justify-center text-sm font-bold transition-all ${isActive ? "text-body-foreground" : "text-neutral-light"}`,
+            style: { height: isActive ? ACTIVE_HEIGHT : ITEM_HEIGHT },
+            children: v
           },
-          children: renderedOptions.map((option) => {
-            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-              "div",
-              {
-                role: "option",
-                onClick: () => handleChangeOption(option),
-                className: clsx(
-                  select({ ...variantProps, isSelected }).option({ class: classNames == null ? void 0 : classNames.option }),
-                  optionIconPlacement === "end" ? "justify-between" : ""
-                ),
-                children: [
-                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
-                  option.label,
-                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
-                ]
-              },
-              option.value
-            );
-          })
-        }
-      ),
-      document.body
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
-                  clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    icon_button_default,
-                    {
-                      name: "close",
-                      variant: "ghost",
-                      size: "sm",
-                      color: "neutral",
-                      onClick: handleClear,
-                      classNames: { base: "pr-[2px]" }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    Icon_default,
-                    {
-                      name: dropdownIconName,
-                      size: originalProps.size,
-                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
-                    }
-                  )
-                ]
-              }
-            ),
-            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
-            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
-          ] })
-        ]
-      }
-    ),
-    renderOptions()
+          i
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: list.length >= 3 ? ITEM_HEIGHT + 4 : ITEM_HEIGHT } })
+    ] })
   ] });
-});
-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",
-      "cursor-pointer",
-      "text-neutral-main",
-      "bg-body-background",
-      "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",
-      "truncate"
-    ],
-    optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
-    option: [
-      "flex",
-      "items-center",
-      "cursor-pointer",
-      "text-neutral-dark",
-      "hover:bg-trans-soft",
-      "hover:text-neutral-strong"
-    ],
-    helperMessage: ["text-neutral-main"],
-    errorMessage: ["text-danger-main"],
-    readonly: ["pointer-events-none", "!bg-trans-soft"]
-  },
-  variants: {
-    variant: {
-      solid: {
-        selectWrapper: ["border-transparent", "bg-trans-soft"],
-        option: [],
-        readonlyWrapper: ["!bg-trans-light"]
-      },
-      outline: {
-        selectWrapper: [
-          "border-neutral-light",
-          "border",
-          "group-has-[:hover]/select:bg-trans-soft",
-          "group-has-[:focus]/select:bg-body-background",
-          "group-has-[p.error]/select:border-danger-main"
-        ],
-        option: [],
-        readonlyWrapper: ["!bg-trans-soft"]
-      },
-      underline: {
-        selectWrapper: [
-          "bg-transparent",
-          "border-neutral-light",
-          "!rounded-none",
-          "group-has-[:hover]/select:bg-trans-soft",
-          "group-has-[:focus]/select:bg-body-background",
-          "group-has-[p.error]/select:border-danger-main"
-        ],
-        option: ["!rounded-none"],
-        readonlyWrapper: ["!bg-trans-soft"]
-      }
-    },
-    color: {
-      primary: {
-        selectWrapper: ["text-primary-main"],
-        option: [],
-        helperMessage: ["text-primary-main"]
-      },
-      secondary: {
-        selectWrapper: ["text-secondary-main"],
-        option: [],
-        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"],
-        optionsWrapper: ["shadow-drop-sm", "rounded-sm", "p-[4px]"],
-        option: ["px-[4px]", "py-[3px]", "rounded-sm", "text-sm", "gap-[4px]"],
-        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"],
-        optionsWrapper: ["shadow-drop-md", "rounded-md", "p-[6px]"],
-        option: ["px-[6px]", "py-[5.5px]", "rounded-md", "text-md", "gap-[6px]"],
-        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"],
-        optionsWrapper: ["shadow-drop-lg", "rounded-lg", "p-[8px]"],
-        option: ["px-[8px]", "py-[8px]", "rounded-lg", "text-lg", "gap-[8px]"],
-        helperMessage: ["text-md"],
-        errorMessage: ["text-md"]
-      },
-      xl: {
-        base: ["text-xl", "gap-[10px]"],
-        label: ["text-xl"],
-        wrapper: ["gap-[10px]"],
-        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
-        select: ["text-xl"],
-        optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
-        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: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "outline",
-      size: "sm",
-      class: {
-        option: ["hover:shadow-[inset_0_0_0_1px_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "outline",
-      size: "md",
-      class: {
-        option: ["hover:shadow-[inset_0_0_0_1.25px_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "outline",
-      size: "lg",
-      class: {
-        option: ["hover:shadow-[inset_0_0_0_1.5px_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "outline",
-      size: "xl",
-      class: {
-        option: ["hover:shadow-[inset_0_0_0_1.75px_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "underline",
-      size: "sm",
-      class: {
-        selectWrapper: ["border-b-sm"],
-        option: ["hover:shadow-[inset_0_-1px_0_0_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "underline",
-      size: "md",
-      class: {
-        selectWrapper: ["border-b-md"],
-        option: ["hover:shadow-[inset_0_-1.25px_0_0_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "underline",
-      size: "lg",
-      class: {
-        selectWrapper: ["border-b-lg"],
-        option: ["hover:shadow-[inset_0_-1.5px_0_0_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      variant: "underline",
-      size: "xl",
-      class: {
-        selectWrapper: ["border-b-xl"],
-        option: ["hover:shadow-[inset_0_-1.75px_0_0_var(--dn-neutral-light)]"]
-      }
-    },
-    {
-      color: "primary",
-      isSelected: true,
-      class: {
-        option: ["text-primary-main"]
-      }
-    },
-    {
-      color: "secondary",
-      isSelected: true,
-      class: {
-        option: ["text-secondary-main"]
+}
+
+// src/components/picker/timePicker/Panel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var hours = [...Array(12)].map((_, i) => String(i + 1).padStart(2, "0"));
+var minutes = [...Array(60)].map((_, i) => String(i).padStart(2, "0"));
+var meridiemList = ["AM", "PM"];
+var TimePickerPanel = (0, import_react9.forwardRef)(
+  ({ value, onChange, nowTitle, confirmTitle }, ref) => {
+    const [time, setTime] = (0, import_react9.useState)({ hour: "", minute: "", meridiem: "" });
+    const handleNow = () => {
+      setTime(getCurrent12Hour());
+    };
+    const handleConfirm = (time2) => {
+      const { hour, minute, meridiem } = time2;
+      let h = Number(hour);
+      if (meridiem === "AM") {
+        if (h === 12) h = 0;
+      } else {
+        if (h !== 12) h += 12;
       }
-    }
-  ],
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    direction: "vertical",
-    disabled: false,
-    readonly: false
+      const HH = String(h).padStart(2, "0");
+      const MM = minute.padStart(2, "0");
+      const SS = "00";
+      onChange(`${HH}:${MM}:${SS}`);
+    };
+    (0, import_react9.useEffect)(() => {
+      setTime(value ? convert24To12(value) : getCurrent12Hour());
+    }, [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className: "flex gap-[10px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-[5px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WheelColumn, { list: hours, value: time.hour, onChange: (v) => setTime({ ...time, hour: v }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-[5px] text-sm font-bold", children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WheelColumn, { list: minutes, value: time.minute, onChange: (v) => setTime({ ...time, minute: v }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WheelColumn, { list: meridiemList, value: time.meridiem, onChange: (v) => setTime({ ...time, meridiem: v }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between px-1 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          text_button_default,
+          {
+            variant: "underline",
+            color: "neutral",
+            size: "sm",
+            classNames: { base: "font-bold" },
+            onClick: handleNow,
+            children: nowTitle
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          text_button_default,
+          {
+            variant: "underline",
+            size: "sm",
+            classNames: { base: "font-bold" },
+            onClick: () => handleConfirm(time),
+            children: confirmTitle
+          }
+        )
+      ] })
+    ] });
   }
-});
+);
+var Panel_default = TimePickerPanel;
 
-// src/components/picker/timePicker.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var TimePicker = (0, import_react9.forwardRef)((originalProps, ref) => {
+// src/components/picker/timePicker/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var TimePicker = (0, import_react10.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
   const {
     classNames,
     label,
     errorMessage,
-    valueRange,
-    onChangeRange,
-    size,
-    selectClassNames,
+    value,
+    onChange,
+    size = "md",
+    variant = "solid",
+    full = false,
+    disabled = false,
     placeholder = "",
+    nowTitle,
+    confirmTitle,
     ...inputProps
-  } = props;
-  const [selectedRange, setSelectedRange] = (0, import_react9.useState)(
-    valueRange || { start: "", end: "" }
-  );
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react9.useState)(false);
-  const inputWrapperRef = (0, import_react9.useRef)(null);
-  const panelWrapperRef = (0, import_react9.useRef)(null);
-  const [panelPos, setPanelPos] = (0, import_react9.useState)({ top: -9999, left: -9999 });
-  const displayValue = (0, import_react9.useMemo)(() => {
-    if (selectedRange.start && selectedRange.end) {
-      return `${selectedRange.start} ~ ${selectedRange.end}`;
-    }
-    return "";
-  }, [selectedRange]);
-  const calculatePosition = (0, import_react9.useCallback)(() => {
+  } = { ...props, ...variantProps };
+  const slots = (0, import_react10.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react10.useState)(false);
+  const inputWrapperRef = (0, import_react10.useRef)(null);
+  const panelWrapperRef = (0, import_react10.useRef)(null);
+  const [panelPos, setPanelPos] = (0, import_react10.useState)({
+    top: -9999,
+    left: -9999
+  });
+  const displayValue = (0, import_react10.useMemo)(() => {
+    if (!value) return "";
+    const { hour, minute, meridiem } = convert24To12(value);
+    return `${hour}:${minute} ${meridiem}`;
+  }, [value]);
+  const calculatePosition = (0, import_react10.useCallback)(() => {
     if (inputWrapperRef.current) {
       const rect = inputWrapperRef.current.getBoundingClientRect();
-      setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
+      setPanelPos({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX
+      });
     }
   }, []);
-  const handleFocusInput = () => {
+  const openPanel = () => {
     calculatePosition();
     setIsPanelOpen(true);
   };
-  const handleInputBlur = () => {
-    setTimeout(() => setIsPanelOpen(false), 150);
+  const handleInputFocus = () => {
+    openPanel();
   };
   const handleInputKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       calculatePosition();
       setIsPanelOpen((prev) => !prev);
-    } else if (e.key === "Escape") {
-      setIsPanelOpen(false);
-    }
-  };
-  const slots = (0, import_react9.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 };
-    });
+    } else if (e.key === "Escape") setIsPanelOpen(false);
   };
-  const defaultSelectClassNames = {
-    selectWrapper: "!w-[80px]",
-    optionsWrapper: "max-h-[300px]"
+  const handleChange = (time) => {
+    onChange == null ? void 0 : onChange(time);
+    setIsPanelOpen(false);
   };
-  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}`
+  (0, import_react10.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      if ((_a = inputWrapperRef.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_b = panelWrapperRef.current) == null ? void 0 : _b.contains(target)) return;
+      setIsPanelOpen(false);
     };
-    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_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
-            displayValue && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(
-              Icon_default,
-              {
-                name: "clock",
-                className: "cursor-pointer",
-                onClick: () => {
-                  calculatePosition();
-                  setIsPanelOpen((v) => !v);
-                }
-              }
-            )
-          ] })
-        ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
-      ] })
-    ] }),
-    isPanelOpen && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: inputWrapperRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onClick: openPanel, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      input_default,
+      {
+        ...inputProps,
+        autoComplete: "off",
+        ref,
+        label,
+        value: displayValue,
+        placeholder,
+        errorMessage,
+        size,
+        variant,
+        full,
+        disabled,
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon_default, { name: "clock", size, className: "cursor-pointer" }),
+        onFocus: handleInputFocus,
+        onKeyDown: handleInputKeyDown,
+        onChange: () => {
+        },
+        classNames: {
+          inputWrapper: classNames == null ? void 0 : classNames.inputWrapper,
+          input: classNames == null ? void 0 : classNames.input,
+          label: classNames == null ? void 0 : classNames.label,
+          errorMessage: classNames == null ? void 0 : classNames.errorMessage
+        }
+      }
+    ) }),
+    isPanelOpen && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           ref: panelWrapperRef,
-          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          onMouseDown: (e) => e.preventDefault(),
+          className: slots.portalWrapper({ class: classNames == null ? void 0 : classNames.portalWrapper }),
           style: {
             position: "absolute",
             top: panelPos.top,
-            left: panelPos.left,
-            zIndex: 1e3
+            left: panelPos.left
           },
-          onMouseDown: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { children: "~" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                select_default,
-                {
-                  options: renderMinuteOptions(),
-                  value: getSelectValue(selectedRange.end, "minute"),
-                  onChange: (options) => {
-                    if (options[0]) handleRangeChange("endMinute", options[0]);
-                  },
-                  classNames: mergedSelectClassNames
-                }
-              )
-            ] })
-          ] })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Panel_default, { nowTitle, confirmTitle, value, onChange: handleChange })
         }
       ),
       document.body
@@ -7915,24 +7487,44 @@ var timePickerStyle = tv({
       "group-has-[p.error]/timepicker:placeholder:text-danger-main",
       "cursor-pointer"
     ],
-    icon: [
+    portalWrapper: [
+      "rounded-[10px]",
+      "bg-body-background",
+      "shadow-drop-md",
+      "overflow-auto",
+      "p-[10px]",
+      "w-[165px]",
+      "h-[137px]",
       "flex",
-      "items-center",
-      "select-none",
-      "text-body-foreground",
-      "group-has-[p.error]/timepicker:text-danger-main"
+      "flex-col",
+      "gap-[5px]"
     ],
-    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
-    errorMessage: ["text-danger-main", "text-sm"],
-    selectWrapper: []
+    errorMessage: ["text-danger-main", "text-sm"]
   },
   variants: {
-    color: {
-      primary: {
-        icon: ["text-primary-main"]
+    variant: {
+      solid: {
+        inputWrapper: ["border-transparent", "bg-trans-soft"],
+        readonlyWrapper: ["!bg-trans-light"]
+      },
+      outline: {
+        inputWrapper: [
+          "border-neutral-light",
+          "group-has-[:hover:not(:read-only):not(:focus)]/input:bg-trans-soft",
+          "group-has-[:focus:not(:read-only)]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonlyWrapper: ["!bg-trans-soft"]
       },
-      secondary: {
-        icon: ["text-secondary-main"]
+      underline: {
+        inputWrapper: [
+          "bg-transparent",
+          "rounded-none",
+          "group-has-[:hover:not(:read-only):not(:focus)]/input:bg-trans-soft",
+          "group-has-[:focus:not(:read-only)]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonlyWrapper: ["!bg-trans-soft"]
       }
     },
     size: {
@@ -7942,7 +7534,6 @@ var timePickerStyle = tv({
         wrapper: ["gap-[4px]"],
         inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
         input: ["text-sm"],
-        icon: ["text-sm"],
         errorMessage: ["text-sm"]
       },
       md: {
@@ -7951,7 +7542,6 @@ var timePickerStyle = tv({
         wrapper: ["gap-[6px]"],
         inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
         input: ["text-md"],
-        icon: ["text-md"],
         errorMessage: ["text-sm"]
       },
       lg: {
@@ -7960,7 +7550,6 @@ var timePickerStyle = tv({
         wrapper: ["gap-[8px]"],
         inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
         input: ["text-lg"],
-        icon: ["text-lg"],
         errorMessage: ["text-md"]
       },
       xl: {
@@ -7969,7 +7558,6 @@ var timePickerStyle = tv({
         wrapper: ["gap-[10px]"],
         inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
         input: ["text-xl"],
-        icon: ["text-xl"],
         errorMessage: ["text-md"]
       }
     },
@@ -7999,7 +7587,6 @@ var timePickerStyle = tv({
           "group-has-[p.error]/timepicker:placeholder:text-danger-light",
           "cursor-not-allowed"
         ],
-        icon: ["text-neutral-light"],
         errorMessage: ["text-danger-light"]
       }
     }