@next-degree/pickle-shared-js 0.12.7 → 0.13.1

package/dist/components/ui/Button.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/ui/Button.tsx
@@ -26,7 +36,8 @@ __export(Button_exports, {
 module.exports = __toCommonJS(Button_exports);
 var import_react_slot = require("@radix-ui/react-slot");
 var import_cva = require("cva");
-var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"), 1);
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -36,24 +47,34 @@ function cn(...inputs) {
 }
 
 // src/components/ui/Button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
 var Button = (0, import_react.forwardRef)(
-  ({ className, variant, size, asChild = false, type = "button", ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    type = "button",
+    children,
+    isLoading = false,
+    ...props
+  }, ref) => {
     const Component = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ import_react.default.createElement(
       Component,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ variant, size, className, isLoading, asChild })),
         type,
         ref,
         ...props
-      }
+      },
+      asChild ? children : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children, isLoading && /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Loader2, { className: "h-5 w-5 animate-spin text-gray-800" })))
     );
   }
 );
 Button.displayName = "Button";
 var buttonVariants = (0, import_cva.cva)(
   [
+    "relative",
     "flex",
     "items-center",
     "justify-center",
@@ -63,7 +84,8 @@ var buttonVariants = (0, import_cva.cva)(
     "outline-2",
     "outline-offset-2",
     "outline-dashed",
-    "outline-transparent"
+    "outline-transparent",
+    "overflow-hidden"
   ],
   {
     variants: {
@@ -110,19 +132,92 @@ var buttonVariants = (0, import_cva.cva)(
           "focus:text-black",
           "focus:outline-purple-100",
           "active:text-purple-80"
+        ],
+        "outline-primary": [
+          "bg-transparent",
+          "border-2",
+          "border-pickle-100",
+          "text-pickle-100",
+          "hover:bg-pickle-100",
+          "hover:text-black",
+          "active:bg-pickle-80",
+          "active:text-black",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "outline-secondary": [
+          "bg-transparent",
+          "border-2",
+          "border-green-80",
+          "text-green-80",
+          "hover:bg-green-80",
+          "hover:text-white",
+          "active:bg-green-90",
+          "active:text-white",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-outline": [
+          "bg-transparent",
+          "text-black",
+          "hover:bg-grey-5",
+          "active:bg-grey-10",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-primary": [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        "icon-secondary": [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
         ]
       },
       size: {
+        "extra-small": ["h-8", "text-xs", "px-3", "py-1"],
         small: ["h-10", "text-sm", "px-4", "py-2"],
         medium: ["h-12", "text-base", "px-6", "py-3"],
         large: ["h-14", "text-lg", "px-8", "py-4"]
+      },
+      isLoading: {
+        true: ["cursor-not-allowed", "pointer-events-none"]
+      },
+      asChild: {
+        true: [],
+        false: ["cursor-pointer", "pointer-events-auto"]
       }
     },
     defaultVariants: {
       variant: "neutral",
-      size: "medium"
+      size: "medium",
+      isLoading: false,
+      asChild: false
     },
     compoundVariants: [
+      {
+        variant: "link",
+        size: "extra-small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
       {
         variant: "link",
         size: "small",
@@ -137,6 +232,66 @@ var buttonVariants = (0, import_cva.cva)(
         variant: "link",
         size: "large",
         class: ["h-6", "text-base", "p-0"]
+      },
+      {
+        variant: "icon-outline",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-outline",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-outline",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-outline",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-primary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-primary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-primary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-primary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
       }
     ]
   }

package/dist/components/ui/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * When true, the component will render its children directly without wrapping them in a button element.\n   * Useful when you want to use the button styles on a different element.\n   * @default false\n   */\n  asChild?: boolean\n}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type = 'button', ...props }, ref) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        type={type}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n      },\n      size: {\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AACrB,iBAAuC;AACvC,mBAAkC;;;ACFlC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADyCM;AALC,IAAM,aAAS;AAAA,EACpB,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,QAC1D;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAMd,IAAM,qBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,CAAC,QAAQ,WAAW,QAAQ,MAAM;AAAA,QACzC,QAAQ,CAAC,QAAQ,aAAa,QAAQ,MAAM;AAAA,QAC5C,OAAO,CAAC,QAAQ,WAAW,QAAQ,MAAM;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,WAAW,KAAK;AAAA,MACjC;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,WAAW,KAAK;AAAA,MACjC;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,aAAa,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { Loader2 } from 'lucide-react'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      type = 'button',\n      children,\n      isLoading = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className, isLoading, asChild }))}\n        type={type}\n        ref={ref}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {isLoading && (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]\">\n                <Loader2 className=\"h-5 w-5 animate-spin text-gray-800\" />\n              </div>\n            )}\n          </>\n        )}\n      </Component>\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n    'overflow-hidden',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n        'outline-primary': [\n          'bg-transparent',\n          'border-2',\n          'border-pickle-100',\n          'text-pickle-100',\n          'hover:bg-pickle-100',\n          'hover:text-black',\n          'active:bg-pickle-80',\n          'active:text-black',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'outline-secondary': [\n          'bg-transparent',\n          'border-2',\n          'border-green-80',\n          'text-green-80',\n          'hover:bg-green-80',\n          'hover:text-white',\n          'active:bg-green-90',\n          'active:text-white',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-outline': [\n          'bg-transparent',\n          'text-black',\n          'hover:bg-grey-5',\n          'active:bg-grey-10',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-primary': [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        'icon-secondary': [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n      },\n      size: {\n        'extra-small': ['h-8', 'text-xs', 'px-3', 'py-1'],\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'pointer-events-none'],\n      },\n      asChild: {\n        true: [],\n        false: ['cursor-pointer', 'pointer-events-auto'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n      isLoading: false,\n      asChild: false,\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'extra-small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":["React"]}

package/dist/components/ui/Button.d.cts

@@ -9,12 +9,6 @@ import React__default from 'react';
  * @extends {VariantProps<typeof buttonVariants>}
  */
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /**
-     * When true, the component will render its children directly without wrapping them in a button element.
-     * Useful when you want to use the button styles on a different element.
-     * @default false
-     */
-    asChild?: boolean;
 }
 /**
  * A versatile button component that supports multiple variants and sizes.
@@ -40,8 +34,10 @@ declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Rea
  * Provides consistent styling across different button variations.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "neutral" | "primary" | "link" | "secondary" | "transparent" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    variant?: "link" | "neutral" | "primary" | "secondary" | "transparent" | "outline-primary" | "outline-secondary" | "icon-outline" | "icon-primary" | "icon-secondary" | null | undefined;
+    size?: "small" | "medium" | "large" | "extra-small" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    asChild?: boolean | null | undefined;
 } & cva_types.ClassProp) | undefined) => string;
 
 export { Button, buttonVariants };

package/dist/components/ui/Button.d.ts

@@ -9,12 +9,6 @@ import React__default from 'react';
  * @extends {VariantProps<typeof buttonVariants>}
  */
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /**
-     * When true, the component will render its children directly without wrapping them in a button element.
-     * Useful when you want to use the button styles on a different element.
-     * @default false
-     */
-    asChild?: boolean;
 }
 /**
  * A versatile button component that supports multiple variants and sizes.
@@ -40,8 +34,10 @@ declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & Rea
  * Provides consistent styling across different button variations.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "neutral" | "primary" | "link" | "secondary" | "transparent" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    variant?: "link" | "neutral" | "primary" | "secondary" | "transparent" | "outline-primary" | "outline-secondary" | "icon-outline" | "icon-primary" | "icon-secondary" | null | undefined;
+    size?: "small" | "medium" | "large" | "extra-small" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    asChild?: boolean | null | undefined;
 } & cva_types.ClassProp) | undefined) => string;
 
 export { Button, buttonVariants };

package/dist/components/ui/Button.js

@@ -1,7 +1,8 @@
 // src/components/ui/Button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "cva";
-import { forwardRef } from "react";
+import { Loader2 } from "lucide-react";
+import React, { forwardRef } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -11,24 +12,34 @@ function cn(...inputs) {
 }
 
 // src/components/ui/Button.tsx
-import { jsx } from "react/jsx-runtime";
 var Button = forwardRef(
-  ({ className, variant, size, asChild = false, type = "button", ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    type = "button",
+    children,
+    isLoading = false,
+    ...props
+  }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ React.createElement(
       Component,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ variant, size, className, isLoading, asChild })),
         type,
         ref,
         ...props
-      }
+      },
+      asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, children, isLoading && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]" }, /* @__PURE__ */ React.createElement(Loader2, { className: "h-5 w-5 animate-spin text-gray-800" })))
     );
   }
 );
 Button.displayName = "Button";
 var buttonVariants = cva(
   [
+    "relative",
     "flex",
     "items-center",
     "justify-center",
@@ -38,7 +49,8 @@ var buttonVariants = cva(
     "outline-2",
     "outline-offset-2",
     "outline-dashed",
-    "outline-transparent"
+    "outline-transparent",
+    "overflow-hidden"
   ],
   {
     variants: {
@@ -85,19 +97,92 @@ var buttonVariants = cva(
           "focus:text-black",
           "focus:outline-purple-100",
           "active:text-purple-80"
+        ],
+        "outline-primary": [
+          "bg-transparent",
+          "border-2",
+          "border-pickle-100",
+          "text-pickle-100",
+          "hover:bg-pickle-100",
+          "hover:text-black",
+          "active:bg-pickle-80",
+          "active:text-black",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "outline-secondary": [
+          "bg-transparent",
+          "border-2",
+          "border-green-80",
+          "text-green-80",
+          "hover:bg-green-80",
+          "hover:text-white",
+          "active:bg-green-90",
+          "active:text-white",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-outline": [
+          "bg-transparent",
+          "text-black",
+          "hover:bg-grey-5",
+          "active:bg-grey-10",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-primary": [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        "icon-secondary": [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
         ]
       },
       size: {
+        "extra-small": ["h-8", "text-xs", "px-3", "py-1"],
         small: ["h-10", "text-sm", "px-4", "py-2"],
         medium: ["h-12", "text-base", "px-6", "py-3"],
         large: ["h-14", "text-lg", "px-8", "py-4"]
+      },
+      isLoading: {
+        true: ["cursor-not-allowed", "pointer-events-none"]
+      },
+      asChild: {
+        true: [],
+        false: ["cursor-pointer", "pointer-events-auto"]
       }
     },
     defaultVariants: {
       variant: "neutral",
-      size: "medium"
+      size: "medium",
+      isLoading: false,
+      asChild: false
     },
     compoundVariants: [
+      {
+        variant: "link",
+        size: "extra-small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
       {
         variant: "link",
         size: "small",
@@ -112,6 +197,66 @@ var buttonVariants = cva(
         variant: "link",
         size: "large",
         class: ["h-6", "text-base", "p-0"]
+      },
+      {
+        variant: "icon-outline",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-outline",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-outline",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-outline",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-primary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-primary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-primary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-primary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
       }
     ]
   }

package/dist/components/ui/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * When true, the component will render its children directly without wrapping them in a button element.\n   * Useful when you want to use the button styles on a different element.\n   * @default false\n   */\n  asChild?: boolean\n}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type = 'button', ...props }, ref) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        type={type}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n      },\n      size: {\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAgB,kBAAkB;;;ACFlC,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADyCM;AALC,IAAM,SAAS;AAAA,EACpB,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,YAAY,UAAU,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,QAC1D;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAMd,IAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,CAAC,QAAQ,WAAW,QAAQ,MAAM;AAAA,QACzC,QAAQ,CAAC,QAAQ,aAAa,QAAQ,MAAM;AAAA,QAC5C,OAAO,CAAC,QAAQ,WAAW,QAAQ,MAAM;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,WAAW,KAAK;AAAA,MACjC;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,WAAW,KAAK;AAAA,MACjC;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO,CAAC,OAAO,aAAa,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/Button.tsx","../../../src/lib/utils.ts"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { Loader2 } from 'lucide-react'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      type = 'button',\n      children,\n      isLoading = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className, isLoading, asChild }))}\n        type={type}\n        ref={ref}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {isLoading && (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]\">\n                <Loader2 className=\"h-5 w-5 animate-spin text-gray-800\" />\n              </div>\n            )}\n          </>\n        )}\n      </Component>\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n    'overflow-hidden',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n        'outline-primary': [\n          'bg-transparent',\n          'border-2',\n          'border-pickle-100',\n          'text-pickle-100',\n          'hover:bg-pickle-100',\n          'hover:text-black',\n          'active:bg-pickle-80',\n          'active:text-black',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'outline-secondary': [\n          'bg-transparent',\n          'border-2',\n          'border-green-80',\n          'text-green-80',\n          'hover:bg-green-80',\n          'hover:text-white',\n          'active:bg-green-90',\n          'active:text-white',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-outline': [\n          'bg-transparent',\n          'text-black',\n          'hover:bg-grey-5',\n          'active:bg-grey-10',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-primary': [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        'icon-secondary': [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n      },\n      size: {\n        'extra-small': ['h-8', 'text-xs', 'px-3', 'py-1'],\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'pointer-events-none'],\n      },\n      asChild: {\n        true: [],\n        false: ['cursor-pointer', 'pointer-events-auto'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n      isLoading: false,\n      asChild: false,\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'extra-small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n    ],\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}