@oneplatformdev/ui 0.1.99-beta.4 → 0.1.99-beta.6

package/ButtonIcon/ButtonIcon.js

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

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\";\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 * @example\n * > Basic usage:\n * ```tsx\n *   <ButtonIcon>\n *     <PlusIcon />\n *   </ButtonIcon>\n * ```\n *\n * @example\n * > With variant & color:\n * ```tsx\n *   <ButtonIcon variant=\"outline\" color=\"primary\">\n *     <Search />\n *   </ButtonIcon>\n * ```\n *\n * @example\n * > With tooltip message:\n * ```tsx\n *   <ButtonIcon message=\"Edit item\">\n *     <PencilLine />\n *   </ButtonIcon>\n * ```\n *\n * @example\n * > Loading state:\n * ```tsx\n *   <ButtonIcon loading>\n *     <Trash2 />\n *   </ButtonIcon>\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 */\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} size={size}>{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\"\nexport default ButtonIcon;\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":";;;;;;;;AAuDO,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,GAAkB,MAAAO,GAAa,UAAAT,EAAA,CAAS,GAEhEkB,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;"}
+{"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\";\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 *\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 ButtonIcon} for icon-only 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      ...rest\n    } = props;\n\n    const Comp = asChild ? Slot : \"button\"\n    const msg = message || title;\n\n    const content = asChild\n      ? children\n      : (\n        <LoadedIcon loading={loading} size={size}>\n          {renderInnerIcon(icon) ?? children}\n        </LoadedIcon>\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          buttonIconVariants({\n            variant, size, color, rounded,\n            className\n          }),\n          loading && 'pointer-events-none opacity-80',\n        )}\n        {...rest}\n      >\n        {content}\n        {!!screenReader && <span className=\"sr-only\">\n          {typeof screenReader === 'string' ? screenReader : screenReader.text}\n        </span>}\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","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","jsxs","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MAuDPG,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,GAAGC;AAAA,IAAA,IACDhB,GAEEiB,IAAOf,IAAUgB,IAAO,UACxBC,IAAMZ,KAAWC,GAEjBY,IAAUlB,IACZC,IAEA,gBAAAkB,EAACC,GAAA,EAAW,SAAAhB,GAAkB,MAAAO,GAC3B,UAAAnB,EAAgBU,CAAI,KAAKD,EAAA,CAC5B;AAGJ,QAAI,CAACiB,EAAS,QAAO;AAErB,UAAMG,IACJ,gBAAAC;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAhB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWoB;AAAA,UACTC,EAAmB;AAAA,YACjB,SAAAf;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGU;AAAA,QAEH,UAAA;AAAA,UAAAI;AAAA,UACA,CAAC,CAACL,KAAgB,gBAAAM,EAAC,QAAA,EAAK,WAAU,WAChC,UAAA,OAAON,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKI,IAEH,gBAAAE;AAAA,MAACM;AAAA,MAAA;AAAA,QACE,GAAIlB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACa,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAI;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAzB,EAAW,cAAc;"}

package/ButtonIcon/ButtonIcon.stories.js

@@ -1,35 +1,12 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { ButtonIcon as d } from "./ButtonIcon.js";
-import { PlusIcon as u } from "lucide-react";
-const m = (e) => /* @__PURE__ */ o(d, { ...e });
-m.args = {
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { ButtonIcon as c } from "./ButtonIcon.js";
+import { FileDownIcon as r, Trash2Icon as l, PlusIcon as t } from "lucide-react";
+import { DashedWrapper as u } from "../.storybook/Wrappers.js";
+const h = (e) => /* @__PURE__ */ o(c, { ...e });
+h.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
-      }
-    )
-  }
-), t = (e) => /* @__PURE__ */ o(
+const n = (e) => /* @__PURE__ */ o(
   "div",
   {
     style: {
@@ -39,7 +16,7 @@ const p = (e) => /* @__PURE__ */ o(
       gap: "16px"
     },
     children: ["default", "hover", "focus", "active", "disabled"].map((a) => /* @__PURE__ */ o(
-      d,
+      c,
       {
         id: a,
         ...e,
@@ -49,57 +26,76 @@ const p = (e) => /* @__PURE__ */ o(
       a
     ))
   }
-), c = (e) => /* @__PURE__ */ r("div", { className: "flex", children: [
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ o(t, { ...e, variant: "contained" }),
-    /* @__PURE__ */ o(t, { ...e, variant: "outlined" }),
-    /* @__PURE__ */ o(t, { ...e, variant: "ghost" })
+), s = (e) => /* @__PURE__ */ i("div", { className: "flex", children: [
+  /* @__PURE__ */ i(u, { children: [
+    /* @__PURE__ */ o(n, { ...e, variant: "contained" }),
+    /* @__PURE__ */ o(n, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ o(n, { ...e, variant: "ghost" })
   ] }),
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ o(t, { ...e, variant: "contained", rounded: !0 }),
-    /* @__PURE__ */ o(t, { ...e, variant: "outlined", rounded: !0 }),
-    /* @__PURE__ */ o(t, { ...e, variant: "ghost", rounded: !0 })
+  /* @__PURE__ */ i(u, { children: [
+    /* @__PURE__ */ o(n, { ...e, variant: "contained", rounded: !0 }),
+    /* @__PURE__ */ o(n, { ...e, variant: "outlined", rounded: !0 }),
+    /* @__PURE__ */ o(n, { ...e, variant: "ghost", rounded: !0 })
   ] })
-] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"], s = ["xs", "sm", "md", "lg"], b = {
+] }), p = ["contained", "outlined", "ghost"], m = ["primary", "secondary", "error"], f = ["xs", "sm", "md", "lg"], y = "contained", I = "primary", B = "lg", g = {
+  undefined: void 0,
+  "<PlusIcon />": /* @__PURE__ */ o(t, {}),
+  "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
+  "<FileDownIcon />": /* @__PURE__ */ o(r, {}),
+  PlusIcon: t,
+  Trash2Icon: l,
+  FileDownIcon: r
+}, v = {
+  "<PlusIcon />": /* @__PURE__ */ o(t, {}),
+  "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
+  "<FileDownIcon />": /* @__PURE__ */ o(r, {})
+}, b = {
   title: "ButtonIcon",
-  component: d,
-  render: m,
+  component: c,
+  render: h,
   args: {
     asChild: !1,
     disabled: !1,
     loading: !1,
     rounded: !1,
-    children: /* @__PURE__ */ o(u, {}),
-    variant: i[0],
-    color: l[0],
-    size: s[0],
-    message: ""
+    variant: y,
+    color: I,
+    size: B,
+    children: /* @__PURE__ */ o(t, {}),
+    icon: void 0,
+    message: void 0,
+    title: void 0
   },
   argTypes: {
+    tooltip: {
+      name: "tooltip",
+      description: "ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]",
+      control: !1
+    },
     asChild: {
       name: "asChild",
-      description: "ButtonIcon asChild",
+      description: "ButtonIcon asChild from ButtonIconProps [boolean]",
       control: !1
     },
     variant: {
       name: "variant",
       description: "ButtonIcon variant",
-      defaultValue: i[0],
-      options: i,
+      defaultValue: p[0],
+      options: p,
       control: { type: "inline-radio" }
     },
     color: {
       name: "color",
       description: "ButtonIcon color",
-      defaultValue: l[0],
-      options: l,
+      defaultValue: m[0],
+      options: m,
       control: { type: "inline-radio" }
     },
     size: {
       name: "size",
       description: "ButtonIcon size",
-      defaultValue: s[0],
-      options: s,
+      defaultValue: f[0],
+      options: f,
       control: { type: "inline-radio" }
     },
     title: {
@@ -126,6 +122,20 @@ const p = (e) => /* @__PURE__ */ o(
       name: "loading",
       description: "ButtonIcon loading",
       control: { type: "boolean" }
+    },
+    icon: {
+      name: "icon",
+      description: "ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
+      options: Object.keys(g),
+      mapping: g,
+      control: { type: "inline-radio" }
+    },
+    children: {
+      name: "children",
+      description: "ButtonIcon children from ButtonIconProps [`ReactNode`]",
+      options: Object.keys(v),
+      mapping: v,
+      control: { type: "inline-radio" }
     }
   },
   parameters: {
@@ -136,15 +146,21 @@ const p = (e) => /* @__PURE__ */ o(
       disabled: "#disabled"
     }
   }
-}, n = {
+}, d = {
   asChild: !1,
   disabled: !1,
   loading: !1,
   rounded: !1,
-  children: /* @__PURE__ */ o(u, {})
-}, B = { args: n }, f = {
+  children: /* @__PURE__ */ o(t, {})
+}, D = {
+  args: {
+    ...b.args,
+    icon: r,
+    children: void 0
+  }
+}, x = {
   args: {
-    ...n,
+    ...d,
     color: "primary",
     size: "lg"
   },
@@ -152,14 +168,14 @@ const p = (e) => /* @__PURE__ */ o(
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: s
 };
-f.parameters = {
+x.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const g = {
+const P = {
   args: {
-    ...n,
+    ...d,
     color: "secondary",
     size: "lg"
   },
@@ -167,14 +183,14 @@ const g = {
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: s
 };
-g.parameters = {
+P.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
-const v = {
+const T = {
   args: {
-    ...n,
+    ...d,
     color: "error",
     size: "lg"
   },
@@ -182,16 +198,16 @@ const v = {
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: c
+  render: s
 };
-v.parameters = {
+T.parameters = {
   controls: { exclude: ["variant", "color"] }
 };
 export {
-  B as Default,
-  v as Error,
-  f as Primary,
-  g as Secondary,
+  D as Default,
+  T as Error,
+  x as Primary,
+  P 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 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'][] = [ 'xs', 'sm', 'md', '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    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  },\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":"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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 from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon } 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  },\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 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","Primary","Secondary","Error"],"mappings":"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"}

package/ButtonIcon/ButtonIcon.types.d.ts

@@ -1,7 +1,8 @@
 import { ButtonIconVarianceProps } from './buttonIconVariants';
-import { ButtonBaseProps } from '../Button';
+import { ButtonBaseProps, ButtonIconType } from '../Button';
 export interface ButtonIconSlotProps {
 }
 export interface ButtonIconProps extends ButtonBaseProps<ButtonIconVarianceProps, ButtonIconSlotProps> {
+    icon?: ButtonIconType;
 }
 //# 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,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,KAAK,eAAe,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;CACtE"}
+{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;IACrE,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB"}

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.1.99-beta.6 (2025-12-29)
+
+### 🚀 Features
+
+- **ButtonIcon:** introduce icon-only variant with enhanced props and storybook support ([d643217](https://github.com/oneplatformdev/core-web/commit/d643217))
+- **Button:** add storybook integration with loading and tooltip support ([72ae45e](https://github.com/oneplatformdev/core-web/commit/72ae45e))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.6
+- Updated @oneplatformdev/hooks to 0.1.99-beta.6
+- Updated @oneplatformdev/tokens to 0.1.99-beta.6
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
+## 0.1.99-beta.5 (2025-12-29)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.5
+- Updated @oneplatformdev/hooks to 0.1.99-beta.5
+- Updated @oneplatformdev/tokens to 0.1.99-beta.5
+
 ## 0.1.99-beta.4 (2025-12-29)
 
 ### 🧱 Updated Dependencies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.4",
+  "version": "0.1.99-beta.6",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -105,8 +105,11 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/tokens": "^0.1.99-beta.4",
-    "@oneplatformdev/hooks": "^0.1.99-beta.4",
-    "@oneplatformdev/utils": "^0.1.99-beta.4"
+    "@oneplatformdev/hooks": "^0.1.99-beta.6",
+    "@oneplatformdev/tokens": "^0.1.99-beta.6",
+    "@oneplatformdev/utils": "^0.1.99-beta.6"
+  },
+  "scripts": {
+    "chromatic": "chromatic"
   }
 }

package/Button/Button.s.d.ts

@@ -1,83 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ButtonProps } from './Button.types';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-    render: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-    args: {
-        tooltip: undefined;
-        asChild: false;
-        variant: "none" | "default" | "destructive" | "outline" | "secondary" | "contained" | "outlined" | "ghost" | null | undefined;
-        color: "secondary" | "primary" | "error" | null | undefined;
-        size: "xs" | "sm" | "md" | "lg" | null | undefined;
-        disabled: false;
-    };
-    argTypes: {
-        tooltip: {
-            control: false;
-        };
-        asChild: {
-            control: false;
-        };
-        variant: {
-            options: ("none" | "default" | "destructive" | "outline" | "secondary" | "contained" | "outlined" | "ghost" | null | undefined)[];
-            control: {
-                type: "inline-radio";
-            };
-        };
-        color: {
-            options: ("secondary" | "primary" | "error" | null | undefined)[];
-            control: {
-                type: "inline-radio";
-            };
-        };
-        size: {
-            options: ("xs" | "sm" | "md" | "lg" | null | undefined)[];
-            control: {
-                type: "inline-radio";
-            };
-        };
-        title: {
-            name: string;
-            description: string;
-            control: {
-                type: "text";
-            };
-        };
-        message: {
-            name: string;
-            description: string;
-            control: {
-                type: "object";
-            };
-        };
-        slotProps: {
-            name: string;
-            description: string;
-            control: {
-                type: "object";
-            };
-        };
-    };
-    tags: string[];
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-        pseudo: {
-            hover: string;
-            focus: string;
-            active: string;
-            disabled: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Error: Story;
-//# sourceMappingURL=Button.s.d.ts.map

package/Button/Button.s.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.s.d.ts","sourceRoot":"","sources":["../../src/Button/Button.s.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA2DlD,QAAA,MAAM,IAAI;;;oBAvDe,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGL,CAAC;AAChC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC"}