@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/core/animate-ui/primitives/texts/counting-number.js

@@ -0,0 +1,75 @@
+"use client";
+import { useIsInView } from "../../../hooks/use-is-in-view.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMotionValue, useSpring } from "motion/react";
+//#region src/core/animate-ui/primitives/texts/counting-number.tsx
+function CountingNumber({ ref, number, fromNumber = 0, padStart = false, inView = false, inViewMargin = "0px", inViewOnce = true, decimalSeparator = ".", transition = {
+	stiffness: 90,
+	damping: 50
+}, decimalPlaces = 0, delay = 0, initiallyStable = false, ...props }) {
+	const { ref: localRef, isInView } = useIsInView(ref, {
+		inView,
+		inViewOnce,
+		inViewMargin
+	});
+	const numberStr = number.toString();
+	const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1]?.length ?? 0 : 0;
+	const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
+	const springVal = useSpring(motionVal, transition);
+	React$1.useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			if (isInView) motionVal.set(number);
+		}, delay);
+		return () => clearTimeout(timeoutId);
+	}, [
+		isInView,
+		number,
+		motionVal,
+		delay
+	]);
+	React$1.useEffect(() => {
+		const unsubscribe = springVal.on("change", (latest) => {
+			if (localRef.current) {
+				let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();
+				if (decimals > 0) formatted = formatted.replace(".", decimalSeparator);
+				if (padStart) {
+					const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+					const [intPart, fracPart] = formatted.split(decimalSeparator);
+					const paddedInt = intPart?.padStart(finalIntLength, "0") ?? "";
+					formatted = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
+				}
+				localRef.current.textContent = formatted;
+			}
+		});
+		return () => unsubscribe();
+	}, [
+		springVal,
+		decimals,
+		padStart,
+		number,
+		decimalSeparator,
+		localRef
+	]);
+	const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+	const formatValue = (val) => {
+		let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
+		if (decimals > 0) out = out.replace(".", decimalSeparator);
+		if (padStart) {
+			const [intPart, fracPart] = out.split(decimalSeparator);
+			const paddedInt = (intPart ?? "").padStart(finalIntLength, "0");
+			out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
+		}
+		return out;
+	};
+	const zeroText = padStart ? "0".padStart(finalIntLength, "0") + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "") : "0" + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "");
+	const initialText = initiallyStable ? formatValue(number) : zeroText;
+	return /* @__PURE__ */ jsx("span", {
+		ref: localRef,
+		"data-slot": "counting-number",
+		...props,
+		children: initialText
+	});
+}
+//#endregion
+export { CountingNumber };

package/dist/core/avatar.js

@@ -0,0 +1,32 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+//#region src/core/avatar.tsx
+var Avatar = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+	ref,
+	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+	...props
+}));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+	ref,
+	className: cn("aspect-square h-full w-full", className),
+	...props
+}));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+	ref,
+	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
+	...props
+}));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var AvatarBadge = React$1.forwardRef(({ className, variant = "dot", children, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("pointer-events-none absolute bottom-0 right-0 z-10 box-border rounded-full border-2 border-background shadow-sm", variant === "dot" ? "h-2.5 w-2.5" : "flex h-4 w-4 items-center justify-center bg-background text-foreground [&>svg]:h-2.5 [&>svg]:w-2.5", className),
+	...props,
+	children
+}));
+AvatarBadge.displayName = "AvatarBadge";
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarImage };

package/dist/core/badge.js

@@ -0,0 +1,27 @@
+import { cn } from "../utils/cn.js";
+import { resolveVariantStyles } from "../utils/variant.js";
+import { VariantGradientUnderlay } from "../utils/variant-gradient-underlay.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/core/badge.tsx
+var badgeVariants = cva("inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2");
+function Badge({ className, variant = "soft", color = "primary", style, children, ...props }) {
+	const styles = resolveVariantStyles(variant, color);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(badgeVariants(), styles.container, className),
+		style: {
+			...styles.containerStyle,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(VariantGradientUnderlay, {
+			layers: styles.gradientHoverLayers,
+			layersInline: styles.gradientHoverLayersInline,
+			silverShine: styles.silverShine,
+			silverBorder: styles.silverBorder
+		}), children]
+	});
+}
+//#endregion
+export { Badge, badgeVariants };

package/dist/core/breadcrumb.js

@@ -0,0 +1,62 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/core/breadcrumb.tsx
+var Breadcrumb = React$1.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+	ref,
+	"aria-label": "breadcrumb",
+	...props
+}));
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ol", {
+	ref,
+	className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
+	...props
+}));
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	className: cn("inline-flex items-center gap-1.5", className),
+	...props
+}));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React$1.forwardRef(({ asChild, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		ref,
+		className: cn("transition-colors hover:text-foreground", className),
+		...props
+	});
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	role: "link",
+	"aria-disabled": "true",
+	"aria-current": "page",
+	className: cn("font-normal text-foreground", className),
+	...props
+}));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", {
+	role: "presentation",
+	"aria-hidden": "true",
+	className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	role: "presentation",
+	"aria-hidden": "true",
+	className: cn("flex h-9 w-9 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/core/button/button.js

@@ -0,0 +1,43 @@
+import { cn } from "../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/core/button/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive: "text-destructive [background:color-mix(in_oklab,var(--color-destructive)_15%,transparent)] hover:[background:color-mix(in_oklab,var(--color-destructive)_20%,transparent)]",
+			outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var Button = React$1.forwardRef(({ className, variant, size, asChild = false, type, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		type: asChild ? type : type ?? "button",
+		...props
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button, buttonVariants };

package/dist/core/button/craft-button.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/button/craft-button.tsx
+/** Resting bg + text per colour (overrides the core Button's default variant via twMerge). */
+var craftButtonBgClasses = {
+	primary: "bg-primary text-primary-foreground",
+	secondary: "bg-secondary text-secondary-foreground",
+	error: "bg-error text-error-foreground",
+	info: "bg-info text-info-foreground",
+	success: "bg-success text-success-foreground",
+	warning: "bg-warning text-warning-foreground",
+	disabled: "bg-disabled text-disabled-foreground",
+	gray: "bg-gray text-gray-foreground",
+	mist: "bg-mist text-mist-foreground"
+};
+/** Dark-mode hover border per colour. */
+var craftButtonDarkBorderClasses = {
+	primary: "dark:hover:border-primary/30",
+	secondary: "dark:hover:border-secondary/30",
+	error: "dark:hover:border-error/30",
+	info: "dark:hover:border-info/30",
+	success: "dark:hover:border-success/30",
+	warning: "dark:hover:border-warning/30",
+	disabled: "dark:hover:border-disabled/30",
+	gray: "dark:hover:border-gray/30",
+	mist: "dark:hover:border-mist-border/30"
+};
+/** Icon resting text + hover fill per colour. */
+var craftIconColorClasses = {
+	primary: "text-primary group-hover:bg-primary group-hover:text-primary-foreground",
+	secondary: "text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground",
+	error: "text-error group-hover:bg-error group-hover:text-error-foreground",
+	info: "text-info group-hover:bg-info group-hover:text-info-foreground",
+	success: "text-success group-hover:bg-success group-hover:text-success-foreground",
+	warning: "text-warning group-hover:bg-warning group-hover:text-warning-foreground",
+	disabled: "text-disabled group-hover:bg-disabled group-hover:text-disabled-foreground",
+	gray: "text-gray group-hover:bg-gray group-hover:text-gray-foreground",
+	mist: "text-mist-foreground group-hover:bg-mist group-hover:text-mist-foreground"
+};
+var CraftButtonContext = React$1.createContext({});
+function CraftButtonLabel({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("group-hover:text-foreground relative z-2 transition-colors duration-500", className),
+		children
+	});
+}
+function CraftButtonIcon({ children, className }) {
+	const { size, color = "primary" } = React$1.useContext(CraftButtonContext);
+	const iconSize = size === "lg" ? "size-6" : size === "sm" ? "size-4" : "size-5";
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative z-1", iconSize, className),
+		children: [/* @__PURE__ */ jsx("span", { className: cn("bg-background absolute inset-0 -z-1 rounded-full transition-transform duration-500 group-hover:scale-[15]", iconSize) }), /* @__PURE__ */ jsx("span", {
+			className: cn("bg-background relative z-2 flex items-center justify-center rounded-full transition-all duration-500", craftIconColorClasses[color], iconSize),
+			children
+		})]
+	});
+}
+function CraftButton(props) {
+	const { children, size, color = "primary", asChild = false, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(CraftButtonContext.Provider, {
+		value: {
+			size,
+			color
+		},
+		children: /* @__PURE__ */ jsx(Button, {
+			size,
+			asChild,
+			className: cn(craftButtonBgClasses[color], "group hover:bg-background relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent", craftButtonDarkBorderClasses[color], className),
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { CraftButton, CraftButtonIcon, CraftButtonLabel };

package/dist/core/button-group.js

@@ -0,0 +1,38 @@
+import { cn } from "../utils/cn.js";
+import { Separator } from "./separator.js";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/core/button-group.tsx
+var buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariants({ orientation }), className),
+		...props
+	});
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cn("bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+		...props
+	});
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "button-group-separator",
+		orientation,
+		className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className),
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/core/button.js

@@ -0,0 +1,40 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/core/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "shadow",
+			outline: "border bg-background shadow-sm",
+			ghost: "",
+			link: "underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button, buttonVariants };

package/dist/core/card.js

@@ -0,0 +1,42 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/card.tsx
+var Card = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
+	...props
+}));
+Card.displayName = "Card";
+var CardHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col space-y-1.5 p-6", className),
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("font-semibold leading-none tracking-tight", className),
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+var CardContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("p-6 pt-0", className),
+	...props
+}));
+CardContent.displayName = "CardContent";
+var CardFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex items-center p-6 pt-0", className),
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/core/carousel/carousel.js

@@ -0,0 +1,149 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/core/carousel/carousel.tsx
+var CarouselContext = React$1.createContext(null);
+function useCarousel() {
+	const context = React$1.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+var Carousel = React$1.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
+	const onSelect = React$1.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React$1.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React$1.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React$1.useCallback((event) => {
+		const isHorizontal = orientation === "horizontal";
+		const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+		const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+		if (event.key === prevKey) {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === nextKey) {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [
+		scrollPrev,
+		scrollNext,
+		orientation
+	]);
+	React$1.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React$1.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("select", onSelect);
+			api?.off("reInit", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation,
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			onKeyDownCapture: handleKeyDown,
+			className: cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			...props,
+			children
+		})
+	});
+});
+Carousel.displayName = "Carousel";
+var CarouselContent = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: cn("overflow-hidden", orientation === "vertical" && "h-full"),
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col h-full", className),
+			...props
+		})
+	});
+});
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"aria-roledescription": "slide",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+});
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		className: cn(buttonVariants({
+			variant: "outline",
+			size: "icon"
+		}), "absolute h-8 w-8 rounded-full", orientation === "horizontal" ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		className: cn(buttonVariants({
+			variant: "outline",
+			size: "icon"
+		}), "absolute h-8 w-8 rounded-full", orientation === "horizontal" ? "right-2 top-1/2 -translate-y-1/2" : "bottom-2 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+});
+CarouselNext.displayName = "CarouselNext";
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };