@olympusoss/canvas 2.6.19

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

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

@@ -0,0 +1,150 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+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) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			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

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

@@ -0,0 +1,14 @@
+# 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.

package/src/components/organisms/accordion.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface AccordionProps {
+	/**
+	 * Selection mode. `"single"` allows one item open at a time;
+	 * `"multiple"` allows multiple items open simultaneously.
+	 */
+	type: "single" | "multiple";
+	/**
+	 * Controlled value. For `type="single"` it's a string (id of the open
+	 * item); for `type="multiple"` it's a string array.
+	 */
+	value?: string | string[];
+	/** Initial value for uncontrolled usage. */
+	defaultValue?: string | string[];
+	/** Fires when the user opens/closes an item. */
+	onValueChange?: (value: string & string[]) => void;
+	/**
+	 * For `type="single"` only — when true, an open item can be collapsed
+	 * by clicking it again.
+	 * @default false
+	 */
+	collapsible?: boolean;
+	/**
+	 * Disable the entire accordion.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Reading direction. Affects keyboard arrow navigation.
+	 * @default "ltr"
+	 */
+	dir?: "ltr" | "rtl";
+	/**
+	 * Layout direction.
+	 * @default "vertical"
+	 */
+	orientation?: "vertical" | "horizontal";
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** A list of `<AccordionItem>`s. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const Accordion = AccordionPrimitive.Root as React.ForwardRefExoticComponent<
+	AccordionProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export interface AccordionItemProps
+	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+	/** Required — unique value identifying this item. */
+	value: string;
+	/**
+	 * Disable only this item.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** A `<AccordionTrigger>` + `<AccordionContent>`. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const AccordionItem = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	AccordionItemProps
+>(({ className, ...props }, ref) => (
+	<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+export interface AccordionTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Trigger label — typically a section heading. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const AccordionTrigger = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	AccordionTriggerProps
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+export interface AccordionContentProps
+	extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+	/**
+	 * Force the content to mount even when collapsed.
+	 * @default false
+	 */
+	forceMount?: true;
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Item body. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const AccordionContent = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	AccordionContentProps
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		{...props}
+	>
+		<div className={cn("pb-4 pt-0", className)}>{children}</div>
+	</AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };