@olympusoss/canvas 2.20.2 → 3.1.0

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

@@ -1,100 +0,0 @@
-import { ArrowDown, ArrowUp } from "lucide-react";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Card, CardContent } from "./card";
-
-export interface StatCardProps {
-	title: string;
-	value: React.ReactNode;
-	icon?: React.ReactNode;
-	colorVariant?: "primary" | "blue" | "purple" | "success" | "warning" | "amber" | "destructive";
-	/** Optional delta line shown under the value (e.g. "+4.2%"). */
-	delta?: React.ReactNode;
-	/** Tone for the delta — `up` is green, `down` is red, `neutral` is muted. */
-	deltaTone?: "up" | "down" | "neutral";
-	/** Caption shown next to the delta (e.g. "vs. last 7d"). */
-	deltaCaption?: React.ReactNode;
-	/**
-	 * When `true` (default) and `delta` is a string, prepend an ArrowUp /
-	 * ArrowDown icon based on `deltaTone`. Pass `false` to opt out, or pass
-	 * `delta` as ReactNode to fully control rendering yourself.
-	 */
-	deltaArrow?: boolean;
-	/** Optional content rendered below the delta row (e.g. a sparkline or mini chart). */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const COLOR: Record<NonNullable<StatCardProps["colorVariant"]>, string> = {
-	primary: "bg-primary/10 text-primary",
-	blue: "bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]",
-	purple: "bg-[hsl(var(--stat-purple)/0.1)] text-[hsl(var(--stat-purple))]",
-	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))]",
-	amber: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
-	destructive: "bg-[hsl(var(--stat-destructive)/0.1)] text-[hsl(var(--stat-destructive))]",
-};
-
-const DELTA_TONE: Record<NonNullable<StatCardProps["deltaTone"]>, string> = {
-	up: "text-green-600 dark:text-green-500",
-	down: "text-red-600 dark:text-red-500",
-	neutral: "text-muted-foreground",
-};
-
-export function StatCard({
-	title,
-	value,
-	icon,
-	colorVariant = "primary",
-	delta,
-	deltaTone = "up",
-	deltaCaption,
-	deltaArrow = true,
-	children,
-	className,
-}: StatCardProps) {
-	const showArrow = deltaArrow && typeof delta === "string" && deltaTone !== "neutral";
-	const ArrowGlyph = deltaTone === "down" ? ArrowDown : ArrowUp;
-	return (
-		<Card className={className}>
-			<CardContent className="p-5">
-				<div className="flex items-start justify-between gap-3">
-					<div className="min-w-0 flex-1">
-						<p className="truncate text-[13px] font-medium text-muted-foreground">{title}</p>
-						<p className="mt-1 text-[28px] font-semibold leading-tight tracking-[-0.02em]">
-							{value}
-						</p>
-					</div>
-					{icon && (
-						<div
-							className={cn(
-								"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
-								COLOR[colorVariant],
-							)}
-						>
-							{icon}
-						</div>
-					)}
-				</div>
-				{delta != null && (
-					<div className="mt-3 flex items-center gap-1.5 text-xs">
-						<span
-							className={cn(
-								"inline-flex items-center gap-0.5 font-mono font-medium",
-								DELTA_TONE[deltaTone],
-							)}
-						>
-							{showArrow && <ArrowGlyph className="h-3 w-3" aria-hidden />}
-							{delta}
-						</span>
-						{deltaCaption != null && <span className="text-muted-foreground">{deltaCaption}</span>}
-					</div>
-				)}
-				{children != null && <div className="mt-3">{children}</div>}
-			</CardContent>
-		</Card>
-	);
-}
-
-StatCard.displayName = "StatCard";

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

@@ -1,42 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const statusBadgeVariants = cva(
-	"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
-	{
-		variants: {
-			status: {
-				success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-				warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
-				error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-				info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
-				neutral: "bg-muted text-muted-foreground",
-			},
-		},
-		defaultVariants: {
-			status: "neutral",
-		},
-	},
-);
-
-export interface StatusBadgeProps
-	extends React.HTMLAttributes<HTMLSpanElement>,
-		VariantProps<typeof statusBadgeVariants> {
-	dot?: boolean;
-}
-
-const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
-	({ status, dot = true, className, children, ...props }, ref) => {
-		return (
-			<span ref={ref} className={cn(statusBadgeVariants({ status }), className)} {...props}>
-				{dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
-				{children}
-			</span>
-		);
-	},
-);
-StatusBadge.displayName = "StatusBadge";
-
-export { StatusBadge, statusBadgeVariants };

package/src/components/molecules/stepper.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "../atoms/icon";
-
-export type StepStatus = "pending" | "active" | "complete" | "error";
-
-export interface StepperStep {
-	id: string;
-	label: string;
-	status: StepStatus;
-	/** Optional icon override (atoms/icon IconName or React node). */
-	icon?: React.ReactNode;
-	disabled?: boolean;
-}
-
-export interface StepperProps {
-	steps: StepperStep[];
-	orientation?: "horizontal" | "vertical";
-	onStepClick?: (id: string) => void;
-	className?: string;
-}
-
-const STATUS_STYLES: Record<StepStatus, { dot: string; label: string }> = {
-	pending: {
-		dot: "border-muted-foreground/30 text-muted-foreground",
-		label: "text-muted-foreground",
-	},
-	active: {
-		dot: "border-primary bg-primary text-primary-foreground",
-		label: "text-foreground font-medium",
-	},
-	complete: {
-		dot: "border-green-500 bg-green-500 text-white",
-		label: "text-foreground",
-	},
-	error: {
-		dot: "border-destructive bg-destructive text-destructive-foreground",
-		label: "text-destructive",
-	},
-};
-
-export function Stepper({ steps, orientation = "vertical", onStepClick, className }: StepperProps) {
-	const vertical = orientation === "vertical";
-	return (
-		<ol
-			className={cn("flex", vertical ? "flex-col gap-1" : "flex-row items-center gap-2", className)}
-		>
-			{steps.map((step, i) => {
-				const styles = STATUS_STYLES[step.status];
-				const clickable = !!onStepClick && !step.disabled;
-				return (
-					<li key={step.id} className={cn("flex items-center gap-3", vertical ? "py-2" : "flex-1")}>
-						<button
-							type="button"
-							disabled={!clickable}
-							onClick={() => clickable && onStepClick(step.id)}
-							className={cn(
-								"flex items-center gap-3 rounded-md transition-colors",
-								vertical && "w-full px-2 py-1 text-left",
-								clickable && "hover:bg-accent/50",
-							)}
-						>
-							<span
-								className={cn(
-									"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border text-xs",
-									styles.dot,
-								)}
-							>
-								{step.icon ? (
-									typeof step.icon === "string" ? (
-										<Icon name={step.icon as never} className="h-3.5 w-3.5" />
-									) : (
-										step.icon
-									)
-								) : step.status === "complete" ? (
-									<Icon name="Check" className="h-3.5 w-3.5" />
-								) : step.status === "error" ? (
-									<Icon name="X" className="h-3.5 w-3.5" />
-								) : (
-									i + 1
-								)}
-							</span>
-							<span className={cn("text-sm", styles.label)}>{step.label}</span>
-						</button>
-						{!vertical && i < steps.length - 1 && <span className="mx-2 h-px flex-1 bg-border" />}
-					</li>
-				);
-			})}
-		</ol>
-	);
-}
-
-Stepper.displayName = "Stepper";

package/src/components/molecules/table.tsx

@@ -1,157 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-	/** `<TableHeader>` + `<TableBody>` + optional `<TableFooter>` + optional `<TableCaption>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<table>` via `cn()`. */
-	className?: string;
-}
-
-const Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, ...props }, ref) => (
-	<div className="relative w-full overflow-auto">
-		<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-	</div>
-));
-Table.displayName = "Table";
-
-export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-	/** A single `<TableRow>` of `<TableHead>` cells. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<thead>` via `cn()`. */
-	className?: string;
-}
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
-	({ className, ...props }, ref) => (
-		<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-	),
-);
-TableHeader.displayName = "TableHeader";
-
-export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-	/** A list of `<TableRow>`s of `<TableCell>`s. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<tbody>` via `cn()`. */
-	className?: string;
-}
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
-	({ className, ...props }, ref) => (
-		<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-	),
-);
-TableBody.displayName = "TableBody";
-
-export interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-	/** A `<TableRow>` of summary `<TableCell>`s (totals, etc.). */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<tfoot>` via `cn()`. */
-	className?: string;
-}
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(
-	({ className, ...props }, ref) => (
-		<tfoot
-			ref={ref}
-			className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-			{...props}
-		/>
-	),
-);
-TableFooter.displayName = "TableFooter";
-
-export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-	/** `<TableHead>` or `<TableCell>` children. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<tr>` via `cn()`. */
-	className?: string;
-	/**
-	 * Optional data-state — pass `"selected"` to highlight selected rows
-	 * (e.g. checkbox-driven multi-select tables). Mirrors Radix's pattern.
-	 */
-	"data-state"?: "selected";
-}
-
-const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
-	({ className, ...props }, ref) => (
-		<tr
-			ref={ref}
-			className={cn(
-				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableRow.displayName = "TableRow";
-
-export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-	/** Column header text. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<th>` via `cn()`. */
-	className?: string;
-	/** Number of columns this header spans. */
-	colSpan?: number;
-	/** Number of rows this header spans. */
-	rowSpan?: number;
-	/** Scope of the header — `"col"` (default) or `"row"` for row-headers. */
-	scope?: "col" | "row" | "rowgroup" | "colgroup";
-}
-
-const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-	({ className, ...props }, ref) => (
-		<th
-			ref={ref}
-			className={cn(
-				"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableHead.displayName = "TableHead";
-
-export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-	/** Cell content. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<td>` via `cn()`. */
-	className?: string;
-	/** Number of columns this cell spans. */
-	colSpan?: number;
-	/** Number of rows this cell spans. */
-	rowSpan?: number;
-}
-
-const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
-	({ className, ...props }, ref) => (
-		<td
-			ref={ref}
-			className={cn(
-				"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableCell.displayName = "TableCell";
-
-export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
-	/** A short label describing the table — read by screen readers. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the `<caption>` via `cn()`. */
-	className?: string;
-}
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
-	({ className, ...props }, ref) => (
-		<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-	),
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/src/components/molecules/terminal.tsx

@@ -1,74 +0,0 @@
-// molecules: can import tokens/, lib/utils, atoms/.
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TerminalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-	/**
-	 * Optional label rendered in the macOS-style chrome strip, next to the
-	 * traffic-light dots. Typical use: a working directory + command
-	 * (e.g. `~/Olympus · octl`).
-	 */
-	title?: React.ReactNode;
-	/**
-	 * Terminal body. Renders inside a `<pre>` with mono font and 1.7 line
-	 * height. Free-form — drop plain text, ANSI-coloured `<span>`s, or any
-	 * inline highlights you want.
-	 */
-	children: React.ReactNode;
-	className?: string;
-}
-
-const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
-	({ title, children, className, ...props }, ref) => (
-		<div
-			ref={ref}
-			data-slot="terminal"
-			className={cn(
-				"overflow-hidden rounded-xl border border-border shadow-[0_30px_60px_-20px_rgb(0_0_0/0.35)]",
-				className,
-			)}
-			style={{ background: "#0a0a0b" }}
-			{...props}
-		>
-			<div
-				className="flex items-center gap-1.5 px-3"
-				style={{
-					height: 32,
-					background: "#141417",
-					borderBottom: "1px solid #222",
-				}}
-			>
-				<span
-					aria-hidden="true"
-					className="inline-block h-2.5 w-2.5 rounded-full"
-					style={{ background: "#ff5f57" }}
-				/>
-				<span
-					aria-hidden="true"
-					className="inline-block h-2.5 w-2.5 rounded-full"
-					style={{ background: "#febc2e" }}
-				/>
-				<span
-					aria-hidden="true"
-					className="inline-block h-2.5 w-2.5 rounded-full"
-					style={{ background: "#28c840" }}
-				/>
-				{title != null && (
-					<span className="ml-2.5 font-mono text-[11px]" style={{ color: "#6b7280" }}>
-						{title}
-					</span>
-				)}
-			</div>
-			<pre
-				className="m-0 overflow-x-auto p-5 font-mono text-[12.5px] leading-[1.7]"
-				style={{ color: "#e4e4e7" }}
-			>
-				{children}
-			</pre>
-		</div>
-	),
-);
-Terminal.displayName = "Terminal";
-
-export { Terminal };

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

@@ -1,145 +0,0 @@
-"use client";
-
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { toggleVariants } from "../atoms/toggle";
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-	size: "default",
-	variant: "default",
-});
-
-export interface ToggleGroupProps {
-	/**
-	 * Selection mode. `"single"` allows one item active at a time;
-	 * `"multiple"` allows independent toggles.
-	 */
-	type: "single" | "multiple";
-	/**
-	 * Controlled value. For `type="single"` it's a string; for
-	 * `type="multiple"` it's an array of strings.
-	 */
-	value?: string | string[];
-	/** Initial value for uncontrolled usage. */
-	defaultValue?: string | string[];
-	/** Fires when the user toggles an item. */
-	onValueChange?: (value: string & string[]) => void;
-	/**
-	 * Disable every toggle in the group.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Layout direction.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Reading direction. Affects keyboard arrow navigation.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * When true, arrow-key navigation wraps from the last item to the first.
-	 * @default true
-	 */
-	loop?: boolean;
-	/**
-	 * Filled vs outlined preset (inherits from `<Toggle>`).
-	 * @default "default"
-	 */
-	variant?: "default" | "outline";
-	/**
-	 * Size preset (inherits from `<Toggle>`).
-	 * @default "default"
-	 */
-	size?: "default" | "sm" | "lg";
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** A flat list of `<ToggleGroupItem>`s. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the group via `cn()`. */
-	className?: string;
-}
-
-const ToggleGroupImpl = React.forwardRef<
-	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-	ToggleGroupProps
->(({ className, variant, size, children, ...props }, ref) => (
-	<ToggleGroupPrimitive.Root
-		ref={ref}
-		{...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}
-		className={cn("flex items-center justify-center gap-1", className)}
-	>
-		<ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-	</ToggleGroupPrimitive.Root>
-));
-
-ToggleGroupImpl.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroup = ToggleGroupImpl as React.ForwardRefExoticComponent<
-	ToggleGroupProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface ToggleGroupItemProps
-	extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,
-		VariantProps<typeof toggleVariants> {
-	/** Required — value reported when this toggle is active. */
-	value: string;
-	/**
-	 * Disable only this toggle.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Filled vs outlined. Defaults to inheriting from the parent
-	 * `<ToggleGroup>`.
-	 */
-	variant?: "default" | "outline";
-	/**
-	 * Size preset. Defaults to inheriting from the parent `<ToggleGroup>`.
-	 */
-	size?: "default" | "sm" | "lg";
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Toggle label or icon. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the toggle via `cn()`. */
-	className?: string;
-}
-
-const ToggleGroupItem = React.forwardRef<
-	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-	ToggleGroupItemProps
->(({ className, children, variant, size, ...props }, ref) => {
-	const context = React.useContext(ToggleGroupContext);
-
-	return (
-		<ToggleGroupPrimitive.Item
-			ref={ref}
-			className={cn(
-				toggleVariants({
-					variant: context.variant || variant,
-					size: context.size || size,
-				}),
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</ToggleGroupPrimitive.Item>
-	);
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };