@olympusoss/canvas 2.6.19

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface NotificationListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+	/** Header title — defaults to "Notifications". */
+	title?: React.ReactNode;
+	/** Optional count chip rendered to the right of the title (e.g. "3 new"). */
+	count?: React.ReactNode;
+	/** Footer slot — typically a single full-width "View all" link/button. */
+	footer?: React.ReactNode;
+	/** Notification rows — typically `<NotificationItem>` instances. */
+	children?: React.ReactNode;
+}
+
+export const NotificationList = React.forwardRef<HTMLDivElement, NotificationListProps>(
+	({ title = "Notifications", count, footer, children, className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"w-80 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+					className,
+				)}
+				{...props}
+			>
+				<div className="flex items-center justify-between border-b border-border px-3 py-2.5">
+					<span className="text-[13px] font-semibold">{title}</span>
+					{count != null && (
+						<span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+							{count}
+						</span>
+					)}
+				</div>
+				<div className="max-h-96 divide-y divide-border overflow-y-auto">{children}</div>
+				{footer && (
+					<div className="border-t border-border bg-muted/30 px-3 py-2 text-center text-[12.5px] font-medium">
+						{footer}
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+NotificationList.displayName = "NotificationList";

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+	/** Numeric count. When omitted (or `dot` is true), renders a tone-tinted dot. */
+	count?: number;
+	/** Cap displayed count — anything above renders as `${max}+`. Default 99. */
+	max?: number;
+	/** Color tone. */
+	tone?: "destructive" | "default" | "muted";
+	/** Render as a dot regardless of count. */
+	dot?: boolean;
+}
+
+const TONE: Record<NonNullable<NumberBadgeProps["tone"]>, string> = {
+	destructive: "bg-destructive text-destructive-foreground",
+	default: "bg-primary text-primary-foreground",
+	muted: "bg-muted text-muted-foreground",
+};
+
+/**
+ * Small overlay badge for counts on icon buttons (notification bell, inbox,
+ * etc.). Position it absolutely against a `relative` parent — typically by
+ * pairing with `absolute -right-1 -top-1` or similar utility classes via
+ * `className`. Defaults to top-right placement.
+ */
+export const NumberBadge = React.forwardRef<HTMLSpanElement, NumberBadgeProps>(
+	({ count, max = 99, tone = "destructive", dot, className, ...props }, ref) => {
+		const isDot = dot || count == null;
+		const display = !isDot && count != null && count > max ? `${max}+` : `${count ?? ""}`;
+		return (
+			<span
+				ref={ref}
+				role="status"
+				aria-label={isDot ? "New" : `${count} new`}
+				className={cn(
+					"pointer-events-none absolute -right-1 -top-1 inline-flex items-center justify-center font-mono font-medium tabular-nums",
+					isDot
+						? "h-1.5 w-1.5 rounded-full"
+						: "min-w-[1.125rem] rounded-full px-1 text-[10px] leading-none",
+					!isDot && "h-[1.125rem]",
+					TONE[tone],
+					className,
+				)}
+				{...props}
+			>
+				{!isDot && display}
+			</span>
+		);
+	},
+);
+NumberBadge.displayName = "NumberBadge";

package/src/components/molecules/page-header.tsx

@@ -0,0 +1,88 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Icon } from "../atoms/icon";
+
+export interface PageHeaderBreadcrumb {
+	label: string;
+	href?: string;
+}
+
+export interface PageHeaderProps {
+	title: string | React.ReactNode;
+	subtitle?: string | React.ReactNode;
+	icon?: React.ReactNode;
+	actions?: React.ReactNode;
+	breadcrumbs?: PageHeaderBreadcrumb[];
+	/**
+	 * Optional link wrapper. Pass Next.js `Link` or React Router `Link` to make
+	 * breadcrumb links client-side routable. Defaults to a plain `<a>`.
+	 */
+	linkComponent?: React.ComponentType<{
+		href: string;
+		className?: string;
+		children: React.ReactNode;
+	}>;
+	className?: string;
+}
+
+export function PageHeader({
+	title,
+	subtitle,
+	icon,
+	actions,
+	breadcrumbs,
+	linkComponent: LinkComp,
+	className,
+}: PageHeaderProps) {
+	return (
+		<div className={cn("mb-6 flex items-start justify-between", className)}>
+			<div className="space-y-1">
+				{breadcrumbs && breadcrumbs.length > 0 && (
+					<div className="mb-2 flex items-center gap-1 text-sm text-muted-foreground">
+						{breadcrumbs.map((crumb, i) => (
+							<span key={crumb.label} className="flex items-center gap-1">
+								{crumb.href ? (
+									LinkComp ? (
+										<LinkComp href={crumb.href} className="hover:text-foreground transition-colors">
+											{crumb.label}
+										</LinkComp>
+									) : (
+										<a href={crumb.href} className="hover:text-foreground transition-colors">
+											{crumb.label}
+										</a>
+									)
+								) : (
+									<span className="text-foreground">{crumb.label}</span>
+								)}
+								{i < breadcrumbs.length - 1 && <Icon name="ChevronRight" className="h-3 w-3" />}
+							</span>
+						))}
+					</div>
+				)}
+				<div className="flex items-center gap-3">
+					{icon}
+					{typeof title === "string" ? (
+						<h1 className="text-[22px] font-semibold tracking-[-0.02em] text-foreground">
+							{title}
+						</h1>
+					) : (
+						title
+					)}
+				</div>
+				{subtitle && (
+					<div>
+						{typeof subtitle === "string" ? (
+							<p className="text-sm text-muted-foreground">{subtitle}</p>
+						) : (
+							subtitle
+						)}
+					</div>
+				)}
+			</div>
+			{actions && <div className="flex items-center gap-2">{actions}</div>}
+		</div>
+	);
+}
+
+PageHeader.displayName = "PageHeader";

package/src/components/molecules/page-tabs.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface PageTabsItem {
+	label: string;
+	value: string;
+	icon?: React.ReactNode;
+	badge?: number | string;
+}
+
+export interface PageTabsProps {
+	tabs: PageTabsItem[];
+	value: string;
+	onChange: (value: string) => void;
+	variant?: "default" | "pills" | "underline";
+}
+
+function renderBadge(badge: number | string | undefined, active: boolean): React.ReactNode {
+	if (badge === undefined) return null;
+	return (
+		<span
+			className={cn(
+				"ml-1 rounded-full px-1.5 py-0.5 text-xs font-medium",
+				active ? "bg-primary/10 text-primary" : "bg-muted-foreground/10 text-muted-foreground",
+			)}
+		>
+			{badge}
+		</span>
+	);
+}
+
+export function PageTabs({ tabs, value, onChange, variant = "default" }: PageTabsProps) {
+	if (variant === "underline") {
+		return (
+			<div className="flex gap-4 border-b border-border">
+				{tabs.map((tab) => {
+					const active = value === tab.value;
+					return (
+						<button
+							key={tab.value}
+							type="button"
+							onClick={() => onChange(tab.value)}
+							className={cn(
+								"inline-flex items-center gap-1.5 border-b-2 px-1 pb-3 text-sm font-medium transition-colors",
+								active
+									? "border-primary text-primary"
+									: "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
+							)}
+						>
+							{tab.icon && <span className="h-4 w-4">{tab.icon}</span>}
+							{tab.label}
+							{renderBadge(tab.badge, active)}
+						</button>
+					);
+				})}
+			</div>
+		);
+	}
+
+	const isPills = variant === "pills";
+	return (
+		<div className={cn("flex flex-wrap gap-1", isPills && "rounded-lg bg-muted p-1")}>
+			{tabs.map((tab) => {
+				const active = value === tab.value;
+				return (
+					<button
+						key={tab.value}
+						type="button"
+						onClick={() => onChange(tab.value)}
+						className={cn(
+							"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+							isPills
+								? active
+									? "bg-background text-foreground shadow-sm"
+									: "text-muted-foreground hover:text-foreground"
+								: active
+									? "bg-accent text-accent-foreground"
+									: "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+						)}
+					>
+						{tab.icon && <span className="h-4 w-4">{tab.icon}</span>}
+						{tab.label}
+						{renderBadge(tab.badge, active)}
+					</button>
+				);
+			})}
+		</div>
+	);
+}
+
+PageTabs.displayName = "PageTabs";

package/src/components/molecules/pagination.tsx

@@ -0,0 +1,150 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { type ButtonProps, buttonVariants } from "../atoms/button";
+
+export interface PaginationProps extends React.ComponentProps<"nav"> {
+	/** A `<PaginationContent>` with `<PaginationItem>`s. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<nav>` via `cn()`. */
+	className?: string;
+}
+
+const Pagination = ({ className, ...props }: PaginationProps) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+export interface PaginationContentProps extends React.ComponentProps<"ul"> {
+	/** A flat list of `<PaginationItem>`s. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<ul>` via `cn()`. */
+	className?: string;
+}
+
+const PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(
+	({ className, ...props }, ref) => (
+		<ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+	),
+);
+PaginationContent.displayName = "PaginationContent";
+
+export interface PaginationItemProps extends React.ComponentProps<"li"> {
+	/** Typically a `<PaginationLink>`, `<PaginationPrevious>`, `<PaginationNext>`, or `<PaginationEllipsis>`. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<li>` via `cn()`. */
+	className?: string;
+}
+
+const PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(
+	({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
+);
+PaginationItem.displayName = "PaginationItem";
+
+export interface PaginationLinkProps extends React.ComponentProps<"a"> {
+	/**
+	 * Mark this link as the current page. Adds `aria-current="page"` and
+	 * applies the outline button variant.
+	 * @default false
+	 */
+	isActive?: boolean;
+	/**
+	 * Button-style size preset (inherited from `<Button>`).
+	 * @default "icon"
+	 */
+	size?: ButtonProps["size"];
+	/** Page number or label. */
+	children?: React.ReactNode;
+	/** Anchor target. */
+	href?: string;
+	/** Tailwind / CSS classes merged onto the link via `cn()`. */
+	className?: string;
+}
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "ghost",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+export interface PaginationPreviousProps extends Omit<PaginationLinkProps, "size"> {
+	/** Anchor target for the previous page. */
+	href?: string;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const PaginationPrevious = ({ className, ...props }: PaginationPreviousProps) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+export interface PaginationNextProps extends Omit<PaginationLinkProps, "size"> {
+	/** Anchor target for the next page. */
+	href?: string;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const PaginationNext = ({ className, ...props }: PaginationNextProps) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+export interface PaginationEllipsisProps extends React.ComponentProps<"span"> {
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const PaginationEllipsis = ({ className, ...props }: PaginationEllipsisProps) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};

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

@@ -0,0 +1,200 @@
+"use client";
+
+import parsePhoneNumber, {
+	type CountryCode,
+	getCountries,
+	getCountryCallingCode,
+	isValidPhoneNumber,
+} from "libphonenumber-js";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Input } from "../atoms/input";
+import { Label } from "../atoms/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../organisms/select";
+
+export interface PhoneInputProps {
+	id: string;
+	value?: string;
+	onChange: (e164Value: string | undefined) => void;
+	label?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	readonly?: boolean;
+	required?: boolean;
+	/** Default country ISO code if the value is empty. Default: "US". */
+	defaultCountry?: CountryCode;
+	/** Override the list of selectable countries (defaults to all). */
+	countryCodes?: CountryCode[];
+	/** Called with error string (or "" when valid/cleared). */
+	onValidityChange?: (error: string) => void;
+	className?: string;
+}
+
+interface CountryOption {
+	code: CountryCode;
+	name: string;
+	callingCode: string;
+}
+
+/** Convert an ISO 3166-1 alpha-2 country code to its flag emoji. */
+function flagEmoji(code: string): string {
+	const A = "A".charCodeAt(0);
+	const offset = 0x1f1e6 - A;
+	const upper = code.toUpperCase();
+	/* c8 ignore next -- defensive: every CountryCode from libphonenumber is a 2-letter ISO code by construction; only reachable if a malformed string slips past TS at the call site */
+	if (upper.length !== 2) return code;
+	return String.fromCodePoint(upper.charCodeAt(0) + offset, upper.charCodeAt(1) + offset);
+}
+
+function buildCountryOptions(codes?: CountryCode[]): CountryOption[] {
+	const list = codes ?? getCountries();
+	const displayNames = new Intl.DisplayNames(["en"], { type: "region" });
+	return list
+		.map((code) => {
+			const callingCode = getCountryCallingCode(code);
+			/* c8 ignore next -- defensive: Intl.DisplayNames returns a name for every valid ISO country code in jsdom; the `|| code` fallback only fires if Intl data is stripped */
+			const name = displayNames.of(code) || code;
+			return { code, name, callingCode };
+		})
+		.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function PhoneInput({
+	id,
+	value,
+	onChange,
+	label,
+	placeholder,
+	disabled,
+	readonly,
+	required,
+	defaultCountry = "US",
+	countryCodes,
+	onValidityChange,
+	className,
+}: PhoneInputProps) {
+	const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>(defaultCountry);
+	const [localValue, setLocalValue] = React.useState("");
+	const [error, setError] = React.useState("");
+
+	const countryOptions = React.useMemo(() => buildCountryOptions(countryCodes), [countryCodes]);
+
+	// Hydrate state from an external E.164 value.
+	React.useEffect(() => {
+		if (!value) {
+			setLocalValue("");
+			return;
+		}
+		try {
+			const parsed = parsePhoneNumber(value);
+			if (parsed) {
+				if (parsed.country) setSelectedCountry(parsed.country);
+				/* c8 ignore next -- defensive: a successfully-parsed PhoneNumber always exposes a nationalNumber; the `?? ""` fallback only fires if libphonenumber returns a partial object */
+				setLocalValue(parsed.nationalNumber ?? "");
+			} else {
+				setLocalValue(value);
+			}
+		} catch {
+			/* c8 ignore next -- libphonenumber never throws on arbitrary input in jsdom; only reachable if parser invariants change */
+			setLocalValue(value);
+		}
+	}, [value]);
+
+	const updateValidity = React.useCallback(
+		(e164: string) => {
+			if (!e164) {
+				const err = required ? "Phone number is required" : "";
+				setError(err);
+				onValidityChange?.(err);
+				return;
+			}
+			const valid = isValidPhoneNumber(e164);
+			const err = valid ? "" : "Enter a valid phone number";
+			setError(err);
+			onValidityChange?.(err);
+		},
+		[required, onValidityChange],
+	);
+
+	const emit = (country: CountryCode, national: string) => {
+		if (!national.trim()) {
+			onChange(undefined);
+			updateValidity("");
+			return;
+		}
+		const callingCode = getCountryCallingCode(country);
+		const e164 = `+${callingCode}${national.replace(/\D/g, "")}`;
+		onChange(e164);
+		updateValidity(e164);
+	};
+
+	return (
+		<div className={cn("space-y-1.5", className)}>
+			{label && (
+				<Label htmlFor={id}>
+					{label}
+					{required && <span className="ml-0.5 text-destructive">*</span>}
+				</Label>
+			)}
+			<div className="flex gap-2">
+				<Select
+					value={selectedCountry}
+					onValueChange={(next) => {
+						const code = next as CountryCode;
+						setSelectedCountry(code);
+						emit(code, localValue);
+					}}
+					disabled={disabled || readonly}
+				>
+					<SelectTrigger
+						aria-label="Country"
+						className="w-auto shrink-0 gap-1.5 px-2.5 font-mono text-sm"
+					>
+						<SelectValue>
+							<span className="flex items-center gap-1.5">
+								<span aria-hidden className="text-base leading-none">
+									{flagEmoji(selectedCountry)}
+								</span>
+								<span>+{getCountryCallingCode(selectedCountry)}</span>
+							</span>
+						</SelectValue>
+					</SelectTrigger>
+					<SelectContent className="max-h-[320px] min-w-[260px]">
+						{countryOptions.map((opt) => (
+							<SelectItem key={opt.code} value={opt.code}>
+								<span className="flex items-center gap-2">
+									<span aria-hidden className="text-base leading-none">
+										{flagEmoji(opt.code)}
+									</span>
+									<span>{opt.name}</span>
+									<span className="font-mono text-xs text-muted-foreground">
+										+{opt.callingCode}
+									</span>
+								</span>
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<Input
+					id={id}
+					type="tel"
+					inputMode="tel"
+					value={localValue}
+					onChange={(e) => {
+						const v = e.target.value;
+						setLocalValue(v);
+						emit(selectedCountry, v);
+					}}
+					placeholder={placeholder}
+					disabled={disabled}
+					readOnly={readonly}
+					className={cn("flex-1", error && "border-destructive focus-visible:ring-destructive")}
+				/>
+			</div>
+			{error && <p className="text-xs text-destructive">{error}</p>}
+		</div>
+	);
+}
+
+PhoneInput.displayName = "PhoneInput";

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { Search, X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+import { Input } from "../atoms/input";
+
+export interface SearchBarProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+	value: string;
+	onChange: (value: string) => void;
+	onClear?: () => void;
+	/**
+	 * Optional keyboard-shortcut hint rendered as a `<kbd>` on the right of
+	 * the input when empty. Hidden once the user types so the clear button
+	 * has the slot. Example: `shortcut="⌘K"`.
+	 */
+	shortcut?: string;
+}
+
+const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(
+	({ value, onChange, onClear, shortcut, className, placeholder = "Search...", ...props }, ref) => {
+		const showShortcut = !!shortcut && value.length === 0;
+		return (
+			<div className={cn("relative", className)}>
+				<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+				<Input
+					ref={ref}
+					value={value}
+					onChange={(e) => onChange(e.target.value)}
+					placeholder={placeholder}
+					className={cn("pl-9", showShortcut ? "pr-12" : "pr-9")}
+					{...props}
+				/>
+				{value && (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2"
+						onClick={() => {
+							onChange("");
+							onClear?.();
+						}}
+					>
+						<X className="h-3 w-3" />
+					</Button>
+				)}
+				{showShortcut && (
+					<kbd
+						aria-hidden
+						className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-border bg-muted/40 px-1.5 font-mono text-[10px] text-muted-foreground"
+					>
+						{shortcut}
+					</kbd>
+				)}
+			</div>
+		);
+	},
+);
+SearchBar.displayName = "SearchBar";
+
+export { SearchBar };