@rokkit/ui 1.0.0-next.121 → 1.0.0-next.122

package/README.md

@@ -113,7 +113,7 @@ bun add @rokkit/ui
 - @rokkit/actions
 - @rokkit/core
 - @rokkit/data
-- @rokkit/input
+- @rokkit/forms
 - @rokkit/states
 - d3-scale
 - date-fns

package/dist/index.d.ts

@@ -33,11 +33,6 @@ export { default as ToggleThemeMode } from "./ToggleThemeMode.svelte";
 export { default as Overlay } from "./Overlay.svelte";
 export { default as Message } from "./Message.svelte";
 export { default as SlidingColumns } from "./SlidingColumns.svelte";
-export { default as InputField } from "./input/InputField.svelte";
-export { default as Form } from "./Form.svelte";
-export { default as FieldLayout } from "./FieldLayout.svelte";
-export { default as DataEditor } from "./DataEditor.svelte";
-export { default as NestedEditor } from "./NestedEditor.svelte";
 export { default as Stepper } from "./Stepper.svelte";
 export { default as ProgressDots } from "./ProgressDots.svelte";
 export { default as Card } from "./Card.svelte";

package/dist/tree/List.spec.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tree/Node.spec.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tree/Root.spec.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.121",
+  "version": "1.0.0-next.122",
   "description": "Data driven UI components, improving DX",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@rokkit/actions": "latest",
     "@rokkit/core": "latest",
     "@rokkit/data": "latest",
-    "@rokkit/input": "latest",
+    "@rokkit/forms": "latest",
     "@rokkit/states": "latest",
     "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",

package/src/BreadCrumbs.svelte

@@ -1,7 +1,7 @@
 <script>
-	import { getSnippet } from '@rokkit/core'
 	import Item from './Item.svelte'
-
+	import Icon from './Icon.svelte'
+	import { Proxy } from '@rokkit/states'
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class]
@@ -12,26 +12,21 @@
 	 */
 
 	/** @type {Props} */
-	let { class: classes = '', items = [], separator = '/', fields, crumb } = $props()
+	let { class: classes = '', items = [], separator = '/', fields, child } = $props()
+	let childSnippet = $derived(child ? child : defaultChild)
 </script>
 
