@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/chart.js

@@ -1,494 +1,378 @@
-// src/components/ui/chart.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
+//#region src/chart.tsx
+/**
+* Markers use `--color-surface-brand` as a placeholder. Giddaa has no
+* categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each
+* series (its legend marker and tooltip dot) to its own colour once they exist.
+* Until then any series without an explicit colour paints brand-green.
+*/
+const SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
 function formatChartValue(value, type) {
-  if (Array.isArray(value)) {
-    return value.join(", ");
-  }
-  if (typeof value !== "number") {
-    return value == null ? "" : String(value);
-  }
-  switch (type) {
-    case "currency":
-      return `\u20A6${value.toLocaleString("en-NG")}`;
-    case "percentage":
-      return `${value.toLocaleString("en-NG", {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1
-      })}%`;
-    default:
-      return value.toLocaleString("en-NG");
-  }
+	if (Array.isArray(value)) return value.join(", ");
+	if (typeof value !== "number") return value == null ? "" : String(value);
+	switch (type) {
+		case "currency": return `₦${value.toLocaleString("en-NG")}`;
+		case "percentage": return `${value.toLocaleString("en-NG", {
+			minimumFractionDigits: 1,
+			maximumFractionDigits: 1
+		})}%`;
+		default: return value.toLocaleString("en-NG");
+	}
 }
-var THEMES = { light: "", dark: ".dark" };
-var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React.createContext(null);
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+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;
+	const context = React.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
 }
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartCard({
-  className,
-  size,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx2(
-    "section",
-    {
-      "data-slot": "chart-card",
-      className: cn(chartCardVariants({ size: resolvedSize }), className),
-      ...props,
-      children
-    }
-  ) });
+/**
+* Shared chart frame — the chrome that surrounds the plot of any chart type
+* (bar, line, area, pie). These are presentational, domain-free, and size-aware:
+* a `size` flows through `SizeProvider` so the plot and its labels can scale
+* with the card. Compose them with the plot primitives:
+*
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Revenue Overview</ChartTitle>
+*     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
+*   </ChartHeader>
+*   <ChartContainer config={config}>{/* recharts plot *\/}</ChartContainer>
+* </ChartCard>
+*/
+const chartCardVariants = cva("flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1", {
+	variants: { size: {
+		sm: "gap-3 p-4",
+		md: "gap-4 p-5",
+		lg: "gap-5 p-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ChartCard({ className, size, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx("section", {
+			"data-slot": "chart-card",
+			className: cn(chartCardVariants({ size: resolvedSize }), className),
+			...props,
+			children
+		})
+	});
 }
 function ChartHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "chart-header",
-      className: cn("flex min-w-0 flex-col gap-1", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-header",
+		className: cn("flex min-w-0 flex-col gap-1", className),
+		...props
+	});
 }
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
+const chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
+	variants: { size: {
+		sm: "text-gdt-md",
+		md: "text-gdt-lg",
+		lg: "text-gdt-h5"
+	} },
+	defaultVariants: { size: "md" }
 });
-function ChartTitle({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    "h3",
-    {
-      "data-slot": "chart-title",
-      className: cn(chartTitleVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
+function ChartTitle({ className, size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "chart-title",
+		className: cn(chartTitleVariants({ size: resolvedSize }), className),
+		...props
+	});
 }
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+const chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
+	variants: { size: {
+		sm: "text-gdt-xs",
+		md: "text-gdt-sm",
+		lg: "text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-function ChartDescription({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    "p",
-    {
-      "data-slot": "chart-description",
-      className: cn(
-        chartDescriptionVariants({ size: resolvedSize }),
-        className
-      ),
-      ...props
-    }
-  );
+function ChartDescription({ className, size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chart-description",
+		className: cn(chartDescriptionVariants({ size: resolvedSize }), className),
+		...props
+	});
 }
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx2(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__ */ jsx2(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx2(
-          RechartsPrimitive.ResponsiveContainer,
-          {
-            initialDimension,
-            children
-          }
-        )
-      ]
-    }
-  ) });
+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
+			})]
+		})
+	});
 }
