@appcorp/shadcn 1.2.0 → 2.0.0

package/components/ui/carousel-impl.js

@@ -0,0 +1,117 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+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;
+}
+const Carousel = React.forwardRef((_a, ref) => {
+    var { orientation = "horizontal", opts, setApi, plugins, className, children } = _a, props = __rest(_a, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
+    const [carouselRef, api] = useEmblaCarousel(Object.assign(Object.assign({}, 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 === null || api === void 0 ? void 0 : api.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+        api === null || api === void 0 ? void 0 : 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 === null || api === void 0 ? void 0 : api.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            carouselRef,
+            api: api,
+            opts,
+            orientation: orientation || ((opts === null || opts === void 0 ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        } },
+        React.createElement("div", Object.assign({ ref: ref, onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel" }, props), children)));
+});
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { carouselRef, orientation } = useCarousel();
+    return (React.createElement("div", { ref: carouselRef, className: "overflow-hidden" },
+        React.createElement("div", Object.assign({ ref: ref, className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className) }, props))));
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { orientation } = useCarousel();
+    return (React.createElement("div", Object.assign({ ref: ref, role: "group", "aria-roledescription": "slide", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props)));
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef((_a, ref) => {
+    var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (React.createElement(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev }, props),
+        React.createElement(ArrowLeftIcon, { className: "h-4 w-4" }),
+        React.createElement("span", { className: "sr-only" }, "Previous slide")));
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef((_a, ref) => {
+    var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (React.createElement(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props),
+        React.createElement(ArrowRightIcon, { className: "h-4 w-4" }),
+        React.createElement("span", { className: "sr-only" }, "Next slide")));
+});
+CarouselNext.displayName = "CarouselNext";
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/components/ui/carousel.d.ts

@@ -1,18 +1,6 @@
-import * as React from "react";
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-type CarouselProps = {
-    opts?: CarouselOptions;
-    plugins?: CarouselPlugin;
-    orientation?: "horizontal" | "vertical";
-    setApi?: (api: CarouselApi) => void;
-};
-declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+export type { CarouselApi } from "./carousel-impl";
+export declare const Carousel: typeof import("./carousel-impl")["Carousel"];
+export declare const CarouselContent: typeof import("./carousel-impl")["CarouselContent"];
+export declare const CarouselItem: typeof import("./carousel-impl")["CarouselItem"];
+export declare const CarouselPrevious: typeof import("./carousel-impl")["CarouselPrevious"];
+export declare const CarouselNext: typeof import("./carousel-impl")["CarouselNext"];

package/components/ui/carousel.js

@@ -1,171 +1,9 @@
 "use client";
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselNext = exports.CarouselPrevious = exports.CarouselItem = exports.CarouselContent = exports.Carousel = void 0;
-var React = __importStar(require("react"));
-var embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
-var utils_1 = require("../../lib/utils");
-var button_1 = require("../ui/button");
-var react_icons_1 = require("@radix-ui/react-icons");
-var CarouselContext = React.createContext(null);
-function useCarousel() {
-    var context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error("useCarousel must be used within a <Carousel />");
-    }
-    return context;
-}
-var Carousel = React.forwardRef(function (_a, ref) {
-    var _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, opts = _a.opts, setApi = _a.setApi, plugins = _a.plugins, className = _a.className, children = _a.children, props = __rest(_a, ["orientation", "opts", "setApi", "plugins", "className", "children"]);
-    var _c = (0, embla_carousel_react_1.default)(__assign(__assign({}, opts), { axis: orientation === "horizontal" ? "x" : "y" }), plugins), carouselRef = _c[0], api = _c[1];
-    var _d = React.useState(false), canScrollPrev = _d[0], setCanScrollPrev = _d[1];
-    var _e = React.useState(false), canScrollNext = _e[0], setCanScrollNext = _e[1];
-    var onSelect = React.useCallback(function (api) {
-        if (!api) {
-            return;
-        }
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-    }, []);
-    var scrollPrev = React.useCallback(function () {
-        api === null || api === void 0 ? void 0 : api.scrollPrev();
-    }, [api]);
-    var scrollNext = React.useCallback(function () {
-        api === null || api === void 0 ? void 0 : api.scrollNext();
-    }, [api]);
-    var handleKeyDown = React.useCallback(function (event) {
-        if (event.key === "ArrowLeft") {
-            event.preventDefault();
-            scrollPrev();
-        }
-        else if (event.key === "ArrowRight") {
-            event.preventDefault();
-            scrollNext();
-        }
-    }, [scrollPrev, scrollNext]);
-    React.useEffect(function () {
-        if (!api || !setApi) {
-            return;
-        }
-        setApi(api);
-    }, [api, setApi]);
-    React.useEffect(function () {
-        if (!api) {
-            return;
-        }
-        onSelect(api);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
-        return function () {
-            api === null || api === void 0 ? void 0 : api.off("select", onSelect);
-        };
-    }, [api, onSelect]);
-    return (React.createElement(CarouselContext.Provider, { value: {
-            carouselRef: carouselRef,
-            api: api,
-            opts: opts,
-            orientation: orientation || ((opts === null || opts === void 0 ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"),
-            scrollPrev: scrollPrev,
-            scrollNext: scrollNext,
-            canScrollPrev: canScrollPrev,
-            canScrollNext: canScrollNext,
-        } },
-        React.createElement("div", __assign({ ref: ref, onKeyDownCapture: handleKeyDown, className: (0, utils_1.cn)("relative", className), role: "region", "aria-roledescription": "carousel" }, props), children)));
-});
-exports.Carousel = Carousel;
-Carousel.displayName = "Carousel";
-var CarouselContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var _b = useCarousel(), carouselRef = _b.carouselRef, orientation = _b.orientation;
-    return (React.createElement("div", { ref: carouselRef, className: "overflow-hidden" },
-        React.createElement("div", __assign({ ref: ref, className: (0, utils_1.cn)("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className) }, props))));
-});
-exports.CarouselContent = CarouselContent;
-CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var orientation = useCarousel().orientation;
-    return (React.createElement("div", __assign({ ref: ref, role: "group", "aria-roledescription": "slide", className: (0, utils_1.cn)("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props)));
-});
-exports.CarouselItem = CarouselItem;
-CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
-    var _d = useCarousel(), orientation = _d.orientation, scrollPrev = _d.scrollPrev, canScrollPrev = _d.canScrollPrev;
-    return (React.createElement(button_1.Button, __assign({ ref: ref, variant: variant, size: size, className: (0, utils_1.cn)("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev }, props),
-        React.createElement(react_icons_1.ArrowLeftIcon, { className: "h-4 w-4" }),
-        React.createElement("span", { className: "sr-only" }, "Previous slide")));
-});
-exports.CarouselPrevious = CarouselPrevious;
-CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "outline" : _b, _c = _a.size, size = _c === void 0 ? "icon" : _c, props = __rest(_a, ["className", "variant", "size"]);
-    var _d = useCarousel(), orientation = _d.orientation, scrollNext = _d.scrollNext, canScrollNext = _d.canScrollNext;
-    return (React.createElement(button_1.Button, __assign({ ref: ref, variant: variant, size: size, className: (0, utils_1.cn)("absolute h-8 w-8 rounded-full", orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext }, props),
-        React.createElement(react_icons_1.ArrowRightIcon, { className: "h-4 w-4" }),
-        React.createElement("span", { className: "sr-only" }, "Next slide")));
-});
-exports.CarouselNext = CarouselNext;
-CarouselNext.displayName = "CarouselNext";
+import * as React from "react";
+const module = import("./carousel-impl");
+const lazy = (name) => React.lazy(() => module.then((m) => ({ default: m[name] })));
+export const Carousel = lazy("Carousel");
+export const CarouselContent = lazy("CarouselContent");
+export const CarouselItem = lazy("CarouselItem");
+export const CarouselPrevious = lazy("CarouselPrevious");
+export const CarouselNext = lazy("CarouselNext");

package/components/ui/chart-impl.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        dataKey?: string;
+        value?: number;
+        type?: string;
+        color?: string;
+        payload?: Record<string, unknown>;
+        fill?: string;
+    }>;
+    label?: string;
+    labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode;
+    formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    labelClassName?: string;
+    color?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    payload?: Array<{
+        value?: string;
+        dataKey?: string;
+        type?: string;
+        color?: string;
+    }>;
+    verticalAlign?: "top" | "bottom";
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/components/ui/chart-impl.js

@@ -0,0 +1,162 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../../lib/utils";
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" };
+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;
+}
+const ChartContainer = React.forwardRef((_a, ref) => {
+    var { id, className, children, config } = _a, props = __rest(_a, ["id", "className", "children", "config"]);
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return (React.createElement(ChartContext.Provider, { value: { config } },
+        React.createElement("div", Object.assign({ "data-chart": chartId, ref: ref, 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-none [&_.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[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className) }, props),
+            React.createElement(ChartStyle, { id: chartId, config: config }),
+            React.createElement(RechartsPrimitive.ResponsiveContainer, null, children))));
+});
+ChartContainer.displayName = "Chart";
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (React.createElement("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                var _a;
+                const color = ((_a = itemConfig.theme) === null || _a === void 0 ? void 0 : _a[theme]) ||
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+}
+`)
+                .join("\n"),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltipContent = React.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        var _a;
+        if (hideLabel || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey || (item === null || item === void 0 ? void 0 : item.dataKey) || (item === null || item === void 0 ? void 0 : item.name) || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? ((_a = config[label]) === null || _a === void 0 ? void 0 : _a.label) || label
+            : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label;
+        if (labelFormatter) {
+            return (React.createElement("div", { className: cn("font-medium", labelClassName) }, labelFormatter(String(value !== null && value !== void 0 ? value : ""), payload !== null && payload !== void 0 ? payload : [])));
+        }
+        if (!value) {
+            return null;
+        }
+        return React.createElement("div", { className: cn("font-medium", labelClassName) }, value);
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (React.createElement("div", { ref: ref, className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className) },
+        !nestLabel ? tooltipLabel : null,
+        React.createElement("div", { className: "grid gap-1.5" }, payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            var _a;
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
+            return (React.createElement("div", { key: item.dataKey, 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") }, formatter && (item === null || item === void 0 ? void 0 : item.value) !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (React.createElement(React.Fragment, null,
+                (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) ? (React.createElement(itemConfig.icon, null)) : (!hideIndicator && (React.createElement("div", { className: 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,
+                    } }))),
+                React.createElement("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center") },
+                    React.createElement("div", { className: "grid gap-1.5" },
+                        nestLabel ? tooltipLabel : null,
+                        React.createElement("span", { className: "text-muted-foreground" }, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label) || item.name)),
+                    item.value && (React.createElement("span", { className: "font-mono font-medium tabular-nums text-foreground" }, item.value.toLocaleString())))))));
+        }))));
+});
+ChartTooltipContent.displayName = "ChartTooltip";
+const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!(payload === null || payload === void 0 ? void 0 : payload.length)) {
+        return null;
+    }
+    return (React.createElement("div", { ref: ref, className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className) }, payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return (React.createElement("div", { key: item.value, className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground") },
+            (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) && !hideIcon ? (React.createElement(itemConfig.icon, null)) : (React.createElement("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                    backgroundColor: item.color,
+                } })), itemConfig === null || itemConfig === void 0 ? void 0 :
+            itemConfig.label));
+    })));
+});
+ChartLegendContent.displayName = "ChartLegend";
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    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];
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/components/ui/chart.d.ts

@@ -1,62 +1,7 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
-};
-export type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ChartStyle: ({ id, config }: {
-    id: string;
-    config: ChartConfig;
-}) => React.JSX.Element | null;
-declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    active?: boolean;
-    payload?: Array<{
-        name?: string;
-        dataKey?: string;
-        value?: number;
-        type?: string;
-        color?: string;
-        payload?: Record<string, unknown>;
-        fill?: string;
-    }>;
-    label?: string;
-    labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode;
-    formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string;
-    labelKey?: string;
-    labelClassName?: string;
-    color?: string;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    payload?: Array<{
-        value?: string;
-        dataKey?: string;
-        type?: string;
-        color?: string;
-    }>;
-    verticalAlign?: "top" | "bottom";
-    hideIcon?: boolean;
-    nameKey?: string;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
+export type { ChartConfig } from "./chart-impl";
+export declare const ChartContainer: typeof import("./chart-impl")["ChartContainer"];
+export declare const ChartTooltip: typeof import("./chart-impl")["ChartTooltip"];
+export declare const ChartTooltipContent: typeof import("./chart-impl")["ChartTooltipContent"];
+export declare const ChartLegend: typeof import("./chart-impl")["ChartLegend"];
+export declare const ChartLegendContent: typeof import("./chart-impl")["ChartLegendContent"];
+export declare const ChartStyle: typeof import("./chart-impl")["ChartStyle"];