@verdify/ui 0.1.0

package/dist/components/agent-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/agent-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,KAAK,sBAAsB,GAC5B,MAAM,wBAAwB,CAAC"}

package/dist/components/agent-badge/index.js

@@ -0,0 +1,11 @@
+import { AgentBadge } from "./agent-badge";
+import {
+  agentBadgeVariants,
+  agentBadgeIconClass
+} from "./agent-badge.variants";
+export {
+  AgentBadge,
+  agentBadgeIconClass,
+  agentBadgeVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/agent-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/agent-badge/index.ts"],"sourcesContent":["export { AgentBadge, type AgentBadgeProps, type AgentBadgeStatus } from \"./agent-badge\";\nexport {\n  agentBadgeVariants,\n  agentBadgeIconClass,\n  type AgentBadgeVariantProps,\n} from \"./agent-badge.variants\";\n"],"mappings":"AAAA,SAAS,kBAA+D;AACxE;AAAA,EACE;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { type AlertVariantProps } from "./alert.variants";
+type AlertVariant = NonNullable<AlertVariantProps["variant"]>;
+type AlertLive = "off" | "polite" | "assertive";
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertVariantProps {
+    /**
+     * The status the alert reports (spec §3): `verified` (a verification succeeded — the in-product
+     * Verified Green status, never the brand and never generic success), `signal` (default — a
+     * neutral, informational heads-up that needs no action), `caution` (something needs attention
+     * but is not yet broken), or `critical` (something failed or blocks progress). The variant sets
+     * the color and the paired icon; it never sets the brand color (brand != state).
+     */
+    variant?: AlertVariant;
+    /**
+     * The live-region politeness when the alert appears or changes dynamically (spec §7).
+     * `"off"` (default) — no live-region role; for a message present from first render that never
+     * changes (plain content with a heading). `"polite"` — `role="status"` for a non-interrupting
+     * update (signal / routine caution / verified). `"assertive"` — `role="alert"` for a critical
+     * (or high-urgency caution) message that must interrupt. Do not put an assertive role on a
+     * non-urgent or statically-rendered message (spec §8).
+     */
+    live?: AlertLive;
+}
+/**
+ * Alert is an inline, in-page message that states the status of a region or task and, where one
+ * exists, what to do next (spec §1). Use it for a result that belongs to the surrounding content
+ * — a form that failed validation, a section that needs attention, a confirmed verified result —
+ * not a transient notification; for a message that floats over the page and dismisses itself use
+ * Toast. An alert holds its place in the layout until the condition it reports changes or the
+ * reader dismisses it.
+ *
+ * It is a feedback surface, not the brand: its color comes from the status it reports, never from
+ * Sovereign Violet — the brand violet is never a status (spec §1/§8, brand != state). The status
+ * is carried by the color AND the fixed per-variant icon AND the text, so it survives for a reader
+ * who cannot perceive color (WCAG 1.4.1).
+ *
+ * It is a message surface, not a control (spec §4/§6): the container is not a tab stop and binds
+ * no keys; the reader reads it in place and tabs to the `AlertActions` and `AlertDismiss` controls
+ * inside it. A blocking critical alert MAY be programmatically focused to move a keyboard reader
+ * to it — pass `tabIndex={-1}` for that move; it is focusable for the move only, never a permanent
+ * tab stop. This file is `'use client'`: the variant travels Root -> `AlertIcon` via React context
+ * (the Dialog/Sheet/Tabs/Accordion precedent), and `React.createContext` / context Providers are
+ * unsupported in React Server Components, so a context-using component must be a Client Component
+ * regardless of whether it holds state or a stateful Radix primitive (`useContext` is itself a hook).
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The required leading status glyph (spec §2). It pairs with the variant color and the message
+ * text so the status is never carried by color alone (1.4.1). Decorative — `aria-hidden`, so it is
+ * not announced twice; the message text carries the status if the icon is dropped. Being
+ * decorative, it takes the BRIGHT variant accent color (tokens 0.6.0) via the AlertContext, at
+ * the sm icon role.
+ */
+export declare const AlertIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The stacking content column (spec §2): wraps the title, body, and actions so they stack
+ * vertically beside the leading icon (the anatomy is inline-start icon, then the content top to
+ * bottom). `min-w-0` lets long body text wrap instead of overflowing the row.
+ */
+export declare const AlertContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The optional title (spec §2): a short heading stating the status as a sentence-case statement,
+ * ending in a period — no all-caps, no exclamation mark. The h3 type role in primary text.
+ * Defaults to a `<div>`; the document outline is the caller's to set where a real heading element
+ * is wanted.
+ */
+export declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The required body (spec §2): the message. It names what happened and, for a caution or critical
+ * alert, what to do next — honest about hard things, never blaming the reader. The body type role
+ * in primary text.
+ */
+export declare const AlertBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The optional actions slot (spec §2): at most one or two controls closing the message — a retry
+ * or a link to the failing step — holding at most one primary action (restraint over volume). The
+ * controls are real focus stops (Buttons / links) with their own tokens.
+ */
+export declare const AlertActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface AlertDismissProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The accessible name for the close control (spec §7). Defaults to `"Dismiss"`. */
+    "aria-label"?: string;
+}
+/**
+ * The optional dismiss control (spec §2/§6/§7): a close button on the inline-end edge, present only
+ * on the dismissible variant. A native `<button type="button">` so it is a real focus stop and
+ * activates on Enter / Space for free; it has an accessible name (default "Dismiss") and a
+ * decorative `aria-hidden` glyph. A neutral ghost surface with the target-size floor and the
+ * persistent focus ring. Dismissing should return focus to the triggering control or the next
+ * focusable element (caller-managed) — never the document body.
+ */
+export declare const AlertDismiss: React.ForwardRefExoticComponent<AlertDismissProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EASL,KAAK,iBAAiB,EACvB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,YAAY,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;AAS9D,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAahD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,iBAAiB;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,mFAqBhB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,+GAYrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,6GAIxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,6GAItB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,6GAIrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,6GAIxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,6FA4BxB,CAAC"}

package/dist/components/alert/alert.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  alertVariants,
+  alertIconVariants,
+  alertContentClass,
+  alertTitleClass,
+  alertBodyClass,
+  alertActionsClass,
+  alertDismissClass,
+  alertDismissGlyphClass
+} from "./alert.variants";
+const LIVE_ROLE = {
+  off: void 0,
+  polite: "status",
+  assertive: "alert"
+};
+const AlertContext = React.createContext({ variant: "signal" });
+const Alert = React.forwardRef(function Alert2({ className, variant = "signal", live = "off", children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(AlertContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: LIVE_ROLE[live],
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children
+    }
+  ) });
+});
+const AlertIcon = React.forwardRef(
+  function AlertIcon2({ className, ...props }, ref) {
+    const { variant } = React.useContext(AlertContext);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(alertIconVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+const AlertContent = React.forwardRef(
+  function AlertContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(alertContentClass, className), ...props });
+  }
+);
+const AlertTitle = React.forwardRef(
+  function AlertTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(alertTitleClass, className), ...props });
+  }
+);
+const AlertBody = React.forwardRef(
+  function AlertBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(alertBodyClass, className), ...props });
+  }
+);
+const AlertActions = React.forwardRef(
+  function AlertActions2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(alertActionsClass, className), ...props });
+  }
+);
+const AlertDismiss = React.forwardRef(
+  function AlertDismiss2({ className, children, "aria-label": ariaLabel = "Dismiss", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": ariaLabel,
+        className: cn(alertDismissClass, className),
+        ...props,
+        children: children ?? // a neutral X glyph drawn with currentColor; decorative — the button carries the name
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-testid": "alert-dismiss-glyph",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            className: alertDismissGlyphClass,
+            children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  Alert,
+  AlertActions,
+  AlertBody,
+  AlertContent,
+  AlertDismiss,
+  AlertIcon,
+  AlertTitle
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  alertVariants,\n  alertIconVariants,\n  alertContentClass,\n  alertTitleClass,\n  alertBodyClass,\n  alertActionsClass,\n  alertDismissClass,\n  alertDismissGlyphClass,\n  type AlertVariantProps,\n} from \"./alert.variants\";\n\ntype AlertVariant = NonNullable<AlertVariantProps[\"variant\"]>;\n\n// The live-region politeness an alert applies when it appears or changes dynamically (spec §7).\n// `\"off\"` (default) is plain content with no live-region role — a message present from first\n// render and never changing is read in place; an assertive role on static content either says\n// nothing (it was already there) or wrongly interrupts. `\"polite\"` → role=\"status\" (an implicit\n// polite live region) for signal / routine caution / verified updates that should not interrupt.\n// `\"assertive\"` → role=\"alert\" (an implicit assertive live region) reserved for a critical (or\n// high-urgency caution) message that genuinely warrants interruption.\ntype AlertLive = \"off\" | \"polite\" | \"assertive\";\n\nconst LIVE_ROLE: Record<AlertLive, \"status\" | \"alert\" | undefined> = {\n  off: undefined,\n  polite: \"status\",\n  assertive: \"alert\",\n};\n\n// The variant set on the Root travels to the AlertIcon via context (the Dialog/Sheet/Tabs/\n// Accordion precedent), so the icon takes the matching status fg without the caller repeating\n// `variant` on AlertIcon.\nconst AlertContext = React.createContext<{ variant: AlertVariant }>({ variant: \"signal\" });\n\nexport interface AlertProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AlertVariantProps {\n  /**\n   * The status the alert reports (spec §3): `verified` (a verification succeeded — the in-product\n   * Verified Green status, never the brand and never generic success), `signal` (default — a\n   * neutral, informational heads-up that needs no action), `caution` (something needs attention\n   * but is not yet broken), or `critical` (something failed or blocks progress). The variant sets\n   * the color and the paired icon; it never sets the brand color (brand != state).\n   */\n  variant?: AlertVariant;\n  /**\n   * The live-region politeness when the alert appears or changes dynamically (spec §7).\n   * `\"off\"` (default) — no live-region role; for a message present from first render that never\n   * changes (plain content with a heading). `\"polite\"` — `role=\"status\"` for a non-interrupting\n   * update (signal / routine caution / verified). `\"assertive\"` — `role=\"alert\"` for a critical\n   * (or high-urgency caution) message that must interrupt. Do not put an assertive role on a\n   * non-urgent or statically-rendered message (spec §8).\n   */\n  live?: AlertLive;\n}\n\n/**\n * Alert is an inline, in-page message that states the status of a region or task and, where one\n * exists, what to do next (spec §1). Use it for a result that belongs to the surrounding content\n * — a form that failed validation, a section that needs attention, a confirmed verified result —\n * not a transient notification; for a message that floats over the page and dismisses itself use\n * Toast. An alert holds its place in the layout until the condition it reports changes or the\n * reader dismisses it.\n *\n * It is a feedback surface, not the brand: its color comes from the status it reports, never from\n * Sovereign Violet — the brand violet is never a status (spec §1/§8, brand != state). The status\n * is carried by the color AND the fixed per-variant icon AND the text, so it survives for a reader\n * who cannot perceive color (WCAG 1.4.1).\n *\n * It is a message surface, not a control (spec §4/§6): the container is not a tab stop and binds\n * no keys; the reader reads it in place and tabs to the `AlertActions` and `AlertDismiss` controls\n * inside it. A blocking critical alert MAY be programmatically focused to move a keyboard reader\n * to it — pass `tabIndex={-1}` for that move; it is focusable for the move only, never a permanent\n * tab stop. This file is `'use client'`: the variant travels Root -> `AlertIcon` via React context\n * (the Dialog/Sheet/Tabs/Accordion precedent), and `React.createContext` / context Providers are\n * unsupported in React Server Components, so a context-using component must be a Client Component\n * regardless of whether it holds state or a stateful Radix primitive (`useContext` is itself a hook).\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { className, variant = \"signal\", live = \"off\", children, ...props },\n  ref,\n) {\n  return (\n    <AlertContext.Provider value={{ variant }}>\n      {/* The live-region role is chosen by `live` (spec §7): none for static content,\n          role=\"status\" (polite) for non-interrupting updates, role=\"alert\" (assertive) for a\n          critical interruption. NOT a tab stop by default — the caller passes tabIndex only for\n          the programmatic-focus move to a blocking error. Hover/pressed/disabled never apply to\n          the container (spec §4). */}\n      <div\n        ref={ref}\n        role={LIVE_ROLE[live]}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </AlertContext.Provider>\n  );\n});\n\n/**\n * The required leading status glyph (spec §2). It pairs with the variant color and the message\n * text so the status is never carried by color alone (1.4.1). Decorative — `aria-hidden`, so it is\n * not announced twice; the message text carries the status if the icon is dropped. Being\n * decorative, it takes the BRIGHT variant accent color (tokens 0.6.0) via the AlertContext, at\n * the sm icon role.\n */\nexport const AlertIcon = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  function AlertIcon({ className, ...props }, ref) {\n    const { variant } = React.useContext(AlertContext);\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(alertIconVariants({ variant }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\n/**\n * The stacking content column (spec §2): wraps the title, body, and actions so they stack\n * vertically beside the leading icon (the anatomy is inline-start icon, then the content top to\n * bottom). `min-w-0` lets long body text wrap instead of overflowing the row.\n */\nexport const AlertContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function AlertContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(alertContentClass, className)} {...props} />;\n  },\n);\n\n/**\n * The optional title (spec §2): a short heading stating the status as a sentence-case statement,\n * ending in a period — no all-caps, no exclamation mark. The h3 type role in primary text.\n * Defaults to a `<div>`; the document outline is the caller's to set where a real heading element\n * is wanted.\n */\nexport const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function AlertTitle({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(alertTitleClass, className)} {...props} />;\n  },\n);\n\n/**\n * The required body (spec §2): the message. It names what happened and, for a caution or critical\n * alert, what to do next — honest about hard things, never blaming the reader. The body type role\n * in primary text.\n */\nexport const AlertBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function AlertBody({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(alertBodyClass, className)} {...props} />;\n  },\n);\n\n/**\n * The optional actions slot (spec §2): at most one or two controls closing the message — a retry\n * or a link to the failing step — holding at most one primary action (restraint over volume). The\n * controls are real focus stops (Buttons / links) with their own tokens.\n */\nexport const AlertActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function AlertActions({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(alertActionsClass, className)} {...props} />;\n  },\n);\n\nexport interface AlertDismissProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The accessible name for the close control (spec §7). Defaults to `\"Dismiss\"`. */\n  \"aria-label\"?: string;\n}\n\n/**\n * The optional dismiss control (spec §2/§6/§7): a close button on the inline-end edge, present only\n * on the dismissible variant. A native `<button type=\"button\">` so it is a real focus stop and\n * activates on Enter / Space for free; it has an accessible name (default \"Dismiss\") and a\n * decorative `aria-hidden` glyph. A neutral ghost surface with the target-size floor and the\n * persistent focus ring. Dismissing should return focus to the triggering control or the next\n * focusable element (caller-managed) — never the document body.\n */\nexport const AlertDismiss = React.forwardRef<HTMLButtonElement, AlertDismissProps>(\n  function AlertDismiss({ className, children, \"aria-label\": ariaLabel = \"Dismiss\", ...props }, ref) {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={cn(alertDismissClass, className)}\n        {...props}\n      >\n        {children ?? (\n          // a neutral X glyph drawn with currentColor; decorative — the button carries the name\n          <svg\n            data-testid=\"alert-dismiss-glyph\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            className={alertDismissGlyphClass}\n          >\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n"],"mappings":";AA6FM;AA3FN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAaP,MAAM,YAA+D;AAAA,EACnE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,WAAW;AACb;AAKA,MAAM,eAAe,MAAM,cAAyC,EAAE,SAAS,SAAS,CAAC;AA8ClF,MAAM,QAAQ,MAAM,WAAuC,SAASA,OACzE,EAAE,WAAW,UAAU,UAAU,OAAO,OAAO,UAAU,GAAG,MAAM,GAClE,KACA;AACA,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,QAAQ,GAMtC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,UAAU,IAAI;AAAA,MACpB,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AASM,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/C,UAAM,EAAE,QAAQ,IAAI,MAAM,WAAW,YAAY;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,QACtD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAOO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EAChF;AACF;AAQO,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC9E;AACF;AAOO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/C,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC7E;AACF;AAOO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EAChF;AACF;AAgBO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,UAAU,cAAc,YAAY,WAAW,GAAG,MAAM,GAAG,KAAK;AACjG,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAW,GAAG,mBAAmB,SAAS;AAAA,QACzC,GAAG;AAAA,QAEH;AAAA,QAEC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,eAAY;AAAA,YACZ,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAa;AAAA,YACb,eAAc;AAAA,YACd,WAAW;AAAA,YAEX,8BAAC,UAAK,GAAE,wBAAuB;AAAA;AAAA,QACjC;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;","names":["Alert","AlertIcon","AlertContent","AlertTitle","AlertBody","AlertActions","AlertDismiss"]}

package/dist/components/alert/alert.variants.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const alertVariants: (props?: ({
+    variant?: "verified" | "signal" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const alertIconVariants: (props?: ({
+    variant?: "verified" | "signal" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const alertContentClass = "flex min-w-0 flex-1 flex-col gap-(--space-2)";
+export declare const alertTitleClass = "text-h3 text-text-primary";
+export declare const alertBodyClass = "text-body text-text-primary";
+export declare const alertActionsClass = "flex items-center gap-(--space-2) mt-(--space-1)";
+export declare const alertDismissClass: string;
+export declare const alertDismissGlyphClass = "h-(--size-icon-sm) w-(--size-icon-sm)";
+export type AlertVariantProps = VariantProps<typeof alertVariants>;
+//# sourceMappingURL=alert.variants.d.ts.map

package/dist/components/alert/alert.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.variants.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAoBlE,eAAO,MAAM,aAAa;;8EA4CzB,CAAC;AAQF,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAIH,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAKhF,eAAO,MAAM,eAAe,8BAA8B,CAAC;AAM3D,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAM5D,eAAO,MAAM,iBAAiB,qDAAqD,CAAC;AAUpF,eAAO,MAAM,iBAAiB,QAOmE,CAAC;AAKlG,eAAO,MAAM,sBAAsB,0CAA0C,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/alert/alert.variants.js

@@ -0,0 +1,74 @@
+import { cva } from "class-variance-authority";
+const alertVariants = cva(
+  [
+    // layout: the bordered container is a row — leading status icon, then the stacked
+    // title/body/actions content; logical-property gap so it mirrors under dir="rtl" (G-U6)
+    "flex items-start gap-(--space-2)",
+    // the bordered container: internal padding off the edge, the md corner radius, a 1px edge
+    "rounded-(--radius-md) border p-(--space-3)",
+    // logical-property text alignment so the alert mirrors under dir="rtl" (G-U6)
+    "text-start",
+    // appearance + dismiss motion: the FAST functional duration on verdify easing, collapsing to
+    // the instant endpoint under reduced motion (spec §5). Even a `verified` alert fades in on
+    // the fast duration — the 350ms VerifiedBadge-only theatre is NEVER borrowed by an alert
+    // appearing (G-U3 motion-theatre gate).
+    "transition-[opacity,transform] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // FOCUS: the container takes focus only when programmatically focused to move a reader to a
+    // blocking error (spec §4/§6/§7). It is NOT a tab stop by default (no tabIndex set in tsx);
+    // the caller passes tabIndex={-1} for that move. When it is focused it shows the visible 2px
+    // ring at a 2px offset, and the ring is never removed (2.4.7).
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      // STRUCTURAL axis = spec §3: the status the alert reports. The four map one-to-one to the
+      // --color-status-* trios; there is no neutral or brand-colored alert. Each trio tints the
+      // surface (-bg = the one neutral raised surface) and edges it (-border); the decorative
+      // leading icon takes the matching -accent (the readable title/body keep their AA text
+      // tokens). NONE binds --color-action-* (brand != state, spec §3/§8).
+      variant: {
+        // a verification succeeded / a claim is proven — the in-product Verified Green status,
+        // NEVER the brand and NEVER generic success (spec §3/§8)
+        verified: "bg-status-verified-bg border-status-verified-border",
+        // neutral, informational, needs no action — the lowest-urgency variant (spec §3)
+        signal: "bg-status-signal-bg border-status-signal-border",
+        // needs attention but not yet broken — a soft limit, a pending step (spec §3)
+        caution: "bg-status-caution-bg border-status-caution-border",
+        // something failed or blocks progress — a rejected proof, a failed validation (spec §3)
+        critical: "bg-status-critical-bg border-status-critical-border"
+      }
+    },
+    // the lowest-urgency status is the default; a louder status is spent only when warranted
+    defaultVariants: { variant: "signal" }
+  }
+);
+const alertIconVariants = cva("inline-flex shrink-0 h-(--size-icon-sm) w-(--size-icon-sm)", {
+  variants: {
+    variant: {
+      verified: "text-status-verified-accent",
+      signal: "text-status-signal-accent",
+      caution: "text-status-caution-accent",
+      critical: "text-status-critical-accent"
+    }
+  },
+  defaultVariants: { variant: "signal" }
+});
+const alertContentClass = "flex min-w-0 flex-1 flex-col gap-(--space-2)";
+const alertTitleClass = "text-h3 text-text-primary";
+const alertBodyClass = "text-body text-text-primary";
+const alertActionsClass = "flex items-center gap-(--space-2) mt-(--space-1)";
+const alertDismissClass = "inline-flex shrink-0 items-center justify-center rounded-(--radius-md) text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) min-w-(--size-target-mobile) sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const alertDismissGlyphClass = "h-(--size-icon-sm) w-(--size-icon-sm)";
+export {
+  alertActionsClass,
+  alertBodyClass,
+  alertContentClass,
+  alertDismissClass,
+  alertDismissGlyphClass,
+  alertIconVariants,
+  alertTitleClass,
+  alertVariants
+};
+//# sourceMappingURL=alert.variants.js.map

package/dist/components/alert/alert.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert/alert.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An Alert is an inline, in-page feedback surface — a message that reports the status of a\n// region or task and, where one exists, what to do next (spec §1). It is NOT the brand: its\n// color comes from the status it reports, never from Sovereign Violet, so this file binds\n// nothing from the --color-action-* tier (brand != state, G-U2). This is the ONLY token-binding\n// site (skill §5 hard rule).\n//\n// The alert is a message surface, not a control (spec §4): the container has no hover, pressed,\n// loading, or disabled state — those belong to the controls inside it (the actions and the\n// dismiss button, which carry their own tokens). The container's only own state is FOCUS, shown\n// only when it is programmatically focused to move a reader to a blocking error; the focus ring\n// is in the base and is never removed (spec §4/§7).\n//\n// Container fill (spec §3/§5): every variant paints the SAME one neutral raised surface — the\n// status trio's `-bg` resolves to that surface — so the status color is a quiet TINT and EDGE,\n// not a flood. The meaning is carried by the border (the status -border) and the decorative\n// leading icon (the BRIGHT status accent, tokens 0.6.0), never a saturated fill; restraint over\n// volume. Status is paired with the fixed per-variant icon and the readable title/body text so it\n// survives for a reader who cannot perceive color (WCAG 1.4.1, spec §8).\nexport const alertVariants = cva(\n  [\n    // layout: the bordered container is a row — leading status icon, then the stacked\n    // title/body/actions content; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-2)\",\n    // the bordered container: internal padding off the edge, the md corner radius, a 1px edge\n    \"rounded-(--radius-md) border p-(--space-3)\",\n    // logical-property text alignment so the alert mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // appearance + dismiss motion: the FAST functional duration on verdify easing, collapsing to\n    // the instant endpoint under reduced motion (spec §5). Even a `verified` alert fades in on\n    // the fast duration — the 350ms VerifiedBadge-only theatre is NEVER borrowed by an alert\n    // appearing (G-U3 motion-theatre gate).\n    \"transition-[opacity,transform] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // FOCUS: the container takes focus only when programmatically focused to move a reader to a\n    // blocking error (spec §4/§6/§7). It is NOT a tab stop by default (no tabIndex set in tsx);\n    // the caller passes tabIndex={-1} for that move. When it is focused it shows the visible 2px\n    // ring at a 2px offset, and the ring is never removed (2.4.7).\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the status the alert reports. The four map one-to-one to the\n      // --color-status-* trios; there is no neutral or brand-colored alert. Each trio tints the\n      // surface (-bg = the one neutral raised surface) and edges it (-border); the decorative\n      // leading icon takes the matching -accent (the readable title/body keep their AA text\n      // tokens). NONE binds --color-action-* (brand != state, spec §3/§8).\n      variant: {\n        // a verification succeeded / a claim is proven — the in-product Verified Green status,\n        // NEVER the brand and NEVER generic success (spec §3/§8)\n        verified: \"bg-status-verified-bg border-status-verified-border\",\n        // neutral, informational, needs no action — the lowest-urgency variant (spec §3)\n        signal: \"bg-status-signal-bg border-status-signal-border\",\n        // needs attention but not yet broken — a soft limit, a pending step (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border\",\n        // something failed or blocks progress — a rejected proof, a failed validation (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder status is spent only when warranted\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The leading status glyph (spec §2/§5): one fixed per-variant icon at the sm icon role. It\n// pairs with the color AND the text so status is never carried by color alone (1.4.1). Because\n// the glyph is DECORATIVE (aria-hidden in tsx) and the message TITLE/body text carries the\n// status meaning, the icon is exempt from the AA text floor and takes the BRIGHT variant ACCENT\n// via the matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an\n// emphasis mark on the quiet surface, while the readable title/body keep their AA text tokens.\nexport const alertIconVariants = cva(\"inline-flex shrink-0 h-(--size-icon-sm) w-(--size-icon-sm)\", {\n  variants: {\n    variant: {\n      verified: \"text-status-verified-accent\",\n      signal: \"text-status-signal-accent\",\n      caution: \"text-status-caution-accent\",\n      critical: \"text-status-critical-accent\",\n    },\n  },\n  defaultVariants: { variant: \"signal\" },\n});\n\n// The stacked content column (spec §2): title, body, then actions, at the small stacked gap.\n// min-w-0 lets long body text wrap instead of overflowing the row.\nexport const alertContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The title (spec §2/§5): a short heading stating the status as a sentence-case statement, in\n// the h3 type role + primary text color. The type role already avoids label tracking — no\n// all-caps, no exclamation mark. Brand violet never paints the title.\nexport const alertTitleClass = \"text-h3 text-text-primary\";\n\n// The body (spec §2/§5): the message, in the body type role + primary text color. It names what\n// happened and, for a caution or critical alert, what to do next — honest about hard things,\n// never blaming the reader (spec §1/§8). Supporting/secondary lines use --color-text-secondary\n// (text-text-secondary) where the caller needs them.\nexport const alertBodyClass = \"text-body text-text-primary\";\n\n// The actions slot (spec §2): at most one or two controls closing the message (a retry, a link\n// to the failing step), holding at most one primary action (restraint over volume). The controls\n// are Buttons — the alert does not restate their --color-action-* bindings. Logical-property row\n// with the small gap; a little top margin separates it from the body.\nexport const alertActionsClass = \"flex items-center gap-(--space-2) mt-(--space-1)\";\n\n// The dismiss control (spec §2/§6/§7): a close button on the inline-end edge, present only on the\n// dismissible variant. A NEUTRAL ghost surface — the glyph in --color-action-ghost-fg at rest,\n// the restrained ghost hover fill (no bg/border at rest) — so the close affordance is neutral and\n// never competes with the status. It is a real focus stop with the target-size floor (44px touch\n// / 40px pointer, spec §7 / DEC-B; the height EMERGES from the floor, never fixed below it), the\n// persistent focus ring, and the fast functional hover motion + verdify easing, instant under\n// reduced motion (G-U3). The ghost fg/hover is the control's OWN action treatment, not the\n// alert's status (the brand != state gate scopes status keys to the container variant only).\nexport const alertDismissClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) \" +\n  \"text-action-ghost-fg hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) min-w-(--size-target-mobile) \" +\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The dismiss glyph (spec §7): a neutral X at the sm icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the\n// accessible name.\nexport const alertDismissGlyphClass = \"h-(--size-icon-sm) w-(--size-icon-sm)\";\n\nexport type AlertVariantProps = VariantProps<typeof alertVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAoBhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,SAAS;AAAA;AAAA;AAAA,QAGP,UAAU;AAAA;AAAA,QAEV,QAAQ;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,UAAU;AAAA,MACZ;AAAA,IACF;AAAA;AAAA,IAEA,iBAAiB,EAAE,SAAS,SAAS;AAAA,EACvC;AACF;AAQO,MAAM,oBAAoB,IAAI,8DAA8D;AAAA,EACjG,UAAU;AAAA,IACR,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,SAAS;AACvC,CAAC;AAIM,MAAM,oBAAoB;AAK1B,MAAM,kBAAkB;AAMxB,MAAM,iBAAiB;AAMvB,MAAM,oBAAoB;AAU1B,MAAM,oBACX;AAWK,MAAM,yBAAyB;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Alert, AlertIcon, AlertContent, AlertTitle, AlertBody, AlertActions, AlertDismiss, type AlertProps, type AlertDismissProps, } from "./alert";
+export { alertVariants, alertIconVariants, alertContentClass, alertTitleClass, alertBodyClass, alertActionsClass, alertDismissClass, alertDismissGlyphClass, type AlertVariantProps, } from "./alert.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,iBAAiB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/components/alert/index.js

@@ -0,0 +1,37 @@
+import {
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertBody,
+  AlertActions,
+  AlertDismiss
+} from "./alert";
+import {
+  alertVariants,
+  alertIconVariants,
+  alertContentClass,
+  alertTitleClass,
+  alertBodyClass,
+  alertActionsClass,
+  alertDismissClass,
+  alertDismissGlyphClass
+} from "./alert.variants";
+export {
+  Alert,
+  AlertActions,
+  AlertBody,
+  AlertContent,
+  AlertDismiss,
+  AlertIcon,
+  AlertTitle,
+  alertActionsClass,
+  alertBodyClass,
+  alertContentClass,
+  alertDismissClass,
+  alertDismissGlyphClass,
+  alertIconVariants,
+  alertTitleClass,
+  alertVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert/index.ts"],"sourcesContent":["export {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertTitle,\n  AlertBody,\n  AlertActions,\n  AlertDismiss,\n  type AlertProps,\n  type AlertDismissProps,\n} from \"./alert\";\nexport {\n  alertVariants,\n  alertIconVariants,\n  alertContentClass,\n  alertTitleClass,\n  alertBodyClass,\n  alertActionsClass,\n  alertDismissClass,\n  alertDismissGlyphClass,\n  type AlertVariantProps,\n} from \"./alert.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { type AvatarVariantProps } from "./avatar.variants";
+/** The shape of the Avatar container (spec §3). Defaults to `circle`. */
+export type AvatarShape = NonNullable<AvatarVariantProps["shape"]>;
+/** The size of the Avatar (spec §3). Defaults to `md`. */
+export type AvatarSize = NonNullable<AvatarVariantProps["size"]>;
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role">, Pick<AvatarVariantProps, "shape" | "size" | "bordered"> {
+    /**
+     * The picture for the identity (spec §2). When it loads it is cropped to the Avatar
+     * shape; while it is fetching a Skeleton shows in the Avatar's shape; if it is missing
+     * or fails to load the `fallback` shows instead. The image is never the only signal of
+     * who the identity is — the accessible name always carries it (spec §7).
+     */
+    src?: string;
+    /**
+     * The text alternative that NAMES the identity (spec §7) — for example the display
+     * name. It is the Avatar's accessible name, carried by the container so it reaches the
+     * accessibility tree as text whether the picture or the fallback is showing (1.1.1 /
+     * 1.3.1). Required for an informative Avatar; ignored when `decorative` is set.
+     */
+    alt: string;
+    /**
+     * The display name the fallback initials are derived from (spec §2/§4) — one or two
+     * characters, never invented. Omit when no name is available and a neutral generic
+     * glyph is shown instead. Initials are never guessed from an identifier that is not a
+     * name (spec §4/§8).
+     */
+    name?: string;
+    /**
+     * Mark the Avatar decorative when the same name is already shown as adjacent text
+     * (spec §7/§8), so a screen reader does not announce the identity twice. The container
+     * is `aria-hidden` and carries no name; everything inside it is decorative too.
+     */
+    decorative?: boolean;
+}
+/**
+ * An Avatar is a small, NON-INTERACTIVE image that stands in for an identity — a person
+ * or an AI agent — in lists, headers, tables, and comment threads (spec §1). Its one job
+ * is recognition. When there is no picture it falls back to initials, then to a neutral
+ * generic glyph, so the identity is always placed.
+ *
+ * An Avatar PICTURES an identity; it never reports a credential or a verification result.
+ * A photo, a ring, or a colored fill says nothing about whether the identity is verified —
+ * identity is not credentials, so the Avatar keeps the two apart and binds nothing from
+ * the status or action tier (brand != state, spec §1/§8). The verified status is carried
+ * by the VerifiedBadge molecule placed BESIDE the Avatar as an external sibling adornment,
+ * never by the Avatar itself; the Avatar only reserves the position (spec §2/§8).
+ *
+ * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a tab
+ * stop, and renders no focus ring or target-size floor. An Avatar that must be clickable —
+ * to open a profile or a menu — is not a new variant: wrap it in a Button or link that
+ * owns the interaction, its keyboard model, and its focus ring; the Avatar stays a passive
+ * image and is marked `decorative` inside the wrapper (spec §3/§6).
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;AACnE,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC;AAEjE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,EACzD,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IACzD;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAiCD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,qFAsElB,CAAC"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import { Skeleton } from "../skeleton";
+import {
+  avatarVariants,
+  avatarFallbackClass,
+  avatarImageClass,
+  avatarGlyphClass
+} from "./avatar.variants";
+function initialsFromName(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts.at(-1).charAt(0)).toUpperCase();
+}
+function GenericGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-testid": "avatar-glyph",
+      className: avatarGlyphClass,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M20 21a8 8 0 0 0-16 0" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+      ]
+    }
+  );
+}
+const Avatar = React.forwardRef(
+  function Avatar2({ className, shape, size, bordered, src, alt, name, decorative, ...props }, ref) {
+    const [status, setStatus] = React.useState(
+      "idle"
+    );
+    const isLoading = src !== void 0 && (status === "idle" || status === "loading");
+    const initials = name ? initialsFromName(name) : "";
+    const identity = decorative ? { "aria-hidden": true } : { role: "img", "aria-label": alt };
+    return /* @__PURE__ */ jsxs(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(avatarVariants({ shape, size, bordered }), className),
+        ...identity,
+        ...props,
+        children: [
+          src !== void 0 ? (
+            // the picture: rendered by Radix only once it has loaded, cropped to the shape.
+            // it is decorative — the container's accessible name already carries the
+            // identity, so the picture is not announced as a second name (spec §7).
+            /* @__PURE__ */ jsx(
+              AvatarPrimitive.Image,
+              {
+                src,
+                alt: "",
+                "aria-hidden": "true",
+                className: avatarImageClass,
+                onLoadingStatusChange: setStatus
+              }
+            )
+          ) : null,
+          isLoading ? (
+            // LOADING (spec §4): a Skeleton in the Avatar's shape while the image is fetched.
+            // It is decorative (the Skeleton itself is aria-hidden); the picture or the
+            // fallback replaces it on resolve.
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant: "circle",
+                "data-testid": "avatar-skeleton",
+                className: "absolute inset-0 rounded-[inherit]"
+              }
+            )
+          ) : (
+            // FALLBACK (spec §2/§4): the resting state for an identity without a picture, and
+            // the state the image fails into. The initials (or a neutral generic glyph) are
+            // DECORATIVE — the fallback letters are not exposed as their own text; the
+            // container's accessible name carries the identity, so a screen reader hears the
+            // name, not the letters (spec §7). Neutral surface + secondary text only — never a
+            // status color and never the brand (spec §3/§5/§8, brand != state).
+            /* @__PURE__ */ jsx(
+              AvatarPrimitive.Fallback,
+              {
+                "data-testid": "avatar-fallback",
+                "aria-hidden": "true",
+                className: avatarFallbackClass,
+                children: initials ? initials : /* @__PURE__ */ jsx(GenericGlyph, {})
+              }
+            )
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Avatar
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { Skeleton } from \"../skeleton\";\nimport {\n  avatarVariants,\n  avatarFallbackClass,\n  avatarImageClass,\n  avatarGlyphClass,\n  type AvatarVariantProps,\n} from \"./avatar.variants\";\n\n/** The shape of the Avatar container (spec §3). Defaults to `circle`. */\nexport type AvatarShape = NonNullable<AvatarVariantProps[\"shape\"]>;\n/** The size of the Avatar (spec §3). Defaults to `md`. */\nexport type AvatarSize = NonNullable<AvatarVariantProps[\"size\"]>;\n\nexport interface AvatarProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"role\">,\n    Pick<AvatarVariantProps, \"shape\" | \"size\" | \"bordered\"> {\n  /**\n   * The picture for the identity (spec §2). When it loads it is cropped to the Avatar\n   * shape; while it is fetching a Skeleton shows in the Avatar's shape; if it is missing\n   * or fails to load the `fallback` shows instead. The image is never the only signal of\n   * who the identity is — the accessible name always carries it (spec §7).\n   */\n  src?: string;\n  /**\n   * The text alternative that NAMES the identity (spec §7) — for example the display\n   * name. It is the Avatar's accessible name, carried by the container so it reaches the\n   * accessibility tree as text whether the picture or the fallback is showing (1.1.1 /\n   * 1.3.1). Required for an informative Avatar; ignored when `decorative` is set.\n   */\n  alt: string;\n  /**\n   * The display name the fallback initials are derived from (spec §2/§4) — one or two\n   * characters, never invented. Omit when no name is available and a neutral generic\n   * glyph is shown instead. Initials are never guessed from an identifier that is not a\n   * name (spec §4/§8).\n   */\n  name?: string;\n  /**\n   * Mark the Avatar decorative when the same name is already shown as adjacent text\n   * (spec §7/§8), so a screen reader does not announce the identity twice. The container\n   * is `aria-hidden` and carries no name; everything inside it is decorative too.\n   */\n  decorative?: boolean;\n}\n\n/** Derive one or two uppercase initials from a display name — never invented (spec §2/§4). */\nfunction initialsFromName(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"\";\n  if (parts.length === 1) return parts[0]!.charAt(0).toUpperCase();\n  return (parts[0]!.charAt(0) + parts.at(-1)!.charAt(0)).toUpperCase();\n}\n\n/**\n * A neutral generic glyph shown when no name is available to derive initials from\n * (spec §2/§4/§5). Decorative — the container's accessible name carries the identity.\n */\nfunction GenericGlyph() {\n  return (\n    <svg\n      data-testid=\"avatar-glyph\"\n      className={avatarGlyphClass}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M20 21a8 8 0 0 0-16 0\" />\n      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n    </svg>\n  );\n}\n\n/**\n * An Avatar is a small, NON-INTERACTIVE image that stands in for an identity — a person\n * or an AI agent — in lists, headers, tables, and comment threads (spec §1). Its one job\n * is recognition. When there is no picture it falls back to initials, then to a neutral\n * generic glyph, so the identity is always placed.\n *\n * An Avatar PICTURES an identity; it never reports a credential or a verification result.\n * A photo, a ring, or a colored fill says nothing about whether the identity is verified —\n * identity is not credentials, so the Avatar keeps the two apart and binds nothing from\n * the status or action tier (brand != state, spec §1/§8). The verified status is carried\n * by the VerifiedBadge molecule placed BESIDE the Avatar as an external sibling adornment,\n * never by the Avatar itself; the Avatar only reserves the position (spec §2/§8).\n *\n * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a tab\n * stop, and renders no focus ring or target-size floor. An Avatar that must be clickable —\n * to open a profile or a menu — is not a new variant: wrap it in a Button or link that\n * owns the interaction, its keyboard model, and its focus ring; the Avatar stays a passive\n * image and is marked `decorative` inside the wrapper (spec §3/§6).\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(\n    { className, shape, size, bordered, src, alt, name, decorative, ...props },\n    ref,\n  ) {\n    // Track the image load status so the LOADING state shows a Skeleton in the Avatar's\n    // shape rather than a flash of empty container or guessed initials (spec §4). Radix\n    // drives idle -> loading -> loaded/error; the initials/glyph fallback is the resting\n    // state for any identity without a picture (a normal presentation, not an error).\n    const [status, setStatus] = React.useState<\"idle\" | \"loading\" | \"loaded\" | \"error\">(\n      \"idle\",\n    );\n    const isLoading = src !== undefined && (status === \"idle\" || status === \"loading\");\n    const initials = name ? initialsFromName(name) : \"\";\n\n    // The container is the single carrier of the accessible name (spec §7): role=\"img\"\n    // + the alt names the identity in EVERY state (picture, loading, or fallback). When\n    // decorative, the same name is shown beside it, so the container is aria-hidden and\n    // everything inside is decorative — the identity is not announced twice.\n    const identity = decorative\n      ? { \"aria-hidden\": true as const }\n      : { role: \"img\", \"aria-label\": alt };\n\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ shape, size, bordered }), className)}\n        {...identity}\n        {...props}\n      >\n        {src !== undefined ? (\n          // the picture: rendered by Radix only once it has loaded, cropped to the shape.\n          // it is decorative — the container's accessible name already carries the\n          // identity, so the picture is not announced as a second name (spec §7).\n          <AvatarPrimitive.Image\n            src={src}\n            alt=\"\"\n            aria-hidden=\"true\"\n            className={avatarImageClass}\n            onLoadingStatusChange={setStatus}\n          />\n        ) : null}\n\n        {isLoading ? (\n          // LOADING (spec §4): a Skeleton in the Avatar's shape while the image is fetched.\n          // It is decorative (the Skeleton itself is aria-hidden); the picture or the\n          // fallback replaces it on resolve.\n          <Skeleton\n            variant=\"circle\"\n            data-testid=\"avatar-skeleton\"\n            className=\"absolute inset-0 rounded-[inherit]\"\n          />\n        ) : (\n          // FALLBACK (spec §2/§4): the resting state for an identity without a picture, and\n          // the state the image fails into. The initials (or a neutral generic glyph) are\n          // DECORATIVE — the fallback letters are not exposed as their own text; the\n          // container's accessible name carries the identity, so a screen reader hears the\n          // name, not the letters (spec §7). Neutral surface + secondary text only — never a\n          // status color and never the brand (spec §3/§5/§8, brand != state).\n          <AvatarPrimitive.Fallback\n            data-testid=\"avatar-fallback\"\n            aria-hidden=\"true\"\n            className={avatarFallbackClass}\n          >\n            {initials ? initials : <GenericGlyph />}\n          </AvatarPrimitive.Fallback>\n        )}\n      </AvatarPrimitive.Root>\n    );\n  },\n);\n"],"mappings":";AAgEI,SAWE,KAXF;AA/DJ,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAwCP,SAAS,iBAAiB,MAAsB;AAC9C,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,MAAI,MAAM,WAAW,EAAG,QAAO,MAAM,CAAC,EAAG,OAAO,CAAC,EAAE,YAAY;AAC/D,UAAQ,MAAM,CAAC,EAAG,OAAO,CAAC,IAAI,MAAM,GAAG,EAAE,EAAG,OAAO,CAAC,GAAG,YAAY;AACrE;AAMA,SAAS,eAAe;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ;AAAA,4BAAC,UAAK,GAAE,yBAAwB;AAAA,QAChC,oBAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI;AAAA;AAAA;AAAA,EAC/B;AAEJ;AAqBO,MAAM,SAAS,MAAM;AAAA,EAC1B,SAASA,QACP,EAAE,WAAW,OAAO,MAAM,UAAU,KAAK,KAAK,MAAM,YAAY,GAAG,MAAM,GACzE,KACA;AAKA,UAAM,CAAC,QAAQ,SAAS,IAAI,MAAM;AAAA,MAChC;AAAA,IACF;AACA,UAAM,YAAY,QAAQ,WAAc,WAAW,UAAU,WAAW;AACxE,UAAM,WAAW,OAAO,iBAAiB,IAAI,IAAI;AAMjD,UAAM,WAAW,aACb,EAAE,eAAe,KAAc,IAC/B,EAAE,MAAM,OAAO,cAAc,IAAI;AAErC,WACE;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,OAAO,MAAM,SAAS,CAAC,GAAG,SAAS;AAAA,QACjE,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,kBAAQ;AAAA;AAAA;AAAA;AAAA,YAIP;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,KAAI;AAAA,gBACJ,eAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,uBAAuB;AAAA;AAAA,YACzB;AAAA,cACE;AAAA,UAEH;AAAA;AAAA;AAAA;AAAA,YAIC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,eAAY;AAAA,gBACZ,WAAU;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQA;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC,eAAY;AAAA,gBACZ,eAAY;AAAA,gBACZ,WAAW;AAAA,gBAEV,qBAAW,WAAW,oBAAC,gBAAa;AAAA;AAAA,YACvC;AAAA;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;","names":["Avatar"]}

package/dist/components/avatar/avatar.variants.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const avatarVariants: (props?: ({
+    shape?: "rounded" | "circle" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarFallbackClass: string;
+export declare const avatarImageClass = "h-full w-full object-cover";
+export declare const avatarGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+//# sourceMappingURL=avatar.variants.d.ts.map