@audere/ui 0.3.0

package/dist/ai/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AIActionCardProps = {
+    title: string;
+    description: string;
+    badge?: ReactNode;
+    children?: ReactNode;
+};
+declare function AIActionCard({ title, description, badge, children, }: AIActionCardProps): react_jsx_runtime.JSX.Element;
+
+type AIInsightPanelProps = {
+    title: string;
+    children: ReactNode;
+    headerAccessory?: ReactNode;
+};
+declare function AIInsightPanel({ title, children, headerAccessory, }: AIInsightPanelProps): react_jsx_runtime.JSX.Element;
+
+type ChatMessage = {
+    id: string | number;
+    role: "assistant" | "user";
+    content: ReactNode;
+};
+type AIChatPanelProps = {
+    title: string;
+    messages: ChatMessage[];
+    footer?: ReactNode;
+    className?: string;
+};
+declare function AIChatPanel({ title, messages, footer, className }: AIChatPanelProps): react_jsx_runtime.JSX.Element;
+
+export { AIActionCard, type AIActionCardProps, AIChatPanel, type AIChatPanelProps, AIInsightPanel, type AIInsightPanelProps, type ChatMessage };

package/dist/ai/index.js

@@ -0,0 +1,98 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/surface/Surface.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var surfaceVariants = cva(
+  "rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-4",
+        md: "p-6"
+      }
+    },
+    defaultVariants: {
+      padding: "none"
+    }
+  }
+);
+function Surface({ className, padding, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ padding }), className),
+      ...props
+    }
+  );
+}
+function AIActionCard({
+  title,
+  description,
+  badge,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { padding: "md", className: "overflow-hidden border-primary/20", children: [
+    badge ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2 text-sm font-semibold text-primary", children: badge }) : null,
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-medium text-foreground", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-6 max-w-3xl text-muted-foreground", children: description }),
+    children ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children }) : null
+  ] });
+}
+function AIInsightPanel({
+  title,
+  children,
+  headerAccessory
+}) {
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      padding: "md",
+      className: "relative overflow-hidden bg-gradient-to-br from-primary/5 via-card to-card",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+          headerAccessory
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "leading-relaxed text-foreground", children })
+      ]
+    }
+  );
+}
+function AIChatPanel({ title, messages, footer, className }) {
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      padding: "none",
+      className: cn("flex flex-col", className ?? "h-[400px]"),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-t-[inherit] border-b border-border bg-muted/40 p-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: messages.map((message) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: message.role === "assistant" ? "flex max-w-[85%] gap-3" : "ml-auto flex max-w-[85%] justify-end gap-3",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: message.role === "assistant" ? "rounded-2xl rounded-tl-sm border border-border bg-muted p-3 text-sm text-foreground" : "rounded-2xl rounded-tr-sm bg-primary p-3 text-sm text-primary-foreground",
+                children: message.content
+              }
+            )
+          },
+          message.id
+        )) }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border p-4", children: footer }) : null
+      ]
+    }
+  );
+}
+
+export { AIActionCard, AIChatPanel, AIInsightPanel };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ai/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/surface/Surface.tsx","../../src/ai/AIActionCard.tsx","../../src/ai/AIInsightPanel.tsx","../../src/ai/AIChatPanel.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../lib/utils\";\n\nconst surfaceVariants = cva(\n  \"rounded-xl border border-border bg-card text-card-foreground shadow-sm\",\n  {\n    variants: {\n      padding: {\n        none: \"p-0\",\n        sm: \"p-4\",\n        md: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      padding: \"none\",\n    },\n  },\n);\n\nexport type SurfaceProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof surfaceVariants>;\n\n/**\n * Default elevated panel for tables, metrics, charts, and grouped content.\n * Uses theme CSS variables (`--card`, `--border`); host apps must define :root tokens.\n */\nexport function Surface({ className, padding, ...props }: SurfaceProps) {\n  return (\n    <div\n      data-slot=\"surface\"\n      className={cn(surfaceVariants({ padding }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { surfaceVariants };\n","import type { ReactNode } from \"react\";\n\nimport { Surface } from \"../surface/Surface\";\n\nexport type AIActionCardProps = {\n  title: string;\n  description: string;\n  badge?: ReactNode;\n  children?: ReactNode;\n};\n\nexport function AIActionCard({\n  title,\n  description,\n  badge,\n  children,\n}: AIActionCardProps) {\n  return (\n    <Surface padding=\"md\" className=\"overflow-hidden border-primary/20\">\n      {badge ? (\n        <div className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-primary\">\n          {badge}\n        </div>\n      ) : null}\n      <h3 className=\"mb-2 text-xl font-medium text-foreground\">{title}</h3>\n      <p className=\"mb-6 max-w-3xl text-muted-foreground\">{description}</p>\n      {children ? <div className=\"space-y-4\">{children}</div> : null}\n    </Surface>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nimport { Surface } from \"../surface/Surface\";\n\nexport type AIInsightPanelProps = {\n  title: string;\n  children: ReactNode;\n  headerAccessory?: ReactNode;\n};\n\nexport function AIInsightPanel({\n  title,\n  children,\n  headerAccessory,\n}: AIInsightPanelProps) {\n  return (\n    <Surface\n      padding=\"md\"\n      className=\"relative overflow-hidden bg-gradient-to-br from-primary/5 via-card to-card\"\n    >\n      <div className=\"mb-4 flex items-center justify-between gap-4\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n        {headerAccessory}\n      </div>\n      <div className=\"leading-relaxed text-foreground\">{children}</div>\n    </Surface>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nimport { Surface } from \"../surface/Surface\";\nimport { cn } from \"../lib/utils\";\n\nexport type ChatMessage = {\n  id: string | number;\n  role: \"assistant\" | \"user\";\n  content: ReactNode;\n};\n\nexport type AIChatPanelProps = {\n  title: string;\n  messages: ChatMessage[];\n  footer?: ReactNode;\n  className?: string;\n};\n\nexport function AIChatPanel({ title, messages, footer, className }: AIChatPanelProps) {\n  return (\n    <Surface\n      padding=\"none\"\n      className={cn(\"flex flex-col\", className ?? \"h-[400px]\")}\n    >\n      <div className=\"flex items-center justify-between rounded-t-[inherit] border-b border-border bg-muted/40 p-4\">\n        <div className=\"text-sm font-medium text-foreground\">{title}</div>\n      </div>\n      <div className=\"flex-1 space-y-4 overflow-y-auto p-4\">\n        {messages.map((message) => (\n          <div\n            key={message.id}\n            className={\n              message.role === \"assistant\"\n                ? \"flex max-w-[85%] gap-3\"\n                : \"ml-auto flex max-w-[85%] justify-end gap-3\"\n            }\n          >\n            <div\n              className={\n                message.role === \"assistant\"\n                  ? \"rounded-2xl rounded-tl-sm border border-border bg-muted p-3 text-sm text-foreground\"\n                  : \"rounded-2xl rounded-tr-sm bg-primary p-3 text-sm text-primary-foreground\"\n              }\n            >\n              {message.content}\n            </div>\n          </div>\n        ))}\n      </div>\n      {footer ? <div className=\"border-t border-border p-4\">{footer}</div> : null}\n    </Surface>\n  );\n}\n"]}

package/dist/charts/index.d.ts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ChartContainerProps = {
+    title?: string;
+    className?: string;
+    height?: number;
+    children: ReactNode;
+};
+/** Wrapper for shared chart cards: consistent surface, height, optional title. */
+declare function ChartContainer({ title, className, height, children, }: ChartContainerProps): react_jsx_runtime.JSX.Element;
+
+type PieChartDataItem = {
+    name: string;
+    value: number;
+};
+type SharedPieChartProps = {
+    data: PieChartDataItem[];
+    title?: string;
+    height?: number;
+    showLegend?: boolean;
+    /** Name of the value field for tooltip (e.g. "Clients", "Revenue") */
+    valueLabel?: string;
+};
+declare function SharedPieChart({ data, title, height, showLegend, valueLabel, }: SharedPieChartProps): react_jsx_runtime.JSX.Element;
+
+type BarChartDataItem = Record<string, string | number>;
+type SharedBarChartProps = {
+    data: BarChartDataItem[];
+    /** Key in each item for the category axis (e.g. "name", "month") */
+    dataKey: string;
+    /** Key(s) for the bar value(s). Single = one bar series, multiple = grouped/stacked */
+    valueKeys?: string[];
+    title?: string;
+    height?: number;
+    /** Optional reference line value (e.g. monthly target) */
+    referenceLine?: {
+        value: number;
+        label?: string;
+    };
+    /** Bar fill colour (default Audere teal) */
+    fill?: string;
+};
+declare function SharedBarChart({ data, dataKey, valueKeys, title, height, referenceLine, fill, }: SharedBarChartProps): react_jsx_runtime.JSX.Element;
+
+type AreaChartDataItem = Record<string, string | number>;
+type SharedAreaChartProps = {
+    data: AreaChartDataItem[];
+    dataKey: string;
+    valueKey: string;
+    title?: string;
+    height?: number;
+    /** Optional second series key for stacked/dual area (e.g. inflow vs outflow) */
+    secondaryValueKey?: string;
+    fill?: string;
+};
+declare function SharedAreaChart({ data, dataKey, valueKey, title, height, secondaryValueKey, fill, }: SharedAreaChartProps): react_jsx_runtime.JSX.Element;
+
+type CashflowChartDataItem = {
+    /** Period label (e.g. "Jan", "Q1") */
+    period: string;
+    /** Inflow amount */
+    inflow: number;
+    /** Outflow amount */
+    outflow: number;
+    /** Optional net (inflow - outflow); computed if not provided */
+    net?: number;
+};
+type CashflowChartProps = {
+    data: CashflowChartDataItem[];
+    title?: string;
+    height?: number;
+    /** Currency or unit for tooltip (e.g. "£", "$") */
+    currency?: string;
+};
+declare function CashflowChart({ data, title, height, currency, }: CashflowChartProps): react_jsx_runtime.JSX.Element;
+
+export { type AreaChartDataItem, type BarChartDataItem, CashflowChart, type CashflowChartDataItem, type CashflowChartProps, ChartContainer, type ChartContainerProps, type PieChartDataItem, SharedAreaChart, type SharedAreaChartProps, SharedBarChart, type SharedBarChartProps, SharedPieChart, type SharedPieChartProps };

package/dist/charts/index.js

@@ -0,0 +1,388 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend, BarChart, CartesianGrid, XAxis, YAxis, ReferenceLine, Bar, AreaChart, Area } from 'recharts';
+
+// src/surface/Surface.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var surfaceVariants = cva(
+  "rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-4",
+        md: "p-6"
+      }
+    },
+    defaultVariants: {
+      padding: "none"
+    }
+  }
+);
+function Surface({ className, padding, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ padding }), className),
+      ...props
+    }
+  );
+}
+function ChartContainer({
+  title,
+  className = "",
+  height = 280,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Surface, { className: cn("flex flex-col overflow-hidden", className), children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "px-6 pb-2 pt-4", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 pb-4", style: { minHeight: height }, children })
+  ] });
+}
+var AUDERE_CHART_COLORS = [
+  "#0f172a",
+  // navy900
+  "#14b8a6",
+  // teal500
+  "#64748b",
+  // slate-500
+  "#0d9488",
+  // teal-600
+  "#94a3b8",
+  // slate-400
+  "#2dd4bf"
+  // teal-400
+];
+function SharedPieChart({
+  data,
+  title,
+  height = 280,
+  showLegend = true,
+  valueLabel = "Value"
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        cx: "50%",
+        cy: "50%",
+        innerRadius: 60,
+        outerRadius: 90,
+        paddingAngle: 2,
+        dataKey: "value",
+        nameKey: "name",
+        label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`,
+        labelLine: false,
+        children: data.map((_, index) => /* @__PURE__ */ jsx(
+          Cell,
+          {
+            fill: AUDERE_CHART_COLORS[index % AUDERE_CHART_COLORS.length],
+            stroke: "white",
+            strokeWidth: 2
+          },
+          `cell-${index}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        formatter: (value) => [value, valueLabel],
+        contentStyle: {
+          borderRadius: "8px",
+          border: "1px solid var(--border)",
+          backgroundColor: "var(--card)",
+          color: "var(--card-foreground)",
+          boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+          fontSize: "12px"
+        },
+        labelStyle: { color: "var(--foreground)", fontWeight: 600 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(
+      Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value, entry) => /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          value,
+          entry?.payload?.payload?.value != null && ` (${entry.payload.payload.value})`
+        ] })
+      }
+    )
+  ] }) }) });
+}
+var DEFAULT_FILL = "#14b8a6";
+function SharedBarChart({
+  data,
+  dataKey,
+  valueKeys = ["value"],
+  title,
+  height = 260,
+  referenceLine,
+  fill = DEFAULT_FILL
+}) {
+  const colors = ["#14b8a6", "#0f172a", "#64748b", "#0d9488"];
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      data,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey,
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid var(--border)",
+              backgroundColor: "var(--card)",
+              color: "var(--card-foreground)",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            },
+            cursor: { fill: "var(--muted)" }
+          }
+        ),
+        referenceLine != null && /* @__PURE__ */ jsx(
+          ReferenceLine,
+          {
+            y: referenceLine.value,
+            stroke: "#dc2626",
+            strokeDasharray: "4 4",
+            label: {
+              value: referenceLine.label ?? "Target",
+              position: "right",
+              fontSize: 11,
+              fill: "#64748b"
+            }
+          }
+        ),
+        valueKeys.map((key, idx) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: key,
+            fill: colors[idx % colors.length],
+            radius: [4, 4, 0, 0],
+            name: key.replace(/([A-Z])/g, " $1").trim()
+          },
+          key
+        ))
+      ]
+    }
+  ) }) });
+}
+var DEFAULT_FILL2 = "#0f172a";
+var SECONDARY_FILL = "#14b8a6";
+function SharedAreaChart({
+  data,
+  dataKey,
+  valueKey,
+  title,
+  height = 260,
+  secondaryValueKey,
+  fill = DEFAULT_FILL2
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: "areaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: fill, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: fill, stopOpacity: 0 })
+          ] }),
+          secondaryValueKey && /* @__PURE__ */ jsxs("linearGradient", { id: "areaFillSecondary", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: SECONDARY_FILL, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: SECONDARY_FILL, stopOpacity: 0 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey,
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid var(--border)",
+              backgroundColor: "var(--card)",
+              color: "var(--card-foreground)",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            }
+          }
+        ),
+        secondaryValueKey && /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: secondaryValueKey,
+            stroke: SECONDARY_FILL,
+            strokeWidth: 2,
+            fill: "url(#areaFillSecondary)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: valueKey,
+            stroke: fill,
+            strokeWidth: 2,
+            fill: "url(#areaFill)"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+function formatValue(value, currency = "") {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "\u2212" : "";
+  if (abs >= 1e6) return `${sign}${currency}${(abs / 1e6).toFixed(1)}M`;
+  if (abs >= 1e3) return `${sign}${currency}${(abs / 1e3).toFixed(1)}k`;
+  return `${sign}${currency}${abs.toLocaleString()}`;
+}
+function CashflowChart({
+  data,
+  title,
+  height = 260,
+  currency = "\xA3"
+}) {
+  const series = data.map((d) => ({
+    ...d,
+    net: d.net ?? d.inflow - d.outflow
+  }));
+  return /* @__PURE__ */ jsx(ChartContainer, { title, height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data: series,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "cashflowNet", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#14b8a6", stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#14b8a6", stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: "period",
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dy: 8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            axisLine: false,
+            tickLine: false,
+            tick: { fontSize: 12, fill: "#64748b" },
+            dx: -8,
+            tickFormatter: (v) => formatValue(v, currency)
+          }
+        ),
+        /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: "#94a3b8", strokeDasharray: "2 2" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              borderRadius: "8px",
+              border: "1px solid #e2e8f0",
+              boxShadow: "0 1px 3px 0 rgb(15 23 42 / 0.08)",
+              fontSize: "12px"
+            },
+            formatter: (value, name) => [
+              formatValue(Number(value), currency),
+              name === "inflow" ? "Inflow" : name === "outflow" ? "Outflow" : "Net"
+            ],
+            labelFormatter: (label) => `Period: ${label}`,
+            content: ({ active, payload, label }) => {
+              if (!active || !payload?.length || !label) return null;
+              const row = series.find((d) => d.period === label);
+              return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2 text-card-foreground shadow-sm", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-xs font-semibold", children: label }),
+                row && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-0.5 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "Inflow: ",
+                    formatValue(row.inflow, currency)
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "Outflow: ",
+                    formatValue(row.outflow, currency)
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+                    "Net: ",
+                    formatValue(row.net ?? row.inflow - row.outflow, currency)
+                  ] })
+                ] })
+              ] });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "net",
+            stroke: "#14b8a6",
+            strokeWidth: 2,
+            fill: "url(#cashflowNet)",
+            name: "net"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+export { CashflowChart, ChartContainer, SharedAreaChart, SharedBarChart, SharedPieChart };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map