bref-ui 0.3.1 → 2.0.0

package/dist/progress/progress.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Keep the native progress and seek recipes together. */
+	import type { ProgressProps } from './types.js';
+
+	let {
+		label,
+		id,
+		title,
+		'aria-label': ariaLabel,
+		'aria-describedby': describedBy,
+		'aria-labelledby': labelledBy,
+		value,
+		size = 'medium',
+		onSeek,
+		disabled = false,
+		oninput,
+		onchange,
+		onpointercancel,
+		...attributes
+	}: ProgressProps = $props();
+
+	const checkedValue = $derived.by(() => {
+		if (value === undefined) return undefined;
+		if (!Number.isFinite(value)) throw new RangeError('Progress value must be finite');
+		return Math.min(1, Math.max(0, value));
+	});
+	const seekable = $derived(onSeek !== undefined);
+	let draft = $state<number | undefined>(undefined);
+	const display = $derived(draft ?? checkedValue ?? 0);
+	const percentage = $derived(display * 100);
+
+	const handleInput = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		oninput?.(event);
+		if (disabled || !onSeek) return;
+		draft = Math.min(1, Math.max(0, (event.currentTarget as HTMLInputElement).valueAsNumber));
+		onSeek(draft);
+	};
+
+	const handleChange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		draft = undefined;
+		onchange?.(event);
+	};
+</script>
+
+<div data-size={size} data-seekable={seekable} data-unknown={checkedValue === undefined}>
+	<progress
+		{...seekable ? {} : { ...attributes, oninput, onchange, onpointercancel }}
+		id={seekable ? undefined : id}
+		title={seekable ? undefined : title}
+		aria-describedby={seekable ? undefined : describedBy}
+		aria-labelledby={seekable ? undefined : labelledBy}
+		aria-label={seekable ? undefined : label || ariaLabel}
+		aria-hidden={seekable ? 'true' : undefined}
+		max="1"
+		value={checkedValue}
+	></progress>
+	{#if seekable}
+		<input
+			{...attributes}
+			type="range"
+			{id}
+			{title}
+			aria-describedby={describedBy}
+			aria-labelledby={labelledBy}
+			min="0"
+			max="1"
+			step="0.01"
+			value={display}
+			aria-label={label || ariaLabel}
+			{disabled}
+			oninput={handleInput}
+			onchange={handleChange}
+			onpointercancel={(event) => {
+				draft = undefined;
+				onpointercancel?.(event);
+			}}
+		/>
+		<span style:inset-inline-start={`${percentage}%`} aria-hidden="true"></span>
+	{/if}
+</div>
+
+<style>
+	div {
+		--progress-height: 0.375rem;
+		--progress-track: color-mix(
+			in srgb,
+			color-mix(in srgb, var(--color-foreground) 16%, var(--color-background)) 85%,
+			transparent
+		);
+		--progress-fill: color-mix(
+			in srgb,
+			color-mix(in srgb, var(--color-primary) 88%, var(--color-background)) 85%,
+			transparent
+		);
+		--progress-highlight: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+		position: relative;
+		display: block;
+		width: 100%;
+		min-width: 0;
+	}
+	div[data-size='small'] {
+		--progress-height: 0.25rem;
+	}
+	div[data-size='large'] {
+		--progress-height: 0.5rem;
+	}
+	progress {
+		display: block;
+		width: 100%;
+		height: var(--progress-height);
+		border: 0;
+		border-radius: 999px;
+		appearance: none;
+		background: var(--progress-track);
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, var(--color-foreground) 16%, transparent),
+			0 2px 6px color-mix(in srgb, var(--color-foreground) 8%, transparent);
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+		overflow: hidden;
+	}
+	progress::-webkit-progress-bar {
+		background: transparent;
+	}
+	progress::-webkit-progress-value {
+		background: var(--progress-fill);
+		border-radius: 999px;
+		box-shadow: inset 0 1px 0 var(--progress-highlight);
+	}
+	progress::-moz-progress-bar {
+		background: var(--progress-fill);
+		border-radius: 999px;
+		box-shadow: inset 0 1px 0 var(--progress-highlight);
+	}
+	div[data-unknown='true'] progress::-webkit-progress-value {
+		background: transparent;
+	}
+	div[data-unknown='true'] progress::-moz-progress-bar {
+		background: transparent;
+	}
+	div[data-unknown='true']::after {
+		content: '';
+		position: absolute;
+		top: calc(50% - var(--progress-height) / 2);
+		left: 0;
+		width: 100%;
+		height: var(--progress-height);
+		border-radius: 999px;
+		background: var(--progress-fill);
+		box-shadow: inset 0 1px 0 var(--progress-highlight);
+		transform-origin: left center;
+		animation: sweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		pointer-events: none;
+	}
+	div[data-seekable='true'] {
+		min-height: 2.75rem;
+		display: flex;
+		align-items: center;
+	}
+	div[data-seekable='true'] progress {
+		pointer-events: none;
+	}
+	input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+		touch-action: none;
+	}
+	input:disabled {
+		cursor: not-allowed;
+	}
+	span {
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--color-background) 25%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
+		box-shadow:
+			inset 0 1px 0 var(--progress-highlight),
+			0 2px 6px color-mix(in srgb, var(--color-foreground) 12%, transparent);
+		-webkit-backdrop-filter: blur(0.125rem) saturate(120%);
+		backdrop-filter: blur(0.125rem) saturate(120%);
+		transform: translate(var(--internal-thumb-offset, -50%), -50%);
+		transition:
+			transform 150ms ease,
+			box-shadow 150ms ease;
+		pointer-events: none;
+	}
+	@media (hover: hover) {
+		input:not(:disabled):hover + span {
+			transform: translate(var(--internal-thumb-offset, -50%), -50%) scale(1.3);
+			box-shadow:
+				inset 0 1px 0 var(--progress-highlight),
+				0 3px 10px color-mix(in srgb, var(--color-foreground) 20%, transparent);
+		}
+	}
+	input:not(:disabled):active + span {
+		transform: translate(var(--internal-thumb-offset, -50%), -50%) scale(1.5);
+		box-shadow:
+			inset 0 1px 0 var(--progress-highlight),
+			0 4px 14px color-mix(in srgb, var(--color-foreground) 24%, transparent),
+			0 0 0 4px color-mix(in srgb, var(--color-foreground) 12%, transparent);
+	}
+	span:dir(rtl) {
+		--internal-thumb-offset: 50%;
+	}
+	input:focus-visible + span {
+		outline: 2px solid var(--color-foreground);
+		outline-offset: 3px;
+	}
+	input:disabled + span {
+		opacity: 0.5;
+	}
+	@keyframes sweep {
+		0% {
+			transform: translateX(0) scaleX(0);
+		}
+		50% {
+			transform: translateX(25%) scaleX(0.5);
+		}
+		100% {
+			transform: translateX(100%) scaleX(0);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		span {
+			transition: none;
+		}
+		div[data-unknown='true']::after {
+			animation: none;
+			transform: translateX(32.5%) scaleX(0.35);
+		}
+	}
+	@media (forced-colors: active) {
+		progress {
+			border: 1px solid CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		span {
+			background: Highlight;
+			border-color: HighlightText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+</style>

package/dist/progress/progress.svelte.d.ts

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

package/dist/progress/registry.json

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

package/dist/progress/types.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BaseSize } from '../types.js';
+export type ProgressProps = Omit<HTMLAttributes<HTMLProgressElement | HTMLInputElement>, 'color'> & {
+    /** Normalized progress from 0 to 1; omit for indeterminate progress. */
+    value?: number;
+    label?: string;
+    size?: BaseSize;
+    /** Called with a normalized value when the user edits the seek control. */
+    onSeek?: (value: number) => void;
+    disabled?: boolean;
+};

package/dist/select/empty.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { SelectEmptyProps } from './types.js';
+
+	let { message, icon }: SelectEmptyProps = $props();
+</script>
+
+<p>
+	{#if icon}<Icon {...icon} />{/if}
+	{message}
+</p>
+
+<style>
+	p {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.5rem;
+		min-height: fit-content;
+		margin: 0;
+		padding: 0.5rem;
+		color: var(--color-muted);
+	}
+</style>

package/dist/select/empty.svelte.d.ts

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

package/dist/select/list.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Option from './option.svelte';
+	import Empty from './empty.svelte';
+	import type { SelectListProps } from './types.js';
+
+	let { items, value, emptyMessage, onSelect }: SelectListProps = $props();
+</script>
+
+<div>
+	{#each items as item (item.id)}
+		<Option
+			{...item}
+			selected={Array.isArray(value) ? value.includes(item.id) : value === item.id}
+			onSelect={() => onSelect(item.id)}
+		/>
+	{:else}
+		<Empty {...emptyMessage} />
+	{/each}
+</div>
+
+<style>
+	div {
+		display: grid;
+		gap: 0.375rem;
+		min-width: 0;
+	}
+</style>

package/dist/select/list.svelte.d.ts

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

package/dist/select/option.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { OptionProps } from './types.js';
+
+	let { label, icon, disabled, selected, onSelect }: OptionProps = $props();
+</script>
+
+<button type="button" aria-pressed={selected} {disabled} onclick={onSelect}>
+	{#if icon}<span data-icon><Icon {...icon} /></span>{/if}
+	<span data-label>{label}</span>
+	{#if selected}<span data-icon><Icon name="check" /></span>{/if}
+</button>
+
+<style>
+	button {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		min-height: var(--internal-height);
+		padding: 0.375rem 0.65rem;
+		border: 0;
+		border-radius: 0.4rem;
+		background: transparent;
+		color: var(--color-foreground);
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	[data-label] {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	[data-icon] {
+		display: inline-flex;
+		flex: 0 0 auto;
+		font-size: var(--internal-icon-size);
+	}
+	button:hover:not(:disabled),
+	button[aria-pressed='true'] {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	@media (forced-colors: active) {
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+		button[aria-pressed='true'] {
+			outline: 1px solid Highlight;
+		}
+	}
+</style>

package/dist/select/option.svelte.d.ts

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

package/dist/select/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "select",
+	"files": ["select.svelte", "trigger.svelte", "list.svelte", "option.svelte", "empty.svelte"],
+	"exports": { "Select": "select.svelte" },
+	"dependencies": ["icon", "popover", "surface"]
+}

package/dist/select/select.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Popover from '../popover/popover.svelte';
+	import Trigger from './trigger.svelte';
+	import List from './list.svelte';
+	import type { SelectProps } from './types.js';
+
+	let {
+		id,
+		items,
+		value = $bindable(),
+		onChange,
+		placeholder = 'Select…',
+		size = 'medium',
+		disabled = false,
+		emptyMessage = { message: 'No options found' }
+	}: SelectProps = $props();
+
+	let open = $state(false);
+	const selected = $derived(
+		items.filter((item) => (Array.isArray(value) ? value.includes(item.id) : item.id === value))
+	);
+	const select = (id: string) => {
+		if (Array.isArray(value))
+			value = value.includes(id) ? value.filter((selectedId) => selectedId !== id) : [...value, id];
+		else {
+			open = false;
+			if (value === id) return;
+			value = id;
+		}
+		onChange?.(value);
+	};
+</script>
+
+<div data-size={size}>
+	<Popover bind:open variant="filled" spacing="small" radius="small" shadow scroll {disabled}>
+		{#snippet trigger()}
+			<Trigger
+				{id}
+				{open}
+				{selected}
+				{placeholder}
+				{disabled}
+				{size}
+				onToggle={() => (open = !open)}
+			/>
+		{/snippet}
+		<List {items} {value} {emptyMessage} onSelect={select} />
+	</Popover>
+</div>
+
+<style>
+	div {
+		--internal-height: 2.5rem;
+		--internal-padding: 0.85rem;
+		--internal-icon-size: 1.25rem;
+		position: relative;
+		width: 100%;
+		min-width: 0;
+	}
+	div[data-size='small'] {
+		--internal-height: 2rem;
+		--internal-padding: 0.65rem;
+		--internal-icon-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-height: 3rem;
+		--internal-padding: 1rem;
+		--internal-icon-size: 1.5rem;
+	}
+</style>

package/dist/{base/select → select}/select.svelte.d.ts

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

package/dist/select/trigger.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import Surface from '../surface/surface.svelte';
+	import type { SelectTriggerProps } from './types.js';
+
+	let { id, open, selected, placeholder, disabled, onToggle, size }: SelectTriggerProps = $props();
+</script>
+
+<button {id} type="button" data-size={size} {disabled} aria-expanded={open} onclick={onToggle}>
+	<Surface
+		as="span"
+		variant="soft"
+		color="foreground"
+		orientation="horizontal"
+		radius="small"
+		width="fill"
+		height="fill"
+		hover={disabled ? undefined : 'small'}
+	>
+		{#if selected.length === 1 && selected[0].icon}
+			<span data-icon><Icon {...selected[0].icon} /></span>
+		{/if}
+		<span data-value data-placeholder={selected.length === 0 || undefined}>
+			{selected.length ? selected.map((item) => item.label).join(', ') : placeholder}
+		</span>
+		<span data-icon><Icon name="arrow_drop_down" /></span>
+	</Surface>
+</button>
+
+<style>
+	button {
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		height: var(--internal-height);
+		padding: 0;
+		border: 0;
+		border-radius: 0.5rem;
+		background: transparent;
+		color: var(--color-foreground);
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	span:first-child {
+		margin-inline-start: var(--internal-padding);
+	}
+	span:last-child {
+		margin-inline-end: var(--internal-padding);
+	}
+	span + span {
+		margin-inline-start: 0.6rem;
+	}
+	[data-value] {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 1rem;
+		font-weight: 200;
+		line-height: 1.4;
+	}
+	[data-placeholder],
+	[data-icon] {
+		color: var(--color-muted);
+	}
+	[data-icon] {
+		display: inline-flex;
+		flex: 0 0 auto;
+		font-size: var(--internal-icon-size);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	@media (forced-colors: active) {
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/dist/select/trigger.svelte.d.ts

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

package/dist/select/types.d.ts

@@ -0,0 +1,31 @@
+import type { BaseSize } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+export interface SelectOptionDataProps {
+    id: string;
+    label: string;
+    icon?: Pick<IconProps, 'name' | 'filled'>;
+    disabled?: boolean;
+}
+export interface SelectEmptyProps extends Pick<SelectOptionDataProps, 'icon'> {
+    message: string;
+}
+export interface SelectProps extends Partial<Pick<SelectOptionDataProps, 'id' | 'disabled'>> {
+    items: readonly SelectOptionDataProps[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    size?: BaseSize;
+    emptyMessage?: SelectEmptyProps;
+}
+export interface SelectTriggerProps extends Pick<SelectProps, 'id' | 'disabled' | 'size'>, Required<Pick<SelectProps, 'placeholder'>> {
+    open: boolean;
+    selected: readonly SelectOptionDataProps[];
+    onToggle: () => void;
+}
+export interface SelectListProps extends Pick<SelectProps, 'items' | 'value'>, Required<Pick<SelectProps, 'emptyMessage'>> {
+    onSelect: (id: string) => void;
+}
+export interface OptionProps extends SelectOptionDataProps {
+    selected: boolean;
+    onSelect: () => void;
+}

package/dist/spinner/registry.json

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