@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.11

package/.storybook/Wrappers.js

@@ -0,0 +1,30 @@
+import { jsx as p } from "react/jsx-runtime";
+const r = (e) => /* @__PURE__ */ p(
+  "div",
+  {
+    style: {
+      padding: "0px 20px",
+      display: "flex",
+      gap: "32px",
+      alignItems: "flex-start"
+    },
+    children: /* @__PURE__ */ p(
+      "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
+      }
+    )
+  }
+);
+export {
+  r as DashedWrapper
+};
+//# sourceMappingURL=Wrappers.js.map

package/.storybook/Wrappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wrappers.js","sources":["../../.storybook/Wrappers.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\n\nexport const MoreWrapper = (props: PropsWithChildren) => (\n  <div\n    style={{\n      position: 'relative',\n      padding: '24px 32px',\n      display: 'flex',\n      gap: '32px',\n    }}\n  >\n    {props.children}\n  </div>\n)\n\nexport const 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"],"names":["DashedWrapper","props","jsx"],"mappings":";AAeO,MAAMA,IAAgB,CAACC,MAE1B,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;"}

package/Badge/badgeVariants.d.ts

@@ -1,4 +1,4 @@
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=badgeVariants.d.ts.map

package/Button/Button.d.ts

@@ -1,5 +1,63 @@
 import { ButtonProps } from './Button.types';
 import * as React from "react";
+/**
+ * Universal Button component used for triggering actions and UI interactions.
+ * Supports variants, sizes, colors, start/end icon adornments, custom slot content,
+ * tooltip integration, loading state, and polymorphic rendering via `asChild`.
+ *
+ * @public
+ * @see [Documentation](#) // TODO: add link to docs
+ *
+ * @example
+ * > Import:
+ * ```tsx
+ * import { Button } from '@oneplatformdev/ui/Button';
+ * ```
+ * > Basic usage:
+ * ```tsx
+ * <Button>Click me</Button>
+ * ```
+ * > Variant and size:
+ * ```tsx
+ * <Button variant="outline" size="lg">Large Button</Button>
+ * ```
+ * > With icons:
+ * ```tsx
+ * <Button startAdornment={<PlusIcon />}>Create</Button>
+ * <Button endAdornment={<ArrowRightIcon />}>Next</Button>
+ * ```
+ * > Icon style button:
+ * ```tsx
+ * <Button size="icon">
+ *   <PlusIcon />
+ * </Button>
+ * ```
+ * > Polymorphic rendering (`asChild`):
+ * ```tsx
+ * <Button asChild>
+ *   <a href="/dashboard">Go to Dashboard</a>
+ * </Button>
+ * ```
+ * > Tooltip via `message` or native `title`:
+ * ```tsx
+ * <Button title="Tooltip text">Hover me</Button>
+ * <Button message="Tooltip content">Hover me</Button>
+ * ```
+ * > Loading state:
+ * ```tsx
+ * <Button loading>Processing...</Button>
+ * ```
+ * > Disabled:
+ * ```tsx
+ * <Button disabled>Disabled</Button>
+ * ```
+ *
+ * @remarks
+ * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.
+ * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
+ *
+ * @see {@link ButtonIcon} for icon-only buttons
+ */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4ClD,eAAO,MAAM,MAAM,uFAuElB,CAAA;AAGD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqDxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,MAAM,uFA0ElB,CAAA;AAED,eAAe,MAAM,CAAC"}

package/Button/Button.js

@@ -1,77 +1,76 @@
-import { jsx as r, jsxs as z, Fragment as k } from "react/jsx-runtime";
-import * as x from "react";
-import { Slot as N } from "@radix-ui/react-slot";
-import { cn as j } from "@oneplatformdev/utils";
-import { buttonVariants as A } from "./buttonVariants.js";
+import { jsxs as N, Fragment as E, jsx as o } from "react/jsx-runtime";
+import * as R from "react";
+import { isValidElement as V, createElement as j } from "react";
+import { Slot as C } from "@radix-ui/react-slot";
+import { cn as I } from "@oneplatformdev/utils";
+import { buttonVariants as F } from "./buttonVariants.js";
 import "@radix-ui/react-tooltip";
