@franco_roura/module-01 0.0.0-stage → 1.0.0

package/dist/components/budget-meter.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Budget progress: a sunken track filled to the share spent (signal while within budget,
+ * danger once over), with a thin "today" tick at the share of the period that has passed.
+ * Pair it with the figures in text; the fill color is never the only cue.
+ */
+export declare function BudgetMeter({ spent, budget, elapsed, label, size, className }: {
+  /** Minor units spent so far. */
+  spent: bigint;
+  /** Budgeted minor units (> 0). */
+  budget: bigint;
+  /** Share of the period that has passed, 0–1; omit to hide the today tick. */
+  elapsed?: number;
+  /** Accessible name, e.g. "Food budget". */
+  label: string;
+  size?: "sm" | "md";
+  className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=budget-meter.d.ts.map

package/dist/components/budget-meter.js

@@ -0,0 +1,38 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/budget-meter.tsx
+/**
+* Budget progress: a sunken track filled to the share spent (signal while within budget,
+* danger once over), with a thin "today" tick at the share of the period that has passed.
+* Pair it with the figures in text; the fill color is never the only cue.
+*/
+function BudgetMeter({ spent, budget, elapsed, label, size = "md", className }) {
+	const share = budget > 0n ? Number(spent * 10000n / budget) / 1e4 : 0;
+	const over = spent > budget;
+	const fill = Math.min(Math.max(share, 0), 1);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(share * 100),
+		"aria-valuetext": `${Math.round(share * 100)}% spent`,
+		"data-over": over || void 0,
+		className: cn("relative", size === "md" ? "py-1.5" : "py-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("overflow-hidden rounded-full bg-shell-recess shadow-press", size === "md" ? "h-3" : "h-2"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full", over ? "bg-danger" : "bg-signal"),
+				style: { width: `${fill * 100}%` }
+			})
+		}), elapsed !== void 0 && elapsed > 0 && elapsed < 1 && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "absolute inset-y-0 w-px bg-ink",
+			style: { left: `${elapsed * 100}%` },
+			children: /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 left-1/2 size-1.5 -translate-x-1/2 rotate-45 bg-ink" })
+		})]
+	});
+}
+export { BudgetMeter };
+
+//# sourceMappingURL=budget-meter.js.map

package/dist/components/budget-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"budget-meter.js","names":[],"sources":["../../src/components/budget-meter.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\n/**\n * Budget progress: a sunken track filled to the share spent (signal while within budget,\n * danger once over), with a thin \"today\" tick at the share of the period that has passed.\n * Pair it with the figures in text; the fill color is never the only cue.\n */\nexport function BudgetMeter({\n  spent,\n  budget,\n  elapsed,\n  label,\n  size = \"md\",\n  className,\n}: {\n  /** Minor units spent so far. */\n  spent: bigint;\n  /** Budgeted minor units (> 0). */\n  budget: bigint;\n  /** Share of the period that has passed, 0–1; omit to hide the today tick. */\n  elapsed?: number;\n  /** Accessible name, e.g. \"Food budget\". */\n  label: string;\n  size?: \"sm\" | \"md\";\n  className?: string;\n}) {\n  const share = budget > 0n ? Number((spent * 10000n) / budget) / 10000 : 0;\n  const over = spent > budget;\n  const fill = Math.min(Math.max(share, 0), 1);\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(share * 100)}\n      aria-valuetext={`${Math.round(share * 100)}% spent`}\n      data-over={over || undefined}\n      className={cn(\"relative\", size === \"md\" ? \"py-1.5\" : \"py-1\", className)}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-full bg-shell-recess shadow-press\",\n          size === \"md\" ? \"h-3\" : \"h-2\",\n        )}\n      >\n        <div\n          className={cn(\"h-full rounded-full\", over ? \"bg-danger\" : \"bg-signal\")}\n          style={{ width: `${fill * 100}%` }}\n        />\n      </div>\n      {elapsed !== undefined && elapsed > 0 && elapsed < 1 && (\n        <div\n          aria-hidden\n          className=\"absolute inset-y-0 w-px bg-ink\"\n          style={{ left: `${elapsed * 100}%` }}\n        >\n          <span className=\"absolute -top-0.5 left-1/2 size-1.5 -translate-x-1/2 rotate-45 bg-ink\" />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,YAAY,EAC1B,OACA,QACA,SACA,OACA,OAAO,MACP,aAYC;CACD,MAAM,QAAQ,SAAS,KAAK,OAAQ,QAAQ,SAAU,MAAM,IAAI,MAAQ;CACxE,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;CAC3C,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe,KAAK,MAAM,QAAQ,GAAG;EACrC,kBAAgB,GAAG,KAAK,MAAM,QAAQ,GAAG,EAAE;EAC3C,aAAW,QAAQ,KAAA;EACnB,WAAW,GAAG,YAAY,SAAS,OAAO,WAAW,QAAQ,SAAS;EARxE,UAAA,CAUE,oBAAC,OAAD;GACE,WAAW,GACT,6DACA,SAAS,OAAO,QAAQ,KAC1B;GAEA,UAAA,oBAAC,OAAD;IACE,WAAW,GAAG,uBAAuB,OAAO,cAAc,WAAW;IACrE,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,GAAG;GAClC,CAAA;EACE,CAAA,GACJ,YAAY,KAAA,KAAa,UAAU,KAAK,UAAU,KACjD,oBAAC,OAAD;GACE,eAAA;GACA,WAAU;GACV,OAAO,EAAE,MAAM,GAAG,UAAU,IAAI,GAAG;GAEnC,UAAA,oBAAC,QAAD,EAAM,WAAU,wEAAyE,CAAA;EACtF,CAAA,CAEJ;;AAET"}

