bref-ui 0.3.1 → 2.0.1

package/cli/registry/plan/index.ts

@@ -0,0 +1,14 @@
+import type { RegistryEntry } from '../types.js';
+import { collectEntries } from './collect-entries.js';
+
+/**
+ * Resolve a component and its dependencies without accessing the filesystem.
+ * @param componentId Component requested for installation.
+ * @param registry Validated catalogue returned by loadRegistry.
+ * @returns Unique entries in dependency-first order, preserving declared dependency order.
+ * @throws When the requested component or a dependency is absent from the catalogue.
+ */
+export const planDependencies = (
+	componentId: string,
+	registry: Map<string, RegistryEntry>
+): RegistryEntry[] => collectEntries(componentId, registry, new Set<string>());

package/cli/registry/types.ts

@@ -0,0 +1,17 @@
+/** Component installation metadata declared in a colocated registry.json. */
+export interface RegistryItem {
+	/** Unique kebab-case component identifier. */
+	id: string;
+	/** Unique source-file paths relative to the component directory. */
+	files: string[];
+	/** Component export names mapped to paths listed in files. */
+	exports: Record<string, string>;
+	/** Unique component IDs required by this component; may be empty. */
+	dependencies: string[];
+}
+
+/** Validated manifest metadata paired with its source directory. */
+export interface RegistryEntry extends RegistryItem {
+	/** Containing component directory, used to locate the listed source files. */
+	directory: string;
+}

package/dist/button/button.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	/* eslint-disable svelte/consistent-selector-style -- Keep the shared button/link geometry scoped to .button. */
+	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
+	import type { ButtonProps } from './types.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		color = 'foreground',
+		size = 'medium',
+		variant = 'neutral',
+		label,
+		icon,
+		trailingIcon,
+		wide = false,
+		rounded = false,
+		disabled = false,
+		href,
+		onClick,
+		class: className,
+		...attributes
+	}: ButtonProps = $props();
+
+	const isIcon = $derived(label === undefined);
+	const isLink = $derived(href !== undefined);
+	const common = $derived({
+		class: ['button', surface({ variant, color, shadow: 'small', hover: 'medium' }), className],
+		'aria-label': attributes['aria-label'] ?? (isIcon ? (icon?.label ?? icon?.name) : undefined),
+		'data-color': color,
+		'data-size': size,
+		'data-variant': variant,
+		'data-kind': isIcon ? 'icon' : 'normal',
+		'data-wide': wide && !isIcon ? '' : undefined,
+		'data-rounded': rounded && isIcon ? '' : undefined
+	});
+</script>
+
+{#snippet content()}
+	{#if icon}
+		<span><Icon {...icon} color={undefined} label={undefined} /></span>
+	{/if}
+	{#if !isIcon}
+		{label}
+		{#if trailingIcon}
+			<span><Icon {...trailingIcon} color={undefined} label={undefined} /></span>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if isLink}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -- Native library links also support consumers outside SvelteKit. -->
+	<a
+		{...attributes as HTMLAnchorAttributes}
+		{...common}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled ? true : attributes['aria-disabled']}
+		tabindex={disabled ? -1 : attributes.tabindex}
+		onclick={disabled ? (event) => event.preventDefault() : onClick}
+	>
+		{@render content()}
+	</a>
+	<!-- eslint-enable svelte/no-navigation-without-resolve -->
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		{...common}
+		type={(attributes as HTMLButtonAttributes).type ?? 'button'}
+		{disabled}
+		onclick={onClick}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.button {
+		--internal-height: max(48px, 3rem);
+		--internal-padding: 1.125rem;
+		--internal-icon-size: calc(var(--internal-height) / 2 + 0.25rem);
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: capitalize;
+		gap: 0.5rem;
+		min-height: var(--internal-height);
+		min-width: 24px;
+		padding: 0.25rem var(--internal-padding);
+		border-radius: 0.45rem;
+		font: inherit;
+		font-size: 1rem;
+		text-decoration: none;
+	}
+	.button[data-size='x-small'] {
+		--internal-height: max(28px, 1.75rem);
+		--internal-padding: 0.5rem;
+	}
+	.button[data-size='small'] {
+		--internal-height: max(40px, 2.5rem);
+		--internal-padding: 0.875rem;
+	}
+	.button[data-size='large'] {
+		--internal-height: max(64px, 4rem);
+		--internal-padding: 1.5rem;
+	}
+	.button[data-size='x-large'] {
+		--internal-height: max(80px, 5rem);
+		--internal-padding: 2rem;
+	}
+	.button[data-kind='icon'] {
+		width: var(--internal-height);
+		height: var(--internal-height);
+		padding: 0;
+		font-size: var(--internal-icon-size);
+	}
+	span {
+		display: inline-flex;
+		font-size: var(--internal-icon-size);
+	}
+	.button[data-wide] {
+		width: 100%;
+	}
+	.button[data-rounded] {
+		border-radius: 50%;
+	}
+</style>

package/dist/button/button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/button/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "button",
+	"files": ["button.svelte"],
+	"exports": { "Button": "button.svelte" },
+	"dependencies": ["icon", "theme"]
+}

package/dist/button/types.d.ts

@@ -0,0 +1,32 @@
+import type { DOMAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Color, Size, Variant } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+type ButtonIconProps = Omit<IconProps, 'size' | 'color'>;
+interface TextButtonProps {
+    rounded?: never;
+    label: string;
+    wide?: boolean;
+    icon?: ButtonIconProps;
+    trailingIcon?: ButtonIconProps;
+}
+interface IconButtonProps {
+    rounded?: boolean;
+    label?: never;
+    wide?: never;
+    icon: ButtonIconProps;
+    trailingIcon?: never;
+}
+type HrefButtonProps = Omit<HTMLAnchorAttributes, keyof DOMAttributes<HTMLElement> | 'color' | 'href'> & {
+    href: string;
+};
+type ClickButtonProps = Omit<HTMLButtonAttributes, keyof DOMAttributes<HTMLElement> | 'color'> & {
+    href?: never;
+};
+export type ButtonProps = {
+    color?: Exclude<Color, 'background'>;
+    size?: Size;
+    variant?: Variant;
+    disabled?: boolean;
+    onClick?: DOMAttributes<HTMLButtonElement | HTMLAnchorElement>['onclick'];
+} & Omit<DOMAttributes<HTMLButtonElement | HTMLAnchorElement>, 'children' | 'onclick'> & (TextButtonProps | IconButtonProps) & (HrefButtonProps | ClickButtonProps);
+export {};

package/dist/checkbox/checkbox.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+	import Icon from '../icon/icon.svelte';
+	import type { CheckboxProps } from './types.js';
+
+	let { size = 'medium', checked = $bindable(), ...attributes }: CheckboxProps = $props();
+</script>
+
+<div data-checkbox data-size={size}>
+	<input {...attributes} type="checkbox" bind:checked />
+	{#if checked}
+		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+			<Icon name="check" style="font-variation-settings: 'wght' 500" />
+		</span>
+	{/if}
+</div>
+
+<style>
+	div {
+		--internal-size: 1.25rem;
+		--internal-tint: var(--color-foreground, black);
+		--internal-strength-light: 4%;
+		--internal-strength-dark: 16%;
+		--internal-border: light-dark(
+			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
+			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
+		);
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		box-sizing: border-box;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+		inline-size: var(--internal-size);
+		block-size: var(--internal-size);
+		border: 1px solid var(--internal-border);
+		border-radius: calc(var(--internal-size) * 0.2);
+		background: color-mix(
+			in srgb,
+			light-dark(
+					color-mix(
+						in srgb,
+						var(--internal-tint) var(--internal-strength-light),
+						var(--color-background, white)
+					),
+					color-mix(
+						in srgb,
+						var(--internal-tint) var(--internal-strength-dark),
+						var(--color-background, white)
+					)
+				)
+				85%,
+			transparent
+		);
+		box-shadow: inset 0 1px 0 var(--internal-highlight);
+		color: var(--color-foreground, black);
+		font-size: calc(var(--internal-size) * 0.8);
+		vertical-align: middle;
+		transition: all 150ms ease;
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+	}
+	input {
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+	span {
+		display: inline-flex;
+		pointer-events: none;
+	}
+	div[data-size='x-small'] {
+		--internal-size: 0.875rem;
+	}
+	div[data-size='small'] {
+		--internal-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-size: 1.5rem;
+	}
+	div[data-size='x-large'] {
+		--internal-size: 1.75rem;
+	}
+	div:has(input:hover:not(:disabled):not(:checked)) {
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 20%;
+	}
+	div:has(input:checked) {
+		--internal-tint: var(--color-primary, blue);
+		--internal-strength-light: 88%;
+		--internal-strength-dark: 88%;
+		--internal-border: color-mix(in srgb, var(--internal-tint) 68%, var(--color-foreground, black));
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
+		color: color-mix(in srgb, var(--color-background, white) 90%, var(--internal-tint));
+	}
+	div:has(input:checked:hover:not(:disabled)) {
+		--internal-strength-light: 92%;
+		--internal-strength-dark: 92%;
+	}
+	div:has(input:focus-visible) {
+		--internal-border: color-mix(in srgb, var(--color-primary, blue) 55%, transparent);
+		box-shadow:
+			inset 0 1px 0 var(--internal-highlight),
+			0 0 0 3px color-mix(in srgb, var(--color-primary, blue) 16%, transparent);
+	}
+	div:has(input:disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	input:disabled {
+		cursor: inherit;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		div {
+			border-color: ButtonText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		div:has(input:checked) {
+			background: Highlight;
+			color: HighlightText;
+		}
+		div:has(input:focus-visible) {
+			outline: 2px solid Highlight;
+			outline-offset: 3px;
+		}
+	}
+</style>

package/dist/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxProps } from './types.js';
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/checkbox/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "checkbox",
+	"files": ["checkbox.svelte", "types.ts"],
+	"exports": { "Checkbox": "checkbox.svelte" },
+	"dependencies": ["icon"]
+}

package/dist/checkbox/types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Size } from '../types.js';
+export type CheckboxProps = Omit<HTMLInputAttributes, 'type' | 'size' | 'checked'> & {
+    size?: Size;
+    checked?: boolean;
+};

package/dist/combobox/combobox.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import Popover from '../popover/popover.svelte';
+	import Input from './input.svelte';
+	import List from './list.svelte';
+	import Form from './form.svelte';
+	import type { ComboboxProps } from './types.js';
+
+	const generatedId = $props.id();
+	let {
+		items,
+		value = $bindable(),
+		onChange,
+		id = generatedId,
+		placeholder = 'Select…',
+		size = 'medium',
+		disabled = false,
+		wide = false,
+		variant = 'soft',
+		emptyMessage = { message: 'No options found' },
+		...attributes
+	}: ComboboxProps = $props();
+	const listId = `${generatedId}-options`;
+	const initialValue = Array.isArray(value) ? [...value] : value;
+	let query = $state('');
+	let editing = $state(false);
+	let open = $state(false);
+	let activeId = $state<string>();
+	let input = $state<HTMLInputElement>();
+	const selectedIds = $derived(Array.isArray(value) ? value : value === undefined ? [] : [value]);
+	const multiple = $derived(Array.isArray(value));
+	const selected = $derived(items.filter((item) => selectedIds.includes(item.id)));
+	const results = $derived(
+		editing
+			? items.filter((item) =>
+					item.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
+				)
+			: items
+	);
+	const display = $derived(editing ? query : selected.map((item) => item.label).join(', '));
+
+	const cancel = () => {
+		open = false;
+		query = '';
+		editing = false;
+		activeId = undefined;
+	};
+	const setOpen = (next: boolean) => {
+		if (next) open = true;
+		else cancel();
+	};
+	$effect(() => {
+		if (activeId && !results.some((item) => item.id === activeId && !item.disabled))
+			activeId = undefined;
+	});
+	const search = (next: string) => {
+		if (disabled || attributes.readonly) return;
+		query = next;
+		editing = true;
+		activeId = undefined;
+		open = true;
+	};
+	const commit = (id: string) => {
+		if (
+			disabled ||
+			attributes.readonly ||
+			!results.some((item) => item.id === id && !item.disabled)
+		)
+			return;
+		const next = multiple
+			? selectedIds.includes(id)
+				? selectedIds.filter((selectedId) => selectedId !== id)
+				: [...selectedIds, id]
+			: id;
+		if (Array.isArray(next) || next !== value) {
+			value = next;
+			onChange?.(next);
+		}
+		if (!multiple) cancel();
+		input?.focus({ preventScroll: true });
+	};
+	const reset = () => {
+		value = Array.isArray(initialValue) ? [...initialValue] : initialValue;
+		cancel();
+	};
+</script>
+
+<div
+	onfocusout={(event) => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) cancel();
+	}}
+>
+	<Popover
+		bind:open={() => open, setOpen}
+		variant="filled"
+		spacing="small"
+		radius="small"
+		shadow
+		scroll
+		disabled={disabled || !!attributes.readonly}
+	>
+		{#snippet trigger()}
+			<Input
+				{attributes}
+				{id}
+				{placeholder}
+				{size}
+				{disabled}
+				{wide}
+				{variant}
+				{display}
+				{selected}
+				{editing}
+				{results}
+				{listId}
+				bind:open
+				bind:activeId
+				bind:input
+				onSearch={search}
+				onSelect={commit}
+				onCancel={cancel}
+			/>
+		{/snippet}
+		<List
+			id={listId}
+			items={results}
+			{selectedIds}
+			{activeId}
+			{multiple}
+			{size}
+			{emptyMessage}
+			aria-label={attributes['aria-label']}
+			aria-labelledby={attributes['aria-labelledby']}
+			onSelect={commit}
+		/>
+	</Popover>
+	<Form
+		{items}
+		{selectedIds}
+		{value}
+		{multiple}
+		{disabled}
+		{placeholder}
+		{input}
+		{display}
+		name={attributes.name}
+		form={attributes.form}
+		required={attributes.required}
+		onReset={reset}
+	/>
+</div>
+
+<style>
+	div {
+		display: contents;
+	}
+</style>

package/dist/combobox/combobox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxProps } from './types.js';
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/combobox/form.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { ComboboxFormProps } from './types.js';
+
+	let {
+		items,
+		selectedIds,
+		value,
+		name,
+		form,
+		required,
+		disabled,
+		multiple,
+		placeholder,
+		input,
+		display,
+		onReset
+	}: ComboboxFormProps = $props();
+	let select: HTMLSelectElement;
+	onMount(() => {
+		const owner = select.form;
+		const timers = new SvelteSet<ReturnType<typeof setTimeout>>();
+		const reset = (event: Event) => {
+			const timer = setTimeout(async () => {
+				timers.delete(timer);
+				if (!event.defaultPrevented) onReset();
+				await tick();
+				if (input) input.value = display;
+			}, 0);
+			timers.add(timer);
+		};
+		owner?.addEventListener('reset', reset);
+		return () => {
+			for (const timer of timers) clearTimeout(timer);
+			owner?.removeEventListener('reset', reset);
+		};
+	});
+</script>
+
+<select
+	bind:this={select}
+	hidden
+	{name}
+	{form}
+	{required}
+	{disabled}
+	{multiple}
+	tabindex={-1}
+	oninvalid={(event) => {
+		event.preventDefault();
+		input?.focus();
+	}}
+>
+	{#if !multiple}<option value="" selected={value === undefined}>{placeholder}</option>{/if}
+	{#each items as item (item.id)}
+		<option value={item.id} selected={selectedIds.includes(item.id)} disabled={item.disabled}>
+			{item.label}
+		</option>
+	{/each}
+</select>

package/dist/combobox/form.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxFormProps } from './types.js';
+declare const Form: import("svelte").Component<ComboboxFormProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;