@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/price-tag.js

@@ -1,18 +1,18 @@
 "use client";
 import { Check, ChevronDown } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Popover } from "@base-ui/react/popover";
 //#region src/price-tag.tsx
-const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-center justify-center rounded-4xl bg-surface-brand font-bold leading-none whitespace-nowrap text-fg-on-brand shadow-none transition-[background-color,box-shadow] outline-none data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-action-primary-hover data-[interactive=true]:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[interactive=true]:active:bg-action-primary-pressed", {
+const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-center justify-center bg-surface-brand font-bold whitespace-nowrap text-fg-on-brand shadow-none transition-[background-color,box-shadow] outline-none data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-action-primary-hover data-[interactive=true]:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[interactive=true]:active:bg-action-primary-pressed", {
 	variants: {
 		size: {
-			xxs: "min-h-7 gap-1 px-2.5 py-0.75 text-gdt-subtext [&>svg]:size-3",
-			xs: "min-h-7.5 gap-1 px-3 py-1 text-gdt-xs [&>svg]:size-3.5",
-			sm: "min-h-9 gap-1.5 px-4 py-1.5 text-gdt-sm [&>svg]:size-3.5",
-			md: "min-h-10.5 gap-1.5 px-5 py-2 text-gdt-md [&>svg]:size-4",
-			lg: "min-h-13 gap-2 px-7 py-3 text-gdt-lg [&>svg]:size-4.5"
+			xxs: "min-h-7 gap-1 rounded-lg px-2.5 py-0.75 text-gdt-subtext leading-none [&_svg]:size-3",
+			xs: "min-h-7.5 gap-1 rounded-lg px-3 py-1 text-gdt-xs leading-none [&_svg]:size-3.5",
+			sm: "min-h-9 gap-1.5 rounded-xl px-4 py-1.5 text-gdt-sm leading-none [&_svg]:size-3.5",
+			md: "min-h-10.5 gap-1.5 rounded-xl px-5 py-2 text-gdt-md leading-none [&_svg]:size-4",
+			lg: "min-h-13 gap-2 rounded-2xl px-7 py-3 text-gdt-lg leading-none [&_svg]:size-4.5"
 		},
 		/** Two lines sit top-aligned against the chevron rather than centred. */
 		hasDescription: {
@@ -30,13 +30,35 @@ const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-c
 		hasDescription: false
 	}
 });
-/** The description is quieter than the price, and quietest at the largest size. */
+/** The space between the price and its description, 4px through 12px. */
+const lineGapClassName = {
+	xxs: "gap-1",
+	xs: "gap-1",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-3"
+};
+/**
+* The least space the chevron will sit at from the price. It is usually pushed
+* further out than this, to the trailing edge of the wider description.
+*/
+const chevronGapClassName = {
+	xxs: "gap-2",
+	xs: "gap-2",
+	sm: "gap-3",
+	md: "gap-3",
+	lg: "gap-4"
+};
+/**
+* The description is quieter than the price, and quietest at the largest size.
+* `leading-none` trails the text size here for the same reason it does above.
+*/
 const descriptionSizeClassName = {
-	xxs: "text-gdt-subtext",
-	xs: "text-gdt-subtext",
-	sm: "text-gdt-subtext",
-	md: "text-gdt-subtext",
-	lg: "text-gdt-xs"
+	xxs: "text-gdt-subtext leading-none",
+	xs: "text-gdt-subtext leading-none",
+	sm: "text-gdt-subtext leading-none",
+	md: "text-gdt-subtext leading-none",
+	lg: "text-gdt-xs leading-none"
 };
 function getDisplayAmount({ amount, shortAmount, format }) {
 	return format === "shortened" && shortAmount ? shortAmount : amount;
@@ -84,7 +106,7 @@ function DefaultMenuOption({ option }) {
 	] });
 }
 /**
-* Pill-shaped price display, optionally a trigger for a currency dropdown.
+* Rounded-box price display, optionally a trigger for a currency dropdown.
 *
 * Display only: it prints `value` and `description` as given and never
 * composes a sentence, picks a format, or decides that a line is too small to
@@ -106,9 +128,18 @@ function PriceTag({ value, description, size = "md", currencies, selectedCurrenc
 	const legacyDescription = monthlyPayment && (size === "md" || size === "lg") ? `${monthlyPaymentLabel} ${monthlyPayment} monthly` : void 0;
 	const resolvedDescription = description ?? legacyDescription;
 	const pill = /* @__PURE__ */ jsxs("span", {
-		className: "flex min-w-0 flex-col gap-1",
-		children: [/* @__PURE__ */ jsx("span", { children: resolvedValue }), resolvedDescription ? /* @__PURE__ */ jsx("span", {
-			className: cn("font-medium leading-none opacity-90", descriptionSizeClassName[size]),
+		className: cn("flex min-w-0 flex-col text-start", lineGapClassName[size]),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("flex items-center justify-between", chevronGapClassName[size]),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children: resolvedValue
+			}), hasDropdown ? /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				className: "shrink-0 transition-transform group-data-popup-open/price-tag:rotate-180"
+			}) : null]
+		}), resolvedDescription ? /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium opacity-90", descriptionSizeClassName[size]),
 			children: resolvedDescription
 		}) : null]
 	});
