@techzyapp/ui-library 1.0.25 → 1.0.28

package/dist/Typography-CJv5AnRP.js

@@ -0,0 +1,70 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { clsx as w } from "clsx";
+const f = "_typography_1s1ws_2", v = "_h1_1s1ws_10", g = "_h2_1s1ws_15", x = "_h3_1s1ws_20", S = "_h4_1s1ws_25", z = "_subtitle_1s1ws_30", C = "_body_1s1ws_34", T = "_bodySmall_1s1ws_38", j = "_caption_1s1ws_42", A = "_overline_1s1ws_47", E = "_uppercase_1s1ws_55", N = "_truncate_1s1ws_58", t = {
+  typography: f,
+  h1: v,
+  h2: g,
+  h3: x,
+  h4: S,
+  subtitle: z,
+  body: C,
+  bodySmall: T,
+  caption: j,
+  overline: A,
+  uppercase: E,
+  truncate: N
+}, R = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  subtitle: "h6",
+  body: "p",
+  bodySmall: "p",
+  caption: "span",
+  overline: "span",
+  uppercase: "span"
+};
+function V(s) {
+  if (s)
+    return s === "text" ? "var(--tz-color-text)" : s === "muted" ? "var(--tz-color-primary-shade600)" : `var(--tz-color-${s})`;
+}
+const B = b(function({
+  variant: o = "body",
+  as: a,
+  color: p,
+  align: e,
+  truncate: c = !1,
+  uppercase: _ = !1,
+  className: l,
+  style: h,
+  children: i,
+  ...y
+}, u) {
+  const r = o === "uppercase" ? "overline" : o, d = a ?? R[r], n = V(p);
+  return /* @__PURE__ */ m(
+    d,
+    {
+      ref: u,
+      className: w(
+        t.typography,
+        t[r],
+        c && t.truncate,
+        _ && t.uppercase,
+        l
+      ),
+      style: {
+        ...n && { color: n },
+        ...e && { textAlign: e },
+        ...h
+      },
+      ...y,
+      children: i
+    }
+  );
+});
+export {
+  B as T
+};
+//# sourceMappingURL=Typography-CJv5AnRP.js.map

package/dist/Typography-CJv5AnRP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-CJv5AnRP.js","sources":["../src/components/Typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Typography.module.css'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'subtitle'\n  | 'body'\n  | 'bodySmall'\n  | 'caption'\n  | 'overline'\n  /** @deprecated Use `overline` (same look) — or the `uppercase` prop to capitalize any variant. */\n  | 'uppercase'\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify'\n\n/**\n * Text color: a theme palette token, the semantic `text` role, or `muted` (a soft primary shade for\n * secondary text). Omit to inherit the surrounding color.\n */\nexport type TypographyColor = ThemeColor | 'text' | 'muted'\n\n/** Default HTML element rendered for each variant. Override with the `as` prop. */\nconst variantElement: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  subtitle: 'h6',\n  body: 'p',\n  bodySmall: 'p',\n  caption: 'span',\n  overline: 'span',\n  uppercase: 'span',\n}\n\nfunction resolveColor(color?: TypographyColor): string | undefined {\n  if (!color) return undefined\n  if (color === 'text') return 'var(--tz-color-text)'\n  if (color === 'muted') return 'var(--tz-color-primary-shade600)'\n  return `var(--tz-color-${color})`\n}\n\nexport interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {\n  /**\n   * Type scale + default element. `h1`–`h4` headings · `subtitle` · `body` (default) · `bodySmall` · `caption` ·\n   * `overline` (a small, spaced-out, all-caps eyebrow label). `uppercase` is a deprecated alias of `overline`.\n   */\n  variant?: TypographyVariant\n  /** Render a different HTML element (or component) than the variant's default — keeps the styling, changes the tag. */\n  as?: ElementType\n  /** Text color. Omit to inherit the surrounding color. */\n  color?: TypographyColor\n  /** Horizontal text alignment. */\n  align?: TypographyAlign\n  /** Clamp to a single line, hiding overflow with an ellipsis. */\n  truncate?: boolean\n  /** Render the text in capitals (`text-transform: uppercase`) — any variant, size and spacing untouched. */\n  uppercase?: boolean\n  children?: ReactNode\n}\n\n/**\n * Text primitive for the design system. Each `variant` maps to a sensible HTML\n * element and a font size from the `--tz-font-size-*` scale; override the tag\n * with `as` when the semantics differ from the look. Default browser margins are\n * removed. Without a `color` it inherits the surrounding text color, mirroring\n * `Icon` and `Loader`. `uppercase` capitalizes any variant; `truncate` clamps to one line.\n */\nexport const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(\n  {\n    variant = 'body',\n    as,\n    color,\n    align,\n    truncate = false,\n    uppercase = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // `uppercase` the VARIANT is the old name of `overline` (kept as an alias); `uppercase` the PROP is the\n  // plain capitals modifier — so the variant resolves to the `.overline` class, freeing `.uppercase`\n  const resolvedVariant = variant === 'uppercase' ? 'overline' : variant\n  const Component = (as ?? variantElement[resolvedVariant]) as ElementType\n  const resolvedColor = resolveColor(color)\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        styles.typography,\n        styles[resolvedVariant],\n        truncate && styles.truncate,\n        uppercase && styles.uppercase,\n        className,\n      )}\n      style={\n        {\n          ...(resolvedColor && { color: resolvedColor }),\n          ...(align && { textAlign: align }),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n})\n"],"names":["variantElement","resolveColor","color","Typography","forwardRef","variant","as","align","truncate","uppercase","className","style","children","props","ref","resolvedVariant","Component","resolvedColor","jsx","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;GAiCMA,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,WAAW;AACb;AAEA,SAASC,EAAaC,GAA6C;AACjE,MAAKA;AACL,WAAIA,MAAU,SAAe,yBACzBA,MAAU,UAAgB,qCACvB,kBAAkBA,CAAK;AAChC;AA4BO,MAAMC,IAAaC,EAAyC,SACjE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,IAAAC;AAAA,EACA,OAAAJ;AAAA,EACA,OAAAK;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAGA,QAAMC,IAAkBV,MAAY,cAAc,aAAaA,GACzDW,IAAaV,KAAMN,EAAee,CAAe,GACjDE,IAAgBhB,EAAaC,CAAK;AAExC,SACE,gBAAAgB;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWK;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOL,CAAe;AAAA,QACtBP,KAAYY,EAAO;AAAA,QACnBX,KAAaW,EAAO;AAAA,QACpBV;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,GAAIO,KAAiB,EAAE,OAAOA,EAAA;AAAA,QAC9B,GAAIV,KAAS,EAAE,WAAWA,EAAA;AAAA,QAC1B,GAAGI;AAAA,MAAA;AAAA,MAGN,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/UserCard-B-eNyZuT.js

@@ -0,0 +1,78 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { clsx as g } from "clsx";
+import { A as w } from "./Avatar-DXNPg23a.js";
+import { B as U } from "./Button-BLW9yV8W.js";
+import { I as b } from "./Icon-DaTvzLBu.js";
+import { S as m } from "./Skeleton-_-uGax2j.js";
+import { T as d } from "./Typography-CJv5AnRP.js";
+import { a as I } from "./ConfigProvider-B_RSn9bb.js";
+const N = "_card_1fykc_3", T = "_identity_1fykc_16", j = "_text_1fykc_20", A = "_sm_1fykc_33", B = "_lg_1fykc_37", o = {
+  card: N,
+  identity: T,
+  text: j,
+  sm: A,
+  lg: B
+}, J = S(function({
+  name: c,
+  email: a,
+  avatar: l,
+  icon: f = "User",
+  color: u = "primary",
+  size: s = "md",
+  onLogout: i,
+  logoutLabel: y,
+  children: _,
+  loading: r = !1,
+  className: p,
+  style: h,
+  ...v
+}, x) {
+  const n = I(), k = s === "lg" ? "lg" : s === "sm" ? "sm" : "md", C = s === "lg" ? "md" : "sm";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      className: g(o.card, o[s], p),
+      style: h,
+      "aria-busy": r || void 0,
+      ...v,
+      children: [
+        /* @__PURE__ */ e("div", { className: o.identity, children: [
+          /* @__PURE__ */ t(
+            w,
+            {
+              size: k,
+              name: c,
+              src: l,
+              icon: c ? void 0 : f,
+              color: u,
+              loading: r
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: o.text, children: [
+            /* @__PURE__ */ t(d, { variant: "bodySmall", truncate: !0, children: r ? /* @__PURE__ */ t(m, { width: "60%" }) : c ?? n("userCard.welcome") }),
+            (r || a != null) && /* @__PURE__ */ t(d, { variant: "caption", color: "muted", truncate: !0, children: r ? /* @__PURE__ */ t(m, { width: "85%" }) : a })
+          ] })
+        ] }),
+        _,
+        i ? /* @__PURE__ */ t(
+          U,
+          {
+            variant: "filled",
+            color: "error",
+            size: C,
+            fullWidth: !0,
+            startIcon: /* @__PURE__ */ t(b, { name: "Logout2" }),
+            onClick: i,
+            children: y ?? n("userCard.signOut")
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  J as U
+};
+//# sourceMappingURL=UserCard-B-eNyZuT.js.map

package/dist/UserCard-B-eNyZuT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard-B-eNyZuT.js","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 { Skeleton } from '../Skeleton'\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  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\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  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\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. `loading` swaps the avatar + name + email for skeletons. 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    loading = false,\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      aria-busy={loading || undefined}\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          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\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","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":";;;;;;;;;;;;;;;GA+CaA,IAAWC,EAA0C,SAChE;AAAA,EACE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAIC,EAAA,GAEJC,IAAaX,MAAS,OAAO,OAAOA,MAAS,OAAO,OAAO,MAC3DY,IAAaZ,MAAS,OAAO,OAAO;AAE1C,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAKC,EAAO,MAAMA,EAAOf,CAAI,GAAGK,CAAS;AAAA,MACpD,OAAAC;AAAA,MACA,aAAWF,KAAW;AAAA,MACrB,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,UAGrB,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMN;AAAA,cACN,MAAAhB;AAAA,cACA,KAAKE;AAAA,cACL,MAAMF,IAAO,SAAYG;AAAA,cACzB,OAAAC;AAAA,cACA,SAAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAO,MAErB,UAAA;AAAA,YAAA,gBAAAC,EAACE,GAAA,EAAW,SAAQ,aAAY,UAAQ,IACrC,UAAAd,IAAU,gBAAAY,EAACG,GAAA,EAAS,OAAM,MAAA,CAAM,IAAMxB,KAAQc,EAAE,kBAAkB,GACrE;AAAA,aACEL,KAAWR,KAAS,SACpB,gBAAAoB,EAACE,GAAA,EAAW,SAAQ,WAAU,OAAM,SAAQ,UAAQ,IACjD,UAAAd,IAAU,gBAAAY,EAACG,KAAS,OAAM,OAAM,IAAKvB,EAAA,CACxC;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QAECO;AAAA,QAEAF,IACC,gBAAAe;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAMR;AAAA,YACN,WAAS;AAAA,YACT,WAAW,gBAAAI,EAACK,GAAA,EAAK,MAAK,UAAA,CAAU;AAAA,YAChC,SAASpB;AAAA,YAER,UAAAC,KAAeO,EAAE,kBAAkB;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/UserCard-CiQUrZjb.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),q=require("react"),p=require("clsx"),g=require("./Avatar-DrV_F7Ex.cjs"),C=require("./Button-KRGjJdMV.cjs"),S=require("./Icon-BVULqOJD.cjs"),a=require("./Skeleton-DK0lAjS9.cjs"),d=require("./Typography-B6ASPrzT.cjs"),w=require("./ConfigProvider-BElY0HuV.cjs"),T="_card_1fykc_3",U="_identity_1fykc_16",b="_text_1fykc_20",I="_sm_1fykc_33",N="_lg_1fykc_37",s={card:T,identity:U,text:b,sm:I,lg:N},A=q.forwardRef(function({name:c,email:n,avatar:l,icon:u="User",color:y="primary",size:e="md",onLogout:i,logoutLabel:x,children:m,loading:r=!1,className:_,style:f,...h},v){const o=w.useT(),j=e==="lg"?"lg":e==="sm"?"sm":"md",k=e==="lg"?"md":"sm";return t.jsxs("div",{ref:v,className:p.clsx(s.card,s[e],_),style:f,"aria-busy":r||void 0,...h,children:[t.jsxs("div",{className:s.identity,children:[t.jsx(g.Avatar,{size:j,name:c,src:l,icon:c?void 0:u,color:y,loading:r}),t.jsxs("div",{className:s.text,children:[t.jsx(d.Typography,{variant:"bodySmall",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"60%"}):c??o("userCard.welcome")}),(r||n!=null)&&t.jsx(d.Typography,{variant:"caption",color:"muted",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"85%"}):n})]})]}),m,i?t.jsx(C.Button,{variant:"filled",color:"error",size:k,fullWidth:!0,startIcon:t.jsx(S.Icon,{name:"Logout2"}),onClick:i,children:x??o("userCard.signOut")}):null]})});exports.UserCard=A;
+//# sourceMappingURL=UserCard-CiQUrZjb.cjs.map

package/dist/UserCard-CiQUrZjb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard-CiQUrZjb.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 { Skeleton } from '../Skeleton'\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  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\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  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\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. `loading` swaps the avatar + name + email for skeletons. 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    loading = false,\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      aria-busy={loading || undefined}\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          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\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","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":"0bA+CaA,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,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaX,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DY,EAAaZ,IAAS,KAAO,KAAO,KAE1C,OACEa,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOf,CAAI,EAAGK,CAAS,EACpD,MAAAC,EACA,YAAWF,GAAW,OACrB,GAAGG,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAhB,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,EACA,QAAAK,CAAA,CAAA,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KAErB,SAAA,CAAAC,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAd,EAAUY,EAAAA,IAACG,WAAA,CAAS,MAAM,KAAA,CAAM,EAAMxB,GAAQc,EAAE,kBAAkB,EACrE,GACEL,GAAWR,GAAS,OACpBoB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAAd,EAAUY,MAACG,EAAAA,UAAS,MAAM,MAAM,EAAKvB,CAAA,CACxC,CAAA,CAAA,CAEJ,CAAA,EACF,EAECO,EAEAF,EACCe,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMR,EACN,UAAS,GACT,UAAWI,EAAAA,IAACK,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASpB,EAER,SAAAC,GAAeO,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/app/AdminRoot.d.cts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type RootLayoutHeader } from '../components';
+import { type ErrorBoundaryProps, type RootLayoutHeader } from '../components';
 /** The minimal user shape `AdminRoot` reads — apps pass their own richer type via the generic. */
 export interface AdminUser {
     name?: string;
@@ -24,13 +24,20 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
      * unchanged — e.g. **`header.menu`** (`HeaderMenuItem[]`) adds items to the account menu above Sign out.
      */
     header?: RootLayoutHeader;
+    /**
+     * Wrap the page content in an `ErrorBoundary` (reset on navigation), so a crashing page shows an
+     * `ErrorState` inside the shell instead of a white screen. Default `true`; `false` opts out; an object
+     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`).
+     */
+    errorBoundary?: boolean | Omit<ErrorBoundaryProps, 'children' | 'resetKeys'>;
 }
 /**
  * Root-route component for admin apps — it wires up the whole shell orchestration so an app only has to
  * supply `logo` + `getUser` + `onLogout`. Public pages (route id under `authRouteId`) render standalone;
  * everything else renders inside the guarded admin shell (`RootLayout` + a sidebar `UserCard`), gated by
  * `AuthGuard` (signed-out visitors bounce to `loginPath`). Logout clears the session and navigates to
- * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`).
+ * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`),
+ * and wraps the page in an `ErrorBoundary` that resets on navigation (`errorBoundary`, default on).
  *
  * `loginPath` is a plain string, cast loosely to the router's `to` type (the library can't know the
  * app's typed route tree). The generic `<U>` preserves the app's own user type through `getUser`.
@@ -41,4 +48,4 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  *   component: () => <AdminRoot<AuthUser> logo={<Logo />} getUser={getUser} onLogout={logout} />,
  * })
  */
