@olympusoss/canvas 2.6.19

package/src/components/molecules/action-bar.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+import { Icon } from "../atoms/icon";
+
+export interface ActionBarAction {
+	label: string;
+	onClick: () => void;
+	icon?: React.ReactNode;
+	loading?: boolean;
+	disabled?: boolean;
+}
+
+export interface ActionBarSecondary extends ActionBarAction {
+	variant?: "outline" | "ghost";
+}
+
+export interface ActionBarProps {
+	primaryAction?: ActionBarAction;
+	secondaryActions?: ActionBarSecondary[];
+	align?: "left" | "right" | "center" | "space-between";
+	className?: string;
+}
+
+const ALIGN: Record<NonNullable<ActionBarProps["align"]>, string> = {
+	left: "justify-start",
+	right: "justify-end",
+	center: "justify-center",
+	"space-between": "justify-between",
+};
+
+export function ActionBar({
+	primaryAction,
+	secondaryActions = [],
+	align = "right",
+	className,
+}: ActionBarProps) {
+	return (
+		<div className={cn("flex items-center gap-2", ALIGN[align], className)}>
+			{secondaryActions.map((a) => (
+				<Button
+					key={a.label}
+					onClick={a.onClick}
+					disabled={a.disabled || a.loading}
+					variant={a.variant ?? "outline"}
+					size="sm"
+				>
+					{a.icon && <span className="mr-1">{a.icon}</span>}
+					{a.label}
+				</Button>
+			))}
+			{primaryAction && (
+				<Button
+					onClick={primaryAction.onClick}
+					disabled={primaryAction.disabled || primaryAction.loading}
+					size="sm"
+				>
+					{primaryAction.loading ? (
+						<Icon name="LoaderCircle" className="mr-1 h-4 w-4 animate-spin" />
+					) : (
+						primaryAction.icon && <span className="mr-1">{primaryAction.icon}</span>
+					)}
+					{primaryAction.label}
+				</Button>
+			)}
+		</div>
+	);
+}
+
+ActionBar.displayName = "ActionBar";

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface ActivityItemProps extends React.HTMLAttributes<HTMLLIElement> {
+	/** Bold subject (the actor). */
+	subject: React.ReactNode;
+	/** Muted action verb + object. */
+	action: React.ReactNode;
+	/** Right-aligned timestamp. */
+	timestamp?: React.ReactNode;
+	/** Leading icon or avatar slot. */
+	leading?: React.ReactNode;
+	/** When provided, the row becomes clickable. */
+	onClick?: () => void;
+	/**
+	 * Index in a list — when 0, the top border is suppressed so consecutive
+	 * items only render dividers between rows. Defaults to 1 (border on).
+	 */
+	index?: number;
+}
+
+export const ActivityItem = React.forwardRef<HTMLLIElement, ActivityItemProps>(
+	({ subject, action, timestamp, leading, onClick, index = 1, className, ...props }, ref) => {
+		const Row = onClick ? "button" : "div";
+		return (
+			<li
+				ref={ref}
+				className={cn(
+					"flex items-start gap-3 py-3",
+					index > 0 && "border-t border-border",
+					className,
+				)}
+				{...props}
+			>
+				{leading && <div className="shrink-0">{leading}</div>}
+				<Row
+					type={onClick ? "button" : undefined}
+					onClick={onClick}
+					className={cn(
+						"flex w-full items-start justify-between gap-4 text-left",
+						onClick && "transition-colors hover:text-foreground",
+					)}
+				>
+					<p className="m-0 min-w-0 text-[13.5px]">
+						<span className="font-medium text-foreground">{subject}</span>{" "}
+						<span className="text-muted-foreground">{action}</span>
+					</p>
+					{timestamp != null && (
+						<span className="shrink-0 font-mono text-[11px] text-muted-foreground">
+							{timestamp}
+						</span>
+					)}
+				</Row>
+			</li>
+		);
+	},
+);
+ActivityItem.displayName = "ActivityItem";
+
+export interface ActivityFeedProps extends React.HTMLAttributes<HTMLUListElement> {
+	children?: React.ReactNode;
+}
+
+export const ActivityFeed = React.forwardRef<HTMLUListElement, ActivityFeedProps>(
+	({ children, className, ...props }, ref) => {
+		return (
+			<ul ref={ref} className={cn("m-0 list-none p-0", className)} {...props}>
+				{children}
+			</ul>
+		);
+	},
+);
+ActivityFeed.displayName = "ActivityFeed";

package/src/components/molecules/alert.tsx

@@ -0,0 +1,80 @@
+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 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" 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

@@ -0,0 +1,92 @@
+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/brand-lockup.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,161 @@
+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-foreground", 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

@@ -0,0 +1,104 @@
+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 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 };