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

package/src/ListBody.svelte

@@ -1,43 +0,0 @@
-<script>
-	import { getKeyFromPath, FieldMapper, getSnippet } from '@rokkit/core'
-	import Item from './Item.svelte'
-	import { equals } from 'ramda'
-
-	let {
-		items = $bindable([]),
-		value = null,
-		fields,
-		path = [],
-		onchange = () => {},
-		selectedKeys = new SvelteSet(),
-		focusedKey = null,
-		snippets = {}
-	} = $props()
-	let fm = $derived.by(() => {
-		return new FieldMapper(fields)
-	})
-</script>
-
-{#each items as item, index (index)}
-	{@const template = getSnippet(snippets, fm.get('snippet', item, 'stub'))}
-	{@const pathKey = getKeyFromPath([...path, index])}
-	{@const props = fm.get('props', item) || {}}
-	<div
-		data-list-item
-		role="option"
-		data-path={pathKey}
-		aria-selected={selectedKeys.has(pathKey)}
-		aria-current={focusedKey === pathKey}
-	>
-		<svelte:boundary>
-			{#if template}
-				{@render template(item, props, onchange)}
-				{#snippet failed()}
-					<Item value={item} {fields} />
-				{/snippet}
-			{:else}
-				<Item value={item} {fields} />
-			{/if}
-		</svelte:boundary>
-	</div>
-{/each}

package/src/Message.svelte

@@ -1,11 +0,0 @@
-<script>
-	let { text = null, type = 'error', children } = $props()
-</script>
-
-<rk-message class={type}>
-	{#if children}
-		{@render children()}
-	{:else}
-		{text}
-	{/if}
-</rk-message>

package/src/MultiSelect.svelte

@@ -1,48 +0,0 @@
-<script>
-	import Select from './Select.svelte'
-	import Item from './Item.svelte'
-	import { defaultFields } from '@rokkit/core'
-
-	let className = ''
-	export { className as class }
-	export let name
-	export let value = []
-	export let options = []
-	/** @type {import('@rokkit/core').FieldMapping} */
-	export let fields = {}
-	export let using = {}
-	export let placeholder = ''
-
-	$: available = options.filter((item) => !value.includes(item))
-
-	function handleRemove(event) {
-		value = [...value.filter((item) => item !== event.detail)]
-	}
-	function handleSelect(event) {
-		if (!value.includes(event.detail)) value = [...value, event.detail]
-	}
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-</script>
-
-<Select
-	{name}
-	options={available}
-	{fields}
-	{using}
-	on:select={handleSelect}
-	class={className}
-	{placeholder}
->
-	{#if value.length > 0}
-		<items class="flex flex-wrap">
-			{#each value as item, index (index)}
-				<Item value={item} {fields} {using} removable on:remove={handleRemove} class="pill" />
-			{/each}
-		</items>
-	{:else}
-		<item class="flex w-full">
-			<svelte:component this={using.default} value={placeholder} />
-		</item>
-	{/if}
-</Select>

package/src/NestedList.svelte

@@ -1,78 +0,0 @@
-<script>
-	import { SvelteSet } from 'svelte/reactivity'
-	import {
-		defaultStateIcons,
-		getLineTypes,
-		getKeyFromPath,
-		getNestedFields,
-		hasChildren
-	} from '@rokkit/core'
-	import Node from './Node.svelte'
-	import NestedList from './NestedList.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {Array<NodeProxy>}                   [items=[]]
-	 * @property {any}                                [value=null]
-	 * @property {import('./types').FieldMapping}     fields
-	 * @property {number[]}                           [path=[]]
-	 * @property {import('./types').NodeStateIcons}   icons
-	 * @property {import('./types').ConnectionType[]} [types=[]]
-	 * @property {string}                             [focusedKey]
-	 * @property {SvelteSet}                          [selectedKeys]
-	 */
-
-	/** @type {Props} */
-	let {
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		path = [],
-		icons = {},
-		types = [],
-		focusedKey,
-		selectedKeys = new SvelteSet(),
-		stub,
-		snippets
-	} = $props()
-
-	const stateIcons = $derived({ ...defaultStateIcons.node, ...icons })
-	const childFields = $derived(getNestedFields(fields))
-	// $inspect(childFields, items[0], expandedKeys)
-</script>
-
-<rk-nested-list role="tree">
-	{#each items as item, index (index)}
-		{@const nodePath = [...path, index]}
-		{@const key = getKeyFromPath(nodePath)}
-		{@const expanded = item[fields.expanded]}
-		{@const nodeType = index === items.length - 1 ? 'last' : 'child'}
-		{@const connectors = getLineTypes(hasChildren(item, fields), types, nodeType)}
-
-		<Node
-			value={item}
-			{fields}
-			{stateIcons}
-			types={connectors}
-			focused={focusedKey === key}
-			selected={selectedKeys.has(key)}
-			{expanded}
-			path={nodePath}
-			{stub}
-			{snippets}
-		>
-			{#if hasChildren(item, fields) && expanded}
-				<NestedList
-					items={item[fields.children]}
-					{value}
-					fields={childFields}
-					path={nodePath}
-					icons={stateIcons}
-					types={connectors}
-					{focusedKey}
-					{selectedKeys}
-				/>
-			{/if}
-		</Node>
-	{/each}
-</rk-nested-list>

package/src/NestedPaginator.svelte

@@ -1,63 +0,0 @@
-<script>
-	import { defaultFields, flattenNestedList } from '@rokkit/core'
-	import Item from './Item.svelte'
-	import BreadCrumbs from './BreadCrumbs.svelte'
-	import Icon from './Icon.svelte'
-	// import { flattenNestedList } from './lib/nested'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-	export let items
-	export let value
-	export let fields
-	export let using
-
-	let trail
-	let flatList
-
-	function handleNav(event) {
-		let current = flatList.findIndex((item) => item === value)
-		let index = current
-		if (event === 'previous') {
-			while (index > 0 && !flatList[index][fields.key]) {
-				index = index - 1
-			}
-		} else {
-			while (index < flatList.length - 1 && !flatList[index][fields.key]) {
-				index = index + 1
-			}
-		}
-		if (flatList[index][fields.key]) {
-			value = flatList[index]
-			trail = findTrail(flatList, value)
-			dispatch('change', { item: value, trail })
-		}
-	}
-	function findTrail(items, value) {
-		let trail = []
-		let index = items.findIndex((item) => item === value)
-		if (index === -1) return trail
-
-		let level = items[index][fields.level]
-		while (level > 0) {
-			trail.unshift(items[index])
-			index = items.findIndex((item, i) => i < index && item[fields.level] === level - 1)
-			level = items[index][fields.level]
-		}
-		return trail
-	}
-
-	$: flatList = flattenNestedList(items, fields)
-	$: fields = { ...defaultFields, ...(fields ?? {}) }
-</script>
-
-<pages>
-	<Icon
-		name="arrow-left"
-		class="cursor-pointer"
-		label="Previous"
-		onclick={() => handleNav('previous')}
-	/>
-	<BreadCrumbs items={trail} {fields} {using} />
-	<Icon name="arrow-right" class="cursor-pointer" onclick={() => handleNav('next')} label="Next" />
-</pages>

package/src/Node.svelte

@@ -1,76 +0,0 @@
-<script>
-	import { defaultStateIcons, getKeyFromPath, getSnippet } from '@rokkit/core'
-	import Icon from './Icon.svelte'
-	import Connector from './Connector.svelte'
-	import Item from './Item.svelte'
-
-	/**
-	 * @typedef {Object}                            Props
-	 * @property {any}                              value
-	 * @property {import('./types').FieldMapping}   fields
-	 * @property {any}                              [types]
-	 * @property {import('./types').NodeStateIcons} [stateIcons]
-	 * @property {number[]}                         [path=[]]
-	 * @property {boolean}                          [focused=false]
-	 * @property {boolean}                          [selected=false]
-	 * @property {boolean}                          [expanded=false]
-	 * @property {Function}                         [children]
-	 * @property {Function}                         [stub=null]
-	 * @property {Object<string, Function>}         [snippets={}]
-	 */
-
-	/** @type {Props} */
-	let {
-		value = $bindable(null),
-		fields,
-		types = [],
-		stateIcons = defaultStateIcons.node,
-		path = [],
-		focused = false,
-		selected = false,
-		expanded = false,
-		children,
-		stub = null,
-		snippets = {}
-	} = $props()
-
-	let stateName = $derived(expanded ? 'opened' : 'closed')
-	let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
-	let state = $derived(
-		expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
-	)
-
-	const template = getSnippet(value[fields.snippet], snippets, stub)
-</script>
-
-<rk-node
-	aria-current={focused}
-	aria-selected={selected}
-	aria-expanded={expanded}
-	role="treeitem"
-	data-path={getKeyFromPath(path)}
-	data-depth={path.length}
->
-	<div class="flex flex-row items-center">
-		{#each types as type, index (index)}
-			{#if type === 'icon'}
-				<Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
-			{:else}
-				<Connector {type} />
-			{/if}
-		{/each}
-		<rk-item>
-			<svelte:boundary>
-				{#if template}
-					{@render template(value)}
-					{#snippet failed()}
-						<Item {value} {fields} />
-					{/snippet}
-				{:else}
-					<Item {value} {fields} />
-				{/if}
-			</svelte:boundary>
-		</rk-item>
-	</div>
-	{@render children?.()}
-</rk-node>

package/src/Overlay.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { dismissable } from '@rokkit/actions'
-	let { children } = $props()
-	let dismissed = $state(false)
-	let ondismiss = () => {
-		dismissed = true
-	}
-</script>
-
-<rk-overlay
-	class="absolute left-0 top-0 h-screen w-screen"
-	role="presentation"
-	class:z-1={!dismissed}
-	class:display-none={dismissed}
-	aria-hidden="true"
-	onclick={ondismiss}
-	use:dismissable
-	{ondismiss}
->
-	{@render children?.()}
-</rk-overlay>

package/src/PageNavigator.svelte

@@ -1,94 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields, defaultStateIcons } from '@rokkit/core'
-	import { Icon } from '@rokkit/atoms'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-
-	export let items = []
-	export let value = items[0]
-	export let fields = {}
-	export let numbers = false
-
-	const navigate = defaultStateIcons.navigate
-
-	let previous
-	let next
-
-	function updateOnChange(value, items) {
-		let index = items.findIndex((x) => x === value)
-		if (index === -1) value = items[0]
-		// } else {
-		previous = index > 0 ? items[index - 1] : null
-		next = index < items.length - 1 ? items[index + 1] : null
-		// }
-	}
-
-	function handleClick(item) {
-		if (item) {
-			value = item
-			dispatch('select', value)
-		}
-	}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: updateOnChange(value, items)
-
-	// $: value = items.findIndex((x) => x === value) ? value : items[0]
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<nav-pages class="grid select-none grid-cols-3 {className}" tabindex="0">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span
-		class="flex cursor-pointer items-center"
-		on:click={() => handleClick(previous)}
-		tabIndex={previous ? 0 : -1}
-	>
-		{#if previous}
-			<Icon name={navigate.left} />
-			<p>
-				{#if previous[fields.text]}
-					{previous[fields.text]}
-				{/if}
-			</p>
-		{/if}
-	</span>
-	<span class="flex items-center justify-center">
-		<block class="flex items-center">
-			{#each items as item, index (index)}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<pg
-					class:numbers
-					class:dot={!numbers}
-					class:is-selected={value === item}
-					on:click={() => handleClick(item)}
-					tabindex="0"
-					class="cursor-pointer"
-				>
-					{#if numbers}
-						{index + 1}
-					{/if}
-				</pg>
-			{/each}
-		</block>
-	</span>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span
-		class="flex cursor-pointer items-center justify-end"
-		on:click={() => handleClick(next)}
-		tabIndex={next ? 0 : -1}
-	>
-		{#if next}
-			<p class="text-right">
-				{#if next[fields.text]}
-					{next[fields.text]}
-				{/if}
-			</p>
-			<Icon name={navigate.right} />
-		{/if}
-	</span>
-</nav-pages>

package/src/PickOne.svelte

@@ -1,60 +0,0 @@
-<script>
-	// import { onMount } from 'svelte'
-	// import { $state, $derived } from 'svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {any[]} options
-	 * @property {any}   value
-	 */
-
-	/** @type Props */
-	let { options, value = $bindable() } = $props()
-
-	// const optionRefs = new Map<number, HTMLLabelElement>()
-
-	// const $indicatorStyle = $derived(() => {
-	// 	const el = optionRefs.get(value)
-	// 	if (!el) return ''
-	// 	const { offsetLeft, offsetWidth } = el
-	// 	return `transform: translateX(${offsetLeft}px); width: ${offsetWidth}px;`
-	// })
-
-	// onMount(() => {
-	// 	setTimeout(() => {
-	// 		optionRefs.get(value)?.offsetLeft
-	// 	})
-	// })
-</script>
-
-<div class="relative inline-flex rounded-md bg-gray-200 p-1" data-pickone-root role="radiogroup">
-	<!-- Indicator -->
-	<div
-		class="absolute h-full rounded-md bg-white shadow transition-all duration-300"
-		data-pickone-current
-		aria-hidden="true"
-	></div>
-
-	{#each options as option, index (index)}
-		<div
-			class="relative z-10 cursor-pointer text-sm font-medium text-gray-700"
-			data-pickone-option
-			aria-checked={option === value}
-			role="radio"
-		>
-			<label class="bg-red flex size-full px-4 py-2">
-				<input
-					type="radio"
-					name="pickone"
-					value={option}
-					class="peer hidden"
-					checked={option === value}
-					onchange={() => (value = option)}
-				/>
-				<span class="transition peer-checked:font-semibold peer-checked:text-black">
-					{option}
-				</span>
-			</label>
-		</div>
-	{/each}
-</div>

package/src/Pill.svelte

@@ -1,41 +0,0 @@
-<script>
-	import { FieldMapper, noop } from '@rokkit/core'
-	import Item from './Item.svelte'
-	import Icon from './Icon.svelte'
-	import { keyboard } from '@rokkit/actions'
-
-	/**
-	 * @type {Object} Props
-	 * @property {string|Object} [value]
-	 * @property {FieldMapper}   [mapping]
-	 * @property {boolean} [removable]
-	 * @property {boolean} [disabled]
-	 */
-
-	/** @type {ListProps} */
-	let {
-		value,
-		class: classes = '',
-		mapping = new FieldMapper(),
-		removable = false,
-		disabled = false,
-		onremove = noop
-	} = $props()
-
-	const keyMappings = {
-		remove: ['Delete', 'Backspace']
-	}
-
-	function handle(event) {
-		if (!disabled) onremove(value)
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div data-pill-root use:keyboard={keyMappings} onremove={handle} tabindex="0" class={classes}>
-	<Item {value} {mapping}></Item>
-	{#if removable}
-		<Icon name="action-close" role="button" aria-label="Remove" {disabled} onclick={handle} small
-		></Icon>
-	{/if}
-</div>

package/src/ProgressBar.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { isNil } from 'ramda'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [value]
-	 * @property {any} [max]
-	 * @property {string} [height]
-	 * @property {number} [width]
-	 */
-
-	/** @type {Props} */
-	let { class: classes = '', value = null, max = 100, height = '1.5mm' } = $props()
-
-	let indeterminate = $derived(isNil(value) || isNil(max))
-	let percentage = $derived(indeterminate ? '100%' : `${(value * 100) / max}%`)
-</script>
-
-<rk-progress class:indeterminate class={classes} style:height>
-	<value-bar class="h-full" style:width={percentage}></value-bar>
-</rk-progress>

package/src/ProgressDots.svelte

@@ -1,53 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	const dispatch = createEventDispatcher()
-
-	export let count
-	export let value = -1
-	export let current = -1
-
-	$: inprogress = current === value + 1 ? current : inprogress
-	// $: enabled = count > 0
-
-	function handleClick(e) {
-		const step = parseInt(e.target.dataset.step)
-		if (e.target.dataset.clickable === 'true') {
-			current = step
-			dispatch('change', { count, value, current })
-		}
-	}
-
-	$: steps = Array.from({ length: count }, (_, i) => i)
-</script>
-
-<span class="progress flex items-center gap-2" class:empty={count === 0}>
-	{#each steps as step, index (index)}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<dot
-			class="step border-surface-100 bg-surface-300 flex h-3 w-3 rounded-full border-2"
-			on:click={handleClick}
-			data-step={step}
-			data-active={step === current}
-			data-completed={step <= value}
-			data-clickable={step <= value || step <= inprogress}
-			role="option"
-			aria-selected={step === current}
-			tabindex="0"
-		></dot>
-	{/each}
-</span>
-
-<style lang="postcss">
-	.empty {
-		@apply border-primary-500 w-full border-b;
-	}
-	.step[data-clickable='true'] {
-		@apply cursor-pointer;
-	}
-	.step[data-completed='true'] {
-		@apply bg-primary-500;
-	}
-	.step[data-active='true'] {
-		@apply border-primary-400 bg-primary-500;
-	}
-</style>

package/src/RadioGroup.svelte

@@ -1,52 +0,0 @@
-<script>
-	import { equals } from 'ramda'
-	import { defaultStateIcons } from '@rokkit/core'
-	import { defaultMapping } from './constants'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} value
-	 * @property {any} name
-	 * @property {any} [id]
-	 * @property {import('@rokkit/core).FieldMapper} [mapping]
-	 * @property {any} [options]
-	 * @property {boolean} [readOnly]
-	 * @property {boolean} [textAfter]
-	 * @property {any} [stateIcons]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: className = '',
-		value = $bindable(),
-		name,
-		id = null,
-		mapping = $bindable(defaultMapping),
-		options = [],
-		readOnly = false,
-		textAfter = true,
-		stateIcons = defaultStateIcons.radio
-	} = $props()
-
-	let flexDirection = $derived(textAfter ? 'flex-row' : 'flex-row-reverse')
-</script>
-
-<rk-radio-group
-	{id}
-	class="flex cursor-pointer select-none flex-col {className}"
-	class:disabled={readOnly}
->
-	{#each options as item, index (index)}
-		{@const label = mapping.get('text', item)}
-		{@const itemValue = mapping.get('value', item, label)}
-
-		{@const state = equals(itemValue, value) ? 'on' : 'off'}
-
-		<label class="flex {flexDirection} items-center gap-2">
-			<input hidden type="radio" {name} bind:group={value} value={itemValue} {readOnly} />
-			<icon class={stateIcons[state]}></icon>
-			<p>{label}</p>
-		</label>
-	{/each}
-</rk-radio-group>