@rokkit/ui 1.0.0-next.120 → 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.120",
+  "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

@@ -12,7 +12,7 @@
 	 * @property {boolean} [disabled]
 	 */
 
-	/** @type {Props} */
+	/** @type {ListProps} */
 	let {
 		value,
 		class: classes = '',
@@ -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}