@giddaa-housing/ui 1.1.0 → 1.2.0

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 };

package/dist/pie-chart.js

@@ -1,9 +1,21 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 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)"
+];
 const PIE_CHART_LAYOUT = {
 	sm: {
 		size: 132,
@@ -34,52 +46,53 @@ const PIE_CHART_LAYOUT = {
 	}
 };
 /**
-* 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`.
-*/
-const PIE_CHART_PALETTE = [
-	"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`.
 */
-function usePieChartLayout({ size, type = "donut" } = {}) {
-	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
-	return {
-		container: {
-			className: "aspect-square shrink-0",
+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
-			}
-		},
-		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
-		}
-	};
+			},
+			children: /* @__PURE__ */ jsx(PieChart$1, {
+				accessibilityLayer: true,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* 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
+	});
 }
 function PieCenterLabel({ total, caption, size, viewBox }) {
-	const { label } = usePieChartLayout({ size });
+	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
 	if (!viewBox || viewBox.cx == null || viewBox.cy == null) return null;
 	const { cx, cy } = viewBox;
-	const captionY = cy + label.totalFontSize * .72;
+	const captionY = cy + layout.totalFontSize * .72;
 	return /* @__PURE__ */ jsxs("text", {
 		x: cx,
 		y: cy,
@@ -87,15 +100,15 @@ function PieCenterLabel({ total, caption, size, viewBox }) {
 		dominantBaseline: "central",
 		children: [/* @__PURE__ */ jsx("tspan", {
 			x: cx,
-			y: caption == null ? cy : cy - label.captionFontSize * .5,
+			y: caption == null ? cy : cy - layout.captionFontSize * .5,
 			className: "fill-fg-primary font-extrabold tabular-nums",
-			style: { fontSize: label.totalFontSize },
+			style: { fontSize: layout.totalFontSize },
 			children: total
 		}), caption != null && /* @__PURE__ */ jsx("tspan", {
 			x: cx,
 			y: captionY,
 			className: "fill-fg-secondary font-medium",
-			style: { fontSize: label.captionFontSize },
+			style: { fontSize: layout.captionFontSize },
 			children: caption
 		})]
 	});
@@ -145,5 +158,34 @@ function PieChartLegend({ items, size, className, ...props }) {
 		}, item.label))
 	});
 }
+/**
+* @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, PieChartLegend, usePieChartLayout };
+export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, PieChart, PieChartLegend, PieChartSeries, usePieChartLayout };

package/dist/purchase-option-card.d.ts

@@ -0,0 +1,79 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/purchase-option-card.d.ts
+declare const purchaseOptionCardVariants: (props?: ({
+  selected?: boolean | null | undefined;
+  disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type PurchaseOptionCardProps = useRender.ComponentProps<"article"> & VariantProps<typeof purchaseOptionCardVariants>;
+/**
+ * Root surface for a single purchase / mortgage option. Composable — assemble
+ * it from the header, grid, and footer parts so the actions can vary per use.
+ *
+ * `disabled` is propagated to descendants via a `data-disabled` group flag, so
+ * the header/grid text mutes automatically. Footer buttons are supplied by the
+ * consumer, so pass `disabled` to them too.
+ *
+ * <PurchaseOptionCard>
+ *   <PurchaseOptionCardHeader>
+ *     <PurchaseOptionCardMeta>
+ *       <PurchaseOptionCardLabel>Mortgage Plan</PurchaseOptionCardLabel>
+ *       <Badge variant="default" border={false} shape="round" size="sm">
+ *         20% Interest Rate
+ *       </Badge>
+ *     </PurchaseOptionCardMeta>
+ *     <div>
+ *       <PurchaseOptionCardAmount>₦1,200,000</PurchaseOptionCardAmount>
+ *       <PurchaseOptionCardCadence>Per Month</PurchaseOptionCardCadence>
+ *     </div>
+ *   </PurchaseOptionCardHeader>
+ *   <PurchaseOptionCardGrid>
+ *     <PurchaseOptionCardItem label="Initial Deposit">₦5,000,000</PurchaseOptionCardItem>
+ *     <PurchaseOptionCardItem label="Max Loan Amount">₦80,000,000</PurchaseOptionCardItem>
+ *     <PurchaseOptionCardItem label="Max Payment Period" wide>20 Years</PurchaseOptionCardItem>
+ *   </PurchaseOptionCardGrid>
+ *   <PurchaseOptionCardFooter>
+ *     <Button variant="primary-outline" size="md" className="flex-1">View Details</Button>
+ *     <Button variant="primary" size="md" className="flex-1">Apply Now</Button>
+ *   </PurchaseOptionCardFooter>
+ * </PurchaseOptionCard>
+ */
+declare function PurchaseOptionCard({ className, disabled, render, selected, ...props }: PurchaseOptionCardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Top section wrapper. Stacks the meta row and the headline figure, and draws
+ * the divider that separates the header from the grid.
+ */
+declare function PurchaseOptionCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Row inside the header that balances the plan label against the interest-rate
+ * badge (or any other trailing content).
+ */
+declare function PurchaseOptionCardMeta({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Eyebrow label naming the plan type. */
+declare function PurchaseOptionCardLabel({ className, render, ...props }: useRender.ComponentProps<"span">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Headline figure — the plan's payment amount. */
+declare function PurchaseOptionCardAmount({ className, render, ...props }: useRender.ComponentProps<"h3">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Supporting cadence line beneath the headline figure. */
+declare function PurchaseOptionCardCadence({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Two-column grid holding the option's detail items. */
+declare function PurchaseOptionCardGrid({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type PurchaseOptionCardItemProps = useRender.ComponentProps<"div"> & {
+  /** Caption rendered beneath the value. */
+  label: React.ReactNode;
+  /** Span both grid columns. */
+  wide?: boolean;
+};
+/**
+ * A single labelled detail cell in the grid. The value is passed as `children`,
+ * the caption via `label`. Use `wide` to span the full row.
+ */
+declare function PurchaseOptionCardItem({ children, className, label, render, wide, ...props }: PurchaseOptionCardItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Action row at the foot of the card. Wraps the consumer-supplied buttons and
+ * draws the divider above them. Give each button `className="flex-1"` to share
+ * the row evenly.
+ */
+declare function PurchaseOptionCardFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
+export { PurchaseOptionCard, PurchaseOptionCardAmount, PurchaseOptionCardCadence, PurchaseOptionCardFooter, PurchaseOptionCardGrid, PurchaseOptionCardHeader, PurchaseOptionCardItem, type PurchaseOptionCardItemProps, PurchaseOptionCardLabel, PurchaseOptionCardMeta, type PurchaseOptionCardProps, purchaseOptionCardVariants };

package/dist/purchase-option-card.js

@@ -0,0 +1,176 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Fragment, jsx, jsxs } 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/purchase-option-card.tsx
+const purchaseOptionCardVariants = cva("group/purchase-option-card relative flex w-full min-w-0 flex-col gap-3.5 rounded-2xl border bg-surface-overlay px-6 py-5 shadow-1 transition-[background-color,border-color,box-shadow]", {
+	variants: {
+		selected: {
+			true: "border-line-focus bg-surface-brand-subtle inset-ring-1 inset-ring-line-focus",
+			false: "border-line-subtle hover:border-line hover:shadow-2"
+		},
+		disabled: {
+			true: "border-line-subtle bg-surface shadow-none hover:border-line-subtle hover:shadow-none",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		selected: true,
+		disabled: true,
+		class: "border-line-subtle bg-surface shadow-none inset-ring-0 hover:border-line-subtle hover:shadow-none"
+	}],
+	defaultVariants: {
+		selected: false,
+		disabled: false
+	}
+});
+/**
+* Root surface for a single purchase / mortgage option. Composable — assemble
+* it from the header, grid, and footer parts so the actions can vary per use.
+*
+* `disabled` is propagated to descendants via a `data-disabled` group flag, so
+* the header/grid text mutes automatically. Footer buttons are supplied by the
+* consumer, so pass `disabled` to them too.
+*
+* <PurchaseOptionCard>
+*   <PurchaseOptionCardHeader>
+*     <PurchaseOptionCardMeta>
+*       <PurchaseOptionCardLabel>Mortgage Plan</PurchaseOptionCardLabel>
+*       <Badge variant="default" border={false} shape="round" size="sm">
+*         20% Interest Rate
+*       </Badge>
+*     </PurchaseOptionCardMeta>
+*     <div>
+*       <PurchaseOptionCardAmount>₦1,200,000</PurchaseOptionCardAmount>
+*       <PurchaseOptionCardCadence>Per Month</PurchaseOptionCardCadence>
+*     </div>
+*   </PurchaseOptionCardHeader>
+*   <PurchaseOptionCardGrid>
+*     <PurchaseOptionCardItem label="Initial Deposit">₦5,000,000</PurchaseOptionCardItem>
+*     <PurchaseOptionCardItem label="Max Loan Amount">₦80,000,000</PurchaseOptionCardItem>
+*     <PurchaseOptionCardItem label="Max Payment Period" wide>20 Years</PurchaseOptionCardItem>
+*   </PurchaseOptionCardGrid>
+*   <PurchaseOptionCardFooter>
+*     <Button variant="primary-outline" size="md" className="flex-1">View Details</Button>
+*     <Button variant="primary" size="md" className="flex-1">Apply Now</Button>
+*   </PurchaseOptionCardFooter>
+* </PurchaseOptionCard>
+*/
+function PurchaseOptionCard({ className, disabled = false, render, selected = false, ...props }) {
+	return useRender({
+		defaultTagName: "article",
+		props: mergeProps({
+			"data-disabled": disabled || void 0,
+			className: cn(purchaseOptionCardVariants({
+				selected: !disabled && selected,
+				disabled
+			}), className)
+		}, props),
+		render,
+		state: {
+			disabled,
+			selected,
+			slot: "purchase-option-card"
+		}
+	});
+}
+/**
+* Top section wrapper. Stacks the meta row and the headline figure, and draws
+* the divider that separates the header from the grid.
+*/
+function PurchaseOptionCardHeader({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-3.5 border-line border-b pb-3.5", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-header" }
+	});
+}
+/**
+* Row inside the header that balances the plan label against the interest-rate
+* badge (or any other trailing content).
+*/
+function PurchaseOptionCardMeta({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex items-start justify-between gap-4", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-meta" }
+	});
+}
+/** Eyebrow label naming the plan type. */
+function PurchaseOptionCardLabel({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn("text-gdt-capitalized font-semibold text-fg-secondary uppercase group-data-disabled/purchase-option-card:text-fg-caption-placeholder", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-label" }
+	});
+}
+/** Headline figure — the plan's payment amount. */
+function PurchaseOptionCardAmount({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-gdt-h3 font-extrabold text-fg-primary group-data-disabled/purchase-option-card:text-fg-caption-placeholder", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-amount" }
+	});
+}
+/** Supporting cadence line beneath the headline figure. */
+function PurchaseOptionCardCadence({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-gdt-sm leading-none text-fg-secondary group-data-disabled/purchase-option-card:text-fg-caption-placeholder", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-cadence" }
+	});
+}
+/** Two-column grid holding the option's detail items. */
+function PurchaseOptionCardGrid({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("grid grid-cols-2 gap-x-4 gap-y-6", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-grid" }
+	});
+}
+/**
+* A single labelled detail cell in the grid. The value is passed as `children`,
+* the caption via `label`. Use `wide` to span the full row.
+*/
+function PurchaseOptionCardItem({ children, className, label, render, wide = false, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-gdt-sm font-semibold text-fg-primary group-data-disabled/purchase-option-card:text-fg-caption-placeholder",
+				children
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-gdt-xs text-fg-secondary group-data-disabled/purchase-option-card:text-fg-caption-placeholder",
+				children: label
+			})] }),
+			className: cn("flex flex-col gap-1", wide && "col-span-2", className)
+		}, props),
+		render,
+		state: {
+			slot: "purchase-option-card-item",
+			wide
+		}
+	});
+}
+/**
+* Action row at the foot of the card. Wraps the consumer-supplied buttons and
+* draws the divider above them. Give each button `className="flex-1"` to share
+* the row evenly.
+*/
+function PurchaseOptionCardFooter({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex items-center gap-3 border-line border-t pt-3.5", className) }, props),
+		render,
+		state: { slot: "purchase-option-card-footer" }
+	});
+}
+//#endregion
+export { PurchaseOptionCard, PurchaseOptionCardAmount, PurchaseOptionCardCadence, PurchaseOptionCardFooter, PurchaseOptionCardGrid, PurchaseOptionCardHeader, PurchaseOptionCardItem, PurchaseOptionCardLabel, PurchaseOptionCardMeta, purchaseOptionCardVariants };

package/dist/radio-group.js

@@ -13,7 +13,7 @@ function RadioGroup({ className, ...props }) {
 		...props
 	});
 }
-const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]", { variants: { size: {
+const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]", { variants: { size: {
 	sm: "size-4 [--radio-dot-size:0.625rem]",
 	md: "size-5 [--radio-dot-size:0.75rem]",
 	lg: "size-6 [--radio-dot-size:0.875rem]"

package/dist/select.js

@@ -21,7 +21,7 @@ function Select({ multiple, children, size, ...props }) {
 		})
 	});
 }
-const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items-center justify-between rounded-full border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items-center justify-between rounded-full border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger data-[invalid=true]:focus-visible:border-line-danger data-[invalid=true]:focus-visible:inset-ring-line-danger data-[invalid=true]:data-focused:border-line-danger data-[invalid=true]:data-focused:inset-ring-line-danger data-[invalid=true]:data-popup-open:border-line-danger data-[invalid=true]:data-popup-open:inset-ring-line-danger *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: { size: {
 		sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
 		md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",