@khal-os/ui 1.0.1 → 1.0.2

package/src/components/ContextMenu.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const ContextMenu = ContextMenuPrimitive.Root;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = React.forwardRef<
-	React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-		inset?: boolean;
-	}
->(({ className, inset, children, ...props }, ref) => (
-	<ContextMenuPrimitive.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}
-	</ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = React.forwardRef<
-	React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.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',
-			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}
-	/>
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = React.forwardRef<
-	React.ComponentRef<typeof ContextMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.Portal>
-		<ContextMenuPrimitive.Content
-			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',
-				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}
-		/>
-	</ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = React.forwardRef<
-	React.ComponentRef<typeof ContextMenuPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-		inset?: boolean;
-	}
->(({ className, inset, ...props }, ref) => (
-	<ContextMenuPrimitive.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}
-	/>
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuSeparator = React.forwardRef<
-	React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<ContextMenuPrimitive.Separator
-		ref={ref}
-		className={cn('-mx-1 my-1 h-px', className)}
-		style={{ background: 'var(--khal-border-default)' }}
-		{...props}
-	/>
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-export {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuGroup,
-	ContextMenuItem,
-	ContextMenuPortal,
-	ContextMenuRadioGroup,
-	ContextMenuSeparator,
-	ContextMenuSub,
-	ContextMenuSubContent,
-	ContextMenuSubTrigger,
-	ContextMenuTrigger,
-};

package/src/components/avatar.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '../utils';
-import { StatusDot } from './status-dot';
-
-const sizeMap = { sm: 24, md: 32, lg: 40 } as const;
-const fontSizeMap = { sm: '10px', md: '12px', lg: '14px' } as const;
-
-const statusColorMap: Record<string, string> = {
-	online: 'var(--khal-status-live)',
-	idle: 'var(--khal-status-warning)',
-	away: 'var(--khal-status-idle)',
-};
-
-interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-	name: string;
-	size?: keyof typeof sizeMap;
-	status?: 'online' | 'idle' | 'away' | null;
-	src?: string;
-}
-
-function getInitials(name: string): string {
-	const parts = name.trim().split(/\s+/);
-	if (parts.length >= 2) {
-		return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-	}
-	return name.charAt(0).toUpperCase();
-}
-
-const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
-	({ name, size = 'md', status, src, className, style, ...props }, ref) => {
-		const px = sizeMap[size];
-		const [imgError, setImgError] = React.useState(false);
-		const showImage = src && !imgError;
-
-		return (
-			<div
-				ref={ref}
-				className={cn('relative inline-flex shrink-0', className)}
-				style={{ width: px, height: px, ...style }}
-				{...props}
-			>
-				{showImage ? (
-					<img
-						src={src}
-						alt={name}
-						className="h-full w-full rounded-full object-cover"
-						onError={() => setImgError(true)}
-					/>
-				) : (
-					<div
-						className="flex h-full w-full select-none items-center justify-center rounded-full border font-medium [background:var(--khal-surface-raised)] [border-color:var(--khal-border-subtle)]"
-						style={{ fontSize: fontSizeMap[size] }}
-					>
-						{getInitials(name)}
-					</div>
-				)}
-				{status && (
-					<div className="absolute -bottom-px -right-px">
-						<StatusDot color={statusColorMap[status]} size="sm" label={status} pulse={status === 'online'} />
-					</div>
-				)}
-			</div>
-		);
-	}
-);
-Avatar.displayName = 'Avatar';
-
-export type { AvatarProps };
-export { Avatar };

package/src/components/badge.tsx

@@ -1,39 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const badgeVariants = cva(
-	'inline-flex items-center rounded-full border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2',
-	{
-		variants: {
-			variant: {
-				gray: 'border-gray-alpha-400 bg-gray-100 text-gray-900',
-				blue: 'border-blue-300 bg-blue-100 text-blue-900',
-				green: 'border-green-300 bg-green-100 text-green-900',
-				amber: 'border-amber-300 bg-amber-100 text-amber-900',
-				red: 'border-red-300 bg-red-100 text-red-900',
-				purple: 'border-purple-300 bg-purple-100 text-purple-900',
-				pink: 'border-pink-300 bg-pink-100 text-pink-900',
-				teal: 'border-teal-300 bg-teal-100 text-teal-900',
-			},
-			size: {
-				sm: 'px-2 py-0 text-[11px] leading-[18px]',
-				md: 'px-2.5 py-0.5 text-[12px] leading-[18px]',
-			},
-		},
-		defaultVariants: {
-			variant: 'gray',
-			size: 'md',
-		},
-	}
-);
-
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
-	contrast?: 'low' | 'high';
-}
-
-function Badge({ className, variant, size, contrast, ...props }: BadgeProps) {
-	return <span className={cn(badgeVariants({ variant, size }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-import { Spinner } from './spinner';
-
-const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--khal-radius-button,10px)] text-copy-13 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--khal-accent-primary)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
-	{
-		variants: {
-			variant: {
-				default: 'bg-gray-1000 text-white [color:white] dark:text-black dark:[color:black] hover:bg-gray-900',
-				secondary: 'bg-background-100 text-gray-1000 border border-gray-alpha-400 hover:bg-gray-alpha-100',
-				tertiary: 'bg-transparent text-gray-1000 hover:bg-gray-alpha-200',
-				error: 'bg-red-700 text-white [color:white] hover:bg-red-600',
-				warning: 'bg-amber-700 text-white [color:white] hover:bg-amber-600',
-				ghost: 'hover:bg-gray-alpha-200 text-gray-1000',
-				link: 'text-blue-700 underline-offset-4 hover:underline',
-			},
-			size: {
-				small: 'h-8 px-3 text-copy-13',
-				medium: 'h-9 px-4 text-copy-13',
-				large: 'h-10 px-5 text-copy-14',
-				icon: 'h-9 w-9',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'medium',
-		},
-	}
-);
-
-type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-
-interface ButtonProps
-	extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'prefix'>,
-		ButtonVariantProps {
-	asChild?: boolean;
-	loading?: boolean;
-	prefix?: React.ReactNode;
-	suffix?: React.ReactNode;
-	/** HTML button type attribute (named typeName for compat with geistcn API) */
-	typeName?: 'submit' | 'button' | 'reset';
-	/** Visual type — maps to variant for compat */
-	type?: 'shadow' | 'invert' | 'unstyled';
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	(
-		{
-			className,
-			variant,
-			size,
-			asChild = false,
-			loading = false,
-			prefix,
-			suffix,
-			typeName,
-			type,
-			disabled,
-			children,
-			...props
-		},
-		ref
-	) => {
-		// Map geistcn "type" prop to variant if variant not explicitly set
-		let resolvedVariant = variant;
-		if (!resolvedVariant && type) {
-			if (type === 'invert') resolvedVariant = 'default';
-			else if (type === 'shadow') resolvedVariant = 'secondary';
-			else if (type === 'unstyled') resolvedVariant = 'ghost';
-		}
-
-		const Comp = asChild ? Slot : 'button';
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant: resolvedVariant, size, className }))}
-				ref={ref}
-				type={typeName ?? 'button'}
-				disabled={disabled || loading}
-				{...props}
-			>
-				{loading ? (
-					<Spinner size="sm" />
-				) : (
-					<>
-						{prefix && <span className="inline-flex shrink-0">{prefix}</span>}
-						{children}
-						{suffix && <span className="inline-flex shrink-0">{suffix}</span>}
-					</>
-				)}
-			</Comp>
-		);
-	}
-);
-Button.displayName = 'Button';
-
-export type { ButtonProps };
-export { Button, buttonVariants };

package/src/components/command.tsx

@@ -1,165 +0,0 @@
-'use client';
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const Command = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive
-		ref={ref}
-		className={cn('flex h-full w-full flex-col overflow-hidden rounded-xl bg-background-100 text-gray-1000', className)}
-		{...props}
-	/>
-));
-Command.displayName = CommandPrimitive.displayName;
-
-function CommandDialog({
-	children,
-	open,
-	onOpenChange,
-	...props
-}: React.ComponentProps<typeof DialogPrimitive.Root> & React.ComponentPropsWithoutRef<typeof CommandPrimitive>) {
-	return (
-		<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-			<DialogPrimitive.Portal>
-				<DialogPrimitive.Overlay
-					className="fixed inset-0 z-[9999] bg-black/40 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
-					cmdk-overlay=""
-				/>
-				<DialogPrimitive.Content
-					className="fixed left-[50%] top-[20%] z-[9999] w-full max-w-lg translate-x-[-50%] overflow-hidden rounded-xl shadow-lg"
-					style={{
-						background: 'var(--khal-menu-bg)',
-						border: '1px solid var(--khal-menu-border)',
-						boxShadow: 'var(--khal-menu-shadow)',
-						backdropFilter: 'blur(24px)',
-						WebkitBackdropFilter: 'blur(24px)',
-					}}
-					cmdk-dialog=""
-					aria-describedby={undefined}
-				>
-					<DialogPrimitive.Title className="sr-only">Command palette</DialogPrimitive.Title>
-					<Command
-						className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-700 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3"
-						{...props}
-					>
-						{children}
-					</Command>
-				</DialogPrimitive.Content>
-			</DialogPrimitive.Portal>
-		</DialogPrimitive.Root>
-	);
-}
-
-const CommandInput = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.Input>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-	<div
-		className="flex items-center px-3"
-		style={{ borderBottom: '1px solid var(--khal-border-default)' }}
-		cmdk-input-wrapper=""
-	>
-		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-		<CommandPrimitive.Input
-			ref={ref}
-			className={cn(
-				'flex h-10 w-full rounded-md bg-transparent py-3 text-copy-13 outline-none',
-				'placeholder:text-gray-700',
-				'disabled:cursor-not-allowed disabled:opacity-50',
-				className
-			)}
-			{...props}
-		/>
-	</div>
-));
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.List
-		ref={ref}
-		className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-		{...props}
-	/>
-));
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.Empty>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-	<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-copy-13 text-gray-700" {...props} />
-));
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.Group>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Group
-		ref={ref}
-		className={cn(
-			'overflow-hidden p-1 text-gray-1000',
-			'[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-label-12 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-700',
-			className
-		)}
-		{...props}
-	/>
-));
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-	<CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-gray-alpha-400', className)} {...props} />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-	React.ComponentRef<typeof CommandPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
-		prefix?: React.ReactNode;
-		callback?: () => void;
-	}
->(({ className, prefix, callback, onSelect, children, ...props }, ref) => (
-	<CommandPrimitive.Item
-		ref={ref}
-		onSelect={onSelect ?? callback}
-		className={cn(
-			'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none',
-			'data-[selected=true]:text-gray-1000',
-			'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-			className
-		)}
-		{...props}
-	>
-		{prefix && <span className="inline-flex shrink-0">{prefix}</span>}
-		{children}
-	</CommandPrimitive.Item>
-));
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-	return <span className={cn('ml-auto text-label-12 tracking-widest text-gray-700', className)} {...props} />;
-};
-
-export {
-	Command,
-	CommandDialog,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	CommandSeparator,
-	CommandShortcut,
-};

package/src/components/cost-counter.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { motion, useInView } from 'motion/react';
-import { useCallback, useRef, useState } from 'react';
-import { cn } from '../utils';
-import { NumberFlow } from './number-flow';
-
-interface CostCounterProps {
-	/** The target numeric value to animate to */
-	value: number;
-	/** Text suffix after the number (e.g. "%", "pts", "k") */
-	suffix?: string;
-	/** Text prefix before the number (e.g. "$", "+") */
-	prefix?: string;
-	/** Primary label below the number */
-	label: string;
-	/** Secondary description text */
-	description?: string;
-	/** Budget bar target percentage (0-100). Omit to hide the bar. */
-	budget?: number;
-	/** Budget bar color — defaults to accent-warm */
-	budgetColor?: string;
-	className?: string;
-}
-
-function CostCounter({ value, suffix, prefix, label, description, budget, budgetColor, className }: CostCounterProps) {
-	const [displayed, setDisplayed] = useState(0);
-	const triggered = useRef(false);
-	const barRef = useRef<HTMLDivElement>(null);
-	const barInView = useInView(barRef, { once: true, amount: 0.6 });
-
-	const handleViewport = useCallback(() => {
-		if (!triggered.current) {
-			triggered.current = true;
-			setDisplayed(value);
-		}
-	}, [value]);
-
-	return (
-		<motion.div
-			onViewportEnter={handleViewport}
-			viewport={{ once: true, amount: 0.5 }}
-			className={cn('flex flex-col gap-3', className)}
-		>
-			<div
-				className="flex items-baseline tabular-nums font-semibold tracking-tight leading-none"
-				style={{ fontFamily: 'var(--font-display, var(--font-geist-sans))' }}
-			>
-				{prefix && <span className="text-[0.7em]">{prefix}</span>}
-				<NumberFlow value={displayed} />
-				{suffix && <span className="text-[0.65em] ml-0.5 opacity-70">{suffix}</span>}
-			</div>
-
-			{budget != null && (
-				<div ref={barRef} className="w-full h-2 rounded-full overflow-hidden bg-[var(--ds-gray-alpha-200)]">
-					<motion.div
-						initial={{ width: 0 }}
-						animate={barInView ? { width: `${Math.min(budget, 100)}%` } : { width: 0 }}
-						transition={{ duration: 1, ease: [0.22, 1, 0.36, 1], delay: 0.15 }}
-						className="h-full rounded-full"
-						style={{ backgroundColor: budgetColor ?? 'var(--ds-accent-warm)' }}
-					/>
-				</div>
-			)}
-
-			<div className="flex flex-col gap-0.5">
-				<span className="text-sm font-medium leading-5">{label}</span>
-				{description && <span className="text-xs opacity-50 leading-4">{description}</span>}
-			</div>
-		</motion.div>
-	);
-}
-
-export type { CostCounterProps };
-export { CostCounter };

package/src/components/data-row.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-/**
- * DataRow — LP section-level key-value / data display component.
- *
- * Extracted from khal-landing section components:
- * - Architecture.tsx: font-mono code rules (IF/THEN/ELSE patterns)
- * - Architecture.tsx: connection rows with status dots
- * - Omnichannel-spotlight.tsx: channel count rows (font-mono tabular-nums)
- * - Omnichannel-spotlight.tsx: observability inline data
- *
- * Renders a horizontal key-value pair with monospace font and optional accent.
- */
-const dataRowVariants = cva('flex items-center gap-3 rounded-lg border border-[#FFFFFF14] font-mono', {
-	variants: {
-		variant: {
-			/** Standard data row — subtle bg */
-			default: 'bg-[#FFFFFF08] py-2.5 px-3',
-			/** Inline/compact — for observability-style data */
-			inline: 'bg-[#FFFFFF06] py-1.5 px-2.5 text-[11px]',
-			/** Nested rule row — for indented rule displays */
-			rule: 'bg-[#FFFFFF05] py-2.5 px-3',
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-	},
-});
-
-interface DataRowProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dataRowVariants> {
-	/** The label/key portion (left side) */
-	label: string;
-	/** The value portion (right side, pushed to end) */
-	value?: string;
-	/** Accent color for the value text */
-	accentColor?: string;
-	/** Show a status dot before the label */
-	statusDot?: boolean;
-	/** Custom status dot color */
-	dotColor?: string;
-	/** Optional tag/badge to show before the label (e.g. "IF", "THEN") */
-	tag?: string;
-	/** Tag color — defaults to accent */
-	tagColor?: string;
-}
-
-const DataRow = React.forwardRef<HTMLDivElement, DataRowProps>(
-	({ className, variant, label, value, accentColor, statusDot, dotColor, tag, tagColor, children, ...props }, ref) => {
-		return (
-			<div ref={ref} className={cn(dataRowVariants({ variant }), className)} {...props}>
-				{/* Status dot */}
-				{statusDot && (
-					<span className="size-[6px] shrink-0 rounded-full" style={{ backgroundColor: dotColor || '#FFFFFF40' }} />
-				)}
-
-				{/* Tag badge (IF/THEN/ELSE style) */}
-				{tag && (
-					<span
-						className="shrink-0 rounded py-0.5 px-2 text-[10px] font-bold uppercase tracking-wide leading-3.5"
-						style={{
-							color: tagColor || 'var(--color-accent, #D49355)',
-							backgroundColor: tagColor
-								? `color-mix(in srgb, ${tagColor} 10%, transparent)`
-								: 'rgba(var(--color-accent-rgb, 212,147,85), 0.1)',
-						}}
-					>
-						{tag}
-					</span>
-				)}
-
-				{/* Label */}
-				<span className="text-[12px] text-[#FFFFFFCC] leading-4 min-w-0 truncate">{label}</span>
-
-				{/* Spacer if value present */}
-				{(value || children) && <span className="grow" />}
-
-				{/* Value */}
-				{value && (
-					<span className="text-[12px] leading-4 tabular-nums shrink-0" style={{ color: accentColor || '#FFFFFF99' }}>
-						{value}
-					</span>
-				)}
-
-				{/* Custom children (for complex right-side content) */}
-				{children}
-			</div>
-		);
-	}
-);
-DataRow.displayName = 'DataRow';
-
-export type { DataRowProps };
-export { DataRow, dataRowVariants };