@techzyapp/ui-library 1.0.43 → 1.0.44

package/dist/IconButton-EaExCXRq.js

@@ -0,0 +1,68 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { forwardRef as y, isValidElement as x, cloneElement as B } from "react";
+import { clsx as g } from "clsx";
+import { L as v } from "./Loader-D_Foo6Hj.js";
+const z = "_iconButton_1lspy_1", I = "_sm_1lspy_22", k = "_md_1lspy_27", C = "_lg_1lspy_32", E = "_contained_1lspy_38", L = "_filled_1lspy_50", $ = "_outlined_1lspy_61", j = "_text_1lspy_74", w = "_rounded_1lspy_86", N = "_disabled_1lspy_94", R = "_loading_1lspy_98", V = "_nonClickable_1lspy_103", t = {
+  iconButton: z,
+  sm: I,
+  md: k,
+  lg: C,
+  contained: E,
+  filled: L,
+  outlined: $,
+  text: j,
+  rounded: w,
+  disabled: N,
+  loading: R,
+  nonClickable: V
+}, H = y(function({
+  variant: c = "contained",
+  color: e = "accent",
+  size: s = "md",
+  loading: o = !1,
+  rounded: a = !1,
+  disabled: d = !1,
+  nonClickable: l = !1,
+  className: i,
+  style: r,
+  type: p = "button",
+  tabIndex: u,
+  children: n,
+  ...m
+}, f) {
+  const b = x(n) && !o ? B(n, {
+    size: n.props.size ?? s
+  }) : n;
+  return /* @__PURE__ */ _(
+    "button",
+    {
+      ref: f,
+      type: p,
+      disabled: d || o,
+      "aria-busy": o || void 0,
+      "aria-disabled": l || void 0,
+      tabIndex: l ? -1 : u,
+      className: g(
+        t.iconButton,
+        t[c],
+        t[s],
+        a && t.rounded,
+        o && t.loading,
+        d && t.disabled,
+        l && t.nonClickable,
+        i
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${e}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${e}-contrast, #fff)`,
+        ...r
+      },
+      ...m,
+      children: o ? /* @__PURE__ */ _(v, { size: s, "aria-hidden": "true" }) : b
+    }
+  );
+});
+export {
+  H as I
+};
+//# sourceMappingURL=IconButton-EaExCXRq.js.map

