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

package/src/RangeSlider.svelte

@@ -1,79 +0,0 @@
-<script>
-	import { pannable } from '@rokkit/actions'
-
-	/**
-	 * @typedef Props
-	 * @property {number} min     - The minimum value of the thumb.
-	 * @property {number} max     - The maximum value of the thumb.
-	 * @property {number} value   - The current value of the thumb.
-	 * @property {number} cx      - The current position of the thumb.
-	 * @property {number[]} steps - An array of steps within a range.
-	 * @property {import('d3-scale').ScaleLinear} scale - Scale mapping the thumb's position to its value.
-	 */
-	/** @type {Props} */
-	let { min = 0, max = 100, value = $bindable(), cx = $bindable(), steps = [], scale } = $props()
-
-	function handlePanMove(event) {
-		let x = cx + event.detail.dx
-		let limits = [scale.invert(min), scale.invert(max)]
-
-		cx = Math.min(Math.max(x, limits[0]), limits[1])
-		if (steps.length > 0) {
-			const result = scale(x)
-			let index = 0
-			let matched = false
-			while (!matched && index < steps.length - 1) {
-				if (steps[index] <= result && steps[index + 1] > result) {
-					value =
-						result - steps[index] > steps[index + 1] - result ? steps[index + 1] : steps[index]
-					matched = true
-				}
-				index++
-			}
-		} else {
-			value = scale(cx)
-		}
-	}
-	function handlePanEnd() {
-		sliding = false
-		if (steps.length > 0) {
-			cx = scale.invert(value)
-		}
-	}
-	function handleKeyDown(event) {
-		if (steps.length === 0) {
-			const offset = (max - min) / 10
-			const step = event.key === 'ArrowLeft' ? -offset : event.key === 'ArrowRight' ? offset : 0
-			value = Math.min(Math.max(value + step, min), max)
-		} else {
-			const index = steps.findIndex((step) => step === value)
-			if (event.key === 'ArrowLeft' && index > 0) {
-				value = steps[index - 1]
-				cx = scale.invert(value)
-			} else if (event.key === 'ArrowRight' && index < steps.length - 1) {
-				value = steps[index + 1]
-				cx = scale.invert(value)
-			}
-		}
-	}
-	let sliding = $state(false)
-	let position = $derived(`${cx}px`)
-</script>
-
-<rk-thumb
-	class="absolute -top-1 box-border h-4 w-4 cursor-pointer"
-	style:left={position}
-	class:sliding
-	tabindex="0"
-	onfocus={() => (sliding = true)}
-	onblur={() => (sliding = false)}
-	use:pannable
-	onpanmove={handlePanMove}
-	onpanstart={() => (sliding = true)}
-	onpanend={handlePanEnd}
-	onkeydown={handleKeyDown}
-	role="slider"
-	aria-valuenow={value}
-	aria-valuemin={min}
-	aria-valuemax={max}
-></rk-thumb>

package/src/RangeTick.svelte

@@ -1,28 +0,0 @@
-<script>
-	import { noop } from '@rokkit/core'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [label]
-	 * @property {number} value
-	 * @property {boolean} [selected]
-	 * @property {Function} [onclick]
-	 */
-
-	/** @type {Props} */
-	let { label = null, value, selected = false, onclick = noop } = $props()
-	let text = $derived(label ?? value.toFixed(0))
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<rk-tick
-	class="grid cursor-pointer select-none grid-cols-2"
-	{onclick}
-	role="option"
-	aria-selected={selected}
-	tabindex="0"
->
-	<rk-tick-bar class="h-5px col-start-2 border-l"></rk-tick-bar>
-	<p class="col-span-2 flex justify-center">
-		{text}
-	</p>
-</rk-tick>

package/src/Rating.svelte

@@ -1,95 +0,0 @@
-<script>
-	import { createEmitter, defaultStateIcons } from '@rokkit/core'
-	import Icon from './Icon.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {any} [id]
-	 * @property {any} [name]
-	 * @property {number} [value]
-	 * @property {number} [max]
-	 * @property {boolean} [disabled]
-	 * @property {any} [stateIcons]
-	 * @property {string} [placeholder]
-	 * @property {number} [tabindex]
-	 * @event {CustomEvent} [onchange]
-	 */
-
-	/** @type {Props} */
-	let {
-		id = null,
-		name = null,
-		value = $bindable(0),
-		max = 5,
-		disabled = false,
-		stateIcons = defaultStateIcons.rating,
-		placeholder = 'Rating',
-		tabindex = 0,
-		...events
-	} = $props()
-
-	let emitter = $derived(createEmitter(events, ['change']))
-	function handleClick(index) {
-		if (!disabled) {
-			value = value === 1 && index === 0 ? index : index + 1
-			emitter.change({ value })
-		}
-	}
-	function handleEnter(index) {
-		if (!disabled) {
-			hoverIndex = index
-		}
-	}
-	function handleLeave() {
-		if (!disabled) {
-			hoverIndex = -1
-		}
-	}
-	function handleKeyDown(event) {
-		if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
-			event.preventDefault()
-			value = Math.max(value - 1, 0)
-		} else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			value = Math.min(value + 1, max)
-		} else {
-			var number = parseInt(event.code.replace('Digit', ''), 10)
-			if (number >= 0 && number <= 9 && number <= max) {
-				event.preventDefault()
-				value = number
-			}
-		}
-	}
-
-	let hoverIndex = $state(-1)
-	let stars = $derived([...Array(max).keys()].map((i) => i < value))
-</script>
-
-<rk-rating
-	{id}
-	class="flex cursor-pointer select-none"
-	class:disabled
-	{tabindex}
-	role="radiogroup"
-	onkeydown={handleKeyDown}
->
-	{#if name}
-		<input {name} hidden type="number" bind:value min={0} {max} readOnly={disabled} />
-	{/if}
-	{#each stars as selected, index (index)}
-		{@const stateIcon = selected ? stateIcons.filled : stateIcons.empty}
-		{@const label = [placeholder, index + 1, 'out of', max].join(' ')}
-		<Icon
-			name={stateIcon}
-			{label}
-			role="option"
-			{disabled}
-			checked={index < value}
-			class={index <= hoverIndex ? 'hovering' : ''}
-			onmouseenter={() => handleEnter(index)}
-			onmouseleave={handleLeave}
-			onclick={() => handleClick(index)}
-			tabindex="-1"
-		/>
-	{/each}
-</rk-rating>

package/src/ResponsiveGrid.svelte

@@ -1,88 +0,0 @@
-<script>
-	// To Do add navigable
-	import { defaultMapping } from './constants'
-	import { swipeable } from '@rokkit/actions'
-	import { fly, fade } from 'svelte/transition'
-	import { cubicInOut } from 'svelte/easing'
-	import { equals } from 'ramda'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} items
-	 * @property {import('@rokkit/core').FieldMapper} [mapping]
-	 * @property {boolean} [small]
-	 * @property {number} [duration]
-	 * @property {any} [easing]
-	 * @property {any} [value]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: className = 'three-col',
-		items,
-		mapping = defaultMapping,
-		small = true,
-		duration = 400,
-		easing = cubicInOut,
-		value = $bindable(null)
-	} = $props()
-
-	let previous = $state(-1)
-	let activeIndex = $state(0)
-	let direction = $derived(Math.sign(activeIndex - previous))
-	let width = $state()
-
-	function handleNext() {
-		if (activeIndex < items.length - 1) value = items[activeIndex + 1]
-	}
-
-	function handlePrevious() {
-		if (activeIndex > 0) value = items[activeIndex - 1]
-	}
-
-	function activeIndexFromPage(value) {
-		const index = items.findIndex((item) => equals(item, value))
-		return index > -1 ? index : 0
-	}
-
-	$effect.pre(() => {
-		activeIndex = activeIndexFromPage(value)
-		// direction = Math.sign(activeIndex - previous)
-		previous = activeIndex
-	})
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-container
-	use:swipeable={{ enabled: small }}
-	onswipeLeft={handleNext}
-	onswipeRight={handlePrevious}
-	onprevious={handlePrevious}
-	onnext={handleNext}
-	tabindex={0}
-	class="overflow-hidden {className}"
-	bind:clientWidth={width}
->
-	{#each items as item, index (index)}
-		{@const segmentClass = 'col-' + (index + 1)}
-		{@const props = mapping.get('props', item, {})}
-		{@const Template = item[mapping.fields.component]}
-		{#if small && equals(index, activeIndex)}
-			<rk-segment
-				class="absolute h-full w-full {segmentClass}"
-				out:fade={{
-					x: -1 * direction * width,
-					duration,
-					easing
-				}}
-				in:fly={{ x: direction * width, duration, easing }}
-			>
-				<Template {...props} />
-			</rk-segment>
-		{:else if !small}
-			<rk-segment class={segmentClass}>
-				<Template {...props} />
-			</rk-segment>
-		{/if}
-	{/each}
-</rk-container>

package/src/Scrollable.svelte

@@ -1,7 +0,0 @@
-<script>
-	let { class: className = '', children } = $props()
-</script>
-
-<rk-scroll class="flex h-full flex-col overflow-scroll {className}">
-	{@render children?.()}
-</rk-scroll>

package/src/Select.svelte

@@ -1,114 +0,0 @@
-<script>
-	import { defaultFields, defaultStateIcons } from '@rokkit/core'
-	import Slider from './Slider.svelte'
-	import Icon from './Icon.svelte'
-	import { dismissable, navigable } from '@rokkit/actions'
-
-	import List from './List.svelte'
-	// import ListItems from './ListItems.svelte'
-	import Item from './Item.svelte'
-
-	let {
-		class: className = '',
-		name = null,
-		options = $bindable([]),
-		fields,
-		using = {},
-		value = $bindable(null),
-		placeholder = '',
-		currentItem
-	} = $props()
-
-	let activeIndex = $state(-1)
-	let open = $state(false)
-	// let offsetTop
-	let icons = defaultStateIcons.selector
-	let activeItem = $state(null)
-
-	function handleSelect() {
-		open = false
-		dispatch('select', value)
-		dispatch('change', value)
-	}
-	function handleNext() {
-		if (!open) {
-			open = true
-		} else if (activeIndex < options.length - 1) {
-			value = options[activeIndex + 1]
-		}
-	}
-	function handlePrevious() {
-		if (!open) {
-			open = true
-		} else if (activeIndex > 0) {
-			value = options[activeIndex - 1]
-		}
-	}
-	function handleKeySelect() {
-		if (open) {
-			if (value) {
-				handleSelect()
-			}
-		}
-	}
-
-	let offsetTop = $derived(activeItem?.offsetTop + activeItem?.clientHeight ?? 0)
-</script>
-
-<input-select
-	class="relative flex flex-col {className}"
-	class:open
-	tabindex="0"
-	role="listbox"
-	aria-label={name}
-	use:dismissable
-	use:navigable={{ horizontal: false, vertical: true }}
-	onfocus={() => (open = true)}
-	onblur={() => (open = false)}
-	ondismiss={() => (open = false)}
-	onprevious={handlePrevious}
-	onnext={handleNext}
-	onselect={handleKeySelect}
->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<selected-item
-		onclick={() => (open = !open)}
-		class="flex w-full items-center"
-		bind:this={activeItem}
-		role="option"
-		tabindex="-1"
-		aria-selected={value !== null && !open}
-	>
-		<item>
-			{#if currentItem}
-				{@render currentItem(value, fields)}
-			{/if}
-			<Item value={value ?? placeholder} {fields} />
-		</item>
-		{#if open}
-			<Icon name={icons.opened} label="opened" tabindex="-1" />
-		{:else}
-			<Icon name={icons.closed} label="closed" tabindex="-1" />
-		{/if}
-	</selected-item>
-	{#if open}
-		<Slider top={offsetTop}>
-			<!-- <list class="flex flex-col w-full flex-shrink-0 select-none" role="listbox" tabindex="-1">
-			<ListItems
-				items={options}
-				bind:value
-				{fields}
-				{using}
-			/>
-		</list> -->
-			<List
-				bind:items={options}
-				{fields}
-				{using}
-				bind:value
-				on:select={handleSelect}
-				tabindex="-1"
-			/>
-		</Slider>
-	{/if}
-</input-select>

package/src/Separator.svelte

@@ -1 +0,0 @@
-<rk-separator class="flex flex-grow"></rk-separator>

package/src/Slider.svelte

@@ -1,14 +0,0 @@
-<script>
-	import { slide, fade } from 'svelte/transition'
-
-	let { class: className = 'menu', top = 16, offset = -top, children } = $props()
-</script>
-
-<scroll
-	in:slide={{ duration: 50, y: offset }}
-	out:fade={{ duration: 50 }}
-	style:top="{top}px"
-	class="absolute z-10 flex w-full flex-col overflow-scroll {className}"
->
-	{@render children?.()}
-</scroll>

package/src/SlidingColumns.svelte

@@ -1,50 +0,0 @@
-<script>
-	import { swipeable, navigable } from '@rokkit/actions'
-	import { fly, fade } from 'svelte/transition'
-	import { cubicInOut } from 'svelte/easing'
-
-	let { activeIndex = $bindable(0), columns = $bindable([]) } = $props()
-	let width = $state()
-	let offset = $state(1)
-
-	function handleNext() {
-		if (activeIndex < columns.length - 1) {
-			activeIndex = activeIndex + 1
-			offset = 1
-		}
-	}
-
-	function handlePrevious() {
-		if (activeIndex > 0) {
-			activeIndex = activeIndex - 1
-			offset = -1
-		}
-	}
-
-	let activeColumn = $derived(columns[activeIndex])
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-container
-	use:swipeable
-	onswipeleft={handlePrevious}
-	onswiperight={handleNext}
-	use:navigable={{ orientation: 'horizontal' }}
-	onprevious={handlePrevious}
-	onnext={handleNext}
-	tabindex={0}
-	class="relative grid h-full w-full overflow-hidden"
-	bind:clientWidth={width}
->
-	<rk-segment
-		class="slide absolute h-full w-full"
-		in:fly={{ x: offset * width, duration: 1000, easing: cubicInOut }}
-		out:fade={{
-			x: -1 * offset * width,
-			duration: 1000,
-			easing: cubicInOut
-		}}
-	>
-		{activeColumn}
-	</rk-segment>
-</rk-container>

package/src/Stage.svelte

@@ -1,41 +0,0 @@
-<script>
-	import Icon from './Icon.svelte'
-
-	export let text
-	export let completed
-	export let active
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="circle stage h-16 w-16 cursor-pointer select-none"
-	class:completed
-	class:active
-	on:click
-	role="option"
-	aria-selected={active}
-	tabindex="0"
->
-	{#if completed}
-		<Icon name="tick" on:click />
-	{:else}
-		<p class="circle h-full w-full border-2">
-			{text}
-		</p>
-	{/if}
-</div>
-
-<style lang="postcss">
-	.circle {
-		@apply flex items-center justify-center rounded-full border-2;
-	}
-	.stage.completed {
-		@apply bg-primary-500 text-white;
-	}
-	.stage.active {
-		@apply border-primary-500 border;
-	}
-	.stage.active .circle {
-		@apply border-4 shadow;
-	}
-</style>

package/src/Stepper.svelte

@@ -1,66 +0,0 @@
-<script>
-	// import { format } from 'd3-format'
-	import { createEventDispatcher } from 'svelte'
-
-	import Stage from './Stage.svelte'
-	import Steps from './ProgressDots.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let data
-	// export let currentStep
-	export let currentStage
-
-	// $: data = data.map((d) => ({
-	// 	completed: d.steps?.value === d.steps?.count,
-	// 	...d
-	// }))
-	function handleClick(d) {
-		dispatch('click', { ...d, data: data[d.stage] })
-	}
-</script>
-
-<div
-	class="stepper flex w-full flex-col items-center gap-3 rounded border p-8 shadow"
-	style:--count={data.length}
->
-	<row>
-		{#each data as { text, completed, active, steps }, stage (stage)}
-			<div class="flex flex-col items-center justify-center first:col-start-2">
-				<Stage {text} {completed} {active} on:click={() => handleClick({ stage })} />
-			</div>
-			{#if steps}
-				<div class="col-span-2 flex flex-col items-center justify-center">
-					<Steps
-						count={steps.count}
-						bind:value={steps.value}
-						bind:current={steps.current}
-						on:click={(e) => handleClick({ ...e.detail, stage })}
-					/>
-				</div>
-			{/if}
-		{/each}
-	</row>
-	<row>
-		{#each data as { label }, stage (stage)}
-			{#if label}
-				<p
-					class="text-surface-800 col-span-3 flex w-full justify-center text-center font-medium leading-loose"
-					class:pending={stage > currentStage}
-				>
-					{label}
-				</p>
-			{/if}
-		{/each}
-	</row>
-</div>
-
-<style lang="postcss">
-	.stepper row {
-		@apply grid w-full;
-		grid-template-columns: repeat(var(--count), 2fr 6fr 2fr);
-	}
-	.pending {
-		@apply text-surface-500 font-light;
-	}
-</style>

package/src/Summary.svelte

@@ -1,22 +0,0 @@
-<script>
-	import Item from './Item.svelte'
-	/**
-	 * @typedef {Object} Props
-	 * @property {import('@rokkit/states').NodeProxy} value
-	 * @property {Boolean} [expanded]
-	 */
-
-	/** @type {Props} */
-	let { value = $bindable(), fields, expanded = false, hasChildren = false } = $props()
-</script>
-
-<rk-summary class="flex w-full flex-shrink-0 cursor-pointer flex-row items-center" tabindex="-1">
-	<Item bind:value {fields} />
-	{#if hasChildren}
-		{#if expanded}
-			<icon class="accordion-opened sm" aria-label="collapse"></icon>
-		{:else}
-			<icon class="accordion-closed sm" aria-label="expand"></icon>
-		{/if}
-	{/if}
-</rk-summary>