@deepnoid/ui 0.1.201 → 0.1.203

package/dist/components/select/select.js

@@ -105,7 +105,7 @@ __export(select_exports, {
   default: () => select_default
 });
 module.exports = __toCommonJS(select_exports);
-var import_react = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/tailwind-variants.ts
@@ -5196,10 +5196,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 {
@@ -5215,16 +5646,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) {
@@ -5268,7 +5700,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;
@@ -5279,12 +5716,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));
@@ -5315,7 +5752,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,
@@ -5333,7 +5770,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",
@@ -5343,9 +5780,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
@@ -5356,8 +5793,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(
@@ -5365,9 +5802,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,
@@ -5378,7 +5815,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,
@@ -5393,8 +5830,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,
@@ -5405,8 +5853,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 })
           ] })
         ]
       }

package/dist/components/select/select.mjs

@@ -1,7 +1,15 @@
 "use client";
 import {
   select_default
-} from "../../chunk-75ZDPLJ4.mjs";
+} from "../../chunk-K2RW5KLO.mjs";
+import "../../chunk-MY5U63QO.mjs";
+import "../../chunk-4LUASWAN.mjs";
+import "../../chunk-5VTYO3RF.mjs";
+import "../../chunk-FFUZAOFL.mjs";
+import "../../chunk-TB2DOWSM.mjs";
+import "../../chunk-6WSACUIB.mjs";
+import "../../chunk-LXHUO6VM.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";