@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Card/index.js

@@ -0,0 +1,121 @@
+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", {
+	variants: {
+		variant: {
+			default: "bg-card",
+			glass: "border-transparent backdrop-blur-[var(--glass-blur)]",
+			brand: "border-transparent bg-[image:var(--brand-surface-gradient)] text-brand-surface-foreground",
+			inverted: "border-transparent bg-foreground text-background"
+		},
+		tint: {
+			subtle: "",
+			light: "",
+			medium: "",
+			heavy: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "glass",
+			tint: "subtle",
+			class: "bg-[var(--glass-subtle)]"
+		},
+		{
+			variant: "glass",
+			tint: "light",
+			class: "bg-[var(--glass-light)]"
+		},
+		{
+			variant: "glass",
+			tint: "medium",
+			class: "bg-[var(--glass-medium)]"
+		},
+		{
+			variant: "glass",
+			tint: "heavy",
+			class: "bg-[var(--glass-heavy)]"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		tint: "light"
+	}
+});
+/** Surface container with composable header/content/footer slots. */
+function Card({ className, variant, tint, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-variant": variant ?? "default",
+		className: cn(cardVariants({
+			variant,
+			tint
+		}), className),
+		...props
+	});
+}
+const cardHeaderAlign = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end"
+};
+/** Top region of a card — holds the title, description, and optional action. */
+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),
+		...props
+	});
+}
+/** Card heading rendered as an `h4`. */
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h4", {
+		"data-slot": "card-title",
+		className: cn("leading-none", className),
+		...props
+	});
+}
+/** Muted supporting text shown beneath the title. */
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+/** Action slot in the header row, aligned to the end alongside the title. */
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn("col-start-2 row-start-1 justify-self-end", className),
+		...props
+	});
+}
+/** Main body region of the card. */
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("px-6 [&:last-child]:pb-6", 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"
+};
+/** Bottom region of the card — typically holds actions or summary text. */
+function CardFooter({ className, tone = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center", cardFooterTone[tone], className),
+		...props
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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\",\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-[var(--glass-blur)]\",\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-foreground text-background\",\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)}\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,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,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"}

package/dist/primitives/Carousel/index.cjs

@@ -0,0 +1,146 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../Button/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let embla_carousel_react = require("embla-carousel-react");
+embla_carousel_react = require_chunk.__toESM(embla_carousel_react);
+//#region src/primitives/Carousel/Carousel.tsx
+const CarouselContext = react.createContext(null);
+function useCarousel() {
+	const context = react.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+	const [carouselRef, api] = (0, embla_carousel_react.default)({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = react.useState(false);
+	const [canScrollNext, setCanScrollNext] = react.useState(false);
+	const onSelect = react.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = react.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = react.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = react.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	react.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	react.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: require_cn.cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+/** Scroll viewport that lays out the slides along the carousel's axis. */
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_cn.cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			...props
+		})
+	});
+}
+/** A single slide within `CarouselContent`. */
+function CarouselItem({ className, ...props }) {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: require_cn.cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+}
+/** Button that scrolls to the previous slide; auto-disables at the start. */
+function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Button_index.Button, {
+		"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),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+/** Button that scrolls to the next slide; auto-disables at the end. */
+function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Button_index.Button, {
+		"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),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+//#endregion
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselNext = CarouselNext;
+exports.CarouselPrevious = CarouselPrevious;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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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"}

package/dist/primitives/Carousel/index.d.cts

@@ -0,0 +1,2 @@
+import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../../index13.cjs";
+export { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/primitives/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../../index13.js";
+export { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/primitives/Carousel/index.js

@@ -0,0 +1,138 @@
+import { t as cn } from "../../cn.js";
+import { Button } from "../Button/index.js";
+import * as React from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/primitives/Carousel/Carousel.tsx
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+/** Embla-backed carousel root: provides context and arrow-key navigation for its slides. */
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+/** Scroll viewport that lays out the slides along the carousel's axis. */
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			...props
+		})
+	});
+}
+/** A single slide within `CarouselContent`. */
+function CarouselItem({ className, ...props }) {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+}
+/** Button that scrolls to the previous slide; auto-disables at the start. */
+function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"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),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowLeft, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+/** Button that scrolls to the next slide; auto-disables at the end. */
+function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"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),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowRight, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

package/dist/primitives/Chart/index.cjs

@@ -0,0 +1,162 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+recharts = require_chunk.__toESM(recharts);
+//#region src/primitives/Chart/Chart.tsx
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+const INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+const ChartContext = react.createContext(null);
+function useChart() {
+	const context = react.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+/** Root chart wrapper: provides the config context, theme CSS variables, and a responsive container. */
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+	const uniqueId = react.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartContext.Provider, {
+		value: { config },
+		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),
+			...props,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+}
+/** Injects per-chart CSS custom properties (`--color-*`) derived from the config, one block per theme. */
+const ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+/** Recharts Tooltip element; pair with `ChartTooltipContent` for the styled body. */
+const ChartTooltip = recharts.Tooltip;
+/** Styled tooltip body that resolves labels, colors, and indicators from the chart config. */
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = react.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		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),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_cn.cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	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/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", 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"),
+					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)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_cn.cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						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",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+/** Recharts Legend element; pair with `ChartLegendContent` for the styled body. */
+const ChartLegend = recharts.Legend;
+/** Styled legend body that resolves labels, icons, and colors from the chart config. */
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cn.cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		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"),
+				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]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, index);
+		})
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+//#endregion
+exports.ChartContainer = ChartContainer;
+exports.ChartLegend = ChartLegend;
+exports.ChartLegendContent = ChartLegendContent;
+exports.ChartStyle = ChartStyle;
+exports.ChartTooltip = ChartTooltip;
+exports.ChartTooltipContent = ChartTooltipContent;
+
+//# sourceMappingURL=index.cjs.map