@codefast/ui 0.3.13-canary.3 → 0.3.13

package/dist/components/button-group.d.mts

@@ -0,0 +1,34 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { Separator } from "./separator.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/button-group.d.ts
+declare const buttonGroupVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  orientation: {
+    horizontal: string[];
+    vertical: string[];
+  };
+}, Record<string, never>>;
+type ButtonGroupProps = ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
+declare function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: ButtonGroupProps): JSX.Element;
+interface ButtonGroupTextProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+}
+declare function ButtonGroupText({
+  asChild,
+  className,
+  ...props
+}: ButtonGroupTextProps): JSX.Element;
+type ButtonGroupSeparatorProps = ComponentProps<typeof Separator>;
+declare function ButtonGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: ButtonGroupSeparatorProps): JSX.Element;
+//#endregion
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };

package/dist/components/button-group.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { Separator } from "./separator.mjs";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group.tsx
+const buttonGroupVariants = tv({
+	base: [
+		"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-lg",
+		"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
+		"[&>input]:flex-1"
+	],
+	defaultVariants: { orientation: "horizontal" },
+	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"
+		]
+	} }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: buttonGroupVariants({
+			orientation,
+			className
+		}),
+		"data-orientation": orientation,
+		"data-slot": "button-group",
+		role: "group",
+		...props
+	});
+}
+function ButtonGroupText({ asChild = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cn("flex items-center gap-2", "px-4", "rounded-lg border", "bg-muted shadow-xs", "text-sm font-medium", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn("relative self-stretch", "bg-input", "data-vertical:h-auto", "!m-0", className),
+		"data-slot": "button-group-separator",
+		orientation,
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button.d.mts

@@ -0,0 +1,38 @@
+import { VariantProps } from "../lib/utils.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/button.d.ts
+declare const buttonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  size: {
+    "icon-sm": string;
+    icon: string;
+    "icon-lg": string;
+    sm: string[];
+    md: string[];
+    lg: string[];
+  };
+  variant: {
+    default: string[];
+    destructive: string[];
+    ghost: string[];
+    link: string[];
+    outline: string[];
+    secondary: string[];
+  };
+}, Record<string, never>>;
+type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+  type?: ComponentProps<"button">["type"];
+};
+declare function Button({
+  asChild,
+  children,
+  className,
+  size,
+  type,
+  variant,
+  ...props
+}: ButtonProps): JSX.Element;
+//#endregion
+export { Button, type ButtonProps, buttonVariants };

package/dist/components/button.mjs

@@ -0,0 +1,99 @@
+import { tv } from "../lib/utils.mjs";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button.tsx
+const buttonVariants = tv({
+	base: [
+		"inline-flex shrink-0 items-center justify-center gap-2",
+		"rounded-lg outline-hidden",
+		"text-sm font-medium whitespace-nowrap",
+		"transition select-none",
+		"focus-visible:ring-3",
+		"disabled:opacity-50",
+		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			"icon-sm": "size-8",
+			icon: "size-9",
+			"icon-lg": "size-10",
+			sm: ["h-8 px-3", "has-[>svg]:px-2.5"],
+			md: ["h-9 px-4", "has-[>svg]:px-3"],
+			lg: ["h-10 px-6", "has-[>svg]:px-4"]
+		},
+		variant: {
+			default: [
+				"bg-primary text-primary-foreground",
+				"hover:not-disabled:bg-primary/80",
+				"focus-visible:ring-primary/20",
+				"dark:focus-visible:ring-primary/40"
+			],
+			destructive: [
+				"bg-destructive text-white",
+				"hover:not-disabled:bg-destructive/90",
+				"focus-visible:ring-destructive/20",
+				"dark:bg-destructive/60",
+				"dark:focus-visible:ring-destructive/40"
+			],
+			ghost: [
+				"hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
+				"focus-visible:ring-ring/50",
+				"dark:hover:not-disabled:bg-secondary/50"
+			],
+			link: [
+				"text-primary underline-offset-4",
+				"hover:not-disabled:underline",
+				"focus-visible:ring-ring/50"
+			],
+			outline: [
+				"border border-input shadow-xs",
+				"hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
+				"focus-visible:border-ring focus-visible:ring-ring/50",
+				"aria-invalid:border-destructive",
+				"focus-within:aria-invalid:ring-destructive/20",
+				"hover:not-disabled:aria-invalid:border-destructive/60",
+				"dark:bg-input/30",
+				"dark:hover:not-disabled:bg-input/50",
+				"dark:aria-invalid:border-destructive/70",
+				"dark:focus-within:aria-invalid:ring-destructive/40"
+			],
+			secondary: [
+				"bg-secondary text-secondary-foreground",
+				"hover:not-disabled:bg-secondary/80",
+				"focus-visible:ring-ring/50"
+			]
+		}
+	}
+});
+function Button({ asChild = false, children, className, size, type = "button", variant, ...props }) {
+	const Comp = asChild ? Slot : "button";
+	if (asChild) return /* @__PURE__ */ jsx(Comp, {
+		className: buttonVariants({
+			className,
+			size,
+			variant
+		}),
+		"data-slot": "button",
+		"data-variant": variant,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		className: buttonVariants({
+			className,
+			size,
+			variant
+		}),
+		"data-slot": "button",
+		"data-variant": variant,
+		type,
+		...props,
+		children
+	});
+}
+//#endregion
+export { Button, buttonVariants };

