@olympusoss/canvas 2.20.2 → 4.0.0

package/src/components/molecules/field-display.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface FieldDisplayProps extends React.HTMLAttributes<HTMLDListElement> {
-	label: string;
-	value?: React.ReactNode;
-	mono?: boolean;
-}
-
-const FieldDisplay = React.forwardRef<HTMLDListElement, FieldDisplayProps>(
-	({ label, value, mono = false, className, ...props }, ref) => {
-		return (
-			<dl
-				ref={ref}
-				className={cn("grid grid-cols-[180px_1fr] items-baseline gap-4 py-2", className)}
-				{...props}
-			>
-				<dt className="text-[13px] font-medium text-muted-foreground">{label}</dt>
-				<dd
-					className={cn(
-						"break-words text-[13px]",
-						mono && "font-mono text-[12.5px]",
-						value ? "text-foreground" : "text-muted-foreground",
-					)}
-				>
-					{value ?? "—"}
-				</dd>
-			</dl>
-		);
-	},
-);
-FieldDisplay.displayName = "FieldDisplay";
-
-export { FieldDisplay };

package/src/components/molecules/input-otp.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const InputOTP = React.forwardRef<
-	React.ElementRef<typeof OTPInput>,
-	React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-	<OTPInput
-		ref={ref}
-		containerClassName={cn(
-			"flex items-center gap-2 has-[:disabled]:opacity-50",
-			containerClassName,
-		)}
-		className={cn("disabled:cursor-not-allowed", className)}
-		{...props}
-	/>
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("flex items-center", className)} {...props} />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-	const inputOTPContext = React.useContext(OTPInputContext);
-	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-
-	/* c8 ignore next -- hasFakeCaret is only set by the input-otp library for a live selection range, which jsdom's fireEvent doesn't produce */
-	const fakeCaret = hasFakeCaret ? (
-		<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-		</div>
-	) : null;
-
-	return (
-		<div
-			ref={ref}
-			className={cn(
-				"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-				isActive && "z-10 ring-1 ring-ring",
-				className,
-			)}
-			{...props}
-		>
-			{char}
-			{fakeCaret}
-		</div>
-	);
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-	<div ref={ref} role="separator" {...props}>
-		<Minus />
-	</div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/molecules/launcher-card.tsx

@@ -1,152 +0,0 @@
-// molecules: can import tokens/, lib/utils, atoms/.
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const TONE_STYLES = {
-	default: {
-		bg: "hsl(var(--primary) / 0.1)",
-		fg: "hsl(var(--primary))",
-		ring: "hsl(var(--primary) / 0.2)",
-	},
-	indigo: {
-		bg: "hsl(231 92% 96%)",
-		fg: "hsl(231 60% 38%)",
-		ring: "hsl(231 80% 60% / 0.25)",
-	},
-	violet: {
-		bg: "hsl(262 90% 96%)",
-		fg: "hsl(262 55% 42%)",
-		ring: "hsl(262 80% 60% / 0.25)",
-	},
-	slate: {
-		bg: "hsl(230 25% 95%)",
-		fg: "hsl(230 30% 30%)",
-		ring: "hsl(230 20% 60% / 0.25)",
-	},
-} as const;
-
-export type LauncherCardTone = keyof typeof TONE_STYLES;
-
-export interface LauncherCardProps {
-	/**
-	 * Top-left identifier — typically a letter (`"C"`) or a small icon.
-	 */
-	badge: React.ReactNode;
-	/** Card heading. */
-	title: string;
-	/** One-or-two sentence body copy below the title. */
-	description: string;
-	/**
-	 * Colour key for the badge background, foreground, and hover ring.
-	 * Defaults to `"default"`, which uses the `--primary` token.
-	 */
-	tone?: LauncherCardTone;
-	/**
-	 * If set, the entire card becomes a link with a hover-lift effect.
-	 * Pair with `linkComponent` to route through a framework-specific Link
-	 * component (e.g. Next.js).
-	 */
-	href?: string;
-	/**
-	 * `target` attribute applied when `href` is set. Defaults to `"_self"`.
-	 */
-	target?: React.HTMLAttributeAnchorTarget;
-	/**
-	 * `rel` attribute applied when `href` is set. Defaults to `"noopener"`
-	 * when `target === "_blank"`.
-	 */
-	rel?: string;
-	/**
-	 * Override the rendered link element when `href` is set
-	 * (e.g. `Link` from `next/link`). Falls back to `<a>`.
-	 */
-	linkComponent?: React.ElementType;
-	/**
-	 * Footer slot. Typically a small CTA row (e.g. arrow link) or, when the
-	 * card is non-interactive, an inline status / detail block.
-	 */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const SHARED_CLASSES =
-	"group flex flex-col gap-4 rounded-[14px] border border-border bg-card p-6 text-card-foreground";
-
-const INTERACTIVE_CLASSES =
-	"no-underline transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-[0_20px_40px_-20px_var(--launcher-tone-ring),0_8px_16px_-8px_rgb(0_0_0/0.08)] hover:[border-color:var(--launcher-tone-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
-
-const LauncherCard = React.forwardRef<HTMLElement, LauncherCardProps>(
-	(
-		{
-			badge,
-			title,
-			description,
-			tone = "default",
-			href,
-			target,
-			rel,
-			linkComponent,
-			children,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const t = TONE_STYLES[tone];
-		const interactive = Boolean(href);
-		const toneVars = {
-			"--launcher-tone-fg": t.fg,
-			"--launcher-tone-ring": t.ring,
-		} as React.CSSProperties;
-
-		const inner = (
-			<>
-				<div className="flex items-center gap-3.5">
-					<div
-						className="flex h-11 w-11 items-center justify-center rounded-[10px] text-lg font-semibold tracking-tight"
-						style={{ background: t.bg, color: t.fg }}
-					>
-						{badge}
-					</div>
-					<div className="text-[17px] font-semibold tracking-tight">{title}</div>
-				</div>
-				<p className="m-0 flex-1 text-sm leading-relaxed text-muted-foreground">{description}</p>
-				{children != null && <div className="mt-1">{children}</div>}
-			</>
-		);
-
-		if (interactive) {
-			const LinkEl = linkComponent || "a";
-			const resolvedRel = rel ?? (target === "_blank" ? "noopener" : undefined);
-			return (
-				<LinkEl
-					ref={ref as React.Ref<HTMLAnchorElement>}
-					href={href}
-					target={target}
-					rel={resolvedRel}
-					className={cn(SHARED_CLASSES, INTERACTIVE_CLASSES, className)}
-					style={toneVars}
-					{...props}
-				>
-					{inner}
-				</LinkEl>
-			);
-		}
-
-		return (
-			<div
-				ref={ref as React.Ref<HTMLDivElement>}
-				className={cn(SHARED_CLASSES, className)}
-				{...props}
-			>
-				{inner}
-			</div>
-		);
-	},
-);
-LauncherCard.displayName = "LauncherCard";
-
-export { LauncherCard };

package/src/components/molecules/loading-state.tsx

@@ -1,36 +0,0 @@
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface LoadingStateProps extends React.HTMLAttributes<HTMLDivElement> {
-	message?: string;
-	size?: "sm" | "default" | "lg";
-}
-
-const sizeMap = {
-	sm: "h-4 w-4",
-	default: "h-6 w-6",
-	lg: "h-8 w-8",
-};
-
-const LoadingState = React.forwardRef<HTMLDivElement, LoadingStateProps>(
-	({ message = "Loading...", size = "default", className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex flex-col items-center justify-center gap-3 py-8 text-muted-foreground",
-					className,
-				)}
-				{...props}
-			>
-				<Loader2 className={cn("animate-spin", sizeMap[size])} />
-				{message && <p className="text-sm">{message}</p>}
-			</div>
-		);
-	},
-);
-LoadingState.displayName = "LoadingState";
-
-export { LoadingState };

package/src/components/molecules/notification-item.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-	/** Leading icon — typically a Canvas `<Icon name="…" />`. */
-	icon?: React.ReactNode;
-	/** Tint variant for the icon's circular background. */
-	iconTone?: "neutral" | "destructive" | "info" | "success" | "warning";
-	/** Bold title line. */
-	title: React.ReactNode;
-	/** Optional secondary line (description / metadata). */
-	description?: React.ReactNode;
-	/** Right-aligned timestamp (relative or absolute). */
-	timestamp?: React.ReactNode;
-	/** When provided, the entire row becomes clickable. */
-	onClick?: () => void;
-}
-
-const TONE: Record<NonNullable<NotificationItemProps["iconTone"]>, string> = {
-	neutral: "bg-muted text-muted-foreground",
-	destructive: "bg-[hsl(var(--stat-destructive)/0.1)] text-[hsl(var(--stat-destructive))]",
-	info: "bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]",
-	success: "bg-[hsl(var(--stat-success)/0.1)] text-[hsl(var(--stat-success))]",
-	warning: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
-};
-
-export const NotificationItem = React.forwardRef<HTMLDivElement, NotificationItemProps>(
-	(
-		{ icon, iconTone = "neutral", title, description, timestamp, onClick, className, ...props },
-		ref,
-	) => {
-		const Comp = onClick ? "button" : "div";
-		return (
-			<Comp
-				ref={ref as never}
-				type={onClick ? "button" : undefined}
-				onClick={onClick}
-				className={cn(
-					"flex w-full items-start gap-3 px-3 py-3 text-left transition-colors",
-					onClick && "cursor-pointer hover:bg-accent",
-					className,
-				)}
-				{...(props as Record<string, unknown>)}
-			>
-				{icon && (
-					<div
-						className={cn(
-							"flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
-							TONE[iconTone],
-						)}
-					>
-						{icon}
-					</div>
-				)}
-				<div className="min-w-0 flex-1 space-y-0.5">
-					<div className="text-[13px] font-semibold text-foreground">{title}</div>
-					{description && <div className="text-[12.5px] text-muted-foreground">{description}</div>}
-					{timestamp && (
-						<div className="font-mono text-[11px] text-muted-foreground">{timestamp}</div>
-					)}
-				</div>
-			</Comp>
-		);
-	},
-);
-NotificationItem.displayName = "NotificationItem";

package/src/components/molecules/notification-list.tsx

@@ -1,45 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface NotificationListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-	/** Header title — defaults to "Notifications". */
-	title?: React.ReactNode;
-	/** Optional count chip rendered to the right of the title (e.g. "3 new"). */
-	count?: React.ReactNode;
-	/** Footer slot — typically a single full-width "View all" link/button. */
-	footer?: React.ReactNode;
-	/** Notification rows — typically `<NotificationItem>` instances. */
-	children?: React.ReactNode;
-}
-
-export const NotificationList = React.forwardRef<HTMLDivElement, NotificationListProps>(
-	({ title = "Notifications", count, footer, children, className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"w-80 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
-					className,
-				)}
-				{...props}
-			>
-				<div className="flex items-center justify-between border-b border-border px-3 py-2.5">
-					<span className="text-[13px] font-semibold">{title}</span>
-					{count != null && (
-						<span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
-							{count}
-						</span>
-					)}
-				</div>
-				<div className="max-h-96 divide-y divide-border overflow-y-auto">{children}</div>
-				{footer && (
-					<div className="border-t border-border bg-muted/30 px-3 py-2 text-center text-[12.5px] font-medium">
-						{footer}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-NotificationList.displayName = "NotificationList";

package/src/components/molecules/number-badge.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-	/** Numeric count. When omitted (or `dot` is true), renders a tone-tinted dot. */
-	count?: number;
-	/** Cap displayed count — anything above renders as `${max}+`. Default 99. */
-	max?: number;
-	/** Color tone. */
-	tone?: "destructive" | "default" | "muted";
-	/** Render as a dot regardless of count. */
-	dot?: boolean;
-}
-
-const TONE: Record<NonNullable<NumberBadgeProps["tone"]>, string> = {
-	destructive: "bg-destructive text-destructive-foreground",
-	default: "bg-primary text-primary-foreground",
-	muted: "bg-muted text-muted-foreground",
-};
-
-/**
- * Small overlay badge for counts on icon buttons (notification bell, inbox,
- * etc.). Position it absolutely against a `relative` parent — typically by
- * pairing with `absolute -right-1 -top-1` or similar utility classes via
- * `className`. Defaults to top-right placement.
- */
-export const NumberBadge = React.forwardRef<HTMLSpanElement, NumberBadgeProps>(
-	({ count, max = 99, tone = "destructive", dot, className, ...props }, ref) => {
-		const isDot = dot || count == null;
-		const display = !isDot && count != null && count > max ? `${max}+` : `${count ?? ""}`;
-		return (
-			<span
-				ref={ref}
-				role="status"
-				aria-label={isDot ? "New" : `${count} new`}
-				className={cn(
-					"pointer-events-none absolute -right-1 -top-1 inline-flex items-center justify-center font-mono font-medium tabular-nums",
-					isDot
-						? "h-1.5 w-1.5 rounded-full"
-						: "min-w-[1.125rem] rounded-full px-1 text-[10px] leading-none",
-					!isDot && "h-[1.125rem]",
-					TONE[tone],
-					className,
-				)}
-				{...props}
-			>
-				{!isDot && display}
-			</span>
-		);
-	},
-);
-NumberBadge.displayName = "NumberBadge";

package/src/components/molecules/or-separator.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface OrSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Text rendered between the two rule segments.
-	 * @default "or"
-	 */
-	label?: React.ReactNode;
-}
-
-/**
- * Horizontal divider with a centred label, e.g. between social-provider
- * buttons and an email/password form. Two `border-t` rules flank a short
- * upper-case label sitting on the card background.
- *
- * Place inside a card whose background is `bg-card`; the label inherits
- * that surface so the rules visually meet behind it.
- */
-const OrSeparator = React.forwardRef<HTMLDivElement, OrSeparatorProps>(
-	({ label = "or", className, ...props }, ref) => (
-		<div
-			ref={ref}
-			role="separator"
-			aria-orientation="horizontal"
-			className={cn("flex items-center gap-3 py-1", className)}
-			{...props}
-		>
-			<div className="h-px flex-1 bg-border" />
-			<span className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">{label}</span>
-			<div className="h-px flex-1 bg-border" />
-		</div>
-	),
-);
-OrSeparator.displayName = "OrSeparator";
-
-export { OrSeparator };

package/src/components/molecules/page-header.tsx

@@ -1,88 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "../atoms/icon";
-
-export interface PageHeaderBreadcrumb {
-	label: string;
-	href?: string;
-}
-
-export interface PageHeaderProps {
-	title: string | React.ReactNode;
-	subtitle?: string | React.ReactNode;
-	icon?: React.ReactNode;
-	actions?: React.ReactNode;
-	breadcrumbs?: PageHeaderBreadcrumb[];
-	/**
-	 * Optional link wrapper. Pass Next.js `Link` or React Router `Link` to make
-	 * breadcrumb links client-side routable. Defaults to a plain `<a>`.
-	 */
-	linkComponent?: React.ComponentType<{
-		href: string;
-		className?: string;
-		children: React.ReactNode;
-	}>;
-	className?: string;
-}
-
-export function PageHeader({
-	title,
-	subtitle,
-	icon,
-	actions,
-	breadcrumbs,
-	linkComponent: LinkComp,
-	className,
-}: PageHeaderProps) {
-	return (
-		<div className={cn("mb-6 flex items-start justify-between", className)}>
-			<div className="space-y-1">
-				{breadcrumbs && breadcrumbs.length > 0 && (
-					<div className="mb-2 flex items-center gap-1 text-sm text-muted-foreground">
-						{breadcrumbs.map((crumb, i) => (
-							<span key={crumb.label} className="flex items-center gap-1">
-								{crumb.href ? (
-									LinkComp ? (
-										<LinkComp href={crumb.href} className="hover:text-brand transition-colors">
-											{crumb.label}
-										</LinkComp>
-									) : (
-										<a href={crumb.href} className="hover:text-brand transition-colors">
-											{crumb.label}
-										</a>
-									)
-								) : (
-									<span className="text-foreground">{crumb.label}</span>
-								)}
-								{i < breadcrumbs.length - 1 && <Icon name="ChevronRight" className="h-3 w-3" />}
-							</span>
-						))}
-					</div>
-				)}
-				<div className="flex items-center gap-3">
-					{icon}
-					{typeof title === "string" ? (
-						<h1 className="text-[22px] font-semibold tracking-[-0.02em] text-foreground">
-							{title}
-						</h1>
-					) : (
-						title
-					)}
-				</div>
-				{subtitle && (
-					<div>
-						{typeof subtitle === "string" ? (
-							<p className="text-sm text-muted-foreground">{subtitle}</p>
-						) : (
-							subtitle
-						)}
-					</div>
-				)}
-			</div>
-			{actions && <div className="flex items-center gap-2">{actions}</div>}
-		</div>
-	);
-}
-
-PageHeader.displayName = "PageHeader";

package/src/components/molecules/page-tabs.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface PageTabsItem {
-	label: string;
-	value: string;
-	icon?: React.ReactNode;
-	badge?: number | string;
-}
-
-export interface PageTabsProps {
-	tabs: PageTabsItem[];
-	value: string;
-	onChange: (value: string) => void;
-	variant?: "default" | "pills" | "underline";
-}
-
-function renderBadge(badge: number | string | undefined, active: boolean): React.ReactNode {
-	if (badge === undefined) return null;
-	return (
-		<span
-			className={cn(
-				"ml-1 rounded-full px-1.5 py-0.5 text-xs font-medium",
-				active ? "bg-primary/10 text-primary" : "bg-muted-foreground/10 text-muted-foreground",
-			)}
-		>
-			{badge}
-		</span>
-	);
-}
-
-export function PageTabs({ tabs, value, onChange, variant = "default" }: PageTabsProps) {
-	if (variant === "underline") {
-		return (
-			<div className="flex gap-4 border-b border-border">
-				{tabs.map((tab) => {
-					const active = value === tab.value;
-					return (
-						<button
-							key={tab.value}
-							type="button"
-							onClick={() => onChange(tab.value)}
-							className={cn(
-								"inline-flex items-center gap-1.5 border-b-2 px-1 pb-3 text-sm font-medium transition-colors",
-								active
-									? "border-primary text-primary"
-									: "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
-							)}
-						>
-							{tab.icon && <span className="h-4 w-4">{tab.icon}</span>}
-							{tab.label}
-							{renderBadge(tab.badge, active)}
-						</button>
-					);
-				})}
-			</div>
-		);
-	}
-
-	const isPills = variant === "pills";
-	return (
-		<div className={cn("flex flex-wrap gap-1", isPills && "rounded-lg bg-muted p-1")}>
-			{tabs.map((tab) => {
-				const active = value === tab.value;
-				return (
-					<button
-						key={tab.value}
-						type="button"
-						onClick={() => onChange(tab.value)}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-							isPills
-								? active
-									? "bg-background text-foreground shadow-sm"
-									: "text-muted-foreground hover:text-foreground"
-								: active
-									? "bg-accent text-accent-foreground"
-									: "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-						)}
-					>
-						{tab.icon && <span className="h-4 w-4">{tab.icon}</span>}
-						{tab.label}
-						{renderBadge(tab.badge, active)}
-					</button>
-				);
-			})}
-		</div>
-	);
-}
-
-PageTabs.displayName = "PageTabs";