@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/card.js

@@ -1,156 +1,70 @@
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/card.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-var cardVariants = cva(
-  "group/card relative flex w-full min-w-0 flex-col gap-5 rounded-2xl border border-line-subtle bg-canvas py-gdt-xl text-fg-primary shadow-1 transition-[background-color,border-color,box-shadow,transform] outline-none has-[[data-slot=card-action]:hover]:shadow-2 has-[[data-slot=card-action]:focus-visible]:border-line-focus has-[[data-slot=card-action]:focus-visible]inset-ring-1 has-[[data-slot=card-action]:focus-visible]:ring-line-focus has-[[data-slot=card-action]:active]:border-line-subtle has-[[data-slot=card-action]:active]:bg-surface has-[[data-slot=card-action]:active]:shadow-none!",
-  {
-    variants: {
-      selected: {
-        true: "border-line-focus bg-surface-brand-subtle inset-ring-1 inset-ring-line-focus has-[[data-slot=card-action]:hover]:border-line-focus has-[[data-slot=card-action]:hover]:bg-surface-brand-subtle has-[[data-slot=card-action]:hover]:inset-ring-1 has-[[data-slot=card-action]:active]:border-line-focus has-[[data-slot=card-action]:active]:bg-surface-brand-subtle has-[[data-slot=card-action]:active]:inset-ring-1 has-[[data-slot=card-action]:active]:inset-ring-line-focus",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      selected: false
-    }
-  }
-);
+//#region src/card.tsx
+const cardVariants = cva("group/card relative flex w-full min-w-0 flex-col gap-5 rounded-2xl border border-line-subtle bg-canvas py-gdt-xl text-fg-primary shadow-1 transition-[background-color,border-color,box-shadow,transform] outline-none has-[[data-slot=card-action]:hover]:shadow-2 has-[[data-slot=card-action]:focus-visible]:border-line-focus has-[[data-slot=card-action]:focus-visible]inset-ring-1 has-[[data-slot=card-action]:focus-visible]:ring-line-focus has-[[data-slot=card-action]:active]:border-line-subtle has-[[data-slot=card-action]:active]:bg-surface has-[[data-slot=card-action]:active]:shadow-none!", {
+	variants: { selected: {
+		true: "border-line-focus bg-surface-brand-subtle inset-ring-1 inset-ring-line-focus has-[[data-slot=card-action]:hover]:border-line-focus has-[[data-slot=card-action]:hover]:bg-surface-brand-subtle has-[[data-slot=card-action]:hover]:inset-ring-1 has-[[data-slot=card-action]:active]:border-line-focus has-[[data-slot=card-action]:active]:bg-surface-brand-subtle has-[[data-slot=card-action]:active]:inset-ring-1 has-[[data-slot=card-action]:active]:inset-ring-line-focus",
+		false: ""
+	} },
+	defaultVariants: { selected: false }
+});
 function Card({ className, render, selected = false, ...props }) {
-  return useRender({
-    defaultTagName: "article",
-    props: mergeProps(
-      {
-        className: cn(cardVariants({ selected }), className)
-      },
-      props
-    ),
-    render,
-    state: {
-      selected,
-      slot: "card"
-    }
-  });
+	return useRender({
+		defaultTagName: "article",
+		props: mergeProps({ className: cn(cardVariants({ selected }), className) }, props),
+		render,
+		state: {
+			selected,
+			slot: "card"
+		}
+	});
 }
-function CardTitle({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "h3",
-    props: mergeProps(
-      {
-        className: cn("text-gdt-h5 text-fg-primary", className)
-      },
-      props
-    ),
-    render
-  });
+function CardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-gdt-h5 text-fg-primary", className) }, props),
+		render
+	});
 }
-function CardHeader({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps(
-      {
-        className: cn("flex min-w-0 flex-col gap-gdt-sm px-gdt-xl", className)
-      },
-      props
-    ),
-    render
-  });
+function CardHeader({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-gdt-sm px-gdt-xl", className) }, props),
+		render
+	});
 }
-function CardDescription({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "p",
-    props: mergeProps(
-      {
-        className: cn("text-gdt-sm font-normal text-fg-primary", className)
-      },
-      props
-    ),
-    render
-  });
+function CardDescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-gdt-sm font-normal text-fg-primary", className) }, props),
+		render
+	});
 }
-function CardContent({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps(
-      {
-        className: cn(
-          "min-w-0 px-gdt-xl text-gdt-sm text-fg-primary",
-          className
-        )
-      },
-      props
-    ),
-    render
-  });
+function CardContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("min-w-0 px-gdt-xl text-gdt-sm text-fg-primary", className) }, props),
+		render
+	});
 }
-function CardFooter({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps(
-      {
-        className: cn(
-          "flex min-w-0 px-gdt-xl flex-wrap items-center justify-end gap-gdt-sm",
-          className
-        )
-      },
-      props
-    ),
-    render
-  });
+function CardFooter({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 px-gdt-xl flex-wrap items-center justify-end gap-gdt-sm", className) }, props),
+		render
+	});
 }
-function CardAction({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "button",
-    props: mergeProps(
-      {
-        // @ts-expect-error — data-* attrs are valid but not in mergeProps generic
-        "data-slot": "card-action",
-        className: cn(
-          "cursor-pointer focus-visible:outline-none before:absolute before:inset-0 before:content-['']",
-          className
-        )
-      },
-      props
-    ),
-    render
-  });
+function CardAction({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			"data-slot": "card-action",
+			className: cn("cursor-pointer focus-visible:outline-none before:absolute before:inset-0 before:content-['']", className)
+		}, props),
+		render
+	});
 }
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  cardVariants
-};
-//# sourceMappingURL=card.js.map
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

package/dist/carousel.d.ts

@@ -1,37 +1,36 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+//#region src/carousel.d.ts
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 declare const carouselVariants: (props?: ({
-    imageSize?: "sm" | "md" | "lg" | "full" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  imageSize?: "full" | "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type CarouselContextProps = {
-    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-    api: CarouselApi;
-    orientation: "horizontal" | "vertical";
-    size: ComponentSize;
-    scrollPrev: () => void;
-    scrollNext: () => void;
-    scrollTo: (index: number) => void;
-    canScrollPrev: boolean;
-    canScrollNext: boolean;
-    selectedIndex: number;
-    scrollSnaps: number[];
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: CarouselApi;
+  orientation: "horizontal" | "vertical";
+  size: ComponentSize;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  scrollTo: (index: number) => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  selectedIndex: number;
+  scrollSnaps: number[];
 };
 declare function useCarousel(): CarouselContextProps;
 type CarouselProps = {
-    opts?: CarouselOptions;
-    plugins?: CarouselPlugin;
-    orientation?: "horizontal" | "vertical";
-    /** Scales the chrome (arrows + indicator) without touching the image. */
-    size?: ComponentSize;
-    setApi?: (api: CarouselApi) => void;
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  /** Scales the chrome (arrows + indicator) without touching the image. */
+  size?: ComponentSize;
+  setApi?: (api: CarouselApi) => void;
 };
 declare function Carousel({ orientation, opts, setApi, plugins, size, imageSize, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps & VariantProps<typeof carouselVariants>): React.JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -39,15 +38,15 @@ declare function CarouselItem({ className, ...props }: React.ComponentProps<"div
 declare function CarouselPrevious({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 declare function CarouselNext({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 type CarouselIndicatorProps = Omit<React.ComponentProps<"div">, "children" | "onSelect"> & {
-    /** Override the live count (e.g. for static design previews). */
-    count?: number;
-    /** Override the live selected index. */
-    selected?: number;
-    /** Override the inherited carousel size. */
-    size?: ComponentSize;
-    /** Jump to a slide when a dot is activated. Defaults to the carousel API. */
-    onSelect?: (index: number) => void;
+  /** Override the live count (e.g. for static design previews). */
+  count?: number;
+  /** Override the live selected index. */
+  selected?: number;
+  /** Override the inherited carousel size. */
+  size?: ComponentSize;
+  /** Jump to a slide when a dot is activated. Defaults to the carousel API. */
+  onSelect?: (index: number) => void;
 };
 declare function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }: CarouselIndicatorProps): React.JSX.Element | null;
-
-export { Carousel, type CarouselApi, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+//#endregion
+export { Carousel, type CarouselApi, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/carousel.js

@@ -1,22 +1,337 @@
 "use client";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
-} from "./chunk-FZDSVMKY.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
+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";
+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" }
+});
+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;
+}
+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__ */ 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 /* @__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
+	});
+}
+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__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+/**
+* 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) 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
+	};
+}
+/** 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
+	}
 };
-//# sourceMappingURL=carousel.js.map
+/** 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__ */ 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);
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };