@olympusoss/canvas 2.20.2 → 4.0.0

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

package/src/components/organisms/context-menu.tsx

@@ -1,339 +0,0 @@
-"use client";
-
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
-
-import { usePortalContainer } from "../../lib/portal-container";
-import { cn } from "../../lib/utils";
-
-export interface ContextMenuProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {
-	/** Reading direction. */
-	dir?: "ltr" | "rtl";
-	/** Fires when the user opens or closes the menu via right-click / long-press. */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * When true, blocks focus from leaving the menu.
-	 * @default true
-	 */
-	modal?: boolean;
-	/** Trigger + Content. */
-	children?: React.ReactNode;
-}
-
-const ContextMenu = ContextMenuPrimitive.Root as React.FC<ContextMenuProps>;
-
-export interface ContextMenuTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger> {
-	/**
-	 * Disable the right-click trigger.
-	 * @default false
-	 */
-	disabled?: boolean;
-	asChild?: boolean;
-	/** The element that opens the context menu on right-click / long-press. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
-	ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>
->;
-
-export interface ContextMenuGroupProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group> {
-	children?: React.ReactNode;
-}
-
-const ContextMenuGroup = ContextMenuPrimitive.Group as React.ForwardRefExoticComponent<
-	ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface ContextMenuPortalProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Portal> {
-	container?: HTMLElement | null;
-	forceMount?: true;
-	children?: React.ReactNode;
-}
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal as React.FC<ContextMenuPortalProps>;
-
-export interface ContextMenuSubProps extends React.ComponentProps<typeof ContextMenuPrimitive.Sub> {
-	open?: boolean;
-	defaultOpen?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	children?: React.ReactNode;
-}
-
-const ContextMenuSub = ContextMenuPrimitive.Sub as React.FC<ContextMenuSubProps>;
-
-export interface ContextMenuRadioGroupProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup> {
-	value?: string;
-	onValueChange?: (value: string) => void;
-	children?: React.ReactNode;
-}
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
-	ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface ContextMenuSubTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
-	/**
-	 * Add left padding to align with sibling checkbox/radio items.
-	 * @default false
-	 */
-	inset?: boolean;
-	disabled?: boolean;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-	ContextMenuSubTriggerProps
->(({ className, inset, children, ...props }, ref) => (
-	<ContextMenuPrimitive.SubTrigger
-		ref={ref}
-		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<ChevronRight className="ml-auto h-4 w-4" />
-	</ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-export interface ContextMenuSubContentProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> {
-	sideOffset?: number;
-	alignOffset?: number;
-	avoidCollisions?: boolean;
-	forceMount?: true;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-	ContextMenuSubContentProps
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.SubContent
-		ref={ref}
-		data-slot="context-menu-sub-content"
-		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
-			className,
-		)}
-		{...props}
-	/>
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-export interface ContextMenuContentProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
-	/** Distance from the alignment edge (px). */
-	alignOffset?: number;
-	avoidCollisions?: boolean;
-	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
-	loop?: boolean;
-	forceMount?: true;
-	asChild?: boolean;
-	onEscapeKeyDown?: (event: KeyboardEvent) => void;
-	onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void;
-	onInteractOutside?: (event: Event) => void;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuContent = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.Content>,
-	ContextMenuContentProps
->(({ className, ...props }, ref) => {
-	const container = usePortalContainer();
-	return (
-		<ContextMenuPrimitive.Portal container={container ?? undefined}>
-			<ContextMenuPrimitive.Content
-				ref={ref}
-				data-slot="context-menu-content"
-				className={cn(
-					"z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-context-menu-content-transform-origin)]",
-					className,
-				)}
-				{...props}
-			/>
-		</ContextMenuPrimitive.Portal>
-	);
-});
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-export interface ContextMenuItemProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
-	/** Add left padding to align with checkbox/radio items. */
-	inset?: boolean;
-	disabled?: boolean;
-	onSelect?: (event: Event) => void;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuItem = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.Item>,
-	ContextMenuItemProps
->(({ className, inset, ...props }, ref) => (
-	<ContextMenuPrimitive.Item
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}
-	/>
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-export interface ContextMenuCheckboxItemProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> {
-	checked?: boolean | "indeterminate";
-	onCheckedChange?: (checked: boolean) => void;
-	disabled?: boolean;
-	onSelect?: (event: Event) => void;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-	ContextMenuCheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-	<ContextMenuPrimitive.CheckboxItem
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			className,
-		)}
-		checked={checked}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<ContextMenuPrimitive.ItemIndicator>
-				<Check className="h-4 w-4" />
-			</ContextMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-export interface ContextMenuRadioItemProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> {
-	value: string;
-	disabled?: boolean;
-	onSelect?: (event: Event) => void;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-	ContextMenuRadioItemProps
->(({ className, children, ...props }, ref) => (
-	<ContextMenuPrimitive.RadioItem
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			className,
-		)}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<ContextMenuPrimitive.ItemIndicator>
-				<Circle className="h-4 w-4 fill-current" />
-			</ContextMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-export interface ContextMenuLabelProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
-	inset?: boolean;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuLabel = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.Label>,
-	ContextMenuLabelProps
->(({ className, inset, ...props }, ref) => (
-	<ContextMenuPrimitive.Label
-		ref={ref}
-		className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
-		{...props}
-	/>
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-export interface ContextMenuSeparatorProps
-	extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {
-	asChild?: boolean;
-	className?: string;
-}
-
-const ContextMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-	ContextMenuSeparatorProps
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.Separator
-		ref={ref}
-		className={cn("-mx-1 my-1 h-px bg-border", className)}
-		{...props}
-	/>
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-export interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const ContextMenuShortcut = ({ className, ...props }: ContextMenuShortcutProps) => {
-	return (
-		<span
-			className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-			{...props}
-		/>
-	);
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-export {
-	ContextMenu,
-	ContextMenuCheckboxItem,
-	ContextMenuContent,
-	ContextMenuGroup,
-	ContextMenuItem,
-	ContextMenuLabel,
-	ContextMenuPortal,
-	ContextMenuRadioGroup,
-	ContextMenuRadioItem,
-	ContextMenuSeparator,
-	ContextMenuShortcut,
-	ContextMenuSub,
-	ContextMenuSubContent,
-	ContextMenuSubTrigger,
-	ContextMenuTrigger,
-};