@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/split-button/split-button.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useMorphWidth } from "../lib/motion.js";
+import { MorphText } from "../lib/morph-text.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger } from "../menu/menu.js";
+import { IconSwap } from "../lib/icon-swap.js";
+import { isValidElement, useRef } from "react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/split-button/split-button.tsx
+/** Names the icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+	if (!isValidElement(node)) return typeof node === "string" || typeof node === "number" ? String(node) : "";
+	const type = node.type;
+	return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+const half = [
+	"relative inline-flex items-center justify-center cursor-pointer select-none font-sans font-medium",
+	"[-webkit-tap-highlight-color:transparent]",
+	"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-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-button-disabled)",
+	"motion-safe:transition-[background-color,color,opacity] motion-safe:duration-(--duration-quick) motion-safe:ease-settle"
+].join(" ");
+const looks = {
+	primary: {
+		pill: "bg-primary text-primary-foreground shadow-surface rounded-md",
+		main: "h-(--density-control-h-md) px-(--density-control-pad-md) text-base rounded-s-md data-[hovered]:opacity-91 data-[pressed]:opacity-84",
+		trigger: "h-(--density-control-h-md) w-9 rounded-e-md border-s-(length:--border-width) border-primary-foreground/20 data-[hovered]:opacity-91 data-[pressed]:opacity-84"
+	},
+	secondary: {
+		pill: "bg-background text-foreground border-(length:--border-width) border-border shadow-surface rounded-md",
+		main: "h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm rounded-s-md data-[hovered]:bg-muted data-[pressed]:bg-muted",
+		trigger: "h-(--density-control-h-sm) w-8 rounded-e-md border-s-(length:--border-width) border-border data-[hovered]:bg-muted data-[pressed]:bg-muted"
+	}
+};
+/**
+* One pill, two actions: a main action and a menu of nearby alternatives.
+*
+* The main half morphs in place: change `children` (or `icon`) and the letters
+* that differ rise in while the old ones lift away, the icon swaps by scaling,
+* and the width springs to fit. The whole pill presses in for the main action;
+* the menu half answers in colour only, so the menu opens from a still anchor,
+* growing from its trigger, its items arriving one after another.
+*
+* @example
+* <SplitButton onPress={save} actions={[{ label: "Save as draft" }, { label: "Delete", destructive: true }]}>
+*   Save
+* </SplitButton>
+*/
+function SplitButton({ children: label, actions, onPress, isDisabled, icon, variant = "primary", className }) {
+	const contentRef = useRef(null);
+	const glyph = iconKey(icon);
+	const look = looks[variant];
+	useMorphWidth(contentRef, glyph + "|" + label);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		className: cn("split-pill inline-flex items-stretch " + look.pill, className),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			"data-slot": "split-main",
+			className: cn(half + " " + look.main),
+			isDisabled,
+			onPress,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-2))]",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsxs("span", {
+					ref: contentRef,
+					className: "inline-flex flex-none items-center gap-2 whitespace-nowrap",
+					children: [icon ? /* @__PURE__ */ jsx(IconSwap, {
+						iconKey: glyph,
+						children: icon
+					}) : null, /* @__PURE__ */ jsx(MorphText, {
+						text: label,
+						morphWidth: false
+					})]
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+			"data-slot": "split-trigger",
+			"aria-label": label + " more actions",
+			isDisabled,
+			className: cn("group/trigger " + half + " " + look.trigger),
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.75,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				className: "size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			})
+		}), /* @__PURE__ */ jsx(Menu$1, {
+			placement: "bottom end",
+			shouldFocusWrap: true,
+			className: "menu-motion [--menu-ox:right]",
+			children: actions.map((action, index) => /* @__PURE__ */ jsxs(MenuItem$1, {
+				id: action.label,
+				textValue: action.label,
+				isDisabled: action.isDisabled,
+				onAction: action.onSelect,
+				"data-i": Math.min(index, 4),
+				className: cn("menu-item-motion gap-2.5" + (action.destructive ? " text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]" : "")),
+				children: [action.icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: action.icon
+				}) : null, action.label]
+			}, action.label))
+		})] })]
+	});
+}
+//#endregion
+export { SplitButton };
+
+//# sourceMappingURL=split-button.js.map

package/dist/split-button/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","names":["AriaButton","Menu","MenuItem"],"sources":["../../src/split-button/split-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { isValidElement, useRef, type ReactNode } from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { useMorphWidth } from \"../lib/motion.js\";\nimport { Menu, MenuItem, MenuTrigger } from \"../menu/menu.js\";\n\n/** One entry in the menu half. */\nexport interface SplitButtonAction {\n  /** The item's text, and its identity. */\n  label: string;\n  /** Runs when the item is chosen. */\n  onSelect?: () => void;\n  isDisabled?: boolean;\n  /** Tints the item as destructive. */\n  destructive?: boolean;\n  /** An icon before the label. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n}\n\nexport interface SplitButtonProps {\n  /** The main action's label. A plain string: it is split into letters to morph when it changes. */\n  children: string;\n  /** The menu half's items: the nearby alternatives to the main action. */\n  actions: SplitButtonAction[];\n  /** Runs when the main half is pressed. */\n  onPress?: () => void;\n  isDisabled?: boolean;\n  /** An icon before the label. Swapping it for another icon morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** `secondary` is the quiet, outlined pill. @default \"primary\" */\n  variant?: \"primary\" | \"secondary\";\n  /** Extra classes for the pill. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Names the icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still. */\nfunction iconKey(node: ReactNode): string {\n  if (!isValidElement(node))\n    return typeof node === \"string\" || typeof node === \"number\" ? String(node) : \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"icon\");\n}\n\n/*\n * Class strings are static literals: Tailwind scans source text.\n *\n * Both halves share the focus outline, the tap-highlight reset and the\n * disabled look. The pill, not either half, scales on press (split-pill), and\n * the menu half never scales, so the menu opens from a still anchor.\n */\nconst half = [\n  \"relative inline-flex items-center justify-center cursor-pointer select-none font-sans font-medium\",\n  \"[-webkit-tap-highlight-color:transparent]\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-button-disabled)\",\n  \"motion-safe:transition-[background-color,color,opacity] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n].join(\" \");\n\nconst looks = {\n  primary: {\n    pill: \"bg-primary text-primary-foreground shadow-surface rounded-md\",\n    main: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base rounded-s-md data-[hovered]:opacity-91 data-[pressed]:opacity-84\",\n    trigger:\n      \"h-(--density-control-h-md) w-9 rounded-e-md border-s-(length:--border-width) border-primary-foreground/20 data-[hovered]:opacity-91 data-[pressed]:opacity-84\",\n  },\n  secondary: {\n    pill: \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface rounded-md\",\n    main: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm rounded-s-md data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n    trigger:\n      \"h-(--density-control-h-sm) w-8 rounded-e-md border-s-(length:--border-width) border-border data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n  },\n} as const;\n\nconst itemBase = \"gap-2.5\";\nconst itemDestructive =\n  \"text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]\";\n\n/**\n * One pill, two actions: a main action and a menu of nearby alternatives.\n *\n * The main half morphs in place: change `children` (or `icon`) and the letters\n * that differ rise in while the old ones lift away, the icon swaps by scaling,\n * and the width springs to fit. The whole pill presses in for the main action;\n * the menu half answers in colour only, so the menu opens from a still anchor,\n * growing from its trigger, its items arriving one after another.\n *\n * @example\n * <SplitButton onPress={save} actions={[{ label: \"Save as draft\" }, { label: \"Delete\", destructive: true }]}>\n *   Save\n * </SplitButton>\n */\nexport function SplitButton({\n  children: label,\n  actions,\n  onPress,\n  isDisabled,\n  icon,\n  variant = \"primary\",\n  className,\n}: SplitButtonProps) {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const glyph = iconKey(icon);\n  const look = looks[variant];\n  useMorphWidth(contentRef, glyph + \"|\" + label);\n\n  return (\n    <div\n      role=\"group\"\n      className={cn(\"split-pill inline-flex items-stretch \" + look.pill, className)}\n    >\n      <AriaButton\n        data-slot=\"split-main\"\n        className={cn(half + \" \" + look.main)}\n        isDisabled={isDisabled}\n        onPress={onPress}\n      >\n        <span\n          className=\"button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-2))]\"\n          aria-hidden=\"true\"\n        >\n          <span\n            ref={contentRef}\n            className=\"inline-flex flex-none items-center gap-2 whitespace-nowrap\"\n          >\n            {icon ? <IconSwap iconKey={glyph}>{icon}</IconSwap> : null}\n            <MorphText text={label} morphWidth={false} />\n          </span>\n        </span>\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {label}\n        </span>\n      </AriaButton>\n      <MenuTrigger>\n        <AriaButton\n          data-slot=\"split-trigger\"\n          aria-label={label + \" more actions\"}\n          isDisabled={isDisabled}\n          className={cn(\"group/trigger \" + half + \" \" + look.trigger)}\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={1.75}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            className=\"size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </AriaButton>\n        <Menu placement=\"bottom end\" shouldFocusWrap className=\"menu-motion [--menu-ox:right]\">\n          {actions.map((action, index) => (\n            <MenuItem\n              key={action.label}\n              id={action.label}\n              textValue={action.label}\n              isDisabled={action.isDisabled}\n              onAction={action.onSelect}\n              data-i={Math.min(index, 4)}\n              className={cn(\n                \"menu-item-motion \" + itemBase + (action.destructive ? \" \" + itemDestructive : \"\"),\n              )}\n            >\n              {action.icon ? <span aria-hidden=\"true\">{action.icon}</span> : null}\n              {action.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,SAAS,QAAQ,MAAyB;CACxC,IAAI,CAAC,eAAe,IAAI,GACtB,OAAO,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW,OAAO,IAAI,IAAI;CAC/E,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,MAAM,eAAe,MAAM,QAAQ;AAC/E;AASA,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ,SAAS;EACP,MAAM;EACN,MAAM;EACN,SACE;CACJ;CACA,WAAW;EACT,MAAM;EACN,MAAM;EACN,SACE;CACJ;AACF;;;;;;;;;;;;;;;AAoBA,SAAgB,YAAY,EAC1B,UAAU,OACV,SACA,SACA,YACA,MACA,UAAU,WACV,aACmB;CACnB,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,QAAQ,QAAQ,IAAI;CAC1B,MAAM,OAAO,MAAM;CACnB,cAAc,YAAY,QAAQ,MAAM,KAAK;CAE7C,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,GAAG,0CAA0C,KAAK,MAAM,SAAS;EAF9E,UAAA,CAIE,qBAACA,QAAD;GACE,aAAU;GACV,WAAW,GAAG,OAAO,MAAM,KAAK,IAAI;GACxB;GACH;GAJX,UAAA,CAME,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEZ,UAAA,qBAAC,QAAD;KACE,KAAK;KACL,WAAU;KAFZ,UAAA,CAIG,OAAO,oBAAC,UAAD;MAAU,SAAS;MAAQ,UAAA;KAAe,CAAA,IAAI,MACtD,oBAAC,WAAD;MAAW,MAAM;MAAO,YAAY;KAAQ,CAAA,CACxC;;GACF,CAAA,GACN,oBAAC,QAAD;IAAM,WAAU;IAAU,aAAU;IACjC,UAAA;GACG,CAAA,CACI;EACZ,CAAA,GAAA,qBAAC,aAAD,EAAA,UAAA,CACE,oBAACA,QAAD;GACE,aAAU;GACV,cAAY,QAAQ;GACR;GACZ,WAAW,GAAG,mBAAmB,OAAO,MAAM,KAAK,OAAO;GAE1D,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;GACrB,CAAA;EACK,CAAA,GACZ,oBAACC,QAAD;GAAM,WAAU;GAAa,iBAAA;GAAgB,WAAU;GACpD,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAACC,YAAD;IAEE,IAAI,OAAO;IACX,WAAW,OAAO;IAClB,YAAY,OAAO;IACnB,UAAU,OAAO;IACjB,UAAQ,KAAK,IAAI,OAAO,CAAC;IACzB,WAAW,GACT,8BAAkC,OAAO,cAAc,0HAAwB,GACjF;IATF,UAAA,CAWG,OAAO,OAAO,oBAAC,QAAD;KAAM,eAAY;KAAQ,UAAA,OAAO;IAAW,CAAA,IAAI,MAC9D,OAAO,KACA;GAZH,GAAA,OAAO,KAYJ,CACX;EACG,CAAA,CACK,EAAA,CAAA,CACV;;AAET"}

package/dist/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+import { StatCard, StatCardProps, StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card.js";
+export { StatCard, type StatCardProps, type StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };

package/dist/stat-card/index.js

@@ -0,0 +1,2 @@
+import { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card.js";
+export { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };

package/dist/stat-card/stat-card.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+//#region src/stat-card/stat-card.d.ts
+/**
+ * StatCard: one headline figure with its label and a line of context. A row
+ * of them is a dashboard's summary strip.
+ *
+ * It exists because a summary strip is on almost every overview screen, and
+ * without a shared card each screen picks its own label case, number size,
+ * colour and height, so the same figure looks different on two pages.
+ *
+ * Three rules it holds:
+ *
+ * - The label is ONE line. A long label is cut with an ellipsis and the full
+ *   text is on hover, so a row of cards keeps its numbers on one baseline
+ *   instead of one card's label wrapping and pushing its number down.
+ * - The number's colour comes from `tone`, a fixed set of meanings, never a
+ *   colour. `neutral` is the default and is right for any figure without a
+ *   verdict in it, including every zero.
+ * - Cards in a row are the same height (`h-full` in a grid or flex row).
+ *
+ * A card can be a link (`href`, React Aria Link, so a router provider routes
+ * it), a button (`onPress`), or a filter toggle (`isSelected` + `onPress`, a
+ * React Aria ToggleButton with `aria-pressed` and one shared selected look).
+ *
+ * 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.
+ */
+export declare const statCardVariants: (props?: ({
+  selected?: boolean | null | undefined;
+  interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const statCardLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const statCardValueVariants: (props?: ({
+  tone?: "neutral" | "warning" | "positive" | "negative" | "attention" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const statCardSubVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type StatCardTone = "neutral" | "positive" | "negative" | "warning" | "attention";
+export interface StatCardProps {
+  /** What the figure is. One line; cut with an ellipsis, full text on hover. */
+  label: string;
+  /** The figure itself, already formatted. */
+  value: ReactNode;
+  /** One line of context under the figure. */
+  sub?: ReactNode;
+  /**
+   * What the figure means: `neutral` (default, and right for every zero),
+   * `positive`, `negative`, `warning` (part-way or waiting) or `attention`
+   * (a person has to look).
+   */
+  tone?: StatCardTone;
+  /**
+   * The card is a filter, and this says whether it is the one applied.
+   * Renders a toggle button with `aria-pressed`. Pair with `onPress`.
+   */
+  isSelected?: boolean;
+  /** Renders the card as a link to this URL. */
+  href?: string;
+  /** Renders the card as a button (or, with `isSelected`, a toggle). */
+  onPress?: () => void;
+  /** Hover text for the whole card. */
+  description?: string;
+  /** Anything under the context line. */
+  children?: ReactNode;
+  /** Layout classes for the card (margins, grid placement). */
+  className?: string;
+  "aria-label"?: string;
+}
+/**
+ * One headline figure.
+ *
+ * @example
+ * <div className="grid gap-4 sm:grid-cols-3">
+ *   <StatCard label="Open" value="$12,400" sub="18 invoices" />
+ *   <StatCard label="Overdue" value="$3,100" sub="4 invoices" tone="negative" />
+ *   <StatCard label="Collected" value="$9,800" tone="positive" href="/payments" />
+ * </div>
+ */
+export declare const StatCard: import("react").ForwardRefExoticComponent<StatCardProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=stat-card.d.ts.map

package/dist/stat-card/stat-card.js

@@ -0,0 +1,152 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { Button, Link, ToggleButton } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/stat-card/stat-card.tsx
+/**
+* StatCard: one headline figure with its label and a line of context. A row
+* of them is a dashboard's summary strip.
+*
+* It exists because a summary strip is on almost every overview screen, and
+* without a shared card each screen picks its own label case, number size,
+* colour and height, so the same figure looks different on two pages.
+*
+* Three rules it holds:
+*
+* - The label is ONE line. A long label is cut with an ellipsis and the full
+*   text is on hover, so a row of cards keeps its numbers on one baseline
+*   instead of one card's label wrapping and pushing its number down.
+* - The number's colour comes from `tone`, a fixed set of meanings, never a
+*   colour. `neutral` is the default and is right for any figure without a
+*   verdict in it, including every zero.
+* - Cards in a row are the same height (`h-full` in a grid or flex row).
+*
+* A card can be a link (`href`, React Aria Link, so a router provider routes
+* it), a button (`onPress`), or a filter toggle (`isSelected` + `onPress`, a
+* React Aria ToggleButton with `aria-pressed` and one shared selected look).
+*
+* 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.
+*/
+const statCardVariants = cva([
+	"flex h-full min-w-0 flex-col p-4 text-start",
+	"rounded-lg border-(length:--border-width) bg-card text-card-foreground",
+	"box-border font-sans"
+], {
+	variants: {
+		/** A filter card that is the one applied. */
+		selected: {
+			true: "border-primary-strong",
+			false: "border-border"
+		},
+		/** Whether the card is a link or a button (hover and focus states). */
+		interactive: {
+			true: [
+				"cursor-pointer outline-none",
+				"data-[hovered]:not-data-[selected]:border-muted-foreground",
+				"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)"
+			],
+			false: ""
+		}
+	},
+	defaultVariants: {
+		selected: false,
+		interactive: false
+	}
+});
+const statCardLabelVariants = cva(["m-0 truncate text-2xs leading-(--leading-normal) font-medium tracking-wide uppercase", "text-muted-foreground"]);
+const statCardValueVariants = cva("m-0 mt-1 text-h4 leading-(--leading-snug) font-semibold tabular-nums break-words", {
+	variants: { 
+	/** What the number MEANS. Colour follows from it; it is never picked directly. */
+tone: {
+		neutral: "text-foreground",
+		positive: "text-success-strong",
+		negative: "text-destructive-strong",
+		warning: "text-warning-strong",
+		attention: "text-primary-strong"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const statCardSubVariants = cva("m-0 mt-1 text-xs leading-(--leading-normal) text-muted-foreground");
+/**
+* One headline figure.
+*
+* @example
+* <div className="grid gap-4 sm:grid-cols-3">
+*   <StatCard label="Open" value="$12,400" sub="18 invoices" />
+*   <StatCard label="Overdue" value="$3,100" sub="4 invoices" tone="negative" />
+*   <StatCard label="Collected" value="$9,800" tone="positive" href="/payments" />
+* </div>
+*/
+const StatCard = forwardRef(function StatCard({ label, value, sub, tone, isSelected, href, onPress, description, children, className, ...rest }, ref) {
+	const body = /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 flex-col",
+		title: description,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "stat-card-label",
+				className: cn(statCardLabelVariants(), "block"),
+				title: label,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "stat-card-value",
+				"data-tone": tone ?? "neutral",
+				className: cn(statCardValueVariants({ tone }), "block"),
+				children: value
+			}),
+			sub === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "stat-card-sub",
+				className: cn(statCardSubVariants(), "block"),
+				children: sub
+			}),
+			children
+		]
+	});
+	const classes = cn(statCardVariants({
+		selected: isSelected === true,
+		interactive: isSelected !== void 0 || onPress !== void 0 || href !== void 0
+	}), className);
+	const common = {
+		"data-slot": "stat-card",
+		"aria-label": rest["aria-label"]
+	};
+	if (isSelected !== void 0) return /* @__PURE__ */ jsx(ToggleButton, {
+		ref,
+		...common,
+		isSelected,
+		onChange: () => onPress?.(),
+		className: classes,
+		children: body
+	});
+	if (onPress) return /* @__PURE__ */ jsx(Button, {
+		ref,
+		...common,
+		onPress,
+		className: classes,
+		children: body
+	});
+	if (href !== void 0) return /* @__PURE__ */ jsx(Link, {
+		ref,
+		...common,
+		href,
+		className: classes,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...common,
+		className: classes,
+		children: body
+	});
+});
+//#endregion
+export { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };
+
+//# sourceMappingURL=stat-card.js.map

package/dist/stat-card/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","names":["AriaToggleButton","AriaButton","AriaLink"],"sources":["../../src/stat-card/stat-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode, type Ref } from \"react\";\nimport {\n  Button as AriaButton,\n  Link as AriaLink,\n  ToggleButton as AriaToggleButton,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * StatCard: one headline figure with its label and a line of context. A row\n * of them is a dashboard's summary strip.\n *\n * It exists because a summary strip is on almost every overview screen, and\n * without a shared card each screen picks its own label case, number size,\n * colour and height, so the same figure looks different on two pages.\n *\n * Three rules it holds:\n *\n * - The label is ONE line. A long label is cut with an ellipsis and the full\n *   text is on hover, so a row of cards keeps its numbers on one baseline\n *   instead of one card's label wrapping and pushing its number down.\n * - The number's colour comes from `tone`, a fixed set of meanings, never a\n *   colour. `neutral` is the default and is right for any figure without a\n *   verdict in it, including every zero.\n * - Cards in a row are the same height (`h-full` in a grid or flex row).\n *\n * A card can be a link (`href`, React Aria Link, so a router provider routes\n * it), a button (`onPress`), or a filter toggle (`isSelected` + `onPress`, a\n * React Aria ToggleButton with `aria-pressed` and one shared selected look).\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.\n */\nexport const statCardVariants = cva(\n  [\n    \"flex h-full min-w-0 flex-col p-4 text-start\",\n    \"rounded-lg border-(length:--border-width) bg-card text-card-foreground\",\n    // box-border and font-sans are not boilerplate: the reset in\n    // @seekalfred/styles is opt-in, so a consumer may load none.\n    \"box-border font-sans\",\n  ],\n  {\n    variants: {\n      /** A filter card that is the one applied. */\n      selected: {\n        true: \"border-primary-strong\",\n        false: \"border-border\",\n      },\n      /** Whether the card is a link or a button (hover and focus states). */\n      interactive: {\n        true: [\n          \"cursor-pointer outline-none\",\n          // A border, not a fill: a muted fill under the muted label fails contrast.\n          \"data-[hovered]:not-data-[selected]:border-muted-foreground\",\n          // outline-solid on the focus variant is load-bearing: outline-none\n          // sets the outline style the width utility resolves from.\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        false: \"\",\n      },\n    },\n    defaultVariants: { selected: false, interactive: false },\n  },\n);\n\nexport const statCardLabelVariants = cva([\n  \"m-0 truncate text-2xs leading-(--leading-normal) font-medium tracking-wide uppercase\",\n  \"text-muted-foreground\",\n]);\n\nexport const statCardValueVariants = cva(\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"m-0 mt-1 text-h4 leading-(--leading-snug) font-semibold tabular-nums break-words\",\n  {\n    variants: {\n      /** What the number MEANS. Colour follows from it; it is never picked directly. */\n      tone: {\n        neutral: \"text-foreground\",\n        positive: \"text-success-strong\",\n        negative: \"text-destructive-strong\",\n        warning: \"text-warning-strong\",\n        attention: \"text-primary-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\nexport const statCardSubVariants = cva(\n  \"m-0 mt-1 text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\nexport type StatCardTone = \"neutral\" | \"positive\" | \"negative\" | \"warning\" | \"attention\";\n\nexport interface StatCardProps {\n  /** What the figure is. One line; cut with an ellipsis, full text on hover. */\n  label: string;\n  /** The figure itself, already formatted. */\n  value: ReactNode;\n  /** One line of context under the figure. */\n  sub?: ReactNode;\n  /**\n   * What the figure means: `neutral` (default, and right for every zero),\n   * `positive`, `negative`, `warning` (part-way or waiting) or `attention`\n   * (a person has to look).\n   */\n  tone?: StatCardTone;\n  /**\n   * The card is a filter, and this says whether it is the one applied.\n   * Renders a toggle button with `aria-pressed`. Pair with `onPress`.\n   */\n  isSelected?: boolean;\n  /** Renders the card as a link to this URL. */\n  href?: string;\n  /** Renders the card as a button (or, with `isSelected`, a toggle). */\n  onPress?: () => void;\n  /** Hover text for the whole card. */\n  description?: string;\n  /** Anything under the context line. */\n  children?: ReactNode;\n  /** Layout classes for the card (margins, grid placement). */\n  className?: string;\n  \"aria-label\"?: string;\n}\n\n/**\n * One headline figure.\n *\n * @example\n * <div className=\"grid gap-4 sm:grid-cols-3\">\n *   <StatCard label=\"Open\" value=\"$12,400\" sub=\"18 invoices\" />\n *   <StatCard label=\"Overdue\" value=\"$3,100\" sub=\"4 invoices\" tone=\"negative\" />\n *   <StatCard label=\"Collected\" value=\"$9,800\" tone=\"positive\" href=\"/payments\" />\n * </div>\n */\nexport const StatCard = forwardRef<HTMLElement, StatCardProps>(function StatCard(\n  { label, value, sub, tone, isSelected, href, onPress, description, children, className, ...rest },\n  ref,\n) {\n  const body = (\n    // The hover text sits on a box that fills the card: React Aria's Button\n    // does not pass a `title` through to the element it renders.\n    <span className=\"flex min-w-0 flex-1 flex-col\" title={description}>\n      <span\n        data-slot=\"stat-card-label\"\n        className={cn(statCardLabelVariants(), \"block\")}\n        title={label}\n      >\n        {label}\n      </span>\n      <span\n        data-slot=\"stat-card-value\"\n        data-tone={tone ?? \"neutral\"}\n        className={cn(statCardValueVariants({ tone }), \"block\")}\n      >\n        {value}\n      </span>\n      {sub === undefined ? null : (\n        <span data-slot=\"stat-card-sub\" className={cn(statCardSubVariants(), \"block\")}>\n          {sub}\n        </span>\n      )}\n      {children}\n    </span>\n  );\n  const interactive = isSelected !== undefined || onPress !== undefined || href !== undefined;\n  const classes = cn(statCardVariants({ selected: isSelected === true, interactive }), className);\n  const common = { \"data-slot\": \"stat-card\", \"aria-label\": rest[\"aria-label\"] };\n\n  if (isSelected !== undefined) {\n    return (\n      <AriaToggleButton\n        ref={ref as Ref<HTMLButtonElement>}\n        {...common}\n        isSelected={isSelected}\n        onChange={() => onPress?.()}\n        className={classes}\n      >\n        {body}\n      </AriaToggleButton>\n    );\n  }\n  if (onPress) {\n    return (\n      <AriaButton\n        ref={ref as Ref<HTMLButtonElement>}\n        {...common}\n        onPress={onPress}\n        className={classes}\n      >\n        {body}\n      </AriaButton>\n    );\n  }\n  if (href !== undefined) {\n    return (\n      <AriaLink ref={ref as Ref<HTMLAnchorElement>} {...common} href={href} className={classes}>\n        {body}\n      </AriaLink>\n    );\n  }\n  return (\n    <div ref={ref as Ref<HTMLDivElement>} {...common} className={classes}>\n      {body}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,mBAAmB,IAC9B;CACE;CACA;CAGA;AACF,GACA;CACE,UAAU;;EAER,UAAU;GACR,MAAM;GACN,OAAO;EACT;;EAEA,aAAa;GACX,MAAM;IACJ;IAEA;IAGA;IACA;IACA;IACA;GACF;GACA,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,UAAU;EAAO,aAAa;CAAM;AACzD,CACF;AAEA,MAAa,wBAAwB,IAAI,CACvC,wFACA,uBACF,CAAC;AAED,MAAa,wBAAwB,IAGnC,oFACA;CACE,UAAU;;AAER,MAAM;EACJ,SAAS;EACT,UAAU;EACV,UAAU;EACV,SAAS;EACT,WAAW;CACb,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAa,sBAAsB,IACjC,mEACF;;;;;;;;;;;AA6CA,MAAa,WAAW,WAAuC,SAAS,SACtE,EAAE,OAAO,OAAO,KAAK,MAAM,YAAY,MAAM,SAAS,aAAa,UAAU,WAAW,GAAG,QAC3F,KACA;CACA,MAAM,OAGJ,qBAAC,QAAD;EAAM,WAAU;EAA+B,OAAO;EAAtD,UAAA;GACE,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GAAG,sBAAsB,GAAG,OAAO;IAC9C,OAAO;IAEN,UAAA;GACG,CAAA;GACN,oBAAC,QAAD;IACE,aAAU;IACV,aAAW,QAAQ;IACnB,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,OAAO;IAErD,UAAA;GACG,CAAA;GACL,QAAQ,KAAA,IAAY,OACnB,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAW,GAAG,oBAAoB,GAAG,OAAO;IACzE,UAAA;GACG,CAAA;GAEP;EACG;;CAGR,MAAM,UAAU,GAAG,iBAAiB;EAAE,UAAU,eAAe;EAAM,aADjD,eAAe,KAAA,KAAa,YAAY,KAAA,KAAa,SAAS,KAAA;CACD,CAAC,GAAG,SAAS;CAC9F,MAAM,SAAS;EAAE,aAAa;EAAa,cAAc,KAAK;CAAc;CAE5E,IAAI,eAAe,KAAA,GACjB,OACE,oBAACA,cAAD;EACO;EACL,GAAI;EACQ;EACZ,gBAAgB,UAAU;EAC1B,WAAW;EAEV,UAAA;CACe,CAAA;CAGtB,IAAI,SACF,OACE,oBAACC,QAAD;EACO;EACL,GAAI;EACK;EACT,WAAW;EAEV,UAAA;CACS,CAAA;CAGhB,IAAI,SAAS,KAAA,GACX,OACE,oBAACC,MAAD;EAAe;EAA+B,GAAI;EAAc;EAAM,WAAW;EAC9E,UAAA;CACO,CAAA;CAGd,OACE,oBAAC,OAAD;EAAU;EAA4B,GAAI;EAAQ,WAAW;EAC1D,UAAA;CACE,CAAA;AAET,CAAC"}