@torch-ui/solid 0.1.3

package/src/components/forms/FilterRuleRow.tsx

@@ -0,0 +1,68 @@
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { X } from 'lucide-solid'
+import { Autocomplete } from './Autocomplete'
+import { Select } from './Select'
+import { cn } from '../../utilities/classNames'
+
+export interface FilterRuleOption {
+	value: string
+	label: string
+}
+
+export interface FilterRuleRowProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	fieldValue: string
+	fieldOptions: FilterRuleOption[]
+	operatorValue: string
+	operatorOptions: FilterRuleOption[]
+	onFieldChange: (value: string) => void
+	onOperatorChange: (value: string) => void
+	onRemove: () => void
+	children?: JSX.Element
+}
+
+export function FilterRuleRow(props: FilterRuleRowProps) {
+	const [local, others] = splitProps(props, [
+		'fieldValue',
+		'fieldOptions',
+		'operatorValue',
+		'operatorOptions',
+		'onFieldChange',
+		'onOperatorChange',
+		'onRemove',
+		'class',
+		'children',
+	])
+
+	return (
+		<div
+			class={cn('rounded-lg border border-surface-border bg-surface-raised p-4 space-y-3', local.class)}
+			{...others}
+		>
+			<div class="grid gap-3 sm:grid-cols-[1.4fr_1fr_auto]">
+				<Autocomplete
+					label="Field"
+					value={local.fieldValue}
+					onValueChange={local.onFieldChange}
+					options={local.fieldOptions}
+					placeholder="Search fields..."
+				/>
+				<Select
+					label="Operator"
+					options={local.operatorOptions}
+					value={local.operatorValue}
+					onValueChange={local.onOperatorChange}
+				/>
+				<button
+					type="button"
+					class="mt-6 inline-flex h-10 items-center justify-center rounded-lg border border-ink-200 text-ink-500 hover:bg-ink-100"
+					aria-label="Remove filter"
+					onClick={local.onRemove}
+				>
+					<X class="h-4 w-4" />
+				</button>
+			</div>
+			{local.children && <div>{local.children}</div>}
+		</div>
+	)
+}

package/src/components/forms/Input.tsx

@@ -0,0 +1,200 @@
+import { type JSX, splitProps, Show, createSignal } from 'solid-js'
+import { Eye, EyeOff } from 'lucide-solid'
+import { TextField as KobalteTextField } from '@kobalte/core/text-field'
+import { cn } from '../../utilities/classNames'
+import { type ComponentSize, inputSizeConfig } from '../../utilities/componentSize'
+
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+	label?: string
+	/** Optional content on the label row (e.g. "Forgot password?" link) */
+	labelTrailing?: JSX.Element
+	error?: string
+	helperText?: string
+	/** When true, never render label row or error/helper text (input only; error still affects border) */
+	bare?: boolean
+	/** When true, native required on input and required indicator (asterisk) on label. */
+	required?: boolean
+	/** When true, show "optional" on the label row when the field is not required. Default false. */
+	optional?: boolean
+	/** Input size. Controls height, text size, and padding. Default: md (36px). */
+	size?: ComponentSize
+	/** When true and type is "password", show a show/hide toggle (eye icon) to reveal the password. Default false. */
+	revealable?: boolean
+	/** Content at the start of the input (e.g. "$", or an icon). */
+	startAdornment?: JSX.Element
+	/** Content at the end of the input (e.g. "USD", or an icon). */
+	endAdornment?: JSX.Element
+	/** Icon at the start (same slot as startAdornment). Use for search, etc. */
+	startIcon?: JSX.Element
+	/** Icon at the end (same slot as endAdornment). */
+	endIcon?: JSX.Element
+	/** @deprecated Use startIcon or startAdornment. */
+	leftIcon?: JSX.Element
+	/** @deprecated Use endIcon or endAdornment. */
+	rightIcon?: JSX.Element
+	/** Applied to the native input element when you need to style the control itself. */
+	inputClass?: string
+	onValueChange?: (value: string) => void
+	onErrorClear?: () => void
+}
+
+export function Input(props: InputProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'labelTrailing',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'size',
+		'revealable',
+		'type',
+		'startAdornment',
+		'endAdornment',
+		'startIcon',
+		'endIcon',
+		'leftIcon',
+		'rightIcon',
+		'onValueChange',
+		'onErrorClear',
+		'class',
+		'inputClass',
+		'id',
+		'value',
+		'onInput',
+		'ref',
+		'disabled',
+	])
+
+	const hasError = () => !!local.error
+	const sc = () => inputSizeConfig[local.size ?? 'md']
+
+	const handleChange = (val: string) => {
+		if (local.error && local.onErrorClear) {
+			local.onErrorClear()
+		}
+		local.onValueChange?.(val)
+	}
+
+	const handleInput = (e: InputEvent) => {
+		if (local.onInput) {
+			;(local.onInput as (e: InputEvent) => void)(e)
+		}
+	}
+
+	const startContent = () => local.startAdornment ?? local.startIcon ?? local.leftIcon
+	const isPasswordRevealable = () => local.type === 'password' && local.revealable === true
+	const [showPassword, setShowPassword] = createSignal(false)
+	const effectiveType = () =>
+		isPasswordRevealable() && showPassword() ? 'text' : (local.type ?? 'text')
+	const endContent = () => {
+		if (isPasswordRevealable()) return null
+		return local.endAdornment ?? local.endIcon ?? local.rightIcon
+	}
+	const hasStart = () => !!startContent()
+	const hasEnd = () => !!endContent() || isPasswordRevealable()
+	const adornmentClass = 'absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-ink-500 dark:text-ink-400 pointer-events-none z-10'
+
+	return (
+		<KobalteTextField
+			value={typeof local.value === 'string' ? local.value : local.value == null ? '' : String(local.value)}
+			onChange={handleChange}
+			validationState={hasError() ? 'invalid' : undefined}
+			required={local.required}
+			disabled={local.disabled}
+			class={cn('w-full', local.class)}
+		>
+			<Show when={!local.bare && (local.label || local.labelTrailing)}>
+				<div class="flex items-center justify-between gap-2 mb-1.5">
+					<Show when={local.label}>
+						<KobalteTextField.Label
+							class={cn(
+								'block text-md font-medium',
+								hasError() ? 'text-danger-600' : 'text-ink-700 dark:text-ink-300'
+							)}
+						>
+							{local.label}
+							<Show when={local.required}>
+								<span class="text-danger-500 dark:text-danger-400 ml-0.5" aria-hidden="true">*</span>
+							</Show>
+						</KobalteTextField.Label>
+					</Show>
+					<Show when={!local.label}>
+						<span />
+					</Show>
+					<div class="flex items-center gap-2 flex-shrink-0">
+						<Show when={local.labelTrailing}>{local.labelTrailing}</Show>
+						<Show when={local.label && !local.required && local.optional}>
+							<span class="text-xs text-ink-500 dark:text-ink-400">optional</span>
+						</Show>
+					</div>
+				</div>
+			</Show>
+
+			<div class="relative flex items-center">
+				<Show when={startContent()}>
+					<div
+						class={cn(adornmentClass, sc().text, sc().adornStart)}
+						aria-hidden="true"
+					>
+						{startContent()}
+					</div>
+				</Show>
+
+				<KobalteTextField.Input
+					ref={local.ref}
+					id={local.id}
+					type={effectiveType()}
+					onInput={handleInput}
+					class={cn(
+						'w-full rounded-lg transition-all outline-none border text-ink-900 dark:text-ink-100 placeholder:text-ink-400 dark:placeholder:text-ink-500 bg-surface-raised',
+						sc().h, sc().py, sc().text,
+						hasStart() ? sc().plAdorn : sc().pl,
+						hasEnd() ? sc().prAdorn : sc().pr,
+						hasError()
+							? 'border-danger-500 focus:ring-2 focus:ring-inset focus:ring-danger-500 focus:border-transparent'
+							: 'border-ink-300 dark:border-ink-800 focus:ring-2 focus:ring-inset focus:ring-primary-500 focus:border-transparent',
+						'disabled:bg-surface-base disabled:text-ink-500 dark:disabled:text-ink-500 disabled:cursor-not-allowed',
+						local.inputClass
+					)}
+					{...others}
+				/>
+
+				<Show when={endContent()}>
+					<div
+						class={cn(adornmentClass, sc().text, sc().adornEnd)}
+						aria-hidden="true"
+					>
+						{endContent()}
+					</div>
+				</Show>
+				<Show when={isPasswordRevealable()}>
+					<button
+						type="button"
+						onClick={() => setShowPassword((v) => !v)}
+						class={cn(
+							'absolute top-1/2 -translate-y-1/2 flex items-center justify-center rounded p-1 z-10 text-ink-500 dark:text-ink-400 hover:text-ink-700 dark:hover:text-ink-200 hover:bg-ink-100 dark:hover:bg-ink-800',
+							sc().adornEnd, sc().text
+						)}
+						aria-label={showPassword() ? 'Hide password' : 'Show password'}
+					>
+						{showPassword() ? <EyeOff class="h-4 w-4" aria-hidden="true" /> : <Eye class="h-4 w-4" aria-hidden="true" />}
+					</button>
+				</Show>
+			</div>
+
+			<Show when={!local.bare && local.helperText && !hasError()}>
+				<KobalteTextField.Description class="mt-2 text-sm text-ink-500 dark:text-ink-400">
+					{local.helperText}
+				</KobalteTextField.Description>
+			</Show>
+
+			<Show when={!local.bare}>
+				<KobalteTextField.ErrorMessage class="mt-2 text-sm text-danger-600">
+					{local.error}
+				</KobalteTextField.ErrorMessage>
+			</Show>
+		</KobalteTextField>
+	)
+}

package/src/components/forms/MultiSelect.tsx

@@ -0,0 +1,361 @@
+import type { JSX } from 'solid-js'
+import { createSignal, createUniqueId, For, Show, splitProps } from 'solid-js'
+import { Check, ChevronDown, GripVertical, X } from 'lucide-solid'
+import { Select as KobalteSelect } from '@kobalte/core/select'
+import {
+	DragDropProvider,
+	DragDropSensors,
+	SortableProvider,
+	createSortable,
+} from '@thisbeyond/solid-dnd'
+import { cn } from '../../utilities/classNames'
+import { type ComponentSize, inputSizeConfig } from '../../utilities/componentSize'
+
+export interface MultiSelectOption {
+	value: string
+	label: string
+	icon?: JSX.Element
+}
+
+export interface MultiSelectProps {
+	label?: string
+	/** Hint text below the control. Prefer helperText; description is supported for backward compatibility. */
+	description?: string
+	/** Hint text below the control (same as description). */
+	helperText?: string
+	/** Error message and invalid styling. */
+	error?: string
+	/** When true, never render label row or error/helper text (control only). */
+	bare?: boolean
+	/** When true, show required indicator on label. */
+	required?: boolean
+	/** When true, show "optional" on the label row when not required. Default false. */
+	optional?: boolean
+	options: MultiSelectOption[]
+	value: string[]
+	onChange: (value: string[]) => void
+	placeholder?: string
+	class?: string
+	/** When true, selected chips can be reordered via drag. Default false. */
+	reorderable?: boolean
+	/** When true, show a search input to filter options. Default false. */
+	searchable?: boolean
+	/** When true, the control is non-interactive and shows placeholder only. */
+	disabled?: boolean
+	/** Input size. Controls height, text size, and padding. Default: md (36px). */
+	size?: ComponentSize
+	/** Ref forwarded to the root wrapper div. */
+	ref?: (el: HTMLDivElement) => void
+}
+
+function ChipContent(props: {
+	opt: MultiSelectOption
+	onRemove: (opt: MultiSelectOption) => void
+	showGrip?: boolean
+	gripActivators?: Record<string, unknown>
+	isDragging?: boolean
+}) {
+	return (
+		<span
+			class={cn(
+				'inline-flex max-w-[200px] shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium',
+				'bg-ink-100 text-ink-700',
+				props.isDragging && 'shadow-md',
+			)}
+		>
+			<Show when={props.showGrip}>
+				<button
+					type="button"
+					class="cursor-grab shrink-0 text-ink-400 hover:text-ink-600 dark:hover:text-ink-300 active:cursor-grabbing"
+					aria-label="Drag to reorder"
+					{...(props.gripActivators ?? {})}
+				>
+					<GripVertical class="h-3.5 w-3.5" aria-hidden="true" />
+				</button>
+			</Show>
+			<Show when={props.opt.icon}>
+				<span class="shrink-0 text-current opacity-70">{props.opt.icon}</span>
+			</Show>
+			<span class="min-w-0 truncate">{props.opt.label}</span>
+			<button
+				type="button"
+				onClick={(e) => {
+					e.stopPropagation()
+					e.preventDefault()
+					props.onRemove(props.opt)
+				}}
+				onPointerDown={(e) => e.stopPropagation()}
+				class="rounded p-0.5 hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-1 focus:ring-ink-400 dark:focus:ring-ink-500"
+				aria-label={`Remove ${props.opt.label}`}
+			>
+				<X class="h-3.5 w-3.5" aria-hidden="true" />
+			</button>
+		</span>
+	)
+}
+
+function SortableChip(props: { opt: MultiSelectOption; onRemove: (opt: MultiSelectOption) => void }) {
+	const sortable = createSortable(props.opt.value)
+	const style = () => ({
+		transform: sortable.transform ? `translate3d(${sortable.transform.x}px, ${sortable.transform.y}px, 0)` : undefined,
+	})
+	return (
+		<span ref={sortable.ref} style={style()}>
+			<ChipContent
+				opt={props.opt}
+				onRemove={props.onRemove}
+				showGrip
+				gripActivators={sortable.dragActivators}
+				isDragging={sortable.isActiveDraggable}
+			/>
+		</span>
+	)
+}
+
+function ChipsList(props: {
+	selectedOptions: MultiSelectOption[]
+	onRemove: (opt: MultiSelectOption) => void
+	reorderable: boolean
+	onReorder: (newOrder: string[]) => void
+}) {
+	const ids = () => props.selectedOptions.map((o) => o.value)
+	const handleDragEnd = ({
+		draggable,
+		droppable,
+	}: {
+		draggable: { id: string }
+		droppable?: { id: string } | null
+	}) => {
+		if (!droppable || draggable.id === droppable.id) return
+		const fromIndex = props.selectedOptions.findIndex((o) => o.value === draggable.id)
+		const toIndex = props.selectedOptions.findIndex((o) => o.value === droppable!.id)
+		if (fromIndex === -1 || toIndex === -1) return
+		const next = [...props.selectedOptions]
+		const [moved] = next.splice(fromIndex, 1)
+		next.splice(toIndex, 0, moved)
+		props.onReorder(next.map((o) => o.value))
+	}
+
+	if (props.reorderable && props.selectedOptions.length > 0) {
+		return (
+			<DragDropProvider onDragEnd={handleDragEnd as (e: unknown) => void}>
+				<DragDropSensors />
+				<SortableProvider ids={ids()}>
+					<For each={props.selectedOptions}>
+						{(opt) => <SortableChip opt={opt} onRemove={props.onRemove} />}
+					</For>
+				</SortableProvider>
+			</DragDropProvider>
+		)
+	}
+	return (
+		<For each={props.selectedOptions}>
+			{(opt) => <ChipContent opt={opt} onRemove={props.onRemove} />}
+		</For>
+	)
+}
+
+export function MultiSelect(props: MultiSelectProps) {
+	const [local] = splitProps(props, [
+		'label',
+		'description',
+		'helperText',
+		'error',
+		'bare',
+		'required',
+		'optional',
+		'options',
+		'value',
+		'onChange',
+		'placeholder',
+		'class',
+		'reorderable',
+		'searchable',
+		'disabled',
+		'size',
+		'ref',
+	])
+	const sc = () => inputSizeConfig[local.size ?? 'md']
+	const helperOrDescription = () => local.helperText ?? local.description
+	const uid = createUniqueId()
+	const helperId = () => helperOrDescription() ? `ms-${uid}-help` : undefined
+	const errorId = () => local.error ? `ms-${uid}-error` : undefined
+	const describedBy = () => [helperId(), errorId()].filter(Boolean).join(' ') || undefined
+	const [searchQuery, setSearchQuery] = createSignal('')
+
+	const filteredOptions = (): MultiSelectOption[] => {
+		if (!local.searchable) return local.options
+		const q = searchQuery().trim().toLowerCase()
+		if (!q) return local.options
+		return local.options.filter((o) => o.label.toLowerCase().includes(q))
+	}
+
+	// Kobalte multiple mode uses option objects for value/onChange; we expose string[].
+	const selectedOptions = (): MultiSelectOption[] =>
+		local.value
+			.map((v) => local.options.find((o) => o.value === v))
+			.filter((o): o is MultiSelectOption => o != null)
+
+	const handleChange = (opts: MultiSelectOption | MultiSelectOption[] | null) => {
+		const arr = opts == null ? [] : Array.isArray(opts) ? opts : [opts]
+		local.onChange(arr.map((o) => o.value))
+	}
+
+	// Always include selected items in options so selection doesn't vanish when search filters them out
+	const optionsForSelect = (): MultiSelectOption[] => {
+		const base = filteredOptions()
+		const selected = selectedOptions()
+		const missing = selected.filter((s) => !base.some((o) => o.value === s.value))
+		return missing.length ? [...missing, ...base] : base
+	}
+
+	let searchInputRef: HTMLInputElement | undefined
+	const handleOpenChange = (open: boolean) => {
+		if (!open) setSearchQuery('')
+		else if (local.searchable) {
+			requestAnimationFrame(() => searchInputRef?.focus())
+		}
+	}
+
+	return (
+		<div ref={local.ref} class={cn('w-full', local.class)}>
+			<KobalteSelect<MultiSelectOption>
+				multiple
+				options={optionsForSelect()}
+				optionValue="value"
+				optionTextValue="label"
+				value={selectedOptions()}
+				onChange={handleChange}
+				placeholder={local.placeholder ?? 'Select...'}
+				disabled={local.disabled}
+				closeOnSelection={false}
+				onOpenChange={handleOpenChange}
+				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 items-center gap-2">
+								<Show when={itemProps.item.rawValue.icon}>
+									<span class="flex-shrink-0 text-ink-500">{itemProps.item.rawValue.icon}</span>
+								</Show>
+								<span class="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="text-danger-500 ml-0.5" 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,
+						local.error ? 'border-danger-500' : 'border-ink-300',
+						'bg-surface-raised',
+					)}
+				>
+						<KobalteSelect.Trigger
+						as="button"
+						type="button"
+						aria-invalid={local.error ? 'true' : undefined}
+						aria-describedby={describedBy()}
+						aria-errormessage={local.error ? errorId() : undefined}
+						class={cn(
+							'w-full h-full min-h-0 min-w-0 flex items-center gap-2 rounded-lg transition-all outline-none bg-transparent text-ink-900 text-left border-0 cursor-pointer',
+							sc().py, sc().text, sc().pl, sc().pr,
+							'hover:bg-ink-50 dark:hover:bg-ink-800/50',
+							'data-[expanded]:ring-2 data-[expanded]:ring-inset data-[expanded]:ring-primary-500',
+							'data-[expanded]:hover:bg-transparent dark:data-[expanded]:hover:bg-transparent',
+							local.error
+								? 'focus:ring-2 focus:ring-inset focus:ring-danger-500 focus:border-transparent'
+								: 'focus:ring-2 focus:ring-inset focus:ring-primary-500 focus:border-transparent',
+							'data-[disabled]:bg-ink-50 dark:data-[disabled]:bg-ink-900 data-[disabled]:text-ink-500 dark:data-[disabled]:text-ink-500 data-[disabled]:cursor-not-allowed',
+							'data-[placeholder-shown]:text-ink-400 dark:data-[placeholder-shown]:text-ink-500',
+						)}
+					>
+						<KobalteSelect.Value<MultiSelectOption> class="min-w-0 flex-1 flex flex-wrap items-center gap-2 basis-0">
+							{(state) => {
+								const selected = state.selectedOptions()
+								if (selected.length === 0) {
+									return (
+										<span class="text-ink-400">
+											{local.placeholder ?? 'Select...'}
+										</span>
+									)
+								}
+								return (
+									<ChipsList
+										selectedOptions={selected}
+										onRemove={(opt) => state.remove(opt)}
+										reorderable={local.reorderable ?? false}
+										onReorder={(newOrder) => local.onChange(newOrder)}
+									/>
+								)
+							}}
+						</KobalteSelect.Value>
+						<KobalteSelect.Icon class="inline-flex shrink-0 w-4 items-center justify-center text-ink-400 transition-transform data-[expanded]:rotate-180">
+							<ChevronDown class="h-3.5 w-3.5" aria-hidden="true" />
+						</KobalteSelect.Icon>
+					</KobalteSelect.Trigger>
+				</div>
+
+				<Show when={!local.bare && !local.error && helperOrDescription()}>
+					<KobalteSelect.Description id={helperId()} class="mt-2 text-sm text-ink-500">
+						{helperOrDescription()}
+					</KobalteSelect.Description>
+				</Show>
+
+				<Show when={!local.bare && local.error}>
+					<p id={errorId()} class="mt-2 text-sm text-danger-600">{local.error}</p>
+				</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>
+	)
+}