@human-synthesis/norns-ui 0.0.3 → 0.0.6

package/src/components/ColorPicker.n

@@ -0,0 +1,62 @@
+.color-picker(class!="{classes}")
+	label.color-picker-swatch(style!="{`background: ${value}`}")
+		input(
+			type="color"
+			value!="{value}"
+			oninput!="{(e) => value = e.currentTarget.value}"
+			disabled!="{disabled}"
+			class="sr-only"
+			aria-label="Pick color"
+		)
+	input.input.color-picker-text(
+		type="text"
+		value!="{value}"
+		oninput!="{onTextInput}"
+		disabled!="{disabled}"
+		spellcheck="false"
+		placeholder="#000000"
+		name!="{name}"
+		id!="{resolvedId}"
+	)
+	+if('!hideCopy')
+		button.btn.btn-ghost.btn-sm(type="button" aria-label="Copy" onclick!="{copy}")
+			Icon(name!="{copied ? 'lucide:check' : 'lucide:copy'}" size="size-3.5")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+
+	{
+		value = $bindable('#7c3aed')
+		disabled = false
+		hideCopy = false
+		name
+		id: providedId
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+
+	classes := cn 'color-picker-wrap', extra
+
+	copied .= $state false
+
+	hexRe := /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+
+	onTextInput := (e) =>
+		raw := e.currentTarget.value.trim()
+		next := raw.startsWith('#') ? raw : `#${raw}`
+		if hexRe.test(next.replace('#', ''))
+			value = next.toLowerCase()
+		else
+			value = next  // let user keep typing; not all keystrokes are valid
+
+	copy := =>
+		try
+			await navigator.clipboard.writeText value
+			copied = true
+			setTimeout (=> copied = false), 1200
+		catch _
+</script>

package/src/components/ContextMenu.n

@@ -0,0 +1,67 @@
+span(class!="{triggerClass ?? ''}" oncontextmenu!="{onContext}")
+	| {@render trigger?.()}
+
++if('open')
+	div(
+		use:portal
+		use:clickOutside!="{[onClose, open]}"
+		use:escape!="{[onClose, open]}"
+		use:rovingTabindex!="{{ orientation: 'vertical', selector: '[data-roving]' }}"
+		bind:this!="{menuEl}"
+		class="dropdown-content"
+		data-state="open"
+		role="menu"
+		style="position: absolute"
+	)
+		+each('items as item')
+			+if('item.separator')
+				.dropdown-separator(role="separator")
+			+if('!item.separator')
+				button.dropdown-item(
+					type="button"
+					role="menuitem"
+					data-roving
+					data-disabled!="{item.disabled ? '' : undefined}"
+					disabled!="{item.disabled}"
+					onclick!="{() => onItem(item)}"
+				)
+					+if('item.icon')
+						Icon(name!="{item.icon}" size="size-3.5" class="text-fg-muted shrink-0")
+					span.flex-1 {item.label}
+
+<script>
+	import { positionAt } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		trigger
+		triggerClass
+	} := $props()
+
+	open .= $state false
+	menuEl .= $state null
+	clickX .= 0
+	clickY .= 0
+
+	onContext := (e) =>
+		e.preventDefault()
+		clickX = e.clientX
+		clickY = e.clientY
+		open = true
+
+	$effect =>
+		return unless open && menuEl
+		positionAt menuEl, clickX, clickY, { placement: 'right-start' }
+
+	onClose := => open = false
+
+	onItem := (item) =>
+		return if item.disabled
+		item.onSelect?.()
+		open = false
+</script>

package/src/components/CopyButton.n

@@ -0,0 +1,50 @@
+button(
+	type="button"
+	class!="{classes}"
+	disabled!="{disabled}"
+	onclick!="{copy}"
+	aria-label!="{copied ? 'Copied' : (label ?? 'Copy to clipboard')}"
+)
+	+if('copied')
+		Icon(name="lucide:check" size!="{iconSize}" class="copy-btn-check")
+	+if('!copied')
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		value = ''
+		variant = 'ghost'
+		size = 'md'
+		icon = 'lucide:copy'
+		disabled = false
+		label
+		oncopy
+		children
+		class: extra = ''
+	} := $props()
+
+	copied .= $state false
+
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	classes := cn
+		'btn'
+		`btn-${variant}`
+		size !== 'md' && `btn-${size}`
+		'copy-btn'
+		copied && 'copy-btn-copied'
+		extra
+
+	copy := =>
+		try
+			await navigator.clipboard.writeText String(value)
+			copied = true
+			oncopy?.(value)
+			setTimeout (=> copied = false), 1400
+		catch _
+</script>

package/src/components/DataTable.n

@@ -0,0 +1,61 @@
+.data-table-wrap(class!="{wrapClasses}")
+	table.data-table
+		thead
+			tr
+				+each('columns as col')
+					th(
+						class!="{col.class ?? ''}"
+						style!="{col.width ? `width: ${col.width}` : undefined}"
+					)
+						+if('col.sortable')
+							button.data-table-sort(type="button" onclick!="{() => onSort(col.key)}")
+								span {col.label ?? col.key}
+								Icon(name!="{sortIcon(col.key)}" size="size-3.5" class="text-fg-muted")
+						+if('!col.sortable')
+							| {col.label ?? col.key}
+		tbody
+			+if('rows.length === 0')
+				tr.data-table-empty
+					td(colspan!="{columns.length}")
+						| {emptyMessage}
+			+each('rows as row, i')
+				tr(onclick!="{onrowclick ? () => onrowclick(row, i) : undefined}" class!="{onrowclick ? 'data-table-row-clickable' : ''}")
+					+each('columns as col')
+						td(class!="{col.cellClass ?? ''}")
+							| {row[col.key]}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		columns = []
+		rows = []
+		striped = false
+		dense = false
+		stickyHeader = false
+		emptyMessage = 'No data'
+		sortKey = $bindable(undefined)
+		sortDir = $bindable('asc')
+		onrowclick
+		class: extra = ''
+	} .= $props()
+
+	wrapClasses := cn
+		'data-table-root'
+		striped && 'data-table-striped'
+		dense && 'data-table-dense'
+		stickyHeader && 'data-table-sticky'
+		extra
+
+	onSort := (key) =>
+		if sortKey === key
+			sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+		else
+			sortKey = key
+			sortDir = 'asc'
+
+	sortIcon := (key) =>
+		return 'lucide:chevrons-up-down' unless sortKey === key
+		sortDir === 'asc' ? 'lucide:chevron-up' : 'lucide:chevron-down'
+</script>

package/src/components/DatePicker.n

@@ -0,0 +1,56 @@
+Popover(bind:open class="p-3 w-[20rem]")
+	+snippet('trigger')
+		button.input.date-picker-trigger(
+			type="button"
+			disabled!="{disabled}"
+			id!="{resolvedId}"
+			aria-label!="{label ?? 'Pick a date'}"
+			class!="{hasError ? 'input-err' : ''}"
+		)
+			Icon(name="lucide:calendar" size="size-4" class="text-fg-muted shrink-0")
+			span.flex-1.text-left.truncate
+				| {value ? formatted : placeholder}
+			Icon(name="lucide:chevron-down" size="size-3.5" class="text-fg-muted shrink-0")
+	Calendar(
+		bind:value
+		min!="{min}"
+		max!="{max}"
+		onchange!="{handleChange}"
+	)
+
+<script>
+	import { getContext } from 'svelte'
+	import Popover from './Popover.n'
+	import Icon from './Icon.n'
+	import Calendar from './Calendar.n'
+
+	{
+		value = $bindable('')
+		open = $bindable(false)
+		min = ''
+		max = ''
+		placeholder = 'Pick a date'
+		disabled = false
+		closeOnSelect = true
+		label
+		name
+		id: providedId
+		error: explicitError = false
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	formatter := new Intl.DateTimeFormat undefined, { dateStyle: 'medium' }
+
+	formatted := $derived.by =>
+		return '' unless value
+		try
+			formatter.format new Date(`${value}T00:00:00`)
+		catch _
+			value
+
+	handleChange := =>
+		open = false if closeOnSelect
+</script>

package/src/components/DateRangePicker.n

@@ -0,0 +1,47 @@
+Popover(bind:open class="p-3 w-[20rem]")
+	+snippet('trigger')
+		button.input.date-picker-trigger(type="button" disabled!="{disabled}" aria-label="Pick a date range")
+			Icon(name="lucide:calendar-range" size="size-4" class="text-fg-muted shrink-0")
+			span.flex-1.text-left.truncate
+				| {label}
+			Icon(name="lucide:chevron-down" size="size-3.5" class="text-fg-muted shrink-0")
+	Calendar(
+		bind:rangeValue!="{value}"
+		range!="{true}"
+		min!="{min}"
+		max!="{max}"
+	)
+	.flex.justify-end.gap-2.mt-3
+		button.btn.btn-ghost.btn-sm(type="button" onclick!="{clear}") Clear
+		button.btn.btn-primary.btn-sm(type="button" onclick!="{() => open = false}") Done
+
+<script>
+	import Popover from './Popover.n'
+	import Icon from './Icon.n'
+	import Calendar from './Calendar.n'
+
+	{
+		value = $bindable({ start: '', end: '' })
+		open = $bindable(false)
+		min = ''
+		max = ''
+		placeholder = 'Pick a range'
+		disabled = false
+	} .= $props()
+
+	formatter := new Intl.DateTimeFormat undefined, { dateStyle: 'medium' }
+
+	fmt := (s) =>
+		return '' unless s
+		try
+			formatter.format new Date(`${s}T00:00:00`)
+		catch _
+			s
+
+	label := $derived.by =>
+		return placeholder unless value?.start
+		return `${fmt(value.start)} – …` unless value?.end
+		`${fmt(value.start)} – ${fmt(value.end)}`
+
+	clear := => value = { start: '', end: '' }
+</script>

package/src/components/Dialog.n

@@ -1,15 +1,28 @@
-DialogRoot(bind:open)
-	+if('trigger')
-		DialogTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	DialogPortal
-		DialogOverlay(class!="{overlayClasses}")
-		DialogContent(class!="{contentClasses}")
++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"
+			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')
 				.dialog-body
@@ -18,29 +31,23 @@ 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)
 		title
 		description
 		hideClose = false
+		dismissable = true
+		ariaLabel
 		trigger
 		actions
 		children
@@ -51,4 +58,10 @@ DialogRoot(bind:open)
 
 	overlayClasses := cn 'dialog-overlay', overlayClass
 	contentClasses := cn 'dialog-content', extra
+
+	onClose := => open = false
+
+	onOverlayClick := (e) =>
+		return unless dismissable
+		open = false if e.target === e.currentTarget
 </script>

package/src/components/Dropdown.n

@@ -1,29 +1,44 @@
-MenuRoot(bind:open)
-	+if('trigger')
-		MenuTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	MenuPortal
-		MenuContent(class!="{contentClasses}" side!="{side}" align!="{align}" sideOffset!="{sideOffset}")
-			+each('items as item, i')
-				+if('item.separator')
-					MenuSeparator.dropdown-separator
-				+if('!item.separator')
-					MenuItem.dropdown-item(disabled!="{item.disabled}" onSelect!="{item.onSelect}")
-						| {item.label}
-			| {@render children?.()}
++if('trigger')
+	span(use:refAction bind:this!="{triggerEl}" class!="{triggerClass ?? ''}" onclick!="{toggle}")
+		| {@render trigger()}
+
++if('open')
+	div(
+		use:portal
+		use:floatAction
+		use:clickOutside!="{[onClose, open, triggerEl]}"
+		use:escape!="{[onClose, open]}"
+		use:rovingTabindex!="{{ orientation: 'vertical', selector: '[data-roving]' }}"
+		class!="{contentClasses}"
+		data-state="open"
+		role="menu"
+	)
+		+each('items as item, i')
+			+if('item.separator')
+				.dropdown-separator(role="separator")
+			+if('!item.separator')
+				button.dropdown-item(
+					type="button"
+					role="menuitem"
+					data-roving
+					data-disabled!="{item.disabled ? '' : undefined}"
+					disabled!="{item.disabled}"
+					onclick!="{() => onItem(item)}"
+				)
+					+if('item.icon')
+						Icon(name!="{item.icon}" size="size-3.5" class="text-fg-muted shrink-0")
+					span.flex-1 {item.label}
+		+if('children')
+			| {@render children()}
 
 <script>
