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

package/dist/index.d.ts

@@ -40,3 +40,6 @@ 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.113",
+  "version": "1.0.0-next.115",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -20,7 +20,6 @@
     "dist/**/*.d.ts"
   ],
   "exports": {
-    "./src": "./src",
     "./package.json": "./package.json",
     "./utils": "./src/lib/index.js",
     ".": {

package/src/Card.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { Proxy } from '@rokkit/states'
+	let { class: classNames = '', value = $bindable(), fields, child, onClick } = $props()
+
+	const proxy = $state(new Proxy(value, fields))
+	const childSnippet = $derived(child ?? defaultChild)
+	const href = $derived(proxy.get('href'))
+
+	/**
+	 * Handles enter key
+	 * @param {KeyboardEvent} event
+	 */
+	function handleKeyUp(event) {
+		if (event.key === 'Enter') onClick?.()
+	}
+</script>
+
+{#snippet defaultChild(/** @type {Proxy}*/ proxy)}
+	<icon class="flex flex-col">
+		<i class={proxy.get('icon')}></i>
+	</icon>
+	<h1>{proxy.get('title')}</h1>
+	<h2>{proxy.get('description')}</h2>
+{/snippet}
+
+{#if href}
+	<a {href} data-card-root class={classNames}>
+		{@render childSnippet(proxy)}
+	</a>
+{:else}
+	<div
+		data-card-root
+		onclick={onClick}
+		onkeyup={handleKeyUp}
+		role="button"
+		tabindex="-1"
+		class={classNames}
+	>
+		{@render childSnippet(proxy)}
+	</div>
+{/if}

package/src/Connector.svelte

@@ -12,10 +12,11 @@
 
 <span
 	class="grid h-full w-4 min-w-4 grid-cols-2 grid-rows-2"
-	class:line-empty={validatedType === 'empty'}
-	class:line-child={validatedType === 'child'}
-	class:line-sibling={validatedType === 'sibling'}
-	class:line-last={validatedType === 'last'}
+	data-tag-tree-line
+	data-tag-line-empty={validatedType === 'empty' ? '' : undefined}
+	data-tag-line-child={validatedType === 'child' ? '' : undefined}
+	data-tag-line-sibling={validatedType === 'sibling' ? '' : undefined}
+	data-tag-line-last={validatedType === 'last' ? '' : undefined}
 >
 	{#if validatedType === 'last'}
 		{#if rtl}

package/src/DropSearch.svelte

@@ -24,7 +24,7 @@
 	}
 </script>
 
-<Select {name} bind:value options={filtered} {...restProps} {fields} onselect={handleSelect}>
+<Select {name} bind:value bind:options={filtered} {...restProps} {fields} onselect={handleSelect}>
 	<span class="flex flex-grow">
 		<input
 			type="text"

package/src/Icon.svelte

@@ -6,7 +6,7 @@
 	 * @property {any} name
 	 * @property {any} [state]
 	 * @property {string} [size]
-	 * @property {string} [role]
+	 * @property {'img'|'button'|'checkbox'|'option'} [role]
 	 * @property {any} [label]
 	 * @property {boolean} [disabled]
 	 * @property {number} [tabindex]
@@ -19,6 +19,7 @@
 
 	/** @type {Props} */
 	let {
+		ref = $bindable(),
 		class: classes = '',
 		name,
 		state = null,
@@ -37,7 +38,7 @@
 		e.preventDefault()
 
 		if (!disabled) {
-			if (role === 'checkbox' || role === 'option') {
+			if (isCheckbox) {
 				checked = !checked
 				emitter?.change(checked)
 			}
@@ -45,6 +46,7 @@
 		}
 	}
 
+	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
@@ -53,18 +55,19 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <rk-icon
+	bind:this={ref}
+	data-tag-icon
+	data-state={state}
+	data-tag-button={role === 'button' ? true : undefined}
+	data-tag-checkbox={isCheckbox ? true : undefined}
+	data-size={size}
+	data-disabled={disabled}
 	class={classes}
-	class:small={size === 'small'}
-	class:medium={size === 'medium'}
-	class:large={size === 'large'}
-	class:disabled
 	{role}
 	aria-label={label ?? name}
 	aria-checked={ariaChecked}
 	onclick={handleClick}
 	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
-	data-state={state}
-	data-tag="icon"
 	tabindex={validatedTabindex}
 	onmouseenter={emitter.mouseenter}
 	onnmouseleave={emitter.nmouseleave}

package/src/Link.svelte

@@ -12,7 +12,7 @@
 
 	/** @type {Props} */
 	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
-	let url = $derived(mapping.get('url', value, href))
+	let url = $derived(mapping.get('href', value, href))
 	let props = $derived({ ...mapping.get('props', value, {}), ...rest })
 </script>
 

package/src/ListEditor.svelte

@@ -32,7 +32,7 @@
 <list-editor class="flex {className}">
 	<List
 		bind:items={value}
-		value={item}
+		bind:value={item}
 		{fields}
 		using={registry.components}
 		on:select={handleSelect}

package/src/Select.svelte

@@ -8,21 +8,22 @@
 	// import ListItems from './ListItems.svelte'
 	import Item from './Item.svelte'
 
-	let className = ''
-	export { className as class }
-	export let name = null
-	export let options = []
-	/** @type {import('@rokkit/core').FieldMapping} */
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let placeholder = ''
+	let {
+		class: className = '',
+		name = null,
+		options = $bindable([]),
+		fields,
+		using = {},
+		value = $bindable(null),
+		placeholder = '',
+		currentItem
+	} = $props()
 
-	let activeIndex
-	let open = false
-	let offsetTop
+	let activeIndex = $state(-1)
+	let open = $state(false)
+	// let offsetTop
 	let icons = defaultStateIcons.selector
-	let activeItem
+	let activeItem = $state(null)
 
 	function handleSelect() {
 		open = false
@@ -51,10 +52,10 @@
 		}
 	}
 
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-	$: activeIndex = options.findIndex((item) => item === value)
-	$: offsetTop = activeItem?.offsetTop + activeItem?.clientHeight ?? 0
+	// $: fields = { ...defaultFields, ...fields }
+	// $: using = { default: Item, ...using }
+	// $: activeIndex = options.findIndex((item) => item === value)
+	let offsetTop = $derived(activeItem?.offsetTop + activeItem?.clientHeight ?? 0)
 </script>
 
 <input-select
@@ -65,27 +66,28 @@
 	aria-label={name}
 	use:dismissable
 	use:navigable={{ horizontal: false, vertical: true }}
-	on:focus={() => (open = true)}
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
-	on:previous={handlePrevious}
-	on:next={handleNext}
-	on:select={handleKeySelect}
+	onfocus={() => (open = true)}
+	onblur={() => (open = false)}
+	ondismiss={() => (open = false)}
+	onprevious={handlePrevious}
+	onnext={handleNext}
+	onselect={handleKeySelect}
 >
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<selected-item
-		on:click|stopPropagation={() => (open = !open)}
+		onclick={() => (open = !open)}
 		class="flex w-full items-center"
 		bind:this={activeItem}
 		role="option"
 		tabindex="-1"
 		aria-selected={value !== null && !open}
 	>
-		<slot>
-			<item>
-				<svelte:component this={using.default} value={value ?? placeholder} {fields} />
-			</item>
-		</slot>
+		<item>
+			{#if currentItem}
+				{@render currentItem(value, fields)}
+			{/if}
+			<Item value={value ?? placeholder} {fields} />
+		</item>
 		{#if open}
 			<Icon name={icons.opened} label="opened" tabindex="-1" />
 		{:else}
@@ -102,7 +104,14 @@
 				{using}
 			/>
 		</list> -->
-			<List items={options} {fields} {using} bind:value on:select={handleSelect} tabindex="-1" />
+			<List
+				bind:items={options}
+				{fields}
+				{using}
+				bind:value
+				on:select={handleSelect}
+				tabindex="-1"
+			/>
 		</Slider>
 	{/if}
 </input-select>

package/src/Shine.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { id } from '@rokkit/core'
+	// import { clsx } from 'clsx'
+
+	let {
+		color = 'var(--primary-500)',
+		radius = 300,
+		/** Depth of effect */
+		depth = 1,
+		/** Represents the height of the surface for a light filter primitive */
+		surfaceScale = 2,
+		/** The bigger the value the bigger the reflection */
+		specularConstant = 0.75,
+		/** controls the focus for the light source. The bigger the value the brighter the light */
+		specularExponent = 120,
+		children,
+		...restProps
+	} = $props()
+
+	const filterId = id('filter')
+
+	let mouse = $state({ x: 0, y: 0 })
+	let wrapperBox = $state({ left: 0, top: 0 })
+	/** @type {HTMLDivElement|null} */
+	let wrapperEl = null
+
+	/**
+	 *
+	 * @param {PointerEvent} e
+	 */
+	function onPointerMove(e) {
+		wrapperBox = wrapperEl?.getBoundingClientRect() ?? { left: 0, top: 0 }
+		mouse = { x: e.clientX, y: e.clientY }
+	}
+
+	function onScroll() {
+		wrapperBox = wrapperEl?.getBoundingClientRect() ?? { left: 0, top: 0 }
+	}
+</script>
+
+<svelte:window onpointermove={onPointerMove} onscroll={onScroll} />
+
+<svg data-shine-filter class="pointer-events-none fixed inset-0">
+	<filter id={filterId} color-interpolation-filters="sRGB">
+		<feGaussianBlur in="SourceAlpha" stdDeviation={depth} />
+
+		<feSpecularLighting
+			result="light-source"
+			{surfaceScale}
+			{specularConstant}
+			{specularExponent}
+			lighting-color={color}
+		>
+			<fePointLight x={mouse.x - wrapperBox.left} y={mouse.y - wrapperBox.top} z={radius} />
+		</feSpecularLighting>
+
+		<feComposite result="reflections" in="light-source" in2="SourceAlpha" operator="in" />
+
+		<feComposite
+			in="SourceGraphic"
+			in2="reflections"
+			operator="arithmetic"
+			k1="0"
+			k2="1"
+			k3="1"
+			k4="0"
+		/>
+	</filter>
+</svg>
+
+<div
+	data-shine-root
+	style:filter="url(#{filterId})"
+	{...restProps}
+	class="inline-block"
+	bind:this={wrapperEl}
+>
+	{@render children?.()}
+</div>

package/src/SlidingColumns.svelte

@@ -3,7 +3,7 @@
 	import { fly, fade } from 'svelte/transition'
 	import { cubicInOut } from 'svelte/easing'
 
-	let { activeIndex = 0, columns = $bindable([]) } = $props()
+	let { activeIndex = $bindable(0), columns = $bindable([]) } = $props()
 	let width = $state()
 	let offset = $state(1)
 
@@ -20,6 +20,8 @@
 			offset = -1
 		}
 	}
+
+	let activeColumn = $derived(columns[activeIndex])
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -27,26 +29,22 @@
 	use:swipeable
 	onswipeleft={handlePrevious}
 	onswiperight={handleNext}
-	use:navigable
+	use:navigable={{ orientation: 'horizontal' }}
 	onprevious={handlePrevious}
 	onnext={handleNext}
 	tabindex={0}
 	class="relative grid h-full w-full overflow-hidden"
 	bind:clientWidth={width}
 >
-	{#each columns as column, index (index)}
-		{#if index === activeIndex}
-			<rk-segment
-				class="slide absolute h-full w-full {column}"
-				in:fly={{ x: offset * width, duration: 1000, easing: cubicInOut }}
-				out:fade={{
-					x: -1 * offset * width,
-					duration: 1000,
-					easing: cubicInOut
-				}}
-			>
-				{column}
-			</rk-segment>
-		{/if}
-	{/each}
+	<rk-segment
+		class="slide absolute h-full w-full"
+		in:fly={{ x: offset * width, duration: 1000, easing: cubicInOut }}
+		out:fade={{
+			x: -1 * offset * width,
+			duration: 1000,
+			easing: cubicInOut
+		}}
+	>
+		{activeColumn}
+	</rk-segment>
 </rk-container>

package/src/Tilt.svelte

@@ -0,0 +1,66 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	import { clsx } from 'clsx'
+
+	let {
+		maxRotation = 10,
+		setBrightness = false,
+		perspective = 600,
+		class: classNames = undefined,
+		children
+	} = $props()
+
+	let width = $state(0)
+	let height = $state(0)
+
+	let rotateX = $state(0)
+	let rotateY = $state(0)
+	let brightness = $state(1)
+
+	let scaleX = $derived(scaleLinear().domain([0, height]).range([-maxRotation, maxRotation]))
+	let scaleY = $derived(scaleLinear().domain([0, width]).range([maxRotation, -maxRotation]))
+	let scaleBrightness = $derived(scaleLinear().domain([0, height]).range([2.0, 1.0]))
+
+	/**
+	 *
+	 * @param {MouseEvent} e
+	 */
+	function onMouseMove(e) {
+		rotateY = scaleY(e.offsetX)
+		rotateX = scaleX(e.offsetY)
+
+		if (setBrightness) {
+			brightness = scaleBrightness(e.offsetY)
+		}
+	}
+
+	/**
+	 *
+	 */
+	function onMouseLeave() {
+		rotateX = 0
+		rotateY = 0
+		brightness = 1
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	data-tilt-root
+	style:--perspective="{perspective}px"
+	style:--rotateX="{rotateX}deg"
+	style:--rotateY="{rotateY}deg"
+	style:--brightness={brightness}
+	class={clsx(
+		'[perspective:var(--perspective)]',
+		'[&>*]:[transform:rotateX(var(--rotateX))_rotateY(var(--rotateY))]',
+		'[&>*]:brightness-[var(--brightness)]',
+		classNames
+	)}
+	bind:clientWidth={width}
+	bind:clientHeight={height}
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+>
+	{@render children?.()}
+</div>

package/src/index.js

@@ -46,3 +46,7 @@ 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'