@khal-os/ui 1.0.0 → 1.0.2

package/src/components/dropdown-menu.tsx

@@ -1,233 +0,0 @@
-'use client';
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-		inset?: boolean;
-	}
->(({ className, inset, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubTrigger
-		ref={ref}
-		className={cn(
-			'flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-copy-13 outline-none select-none',
-			'focus:bg-[var(--khal-menu-hover)]',
-			'data-[state=open]:bg-[var(--khal-menu-hover)]',
-			inset && 'pl-8',
-			className
-		)}
-		style={{ color: 'var(--khal-text-primary)' }}
-		{...props}
-	>
-		{children}
-	</DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubContent
-		ref={ref}
-		className={cn(
-			'z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1',
-			'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			className
-		)}
-		style={{
-			background: 'var(--khal-menu-bg)',
-			border: '1px solid var(--khal-menu-border)',
-			boxShadow: 'var(--khal-menu-shadow)',
-			color: 'var(--khal-text-primary)',
-		}}
-		{...props}
-	/>
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<DropdownMenuPrimitive.Portal>
-		<DropdownMenuPrimitive.Content
-			ref={ref}
-			sideOffset={sideOffset}
-			className={cn(
-				'z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1',
-				'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-				className
-			)}
-			style={{
-				background: 'var(--khal-menu-bg)',
-				border: '1px solid var(--khal-menu-border)',
-				boxShadow: 'var(--khal-menu-shadow)',
-				color: 'var(--khal-text-primary)',
-			}}
-			{...props}
-		/>
-	</DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-		inset?: boolean;
-		prefix?: React.ReactNode;
-		suffix?: React.ReactNode;
-	}
->(({ className, inset, prefix, suffix, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.Item
-		ref={ref}
-		className={cn(
-			'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none transition-colors',
-			'focus:bg-[var(--khal-menu-hover)]',
-			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			inset && 'pl-8',
-			className
-		)}
-		style={{ color: 'var(--khal-text-primary)' }}
-		{...props}
-	>
-		{prefix && <span className="inline-flex shrink-0">{prefix}</span>}
-		{children}
-		{suffix && (
-			<span className="ml-auto inline-flex shrink-0" style={{ color: 'var(--khal-text-muted)' }}>
-				{suffix}
-			</span>
-		)}
-	</DropdownMenuPrimitive.Item>
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-	<DropdownMenuPrimitive.CheckboxItem
-		ref={ref}
-		className={cn(
-			'relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors',
-			'focus:bg-[var(--khal-menu-hover)]',
-			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			className
-		)}
-		style={{ color: 'var(--khal-text-primary)' }}
-		checked={checked}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
-				<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3354 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.5553 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-						fill="currentColor"
-						fillRule="evenodd"
-						clipRule="evenodd"
-					></path>
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.RadioItem
-		ref={ref}
-		className={cn(
-			'relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors',
-			'focus:bg-[var(--khal-menu-hover)]',
-			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			className
-		)}
-		style={{ color: 'var(--khal-text-primary)' }}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
-				<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-					<circle cx="4" cy="4" r="4" fill="currentColor" />
-				</svg>
-			</DropdownMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-		inset?: boolean;
-	}
->(({ className, inset, ...props }, ref) => (
-	<DropdownMenuPrimitive.Label
-		ref={ref}
-		className={cn('px-2 py-1.5 text-label-12 font-semibold', inset && 'pl-8', className)}
-		style={{ color: 'var(--khal-text-secondary)' }}
-		{...props}
-	/>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-	React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.Separator
-		ref={ref}
-		className={cn('-mx-1 my-1 h-px', className)}
-		style={{ background: 'var(--khal-border-default)' }}
-		{...props}
-	/>
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-	return (
-		<span
-			className={cn('ml-auto text-label-12 tracking-widest', className)}
-			style={{ color: 'var(--khal-text-muted)' }}
-			{...props}
-		/>
-	);
-};
-
-export {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuPortal,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-};

package/src/components/glass-card.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const glassCardVariants = cva(
-	'relative overflow-hidden border transition-all [background:var(--khal-glass-tint)] [border-color:var(--khal-glass-border)]',
-	{
-		variants: {
-			variant: {
-				default: '[box-shadow:var(--khal-shadow-sm)]',
-				raised: '[box-shadow:var(--khal-shadow-md)]',
-			},
-			padding: {
-				sm: 'p-3',
-				md: 'p-4',
-				lg: 'p-6',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			padding: 'md',
-		},
-	}
-);
-
-interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof glassCardVariants> {
-	hover?: boolean;
-	glow?: string;
-}
-
-const GlassCard = React.forwardRef<HTMLDivElement, GlassCardProps>(
-	({ className, variant, padding, hover = false, glow, style, children, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					glassCardVariants({ variant, padding }),
-					hover && [
-						'cursor-pointer',
-						'hover:-translate-y-0.5',
-						'hover:[border-color:var(--khal-border-strong)]',
-						'hover:[box-shadow:var(--khal-shadow-lg)]',
-					],
-					className
-				)}
-				style={{
-					backdropFilter: 'var(--khal-glass-filter)',
-					WebkitBackdropFilter: 'var(--khal-glass-filter)',
-					borderRadius: 'var(--khal-radius-xl)',
-					transitionTimingFunction: 'var(--khal-ease-spring)',
-					transitionDuration: 'var(--khal-duration-normal)',
-					...style,
-				}}
-				{...props}
-			>
-				{glow && (
-					<div
-						className="pointer-events-none absolute inset-0 rounded-[inherit]"
-						style={{
-							background: `radial-gradient(ellipse at 50% 0%, color-mix(in srgb, ${glow} 20%, transparent), transparent 70%)`,
-						}}
-					/>
-				)}
-				<div className="relative">{children}</div>
-			</div>
-		);
-	}
-);
-GlassCard.displayName = 'GlassCard';
-
-export type { GlassCardProps };
-export { GlassCard, glassCardVariants };

package/src/components/input.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '../utils';
-
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-	/** Label above the input (geistcn compat) */
-	label?: string;
-	/** Size variant (geistcn compat) */
-	size?: 'small' | 'medium' | 'large';
-	/** HTML input type (named typeName for geistcn compat, also accepts type) */
-	typeName?: string;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, label, size, typeName, type, ...props }, ref) => {
-		const input = (
-			<input
-				type={typeName ?? type}
-				className={cn(
-					'flex w-full rounded-md border border-gray-alpha-400 bg-background-100 px-3 text-copy-13 text-gray-1000 transition-colors',
-					'file:border-0 file:bg-transparent file:text-sm file:font-medium',
-					'placeholder:text-gray-700',
-					'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-1',
-					'disabled:cursor-not-allowed disabled:opacity-50',
-					size === 'small' ? 'h-8' : size === 'large' ? 'h-11' : 'h-9',
-					className
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-
-		if (label) {
-			return (
-				<div className="flex flex-col gap-1.5">
-					<label className="text-label-13 text-gray-900">{label}</label>
-					{input}
-				</div>
-			);
-		}
-
-		return input;
-	}
-);
-Input.displayName = 'Input';
-
-export { Input };

package/src/components/khal-logo.tsx

@@ -1,73 +0,0 @@
-interface KhalLogoProps {
-	size?: number;
-	variant?: 'light' | 'dark';
-	className?: string;
-}
-
-/**
- * KhalLogo — SVG wordmark for large sizes (>=20), single "K" letterform for small sizes.
- * Uses currentColor so color is inherited from parent.
- */
-export function KhalLogo({ size = 20, variant = 'light', className }: KhalLogoProps) {
-	const color = variant === 'light' ? '#FFFFFF' : '#0A0A0A';
-	const showFull = size >= 20;
-
-	if (!showFull) {
-		// Small sizes: render just the K letterform from the SVG
-		return (
-			<svg
-				viewBox="0 0 156 155"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-				width={size}
-				height={size}
-				className={className}
-				aria-label="K"
-				style={{ color }}
-			>
-				<path
-					d="M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z"
-					fill="currentColor"
-				/>
-			</svg>
-		);
-	}
-
-	// Full wordmark SVG
-	return (
-		<svg
-			viewBox="0 0 756 155"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			width={size * (756 / 155)}
-			height={size}
-			className={className}
-			aria-label="khal"
-			style={{ color }}
-		>
-			<g clipPath="url(#khal-logo-clip)">
-				<path
-					d="M616.81 0H644.252V128.584H765.533V154.92H638.499C635.4 154.92 632.524 154.33 629.867 153.149C627.211 151.969 624.924 150.42 623.007 148.502C621.088 146.584 619.539 144.371 618.359 141.863C617.326 139.206 616.81 136.403 616.81 133.453V0Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M443.058 21.2467C445.123 14.4594 448.295 9.22105 452.573 5.53287C456.853 1.8447 462.533 0 469.616 0H519.632C527.009 0 532.911 1.91744 537.337 5.75467C541.763 9.44285 545.009 14.6072 547.076 21.2467L589.125 154.92H560.133L546.411 110.657H461.87L468.73 84.3212H538.665L521.181 26.3359H468.951L430 154.92H400.786L443.058 21.2467Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M190.123 0H217.565V62.6322H344.6V0H372.043V154.92H344.6V88.9681H217.565V154.92H190.123V0Z"
-					fill="currentColor"
-				/>
-				<path
-					d="M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z"
-					fill="currentColor"
-				/>
-			</g>
-			<defs>
-				<clipPath id="khal-logo-clip">
-					<rect width="756" height="155" fill="white" />
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}

package/src/components/live-feed.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { AnimatePresence, motion } from 'motion/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { cn } from '../utils';
-
-type FeedEventType = 'info' | 'success' | 'warning' | 'error' | 'agent' | 'system';
-
-interface FeedEvent {
-	id: string;
-	type: FeedEventType;
-	message: string;
-	timestamp?: Date;
-}
-
-const typeColors: Record<FeedEventType, string> = {
-	info: 'var(--ds-blue-600)',
-	success: 'var(--ds-green-600)',
-	warning: 'var(--ds-amber-600)',
-	error: 'var(--ds-red-600)',
-	agent: 'var(--ds-purple-600)',
-	system: 'var(--ds-gray-600)',
-};
-
-interface LiveFeedProps {
-	/** Initial events to render */
-	events?: FeedEvent[];
-	/** Maximum visible events before oldest are removed */
-	maxVisible?: number;
-	/** Show timestamps next to events */
-	showTimestamps?: boolean;
-	/** Height of the feed container */
-	height?: number | string;
-	className?: string;
-}
-
-function LiveFeed({
-	events: externalEvents,
-	maxVisible = 50,
-	showTimestamps = true,
-	height = 300,
-	className,
-}: LiveFeedProps) {
-	const [events, setEvents] = useState<FeedEvent[]>(externalEvents ?? []);
-	const scrollRef = useRef<HTMLDivElement>(null);
-	const isAtBottom = useRef(true);
-
-	// Sync external events
-	useEffect(() => {
-		if (externalEvents) {
-			setEvents((prev) => {
-				const combined = [...prev, ...externalEvents.filter((e) => !prev.some((p) => p.id === e.id))];
-				return combined.slice(-maxVisible);
-			});
-		}
-	}, [externalEvents, maxVisible]);
-
-	// Auto-scroll to bottom when new events arrive and user is at bottom
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (el && isAtBottom.current) {
-			el.scrollTop = el.scrollHeight;
-		}
-	}, [events]);
-
-	const handleScroll = useCallback(() => {
-		const el = scrollRef.current;
-		if (el) {
-			isAtBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
-		}
-	}, []);
-
-	const formatTime = (d: Date) =>
-		d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-
-	return (
-		<div
-			ref={scrollRef}
-			onScroll={handleScroll}
-			className={cn('overflow-y-auto overflow-x-hidden font-mono text-xs leading-5 scrollbar-thin', className)}
-			style={{ height }}
-		>
-			<AnimatePresence initial={false}>
-				{events.map((event) => (
-					<motion.div
-						key={event.id}
-						initial={{ opacity: 0, height: 0 }}
-						animate={{ opacity: 1, height: 'auto' }}
-						exit={{ opacity: 0, height: 0 }}
-						transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
-						className="flex gap-2 px-2 py-0.5 hover:bg-[var(--ds-gray-alpha-100)]"
-					>
-						<span
-							className="inline-block w-1.5 h-1.5 rounded-full mt-1.5 shrink-0"
-							style={{ backgroundColor: typeColors[event.type] }}
-						/>
-						{showTimestamps && event.timestamp && (
-							<span className="shrink-0 opacity-40 tabular-nums">{formatTime(event.timestamp)}</span>
-						)}
-						<span className="opacity-80 break-words min-w-0">{event.message}</span>
-					</motion.div>
-				))}
-			</AnimatePresence>
-		</div>
-	);
-}
-
-export type { LiveFeedProps, FeedEvent, FeedEventType };
-export { LiveFeed };

package/src/components/mesh-gradient.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import { useReducedMotion } from '../hooks/useReducedMotion';
-
-const MeshGradientShader = lazy(() => import('@paper-design/shaders-react').then((m) => ({ default: m.MeshGradient })));
-
-interface MeshGradientProps {
-	/** Array of CSS color strings (typically 4-8) */
-	colors: string[];
-	/** Animation speed multiplier (default 0.02) */
-	speed?: number;
-	className?: string;
-	style?: React.CSSProperties;
-}
-
-function StaticFallback({ colors }: { colors: string[] }) {
-	const bg =
-		colors.length >= 2
-			? `linear-gradient(135deg, ${colors[0]} 0%, ${colors[Math.floor(colors.length / 2)]} 50%, ${colors[colors.length - 1]} 100%)`
-			: (colors[0] ?? '#0A0A0A');
-
-	return <div style={{ width: '100%', height: '100%', background: bg }} />;
-}
-
-function MeshGradientInner({ colors, speed = 0.02, className, style }: MeshGradientProps) {
-	const ref = useRef<HTMLDivElement>(null);
-	const [visible, setVisible] = useState(false);
-	const reducedMotion = useReducedMotion();
-
-	useEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-
-		const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), {
-			rootMargin: '100px',
-		});
-
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, []);
-
-	return (
-		<div ref={ref} className={className} style={{ position: 'absolute', inset: 0, ...style }}>
-			{visible && !reducedMotion ? (
-				<Suspense fallback={<StaticFallback colors={colors} />}>
-					<MeshGradientShader colors={colors} speed={speed} style={{ width: '100%', height: '100%' }} />
-				</Suspense>
-			) : (
-				<StaticFallback colors={colors} />
-			)}
-		</div>
-	);
-}
-
-export type { MeshGradientProps };
-export { MeshGradientInner as MeshGradient };

