@olympusoss/canvas 2.20.1 → 4.0.0

package/src/components/atoms/badge.tsx

@@ -1,44 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-	"inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	{
-		variants: {
-			variant: {
-				default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-				secondary:
-					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				destructive:
-					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-				outline: "text-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-
-export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {
-	/**
-	 * Visual style. `default` is filled brand colour, `secondary` is a muted
-	 * neutral, `outline` is bordered with no fill, `destructive` flags an
-	 * error or warning state.
-	 * @default "default"
-	 */
-	variant?: "default" | "secondary" | "destructive" | "outline";
-	/** Badge label or any nested elements. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-	return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/components/atoms/brand-mark.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BrandMarkProps extends React.SVGAttributes<SVGSVGElement> {
-	/**
-	 * SVG path data (`d` attribute) for the brand mark. Required — canvas
-	 * does not ship a default brand shape; consuming apps supply their own.
-	 */
-	path: string;
-	/**
-	 * SVG `viewBox` matching the path's coordinate space.
-	 * @default "0 0 24 24"
-	 */
-	viewBox?: string;
-	/**
-	 * Optional inner `transform` applied to the path's `<g>` group — useful
-	 * when the path coordinates need to be translated, rotated, or scaled
-	 * relative to the viewBox.
-	 */
-	transform?: string;
-	/**
-	 * Gradient start colour. When omitted, the path is filled with
-	 * `currentColor` and no gradient is generated.
-	 */
-	from?: string;
-	/**
-	 * Gradient end colour. Required when `from` is set.
-	 */
-	to?: string;
-}
-
-/**
- * Generic brand-mark primitive. Renders a single SVG `path` either with
- * `currentColor` (the default) or with a two-stop linear gradient when both
- * `from` and `to` are provided. Sizing is controlled via `className`
- * (`h-10 w-auto`); the SVG honours its `viewBox` aspect ratio.
- *
- * Apps consuming canvas typically build a thin wrapper around this component
- * that hard-codes their own brand path / gradient — see the docs site's
- * `OlympusLogo` for a worked example.
- */
-const BrandMark = React.forwardRef<SVGSVGElement, BrandMarkProps>(
-	({ path, viewBox = "0 0 24 24", transform, from, to, className, ...props }, ref) => {
-		const gradientId = React.useId();
-		const useGradient = from !== undefined && to !== undefined;
-		const fill = useGradient ? `url(#${gradientId})` : "currentColor";
-		const pathEl = <path d={path} fill={fill} fillRule="evenodd" />;
-		return (
-			<svg
-				ref={ref}
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox={viewBox}
-				className={cn("shrink-0", className)}
-				{...props}
-			>
-				{useGradient && (
-					<defs>
-						<linearGradient id={gradientId} x1="1" y1="1" x2="0" y2="0">
-							<stop offset="0%" stopColor={from} />
-							<stop offset="100%" stopColor={to} />
-						</linearGradient>
-					</defs>
-				)}
-				{transform ? <g transform={transform}>{pathEl}</g> : pathEl}
-			</svg>
-		);
-	},
-);
-BrandMark.displayName = "BrandMark";
-
-export { BrandMark };

package/src/components/atoms/button.tsx

@@ -1,105 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground shadow hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary hover:text-brand",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	/**
-	 * Visual emphasis preset. `default` is the primary action, `destructive`
-	 * is for irreversible actions, `outline` and `secondary` are quieter,
-	 * `ghost` is borderless, `link` looks like body-text with a soft
-	 * color shift on hover (no underline).
-	 * @default "default"
-	 */
-	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-	/**
-	 * Height + horizontal padding preset. `sm` is 32px, `default` is 36px,
-	 * `lg` is 40px, `icon` is square 36×36 for icon-only buttons (always
-	 * pair with `aria-label`).
-	 * @default "default"
-	 */
-	size?: "default" | "sm" | "lg" | "icon";
-	/**
-	 * Render as a Radix Slot — forwards className and behaviour onto the
-	 * immediate child element instead of rendering a wrapper `<button>`.
-	 * Common pattern for using a router `<Link>` while keeping the Button
-	 * styling.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Visible label or any nested elements (icons, badges). */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the root element via `cn()`. */
-	className?: string;
-	/**
-	 * When true, dims the button to 50% opacity and blocks pointer/keyboard
-	 * input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Native HTML button type. `submit` triggers parent form submission;
-	 * `reset` resets parent form fields; `button` does neither.
-	 * @default "button"
-	 */
-	type?: "button" | "submit" | "reset";
-	/** Click handler. Receives a `MouseEvent<HTMLButtonElement>`. */
-	onClick?: React.MouseEventHandler<HTMLButtonElement>;
-	/** Form name when this button submits/resets a form (for forms with multiple buttons). */
-	name?: string;
-	/** Form value sent with the form when this button is the submitter. */
-	value?: string | number | readonly string[];
-	/**
-	 * ID of the form this button belongs to, when the button sits outside
-	 * the `<form>` element.
-	 */
-	form?: string;
-	/** Tab order. Default behaviour is one of native `<button>` tab focus. */
-	tabIndex?: number;
-	/** Accessible label, required for icon-only buttons (`size="icon"`). */
-	"aria-label"?: string;
-	/** ID of an element that describes the button's purpose. */
-	"aria-describedby"?: string;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/atoms/checkbox.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface CheckboxProps
-	extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-	/**
-	 * Controlled checked state. Pass `'indeterminate'` to render the dash
-	 * glyph instead of the check.
-	 */
-	checked?: boolean | "indeterminate";
-	/**
-	 * Initial state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultChecked?: boolean | "indeterminate";
-	/** Fires when the user toggles the checkbox. Use this instead of `onChange`. */
-	onCheckedChange?: (checked: boolean | "indeterminate") => void;
-	/**
-	 * Dims to 50% and blocks input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Block native form submit unless the box is checked.
-	 * @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 `Checkbox.Root`. The check glyph is rendered inside
- * automatically.
- */
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-	({ className, ...props }, ref) => (
-		<CheckboxPrimitive.Root
-			ref={ref}
-			className={cn(
-				"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-				className,
-			)}
-			{...props}
-		>
-			<CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
-				<Check className="h-4 w-4" />
-			</CheckboxPrimitive.Indicator>
-		</CheckboxPrimitive.Root>
-	),
-);
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

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