@torch-ui/solid 0.1.3

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

@@ -0,0 +1,338 @@
+import { type JSX, Show, splitProps } from 'solid-js'
+
+import { cn } from '../../utilities/classNames'
+
+
+
+export interface StatCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+
+	label: string
+
+	/** Optional subtitle or category below the label (e.g. "Travel and tourism"). */
+
+	subtitle?: string
+
+	/** Optional icon (e.g. app logo) shown at top left. */
+
+	icon?: JSX.Element
+
+	/** Accessible label for the icon when it conveys meaning. When set, icon wrapper gets role="img" + aria-label. When omitted, the wrapper is transparent — the icon child controls its own accessibility. */
+
+	iconLabel?: string
+
+	/** Optional content at top right (e.g. Tag or "Connect" button). */
+
+	topRight?: JSX.Element
+
+	value?: string | number | null
+
+	helperText?: string
+
+	trendLabel?: string
+
+	/** Default: 'positive' (emerald). */
+
+	trendVariant?: 'positive' | 'neutral' | 'negative'
+
+	trendIcon?: JSX.Element
+
+	emptyText?: string
+
+	/** Optional chart or sparkline. Use chartPosition to place under the trend or to the right. */
+
+	chart?: JSX.Element
+
+	/** Where to render the chart: under the trend (default) or in a column to the right of the value/trend. */
+
+	chartPosition?: 'under' | 'right'
+
+	/** When set, the chart wrapper gets role="img" + aria-label instead of aria-hidden. The chart child should be decorative (aria-hidden) to avoid duplicate announcements. */
+
+	chartA11yLabel?: string
+
+}
+
+
+
+export function StatCard(props: StatCardProps) {
+
+	const [local, others] = splitProps(props, [
+
+		'label',
+
+		'subtitle',
+
+		'icon',
+
+		'topRight',
+
+		'value',
+
+		'helperText',
+
+		'trendLabel',
+
+		'trendVariant',
+
+		'trendIcon',
+
+		'emptyText',
+
+		'chart',
+
+		'chartPosition',
+
+		'chartA11yLabel',
+
+		'iconLabel',
+
+		'class',
+
+	])
+
+
+
+	const chartOnRight = () => local.chart != null && local.chartPosition === 'right'
+
+	const hasHeaderContent = () => local.icon != null || local.topRight != null
+
+	const contentMt = () => (hasHeaderContent() ? 'mt-5' : 'mt-2')
+
+	const hasValue = () => local.value != null && local.value !== ''
+
+
+
+	// Default: positive (emerald)
+
+	const trendClasses = () => {
+
+		if (local.trendVariant === 'negative') return 'text-red-600 dark:text-red-400'
+
+		if (local.trendVariant === 'neutral') return 'text-ink-600'
+
+		return 'text-emerald-600 dark:text-emerald-400'
+
+	}
+
+
+
+	/** Value or empty-state placeholder. `compact` uses text-2xl sm:text-3xl for the right-chart layout. */
+
+	const ValueOrEmpty = (p: { compact?: boolean }) => (
+
+		<Show
+
+			when={hasValue()}
+
+			fallback={
+
+				<div class="text-xs font-normal text-ink-400">
+
+					{local.emptyText ?? 'No data yet'}
+
+				</div>
+
+			}
+
+		>
+
+			<div class={cn(
+
+				'font-bold tracking-tight text-ink-900',
+
+				p.compact ? 'text-2xl sm:text-3xl' : 'text-3xl',
+
+			)}>
+
+				{local.value}
+
+			</div>
+
+		</Show>
+
+	)
+
+
+
+	/** Helper text + trend label/icon. `gap` controls top margin between value and trend. */
+
+	const TrendBlock = (p: { gap?: string }) => (
+
+		<>
+
+			<Show when={local.helperText}>
+
+				<div class="mt-1 text-sm text-ink-500">{local.helperText}</div>
+
+			</Show>
+
+			<Show when={local.trendLabel}>
+
+				<div class={cn(p.gap ?? 'mt-3', 'flex items-center gap-1.5 text-sm font-medium')}>
+
+					<Show when={local.trendIcon}>
+
+						<span class={cn('flex shrink-0', trendClasses())}>{local.trendIcon}</span>
+
+					</Show>
+
+					<span class={cn(trendClasses())}>{local.trendLabel}</span>
+
+				</div>
+
+			</Show>
+
+		</>
+
+	)
+
+
+
+	return (
+
+		<div
+
+			class={cn(
+
+				'rounded-2xl border border-surface-border bg-surface-raised p-5 shadow-sm',
+
+				local.class,
+
+			)}
+
+			{...others}
+
+		>
+
+			{/* Top row: optional icon + label, optional topRight */}
+
+			<div class="flex items-start justify-between gap-3">
+
+				<div class="min-w-0 flex-1">
+
+					<div class="flex items-center gap-2">
+
+						<Show when={local.icon}>
+
+							<span
+
+								class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg text-[0]"
+
+								role={local.iconLabel ? 'img' : undefined}
+
+								aria-label={local.iconLabel}
+
+							>
+
+								{local.icon}
+
+							</span>
+
+						</Show>
+
+						<div class="min-w-0">
+
+							<div class="text-sm font-semibold text-ink-700">{local.label}</div>
+
+							<Show when={local.subtitle}>
+
+								<div class="mt-0.5 text-xs text-ink-500">{local.subtitle}</div>
+
+							</Show>
+
+						</div>
+
+					</div>
+
+				</div>
+
+				<Show when={local.topRight}>
+
+					<div class="shrink-0">{local.topRight}</div>
+
+				</Show>
+
+			</div>
+
+
+
+			{/* Main content: when chart on right, use two columns; otherwise single column */}
+
+			<Show
+
+				when={chartOnRight()}
+
+				fallback={
+
+					<>
+
+						<div class={contentMt()}>
+
+							<ValueOrEmpty />
+
+						</div>
+
+						<TrendBlock />
+
+						<Show when={local.chart != null && local.chartPosition !== 'right'}>
+
+							<div
+
+								class="mt-3 h-10 w-full min-w-0"
+
+								aria-hidden={local.chartA11yLabel ? undefined : true}
+
+								role={local.chartA11yLabel ? 'img' : undefined}
+
+								aria-label={local.chartA11yLabel}
+
+							>
+
+								{local.chart}
+
+							</div>
+
+						</Show>
+
+					</>
+
+				}
+
+			>
+
+				<div class={cn(contentMt(), 'flex gap-4')}>
+
+					<div class="min-w-0 flex-1">
+
+						<ValueOrEmpty compact />
+
+						<TrendBlock gap="mt-2" />
+
+					</div>
+
+					<div
+
+						class="h-14 w-24 shrink-0 sm:w-32"
+
+						aria-hidden={local.chartA11yLabel ? undefined : true}
+
+						role={local.chartA11yLabel ? 'img' : undefined}
+
+						aria-label={local.chartA11yLabel}
+
+					>
+
+						{local.chart}
+
+					</div>
+
+				</div>
+
+			</Show>
+
+		</div>
+
+	)
+
+}
+

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

@@ -0,0 +1,147 @@
+import { type JSX, Show, splitProps, createContext, useContext } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+type TableSection = 'head' | 'body' | 'foot'
+
+const TableContext = createContext<boolean>(false)
+/** Which table section a row lives in. Hover/stripe only apply to 'body' rows. */
+const TableSectionContext = createContext<TableSection | undefined>(undefined)
+
+export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+	/** When true, even rows get a subtle background (striped). Default: false.
+	 * Note: striping uses CSS `even:` which counts every `<tr>` in the `<tbody>`,
+	 * including group headers, add-form rows, etc. If you mix data rows with non-data
+	 * rows, stripes will be based on DOM order, not logical data-row index. */
+	striped?: boolean
+	/** Accessible caption for the table. Rendered as a visually-hidden `<caption>` by default. Pass JSX for a visible caption. */
+	caption?: JSX.Element | string
+}
+
+export function Table(props: TableProps) {
+	const [local, others] = splitProps(props, ['class', 'striped', 'caption', 'children'])
+	const striped = () => local.striped === true
+	return (
+		<TableContext.Provider value={striped()}>
+			<table
+				class={cn('w-full text-sm text-ink-900', local.class)}
+				{...others}
+			>
+				<Show when={local.caption != null}>
+					<caption class={typeof local.caption === 'string' ? 'sr-only' : undefined}>
+						{local.caption}
+					</caption>
+				</Show>
+				{local.children}
+			</table>
+		</TableContext.Provider>
+	)
+}
+
+export interface TableHeaderProps
+	extends JSX.HTMLAttributes<HTMLTableSectionElement> {}
+
+/**
+ * Renders `<thead>` with sticky positioning.
+ * Sticky header requires a vertically scrollable ancestor (e.g. `max-h-* overflow-y-auto`).
+ */
+export function TableHeader(props: TableHeaderProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<thead
+			class={cn(
+				'sticky top-0 z-10 border-b border-surface-border bg-surface-raised',
+				local.class,
+			)}
+			{...others}
+		>
+			<TableSectionContext.Provider value={'head'}>{local.children}</TableSectionContext.Provider>
+		</thead>
+	)
+}
+
+export interface TableBodyProps
+	extends JSX.HTMLAttributes<HTMLTableSectionElement> {}
+
+export function TableBody(props: TableBodyProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<tbody
+			class={cn(
+				'divide-y divide-surface-border bg-surface-base',
+				local.class,
+			)}
+			{...others}
+		>
+			<TableSectionContext.Provider value={'body'}>{local.children}</TableSectionContext.Provider>
+		</tbody>
+	)
+}
+
+export interface TableFooterProps
+	extends JSX.HTMLAttributes<HTMLTableSectionElement> {}
+
+export function TableFooter(props: TableFooterProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<tfoot
+			class={cn(
+				'border-t border-surface-border bg-surface-raised',
+				local.class,
+			)}
+			{...others}
+		>
+			<TableSectionContext.Provider value={'foot'}>{local.children}</TableSectionContext.Provider>
+		</tfoot>
+	)
+}
+
+export interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {
+	/** When false, hover background is not applied (e.g. for empty state, loading, or group header rows). Default true for body rows. */
+	hover?: boolean
+}
+
+export function TableRow(props: TableRowProps) {
+	const [local, others] = splitProps(props, ['class', 'hover'])
+	const striped = useContext(TableContext) ?? false
+	const section = useContext(TableSectionContext)
+	const inBody = section === 'body'
+	const allowHover = () => local.hover !== false && inBody
+	return (
+		<tr
+			class={cn(
+				'transition-colors',
+				inBody && striped ? 'even:bg-surface-overlay' : '',
+				allowHover() ? 'hover:bg-surface-dim/60' : '',
+				local.class,
+			)}
+			{...others}
+		/>
+	)
+}
+
+export interface TableHeadProps
+	extends JSX.ThHTMLAttributes<HTMLTableCellElement> {}
+
+export function TableHead(props: TableHeadProps) {
+	const [local, others] = splitProps(props, ['class', 'scope'])
+	return (
+		<th
+			scope={local.scope ?? 'col'}
+			class={cn(
+				'px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.12em] text-ink-500',
+				local.class,
+			)}
+			{...others}
+		/>
+	)
+}
+
+export interface TableCellProps
+	extends JSX.TdHTMLAttributes<HTMLTableCellElement> {}
+
+export function TableCell(props: TableCellProps) {
+	const [local, others] = splitProps(props, ['class'])
+	return (
+		<td class={cn('px-4 py-3 align-middle text-sm text-ink-900', local.class)} {...others} />
+	)
+}

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

@@ -0,0 +1,91 @@
+import { type JSX, splitProps, Show, createMemo } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type TagVariant =
+	| 'neutral'
+	| 'primary'
+	| 'success'
+	| 'warning'
+	| 'danger'
+	| 'info'
+
+export type TagSize = 'sm' | 'md'
+
+export interface TagProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'color'> {
+	/** Semantic color variant. Ignored when color is set. Default: neutral. */
+	variant?: TagVariant
+	/** Tag size. Default: md. */
+	size?: TagSize
+	/** CSS color for a status indicator dot before children (e.g. "#22c55e"). */
+	statusColor?: string
+	/** Accessible label for the status dot (e.g. "Active"). Rendered as sr-only text. When omitted, the dot is purely decorative. */
+	statusLabel?: string
+	/** Arbitrary CSS color for a fully custom tag. Sets bg (10% opacity), border (25% opacity), and text color. Overrides variant. */
+	color?: string
+}
+
+const tagVariants: Record<TagVariant, string> = {
+	neutral:
+		'bg-ink-100 text-ink-700 border-ink-200',
+	primary:
+		'bg-primary-50 text-primary-700 border-primary-100 dark:bg-primary-500/20 dark:text-primary-200 dark:border-primary-500/40',
+	success:
+		'bg-success-50 text-success-700 border-success-100 dark:bg-success-950 dark:text-success-200 dark:border-success-800',
+	warning:
+		'bg-warning-50 text-warning-700 border-warning-100 dark:bg-warning-950 dark:text-warning-200 dark:border-warning-800',
+	danger:
+		'bg-danger-50 text-danger-700 border-danger-100 dark:bg-danger-950 dark:text-danger-200 dark:border-danger-800',
+	info:
+		'bg-info-50 text-info-700 border-info-100 dark:bg-info-950 dark:text-info-200 dark:border-info-800',
+}
+
+const tagSizes: Record<TagSize, string> = {
+	sm: 'px-2 py-0.5 text-[11px]',
+	md: 'px-2.5 py-0.5 text-xs',
+}
+
+export function Tag(props: TagProps) {
+	const [local, others] = splitProps(props, ['variant', 'size', 'statusColor', 'statusLabel', 'color', 'class', 'style', 'children'])
+	const variant = () => local.variant ?? 'neutral'
+	const size = () => local.size ?? 'md'
+
+	const customStyle = createMemo((): JSX.CSSProperties => {
+		const c = local.color
+		if (!c) return {}
+		return {
+			'background-color': `color-mix(in srgb, ${c} 10%, transparent)`,
+			'border-color': `color-mix(in srgb, ${c} 25%, transparent)`,
+			color: c,
+		}
+	})
+
+	const mergedStyle = createMemo((): JSX.CSSProperties => {
+		const base = customStyle()
+		const s = local.style
+		return typeof s === 'object' && s != null ? { ...base, ...s } as JSX.CSSProperties : base
+	})
+
+	return (
+		<span
+			class={cn(
+				'inline-flex items-center gap-1 rounded-full border font-medium',
+				!local.color && tagVariants[variant()],
+				tagSizes[size()],
+				local.class,
+			)}
+			style={mergedStyle()}
+			{...others}
+		>
+			<Show when={local.statusColor}>
+				<span
+					class="size-2 shrink-0 rounded-full ring-1 ring-ink-200/80 dark:ring-ink-500/80"
+					style={{ 'background-color': local.statusColor }}
+					aria-hidden={local.statusLabel ? undefined : 'true'}
+					role={local.statusLabel ? 'img' : undefined}
+					aria-label={local.statusLabel}
+				/>
+			</Show>
+			{local.children}
+		</span>
+	)
+}