-<rk-crumbs class={classes}>
+{#snippet defaultChild(proxy)}
+	<Item {proxy} />
+{/snippet}
+<div data-crumb-root class={classes}>
 	{#each items as item, index (index)}
+		{@const proxy = new Proxy(item, fields)}
 		{#if index > 0}
-			<span>
-				{#if separator.length === 1}
-					{separator}
-				{:else}
-					<icon class={separator}></icon>
-				{/if}
-			</span>
+			<Icon name={separator} data-crumb-separator></Icon>
 		{/if}
-		<rk-crumb class:is-selected={index === items.length - 1}>
-			{#if crumb}
-				{@render crumb(item, fields)}
-			{:else}
-				<Item value={item} {fields} />
-			{/if}
-		</rk-crumb>
+		<div data-crumb-item class:is-selected={index === items.length - 1}>
+			{@render childSnippet?.(proxy)}
+		</div>
 	{/each}
-</rk-crumbs>
+</div>

package/src/Button.svelte

@@ -25,16 +25,12 @@
 		disabled = false,
 		onclick
 	} = $props()
-
-	const primary = $derived(variant === 'primary')
-	const secondary = $derived(variant === 'secondary')
-	const tertiary = $derived(variant === 'tertiary')
 </script>
 
 <button
-	class:primary
-	class:secondary
-	class:tertiary
+	data-button-root
+	data-variant={variant}
+	data-disabled={disabled}
 	class={classes}
 	{disabled}
 	{type}

package/src/Icon.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { createEmitter } from '@rokkit/core'
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class]
@@ -21,40 +20,41 @@
 	let {
 		ref = $bindable(),
 		class: classes = '',
-		name,
+		name = '?',
 		state = null,
 		size = 'base',
 		role = 'img',
 		label = null,
 		disabled = false,
 		tabindex = $bindable(0),
-		checked = $bindable(null),
-		...events
+		checked = $bindable(),
+		onclick,
+		onchange,
+		onmouseenter,
+		onmouseleave,
+		...restProps
 	} = $props()
 
-	let emitter = $derived(createEmitter(events, ['click', 'change', 'mouseenter', 'mouseleave']))
 	function handleClick(e) {
 		if (role === 'img') return
 		e.preventDefault()
 
 		if (!disabled) {
 			if (isCheckbox) {
-				checked = !checked
-				emitter?.change(checked)
+				checked = !Boolean(checked)
+				onchange?.(checked)
 			}
-			emitter?.click()
+			onclick?.()
 		}
 	}
 
 	let isCheckbox = $derived(role === 'checkbox' || role === 'option')
 	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
-	let ariaChecked = $derived(
-		['checkbox', 'option'].includes(role) ? (checked !== null ? checked : false) : null
-	)
+	let ariaChecked = $derived(['checkbox', 'option'].includes(role) && checked)
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-icon
+<icon
 	bind:this={ref}
 	data-tag-icon
 	data-state={state}
@@ -69,8 +69,13 @@
 	onclick={handleClick}
 	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
 	tabindex={validatedTabindex}
-	onmouseenter={emitter.mouseenter}
-	onnmouseleave={emitter.nmouseleave}
+	{onmouseenter}
+	{onmouseleave}
+	{...restProps}
 >
-	<i class={name} aria-hidden="true"></i>
-</rk-icon>
+	{#if name.length <= 2}
+		<span>{name}</span>
+	{:else}
+		<i class={name} aria-hidden="true"></i>
+	{/if}
+</icon>

package/src/Item.svelte

@@ -7,12 +7,12 @@
 	 */
 
 	/** @type {Props} */
-	let { value, fields } = $props()
-	let proxy = $derived(new Proxy(value, fields))
-	let content = $derived(proxy.get('text'))
-	let ariaLabel = $derived(proxy.get('label') ?? content)
-	let icon = $derived(proxy.get('icon'))
-	let image = $derived(proxy.get('image'))
+	let { value, fields, proxy = null } = $props()
+	let proxyItem = $derived(proxy ?? new Proxy(value, fields))
+	let content = $derived(proxyItem.get('text'))
+	let ariaLabel = $derived(proxyItem.get('label') ?? content)
+	let icon = $derived(proxyItem.get('icon'))
+	let image = $derived(proxyItem.get('image'))
 </script>
 
 {#if icon}

package/src/List.svelte

@@ -52,7 +52,8 @@
 	let wrapper = new ListController(items, value, fields, { multiSelect })
 </script>
 
-<rk-list
+<div
+	data-list
 	class={classes}
 	role="listbox"
 	aria-label={name}
@@ -61,14 +62,14 @@
 	onaction={handleAction}
 >
 	{#if header}
-		<rk-header>{@render header()}</rk-header>
+		<div data-list-header>{@render header()}</div>
 	{/if}
-	<rk-body>
+	<div data-list-body>
 		{#if items.length === 0}
 			{#if empty}
 				{@render empty()}
 			{:else}
-				<rk-message>No items found.</rk-message>
+				<p>No items found.</p>
 			{/if}
 		{:else}
 			<ListBody
@@ -81,8 +82,8 @@
 				{snippets}
 			/>
 		{/if}
-	</rk-body>
+	</div>
 	{#if footer}
-		<rk-footer>{@render footer()}</rk-footer>
+		<div data-list-footer>{@render footer()}</div>
 	{/if}
-</rk-list>
+</div>

package/src/ListBody.svelte

@@ -22,7 +22,8 @@
 	{@const template = getSnippet(snippets, fm.get('snippet', item, 'stub'))}
 	{@const pathKey = getKeyFromPath([...path, index])}
 	{@const props = fm.get('props', item) || {}}
-	<rk-list-item
+	<div
+		data-list-item
 		role="option"
 		data-path={pathKey}
 		aria-selected={selectedKeys.has(pathKey)}
@@ -38,5 +39,5 @@
 				<Item value={item} {fields} />
 			{/if}
 		</svelte:boundary>
-	</rk-list-item>
+	</div>
 {/each}

package/src/Pill.svelte

@@ -32,10 +32,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-pill use:keyboard={keyMappings} onremove={handle} tabindex="0" class={classes}>
+<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}
-</rk-pill>
+</div>

package/src/Select.svelte

@@ -52,9 +52,6 @@
 		}
 	}
 
-	// $: fields = { ...defaultFields, ...fields }
-	// $: using = { default: Item, ...using }
-	// $: activeIndex = options.findIndex((item) => item === value)
 	let offsetTop = $derived(activeItem?.offsetTop + activeItem?.clientHeight ?? 0)
 </script>
 

package/src/Switch.svelte

@@ -1,35 +1,37 @@
 <script>
 	import { equals } from 'ramda'
-	import { noop, FieldMapper } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
+	import { Proxy } from '@rokkit/states'
 	import Item from './Item.svelte'
-	// import { defaultMapping } from './constants'
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {string}      [class]
-	 * @property {any}         value
-	 * @property {Array<any>}  [options]
-	 * @property {FieldMapper} [mapping]
-	 * @property {boolean}     [compact]
-	 * @property {boolean}     [disabled]
+	 * @property {string}                              [class]
+	 * @property {any}                                 value
+	 * @property {import('@rokkit/core').FieldMapping} fields
+	 * @property {Array<any>}                          [options]
+	 * @property {boolean}                             [compact]
+	 * @property {boolean}                             [disabled]
 	 */
 
 	/** @type {Props} */
 	let {
 		class: classes = '',
 		value = $bindable(),
+		description = 'Toggle Switch',
 		options = [false, true],
 		fields,
 		compact = false,
 		disabled = false,
-		onchange = noop,
-		stub,
+		onchange,
+		child,
 		...extra
 	} = $props()
 
-	// let cursor = $state([])
-
+	/**
+	 * Toggles the value of the switch
+	 * @param {number}  direction - The direction to toggle the switch
+	 */
 	function toggle(direction = 1) {
 		let nextIndex
 		const index = options.indexOf(value)
@@ -43,6 +45,10 @@
 		onchange(value)
 	}
 
+	/**
+	 *
+	 * @param event
+	 */
 	function handleClick(event) {
 		const index = event.target.closest('[data-path]').dataset.path
 		value = options[index]
@@ -52,20 +58,25 @@
 		next: ['ArrowRight', 'ArrowDown', ' ', 'Enter'],
 		prev: ['ArrowLeft', 'ArrowUp']
 	}
-	// let useComponent = $derived(!options.every((item) => [false, true].includes(item)))
-	// let mapper = new FieldMapper(fields)
+
+	let childSnippet = $derived(child ? child : defaultChild)
 </script>
 
+{#snippet defaultChild(proxy)}
+	<Item {proxy} />
+{/snippet}
+
 {#if !Array.isArray(options) || options.length < 2}
-	<rk-error>Items should be an array with at least two items.</rk-error>
+	<div data-error>Items should be an array with at least two items.</div>
 {:else}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<rk-switch
+	<div
 		class={classes}
-		class:is-off={options.length === 2 && equals(value, options[0])}
-		class:is-on={options.length === 2 && equals(value, options[1])}
-		class:compact
-		aria-label="Toggle Switch"
+		data-switch-root
+		data-switch-off={options.length === 2 && equals(value, options[0])}
+		data-switch-on={options.length === 2 && equals(value, options[1])}
+		data-switch-compact={compact}
+		aria-label={description}
 		aria-orientation="horizontal"
 		aria-disabled={disabled}
 		tabindex="0"
@@ -75,19 +86,21 @@
 		onprev={() => toggle(-1)}
 		onclick={handleClick}
 	>
-		{#each options as item, index (item)}
-			<!-- {@const Template = getSnippet(extra, mapper.get('snippet', item), stub)} -->
-			<rk-item class="relative" role="option" aria-selected={equals(item, value)} data-path={index}>
+		{#each options as item, index (index)}
+			{@const proxy = new Proxy(item, fields)}
+			<div
+				data-switch-item
+				class="relative"
+				role="option"
+				aria-selected={equals(item, value)}
+				data-path={index}
+			>
 				{#if equals(item, value)}
-					<rk-indicator class="absolute bottom-0 left-0 right-0 top-0"></rk-indicator>
+					<div data-switch-mark class="absolute bottom-0 left-0 right-0 top-0"></div>
 				{/if}
-				{#if stub}
-					{@render stub(item, fields)}
-					<!-- <Template value={item} {fields} /> -->
-				{:else}
-					<Item value={item} {fields} />
-				{/if}
-			</rk-item>
+
+				{@render childSnippet?.(proxy)}
+			</div>
 		{/each}
-	</rk-switch>
+	</div>
 {/if}

package/src/Tabs.svelte

@@ -1,96 +1,166 @@
 <script>
-	import { defaultFields, defaultStateIcons, noop, getSnippet, FieldMapper } from '@rokkit/core'
-	import { ListController } from '@rokkit/states'
+	import { createEmitter, getKeyFromPath, defaultStateIcons } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
+	import { ListController } from '@rokkit/states'
+	import { Proxy } from '@rokkit/states'
+	import { has, equals, pick } from 'ramda'
 	import Icon from './Icon.svelte'
-	import Item from './Item.svelte'
 
 	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [options]
-	 * @property {import('@rokkit/core').FieldMapping} [fields]
-	 * @property {any} [value]
-	 * @property {boolean} [below]
-	 * @property {string} [align]
-	 * @property {boolean} [editable]
-	 * @property {any} [icons]
+	 * @typedef {Object} FieldMapping
+	 * @property {string} [id] - Field to use for item ID
+	 * @property {string} [label] - Field to use for item label/text
+	 * @property {string} [value] - Field to use for item value
+	 * @property {string} [content] - Field to use for tab content
 	 */
 
-	/** @type {Props} */
+	/**
+	 * @typedef {Object} TabProps
+	 * @property {string}                   [class]       - Additional CSS class names
+	 * @property {string}                   [name]        - Name for accessibility
+	 * @property {any[]}                    [items]       - Array of tab items to display
+	 * @property {FieldMapping}             [fields]      - Field mappings for extracting data
+	 * @property {'horizontal'|'vertical'}  [orientation] - Orientation of the tab bar
+	 * @property {'before' | 'after' }      [position]    - Position of the tab bar
+	 * @property {'start'|'center'|'end'}   [align]       - Alignment of the tab bar
+	 * @property {any}                      [value]       - Selected tab value (bindable)
+	 * @property {number}                   [tabindex]    - Tab index for keyboard navigation
+	 * @property {boolean}                  [editable]    - Whether tabs can be added/removed
+	 * @property {string}                   [placeholder] - Placeholder text for input field
+	 * @property {import('svelte').Snippet} [child]       - Snippet for rendering tab headers
+	 * @property {import('svelte').Snippet} [children]    - Snippet for rendering tab content
+	 * @property {import('svelte').Snippet} [empty]       - Snippet for rendering empty state
+	 * @property {Function}                 [onselect]    - Callback when tab is selected
+	 * @property {Function}                 [onchange]    - Callback when tab changes
+	 * @property {Function}                 [onmove]      - Callback when focus moves
+	 * @property {Function}                 [onadd]       - Callback when tab is added
+	 * @property {Function}                 [onremove]    - Callback when tab is removed
+	 */
+
+	/** @type {TabProps} */
 	let {
-		class: className = '',
-		options = $bindable([]),
-		value = $bindable(null),
-		icons = $bindable(defaultStateIcons.action),
-		fields = defaultFields,
-		below = false,
-		align = 'left',
+		class: classes = '',
+		name = 'tabs',
+		items = $bindable([]),
+		fields = {},
+		value = $bindable(),
+		orientation = 'horizontal',
+		align = 'start',
+		position = 'before',
+		tabindex = 0,
 		editable = false,
-		onremove = noop,
-		onadd = noop,
-		onselect = noop,
-		stub,
-		...extra
+		child,
+		children,
+		empty,
+		placeholder = 'Select a tab to view its content.',
+		icons,
+		onselect,
+		onchange,
+		onmove,
+		onadd,
+		onremove,
+		...snippets
 	} = $props()
 
-	function handleRemove(event) {
-		if (typeof event.detail === Object) {
-			event.detail[fields.isDeleted] = true
-		} else {
-			options = options.filter((i) => i !== event.detail)
-		}
+	/** @type {Proxy[]} */
+	let proxyItems = $derived(items.map((item) => new Proxy(item, fields)))
+	let childSnippet = $derived(child ?? defaultChild)
+	let childrenSnippet = $derived(children ?? defaultChildren)
+	let emptyMessage = $derived(empty ?? defaultEmpty)
+	let activeItem = $derived(proxyItems.find((proxy) => equals(proxy.value, value)))
+
+	function handleAction(event) {
+		const { name, data } = event.detail
 
-		onremove({ item: event.detail })
+		if (has(name, emitter)) {
+			value = data.value
+			emitter[name](data)
+		}
 	}
-	function handleAdd(event) {
-		event.stopPropagation()
-		onadd()
+
+	function handleAdd() {
+		onadd?.()
 	}
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
 
-		onselect({ item: value, indices: cursor })
+	function handleRemove(item) {
+		onremove?.(item)
 	}
-	let stateIcons = $derived({ ...defaultStateIcons.action, ...icons })
-	let filtered = $derived(options.filter((item) => !item[fields.deleted]))
-	let wrapper = $derived(new ListController(options, value, fields))
-	let mapper = new FieldMapper(fields)
+	let tabIcons = $derived({ ...pick(['add', 'close'], defaultStateIcons.action), ...icons })
+	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
+	let wrapper = new ListController(items, value, fields)
+	$effect(() => {
+		wrapper.update(items)
+	})
 </script>
 
-<rk-tabs
-	class="flex w-full {className}"
-	class:is-below={below}
-	class:justify-center={align === 'center'}
-	class:justify-end={align === 'right'}
-	tabindex="0"
-	role="listbox"
-	use:navigator={{ wrapper, horizontal: true }}
-	onaction={handleNav}
-	onremove={handleRemove}
-	onadd={handleAdd}
+{#snippet defaultChild(item)}
+	{item.get('text') || item.get('label') || item.get('name')}
+{/snippet}
+
+{#snippet defaultChildren(item)}
+	<div data-tab-content-default>
+		{item.get('content')}
+	</div>
+{/snippet}
+
+{#snippet defaultEmpty()}
+	No tabs available.
+{/snippet}
+
+<div
+	data-tabs-root
+	data-orientation={orientation}
+	data-position={position}
+	data-align={align}
+	class={classes}
+	role="tablist"
+	aria-label={name}
+	use:navigator={{ wrapper, orientation }}
+	{tabindex}
+	onaction={handleAction}
 >
-	{#each filtered as item, index (index)}
-		{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
-		<rk-tab>
-			{#if Template}
-				<Template value={item} {fields} />
-			{:else}
-				<Item value={item} {fields} />
-			{/if}
-			{#if editable}
-				<Icon
-					name="remove"
-					role="button"
-					label="Delete Tab"
-					size="small"
-					onclick={() => handleRemove(item)}
-				/>
-			{/if}
-		</rk-tab>
-	{/each}
-	{#if editable}
-		<Icon name="add" role="button" label="Add Tab" size="small" onclick={handleAdd} />
-	{/if}
-</rk-tabs>
+	<div data-tabs-list>
+		{#each proxyItems as item, index (index)}
+			{@const key = getKeyFromPath([index])}
+			{@const isSelected = equals(item.value, value)}
+			{@const isFocused = wrapper.focusedKey === key}
+			<div
+				data-tabs-trigger
+				data-path={getKeyFromPath([index])}
+				role="tab"
+				aria-selected={isSelected}
+				aria-controls="tab-panel-{index}"
+				class:selected={isSelected}
+				class:focused={isFocused}
+			>
+				{@render childSnippet(item)}
+				{#if editable}
+					<Icon
+						data-icon-remove
+						name={tabIcons.close}
+						role="button"
+						onclick={() => handleRemove(item.value)}
+					/>
+				{/if}
+			</div>
+		{/each}
+		{#if editable}
+			<Icon data-icon-add name={tabIcons.add} role="button" onclick={handleAdd} />
+		{/if}
+	</div>
+
+	<!-- Tab Content -->
+	<div data-tabs-content role="tabpanel">
+		{#if proxyItems.length === 0}
+			<div data-empty>
+				{@render emptyMessage()}
+			</div>
+		{:else if activeItem}
+			{@render childrenSnippet(activeItem)}
+		{:else}
+			<div data-placeholder>
+				{placeholder}
+			</div>
+		{/if}
+	</div>
+</div>