npm - @human-synthesis/norns-ui - Versions diffs - 0.0.3 → 0.0.6 - Mend

@human-synthesis/norns-ui 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/LICENSE +21 -0
package/README.md +81 -225
package/package.json +13 -3
package/src/auto-import.js +81 -19
package/src/components/Accordion.n +39 -0
package/src/components/Audio.n +24 -0
package/src/components/Autocomplete.n +134 -0
package/src/components/Avatar.n +27 -0
package/src/components/AvatarGroup.n +25 -0
package/src/components/Badge.n +20 -0
package/src/components/Banner.n +25 -0
package/src/components/Breadcrumbs.n +22 -0
package/src/components/Btn.n +29 -8
package/src/components/ButtonGroup.n +14 -0
package/src/components/Calendar.n +153 -0
package/src/components/Card.n +34 -0
package/src/components/Carousel.n +66 -0
package/src/components/Chip.n +27 -0
package/src/components/Collapsible.n +29 -0
package/src/components/ColorPicker.n +62 -0
package/src/components/ContextMenu.n +67 -0
package/src/components/CopyButton.n +50 -0
package/src/components/DataTable.n +61 -0
package/src/components/DatePicker.n +56 -0
package/src/components/DateRangePicker.n +47 -0
package/src/components/Dialog.n +35 -22
package/src/components/Dropdown.n +54 -23
package/src/components/GradientText.n +21 -0
package/src/components/Header.n +23 -0
package/src/components/HeroBanner.n +37 -0
package/src/components/HierarchicalMenu.n +38 -0
package/src/components/Icon.n +16 -0
package/src/components/Image.n +31 -0
package/src/components/MegaMenu.n +36 -0
package/src/components/MultiSelect.n +158 -0
package/src/components/NumberInput.n +49 -0
package/src/components/OtpField.n +67 -0
package/src/components/Pagination.n +73 -0
package/src/components/Popover.n +30 -15
package/src/components/Progress.n +26 -0
package/src/components/ProgressCircular.n +52 -0
package/src/components/RippleButton.n +56 -0
package/src/components/ScrollArea.n +20 -0
package/src/components/Separator.n +12 -0
package/src/components/Sheet.n +36 -22
package/src/components/ShinyButton.n +36 -0
package/src/components/Skeleton.n +27 -0
package/src/components/Stepper.n +35 -0
package/src/components/Surface.n +10 -0
package/src/components/Tabs.n +39 -13
package/src/components/TagsInput.n +66 -0
package/src/components/ThemeToggler.n +43 -0
package/src/components/TimePicker.n +153 -0
package/src/components/Timeline.n +27 -0
package/src/components/ToggleButton.n +35 -0
package/src/components/ToggleButtonGroup.n +54 -0
package/src/components/Toolbar.n +15 -0
package/src/components/Tooltip.n +52 -19
package/src/components/Tree.n +57 -0
package/src/components/Uploader.n +88 -0
package/src/components/Video.n +26 -0
package/src/index.js +64 -1
package/src/lib/behaviors/clickOutside.svelte.js +54 -0
package/src/lib/behaviors/escape.svelte.js +36 -0
package/src/lib/behaviors/floating.svelte.js +137 -0
package/src/lib/behaviors/focusTrap.svelte.js +80 -0
package/src/lib/behaviors/index.js +14 -0
package/src/lib/behaviors/portal.svelte.js +32 -0
package/src/lib/behaviors/rovingTabindex.svelte.js +76 -0
package/src/lib/behaviors/scrollLock.svelte.js +56 -0
package/src/motion/AnimatedNumber.n +55 -0
package/src/motion/GradientBackground.n +25 -0
package/src/motion/LiquidButton.n +48 -0
package/src/motion/Reveal.n +37 -0
package/src/motion/Sparkles.n +53 -0
package/src/motion/index.js +18 -0
package/src/styles/atoms.css +1481 -223
package/src/styles/tokens.css +204 -40
package/src/types/Accordion.d.ts +17 -0
package/src/types/AnimatedNumber.d.ts +15 -0
package/src/types/Audio.d.ts +18 -0
package/src/types/Autocomplete.d.ts +17 -0
package/src/types/Avatar.d.ts +14 -0
package/src/types/AvatarGroup.d.ts +15 -0
package/src/types/Badge.d.ts +14 -0
package/src/types/Banner.d.ts +15 -0
package/src/types/Breadcrumbs.d.ts +15 -0
package/src/types/Btn.d.ts +10 -0
package/src/types/ButtonGroup.d.ts +10 -0
package/src/types/Calendar.d.ts +20 -0
package/src/types/Card.d.ts +19 -0
package/src/types/Carousel.d.ts +23 -0
package/src/types/Chip.d.ts +12 -0
package/src/types/Collapsible.d.ts +13 -0
package/src/types/ColorPicker.d.ts +15 -0
package/src/types/ContextMenu.d.ts +24 -0
package/src/types/CopyButton.d.ts +16 -0
package/src/types/DataTable.d.ts +27 -0
package/src/types/DatePicker.d.ts +23 -0
package/src/types/DateRangePicker.d.ts +17 -0
package/src/types/Dialog.d.ts +4 -0
package/src/types/Dropdown.d.ts +2 -1
package/src/types/GradientBackground.d.ts +14 -0
package/src/types/GradientText.d.ts +19 -0
package/src/types/Header.d.ts +12 -0
package/src/types/HeroBanner.d.ts +17 -0
package/src/types/HierarchicalMenu.d.ts +20 -0
package/src/types/Icon.d.ts +21 -0
package/src/types/Image.d.ts +15 -0
package/src/types/LiquidButton.d.ts +15 -0
package/src/types/MegaMenu.d.ts +29 -0
package/src/types/MultiSelect.d.ts +16 -0
package/src/types/NumberInput.d.ts +17 -0
package/src/types/OtpField.d.ts +13 -0
package/src/types/Pagination.d.ts +13 -0
package/src/types/Progress.d.ts +14 -0
package/src/types/ProgressCircular.d.ts +14 -0
package/src/types/Reveal.d.ts +20 -0
package/src/types/RippleButton.d.ts +15 -0
package/src/types/ScrollArea.d.ts +11 -0
package/src/types/Separator.d.ts +9 -0
package/src/types/Sheet.d.ts +3 -0
package/src/types/ShinyButton.d.ts +15 -0
package/src/types/Skeleton.d.ts +13 -0
package/src/types/Sparkles.d.ts +13 -0
package/src/types/Stepper.d.ts +19 -0
package/src/types/Surface.d.ts +10 -0
package/src/types/Tabs.d.ts +2 -0
package/src/types/TagsInput.d.ts +17 -0
package/src/types/ThemeToggler.d.ts +17 -0
package/src/types/TimePicker.d.ts +20 -0
package/src/types/Timeline.d.ts +17 -0
package/src/types/ToggleButton.d.ts +16 -0
package/src/types/ToggleButtonGroup.d.ts +21 -0
package/src/types/Toolbar.d.ts +12 -0
package/src/types/Tooltip.d.ts +3 -0
package/src/types/Tree.d.ts +20 -0
package/src/types/Uploader.d.ts +15 -0
package/src/types/Video.d.ts +20 -0

package/src/lib/behaviors/portal.svelte.js ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * Svelte action: move a node out of its DOM parent into a target element
+ * (default: <body>) for the lifetime of the action. Used by overlays
+ * (Dialog, Sheet, Popover, Dropdown, Tooltip) so they're not constrained
+ * by parent `overflow` or `transform` stacking contexts.
+ *
+ * Usage in Pug + Civet:
+ *   div(use:portal class!="dialog-content")
+ *
+ * Cleanup note: `destroy` only removes the moved node + the placeholder
+ * comment we inserted. It does NOT attempt to move the node back into the
+ * original tree. Svelte already iterates its own tracked DOM (and finds
+ * the moved node by reference) when the branch unmounts; if we re-inserted
+ * the node here, Svelte would leave it in place because it had already
+ * "removed" it via the body reference — the overlay would stay visible.
+ *
+ * @param {HTMLElement} node
+ * @param {HTMLElement | string} [target]
+ */
+export function portal(node, target = document.body) {
+	const dest = typeof target === 'string' ? document.querySelector(target) : target;
+	if (!dest) return {};
+	const placeholder = document.createComment('portal');
+	node.parentNode?.replaceChild(placeholder, node);
+	dest.appendChild(node);
+	return {
+		destroy() {
+			node.parentNode?.removeChild(node);
+			placeholder.parentNode?.removeChild(placeholder);
+		}
+	};
+}

package/src/lib/behaviors/rovingTabindex.svelte.js ADDED Viewed

@@ -0,0 +1,76 @@
+/**
+ * Keyboard navigation for menu/tab/listbox patterns.
+ *
+ * Attach to a container; the action queries focusable items via `selector`
+ * (default `[data-roving]`) and routes ArrowDown/Up/Home/End between them.
+ * Items get `tabindex=-1` except the active one (`tabindex=0`).
+ *
+ *   ul(use:rovingTabindex={{ orientation: 'vertical', selector: '[data-item]' }})
+ *
+ * Use `orientation: 'horizontal'` for ArrowLeft/Right (Tabs).
+ * Pass `loop: true` to wrap around at the ends.
+ */
+export function rovingTabindex(node, opts = {}) {
+	let { orientation = 'vertical', selector = '[data-roving]', loop = true } = opts;
+	const isVertical = () => orientation === 'vertical';
+	const isHorizontal = () => orientation === 'horizontal';
+	const items = () => Array.from(node.querySelectorAll(selector)).filter((el) => !el.disabled);
+	const setTabindex = () => {
+		const list = items();
+		if (list.length === 0) return;
+		const activeIdx = list.indexOf(document.activeElement);
+		list.forEach((el, i) => {
+			el.setAttribute('tabindex', i === Math.max(0, activeIdx) ? '0' : '-1');
+		});
+	};
+	const move = (delta) => {
+		const list = items();
+		if (list.length === 0) return;
+		const cur = list.indexOf(document.activeElement);
+		let next = cur + delta;
+		if (next < 0) next = loop ? list.length - 1 : 0;
+		if (next >= list.length) next = loop ? 0 : list.length - 1;
+		list[next].focus();
+	};
+	const onKeyDown = (e) => {
+		const { key } = e;
+		if (isVertical() && (key === 'ArrowDown' || key === 'ArrowUp')) {
+			e.preventDefault();
+			move(key === 'ArrowDown' ? 1 : -1);
+		} else if (isHorizontal() && (key === 'ArrowRight' || key === 'ArrowLeft')) {
+			e.preventDefault();
+			move(key === 'ArrowRight' ? 1 : -1);
+		} else if (key === 'Home') {
+			e.preventDefault();
+			items()[0]?.focus();
+		} else if (key === 'End') {
+			e.preventDefault();
+			const list = items();
+			list[list.length - 1]?.focus();
+		}
+	};
+	const onFocusIn = () => setTabindex();
+	node.addEventListener('keydown', onKeyDown);
+	node.addEventListener('focusin', onFocusIn);
+	queueMicrotask(setTabindex);
+	return {
+		update(next) {
+			if (next) {
+				orientation = next.orientation ?? orientation;
+				selector = next.selector ?? selector;
+				loop = next.loop ?? loop;
+			}
+		},
+		destroy() {
+			node.removeEventListener('keydown', onKeyDown);
+			node.removeEventListener('focusin', onFocusIn);
+		}
+	};
+}

package/src/lib/behaviors/scrollLock.svelte.js ADDED Viewed

@@ -0,0 +1,56 @@
+/**
+ * Refcounted scroll lock for the document body. Multiple overlays may stack
+ * (Dialog over Drawer over Popover); each acquires a lock and releases on
+ * unmount. The body stays locked until the last release.
+ *
+ * Preserves the scroll position by setting `position: fixed; top: -<scrollY>`
+ * and restoring it on full release.
+ */
+let count = 0;
+let savedScrollY = 0;
+let savedStyles = null;
+export function lock() {
+	if (count === 0 && typeof document !== 'undefined') {
+		savedScrollY = window.scrollY;
+		const body = document.body;
+		savedStyles = {
+			position: body.style.position,
+			top: body.style.top,
+			width: body.style.width,
+			overflow: body.style.overflow
+		};
+		body.style.position = 'fixed';
+		body.style.top = `-${savedScrollY}px`;
+		body.style.width = '100%';
+		body.style.overflow = 'hidden';
+	}
+	count++;
+}
+export function unlock() {
+	if (count === 0) return;
+	count--;
+	if (count === 0 && savedStyles && typeof document !== 'undefined') {
+		const body = document.body;
+		body.style.position = savedStyles.position;
+		body.style.top = savedStyles.top;
+		body.style.width = savedStyles.width;
+		body.style.overflow = savedStyles.overflow;
+		window.scrollTo(0, savedScrollY);
+		savedStyles = null;
+	}
+}
+/**
+ * Svelte action — locks while mounted, releases on destroy.
+ *   div(use:scrollLock)
+ */
+export function scrollLock(_node) {
+	lock();
+	return {
+		destroy() {
+			unlock();
+		}
+	};
+}

package/src/motion/AnimatedNumber.n ADDED Viewed

@@ -0,0 +1,55 @@
+span(class!="{classes}" bind:this!="{el}")
+	| {display}
+<script>
+	import { onMount } from 'svelte'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	{
+		value = 0
+		from = 0
+		duration = 0.9
+		decimals = 0
+		format
+		class: extra = ''
+	} := $props()
+	display .= $state String((from ?? value).toFixed(decimals))
+	el .= $state null
+	hasMounted .= $state false
+	classes := cn 'tabular-nums', extra
+	doFormat := (n) =>
+		if format
+			format(n)
+		else if decimals === 0
+			Math.round(n).toLocaleString()
+		else
+			n.toFixed(decimals)
+	$effect =>
+		return unless hasMounted
+		// Re-runs whenever `value` changes (after mount).
+		v := value
+		(async =>
+			{ animate } := await import('motion')
+			anim := animate from, v, {
+				duration
+				onUpdate: (latest) => display = doFormat(latest)
+				onComplete: => display = doFormat(v)
+			}
+			anim
+		)()
+	onMount =>
+		hasMounted = true
+		(async =>
+			{ animate } := await import('motion')
+			animate (from ?? 0), value, {
+				duration
+				onUpdate: (latest) => display = doFormat(latest)
+				onComplete: => display = doFormat(value)
+			}
+		)()
+</script>

package/src/motion/GradientBackground.n ADDED Viewed

@@ -0,0 +1,25 @@
+.gradient-bg(class!="{classes}" style!="{styleStr}")
+	+if('children')
+		.relative
+			| {@render children()}
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	{
+		colors = [
+			'oklch(60% 0.25 290)'
+			'oklch(60% 0.18 240)'
+			'oklch(70% 0.18 200)'
+			'oklch(60% 0.25 320)'
+		]
+		duration = 18
+		angle = 130
+		children
+		class: extra = ''
+	} := $props()
+	classes := cn 'gradient-bg', extra
+	stops := $derived colors.join ', '
+	styleStr := $derived `--gradient-bg-stops: ${stops}; --gradient-bg-angle: ${angle}deg; --gradient-bg-duration: ${duration}s`
+</script>

package/src/motion/LiquidButton.n ADDED Viewed

@@ -0,0 +1,48 @@
+button(
+	type!="{type}"
+	class!="{classes}"
+	disabled!="{disabled}"
+	onclick!="{onclick}"
+	bind:this!="{el}"
+)
+	span.liquid-btn-blob(aria-hidden="true")
+	span.liquid-btn-content
+		+if('icon')
+			Icon(name!="{icon}" size!="{iconSize}")
+		+if('children')
+			| {@render children()}
+<script>
+	import { onMount } from 'svelte'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './../components/Icon.n'
+	{
+		variant = 'primary'
+		size = 'md'
+		type = 'button'
+		disabled = false
+		onclick
+		icon
+		children
+		class: extra = ''
+	} := $props()
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+	classes := cn 'btn', `btn-${variant}`, size !== 'md' && `btn-${size}`, 'liquid-btn', extra
+	el .= $state null
+	onMount =>
+		return unless el
+		(async =>
+			{ animate } := await import('motion')
+			blob := el.querySelector '.liquid-btn-blob'
+			return unless blob
+			el.addEventListener 'mouseenter', =>
+				animate blob, { transform: ['scale(0.6)', 'scale(1.4)'] }, { duration: 0.6, easing: [0.34, 1.56, 0.64, 1] }
+			el.addEventListener 'mouseleave', =>
+				animate blob, { transform: 'scale(0.6)' }, { duration: 0.4 }
+		)()
+</script>

package/src/motion/Reveal.n ADDED Viewed

@@ -0,0 +1,37 @@
+div(class!="{classes}" style!="{initialStyle}" bind:this!="{el}")
+	| {@render children?.()}
+<script>
+	import { onMount } from 'svelte'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	{
+		direction = 'up'
+		distance = 12
+		duration = 0.5
+		delay = 0
+		once = true
+		threshold = 0.15
+		children
+		class: extra = ''
+	} := $props()
+	classes := cn 'will-change-transform', extra
+	axis := direction === 'left' || direction === 'right' ? 'X' : 'Y'
+	sign := direction === 'down' || direction === 'right' ? -distance : distance
+	initialStyle := `opacity: 0; transform: translate${axis}(${sign}px)`
+	el .= $state null
+	onMount =>
+		return unless el
+		(async =>
+			{ inView, animate } := await import('motion')
+			inView el, =>
+				animate el, { opacity: [0, 1], [`transform`]: [`translate${axis}(${sign}px)`, `translate${axis}(0)`] }, { duration, delay }
+				once ? false : (=> animate(el, { opacity: 0 }, { duration: 0 }))
+			, { amount: threshold }
+		)()
+</script>

package/src/motion/Sparkles.n ADDED Viewed

@@ -0,0 +1,53 @@
+.sparkles-wrap(class!="{classes}" bind:this!="{wrap}")
+	+if('children')
+		| {@render children()}
+	.sparkles-overlay(aria-hidden="true")
+		+each('seeds as s')
+			span.sparkle(style!="{`left: ${s.x}%; top: ${s.y}%; width: ${s.size}px; height: ${s.size}px; --sparkle-color: ${s.color}; animation-delay: ${s.delay}s; animation-duration: ${s.duration}s`}")
+<script>
+	import { onMount, onDestroy } from 'svelte'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	{
+		density = 14
+		colors = ['var(--color-primary-400)', 'var(--color-info-400)', 'var(--color-warning-400)']
+		minSize = 4
+		maxSize = 10
+		children
+		class: extra = ''
+	} := $props()
+	classes := cn 'sparkles-wrap', extra
+	rand := (min, max) => min + Math.random() * (max - min)
+	seeds := $derived.by =>
+		out := []
+		i .= 0
+		while i < density
+			out.push {
+				x: rand(2, 96)
+				y: rand(2, 96)
+				size: Math.round rand(minSize, maxSize)
+				color: colors[i % colors.length]
+				delay: rand(0, 3)
+				duration: rand(1.6, 3.2)
+			}
+			i++
+		out
+	wrap .= $state null
+	stopObserver .= $state null
+	onMount =>
+		return unless wrap
+		// Pause CSS animations off-screen via animation-play-state.
+		io := new IntersectionObserver (entries) =>
+			for entry of entries
+				wrap.classList.toggle 'sparkles-paused', !entry.isIntersecting
+		io.observe wrap
+		stopObserver = => io.disconnect()
+	onDestroy => stopObserver?.()
+</script>

package/src/motion/index.js ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * `@human-synthesis/norns-ui/motion` — opt-in motion subpath.
+ *
+ * Importing from this path pulls in [Motion One](https://motion.dev/) (~3 KB
+ * gzipped). The default barrel at the package root stays motion-free; if you
+ * never import from `/motion` your bundle stays unaffected.
+ *
+ * Auto-import (via `presetUI()`) deliberately does NOT register these names —
+ * we don't want every page to pay the Motion One cost. Import explicitly:
+ *
+ *   import AnimatedNumber from '@human-synthesis/norns-ui/motion/AnimatedNumber';
+ *   import Reveal from '@human-synthesis/norns-ui/motion/Reveal';
+ */
+export { default as AnimatedNumber } from './AnimatedNumber.n';
+export { default as Reveal } from './Reveal.n';
+export { default as LiquidButton } from './LiquidButton.n';
+export { default as Sparkles } from './Sparkles.n';
+export { default as GradientBackground } from './GradientBackground.n';