package/dist/components/button.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+  variant?: "bracket" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, arrow, children, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+  /** Appends a mono → after the label. Ignored with `asChild`; put the arrow in the child. */
+  arrow?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/utils.js";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/button.tsx
+const buttonVariants = cva("inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 rounded-full font-sans text-label whitespace-nowrap transition-[background-color,box-shadow,transform] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-signal text-ink shadow-mold hover:bg-[color-mix(in_srgb,var(--color-signal)_88%,white)] active:shadow-press active:translate-y-px",
+			destructive: "bg-danger text-shell shadow-mold hover:bg-[color-mix(in_srgb,var(--color-danger)_90%,black)] active:shadow-press active:translate-y-px",
+			outline: "border border-seam bg-shell text-ink shadow-mold hover:bg-shell-recess active:shadow-press",
+			secondary: "bg-shell text-ink shadow-mold hover:bg-shell-recess active:shadow-press active:translate-y-px",
+			ghost: "text-ink hover:bg-shell-recess active:shadow-press",
+			link: "rounded-none px-0 text-signal-ink underline-offset-4 hover:underline",
+			bracket: "h-auto min-h-control-height gap-1 px-2 text-ink before:font-mono before:text-signal-ink before:content-['['] after:font-mono after:text-signal-ink after:content-[']'] hover:text-signal-ink"
+		},
+		size: {
+			default: "h-control-height px-5 has-[>svg]:px-4",
+			xs: "h-7 gap-1 px-3 text-body-sm [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-9 gap-1.5 px-4 has-[>svg]:px-3",
+			lg: "h-12 px-7 has-[>svg]:px-5",
+			icon: "size-control-height",
+			"icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-9",
+			"icon-lg": "size-12"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button({ className, variant = "default", size = "default", asChild = false, arrow = false, children, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props,
+		children: asChild || !arrow ? children : /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "font-mono",
+			children: "→"
+		})] })
+	});
+}
+export { Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\n// Module/01: everything you press is a molded stadium. Signal orange carries ink text, never white.\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 rounded-full font-sans text-label whitespace-nowrap transition-[background-color,box-shadow,transform] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-signal text-ink shadow-mold hover:bg-[color-mix(in_srgb,var(--color-signal)_88%,white)] active:shadow-press active:translate-y-px\",\n        destructive:\n          \"bg-danger text-shell shadow-mold hover:bg-[color-mix(in_srgb,var(--color-danger)_90%,black)] active:shadow-press active:translate-y-px\",\n        outline:\n          \"border border-seam bg-shell text-ink shadow-mold hover:bg-shell-recess active:shadow-press\",\n        secondary:\n          \"bg-shell text-ink shadow-mold hover:bg-shell-recess active:shadow-press active:translate-y-px\",\n        ghost: \"text-ink hover:bg-shell-recess active:shadow-press\",\n        link: \"rounded-none px-0 text-signal-ink underline-offset-4 hover:underline\",\n        // [ Label ] in mono brackets: footer and card links on a site.\n        bracket:\n          \"h-auto min-h-control-height gap-1 px-2 text-ink before:font-mono before:text-signal-ink before:content-['['] after:font-mono after:text-signal-ink after:content-[']'] hover:text-signal-ink\",\n      },\n      size: {\n        default: \"h-control-height px-5 has-[>svg]:px-4\",\n        xs: \"h-7 gap-1 px-3 text-body-sm [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1.5 px-4 has-[>svg]:px-3\",\n        lg: \"h-12 px-7 has-[>svg]:px-5\",\n        icon: \"size-control-height\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  arrow = false,\n  children,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** Appends a mono → after the label. Ignored with `asChild`; put the arrow in the child. */\n    arrow?: boolean;\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {asChild || !arrow ? (\n        children\n      ) : (\n        <>\n          {children}\n          <span aria-hidden className=\"font-mono\">\n            →\n          </span>\n        </>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;AAMA,MAAM,iBAAiB,IACrB,ybACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GAEN,SACE;EACJ;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,UAAU,OACV,QAAQ,OACR,UACA,GAAG,SAMA;CACH,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;EAEH,UAAA,WAAW,CAAC,QACX,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GAAY,UAAA;EAElC,CAAA,CACN,EAAA,CAAA;CAEA,CAAA;AAEV"}

package/dist/components/calendar.d.ts

@@ -0,0 +1,7 @@
+import { DayPickerProps } from "react-day-picker";
+/**
+ * Module/01 month calendar: HUD caption, mono weekday microprint, stadium days. The selected
+ * day is a signal part with ink text; today carries a signal-ink ring.
+ */
+export declare function Calendar({ className, classNames, showOutsideDays, weekStartsOn, ...props }: DayPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+// src/components/calendar.tsx
+function CalendarChevron({ orientation, className }) {
+	return /* @__PURE__ */ jsx(orientation === "left" ? ChevronLeft : ChevronRight, {
+		className: cn("size-4", className),
+		strokeWidth: 1.25
+	});
+}
+const navButton = "inline-flex size-9 cursor-pointer items-center justify-center rounded-full bg-shell text-ink shadow-mold outline-none hover:bg-shell-recess focus-visible:ring-[3px] focus-visible:ring-ring/60 active:shadow-press disabled:pointer-events-none disabled:opacity-40";
+/**
+* Module/01 month calendar: HUD caption, mono weekday microprint, stadium days. The selected
+* day is a signal part with ink text; today carries a signal-ink ring.
+*/
+function Calendar({ className, classNames, showOutsideDays = true, weekStartsOn = 1, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		weekStartsOn,
+		className: cn("select-none", className),
+		classNames: {
+			root: "relative",
+			months: "relative flex flex-col",
+			month: "flex flex-col gap-2",
+			month_caption: "flex h-9 items-center pl-1",
+			caption_label: "hud text-ink",
+			nav: "absolute top-0 right-0 z-10 flex items-center gap-1.5",
+			button_previous: navButton,
+			button_next: navButton,
+			month_grid: "border-collapse",
+			weekdays: "",
+			weekday: "hud-sm h-8 w-10 text-center font-normal text-ink-soft",
+			weeks: "",
+			week: "",
+			day: "p-0.5 text-center",
+			day_button: "tabular mx-auto flex size-9 cursor-pointer items-center justify-center rounded-full text-body-sm text-ink outline-none transition-[background-color,box-shadow] hover:bg-shell-recess focus-visible:ring-[3px] focus-visible:ring-ring/60",
+			selected: "[&>button]:bg-signal [&>button]:font-bold [&>button]:text-ink [&>button]:shadow-mold [&>button]:hover:bg-signal",
+			today: "[&>button]:font-bold [&>button]:text-signal-ink [&>button]:ring-1 [&>button]:ring-signal-ink",
+			outside: "[&>button]:text-hud-mark",
+			disabled: "[&>button]:pointer-events-none [&>button]:opacity-40",
+			hidden: "invisible",
+			...classNames
+		},
+		components: { Chevron: CalendarChevron },
+		...props
+	});
+}
+export { Calendar };
+
+//# sourceMappingURL=calendar.js.map

package/dist/components/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../src/components/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { type ChevronProps, DayPicker, type DayPickerProps } from \"react-day-picker\";\n\nfunction CalendarChevron({ orientation, className }: ChevronProps) {\n  const Icon = orientation === \"left\" ? ChevronLeft : ChevronRight;\n  return <Icon className={cn(\"size-4\", className)} strokeWidth={1.25} />;\n}\n\nconst navButton =\n  \"inline-flex size-9 cursor-pointer items-center justify-center rounded-full bg-shell text-ink shadow-mold outline-none hover:bg-shell-recess focus-visible:ring-[3px] focus-visible:ring-ring/60 active:shadow-press disabled:pointer-events-none disabled:opacity-40\";\n\n/**\n * Module/01 month calendar: HUD caption, mono weekday microprint, stadium days. The selected\n * day is a signal part with ink text; today carries a signal-ink ring.\n */\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  weekStartsOn = 1,\n  ...props\n}: DayPickerProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      weekStartsOn={weekStartsOn}\n      className={cn(\"select-none\", className)}\n      classNames={{\n        root: \"relative\",\n        months: \"relative flex flex-col\",\n        month: \"flex flex-col gap-2\",\n        month_caption: \"flex h-9 items-center pl-1\",\n        caption_label: \"hud text-ink\",\n        nav: \"absolute top-0 right-0 z-10 flex items-center gap-1.5\",\n        button_previous: navButton,\n        button_next: navButton,\n        month_grid: \"border-collapse\",\n        weekdays: \"\",\n        weekday: \"hud-sm h-8 w-10 text-center font-normal text-ink-soft\",\n        weeks: \"\",\n        week: \"\",\n        day: \"p-0.5 text-center\",\n        day_button:\n          \"tabular mx-auto flex size-9 cursor-pointer items-center justify-center rounded-full text-body-sm text-ink outline-none transition-[background-color,box-shadow] hover:bg-shell-recess focus-visible:ring-[3px] focus-visible:ring-ring/60\",\n        selected:\n          \"[&>button]:bg-signal [&>button]:font-bold [&>button]:text-ink [&>button]:shadow-mold [&>button]:hover:bg-signal\",\n        today:\n          \"[&>button]:font-bold [&>button]:text-signal-ink [&>button]:ring-1 [&>button]:ring-signal-ink\",\n        outside: \"[&>button]:text-hud-mark\",\n        disabled: \"[&>button]:pointer-events-none [&>button]:opacity-40\",\n        hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{ Chevron: CalendarChevron }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAS,gBAAgB,EAAE,aAAa,aAA2B;CAEjE,OAAO,oBADM,gBAAgB,SAAS,cAAc,cAC7C;EAAM,WAAW,GAAG,UAAU,SAAS;EAAG,aAAa;CAAO,CAAA;AACvE;AAEA,MAAM,YACJ;;;;;AAMF,SAAgB,SAAS,EACvB,WACA,YACA,kBAAkB,MAClB,eAAe,GACf,GAAG,SACc;CACjB,OACE,oBAAC,WAAD;EACmB;EACH;EACd,WAAW,GAAG,eAAe,SAAS;EACtC,YAAY;GACV,MAAM;GACN,QAAQ;GACR,OAAO;GACP,eAAe;GACf,eAAe;GACf,KAAK;GACL,iBAAiB;GACjB,aAAa;GACb,YAAY;GACZ,UAAU;GACV,SAAS;GACT,OAAO;GACP,MAAM;GACN,KAAK;GACL,YACE;GACF,UACE;GACF,OACE;GACF,SAAS;GACT,UAAU;GACV,QAAQ;GACR,GAAG;EACL;EACA,YAAY,EAAE,SAAS,gBAAgB;EACvC,GAAI;CACL,CAAA;AAEL"}

package/dist/components/category-icon.d.ts

@@ -0,0 +1,33 @@
+declare const sizes: {
+  sm: {
+    box: string;
+    icon: string;
+  };
+  md: {
+    box: string;
+    icon: string;
+  };
+  lg: {
+    box: string;
+    icon: string;
+  };
+};
+/**
+ * A category's Lucide glyph in ink on a palette-colored disc. For transfers pass
+ * icon="arrow-left-right" and color="cat-slate".
+ */
+export declare function CategoryIcon({ icon, color, size, label, className }: {
+  icon: string;
+  color: string;
+  size?: keyof typeof sizes;
+  /** Accessible name; omit when the category name is shown next to it. */
+  label?: string;
+  className?: string;
+}): import("react").JSX.Element;
+/** Small colored dot for labels and legends. */
+export declare function ColorDot({ color, className }: {
+  color: string;
+  className?: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=category-icon.d.ts.map

package/dist/components/category-icon.js

@@ -0,0 +1,49 @@
+import { categoryColorVar, categoryIcon } from "../lib/category-icons.js";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/category-icon.tsx
+const sizes = {
+	sm: {
+		box: "size-7",
+		icon: "size-3.5"
+	},
+	md: {
+		box: "size-9",
+		icon: "size-4.5"
+	},
+	lg: {
+		box: "size-12",
+		icon: "size-6"
+	}
+};
+/**
+* A category's Lucide glyph in ink on a palette-colored disc. For transfers pass
+* icon="arrow-left-right" and color="cat-slate".
+*/
+function CategoryIcon({ icon, color, size = "md", label, className }) {
+	const Icon = categoryIcon(icon);
+	const s = sizes[size];
+	return /* @__PURE__ */ jsx("span", {
+		...label ? {
+			role: "img",
+			"aria-label": label
+		} : { "aria-hidden": true },
+		className: cn("inline-flex shrink-0 items-center justify-center rounded-full text-ink shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-2px_0_rgba(28,30,33,0.08)]", s.box, className),
+		style: { background: categoryColorVar(color) },
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: s.icon,
+			strokeWidth: 1.25
+		})
+	});
+}
+/** Small colored dot for labels and legends. */
+function ColorDot({ color, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("inline-block size-2.5 shrink-0 rounded-full", className),
+		style: { background: categoryColorVar(color) }
+	});
+}
+export { CategoryIcon, ColorDot };
+
+//# sourceMappingURL=category-icon.js.map