-	import { DropdownMenu } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: MenuRoot
-		Trigger: MenuTrigger
-		Portal: MenuPortal
-		Content: MenuContent
-		Item: MenuItem
-		Separator: MenuSeparator
-	} := DropdownMenu
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
+	import Icon from './Icon.n'
 
 	{
 		open = $bindable(false)
@@ -37,5 +52,21 @@ MenuRoot(bind:open)
 		class: extra = ''
 	} .= $props()
 
+	placement := align === 'center' ? side : `${side}-${align}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: placement
+		offset: sideOffset
+
 	contentClasses := cn 'dropdown-content', extra
+
+	triggerEl .= $state null
+
+	toggle := => open = !open
+	onClose := => open = false
+
+	onItem := (item) =>
+		return if item.disabled
+		item.onSelect?.()
+		open = false
 </script>

package/src/components/GradientText.n

@@ -0,0 +1,21 @@
+span(class!="{classes}" style!="{styleStr}")
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		from = 'var(--color-primary-500)'
+		to = 'var(--color-info-500)'
+		via
+		animate = true
+		angle = 90
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'gradient-text', animate && 'gradient-text-anim', extra
+
+	stops := $derived via ? `${from}, ${via}, ${to}` : `${from}, ${to}`
+	styleStr := $derived `background-image: linear-gradient(${angle}deg, ${stops})`
+</script>

package/src/components/Header.n

@@ -0,0 +1,23 @@
+header(class!="{classes}")
+	.norns-header-brand
+		| {@render brand?.()}
+	+if('nav')
+		nav.norns-header-nav
+			| {@render nav()}
+	.norns-header-actions
+		| {@render actions?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		sticky = false
+		brand
+		nav
+		actions
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'norns-header', sticky && 'norns-header-sticky', extra
+</script>

package/src/components/HeroBanner.n

@@ -0,0 +1,37 @@
+section(class!="{classes}")
+	+if('image')
+		img.hero-image(src!="{image}" alt="" loading="lazy")
+	.relative
+		h1.hero-title
+			+if('gradient')
+				GradientText
+					| {title}
+			+if('!gradient')
+				| {title}
+		+if('description')
+			p.hero-description
+				| {description}
+		+if('children')
+			.mt-4
+				| {@render children()}
+		+if('actions')
+			.hero-actions
+				| {@render actions()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import GradientText from './GradientText.n'
+
+	{
+		title = ''
+		description
+		image
+		align = 'left'
+		gradient = false
+		actions
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'hero', align === 'center' && 'hero-center', extra
+</script>

package/src/components/HierarchicalMenu.n

@@ -0,0 +1,38 @@
+nav.nav-menu(class!="{classes}" aria-label!="{label}")
+	ul.nav-menu-list
+		+each('items as item')
+			li.nav-menu-item
+				+if('item.children')
+					button.nav-menu-trigger(type="button" aria-haspopup="true" aria-expanded="false")
+						span {item.label}
+						Icon(name="lucide:chevron-down" size="size-3.5" class="ml-1 nav-menu-chevron")
+					.nav-menu-content
+						ul.flex.flex-col.gap-0.5.p-1(class="min-w-[12rem]")
+							+each('item.children as child')
+								li
+									a.nav-menu-link(href!="{child.href ?? '#'}" onclick!="{(e) => onClickItem(e, child)}")
+										+if('child.icon')
+											Icon(name!="{child.icon}" size="size-4" class="text-fg-muted shrink-0")
+										span.flex-1 {child.label}
+				+if('!item.children')
+					a.nav-menu-trigger(href!="{item.href ?? '#'}" onclick!="{(e) => onClickItem(e, item)}")
+						span {item.label}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		items = []
+		label = 'Main navigation'
+		onSelect
+		class: extra = ''
+	} := $props()
+
+	classes := cn '', extra
+
+	onClickItem := (e, item) =>
+		if onSelect
+			e.preventDefault()
+			onSelect item
+</script>

package/src/components/Icon.n

@@ -0,0 +1,16 @@
+IconifyIcon(icon!="{name}" class!="{classes}" flip!="{flip}" rotate!="{rotate}")
+
+<script>
+	import IconifyIcon from '@iconify/svelte'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		name
+		size = 'size-4'
+		flip
+		rotate
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'inline-block shrink-0 align-[-0.125em]', size, extra
+</script>