@oneplatformdev/ui 0.1.11-0 → 0.1.11-4

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';\n\nimport { TooltipRoot } from '../Tooltip';\n\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n  ({ disabled, className, variant, color, size, rounded, title = '', tooltip, ...props }, ref) => {\n    const shouldTooltipOpen = (disabled || (!title && !tooltip)) ? false : undefined;\n    return (\n      <TooltipRoot\n        open={shouldTooltipOpen}\n        message={tooltip || title}\n        delay={300}\n      >\n        <button\n          className={cn(buttonIconVariants({ variant, size, color, disabled, rounded, className }))}\n          ref={ref}\n          disabled={Boolean(disabled)}\n          {...props}\n        />\n      </TooltipRoot>\n    )\n  }\n)\nButtonIcon.displayName = \"Button\"\n"],"names":["ButtonIcon","React","disabled","className","variant","color","size","rounded","title","tooltip","props","ref","jsx","TooltipRoot","cn","buttonIconVariants"],"mappings":";;;;;;AAQO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,OAAAC,IAAQ,IAAI,SAAAC,GAAS,GAAGC,EAAA,GAASC,MAGpF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAHuBX,KAAa,CAACM,KAAS,CAACC,IAAY,KAAQ;AAAA,MAInE,SAASA,KAAWD;AAAA,MACpB,OAAO;AAAA,MAEP,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAGC,EAAmB,EAAE,SAAAX,GAAS,MAAAE,GAAM,OAAAD,GAAO,UAAAH,GAAU,SAAAK,GAAS,WAAAJ,EAAA,CAAW,CAAC;AAAA,UACxF,KAAAQ;AAAA,UACA,UAAU,EAAQT;AAAA,UACjB,GAAGQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIR;AACAV,EAAW,cAAc;"}
+{"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\";\n\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (props, ref) => {\n    const {\n      asChild,\n      children,\n      disabled = false,\n      loading = false,\n      message,\n      title = '',\n      tooltipProps = {},\n      className,\n      variant,\n      color,\n      size,\n      rounded,\n      ...rest\n    } = props;\n\n    const Comp = asChild ? Slot : \"button\"\n    const msg = message || title;\n\n    const content = asChild\n      ? children\n      : !!children && <LoadedIcon loading={loading}>{children}</LoadedIcon>\n\n    const cmp = (\n      <Comp\n        type='button'\n        ref={ref}\n        disabled={disabled}\n        className={cn(\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\"\n"],"names":["ButtonIcon","React","props","ref","asChild","children","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;AAUO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;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,GAAGC;AAAA,IAAA,IACDd,GAEEe,IAAOb,IAAUc,IAAO,UACxBC,IAAMX,KAAWC,GAEjBW,IAAUhB,IACZC,IACA,CAAC,CAACA,KAAY,gBAAAgB,EAACC,GAAA,EAAW,SAAAf,GAAmB,UAAAF,GAAS,GAEpDkB,IACJ,gBAAAF;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAG;AAAA,QACA,WAAWkB;AAAA,UACTC,EAAmB;AAAA,YACjB,SAAAb;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGS;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAE;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIhB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACY,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAI;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAvB,EAAW,cAAc;"}

package/ButtonIcon/ButtonIcon.stories.js

@@ -1,127 +1,192 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { ButtonIcon as m } from "./ButtonIcon.js";
-import { PencilLineIcon as x } from "lucide-react";
-const s = ["contained", "outlined", "ghost", "link"], c = [
-  "primary",
-  "secondary",
-  "error",
-  "success",
-  "disabled"
-], f = ["sm", "md", "lg"], l = (a) => /* @__PURE__ */ o(m, { ...a, children: /* @__PURE__ */ o(x, {}) }), z = {
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { ButtonIcon as s } from "./ButtonIcon.js";
+import { PlusIcon as u } from "lucide-react";
+const f = (e) => /* @__PURE__ */ o(s, { ...e });
+f.args = {
+  onClick: { action: (e) => e }
+};
+const p = (e) => /* @__PURE__ */ o(
+  "div",
+  {
+    style: {
+      padding: "0px 20px",
+      display: "flex",
+      gap: "32px",
+      alignItems: "flex-start"
+    },
+    children: /* @__PURE__ */ o(
+      "div",
+      {
+        style: {
+          position: "relative",
+          border: "2px dashed rgba(139, 92, 246, 0.7)",
+          borderRadius: "24px",
+          padding: "24px 32px",
+          display: "flex",
+          gap: "32px"
+        },
+        children: e.children
+      }
+    )
+  }
+), a = (e) => /* @__PURE__ */ o(
+  "div",
+  {
+    style: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    },
+    children: ["default", "hover", "focus", "active", "disabled"].map((r) => /* @__PURE__ */ o(
+      s,
+      {
+        id: r,
+        ...e,
+        disabled: r === "disabled" || e.disabled,
+        children: e.children
+      },
+      r
+    ))
+  }
+), c = (e) => /* @__PURE__ */ t("div", { className: "flex", children: [
+  /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ o(a, { ...e, variant: "contained" }),
+    /* @__PURE__ */ o(a, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ o(a, { ...e, variant: "ghost" })
+  ] }),
+  /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ o(a, { ...e, variant: "contained", rounded: !0 }),
+    /* @__PURE__ */ o(a, { ...e, variant: "outlined", rounded: !0 }),
+    /* @__PURE__ */ o(a, { ...e, variant: "ghost", rounded: !0 })
+  ] })
+] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"], d = ["lg"], b = {
   title: "ButtonIcon",
-  component: m,
-  render: l,
+  component: s,
+  render: f,
+  args: {
+    asChild: !1,
+    disabled: !1,
+    loading: !1,
+    rounded: !1,
+    children: /* @__PURE__ */ o(u, {}),
+    variant: i[0],
+    color: l[0],
+    size: d[0],
+    message: ""
+  },
   argTypes: {
+    asChild: {
+      name: "asChild",
+      description: "ButtonIcon asChild",
+      control: !1
+    },
     variant: {
       name: "variant",
       description: "ButtonIcon variant",
-      defaultValue: "contained",
-      options: s,
-      control: {
-        type: "inline-radio"
-      }
+      defaultValue: i[0],
+      options: i,
+      control: { type: "inline-radio" }
     },
     color: {
-      options: c,
-      control: {
-        type: "inline-radio"
-      }
+      name: "color",
+      description: "ButtonIcon color",
+      defaultValue: l[0],
+      options: l,
+      control: { type: "inline-radio" }
     },
     size: {
-      options: f,
-      control: {
-        type: "inline-radio"
-      }
+      name: "size",
+      description: "ButtonIcon size",
+      defaultValue: d[0],
+      options: d,
+      control: { type: "inline-radio" }
     },
-    tooltip: {
-      control: {
-        type: "text"
-      }
+    message: {
+      name: "size",
+      description: "ButtonIcon tooltip message",
+      control: { type: "text" }
     },
     disabled: {
-      control: {
-        type: "boolean"
-      }
+      name: "disabled",
+      description: "ButtonIcon disabled",
+      control: { type: "boolean" }
     },
     rounded: {
-      control: {
-        type: "boolean"
-      }
+      name: "rounded",
+      description: "ButtonIcon rounded",
+      control: { type: "boolean" }
+    },
+    loading: {
+      name: "loading",
+      description: "ButtonIcon loading",
+      control: { type: "boolean" }
     }
   },
+  parameters: {
+    pseudo: {
+      hover: "#hover",
+      focus: "#focus",
+      active: "#active",
+      disabled: "#disabled"
+    }
+  }
+}, n = {
+  asChild: !1,
+  disabled: !1,
+  loading: !1,
+  rounded: !1,
+  children: /* @__PURE__ */ o(u, {})
+}, I = { args: n }, g = {
   args: {
-    variant: "contained",
+    ...n,
     color: "primary",
-    size: "md",
-    disabled: !1,
-    rounded: !1,
-    tooltip: "ButtonIcon tooltip"
-  }
-}, u = ({ rounded: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
-  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { rounded: a, ...n }) }),
-  /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((e) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((t) => {
-    const i = `${e}-${t}`;
-    return /* @__PURE__ */ o("div", { className: "flex gap-2", children: f.map((r) => {
-      const p = `${i}-${r}`;
-      return /* @__PURE__ */ o(
-        l,
-        {
-          color: t,
-          size: r,
-          variant: e,
-          rounded: a,
-          tooltip: p
-        },
-        p
-      );
-    }) }, i);
-  }) }, e)) })
-] });
-u.args = {
-  onClick: { action: (a) => a }
+    size: "lg"
+  },
+  argTypes: {
+    variant: { control: !1 },
+    color: { control: !1 }
+  },
+  render: c
 };
-const g = ({ variant: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
-  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { variant: a, ...n }) }),
-  /* @__PURE__ */ o("div", { className: "flex gap-2", children: s.map((e) => /* @__PURE__ */ o(l, { variant: e, tooltip: e }, e)) })
-] });
 g.parameters = {
-  controls: {
-    include: ["disabled", "color", "size", "variant"]
-  }
+  controls: { exclude: ["variant", "color"] }
 };
-const h = ({ color: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
-  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { color: a, ...n }) }),
-  /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((e) => /* @__PURE__ */ o(l, { color: e, tooltip: e, ...n }, e)) })
-] });
-h.parameters = {
-  controls: {
-    include: ["disabled", "color", "size", "variant"]
-  }
+const m = {
+  args: {
+    ...n,
+    color: "secondary",
+    size: "lg"
+  },
+  argTypes: {
+    variant: { control: !1 },
+    color: { control: !1 }
+  },
+  render: c
+};
+m.parameters = {
+  controls: { exclude: ["variant", "color"] }
+};
+const v = {
+  args: {
+    ...n,
+    color: "error",
+    size: "lg"
+  },
+  argTypes: {
+    variant: { control: !1 },
+    color: { control: !1 }
+  },
+  render: c
 };
-const v = ({ variant: a, color: n, ...e }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-10", children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((t) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((i) => {
-  const r = `${t}-${i}`;
-  return /* @__PURE__ */ o(
-    l,
-    {
-      variant: t,
-      color: i,
-      disabled: !0,
-      tooltip: r,
-      ...e
-    },
-    r
-  );
-}) }, t)) }) });
 v.parameters = {
-  controls: {
-    include: []
-  }
+  controls: { exclude: ["variant", "color"] }
 };
 export {
-  h as Colors,
-  v as Disabled,
-  u as Playground,
-  g as Variants,
-  z as default
+  I as Default,
+  v as Error,
+  g as Primary,
+  m as Secondary,
+  b 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 { ButtonIconProps } from './ButtonIcon.types';\nimport { PencilLineIcon } from 'lucide-react';\nimport React from 'react';\n\nconst variants = ['contained', 'outlined', 'ghost', 'link'] as const;\nconst colors = [\n  'primary',\n  'secondary',\n  'error',\n  'success',\n  'disabled',\n] as const;\nconst sizes = ['sm', 'md', 'lg'] as const;\n\nconst Template = (props: ButtonIconProps) => (\n  <ButtonIcon {...props}>\n    <PencilLineIcon />\n  </ButtonIcon>\n);\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  argTypes: {\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: 'contained',\n      options: variants,\n      control: {\n        type: 'inline-radio',\n      },\n    },\n    color: {\n      options: colors,\n      control: {\n        type: 'inline-radio',\n      },\n    },\n    size: {\n      options: sizes,\n      control: {\n        type: 'inline-radio',\n      },\n    },\n    tooltip: {\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      control: {\n        type: 'boolean',\n      },\n    },\n    rounded: {\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    variant: 'contained',\n    color: 'primary',\n    size: 'md',\n    disabled: false,\n    rounded: false,\n    tooltip: 'ButtonIcon tooltip',\n  },\n} satisfies Meta<typeof ButtonIcon>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground = ({ rounded, ...args }: ButtonIconProps) => (\n  <div className=\"flex flex-col gap-10\">\n    <span>\n      <Template rounded={rounded} {...args} />\n    </span>\n\n    <div className=\"flex flex-col gap-2\">\n      {variants.map((v) => {\n        return (\n          <div className=\"flex gap-2\" key={v}>\n            {colors.map((c) => {\n              const k = `${v}-${c}`;\n              return (\n                <div className=\"flex gap-2\" key={k}>\n                  {sizes.map((s) => {\n                    const key = `${k}-${s}`;\n                    return (\n                      <Template\n                        key={key}\n                        color={c}\n                        size={s}\n                        variant={v}\n                        rounded={rounded}\n                        tooltip={key}\n                      />\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        );\n      })}\n    </div>\n  </div>\n);\nPlayground.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nexport const Variants = ({ variant, ...args }: ButtonIconProps) => (\n  <div className=\"flex flex-col gap-10\">\n    <span>\n      <Template variant={variant} {...args} />\n    </span>\n\n    <div className=\"flex gap-2\">\n      {variants.map((v) => (\n        <Template key={v} variant={v} tooltip={v} />\n      ))}\n    </div>\n  </div>\n);\n\nVariants.parameters = {\n  controls: {\n    include: ['disabled', 'color', 'size', 'variant'],\n  },\n};\n\nexport const Colors = ({ color, ...args }: ButtonIconProps) => (\n  <div className=\"flex flex-col gap-2\">\n    <span>\n      <Template color={color} {...args} />\n    </span>\n\n    <div className=\"flex gap-2\">\n      {colors.map((c) => (\n        <Template key={c} color={c} tooltip={c} {...args} />\n      ))}\n    </div>\n  </div>\n);\n\nColors.parameters = {\n  controls: {\n    include: ['disabled', 'color', 'size', 'variant'],\n  },\n};\n\nexport const Disabled = ({ variant, color, ...args }: ButtonIconProps) => (\n  <div className=\"flex flex-col gap-10\">\n    <div className=\"flex flex-col gap-2\">\n      {variants.map((v) => {\n        return (\n          <div className=\"flex gap-2\" key={v}>\n            {colors.map((c) => {\n              const key = `${v}-${c}`;\n              return <Template\n                key={key}\n                variant={v}\n                color={c}\n                disabled\n                tooltip={key}\n                {...args}\n              />;\n            })}\n          </div>\n        );\n      })}\n    </div>\n  </div>\n);\nDisabled.parameters = {\n  controls: {\n    include: [],\n  },\n};\n"],"names":["variants","colors","sizes","Template","props","jsx","ButtonIcon","PencilLineIcon","meta","Playground","rounded","args","jsxs","v","c","k","s","key","e","Variants","variant","Colors","color","Disabled"],"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';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        padding: '0px 20px',\n        display: 'flex',\n        gap: '32px',\n        alignItems: 'flex-start',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          border: '2px dashed rgba(139, 92, 246, 0.7)',\n          borderRadius: '24px',\n          padding: '24px 32px',\n          display: 'flex',\n          gap: '32px',\n        }}\n      >\n        {props.children}\n      </div>\n    </div>\n  )\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'][] = [ 'lg' ]\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    children: <PlusIcon/>,\n    variant: variants[0],\n    color: colors[0],\n    size: sizes[0],\n    message: '',\n  },\n  argTypes: {\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild',\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    message: {\n      name: 'size',\n      description: 'ButtonIcon tooltip message',\n      control: { type: 'text' },\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  },\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 = { args };\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","DashedWrapper","States","state","StateRender","jsxs","variants","colors","sizes","meta","PlusIcon","args","Default","Primary","Secondary","Error"],"mappings":";;;AAOA,MAAMA,IAAW,CAACC,MAA2B,gBAAAC,EAACC,GAAA,EAAY,GAAGF,GAAM;AACnED,EAAS,OAAO;AAAA,EACd,SAAS,EAAE,QAAQ,CAAC,MAA2C,EAAA;AACjE;AAEA,MAAMI,IAAgB,CAACH,MAEnB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,KAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IAGd,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,SAAS;AAAA,UACT,SAAS;AAAA,UACT,KAAK;AAAA,QAAA;AAAA,QAGN,UAAAD,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACT;AAAA,GAKAI,IAAS,CAACJ,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK;AAAA,IAAA;AAAA,IAGN,UAAA,CAAE,WAAW,SAAS,SAAS,UAAU,UAAW,EAClD,IAAI,CAACI,MACJ,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,IAAIG;AAAA,QACH,GAAGL;AAAA,QACJ,UAAUK,MAAU,cAAcL,EAAM;AAAA,QAEvC,UAAAA,EAAM;AAAA,MAAA;AAAA,MALFK;AAAA,IAAA,CAOR;AAAA,EAAA;AACL,GAGIC,IAAc,CAACN,MACnB,gBAAAO,EAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,EAAA,gBAAAA,EAACJ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,YAAA,CAAW;AAAA,IACtC,gBAAAC,EAACG,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,WAAA,CAAU;AAAA,IACrC,gBAAAC,EAACG,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,QAAA,CAAO;AAAA,EAAA,GACpC;AAAA,oBACCG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,aAAY,SAAO,IAAA;AAAA,sBAC7CI,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,YAAW,SAAO,IAAA;AAAA,sBAC5CI,GAAA,EAAQ,GAAGJ,GAAO,SAAQ,SAAQ,SAAO,GAAA,CAAA;AAAA,EAAA,EAAA,CAC5C;AAAA,GACF,GAGIQ,IAAyC,CAAE,aAAa,YAAY,OAAQ,GAC5EC,IAAqC,CAAE,WAAW,aAAa,OAAQ,GACvEC,IAAmC,CAAE,IAAK,GAE1CC,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWT;AAAA,EACX,QAAQH;AAAA,EACR,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,4BAAWa,GAAA,EAAQ;AAAA,IACnB,SAASJ,EAAS,CAAC;AAAA,IACnB,OAAOC,EAAO,CAAC;AAAA,IACf,MAAMC,EAAM,CAAC;AAAA,IACb,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcF,EAAS,CAAC;AAAA,MACxB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAgB;AAAA,IAEnC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcC,EAAO,CAAC;AAAA,MACtB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcC,EAAM,CAAC;AAAA,MACrB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,OAAA;AAAA,IAAO;AAAA,IAE1B,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,IAE7B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,IAE7B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,EAC7B;AAAA,EAEF,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAKMG,IAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,4BAAWD,GAAA,CAAA,CAAQ;AACrB,GAEaE,IAAiB,EAAE,MAAAD,EAAA,GAEnBE,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,GAAGF;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQP;AACV;AACAS,EAAQ,aAAa;AAAA,EACnB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;AAEO,MAAMC,IAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQP;AACV;AACAU,EAAU,aAAa;AAAA,EACrB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;AAEO,MAAMC,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,GAAGJ;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQP;AACV;AACAW,EAAM,aAAa;AAAA,EACjB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;"}

