@rokkit/ui 1.0.0-next.99 → 1.0.2

package/src/components/Tabs.svelte

@@ -0,0 +1,202 @@
+<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 = messages.tabs.placeholder,
+		disabled = false,
+		labels: userLabels = {},
+		class: className = '',
+		onchange,
+		onselect,
+		onadd,
+		onremove,
+		...snippets
+	}: TabsProps & { labels?: Record<string, string>; [key: string]: unknown } = $props()
+
+	const labels = $derived({ ...messages.tabs, ...userLabels })
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(
+		new Wrapper(proxyTree, {
+			onchange,
+			onselect: (v, proxy) => {
+				value = v
+				onselect?.(v, proxy)
+			}
+		})
+	)
+
+	// ─── 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}
+		<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}
+
+<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>

package/src/components/Toggle.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	// @ts-nocheck
+	import type { ToggleProps } from '../types/toggle.js'
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+	import { resolveSnippet } from '@rokkit/core'
+
+	let {
+		options = [],
+		fields: userFields = {},
+		value = $bindable(),
+		onchange,
+		showLabels = true,
+		size = 'md',
+		disabled = false,
+		label = messages.toggle.label,
+		class: className = '',
+		...snippets
+	}: ToggleProps & { [key: string]: unknown } = $props()
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	// ─── Navigator (horizontal, always attached) ───────────────────────────────
+
+	let containerRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!containerRef) return
+		const dir = getComputedStyle(containerRef).direction
+		const nav = new Navigator(containerRef, wrapper, { orientation: 'horizontal', dir })
+		return () => nav.destroy()
+	})
+
+	// ─── Sync external value → focused key ────────────────────────────────────
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	// ─── Selection handler ─────────────────────────────────────────────────────
+
+	function handleSelect(extractedValue, proxy) {
+		if (proxy.disabled || disabled) return
+		if (extractedValue !== value) {
+			value = extractedValue
+			onchange?.(extractedValue, proxy.original)
+		}
+	}
+</script>
+
+<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={label}
+	aria-disabled={disabled || undefined}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const sel = proxy.value === value}
+		{@const content = resolveSnippet(snippets, proxy)}
+		<button
+			type="button"
+			data-toggle-option
+			data-path={node.key}
+			data-selected={sel || undefined}
+			data-disabled={proxy.disabled || undefined}
+			role="radio"
+			aria-checked={sel}
+			aria-label={proxy.label}
+			title={proxy.get('description') || proxy.label}
+			disabled={proxy.disabled || disabled}
+		>
+			{#if content}
+				{@render content(proxy, sel)}
+			{:else}
+				{#if proxy.get('icon')}
+					<span data-toggle-icon class={proxy.get('icon')} aria-hidden="true"></span>
+				{/if}
+				{#if showLabels && proxy.label}
+					<span data-toggle-label>{proxy.label}</span>
+				{/if}
+			{/if}
+		</button>
+	{/each}
+</div>