@olympusoss/canvas 2.20.1 → 4.0.0

package/src/components/molecules/alert.tsx

@@ -1,86 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const alertVariants = cva(
-	"relative w-full rounded-lg border border-border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-	{
-		variants: {
-			variant: {
-				default: "bg-background text-foreground",
-				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-
-export interface AlertProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof alertVariants> {
-	/**
-	 * Visual emphasis preset. `default` is informational, `destructive`
-	 * uses the danger palette for errors and warnings.
-	 * @default "default"
-	 */
-	variant?: "default" | "destructive";
-	/**
-	 * Optional leading icon (lucide-react), `<AlertTitle>`, and
-	 * `<AlertDescription>`. The icon — when present as a direct child —
-	 * is auto-positioned in the top-left.
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the alert via `cn()`. */
-	className?: string;
-}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-	({ className, variant, ...props }, ref) => (
-		<div
-			ref={ref}
-			role="alert"
-			data-slot="alert"
-			className={cn(alertVariants({ variant }), className)}
-			{...props}
-		/>
-	),
-);
-Alert.displayName = "Alert";
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-	/** The alert headline. Renders as an `<h5>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the title via `cn()`. */
-	className?: string;
-}
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProps>(
-	({ className, ...props }, ref) => (
-		<h5
-			ref={ref}
-			className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-			{...props}
-		/>
-	),
-);
-AlertTitle.displayName = "AlertTitle";
-
-export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-	/** Body copy of the alert. Renders as a `<div>` so it can hold paragraphs and lists. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the description via `cn()`. */
-	className?: string;
-}
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-	),
-);
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertDescription, AlertTitle };

package/src/components/molecules/animated-background.tsx

@@ -1,92 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export interface AnimatedBackgroundOrb {
-	/** CSS color for the radial gradient (hex / rgb / hsl / token). */
-	color: string;
-	/**
-	 * Diameter in pixels.
-	 * @default 500
-	 */
-	size?: number;
-	/**
-	 * Opacity 0–1. Lower values let more of the page bg bleed through.
-	 * @default 0.2
-	 */
-	opacity?: number;
-	/**
-	 * Gaussian blur radius in pixels. Larger values produce softer orbs.
-	 * @default 100
-	 */
-	blur?: number;
-	/** Tailwind position classes, e.g. `"-top-32 -right-32"` or `"left-1/2 top-1/3"`. */
-	position?: string;
-	/**
-	 * CSS `animation` shorthand. Pair with the `orb-float-1` / `orb-float-2`
-	 * keyframes shipped in canvas's tokens, or your own.
-	 */
-	animation?: string;
-}
-
-export interface AnimatedBackgroundProps {
-	/**
-	 * Orbs to render. Defaults to a 3-orb indigo/purple/cyan composition
-	 * that mirrors the auth-screen backdrop. Pass an empty array `[]` to
-	 * render no orbs (useful for testing).
-	 */
-	orbs?: AnimatedBackgroundOrb[];
-	/**
-	 * Tailwind / CSS classes merged onto the root container via `cn()`.
-	 * Defaults to `pointer-events-none fixed inset-0 overflow-hidden`.
-	 */
-	className?: string;
-}
-
-const DEFAULT_ORBS: AnimatedBackgroundOrb[] = [
-	{
-		color: "#6366f1",
-		size: 500,
-		opacity: 0.2,
-		blur: 120,
-		position: "-top-32 -right-32",
-		animation: "orb-float-1 8s ease-in-out infinite",
-	},
-	{
-		color: "#8b5cf6",
-		size: 400,
-		opacity: 0.15,
-		blur: 100,
-		position: "-bottom-32 -left-32",
-		animation: "orb-float-2 10s ease-in-out infinite",
-	},
-	{
-		color: "#06b6d4",
-		size: 300,
-		opacity: 0.1,
-		blur: 80,
-		position: "left-1/2 top-1/3 -translate-x-1/2",
-		animation: "orb-float-1 12s ease-in-out 2s infinite",
-	},
-];
-
-export function AnimatedBackground({ orbs = DEFAULT_ORBS, className }: AnimatedBackgroundProps) {
-	return (
-		<div className={cn("pointer-events-none fixed inset-0 overflow-hidden", className)}>
-			{orbs.map((orb, i) => (
-				<div
-					key={i}
-					className={cn("absolute rounded-full", orb.position)}
-					style={{
-						width: orb.size ?? 500,
-						height: orb.size ?? 500,
-						opacity: orb.opacity ?? 0.2,
-						filter: `blur(${orb.blur ?? 100}px)`,
-						background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
-						animation: orb.animation,
-					}}
-				/>
-			))}
-		</div>
-	);
-}
-
-AnimatedBackground.displayName = "AnimatedBackground";

package/src/components/molecules/auth-shell.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Card, CardContent, CardHeader } from "./card";
-
-export interface AuthShellProps {
-	/**
-	 * Brand lockup rendered above the card. Compose a `ClientBrand` (or
-	 * your own component) and pass it in. Slot is left empty to keep this
-	 * shell unaware of OAuth2 / Hydra specifics.
-	 */
-	brand?: React.ReactNode;
-	/** Card title. Pairs with `subtitle`. */
-	title?: React.ReactNode;
-	/** Optional one-line subtitle shown beneath `title`. */
-	subtitle?: React.ReactNode;
-	/** Card body content. */
-	children?: React.ReactNode;
-	/**
-	 * Optional footer line beneath the card (legal / privacy / support).
-	 */
-	footer?: React.ReactNode;
-	/**
-	 * Card width preset. `default` = 408px (single-column flows like login,
-	 * recovery), `wide` = 460px (multi-step or denser flows like consent).
-	 * @default "default"
-	 */
-	width?: "default" | "wide";
-	/**
-	 * Allow children to break the card frame (useful for full-bleed flow
-	 * pickers or media). When `false` the card content gets the standard
-	 * `p-6` padding.
-	 * @default false
-	 */
-	flush?: boolean;
-	/** Tailwind / CSS classes merged onto the outer wrapper via `cn()`. */
-	className?: string;
-}
-
-/**
- * Centered single-card layout for auth flows.
- *
- * Renders, top to bottom:
- *   1. Brand slot (`brand`) above the card
- *   2. Card with optional centred title + subtitle, then `children`
- *   3. Optional footer line beneath the card
- *
- * Layout is intentionally narrow and prescriptive: this is the
- * agreed-upon shape for every Olympus auth screen (login, register,
- * recovery, reset, verify, OTP, consent, logout, status). For app shells
- * with sidebars or multi-pane layouts, compose your own flex shell
- * directly (see `Sidebar` + `SidebarInset`).
- */
-const AuthShell = React.forwardRef<HTMLDivElement, AuthShellProps>(
-	(
-		{ brand, title, subtitle, children, footer, width = "default", flush = false, className },
-		ref,
-	) => (
-		<div
-			ref={ref}
-			className={cn(
-				"relative z-10 flex min-h-screen flex-col items-center justify-center px-6 py-12",
-				className,
-			)}
-		>
-			{brand && <div className="mb-7">{brand}</div>}
-
-			<Card
-				className={cn(
-					"w-full shadow-lg shadow-black/5 dark:shadow-black/30",
-					width === "wide" ? "max-w-[460px]" : "max-w-[408px]",
-				)}
-			>
-				{title && (
-					<CardHeader className={cn("text-center", subtitle ? "pb-3" : "pb-4")}>
-						<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-						{subtitle && <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>}
-					</CardHeader>
-				)}
-				<CardContent className={cn(flush ? "p-0" : "pt-0", !title && !flush && "pt-6")}>
-					{children}
-				</CardContent>
-			</Card>
-
-			{footer && (
-				<div className="mt-6 max-w-[460px] text-center text-xs text-muted-foreground">{footer}</div>
-			)}
-		</div>
-	),
-);
-AuthShell.displayName = "AuthShell";
-
-export { AuthShell };

package/src/components/molecules/brand-lockup.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BrandLockupProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Logo node rendered to the left of the wordmark — typically `<Logo />`
-	 * for the canvas Olympus ring, or any other brand mark of the consumer's
-	 * choosing. Required so canvas stays brand-agnostic.
-	 */
-	logo: React.ReactNode;
-	/** Wordmark next to the logo (e.g. "Athena", "Hera"). */
-	productName: string;
-	/** Optional secondary line under the wordmark. */
-	subtitle?: string;
-	/** Visual size — sm = sidebar collapsed, md = sidebar expanded, lg = hero. */
-	size?: "sm" | "md" | "lg";
-	/** When true, renders only the logo without the wordmark or subtitle. */
-	collapsed?: boolean;
-}
-
-const SIZE: Record<NonNullable<BrandLockupProps["size"]>, { name: string; sub: string }> = {
-	sm: { name: "text-[13px]", sub: "text-[10px]" },
-	md: { name: "text-sm", sub: "text-[11px]" },
-	lg: { name: "text-2xl", sub: "text-xs" },
-};
-
-export const BrandLockup = React.forwardRef<HTMLDivElement, BrandLockupProps>(
-	({ logo, productName, subtitle, size = "md", collapsed = false, className, ...props }, ref) => {
-		const sz = SIZE[size];
-		return (
-			<div ref={ref} className={cn("flex items-center gap-2.5", className)} {...props}>
-				<span className="shrink-0">{logo}</span>
-				{!collapsed && (
-					<div className="flex flex-col leading-tight">
-						<span className={cn(sz.name, "font-semibold tracking-tight text-foreground")}>
-							{productName}
-						</span>
-						{subtitle && (
-							<span className={cn(sz.sub, "font-mono text-muted-foreground")}>{subtitle}</span>
-						)}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-BrandLockup.displayName = "BrandLockup";

package/src/components/molecules/breadcrumb.tsx

@@ -1,157 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
-	/**
-	 * Custom separator element used between items. Defaults to a chevron
-	 * via `<BreadcrumbSeparator>`.
-	 */
-	separator?: React.ReactNode;
-	/** A `<BreadcrumbList>` containing items. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<nav>` via `cn()`. */
-	className?: string;
-}
-
-const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(({ ...props }, ref) => (
-	<nav ref={ref} aria-label="breadcrumb" {...props} />
-));
-Breadcrumb.displayName = "Breadcrumb";
-
-export interface BreadcrumbListProps extends React.ComponentPropsWithoutRef<"ol"> {
-	/** A flat list of `<BreadcrumbItem>`s, separated by `<BreadcrumbSeparator>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<ol>` via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
-	({ className, ...props }, ref) => (
-		<ol
-			ref={ref}
-			className={cn(
-				"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-export interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<"li"> {
-	/** Typically a `<BreadcrumbLink>` or `<BreadcrumbPage>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<li>` via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-	({ className, ...props }, ref) => (
-		<li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-	),
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
-	/**
-	 * Render as a Radix Slot — useful for wrapping a router `<Link>` so
-	 * it inherits breadcrumb styling.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Anchor target. Used when not in `asChild` mode. */
-	href?: string;
-	/** Link label. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the link via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-	({ asChild, className, ...props }, ref) => {
-		const Comp = asChild ? Slot : "a";
-
-		return (
-			<Comp ref={ref} className={cn("transition-colors hover:text-brand", className)} {...props} />
-		);
-	},
-);
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-export interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<"span"> {
-	/**
-	 * Label of the current page. This is the last breadcrumb item and is
-	 * non-clickable; sets `aria-current="page"` for assistive tech.
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the page span via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
-	({ className, ...props }, ref) => (
-		<span
-			ref={ref}
-			role="link"
-			aria-disabled="true"
-			aria-current="page"
-			className={cn("font-normal text-foreground", className)}
-			{...props}
-		/>
-	),
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-export interface BreadcrumbSeparatorProps extends React.ComponentProps<"li"> {
-	/**
-	 * Override the default chevron with a custom node (e.g. a slash, an
-	 * arrow icon).
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the separator via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorProps) => (
-	<li
-		role="presentation"
-		aria-hidden="true"
-		className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-		{...props}
-	>
-		{children ?? <ChevronRight />}
-	</li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-export interface BreadcrumbEllipsisProps extends React.ComponentProps<"span"> {
-	/** Tailwind / CSS classes merged onto the ellipsis via `cn()`. */
-	className?: string;
-}
-
-const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) => (
-	<span
-		role="presentation"
-		aria-hidden="true"
-		className={cn("flex h-9 w-9 items-center justify-center", className)}
-		{...props}
-	>
-		<MoreHorizontal className="h-4 w-4" />
-		<span className="sr-only">More</span>
-	</span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-	Breadcrumb,
-	BreadcrumbEllipsis,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-};

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

@@ -1,104 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Separator } from "../atoms/separator";
-
-const buttonGroupVariants = cva(
-	"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-	{
-		variants: {
-			orientation: {
-				horizontal:
-					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-				vertical:
-					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-			},
-		},
-		defaultVariants: {
-			orientation: "horizontal",
-		},
-	},
-);
-
-export interface ButtonGroupProps
-	extends React.ComponentProps<"div">,
-		VariantProps<typeof buttonGroupVariants> {
-	/**
-	 * `horizontal` (default) lays buttons left-to-right with shared borders;
-	 * `vertical` stacks them with shared horizontal borders.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/** A row/column of `<Button>`s, `<ButtonGroupText>`s, or separators. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps) {
-	return (
-		<div
-			role="group"
-			data-slot="button-group"
-			data-orientation={orientation}
-			className={cn(buttonGroupVariants({ orientation }), className)}
-			{...props}
-		/>
-	);
-}
-
-export interface ButtonGroupTextProps extends React.ComponentProps<"div"> {
-	/**
-	 * Render as a Radix Slot — useful for wrapping a label or icon as the
-	 * group's text element.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Text or icon content. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function ButtonGroupText({ className, asChild = false, ...props }: ButtonGroupTextProps) {
-	const Comp = asChild ? Slot : "div";
-
-	return (
-		<Comp
-			className={cn(
-				"bg-muted shadow-xs flex items-center gap-2 rounded-md border border-border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export interface ButtonGroupSeparatorProps extends React.ComponentProps<typeof Separator> {
-	/**
-	 * Layout direction.
-	 * @default "vertical"
-	 */
-	orientation?: "horizontal" | "vertical";
-	className?: string;
-}
-
-function ButtonGroupSeparator({
-	className,
-	orientation = "vertical",
-	...props
-}: ButtonGroupSeparatorProps) {
-	return (
-		<Separator
-			data-slot="button-group-separator"
-			orientation={orientation}
-			className={cn(
-				"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };