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

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,13 +33,9 @@ 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";
 export { default as Shine } from "./Shine.svelte";
 export { default as Tilt } from "./Tilt.svelte";
+export { default as GraphPaper } from "./GraphPaper.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.123",
   "description": "Data driven UI components, improving DX",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -34,11 +34,11 @@
     "@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",
-    "ramda": "^0.30.1",
-    "typescript": "^5.8.3"
+    "ramda": "^0.31.3",
+    "typescript": "^5.9.2"
   }
 }

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/Card.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { Proxy } from '@rokkit/states'
-	let { class: classNames = '', value = $bindable(), fields, child, onClick } = $props()
+	let { class: classNames = '', value = $bindable(), fields, child, children, onClick } = $props()
 
 	const proxy = $state(new Proxy(value, fields))
 	const childSnippet = $derived(child ?? defaultChild)
@@ -36,6 +36,10 @@
 		tabindex="-1"
 		class={classNames}
 	>
-		{@render childSnippet(proxy)}
+		{#if children}
+			{@render children()}
+		{:else}
+			{@render childSnippet(proxy)}
+		{/if}
 	</div>
 {/if}

package/src/GraphPaper.svelte

@@ -0,0 +1,43 @@
+<script>
+	let {
+		class: className = '',
+		unit = '.5rem',
+		majorGridSize = 5,
+		minorGridThickness = 0.5,
+		majorGridThickness = 0.5,
+		children
+	} = $props()
+</script>
+
+<div
+	data-graph-paper
+	class="flex flex-col {className}"
+	style:--unit={unit}
+	style:--size="calc( {majorGridSize} * {unit})"
+	style:--minor-grid="{minorGridThickness}px"
+	style:--major-grid="{majorGridThickness}px"
+>
+	<content class="flex flex-col">
+		{@render children?.()}
+	</content>
+</div>
+
+<style>
+	[data-graph-paper] {
+		background-image:
+			linear-gradient(currentColor var(--major-grid), transparent var(--major-grid)),
+			linear-gradient(90deg, currentColor var(--major-grid), transparent var(--major-grid)),
+			linear-gradient(currentColor var(--minor-grid), transparent var(--minor-grid)),
+			linear-gradient(90deg, currentColor var(--minor-grid), transparent var(--minor-grid));
+		background-size:
+			var(--size) var(--size),
+			var(--size) var(--size),
+			var(--unit) var(--unit),
+			var(--unit) var(--unit);
+		background-position:
+			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
+			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
+			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
+			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid));
+	}
+</style>

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/PickOne.svelte

@@ -0,0 +1,60 @@
+<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

@@ -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/ProgressDots.svelte

@@ -24,7 +24,7 @@
 	{#each steps as step, index (index)}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<dot
-			class="step flex h-3 w-3 rounded-full border-2 border-neutral-100 bg-neutral-300"
+			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}

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/Stepper.svelte

@@ -45,7 +45,7 @@
 		{#each data as { label }, stage (stage)}
 			{#if label}
 				<p
-					class="col-span-3 flex w-full justify-center text-center font-medium leading-loose text-neutral-800"
+					class="text-surface-800 col-span-3 flex w-full justify-center text-center font-medium leading-loose"
 					class:pending={stage > currentStage}
 				>
 					{label}
@@ -61,6 +61,6 @@
 		grid-template-columns: repeat(var(--count), 2fr 6fr 2fr);
 	}
 	.pending {
-		@apply font-light text-neutral-500;
+		@apply text-surface-500 font-light;
 	}
 </style>

package/src/Summary.svelte

@@ -3,7 +3,7 @@
 	/**
 	 * @typedef {Object} Props
 	 * @property {import('@rokkit/states').NodeProxy} value
-	 * @property {boolean} [expanded]
+	 * @property {Boolean} [expanded]
 	 */
 
 	/** @type {Props} */

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}