-export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;
+export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;

package/dist/app/AdminRoot.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type RootLayoutHeader } from '../components';
+import { type ErrorBoundaryProps, type RootLayoutHeader } from '../components';
 /** The minimal user shape `AdminRoot` reads — apps pass their own richer type via the generic. */
 export interface AdminUser {
     name?: string;
@@ -24,13 +24,20 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
      * unchanged — e.g. **`header.menu`** (`HeaderMenuItem[]`) adds items to the account menu above Sign out.
      */
     header?: RootLayoutHeader;
+    /**
+     * Wrap the page content in an `ErrorBoundary` (reset on navigation), so a crashing page shows an
+     * `ErrorState` inside the shell instead of a white screen. Default `true`; `false` opts out; an object
+     * configures it (e.g. `{ onError: Sentry.captureException }` or a custom `fallback`).
+     */
+    errorBoundary?: boolean | Omit<ErrorBoundaryProps, 'children' | 'resetKeys'>;
 }
 /**
  * Root-route component for admin apps — it wires up the whole shell orchestration so an app only has to
  * supply `logo` + `getUser` + `onLogout`. Public pages (route id under `authRouteId`) render standalone;
  * everything else renders inside the guarded admin shell (`RootLayout` + a sidebar `UserCard`), gated by
  * `AuthGuard` (signed-out visitors bounce to `loginPath`). Logout clears the session and navigates to
- * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`).
+ * `loginPath`. Mounts exactly one app-wide `<Toaster/>` (the inner `RootLayout` gets `toaster={false}`),
+ * and wraps the page in an `ErrorBoundary` that resets on navigation (`errorBoundary`, default on).
  *
  * `loginPath` is a plain string, cast loosely to the router's `to` type (the library can't know the
  * app's typed route tree). The generic `<U>` preserves the app's own user type through `getUser`.
@@ -41,4 +48,4 @@ export interface AdminRootProps<U extends AdminUser = AdminUser> {
  *   component: () => <AdminRoot<AuthUser> logo={<Logo />} getUser={getUser} onLogout={logout} />,
  * })
  */