package/dist/components/category-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-icon.js","names":[],"sources":["../../src/components/category-icon.tsx"],"sourcesContent":["import { categoryColorVar, categoryIcon } from \"../lib/category-icons\";\nimport { cn } from \"../lib/utils\";\n\nconst sizes = {\n  sm: { box: \"size-7\", icon: \"size-3.5\" },\n  md: { box: \"size-9\", icon: \"size-4.5\" },\n  lg: { box: \"size-12\", icon: \"size-6\" },\n};\n\n/**\n * A category's Lucide glyph in ink on a palette-colored disc. For transfers pass\n * icon=\"arrow-left-right\" and color=\"cat-slate\".\n */\nexport function CategoryIcon({\n  icon,\n  color,\n  size = \"md\",\n  label,\n  className,\n}: {\n  icon: string;\n  color: string;\n  size?: keyof typeof sizes;\n  /** Accessible name; omit when the category name is shown next to it. */\n  label?: string;\n  className?: string;\n}) {\n  const Icon = categoryIcon(icon);\n  const s = sizes[size];\n  // Named image when labelled; otherwise decorative (the category name sits next to it).\n  const a11y = label\n    ? { role: \"img\" as const, \"aria-label\": label }\n    : { \"aria-hidden\": true as const };\n  return (\n    <span\n      {...a11y}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-full text-ink shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-2px_0_rgba(28,30,33,0.08)]\",\n        s.box,\n        className,\n      )}\n      style={{ background: categoryColorVar(color) }}\n    >\n      <Icon className={s.icon} strokeWidth={1.25} />\n    </span>\n  );\n}\n\n/** Small colored dot for labels and legends. */\nexport function ColorDot({ color, className }: { color: string; className?: string }) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"inline-block size-2.5 shrink-0 rounded-full\", className)}\n      style={{ background: categoryColorVar(color) }}\n    />\n  );\n}\n"],"mappings":";;;;AAGA,MAAM,QAAQ;CACZ,IAAI;EAAE,KAAK;EAAU,MAAM;CAAW;CACtC,IAAI;EAAE,KAAK;EAAU,MAAM;CAAW;CACtC,IAAI;EAAE,KAAK;EAAW,MAAM;CAAS;AACvC;;;;;AAMA,SAAgB,aAAa,EAC3B,MACA,OACA,OAAO,MACP,OACA,aAQC;CACD,MAAM,OAAO,aAAa,IAAI;CAC9B,MAAM,IAAI,MAAM;CAKhB,OACE,oBAAC,QAAD;EACE,GALS,QACT;GAAE,MAAM;GAAgB,cAAc;EAAM,IAC5C,EAAE,eAAe,KAAc;EAI/B,WAAW,GACT,2JACA,EAAE,KACF,SACF;EACA,OAAO,EAAE,YAAY,iBAAiB,KAAK,EAAE;EAE7C,UAAA,oBAAC,MAAD;GAAM,WAAW,EAAE;GAAM,aAAa;EAAO,CAAA;CACzC,CAAA;AAEV;;AAGA,SAAgB,SAAS,EAAE,OAAO,aAAoD;CACpF,OACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAW,GAAG,+CAA+C,SAAS;EACtE,OAAO,EAAE,YAAY,iBAAiB,KAAK,EAAE;CAC9C,CAAA;AAEL"}

package/dist/components/chart.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { TooltipValueType } from "recharts";
+declare const THEMES: {
+  readonly light: "";
+};
+type TooltipNameType = number | string;
+export type ChartConfig = Record<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, initialDimension, ...props }: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+  id: string;
+  config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey }: React.ComponentProps<"div"> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart.js

@@ -0,0 +1,147 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+// src/components/chart.tsx
+const THEMES = { light: "" };
+const INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+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({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]: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, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+}
+const ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.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]) => {
+		const color = itemConfig.theme?.[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(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : 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?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-float", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [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?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!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.filter((item) => item.type !== "none").map((item, index) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, index);
+		})
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	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

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; 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\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\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-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\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      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-float\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={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                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !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                    )}\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-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\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[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n};\n"],"mappings":"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"}

package/dist/components/charts.d.ts

@@ -0,0 +1,52 @@
+type Money = {
+  currency: string;
+  minorUnits: number;
+};
+export type BalancePoint = {
+  label: string;
+  tooltipLabel: string;
+  balance: bigint;
+};
+/** One series over time: the balance line with a soft area and a crosshair tooltip. */
+export declare function BalanceChart({ points, money, className }: {
+  points: BalancePoint[];
+  money: Money;
+  className?: string;
+}): import("react").JSX.Element;
+export type FlowPoint = {
+  label: string;
+  tooltipLabel: string;
+  income: bigint;
+  expense: bigint;
+};
+/**
+ * Income above the baseline, expenses below it, per bucket. With `only`, a single series (no
+ * legend: the panel title names it).
+ */
+export declare function FlowChart({ points, money, only, className }: {
+  points: FlowPoint[];
+  money: Money;
+  only?: "income" | "expense";
+  className?: string;
+}): import("react").JSX.Element;
+export type DonutSlice = {
+  key: string;
+  label: string;
+  color: string;
+  amount: bigint;
+  /** Category icon for the slice's callout. Charts without icons get color dots. */
+  icon?: string;
+};
+/**
+ * Shares of a total, clockwise from 12 o'clock. Up to 7 slices plus "Other". Each slice of 2% or
+ * more gets a callout outside the ring (its icon and share), so it reads without the legend; the
+ * caller still shows the ranked list beside it.
+ */
+export declare function DonutChart({ slices, money, centerLabel, className }: {
+  slices: DonutSlice[];
+  money: Money;
+  centerLabel: string;
+  className?: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=charts.d.ts.map