khal-os 1.260324.2

package/src/components/ui/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 '@/lib/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,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandSeparator,
+	CommandShortcut,
+};

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { cn } from '@/lib/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,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};

package/src/components/ui/input.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/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/ui/note.tsx

@@ -0,0 +1,55 @@
+'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 '@/lib/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/ui/separator.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+import { cn } from '@/lib/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/ui/spinner.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/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/ui/switch.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cn } from '@/lib/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/ui/theme-provider.tsx

@@ -0,0 +1,24 @@
+'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;
+}
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+	return (
+		<NextThemesProvider {...props}>
+			<ReduceMotionSync />
+			{children}
+		</NextThemesProvider>
+	);
+}

package/src/components/ui/theme-switcher.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { cn } from '@/lib/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();
+
+	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={theme === 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',
+						theme === 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 };