@oneplatformdev/ui 0.1.99-beta.30 → 0.1.99-beta.300

package/Button/buttonVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;8EA+I1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;;;;;8EAoE/B,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;8EA8K1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;;;;;8EAqE/B,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/Button/buttonVariants.js

@@ -1,6 +1,6 @@
-import { cva as r } from "class-variance-authority";
+import { cva as t } from "class-variance-authority";
 import { cn as e } from "@oneplatformdev/utils";
-const s = r(
+const s = t(
   [
     "inline-flex items-center justify-center box-border",
     "whitespace-nowrap font-medium",
@@ -16,7 +16,8 @@ const s = r(
         none: "",
         contained: "",
         outlined: "",
-        ghost: ""
+        ghost: "",
+        text: ""
       },
       color: {
         primary: "",
@@ -70,6 +71,17 @@ const s = r(
           "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
       },
+      {
+        color: "primary",
+        variant: "text",
+        className: e(
+          "min-h-auto h-auto p-0",
+          "bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]",
+          "hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]",
+          "focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]",
+          "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
+        )
+      },
       // SECONDARY BUTTON VARIANTS
       {
         color: "secondary",
@@ -104,6 +116,15 @@ const s = r(
           "disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
       },
+      {
+        color: "secondary",
+        variant: "text",
+        className: e(
+          "min-h-auto h-auto p-0",
+          "text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent",
+          "disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
+        )
+      },
       // ERROR BUTTON VARIANTS
       {
         color: "error",
@@ -135,6 +156,16 @@ const s = r(
           "active:bg-[#DC26260F] active:border-[#DC2626]",
           "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
+      },
+      {
+        color: "error",
+        variant: "text",
+        className: e(
+          "min-h-auto h-auto p-0",
+          "bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]",
+          "hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]",
+          "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
+        )
       }
     ],
     defaultVariants: {
@@ -143,7 +174,7 @@ const s = r(
       size: "lg"
     }
   }
-), o = r(
+), o = t(
   [
     "absolute z-0",
     "flex items-center justify-center text-center p-0",
@@ -156,7 +187,8 @@ const s = r(
         none: "",
         contained: "",
         outlined: "",
-        ghost: ""
+        ghost: "",
+        text: ""
       },
       color: {
         primary: "",

package/Button/buttonVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center box-border\",\n    'whitespace-nowrap font-medium',\n    'cursor-pointer',\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n    \"disabled:pointer-events-none disabled:cursor-default\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\n  ],\n  {\n    variants: {\n      variant: {\n        none: \"\",\n        contained: \"\",\n        outlined: \"\",\n        ghost: '',\n      },\n      color: {\n        primary: '',\n        secondary: '',\n        error: '',\n      },\n      size: {\n        xs: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\n        sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\n        md: cn(\n          'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\n          'text-sm leading-[1.12] [&_svg]:size-6',\n        ),\n        lg: cn(\n          \"min-h-10 min-w-35 rounded-lg gap-1 px-2.5 py-1.5\",\n          'text-base leading-normal [&_svg]:size-6',\n        )\n      }\n    },\n    compoundVariants: [\n      // PRIMARY BUTTON VARIANTS\n      {\n        color: 'primary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#7F4EEB]',\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n          'active:bg-[#6B3DD9]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:bg-[#9368FF0F]',\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n          'active:bg-[#9368FF0F]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // SECONDARY BUTTON VARIANTS\n      {\n        color: 'secondary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'ghost',\n        className: cn(\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n          'hover:bg-[#F9FAFB]',\n          'focus:bg-[#FCFCFC]',\n          'active:bg-[#F9FAFB]',\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ERROR BUTTON VARIANTS\n      {\n        color: 'error',\n        variant: 'contained',\n        className: cn(\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#DC2626]',\n          'focus:bg-[#DC2626]',\n          'active:bg-[#DC2626]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      variant: 'contained',\n      color: 'primary',\n      size: 'lg',\n    },\n  }\n)\n\nexport type ButtonVarianceProps = VariantProps<typeof buttonVariants>;\n\nexport const buttonBadgeVariants = cva(\n  [\n    'absolute z-0',\n    'flex items-center justify-center text-center p-0',\n    'font-medium leading-none tracking-tighter',\n    'rounded-full w-fit min-w-4 h-4 text-[10px] px-0.5 box-border',\n  ],\n  {\n    variants: {\n      variant: {\n        none: '',\n        contained: '',\n        outlined: '',\n        ghost: \"\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        error: \"\"\n      },\n      size: {\n        xs: '',\n        sm: '',\n        md: '',\n        lg: '-top-[2px] left-[14px]',\n      },\n      rounded: {\n        true: 'left-1/2 -translate-x-1/2 -translate-y-1/2',\n        false: '',\n      },\n      disabled: {\n        true: '',\n        false: '',\n      }\n    },\n    compoundVariants: [\n      // SIZE XS\n      { size: 'xs', rounded: false, className: '-top-px -right-px translate-x-1/2 -translate-y-1/2' },\n      { size: 'xs', rounded: true, className: '-top-px' },\n      // SIZE SM\n      { size: 'sm', rounded: false, className: 'top-0 right-0 translate-x-1/2 -translate-y-1/2' },\n      { size: 'sm', rounded: true, className: '-top-[3px]' },\n      // SIZE MD\n      { size: 'md', rounded: false, className: '-top-[4px] left-[12px]' },\n      { size: 'md', rounded: true, className: '-top-[6px]' },\n      // SIZE LG\n      { size: 'lg', rounded: false, className: '-top-[4px] left-[12px]' },\n      { size: 'lg', rounded: true, className: '-top-2' },\n\n      // COLORS\n      {\n        color: ['primary', 'secondary', 'error'],\n        className: 'bg-[#9368FF] text-[#FCFCFC]',\n      },\n      {\n        color: ['primary', 'secondary', 'error'],\n        disabled: true,\n        className: 'bg-[#666A78] text-[#FCFCFC]'\n      },\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      disabled: false,\n      rounded: false,\n    },\n  }\n)\nexport type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;\n"],"names":["buttonVariants","cva","cn","buttonBadgeVariants"],"mappings":"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"}
+{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nexport const buttonVariants = cva(\r\n  [\r\n    \"inline-flex items-center justify-center box-border\",\r\n    'whitespace-nowrap font-medium',\r\n    'cursor-pointer',\r\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\r\n    \"disabled:pointer-events-none disabled:cursor-default\",\r\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n    'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\r\n  ],\r\n  {\r\n    variants: {\r\n      variant: {\r\n        none: \"\",\r\n        contained: \"\",\r\n        outlined: \"\",\r\n        ghost: '',\r\n        text: '',\r\n      },\r\n      color: {\r\n        primary: '',\r\n        secondary: '',\r\n        error: '',\r\n      },\r\n      size: {\r\n        xs: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\r\n        sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\r\n        md: cn(\r\n          'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\r\n          'text-sm leading-[1.12] [&_svg]:size-6',\r\n        ),\r\n        lg: cn(\r\n          \"min-h-10 min-w-35 rounded-lg gap-1 px-2.5 py-1.5\",\r\n          'text-base leading-normal [&_svg]:size-6',\r\n        )\r\n      }\r\n    },\r\n    compoundVariants: [\r\n      // PRIMARY BUTTON VARIANTS\r\n      {\r\n        color: 'primary',\r\n        variant: 'contained',\r\n        className: cn(\r\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n          'hover:bg-[#7F4EEB]',\r\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\r\n          'active:bg-[#6B3DD9]',\r\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'primary',\r\n        variant: 'outlined',\r\n        className: cn(\r\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n          'hover:bg-[#9368FF0F]',\r\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\r\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'primary',\r\n        variant: 'ghost',\r\n        className: cn(\r\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\r\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\r\n          'active:bg-[#9368FF0F]',\r\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'primary',\r\n        variant: 'text',\r\n        className: cn(\r\n          'min-h-auto h-auto p-0',\r\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\r\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\r\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      // SECONDARY BUTTON VARIANTS\r\n      {\r\n        color: 'secondary',\r\n        variant: 'contained',\r\n        className: cn(\r\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'secondary',\r\n        variant: 'outlined',\r\n        className: cn(\r\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'secondary',\r\n        variant: 'ghost',\r\n        className: cn(\r\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\r\n          'hover:bg-[#F9FAFB]',\r\n          'focus:bg-[#FCFCFC]',\r\n          'active:bg-[#F9FAFB]',\r\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'secondary',\r\n        variant: 'text',\r\n        className: cn(\r\n          'min-h-auto h-auto p-0',\r\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\r\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      // ERROR BUTTON VARIANTS\r\n      {\r\n        color: 'error',\r\n        variant: 'contained',\r\n        className: cn(\r\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n          'hover:bg-[#DC2626]',\r\n          'focus:bg-[#DC2626]',\r\n          'active:bg-[#DC2626]',\r\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'error',\r\n        variant: 'outlined',\r\n        className: cn(\r\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n          'hover:bg-[#EF44440F]',\r\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'error',\r\n        variant: 'ghost',\r\n        className: cn(\r\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\r\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n      {\r\n        color: 'error',\r\n        variant: 'text',\r\n        className: cn(\r\n          'min-h-auto h-auto p-0',\r\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n          'hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\r\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      },\r\n    ],\r\n    defaultVariants: {\r\n      variant: 'contained',\r\n      color: 'primary',\r\n      size: 'lg',\r\n    },\r\n  }\r\n)\r\n\r\nexport type ButtonVarianceProps = VariantProps<typeof buttonVariants>;\r\n\r\nexport const buttonBadgeVariants = cva(\r\n  [\r\n    'absolute z-0',\r\n    'flex items-center justify-center text-center p-0',\r\n    'font-medium leading-none tracking-tighter',\r\n    'rounded-full w-fit min-w-4 h-4 text-[10px] px-0.5 box-border',\r\n  ],\r\n  {\r\n    variants: {\r\n      variant: {\r\n        none: '',\r\n        contained: '',\r\n        outlined: '',\r\n        ghost: '',\r\n        text: '',\r\n      },\r\n      color: {\r\n        primary: \"\",\r\n        secondary: \"\",\r\n        error: \"\"\r\n      },\r\n      size: {\r\n        xs: '',\r\n        sm: '',\r\n        md: '',\r\n        lg: '-top-[2px] left-[14px]',\r\n      },\r\n      rounded: {\r\n        true: 'left-1/2 -translate-x-1/2 -translate-y-1/2',\r\n        false: '',\r\n      },\r\n      disabled: {\r\n        true: '',\r\n        false: '',\r\n      }\r\n    },\r\n    compoundVariants: [\r\n      // SIZE XS\r\n      { size: 'xs', rounded: false, className: '-top-px -right-px translate-x-1/2 -translate-y-1/2' },\r\n      { size: 'xs', rounded: true, className: '-top-px' },\r\n      // SIZE SM\r\n      { size: 'sm', rounded: false, className: 'top-0 right-0 translate-x-1/2 -translate-y-1/2' },\r\n      { size: 'sm', rounded: true, className: '-top-[3px]' },\r\n      // SIZE MD\r\n      { size: 'md', rounded: false, className: '-top-[4px] left-[12px]' },\r\n      { size: 'md', rounded: true, className: '-top-[6px]' },\r\n      // SIZE LG\r\n      { size: 'lg', rounded: false, className: '-top-[4px] left-[12px]' },\r\n      { size: 'lg', rounded: true, className: '-top-2' },\r\n\r\n      // COLORS\r\n      {\r\n        color: ['primary', 'secondary', 'error'],\r\n        className: 'bg-[#9368FF] text-[#FCFCFC]',\r\n      },\r\n      {\r\n        color: ['primary', 'secondary', 'error'],\r\n        disabled: true,\r\n        className: 'bg-[#666A78] text-[#FCFCFC]'\r\n      },\r\n    ],\r\n    defaultVariants: {\r\n      color: \"primary\",\r\n      variant: \"contained\",\r\n      size: \"lg\",\r\n      disabled: false,\r\n      rounded: false,\r\n    },\r\n  }\r\n)\r\nexport type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;\r\n"],"names":["buttonVariants","cva","cn","buttonBadgeVariants"],"mappings":"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"}

package/Button/index.d.ts

@@ -1,4 +1,5 @@
 export { Button as default, Button } from './Button';
 export * from './buttonVariants';
 export type * from './Button.types';
+export * from './Button.utils';
 //# sourceMappingURL=index.d.ts.map

package/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACrD,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACrD,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,gBAAgB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/Button/index.js

@@ -1,9 +1,11 @@
-import { Button as a, Button as n } from "./Button.js";
-import { buttonBadgeVariants as u, buttonVariants as e } from "./buttonVariants.js";
+import { Button as r, Button as n } from "./Button.js";
+import { buttonBadgeVariants as a, buttonVariants as u } from "./buttonVariants.js";
+import { renderInnerIcon as d } from "./Button.utils.js";
 export {
-  a as Button,
-  u as buttonBadgeVariants,
-  e as buttonVariants,
-  n as default
+  r as Button,
+  a as buttonBadgeVariants,
+  u as buttonVariants,
+  n as default,
+  d as renderInnerIcon
 };
 //# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/ButtonIcon/ButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAerD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU,2FAgFtB,CAAA;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU,2FAgFtB,CAAA;AAED,eAAe,UAAU,CAAC"}

package/ButtonIcon/ButtonIcon.js

@@ -1,80 +1,79 @@
-import { jsxs as g, Fragment as R, jsx as r } from "react/jsx-runtime";
-import * as j from "react";
-import { isValidElement as E, createElement as I } from "react";
-import { cn as V } from "@oneplatformdev/utils";
+import { jsxs as f, Fragment as C, jsx as t } from "react/jsx-runtime";
+import * as R from "react";
+import { cn as j } from "@oneplatformdev/utils";
 import { buttonIconVariants as w } from "./buttonIconVariants.js";
 import { Slot as z } from "@radix-ui/react-slot";
-import "@radix-ui/react-tooltip";
-import { Tooltip as F } from "../Tooltip/Tooltip.js";
-import { LoadedIcon as L } from "../LoadedIcon/LoadedIcon.js";
-import { ButtonCounterBadge as P } from "../Button/ButtonCounterBadge.js";
-const S = (t) => t ? E(t) ? t : I(t) : null, T = j.forwardRef(
-  (t, h) => {
+import { ButtonCounterBadge as F } from "../Button/ButtonCounterBadge.js";
+import { renderInnerIcon as L } from "../Button/Button.utils.js";
+import { LoadedIcon as P } from "../LoadedIcon/LoadedIcon.js";
+import { Tooltip as S } from "../Tooltip/Tooltip.js";
+const T = R.forwardRef(
+  (g, h) => {
     const {
-      asChild: a,
-      children: m,
+      asChild: i,
+      children: a,
       icon: b,
-      disabled: e = !1,
-      loading: n = !1,
+      disabled: n = !1,
+      loading: r = !1,
       message: y,
-      title: x = "",
-      tooltipProps: l = {},
-      className: B,
-      variant: c,
+      title: I = "",
+      tooltipProps: c = {},
+      className: x,
+      variant: m,
       color: p,
-      size: s,
-      rounded: u,
+      size: e,
+      rounded: l,
       screenReader: o,
-      counter: N,
-      ...v
-    } = t, C = a ? z : "button", i = y || x, d = a ? m : /* @__PURE__ */ g(R, { children: [
-      /* @__PURE__ */ g(L, { loading: n, size: s, children: [
-        S(b) ?? m,
-        /* @__PURE__ */ r(
-          P,
+      counter: B,
+      ...N
+    } = g, v = i ? z : "button", s = y || I, d = i ? a : /* @__PURE__ */ f(C, { children: [
+      /* @__PURE__ */ f(P, { loading: r, size: e, children: [
+        L(b) ?? a,
+        /* @__PURE__ */ t(
+          F,
           {
-            counter: N,
-            variant: c,
+            counter: B,
+            variant: m,
             color: p,
-            size: s,
-            disabled: e,
-            rounded: u
+            size: e,
+            disabled: n,
+            rounded: l
           }
         )
       ] }),
-      !!o && /* @__PURE__ */ r("span", { className: "sr-only", children: typeof o == "string" ? o : o.text })
+      !!o && /* @__PURE__ */ t("span", { className: "sr-only", children: typeof o == "string" ? o : o.text })
     ] });
     if (!d) return null;
-    const f = /* @__PURE__ */ r(
-      C,
+    const u = /* @__PURE__ */ t(
+      v,
       {
         type: "button",
         ref: h,
-        disabled: e,
-        className: V(
+        disabled: n,
+        className: j(
           "group group/button group/button-icon",
           w({
-            variant: c,
-            size: s,
+            variant: m,
+            size: e,
             color: p,
-            rounded: u,
-            className: B
+            rounded: l,
+            className: x
           }),
-          n && "pointer-events-none opacity-80"
+          r && "pointer-events-none opacity-80"
         ),
-        ...v,
+        ...N,
         children: d
       }
     );
-    return i ? /* @__PURE__ */ r(
-      F,
+    return s ? /* @__PURE__ */ t(
+      S,
       {
-        ...l || {},
-        open: l.open ?? (e || n || !i) ? !1 : void 0,
-        message: i,
-        children: f
+        ...c || {},
+        open: c.open ?? (n || r || !s) ? !1 : void 0,
+        message: s,
+        children: u
       }
-    ) : f;
+    ) : u;
   }
 );
 T.displayName = "Button";

package/ButtonIcon/ButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { ButtonIconType } from \"../Button\";\nimport { createElement, isValidElement } from \"react\";\nimport { ButtonCounterBadge } from \"../Button/ButtonCounterBadge\";\n\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\n  if (!Icon) return null;\n  if (isValidElement(Icon)) return Icon;\n  return createElement(Icon);\n};\n\n/**\n * Icon-only version of the Button component.\n *\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\n * ```\n * > Basic usage by icon:\n * ```tsx\n *<ButtonIcon icon={<PlusIcon />}/>\n *<ButtonIcon icon={PlusIcon}/>\n * ```\n * > Basic usage by children:\n * ```tsx\n *<ButtonIcon>\n *  <PlusIcon />\n *</ButtonIcon>\n * ```\n * > With variant & color:\n * ```tsx\n *<ButtonIcon variant=\"outline\" color=\"primary\">\n *  <Search />\n *</ButtonIcon>\n * ```\n * > With tooltip message:\n * ```tsx\n *<ButtonIcon message=\"Edit item\">\n *  <PencilLine />\n *</ButtonIcon>\n * ```\n * > Loading state:\n * ```tsx\n *<ButtonIcon loading>\n *  <Trash2 />\n *</ButtonIcon>\n * ```\n * > Badge counter:\n * ```tsx\n *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>\n *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>\n * ```\n *\n * @remarks\n * - Designed for icon-only usage. If you need text, use `Button`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link Button} for regular text buttons\n */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (props, ref) => {\n    const {\n      asChild,\n      children,\n      icon,\n      disabled = false,\n      loading = false,\n      message,\n      title = '',\n      tooltipProps = {},\n      className,\n      variant,\n      color,\n      size,\n      rounded,\n      screenReader,\n      counter,\n      ...rest\n    } = props;\n\n    const Comp = asChild ? Slot : \"button\"\n    const msg = message || title;\n\n    const content = asChild\n      ? children\n      : (\n        <>\n          <LoadedIcon loading={loading} size={size}>\n            {renderInnerIcon(icon) ?? children}\n            <ButtonCounterBadge\n              counter={counter}\n              variant={variant}\n              color={color}\n              size={size}\n              disabled={disabled}\n              rounded={rounded}\n            />\n          </LoadedIcon>\n\n          {!!screenReader && (\n            <span className=\"sr-only\">\n              {typeof screenReader === 'string' ? screenReader : screenReader.text}\n            </span>\n          )}\n        </>\n      )\n\n    if (!content) return null;\n\n    const cmp = (\n      <Comp\n        type='button'\n        ref={ref}\n        disabled={disabled}\n        className={cn(\n          'group group/button group/button-icon',\n          buttonIconVariants({\n            variant, size, color, rounded,\n            className\n          }),\n          loading && 'pointer-events-none opacity-80',\n        )}\n        {...rest}\n      >\n        {content}\n      </Comp>\n    )\n\n    if (!msg) return cmp\n    return (\n      <Tooltip\n        {...(tooltipProps || {})}\n        open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n        message={msg}\n      >\n        {cmp}\n      </Tooltip>\n    )\n  }\n)\nButtonIcon.displayName = \"Button\"\nexport default ButtonIcon;\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","counter","rest","Comp","Slot","msg","content","jsxs","Fragment","LoadedIcon","jsx","ButtonCounterBadge","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MA4DPG,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDjB,GAEEkB,IAAOhB,IAAUiB,IAAO,UACxBC,IAAMb,KAAWC,GAEjBa,IAAUnB,IACZC,IAEA,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAW,SAAAlB,GAAkB,MAAAO,GAC3B,UAAA;AAAA,QAAAnB,EAAgBU,CAAI,KAAKD;AAAA,QAC1B,gBAAAsB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAV;AAAA,YACA,SAAAL;AAAA,YACA,OAAAC;AAAA,YACA,MAAAC;AAAA,YACA,UAAAR;AAAA,YACA,SAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEC,CAAC,CAACC,KACD,gBAAAU,EAAC,QAAA,EAAK,WAAU,WACb,UAAA,OAAOV,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,IAAA,GAEJ;AAGJ,QAAI,CAACM,EAAS,QAAO;AAErB,UAAMM,IACJ,gBAAAF;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAjB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWuB;AAAA,UACT;AAAA,UACAC,EAAmB;AAAA,YACjB,SAAAlB;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGW;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAK;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIrB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACc,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAO;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACA7B,EAAW,cAAc;"}
+{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { buttonIconVariants } from './buttonIconVariants';\r\nimport { ButtonIconProps } from './ButtonIcon.types';\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\n\r\nimport { Tooltip } from '../Tooltip';\r\nimport { LoadedIcon } from \"../LoadedIcon\";\r\nimport { ButtonCounterBadge } from \"../Button/ButtonCounterBadge\";\r\nimport { renderInnerIcon } from \"../Button\";\r\n\r\n/**\r\n * Icon-only version of the Button component.\r\n *\r\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\r\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\r\n *\r\n * @public\r\n * @see [Documentation](#) // TODO: add link to docs\r\n *\r\n * @example\r\n * > Import:\r\n * ```tsx\r\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\r\n * ```\r\n * > Basic usage by icon:\r\n * ```tsx\r\n *<ButtonIcon icon={<PlusIcon />}/>\r\n *<ButtonIcon icon={PlusIcon}/>\r\n * ```\r\n * > Basic usage by children:\r\n * ```tsx\r\n *<ButtonIcon>\r\n *  <PlusIcon />\r\n *</ButtonIcon>\r\n * ```\r\n * > With variant & color:\r\n * ```tsx\r\n *<ButtonIcon variant=\"outline\" color=\"primary\">\r\n *  <Search />\r\n *</ButtonIcon>\r\n * ```\r\n * > With tooltip message:\r\n * ```tsx\r\n *<ButtonIcon message=\"Edit item\">\r\n *  <PencilLine />\r\n *</ButtonIcon>\r\n * ```\r\n * > Loading state:\r\n * ```tsx\r\n *<ButtonIcon loading>\r\n *  <Trash2 />\r\n *</ButtonIcon>\r\n * ```\r\n * > Badge counter:\r\n * ```tsx\r\n *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>\r\n *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>\r\n * ```\r\n *\r\n * @remarks\r\n * - Designed for icon-only usage. If you need text, use `Button`.\r\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\r\n *\r\n * @see {@link Button} for regular text buttons\r\n */\r\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\r\n  (props, ref) => {\r\n    const {\r\n      asChild,\r\n      children,\r\n      icon,\r\n      disabled = false,\r\n      loading = false,\r\n      message,\r\n      title = '',\r\n      tooltipProps = {},\r\n      className,\r\n      variant,\r\n      color,\r\n      size,\r\n      rounded,\r\n      screenReader,\r\n      counter,\r\n      ...rest\r\n    } = props;\r\n\r\n    const Comp = asChild ? Slot : \"button\"\r\n    const msg = message || title;\r\n\r\n    const content = asChild\r\n      ? children\r\n      : (\r\n        <>\r\n          <LoadedIcon loading={loading} size={size}>\r\n            {renderInnerIcon(icon) ?? children}\r\n            <ButtonCounterBadge\r\n              counter={counter}\r\n              variant={variant}\r\n              color={color}\r\n              size={size}\r\n              disabled={disabled}\r\n              rounded={rounded}\r\n            />\r\n          </LoadedIcon>\r\n\r\n          {!!screenReader && (\r\n            <span className=\"sr-only\">\r\n              {typeof screenReader === 'string' ? screenReader : screenReader.text}\r\n            </span>\r\n          )}\r\n        </>\r\n      )\r\n\r\n    if (!content) return null;\r\n\r\n    const cmp = (\r\n      <Comp\r\n        type='button'\r\n        ref={ref}\r\n        disabled={disabled}\r\n        className={cn(\r\n          'group group/button group/button-icon',\r\n          buttonIconVariants({\r\n            variant, size, color, rounded,\r\n            className\r\n          }),\r\n          loading && 'pointer-events-none opacity-80',\r\n        )}\r\n        {...rest}\r\n      >\r\n        {content}\r\n      </Comp>\r\n    )\r\n\r\n    if (!msg) return cmp\r\n    return (\r\n      <Tooltip\r\n        {...(tooltipProps || {})}\r\n        open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\r\n        message={msg}\r\n      >\r\n        {cmp}\r\n      </Tooltip>\r\n    )\r\n  }\r\n)\r\nButtonIcon.displayName = \"Button\"\r\nexport default ButtonIcon;\r\n"],"names":["ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","counter","rest","Comp","Slot","msg","content","jsxs","Fragment","LoadedIcon","renderInnerIcon","jsx","ButtonCounterBadge","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;AAmEO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDjB,GAEEkB,IAAOhB,IAAUiB,IAAO,UACxBC,IAAMb,KAAWC,GAEjBa,IAAUnB,IACZC,IAEA,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAW,SAAAlB,GAAkB,MAAAO,GAC3B,UAAA;AAAA,QAAAY,EAAgBrB,CAAI,KAAKD;AAAA,QAC1B,gBAAAuB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAX;AAAA,YACA,SAAAL;AAAA,YACA,OAAAC;AAAA,YACA,MAAAC;AAAA,YACA,UAAAR;AAAA,YACA,SAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEC,CAAC,CAACC,KACD,gBAAAW,EAAC,QAAA,EAAK,WAAU,WACb,UAAA,OAAOX,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,IAAA,GAEJ;AAGJ,QAAI,CAACM,EAAS,QAAO;AAErB,UAAMO,IACJ,gBAAAF;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAjB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWwB;AAAA,UACT;AAAA,UACAC,EAAmB;AAAA,YACjB,SAAAnB;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGW;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAItB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACc,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAQ;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACA9B,EAAW,cAAc;"}

package/ButtonIcon/ButtonIcon.stories.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { ButtonIcon as t } from "./ButtonIcon.js";
-import { FileDownIcon as c, Trash2Icon as l, PlusIcon as a, MessageCircleMoreIcon as y } from "lucide-react";
+import { MailIcon as p, FileDownIcon as c, Trash2Icon as l, PlusIcon as a, MessageCircleMoreIcon as B } from "lucide-react";
 import { DashedWrapper as s } from "../.storybook/Wrappers.js";
 const h = (e) => /* @__PURE__ */ o(t, { ...e });
 h.args = {
@@ -37,19 +37,21 @@ const r = (e) => /* @__PURE__ */ o(
     /* @__PURE__ */ o(r, { ...e, variant: "outlined", rounded: !0 }),
     /* @__PURE__ */ o(r, { ...e, variant: "ghost", rounded: !0 })
   ] })
-] }), p = ["contained", "outlined", "ghost"], f = ["primary", "secondary", "error"], d = ["xs", "sm", "md", "lg"], B = "contained", b = "primary", x = "lg", g = {
+] }), f = ["contained", "outlined", "ghost"], g = ["primary", "secondary", "error"], d = ["xs", "sm", "md", "lg"], b = "contained", x = "primary", P = "lg", v = {
   undefined: void 0,
   "<PlusIcon />": /* @__PURE__ */ o(a, {}),
   "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
   "<FileDownIcon />": /* @__PURE__ */ o(c, {}),
+  "<MailIcon />": /* @__PURE__ */ o(p, {}),
   PlusIcon: a,
   Trash2Icon: l,
-  FileDownIcon: c
-}, v = {
+  FileDownIcon: c,
+  MailIcon: p
+}, I = {
   "<PlusIcon />": /* @__PURE__ */ o(a, {}),
   "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
   "<FileDownIcon />": /* @__PURE__ */ o(c, {})
-}, I = {
+}, y = {
   title: "ButtonIcon",
   component: t,
   render: h,
@@ -58,9 +60,9 @@ const r = (e) => /* @__PURE__ */ o(
     disabled: !1,
     loading: !1,
     rounded: !1,
-    variant: B,
-    color: b,
-    size: x,
+    variant: b,
+    color: x,
+    size: P,
     children: /* @__PURE__ */ o(a, {}),
     icon: void 0,
     message: void 0,
@@ -80,15 +82,15 @@ const r = (e) => /* @__PURE__ */ o(
     variant: {
       name: "variant",
       description: "ButtonIcon variant",
-      defaultValue: p[0],
-      options: p,
+      defaultValue: f[0],
+      options: f,
       control: { type: "inline-radio" }
     },
     color: {
       name: "color",
       description: "ButtonIcon color",
-      defaultValue: f[0],
-      options: f,
+      defaultValue: g[0],
+      options: g,
       control: { type: "inline-radio" }
     },
     size: {
@@ -126,15 +128,15 @@ const r = (e) => /* @__PURE__ */ o(
     icon: {
       name: "icon",
       description: "ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
-      options: Object.keys(g),
-      mapping: g,
+      options: Object.keys(v),
+      mapping: v,
       control: { type: "inline-radio" }
     },
     children: {
       name: "children",
       description: "ButtonIcon children from ButtonIconProps [`ReactNode`]",
-      options: Object.keys(v),
-      mapping: v,
+      options: Object.keys(I),
+      mapping: I,
       control: { type: "inline-radio" }
     },
     counter: {
@@ -157,13 +159,13 @@ const r = (e) => /* @__PURE__ */ o(
   loading: !1,
   rounded: !1,
   children: /* @__PURE__ */ o(a, {})
-}, M = {
+}, j = {
   args: {
-    ...I.args,
+    ...y.args,
     icon: c,
     children: void 0
   }
-}, j = {
+}, E = {
   render: (e) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: d.map((n) => /* @__PURE__ */ i(s, { children: [
     /* @__PURE__ */ o(t, { ...e, size: n, message: "from counter" }),
     /* @__PURE__ */ o(t, { ...e, size: n, counter: 0, message: "count=0" }),
@@ -172,10 +174,10 @@ const r = (e) => /* @__PURE__ */ o(
     /* @__PURE__ */ o(t, { ...e, size: n, counter: 999, message: "count=999" })
   ] }, n)) }),
   args: {
-    ...I.args,
+    ...y.args,
     variant: "ghost",
     color: "secondary",
-    icon: y,
+    icon: B,
     counter: 12,
     title: "counter"
   },
@@ -184,7 +186,7 @@ const r = (e) => /* @__PURE__ */ o(
       include: ["counter", "variant", "color", "disabled", "loading", "rounded"]
     }
   }
-}, P = {
+}, C = {
   args: {
     ...m,
     color: "primary",
@@ -196,10 +198,10 @@ const r = (e) => /* @__PURE__ */ o(
   },
   render: u
 };
-P.parameters = {
+C.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const C = {
+const T = {
   args: {
     ...m,
     color: "secondary",
@@ -211,10 +213,10 @@ const C = {
   },
   render: u
 };
-C.parameters = {
+T.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const T = {
+const S = {
   args: {
     ...m,
     color: "error",
@@ -226,15 +228,15 @@ const T = {
   },
   render: u
 };
-T.parameters = {
+S.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
 export {
-  j as Counter,
-  M as Default,
-  T as Error,
-  P as Primary,
-  C as Secondary,
-  I as default
+  E as Counter,
+  j as Default,
+  S as Error,
+  C as Primary,
+  T as Secondary,
+  y as default
 };
 //# sourceMappingURL=ButtonIcon.stories.js.map

package/ButtonIcon/ButtonIcon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst States = (props: ButtonIconProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n      .map((state) => (\n        <ButtonIcon\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </ButtonIcon>\n      ))}\n  </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n  <div className='flex'>\n    <DashedWrapper>\n      <States {...props} variant='contained'/>\n      <States {...props} variant='outlined'/>\n      <States {...props} variant='ghost'/>\n    </DashedWrapper>\n    <DashedWrapper>\n      <States {...props} variant='contained' rounded/>\n      <States {...props} variant='outlined' rounded/>\n      <States {...props} variant='ghost' rounded/>\n    </DashedWrapper>\n  </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n  'undefined': undefined,\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n  PlusIcon: PlusIcon,\n  Trash2Icon: Trash2Icon,\n  FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n};\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  args: {\n    asChild: false,\n    disabled: false,\n    loading: false,\n    rounded: false,\n    variant: variant_default,\n    color: color_default,\n    size: size_default,\n    children: <PlusIcon/>,\n    icon: undefined,\n    message: undefined,\n    title: undefined,\n  },\n  argTypes: {\n    tooltip: {\n      name: 'tooltip',\n      description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n      control: false,\n    },\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: variants[0],\n      options: variants,\n      control: { type: 'inline-radio', },\n    },\n    color: {\n      name: 'color',\n      description: 'ButtonIcon color',\n      defaultValue: colors[0],\n      options: colors,\n      control: { type: 'inline-radio' },\n    },\n    size: {\n      name: 'size',\n      description: 'ButtonIcon size',\n      defaultValue: sizes[0],\n      options: sizes,\n      control: { type: 'inline-radio' },\n    },\n    title: {\n      name: 'title',\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'ButtonIcon disabled',\n      control: { type: 'boolean' }\n    },\n    rounded: {\n      name: 'rounded',\n      description: 'ButtonIcon rounded',\n      control: { type: 'boolean' }\n    },\n    loading: {\n      name: 'loading',\n      description: 'ButtonIcon loading',\n      control: { type: 'boolean' }\n    },\n    icon: {\n      name: 'icon',\n      description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    children: {\n      name: 'children',\n      description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n      options: Object.keys(iconChildrenMap),\n      mapping: iconChildrenMap,\n      control: { type: 'inline-radio' },\n    },\n    counter: {\n      name: 'counter',\n      description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\n      control: { type: 'number' },\n    }\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  asChild: false,\n  disabled: false,\n  loading: false,\n  rounded: false,\n  children: <PlusIcon/>,\n}\n\nexport const Default: Story = {\n  args: {\n    ...meta.args,\n    icon: FileDownIcon,\n    children: undefined,\n  }\n};\n\nexport const Counter: Story = {\n  render: (props) => (\n    <div className='flex flex-col gap-3'>\n      {sizes.map((size) => (\n        <DashedWrapper key={size}>\n          <ButtonIcon {...props} size={size} message='from counter'/>\n          <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\n          <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\n          <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\n          <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\n        </DashedWrapper>\n      ))}\n    </div>\n  ),\n  args: {\n    ...meta.args,\n    variant: 'ghost',\n    color: 'secondary',\n    icon: MessageCircleMoreIcon,\n    counter: 12,\n    title: 'counter',\n  },\n  parameters: {\n    controls: {\n      include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\n    },\n  },\n};\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nPrimary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nSecondary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nError.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}
+{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { ButtonIcon } from './ButtonIcon';\r\nimport type { ButtonIconProps } from './ButtonIcon.types';\r\nimport React from 'react';\r\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon, MailIcon } from 'lucide-react'\r\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\r\nimport { ButtonProps } from \"../Button\";\r\n\r\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\r\nTemplate.args = {\r\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\r\n};\r\n\r\nconst States = (props: ButtonIconProps) => (\r\n  <div\r\n    style={{\r\n      position: 'relative',\r\n      display: 'flex',\r\n      flexDirection: 'column',\r\n      gap: '16px',\r\n    }}\r\n  >\r\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\r\n      .map((state) => (\r\n        <ButtonIcon\r\n          key={state}\r\n          id={state}\r\n          {...props}\r\n          disabled={state === 'disabled' || props.disabled}\r\n        >\r\n          {props.children}\r\n        </ButtonIcon>\r\n      ))}\r\n  </div>\r\n);\r\n\r\nconst StateRender = (props: ButtonIconProps) => (\r\n  <div className='flex'>\r\n    <DashedWrapper>\r\n      <States {...props} variant='contained'/>\r\n      <States {...props} variant='outlined'/>\r\n      <States {...props} variant='ghost'/>\r\n    </DashedWrapper>\r\n    <DashedWrapper>\r\n      <States {...props} variant='contained' rounded/>\r\n      <States {...props} variant='outlined' rounded/>\r\n      <States {...props} variant='ghost' rounded/>\r\n    </DashedWrapper>\r\n  </div>\r\n);\r\n\r\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\r\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\r\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\r\n\r\nconst variant_default: ButtonProps['variant'] = 'contained';\r\nconst color_default: ButtonProps['color'] = 'primary';\r\nconst size_default: ButtonProps['size'] = 'lg';\r\n\r\nconst iconMap = {\r\n  'undefined': undefined,\r\n  \"<PlusIcon />\": <PlusIcon/>,\r\n  \"<Trash2Icon />\": <Trash2Icon/>,\r\n  \"<FileDownIcon />\": <FileDownIcon/>,\r\n  \"<MailIcon />\": <MailIcon/>,\r\n  PlusIcon: PlusIcon,\r\n  Trash2Icon: Trash2Icon,\r\n  FileDownIcon: FileDownIcon,\r\n  MailIcon: MailIcon,\r\n};\r\n\r\nconst iconChildrenMap = {\r\n  \"<PlusIcon />\": <PlusIcon/>,\r\n  \"<Trash2Icon />\": <Trash2Icon/>,\r\n  \"<FileDownIcon />\": <FileDownIcon/>,\r\n};\r\n\r\nconst meta = {\r\n  title: 'ButtonIcon',\r\n  component: ButtonIcon,\r\n  render: Template,\r\n  args: {\r\n    asChild: false,\r\n    disabled: false,\r\n    loading: false,\r\n    rounded: false,\r\n    variant: variant_default,\r\n    color: color_default,\r\n    size: size_default,\r\n    children: <PlusIcon/>,\r\n    icon: undefined,\r\n    message: undefined,\r\n    title: undefined,\r\n  },\r\n  argTypes: {\r\n    tooltip: {\r\n      name: 'tooltip',\r\n      description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\r\n      control: false,\r\n    },\r\n    asChild: {\r\n      name: 'asChild',\r\n      description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\r\n      control: false\r\n    },\r\n    variant: {\r\n      name: 'variant',\r\n      description: 'ButtonIcon variant',\r\n      defaultValue: variants[0],\r\n      options: variants,\r\n      control: { type: 'inline-radio', },\r\n    },\r\n    color: {\r\n      name: 'color',\r\n      description: 'ButtonIcon color',\r\n      defaultValue: colors[0],\r\n      options: colors,\r\n      control: { type: 'inline-radio' },\r\n    },\r\n    size: {\r\n      name: 'size',\r\n      description: 'ButtonIcon size',\r\n      defaultValue: sizes[0],\r\n      options: sizes,\r\n      control: { type: 'inline-radio' },\r\n    },\r\n    title: {\r\n      name: 'title',\r\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\r\n      control: { type: 'text' },\r\n    },\r\n    message: {\r\n      name: 'message',\r\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\r\n      control: { type: \"object\" },\r\n    },\r\n    disabled: {\r\n      name: 'disabled',\r\n      description: 'ButtonIcon disabled',\r\n      control: { type: 'boolean' }\r\n    },\r\n    rounded: {\r\n      name: 'rounded',\r\n      description: 'ButtonIcon rounded',\r\n      control: { type: 'boolean' }\r\n    },\r\n    loading: {\r\n      name: 'loading',\r\n      description: 'ButtonIcon loading',\r\n      control: { type: 'boolean' }\r\n    },\r\n    icon: {\r\n      name: 'icon',\r\n      description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\r\n      options: Object.keys(iconMap),\r\n      mapping: iconMap,\r\n      control: { type: 'inline-radio' },\r\n    },\r\n    children: {\r\n      name: 'children',\r\n      description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\r\n      options: Object.keys(iconChildrenMap),\r\n      mapping: iconChildrenMap,\r\n      control: { type: 'inline-radio' },\r\n    },\r\n    counter: {\r\n      name: 'counter',\r\n      description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\r\n      control: { type: 'number' },\r\n    }\r\n  },\r\n  parameters: {\r\n    pseudo: {\r\n      hover: '#hover',\r\n      focus: '#focus',\r\n      active: '#active',\r\n      disabled: '#disabled',\r\n    },\r\n  }\r\n} satisfies Meta<typeof ButtonIcon>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\nconst args: Story['args'] = {\r\n  asChild: false,\r\n  disabled: false,\r\n  loading: false,\r\n  rounded: false,\r\n  children: <PlusIcon/>,\r\n}\r\n\r\nexport const Default: Story = {\r\n  args: {\r\n    ...meta.args,\r\n    icon: FileDownIcon,\r\n    children: undefined,\r\n  }\r\n};\r\n\r\nexport const Counter: Story = {\r\n  render: (props) => (\r\n    <div className='flex flex-col gap-3'>\r\n      {sizes.map((size) => (\r\n        <DashedWrapper key={size}>\r\n          <ButtonIcon {...props} size={size} message='from counter'/>\r\n          <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\r\n          <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\r\n          <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\r\n          <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\r\n        </DashedWrapper>\r\n      ))}\r\n    </div>\r\n  ),\r\n  args: {\r\n    ...meta.args,\r\n    variant: 'ghost',\r\n    color: 'secondary',\r\n    icon: MessageCircleMoreIcon,\r\n    counter: 12,\r\n    title: 'counter',\r\n  },\r\n  parameters: {\r\n    controls: {\r\n      include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\r\n    },\r\n  },\r\n};\r\n\r\nexport const Primary: Story = {\r\n  args: {\r\n    ...args,\r\n    color: 'primary',\r\n    size: 'lg',\r\n  },\r\n  argTypes: {\r\n    variant: { control: false },\r\n    color: { control: false },\r\n  },\r\n  render: StateRender,\r\n};\r\nPrimary.parameters = {\r\n  controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n\r\nexport const Secondary: Story = {\r\n  args: {\r\n    ...args,\r\n    color: 'secondary',\r\n    size: 'lg',\r\n  },\r\n  argTypes: {\r\n    variant: { control: false },\r\n    color: { control: false },\r\n  },\r\n  render: StateRender,\r\n};\r\nSecondary.parameters = {\r\n  controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n\r\nexport const Error: Story = {\r\n  args: {\r\n    ...args,\r\n    color: 'error',\r\n    size: 'lg',\r\n  },\r\n  argTypes: {\r\n    variant: { control: false },\r\n    color: { control: false },\r\n  },\r\n  render: StateRender,\r\n};\r\nError.parameters = {\r\n  controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","MailIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}

package/ButtonIcon/buttonIconVariants.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonIconVariants: (props?: ({
-    variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
+    variant?: "text" | "none" | "contained" | "outlined" | "ghost" | null | undefined;
     color?: "primary" | "secondary" | "error" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     rounded?: boolean | null | undefined;

package/ButtonIcon/buttonIconVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAuJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAwJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/ButtonIcon/buttonIconVariants.js

@@ -16,7 +16,8 @@ const a = r(
         none: "",
         contained: "",
         outlined: "",
-        ghost: ""
+        ghost: "",
+        text: ""
       },
       color: {
         primary: "",