@human-synthesis/norns-ui 0.0.2 → 0.0.5

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>

package/src/components/Popover.n

@@ -0,0 +1,32 @@
+PopoverRoot(bind:open)
+	+if('trigger')
+		PopoverTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger()}
+	PopoverPortal
+		PopoverContent(class!="{contentClasses}" side!="{side}" align!="{align}" sideOffset!="{sideOffset}")
+			| {@render children?.()}
+
+<script>
+	import { Popover } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: PopoverRoot
+		Trigger: PopoverTrigger
+		Portal: PopoverPortal
+		Content: PopoverContent
+	} := Popover
+
+	{
+		open = $bindable(false)
+		side = 'bottom'
+		align = 'center'
+		sideOffset = 8
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} .= $props()
+
+	contentClasses := cn 'popover-content', extra
+</script>

package/src/components/PreviewCard.n

@@ -0,0 +1,30 @@
+LinkPreviewRoot(openDelay!="{openDelay}")
+	LinkPreviewTrigger(href!="{href}" class!="{triggerClass ?? ''}")
+		| {@render trigger?.()}
+	LinkPreviewContent.popover-content(side!="{side}" align!="{align}" sideOffset!="{sideOffset}" class!="{contentClass}")
+		| {@render children?.()}
+
+<script>
+	import { LinkPreview } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: LinkPreviewRoot
+		Trigger: LinkPreviewTrigger
+		Content: LinkPreviewContent
+	} := LinkPreview
+
+	{
+		href
+		side = 'top'
+		align = 'center'
+		sideOffset = 8
+		openDelay = 700
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} := $props()
+
+	contentClass := cn 'w-72 p-3', extra
+</script>

package/src/components/Progress.n

@@ -0,0 +1,26 @@
+div(
+	class!="{wrapClasses}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax!="{max}"
+	aria-valuenow!="{indeterminate ? undefined : value}"
+)
+	.progress-bar(class!="{barClasses}" style!="{barStyle}")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		value = 0
+		max = 100
+		variant = 'primary'
+		indeterminate = false
+		class: extra = ''
+		...rest
+	} := $props()
+
+	pct := $derived Math.max(0, Math.min(100, (value / max) * 100))
+	wrapClasses := cn 'progress', indeterminate && 'progress-indeterminate', extra
+	barClasses := cn variant !== 'primary' && `progress-bar-${variant}`
+	barStyle := $derived indeterminate ? '' : `width: ${pct}%`
+</script>

package/src/components/ProgressCircular.n

@@ -0,0 +1,52 @@
+svg(
+	class!="{classes}"
+	width!="{px}"
+	height!="{px}"
+	viewBox!="0 0 {viewBox} {viewBox}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax!="{max}"
+	aria-valuenow!="{indeterminate ? undefined : value}"
+)
+	circle(
+		cx!="{center}"
+		cy!="{center}"
+		r!="{radius}"
+		stroke="var(--color-border)"
+		stroke-width!="{stroke}"
+		fill="none"
+	)
+	circle(
+		cx!="{center}"
+		cy!="{center}"
+		r!="{radius}"
+		stroke="var(--color-primary-600)"
+		stroke-width!="{stroke}"
+		stroke-linecap="round"
+		fill="none"
+		stroke-dasharray!="{circumference}"
+		stroke-dashoffset!="{indeterminate ? circumference * 0.7 : circumference - (circumference * pct) / 100}"
+		transform!="rotate(-90 {center} {center})"
+		style="transition: stroke-dashoffset 300ms ease-out"
+	)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		value = 0
+		max = 100
+		size = 'md'
+		indeterminate = false
+		class: extra = ''
+	} := $props()
+
+	px := size === 'sm' ? 24 : size === 'lg' ? 64 : 40
+	stroke := size === 'sm' ? 3 : size === 'lg' ? 5 : 4
+	viewBox := px
+	center := px / 2
+	radius := center - stroke
+	circumference := $derived 2 * Math.PI * radius
+	pct := $derived Math.max(0, Math.min(100, (value / max) * 100))
+	classes := cn indeterminate && 'animate-spin', extra
+</script>

package/src/components/RichTooltip.n

@@ -0,0 +1,33 @@
+TooltipProvider(delayDuration!="{openDelay}")
+	TooltipRoot
+		TooltipTrigger(class!="{triggerClass ?? ''}")
+			| {@render trigger?.()}
+		TooltipPortal
+			TooltipContent.popover-content(side!="{side}" align!="{align}" sideOffset!="{sideOffset}" class!="{contentClass}")
+				| {@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
+
+	{
+		side = 'top'
+		align = 'center'
+		sideOffset = 6
+		openDelay = 300
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} := $props()
+
+	contentClass := cn 'max-w-xs p-3 text-sm', extra
+</script>

package/src/components/RippleButton.n

@@ -0,0 +1,56 @@
+button(
+	type!="{type}"
+	class!="{classes}"
+	disabled!="{disabled}"
+	onclick!="{handleClick}"
+)
+	+each('ripples as r (r.id)')
+		span.ripple-btn-ripple(
+			aria-hidden="true"
+			style!="{`left: ${r.x}px; top: ${r.y}px; width: ${r.size}px; height: ${r.size}px`}"
+			ontransitionend!="{() => removeRipple(r.id)}"
+		)
+	+if('icon')
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		variant = 'primary'
+		size = 'md'
+		type = 'button'
+		disabled = false
+		onclick
+		icon
+		children
+		class: extra = ''
+	} .= $props()
+
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	classes := cn
+		'btn'
+		`btn-${variant}`
+		size !== 'md' && `btn-${size}`
+		'ripple-btn'
+		extra
+
+	ripples .= $state []
+	nextId .= 0
+
+	handleClick := (e) =>
+		rect := e.currentTarget.getBoundingClientRect()
+		size := Math.max(rect.width, rect.height) * 2
+		x := e.clientX - rect.left - size / 2
+		y := e.clientY - rect.top - size / 2
+		id := ++nextId
+		ripples = [...ripples, { id, x, y, size }]
+		onclick?.(e)
+
+	removeRipple := (id) =>
+		ripples = ripples.filter (r) => r.id !== id
+</script>

package/src/components/ScrollArea.n

@@ -0,0 +1,31 @@
+ScrollAreaRoot.scroll-area(class!="{classes}" type!="{type}")
+	ScrollAreaViewport.scroll-area-viewport
+		| {@render children?.()}
+	ScrollAreaScrollbar.scroll-area-scrollbar(orientation="vertical")
+		ScrollAreaThumb.scroll-area-thumb
+	+if('horizontal')
+		ScrollAreaScrollbar.scroll-area-scrollbar.scroll-area-scrollbar-h(orientation="horizontal")
+			ScrollAreaThumb.scroll-area-thumb
+	ScrollAreaCorner
+
+<script>
+	import { ScrollArea } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: ScrollAreaRoot
+		Viewport: ScrollAreaViewport
+		Scrollbar: ScrollAreaScrollbar
+		Thumb: ScrollAreaThumb
+		Corner: ScrollAreaCorner
+	} := ScrollArea
+
+	{
+		type = 'hover'
+		horizontal = false
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'relative overflow-hidden', extra
+</script>

package/src/components/Separator.n

@@ -0,0 +1,12 @@
+div(role="separator" class!="{classes}" aria-orientation!="{orientation}")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		orientation = 'horizontal'
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'separator', `separator-${orientation}`, extra
+</script>

package/src/components/Sheet.n

@@ -0,0 +1,55 @@
+DialogRoot(bind:open)
+	+if('trigger')
+		DialogTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger()}
+	DialogPortal
+		DialogOverlay(class!="{overlayClasses}")
+		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('actions')
+				.dialog-actions
+					| {@render actions()}
+			+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 = 'right'
+		title
+		description
+		hideClose = false
+		trigger
+		actions
+		children
+		triggerClass
+		overlayClass = ''
+		class: extra = ''
+	} .= $props()
+
+	overlayClasses := cn 'dialog-overlay', overlayClass
+	contentClasses := cn 'sheet-content', `sheet-${side}`, extra
+</script>

package/src/components/ShinyButton.n

@@ -0,0 +1,36 @@
+button(
+	type!="{type}"
+	class!="{classes}"
+	disabled!="{disabled}"
+	onclick!="{onclick}"
+)
+	span.shiny-btn-shine(aria-hidden="true")
+	+if('icon')
+		Icon(name!="{icon}" size!="{iconSize}")
+	+if('children')
+		| {@render children()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		variant = 'primary'
+		size = 'md'
+		type = 'button'
+		disabled = false
+		onclick
+		icon
+		children
+		class: extra = ''
+	} := $props()
+
+	iconSize := size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4'
+
+	classes := cn
+		'btn'
+		`btn-${variant}`
+		size !== 'md' && `btn-${size}`
+		'shiny-btn'
+		extra
+</script>

package/src/components/Skeleton.n

@@ -0,0 +1,27 @@
+span(class!="{classes}" style!="{style}" aria-hidden="true")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		variant = 'rect'
+		width
+		height
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'skeleton', variant === 'circle' && 'skeleton-circle', extra
+
+	style := $derived.by =>
+		parts := []
+		if width
+			parts.push `width: ${typeof width === 'number' ? `${width}px` : width}`
+		if height
+			parts.push `height: ${typeof height === 'number' ? `${height}px` : height}`
+		else if variant === 'text'
+			parts.push 'height: 0.875rem'
+		else if variant === 'circle' && !height
+			parts.push 'height: 2.5rem; width: 2.5rem'
+		parts.join '; '
+</script>

package/src/components/Stepper.n

@@ -0,0 +1,35 @@
+ol(class!="{classes}")
+	+each('steps as step, i')
+		li.stepper-step(class!="{stepClass(i)}")
+			.stepper-marker
+				+if('isComplete(i)')
+					Icon(name="lucide:check" size="size-3.5")
+				+if('!isComplete(i)')
+					| {i + 1}
+			.stepper-label
+				| {step.label}
+		+if('i < steps.length - 1')
+			.stepper-divider
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		steps = []
+		current = 0
+		orientation = 'horizontal'
+		class: extra = ''
+		...rest
+	} := $props()
+
+	classes := cn 'stepper', orientation === 'vertical' && 'stepper-vertical', extra
+
+	isComplete := (i) => steps[i]?.complete ?? i < current
+	isCurrent := (i) => steps[i]?.current ?? i === current
+
+	stepClass := (i) =>
+		cn
+			isCurrent(i) && 'stepper-step-current'
+			isComplete(i) && 'stepper-step-complete'
+</script>

package/src/components/Surface.n

@@ -0,0 +1,10 @@
+div(class!="{classes}")
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{ tone, children, class: extra = '' } := $props()
+
+	classes := cn 'surface p-4', tone === 'glass' && 'surface-glass', extra
+</script>