@techzyapp/ui-library 1.0.0

package/dist/IconButton-CBusrDa9.js

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

package/dist/IconButton-CBusrDa9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-CBusrDa9.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-D6TenQZ_.cjs

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

package/dist/IconButton-D6TenQZ_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-D6TenQZ_.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"}

package/dist/List-BHgFI9Ll.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as d, useContext as l, forwardRef as u } from "react";
+import { s } from "./Flex-Bj3mMF5A.js";
+const i = d(void 0), y = () => l(i), S = u(function({ as: n, gap: r = 2, padding: a, role: p = "list", size: t, style: c, children: o, ...m }, f) {
+  return /* @__PURE__ */ e(
+    n ?? "div",
+    {
+      ref: f,
+      role: p,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: s(r),
+        padding: s(a),
+        ...c
+      },
+      ...m,
+      children: t ? /* @__PURE__ */ e(i.Provider, { value: t, children: o }) : o
+    }
+  );
+});
+export {
+  S as L,
+  y as u
+};
+//# sourceMappingURL=List-BHgFI9Ll.js.map

package/dist/List-BHgFI9Ll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-BHgFI9Ll.js","sources":["../src/components/List/listContext.ts","../src/components/List/List.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ListItemSize } from './ListItem'\n\n/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */\nexport const ListSizeContext = createContext<ListItemSize | undefined>(undefined)\n\n/** Read the size provided by a surrounding `List`, if any. */\nexport const useListSize = (): ListItemSize | undefined => useContext(ListSizeContext)\n","import {\n  forwardRef,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { ListSizeContext } from './listContext'\nimport type { ListItemSize } from './ListItem'\n\nexport interface ListProps extends HTMLAttributes<HTMLElement> {\n  /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */\n  as?: ElementType\n  /** Gap between items (token key, px number, or CSS value). Defaults to `2px`. */\n  gap?: Spacing\n  /** Padding around the list (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Default size for the contained `ListItem`s — each item can still override its own `size`. */\n  size?: ListItemSize\n  children?: ReactNode\n}\n\n/**\n * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`\n * and `role=\"list\"` (override `role` to `\"menu\"` for a dropdown, etc.). `size` sets a default for all\n * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.\n */\nexport const List = forwardRef<HTMLElement, ListProps>(function List(\n  { as, gap = 2, padding, role = 'list', size, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? 'div') as ElementType\n  return (\n    <Component\n      ref={ref}\n      role={role}\n      style={\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: space(gap),\n          padding: space(padding),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {size ? (\n        <ListSizeContext.Provider value={size}>{children}</ListSizeContext.Provider>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n})\n"],"names":["ListSizeContext","createContext","useListSize","useContext","List","forwardRef","as","gap","padding","role","size","style","children","props","ref","jsx","space"],"mappings":";;;AAIO,MAAMA,IAAkBC,EAAwC,MAAS,GAGnEC,IAAc,MAAgCC,EAAWH,CAAe,GCqBxEI,IAAOC,EAAmC,SACrD,EAAE,IAAAC,GAAI,KAAAC,IAAM,GAAG,SAAAC,GAAS,MAAAC,IAAO,QAAQ,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GACjEC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFiBT,KAAM;AAAA,IAEtB;AAAA,MACC,KAAAQ;AAAA,MACA,MAAAL;AAAA,MACA,OACE;AAAA,QACE,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAKO,EAAMT,CAAG;AAAA,QACd,SAASS,EAAMR,CAAO;AAAA,QACtB,GAAGG;AAAA,MAAA;AAAA,MAGN,GAAGE;AAAA,MAEH,UAAAH,sBACEV,EAAgB,UAAhB,EAAyB,OAAOU,GAAO,UAAAE,GAAS,IAEjDA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/List-CNz2M3-q.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react/jsx-runtime"),e=require("react"),n=require("./Flex-CqL3Ghda.cjs"),o=e.createContext(void 0),L=()=>e.useContext(o),f=e.forwardRef(function({as:r,gap:c=2,padding:u,role:a="list",size:t,style:x,children:s,...l},d){const p=r??"div";return i.jsx(p,{ref:d,role:a,style:{display:"flex",flexDirection:"column",gap:n.space(c),padding:n.space(u),...x},...l,children:t?i.jsx(o.Provider,{value:t,children:s}):s})});exports.List=f;exports.useListSize=L;
+//# sourceMappingURL=List-CNz2M3-q.cjs.map

package/dist/List-CNz2M3-q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-CNz2M3-q.cjs","sources":["../src/components/List/listContext.ts","../src/components/List/List.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ListItemSize } from './ListItem'\n\n/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */\nexport const ListSizeContext = createContext<ListItemSize | undefined>(undefined)\n\n/** Read the size provided by a surrounding `List`, if any. */\nexport const useListSize = (): ListItemSize | undefined => useContext(ListSizeContext)\n","import {\n  forwardRef,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { ListSizeContext } from './listContext'\nimport type { ListItemSize } from './ListItem'\n\nexport interface ListProps extends HTMLAttributes<HTMLElement> {\n  /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */\n  as?: ElementType\n  /** Gap between items (token key, px number, or CSS value). Defaults to `2px`. */\n  gap?: Spacing\n  /** Padding around the list (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Default size for the contained `ListItem`s — each item can still override its own `size`. */\n  size?: ListItemSize\n  children?: ReactNode\n}\n\n/**\n * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`\n * and `role=\"list\"` (override `role` to `\"menu\"` for a dropdown, etc.). `size` sets a default for all\n * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.\n */\nexport const List = forwardRef<HTMLElement, ListProps>(function List(\n  { as, gap = 2, padding, role = 'list', size, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? 'div') as ElementType\n  return (\n    <Component\n      ref={ref}\n      role={role}\n      style={\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: space(gap),\n          padding: space(padding),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {size ? (\n        <ListSizeContext.Provider value={size}>{children}</ListSizeContext.Provider>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n})\n"],"names":["ListSizeContext","createContext","useListSize","useContext","List","forwardRef","as","gap","padding","role","size","style","children","props","ref","Component","jsx","space"],"mappings":"sGAIaA,EAAkBC,EAAAA,cAAwC,MAAS,EAGnEC,EAAc,IAAgCC,EAAAA,WAAWH,CAAe,ECqBxEI,EAAOC,EAAAA,WAAmC,SACrD,CAAE,GAAAC,EAAI,IAAAC,EAAM,EAAG,QAAAC,EAAS,KAAAC,EAAO,OAAQ,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAA,EACjEC,EACA,CACA,MAAMC,EAAaT,GAAM,MACzB,OACEU,EAAAA,IAACD,EAAA,CACC,IAAAD,EACA,KAAAL,EACA,MACE,CACE,QAAS,OACT,cAAe,SACf,IAAKQ,EAAAA,MAAMV,CAAG,EACd,QAASU,EAAAA,MAAMT,CAAO,EACtB,GAAGG,CAAA,EAGN,GAAGE,EAEH,SAAAH,QACEV,EAAgB,SAAhB,CAAyB,MAAOU,EAAO,SAAAE,EAAS,EAEjDA,CAAA,CAAA,CAIR,CAAC"}

package/dist/ListItem-B4yqZR-Z.js

@@ -0,0 +1,74 @@
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { clsx as v } from "clsx";
+import { I as y } from "./Icon-CophpkHo.js";
+import { a as C } from "./names-D8ABK2Wk.js";
+import { u as E } from "./List-BHgFI9Ll.js";
+const O = "_item_1d91m_3", j = "_sm_1d91m_25", D = "_md_1d91m_31", A = "_lg_1d91m_36", M = "_itemIcon_1d91m_43", w = "_itemText_1d91m_51", B = "_itemLabel_1d91m_59", R = "_itemDescription_1d91m_66", Z = "_itemTrailing_1d91m_76", $ = "_clickable_1d91m_86", q = "_selected_1d91m_103", F = "_disabled_1d91m_124", t = {
+  item: O,
+  sm: j,
+  md: D,
+  lg: A,
+  itemIcon: M,
+  itemText: w,
+  itemLabel: B,
+  itemDescription: R,
+  itemTrailing: Z,
+  clickable: $,
+  selected: q,
+  disabled: F
+}, G = new Set(C), H = { sm: "sm", md: "md", lg: "md" }, K = S(function({
+  icon: e,
+  description: o,
+  trailing: _,
+  selected: d = !1,
+  clickable: c = !1,
+  disabled: s = !1,
+  size: I,
+  color: b = "primary",
+  as: m,
+  className: g,
+  style: N,
+  children: a,
+  onClick: T,
+  onKeyDown: l,
+  ...x
+}, L) {
+  const h = E(), p = I ?? h ?? "md", z = m ?? "div", r = c && !(m === "a" || m === "button" || typeof m == "function" || typeof m == "object"), u = e == null ? null : typeof e == "string" && G.has(e) ? /* @__PURE__ */ n(y, { name: e, size: H[p] }) : e, k = (i) => {
+    r && !s && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click()), l == null || l(i);
+  };
+  return /* @__PURE__ */ f(
+    z,
+    {
+      ref: L,
+      className: v(
+        t.item,
+        t[p],
+        d && t.selected,
+        c && t.clickable,
+        s && t.disabled,
+        g
+      ),
+      style: { "--tz-btn-rgb": `var(--tz-color-${b}-rgb)`, ...N },
+      role: r ? "button" : void 0,
+      tabIndex: r ? s ? -1 : 0 : void 0,
+      "aria-disabled": s || void 0,
+      "aria-current": d || void 0,
+      onClick: s ? void 0 : T,
+      onKeyDown: c ? k : l,
+      ...x,
+      children: [
+        u != null && /* @__PURE__ */ n("span", { className: t.itemIcon, children: u }),
+        (a != null || o != null) && /* @__PURE__ */ f("span", { className: t.itemText, children: [
+          a != null && /* @__PURE__ */ n("span", { className: t.itemLabel, children: a }),
+          o != null && /* @__PURE__ */ n("span", { className: t.itemDescription, children: o })
+        ] }),
+        _ != null && /* @__PURE__ */ n("span", { className: t.itemTrailing, children: _ })
+      ]
+    }
+  );
+});
+export {
+  K as L
+};
+//# sourceMappingURL=ListItem-B4yqZR-Z.js.map

package/dist/ListItem-B4yqZR-Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem-B4yqZR-Z.js","sources":["../src/components/List/ListItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useListSize } from './listContext'\nimport styles from './List.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ListItemSize = 'sm' | 'md' | 'lg'\n\n/** Leading `<Icon>` size per row size. */\nconst ICON_SIZE: Record<ListItemSize, 'sm' | 'md'> = { sm: 'sm', md: 'md', lg: 'md' }\n\nexport interface ListItemProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, 'color'>,\n    Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'> {\n  /** Leading element — a known `IconName` (rendered as `<Icon>`) or any node (e.g. an `Avatar`). */\n  icon?: IconName | ReactNode\n  /** Secondary muted line shown under the label. */\n  description?: ReactNode\n  /** Trailing content pinned to the right (icon, `Badge`, shortcut text, chevron, …). */\n  trailing?: ReactNode\n  /** Highlights the row as selected/active (menu selection, current nav route). */\n  selected?: boolean\n  /** Makes the row interactive (hover + cursor; adds `role`/`tabIndex`/keyboard when rendered plain). */\n  clickable?: boolean\n  /** Dims and inerts the row. */\n  disabled?: boolean\n  /** Row size — height / padding / font. Defaults to `md`. */\n  size?: ListItemSize\n  /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */\n  as?: ElementType\n  /** Primary label / content. */\n  children?: ReactNode\n}\n\n/**\n * A flexible, reusable list row: leading `icon`, a label (`children`) with optional `description`, and\n * a `trailing` slot. `clickable` turns it interactive (hover + keyboard when rendered as a plain\n * element), `selected` highlights it, `disabled` inerts it. Render as a link/button/router `Link` via\n * `as`. Designed to compose inside `List` — for menus, the sidebar, or a standalone styled list.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    icon,\n    description,\n    trailing,\n    selected = false,\n    clickable = false,\n    disabled = false,\n    size: sizeProp,\n    color = 'primary',\n    as,\n    className,\n    style,\n    children,\n    onClick,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  // an explicit `size` wins; otherwise inherit a surrounding `List`'s size, falling back to `md`\n  const listSize = useListSize()\n  const size = sizeProp ?? listSize ?? 'md'\n  const Component = (as ?? 'div') as ElementType\n  // Anchors, buttons, and custom components (e.g. a router Link) carry their own click + keyboard\n  // semantics — only a plain element needs the button role/tabIndex/Enter-Space shim.\n  const handlesOwnInteraction =\n    as === 'a' || as === 'button' || typeof as === 'function' || typeof as === 'object'\n  const isDivButton = clickable && !handlesOwnInteraction\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={ICON_SIZE[size]} />\n    ) : (\n      icon\n    )\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (isDivButton && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        styles.item,\n        styles[size],\n        selected && styles.selected,\n        clickable && styles.clickable,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      role={isDivButton ? 'button' : undefined}\n      tabIndex={isDivButton ? (disabled ? -1 : 0) : undefined}\n      aria-disabled={disabled || undefined}\n      aria-current={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={clickable ? handleKeyDown : onKeyDown}\n      {...props}\n    >\n      {renderedIcon != null && <span className={styles.itemIcon}>{renderedIcon}</span>}\n      {(children != null || description != null) && (\n        <span className={styles.itemText}>\n          {children != null && <span className={styles.itemLabel}>{children}</span>}\n          {description != null && <span className={styles.itemDescription}>{description}</span>}\n        </span>\n      )}\n      {trailing != null && <span className={styles.itemTrailing}>{trailing}</span>}\n    </Component>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","ICON_SIZE","ListItem","forwardRef","icon","description","trailing","selected","clickable","disabled","sizeProp","color","as","className","style","children","onClick","onKeyDown","props","ref","listSize","useListSize","size","Component","isDivButton","renderedIcon","jsx","Icon","handleKeyDown","event","jsxs","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;;;;GAgBMA,IAAgB,IAAI,IAAYC,CAAU,GAK1CC,IAA+C,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAA,GAkClEC,IAAWC,EAAuC,SAC7D;AAAA,EACE,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAMC;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IAAWC,EAAA,GACXC,IAAOZ,KAAYU,KAAY,MAC/BG,IAAaX,KAAM,OAKnBY,IAAchB,KAAa,EAD/BI,MAAO,OAAOA,MAAO,YAAY,OAAOA,KAAO,cAAc,OAAOA,KAAO,WAGvEa,IACJrB,KAAQ,OAAO,OAAO,OAAOA,KAAS,YAAYL,EAAc,IAAIK,CAAI,IACtE,gBAAAsB,EAACC,KAAK,MAAMvB,GAAkB,MAAMH,EAAUqB,CAAI,GAAG,IAErDlB,GAGEwB,IAAgB,CAACC,MAAsC;AAC3D,IAAIL,KAAe,CAACf,MAAaoB,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACtEA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBZ,KAAA,QAAAA,EAAYY;AAAA,EACd;AAEA,SACE,gBAAAC;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWY;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOV,CAAI;AAAA,QACXf,KAAYyB,EAAO;AAAA,QACnBxB,KAAawB,EAAO;AAAA,QACpBvB,KAAYuB,EAAO;AAAA,QACnBnB;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,gBAAgB,kBAAkBF,CAAK,SAAS,GAAGG,EAAA;AAAA,MAC5D,MAAMU,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAef,IAAW,KAAK,IAAK;AAAA,MAC9C,iBAAeA,KAAY;AAAA,MAC3B,gBAAcF,KAAY;AAAA,MAC1B,SAASE,IAAW,SAAYO;AAAA,MAChC,WAAWR,IAAYoB,IAAgBX;AAAA,MACtC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAO,KAAgB,QAAQ,gBAAAC,EAAC,QAAA,EAAK,WAAWM,EAAO,UAAW,UAAAP,GAAa;AAAA,SACvEV,KAAY,QAAQV,KAAe,2BAClC,QAAA,EAAK,WAAW2B,EAAO,UACrB,UAAA;AAAA,UAAAjB,KAAY,QAAQ,gBAAAW,EAAC,QAAA,EAAK,WAAWM,EAAO,WAAY,UAAAjB,GAAS;AAAA,UACjEV,KAAe,QAAQ,gBAAAqB,EAAC,UAAK,WAAWM,EAAO,iBAAkB,UAAA3B,EAAA,CAAY;AAAA,QAAA,GAChF;AAAA,QAEDC,KAAY,QAAQ,gBAAAoB,EAAC,UAAK,WAAWM,EAAO,cAAe,UAAA1B,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC;"}

package/dist/ListItem-RH-D-Wey.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),z=require("react"),k=require("clsx"),q=require("./Icon-CXTl_QAP.cjs"),S=require("./names-C2Yj1p3u.cjs"),v=require("./List-CNz2M3-q.cjs"),y="_item_1d91m_3",C="_sm_1d91m_25",E="_md_1d91m_31",O="_lg_1d91m_36",D="_itemIcon_1d91m_43",A="_itemText_1d91m_51",M="_itemLabel_1d91m_59",R="_itemDescription_1d91m_66",w="_itemTrailing_1d91m_76",B="_clickable_1d91m_86",Z="_selected_1d91m_103",$="_disabled_1d91m_124",e={item:y,sm:C,md:E,lg:O,itemIcon:D,itemText:A,itemLabel:M,itemDescription:R,itemTrailing:w,clickable:B,selected:Z,disabled:$},F=new Set(S.ICON_NAMES),G={sm:"sm",md:"md",lg:"md"},H=z.forwardRef(function({icon:s,description:l,trailing:_,selected:d=!1,clickable:o=!1,disabled:i=!1,size:x,color:b="primary",as:n,className:p,style:f,children:r,onClick:g,onKeyDown:m,...N},T){const j=v.useListSize(),u=x??j??"md",L=n??"div",a=o&&!(n==="a"||n==="button"||typeof n=="function"||typeof n=="object"),I=s==null?null:typeof s=="string"&&F.has(s)?t.jsx(q.Icon,{name:s,size:G[u]}):s,h=c=>{a&&!i&&(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),c.currentTarget.click()),m==null||m(c)};return t.jsxs(L,{ref:T,className:k.clsx(e.item,e[u],d&&e.selected,o&&e.clickable,i&&e.disabled,p),style:{"--tz-btn-rgb":`var(--tz-color-${b}-rgb)`,...f},role:a?"button":void 0,tabIndex:a?i?-1:0:void 0,"aria-disabled":i||void 0,"aria-current":d||void 0,onClick:i?void 0:g,onKeyDown:o?h:m,...N,children:[I!=null&&t.jsx("span",{className:e.itemIcon,children:I}),(r!=null||l!=null)&&t.jsxs("span",{className:e.itemText,children:[r!=null&&t.jsx("span",{className:e.itemLabel,children:r}),l!=null&&t.jsx("span",{className:e.itemDescription,children:l})]}),_!=null&&t.jsx("span",{className:e.itemTrailing,children:_})]})});exports.ListItem=H;
+//# sourceMappingURL=ListItem-RH-D-Wey.cjs.map

package/dist/ListItem-RH-D-Wey.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem-RH-D-Wey.cjs","sources":["../src/components/List/ListItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useListSize } from './listContext'\nimport styles from './List.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ListItemSize = 'sm' | 'md' | 'lg'\n\n/** Leading `<Icon>` size per row size. */\nconst ICON_SIZE: Record<ListItemSize, 'sm' | 'md'> = { sm: 'sm', md: 'md', lg: 'md' }\n\nexport interface ListItemProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, 'color'>,\n    Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'> {\n  /** Leading element — a known `IconName` (rendered as `<Icon>`) or any node (e.g. an `Avatar`). */\n  icon?: IconName | ReactNode\n  /** Secondary muted line shown under the label. */\n  description?: ReactNode\n  /** Trailing content pinned to the right (icon, `Badge`, shortcut text, chevron, …). */\n  trailing?: ReactNode\n  /** Highlights the row as selected/active (menu selection, current nav route). */\n  selected?: boolean\n  /** Makes the row interactive (hover + cursor; adds `role`/`tabIndex`/keyboard when rendered plain). */\n  clickable?: boolean\n  /** Dims and inerts the row. */\n  disabled?: boolean\n  /** Row size — height / padding / font. Defaults to `md`. */\n  size?: ListItemSize\n  /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */\n  as?: ElementType\n  /** Primary label / content. */\n  children?: ReactNode\n}\n\n/**\n * A flexible, reusable list row: leading `icon`, a label (`children`) with optional `description`, and\n * a `trailing` slot. `clickable` turns it interactive (hover + keyboard when rendered as a plain\n * element), `selected` highlights it, `disabled` inerts it. Render as a link/button/router `Link` via\n * `as`. Designed to compose inside `List` — for menus, the sidebar, or a standalone styled list.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    icon,\n    description,\n    trailing,\n    selected = false,\n    clickable = false,\n    disabled = false,\n    size: sizeProp,\n    color = 'primary',\n    as,\n    className,\n    style,\n    children,\n    onClick,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  // an explicit `size` wins; otherwise inherit a surrounding `List`'s size, falling back to `md`\n  const listSize = useListSize()\n  const size = sizeProp ?? listSize ?? 'md'\n  const Component = (as ?? 'div') as ElementType\n  // Anchors, buttons, and custom components (e.g. a router Link) carry their own click + keyboard\n  // semantics — only a plain element needs the button role/tabIndex/Enter-Space shim.\n  const handlesOwnInteraction =\n    as === 'a' || as === 'button' || typeof as === 'function' || typeof as === 'object'\n  const isDivButton = clickable && !handlesOwnInteraction\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={ICON_SIZE[size]} />\n    ) : (\n      icon\n    )\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (isDivButton && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        styles.item,\n        styles[size],\n        selected && styles.selected,\n        clickable && styles.clickable,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      role={isDivButton ? 'button' : undefined}\n      tabIndex={isDivButton ? (disabled ? -1 : 0) : undefined}\n      aria-disabled={disabled || undefined}\n      aria-current={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={clickable ? handleKeyDown : onKeyDown}\n      {...props}\n    >\n      {renderedIcon != null && <span className={styles.itemIcon}>{renderedIcon}</span>}\n      {(children != null || description != null) && (\n        <span className={styles.itemText}>\n          {children != null && <span className={styles.itemLabel}>{children}</span>}\n          {description != null && <span className={styles.itemDescription}>{description}</span>}\n        </span>\n      )}\n      {trailing != null && <span className={styles.itemTrailing}>{trailing}</span>}\n    </Component>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","ICON_SIZE","ListItem","forwardRef","icon","description","trailing","selected","clickable","disabled","sizeProp","color","as","className","style","children","onClick","onKeyDown","props","ref","listSize","useListSize","size","Component","isDivButton","renderedIcon","jsx","Icon","handleKeyDown","event","jsxs","clsx","styles"],"mappings":"skBAgBMA,EAAgB,IAAI,IAAYC,YAAU,EAK1CC,EAA+C,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAA,EAkClEC,EAAWC,EAAAA,WAAuC,SAC7D,CACE,KAAAC,EACA,YAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,KAAMC,EACN,MAAAC,EAAQ,UACR,GAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EAAWC,EAAAA,YAAA,EACXC,EAAOZ,GAAYU,GAAY,KAC/BG,EAAaX,GAAM,MAKnBY,EAAchB,GAAa,EAD/BI,IAAO,KAAOA,IAAO,UAAY,OAAOA,GAAO,YAAc,OAAOA,GAAO,UAGvEa,EACJrB,GAAQ,KAAO,KAAO,OAAOA,GAAS,UAAYL,EAAc,IAAIK,CAAI,EACtEsB,MAACC,EAAAA,MAAK,KAAMvB,EAAkB,KAAMH,EAAUqB,CAAI,EAAG,EAErDlB,EAGEwB,EAAiBC,GAAsC,CACvDL,GAAe,CAACf,IAAaoB,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACtEA,EAAM,eAAA,EACNA,EAAM,cAAc,MAAA,GAEtBZ,GAAA,MAAAA,EAAYY,EACd,EAEA,OACEC,EAAAA,KAACP,EAAA,CACC,IAAAJ,EACA,UAAWY,EAAAA,KACTC,EAAO,KACPA,EAAOV,CAAI,EACXf,GAAYyB,EAAO,SACnBxB,GAAawB,EAAO,UACpBvB,GAAYuB,EAAO,SACnBnB,CAAA,EAEF,MAAO,CAAE,eAAgB,kBAAkBF,CAAK,QAAS,GAAGG,CAAA,EAC5D,KAAMU,EAAc,SAAW,OAC/B,SAAUA,EAAef,EAAW,GAAK,EAAK,OAC9C,gBAAeA,GAAY,OAC3B,eAAcF,GAAY,OAC1B,QAASE,EAAW,OAAYO,EAChC,UAAWR,EAAYoB,EAAgBX,EACtC,GAAGC,EAEH,SAAA,CAAAO,GAAgB,MAAQC,EAAAA,IAAC,OAAA,CAAK,UAAWM,EAAO,SAAW,SAAAP,EAAa,GACvEV,GAAY,MAAQV,GAAe,cAClC,OAAA,CAAK,UAAW2B,EAAO,SACrB,SAAA,CAAAjB,GAAY,MAAQW,EAAAA,IAAC,OAAA,CAAK,UAAWM,EAAO,UAAY,SAAAjB,EAAS,EACjEV,GAAe,MAAQqB,EAAAA,IAAC,QAAK,UAAWM,EAAO,gBAAkB,SAAA3B,CAAA,CAAY,CAAA,EAChF,EAEDC,GAAY,MAAQoB,EAAAA,IAAC,QAAK,UAAWM,EAAO,aAAe,SAAA1B,CAAA,CAAS,CAAA,CAAA,CAAA,CAG3E,CAAC"}

package/dist/Loader-C4JoXOyA.js

@@ -0,0 +1,28 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { clsx as n } from "clsx";
+import { a as c } from "./ConfigProvider-2c94kUOk.js";
+const q = "_loader_qv0xq_2", i = "_sm_qv0xq_16", p = "_md_qv0xq_22", x = "_lg_qv0xq_28", s = {
+  loader: q,
+  "tz-loader-spin": "_tz-loader-spin_qv0xq_1",
+  sm: i,
+  md: p,
+  lg: x
+}, L = d(function({ size: a = "md", color: o, className: t, style: r, ...l }, e) {
+  const m = c();
+  return /* @__PURE__ */ _(
+    "span",
+    {
+      ref: e,
+      role: "status",
+      "aria-label": m("loader.label"),
+      ...l,
+      className: n(s.loader, s[a], t),
+      style: o ? { color: `var(--tz-color-${o})`, ...r } : r
+    }
+  );
+});
+export {
+  L
+};
+//# sourceMappingURL=Loader-C4JoXOyA.js.map

package/dist/Loader-C4JoXOyA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader-C4JoXOyA.js","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":";;;;;;;;;;GAmBaA,IAASC,EAAyC,SAC7D,EAAE,MAAAC,IAAO,MAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAIC,EAAA;AACV,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,MAAK;AAAA,MACL,cAAYC,EAAE,cAAc;AAAA,MAC3B,GAAGF;AAAA,MACJ,WAAWK,EAAKC,EAAO,QAAQA,EAAOV,CAAI,GAAGE,CAAS;AAAA,MACtD,OAAOD,IAAS,EAAE,OAAO,kBAAkBA,CAAK,KAAK,GAAGE,MAA4BA;AAAA,IAAA;AAAA,EAAA;AAG1F,CAAC;"}

package/dist/Loader-D1MtlQOH.cjs

@@ -0,0 +1,2 @@
+"use strict";const c=require("react/jsx-runtime"),d=require("react"),_=require("clsx"),q=require("./ConfigProvider-ByOFXVyP.cjs"),i="_loader_qv0xq_2",u="_sm_qv0xq_16",m="_md_qv0xq_22",x="_lg_qv0xq_28",s={loader:i,"tz-loader-spin":"_tz-loader-spin_qv0xq_1",sm:u,md:m,lg:x},v=d.forwardRef(function({size:o="md",color:e,className:t,style:r,...a},l){const n=q.useT();return c.jsx("span",{ref:l,role:"status","aria-label":n("loader.label"),...a,className:_.clsx(s.loader,s[o],t),style:e?{color:`var(--tz-color-${e})`,...r}:r})});exports.Loader=v;
+//# sourceMappingURL=Loader-D1MtlQOH.cjs.map

package/dist/Loader-D1MtlQOH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader-D1MtlQOH.cjs","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":"gRAmBaA,EAASC,EAAAA,WAAyC,SAC7D,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3CC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACV,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAH,EACA,KAAK,SACL,aAAYC,EAAE,cAAc,EAC3B,GAAGF,EACJ,UAAWK,EAAAA,KAAKC,EAAO,OAAQA,EAAOV,CAAI,EAAGE,CAAS,EACtD,MAAOD,EAAS,CAAE,MAAO,kBAAkBA,CAAK,IAAK,GAAGE,GAA4BA,CAAA,CAAA,CAG1F,CAAC"}

package/dist/Modal-B2YSCVVt.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),A=require("clsx"),Q=require("./names-C2Yj1p3u.cjs"),L=require("./Icon-CXTl_QAP.cjs"),$=require("./IconButton-D6TenQZ_.cjs"),W=require("react-dom"),X=require("./useLockBodyScroll-CIXHZo-Q.cjs"),Y=require("./ConfigProvider-ByOFXVyP.cjs"),Z="_overlay_gwv2a_6",w={overlay:Z},H=l.forwardRef(function({open:a,onClose:s,closeOnBackdrop:k=!0,closeOnEscape:g=!0,lockScroll:N=!0,dim:c,className:i,style:d,children:q,onKeyDown:u,onMouseDown:_,onClick:x,...I},T){const j=l.useRef(null),[E,m]=l.useState(!1);X.useLockBodyScroll(a&&N),l.useEffect(()=>{if(!a){m(!1);return}const e=requestAnimationFrame(()=>m(!0));return()=>cancelAnimationFrame(e)},[a]);const D=e=>{e.key==="Escape"&&(e.stopPropagation(),g&&(s==null||s())),u==null||u(e)},h=e=>{j.current=e.target,_==null||_(e)},R=e=>{k&&e.target===e.currentTarget&&j.current===e.currentTarget&&(s==null||s()),x==null||x(e)};return!a||typeof document>"u"?null:W.createPortal(r.jsx("div",{ref:T,className:A.clsx(w.overlay,i),"data-open":E?"true":"false",style:c!=null?{"--tz-overlay-dim":c,...d}:d,onKeyDown:D,onMouseDown:h,onClick:R,...I,children:q}),document.body)}),C="_overlay_1d22k_3",ee="_modal_1d22k_14",te="_sm_1d22k_37",re="_md_1d22k_40",ne="_lg_1d22k_43",le="_fullScreen_1d22k_46",ae="_header_1d22k_58",se="_headerDivided_1d22k_67",ce="_headerMain_1d22k_70",de="_icon_1d22k_77",oe="_headerText_1d22k_80",ie="_title_1d22k_87",ue="_subtitle_1d22k_99",fe="_close_1d22k_111",_e="_body_1d22k_116",me="_footer_1d22k_124",n={overlay:C,modal:ee,sm:te,md:re,lg:ne,fullScreen:le,header:ae,headerDivided:se,headerMain:ce,icon:de,headerText:oe,title:ie,subtitle:ue,close:fe,body:_e,footer:me},he=new Set(Q.ICON_NAMES),S='a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',be=l.forwardRef(function({open:a,onClose:s,size:k="md",scrollBehavior:g="outside",placement:N="center",title:c,description:i,icon:d,color:q="accent",footer:u,showCloseButton:_=!0,closeOnBackdrop:x=!0,closeOnEscape:I=!0,ariaLabel:T,className:j,style:E,children:m,...D},h){const R=Y.useT(),e=l.useRef(null),O=l.useRef(null),B=l.useRef(null),P=l.useId(),p=l.useId();l.useEffect(()=>{var f,y,v;if(!a)return;const t=document.activeElement,o=((f=O.current)==null?void 0:f.querySelector(S))??((y=B.current)==null?void 0:y.querySelector(S))??((v=e.current)==null?void 0:v.querySelector(S))??e.current;return o==null||o.focus({preventScroll:!0}),()=>{var b;t!=null&&t.isConnected&&((b=t.focus)==null||b.call(t))}},[a]);const U=t=>{e.current=t,typeof h=="function"?h(t):h&&(h.current=t)},V=t=>{if(t.key!=="Tab")return;const o=e.current;if(!o)return;const f=[...o.querySelectorAll(S)].filter(z=>z.offsetParent!==null||z===document.activeElement);if(f.length===0){t.preventDefault(),o.focus();return}const y=f[0],v=f[f.length-1],b=document.activeElement;t.shiftKey&&(b===y||b===o)?(t.preventDefault(),v.focus()):!t.shiftKey&&b===v&&(t.preventDefault(),y.focus())};if(!a)return null;const F=N!=="center",M=d==null?null:typeof d=="string"&&he.has(d)?r.jsx(L.Icon,{name:d}):d,G=c!=null||i!=null||M!=null||_,J=m!=null||u!=null;return r.jsx(H,{open:a,onClose:s,closeOnBackdrop:x,closeOnEscape:I,onKeyDown:V,className:n.overlay,"data-size":k,"data-placement":N,"data-scroll":F?"inside":g,children:r.jsxs("div",{ref:U,className:A.clsx(n.modal,n[k],j),role:"dialog","aria-modal":"true","aria-labelledby":c!=null?P:void 0,"aria-label":c==null?T:void 0,"aria-describedby":i!=null?p:void 0,tabIndex:-1,style:E,...D,children:[G&&r.jsxs("div",{className:A.clsx(n.header,J&&n.headerDivided),children:[r.jsxs("div",{className:n.headerMain,children:[M!=null&&r.jsx($.IconButton,{variant:"filled",size:"sm",color:q,nonClickable:!0,"aria-hidden":!0,className:n.icon,children:M}),(c!=null||i!=null)&&r.jsxs("div",{className:n.headerText,children:[c!=null&&r.jsx("div",{id:P,className:n.title,children:c}),i!=null&&r.jsx("div",{id:p,className:n.subtitle,children:i})]})]}),_&&r.jsx($.IconButton,{variant:"filled",color:"primary",size:"sm",className:n.close,"aria-label":R("common.close"),onClick:s,children:r.jsx(L.Icon,{name:"Close"})})]}),m!=null&&r.jsx("div",{ref:O,className:n.body,children:m}),u!=null&&r.jsx("div",{ref:B,className:n.footer,children:u})]})})});exports.Modal=be;exports.Overlay=H;
+//# sourceMappingURL=Modal-B2YSCVVt.cjs.map

package/dist/Modal-B2YSCVVt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-B2YSCVVt.cjs","sources":["../src/components/Overlay/Overlay.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useLockBodyScroll } from '../../hooks/useLockBodyScroll'\nimport styles from './Overlay.module.css'\n\nexport interface OverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is mounted + shown — gates the portal and drives the fade-in. */\n  open: boolean\n  /** Requested dismiss — fired on a backdrop click (`closeOnBackdrop`) or Escape (`closeOnEscape`). */\n  onClose?: () => void\n  /** Close when the scrim itself (outside the content) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed while focus is within the overlay. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Lock page scroll while open. Defaults to `true`. */\n  lockScroll?: boolean\n  /** Scrim darkness — the black backdrop's alpha (0–1). Defaults to `0.45`. */\n  dim?: number\n  /** Overlay content — typically a centered dialog / box / media. */\n  children?: ReactNode\n}\n\n/**\n * The shared backdrop primitive behind every dimmed, page-blocking surface (`Modal`, the FileUploader\n * lightbox). Portals a fixed full-viewport scrim to `<body>`, locks page scroll, fades in (opacity keyed\n * off a rAF `visible` flag → `data-open`), and dismisses on **backdrop-click** (gated on the pointer-down\n * AND click both landing on the scrim, so a text-selection drag ending on it doesn't close) / **Escape**\n * (swallowed via `stopPropagation` so it can't reach a React-tree ancestor overlay). Centers its children\n * by default; consumers layer their own padding / scroll / placement via `className` + `data-*` and read\n * the shared `data-open` on the scrim for their own box's enter transform. A consumer `onKeyDown` still\n * fires (after the Escape handling) so it can add e.g. a Tab focus-trap. Internal — no `index.ts`, so it's\n * never exposed as a package subpath; import it via `../Overlay/Overlay`. The ref points at the scrim div.\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(\n  {\n    open,\n    onClose,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    lockScroll = true,\n    dim,\n    className,\n    style,\n    children,\n    onKeyDown,\n    onMouseDown,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open && lockScroll)\n\n  // enter animation: flip `visible` on the frame after mount so the opacity transition runs\n  useEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [open])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      // the overlay owns the page — swallow Escape so it can't reach a React-tree ancestor overlay (e.g.\n      // an outer Modal) even when this one isn't Escape-dismissible\n      event.stopPropagation()\n      if (closeOnEscape) onClose?.()\n    }\n    onKeyDown?.(event)\n  }\n  // remember where the pointer went down so the click handler can tell a scrim click from a drag that\n  // started inside the content and ended on the scrim (a text-selection drag)\n  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    mouseDownTarget.current = event.target\n    onMouseDown?.(event)\n  }\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (\n      closeOnBackdrop &&\n      event.target === event.currentTarget &&\n      mouseDownTarget.current === event.currentTarget\n    ) {\n      onClose?.()\n    }\n    onClick?.(event)\n  }\n\n  if (!open || typeof document === 'undefined') return null\n\n  return createPortal(\n    <div\n      ref={ref}\n      className={clsx(styles.overlay, className)}\n      data-open={visible ? 'true' : 'false'}\n      style={dim != null ? ({ '--tz-overlay-dim': dim, ...style } as CSSProperties) : style}\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Overlay } from '../Overlay/Overlay'\nimport styles from './Modal.module.css'\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'fullScreen'\nexport type ModalScrollBehavior = 'inside' | 'outside'\nexport type ModalPlacement = 'center' | 'left' | 'right'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\n/** Focusable descendants used by the focus trap + initial focus. */\n// every clause excludes tabindex=\"-1\" so decorative/programmatic-only nodes (e.g. the header's\n// `nonClickable aria-hidden` IconButton) don't count as trap boundaries or initial-focus targets\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), input:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])'\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Whether the modal is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Called when a dismiss is requested (close button, backdrop click, or Escape). */\n  onClose: () => void\n  /** Preset width: `sm` 360 · `md` 620 · `lg` 900 px, or `fullScreen` (fills the viewport). Defaults to `md`. */\n  size?: ModalSize\n  /**\n   * Where overflow scrolls when the content is taller than the viewport: `outside` (default — the\n   * whole dialog grows and the overlay/page scrolls) or `inside` (the body scrolls while the header +\n   * footer stay pinned). Ignored for side-drawer placements (`left`/`right`), which always scroll inside.\n   */\n  scrollBehavior?: ModalScrollBehavior\n  /**\n   * Where the dialog sits: `center` (default — the standard centered modal), or `left` / `right` to\n   * make it a **full-height side drawer** (sheet) that slides in from that edge. A drawer takes its\n   * width from `size`, fills the viewport height, and always scrolls its body inside (header + footer\n   * stay pinned).\n   */\n  placement?: ModalPlacement\n  /** Header title. When set, labels the dialog (`aria-labelledby`). */\n  title?: ReactNode\n  /** Muted description line under the title (e.g. a confirm prompt). */\n  description?: ReactNode\n  /** Leading header icon shown in a tinted box (like `Card`) — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */\n  footer?: ReactNode\n  /** Show the header × close button. Defaults to `true`. */\n  showCloseButton?: boolean\n  /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Accessible label — used when there's no `title`. */\n  ariaLabel?: string\n  /** Dialog body. */\n  children?: ReactNode\n}\n\n/**\n * A centered, backdrop-dimmed overlay dialog. Portaled to `<body>`, it locks page scroll while open,\n * traps Tab focus inside, restores focus to the previously-focused element on close, and dismisses on\n * close button / backdrop click / Escape (each toggleable). Sizes are `sm`/`md`/`lg` (max-width caps)\n * or `fullScreen`; `scrollBehavior` picks inside-body vs. whole-dialog scrolling. `placement` turns it\n * into a full-height side drawer (`left`/`right`) that slides in from the edge. The header mirrors\n * `Card` — an optional tinted `icon` box + `title` + `description`. Controlled by `open` + `onClose`.\n * The forwarded ref points at the dialog element.\n *\n * @example\n * const { isOpen, open, close } = useDisclosure()\n * <Modal open={isOpen} onClose={close} title=\"Edit\" footer={<Button onClick={close}>Done</Button>}>\n *   …\n * </Modal>\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    open,\n    onClose,\n    size = 'md',\n    scrollBehavior = 'outside',\n    placement = 'center',\n    title,\n    description,\n    icon,\n    color = 'accent',\n    footer,\n    showCloseButton = true,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    ariaLabel,\n    className,\n    style,\n    children,\n    ...props\n  },\n  forwardedRef,\n) {\n  const t = useT()\n  const panelRef = useRef<HTMLDivElement | null>(null)\n  const bodyRef = useRef<HTMLDivElement | null>(null)\n  const footerRef = useRef<HTMLDivElement | null>(null)\n  const titleId = useId()\n  const descId = useId()\n\n  // portal + scrim + scroll-lock + fade-in + backdrop-dismiss are handled by the shared `<Overlay>`\n\n  // focus management: move focus into the dialog on open — prefer a body field (form modals land on\n  // their first input), else the first footer action (confirm dialogs land on Cancel/Confirm, not the\n  // × button), else any control, else the dialog itself; restore focus to the trigger on close\n  useEffect(() => {\n    if (!open) return\n    const previouslyFocused = document.activeElement as HTMLElement | null\n    const target =\n      bodyRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      footerRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      panelRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      panelRef.current\n    // preventScroll so opening an `outside`-scroll modal doesn't jump the overlay to a below-fold control\n    target?.focus({ preventScroll: true })\n    // only restore if the element is still mounted (it may have unmounted while the modal was open)\n    return () => {\n      if (previouslyFocused?.isConnected) previouslyFocused.focus?.()\n    }\n  }, [open])\n\n  // merge the panel ref (positioning/focus) with the forwarded ref (consumer access)\n  const setPanelRef = (node: HTMLDivElement | null) => {\n    panelRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the locked page behind it (Escape + backdrop\n  // dismissal live in `<Overlay>`; this fires after the overlay's own handler)\n  const handleTabTrap = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = panelRef.current\n    if (!panel) return\n    const focusables = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n      (el) => el.offsetParent !== null || el === document.activeElement,\n    )\n    if (focusables.length === 0) {\n      event.preventDefault()\n      panel.focus()\n      return\n    }\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    const active = document.activeElement\n    if (event.shiftKey && (active === first || active === panel)) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  // a side drawer (left/right) is always full-height with the body scrolling inside (header/footer pinned)\n  const isDrawer = placement !== 'center'\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader = title != null || description != null || renderedIcon != null || showCloseButton\n  // a divider sets the header apart from the body/footer, like Card\n  const headerDivided = children != null || footer != null\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      closeOnBackdrop={closeOnBackdrop}\n      closeOnEscape={closeOnEscape}\n      onKeyDown={handleTabTrap}\n      className={styles.overlay}\n      data-size={size}\n      data-placement={placement}\n      data-scroll={isDrawer ? 'inside' : scrollBehavior}\n    >\n      <div\n        ref={setPanelRef}\n        className={clsx(styles.modal, styles[size], className)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title != null ? titleId : undefined}\n        aria-label={title == null ? ariaLabel : undefined}\n        aria-describedby={description != null ? descId : undefined}\n        tabIndex={-1}\n        style={style as CSSProperties}\n        {...props}\n      >\n        {hasHeader && (\n          <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n            <div className={styles.headerMain}>\n              {renderedIcon != null && (\n                <IconButton\n                  variant=\"filled\"\n                  size=\"sm\"\n                  color={color}\n                  nonClickable\n                  aria-hidden\n                  className={styles.icon}\n                >\n                  {renderedIcon}\n                </IconButton>\n              )}\n              {(title != null || description != null) && (\n                <div className={styles.headerText}>\n                  {title != null && (\n                    <div id={titleId} className={styles.title}>\n                      {title}\n                    </div>\n                  )}\n                  {description != null && (\n                    <div id={descId} className={styles.subtitle}>\n                      {description}\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n            {showCloseButton && (\n              <IconButton\n                variant=\"filled\"\n                color=\"primary\"\n                size=\"sm\"\n                className={styles.close}\n                aria-label={t('common.close')}\n                onClick={onClose}\n              >\n                <Icon name=\"Close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n        {children != null && (\n          <div ref={bodyRef} className={styles.body}>\n            {children}\n          </div>\n        )}\n        {footer != null && (\n          <div ref={footerRef} className={styles.footer}>\n            {footer}\n          </div>\n        )}\n      </div>\n    </Overlay>\n  )\n})\n"],"names":["Overlay","forwardRef","open","onClose","closeOnBackdrop","closeOnEscape","lockScroll","dim","className","style","children","onKeyDown","onMouseDown","onClick","props","ref","mouseDownTarget","useRef","visible","setVisible","useState","useLockBodyScroll","useEffect","raf","handleKeyDown","event","handleMouseDown","handleClick","createPortal","jsx","clsx","styles","ICON_NAME_SET","ICON_NAMES","FOCUSABLE","Modal","size","scrollBehavior","placement","title","description","icon","color","footer","showCloseButton","ariaLabel","forwardedRef","t","useT","panelRef","bodyRef","footerRef","titleId","useId","descId","previouslyFocused","target","_a","_b","_c","setPanelRef","node","handleTabTrap","panel","focusables","el","first","last","active","isDrawer","renderedIcon","Icon","hasHeader","headerDivided","jsxs","IconButton"],"mappings":"oVA4CaA,EAAUC,EAAAA,WAAyC,SAC9D,CACE,KAAAC,EACA,QAAAC,EACA,gBAAAC,EAAkB,GAClB,cAAAC,EAAgB,GAChB,WAAAC,EAAa,GACb,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAkBC,EAAAA,OAA2B,IAAI,EACjD,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAE5CC,EAAAA,kBAAkBnB,GAAQI,CAAU,EAGpCgB,EAAAA,UAAU,IAAM,CACd,GAAI,CAACpB,EAAM,CACTiB,EAAW,EAAK,EAChB,MACF,CACA,MAAMI,EAAM,sBAAsB,IAAMJ,EAAW,EAAI,CAAC,EACxD,MAAO,IAAM,qBAAqBI,CAAG,CACvC,EAAG,CAACrB,CAAI,CAAC,EAET,MAAMsB,EAAiBC,GAAyC,CAC1DA,EAAM,MAAQ,WAGhBA,EAAM,gBAAA,EACFpB,IAAeF,GAAA,MAAAA,MAErBQ,GAAA,MAAAA,EAAYc,EACd,EAGMC,EAAmBD,GAAsC,CAC7DT,EAAgB,QAAUS,EAAM,OAChCb,GAAA,MAAAA,EAAca,EAChB,EACME,EAAeF,GAAsC,CAEvDrB,GACAqB,EAAM,SAAWA,EAAM,eACvBT,EAAgB,UAAYS,EAAM,gBAElCtB,GAAA,MAAAA,KAEFU,GAAA,MAAAA,EAAUY,EACZ,EAEA,MAAI,CAACvB,GAAQ,OAAO,SAAa,IAAoB,KAE9C0B,EAAAA,aACLC,EAAAA,IAAC,MAAA,CACC,IAAAd,EACA,UAAWe,EAAAA,KAAKC,EAAO,QAASvB,CAAS,EACzC,YAAWU,EAAU,OAAS,QAC9B,MAAOX,GAAO,KAAQ,CAAE,mBAAoBA,EAAK,GAAGE,GAA4BA,EAChF,UAAWe,EACX,YAAaE,EACb,QAASC,EACR,GAAGb,EAEH,SAAAJ,CAAA,CAAA,EAEH,SAAS,IAAA,CAEb,CAAC,4gBClGKsB,GAAgB,IAAI,IAAYC,YAAU,EAK1CC,EACJ,iPA2DWC,GAAQlC,EAAAA,WAAuC,SAC1D,CACE,KAAAC,EACA,QAAAC,EACA,KAAAiC,EAAO,KACP,eAAAC,EAAiB,UACjB,UAAAC,EAAY,SACZ,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,MAAAC,EAAQ,SACR,OAAAC,EACA,gBAAAC,EAAkB,GAClB,gBAAAxC,EAAkB,GAClB,cAAAC,EAAgB,GAChB,UAAAwC,EACA,UAAArC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGI,CACL,EACAgC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACJC,EAAWhC,EAAAA,OAA8B,IAAI,EAC7CiC,EAAUjC,EAAAA,OAA8B,IAAI,EAC5CkC,EAAYlC,EAAAA,OAA8B,IAAI,EAC9CmC,EAAUC,EAAAA,MAAA,EACVC,EAASD,EAAAA,MAAA,EAOf/B,EAAAA,UAAU,IAAM,WACd,GAAI,CAACpB,EAAM,OACX,MAAMqD,EAAoB,SAAS,cAC7BC,IACJC,EAAAP,EAAQ,UAAR,YAAAO,EAAiB,cAA2BvB,OAC5CwB,EAAAP,EAAU,UAAV,YAAAO,EAAmB,cAA2BxB,OAC9CyB,EAAAV,EAAS,UAAT,YAAAU,EAAkB,cAA2BzB,KAC7Ce,EAAS,QAEX,OAAAO,GAAA,MAAAA,EAAQ,MAAM,CAAE,cAAe,EAAA,GAExB,IAAM,OACPD,GAAA,MAAAA,EAAmB,eAAaE,EAAAF,EAAkB,QAAlB,MAAAE,EAAA,KAAAF,GACtC,CACF,EAAG,CAACrD,CAAI,CAAC,EAGT,MAAM0D,EAAeC,GAAgC,CACnDZ,EAAS,QAAUY,EACf,OAAOf,GAAiB,WAAYA,EAAae,CAAI,EAChDf,MAA2B,QAAUe,EAChD,EAIMC,EAAiBrC,GAAyC,CAC9D,GAAIA,EAAM,MAAQ,MAAO,OACzB,MAAMsC,EAAQd,EAAS,QACvB,GAAI,CAACc,EAAO,OACZ,MAAMC,EAAa,CAAC,GAAGD,EAAM,iBAA8B7B,CAAS,CAAC,EAAE,OACpE+B,GAAOA,EAAG,eAAiB,MAAQA,IAAO,SAAS,aAAA,EAEtD,GAAID,EAAW,SAAW,EAAG,CAC3BvC,EAAM,eAAA,EACNsC,EAAM,MAAA,EACN,MACF,CACA,MAAMG,EAAQF,EAAW,CAAC,EACpBG,EAAOH,EAAWA,EAAW,OAAS,CAAC,EACvCI,EAAS,SAAS,cACpB3C,EAAM,WAAa2C,IAAWF,GAASE,IAAWL,IACpDtC,EAAM,eAAA,EACN0C,EAAK,MAAA,GACI,CAAC1C,EAAM,UAAY2C,IAAWD,IACvC1C,EAAM,eAAA,EACNyC,EAAM,MAAA,EAEV,EAEA,GAAI,CAAChE,EAAM,OAAO,KAGlB,MAAMmE,EAAW/B,IAAc,SAEzBgC,EACJ7B,GAAQ,KAAO,KAAO,OAAOA,GAAS,UAAYT,GAAc,IAAIS,CAAI,EACtEZ,EAAAA,IAAC0C,EAAAA,KAAA,CAAK,KAAM9B,EAAkB,EAE9BA,EAGE+B,EAAYjC,GAAS,MAAQC,GAAe,MAAQ8B,GAAgB,MAAQ1B,EAE5E6B,EAAgB/D,GAAY,MAAQiC,GAAU,KAEpD,OACEd,EAAAA,IAAC7B,EAAA,CACC,KAAAE,EACA,QAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,UAAWyD,EACX,UAAW/B,EAAO,QAClB,YAAWK,EACX,iBAAgBE,EAChB,cAAa+B,EAAW,SAAWhC,EAEnC,SAAAqC,EAAAA,KAAC,MAAA,CACC,IAAKd,EACL,UAAW9B,EAAAA,KAAKC,EAAO,MAAOA,EAAOK,CAAI,EAAG5B,CAAS,EACrD,KAAK,SACL,aAAW,OACX,kBAAiB+B,GAAS,KAAOa,EAAU,OAC3C,aAAYb,GAAS,KAAOM,EAAY,OACxC,mBAAkBL,GAAe,KAAOc,EAAS,OACjD,SAAU,GACV,MAAA7C,EACC,GAAGK,EAEH,SAAA,CAAA0D,GACCE,EAAAA,KAAC,OAAI,UAAW5C,EAAAA,KAAKC,EAAO,OAAQ0C,GAAiB1C,EAAO,aAAa,EACvE,SAAA,CAAA2C,EAAAA,KAAC,MAAA,CAAI,UAAW3C,EAAO,WACpB,SAAA,CAAAuC,GAAgB,MACfzC,EAAAA,IAAC8C,EAAAA,WAAA,CACC,QAAQ,SACR,KAAK,KACL,MAAAjC,EACA,aAAY,GACZ,cAAW,GACX,UAAWX,EAAO,KAEjB,SAAAuC,CAAA,CAAA,GAGH/B,GAAS,MAAQC,GAAe,cAC/B,MAAA,CAAI,UAAWT,EAAO,WACpB,SAAA,CAAAQ,GAAS,YACP,MAAA,CAAI,GAAIa,EAAS,UAAWrB,EAAO,MACjC,SAAAQ,CAAA,CACH,EAEDC,GAAe,MACdX,MAAC,MAAA,CAAI,GAAIyB,EAAQ,UAAWvB,EAAO,SAChC,SAAAS,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,EAEJ,EACCI,GACCf,EAAAA,IAAC8C,EAAAA,WAAA,CACC,QAAQ,SACR,MAAM,UACN,KAAK,KACL,UAAW5C,EAAO,MAClB,aAAYgB,EAAE,cAAc,EAC5B,QAAS5C,EAET,SAAA0B,EAAAA,IAAC0C,EAAAA,KAAA,CAAK,KAAK,OAAA,CAAQ,CAAA,CAAA,CACrB,EAEJ,EAED7D,GAAY,MACXmB,MAAC,MAAA,CAAI,IAAKqB,EAAS,UAAWnB,EAAO,KAClC,SAAArB,CAAA,CACH,EAEDiC,GAAU,MACTd,MAAC,MAAA,CAAI,IAAKsB,EAAW,UAAWpB,EAAO,OACpC,SAAAY,CAAA,CACH,CAAA,CAAA,CAAA,CAEJ,CAAA,CAGN,CAAC"}

package/dist/Modal-BuaPDlKV.js

@@ -0,0 +1,195 @@
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { forwardRef as U, useRef as p, useState as Y, useEffect as V, useId as $ } from "react";
+import { clsx as P } from "clsx";
+import { a as Z } from "./names-D8ABK2Wk.js";
+import { I as H } from "./Icon-CophpkHo.js";
+import { I as K } from "./IconButton-CBusrDa9.js";
+import { createPortal as w } from "react-dom";
+import { u as C } from "./useLockBodyScroll-DwBILLPK.js";
+import { a as ee } from "./ConfigProvider-2c94kUOk.js";
+const te = "_overlay_gwv2a_6", ae = {
+  overlay: te
+}, re = U(function({
+  open: l,
+  onClose: n,
+  closeOnBackdrop: k = !0,
+  closeOnEscape: T = !0,
+  lockScroll: x = !0,
+  dim: s,
+  className: o,
+  style: c,
+  children: I,
+  onKeyDown: i,
+  onMouseDown: f,
+  onClick: b,
+  ...E
+}, D) {
+  const N = p(null), [M, m] = Y(!1);
+  C(l && x), V(() => {
+    if (!l) {
+      m(!1);
+      return;
+    }
+    const e = requestAnimationFrame(() => m(!0));
+    return () => cancelAnimationFrame(e);
+  }, [l]);
+  const A = (e) => {
+    e.key === "Escape" && (e.stopPropagation(), T && (n == null || n())), i == null || i(e);
+  }, _ = (e) => {
+    N.current = e.target, f == null || f(e);
+  }, O = (e) => {
+    k && e.target === e.currentTarget && N.current === e.currentTarget && (n == null || n()), b == null || b(e);
+  };
+  return !l || typeof document > "u" ? null : w(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: D,
+        className: P(ae.overlay, o),
+        "data-open": M ? "true" : "false",
+        style: s != null ? { "--tz-overlay-dim": s, ...c } : c,
+        onKeyDown: A,
+        onMouseDown: _,
+        onClick: O,
+        ...E,
+        children: I
+      }
+    ),
+    document.body
+  );
+}), le = "_overlay_1d22k_3", ne = "_modal_1d22k_14", se = "_sm_1d22k_37", ce = "_md_1d22k_40", de = "_lg_1d22k_43", oe = "_fullScreen_1d22k_46", ie = "_header_1d22k_58", ue = "_headerDivided_1d22k_67", fe = "_headerMain_1d22k_70", me = "_icon_1d22k_77", _e = "_headerText_1d22k_80", he = "_title_1d22k_87", be = "_subtitle_1d22k_99", ye = "_close_1d22k_111", ve = "_body_1d22k_116", ke = "_footer_1d22k_124", a = {
+  overlay: le,
+  modal: ne,
+  sm: se,
+  md: ce,
+  lg: de,
+  fullScreen: oe,
+  header: ie,
+  headerDivided: ue,
+  headerMain: fe,
+  icon: me,
+  headerText: _e,
+  title: he,
+  subtitle: be,
+  close: ye,
+  body: ve,
+  footer: ke
+}, xe = new Set(Z), g = 'a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', Ae = U(function({
+  open: l,
+  onClose: n,
+  size: k = "md",
+  scrollBehavior: T = "outside",
+  placement: x = "center",
+  title: s,
+  description: o,
+  icon: c,
+  color: I = "accent",
+  footer: i,
+  showCloseButton: f = !0,
+  closeOnBackdrop: b = !0,
+  closeOnEscape: E = !0,
+  ariaLabel: D,
+  className: N,
+  style: M,
+  children: m,
+  ...A
+}, _) {
+  const O = ee(), e = p(null), z = p(null), R = p(null), j = $(), B = $();
+  V(() => {
+    var u, y, v;
+    if (!l) return;
+    const t = document.activeElement, d = ((u = z.current) == null ? void 0 : u.querySelector(g)) ?? ((y = R.current) == null ? void 0 : y.querySelector(g)) ?? ((v = e.current) == null ? void 0 : v.querySelector(g)) ?? e.current;
+    return d == null || d.focus({ preventScroll: !0 }), () => {
+      var h;
+      t != null && t.isConnected && ((h = t.focus) == null || h.call(t));
+    };
+  }, [l]);
+  const G = (t) => {
+    e.current = t, typeof _ == "function" ? _(t) : _ && (_.current = t);
+  }, J = (t) => {
+    if (t.key !== "Tab") return;
+    const d = e.current;
+    if (!d) return;
+    const u = [...d.querySelectorAll(g)].filter(
+      (L) => L.offsetParent !== null || L === document.activeElement
+    );
+    if (u.length === 0) {
+      t.preventDefault(), d.focus();
+      return;
+    }
+    const y = u[0], v = u[u.length - 1], h = document.activeElement;
+    t.shiftKey && (h === y || h === d) ? (t.preventDefault(), v.focus()) : !t.shiftKey && h === v && (t.preventDefault(), y.focus());
+  };
+  if (!l) return null;
+  const Q = x !== "center", q = c == null ? null : typeof c == "string" && xe.has(c) ? /* @__PURE__ */ r(H, { name: c }) : c, W = s != null || o != null || q != null || f, X = m != null || i != null;
+  return /* @__PURE__ */ r(
+    re,
+    {
+      open: l,
+      onClose: n,
+      closeOnBackdrop: b,
+      closeOnEscape: E,
+      onKeyDown: J,
+      className: a.overlay,
+      "data-size": k,
+      "data-placement": x,
+      "data-scroll": Q ? "inside" : T,
+      children: /* @__PURE__ */ S(
+        "div",
+        {
+          ref: G,
+          className: P(a.modal, a[k], N),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": s != null ? j : void 0,
+          "aria-label": s == null ? D : void 0,
+          "aria-describedby": o != null ? B : void 0,
+          tabIndex: -1,
+          style: M,
+          ...A,
+          children: [
+            W && /* @__PURE__ */ S("div", { className: P(a.header, X && a.headerDivided), children: [
+              /* @__PURE__ */ S("div", { className: a.headerMain, children: [
+                q != null && /* @__PURE__ */ r(
+                  K,
+                  {
+                    variant: "filled",
+                    size: "sm",
+                    color: I,
+                    nonClickable: !0,
+                    "aria-hidden": !0,
+                    className: a.icon,
+                    children: q
+                  }
+                ),
+                (s != null || o != null) && /* @__PURE__ */ S("div", { className: a.headerText, children: [
+                  s != null && /* @__PURE__ */ r("div", { id: j, className: a.title, children: s }),
+                  o != null && /* @__PURE__ */ r("div", { id: B, className: a.subtitle, children: o })
+                ] })
+              ] }),
+              f && /* @__PURE__ */ r(
+                K,
+                {
+                  variant: "filled",
+                  color: "primary",
+                  size: "sm",
+                  className: a.close,
+                  "aria-label": O("common.close"),
+                  onClick: n,
+                  children: /* @__PURE__ */ r(H, { name: "Close" })
+                }
+              )
+            ] }),
+            m != null && /* @__PURE__ */ r("div", { ref: z, className: a.body, children: m }),
+            i != null && /* @__PURE__ */ r("div", { ref: R, className: a.footer, children: i })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  Ae as M,
+  re as O
+};
+//# sourceMappingURL=Modal-BuaPDlKV.js.map