@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/badge/badge.js

@@ -73,6 +73,10 @@ const badgeVariants = cva([
 		shape: {
 			rounded: "rounded-md",
 			pill: "rounded-full"
+		},
+		wrap: {
+			true: "min-w-0 max-w-full shrink whitespace-normal break-words text-start",
+			false: ""
 		}
 	},
 	compoundVariants: [
@@ -171,7 +175,8 @@ const badgeVariants = cva([
 		tone: "neutral",
 		appearance: "soft",
 		size: "md",
-		shape: "rounded"
+		shape: "rounded",
+		wrap: false
 	}
 });
 /** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */
@@ -180,27 +185,29 @@ function iconKey(icon) {
 	const type = icon.type;
 	return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
 }
-const Badge = forwardRef(function Badge({ className, tone, appearance, size, shape, icon, children, ...props }, ref) {
+const Badge = forwardRef(function Badge({ className, tone, appearance, size, shape, wrap = false, icon, children, ...props }, ref) {
 	const content = useRef(null);
 	const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
 	const glyph = icon === void 0 || icon === null ? "" : iconKey(icon);
-	useMorphWidth(content, `${text ?? ""}|${glyph}`);
+	useMorphWidth(content, `${text ?? ""}|${glyph}`, !wrap);
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		...props,
 		"data-slot": "badge",
 		"data-tone": tone ?? "neutral",
+		"data-wrap": wrap || void 0,
 		className: cn(badgeVariants({
 			tone,
 			appearance,
 			size,
-			shape
+			shape,
+			wrap
 		}), className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "button-slot",
 			children: /* @__PURE__ */ jsxs("span", {
 				ref: content,
-				className: "inline-flex flex-none items-center gap-1",
+				className: wrap ? "inline-flex min-w-0 items-center gap-1" : "inline-flex flex-none items-center gap-1",
 				children: [glyph ? /* @__PURE__ */ jsx(SwapText, {
 					swapKey: glyph,
 					motion: "glyph",

package/dist/badge/badge.js.map

@@ -1 +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 {\n  forwardRef,\n  isValidElement,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.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    // Colour, border and fill ease over 240ms as the tone changes.\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle\",\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\">, VariantProps<typeof badgeVariants> {\n  /**\n   * A leading icon. A different icon component swaps in place (the new one grows in\n   * from small and blurred); the same one re-rendering stays still. Mark it\n   * `aria-hidden` when the label already says what it means.\n   */\n  icon?: ReactNode;\n}\n\n/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone, appearance, size, shape, icon, children, ...props },\n  ref,\n) {\n  const content = useRef<HTMLSpanElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : null;\n  const glyph = icon === undefined || icon === null ? \"\" : iconKey(icon);\n  // The pill follows its content: a new label or icon swaps in place while the width springs to the new size.\n  useMorphWidth(content, `${text ?? \"\"}|${glyph}`);\n  return (\n    <span\n      ref={ref}\n      {...props}\n      data-slot=\"badge\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(badgeVariants({ tone, appearance, size, shape }), className)}\n    >\n      <span className=\"button-slot\">\n        <span ref={content} className=\"inline-flex flex-none items-center gap-1\">\n          {glyph ? (\n            <SwapText swapKey={glyph} motion=\"glyph\" className=\"inline-flex items-center\">\n              {icon}\n            </SwapText>\n          ) : null}\n          {text === null ? (\n            children\n          ) : (\n            <SwapText swapKey={text} className=\"inline-block\">\n              {text}\n            </SwapText>\n          )}\n        </span>\n      </span>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,gBAAgB,IAC3B;CACE;CACA;CAKA;CACA;CAKA;CACA;CAEA;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;;AAaA,SAAS,QAAQ,MAAiB;CAChC,IAAI,CAAC,eAAe,IAAI,GAAG,OAAO;CAClC,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,KAAK,eAAe,KAAK,QAAQ;AAC7E;AAEA,MAAa,QAAQ,WAAwC,SAAS,MACpE,EAAE,WAAW,MAAM,YAAY,MAAM,OAAO,MAAM,UAAU,GAAG,SAC/D,KACA;CACA,MAAM,UAAU,OAAwB,IAAI;CAC5C,MAAM,OAAO,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,OAAO,QAAQ,IAAI;CAC/F,MAAM,QAAQ,SAAS,KAAA,KAAa,SAAS,OAAO,KAAK,QAAQ,IAAI;CAErE,cAAc,SAAS,GAAG,QAAQ,GAAG,GAAG,OAAO;CAC/C,OACE,oBAAC,QAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,aAAW,QAAQ;EACnB,WAAW,GAAG,cAAc;GAAE;GAAM;GAAY;GAAM;EAAM,CAAC,GAAG,SAAS;EAEzE,UAAA,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,qBAAC,QAAD;IAAM,KAAK;IAAS,WAAU;IAA9B,UAAA,CACG,QACC,oBAAC,UAAD;KAAU,SAAS;KAAO,QAAO;KAAQ,WAAU;KAChD,UAAA;IACO,CAAA,IACR,MACH,SAAS,OACR,WAEA,oBAAC,UAAD;KAAU,SAAS;KAAM,WAAU;KAChC,UAAA;IACO,CAAA,CAER;;EACF,CAAA;CACF,CAAA;AAEV,CAAC"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.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    // Colour, border and fill ease over 240ms as the tone changes.\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle\",\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       * Opt-in wrapping, for a tag in a table cell or a narrow column. Off, the\n       * badge is one line that never shrinks. On, it may shrink to its container\n       * and break the label across lines (long unbroken words too), the text\n       * starts at the leading edge, and the box grows in height. The base\n       * `whitespace-nowrap`, `w-fit` and `shrink-0` lose to these by merge order\n       * (cn runs tailwind-merge over our own classes).\n       */\n      wrap: {\n        true: \"min-w-0 max-w-full shrink whitespace-normal break-words text-start\",\n        false: \"\",\n      },\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\", wrap: false },\n  },\n);\n\nexport interface BadgeProps\n  extends ComponentPropsWithoutRef<\"span\">, VariantProps<typeof badgeVariants> {\n  /**\n   * A leading icon. A different icon component swaps in place (the new one grows in\n   * from small and blurred); the same one re-rendering stays still. Mark it\n   * `aria-hidden` when the label already says what it means.\n   */\n  icon?: ReactNode;\n  /**\n   * Let the label wrap onto more lines instead of staying on one. For a tag in\n   * a table cell or a narrow column: the badge shrinks to its container, the\n   * label breaks (even a long word with no spaces), the text starts at the\n   * leading edge and the height grows with the lines. Off by default, and then\n   * a badge is one line exactly as before. With a long label prefer\n   * `shape=\"rounded\"`: a multi-line `pill` has very round ends.\n   *\n   * The width does not spring to a new label while this is on (that morph\n   * measures the unwrapped width).\n   *\n   * @default false\n   */\n  wrap?: boolean;\n}\n\n/** The name an icon swaps under: a different component swaps; the same one re-rendering does not. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, tone, appearance, size, shape, wrap = false, icon, children, ...props },\n  ref,\n) {\n  const content = useRef<HTMLSpanElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : null;\n  const glyph = icon === undefined || icon === null ? \"\" : iconKey(icon);\n  // The pill follows its content: a new label or icon swaps in place while the width springs to the new size.\n  useMorphWidth(content, `${text ?? \"\"}|${glyph}`, !wrap);\n  return (\n    <span\n      ref={ref}\n      {...props}\n      data-slot=\"badge\"\n      data-tone={tone ?? \"neutral\"}\n      data-wrap={wrap || undefined}\n      className={cn(badgeVariants({ tone, appearance, size, shape, wrap }), className)}\n    >\n      <span className=\"button-slot\">\n        <span\n          ref={content}\n          className={wrap ? \"inline-flex min-w-0 items-center gap-1\" : \"inline-flex flex-none items-center gap-1\"}\n        >\n          {glyph ? (\n            <SwapText swapKey={glyph} motion=\"glyph\" className=\"inline-flex items-center\">\n              {icon}\n            </SwapText>\n          ) : null}\n          {text === null ? (\n            children\n          ) : (\n            <SwapText swapKey={text} className=\"inline-block\">\n              {text}\n            </SwapText>\n          )}\n        </span>\n      </span>\n    </span>\n  );\n});\n"],"mappings":"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"}

package/dist/bar-chart/bar-chart-series.d.ts

@@ -0,0 +1,75 @@
+//#region src/bar-chart/bar-chart-series.d.ts
+/**
+ * The series mode of BarChart: several measures per category, side by side
+ * (`layout="grouped"`) or stacked into one bar (`layout="stacked"`), on a
+ * categorical axis in data order, upright (`orientation="vertical"`) or as
+ * ranked rows (`orientation="horizontal"`). One series is a plain categorical
+ * or horizontal bar chart.
+ *
+ * Bars grow from the baseline the first time the chart is seen, a beat apart
+ * (no motion under reduced motion). Hover, drag or the arrow keys step through
+ * the categories: the active category keeps its colour while the rest step
+ * back, and the legend reads that category's values. The legend toggles a
+ * series off and on. A visually hidden table carries every value, and the plot
+ * is a slider over the categories.
+ */
+export interface BarChartSeries {
+  /** Stable identity, the key of this series' number in each datum's `values`. */
+  key: string;
+  /** Name in the legend and the data table. */
+  label: string;
+  /** Any CSS colour. Defaults to chart-1 to chart-4 in series order, then neutral steps. */
+  color?: string;
+}
+export interface BarChartSeriesDatum {
+  /** Stable identity of the category. */
+  key: string;
+  /** Full label for the readout and screen readers, such as "Brand search". */
+  label: string;
+  /** Short label on the category axis. Defaults to `label`. */
+  axisLabel?: string;
+  /**
+   * One value per series key. A missing value (`undefined`, `null` or not a
+   * finite number) draws no bar and reads as `missingLabel`. Negative values
+   * are drawn as zero: bars rise from a zero baseline.
+   */
+  values: Record<string, number | null | undefined>;
+}
+export interface BarChartSeriesProps {
+  data: BarChartSeriesDatum[];
+  /** The measures. Passing `series` is what turns on this mode. */
+  series: BarChartSeries[];
+  /** What is measured, such as "Spend by campaign". Names the chart for assistive technology. */
+  label: string;
+  /** The range on show, such as "Sep 15–21, 2026". Read with the name; not printed. */
+  period?: string;
+  /** Series side by side in each category, or stacked into one bar. @default "grouped" */
+  layout?: "grouped" | "stacked";
+  /** Upright columns, or rows that grow from the inline start (ranked lists). @default "vertical" */
+  orientation?: "vertical" | "horizontal";
+  /** Unit after each value in the readout and the table, such as "min". */
+  unit?: string;
+  /**
+   * Plot height in pixels. Upright: @default 176. Horizontal: 32px per
+   * category by default.
+   */
+  height?: number;
+  /** Formats values in the legend readout and the data table. */
+  formatValue?: (value: number, series: BarChartSeries) => string;
+  /** Formats the value axis. Defaults to a compact number, such as 1.2K. */
+  formatTick?: (value: number) => string;
+  /** Header of the first column in the data table read by screen readers. @default "Category" */
+  categoryLabel?: string;
+  /** Read in place of a missing value. @default "No data" */
+  missingLabel?: string;
+  /** Series toggles above the plot. Shown by default when there is more than one series. */
+  legend?: boolean;
+  /** Controlled hidden series keys. */
+  hiddenSeries?: string[];
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+//#endregion
+//# sourceMappingURL=bar-chart-series.d.ts.map

package/dist/bar-chart/bar-chart-series.js

@@ -0,0 +1,401 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/bar-chart/bar-chart-series.tsx
+/** Room past the top gridline, the share of a slot a category fills, the widest bar, the gap inside a group, the data-end radius, a row's default height. */
+const TOP = 12;
+const FILL = .62;
+const MAX_BAR = 28;
+const INNER_GAP = 2;
+const RADIUS = 4;
+const ROW = 32;
+/** Stagger between categories on the first reveal, and its cap. */
+const STAGGER_MS = 35;
+const STAGGER_CAP_MS = 360;
+const NEUTRAL = [
+	56,
+	42,
+	32
+];
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const COMPACT = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const colorOf = (item, index) => item.color ?? (index < 4 ? `var(--color-chart-${index + 1})` : `color-mix(in oklab, var(--color-foreground) ${NEUTRAL[(index - 4) % NEUTRAL.length]}%, var(--color-surface))`);
+/** The number to draw, or null when there is none. */
+const numberOf = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+/** Clean gridlines: the smallest step of 1, 2, 3 or 5 that covers the data in four rows or fewer. */
+function scaleFor(max) {
+	const safe = Math.max(max, 1);
+	const magnitude = 10 ** Math.floor(Math.log10(safe / 4));
+	for (const factor of [
+		1,
+		2,
+		3,
+		5,
+		10
+	]) {
+		const step = factor * magnitude;
+		const rows = Math.ceil(safe / step);
+		if (rows <= 4) return {
+			top: rows * step,
+			ticks: Array.from({ length: rows + 1 }, (_, row) => row * step)
+		};
+	}
+	return {
+		top: safe,
+		ticks: [0, safe]
+	};
+}
+/**
+* One bar as a path in plot pixels: `start` along the category axis, `size`
+* across it, from `from` to `to` along the value axis. Only the data end is
+* rounded, and only when `round`.
+*/
+function barPath(vertical, start, size, from, to, round, base) {
+	const f = (value) => value.toFixed(2);
+	const length = to - from;
+	if (size <= 0 || length <= .01) return "";
+	const r = round ? Math.min(RADIUS, size / 2, length) : 0;
+	if (vertical) {
+		const bottom = base - from;
+		const top = base - to;
+		const x = start;
+		return `M${f(x)} ${f(bottom)}V${f(top + r)}A${f(r)} ${f(r)} 0 0 1 ${f(x + r)} ${f(top)}H${f(x + size - r)}A${f(r)} ${f(r)} 0 0 1 ${f(x + size)} ${f(top + r)}V${f(bottom)}Z`;
+	}
+	const y = start;
+	return `M${f(from)} ${f(y)}H${f(to - r)}A${f(r)} ${f(r)} 0 0 1 ${f(to)} ${f(y + r)}V${f(y + size - r)}A${f(r)} ${f(r)} 0 0 1 ${f(to - r)} ${f(y + size)}H${f(from)}Z`;
+}
+const SeriesBarChart = forwardRef(function SeriesBarChart({ data, series, label, period, layout = "grouped", orientation = "vertical", unit = "", height: heightProp, formatValue = (value) => GROUPED.format(value), formatTick = (value) => COMPACT.format(value), categoryLabel = "Category", missingLabel = "No data", legend, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const plot = useRef(null);
+	const titleId = useId();
+	const vertical = orientation === "vertical";
+	const stacked = layout === "stacked";
+	const height = heightProp ?? (vertical ? 176 : Math.max(1, data.length) * ROW);
+	const suffix = unit ? ` ${unit}` : "";
+	const count = Math.max(data.length, 1);
+	const last = data.length - 1;
+	const [ownHidden, setOwnHidden] = useState(defaultHiddenSeries);
+	const hidden = hiddenSeries ?? ownHidden;
+	const toggle = (key) => {
+		const next = hidden.includes(key) ? hidden.filter((item) => item !== key) : [...hidden, key];
+		if (hiddenSeries === void 0) setOwnHidden(next);
+		onHiddenSeriesChange?.(next);
+	};
+	const visible = series.filter((item) => !hidden.includes(item.key));
+	const showLegend = legend ?? series.length > 1;
+	const peak = data.reduce((max, item) => {
+		const values = visible.map((line) => Math.max(0, numberOf(item.values[line.key]) ?? 0));
+		return Math.max(max, stacked ? values.reduce((sum, value) => sum + value, 0) : Math.max(0, ...values));
+	}, 0);
+	const { top, ticks } = useMemo(() => scaleFor(peak), [peak]);
+	const [active, setActive] = useState(null);
+	const index = active === null ? null : Math.min(active, last);
+	const scrubbing = index !== null && last >= 0;
+	const [width, setWidth] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const node = plot.current;
+		if (!node) return;
+		const read = () => setWidth(node.clientWidth);
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const [shown, setShown] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setShown(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setShown(true);
+		}, { threshold: .35 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const along = vertical ? width : height;
+	const length = Math.max(0, vertical ? height - TOP : width - TOP);
+	const slot = along / count;
+	const groupSize = Math.min(slot * FILL, (stacked ? 1 : Math.max(1, visible.length)) * MAX_BAR);
+	const barSize = stacked ? groupSize : Math.max(0, (groupSize - INNER_GAP * (visible.length - 1)) / Math.max(1, visible.length));
+	const toPx = (value) => value / (top || 1) * length;
+	const step = Math.min(STAGGER_MS, STAGGER_CAP_MS / count);
+	const bars = data.flatMap((item, at) => {
+		const groupStart = at * slot + (slot - groupSize) / 2;
+		let stack = 0;
+		const values = series.map((line) => ({
+			line,
+			value: numberOf(item.values[line.key])
+		}));
+		const outermost = [...values].reverse().find(({ line, value }) => !hidden.includes(line.key) && (value ?? 0) > 0)?.line.key;
+		return values.flatMap(({ line, value }, seriesAt) => {
+			if (hidden.includes(line.key) || value === null || value <= 0 || !width) return [];
+			const place = visible.indexOf(line);
+			const start = stacked ? groupStart : groupStart + place * (barSize + INNER_GAP);
+			const from = stacked ? toPx(stack) : 0;
+			stack += value;
+			const to = stacked ? toPx(stack) : toPx(value);
+			const d = barPath(vertical, start, barSize, from, to, !stacked || line.key === outermost, height);
+			return d ? [{
+				key: `${item.key}:${line.key}`,
+				category: item.key,
+				series: line.key,
+				d,
+				color: colorOf(line, seriesAt),
+				at
+			}] : [];
+		});
+	});
+	const pointAt = (clientX, clientY) => {
+		const rect = plot.current?.getBoundingClientRect();
+		if (!rect) return 0;
+		const offset = vertical ? clientX - rect.left : clientY - rect.top;
+		const size = vertical ? rect.width : rect.height;
+		if (!size) return 0;
+		const rtl = vertical && plot.current && getComputedStyle(plot.current).direction === "rtl";
+		const at = Math.floor((rtl ? size - offset : offset) / size * count);
+		return clamp(at, 0, last);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape" && scrubbing) {
+			event.preventDefault();
+			setActive(null);
+			return;
+		}
+		const from = index ?? -1;
+		const page = Math.min(5, count);
+		const next = {
+			ArrowLeft: from - 1,
+			ArrowUp: from - 1,
+			ArrowRight: index === null ? 0 : from + 1,
+			ArrowDown: index === null ? 0 : from + 1,
+			PageUp: from - page,
+			PageDown: from + page,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0 || last < 0) return;
+		event.preventDefault();
+		setActive(clamp(next, 0, last));
+	};
+	const read = (item, line) => {
+		const value = numberOf(item.values[line.key]);
+		return value === null ? missingLabel : `${formatValue(value, line)}${suffix}`;
+	};
+	const totalOf = (item) => visible.reduce((sum, line) => sum + (numberOf(item.values[line.key]) ?? 0), 0);
+	const reading = scrubbing ? data[index] : null;
+	const valueText = reading ? `${reading.label}: ${visible.map((line) => `${line.label} ${read(reading, line)}`).join(", ")}` : data.length ? `${data.length} ${categoryLabel.toLowerCase()}` : "No data";
+	const name = period ? `${label}, ${period}` : label;
+	const [tickHost, tickStyle] = vertical ? ["relative min-w-0 [grid-area:1/2]", (value) => ({ translate: `0 ${height - toPx(value)}px` })] : ["relative min-w-0 [grid-area:2/2]", (value) => ({ insetInlineStart: `${toPx(value)}px` })];
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "bar-chart",
+		"data-layout": layout,
+		"data-orientation": orientation,
+		"aria-labelledby": titleId,
+		className: cn("m-0 grid min-w-0 content-start gap-4 box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx("figcaption", {
+				id: titleId,
+				className: "sr-only",
+				children: name
+			}),
+			showLegend ? /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": `${label} series`,
+				className: "-mx-2 flex min-w-0 flex-wrap gap-x-1 gap-y-0.5",
+				children: series.map((line, at) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-slot": "bar-chart-toggle",
+					"aria-pressed": !hidden.includes(line.key),
+					onClick: () => toggle(line.key),
+					style: { "--series": colorOf(line, at) },
+					className: "chart-legend-toggle",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "bar-chart-swatch"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "chart-toggle-label",
+							children: line.label
+						}),
+						reading && !hidden.includes(line.key) ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "bar-chart-toggle-value",
+							"aria-hidden": "true",
+							className: "tabular-nums text-foreground",
+							children: read(reading, line)
+						}) : null
+					]
+				}, line.key))
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "bar-chart-chart",
+				"data-scrubbing": scrubbing || void 0,
+				"data-shown": shown || void 0,
+				className: vertical ? "bar-chart-frame" : "bar-chart-frame-horizontal",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						"data-slot": "bar-chart-categories",
+						className: cn("relative min-w-0", vertical ? "overflow-hidden [grid-area:2/1]" : "[grid-area:1/1]"),
+						children: data.map((item, at) => /* @__PURE__ */ jsx("span", {
+							"data-category": item.key,
+							"data-active": scrubbing && index === at || void 0,
+							className: "bar-chart-category",
+							style: vertical ? {
+								insetInlineStart: `${at * slot}px`,
+								width: `${slot}px`
+							} : { height: `${slot}px` },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.axisLabel ?? item.label
+							})
+						}, item.key))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: plot,
+						className: cn("relative min-w-0", vertical ? "[grid-area:1/1]" : "[grid-area:1/2]"),
+						style: { height },
+						children: [/* @__PURE__ */ jsxs("svg", {
+							width: "100%",
+							height,
+							"aria-hidden": "true",
+							focusable: "false",
+							className: "bar-chart-plot block overflow-hidden",
+							children: [
+								ticks.slice(1).map((value) => vertical ? /* @__PURE__ */ jsx("line", {
+									className: "line-chart-grid",
+									x1: 0,
+									x2: "100%",
+									y1: Math.round(height - toPx(value)) + .5,
+									y2: Math.round(height - toPx(value)) + .5
+								}, value) : /* @__PURE__ */ jsx("line", {
+									className: "line-chart-grid",
+									y1: 0,
+									y2: "100%",
+									x1: Math.round(toPx(value)) + .5,
+									x2: Math.round(toPx(value)) + .5
+								}, value)),
+								bars.map((item) => /* @__PURE__ */ jsx("path", {
+									"data-slot": "bar-chart-bar",
+									"data-category": item.category,
+									"data-series": item.series,
+									"data-active": scrubbing && index === item.at || void 0,
+									d: item.d,
+									className: "bar-chart-series-bar",
+									style: {
+										"--series": item.color,
+										transformOrigin: vertical ? `0 ${height}px` : "0 0",
+										transitionDelay: shown ? `0s, ${item.at * step}ms` : void 0
+									}
+								}, item.key)),
+								vertical ? /* @__PURE__ */ jsx("line", {
+									className: "line-chart-baseline",
+									x1: 0,
+									x2: "100%",
+									y1: height - .5,
+									y2: height - .5
+								}) : /* @__PURE__ */ jsx("line", {
+									className: "line-chart-baseline",
+									y1: 0,
+									y2: "100%",
+									x1: .5,
+									x2: .5
+								})
+							]
+						}), /* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-chart-scrubber",
+							role: "slider",
+							tabIndex: data.length ? 0 : -1,
+							"aria-label": `${label}, explore by ${categoryLabel.toLowerCase()}`,
+							"aria-orientation": vertical ? "horizontal" : "vertical",
+							"aria-valuemin": 1,
+							"aria-valuemax": Math.max(1, data.length),
+							"aria-valuenow": (index ?? 0) + 1,
+							"aria-valuetext": valueText,
+							onPointerDown: (event) => {
+								if (event.pointerType !== "mouse") event.currentTarget.setPointerCapture?.(event.pointerId);
+								setActive(pointAt(event.clientX, event.clientY));
+							},
+							onPointerMove: (event) => {
+								if (event.pointerType === "mouse" || event.buttons) setActive(pointAt(event.clientX, event.clientY));
+							},
+							onPointerUp: (event) => {
+								if (event.pointerType !== "mouse") setActive(null);
+							},
+							onPointerCancel: () => setActive(null),
+							onPointerLeave: (event) => {
+								if (event.pointerType === "mouse") setActive(null);
+							},
+							onKeyDown,
+							onBlur: () => setActive(null),
+							onFocus: (event) => {
+								if (event.currentTarget.matches(":focus-visible") && last >= 0) setActive((current) => current ?? 0);
+							},
+							className: "bar-chart-scrubber"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						"data-slot": "bar-chart-ticks",
+						className: tickHost,
+						children: ticks.map((value) => /* @__PURE__ */ jsx("span", {
+							"data-tick": value,
+							className: vertical ? "line-chart-tick" : "bar-chart-tick-horizontal",
+							style: tickStyle(value),
+							children: /* @__PURE__ */ jsx("span", {
+								className: cn("block text-xs leading-none tabular-nums text-muted-foreground", vertical ? "-translate-y-1/2" : ""),
+								children: formatTick(value)
+							})
+						}, value))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: name }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: categoryLabel
+						}),
+						visible.map((line) => /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: line.label
+						}, line.key)),
+						stacked && visible.length > 1 ? /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Total"
+						}) : null
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: data.map((item) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: item.label
+						}),
+						visible.map((line) => /* @__PURE__ */ jsx("td", { children: read(item, line) }, line.key)),
+						stacked && visible.length > 1 ? /* @__PURE__ */ jsxs("td", { children: [formatValue(totalOf(item), visible[0]), suffix] }) : null
+					] }, item.key)) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { SeriesBarChart };
+
+//# sourceMappingURL=bar-chart-series.js.map