@rokkit/ui 1.0.0-next.114 → 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.114",
+  "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",

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/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/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'