@fanvue/ui 1.21.0 → 2.0.0

package/dist/cjs/components/Card/Card.cjs

@@ -22,9 +22,9 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const VARIANT_CLASSES = {
-  outlined: "border border-neutral-200 bg-surface-container shadow-cardsubtle",
-  elevated: "border border-neutral-200 bg-surface-container shadow-card",
-  filled: "bg-neutral-500",
+  outlined: "border border-neutral-alphas-200 bg-surface-primary shadow-sm",
+  elevated: "border border-neutral-alphas-200 bg-surface-primary shadow-md",
+  filled: "bg-surface-secondary",
   ghost: "bg-transparent"
 };
 const Card = React__namespace.forwardRef(
@@ -34,7 +34,7 @@ const Card = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "flex flex-col overflow-hidden rounded-2xl",
+          "flex flex-col overflow-hidden rounded-md",
           !noPadding && "p-4",
           fullWidth && "w-full",
           VARIANT_CLASSES[variant],
@@ -62,7 +62,7 @@ const CardTitle = React__namespace.forwardRef(
       "h3",
       {
         ref,
-        className: cn.cn("typography-semibold-body-lg text-foreground-default", className),
+        className: cn.cn("typography-semibold-body-lg text-content-primary", className),
         ...props,
         children
       }
@@ -76,7 +76,7 @@ const CardDescription = React__namespace.forwardRef(
       "p",
       {
         ref,
-        className: cn.cn("typography-regular-body-sm text-foreground-secondary", className),
+        className: cn.cn("typography-regular-body-sm text-content-secondary", className),
         ...props,
         children
       }

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-200 bg-surface-container shadow-cardsubtle\",\n  elevated: \"border border-neutral-200 bg-surface-container shadow-card\",\n  filled: \"bg-neutral-500\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-2xl\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-semibold-body-lg text-foreground-default\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-regular-body-sm text-foreground-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,uDAAuD,SAAS;AAAA,QAC7E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,wDAAwD,SAAS;AAAA,QAC9E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-semibold-body-lg text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-regular-body-sm text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,oDAAoD,SAAS;AAAA,QAC1E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,qDAAqD,SAAS;AAAA,QAC3E,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}

package/dist/cjs/components/Chart/ChartCard.cjs

@@ -27,8 +27,8 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const TREND_CLASSES = {
-  positive: "bg-success-background text-success-default",
-  negative: "bg-error-background text-error-default"
+  positive: "bg-success-surface text-success-content",
+  negative: "bg-error-surface text-error-content"
 };
 const ChartCard = React__namespace.forwardRef(
   ({
@@ -50,7 +50,7 @@ const ChartCard = React__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-3 w-24" })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-foreground-default", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-content-primary", children: title }),
           tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               IconButton.IconButton,
@@ -58,14 +58,14 @@ const ChartCard = React__namespace.forwardRef(
                 variant: "tertiary",
                 size: "24",
                 "aria-label": tooltipAriaLabel,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, { className: "size-4 text-foreground-tertiary" })
+                icon: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, { className: "size-4 text-content-tertiary" })
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { children: tooltip })
           ] }) })
         ] }),
         subtitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-bold-heading-sm text-foreground-default", children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-bold-heading-sm text-content-primary", children: subtitle }),
           trendChip && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -77,7 +77,7 @@ const ChartCard = React__namespace.forwardRef(
             }
           )
         ] }),
-        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-foreground-tertiary", children: dateInfo })
+        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-tertiary", children: dateInfo })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
     ] }) });

package/dist/cjs/components/Chart/ChartCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title text. Pass translated string for i18n. */\n  title: React.ReactNode;\n  /** Large subtitle value (e.g. formatted price or count). */\n  subtitle?: React.ReactNode;\n  /** Tooltip text shown next to the title. Pass translated string for i18n. */\n  tooltip?: React.ReactNode;\n  /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n  tooltipAriaLabel?: string;\n  /** Date range or period label shown below the subtitle. */\n  dateInfo?: React.ReactNode;\n  /** Trend indicator chip config. */\n  trendChip?: {\n    /** Display label (e.g. \"12.5%\"). */\n    label: React.ReactNode;\n    /** Whether the trend is positive (green) or negative (red). */\n    trend: \"positive\" | \"negative\";\n  };\n  /** Show loading skeleton instead of content. @default false */\n  loading?: boolean;\n  /** Chart content rendered below the header. */\n  children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n  positive: \"bg-success-background text-success-default\",\n  negative: \"bg-error-background text-error-default\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n *   title=\"Revenue\"\n *   subtitle=\"$4,523\"\n *   trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n *   dateInfo=\"Jan 1 – Mar 17\"\n *   tooltip=\"Total revenue for the selected period.\"\n * >\n *   <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n  (\n    {\n      className,\n      title,\n      subtitle,\n      tooltip,\n      tooltipAriaLabel = \"More info\",\n      dateInfo,\n      trendChip,\n      loading = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n        <div className=\"flex flex-col gap-2 p-4\">\n          {loading ? (\n            <>\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n            </>\n          ) : (\n            <>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"typography-semibold-body-md text-foreground-default\">{title}</span>\n                {tooltip && (\n                  <TooltipProvider>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <IconButton\n                          variant=\"tertiary\"\n                          size=\"24\"\n                          aria-label={tooltipAriaLabel}\n                          icon={<InfoCircleIcon className=\"size-4 text-foreground-tertiary\" />}\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent>{tooltip}</TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                )}\n              </div>\n              {subtitle && (\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"typography-bold-heading-sm text-foreground-default\">\n                    {subtitle}\n                  </span>\n                  {trendChip && (\n                    <span\n                      className={cn(\n                        \"typography-semibold-body-sm rounded-full px-2 py-0.5\",\n                        TREND_CLASSES[trendChip.trend],\n                      )}\n                    >\n                      {trendChip.label}\n                    </span>\n                  )}\n                </div>\n              )}\n              {dateInfo && (\n                <span className=\"typography-regular-body-sm text-foreground-tertiary\">\n                  {dateInfo}\n                </span>\n              )}\n            </>\n          )}\n          <div className=\"mt-auto\">{children}</div>\n        </div>\n      </Card>\n    );\n  },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uDAAuD,UAAA,OAAM;AAAA,UAC5E,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAMR,2BAAAA,IAACS,eAAAA,gBAAA,EAAe,WAAU,kCAAA,CAAkC;AAAA,cAAA;AAAA,YAAA,GAEtE;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,uDACb,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}
+{"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title text. Pass translated string for i18n. */\n  title: React.ReactNode;\n  /** Large subtitle value (e.g. formatted price or count). */\n  subtitle?: React.ReactNode;\n  /** Tooltip text shown next to the title. Pass translated string for i18n. */\n  tooltip?: React.ReactNode;\n  /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n  tooltipAriaLabel?: string;\n  /** Date range or period label shown below the subtitle. */\n  dateInfo?: React.ReactNode;\n  /** Trend indicator chip config. */\n  trendChip?: {\n    /** Display label (e.g. \"12.5%\"). */\n    label: React.ReactNode;\n    /** Whether the trend is positive (green) or negative (red). */\n    trend: \"positive\" | \"negative\";\n  };\n  /** Show loading skeleton instead of content. @default false */\n  loading?: boolean;\n  /** Chart content rendered below the header. */\n  children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n  positive: \"bg-success-surface text-success-content\",\n  negative: \"bg-error-surface text-error-content\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n *   title=\"Revenue\"\n *   subtitle=\"$4,523\"\n *   trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n *   dateInfo=\"Jan 1 – Mar 17\"\n *   tooltip=\"Total revenue for the selected period.\"\n * >\n *   <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n  (\n    {\n      className,\n      title,\n      subtitle,\n      tooltip,\n      tooltipAriaLabel = \"More info\",\n      dateInfo,\n      trendChip,\n      loading = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n        <div className=\"flex flex-col gap-2 p-4\">\n          {loading ? (\n            <>\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n            </>\n          ) : (\n            <>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"typography-semibold-body-md text-content-primary\">{title}</span>\n                {tooltip && (\n                  <TooltipProvider>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <IconButton\n                          variant=\"tertiary\"\n                          size=\"24\"\n                          aria-label={tooltipAriaLabel}\n                          icon={<InfoCircleIcon className=\"size-4 text-content-tertiary\" />}\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent>{tooltip}</TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                )}\n              </div>\n              {subtitle && (\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"typography-bold-heading-sm text-content-primary\">\n                    {subtitle}\n                  </span>\n                  {trendChip && (\n                    <span\n                      className={cn(\n                        \"typography-semibold-body-sm rounded-full px-2 py-0.5\",\n                        TREND_CLASSES[trendChip.trend],\n                      )}\n                    >\n                      {trendChip.label}\n                    </span>\n                  )}\n                </div>\n              )}\n              {dateInfo && (\n                <span className=\"typography-regular-body-sm text-content-tertiary\">{dateInfo}</span>\n              )}\n            </>\n          )}\n          <div className=\"mt-auto\">{children}</div>\n        </div>\n      </Card>\n    );\n  },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,OAAM;AAAA,UACzE,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAMR,2BAAAA,IAACS,eAAAA,gBAAA,EAAe,WAAU,+BAAA,CAA+B;AAAA,cAAA;AAAA,YAAA,GAEnE;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,mDACb,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,SAAA,CAAS;AAAA,MAAA,GAEjF;AAAA,MAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}

package/dist/cjs/components/Chart/ChartCenterLabel.cjs

@@ -25,7 +25,7 @@ const ChartCenterLabel = React__namespace.forwardRef(
     viewBox,
     value,
     subtitle,
-    valueClassName = "fill-foreground-default font-bold text-3xl",
+    valueClassName = "fill-content-primary font-bold text-3xl",
     ...props
   }, ref) => {
     if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) return null;
@@ -40,7 +40,7 @@ const ChartCenterLabel = React__namespace.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: viewBox.cx, y: viewBox.cy, className: valueClassName, children: value }),
-          /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: viewBox.cx, y: (viewBox.cy || 0) + 24, className: "fill-foreground-tertiary", children: subtitle })
+          /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: viewBox.cx, y: (viewBox.cy || 0) + 24, className: "fill-content-tertiary", children: subtitle })
         ]
       }
     );

package/dist/cjs/components/Chart/ChartCenterLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartCenterLabel.cjs","sources":["../../../../src/components/Chart/ChartCenterLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/** Props for {@link ChartCenterLabel}. */\nexport interface ChartCenterLabelProps\n  extends Omit<React.SVGAttributes<SVGTextElement>, \"viewBox\"> {\n  /** Recharts viewBox with center coordinates. */\n  viewBox?: { cx?: number; cy?: number; [key: string]: unknown };\n  /** Primary value displayed in the center. */\n  value: React.ReactNode;\n  /** Secondary text below the value. */\n  subtitle: React.ReactNode;\n  /** Custom className for the value tspan. @default \"fill-foreground-default font-bold text-3xl\" */\n  valueClassName?: string;\n}\n\n/**\n * Centered label for radial/pie charts, rendered inside a Recharts `<Label>`.\n *\n * @example\n * ```tsx\n * <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n *   <Label content={({ viewBox }) => (\n *     <ChartCenterLabel viewBox={viewBox} value=\"78%\" subtitle=\"Complete\" />\n *   )} />\n * </PolarRadiusAxis>\n * ```\n */\nexport const ChartCenterLabel = React.forwardRef<SVGTextElement, ChartCenterLabelProps>(\n  (\n    {\n      viewBox,\n      value,\n      subtitle,\n      valueClassName = \"fill-foreground-default font-bold text-3xl\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (!viewBox || !(\"cx\" in viewBox) || !(\"cy\" in viewBox)) return null;\n\n    return (\n      <text\n        ref={ref}\n        x={viewBox.cx}\n        y={viewBox.cy}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        {...props}\n      >\n        <tspan x={viewBox.cx} y={viewBox.cy} className={valueClassName}>\n          {value}\n        </tspan>\n        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-foreground-tertiary\">\n          {subtitle}\n        </tspan>\n      </text>\n    );\n  },\n);\n\nChartCenterLabel.displayName = \"ChartCenterLabel\";\n"],"names":["React","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,WAAW,EAAE,QAAQ,YAAY,EAAE,QAAQ,SAAU,QAAO;AAEjE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,GAAG,QAAQ;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,YAAW;AAAA,QACX,kBAAiB;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,GAAG,QAAQ,IAAI,WAAW,gBAC7C,UAAA,MAAA,CACH;AAAA,UACAA,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,IAAI,QAAQ,MAAM,KAAK,IAAI,WAAU,4BACxD,UAAA,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,iBAAiB,cAAc;;"}
+{"version":3,"file":"ChartCenterLabel.cjs","sources":["../../../../src/components/Chart/ChartCenterLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/** Props for {@link ChartCenterLabel}. */\nexport interface ChartCenterLabelProps\n  extends Omit<React.SVGAttributes<SVGTextElement>, \"viewBox\"> {\n  /** Recharts viewBox with center coordinates. */\n  viewBox?: { cx?: number; cy?: number; [key: string]: unknown };\n  /** Primary value displayed in the center. */\n  value: React.ReactNode;\n  /** Secondary text below the value. */\n  subtitle: React.ReactNode;\n  /** Custom className for the value tspan. @default \"fill-content-primary font-bold text-3xl\" */\n  valueClassName?: string;\n}\n\n/**\n * Centered label for radial/pie charts, rendered inside a Recharts `<Label>`.\n *\n * @example\n * ```tsx\n * <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n *   <Label content={({ viewBox }) => (\n *     <ChartCenterLabel viewBox={viewBox} value=\"78%\" subtitle=\"Complete\" />\n *   )} />\n * </PolarRadiusAxis>\n * ```\n */\nexport const ChartCenterLabel = React.forwardRef<SVGTextElement, ChartCenterLabelProps>(\n  (\n    {\n      viewBox,\n      value,\n      subtitle,\n      valueClassName = \"fill-content-primary font-bold text-3xl\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (!viewBox || !(\"cx\" in viewBox) || !(\"cy\" in viewBox)) return null;\n\n    return (\n      <text\n        ref={ref}\n        x={viewBox.cx}\n        y={viewBox.cy}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        {...props}\n      >\n        <tspan x={viewBox.cx} y={viewBox.cy} className={valueClassName}>\n          {value}\n        </tspan>\n        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-content-tertiary\">\n          {subtitle}\n        </tspan>\n      </text>\n    );\n  },\n);\n\nChartCenterLabel.displayName = \"ChartCenterLabel\";\n"],"names":["React","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,WAAW,EAAE,QAAQ,YAAY,EAAE,QAAQ,SAAU,QAAO;AAEjE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,GAAG,QAAQ;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,YAAW;AAAA,QACX,kBAAiB;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,GAAG,QAAQ,IAAI,WAAW,gBAC7C,UAAA,MAAA,CACH;AAAA,UACAA,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,IAAI,QAAQ,MAAM,KAAK,IAAI,WAAU,yBACxD,UAAA,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,iBAAiB,cAAc;;"}

package/dist/cjs/components/Chart/ChartContainer.cjs

@@ -36,15 +36,15 @@ const ChartContainer = React__namespace.forwardRef(
         "data-chart": chartId,
         className: cn.cn(
           "flex aspect-video justify-center text-xs",
-          "[&_.recharts-cartesian-axis-tick_text]:fill-foreground-tertiary",
-          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-200",
-          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-200",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-content-tertiary",
+          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-alphas-200",
+          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-alphas-200",
           "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
           "[&_.recharts-layer]:outline-hidden",
-          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-200",
-          "[&_.recharts-radial-bar-background-sector]:fill-neutral-100",
-          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-100",
-          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-200",
+          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-alphas-200",
+          "[&_.recharts-radial-bar-background-sector]:fill-neutral-alphas-100",
+          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-alphas-100",
+          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-alphas-200",
           "[&_.recharts-sector]:outline-hidden",
           "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
           "[&_.recharts-surface]:outline-hidden",

package/dist/cjs/components/Chart/ChartContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartContainer.cjs","sources":["../../../../src/components/Chart/ChartContainer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../../utils/cn\";\nimport { ChartStyle } from \"./ChartStyle\";\nimport type { ChartConfig } from \"./types\";\nimport { ChartContext } from \"./useChart\";\n\n/** Props for {@link ChartContainer}. */\nexport interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Series configuration mapping data keys to labels, colors, and icons. */\n  config: ChartConfig;\n  /**\n   * Recharts chart element(s) to render inside the responsive container.\n   * Typically a single `<AreaChart>`, `<BarChart>`, `<LineChart>`, etc.\n   */\n  children: React.ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * Wraps a Recharts chart with responsive sizing, design-token theming, and\n * accessible config context for tooltips and legends.\n *\n * @example\n * ```tsx\n * <ChartContainer config={chartConfig} className=\"min-h-48\">\n *   <LineChart data={data} accessibilityLayer>\n *     <Line dataKey=\"revenue\" stroke=\"var(--color-revenue)\" />\n *   </LineChart>\n * </ChartContainer>\n * ```\n */\nexport const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n    return (\n      <ChartContext.Provider value={{ config }}>\n        <div\n          ref={ref}\n          data-slot=\"chart\"\n          data-chart={chartId}\n          className={cn(\n            \"flex aspect-video justify-center text-xs\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-foreground-tertiary\",\n            \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-200\",\n            \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-hidden\",\n            \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-radial-bar-background-sector]:fill-neutral-100\",\n            \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-100\",\n            \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-sector]:outline-hidden\",\n            \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-surface]:outline-hidden\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={chartId} config={config} />\n          <ResponsiveContainer>{children}</ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    );\n  },\n);\nChartContainer.displayName = \"ChartContainer\";\n"],"names":["React","ChartContext","jsxs","cn","jsx","ChartStyle","ResponsiveContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,IAAI,WAAW,UAAU,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACtD,UAAM,WAAWA,iBAAM,MAAA;AACvB,UAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,MAAM,EAAE,CAAC;AAEzD,0CACGC,SAAAA,aAAa,UAAb,EAAsB,OAAO,EAAE,UAC9B,UAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACC,WAAAA,YAAA,EAAW,IAAI,SAAS,OAAA,CAAgB;AAAA,UACzCD,+BAACE,SAAAA,uBAAqB,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnC;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;"}
+{"version":3,"file":"ChartContainer.cjs","sources":["../../../../src/components/Chart/ChartContainer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../../utils/cn\";\nimport { ChartStyle } from \"./ChartStyle\";\nimport type { ChartConfig } from \"./types\";\nimport { ChartContext } from \"./useChart\";\n\n/** Props for {@link ChartContainer}. */\nexport interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Series configuration mapping data keys to labels, colors, and icons. */\n  config: ChartConfig;\n  /**\n   * Recharts chart element(s) to render inside the responsive container.\n   * Typically a single `<AreaChart>`, `<BarChart>`, `<LineChart>`, etc.\n   */\n  children: React.ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * Wraps a Recharts chart with responsive sizing, design-token theming, and\n * accessible config context for tooltips and legends.\n *\n * @example\n * ```tsx\n * <ChartContainer config={chartConfig} className=\"min-h-48\">\n *   <LineChart data={data} accessibilityLayer>\n *     <Line dataKey=\"revenue\" stroke=\"var(--color-revenue)\" />\n *   </LineChart>\n * </ChartContainer>\n * ```\n */\nexport const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n    return (\n      <ChartContext.Provider value={{ config }}>\n        <div\n          ref={ref}\n          data-slot=\"chart\"\n          data-chart={chartId}\n          className={cn(\n            \"flex aspect-video justify-center text-xs\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-content-tertiary\",\n            \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-alphas-200\",\n            \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-alphas-200\",\n            \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-hidden\",\n            \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-alphas-200\",\n            \"[&_.recharts-radial-bar-background-sector]:fill-neutral-alphas-100\",\n            \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-alphas-100\",\n            \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-alphas-200\",\n            \"[&_.recharts-sector]:outline-hidden\",\n            \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-surface]:outline-hidden\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={chartId} config={config} />\n          <ResponsiveContainer>{children}</ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    );\n  },\n);\nChartContainer.displayName = \"ChartContainer\";\n"],"names":["React","ChartContext","jsxs","cn","jsx","ChartStyle","ResponsiveContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,IAAI,WAAW,UAAU,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACtD,UAAM,WAAWA,iBAAM,MAAA;AACvB,UAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,MAAM,EAAE,CAAC;AAEzD,0CACGC,SAAAA,aAAa,UAAb,EAAsB,OAAO,EAAE,UAC9B,UAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACC,WAAAA,YAAA,EAAW,IAAI,SAAS,OAAA,CAAgB;AAAA,UACzCD,+BAACE,SAAAA,uBAAqB,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnC;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;"}

package/dist/cjs/components/Chart/ChartLegend.cjs

@@ -44,7 +44,7 @@ const ChartLegendContent = React__namespace.forwardRef(
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground-tertiary",
+              className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-content-tertiary",
               children: [
                 itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(
                   "div",

package/dist/cjs/components/Chart/ChartLegend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.cjs","sources":["../../../../src/components/Chart/ChartLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Legend as RechartsLegend } from \"recharts\";\nimport type { LegendPayload } from \"recharts/types/component/DefaultLegendContent\";\nimport { cn } from \"../../utils/cn\";\nimport { filterVisiblePayload, resolveConfigEntry } from \"./chartUtils\";\nimport { useChart } from \"./useChart\";\n\n/** Re-export of Recharts `Legend` — use with `content={<ChartLegendContent />}`. */\nexport const ChartLegend = RechartsLegend;\n\n/** Props for {@link ChartLegendContent}. */\nexport interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend payload data. Passed by Recharts. */\n  payload?: readonly LegendPayload[];\n  /** Vertical alignment — controls padding direction. @default \"bottom\" */\n  verticalAlign?: \"top\" | \"bottom\";\n  /** Hide the color/icon indicator. @default false */\n  hideIcon?: boolean;\n  /** Data key used to resolve the display name from config. */\n  nameKey?: string;\n}\n\n/**\n * Styled legend content for use with `<ChartLegend content={<ChartLegendContent />} />`.\n *\n * Reads chart config from context to resolve labels and icons.\n *\n * @example\n * ```tsx\n * <ChartLegend content={<ChartLegendContent />} />\n * ```\n */\nexport const ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n  ({ className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey }, ref) => {\n    const { config } = useChart();\n\n    if (!payload?.length) return null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className,\n        )}\n      >\n        {filterVisiblePayload(payload).map((item) => {\n          const key = String(nameKey || item.dataKey || \"value\");\n          const itemConfig = resolveConfigEntry(config, item, key);\n\n          return (\n            <div\n              key={item.value}\n              className=\"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground-tertiary\"\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartLegendContent.displayName = \"ChartLegendContent\";\n"],"names":["RechartsLegend","React","useChart","jsx","cn","filterVisiblePayload","resolveConfigEntry","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,SAAAA;AAwBpB,MAAM,qBAAqBC,iBAAM;AAAA,EACtC,CAAC,EAAE,WAAW,WAAW,OAAO,SAAS,gBAAgB,UAAU,QAAA,GAAW,QAAQ;AACpF,UAAM,EAAE,OAAA,IAAWC,kBAAA;AAEnB,QAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,kBAAkB,QAAQ,SAAS;AAAA,UACnC;AAAA,QAAA;AAAA,QAGD,UAAAC,WAAAA,qBAAqB,OAAO,EAAE,IAAI,CAAC,SAAS;AAC3C,gBAAM,MAAM,OAAO,WAAW,KAAK,WAAW,OAAO;AACrD,gBAAM,aAAaC,WAAAA,mBAAmB,QAAQ,MAAM,GAAG;AAEvD,iBACEC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAET,UAAA;AAAA,gBAAA,YAAY,QAAQ,CAAC,0CACnB,WAAW,MAAX,CAAA,CAAgB,IAEjBJ,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,gBAGxC,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAXR,KAAK;AAAA,UAAA;AAAA,QAchB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,mBAAmB,cAAc;;;"}
+{"version":3,"file":"ChartLegend.cjs","sources":["../../../../src/components/Chart/ChartLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Legend as RechartsLegend } from \"recharts\";\nimport type { LegendPayload } from \"recharts/types/component/DefaultLegendContent\";\nimport { cn } from \"../../utils/cn\";\nimport { filterVisiblePayload, resolveConfigEntry } from \"./chartUtils\";\nimport { useChart } from \"./useChart\";\n\n/** Re-export of Recharts `Legend` — use with `content={<ChartLegendContent />}`. */\nexport const ChartLegend = RechartsLegend;\n\n/** Props for {@link ChartLegendContent}. */\nexport interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend payload data. Passed by Recharts. */\n  payload?: readonly LegendPayload[];\n  /** Vertical alignment — controls padding direction. @default \"bottom\" */\n  verticalAlign?: \"top\" | \"bottom\";\n  /** Hide the color/icon indicator. @default false */\n  hideIcon?: boolean;\n  /** Data key used to resolve the display name from config. */\n  nameKey?: string;\n}\n\n/**\n * Styled legend content for use with `<ChartLegend content={<ChartLegendContent />} />`.\n *\n * Reads chart config from context to resolve labels and icons.\n *\n * @example\n * ```tsx\n * <ChartLegend content={<ChartLegendContent />} />\n * ```\n */\nexport const ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n  ({ className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey }, ref) => {\n    const { config } = useChart();\n\n    if (!payload?.length) return null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className,\n        )}\n      >\n        {filterVisiblePayload(payload).map((item) => {\n          const key = String(nameKey || item.dataKey || \"value\");\n          const itemConfig = resolveConfigEntry(config, item, key);\n\n          return (\n            <div\n              key={item.value}\n              className=\"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-content-tertiary\"\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartLegendContent.displayName = \"ChartLegendContent\";\n"],"names":["RechartsLegend","React","useChart","jsx","cn","filterVisiblePayload","resolveConfigEntry","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,SAAAA;AAwBpB,MAAM,qBAAqBC,iBAAM;AAAA,EACtC,CAAC,EAAE,WAAW,WAAW,OAAO,SAAS,gBAAgB,UAAU,QAAA,GAAW,QAAQ;AACpF,UAAM,EAAE,OAAA,IAAWC,kBAAA;AAEnB,QAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,kBAAkB,QAAQ,SAAS;AAAA,UACnC;AAAA,QAAA;AAAA,QAGD,UAAAC,WAAAA,qBAAqB,OAAO,EAAE,IAAI,CAAC,SAAS;AAC3C,gBAAM,MAAM,OAAO,WAAW,KAAK,WAAW,OAAO;AACrD,gBAAM,aAAaC,WAAAA,mBAAmB,QAAQ,MAAM,GAAG;AAEvD,iBACEC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAET,UAAA;AAAA,gBAAA,YAAY,QAAQ,CAAC,0CACnB,WAAW,MAAX,CAAA,CAAgB,IAEjBJ,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,gBAGxC,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAXR,KAAK;AAAA,UAAA;AAAA,QAchB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,mBAAmB,cAAc;;;"}

package/dist/cjs/components/Chart/ChartLoadingOverlay.cjs

@@ -26,7 +26,7 @@ const ChartLoadingOverlay = React__namespace.forwardRef(
   ({ loading = false, children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("relative", className), ...props, children: [
       children,
-      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-surface-container/60", children: /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { show: true, center: true }) })
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-surface-primary/60", children: /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { show: true, center: true }) })
     ] });
   }
 );

package/dist/cjs/components/Chart/ChartLoadingOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLoadingOverlay.cjs","sources":["../../../../src/components/Chart/ChartLoadingOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Loader } from \"../Loader/Loader\";\n\n/** Props for {@link ChartLoadingOverlay}. */\nexport interface ChartLoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show the loading overlay. @default false */\n  loading?: boolean;\n  /** Chart content to render underneath the overlay. */\n  children: React.ReactNode;\n}\n\n/**\n * A positioned overlay that displays a loading spinner on top of chart content.\n * The children are always rendered to maintain layout dimensions; the overlay\n * covers them with a semi-transparent background and a centered spinner.\n *\n * @example\n * ```tsx\n * <ChartLoadingOverlay loading={isFetching}>\n *   <ChartContainer config={config} className=\"min-h-48\">\n *     <LineChart data={data}>...</LineChart>\n *   </ChartContainer>\n * </ChartLoadingOverlay>\n * ```\n */\nexport const ChartLoadingOverlay = React.forwardRef<HTMLDivElement, ChartLoadingOverlayProps>(\n  ({ loading = false, children, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {children}\n        {loading && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-surface-container/60\">\n            <Loader show center />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nChartLoadingOverlay.displayName = \"ChartLoadingOverlay\";\n"],"names":["React","jsxs","cn","jsx","Loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,UAAU,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC3D,WACEC,gCAAC,SAAI,KAAU,WAAWC,MAAG,YAAY,SAAS,GAAI,GAAG,OACtD,UAAA;AAAA,MAAA;AAAA,MACA,WACCC,2BAAAA,IAAC,OAAA,EAAI,WAAU,kFACb,UAAAA,2BAAAA,IAACC,OAAAA,QAAA,EAAO,MAAI,MAAC,QAAM,KAAA,CAAC,EAAA,CACtB;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;;"}
+{"version":3,"file":"ChartLoadingOverlay.cjs","sources":["../../../../src/components/Chart/ChartLoadingOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Loader } from \"../Loader/Loader\";\n\n/** Props for {@link ChartLoadingOverlay}. */\nexport interface ChartLoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show the loading overlay. @default false */\n  loading?: boolean;\n  /** Chart content to render underneath the overlay. */\n  children: React.ReactNode;\n}\n\n/**\n * A positioned overlay that displays a loading spinner on top of chart content.\n * The children are always rendered to maintain layout dimensions; the overlay\n * covers them with a semi-transparent background and a centered spinner.\n *\n * @example\n * ```tsx\n * <ChartLoadingOverlay loading={isFetching}>\n *   <ChartContainer config={config} className=\"min-h-48\">\n *     <LineChart data={data}>...</LineChart>\n *   </ChartContainer>\n * </ChartLoadingOverlay>\n * ```\n */\nexport const ChartLoadingOverlay = React.forwardRef<HTMLDivElement, ChartLoadingOverlayProps>(\n  ({ loading = false, children, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {children}\n        {loading && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-surface-primary/60\">\n            <Loader show center />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nChartLoadingOverlay.displayName = \"ChartLoadingOverlay\";\n"],"names":["React","jsxs","cn","jsx","Loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,UAAU,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC3D,WACEC,gCAAC,SAAI,KAAU,WAAWC,MAAG,YAAY,SAAS,GAAI,GAAG,OACtD,UAAA;AAAA,MAAA;AAAA,MACA,WACCC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gFACb,UAAAA,2BAAAA,IAACC,OAAAA,QAAA,EAAO,MAAI,MAAC,QAAM,KAAA,CAAC,EAAA,CACtB;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;;"}

package/dist/cjs/components/Chart/ChartPieLegend.cjs

@@ -33,8 +33,8 @@ const ChartPieLegend = React__namespace.forwardRef(
             style: { backgroundColor: item.color }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm min-w-0 flex-1 truncate text-foreground-secondary", children: item.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-foreground-default tabular-nums", children: item.formattedValue ?? item.value.toLocaleString() })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm min-w-0 flex-1 truncate text-content-secondary", children: item.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-content-primary tabular-nums", children: item.formattedValue ?? item.value.toLocaleString() })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",

package/dist/cjs/components/Chart/ChartPieLegend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartPieLegend.cjs","sources":["../../../../src/components/Chart/ChartPieLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single item in a {@link ChartPieLegend}. */\nexport interface ChartPieLegendItem {\n  /** Display label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Numeric value for this slice. Used to calculate the proportional bar width. */\n  value: number;\n  /** Formatted display value (e.g. \"$4,500\"). If omitted, `value.toLocaleString()` is used. */\n  formattedValue?: React.ReactNode;\n  /** Slice color (CSS value). */\n  color: string;\n  /** Optional icon to show instead of the color dot. */\n  icon?: React.ReactNode;\n}\n\n/** Props for {@link ChartPieLegend}. */\nexport interface ChartPieLegendProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend items to display. */\n  items: ChartPieLegendItem[];\n}\n\n/**\n * A side legend for pie/donut charts that shows each slice's label,\n * formatted value, and a proportional progress bar.\n *\n * @example\n * ```tsx\n * <ChartPieLegend\n *   items={[\n *     { label: \"Subscriptions\", value: 4500, formattedValue: \"$4,500\", color: \"var(--color-special-chart-teal)\" },\n *     { label: \"Messages\", value: 2100, formattedValue: \"$2,100\", color: \"var(--color-special-chart-sky)\" },\n *     { label: \"Tips\", value: 1200, formattedValue: \"$1,200\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n * />\n * ```\n */\nexport const ChartPieLegend = React.forwardRef<HTMLDivElement, ChartPieLegendProps>(\n  ({ items, className, ...props }, ref) => {\n    const total = items.reduce((sum, item) => sum + item.value, 0);\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n        {items.map((item) => (\n          <div key={`${item.color}-${item.value}`} className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center gap-2\">\n              {item.icon ?? (\n                <span\n                  className=\"size-2 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              <span className=\"typography-regular-body-sm min-w-0 flex-1 truncate text-foreground-secondary\">\n                {item.label}\n              </span>\n              <span className=\"typography-semibold-body-md text-foreground-default tabular-nums\">\n                {item.formattedValue ?? item.value.toLocaleString()}\n              </span>\n            </div>\n            <div\n              className=\"h-1.5 rounded-full\"\n              style={{\n                backgroundColor: item.color,\n                width: total > 0 ? `${(item.value / total) * 100}%` : \"0%\",\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  },\n);\n\nChartPieLegend.displayName = \"ChartPieLegend\";\n"],"names":["React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,UAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAE7D,0CACG,OAAA,EAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OACjE,gBAAM,IAAI,CAAC,SACVC,2BAAAA,KAAC,OAAA,EAAwC,WAAU,yBACjD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAA,KAAK,QACJC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,UAAM;AAAA,QAAA;AAAA,QAGzCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,gFACb,eAAK,OACR;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,oEACb,eAAK,kBAAkB,KAAK,MAAM,eAAA,EAAe,CACpD;AAAA,MAAA,GACF;AAAA,MACAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB,KAAK;AAAA,YACtB,OAAO,QAAQ,IAAI,GAAI,KAAK,QAAQ,QAAS,GAAG,MAAM;AAAA,UAAA;AAAA,QACxD;AAAA,MAAA;AAAA,IACF,KArBQ,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,EAsBrC,CACD,GACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;"}
+{"version":3,"file":"ChartPieLegend.cjs","sources":["../../../../src/components/Chart/ChartPieLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single item in a {@link ChartPieLegend}. */\nexport interface ChartPieLegendItem {\n  /** Display label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Numeric value for this slice. Used to calculate the proportional bar width. */\n  value: number;\n  /** Formatted display value (e.g. \"$4,500\"). If omitted, `value.toLocaleString()` is used. */\n  formattedValue?: React.ReactNode;\n  /** Slice color (CSS value). */\n  color: string;\n  /** Optional icon to show instead of the color dot. */\n  icon?: React.ReactNode;\n}\n\n/** Props for {@link ChartPieLegend}. */\nexport interface ChartPieLegendProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend items to display. */\n  items: ChartPieLegendItem[];\n}\n\n/**\n * A side legend for pie/donut charts that shows each slice's label,\n * formatted value, and a proportional progress bar.\n *\n * @example\n * ```tsx\n * <ChartPieLegend\n *   items={[\n *     { label: \"Subscriptions\", value: 4500, formattedValue: \"$4,500\", color: \"var(--color-special-chart-teal)\" },\n *     { label: \"Messages\", value: 2100, formattedValue: \"$2,100\", color: \"var(--color-special-chart-sky)\" },\n *     { label: \"Tips\", value: 1200, formattedValue: \"$1,200\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n * />\n * ```\n */\nexport const ChartPieLegend = React.forwardRef<HTMLDivElement, ChartPieLegendProps>(\n  ({ items, className, ...props }, ref) => {\n    const total = items.reduce((sum, item) => sum + item.value, 0);\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n        {items.map((item) => (\n          <div key={`${item.color}-${item.value}`} className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center gap-2\">\n              {item.icon ?? (\n                <span\n                  className=\"size-2 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              <span className=\"typography-regular-body-sm min-w-0 flex-1 truncate text-content-secondary\">\n                {item.label}\n              </span>\n              <span className=\"typography-semibold-body-md text-content-primary tabular-nums\">\n                {item.formattedValue ?? item.value.toLocaleString()}\n              </span>\n            </div>\n            <div\n              className=\"h-1.5 rounded-full\"\n              style={{\n                backgroundColor: item.color,\n                width: total > 0 ? `${(item.value / total) * 100}%` : \"0%\",\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  },\n);\n\nChartPieLegend.displayName = \"ChartPieLegend\";\n"],"names":["React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,UAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAE7D,0CACG,OAAA,EAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OACjE,gBAAM,IAAI,CAAC,SACVC,2BAAAA,KAAC,OAAA,EAAwC,WAAU,yBACjD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAA,KAAK,QACJC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,UAAM;AAAA,QAAA;AAAA,QAGzCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6EACb,eAAK,OACR;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,iEACb,eAAK,kBAAkB,KAAK,MAAM,eAAA,EAAe,CACpD;AAAA,MAAA,GACF;AAAA,MACAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB,KAAK;AAAA,YACtB,OAAO,QAAQ,IAAI,GAAI,KAAK,QAAQ,QAAS,GAAG,MAAM;AAAA,UAAA;AAAA,QACxD;AAAA,MAAA;AAAA,IACF,KArBQ,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,EAsBrC,CACD,GACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;"}

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs

@@ -40,8 +40,8 @@ const ChartSeriesToggle = React__namespace.forwardRef(
           type: "button",
           "aria-pressed": isActive,
           className: cn.cn(
-            "typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-foreground-default transition-opacity hover:opacity-100",
-            isActive ? "border-neutral-200 bg-surface-container" : "border-transparent bg-transparent opacity-50"
+            "typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100",
+            isActive ? "border-neutral-alphas-200 bg-surface-primary" : "border-transparent bg-transparent opacity-50"
           ),
           onClick: () => toggle(item.key),
           children: [

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n  /** Unique key matching the data series key and ChartConfig key. */\n  key: string;\n  /** Human-readable label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Series color (CSS value). Shown as indicator dot. */\n  color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Available series that can be toggled. */\n  items: ChartSeriesToggleItem[];\n  /** Set of currently visible series keys. */\n  value: Set<string>;\n  /** Called when a series is toggled. Receives the updated Set. */\n  onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a grid of toggleable chips that control which series are visible\n * on a multi-series chart. Each toggle shows a color indicator dot and a label.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n *   items={[\n *     { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n *     { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n *     { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n *   value={visible}\n *   onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n  ({ className, items, value, onValueChange, ...props }, ref) => {\n    const toggle = (key: string) => {\n      const next = new Set(value);\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n      onValueChange(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n        {items.map((item) => {\n          const isActive = value.has(item.key);\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              aria-pressed={isActive}\n              className={cn(\n                \"typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-foreground-default transition-opacity hover:opacity-100\",\n                isActive\n                  ? \"border-neutral-200 bg-surface-container\"\n                  : \"border-transparent bg-transparent opacity-50\",\n              )}\n              onClick={() => toggle(item.key)}\n            >\n              <span\n                className=\"size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n              <span>{item.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,WAAW,MAAM,IAAI,KAAK,GAAG;AACnC,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,WACI,4CACA;AAAA,UAAA;AAAA,UAEN,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UAE9B,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAEvCA,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAfb,KAAK;AAAA,MAAA;AAAA,IAkBhB,CAAC,EAAA,CACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}
+{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n  /** Unique key matching the data series key and ChartConfig key. */\n  key: string;\n  /** Human-readable label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Series color (CSS value). Shown as indicator dot. */\n  color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Available series that can be toggled. */\n  items: ChartSeriesToggleItem[];\n  /** Set of currently visible series keys. */\n  value: Set<string>;\n  /** Called when a series is toggled. Receives the updated Set. */\n  onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a grid of toggleable chips that control which series are visible\n * on a multi-series chart. Each toggle shows a color indicator dot and a label.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n *   items={[\n *     { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n *     { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n *     { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n *   value={visible}\n *   onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n  ({ className, items, value, onValueChange, ...props }, ref) => {\n    const toggle = (key: string) => {\n      const next = new Set(value);\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n      onValueChange(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n        {items.map((item) => {\n          const isActive = value.has(item.key);\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              aria-pressed={isActive}\n              className={cn(\n                \"typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-content-primary transition-opacity hover:opacity-100\",\n                isActive\n                  ? \"border-neutral-alphas-200 bg-surface-primary\"\n                  : \"border-transparent bg-transparent opacity-50\",\n              )}\n              onClick={() => toggle(item.key)}\n            >\n              <span\n                className=\"size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n              <span>{item.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,WAAW,MAAM,IAAI,KAAK,GAAG;AACnC,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,WACI,iDACA;AAAA,UAAA;AAAA,UAEN,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UAE9B,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAEvCA,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAfb,KAAK;AAAA,MAAA;AAAA,IAkBhB,CAAC,EAAA,CACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/Chart/ChartTooltip.cjs

@@ -60,9 +60,9 @@ function TooltipRow({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [
             nestLabel ? tooltipLabel : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-tertiary", children: itemConfig?.label || item.name })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-tertiary", children: itemConfig?.label || item.name })
           ] }),
-          item.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-foreground-default tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          item.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-content-primary tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
         ]
       }
     )
@@ -104,7 +104,7 @@ const ChartTooltipContent = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "grid min-w-32 items-start gap-1.5 rounded-lg border border-neutral-200 bg-surface-container px-2.5 py-1.5 text-xs shadow-float",
+          "grid min-w-32 items-start gap-1.5 rounded-xs border border-neutral-alphas-200 bg-surface-primary px-2.5 py-1.5 text-xs shadow-lg",
           className
         ),
         children: [
@@ -117,7 +117,7 @@ const ChartTooltipContent = React__namespace.forwardRef(
               "div",
               {
                 className: cn.cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-foreground-tertiary",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-content-tertiary",
                   indicator === "dot" && "items-center"
                 ),
                 children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/components/Chart/ChartTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.cjs","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as RechartsTooltip } from \"recharts\";\nimport type { NameType, Payload, ValueType } from \"recharts/types/component/DefaultTooltipContent\";\nimport { cn } from \"../../utils/cn\";\nimport { filterVisiblePayload, resolveConfigEntry } from \"./chartUtils\";\nimport type { ChartConfigEntry } from \"./types\";\nimport { useChart } from \"./useChart\";\n\n/** Re-export of Recharts `Tooltip` — use with `content={<ChartTooltipContent />}`. */\nexport const ChartTooltip = RechartsTooltip;\n\n/** Indicator shape rendered beside each tooltip row. */\nexport type ChartTooltipIndicator = \"dot\" | \"line\" | \"dashed\";\n\n/** Props for {@link ChartTooltipContent}. */\nexport interface ChartTooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the tooltip is currently active/visible. Passed by Recharts. */\n  active?: boolean;\n  /** Tooltip payload data. Passed by Recharts. */\n  payload?: Payload<ValueType, NameType>[];\n  /** Axis label. Passed by Recharts. */\n  label?: string | number;\n  /** Custom label formatter. */\n  labelFormatter?: (\n    label: string | number,\n    payload: Payload<ValueType, NameType>[],\n  ) => React.ReactNode;\n  /** Custom value formatter. */\n  formatter?: (\n    value: ValueType,\n    name: NameType,\n    item: Payload<ValueType, NameType>,\n    index: number,\n    payload: Payload<ValueType, NameType>[],\n  ) => React.ReactNode;\n  /** CSS class for the label element. */\n  labelClassName?: string;\n  /** Hide the tooltip header label. @default false */\n  hideLabel?: boolean;\n  /** Hide the color indicator beside each row. @default false */\n  hideIndicator?: boolean;\n  /** Visual style of the color indicator. @default \"dot\" */\n  indicator?: ChartTooltipIndicator;\n  /**\n   * Data key used to resolve the display name from config.\n   * Useful when the payload `name` differs from the config key.\n   */\n  nameKey?: string;\n  /**\n   * Data key used to resolve the header label from config.\n   * Falls back to the first payload item's `dataKey`.\n   */\n  labelKey?: string;\n  /** Override indicator color for all rows. */\n  color?: string;\n}\n\nfunction TooltipRow({\n  item,\n  itemConfig,\n  indicator,\n  indicatorColor,\n  hideIndicator,\n  nestLabel,\n  tooltipLabel,\n}: {\n  item: Payload<ValueType, NameType>;\n  itemConfig: ChartConfigEntry | undefined;\n  indicator: ChartTooltipIndicator;\n  indicatorColor: unknown;\n  hideIndicator: boolean;\n  nestLabel: boolean;\n  tooltipLabel: React.ReactNode;\n}) {\n  return (\n    <>\n      {itemConfig?.icon ? (\n        <itemConfig.icon />\n      ) : (\n        !hideIndicator && (\n          <div\n            className={cn(\"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\", {\n              \"h-2.5 w-2.5\": indicator === \"dot\",\n              \"w-1\": indicator === \"line\",\n              \"w-0 border-[1.5px] border-dashed bg-transparent\": indicator === \"dashed\",\n              \"my-0.5\": nestLabel && indicator === \"dashed\",\n            })}\n            style={\n              {\n                \"--color-bg\": indicatorColor,\n                \"--color-border\": indicatorColor,\n              } as React.CSSProperties\n            }\n          />\n        )\n      )}\n      <div\n        className={cn(\n          \"flex flex-1 justify-between leading-none\",\n          nestLabel ? \"items-end\" : \"items-center\",\n        )}\n      >\n        <div className=\"grid gap-1.5\">\n          {nestLabel ? tooltipLabel : null}\n          <span className=\"text-foreground-tertiary\">{itemConfig?.label || item.name}</span>\n        </div>\n        {item.value !== undefined && (\n          <span className=\"font-medium font-mono text-foreground-default tabular-nums\">\n            {typeof item.value === \"number\" ? item.value.toLocaleString() : item.value}\n          </span>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * Styled tooltip content for use with `<ChartTooltip content={<ChartTooltipContent />} />`.\n *\n * Reads chart config from context to resolve labels, colors, and icons.\n * Supports dot/line/dashed indicators. Pass translated `label`s in config for i18n.\n *\n * @example\n * ```tsx\n * <ChartTooltip\n *   content={<ChartTooltipContent indicator=\"line\" />}\n * />\n * ```\n */\nexport const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref,\n  ) => {\n    const { config } = useChart();\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) return null;\n\n      const [item] = payload;\n      const key = String(labelKey || item?.dataKey || item?.name || \"value\");\n      const itemConfig = resolveConfigEntry(config, item, key);\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label;\n\n      if (labelFormatter && payload) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value as string | number, payload)}\n          </div>\n        );\n      }\n\n      if (!value) return null;\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n    if (!active || !payload?.length) return null;\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-32 items-start gap-1.5 rounded-lg border border-neutral-200 bg-surface-container px-2.5 py-1.5 text-xs shadow-float\",\n          className,\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {filterVisiblePayload(payload).map((item, index) => {\n            const key = String(nameKey || item.dataKey || item.name || \"value\");\n            const itemConfig = resolveConfigEntry(config, item, key);\n            const indicatorColor =\n              color || (item.payload as Record<string, unknown>)?.fill || item.color;\n\n            return (\n              <div\n                key={`${item.dataKey ?? item.name ?? index}`}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-foreground-tertiary\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, payload)\n                ) : (\n                  <TooltipRow\n                    item={item}\n                    itemConfig={itemConfig}\n                    indicator={indicator}\n                    indicatorColor={indicatorColor}\n                    hideIndicator={hideIndicator}\n                    nestLabel={nestLabel}\n                    tooltipLabel={tooltipLabel}\n                  />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n\nChartTooltipContent.displayName = \"ChartTooltipContent\";\n"],"names":["RechartsTooltip","jsxs","Fragment","jsx","cn","React","useChart","resolveConfigEntry","filterVisiblePayload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,eAAeA,SAAAA;AAgD5B,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA,YAAY,OACXC,2BAAAA,IAAC,WAAW,MAAX,EAAgB,IAEjB,CAAC,iBACCA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA,GAAG,kEAAkE;AAAA,UAC9E,eAAe,cAAc;AAAA,UAC7B,OAAO,cAAc;AAAA,UACrB,mDAAmD,cAAc;AAAA,UACjE,UAAU,aAAa,cAAc;AAAA,QAAA,CACtC;AAAA,QACD,OACE;AAAA,UACE,cAAc;AAAA,UACd,kBAAkB;AAAA,QAAA;AAAA,MACpB;AAAA,IAAA;AAAA,IAKRH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,cAAc;AAAA,QAAA;AAAA,QAG5B,UAAA;AAAA,UAAAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,gBACZ,UAAA;AAAA,YAAA,YAAY,eAAe;AAAA,2CAC3B,QAAA,EAAK,WAAU,4BAA4B,UAAA,YAAY,SAAS,KAAK,KAAA,CAAK;AAAA,UAAA,GAC7E;AAAA,UACC,KAAK,UAAU,UACdE,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,OAAO,KAAK,UAAU,WAAW,KAAK,MAAM,eAAA,IAAmB,KAAK,MAAA,CACvE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;AAeO,MAAM,sBAAsBE,iBAAM;AAAA,EACvC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,QACG;AACH,UAAM,EAAE,OAAA,IAAWC,kBAAA;AAEnB,UAAM,eAAeD,iBAAM,QAAQ,MAAM;AACvC,UAAI,aAAa,CAAC,SAAS,OAAQ,QAAO;AAE1C,YAAM,CAAC,IAAI,IAAI;AACf,YAAM,MAAM,OAAO,YAAY,MAAM,WAAW,MAAM,QAAQ,OAAO;AACrE,YAAM,aAAaE,WAAAA,mBAAmB,QAAQ,MAAM,GAAG;AACvD,YAAM,QACJ,CAAC,YAAY,OAAO,UAAU,WAC1B,OAAO,KAA4B,GAAG,SAAS,QAC/C,YAAY;AAElB,UAAI,kBAAkB,SAAS;AAC7B,eACEJ,2BAAAA,IAAC,OAAA,EAAI,WAAWC,GAAAA,GAAG,eAAe,cAAc,GAC7C,UAAA,eAAe,OAA0B,OAAO,EAAA,CACnD;AAAA,MAEJ;AAEA,UAAI,CAAC,MAAO,QAAO;AACnB,4CAAQ,OAAA,EAAI,WAAWA,GAAAA,GAAG,eAAe,cAAc,GAAI,UAAA,OAAM;AAAA,IACnE,GAAG,CAAC,OAAO,gBAAgB,SAAS,WAAW,gBAAgB,QAAQ,QAAQ,CAAC;AAEhF,QAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AAExC,UAAM,YAAY,QAAQ,WAAW,KAAK,cAAc;AAExD,WACEH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWG,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,CAAC,YAAY,eAAe;AAAA,UAC7BD,2BAAAA,IAAC,OAAA,EAAI,WAAU,gBACZ,UAAAK,gCAAqB,OAAO,EAAE,IAAI,CAAC,MAAM,UAAU;AAClD,kBAAM,MAAM,OAAO,WAAW,KAAK,WAAW,KAAK,QAAQ,OAAO;AAClE,kBAAM,aAAaD,WAAAA,mBAAmB,QAAQ,MAAM,GAAG;AACvD,kBAAM,iBACJ,SAAU,KAAK,SAAqC,QAAQ,KAAK;AAEnE,mBACEJ,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWC,GAAAA;AAAAA,kBACT;AAAA,kBACA,cAAc,SAAS;AAAA,gBAAA;AAAA,gBAGxB,UAAA,aAAa,MAAM,UAAU,UAAa,KAAK,OAC9C,UAAU,KAAK,OAAO,KAAK,MAAM,MAAM,OAAO,OAAO,IAErDD,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,cAjBG,GAAG,KAAK,WAAW,KAAK,QAAQ,KAAK;AAAA,YAAA;AAAA,UAqBhD,CAAC,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,oBAAoB,cAAc;;;"}
+{"version":3,"file":"ChartTooltip.cjs","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as RechartsTooltip } from \"recharts\";\nimport type { NameType, Payload, ValueType } from \"recharts/types/component/DefaultTooltipContent\";\nimport { cn } from \"../../utils/cn\";\nimport { filterVisiblePayload, resolveConfigEntry } from \"./chartUtils\";\nimport type { ChartConfigEntry } from \"./types\";\nimport { useChart } from \"./useChart\";\n\n/** Re-export of Recharts `Tooltip` — use with `content={<ChartTooltipContent />}`. */\nexport const ChartTooltip = RechartsTooltip;\n\n/** Indicator shape rendered beside each tooltip row. */\nexport type ChartTooltipIndicator = \"dot\" | \"line\" | \"dashed\";\n\n/** Props for {@link ChartTooltipContent}. */\nexport interface ChartTooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the tooltip is currently active/visible. Passed by Recharts. */\n  active?: boolean;\n  /** Tooltip payload data. Passed by Recharts. */\n  payload?: Payload<ValueType, NameType>[];\n  /** Axis label. Passed by Recharts. */\n  label?: string | number;\n  /** Custom label formatter. */\n  labelFormatter?: (\n    label: string | number,\n    payload: Payload<ValueType, NameType>[],\n  ) => React.ReactNode;\n  /** Custom value formatter. */\n  formatter?: (\n    value: ValueType,\n    name: NameType,\n    item: Payload<ValueType, NameType>,\n    index: number,\n    payload: Payload<ValueType, NameType>[],\n  ) => React.ReactNode;\n  /** CSS class for the label element. */\n  labelClassName?: string;\n  /** Hide the tooltip header label. @default false */\n  hideLabel?: boolean;\n  /** Hide the color indicator beside each row. @default false */\n  hideIndicator?: boolean;\n  /** Visual style of the color indicator. @default \"dot\" */\n  indicator?: ChartTooltipIndicator;\n  /**\n   * Data key used to resolve the display name from config.\n   * Useful when the payload `name` differs from the config key.\n   */\n  nameKey?: string;\n  /**\n   * Data key used to resolve the header label from config.\n   * Falls back to the first payload item's `dataKey`.\n   */\n  labelKey?: string;\n  /** Override indicator color for all rows. */\n  color?: string;\n}\n\nfunction TooltipRow({\n  item,\n  itemConfig,\n  indicator,\n  indicatorColor,\n  hideIndicator,\n  nestLabel,\n  tooltipLabel,\n}: {\n  item: Payload<ValueType, NameType>;\n  itemConfig: ChartConfigEntry | undefined;\n  indicator: ChartTooltipIndicator;\n  indicatorColor: unknown;\n  hideIndicator: boolean;\n  nestLabel: boolean;\n  tooltipLabel: React.ReactNode;\n}) {\n  return (\n    <>\n      {itemConfig?.icon ? (\n        <itemConfig.icon />\n      ) : (\n        !hideIndicator && (\n          <div\n            className={cn(\"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\", {\n              \"h-2.5 w-2.5\": indicator === \"dot\",\n              \"w-1\": indicator === \"line\",\n              \"w-0 border-[1.5px] border-dashed bg-transparent\": indicator === \"dashed\",\n              \"my-0.5\": nestLabel && indicator === \"dashed\",\n            })}\n            style={\n              {\n                \"--color-bg\": indicatorColor,\n                \"--color-border\": indicatorColor,\n              } as React.CSSProperties\n            }\n          />\n        )\n      )}\n      <div\n        className={cn(\n          \"flex flex-1 justify-between leading-none\",\n          nestLabel ? \"items-end\" : \"items-center\",\n        )}\n      >\n        <div className=\"grid gap-1.5\">\n          {nestLabel ? tooltipLabel : null}\n          <span className=\"text-content-tertiary\">{itemConfig?.label || item.name}</span>\n        </div>\n        {item.value !== undefined && (\n          <span className=\"font-medium font-mono text-content-primary tabular-nums\">\n            {typeof item.value === \"number\" ? item.value.toLocaleString() : item.value}\n          </span>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * Styled tooltip content for use with `<ChartTooltip content={<ChartTooltipContent />} />`.\n *\n * Reads chart config from context to resolve labels, colors, and icons.\n * Supports dot/line/dashed indicators. Pass translated `label`s in config for i18n.\n *\n * @example\n * ```tsx\n * <ChartTooltip\n *   content={<ChartTooltipContent indicator=\"line\" />}\n * />\n * ```\n */\nexport const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref,\n  ) => {\n    const { config } = useChart();\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) return null;\n\n      const [item] = payload;\n      const key = String(labelKey || item?.dataKey || item?.name || \"value\");\n      const itemConfig = resolveConfigEntry(config, item, key);\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label;\n\n      if (labelFormatter && payload) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value as string | number, payload)}\n          </div>\n        );\n      }\n\n      if (!value) return null;\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n    if (!active || !payload?.length) return null;\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-32 items-start gap-1.5 rounded-xs border border-neutral-alphas-200 bg-surface-primary px-2.5 py-1.5 text-xs shadow-lg\",\n          className,\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {filterVisiblePayload(payload).map((item, index) => {\n            const key = String(nameKey || item.dataKey || item.name || \"value\");\n            const itemConfig = resolveConfigEntry(config, item, key);\n            const indicatorColor =\n              color || (item.payload as Record<string, unknown>)?.fill || item.color;\n\n            return (\n              <div\n                key={`${item.dataKey ?? item.name ?? index}`}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-content-tertiary\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, payload)\n                ) : (\n                  <TooltipRow\n                    item={item}\n                    itemConfig={itemConfig}\n                    indicator={indicator}\n                    indicatorColor={indicatorColor}\n                    hideIndicator={hideIndicator}\n                    nestLabel={nestLabel}\n                    tooltipLabel={tooltipLabel}\n                  />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n\nChartTooltipContent.displayName = \"ChartTooltipContent\";\n"],"names":["RechartsTooltip","jsxs","Fragment","jsx","cn","React","useChart","resolveConfigEntry","filterVisiblePayload"],"mappings":"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"}

package/dist/cjs/components/Checkbox/Checkbox.cjs

@@ -83,19 +83,19 @@ const Checkbox = React__namespace.forwardRef(
                 "flex size-5 items-center justify-center rounded border-2",
                 "transition-[border-color,background-color,color,box-shadow] duration-150",
                 // Default state
-                "border-foreground-default bg-transparent text-transparent",
+                "border-content-primary bg-transparent text-transparent",
                 // Checked state
-                "data-[state=checked]:border-foreground-default data-[state=checked]:bg-foreground-default data-[state=checked]:text-foreground-inverse",
+                "data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted",
                 // Indeterminate state
-                "data-[state=indeterminate]:border-foreground-default data-[state=indeterminate]:bg-foreground-default data-[state=indeterminate]:text-foreground-inverse",
+                "data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted",
                 // Hover & active state
-                "hover:ring-2 hover:ring-brand-accent-default group-hover:ring-2 group-hover:ring-brand-accent-default",
-                "not-disabled:active:ring-2 not-disabled:active:ring-brand-accent-default",
+                "hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default",
+                "not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default",
                 // Focus state
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
                 // Disabled state
-                "disabled:cursor-not-allowed disabled:border-neutral-300 disabled:ring-0 disabled:group-hover:ring-0",
-                "disabled:data-[state=checked]:border-neutral-300 disabled:data-[state=checked]:bg-neutral-300 disabled:data-[state=checked]:text-neutral-250",
+                "disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0",
+                "disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary",
                 !hasLabel && className
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -103,7 +103,7 @@ const Checkbox = React__namespace.forwardRef(
                 {
                   forceMount: true,
                   className: cn.cn(
-                    "flex size-3 items-center justify-center text-foreground-inverse",
+                    "flex size-3 items-center justify-center text-content-primary-inverted",
                     "data-[state=unchecked]:invisible"
                   ),
                   children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon.MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, {})
@@ -133,8 +133,8 @@ const Checkbox = React__namespace.forwardRef(
               {
                 htmlFor: id,
                 className: cn.cn(
-                  "cursor-pointer select-none text-foreground-default",
-                  "group-has-disabled:cursor-not-allowed group-has-disabled:text-neutral-250",
+                  "cursor-pointer select-none text-content-primary",
+                  "group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
                   size === "small" ? "typography-semibold-body-md" : "typography-semibold-body-lg"
                 ),
                 children: label
@@ -146,8 +146,8 @@ const Checkbox = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.cn(
-                "ml-7 text-foreground-secondary",
-                "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-neutral-250",
+                "ml-7 text-content-secondary",
+                "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary",
                 size === "small" ? "typography-regular-body-sm" : "typography-regular-body-md"
               ),
               children: helperText

package/dist/cjs/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/** Size variant controlling label and helper text typography. */\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant that controls label and helper text typography. @default \"default\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-foreground-default bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-foreground-default data-[state=checked]:bg-foreground-default data-[state=checked]:text-foreground-inverse\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-foreground-default data-[state=indeterminate]:bg-foreground-default data-[state=indeterminate]:text-foreground-inverse\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-accent-default group-hover:ring-2 group-hover:ring-brand-accent-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-accent-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-300 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-300 disabled:data-[state=checked]:bg-neutral-300 disabled:data-[state=checked]:text-neutral-250\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-foreground-inverse\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-foreground-default\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-neutral-250\",\n                size === \"small\" ? \"typography-semibold-body-md\" : \"typography-semibold-body-lg\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-foreground-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-neutral-250\",\n              size === \"small\" ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/** Size variant controlling label and helper text typography. */\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant that controls label and helper text typography. @default \"default\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-content-primary-inverted\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\" ? \"typography-semibold-body-md\" : \"typography-semibold-body-lg\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              size === \"small\" ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}