@olympusoss/canvas 2.6.19

package/src/components/organisms/command.tsx

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

@@ -0,0 +1,333 @@
+"use client";
+
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+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}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md 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) => (
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={ref}
+			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 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,
+};