@verdify/ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.variants.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAclE,eAAO,MAAM,cAAc;;;;8EAoC1B,CAAC;AAOF,eAAO,MAAM,mBAAmB,QAE4C,CAAC;AAG7E,eAAO,MAAM,gBAAgB,+BAA+B,CAAC;AAI7D,eAAO,MAAM,gBAAgB,0CAA0C,CAAC;AAExE,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/avatar/avatar.variants.js

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+const avatarVariants = cva(
+  [
+    // shape / layout: a self-contained unit that clips the image or holds the fallback,
+    // centered, never shrinking in a flex row (spec §2)
+    "relative inline-flex shrink-0 items-center justify-center overflow-hidden",
+    // global-first: select-none keeps the decorative initials from being grabbed as text
+    "select-none"
+  ],
+  {
+    variants: {
+      // STRUCTURAL axis = spec §3: shape, not meaning.
+      shape: {
+        // circle (default): the standard identity Avatar — full radius (spec §3/§5)
+        circle: "rounded-(--radius-full)",
+        // rounded: a square-with-soft-corners Avatar for an organization or non-person
+        // entity, where a circle would read as a person — the md radius (spec §3/§5)
+        rounded: "rounded-(--radius-md)"
+      },
+      // STRUCTURAL axis = spec §3: size. Tokens expose no avatar width scale, so the
+      // footprint is a square sized by the type scale (DEC-B: density above the floor,
+      // never a fixed control height); sm/md/lg differ by footprint + initials size.
+      size: {
+        sm: "h-(--space-7) w-(--space-7)",
+        md: "h-(--space-9) w-(--space-9)",
+        lg: "h-(--space-12) w-(--space-12)"
+      },
+      // optional subtle border separating the Avatar from a same-colored surface
+      // (spec §2/§5). The muted border role meets the 3:1 non-text-contrast bar (1.4.11),
+      // so the edge is visible without relying on color (spec §7).
+      bordered: {
+        true: "border border-surface-border-muted",
+        false: ""
+      }
+    },
+    defaultVariants: { shape: "circle", size: "md", bordered: false }
+  }
+);
+const avatarFallbackClass = "absolute inset-0 flex items-center justify-center bg-surface-raised text-text-secondary text-caption font-medium uppercase";
+const avatarImageClass = "h-full w-full object-cover";
+const avatarGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export {
+  avatarFallbackClass,
+  avatarGlyphClass,
+  avatarImageClass,
+  avatarVariants
+};
+//# sourceMappingURL=avatar.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/avatar.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An Avatar is a small, NON-INTERACTIVE image standing in for an identity — a person\n// or an AI agent (spec §1). It is NOT a control: no focus ring, no target-size floor,\n// no state transition of its own (spec §4/§5/§6). Its variants are about size and\n// shape, never meaning — an Avatar carries no status, so it has no status variant\n// (spec §3).\n//\n// Neutrals carry the surface here. The fallback fill is the neutral raised surface and\n// the initials/glyph are the secondary text role; the optional container border is the\n// muted border role. An Avatar binds NOTHING from the status tier and NOTHING from the\n// action tier — it reports no state and carries no brand, so it can never be read as a\n// verification signal (brand != state; identity is not credentials, spec §1/§3/§8). The\n// verified status is the VerifiedBadge adornment placed beside it, never painted here.\nexport const avatarVariants = cva(\n  [\n    // shape / layout: a self-contained unit that clips the image or holds the fallback,\n    // centered, never shrinking in a flex row (spec §2)\n    \"relative inline-flex shrink-0 items-center justify-center overflow-hidden\",\n    // global-first: select-none keeps the decorative initials from being grabbed as text\n    \"select-none\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: shape, not meaning.\n      shape: {\n        // circle (default): the standard identity Avatar — full radius (spec §3/§5)\n        circle: \"rounded-(--radius-full)\",\n        // rounded: a square-with-soft-corners Avatar for an organization or non-person\n        // entity, where a circle would read as a person — the md radius (spec §3/§5)\n        rounded: \"rounded-(--radius-md)\",\n      },\n      // STRUCTURAL axis = spec §3: size. Tokens expose no avatar width scale, so the\n      // footprint is a square sized by the type scale (DEC-B: density above the floor,\n      // never a fixed control height); sm/md/lg differ by footprint + initials size.\n      size: {\n        sm: \"h-(--space-7) w-(--space-7)\",\n        md: \"h-(--space-9) w-(--space-9)\",\n        lg: \"h-(--space-12) w-(--space-12)\",\n      },\n      // optional subtle border separating the Avatar from a same-colored surface\n      // (spec §2/§5). The muted border role meets the 3:1 non-text-contrast bar (1.4.11),\n      // so the edge is visible without relying on color (spec §7).\n      bordered: {\n        true: \"border border-surface-border-muted\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { shape: \"circle\", size: \"md\", bordered: false },\n  },\n);\n\n// The fallback (spec §2/§4): what shows when there is no image, or the image failed to\n// load — the identity's initials, or a neutral generic glyph when no name is available.\n// It is a placeholder for a missing picture, NOT a status or a category: a neutral raised\n// surface fill behind secondary-text initials/glyph, NEVER a status color and NEVER the\n// brand (spec §2/§3/§5/§8). It fills the container shape and inherits its clip.\nexport const avatarFallbackClass =\n  \"absolute inset-0 flex items-center justify-center \" +\n  \"bg-surface-raised text-text-secondary text-caption font-medium uppercase\";\n\n// The rendered picture (spec §2): fills the container and is cropped to its shape.\nexport const avatarImageClass = \"h-full w-full object-cover\";\n\n// The generic fallback glyph when no name is available (spec §5): sized at the md icon\n// role, decorative, in the same secondary text role as the initials.\nexport const avatarGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type AvatarVariantProps = VariantProps<typeof avatarVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAchC,MAAM,iBAAiB;AAAA,EAC5B;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,OAAO;AAAA;AAAA,QAEL,QAAQ;AAAA;AAAA;AAAA,QAGR,SAAS;AAAA,MACX;AAAA;AAAA;AAAA;AAAA,MAIA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,MAIA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,OAAO,UAAU,MAAM,MAAM,UAAU,MAAM;AAAA,EAClE;AACF;AAOO,MAAM,sBACX;AAIK,MAAM,mBAAmB;AAIzB,MAAM,mBAAmB;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize } from "./avatar";
+export { avatarVariants, avatarFallbackClass, avatarImageClass, avatarGlyphClass, type AvatarVariantProps, } from "./avatar.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvF,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,15 @@
+import { Avatar } from "./avatar";
+import {
+  avatarVariants,
+  avatarFallbackClass,
+  avatarImageClass,
+  avatarGlyphClass
+} from "./avatar.variants";
+export {
+  Avatar,
+  avatarFallbackClass,
+  avatarGlyphClass,
+  avatarImageClass,
+  avatarVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/avatar/index.ts"],"sourcesContent":["export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize } from \"./avatar\";\nexport {\n  avatarVariants,\n  avatarFallbackClass,\n  avatarImageClass,\n  avatarGlyphClass,\n  type AvatarVariantProps,\n} from \"./avatar.variants\";\n"],"mappings":"AAAA,SAAS,cAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type BadgeVariantProps } from "./badge.variants";
+/** The status a Badge can report (spec §3). Omit for the default `neutral` Badge. */
+export type BadgeStatus = Exclude<NonNullable<BadgeVariantProps["variant"]>, "neutral">;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The state the Badge reports (spec §3). Omit for the default `neutral` Badge —
+     * a plain category, tag, or count with no state meaning. A status color is spent
+     * only when the Badge reports a real state. The brand color is never a Badge
+     * variant; for a first-class verified result use the VerifiedBadge molecule.
+     */
+    status?: BadgeStatus;
+    /**
+     * One small leading glyph that reinforces the label (spec §2). Decorative and
+     * `aria-hidden` — the label still carries the meaning if the icon is dropped, so
+     * the meaning never rests on color (or icon) alone.
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A small, non-interactive inline label that classifies or counts the thing it
+ * sits on — a category, a count, or a status (spec §1). It carries meaning, not
+ * action: it never receives focus and does nothing when clicked. A Badge is
+ * `neutral` by default and reaches for a status color only when it reports a real
+ * state, because brand and status colors are accents and neutrals carry the
+ * surface. A Badge that reports the in-product verified result is the
+ * VerifiedBadge molecule, not a hand-colored Badge.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAiC,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEzF,qFAAqF;AACrF,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAExF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE;;;;;OAKG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,oFAgCjB,CAAC"}

package/dist/components/badge/badge.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import { badgeVariants, badgeIconClass } from "./badge.variants";
+const Badge = React.forwardRef(
+  function Badge2({ className, status, icon, children, "aria-label": ariaLabel, ...props }, ref) {
+    const variant = status ?? "neutral";
+    const iconOnly = children == null && ariaLabel != null;
+    return (
+      // native <span>: inline text in a styled container. No tabIndex, no focus ring — a
+      // Badge is a label, not a control (spec §6/§7). role="img" only on the icon-only marker,
+      // so the aria-label naming the state is valid and announced.
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref,
+          className: cn(badgeVariants({ variant }), className),
+          role: iconOnly ? "img" : void 0,
+          "aria-label": ariaLabel,
+          ...props,
+          children: [
+            icon ? /* @__PURE__ */ jsx("span", { "data-testid": "badge-icon", className: badgeIconClass, "aria-hidden": "true", children: icon }) : null,
+            children
+          ]
+        }
+      )
+    );
+  }
+);
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { badgeVariants, badgeIconClass, type BadgeVariantProps } from \"./badge.variants\";\n\n/** The status a Badge can report (spec §3). Omit for the default `neutral` Badge. */\nexport type BadgeStatus = Exclude<NonNullable<BadgeVariantProps[\"variant\"]>, \"neutral\">;\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The state the Badge reports (spec §3). Omit for the default `neutral` Badge —\n   * a plain category, tag, or count with no state meaning. A status color is spent\n   * only when the Badge reports a real state. The brand color is never a Badge\n   * variant; for a first-class verified result use the VerifiedBadge molecule.\n   */\n  status?: BadgeStatus;\n  /**\n   * One small leading glyph that reinforces the label (spec §2). Decorative and\n   * `aria-hidden` — the label still carries the meaning if the icon is dropped, so\n   * the meaning never rests on color (or icon) alone.\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * A small, non-interactive inline label that classifies or counts the thing it\n * sits on — a category, a count, or a status (spec §1). It carries meaning, not\n * action: it never receives focus and does nothing when clicked. A Badge is\n * `neutral` by default and reaches for a status color only when it reports a real\n * state, because brand and status colors are accents and neutrals carry the\n * surface. A Badge that reports the in-product verified result is the\n * VerifiedBadge molecule, not a hand-colored Badge.\n */\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge({ className, status, icon, children, \"aria-label\": ariaLabel, ...props }, ref) {\n    const variant = status ?? \"neutral\";\n    // The label text MUST reach the accessibility tree (spec §7): when there is a visible\n    // word, that text is the accessible name and no role is needed (the spec default). When\n    // the Badge is shown icon-and-color only — no visible word — the meaning can only be\n    // carried by the caller's aria-label, but `aria-label` on a roleless <span> is prohibited\n    // by ARIA (aria-prohibited-attr) and would be silently dropped, leaving the state unnamed\n    // and resting on color alone — exactly what spec §1/§8 forbids. So give the icon-only\n    // marker role=\"img\" (a graphical element with a text alternative, the same pattern Avatar\n    // and AgentBadge use) to make the name valid and announced.\n    const iconOnly = children == null && ariaLabel != null;\n    return (\n      // native <span>: inline text in a styled container. No tabIndex, no focus ring — a\n      // Badge is a label, not a control (spec §6/§7). role=\"img\" only on the icon-only marker,\n      // so the aria-label naming the state is valid and announced.\n      <span\n        ref={ref}\n        className={cn(badgeVariants({ variant }), className)}\n        role={iconOnly ? \"img\" : undefined}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        {icon ? (\n          <span data-testid=\"badge-icon\" className={badgeIconClass} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : null}\n        {children}\n      </span>\n    );\n  },\n);\n"],"mappings":"AAgDM,SAQI,KARJ;AAhDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe,sBAA8C;AA8B/D,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,WAAW,QAAQ,MAAM,UAAU,cAAc,WAAW,GAAG,MAAM,GAAG,KAAK;AAC5F,UAAM,UAAU,UAAU;AAS1B,UAAM,WAAW,YAAY,QAAQ,aAAa;AAClD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,UACnD,MAAM,WAAW,QAAQ;AAAA,UACzB,cAAY;AAAA,UACX,GAAG;AAAA,UAEH;AAAA,mBACC,oBAAC,UAAK,eAAY,cAAa,WAAW,gBAAgB,eAAY,QACnE,gBACH,IACE;AAAA,YACH;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ;AACF;","names":["Badge"]}

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

@@ -0,0 +1,7 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "verified" | "signal" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const badgeIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0";
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+//# sourceMappingURL=badge.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.variants.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAelE,eAAO,MAAM,aAAa;;8EAyBzB,CAAC;AAKF,eAAO,MAAM,cAAc,+DAA+D,CAAC;AAE3F,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/badge/badge.variants.js

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+const badgeVariants = cva(
+  [
+    // shape / layout: a pill holding the optional icon + label at the small gap
+    "inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)",
+    // type ROLE — caption (spec §5); meaning never rests on color alone, so the
+    // label text always reads on its own
+    "text-caption font-medium",
+    // global-first: never wrap, isolate so a monospace count stays LTR in RTL text
+    "whitespace-nowrap"
+  ],
+  {
+    variants: {
+      // STRUCTURAL axis = spec §3 (the meaning the Badge carries)
+      variant: {
+        // neutral: a plain category/tag/count — neutral surface, text, border roles
+        neutral: "bg-surface-raised border-surface-border-muted text-text-secondary",
+        // status: the matching --color-status-* trio; bg is the neutral surface
+        verified: "bg-status-verified-bg border-status-verified-border text-status-verified-fg",
+        signal: "bg-status-signal-bg border-status-signal-border text-status-signal-fg",
+        caution: "bg-status-caution-bg border-status-caution-border text-status-caution-fg",
+        critical: "bg-status-critical-bg border-status-critical-border text-status-critical-fg"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+const badgeIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0";
+export {
+  badgeIconClass,
+  badgeVariants
+};
+//# sourceMappingURL=badge.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/badge.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Badge is a small, non-interactive inline label (spec §1). It is a pill that\n// holds a label and an optional decorative icon — NOT a control: no focus ring,\n// no target-size floor, no state transition (spec §4/§5/§6).\n//\n// `variant` is the meaning the Badge carries (spec §3). `neutral` is the default\n// — restraint over volume; a status color is spent only when the Badge reports a\n// real state. The brand color (Sovereign Violet) is NEVER a Badge variant: the\n// brand is not a status, so the Badge family binds nothing from the action tier.\n//\n// Container fill: every variant — neutral AND each status — paints the SAME one\n// raised surface. The status trio's `-bg` resolves to that same surface, so the\n// meaning is carried by the fg (label + icon) and the border, never a saturated\n// fill (brand != state; color lives in fg/border, spec §3/§5).\nexport const badgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); meaning never rests on color alone, so the\n    // label text always reads on its own\n    \"text-caption font-medium\",\n    // global-first: never wrap, isolate so a monospace count stays LTR in RTL text\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the meaning the Badge carries)\n      variant: {\n        // neutral: a plain category/tag/count — neutral surface, text, border roles\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // status: the matching --color-status-* trio; bg is the neutral surface\n        verified: \"bg-status-verified-bg border-status-verified-border text-status-verified-fg\",\n        signal: \"bg-status-signal-bg border-status-signal-border text-status-signal-fg\",\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role. It inherits the variant fg via `currentColor`; the label still carries\n// the meaning if the icon is dropped.\nexport const badgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAehC,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA;AAAA,QAEP,SAAS;AAAA;AAAA,QAET,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAKO,MAAM,iBAAiB;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Badge, type BadgeProps, type BadgeStatus } from "./badge";
+export { badgeVariants, badgeIconClass, type BadgeVariantProps } from "./badge.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,8 @@
+import { Badge } from "./badge";
+import { badgeVariants, badgeIconClass } from "./badge.variants";
+export {
+  Badge,
+  badgeIconClass,
+  badgeVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["export { Badge, type BadgeProps, type BadgeStatus } from \"./badge\";\nexport { badgeVariants, badgeIconClass, type BadgeVariantProps } from \"./badge.variants\";\n"],"mappings":"AAAA,SAAS,aAAgD;AACzD,SAAS,eAAe,sBAA8C;","names":[]}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,90 @@
+import * as React from "react";
+export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
+    /**
+     * The landmark's accessible name (spec §7). Defaults to `"Breadcrumb"` so the trail is
+     * distinguishable from other `navigation` landmarks on the page. Override it (or point
+     * `aria-labelledby` at a visible label) when the app names its trails differently.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A Breadcrumb shows where the current page sits in the hierarchy and lets you step back up it
+ * (spec §1). It is the `navigation` landmark wrapping an ordered trail of links from a root to
+ * the current page. It is NOT primary navigation and NOT a wizard's step indicator — reach for
+ * a Sidebar or Tabs when the choices are siblings rather than ancestors.
+ *
+ * The trail is structural wayfinding in neutral text (spec §3): it never carries the brand
+ * violet or a status color, because a crumb reports a location in the hierarchy, not a
+ * verification result. Coloring a crumb with a status hue would break brand != state.
+ *
+ * It is render-only (no hook / no stateful Radix primitive), so it needs no `'use client'`.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+export type BreadcrumbListProps = React.ComponentPropsWithoutRef<"ol">;
+/**
+ * The trail's ordered list (spec §2): order is the meaning here, root -> current, so it is an
+ * `<ol>`, not a loose group. Holds the alternating `BreadcrumbItem` / `BreadcrumbSeparator`
+ * sequence.
+ */
+export declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+export type BreadcrumbItemProps = React.ComponentPropsWithoutRef<"li">;
+/**
+ * One ancestor in the trail (spec §2): a `<li>` holding either a `BreadcrumbLink` (an ancestor
+ * you can return to) or the `BreadcrumbPage` (the current page).
+ */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
+    /**
+     * Project the link styling onto a caller-supplied anchor (a framework router `<Link>` rendered
+     * as an `<a>`) via Radix Slot, instead of the default native `<a>` (spec §2). Slot runs
+     * `React.Children.only` — pass exactly one anchor child.
+     */
+    asChild?: boolean;
+    /**
+     * The ancestor cannot be returned to in the current context (spec §4, rare). The item dims via
+     * the disabled TOKEN (DEC-C), is removed from the tab order, and drops its `href` so it cannot
+     * navigate — while its label stays readable to assistive technology. Do not disable the
+     * current page; it is already non-interactive by being the current page.
+     */
+    disabled?: boolean;
+}
+/**
+ * A link to an ancestor (spec §2/§4). A native `<a>` so it exposes the link role and is operable
+ * without extra wiring; it gets the visible focus ring, the restrained ghost hover fill, and the
+ * target-size floor. Use `asChild` to project the styling onto a router anchor.
+ */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export type BreadcrumbPageProps = React.ComponentPropsWithoutRef<"span">;
+/**
+ * The current page (spec §2/§4): the last item, plain text in the primary color carrying
+ * `aria-current="page"`. It is NOT a link and is non-interactive — no focus ring, no
+ * target-size floor, not focusable — so a screen-reader user is never told the page they are on
+ * is somewhere to go.
+ */
+export declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<"li"> {
+    /** The separator glyph (spec §2). Defaults to a chevron; pass a slash or other glyph to override. */
+    children?: React.ReactNode;
+}
+/**
+ * The glyph between two items (spec §2/§4): decoration only, in the muted text color. It carries
+ * `aria-hidden` and `role="presentation"` so it is removed from the accessibility tree — the
+ * trail does not read as "Home slash Billing slash Invoice". It is a list item structurally but
+ * is not announced as one.
+ */
+export declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+export type BreadcrumbEllipsisProps = React.ComponentPropsWithoutRef<"span">;
+/**
+ * The overflow indicator for the collapsed variant (spec §2): an ellipsis standing in for the
+ * middle of a long trail when the path is too long for its container.
+ *
+ * It renders here as a DECORATIVE, non-interactive glyph in the muted text color. The spec's
+ * interactive overflow (a Menu button that reveals the hidden ancestors and opens them in a Menu,
+ * spec §2/§6/§7) is intentionally NOT wired here: the library has no Menu / Popover primitive
+ * yet, and the build order places Navigation overlays after this trail. Once a Menu primitive
+ * lands, this slot becomes the Menu trigger (a `button` with `aria-haspopup="menu"` and
+ * `aria-expanded`). Until then, render the collapsed middle as this decorative indicator and keep
+ * the root and current page visible alongside it.
+ */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC5E;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,qFAarB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,cAAc,2KAI1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,cAAc,kKAI1B,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,+FAgB1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,sKAY1B,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IACpF,qGAAqG;IACrG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,gGAe/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAE7E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,sKAc9B,CAAC"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  breadcrumbNavClass,
+  breadcrumbListClass,
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+  breadcrumbEllipsisClass
+} from "./breadcrumb.variants";
+const Breadcrumb = React.forwardRef(function Breadcrumb2({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) {
+  return (
+    // the navigation landmark, named so a screen reader can jump to the breadcrumb directly
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn(breadcrumbNavClass, className),
+        ...props
+      }
+    )
+  );
+});
+const BreadcrumbList = React.forwardRef(
+  function BreadcrumbList2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("ol", { ref, className: cn(breadcrumbListClass, className), ...props });
+  }
+);
+const BreadcrumbItem = React.forwardRef(
+  function BreadcrumbItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, className: cn(breadcrumbItemClass, className), ...props });
+  }
+);
+const BreadcrumbLink = React.forwardRef(
+  function BreadcrumbLink2({ className, asChild = false, disabled = false, href, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        href: disabled ? void 0 : href,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : void 0,
+        className: cn(breadcrumbLinkClass(), className),
+        ...props
+      }
+    );
+  }
+);
+const BreadcrumbPage = React.forwardRef(
+  function BreadcrumbPage2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        className: cn(breadcrumbPageClass, className),
+        ...props
+      }
+    );
+  }
+);
+const BreadcrumbSeparator = React.forwardRef(
+  function BreadcrumbSeparator2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-testid": "breadcrumb-separator",
+        className: cn(breadcrumbSeparatorClass, className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(ChevronGlyph, {})
+      }
+    );
+  }
+);
+const BreadcrumbEllipsis = React.forwardRef(
+  function BreadcrumbEllipsis2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-testid": "breadcrumb-ellipsis",
+        className: cn(breadcrumbEllipsisClass, className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(EllipsisGlyph, {})
+      }
+    );
+  }
+);
+function ChevronGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" })
+    }
+  );
+}
+function EllipsisGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "3", cy: "8", r: "1.25" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1.25" }),
+        /* @__PURE__ */ jsx("circle", { cx: "13", cy: "8", r: "1.25" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  breadcrumbNavClass,\n  breadcrumbListClass,\n  breadcrumbItemClass,\n  breadcrumbLinkClass,\n  breadcrumbPageClass,\n  breadcrumbSeparatorClass,\n  breadcrumbEllipsisClass,\n} from \"./breadcrumb.variants\";\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<\"nav\"> {\n  /**\n   * The landmark's accessible name (spec §7). Defaults to `\"Breadcrumb\"` so the trail is\n   * distinguishable from other `navigation` landmarks on the page. Override it (or point\n   * `aria-labelledby` at a visible label) when the app names its trails differently.\n   */\n  \"aria-label\"?: string;\n}\n\n/**\n * A Breadcrumb shows where the current page sits in the hierarchy and lets you step back up it\n * (spec §1). It is the `navigation` landmark wrapping an ordered trail of links from a root to\n * the current page. It is NOT primary navigation and NOT a wizard's step indicator — reach for\n * a Sidebar or Tabs when the choices are siblings rather than ancestors.\n *\n * The trail is structural wayfinding in neutral text (spec §3): it never carries the brand\n * violet or a status color, because a crumb reports a location in the hierarchy, not a\n * verification result. Coloring a crumb with a status hue would break brand != state.\n *\n * It is render-only (no hook / no stateful Radix primitive), so it needs no `'use client'`.\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n  { className, \"aria-label\": ariaLabel = \"Breadcrumb\", ...props },\n  ref,\n) {\n  return (\n    // the navigation landmark, named so a screen reader can jump to the breadcrumb directly\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cn(breadcrumbNavClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport type BreadcrumbListProps = React.ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * The trail's ordered list (spec §2): order is the meaning here, root -> current, so it is an\n * `<ol>`, not a loose group. Holds the alternating `BreadcrumbItem` / `BreadcrumbSeparator`\n * sequence.\n */\nexport const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  function BreadcrumbList({ className, ...props }, ref) {\n    return <ol ref={ref} className={cn(breadcrumbListClass, className)} {...props} />;\n  },\n);\n\nexport type BreadcrumbItemProps = React.ComponentPropsWithoutRef<\"li\">;\n\n/**\n * One ancestor in the trail (spec §2): a `<li>` holding either a `BreadcrumbLink` (an ancestor\n * you can return to) or the `BreadcrumbPage` (the current page).\n */\nexport const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  function BreadcrumbItem({ className, ...props }, ref) {\n    return <li ref={ref} className={cn(breadcrumbItemClass, className)} {...props} />;\n  },\n);\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Project the link styling onto a caller-supplied anchor (a framework router `<Link>` rendered\n   * as an `<a>`) via Radix Slot, instead of the default native `<a>` (spec §2). Slot runs\n   * `React.Children.only` — pass exactly one anchor child.\n   */\n  asChild?: boolean;\n  /**\n   * The ancestor cannot be returned to in the current context (spec §4, rare). The item dims via\n   * the disabled TOKEN (DEC-C), is removed from the tab order, and drops its `href` so it cannot\n   * navigate — while its label stays readable to assistive technology. Do not disable the\n   * current page; it is already non-interactive by being the current page.\n   */\n  disabled?: boolean;\n}\n\n/**\n * A link to an ancestor (spec §2/§4). A native `<a>` so it exposes the link role and is operable\n * without extra wiring; it gets the visible focus ring, the restrained ghost hover fill, and the\n * target-size floor. Use `asChild` to project the styling onto a router anchor.\n */\nexport const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  function BreadcrumbLink({ className, asChild = false, disabled = false, href, ...props }, ref) {\n    const Comp = asChild ? Slot.Root : \"a\";\n    return (\n      <Comp\n        ref={ref}\n        // a disabled ancestor drops its href (cannot navigate), leaves the tab order, and is\n        // marked aria-disabled so AT still reads its label (spec §4/§7)\n        href={disabled ? undefined : href}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : undefined}\n        className={cn(breadcrumbLinkClass(), className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport type BreadcrumbPageProps = React.ComponentPropsWithoutRef<\"span\">;\n\n/**\n * The current page (spec §2/§4): the last item, plain text in the primary color carrying\n * `aria-current=\"page\"`. It is NOT a link and is non-interactive — no focus ring, no\n * target-size floor, not focusable — so a screen-reader user is never told the page they are on\n * is somewhere to go.\n */\nexport const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  function BreadcrumbPage({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        // the only item with aria-current; plain text, not a link (spec §7)\n        aria-current=\"page\"\n        className={cn(breadcrumbPageClass, className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<\"li\"> {\n  /** The separator glyph (spec §2). Defaults to a chevron; pass a slash or other glyph to override. */\n  children?: React.ReactNode;\n}\n\n/**\n * The glyph between two items (spec §2/§4): decoration only, in the muted text color. It carries\n * `aria-hidden` and `role=\"presentation\"` so it is removed from the accessibility tree — the\n * trail does not read as \"Home slash Billing slash Invoice\". It is a list item structurally but\n * is not announced as one.\n */\nexport const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  function BreadcrumbSeparator({ className, children, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        data-testid=\"breadcrumb-separator\"\n        className={cn(breadcrumbSeparatorClass, className)}\n        {...props}\n      >\n        {children ?? <ChevronGlyph />}\n      </li>\n    );\n  },\n);\n\nexport type BreadcrumbEllipsisProps = React.ComponentPropsWithoutRef<\"span\">;\n\n/**\n * The overflow indicator for the collapsed variant (spec §2): an ellipsis standing in for the\n * middle of a long trail when the path is too long for its container.\n *\n * It renders here as a DECORATIVE, non-interactive glyph in the muted text color. The spec's\n * interactive overflow (a Menu button that reveals the hidden ancestors and opens them in a Menu,\n * spec §2/§6/§7) is intentionally NOT wired here: the library has no Menu / Popover primitive\n * yet, and the build order places Navigation overlays after this trail. Once a Menu primitive\n * lands, this slot becomes the Menu trigger (a `button` with `aria-haspopup=\"menu\"` and\n * `aria-expanded`). Until then, render the collapsed middle as this decorative indicator and keep\n * the root and current page visible alongside it.\n */\nexport const BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n  function BreadcrumbEllipsis({ className, children, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        data-testid=\"breadcrumb-ellipsis\"\n        className={cn(breadcrumbEllipsisClass, className)}\n        {...props}\n      >\n        {children ?? <EllipsisGlyph />}\n      </span>\n    );\n  },\n);\n\n/** The default separator glyph — a chevron pointing in the reading direction. Decorative. */\nfunction ChevronGlyph() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M6 4l4 4-4 4\" />\n    </svg>\n  );\n}\n\n/** The default overflow glyph — three dots. Decorative. */\nfunction EllipsisGlyph() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <circle cx=\"3\" cy=\"8\" r=\"1.25\" />\n      <circle cx=\"8\" cy=\"8\" r=\"1.25\" />\n      <circle cx=\"13\" cy=\"8\" r=\"1.25\" />\n    </svg>\n  );\n}\n"],"mappings":"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","names":["Breadcrumb","BreadcrumbList","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbEllipsis"]}

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

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const breadcrumbNavClass = "bg-surface-canvas py-(--space-2)";
+export declare const breadcrumbListClass = "flex flex-wrap items-center gap-(--space-1) text-caption";
+export declare const breadcrumbItemClass = "inline-flex items-center gap-(--space-1)";
+export declare const breadcrumbLinkClass: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const breadcrumbPageClass = "inline-flex items-center gap-(--space-1) px-(--space-1) text-caption text-text-primary";
+export declare const breadcrumbSeparatorClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+export declare const breadcrumbEllipsisClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+export type BreadcrumbLinkVariantProps = VariantProps<typeof breadcrumbLinkClass>;
+//# sourceMappingURL=breadcrumb.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.variants.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,eAAO,MAAM,kBAAkB,qCAAqC,CAAC;AAIrE,eAAO,MAAM,mBAAmB,6DAC4B,CAAC;AAG7D,eAAO,MAAM,mBAAmB,6CAA6C,CAAC;AAS9E,eAAO,MAAM,mBAAmB,2FAuB/B,CAAC;AAKF,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAK3F,eAAO,MAAM,wBAAwB,2GACqE,CAAC;AAM3G,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAE3G,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/breadcrumb/breadcrumb.variants.js

@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+const breadcrumbNavClass = "bg-surface-canvas py-(--space-2)";
+const breadcrumbListClass = "flex flex-wrap items-center gap-(--space-1) text-caption";
+const breadcrumbItemClass = "inline-flex items-center gap-(--space-1)";
+const breadcrumbLinkClass = cva(
+  [
+    // type ROLE + resting color; logical inline padding + the small icon gap for an optional glyph
+    "inline-flex items-center gap-(--space-1) rounded-(--radius-sm) px-(--space-1)",
+    "text-caption text-text-secondary",
+    // hover: the restrained ghost fill, label lifts to the primary text color, pointer cursor
+    "cursor-pointer hover:bg-action-ghost-bg-hover hover:text-text-primary",
+    // active text where the ghost treatment applies (spec §5)
+    "active:text-action-ghost-fg",
+    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)
+    "transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // target-size floor — 44px touch / 40px pointer (spec §7, 2.5.8)
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // disabled (non-returnable) ancestor — DEC-C: dim via the disabled TOKEN, never opacity.
+    // aria-disabled drives it because a breadcrumb ancestor is an <a>, which has no native
+    // disabled; the component also strips href + tabindex so it cannot navigate or be tabbed to.
+    "aria-disabled:pointer-events-none aria-disabled:text-text-disabled"
+  ],
+  { variants: {}, defaultVariants: {} }
+);
+const breadcrumbPageClass = "inline-flex items-center gap-(--space-1) px-(--space-1) text-caption text-text-primary";
+const breadcrumbSeparatorClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+const breadcrumbEllipsisClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+export {
+  breadcrumbEllipsisClass,
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbNavClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass
+};
+//# sourceMappingURL=breadcrumb.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Breadcrumb is structural wayfinding in NEUTRAL text (spec §3): it names the trail from a\n// root to the current page. It has no status-colored and no brand-accented variant at rest —\n// a crumb reports a location in the hierarchy, not a verification result, so it binds nothing\n// from the status tier and nothing from the action(brand) tier. The trail paints from the\n// text, ghost-action, border, and surface aliases only (spec §5).\n\n// The nav landmark wrapping the trail. A neutral canvas surface with logical-property block\n// padding so the trail mirrors under dir=\"rtl\" (G-U6). The optional hairline separating the\n// breadcrumb from the content below it (spec §5, border-default) is a caller decision, not a\n// default binding — apply it via className where the surface needs the divide.\nexport const breadcrumbNavClass = \"bg-surface-canvas py-(--space-2)\";\n\n// The ordered list: root -> current. Inline row of items + separators, wrapping when narrow,\n// with the small inter-item gap. The list itself carries no text color — each item sets its own.\nexport const breadcrumbListClass =\n  \"flex flex-wrap items-center gap-(--space-1) text-caption\";\n\n// A single trail item (the <li>). Inline so the item and its trailing separator sit on one row.\nexport const breadcrumbItemClass = \"inline-flex items-center gap-(--space-1)\";\n\n// The link item (spec §4). At rest it is the trail label type role in the SECONDARY text color;\n// on hover it takes a restrained ghost fill and the label lifts to the PRIMARY text color (the\n// ghost-action hover fill is the only fill a crumb ever paints). The focus ring is part of the\n// base, on every state, never removed. Motion is the fast token transition on the verdify easing,\n// collapsing to the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only\n// theatre duration. A disabled (non-returnable) ancestor dims via the disabled TOKEN, not a\n// blanket opacity (DEC-C), and is taken out of the tab order + pointer flow by the component.\nexport const breadcrumbLinkClass = cva(\n  [\n    // type ROLE + resting color; logical inline padding + the small icon gap for an optional glyph\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-sm) px-(--space-1)\",\n    \"text-caption text-text-secondary\",\n    // hover: the restrained ghost fill, label lifts to the primary text color, pointer cursor\n    \"cursor-pointer hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n    // active text where the ghost treatment applies (spec §5)\n    \"active:text-action-ghost-fg\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer (spec §7, 2.5.8)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled (non-returnable) ancestor — DEC-C: dim via the disabled TOKEN, never opacity.\n    // aria-disabled drives it because a breadcrumb ancestor is an <a>, which has no native\n    // disabled; the component also strips href + tabindex so it cannot navigate or be tabbed to.\n    \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled\",\n  ],\n  { variants: {}, defaultVariants: {} },\n);\n\n// The current page (spec §2/§4/§5): the last item. PLAIN text in the PRIMARY color, NOT a link —\n// no focus ring, no target-size floor, not focusable. The non-interactive guidance: a current\n// crumb is a label, not a control.\nexport const breadcrumbPageClass =\n  \"inline-flex items-center gap-(--space-1) px-(--space-1) text-caption text-text-primary\";\n\n// The separator glyph between two items (spec §2/§4): decoration only, in the MUTED text color,\n// at the sm icon role. Removed from the a11y tree by the component (aria-hidden + role=presentation)\n// so the trail is not announced as \"Home slash Billing slash Invoice\".\nexport const breadcrumbSeparatorClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\n// The overflow indicator for the collapsed variant (spec §2): the ellipsis standing in for the\n// middle of a long trail. It renders here as a DECORATIVE, non-interactive glyph in the muted\n// text color — the interactive overflow Menu (a Menu button revealing the hidden ancestors)\n// defers to the Menu primitive, which the library has not built yet (see component TSDoc).\nexport const breadcrumbEllipsisClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\nexport type BreadcrumbLinkVariantProps = VariantProps<typeof breadcrumbLinkClass>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAYhC,MAAM,qBAAqB;AAI3B,MAAM,sBACX;AAGK,MAAM,sBAAsB;AAS5B,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE;AACtC;AAKO,MAAM,sBACX;AAKK,MAAM,2BACX;AAMK,MAAM,0BACX;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, type BreadcrumbProps, type BreadcrumbListProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbPageProps, type BreadcrumbSeparatorProps, type BreadcrumbEllipsisProps, } from "./breadcrumb";
+export { breadcrumbNavClass, breadcrumbListClass, breadcrumbItemClass, breadcrumbLinkClass, breadcrumbPageClass, breadcrumbSeparatorClass, breadcrumbEllipsisClass, type BreadcrumbLinkVariantProps, } from "./breadcrumb.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC"}