@olympusoss/canvas 2.20.2 → 3.1.0

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

@@ -1,53 +0,0 @@
-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/or-separator.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface OrSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Text rendered between the two rule segments.
-	 * @default "or"
-	 */
-	label?: React.ReactNode;
-}
-
-/**
- * Horizontal divider with a centred label, e.g. between social-provider
- * buttons and an email/password form. Two `border-t` rules flank a short
- * upper-case label sitting on the card background.
- *
- * Place inside a card whose background is `bg-card`; the label inherits
- * that surface so the rules visually meet behind it.
- */
-const OrSeparator = React.forwardRef<HTMLDivElement, OrSeparatorProps>(
-	({ label = "or", className, ...props }, ref) => (
-		<div
-			ref={ref}
-			role="separator"
-			aria-orientation="horizontal"
-			className={cn("flex items-center gap-3 py-1", className)}
-			{...props}
-		>
-			<div className="h-px flex-1 bg-border" />
-			<span className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">{label}</span>
-			<div className="h-px flex-1 bg-border" />
-		</div>
-	),
-);
-OrSeparator.displayName = "OrSeparator";
-
-export { OrSeparator };

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

@@ -1,88 +0,0 @@
-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-brand transition-colors">
-											{crumb.label}
-										</LinkComp>
-									) : (
-										<a href={crumb.href} className="hover:text-brand 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

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

@@ -1,150 +0,0 @@
-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/password-input.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { Eye, EyeOff } 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 PasswordInputProps
-	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-	/**
-	 * Initial visibility state. Pair with `onVisibilityChange` for a
-	 * controlled input.
-	 * @default false
-	 */
-	defaultVisible?: boolean;
-	/** Controlled visibility. Overrides `defaultVisible`. */
-	visible?: boolean;
-	/** Fired when the user clicks the eye toggle. */
-	onVisibilityChange?: (visible: boolean) => void;
-	/**
-	 * Accessible label on the eye toggle button.
-	 * @default "Toggle password visibility"
-	 */
-	toggleLabel?: string;
-}
-
-/**
- * Password input with a show/hide eye toggle. Renders as an `Input` (atom)
- * with a `Button` (atom) absolutely positioned at the trailing edge.
- *
- * Use anywhere a password field is needed: login, registration, settings,
- * reset flows.
- */
-const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-	(
-		{
-			defaultVisible = false,
-			visible: controlledVisible,
-			onVisibilityChange,
-			toggleLabel = "Toggle password visibility",
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
-		const visible = controlledVisible ?? internalVisible;
-
-		const toggle = () => {
-			const next = !visible;
-			if (controlledVisible === undefined) setInternalVisible(next);
-			onVisibilityChange?.(next);
-		};
-
-		return (
-			<div className="relative">
-				<Input
-					ref={ref}
-					type={visible ? "text" : "password"}
-					className={cn("pr-10", className)}
-					{...props}
-				/>
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon"
-					onClick={toggle}
-					aria-label={toggleLabel}
-					aria-pressed={visible}
-					className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-					tabIndex={-1}
-				>
-					{visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-				</Button>
-			</div>
-		);
-	},
-);
-PasswordInput.displayName = "PasswordInput";
-
-export { PasswordInput };

package/src/components/molecules/password-strength-meter.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export type PasswordStrengthLevel = 0 | 1 | 2 | 3 | 4;
-
-export interface PasswordStrength {
-	/** 0 = empty, 1 = weak, 2 = fair, 3 = good, 4 = strong. */
-	level: PasswordStrengthLevel;
-	/** Short human label shown next to the meter. */
-	label: string;
-}
-
-/**
- * Score a password 0-4 based on length + character variety. Returns the
- * level plus a short label. Heuristic-only; for a true strength score use a
- * dictionary-aware estimator like `@zxcvbn-ts/core` and map its score here.
- */
-export function scorePassword(pw: string): PasswordStrength {
-	if (!pw) return { level: 0, label: "" };
-	let score = 0;
-	if (pw.length >= 8) score++;
-	if (pw.length >= 12) score++;
-	if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
-	if (/\d/.test(pw)) score++;
-	if (/[^A-Za-z0-9]/.test(pw)) score++;
-	if (pw.length < 6) score = Math.min(score, 1);
-
-	// score is clamped into [1, 4]: `Math.max(1, …)` provides the floor,
-	// `Math.min(4, …)` provides the ceiling. Higher-tier scorers can map
-	// dictionary results into the same shape.
-	const level = Math.min(4, Math.max(1, score)) as PasswordStrengthLevel;
-	const labels = ["", "Weak", "Fair", "Good", "Strong"];
-	return { level, label: labels[level] };
-}
-
-export interface PasswordStrengthMeterProps {
-	/** Password value to score. Empty string renders nothing. */
-	value: string;
-	/**
-	 * Custom scorer. Override the default heuristic with a zxcvbn-based
-	 * scorer for production use.
-	 */
-	score?: (pw: string) => PasswordStrength;
-	/** Tailwind / CSS classes merged onto the root via `cn()`. */
-	className?: string;
-	/**
-	 * Hide the strength label text and show only the bar.
-	 * @default false
-	 */
-	hideLabel?: boolean;
-}
-
-/**
- * Four-segment strength bar for a password input. Renders nothing for an
- * empty value. Use beneath a password input in registration and reset
- * flows.
- */
-const PasswordStrengthMeter = React.forwardRef<HTMLDivElement, PasswordStrengthMeterProps>(
-	({ value, score = scorePassword, className, hideLabel = false }, ref) => {
-		const { level, label } = score(value);
-		if (level === 0) return null;
-		const segmentColors = [
-			"bg-muted",
-			"bg-destructive",
-			"bg-amber-500",
-			"bg-emerald-500",
-			"bg-emerald-600",
-		];
-		const labelColor =
-			level === 1
-				? "text-destructive"
-				: level === 2
-					? "text-amber-600 dark:text-amber-500"
-					: "text-emerald-600 dark:text-emerald-500";
-
-		return (
-			<div ref={ref} className={cn("flex items-center gap-2", className)}>
-				<div className="flex flex-1 gap-1" aria-hidden>
-					{[1, 2, 3, 4].map((seg) => (
-						<div
-							key={seg}
-							className={cn(
-								"h-1 flex-1 rounded-full transition-colors",
-								seg <= level ? segmentColors[level] : "bg-muted",
-							)}
-						/>
-					))}
-				</div>
-				{!hideLabel && (
-					<span className={cn("text-xs font-medium tabular-nums", labelColor)}>{label}</span>
-				)}
-				<span className="sr-only" role="status">
-					Password strength: {label}
-				</span>
-			</div>
-		);
-	},
-);
-PasswordStrengthMeter.displayName = "PasswordStrengthMeter";
-
-export { PasswordStrengthMeter };