@olympusoss/canvas 2.6.19

package/src/components/molecules/calendar.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { Button, buttonVariants } from "../atoms/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+	/**
+	 * Variant applied to the prev/next month nav buttons. Maps to the
+	 * `Button` atom's variants.
+	 * @default "ghost"
+	 */
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+	/**
+	 * Show days from the previous/next month as faded entries to fill the
+	 * grid.
+	 * @default true
+	 */
+	showOutsideDays?: boolean;
+	/**
+	 * How the month/year heading renders. `label` is plain text, the
+	 * dropdown variants render selectable controls.
+	 * @default "label"
+	 */
+	captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+	className?: string;
+};
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
+	...props
+}: CalendarProps) {
+	const defaultClassNames = getDefaultClassNames();
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"bg-background group/calendar p-4 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+				month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
+				nav: cn(
+					"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					"flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					"flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+				caption_label: cn(
+					"select-none font-semibold tracking-tight text-foreground",
+					captionLayout === "label"
+						? "text-sm"
+						: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+					defaultClassNames.caption_label,
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex border-b border-border pb-1.5", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground flex-1 select-none rounded-md text-[0.7rem] font-medium uppercase tracking-wider",
+					defaultClassNames.weekday,
+				),
+				week: cn("mt-1.5 flex w-full", defaultClassNames.week),
+				week_number_header: cn(
+					"w-[var(--cell-size)] select-none",
+					defaultClassNames.week_number_header,
+				),
+				week_number: cn(
+					"text-muted-foreground select-none text-[0.8rem]",
+					defaultClassNames.week_number,
+				),
+				day: cn(
+					"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+					defaultClassNames.day,
+				),
+				range_start: cn("bg-brand/10 rounded-l-md", defaultClassNames.range_start),
+				range_middle: cn("bg-brand/10 rounded-none", defaultClassNames.range_middle),
+				range_end: cn("bg-brand/10 rounded-r-md", defaultClassNames.range_end),
+				today: cn(
+					"text-brand font-semibold data-[selected=true]:rounded-none",
+					defaultClassNames.today,
+				),
+				outside: cn(
+					"text-muted-foreground/50 aria-selected:text-muted-foreground",
+					defaultClassNames.outside,
+				),
+				disabled: cn("text-muted-foreground opacity-40", defaultClassNames.disabled),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+					}
+
+					if (orientation === "right") {
+						return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+					}
+
+					return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-[var(--cell-size)] items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	);
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				// base size + typography (small inner inset so adjacent dates breathe)
+				"m-0.5 flex aspect-square h-auto w-[calc(100%-0.25rem)] min-w-[calc(var(--cell-size)-0.25rem)] items-center justify-center rounded-md text-sm font-normal leading-none transition-colors",
+				// hover (when not selected)
+				"hover:bg-accent hover:text-accent-foreground",
+				// today: keep brand text colour from row classNames; add subtle ring
+				"group-[[data-today=true]]/day:ring-1 group-[[data-today=true]]/day:ring-brand/40",
+				// single selection: brand fill, white text, full rounding
+				"data-[selected-single=true]:bg-brand data-[selected-single=true]:text-brand-foreground data-[selected-single=true]:hover:bg-brand/90 data-[selected-single=true]:hover:text-brand-foreground",
+				// range endpoints: brand fill, only outer corners rounded
+				"data-[range-start=true]:bg-brand data-[range-start=true]:text-brand-foreground data-[range-start=true]:hover:bg-brand/90 data-[range-start=true]:hover:text-brand-foreground data-[range-start=true]:rounded-r-none",
+				"data-[range-end=true]:bg-brand data-[range-end=true]:text-brand-foreground data-[range-end=true]:hover:bg-brand/90 data-[range-end=true]:hover:text-brand-foreground data-[range-end=true]:rounded-l-none",
+				// range middle: foreground stays default, no rounding
+				"data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-foreground data-[range-middle=true]:rounded-none",
+				// focus ring (for keyboard nav)
+				"group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-brand/40 group-data-[focused=true]/day:border-brand",
+				// modifier label (e.g. holidays) sub-line
+				"[&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/molecules/card.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** `<CardHeader>`, `<CardContent>`, `<CardFooter>` (or any custom layout). */
+	children?: React.ReactNode;
+	/**
+	 * Tailwind / CSS classes merged onto the card via `cn()`. Default
+	 * styling: `rounded-xl` (12px), `border`, `bg-card`, `shadow`.
+	 */
+	className?: string;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Typically `<CardTitle>` + `<CardDescription>`. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the header via `cn()`. Default: `p-6 space-y-1.5`. */
+	className?: string;
+}
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+	),
+);
+CardHeader.displayName = "CardHeader";
+
+export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** The card heading. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the title via `cn()`. */
+	className?: string;
+}
+
+const CardTitle = React.forwardRef<HTMLDivElement, CardTitleProps>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn("font-semibold leading-none tracking-tight", className)}
+			{...props}
+		/>
+	),
+);
+CardTitle.displayName = "CardTitle";
+
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Subtitle / supporting copy below the title. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the description via `cn()`. */
+	className?: string;
+}
+
+const CardDescription = React.forwardRef<HTMLDivElement, CardDescriptionProps>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+	),
+);
+CardDescription.displayName = "CardDescription";
+
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Card body. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the content via `cn()`. Default: `p-6 pt-0`. */
+	className?: string;
+}
+
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	),
+);
+CardContent.displayName = "CardContent";
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Card actions / metadata row. */
+	children?: React.ReactNode;
+	/**
+	 * Tailwind / CSS classes merged onto the footer via `cn()`. Default:
+	 * `flex items-center p-6 pt-0`.
+	 */
+	className?: string;
+}
+
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+	),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/molecules/code-block.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+	code: string;
+	language?: string;
+	showCopy?: boolean;
+}
+
+const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+	({ code, language, showCopy = true, className, ...props }, ref) => {
+		const [copied, setCopied] = React.useState(false);
+
+		const handleCopy = React.useCallback(async () => {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		}, [code]);
+
+		return (
+			<div ref={ref} className={cn("relative rounded-md bg-muted", className)} {...props}>
+				{(language || showCopy) && (
+					<div className="flex items-center justify-between border-b px-4 py-2">
+						{language && (
+							<span className="text-xs font-medium text-muted-foreground">{language}</span>
+						)}
+						{showCopy && (
+							<Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopy}>
+								{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+							</Button>
+						)}
+					</div>
+				)}
+				<pre className="overflow-x-auto p-4">
+					<code className="text-sm">{code}</code>
+				</pre>
+			</div>
+		);
+	},
+);
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };

package/src/components/molecules/empty-state.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Inbox } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+	icon?: React.ReactNode;
+	/** Primary message. Renders below the icon pill, 15px font-medium. */
+	title?: string;
+	/**
+	 * @deprecated Use `title`. Retained as an alias so existing call sites
+	 * (e.g. DataTable's empty fallback) keep working.
+	 */
+	message?: string;
+	description?: string;
+	action?: {
+		label: string;
+		onClick: () => void;
+	};
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+	({ icon, title, message, description, action, className, ...props }, ref) => {
+		const heading = title ?? message ?? "No items found";
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground",
+					className,
+				)}
+				{...props}
+			>
+				<div className="mb-1 inline-flex rounded-full bg-muted p-3 text-muted-foreground">
+					{icon ?? <Inbox className="h-5 w-5" />}
+				</div>
+				<div className="text-center">
+					<p className="text-[15px] font-medium text-foreground">{heading}</p>
+					{description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
+				</div>
+				{action && (
+					<Button variant="outline" size="sm" onClick={action.onClick}>
+						{action.label}
+					</Button>
+				)}
+			</div>
+		);
+	},
+);
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };

package/src/components/molecules/error-state.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { AlertCircle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+
+export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
+	message?: string;
+	onRetry?: () => void;
+	retryLabel?: string;
+}
+
+const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
+	(
+		{ message = "Something went wrong.", onRetry, retryLabel = "Try again", className, ...props },
+		ref,
+	) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex flex-col items-center justify-center gap-3 py-8 text-muted-foreground",
+					className,
+				)}
+				{...props}
+			>
+				<AlertCircle className="h-8 w-8 text-destructive" />
+				<p className="text-sm">{message}</p>
+				{onRetry && (
+					<Button variant="outline" size="sm" onClick={onRetry}>
+						{retryLabel}
+					</Button>
+				)}
+			</div>
+		);
+	},
+);
+ErrorState.displayName = "ErrorState";
+
+export { ErrorState };

package/src/components/molecules/field-display.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface FieldDisplayProps extends React.HTMLAttributes<HTMLDListElement> {
+	label: string;
+	value?: React.ReactNode;
+	mono?: boolean;
+}
+
+const FieldDisplay = React.forwardRef<HTMLDListElement, FieldDisplayProps>(
+	({ label, value, mono = false, className, ...props }, ref) => {
+		return (
+			<dl
+				ref={ref}
+				className={cn("grid grid-cols-[180px_1fr] items-baseline gap-4 py-2", className)}
+				{...props}
+			>
+				<dt className="text-[13px] font-medium text-muted-foreground">{label}</dt>
+				<dd
+					className={cn(
+						"break-words text-[13px]",
+						mono && "font-mono text-[12.5px]",
+						value ? "text-foreground" : "text-muted-foreground",
+					)}
+				>
+					{value ?? "—"}
+				</dd>
+			</dl>
+		);
+	},
+);
+FieldDisplay.displayName = "FieldDisplay";
+
+export { FieldDisplay };

package/src/components/molecules/input-otp.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const InputOTP = React.forwardRef<
+	React.ElementRef<typeof OTPInput>,
+	React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+	<OTPInput
+		ref={ref}
+		containerClassName={cn(
+			"flex items-center gap-2 has-[:disabled]:opacity-50",
+			containerClassName,
+		)}
+		className={cn("disabled:cursor-not-allowed", className)}
+		{...props}
+	/>
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+	/* c8 ignore next -- hasFakeCaret is only set by the input-otp library for a live selection range, which jsdom's fireEvent doesn't produce */
+	const fakeCaret = hasFakeCaret ? (
+		<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+		</div>
+	) : null;
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+				isActive && "z-10 ring-1 ring-ring",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{fakeCaret}
+		</div>
+	);
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+	<div ref={ref} role="separator" {...props}>
+		<Minus />
+	</div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/molecules/loading-state.tsx

@@ -0,0 +1,36 @@
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface LoadingStateProps extends React.HTMLAttributes<HTMLDivElement> {
+	message?: string;
+	size?: "sm" | "default" | "lg";
+}
+
+const sizeMap = {
+	sm: "h-4 w-4",
+	default: "h-6 w-6",
+	lg: "h-8 w-8",
+};
+
+const LoadingState = React.forwardRef<HTMLDivElement, LoadingStateProps>(
+	({ message = "Loading...", size = "default", className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex flex-col items-center justify-center gap-3 py-8 text-muted-foreground",
+					className,
+				)}
+				{...props}
+			>
+				<Loader2 className={cn("animate-spin", sizeMap[size])} />
+				{message && <p className="text-sm">{message}</p>}
+			</div>
+		);
+	},
+);
+LoadingState.displayName = "LoadingState";
+
+export { LoadingState };

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+	/** Leading icon — typically a Canvas `<Icon name="…" />`. */
+	icon?: React.ReactNode;
+	/** Tint variant for the icon's circular background. */
+	iconTone?: "neutral" | "destructive" | "info" | "success" | "warning";
+	/** Bold title line. */
+	title: React.ReactNode;
+	/** Optional secondary line (description / metadata). */
+	description?: React.ReactNode;
+	/** Right-aligned timestamp (relative or absolute). */
+	timestamp?: React.ReactNode;
+	/** When provided, the entire row becomes clickable. */
+	onClick?: () => void;
+}
+
+const TONE: Record<NonNullable<NotificationItemProps["iconTone"]>, string> = {
+	neutral: "bg-muted text-muted-foreground",
+	destructive: "bg-[hsl(var(--stat-destructive)/0.1)] text-[hsl(var(--stat-destructive))]",
+	info: "bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]",
+	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))]",
+};
+
+export const NotificationItem = React.forwardRef<HTMLDivElement, NotificationItemProps>(
+	(
+		{ icon, iconTone = "neutral", title, description, timestamp, onClick, className, ...props },
+		ref,
+	) => {
+		const Comp = onClick ? "button" : "div";
+		return (
+			<Comp
+				ref={ref as never}
+				type={onClick ? "button" : undefined}
+				onClick={onClick}
+				className={cn(
+					"flex w-full items-start gap-3 px-3 py-3 text-left transition-colors",
+					onClick && "cursor-pointer hover:bg-accent",
+					className,
+				)}
+				{...(props as Record<string, unknown>)}
+			>
+				{icon && (
+					<div
+						className={cn(
+							"flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
+							TONE[iconTone],
+						)}
+					>
+						{icon}
+					</div>
+				)}
+				<div className="min-w-0 flex-1 space-y-0.5">
+					<div className="text-[13px] font-semibold text-foreground">{title}</div>
+					{description && <div className="text-[12.5px] text-muted-foreground">{description}</div>}
+					{timestamp && (
+						<div className="font-mono text-[11px] text-muted-foreground">{timestamp}</div>
+					)}
+				</div>
+			</Comp>
+		);
+	},
+);
+NotificationItem.displayName = "NotificationItem";