@seekalfred/primitives 0.6.0 → 0.7.1

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

@@ -1 +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"}
+{"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 red, and the menu's highlight with it. Pair it with a trash icon. */\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  // Resets the browser's own button background, border and text colour: the pill\n  // paints the surface and sets the colour, which the halves inherit.\n  \"border-0 bg-transparent text-inherit\",\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\n// One fully rounded pill in the brand primary (orange, black text, as Button's\n// primary): both halves show the one fill, set apart by a subtle divider, so\n// they can never drift apart. Hover and press repaint a half with the primary\n// hover and pressed tokens, as Button does; the menu half keeps the rest fill while its menu is open.\nconst looks = {\n  primary: {\n    pill: \"bg-primary text-primary-foreground shadow-surface rounded-full\",\n    main: \"h-(--density-control-h-md) ps-(--density-control-pad-md) pe-4 text-base rounded-s-full data-[hovered]:bg-primary-hover data-[pressed]:bg-primary-pressed\",\n    trigger:\n      \"h-(--density-control-h-md) w-11 rounded-e-full border-s-(length:--border-width) border-primary-foreground/20 aria-[expanded=false]:data-[hovered]:bg-primary-hover aria-[expanded=false]:data-[pressed]:bg-primary-pressed\",\n  },\n  secondary: {\n    pill: \"bg-surface text-foreground border-(length:--border-width) border-border shadow-surface rounded-full\",\n    main: \"h-(--density-control-h-sm) ps-(--density-control-pad-sm) pe-3 text-sm rounded-s-full data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n    trigger:\n      \"h-(--density-control-h-sm) w-9 rounded-e-full border-s-(length:--border-width) border-border data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n  },\n} as const;\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 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\"\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\" offset={6} shouldFocusWrap>\n          {actions.map((action) => (\n            <MenuItem\n              key={action.label}\n              id={action.label}\n              textValue={action.label}\n              isDisabled={action.isDisabled}\n              onAction={action.onSelect}\n              destructive={action.destructive}\n            >\n              {action.icon ? (\n                <span\n                  aria-hidden=\"true\"\n                  className={action.destructive ? \"inline-flex\" : \"inline-flex text-text-secondary\"}\n                >\n                  {action.icon}\n                </span>\n              ) : 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;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAMV,MAAM,QAAQ;CACZ,SAAS;EACP,MAAM;EACN,MAAM;EACN,SACE;CACJ;CACA,WAAW;EACT,MAAM;EACN,MAAM;EACN,SACE;CACJ;AACF;;;;;;;;;;;;;;;AAgBA,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,QAAQ;GAAG,iBAAA;GACrC,UAAA,QAAQ,KAAK,WACZ,qBAACC,YAAD;IAEE,IAAI,OAAO;IACX,WAAW,OAAO;IAClB,YAAY,OAAO;IACnB,UAAU,OAAO;IACjB,aAAa,OAAO;IANtB,UAAA,CAQG,OAAO,OACN,oBAAC,QAAD;KACE,eAAY;KACZ,WAAW,OAAO,cAAc,gBAAgB;KAE/C,UAAA,OAAO;IACJ,CAAA,IACJ,MACH,OAAO,KACA;GAhBH,GAAA,OAAO,KAgBJ,CACX;EACG,CAAA,CACK,EAAA,CAAA,CACV;;AAET"}

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

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

package/dist/stat-card/index.js

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

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

@@ -8,7 +8,14 @@ import { ReactNode } from "react";
  * 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 figure is a counter: a number rolls up to its value the first time the
+ * card scrolls into view, and when `value` changes the digits that changed roll
+ * to their new faces, the way the number moved. A label, a line of context or
+ * a change that is replaced rises in while the old copy lifts away. Reduced
+ * motion jumps and fades instead. A value that is not a plain number
+ * (a date, "N/A", a node) is shown as it is.
+ *
+ * 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
@@ -30,6 +37,8 @@ export declare const statCardVariants: (props?: ({
   selected?: boolean | null | undefined;
   interactive?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The top row: the label on the left, the change pill on the right. */
+export declare const statCardHeaderVariants: (props?: 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;
@@ -39,10 +48,21 @@ export type StatCardTone = "neutral" | "positive" | "negative" | "warning" | "at
 export interface StatCardProps {
   /** What the figure is. One line; cut with an ellipsis, full text on hover. */
   label: string;
-  /** The figure itself, already formatted. */
+  /**
+   * The figure itself, already formatted. A plain number (`12400`), or a string
+   * made of a number with text around it (`"$12,400"`, `"42 days"`, `"98.5%"`),
+   * counts up on first view and rolls to each new value. Anything else is
+   * shown as it is.
+   */
   value: ReactNode;
-  /** One line of context under the figure. */
+  /** One line of context under the figure. A string that changes swaps in place. */
   sub?: ReactNode;
+  /**
+   * A change shown as a pill beside the label, such as `"+12.4%"`. A leading `+`
+   * reads green and a leading `-` red; no sign is neutral. A new value swaps in
+   * place and the pill follows its width.
+   */
+  change?: string;
   /**
    * What the figure means: `neutral` (default, and right for every zero),
    * `positive`, `negative`, `warning` (part-way or waiting) or `attention`
@@ -71,7 +91,7 @@ export interface StatCardProps {
  *
  * @example
  * <div className="grid gap-4 sm:grid-cols-3">
- *   <StatCard label="Open" value="$12,400" sub="18 invoices" />
+ *   <StatCard label="Open" value="$12,400" sub="18 invoices" change="+4.2%" />
  *   <StatCard label="Overdue" value="$3,100" sub="4 invoices" tone="negative" />
  *   <StatCard label="Collected" value="$9,800" tone="positive" href="/payments" />
  * </div>

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

@@ -1,7 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { SwapText } from "../lib/swap-text.js";
+import { AnimatedCounter } from "../animated-counter/animated-counter.js";
+import { Badge } from "../badge/badge.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { Button, Link, ToggleButton } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/stat-card/stat-card.tsx
@@ -13,7 +16,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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 figure is a counter: a number rolls up to its value the first time the
+* card scrolls into view, and when `value` changes the digits that changed roll
+* to their new faces, the way the number moved. A label, a line of context or
+* a change that is replaced rises in while the old copy lifts away. Reduced
+* motion jumps and fades instead. A value that is not a plain number
+* (a date, "N/A", a node) is shown as it is.
+*
+* 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
@@ -32,8 +42,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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",
+	"flex h-full min-w-0 flex-col p-6 text-start",
+	"rounded-panel border-(length:--border-width) bg-surface text-foreground shadow-resting",
 	"box-border font-sans"
 ], {
 	variants: {
@@ -60,8 +70,10 @@ const statCardVariants = cva([
 		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", {
+/** The top row: the label on the left, the change pill on the right. */
+const statCardHeaderVariants = cva("mb-8 flex min-h-6 items-center justify-between gap-3");
+const statCardLabelVariants = cva(["m-0 min-w-0 flex-1 text-sm leading-(--leading-normal) font-normal", "text-text-secondary"]);
+const statCardValueVariants = cva("m-0 font-display text-h2 leading-none font-semibold tabular-nums break-words **:data-[slot=animated-counter]:text-inherit", {
 	variants: { 
 	/** What the number MEANS. Colour follows from it; it is never picked directly. */
 tone: {
@@ -73,38 +85,123 @@ tone: {
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const statCardSubVariants = cva("m-0 mt-1 text-xs leading-(--leading-normal) text-muted-foreground");
+const statCardSubVariants = cva("m-0 mt-4 text-sm leading-(--leading-normal) text-muted-foreground");
+/** The number in a piece of text, for the direction a swap moves: a larger one rises from below. */
+const amountIn = (text) => Number(text.replace(/,/g, "").match(/-?\d+(?:\.\d+)?/)?.[0] ?? NaN);
+/** 1 when the new text holds a number that did not shrink, -1 when it did. Updated during render. */
+function useSwapDirection(text) {
+	const [shown, setShown] = useState({
+		text,
+		dir: 1
+	});
+	if (shown.text !== text) setShown({
+		text,
+		dir: amountIn(text ?? "") < amountIn(shown.text ?? "") ? -1 : 1
+	});
+	return shown.dir;
+}
+/** Copy that is replaced rises in from the side it moved toward and the old copy lifts away. */
+function Swap({ text, className, children }) {
+	const dir = useSwapDirection(text);
+	return /* @__PURE__ */ jsx(SwapText, {
+		swapKey: text,
+		dir,
+		className: cn("block min-w-0", className),
+		children
+	});
+}
+const FORMAT = {};
+const format = (decimals) => FORMAT[decimals] ??= new Intl.NumberFormat("en-US", {
+	minimumFractionDigits: decimals,
+	maximumFractionDigits: decimals
+});
+/**
+* A number with text around it, or null. Only a figure that the counter would
+* draw back as the very same text qualifies ("12400" would come back as
+* "12,400", so it is shown as written rather than quietly reformatted).
+*/
+function figureOf(value) {
+	if (typeof value === "number") {
+		if (!Number.isFinite(value)) return null;
+		return {
+			prefix: "",
+			value,
+			decimals: Math.min(4, (String(value).split(".")[1] ?? "").length),
+			suffix: ""
+		};
+	}
+	if (typeof value !== "string") return null;
+	const match = /^(\D*?)(-?\d[\d,]*(?:\.\d+)?)(\D*)$/.exec(value);
+	if (!match) return null;
+	const [, prefix = "", digits = "", suffix = ""] = match;
+	const decimals = (digits.split(".")[1] ?? "").length;
+	const number = Number(digits.replace(/,/g, ""));
+	if (!Number.isFinite(number) || `${prefix}${format(decimals).format(number)}${suffix}` !== value) return null;
+	return {
+		prefix,
+		value: number,
+		decimals,
+		suffix
+	};
+}
+const changeTone = (change) => /^\+/.test(change) ? "success" : /^[-−]/.test(change) ? "danger" : "neutral";
 /**
 * One headline figure.
 *
 * @example
 * <div className="grid gap-4 sm:grid-cols-3">
-*   <StatCard label="Open" value="$12,400" sub="18 invoices" />
+*   <StatCard label="Open" value="$12,400" sub="18 invoices" change="+4.2%" />
 *   <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 StatCard = forwardRef(function StatCard({ label, value, sub, change, tone, isSelected, href, onPress, description, children, className, ...rest }, ref) {
+	const figure = figureOf(value);
 	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__ */ jsxs("span", {
+				className: statCardHeaderVariants(),
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "stat-card-label",
+					className: cn(statCardLabelVariants(), "block"),
+					children: /* @__PURE__ */ jsx(Swap, {
+						text: label,
+						className: "*:max-w-full",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "block truncate",
+							title: label,
+							children: label
+						})
+					})
+				}), change ? /* @__PURE__ */ jsx(Badge, {
+					shape: "pill",
+					tone: changeTone(change),
+					appearance: changeTone(change) === "neutral" ? "outline" : "soft",
+					className: "tabular-nums",
+					children: change
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-card-value",
 				"data-tone": tone ?? "neutral",
 				className: cn(statCardValueVariants({ tone }), "block"),
-				children: value
+				children: figure ? /* @__PURE__ */ jsx(AnimatedCounter, {
+					value: figure.value,
+					decimals: figure.decimals,
+					prefix: figure.prefix,
+					suffix: figure.suffix,
+					animateOnView: true
+				}) : value
 			}),
 			sub === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-card-sub",
 				className: cn(statCardSubVariants(), "block"),
-				children: sub
+				children: typeof sub === "string" ? /* @__PURE__ */ jsx(Swap, {
+					text: sub,
+					children: sub
+				}) : sub
 			}),
 			children
 		]
@@ -147,6 +244,6 @@ const StatCard = forwardRef(function StatCard({ label, value, sub, tone, isSelec
 	});
 });
 //#endregion
-export { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };
+export { StatCard, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };
 
 //# sourceMappingURL=stat-card.js.map

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

@@ -1 +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"}
+{"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, useState, 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 { AnimatedCounter } from \"../animated-counter/animated-counter.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.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 * The figure is a counter: a number rolls up to its value the first time the\n * card scrolls into view, and when `value` changes the digits that changed roll\n * to their new faces, the way the number moved. A label, a line of context or\n * a change that is replaced rises in while the old copy lifts away. Reduced\n * motion jumps and fades instead. A value that is not a plain number\n * (a date, \"N/A\", a node) is shown as it is.\n *\n * 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-6 text-start\",\n    \"rounded-panel border-(length:--border-width) bg-surface text-foreground shadow-resting\",\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\n/** The top row: the label on the left, the change pill on the right. */\nexport const statCardHeaderVariants = cva(\"mb-8 flex min-h-6 items-center justify-between gap-3\");\n\nexport const statCardLabelVariants = cva([\n  \"m-0 min-w-0 flex-1 text-sm leading-(--leading-normal) font-normal\",\n  \"text-text-secondary\",\n]);\n\nexport const statCardValueVariants = cva(\n  // The counter sets its own colour; this makes it follow the tone instead.\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 font-display text-h2 leading-none font-semibold tabular-nums break-words **:data-[slot=animated-counter]:text-inherit\",\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-4 text-sm 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  /**\n   * The figure itself, already formatted. A plain number (`12400`), or a string\n   * made of a number with text around it (`\"$12,400\"`, `\"42 days\"`, `\"98.5%\"`),\n   * counts up on first view and rolls to each new value. Anything else is\n   * shown as it is.\n   */\n  value: ReactNode;\n  /** One line of context under the figure. A string that changes swaps in place. */\n  sub?: ReactNode;\n  /**\n   * A change shown as a pill beside the label, such as `\"+12.4%\"`. A leading `+`\n   * reads green and a leading `-` red; no sign is neutral. A new value swaps in\n   * place and the pill follows its width.\n   */\n  change?: string;\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/** The number in a piece of text, for the direction a swap moves: a larger one rises from below. */\nconst amountIn = (text: string) => Number(text.replace(/,/g, \"\").match(/-?\\d+(?:\\.\\d+)?/)?.[0] ?? NaN);\n\n/** 1 when the new text holds a number that did not shrink, -1 when it did. Updated during render. */\nfunction useSwapDirection(text: string | undefined) {\n  const [shown, setShown] = useState({ text, dir: 1 });\n  if (shown.text !== text) {\n    setShown({ text, dir: amountIn(text ?? \"\") < amountIn(shown.text ?? \"\") ? -1 : 1 });\n  }\n  return shown.dir;\n}\n\n/** Copy that is replaced rises in from the side it moved toward and the old copy lifts away. */\nfunction Swap({\n  text,\n  className,\n  children,\n}: {\n  text: string;\n  className?: string;\n  children: ReactNode;\n}) {\n  const dir = useSwapDirection(text);\n  return (\n    <SwapText swapKey={text} dir={dir} className={cn(\"block min-w-0\", className)}>\n      {children}\n    </SwapText>\n  );\n}\n\ninterface Figure {\n  prefix: string;\n  value: number;\n  decimals: number;\n  suffix: string;\n}\n\nconst FORMAT: Record<number, Intl.NumberFormat> = {};\nconst format = (decimals: number) =>\n  (FORMAT[decimals] ??= new Intl.NumberFormat(\"en-US\", {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  }));\n\n/**\n * A number with text around it, or null. Only a figure that the counter would\n * draw back as the very same text qualifies (\"12400\" would come back as\n * \"12,400\", so it is shown as written rather than quietly reformatted).\n */\nfunction figureOf(value: ReactNode): Figure | null {\n  if (typeof value === \"number\") {\n    if (!Number.isFinite(value)) return null;\n    const decimals = Math.min(4, (String(value).split(\".\")[1] ?? \"\").length);\n    return { prefix: \"\", value, decimals, suffix: \"\" };\n  }\n  if (typeof value !== \"string\") return null;\n  const match = /^(\\D*?)(-?\\d[\\d,]*(?:\\.\\d+)?)(\\D*)$/.exec(value);\n  if (!match) return null;\n  const [, prefix = \"\", digits = \"\", suffix = \"\"] = match;\n  const decimals = (digits.split(\".\")[1] ?? \"\").length;\n  const number = Number(digits.replace(/,/g, \"\"));\n  if (!Number.isFinite(number) || `${prefix}${format(decimals).format(number)}${suffix}` !== value) {\n    return null;\n  }\n  return { prefix, value: number, decimals, suffix };\n}\n\nconst changeTone = (change: string) =>\n  /^\\+/.test(change) ? \"success\" : /^[-−]/.test(change) ? \"danger\" : \"neutral\";\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\" change=\"+4.2%\" />\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, change, tone, isSelected, href, onPress, description, children, className, ...rest },\n  ref,\n) {\n  const figure = figureOf(value);\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 className={statCardHeaderVariants()}>\n        <span data-slot=\"stat-card-label\" className={cn(statCardLabelVariants(), \"block\")}>\n          {/* *:max-w-full: the arriving copy is an inline-block, whose shrink-to-fit width is the whole unwrapped label; capped, the label truncates. */}\n          <Swap text={label} className=\"*:max-w-full\">\n            <span className=\"block truncate\" title={label}>\n              {label}\n            </span>\n          </Swap>\n        </span>\n        {change ? (\n          <Badge\n            shape=\"pill\"\n            tone={changeTone(change)}\n            appearance={changeTone(change) === \"neutral\" ? \"outline\" : \"soft\"}\n            className=\"tabular-nums\"\n          >\n            {change}\n          </Badge>\n        ) : null}\n      </span>\n      <span\n        data-slot=\"stat-card-value\"\n        data-tone={tone ?? \"neutral\"}\n        className={cn(statCardValueVariants({ tone }), \"block\")}\n      >\n        {figure ? (\n          <AnimatedCounter\n            value={figure.value}\n            decimals={figure.decimals}\n            prefix={figure.prefix}\n            suffix={figure.suffix}\n            animateOnView\n          />\n        ) : (\n          value\n        )}\n      </span>\n      {sub === undefined ? null : (\n        <span data-slot=\"stat-card-sub\" className={cn(statCardSubVariants(), \"block\")}>\n          {typeof sub === \"string\" ? <Swap text={sub}>{sub}</Swap> : 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":"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"}

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+import { Stepper, StepperOrientation, StepperProps, StepperStatus, StepperStep } from "./stepper.js";
+export { Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep };

package/dist/stepper/index.js

@@ -0,0 +1,2 @@
+import { Stepper } from "./stepper.js";
+export { Stepper };

package/dist/stepper/stepper.d.ts

@@ -0,0 +1,51 @@
+//#region src/stepper/stepper.d.ts
+/**
+ * Stepper: a steps indicator for onboarding, checkout and setup flows. Place it
+ * above (horizontal) or beside (vertical) the step content and drive it with
+ * `current`; set `current` to `steps.length` once every step is done.
+ *
+ * Moving on fills the connector behind the step that was finished (a jump
+ * across several steps fills or drains them one after another), the number turns
+ * into a check that draws itself, and a ring grows out behind the new current
+ * step. A step marked `error` morphs its marker into an alert. A changed
+ * description rises in while the old one lifts away, and the steps below follow
+ * the new height. Nothing animates on first render.
+ *
+ * Pass `onStepSelect` to let people return to completed steps by click or
+ * keyboard (arrow keys move between the steps they can reach). Without it the
+ * stepper is a read-only indicator. A horizontal stepper folds to markers on
+ * its own below 30rem and names the current step underneath.
+ */
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperStatus = "complete" | "current" | "upcoming" | "error";
+export interface StepperStep {
+  /** Stable key, so each step keeps its own motion when the list changes. */
+  id: string;
+  label: string;
+  /** A short hint under the label. */
+  description?: string;
+  /** Marks the step as failed: the marker morphs into an alert and this message replaces the description. */
+  error?: string;
+}
+export interface StepperProps {
+  steps: StepperStep[];
+  /** Index of the step in progress. `steps.length` marks the whole flow complete. */
+  current: number;
+  /** @default "horizontal" */
+  orientation?: StepperOrientation;
+  /** Called with the index of a completed step when it is chosen. Without it the stepper is a read-only indicator. */
+  onStepSelect?: (index: number) => void;
+  /** `current` shows only the active step's description, for tight spaces. Errors always show. @default "all" */
+  details?: "all" | "current";
+  /** Markers only; labels stay available to assistive tech. A horizontal stepper switches to this below 30rem on its own and shows the current step's label underneath. */
+  compact?: boolean;
+  /** Accessible name for the stepper. @default "Progress" */
+  label?: string;
+  /** Announced, and shown in the compact caption, once every step is complete. @default "All steps complete" */
+  completeLabel?: string;
+  /** Extra classes for the stepper. Merged last. */
+  className?: string;
+}
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=stepper.d.ts.map