@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/picker-lzgmsNfG.js

@@ -0,0 +1,32 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/picker.tsx
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, className }) {
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		className: cn("flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none", disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 size-4 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerTrigger as n, PickerFooter as t };

package/dist/pie-chart.d.ts

@@ -1,106 +1,108 @@
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+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. */
-    innerRadius: number;
-    /** Outer ring radius in px. */
-    outerRadius: number;
-    /** Gap between segments, in degrees. */
-    paddingAngle: number;
-    /** Corner radius of each segment. */
-    cornerRadius: number;
-    /** Center total font size. */
-    totalFontSize: number;
-    /** Center caption font size. */
-    captionFontSize: number;
+  /** Square plot box in px (width = height); width is NOT parent-driven here. */
+  size: number;
+  /** Donut hole radius in px. `type="pie"` collapses it to 0. */
+  innerRadius: number;
+  /** Outer ring radius in px. */
+  outerRadius: number;
+  /** Gap between segments, in degrees. */
+  paddingAngle: number;
+  /** Corner radius of each segment. */
+  cornerRadius: number;
+  /** Center total font size. */
+  totalFontSize: number;
+  /** Center caption font size. */
+  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`.
+ * 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 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)"];
+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";
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: PieChartSize;
+};
 /**
- * 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).
+ * 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 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;
-    };
-};
+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". */
-    total: React.ReactNode;
-    /** Short label describing what the total represents, e.g. "Total spend". */
-    caption?: React.ReactNode;
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: PieChartSize;
-    viewBox?: {
-        cx?: number;
-        cy?: number;
-    };
+  /** Hero figure — pre-formatted, e.g. "₦1.1M". */
+  total: React.ReactNode;
+  /** Short label describing what the total represents, e.g. "Total spend". */
+  caption?: React.ReactNode;
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: PieChartSize;
+  viewBox?: {
+    cx?: number;
+    cy?: number;
+  };
 };
-declare function PieCenterLabel({ total, caption, size, viewBox, }: PieCenterLabelProps): React.JSX.Element | null;
+declare function PieCenterLabel({ total, caption, size, viewBox }: PieCenterLabelProps): React.JSX.Element | null;
 /**
  * Rich legend for pie/donut charts. Unlike the shared `ChartLegendContent`
  * (marker + label only), each row pairs a colour dot with the category name, its
@@ -108,18 +110,47 @@ declare function PieCenterLabel({ total, caption, size, viewBox, }: PieCenterLab
  * mini table. Values and percentages are pre-formatted by the caller.
  */
 type PieLegendItem = {
-    /** Category name, e.g. "Housing". */
-    label: string;
-    /** Segment colour — should match the matching `Cell` fill. */
-    color: string;
-    /** Pre-formatted value, e.g. "₦420k". */
-    value: React.ReactNode;
-    /** Pre-formatted share, e.g. "38%". */
-    percentage: React.ReactNode;
+  /** Category name, e.g. "Housing". */
+  label: string;
+  /** Segment colour — should match the matching `Cell` fill. */
+  color: string;
+  /** Pre-formatted value, e.g. "₦420k". */
+  value: React.ReactNode;
+  /** Pre-formatted share, e.g. "38%". */
+  percentage: React.ReactNode;
 };
 declare function PieChartLegend({ items, size, className, ...props }: React.ComponentProps<"ul"> & {
-    items: PieLegendItem[];
-    size?: PieChartSize;
+  items: PieLegendItem[];
+  size?: PieChartSize;
 }): React.JSX.Element;
-
-export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, type PieCenterLabelProps, type PieChartLayout, PieChartLegend, type PieChartSize, type PieLegendItem, usePieChartLayout };
+/**
+ * @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, PieChart, type PieChartLayout, PieChartLegend, type PieChartProps, PieChartSeries, type PieChartSeriesProps, type PieChartSize, type PieLegendItem, usePieChartLayout };

package/dist/pie-chart.js

@@ -1,157 +1,191 @@
 "use client";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/pie-chart.tsx
-import { cva } from "class-variance-authority";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var PIE_CHART_LAYOUT = {
-  sm: {
-    size: 132,
-    innerRadius: 42,
-    outerRadius: 64,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 18,
-    captionFontSize: 9
-  },
-  md: {
-    size: 176,
-    innerRadius: 56,
-    outerRadius: 84,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 24,
-    captionFontSize: 11
-  },
-  lg: {
-    size: 224,
-    innerRadius: 72,
-    outerRadius: 108,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 30,
-    captionFontSize: 12
-  }
-};
-var PIE_CHART_PALETTE = [
-  "var(--color-forest-700)",
-  "var(--color-brass-500)",
-  "var(--color-moss-600)",
-  "var(--color-clay-500)",
-  "var(--color-stone-500)"
+import { cva } from "class-variance-authority";
+import { Pie, PieChart as PieChart$1 } from "recharts";
+//#region src/pie-chart.tsx
+/**
+* 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`.
+*/
+const PIE_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
 ];
-function usePieChartLayout({
-  size,
-  type = "donut"
-} = {}) {
-  const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
-  return {
-    container: {
-      className: "aspect-square shrink-0",
-      style: { width: layout.size, height: layout.size }
-    },
-    pie: {
-      innerRadius: type === "pie" ? 0 : layout.innerRadius,
-      outerRadius: layout.outerRadius,
-      paddingAngle: type === "pie" ? 0 : layout.paddingAngle,
-      cornerRadius: layout.cornerRadius,
-      strokeWidth: 0
-    },
-    label: {
-      totalFontSize: layout.totalFontSize,
-      captionFontSize: layout.captionFontSize
-    }
-  };
+const PIE_CHART_LAYOUT = {
+	sm: {
+		size: 132,
+		innerRadius: 42,
+		outerRadius: 64,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 18,
+		captionFontSize: 9
+	},
+	md: {
+		size: 176,
+		innerRadius: 56,
+		outerRadius: 84,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 24,
+		captionFontSize: 11
+	},
+	lg: {
+		size: 224,
+		innerRadius: 72,
+		outerRadius: 108,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 30,
+		captionFontSize: 12
+	}
+};
+/**
+* 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`.
+*/
+function PieChart({ config = {}, size, className, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = PIE_CHART_LAYOUT[resolvedSize];
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-square shrink-0", className),
+			style: {
+				width: layout.size,
+				height: layout.size
+			},
+			children: /* @__PURE__ */ jsx(PieChart$1, {
+				accessibilityLayer: true,
+				...props,
+				children
+			})
+		})
+	});
 }
-function PieCenterLabel({
-  total,
-  caption,
-  size,
-  viewBox
-}) {
-  const { label } = usePieChartLayout({ size });
-  if (!viewBox || viewBox.cx == null || viewBox.cy == null) {
-    return null;
-  }
-  const { cx, cy } = viewBox;
-  const captionY = cy + label.totalFontSize * 0.72;
-  return /* @__PURE__ */ jsxs("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "central", children: [
-    /* @__PURE__ */ jsx(
-      "tspan",
-      {
-        x: cx,
-        y: caption == null ? cy : cy - label.captionFontSize * 0.5,
-        className: "fill-fg-primary font-extrabold tabular-nums",
-        style: { fontSize: label.totalFontSize },
-        children: total
-      }
-    ),
-    caption != null && /* @__PURE__ */ jsx(
-      "tspan",
-      {
-        x: cx,
-        y: captionY,
-        className: "fill-fg-secondary font-medium",
-        style: { fontSize: label.captionFontSize },
-        children: caption
-      }
-    )
-  ] });
+/**
+* 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.
+*/
+function PieChartSeries({ type = "donut", size, innerRadius, outerRadius, paddingAngle, cornerRadius, strokeWidth, ...props }) {
+	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
+	return /* @__PURE__ */ jsx(Pie, {
+		innerRadius: innerRadius ?? (type === "pie" ? 0 : layout.innerRadius),
+		outerRadius: outerRadius ?? layout.outerRadius,
+		paddingAngle: paddingAngle ?? (type === "pie" ? 0 : layout.paddingAngle),
+		cornerRadius: cornerRadius ?? layout.cornerRadius,
+		strokeWidth: strokeWidth ?? 0,
+		...props
+	});
 }
-var pieLegendVariants = cva("flex min-w-0 flex-col", {
-  variants: {
-    size: {
-      sm: "gap-1.5 text-gdt-xs",
-      md: "gap-2 text-gdt-sm",
-      lg: "gap-2.5 text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+function PieCenterLabel({ total, caption, size, viewBox }) {
+	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
+	if (!viewBox || viewBox.cx == null || viewBox.cy == null) return null;
+	const { cx, cy } = viewBox;
+	const captionY = cy + layout.totalFontSize * .72;
+	return /* @__PURE__ */ jsxs("text", {
+		x: cx,
+		y: cy,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		children: [/* @__PURE__ */ jsx("tspan", {
+			x: cx,
+			y: caption == null ? cy : cy - layout.captionFontSize * .5,
+			className: "fill-fg-primary font-extrabold tabular-nums",
+			style: { fontSize: layout.totalFontSize },
+			children: total
+		}), caption != null && /* @__PURE__ */ jsx("tspan", {
+			x: cx,
+			y: captionY,
+			className: "fill-fg-secondary font-medium",
+			style: { fontSize: layout.captionFontSize },
+			children: caption
+		})]
+	});
+}
+const pieLegendVariants = cva("flex min-w-0 flex-col", {
+	variants: { size: {
+		sm: "gap-1.5 text-gdt-xs",
+		md: "gap-2 text-gdt-sm",
+		lg: "gap-2.5 text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-var pieLegendDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
-  },
-  defaultVariants: { size: "md" }
+const pieLegendDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-3"
+	} },
+	defaultVariants: { size: "md" }
 });
-function PieChartLegend({
-  items,
-  size,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx(
-    "ul",
-    {
-      className: cn(pieLegendVariants({ size: resolvedSize }), className),
-      ...props,
-      children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(pieLegendDotVariants({ size: resolvedSize })),
-            style: { backgroundColor: item.color }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-fg-primary", children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-fg-secondary", children: item.value }),
-        /* @__PURE__ */ jsx("span", { className: "w-9 shrink-0 text-right font-bold tabular-nums text-fg-primary", children: item.percentage })
-      ] }, item.label))
-    }
-  );
+function PieChartLegend({ items, size, className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(pieLegendVariants({ size: resolvedSize }), className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(pieLegendDotVariants({ size: resolvedSize })),
+					style: { backgroundColor: item.color }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-fg-primary",
+					children: item.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 tabular-nums text-fg-secondary",
+					children: item.value
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-9 shrink-0 text-right font-bold tabular-nums text-fg-primary",
+					children: item.percentage
+				})
+			]
+		}, item.label))
+	});
 }
-export {
-  PIE_CHART_LAYOUT,
-  PIE_CHART_PALETTE,
-  PieCenterLabel,
-  PieChartLegend,
-  usePieChartLayout
-};
-//# sourceMappingURL=pie-chart.js.map
+/**
+* @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.
+*/
+function usePieChartLayout({ size, type = "donut" } = {}) {
+	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
+	return {
+		container: {
+			className: "aspect-square shrink-0",
+			style: {
+				width: layout.size,
+				height: layout.size
+			}
+		},
+		pie: {
+			innerRadius: type === "pie" ? 0 : layout.innerRadius,
+			outerRadius: layout.outerRadius,
+			paddingAngle: type === "pie" ? 0 : layout.paddingAngle,
+			cornerRadius: layout.cornerRadius,
+			strokeWidth: 0
+		},
+		label: {
+			totalFontSize: layout.totalFontSize,
+			captionFontSize: layout.captionFontSize
+		}
+	};
+}
+//#endregion
+export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, PieChart, PieChartLegend, PieChartSeries, usePieChartLayout };

package/dist/popover.d.ts

@@ -1,20 +1,20 @@
-import { Popover as Popover$1 } from '@base-ui/react/popover';
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/popover.d.ts
 declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
 type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
-    showArrow?: boolean;
-    size?: ComponentSize;
+  showArrow?: boolean;
+  size?: ComponentSize;
 };
 declare function PopoverContent({ className, align, alignOffset, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
-    border?: boolean;
+  border?: boolean;
 }): React.JSX.Element;
 declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React.JSX.Element;
-
-export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };
+//#endregion
+export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };