@torch-ui/solid 0.1.3

package/src/components/forms/Select.tsx

@@ -0,0 +1,268 @@
+import { createSignal, createUniqueId, splitProps, Show, type JSX } from 'solid-js'
+import { Check, ChevronDown } from 'lucide-solid'
+import { Select as KobalteSelect } from '@kobalte/core/select'
+import { cn } from '../../utilities/classNames'
+import { type ComponentSize, inputSizeConfig } from '../../utilities/componentSize'
+
+export interface SelectOption {
+	value: string
+	label: string
+	/** Optional icon shown before the label. */
+	icon?: JSX.Element
+	/** Optional hex or CSS color for a status dot (e.g. #22c55e). When set, a small colored dot is shown before the label; useful for status/state fields. */
+	color?: string | null
+}
+
+function statusColorStyle(color: string | null | undefined): string | undefined {
+	if (color == null || color === '') return undefined
+	const t = color.trim()
+	if (t.startsWith('#') || t.startsWith('rgb') || /^[a-z]+$/i.test(t)) return t
+	return undefined
+}
+
+function StatusDot(props: { color?: string | null }) {
+	const style = () => {
+		const c = statusColorStyle(props.color)
+		return c ? { 'background-color': c } : undefined
+	}
+	return (
+		<span
+			class="size-2.5 shrink-0 rounded-full border border-ink-200/80/80"
+			classList={{ 'bg-ink-400': !statusColorStyle(props.color) }}
+			style={style()}
+			aria-hidden
+		/>
+	)
+}
+
+export interface SelectProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children'> {
+	label?: string
+	error?: string
+	helperText?: string
+	/** When true, never render label row or error/helper text (control only). */
+	bare?: boolean
+	required?: boolean
+	/** When true, show "optional" on the label row when not required. Default false. */
+	optional?: boolean
+	options: SelectOption[]
+	placeholder?: string
+	value?: string
+	onValueChange?: (value: string) => void
+	onErrorClear?: () => void
+	disabled?: boolean
+	/** Applied to the root wrapper (label + control + helper/error). Use for layout (e.g. max-w-sm). */
+	class?: string
+	/** Applied to the trigger element for height/sizing (e.g. min-h-[50px] h-[50px]). */
+	triggerClass?: string
+	/** Input size. Controls height, text size, and padding. Default: md (36px). */
+	size?: ComponentSize
+	/** When true, show a search input in the dropdown to filter options by label. Default false. */
+	searchable?: boolean
+	/** Ref forwarded to the root wrapper div. */
+	ref?: (el: HTMLDivElement) => void
+	/** Id for the root wrapper (e.g. for aria-labelledby / label for). */
+	id?: string
+}
+
+export const Select = (props: SelectProps) => {
+	const [local, others] = splitProps(props, [
+		'label',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'options',
+		'placeholder',
+		'value',
+		'onValueChange',
+		'onErrorClear',
+		'disabled',
+		'class',
+		'triggerClass',
+		'size',
+		'searchable',
+		'ref',
+		'id',
+	])
+	const [searchQuery, setSearchQuery] = createSignal('')
+	const sc = () => inputSizeConfig[local.size ?? 'md']
+
+	const hasError = () => !!local.error
+	const uid = createUniqueId()
+	const helperId = () => (!local.bare && local.helperText ? `select-${uid}-help` : undefined)
+	const errorId = () => (!local.bare && local.error ? `select-${uid}-error` : undefined)
+	const describedBy = () => [helperId(), errorId()].filter(Boolean).join(' ') || undefined
+	const selectedOption = () =>
+		local.value != null && local.value !== ''
+			? local.options.find((opt) => opt.value === local.value)
+			: undefined
+
+	const filteredOptions = (): SelectOption[] => {
+		if (!local.searchable) return local.options
+		const q = searchQuery().trim().toLowerCase()
+		if (!q) return local.options
+		const selected = selectedOption()
+		const filtered = local.options.filter((o) => o.label.toLowerCase().includes(q))
+		if (selected && !filtered.some((o) => o.value === selected.value))
+			return [selected, ...filtered]
+		return filtered
+	}
+
+	const handleChange = (option: SelectOption | null) => {
+		if (local.error && local.onErrorClear) {
+			local.onErrorClear()
+		}
+		local.onValueChange?.(option ? option.value : '')
+	}
+
+	let searchInputRef: HTMLInputElement | undefined
+	const handleOpenChange = (open: boolean) => {
+		if (!open) setSearchQuery('')
+		else if (local.searchable) {
+			requestAnimationFrame(() => searchInputRef?.focus())
+		}
+	}
+
+	return (
+		<div ref={local.ref} id={local.id} class={cn('w-full', local.class)} {...others}>
+			<KobalteSelect<SelectOption>
+				value={selectedOption() ?? undefined}
+				onChange={handleChange}
+				options={filteredOptions()}
+				onOpenChange={handleOpenChange}
+				optionValue="value"
+				optionTextValue="label"
+				placeholder={local.placeholder || 'Select an option'}
+				disabled={local.disabled}
+				validationState={hasError() ? 'invalid' : undefined}
+				closeOnSelection={true}
+				itemComponent={(itemProps) => (
+					<KobalteSelect.Item
+						item={itemProps.item}
+						class="relative flex items-center justify-between px-4 py-2.5 text-sm cursor-pointer outline-none text-ink-900 data-[highlighted]:bg-primary-50 data-[highlighted]:text-primary-900 dark:data-[highlighted]:bg-primary-500/20 dark:data-[highlighted]:text-primary-200 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+					>
+						<KobalteSelect.ItemLabel class="flex-1">
+							<span class="flex min-w-0 items-center gap-2">
+								<Show when={statusColorStyle(itemProps.item.rawValue.color)}>
+									<StatusDot color={itemProps.item.rawValue.color} />
+								</Show>
+								<Show when={itemProps.item.rawValue.icon}>
+									<span class="flex-shrink-0 text-ink-500">{itemProps.item.rawValue.icon}</span>
+								</Show>
+								<span class="min-w-0 truncate">{itemProps.item.rawValue.label}</span>
+							</span>
+						</KobalteSelect.ItemLabel>
+						<KobalteSelect.ItemIndicator class="inline-flex items-center">
+							<Check class="w-4 h-4 text-primary-500" />
+						</KobalteSelect.ItemIndicator>
+					</KobalteSelect.Item>
+				)}
+			>
+				<Show when={!local.bare && local.label}>
+					<div class="flex items-center justify-between mb-2">
+						<KobalteSelect.Label class="block text-md font-medium text-ink-700">
+							{local.label}
+							<Show when={local.required}>
+								<span class="ml-0.5 text-danger-500 dark:text-danger-400" aria-hidden="true">*</span>
+							</Show>
+						</KobalteSelect.Label>
+						<Show when={local.label && !local.required && local.optional}>
+							<span class="text-xs text-ink-500">optional</span>
+						</Show>
+					</div>
+				</Show>
+
+				<div
+					class={cn(
+						'w-full flex flex-col min-h-0 rounded-lg border transition-all overflow-hidden',
+						sc().h,
+						hasError()
+							? 'border-danger-500 focus-within:ring-2 focus-within:ring-danger-500 focus-within:border-transparent'
+							: 'border-ink-300 focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-transparent',
+						'bg-surface-raised'
+					)}
+				>
+					<KobalteSelect.Trigger
+						aria-invalid={hasError() ? 'true' : undefined}
+						aria-describedby={describedBy()}
+						aria-errormessage={hasError() ? errorId() : undefined}
+						class={cn(
+							'w-full h-full min-h-0 min-w-0 flex items-center gap-1 rounded-lg transition-all outline-none bg-transparent text-ink-900 text-left border-0 focus:ring-0',
+							sc().py, sc().text, sc().pl, sc().pr,
+							hasError()
+								? 'focus:border-transparent'
+								: '',
+							'disabled:bg-surface-base disabled:text-ink-500 dark:disabled:text-ink-500 disabled:cursor-not-allowed',
+							'data-[placeholder-shown]:text-ink-400 dark:data-[placeholder-shown]:text-ink-500',
+							local.triggerClass
+						)}
+					>
+						<KobalteSelect.Value<SelectOption> class="min-w-0 flex-1 truncate text-left basis-0">
+							{(state) => {
+								const opt = state.selectedOption()
+								if (!opt) return <span class="truncate">{local.placeholder || 'Select an option'}</span>
+								return (
+									<span class="min-w-0 flex-1 truncate text-left flex items-center gap-2">
+										<Show when={statusColorStyle(opt.color)}>
+											<StatusDot color={opt.color} />
+										</Show>
+										<Show when={opt.icon}>
+											<span class="shrink-0 text-ink-500">{opt.icon}</span>
+										</Show>
+										<span class="min-w-0 truncate">{opt.label}</span>
+									</span>
+								)
+							}}
+						</KobalteSelect.Value>
+						<KobalteSelect.Icon class="inline-flex shrink-0 w-4 items-center justify-center text-ink-400">
+							<ChevronDown class="h-3.5 w-3.5" aria-hidden="true" />
+						</KobalteSelect.Icon>
+					</KobalteSelect.Trigger>
+				</div>
+
+				<Show when={!local.bare && !hasError() && local.helperText}>
+					<KobalteSelect.Description id={helperId()} class="mt-2 text-sm text-ink-500">
+						{local.helperText}
+					</KobalteSelect.Description>
+				</Show>
+
+				<Show when={!local.bare && hasError()}>
+					<KobalteSelect.ErrorMessage id={errorId()} class="mt-2 text-sm text-danger-600">
+						{local.error}
+					</KobalteSelect.ErrorMessage>
+				</Show>
+
+				<KobalteSelect.Portal>
+					<KobalteSelect.Content
+						class={cn(
+							'bg-surface-raised rounded-lg border border-surface-border shadow-lg mt-2 z-[100] flex flex-col max-h-60',
+							local.searchable ? 'py-0 overflow-hidden' : 'py-1 overflow-auto',
+						)}
+					>
+						<Show when={local.searchable}>
+							<div
+								class="shrink-0 border-b border-surface-border p-2"
+								onKeyDown={(e) => e.stopPropagation()}
+								onPointerDown={(e) => e.stopPropagation()}
+								onMouseDown={(e) => e.stopPropagation()}
+							>
+								<input
+									ref={(el) => (searchInputRef = el)}
+									type="text"
+									value={searchQuery()}
+									onInput={(e) => setSearchQuery(e.currentTarget.value)}
+									placeholder="Search..."
+									class="h-9 w-full rounded-md border border-surface-border bg-surface-raised px-3 py-1.5 text-sm text-ink-900 placeholder:text-ink-400 dark:placeholder:text-ink-500 outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+								/>
+							</div>
+						</Show>
+						<div class={cn('outline-none min-h-0', local.searchable && 'flex-1 overflow-auto py-1')}>
+							<KobalteSelect.Listbox class="outline-none" />
+						</div>
+					</KobalteSelect.Content>
+				</KobalteSelect.Portal>
+			</KobalteSelect>
+		</div>
+	)
+}

package/src/components/forms/Slider.tsx

@@ -0,0 +1,260 @@
+import type { JSX } from 'solid-js'
+import { splitProps, Show, For } from 'solid-js'
+import { Slider as KobalteSlider } from '@kobalte/core/slider'
+import { cn } from '../../utilities/classNames'
+
+export interface SliderProps {
+	/** Label for the slider. */
+	label?: string
+	/** Optional description. */
+	description?: string
+	/** Error message and invalid styling. */
+	error?: string
+	/** Controlled value(s). Single thumb: [number], range: [min, max]. */
+	value?: number[]
+	/** Default value(s) when uncontrolled. */
+	defaultValue?: number[]
+	/** Called when value changes. */
+	onChange?: (value: number[]) => void
+	/** Called when user finishes dragging. */
+	onChangeEnd?: (value: number[]) => void
+	/** Minimum value. Default 0. */
+	minValue?: number
+	/** Maximum value. Default 100. */
+	maxValue?: number
+	/** Step. Default 1. */
+	step?: number
+	/** Minimum steps between thumbs (for range). */
+	minStepsBetweenThumbs?: number
+	/** Custom accessible value label. */
+	getValueLabel?: (params: { values: number[] }) => string
+	/** Orientation. */
+	orientation?: 'horizontal' | 'vertical'
+	/** Content before the track (e.g. icon or min label). */
+	startContent?: JSX.Element
+	/** Content after the track (e.g. icon or max label). */
+	endContent?: JSX.Element
+	/** Track thickness (height for horizontal, width for vertical). Default sm. Length is controlled by container. */
+	size?: 'sm' | 'md' | 'lg'
+	/** Track and thumb color. Default primary (theme). */
+	color?: 'primary' | 'indigo' | 'rose'
+	/** Optional marks (e.g. [0, 25, 50, 75, 100]) shown below the track, aligned with step positions. */
+	marks?: number[]
+	/** Disabled. */
+	disabled?: boolean
+	/** Name for form submission. */
+	name?: string
+	/** Root class. */
+	class?: string
+}
+
+export function Slider(props: SliderProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'description',
+		'error',
+		'value',
+		'defaultValue',
+		'onChange',
+		'onChangeEnd',
+		'minValue',
+		'maxValue',
+		'step',
+		'minStepsBetweenThumbs',
+		'getValueLabel',
+		'orientation',
+		'startContent',
+		'endContent',
+		'size',
+		'color',
+		'marks',
+		'disabled',
+		'name',
+		'class',
+	])
+	const hasError = () => !!local.error
+	const thumbCount = () => {
+		const v = local.value ?? local.defaultValue ?? [50]
+		return Math.max(1, Math.min(v.length, 2))
+	}
+
+	const orientation = () => local.orientation ?? 'horizontal'
+	const isHorizontal = () => orientation() === 'horizontal'
+	const size = () => local.size ?? 'sm'
+
+	const trackSizeClass = () =>
+		isHorizontal()
+			? size() === 'sm'
+				? 'h-2'
+				: size() === 'lg'
+					? 'h-4'
+					: 'h-3'
+			: size() === 'sm'
+				? 'w-2'
+				: size() === 'lg'
+					? 'w-4'
+					: 'w-3'
+	const thumbSizeClass = () =>
+		size() === 'sm' ? 'h-4 w-4' : size() === 'lg' ? 'h-6 w-6' : 'h-5 w-5'
+
+	const color = () => local.color ?? 'primary'
+	const trackBgClass = () =>
+		color() === 'indigo'
+			? 'bg-indigo-300/80 dark:bg-indigo-500/40'
+			: color() === 'rose'
+				? 'bg-rose-300/80 dark:bg-rose-500/40'
+				: 'bg-primary-300/80 dark:bg-primary-500/40'
+	const fillThumbClass = () =>
+		color() === 'indigo'
+			? 'bg-indigo-500 dark:bg-indigo-400'
+			: color() === 'rose'
+				? 'bg-rose-500 dark:bg-rose-400'
+				: 'bg-primary-500 dark:bg-primary-400'
+	const focusRingClass = () =>
+		color() === 'indigo'
+			? 'focus-visible:ring-indigo-400 dark:focus-visible:ring-indigo-300'
+			: color() === 'rose'
+				? 'focus-visible:ring-rose-400 dark:focus-visible:ring-rose-300'
+				: 'focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300'
+
+	const thumbCenterStyle = (): Record<string, string> =>
+		isHorizontal()
+			? { top: '50%', transform: 'translate(-50%, -50%)' }
+			: { left: '50%', transform: 'translate(-50%, -50%)' }
+
+	return (
+		<KobalteSlider
+			value={local.value}
+			defaultValue={local.defaultValue ?? [50]}
+			onChange={local.onChange}
+			onChangeEnd={local.onChangeEnd}
+			minValue={local.minValue ?? 0}
+			maxValue={local.maxValue ?? 100}
+			step={local.step ?? 1}
+			minStepsBetweenThumbs={local.minStepsBetweenThumbs}
+			getValueLabel={local.getValueLabel}
+			orientation={orientation()}
+			disabled={local.disabled}
+			name={local.name}
+			validationState={hasError() ? 'invalid' : undefined}
+			class={cn(
+				'group/slider flex flex-col gap-1.5',
+				isHorizontal() ? 'w-full' : 'h-full w-fit min-h-0 flex-col items-center',
+				local.disabled && 'is-disabled',
+				local.class
+			)}
+		>
+			<Show when={local.label && isHorizontal()}>
+				<div class="flex items-center justify-between gap-2 min-w-0">
+					<KobalteSlider.Label
+						class={cn(
+							'text-sm font-medium text-ink-700 shrink-0',
+							hasError() && 'text-danger-600 dark:text-danger-400'
+						)}
+					>
+						{local.label}
+					</KobalteSlider.Label>
+					<KobalteSlider.ValueLabel class="text-sm text-ink-500 shrink-0 min-w-[2.5rem] text-right tabular-nums" />
+				</div>
+			</Show>
+			<Show when={local.label && !isHorizontal()}>
+				<KobalteSlider.Label
+					class={cn(
+						'text-sm font-medium text-ink-700',
+						hasError() && 'text-danger-600 dark:text-danger-400'
+					)}
+				>
+					{local.label}
+				</KobalteSlider.Label>
+			</Show>
+			<div
+				class={cn(
+					'flex min-w-0',
+					isHorizontal() ? 'w-full flex-row items-center gap-2' : 'h-full min-h-0 w-fit flex-col items-center gap-2'
+				)}
+			>
+				<Show when={local.startContent}>
+					<div class="shrink-0 text-ink-500 [&>svg]:h-4 [&>svg]:w-4">
+						{local.startContent}
+					</div>
+				</Show>
+				<div class={cn('flex min-w-0 flex-col gap-1', isHorizontal() ? 'flex-1' : 'min-h-0 flex-1')}>
+					<KobalteSlider.Track
+						class={cn(
+							'relative shrink-0 overflow-visible rounded-full transition-colors',
+							trackBgClass(),
+							'group-[.is-disabled]/slider:bg-ink-100 dark:group-[.is-disabled]/slider:bg-ink-800',
+							trackSizeClass(),
+							isHorizontal() ? 'w-full min-w-0' : 'h-full min-h-0'
+						)}
+					>
+						<KobalteSlider.Fill
+							class={cn(
+								'absolute rounded-full transition-colors',
+								isHorizontal() ? 'inset-y-0 left-0' : 'inset-x-0',
+								fillThumbClass(),
+								'group-[.is-disabled]/slider:bg-ink-300 dark:group-[.is-disabled]/slider:bg-ink-600'
+							)}
+						/>
+						<For each={Array.from({ length: thumbCount() })}>
+							{() => (
+								<KobalteSlider.Thumb
+									style={thumbCenterStyle()}
+									class={cn(
+										'relative z-10 block rounded-full border-0 outline-none transition cursor-pointer touch-none',
+										thumbSizeClass(),
+										fillThumbClass(),
+										'shadow-[0_1px_3px_rgba(0,0,0,0.12)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.4)]',
+										'ring-0 hover:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-ink-900',
+										focusRingClass(),
+										'group-[.is-disabled]/slider:bg-ink-300 dark:group-[.is-disabled]/slider:bg-ink-600 group-[.is-disabled]/slider:cursor-not-allowed group-[.is-disabled]/slider:shadow-none'
+									)}
+								>
+									<KobalteSlider.Input />
+								</KobalteSlider.Thumb>
+							)}
+						</For>
+					</KobalteSlider.Track>
+					<Show when={local.marks && local.marks.length > 0 && isHorizontal()}>
+						<div class="relative min-h-[1.25rem] w-full min-w-0 pt-0.5 text-xs text-ink-500">
+							<For each={local.marks!}>
+								{(m) => {
+									const min = local.minValue ?? 0
+									const max = local.maxValue ?? 100
+									const range = max - min
+									const pct = range === 0 ? 0 : ((m - min) / range) * 100
+									return (
+										<span
+											class="absolute -translate-x-1/2"
+											style={{ left: `${pct}%` }}
+										>
+											{m}
+										</span>
+									)
+								}}
+							</For>
+						</div>
+					</Show>
+				</div>
+				<Show when={local.endContent}>
+					<div class="shrink-0 text-ink-500 [&>svg]:h-4 [&>svg]:w-4">
+						{local.endContent}
+					</div>
+				</Show>
+			</div>
+			<Show when={local.label && !isHorizontal()}>
+				<KobalteSlider.ValueLabel class="text-sm text-ink-500 text-center tabular-nums" />
+			</Show>
+			<Show when={local.description}>
+				<KobalteSlider.Description class="mt-1 text-xs text-ink-500">
+					{local.description}
+				</KobalteSlider.Description>
+			</Show>
+			<Show when={local.error}>
+				<KobalteSlider.ErrorMessage class="mt-1 text-xs text-danger-600 dark:text-danger-400">
+					{local.error}
+				</KobalteSlider.ErrorMessage>
+			</Show>
+		</KobalteSlider>
+	)
+}

package/src/components/forms/Switch.tsx

@@ -0,0 +1,135 @@
+import type { JSX } from 'solid-js'
+import { splitProps, Show } from 'solid-js'
+import { Switch as KobalteSwitch } from '@kobalte/core/switch'
+import { cn } from '../../utilities/classNames'
+
+export interface SwitchProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+	/** Label text. */
+	label?: string
+	/** Optional description below the label. */
+	description?: string
+	/** Error message and invalid styling. */
+	error?: string
+	/** When true, show required indicator on label. */
+	required?: boolean
+	/** Controlled checked state. */
+	checked?: boolean
+	/** Default checked (uncontrolled). */
+	defaultChecked?: boolean
+	/** Called when checked state changes. */
+	onChange?: (checked: boolean) => void
+	/** Disables the switch. */
+	disabled?: boolean
+	/** For form submission when checked (e.g. "on"). */
+	value?: string
+	/** Form name. */
+	name?: string
+	/** Additional class for the root wrapper. */
+	class?: string
+	/** Additional class for the control (track). */
+	controlClass?: string
+	/** Ref forwarded to the root wrapper div. */
+	ref?: (el: HTMLDivElement) => void
+}
+
+export function Switch(props: SwitchProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'description',
+		'error',
+		'required',
+		'checked',
+		'defaultChecked',
+		'onChange',
+		'disabled',
+		'value',
+		'name',
+		'class',
+		'controlClass',
+		'ref',
+	])
+
+	const hasError = () => !!local.error
+
+	// If there's no visible label, the switch still needs a name.
+	const a11yNameOk = () =>
+		local.label != null ||
+		(others['aria-label'] as string | undefined) != null ||
+		(others['aria-labelledby'] as string | undefined) != null ||
+		(others['title'] as string | undefined) != null
+
+	if (import.meta.env.DEV && !a11yNameOk()) {
+		console.warn('Switch: when label is omitted, provide aria-label, aria-labelledby, or title for accessibility.')
+	}
+
+	// Forward "naming" attributes to the actual switch root (not just the wrapper div).
+	const switchA11yProps = () => ({
+		'aria-label': local.label ? undefined : (others['aria-label'] as string | undefined),
+		'aria-labelledby': local.label ? undefined : (others['aria-labelledby'] as string | undefined),
+		title: local.label ? undefined : (others['title'] as string | undefined),
+	})
+
+	return (
+		<div ref={local.ref} class={cn('w-full', local.class)} {...others}>
+			<KobalteSwitch
+				{...switchA11yProps()}
+				checked={local.checked}
+				defaultChecked={local.defaultChecked}
+				onChange={local.onChange}
+				disabled={local.disabled}
+				validationState={hasError() ? 'invalid' : undefined}
+				name={local.name}
+				value={local.value ?? 'on'}
+			>
+				<div class={cn(local.label ? 'flex items-center justify-between gap-3 mb-1.5' : 'inline-flex items-center gap-2')}>
+					<Show when={local.label}>
+						<KobalteSwitch.Label
+							class={cn(
+								'text-sm font-medium cursor-pointer select-none',
+								hasError() ? 'text-danger-600' : 'text-ink-700',
+								local.disabled && 'opacity-50 cursor-not-allowed'
+							)}
+						>
+							{local.label}
+							<Show when={local.required}>
+								<span class="text-danger-500 ml-0.5" aria-hidden="true">*</span>
+							</Show>
+						</KobalteSwitch.Label>
+					</Show>
+
+					<KobalteSwitch.Input class="sr-only" />
+
+					<KobalteSwitch.Control
+						class={cn(
+							'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+							'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-surface-base',
+							'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+							'bg-ink-200 data-[checked]:bg-primary-500',
+							hasError() && 'border-danger-500 focus:ring-danger-500',
+							local.controlClass
+						)}
+					>
+						<KobalteSwitch.Thumb
+							class={cn(
+								'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform',
+								'translate-x-0.5 data-[checked]:translate-x-5'
+							)}
+						/>
+					</KobalteSwitch.Control>
+				</div>
+
+				<Show when={local.description && !hasError()}>
+					<KobalteSwitch.Description class="mt-1.5 text-sm text-ink-500">
+						{local.description}
+					</KobalteSwitch.Description>
+				</Show>
+
+				<Show when={hasError()}>
+					<KobalteSwitch.ErrorMessage class="mt-1.5 text-sm text-danger-600">
+						{local.error}
+					</KobalteSwitch.ErrorMessage>
+				</Show>
+			</KobalteSwitch>
+		</div>
+	)
+}