@sveltier/ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/components/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TabsProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: TabsProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tabs: $$IsomorphicComponent;
+type Tabs<T extends string | number> = InstanceType<typeof Tabs<T>>;
+export default Tabs;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs.svelte';
+export type { TabsDefaults, TabsItem, TabsProps } from './types.js';

package/dist/components/Tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs.svelte';

package/dist/components/Tabs/tabs.css

@@ -0,0 +1,73 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-tabs {
+		display: grid;
+		gap: var(--sv-space-13);
+		min-inline-size: 0;
+	}
+
+	/* A row that scrolls when the tabs do not fit, over a hairline. */
+	.sv-tabs__list {
+		display: flex;
+		overflow-x: auto;
+		box-shadow: inset 0 calc(var(--sv-hairline) * -1) 0 var(--sv-color-border);
+		scrollbar-width: thin;
+	}
+
+	.sv-tabs__tab {
+		position: relative;
+		flex: none;
+		box-sizing: border-box;
+		block-size: calc(var(--sv-size-height) * var(--sv-density));
+		margin: 0;
+		padding: 0 calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		border: 0;
+		background: transparent;
+		color: var(--sv-color-text-muted);
+		font: var(--sv-weight-medium) var(--sv-size-text) / 1 var(--sv-font-ui);
+		white-space: nowrap;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.sv-tabs--grow .sv-tabs__tab {
+		flex: 1;
+	}
+
+	@media (hover: hover) {
+		.sv-tabs__tab:not(:disabled):hover {
+			color: var(--sv-color-text);
+		}
+	}
+
+	.sv-tabs__tab[aria-selected='true'] {
+		color: var(--sv-color);
+	}
+
+	.sv-tabs__tab:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	/* The selected tab's underline scales in: transform only. */
+	.sv-tabs__tab::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		inset-block-end: 0;
+		block-size: 2px;
+		border-radius: 2px 2px 0 0;
+		background-color: var(--sv-color);
+		transform: scaleX(0);
+		transition: transform var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	.sv-tabs__tab[aria-selected='true']::after {
+		transform: scaleX(1);
+	}
+
+	.sv-tabs__panel {
+		min-inline-size: 0;
+	}
+}

package/dist/components/Tabs/types.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Size } from '../../core/props/types.js';
+/** The Tabs props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface TabsDefaults {
+    /**
+     * The colour of the selected tab and its underline.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Height and text size of the tabs.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding of the tabs, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Tabs share the full width equally.
+     * @default false
+     */
+    grow: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Tabs: TabsDefaults;
+    }
+}
+/** One tab. */
+export interface TabsItem<T extends string | number = string> {
+    value: T;
+    /** What the tab says. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Tabs and the panel of the selected one. Name the tab list with `aria-label` or
+ * `aria-labelledby`, which go to it.
+ */
+export type TabsProps<T extends string | number = string> = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<TabsDefaults> & {
+    /** The tabs, in order. */
+    items: readonly TabsItem<T>[];
+    /** The selected tab. Bindable; the first enabled tab when not set. */
+    value?: T;
+    /** Called with the value of the tab the user selects. */
+    onchange?: (value: T) => void;
+    /**
+     * `automatic` selects a tab as soon as the arrow keys reach it; `manual` waits for Enter or
+     * Space, for panels that are slow to show.
+     * @default 'automatic'
+     */
+    activation?: 'automatic' | 'manual';
+    /** The content of the selected tab's panel. */
+    panel?: Snippet<[TabsItem<T>]>;
+}>;

package/dist/components/Tabs/types.js

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

package/dist/components/TextField/TextField.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	// A single line of text in a Field, with validation. See TextFieldProps for the props.
+	import { untrack } from 'svelte';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { textConstraintMessage } from '../../core/form/constraints.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import { TEXT_FIELD_TYPES, type TextFieldDefaults, type TextFieldProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		value = $bindable(''),
+		type = 'text',
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		readonly = false,
+		prepend,
+		append,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: TextFieldProps = $props();
+
+	const resolve = useDefaults<TextFieldDefaults>('TextField', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+	// A form reset goes back to the text the field started with, as it does for a form rendered on
+	// the server. A defaultValue of the app's own wins.
+	const initial = untrack(() => value ?? '');
+
+	const field = createField<string>({
+		value: () => value ?? '',
+		empty: (text) => text === '',
+		check: (text) =>
+			textConstraintMessage(
+				text,
+				{
+					required,
+					type,
+					minlength: rest.minlength,
+					maxlength: rest.maxlength,
+					pattern: rest.pattern
+				},
+				locale.t
+			),
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	// The Field checks the variant; the input's own props are checked here, once it exists.
+	if (DEV) {
+		$effect(() => {
+			checkValue('TextField', 'type', type, TEXT_FIELD_TYPES);
+			warnUnnamed('TextField', ref);
+		});
+	}
+
+	// Leaving means focus went outside the field, not to a button in it.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (!root.contains(event.relatedTarget as Node | null)) field.left();
+	}
+</script>
+
+<Field
+	{...p}
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{readonly}
+	{prepend}
+	{append}
+	class={className}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<input
+			bind:this={ref}
+			defaultValue={initial}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			{type}
+			bind:value
+		/>
+	{/snippet}
+</Field>

package/dist/components/TextField/TextField.svelte.d.ts

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

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField.svelte';
+export type { TextFieldDefaults, TextFieldProps, TextFieldType } from './types.js';

package/dist/components/TextField/index.js

@@ -0,0 +1 @@
+export { default as TextField } from './TextField.svelte';

package/dist/components/TextField/types.d.ts

@@ -0,0 +1,57 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The TextField props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type TextFieldDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        TextField: TextFieldDefaults;
+    }
+}
+export declare const TEXT_FIELD_TYPES: readonly ["text", "email", "password", "search", "tel", "url"];
+/** The kinds of single-line text. Numbers and dates have their own fields. */
+export type TextFieldType = (typeof TEXT_FIELD_TYPES)[number];
+type TextFieldOwnProps = Partial<TextFieldDefaults> & FieldContentProps & {
+    /** The text. Bindable. */
+    value?: string;
+    /**
+     * The kind of text: it picks the keyboard and autofill, and `email` and `url` are checked.
+     * @default 'text'
+     */
+    type?: TextFieldType;
+    /** Checks run in order after the HTML constraints. The first message is shown. */
+    rules?: readonly Rule<string>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The field must not be empty. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The text can be read, selected and copied but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+};
+/**
+ * A single line of text with a label, a hint and validation. `class` and `style` apply to the
+ * field; `id`, `ref` and every other attribute (`name`, `placeholder`, `autocomplete`,
+ * `minlength`, `pattern`, events) go to the `<input>`.
+ *
+ * @example
+ * <TextField
+ *   label="Username"
+ *   name="username"
+ *   required
+ *   minlength={3}
+ *   rules={[(value) => /^[a-z0-9_]+$/.test(value) || 'Use lowercase letters, digits and _']}
+ *   error={form?.errors?.username}
+ *   bind:value={username}
+ * />
+ */
+export type TextFieldProps = ElementProps<HTMLInputElement, HTMLInputAttributes, TextFieldOwnProps>;
+export {};

package/dist/components/TextField/types.js

@@ -0,0 +1 @@
+export const TEXT_FIELD_TYPES = ['text', 'email', 'password', 'search', 'tel', 'url'];

package/dist/components/Textarea/Textarea.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	// Several lines of text in a Field, with validation. See TextareaProps for the props.
+	import { untrack } from 'svelte';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { textConstraintMessage } from '../../core/form/constraints.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import './textarea.css';
+	import type { TextareaDefaults, TextareaProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		value = $bindable(''),
+		rows = 3,
+		autoGrow = false,
+		maxRows,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		readonly = false,
+		prepend,
+		append,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: TextareaProps = $props();
+
+	const resolve = useDefaults<TextareaDefaults>('Textarea', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+	// A form reset goes back to the text the field started with; a defaultValue of the app's own wins.
+	const initial = untrack(() => value ?? '');
+
+	const field = createField<string>({
+		value: () => value ?? '',
+		empty: (text) => text === '',
+		check: (text) =>
+			textConstraintMessage(
+				text,
+				{ required, minlength: rest.minlength, maxlength: rest.maxlength },
+				locale.t
+			),
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) $effect(() => warnUnnamed('Textarea', ref));
+
+	// Browsers without `field-sizing: content` grow the box by measuring the text; CSS caps it
+	// at maxRows, past which it scrolls.
+	$effect(() => {
+		const element = ref;
+		void value;
+		if (!autoGrow || !element || CSS.supports('field-sizing', 'content')) return;
+		element.style.blockSize = 'auto';
+		element.style.blockSize = `${element.scrollHeight}px`;
+	});
+
+	// Leaving means focus went outside the field, not to a button in it.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (!root.contains(event.relatedTarget as Node | null)) field.left();
+	}
+</script>
+
+<Field
+	{...p}
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{readonly}
+	{prepend}
+	{append}
+	class={['sv-textarea', autoGrow && 'sv-textarea--grow', className]}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<textarea
+			bind:this={ref}
+			defaultValue={initial}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			{rows}
+			style:--sv-textarea-rows={rows}
+			style:--sv-textarea-max={maxRows}
+			bind:value></textarea>
+	{/snippet}
+</Field>

package/dist/components/Textarea/Textarea.svelte.d.ts

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

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea.svelte';
+export type { TextareaDefaults, TextareaProps } from './types.js';

package/dist/components/Textarea/index.js

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.svelte';

package/dist/components/Textarea/textarea.css

@@ -0,0 +1,35 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Several lines start at the top of the box, at the height a one-line field gives its text, so
+	 * a Textarea lines up with a TextField beside it. Lines are spaced for reading.
+	 */
+	.sv-textarea > .sv-field__box {
+		/* Half of what the box's height leaves around one line, inside its two borders. */
+		--sv-textarea-pad: calc(
+			(var(--sv-size-height) * var(--sv-density) - 2 * var(--sv-hairline) - 1lh) / 2
+		);
+		/* The control radius, never rounder than a card, even where controls are pills. */
+		--sv-field-radius: min(var(--sv-radius-md), var(--sv-radius-lg));
+		align-items: flex-start;
+		line-height: var(--sv-leading-normal);
+	}
+
+	.sv-textarea .sv-field__control {
+		padding-block: var(--sv-textarea-pad);
+		resize: vertical;
+	}
+
+	.sv-textarea :where(.sv-field__prepend, .sv-field__append) {
+		padding-block: var(--sv-textarea-pad);
+	}
+
+	/* Growing: at least `rows` lines, at most `maxRows`, then it scrolls. */
+	.sv-textarea--grow .sv-field__control {
+		field-sizing: content;
+		min-block-size: calc(var(--sv-textarea-rows) * 1lh + 2 * var(--sv-textarea-pad));
+		max-block-size: calc(var(--sv-textarea-max) * 1lh + 2 * var(--sv-textarea-pad));
+		resize: none;
+	}
+}

package/dist/components/Textarea/types.d.ts

@@ -0,0 +1,60 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The Textarea props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type TextareaDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Textarea: TextareaDefaults;
+    }
+}
+type TextareaOwnProps = Partial<TextareaDefaults> & FieldContentProps & {
+    /** The text. Bindable. */
+    value?: string;
+    /**
+     * Visible lines, and the fewest it shows when it grows.
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Grows with its text instead of scrolling, up to `maxRows`.
+     * @default false
+     */
+    autoGrow?: boolean;
+    /** With `autoGrow`, the most lines it grows to before it scrolls. Unlimited when not set. */
+    maxRows?: number;
+    /** Checks run in order after the HTML constraints. The first message is shown. */
+    rules?: readonly Rule<string>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The field must not be empty. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The text can be read, selected and copied but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+};
+/**
+ * Several lines of text with a label, a hint and validation. `class` and `style` apply to the
+ * field; `id`, `ref` and every other attribute (`name`, `placeholder`, `minlength`,
+ * `maxlength`, events) go to the `<textarea>`.
+ *
+ * @example
+ * <Textarea
+ *   label="Note to the payee"
+ *   name="note"
+ *   maxlength={280}
+ *   autoGrow
+ *   maxRows={8}
+ *   bind:value={note}
+ * />
+ */
+export type TextareaProps = ElementProps<HTMLTextAreaElement, HTMLTextareaAttributes, TextareaOwnProps>;
+export {};

package/dist/components/Textarea/types.js

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

package/dist/core/defaults/DefaultsProvider.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DefaultsConfig } from './context.js';
+
+	export interface DefaultsProviderProps {
+		/**
+		 * Defaults for this subtree: `global` reaches every component with the prop, and a key
+		 * per component name targets one component. Merged over any outer provider, key by key.
+		 */
+		defaults: DefaultsConfig;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getDefaultsContext, mergeDefaults, setDefaultsContext } from './context.js';
+
+	let { defaults, children }: DefaultsProviderProps = $props();
+
+	const parent = getDefaultsContext();
+	const merged = $derived(mergeDefaults(parent?.config, defaults));
+
+	setDefaultsContext({
+		get config() {
+			return merged;
+		}
+	});
+</script>
+
+{@render children?.()}

package/dist/core/defaults/DefaultsProvider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { DefaultsConfig } from './context.js';
+export interface DefaultsProviderProps {
+    /**
+     * Defaults for this subtree: `global` reaches every component with the prop, and a key
+     * per component name targets one component. Merged over any outer provider, key by key.
+     */
+    defaults: DefaultsConfig;
+    children?: Snippet;
+}
+declare const DefaultsProvider: import("svelte").Component<DefaultsProviderProps, {}, "">;
+type DefaultsProvider = ReturnType<typeof DefaultsProvider>;
+export default DefaultsProvider;

package/dist/core/defaults/context.d.ts

@@ -0,0 +1,45 @@
+import type { SharedProps } from '../props/types.js';
+/** Defaults that reach every component which declares the prop. */
+export type GlobalDefaults = Pick<SharedProps, 'variant' | 'density' | 'size' | 'color' | 'rounded' | 'disabled'>;
+/**
+ * Per-component defaults, keyed by component name. Sveltier's components register here,
+ * and so can yours, by declaration merging:
+ *
+ * @example
+ * declare module '@sveltier/ui' {
+ *   interface ComponentDefaults {
+ *     MyCard: { elevated?: boolean };
+ *   }
+ * }
+ */
+export interface ComponentDefaults {
+}
+export type DefaultsConfig = {
+    global?: GlobalDefaults;
+} & {
+    [Name in keyof ComponentDefaults]?: Partial<ComponentDefaults[Name]>;
+};
+type Bag = Record<string, unknown>;
+type Merged = Record<string, Bag | undefined>;
+interface DefaultsContext {
+    /** The merged configuration of this provider and all its ancestors. */
+    readonly config: Merged;
+}
+export declare const getDefaultsContext: () => DefaultsContext | undefined;
+export declare const setDefaultsContext: (context: DefaultsContext) => DefaultsContext;
+/** Merges a provider's own config over its parent's, per component and per key. */
+export declare function mergeDefaults(parent: Merged | undefined, own: DefaultsConfig): Merged;
+/**
+ * Returns a resolver for a component's defaultable props. Call it during component
+ * initialisation, then resolve inside `$derived` so prop and provider changes are tracked:
+ *
+ * @example
+ * let { size, variant, ...rest }: ButtonProps = $props();
+ * const resolve = useDefaults('Button', { size: 'md', variant: 'flat' });
+ * const p = $derived(resolve({ size, variant }));
+ *
+ * Order: the prop passed in, then the nearest provider's defaults for `name`, then its
+ * global defaults, then `builtins`. `undefined` and `null` mean "not set".
+ */
+export declare function useDefaults<T extends object>(name: string, builtins: T): (local: Partial<T>) => T;
+export {};