@olympusoss/canvas 2.20.1 → 3.1.0

package/src/components/atoms/flex-box.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface FlexBoxProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Maps to `flex-direction`.
-	 * @default "row"
-	 */
-	direction?: "row" | "column";
-	/**
-	 * Maps to `align-items`.
-	 * @default "flex-start"
-	 */
-	align?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
-	/**
-	 * Maps to `justify-content`.
-	 * @default "flex-start"
-	 */
-	justify?:
-		| "flex-start"
-		| "center"
-		| "flex-end"
-		| "space-between"
-		| "space-around"
-		| "space-evenly";
-	/** Tailwind gap step (0–6) or a raw CSS value. */
-	gap?: number | string;
-	/**
-	 * Maps to `flex-wrap`. Pass `true` for `flex-wrap`, `false` for
-	 * `flex-nowrap`.
-	 * @default false
-	 */
-	wrap?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DIRECTION: Record<NonNullable<FlexBoxProps["direction"]>, string> = {
-	row: "flex-row",
-	column: "flex-col",
-};
-
-const ALIGN: Record<NonNullable<FlexBoxProps["align"]>, string> = {
-	"flex-start": "items-start",
-	center: "items-center",
-	"flex-end": "items-end",
-	stretch: "items-stretch",
-	baseline: "items-baseline",
-};
-
-const JUSTIFY: Record<NonNullable<FlexBoxProps["justify"]>, string> = {
-	"flex-start": "justify-start",
-	center: "justify-center",
-	"flex-end": "justify-end",
-	"space-between": "justify-between",
-	"space-around": "justify-around",
-	"space-evenly": "justify-evenly",
-};
-
-const GAP: Record<number, string> = {
-	0: "gap-0",
-	1: "gap-2",
-	2: "gap-4",
-	3: "gap-6",
-	4: "gap-8",
-	5: "gap-10",
-	6: "gap-12",
-};
-
-export const FlexBox = React.forwardRef<HTMLDivElement, FlexBoxProps>(
-	(
-		{
-			direction = "row",
-			align = "flex-start",
-			justify = "flex-start",
-			gap,
-			wrap = false,
-			className,
-			style,
-			...rest
-		},
-		ref,
-	) => {
-		const gapClass = typeof gap === "number" ? (GAP[gap] ?? "") : "";
-		const gapStyle = typeof gap === "string" ? { gap } : undefined;
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex",
-					DIRECTION[direction],
-					ALIGN[align],
-					JUSTIFY[justify],
-					gapClass,
-					wrap && "flex-wrap",
-					className,
-				)}
-				style={gapStyle ? { ...gapStyle, ...style } : style}
-				{...rest}
-			/>
-		);
-	},
-);
-FlexBox.displayName = "FlexBox";

package/src/components/atoms/icon.tsx

@@ -1,34 +0,0 @@
-import { icons, type LucideIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export type IconName = keyof typeof icons;
-
-export const iconNames = Object.keys(icons) as IconName[];
-
-export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-	/**
-	 * Lucide icon name (PascalCase, e.g. `ChevronRight`, `Mail`). Only icons
-	 * re-exported through `lucide-react` are valid.
-	 */
-	name: IconName;
-	/**
-	 * Pixel size of the rendered SVG. Defaults to 16; pass any number to
-	 * override (e.g. 20, 24).
-	 * @default 16
-	 */
-	size?: number;
-	className?: string;
-}
-
-const Icon = React.forwardRef<SVGSVGElement, IconProps>(
-	({ name, size = 16, className, ...props }, ref) => {
-		const LucideIcon: LucideIcon = icons[name];
-		if (!LucideIcon) return null;
-		return <LucideIcon ref={ref} size={size} className={cn("shrink-0", className)} {...props} />;
-	},
-);
-Icon.displayName = "Icon";
-
-export { Icon };

package/src/components/atoms/input.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface InputProps extends React.ComponentProps<"input"> {
-	/**
-	 * Native input type. Drives keyboard, validation, and on iOS the
-	 * picker.
-	 * @default "text"
-	 */
-	type?: React.HTMLInputTypeAttribute;
-	/**
-	 * Controlled value. Pair with `onChange`. For uncontrolled inputs use
-	 * `defaultValue` instead.
-	 */
-	value?: string | number | readonly string[];
-	/** Initial value for an uncontrolled input. Ignored if `value` is also passed. */
-	defaultValue?: string | number | readonly string[];
-	/** Hint text shown when the input is empty. Renders in `text-muted-foreground`. */
-	placeholder?: string;
-	/**
-	 * Visually dims to 50% and blocks all input. Pair with `Label` so the
-	 * dim cascades.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Selectable but not editable. Useful for displaying server-set values.
-	 * @default false
-	 */
-	readOnly?: boolean;
-	/**
-	 * Block native form submit unless the input has a value.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name. Required when relying on uncontrolled native form submission. */
-	name?: string;
-	/** DOM id. Match this from `<Label htmlFor>` for screen-reader association. */
-	id?: string;
-	/** Browser autofill hint. See MDN for the full token list. */
-	autoComplete?: string;
-	/**
-	 * Focus the input on mount. Use sparingly — surprises keyboard users.
-	 * @default false
-	 */
-	autoFocus?: boolean;
-	/** Native HTML5 validation regex. Triggers `:invalid` if the value doesn't match. */
-	pattern?: string;
-	/** Character count limit for text inputs. */
-	maxLength?: number;
-	/** Minimum character count for text inputs. */
-	minLength?: number;
-	/** Numeric / date lower bound. Honoured by `type="number"` / `"date"` / `"time"` / `"range"`. */
-	min?: string | number;
-	/** Numeric / date upper bound. */
-	max?: string | number;
-	/** Step increment for `number` / `range` / `date` types. */
-	step?: string | number;
-	/** Fires on every keystroke. Read `e.target.value`. Required if you pass `value`. */
-	onChange?: React.ChangeEventHandler<HTMLInputElement>;
-	/** Focus event. Common for focus-driven typeahead lookups. */
-	onFocus?: React.FocusEventHandler<HTMLInputElement>;
-	/** Blur event. Common for blur-validation. */
-	onBlur?: React.FocusEventHandler<HTMLInputElement>;
-	className?: string;
-}
-
-/**
- * Styled wrapper around the native `<input>` — 36px tall, rounded-md, 1px
- * border, transparent background, canvas focus ring. Forwards every native
- * input attribute through to the underlying element.
- */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				data-slot="input"
-				className={cn(
-					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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}
-			/>
-		);
-	},
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/components/atoms/label.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const labelVariants = cva(
-	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-export interface LabelProps
-	extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
-		VariantProps<typeof labelVariants> {
-	/**
-	 * ID of the form control this label describes. Sets `for` on the
-	 * underlying `<label>` so screen readers and click-to-focus work.
-	 * Match this with the input's `id`.
-	 */
-	htmlFor?: string;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<label>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Label text. Can include nested elements (icons, helper text). */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the label via `cn()`. */
-	className?: string;
-}
-
-const Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(
-	({ className, ...props }, ref) => (
-		<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-	),
-);
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

package/src/components/atoms/logo.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface LogoProps extends React.HTMLAttributes<HTMLElement> {
-	/**
-	 * Custom logo image. When provided, renders an `<img>` instead of the
-	 * default Olympus ring mark. Apps consuming canvas pass their own brand
-	 * here.
-	 */
-	src?: string;
-	/** Alt text for the custom-image variant. Required when `src` is set. */
-	alt?: string;
-	/** Pixel size for the custom-image variant only. Default 24. */
-	size?: number;
-}
-
-const OlympusRing = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGSVGElement>>(
-	({ className, ...props }, ref) => {
-		const gradientId = React.useId();
-		return (
-			<svg
-				ref={ref}
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 440 736"
-				className={className}
-				{...props}
-			>
-				<defs>
-					<linearGradient id={gradientId} x1="1" y1="1" x2="0" y2="0">
-						<stop offset="0%" stopColor="#1E40AF" />
-						<stop offset="100%" stopColor="#60A5FA" />
-					</linearGradient>
-				</defs>
-				<g transform="translate(220, 368) rotate(90) translate(-700, -510)">
-					<path
-						fill={`url(#${gradientId})`}
-						fillRule="evenodd"
-						d="M 552 300 H 848 A 210 210 0 0 1 1058 510 A 210 210 0 0 1 848 720 H 552 A 210 210 0 0 1 342 510 A 210 210 0 0 1 552 300 Z M 582 386 H 818 A 124 124 0 0 1 942 510 A 124 124 0 0 1 818 634 H 582 A 124 124 0 0 1 458 510 A 124 124 0 0 1 582 386 Z"
-					/>
-				</g>
-			</svg>
-		);
-	},
-);
-OlympusRing.displayName = "Logo.OlympusRing";
-
-/**
- * Brand-agnostic logo slot.
- *
- * - With no `src`: renders the Olympus gradient-ring mark (the canonical
- *   brand mark — viewBox 0 0 440 736, blue-gradient stadium). Size via
- *   `className` (e.g. `className="h-10 w-auto"`) — the SVG honours its
- *   non-square viewBox aspect ratio.
- * - With `src`: renders an `<img>` so consumers can drop in their own brand.
- *
- * The deprecated sideways-O ellipse mark and `showText` wordmark lockup
- * have been removed. Use `<BrandLockup logo={…} productName="…" />` for
- * the lockup.
- */
-const Logo = React.forwardRef<HTMLElement, LogoProps>(
-	({ src, alt = "", size = 24, className, ...props }, ref) => {
-		if (src) {
-			return (
-				<img
-					ref={ref as React.Ref<HTMLImageElement>}
-					src={src}
-					alt={alt}
-					width={size}
-					height={size}
-					className={cn("shrink-0", className)}
-					{...(props as React.ImgHTMLAttributes<HTMLImageElement>)}
-				/>
-			);
-		}
-		return (
-			<OlympusRing
-				ref={ref as React.Ref<SVGSVGElement>}
-				className={className}
-				{...(props as React.SVGAttributes<SVGSVGElement>)}
-			/>
-		);
-	},
-);
-Logo.displayName = "Logo";
-
-export { Logo };

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";