package/src/components/metric-display.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-/**
- * MetricDisplay — LP section-level metric/stat component.
- *
- * Extracted from khal-landing section components:
- * - Stat cards in metrics.tsx (large numbers with suffix/prefix)
- * - Metric tiles in architecture.tsx AppBuilderMockup
- * - ROI projected savings in metrics.tsx
- *
- * Renders a large highlighted value with a label and optional description.
- */
-const metricDisplayVariants = cva('flex flex-col', {
-	variants: {
-		size: {
-			/** Compact — for inline/tile use (architecture mockup metric tiles) */
-			sm: 'gap-1',
-			/** Standard — for dashboard displays */
-			md: 'gap-1.5',
-			/** Large — hero stat cards (metrics.tsx) */
-			lg: 'gap-2',
-		},
-	},
-	defaultVariants: {
-		size: 'md',
-	},
-});
-
-const valueSizeMap = {
-	sm: 'text-[22px] font-semibold leading-7 tracking-tight',
-	md: 'text-[28px] font-semibold leading-8 tracking-[-0.02em]',
-	lg: 'text-[36px] sm:text-[44px] font-semibold leading-none tracking-[-0.04em]',
-} as const;
-
-const labelSizeMap = {
-	sm: 'text-[11px] uppercase tracking-[0.06em] text-[#FFFFFF80] font-medium leading-3.5',
-	md: 'text-[13px] text-[#FFFFFFCC] font-medium leading-4',
-	lg: 'text-[15px] text-[#FFFFFFCC] font-medium leading-5',
-} as const;
-
-interface MetricDisplayProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricDisplayVariants> {
-	/** The primary value to display */
-	value: string | number;
-	/** Label describing the metric */
-	label: string;
-	/** Optional description/subtext below the label */
-	description?: string;
-	/** Optional prefix before the value (e.g. "+", "$") */
-	prefix?: string;
-	/** Optional suffix after the value (e.g. "%", "pts", "ms") */
-	suffix?: string;
-	/** Accent color for the value. Defaults to current text color. */
-	accentColor?: string;
-}
-
-const MetricDisplay = React.forwardRef<HTMLDivElement, MetricDisplayProps>(
-	({ className, size = 'md', value, label, description, prefix, suffix, accentColor, ...props }, ref) => {
-		const resolvedSize = (size ?? 'md') as 'sm' | 'md' | 'lg';
-
-		return (
-			<div ref={ref} className={cn(metricDisplayVariants({ size }), className)} {...props}>
-				{/* Label above value for sm size (matches LP tile pattern) */}
-				{resolvedSize === 'sm' && <span className={labelSizeMap[resolvedSize]}>{label}</span>}
-
-				{/* Value */}
-				<div
-					className={cn(valueSizeMap[resolvedSize], 'tabular-nums')}
-					style={accentColor ? { color: accentColor } : undefined}
-				>
-					{prefix && <span>{prefix}</span>}
-					<span>{value}</span>
-					{suffix && (
-						<span className={resolvedSize === 'lg' ? 'text-[32px] tracking-[-0.02em] ml-0.5' : 'ml-0.5'}>{suffix}</span>
-					)}
-				</div>
-
-				{/* Label below value for md/lg sizes */}
-				{resolvedSize !== 'sm' && <span className={labelSizeMap[resolvedSize]}>{label}</span>}
-
-				{/* Description */}
-				{description && <span className="text-[13px] text-[#FFFFFF80] leading-4">{description}</span>}
-			</div>
-		);
-	}
-);
-MetricDisplay.displayName = 'MetricDisplay';
-
-export type { MetricDisplayProps };
-export { MetricDisplay, metricDisplayVariants };