@giddaa-housing/ui 1.1.0 → 2.0.0

package/dist/line-chart.js

@@ -1,7 +1,48 @@
 "use client";
-import { useComponentSize } from "./size-context.js";
-import { cartesianAxisProps } from "./chart.js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer, cartesianAxisProps } from "./chart.js";
+import { jsx } from "react/jsx-runtime";
+import { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";
 //#region src/line-chart.tsx
+/**
+* Line and area charts are composable wrappers over the recharts cartesian
+* primitives. recharts 3 registers graphical items through context when they
+* render, so the primitives CAN be wrapped in our own components. Each wrapper
+* bakes in the giddaa defaults (tokens, size-scaled type, mark specs) and
+* forwards every recharts prop, so anything can be overridden in place or
+* replaced with the raw recharts element.
+*
+* Anatomy: `LineChart`/`AreaChart` are the plot roots (frame + responsive box +
+* recharts chart); compose the grid, axes, series, and the shared overlays from
+* `./chart` as children. Both roots share the same axis and grid wrappers.
+*
+* @example
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Revenue Overview</ChartTitle>
+*     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
+*   </ChartHeader>
+*   <AreaChart config={config} data={data}>
+*     <LineChartGrid />
+*     <LineChartXAxis dataKey="month" />
+*     <LineChartYAxis />
+*     <ChartTooltip content={<ChartTooltipContent />} />
+*     <AreaChartSeries dataKey="revenue" name="Revenue" />
+*   </AreaChart>
+* </ChartCard>
+*/
+/**
+* Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens.
+* Assign colours in this fixed order, never cycled: a fourth series folds into
+* "Other" or becomes a second chart.
+*/
+const LINE_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
+];
+const DEFAULT_SERIES_COLOR = LINE_CHART_PALETTE[0];
 const LINE_CHART_LAYOUT = {
 	sm: {
 		height: 64,
@@ -57,8 +98,8 @@ const LINE_CHART_LAYOUT = {
 			left: 0
 		},
 		strokeWidth: 2,
-		dotRadius: 4,
-		activeDotRadius: 5.5,
+		dotRadius: 3.5,
+		activeDotRadius: 5,
 		tickFontSize: 11,
 		yAxisWidth: 28,
 		tickMargin: 6
@@ -72,30 +113,143 @@ const LINE_CHART_LAYOUT = {
 			left: 0
 		},
 		strokeWidth: 2,
-		dotRadius: 4.5,
-		activeDotRadius: 6,
+		dotRadius: 3.5,
+		activeDotRadius: 5,
 		tickFontSize: 12,
 		yAxisWidth: 30,
 		tickMargin: 7
 	}
 };
-/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */
+/** Clamp the 5 line-chart sizes to the 3 `ComponentSize` values for children. */
 function toComponentSize(size) {
 	if (size === "xl" || size === "huge") return "lg";
 	return size;
 }
+/** Resolve the layout for an explicit or inherited line-chart size. */
+function useLineChartSize(size) {
+	const inherited = useComponentSize();
+	const resolved = size ?? inherited;
+	return {
+		size: resolved,
+		layout: LINE_CHART_LAYOUT[resolved] ?? LINE_CHART_LAYOUT.md
+	};
+}
+/**
+* Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+* responsive box) around the recharts `LineChart` with a size-scaled height and
+* margin. `size` flows to the child primitives through `SizeProvider` (clamped
+* to `lg` for `xl`/`huge`). Extra props reach the recharts chart (`data`,
+* `syncId`, …).
+*/
+function LineChart({ config = {}, size, className, children, ...props }) {
+	const { size: resolved, layout } = useLineChartSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: toComponentSize(resolved),
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(LineChart$1, {
+				accessibilityLayer: true,
+				margin: layout.margin,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* Plot root for filled trends — identical to `LineChart` but wraps the recharts
+* `AreaChart`, so it hosts `AreaChartSeries` (and the same grid/axes/overlays).
+*/
+function AreaChart({ config = {}, size, className, children, ...props }) {
+	const { size: resolved, layout } = useLineChartSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: toComponentSize(resolved),
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(AreaChart$1, {
+				accessibilityLayer: true,
+				margin: layout.margin,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* Value reference lines — recharts `CartesianGrid` with vertical lines hidden
+* and the visible grid painted with the `line` token (`line-subtle` matches the
+* chart card surface in both themes, so it would vanish).
+*/
+function LineChartGrid(props) {
+	return /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--color-line)",
+		...props
+	});
+}
+/**
+* Category (time) axis — recharts `XAxis` with no axis/tick lines, a size-scaled
+* tick margin, and caption-placeholder tick ink. Passing your own `tick`
+* replaces the default styling entirely.
+*/
+function LineChartXAxis({ size, tick, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const defaultTick = {
+		...axes.xAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(XAxis, {
+		tickLine: axes.xAxis.tickLine,
+		axisLine: axes.xAxis.axisLine,
+		tickMargin: axes.xAxis.tickMargin,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
 /**
-* Build the colour-bound props for a `<Line>`/`<Area>` series at a given size:
-* the rounded stroke geometry plus the resting and active dots, all painted in
-* `color`. `area` adds the 15 %-opacity wash beneath the stroke.
+* Value axis — recharts `YAxis` with no axis/tick lines, size-scaled tick type,
+* and reserved width for value labels. Override `width` for long labels.
 */
-function seriesProps(layout, color) {
+function LineChartYAxis({ size, tick, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const defaultTick = {
+		...axes.yAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(YAxis, {
+		tickLine: axes.yAxis.tickLine,
+		axisLine: axes.yAxis.axisLine,
+		width: axes.yAxis.width,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/** The giddaa line mark spec: rounded 2px stroke, resting + surface-ringed active dots. */
+function lineMarkProps(layout, color) {
 	return {
 		type: "linear",
 		stroke: color,
 		strokeWidth: layout.strokeWidth,
 		strokeLinejoin: "round",
-		strokeLinecap: "round",
+		strokeLinecap: "round"
+	};
+}
+function defaultDots(layout, color) {
+	return {
 		dot: {
 			r: layout.dotRadius,
 			fill: color,
@@ -110,23 +264,56 @@ function seriesProps(layout, color) {
 	};
 }
 /**
-* Resolve the line-chart layout for an explicit or inherited component size. The
-* returned object groups the giddaa defaults by the recharts component they
-* belong to. `line(color)`/`area(color)` return the full series props for a
-* given colour — spread each onto its element, then pass the data-specific props
-* (`config`, `data`, `dataKey`, …) directly afterwards to add or override:
-*
-*   const chart = useLineChartLayout(size);
-*   <ChartContainer config={config} {...chart.container}>
-*     <AreaChart data={data} {...chart.chart}>
-*       <XAxis dataKey="month" {...chart.xAxis} />
-*       <YAxis {...chart.yAxis} />
-*       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
+* One line series — recharts `Line` with the giddaa mark spec: a 2px rounded
+* stroke in `color`, solid resting dots, and a hover dot ringed in
+* `surface-raised` so overlapping series stay separable. `color` drives all of
+* them at once; `stroke`/`dot`/`activeDot` still win when passed directly.
+*/
+function LineChartSeries({ color = DEFAULT_SERIES_COLOR, size, dot, activeDot, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const dots = defaultDots(layout, color);
+	return /* @__PURE__ */ jsx(Line, {
+		...lineMarkProps(layout, color),
+		dot: dot ?? dots.dot,
+		activeDot: activeDot ?? dots.activeDot,
+		...props
+	});
+}
+/**
+* One area series — recharts `Area` with the giddaa mark spec: the same rounded
+* 2px stroke and dots as `LineChartSeries`, plus the series colour washed to 15%
+* beneath the stroke. `color` drives stroke + fill + dots at once;
+* `stroke`/`fill`/`dot` still win when passed directly.
+*/
+function AreaChartSeries({ color = DEFAULT_SERIES_COLOR, size, dot, activeDot, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const dots = defaultDots(layout, color);
+	return /* @__PURE__ */ jsx(Area, {
+		...lineMarkProps(layout, color),
+		fill: color,
+		fillOpacity: .15,
+		dot: dot ?? dots.dot,
+		activeDot: activeDot ?? dots.activeDot,
+		...props
+	});
+}
+/**
+* @deprecated Compose the `<LineChart>`/`<AreaChart>` primitives instead — see
+* the module example. This layout hook predates recharts 3 wrapping support and
+* will be removed in the next major. It returns prop bags to spread onto raw
+* recharts elements.
 */
 function useLineChartLayout(size) {
-	const inheritedSize = useComponentSize();
-	const layout = LINE_CHART_LAYOUT[size ?? inheritedSize] ?? LINE_CHART_LAYOUT.md;
-	const axes = cartesianAxisProps(layout);
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const series = (color) => ({
+		...lineMarkProps(layout, color),
+		...defaultDots(layout, color)
+	});
 	return {
 		container: {
 			className: "aspect-auto w-full",
@@ -138,13 +325,13 @@ function useLineChartLayout(size) {
 		},
 		xAxis: axes.xAxis,
 		yAxis: axes.yAxis,
-		line: (color) => seriesProps(layout, color),
+		line: (color) => series(color),
 		area: (color) => ({
-			...seriesProps(layout, color),
+			...series(color),
 			fill: color,
 			fillOpacity: .15
 		})
 	};
 }
 //#endregion
-export { LINE_CHART_LAYOUT, toComponentSize, useLineChartLayout };
+export { AreaChart, AreaChartSeries, LINE_CHART_LAYOUT, LINE_CHART_PALETTE, LineChart, LineChartGrid, LineChartSeries, LineChartXAxis, LineChartYAxis, toComponentSize, useLineChartLayout };

package/dist/list-item.d.ts

@@ -0,0 +1,22 @@
+import { Avatar } from "./avatar.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+//#region src/list-item.d.ts
+declare const listItemVariants: (props?: ({
+  size?: "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ListItemSize = NonNullable<VariantProps<typeof listItemVariants>["size"]>;
+type ListItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof listItemVariants> & {
+  selected?: boolean;
+};
+declare function ListItem({ className, render, size, selected, ...props }: ListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ListItemAvatar({ className, size, ...props }: ComponentProps<typeof Avatar>): import("react").JSX.Element;
+declare function ListItemIcon({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+declare function ListItemContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function ListItemTitle({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function ListItemDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function ListItemMeta({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+declare function ListItemCount({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+//#endregion
+export { ListItem, ListItemAvatar, ListItemContent, ListItemCount, ListItemDescription, ListItemIcon, ListItemMeta, type ListItemProps, type ListItemSize, ListItemTitle, listItemVariants };

package/dist/list-item.js

@@ -0,0 +1,84 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Avatar } from "./avatar.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/list-item.tsx
+const listItemVariants = cva("group/list-item flex w-full min-w-0 items-center border-b border-line-subtle bg-surface text-left text-fg-primary transition-[background-color,color,opacity,box-shadow] outline-none data-[selected=true]:bg-surface-brand-subtle [button,a,[role=button],[role=link]]:cursor-pointer [button,a,[role=button],[role=link]]:select-none [button,a,[role=button],[role=link]]:hover:bg-surface-raised [button,a,[role=button],[role=link]]:active:bg-surface-raised data-[selected=true]:[button,a,[role=button],[role=link]]:hover:bg-surface-brand-subtle data-[selected=true]:[button,a,[role=button],[role=link]]:active:bg-surface-brand-subtle disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", {
+	variants: { size: {
+		md: "gap-3 px-4 py-3.5",
+		lg: "gap-4 px-5 py-4.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ListItem({ className, render, size = "md", selected = false, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			className: cn(listItemVariants({ size }), className),
+			"data-selected": selected,
+			"data-size": size,
+			"data-slot": "list-item"
+		}, props),
+		render,
+		state: {
+			slot: "list-item",
+			size,
+			selected
+		}
+	});
+}
+function ListItemAvatar({ className, size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		"data-slot": "list-item-avatar",
+		size,
+		className: cn("group-data-[size=md]/list-item:size-8 group-data-[size=lg]/list-item:size-10", "**:data-[slot=avatar-fallback]:bg-action-tertiary **:data-[slot=avatar-fallback]:text-fg-primary", "group-data-[selected=true]/list-item:**:data-[slot=avatar-fallback]:bg-surface-brand group-data-[selected=true]/list-item:**:data-[slot=avatar-fallback]:text-fg-on-brand", className),
+		...props
+	});
+}
+function ListItemIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-icon",
+		className: cn("flex shrink-0 items-center justify-center text-fg-secondary [&>svg]:shrink-0", "group-data-[size=md]/list-item:size-5 group-data-[size=md]/list-item:[&>svg]:size-5", "group-data-[size=lg]/list-item:size-6 group-data-[size=lg]/list-item:[&>svg]:size-6", className),
+		...props
+	});
+}
+function ListItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "list-item-content",
+		className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+		...props
+	});
+}
+function ListItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "list-item-title",
+		className: cn("min-w-0 truncate font-semibold text-fg-primary group-data-[selected=true]/list-item:text-fg-brand group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-sm", "group-data-[size=lg]/list-item:text-gdt-md", className),
+		...props
+	});
+}
+function ListItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "list-item-description",
+		className: cn("min-w-0 truncate font-normal text-fg-secondary group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-xs", "group-data-[size=lg]/list-item:text-gdt-sm", className),
+		...props
+	});
+}
+function ListItemMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-meta",
+		className: cn("shrink-0 whitespace-nowrap text-right font-normal text-fg-secondary group-data-[selected=true]/list-item:text-fg-brand group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-xs", "group-data-[size=lg]/list-item:text-gdt-sm", className),
+		...props
+	});
+}
+function ListItemCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-count",
+		className: cn("flex shrink-0 items-center justify-center rounded-full bg-action-primary px-2 py-0.5 text-gdt-xs font-bold whitespace-nowrap text-fg-on-brand group-disabled/list-item:bg-action-tertiary group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:bg-action-tertiary group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:min-h-5.5", "group-data-[size=lg]/list-item:min-h-6", className),
+		...props
+	});
+}
+//#endregion
+export { ListItem, ListItemAvatar, ListItemContent, ListItemCount, ListItemDescription, ListItemIcon, ListItemMeta, ListItemTitle, listItemVariants };

package/dist/number-input.js

@@ -43,24 +43,27 @@ function NumberInput({ children, format, formatPreset, placeholder, size, thousa
 }
 function NumberInputControl() {
 	const size = useComponentSize();
-	return /* @__PURE__ */ jsxs(InputGroupAddon, {
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
 		align: "inline-end",
-		className: cn("flex gap-0 flex-col h-[calc(100%-2px)] w-10 overflow-hidden rounded-r-full p-0! pr-1.5!", size === "lg" && "w-12"),
-		children: [/* @__PURE__ */ jsx(NumberField.Increment, {
-			className: "w-full flex-1 rounded-none rounded-tr-full",
-			render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
-			children: /* @__PURE__ */ jsx(PlusIcon, { className: cn("size-1.5", {
-				"size-3": size === "md",
-				"size-3.5": size === "lg"
-			}) })
-		}), /* @__PURE__ */ jsx(NumberField.Decrement, {
-			className: "w-full flex-1 rounded-none rounded-br-full",
-			render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
-			children: /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-1.5", {
-				"size-3": size === "md",
-				"size-3.5": size === "lg"
-			}) })
-		})]
+		className: cn("flex h-full w-10 overflow-hidden rounded-r-full p-0! group-focus-within/input-group:mr-px group-focus-within/input-group:h-[calc(100%-2px)]", size === "lg" && "w-12"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full flex-col gap-0 group-focus-within/input-group:ml-px group-focus-within/input-group:h-[calc(100%+2px)]",
+			children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+				className: "w-full flex-1 rounded-none rounded-tr-full",
+				render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
+				children: /* @__PURE__ */ jsx(PlusIcon, { className: cn("size-1.5", {
+					"size-3": size === "md",
+					"size-3.5": size === "lg"
+				}) })
+			}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+				className: "w-full flex-1 rounded-none rounded-br-full",
+				render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
+				children: /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-1.5", {
+					"size-3": size === "md",
+					"size-3.5": size === "lg"
+				}) })
+			})]
+		})
 	});
 }
 //#endregion

package/dist/pie-chart.d.ts

@@ -1,39 +1,49 @@
 import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
 import * as React from "react";
+import { Pie, PieChart as PieChart$1 } from "recharts";
 //#region src/pie-chart.d.ts
 /**
- * Pie / donut charts are composed from recharts plot primitives directly —
- * recharts identifies `PieChart`, `Pie`, and `Cell` by component identity, so
- * they cannot be wrapped. This module supplies the giddaa-specific pieces that
- * would otherwise be copy-pasted: per-size layout numbers, a categorical
- * palette, the donut center label, and the rich legend (dot · name · value ·
- * percentage). Pair them with the shared frame from `./chart`.
+ * Pie / donut charts are composable wrappers over the recharts pie primitives.
+ * recharts 3 registers graphical items through context when they render, so the
+ * primitives CAN be wrapped in our own components. Each wrapper bakes in the
+ * giddaa defaults (square plot box, size-scaled radii, mark specs) and forwards
+ * every recharts prop, so anything can be overridden in place or replaced with
+ * the raw recharts element.
  *
- * A donut keeps an open center for a total label (`innerRadius` > 0); a pie
- * fills the circle (`innerRadius={0}`). Both read the same layout.
+ * A donut keeps an open center for a total label (`type="donut"`, the default);
+ * a pie fills the circle (`type="pie"`). Segment colours are assigned per `Cell`
+ * from `PIE_CHART_PALETTE` in slot order — a fourth+ category folds into "Other"
+ * (the palette has three validated categorical slots on purpose).
  *
  * @example
- * const chart = usePieChartLayout({ size: "md", type: "donut" });
  * <ChartCard size="md">
+ *   <ChartHeader>
+ *     <ChartTitle>Portfolio mix</ChartTitle>
+ *   </ChartHeader>
  *   <div className="flex items-center gap-4">
- *     <ChartContainer config={config} {...chart.container}>
- *       <PieChart>
- *         <Pie data={data} dataKey="value" nameKey="label" {...chart.pie}>
- *           {data.map((d) => <Cell key={d.label} fill={d.color} />)}
- *           <Label content={<PieCenterLabel total="₦1.1M" caption="Total spend" />} />
- *         </Pie>
- *       </PieChart>
- *     </ChartContainer>
+ *     <PieChart config={config}>
+ *       <PieChartSeries data={data} dataKey="value" nameKey="label" type="donut">
+ *         {data.map((d, i) => <Cell key={d.label} fill={PIE_CHART_PALETTE[i]} />)}
+ *         <Label content={<PieCenterLabel total="₦1.1M" caption="Total spend" />} />
+ *       </PieChartSeries>
+ *     </PieChart>
  *     <PieChartLegend items={legendItems} />
  *   </div>
  * </ChartCard>
  */
 /** Pie sizes line up with the three shared `ComponentSize` values. */
 type PieChartSize = ComponentSize;
