@rokkit/ui 1.0.0-next.118 → 1.0.0-next.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.118",
+  "version": "1.0.0-next.119",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/Shine.svelte

@@ -3,7 +3,7 @@
 	// import { clsx } from 'clsx'
 
 	let {
-		color = 'var(--primary-500)',
+		color = 'rgb(var(--primary-500))',
 		radius = 300,
 		/** Depth of effect */
 		depth = 1,

package/src/Toggle.svelte

@@ -1,13 +1,13 @@
 <script>
-	// import { FieldMapper, noop } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
 	import Item from './Item.svelte'
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {any}        value
-	 * @property {string}     [class]
-	 * @property {Array<any>} [options]
+	 * @property {any}         value
+	 * @property {string}      [class]
+	 * @property {boolean}     [disabled] = false
+	 * @property {Array<any>}  [options]
 	 * @property {FieldMapper} [mapping]
 	 */
 
@@ -17,6 +17,7 @@
 		value = $bindable(null),
 		options = [false, true],
 		fields,
+		disabled = false,
 		label = 'toggle',
 		onchange
 	} = $props()
@@ -27,6 +28,8 @@
 	}
 
 	function toggle(direction = 1) {
+		if (disabled) return
+
 		let nextIndex
 		const index = options.indexOf(value)
 
@@ -41,7 +44,7 @@
 	}
 </script>
 
-<rk-toggle class={classes}>
+<div data-toggle-root data-disabled={disabled} class={classes}>
 	<button
 		use:keyboard={keyMappings}
 		onnext={() => toggle()}
@@ -51,4 +54,4 @@
 	>
 		<Item {value} {fields} />
 	</button>
-</rk-toggle>
+</div>