@techzyapp/ui-library 1.0.3 → 1.0.8

package/dist/{UserCard-OlLeyyS0.cjs.map → UserCard-sIguy8Jp.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-sIguy8Jp.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-C9yBIMq0.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-BL8hDdEl.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-DhBx2UgK.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-BC_QSlJZ.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-C_HPI97g.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-BT8XmR_T.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-DfVntHqn.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-DHPAefzg.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-BoHt3WYS.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-DX3QECcs.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-DKhIGQBg.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-CPWEOym2.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-BAJWvC3h.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-2qD8vZkR.js";
 export {
   a as ColorPicker,
   e as default

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-TLaQ3ZyB.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-BVHriq5B.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-Dq2jJ2yb.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-BWxsgyGB.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-B2WgeL-H.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-D8eUxb8v.js";
 export {
   e as EmptyState,
   E as default

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-qsnWX-i5.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-I0G-2WSe.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-Bxl1Pa9m.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Flag/index.js

@@ -1,4 +1,4 @@
-import { F as e, F as f } from "../../Flag-BWCX6oSR.js";
+import { F as e, F as f } from "../../Flag-CvIo_Eqp.js";
 export {
   e as Flag,
   f as default

package/dist/components/Flex/Flex.d.cts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../theme/breakpoints';
 /** A space value: a `--tz-space-*` scale key, a raw number (px), or any CSS length string. */
 export type Spacing = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | (string & {});
 export type FlexDirection = 'row' | 'column';
@@ -7,18 +8,18 @@ export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'e
 /** Resolve a `Spacing` to a CSS value — scale key → token, number → px, else passthrough. */
 export declare function space(value?: Spacing): string | undefined;
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-    /** Main axis. `row` (default) or `column`. */
-    direction?: FlexDirection;
-    /** Gap between children (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items`. */
-    align?: FlexAlign;
-    /** `justify-content`. */
-    justify?: FlexJustify;
-    /** Allow children to wrap onto multiple lines. */
-    wrap?: boolean;
-    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). */
-    padding?: Spacing;
+    /** Main axis. `row` (default) or `column`. Responsive: a breakpoint map, e.g. `{ xs: 'column', md: 'row' }`. */
+    direction?: Responsive<FlexDirection>;
+    /** Gap between children (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items`. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** `justify-content`. Responsive: a breakpoint map. */
+    justify?: Responsive<FlexJustify>;
+    /** Allow children to wrap onto multiple lines. Responsive: a breakpoint map. */
+    wrap?: Responsive<boolean>;
+    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-flex` instead of `flex`. */
     inline?: boolean;
     /** The box's own `flex-grow` (when this Flex is itself a flex child). `true` = `1`. */
@@ -27,6 +28,8 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A flexbox layout primitive — set direction/gap/alignment/padding via props instead of inline styles.
  * `Row` and `Col` are thin presets over it. Spacing accepts `--tz-space-*` keys (`"md"`), raw px
- * numbers, or any CSS value; consumer `style` still merges last.
+ * numbers, or any CSS value; consumer `style` still merges last. Every layout prop is **responsive** —
+ * pass a **desktop-first** breakpoint map (`{ xs, sm, md, lg, xl }`) to vary it by viewport (e.g.
+ * `direction={{ xs: 'column', md: 'row' }}`), resolved via the shared breakpoints.
  */
 export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Flex.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../theme/breakpoints';
 /** A space value: a `--tz-space-*` scale key, a raw number (px), or any CSS length string. */
 export type Spacing = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | (string & {});
 export type FlexDirection = 'row' | 'column';
@@ -7,18 +8,18 @@ export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'e
 /** Resolve a `Spacing` to a CSS value — scale key → token, number → px, else passthrough. */
 export declare function space(value?: Spacing): string | undefined;
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-    /** Main axis. `row` (default) or `column`. */
-    direction?: FlexDirection;
-    /** Gap between children (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items`. */
-    align?: FlexAlign;
-    /** `justify-content`. */
-    justify?: FlexJustify;
-    /** Allow children to wrap onto multiple lines. */
-    wrap?: boolean;
-    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). */
-    padding?: Spacing;
+    /** Main axis. `row` (default) or `column`. Responsive: a breakpoint map, e.g. `{ xs: 'column', md: 'row' }`. */
+    direction?: Responsive<FlexDirection>;
+    /** Gap between children (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items`. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** `justify-content`. Responsive: a breakpoint map. */
+    justify?: Responsive<FlexJustify>;
+    /** Allow children to wrap onto multiple lines. Responsive: a breakpoint map. */
+    wrap?: Responsive<boolean>;
+    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-flex` instead of `flex`. */
     inline?: boolean;
     /** The box's own `flex-grow` (when this Flex is itself a flex child). `true` = `1`. */
@@ -27,6 +28,8 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A flexbox layout primitive — set direction/gap/alignment/padding via props instead of inline styles.
  * `Row` and `Col` are thin presets over it. Spacing accepts `--tz-space-*` keys (`"md"`), raw px
- * numbers, or any CSS value; consumer `style` still merges last.
+ * numbers, or any CSS value; consumer `style` still merges last. Every layout prop is **responsive** —
+ * pass a **desktop-first** breakpoint map (`{ xs, sm, md, lg, xl }`) to vary it by viewport (e.g.
+ * `direction={{ xs: 'column', md: 'row' }}`), resolved via the shared breakpoints.
  */
 export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Grid.d.cts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type FlexAlign, type Spacing } from './Flex';
+import { type Responsive } from '../../theme/breakpoints';
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */
-    cols?: number | string;
+    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. Responsive: a breakpoint map, e.g. `{ xs: 1, md: 3 }`. */
+    cols?: Responsive<number | string>;
     /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */
     minItemWidth?: Spacing;
     /**
@@ -10,12 +11,12 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
      * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.
      */
     fill?: boolean;
-    /** Gap between cells (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items` for the cells. */
-    align?: FlexAlign;
-    /** Padding (token key, px number, or CSS value). */
-    padding?: Spacing;
+    /** Gap between cells (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items` for the cells. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** Padding (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-grid`. */
     inline?: boolean;
 }
@@ -23,6 +24,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count
  * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to
  * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer
- * `style` merges last.
+ * `style` merges last. `cols` / `gap` / `align` / `padding` are **responsive** — pass a **desktop-first**
+ * breakpoint map (`{ xs, sm, md, lg, xl }`) to vary by viewport (e.g. `cols={{ xs: 1, md: 3 }}`).
  */
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Grid.d.ts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type FlexAlign, type Spacing } from './Flex';
+import { type Responsive } from '../../theme/breakpoints';
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */
-    cols?: number | string;
+    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. Responsive: a breakpoint map, e.g. `{ xs: 1, md: 3 }`. */
+    cols?: Responsive<number | string>;
     /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */
     minItemWidth?: Spacing;
     /**
@@ -10,12 +11,12 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
      * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.
      */
     fill?: boolean;
