@human-synthesis/norns-ui 0.0.3 → 0.0.5

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,32 @@
+CollapsibleRoot(bind:open class!="{classes}")
+	CollapsibleTrigger.collapsible-trigger
+		.collapsible-chevron(class!="{open ? 'collapsible-chevron-open' : ''}")
+			Icon(name="lucide:chevron-right" size="size-4")
+		+if('title')
+			span.collapsible-title {title}
+		+if('!title && trigger')
+			| {@render trigger()}
+	CollapsibleContent.collapsible-content
+		| {@render children?.()}
+
+<script>
+	import { Collapsible } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		Root: CollapsibleRoot
+		Trigger: CollapsibleTrigger
+		Content: CollapsibleContent
+	} := Collapsible
+
+	{
+		open = $bindable(false)
+		title
+		trigger
+		children
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'collapsible', extra
+</script>

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,48 @@
+ContextMenuRoot
+	ContextMenuTrigger(class!="{triggerClass ?? ''}")
+		| {@render trigger?.()}
+	ContextMenuPortal
+		ContextMenuContent.dropdown-content
+			| {@render renderItems(items)}
+
++snippet('renderItems', list)
+	+each('list as item')
+		+if('item.separator')
+			ContextMenuSeparator.dropdown-separator
+		+if('!item.separator && !item.children')
+			ContextMenuItem.dropdown-item(disabled!="{item.disabled}" onSelect!="{item.onSelect}")
+				+if('item.icon')
+					Icon(name!="{item.icon}" size="size-3.5")
+				span {item.label}
+		+if('!item.separator && item.children')
+			ContextMenuSubRoot
+				ContextMenuSubTrigger.dropdown-item(disabled!="{item.disabled}")
+					+if('item.icon')
+						Icon(name!="{item.icon}" size="size-3.5")
+					span.flex-1 {item.label}
+					Icon(name="lucide:chevron-right" size="size-3.5")
+				ContextMenuSubContent.dropdown-content
+					| {@render renderItems(item.children)}
+
+<script>
+	import { ContextMenu } from 'bits-ui'
+	import Icon from './Icon.n'
+
+	{
+		Root: ContextMenuRoot
+		Trigger: ContextMenuTrigger
+		Portal: ContextMenuPortal
+		Content: ContextMenuContent
+		Item: ContextMenuItem
+		Separator: ContextMenuSeparator
+		Sub: ContextMenuSubRoot
+		SubTrigger: ContextMenuSubTrigger
+		SubContent: ContextMenuSubContent
+	} := ContextMenu
+
+	{
+		items = []
+		trigger
+		triggerClass
+	} := $props()
+</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>