@human-synthesis/norns-ui 0.0.3 → 0.0.5

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,68 @@
+PopoverRoot(bind:open)
+	PopoverTrigger.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")
+	PopoverPortal
+		PopoverContent.popover-content(
+			class="p-3 w-[20rem]"
+			onOpenAutoFocus!="{(e) => e.preventDefault()}"
+			onCloseAutoFocus!="{(e) => e.preventDefault()}"
+		)
+			Calendar(
+				bind:value
+				min!="{min}"
+				max!="{max}"
+				onchange!="{handleChange}"
+			)
+
+<script>
+	import { Popover } from 'bits-ui'
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+	import Calendar from './Calendar.n'
+
+	{
+		Root: PopoverRoot
+		Trigger: PopoverTrigger
+		Portal: PopoverPortal
+		Content: PopoverContent
+	} := Popover
+
+	{
+		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,59 @@
+PopoverRoot(bind:open)
+	PopoverTrigger.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")
+	PopoverPortal
+		PopoverContent.popover-content(
+			class="p-3 w-[20rem]"
+			onOpenAutoFocus!="{(e) => e.preventDefault()}"
+			onCloseAutoFocus!="{(e) => e.preventDefault()}"
+		)
+			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 'bits-ui'
+	import Icon from './Icon.n'
+	import Calendar from './Calendar.n'
+
+	{
+		Root: PopoverRoot
+		Trigger: PopoverTrigger
+		Portal: PopoverPortal
+		Content: PopoverContent
+	} := Popover
+
+	{
+		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/Drawer.n

@@ -0,0 +1,49 @@
+DialogRoot(bind:open)
+	+if('trigger')
+		DialogTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger()}
+	DialogPortal
+		DialogOverlay.dialog-overlay
+		DialogContent(class!="{contentClasses}" data-side!="{side}")
+			+if('title')
+				DialogTitle.dialog-title
+					| {title}
+			+if('description')
+				DialogDescription.dialog-description
+					| {description}
+			+if('children')
+				.sheet-body
+					| {@render children()}
+			+if('!hideClose')
+				DialogClose.dialog-close(aria-label="Close")
+					| ✕
+
+<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
+
+	{
+		open = $bindable(false)
+		side = 'left'
+		title
+		description
+		hideClose = false
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} .= $props()
+
+	contentClasses := cn 'sheet-content', `sheet-${side}`, extra
+</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>

package/src/components/Image.n

@@ -0,0 +1,31 @@
+img(
+	src!="{src}"
+	alt!="{alt}"
+	loading!="{loading}"
+	decoding="async"
+	class!="{classes}"
+	width!="{width}"
+	height!="{height}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		src
+		alt = ''
+		loading = 'lazy'
+		fit = 'cover'
+		rounded = false
+		width
+		height
+		class: extra = ''
+	} := $props()
+
+	classes := cn
+		'block max-w-full'
+		fit && `object-${fit}`
+		rounded === true && 'rounded'
+		typeof rounded === 'string' && `rounded-${rounded}`
+		extra
+</script>

package/src/components/MegaMenu.n

@@ -0,0 +1,36 @@
+nav.nav-menu(class!="{classes}" aria-label!="{label}")
+	ul.nav-menu-list
+		+each('sections as section')
+			li.nav-menu-item
+				button.nav-menu-trigger(type="button" aria-haspopup="true" aria-expanded="false")
+					span {section.label}
+					Icon(name="lucide:chevron-down" size="size-3.5" class="ml-1 nav-menu-chevron")
+				.nav-menu-content
+					.mega-menu-grid(class!="{`grid-cols-${section.cols ?? 3}`}")
+						+each('section.columns as column')
+							.mega-menu-column
+								+if('column.title')
+									.mega-menu-title {column.title}
+								ul.flex.flex-col.gap-0.5
+									+each('column.items as item')
+										li
+											a.nav-menu-link(href!="{item.href ?? '#'}")
+												+if('item.icon')
+													Icon(name!="{item.icon}" size="size-4" class="text-fg-muted shrink-0")
+												.flex-1
+													.text-sm.font-medium {item.label}
+													+if('item.description')
+														.text-xs(class="text-fg-muted") {item.description}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		sections = []
+		label = 'Site navigation'
+		class: extra = ''
+	} := $props()
+
+	classes := cn '', extra
+</script>

package/src/components/MultiSelect.n

@@ -0,0 +1,56 @@
+ComboboxRoot(bind:value bind:open type="multiple")
+	.combobox-input-wrap
+		ComboboxInput.input.combobox-input(
+			placeholder!="{placeholder}"
+			disabled!="{disabled}"
+			oninput!="{(e) => term = e.currentTarget.value}"
+		)
+		ComboboxTrigger.combobox-trigger(aria-label="Toggle options")
+			Icon(name="lucide:chevrons-up-down" size="size-4")
+	+if('value.length > 0')
+		.flex.flex-wrap.gap-1.mt-2
+			+each('value as v')
+				span.chip
+					| {labelOf(v)}
+	ComboboxPortal
+		ComboboxContent.dropdown-content
+			ComboboxViewport
+				+each('filtered as item')
+					ComboboxItem.dropdown-item(value!="{item.value}" label!="{item.label}")
+						Icon(name="lucide:check" size="size-3.5" class="opacity-0 data-[selected]:opacity-100")
+						span {item.label}
+				+if('filtered.length === 0')
+					.dropdown-item(class="text-fg-muted")
+						| No matches
+
+<script>
+	import { Combobox } from 'bits-ui'
+	import Icon from './Icon.n'
+
+	{
+		Root: ComboboxRoot
+		Input: ComboboxInput
+		Trigger: ComboboxTrigger
+		Portal: ComboboxPortal
+		Content: ComboboxContent
+		Viewport: ComboboxViewport
+		Item: ComboboxItem
+	} := Combobox
+
+	{
+		items = []
+		value = $bindable([])
+		open = $bindable(false)
+		placeholder = 'Search…'
+		disabled = false
+	} .= $props()
+
+	term .= $state ''
+
+	filtered := $derived.by =>
+		return items unless term
+		t := term.toLowerCase()
+		items.filter (it) => it.label.toLowerCase().includes(t)
+
+	labelOf := (v) => items.find((it) => it.value === v)?.label ?? v
+</script>

package/src/components/NumberInput.n

@@ -0,0 +1,49 @@
+.number-input(class!="{wrapClasses}")
+	button.number-step(type="button" aria-label="Decrement" disabled!="{disabled || atMin}" onclick!="{() => step(-1)}")
+		Icon(name="lucide:minus" size="size-3.5")
+	input.input.number-input-field(
+		type="number"
+		bind:value
+		min!="{min}"
+		max!="{max}"
+		step!="{stepSize}"
+		disabled!="{disabled}"
+		readonly!="{readonly}"
+		name!="{name}"
+		id!="{resolvedId}"
+		aria-invalid!="{hasError ? 'true' : undefined}"
+	)
+	button.number-step(type="button" aria-label="Increment" disabled!="{disabled || atMax}" onclick!="{() => step(1)}")
+		Icon(name="lucide:plus" size="size-3.5")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+
+	{
+		value = $bindable(0)
+		min = -Infinity
+		max = Infinity
+		stepSize = 1
+		disabled = false
+		readonly = false
+		name
+		id: providedId
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	atMin := $derived value <= min
+	atMax := $derived value >= max
+
+	step := (dir) =>
+		next := (value ?? 0) + dir * stepSize
+		value = Math.max min, Math.min(max, next)
+
+	wrapClasses := cn 'number-input-wrap', extra
+</script>

package/src/components/OtpField.n

@@ -0,0 +1,67 @@
+.otp-field(class!="{classes}" role="group" aria-label!="{label}")
+	+each('cells as _, i')
+		input.otp-cell(
+			type!="{mask ? 'password' : 'text'}"
+			inputmode="numeric"
+			maxlength="1"
+			autocomplete="one-time-code"
+			pattern="[0-9]*"
+			value!="{cells[i]}"
+			oninput!="{(e) => onCellInput(e, i)}"
+			onkeydown!="{(e) => onCellKey(e, i)}"
+			onpaste!="{onPaste}"
+			data-otp-index!="{i}"
+		)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		value = $bindable('')
+		length = 6
+		mask = false
+		label = 'One-time code'
+		oncomplete
+		class: extra = ''
+	} .= $props()
+
+	cells := $derived.by =>
+		out := []
+		for i of [0...length]
+			out.push value[i] ?? ''
+		out
+
+	classes := cn 'otp-field-wrap', extra
+
+	setCell := (i, ch) =>
+		next := cells.slice()
+		next[i] = ch
+		value = next.join('').replace /\s/g, ''
+		oncomplete?.(value) if value.length === length
+
+	focusCell := (i) =>
+		el := document.querySelector `[data-otp-index="${i}"]`
+		el?.focus()
+		el?.select?.()
+
+	onCellInput := (e, i) =>
+		ch := e.target.value.replace(/[^0-9]/g, '').slice(-1)
+		setCell i, ch
+		focusCell(i + 1) if ch && i < length - 1
+
+	onCellKey := (e, i) =>
+		if e.key === 'Backspace' && !cells[i] && i > 0
+			focusCell(i - 1)
+		else if e.key === 'ArrowLeft' && i > 0
+			focusCell(i - 1)
+		else if e.key === 'ArrowRight' && i < length - 1
+			focusCell(i + 1)
+
+	onPaste := (e) =>
+		text := (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, length)
+		return unless text
+		e.preventDefault()
+		value = text.padEnd(length, ' ').slice(0, length).trimEnd()
+		oncomplete?.(value) if value.length === length
+		focusCell Math.min(text.length, length - 1)
+</script>

