@human-synthesis/norns-ui 0.0.3 → 0.0.6

package/src/components/Sheet.n

@@ -1,15 +1,29 @@
-DialogRoot(bind:open)
-	+if('trigger')
-		DialogTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	DialogPortal
-		DialogOverlay(class!="{overlayClasses}")
-		DialogContent(class!="{contentClasses}" data-side!="{side}")
++if('trigger')
+	span(class!="{triggerClass ?? ''}" onclick!="{() => open = true}")
+		| {@render trigger()}
+
++if('open')
+	div(use:portal use:scrollLock)
+		div(
+			data-state="open"
+			class!="{overlayClasses}"
+			onclick!="{onOverlayClick}"
+		)
+		div(
+			role="dialog"
+			aria-modal="true"
+			aria-label!="{title ?? ariaLabel}"
+			class!="{contentClasses}"
+			data-state="open"
+			data-side!="{side}"
+			use:focusTrap
+			use:escape!="{[onClose, open]}"
+		)
 			+if('title')
-				DialogTitle.dialog-title
+				h2.dialog-title
 					| {title}
 			+if('description')
-				DialogDescription.dialog-description
+				p.dialog-description
 					| {description}
 			+if('children')
 				.sheet-body
@@ -18,23 +32,15 @@ DialogRoot(bind:open)
 				.dialog-actions
 					| {@render actions()}
 			+if('!hideClose')
-				DialogClose.dialog-close(aria-label="Close")
+				button.dialog-close(type="button" aria-label="Close" onclick!="{onClose}")
 					| ✕
 
 <script>
-	import { Dialog } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: DialogRoot
-		Trigger: DialogTrigger
-		Portal: DialogPortal
-		Overlay: DialogOverlay
-		Content: DialogContent
-		Title: DialogTitle
-		Description: DialogDescription
-		Close: DialogClose
-	} := Dialog
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { scrollLock } from '@human-synthesis/norns-ui/behaviors/scrollLock.svelte.js'
+	import { focusTrap } from '@human-synthesis/norns-ui/behaviors/focusTrap.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
 
 	{
 		open = $bindable(false)
@@ -42,6 +48,8 @@ DialogRoot(bind:open)
 		title
 		description
 		hideClose = false
+		dismissable = true
+		ariaLabel
 		trigger
 		actions
 		children
@@ -52,4 +60,10 @@ DialogRoot(bind:open)
 
 	overlayClasses := cn 'dialog-overlay', overlayClass
 	contentClasses := cn 'sheet-content', `sheet-${side}`, extra
+
+	onClose := => open = false
+
+	onOverlayClick := (e) =>
+		return unless dismissable
+		open = false if e.target === e.currentTarget
 </script>

package/src/components/ShinyButton.n

@@ -0,0 +1,36 @@
+button(
+	type!="{type}"
+	class!="{classes}"
+	disabled!="{disabled}"
+	onclick!="{onclick}"
+)
+	span.shiny-btn-shine(aria-hidden="true")
+	+if('icon')
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './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}`
+		'shiny-btn'
+		extra
+</script>

package/src/components/Skeleton.n

@@ -0,0 +1,27 @@
+span(class!="{classes}" style!="{style}" aria-hidden="true")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		variant = 'rect'
+		width
+		height
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'skeleton', variant === 'circle' && 'skeleton-circle', extra
+
+	style := $derived.by =>
+		parts := []
+		if width
+			parts.push `width: ${typeof width === 'number' ? `${width}px` : width}`
+		if height
+			parts.push `height: ${typeof height === 'number' ? `${height}px` : height}`
+		else if variant === 'text'
+			parts.push 'height: 0.875rem'
+		else if variant === 'circle' && !height
+			parts.push 'height: 2.5rem; width: 2.5rem'
+		parts.join '; '
+</script>

package/src/components/Stepper.n

@@ -0,0 +1,35 @@
+ol(class!="{classes}")
+	+each('steps as step, i')
+		li.stepper-step(class!="{stepClass(i)}")
+			.stepper-marker
+				+if('isComplete(i)')
+					Icon(name="lucide:check" size="size-3.5")
+				+if('!isComplete(i)')
+					| {i + 1}
+			.stepper-label
+				| {step.label}
+		+if('i < steps.length - 1')
+			.stepper-divider
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		steps = []
+		current = 0
+		orientation = 'horizontal'
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'stepper', orientation === 'vertical' && 'stepper-vertical', extra
+
+	isComplete := (i) => steps[i]?.complete ?? i < current
+	isCurrent := (i) => steps[i]?.current ?? i === current
+
+	stepClass := (i) =>
+		cn
+			isCurrent(i) && 'stepper-step-current'
+			isComplete(i) && 'stepper-step-complete'
+</script>

package/src/components/Surface.n

@@ -0,0 +1,10 @@
+div(class!="{classes}")
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{ tone, children, class: extra = '' } := $props()
+
+	classes := cn 'surface p-4', tone === 'glass' && 'surface-glass', extra
+</script>

package/src/components/Tabs.n

@@ -1,28 +1,54 @@
-TabsRoot(bind:value class!="{rootClasses}")
-	TabsList.tabs-list
+.tabs-root(class!="{rootClasses}")
+	.tabs-list(
+		role="tablist"
+		aria-label!="{label}"
+		use:rovingTabindex!="{{ orientation: 'horizontal' }}"
+	)
 		+each('items as item (item.value)')
-			TabsTrigger.tabs-trigger(value!="{item.value}" disabled!="{item.disabled}")
+			button.tabs-trigger(
+				type="button"
+				role="tab"
+				id!="{tabId(item.value)}"
+				aria-selected!="{value === item.value}"
+				aria-controls!="{panelId(item.value)}"
+				data-state!="{value === item.value ? 'active' : 'inactive'}"
+				data-roving
+				disabled!="{item.disabled}"
+				onclick!="{() => select(item.value)}"
+			)
 				| {item.label}
 	+each('items as item (item.value)')
-		TabsContent.tabs-content(value!="{item.value}")
-			| {@render item.panel?.()}
+		.tabs-content(
+			role="tabpanel"
+			id!="{panelId(item.value)}"
+			aria-labelledby!="{tabId(item.value)}"
+			tabindex="0"
+			hidden!="{value !== item.value ? 'until-found' : undefined}"
+		)
+			+if('value === item.value')
+				| {@render item.panel?.()}
 
 <script>
-	import { Tabs } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: TabsRoot
-		List: TabsList
-		Trigger: TabsTrigger
-		Content: TabsContent
-	} := Tabs
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
 
 	{
 		value = $bindable()
 		items = []
+		label = 'Tabs'
 		class: extra = ''
 	} .= $props()
 
 	rootClasses := cn 'tabs-root', extra
