@thesage/charts 0.1.0 → 0.1.2

package/.turbo/turbo-build.log

@@ -1,23 +1,22 @@
-
-
-> @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
+
+> @thesage/charts@0.1.2 build /home/runner/work/ecosystem/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: /home/runner/work/ecosystem/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.02 KB
+ESM ⚡️ Build success in 60ms
+CJS dist/index.js     4.97 KB
+CJS dist/index.js.map 17.17 KB
+CJS ⚡️ Build success in 64ms
+DTS Build start
+DTS ⚡️ Build success in 6218ms
+DTS dist/index.d.ts  2.31 KB
+DTS dist/index.d.mts 2.31 KB

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @thesage/charts
+
+## 0.1.2 - 2026-01-28
+
+### Patch Changes
+
+- 90e78f4: docs: add standard README.md with installation and usage instructions
+
+## 0.1.1 - 2026-01-28
+
+### Patch Changes
+
+- 76a383b: Syncing npm registry with latest changes from GitHub (auto-generated catch-up).

package/README.md

@@ -0,0 +1,87 @@
+# Sage Charts (@thesage/charts)
+
+<div align="center">
+
+[![npm version](https://img.shields.io/npm/v/@thesage/charts?color=indigo&style=flat-square)](https://www.npmjs.com/package/@thesage/charts)
+[![License](https://img.shields.io/npm/l/@thesage/charts?color=blue&style=flat-square)](https://github.com/shalomormsby/ecosystem/blob/main/LICENSE)
+
+**Beautiful, responsive charts for Sage UI.**
+
+[Documentation](https://thesage.dev) • [GitHub](https://github.com/shalomormsby/ecosystem)
+
+</div>
+
+---
+
+**Sage Charts** is a high-level wrapper around **Recharts**, configured to integrate seamlessly with the Sage UI design tokens. It provides a standardized `ChartContainer` API that handles theming (colors, fonts, tooltips) automatically, making data visualization beautiful by default.
+
+## ✨ Features
+
+- **🎨 Theme Aware**: Automatically picks up Sage UI colors (charts 1-5).
+- **🌗 Mode Ready**: Adapts seamlessly to light and dark modes.
+- **🛠️ Configurable**: Simple configuration object for labels and icons.
+- **🧩 Recharts Power**: Full access to the underlying Recharts primitives.
+
+## 🚀 Installation
+
+Install the package and its peer dependencies.
+
+```bash
+pnpm add @thesage/charts recharts
+```
+
+### ⚠️ React 19 Compatibility Note
+If you are using **React 19**, you may need to add an override for `react-is` to ensure compatibility with Recharts versions prior to explicit React 19 support.
+
+In your `package.json`:
+```json
+"pnpm": {
+  "overrides": {
+    "react-is": "^19.0.0-rc"
+  }
+}
+```
+
+## 💻 Usage
+
+Sage Charts uses a `ChartContainer` to wrap standard Recharts components.
+
+```tsx
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@thesage/charts"
+
+// Define your config (labels and colors)
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "hsl(var(--chart-1))",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(var(--chart-2))",
+  },
+}
+
+export function MyChart() {
+  const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+  ]
+
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="month" />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
+```
+
+## 📄 License
+
+MIT © [Shalom Ormsby](https://github.com/shalomormsby)

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { Tooltip, Legend } from 'recharts';
 export * from 'recharts';
 
 declare const THEMES: {
@@ -29,7 +29,7 @@ type ChartConfig = {
 };
 declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
-    children: React.ComponentProps<typeof ResponsiveContainer>["children"];
+    children: React.ReactElement;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { Tooltip, Legend } from 'recharts';
 export * from 'recharts';
 
 declare const THEMES: {
@@ -29,7 +29,7 @@ type ChartConfig = {
 };
 declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
-    children: React.ComponentProps<typeof ResponsiveContainer>["children"];
+    children: React.ReactElement;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;

package/dist/index.js

@@ -3,5 +3,5 @@
           ${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")});
+      `}}):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,P=l.useMemo(()=>{if(n||!e||!e.length)return null;let[s]=e,N=`${g||s.dataKey||s.name||"value"}`,w=k(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:P,(0,a.jsx)("div",{className:"grid gap-1.5",children:e.map((s,N)=>{let w=`${R||s.name||s.dataKey||"value"}`,p=k(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?P: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=k(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 k(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

@@ -1 +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"]}
+{"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.ReactElement;\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

@@ -1,7 +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:`
+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 k(){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};
+      `}}):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}=k(),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=P(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}=k();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=P(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 P(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

@@ -1 +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"]}
+{"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.ReactElement;\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

@@ -1,6 +1,6 @@
 {
   "name": "@thesage/charts",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "publishConfig": {
     "access": "public"
   },
@@ -20,10 +20,10 @@
     "recharts": "^2.12.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
+    "@types/react": "^18.3.3",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@thesage/config": "0.0.1"
+    "@thesage/config": "0.0.3"
   },
   "dependencies": {
     "clsx": "^2.1.1",

package/src/components/chart.tsx

@@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<'div'> & {
         config: ChartConfig;
-        children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+        children: React.ReactElement;
     }
 >(({ id, className, children, config, ...props }, ref) => {
     const uniqueId = React.useId();

package/.turbo/turbo-lint.log

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