package/src/components/Pagination.n

@@ -0,0 +1,73 @@
+nav.pagination(aria-label="Pagination" class!="{extra}")
+	button.pagination-item(
+		type="button"
+		aria-label="First"
+		disabled!="{page <= 1}"
+		onclick!="{() => go(1)}"
+	)
+		Icon(name="lucide:chevrons-left" size="size-4")
+	button.pagination-item(
+		type="button"
+		aria-label="Previous"
+		disabled!="{page <= 1}"
+		onclick!="{() => go(page - 1)}"
+	)
+		Icon(name="lucide:chevron-left" size="size-4")
+	+each('pages as p')
+		+if('p === "ellipsis"')
+			span.pagination-ellipsis …
+		+if('p !== "ellipsis"')
+			button.pagination-item(
+				type="button"
+				class!="{p === page ? 'pagination-item-active' : ''}"
+				aria-current!="{p === page ? 'page' : undefined}"
+				onclick!="{() => go(p)}"
+			)
+				| {p}
+	button.pagination-item(
+		type="button"
+		aria-label="Next"
+		disabled!="{page >= totalPages}"
+		onclick!="{() => go(page + 1)}"
+	)
+		Icon(name="lucide:chevron-right" size="size-4")
+	button.pagination-item(
+		type="button"
+		aria-label="Last"
+		disabled!="{page >= totalPages}"
+		onclick!="{() => go(totalPages)}"
+	)
+		Icon(name="lucide:chevrons-right" size="size-4")
+
+<script>
+	import Icon from './Icon.n'
+
+	{
+		page = $bindable(1)
+		total = 0
+		pageSize = 10
+		siblingCount = 1
+		class: extra = ''
+		...rest
+	} .= $props()
+
+	totalPages := $derived Math.max(1, Math.ceil(total / pageSize))
+
+	go := (p) =>
+		clamped := Math.max 1, Math.min(totalPages, p)
+		page = clamped
+
+	pages := $derived.by =>
+		out := []
+		first := 1
+		last := totalPages
+		left := Math.max(first, page - siblingCount)
+		right := Math.min(last, page + siblingCount)
+		out.push first
+		out.push 'ellipsis' if left > first + 1
+		for n of [first + 1 .. last - 1]
+			out.push n if n >= left && n <= right
+		out.push 'ellipsis' if right < last - 1
+		out.push last unless last === first
+		out
+</script>