@olympusoss/canvas 2.20.2 → 4.0.0

package/src/components/organisms/accordion.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface AccordionProps {
-	/**
-	 * Selection mode. `"single"` allows one item open at a time;
-	 * `"multiple"` allows multiple items open simultaneously.
-	 */
-	type: "single" | "multiple";
-	/**
-	 * Controlled value. For `type="single"` it's a string (id of the open
-	 * item); for `type="multiple"` it's a string array.
-	 */
-	value?: string | string[];
-	/** Initial value for uncontrolled usage. */
-	defaultValue?: string | string[];
-	/** Fires when the user opens/closes an item. */
-	onValueChange?: (value: string & string[]) => void;
-	/**
-	 * For `type="single"` only — when true, an open item can be collapsed
-	 * by clicking it again.
-	 * @default false
-	 */
-	collapsible?: boolean;
-	/**
-	 * Disable the entire accordion.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Reading direction. Affects keyboard arrow navigation.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * Layout direction.
-	 * @default "vertical"
-	 */
-	orientation?: "vertical" | "horizontal";
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** A list of `<AccordionItem>`s. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const Accordion = AccordionPrimitive.Root as React.ForwardRefExoticComponent<
-	AccordionProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface AccordionItemProps
-	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-	/** Required — unique value identifying this item. */
-	value: string;
-	/**
-	 * Disable only this item.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** A `<AccordionTrigger>` + `<AccordionContent>`. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const AccordionItem = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Item>,
-	AccordionItemProps
->(({ className, ...props }, ref) => (
-	<AccordionPrimitive.Item
-		ref={ref}
-		data-slot="accordion-item"
-		className={cn("border-b", className)}
-		{...props}
-	/>
-));
-AccordionItem.displayName = "AccordionItem";
-
-export interface AccordionTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Trigger label — typically a section heading. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const AccordionTrigger = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Trigger>,
-	AccordionTriggerProps
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Header className="flex">
-		<AccordionPrimitive.Trigger
-			ref={ref}
-			className={cn(
-				"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-colors hover:text-brand text-left [&[data-state=open]>svg]:rotate-180",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-		</AccordionPrimitive.Trigger>
-	</AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-export interface AccordionContentProps
-	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
-	/**
-	 * Force the content to mount even when collapsed.
-	 * @default false
-	 */
-	forceMount?: true;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Item body. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const AccordionContent = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Content>,
-	AccordionContentProps
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Content
-		ref={ref}
-		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-		{...props}
-	>
-		<div className={cn("pb-4 pt-0", className)}>{children}</div>
-	</AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -1,277 +0,0 @@
-"use client";
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react";
-
-import { usePortalContainer } from "../../lib/portal-container";
-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) => {
-	const container = usePortalContainer();
-	return (
-		<AlertDialogPortal container={container ?? undefined}>
-			<AlertDialogOverlay />
-			<AlertDialogPrimitive.Content
-				ref={ref}
-				data-slot="alert-dialog-content"
-				className={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-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%]",
-					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 gap-2 sm:flex-row sm:items-center sm:justify-end",
-			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" }), 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

@@ -1,244 +0,0 @@
-"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-10 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-10 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,
-};