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

package/dist/index.d.ts

@@ -38,3 +38,4 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.122",
+  "version": "1.0.0-next.123",
   "description": "Data driven UI components, improving DX",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@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/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/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/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/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/Tabs.svelte

@@ -18,7 +18,7 @@
 	 * @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 {any[]}                    [options]       - Array of tab options 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
@@ -27,8 +27,8 @@
 	 * @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} [tabItem]       - Snippet for rendering tab headers
+	 * @property {import('svelte').Snippet} [tabPanel]    - 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
@@ -41,7 +41,7 @@
 	let {
 		class: classes = '',
 		name = 'tabs',
-		items = $bindable([]),
+		options = $bindable([]),
 		fields = {},
 		value = $bindable(),
 		orientation = 'horizontal',
@@ -49,8 +49,8 @@
 		position = 'before',
 		tabindex = 0,
 		editable = false,
-		child,
-		children,
+		tabItem,
+		tabPanel,
 		empty,
 		placeholder = 'Select a tab to view its content.',
 		icons,
@@ -59,15 +59,14 @@
 		onmove,
 		onadd,
 		onremove,
-		...snippets
+		...restProps
 	} = $props()
 
 	/** @type {Proxy[]} */
-	let proxyItems = $derived(items.map((item) => new Proxy(item, fields)))
-	let childSnippet = $derived(child ?? defaultChild)
-	let childrenSnippet = $derived(children ?? defaultChildren)
+	let proxyItems = $derived(options.map((item) => new Proxy(item, fields)))
+	let tabItemSnippet = $derived(tabItem ?? defaultItem)
+	let tabPanelSnippet = $derived(tabPanel ?? defaultPanel)
 	let emptyMessage = $derived(empty ?? defaultEmpty)
-	let activeItem = $derived(proxyItems.find((proxy) => equals(proxy.value, value)))
 
 	function handleAction(event) {
 		const { name, data } = event.detail
@@ -87,18 +86,17 @@
 	}
 	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)
-	})
+	let wrapper = new ListController(options, value, fields)
+
+	$effect(() => wrapper.update(options))
 </script>
 
-{#snippet defaultChild(item)}
+{#snippet defaultItem(item)}
 	{item.get('text') || item.get('label') || item.get('name')}
 {/snippet}
 
-{#snippet defaultChildren(item)}
-	<div data-tab-content-default>
+{#snippet defaultPanel(item)}
+	<div data-tabs-content>
 		{item.get('content')}
 	</div>
 {/snippet}
@@ -108,6 +106,7 @@
 {/snippet}
 
 <div
+	{...restProps}
 	data-tabs-root
 	data-orientation={orientation}
 	data-position={position}
@@ -119,12 +118,21 @@
 	{tabindex}
 	onaction={handleAction}
 >
+	{#if proxyItems.length === 0}
+		<div data-tabs-empty>
+			{@render emptyMessage()}
+		</div>
+	{:else if wrapper.focusedKey === null && value === null}
+		<div data-tabs-placeholder>
+			{placeholder}
+		</div>
+	{/if}
 	<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
+			<button
 				data-tabs-trigger
 				data-path={getKeyFromPath([index])}
 				role="tab"
@@ -132,8 +140,10 @@
 				aria-controls="tab-panel-{index}"
 				class:selected={isSelected}
 				class:focused={isFocused}
+				tabindex="0"
+				id={`tab-${index}`}
 			>
-				{@render childSnippet(item)}
+				{@render tabItemSnippet(item)}
 				{#if editable}
 					<Icon
 						data-icon-remove
@@ -142,25 +152,25 @@
 						onclick={() => handleRemove(item.value)}
 					/>
 				{/if}
-			</div>
+			</button>
 		{/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>
+	<!-- Tab Panels -->
+	{#each proxyItems as item, index (index)}
+		{@const isVisible = equals(item.value, value)}
+
+		<div
+			data-tabs-panel
+			role="tabpanel"
+			id="tab-panel-{index}"
+			aria-labelledby="tab-{index}"
+			data-panel-active={isVisible}
+		>
+			{@render tabPanelSnippet(item)}
+		</div>
+	{/each}
 </div>

package/src/index.js

@@ -45,3 +45,4 @@ 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/src/TabsOld.svelte

@@ -1,96 +0,0 @@
-<script>
-	import { defaultFields, defaultStateIcons, noop, getSnippet, FieldMapper } from '@rokkit/core'
-	import { ListController } from '@rokkit/states'
-	import { navigator } from '@rokkit/actions'
-	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]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: className = '',
-		options = $bindable([]),
-		value = $bindable(null),
-		icons = $bindable(defaultStateIcons.action),
-		fields = defaultFields,
-		below = false,
-		align = 'left',
-		editable = false,
-		onremove = noop,
-		onadd = noop,
-		onselect = noop,
-		stub,
-		...extra
-	} = $props()
-
-	function handleRemove(event) {
-		if (typeof event.detail === Object) {
-			event.detail[fields.isDeleted] = true
-		} else {
-			options = options.filter((i) => i !== event.detail)
-		}
-
-		onremove({ item: event.detail })
-	}
-	function handleAdd(event) {
-		event.stopPropagation()
-		onadd()
-	}
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		onselect({ item: value, indices: cursor })
-	}
-	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)
-</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}
->
-	{#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>