@deepnoid/ui 0.1.201 → 0.1.203

package/dist/components/picker/timePicker.js

@@ -106,7 +106,7 @@ __export(timePicker_exports, {
   timePickerStyle: () => timePickerStyle
 });
 module.exports = __toCommonJS(timePicker_exports);
-var import_react2 = require("react");
+var import_react4 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/utils/tailwind-variants.ts
@@ -5158,7 +5158,7 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 var Icon_default = Icon;
 
 // src/components/select/select.tsx
-var import_react = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/clsx.ts
@@ -5201,10 +5201,441 @@ function toVal(mix) {
   return str;
 }
 
-// src/components/select/select.tsx
+// src/components/ripple/ripple.tsx
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var Ripple = (props) => {
+  const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: ripples.map((ripple) => {
+    const duration = (0, import_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_framer_motion.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        className: "deepnoidui-ripple",
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+Ripple.displayName = "HeroUI.Ripple";
+var ripple_default = Ripple;
+
+// src/components/ripple/useRipple.ts
+var import_react = require("react");
+function useRipple(props = {}) {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
+  const onPress = (0, import_react.useCallback)((event) => {
+    const trigger = event.currentTarget;
+    const rect = trigger.getBoundingClientRect();
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClear, onPress, ...props };
+}
+
+// src/components/button/icon-button.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var IconButton = (0, import_react2.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
+  const { classNames, name, disableRipple, disabled, isLoading, size, full, isInGroup, onMouseDown, ...buttonProps } = {
+    ...localProps,
+    ...variantProps
+  };
+  const slots = (0, import_react2.useMemo)(() => iconButtonStyle({ ...variantProps }), [variantProps]);
+  const { onPress, onClear, ripples } = useRipple();
+  const handleRipple = (0, import_react2.useCallback)(
+    (e) => {
+      if (!disableRipple && !disabled) {
+        onPress(e);
+      }
+    },
+    [disableRipple, disabled, onPress]
+  );
+  const handleMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      onMouseDown == null ? void 0 : onMouseDown(e);
+      handleRipple(e);
+    },
+    [onMouseDown, handleRipple]
+  );
+  const rippleProps = (0, import_react2.useMemo)(() => ({ ripples, onClear }), [ripples, onClear]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ...buttonProps,
+      onMouseDown: handleMouseDown,
+      ref,
+      disabled: disabled || isLoading,
+      "data-loading": isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name, size }),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...rippleProps })
+      ] })
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var icon_button_default = IconButton;
+var iconButtonStyle = tv({
+  slots: {
+    base: [
+      "relative",
+      "flex",
+      "items-center",
+      "justify-center",
+      "whitespace-nowrap",
+      "transition",
+      "duration-200",
+      "select-none",
+      "overflow-hidden",
+      "box-border"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: [],
+      soft: [],
+      outline: [],
+      ghost: []
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      neutral: [],
+      info: [],
+      success: [],
+      warning: [],
+      danger: []
+    },
+    size: {
+      sm: {
+        base: ["w-[24px]", "h-[24px]", "rounded-sm"]
+      },
+      md: {
+        base: ["w-[32px]", "h-[32px]", "rounded-md"]
+      },
+      lg: {
+        base: ["w-[40px]", "h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["w-[50px]", "h-[50px]", "rounded-xl"]
+      }
+    },
+    isLoading: {
+      true: {}
+    },
+    disabled: {
+      true: {
+        base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
+      }
+    },
+    isInGroup: {
+      true: {
+        base: [
+          "[&:not(:first-child):not(:last-child)]:rounded-none",
+          "first:rounded-r-none",
+          "last:rounded-l-none",
+          "[&:not(:first-child)]:border-l-0"
+        ]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    // soft
+    {
+      variant: "soft",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "bg-primary-soft", "!border-primary-soft", "hover:!border-primary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "bg-secondary-soft", "!border-secondary-soft", "hover:!border-secondary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "bg-neutral-soft", "!border-neutral-soft", "hover:!border-neutral-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      class: {
+        base: ["text-info-main", "bg-info-soft", "!border-info-soft", "hover:!border-info-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      class: {
+        base: ["text-success-main", "bg-success-soft", "!border-success-soft", "hover:!border-success-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "bg-warning-soft", "!border-warning-soft", "hover:!border-warning-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "bg-danger-soft", "!border-danger-soft", "hover:!border-danger-light"]
+      }
+    },
+    // outline
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        base: ["bg-body-background", "!border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        base: ["bg-body-background", "!border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        base: ["bg-body-background", "!border-neutral-light", "text-neutral-main", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "info",
+      class: {
+        base: ["bg-body-background", "!border-info-main", "text-info-main", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: {
+        base: ["bg-body-background", "!border-success-main", "text-success-main", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: {
+        base: ["bg-body-background", "!border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "danger",
+      class: {
+        base: ["bg-body-background", "!border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+      }
+    },
+    // ghost
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "info",
+      class: {
+        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
+      }
+    },
+    // soft/outline + size
+    {
+      variant: ["soft", "outline"],
+      size: "sm",
+      class: {
+        base: ["border-sm"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: {
+        base: ["border-md"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "lg",
+      class: {
+        base: ["border-lg"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "xl",
+      class: {
+        base: ["border-xl"]
+      }
+    },
+    // disabled + variant
+    {
+      variant: ["soft", "ghost"],
+      disabled: true,
+      class: {
+        base: ["!border-neutral-soft"]
+      }
+    },
+    {
+      variant: ["outline"],
+      disabled: true,
+      class: {
+        base: ["!border-neutral-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    full: false,
+    disabled: false,
+    isLoading: false,
+    isInGroup: false
+  }
+});
+
+// src/components/select/select.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ALL_OPTION_VALUE = "__ALL__";
-var Select = (0, import_react.forwardRef)((originalProps, ref) => {
+var Select = (0, import_react3.forwardRef)((originalProps, ref) => {
   var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
@@ -5220,16 +5651,17 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
+    clearable,
     ...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 slots = (0, import_react3.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react3.useState)(defaultSelectedOptions || []);
+  const [targetRect, setTargetRect] = (0, import_react3.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react3.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const selectWrapperRef = (0, import_react3.useRef)(null);
+  const optionWrapperRef = (0, import_react3.useRef)(null);
   const isControlled = originalProps.value !== void 0;
   const openSelect = () => {
     if (selectWrapperRef.current) {
@@ -5273,7 +5705,12 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
   };
-  (0, import_react.useEffect)(() => {
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setSelectedOptions([]);
+    onChange == null ? void 0 : onChange([]);
+  };
+  (0, import_react3.useEffect)(() => {
     const handleClickOutside = (e) => {
       var _a2;
       const target = e.target;
@@ -5284,12 +5721,12 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (optionWrapperRef.current) {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
   }, [targetRect]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isControlled) {
       const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
       const matched = options.filter((opt) => valueArray.includes(opt.value));
@@ -5320,7 +5757,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
       renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
     }
     return (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           ref: optionWrapperRef,
@@ -5338,7 +5775,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
           },
           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_runtime3.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 role: "option",
@@ -5348,9 +5785,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
                   optionIconPlacement === "end" ? "justify-between" : ""
                 ),
                 children: [
-                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
+                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
                   option.label,
-                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
+                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
                 ]
               },
               option.value
@@ -5361,8 +5798,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
       document.body
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         className: clsx(
@@ -5370,9 +5807,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
           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)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 "data-expanded": isOpen,
@@ -5383,7 +5820,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
                 ref: selectWrapperRef,
                 onClick: handleToggleSelect,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "input",
                     {
                       ...inputProps,
@@ -5398,8 +5835,19 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
                       size: 0
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
+                  clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    icon_button_default,
+                    {
+                      name: "close",
+                      variant: "ghost",
+                      size: "sm",
+                      color: "neutral",
+                      onClick: handleClear,
+                      classNames: { base: "pr-[2px]" }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     Icon_default,
                     {
                       name: dropdownIconName,
@@ -5410,8 +5858,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
                 ]
               }
             ),
-            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 })
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
           ] })
         ]
       }
@@ -5676,8 +6124,8 @@ var select = tv({
 });
 
 // src/components/picker/timePicker.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TimePicker = (0, import_react4.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
   const {
     classNames,
@@ -5690,20 +6138,20 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
     placeholder = "",
     ...inputProps
   } = props;
-  const [selectedRange, setSelectedRange] = (0, import_react2.useState)(
+  const [selectedRange, setSelectedRange] = (0, import_react4.useState)(
     valueRange || { start: "", end: "" }
   );
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react2.useState)(false);
-  const inputWrapperRef = (0, import_react2.useRef)(null);
-  const panelWrapperRef = (0, import_react2.useRef)(null);
-  const [panelPos, setPanelPos] = (0, import_react2.useState)({ top: -9999, left: -9999 });
-  const displayValue = (0, import_react2.useMemo)(() => {
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react4.useState)(false);
+  const inputWrapperRef = (0, import_react4.useRef)(null);
+  const panelWrapperRef = (0, import_react4.useRef)(null);
+  const [panelPos, setPanelPos] = (0, import_react4.useState)({ top: -9999, left: -9999 });
+  const displayValue = (0, import_react4.useMemo)(() => {
     if (selectedRange.start && selectedRange.end) {
       return `${selectedRange.start} ~ ${selectedRange.end}`;
     }
     return "";
   }, [selectedRange]);
-  const calculatePosition = (0, import_react2.useCallback)(() => {
+  const calculatePosition = (0, import_react4.useCallback)(() => {
     if (inputWrapperRef.current) {
       const rect = inputWrapperRef.current.getBoundingClientRect();
       setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
@@ -5725,7 +6173,7 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
       setIsPanelOpen(false);
     }
   };
-  const slots = (0, import_react2.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react4.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
   const renderHourOptions = () => {
     return Array.from({ length: 24 }, (_, i) => {
       const value = String(i).padStart(2, "0");
@@ -5770,12 +6218,12 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               ...inputProps,
@@ -5790,8 +6238,8 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
               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)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Icon_default,
               {
                 name: "close",
@@ -5802,7 +6250,7 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Icon_default,
               {
                 name: "clock",
@@ -5815,11 +6263,11 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
             )
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
       ] })
     ] }),
     isPanelOpen && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           ref: panelWrapperRef,
@@ -5831,9 +6279,9 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
             zIndex: 1e3
           },
           onMouseDown: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 select_default,
                 {
                   options: renderHourOptions(),
@@ -5844,8 +6292,8 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
                   classNames: mergedSelectClassNames
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 select_default,
                 {
                   options: renderMinuteOptions(),
@@ -5857,9 +6305,9 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
                 }
               )
             ] }),
-            /* @__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)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "~" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 select_default,
                 {
                   options: renderHourOptions(),
@@ -5870,8 +6318,8 @@ var TimePicker = (0, import_react2.forwardRef)((originalProps, ref) => {
                   classNames: mergedSelectClassNames
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: ":" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: ":" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 select_default,
                 {
                   options: renderMinuteOptions(),