-export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;
+export declare const AdminRoot: <U extends AdminUser = AdminUser>({ logo, getUser, onLogout, authRouteId, loginPath, showUserCard, header, errorBoundary, }: AdminRootProps<U>) => import("react/jsx-runtime").JSX.Element;

package/dist/color-CgR8ybWZ.cjs

@@ -0,0 +1,2 @@
+"use strict";const a=e=>Math.min(1,Math.max(0,e));function o(e){let t=e.trim().replace(/^#/,"");return/^[0-9a-fA-F]{3}$/.test(t)&&(t=t.split("").map(n=>n+n).join("")),/^[0-9a-fA-F]{6}$/.test(t)?`#${t.toLowerCase()}`:null}function s(e){const t=(o(e)??"#000000").slice(1);return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}}function c({r:e,g:t,b:n}){const r=i=>Math.round(a(i/255)*255).toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(n)}`}exports.clamp01=a;exports.hexToRgb=s;exports.normalizeHex=o;exports.rgbToHex=c;
+//# sourceMappingURL=color-CgR8ybWZ.cjs.map

package/dist/color-CgR8ybWZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-CgR8ybWZ.cjs","sources":["../src/helpers/color.ts"],"sourcesContent":["/**\n * Shared hex ⇄ rgb parsing — framework-agnostic, no deps. Lives in `helpers/` so both the\n * `ColorPicker` (via `colorUtils.ts`, which re-exports these) and the palette helpers can use the\n * one parser without a helpers→components import.\n */\n\nexport interface RGB {\n  r: number\n  g: number\n  b: number\n}\n\nexport const clamp01 = (n: number): number => Math.min(1, Math.max(0, n))\n\n/** Normalizes any `#rgb`/`#rrggbb` (with or without `#`, any case, trimmed) to a lowercase `#rrggbb`, or `null` if invalid. */\nexport function normalizeHex(input: string): string | null {\n  let h = input.trim().replace(/^#/, '')\n  if (/^[0-9a-fA-F]{3}$/.test(h)) {\n    h = h\n      .split('')\n      .map((c) => c + c)\n      .join('')\n  }\n  return /^[0-9a-fA-F]{6}$/.test(h) ? `#${h.toLowerCase()}` : null\n}\n\n/** True for a complete `#rrggbb` (or `#rgb`) color. */\nexport const isValidHex = (input: string): boolean => normalizeHex(input) !== null\n\nexport function hexToRgb(hex: string): RGB {\n  const h = (normalizeHex(hex) ?? '#000000').slice(1)\n  return {\n    r: parseInt(h.slice(0, 2), 16),\n    g: parseInt(h.slice(2, 4), 16),\n    b: parseInt(h.slice(4, 6), 16),\n  }\n}\n\nexport function rgbToHex({ r, g, b }: RGB): string {\n  const to = (n: number) =>\n    Math.round(clamp01(n / 255) * 255)\n      .toString(16)\n      .padStart(2, '0')\n  return `#${to(r)}${to(g)}${to(b)}`\n}\n"],"names":["clamp01","n","normalizeHex","input","h","c","hexToRgb","hex","rgbToHex","r","g","b","to"],"mappings":"aAYO,MAAMA,EAAWC,GAAsB,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAC,CAAC,EAGjE,SAASC,EAAaC,EAA8B,CACzD,IAAIC,EAAID,EAAM,KAAA,EAAO,QAAQ,KAAM,EAAE,EACrC,MAAI,mBAAmB,KAAKC,CAAC,IAC3BA,EAAIA,EACD,MAAM,EAAE,EACR,IAAKC,GAAMA,EAAIA,CAAC,EAChB,KAAK,EAAE,GAEL,mBAAmB,KAAKD,CAAC,EAAI,IAAIA,EAAE,aAAa,GAAK,IAC9D,CAKO,SAASE,EAASC,EAAkB,CACzC,MAAMH,GAAKF,EAAaK,CAAG,GAAK,WAAW,MAAM,CAAC,EAClD,MAAO,CACL,EAAG,SAASH,EAAE,MAAM,EAAG,CAAC,EAAG,EAAE,EAC7B,EAAG,SAASA,EAAE,MAAM,EAAG,CAAC,EAAG,EAAE,EAC7B,EAAG,SAASA,EAAE,MAAM,EAAG,CAAC,EAAG,EAAE,CAAA,CAEjC,CAEO,SAASI,EAAS,CAAE,EAAAC,EAAG,EAAAC,EAAG,EAAAC,GAAkB,CACjD,MAAMC,EAAMX,GACV,KAAK,MAAMD,EAAQC,EAAI,GAAG,EAAI,GAAG,EAC9B,SAAS,EAAE,EACX,SAAS,EAAG,GAAG,EACpB,MAAO,IAAIW,EAAGH,CAAC,CAAC,GAAGG,EAAGF,CAAC,CAAC,GAAGE,EAAGD,CAAC,CAAC,EAClC"}

package/dist/color-EQJ2DrcQ.js

@@ -0,0 +1,24 @@
+const s = (e) => Math.min(1, Math.max(0, e));
+function o(e) {
+  let t = e.trim().replace(/^#/, "");
+  return /^[0-9a-fA-F]{3}$/.test(t) && (t = t.split("").map((n) => n + n).join("")), /^[0-9a-fA-F]{6}$/.test(t) ? `#${t.toLowerCase()}` : null;
+}
+function i(e) {
+  const t = (o(e) ?? "#000000").slice(1);
+  return {
+    r: parseInt(t.slice(0, 2), 16),
+    g: parseInt(t.slice(2, 4), 16),
+    b: parseInt(t.slice(4, 6), 16)
+  };
+}
+function c({ r: e, g: t, b: n }) {
+  const a = (r) => Math.round(s(r / 255) * 255).toString(16).padStart(2, "0");
+  return `#${a(e)}${a(t)}${a(n)}`;
+}
+export {
+  s as c,
+  i as h,
+  o as n,
+  c as r
+};
+//# sourceMappingURL=color-EQJ2DrcQ.js.map

package/dist/color-EQJ2DrcQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-EQJ2DrcQ.js","sources":["../src/helpers/color.ts"],"sourcesContent":["/**\n * Shared hex ⇄ rgb parsing — framework-agnostic, no deps. Lives in `helpers/` so both the\n * `ColorPicker` (via `colorUtils.ts`, which re-exports these) and the palette helpers can use the\n * one parser without a helpers→components import.\n */\n\nexport interface RGB {\n  r: number\n  g: number\n  b: number\n}\n\nexport const clamp01 = (n: number): number => Math.min(1, Math.max(0, n))\n\n/** Normalizes any `#rgb`/`#rrggbb` (with or without `#`, any case, trimmed) to a lowercase `#rrggbb`, or `null` if invalid. */\nexport function normalizeHex(input: string): string | null {\n  let h = input.trim().replace(/^#/, '')\n  if (/^[0-9a-fA-F]{3}$/.test(h)) {\n    h = h\n      .split('')\n      .map((c) => c + c)\n      .join('')\n  }\n  return /^[0-9a-fA-F]{6}$/.test(h) ? `#${h.toLowerCase()}` : null\n}\n\n/** True for a complete `#rrggbb` (or `#rgb`) color. */\nexport const isValidHex = (input: string): boolean => normalizeHex(input) !== null\n\nexport function hexToRgb(hex: string): RGB {\n  const h = (normalizeHex(hex) ?? '#000000').slice(1)\n  return {\n    r: parseInt(h.slice(0, 2), 16),\n    g: parseInt(h.slice(2, 4), 16),\n    b: parseInt(h.slice(4, 6), 16),\n  }\n}\n\nexport function rgbToHex({ r, g, b }: RGB): string {\n  const to = (n: number) =>\n    Math.round(clamp01(n / 255) * 255)\n      .toString(16)\n      .padStart(2, '0')\n  return `#${to(r)}${to(g)}${to(b)}`\n}\n"],"names":["clamp01","n","normalizeHex","input","h","c","hexToRgb","hex","rgbToHex","r","g","b","to"],"mappings":"AAYO,MAAMA,IAAU,CAACC,MAAsB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGA,CAAC,CAAC;AAGjE,SAASC,EAAaC,GAA8B;AACzD,MAAIC,IAAID,EAAM,KAAA,EAAO,QAAQ,MAAM,EAAE;AACrC,SAAI,mBAAmB,KAAKC,CAAC,MAC3BA,IAAIA,EACD,MAAM,EAAE,EACR,IAAI,CAACC,MAAMA,IAAIA,CAAC,EAChB,KAAK,EAAE,IAEL,mBAAmB,KAAKD,CAAC,IAAI,IAAIA,EAAE,aAAa,KAAK;AAC9D;AAKO,SAASE,EAASC,GAAkB;AACzC,QAAMH,KAAKF,EAAaK,CAAG,KAAK,WAAW,MAAM,CAAC;AAClD,SAAO;AAAA,IACL,GAAG,SAASH,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IAC7B,GAAG,SAASA,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IAC7B,GAAG,SAASA,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,EAAA;AAEjC;AAEO,SAASI,EAAS,EAAE,GAAAC,GAAG,GAAAC,GAAG,GAAAC,KAAkB;AACjD,QAAMC,IAAK,CAACX,MACV,KAAK,MAAMD,EAAQC,IAAI,GAAG,IAAI,GAAG,EAC9B,SAAS,EAAE,EACX,SAAS,GAAG,GAAG;AACpB,SAAO,IAAIW,EAAGH,CAAC,CAAC,GAAGG,EAAGF,CAAC,CAAC,GAAGE,EAAGD,CAAC,CAAC;AAClC;"}

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-udX1ybuC.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-CFm6MU0u.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-DXmzM_rh.js";
+import { A as r, A as t } from "../../Alert-v-lelDih.js";
 export {
   r as Alert,
   t as default

package/dist/components/AuthLayout/index.cjs

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

package/dist/components/AuthLayout/index.js

@@ -1,4 +1,4 @@
-import { A as o, A as u } from "../../AuthLayout-CP9qu6Bv.js";
+import { A as o, A as u } from "../../AuthLayout-DOFYw_z5.js";
 export {
   o as AuthLayout,
   u as default

package/dist/components/Avatar/Avatar.d.cts

@@ -18,11 +18,17 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color
     shape?: AvatarShape;
     /** Theme palette token for the icon/initials background. Defaults to `accent`. */
     color?: ThemeColor;
+    /**
+     * Render a skeleton disc (same size / shape) instead of any content — while the user is still being
+     * fetched. An image avatar also shows the skeleton on its own until the photo has loaded. Defaults to `false`.
+     */
+    loading?: boolean;
 }
 /**
  * A user avatar that shows — in priority order — an image (`src`), an `icon`, explicit `children`
  * (e.g. initials `"D.S."`), initials derived from `name`, or a default user icon. If the image fails
- * to load it falls back automatically. The icon/initials background is tinted by `color` via the
+ * to load it falls back automatically; until it has loaded (and whenever `loading` is set) a `Skeleton`
+ * of the same size / shape stands in. The icon/initials background is tinted by `color` via the
  * shared `--tz-btn-rgb` / `--tz-btn-on` pattern. Token-only styling; pairs with `AvatarGroup`.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Avatar/Avatar.d.ts

@@ -18,11 +18,17 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color
     shape?: AvatarShape;
     /** Theme palette token for the icon/initials background. Defaults to `accent`. */
     color?: ThemeColor;
+    /**
+     * Render a skeleton disc (same size / shape) instead of any content — while the user is still being
+     * fetched. An image avatar also shows the skeleton on its own until the photo has loaded. Defaults to `false`.
+     */
+    loading?: boolean;
 }
 /**
  * A user avatar that shows — in priority order — an image (`src`), an `icon`, explicit `children`
  * (e.g. initials `"D.S."`), initials derived from `name`, or a default user icon. If the image fails
- * to load it falls back automatically. The icon/initials background is tinted by `color` via the
+ * to load it falls back automatically; until it has loaded (and whenever `loading` is set) a `Skeleton`
+ * of the same size / shape stands in. The icon/initials background is tinted by `color` via the
  * shared `--tz-btn-rgb` / `--tz-btn-on` pattern. Token-only styling; pairs with `AvatarGroup`.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Avatar/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../Avatar-Dgf04PBC.cjs"),a=require("../../AvatarGroup-uW0SD5P4.cjs");exports.Avatar=r.Avatar;exports.default=r.Avatar;exports.AvatarGroup=a.AvatarGroup;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../Avatar-DrV_F7Ex.cjs"),a=require("../../AvatarGroup-CHesdo-M.cjs");exports.Avatar=r.Avatar;exports.default=r.Avatar;exports.AvatarGroup=a.AvatarGroup;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.js

@@ -1,5 +1,5 @@
-import { A as o, A as t } from "../../Avatar-Q50J8wdN.js";
-import { A as e } from "../../AvatarGroup-YaNasLMS.js";
+import { A as o, A as t } from "../../Avatar-DXNPg23a.js";
+import { A as e } from "../../AvatarGroup-CwlYqDCI.js";
 export {
   o as Avatar,
   e as AvatarGroup,

package/dist/components/Badge/index.cjs

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

package/dist/components/Badge/index.js

@@ -1,4 +1,4 @@
-import { B, B as d } from "../../Badge-DSWigoGC.js";
+import { B, B as d } from "../../Badge-BmFgusOa.js";
 export {
   B as Badge,
   d 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-CsYTiX2h.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-3wHPNa0P.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-DQHHeLId.js";
+import { B as e, B as s } from "../../Breadcrumbs-Cgd-u3aK.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-CXmDOzPk.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-KRGjJdMV.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-DBs8xnA5.js";
+import { B as o, B } from "../../Button-BLW9yV8W.js";
 export {
   o as Button,
   B as default

package/dist/components/Card/Card.d.cts

@@ -26,6 +26,8 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     defaultCollapsed?: boolean;
     /** Fires with the next collapsed state when the toggle is clicked. */
     onCollapsedChange?: (collapsed: boolean) => void;
+    /** Replace the body with skeleton lines while its data loads (header + footer stay). Defaults to `false`. */
+    loading?: boolean;
     /** Card body. */
     children?: ReactNode;
 }

package/dist/components/Card/Card.d.ts

@@ -26,6 +26,8 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     defaultCollapsed?: boolean;
     /** Fires with the next collapsed state when the toggle is clicked. */
     onCollapsedChange?: (collapsed: boolean) => void;
+    /** Replace the body with skeleton lines while its data loads (header + footer stay). Defaults to `false`. */
+    loading?: boolean;
     /** Card body. */
     children?: ReactNode;
 }

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-DGF22HbS.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-zTkvreQu.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-DYKnWt-L.js";
+import { C, C as d } from "../../Card-6fiSEC0z.js";
 export {
   C as Card,
   d as default

package/dist/components/Checkbox/index.cjs

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

package/dist/components/Checkbox/index.js

@@ -1,4 +1,4 @@
-import { C as o, C } from "../../Checkbox-ZYOSBYRt.js";
+import { C as o, C } from "../../Checkbox-DyKBIgVT.js";
 export {
   o as Checkbox,
   C 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-gUH_7nQc.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-CqOqfafx.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-DdKhcstm.js";
+import { C as e, C as f } from "../../Chip-C-5Z5wsC.js";
 export {
   e as Chip,
   f as default

package/dist/components/ChoiceCard/index.cjs

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

package/dist/components/ChoiceCard/index.js

@@ -1,4 +1,4 @@
-import { C as o, a as r, C as e } from "../../ChoiceCardGroup-DBohUnRj.js";
+import { C as o, a as r, C as e } from "../../ChoiceCardGroup-CEniY_HJ.js";
 export {
   o as ChoiceCard,
   r as ChoiceCardGroup,

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-C6tQtbHU.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-DFiHDZXh.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-DD_d3-sM.js";
+import { C as e, C } from "../../CodeBlock-rPaqO7yD.js";
 export {
   e as CodeBlock,
   C as default

package/dist/components/ColorPicker/ColorPicker.d.cts

@@ -23,6 +23,11 @@ export interface ColorPickerProps {
     onChange?: (color: string) => void;
     /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */
     swatches?: string[];
+    /**
+     * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits
+     * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.
+     */
+    alpha?: boolean;
     /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */
     name?: string;
     /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -23,6 +23,11 @@ export interface ColorPickerProps {
     onChange?: (color: string) => void;
     /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */
     swatches?: string[];
+    /**
+     * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits
+     * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.
+     */
+    alpha?: boolean;
     /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */
     name?: string;
     /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */

package/dist/components/ColorPicker/ColorPickerPanel.d.cts

@@ -9,6 +9,11 @@ export interface ColorPickerPanelProps {
     swatches?: string[];
     /** Show the leading "no color" swatch that clears the value. Defaults to `true`. */
     clearable?: boolean;
+    /**
+     * Offer opacity. Defaults to `true`. `false` hides the alpha rail and pins alpha to `1`, so the
+     * panel only ever emits `#rrggbb` — for values that must be opaque (brand colors).
+     */
+    alpha?: boolean;
 }
 /**
  * The color-picking surface — a saturation/value square, hue + alpha sliders, a color input and
@@ -17,4 +22,4 @@ export interface ColorPickerPanelProps {
  * from `value` only on external changes. Used by `ColorPicker` (the field) and the `RichTextEditor`
  * text-color control. Token-styled except the spectrum gradients + alpha checkerboard (literal colors).
  */
-export declare function ColorPickerPanel({ value, onChange, swatches, clearable, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPickerPanel({ value, onChange, swatches, clearable, alpha: alphaEnabled, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/ColorPickerPanel.d.ts

@@ -9,6 +9,11 @@ export interface ColorPickerPanelProps {
     swatches?: string[];
     /** Show the leading "no color" swatch that clears the value. Defaults to `true`. */
     clearable?: boolean;
+    /**
+     * Offer opacity. Defaults to `true`. `false` hides the alpha rail and pins alpha to `1`, so the
+     * panel only ever emits `#rrggbb` — for values that must be opaque (brand colors).
+     */
+    alpha?: boolean;
 }
 /**
  * The color-picking surface — a saturation/value square, hue + alpha sliders, a color input and
@@ -17,4 +22,4 @@ export interface ColorPickerPanelProps {
  * from `value` only on external changes. Used by `ColorPicker` (the field) and the `RichTextEditor`
  * text-color control. Token-styled except the spectrum gradients + alpha checkerboard (literal colors).
  */
-export declare function ColorPickerPanel({ value, onChange, swatches, clearable, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPickerPanel({ value, onChange, swatches, clearable, alpha: alphaEnabled, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;