-import { Tooltip as C } from "../Tooltip/Tooltip.js";
-import { LoadedIcon as f } from "../LoadedIcon/LoadedIcon.js";
-const I = (a) => {
-  const { variant: o, size: e, color: i } = a, t = { color: i, variant: o, size: e };
-  if (e === "icon" && console.warn('Button size "icon" is not supported. Please use ButtonIcon component for icon-only buttons.'), o === "default")
-    return console.warn('Button variant "default" is deprecated. Please use "variant=contained color=primary" instead.'), t.variant = "contained", t.color = "primary", t;
-  if (o === "outline")
-    return console.warn('Button variant "outline" is deprecated. Please use "variant=outlined color=primary" instead.'), t.variant = "outlined", t.color = "primary", t;
-  if (o === "secondary")
-    return console.warn('Button variant "secondary" is deprecated. Please use "variant=contained color=secondary" instead.'), t.variant = "contained", t.color = "secondary", t;
-  if (o === "destructive")
-    return console.warn('Button variant "destructive" is deprecated. Please use "variant=contained color=error" instead.'), t.variant = "contained", t.color = "error", t;
-  if (o === "link")
-    throw console.warn('Button variant "link" is not implemented yet. Please contact the development team for more information.'), new Error('Button variant "link" is not implemented yet. Please contact the development team for more information.');
-  return t;
-}, R = x.forwardRef(
-  (a, o) => {
+import { Tooltip as L } from "../Tooltip/Tooltip.js";
+import { LoadedIcon as y } from "../LoadedIcon/LoadedIcon.js";
+const S = (n) => {
+  const { variant: t, size: r, color: s } = n, e = { color: s, variant: t, size: r };
+  if (t === "default")
+    return console.warn('Button variant "default" is deprecated. Please use "variant=contained color=primary" instead.'), e.variant = "contained", e.color = "primary", e;
+  if (r === "icon")
+    return console.warn('Button size "icon" is deprecated. Please use "<ButtonIcon/>" component instead.'), e.variant = "contained", e.color = "secondary", e;
+  if (t === "transparent")
+    throw console.warn('Button variant "transparent" is removed. Please use "variant=none" instead.'), new Error('Button variant "transparent" is removed. Please use "variant=none" instead.');
+  return t === "outline" ? (console.warn('Button variant "outline" is deprecated. Please use "variant=outlined color=primary" instead.'), e.variant = "outlined", e.color = "primary", e) : t === "secondary" ? (console.warn('Button variant "secondary" is deprecated. Please use "variant=contained color=secondary" instead.'), e.variant = "contained", e.color = "secondary", e) : (t === "destructive" && (console.warn('Button variant "destructive" is deprecated. Please use "variant=contained color=error" instead.'), e.variant = "contained", e.color = "error"), e);
+}, B = (n) => n ? V(n) ? n : j(n) : null, T = R.forwardRef(
+  (n, t) => {
     const {
-      disabled: e,
-      className: i,
-      variant: t,
-      color: v,
-      size: y,
-      asChild: c = !1,
-      title: h = "",
-      tooltip: B,
-      tooltipProps: l = {},
-      message: w,
-      loading: n = !1,
-      children: d,
+      disabled: r,
+      className: s,
+      variant: e,
+      color: h,
+      size: c,
+      asChild: d = !1,
+      title: w = "",
+      tooltip: P,
+      tooltipProps: u = {},
+      message: g,
+      loading: a = !1,
+      children: p,
       startAdornment: m,
-      endAdornment: p,
-      ...P
-    } = a, b = c ? N : "button", s = w || B || h, g = c ? d : /* @__PURE__ */ z(k, { children: [
-      !!m && /* @__PURE__ */ r(f, { loading: n, children: m }),
-      d,
-      !!p && /* @__PURE__ */ r(f, { loading: n, children: p })
-    ] }), u = /* @__PURE__ */ r(
-      b,
+      endAdornment: f,
+      screenReader: i,
+      ...b
+    } = n, x = d ? C : "button", l = g || P || w, z = d ? p : /* @__PURE__ */ N(E, { children: [
+      !!m && /* @__PURE__ */ o(y, { loading: a, size: c, children: B(m) }),
+      p,
+      !!f && /* @__PURE__ */ o(y, { loading: a, size: c, children: B(f) }),
+      !!i && /* @__PURE__ */ o("span", { className: "sr-only", children: typeof i == "string" ? i : i.text })
+    ] }), v = /* @__PURE__ */ o(
+      x,
       {
         type: "button",
-        ref: o,
-        disabled: e,
-        className: j(
-          A({
-            ...I({ variant: t, size: y, color: v }),
-            className: i
+        ref: t,
+        disabled: r,
+        className: I(
+          F({
+            ...S({ variant: e, size: c, color: h }),
+            className: s
           }),
-          n && "pointer-events-none opacity-80"
+          a && "pointer-events-none opacity-80 user-select-none"
         ),
-        ...P,
-        children: g
+        ...b,
+        children: z
       }
     );
-    return s ? /* @__PURE__ */ r(
-      C,
+    return l ? /* @__PURE__ */ o(
+      L,
       {
-        ...l || {},
-        open: l.open ?? (e || n || !s) ? !1 : void 0,
-        message: s,
-        children: u
+        ...u || {},
+        open: u.open ?? (r || a || !l) ? !1 : void 0,
+        message: l,
+        children: v
       }
-    ) : u;
+    ) : v;
   }
 );
-R.displayName = "Button";
+T.displayName = "Button";
 export {
-  R as Button,
-  R as default
+  T as Button,
+  T as default
 };
 //# sourceMappingURL=Button.js.map

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonCVAProps, buttonVariants } from './buttonVariants';\nimport { type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\n\nconst normalizedVariantProperties = (props: ButtonCVAProps): ButtonCVAProps => {\n  const { variant, size, color } = props;\n  const vls = { color, variant, size }\n  if (size === 'icon') {\n    console.warn('Button size \"icon\" is not supported. Please use ButtonIcon component for icon-only buttons.')\n    // throw new Error('Button size \"icon\" is not supported. Please use ButtonIcon component for icon-only buttons.')\n  }\n  if (variant === 'default') {\n    console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'primary'\n    return vls\n  }\n  if (variant === 'outline') {\n    console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n    vls.variant = 'outlined'\n    vls.color = 'primary'\n    return vls\n  }\n  if (variant === 'secondary') {\n    console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'secondary'\n    return vls\n  }\n  if (variant === 'destructive') {\n    console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'error'\n    return vls\n  }\n  if (variant === 'link') {\n    console.warn('Button variant \"link\" is not implemented yet. Please contact the development team for more information.')\n    throw new Error('Button variant \"link\" is not implemented yet. Please contact the development team for more information.')\n  }\n  return vls;\n}\n\n// TODO: create ButtonIcon component | update button  | add start/end icon\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      disabled,\n      className,\n      variant,\n      color,\n      size,\n      asChild = false,\n      title = '',\n      tooltip,\n      tooltipProps = {},\n      message,\n      loading = false,\n      children,\n      startAdornment,\n      endAdornment,\n      ...rest\n    } = props;\n    const Comp = asChild ? Slot : \"button\"\n    const msg = message || tooltip || title;\n\n    const content = asChild\n      ? children\n      : (\n        <>\n          {!!startAdornment && (\n            <LoadedIcon loading={loading}>\n              {startAdornment}\n            </LoadedIcon>\n          )}\n\n          {children}\n\n          {!!endAdornment && (\n            <LoadedIcon loading={loading}>\n              {endAdornment}\n            </LoadedIcon>\n          )}\n        </>\n      )\n\n    const cmp = (\n      <Comp\n        type='button'\n        ref={ref}\n        disabled={disabled}\n        className={cn(\n          buttonVariants({\n            ...normalizedVariantProperties({ variant, size, color }),\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)\nButton.displayName = \"Button\"\n\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;AAUA,MAAMA,IAA8B,CAACC,MAA0C;AAC7E,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAK9B,MAJIA,MAAS,UACX,QAAQ,KAAK,6FAA6F,GAGxGD,MAAY;AACd,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAIH,MAAY;AACd,mBAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA;AAET,MAAIH,MAAY;AACd,mBAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAET,MAAIH,MAAY;AACd,mBAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,SACLA;AAET,MAAIH,MAAY;AACd,kBAAQ,KAAK,yGAAyG,GAChH,IAAI,MAAM,yGAAyG;AAE3H,SAAOG;AACT,GAGaC,IAASC,EAAM;AAAA,EAC1B,CAACN,GAAOO,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAR;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAQ,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDnB,GACEoB,IAAOV,IAAUW,IAAO,UACxBC,IAAMR,KAAWF,KAAWD,GAE5BY,IAAUb,IACZM,IAEA,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACR,KACD,gBAAAS,EAACC,GAAA,EAAW,SAAAZ,GACT,UAAAE,GACH;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAQ,EAACC,GAAA,EAAW,SAAAZ,GACT,UAAAG,EAAA,CACH;AAAA,IAAA,GAEJ,GAGEU,IACJ,gBAAAF;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAb;AAAA,QACA,UAAAC;AAAA,QACA,WAAWqB;AAAA,UACTC,EAAe;AAAA,YACb,GAAG/B,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAM;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGI;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIlB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACO,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAM;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAvB,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonVarianceProps, buttonVariants } from './buttonVariants';\nimport { ButtonAdornmentProps, type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { createElement, isValidElement } from \"react\";\n\nconst normalizedVariantProperties = (props: ButtonVarianceProps): ButtonVarianceProps => {\n  const { variant, size, color } = props;\n  const vls = { color, variant, size }\n  if ((variant as string) === 'default') {\n    console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'primary'\n    return vls\n  }\n  if ((size as string) === 'icon') {\n    console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\n    vls.variant = 'contained'\n    vls.color = 'secondary'\n    return vls\n    // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n  }\n  if ((variant as string) === 'transparent') {\n    console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n    throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n  }\n  if ((variant as string) === 'outline') {\n    console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n    vls.variant = 'outlined'\n    vls.color = 'primary'\n    return vls\n  }\n  if ((variant as string) === 'secondary') {\n    console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'secondary'\n    return vls\n  }\n  if ((variant as string) === 'destructive') {\n    console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n    vls.variant = 'contained'\n    vls.color = 'error'\n    return vls\n  }\n  return vls;\n}\n\nconst renderAdornment = (Adornment?: ButtonAdornmentProps) => {\n  if (!Adornment) return null;\n  if (isValidElement(Adornment)) return Adornment;\n  return createElement(Adornment);\n};\n\n/**\n * Universal Button component used for triggering actions and UI interactions.\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { Button } from '@oneplatformdev/ui/Button';\n * ```\n * > Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n * > Variant and size:\n * ```tsx\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\n * ```\n * > With icons:\n * ```tsx\n * <Button startAdornment={<PlusIcon />}>Create</Button>\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\n * ```\n * > Icon style button:\n * ```tsx\n * <Button size=\"icon\">\n *   <PlusIcon />\n * </Button>\n * ```\n * > Polymorphic rendering (`asChild`):\n * ```tsx\n * <Button asChild>\n *   <a href=\"/dashboard\">Go to Dashboard</a>\n * </Button>\n * ```\n * > Tooltip via `message` or native `title`:\n * ```tsx\n * <Button title=\"Tooltip text\">Hover me</Button>\n * <Button message=\"Tooltip content\">Hover me</Button>\n * ```\n * > Loading state:\n * ```tsx\n * <Button loading>Processing...</Button>\n * ```\n * > Disabled:\n * ```tsx\n * <Button disabled>Disabled</Button>\n * ```\n *\n * @remarks\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\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 Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      disabled,\n      className,\n      variant,\n      color,\n      size,\n      asChild = false,\n      title = '',\n      tooltip,\n      tooltipProps = {},\n      message,\n      loading = false,\n      children,\n      startAdornment,\n      endAdornment,\n      screenReader,\n      ...rest\n    } = props;\n    const Comp = asChild ? Slot : \"button\"\n    const msg = message || tooltip || title;\n\n    const content = asChild\n      ? children\n      : (\n        <>\n          {!!startAdornment && (\n            <LoadedIcon loading={loading} size={size}>\n              {renderAdornment(startAdornment)}\n            </LoadedIcon>\n          )}\n\n          {children}\n\n          {!!endAdornment && (\n            <LoadedIcon loading={loading} size={size}>\n              {renderAdornment(endAdornment)}\n            </LoadedIcon>\n          )}\n\n          {!!screenReader && <span className=\"sr-only\">{typeof screenReader === 'string' ? screenReader : screenReader.text}</span>}\n        </>\n      )\n\n    const cmp = (\n      <Comp\n        type='button'\n        ref={ref}\n        disabled={disabled}\n        className={cn(\n          buttonVariants({\n            ...normalizedVariantProperties({ variant, size, color }),\n            className\n          }),\n          loading && 'pointer-events-none opacity-80 user-select-none',\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)\nButton.displayName = \"Button\"\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","renderAdornment","Adornment","isValidElement","createElement","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA8B,CAACC,MAAoD;AACvF,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAC9B,MAAKD,MAAuB;AAC1B,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAKF,MAAoB;AACvB,mBAAQ,KAAK,iFAAiF,GAC9FE,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAGT,MAAKH,MAAuB;AAC1B,kBAAQ,KAAK,6EAA6E,GACpF,IAAI,MAAM,6EAA6E;AAE/F,SAAKA,MAAuB,aAC1B,QAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA,KAEJH,MAAuB,eAC1B,QAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA,MAEJH,MAAuB,kBAC1B,QAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,UACLA;AAGX,GAEMC,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAS,IAAUA,IAC/BE,EAAcF,CAAS,IAFP,MA+DZG,IAASC,EAAM;AAAA,EAC1B,CAACV,GAAOW,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAZ;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAY,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDxB,GACEyB,IAAOX,IAAUY,IAAO,UACxBC,IAAMT,KAAWF,KAAWD,GAE5Ba,IAAUd,IACZM,IAEA,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACT,KACD,gBAAAU,EAACC,GAAA,EAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBgB,CAAc,GACjC;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAS,EAACC,KAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBiB,CAAY,GAC/B;AAAA,MAGD,CAAC,CAACC,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,OAAOR,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAAK;AAAA,IAAA,GACpH,GAGEU,IACJ,gBAAAF;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAC;AAAA,QACA,WAAWsB;AAAA,UACTC,EAAe;AAAA,YACb,GAAGpC,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAU;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGK;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAInB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACQ,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAM;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAxB,EAAO,cAAc;"}

package/Button/Button.stories.js

@@ -1,31 +1,8 @@
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Button as t } from "./Button.js";
-import { PlusIcon as s } from "lucide-react";
-const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
-  "div",
-  {
-    style: {
-      padding: "0px 20px",
-      display: "flex",
-      gap: "32px",
-      alignItems: "flex-start"
-    },
-    children: /* @__PURE__ */ a(
-      "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
-      }
-    )
-  }
-), r = (e) => /* @__PURE__ */ a(
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { Button as o } from "./Button.js";
+import { FileDownIcon as m, Trash2Icon as p, PlusIcon as n } from "lucide-react";
+import { DashedWrapper as a } from "../.storybook/Wrappers.js";
+const r = (e) => /* @__PURE__ */ t(
   "div",
   {
     style: {
@@ -34,33 +11,107 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
       flexDirection: "column",
       gap: "16px"
     },
-    children: ["default", "hover", "focus", "active", "disabled"].map((l) => /* @__PURE__ */ a(
-      t,
+    children: ["default", "hover", "focus", "active", "disabled", "loading"].map((l) => /* @__PURE__ */ t(
+      o,
       {
         id: l,
         ...e,
         disabled: l === "disabled" || e.disabled,
+        loading: l === "loading" || e.loading,
         children: e.children
       },
       l
     ))
   }
-), d = ["transparent", "none", "contained", "outlined", "ghost"], c = ["primary", "secondary", "error"], f = ["sm", "lg"], m = {
+), u = ["none", "contained", "outlined", "ghost"], g = ["primary", "secondary", "error"], f = ["xs", "sm", "md", "lg"], h = "contained", y = "primary", v = "lg", s = {
+  undefined: void 0,
+  "<PlusIcon />": /* @__PURE__ */ t(n, {}),
+  "<Trash2Icon />": /* @__PURE__ */ t(p, {}),
+  "<FileDownIcon />": /* @__PURE__ */ t(m, {}),
+  PlusIcon: n,
+  Trash2Icon: p,
+  FileDownIcon: m
+}, d = {
   title: "Button",
-  component: t,
-  render: h,
+  component: o,
+  // render: Template,
   args: {
-    variant: d[0],
-    color: c[0],
-    size: f[0],
+    tooltip: void 0,
+    asChild: !1,
+    //
+    variant: h,
+    color: y,
+    size: v,
+    loading: !1,
     disabled: !1,
-    asChild: !1
+    startAdornment: void 0,
+    endAdornment: void 0,
+    slotProps: {},
+    tooltipProps: {}
   },
   argTypes: {
-    asChild: { control: !1 },
-    variant: { options: d, control: { type: "select" } },
-    color: { options: c, control: { type: "select" } },
-    size: { options: f, control: { type: "select" } }
+    tooltip: {
+      name: "tooltip",
+      description: "Button tooltip from ButtonProps [deprecated, use title and message instead]",
+      control: !1
+    },
+    asChild: {
+      name: "asChild",
+      description: "Button asChild from ButtonProps [boolean]",
+      control: !1
+    },
+    variant: {
+      name: "variant",
+      description: "Button variant from ButtonProps",
+      options: u,
+      control: { type: "inline-radio" }
+    },
+    color: {
+      name: "color",
+      description: "Button color from ButtonProps",
+      options: g,
+      control: { type: "inline-radio" }
+    },
+    size: {
+      name: "size",
+      description: "Button size from ButtonProps",
+      options: f,
+      control: { type: "inline-radio" }
+    },
+    title: {
+      name: "title",
+      description: "Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]",
+      control: { type: "text" }
+    },
+    message: {
+      name: "message",
+      description: "Button tooltip message from ButtonProps [ReactNode]",
+      control: { type: "object" }
+    },
+    startAdornment: {
+      name: "startAdornment",
+      description: "Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
+      options: Object.keys(s),
+      mapping: s,
+      control: { type: "inline-radio" }
+    },
+    endAdornment: {
+      name: "endAdornment",
+      description: "Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
+      options: Object.keys(s),
+      mapping: s,
+      control: { type: "inline-radio" }
+    },
+    slotProps: {
+      name: "slotProps",
+      description: "Button slotProps from ButtonProps [object]",
+      control: { type: "object" }
+    },
+    tooltipProps: {
+      name: "tooltipProps",
+      description: "Button tooltipProps from ButtonProps [object]",
+      control: { type: "object" }
+    }
   },
   parameters: {
     pseudo: {
@@ -70,16 +121,99 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
       disabled: "#disabled"
     }
   }
-}, n = {
-  disabled: !1,
-  loading: !1,
-  asChild: !1,
-  startAdornment: /* @__PURE__ */ a(s, {}),
-  endAdornment: /* @__PURE__ */ a(s, {}),
+}, c = {
+  ...d.args,
+  startAdornment: /* @__PURE__ */ t(n, {}),
+  endAdornment: /* @__PURE__ */ t(n, {}),
   children: "children"
-}, x = { args: n }, y = {
+}, D = {
+  args: {
+    ...d.args,
+    children: "_children_"
+  }
+}, x = {
+  render: (e) => /* @__PURE__ */ i(a, { children: [
+    /* @__PURE__ */ t(o, { ...e }),
+    /* @__PURE__ */ t(o, { ...e, startAdornment: /* @__PURE__ */ t(n, {}) }),
+    /* @__PURE__ */ t(o, { ...e, startAdornment: /* @__PURE__ */ t(n, {}), endAdornment: /* @__PURE__ */ t(n, {}) }),
+    /* @__PURE__ */ t(o, { ...e, endAdornment: /* @__PURE__ */ t(n, {}) })
+  ] }),
+  args: {
+    ...d.args,
+    disabled: !0,
+    children: "disabled"
+  }
+}, S = {
+  render: (e) => /* @__PURE__ */ i(a, { children: [
+    /* @__PURE__ */ t(o, { ...e }),
+    /* @__PURE__ */ t(o, { ...e, startAdornment: /* @__PURE__ */ t(n, {}) }),
+    /* @__PURE__ */ t(o, { ...e, startAdornment: /* @__PURE__ */ t(n, {}), endAdornment: /* @__PURE__ */ t(n, {}) }),
+    /* @__PURE__ */ t(o, { ...e, endAdornment: /* @__PURE__ */ t(n, {}) })
+  ] }),
+  args: {
+    children: "Loading…",
+    loading: !0
+  }
+}, G = {
+  render: (e) => /* @__PURE__ */ t(a, { children: /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ t(
+      o,
+      {
+        ...e,
+        title: "delayDuration: 0",
+        tooltipProps: { delayDuration: 0 },
+        children: "delayDuration: 0"
+      }
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        ...e,
+        title: "delayDuration: 300 [default]",
+        tooltipProps: { delayDuration: 300 },
+        children: "delayDuration: 300"
+      }
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        ...e,
+        title: "delayDuration: 700",
+        tooltipProps: { delayDuration: 700 },
+        children: "delayDuration: 700"
+      }
+    ),
+    /* @__PURE__ */ t(o, { ...e, title: "title_string", children: "title" }),
+    /* @__PURE__ */ t(o, { ...e, message: "message_string", children: "message: string" }),
+    /* @__PURE__ */ t(
+      o,
+      {
+        ...e,
+        message: /* @__PURE__ */ t("span", { children: "message_node_span" }),
+        children: "message: ReactNode"
+      }
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        ...e,
+        message: "message_string",
+        tooltipProps: {
+          showQuestionMark: !0
+        },
+        children: "showQuestionMark: true"
+      }
+    )
+  ] }) }),
+  args: {
+    children: "tooltips",
+    tooltipProps: {
+      defaultOpen: !0
+    }
+  }
+}, V = {
   args: {
-    ...n,
+    ...c,
     color: "primary",
     size: "lg",
     children: "Створити"
@@ -88,14 +222,14 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: (e) => /* @__PURE__ */ a("div", { className: "flex", children: /* @__PURE__ */ o(i, { children: [
-    /* @__PURE__ */ a(r, { ...e, variant: "contained" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "outlined" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "ghost" })
+  render: (e) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
+    /* @__PURE__ */ t(r, { ...e, variant: "contained" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "ghost" })
   ] }) })
-}, u = {
+}, T = {
   args: {
-    ...n,
+    ...c,
     color: "secondary",
     size: "lg",
     children: "Створити"
@@ -104,14 +238,14 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: (e) => /* @__PURE__ */ a("div", { className: "flex", children: /* @__PURE__ */ o(i, { children: [
-    /* @__PURE__ */ a(r, { ...e, variant: "contained" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "outlined" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "ghost" })
+  render: (e) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
+    /* @__PURE__ */ t(r, { ...e, variant: "contained" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "ghost" })
   ] }) })
-}, b = {
+}, _ = {
   args: {
-    ...n,
+    ...c,
     color: "error",
     size: "lg",
     children: "Створити"
@@ -120,17 +254,20 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
     variant: { control: !1 },
     color: { control: !1 }
   },
-  render: (e) => /* @__PURE__ */ a("div", { className: "flex", children: /* @__PURE__ */ o(i, { children: [
-    /* @__PURE__ */ a(r, { ...e, variant: "contained" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "outlined" }),
-    /* @__PURE__ */ a(r, { ...e, variant: "ghost" })
+  render: (e) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
+    /* @__PURE__ */ t(r, { ...e, variant: "contained" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "outlined" }),
+    /* @__PURE__ */ t(r, { ...e, variant: "ghost" })
   ] }) })
 };
 export {
-  x as Default,
-  b as Error,
-  y as Primary,
-  u as Secondary,
-  m as default
+  D as Default,
+  x as Disabled,
+  _ as Error,
+  S as Loading,
+  V as Primary,
+  T as Secondary,
+  G as Tooltips,
+  d as default
 };
 //# sourceMappingURL=Button.stories.js.map