+
+	// Lazy default to first tab if no value bound.
+	$effect =>
+		if value === undefined && items.length > 0 && !items[0].disabled
+			value = items[0].value
+
+	uid := Math.random().toString(36).slice(2, 8)
+	tabId := (v) => `tab-${uid}-${v}`
+	panelId := (v) => `tabpanel-${uid}-${v}`
+
+	select := (v) => value = v
 </script>

package/src/components/TagsInput.n

@@ -0,0 +1,66 @@
+.tags-input(class!="{wrapClasses}" onclick!="{focusInput}")
+	+each('value as tag, i')
+		span.chip
+			| {tag}
+			button.chip-remove(type="button" aria-label!="{`Remove ${tag}`}" onclick!="{(e) => { e.stopPropagation(); remove(i) }}")
+				Icon(name="lucide:x" size="size-3")
+	input.tags-input-field(
+		bind:this!="{inputEl}"
+		bind:value!="{draft}"
+		type="text"
+		placeholder!="{placeholder}"
+		disabled!="{disabled}"
+		onkeydown!="{onKey}"
+		onblur!="{commitOnBlur ? commit : undefined}"
+		name!="{name}"
+		id!="{resolvedId}"
+		aria-invalid!="{hasError ? 'true' : undefined}"
+	)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+
+	{
+		value = $bindable([])
+		max
+		placeholder = 'Add a tag…'
+		commitOnBlur = true
+		separators = [',', 'Enter']
+		disabled = false
+		name
+		id: providedId
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	draft .= $state ''
+	inputEl .= $state null
+
+	wrapClasses := cn 'tags-input-wrap', hasError && 'tags-input-err', extra
+
+	focusInput := => inputEl?.focus()
+
+	commit := =>
+		t := draft.trim()
+		return unless t
+		return if max && value.length >= max
+		return if value.includes(t)
+		value = [...value, t]
+		draft = ''
+
+	remove := (i) =>
+		value = value.filter (_, idx) => idx !== i
+
+	onKey := (e) =>
+		if separators.includes(e.key)
+			e.preventDefault()
+			commit()
+		else if e.key === 'Backspace' && !draft && value.length > 0
+			remove(value.length - 1)
+</script>

package/src/components/ThemeToggler.n

@@ -0,0 +1,43 @@
+button(
+	type="button"
+	class!="{classes}"
+	onclick!="{toggle}"
+	aria-label="Toggle theme"
+	title="Toggle theme"
+)
+	Icon(name!="{lightIcon}" size!="{iconSize}" class="theme-toggle-light")
+	Icon(name!="{darkIcon}" size!="{iconSize}" class="theme-toggle-dark")
+	+if('showLabel')
+		span.theme-toggle-light
+			| {labelLight}
+		span.theme-toggle-dark
+			| {labelDark}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		variant = 'ghost'
+		size = 'md'
+		showLabel = false
+		labelLight = 'Dark'
+		labelDark = 'Light'
+		lightIcon = 'lucide:moon'
+		darkIcon = 'lucide:sun'
+		storageKey = 'norns-theme'
+		class: extra = ''
+	} := $props()
+
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	classes := cn 'btn' , `btn-${variant}`, size !== 'md' && `btn-${size}`, extra
+
+	toggle := =>
+		root := document.documentElement
+		next := root.dataset.theme === 'dark' ? 'light' : 'dark'
+		root.dataset.theme = next === 'dark' ? 'dark' : ''
+		try
+			localStorage.setItem storageKey, next
+		catch _
+</script>

package/src/components/TimePicker.n

@@ -0,0 +1,153 @@
+Popover(bind:open class="p-2 time-picker-popover")
+	+snippet('trigger')
+		button.input.date-picker-trigger(
+			type="button"
+			disabled!="{disabled}"
+			id!="{resolvedId}"
+			aria-label!="{label ?? 'Pick a time'}"
+			class!="{hasError ? 'input-err' : ''}"
+		)
+			Icon(name="lucide:clock" size="size-4" class="text-fg-muted shrink-0")
+			span.flex-1.text-left.font-mono.tabular-nums
+				| {value || placeholder}
+			Icon(name="lucide:chevron-down" size="size-3.5" class="text-fg-muted shrink-0")
+	.time-picker-grid
+		.time-picker-col(role="listbox" aria-label="Hour" bind:this!="{hourCol}")
+			+each('hours as h')
+				button.time-picker-cell(
+					type="button"
+					class!="{h === currentHour ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setHour(h)}"
+					data-time-h!="{h}"
+				)
+					| {pad(h)}
+		.time-picker-sep :
+		.time-picker-col(role="listbox" aria-label="Minute" bind:this!="{minuteCol}")
+			+each('minutes as m')
+				button.time-picker-cell(
+					type="button"
+					class!="{m === currentMinute ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setMinute(m)}"
+					data-time-m!="{m}"
+				)
+					| {pad(m)}
+		+if('hourCycle === 12')
+			.time-picker-col(role="listbox" aria-label="AM/PM")
+				button.time-picker-cell(
+					type="button"
+					class!="{period === 'AM' ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setPeriod('AM')}"
+				)
+					| AM
+				button.time-picker-cell(
+					type="button"
+					class!="{period === 'PM' ? 'time-picker-cell-selected' : ''}"
+					onclick!="{() => setPeriod('PM')}"
+				)
+					| PM
+	.flex.justify-between.gap-2.mt-2.pt-2(class="border-t border-border")
+		button.btn.btn-ghost.btn-sm(type="button" onclick!="{clearValue}") Clear
+		button.btn.btn-primary.btn-sm(type="button" onclick!="{() => open = false}") Done
+
+<script>
+	import { getContext } from 'svelte'
+	import Popover from './Popover.n'
+	import Icon from './Icon.n'
+
+	{
+		value = $bindable('')
+		open = $bindable(false)
+		minuteStep = 5
+		hourCycle = 24
+		placeholder = 'Pick a time'
+		disabled = false
+		label
+		name
+		id: providedId
+		error: explicitError = false
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	pad := (n) => String(n).padStart 2, '0'
+
+	parts := $derived.by =>
+		if !value
+			return { h: 0, m: 0 }
+		[hStr, mStr] := value.split ':'
+		{ h: parseInt(hStr ?? '0', 10), m: parseInt(mStr ?? '0', 10) }
+
+	hours := $derived.by =>
+		out := []
+		if hourCycle === 12
+			out.push 12
+			i .= 1
+			while i <= 11
+				out.push i
+				i++
+		else
+			i .= 0
+			while i < 24
+				out.push i
+				i++
+		out
+
+	minutes := $derived.by =>
+		out := []
+		i .= 0
+		while i < 60
+			out.push i
+			i += minuteStep
+		out
+
+	currentHour := $derived.by =>
+		h := parts.h
+		if hourCycle === 12
+			h === 0 ? 12 : (h > 12 ? h - 12 : h)
+		else
+			h
+
+	currentMinute := $derived parts.m
+	period := $derived parts.h >= 12 ? 'PM' : 'AM'
+
+	emit := (h24, m) =>
+		value = `${pad(h24)}:${pad(m)}`
+
+	setHour := (displayed) =>
+		nextH .= displayed
+		if hourCycle === 12
+			if period === 'PM'
+				nextH = displayed === 12 ? 12 : displayed + 12
+			else
+				nextH = displayed === 12 ? 0 : displayed
+		emit nextH, parts.m
+
+	setMinute := (m) => emit parts.h, m
+
+	setPeriod := (p) =>
+		nextH .= parts.h
+		if p === 'PM' && parts.h < 12
+			nextH = parts.h + 12
+		else if p === 'AM' && parts.h >= 12
+			nextH = parts.h - 12
+		emit nextH, parts.m
+
+	clearValue := => value = ''
+
+	hourCol .= $state null
+	minuteCol .= $state null
+
+	$effect =>
+		return unless open && (hourCol || minuteCol)
+		queueMicrotask =>
+			scrollSelected hourCol, currentHour, 'data-time-h'
+			scrollSelected minuteCol, currentMinute, 'data-time-m'
+
+	scrollSelected := (col, val, attr) =>
+		return unless col
+		target := col.querySelector `[${attr}="${val}"]`
+		return unless target
+		col.scrollTop = target.offsetTop - col.clientHeight / 2 + target.clientHeight / 2
+</script>

package/src/components/Timeline.n

@@ -0,0 +1,27 @@
+ol(class!="{classes}")
+	+each('items as item, i')
+		li.timeline-item
+			.timeline-dot(class!="{item.variant ? `timeline-dot-${item.variant}` : ''}")
+				+if('item.icon')
+					Icon(name!="{item.icon}" size="size-3")
+			+if('i < items.length - 1')
+				.timeline-line
+			.timeline-body
+				+if('item.time')
+					.timeline-time {item.time}
+				+if('item.title')
+					.timeline-title {item.title}
+				+if('item.description')
+					.timeline-description {item.description}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'timeline', extra
+</script>

package/src/components/ToggleButton.n

@@ -0,0 +1,35 @@
+button(
+	type="button"
+	class!="{classes}"
+	disabled!="{disabled}"
+	data-pressed!="{pressed ? 'true' : undefined}"
+	aria-pressed!="{pressed}"
+	onclick!="{toggle}"
+)
+	+if('icon')
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		pressed = $bindable(false)
+		disabled = false
+		icon
+		variant = 'secondary'
+		size = 'md'
+		onpressedchange
+		children
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'btn', `btn-${variant}`, size !== 'md' && `btn-${size}`, extra
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	toggle := =>
+		pressed = !pressed
+		onpressedchange?.(pressed)
+</script>

package/src/components/ToggleButtonGroup.n

@@ -0,0 +1,54 @@
+.btn-group(
+	role="group"
+	aria-label!="{label}"
+	class!="{classes}"
+	use:rovingTabindex!="{{ orientation: 'horizontal' }}"
+)
+	+each('items as item')
+		button(
+			type="button"
+			class!="{itemClasses(item.value)}"
+			data-roving
+			data-pressed!="{isActive(item.value) ? 'true' : undefined}"
+			aria-pressed!="{isActive(item.value)}"
+			disabled!="{disabled || item.disabled}"
+			aria-label!="{item.label}"
+			onclick!="{() => toggle(item.value)}"
+		)
+			+if('item.icon')
+				Icon(name!="{item.icon}" size="size-4")
+			+if('item.label && !item.iconOnly')
+				span {item.label}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		value = $bindable(undefined)
+		multiple = false
+		disabled = false
+		label = 'Toggle group'
+		class: extra = ''
+	} .= $props()
+
+	classes := cn extra
+
+	isActive := (v) =>
+		if multiple
+			Array.isArray(value) && value.includes v
+		else
+			value === v
+
+	itemClasses := (v) => cn 'btn btn-secondary'
+
+	toggle := (v) =>
+		return if disabled
+		if multiple
+			cur := Array.isArray(value) ? value : []
+			value = cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]
+		else
+			value = value === v ? undefined : v
+</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>