@giddaa-housing/ui 1.1.0 → 2.0.0

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",

package/dist/sheet.d.ts

@@ -8,6 +8,7 @@ declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element
 type SheetContentProps = Dialog.Popup.Props & {
   side?: SheetSide;
   showCloseButton?: boolean;
+  showOverlay?: boolean;
 } & ({
   side: "top" | "bottom";
   size?: "fullscreen";
@@ -15,10 +16,11 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: "left" | "right";
   size?: "sm" | "md" | "lg";
 });
-declare function SheetContent({ className, children, side, size, showCloseButton, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, ...props }: SheetContentProps): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
 declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/sheet.js

@@ -2,16 +2,17 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
+import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/sheet.tsx
 function Sheet({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "sheet",
 		...props
-	});
+	}) });
 }
 function SheetTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
@@ -32,13 +33,16 @@ function SheetPortal({ ...props }) {
 	});
 }
 function SheetOverlay({ className, ...props }) {
+	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		forceRender: true,
 		"data-slot": "sheet-overlay",
-		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl", className),
+		"data-nested": nested || void 0,
+		className: cn("fixed inset-0 z-50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
 		...props
 	});
 }
-const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)", {
+const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", {
 	variants: { size: {
 		sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
 		md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
@@ -47,9 +51,9 @@ const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col g
 	} },
 	defaultVariants: { size: "md" }
 });
-function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, ...props }) {
+function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, ...props }) {
 	const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
-	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
 		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "sheet-content",
@@ -61,8 +65,8 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 				"data-slot": "sheet-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
-					className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
-					size: "icon-sm",
+					className: "absolute z-10 size-7 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[nested-dialog-open]/sheet-content:hidden group-data-[side=bottom]/sheet-content:-top-9 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-9 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-9 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-9 group-data-[side=right]/sheet-content:top-4",
+					size: "icon-xs",
 					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: "Close"
@@ -75,14 +79,21 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 function SheetHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2", className),
+		className: cn("flex flex-col gap-1 px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle", className),
+		...props
+	});
+}
+function SheetBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: cn("flex-1 overflow-y-auto px-(--sheet-padding-x) py-4", className),
 		...props
 	});
 }
 function SheetFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-footer",
-		className: cn("mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4", className),
+		className: cn("mt-auto flex items-center justify-end gap-2 border-t border-line-subtle px-(--sheet-padding-x) py-4", className),
 		...props
 	});
 }
@@ -101,4 +112,4 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };