@deepnoid/ui 0.0.111 → 0.1.0

package/dist/components/button/button.js

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,29 +31,304 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/util/createPlugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/public/create-plugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/tailwindcss/plugin.js"(exports2, module2) {
+    "use strict";
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // src/components/button/button.tsx
 var button_exports = {};
 __export(button_exports, {
   default: () => button_default
 });
 module.exports = __toCommonJS(button_exports);
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
-var COMMON_SIZE = ["sm", "md", "lg"];
-var COMMON_RADIUS = ["xlg", "xxlg", "none", "full"];
-var COMMON_FONTSIZE = ["h1", "h2", "h3", "h4", "h5"];
-var COMMON_SHADOW = ["inner", "drop"];
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
 var tv = (0, import_tailwind_variants.createTV)({
-  // twMerge: false,
   twMergeConfig: {
     classGroups: {
-      fontSize: [{ text: [...COMMON_SIZE, ...COMMON_FONTSIZE] }],
-      borderRadius: [{ rounded: [...COMMON_RADIUS, ...COMMON_SIZE] }],
-      boxShadow: [{ shadow: [...COMMON_SHADOW] }],
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...COMMON_SIZE] }]
+      gap: [{ gap: [...typedKeys(gap)] }]
     }
   }
 });
@@ -78,6 +356,137 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
+  "left-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 13L7 9L11 5", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "right-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 5L11 9L7 13", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "left-double-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 5L8.55556 9L13 13M9.44444 5L5 9L9.44444 13", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  "right-double-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L9.44444 9L5 13M8.55556 5L13 9L8.55556 13", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  star: ({ className, fill }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.26603 3.51086C8.53733 2.82971 9.46267 2.82971 9.73397 3.51086L10.9948 6.67687L14.2674 6.95135C14.9723 7.01017 15.2582 7.92848 14.721 8.40913L12.2278 10.6398L12.989 13.9746C13.1531 14.6931 12.4052 15.2604 11.8021 14.8759L9 13.0886L6.19794 14.8759C5.59478 15.2604 4.84687 14.6925 5.01099 13.9746L5.77221 10.6398L3.27901 8.40913C2.74185 7.92848 3.02769 7.01017 3.73259 6.95135L7.00519 6.67687L8.26603 3.51086Z"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M8.65925 3.23957C8.68697 3.16871 8.73417 3.1081 8.79484 3.06544C8.85552 3.02278 8.92693 3 9 3C9.07306 3 9.14448 3.02278 9.20515 3.06544C9.26583 3.1081 9.31303 3.16871 9.34074 3.23957L10.7332 6.74977C10.7593 6.81546 10.8021 6.87233 10.857 6.91413C10.912 6.95594 10.9768 6.98105 11.0445 6.98672L14.6603 7.29028C14.9873 7.31775 15.1196 7.74563 14.8706 7.96883L12.1158 10.4427C12.0644 10.4888 12.026 10.5489 12.005 10.6164C11.984 10.6839 11.981 10.7561 11.9966 10.8252L12.8386 14.5236C12.8555 14.5978 12.8511 14.6756 12.8259 14.7471C12.8006 14.8187 12.7557 14.8808 12.6968 14.9257C12.6379 14.9705 12.5677 14.996 12.495 14.999C12.4222 15.002 12.3503 14.9824 12.2882 14.9425L9.19199 12.9611C9.13418 12.9241 9.06775 12.9045 9 12.9045C8.93225 12.9045 8.86581 12.9241 8.808 12.9611L5.71181 14.9432C5.64973 14.9831 5.57778 15.0027 5.50504 14.9997C5.43231 14.9967 5.36206 14.9712 5.30316 14.9263C5.24426 14.8815 5.19936 14.8194 5.17412 14.7478C5.14889 14.6763 5.14445 14.5985 5.16138 14.5243L6.00341 10.8252C6.01903 10.7561 6.01616 10.6838 5.99511 10.6164C5.97407 10.5489 5.93568 10.4888 5.88415 10.4427L3.12936 7.96883C3.07389 7.91927 3.03369 7.85357 3.01387 7.78005C2.99405 7.70652 2.9955 7.62849 3.01802 7.55583C3.04055 7.48317 3.08314 7.41915 3.1404 7.37188C3.19767 7.3246 3.26703 7.29621 3.33971 7.29028L6.95553 6.98672C7.02319 6.98105 7.08804 6.95594 7.14296 6.91413C7.19787 6.87233 7.24072 6.81546 7.26679 6.74977L8.65925 3.23957Z",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  right: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.5 4L11.5 9L6.5 14", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  // ----------------------------------- old ---------------------------------
+  // ** avatar icon **
+  avatar: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: "50",
+        height: "50",
+        viewBox: "0 0 50 50",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { id: "Rectangle 6445", width: "50", height: "50", rx: "5", fill: "url(#pattern0_10_7240)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pattern", { id: "pattern0_10_7240", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { xlinkHref: "#image0_10_7240", transform: "scale(0.00195312)" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "image",
+              {
+                id: "image0_10_7240",
+                "data-name": "man.png",
+                width: "512",
+                height: "512",
+                preserveAspectRatio: "none",
+                xlinkHref: "data:image/png;base64,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"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  },
   // ** Status **
   plus: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -966,36 +1375,6 @@ var template = {
       }
     );
   },
-  star: ({ className, fill }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M10.7875 3.21009C11.2355 2.13309 12.7635 2.13309 13.2115 3.21009L15.2935 8.21609L20.6975 8.65009C21.8615 8.74309 22.3335 10.1951 21.4465 10.9551L17.3295 14.4821L18.5865 19.7551C18.8575 20.8911 17.6225 21.7881 16.6265 21.1801L11.9995 18.3541L7.37251 21.1801C6.37651 21.7881 5.14151 20.8901 5.41251 19.7551L6.66951 14.4821L2.55251 10.9551C1.66551 10.1951 2.13751 8.74309 3.30151 8.65009L8.70551 8.21609L10.7875 3.21009Z",
-            fill: "currentColor"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M11.4802 3.49921C11.5225 3.39605 11.5945 3.30779 11.6871 3.24567C11.7797 3.18356 11.8887 3.15039 12.0002 3.15039C12.1117 3.15039 12.2206 3.18356 12.3132 3.24567C12.4058 3.30779 12.4779 3.39605 12.5202 3.49921L14.6452 8.61021C14.6849 8.70585 14.7503 8.78866 14.8341 8.84953C14.9179 8.9104 15.0169 8.94697 15.1202 8.95521L20.6382 9.39721C21.1372 9.43721 21.3392 10.0602 20.9592 10.3852L16.7552 13.9872C16.6766 14.0544 16.6181 14.1419 16.586 14.2402C16.5539 14.3384 16.5494 14.4436 16.5732 14.5442L17.8582 19.9292C17.884 20.0373 17.8772 20.1505 17.8387 20.2547C17.8002 20.3589 17.7317 20.4494 17.6418 20.5146C17.5519 20.5799 17.4447 20.6171 17.3337 20.6214C17.2227 20.6258 17.1129 20.5972 17.0182 20.5392L12.2932 17.6542C12.2049 17.6003 12.1036 17.5718 12.0002 17.5718C11.8968 17.5718 11.7954 17.6003 11.7072 17.6542L6.98216 20.5402C6.88742 20.5982 6.77762 20.6268 6.66662 20.6224C6.55562 20.6181 6.44841 20.5809 6.35853 20.5156C6.26865 20.4504 6.20013 20.3599 6.16162 20.2557C6.12311 20.1515 6.11634 20.0383 6.14216 19.9302L7.42716 14.5442C7.451 14.4436 7.44661 14.3384 7.4145 14.2401C7.38239 14.1418 7.3238 14.0543 7.24516 13.9872L3.04116 10.3852C2.95651 10.313 2.89517 10.2174 2.86492 10.1103C2.83468 10.0033 2.83688 9.88966 2.87125 9.78386C2.90563 9.67807 2.97062 9.58485 3.05802 9.51602C3.14541 9.44719 3.25126 9.40584 3.36216 9.39721L8.88016 8.95521C8.98341 8.94697 9.08239 8.9104 9.16619 8.84953C9.25 8.78866 9.31539 8.70585 9.35516 8.61021L11.4802 3.49921Z",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   heart: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -3626,14 +4005,16 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
   const getInputIconSize = (size2) => {
     switch (size2) {
       case "sm":
-        return "size-[15px]";
+        return "size-[18px]";
       case "md":
-        return "size-[17px] stroke-[1.25px]";
+        return "size-[21px] stroke-[1.25px]";
       case "lg":
-        return "size-[20px] stroke-[1.5px]";
+        return "size-[24px] stroke-[1.5px]";
+      case "xl":
+        return "size-[27px] stroke-[1.5px]";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-fit h-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-fit w-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     SVGIcon,
     {
       fill,
@@ -3644,15 +4025,103 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/button/button.tsx
+// src/components/ripple/ripple.tsx
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)((originalProps, ref) => {
+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.target;
+    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/button.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
-  const { classNames, startContent, endContent, children, ...buttonProps } = props;
-  const slots = (0, import_react.useMemo)(() => buttonStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react.useCallback)(
+  const { classNames, startContent, endContent, disableRipple, children, ...buttonProps } = props;
+  const slots = (0, import_react2.useMemo)(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
+  const handlePress = (0, import_react2.useCallback)(
+    (e) => {
+      if (disableRipple || originalProps.isDisabled) return;
+      onRipplePressHandler(e);
+    },
+    [disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const mouseDownHandler = (0, import_react2.useCallback)(
+    (e) => {
+      var _a;
+      (_a = buttonProps.onMouseDown) == null ? void 0 : _a.call(buttonProps, e);
+      if (disableRipple || originalProps.isDisabled) return;
+      handlePress(e);
+    },
+    [buttonProps.onMouseDown, disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const getRippleProps = (0, import_react2.useCallback)(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  const getBaseProps = (0, import_react2.useCallback)(
     () => ({
       ...buttonProps,
+      onMouseDown: mouseDownHandler,
       ref,
       disabled: originalProps.isDisabled || originalProps.isLoading,
       "data-loading": originalProps.isLoading,
@@ -3660,7 +4129,7 @@ var Button = (0, import_react.forwardRef)((originalProps, ref) => {
     }),
     [buttonProps, ref, originalProps.isDisabled, originalProps.isLoading, slots, classNames == null ? void 0 : classNames.base]
   );
-  const getContentProps = (0, import_react.useCallback)(
+  const getContentProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
       size: originalProps.size
@@ -3668,37 +4137,38 @@ var Button = (0, import_react.forwardRef)((originalProps, ref) => {
     [slots, classNames, originalProps.size]
   );
   const renderContent = (content) => {
-    if (import_react.default.isValidElement(content)) {
-      const existingProps = content.props;
+    if (import_react2.default.isValidElement(content)) {
+      const _content = content;
+      const existingProps = _content.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return import_react.default.cloneElement(content, mergedProps);
+      return import_react2.default.cloneElement(content, mergedProps);
     } else {
       const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...contentProps, children: content });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...contentProps, children: content });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     startContent && renderContent(startContent),
     children,
-    endContent && renderContent(endContent)
+    endContent && renderContent(endContent),
+    !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...getRippleProps() })
   ] }) });
 });
 Button.displayName = "Button";
 var button_default = Button;
 var buttonStyle = tv({
   slots: {
-    base: "flex items-center justify-center border whitespace-nowrap transition duration-200 select-none",
+    base: "relative flex items-center justify-center whitespace-nowrap transition duration-200 select-none overflow-hidden box-border border border-transparent",
     content: ""
   },
   variants: {
     variant: {
       solid: "",
-      line: "",
-      tonal: "",
-      trans: {
+      soft: "",
+      outline: {
         base: "bg-transparent border-transparent"
       },
       ghost: ""
@@ -3714,13 +4184,16 @@ var buttonStyle = tv({
     },
     size: {
       sm: {
-        base: "h-[24px] px-[8px] py-[4.5px] text-sm font-[500] rounded-sm gap-sm"
+        base: "h-[24px] px-[8px] py-[3px] text-sm font-[700] rounded-sm gap-sm"
       },
       md: {
-        base: "h-[30px] px-[16px] py-[6.5px] text-md font-[500] rounded-md gap-md"
+        base: "h-[32px] px-[12px] py-[5.5px] text-md font-[700] rounded-md gap-md"
       },
       lg: {
-        base: "h-[36px] px-[24px] py-[8px] text-lg font-[500] rounded-lg gap-lg"
+        base: "h-[40px] px-[16px] py-[8px] text-lg font-[700] rounded-lg gap-lg"
+      },
+      xl: {
+        base: "h-[50px] px-[20px] py-[11.5px] text-xl font-[700] rounded-xl gap-xl"
       }
     },
     radius: {
@@ -3739,16 +4212,14 @@ var buttonStyle = tv({
         base: "w-full"
       }
     },
+    isLoading: {
+      true: {}
+    },
     isDisabled: {
       true: {
         base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light pointer-events-none"
       }
     },
-    isLoading: {
-      true: {
-        base: "pointer-events-none"
-      }
-    },
     isInGroup: {
       true: {
         base: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none"
@@ -3770,528 +4241,240 @@ var buttonStyle = tv({
       variant: "solid",
       color: "primary",
       class: {
-        base: [
-          "text-white",
-          "bg-primary-main",
-          "border-primary-main",
-          "hover:bg-primary-dark",
-          "hover:border-primary-dark",
-          "data-[loading=true]:bg-primary-dark",
-          "data-[loading=true]:border-primary-dark"
-        ]
+        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "secondary",
       class: {
-        base: [
-          "text-white",
-          "bg-secondary-main",
-          "border-secondary-main",
-          "hover:bg-secondary-dark",
-          "hover:border-secondary-dark",
-          "data-[loading=true]:bg-secondary-dark",
-          "data-[loading=true]:border-secondary-dark"
-        ]
+        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "neutral",
       class: {
-        base: [
-          "text-white",
-          "bg-neutral-main",
-          "border-neutral-main",
-          "hover:bg-neutral-dark",
-          "hover:border-neutral-dark",
-          "data-[loading=true]:bg-neutral-dark",
-          "data-[loading=true]:border-neutral-dark"
-        ]
+        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "info",
       class: {
-        base: [
-          "text-white",
-          "bg-info-main",
-          "border-info-main",
-          "hover:bg-info-dark",
-          "hover:border-info-dark",
-          "data-[loading=true]:bg-info-dark",
-          "data-[loading=true]:border-info-dark"
-        ]
+        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "success",
       class: {
-        base: [
-          "text-white",
-          "bg-success-main",
-          "border-success-main",
-          "hover:bg-success-dark",
-          "hover:border-success-dark",
-          "data-[loading=true]:bg-success-dark",
-          "data-[loading=true]:border-success-dark"
-        ]
+        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "warning",
       class: {
-        base: [
-          "text-white",
-          "bg-warning-main",
-          "border-warning-main",
-          "hover:bg-warning-dark",
-          "hover:border-warning-dark",
-          "data-[loading=true]:bg-warning-dark",
-          "data-[loading=true]:border-warning-dark"
-        ]
+        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
     {
       variant: "solid",
       color: "danger",
       class: {
-        base: [
-          "text-white",
-          "bg-danger-main",
-          "border-danger-main",
-          "hover:bg-danger-dark",
-          "hover:border-danger-dark",
-          "data-[loading=true]:bg-danger-dark",
-          "data-[loading=true]:border-danger-dark"
-        ]
+        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
       }
     },
-    // line & color
+    // soft & color
     {
-      variant: "line",
+      variant: "soft",
       color: "primary",
       class: {
-        base: [
-          "bg-transparent",
-          "border-primary-main",
-          "text-primary-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-primary-main", "bg-primary-soft", "border-primary-soft", "hover:border-primary-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "secondary",
       class: {
-        base: [
-          "bg-transparent",
-          "border-secondary-main",
-          "text-secondary-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-secondary-main", "bg-secondary-soft", "border-secondary-soft", "hover:border-secondary-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "neutral",
       class: {
-        base: [
-          "bg-transparent",
-          "border-neutral-main",
-          "text-neutral-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-neutral-main", "bg-neutral-soft", "border-neutral-soft", "hover:border-neutral-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "info",
       class: {
-        base: [
-          "bg-transparent",
-          "border-info-main",
-          "text-info-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "success",
       class: {
-        base: [
-          "bg-transparent",
-          "border-success-main",
-          "text-success-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-success-main", "bg-success-soft", "border-success-soft", "hover:border-success-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "warning",
       class: {
-        base: [
-          "bg-transparent",
-          "border-warning-main",
-          "text-warning-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-warning-main", "bg-warning-soft", "border-warning-soft", "hover:border-warning-light"]
       }
     },
     {
-      variant: "line",
+      variant: "soft",
       color: "danger",
       class: {
-        base: [
-          "bg-transparent",
-          "border-danger-main",
-          "text-danger-main",
-          "hover:bg-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft"
-        ]
+        base: ["text-danger-main", "bg-danger-soft", "border-danger-soft", "hover:border-danger-light"]
       }
     },
-    // tonal & color
+    // outline & color
     {
-      variant: "tonal",
+      variant: "outline",
       color: "primary",
       class: {
-        base: [
-          "bg-primary-soft",
-          "border-primary-soft",
-          "text-primary-main",
-          "hover:border-primary-light",
-          "hover:bg-primary-light",
-          "data-[loading=true]:border-primary-light",
-          "data-[loading=true]:bg-primary-light"
-        ]
+        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "secondary",
       class: {
-        base: [
-          "bg-secondary-soft",
-          "border-secondary-soft",
-          "text-secondary-main",
-          "hover:border-secondary-light",
-          "hover:bg-secondary-light",
-          "data-[loading=true]:border-secondary-light",
-          "data-[loading=true]:bg-secondary-light"
-        ]
+        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "neutral",
       class: {
-        base: [
-          "bg-neutral-soft",
-          "border-neutral-soft",
-          "text-neutral-main",
-          "hover:border-neutral-light",
-          "hover:bg-neutral-light",
-          "data-[loading=true]:border-neutral-light",
-          "data-[loading=true]:bg-neutral-light"
-        ]
+        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "info",
       class: {
-        base: [
-          "bg-info-soft",
-          "border-info-soft",
-          "text-info-main",
-          "hover:border-info-light",
-          "hover:bg-info-light",
-          "data-[loading=true]:border-info-light",
-          "data-[loading=true]:bg-info-light"
-        ]
+        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "success",
       class: {
-        base: [
-          "bg-success-soft",
-          "border-success-soft",
-          "text-success-main",
-          "hover:border-success-light",
-          "hover:bg-success-light",
-          "data-[loading=true]:border-success-light",
-          "data-[loading=true]:bg-success-light"
-        ]
+        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "warning",
       class: {
-        base: [
-          "bg-warning-soft",
-          "border-warning-soft",
-          "text-warning-main",
-          "hover:border-warning-light",
-          "hover:bg-warning-light",
-          "data-[loading=true]:border-warning-light",
-          "data-[loading=true]:bg-warning-light"
-        ]
+        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
       }
     },
     {
-      variant: "tonal",
+      variant: "outline",
       color: "danger",
       class: {
-        base: [
-          "bg-danger-soft",
-          "border-danger-soft",
-          "text-danger-main",
-          "hover:border-danger-light",
-          "hover:bg-danger-light",
-          "data-[loading=true]:border-danger-light",
-          "data-[loading=true]:bg-danger-light"
-        ]
+        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
       }
     },
-    // trans & color
+    // ghost & color
     {
-      variant: "trans",
+      variant: "ghost",
       color: "primary",
       class: {
-        base: [
-          "text-primary-main",
-          "border-transparent",
-          "hover:bg-primary-soft",
-          "hover:text-primary-main",
-          "hover:border-primary-soft",
-          "data-[loading=true]:bg-primary-soft",
-          "data-[loading=true]:text-primary-main",
-          "data-[loading=true]:border-primary-soft"
-        ]
+        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
       }
     },
     {
-      variant: "trans",
+      variant: "ghost",
       color: "secondary",
       class: {
-        base: [
-          "text-secondary-main",
-          "border-transparent",
-          "hover:bg-secondary-soft",
-          "hover:text-secondary-main",
-          "hover:border-secondary-soft",
-          "data-[loading=true]:bg-secondary-soft",
-          "data-[loading=true]:text-secondary-main",
-          "data-[loading=true]:border-secondary-soft"
-        ]
+        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
       }
     },
     {
-      variant: "trans",
+      variant: "ghost",
       color: "neutral",
       class: {
-        base: [
-          "text-neutral-main",
-          "border-transparent",
-          "hover:bg-neutral-soft",
-          "hover:text-neutral-main",
-          "hover:border-neutral-soft",
-          "data-[loading=true]:bg-neutral-soft",
-          "data-[loading=true]:text-neutral-main",
-          "data-[loading=true]:border-neutral-soft"
-        ]
+        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
       }
     },
     {
-      variant: "trans",
+      variant: "ghost",
       color: "info",
       class: {
-        base: [
-          "text-info-main",
-          "border-transparent",
-          "hover:bg-info-soft",
-          "hover:text-info-main",
-          "hover:border-info-soft",
-          "data-[loading=true]:bg-info-soft",
-          "data-[loading=true]:text-info-main",
-          "data-[loading=true]:border-info-soft"
-        ]
+        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
       }
     },
-    {
-      variant: "trans",
-      color: "success",
-      class: {
-        base: [
-          "text-success-main",
-          "border-transparent",
-          "hover:bg-success-soft",
-          "hover:text-success-main",
-          "hover:border-success-soft",
-          "data-[loading=true]:bg-success-soft",
-          "data-[loading=true]:text-success-main",
-          "data-[loading=true]:border-success-soft"
-        ]
-      }
-    },
-    {
-      variant: "trans",
-      color: "warning",
-      class: {
-        base: [
-          "text-warning-main",
-          "border-transparent",
-          "hover:bg-warning-soft",
-          "hover:text-warning-main",
-          "hover:border-warning-soft",
-          "data-[loading=true]:bg-warning-soft",
-          "data-[loading=true]:text-warning-main",
-          "data-[loading=true]:border-warning-soft"
-        ]
-      }
-    },
-    {
-      variant: "trans",
-      color: "danger",
-      class: {
-        base: [
-          "text-danger-main",
-          "border-transparent",
-          "hover:bg-danger-soft",
-          "hover:text-danger-main",
-          "hover:border-danger-soft",
-          "data-[loading=true]:bg-danger-soft",
-          "data-[loading=true]:text-danger-main",
-          "data-[loading=true]:border-danger-soft"
-        ]
-      }
-    },
-    // ghost & color
     {
       variant: "ghost",
-      color: "primary",
+      color: "success",
       class: {
-        base: [
-          "text-primary-main",
-          "border-primary-main",
-          "hover:text-white",
-          "hover:bg-primary-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-primary-main"
-        ]
+        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
       }
     },
     {
       variant: "ghost",
-      color: "secondary",
+      color: "warning",
       class: {
-        base: [
-          "text-secondary-main",
-          "border-secondary-main",
-          "hover:text-white",
-          "hover:bg-secondary-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-secondary-main"
-        ]
+        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
       }
     },
     {
       variant: "ghost",
-      color: "neutral",
+      color: "danger",
       class: {
-        base: [
-          "text-neutral-main",
-          "border-neutral-main",
-          "hover:text-white",
-          "hover:bg-neutral-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-neutral-main"
-        ]
+        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
       }
     },
+    // variant && size
     {
-      variant: "ghost",
-      color: "info",
+      variant: ["soft", "outline"],
+      size: "sm",
       class: {
-        base: [
-          "text-info-main",
-          "border-info-main",
-          "hover:text-white",
-          "hover:bg-info-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-info-main"
-        ]
+        base: "border-[1px]"
       }
     },
     {
-      variant: "ghost",
-      color: "success",
+      variant: ["soft", "outline"],
+      size: "md",
       class: {
-        base: [
-          "text-success-main",
-          "border-success-main",
-          "hover:text-white",
-          "hover:bg-success-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-success-main"
-        ]
+        base: "border-[1.25px]"
       }
     },
     {
-      variant: "ghost",
-      color: "warning",
+      variant: ["soft", "outline"],
+      size: "lg",
       class: {
-        base: [
-          "text-warning-main",
-          "border-warning-main",
-          "hover:text-white",
-          "hover:bg-warning-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-warning-main"
-        ]
+        base: "border-[1.5px]"
       }
     },
     {
-      variant: "ghost",
-      color: "danger",
+      variant: ["soft", "outline"],
+      size: "xl",
       class: {
-        base: [
-          "text-danger-main",
-          "border-danger-main",
-          "hover:text-white",
-          "hover:bg-danger-main",
-          "data-[loading=true]:text-white",
-          "data-[loading=true]:bg-danger-main"
-        ]
+        base: "border-[1.75px]"
       }
     },
-    // variant && isInGroup
+    // variant && isDisabled
     {
-      variant: ["line", "ghost"],
-      isInGroup: true,
+      variant: ["soft", "ghost"],
+      isDisabled: true,
       class: {
-        base: "[&:not(:last-child)]:border-r-0"
+        base: "!border-neutral-soft"
       }
     },
-    // variant && isDisabled
     {
-      variant: ["line", "ghost"],
+      variant: ["outline"],
       isDisabled: true,
       class: {
         base: "!border-neutral-light"