@human-synthesis/norns-ui 0.0.1 → 0.0.3

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/Radio.n

@@ -0,0 +1,33 @@
+input(
+	type="radio"
+	id!="{resolvedId}"
+	name!="{name}"
+	value!="{value}"
+	bind:group
+	required!="{required}"
+	disabled!="{disabled}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	class!="{classes}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		group = $bindable()
+		value
+		name
+		id: providedId
+		required = false
+		disabled = false
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	classes := cn 'radio', hasError && 'radio-err', extra
+</script>

package/src/components/Select.n

@@ -0,0 +1,34 @@
+select(
+	id!="{resolvedId}"
+	name!="{name}"
+	bind:value
+	required!="{required}"
+	disabled!="{disabled}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	aria-describedby!="{describedBy}"
+	class!="{classes}"
+)
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		value = $bindable()
+		name
+		id: providedId
+		required = false
+		disabled = false
+		error: explicitError = false
+		children
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+	describedBy := resolvedId && hasError ? `${resolvedId}-error` : undefined
+
+	classes := cn 'select', hasError && 'select-err', 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/Switch.n

@@ -0,0 +1,34 @@
+input(
+	type="checkbox"
+	role="switch"
+	id!="{resolvedId}"
+	name!="{name}"
+	value!="{value}"
+	bind:checked
+	required!="{required}"
+	disabled!="{disabled}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	class!="{classes}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		checked = $bindable(false)
+		value
+		name
+		id: providedId
+		required = false
+		disabled = false
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	classes := cn 'switch', extra
+</script>

package/src/components/Tabs.n

@@ -0,0 +1,28 @@
+TabsRoot(bind:value class!="{rootClasses}")
+	TabsList.tabs-list
+		+each('items as item (item.value)')
+			TabsTrigger.tabs-trigger(value!="{item.value}" disabled!="{item.disabled}")
+				| {item.label}
+	+each('items as item (item.value)')
+		TabsContent.tabs-content(value!="{item.value}")
+			| {@render item.panel?.()}
+
+<script>
+	import { Tabs } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: TabsRoot
+		List: TabsList
+		Trigger: TabsTrigger
+		Content: TabsContent
+	} := Tabs
+
+	{
+		value = $bindable()
+		items = []
+		class: extra = ''
+	} .= $props()
+
+	rootClasses := cn 'tabs-root', extra
+</script>

package/src/components/Textarea.n

@@ -0,0 +1,38 @@
+textarea(
+	id!="{resolvedId}"
+	name!="{name}"
+	bind:value
+	placeholder!="{placeholder}"
+	rows!="{rows}"
+	required!="{required}"
+	disabled!="{disabled}"
+	readonly!="{readonly}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	aria-describedby!="{describedBy}"
+	class!="{classes}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		value = $bindable('')
+		name
+		id: providedId
+		placeholder
+		rows = 4
+		required = false
+		disabled = false
+		readonly = false
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+	describedBy := resolvedId && hasError ? `${resolvedId}-error` : undefined
+
+	classes := cn 'textarea', hasError && 'textarea-err', extra
+</script>

package/src/components/ToastProvider.n

@@ -0,0 +1,16 @@
+div(role="region" aria-label="Notifications" class!="{regionClasses}")
+	+each('toastStore.items as item (item.id)')
+		div(class!="{`toast toast-${item.variant}`}" role="status" data-id!="{item.id}")
+			.toast-message
+				| {item.message}
+			button.toast-close(type="button" aria-label="Dismiss" onclick!="{() => dismiss(item.id)}")
+				| ✕
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { toastStore, dismiss } from '@human-synthesis/norns-ui/toast'
+
+	{ class: extra = '' } := $props()
+
+	regionClasses := cn 'toast-region', extra
+</script>

package/src/components/Tooltip.n

@@ -0,0 +1,34 @@
+TooltipProvider(delayDuration!="{delay}")
+	TooltipRoot
+		TooltipTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger?.()}
+		TooltipPortal
+			TooltipContent(class!="{contentClasses}" side!="{side}" sideOffset!="{sideOffset}")
+				| {content ?? ''}
+				| {@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
+
+	{
+		content
+		side = 'top'
+		sideOffset = 6
+		delay = 300
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} .= $props()
+
+	contentClasses := cn 'tooltip-content', extra
+</script>

package/src/index.js

@@ -7,7 +7,31 @@
  * code that auto-import doesn't process (e.g. dynamic mount).
  */
 
+// Phase 1
 export { default as Btn } from './components/Btn.n';
+
+// Phase 2 — forms tier
+export { default as Checkbox } from './components/Checkbox.n';
+export { default as Field } from './components/Field.n';
+export { default as FieldGroup } from './components/FieldGroup.n';
+export { default as Form } from './components/Form.n';
+export { default as Input } from './components/Input.n';
+export { default as Radio } from './components/Radio.n';
+export { default as Select } from './components/Select.n';
+export { default as Switch } from './components/Switch.n';
+export { default as Textarea } from './components/Textarea.n';
+
+// Phase 3 — behavior tier (Bits UI)
+export { default as Dialog } from './components/Dialog.n';
+export { default as Sheet } from './components/Sheet.n';
+export { default as Popover } from './components/Popover.n';
+export { default as Dropdown } from './components/Dropdown.n';
+export { default as Tooltip } from './components/Tooltip.n';
+export { default as Tabs } from './components/Tabs.n';
+export { default as ToastProvider } from './components/ToastProvider.n';
+
+// Helpers
 export { cn } from './lib/cn.js';
 export { variantClasses } from './lib/variants.js';
 export { presetUI } from './auto-import.js';
+export { toast, notify, dismiss, clear } from './lib/toast.svelte.js';

package/src/lib/toast.svelte.js

@@ -0,0 +1,42 @@
+/**
+ * Toast store + helpers. Single in-process queue, mounted once via
+ * <ToastProvider>. `toast(msg)` pushes from anywhere — server actions,
+ * client effects, button handlers.
+ */
+
+let nextId = 0;
+
+export const toastStore = $state({ items: [] });
+
+/**
+ * Push a toast. Returns the toast id so the caller can dismiss early.
+ *
+ * @param {string} message
+ * @param {{ variant?: 'info' | 'success' | 'warning' | 'error', duration?: number }} [opts]
+ *   `duration` in ms, default 4000. Set to 0 for sticky.
+ */
+export function toast(message, opts = {}) {
+	const id = ++nextId;
+	const item = {
+		id,
+		message,
+		variant: opts.variant ?? 'info',
+		duration: opts.duration ?? 4000
+	};
+	toastStore.items.push(item);
+	if (item.duration > 0) {
+		setTimeout(() => dismiss(id), item.duration);
+	}
+	return id;
+}
+
+export const notify = toast;
+
+export function dismiss(id) {
+	const i = toastStore.items.findIndex((t) => t.id === id);
+	if (i >= 0) toastStore.items.splice(i, 1);
+}
+
+export function clear() {
+	toastStore.items.length = 0;
+}

package/src/styles/atoms.css

@@ -59,4 +59,306 @@
 	.ui-spinner {
 		@apply inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent;
 	}
+
+	/* --- Text inputs --- */
+	.input {
+		@apply block w-full rounded-md border border-neutral-300 bg-white text-sm text-neutral-900 shadow-sm;
+		@apply placeholder:text-neutral-400;
+		@apply transition-[border-color,box-shadow] duration-150 ease-out;
+		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
+		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		height: var(--ui-h-md);
+		padding-inline: 0.75rem;
+	}
+
+	.input-sm {
+		@apply text-xs;
+		height: var(--ui-h-sm);
+		padding-inline: 0.625rem;
+	}
+
+	.input-lg {
+		@apply text-base;
+		height: var(--ui-h-lg);
+		padding-inline: 0.875rem;
+	}
+
+	.input-err {
+		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+	}
+
+	/* Textarea overrides .input's height */
+	.textarea {
+		@apply block w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm;
+		@apply placeholder:text-neutral-400;
+		@apply transition-[border-color,box-shadow] duration-150 ease-out;
+		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
+		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		min-height: calc(var(--ui-h-md) * 2);
+	}
+
+	.textarea-err {
+		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+	}
+
+	.select {
+		@apply block w-full rounded-md border border-neutral-300 bg-white text-sm text-neutral-900 shadow-sm;
+		@apply transition-[border-color,box-shadow] duration-150 ease-out;
+		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
+		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		height: var(--ui-h-md);
+		padding-inline: 0.75rem;
+	}
+
+	.select-err {
+		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+	}
+
+	/* --- Checkbox / Radio --- */
+	.checkbox {
+		@apply size-4 cursor-pointer rounded border-neutral-300 text-primary-600 shadow-sm;
+		@apply focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1;
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
+	}
+
+	.checkbox-err {
+		@apply border-red-500 focus:ring-red-500/30;
+	}
+
+	.radio {
+		@apply size-4 cursor-pointer border-neutral-300 text-primary-600 shadow-sm;
+		@apply focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1;
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
+	}
+
+	.radio-err {
+		@apply border-red-500 focus:ring-red-500/30;
+	}
+
+	/* --- Switch (styled checkbox / toggle) ---
+	 * Implemented as a checkbox the user wraps in a label; we provide the
+	 * pill track via .switch and the moving knob via ::before.
+	 */
+	.switch {
+		@apply relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-neutral-200 shadow-inner;
+		@apply transition-colors duration-150 ease-out;
+		@apply checked:bg-primary-600;
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:ring-offset-1;
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
+	}
+	.switch::before {
+		content: '';
+		@apply absolute left-0.5 top-0.5 size-4 rounded-full bg-white shadow;
+		@apply transition-transform duration-150 ease-out;
+	}
+	.switch:checked::before {
+		transform: translateX(1rem);
+	}
+
+	/* --- Field (label + control + help/error) --- */
+	.field {
+		@apply flex flex-col;
+	}
+
+	.field-label {
+		@apply mb-1 block text-sm font-medium text-neutral-700;
+	}
+
+	.field-required {
+		@apply ml-0.5 text-red-600;
+	}
+
+	.field-help {
+		@apply mt-1 text-xs text-neutral-500;
+	}
+
+	.field-error {
+		@apply mt-1 text-xs text-red-600;
+	}
+
+	.field-row {
+		@apply flex items-center gap-2;
+	}
+
+	/* Field-group: border-grouped collection of fields */
+	.field-group {
+		@apply space-y-3 rounded-md border border-neutral-200 p-4;
+	}
+
+	.field-group-legend {
+		@apply -mx-1 -mt-1 px-1 text-sm font-medium text-neutral-700;
+	}
+
+	/* --- Form (vertical stack of fields) --- */
+	.form {
+		@apply space-y-4;
+	}
+
+	/* --- Dialog (modal) ---
+	 * Bits UI toggles `data-state="open|closed"`. We use plain CSS transitions
+	 * targeting that attribute for fade + scale; no `tailwindcss-animate`
+	 * dependency, no v4 plugin.
+	 */
+	.dialog-overlay {
+		@apply fixed inset-0 z-50 bg-black/50 backdrop-blur-sm opacity-0 transition-opacity duration-150;
+	}
+	.dialog-overlay[data-state='open'] {
+		@apply opacity-100;
+	}
+
+	.dialog-content {
+		@apply fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2;
+		@apply rounded-lg border border-neutral-200 bg-white p-6 shadow-xl;
+		@apply opacity-0 scale-95 transition duration-150;
+	}
+	.dialog-content[data-state='open'] {
+		@apply opacity-100 scale-100;
+	}
+
+	.dialog-title {
+		@apply text-lg font-semibold leading-tight tracking-tight text-neutral-900;
+	}
+
+	.dialog-description {
+		@apply mt-1 text-sm text-neutral-600;
+	}
+
+	.dialog-body {
+		@apply mt-4;
+	}
+
+	.dialog-actions {
+		@apply mt-6 flex items-center justify-end gap-2;
+	}
+
+	.dialog-close {
+		@apply absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-md text-neutral-500;
+		@apply hover:bg-neutral-100 hover:text-neutral-900;
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
+	}
+
+	/* --- Sheet (side panel) --- */
+	.sheet-content {
+		@apply fixed z-50 border border-neutral-200 bg-white shadow-xl transition-transform duration-200 ease-out;
+	}
+	.sheet-right {
+		@apply right-0 top-0 h-full w-full max-w-md translate-x-full p-6;
+	}
+	.sheet-right[data-state='open'] {
+		@apply translate-x-0;
+	}
+	.sheet-left {
+		@apply left-0 top-0 h-full w-full max-w-md -translate-x-full p-6;
+	}
+	.sheet-left[data-state='open'] {
+		@apply translate-x-0;
+	}
+	.sheet-top {
+		@apply left-0 top-0 w-full -translate-y-full p-6;
+	}
+	.sheet-top[data-state='open'] {
+		@apply translate-y-0;
+	}
+	.sheet-bottom {
+		@apply bottom-0 left-0 w-full translate-y-full p-6;
+	}
+	.sheet-bottom[data-state='open'] {
+		@apply translate-y-0;
+	}
+
+	.sheet-body {
+		@apply mt-4;
+	}
+
+	/* --- Popover --- */
+	.popover-content {
+		@apply z-50 rounded-md border border-neutral-200 bg-white p-3 text-sm shadow-md;
+		@apply opacity-0 scale-95 transition duration-150;
+	}
+	.popover-content[data-state='open'] {
+		@apply opacity-100 scale-100;
+	}
+
+	/* --- Dropdown menu --- */
+	.dropdown-content {
+		@apply z-50 min-w-[8rem] rounded-md border border-neutral-200 bg-white p-1 text-sm shadow-md;
+		@apply opacity-0 scale-95 transition duration-150;
+	}
+	.dropdown-content[data-state='open'] {
+		@apply opacity-100 scale-100;
+	}
+	.dropdown-item {
+		@apply flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-neutral-800 outline-none;
+		@apply data-[highlighted]:bg-neutral-100 data-[highlighted]:text-neutral-900;
+		@apply data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50;
+	}
+	.dropdown-separator {
+		@apply -mx-1 my-1 h-px bg-neutral-200;
+	}
+
+	/* --- Tooltip --- */
+	.tooltip-content {
+		@apply z-50 overflow-hidden rounded-md bg-neutral-900 px-2 py-1 text-xs text-white shadow-md;
+		@apply opacity-0 scale-95 transition duration-150;
+	}
+	.tooltip-content[data-state='delayed-open'],
+	.tooltip-content[data-state='instant-open'] {
+		@apply opacity-100 scale-100;
+	}
+
+	/* --- Tabs --- */
+	.tabs-root {
+		@apply space-y-3;
+	}
+	.tabs-list {
+		@apply inline-flex h-9 items-center justify-center rounded-md bg-neutral-100 p-1 text-neutral-600;
+	}
+	.tabs-trigger {
+		@apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium;
+		@apply transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
+		@apply data-[state=active]:bg-white data-[state=active]:text-neutral-900 data-[state=active]:shadow-sm;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+	.tabs-content {
+		@apply focus-visible:outline-none;
+	}
+
+	/* --- Toast --- */
+	.toast-region {
+		@apply pointer-events-none fixed bottom-4 right-4 z-[100] flex w-full max-w-sm flex-col gap-2;
+	}
+	.toast {
+		@apply pointer-events-auto flex items-start gap-3 rounded-md border border-neutral-200 bg-white p-3 shadow-md;
+		animation: norns-toast-in 200ms ease-out;
+	}
+	@keyframes norns-toast-in {
+		from {
+			opacity: 0;
+			transform: translateX(1rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+	.toast-info {
+		@apply border-neutral-200;
+	}
+	.toast-success {
+		@apply border-green-200 bg-green-50 text-green-900;
+	}
+	.toast-warning {
+		@apply border-amber-200 bg-amber-50 text-amber-900;
+	}
+	.toast-error {
+		@apply border-red-200 bg-red-50 text-red-900;
+	}
+	.toast-message {
+		@apply flex-1 text-sm leading-snug;
+	}
+	.toast-close {
+		@apply -mr-1 -mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded text-neutral-500;
+		@apply hover:bg-neutral-100 hover:text-neutral-900;
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
+	}
 }