@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/carousel.js

@@ -1,396 +1,337 @@
-// src/components/ui/carousel.tsx
-import { cva } from "class-variance-authority";
-import useEmblaCarousel from "embla-carousel-react";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/carousel.tsx
+/**
+* Shared glassmorphic treatment for every overlay surface in the carousel
+* (navigation arrows + indicator). Dark glass at 35% over a 16px backdrop
+* blur with a near-invisible 18% light border that lifts the chrome off the
+* imagery. Always dark, in both themes — see `--color-surface-glass-overlay-button`.
+*/
+const glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
+const carouselVariants = cva("relative overflow-hidden rounded-2xl bg-surface-brand-subtle", {
+	variants: { imageSize: {
+		sm: "w-[320px] max-w-full aspect-[320/220]",
+		md: "w-[520px] max-w-full aspect-[520/340]",
+		lg: "w-[800px] max-w-full aspect-[800/500]",
+		full: "w-full"
+	} },
+	defaultVariants: { imageSize: "md" }
 });
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/carousel.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
-var carouselVariants = cva(
-  "relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
-  {
-    variants: {
-      imageSize: {
-        sm: "w-[320px] max-w-full aspect-[320/220]",
-        md: "w-[520px] max-w-full aspect-[520/340]",
-        lg: "w-[800px] max-w-full aspect-[800/500]",
-        full: "w-full"
-      }
-    },
-    defaultVariants: {
-      imageSize: "md"
-    }
-  }
-);
-var CarouselContext = React.createContext(null);
+const CarouselContext = React.createContext(null);
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
 }
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  size,
-  imageSize,
-  className,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React.useState([]);
-  const onSelect = React.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-    setSelectedIndex(api2.selectedScrollSnap());
-  }, []);
-  const onReInit = React.useCallback(
-    (api2) => {
-      if (!api2) return;
-      setScrollSnaps(api2.scrollSnapList());
-      onSelect(api2);
-    },
-    [onSelect]
-  );
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const scrollTo = React.useCallback(
-    (index) => {
-      api?.scrollTo(index);
-    },
-    [api]
-  );
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React.useEffect(() => {
-    if (!api) return;
-    onReInit(api);
-    api.on("reInit", onReInit);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("reInit", onReInit);
-      api?.off("select", onSelect);
-    };
-  }, [api, onReInit, onSelect]);
-  return /* @__PURE__ */ jsx2(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        orientation,
-        size: resolvedSize,
-        scrollPrev,
-        scrollNext,
-        scrollTo,
-        canScrollPrev,
-        canScrollNext,
-        selectedIndex,
-        scrollSnaps
-      },
-      children: /* @__PURE__ */ jsx2(
-        "div",
-        {
-          onKeyDownCapture: handleKeyDown,
-          className: cn(carouselVariants({ imageSize }), className),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...props,
-          children
-        }
-      )
-    }
-  );
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, size, imageSize, className, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const [scrollSnaps, setScrollSnaps] = React.useState([]);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+		setSelectedIndex(api.selectedScrollSnap());
+	}, []);
+	const onReInit = React.useCallback((api) => {
+		if (!api) return;
+		setScrollSnaps(api.scrollSnapList());
+		onSelect(api);
+	}, [onSelect]);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const scrollTo = React.useCallback((index) => {
+		api?.scrollTo(index);
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (event.key === prevKey) {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === nextKey) {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [
+		orientation,
+		scrollPrev,
+		scrollNext
+	]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onReInit(api);
+		api.on("reInit", onReInit);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("reInit", onReInit);
+			api?.off("select", onSelect);
+		};
+	}, [
+		api,
+		onReInit,
+		onSelect
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			orientation,
+			size: resolvedSize,
+			scrollPrev,
+			scrollNext,
+			scrollTo,
+			canScrollPrev,
+			canScrollNext,
+			selectedIndex,
+			scrollSnaps
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn(carouselVariants({ imageSize }), className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
 }
 function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ref: carouselRef,
-      className: "h-full overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsx2(
-        "div",
-        {
-          className: cn(
-            "flex h-full",
-            orientation === "horizontal" ? "" : "flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "h-full overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex h-full", orientation === "horizontal" ? "" : "flex-col", className),
+			...props
+		})
+	});
 }
 function CarouselItem({ className, ...props }) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        role: "group",
-        "aria-roledescription": "slide",
-        "data-slot": "carousel-item",
-        className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
-        ...props
-      }
-    )
-  );
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+		...props
+	});
 }
-var arrowVariants = cva(
-  cn(
-    "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
-    glassChrome,
-    "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
-  ),
-  {
-    variants: {
-      size: {
-        sm: "size-8 [&_svg]:size-4",
-        md: "size-10 [&_svg]:size-[18px]",
-        lg: "size-12 [&_svg]:size-5"
-      },
-      side: {
-        prev: "",
-        next: ""
-      }
-    },
-    compoundVariants: [
-      { size: "sm", side: "prev", className: "left-3" },
-      { size: "sm", side: "next", className: "right-3" },
-      { size: "md", side: "prev", className: "left-4" },
-      { size: "md", side: "next", className: "right-4" },
-      { size: "lg", side: "prev", className: "left-5" },
-      { size: "lg", side: "next", className: "right-5" }
-    ],
-    defaultVariants: {
-      size: "md",
-      side: "prev"
-    }
-  }
-);
-function CarouselPrevious({
-  className,
-  ...props
-}) {
-  const { size, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      "data-slot": "carousel-previous",
-      className: cn(arrowVariants({ size, side: "prev" }), className),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(ChevronLeftIcon, { className: "cn-rtl-flip" }),
-        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
+const arrowVariants = cva(cn("absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none", glassChrome, "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"), {
+	variants: {
+		size: {
+			sm: "size-8 [&_svg]:size-4",
+			md: "size-10 [&_svg]:size-[18px]",
+			lg: "size-12 [&_svg]:size-5"
+		},
+		side: {
+			prev: "",
+			next: ""
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			side: "prev",
+			className: "left-3"
+		},
+		{
+			size: "sm",
+			side: "next",
+			className: "right-3"
+		},
+		{
+			size: "md",
+			side: "prev",
+			className: "left-4"
+		},
+		{
+			size: "md",
+			side: "next",
+			className: "right-4"
+		},
+		{
+			size: "lg",
+			side: "prev",
+			className: "left-5"
+		},
+		{
+			size: "lg",
+			side: "next",
+			className: "right-5"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		side: "prev"
+	}
+});
+function CarouselPrevious({ className, ...props }) {
+	const { size, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "carousel-previous",
+		className: cn(arrowVariants({
+			size,
+			side: "prev"
+		}), className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
 }
 function CarouselNext({ className, ...props }) {
-  const { size, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      "data-slot": "carousel-next",
-      className: cn(arrowVariants({ size, side: "next" }), className),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "cn-rtl-flip" }),
-        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+	const { size, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "carousel-next",
+		className: cn(arrowVariants({
+			size,
+			side: "next"
+		}), className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
 }
-var MANY_THRESHOLD = 5;
-var MANY_WINDOW = 5;
+/**
+* Past this many items the indicator switches from "show every dot" to the
+* Airbnb-style windowed mode: at most `MANY_WINDOW` dots, the active one kept
+* near the centre, and dots at a clipped edge faded down to imply more beyond.
+*/
+const MANY_THRESHOLD = 5;
+const MANY_WINDOW = 5;
+/**
+* Returns the dots to render plus the window start, so the determinate and
+* windowed ("many") cases share one render path. The dot strip is always the
+* full list; `start` drives the translate that slides it under the viewport.
+*/
 function getIndicatorWindow(count, selected) {
-  if (count < MANY_THRESHOLD) {
-    const dots2 = Array.from({ length: count }, (_, index) => ({
-      index,
-      faded: false
-    }));
-    return { dots: dots2, start: 0, visible: count };
-  }
-  const half = Math.floor(MANY_WINDOW / 2);
-  const start = Math.max(0, Math.min(selected - half, count - MANY_WINDOW));
-  const end = start + MANY_WINDOW - 1;
-  const overflowLeft = start > 0;
-  const overflowRight = end < count - 1;
-  const dots = Array.from({ length: count }, (_, index) => ({
-    index,
-    faded: overflowLeft && index === start || overflowRight && index === end
-  }));
-  return { dots, start, visible: MANY_WINDOW };
+	if (count < MANY_THRESHOLD) return {
+		dots: Array.from({ length: count }, (_, index) => ({
+			index,
+			faded: false
+		})),
+		start: 0,
+		visible: count
+	};
+	const start = Math.max(0, Math.min(selected - Math.floor(MANY_WINDOW / 2), count - MANY_WINDOW));
+	const end = start + MANY_WINDOW - 1;
+	const overflowLeft = start > 0;
+	const overflowRight = end < count - 1;
+	return {
+		dots: Array.from({ length: count }, (_, index) => ({
+			index,
+			faded: overflowLeft && index === start || overflowRight && index === end
+		})),
+		start,
+		visible: MANY_WINDOW
+	};
 }
-var INDICATOR_SIZES = {
-  sm: { dot: 5, gap: 4, padX: 8, padY: 4 },
-  md: { dot: 7, gap: 5, padX: 10, padY: 5 },
-  lg: { dot: 9, gap: 6, padX: 12, padY: 6 }
+/** Dot diameter, gap, and pill padding per size — in px to keep them crisp. */
+const INDICATOR_SIZES = {
+	sm: {
+		dot: 5,
+		gap: 4,
+		padX: 8,
+		padY: 4
+	},
+	md: {
+		dot: 7,
+		gap: 5,
+		padX: 10,
+		padY: 5
+	},
+	lg: {
+		dot: 9,
+		gap: 6,
+		padX: 12,
+		padY: 6
+	}
 };
-var INDICATOR_OFFSET = {
-  sm: "bottom-3",
-  md: "bottom-[18px]",
-  lg: "bottom-6"
+/** Distance of the indicator from the bottom edge, per size (12/18/24px). */
+const INDICATOR_OFFSET = {
+	sm: "bottom-3",
+	md: "bottom-[18px]",
+	lg: "bottom-6"
 };
-function CarouselIndicator({
-  className,
-  count: countProp,
-  selected: selectedProp,
-  size: sizeProp,
-  onSelect,
-  ...props
-}) {
-  const ctx = React.useContext(CarouselContext);
-  const inheritedSize = useComponentSize(sizeProp);
-  const size = sizeProp ?? ctx?.size ?? inheritedSize;
-  const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
-  const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
-  const handleSelect = onSelect ?? ctx?.scrollTo;
-  if (count <= 1) return null;
-  const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
-  const { dots, start, visible } = getIndicatorWindow(count, selected);
-  const step = dot + gap;
-  const viewportWidth = visible * step - gap;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "carousel-indicator",
-      className: cn(
-        "absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full",
-        INDICATOR_OFFSET[size],
-        glassChrome,
-        className
-      ),
-      style: { padding: `${padY}px ${padX}px` },
-      role: "tablist",
-      "aria-label": "Slide indicators",
-      ...props,
-      children: /* @__PURE__ */ jsx2("div", { className: "overflow-hidden", style: { width: viewportWidth }, children: /* @__PURE__ */ jsx2(
-        "div",
-        {
-          className: "flex items-center transition-transform duration-300 ease-out",
-          style: { gap, transform: `translateX(${-start * step}px)` },
-          children: dots.map(({ index, faded }) => {
-            const isActive = index === selected;
-            return /* @__PURE__ */ jsx2(
-              "button",
-              {
-                type: "button",
-                role: "tab",
-                "aria-selected": isActive,
-                "aria-label": `Go to slide ${index + 1}`,
-                onClick: () => handleSelect?.(index),
-                className: cn(
-                  "shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out",
-                  handleSelect ? "cursor-pointer" : "cursor-default"
-                ),
-                style: {
-                  width: dot,
-                  height: dot,
-                  opacity: faded ? 0.3 : isActive ? 1 : 0.55,
-                  transform: faded ? "scale(0.6)" : "scale(1)"
-                }
-              },
-              index
-            );
-          })
-        }
-      ) })
-    }
-  );
+function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }) {
+	const ctx = React.useContext(CarouselContext);
+	const inheritedSize = useComponentSize(sizeProp);
+	const size = sizeProp ?? ctx?.size ?? inheritedSize;
+	const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
+	const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
+	const handleSelect = onSelect ?? ctx?.scrollTo;
+	if (count <= 1) return null;
+	const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
+	const { dots, start, visible } = getIndicatorWindow(count, selected);
+	const step = dot + gap;
+	const viewportWidth = visible * step - gap;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "carousel-indicator",
+		className: cn("absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full", INDICATOR_OFFSET[size], glassChrome, className),
+		style: { padding: `${padY}px ${padX}px` },
+		role: "tablist",
+		"aria-label": "Slide indicators",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden",
+			style: { width: viewportWidth },
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex items-center transition-transform duration-300 ease-out",
+				style: {
+					gap,
+					transform: `translateX(${-start * step}px)`
+				},
+				children: dots.map(({ index, faded }) => {
+					const isActive = index === selected;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": isActive,
+						"aria-label": `Go to slide ${index + 1}`,
+						onClick: () => handleSelect?.(index),
+						className: cn("shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out", handleSelect ? "cursor-pointer" : "cursor-default"),
+						style: {
+							width: dot,
+							height: dot,
+							opacity: faded ? .3 : isActive ? 1 : .55,
+							transform: faded ? "scale(0.6)" : "scale(1)"
+						}
+					}, index);
+				})
+			})
+		})
+	});
 }
-export {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
-};
-//# sourceMappingURL=carousel.js.map
+//#endregion
+export { Carousel, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };