@rokkit/ui 1.0.0-next.124 → 1.0.0-next.127

package/src/components/Tabs.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+	import type { TabsProps, TabsItem, TabsItemHandlers } from '../types/tabs.js'
+	import { ItemProxy } from '../types/item-proxy.js'
+	import { ListController } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import { untrack } from 'svelte'
+
+	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,
+		class: className = '',
+		onchange,
+		onselect,
+		onadd,
+		onremove,
+		tabItem: tabItemSnippet,
+		tabPanel: tabPanelSnippet,
+		empty: emptySnippet
+	}: TabsProps = $props()
+
+	/** Content field name from user fields or default */
+	const contentField = $derived((userFields as Record<string, string> | undefined)?.content ?? 'content')
+
+	let controller = untrack(() => new ListController(options, value, userFields))
+	let containerRef: HTMLElement | null = $state(null)
+	let lastSyncedValue: unknown = value
+
+	$effect(() => {
+		controller.update(options)
+	})
+
+	// Sync controller focus when value changes externally
+	$effect(() => {
+		if (value !== lastSyncedValue) {
+			lastSyncedValue = value
+			controller.moveToValue(value)
+		}
+	})
+
+	// Focus the tab matching controller.focusedKey on navigator move events
+	$effect(() => {
+		if (!containerRef) return
+		const el = containerRef
+
+		function handleAction(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()
+					}
+				}
+			}
+
+			if (detail.name === 'select') {
+				handleSelectAction()
+			}
+		}
+
+		el.addEventListener('action', handleAction)
+		return () => el.removeEventListener('action', handleAction)
+	})
+
+	/**
+	 * Create an ItemProxy for the given item
+	 */
+	function createProxy(item: TabsItem): ItemProxy {
+		return new ItemProxy(item, userFields)
+	}
+
+	/**
+	 * Check if an item is currently selected
+	 */
+	function isSelected(proxy: ItemProxy): boolean {
+		return proxy.itemValue === value
+	}
+
+	/**
+	 * Handle tab selection via navigator select action
+	 */
+	function handleSelectAction() {
+		const key = controller.focusedKey
+		if (!key) return
+
+		const proxy = controller.lookup.get(key)
+		if (!proxy) return
+
+		const itemProxy = createProxy(proxy.value)
+		selectTab(itemProxy)
+	}
+
+	/**
+	 * Select a tab by its proxy
+	 */
+	function selectTab(proxy: ItemProxy) {
+		if (proxy.disabled || disabled) return
+		const itemValue = proxy.itemValue
+		if (itemValue !== value) {
+			value = itemValue
+			lastSyncedValue = itemValue
+			controller.moveToValue(itemValue)
+			onchange?.(itemValue, proxy.original as TabsItem)
+		}
+		onselect?.(itemValue, proxy.original as TabsItem)
+	}
+
+	/**
+	 * Handle keyboard events on individual tabs (Enter/Space)
+	 */
+	function handleKeyDown(event: KeyboardEvent, proxy: ItemProxy) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			selectTab(proxy)
+		}
+	}
+
+	/**
+	 * Create handlers object for custom snippets
+	 */
+	function createHandlers(proxy: ItemProxy): TabsItemHandlers {
+		return {
+			onclick: () => selectTab(proxy),
+			onkeydown: (event: KeyboardEvent) => handleKeyDown(event, proxy)
+		}
+	}
+
+	function handleAdd() {
+		onadd?.()
+	}
+
+	function handleRemove(proxy: ItemProxy) {
+		onremove?.(proxy.itemValue)
+	}
+
+	/**
+	 * Get the panel content for a tab item
+	 */
+	function getContent(item: TabsItem): unknown {
+		return item[contentField]
+	}
+</script>
+
+{#snippet defaultTabItem(proxy: ItemProxy, handlers: TabsItemHandlers, selected: boolean, key: string)}
+	<button
+		type="button"
+		data-tabs-trigger
+		data-path={key}
+		data-selected={selected || undefined}
+		data-disabled={proxy.disabled || undefined}
+		role="tab"
+		aria-selected={selected}
+		aria-label={proxy.label}
+		disabled={proxy.disabled || disabled}
+		onkeydown={handlers.onkeydown}
+	>
+		{#if proxy.icon}
+			<span data-tabs-icon class={proxy.icon} aria-hidden="true"></span>
+		{/if}
+		<span data-tabs-label>{proxy.text}</span>
+		{#if editable}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<span
+				data-tabs-remove
+				role="button"
+				tabindex="-1"
+				aria-label="Remove tab"
+				onclick={(e) => { e.stopPropagation(); handleRemove(proxy) }}
+				onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); handleRemove(proxy) } }}
+			>
+				<span class="i-lucide:x" aria-hidden="true"></span>
+			</span>
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet defaultPanel(item: TabsItem)}
+	<div data-tabs-content>
+		{getContent(item)}
+	</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}
+	use:navigator={{ wrapper: controller, orientation }}
+>
+	{#if options.length === 0}
+		<div data-tabs-empty>
+			{#if emptySnippet}
+				{@render emptySnippet()}
+			{:else}
+				{@render defaultEmpty()}
+			{/if}
+		</div>
+	{:else}
+		<div data-tabs-list role="tablist" aria-orientation={orientation}>
+			{#each options as option, index (index)}
+				{@const proxy = createProxy(option)}
+				{@const selected = isSelected(proxy)}
+				{@const handlers = createHandlers(proxy)}
+				{@const key = String(index)}
+
+				{#if tabItemSnippet}
+					{@render tabItemSnippet(option, userFields ?? {}, handlers, selected)}
+				{:else}
+					{@render defaultTabItem(proxy, handlers, selected, key)}
+				{/if}
+			{/each}
+			{#if editable}
+				<button
+					type="button"
+					data-tabs-add
+					aria-label="Add tab"
+					onclick={handleAdd}
+				>
+					<span class="i-lucide:plus" aria-hidden="true"></span>
+				</button>
+			{/if}
+		</div>
+
+		{#each options as option, index (index)}
+			{@const proxy = createProxy(option)}
+			{@const active = isSelected(proxy)}
+
+			<div
+				data-tabs-panel
+				data-panel-active={active || undefined}
+				role="tabpanel"
+				id="tab-panel-{index}"
+				aria-labelledby="tab-{index}"
+			>
+				{#if tabPanelSnippet}
+					{@render tabPanelSnippet(option, userFields ?? {})}
+				{:else}
+					{@render defaultPanel(option)}
+				{/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 { ItemProxy } from '../types/item-proxy.js'
+
+	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 ItemProxy(item, fields)}
+		{@const text = proxy.text}
+		{@const icon = proxy.icon}
+		{@const description = proxy.description}
+		{@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>

package/src/components/Toggle.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import type { ToggleProps, ToggleItem, ToggleItemHandlers } from '../types/toggle.js'
+	import { ItemProxy } from '../types/item-proxy.js'
+	import { ListController } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import { untrack } from 'svelte'
+
+	let {
+		options = [],
+		fields: userFields,
+		value = $bindable(),
+		onchange,
+		showLabels = true,
+		size = 'md',
+		disabled = false,
+		class: className = '',
+		item: itemSnippet
+	}: ToggleProps = $props()
+
+	let controller = untrack(() => new ListController(options, value, userFields))
+	let containerRef: HTMLElement | null = $state(null)
+	let lastSyncedValue: unknown = value
+
+	$effect(() => {
+		controller.update(options)
+	})
+
+	// Only sync controller focus when value prop changes externally,
+	// not after every navigator move (focus !== selection in radiogroups)
+	$effect(() => {
+		if (value !== lastSyncedValue) {
+			lastSyncedValue = value
+			controller.moveToValue(value)
+		}
+	})
+
+	// Focus the button matching controller.focusedKey on navigator move events
+	$effect(() => {
+		if (!containerRef) return
+		const el = containerRef
+
+		function handleAction(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()
+					}
+				}
+			}
+		}
+
+		el.addEventListener('action', handleAction)
+		return () => el.removeEventListener('action', handleAction)
+	})
+
+	/**
+	 * Create an ItemProxy for the given item
+	 */
+	function createProxy(item: ToggleItem): ItemProxy {
+		return new ItemProxy(item, userFields)
+	}
+
+	/**
+	 * Check if an item is currently selected
+	 */
+	function isSelected(proxy: ItemProxy): boolean {
+		return proxy.itemValue === value
+	}
+
+	/**
+	 * Handle item selection
+	 */
+	function handleSelect(proxy: ItemProxy) {
+		if (proxy.disabled || disabled) return
+		const itemValue = proxy.itemValue
+		if (itemValue !== value) {
+			value = itemValue
+			lastSyncedValue = itemValue
+			controller.moveToValue(itemValue)
+			onchange?.(itemValue, proxy.original as ToggleItem)
+		}
+	}
+
+	/**
+	 * Handle keyboard events on individual options (Enter/Space)
+	 */
+	function handleKeyDown(event: KeyboardEvent, proxy: ItemProxy) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			handleSelect(proxy)
+		}
+	}
+
+	/**
+	 * Create handlers object for custom snippets
+	 */
+	function createHandlers(proxy: ItemProxy): ToggleItemHandlers {
+		return {
+			onclick: () => handleSelect(proxy),
+			onkeydown: (event: KeyboardEvent) => handleKeyDown(event, proxy)
+		}
+	}
+</script>
+
+{#snippet defaultOption(proxy: ItemProxy, handlers: ToggleItemHandlers, selected: boolean, key: string)}
+	<button
+		type="button"
+		data-toggle-option
+		data-path={key}
+		data-selected={selected || undefined}
+		data-disabled={proxy.disabled || undefined}
+		role="radio"
+		aria-checked={selected}
+		aria-label={proxy.text}
+		title={proxy.description || proxy.text}
+		disabled={proxy.disabled || disabled}
+		onclick={handlers.onclick}
+		onkeydown={handlers.onkeydown}
+	>
+		{#if proxy.icon}
+			<span data-toggle-icon class={proxy.icon} aria-hidden="true"></span>
+		{/if}
+		{#if showLabels && proxy.text}
+			<span data-toggle-label>{proxy.text}</span>
+		{/if}
+	</button>
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={containerRef}
+	data-toggle
+	data-toggle-size={size}
+	data-toggle-disabled={disabled || undefined}
+	data-toggle-labels={showLabels || undefined}
+	class={className || undefined}
+	role="radiogroup"
+	aria-label="Selection"
+	aria-disabled={disabled || undefined}
+	use:navigator={{ wrapper: controller, orientation: 'horizontal' }}
+>
+	{#each options as option, index (index)}
+		{@const proxy = createProxy(option)}
+		{@const selected = isSelected(proxy)}
+		{@const handlers = createHandlers(proxy)}
+		{@const key = String(index)}
+
+		{#if itemSnippet}
+			{@render itemSnippet(option, userFields ?? {}, handlers, selected)}
+		{:else}
+			{@render defaultOption(proxy, handlers, selected, key)}
+		{/if}
+	{/each}
+</div>