@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/progress.js

@@ -1,26 +1,171 @@
 "use client";
-import {
-  CircularProgress,
-  Progress,
-  ProgressCaption,
-  ProgressIndicator,
-  ProgressLabel,
-  ProgressTrack,
-  ProgressValue,
-  circularProgressVariants,
-  progressVariants
-} from "./chunk-322YCNVL.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  CircularProgress,
-  Progress,
-  ProgressCaption,
-  ProgressIndicator,
-  ProgressLabel,
-  ProgressTrack,
-  ProgressValue,
-  circularProgressVariants,
-  progressVariants
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/progress.tsx
+const progressVariants = cva("group/progress flex w-full flex-wrap items-center", {
+	variants: { size: {
+		sm: "gap-x-2 gap-y-1.5",
+		md: "gap-x-3 gap-y-2",
+		lg: "gap-x-4 gap-y-2.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const circularProgressVariants = cva("relative grid place-items-center text-fg-on-brand", {
+	variants: { size: {
+		sm: "text-[9px]",
+		md: "text-[10px]",
+		lg: "text-gdt-xs"
+	} },
+	defaultVariants: { size: "md" }
+});
+const circularProgressLabelVariants = cva("relative z-10 font-medium tabular-nums leading-none", {
+	variants: {
+		size: {
+			sm: "text-[9px]",
+			md: "text-[10px]",
+			lg: "text-gdt-xs"
+		},
+		overlay: {
+			true: "grid place-items-center rounded-full bg-black/65 text-white shadow-sm backdrop-blur-[1px]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		overlay: false
+	}
+});
+const circularProgressSizes = {
+	sm: {
+		pixelSize: 40,
+		strokeWidth: 3
+	},
+	md: {
+		pixelSize: 48,
+		strokeWidth: 4
+	},
+	lg: {
+		pixelSize: 56,
+		strokeWidth: 5
+	}
 };
-//# sourceMappingURL=progress.js.map
+function Progress({ className, children, value, size, disabled = false, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const hasCustomTrack = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ProgressTrack);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsxs(Progress$1.Root, {
+			value,
+			"aria-disabled": disabled || void 0,
+			"data-disabled": disabled,
+			"data-size": resolvedSize,
+			"data-slot": "progress",
+			className: cn(progressVariants({ size: resolvedSize }), className),
+			...props,
+			children: [children, !hasCustomTrack && /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
+		})
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		className: cn("order-3 relative flex basis-full items-center overflow-hidden rounded-full bg-surface-raised", "group-data-[size=sm]/progress:h-1 group-data-[size=md]/progress:h-1.5 group-data-[size=lg]/progress:h-2", className),
+		"data-slot": "progress-track",
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		"data-slot": "progress-indicator",
+		className: cn("h-full rounded-full bg-action-primary transition-[width,transform,background-color] duration-300 ease-out group-data-[disabled=true]/progress:bg-line-strong", className),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		className: cn("order-1 min-w-0 text-fg-primary font-semibold leading-snug group-data-[disabled=true]/progress:text-fg-caption-placeholder", "group-data-[size=sm]/progress:text-gdt-xs group-data-[size=md]/progress:text-gdt-sm group-data-[size=lg]/progress:text-gdt-md", className),
+		"data-slot": "progress-label",
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		className: cn("order-2 ml-auto shrink-0 tabular-nums text-fg-secondary leading-snug group-data-[disabled=true]/progress:text-fg-caption-placeholder", "group-data-[size=sm]/progress:text-gdt-xs group-data-[size=md]/progress:text-gdt-sm group-data-[size=lg]/progress:text-gdt-md", className),
+		"data-slot": "progress-value",
+		...props
+	});
+}
+function ProgressCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("order-4 basis-full text-fg-secondary leading-snug group-data-[disabled=true]/progress:text-fg-caption-placeholder", "group-data-[size=sm]/progress:text-gdt-subtext group-data-[size=md]/progress:text-gdt-xs group-data-[size=lg]/progress:text-gdt-sm", className),
+		"data-slot": "progress-caption",
+		...props
+	});
+}
+function CircularProgress({ className, style, value, size, children, labelOverlay = false, pixelSize, strokeWidth, strokeLinecap = "round", ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const progress = Math.min(100, Math.max(0, Math.round(Number.isFinite(value) ? value : 0)));
+	const resolvedDimensions = circularProgressSizes[resolvedSize];
+	const resolvedPixelSize = pixelSize ?? resolvedDimensions.pixelSize;
+	const resolvedStrokeWidth = strokeWidth ?? resolvedDimensions.strokeWidth;
+	const radius = (resolvedPixelSize - resolvedStrokeWidth) / 2;
+	const labelSize = resolvedPixelSize - resolvedStrokeWidth * 3;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = circumference - progress / 100 * circumference;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": progress,
+		"aria-valuetext": `${progress}%`,
+		"data-slot": "circular-progress",
+		className: cn(circularProgressVariants({ size: resolvedSize }), className),
+		style: {
+			width: resolvedPixelSize,
+			height: resolvedPixelSize,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 -rotate-90 transform",
+			focusable: "false",
+			width: resolvedPixelSize,
+			height: resolvedPixelSize,
+			viewBox: `0 0 ${resolvedPixelSize} ${resolvedPixelSize}`,
+			fill: "none",
+			stroke: "currentColor",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "text-line",
+				strokeWidth: resolvedStrokeWidth,
+				cx: resolvedPixelSize / 2,
+				cy: resolvedPixelSize / 2,
+				r: radius
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "text-action-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+				strokeWidth: resolvedStrokeWidth,
+				strokeLinecap,
+				strokeDasharray: circumference,
+				strokeDashoffset,
+				cx: resolvedPixelSize / 2,
+				cy: resolvedPixelSize / 2,
+				r: radius
+			})]
+		}), children ?? /* @__PURE__ */ jsxs("span", {
+			className: cn(circularProgressLabelVariants({
+				size: resolvedSize,
+				overlay: labelOverlay
+			})),
+			style: labelOverlay ? {
+				width: labelSize,
+				height: labelSize
+			} : void 0,
+			children: [progress, "%"]
+		})]
+	});
+}
+//#endregion
+export { CircularProgress, Progress, ProgressCaption, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, circularProgressVariants, progressVariants };

package/dist/property-listing-card.d.ts

@@ -1,23 +1,20 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Button, ButtonLink } from './button.js';
-import '@base-ui/react/button';
-
+import { n as ButtonLink, t as Button } from "./button-BZIeyUw6.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/property-listing-card.d.ts
 declare const propertyListingCardVariants: (props?: ({
-    variant?: "default" | "elevated" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "default" | "elevated" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type PropertyListingImage = {
-    id?: string;
-    src?: string;
-    alt?: string;
+  id?: string;
+  src?: string;
+  alt?: string;
 };
-interface PropertyListingCardProps extends React.ComponentProps<"article">, VariantProps<typeof propertyListingCardVariants> {
-}
+interface PropertyListingCardProps extends React.ComponentProps<"article">, VariantProps<typeof propertyListingCardVariants> {}
 declare function PropertyListingCard({ className, variant, ...props }: PropertyListingCardProps): React.JSX.Element;
 declare function PropertyListingCardMedia({ className, images, children, ...props }: React.ComponentProps<"div"> & {
-    images?: PropertyListingImage[];
+  images?: PropertyListingImage[];
 }): React.JSX.Element;
 declare function PropertyListingCardMediaTop({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PropertyListingCardOptionsBar({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -28,5 +25,5 @@ declare function PropertyListingCardBadges({ className, ...props }: React.Compon
 declare function PropertyListingCardActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PropertyListingCardActionButton({ className, type, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
 declare function PropertyListingCardActionButtonLink({ className, ...props }: React.ComponentProps<typeof ButtonLink>): React.JSX.Element;
-
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };
+//#endregion
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };

package/dist/property-listing-card.js

@@ -1,235 +1,117 @@
-import {
-  Button,
-  ButtonLink
-} from "./chunk-B4H6RNDH.js";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem
-} from "./chunk-FZDSVMKY.js";
-import "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/property-listing-card.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button, ButtonLink } from "./button.js";
+import { Carousel, CarouselContent, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { 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";
-import { jsx, jsxs } from "react/jsx-runtime";
-var propertyListingCardVariants = cva(
-  "relative flex w-full min-w-0 flex-col overflow-hidden text-fg-primary",
-  {
-    variants: {
-      variant: {
-        default: "rounded-none border-0 shadow-none",
-        elevated: "rounded-2xl bg-surface-overlay border border-line-subtle shadow-1"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function PropertyListingCard({
-  className,
-  variant,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "article",
-    {
-      className: cn(propertyListingCardVariants({ variant }), className),
-      ...props
-    }
-  );
+//#region src/property-listing-card.tsx
+const propertyListingCardVariants = cva("relative flex w-full min-w-0 flex-col overflow-hidden text-fg-primary", {
+	variants: { variant: {
+		default: "rounded-none border-0 shadow-none",
+		elevated: "rounded-2xl bg-surface-overlay border border-line-subtle shadow-1"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function PropertyListingCard({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("article", {
+		className: cn(propertyListingCardVariants({ variant }), className),
+		...props
+	});
 }
-function PropertyListingCardMedia({
-  className,
-  images = [],
-  children,
-  ...props
-}) {
-  const hasMultipleImages = images.length > 1;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "relative isolate min-h-70 overflow-hidden rounded-t-2xl bg-surface text-fg-primary",
-        className
-      ),
-      ...props,
-      children: [
-        hasMultipleImages ? /* @__PURE__ */ jsxs(
-          Carousel,
-          {
-            imageSize: "full",
-            opts: { loop: true },
-            className: "absolute inset-0 -z-10 size-full rounded-none bg-surface",
-            children: [
-              /* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(
-                CarouselItem,
-                {
-                  className: "relative h-full",
-                  children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage })
-                },
-                carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index
-              )) }),
-              /* @__PURE__ */ jsx(CarouselIndicator, { size: "sm", className: "bottom-16" })
-            ]
-          }
-        ) : images[0]?.src ? /* @__PURE__ */ jsx(
-          PropertyListingCardImage,
-          {
-            image: images[0],
-            className: "absolute inset-0 -z-10"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder", children: "Property Image" }),
-        children
-      ]
-    }
-  );
+function PropertyListingCardMedia({ className, images = [], children, ...props }) {
+	const hasMultipleImages = images.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative isolate min-h-70 overflow-hidden rounded-t-2xl bg-surface text-fg-primary", className),
+		...props,
+		children: [hasMultipleImages ? /* @__PURE__ */ jsxs(Carousel, {
+			imageSize: "full",
+			opts: { loop: true },
+			className: "absolute inset-0 -z-10 size-full rounded-none bg-surface",
+			children: [/* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(CarouselItem, {
+				className: "relative h-full",
+				children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage })
+			}, carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index)) }), /* @__PURE__ */ jsx(CarouselIndicator, {
+				size: "sm",
+				className: "bottom-16"
+			})]
+		}) : images[0]?.src ? /* @__PURE__ */ jsx(PropertyListingCardImage, {
+			image: images[0],
+			className: "absolute inset-0 -z-10"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder",
+			children: "Property Image"
+		}), children]
+	});
 }
-function PropertyListingCardImage({
-  image,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: image.src,
-      alt: image.alt ?? "Property image",
-      className: cn("size-full object-cover", className),
-      ...props
-    }
-  );
+function PropertyListingCardImage({ image, className, ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		src: image.src,
+		alt: image.alt ?? "Property image",
+		className: cn("size-full object-cover", className),
+		...props
+	});
 }
-function PropertyListingCardMediaTop({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "absolute inset-x-2 top-2 z-10 flex items-start justify-between gap-3",
-        className
-      ),
-      ...props
-    }
-  );
+function PropertyListingCardMediaTop({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute inset-x-2 top-2 z-10 flex items-start justify-between gap-3", className),
+		...props
+	});
 }
-function PropertyListingCardOptionsBar({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "a",
-    props: mergeProps(
-      {
-        className: cn(
-          "absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "property-listing-card-options-bar"
-    }
-  });
+function PropertyListingCardOptionsBar({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus", className) }, props),
+		render,
+		state: { slot: "property-listing-card-options-bar" }
+	});
 }
-function PropertyListingCardDetails({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 pt-4", className), ...props });
+function PropertyListingCardDetails({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-4 pt-4", className),
+		...props
+	});
 }
-function PropertyListingCardTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "h3",
-    {
-      className: cn("text-gdt-md font-bold text-fg-primary", className),
-      ...props
-    }
-  );
+function PropertyListingCardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("text-gdt-md font-bold text-fg-primary", className),
+		...props
+	});
 }
-function PropertyListingCardOverview({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("p", { className: cn("text-gdt-sm text-fg-secondary", className), ...props });
+function PropertyListingCardOverview({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
-function PropertyListingCardBadges({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-3", className), ...props });
+function PropertyListingCardBadges({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap gap-3", className),
+		...props
+	});
 }
-function PropertyListingCardActions({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-5 border-line-subtle border-t pt-4 mt-4",
-        className
-      ),
-      ...props
-    }
-  );
+function PropertyListingCardActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-5 border-line-subtle border-t pt-4 mt-4", className),
+		...props
+	});
 }
-function PropertyListingCardActionButton({
-  className,
-  type = "button",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      type,
-      variant: "tertiary",
-      size: "md",
-      className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
-      ...props
-    }
-  );
+function PropertyListingCardActionButton({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		variant: "tertiary",
+		size: "md",
+		className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
+		...props
+	});
 }
-function PropertyListingCardActionButtonLink({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ButtonLink,
-    {
-      variant: "tertiary",
-      size: "md",
-      className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
-      ...props
-    }
-  );
+function PropertyListingCardActionButtonLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ButtonLink, {
+		variant: "tertiary",
+		size: "md",
+		className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
+		...props
+	});
 }
-export {
-  PropertyListingCard,
-  PropertyListingCardActionButton,
-  PropertyListingCardActionButtonLink,
-  PropertyListingCardActions,
-  PropertyListingCardBadges,
-  PropertyListingCardDetails,
-  PropertyListingCardMedia,
-  PropertyListingCardMediaTop,
-  PropertyListingCardOptionsBar,
-  PropertyListingCardOverview,
-  PropertyListingCardTitle,
-  propertyListingCardVariants
-};
-//# sourceMappingURL=property-listing-card.js.map
+//#endregion
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };

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