@human-synthesis/norns-ui 0.0.3 → 0.0.5

package/src/components/ToggleButtonGroup.n

@@ -0,0 +1,34 @@
+ToggleGroupRoot(
+	type!="{multiple ? 'multiple' : 'single'}"
+	bind:value
+	class!="{classes}"
+	disabled!="{disabled}"
+)
+	+each('items as item')
+		ToggleGroupItem.toggle-btn(
+			value!="{item.value}"
+			disabled!="{item.disabled}"
+			aria-label!="{item.label}"
+		)
+			+if('item.icon')
+				Icon(name!="{item.icon}" size="size-4")
+			+if('item.label && !item.iconOnly')
+				span {item.label}
+
+<script>
+	import { ToggleGroup } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{ Root: ToggleGroupRoot, Item: ToggleGroupItem } := ToggleGroup
+
+	{
+		items = []
+		value = $bindable(undefined)
+		multiple = false
+		disabled = false
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'btn-group toggle-group', extra
+</script>

package/src/components/Toolbar.n

@@ -0,0 +1,15 @@
+div(role="toolbar" aria-label!="{label}" aria-orientation!="{orientation}" class!="{classes}")
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		orientation = 'horizontal'
+		label
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'toolbar', `toolbar-${orientation}`, extra
+</script>

package/src/components/Tree.n

@@ -0,0 +1,57 @@
+ul.tree(class!="{classes}" role="tree")
+	+each('items as node')
+		| {@render renderNode(node, 0)}
+
++snippet('renderNode', node, depth)
+	li.tree-node(
+		role="treeitem"
+		aria-expanded!="{hasChildren(node) ? isExpanded(node.id) : undefined}"
+		aria-selected!="{node.id === selected}"
+	)
+		button.tree-row(
+			type="button"
+			class!="{node.id === selected ? 'tree-row-selected' : ''}"
+			style!="{`padding-left: ${0.5 + depth * 1.25}rem`}"
+			onclick!="{() => onRowClick(node)}"
+		)
+			+if('hasChildren(node)')
+				span.tree-chevron(class!="{isExpanded(node.id) ? 'tree-chevron-open' : ''}")
+					Icon(name="lucide:chevron-right" size="size-3.5")
+			+if('!hasChildren(node)')
+				span.tree-chevron-spacer
+			+if('node.icon')
+				Icon(name!="{node.icon}" size="size-4" class="text-fg-muted shrink-0")
+			span.tree-label
+				| {node.label}
+		+if('hasChildren(node) && isExpanded(node.id)')
+			ul(role="group")
+				+each('node.children as child')
+					| {@render renderNode(child, depth + 1)}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		expanded = $bindable([])
+		selected = $bindable(undefined)
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'tree', extra
+
+	hasChildren := (node) => Array.isArray(node.children) && node.children.length > 0
+	isExpanded := (id) => expanded.includes(id)
+
+	toggle := (id) =>
+		if isExpanded(id)
+			expanded = expanded.filter (x) => x !== id
+		else
+			expanded = [...expanded, id]
+
+	onRowClick := (node) =>
+		if hasChildren(node)
+			toggle node.id
+		selected = node.id
+</script>

package/src/components/Uploader.n

@@ -0,0 +1,88 @@
+.uploader(
+	class!="{classes}"
+	ondragover!="{onDragOver}"
+	ondragleave!="{onDragLeave}"
+	ondrop!="{onDrop}"
+	role="button"
+	tabindex="0"
+	onclick!="{() => inputEl?.click()}"
+	onkeydown!="{(e) => { if (e.key === 'Enter' || e.key === ' ') inputEl?.click() }}"
+)
+	input(
+		type="file"
+		bind:this!="{inputEl}"
+		multiple!="{multiple}"
+		accept!="{accept}"
+		disabled!="{disabled}"
+		class="sr-only"
+		onchange!="{(e) => onPick(e.currentTarget.files)}"
+	)
+	Icon(name="lucide:upload-cloud" size="size-8" class="text-fg-muted")
+	.uploader-text
+		span.uploader-primary
+			| {placeholder}
+		+if('helper')
+			span.uploader-helper
+				| {helper}
+
++if('files.length > 0')
+	ul.uploader-list
+		+each('files as file, i')
+			li.uploader-item
+				Icon(name="lucide:file" size="size-4" class="text-fg-muted shrink-0")
+				.flex-1.min-w-0
+					.text-sm.truncate {file.name}
+					.text-xs(class="text-fg-muted") {humanSize(file.size)}
+				button.btn.btn-ghost.btn-sm(type="button" aria-label="Remove" onclick!="{() => remove(i)}")
+					Icon(name="lucide:x" size="size-3.5")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		files = $bindable([])
+		multiple = true
+		accept
+		disabled = false
+		placeholder = 'Drop files here or click to browse'
+		helper
+		onchange
+		class: extra = ''
+	} .= $props()
+
+	inputEl .= $state null
+	dragging .= $state false
+
+	classes := cn 'uploader-root', dragging && 'uploader-dragging', extra
+
+	humanSize := (n) =>
+		return '' unless n
+		if n < 1024
+			`${n} B`
+		else if n < 1024 * 1024
+			`${(n / 1024).toFixed(1)} KB`
+		else
+			`${(n / 1024 / 1024).toFixed(1)} MB`
+
+	onPick := (list) =>
+		return unless list
+		next := Array.from list
+		files = multiple ? [...files, ...next] : next.slice(0, 1)
+		onchange?.(files)
+
+	remove := (i) =>
+		files = files.filter (_, idx) => idx !== i
+		onchange?.(files)
+
+	onDragOver := (e) =>
+		e.preventDefault()
+		dragging = true
+
+	onDragLeave := => dragging = false
+
+	onDrop := (e) =>
+		e.preventDefault()
+		dragging = false
+		onPick e.dataTransfer?.files
+</script>

package/src/components/Video.n

@@ -0,0 +1,26 @@
+video(src!="{src}" controls!="{controls}" autoplay!="{autoplay}" loop!="{looping}" muted!="{muted}" playsinline!="{playsinline}" preload!="{preload}" poster!="{poster}" class!="{classes}")
+	+each('sources as source')
+		source(src!="{source.src}" type!="{source.type}")
+	| {fallback}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	// Note: HTML attribute `loop` becomes `looping` here because `loop` is a
+	// Civet reserved word.
+	{
+		src
+		sources = []
+		controls = true
+		autoplay = false
+		loop: looping = false
+		muted = false
+		playsinline = true
+		preload = 'metadata'
+		poster
+		fallback = 'Your browser does not support the video element.'
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'video-player block w-full rounded-md', extra
+</script>

package/src/index.js

@@ -30,6 +30,72 @@ export { default as Tooltip } from './components/Tooltip.n';
 export { default as Tabs } from './components/Tabs.n';
 export { default as ToastProvider } from './components/ToastProvider.n';
 
+// 0.0.4 — display layer
+export { default as Icon } from './components/Icon.n';
+export { default as Card } from './components/Card.n';
+export { default as Surface } from './components/Surface.n';
+export { default as Banner } from './components/Banner.n';
+export { default as Badge } from './components/Badge.n';
+export { default as Chip } from './components/Chip.n';
+export { default as Avatar } from './components/Avatar.n';
+export { default as Skeleton } from './components/Skeleton.n';
+export { default as Progress } from './components/Progress.n';
+export { default as ProgressCircular } from './components/ProgressCircular.n';
+
+// 0.0.4 — composite layer
+export { default as Header } from './components/Header.n';
+export { default as Drawer } from './components/Drawer.n';
+export { default as HeroBanner } from './components/HeroBanner.n';
+export { default as Stepper } from './components/Stepper.n';
+export { default as Breadcrumbs } from './components/Breadcrumbs.n';
+export { default as Pagination } from './components/Pagination.n';
+export { default as Accordion } from './components/Accordion.n';
+export { default as Carousel } from './components/Carousel.n';
+export { default as Tree } from './components/Tree.n';
+
+// 0.0.4 — wave A
+export { default as Separator } from './components/Separator.n';
+export { default as Toolbar } from './components/Toolbar.n';
+export { default as ButtonGroup } from './components/ButtonGroup.n';
+export { default as ToggleButton } from './components/ToggleButton.n';
+export { default as ToggleButtonGroup } from './components/ToggleButtonGroup.n';
+export { default as Collapsible } from './components/Collapsible.n';
+export { default as NumberInput } from './components/NumberInput.n';
+export { default as OtpField } from './components/OtpField.n';
+export { default as TagsInput } from './components/TagsInput.n';
+export { default as Image } from './components/Image.n';
+export { default as Audio } from './components/Audio.n';
+export { default as Video } from './components/Video.n';
+export { default as Timeline } from './components/Timeline.n';
+
+// 0.0.4 — wave B
+export { default as Autocomplete } from './components/Autocomplete.n';
+export { default as MultiSelect } from './components/MultiSelect.n';
+export { default as ContextMenu } from './components/ContextMenu.n';
+export { default as RichTooltip } from './components/RichTooltip.n';
+export { default as PreviewCard } from './components/PreviewCard.n';
+export { default as ScrollArea } from './components/ScrollArea.n';
+export { default as ColorPicker } from './components/ColorPicker.n';
+export { default as Uploader } from './components/Uploader.n';
+export { default as HierarchicalMenu } from './components/HierarchicalMenu.n';
+export { default as MegaMenu } from './components/MegaMenu.n';
+
+// 0.0.4 — wave C
+export { default as DatePicker } from './components/DatePicker.n';
+export { default as DateRangePicker } from './components/DateRangePicker.n';
+export { default as TimePicker } from './components/TimePicker.n';
+export { default as Calendar } from './components/Calendar.n';
+export { default as DataTable } from './components/DataTable.n';
+
+// 0.0.5 — CSS-only motion components
+export { default as AvatarGroup } from './components/AvatarGroup.n';
+export { default as GradientText } from './components/GradientText.n';
+export { default as CopyButton } from './components/CopyButton.n';
+export { default as ThemeToggler } from './components/ThemeToggler.n';
+export { default as ShinyButton } from './components/ShinyButton.n';
+export { default as RippleButton } from './components/RippleButton.n';
+// Motion-driven: `import … from '@human-synthesis/norns-ui/motion'`.
+
 // Helpers
 export { cn } from './lib/cn.js';
 export { variantClasses } from './lib/variants.js';

package/src/motion/AnimatedNumber.n

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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';