bref-ui 0.3.0 → 2.0.0

package/src/lib/spinner/spinner.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { SpinnerProps } from './types.js';
+
+	let { label, size }: SpinnerProps = $props();
+</script>
+
+<div role={label ? 'status' : undefined} aria-hidden={label ? undefined : 'true'} data-size={size}>
+	<span aria-hidden="true"></span>
+	{#if label}<i>{label}</i>{/if}
+</div>
+
+<style>
+	@property --spinner-sweep {
+		syntax: '<angle>';
+		inherits: false;
+		initial-value: 90deg;
+	}
+	div {
+		--spinner-track: color-mix(
+			in srgb,
+			color-mix(in srgb, var(--color-foreground) 16%, var(--color-background)) 85%,
+			transparent
+		);
+		--spinner-fill: color-mix(
+			in srgb,
+			color-mix(in srgb, var(--color-primary) 88%, var(--color-background)) 85%,
+			transparent
+		);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1em;
+		height: 1em;
+		font-size: inherit;
+		color: var(--color-primary);
+	}
+	div[data-size='x-small'] {
+		font-size: 0.875rem;
+	}
+	div[data-size='small'] {
+		font-size: 1rem;
+	}
+	div[data-size='medium'] {
+		font-size: 1.5rem;
+	}
+	div[data-size='large'] {
+		font-size: 2.5rem;
+	}
+	div[data-size='x-large'] {
+		font-size: 5rem;
+	}
+	span {
+		box-sizing: border-box;
+		width: 80%;
+		height: 80%;
+		padding: max(2px, 0.12em);
+		background: conic-gradient(
+			var(--spinner-fill) 0deg var(--spinner-sweep),
+			var(--spinner-track) var(--spinner-sweep) 360deg
+		);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-foreground) 28%, transparent);
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+		mask:
+			linear-gradient(black, black) content-box,
+			linear-gradient(black, black);
+		mask-composite: exclude;
+		border-radius: 50%;
+		animation: spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+	i {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	@keyframes spin {
+		0% {
+			--spinner-sweep: 30deg;
+			transform: rotate(0deg);
+		}
+		50% {
+			--spinner-sweep: 270deg;
+			transform: rotate(180deg);
+		}
+		100% {
+			--spinner-sweep: 30deg;
+			transform: rotate(360deg);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		span {
+			animation: none;
+		}
+	}
+	@media (forced-colors: active) {
+		span {
+			padding: 0;
+			mask: none;
+			border: max(2px, 0.12em) solid CanvasText;
+			border-color: CanvasText;
+			border-top-color: Highlight;
+			background: none;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+</style>

package/src/lib/spinner/types.ts

@@ -0,0 +1,7 @@
+import type { Size } from '../types.js';
+
+export interface SpinnerProps {
+	/** Match Icon sizing in the styles. */
+	size?: Size;
+	label?: string;
+}

package/src/lib/surface/registry.json

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

package/src/lib/surface/surface.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Size, SurfaceProps } from '../types.js';
+	import { surface } from '../theme/surface.js';
+
+	let {
+		as = 'div',
+		children,
+		color = 'background',
+		variant = 'neutral',
+		spacing,
+		orientation = 'vertical',
+		width = 'fill',
+		height = 'fit',
+		radius,
+		shadow = false,
+		hover,
+		scroll = false,
+		class: className,
+		...attributes
+	}: SurfaceProps = $props();
+
+	const radiusScale: Record<Size, string> = {
+		'x-small': '0.25rem',
+		small: '0.5rem',
+		medium: '1.5rem',
+		large: '2.5rem',
+		'x-large': '4rem'
+	};
+	const borderRadius = $derived(
+		radius && radius in radiusScale ? radiusScale[radius as Size] : radius
+	);
+</script>
+
+<svelte:element
+	this={as}
+	{...attributes}
+	data-surface
+	class={[surface({ variant, color, shadow, hover }), className]}
+	data-variant={variant}
+	data-spacing={spacing}
+	data-orientation={orientation}
+	data-width={width}
+	data-height={height}
+	data-shadow={shadow || undefined}
+	data-hover={hover}
+	data-scroll={scroll || undefined}
+	tabindex={attributes.tabindex ?? (scroll ? 0 : undefined)}
+	style:--surface-radius={borderRadius}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	[data-surface] {
+		--surface-spacing: 0;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: auto;
+		min-width: 0;
+		min-height: 0;
+		padding: var(--surface-spacing);
+		gap: var(--surface-spacing);
+		border-radius: var(--surface-radius, 0);
+		overflow: visible;
+	}
+	[data-orientation='horizontal'] {
+		flex-direction: row;
+		align-items: center;
+	}
+	[data-width='fit'] {
+		width: fit-content;
+		max-width: 100%;
+	}
+	[data-height='fill'] {
+		height: 100%;
+	}
+	[data-spacing='x-small'] {
+		--surface-spacing: 0.25rem;
+	}
+	[data-spacing='small'] {
+		--surface-spacing: 0.5rem;
+	}
+	[data-spacing='medium'] {
+		--surface-spacing: 1rem;
+	}
+	[data-spacing='large'] {
+		--surface-spacing: 1.5rem;
+	}
+	[data-spacing='x-large'] {
+		--surface-spacing: 2rem;
+	}
+	[data-scroll] {
+		overflow: auto;
+	}
+</style>

package/src/lib/surface/types.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BaseSize, Color, Dimension, Orientation, Size, Variant } from '../types.js';
+
+export type SurfaceRadius = Size | `${number}rem` | `${number}%`;
+
+/** Shared paint props for the surface helper and Surface component. */
+export interface SurfaceBaseProps {
+	variant?: Variant;
+	color?: Color;
+	/** Shadow strength; true enables the medium shadow and false disables it. */
+	shadow?: BaseSize | boolean;
+	/** Optional hover treatment strength. */
+	hover?: BaseSize;
+}
+
+export interface SurfaceProps extends SurfaceBaseProps, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+	/** Native root element; defaults to div. */
+	as?: 'div' | 'section' | 'span';
+	/** Shared padding and gap; omitted spacing means none. */
+	spacing?: Size;
+	orientation?: Orientation;
+	width?: Dimension;
+	height?: Dimension;
+	/** Corner radius; omitted radius means zero. */
+	radius?: SurfaceRadius;
+	/** Enable scrolling; false or omitted keeps overflow visible. */
+	scroll?: boolean;
+}

package/src/lib/switch/registry.json

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

package/src/lib/switch/switch.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import type { SwitchProps } from './types.js';
+
+	let { checked = $bindable(), size = 'medium', children, ...attributes }: SwitchProps = $props();
+</script>
+
+<span data-switch data-size={size}>
+	<input {...attributes} bind:checked type="checkbox" role="switch" />
+	<span aria-hidden="true"><span>{@render children?.()}</span></span>
+</span>
+
+<style>
+	[data-switch] {
+		--track-width: 3.25rem;
+		--track-height: 2rem;
+		--thumb-size: 1.5rem;
+		--inset: 0.25rem;
+		position: relative;
+		display: inline-flex;
+		width: var(--track-width);
+		height: var(--track-height);
+		vertical-align: middle;
+	}
+
+	input {
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+
+	[data-switch] > span {
+		--internal-tint: var(--color-foreground, black);
+		--internal-strength-light: 4%;
+		--internal-strength-dark: 16%;
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 16%, transparent);
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		border: 1px solid
+			light-dark(
+				color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
+				color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
+			);
+		border-radius: 999px;
+		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),
+			0 2px 6px color-mix(in srgb, black 8%, transparent);
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+		pointer-events: none;
+		transition: all 150ms ease;
+	}
+
+	[data-switch] > span > span {
+		position: absolute;
+		top: 50%;
+		left: var(--inset);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--thumb-size);
+		height: var(--thumb-size);
+		border-radius: 50%;
+		background: var(--color-foreground);
+		color: var(--color-background);
+		font-size: calc(var(--thumb-size) * 0.7);
+		transform: translateY(-50%);
+		transition:
+			left 150ms ease,
+			background 150ms ease;
+	}
+
+	input:checked + span {
+		--internal-tint: var(--color-primary, blue);
+		--internal-strength-light: 88%;
+		--internal-strength-dark: 88%;
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
+		border-color: color-mix(in srgb, var(--internal-tint) 68%, var(--color-foreground, black));
+	}
+
+	input:checked + span > span {
+		left: calc(100% - var(--thumb-size) - var(--inset));
+		background: var(--color-background);
+		color: var(--color-foreground);
+	}
+
+	input:focus-visible + span {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 3px;
+	}
+
+	input:disabled {
+		cursor: not-allowed;
+	}
+
+	input:disabled + span {
+		opacity: 0.45;
+	}
+
+	[data-size='small'] {
+		--track-width: 2.75rem;
+		--track-height: 1.75rem;
+		--thumb-size: 1.25rem;
+	}
+
+	[data-size='large'] {
+		--track-width: 3.75rem;
+		--track-height: 2.25rem;
+		--thumb-size: 1.625rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-switch] > span,
+		[data-switch] > span > span {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		[data-switch] > span {
+			border-color: ButtonText;
+			background: Canvas;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		[data-switch] > span > span {
+			background: ButtonText;
+			color: Canvas;
+		}
+		input:checked + span {
+			background: Highlight;
+		}
+		input:checked + span > span {
+			background: HighlightText;
+			color: Highlight;
+		}
+	}
+</style>

package/src/lib/switch/types.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { BaseSize } from '../types.js';
+
+export interface SwitchProps extends Omit<
+	HTMLInputAttributes,
+	'type' | 'size' | 'checked' | 'children'
+> {
+	checked?: boolean;
+	size?: BaseSize;
+	children?: Snippet;
+}

package/src/lib/text-area/registry.json

@@ -0,0 +1,8 @@
+{
+	"id": "text-area",
+	"files": ["text-area.svelte"],
+	"exports": {
+		"TextArea": "text-area.svelte"
+	},
+	"dependencies": ["icon"]
+}

package/src/lib/text-area/text-area.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Keep the native control and its scoped style recipe together. */
+	import Icon from '../icon/icon.svelte';
+	import type { TextAreaProps } from './types.js';
+
+	let {
+		value = $bindable(),
+		onChange,
+		icon,
+		size = 'medium',
+		wide = false,
+		variant = 'neutral',
+		resizable = true,
+		oninput,
+		defaultValue,
+		...attributes
+	}: TextAreaProps = $props();
+	const initialValue = value;
+
+	const handleInput = (event: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => {
+		onChange?.(event.currentTarget.value);
+		oninput?.(event);
+	};
+</script>
+
+<div data-size={size} data-variant={variant} data-wide={wide || undefined}>
+	{#if icon}
+		<span><Icon {...icon} label={undefined} /></span>
+	{/if}
+	<textarea
+		{...attributes}
+		defaultValue={defaultValue ?? initialValue}
+		bind:value={() => value, (next) => (value = next)}
+		oninput={handleInput}
+		data-resizable={resizable}></textarea>
+</div>
+
+<style>
+	div {
+		--internal-height: 2.5rem;
+		--internal-padding: 0.85rem;
+		--internal-icon-size: 1.25rem;
+		--internal-tint: var(--color-foreground, black);
+		--internal-strength-light: 3%;
+		--internal-strength-dark: 3%;
+		--internal-opacity: 15%;
+		--internal-border: transparent;
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: flex-start;
+		align-self: start;
+		gap: 0.6rem;
+		width: min(100%, 18rem);
+		min-width: 0;
+		max-width: 100%;
+		min-height: var(--internal-height);
+		padding-inline: var(--internal-padding);
+		padding-block: 0.65rem;
+		border: 1px solid var(--internal-border);
+		border-radius: 0.5rem;
+		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)
+					)
+				)
+				var(--internal-opacity),
+			transparent
+		);
+		color: var(--color-foreground, black);
+		transition: all 150ms ease;
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+	}
+	div[data-wide] {
+		width: 100%;
+	}
+	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;
+	}
+	div[data-variant='soft'] {
+		--internal-strength-light: 4%;
+		--internal-strength-dark: 16%;
+		--internal-opacity: 85%;
+		--internal-border: light-dark(
+			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
+			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
+		);
+		box-shadow: inset 0 1px 0 var(--internal-highlight);
+	}
+	span {
+		display: inline-flex;
+		flex: 0 0 auto;
+		color: var(--color-muted, #666);
+		font-size: var(--internal-icon-size);
+		padding-top: 0.1rem;
+		pointer-events: none;
+	}
+	textarea {
+		box-sizing: border-box;
+		width: 100%;
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: 1rem;
+		font-weight: 200;
+		line-height: 1.4;
+	}
+	textarea {
+		resize: vertical;
+	}
+	textarea[data-resizable='false'] {
+		resize: none;
+	}
+	textarea::placeholder {
+		color: var(--color-muted, #666);
+	}
+	div[data-variant='soft']:hover:not(:has(:disabled)) {
+		--internal-border: light-dark(
+			color-mix(in srgb, var(--color-foreground, black) 18%, transparent),
+			color-mix(in srgb, var(--color-foreground, black) 38%, transparent)
+		);
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 20%;
+	}
+	div:has(textarea:focus) {
+		--internal-tint: var(--color-primary, blue);
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 12%;
+		--internal-border: color-mix(in srgb, var(--internal-tint) 55%, transparent);
+		box-shadow:
+			inset 0 1px 0 var(--internal-highlight),
+			0 0 0 3px color-mix(in srgb, var(--internal-tint) 16%, transparent);
+	}
+	div:has(textarea:invalid, [aria-invalid='true']) {
+		--internal-tint: var(--color-error, #bc2436);
+		--internal-border: color-mix(in srgb, var(--internal-tint) 65%, transparent);
+	}
+	div:has(:disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	textarea: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(textarea:focus) {
+			outline: 2px solid Highlight;
+			outline-offset: 2px;
+			box-shadow: none;
+		}
+	}
+</style>

package/src/lib/text-area/types.ts

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { BaseSize, Variant } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+
+export type TextAreaProps = Omit<HTMLTextareaAttributes, 'value'> & {
+	value?: string;
+	onChange?: (value: string) => void;
+	icon?: IconProps;
+	size?: BaseSize;
+	wide?: boolean;
+	variant?: Exclude<Variant, 'filled'>;
+	resizable?: boolean;
+};

package/src/lib/text-input/registry.json

@@ -0,0 +1,8 @@
+{
+	"id": "text-input",
+	"files": ["text-input.svelte"],
+	"exports": {
+		"TextInput": "text-input.svelte"
+	},
+	"dependencies": ["icon"]
+}