@olympusoss/canvas 2.6.19

package/src/components/organisms/alert-dialog.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../atoms/button";
+
+export interface AlertDialogProps extends React.ComponentProps<typeof AlertDialogPrimitive.Root> {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/**
+	 * Initial open state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/** Fires whenever the dialog opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** Trigger + Content. */
+	children?: React.ReactNode;
+}
+
+const AlertDialog = AlertDialogPrimitive.Root as React.FC<AlertDialogProps>;
+
+export interface AlertDialogTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger> {
+	/**
+	 * Render as a Radix Slot — forwards props onto the immediate child.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** The button (or slot) that opens the alert. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger as React.ForwardRefExoticComponent<
+	AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export interface AlertDialogPortalProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal> {
+	/** DOM element to portal into. Defaults to `document.body`. */
+	container?: HTMLElement | null;
+	/**
+	 * Force the portal to mount its children even when closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	children?: React.ReactNode;
+}
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal as React.FC<AlertDialogPortalProps>;
+
+export interface AlertDialogOverlayProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> {
+	/**
+	 * Render as a Radix Slot — forwards props onto the immediate child.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/**
+	 * Force the overlay to mount even when closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	AlertDialogOverlayProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+export interface AlertDialogContentProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+	/**
+	 * Render as a Radix Slot — forwards props onto the immediate child.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/**
+	 * Force the content to mount even when closed. Useful for
+	 * exit animations.
+	 * @default false
+	 */
+	forceMount?: true;
+	/** Fires when focus enters the dialog after it opens. */
+	onOpenAutoFocus?: (event: Event) => void;
+	/** Fires when focus leaves the dialog after it closes. */
+	onCloseAutoFocus?: (event: Event) => void;
+	/** Fires when the Escape key is pressed. */
+	onEscapeKeyDown?: (event: KeyboardEvent) => void;
+	/**
+	 * Title + Description + Footer (with `<AlertDialogAction>` and
+	 * `<AlertDialogCancel>`).
+	 */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	AlertDialogContentProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Title + optional description. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (
+	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Action + Cancel buttons. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (
+	<div
+		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+		{...props}
+	/>
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+export interface AlertDialogTitleProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
+	/**
+	 * Render as a Radix Slot — useful to swap the heading level.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Title text. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	AlertDialogTitleProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+export interface AlertDialogDescriptionProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Description text shown below the title. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	AlertDialogDescriptionProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+export interface AlertDialogActionProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> {
+	/**
+	 * Render as a Radix Slot — wrap a custom button while still hooking the
+	 * dialog's commit behaviour.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Action label (e.g. "Delete", "Confirm"). */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. Defaults to canvas's primary button. */
+	className?: string;
+}
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	AlertDialogActionProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+export interface AlertDialogCancelProps
+	extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Cancel label (e.g. "Cancel", "Keep editing"). */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. Defaults to canvas's outline button. */
+	className?: string;
+}
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	AlertDialogCancelProps
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+		{...props}
+	/>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+};

package/src/components/organisms/carousel.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+
+	return context;
+}
+
+const Carousel = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === "horizontal" ? "x" : "y",
+		},
+		plugins,
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		/* c8 ignore next 3 -- defensive guard: Embla always provides api in the onSelect handler */
+		if (!api) {
+			return;
+		}
+
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			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;
+		}
+
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				// `orientation` is always defined (default: "horizontal"). No fallback needed.
+				orientation,
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<div
+				ref={ref}
+				onKeyDownCapture={handleKeyDown}
+				className={cn("relative", className)}
+				role="region"
+				aria-roledescription="carousel"
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	);
+});
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const { carouselRef, orientation } = useCarousel();
+
+		return (
+			<div ref={carouselRef} className="overflow-hidden">
+				<div
+					ref={ref}
+					className={cn(
+						"flex",
+						orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+						className,
+					)}
+					{...props}
+				/>
+			</div>
+		);
+	},
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const { orientation } = useCarousel();
+
+		return (
+			<div
+				ref={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";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+	({ className, variant = "outline", size = "icon", ...props }, ref) => {
+		const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+		return (
+			<Button
+				ref={ref}
+				variant={variant}
+				size={size}
+				className={cn(
+					"absolute  h-8 w-8 rounded-full",
+					orientation === "horizontal"
+						? "-left-12 top-1/2 -translate-y-1/2"
+						: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+					className,
+				)}
+				disabled={!canScrollPrev}
+				onClick={scrollPrev}
+				{...props}
+			>
+				<ArrowLeft className="h-4 w-4" />
+				<span className="sr-only">Previous slide</span>
+			</Button>
+		);
+	},
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+	({ className, variant = "outline", size = "icon", ...props }, ref) => {
+		const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+		return (
+			<Button
+				ref={ref}
+				variant={variant}
+				size={size}
+				className={cn(
+					"absolute h-8 w-8 rounded-full",
+					orientation === "horizontal"
+						? "-right-12 top-1/2 -translate-y-1/2"
+						: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+					className,
+				)}
+				disabled={!canScrollNext}
+				onClick={scrollNext}
+				{...props}
+			>
+				<ArrowRight className="h-4 w-4" />
+				<span className="sr-only">Next slide</span>
+			</Button>
+		);
+	},
+);
+CarouselNext.displayName = "CarouselNext";
+
+export {
+	Carousel,
+	type CarouselApi,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+};

package/src/components/organisms/collapsible.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import type * as React from "react";
+
+export interface CollapsibleProps extends React.ComponentProps<typeof CollapsiblePrimitive.Root> {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/**
+	 * Initial open state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/** Fires whenever the collapsible opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Disable the trigger.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/** Trigger + Content. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const Collapsible = CollapsiblePrimitive.Root as React.FC<CollapsibleProps>;
+
+export interface CollapsibleTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger> {
+	/**
+	 * Render as a Radix Slot — wrap a custom button while keeping the
+	 * collapsible's toggle behaviour.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** The button (or slot) that opens/closes the content. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const CollapsibleTrigger =
+	CollapsiblePrimitive.CollapsibleTrigger as React.ForwardRefExoticComponent<
+		CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>
+	>;
+
+export interface CollapsibleContentProps
+	extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> {
+	/**
+	 * Force the content to mount even when collapsed. Useful for measuring
+	 * height for animations.
+	 * @default false
+	 */
+	forceMount?: true;
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Content shown when expanded. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const CollapsibleContent =
+	CollapsiblePrimitive.CollapsibleContent as React.ForwardRefExoticComponent<
+		CollapsibleContentProps & React.RefAttributes<HTMLDivElement>
+	>;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };