@olympusoss/canvas 2.20.1 → 3.1.0

package/src/components/molecules/code-block.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { Check, Copy } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-	code: string;
-	language?: string;
-	showCopy?: boolean;
-	/**
-	 * `"light"` (default) renders against `bg-muted`; `"dark"` switches to a
-	 * near-black terminal palette (`#0a0a0b` background, `#e4e4e7` text) for
-	 * use on marketing surfaces.
-	 */
-	theme?: "light" | "dark";
-}
-
-const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
-	({ code, language, showCopy = true, theme = "light", className, ...props }, ref) => {
-		const [copied, setCopied] = React.useState(false);
-		const isDark = theme === "dark";
-
-		const handleCopy = React.useCallback(async () => {
-			await navigator.clipboard.writeText(code);
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2000);
-		}, [code]);
-
-		return (
-			<div
-				ref={ref}
-				data-slot="code-block"
-				className={cn(
-					"relative overflow-hidden rounded-md",
-					isDark ? "border border-border" : "bg-muted",
-					className,
-				)}
-				style={isDark ? { background: "#0a0a0b" } : undefined}
-				{...props}
-			>
-				{(language || showCopy) && (
-					<div
-						className={cn(
-							"flex items-center justify-between px-4 py-2",
-							isDark ? undefined : "border-b",
-						)}
-						style={isDark ? { borderBottom: "1px solid #222" } : undefined}
-					>
-						{language ? (
-							<span
-								className={cn("text-xs font-medium", !isDark && "text-muted-foreground")}
-								style={isDark ? { color: "#6b7280" } : undefined}
-							>
-								{language}
-							</span>
-						) : (
-							<span />
-						)}
-						{showCopy && (
-							<Button
-								variant="ghost"
-								size="icon"
-								className={cn(
-									"h-6 w-6",
-									isDark && "text-zinc-400 hover:bg-white/5 hover:text-zinc-100",
-								)}
-								onClick={handleCopy}
-							>
-								{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-							</Button>
-						)}
-					</div>
-				)}
-				<pre className="overflow-x-auto p-4" style={isDark ? { color: "#e4e4e7" } : undefined}>
-					<code className="text-sm">{code}</code>
-				</pre>
-			</div>
-		);
-	},
-);
-CodeBlock.displayName = "CodeBlock";
-
-export { CodeBlock };

package/src/components/molecules/countdown-button.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button, type ButtonProps } from "../atoms/button";
-
-export interface CountdownButtonProps
-	extends Omit<ButtonProps, "disabled" | "onClick" | "children"> {
-	/**
-	 * Seconds to wait before the button becomes clickable. The countdown
-	 * starts when the component mounts and resets every time `triggerKey`
-	 * changes.
-	 * @default 30
-	 */
-	duration?: number;
-	/**
-	 * Bump this value to restart the countdown (e.g. after a successful
-	 * resend, set it to `Date.now()` so the button locks out again).
-	 */
-	triggerKey?: string | number;
-	/** Called when the button is clicked and the countdown has elapsed. */
-	onClick?: () => void;
-	/**
-	 * Render-prop for the button label. Receives `secondsLeft` (0 when
-	 * ready). Default renders `"Resend"` / `"Resend in 23s"`.
-	 */
-	children?: React.ReactNode | ((secondsLeft: number) => React.ReactNode);
-	/**
-	 * Action verb shown in the default label. Used as `${verb}` when ready
-	 * and `${verb} in Ns` while counting down.
-	 * @default "Resend"
-	 */
-	verb?: string;
-}
-
-/**
- * Button that locks out for a duration after mount or after `triggerKey`
- * changes. Renders countdown text while disabled.
- *
- * Use for "resend code" / "resend email" flows where the user shouldn't be
- * able to spam the action. Triggering a new send from elsewhere should
- * update `triggerKey` to restart the lockout.
- */
-const CountdownButton = React.forwardRef<HTMLButtonElement, CountdownButtonProps>(
-	(
-		{ duration = 30, triggerKey, onClick, children, verb = "Resend", className, ...buttonProps },
-		ref,
-	) => {
-		const [secondsLeft, setSecondsLeft] = React.useState(duration);
-
-		React.useEffect(() => {
-			setSecondsLeft(duration);
-			const interval = setInterval(() => {
-				setSecondsLeft((s) => {
-					if (s <= 1) {
-						clearInterval(interval);
-						return 0;
-					}
-					return s - 1;
-				});
-			}, 1000);
-			return () => clearInterval(interval);
-		}, [duration, triggerKey]);
-
-		const ready = secondsLeft <= 0;
-		const labelNode =
-			typeof children === "function"
-				? children(secondsLeft)
-				: children !== undefined
-					? children
-					: ready
-						? verb
-						: `${verb} in ${secondsLeft}s`;
-
-		return (
-			<Button
-				ref={ref}
-				type="button"
-				disabled={!ready}
-				onClick={() => ready && onClick?.()}
-				className={cn(className)}
-				{...buttonProps}
-			>
-				{labelNode}
-			</Button>
-		);
-	},
-);
-CountdownButton.displayName = "CountdownButton";
-
-export { CountdownButton };

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

@@ -1,56 +0,0 @@
-"use client";
-
-import { Inbox } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon?: React.ReactNode;
-	/** Primary message. Renders below the icon pill, 15px font-medium. */
-	title?: string;
-	/**
-	 * @deprecated Use `title`. Retained as an alias so existing call sites
-	 * (e.g. DataTable's empty fallback) keep working.
-	 */
-	message?: string;
-	description?: string;
-	action?: {
-		label: string;
-		onClick: () => void;
-	};
-}
-
-const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-	({ icon, title, message, description, action, className, ...props }, ref) => {
-		const heading = title ?? message ?? "No items found";
-		return (
-			<div
-				ref={ref}
-				data-slot="empty-state"
-				className={cn(
-					"flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground",
-					className,
-				)}
-				{...props}
-			>
-				<div className="mb-1 inline-flex rounded-full bg-muted p-3 text-muted-foreground">
-					{icon ?? <Inbox className="h-5 w-5" />}
-				</div>
-				<div className="text-center">
-					<p className="text-[15px] font-medium text-foreground">{heading}</p>
-					{description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
-				</div>
-				{action && (
-					<Button variant="outline" size="sm" onClick={action.onClick}>
-						{action.label}
-					</Button>
-				)}
-			</div>
-		);
-	},
-);
-EmptyState.displayName = "EmptyState";
-
-export { EmptyState };

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

@@ -1,42 +0,0 @@
-"use client";
-
-import { AlertCircle } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-
-export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
-	message?: string;
-	onRetry?: () => void;
-	retryLabel?: string;
-}
-
-const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
-	(
-		{ message = "Something went wrong.", onRetry, retryLabel = "Try again", 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}
-			>
-				<AlertCircle className="h-8 w-8 text-destructive" />
-				<p className="text-sm">{message}</p>
-				{onRetry && (
-					<Button variant="outline" size="sm" onClick={onRetry}>
-						{retryLabel}
-					</Button>
-				)}
-			</div>
-		);
-	},
-);
-ErrorState.displayName = "ErrorState";
-
-export { ErrorState };

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