package/dist/{IconButton-BoURJOUD.js.map → IconButton-EaExCXRq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-BoURJOUD.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":";;;;;;;;;;;;;;;;;GAyCaA,IAAaC,EAA+C,SACvE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IACJC,EAAeJ,CAAQ,KAAK,CAACR,IACzBa,EAAaL,GAAqD;AAAA,IAChE,MAAOA,EAAS,MAAoC,QAAQT;AAAA,EAAA,CAC7D,IACDS;AAEN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAAJ;AAAA,MACA,UAAUJ,KAAYF;AAAA,MACtB,aAAWA,KAAW;AAAA,MACtB,iBAAeG,KAAgB;AAAA,MAC/B,UAAUA,IAAe,KAAKI;AAAA,MAC9B,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOnB,CAAO;AAAA,QACdmB,EAAOjB,CAAI;AAAA,QACXE,KAAWe,EAAO;AAAA,QAClBhB,KAAWgB,EAAO;AAAA,QAClBd,KAAYc,EAAO;AAAA,QACnBb,KAAgBa,EAAO;AAAA,QACvBZ;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBN,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGO;AAAA,MAAA;AAAA,MAGN,GAAGI;AAAA,MAEH,cAAU,gBAAAK,EAACG,GAAA,EAAO,MAAAlB,GAAY,eAAY,QAAO,IAAKY;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"IconButton-EaExCXRq.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":";;;;;;;;;;;;;;;;;GAyCaA,IAAaC,EAA+C,SACvE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IACJC,EAAeJ,CAAQ,KAAK,CAACR,IACzBa,EAAaL,GAAqD;AAAA,IAChE,MAAOA,EAAS,MAAoC,QAAQT;AAAA,EAAA,CAC7D,IACDS;AAEN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAAJ;AAAA,MACA,UAAUJ,KAAYF;AAAA,MACtB,aAAWA,KAAW;AAAA,MACtB,iBAAeG,KAAgB;AAAA,MAC/B,UAAUA,IAAe,KAAKI;AAAA,MAC9B,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOnB,CAAO;AAAA,QACdmB,EAAOjB,CAAI;AAAA,QACXE,KAAWe,EAAO;AAAA,QAClBhB,KAAWgB,EAAO;AAAA,QAClBd,KAAYc,EAAO;AAAA,QACnBb,KAAgBa,EAAO;AAAA,QACvBZ;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBN,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGO;AAAA,MAAA;AAAA,MAGN,GAAGI;AAAA,MAEH,cAAU,gBAAAK,EAACG,GAAA,EAAO,MAAAlB,GAAY,eAAY,QAAO,IAAKY;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

package/dist/IconButton-wW1o4HHw.cjs

@@ -0,0 +1,2 @@
+"use strict";const _=require("react/jsx-runtime"),l=require("react"),x=require("clsx"),B=require("./Loader-DNR2_YHm.cjs"),g="_iconButton_1lspy_1",q="_sm_1lspy_22",v="_md_1lspy_27",z="_lg_1lspy_32",I="_contained_1lspy_38",j="_filled_1lspy_50",k="_outlined_1lspy_61",C="_text_1lspy_74",E="_rounded_1lspy_86",L="_disabled_1lspy_94",R="_loading_1lspy_98",$="_nonClickable_1lspy_103",t={iconButton:g,sm:q,md:v,lg:z,contained:I,filled:j,outlined:k,text:C,rounded:E,disabled:L,loading:R,nonClickable:$},w=l.forwardRef(function({variant:i="contained",color:c="accent",size:s="md",loading:n=!1,rounded:a=!1,disabled:d=!1,nonClickable:e=!1,className:r,style:u,type:b="button",tabIndex:y,children:o,...p},f){const m=l.isValidElement(o)&&!n?l.cloneElement(o,{size:o.props.size??s}):o;return _.jsx("button",{ref:f,type:b,disabled:d||n,"aria-busy":n||void 0,"aria-disabled":e||void 0,tabIndex:e?-1:y,className:x.clsx(t.iconButton,t[i],t[s],a&&t.rounded,n&&t.loading,d&&t.disabled,e&&t.nonClickable,r),style:{"--tz-btn-rgb":`var(--tz-color-${c}-rgb)`,"--tz-btn-on":`var(--tz-color-${c}-contrast, #fff)`,...u},...p,children:n?_.jsx(B.Loader,{size:s,"aria-hidden":"true"}):m})});exports.IconButton=w;
+//# sourceMappingURL=IconButton-wW1o4HHw.cjs.map

package/dist/{IconButton-CiDPeKM4.cjs.map → IconButton-wW1o4HHw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-CiDPeKM4.cjs","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":"+eAyCaA,EAAaC,EAAAA,WAA+C,SACvE,CACE,QAAAC,EAAU,YACV,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,UAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EACJC,EAAAA,eAAeJ,CAAQ,GAAK,CAACR,EACzBa,EAAAA,aAAaL,EAAqD,CAChE,KAAOA,EAAS,MAAoC,MAAQT,CAAA,CAC7D,EACDS,EAEN,OACEM,EAAAA,IAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,SAAUJ,GAAYF,EACtB,YAAWA,GAAW,OACtB,gBAAeG,GAAgB,OAC/B,SAAUA,EAAe,GAAKI,EAC9B,UAAWQ,EAAAA,KACTC,EAAO,WACPA,EAAOnB,CAAO,EACdmB,EAAOjB,CAAI,EACXE,GAAWe,EAAO,QAClBhB,GAAWgB,EAAO,QAClBd,GAAYc,EAAO,SACnBb,GAAgBa,EAAO,aACvBZ,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBN,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGO,CAAA,EAGN,GAAGI,EAEH,WAAUK,EAAAA,IAACG,EAAAA,OAAA,CAAO,KAAAlB,EAAY,cAAY,OAAO,EAAKY,CAAA,CAAA,CAG7D,CAAC"}
+{"version":3,"file":"IconButton-wW1o4HHw.cjs","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":"gfAyCaA,EAAaC,EAAAA,WAA+C,SACvE,CACE,QAAAC,EAAU,YACV,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,UAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EACJC,EAAAA,eAAeJ,CAAQ,GAAK,CAACR,EACzBa,EAAAA,aAAaL,EAAqD,CAChE,KAAOA,EAAS,MAAoC,MAAQT,CAAA,CAC7D,EACDS,EAEN,OACEM,EAAAA,IAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,SAAUJ,GAAYF,EACtB,YAAWA,GAAW,OACtB,gBAAeG,GAAgB,OAC/B,SAAUA,EAAe,GAAKI,EAC9B,UAAWQ,EAAAA,KACTC,EAAO,WACPA,EAAOnB,CAAO,EACdmB,EAAOjB,CAAI,EACXE,GAAWe,EAAO,QAClBhB,GAAWgB,EAAO,QAClBd,GAAYc,EAAO,SACnBb,GAAgBa,EAAO,aACvBZ,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBN,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGO,CAAA,EAGN,GAAGI,EAEH,WAAUK,EAAAA,IAACG,EAAAA,OAAA,CAAO,KAAAlB,EAAY,cAAY,OAAO,EAAKY,CAAA,CAAA,CAG7D,CAAC"}