@giddaa-housing/ui 1.0.0 → 1.2.0

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/radar-chart.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { RadarChart as RadarChart$1, PolarAngleAxis, PolarGrid, Radar, PolarRadiusAxis } from 'recharts';
-import { ChartConfig } from './chart.js';
-import { ComponentSize } from './size-context.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";
+//#region src/radar-chart.d.ts
 /**
  * Radar charts are composable wrappers over the recharts polar primitives.
  * recharts 3 registers graphical items through context when they render, so —
@@ -40,25 +38,25 @@ import 'class-variance-authority';
  */
 declare const RADAR_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
 type RadarChartLayout = {
-    /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
-    height: number;
-    /** Category (angle) and value (radius) tick label font size. */
-    tickFontSize: number;
-    /** Series outline stroke width in px. */
-    strokeWidth: number;
-    /** Radius of the resting data-point dot. */
-    dotRadius: number;
-    /** Radius of the active (hover) dot. */
-    activeDotRadius: number;
+  /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
+  height: number;
+  /** Category (angle) and value (radius) tick label font size. */
+  tickFontSize: number;
+  /** Series outline stroke width in px. */
+  strokeWidth: number;
+  /** Radius of the resting data-point dot. */
+  dotRadius: number;
+  /** Radius of the active (hover) dot. */
+  activeDotRadius: number;
 };
 declare const RADAR_CHART_LAYOUT: Record<ComponentSize, RadarChartLayout>;
 type RadarChartProps = Omit<React.ComponentProps<typeof RadarChart$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?: ComponentSize;
-    /** Applied to the responsive plot box, e.g. to override its height. */
-    className?: string;
+  /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+  config?: ChartConfig;
+  /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+  size?: ComponentSize;
+  /** Applied to the responsive plot box, e.g. to override its height. */
+  className?: string;
 };
 /**
  * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
@@ -80,7 +78,7 @@ declare function RadarChartGrid(props: React.ComponentProps<typeof PolarGrid>):
  * replaces the default styling entirely.
  */
 declare function RadarChartAngleAxis({ size, tick, ...props }: React.ComponentProps<typeof PolarAngleAxis> & {
-    size?: ComponentSize;
+  size?: ComponentSize;
 }): React.JSX.Element;
 /**
  * Value scale along one spoke — recharts `PolarRadiusAxis`, muted and
@@ -90,13 +88,13 @@ declare function RadarChartAngleAxis({ size, tick, ...props }: React.ComponentPr
  * scale between two spokes with `angle`.
  */
 declare function RadarChartValueAxis({ size, tick, ...props }: React.ComponentProps<typeof PolarRadiusAxis> & {
-    size?: ComponentSize;
+  size?: ComponentSize;
 }): React.JSX.Element;
 type RadarChartSeriesProps = React.ComponentProps<typeof Radar> & {
-    /** Series colour for the outline, wash, and dots. Defaults to brand. */
-    color?: string;
-    /** Explicit mark scale; otherwise inherited from the chart's `size`. */
-    size?: ComponentSize;
+  /** Series colour for the outline, wash, and dots. Defaults to brand. */
+  color?: string;
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
 };
 /**
  * One data series — recharts `Radar` with the giddaa mark spec: a 2px outline,
@@ -106,5 +104,5 @@ type RadarChartSeriesProps = React.ComponentProps<typeof Radar> & {
  * `stroke`/`fill`/`dot` still win when passed directly.
  */
 declare function RadarChartSeries({ color, size, dot, activeDot, ...props }: RadarChartSeriesProps): React.JSX.Element;
-
-export { RADAR_CHART_LAYOUT, RADAR_CHART_PALETTE, RadarChart, RadarChartAngleAxis, RadarChartGrid, type RadarChartLayout, type RadarChartProps, RadarChartSeries, type RadarChartSeriesProps, RadarChartValueAxis };
+//#endregion
+export { RADAR_CHART_LAYOUT, RADAR_CHART_PALETTE, RadarChart, RadarChartAngleAxis, RadarChartGrid, type RadarChartLayout, type RadarChartProps, RadarChartSeries, type RadarChartSeriesProps, RadarChartValueAxis };

package/dist/radar-chart.js

@@ -1,147 +1,172 @@
 "use client";
-import {
-  ChartContainer
-} from "./chunk-NOFXVRWL.js";
-import {
-  SizeProvider,
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/radar-chart.tsx
-import {
-  PolarAngleAxis,
-  PolarGrid,
-  PolarRadiusAxis,
-  Radar,
-  RadarChart as RadarChartPrimitive
-} from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer } from "./chart.js";
 import { jsx } from "react/jsx-runtime";
-var RADAR_CHART_PALETTE = [
-  "var(--color-chart-1)",
-  "var(--color-chart-2)",
-  "var(--color-chart-3)"
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";
+//#region src/radar-chart.tsx
+/**
+* Radar charts are composable wrappers over the recharts polar primitives.
+* recharts 3 registers graphical items through context when they render, so —
+* unlike the recharts 2 era that shaped `bar-chart`/`line-chart` — the
+* primitives CAN be wrapped in our own components. Each wrapper bakes in the
+* giddaa defaults (tokens, size-scaled type, mark specs) and forwards every
+* recharts prop, so anything can be overridden in place or replaced with the
+* raw recharts element.
+*
+* Anatomy: `RadarChart` is the plot root (frame + responsive box + recharts
+* chart); compose the grid, axes, series, and the shared overlays from
+* `./chart` as children:
+*
+* @example
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Listing scorecard</ChartTitle>
+*     <ChartDescription>How this listing scores per criterion</ChartDescription>
+*   </ChartHeader>
+*   <RadarChart config={config} data={data}>
+*     <RadarChartGrid />
+*     <RadarChartAngleAxis dataKey="criterion" />
+*     <ChartTooltip content={<ChartTooltipContent />} />
+*     <RadarChartSeries dataKey="score" name="This listing" />
+*   </RadarChart>
+* </ChartCard>
+*/
+/**
+* Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens
+* (each theme's steps are validated against that theme's chart surface; see
+* `styles/giddaa.css`). Assign colours in this fixed order, never cycled: a
+* fourth series folds into "Other" or becomes a second chart.
+*/
+const RADAR_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
 ];
-var DEFAULT_SERIES_COLOR = RADAR_CHART_PALETTE[0];
-var RADAR_CHART_LAYOUT = {
-  sm: {
-    height: 180,
-    tickFontSize: 10,
-    strokeWidth: 2,
-    dotRadius: 2.5,
-    activeDotRadius: 4
-  },
-  md: {
-    height: 240,
-    tickFontSize: 11,
-    strokeWidth: 2,
-    dotRadius: 3,
-    activeDotRadius: 4.5
-  },
-  lg: {
-    height: 300,
-    tickFontSize: 12,
-    strokeWidth: 2,
-    dotRadius: 3.5,
-    activeDotRadius: 5
-  }
+const DEFAULT_SERIES_COLOR = RADAR_CHART_PALETTE[0];
+const RADAR_CHART_LAYOUT = {
+	sm: {
+		height: 180,
+		tickFontSize: 10,
+		strokeWidth: 2,
+		dotRadius: 2.5,
+		activeDotRadius: 4
+	},
+	md: {
+		height: 240,
+		tickFontSize: 11,
+		strokeWidth: 2,
+		dotRadius: 3,
+		activeDotRadius: 4.5
+	},
+	lg: {
+		height: 300,
+		tickFontSize: 12,
+		strokeWidth: 2,
+		dotRadius: 3.5,
+		activeDotRadius: 5
+	}
 };
-function RadarChart({
-  config = {},
-  size,
-  className,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = RADAR_CHART_LAYOUT[resolvedSize];
-  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      config,
-      className: cn("aspect-auto w-full", className),
-      style: { height: layout.height },
-      children: /* @__PURE__ */ jsx(RadarChartPrimitive, { accessibilityLayer: true, ...props, children })
-    }
-  ) });
+/**
+* Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+* responsive box) around the recharts `RadarChart` with a size-scaled height.
+* `size` also flows to the child primitives through `SizeProvider`. Extra
+* props reach the recharts chart (`outerRadius`, `startAngle`, `margin`, …).
+*/
+function RadarChart({ config = {}, size, className, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = RADAR_CHART_LAYOUT[resolvedSize];
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(RadarChart$1, {
+				accessibilityLayer: true,
+				...props,
+				children
+			})
+		})
+	});
 }
+/**
+* Polygon web behind the series — recharts `PolarGrid` on the recessive
+* `line` token (`line-subtle` matches the ChartCard surface in both themes,
+* so it would vanish). Pass `gridType="circle"` for rings or
+* `radialLines={false}` to keep only the concentric outlines.
+*/
 function RadarChartGrid(props) {
-  return /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--color-line)", ...props });
+	return /* @__PURE__ */ jsx(PolarGrid, {
+		stroke: "var(--color-line)",
+		...props
+	});
 }
-function RadarChartAngleAxis({
-  size,
-  tick,
-  ...props
-}) {
-  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
-  const defaultTick = {
-    fontSize: layout.tickFontSize,
-    fill: "var(--color-fg-secondary)"
-  };
-  return /* @__PURE__ */ jsx(PolarAngleAxis, { tickLine: false, tick: tick ?? defaultTick, ...props });
+/**
+* Category labels around the rim — recharts `PolarAngleAxis` with no tick
+* lines and size-scaled secondary-ink labels. Passing your own `tick`
+* replaces the default styling entirely.
+*/
+function RadarChartAngleAxis({ size, tick, ...props }) {
+	const defaultTick = {
+		fontSize: RADAR_CHART_LAYOUT[useComponentSize(size)].tickFontSize,
+		fill: "var(--color-fg-secondary)"
+	};
+	return /* @__PURE__ */ jsx(PolarAngleAxis, {
+		tickLine: false,
+		tick: tick ?? defaultTick,
+		...props
+	});
 }
-function RadarChartValueAxis({
-  size,
-  tick,
-  ...props
-}) {
-  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
-  const defaultTick = {
-    fontSize: layout.tickFontSize,
-    fill: "var(--color-fg-caption-placeholder)"
-  };
-  return /* @__PURE__ */ jsx(
-    PolarRadiusAxis,
-    {
-      axisLine: false,
-      tickLine: false,
-      tick: tick ?? defaultTick,
-      ...props
-    }
-  );
+/**
+* Value scale along one spoke — recharts `PolarRadiusAxis`, muted and
+* line-free. Radars are usually read comparatively, so this is opt-in;
+* include it (often with an explicit `domain={[0, max]}`) when the absolute
+* scale matters. If the tick labels collide with a category label, move the
+* scale between two spokes with `angle`.
+*/
+function RadarChartValueAxis({ size, tick, ...props }) {
+	const defaultTick = {
+		fontSize: RADAR_CHART_LAYOUT[useComponentSize(size)].tickFontSize,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(PolarRadiusAxis, {
+		axisLine: false,
+		tickLine: false,
+		tick: tick ?? defaultTick,
+		...props
+	});
 }
-function RadarChartSeries({
-  color = DEFAULT_SERIES_COLOR,
-  size,
-  dot,
-  activeDot,
-  ...props
-}) {
-  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
-  const defaultDot = {
-    r: layout.dotRadius,
-    fill: color,
-    fillOpacity: 1,
-    strokeWidth: 0
-  };
-  const defaultActiveDot = {
-    r: layout.activeDotRadius,
-    fill: color,
-    stroke: "var(--color-surface-raised)",
-    strokeWidth: 2
-  };
-  return /* @__PURE__ */ jsx(
-    Radar,
-    {
-      stroke: color,
-      fill: color,
-      fillOpacity: 0.15,
-      strokeWidth: layout.strokeWidth,
-      dot: dot ?? defaultDot,
-      activeDot: activeDot ?? defaultActiveDot,
-      ...props
-    }
-  );
+/**
+* One data series — recharts `Radar` with the giddaa mark spec: a 2px outline,
+* the series colour washed to 15% inside the shape (matches the line-chart
+* area wash), solid resting dots, and a hover dot ringed in `surface-raised`
+* so overlapping series stay separable. `color` drives all of them at once;
+* `stroke`/`fill`/`dot` still win when passed directly.
+*/
+function RadarChartSeries({ color = DEFAULT_SERIES_COLOR, size, dot, activeDot, ...props }) {
+	const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
+	const defaultDot = {
+		r: layout.dotRadius,
+		fill: color,
+		fillOpacity: 1,
+		strokeWidth: 0
+	};
+	const defaultActiveDot = {
+		r: layout.activeDotRadius,
+		fill: color,
+		stroke: "var(--color-surface-raised)",
+		strokeWidth: 2
+	};
+	return /* @__PURE__ */ jsx(Radar, {
+		stroke: color,
+		fill: color,
+		fillOpacity: .15,
+		strokeWidth: layout.strokeWidth,
+		dot: dot ?? defaultDot,
+		activeDot: activeDot ?? defaultActiveDot,
+		...props
+	});
 }
-export {
-  RADAR_CHART_LAYOUT,
-  RADAR_CHART_PALETTE,
-  RadarChart,
-  RadarChartAngleAxis,
-  RadarChartGrid,
-  RadarChartSeries,
-  RadarChartValueAxis
-};
-//# sourceMappingURL=radar-chart.js.map
+//#endregion
+export { RADAR_CHART_LAYOUT, RADAR_CHART_PALETTE, RadarChart, RadarChartAngleAxis, RadarChartGrid, RadarChartSeries, RadarChartValueAxis };

package/dist/radio-group.d.ts

@@ -1,16 +1,14 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { Radio } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
-import { VariantProps } from 'class-variance-authority';
-
-declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): React.JSX.Element;
+import { VariantProps } from "class-variance-authority";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/radio-group.d.ts
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): import("react").JSX.Element;
 declare const radioVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type RadioGroupItemSize = NonNullable<VariantProps<typeof radioVariants>["size"]>;
 type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
-    size?: RadioGroupItemSize;
+  size?: RadioGroupItemSize;
 };
 /**
  * Compose each radio item with the shared field primitives.
@@ -27,6 +25,6 @@ type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
  * </RadioGroup>
  * ```
  */
-declare function RadioGroupItem<Value = unknown>({ className, size, ...props }: RadioGroupItemProps<Value>): React.JSX.Element;
-
-export { RadioGroup, RadioGroupItem, radioVariants };
+declare function RadioGroupItem<Value = unknown>({ className, size, ...props }: RadioGroupItemProps<Value>): import("react").JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem, radioVariants };