@psnext/design-system 1.5.1 → 2.1.0

package/dist/primitives/Card/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Card/Card.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-inverse text-inverse-foreground\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid `bg-card`). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className, \"justify-between\")}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  brand: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;AAKA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,WAAW,iBAAiB;EAC3E,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAa,WAAWA,WAAAA,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,aAAU;EAAmB,WAAWA,WAAAA,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EAIV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Card/Card.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Card (288:122714): glass-none surface,\n   border/primary, radius-8, shadow-sm, 24px padding/gaps. */\nconst cardVariants = cva(\"flex flex-col justify-between gap-6 rounded-8 border text-primary-txt\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-glass-none-bg shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the glass-*-bg step.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade). Uses the\n      // theme-layer stops so it does NOT flip in dark mode (matches pre-swap look).\n      brand:\n        \"border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white\",\n      // AI affordance: gradient ring around the normal surface (accessible —\n      // a full ai-gradient background fails contrast on the gray end).\n      ai: \"ai-border [--ai-surface:var(--glass-none-bg)]\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-primary-invert-bg text-primary-invert-txt\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-glass-20-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    // No 0.5 step exists in the new glass tokens — medium maps to 40 until\n    // design adds one (flagged).\n    { variant: \"glass\", tint: \"medium\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-glass-60-bg backdrop-blur-glass\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid surface). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className)}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold\n    16/24), so we override the base heading styles explicitly. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <h4\n      data-slot=\"card-title\"\n      className={cn(\"font-sans text-base leading-6 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  // Brand band = the light brand tint pair (brand-200 surface, brand-800 text).\n  brand: \"justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800\",\n  muted: \"justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt\",\n  card: \"justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;AAOA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,yEAAyE;CAChG,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAIP,OACE;GAGF,IAAI;GAGJ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;EAG/E;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;CACjF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,qJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,+CAA+C,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EAIV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CAET,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Card/index.js

@@ -2,13 +2,14 @@ import { t as cn } from "../../cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Card/Card.tsx
-const cardVariants = cva("flex flex-col gap-6 rounded-xl border text-card-foreground", {
+const cardVariants = cva("flex flex-col justify-between gap-6 rounded-8 border text-primary-txt", {
 	variants: {
 		variant: {
-			default: "bg-card shadow-sm",
+			default: "bg-glass-none-bg shadow-sm",
 			glass: "border-transparent backdrop-blur-glass",
-			brand: "border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground",
-			inverted: "border-transparent bg-inverse text-inverse-foreground"
+			brand: "border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white",
+			ai: "ai-border [--ai-surface:var(--glass-none-bg)]",
+			inverted: "border-transparent bg-primary-invert-bg text-primary-invert-txt"
 		},
 		tint: {
 			subtle: "",
@@ -21,22 +22,22 @@ const cardVariants = cva("flex flex-col gap-6 rounded-xl border text-card-foregr
 		{
 			variant: "glass",
 			tint: "subtle",
-			class: "bg-[var(--glass-subtle)]"
+			class: "bg-glass-20-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "light",
-			class: "bg-[var(--glass-light)]"
+			class: "bg-glass-40-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "medium",
-			class: "bg-[var(--glass-medium)]"
+			class: "bg-glass-40-bg backdrop-blur-glass"
 		},
 		{
 			variant: "glass",
 			tint: "heavy",
-			class: "bg-[var(--glass-heavy)]"
+			class: "bg-glass-60-bg backdrop-blur-glass"
 		}
 	],
 	defaultVariants: {
@@ -52,7 +53,7 @@ function Card({ className, variant, tint, ...props }) {
 		className: cn(cardVariants({
 			variant,
 			tint
-		}), className, "justify-between"),
+		}), className),
 		...props
 	});
 }
@@ -65,15 +66,16 @@ const cardHeaderAlign = {
 function CardHeader({ className, align = "center", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", cardHeaderAlign[align], className),
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", cardHeaderAlign[align], className),
 		...props
 	});
 }
-/** Card heading rendered as an `h4`. */
+/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold
+16/24), so we override the base heading styles explicitly. */
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h4", {
 		"data-slot": "card-title",
-		className: cn("leading-none", className),
+		className: cn("font-sans text-base leading-6 font-semibold", className),
 		...props
 	});
 }