package/ButtonIcon/ButtonIcon.types.d.ts

@@ -1,8 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import { buttonIconVariants } from './buttonIconVariants';
-import { ReactNode } from 'react';
-import * as React from "react";
-export interface ButtonIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'disabled'>, VariantProps<typeof buttonIconVariants> {
-    tooltip?: ReactNode;
+import { ButtonHTMLAttributes } from 'react';
+import { TooltipProps } from '../Tooltip';
+export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonIconVariants>, Pick<TooltipProps, 'message'> {
+    asChild?: boolean;
+    loading?: boolean;
+    tooltipProps?: TooltipProps;
 }
 //# sourceMappingURL=ButtonIcon.types.d.ts.map

package/ButtonIcon/ButtonIcon.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC/E,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}
+{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAC5D,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}

package/ButtonIcon/buttonIconVariants.d.ts

@@ -1,8 +1,7 @@
 export declare const buttonIconVariants: (props?: ({
-    variant?: "link" | "ghost" | "contained" | "outlined" | null | undefined;
-    color?: "disabled" | "secondary" | "primary" | "error" | "success" | null | undefined;
-    size?: "icon" | "sm" | "lg" | "md" | null | undefined;
-    disabled?: boolean | null | undefined;
+    variant?: "contained" | "outlined" | "ghost" | null | undefined;
+    color?: "secondary" | "primary" | "error" | null | undefined;
+    size?: "lg" | null | undefined;
     rounded?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=buttonIconVariants.d.ts.map

package/ButtonIcon/buttonIconVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;8EAsI9B,CAAA"}
+{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;8EAkJ9B,CAAA"}