@techzyapp/ui-library 1.0.4 → 1.0.9

package/dist/{UserCard-OlLeyyS0.cjs.map → UserCard-C8rC_gzD.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"UserCard-OlLeyyS0.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Display name — the primary line, and the source of the avatar initials. */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + fonts + button). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)\n * tints the avatar. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n        />\n        {(name != null || email != null) && (\n          <div className={styles.text}>\n            {name != null && (\n              <Typography variant=\"bodySmall\" truncate>\n                {name}\n              </Typography>\n            )}\n            {email != null && (\n              <Typography variant=\"caption\" color=\"muted\" truncate>\n                {email}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Button","Icon"],"mappings":"qZAyCaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaV,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DW,EAAaX,IAAS,KAAO,KAAO,KAE1C,OACEY,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOd,CAAI,EAAGI,CAAS,EACpD,MAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAf,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,CAAA,CAAA,GAEAJ,GAAQ,MAAQC,GAAS,cACxB,MAAA,CAAI,UAAWkB,EAAO,KACpB,SAAA,CAAAnB,GAAQ,MACPoB,MAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAtB,CAAA,CACH,EAEDC,GAAS,MACRmB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAArB,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,EAEJ,EAECO,EAEAF,EACCc,EAAAA,IAACG,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMP,EACN,UAAS,GACT,UAAWI,EAAAA,IAACI,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASlB,EAER,SAAAC,GAAeM,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}
+{"version":3,"file":"UserCard-C8rC_gzD.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Display name — the primary line, and the source of the avatar initials. */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + fonts + button). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar + type; `color` (default `primary`)\n * tints the avatar. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n        />\n        {(name != null || email != null) && (\n          <div className={styles.text}>\n            {name != null && (\n              <Typography variant=\"bodySmall\" truncate>\n                {name}\n              </Typography>\n            )}\n            {email != null && (\n              <Typography variant=\"caption\" color=\"muted\" truncate>\n                {email}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Button","Icon"],"mappings":"qZAyCaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaV,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DW,EAAaX,IAAS,KAAO,KAAO,KAE1C,OACEY,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOd,CAAI,EAAGI,CAAS,EACpD,MAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAf,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,CAAA,CAAA,GAEAJ,GAAQ,MAAQC,GAAS,cACxB,MAAA,CAAI,UAAWkB,EAAO,KACpB,SAAA,CAAAnB,GAAQ,MACPoB,MAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAtB,CAAA,CACH,EAEDC,GAAS,MACRmB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAArB,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,EAEJ,EAECO,EAEAF,EACCc,EAAAA,IAACG,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMP,EACN,UAAS,GACT,UAAWI,EAAAA,IAACI,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASlB,EAER,SAAAC,GAAeM,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/breakpoints-BbDakdqF.js

@@ -0,0 +1,50 @@
+const f = {
+  xxs: 575.98,
+  xs: 767.98,
+  sm: 1023.98,
+  md: 1279.98,
+  lg: 1439.98,
+  xl: 1679.98,
+  xxl: 1919.98
+}, o = ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
+function l(t, e = "down") {
+  const n = r[t];
+  return e === "up" ? `(min-width: ${Math.ceil(n)}px)` : `(max-width: ${n}px)`;
+}
+let r = { ...f }, u = 0;
+const i = /* @__PURE__ */ new Set();
+function x() {
+  return u;
+}
+function a(t) {
+  return i.add(t), () => {
+    i.delete(t);
+  };
+}
+function p(t) {
+  const e = { ...f };
+  if (t)
+    for (const n of o)
+      typeof t[n] == "number" && (e[n] = t[n]);
+  o.every((n) => e[n] === r[n]) || (r = e, u += 1, i.forEach((n) => n()));
+}
+function b(t, e) {
+  if (t == null || typeof t != "object") return t;
+  const n = t;
+  for (const s of o)
+    if (n[s] != null && e[s]) return n[s];
+  for (let s = o.length - 1; s >= 0; s--) {
+    const c = o[s];
+    if (n[c] != null) return n[c];
+  }
+}
+export {
+  f as B,
+  o as a,
+  l as b,
+  p as c,
+  x as g,
+  b as r,
+  a as s
+};
+//# sourceMappingURL=breakpoints-BbDakdqF.js.map

package/dist/breakpoints-BbDakdqF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-BbDakdqF.js","sources":["../src/theme/breakpoints.ts"],"sourcesContent":["/**\n * The library's shared responsive breakpoints — the single source of truth for width thresholds, so\n * every responsive check (JS + component props) keys off the same sizes.\n *\n * **Desktop-first / max-width** model: each key is the **upper bound** (in px) of that band — `sm` means\n * \"screens **at most** `1023.98px` wide\" (tablet-landscape-and-down), matching `useMediaQuery('sm')` →\n * `(max-width: 1023.98px)`. `xxs` is the small-phone bound; anything wider than `xxl` (>1919.98) is the\n * large-desktop base. The `.98` avoids overlap with the next band's integer start\n * (576 / 768 / 1024 / 1280 / 1440 / 1680 / 1920). `xxs` (575.98) matches the phone tweaks the component\n * CSS already keys off, so the two stay in sync.\n */\nexport const BREAKPOINTS = {\n  xxs: 575.98,\n  xs: 767.98,\n  sm: 1023.98,\n  md: 1279.98,\n  lg: 1439.98,\n  xl: 1679.98,\n  xxl: 1919.98,\n} as const\n\n/** A responsive breakpoint key (`'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'`). */\nexport type Breakpoint = keyof typeof BREAKPOINTS\n\n/** Breakpoint keys ascending (narrowest → widest). */\nexport const BREAKPOINT_ORDER: readonly Breakpoint[] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']\n\n/**\n * A value that may vary by breakpoint — either a single value or a **desktop-first** map keyed by\n * breakpoint (e.g. `{ xs: 1, md: 3 }`): each entry applies at that breakpoint's max-width and below,\n * until a smaller one overrides; the largest defined key is the base for anything wider.\n */\nexport type Responsive<T> = T | Partial<Record<Breakpoint, T>>\n\n/**\n * Build the media-query string for a breakpoint, using the **active** bounds (see the config store\n * below). `down` (default) → `(max-width: <bound>px)` (that band and narrower); `up` →\n * `(min-width: <next whole px>px)` (wider than the band).\n */\nexport function breakpointQuery(bp: Breakpoint, direction: 'down' | 'up' = 'down'): string {\n  const bound = active[bp]\n  // `up` starts just above the band's `.98` bound — the next whole px (e.g. md 1279.98 → min-width 1280)\n  return direction === 'up' ? `(min-width: ${Math.ceil(bound)}px)` : `(max-width: ${bound}px)`\n}\n\n// ── active bounds — overridable from `ConfigProvider` (`config.theme.breakpoints`) ────────────────\n// The KEYS are fixed (`xxs…xxl`); an app overrides the pixel VALUES (a subset is fine). `BREAKPOINTS`\n// above stays the immutable defaults + the source of the `Breakpoint` type; these are the live values\n// the query builder / hooks read, so a config override flows through `useMediaQuery` / `Flex` / `Grid`\n// / `Masonry`. NOTE: this affects the **JS** responsive layer only — component CSS `@media` rules are\n// compiled into the stylesheet and can't follow a runtime override.\nlet active: Record<Breakpoint, number> = { ...BREAKPOINTS }\nlet version = 0\nconst listeners = new Set<() => void>()\n\n/** The live breakpoint bounds (defaults merged with any `config.theme.breakpoints` override). */\nexport function getBreakpoints(): Record<Breakpoint, number> {\n  return active\n}\n\n/** A version counter that bumps on every change — feeds `useSyncExternalStore` for reactive reads. */\nexport function getBreakpointsVersion(): number {\n  return version\n}\n\n/** Subscribe to override changes (used by `useMediaQuery` so token queries re-resolve live). */\nexport function subscribeBreakpoints(cb: () => void): () => void {\n  listeners.add(cb)\n  return () => {\n    listeners.delete(cb)\n  }\n}\n\n/**\n * Override the pixel bounds of (some) breakpoints — keys stay fixed, so pass any subset. `undefined` /\n * empty resets to the built-in defaults. `ConfigProvider` calls this from `config.theme.breakpoints`;\n * a no-op when nothing actually changed.\n */\nexport function setBreakpoints(overrides?: Partial<Record<Breakpoint, number>>): void {\n  const next: Record<Breakpoint, number> = { ...BREAKPOINTS }\n  if (overrides) {\n    for (const bp of BREAKPOINT_ORDER) {\n      if (typeof overrides[bp] === 'number') next[bp] = overrides[bp] as number\n    }\n  }\n  if (BREAKPOINT_ORDER.every((bp) => next[bp] === active[bp])) return\n  active = next\n  version += 1\n  listeners.forEach((l) => l())\n}\n\n/**\n * Resolve a possibly-responsive value against the currently matching breakpoints (a `{ bp: boolean }`\n * map of max-width matches). A plain value passes through; a breakpoint map is **desktop-first** — the\n * value of the **smallest matching** breakpoint wins (the tightest band the viewport falls into),\n * falling back to the **largest defined** key when none match (screens wider than every defined bound).\n */\nexport function resolveResponsive<T>(\n  value: Responsive<T>,\n  matches: Record<Breakpoint, boolean>,\n): T | undefined {\n  if (value == null || typeof value !== 'object') return value as T | undefined\n  const map = value as Partial<Record<Breakpoint, T>>\n  // smallest matching band wins (ascending → first match is the tightest max-width the viewport is in)\n  for (const bp of BREAKPOINT_ORDER) {\n    if (map[bp] != null && matches[bp]) return map[bp]\n  }\n  // wider than every defined bound → the largest defined value is the base\n  for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i--) {\n    const bp = BREAKPOINT_ORDER[i]\n    if (map[bp] != null) return map[bp]\n  }\n  return undefined\n}\n"],"names":["BREAKPOINTS","BREAKPOINT_ORDER","breakpointQuery","bp","direction","bound","active","version","listeners","getBreakpointsVersion","subscribeBreakpoints","cb","setBreakpoints","overrides","next","l","resolveResponsive","value","matches","map","i"],"mappings":"AAWO,MAAMA,IAAc;AAAA,EACzB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAMaC,IAA0C,CAAC,OAAO,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK;AAc3F,SAASC,EAAgBC,GAAgBC,IAA2B,QAAgB;AACzF,QAAMC,IAAQC,EAAOH,CAAE;AAEvB,SAAOC,MAAc,OAAO,eAAe,KAAK,KAAKC,CAAK,CAAC,QAAQ,eAAeA,CAAK;AACzF;AAQA,IAAIC,IAAqC,EAAE,GAAGN,EAAA,GAC1CO,IAAU;AACd,MAAMC,wBAAgB,IAAA;AAQf,SAASC,IAAgC;AAC9C,SAAOF;AACT;AAGO,SAASG,EAAqBC,GAA4B;AAC/D,SAAAH,EAAU,IAAIG,CAAE,GACT,MAAM;AACX,IAAAH,EAAU,OAAOG,CAAE;AAAA,EACrB;AACF;AAOO,SAASC,EAAeC,GAAuD;AACpF,QAAMC,IAAmC,EAAE,GAAGd,EAAA;AAC9C,MAAIa;AACF,eAAWV,KAAMF;AACf,MAAI,OAAOY,EAAUV,CAAE,KAAM,aAAUW,EAAKX,CAAE,IAAIU,EAAUV,CAAE;AAGlE,EAAIF,EAAiB,MAAM,CAACE,MAAOW,EAAKX,CAAE,MAAMG,EAAOH,CAAE,CAAC,MAC1DG,IAASQ,GACTP,KAAW,GACXC,EAAU,QAAQ,CAACO,MAAMA,EAAA,CAAG;AAC9B;AAQO,SAASC,EACdC,GACAC,GACe;AACf,MAAID,KAAS,QAAQ,OAAOA,KAAU,SAAU,QAAOA;AACvD,QAAME,IAAMF;AAEZ,aAAWd,KAAMF;AACf,QAAIkB,EAAIhB,CAAE,KAAK,QAAQe,EAAQf,CAAE,EAAG,QAAOgB,EAAIhB,CAAE;AAGnD,WAASiB,IAAInB,EAAiB,SAAS,GAAGmB,KAAK,GAAGA,KAAK;AACrD,UAAMjB,IAAKF,EAAiBmB,CAAC;AAC7B,QAAID,EAAIhB,CAAE,KAAK,KAAM,QAAOgB,EAAIhB,CAAE;AAAA,EACpC;AAEF;"}

package/dist/breakpoints-Dpnh6BbG.cjs

@@ -0,0 +1,2 @@
+"use strict";const u={xxs:575.98,xs:767.98,sm:1023.98,md:1279.98,lg:1439.98,xl:1679.98,xxl:1919.98},s=["xxs","xs","sm","md","lg","xl","xxl"];function l(t,e="down"){const n=r[t];return e==="up"?`(min-width: ${Math.ceil(n)}px)`:`(max-width: ${n}px)`}let r={...u},f=0;const i=new Set;function p(){return f}function x(t){return i.add(t),()=>{i.delete(t)}}function a(t){const e={...u};if(t)for(const n of s)typeof t[n]=="number"&&(e[n]=t[n]);s.every(n=>e[n]===r[n])||(r=e,f+=1,i.forEach(n=>n()))}function b(t,e){if(t==null||typeof t!="object")return t;const n=t;for(const o of s)if(n[o]!=null&&e[o])return n[o];for(let o=s.length-1;o>=0;o--){const c=s[o];if(n[c]!=null)return n[c]}}exports.BREAKPOINTS=u;exports.BREAKPOINT_ORDER=s;exports.breakpointQuery=l;exports.getBreakpointsVersion=p;exports.resolveResponsive=b;exports.setBreakpoints=a;exports.subscribeBreakpoints=x;
+//# sourceMappingURL=breakpoints-Dpnh6BbG.cjs.map

package/dist/breakpoints-Dpnh6BbG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-Dpnh6BbG.cjs","sources":["../src/theme/breakpoints.ts"],"sourcesContent":["/**\n * The library's shared responsive breakpoints — the single source of truth for width thresholds, so\n * every responsive check (JS + component props) keys off the same sizes.\n *\n * **Desktop-first / max-width** model: each key is the **upper bound** (in px) of that band — `sm` means\n * \"screens **at most** `1023.98px` wide\" (tablet-landscape-and-down), matching `useMediaQuery('sm')` →\n * `(max-width: 1023.98px)`. `xxs` is the small-phone bound; anything wider than `xxl` (>1919.98) is the\n * large-desktop base. The `.98` avoids overlap with the next band's integer start\n * (576 / 768 / 1024 / 1280 / 1440 / 1680 / 1920). `xxs` (575.98) matches the phone tweaks the component\n * CSS already keys off, so the two stay in sync.\n */\nexport const BREAKPOINTS = {\n  xxs: 575.98,\n  xs: 767.98,\n  sm: 1023.98,\n  md: 1279.98,\n  lg: 1439.98,\n  xl: 1679.98,\n  xxl: 1919.98,\n} as const\n\n/** A responsive breakpoint key (`'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'`). */\nexport type Breakpoint = keyof typeof BREAKPOINTS\n\n/** Breakpoint keys ascending (narrowest → widest). */\nexport const BREAKPOINT_ORDER: readonly Breakpoint[] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']\n\n/**\n * A value that may vary by breakpoint — either a single value or a **desktop-first** map keyed by\n * breakpoint (e.g. `{ xs: 1, md: 3 }`): each entry applies at that breakpoint's max-width and below,\n * until a smaller one overrides; the largest defined key is the base for anything wider.\n */\nexport type Responsive<T> = T | Partial<Record<Breakpoint, T>>\n\n/**\n * Build the media-query string for a breakpoint, using the **active** bounds (see the config store\n * below). `down` (default) → `(max-width: <bound>px)` (that band and narrower); `up` →\n * `(min-width: <next whole px>px)` (wider than the band).\n */\nexport function breakpointQuery(bp: Breakpoint, direction: 'down' | 'up' = 'down'): string {\n  const bound = active[bp]\n  // `up` starts just above the band's `.98` bound — the next whole px (e.g. md 1279.98 → min-width 1280)\n  return direction === 'up' ? `(min-width: ${Math.ceil(bound)}px)` : `(max-width: ${bound}px)`\n}\n\n// ── active bounds — overridable from `ConfigProvider` (`config.theme.breakpoints`) ────────────────\n// The KEYS are fixed (`xxs…xxl`); an app overrides the pixel VALUES (a subset is fine). `BREAKPOINTS`\n// above stays the immutable defaults + the source of the `Breakpoint` type; these are the live values\n// the query builder / hooks read, so a config override flows through `useMediaQuery` / `Flex` / `Grid`\n// / `Masonry`. NOTE: this affects the **JS** responsive layer only — component CSS `@media` rules are\n// compiled into the stylesheet and can't follow a runtime override.\nlet active: Record<Breakpoint, number> = { ...BREAKPOINTS }\nlet version = 0\nconst listeners = new Set<() => void>()\n\n/** The live breakpoint bounds (defaults merged with any `config.theme.breakpoints` override). */\nexport function getBreakpoints(): Record<Breakpoint, number> {\n  return active\n}\n\n/** A version counter that bumps on every change — feeds `useSyncExternalStore` for reactive reads. */\nexport function getBreakpointsVersion(): number {\n  return version\n}\n\n/** Subscribe to override changes (used by `useMediaQuery` so token queries re-resolve live). */\nexport function subscribeBreakpoints(cb: () => void): () => void {\n  listeners.add(cb)\n  return () => {\n    listeners.delete(cb)\n  }\n}\n\n/**\n * Override the pixel bounds of (some) breakpoints — keys stay fixed, so pass any subset. `undefined` /\n * empty resets to the built-in defaults. `ConfigProvider` calls this from `config.theme.breakpoints`;\n * a no-op when nothing actually changed.\n */\nexport function setBreakpoints(overrides?: Partial<Record<Breakpoint, number>>): void {\n  const next: Record<Breakpoint, number> = { ...BREAKPOINTS }\n  if (overrides) {\n    for (const bp of BREAKPOINT_ORDER) {\n      if (typeof overrides[bp] === 'number') next[bp] = overrides[bp] as number\n    }\n  }\n  if (BREAKPOINT_ORDER.every((bp) => next[bp] === active[bp])) return\n  active = next\n  version += 1\n  listeners.forEach((l) => l())\n}\n\n/**\n * Resolve a possibly-responsive value against the currently matching breakpoints (a `{ bp: boolean }`\n * map of max-width matches). A plain value passes through; a breakpoint map is **desktop-first** — the\n * value of the **smallest matching** breakpoint wins (the tightest band the viewport falls into),\n * falling back to the **largest defined** key when none match (screens wider than every defined bound).\n */\nexport function resolveResponsive<T>(\n  value: Responsive<T>,\n  matches: Record<Breakpoint, boolean>,\n): T | undefined {\n  if (value == null || typeof value !== 'object') return value as T | undefined\n  const map = value as Partial<Record<Breakpoint, T>>\n  // smallest matching band wins (ascending → first match is the tightest max-width the viewport is in)\n  for (const bp of BREAKPOINT_ORDER) {\n    if (map[bp] != null && matches[bp]) return map[bp]\n  }\n  // wider than every defined bound → the largest defined value is the base\n  for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i--) {\n    const bp = BREAKPOINT_ORDER[i]\n    if (map[bp] != null) return map[bp]\n  }\n  return undefined\n}\n"],"names":["BREAKPOINTS","BREAKPOINT_ORDER","breakpointQuery","bp","direction","bound","active","version","listeners","getBreakpointsVersion","subscribeBreakpoints","cb","setBreakpoints","overrides","next","l","resolveResponsive","value","matches","map","i"],"mappings":"aAWO,MAAMA,EAAc,CACzB,IAAK,OACL,GAAI,OACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,IAAK,OACP,EAMaC,EAA0C,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAc3F,SAASC,EAAgBC,EAAgBC,EAA2B,OAAgB,CACzF,MAAMC,EAAQC,EAAOH,CAAE,EAEvB,OAAOC,IAAc,KAAO,eAAe,KAAK,KAAKC,CAAK,CAAC,MAAQ,eAAeA,CAAK,KACzF,CAQA,IAAIC,EAAqC,CAAE,GAAGN,CAAA,EAC1CO,EAAU,EACd,MAAMC,MAAgB,IAQf,SAASC,GAAgC,CAC9C,OAAOF,CACT,CAGO,SAASG,EAAqBC,EAA4B,CAC/D,OAAAH,EAAU,IAAIG,CAAE,EACT,IAAM,CACXH,EAAU,OAAOG,CAAE,CACrB,CACF,CAOO,SAASC,EAAeC,EAAuD,CACpF,MAAMC,EAAmC,CAAE,GAAGd,CAAA,EAC9C,GAAIa,EACF,UAAWV,KAAMF,EACX,OAAOY,EAAUV,CAAE,GAAM,WAAUW,EAAKX,CAAE,EAAIU,EAAUV,CAAE,GAG9DF,EAAiB,MAAOE,GAAOW,EAAKX,CAAE,IAAMG,EAAOH,CAAE,CAAC,IAC1DG,EAASQ,EACTP,GAAW,EACXC,EAAU,QAASO,GAAMA,EAAA,CAAG,EAC9B,CAQO,SAASC,EACdC,EACAC,EACe,CACf,GAAID,GAAS,MAAQ,OAAOA,GAAU,SAAU,OAAOA,EACvD,MAAME,EAAMF,EAEZ,UAAWd,KAAMF,EACf,GAAIkB,EAAIhB,CAAE,GAAK,MAAQe,EAAQf,CAAE,EAAG,OAAOgB,EAAIhB,CAAE,EAGnD,QAASiB,EAAInB,EAAiB,OAAS,EAAGmB,GAAK,EAAGA,IAAK,CACrD,MAAMjB,EAAKF,EAAiBmB,CAAC,EAC7B,GAAID,EAAIhB,CAAE,GAAK,KAAM,OAAOgB,EAAIhB,CAAE,CACpC,CAEF"}

package/dist/components/Alert/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Alert-DKIjM-9x.cjs");exports.Alert=e.Alert;exports.default=e.Alert;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Alert-D99G0StL.cjs");exports.Alert=e.Alert;exports.default=e.Alert;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Alert/index.js

@@ -1,4 +1,4 @@
-import { A as r, A as t } from "../../Alert-BQpA48PY.js";
+import { A as r, A as t } from "../../Alert-B3rDvpbO.js";
 export {
   r as Alert,
   t as default

package/dist/components/Breadcrumbs/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Breadcrumbs-CHONper7.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.default=e.Breadcrumbs;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Breadcrumbs-BnxhmyK5.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.default=e.Breadcrumbs;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e, B as s } from "../../Breadcrumbs-Bx5UgwDy.js";
+import { B as e, B as s } from "../../Breadcrumbs-DvgctFLS.js";
 export {
   e as Breadcrumbs,
   s as default

package/dist/components/Button/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../Button-D4bfVNNa.cjs");exports.Button=t.Button;exports.default=t.Button;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../Button-Cj6pckNl.cjs");exports.Button=t.Button;exports.default=t.Button;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Button/index.js

@@ -1,4 +1,4 @@
-import { B as o, B } from "../../Button-DhEv0YFk.js";
+import { B as o, B } from "../../Button-CUsXYM-m.js";
 export {
   o as Button,
   B as default

package/dist/components/Card/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Card-CfyaerZZ.cjs");exports.Card=e.Card;exports.default=e.Card;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Card-DD9SWHzZ.cjs");exports.Card=e.Card;exports.default=e.Card;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Card/index.js

@@ -1,4 +1,4 @@
-import { C, C as d } from "../../Card-DzClqJuu.js";
+import { C, C as d } from "../../Card-DhpudGvF.js";
 export {
   C as Card,
   d as default

package/dist/components/Chip/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-DSrdXLBU.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-B2lY4TJ0.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Chip/index.js

@@ -1,4 +1,4 @@
-import { C as e, C as f } from "../../Chip-Cfo0v3Z8.js";
+import { C as e, C as f } from "../../Chip-DulHqhuf.js";
 export {
   e as Chip,
   f as default

package/dist/components/CodeBlock/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-CgXOjKS-.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-EhB7v9-R.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CodeBlock/index.js

@@ -1,4 +1,4 @@
-import { C as e, C } from "../../CodeBlock-BWxQyKRo.js";
+import { C as e, C } from "../../CodeBlock-DwBMghs2.js";
 export {
   e as CodeBlock,
   C as default

package/dist/components/ColorPicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-BwmaXCOy.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-Dc1y9Zuu.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { C as a, C as e } from "../../ColorPicker-2udt1ORM.js";
+import { C as a, C as e } from "../../ColorPicker-DJgTeHht.js";
 export {
   a as ColorPicker,
   e as default

package/dist/components/CopyButton/CopyButton.d.cts

@@ -0,0 +1,32 @@
+import { type IconButtonProps } from '../IconButton';
+import type { IconName } from '../../icons/names';
+export interface CopyButtonProps extends Omit<IconButtonProps, 'children' | 'aria-label' | 'onCopy'> {
+    /** The text copied to the clipboard on click. */
+    value: string;
+    /** Idle icon. Defaults to `'Copy'`. */
+    icon?: IconName;
+    /** Icon shown briefly after a successful copy. Defaults to `'CopySuccess'`. */
+    copiedIcon?: IconName;
+    /** Tooltip + accessible label while idle. Defaults to the localized `clipboard.copy` (`"Copy"`). */
+    copyLabel?: string;
+    /** Tooltip + accessible label right after copying. Defaults to the localized `clipboard.copied` (`"Copied!"`). */
+    copiedLabel?: string;
+    /** How long (ms) the copied state shows before reverting. Defaults to `1600`. */
+    timeout?: number;
+    /** Show the hover/focus tooltip. Defaults to `true`. */
+    tooltip?: boolean;
+    /** Called with `value` after a successful copy. */
+    onCopy?: (value: string) => void;
+}
+/**
+ * A ready-made **click-to-copy** button — copies `value` to the clipboard and flips its icon to a tick
+ * (+ a tooltip that reads "Copied!") for a moment, then reverts. Wraps `IconButton` (defaults to the
+ * quiet `text` variant) with a `Tooltip`; labels come from the built-in i18n (`clipboard.copy` /
+ * `clipboard.copied`), so they localize with the panel. For a labeled button or a custom trigger, use
+ * the `useClipboard` hook instead. Built on `navigator.clipboard` (no-ops where unavailable).
+ *
+ * @example
+ * <CopyButton value={apiKey} />
+ * <CopyButton value={url} copyLabel="Copy link" size="sm" />
+ */
+export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,32 @@
+import { type IconButtonProps } from '../IconButton';
+import type { IconName } from '../../icons/names';
+export interface CopyButtonProps extends Omit<IconButtonProps, 'children' | 'aria-label' | 'onCopy'> {
+    /** The text copied to the clipboard on click. */
+    value: string;
+    /** Idle icon. Defaults to `'Copy'`. */
+    icon?: IconName;
+    /** Icon shown briefly after a successful copy. Defaults to `'CopySuccess'`. */
+    copiedIcon?: IconName;
+    /** Tooltip + accessible label while idle. Defaults to the localized `clipboard.copy` (`"Copy"`). */
+    copyLabel?: string;
+    /** Tooltip + accessible label right after copying. Defaults to the localized `clipboard.copied` (`"Copied!"`). */
+    copiedLabel?: string;
+    /** How long (ms) the copied state shows before reverting. Defaults to `1600`. */
+    timeout?: number;
+    /** Show the hover/focus tooltip. Defaults to `true`. */
+    tooltip?: boolean;
+    /** Called with `value` after a successful copy. */
+    onCopy?: (value: string) => void;
+}
+/**
+ * A ready-made **click-to-copy** button — copies `value` to the clipboard and flips its icon to a tick
+ * (+ a tooltip that reads "Copied!") for a moment, then reverts. Wraps `IconButton` (defaults to the
+ * quiet `text` variant) with a `Tooltip`; labels come from the built-in i18n (`clipboard.copy` /
+ * `clipboard.copied`), so they localize with the panel. For a labeled button or a custom trigger, use
+ * the `useClipboard` hook instead. Built on `navigator.clipboard` (no-ops where unavailable).
+ *
+ * @example
+ * <CopyButton value={apiKey} />
+ * <CopyButton value={url} copyLabel="Copy link" size="sm" />
+ */
+export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CopyButton/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-D_DCLHhb.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
+//# sourceMappingURL=index.cjs.map

package/dist/components/CopyButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/CopyButton/index.d.cts

@@ -0,0 +1,2 @@
+export { CopyButton, CopyButton as default } from './CopyButton';
+export type { CopyButtonProps } from './CopyButton';

package/dist/components/CopyButton/index.d.ts

@@ -0,0 +1,2 @@
+export { CopyButton, CopyButton as default } from './CopyButton';
+export type { CopyButtonProps } from './CopyButton';

package/dist/components/CopyButton/index.js

@@ -0,0 +1,6 @@
+import { C as a, C } from "../../CopyButton-B4-OYsYr.js";
+export {
+  a as CopyButton,
+  C as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CopyButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DashedButton/DashedButton.d.cts

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+export type DashedButtonSize = 'sm' | 'md' | 'lg';
+export interface DashedButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to drop it (label only). Defaults to `Add` (a plus). */
+    icon?: IconName | ReactNode | false;
+    /** Theme palette token that tints the border, icon and states. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Size — scales the padding, icon circle and label. Defaults to `md`. */
+    size?: DashedButtonSize;
+    /** Icon/label arrangement — `vertical` (icon stacked above the label) or `horizontal` (icon beside it). Defaults to `vertical`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Stretch to the container width. Defaults to `true` (these usually fill a row or grid cell). */
+    fullWidth?: boolean;
+    /** Active / selected look — solid border + stronger tint. Also reflected as `aria-pressed`. */
+    active?: boolean;
+    /** The label next to the icon (e.g. `"Add Item"`). Omit for an icon-only tile (pass `aria-label`). */
+    children?: ReactNode;
+}
+/**
+ * A dashed, tinted, rounded **outline button** — the reusable affordance for "add a card / row / item"
+ * placeholders and any other custom action that wants that dashed-frame look, so it never has to be
+ * hand-styled. A plus (or any) glyph in a soft circle + an optional label. Tintable via `color` (the
+ * shared `--tz-btn-rgb` pattern), `fullWidth` by default so it fills its row or grid cell, laid out
+ * `vertical` (icon stacked above the label, default) or `horizontal`, with an optional `active`
+ * selected state. Renders a real `<button type="button">` (keyboard + focus for free). Token-only styling.
+ *
+ * @example
+ * {items.map((it, i) => <ItemCard key={i} … />)}
+ * <DashedButton onClick={addItem}>Add New Item</DashedButton>
+ */
+export declare const DashedButton: import("react").ForwardRefExoticComponent<DashedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/DashedButton/DashedButton.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { ThemeColor } from '../../theme';
+import { type IconName } from '../../icons/names';
+export type DashedButtonSize = 'sm' | 'md' | 'lg';
+export interface DashedButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to drop it (label only). Defaults to `Add` (a plus). */
+    icon?: IconName | ReactNode | false;
+    /** Theme palette token that tints the border, icon and states. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Size — scales the padding, icon circle and label. Defaults to `md`. */
+    size?: DashedButtonSize;
+    /** Icon/label arrangement — `vertical` (icon stacked above the label) or `horizontal` (icon beside it). Defaults to `vertical`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Stretch to the container width. Defaults to `true` (these usually fill a row or grid cell). */
+    fullWidth?: boolean;
+    /** Active / selected look — solid border + stronger tint. Also reflected as `aria-pressed`. */
+    active?: boolean;
+    /** The label next to the icon (e.g. `"Add Item"`). Omit for an icon-only tile (pass `aria-label`). */
+    children?: ReactNode;
+}
+/**
+ * A dashed, tinted, rounded **outline button** — the reusable affordance for "add a card / row / item"
+ * placeholders and any other custom action that wants that dashed-frame look, so it never has to be
+ * hand-styled. A plus (or any) glyph in a soft circle + an optional label. Tintable via `color` (the
+ * shared `--tz-btn-rgb` pattern), `fullWidth` by default so it fills its row or grid cell, laid out
+ * `vertical` (icon stacked above the label, default) or `horizontal`, with an optional `active`
+ * selected state. Renders a real `<button type="button">` (keyboard + focus for free). Token-only styling.
+ *
+ * @example
+ * {items.map((it, i) => <ItemCard key={i} … />)}
+ * <DashedButton onClick={addItem}>Add New Item</DashedButton>
+ */
+export declare const DashedButton: import("react").ForwardRefExoticComponent<DashedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/DashedButton/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DashedButton-q7AOqKUE.cjs");exports.DashedButton=e.DashedButton;exports.default=e.DashedButton;
+//# sourceMappingURL=index.cjs.map

package/dist/components/DashedButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/DashedButton/index.d.cts

@@ -0,0 +1,2 @@
+export { DashedButton, DashedButton as default } from './DashedButton';
+export type { DashedButtonProps, DashedButtonSize } from './DashedButton';

package/dist/components/DashedButton/index.d.ts

@@ -0,0 +1,2 @@
+export { DashedButton, DashedButton as default } from './DashedButton';
+export type { DashedButtonProps, DashedButtonSize } from './DashedButton';

package/dist/components/DashedButton/index.js

@@ -0,0 +1,6 @@
+import { D as e, D as o } from "../../DashedButton-DeiALUPA.js";
+export {
+  e as DashedButton,
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DashedButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DatePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-DF4Epkn8.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-CEczjGZy.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DatePicker-WM9TC6L_.js";
+import { D as r, D as t } from "../../DatePicker-DkvfSN1K.js";
 export {
   r as DatePicker,
   t as default

package/dist/components/DateTimePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-C557OjBU.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-CDyGxUBX.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DateTimePicker-DBtcWK0F.js";
+import { D as r, D as t } from "../../DateTimePicker-DPomyrnN.js";
 export {
   r as DateTimePicker,
   t as default

package/dist/components/Dropdown/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Dropdown-DygP50OB.cjs");exports.Dropdown=e.Dropdown;exports.default=e.Dropdown;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Dropdown-Ui7h2TGd.cjs");exports.Dropdown=e.Dropdown;exports.default=e.Dropdown;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import { D as r, D } from "../../Dropdown-DKAXue5_.js";
+import { D as r, D } from "../../Dropdown-FfkmluRu.js";
 export {
   r as Dropdown,
   D as default

package/dist/components/EmptyState/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-CCCpZ-ZA.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-B77utgEn.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
 //# sourceMappingURL=index.cjs.map

package/dist/components/EmptyState/index.js

@@ -1,4 +1,4 @@
-import { E as e, E } from "../../EmptyState-CetM49vk.js";
+import { E as e, E } from "../../EmptyState-CVyFXprK.js";
 export {
   e as EmptyState,
   E as default

package/dist/components/FileCard/FileCard.d.cts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import { type AvatarSize } from '../Avatar';
+export type FileCardSize = AvatarSize;
+export interface FileCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
+    /** File name — shown middle-truncated (`test-file-na….pdf`) so the extension always stays visible. */
+    name: string;
+    /** File URL — the download target and, for an image, the thumbnail `src`. */
+    src?: string;
+    /** File type — an extension (`'pdf'`) or MIME (`'image/png'`). Derived from `name` when omitted. */
+    type?: string;
+    /** Force image vs. file rendering. Inferred from `type` / `name` / `src` when omitted. */
+    image?: boolean;
+    /** File size — a **bytes** number (auto-formatted to `"2.3 MB"`) or a preformatted string. Shown after the type. */
+    fileSize?: number | string;
+    /**
+     * When no `fileSize` is given, fetch it from `src` via a `HEAD` request (reads `Content-Length`). Off
+     * by default — it's a network call and needs CORS to expose the header; prefer passing `fileSize` from
+     * the backend. Fails silently (no size shown) when unavailable.
+     */
+    fetchSize?: boolean;
+    /** Meta line under the name — overrides the derived `TYPE · size`. */
+    meta?: ReactNode;
+    /** Theme token tinting the avatar / file-icon box. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Size — scales the avatar, text and padding. Defaults to `md`. */
+    size?: FileCardSize;
+    /** Show the download control (only when there's a `src` or `onDownload`). Defaults to `true`. */
+    downloadable?: boolean;
+    /** Custom download handler — replaces the default (a download of `src`). */
+    onDownload?: () => void;
+}
+/**
+ * A compact, read-only **file card** for displaying a file that already exists (e.g. from the backend) —
+ * an image or a document (`pdf` / `docx` / `csv` / `svg` / …). Shows a leading **`Avatar`** (the image
+ * thumbnail via `src`, or a type-based file icon in a tinted square), the **name** middle-truncated so
+ * the extension is never lost, the **type** underneath, and a **download** control. Simple to drop in —
+ * pass `name` (+ `src` for the thumbnail/download). Not to be confused with `FileUploader` (which
+ * *collects* files to upload); this only *displays* one. Token-only styling.
+ *
+ * @example
+ * <FileCard name="annual-report.pdf" src="/files/annual-report.pdf" />
+ * <FileCard name="avatar.png" src={url} meta="240 KB" />
+ */
+export declare const FileCard: import("react").ForwardRefExoticComponent<FileCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FileCard/FileCard.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import { type AvatarSize } from '../Avatar';
+export type FileCardSize = AvatarSize;
+export interface FileCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
+    /** File name — shown middle-truncated (`test-file-na….pdf`) so the extension always stays visible. */
+    name: string;
+    /** File URL — the download target and, for an image, the thumbnail `src`. */
+    src?: string;
+    /** File type — an extension (`'pdf'`) or MIME (`'image/png'`). Derived from `name` when omitted. */
+    type?: string;
+    /** Force image vs. file rendering. Inferred from `type` / `name` / `src` when omitted. */
+    image?: boolean;
+    /** File size — a **bytes** number (auto-formatted to `"2.3 MB"`) or a preformatted string. Shown after the type. */
+    fileSize?: number | string;
+    /**
+     * When no `fileSize` is given, fetch it from `src` via a `HEAD` request (reads `Content-Length`). Off
+     * by default — it's a network call and needs CORS to expose the header; prefer passing `fileSize` from
+     * the backend. Fails silently (no size shown) when unavailable.
+     */
+    fetchSize?: boolean;
+    /** Meta line under the name — overrides the derived `TYPE · size`. */
+    meta?: ReactNode;
+    /** Theme token tinting the avatar / file-icon box. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Size — scales the avatar, text and padding. Defaults to `md`. */
+    size?: FileCardSize;
+    /** Show the download control (only when there's a `src` or `onDownload`). Defaults to `true`. */
+    downloadable?: boolean;
+    /** Custom download handler — replaces the default (a download of `src`). */
+    onDownload?: () => void;
+}
+/**
+ * A compact, read-only **file card** for displaying a file that already exists (e.g. from the backend) —
+ * an image or a document (`pdf` / `docx` / `csv` / `svg` / …). Shows a leading **`Avatar`** (the image
+ * thumbnail via `src`, or a type-based file icon in a tinted square), the **name** middle-truncated so
+ * the extension is never lost, the **type** underneath, and a **download** control. Simple to drop in —
+ * pass `name` (+ `src` for the thumbnail/download). Not to be confused with `FileUploader` (which
+ * *collects* files to upload); this only *displays* one. Token-only styling.
+ *
+ * @example
+ * <FileCard name="annual-report.pdf" src="/files/annual-report.pdf" />
+ * <FileCard name="avatar.png" src={url} meta="240 KB" />
+ */
+export declare const FileCard: import("react").ForwardRefExoticComponent<FileCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FileCard/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileCard-CsGW2sxE.cjs");exports.FileCard=e.FileCard;exports.default=e.FileCard;
+//# sourceMappingURL=index.cjs.map

package/dist/components/FileCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/FileCard/index.d.cts

@@ -0,0 +1,2 @@
+export { FileCard, FileCard as default } from './FileCard';
+export type { FileCardProps, FileCardSize } from './FileCard';

package/dist/components/FileCard/index.d.ts

@@ -0,0 +1,2 @@
+export { FileCard, FileCard as default } from './FileCard';
+export type { FileCardProps, FileCardSize } from './FileCard';

package/dist/components/FileCard/index.js

@@ -0,0 +1,6 @@
+import { F as r, F } from "../../FileCard-Cpc5frNm.js";
+export {
+  r as FileCard,
+  F as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/FileCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/FileUploader/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-B4TJHyoi.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-DDi_uzIx.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FileUploader/index.js

@@ -1,4 +1,4 @@
-import { F as l, F as o } from "../../FileUploader-VtmmwUFE.js";
+import { F as l, F as o } from "../../FileUploader-B_nKMh_K.js";
 export {
   l as FileUploader,
   o as default

package/dist/components/Flag/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-EPZOrH-U.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-BJLWKB9J.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
 //# sourceMappingURL=index.cjs.map