@olympusoss/canvas 2.6.19

package/src/components/organisms/select.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { usePortalContainer } from "../../lib/portal-container";
+import { cn } from "../../lib/utils";
+
+export interface SelectProps extends React.ComponentProps<typeof SelectPrimitive.Root> {
+	/** Controlled value. Pair with `onValueChange`. */
+	value?: string;
+	/** Initial value for uncontrolled usage. */
+	defaultValue?: string;
+	/** Fires when the user picks an option. */
+	onValueChange?: (value: string) => void;
+	/** Controlled open state. */
+	open?: boolean;
+	/** Initial open state. */
+	defaultOpen?: boolean;
+	/** Fires when the dropdown opens/closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** Form field name. Required for native form submission. */
+	name?: string;
+	/**
+	 * Disable the entire select.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Required for native form validation.
+	 * @default false
+	 */
+	required?: boolean;
+	/**
+	 * Reading direction.
+	 * @default "ltr"
+	 */
+	dir?: "ltr" | "rtl";
+	/** Trigger + Content. */
+	children?: React.ReactNode;
+}
+
+const Select = SelectPrimitive.Root as React.FC<SelectProps>;
+
+export interface SelectGroupProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+	/** Items grouped together — pair with `<SelectLabel>`. */
+	children?: React.ReactNode;
+}
+
+const SelectGroup = SelectPrimitive.Group as React.ForwardRefExoticComponent<
+	SelectGroupProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export interface SelectValueProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> {
+	/** Placeholder shown when no value is selected. */
+	placeholder?: React.ReactNode;
+	/**
+	 * Render as a Radix Slot — useful when you want to fully customise the
+	 * value display.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Custom display node when a value is selected. */
+	children?: React.ReactNode;
+}
+
+const SelectValue = SelectPrimitive.Value as React.ForwardRefExoticComponent<
+	SelectValueProps & React.RefAttributes<HTMLSpanElement>
+>;
+
+export interface SelectTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Typically a `<SelectValue>`. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	SelectTriggerProps
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+export interface SelectScrollUpButtonProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> {
+	asChild?: boolean;
+	className?: string;
+}
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	SelectScrollUpButtonProps
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+export interface SelectScrollDownButtonProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> {
+	asChild?: boolean;
+	className?: string;
+}
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	SelectScrollDownButtonProps
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+export interface SelectContentProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+	/**
+	 * Whether to use trigger-anchored ("popper") or item-anchored
+	 * ("item-aligned") positioning.
+	 * @default "popper"
+	 */
+	position?: "popper" | "item-aligned";
+	/** Distance from the trigger (px). Only when `position="popper"`. */
+	sideOffset?: number;
+	/** Distance from the alignment edge (px). */
+	alignOffset?: number;
+	/**
+	 * Preferred side. Only when `position="popper"`.
+	 * @default "bottom"
+	 */
+	side?: "top" | "right" | "bottom" | "left";
+	/**
+	 * Alignment along the chosen side.
+	 * @default "start"
+	 */
+	align?: "start" | "center" | "end";
+	/** Avoid colliding with viewport edges. */
+	avoidCollisions?: boolean;
+	/** Padding kept from collision boundaries. */
+	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+	/** Force the content to mount even when closed. */
+	forceMount?: true;
+	/** Render as a Radix Slot. */
+	asChild?: boolean;
+	/** Items + groups + separators. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	SelectContentProps
+>(({ className, children, position = "popper", ...props }, ref) => {
+	const container = usePortalContainer();
+	return (
+		<SelectPrimitive.Portal container={container ?? undefined}>
+			<SelectPrimitive.Content
+				ref={ref}
+				className={cn(
+					"relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover 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-select-content-transform-origin)]",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+export interface SelectLabelProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {
+	asChild?: boolean;
+	/** Section heading text. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	SelectLabelProps
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export interface SelectItemProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+	/** Required — value reported when this option is picked. */
+	value: string;
+	/**
+	 * Disable this option.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/** Override what's used as text for typeahead/search. */
+	textValue?: string;
+	asChild?: boolean;
+	/** Item label. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(
+	({ className, children, ...props }, ref) => (
+		<SelectPrimitive.Item
+			ref={ref}
+			className={cn(
+				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 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 right-2 flex h-3.5 w-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<Check className="h-4 w-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	),
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export interface SelectSeparatorProps
+	extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
+	asChild?: boolean;
+	className?: string;
+}
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	SelectSeparatorProps
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/components/organisms/sheet.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SheetProps extends React.ComponentProps<typeof SheetPrimitive.Root> {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/**
+	 * Initial open state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/** Fires whenever the sheet opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * When true, the sheet traps focus and renders the scrim overlay.
+	 * @default true
+	 */
+	modal?: boolean;
+	/** Trigger + Content. */
+	children?: React.ReactNode;
+}
+
+const Sheet = SheetPrimitive.Root as React.FC<SheetProps>;
+
+export interface SheetTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetTrigger = SheetPrimitive.Trigger as React.ForwardRefExoticComponent<
+	SheetTriggerProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export interface SheetCloseProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetClose = SheetPrimitive.Close as React.ForwardRefExoticComponent<
+	SheetCloseProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export interface SheetPortalProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Portal> {
+	/** DOM element to portal into. Defaults to `document.body`. */
+	container?: HTMLElement | null;
+	/**
+	 * Force the portal to mount even when the sheet is closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	children?: React.ReactNode;
+}
+
+const SheetPortal = SheetPrimitive.Portal as React.FC<SheetPortalProps>;
+
+export interface SheetOverlayProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/**
+	 * Force the overlay to mount even when closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	className?: string;
+}
+
+const SheetOverlay = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	SheetOverlayProps
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.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}
+	/>
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
+);
+
+export interface SheetContentProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {
+	/**
+	 * Which edge of the viewport the sheet slides in from.
+	 * @default "right"
+	 */
+	side?: "top" | "right" | "bottom" | "left";
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/**
+	 * Force the content to mount even when closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	/** Fires when focus enters the sheet after it opens. */
+	onOpenAutoFocus?: (event: Event) => void;
+	/** Fires when focus leaves the sheet after it closes. */
+	onCloseAutoFocus?: (event: Event) => void;
+	/** Fires when Escape is pressed. */
+	onEscapeKeyDown?: (event: KeyboardEvent) => void;
+	/** Fires on pointer event outside the sheet. */
+	onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void;
+	/** Fires on any interaction outside (focus + pointer). */
+	onInteractOutside?: (event: Event) => void;
+	/** Sheet body — `<SheetHeader>`, content, `<SheetFooter>`. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const SheetContent = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+			{children}
+		</SheetPrimitive.Content>
+	</SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Title + optional description. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetHeader = ({ className, ...props }: SheetHeaderProps) => (
+	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Action buttons. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetFooter = ({ className, ...props }: SheetFooterProps) => (
+	<div
+		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+		{...props}
+	/>
+);
+SheetFooter.displayName = "SheetFooter";
+
+export interface SheetTitleProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetTitle = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Title>, SheetTitleProps>(
+	({ className, ...props }, ref) => (
+		<SheetPrimitive.Title
+			ref={ref}
+			className={cn("text-lg font-semibold text-foreground", className)}
+			{...props}
+		/>
+	),
+);
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+export interface SheetDescriptionProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SheetDescription = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	SheetDescriptionProps
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetOverlay,
+	SheetPortal,
+	SheetTitle,
+	SheetTrigger,
+};