@seekalfred/primitives 0.2.0 → 0.3.0

package/dist/avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar, avatarVariants } from "./avatar.js";
+export { Avatar, avatarVariants };

package/dist/badge/badge.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef } from "react";
+//#region src/badge/badge.d.ts
+/**
+ * Badge -- the status pill, in every shape the product asks for.
+ *
+ * Presentational, so there is no React Aria base. RAC's `Tag` looks similar
+ * and is not equivalent: it is focusable, selectable and removable, and it is
+ * illegal outside a `TagGroup` collection. A status pill is none of those.
+ *
+ * THIS ABSORBED THE PRODUCT'S `Pill`. The app shipped two components for one
+ * job -- `badge.tsx` with a `variant` axis and `pill.tsx` with a `tone` axis --
+ * across 22 and 22 consumer files. They disagreed about everything: shape
+ * (`rounded-md` against `rounded-full`), size (one fixed, one `sm`/`md`/`lg`)
+ * and naming, so `pill` accepted `blue` AND `info`, `green` AND `success`, for
+ * the same colour. Converging them is why `variant` is gone.
+ *
+ * The axes are the two questions a call site actually answers -- what does
+ * this MEAN (`tone`) and how loud should it be (`appearance`) -- rather than
+ * one axis whose values are the cross product. Six tones by three appearances
+ * is eighteen `variant` values otherwise, and shipping eighteen is how a
+ * design system ends up with `softPrimary` next to `primaryOutline`.
+ *
+ * Every string below is a STATIC literal, including the compound ones.
+ * Tailwind scans source text, so a class assembled at runtime is invisible to
+ * it and would never be emitted.
+ *
+ * Three things in the legacy are deliberately not ported:
+ *
+ * - `asChild` and its `[a&]:hover:` rules. Zero call sites; the hover styles
+ *   existed only to colour the anchor asChild produced.
+ * - `focus-visible:ring-*`. A span is not focusable, so the ring could never
+ *   appear. A consumer who adds `tabIndex` owns the indicator, and a ring is
+ *   the wrong one anyway -- box-shadows vanish under forced-colors.
+ * - `aria-invalid:*`. A badge is never invalid; that was boilerplate copied
+ *   across every shadcn control.
+ */
+export declare const badgeVariants: (props?: ({
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | "primary" | null | undefined;
+  appearance?: "outline" | "solid" | "soft" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+  shape?: "rounded" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends ComponentPropsWithoutRef<"span">, VariantProps<typeof badgeVariants> {}
+export declare function Badge({ className, tone, appearance, size, shape, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge/badge.js

@@ -0,0 +1,189 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+/**
+* Badge -- the status pill, in every shape the product asks for.
+*
+* Presentational, so there is no React Aria base. RAC's `Tag` looks similar
+* and is not equivalent: it is focusable, selectable and removable, and it is
+* illegal outside a `TagGroup` collection. A status pill is none of those.
+*
+* THIS ABSORBED THE PRODUCT'S `Pill`. The app shipped two components for one
+* job -- `badge.tsx` with a `variant` axis and `pill.tsx` with a `tone` axis --
+* across 22 and 22 consumer files. They disagreed about everything: shape
+* (`rounded-md` against `rounded-full`), size (one fixed, one `sm`/`md`/`lg`)
+* and naming, so `pill` accepted `blue` AND `info`, `green` AND `success`, for
+* the same colour. Converging them is why `variant` is gone.
+*
+* The axes are the two questions a call site actually answers -- what does
+* this MEAN (`tone`) and how loud should it be (`appearance`) -- rather than
+* one axis whose values are the cross product. Six tones by three appearances
+* is eighteen `variant` values otherwise, and shipping eighteen is how a
+* design system ends up with `softPrimary` next to `primaryOutline`.
+*
+* Every string below is a STATIC literal, including the compound ones.
+* Tailwind scans source text, so a class assembled at runtime is invisible to
+* it and would never be emitted.
+*
+* Three things in the legacy are deliberately not ported:
+*
+* - `asChild` and its `[a&]:hover:` rules. Zero call sites; the hover styles
+*   existed only to colour the anchor asChild produced.
+* - `focus-visible:ring-*`. A span is not focusable, so the ring could never
+*   appear. A consumer who adds `tabIndex` owns the indicator, and a ring is
+*   the wrong one anyway -- box-shadows vanish under forced-colors.
+* - `aria-invalid:*`. A badge is never invalid; that was boilerplate copied
+*   across every shadcn control.
+*/
+const badgeVariants = cva([
+	"inline-flex w-fit shrink-0 items-center justify-center gap-1",
+	"border-(length:--border-width) border-transparent",
+	"font-sans font-medium",
+	"whitespace-nowrap",
+	"box-border",
+	"[&>svg]:pointer-events-none [&>svg]:size-3"
+], {
+	variants: {
+		/** What the badge MEANS. Colour follows from it; it is never picked directly. */
+		tone: {
+			neutral: "",
+			primary: "",
+			success: "",
+			warning: "",
+			danger: "",
+			info: ""
+		},
+		/** How loud it is. */
+		appearance: {
+			solid: "",
+			soft: "",
+			outline: "bg-transparent"
+		},
+		size: {
+			sm: "px-2 py-0.5 text-xs leading-(--leading-snug)",
+			md: "px-2.5 py-0.5 text-xs leading-(--leading-snug)",
+			lg: "px-3 py-1 text-sm leading-(--leading-snug)"
+		},
+		shape: {
+			rounded: "rounded-md",
+			pill: "rounded-full"
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "neutral",
+			appearance: "solid",
+			class: "bg-muted-foreground text-background"
+		},
+		{
+			tone: "primary",
+			appearance: "solid",
+			class: "bg-primary text-primary-foreground"
+		},
+		{
+			tone: "success",
+			appearance: "solid",
+			class: "bg-success-strong text-success-strong-foreground"
+		},
+		{
+			tone: "warning",
+			appearance: "solid",
+			class: "bg-warning-strong text-warning-strong-foreground"
+		},
+		{
+			tone: "danger",
+			appearance: "solid",
+			class: "bg-destructive text-destructive-foreground"
+		},
+		{
+			tone: "info",
+			appearance: "solid",
+			class: "bg-info-strong text-info-strong-foreground"
+		},
+		{
+			tone: "neutral",
+			appearance: "soft",
+			class: "bg-muted text-muted-foreground"
+		},
+		{
+			tone: "primary",
+			appearance: "soft",
+			class: "bg-primary-subtle text-foreground"
+		},
+		{
+			tone: "success",
+			appearance: "soft",
+			class: "bg-success-subtle text-success-foreground"
+		},
+		{
+			tone: "warning",
+			appearance: "soft",
+			class: "bg-warning-subtle text-warning-foreground"
+		},
+		{
+			tone: "danger",
+			appearance: "soft",
+			class: "bg-destructive-subtle text-destructive-subtle-foreground"
+		},
+		{
+			tone: "info",
+			appearance: "soft",
+			class: "bg-info-subtle text-info-foreground"
+		},
+		{
+			tone: "neutral",
+			appearance: "outline",
+			class: "border-border text-foreground"
+		},
+		{
+			tone: "primary",
+			appearance: "outline",
+			class: "border-primary-strong text-foreground"
+		},
+		{
+			tone: "success",
+			appearance: "outline",
+			class: "border-success-strong text-success-strong"
+		},
+		{
+			tone: "warning",
+			appearance: "outline",
+			class: "border-warning-strong text-warning-strong"
+		},
+		{
+			tone: "danger",
+			appearance: "outline",
+			class: "border-destructive-strong text-destructive-strong"
+		},
+		{
+			tone: "info",
+			appearance: "outline",
+			class: "border-info-strong text-info-strong"
+		}
+	],
+	defaultVariants: {
+		tone: "neutral",
+		appearance: "soft",
+		size: "md",
+		shape: "rounded"
+	}
+});
+function Badge({ className, tone, appearance, size, shape, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "badge",
+		"data-tone": tone ?? "neutral",
+		className: cn(badgeVariants({
+			tone,
+			appearance,
+			size,
+			shape
+		}), className)
+	});
+}
+//#endregion
+export { Badge, badgeVariants };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Badge -- the status pill, in every shape the product asks for.\n *\n * Presentational, so there is no React Aria base. RAC's `Tag` looks similar\n * and is not equivalent: it is focusable, selectable and removable, and it is\n * illegal outside a `TagGroup` collection. A status pill is none of those.\n *\n * THIS ABSORBED THE PRODUCT'S `Pill`. The app shipped two components for one\n * job -- `badge.tsx` with a `variant` axis and `pill.tsx` with a `tone` axis --\n * across 22 and 22 consumer files. They disagreed about everything: shape\n * (`rounded-md` against `rounded-full`), size (one fixed, one `sm`/`md`/`lg`)\n * and naming, so `pill` accepted `blue` AND `info`, `green` AND `success`, for\n * the same colour. Converging them is why `variant` is gone.\n *\n * The axes are the two questions a call site actually answers -- what does\n * this MEAN (`tone`) and how loud should it be (`appearance`) -- rather than\n * one axis whose values are the cross product. Six tones by three appearances\n * is eighteen `variant` values otherwise, and shipping eighteen is how a\n * design system ends up with `softPrimary` next to `primaryOutline`.\n *\n * Every string below is a STATIC literal, including the compound ones.\n * Tailwind scans source text, so a class assembled at runtime is invisible to\n * it and would never be emitted.\n *\n * Three things in the legacy are deliberately not ported:\n *\n * - `asChild` and its `[a&]:hover:` rules. Zero call sites; the hover styles\n *   existed only to colour the anchor asChild produced.\n * - `focus-visible:ring-*`. A span is not focusable, so the ring could never\n *   appear. A consumer who adds `tabIndex` owns the indicator, and a ring is\n *   the wrong one anyway -- box-shadows vanish under forced-colors.\n * - `aria-invalid:*`. A badge is never invalid; that was boilerplate copied\n *   across every shadcn control.\n */\nexport const badgeVariants = cva(\n  [\n    \"inline-flex w-fit shrink-0 items-center justify-center gap-1\",\n    \"border-(length:--border-width) border-transparent\",\n    // NO leading-* here. It lives on each `size` instead, AFTER that size's\n    // text-* class: tailwind-merge treats a later text-* as owning\n    // line-height, so a leading-* in this base string is silently stripped the\n    // moment a size variant adds one. The NoUaLeak story caught exactly that.\n    \"font-sans font-medium\",\n    \"whitespace-nowrap\",\n    // box-border and font-sans are not boilerplate. The reset in\n    // @seekalfred/styles is OPT-IN, so a consumer may load none: an unstyled\n    // span inherits the host's serif, and content-box would add the padding\n    // to any width a consumer sets.\n    \"box-border\",\n    \"[&>svg]:pointer-events-none [&>svg]:size-3\",\n  ],\n  {\n    variants: {\n      /** What the badge MEANS. Colour follows from it; it is never picked directly. */\n      tone: {\n        neutral: \"\",\n        primary: \"\",\n        success: \"\",\n        warning: \"\",\n        danger: \"\",\n        info: \"\",\n      },\n      /** How loud it is. */\n      appearance: {\n        solid: \"\",\n        soft: \"\",\n        outline: \"bg-transparent\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-xs leading-(--leading-snug)\",\n        md: \"px-2.5 py-0.5 text-xs leading-(--leading-snug)\",\n        lg: \"px-3 py-1 text-sm leading-(--leading-snug)\",\n      },\n      /*\n       * The product's two components disagreed on this and nothing else:\n       * `badge.tsx` was rounded-md, `pill.tsx` was rounded-full. Both survive\n       * as one axis rather than one winning, because a count-bearing badge and\n       * a verdict pill really do read differently.\n       */\n      shape: { rounded: \"rounded-md\", pill: \"rounded-full\" },\n    },\n    compoundVariants: [\n      // SOLID -- the fill carries the meaning, so the text must clear 4.5:1 on it.\n      /*\n       * muted-foreground, NOT `secondary`. --color-secondary resolves to\n       * periwinkle.400, so a \"neutral\" badge rendered lavender -- caught in a\n       * browser, not by any assertion, because the story compared it against\n       * the same wrong token it was painted with. A tone called neutral has to\n       * be neutral; the periwinkle fill the product uses for its `secondary`\n       * badge is the brand's SECOND colour, not an absence of one.\n       */\n      { tone: \"neutral\", appearance: \"solid\", class: \"bg-muted-foreground text-background\" },\n      { tone: \"primary\", appearance: \"solid\", class: \"bg-primary text-primary-foreground\" },\n      { tone: \"success\", appearance: \"solid\", class: \"bg-success-strong text-success-strong-foreground\" },\n      { tone: \"warning\", appearance: \"solid\", class: \"bg-warning-strong text-warning-strong-foreground\" },\n      { tone: \"danger\", appearance: \"solid\", class: \"bg-destructive text-destructive-foreground\" },\n      { tone: \"info\", appearance: \"solid\", class: \"bg-info-strong text-info-strong-foreground\" },\n\n      /*\n       * SOFT -- a tint, and the default, because this is what a status pill is.\n       * The ink is one step darker than the obvious pairing for success,\n       * warning and info: the product measured 4.13, 3.48 and 3.34 on its own\n       * tints and had to darken all three. Our `-foreground` tokens already\n       * encode that correction, which is why they are used rather than\n       * `-strong`.\n       */\n      { tone: \"neutral\", appearance: \"soft\", class: \"bg-muted text-muted-foreground\" },\n      // No primary-subtle-foreground token: plain `foreground` on this tint\n      // measures 18.70 light / 9.78 dark, already graded for the Table's\n      // highlighted row.\n      { tone: \"primary\", appearance: \"soft\", class: \"bg-primary-subtle text-foreground\" },\n      { tone: \"success\", appearance: \"soft\", class: \"bg-success-subtle text-success-foreground\" },\n      { tone: \"warning\", appearance: \"soft\", class: \"bg-warning-subtle text-warning-foreground\" },\n      {\n        tone: \"danger\",\n        appearance: \"soft\",\n        class: \"bg-destructive-subtle text-destructive-subtle-foreground\",\n      },\n      { tone: \"info\", appearance: \"soft\", class: \"bg-info-subtle text-info-foreground\" },\n\n      /*\n       * OUTLINE -- no fill, so the border is the only thing separating the\n       * badge from the page and is held to the 3:1 non-text floor of WCAG\n       * 1.4.11. Text AND border are `-strong`, not `-foreground`: with no tint\n       * behind it the label sits on `background`, and `-strong on background`\n       * is the pair already graded at 4.5. `-foreground` is graded only\n       * against its own `-subtle`, so using it here would have been a ratio\n       * nobody had measured.\n       */\n      { tone: \"neutral\", appearance: \"outline\", class: \"border-border text-foreground\" },\n      { tone: \"primary\", appearance: \"outline\", class: \"border-primary-strong text-foreground\" },\n      {\n        tone: \"success\",\n        appearance: \"outline\",\n        class: \"border-success-strong text-success-strong\",\n      },\n      {\n        tone: \"warning\",\n        appearance: \"outline\",\n        class: \"border-warning-strong text-warning-strong\",\n      },\n      {\n        tone: \"danger\",\n        appearance: \"outline\",\n        class: \"border-destructive-strong text-destructive-strong\",\n      },\n      { tone: \"info\", appearance: \"outline\", class: \"border-info-strong text-info-strong\" },\n    ],\n    defaultVariants: { tone: \"neutral\", appearance: \"soft\", size: \"md\", shape: \"rounded\" },\n  },\n);\n\nexport interface BadgeProps\n  extends ComponentPropsWithoutRef<\"span\">,\n    VariantProps<typeof badgeVariants> {}\n\nexport function Badge({ className, tone, appearance, size, shape, ...props }: BadgeProps) {\n  return (\n    <span\n      {...props}\n      data-slot=\"badge\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(badgeVariants({ tone, appearance, size, shape }), className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,IAC3B;CACE;CACA;CAKA;CACA;CAKA;CACA;AACF,GACA;CACE,UAAU;;EAER,MAAM;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;EACR;;EAEA,YAAY;GACV,OAAO;GACP,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAOA,OAAO;GAAE,SAAS;GAAc,MAAM;EAAe;CACvD;CACA,kBAAkB;EAUhB;GAAE,MAAM;GAAW,YAAY;GAAS,OAAO;EAAsC;EACrF;GAAE,MAAM;GAAW,YAAY;GAAS,OAAO;EAAqC;EACpF;GAAE,MAAM;GAAW,YAAY;GAAS,OAAO;EAAmD;EAClG;GAAE,MAAM;GAAW,YAAY;GAAS,OAAO;EAAmD;EAClG;GAAE,MAAM;GAAU,YAAY;GAAS,OAAO;EAA6C;EAC3F;GAAE,MAAM;GAAQ,YAAY;GAAS,OAAO;EAA6C;EAUzF;GAAE,MAAM;GAAW,YAAY;GAAQ,OAAO;EAAiC;EAI/E;GAAE,MAAM;GAAW,YAAY;GAAQ,OAAO;EAAoC;EAClF;GAAE,MAAM;GAAW,YAAY;GAAQ,OAAO;EAA4C;EAC1F;GAAE,MAAM;GAAW,YAAY;GAAQ,OAAO;EAA4C;EAC1F;GACE,MAAM;GACN,YAAY;GACZ,OAAO;EACT;EACA;GAAE,MAAM;GAAQ,YAAY;GAAQ,OAAO;EAAsC;EAWjF;GAAE,MAAM;GAAW,YAAY;GAAW,OAAO;EAAgC;EACjF;GAAE,MAAM;GAAW,YAAY;GAAW,OAAO;EAAwC;EACzF;GACE,MAAM;GACN,YAAY;GACZ,OAAO;EACT;EACA;GACE,MAAM;GACN,YAAY;GACZ,OAAO;EACT;EACA;GACE,MAAM;GACN,YAAY;GACZ,OAAO;EACT;EACA;GAAE,MAAM;GAAQ,YAAY;GAAW,OAAO;EAAsC;CACtF;CACA,iBAAiB;EAAE,MAAM;EAAW,YAAY;EAAQ,MAAM;EAAM,OAAO;CAAU;AACvF,CACF;AAMA,SAAgB,MAAM,EAAE,WAAW,MAAM,YAAY,MAAM,OAAO,GAAG,SAAqB;CACxF,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW,QAAQ;EACnB,WAAW,GAAG,cAAc;GAAE;GAAM;GAAY;GAAM;EAAM,CAAC,GAAG,SAAS;CAC1E,CAAA;AAEL"}

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, badgeVariants } from "./badge.js";
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge/index.js

@@ -0,0 +1,2 @@
+import { Badge, badgeVariants } from "./badge.js";
+export { Badge, badgeVariants };

package/dist/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,98 @@
+import { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/breadcrumb/breadcrumb.d.ts
+/**
+ * Breadcrumbs, ported from the legacy shadcn/Radix component onto React
+ * Aria's Breadcrumbs collection.
+ *
+ * SIX LEGACY PARTS COLLAPSE TO TWO, and not for tidiness -- React Aria's
+ * `Breadcrumbs` is a real collection, so it knows which item is last:
+ *
+ * | legacy              | uses | fate                                        |
+ * | ------------------- | ---- | ------------------------------------------- |
+ * | Breadcrumb          |    2 | -> `Breadcrumbs` (nav + ol)                 |
+ * | BreadcrumbList      |    2 | dropped -- `Breadcrumbs` IS the `<ol>`      |
+ * | BreadcrumbItem      |    6 | -> `BreadcrumbItem`                         |
+ * | BreadcrumbLink      |    4 | merged into `BreadcrumbItem` as `href`      |
+ * | BreadcrumbPage      |    2 | dropped -- the last crumb is auto-current   |
+ * | BreadcrumbSeparator |    4 | dropped -- every non-last crumb draws one   |
+ * | BreadcrumbEllipsis  |    0 | dropped -- zero call sites                  |
+ *
+ * The collection is also why the separator CANNOT stay a component: RAC
+ * builds its item list from the children, so a `<BreadcrumbSeparator/>`
+ * sibling would be a non-item node inside a collection and there is nowhere
+ * legal to put it.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted -- the component would render unstyled with no
+ * error anywhere.
+ */
+export declare const breadcrumbsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const breadcrumbItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const breadcrumbLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A navigation trail.
+ *
+ * The last child is the current page: give it no `href`, and React Aria
+ * marks it `aria-current="page"` and takes it out of the tab order.
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/design-thinking">Design Thinking</BreadcrumbItem>
+ *   <BreadcrumbItem>User Personas</BreadcrumbItem>
+ * </Breadcrumbs>
+ */
+interface BreadcrumbsProps$1 extends Omit<BreadcrumbsProps<object>, "className" | "style" | "children" | "items" | "dependencies"> {
+  /**
+   * `BreadcrumbItem` elements. Static children only: `items` and the render
+   * function are not exposed, because no call site builds a trail from data
+   * and the generic they require leaks into every consumer's types.
+   */
+  children?: ReactNode;
+  /**
+   * Extra classes, merged last so they win conflicts with ours.
+   *
+   * They land on the `<ol>`, where our own classes are, so `tailwind-merge`
+   * can actually resolve a conflict. The `<nav>` is an unstyled landmark
+   * wrapper.
+   */
+  className?: string;
+  /**
+   * Accessible name for the navigation landmark. Only worth changing when a
+   * page has more than one trail.
+   *
+   * @default "Breadcrumb"
+   */
+  "aria-label"?: string;
+}
+declare function Breadcrumbs$1({ className, children, "aria-label": ariaLabel, ...props }: BreadcrumbsProps$1): import("react").JSX.Element;
+/**
+ * One crumb.
+ *
+ * @example
+ * <BreadcrumbItem href="/reports">Reports</BreadcrumbItem>
+ */
+export interface BreadcrumbItemProps extends Omit<BreadcrumbProps, "className" | "style" | "children"> {
+  /**
+   * The crumb's label.
+   *
+   * An icon-only crumb has no accessible name, which is an axe `link-name`
+   * violation -- both legacy call sites ship one. Pass `aria-label` when the
+   * only child is a glyph.
+   */
+  children?: ReactNode;
+  /** Extra classes for the `<li>`, merged last. */
+  className?: string;
+  /** Destination. Omit it on the last crumb: that one is the current page. */
+  href?: string;
+  /** Anchor target, forwarded when `href` is set. */
+  target?: string;
+  /** Anchor rel, forwarded when `href` is set. */
+  rel?: string;
+}
+export declare function BreadcrumbItem({ className, children, href, target, rel, "aria-label": ariaLabel, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+//#endregion
+export { Breadcrumbs$1 as Breadcrumbs, BreadcrumbsProps$1 as BreadcrumbsProps };
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/breadcrumb/breadcrumb.js

@@ -0,0 +1,93 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Breadcrumb, Breadcrumbs, Link } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/breadcrumb/breadcrumb.tsx
+/**
+* Breadcrumbs, ported from the legacy shadcn/Radix component onto React
+* Aria's Breadcrumbs collection.
+*
+* SIX LEGACY PARTS COLLAPSE TO TWO, and not for tidiness -- React Aria's
+* `Breadcrumbs` is a real collection, so it knows which item is last:
+*
+* | legacy              | uses | fate                                        |
+* | ------------------- | ---- | ------------------------------------------- |
+* | Breadcrumb          |    2 | -> `Breadcrumbs` (nav + ol)                 |
+* | BreadcrumbList      |    2 | dropped -- `Breadcrumbs` IS the `<ol>`      |
+* | BreadcrumbItem      |    6 | -> `BreadcrumbItem`                         |
+* | BreadcrumbLink      |    4 | merged into `BreadcrumbItem` as `href`      |
+* | BreadcrumbPage      |    2 | dropped -- the last crumb is auto-current   |
+* | BreadcrumbSeparator |    4 | dropped -- every non-last crumb draws one   |
+* | BreadcrumbEllipsis  |    0 | dropped -- zero call sites                  |
+*
+* The collection is also why the separator CANNOT stay a component: RAC
+* builds its item list from the children, so a `<BreadcrumbSeparator/>`
+* sibling would be a non-item node inside a collection and there is nowhere
+* legal to put it.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted -- the component would render unstyled with no
+* error anywhere.
+*/
+const breadcrumbsVariants = cva([
+	"flex flex-wrap items-center gap-2",
+	"m-0 list-none p-0",
+	"font-sans text-sm leading-(--leading-normal) text-muted-foreground",
+	"box-border break-words"
+]);
+const breadcrumbItemVariants = cva(["group inline-flex items-center gap-2"]);
+const breadcrumbLinkVariants = cva([
+	"inline-flex items-center gap-1.5",
+	"font-sans text-muted-foreground no-underline",
+	"rounded-sm cursor-pointer",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"data-[hovered]:text-foreground data-[hovered]:underline",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)",
+	"data-[current]:text-foreground data-[current]:font-normal data-[current]:cursor-default",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-(--icon-sm)"
+]);
+function Breadcrumbs$1({ className, children, "aria-label": ariaLabel = "Breadcrumb", ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		"data-slot": "breadcrumb",
+		children: /* @__PURE__ */ jsx(Breadcrumbs, {
+			...props,
+			"aria-label": ariaLabel,
+			"data-slot": "breadcrumb-list",
+			className: cn(breadcrumbsVariants(), className),
+			children
+		})
+	});
+}
+function BreadcrumbItem({ className, children, href, target, rel, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsxs(Breadcrumb, {
+		...props,
+		"data-slot": "breadcrumb-item",
+		className: cn(breadcrumbItemVariants(), className),
+		children: [/* @__PURE__ */ jsx(Link, {
+			href,
+			target,
+			rel,
+			"aria-label": ariaLabel,
+			"data-slot": "breadcrumb-link",
+			className: breadcrumbLinkVariants(),
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "breadcrumb-separator",
+			className: "shrink-0 select-none group-data-[current]:hidden",
+			children: "/"
+		})]
+	});
+}
+//#endregion
+export { BreadcrumbItem, Breadcrumbs$1 as Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":["Breadcrumbs","AriaBreadcrumbs","AriaBreadcrumb","AriaLink"],"sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  Breadcrumbs as AriaBreadcrumbs,\n  Link as AriaLink,\n  type BreadcrumbProps as AriaBreadcrumbProps,\n  type BreadcrumbsProps as AriaBreadcrumbsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Breadcrumbs, ported from the legacy shadcn/Radix component onto React\n * Aria's Breadcrumbs collection.\n *\n * SIX LEGACY PARTS COLLAPSE TO TWO, and not for tidiness -- React Aria's\n * `Breadcrumbs` is a real collection, so it knows which item is last:\n *\n * | legacy              | uses | fate                                        |\n * | ------------------- | ---- | ------------------------------------------- |\n * | Breadcrumb          |    2 | -> `Breadcrumbs` (nav + ol)                 |\n * | BreadcrumbList      |    2 | dropped -- `Breadcrumbs` IS the `<ol>`      |\n * | BreadcrumbItem      |    6 | -> `BreadcrumbItem`                         |\n * | BreadcrumbLink      |    4 | merged into `BreadcrumbItem` as `href`      |\n * | BreadcrumbPage      |    2 | dropped -- the last crumb is auto-current   |\n * | BreadcrumbSeparator |    4 | dropped -- every non-last crumb draws one   |\n * | BreadcrumbEllipsis  |    0 | dropped -- zero call sites                  |\n *\n * The collection is also why the separator CANNOT stay a component: RAC\n * builds its item list from the children, so a `<BreadcrumbSeparator/>`\n * sibling would be a non-item node inside a collection and there is nowhere\n * legal to put it.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted -- the component would render unstyled with no\n * error anywhere.\n */\nexport const breadcrumbsVariants = cva([\n  \"flex flex-wrap items-center gap-2\",\n\n  // The user-agent `<ol>`: decimal markers, a 40px inline padding and a 1em\n  // block margin. The reset in @seekalfred/styles is OPT-IN, so a consumer\n  // may load none -- unreset, the trail renders as a numbered, indented\n  // list. The Accordion shipped its panel in the browser's serif for exactly\n  // this family of reason.\n  \"m-0 list-none p-0\",\n\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n\n  // box-border: content-box would add any padding a consumer sets on top of\n  // a constrained width. The Alert shipped overflowing by 46px that way.\n  \"box-border break-words\",\n]);\n\nexport const breadcrumbItemVariants = cva([\n  // `group` is load-bearing: the separator hides itself from the current\n  // crumb via group-data-[current], and RAC puts data-current on the <li>,\n  // which CSS cannot look upward to from the span.\n  \"group inline-flex items-center gap-2\",\n]);\n\nexport const breadcrumbLinkVariants = cva([\n  \"inline-flex items-center gap-1.5\",\n\n  // The user-agent `<a>`: -webkit-link blue and a permanent underline. Left\n  // alone, every crumb is blue, and the hover underline below stops being a\n  // state cue at all because it is already on.\n  \"font-sans text-muted-foreground no-underline\",\n  \"rounded-sm cursor-pointer\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // Hover is NOT colour-only. The legacy component moved muted-foreground to\n  // foreground and nothing else; under forced-colors the user's palette\n  // overrides both and the cue vanishes entirely (WCAG 1.4.1, and\n  // ARCHITECTURE section 5 rule 6). The underline survives any colour mode.\n  \"data-[hovered]:text-foreground data-[hovered]:underline\",\n\n  // outline-solid is load-bearing, not decoration. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus variant can\n  // apply a width and a colour while faithfully re-applying style:none and\n  // painting nothing. Button shipped exactly that: keyboard-focusable with\n  // no visible ring, and every gate stayed green because axe has no\n  // focus-indicator rule.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  // The current crumb. RAC forces isDisabled on it, so React Aria renders a\n  // <span role=\"link\" aria-disabled=\"true\" aria-current=\"page\"> with no\n  // tabIndex -- byte for byte the legacy BreadcrumbPage, minus the chance of\n  // hand-writing it onto the wrong item.\n  \"data-[current]:text-foreground data-[current]:font-normal data-[current]:cursor-default\",\n\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\n/**\n * A navigation trail.\n *\n * The last child is the current page: give it no `href`, and React Aria\n * marks it `aria-current=\"page\"` and takes it out of the tab order.\n *\n * @example\n * <Breadcrumbs>\n *   <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n *   <BreadcrumbItem href=\"/design-thinking\">Design Thinking</BreadcrumbItem>\n *   <BreadcrumbItem>User Personas</BreadcrumbItem>\n * </Breadcrumbs>\n */\nexport interface BreadcrumbsProps\n  extends Omit<\n    AriaBreadcrumbsProps<object>,\n    \"className\" | \"style\" | \"children\" | \"items\" | \"dependencies\"\n  > {\n  /**\n   * `BreadcrumbItem` elements. Static children only: `items` and the render\n   * function are not exposed, because no call site builds a trail from data\n   * and the generic they require leaks into every consumer's types.\n   */\n  children?: ReactNode;\n  /**\n   * Extra classes, merged last so they win conflicts with ours.\n   *\n   * They land on the `<ol>`, where our own classes are, so `tailwind-merge`\n   * can actually resolve a conflict. The `<nav>` is an unstyled landmark\n   * wrapper.\n   */\n  className?: string;\n  /**\n   * Accessible name for the navigation landmark. Only worth changing when a\n   * page has more than one trail.\n   *\n   * @default \"Breadcrumb\"\n   */\n  \"aria-label\"?: string;\n}\n\nexport function Breadcrumbs({\n  className,\n  children,\n  \"aria-label\": ariaLabel = \"Breadcrumb\",\n  ...props\n}: BreadcrumbsProps) {\n  return (\n    // RAC renders the <ol> and puts its aria-label there; it does NOT render\n    // a landmark. Dropping the <nav> would silently remove the thing screen\n    // reader users actually navigate by, so it is added back here. Both\n    // carry the same name deliberately -- RAC falls back to a localized\n    // \"Breadcrumbs\" when aria-label is absent, so the <ol> is named either\n    // way and letting the two names diverge would be the worse outcome.\n    <nav aria-label={ariaLabel} data-slot=\"breadcrumb\">\n      <AriaBreadcrumbs\n        {...props}\n        aria-label={ariaLabel}\n        data-slot=\"breadcrumb-list\"\n        className={cn(breadcrumbsVariants(), className)}\n      >\n        {children}\n      </AriaBreadcrumbs>\n    </nav>\n  );\n}\n\n/**\n * One crumb.\n *\n * @example\n * <BreadcrumbItem href=\"/reports\">Reports</BreadcrumbItem>\n */\nexport interface BreadcrumbItemProps\n  extends Omit<AriaBreadcrumbProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The crumb's label.\n   *\n   * An icon-only crumb has no accessible name, which is an axe `link-name`\n   * violation -- both legacy call sites ship one. Pass `aria-label` when the\n   * only child is a glyph.\n   */\n  children?: ReactNode;\n  /** Extra classes for the `<li>`, merged last. */\n  className?: string;\n  /** Destination. Omit it on the last crumb: that one is the current page. */\n  href?: string;\n  /** Anchor target, forwarded when `href` is set. */\n  target?: string;\n  /** Anchor rel, forwarded when `href` is set. */\n  rel?: string;\n}\n\nexport function BreadcrumbItem({\n  className,\n  children,\n  href,\n  target,\n  rel,\n  \"aria-label\": ariaLabel,\n  ...props\n}: BreadcrumbItemProps) {\n  return (\n    <AriaBreadcrumb\n      {...props}\n      data-slot=\"breadcrumb-item\"\n      className={cn(breadcrumbItemVariants(), className)}\n    >\n      <AriaLink\n        href={href}\n        target={target}\n        rel={rel}\n        aria-label={ariaLabel}\n        data-slot=\"breadcrumb-link\"\n        className={breadcrumbLinkVariants()}\n      >\n        {children}\n      </AriaLink>\n      {/*\n        A real element, not a ::after. Generated content is announced by some\n        screen readers, and it cannot be read back from the DOM at all -- a\n        separator that stopped rendering would be invisible to the suite.\n\n        \"/\" rather than the legacy lucide ChevronRight: this library ships no\n        icon dependency, all four legacy separators are the default, and a\n        chevron glyph does not mirror in RTL while a slash needs no mirroring\n        at all.\n      */}\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"breadcrumb-separator\"\n        className=\"shrink-0 select-none group-data-[current]:hidden\"\n      >\n        /\n      </span>\n    </AriaBreadcrumb>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,sBAAsB,IAAI;CACrC;CAOA;CAIA;CAIA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAIxC,sCACF,CAAC;AAED,MAAa,yBAAyB,IAAI;CACxC;CAKA;CACA;CACA;CAMA;CASA;CACA;CACA;CACA;CACA;CAMA;CAEA;CACA;AACF,CAAC;AA2CD,SAAgBA,cAAY,EAC1B,WACA,UACA,cAAc,YAAY,cAC1B,GAAG,SACgB;CACnB,OAOE,oBAAC,OAAD;EAAK,cAAY;EAAW,aAAU;EACpC,UAAA,oBAACC,aAAD;GACE,GAAI;GACJ,cAAY;GACZ,aAAU;GACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;GAE7C;EACc,CAAA;CACd,CAAA;AAET;AA4BA,SAAgB,eAAe,EAC7B,WACA,UACA,MACA,QACA,KACA,cAAc,WACd,GAAG,SACmB;CACtB,OACE,qBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAHnD,UAAA,CAKE,oBAACC,MAAD;GACQ;GACE;GACH;GACL,cAAY;GACZ,aAAU;GACV,WAAW,uBAAuB;GAEjC;EACO,CAAA,GAWV,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GACX,UAAA;EAEK,CAAA,CACQ;;AAEpB"}

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb.js";
+export { BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants };

package/dist/breadcrumb/index.js

@@ -0,0 +1,2 @@
+import { BreadcrumbItem, Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb.js";
+export { BreadcrumbItem, Breadcrumbs, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants };

package/dist/button/button.d.ts

@@ -21,7 +21,7 @@ import { ReactNode } from "react";
  * touch and keyboard uniformly. The original had no pressed state at all.
  */
 export declare const buttonVariants: (props?: ({
-  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | null | undefined;
+  variant?: "primary" | "secondary" | "outline" | "outlineNeutral" | "ghost" | "destructive" | "link" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/button/button.js

@@ -30,6 +30,7 @@ const buttonVariants = cva([
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
 	"outline-none",
+	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"data-[focus-visible]:outline-(--color-ring)",
@@ -56,6 +57,12 @@ const buttonVariants = cva([
 				"data-[hovered]:bg-muted",
 				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
 			],
+			outlineNeutral: [
+				"bg-background text-foreground border-(length:--border-width) border-border shadow-surface",
+				"motion-safe:transition-colors",
+				"data-[hovered]:bg-muted",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+			],
 			ghost: [
 				"bg-transparent text-primary-strong",
 				"motion-safe:transition-colors",

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Button","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them. This is also the supported answer for the\n * link-shaped cases React Aria's Button cannot cover: it never renders an\n * anchor, so `<a className={buttonVariants({ variant: \"outline\" })}>` is how a\n * real navigation target gets button styling until the Link primitive lands.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    \"outline-none\",\n    \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n    \"data-[focus-visible]:outline-(--color-ring)\",\n\n    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 -- hover and pressed are their own TOKENS, not opacity\n        // modifiers on the fill. `bg-primary/90` lightened the button toward the\n        // page, which reads as receding rather than interactive and was nearly\n        // invisible; it also made the label pair unmeasurable, because an alpha\n        // composite depends on whatever happens to sit behind it. The brand system\n        // steps DOWN its ramp instead -- 500 rest, 600 hover, 700 pressed -- and\n        // every one of those fills is now in the contrast contract.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n          \"data-[hovered]:bg-primary-hover\",\n          \"data-[pressed]:bg-primary-pressed\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-secondary-hover\",\n          \"data-[pressed]:bg-secondary-pressed\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own\n * element. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\n/**\n * A button.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n    >\n      {/*\n       * children passes through UNTOUCHED when neither slot is used, so a\n       * button with no icon renders byte-identical DOM to before this prop\n       * existed. That is what keeps this an additive change rather than a\n       * structural one -- and the childOrder assertions in the stories are what\n       * hold it true, since they read the button's direct children.\n       *\n       * The slot branch has to be a render function because React Aria's\n       * children are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass\n       * a function to read isPressed or isPending, and wrapping the node\n       * directly would silently render that function as nothing. The fragment\n       * adds no element of its own.\n       */}\n      {startIcon === undefined && endIcon === undefined\n        ? children\n        : (renderProps) => (\n            <>\n              {startIcon}\n              {typeof children === \"function\" ? children(renderProps) : children}\n              {endIcon}\n            </>\n          )}\n    </AriaButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAMA;CACA;CACA;CACA;CAKA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAoBP,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;AAqDA,SAAgBA,SAAO,EACrB,WACA,SACA,MACA,WACA,SACA,UACA,GAAG,SACW;CACd,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAezD,UAAA,cAAc,KAAA,KAAa,YAAY,KAAA,IACpC,YACC,gBACC,qBAAA,UAAA,EAAA,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACD,EAAA,CAAA;CAEE,CAAA;AAEhB"}
+{"version":3,"file":"button.js","names":["Button","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them. This is also the supported answer for the\n * link-shaped cases React Aria's Button cannot cover: it never renders an\n * anchor, so `<a className={buttonVariants({ variant: \"outline\" })}>` is how a\n * real navigation target gets button styling until the Link primitive lands.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    //\n    // outline-solid on the focus variant is load-bearing, not decoration.\n    // `outline-none` sets BOTH outline-style:none and --tw-outline-style:none,\n    // and Tailwind's outline-width utility resolves its style from that same\n    // variable -- so the focus variant applied a width and a colour while\n    // faithfully re-applying style:none, and painted nothing. The button was\n    // keyboard-focusable with no visible ring. axe has no focus-indicator\n    // rule, so every automated gate stayed green; the KeyboardFocus story now\n    // asserts outlineStyle directly.\n    \"outline-none\",\n    \"data-[focus-visible]:outline-solid\",\n    \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n    \"data-[focus-visible]:outline-(--color-ring)\",\n\n    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 -- hover and pressed are their own TOKENS, not opacity\n        // modifiers on the fill. `bg-primary/90` lightened the button toward the\n        // page, which reads as receding rather than interactive and was nearly\n        // invisible; it also made the label pair unmeasurable, because an alpha\n        // composite depends on whatever happens to sit behind it. The brand system\n        // steps DOWN its ramp instead -- 500 rest, 600 hover, 700 pressed -- and\n        // every one of those fills is now in the contrast contract.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n          \"data-[hovered]:bg-primary-hover\",\n          \"data-[pressed]:bg-primary-pressed\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-secondary-hover\",\n          \"data-[pressed]:bg-secondary-pressed\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        /*\n         * The NEUTRAL outline, and the product's single most-used button:\n         * 99 call sites against 32 for the brand-coloured one.\n         *\n         * It exists because `outline` above is brand-toned -- orange border,\n         * orange label -- which is what the product calls `secondaryOutline`.\n         * Its plain `outline` is this: a grey border and ordinary body text,\n         * for a button that must not compete with the primary action next to\n         * it. One name could not cover both, and renaming `outline` would have\n         * silently repainted every existing call site of ours instead.\n         *\n         * `border` rather than `primary-strong`: --color-border is the token\n         * already held to the 3:1 non-text floor of WCAG 1.4.11, which is what\n         * a border separating a control from the page has to clear.\n         */\n        outlineNeutral: [\n          \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own\n * element. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\n/**\n * A button.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n    >\n      {/*\n       * children passes through UNTOUCHED when neither slot is used, so a\n       * button with no icon renders byte-identical DOM to before this prop\n       * existed. That is what keeps this an additive change rather than a\n       * structural one -- and the childOrder assertions in the stories are what\n       * hold it true, since they read the button's direct children.\n       *\n       * The slot branch has to be a render function because React Aria's\n       * children are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass\n       * a function to read isPressed or isPending, and wrapping the node\n       * directly would silently render that function as nothing. The fragment\n       * adds no element of its own.\n       */}\n      {startIcon === undefined && endIcon === undefined\n        ? children\n        : (renderProps) => (\n            <>\n              {startIcon}\n              {typeof children === \"function\" ? children(renderProps) : children}\n              {endIcon}\n            </>\n          )}\n    </AriaButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAeA;CACA;CACA;CACA;CACA;CAKA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAoBP,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;GACF;GAgBA,gBAAgB;IACd;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;AAqDA,SAAgBA,SAAO,EACrB,WACA,SACA,MACA,WACA,SACA,UACA,GAAG,SACW;CACd,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAezD,UAAA,cAAc,KAAA,KAAa,YAAY,KAAA,IACpC,YACC,gBACC,qBAAA,UAAA,EAAA,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACD,EAAA,CAAA;CAEE,CAAA;AAEhB"}