+/**
+ * Categorical segment palette — the theme-aware `chart-1`…`chart-3` tokens.
+ * Assign colours in this fixed slot order, never cycled: a fourth category folds
+ * into "Other". Override per segment with a `Cell` `fill`.
+ */
+declare const PIE_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
 type PieChartLayout = {
   /** Square plot box in px (width = height); width is NOT parent-driven here. */
   size: number;
-  /** Donut hole radius in px. Pass `0` to the `Pie` for a filled pie. */
+  /** Donut hole radius in px. `type="pie"` collapses it to 0. */
   innerRadius: number;
   /** Outer ring radius in px. */
   outerRadius: number;
@@ -47,46 +57,38 @@ type PieChartLayout = {
   captionFontSize: number;
 };
 declare const PIE_CHART_LAYOUT: Record<PieChartSize, PieChartLayout>;
+type PieChartProps = Omit<React.ComponentProps<typeof PieChart$1>, "width" | "height"> & {
+  /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+  config?: ChartConfig;
+  /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+  size?: PieChartSize;
+  /** Applied to the square plot box, e.g. to override its dimensions. */
+  className?: string;
+};
 /**
- * Categorical palette for pie/donut segments, ordered by share. Giddaa has no
- * `chart-1`…`chart-N` tokens yet, so these map to the brand scales: forest →
- * brass → moss → clay → stone. Assign by index, or override per `Cell`.
- */
-declare const PIE_CHART_PALETTE: readonly ["var(--color-forest-700)", "var(--color-brass-500)", "var(--color-moss-600)", "var(--color-clay-500)", "var(--color-stone-500)"];
-/**
- * Resolve the pie-chart layout for an explicit or inherited component size and
- * chart `type`. The returned object groups the giddaa defaults by the recharts
- * component they belong to — spread `container` onto `ChartContainer` and `pie`
- * onto `Pie`, then pass the data-specific props (`data`, `dataKey`, `nameKey`)
- * directly afterwards. `type="pie"` collapses the donut hole (`innerRadius` 0).
+ * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+ * responsive box) around the recharts `PieChart` in a fixed square box from
+ * `PIE_CHART_LAYOUT` (unlike the cartesian roots, a pie's width is not
+ * parent-driven). `size` flows to the child primitives through `SizeProvider`.
  */
-declare function usePieChartLayout({ size, type }?: {
-  size?: PieChartSize;
+declare function PieChart({ config, size, className, children, ...props }: PieChartProps): React.JSX.Element;
+type PieChartSeriesProps = React.ComponentProps<typeof Pie> & {
+  /** `donut` keeps an open center (default); `pie` fills the circle. */
   type?: "donut" | "pie";
-}): {
-  container: {
-    className: string;
-    style: {
-      width: number;
-      height: number;
-    };
-  };
-  pie: {
-    innerRadius: number;
-    outerRadius: number;
-    paddingAngle: number;
-    cornerRadius: number;
-    strokeWidth: number;
-  };
-  label: {
-    totalFontSize: number;
-    captionFontSize: number;
-  };
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: PieChartSize;
 };
+/**
+ * One data series — recharts `Pie` with the giddaa mark spec: size-scaled
+ * radii, a small inter-segment gap, and no stroke. Pass `Cell` children for
+ * per-segment colours and a `Label` for the donut center. Each numeric prop is
+ * defaulted from the layout and still wins when passed directly.
+ */
+declare function PieChartSeries({ type, size, innerRadius, outerRadius, paddingAngle, cornerRadius, strokeWidth, ...props }: PieChartSeriesProps): React.JSX.Element;
 /**
  * Center label for a donut — the hero total over a short caption. Pass it to
  * recharts as `<Label content={<PieCenterLabel total=… caption=… />} />` inside
- * the `Pie`; recharts injects the `viewBox` carrying the polar center (cx/cy).
+ * the `PieChartSeries`; recharts injects the `viewBox` carrying the polar center.
  */
 type PieCenterLabelProps = {
   /** Hero figure — pre-formatted, e.g. "₦1.1M". */
@@ -121,5 +123,34 @@ declare function PieChartLegend({ items, size, className, ...props }: React.Comp
   items: PieLegendItem[];
   size?: PieChartSize;
 }): React.JSX.Element;
+/**
+ * @deprecated Compose the `<PieChart>`/`<PieChartSeries>` primitives instead —
+ * see the module example. This layout hook predates recharts 3 wrapping support
+ * and will be removed in the next major. It returns prop bags to spread onto raw
+ * recharts elements.
+ */
+declare function usePieChartLayout({ size, type }?: {
+  size?: PieChartSize;
+  type?: "donut" | "pie";
+}): {
+  container: {
+    className: string;
+    style: {
+      width: number;
+      height: number;
+    };
+  };
+  pie: {
+    innerRadius: number;
+    outerRadius: number;
+    paddingAngle: number;
+    cornerRadius: number;
+    strokeWidth: number;
+  };
+  label: {
+    totalFontSize: number;
+    captionFontSize: number;
+  };
+};
 //#endregion
-export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, type PieCenterLabelProps, type PieChartLayout, PieChartLegend, type PieChartSize, type PieLegendItem, usePieChartLayout };
+export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, type PieCenterLabelProps, PieChart, type PieChartLayout, PieChartLegend, type PieChartProps, PieChartSeries, type PieChartSeriesProps, type PieChartSize, type PieLegendItem, usePieChartLayout };