@human-synthesis/norns-ui 0.0.3 → 0.0.6

package/src/components/Autocomplete.n

@@ -0,0 +1,134 @@
+.combobox-input-wrap(use:refAction bind:this!="{wrapEl}")
+	input.input.combobox-input(
+		bind:this!="{inputEl}"
+		type="text"
+		bind:value!="{term}"
+		placeholder!="{placeholder}"
+		disabled!="{disabled}"
+		role="combobox"
+		aria-expanded!="{open}"
+		aria-controls!="{listboxId}"
+		aria-autocomplete="list"
+		aria-activedescendant!="{open && filtered[active] ? optionId(active) : undefined}"
+		id!="{resolvedId}"
+		aria-invalid!="{hasError ? 'true' : undefined}"
+		oninput!="{onInput}"
+		onkeydown!="{onKeyDown}"
+		onfocus!="{() => open = true}"
+		onblur!="{onBlur}"
+	)
+	button.combobox-trigger(type="button" tabindex="-1" aria-label="Toggle options" onclick!="{toggle}")
+		Icon(name="lucide:chevrons-up-down" size="size-4")
+
++if('open && filtered.length > 0')
+	ul(
+		use:portal
+		use:floatAction
+		use:clickOutside!="{[onClose, open, wrapEl]}"
+		class="dropdown-content combobox-listbox"
+		data-state="open"
+		id!="{listboxId}"
+		role="listbox"
+	)
+		+each('filtered as item, i (item.value)')
+			li.dropdown-item(
+				role="option"
+				id!="{optionId(i)}"
+				aria-selected!="{value === item.value}"
+				data-active!="{i === active ? 'true' : undefined}"
+				onpointerdown!="{(e) => { e.preventDefault(); pick(item) }}"
+			)
+				Icon(name="lucide:check" size="size-3.5" class!="{value === item.value ? '' : 'opacity-0'}")
+				span {item.label}
++if('open && filtered.length === 0')
+	div(use:portal use:floatAction use:clickOutside!="{[onClose, open, wrapEl]}" class="dropdown-content combobox-listbox" data-state="open")
+		.combobox-empty No matches
+
+<script>
+	import { getContext } from 'svelte'
+	import Icon from './Icon.n'
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
+
+	{
+		items = []
+		value = $bindable(undefined)
+		open = $bindable(false)
+		placeholder = 'Search…'
+		disabled = false
+		name
+		id: providedId
+		error: explicitError = false
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	uid := Math.random().toString(36).slice(2, 8)
+	listboxId := `listbox-${uid}`
+	optionId := (i) => `option-${uid}-${i}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: 'bottom-start'
+		offset: 4
+		matchWidth: true
+
+	term .= $state ''
+	active .= $state 0
+	inputEl .= $state null
+	wrapEl .= $state null
+
+	// Reset term to selected label when value changes externally.
+	$effect =>
+		if value !== undefined
+			match := items.find (it) => it.value === value
+			term = match?.label ?? '' if match && term !== match.label
+
+	filtered := $derived.by =>
+		return items unless term
+		t := term.toLowerCase()
+		items.filter (it) => it.label.toLowerCase().includes(t)
+
+	$effect =>
+		active = 0 if active >= filtered.length
+
+	onInput := =>
+		open = true
+		active = 0
+
+	toggle := =>
+		open = !open
+		inputEl?.focus() if open
+
+	onClose := => open = false
+
+	onBlur := =>
+		// Close after click handlers complete; pointerdown picks before this fires.
+		setTimeout (=> open = false), 100
+
+	pick := (item) =>
+		value = item.value
+		term = item.label
+		open = false
+
+	onKeyDown := (e) =>
+		switch e.key
+			when 'ArrowDown'
+				e.preventDefault()
+				open = true
+				active = Math.min(filtered.length - 1, active + 1)
+			when 'ArrowUp'
+				e.preventDefault()
+				open = true
+				active = Math.max(0, active - 1)
+			when 'Enter'
+				if open && filtered[active]
+					e.preventDefault()
+					pick filtered[active]
+			when 'Escape'
+				open = false
+			when 'Tab'
+				open = false
+</script>

package/src/components/Avatar.n

@@ -0,0 +1,27 @@
+span(class!="{classes}")
+	+if('src')
+		img(src!="{src}" alt!="{name ?? ''}" loading="lazy")
+	+if('!src && name')
+		| {initials}
+	+if('!src && !name')
+		Icon(name="lucide:user" size="size-1/2" class="opacity-50")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		src
+		name
+		size = 'md'
+		class: extra = ''
+		...rest
+	} := $props()
+
+	initials := $derived.by =>
+		return '' unless name
+		parts := name.trim().split /\s+/
+		`${parts[0][0] ?? ''}${parts[1]?.[0] ?? ''}`.toUpperCase()
+
+	classes := cn 'avatar', `avatar-${size}`, extra
+</script>

package/src/components/AvatarGroup.n

@@ -0,0 +1,25 @@
+.avatar-group(class!="{classes}" role="group" aria-label!="{label}")
+	+each('visible as item, i')
+		span.avatar-group-item(style!="{`--avatar-group-i: ${i}`}")
+			Avatar(src!="{item.src}" name!="{item.name}" size!="{size}")
+	+if('overflow > 0')
+		span.avatar-group-overflow(class!="{`avatar avatar-${size}`}" aria-hidden="true")
+			| +{overflow}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Avatar from './Avatar.n'
+
+	{
+		items = []
+		max = 5
+		size = 'md'
+		label = 'People'
+		class: extra = ''
+	} := $props()
+
+	visible := $derived items.slice(0, max)
+	overflow := $derived Math.max(0, items.length - max)
+
+	classes := cn 'avatar-group', extra
+</script>

package/src/components/Badge.n

@@ -0,0 +1,20 @@
+span(class!="{classes}")
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		variant = 'default'
+		size = 'md'
+		children
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn
+		'badge'
+		variant !== 'default' && `badge-${variant}`
+		size !== 'md' && `badge-${size}`
+		extra
+</script>

package/src/components/Banner.n

@@ -0,0 +1,25 @@
+div(class!="{classes}" role="status")
+	+if('icon')
+		.banner-icon
+			Icon(name!="{icon}" size="size-5")
+	.banner-body
+		| {@render children?.()}
+	+if('actions')
+		.banner-actions
+			| {@render actions()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		variant = 'info'
+		icon
+		actions
+		children
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'banner', `banner-${variant}`, extra
+</script>

package/src/components/Breadcrumbs.n

@@ -0,0 +1,22 @@
+nav.breadcrumbs(aria-label="Breadcrumb" class!="{extra}")
+	ol.flex.items-center.gap-1
+		+each('items as item, i')
+			li.breadcrumb-item
+				+if('item.href && i < items.length - 1')
+					a.breadcrumb-link(href!="{item.href}")
+						| {item.label}
+				+if('!item.href || i === items.length - 1')
+					span(class!="{i === items.length - 1 ? 'breadcrumb-current' : ''}")
+						| {item.label}
+				+if('i < items.length - 1')
+					span.breadcrumb-separator(aria-hidden="true")
+						| {separator}
+
+<script>
+	{
+		items = []
+		separator = '/'
+		class: extra = ''
+		...rest
+	} := $props()
+</script>

package/src/components/Btn.n

@@ -1,12 +1,8 @@
-button(
-	type!="{type}"
-	class!="{classes}"
-	disabled!="{disabled || loading}"
-	onclick!="{onclick}"
-	aria-busy!="{loading ? 'true' : undefined}"
-)
++snippet('body')
 	+if('loading')
 		span.ui-spinner(aria-hidden="true")
+	+if('!loading && icon')
+		Icon(name!="{icon}" size!="{iconSize}")
 	+if('!loading && leading')
 		| {@render leading()}
 	+if('children')
@@ -14,8 +10,28 @@ button(
 	+if('!loading && trailing')
 		| {@render trailing()}
 
++if('href')
+	a(
+		href!="{href}"
+		target!="{target}"
+		rel!="{rel}"
+		class!="{classes}"
+		aria-disabled!="{disabled || loading ? 'true' : undefined}"
+	)
+		| {@render body()}
++if('!href')
+	button(
+		type!="{type}"
+		class!="{classes}"
+		disabled!="{disabled || loading}"
+		onclick!="{onclick}"
+		aria-busy!="{loading ? 'true' : undefined}"
+	)
+		| {@render body()}
+
 <script>
 	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
 
 	{
 		variant = 'primary'
@@ -24,11 +40,16 @@ button(
 		disabled = false
 		type = 'button'
 		onclick = undefined
+		icon
+		href
+		target
+		rel
 		children
 		leading
 		trailing
 		class: extra = ''
 	} := $props()
 
-	classes := cn 'btn', `btn-${variant}`, size !== 'md' && `btn-${size}`, extra
+	classes := cn 'btn', `btn-${variant}`, size !== 'md' && `btn-${size}`, 'no-underline', extra
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
 </script>

package/src/components/ButtonGroup.n

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

package/src/components/Calendar.n

@@ -0,0 +1,153 @@
+.calendar(class!="{classes}" role="application" aria-label!="{label}")
+	.calendar-header
+		button.calendar-nav(type="button" aria-label="Previous month" onclick!="{prevMonth}")
+			Icon(name="lucide:chevron-left" size="size-4")
+		button.calendar-heading-btn(type="button" aria-label="Jump to today" onclick!="{goToday}")
+			| {monthLabel}
+		button.calendar-nav(type="button" aria-label="Next month" onclick!="{nextMonth}")
+			Icon(name="lucide:chevron-right" size="size-4")
+
+	.calendar-row.calendar-weekdays
+		+each('weekdays as wd')
+			.calendar-weekday {wd}
+
+	+each('weeks as week')
+		.calendar-row
+			+each('week as cell')
+				button.calendar-day(
+					type="button"
+					class!="{cellClass(cell)}"
+					disabled!="{cell.disabled}"
+					aria-pressed!="{cell.selected}"
+					tabindex!="{cell.outside ? -1 : 0}"
+					onclick!="{() => onSelect(cell)}"
+					onmouseenter!="{() => range && (hovered = cell.iso)}"
+				)
+					| {cell.day}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		value = $bindable('')                           // ISO YYYY-MM-DD (single-date mode)
+		rangeValue = $bindable({ start: '', end: '' })  // (range mode)
+		range = false
+		min = ''
+		max = ''
+		label = 'Calendar'
+		onchange
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'calendar', extra
+
+	weekdays := ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+	monthFmt := new Intl.DateTimeFormat undefined, { month: 'long', year: 'numeric' }
+
+	// View anchor — initialised from value (or today) once.
+	initial := =>
+		s := range ? rangeValue?.start : value
+		s ? new Date(`${s}T00:00:00`) : new Date()
+	anchor .= $state initial()
+
+	hovered .= $state ''
+
+	monthLabel := $derived monthFmt.format(anchor)
+
+	prevMonth := =>
+		d := new Date anchor
+		d.setMonth d.getMonth() - 1
+		anchor = d
+
+	nextMonth := =>
+		d := new Date anchor
+		d.setMonth d.getMonth() + 1
+		anchor = d
+
+	goToday := => anchor = new Date()
+
+	pad := (n) => String(n).padStart 2, '0'
+	iso := (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+	todayIso := iso new Date()
+
+	weeks := $derived.by =>
+		year := anchor.getFullYear()
+		month := anchor.getMonth()
+		firstDow := new Date(year, month, 1).getDay()
+		daysInMonth := new Date(year, month + 1, 0).getDate()
+
+		// Build a flat 42-cell grid (6 rows × 7 cols).
+		cells := []
+		// leading days from previous month
+		i .= 0
+		while i < firstDow
+			d := new Date(year, month, -(firstDow - 1 - i))
+			cells.push buildCell(d, true)
+			i++
+		// current month
+		j .= 1
+		while j <= daysInMonth
+			d := new Date(year, month, j)
+			cells.push buildCell(d, false)
+			j++
+		// trailing
+		k .= 1
+		while cells.length < 42
+			d := new Date(year, month + 1, k)
+			cells.push buildCell(d, true)
+			k++
+
+		// Group into 6 rows of 7
+		out := []
+		w .= 0
+		while w < 6
+			out.push cells.slice(w * 7, w * 7 + 7)
+			w++
+		out
+
+	buildCell := (d, outside) =>
+		isoStr := iso(d)
+		isToday := isoStr === todayIso
+		disabled .= false
+		disabled = true if min && isoStr < min
+		disabled = true if max && isoStr > max
+		selected .= false
+		inRange .= false
+		if range
+			s := rangeValue?.start ?? ''
+			e := rangeValue?.end ?? ''
+			selected = !!((s && s === isoStr) || (e && e === isoStr))
+			if s && !e && hovered
+				lo := s < hovered ? s : hovered
+				hi := s < hovered ? hovered : s
+				inRange = isoStr > lo && isoStr < hi
+			else if s && e
+				inRange = isoStr > s && isoStr < e
+		else
+			selected = value === isoStr
+		{ day: d.getDate(), iso: isoStr, outside, disabled, selected, today: isToday, inRange }
+
+	cellClass := (cell) =>
+		cn
+			cell.outside && 'calendar-day-outside'
+			cell.today && 'calendar-day-today'
+			cell.selected && 'calendar-day-selected'
+			cell.inRange && 'calendar-day-in-range'
+
+	onSelect := (cell) =>
+		return if cell.disabled
+		if range
+			s := rangeValue?.start ?? ''
+			e := rangeValue?.end ?? ''
+			if !s || (s && e)
+				rangeValue = { start: cell.iso, end: '' }
+			else if cell.iso < s
+				rangeValue = { start: cell.iso, end: s }
+			else
+				rangeValue = { start: s, end: cell.iso }
+			onchange?.(rangeValue)
+		else
+			value = cell.iso
+			onchange?.(value)
+</script>

package/src/components/Card.n

@@ -0,0 +1,34 @@
++snippet('body')
+	+if('header')
+		.card-header
+			| {@render header()}
+	.card-body(class!="{padded ? '' : 'p-0'}")
+		| {@render children?.()}
+	+if('footer')
+		.card-footer
+			| {@render footer()}
+
++if('href')
+	a(href!="{href}" target!="{target}" rel!="{rel}" class!="{classes}")
+		| {@render body()}
++if('!href')
+	div(class!="{classes}")
+		| {@render body()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		padded = true
+		interactive = false
+		href
+		target
+		rel
+		header
+		footer
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'card', (interactive || href) && 'card-interactive', extra
+</script>

package/src/components/Carousel.n

@@ -0,0 +1,66 @@
+.carousel(class!="{classes}" onmouseenter!="{pause}" onmouseleave!="{resume}")
+	.carousel-track(style!="{trackStyle}")
+		+each('slides as item, i')
+			.carousel-slide
+				+if('item.src')
+					img(src!="{item.src}" alt!="{item.alt ?? ''}" loading="lazy" class="block w-full h-full object-cover")
+				+if('!item.src && children')
+					| {@render children(item, i)}
+	+if('slides.length > 1')
+		button.carousel-arrow.carousel-arrow-prev(
+			type="button"
+			aria-label="Previous"
+			onclick!="{prev}"
+		)
+			Icon(name="lucide:chevron-left" size="size-5")
+		button.carousel-arrow.carousel-arrow-next(
+			type="button"
+			aria-label="Next"
+			onclick!="{next}"
+		)
+			Icon(name="lucide:chevron-right" size="size-5")
+		.carousel-dots
+			+each('slides as _, i')
+				button.carousel-dot(
+					type="button"
+					aria-label!="{`Go to slide ${i + 1}`}"
+					class!="{i === index ? 'carousel-dot-active' : ''}"
+					onclick!="{() => index = i}"
+				)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		slides = []
+		index = $bindable(0)
+		autoplay = false
+		interval = 5000
+		aspect = 'video'
+		children
+		class: extra = ''
+	} .= $props()
+
+	// Default aspect ratios; user can pass `class="aspect-square"` etc. to override.
+	aspectClass := aspect === 'square' ? 'aspect-square'
+		: aspect === 'wide' ? 'aspect-[21/9]'
+		: aspect === 'video' ? 'aspect-video'
+		: ''
+
+	classes := cn 'carousel', aspectClass, extra
+
+	trackStyle := $derived `transform: translateX(-${index * 100}%)`
+
+	prev := => index = (index - 1 + slides.length) % slides.length
+	next := => index = (index + 1) % slides.length
+
+	paused .= $state false
+	pause := => paused = true
+	resume := => paused = false
+
+	$effect =>
+		return unless autoplay && slides.length > 1
+		id := setInterval (=> next() unless paused), interval
+		=> clearInterval id
+</script>

package/src/components/Chip.n

@@ -0,0 +1,27 @@
+span(class!="{classes}")
+	+if('icon')
+		Icon(name!="{icon}" size="size-3.5")
+	| {@render children?.()}
+	+if('removable')
+		button.chip-remove(
+			type="button"
+			aria-label="Remove"
+			onclick!="{onremove}"
+		)
+			Icon(name="lucide:x" size="size-3")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		removable = false
+		onremove = undefined
+		icon
+		children
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'chip', extra
+</script>

package/src/components/Collapsible.n

@@ -0,0 +1,29 @@
+details.collapsible(class!="{classes}" bind:open ontoggle!="{onToggle}")
+	summary.collapsible-trigger
+		.collapsible-chevron
+			Icon(name="lucide:chevron-right" size="size-4")
+		+if('title')
+			span.collapsible-title {title}
+		+if('!title && trigger')
+			| {@render trigger()}
+	.collapsible-content
+		| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		open = $bindable(false)
+		title
+		trigger
+		children
+		onopenchange
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'collapsible', extra
+
+	onToggle := (e) =>
+		onopenchange?.(e.target.open)
+</script>