@khal-os/ui 1.0.0 → 1.0.2

package/src/components/note.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const noteVariants = cva('flex items-start gap-2 rounded-md border p-3 text-copy-13', {
-	variants: {
-		type: {
-			default: 'border-gray-alpha-400 bg-gray-alpha-100 text-gray-900',
-			error: 'border-red-300 bg-red-100 text-red-900',
-			warning: 'border-amber-300 bg-amber-100 text-amber-900',
-			success: 'border-green-300 bg-green-100 text-green-900',
-		},
-		size: {
-			default: 'p-3',
-			small: 'p-2 text-label-12',
-		},
-	},
-	defaultVariants: {
-		type: 'default',
-		size: 'default',
-	},
-});
-
-const iconMap = {
-	default: Info,
-	error: AlertCircle,
-	warning: AlertTriangle,
-	success: CheckCircle,
-} as const;
-
-interface NoteProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof noteVariants> {
-	type?: 'default' | 'error' | 'warning' | 'success';
-	label?: boolean | string;
-	action?: React.ReactNode;
-	disabled?: boolean;
-	fill?: boolean;
-}
-
-function Note({ className, type = 'default', size, label, action, children, ...props }: NoteProps) {
-	const Icon = iconMap[type];
-	const showLabel = label !== false;
-
-	return (
-		<div className={cn(noteVariants({ type, size }), className)} role="alert" {...props}>
-			{showLabel && <Icon className="h-4 w-4 shrink-0 mt-0.5" />}
-			<div className="flex-1 min-w-0">{children}</div>
-			{action && <div className="shrink-0">{action}</div>}
-		</div>
-	);
-}
-
-export { Note };

package/src/components/number-flow.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import NumberFlowBase from '@number-flow/react';
-import type { ComponentProps } from 'react';
-
-type NumberFlowProps = ComponentProps<typeof NumberFlowBase>;
-
-/**
- * NumberFlow — animated number transitions via @number-flow/react.
- * Thin wrapper that sets KhalOS-branded timing defaults.
- */
-function NumberFlow({ transformTiming, spinTiming, opacityTiming, ...props }: NumberFlowProps) {
-	return (
-		<NumberFlowBase
-			transformTiming={transformTiming ?? { duration: 800, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }}
-			spinTiming={spinTiming ?? { duration: 800, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }}
-			opacityTiming={opacityTiming ?? { duration: 350, easing: 'ease-out' }}
-			willChange
-			{...props}
-		/>
-	);
-}
-
-export type { NumberFlowProps };
-export { NumberFlow };

package/src/components/pill-badge.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-/**
- * PillBadge — LP section-level badge/tag component.
- *
- * Extracted from khal-landing section components:
- * - Capability tags (omnichannel-spotlight.tsx)
- * - Section label pills (fast-secure.tsx header)
- * - Compliance badges (fast-secure.tsx badge strip)
- * - Accent badges (metrics.tsx ROI calculator)
- *
- * Always uppercase with wide tracking — the LP's signature badge style.
- */
-const pillBadgeVariants = cva(
-	'inline-flex items-center gap-1.5 rounded-full font-medium uppercase leading-none whitespace-nowrap',
-	{
-		variants: {
-			variant: {
-				/** Subtle border badge — compliance tags, capability tags */
-				default: 'border border-[#FFFFFF26] bg-[#FFFFFF08] text-[#FFFFFFCC]',
-				/** Muted badge — less prominent */
-				muted: 'border border-[#FFFFFF14] bg-[#FFFFFF05] text-[#FFFFFFCC]',
-				/** Accent-filled badge — ROI labels, active state badges */
-				accent: 'text-[var(--color-accent,#D49355)] bg-[rgba(var(--color-accent-rgb,212,147,85),0.12)]',
-			},
-			size: {
-				sm: 'py-1 px-2.5 text-[10px] tracking-[0.08em]',
-				md: 'py-1.5 px-3.5 text-[11px] tracking-widest',
-				lg: 'py-2 px-4 text-[11px] tracking-widest',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'md',
-		},
-	}
-);
-
-interface PillBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillBadgeVariants> {
-	/** Show a small dot indicator before the text */
-	dot?: boolean;
-	/** Custom dot color (defaults to current text color at 40% opacity) */
-	dotColor?: string;
-}
-
-const PillBadge = React.forwardRef<HTMLSpanElement, PillBadgeProps>(
-	({ className, variant, size, dot, dotColor, children, ...props }, ref) => {
-		return (
-			<span ref={ref} className={cn(pillBadgeVariants({ variant, size }), className)} {...props}>
-				{dot && (
-					<span className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: dotColor || '#FFFFFF40' }} />
-				)}
-				{children}
-			</span>
-		);
-	}
-);
-PillBadge.displayName = 'PillBadge';
-
-export type { PillBadgeProps };
-export { PillBadge, pillBadgeVariants };

package/src/components/progress-bar.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const progressBarVariants = cva(
-	'relative w-full overflow-hidden rounded-full [background:var(--khal-border-default)]',
-	{
-		variants: {
-			size: {
-				sm: 'h-1.5',
-				md: 'h-2.5',
-			},
-		},
-		defaultVariants: {
-			size: 'md',
-		},
-	}
-);
-
-interface ProgressBarProps
-	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
-		VariantProps<typeof progressBarVariants> {
-	value: number;
-	max?: number;
-	color?: string;
-	showLabel?: boolean;
-}
-
-function ProgressBar({
-	value,
-	max = 100,
-	color = 'var(--khal-stage-build)',
-	size,
-	showLabel = false,
-	className,
-	...props
-}: ProgressBarProps) {
-	const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-
-	return (
-		<div className={cn('flex items-center gap-2', className)} {...props}>
-			<div
-				role="progressbar"
-				aria-valuenow={value}
-				aria-valuemin={0}
-				aria-valuemax={max}
-				className={progressBarVariants({ size })}
-			>
-				<div
-					className="h-full rounded-full"
-					style={{
-						width: `${percentage}%`,
-						background: `linear-gradient(90deg, color-mix(in srgb, ${color} 85%, black), ${color})`,
-						transition: 'width var(--khal-duration-normal) var(--khal-ease-spring)',
-					}}
-				/>
-			</div>
-			{showLabel && (
-				<span className="shrink-0 text-xs tabular-nums opacity-60">
-					{value}/{max}
-				</span>
-			)}
-		</div>
-	);
-}
-
-export type { ProgressBarProps };
-export { ProgressBar, progressBarVariants };

package/src/components/section-card.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
-
-/**
- * SectionCard — LP section-level card component.
- *
- * Extracted from khal-landing section components (architecture.tsx, fast-secure.tsx).
- * Two variants matching the LP's two card styles:
- * - `default`: full-border card (architecture section outer cards)
- * - `inset`: top-left border card (architecture mockup panels)
- */
-const sectionCardVariants = cva('relative flex flex-col overflow-hidden', {
-	variants: {
-		variant: {
-			default: 'rounded-2xl border border-[#FFFFFF1A] bg-[#FFFFFF0A]',
-			inset: 'rounded-tl-xl border-t border-l border-[#FFFFFF26] bg-[#111111]',
-			solid: 'rounded-2xl border border-[#FFFFFF1A] bg-[#0D0D0D]',
-		},
-		padding: {
-			none: '',
-			sm: 'p-4',
-			md: 'p-5 sm:p-6',
-			lg: 'p-5 sm:p-6 md:p-8',
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		padding: 'md',
-	},
-});
-
-interface SectionCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sectionCardVariants> {
-	/** Optional gradient overlay color (hex). Renders a subtle top-down gradient. */
-	glow?: string;
-}
-
-const SectionCard = React.forwardRef<HTMLDivElement, SectionCardProps>(
-	({ className, variant, padding, glow, children, ...props }, ref) => {
-		return (
-			<div ref={ref} className={cn(sectionCardVariants({ variant, padding }), className)} {...props}>
-				{glow && (
-					<div
-						className="pointer-events-none absolute inset-0 z-0"
-						style={{
-							background: `linear-gradient(180deg, ${glow}22 0%, transparent 60%)`,
-						}}
-					/>
-				)}
-				<div className="relative z-10 flex flex-col h-full">{children}</div>
-			</div>
-		);
-	}
-);
-SectionCard.displayName = 'SectionCard';
-
-/**
- * SectionCardHeader — optional header row with bottom border separator.
- * Matches the LP mockup panel headers: `py-3 px-4 border-b border-[#FFFFFF1A]`.
- */
-function SectionCardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-	return (
-		<div
-			className={cn('flex items-center justify-between py-3 px-4 border-b border-[#FFFFFF1A]', className)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
-}
-SectionCardHeader.displayName = 'SectionCardHeader';
-
-export type { SectionCardProps };
-export { SectionCard, SectionCardHeader, sectionCardVariants };

package/src/components/separator.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-import { cn } from '../utils';
-
-const Separator = React.forwardRef<
-	React.ComponentRef<typeof SeparatorPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-	<SeparatorPrimitive.Root
-		ref={ref}
-		decorative={decorative}
-		orientation={orientation}
-		className={cn(
-			'shrink-0 bg-gray-alpha-400',
-			orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-			className
-		)}
-		{...props}
-	/>
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

package/src/components/spinner.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '../utils';
-
-const sizeMap = {
-	sm: 16,
-	md: 20,
-	lg: 24,
-} as const;
-
-interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-	size?: keyof typeof sizeMap;
-}
-
-function Spinner({ size = 'md', className, ...props }: SpinnerProps) {
-	const px = sizeMap[size];
-	return (
-		<div
-			role="status"
-			aria-label="Loading"
-			className={cn('inline-flex items-center justify-center', className)}
-			{...props}
-		>
-			<svg width={px} height={px} viewBox="0 0 20 20" fill="none" className="animate-spin">
-				<circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.25" />
-				<circle
-					cx="10"
-					cy="10"
-					r="8"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeDasharray="50.26"
-					strokeDashoffset="37.7"
-				/>
-			</svg>
-		</div>
-	);
-}
-
-export { Spinner };

package/src/components/status-dot.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '../utils';
-
-const sizeMap = { sm: 8, md: 10, lg: 12 } as const;
-
-/** All recognized status states */
-type StatusState = 'live' | 'online' | 'active' | 'working' | 'idle' | 'away' | 'queued' | 'error';
-
-const stateConfig: Record<StatusState, { color: string; label: string; pulse: boolean }> = {
-	live: { color: '#22c55e', label: 'Live', pulse: true },
-	online: { color: '#22c55e', label: 'Online', pulse: false },
-	active: { color: '#22c55e', label: 'Active', pulse: true },
-	working: { color: '#f59e0b', label: 'Working', pulse: true },
-	idle: { color: '#64748b', label: 'Idle', pulse: false },
-	away: { color: '#64748b', label: 'Away', pulse: false },
-	queued: { color: '#f59e0b', label: 'Queued', pulse: false },
-	error: { color: '#ef4444', label: 'Error', pulse: true },
-};
-
-interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
-	/** Typed state — determines color, pulse, and label automatically */
-	state?: StatusState;
-	/** Manual color override (legacy support) */
-	color?: string;
-	/** Manual pulse override */
-	pulse?: boolean;
-	size?: keyof typeof sizeMap;
-	/** Manual label override */
-	label?: string;
-	/** Show text label next to dot */
-	showLabel?: boolean;
-}
-
-function StatusDot({
-	state,
-	color: colorProp,
-	pulse: pulseProp,
-	size = 'md',
-	label: labelProp,
-	showLabel = false,
-	className,
-	style,
-	...props
-}: StatusDotProps) {
-	const config = state ? stateConfig[state] : null;
-	const color = colorProp ?? config?.color ?? '#64748b';
-	const pulse = pulseProp ?? config?.pulse ?? false;
-	const label = labelProp ?? config?.label;
-	const px = sizeMap[size];
-
-	return (
-		<span
-			role="status"
-			aria-label={label}
-			className={cn('relative inline-flex shrink-0 items-center gap-1.5', className)}
-			style={style}
-			{...props}
-		>
-			<span className="relative inline-flex shrink-0" style={{ width: px, height: px }}>
-				{pulse && (
-					<span
-						className="absolute -inset-0.5 rounded-full"
-						style={{
-							backgroundColor: color,
-							opacity: 0.35,
-							animation: 'khal-pulse 2s ease-in-out infinite',
-						}}
-					/>
-				)}
-				<span
-					className="absolute inset-0 rounded-full"
-					style={{
-						backgroundColor: color,
-						boxShadow: pulse ? `0 0 ${px}px ${color}80` : undefined,
-					}}
-				/>
-			</span>
-			{showLabel && label && (
-				<span className="text-[11px] leading-none" style={{ color }}>
-					{label}
-				</span>
-			)}
-		</span>
-	);
-}
-
-export type { StatusDotProps, StatusState };
-export { StatusDot, stateConfig };

package/src/components/switch.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import * as React from 'react';
-import { cn } from '../utils';
-
-interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'onChange'> {
-	onChange?: (checked: boolean) => void;
-}
-
-const Toggle = React.forwardRef<React.ComponentRef<typeof SwitchPrimitive.Root>, ToggleProps>(
-	({ className, onChange, onCheckedChange, ...props }, ref) => (
-		<SwitchPrimitive.Root
-			className={cn(
-				'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
-				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2 focus-visible:ring-offset-background-100',
-				'disabled:cursor-not-allowed disabled:opacity-50',
-				'data-[state=checked]:bg-gray-1000 data-[state=unchecked]:bg-gray-alpha-400',
-				className
-			)}
-			onCheckedChange={onCheckedChange ?? onChange}
-			{...props}
-			ref={ref}
-		>
-			<SwitchPrimitive.Thumb
-				className={cn(
-					'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform',
-					'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-				)}
-			/>
-		</SwitchPrimitive.Root>
-	)
-);
-Toggle.displayName = 'Toggle';
-
-export { Toggle };

package/src/components/theme-provider.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { useEffect } from 'react';
-import { useThemeStore } from '../stores/theme-store';
-
-function ReduceMotionSync() {
-	const reduceMotion = useThemeStore((s) => s.reduceMotion);
-
-	useEffect(() => {
-		document.documentElement.setAttribute('data-reduce-motion', String(reduceMotion));
-	}, [reduceMotion]);
-
-	return null;
-}
-
-function GlassSync() {
-	const glassEnabled = useThemeStore((s) => s.glassEnabled);
-
-	useEffect(() => {
-		const el = document.documentElement;
-		if (glassEnabled) {
-			el.setAttribute('data-glass', '');
-			el.style.setProperty('--khal-glass-enabled', '1');
-		} else {
-			el.removeAttribute('data-glass');
-			el.style.setProperty('--khal-glass-enabled', '0');
-		}
-	}, [glassEnabled]);
-
-	return null;
-}
-
-function GpuTerminalsSync() {
-	const gpuTerminals = useThemeStore((s) => s.gpuTerminals);
-
-	useEffect(() => {
-		// Sync to the localStorage key the terminal reads on mount
-		if (gpuTerminals) {
-			localStorage.setItem('khal-gpu-terminals', 'true');
-		} else {
-			localStorage.removeItem('khal-gpu-terminals');
-		}
-	}, [gpuTerminals]);
-
-	return null;
-}
-
-export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
-	return (
-		<NextThemesProvider {...props}>
-			<ReduceMotionSync />
-			<GlassSync />
-			<GpuTerminalsSync />
-			{children}
-		</NextThemesProvider>
-	);
-}

package/src/components/theme-switcher.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-import { cn } from '../utils';
-
-const themes = [
-	{ value: 'system', label: 'System', icon: Monitor },
-	{ value: 'light', label: 'Light', icon: Sun },
-	{ value: 'dark', label: 'Dark', icon: Moon },
-] as const;
-
-interface ThemeSwitcherProps {
-	small?: boolean;
-	className?: string;
-	onThemeSwitch?: (theme: string) => void;
-	disabled?: boolean;
-}
-
-function ThemeSwitcher({ small, className, onThemeSwitch, disabled }: ThemeSwitcherProps) {
-	const { theme, setTheme } = useTheme();
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => setMounted(true), []);
-
-	// Avoid hydration mismatch: useTheme() returns different values on server vs client
-	const resolvedTheme = mounted ? theme : undefined;
-
-	return (
-		<fieldset
-			className={cn('inline-flex items-center gap-1 rounded-lg bg-gray-alpha-100 p-1', className)}
-			disabled={disabled}
-		>
-			{themes.map(({ value, label, icon: Icon }) => (
-				<button
-					key={value}
-					type="button"
-					role="radio"
-					aria-checked={resolvedTheme === value}
-					onClick={() => {
-						setTheme(value);
-						onThemeSwitch?.(value);
-					}}
-					className={cn(
-						'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-label-12 transition-colors cursor-pointer',
-						resolvedTheme === value
-							? 'bg-background-100 text-gray-1000 shadow-sm'
-							: 'text-gray-700 hover:text-gray-1000'
-					)}
-				>
-					<Icon className={small ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
-					{!small && label}
-				</button>
-			))}
-		</fieldset>
-	);
-}
-
-export { ThemeSwitcher };

package/src/components/ticker-bar.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { cn } from '../utils';
-
-interface TickerBarProps {
-	/** Items to scroll — rendered twice for seamless looping */
-	children: ReactNode;
-	/** Animation duration in seconds (default 30) */
-	duration?: number;
-	/** Pause on hover */
-	pauseOnHover?: boolean;
-	className?: string;
-}
-
-function TickerBar({ children, duration = 30, pauseOnHover = true, className }: TickerBarProps) {
-	return (
-		<div
-			className={cn('relative w-full overflow-hidden', className)}
-			style={{
-				maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
-				WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
-			}}
-		>
-			<div
-				className={cn('flex w-max', pauseOnHover && 'hover:[animation-play-state:paused]')}
-				style={{
-					animation: `khal-ticker ${duration}s linear infinite`,
-				}}
-			>
-				<div className="flex shrink-0 items-center">{children}</div>
-				<div className="flex shrink-0 items-center" aria-hidden>
-					{children}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export type { TickerBarProps };
-export { TickerBar };