bref-ui 0.3.0 → 2.0.0

package/dist/text-input/text-input.svelte

@@ -0,0 +1,189 @@
+<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 { TextInputProps } from './types.js';
+
+	let {
+		value = $bindable(),
+		onChange,
+		icon,
+		size = 'medium',
+		wide = false,
+		variant = 'neutral',
+		oninput,
+		defaultValue,
+		...attributes
+	}: TextInputProps = $props();
+	const initialValue = value;
+
+	const handleInput = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		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}
+	<input
+		{...attributes}
+		defaultValue={defaultValue ?? initialValue}
+		bind:value={() => value, (next) => (value = next == null ? '' : String(next))}
+		oninput={handleInput}
+	/>
+</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: center;
+		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);
+		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);
+		pointer-events: none;
+	}
+	input {
+		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;
+	}
+	input {
+		height: calc(var(--internal-height) - 2px);
+	}
+	input[type='number'] {
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	input::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(input: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(input: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;
+	}
+	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:focus) {
+			outline: 2px solid Highlight;
+			outline-offset: 2px;
+			box-shadow: none;
+		}
+	}
+</style>

package/dist/text-input/text-input.svelte.d.ts

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

package/dist/text-input/types.d.ts

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

package/dist/text-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/theme/cli-theme.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Colors from './colors.svelte';
+	import Surfaces from './surfaces.svelte';
+	import Fonts from './fonts.svelte';
+	import Styles from './styles.svelte';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<Colors />
+<Surfaces />
+<Fonts />
+<Styles />
+
+{@render children?.()}

package/dist/theme/cli-theme.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const CliTheme: import("svelte").Component<$$ComponentProps, {}, "">;
+type CliTheme = ReturnType<typeof CliTheme>;
+export default CliTheme;

package/dist/theme/colors.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { ThemeProps } from './types.js';
+
+	let { palette = {} }: Pick<ThemeProps, 'palette'> = $props();
+	const roles = [
+		'primary',
+		'secondary',
+		'background',
+		'foreground',
+		'muted',
+		'info',
+		'success',
+		'warning',
+		'error'
+	] as const;
+	let paletteCss = $derived.by(() => {
+		const modes = 'light' in palette ? palette : { light: palette, dark: palette };
+		const declarations = (['light', 'dark'] as const).flatMap((mode) =>
+			roles.flatMap((role) => {
+				const value = modes[mode][role];
+				if (value === undefined) return [];
+				if (!/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.test(value))
+					throw new Error(`Theme palette ${mode}.${role} must be a hex color.`);
+				return `--user-input-${role}-${mode}: ${value};`;
+			})
+		);
+		return `:root { ${declarations.join(' ')} }`;
+	});
+</script>
+
+<svelte:head>
+	<svelte:element this={"style"}>{paletteCss}</svelte:element>
+</svelte:head>
+
+<style>
+	:global(:root) {
+		--color-primary-light: var(--user-input-primary-light, #1d4ed8);
+		--color-primary-dark: var(--user-input-primary-dark, #92b4df);
+		--color-secondary-light: var(--user-input-secondary-light, #c51630);
+		--color-secondary-dark: var(--user-input-secondary-dark, #df97a5);
+		--color-background-light: var(--user-input-background-light, #f1eee7);
+		--color-background-dark: var(--user-input-background-dark, #18191c);
+		--color-foreground-light: var(--user-input-foreground-light, #151515);
+		--color-foreground-dark: var(--user-input-foreground-dark, #eceef2);
+		--color-muted-light: var(--user-input-muted-light, #696661);
+		--color-muted-dark: var(--user-input-muted-dark, #acb0b8);
+		--color-info-light: var(--user-input-info-light, #2563b8);
+		--color-info-dark: var(--user-input-info-dark, #a3c1d1);
+		--color-success-light: var(--user-input-success-light, #34745a);
+		--color-success-dark: var(--user-input-success-dark, #abc3a3);
+		--color-warning-light: var(--user-input-warning-light, #945c08);
+		--color-warning-dark: var(--user-input-warning-dark, #d9bc82);
+		--color-error-light: var(--user-input-error-light, #bc2436);
+		--color-error-dark: var(--user-input-error-dark, #dfa4a7);
+	}
+
+	:global(:root),
+	:global(:root:has(meta[name='color-scheme'][content='light'])),
+	:global([data-theme='light']),
+	:global([data-theme='auto']) {
+		color-scheme: light;
+		--color-primary: var(--color-primary-light);
+		--color-secondary: var(--color-secondary-light);
+		--color-background: var(--color-background-light);
+		--color-foreground: var(--color-foreground-light);
+		--color-muted: var(--color-muted-light);
+		--color-info: var(--color-info-light);
+		--color-success: var(--color-success-light);
+		--color-warning: var(--color-warning-light);
+		--color-error: var(--color-error-light);
+	}
+
+	:global([data-theme='dark']),
+	:global(:root:has(meta[name='color-scheme'][content='dark'])) {
+		color-scheme: dark;
+		--color-primary: var(--color-primary-dark);
+		--color-secondary: var(--color-secondary-dark);
+		--color-background: var(--color-background-dark);
+		--color-foreground: var(--color-foreground-dark);
+		--color-muted: var(--color-muted-dark);
+		--color-info: var(--color-info-dark);
+		--color-success: var(--color-success-dark);
+		--color-warning: var(--color-warning-dark);
+		--color-error: var(--color-error-dark);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme]):not(:has(meta[name='color-scheme'][content='light']))),
+		:global([data-theme='auto']) {
+			color-scheme: dark;
+			--color-primary: var(--color-primary-dark);
+			--color-secondary: var(--color-secondary-dark);
+			--color-background: var(--color-background-dark);
+			--color-foreground: var(--color-foreground-dark);
+			--color-muted: var(--color-muted-dark);
+			--color-info: var(--color-info-dark);
+			--color-success: var(--color-success-dark);
+			--color-warning: var(--color-warning-dark);
+			--color-error: var(--color-error-dark);
+		}
+	}
+</style>

package/dist/theme/colors.svelte.d.ts

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

package/dist/theme/fonts.svelte

@@ -0,0 +1,10 @@
+<style>
+	@font-face {
+		font-family: 'Material Symbols Outlined';
+		font-style: normal;
+		font-display: block;
+		font-weight: 100 700;
+		src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
+			format('woff2-variations');
+	}
+</style>

package/dist/theme/fonts.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Fonts;
+type Fonts = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Fonts: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/theme/registry.json

@@ -0,0 +1,13 @@
+{
+	"id": "theme",
+	"files": [
+		"cli-theme.svelte",
+		"colors.svelte",
+		"surfaces.svelte",
+		"fonts.svelte",
+		"styles.svelte",
+		"surface.ts"
+	],
+	"exports": { "Theme": "cli-theme.svelte" },
+	"dependencies": []
+}

package/dist/theme/styles.svelte

@@ -0,0 +1,50 @@
+<style>
+	:global(body) {
+		background: var(--color-background);
+		color: var(--color-foreground);
+	}
+
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	:global(*) {
+		scrollbar-width: thin;
+		scrollbar-color: color-mix(in srgb, var(--color-muted) 60%, transparent) transparent;
+	}
+
+	@supports selector(::-webkit-scrollbar) {
+		:global(*) {
+			scrollbar-width: auto;
+			scrollbar-color: auto;
+		}
+		:global(::-webkit-scrollbar) {
+			width: 8px;
+			height: 8px;
+		}
+		:global(::-webkit-scrollbar-track),
+		:global(::-webkit-scrollbar-corner) {
+			background: transparent;
+		}
+		:global(::-webkit-scrollbar-thumb) {
+			border: 2px solid transparent;
+			border-radius: 999px;
+			background: color-mix(in srgb, var(--color-muted) 60%, transparent);
+			background-clip: padding-box;
+		}
+		:global(::-webkit-scrollbar-thumb:hover) {
+			background-color: var(--color-primary);
+		}
+	}
+
+	@media (forced-colors: active) {
+		:global(*) {
+			scrollbar-color: auto;
+		}
+		:global(::-webkit-scrollbar-thumb) {
+			background-color: CanvasText;
+		}
+	}
+</style>

package/dist/theme/styles.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Styles;
+type Styles = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Styles: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/theme/surface.d.ts

@@ -0,0 +1,3 @@
+import type { SurfaceBaseProps } from '../types.js';
+/** Compose typed surface classes; render Theme once to load their paint recipes. */
+export declare const surface: ({ variant, color, shadow, hover }?: SurfaceBaseProps) => string;

package/dist/theme/surface.js

@@ -0,0 +1,10 @@
+/** Compose typed surface classes; render Theme once to load their paint recipes. */
+export const surface = ({ variant = 'neutral', color = 'foreground', shadow, hover } = {}) => [
+    'surface',
+    `surface-${variant}`,
+    `surface-${color}`,
+    shadow && `surface-shadow-${shadow === true ? 'medium' : shadow}`,
+    hover && `surface-hover-${hover}`
+]
+    .filter(Boolean)
+    .join(' ');