@torch-ui/solid 0.1.3

package/src/components/forms/NumberField.tsx

@@ -0,0 +1,145 @@
+import type { JSX } from 'solid-js'
+import { splitProps, Show } from 'solid-js'
+import { NumberField as KobalteNumberField } from '@kobalte/core/number-field'
+import { ChevronDown, ChevronUp } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+import { type ComponentSize, inputSizeConfig } from '../../utilities/componentSize'
+
+export interface NumberFieldProps {
+	/** Label above the input. */
+	label?: string
+	/** Error message and invalid styling. */
+	error?: string
+	/** Hint text below the input. */
+	helperText?: 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
+	/** Controlled value (number). */
+	value?: number
+	/** Called when value changes. */
+	onChange?: (value: number | undefined) => void
+	/** Minimum value. */
+	minValue?: number
+	/** Maximum value. */
+	maxValue?: number
+	/** Step for increment/decrement. */
+	step?: number
+	/** Disables the input and steppers. */
+	disabled?: boolean
+	/** Placeholder when empty. */
+	placeholder?: string
+	/** Input size. Controls height, text size, and padding. Default: md (36px). */
+	size?: ComponentSize
+	/** When true, show increment/decrement buttons. */
+	showStepper?: boolean
+	/** Additional class for the root. */
+	class?: string
+	/** Ref forwarded to the number input element. */
+	ref?: (el: HTMLInputElement) => void
+}
+
+export function NumberField(props: NumberFieldProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'value',
+		'onChange',
+		'minValue',
+		'maxValue',
+		'step',
+		'disabled',
+		'placeholder',
+		'size',
+		'showStepper',
+		'class',
+		'ref',
+	])
+
+	const hasError = () => !!local.error
+	const sc = () => inputSizeConfig[local.size ?? 'md']
+
+	const handleRawValueChange = (v: number | undefined) => {
+		local.onChange?.(v)
+	}
+
+	return (
+		<div class={cn('w-full', local.class)}>
+			<KobalteNumberField
+				rawValue={local.value}
+				onRawValueChange={handleRawValueChange}
+				minValue={local.minValue}
+				maxValue={local.maxValue}
+				step={local.step}
+				disabled={local.disabled}
+				validationState={hasError() ? 'invalid' : undefined}
+				{...others}
+			>
+				<Show when={!local.bare && local.label}>
+					<div class="flex items-center justify-between mb-1.5">
+						<KobalteNumberField.Label
+							class={cn(
+								'block text-md font-medium',
+								hasError() ? 'text-danger-600' : 'text-ink-700'
+							)}
+						>
+							{local.label}
+							<Show when={local.required}>
+								<span class="text-danger-500 ml-0.5" aria-hidden="true">*</span>
+							</Show>
+						</KobalteNumberField.Label>
+						<Show when={local.label && !local.required && local.optional}>
+							<span class="text-xs text-ink-500">optional</span>
+						</Show>
+					</div>
+				</Show>
+				<div class="relative flex items-stretch">
+					<KobalteNumberField.Input
+						ref={local.ref}
+						placeholder={local.placeholder}
+						class={cn(
+							'w-full rounded-lg transition-all outline-none border text-ink-900 placeholder:text-ink-400 dark:placeholder:text-ink-500 bg-surface-raised',
+							sc().h, sc().py, sc().text,
+							local.showStepper ? sc().plAdorn : sc().pl, sc().pr,
+							hasError()
+								? 'border-danger-500 focus:ring-2 focus:ring-inset focus:ring-danger-500 focus:border-transparent'
+								: 'border-ink-300 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'
+						)}
+					/>
+					<Show when={local.showStepper}>
+						<div class="absolute right-0 top-0 bottom-0 flex flex-col border-l border-ink-300 rounded-r-lg overflow-hidden">
+							<KobalteNumberField.IncrementTrigger
+								class="flex-1 flex items-center justify-center min-h-0 px-2 text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-800 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
+							>
+								<ChevronUp class="h-4 w-4" />
+							</KobalteNumberField.IncrementTrigger>
+							<KobalteNumberField.DecrementTrigger
+								class="flex-1 flex items-center justify-center min-h-0 px-2 text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-800 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
+							>
+								<ChevronDown class="h-4 w-4" />
+							</KobalteNumberField.DecrementTrigger>
+						</div>
+					</Show>
+				</div>
+				<Show when={!local.bare && !hasError() && local.helperText}>
+					<KobalteNumberField.Description class="mt-2 text-sm text-ink-500">
+						{local.helperText}
+					</KobalteNumberField.Description>
+				</Show>
+				<Show when={!local.bare && hasError()}>
+					<KobalteNumberField.ErrorMessage class="mt-2 text-sm text-danger-600">
+						{local.error}
+					</KobalteNumberField.ErrorMessage>
+				</Show>
+			</KobalteNumberField>
+		</div>
+	)
+}

package/src/components/forms/RadioGroup.tsx

@@ -0,0 +1,135 @@
+import { For, splitProps, Show } from 'solid-js'
+import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
+import { cn } from '../../utilities/classNames'
+
+export interface RadioGroupOption {
+	value: string
+	label: string
+	/** Optional description for the option. */
+	description?: string
+}
+
+export interface RadioGroupProps {
+	/** Group label (e.g. "Choose one"). */
+	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
+	/** Options to display (value + label, optional description). */
+	options: RadioGroupOption[]
+	/** Selected value (controlled). */
+	value?: string
+	/** Called when selection changes. */
+	onChange?: (value: string) => void
+	/** Disables all options. */
+	disabled?: boolean
+	/** Form name. */
+	name?: string
+	/** Layout: vertical list (default) or horizontal. */
+	orientation?: 'vertical' | 'horizontal'
+	/** Additional class for the root. */
+	class?: string
+}
+
+export function RadioGroup(props: RadioGroupProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'description',
+		'error',
+		'required',
+		'options',
+		'value',
+		'onChange',
+		'disabled',
+		'name',
+		'orientation',
+		'class',
+	])
+
+	const hasError = () => !!local.error
+
+	return (
+		<div class={cn('w-full', local.class)}>
+			<KobalteRadioGroup
+				value={local.value}
+				onChange={local.onChange}
+				disabled={local.disabled}
+				validationState={hasError() ? 'invalid' : undefined}
+				name={local.name}
+				orientation={local.orientation ?? 'vertical'}
+				{...others}
+			>
+				<Show when={local.label}>
+					<KobalteRadioGroup.Label
+						class={cn(
+							'block text-md font-medium mb-2',
+							hasError() ? 'text-danger-600' : 'text-ink-700',
+							local.disabled && 'opacity-50'
+						)}
+					>
+						{local.label}
+						{local.required && <span class="text-danger-500 ml-0.5" aria-hidden="true">*</span>}
+					</KobalteRadioGroup.Label>
+				</Show>
+				<div
+					role="presentation"
+					class={cn(
+						'flex gap-3',
+						local.orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'
+					)}
+				>
+					<For each={local.options}>
+						{(opt) => (
+							<KobalteRadioGroup.Item
+								value={opt.value}
+								class={cn(
+									'inline-flex items-start gap-3 cursor-pointer select-none rounded-lg border border-transparent p-3 transition-colors outline-none',
+									'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+									'data-[highlighted]:bg-ink-50 dark:data-[highlighted]:bg-ink-800/50',
+									'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
+								)}
+							>
+								<KobalteRadioGroup.ItemInput class="sr-only" />
+								<KobalteRadioGroup.ItemControl
+									class={cn(
+										'mt-0.5 h-4 w-4 shrink-0 rounded-full flex items-center justify-center transition-colors box-border',
+										// Unselected: gray ring, transparent interior
+										'border-2 border-ink-400 bg-transparent',
+										// Selected: primary ring, transparent interior; dot is the ItemIndicator
+										'data-[checked]:border-primary-500 data-[checked]:bg-transparent',
+										'data-[disabled]:opacity-50'
+									)}
+								>
+									<KobalteRadioGroup.ItemIndicator class="h-2 w-2 rounded-full bg-primary-500 shrink-0 pointer-events-none" />
+								</KobalteRadioGroup.ItemControl>
+								<span class="flex flex-col gap-0.5">
+									<KobalteRadioGroup.ItemLabel class="text-sm font-medium text-ink-900">
+										{opt.label}
+									</KobalteRadioGroup.ItemLabel>
+									<Show when={opt.description}>
+										<KobalteRadioGroup.ItemDescription class="text-xs text-ink-500">
+											{opt.description}
+										</KobalteRadioGroup.ItemDescription>
+									</Show>
+								</span>
+							</KobalteRadioGroup.Item>
+						)}
+					</For>
+				</div>
+				<Show when={local.description && !hasError()}>
+					<KobalteRadioGroup.Description class="mt-2 text-sm text-ink-500">
+						{local.description}
+					</KobalteRadioGroup.Description>
+				</Show>
+				<Show when={hasError()}>
+					<KobalteRadioGroup.ErrorMessage class="mt-2 text-sm text-danger-600">
+						{local.error}
+					</KobalteRadioGroup.ErrorMessage>
+				</Show>
+			</KobalteRadioGroup>
+		</div>
+	)
+}

package/src/components/forms/RelativeDateDefaultInput.tsx

@@ -0,0 +1,62 @@
+import { createMemo } from 'solid-js'
+import { Input, Select } from './'
+import { parseRelativeDateDefault, formatRelativeDateDefault } from '../../utilities/relativeDateDefault'
+import { cn } from '../../utilities/classNames'
+
+const SIGN_OPTIONS = [
+	{ value: '+', label: '+' },
+	{ value: '-', label: '-' },
+] as const
+
+export interface RelativeDateDefaultInputProps {
+	value: string
+	onValueChange: (value: string) => void
+	/** Label before the controls (default "Today") */
+	prefixLabel?: string
+	/** Label after days (default "day(s)") */
+	suffixLabel?: string
+	class?: string
+}
+
+/** Today + sign (+/−) + integer days. Produces stored value like "today+0", "today-7". */
+export function RelativeDateDefaultInput(props: RelativeDateDefaultInputProps) {
+	const parsed = createMemo(() => parseRelativeDateDefault(props.value))
+	const sign = () => parsed().sign
+	const days = () => parsed().days
+
+	const setSign = (s: string) => {
+		props.onValueChange(formatRelativeDateDefault((s as '+' | '-') || '+', days()))
+	}
+	const setDaysFromInput = (v: string) => {
+		const n = v === '' ? 0 : Math.max(0, parseInt(v, 10) || 0)
+		props.onValueChange(formatRelativeDateDefault(sign(), n))
+	}
+	const daysStr = () => String(days())
+
+	return (
+		<div class={cn('flex flex-nowrap items-center gap-2', props.class)}>
+			<span class="shrink-0 text-sm font-medium text-ink-700">
+				{props.prefixLabel ?? 'Today'}
+			</span>
+			<div class="flex shrink-0 items-center gap-2">
+				<Select
+					value={sign()}
+					onValueChange={setSign}
+					options={[...SIGN_OPTIONS]}
+					class="w-36 min-w-0 rounded-lg"
+				/>
+				<Input
+					bare
+					type="number"
+					min={0}
+					step={1}
+					value={daysStr()}
+					onValueChange={setDaysFromInput}
+					placeholder="0"
+					class="w-24 rounded-lg pr-2"
+				/>
+			</div>
+			<span class="shrink-0 text-sm text-ink-500">{props.suffixLabel ?? 'day(s)'}</span>
+		</div>
+	)
+}

package/src/components/forms/ReorderableList.tsx

@@ -0,0 +1,163 @@
+import { For, Show, type JSX, splitProps } from 'solid-js'
+import { ChevronDown, ChevronUp, GripVertical, X } from 'lucide-solid'
+import {
+	DragDropProvider,
+	DragDropSensors,
+	SortableProvider,
+	createSortable,
+	type DragEvent as DnDDragEvent,
+} from '@thisbeyond/solid-dnd'
+import { cn } from '../../utilities/classNames'
+
+export interface ReorderableListItem {
+	id: string
+	label: string
+}
+
+export interface ReorderableListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	items: ReorderableListItem[]
+	onReorder: (ids: string[]) => void
+	/** When true, show up/down arrow buttons to reorder. Default false (drag only). */
+	showMoveButtons?: boolean
+	onRemove?: (id: string) => void
+	class?: string
+}
+
+function SortableItem(props: {
+	item: ReorderableListItem
+	index: number
+	count: number
+	showMoveButtons: boolean
+	onRemove?: (id: string) => void
+	move: (id: string, direction: 'up' | 'down') => void
+}) {
+	const sortable = createSortable(props.item.id)
+
+	const canMoveUp = () => props.index > 0
+	const canMoveDown = () => props.index < props.count - 1
+
+	return (
+		<div
+			role="listitem"
+			ref={sortable.ref}
+			// @ts-expect-error solid-dnd directive not in JSX namespace
+			use:sortable
+			class={cn(
+				'flex items-center justify-between rounded-lg border border-surface-border bg-surface-raised px-4 py-3 text-sm transition-shadow',
+				sortable.isActiveDraggable && 'z-50 shadow-lg',
+			)}
+		>
+			<div class="flex items-center gap-2 text-ink-700">
+				<button
+					type="button"
+					class="inline-flex h-7 w-7 shrink-0 cursor-grab items-center justify-center rounded-md text-ink-400 hover:bg-ink-100 active:cursor-grabbing dark:hover:bg-ink-700"
+					aria-label={`Drag to reorder ${props.item.label}`}
+					{...sortable.dragActivators}
+				>
+					<GripVertical class="h-4 w-4" aria-hidden="true" />
+				</button>
+				<span>{props.item.label}</span>
+			</div>
+			<div class="flex shrink-0 items-center gap-1">
+				<Show when={props.showMoveButtons}>
+					<button
+						type="button"
+						disabled={!canMoveUp()}
+						class={cn(
+							'rounded-md p-1 text-ink-500',
+							canMoveUp() && 'hover:bg-ink-100 dark:hover:bg-ink-700',
+							!canMoveUp() && 'opacity-40 cursor-not-allowed',
+						)}
+						aria-label={`Move ${props.item.label} up`}
+						onClick={() => props.move(props.item.id, 'up')}
+					>
+						<ChevronUp class="h-4 w-4" aria-hidden="true" />
+					</button>
+					<button
+						type="button"
+						disabled={!canMoveDown()}
+						class={cn(
+							'rounded-md p-1 text-ink-500',
+							canMoveDown() && 'hover:bg-ink-100 dark:hover:bg-ink-700',
+							!canMoveDown() && 'opacity-40 cursor-not-allowed',
+						)}
+						aria-label={`Move ${props.item.label} down`}
+						onClick={() => props.move(props.item.id, 'down')}
+					>
+						<ChevronDown class="h-4 w-4" aria-hidden="true" />
+					</button>
+				</Show>
+				<Show when={props.onRemove}>
+					<button
+						type="button"
+						class="rounded-md p-1 text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-700"
+						aria-label={`Remove ${props.item.label}`}
+						onClick={() => props.onRemove?.(props.item.id)}
+					>
+						<X class="h-4 w-4" aria-hidden="true" />
+					</button>
+				</Show>
+			</div>
+		</div>
+	)
+}
+
+function ReorderableListInner(props: ReorderableListProps) {
+	const [local, others] = splitProps(props, ['items', 'onReorder', 'onRemove', 'showMoveButtons', 'class'])
+	const showMoveButtons = () => local.showMoveButtons === true
+
+	const move = (id: string, direction: 'up' | 'down') => {
+		const ids = local.items.map((item) => item.id)
+		const index = ids.indexOf(id)
+		const nextIndex = direction === 'up' ? index - 1 : index + 1
+		if (index === -1 || nextIndex < 0 || nextIndex >= ids.length) return
+		const next = [...ids]
+		const [moved] = next.splice(index, 1)
+		next.splice(nextIndex, 0, moved)
+		local.onReorder(next)
+	}
+
+	return (
+		<div role="list" class={cn('space-y-2', local.class)} {...others}>
+			<For each={local.items}>
+				{(item, index) => (
+					<SortableItem
+						item={item}
+						index={index()}
+						count={local.items.length}
+						showMoveButtons={showMoveButtons()}
+						onRemove={local.onRemove}
+						move={move}
+					/>
+				)}
+			</For>
+		</div>
+	)
+}
+
+export function ReorderableList(props: ReorderableListProps) {
+	const ids = () => props.items.map((i) => i.id)
+
+	const handleDragEnd = (event: DnDDragEvent) => {
+		const { draggable, droppable } = event
+		if (!droppable || draggable.id === droppable.id) return
+		const order = props.items.map((i) => i.id)
+		const fromIndex = order.indexOf(String(draggable.id))
+		const toIndex = order.indexOf(String(droppable.id))
+		if (fromIndex === -1 || toIndex === -1) return
+		const next = [...order]
+		const [moved] = next.splice(fromIndex, 1)
+		next.splice(toIndex, 0, moved)
+		// Defer so Solid DnD can clear transforms before we re-render
+		queueMicrotask(() => props.onReorder(next))
+	}
+
+	return (
+		<DragDropProvider onDragEnd={handleDragEnd}>
+			<DragDropSensors />
+			<SortableProvider ids={ids()}>
+				<ReorderableListInner {...props} />
+			</SortableProvider>
+		</DragDropProvider>
+	)
+}