@rokkit/ui 1.0.0-next.111 → 1.0.0-next.113

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types.js";
+export { default as Button } from "./Button.svelte";
 export { default as Icon } from "./Icon.svelte";
 export { default as Item } from "./Item.svelte";
 export { default as Pill } from "./Pill.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.111",
+  "version": "1.0.0-next.113",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -10,9 +10,9 @@
     "access": "public"
   },
   "scripts": {
-    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "bun clean && bun tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
-    "build": "bun clean && bun prepublishOnly"
+    "build": "bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
@@ -32,11 +32,12 @@
   "dependencies": {
     "@rokkit/actions": "latest",
     "@rokkit/core": "latest",
-    "@rokkit/states": "latest",
     "@rokkit/data": "latest",
     "@rokkit/input": "latest",
+    "@rokkit/states": "latest",
     "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",
-    "ramda": "^0.30.1"
+    "ramda": "^0.30.1",
+    "typescript": "^5.8.3"
   }
 }

package/src/Button.svelte

@@ -0,0 +1,61 @@
+<script>
+	import Icon from './Icon.svelte'
+	/**
+	 * @typedef {Object} ButtonProps
+	 * @property {'default' | 'primary' | 'secondary' | 'tertiary'} variant - The variant of the button.
+	 * @property {'button' | 'submit' | 'reset'} type - The type of the button.
+	 * @property {string} [label] - The label of the button.
+	 * @property {string|import('svelte').Snippet} [leftIcon] - The left icon of the button.
+	 * @property {string|import('svelte').Snippet} [rightIcon] - The right icon of the button.
+	 * @property {import('svelte').Snippet} [children]
+	 * @property {Function} onclick - The onclick event of the button.
+	 * @property {Function} onsubmit - The onsubmit event of the button.
+	 * @property {Function} onreset - The onreset event of the button.
+	 */
+	/** @type {ButtonProps} */
+	let {
+		class: classes = '',
+		variant = 'default',
+		type = 'button',
+		leftIcon = null,
+		rightIcon = null,
+		label = null,
+		children = null,
+		description = null,
+		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
+	class={classes}
+	{disabled}
+	{type}
+	{onclick}
+	aria-label={description ?? label}
+>
+	{#if typeof leftIcon === 'string'}
+		<Icon name={leftIcon} />
+	{:else}
+		{@render leftIcon?.()}
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{:else if label}
+		{label}
+	{/if}
+
+	{#if typeof rightIcon === 'string'}
+		<Icon name={rightIcon} />
+	{:else}
+		{@render rightIcon?.()}
+	{/if}
+</button>

package/src/Icon.svelte

@@ -33,6 +33,7 @@
 
 	let emitter = $derived(createEmitter(events, ['click', 'change', 'mouseenter', 'mouseleave']))
 	function handleClick(e) {
+		if (role === 'img') return
 		e.preventDefault()
 
 		if (!disabled) {

package/src/Node.svelte

@@ -61,14 +61,14 @@
 		{/each}
 		<rk-item>
 			<svelte:boundary>
-				<!-- {#if template} -->
-				{@render template(value)}
-				{#snippet failed()}
+				{#if template}
+					{@render template(value)}
+					{#snippet failed()}
+						<Item {value} {fields} />
+					{/snippet}
+				{:else}
 					<Item {value} {fields} />
-				{/snippet}
-				<!-- {:else}
-					<Item {value} {fields} />
-				{/if} -->
+				{/if}
 			</svelte:boundary>
 		</rk-item>
 	</div>

package/src/Switch.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { equals } from 'ramda'
-	import { noop, getSnippet, FieldMapper } from '@rokkit/core'
+	import { noop, FieldMapper } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
-	import { defaultMapping } from './constants'
+	import Item from './Item.svelte'
+	// import { defaultMapping } from './constants'
 
 	/**
 	 * @typedef {Object} Props
@@ -27,7 +28,7 @@
 		...extra
 	} = $props()
 
-	let cursor = $state([])
+	// let cursor = $state([])
 
 	function toggle(direction = 1) {
 		let nextIndex
@@ -51,8 +52,8 @@
 		next: ['ArrowRight', 'ArrowDown', ' ', 'Enter'],
 		prev: ['ArrowLeft', 'ArrowUp']
 	}
-	let useComponent = $derived(!options.every((item) => [false, true].includes(item)))
-	let mapper = new FieldMapper(fields)
+	// let useComponent = $derived(!options.every((item) => [false, true].includes(item)))
+	// let mapper = new FieldMapper(fields)
 </script>
 
 {#if !Array.isArray(options) || options.length < 2}
@@ -75,13 +76,16 @@
 		onclick={handleClick}
 	>
 		{#each options as item, index (item)}
-			{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
+			<!-- {@const Template = getSnippet(extra, mapper.get('snippet', item), stub)} -->
 			<rk-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>
 				{/if}
-				{#if Template}
-					<Template value={item} {fields} />
+				{#if stub}
+					{@render stub(item, fields)}
+					<!-- <Template value={item} {fields} /> -->
+				{:else}
+					<Item value={item} {fields} />
 				{/if}
 			</rk-item>
 		{/each}

package/src/index.js

@@ -1,5 +1,6 @@
 // skipcq: JS-E1004 - Needed for exposing JS Doc types
 export * from './types.js'
+export { default as Button } from './Button.svelte'
 export { default as Icon } from './Icon.svelte'
 export { default as Item } from './Item.svelte'
 export { default as Pill } from './Pill.svelte'