@torch-ui/solid 0.1.3

package/src/components/forms/TextArea.tsx

@@ -0,0 +1,202 @@
+import {
+	type JSX,
+	splitProps,
+	Show,
+	createEffect,
+	onMount,
+	onCleanup,
+	createUniqueId,
+} from 'solid-js'
+import { TextField as KobalteTextField } from '@kobalte/core/text-field'
+import { cn } from '../../utilities/classNames'
+import { mergeRefs } from '../../utilities/mergeRefs'
+
+export type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both'
+
+export interface TextAreaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	label?: string
+	error?: string
+	helperText?: string
+	/** When true, never render label row or error/helper text (textarea only) */
+	bare?: boolean
+	required?: boolean
+	optional?: boolean
+	resize?: TextAreaResize
+	maxLength?: number
+	autoresize?: boolean
+	inputClass?: string
+	onValueChange?: (value: string) => void
+	onErrorClear?: () => void
+}
+
+const resizeClasses: Record<TextAreaResize, string> = {
+	none: 'resize-none',
+	vertical: 'resize-y',
+	horizontal: 'resize-x',
+	both: 'resize',
+}
+
+export function TextArea(props: TextAreaProps) {
+	const [local, others] = splitProps(props, [
+		'label',
+		'error',
+		'helperText',
+		'bare',
+		'required',
+		'optional',
+		'resize',
+		'maxLength',
+		'autoresize',
+		'onValueChange',
+		'onErrorClear',
+		'class',
+		'inputClass',
+		'id',
+		'value',
+		'onInput',
+		'rows',
+		'ref',
+		'disabled',
+	])
+
+	// ✅ bare mode should still be named
+	if (import.meta.env.DEV && local.bare) {
+		if (
+			(others['aria-label'] as string | undefined) == null &&
+			(others['aria-labelledby'] as string | undefined) == null &&
+			(others['title'] as string | undefined) == null
+		) {
+			console.warn('TextArea: bare mode requires aria-label, aria-labelledby, or title for accessibility.')
+		}
+	}
+
+	const hasError = () => !!local.error
+
+	const valueString = () =>
+		typeof local.value === 'string' ? local.value : local.value == null ? '' : String(local.value)
+
+	const currentLength = () => valueString().length
+	const maxLen = () => local.maxLength ?? 0
+	const atOrOverLimit = () => maxLen() > 0 && currentLength() >= maxLen()
+	const nearLimit = () => maxLen() > 0 && currentLength() >= maxLen() * 0.9 && currentLength() < maxLen()
+	const countColorClass = () =>
+		atOrOverLimit()
+			? 'text-danger-600 dark:text-danger-400'
+			: nearLimit()
+				? 'text-amber-600 dark:text-amber-400'
+				: 'text-ink-500'
+
+	let textareaRef: HTMLTextAreaElement | undefined
+	const resizeIfAutoresize = () => {
+		const el = textareaRef
+		if (!el || !local.autoresize) return
+		el.style.height = 'auto'
+		el.style.height = `${el.scrollHeight}px`
+	}
+
+	createEffect(() => {
+		if (!local.autoresize) return
+		valueString()
+		queueMicrotask(resizeIfAutoresize)
+	})
+	onMount(() => {
+		if (local.autoresize) queueMicrotask(resizeIfAutoresize)
+	})
+	onCleanup(() => {
+		if (textareaRef && local.autoresize) textareaRef.style.height = ''
+	})
+
+	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 resizeClass = () =>
+		local.autoresize ? 'resize-none' : resizeClasses[local.resize ?? 'vertical']
+
+	// ✅ link helper/error text to textarea (merges with any user aria-describedby)
+	const uid = createUniqueId()
+	const helperId = () => (!local.bare && local.helperText && !hasError() ? `ta-${uid}-help` : undefined)
+	const errorId = () => (!local.bare && local.error ? `ta-${uid}-error` : undefined)
+	const describedBy = () => {
+		const user = (others['aria-describedby'] as string | undefined)
+		const own = [helperId(), errorId()].filter(Boolean).join(' ')
+		return user && own ? `${user} ${own}` : (user ?? (own || undefined))
+	}
+
+	return (
+		<KobalteTextField
+			value={valueString()}
+			onChange={handleChange}
+			validationState={hasError() ? 'invalid' : undefined}
+			required={local.required}
+			disabled={local.disabled}
+			class={cn('w-full', local.class)}
+		>
+			<Show when={!local.bare && local.label}>
+				<div class="flex items-center justify-between gap-2 mb-1.5">
+					<KobalteTextField.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 dark:text-danger-400 ml-0.5" aria-hidden="true">*</span>
+						</Show>
+					</KobalteTextField.Label>
+					<Show when={local.label && !local.required && local.optional}>
+						<span class="text-xs text-ink-500">optional</span>
+					</Show>
+				</div>
+			</Show>
+
+			<KobalteTextField.TextArea
+				ref={mergeRefs((el: HTMLTextAreaElement) => (textareaRef = el), local.ref)}
+				id={local.id}
+				onInput={handleInput}
+				rows={local.rows ?? 3}
+				maxLength={local.maxLength}
+				aria-invalid={hasError() ? 'true' : undefined}
+				aria-describedby={describedBy()}
+				aria-errormessage={hasError() ? errorId() : undefined}
+				class={cn(
+					'w-full py-3 px-4 rounded-lg transition-all outline-none border text-base text-ink-900 placeholder:text-ink-400 dark:placeholder:text-ink-500 min-h-[80px] bg-surface-raised',
+					resizeClass(),
+					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',
+					local.inputClass,
+				)}
+				{...others}
+			/>
+
+			<Show when={!local.bare && local.maxLength != null && local.maxLength > 0}>
+				<div class="mt-1.5 flex items-center justify-between gap-2">
+					<span />
+					<span class={cn('text-xs tabular-nums', countColorClass())}>
+						{currentLength()}/{local.maxLength}
+					</span>
+				</div>
+			</Show>
+
+			<Show when={!local.bare && local.helperText && !hasError()}>
+				<KobalteTextField.Description id={helperId()} class="mt-2 text-sm text-ink-500">
+					{local.helperText}
+				</KobalteTextField.Description>
+			</Show>
+
+			<Show when={!local.bare && local.error}>
+				<KobalteTextField.ErrorMessage id={errorId()} class="mt-2 text-sm text-danger-600">
+					{local.error}
+				</KobalteTextField.ErrorMessage>
+			</Show>
+		</KobalteTextField>
+	)
+}

package/src/components/forms/ViewCustomizer.tsx

@@ -0,0 +1,44 @@
+import type { JSX } from 'solid-js'
+
+export interface ViewCustomizerField {
+	id: string
+	label: string
+	type: string
+}
+
+export interface ViewCustomizerProps {
+	allFields: ViewCustomizerField[]
+	fields: ViewCustomizerField[]
+	value: any[]
+	onChange: (value: any[]) => void
+	viewName: string
+	onViewNameChange: (name: string) => void
+	usedFields: string[]
+	onUsedFieldsChange: (fields: string[]) => void
+	groupBy: string
+	onGroupByChange: (value: string) => void
+	mode: string
+	editingViewLabel?: string
+	onSaveChanges: () => void
+	onSaveAsNew: () => void
+	saveError?: string | null
+	onCancel: () => void
+	onClose: () => void
+	canDelete: boolean
+	onDelete: () => void
+	scope: string
+	onScopeChange: (scope: string) => void
+	canSetGlobalScope: boolean
+	pinned: boolean
+	onPinnedChange: (pinned: boolean) => void
+	title: string
+	description: string
+}
+
+export function ViewCustomizer(props: ViewCustomizerProps): JSX.Element {
+	return (
+		<div class="p-4 border rounded-md">
+			<div class="text-sm text-gray-600">ViewCustomizer placeholder</div>
+		</div>
+	)
+}

package/src/components/forms/index.ts

@@ -0,0 +1,43 @@
+/** Form controls: Input, TextArea, Select, Autocomplete, MultiSelect, Checkbox, Switch, RadioGroup, NumberField, CodeInput, Slider, FileUpload, DatePicker, ColorPicker */
+export { Input, type InputProps } from './Input'
+export { TextArea, type TextAreaProps, type TextAreaResize } from './TextArea'
+export { Select, type SelectProps, type SelectOption } from './Select'
+export { Autocomplete, type AutocompleteProps, type AutocompleteOption } from './Autocomplete'
+export { MultiSelect, type MultiSelectProps, type MultiSelectOption } from './MultiSelect'
+export { Checkbox, type CheckboxProps, type CheckboxSize } from './Checkbox'
+export { Switch, type SwitchProps } from './Switch'
+export { RadioGroup, type RadioGroupProps, type RadioGroupOption } from './RadioGroup'
+export { NumberField, type NumberFieldProps } from './NumberField'
+export { CodeInput, type CodeInputProps } from './CodeInput'
+export { Slider, type SliderProps } from './Slider'
+export {
+	FileUpload,
+	type FileUploadProps,
+	type FileUploadItem,
+	type FileUploadVariant,
+} from './FileUpload'
+export { DatePicker, type DatePickerProps } from './DatePicker'
+export { DateRangePicker, type DateRangePickerProps } from './DateRangePicker'
+export {
+	ColorPicker,
+	type ColorPickerProps,
+	type ColorFormat,
+} from './ColorPicker'
+
+/** Form utilities: FieldPicker, ReorderableList, RelativeDateDefaultInput */
+export { FieldPicker, type FieldPickerProps, type FieldPickerOption } from './FieldPicker'
+
+export {
+	ReorderableList,
+	type ReorderableListProps,
+	type ReorderableListItem,
+} from './ReorderableList'
+
+export {
+	RelativeDateDefaultInput,
+	type RelativeDateDefaultInputProps,
+} from './RelativeDateDefaultInput'
+
+/** Filter and view components */
+export { FilterBuilder, type FilterBuilderProps } from './FilterBuilder'
+export { ViewCustomizer, type ViewCustomizerProps, type ViewCustomizerField } from './ViewCustomizer'

package/src/components/layout/Accordion.tsx

@@ -0,0 +1,110 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'
+import type { AccordionContentProps as KobalteAccordionContentProps, AccordionTriggerProps as KobalteAccordionTriggerProps, AccordionItemProps as KobalteAccordionItemProps } from '@kobalte/core/accordion'
+import { ChevronDown } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+export const AccordionRoot = KobalteAccordion
+export const AccordionItem = KobalteAccordion.Item
+export const AccordionHeader = KobalteAccordion.Header
+export const AccordionTrigger = KobalteAccordion.Trigger
+export const AccordionContent = KobalteAccordion.Content
+
+const accordionContentStyles = `
+.accordion-content[data-expanded] {
+	animation: torchui-accordion-down 200ms ease-out;
+}
+.accordion-content[data-closed] {
+	animation: torchui-accordion-up 200ms ease-out;
+}
+@keyframes torchui-accordion-down {
+	from { height: 0; opacity: 0; }
+	to { height: var(--kb-accordion-content-height); opacity: 1; }
+}
+@keyframes torchui-accordion-up {
+	from { height: var(--kb-accordion-content-height); opacity: 1; }
+	to { height: 0; opacity: 0; }
+}
+`
+
+export interface AccordionContentProps extends KobalteAccordionContentProps {
+	class?: string
+	children?: JSX.Element
+}
+
+const ACCORDION_STYLE_ID = 'torchui-accordion-styles'
+
+function ensureAccordionStyles() {
+	if (typeof document === 'undefined') return
+	if (document.getElementById(ACCORDION_STYLE_ID)) return
+	const style = document.createElement('style')
+	style.id = ACCORDION_STYLE_ID
+	style.textContent = accordionContentStyles
+	document.head.appendChild(style)
+}
+
+if (typeof document !== 'undefined') ensureAccordionStyles()
+
+export function AccordionContentStyled(props: AccordionContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteAccordion.Content
+			class={cn(
+				'accordion-content overflow-hidden border-b border-surface-border bg-surface-base/50',
+				local.class
+			)}
+			{...others}
+		>
+			<div class="px-4 py-3 text-sm text-ink-700">{local.children}</div>
+		</KobalteAccordion.Content>
+	)
+}
+
+export interface AccordionTriggerStyledProps extends KobalteAccordionTriggerProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function AccordionTriggerStyled(props: AccordionTriggerStyledProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteAccordion.Header as="h3" class="flex">
+			<KobalteAccordion.Trigger
+				class={cn(
+					'flex flex-1 items-center justify-between gap-2 rounded-t-lg px-4 py-3 text-left text-sm font-medium text-ink-800',
+					'hover:bg-ink-100 dark:hover:bg-ink-800',
+					'data-[expanded]:rounded-b-none data-[expanded]:bg-ink-100 dark:data-[expanded]:bg-ink-800',
+					'data-[expanded]:[&>svg]:rotate-180',
+					'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+					'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+					local.class
+				)}
+				{...others}
+			>
+				{local.children}
+				<ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" aria-hidden="true" />
+			</KobalteAccordion.Trigger>
+		</KobalteAccordion.Header>
+	)
+}
+
+export interface AccordionItemStyledProps extends KobalteAccordionItemProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function AccordionItemStyled(props: AccordionItemStyledProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteAccordion.Item
+			class={cn(
+				'w-full rounded-lg border border-surface-border',
+				'data-[disabled]:opacity-60 data-[disabled]:cursor-not-allowed',
+				local.class
+			)}
+			{...others}
+		>
+			{local.children}
+		</KobalteAccordion.Item>
+	)
+}

package/src/components/layout/Alert.tsx

@@ -0,0 +1,156 @@
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type AlertStatus = 'error' | 'success' | 'warning' | 'info'
+
+export type AlertAppearance = 'subtle' | 'solid' | 'outline' | 'transparent'
+
+export interface AlertProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+	/** Semantic status: error, success, warning, or info. Ignored when colorClass is set. */
+	status?: AlertStatus
+	/** Visual style: subtle (default), solid, outline, or transparent. */
+	appearance?: AlertAppearance
+	/** Optional icon (e.g. from lucide-solid) shown at the start. */
+	icon?: JSX.Element
+	/** When true, shows a close button and calls onClose when clicked. */
+	closeable?: boolean
+	/** Called when the close button is clicked. Required when closeable is true. */
+	onClose?: () => void
+	/** Override default status colors. Provide Tailwind classes for border, background, and text (include dark: variants). */
+	colorClass?: string
+	/** Controls the ARIA live region behavior. 'assertive' → role="alert" (interrupts SR), 'polite' → role="status" (queued), 'off' → no role. Default 'polite'. */
+	ariaLive?: 'polite' | 'assertive' | 'off'
+	/** Optional CTAs (e.g. Resend, Upgrade) rendered at the end of the alert. */
+	actions?: JSX.Element
+	/** Optional heading (e.g. "Error" or "Session expired") shown above the message. */
+	title?: JSX.Element
+	class?: string
+	children?: JSX.Element
+}
+
+type StatusAppearanceMap = Record<AlertStatus, Record<AlertAppearance, string>>
+
+const statusAppearanceClasses: StatusAppearanceMap = {
+	error: {
+		subtle:
+			'border-danger-200 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950 dark:text-danger-100',
+		solid:
+			'border-danger-500 bg-danger-500 text-white dark:border-danger-600 dark:bg-danger-600',
+		outline:
+			'border-danger-400 bg-transparent text-danger-700 dark:border-danger-500 dark:bg-transparent dark:text-danger-300',
+		transparent:
+			'border-transparent bg-danger-50 text-danger-800 dark:border-transparent dark:bg-danger-950 dark:text-danger-200',
+	},
+	success: {
+		subtle:
+			'border-success-200 bg-success-50 text-success-900 dark:border-success-800 dark:bg-success-950 dark:text-success-100',
+		solid:
+			'border-success-500 bg-success-500 text-white dark:border-success-600 dark:bg-success-600',
+		outline:
+			'border-success-400 bg-transparent text-success-700 dark:border-success-500 dark:bg-transparent dark:text-success-300',
+		transparent:
+			'border-transparent bg-success-50 text-success-800 dark:border-transparent dark:bg-success-950 dark:text-success-200',
+	},
+	warning: {
+		subtle:
+			'border-warning-200 bg-warning-50 text-warning-900 dark:border-warning-800 dark:bg-warning-950 dark:text-warning-100',
+		solid:
+			'border-warning-400 bg-warning-400 text-ink-900 dark:border-warning-500 dark:bg-warning-500',
+		outline:
+			'border-warning-400 bg-transparent text-warning-700 dark:border-warning-500 dark:bg-transparent dark:text-warning-300',
+		transparent:
+			'border-transparent bg-warning-50 text-warning-800 dark:border-transparent dark:bg-warning-950 dark:text-warning-200',
+	},
+	info: {
+		subtle:
+			'border-info-200 bg-info-50 text-info-900 dark:border-info-800 dark:bg-info-950 dark:text-info-100',
+		solid:
+			'border-info-500 bg-info-500 text-white dark:border-info-600 dark:bg-info-600',
+		outline:
+			'border-info-400 bg-transparent text-info-700 dark:border-info-500 dark:bg-transparent dark:text-info-300',
+		transparent:
+			'border-transparent bg-info-50 text-info-800 dark:border-transparent dark:bg-info-950 dark:text-info-200',
+	},
+}
+
+/** Inline alert banner with status, appearance, optional icon, close, and CTAs. */
+export function Alert(props: AlertProps): JSX.Element {
+	const [local, others] = splitProps(props, [
+		'status',
+		'appearance',
+		'icon',
+		'closeable',
+		'onClose',
+		'ariaLive',
+		'role',
+		'colorClass',
+		'actions',
+		'title',
+		'class',
+		'children',
+		'ref',
+	])
+	const status = () => local.status ?? 'error'
+	const appearance = () => local.appearance ?? 'subtle'
+	const colorClasses = () =>
+		local.colorClass ?? statusAppearanceClasses[status()][appearance()]
+
+	if (import.meta.env.DEV && local.closeable && !local.onClose) {
+		console.warn('Alert: closeable is true but onClose is not provided.')
+	}
+
+	const liveMode = () => local.ariaLive ?? 'polite'
+	const roleAttr = () => {
+		const m = liveMode()
+		return m === 'assertive' ? 'alert' : m === 'polite' ? 'status' : undefined
+	}
+	const role = () => local.role ?? roleAttr()
+	const ariaLiveAttr = () => liveMode() === 'off' ? undefined : liveMode()
+	const showClose = () => local.closeable === true && local.onClose != null
+	const hasActions = () => showClose() || local.actions != null
+
+	return (
+		<div
+			ref={local.ref}
+			class={cn(
+				'flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-sm',
+				colorClasses(),
+				local.class,
+			)}
+			{...others}
+			role={role()}
+			aria-live={ariaLiveAttr()}
+		>
+			{local.icon != null && (
+				<span class="shrink-0 [&>svg]:size-4" aria-hidden="true">
+					{local.icon}
+				</span>
+			)}
+			<div class="min-w-0 flex-1">
+				{local.title != null && (
+					<div class="font-semibold">{local.title}</div>
+				)}
+				{local.title != null && local.children != null && <div class="mt-0.5" />}
+				{local.children}
+			</div>
+			{hasActions() && (
+				<div class="flex shrink-0 items-center gap-2">
+					{local.actions}
+					{showClose() && (
+						<button
+							type="button"
+							onClick={local.onClose}
+							class="rounded p-1 opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1 focus:ring-offset-transparent"
+							aria-label="Close"
+						>
+							<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						</button>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}

package/src/components/layout/BlockQuote.tsx

@@ -0,0 +1,70 @@
+import type { JSX } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type BlockQuoteJustify = 'start' | 'center' | 'end'
+
+export interface BlockQuoteProps {
+	/** Quote content (paragraph(s) or text). */
+	children: JSX.Element | string
+	/** Optional attribution (e.g. "— Author Name"). Rendered in a footer. */
+	citation?: string | JSX.Element
+	/** Optional cite URL for the blockquote source. Maps to the cite attribute on <blockquote>. */
+	cite?: string
+	/** Optional icon (e.g. Quote from lucide-solid) shown at the start of the quote. */
+	icon?: JSX.Element
+	/** Optional avatar (e.g. Avatar or img) shown to the left of the quote. */
+	avatar?: JSX.Element
+	/** Text alignment: start (left), center, or end (right). Default: start. */
+	justify?: BlockQuoteJustify
+	/** When true, omit the left border. Default: false. */
+	noBorder?: boolean
+	/** Optional class for the blockquote root. */
+	class?: string
+}
+
+const justifyClass: Record<BlockQuoteJustify, string> = {
+	start: 'text-start',
+	center: 'text-center',
+	end: 'text-end',
+}
+
+/** Semantic blockquote with optional icon, avatar, citation, and justification. */
+export function BlockQuote(props: BlockQuoteProps): JSX.Element {
+	const justify = () => props.justify ?? 'start'
+	const alignClass = () => justifyClass[justify()]
+	const hasCitation = () =>
+		props.citation != null &&
+		(typeof props.citation !== 'string' || props.citation.trim() !== '')
+
+	return (
+		<blockquote
+			cite={props.cite}
+			class={cn(
+				'text-ink-700',
+				!props.noBorder && 'border-l-4 border-primary-500 pl-4',
+				props.class
+			)}
+		>
+			<div class={cn('flex gap-3', props.avatar && 'items-start')}>
+				{props.avatar && (
+					<div class="shrink-0" aria-hidden="true">
+						{props.avatar}
+					</div>
+				)}
+				<div class={cn('min-w-0 flex-1', alignClass())}>
+					{props.icon && (
+						<div class="mb-2 text-primary-500 [&>svg]:h-8 [&>svg]:w-8" aria-hidden="true">
+							{props.icon}
+						</div>
+					)}
+					<div class="[&>p]:mb-2 [&>p:last-child]:mb-0">{props.children}</div>
+					{hasCitation() && (
+						<footer class="mt-2 text-sm text-ink-500">
+							{props.citation}
+						</footer>
+					)}
+				</div>
+			</div>
+		</blockquote>
+	)
+}