@@ -127,16 +158,13 @@ function PriceTag({ value, description, size = "md", currencies, selectedCurrenc
 		open,
 		defaultOpen,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 			"data-slot": "price-tag",
 			"data-interactive": "true",
 			type,
 			className: pillClassName,
 			...props,
-			children: [pill, /* @__PURE__ */ jsx(ChevronDown, {
-				"aria-hidden": "true",
-				className: "transition-transform group-data-popup-open/price-tag:rotate-180"
-			})]
+			children: pill
 		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 			sideOffset: 10,
 			align: "start",

package/dist/progress.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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

@@ -1,4 +1,6 @@
-import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { n as ButtonLink, t as Button } from "./button-BS5KCibF.js";
+import { Carousel, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious } from "./carousel.js";
+import { ImageProps } from "./image.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -6,6 +8,10 @@ import * as React from "react";
 declare const propertyListingCardVariants: (props?: ({
   variant?: "default" | "elevated" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * @deprecated Render `PropertyListingCardImage` yourself, which takes `src`,
+ * `alt` and every other image prop directly. Removed in the next major.
+ */
 type PropertyListingImage = {
   id?: string;
   src?: string;
@@ -13,9 +19,69 @@ type PropertyListingImage = {
 };
 interface PropertyListingCardProps extends React.ComponentProps<"article">, VariantProps<typeof propertyListingCardVariants> {}
 declare function PropertyListingCard({ className, variant, ...props }: PropertyListingCardProps): React.JSX.Element;
+/**
+ * The media well: a positioned box the backdrop and the overlays share. The
+ * backdrop — one image, a carousel of them, or the placeholder — sits at
+ * `-z-10`; everything else stacks above it.
+ *
+ * Compose the backdrop as children and it stays yours to arrange:
+ *
+ * ```tsx
+ * <PropertyListingCardMedia>
+ *   <PropertyListingCardCarousel>
+ *     <CarouselContent>
+ *       {images.map((image) => (
+ *         <PropertyListingCardCarouselItem key={image.id}>
+ *           <PropertyListingCardImage src={image.src} alt={image.alt} loading="lazy" />
+ *         </PropertyListingCardCarouselItem>
+ *       ))}
+ *     </CarouselContent>
+ *     <PropertyListingCardCarouselIndicator className="bottom-20" />
+ *   </PropertyListingCardCarousel>
+ *   <PropertyListingCardMediaTop>…</PropertyListingCardMediaTop>
+ * </PropertyListingCardMedia>
+ * ```
+ */
 declare function PropertyListingCardMedia({ className, images, children, ...props }: React.ComponentProps<"div"> & {
+  /**
+   * @deprecated Compose the backdrop from `PropertyListingCardCarousel`,
+   * `PropertyListingCardImage` and `PropertyListingCardImagePlaceholder`
+   * instead. Building it from a list left no way to lazy-load a photo, move
+   * the indicator off the options bar, or hand the images to a framework's
+   * own image component. Removed in the next major.
+   */
   images?: PropertyListingImage[];
 }): React.JSX.Element;
+/**
+ * The carousel, sized to fill the media well and sunk behind the overlays.
+ * Fill it with `CarouselContent` from `@giddaa-housing/ui/carousel` — every
+ * carousel part works here, including `CarouselPrevious`/`CarouselNext`.
+ */
+declare function PropertyListingCardCarousel({ className, opts, ...props }: React.ComponentProps<typeof Carousel>): React.JSX.Element;
+/** Previous-photo control, revealed when the carousel is hovered or focused. */
+declare function PropertyListingCardCarouselPrevious({ className, ...props }: React.ComponentProps<typeof CarouselPrevious>): React.JSX.Element;
+/** Next-photo control, revealed when the carousel is hovered or focused. */
+declare function PropertyListingCardCarouselNext({ className, ...props }: React.ComponentProps<typeof CarouselNext>): React.JSX.Element;
+declare function PropertyListingCardCarouselItem({ className, ...props }: React.ComponentProps<typeof CarouselItem>): React.JSX.Element;
+/**
+ * The indicator, lifted clear of the options bar by default. That bar is
+ * `min-h-9.5` and the media may carry a price tag above it, so the offset is
+ * a starting point rather than a rule — `className="bottom-20"` or any other
+ * `bottom-*` moves it.
+ */
+declare function PropertyListingCardCarouselIndicator({ className, size, ...props }: React.ComponentProps<typeof CarouselIndicator>): React.JSX.Element;
+/**
+ * A listing photo. Takes everything an `<img>` does — `loading="lazy"`,
+ * `fetchPriority`, `sizes`, `srcSet` — and `render` swaps the element for a
+ * framework's image component. `ImageProvider` does the same for every image
+ * in the tree at once.
+ */
+declare function PropertyListingCardImage({ image, alt, src, className, ...props }: ImageProps & {
+  /** @deprecated Pass `src` and `alt` directly. Removed in the next major. */
+  image?: PropertyListingImage;
+}): React.JSX.Element;
+/** Stands in for a listing with no photo, filling the well behind the overlays. */
+declare function PropertyListingCardImagePlaceholder({ className, children, ...props }: React.ComponentProps<"div">): 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>>;
 declare function PropertyListingCardDetails({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -26,4 +92,4 @@ declare function PropertyListingCardActions({ className, ...props }: React.Compo
 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;
 //#endregion
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardCarouselNext, PropertyListingCardCarouselPrevious, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };

package/dist/property-listing-card.js

@@ -1,7 +1,8 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button, ButtonLink } from "./button.js";
-import { Carousel, CarouselContent, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { Carousel, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious } from "./carousel.js";
+import { Image } from "./image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -20,39 +21,124 @@ function PropertyListingCard({ className, variant, ...props }) {
 		...props
 	});
 }
-function PropertyListingCardMedia({ className, images = [], children, ...props }) {
-	const hasMultipleImages = images.length > 1;
+/**
+* The media well: a positioned box the backdrop and the overlays share. The
+* backdrop — one image, a carousel of them, or the placeholder — sits at
+* `-z-10`; everything else stacks above it.
+*
+* Compose the backdrop as children and it stays yours to arrange:
+*
+* ```tsx
+* <PropertyListingCardMedia>
+*   <PropertyListingCardCarousel>
+*     <CarouselContent>
+*       {images.map((image) => (
+*         <PropertyListingCardCarouselItem key={image.id}>
+*           <PropertyListingCardImage src={image.src} alt={image.alt} loading="lazy" />
+*         </PropertyListingCardCarouselItem>
+*       ))}
+*     </CarouselContent>
+*     <PropertyListingCardCarouselIndicator className="bottom-20" />
+*   </PropertyListingCardCarousel>
+*   <PropertyListingCardMediaTop>…</PropertyListingCardMediaTop>
+* </PropertyListingCardMedia>
+* ```
+*/
+function PropertyListingCardMedia({ className, images, children, ...props }) {
 	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",
+		children: [images ? /* @__PURE__ */ jsx(PropertyListingCardMediaBackdrop, { images }) : null, children]
+	});
+}
+/** The backdrop the deprecated `images` prop builds, unchanged. */
+function PropertyListingCardMediaBackdrop({ images }) {
+	if (images.length > 1) return /* @__PURE__ */ jsxs(PropertyListingCardCarousel, { children: [
+		/* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(PropertyListingCardCarouselItem, { children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage }) }, carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index)) }),
+		/* @__PURE__ */ jsx(PropertyListingCardCarouselIndicator, {}),
+		/* @__PURE__ */ jsx(PropertyListingCardCarouselPrevious, {}),
+		/* @__PURE__ */ jsx(PropertyListingCardCarouselNext, {})
+	] });
+	if (images[0]?.src) return /* @__PURE__ */ jsx(PropertyListingCardImage, {
+		image: images[0],
+		className: "absolute inset-0 -z-10"
+	});
+	return /* @__PURE__ */ jsx(PropertyListingCardImagePlaceholder, {});
+}
+/**
+* The carousel, sized to fill the media well and sunk behind the overlays.
+* Fill it with `CarouselContent` from `@giddaa-housing/ui/carousel` — every
+* carousel part works here, including `CarouselPrevious`/`CarouselNext`.
+*/
+function PropertyListingCardCarousel({ className, opts, ...props }) {
+	return /* @__PURE__ */ jsx(Carousel, {
+		"data-slot": "property-listing-card-carousel",
+		imageSize: "full",
+		opts,
+		className: cn("group/property-listing-carousel absolute inset-0 -z-10 size-full rounded-none bg-surface", className),
+		...props
+	});
+}
+const propertyListingCardCarouselControlClassName = "size-9 border-white/35 bg-black/50 text-white opacity-0 shadow-[0_4px_16px_rgb(0_0_0/0.28)] backdrop-blur-md transition-[background-color,opacity,scale] hover:scale-105 hover:bg-black/70 group-hover/property-listing-carousel:opacity-100 group-focus-within/property-listing-carousel:opacity-100 focus-visible:opacity-100 focus-visible:shadow-[0_0_0_2px_var(--color-line-focus),0_4px_16px_rgb(0_0_0/0.28)] active:hover:scale-[0.97] disabled:opacity-0 group-hover/property-listing-carousel:disabled:opacity-40 group-focus-within/property-listing-carousel:disabled:opacity-40 disabled:hover:scale-100 [&_svg]:mx-auto [&_svg]:size-[18px]";
+/** Previous-photo control, revealed when the carousel is hovered or focused. */
+function PropertyListingCardCarouselPrevious({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselPrevious, {
+		className: cn(propertyListingCardCarouselControlClassName, "left-3", className),
+		...props
+	});
+}
+/** Next-photo control, revealed when the carousel is hovered or focused. */
+function PropertyListingCardCarouselNext({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselNext, {
+		className: cn(propertyListingCardCarouselControlClassName, "right-3", className),
+		...props
+	});
+}
+function PropertyListingCardCarouselItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselItem, {
+		"data-slot": "property-listing-card-carousel-item",
+		className: cn("relative h-full", className),
+		...props
+	});
+}
+/**
+* The indicator, lifted clear of the options bar by default. That bar is
+* `min-h-9.5` and the media may carry a price tag above it, so the offset is
+* a starting point rather than a rule — `className="bottom-20"` or any other
+* `bottom-*` moves it.
+*/
+function PropertyListingCardCarouselIndicator({ className, size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(CarouselIndicator, {
+		"data-slot": "property-listing-card-carousel-indicator",
+		size,
+		className: cn("bottom-16", className),
+		...props
+	});
+}
+/**
+* A listing photo. Takes everything an `<img>` does — `loading="lazy"`,
+* `fetchPriority`, `sizes`, `srcSet` — and `render` swaps the element for a
+* framework's image component. `ImageProvider` does the same for every image
+* in the tree at once.
+*/
+function PropertyListingCardImage({ image, alt, src, className, ...props }) {
+	return /* @__PURE__ */ jsx(Image, {
+		slot: "property-listing-card-image",
+		src: src ?? image?.src,
+		alt: alt ?? image?.alt ?? "Property image",
 		className: cn("size-full object-cover", className),
 		...props
 	});
 }
+/** Stands in for a listing with no photo, filling the well behind the overlays. */
+function PropertyListingCardImagePlaceholder({ className, children = "Property Image", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "property-listing-card-image-placeholder",
+		className: cn("absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder", className),
+		...props,
+		children
+	});
+}
 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),
@@ -115,4 +201,4 @@ function PropertyListingCardActionButtonLink({ className, ...props }) {
 	});
 }
 //#endregion
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardCarouselNext, PropertyListingCardCarouselPrevious, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };

package/dist/purchase-option-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.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";

package/dist/radar-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";

package/dist/radar-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { ChartContainer } from "./chart.js";
 import { jsx } from "react/jsx-runtime";

package/dist/radio-group.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/radio-group.d.ts
@@ -6,7 +6,7 @@ declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): import
 declare const radioVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type RadioGroupItemSize = NonNullable<VariantProps<typeof radioVariants>["size"]>;
+type RadioGroupItemSize = ComponentSizeValue;
 type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
   size?: RadioGroupItemSize;
 };

package/dist/radio-group.js

@@ -1,11 +1,16 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } 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.tsx
+const radioSizeVariants = {
+	sm: "size-4 [--radio-dot-size:0.625rem]",
+	md: "size-5 [--radio-dot-size:0.75rem]",
+	lg: "size-6 [--radio-dot-size:0.875rem]"
+};
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
@@ -13,11 +18,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,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 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 data-disabled:active:scale-100 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]"
-} } });
+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,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 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 data-disabled:active:scale-100", { variants: { size: radioSizeVariants } });
 /**
 * Compose each radio item with the shared field primitives.
 *
@@ -34,11 +35,11 @@ const radioVariants = cva("group/radio-group-item peer relative flex aspect-squa
 * ```
 */
 function RadioGroupItem({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveRadioSizes);
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
-		"data-size": resolvedSize,
-		className: cn(radioVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(radioVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Radio.Indicator, {
 			"data-slot": "radio-group-indicator",
@@ -47,5 +48,18 @@ function RadioGroupItem({ className, size, ...props }) {
 		})
 	});
 }
+const responsiveRadioSizes = {
+	base: radioSizeVariants,
+	md: {
+		sm: "md:size-4 md:[--radio-dot-size:0.625rem]",
+		md: "md:size-5 md:[--radio-dot-size:0.75rem]",
+		lg: "md:size-6 md:[--radio-dot-size:0.875rem]"
+	},
+	lg: {
+		sm: "lg:size-4 lg:[--radio-dot-size:0.625rem]",
+		md: "lg:size-5 lg:[--radio-dot-size:0.75rem]",
+		lg: "lg:size-6 lg:[--radio-dot-size:0.875rem]"
+	}
+};
 //#endregion
 export { RadioGroup, RadioGroupItem, radioVariants };

package/dist/review-block.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.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";

package/dist/rich-text-editor.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 //#region src/rich-text-editor.d.ts
 interface RichTextEditorProps {

package/dist/rich-text-editor.js

@@ -1,6 +1,6 @@
 "use client";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Baseline, Bold, ChevronDown, Code2, Image as Image$1, Italic, Link2, List, ListOrdered, Quote, Redo2, Underline, Undo2 } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";

package/dist/scatter-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { CartesianGrid, Scatter, ScatterChart as ScatterChart$1, XAxis, YAxis } from "recharts";

package/dist/scatter-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { ChartContainer, cartesianAxisProps } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/scroll-spy.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { TabsListVariant } from "./tabs.js";
 import * as React from "react";
 //#region src/scroll-spy.d.ts
@@ -11,6 +11,12 @@ import * as React from "react";
  * or `Popover` works without threading anything down by hand. `registerSection`
  * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
  */
+declare function useOptionalScrollSpy(): {
+  activeValue: string | undefined;
+  getSectionId: (value: string) => string;
+  getTriggerId: (value: string) => string;
+  scrollToSection: (value: string) => void;
+} | null;
 declare function useScrollSpy(): {
   activeValue: string | undefined;
   getSectionId: (value: string) => string;
@@ -73,4 +79,4 @@ type ScrollSpyContentProps = Omit<React.ComponentProps<"section">, "value"> & {
 };
 declare function ScrollSpyContent({ className, value, style, tabIndex, ...props }: ScrollSpyContentProps): React.JSX.Element;
 //#endregion
-export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/scroll-spy.js

@@ -1,8 +1,8 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
-import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName } from "./tabs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
@@ -49,19 +49,19 @@ function useScrollSpyContext(part) {
 * or `Popover` works without threading anything down by hand. `registerSection`
 * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
 */
+function useOptionalScrollSpy() {
+	const context = React.useContext(ScrollSpyContext);
+	return React.useMemo(() => context ? {
+		activeValue: context.activeValue,
+		getSectionId: context.getSectionId,
+		getTriggerId: context.getTriggerId,
+		scrollToSection: context.scrollToSection
+	} : null, [context]);
+}
 function useScrollSpy() {
-	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("useScrollSpy");
-	return React.useMemo(() => ({
-		activeValue,
-		getSectionId,
-		getTriggerId,
-		scrollToSection
-	}), [
-		activeValue,
-		getSectionId,
-		getTriggerId,
-		scrollToSection
-	]);
+	const value = useOptionalScrollSpy();
+	if (!value) throw new Error("`useScrollSpy` must be used inside `ScrollSpy`.");
+	return value;
 }
 /**
 * `Tabs` for a page that shows everything at once: every section stays mounted
@@ -315,4 +315,4 @@ function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props })
 	});
 }
 //#endregion
-export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/search-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { Search, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";