@torch-ui/solid 0.1.3

package/src/components/feedback/Loading.tsx

@@ -0,0 +1,159 @@
+import { type JSX, Show, Switch, Match, splitProps } from 'solid-js'
+import { Loader2, LoaderCircle } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+import {
+	SkeletonCard,
+	SkeletonTable,
+	SkeletonSection,
+	SkeletonHeading,
+	SkeletonForm,
+	SkeletonNavBlock,
+} from './SkeletonBlocks'
+
+export type LoadingVariant =
+	| 'spinner'
+	| 'dashboard'
+	| 'tablePage'
+	| 'admin'
+	| 'generic'
+
+export interface LoadingProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	/** Spinner (default) or skeleton layout for full-page loading. Omit for spinner. */
+	variant?: LoadingVariant
+	/** For spinner: message (default "Loading…"). Omit or set iconOnly for no message. */
+	message?: string
+	/** For spinner: when true, show only the spinner (no message). */
+	iconOnly?: boolean
+	/** For spinner: size of the icon. Ignored when icon is provided. */
+	size?: 'sm' | 'md' | 'lg'
+	/** For spinner: custom icon element (e.g. from lucide-solid). Add animate-spin and size classes. */
+	icon?: JSX.Element
+	/** For spinner: minimum height (default 200px when not iconOnly). */
+	minHeight?: string | number
+}
+
+/** Single loading component: spinner (for Suspense/panels) or skeleton layout (for full-page). */
+export function Loading(props: LoadingProps) {
+	const [local, others] = splitProps(props, [
+		'variant',
+		'class',
+		'message',
+		'iconOnly',
+		'size',
+		'icon',
+		'minHeight',
+		'aria-label',
+	])
+
+	const variant = () => local.variant ?? 'spinner'
+	if (variant() === 'spinner') {
+		const iconOnly = () => local.iconOnly === true
+		const size = () => local.size ?? 'md'
+		const sizeClasses = () =>
+			size() === 'sm' ? 'h-4 w-4' : size() === 'lg' ? 'h-6 w-6' : 'h-5 w-5'
+		const minHeight = () =>
+			local.minHeight != null
+				? typeof local.minHeight === 'number'
+					? `${local.minHeight}px`
+					: local.minHeight
+				: iconOnly()
+					? undefined
+					: '200px'
+		const defaultIcon = () => (
+			<LoaderCircle
+				class={cn('shrink-0 animate-spin text-ink-400', sizeClasses())}
+				aria-hidden="true"
+			/>
+		)
+		const resolvedIcon = () => local.icon ?? defaultIcon()
+		const label = () => local['aria-label'] ?? (iconOnly() ? (local.message ?? 'Loading') : undefined)
+		return (
+			<div
+				{...others}
+				class={cn('flex items-center justify-center gap-2', local.class)}
+				style={minHeight() ? { 'min-height': minHeight() } : undefined}
+				role="status"
+				aria-live="polite"
+				aria-label={label()}
+			>
+				<span aria-hidden="true">{resolvedIcon()}</span>
+				<Show when={!iconOnly()}>
+					<span
+						class="text-sm text-ink-500"
+						aria-hidden={local['aria-label'] ? 'true' : undefined}
+					>
+						{local.message ?? 'Loading…'}
+					</span>
+				</Show>
+			</div>
+		)
+	}
+
+	// Skeleton layout: composed from SkeletonBlocks that map to Card, Table, Section, etc.
+	return (
+		<div {...others} class={cn(local.class)} role="status" aria-live="polite" aria-atomic="true" aria-label="Loading">
+			<Switch>
+				<Match when={variant() === 'dashboard'}><DashboardSkeletonLayout /></Match>
+				<Match when={variant() === 'tablePage'}><TablePageSkeletonLayout /></Match>
+				<Match when={variant() === 'admin'}><AdminSkeletonLayout /></Match>
+				<Match when={true}><GenericSkeletonLayout /></Match>
+			</Switch>
+		</div>
+	)
+}
+
+function DashboardSkeletonLayout() {
+	return (
+		<div class="space-y-8">
+			<SkeletonHeading />
+			<div class="grid gap-6 sm:grid-cols-2">
+				<SkeletonCard header bodyLines={2} />
+				<SkeletonCard header bodyLines={2} />
+			</div>
+		</div>
+	)
+}
+
+function TablePageSkeletonLayout() {
+	return (
+		<div class="space-y-6">
+			<div class="mb-6">
+				<SkeletonHeading />
+			</div>
+			<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
+				<div class="flex min-w-0 max-w-2xl flex-1 items-center gap-4">
+					<div class="h-10 min-w-0 flex-1 rounded-lg bg-surface-overlay animate-pulse" />
+					<div class="h-10 w-28 rounded-lg bg-surface-overlay animate-pulse" />
+				</div>
+				<div class="flex items-center gap-2">
+					<div class="h-10 w-20 rounded-lg bg-surface-overlay animate-pulse" />
+					<div class="h-10 w-28 rounded-lg bg-surface-overlay animate-pulse" />
+				</div>
+			</div>
+			<SkeletonTable rows={6} columns={5} />
+		</div>
+	)
+}
+
+function AdminSkeletonLayout() {
+	return (
+		<div class="flex gap-8">
+			<aside class="w-64 flex-shrink-0 space-y-6">
+				<SkeletonNavBlock items={3} />
+				<SkeletonNavBlock items={5} />
+			</aside>
+			<div class="min-w-0 flex-1 space-y-6">
+				<SkeletonHeading />
+				<SkeletonForm fields={2} buttons={2} />
+			</div>
+		</div>
+	)
+}
+
+function GenericSkeletonLayout() {
+	return (
+		<div class="space-y-6">
+			<SkeletonSection description content contentLines={3} />
+		</div>
+	)
+}

package/src/components/feedback/Progress.tsx

@@ -0,0 +1,321 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createMemo, For, Show, splitProps } from 'solid-js'
+import { Progress as KobalteProgress } from '@kobalte/core/progress'
+import { cn } from '../../utilities/classNames'
+
+export type ProgressSize = 'sm' | 'md' | 'lg'
+export type ProgressColor =
+	| 'default'
+	| 'primary'
+	| 'secondary'
+	| 'success'
+	| 'warning'
+	| 'danger'
+export type ProgressRadius = 'none' | 'sm' | 'md' | 'lg' | 'full'
+
+export interface ProgressClassNames {
+	base?: string
+	labelWrapper?: string
+	label?: string
+	track?: string
+	value?: string
+	indicator?: string
+}
+
+export interface ProgressProps {
+	/** Current value (between minValue and maxValue) */
+	value?: number
+	/** Minimum value */
+	minValue?: number
+	/** Maximum value */
+	maxValue?: number
+	/** Label above the bar; also used for aria-label when aria-label not set and label is a string */
+	label?: JSX.Element | string
+	/** Custom value label (e.g. "3/10"). When not set, value is shown as percentage if showValueLabel. */
+	valueLabel?: JSX.Element
+	/** Size of the track */
+	size?: ProgressSize
+	/** Color of the indicator */
+	color?: ProgressColor
+	/** Track and indicator radius */
+	radius?: ProgressRadius
+	/** Intl.NumberFormat options for default value display (e.g. { style: 'percent' }) */
+	formatOptions?: Intl.NumberFormatOptions
+	/** Whether to show the value label (default true when determinate and no valueLabel) */
+	showValueLabel?: boolean
+	/** Indeterminate animation when total progress is unknown */
+	isIndeterminate?: boolean
+	/** Striped indicator */
+	isStriped?: boolean
+	/** Disabled state */
+	isDisabled?: boolean
+	/** Disable fill animation */
+	disableAnimation?: boolean
+	/** When set, render as segmented bar (e.g. password strength) */
+	segments?: number
+	/** Animate from 0 to 100 over this duration (ms). Use for indeterminate-duration progress. */
+	durationMs?: number
+	/** Accessible label (required when label prop is not provided) */
+	'aria-label'?: string
+	'aria-labelledby'?: string
+	'aria-describedby'?: string
+	'aria-valuetext'?: string
+	'aria-valuenow'?: number
+	'aria-valuemin'?: number
+	'aria-valuemax'?: number
+	/** Slot class overrides */
+	classNames?: ProgressClassNames
+	class?: string
+	trackClass?: string
+	fillClass?: string
+}
+
+const ANIMATION_NAME = 'torchui-progress-fill'
+const INDETERMINATE_NAME = 'torchui-progress-indeterminate'
+
+const SIZE_CLASSES: Record<ProgressSize, string> = {
+	sm: 'h-1',
+	md: 'h-1.5',
+	lg: 'h-2',
+}
+
+const RADIUS_CLASSES: Record<ProgressRadius, string> = {
+	none: 'rounded-none',
+	sm: 'rounded-sm',
+	md: 'rounded-md',
+	lg: 'rounded-lg',
+	full: 'rounded-full',
+}
+
+const EDGE_RADIUS_CLASSES: Record<ProgressRadius, { left: string; right: string }> = {
+	none: { left: 'rounded-l-none', right: 'rounded-r-none' },
+	sm: { left: 'rounded-l-sm', right: 'rounded-r-sm' },
+	md: { left: 'rounded-l-md', right: 'rounded-r-md' },
+	lg: { left: 'rounded-l-lg', right: 'rounded-r-lg' },
+	full: { left: 'rounded-l-full', right: 'rounded-r-full' },
+}
+
+const COLOR_CLASSES: Record<ProgressColor, string> = {
+	default: 'bg-ink-500',
+	primary: 'bg-primary-500',
+	secondary: 'bg-secondary-500',
+	success: 'bg-success-500',
+	warning: 'bg-warning-500',
+	danger: 'bg-danger-500',
+}
+
+function getPercent(value: number, min: number, max: number): number {
+	if (min >= max) {
+		if (import.meta.env.DEV && min > max) {
+			console.warn(`Progress: minValue (${min}) is greater than maxValue (${max}).`)
+		}
+		return 0
+	}
+	return Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
+}
+
+/**
+ * Progress bar. Supports determinate (value), indeterminate, segmented, or duration-based fill.
+ * Aligned with common Progress APIs (label, size, color, radius, valueLabel, isIndeterminate, etc.).
+ */
+export function Progress(props: ProgressProps): JSX.Element {
+	const [local] = splitProps(props, [
+		'value',
+		'minValue',
+		'maxValue',
+		'label',
+		'valueLabel',
+		'size',
+		'color',
+		'radius',
+		'formatOptions',
+		'showValueLabel',
+		'isIndeterminate',
+		'isStriped',
+		'isDisabled',
+		'disableAnimation',
+		'segments',
+		'durationMs',
+		'aria-label',
+		'aria-labelledby',
+		'aria-describedby',
+		'aria-valuetext',
+		'aria-valuenow',
+		'aria-valuemin',
+		'aria-valuemax',
+		'classNames',
+		'class',
+		'trackClass',
+		'fillClass',
+	])
+
+	const min = () => local.minValue ?? 0
+	const max = () => local.maxValue ?? 100
+	const rawValue = () => local.value ?? 0
+	const percent = () => getPercent(rawValue(), min(), max())
+	const segments = () => local.segments
+	const durationMs = () => local.durationMs
+	const size = () => local.size ?? 'md'
+	const color = () => local.color ?? 'primary'
+	const radius = () => local.radius ?? 'full'
+	const isIndeterminate = () => local.isIndeterminate === true
+	const showValue = () =>
+		local.showValueLabel !== false &&
+		local.valueLabel == null &&
+		durationMs() == null &&
+		!isIndeterminate()
+	const ariaLabel = () => local['aria-label'] ?? (typeof local.label === 'string' ? local.label : undefined)
+	let warnedLabel = false
+	createEffect(() => {
+		if (import.meta.env.DEV && !warnedLabel && ariaLabel() == null && local['aria-labelledby'] == null) {
+			warnedLabel = true
+			console.warn('Progress: provide aria-label, aria-labelledby, or a string label prop for an accessible progress bar.')
+		}
+	})
+	const formatter = createMemo(() =>
+		new Intl.NumberFormat(undefined, local.formatOptions ?? { style: 'percent', maximumFractionDigits: 0 })
+	)
+	const valueDisplay = () => {
+		if (local.valueLabel != null) return local.valueLabel
+		if (!showValue()) return null
+		return formatter().format(percent() / 100)
+	}
+	const segmentIndexes = createMemo(() =>
+		segments() != null ? Array.from({ length: segments()! }, (_, i) => i) : []
+	)
+	const classNames = () => local.classNames ?? {}
+
+	return (
+		<KobalteProgress
+			value={isIndeterminate() || durationMs() != null ? undefined : rawValue()}
+			minValue={min()}
+			maxValue={max()}
+			indeterminate={isIndeterminate() || durationMs() != null}
+			getValueLabel={({ value, min, max }) => {
+				if (local['aria-valuetext']) return local['aria-valuetext']
+				const pct = getPercent(value, min, max)
+				return formatter().format(pct / 100)
+			}}
+			class={cn('w-full', local.class, classNames().base)}
+			aria-label={ariaLabel()}
+			aria-labelledby={local['aria-labelledby']}
+			aria-describedby={local['aria-describedby']}
+			aria-disabled={local.isDisabled ? true : undefined}
+		>
+			{/* Style tags are injected per instance — CSS rules are idempotent so
+			   duplicates are harmless, just slightly wasteful if many Progress bars
+			   are on screen simultaneously. */}
+			<Show when={durationMs() != null || isIndeterminate()}>
+				<style>
+					{`@keyframes ${ANIMATION_NAME} { to { width: 100%; } }
+					@keyframes ${INDETERMINATE_NAME} {
+						0% { transform: translateX(-100%); }
+						100% { transform: translateX(400%); }
+					}`}
+				</style>
+			</Show>
+			<Show when={local.isStriped}>
+				<style>
+					{`.torchui-progress-stripes {
+						position: absolute;
+						inset: 0;
+						pointer-events: none;
+						background-image: repeating-linear-gradient(
+							-45deg,
+							transparent 0,
+							transparent 10px,
+							rgba(255,255,255,.25) 10px,
+							rgba(255,255,255,.25) 20px
+						);
+						border-radius: inherit;
+					}`}
+				</style>
+			</Show>
+			<Show when={local.label != null || valueDisplay() != null}>
+				<div
+					class={cn(
+						'flex items-center justify-between gap-2 mb-1',
+						classNames().labelWrapper
+					)}
+				>
+					<Show when={local.label != null}>
+						<KobalteProgress.Label class={cn('text-sm font-medium text-ink-700', classNames().label)}>
+							{local.label}
+						</KobalteProgress.Label>
+					</Show>
+					<Show when={valueDisplay() != null}>
+						<KobalteProgress.ValueLabel class={cn('text-sm text-ink-600', classNames().value)}>
+							{valueDisplay()}
+						</KobalteProgress.ValueLabel>
+					</Show>
+				</div>
+			</Show>
+			<KobalteProgress.Track
+				class={cn(
+					'w-full overflow-hidden bg-surface-dim',
+					SIZE_CLASSES[size()],
+					RADIUS_CLASSES[radius()],
+					local.trackClass,
+					classNames().track
+				)}
+			>
+				{segments() != null ? (
+					<div class="h-full w-full flex gap-0.5">
+						<For each={segmentIndexes()}>
+							{(i) => {
+								const count = segments()!
+								const filled = () => (percent() / 100) * count > i
+								const segRadius = () =>
+									i === 0 ? EDGE_RADIUS_CLASSES[radius()].left
+									: i === count - 1 ? EDGE_RADIUS_CLASSES[radius()].right
+									: 'rounded-none'
+								return (
+									<div
+										class={cn(
+											'h-full flex-1 transition-colors duration-200',
+											segRadius(),
+											filled()
+												? local.fillClass ?? COLOR_CLASSES[color()]
+												: 'bg-surface-dim',
+											classNames().indicator
+										)}
+									/>
+								)
+							}}
+						</For>
+					</div>
+				) : (
+					<KobalteProgress.Fill
+						class={cn(
+							'h-full transition-[width] ease-linear relative',
+							RADIUS_CLASSES[radius()],
+							!durationMs() && !isIndeterminate() && !local.disableAnimation && 'duration-200',
+							local.fillClass ?? COLOR_CLASSES[color()],
+							classNames().indicator
+						)}
+						style={
+							isIndeterminate()
+								? {
+										width: '25%',
+										animation: local.disableAnimation
+											? undefined
+											: `${INDETERMINATE_NAME} 1.5s ease-in-out infinite`,
+									}
+								: durationMs() != null
+									? {
+											width: '0%',
+											animation: `${ANIMATION_NAME} ${durationMs()}ms linear forwards`,
+										}
+									: { width: 'var(--kb-progress-fill-width)' }
+						}
+					>
+						<Show when={local.isStriped}>
+							<div class="torchui-progress-stripes" aria-hidden="true" />
+						</Show>
+					</KobalteProgress.Fill>
+				)}
+			</KobalteProgress.Track>
+		</KobalteProgress>
+	)
+}
+

package/src/components/feedback/Skeleton.tsx

@@ -0,0 +1,62 @@
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+const STANDALONE_CLASS =
+	'inline-block bg-ink-200 animate-pulse'
+
+export interface SkeletonProps {
+	/** Extra class for the wrapper (or the standalone block). */
+	class?: string
+	/** Use "full" for circular (e.g. avatar), "lg" for large radius, or omit for default. Matches the wrapped child's shape when you pass the same as the child (e.g. round="full" for rounded-full). */
+	round?: 'full' | 'lg' | 'md' | 'sm' | 'none'
+	/** Use block layout instead of inline-block. Needed when wrapping children that depend on parent width (w-full, flex-1, %-based). Default: false. */
+	block?: boolean
+	/** Wrap content to take its shape; omit for a standalone block you size with class.
+	 * Note: wrap mode works best with intrinsic-size children. For layout-dependent children
+	 * (w-full, flex-1, %-widths), set block={true} so the wrapper participates in flow layout.
+	 * Skeleton is always aria-hidden — pair with a Loading status region for screen reader announcements. */
+	children?: JSX.Element
+}
+
+const ROUND_CLASS: Record<NonNullable<SkeletonProps['round']>, string> = {
+	full: 'rounded-full',
+	lg: 'rounded-lg',
+	md: 'rounded-md',
+	sm: 'rounded-sm',
+	none: 'rounded-none',
+}
+
+/**
+ * Skeleton takes the shape of its children by default (wrap mode), or use as a standalone
+ * block by omitting children and sizing with class. Use the round prop to match your
+ * child (e.g. round="full" for avatars so the skeleton is a circle).
+ */
+export function Skeleton(props: SkeletonProps): JSX.Element {
+	const [local] = splitProps(props, ['class', 'round', 'block', 'children'])
+
+	const roundClass = local.round ? ROUND_CLASS[local.round] : 'rounded'
+
+	if (local.children == null) {
+		return (
+			<div
+				class={cn(STANDALONE_CLASS, roundClass, local.class)}
+				aria-hidden="true"
+			/>
+		)
+	}
+
+	return (
+		<div
+			class={cn('relative', local.block ? 'block' : 'inline-block', roundClass, local.class)}
+			aria-hidden="true"
+		>
+			<div class="invisible">
+				{local.children}
+			</div>
+			<div
+				class={cn('absolute inset-0', roundClass, STANDALONE_CLASS)}
+			/>
+		</div>
+	)
+}