package/dist/components/calendar.d.mts

@@ -0,0 +1,27 @@
+import { Button } from "./button.mjs";
+import { ComponentProps, JSX } from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+
+//#region src/components/calendar.d.ts
+type CalendarProps = ComponentProps<typeof DayPicker> & {
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+};
+declare function Calendar({
+  buttonVariant,
+  captionLayout,
+  className,
+  classNames,
+  components,
+  formatters,
+  showOutsideDays,
+  ...props
+}: CalendarProps): JSX.Element;
+type CalendarDayButtonProps = ComponentProps<typeof DayButton>;
+declare function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: CalendarDayButtonProps): JSX.Element;
+//#endregion
+export { Calendar, CalendarDayButton, type CalendarDayButtonProps, type CalendarProps };

package/dist/components/calendar.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Button, buttonVariants } from "./button.mjs";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+//#region src/components/calendar.tsx
+function Calendar({ buttonVariant = "ghost", captionLayout = "label", className, classNames, components, formatters, showOutsideDays = true, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		captionLayout,
+		className: cn("group/calendar", "p-3", "bg-background", "in-data-[slot=card-content]:bg-transparent", "in-data-[slot=popover-content]:bg-transparent", "rtl:**:[.rdp-button_next>svg]:rotate-180", "rtl:**:[.rdp-button_previous>svg]:rotate-180", "[--cell-size:--spacing(8)]", className),
+		classNames: {
+			button_next: buttonVariants({
+				variant: buttonVariant,
+				className: ["size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next]
+			}),
+			button_previous: buttonVariants({
+				variant: buttonVariant,
+				className: ["size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous]
+			}),
+			caption_label: cn("font-medium", "select-none", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			day: cn("group/day relative", "aspect-square h-full w-full p-0 text-center", "select-none", "[&:last-child[data-selected=true]_button]:rounded-r-md", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
+			disabled: cn("opacity-50", "text-muted-foreground", defaultClassNames.disabled),
+			dropdown: cn("absolute inset-0", "bg-popover", "opacity-0", defaultClassNames.dropdown),
+			dropdown_root: cn("relative", "rounded-md border border-input shadow-xs", "has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5", "text-sm font-medium", defaultClassNames.dropdowns),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center", "px-(--cell-size)", defaultClassNames.month_caption),
+			months: cn("relative flex flex-col gap-4", "md:flex-row", defaultClassNames.months),
+			nav: cn("absolute flex w-full items-center justify-between gap-1", "inset-x-0 top-0", defaultClassNames.nav),
+			outside: cn("text-muted-foreground", "aria-selected:text-muted-foreground", defaultClassNames.outside),
+			range_end: cn("rounded-r-md", "bg-accent", defaultClassNames.range_end),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_start: cn("rounded-l-md", "bg-accent", defaultClassNames.range_start),
+			root: cn("w-fit", defaultClassNames.root),
+			table: "w-full border-collapse",
+			today: cn("rounded-md", "bg-accent text-accent-foreground", "data-selected:rounded-none", defaultClassNames.today),
+			week: cn("flex w-full", "mt-2", defaultClassNames.week),
+			week_number: cn("text-[0.8rem] text-muted-foreground", "select-none", defaultClassNames.week_number),
+			week_number_header: cn("w-(--cell-size)", "select-none", defaultClassNames.week_number_header),
+			weekday: cn("flex-1", "rounded-md", "text-[0.8rem] font-normal text-muted-foreground", "select-none", defaultClassNames.weekday),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			...classNames
+		},
+		components: {
+			Chevron: CalendarChevron,
+			DayButton: CalendarDayButton,
+			Root: CalendarRoot,
+			WeekNumber: CalendarWeekNumber,
+			...components
+		},
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		showOutsideDays,
+		...props
+	});
+}
+function CalendarChevron({ className, orientation, ...props }) {
+	if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+		className: cn("size-4", className),
+		...props
+	});
+	if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+		className: cn("size-4", className),
+		...props
+	});
+	return /* @__PURE__ */ jsx(ChevronDownIcon, {
+		className: cn("size-4", className),
+		...props
+	});
+}
+function CalendarRoot({ className, rootRef, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		className: cn(className),
+		"data-slot": "calendar",
+		...props
+	});
+}
+function CalendarWeekNumber({ children, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex size-(--cell-size) items-center justify-center", "text-center"),
+			children
+		})
+	});
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal", "group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50", "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground", "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground", "dark:hover:text-accent-foreground", "[&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		"data-day": day.date.toLocaleDateString(),
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		size: "icon",
+		variant: "ghost",
+		...props
+	});
+}
+//#endregion
+export { Calendar, CalendarDayButton };

package/dist/components/card.d.mts

@@ -0,0 +1,41 @@
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/card.d.ts
+type CardProps = ComponentProps<"div">;
+declare function Card({
+  className,
+  ...props
+}: CardProps): JSX.Element;
+type CardHeaderProps = ComponentProps<"div">;
+declare function CardHeader({
+  className,
+  ...props
+}: CardHeaderProps): JSX.Element;
+type CardTitleProps = ComponentProps<"div">;
+declare function CardTitle({
+  children,
+  className,
+  ...props
+}: CardTitleProps): JSX.Element;
+type CardDescriptionProps = ComponentProps<"div">;
+declare function CardDescription({
+  className,
+  ...props
+}: CardDescriptionProps): JSX.Element;
+type CardContentProps = ComponentProps<"div">;
+declare function CardContent({
+  className,
+  ...props
+}: CardContentProps): JSX.Element;
+type CardFooterProps = ComponentProps<"div">;
+declare function CardFooter({
+  className,
+  ...props
+}: CardFooterProps): JSX.Element;
+type CardActionProps = ComponentProps<"div">;
+declare function CardAction({
+  className,
+  ...props
+}: CardActionProps): JSX.Element;
+//#endregion
+export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/components/card.mjs

@@ -0,0 +1,55 @@
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/card.tsx
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-6 overflow-auto py-6", "rounded-xl border", "bg-card text-card-foreground shadow-sm", className),
+		"data-slot": "card",
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5", "px-6", "has-[data-slot=card-action]:grid-cols-[1fr_auto]", "[.border-b]:pb-6", className),
+		"data-slot": "card-header",
+		...props
+	});
+}
+function CardTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("leading-none font-semibold", className),
+		"data-slot": "card-title",
+		...props,
+		children
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-sm text-muted-foreground", className),
+		"data-slot": "card-description",
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("px-6", className),
+		"data-slot": "card-content",
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", "px-6", "[.border-t]:pt-6", className),
+		"data-slot": "card-footer",
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		"data-slot": "card-action",
+		...props
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/carousel.d.mts

@@ -0,0 +1,68 @@
+import { Button } from "./button.mjs";
+import { ComponentProps, JSX } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region src/components/carousel.d.ts
+type ScopedProps<P> = P & {
+  __scopeCarousel?: Scope;
+};
+declare const createCarouselScope: _$_radix_ui_react_context0.CreateScope;
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface BaseCarouselProps {
+  opts?: CarouselOptions;
+  orientation?: "horizontal" | "vertical";
+  plugins?: CarouselPlugin;
+  setApi?: (api: CarouselApi) => void;
+}
+interface CarouselProps extends BaseCarouselProps, ComponentProps<"div"> {}
+declare function Carousel({
+  __scopeCarousel,
+  children,
+  className,
+  opts,
+  orientation,
+  plugins,
+  setApi,
+  ...props
+}: ScopedProps<CarouselProps>): JSX.Element;
+interface CarouselContentProps extends ComponentProps<"div"> {
+  classNames?: {
+    content?: string;
+    wrapper?: string;
+  };
+}
+declare function CarouselContent({
+  __scopeCarousel,
+  className,
+  classNames,
+  ...props
+}: ScopedProps<CarouselContentProps>): JSX.Element;
+type CarouselItemProps = ComponentProps<"div">;
+declare function CarouselItem({
+  __scopeCarousel,
+  className,
+  ...props
+}: ScopedProps<CarouselItemProps>): JSX.Element;
+type CarouselPreviousProps = ComponentProps<typeof Button>;
+declare function CarouselPrevious({
+  __scopeCarousel,
+  className,
+  size,
+  variant,
+  ...props
+}: ScopedProps<CarouselPreviousProps>): JSX.Element;
+type CarouselNextProps = ComponentProps<typeof Button>;
+declare function CarouselNext({
+  __scopeCarousel,
+  className,
+  size,
+  variant,
+  ...props
+}: ScopedProps<CarouselNextProps>): JSX.Element;
+//#endregion
+export { Carousel, type CarouselApi, CarouselContent, type CarouselContentProps, CarouselItem, type CarouselItemProps, CarouselNext, type CarouselNextProps, CarouselPrevious, type CarouselPreviousProps, type CarouselProps, createCarouselScope };

package/dist/components/carousel.mjs

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/components/carousel.tsx
+const CAROUSEL_NAME = "Carousel";
+const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
+const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
+function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }) {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "vertical" ? "y" : "x"
+	}, plugins);
+	const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+	const [canScrollNext, setCanScrollNext] = useState(false);
+	const onSelect = useCallback((carouselApi) => {
+		if (!carouselApi) return;
+		setCanScrollPrevious(carouselApi.canScrollPrev());
+		setCanScrollNext(carouselApi.canScrollNext());
+	}, []);
+	const scrollPrevious = useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrevious();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrevious, scrollNext]);
+	useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	useEffect(() => {
+		if (!api) return;
+		queueMicrotask(() => {
+			onSelect(api);
+		});
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContextProvider, {
+		api,
+		canScrollNext,
+		canScrollPrev: canScrollPrevious,
+		carouselRef,
+		opts,
+		orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
+		scope: __scopeCarousel,
+		scrollNext,
+		scrollPrev: scrollPrevious,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("relative", className),
+			"data-slot": "carousel",
+			onKeyDownCapture: handleKeyDown,
+			...props,
+			children
+		})
+	});
+}
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
+function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
+	const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: cn("overflow-hidden", classNames?.wrapper),
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", classNames?.content, className),
+			...props
+		})
+	});
+}
+const CAROUSEL_ITEM_NAME = "CarouselItem";
+function CarouselItem({ __scopeCarousel, className, ...props }) {
+	const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-roledescription": "slide",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		"data-slot": "carousel-item",
+		role: "group",
+		...props
+	});
+}
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+function CarouselPrevious({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
+	const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": "Previous slide",
+		className: cn("absolute", "size-8", "shadow-none", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		"data-slot": "carousel-previous",
+		disabled: !canScrollPrev,
+		size,
+		variant,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+function CarouselNext({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
+	const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": "Next slide",
+		className: cn("absolute", "size-8", "shadow-none", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		"data-slot": "carousel-next",
+		disabled: !canScrollNext,
+		size,
+		variant,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };