@oneplatformdev/ui 0.1.99-beta.20 → 0.1.99-beta.201

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.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;;;;;8EAsJ9B,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;;;;;8EAuJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/ButtonIcon/buttonIconVariants.js

@@ -7,7 +7,8 @@ const a = r(
     "cursor-pointer box-border",
     "transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
     "disabled:pointer-events-none disabled:cursor-default",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200"
   ],
   {
     variants: {
@@ -138,7 +139,7 @@ const a = r(
         variant: "ghost",
         rounded: !0,
         className: e(
-          "shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
+          "bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
           "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
       }

package/ButtonIcon/buttonIconVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n  [\n    \"inline-flex items-center justify-center relative\",\n    'whitespace-nowrap font-medium aspect-square',\n    'cursor-pointer box-border',\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  ],\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: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\n        sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n        lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\n      },\n      rounded: {\n        true: \"rounded-full\",\n        false: \"\",\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      // ROUNDED BUTTON VARIANTS\n      {\n        variant: 'ghost',\n        rounded: true,\n        className: cn(\n        'shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      rounded: false,\n    },\n  }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
+{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nexport const buttonIconVariants = cva(\r\n  [\r\n    \"inline-flex items-center justify-center relative\",\r\n    'whitespace-nowrap font-medium aspect-square',\r\n    'cursor-pointer box-border',\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      },\r\n      color: {\r\n        primary: \"\",\r\n        secondary: \"\",\r\n        error: \"\"\r\n      },\r\n      size: {\r\n        xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\r\n        sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\r\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\r\n        lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\r\n      },\r\n      rounded: {\r\n        true: \"rounded-full\",\r\n        false: \"\",\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      // 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      // 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      // ROUNDED BUTTON VARIANTS\r\n      {\r\n        variant: 'ghost',\r\n        rounded: true,\r\n        className: cn(\r\n        'bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\r\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n        ),\r\n      }\r\n    ],\r\n    defaultVariants: {\r\n      color: \"primary\",\r\n      variant: \"contained\",\r\n      size: \"lg\",\r\n      rounded: false,\r\n    },\r\n  }\r\n)\r\n\r\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\r\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}