@human-synthesis/norns-ui 0.0.2 → 0.0.5

package/src/components/Tabs.n

@@ -0,0 +1,28 @@
+TabsRoot(bind:value class!="{rootClasses}")
+	TabsList.tabs-list
+		+each('items as item (item.value)')
+			TabsTrigger.tabs-trigger(value!="{item.value}" disabled!="{item.disabled}")
+				| {item.label}
+	+each('items as item (item.value)')
+		TabsContent.tabs-content(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
+
+	{
+		value = $bindable()
+		items = []
+		class: extra = ''
+	} .= $props()
+
+	rootClasses := cn 'tabs-root', extra
+</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,166 @@
+PopoverRoot(bind:open)
+	PopoverTrigger.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")
+	PopoverPortal
+		PopoverContent.popover-content(
+			class="p-2 time-picker-popover"
+			onOpenAutoFocus!="{(e) => e.preventDefault()}"
+			onCloseAutoFocus!="{(e) => e.preventDefault()}"
+		)
+			.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 { Popover } from 'bits-ui'
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+
+	{
+		Root: PopoverRoot
+		Trigger: PopoverTrigger
+		Portal: PopoverPortal
+		Content: PopoverContent
+	} := Popover
+
+	{
+		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
+
+	// When the popover opens, scroll each column to its currently-selected cell.
+	$effect =>
+		return unless open && (hourCol || minuteCol)
+		queueMicrotask =>
+			scrollSelected hourCol, currentHour, 'data-time-h'
+			scrollSelected minuteCol, currentMinute, 'data-time-m'
+
+	scrollSelected := (col, value, attr) =>
+		return unless col
+		target := col.querySelector `[${attr}="${value}"]`
+		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/ToastProvider.n

@@ -0,0 +1,16 @@
+div(role="region" aria-label="Notifications" class!="{regionClasses}")
+	+each('toastStore.items as item (item.id)')
+		div(class!="{`toast toast-${item.variant}`}" role="status" data-id!="{item.id}")
+			.toast-message
+				| {item.message}
+			button.toast-close(type="button" aria-label="Dismiss" onclick!="{() => dismiss(item.id)}")
+				| ✕
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { toastStore, dismiss } from '@human-synthesis/norns-ui/toast'
+
+	{ class: extra = '' } := $props()
+
+	regionClasses := cn 'toast-region', extra
+</script>

package/src/components/ToggleButton.n

@@ -0,0 +1,29 @@
+ToggleRoot(bind:pressed class!="{classes}" disabled!="{disabled}" onPressedChange!="{onpressedchange}")
+	+if('icon')
+		Icon(name!="{icon}" size="size-4")
+	| {@render children?.()}
+
+<script>
+	import { Toggle } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{ Root: ToggleRoot } := Toggle
+
+	{
+		pressed = $bindable(false)
+		disabled = false
+		icon
+		variant = 'default'
+		size = 'md'
+		onpressedchange
+		children
+		class: extra = ''
+	} .= $props()
+
+	classes := cn
+		'toggle-btn'
+		variant !== 'default' && `toggle-btn-${variant}`
+		size !== 'md' && `toggle-btn-${size}`
+		extra
+</script>

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/Tooltip.n

@@ -0,0 +1,34 @@
+TooltipProvider(delayDuration!="{delay}")
+	TooltipRoot
+		TooltipTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger?.()}
+		TooltipPortal
+			TooltipContent(class!="{contentClasses}" side!="{side}" sideOffset!="{sideOffset}")
+				| {content ?? ''}
+				| {@render children?.()}
+
+<script>
+	import { Tooltip } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Provider: TooltipProvider
+		Root: TooltipRoot
+		Trigger: TooltipTrigger
+		Portal: TooltipPortal
+		Content: TooltipContent
+	} := Tooltip
+
+	{
+		content
+		side = 'top'
+		sideOffset = 6
+		delay = 300
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} .= $props()
+
+	contentClasses := cn 'tooltip-content', 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>