@handled-ai/design-system 0.8.0 → 0.9.0

package/README.md

@@ -16,8 +16,8 @@ A shared design system built on [shadcn/ui](https://ui.shadcn.com). Components a
 
 - **Primary distribution:** npm package `@handled-ai/design-system`, built with `npm run build:lib` (tsup)
 - **Secondary distribution:** shadcn registry at `/r/{name}.json`, deployed on Vercel for showcase/discovery
-- **Component source:** `registry/new-york/ui/` — customized shadcn primitives and custom UX blocks
-- **Package entry point:** root `index.ts`
+- **Component source:** `src/components/`, `src/charts/`, `src/three/`, `src/prototype/` — customized shadcn primitives and custom UX blocks
+- **Package entry point:** `src/index.ts` (light components), subpath exports for `./charts`, `./three`, `./prototype`
 - **Theming:** Semantic CSS variable tokens — consuming projects define their own palette (see [Styling Reference](docs/STYLING.md))
 - **Build tool:** `shadcn build` generates distributable registry JSON from source
 
@@ -57,7 +57,17 @@ pnpm add @handled-ai/design-system
 ```
 
 ```tsx
+// Light components (no heavy deps)
 import { Button, Card, Input } from "@handled-ai/design-system"
+
+// Charts (requires recharts / @nivo)
+import { DonutChart } from "@handled-ai/design-system/charts"
+
+// Three.js components (requires three / @react-three)
+import { AgentOrb } from "@handled-ai/design-system/three"
+
+// Prototype template system
+import { PrototypeShell, type PrototypeConfig } from "@handled-ai/design-system/prototype"
 ```
 
 ### Install via shadcn registry (alternative)
@@ -105,8 +115,8 @@ If port 3000 is taken, Next.js will auto-pick the next available port.
 
 See the [Publishing Guide](docs/PUBLISHING.md) for the full workflow. Quick summary:
 
-1. Make component changes in `registry/new-york/ui/`.
-2. Export new components from `index.ts`.
+1. Make component changes in `src/components/` (or `src/charts/`, `src/three/`, `src/prototype/`).
+2. Export new components from the appropriate barrel (`src/index.ts` for light components, subpath barrels for heavy-dep groups).
 3. Update `docs/components/{name}.md` and `docs/COMPONENTS.md`.
 4. Bump the version in `package.json` (semver: patch / minor / major).
 5. Run `npm publish` (build runs automatically via `prepublishOnly`).

package/dist/charts/bar-chart-component.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface BarSeries {
+    dataKey: string;
+    color: string;
+    name?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    barSize?: number;
+}
+interface BarChartComponentProps {
+    data: Record<string, unknown>[];
+    bars: BarSeries[];
+    height?: number;
+    xAxisKey?: string;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    barGap?: number;
+    className?: string;
+}
+declare function BarChartComponent({ data, bars, height, xAxisKey, showGrid, showLegend, barGap, className, }: BarChartComponentProps): React.JSX.Element;
+
+export { BarChartComponent, type BarChartComponentProps, type BarSeries };

package/dist/charts/bar-chart-component.js

@@ -0,0 +1,123 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer
+} from "recharts";
+import { cn } from "../lib/utils.js";
+function CustomBarTooltip({ active, payload, label }) {
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2 shadow-md", children: [
+    label ? /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-2 w-2 shrink-0 rounded-full",
+          style: { backgroundColor: entry.fill || entry.color }
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "font-medium text-muted-foreground", children: [
+        entry.name,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: entry.value })
+    ] }, i)) })
+  ] });
+}
+function CustomLegend({ bars }) {
+  return /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-4", children: bars.map((bar) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+    bar.icon ? /* @__PURE__ */ jsx(bar.icon, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-2.5 w-2.5 shrink-0 rounded-sm",
+        style: { backgroundColor: bar.color }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: bar.name || bar.dataKey })
+  ] }, bar.dataKey)) });
+}
+function BarChartComponent({
+  data,
+  bars,
+  height = 280,
+  xAxisKey = "date",
+  showGrid = true,
+  showLegend = true,
+  barGap = 2,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: "100%",
+        debounce: 1,
+        minWidth: 1,
+        minHeight: 1,
+        children: /* @__PURE__ */ jsxs(
+          BarChart,
+          {
+            data,
+            margin: { top: 10, right: 10, left: -20, bottom: 0 },
+            barGap,
+            children: [
+              showGrid ? /* @__PURE__ */ jsx(
+                CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  vertical: false,
+                  stroke: "#f1f5f9"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xAxisKey,
+                  axisLine: false,
+                  tickLine: false,
+                  tick: { fill: "#64748B", fontSize: 12 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  axisLine: false,
+                  tickLine: false,
+                  tick: { fill: "#64748B", fontSize: 12 }
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomBarTooltip, {}), cursor: false }),
+              bars.map((bar) => {
+                var _a;
+                return /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    dataKey: bar.dataKey,
+                    fill: bar.color,
+                    name: bar.name || bar.dataKey,
+                    barSize: (_a = bar.barSize) != null ? _a : 12
+                  },
+                  bar.dataKey
+                );
+              })
+            ]
+          }
+        )
+      }
+    ) }),
+    showLegend ? /* @__PURE__ */ jsx(CustomLegend, { bars }) : null
+  ] });
+}
+export {
+  BarChartComponent
+};
+//# sourceMappingURL=bar-chart-component.js.map

package/dist/charts/bar-chart-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/bar-chart-component.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface BarSeries {\n  dataKey: string\n  color: string\n  name?: string\n  icon?: React.ComponentType<{ className?: string }>\n  barSize?: number\n}\n\nexport interface BarChartComponentProps {\n  data: Record<string, unknown>[]\n  bars: BarSeries[]\n  height?: number\n  xAxisKey?: string\n  showGrid?: boolean\n  showLegend?: boolean\n  barGap?: number\n  className?: string\n}\n\ninterface TooltipPayloadEntry {\n  fill?: string\n  color?: string\n  name?: string\n  dataKey?: string\n  value?: number | string\n}\n\nfunction CustomBarTooltip({ active, payload, label }: { active?: boolean; payload?: TooltipPayloadEntry[]; label?: string }) {\n  if (!active || !payload?.length) return null\n\n  return (\n    <div className=\"rounded-lg border border-border bg-card px-3 py-2 shadow-md\">\n      {label ? (\n        <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">{label}</p>\n      ) : null}\n      <div className=\"space-y-1\">\n        {payload.map((entry: TooltipPayloadEntry, i: number) => (\n          <div key={i} className=\"flex items-center gap-2 text-xs\">\n            <div\n              className=\"h-2 w-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: entry.fill || entry.color }}\n            />\n            <span className=\"font-medium text-muted-foreground\">\n              {entry.name}:\n            </span>\n            <span className=\"font-semibold text-foreground\">{entry.value}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction CustomLegend({ bars }: { bars: BarSeries[] }) {\n  return (\n    <div className=\"mt-3 flex flex-wrap items-center justify-center gap-4\">\n      {bars.map((bar) => (\n        <div key={bar.dataKey} className=\"flex items-center gap-1.5 text-xs\">\n          {bar.icon ? (\n            <bar.icon className=\"h-3.5 w-3.5 text-muted-foreground\" />\n          ) : (\n            <div\n              className=\"h-2.5 w-2.5 shrink-0 rounded-sm\"\n              style={{ backgroundColor: bar.color }}\n            />\n          )}\n          <span className=\"font-medium text-muted-foreground\">\n            {bar.name || bar.dataKey}\n          </span>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function BarChartComponent({\n  data,\n  bars,\n  height = 280,\n  xAxisKey = \"date\",\n  showGrid = true,\n  showLegend = true,\n  barGap = 2,\n  className,\n}: BarChartComponentProps) {\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <div style={{ height }}>\n        <ResponsiveContainer\n          width=\"100%\"\n          height=\"100%\"\n          debounce={1}\n          minWidth={1}\n          minHeight={1}\n        >\n          <BarChart\n            data={data}\n            margin={{ top: 10, right: 10, left: -20, bottom: 0 }}\n            barGap={barGap}\n          >\n            {showGrid ? (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                vertical={false}\n                stroke=\"#f1f5f9\"\n              />\n            ) : null}\n            <XAxis\n              dataKey={xAxisKey}\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"#64748B\", fontSize: 12 }}\n            />\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: \"#64748B\", fontSize: 12 }}\n            />\n            <Tooltip content={<CustomBarTooltip />} cursor={false} />\n            {bars.map((bar) => (\n              <Bar\n                key={bar.dataKey}\n                dataKey={bar.dataKey}\n                fill={bar.color}\n                name={bar.name || bar.dataKey}\n                barSize={bar.barSize ?? 12}\n              />\n            ))}\n          </BarChart>\n        </ResponsiveContainer>\n      </div>\n      {showLegend ? <CustomLegend bars={bars} /> : null}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/charts/chart-tooltip.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface ChartTooltipEntry {
+    name?: string;
+    value?: number | string;
+    dataKey?: string;
+    color?: string;
+    stroke?: string;
+    fill?: string;
+}
+interface SimpleChartTooltipProps {
+    active?: boolean;
+    payload?: ChartTooltipEntry[];
+    label?: string;
+    formatter?: (value: number | string, name: string) => [string, string];
+    className?: string;
+}
+declare function SimpleChartTooltip({ active, payload, label, formatter, className, }: SimpleChartTooltipProps): React.JSX.Element | null;
+declare const CHART_TOOLTIP_STYLE: React.CSSProperties;
+declare const CHART_CURSOR_STYLE: {
+    stroke: string;
+    strokeWidth: number;
+    strokeDasharray: string;
+};
+
+export { CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, type ChartTooltipEntry, SimpleChartTooltip, type SimpleChartTooltipProps };

package/dist/charts/chart-tooltip.js

@@ -0,0 +1,69 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function SimpleChartTooltip({
+  active,
+  payload,
+  label,
+  formatter,
+  className
+}) {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-card px-3 py-2 shadow-md",
+        className
+      ),
+      style: { fontSize: "12px" },
+      children: [
+        label ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: label }) : null,
+        payload.map((entry, index) => {
+          var _a;
+          const value = (_a = entry.value) != null ? _a : "";
+          const name = entry.name || entry.dataKey || "";
+          const color = entry.color || entry.stroke || entry.fill;
+          const [displayValue, displayName] = formatter ? formatter(value, name) : [String(value), name];
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            color ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-2 w-2 shrink-0 rounded-full",
+                style: { backgroundColor: color }
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+              displayName,
+              ": ",
+              displayValue
+            ] })
+          ] }, index);
+        })
+      ]
+    }
+  );
+}
+const CHART_TOOLTIP_STYLE = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  fontSize: "12px",
+  padding: "8px",
+  border: "1px solid #e2e8f0",
+  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+};
+const CHART_CURSOR_STYLE = {
+  stroke: "#94a3b8",
+  strokeWidth: 1,
+  strokeDasharray: "4 4"
+};
+export {
+  CHART_CURSOR_STYLE,
+  CHART_TOOLTIP_STYLE,
+  SimpleChartTooltip
+};
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/charts/chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/chart-tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface ChartTooltipEntry {\n  name?: string\n  value?: number | string\n  dataKey?: string\n  color?: string\n  stroke?: string\n  fill?: string\n}\n\nexport interface SimpleChartTooltipProps {\n  active?: boolean\n  payload?: ChartTooltipEntry[]\n  label?: string\n  formatter?: (value: number | string, name: string) => [string, string]\n  className?: string\n}\n\nexport function SimpleChartTooltip({\n  active,\n  payload,\n  label,\n  formatter,\n  className,\n}: SimpleChartTooltipProps) {\n  if (!active || !payload || !payload.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card px-3 py-2 shadow-md\",\n        className,\n      )}\n      style={{ fontSize: \"12px\" }}\n    >\n      {label ? (\n        <p className=\"mb-1 text-xs font-medium text-muted-foreground\">{label}</p>\n      ) : null}\n      {payload.map((entry, index) => {\n        const value = entry.value ?? \"\"\n        const name = entry.name || entry.dataKey || \"\"\n        const color = entry.color || entry.stroke || entry.fill\n\n        const [displayValue, displayName] = formatter\n          ? formatter(value as number | string, name)\n          : [String(value), name]\n\n        return (\n          <div key={index} className=\"flex items-center gap-2\">\n            {color ? (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n            ) : null}\n            <span className=\"text-xs font-medium text-foreground\">\n              {displayName}: {displayValue}\n            </span>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport const CHART_TOOLTIP_STYLE: React.CSSProperties = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"8px\",\n  fontSize: \"12px\",\n  padding: \"8px\",\n  border: \"1px solid #e2e8f0\",\n  boxShadow: \"0 4px 6px -1px rgba(0, 0, 0, 0.1)\",\n}\n\nexport const CHART_CURSOR_STYLE = {\n  stroke: \"#94a3b8\",\n  strokeWidth: 1,\n  strokeDasharray: \"4 4\",\n}\n"],"mappings":";AA2CQ,cAmBI,YAnBJ;AAvCR,SAAS,UAAU;AAmBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,MAAI,CAAC,UAAU,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC1C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,UAAU,OAAO;AAAA,MAEzB;AAAA,gBACC,oBAAC,OAAE,WAAU,kDAAkD,iBAAM,IACnE;AAAA,QACH,QAAQ,IAAI,CAAC,OAAO,UAAU;AA7CrC;AA8CQ,gBAAM,SAAQ,WAAM,UAAN,YAAe;AAC7B,gBAAM,OAAO,MAAM,QAAQ,MAAM,WAAW;AAC5C,gBAAM,QAAQ,MAAM,SAAS,MAAM,UAAU,MAAM;AAEnD,gBAAM,CAAC,cAAc,WAAW,IAAI,YAChC,UAAU,OAA0B,IAAI,IACxC,CAAC,OAAO,KAAK,GAAG,IAAI;AAExB,iBACE,qBAAC,SAAgB,WAAU,2BACxB;AAAA,oBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,MAAM;AAAA;AAAA,YAClC,IACE;AAAA,YACJ,qBAAC,UAAK,WAAU,uCACb;AAAA;AAAA,cAAY;AAAA,cAAG;AAAA,eAClB;AAAA,eATQ,KAUV;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEO,MAAM,sBAA2C;AAAA,EACtD,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,MAAM,qBAAqB;AAAA,EAChC,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,iBAAiB;AACnB;","names":[]}

package/dist/charts/chart.d.ts

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

package/dist/charts/chart.js

@@ -0,0 +1,285 @@
+"use client";
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../lib/utils.js";
+const THEMES = { light: "", dark: ".dark" };
+const ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer(_a) {
+  var _b = _a, {
+    id,
+    className,
+    children,
+    config
+  } = _b, props = __objRest(_b, [
+    "id",
+    "className",
+    "children",
+    "config"
+  ]);
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    })
+  ) });
+}
+const ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            var _a;
+            const color = ((_a = itemConfig.theme) == null ? void 0 : _a[theme]) || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    var _a;
+    if (hideLabel || !(payload == null ? void 0 : payload.length)) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || (item == null ? void 0 : item.dataKey) || (item == null ? void 0 : item.name) || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+          var _a, _b;
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || ((_a = item.payload) == null ? void 0 : _a.fill) || item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, (_b = item.payload) != null ? _b : {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "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
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            item.dataKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig == null ? void 0 : itemConfig.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map