@@ -81,7 +83,7 @@ function CardTitle({ className, ...props }) {
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "card-description",
-		className: cn("text-muted-foreground", className),
+		className: cn("text-sm leading-5 text-muted-txt", className),
 		...props
 	});
 }
@@ -103,9 +105,9 @@ function CardContent({ className, ...props }) {
 }
 const cardFooterTone = {
 	default: "px-6 pb-6 [.border-t]:pt-6",
-	brand: "justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground",
-	muted: "justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground",
-	card: "justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground"
+	brand: "justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800",
+	muted: "justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt",
+	card: "justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt"
 };
 /** Bottom region of the card — typically holds actions or summary text. */
 function CardFooter({ className, tone = "default", ...props }) {

package/dist/primitives/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Card/Card.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst cardVariants = cva(\"flex flex-col gap-6 rounded-xl border text-card-foreground\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-card shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the --glass-* token.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade).\n      brand:\n        \"border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-inverse text-inverse-foreground\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-[var(--glass-subtle)]\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-[var(--glass-light)]\" },\n    { variant: \"glass\", tint: \"medium\", class: \"bg-[var(--glass-medium)]\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-[var(--glass-heavy)]\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid `bg-card`). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className, \"justify-between\")}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <h4 data-slot=\"card-title\" className={cn(\"leading-none\", className)} {...props} />;\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p data-slot=\"card-description\" className={cn(\"text-muted-foreground\", className)} {...props} />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  brand: \"justify-center rounded-b-xl bg-brand-accent px-6 py-3 text-brand-accent-foreground\",\n  muted: \"justify-center rounded-b-xl bg-muted px-6 py-3 text-muted-foreground\",\n  card: \"justify-center rounded-b-xl bg-card px-6 py-3 text-card-foreground\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;AAKA,MAAM,eAAe,IAAI,8DAA8D;CACrF,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAGP,OACE;GAGF,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;EACpE;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAA2B;EACtE;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAA0B;CACtE;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,WAAW,iBAAiB;EAC3E,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,KAAD;EAAG,aAAU;EAAmB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EAIV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Card/Card.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Card (288:122714): glass-none surface,\n   border/primary, radius-8, shadow-sm, 24px padding/gaps. */\nconst cardVariants = cva(\"flex flex-col justify-between gap-6 rounded-8 border text-primary-txt\", {\n  variants: {\n    variant: {\n      // Solid surface (default).\n      default: \"bg-glass-none-bg shadow-sm\",\n      // Translucent, backdrop-blurred glass surface — reads over a textured\n      // background (e.g. PageBackground). `tint` picks the glass-*-bg step.\n      glass: \"border-transparent backdrop-blur-glass\",\n      // Filled brand surface with light foreground — the active product's colour,\n      // as a left-to-right gradient (darker → lighter brand shade). Uses the\n      // theme-layer stops so it does NOT flip in dark mode (matches pre-swap look).\n      brand:\n        \"border-transparent bg-[image:linear-gradient(to_right,var(--theme-brand-700),var(--theme-brand-500-primary))] text-white\",\n      // AI affordance: gradient ring around the normal surface (accessible —\n      // a full ai-gradient background fails contrast on the gray end).\n      ai: \"ai-border [--ai-surface:var(--glass-none-bg)]\",\n      // Inverted surface — contrasts with the page (dark card in light mode,\n      // light card in dark mode).\n      inverted: \"border-transparent bg-primary-invert-bg text-primary-invert-txt\",\n    },\n    tint: {\n      subtle: \"\",\n      light: \"\",\n      medium: \"\",\n      heavy: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"glass\", tint: \"subtle\", class: \"bg-glass-20-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"light\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    // No 0.5 step exists in the new glass tokens — medium maps to 40 until\n    // design adds one (flagged).\n    { variant: \"glass\", tint: \"medium\", class: \"bg-glass-40-bg backdrop-blur-glass\" },\n    { variant: \"glass\", tint: \"heavy\", class: \"bg-glass-60-bg backdrop-blur-glass\" },\n  ],\n  defaultVariants: {\n    variant: \"default\",\n    tint: \"light\",\n  },\n});\n\ntype CardProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & {\n    /** Surface treatment of the card. Default `default` (solid surface). */\n    variant?: VariantProps<typeof cardVariants>[\"variant\"];\n    /** Glass opacity step — only applies to `variant=\"glass\"`. Default `light`. */\n    tint?: VariantProps<typeof cardVariants>[\"tint\"];\n  };\n\n/** Surface container with composable header/content/footer slots. */\nfunction Card({ className, variant, tint, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      className={cn(cardVariants({ variant, tint }), className)}\n      {...props}\n    />\n  );\n}\n\n// Vertical alignment of the header's items (title/description vs. the action).\nconst cardHeaderAlign = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n} as const;\n\n/** Top region of a card — holds the title, description, and optional action. */\nfunction CardHeader({\n  className,\n  align = \"center\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Vertical alignment of the header items. Default `center`. */\n  align?: keyof typeof cardHeaderAlign;\n}) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] gap-1 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        cardHeaderAlign[align],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Card heading rendered as an `h4`. Figma binds the body font (Inter Semibold\n    16/24), so we override the base heading styles explicitly. */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <h4\n      data-slot=\"card-title\"\n      className={cn(\"font-sans text-base leading-6 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting text shown beneath the title. */\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Action slot in the header row, aligned to the end alongside the title. */\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      // Sits in row 1 alongside the title (not spanning rows) and has no `self-*`,\n      // so it shares the title's row and follows CardHeader's `align` — the title\n      // and action then truly centre against each other regardless of height.\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main body region of the card. */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 [&:last-child]:pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\n// Footer fill. `default` is transparent (the usual footer); `brand`/`muted`\n// render a full-width tinted band with the action centred — pair with\n// `<Card className=\"overflow-hidden\">` so the band clips to the card radius.\nconst cardFooterTone = {\n  default: \"px-6 pb-6 [.border-t]:pt-6\",\n  // Brand band = the light brand tint pair (brand-200 surface, brand-800 text).\n  brand: \"justify-center rounded-b-8 bg-brand-200 px-6 py-3 text-brand-800\",\n  muted: \"justify-center rounded-b-8 bg-muted-bg px-6 py-3 text-muted-txt\",\n  card: \"justify-center rounded-b-8 bg-glass-none-bg px-6 py-3 text-primary-txt\",\n} as const;\n\n/** Bottom region of the card — typically holds actions or summary text. */\nfunction CardFooter({\n  className,\n  tone = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Footer fill. `brand`/`muted` render a full-width tinted band. */\n  tone?: keyof typeof cardFooterTone;\n}) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center\", cardFooterTone[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardVariants,\n  type CardProps,\n};\n"],"mappings":";;;;AAOA,MAAM,eAAe,IAAI,yEAAyE;CAChG,UAAU;EACR,SAAS;GAEP,SAAS;GAGT,OAAO;GAIP,OACE;GAGF,IAAI;GAGJ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;EAG/E;GAAE,SAAS;GAAS,MAAM;GAAU,OAAO;EAAqC;EAChF;GAAE,SAAS;GAAS,MAAM;GAAS,OAAO;EAAqC;CACjF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAWD,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAGA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;AAGA,SAAS,WAAW,EAClB,WACA,QAAQ,UACR,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qJACA,gBAAgB,QAChB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EAIV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAKA,MAAM,iBAAiB;CACrB,SAAS;CAET,OAAO;CACP,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,WAAW,EAClB,WACA,OAAO,WACP,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,eAAe,OAAO,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Carousel/index.cjs

@@ -109,7 +109,7 @@ function CarouselPrevious({ className, variant = "outline", size = "icon", ...pr
 		"data-slot": "carousel-previous",
 		variant,
 		size,
-		className: require_cn.cn("absolute size-8 rounded-lg", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: require_cn.cn("absolute size-9 rounded-8 border-primary-border", orientation === "horizontal" ? "top-1/2 -left-13 -translate-y-1/2" : "-top-13 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
@@ -126,7 +126,7 @@ function CarouselNext({ className, variant = "outline", size = "icon", ...props
 		"data-slot": "carousel-next",
 		variant,
 		size,
-		className: require_cn.cn("absolute size-8 rounded-lg", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: require_cn.cn("absolute size-9 rounded-8 border-primary-border", orientation === "horizontal" ? "top-1/2 -right-13 -translate-y-1/2" : "-bottom-13 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,

package/dist/primitives/Carousel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","cn","Button","ArrowLeft","ArrowRight"],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-lg\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-lg\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","cn","Button","ArrowLeft","ArrowRight"],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-13 -translate-y-1/2\"\n          : \"-top-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-13 -translate-y-1/2\"\n          : \"-bottom-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}

package/dist/primitives/Carousel/index.js

@@ -105,7 +105,7 @@ function CarouselPrevious({ className, variant = "outline", size = "icon", ...pr
 		"data-slot": "carousel-previous",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-lg", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-9 rounded-8 border-primary-border", orientation === "horizontal" ? "top-1/2 -left-13 -translate-y-1/2" : "-top-13 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
@@ -122,7 +122,7 @@ function CarouselNext({ className, variant = "outline", size = "icon", ...props
 		"data-slot": "carousel-next",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-lg", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-9 rounded-8 border-primary-border", orientation === "horizontal" ? "top-1/2 -right-13 -translate-y-1/2" : "-bottom-13 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,

package/dist/primitives/Carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-lg\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-lg\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  /** Embla carousel options (loop, align, dragFree, etc.). */\n  opts?: CarouselOptions;\n  /** Embla plugins (e.g. Autoplay) to extend the carousel behaviour. */\n  plugins?: CarouselPlugin;\n  /** Scroll axis of the carousel. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Receives the Embla API instance once initialised, for external control. */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\n/** Scroll viewport that lays out the slides along the carousel's axis. */\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A single slide within `CarouselContent`. */\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Button that scrolls to the previous slide; auto-disables at the start. */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-13 -translate-y-1/2\"\n          : \"-top-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\n/** Button that scrolls to the next slide; auto-disables at the end. */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-9 rounded-8 border-primary-border\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-13 -translate-y-1/2\"\n          : \"-bottom-13 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}

package/dist/primitives/Chart/index.cjs

@@ -30,7 +30,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-slot": "chart",
 			"data-chart": chartId,
-			className: require_cn.cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			className: require_cn.cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-txt [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-primary-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-primary-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-primary-border [&_.recharts-radial-bar-background-sector]:fill-muted-bg [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted-bg [&_.recharts-reference-line_[stroke='#ccc']]:stroke-primary-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartStyle, {
 				id: chartId,
@@ -66,12 +66,12 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`);
 		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
 		if (labelFormatter) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_cn.cn("font-medium", labelClassName),
+			className: require_cn.cn("font-semibold", labelClassName),
 			children: labelFormatter(value, payload)
 		});
 		if (!value) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_cn.cn("font-medium", labelClassName),
+			className: require_cn.cn("font-semibold", labelClassName),
 			children: value
 		});
 	}, [
@@ -86,19 +86,19 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cn.cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl", className),
+		className: require_cn.cn("grid min-w-32 items-start rounded-8 border border-primary-border bg-glass-none-bg px-3 py-2 text-xs leading-4", className),
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "grid gap-1.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {
 				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
 				const indicatorColor = color ?? item.payload?.fill ?? item.color;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_cn.cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					className: require_cn.cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-txt", indicator === "dot" && "items-center"),
 					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: require_cn.cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+						className: require_cn.cn("shrink-0 rounded-2 border-(--color-border) bg-(--color-bg)", {
 							"h-2.5 w-2.5": indicator === "dot",
-							"w-1": indicator === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"w-0.75": indicator === "line",
+							"w-0 border-2 border-dashed bg-transparent": indicator === "dashed",
 							"my-0.5": nestLabel && indicator === "dashed"
 						}),
 						style: {
@@ -110,11 +110,11 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "grid gap-1.5",
 							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-muted-foreground",
+								className: "text-primary-txt",
 								children: itemConfig?.label ?? item.name
 							})]
 						}), item.value != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-mono font-medium text-foreground tabular-nums",
+							className: "font-semibold text-primary-txt tabular-nums",
 							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
 						})]
 					})] })
@@ -134,9 +134,9 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
 		children: payload.filter((item) => item.type !== "none").map((item, index) => {
 			const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.dataKey ?? "value"}`);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_cn.cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				className: require_cn.cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-txt"),
 				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					className: "h-2 w-2 shrink-0 rounded-2",
 					style: { backgroundColor: item.color }
 				}), itemConfig?.label]
 			}, index);

package/dist/primitives/Chart/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","cn","RechartsPrimitive"],"sources":["../../../src/primitives/Chart/Chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport type { TooltipValueType } from \"recharts\";\n\nimport { cn } from \"@/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\n/** Maps each data key to its display label, optional icon, and color (flat or per-theme). */\nexport type ChartConfig = Record<\n  string,\n  {\n    /** Human-readable label rendered in tooltips and the legend. */\n    label?: React.ReactNode;\n    /** Optional icon component shown alongside the label. */\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/** Root chart wrapper: provides the config context, theme CSS variables, and a responsive container. */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Maps data keys to labels, icons, and colors used across tooltip and legend. */\n  config: ChartConfig;\n  /** Recharts chart element rendered inside the responsive container. */\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n  /** Initial width/height used before the responsive container measures its parent. */\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/** Injects per-chart CSS custom properties (`--color-*`) derived from the config, one block per theme. */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/** Recharts Tooltip element; pair with `ChartTooltipContent` for the styled body. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/** Styled tooltip body that resolves labels, colors, and indicators from the chart config. */\nfunction ChartTooltipContent({\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}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Hides the tooltip's leading label row. */\n    hideLabel?: boolean;\n    /** Hides the per-item color indicator swatch. */\n    hideIndicator?: boolean;\n    /** Visual style of the per-item color indicator. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Config key used to resolve each item's label/color (defaults to its name). */\n    nameKey?: string;\n    /** Config key used to resolve the tooltip's label (defaults to the data key). */\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            },\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-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\n/** Recharts Legend element; pair with `ChartLegendContent` for the styled body. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Styled legend body that resolves labels, icons, and colors from the chart config. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  /** Hides each item's icon, showing only the color swatch. */\n  hideIcon?: boolean;\n  /** Config key used to resolve each item's label/color (defaults to the data key). */\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","cn","RechartsPrimitive"],"sources":["../../../src/primitives/Chart/Chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport type { TooltipValueType } from \"recharts\";\n\nimport { cn } from \"@/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\n/** Maps each data key to its display label, optional icon, and color (flat or per-theme). */\nexport type ChartConfig = Record<\n  string,\n  {\n    /** Human-readable label rendered in tooltips and the legend. */\n    label?: React.ReactNode;\n    /** Optional icon component shown alongside the label. */\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/** Root chart wrapper: provides the config context, theme CSS variables, and a responsive container. */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Maps data keys to labels, icons, and colors used across tooltip and legend. */\n  config: ChartConfig;\n  /** Recharts chart element rendered inside the responsive container. */\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n  /** Initial width/height used before the responsive container measures its parent. */\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-txt [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-primary-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-primary-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-primary-border [&_.recharts-radial-bar-background-sector]:fill-muted-bg [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted-bg [&_.recharts-reference-line_[stroke='#ccc']]:stroke-primary-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/** Injects per-chart CSS custom properties (`--color-*`) derived from the config, one block per theme. */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/** Recharts Tooltip element; pair with `ChartTooltipContent` for the styled body. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/** Styled tooltip body that resolves labels, colors, and indicators from the chart config. */\nfunction ChartTooltipContent({\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}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Hides the tooltip's leading label row. */\n    hideLabel?: boolean;\n    /** Hides the per-item color indicator swatch. */\n    hideIndicator?: boolean;\n    /** Visual style of the per-item color indicator. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Config key used to resolve each item's label/color (defaults to its name). */\n    nameKey?: string;\n    /** Config key used to resolve the tooltip's label (defaults to the data key). */\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-semibold\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-semibold\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start rounded-8 border border-primary-border bg-glass-none-bg px-3 py-2 text-xs leading-4\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-txt\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-2 border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-0.75\": indicator === \"line\",\n                              \"w-0 border-2 border-dashed bg-transparent\": indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            },\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-primary-txt\">{itemConfig?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-semibold text-primary-txt tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\n/** Recharts Legend element; pair with `ChartLegendContent` for the styled body. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Styled legend body that resolves labels, icons, and colors from the chart config. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  /** Hides each item's icon, showing only the color swatch. */\n  hideIcon?: boolean;\n  /** Config key used to resolve each item's label/color (defaults to the data key). */\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-txt\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-2\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}

package/dist/primitives/Chart/index.js

@@ -26,7 +26,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "chart",
 			"data-chart": chartId,
-			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-txt [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-primary-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-primary-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-primary-border [&_.recharts-radial-bar-background-sector]:fill-muted-bg [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted-bg [&_.recharts-reference-line_[stroke='#ccc']]:stroke-primary-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
 			...props,
 			children: [/* @__PURE__ */ jsx(ChartStyle, {
 				id: chartId,
@@ -62,12 +62,12 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`);
 		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
 		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
-			className: cn("font-medium", labelClassName),
+			className: cn("font-semibold", labelClassName),
 			children: labelFormatter(value, payload)
 		});
 		if (!value) return null;
 		return /* @__PURE__ */ jsx("div", {
-			className: cn("font-medium", labelClassName),
+			className: cn("font-semibold", labelClassName),
 			children: value
 		});
 	}, [
@@ -82,19 +82,19 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs shadow-xl", className),
+		className: cn("grid min-w-32 items-start rounded-8 border border-primary-border bg-glass-none-bg px-3 py-2 text-xs leading-4", className),
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
 			className: "grid gap-1.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {
 				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
 				const indicatorColor = color ?? item.payload?.fill ?? item.color;
 				return /* @__PURE__ */ jsx("div", {
-					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-txt", indicator === "dot" && "items-center"),
 					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
-						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+						className: cn("shrink-0 rounded-2 border-(--color-border) bg-(--color-bg)", {
 							"h-2.5 w-2.5": indicator === "dot",
-							"w-1": indicator === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"w-0.75": indicator === "line",
+							"w-0 border-2 border-dashed bg-transparent": indicator === "dashed",
 							"my-0.5": nestLabel && indicator === "dashed"
 						}),
 						style: {
@@ -106,11 +106,11 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "grid gap-1.5",
 							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
-								className: "text-muted-foreground",
+								className: "text-primary-txt",
 								children: itemConfig?.label ?? item.name
 							})]
 						}), item.value != null && /* @__PURE__ */ jsx("span", {
-							className: "font-mono font-medium text-foreground tabular-nums",
+							className: "font-semibold text-primary-txt tabular-nums",
 							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
 						})]
 					})] })
@@ -130,9 +130,9 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
 		children: payload.filter((item) => item.type !== "none").map((item, index) => {
 			const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.dataKey ?? "value"}`);
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-txt"),
 				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
-					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					className: "h-2 w-2 shrink-0 rounded-2",
 					style: { backgroundColor: item.color }
 				}), itemConfig?.label]
 			}, index);