-    /** Gap between cells (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items` for the cells. */
-    align?: FlexAlign;
-    /** Padding (token key, px number, or CSS value). */
-    padding?: Spacing;
+    /** Gap between cells (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items` for the cells. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** Padding (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-grid`. */
     inline?: boolean;
 }
@@ -23,6 +24,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count
  * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to
  * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer
- * `style` merges last.
+ * `style` merges last. `cols` / `gap` / `align` / `padding` are **responsive** — pass a **desktop-first**
+ * breakpoint map (`{ xs, sm, md, lg, xl }`) to vary by viewport (e.g. `cols={{ xs: 1, md: 3 }}`).
  */
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flex-CqL3Ghda.cjs"),r=require("../../Col-R5mAy8T9.cjs"),l=require("../../Grid-Bw95bKkJ.cjs");exports.Flex=e.Flex;exports.default=e.Flex;exports.Col=r.Col;exports.Row=r.Row;exports.Grid=l.Grid;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flex-C6tHC8n7.cjs"),r=require("../../Col-BdQeyKEX.cjs"),l=require("../../Grid-frN0D9lR.cjs");exports.Flex=e.Flex;exports.default=e.Flex;exports.Col=r.Col;exports.Row=r.Row;exports.Grid=l.Grid;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Flex/index.js

@@ -1,6 +1,6 @@
-import { F as a, F as e } from "../../Flex-Bj3mMF5A.js";
-import { C as f, R as t } from "../../Col-D2TfZKiM.js";
-import { G as l } from "../../Grid-CY-syhTX.js";
+import { F as a, F as e } from "../../Flex-BFn4P1tJ.js";
+import { C as f, R as t } from "../../Col-B51RlwWP.js";
+import { G as l } from "../../Grid-5k6dy-F5.js";
 export {
   f as Col,
   a as Flex,

package/dist/components/FullscreenToggle/index.cjs

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

package/dist/components/FullscreenToggle/index.js

@@ -1,4 +1,4 @@
-import { F as a, F as o } from "../../FullscreenToggle-oWzYqUPH.js";
+import { F as a, F as o } from "../../FullscreenToggle-CRMGYmB8.js";
 export {
   a as FullscreenToggle,
   o as default