-var ChartStyle = ({ id, config }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme ?? config2.color
-  );
-  if (!colorConfig.length) {
-    return null;
-  }
-  const styleContent = Object.entries(THEMES).map(
-    ([theme, prefix]) => `
+const ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { children: 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")}
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
 }
-`
-  ).join("\n");
-  return /* @__PURE__ */ jsx2("style", { children: styleContent });
+`).join("\n") });
 };
-var ChartTooltip = RechartsPrimitive.Tooltip;
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
+const ChartTooltip = RechartsPrimitive.Tooltip;
+/**
+* Hover tooltip for a chart data point. It surfaces a single precise value with
+* type-appropriate formatting — grouped integers, percentages, or ₦-prefixed
+* currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,
+* 1px border-subtle) so users can read exact figures without leaving the chart.
+*
+* Anatomy: series dot · metric label · hero value · period caption.
+*/
+const chartTooltipVariants = cva("flex flex-col bg-surface-overlay border border-line-subtle shadow-2", {
+	variants: { size: {
+		xs: "gap-0.5 rounded-md p-2",
+		sm: "gap-0.5 rounded-md p-2.5",
+		md: "gap-1 rounded-lg p-3",
+		lg: "gap-1 rounded-xl p-3.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const chartTooltipDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		xs: "size-1.5",
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-2.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
+	variants: { size: {
+		xs: "text-gdt-xs",
+		sm: "text-gdt-xs",
+		md: "text-gdt-sm",
+		lg: "text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+const chartTooltipValueVariants = cva("font-extrabold text-fg-primary tabular-nums", {
+	variants: { size: {
+		xs: "text-gdt-sm",
+		sm: "text-gdt-md",
+		md: "text-gdt-lg",
+		lg: "text-gdt-xl"
+	} },
+	defaultVariants: { size: "md" }
 });
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  formatter,
-  color,
-  nameKey,
-  valueType = "number",
-  size = "md"
-}) {
-  const { config } = useChart();
-  if (!active || !payload?.length) {
-    return null;
-  }
-  const [item] = payload.filter((entry) => entry.type !== "none");
-  if (!item) {
-    return null;
-  }
-  const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
-  const itemConfig = getPayloadConfigFromPayload(config, item, key);
-  const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
-  const metricLabel = itemConfig?.label ?? item.name;
-  const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
-  const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
-  return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
-    metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
-      !hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn(chartTooltipDotVariants({ size })),
-          style: { backgroundColor: dotColor }
-        }
-      )),
-      /* @__PURE__ */ jsx2("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
-    ] }),
-    /* @__PURE__ */ jsx2("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
-    periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx2("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
-  ] });
+function ChartTooltipContent({ active, payload, className, hideIndicator = false, label, labelFormatter, formatter, color, nameKey, valueType = "number", size = "md" }) {
+	const { config } = useChart();
+	if (!active || !payload?.length) return null;
+	const [item] = payload.filter((entry) => entry.type !== "none");
+	if (!item) return null;
+	const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
+	const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
+	const metricLabel = itemConfig?.label ?? item.name;
+	const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
+	const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(chartTooltipVariants({ size }), className),
+		children: [
+			metricLabel != null && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0",
+				children: [!hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(chartTooltipDotVariants({ size })),
+					style: { backgroundColor: dotColor }
+				})), /* @__PURE__ */ jsx("span", {
+					className: cn(chartTooltipLabelVariants({ size })),
+					children: metricLabel
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cn(chartTooltipValueVariants({ size })),
+				children: heroValue
+			}),
+			periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx("p", {
+				className: "text-gdt-xs text-fg-caption-placeholder",
+				children: periodCaption
+			})
+		]
+	});
 }
-var ChartLegend = RechartsPrimitive.Legend;
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
+const ChartLegend = RechartsPrimitive.Legend;
+const chartLegendItemVariants = cva("group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0", {
+	variants: {
+		size: {
+			sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
+			md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
+		},
+		interactive: {
+			true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
+			false: ""
+		},
+		inactive: {
+			true: "text-fg-caption-placeholder line-through",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		interactive: false,
+		inactive: false
+	}
 });
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-  marker = "dot",
-  size = "md",
-  orientation = "horizontal",
-  inactiveKeys,
-  onToggle
-}) {
-  const { config } = useChart();
-  if (!payload?.length) {
-    return null;
-  }
-  const inactiveSet = inactiveKeys ? new Set(inactiveKeys) : void 0;
-  const interactive = Boolean(onToggle);
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: cn(
-        "flex",
-        orientation === "vertical" ? "flex-col items-start gap-0.5" : "flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      ),
-      children: payload.filter((item) => item.type !== "none").map((item, index) => {
-        const key = `${nameKey ?? item.dataKey ?? "value"}`;
-        const itemKey = `${item.dataKey ?? item.value ?? index}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
-        const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
-        const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
-          itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                chartLegendMarkerSizeVariants({ marker, size })
-              ),
-              style: { backgroundColor: markerColor }
-            }
-          ),
-          itemConfig?.label ?? item.value
-        ] });
-        if (interactive) {
-          return /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              "aria-pressed": !inactive,
-              onClick: () => onToggle?.(key),
-              className: cn(
-                chartLegendItemVariants({ size, interactive, inactive })
-              ),
-              children: content
-            },
-            itemKey
-          );
-        }
-        return /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: cn(
-              chartLegendItemVariants({ size, interactive, inactive })
-            ),
-            children: content
-          },
-          itemKey
-        );
-      })
-    }
-  );
+const chartLegendMarkerSizeVariants = cva("shrink-0", {
+	variants: {
+		marker: {
+			dot: "rounded-full",
+			square: "rounded-[2px]",
+			line: "rounded-full"
+		},
+		size: {
+			sm: "",
+			md: ""
+		}
+	},
+	compoundVariants: [
+		{
+			marker: ["dot", "square"],
+			size: "sm",
+			className: "size-2"
+		},
+		{
+			marker: ["dot", "square"],
+			size: "md",
+			className: "size-2.5"
+		},
+		{
+			marker: "line",
+			size: "sm",
+			className: "h-[3px] w-3"
+		},
+		{
+			marker: "line",
+			size: "md",
+			className: "h-[3px] w-3.5"
+		}
+	],
+	defaultVariants: {
+		marker: "dot",
+		size: "md"
+	}
+});
+/**
+* A shared legend for all chart types. Each item pairs a series marker with a
+* label and can be toggled to hide or show its series — the inactive state mutes
+* the marker and strikes through the label. Items compose into horizontal rows
+* or vertical columns, in two sizes, with dot, square, or line markers.
+*
+* Toggling: pass `onToggle` to make items interactive. Inactive items are read
+* from each payload entry's `inactive` flag (recharts sets this when wired) or
+* the controlled `inactiveKeys` set.
+*/
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, marker = "dot", size = "md", orientation = "horizontal", inactiveKeys, onToggle }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	const inactiveSet = inactiveKeys ? new Set(inactiveKeys) : void 0;
+	const interactive = Boolean(onToggle);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex", orientation === "vertical" ? "flex-col items-start gap-0.5" : "flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.filter((item) => item.type !== "none").map((item, index) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemKey = `${item.dataKey ?? item.value ?? index}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
+			const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(chartLegendMarkerSizeVariants({
+					marker,
+					size
+				})),
+				style: { backgroundColor: markerColor }
+			}), itemConfig?.label ?? item.value] });
+			if (interactive) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-pressed": !inactive,
+				onClick: () => onToggle?.(key),
+				className: cn(chartLegendItemVariants({
+					size,
+					interactive,
+					inactive
+				})),
+				children: content
+			}, itemKey);
+			return /* @__PURE__ */ jsx("div", {
+				className: cn(chartLegendItemVariants({
+					size,
+					interactive,
+					inactive
+				})),
+				children: content
+			}, itemKey);
+		})
+	});
 }
+/**
+* Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
+* or axis lines, a size-scaled tick font, and a reserved value-axis width) that
+* every bar and line chart would otherwise repeat per axis. Spread the result
+* onto the recharts axis, then add the chart-specific props (`dataKey`,
+* `domain`, `ticks`, a `width`/`type` override, …):
+*
+*   const chart = useBarChartLayout();
+*   <XAxis dataKey="month" {...chart.xAxis} />
+*   <YAxis domain={[0, 120]} {...chart.yAxis} />
+*/
 function cartesianAxisProps(layout) {
-  const tick = { fontSize: layout.tickFontSize };
-  return {
-    xAxis: {
-      tickLine: false,
-      axisLine: false,
-      tickMargin: layout.tickMargin,
-      tick
-    },
-    yAxis: {
-      tickLine: false,
-      axisLine: false,
-      width: layout.yAxisWidth,
-      tick
-    }
-  };
+	const tick = { fontSize: layout.tickFontSize };
+	return {
+		xAxis: {
+			tickLine: false,
+			axisLine: false,
+			tickMargin: layout.tickMargin,
+			tick
+		},
+		yAxis: {
+			tickLine: false,
+			axisLine: false,
+			width: layout.yAxisWidth,
+			tick
+		}
+	};
 }
 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];
+	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 {
-  ChartCard,
-  ChartContainer,
-  ChartDescription,
-  ChartHeader,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-  ChartTitle,
-  ChartTooltip,
-  ChartTooltipContent,
-  cartesianAxisProps
-};
-//# sourceMappingURL=chart.js.map
+//#endregion
+export { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, cartesianAxisProps };