@olympusoss/canvas 2.20.2 → 4.0.0

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

package/src/components/molecules/tooltip.tsx

@@ -1,155 +0,0 @@
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { usePortalContainer } from "../../lib/portal-container";
-import { cn } from "../../lib/utils";
-
-export interface TooltipProviderProps
-	extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
-	/**
-	 * Delay in ms before any tooltip in the provider opens. Set to 0 for
-	 * instant tooltips (e.g. icon rails).
-	 * @default 700
-	 */
-	delayDuration?: number;
-	/**
-	 * Delay in ms before a tooltip closes after the cursor leaves. Useful
-	 * for letting users drag from the trigger to the content.
-	 * @default 300
-	 */
-	skipDelayDuration?: number;
-	/**
-	 * When true, the tooltip will not close while the user is interacting
-	 * with content inside it (e.g. hover, focus).
-	 * @default false
-	 */
-	disableHoverableContent?: boolean;
-	/** All `<Tooltip>`s in the subtree share this provider's delays. */
-	children: React.ReactNode;
-}
-
-const TooltipProvider = TooltipPrimitive.Provider as React.FC<TooltipProviderProps>;
-
-export interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
-	/** Controlled open state. */
-	open?: boolean;
-	/** Initial open state for uncontrolled usage. */
-	defaultOpen?: boolean;
-	/** Fires whenever the tooltip opens or closes. */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * Override the parent provider's `delayDuration` for this tooltip
-	 * specifically.
-	 */
-	delayDuration?: number;
-	/**
-	 * Override the parent provider's `disableHoverableContent` for this
-	 * tooltip.
-	 */
-	disableHoverableContent?: boolean;
-	/** Trigger + Content. */
-	children?: React.ReactNode;
-}
-
-const Tooltip = TooltipPrimitive.Root as React.FC<TooltipProps>;
-
-export interface TooltipTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> {
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child.
-	 * Common pattern for wrapping a `<Button>` or icon.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** The element that opens the tooltip on hover/focus. */
-	children?: React.ReactNode;
-}
-
-const TooltipTrigger = TooltipPrimitive.Trigger as React.ForwardRefExoticComponent<
-	TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>
->;
-
-export interface TooltipContentProps
-	extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
-	/**
-	 * Distance in pixels between the trigger and the tooltip content.
-	 * @default 4
-	 */
-	sideOffset?: number;
-	/**
-	 * Distance from the alignment edge.
-	 * @default 0
-	 */
-	alignOffset?: number;
-	/**
-	 * Preferred side of the trigger to render on.
-	 * @default "top"
-	 */
-	side?: "top" | "right" | "bottom" | "left";
-	/**
-	 * Alignment along the chosen side.
-	 * @default "center"
-	 */
-	align?: "start" | "center" | "end";
-	/**
-	 * Avoid colliding with the viewport edges by flipping/shifting.
-	 * @default true
-	 */
-	avoidCollisions?: boolean;
-	/**
-	 * Padding kept from collision boundaries.
-	 * @default 0
-	 */
-	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
-	/**
-	 * Stick to the trigger or partially follow on scroll.
-	 * @default "partial"
-	 */
-	sticky?: "partial" | "always";
-	/** Hide the content when the trigger is detached or covered. */
-	hideWhenDetached?: boolean;
-	/**
-	 * Force the content to mount even when closed. Pair with a CSS
-	 * animation that fades in/out based on `data-state`.
-	 * @default false
-	 */
-	forceMount?: true;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tooltip body. Keep terse — one short line is the convention. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the content via `cn()`. */
-	className?: string;
-}
-
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	TooltipContentProps
->(({ className, sideOffset = 6, children, ...props }, ref) => {
-	const container = usePortalContainer();
-	return (
-		<TooltipPrimitive.Portal container={container ?? undefined}>
-			<TooltipPrimitive.Content
-				ref={ref}
-				data-slot="tooltip-content"
-				sideOffset={sideOffset}
-				className={cn(
-					"z-50 max-w-xs overflow-hidden rounded-md border border-border/50 bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 origin-[var(--radix-tooltip-content-transform-origin)]",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<TooltipPrimitive.Arrow width={10} height={5} style={{ fill: "hsl(var(--popover))" }} />
-			</TooltipPrimitive.Content>
-		</TooltipPrimitive.Portal>
-	);
-});
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/molecules/user-avatar-chip.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback, AvatarImage } from "../atoms/avatar";
-
-export interface UserAvatarChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	/** Display name (rendered next to the avatar). */
-	name: string;
-	/** Optional secondary line. Hidden when `collapsed`. */
-	email?: string;
-	/** Initials shown by AvatarFallback when no image is provided. */
-	fallback?: string;
-	/** Avatar image src. */
-	imageSrc?: string;
-	/** When true, renders only the avatar without name + chevron. */
-	collapsed?: boolean;
-	/** Set to false to hide the trailing ChevronDown affordance. */
-	chevron?: boolean;
-}
-
-export const UserAvatarChip = React.forwardRef<HTMLButtonElement, UserAvatarChipProps>(
-	(
-		{ name, email, fallback, imageSrc, collapsed = false, chevron = true, className, ...props },
-		ref,
-	) => {
-		const initials =
-			fallback ??
-			name
-				.split(" ")
-				.map((part) => part[0])
-				.filter(Boolean)
-				.slice(0, 2)
-				.join("")
-				.toUpperCase();
-		return (
-			<button
-				ref={ref}
-				type="button"
-				aria-label={collapsed ? name : undefined}
-				className={cn(
-					"inline-flex items-center gap-2 rounded-full border border-border bg-card text-[13px] font-medium text-foreground transition-colors hover:bg-accent",
-					collapsed ? "p-1" : "py-1 pl-1 pr-3",
-					className,
-				)}
-				{...props}
-			>
-				<Avatar className="h-7 w-7">
-					{imageSrc && <AvatarImage src={imageSrc} alt={name} />}
-					<AvatarFallback className="text-[11px] font-semibold">{initials}</AvatarFallback>
-				</Avatar>
-				{!collapsed && (
-					<>
-						<div className="flex flex-col items-start leading-tight">
-							<span className="truncate">{name}</span>
-							{email && (
-								<span className="truncate text-[11px] font-normal text-muted-foreground">
-									{email}
-								</span>
-							)}
-						</div>
-						{chevron && <ChevronDown className="h-3 w-3 text-muted-foreground" aria-hidden />}
-					</>
-				)}
-			</button>
-		);
-	},
-);
-UserAvatarChip.displayName = "UserAvatarChip";

package/src/components/organisms/README.md

@@ -1,14 +0,0 @@
-# Organisms
-
-Stateful surfaces. Compositions of atoms + molecules that own interactive
-state (open/close, selection, form state) or complete complex UX.
-
-**Can import**: `tokens/`, `lib/utils`, `atoms/`, `molecules/`, React.
-
-**Cannot import**: anything from `templates/`.
-
-Organisms are reusable — they don't know about specific app routes or domain
-data. `DataTable` is an organism; `IdentitiesTable` (which knows how to render
-a `Kratos.Identity`) is app-specific and belongs in that app's `features/`.
-
-See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for the full atomic-design rules.