@rokkit/ui 1.0.0-next.99 → 1.0.2

package/src/components/Range.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">
+	import type { RangeProps } from '../types/range.js'
+	import { generateTicks } from '@rokkit/core'
+	import { pannable } from '@rokkit/actions'
+	import { messages } from '@rokkit/states'
+
+	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,
+		labels: userLabels = {},
+		onchange,
+		class: className = ''
+	}: RangeProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.range, ...userLabels })
+
+	// ─── 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 panUpperBy(dx: number) {
+		const currentPx = inverseLerp(rangeMode ? upper : value, min, max) * trackWidth
+		const minPx = rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0
+		const newPx = clamp(currentPx + dx, minPx, trackWidth)
+		const snapped = snapToStep(clamp(pixelToValue(newPx), rangeMode ? lower : min, max))
+		if (rangeMode) upper = snapped
+		else value = snapped
+	}
+
+	function handleUpperPanMove(event: CustomEvent) {
+		if (disabled || trackWidth === 0) return
+		panUpperBy(event.detail.dx as number)
+		fireChange()
+	}
+
+	function handleUpperPanEnd() {
+		slidingUpper = false
+		// Final snap
+		if (rangeMode) {
+			upper = snapToStep(clamp(upper, lower, max))
+		} else {
+			value = snapToStep(clamp(value, min, max))
+		}
+		fireChange()
+	}
+
+	function nudgeUpper(delta: number) {
+		const increment = step > 0 ? step : (max - min) / 10
+		if (rangeMode) upper = clamp(snapToStep(upper + delta * increment), lower, max)
+		else value = clamp(snapToStep(value + delta * increment), min, max)
+	}
+
+	function jumpUpper(toEnd: boolean) {
+		if (rangeMode) upper = toEnd ? max : lower
+		else value = toEnd ? max : min
+	}
+
+	function isIncreaseKey(key: string): boolean {
+		return key === 'ArrowRight' || key === 'ArrowUp'
+	}
+
+	function isDecreaseKey(key: string): boolean {
+		return key === 'ArrowLeft' || key === 'ArrowDown'
+	}
+
+	function applyUpperKey(key: string): boolean {
+		if (isIncreaseKey(key)) {
+			nudgeUpper(1)
+			return true
+		}
+		if (isDecreaseKey(key)) {
+			nudgeUpper(-1)
+			return true
+		}
+		if (key === 'Home') {
+			jumpUpper(false)
+			return true
+		}
+		if (key === 'End') {
+			jumpUpper(true)
+			return true
+		}
+		return false
+	}
+
+	function handleUpperKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		if (applyUpperKey(event.key)) {
+			event.preventDefault()
+			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 nudgeLower(delta: number) {
+		const increment = step > 0 ? step : (max - min) / 10
+		lower = clamp(snapToStep(lower + delta * increment), min, upper)
+	}
+
+	function applyLowerKey(key: string): boolean {
+		if (isIncreaseKey(key)) {
+			nudgeLower(1)
+			return true
+		}
+		if (isDecreaseKey(key)) {
+			nudgeLower(-1)
+			return true
+		}
+		if (key === 'Home') {
+			lower = min
+			return true
+		}
+		if (key === 'End') {
+			lower = upper
+			return true
+		}
+		return false
+	}
+
+	function handleLowerKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		if (applyLowerKey(event.key)) {
+			event.preventDefault()
+			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={labels.lower}
+			></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 ? labels.upper : labels.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-selected={false}
+					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,115 @@
+<script lang="ts">
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import { messages } from '@rokkit/states'
+
+	interface RatingIcons {
+		filled?: string
+		empty?: string
+		half?: string
+	}
+
+	interface RatingProps {
+		/** Current rating value (bindable) */
+		value?: number
+		/** Maximum number of stars (default: 5) */
+		max?: number
+		/** Disabled state */
+		disabled?: boolean
+		/** Custom icons for rating states */
+		icons?: RatingIcons
+		/** Called when value changes */
+		onchange?: (value: number) => void
+		/** Additional CSS class */
+		class?: string
+	}
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		disabled = false,
+		label = messages.rating.label,
+		icons: userIcons = {} as RatingIcons,
+		onchange,
+		class: className = ''
+	}: RatingProps & { label?: string } = $props()
+
+	const icons = $derived({ ...DEFAULT_STATE_ICONS.rating, ...userIcons })
+
+	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 setRating(newValue: number) {
+		value = newValue
+		onchange?.(newValue)
+	}
+
+	function tryDigitKey(key: string): boolean {
+		const digit = parseInt(key, 10)
+		if (isNaN(digit) || digit < 0 || digit > max) return false
+		setRating(digit)
+		return true
+	}
+
+	function isIncreaseKey(key: string): boolean {
+		return key === 'ArrowRight' || key === 'ArrowUp'
+	}
+
+	function isDecreaseKey(key: string): boolean {
+		return key === 'ArrowLeft' || key === 'ArrowDown'
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+
+		if (isIncreaseKey(event.key)) {
+			event.preventDefault()
+			setRating(Math.min(value + 1, max))
+		} else if (isDecreaseKey(event.key)) {
+			event.preventDefault()
+			setRating(Math.max(value - 1, 0))
+		} else if (tryDigitKey(event.key)) {
+			event.preventDefault()
+		}
+	}
+</script>
+
+<div
+	data-rating
+	data-rating-disabled={disabled || undefined}
+	class={className || undefined}
+	role="radiogroup"
+	aria-label={label}
+	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"
+			tabindex={-1}
+			aria-checked={filled}
+			aria-label="Rate {index + 1} of {max}"
+			onclick={() => handleClick(index)}
+			onmouseenter={() => {
+				if (!disabled) hoverIndex = index
+			}}
+			onmouseleave={() => {
+				hoverIndex = -1
+			}}
+		>
+			<span data-rating-icon class={filled ? icons.filled : icons.empty} aria-hidden="true"></span>
+		</span>
+	{/each}
+</div>

package/src/components/ResponsiveGrid.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface ResponsiveGridProps {
+		/** Minimum column width (CSS value) */
+		minWidth?: string
+		/** Gap between cells (CSS value) */
+		gap?: string
+		/** Maximum number of columns */
+		maxCols?: number
+		/** Grid children */
+		children: Snippet
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		minWidth = '240px',
+		gap = '1rem',
+		maxCols,
+		children,
+		class: className = ''
+	}: ResponsiveGridProps = $props()
+</script>
+
+<div
+	data-responsive-grid
+	class={className || undefined}
+	style:--grid-min-width={minWidth}
+	style:--grid-gap={gap}
+	style:--grid-max-cols={maxCols || undefined}
+>
+	{@render children()}
+</div>

package/src/components/Reveal.svelte

@@ -0,0 +1,46 @@
+<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()
+</script>
+
+<div
+	class={className || undefined}
+	use:reveal={{ direction, distance, duration, delay, stagger, once, threshold, easing }}
+>
+	{@render children?.()}
+</div>

package/src/components/SearchFilter.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { SearchFilterProps, FilterObject } from '../types/search-filter.js'
+	import { parseFilters } from '@rokkit/data'
+	import { messages } from '@rokkit/states'
+
+	let {
+		filters = $bindable([]),
+		debounce: delay = 300,
+		placeholder = 'Search...',
+		columns: _columns,
+		labels: userLabels = {},
+		onfilter,
+		class: className = '',
+		size = 'md',
+		tag: tagSnippet
+	}: SearchFilterProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({
+		clear: messages.search_.clear,
+		remove: messages.filter.remove,
+		...userLabels
+	})
+
+	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={labels.clear} type="button">
+				&times;
+			</button>
+		{/if}
+	</div>
+
+	{#if filters.length > 0}
+		<div data-search-tags>
+			{#each filters as filter, i (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={labels.remove}
+							type="button">&times;</button
+						>
+					</span>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>