@seekalfred/primitives 0.7.3 → 0.7.4

package/dist/avatar/avatar.js

@@ -25,17 +25,34 @@ const avatarVariants = cva([
 	"relative inline-flex shrink-0 items-center justify-center",
 	"rounded-full",
 	"box-border",
-	"font-sans font-medium",
-	"bg-muted text-foreground"
+	"font-sans font-medium"
 ], {
-	variants: { size: {
-		xs: "size-5 text-2xs leading-(--leading-none)",
-		sm: "size-6 text-2xs leading-(--leading-none)",
-		md: "size-8 text-sm leading-(--leading-none)",
-		lg: "size-10 text-sm leading-(--leading-none)",
-		xl: "size-16 text-base leading-(--leading-none)"
-	} },
-	defaultVariants: { size: "md" }
+	variants: {
+		size: {
+			xs: "size-5 text-2xs leading-(--leading-none)",
+			sm: "size-6 text-2xs leading-(--leading-none)",
+			md: "size-8 text-sm leading-(--leading-none)",
+			lg: "size-10 text-sm leading-(--leading-none)",
+			xl: "size-16 text-base leading-(--leading-none)"
+		},
+		/**
+		* The fill behind the initials. Every pair is one the token contrast
+		* contract already grades: foreground on muted, primary-foreground on
+		* primary, and for `brand` secondary-foreground and tertiary-foreground
+		* (both the same ink) on each end of the gradient. `brand` is the
+		* periwinkle-to-teal edge of a highlighted Card, laid as a fill: the
+		* assistant's avatar in a chat, beside `primary` for the person.
+		*/
+		tone: {
+			neutral: "bg-muted text-foreground",
+			primary: "bg-primary text-primary-foreground",
+			brand: "bg-linear-to-r from-secondary to-tertiary text-secondary-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "neutral"
+	}
 });
 /** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */
 const dotPlace = {
@@ -45,7 +62,7 @@ const dotPlace = {
 	lg: "bottom-0 end-0 size-3",
 	xl: "bottom-1 end-1 size-3.5"
 };
-const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback, presence, ...props }, ref) {
+const Avatar = forwardRef(function Avatar({ className, size, tone, src, alt, fallback, presence, ...props }, ref) {
 	const [status, setStatus] = useState(src === void 0 ? "idle" : "loading");
 	/**
 	* Reset when src changes, during RENDER rather than in an effect.
@@ -80,7 +97,11 @@ const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback,
 		...props,
 		"data-slot": "avatar",
 		"data-status": status,
-		className: cn(avatarVariants({ size }), className),
+		"data-tone": tone ?? "neutral",
+		className: cn(avatarVariants({
+			size,
+			tone
+		}), className),
 		children: [
 			showImage ? /* @__PURE__ */ jsx("img", {
 				ref: imageRef,

package/dist/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n    \"bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */\nconst dotPlace = {\n  xs: \"bottom-0 end-0 size-1.5\",\n  sm: \"bottom-0 end-0 size-2\",\n  md: \"bottom-0 end-0 size-2.5\",\n  lg: \"bottom-0 end-0 size-3\",\n  xl: \"bottom-1 end-1 size-3.5\",\n} as const;\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * A small dot at the corner: `online` or `offline`. It grows in when it appears,\n   * shrinks away when it goes, and swaps when it changes. Its word is read to\n   * assistive technology beside the name.\n   */\n  presence?: \"online\" | \"offline\";\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, src, alt, fallback, presence, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    } else if (node) {\n      // Still downloading after mount: it fades in from a soft blur when it arrives. A photo that\n      // is already decoded shows at once, so cached photos never fade.\n      node.dataset.loading = \"\";\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      className={cn(avatarVariants({ size }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          key={src}\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"avatar-photo size-full rounded-[inherit] object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={(event) => {\n            delete event.currentTarget.dataset.loading;\n            setStatus(\"loaded\");\n          }}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span\n          data-slot=\"avatar-fallback\"\n          aria-hidden=\"true\"\n          className={cn(\"select-none\", src !== undefined && \"motion-safe:animate-avatar-fallback-in\")}\n        >\n          {fallback}\n        </span>\n      )}\n      {presence === undefined ? null : <span className=\"sr-only\">{presence}</span>}\n      <SwapText\n        swapKey={presence ?? \"\"}\n        motion=\"dot\"\n        className={cn(\"absolute z-10\", dotPlace[size ?? \"md\"])}\n      >\n        <span\n          data-slot=\"avatar-presence\"\n          data-presence={presence}\n          aria-hidden=\"true\"\n          className={cn(\n            \"block size-full rounded-full border-(length:--border-width) border-background box-border\",\n            presence === \"online\" ? \"bg-success-strong\" : \"bg-muted-foreground\",\n          )}\n        />\n      </SwapText>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EAUR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAsCA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,KAAK,KAAK,UAAU,UAAU,GAAG,SACpD,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;OAC/C,IAAI,MAGT,KAAK,QAAQ,UAAU;CAE3B,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAJnD,UAAA;GAMG,YACC,oBAAC,OAAD;IAKE,KAAK;IACL,aAAU;IACV,WAAU;IACL;IACA;IACL,SAAS,UAAU;KACjB,OAAO,MAAM,cAAc,QAAQ;KACnC,UAAU,QAAQ;IACpB;IACA,eAAe,UAAU,OAAO;GACjC,GAXM,GAWN,IACC;GACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,eAAe,QAAQ,KAAA,KAAa,wCAAwC;IAEzF,UAAA;GACG,CAAA;GAEP,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;GAC3E,oBAAC,UAAD;IACE,SAAS,YAAY;IACrB,QAAO;IACP,WAAW,GAAG,iBAAiB,SAAS,QAAQ,KAAK;IAErD,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe;KACf,eAAY;KACZ,WAAW,GACT,4FACA,aAAa,WAAW,sBAAsB,qBAChD;IACD,CAAA;GACO,CAAA;EACN;;AAEV,CAAC"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n      /**\n       * The fill behind the initials. Every pair is one the token contrast\n       * contract already grades: foreground on muted, primary-foreground on\n       * primary, and for `brand` secondary-foreground and tertiary-foreground\n       * (both the same ink) on each end of the gradient. `brand` is the\n       * periwinkle-to-teal edge of a highlighted Card, laid as a fill: the\n       * assistant's avatar in a chat, beside `primary` for the person.\n       */\n      tone: {\n        neutral: \"bg-muted text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        brand: \"bg-linear-to-r from-secondary to-tertiary text-secondary-foreground\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"neutral\" },\n  },\n);\n\n/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */\nconst dotPlace = {\n  xs: \"bottom-0 end-0 size-1.5\",\n  sm: \"bottom-0 end-0 size-2\",\n  md: \"bottom-0 end-0 size-2.5\",\n  lg: \"bottom-0 end-0 size-3\",\n  xl: \"bottom-1 end-1 size-3.5\",\n} as const;\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * A small dot at the corner: `online` or `offline`. It grows in when it appears,\n   * shrinks away when it goes, and swaps when it changes. Its word is read to\n   * assistive technology beside the name.\n   */\n  presence?: \"online\" | \"offline\";\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n  /**\n   * The fill behind the fallback: `neutral` (the default, a muted grey),\n   * `primary` (the accent fill) or `brand` (the periwinkle-to-teal gradient of a\n   * highlighted Card). A loaded photo covers it. Mirrored to `data-tone`.\n   */\n  tone?: \"neutral\" | \"primary\" | \"brand\";\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, tone, src, alt, fallback, presence, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    } else if (node) {\n      // Still downloading after mount: it fades in from a soft blur when it arrives. A photo that\n      // is already decoded shows at once, so cached photos never fade.\n      node.dataset.loading = \"\";\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      data-tone={tone ?? \"neutral\"}\n      className={cn(avatarVariants({ size, tone }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          key={src}\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"avatar-photo size-full rounded-[inherit] object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={(event) => {\n            delete event.currentTarget.dataset.loading;\n            setStatus(\"loaded\");\n          }}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span\n          data-slot=\"avatar-fallback\"\n          aria-hidden=\"true\"\n          className={cn(\"select-none\", src !== undefined && \"motion-safe:animate-avatar-fallback-in\")}\n        >\n          {fallback}\n        </span>\n      )}\n      {presence === undefined ? null : <span className=\"sr-only\">{presence}</span>}\n      <SwapText\n        swapKey={presence ?? \"\"}\n        motion=\"dot\"\n        className={cn(\"absolute z-10\", dotPlace[size ?? \"md\"])}\n      >\n        <span\n          data-slot=\"avatar-presence\"\n          data-presence={presence}\n          aria-hidden=\"true\"\n          className={cn(\n            \"block size-full rounded-full border-(length:--border-width) border-background box-border\",\n            presence === \"online\" ? \"bg-success-strong\" : \"bg-muted-foreground\",\n          )}\n        />\n      </SwapText>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;AACF,GACA;CACE,UAAU;EAUR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;;;;;;;;;EASA,MAAM;GACJ,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,MAAM;CAAU;AACjD,CACF;;AAGA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA4CA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,MAAM,KAAK,KAAK,UAAU,UAAU,GAAG,SAC1D,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;OAC/C,IAAI,MAGT,KAAK,QAAQ,UAAU;CAE3B,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,aAAW,QAAQ;EACnB,WAAW,GAAG,eAAe;GAAE;GAAM;EAAK,CAAC,GAAG,SAAS;EALzD,UAAA;GAOG,YACC,oBAAC,OAAD;IAKE,KAAK;IACL,aAAU;IACV,WAAU;IACL;IACA;IACL,SAAS,UAAU;KACjB,OAAO,MAAM,cAAc,QAAQ;KACnC,UAAU,QAAQ;IACpB;IACA,eAAe,UAAU,OAAO;GACjC,GAXM,GAWN,IACC;GACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,eAAe,QAAQ,KAAA,KAAa,wCAAwC;IAEzF,UAAA;GACG,CAAA;GAEP,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;GAC3E,oBAAC,UAAD;IACE,SAAS,YAAY;IACrB,QAAO;IACP,WAAW,GAAG,iBAAiB,SAAS,QAAQ,KAAK;IAErD,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe;KACf,eAAY;KACZ,WAAW,GACT,4FACA,aAAa,WAAW,sBAAsB,qBAChD;IACD,CAAA;GACO,CAAA;EACN;;AAEV,CAAC"}

package/dist/badge/badge.d.ts

@@ -36,7 +36,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  *   across every shadcn control.
  */
 export declare const badgeVariants: (props?: ({
-  tone?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "neutral" | "warning" | "primary" | "success" | "info" | "danger" | null | undefined;
   appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;

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