@thesage/charts 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,23 @@
+
+
+> @thesage/charts@0.1.0 build /Users/shalomormsby/Developer/work/ecosystem/packages/charts
+> tsup src/index.ts --format cjs,esm --dts
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /Users/shalomormsby/Developer/work/ecosystem/packages/charts/tsup.config.ts
+CLI Target: es2020
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist/index.mjs     4.07 KB
+ESM dist/index.mjs.map 17.06 KB
+ESM ⚡️ Build success in 38ms
+CJS dist/index.js     4.97 KB
+CJS dist/index.js.map 17.21 KB
+CJS ⚡️ Build success in 38ms
+DTS Build start
+DTS ⚡️ Build success in 1352ms
+DTS dist/index.d.ts  2.37 KB
+DTS dist/index.d.mts 2.37 KB

package/.turbo/turbo-lint.log

@@ -0,0 +1,6 @@
+
+> @sage/charts@0.1.0 lint /Users/shalomormsby/Developer/work/ecosystem/packages/charts
+> eslint src/
+
+sh: eslint: command not found
+ ELIFECYCLE  Command failed.

package/dist/index.d.mts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+export * from 'recharts';
+
+declare const THEMES: {
+    readonly light: {
+        readonly '--color-chart-1': "12 76% 61%";
+        readonly '--color-chart-2': "173 58% 39%";
+        readonly '--color-chart-3': "197 37% 24%";
+        readonly '--color-chart-4': "43 74% 66%";
+        readonly '--color-chart-5': "27 87% 67%";
+    };
+    readonly dark: {
+        readonly '--color-chart-1': "220 70% 50%";
+        readonly '--color-chart-2': "160 60% 45%";
+        readonly '--color-chart-3': "30 80% 55%";
+        readonly '--color-chart-4': "280 65% 60%";
+        readonly '--color-chart-5': "340 75% 55%";
+    };
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+        color?: string;
+        theme?: Record<keyof typeof THEMES, string>;
+    };
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    active?: boolean;
+    payload?: any[];
+    label?: any;
+    labelFormatter?: (label: any, payload: any[]) => React.ReactNode;
+    config?: ChartConfig;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof Legend;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+    verticalAlign?: "top" | "bottom" | "middle";
+    payload?: any[];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+export * from 'recharts';
+
+declare const THEMES: {
+    readonly light: {
+        readonly '--color-chart-1': "12 76% 61%";
+        readonly '--color-chart-2': "173 58% 39%";
+        readonly '--color-chart-3': "197 37% 24%";
+        readonly '--color-chart-4': "43 74% 66%";
+        readonly '--color-chart-5': "27 87% 67%";
+    };
+    readonly dark: {
+        readonly '--color-chart-1': "220 70% 50%";
+        readonly '--color-chart-2': "160 60% 45%";
+        readonly '--color-chart-3': "30 80% 55%";
+        readonly '--color-chart-4': "280 65% 60%";
+        readonly '--color-chart-5': "340 75% 55%";
+    };
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+        color?: string;
+        theme?: Record<keyof typeof THEMES, string>;
+    };
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    active?: boolean;
+    payload?: any[];
+    label?: any;
+    labelFormatter?: (label: any, payload: any[]) => React.ReactNode;
+    config?: ChartConfig;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof Legend;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+    verticalAlign?: "top" | "bottom" | "middle";
+    payload?: any[];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";var V=Object.create;var y=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var o in e)y(t,o,{get:e[o],enumerable:!0})},v=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of z(e))!F.call(t,n)&&n!==o&&y(t,n,{get:()=>e[n],enumerable:!(r=q(e,n))||r.enumerable});return t},x=(t,e,o)=>(v(t,e,"default"),o&&v(o,e,"default")),W=(t,e,o)=>(o=t!=null?V(A(t)):{},v(e||!t||!t.__esModule?y(o,"default",{value:t,enumerable:!0}):o,t)),B=t=>v(y({},"__esModule",{value:!0}),t);var m={};O(m,{ChartContainer:()=>S,ChartLegend:()=>J,ChartLegendContent:()=>H,ChartStyle:()=>_,ChartTooltip:()=>G,ChartTooltipContent:()=>j});module.exports=B(m);var l=W(require("react")),u=require("recharts");var T=require("clsx"),E=require("tailwind-merge");function c(...t){return(0,E.twMerge)((0,T.clsx)(t))}var a=require("react/jsx-runtime");var M=l.createContext(null);function $(){let t=l.useContext(M);if(!t)throw new Error("useChart must be used within a <ChartContainer />");return t}var S=l.forwardRef(({id:t,className:e,children:o,config:r,...n},d)=>{let f=l.useId(),i=`chart-${t||f.replace(/:/g,"")}`;return(0,a.jsx)(M.Provider,{value:{config:r},children:(0,a.jsxs)("div",{"data-chart":i,ref:d,className:c("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-[var(--color-text-secondary)] [&_.recharts-cartesian-grid_line]:stroke-[var(--color-border)]",e),...n,children:[(0,a.jsx)(_,{id:i,config:r}),(0,a.jsx)(u.ResponsiveContainer,{children:o})]})})});S.displayName="ChartContainer";var _=({id:t,config:e})=>{let o=Object.entries(e).filter(([r,n])=>n.theme||n.color);return o.length?(0,a.jsx)("style",{dangerouslySetInnerHTML:{__html:`
+        [data-chart=${t}] {
+          ${o.map(([r,n])=>{let d=n.theme||n.color;return d?`--color-${r}: ${d};`:null}).join(`
+`)}
+        }
+      `}}):null},G=u.Tooltip,j=l.forwardRef(({active:t,payload:e,className:o,indicator:r="dot",hideLabel:n=!1,hideIndicator:d=!1,label:f,labelFormatter:i,config:b,nameKey:R,labelKey:g},K)=>{let{config:D}=$(),h=b||D,k=l.useMemo(()=>{if(n||!e||!e.length)return null;let[s]=e,N=`${g||s.dataKey||s.name||"value"}`,w=P(h,s,N),p=!g&&typeof f=="string"?h[f]?.label||f:w?.label;return i?(0,a.jsx)("div",{className:c("font-medium"),children:i(p,e)}):p?(0,a.jsx)("div",{className:c("font-medium"),children:p}):null},[f,i,e,n,g,h]);if(!t||!e?.length)return null;let C=e.length===1&&r!=="dot";return(0,a.jsxs)("div",{ref:K,className:c("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out animate-in fade-in-0 zoom-in-95",o),children:[C?null:k,(0,a.jsx)("div",{className:"grid gap-1.5",children:e.map((s,N)=>{let w=`${R||s.name||s.dataKey||"value"}`,p=P(h,s,w),L=I(s.payload.fill||s.color);return(0,a.jsxs)("div",{className:c("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",r==="dot"&&"items-center"),children:[r&&!d&&(0,a.jsx)("div",{className:c("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",{"h-2.5 w-2.5":r==="dot","w-1":r==="line","w-0 border-[1.5px] border-dashed bg-transparent":r==="dashed","my-0.5":C&&r==="dashed"}),style:{"--color-bg":L,"--color-border":L}}),(0,a.jsxs)("div",{className:c("flex flex-1 justify-between leading-none",C?"items-end":"items-center"),children:[(0,a.jsxs)("div",{className:"grid gap-1.5",children:[C?k:null,(0,a.jsx)("span",{className:"text-[var(--color-text-secondary)]",children:p?.label||s.name})]}),s.value&&(0,a.jsx)("span",{className:"font-mono font-medium tabular-nums text-[var(--color-text-primary)]",children:s.value.toLocaleString()})]})]},s.dataKey||N)})})]})});j.displayName="ChartTooltipContent";var J=u.Legend,H=l.forwardRef(({className:t,hideIcon:e=!1,payload:o,verticalAlign:r="bottom",nameKey:n},d)=>{let{config:f}=$();return o?.length?(0,a.jsx)("div",{ref:d,className:c("flex items-center justify-center gap-4",r==="top"?"pb-3":"pt-3",t),children:o.map(i=>{let b=`${n||i.dataKey||"value"}`,R=P(f,i,b),g=I(i.color);return(0,a.jsxs)("div",{className:c("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),children:[!e&&(0,a.jsx)("div",{className:"h-2 w-2 shrink-0 rounded-[2px]",style:{backgroundColor:g}}),(0,a.jsx)("span",{className:"text-sm text-[var(--color-text-primary)]",children:R?.label||i.value})]},i.value)})}):null});H.displayName="ChartLegendContent";function P(t,e,o){if(typeof e!="object"||e===null)return;let r="payload"in e&&typeof e.payload=="object"&&e.payload!==null?e.payload:void 0,n=o;return o in e&&typeof e[o]=="string"?n=e[o]:r&&o in r&&typeof r[o]=="string"&&(n=r[o]),n in t?t[n]:t[o]}function I(t){return t?(t.startsWith("var(--"),t):"var(--color-primary)"}x(m,require("recharts"),module.exports);0&&(module.exports={ChartContainer,ChartLegend,ChartLegendContent,ChartStyle,ChartTooltip,ChartTooltipContent,...require("recharts")});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/chart.tsx","../src/lib/utils.ts"],"sourcesContent":["export * from './components/chart';\nexport * from 'recharts';\n\n// Override specific recharts exports if we wrapped them, \n// otherwise we just export the primitives and let usage include regular recharts components.\n","'use client';\n\nimport * as React from 'react';\nimport { ResponsiveContainer, Legend, Tooltip } from 'recharts';\nimport { cn } from '../lib/utils';\n\n// Format: { THEME_NAME: { cssVariable: string; value: string } }\nconst THEMES = {\n    light: {\n        '--color-chart-1': '12 76% 61%',\n        '--color-chart-2': '173 58% 39%',\n        '--color-chart-3': '197 37% 24%',\n        '--color-chart-4': '43 74% 66%',\n        '--color-chart-5': '27 87% 67%',\n    },\n    dark: {\n        '--color-chart-1': '220 70% 50%',\n        '--color-chart-2': '160 60% 45%',\n        '--color-chart-3': '30 80% 55%',\n        '--color-chart-4': '280 65% 60%',\n        '--color-chart-5': '340 75% 55%',\n    },\n} as const;\n\nexport type ChartConfig = {\n    [k in string]: {\n        label?: React.ReactNode;\n        icon?: React.ComponentType;\n        color?: string;\n        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\nconst ChartContainer = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        config: ChartConfig;\n        children: React.ComponentProps<typeof ResponsiveContainer>['children'];\n    }\n>(({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n    return (\n        <ChartContext.Provider value={{ config }}>\n            <div\n                data-chart={chartId}\n                ref={ref}\n                className={cn(\n                    \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-[var(--color-text-secondary)] [&_.recharts-cartesian-grid_line]:stroke-[var(--color-border)]\",\n                    className\n                )}\n                {...props}\n            >\n                <ChartStyle id={chartId} config={config} />\n                <ResponsiveContainer>\n                    {children}\n                </ResponsiveContainer>\n            </div>\n        </ChartContext.Provider>\n    );\n});\nChartContainer.displayName = 'ChartContainer';\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n    const colorConfig = Object.entries(config).filter(\n        ([_, value]) => value.theme || value.color\n    );\n\n    if (!colorConfig.length) {\n        return null;\n    }\n\n    return (\n        <style dangerouslySetInnerHTML={{\n            __html: `\n        [data-chart=${id}] {\n          ${colorConfig\n                    .map(([key, item]) => {\n                        const color = item.theme || item.color;\n                        return color ? `--color-${key}: ${color};` : null;\n                    })\n                    .join('\\n')}\n        }\n      `\n        }} />\n    );\n};\n\n// -- Tooltip --\n\nconst ChartTooltip = Tooltip;\n\nconst ChartTooltipContent = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        hideLabel?: boolean;\n        hideIndicator?: boolean;\n        indicator?: 'line' | 'dot' | 'dashed';\n        nameKey?: string;\n        labelKey?: string;\n        active?: boolean;\n        payload?: any[];\n        label?: any;\n        labelFormatter?: (label: any, payload: any[]) => React.ReactNode;\n        config?: ChartConfig;\n    }\n>(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, config, nameKey, labelKey }, ref) => {\n    const { config: configFromContext } = useChart();\n    const chartConfig = config || configFromContext;\n\n    const tooltipLabel = React.useMemo(() => {\n        if (hideLabel || !payload || !payload.length) {\n            return null\n        }\n\n        const [item] = payload\n        const key = `${labelKey || item.dataKey || item.name || 'value'}`\n        const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)\n        const value =\n            !labelKey && typeof label === \"string\"\n                ? chartConfig[label as keyof typeof chartConfig]?.label || label\n                : itemConfig?.label\n\n        if (labelFormatter) {\n            return (\n                <div className={cn(\"font-medium\")}>\n                    {labelFormatter(value, payload)}\n                </div>\n            )\n        }\n\n        if (!value) {\n            return null\n        }\n\n        return <div className={cn(\"font-medium\")}>{value}</div>\n    }, [\n        label,\n        labelFormatter,\n        payload,\n        hideLabel,\n        labelKey,\n        chartConfig,\n    ])\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            ref={ref}\n            className={cn(\n                'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out animate-in fade-in-0 zoom-in-95',\n                className\n            )}\n        >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n                {payload.map((item, index) => {\n                    const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                    const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)\n                    const indicatorColor = colorToCssVariable(\n                        item.payload.fill || item.color\n                    )\n\n                    return (\n                        <div\n                            key={item.dataKey || 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                            {indicator && !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                            <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-[var(--color-text-secondary)]\">\n                                        {itemConfig?.label || item.name}\n                                    </span>\n                                </div>\n                                {item.value && (\n                                    <span className=\"font-mono font-medium tabular-nums text-[var(--color-text-primary)]\">\n                                        {item.value.toLocaleString()}\n                                    </span>\n                                )}\n                            </div>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    );\n});\nChartTooltipContent.displayName = 'ChartTooltipContent';\n\n// -- Legend --\n\nconst ChartLegend = Legend;\n\nconst ChartLegendContent = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        hideIcon?: boolean;\n        nameKey?: string;\n        verticalAlign?: 'top' | 'bottom' | 'middle';\n        payload?: any[];\n    }\n>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n    const { config } = useChart();\n\n    if (!payload?.length) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                'flex items-center justify-center gap-4',\n                verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n                className\n            )}\n        >\n            {payload.map((item) => {\n                const key = `${nameKey || item.dataKey || \"value\"}`\n                const itemConfig = getPayloadConfigFromPayload(config, item, key)\n                const indicatorColor = colorToCssVariable(item.color)\n\n                return (\n                    <div\n                        key={item.value}\n                        className={cn(\n                            \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n                        )}\n                    >\n                        {!hideIcon && (\n                            <div\n                                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                                style={{ backgroundColor: indicatorColor }}\n                            />\n                        )}\n                        <span className=\"text-sm text-[var(--color-text-primary)]\">\n                            {itemConfig?.label || item.value}\n                        </span>\n                    </div>\n                )\n            })}\n        </div>\n    );\n});\nChartLegendContent.displayName = 'ChartLegendContent';\n\n// Helper to extract config\nfunction getPayloadConfigFromPayload(\n    config: ChartConfig,\n    payload: unknown,\n    key: string\n) {\n    if (typeof payload !== \"object\" || payload === null) {\n        return undefined\n    }\n\n    const payloadPayload =\n        \"payload\" in payload &&\n            typeof payload.payload === \"object\" &&\n            payload.payload !== null\n            ? payload.payload\n            : undefined\n\n    let configLabelKey: string = key\n\n    if (\n        key in payload &&\n        typeof payload[key as keyof typeof payload] === \"string\"\n    ) {\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[\n            key as keyof typeof payloadPayload\n        ] as string\n    }\n\n    return configLabelKey in config\n        ? config[configLabelKey]\n        : config[key as keyof typeof config]\n}\n\nfunction colorToCssVariable(color: string | undefined): string {\n    if (!color) return 'var(--color-primary)';\n    // If it's a theme variable like `var(--color-...)` return it\n    if (color.startsWith('var(--')) return color;\n    // If we wanted to map theme keys to vars, we could do it here\n    return color;\n}\n\nexport {\n    ChartContainer,\n    ChartTooltip,\n    ChartTooltipContent,\n    ChartLegend,\n    ChartLegendContent,\n    ChartStyle,\n};\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":["index_exports","__export","ChartContainer","ChartLegend","ChartLegendContent","ChartStyle","ChartTooltip","ChartTooltipContent","__toCommonJS","React","import_recharts","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","ChartContext","useChart","context","ChartContainer","id","className","children","config","props","ref","uniqueId","chartId","cn","ChartStyle","colorConfig","_","value","key","item","color","ChartTooltip","ChartTooltipContent","active","payload","indicator","hideLabel","hideIndicator","label","labelFormatter","nameKey","labelKey","configFromContext","chartConfig","tooltipLabel","itemConfig","getPayloadConfigFromPayload","nestLabel","index","indicatorColor","colorToCssVariable","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey","__reExport","index_exports"]}

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import*as l from"react";import{ResponsiveContainer as $,Legend as S,Tooltip as _}from"recharts";import{clsx as E}from"clsx";import{twMerge as M}from"tailwind-merge";function c(...t){return M(E(t))}import{jsx as s,jsxs as u}from"react/jsx-runtime";var w=l.createContext(null);function P(){let t=l.useContext(w);if(!t)throw new Error("useChart must be used within a <ChartContainer />");return t}var j=l.forwardRef(({id:t,className:e,children:r,config:o,...n},d)=>{let f=l.useId(),i=`chart-${t||f.replace(/:/g,"")}`;return s(w.Provider,{value:{config:o},children:u("div",{"data-chart":i,ref:d,className:c("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-[var(--color-text-secondary)] [&_.recharts-cartesian-grid_line]:stroke-[var(--color-border)]",e),...n,children:[s(H,{id:i,config:o}),s($,{children:r})]})})});j.displayName="ChartContainer";var H=({id:t,config:e})=>{let r=Object.entries(e).filter(([o,n])=>n.theme||n.color);return r.length?s("style",{dangerouslySetInnerHTML:{__html:`
+        [data-chart=${t}] {
+          ${r.map(([o,n])=>{let d=n.theme||n.color;return d?`--color-${o}: ${d};`:null}).join(`
+`)}
+        }
+      `}}):null},F=_,I=l.forwardRef(({active:t,payload:e,className:r,indicator:o="dot",hideLabel:n=!1,hideIndicator:d=!1,label:f,labelFormatter:i,config:C,nameKey:v,labelKey:g},L)=>{let{config:T}=P(),m=C||T,R=l.useMemo(()=>{if(n||!e||!e.length)return null;let[a]=e,y=`${g||a.dataKey||a.name||"value"}`,x=b(m,a,y),p=!g&&typeof f=="string"?m[f]?.label||f:x?.label;return i?s("div",{className:c("font-medium"),children:i(p,e)}):p?s("div",{className:c("font-medium"),children:p}):null},[f,i,e,n,g,m]);if(!t||!e?.length)return null;let h=e.length===1&&o!=="dot";return u("div",{ref:L,className:c("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out animate-in fade-in-0 zoom-in-95",r),children:[h?null:R,s("div",{className:"grid gap-1.5",children:e.map((a,y)=>{let x=`${v||a.name||a.dataKey||"value"}`,p=b(m,a,x),N=k(a.payload.fill||a.color);return u("div",{className:c("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",o==="dot"&&"items-center"),children:[o&&!d&&s("div",{className:c("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",{"h-2.5 w-2.5":o==="dot","w-1":o==="line","w-0 border-[1.5px] border-dashed bg-transparent":o==="dashed","my-0.5":h&&o==="dashed"}),style:{"--color-bg":N,"--color-border":N}}),u("div",{className:c("flex flex-1 justify-between leading-none",h?"items-end":"items-center"),children:[u("div",{className:"grid gap-1.5",children:[h?R:null,s("span",{className:"text-[var(--color-text-secondary)]",children:p?.label||a.name})]}),a.value&&s("span",{className:"font-mono font-medium tabular-nums text-[var(--color-text-primary)]",children:a.value.toLocaleString()})]})]},a.dataKey||y)})})]})});I.displayName="ChartTooltipContent";var O=S,K=l.forwardRef(({className:t,hideIcon:e=!1,payload:r,verticalAlign:o="bottom",nameKey:n},d)=>{let{config:f}=P();return r?.length?s("div",{ref:d,className:c("flex items-center justify-center gap-4",o==="top"?"pb-3":"pt-3",t),children:r.map(i=>{let C=`${n||i.dataKey||"value"}`,v=b(f,i,C),g=k(i.color);return u("div",{className:c("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),children:[!e&&s("div",{className:"h-2 w-2 shrink-0 rounded-[2px]",style:{backgroundColor:g}}),s("span",{className:"text-sm text-[var(--color-text-primary)]",children:v?.label||i.value})]},i.value)})}):null});K.displayName="ChartLegendContent";function b(t,e,r){if(typeof e!="object"||e===null)return;let o="payload"in e&&typeof e.payload=="object"&&e.payload!==null?e.payload:void 0,n=r;return r in e&&typeof e[r]=="string"?n=e[r]:o&&r in o&&typeof o[r]=="string"&&(n=o[r]),n in t?t[n]:t[r]}function k(t){return t?(t.startsWith("var(--"),t):"var(--color-primary)"}export*from"recharts";export{j as ChartContainer,O as ChartLegend,K as ChartLegendContent,H as ChartStyle,F as ChartTooltip,I as ChartTooltipContent};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chart.tsx","../src/lib/utils.ts","../src/index.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ResponsiveContainer, Legend, Tooltip } from 'recharts';\nimport { cn } from '../lib/utils';\n\n// Format: { THEME_NAME: { cssVariable: string; value: string } }\nconst THEMES = {\n    light: {\n        '--color-chart-1': '12 76% 61%',\n        '--color-chart-2': '173 58% 39%',\n        '--color-chart-3': '197 37% 24%',\n        '--color-chart-4': '43 74% 66%',\n        '--color-chart-5': '27 87% 67%',\n    },\n    dark: {\n        '--color-chart-1': '220 70% 50%',\n        '--color-chart-2': '160 60% 45%',\n        '--color-chart-3': '30 80% 55%',\n        '--color-chart-4': '280 65% 60%',\n        '--color-chart-5': '340 75% 55%',\n    },\n} as const;\n\nexport type ChartConfig = {\n    [k in string]: {\n        label?: React.ReactNode;\n        icon?: React.ComponentType;\n        color?: string;\n        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\nconst ChartContainer = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        config: ChartConfig;\n        children: React.ComponentProps<typeof ResponsiveContainer>['children'];\n    }\n>(({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n    return (\n        <ChartContext.Provider value={{ config }}>\n            <div\n                data-chart={chartId}\n                ref={ref}\n                className={cn(\n                    \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-[var(--color-text-secondary)] [&_.recharts-cartesian-grid_line]:stroke-[var(--color-border)]\",\n                    className\n                )}\n                {...props}\n            >\n                <ChartStyle id={chartId} config={config} />\n                <ResponsiveContainer>\n                    {children}\n                </ResponsiveContainer>\n            </div>\n        </ChartContext.Provider>\n    );\n});\nChartContainer.displayName = 'ChartContainer';\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n    const colorConfig = Object.entries(config).filter(\n        ([_, value]) => value.theme || value.color\n    );\n\n    if (!colorConfig.length) {\n        return null;\n    }\n\n    return (\n        <style dangerouslySetInnerHTML={{\n            __html: `\n        [data-chart=${id}] {\n          ${colorConfig\n                    .map(([key, item]) => {\n                        const color = item.theme || item.color;\n                        return color ? `--color-${key}: ${color};` : null;\n                    })\n                    .join('\\n')}\n        }\n      `\n        }} />\n    );\n};\n\n// -- Tooltip --\n\nconst ChartTooltip = Tooltip;\n\nconst ChartTooltipContent = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        hideLabel?: boolean;\n        hideIndicator?: boolean;\n        indicator?: 'line' | 'dot' | 'dashed';\n        nameKey?: string;\n        labelKey?: string;\n        active?: boolean;\n        payload?: any[];\n        label?: any;\n        labelFormatter?: (label: any, payload: any[]) => React.ReactNode;\n        config?: ChartConfig;\n    }\n>(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, config, nameKey, labelKey }, ref) => {\n    const { config: configFromContext } = useChart();\n    const chartConfig = config || configFromContext;\n\n    const tooltipLabel = React.useMemo(() => {\n        if (hideLabel || !payload || !payload.length) {\n            return null\n        }\n\n        const [item] = payload\n        const key = `${labelKey || item.dataKey || item.name || 'value'}`\n        const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)\n        const value =\n            !labelKey && typeof label === \"string\"\n                ? chartConfig[label as keyof typeof chartConfig]?.label || label\n                : itemConfig?.label\n\n        if (labelFormatter) {\n            return (\n                <div className={cn(\"font-medium\")}>\n                    {labelFormatter(value, payload)}\n                </div>\n            )\n        }\n\n        if (!value) {\n            return null\n        }\n\n        return <div className={cn(\"font-medium\")}>{value}</div>\n    }, [\n        label,\n        labelFormatter,\n        payload,\n        hideLabel,\n        labelKey,\n        chartConfig,\n    ])\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            ref={ref}\n            className={cn(\n                'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out animate-in fade-in-0 zoom-in-95',\n                className\n            )}\n        >\n            {!nestLabel ? tooltipLabel : null}\n            <div className=\"grid gap-1.5\">\n                {payload.map((item, index) => {\n                    const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n                    const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)\n                    const indicatorColor = colorToCssVariable(\n                        item.payload.fill || item.color\n                    )\n\n                    return (\n                        <div\n                            key={item.dataKey || 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                            {indicator && !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                            <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-[var(--color-text-secondary)]\">\n                                        {itemConfig?.label || item.name}\n                                    </span>\n                                </div>\n                                {item.value && (\n                                    <span className=\"font-mono font-medium tabular-nums text-[var(--color-text-primary)]\">\n                                        {item.value.toLocaleString()}\n                                    </span>\n                                )}\n                            </div>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    );\n});\nChartTooltipContent.displayName = 'ChartTooltipContent';\n\n// -- Legend --\n\nconst ChartLegend = Legend;\n\nconst ChartLegendContent = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentProps<'div'> & {\n        hideIcon?: boolean;\n        nameKey?: string;\n        verticalAlign?: 'top' | 'bottom' | 'middle';\n        payload?: any[];\n    }\n>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n    const { config } = useChart();\n\n    if (!payload?.length) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                'flex items-center justify-center gap-4',\n                verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n                className\n            )}\n        >\n            {payload.map((item) => {\n                const key = `${nameKey || item.dataKey || \"value\"}`\n                const itemConfig = getPayloadConfigFromPayload(config, item, key)\n                const indicatorColor = colorToCssVariable(item.color)\n\n                return (\n                    <div\n                        key={item.value}\n                        className={cn(\n                            \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n                        )}\n                    >\n                        {!hideIcon && (\n                            <div\n                                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                                style={{ backgroundColor: indicatorColor }}\n                            />\n                        )}\n                        <span className=\"text-sm text-[var(--color-text-primary)]\">\n                            {itemConfig?.label || item.value}\n                        </span>\n                    </div>\n                )\n            })}\n        </div>\n    );\n});\nChartLegendContent.displayName = 'ChartLegendContent';\n\n// Helper to extract config\nfunction getPayloadConfigFromPayload(\n    config: ChartConfig,\n    payload: unknown,\n    key: string\n) {\n    if (typeof payload !== \"object\" || payload === null) {\n        return undefined\n    }\n\n    const payloadPayload =\n        \"payload\" in payload &&\n            typeof payload.payload === \"object\" &&\n            payload.payload !== null\n            ? payload.payload\n            : undefined\n\n    let configLabelKey: string = key\n\n    if (\n        key in payload &&\n        typeof payload[key as keyof typeof payload] === \"string\"\n    ) {\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[\n            key as keyof typeof payloadPayload\n        ] as string\n    }\n\n    return configLabelKey in config\n        ? config[configLabelKey]\n        : config[key as keyof typeof config]\n}\n\nfunction colorToCssVariable(color: string | undefined): string {\n    if (!color) return 'var(--color-primary)';\n    // If it's a theme variable like `var(--color-...)` return it\n    if (color.startsWith('var(--')) return color;\n    // If we wanted to map theme keys to vars, we could do it here\n    return color;\n}\n\nexport {\n    ChartContainer,\n    ChartTooltip,\n    ChartTooltipContent,\n    ChartLegend,\n    ChartLegendContent,\n    ChartStyle,\n};\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","export * from './components/chart';\nexport * from 'recharts';\n\n// Override specific recharts exports if we wrapped them, \n// otherwise we just export the primitives and let usage include regular recharts components.\n"],"mappings":"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","names":["React","ResponsiveContainer","Legend","Tooltip","clsx","twMerge","cn","inputs","jsx","jsxs","ChartContext","useChart","context","ChartContainer","id","className","children","config","props","ref","uniqueId","chartId","jsx","jsxs","cn","ChartStyle","ResponsiveContainer","colorConfig","_","value","key","item","color","ChartTooltip","Tooltip","ChartTooltipContent","active","payload","indicator","hideLabel","hideIndicator","label","labelFormatter","nameKey","labelKey","configFromContext","chartConfig","tooltipLabel","itemConfig","getPayloadConfigFromPayload","nestLabel","index","indicatorColor","colorToCssVariable","ChartLegend","Legend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"]}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@thesage/charts",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Chart components for Sage UI",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "recharts": "^2.12.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@thesage/config": "0.0.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint src/"
+  }
+}

package/src/components/chart.tsx

@@ -0,0 +1,352 @@
+'use client';
+
+import * as React from 'react';
+import { ResponsiveContainer, Legend, Tooltip } from 'recharts';
+import { cn } from '../lib/utils';
+
+// Format: { THEME_NAME: { cssVariable: string; value: string } }
+const THEMES = {
+    light: {
+        '--color-chart-1': '12 76% 61%',
+        '--color-chart-2': '173 58% 39%',
+        '--color-chart-3': '197 37% 24%',
+        '--color-chart-4': '43 74% 66%',
+        '--color-chart-5': '27 87% 67%',
+    },
+    dark: {
+        '--color-chart-1': '220 70% 50%',
+        '--color-chart-2': '160 60% 45%',
+        '--color-chart-3': '30 80% 55%',
+        '--color-chart-4': '280 65% 60%',
+        '--color-chart-5': '340 75% 55%',
+    },
+} as const;
+
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+        color?: string;
+        theme?: Record<keyof typeof THEMES, string>;
+    }
+};
+
+type ChartContextProps = {
+    config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(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<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        config: ChartConfig;
+        children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+    }
+>(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+    return (
+        <ChartContext.Provider value={{ config }}>
+            <div
+                data-chart={chartId}
+                ref={ref}
+                className={cn(
+                    "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-[var(--color-text-secondary)] [&_.recharts-cartesian-grid_line]:stroke-[var(--color-border)]",
+                    className
+                )}
+                {...props}
+            >
+                <ChartStyle id={chartId} config={config} />
+                <ResponsiveContainer>
+                    {children}
+                </ResponsiveContainer>
+            </div>
+        </ChartContext.Provider>
+    );
+});
+ChartContainer.displayName = 'ChartContainer';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+    const colorConfig = Object.entries(config).filter(
+        ([_, value]) => value.theme || value.color
+    );
+
+    if (!colorConfig.length) {
+        return null;
+    }
+
+    return (
+        <style dangerouslySetInnerHTML={{
+            __html: `
+        [data-chart=${id}] {
+          ${colorConfig
+                    .map(([key, item]) => {
+                        const color = item.theme || item.color;
+                        return color ? `--color-${key}: ${color};` : null;
+                    })
+                    .join('\n')}
+        }
+      `
+        }} />
+    );
+};
+
+// -- Tooltip --
+
+const ChartTooltip = Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        hideLabel?: boolean;
+        hideIndicator?: boolean;
+        indicator?: 'line' | 'dot' | 'dashed';
+        nameKey?: string;
+        labelKey?: string;
+        active?: boolean;
+        payload?: any[];
+        label?: any;
+        labelFormatter?: (label: any, payload: any[]) => React.ReactNode;
+        config?: ChartConfig;
+    }
+>(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, config, nameKey, labelKey }, ref) => {
+    const { config: configFromContext } = useChart();
+    const chartConfig = config || configFromContext;
+
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload || !payload.length) {
+            return null
+        }
+
+        const [item] = payload
+        const key = `${labelKey || item.dataKey || item.name || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)
+        const value =
+            !labelKey && typeof label === "string"
+                ? chartConfig[label as keyof typeof chartConfig]?.label || label
+                : itemConfig?.label
+
+        if (labelFormatter) {
+            return (
+                <div className={cn("font-medium")}>
+                    {labelFormatter(value, payload)}
+                </div>
+            )
+        }
+
+        if (!value) {
+            return null
+        }
+
+        return <div className={cn("font-medium")}>{value}</div>
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelKey,
+        chartConfig,
+    ])
+
+    if (!active || !payload?.length) {
+        return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out animate-in fade-in-0 zoom-in-95',
+                className
+            )}
+        >
+            {!nestLabel ? tooltipLabel : null}
+            <div className="grid gap-1.5">
+                {payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`
+                    const itemConfig = getPayloadConfigFromPayload(chartConfig, item, key)
+                    const indicatorColor = colorToCssVariable(
+                        item.payload.fill || item.color
+                    )
+
+                    return (
+                        <div
+                            key={item.dataKey || index}
+                            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"
+                            )}
+                        >
+                            {indicator && !hideIndicator && (
+                                <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,
+                                        } as React.CSSProperties
+                                    }
+                                />
+                            )}
+                            <div
+                                className={cn(
+                                    "flex flex-1 justify-between leading-none",
+                                    nestLabel ? "items-end" : "items-center"
+                                )}
+                            >
+                                <div className="grid gap-1.5">
+                                    {nestLabel ? tooltipLabel : null}
+                                    <span className="text-[var(--color-text-secondary)]">
+                                        {itemConfig?.label || item.name}
+                                    </span>
+                                </div>
+                                {item.value && (
+                                    <span className="font-mono font-medium tabular-nums text-[var(--color-text-primary)]">
+                                        {item.value.toLocaleString()}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    );
+});
+ChartTooltipContent.displayName = 'ChartTooltipContent';
+
+// -- Legend --
+
+const ChartLegend = Legend;
+
+const ChartLegendContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        hideIcon?: boolean;
+        nameKey?: string;
+        verticalAlign?: 'top' | 'bottom' | 'middle';
+        payload?: any[];
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+        return null;
+    }
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                'flex items-center justify-center gap-4',
+                verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+                className
+            )}
+        >
+            {payload.map((item) => {
+                const key = `${nameKey || item.dataKey || "value"}`
+                const itemConfig = getPayloadConfigFromPayload(config, item, key)
+                const indicatorColor = colorToCssVariable(item.color)
+
+                return (
+                    <div
+                        key={item.value}
+                        className={cn(
+                            "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                        )}
+                    >
+                        {!hideIcon && (
+                            <div
+                                className="h-2 w-2 shrink-0 rounded-[2px]"
+                                style={{ backgroundColor: indicatorColor }}
+                            />
+                        )}
+                        <span className="text-sm text-[var(--color-text-primary)]">
+                            {itemConfig?.label || item.value}
+                        </span>
+                    </div>
+                )
+            })}
+        </div>
+    );
+});
+ChartLegendContent.displayName = 'ChartLegendContent';
+
+// Helper to extract config
+function getPayloadConfigFromPayload(
+    config: ChartConfig,
+    payload: unknown,
+    key: string
+) {
+    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: string = key
+
+    if (
+        key in payload &&
+        typeof payload[key as keyof typeof payload] === "string"
+    ) {
+        configLabelKey = payload[key as keyof typeof payload] as string
+    } else if (
+        payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    ) {
+        configLabelKey = payloadPayload[
+            key as keyof typeof payloadPayload
+        ] as string
+    }
+
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key as keyof typeof config]
+}
+
+function colorToCssVariable(color: string | undefined): string {
+    if (!color) return 'var(--color-primary)';
+    // If it's a theme variable like `var(--color-...)` return it
+    if (color.startsWith('var(--')) return color;
+    // If we wanted to map theme keys to vars, we could do it here
+    return color;
+}
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+    ChartStyle,
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components/chart';
+export * from 'recharts';
+
+// Override specific recharts exports if we wrapped them, 
+// otherwise we just export the primitives and let usage include regular recharts components.

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    entry: ['src/index.ts'],
+    format: ['cjs', 'esm'],
+    dts: true,
+    clean: true,
+    minify: true,
+    sourcemap: true,
+    external: ['react', 'recharts'],
+});