@giddaa-housing/ui 3.3.0 → 3.5.0

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

@@ -1,4 +1,6 @@
 import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { Carousel, CarouselIndicator, CarouselItem } 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,65 @@ 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;
+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 +88,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, 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 { 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,107 @@ 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, {})] });
+	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: {
+			loop: true,
+			...opts
+		},
+		className: cn("absolute inset-0 -z-10 size-full rounded-none bg-surface", 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 +184,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, 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.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.js

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

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.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.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

@@ -2,6 +2,21 @@ import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { TabsListVariant } from "./tabs.js";
 import * as React from "react";
 //#region src/scroll-spy.d.ts
+/**
+ * Read and drive the spy from anywhere inside a `ScrollSpy` — an overflow
+ * "More" menu, a floating progress rail, a heading that echoes the section
+ * being read.
+ *
+ * Context reaches through portals, so a consumer inside an open `DropdownMenu`
+ * or `Popover` works without threading anything down by hand. `registerSection`
+ * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
+ */
+declare function useScrollSpy(): {
+  activeValue: string | undefined;
+  getSectionId: (value: string) => string;
+  getTriggerId: (value: string) => string;
+  scrollToSection: (value: string) => void;
+};
 type ScrollSpyProps = Omit<React.ComponentProps<"div">, "onChange"> & {
   orientation?: "horizontal" | "vertical";
   /** Controlled active section. */
@@ -58,4 +73,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 };
+export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, 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";
@@ -37,10 +37,33 @@ function getScrollport(element) {
 }
 function useScrollSpyContext(part) {
 	const context = React.useContext(ScrollSpyContext);
-	if (!context) throw new Error(`\`${part}\` must be rendered inside \`ScrollSpy\`.`);
+	if (!context) throw new Error(`\`${part}\` must be used inside \`ScrollSpy\`.`);
 	return context;
 }
 /**
+* Read and drive the spy from anywhere inside a `ScrollSpy` — an overflow
+* "More" menu, a floating progress rail, a heading that echoes the section
+* being read.
+*
+* Context reaches through portals, so a consumer inside an open `DropdownMenu`
+* or `Popover` works without threading anything down by hand. `registerSection`
+* is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
+*/
+function useScrollSpy() {
+	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("useScrollSpy");
+	return React.useMemo(() => ({
+		activeValue,
+		getSectionId,
+		getTriggerId,
+		scrollToSection
+	}), [
+		activeValue,
+		getSectionId,
+		getTriggerId,
+		scrollToSection
+	]);
+}
+/**
 * `Tabs` for a page that shows everything at once: every section stays mounted
 * and visible, the triggers scroll to their section, and the active trigger
 * tracks whichever section the reader is currently on.
@@ -292,4 +315,4 @@ function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props })
 	});
 }
 //#endregion
-export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName };
+export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, 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";

package/dist/select.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check, ChevronDown, ChevronUp } from "./icons.js";
-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/separator.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/separator.tsx

package/dist/sheet.js

@@ -1,6 +1,6 @@
 "use client";
 import { X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
 import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";

package/dist/sidebar.js

@@ -1,32 +1,19 @@
 "use client";
 import { Menu } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Separator } from "./separator.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { useIsMobile } from "./utils/use-is-mobile.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 * as React from "react";
-//#region src/lib/use-mobile.ts
-const DEFAULT_MOBILE_BREAKPOINT = 1024;
-function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
-	const [isMobile, setIsMobile] = React.useState(false);
-	React.useEffect(() => {
-		const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-		const update = () => setIsMobile(window.innerWidth < breakpoint);
-		update();
-		mediaQuery.addEventListener("change", update);
-		return () => mediaQuery.removeEventListener("change", update);
-	}, [breakpoint]);
-	return isMobile;
-}
-//#endregion
 //#region src/sidebar.tsx
 const SIDEBAR_LS_KEY = "sidebar_state";
 const SIDEBAR_WIDTH = "17.5rem";

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/skeleton.tsx
 function Skeleton({ className, ...props }) {

package/dist/slider.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 } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/sonar.d.ts

@@ -0,0 +1,51 @@
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/sonar.d.ts
+/**
+ * Kept in step with `--animate-sonar-wave` in `css/theme.css`; the waves are
+ * staggered by a fraction of one cycle, which only reads as a continuous sonar
+ * if this matches the keyframe's duration. `sonar.test.tsx` asserts they agree.
+ */
+declare const SONAR_DURATION_MS = 1500;
+/**
+ * Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
+ * of keyframes, one class per tone.
+ */
+declare const sonarWaveVariants: (props?: ({
+  tone?: "brand" | "danger" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SonarProps = React.ComponentProps<"span"> & VariantProps<typeof sonarWaveVariants> & {
+  /** Stop pulsing without unmounting — the child renders on its own. */
+  active?: boolean;
+  /** Overlapping rings. More reads as a faster, more urgent sonar. */
+  waves?: 1 | 2 | 3;
+  /** How far each ring travels. Inherits from `SizeProvider`. */
+  size?: ComponentSize;
+  /**
+   * Skip measurement and use this `border-radius` verbatim. Only needed
+   * when the child's shape can't be read off the DOM — an SVG using
+   * geometry rather than CSS, say.
+   */
+  radius?: string;
+};
+/**
+ * Draws attention to a dot, badge or button by pulsing rings outward from it.
+ *
+ * The rings trace the child's own shape: `Sonar` reads the child's computed
+ * `border-radius` and hands it to the rings, so a pill badge pulses a pill and
+ * a rounded button pulses a rounded rectangle, with nothing to keep in sync by
+ * hand. That matters because radii in this library are often size-dependent —
+ * `Tag` alone moves through `rounded-md`/`lg`/`xl` across its three sizes.
+ *
+ * Purely decorative: the rings are `aria-hidden` and the child is untouched, so
+ * whatever the child announces is what assistive tech hears. A pulse is not a
+ * label — if the attention it draws carries meaning, put that meaning in the
+ * child.
+ *
+ * The rings are painted with `box-shadow` spread, which lives outside the
+ * element's box, so an ancestor with `overflow: hidden` will clip them.
+ */
+declare function Sonar({ className, children, active, waves, size, tone, radius, style, ...props }: SonarProps): React.JSX.Element;
+//#endregion
+export { SONAR_DURATION_MS, Sonar, type SonarProps, sonarWaveVariants };

package/dist/sonar.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "./utils/cn.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/sonar.tsx
+/**
+* Kept in step with `--animate-sonar-wave` in `css/theme.css`; the waves are
+* staggered by a fraction of one cycle, which only reads as a continuous sonar
+* if this matches the keyframe's duration. `sonar.test.tsx` asserts they agree.
+*/
+const SONAR_DURATION_MS = 1500;
+const SQUARE = {
+	borderTopLeftRadius: "0px",
+	borderTopRightRadius: "0px",
+	borderBottomRightRadius: "0px",
+	borderBottomLeftRadius: "0px"
+};
+function sameCorners(a, b) {
+	return a !== null && a.borderTopLeftRadius === b.borderTopLeftRadius && a.borderTopRightRadius === b.borderTopRightRadius && a.borderBottomRightRadius === b.borderBottomRightRadius && a.borderBottomLeftRadius === b.borderBottomLeftRadius;
+}
+/**
+* Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
+* of keyframes, one class per tone.
+*/
+const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
+	variants: { tone: {
+		brand: "text-fg-brand",
+		info: "text-status-info",
+		success: "text-status-success",
+		warning: "text-status-warning",
+		danger: "text-status-danger"
+	} },
+	defaultVariants: { tone: "brand" }
+});
+/**
+* Rings evenly spaced across one cycle, so the last finishes just as the first
+* comes round again. Doubles as each ring's key — the offsets are distinct by
+* construction, which an index would only pretend to be.
+*/
+function waveDelays(waves) {
+	return Array.from({ length: waves }, (_, index) => Math.round(index * SONAR_DURATION_MS / waves));
+}
+/** How far the ring travels before it fades out. */
+const sonarSpread = {
+	sm: "[--sonar-spread:0.375rem]",
+	md: "[--sonar-spread:0.625rem]",
+	lg: "[--sonar-spread:0.875rem]"
+};
+/**
+* Draws attention to a dot, badge or button by pulsing rings outward from it.
+*
+* The rings trace the child's own shape: `Sonar` reads the child's computed
+* `border-radius` and hands it to the rings, so a pill badge pulses a pill and
+* a rounded button pulses a rounded rectangle, with nothing to keep in sync by
+* hand. That matters because radii in this library are often size-dependent —
+* `Tag` alone moves through `rounded-md`/`lg`/`xl` across its three sizes.
+*
+* Purely decorative: the rings are `aria-hidden` and the child is untouched, so
+* whatever the child announces is what assistive tech hears. A pulse is not a
+* label — if the attention it draws carries meaning, put that meaning in the
+* child.
+*
+* The rings are painted with `box-shadow` spread, which lives outside the
+* element's box, so an ancestor with `overflow: hidden` will clip them.
+*/
+function Sonar({ className, children, active = true, waves = 2, size, tone, radius, style, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const ref = React.useRef(null);
+	const [corners, setCorners] = React.useState(null);
+	React.useEffect(() => {
+		if (radius !== void 0 || !active) return;
+		const target = ref.current?.querySelector(":scope > :not([data-slot=\"sonar-wave\"])");
+		if (!target) {
+			setCorners(SQUARE);
+			return;
+		}
+		const measure = () => {
+			const computed = getComputedStyle(target);
+			const next = {
+				borderTopLeftRadius: computed.borderTopLeftRadius,
+				borderTopRightRadius: computed.borderTopRightRadius,
+				borderBottomRightRadius: computed.borderBottomRightRadius,
+				borderBottomLeftRadius: computed.borderBottomLeftRadius
+			};
+			setCorners((current) => sameCorners(current, next) ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [active, radius]);
+	const shape = radius !== void 0 ? { borderRadius: radius } : corners;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "sonar",
+		"data-tone": tone ?? "brand",
+		"data-size": resolvedSize,
+		"data-active": active ? "" : void 0,
+		className: cn("relative inline-flex w-fit shrink-0", sonarSpread[resolvedSize], className),
+		style,
+		...props,
+		children: [children, active && shape ? waveDelays(waves).map((delay) => /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "sonar-wave",
+			style: {
+				...shape,
+				animationDelay: delay === 0 ? void 0 : `${delay}ms`
+			},
+			className: cn(sonarWaveVariants({ tone }), delay > 0 && "motion-reduce:hidden")
+		}, `sonar-wave-${delay}`)) : null]
+	});
+}
+//#endregion
+export { SONAR_DURATION_MS, Sonar, sonarWaveVariants };

package/dist/sparkline.js

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

package/dist/stepper.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";