@olympusoss/canvas 2.20.2 → 3.2.0

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,
-};

package/src/components/organisms/collapsible.tsx

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

package/src/components/organisms/command.tsx

@@ -1,144 +0,0 @@
-"use client";
-
-import type { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
-
-const Command = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive
-		ref={ref}
-		data-slot="command"
-		className={cn(
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-			className,
-		)}
-		{...props}
-	/>
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-	return (
-		<Dialog {...props}>
-			<DialogContent className="overflow-hidden p-0">
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-					{children}
-				</Command>
-			</DialogContent>
-		</Dialog>
-	);
-};
-
-const CommandInput = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Input>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-		<CommandPrimitive.Input
-			ref={ref}
-			className={cn(
-				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
-			{...props}
-		/>
-	</div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.List
-		ref={ref}
-		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-		{...props}
-	/>
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Empty>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-	<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Group>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Group
-		ref={ref}
-		className={cn(
-			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-			className,
-		)}
-		{...props}
-	/>
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Separator
-		ref={ref}
-		className={cn("-mx-1 h-px bg-border", className)}
-		{...props}
-	/>
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Item
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-			className,
-		)}
-		{...props}
-	/>
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-	return (
-		<span
-			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-			{...props}
-		/>
-	);
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-	Command,
-	CommandDialog,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	CommandSeparator,
-	CommandShortcut,
-};