@torch-ui/solid 0.1.3

package/src/components/data-display/Timeline.tsx

@@ -0,0 +1,200 @@
+import { type JSX, Show, For, splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type TimelineItemStatus = 'completed' | 'active' | 'pending' | 'error'
+export type TimelineVariant = 'default' | 'compact' | 'outlined'
+export type TimelineConnector = 'solid' | 'dashed' | 'dotted'
+
+export interface TimelineItem {
+	id?: string
+	/** Main heading for the event */
+	title: JSX.Element
+	/** Secondary description text */
+	description?: JSX.Element
+	/** Timestamp or label shown beside the title */
+	time?: JSX.Element
+	/** Custom icon/content inside the dot. If omitted, a default dot or status icon renders. */
+	icon?: JSX.Element
+	/** Controls the dot color and default icon. Default: 'pending'. */
+	status?: TimelineItemStatus
+	/** Extra content slot rendered below description */
+	content?: JSX.Element
+	/** Override the dot color with any Tailwind bg class e.g. 'bg-purple-500' */
+	color?: string
+}
+
+export interface TimelineProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children'> {
+	/** Timeline entries */
+	items: TimelineItem[]
+	/** Visual style. Default: 'default'. */
+	variant?: TimelineVariant
+	/** Connector line style. Default: 'solid'. */
+	connector?: TimelineConnector
+	/** Show connector line between items. Default: true. */
+	showConnector?: boolean
+	/** Place timestamp to the left of the connector. Default: false. */
+	timeLeft?: boolean
+}
+
+const statusDotClass: Record<TimelineItemStatus, string> = {
+	completed: 'bg-success-500 text-white',
+	active: 'bg-primary-500 text-white ring-4 ring-primary-500/20',
+	pending: 'bg-surface-border text-ink-400 border-2 border-ink-300',
+	error: 'bg-danger-500 text-white',
+}
+
+const statusConnectorClass: Record<TimelineItemStatus, string> = {
+	completed: 'border-success-300 dark:border-success-700',
+	active: 'border-primary-300 dark:border-primary-700',
+	pending: 'border-ink-200 dark:border-ink-700',
+	error: 'border-danger-300 dark:border-danger-700',
+}
+
+function CheckIcon() {
+	return (
+		<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+		</svg>
+	)
+}
+
+function XIcon() {
+	return (
+		<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" />
+		</svg>
+	)
+}
+
+function DefaultDotIcon(props: { status: TimelineItemStatus }) {
+	if (props.status === 'completed') return <CheckIcon />
+	if (props.status === 'error') return <XIcon />
+	if (props.status === 'active') {
+		return <span class="block h-2 w-2 rounded-full bg-white" />
+	}
+	return null
+}
+
+export function Timeline(props: TimelineProps) {
+	const [local, others] = splitProps(props, [
+		'items',
+		'variant',
+		'connector',
+		'showConnector',
+		'timeLeft',
+		'class',
+	])
+
+	const variant = () => local.variant ?? 'default'
+	const connector = () => local.connector ?? 'solid'
+	const showConnector = () => local.showConnector !== false
+	const timeLeft = () => local.timeLeft ?? false
+
+	const compact = () => variant() === 'compact'
+	const outlined = () => variant() === 'outlined'
+
+	const connectorBorderStyle = () => {
+		const style = connector()
+		if (style === 'dashed') return 'border-dashed'
+		if (style === 'dotted') return 'border-dotted'
+		return 'border-solid'
+	}
+
+	return (
+		<div
+			class={cn('relative', local.class)}
+			{...others}
+		>
+			<ol class="list-none">
+				<For each={local.items}>
+					{(item, idx) => {
+						const isLast = () => idx() === local.items.length - 1
+						const status = () => item.status ?? 'pending'
+						const dotClass = () => item.color
+							? `${item.color} text-white`
+							: statusDotClass[status()]
+
+						return (
+							<li class={cn('relative flex', timeLeft() ? 'flex-row-reverse' : 'flex-row', compact() ? 'gap-3' : 'gap-4')}>
+								{/* Left side: timestamp (when timeLeft) */}
+								<Show when={timeLeft() && item.time}>
+									<div class="w-28 shrink-0 pt-0.5 text-right">
+										<span class="text-xs text-ink-400">{item.time}</span>
+									</div>
+								</Show>
+
+								{/* Center: dot + connector */}
+								<div class={cn('flex flex-col items-center', timeLeft() ? 'mx-0' : '')}>
+									{/* Dot */}
+									<div
+										class={cn(
+											'relative z-10 flex shrink-0 items-center justify-center rounded-full transition-all',
+											compact() ? 'h-5 w-5' : 'h-8 w-8',
+											dotClass(),
+											outlined() && 'ring-2 ring-offset-2 ring-offset-surface-base',
+										)}
+										aria-hidden="true"
+									>
+										<Show when={item.icon} fallback={<DefaultDotIcon status={status()} />}>
+											<span class={cn('flex items-center justify-center', compact() ? '[&>svg]:h-2.5 [&>svg]:w-2.5' : '[&>svg]:h-4 [&>svg]:w-4')}>
+												{item.icon}
+											</span>
+										</Show>
+									</div>
+
+									{/* Connector line */}
+									<Show when={showConnector() && !isLast()}>
+										<div
+											class={cn(
+												'flex-1 border-l-2 my-1',
+												connectorBorderStyle(),
+												item.color
+													? 'border-ink-200 dark:border-ink-700'
+													: statusConnectorClass[status()],
+											)}
+											style={{ 'min-height': compact() ? '1rem' : '1.5rem' }}
+											aria-hidden="true"
+										/>
+									</Show>
+								</div>
+
+								{/* Right side: content */}
+								<div
+									class={cn(
+										'min-w-0 flex-1',
+										!isLast() ? (compact() ? 'pb-4' : 'pb-6') : 'pb-0',
+										timeLeft() ? 'text-right' : '',
+									)}
+								>
+									{/* Title row */}
+									<div class={cn('flex items-start gap-2', timeLeft() ? 'flex-row-reverse' : 'flex-row')}>
+										<span class={cn('font-medium text-ink-900 leading-none', compact() ? 'text-sm' : 'text-sm')}>
+											{item.title}
+										</span>
+										<Show when={!timeLeft() && item.time}>
+											<span class="shrink-0 text-xs text-ink-400 mt-0.5">{item.time}</span>
+										</Show>
+									</div>
+
+									{/* Description */}
+									<Show when={item.description}>
+										<div class={cn('mt-1 text-ink-500 leading-relaxed', compact() ? 'text-xs' : 'text-sm')}>
+											{item.description}
+										</div>
+									</Show>
+
+									{/* Extra content slot */}
+									<Show when={item.content}>
+										<div class="mt-2">
+											{item.content}
+										</div>
+									</Show>
+								</div>
+							</li>
+						)
+					}}
+				</For>
+			</ol>
+		</div>
+	)
+}

package/src/components/data-display/TreeView.tsx

@@ -0,0 +1,172 @@
+import { type JSX, Show, For, createSignal, splitProps } from 'solid-js'
+import { ChevronRight } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+export interface TreeNode {
+	/** Unique identifier */
+	id: string
+	/** Display label */
+	label: JSX.Element
+	/** Optional icon shown before the label */
+	icon?: JSX.Element
+	/** Child nodes */
+	children?: TreeNode[]
+	/** Prevents selection and interaction */
+	disabled?: boolean
+}
+
+export interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {
+	/** Tree data */
+	nodes: TreeNode[]
+	/** Controlled selected node id */
+	selected?: string
+	/** Callback when a node is selected */
+	onSelect?: (id: string) => void
+	/** Default selected node id (uncontrolled) */
+	defaultSelected?: string
+	/** Controlled expanded node ids */
+	expanded?: string[]
+	/** Callback when expanded state changes */
+	onExpandedChange?: (ids: string[]) => void
+	/** Default expanded ids (uncontrolled) */
+	defaultExpanded?: string[]
+	/** Pixels of indentation per level. Default: 16. */
+	indent?: number
+	/** Show connecting lines between nodes. Default: true. */
+	showLines?: boolean
+}
+
+export function TreeView(props: TreeViewProps) {
+	const [local, others] = splitProps(props, [
+		'nodes',
+		'selected',
+		'onSelect',
+		'defaultSelected',
+		'expanded',
+		'onExpandedChange',
+		'defaultExpanded',
+		'indent',
+		'showLines',
+		'class',
+	])
+
+	const [internalSelected, setInternalSelected] = createSignal<string | undefined>(
+		local.defaultSelected,
+	)
+	const [internalExpanded, setInternalExpanded] = createSignal<string[]>(
+		local.defaultExpanded ?? [],
+	)
+
+	const selectedId = () => local.selected ?? internalSelected()
+	const expandedIds = () => local.expanded ?? internalExpanded()
+
+	const isSelected = (id: string) => selectedId() === id
+	const isExpanded = (id: string) => expandedIds().includes(id)
+
+	const handleSelect = (id: string) => {
+		if (local.selected === undefined) setInternalSelected(id)
+		local.onSelect?.(id)
+	}
+
+	const toggleExpand = (id: string) => {
+		const current = expandedIds()
+		const next = current.includes(id) ? current.filter((x) => x !== id) : [...current, id]
+		if (local.expanded === undefined) setInternalExpanded(next)
+		local.onExpandedChange?.(next)
+	}
+
+	const indent = () => local.indent ?? 16
+	const showLines = () => local.showLines !== false
+
+	const renderNodes = (nodes: TreeNode[], level = 0): JSX.Element => (
+		<ul role={level === 0 ? 'tree' : 'group'} class="list-none">
+			<For each={nodes}>
+				{(node) => {
+					const hasChildren = () => (node.children?.length ?? 0) > 0
+					const expanded = () => isExpanded(node.id)
+					const selected = () => isSelected(node.id)
+
+					return (
+						<li role="treeitem" aria-expanded={hasChildren() ? expanded() : undefined} aria-selected={selected()}>
+							<button
+								type="button"
+								disabled={node.disabled}
+								onClick={() => {
+									if (node.disabled) return
+									if (hasChildren()) toggleExpand(node.id)
+									handleSelect(node.id)
+								}}
+								onKeyDown={(e: KeyboardEvent) => {
+									if (node.disabled) return
+									if (e.key === 'ArrowRight' && hasChildren() && !expanded()) {
+										e.preventDefault()
+										toggleExpand(node.id)
+									} else if (e.key === 'ArrowLeft' && hasChildren() && expanded()) {
+										e.preventDefault()
+										toggleExpand(node.id)
+									} else if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault()
+										if (hasChildren()) toggleExpand(node.id)
+										handleSelect(node.id)
+									}
+								}}
+								class={cn(
+									'flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
+									'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+									selected()
+										? 'bg-primary-50 text-primary-700 font-medium dark:bg-primary-500/15 dark:text-primary-400'
+										: 'text-ink-700 hover:bg-surface-overlay hover:text-ink-900 dark:hover:text-ink-900',
+									node.disabled && 'cursor-not-allowed opacity-40',
+								)}
+								style={{ 'padding-left': `${level * indent() + 8}px` }}
+							>
+								{/* Expand/collapse chevron */}
+								<span class={cn('flex h-4 w-4 shrink-0 items-center justify-center')}>
+									<Show when={hasChildren()} fallback={<span class="h-4 w-4" />}>
+										<ChevronRight
+											class={cn(
+												'h-3.5 w-3.5 text-ink-400 transition-transform duration-150',
+												expanded() && 'rotate-90',
+											)}
+											aria-hidden="true"
+										/>
+									</Show>
+								</span>
+
+								{/* Node icon */}
+								<Show when={node.icon}>
+									<span class={cn('flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4', selected() ? 'text-primary-500' : 'text-ink-500')}>
+										{node.icon}
+									</span>
+								</Show>
+
+								{/* Label */}
+								<span class="min-w-0 truncate">{node.label}</span>
+							</button>
+
+							{/* Children */}
+							<Show when={hasChildren() && expanded()}>
+								<div
+									class={cn(
+										showLines() && level < 2
+											? 'relative ml-[calc(var(--indent-offset)+8px)] border-l border-ink-200 dark:border-ink-700 pl-0'
+											: '',
+									)}
+									style={{ '--indent-offset': `${level * indent() + 14}px` } as any}
+								>
+									{renderNodes(node.children!, level + 1)}
+								</div>
+							</Show>
+						</li>
+					)
+				}}
+			</For>
+		</ul>
+	)
+
+	return (
+		<div class={cn('select-none', local.class)} {...others}>
+			{renderNodes(local.nodes)}
+		</div>
+	)
+}

package/src/components/data-display/Video.tsx

@@ -0,0 +1,95 @@
+import { type JSX, createSignal, Show, splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export interface VideoProps {
+	/** Video source URL */
+	src: string
+	/** Poster image URL shown before playback */
+	poster?: string
+	/** Show native browser controls. Default: true */
+	controls?: boolean
+	/** Autoplay the video. Default: false. Note: forces muted=true to satisfy browser autoplay policy. */
+	autoplay?: boolean
+	/** Mute the video. Default: false */
+	muted?: boolean
+	/** Loop the video. Default: false */
+	loop?: boolean
+	/** CSS aspect-ratio value e.g. '16/9', '4/3', '1/1', '9/16'. Default: '16/9' */
+	aspectRatio?: string
+	/** Max width of the container (CSS value). Default: '100%' */
+	width?: string
+	/** Max height of the container (CSS value). Rarely needed with aspect-ratio. */
+	height?: string
+	/** Fallback content to render when the video fails to load */
+	fallback?: JSX.Element
+	/** Preload strategy. Default: 'metadata' */
+	preload?: 'none' | 'metadata' | 'auto'
+	/** Whether the video fills its container. Default: true */
+	fluid?: boolean
+	class?: string
+	/** Forwarded to the <video> element */
+	videoClass?: string
+}
+
+export function Video(props: VideoProps) {
+	const [local, others] = splitProps(props, [
+		'src', 'poster', 'controls', 'autoplay', 'muted', 'loop',
+		'aspectRatio', 'width', 'height', 'fallback', 'preload',
+		'fluid', 'class', 'videoClass',
+	])
+
+	const [error, setError] = createSignal(false)
+
+	const aspectRatio = () => local.aspectRatio ?? '16/9'
+	const fluid = () => local.fluid !== false
+
+	return (
+		<div
+			class={cn('relative overflow-hidden rounded-xl', local.class)}
+			style={{
+				'aspect-ratio': aspectRatio(),
+				'max-width': local.width ?? (fluid() ? '100%' : undefined),
+				'max-height': local.height,
+			}}
+		>
+			<Show
+				when={!error()}
+				fallback={
+					<div class="absolute inset-0 flex items-center justify-center bg-surface-raised">
+						<Show
+							when={local.fallback}
+							fallback={
+								<div class="flex flex-col items-center gap-3 p-6 text-center">
+									<div class="flex h-12 w-12 items-center justify-center rounded-full bg-surface-overlay">
+										<svg class="h-6 w-6 text-ink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M12 18.75H4.5a2.25 2.25 0 01-2.25-2.25V9m12.841 9.091L16.5 19.5m-1.409-1.409c.407-.164.841-.26 1.298-.26H19.5m-14.25 0A2.25 2.25 0 013 16.5V9.75m0 0A2.25 2.25 0 015.25 7.5H12M3 9.75l9-4.5" />
+										</svg>
+									</div>
+									<div>
+										<p class="text-sm font-medium text-ink-700">Video unavailable</p>
+										<p class="mt-0.5 text-xs text-ink-400">This video could not be loaded.</p>
+									</div>
+								</div>
+							}
+						>
+							{local.fallback}
+						</Show>
+					</div>
+				}
+			>
+				<video
+					class={cn('h-full w-full object-cover', local.videoClass)}
+					src={local.src}
+					poster={local.poster}
+					controls={local.controls !== false}
+					autoplay={local.autoplay}
+					muted={local.autoplay ? true : local.muted}
+					loop={local.loop}
+					preload={local.preload ?? 'metadata'}
+					onError={() => setError(true)}
+					playsinline
+				/>
+			</Show>
+		</div>
+	)
+}

package/src/components/data-display/avatar-utils.ts

@@ -0,0 +1,32 @@
+import type { AvatarShape, SizeKey } from '../../types/avatar-types'
+
+export const shapeClasses: Record<AvatarShape, string> = {
+	circle: 'rounded-full',
+	rounded: 'rounded-lg',
+	square: 'rounded-none',
+}
+
+export const avatarSizeClasses: Record<SizeKey, string> = {
+	sm: 'h-8 w-8 text-sm',
+	md: 'h-10 w-10 text-sm',
+	lg: 'h-12 w-12 text-base',
+}
+
+/** Neutral avatar background/text — shared between Avatar and AvatarGroup overflow pill. */
+export const neutralColorClass = 'bg-ink-200 text-ink-600 dark:bg-ink-700 dark:text-ink-200'
+
+/**
+ * Initials from a full name: first letter of first name + first letter of last name.
+ * Treats the last word as last name and everything before as first name.
+ * "Jenny Lee Smith" → "JS", "Alex" → "A", "Alex Chen" → "AC".
+ */
+export function getInitials(name: string): string {
+	const trimmed = name.trim()
+	if (!trimmed) return '?'
+	const parts = trimmed.split(/\s+/).filter(Boolean)
+	if (parts.length === 0) return '?'
+	if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+	const first = parts[0].charAt(0)
+	const last = parts[parts.length - 1].charAt(0)
+	return (first + last).toUpperCase()
+}

package/src/components/data-display/index.ts

@@ -0,0 +1,81 @@
+/** Data Display (sidebar) */
+export { Avatar } from './Avatar'
+export type { AvatarProps, AvatarShape, AvatarRing, AvatarColor, AvatarBadgePlacement } from './Avatar'
+export type { SizeKey } from '../../types/avatar-types'
+
+export { ColorSwatch } from './ColorSwatch'
+export type { ColorSwatchProps, ColorSwatchVariant } from './ColorSwatch'
+
+export { Persona } from './Persona'
+export type { PersonaProps } from './Persona'
+
+export { Badge } from './Badge'
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge'
+
+export { AvatarGroup } from './AvatarGroup'
+export type { AvatarGroupProps, AvatarGroupItem, AvatarStacking } from './AvatarGroup'
+
+export { TablePanel } from '../layout/TablePanel'
+export type { TablePanelProps } from '../layout/TablePanel'
+
+export { TableView, useTableView, emptyFilterGroup } from '../layout/TableView'
+export type { TableViewProps, TableViewContextValue } from '../layout/TableView'
+export type { TableViewConfig, ViewConfig } from '../layout/TableView/types'
+
+export { Carousel } from './Carousel'
+export type { CarouselProps, CarouselSlide } from './Carousel'
+export { Chart } from '../charts/Chart'
+export type { ChartProps, ChartData, ChartDataset, ChartType, ScatterPoint, BubblePoint } from '../charts/Chart'
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'
+export { Tag } from './Tag'
+export type { TagProps, TagVariant, TagSize } from './Tag'
+
+export { Kbd, KbdShortcut, KEY } from './Kbd'
+export type { KbdProps, KbdShortcutProps, KbdVariant, KbdSize } from './Kbd'
+
+export { StatCard } from './StatCard'
+export type { StatCardProps } from './StatCard'
+
+export { Timeline } from './Timeline'
+export type { TimelineProps, TimelineItem, TimelineItemStatus, TimelineVariant, TimelineConnector } from './Timeline'
+
+export { TreeView } from './TreeView'
+export type { TreeViewProps, TreeNode } from './TreeView'
+
+export { Video } from './Video'
+export type { VideoProps } from './Video'
+export { Sparkline } from '../charts/Sparkline'
+export type { SparklineProps } from '../charts/Sparkline'
+export { DataTable, TABLE_CONTAINER_CLASS } from './DataTable'
+export type {
+	ColumnDef,
+	DataTableProps,
+	DataTablePagination,
+	DataTablePagingProps,
+	DataTableGroupByProps,
+	DataTableSearchProps,
+	DataTableButtonProps,
+	DataTableAddRowProps,
+	DataTableEditModalProps,
+	DataTableDeleteDialogProps,
+} from './DataTable'
+export {
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from './Table'
+export type {
+	TableBodyProps,
+	TableCellProps,
+	TableFooterProps,
+	TableHeadProps,
+	TableHeaderProps,
+	TableProps,
+	TableRowProps,
+} from './Table'
+