@khal-os/ui 1.0.0

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@khal-os/ui",
+	"version": "1.0.0",
+	"private": false,
+	"scripts": {
+		"build": "echo 'build placeholder'",
+		"typecheck": "tsc --noEmit",
+		"lint": "biome check ."
+	},
+	"main": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts",
+		"./server": "./src/server.ts",
+		"./tokens.css": "./tokens.css"
+	},
+	"peerDependencies": {
+		"react": ">=19",
+		"next-themes": ">=0.4",
+		"zustand": ">=4"
+	},
+	"dependencies": {
+		"@number-flow/react": "^0.6.0",
+		"@paper-design/shaders-react": "^0.0.72",
+		"@radix-ui/react-context-menu": "^2.2.16",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-separator": "^1.1.8",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tooltip": "^1.2.8",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"lucide-react": "^0.563.0",
+		"motion": "^12.38.0",
+		"tailwind-merge": "^3.4.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/components/ContextMenu.tsx

@@ -0,0 +1,130 @@
+'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

@@ -0,0 +1,71 @@
+'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

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

@@ -0,0 +1,102 @@
+'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

@@ -0,0 +1,165 @@
+'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

@@ -0,0 +1,75 @@
+'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 };