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

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/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,161 @@
+<script module lang="ts">
+	// Until when the next tooltip skips its delay: while one shows, and shortly after it hides,
+	// so moving across a toolbar shows each one at once.
+	let warmUntil = 0;
+</script>
+
+<script lang="ts">
+	// A short text that describes a control, on hover and keyboard focus. See TooltipProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { on } from 'svelte/events';
+	import { checkValue, DEV, warnNamelessTrigger } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import type { TriggerAttributes } from '../../core/overlay/types.js';
+	import { ALIGNS, anchored, SIDES } from '../../primitives/anchored/anchored.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import './tooltip.css';
+	import type { TooltipDefaults, TooltipProps } from './types.js';
+
+	let {
+		text,
+		trigger,
+		side,
+		align,
+		delay,
+		open = $bindable(false),
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: TooltipProps = $props();
+
+	const resolve = useDefaults<TooltipDefaults>('Tooltip', {
+		side: 'top',
+		align: 'center',
+		delay: 377
+	});
+	const p = $derived(resolve({ side, align, delay }));
+
+	if (DEV) {
+		$effect(() => checkValue('Tooltip', 'side', p.side, SIDES));
+		$effect(() => checkValue('Tooltip', 'align', p.align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// Room between the control and the tooltip, in px, clear of a focus ring.
+	const OFFSET = 8;
+	// Time to cross that room onto the tooltip before it hides, in ms.
+	const GRACE = 144;
+	const WARM = 377;
+
+	// The control it describes, which it is placed against.
+	let anchor = $state<HTMLElement | null>(null);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	// A press on the control hides the tooltip until the pointer leaves it.
+	let pressed = false;
+
+	function show() {
+		clearTimeout(timer);
+		open = true;
+	}
+
+	function hide() {
+		clearTimeout(timer);
+		open = false;
+	}
+
+	function later(action: () => void, ms: number) {
+		clearTimeout(timer);
+		timer = setTimeout(action, ms);
+	}
+
+	// Touch has no hover: a tap is a press, and a long press belongs to the platform.
+	function enter(event: PointerEvent) {
+		if (event.pointerType === 'touch' || pressed) return;
+		if (open || performance.now() < warmUntil) show();
+		else later(show, p.delay);
+	}
+
+	function leave() {
+		pressed = false;
+		later(hide, GRACE);
+	}
+
+	function press() {
+		pressed = true;
+		hide();
+	}
+
+	// Keyboard focus shows it at once; a click that focuses the control does not.
+	function focus(event: FocusEvent) {
+		if ((event.currentTarget as HTMLElement).matches(':focus-visible')) show();
+	}
+
+	const control: Attachment<HTMLElement> = (node) => {
+		anchor = node;
+		if (DEV) warnNamelessTrigger('Tooltip', node);
+		const stops = [
+			on(node, 'pointerenter', enter),
+			on(node, 'pointerleave', leave),
+			on(node, 'pointerdown', press),
+			on(node, 'focus', focus),
+			on(node, 'blur', hide)
+		];
+		return () => {
+			for (const stop of stops) stop();
+			clearTimeout(timer);
+			if (anchor === node) anchor = null;
+		};
+	};
+	const CONTROL = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-describedby': id,
+		[CONTROL]: control
+	});
+
+	// In the top layer while open. It stays placed until it has faded out, and a hidden tooltip
+	// is not placed at all, so a page with many of them pays nothing for those not shown.
+	let leaving = $state(false);
+	const popover: Attachment<HTMLElement> = (node) => {
+		if (!open) return;
+		node.showPopover();
+		warmUntil = Infinity;
+		return () => {
+			warmUntil = performance.now() + WARM;
+			if (!node.matches(':popover-open')) return;
+			node.hidePopover();
+			leaving = true;
+			void Promise.allSettled(node.getAnimations().map(({ finished }) => finished)).then(
+				() => (leaving = false)
+			);
+		};
+	};
+	const place: Attachment<HTMLElement> = (node) => {
+		if (open || leaving) {
+			return anchored({ anchor, side: p.side, align: p.align, offset: OFFSET })(node);
+		}
+	};
+	// Escape hides it first, as the topmost layer; a press outside hides it and goes through.
+	const layer: Attachment<HTMLElement> = (node) => {
+		if (open) return dismissable({ onDismiss: hide, transient: true })(node);
+	};
+</script>
+
+{@render trigger(triggerAttributes)}
+<div
+	bind:this={ref}
+	{...rest}
+	{id}
+	role="tooltip"
+	popover="manual"
+	class={['sv-tooltip', className]}
+	{@attach popover}
+	{@attach place}
+	{@attach layer}
+	onpointerenter={() => clearTimeout(timer)}
+	onpointerleave={leave}
+>
+	{text}
+</div>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipDefaults, TooltipProps } from './types.js';

package/dist/components/Tooltip/index.js

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

package/dist/components/Tooltip/tooltip.css

@@ -0,0 +1,44 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The page inverted: the text colour as the background, so it reads on any surface in both
+	 * schemes. As wide as its text up to a short line, never wider than the screen. It grows in
+	 * from 94.4% and fades with the theme's fast timing, and stays in the top layer until it has
+	 * faded out; with reduced motion it simply appears.
+	 */
+	.sv-tooltip {
+		inline-size: max-content;
+		max-inline-size: min(21rem, 100vw - 2 * var(--sv-space-8));
+		padding-block: var(--sv-space-3);
+		padding-inline: var(--sv-space-8);
+		border: 0;
+		border-radius: var(--sv-radius-sm);
+		overflow: visible;
+		background: var(--sv-color-text);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-color-background);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-xs);
+		line-height: var(--sv-leading-snug);
+		overflow-wrap: break-word;
+		opacity: 0;
+		transform: scale(0.944);
+		transition-property: opacity, transform, display, overlay;
+		transition-duration: var(--sv-duration-fast);
+		transition-timing-function: var(--sv-ease);
+		transition-behavior: allow-discrete;
+	}
+
+	.sv-tooltip:popover-open {
+		opacity: 1;
+		transform: none;
+	}
+
+	@starting-style {
+		.sv-tooltip:popover-open {
+			opacity: 0;
+			transform: scale(0.944);
+		}
+	}
+}

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Align, Side } from '../../primitives/anchored/anchored.js';
+/** The Tooltip props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface TooltipDefaults {
+    /**
+     * The side of the control it shows on, moved to the opposite side when there is no room.
+     * `start` and `end` follow the writing direction.
+     * @default 'top'
+     */
+    side: Side;
+    /**
+     * Its alignment along that side.
+     * @default 'center'
+     */
+    align: Align;
+    /**
+     * How long the pointer rests on the control before it shows, in ms. Keyboard focus shows it
+     * at once, and so does moving on from another tooltip, as across a toolbar.
+     * @default 377
+     */
+    delay: number;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Tooltip: TooltipDefaults;
+    }
+}
+/**
+ * A short text that describes a control: shown when the pointer rests on it and at once on
+ * keyboard focus, hidden on Escape, on leaving and on a press. It stays while the pointer moves
+ * onto it. It holds text only; for links, buttons or fields, use a Popover. The text is the
+ * control's description (`aria-describedby`), not its name: an icon-only button still needs
+ * `aria-label`. `class`, `style`, `ref` and other attributes go to the tooltip.
+ *
+ * @example
+ * <Tooltip text="Copy the IBAN">
+ *   {#snippet trigger(attributes)}
+ *     <Button {...attributes} icon variant="text" aria-label="Copy the IBAN"><Icon path={copy} /></Button>
+ *   {/snippet}
+ * </Tooltip>
+ */
+export type TooltipProps = ElementProps<HTMLDivElement, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover' | 'role'>, Partial<TooltipDefaults> & {
+    /** The text. */
+    text: string;
+    /** The control it describes. Spread the attributes it receives onto it. */
+    trigger: Snippet<[TriggerAttributes]>;
+    /**
+     * Whether it shows. Bindable; it sets this as the pointer and focus come and go.
+     * @default false
+     */
+    open?: boolean;
+}>;

package/dist/components/Tooltip/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 {};

package/dist/core/defaults/context.js

@@ -0,0 +1,38 @@
+import { getContext, hasContext, setContext } from 'svelte';
+const KEY = Symbol('sveltier.defaults');
+export const getDefaultsContext = () => hasContext(KEY) ? getContext(KEY) : undefined;
+export const setDefaultsContext = (context) => setContext(KEY, context);
+/** Merges a provider's own config over its parent's, per component and per key. */
+export function mergeDefaults(parent, own) {
+    const merged = { ...parent };
+    for (const [name, values] of Object.entries(own)) {
+        merged[name] = { ...parent?.[name], ...values };
+    }
+    return 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 function useDefaults(name, builtins) {
+    const context = getDefaultsContext();
+    const keys = Object.keys(builtins);
+    return (local) => {
+        const config = context?.config;
+        const own = config?.[name];
+        const global = config?.global;
+        const resolved = {};
+        for (const key of keys) {
+            resolved[key] = (local[key] ?? own?.[key] ?? global?.[key] ?? builtins[key]);
+        }
+        return resolved;
+    };
+}

package/dist/core/display/display.d.ts

@@ -0,0 +1,39 @@
+/** Breakpoints, from the narrowest viewport to the widest. */
+export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+export type Breakpoint = (typeof BREAKPOINTS)[number];
+/** The minimum width, in CSS px, of every breakpoint above `xs`. */
+export type DisplayThresholds = Record<Exclude<Breakpoint, 'xs'>, number>;
+export interface DisplayOptions {
+    /** Minimum widths in CSS px. Defaults: sm 600, md 960, lg 1280, xl 1920, xxl 2560. */
+    thresholds?: Partial<DisplayThresholds>;
+    /** `mobile` is true below this breakpoint. Defaults to `md`. */
+    mobileBreakpoint?: Exclude<Breakpoint, 'xs'>;
+    /** Viewport width assumed during server rendering. Defaults to 0, mobile first. */
+    ssrWidth?: number;
+}
+type Flags = {
+    readonly [Name in Breakpoint]: boolean;
+} & {
+    readonly [Name in Exclude<Breakpoint, 'xs' | 'xxl'> as `${Name}AndUp` | `${Name}AndDown`]: boolean;
+};
+/** The viewport as `useDisplay()` sees it. Every field is reactive. */
+export interface DisplayInstance extends Flags {
+    /** The current breakpoint. */
+    readonly name: Breakpoint;
+    /** Whether the viewport is narrower than the mobile breakpoint. */
+    readonly mobile: boolean;
+    readonly thresholds: Readonly<DisplayThresholds>;
+}
+/**
+ * Builds the breakpoint flags on one `MediaQuery` per threshold. Each flag reads only the
+ * queries it needs, so a component is updated only when its own threshold is crossed.
+ */
+export declare function createDisplay({ thresholds: custom, mobileBreakpoint, ssrWidth }?: DisplayOptions): DisplayInstance;
+/** Gives a subtree its display instance, built from the root's options. */
+export declare const setDisplayContext: (display: DisplayInstance) => DisplayInstance;
+/**
+ * Returns the viewport breakpoints. Call it during component initialisation. Without a
+ * provider it returns one shared instance with the default options.
+ */
+export declare function useDisplay(): DisplayInstance;
+export {};