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

package/src/components/Range.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+	import type { RangeProps } from '../types/range.js'
+	import { generateTicks } from '@rokkit/core'
+	import { pannable } from '@rokkit/actions'
+
+	let {
+		value = $bindable(50),
+		lower = $bindable(0),
+		upper = $bindable(100),
+		min = 0,
+		max = 100,
+		step = 1,
+		range: rangeMode = false,
+		ticks = 0,
+		labelSkip = 0,
+		disabled = false,
+		onchange,
+		class: className = ''
+	}: RangeProps = $props()
+
+	// ─── Pixel state ────────────────────────────────────────────────
+	let trackWidth = $state(0)
+
+	// ─── Helpers ────────────────────────────────────────────────────
+
+	function inverseLerp(val: number, lo: number, hi: number): number {
+		if (hi === lo) return 0
+		return (val - lo) / (hi - lo)
+	}
+
+	function valueToPercent(val: number): number {
+		return inverseLerp(val, min, max) * 100
+	}
+
+	function pixelToValue(px: number): number {
+		if (trackWidth === 0) return min
+		return min + (px / trackWidth) * (max - min)
+	}
+
+	function clamp(val: number, lo: number, hi: number): number {
+		return Math.min(Math.max(val, lo), hi)
+	}
+
+	function snapToStep(val: number): number {
+		if (step <= 0) return val
+		return Math.round((val - min) / step) * step + min
+	}
+
+	function fireChange() {
+		if (rangeMode) {
+			onchange?.([lower, upper])
+		} else {
+			onchange?.(value)
+		}
+	}
+
+	// ─── Derived positions (percentages) ────────────────────────────
+
+	let selectedLeft = $derived(rangeMode ? valueToPercent(lower) : 0)
+	let selectedWidth = $derived(
+		rangeMode
+			? valueToPercent(upper) - valueToPercent(lower)
+			: valueToPercent(value)
+	)
+
+	// ─── Ticks ──────────────────────────────────────────────────────
+
+	let tickStep = $derived(ticks > 0 ? Math.max(1, Math.round((max - min) / ticks)) : 0)
+	let tickItems = $derived(
+		ticks > 0 ? generateTicks(min, max, tickStep, labelSkip > 0 ? labelSkip + 1 : 1) : []
+	)
+
+	// ─── Thumb drag — upper (or single) ─────────────────────────────
+
+	let slidingUpper = $state(false)
+
+	function handleUpperPanStart() {
+		if (disabled) return
+		slidingUpper = true
+	}
+
+	function handleUpperPanMove(event: CustomEvent) {
+		if (disabled || trackWidth === 0) return
+		const dx = event.detail.dx as number
+		const currentPx = inverseLerp(rangeMode ? upper : value, min, max) * trackWidth
+		const newPx = clamp(currentPx + dx, rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0, trackWidth)
+		const raw = pixelToValue(newPx)
+		const snapped = snapToStep(clamp(raw, rangeMode ? lower : min, max))
+		if (rangeMode) {
+			upper = snapped
+		} else {
+			value = snapped
+		}
+		fireChange()
+	}
+
+	function handleUpperPanEnd() {
+		slidingUpper = false
+		// Final snap
+		if (rangeMode) {
+			upper = snapToStep(clamp(upper, lower, max))
+		} else {
+			value = snapToStep(clamp(value, min, max))
+		}
+		fireChange()
+	}
+
+	function handleUpperKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		const increment = step > 0 ? step : (max - min) / 10
+
+		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+			event.preventDefault()
+			if (rangeMode) {
+				upper = clamp(snapToStep(upper + increment), lower, max)
+			} else {
+				value = clamp(snapToStep(value + increment), min, max)
+			}
+			fireChange()
+		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			if (rangeMode) {
+				upper = clamp(snapToStep(upper - increment), lower, max)
+			} else {
+				value = clamp(snapToStep(value - increment), min, max)
+			}
+			fireChange()
+		} else if (event.key === 'Home') {
+			event.preventDefault()
+			if (rangeMode) {
+				upper = lower
+			} else {
+				value = min
+			}
+			fireChange()
+		} else if (event.key === 'End') {
+			event.preventDefault()
+			if (rangeMode) {
+				upper = max
+			} else {
+				value = max
+			}
+			fireChange()
+		}
+	}
+
+	// ─── Thumb drag — lower (range mode only) ───────────────────────
+
+	let slidingLower = $state(false)
+
+	function handleLowerPanStart() {
+		if (disabled) return
+		slidingLower = true
+	}
+
+	function handleLowerPanMove(event: CustomEvent) {
+		if (disabled || trackWidth === 0) return
+		const dx = event.detail.dx as number
+		const currentPx = inverseLerp(lower, min, max) * trackWidth
+		const newPx = clamp(currentPx + dx, 0, inverseLerp(upper, min, max) * trackWidth)
+		const raw = pixelToValue(newPx)
+		lower = snapToStep(clamp(raw, min, upper))
+		fireChange()
+	}
+
+	function handleLowerPanEnd() {
+		slidingLower = false
+		lower = snapToStep(clamp(lower, min, upper))
+		fireChange()
+	}
+
+	function handleLowerKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		const increment = step > 0 ? step : (max - min) / 10
+
+		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+			event.preventDefault()
+			lower = clamp(snapToStep(lower + increment), min, upper)
+			fireChange()
+		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			lower = clamp(snapToStep(lower - increment), min, upper)
+			fireChange()
+		} else if (event.key === 'Home') {
+			event.preventDefault()
+			lower = min
+			fireChange()
+		} else if (event.key === 'End') {
+			event.preventDefault()
+			lower = upper
+			fireChange()
+		}
+	}
+
+	// ─── Track click ────────────────────────────────────────────────
+
+	function handleTrackClick(event: MouseEvent) {
+		if (disabled) return
+		const target = event.currentTarget as HTMLElement
+		const rect = target.getBoundingClientRect()
+		const px = event.clientX - rect.left
+		const raw = pixelToValue(px)
+		const snapped = snapToStep(clamp(raw, min, max))
+
+		if (rangeMode) {
+			// Click closer to lower → adjust lower, else adjust upper
+			const distLower = Math.abs(snapped - lower)
+			const distUpper = Math.abs(snapped - upper)
+			if (distLower < distUpper) {
+				lower = clamp(snapped, min, upper)
+			} else {
+				upper = clamp(snapped, lower, max)
+			}
+		} else {
+			value = snapped
+		}
+		fireChange()
+	}
+
+	// ─── Tick click ─────────────────────────────────────────────────
+
+	function handleTickClick(tickValue: number) {
+		if (disabled) return
+		const snapped = snapToStep(clamp(tickValue, min, max))
+
+		if (rangeMode) {
+			const distLower = Math.abs(snapped - lower)
+			const distUpper = Math.abs(snapped - upper)
+			if (distLower < distUpper) {
+				lower = clamp(snapped, min, upper)
+			} else {
+				upper = clamp(snapped, lower, max)
+			}
+		} else {
+			value = snapped
+		}
+		fireChange()
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	data-range
+	data-disabled={disabled || undefined}
+	class={className || undefined}
+>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div data-range-track onclick={handleTrackClick}>
+		<div data-range-bar bind:clientWidth={trackWidth}></div>
+		<div
+			data-range-selected
+			style:left="{selectedLeft}%"
+			style:width="{selectedWidth}%"
+		></div>
+
+		{#if rangeMode}
+			<!-- Lower thumb -->
+			<div
+				data-range-thumb
+				data-thumb="lower"
+				data-sliding={slidingLower || undefined}
+				style:left="{valueToPercent(lower)}%"
+				tabindex={disabled ? -1 : 0}
+				use:pannable
+				onpanstart={handleLowerPanStart}
+				onpanmove={handleLowerPanMove}
+				onpanend={handleLowerPanEnd}
+				onkeydown={handleLowerKeyDown}
+				onfocus={() => { if (!disabled) slidingLower = true }}
+				onblur={() => { slidingLower = false }}
+				role="slider"
+				aria-valuenow={lower}
+				aria-valuemin={min}
+				aria-valuemax={upper}
+				aria-disabled={disabled || undefined}
+				aria-label="Lower bound"
+			></div>
+		{/if}
+
+		<!-- Upper thumb (or single thumb) -->
+		<div
+			data-range-thumb
+			data-thumb={rangeMode ? 'upper' : 'value'}
+			data-sliding={slidingUpper || undefined}
+			style:left="{valueToPercent(rangeMode ? upper : value)}%"
+			tabindex={disabled ? -1 : 0}
+			use:pannable
+			onpanstart={handleUpperPanStart}
+			onpanmove={handleUpperPanMove}
+			onpanend={handleUpperPanEnd}
+			onkeydown={handleUpperKeyDown}
+			onfocus={() => { if (!disabled) slidingUpper = true }}
+			onblur={() => { slidingUpper = false }}
+			role="slider"
+			aria-valuenow={rangeMode ? upper : value}
+			aria-valuemin={rangeMode ? lower : min}
+			aria-valuemax={max}
+			aria-disabled={disabled || undefined}
+			aria-label={rangeMode ? 'Upper bound' : 'Value'}
+		></div>
+	</div>
+
+	{#if tickItems.length > 0}
+		<div data-range-ticks style:--count={tickItems.length - 1}>
+			{#each tickItems as tick (tick.value)}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					data-range-tick
+					data-disabled={disabled || undefined}
+					role="option"
+					aria-disabled={disabled || undefined}
+					tabindex={disabled ? -1 : 0}
+					onclick={() => handleTickClick(tick.value)}
+				>
+					<div data-tick-bar></div>
+					{#if tick.label !== ''}
+						<span data-tick-label>{tick.label}</span>
+					{:else}
+						<span data-tick-label></span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

package/src/components/Rating.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	interface RatingProps {
+		/** Current rating value (bindable) */
+		value?: number
+		/** Maximum number of stars (default: 5) */
+		max?: number
+		/** Disabled state */
+		disabled?: boolean
+		/** CSS class for filled star icon */
+		filledIcon?: string
+		/** CSS class for empty star icon */
+		emptyIcon?: string
+		/** Called when value changes */
+		onchange?: (value: number) => void
+		/** Additional CSS class */
+		class?: string
+	}
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		disabled = false,
+		filledIcon = 'i-lucide:star',
+		emptyIcon = 'i-lucide:star',
+		onchange,
+		class: className = ''
+	}: RatingProps = $props()
+
+	let hoverIndex = $state(-1)
+
+	function handleClick(index: number) {
+		if (disabled) return
+		// Clicking same star toggles to 0, otherwise set to index + 1
+		const newValue = value === index + 1 ? 0 : index + 1
+		value = newValue
+		onchange?.(newValue)
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+
+		if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+			event.preventDefault()
+			const newValue = Math.min(value + 1, max)
+			value = newValue
+			onchange?.(newValue)
+		} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			const newValue = Math.max(value - 1, 0)
+			value = newValue
+			onchange?.(newValue)
+		} else {
+			const digit = parseInt(event.key, 10)
+			if (!isNaN(digit) && digit >= 0 && digit <= max) {
+				event.preventDefault()
+				value = digit
+				onchange?.(digit)
+			}
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	data-rating
+	data-rating-disabled={disabled || undefined}
+	class={className || undefined}
+	role="radiogroup"
+	aria-label="Rating"
+	aria-disabled={disabled || undefined}
+	tabindex={disabled ? undefined : 0}
+	onkeydown={handleKeyDown}
+>
+	{#each Array(max) as _, index (index)}
+		{@const filled = index < value}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<span
+			data-rating-item
+			data-filled={filled || undefined}
+			data-hovering={index <= hoverIndex || undefined}
+			role="radio"
+			aria-checked={filled}
+			aria-label="Rate {index + 1} of {max}"
+			onclick={() => handleClick(index)}
+			onmouseenter={() => { if (!disabled) hoverIndex = index }}
+			onmouseleave={() => { hoverIndex = -1 }}
+		>
+			<span class={filled ? filledIcon : emptyIcon} aria-hidden="true"></span>
+		</span>
+	{/each}
+</div>

package/src/components/Reveal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { reveal } from '@rokkit/actions'
+
+	interface RevealProps {
+		/** Slide direction (default: 'up') */
+		direction?: 'up' | 'down' | 'left' | 'right' | 'none'
+		/** Slide distance CSS value (default: '1.5rem') */
+		distance?: string
+		/** Transition duration in ms (default: 600) */
+		duration?: number
+		/** Delay before animation starts in ms (default: 0) */
+		delay?: number
+		/** Delay increment per direct child in ms for stagger (default: 0) */
+		stagger?: number
+		/** Only animate once (default: true) */
+		once?: boolean
+		/** IntersectionObserver threshold 0–1 (default: 0.1) */
+		threshold?: number
+		/** CSS easing function */
+		easing?: string
+		/** Additional CSS class */
+		class?: string
+		children?: Snippet
+	}
+
+	const {
+		direction = 'up',
+		distance = '1.5rem',
+		duration = 600,
+		delay = 0,
+		stagger = 0,
+		once = true,
+		threshold = 0.1,
+		easing = 'cubic-bezier(0.4, 0, 0.2, 1)',
+		class: className = '',
+		children
+	}: RevealProps = $props()
+
+	let el: HTMLDivElement | null = $state(null)
+
+	function handleReveal(e: CustomEvent<{ visible: boolean }>) {
+		if (!e.detail.visible || stagger <= 0 || !el) return
+		const children = el.children
+		for (let i = 0; i < children.length; i++) {
+			;(children[i] as HTMLElement).style.transitionDelay = `${delay + i * stagger}ms`
+		}
+	}
+</script>
+
+<div
+	bind:this={el}
+	class={className || undefined}
+	use:reveal={{ direction, distance, duration, delay: stagger > 0 ? 0 : delay, once, threshold, easing }}
+	onreveal={handleReveal}
+>
+	{@render children?.()}
+</div>

package/src/components/SearchFilter.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { SearchFilterProps, FilterObject } from '../types/search-filter.js'
+	import { parseFilters } from '@rokkit/data'
+
+	let {
+		filters = $bindable([]),
+		debounce: delay = 300,
+		placeholder = 'Search...',
+		columns: _columns,
+		onfilter,
+		class: className = '',
+		size = 'md',
+		tag: tagSnippet
+	}: SearchFilterProps = $props()
+
+	let inputText = $state('')
+	let timer: ReturnType<typeof setTimeout> | undefined
+
+	function handleInput() {
+		clearTimeout(timer)
+		timer = setTimeout(() => {
+			filters = parseFilters(inputText)
+			onfilter?.(filters)
+		}, delay)
+	}
+
+	function removeFilter(index: number) {
+		filters = filters.filter((_: FilterObject, i: number) => i !== index)
+		onfilter?.(filters)
+	}
+
+	function clear() {
+		inputText = ''
+		filters = []
+		onfilter?.(filters)
+	}
+
+	function formatFilter(filter: FilterObject): string {
+		const col = filter.column ? `${filter.column} ${filter.operator} ` : ''
+		const val = filter.value instanceof RegExp ? filter.value.source : String(filter.value)
+		return `${col}${val}`
+	}
+</script>
+
+<div data-search-filter data-size={size} class={className || undefined}>
+	<div data-search-input-wrapper>
+		<input
+			type="search"
+			data-search-input
+			bind:value={inputText}
+			oninput={handleInput}
+			{placeholder}
+		/>
+		{#if inputText}
+			<button data-search-clear onclick={clear} aria-label="Clear search" type="button">
+				&times;
+			</button>
+		{/if}
+	</div>
+
+	{#if filters.length > 0}
+		<div data-search-tags>
+			{#each filters as filter, i}
+				{#if tagSnippet}
+					{@render tagSnippet(filter, () => removeFilter(i))}
+				{:else}
+					<span data-search-tag>
+						<span data-search-tag-text>{formatFilter(filter)}</span>
+						<button
+							data-search-tag-remove
+							onclick={() => removeFilter(i)}
+							aria-label="Remove filter"
+							type="button"
+						>&times;</button>
+					</span>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>