@rokkit/ui 1.0.0-next.125 → 1.0.0-next.128

package/src/components/Switch.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { SwitchProps, SwitchItem } from '../types/switch.js'
+	import { ProxyItem } from '@rokkit/states'
+
+	const DEFAULT_OPTIONS: [SwitchItem, SwitchItem] = [false, true]
+
+	let {
+		options = DEFAULT_OPTIONS,
+		fields: userFields,
+		value = $bindable(),
+		onchange,
+		showLabels = false,
+		size = 'md',
+		disabled = false,
+		class: className = ''
+	}: SwitchProps = $props()
+
+	let offProxy = $derived(new ProxyItem(options[0], userFields))
+	let onProxy = $derived(new ProxyItem(options[1], userFields))
+	let isChecked = $derived(value === onProxy.value)
+	let currentProxy = $derived(isChecked ? onProxy : offProxy)
+
+	function toggle() {
+		if (disabled) return
+		const next = isChecked ? offProxy : onProxy
+		const nextValue = next.value
+		value = nextValue
+		onchange?.(nextValue, next.original as SwitchItem)
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		switch (event.key) {
+			case ' ':
+			case 'Enter':
+				event.preventDefault()
+				toggle()
+				break
+			case 'ArrowRight':
+				event.preventDefault()
+				if (!isChecked) toggle()
+				break
+			case 'ArrowLeft':
+				event.preventDefault()
+				if (isChecked) toggle()
+				break
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="switch"
+	data-switch
+	data-switch-size={size}
+	data-switch-disabled={disabled || undefined}
+	aria-checked={isChecked}
+	aria-label={currentProxy.label || undefined}
+	title={currentProxy.get('subtext') ?? currentProxy.label ?? undefined}
+	{disabled}
+	class={className || undefined}
+	onclick={toggle}
+	onkeydown={handleKeyDown}
+>
+	<span data-switch-track>
+		<span data-switch-thumb>
+			{#if currentProxy.get('icon')}
+				<span data-switch-icon class={currentProxy.get('icon')} aria-hidden="true"></span>
+			{/if}
+		</span>
+	</span>
+	{#if showLabels && currentProxy.label}
+		<span data-switch-label>{currentProxy.label}</span>
+	{/if}
+</button>

package/src/components/Table.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import type { TableProps, TableColumn, TableSortIcons } from '../types/table.js'
+	import { defaultTableSortIcons } from '../types/table.js'
+	import { TableController } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import { untrack } from 'svelte'
+
+	let {
+		data = [],
+		columns: userColumns,
+		value,
+		caption,
+		size = 'md',
+		striped = false,
+		disabled = false,
+		fields: userFields,
+		onselect,
+		onsort,
+		class: className = '',
+		icons: userIcons,
+		header: headerSnippet,
+		row: rowSnippet,
+		cell: cellSnippet,
+		empty: emptySnippet
+	}: TableProps = $props()
+
+	const icons = $derived<TableSortIcons>({ ...defaultTableSortIcons, ...userIcons })
+
+	// ─── Controller ─────────────────────────────────────────────────
+
+	let controller = untrack(() => new TableController(data, {
+		columns: userColumns,
+		fields: userFields,
+		value
+	}))
+	let tableRef = $state<HTMLElement | null>(null)
+
+	// Sync data changes to controller
+	$effect(() => {
+		controller.update(data)
+	})
+
+	// Sync columns changes
+	$effect(() => {
+		if (userColumns) {
+			controller.columns = userColumns.map((c) => ({
+				sortable: true,
+				sorted: 'none',
+				...c
+			}))
+		}
+	})
+
+	// ─── Focus management ───────────────────────────────────────────
+
+	$effect(() => {
+		if (!tableRef) return
+		const el = tableRef
+
+		function onAction(event: Event) {
+			const detail = (event as CustomEvent).detail
+
+			if (detail.name === 'move') {
+				const key = controller.focusedKey
+				if (key) {
+					const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+					if (target && target !== document.activeElement) {
+						target.focus()
+						target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+					}
+				}
+			}
+
+			if (detail.name === 'select') {
+				handleSelectAction()
+			}
+		}
+
+		el.addEventListener('action', onAction)
+		return () => el.removeEventListener('action', onAction)
+	})
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = event.target as HTMLElement
+		if (!target) return
+		const path = target.dataset.path
+		if (path !== undefined) {
+			controller.moveTo(path)
+		}
+	}
+
+	function handleSelectAction() {
+		const key = controller.focusedKey
+		if (!key) return
+
+		const proxy = controller.lookup.get(key)
+		if (!proxy) return
+
+		if (!disabled) {
+			onselect?.(proxy.value, proxy.value as Record<string, unknown>)
+		}
+	}
+
+	// ─── Sort ───────────────────────────────────────────────────────
+
+	function handleSort(event: MouseEvent, column: TableColumn) {
+		if (column.sortable === false || disabled) return
+		controller.sortBy(column.name, event.shiftKey)
+		onsort?.(controller.sortState)
+	}
+
+	// ─── Cell rendering helpers ─────────────────────────────────────
+
+	function getCellValue(row: Record<string, unknown>, column: TableColumn): unknown {
+		const fieldName = column.fields?.text ?? column.name
+		return row[fieldName]
+	}
+
+	function formatCellValue(row: Record<string, unknown>, column: TableColumn): string {
+		const value = getCellValue(row, column)
+		if (column.formatter) return column.formatter(value, row)
+		return value !== null && value !== undefined ? String(value) : ''
+	}
+
+	function getCellIcon(row: Record<string, unknown>, column: TableColumn): string | null {
+		if (!column.fields?.icon) return null
+		const iconValue = row[column.fields.icon]
+		if (!iconValue) return null
+		if (column.iconFormatter) return column.iconFormatter(iconValue)
+		return String(iconValue)
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	bind:this={tableRef}
+	data-table
+	data-size={size}
+	data-disabled={disabled || undefined}
+	class={className || undefined}
+	onfocusin={handleFocusIn}
+	use:navigator={{ wrapper: controller, orientation: 'vertical' }}
+>
+	<table
+		role="grid"
+		aria-label={caption}
+		data-striped={striped || undefined}
+	>
+		{#if caption}
+			<caption data-table-caption>{caption}</caption>
+		{/if}
+
+		<thead data-table-header>
+			{#if headerSnippet}
+				{@render headerSnippet(controller.columns, controller.sortState)}
+			{:else}
+				<tr>
+					{#each controller.columns as column (column.name)}
+						<th
+							data-table-header-cell
+							data-column={column.name}
+							data-sortable={column.sortable !== false || undefined}
+							data-sort-order={column.sorted ?? 'none'}
+							scope="col"
+							aria-sort={column.sorted === 'ascending' ? 'ascending' : column.sorted === 'descending' ? 'descending' : 'none'}
+							style:width={column.width}
+							style:text-align={column.align}
+							onclick={(e) => handleSort(e, column)}
+						>
+							<span data-table-header-text>{column.label ?? column.name}</span>
+							{#if column.sortable !== false}
+								{@const sortIcon = icons[column.sorted ?? 'none'] ?? icons.none}
+								<span data-table-sort-icon class={sortIcon} aria-hidden="true"></span>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			{/if}
+		</thead>
+
+		<tbody data-table-body>
+			{#if controller.data.length === 0}
+				{#if emptySnippet}
+					<tr data-table-empty-row>
+						<td colspan={controller.columns.length}>
+							{@render emptySnippet()}
+						</td>
+					</tr>
+				{:else}
+					<tr data-table-empty-row>
+						<td data-table-empty colspan={controller.columns.length}>
+							No data
+						</td>
+					</tr>
+				{/if}
+			{:else}
+				{#each controller.data as entry, rowIndex (entry.key)}
+					{@const row = entry.value as Record<string, unknown>}
+					{@const isSelected = controller.selectedKeys.has(entry.key)}
+					{@const isFocused = controller.focusedKey === entry.key}
+					{#if rowSnippet}
+						{@render rowSnippet(row, controller.columns, rowIndex, isSelected)}
+					{:else}
+						<tr
+							data-table-row
+							data-path={entry.key}
+							data-selected={isSelected || undefined}
+							data-focused={isFocused || undefined}
+							aria-selected={isSelected}
+							aria-rowindex={rowIndex + 1}
+							tabindex={isFocused ? 0 : -1}
+						>
+							{#each controller.columns as column (column.name)}
+								{#if cellSnippet}
+									<td
+										data-table-cell
+										data-column={column.name}
+										style:text-align={column.align}
+									>
+										{@render cellSnippet(getCellValue(row, column), column, row)}
+									</td>
+								{:else}
+									{@const cellIcon = getCellIcon(row, column)}
+									<td
+										data-table-cell
+										data-column={column.name}
+										style:text-align={column.align}
+									>
+										{#if cellIcon}
+											<span data-cell-icon class={cellIcon} aria-hidden="true"></span>
+										{/if}
+										<span data-cell-value>{formatCellValue(row, column)}</span>
+									</td>
+								{/if}
+							{/each}
+						</tr>
+					{/if}
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>

package/src/components/Tabs.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	/**
+	 * Tabs — Wrapper + Navigator + ProxyItem implementation.
+	 *
+	 * Architecture:
+	 *   Wrapper       — owns focusedKey $state + flatView $derived
+	 *   Navigator     — attaches DOM event handlers, calls wrapper[action](path)
+	 *                   owns focus + scrollIntoView after every keyboard action
+	 *   flatView loop — single flat {#each} for tab triggers
+	 *
+	 * Snippet customization:
+	 *   itemContent   — replaces inner content of <button> for tab triggers
+	 *   tabPanel      — replaces panel content
+	 *   [named]       — per-item override via item.snippet = 'name'; falls back to itemContent
+	 *   empty         — rendered when no options
+	 *
+	 * Tab panels are rendered separately from triggers. Only the active panel
+	 * receives data-panel-active. Navigator ignores panels (no data-path on them).
+	 */
+	// @ts-nocheck
+	import type { TabsProps } from '../types/tabs.js'
+	import type { ProxyItem } from '@rokkit/states'
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+	import { resolveSnippet, ITEM_SNIPPET, DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	let {
+		options = [],
+		fields: userFields = {},
+		value = $bindable(),
+		orientation = 'horizontal',
+		position = 'before',
+		align = 'start',
+		name = 'tabs',
+		editable = false,
+		placeholder = 'Select a tab to view its content.',
+		disabled = false,
+		labels: userLabels = {},
+		class: className = '',
+		onchange,
+		onselect,
+		onadd,
+		onremove,
+		...snippets
+	}: TabsProps & { labels?: Record<string, string>; [key: string]: unknown } = $props()
+
+	const labels = $derived({ ...messages.current.tabs, ...userLabels })
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, {	onchange, onselect }))
+
+	// ─── Navigator ────────────────────────────────────────────────────────────
+
+	let containerRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!containerRef) return
+		const nav = new Navigator(containerRef, wrapper, { orientation })
+		return () => nav.destroy()
+	})
+
+	// ─── Sync external value → focused key ────────────────────────────────────
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	// ─── Editable handlers ────────────────────────────────────────────────────
+
+	function handleAdd() {
+		onadd?.()
+	}
+
+	function handleRemove(proxy: ProxyItem) {
+		onremove?.(proxy.value)
+	}
+</script>
+
+{#snippet defaultTabContent(proxy: ProxyItem)}
+	{#if proxy.get('icon')}
+		<span data-tabs-icon class={proxy.get('icon')} aria-hidden="true"></span>
+	{/if}
+	<span data-tabs-label>{proxy.label}</span>
+	{#if editable}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<span
+			data-tabs-remove
+			role="button"
+			tabindex="-1"
+			aria-label={labels.remove}
+			onclick={(e) => { e.stopPropagation(); handleRemove(proxy) }}
+			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); handleRemove(proxy) } }}
+		>
+			<span class={DEFAULT_STATE_ICONS.action.close} aria-hidden="true"></span>
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet defaultPanel(proxy: ProxyItem)}
+	<div data-tabs-content>
+		{proxy.get('content')}
+	</div>
+{/snippet}
+
+{#snippet defaultEmpty()}
+	No tabs available.
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={containerRef}
+	data-tabs
+	data-orientation={orientation}
+	data-position={position}
+	data-align={align}
+	data-disabled={disabled || undefined}
+	class={className || undefined}
+	aria-label={name}
+>
+	{#if options.length === 0}
+		<div data-tabs-empty>
+			{#if snippets.empty}
+				{@render snippets.empty()}
+			{:else}
+				{@render defaultEmpty()}
+			{/if}
+		</div>
+	{:else}
+		<div data-tabs-list role="tablist" aria-orientation={orientation}>
+			{#each wrapper.flatView as node (node.key)}
+				{@const proxy = node.proxy}
+				{@const sel = proxy.value === value}
+				{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
+
+				<button
+					type="button"
+					data-tabs-trigger
+					data-path={node.key}
+					data-selected={sel || undefined}
+					data-disabled={proxy.disabled || undefined}
+					role="tab"
+					aria-selected={sel}
+					aria-label={proxy.get('label') || proxy.label}
+					disabled={proxy.disabled || disabled}
+				>
+					{#if content}
+						{@render content(proxy, sel)}
+					{:else}
+						{@render defaultTabContent(proxy)}
+					{/if}
+				</button>
+			{/each}
+			{#if editable}
+				<button
+					type="button"
+					data-tabs-add
+					aria-label={labels.add}
+					onclick={handleAdd}
+				>
+					<span class="i-lucide:plus" aria-hidden="true"></span>
+				</button>
+			{/if}
+		</div>
+
+		{#each wrapper.flatView as node (node.key)}
+			{@const proxy = node.proxy}
+			{@const active = proxy.value === value}
+
+			<div
+				data-tabs-panel
+				data-panel-active={active || undefined}
+				role="tabpanel"
+				id="tab-panel-{node.key}"
+				aria-labelledby="tab-{node.key}"
+			>
+				{#if snippets.tabPanel}
+					{@render snippets.tabPanel(proxy)}
+				{:else}
+					{@render defaultPanel(proxy)}
+				{/if}
+			</div>
+		{/each}
+
+		{#if value === undefined}
+			<div data-tabs-placeholder>
+				{placeholder}
+			</div>
+		{/if}
+	{/if}
+</div>

package/src/components/Tilt.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface TiltProps {
+		/** Maximum rotation angle in degrees (default: 10) */
+		maxRotation?: number
+		/** Whether to adjust brightness based on mouse Y position */
+		setBrightness?: boolean
+		/** CSS perspective value in pixels (default: 600) */
+		perspective?: number
+		/** Additional CSS class */
+		class?: string
+		children?: Snippet
+	}
+
+	const {
+		maxRotation = 10,
+		setBrightness = false,
+		perspective = 600,
+		class: className = '',
+		children
+	}: TiltProps = $props()
+
+	let width = $state(0)
+	let height = $state(0)
+
+	let rotateX = $state(0)
+	let rotateY = $state(0)
+	let brightness = $state(1)
+
+	/** Linear interpolation: maps value from [0, max] to [rangeMin, rangeMax] */
+	function lerp(value: number, max: number, rangeMin: number, rangeMax: number): number {
+		if (max === 0) return rangeMin
+		return rangeMin + (value / max) * (rangeMax - rangeMin)
+	}
+
+	function onMouseMove(e: MouseEvent) {
+		rotateY = lerp(e.offsetX, width, maxRotation, -maxRotation)
+		rotateX = lerp(e.offsetY, height, -maxRotation, maxRotation)
+
+		if (setBrightness) {
+			brightness = lerp(e.offsetY, height, 2.0, 1.0)
+		}
+	}
+
+	function onMouseLeave() {
+		rotateX = 0
+		rotateY = 0
+		brightness = 1
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	data-tilt
+	data-tilt-brightness={setBrightness || undefined}
+	class={className || undefined}
+	style:--tilt-perspective="{perspective}px"
+	style:--tilt-rotate-x="{rotateX}deg"
+	style:--tilt-rotate-y="{rotateY}deg"
+	style:--tilt-brightness={brightness}
+	bind:clientWidth={width}
+	bind:clientHeight={height}
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+>
+	{@render children?.()}
+</div>

package/src/components/Timeline.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { TimelineProps } from '../types/timeline.js'
+	import { defaultTimelineFields, defaultTimelineIcons } from '../types/timeline.js'
+	import { ProxyItem } from '@rokkit/states'
+
+	let {
+		items = [],
+		fields: userFields,
+		icons: userIcons,
+		class: className = '',
+		content
+	}: TimelineProps = $props()
+
+	const fields = $derived({ ...defaultTimelineFields, ...userFields })
+	const icons = $derived({ ...defaultTimelineIcons, ...userIcons })
+</script>
+
+<div data-timeline class={className || undefined} role="list">
+	{#each items as item, index (index)}
+		{@const proxy = new ProxyItem(item, fields)}
+		{@const text = proxy.label}
+		{@const icon = proxy.get('icon')}
+		{@const description = proxy.get('subtext')}
+		{@const completed = Boolean(item.completed)}
+		{@const active = Boolean(item.active)}
+
+		<div
+			data-timeline-item
+			data-completed={completed || undefined}
+			data-active={active || undefined}
+			role="listitem"
+		>
+			<div data-timeline-marker aria-hidden="true">
+				<div data-timeline-circle>
+					{#if completed}
+						<span class={icons.completed}></span>
+					{:else if icon}
+						<span class={icon}></span>
+					{:else}
+						{index + 1}
+					{/if}
+				</div>
+				{#if index < items.length - 1}
+					<div data-timeline-connector></div>
+				{/if}
+			</div>
+
+			<div data-timeline-body>
+				{#if text}
+					<div data-timeline-title>{text}</div>
+				{/if}
+				{#if description}
+					<div data-timeline-description>{description}</div>
+				{/if}
+				{#if content}
+					{@render content(item, index)}
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>