@olympusoss/canvas 2.20.2 → 4.0.0

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

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

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

@@ -1,64 +0,0 @@
-"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 };