@olympusoss/canvas 2.20.1 → 4.0.0

package/src/components/atoms/progress.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface ProgressProps
-	extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
-	/**
-	 * Current progress as a number between `0` and `max`. When `null` the
-	 * indicator renders in indeterminate mode (Radix's default
-	 * loading-spinner-style fill).
-	 * @default null
-	 */
-	value?: number | null;
-	/**
-	 * Maximum value the progress can reach. The fill width is
-	 * `value / max * 100%`.
-	 * @default 100
-	 */
-	max?: number;
-	/**
-	 * Function that returns the accessible label announcing the current
-	 * value to screen readers. Defaults to `"X%"`.
-	 */
-	getValueLabel?: (value: number, max: number) => string;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<div>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tailwind / CSS classes merged onto the track via `cn()`. */
-	className?: string;
-}
-
-const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
-	({ className, value, ...props }, ref) => (
-		<ProgressPrimitive.Root
-			ref={ref}
-			className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
-			value={value}
-			{...props}
-		>
-			<ProgressPrimitive.Indicator
-				className="h-full w-full flex-1 bg-primary transition-all"
-				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-			/>
-		</ProgressPrimitive.Root>
-	),
-);
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };

package/src/components/atoms/radio-group.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface RadioGroupProps
-	extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
-	/**
-	 * Controlled selected value. Pair with `onValueChange`. Match the
-	 * `value` of one of the child `<RadioGroupItem>`s.
-	 */
-	value?: string;
-	/**
-	 * Initial selected value for uncontrolled usage. Ignored if `value` is
-	 * also passed.
-	 */
-	defaultValue?: string;
-	/** Fires when the user picks a different option. */
-	onValueChange?: (value: string) => void;
-	/**
-	 * Disables every radio in the group.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Required for native form submission — at least one option must be
-	 * selected.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name. Required when relying on uncontrolled native form submission. */
-	name?: string;
-	/**
-	 * Layout direction of the radios.
-	 * @default "vertical"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Reading direction of the group. Affects keyboard arrow navigation.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * When true, arrow-key navigation wraps from the last item back to the
-	 * first.
-	 * @default true
-	 */
-	loop?: boolean;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<div>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** A flat list of `<RadioGroupItem>`s. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the group via `cn()`. */
-	className?: string;
-}
-
-const RadioGroup = React.forwardRef<
-	React.ElementRef<typeof RadioGroupPrimitive.Root>,
-	RadioGroupProps
->(({ className, ...props }, ref) => {
-	return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-export interface RadioGroupItemProps
-	extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
-	/**
-	 * Value reported when this radio is selected. Required — must match
-	 * the parent `<RadioGroup>`'s `value` for selection to register.
-	 */
-	value: string;
-	/**
-	 * Disables only this radio.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Required for native form submission.
-	 * @default false
-	 */
-	required?: boolean;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<button>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Optional inner content (visual only — Radix provides the indicator). */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the radio button via `cn()`. */
-	className?: string;
-}
-
-const RadioGroupItem = React.forwardRef<
-	React.ElementRef<typeof RadioGroupPrimitive.Item>,
-	RadioGroupItemProps
->(({ className, ...props }, ref) => {
-	return (
-		<RadioGroupPrimitive.Item
-			ref={ref}
-			className={cn(
-				"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
-			{...props}
-		>
-			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-				<Circle className="h-3.5 w-3.5 fill-primary" />
-			</RadioGroupPrimitive.Indicator>
-		</RadioGroupPrimitive.Item>
-	);
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

package/src/components/atoms/scroll-area.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface ScrollAreaProps
-	extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
-	/**
-	 * When the scrollbar is shown:
-	 * - `"hover"` reveals on hover and 600ms after scroll
-	 * - `"scroll"` reveals only while scrolling
-	 * - `"auto"` defers to OS conventions (always-visible on Linux/Win)
-	 * - `"always"` keeps the scrollbar visible at all times
-	 * @default "hover"
-	 */
-	type?: "auto" | "always" | "scroll" | "hover";
-	/**
-	 * How long the scrollbar lingers after scroll/hover ends, in ms. Only
-	 * applies when `type` is `"hover"` or `"scroll"`.
-	 * @default 600
-	 */
-	scrollHideDelay?: number;
-	/**
-	 * Reading direction. Affects which side the vertical scrollbar lives on.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<div>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Scrollable content. */
-	children?: React.ReactNode;
-	/**
-	 * Tailwind / CSS classes merged onto the root via `cn()`. Set the
-	 * height/max-height here so the scroll area knows when to scroll.
-	 */
-	className?: string;
-}
-
-const ScrollArea = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-	ScrollAreaProps
->(({ className, children, ...props }, ref) => (
-	<ScrollAreaPrimitive.Root
-		ref={ref}
-		className={cn("relative overflow-hidden", className)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-			{children}
-		</ScrollAreaPrimitive.Viewport>
-		<ScrollBar />
-		<ScrollAreaPrimitive.Corner />
-	</ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-export interface ScrollBarProps
-	extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {
-	/**
-	 * Which axis the scrollbar controls.
-	 * @default "vertical"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Force the scrollbar to mount even when it's not needed (no overflow).
-	 * Pair with a CSS animation that fades in/out based on `data-state`.
-	 * @default false
-	 */
-	forceMount?: true;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<div>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tailwind / CSS classes merged onto the scrollbar via `cn()`. */
-	className?: string;
-}
-
-const ScrollBar = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-	ScrollBarProps
->(({ className, orientation = "vertical", ...props }, ref) => (
-	<ScrollAreaPrimitive.ScrollAreaScrollbar
-		ref={ref}
-		orientation={orientation}
-		className={cn(
-			"flex touch-none select-none transition-colors",
-			orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-			orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-			className,
-		)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-	</ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

package/src/components/atoms/section.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Vertical-rhythm step applied as `space-y-*` between immediate children.
-	 * Maps to Tailwind's spacing scale: `0` = 0, `1` = 8px, `2` = 16px,
-	 * `3` = 24px, `4` = 32px, `5` = 40px, `6` = 48px.
-	 * @default 3
-	 */
-	spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-	/** Section content — typically a heading + body, or stacked cards. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the root `<div>` via `cn()`. */
-	className?: string;
-	/** DOM id, useful when linked to from a `<Label>` or anchor `#hash`. */
-	id?: string;
-	/**
-	 * ARIA role override. Pass `"region"` (paired with `aria-label` /
-	 * `aria-labelledby`) when the section should be a navigable landmark
-	 * for screen-reader users.
-	 */
-	role?: React.AriaRole;
-	/** Accessible label for landmark-role sections. */
-	"aria-label"?: string;
-	/** ID of an element that labels the section (e.g. its heading). */
-	"aria-labelledby"?: string;
-	/** ID of an element that describes the section. */
-	"aria-describedby"?: string;
-}
-
-const SPACING: Record<number, string> = {
-	0: "space-y-0",
-	1: "space-y-2",
-	2: "space-y-4",
-	3: "space-y-6",
-	4: "space-y-8",
-	5: "space-y-10",
-	6: "space-y-12",
-};
-
-export const Section = React.forwardRef<HTMLDivElement, SectionProps>(
-	({ spacing = 3, className, ...rest }, ref) => (
-		<div ref={ref} className={cn(SPACING[spacing] ?? "space-y-6", className)} {...rest} />
-	),
-);
-Section.displayName = "Section";

package/src/components/atoms/separator.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SeparatorProps
-	extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
-	/**
-	 * Layout direction. `horizontal` is a 1px row spanning width;
-	 * `vertical` is a 1px column spanning height.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * When true (default), the separator is hidden from screen readers. Set
-	 * to false for separators that have semantic meaning.
-	 * @default true
-	 */
-	decorative?: boolean;
-	asChild?: boolean;
-	className?: string;
-}
-
-/** Thin divider line — horizontal (default) or vertical. */
-const Separator = React.forwardRef<
-	React.ElementRef<typeof SeparatorPrimitive.Root>,
-	SeparatorProps
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-	<SeparatorPrimitive.Root
-		ref={ref}
-		decorative={decorative}
-		orientation={orientation}
-		className={cn(
-			"shrink-0 bg-border",
-			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-			className,
-		)}
-		{...props}
-	/>
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

package/src/components/atoms/skeleton.tsx

@@ -1,17 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-	className?: string;
-}
-
-/**
- * Animated placeholder for content that's loading. Set width/height via
- * className; Skeleton fills with a pulsing tinted block.
- */
-function Skeleton({ className, ...props }: SkeletonProps) {
-	return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
-}
-
-export { Skeleton };

package/src/components/atoms/slider.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
-	/**
-	 * Controlled value. Pass an array — single-thumb sliders use a length-1
-	 * tuple (`[40]`), range sliders use length-2 (`[20, 80]`). Pair with
-	 * `onValueChange`.
-	 */
-	value?: number[];
-	/**
-	 * Initial value for uncontrolled usage. Same array shape as `value`.
-	 * @default [0]
-	 */
-	defaultValue?: number[];
-	/** Fires on every move. Use this for live previews. */
-	onValueChange?: (value: number[]) => void;
-	/** Fires when the user releases the thumb (commit handler). */
-	onValueCommit?: (value: number[]) => void;
-	/**
-	 * Minimum value the slider can reach.
-	 * @default 0
-	 */
-	min?: number;
-	/**
-	 * Maximum value the slider can reach.
-	 * @default 100
-	 */
-	max?: number;
-	/**
-	 * Quantum the slider snaps to. Set to `1` for integer-only values.
-	 * @default 1
-	 */
-	step?: number;
-	/**
-	 * Minimum gap between two thumbs in a range slider. Ignored for
-	 * single-thumb sliders.
-	 * @default 0
-	 */
-	minStepsBetweenThumbs?: number;
-	/**
-	 * Layout direction.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Reading direction. Affects which end is "min" on the visual axis.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * Whether the slider is inverted — flips which end is "min".
-	 * @default false
-	 */
-	inverted?: boolean;
-	/**
-	 * Disable the slider.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/** Form field name. Required when relying on uncontrolled native form submission. */
-	name?: string;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<span>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tailwind / CSS classes merged onto the slider via `cn()`. */
-	className?: string;
-}
-
-const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-	({ className, ...props }, ref) => (
-		<SliderPrimitive.Root
-			ref={ref}
-			className={cn("relative flex w-full touch-none select-none items-center", className)}
-			{...props}
-		>
-			<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-				<SliderPrimitive.Range className="absolute h-full bg-primary" />
-			</SliderPrimitive.Track>
-			<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-		</SliderPrimitive.Root>
-	),
-);
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

package/src/components/atoms/spinner.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
-	/**
-	 * Pixel size of the rendered SVG.
-	 * @default 16
-	 */
-	size?: number;
-	/** Tailwind / CSS classes merged via `cn()`. */
-	className?: string;
-	/**
-	 * Accessible label announced by screen readers. Defaults to `"Loading"`.
-	 * Pass an empty string to mark as purely decorative when the surrounding
-	 * label already announces the loading state.
-	 */
-	label?: string;
-}
-
-/**
- * Inline loading indicator. Wraps `Loader2` from lucide-react with the
- * canvas `animate-spin` keyframe and an accessible label.
- *
- * Use inside buttons (`{loading ? <Spinner/> : 'Submit'}`), next to inline
- * labels, or anywhere a small spinning indicator is appropriate. For a
- * full-section loader with a message, use `LoadingState` (molecule).
- */
-const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
-	({ size = 16, className, label = "Loading", ...props }, ref) => (
-		<Loader2
-			ref={ref}
-			size={size}
-			className={cn("animate-spin shrink-0", className)}
-			role={label ? "status" : undefined}
-			aria-label={label || undefined}
-			aria-hidden={label ? undefined : true}
-			{...props}
-		/>
-	),
-);
-Spinner.displayName = "Spinner";
-
-export { Spinner };

package/src/components/atoms/switch.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
-	/** Controlled state. */
-	checked?: boolean;
-	/**
-	 * Initial state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultChecked?: boolean;
-	/** Fires when the user flips the switch. */
-	onCheckedChange?: (checked: boolean) => void;
-	/**
-	 * Dims and blocks input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Block native form submit unless the switch is on.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name for native form submission. */
-	name?: string;
-	/** Form field value when submitted. */
-	value?: string;
-	asChild?: boolean;
-	className?: string;
-}
-
-/**
- * Wraps Radix's `Switch.Root` — a binary on/off toggle. Pair with `<Label>`
- * for accessibility.
- */
-const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
-	({ className, ...props }, ref) => (
-		<SwitchPrimitives.Root
-			className={cn(
-				"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-				className,
-			)}
-			{...props}
-			ref={ref}
-		>
-			<SwitchPrimitives.Thumb
-				className={cn(
-					"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-				)}
-			/>
-		</SwitchPrimitives.Root>
-	),
-);
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/components/atoms/textarea.tsx

@@ -1,78 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TextareaProps extends React.ComponentProps<"textarea"> {
-	/** Controlled value. Pair with `onChange`. */
-	value?: string | number | readonly string[];
-	/** Uncontrolled initial value. */
-	defaultValue?: string | number | readonly string[];
-	/** Hint text shown when empty. */
-	placeholder?: string;
-	/**
-	 * Visible row count. Canvas's default min-height is 60px regardless;
-	 * `rows` overrides.
-	 */
-	rows?: number;
-	/** Visible column count (width). Canvas overrides this with `w-full`. */
-	cols?: number;
-	/**
-	 * Dim and block input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Selectable but not editable.
-	 * @default false
-	 */
-	readOnly?: boolean;
-	/**
-	 * Block native form submit unless the textarea has a value.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name for native form submission. */
-	name?: string;
-	/** DOM id for `<Label htmlFor>` association. */
-	id?: string;
-	/** Browser autofill hint. */
-	autoComplete?: string;
-	/**
-	 * Focus on mount.
-	 * @default false
-	 */
-	autoFocus?: boolean;
-	/** Character count upper limit. */
-	maxLength?: number;
-	/** Character count lower limit. */
-	minLength?: number;
-	/** Fires on every keystroke. */
-	onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-	/** Fires on focus. */
-	onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-	/** Fires on blur. */
-	onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-	className?: string;
-}
-
-/**
- * Styled wrapper around the native `<textarea>`. 60px min-height, rounded-md,
- * 1px border, transparent background.
- */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<textarea
-				className={cn(
-					"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };