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

package/dist/components/NumberField/NumberField.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	// A number in a Field: typed in the locale's format, stepped with the keyboard or buttons, and
+	// validated. See NumberFieldProps for the props.
+	import { untrack } from 'svelte';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { numberConstraintMessage, parseNumber } from '../../core/form/number.js';
+	import type { Rule } from '../../core/form/types.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import './number-field.css';
+	import type { NumberFieldDefaults, NumberFieldProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		value = $bindable(null),
+		min,
+		max,
+		step,
+		format,
+		controls = true,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		readonly = false,
+		name,
+		prepend,
+		append,
+		id,
+		'aria-describedby': describedBy,
+		onkeydown,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: NumberFieldProps = $props();
+
+	const resolve = useDefaults<NumberFieldDefaults>('NumberField', {
+		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();
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+
+	/** The number written in the locale; empty for no number. */
+	const show = (number: number | null) =>
+		number === null || !Number.isFinite(number)
+			? ''
+			: locale.formatNumber(number, format ?? { maximumFractionDigits: 20 });
+
+	// What the input shows, and what it means: a number, null for empty, NaN for not a number. A
+	// form reset goes back to the text the field started with.
+	const initial = untrack(() => show(value ?? null));
+	let text = $state(initial);
+	let parsed = $state<number | null>(untrack(() => value ?? null));
+
+	// A value set from outside, not typed, is written in the locale format.
+	$effect(() => {
+		const next = value ?? null;
+		if (
+			!Object.is(
+				next,
+				untrack(() => parsed)
+			)
+		) {
+			parsed = next;
+			text = show(next);
+		}
+	});
+
+	const field = createField<number | null>({
+		value: () => parsed,
+		empty: (number) => number === null,
+		check: (number) => numberConstraintMessage(number, { required, min, max, step }, locale),
+		// Rules never see an empty or unreadable value: the checks above stop those first.
+		rules: () => rules as readonly Rule<number | null>[] | undefined,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) {
+		$effect(() => {
+			warnUnnamed('NumberField', ref);
+			// A currency or percent sign in the field would make the text unreadable as a number.
+			checkValue(
+				'NumberField',
+				'format.style',
+				format?.style,
+				['decimal'],
+				'Put a currency or a unit in prepend or append.'
+			);
+		});
+	}
+
+	const places = (number: number | undefined) => (String(number ?? '').split('.')[1] ?? '').length;
+	// The keys and buttons move by step, or by 1 when no step is set (and then any number is
+	// valid). Enough decimals for the step and its starting point, so 0.1 + 0.2 lands on 0.3.
+	const increment = $derived(step ?? 1);
+	const decimals = $derived(Math.max(places(increment), places(min)));
+	const inert = $derived(p.disabled || readonly);
+	const current = $derived(parsed !== null && Number.isFinite(parsed) ? parsed : null);
+
+	// Called for typing and for a form reset alike, so the value always follows the text.
+	function read(next: string) {
+		text = next;
+		const number = parseNumber(next, locale.locale);
+		parsed = number;
+		if (number === null || Number.isFinite(number)) value = number;
+	}
+
+	/** Sets a number the keys or buttons chose, within min and max. */
+	function commit(number: number) {
+		const bounded = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, number));
+		const next = Number(bounded.toFixed(decimals));
+		parsed = next;
+		value = next;
+		text = show(next);
+		field.changed();
+	}
+
+	// Moves along the steps counted from min, as a native number input does: from a value between
+	// two steps, up goes to the next one and down to the previous one. Empty starts at min, or 0.
+	function stepBy(steps: number) {
+		if (inert) return;
+		const start = min ?? 0;
+		if (current === null) return commit(start);
+		const offset = (current - start) / increment;
+		const from = steps > 0 ? Math.floor(offset + 1e-9) : Math.ceil(offset - 1e-9);
+		commit(start + (from + steps) * increment);
+	}
+
+	function keydown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		(onkeydown as ((event: KeyboardEvent) => void) | null | undefined)?.(event);
+		if (event.defaultPrevented || inert) return;
+		const moves: Record<string, (() => void) | undefined> = {
+			ArrowUp: () => stepBy(1),
+			ArrowDown: () => stepBy(-1),
+			PageUp: () => stepBy(10),
+			PageDown: () => stepBy(-10),
+			Home: min == null ? undefined : () => commit(min),
+			End: max == null ? undefined : () => commit(max)
+		};
+		const move = moves[event.key];
+		if (!move) return;
+		event.preventDefault();
+		move();
+	}
+
+	// Leaving means focus went outside the field, not to a button in it. The number is then
+	// written in the locale format.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (root.contains(event.relatedTarget as Node | null)) return;
+		if (current !== null) text = show(current);
+		field.left();
+	}
+
+	// Only whole numbers, and no minus sign, can use the numeric keypad.
+	const integer = $derived(step != null && decimals === 0);
+</script>
+
+{#snippet end()}
+	{@render append?.()}
+	{#if controls}
+		<span class="sv-number-field__steps">
+			<button
+				type="button"
+				class="sv-number-field__step"
+				tabindex="-1"
+				aria-label={locale.t('decrease')}
+				aria-controls={inputId}
+				disabled={inert || (min != null && current !== null && current <= min)}
+				onpointerdown={(event) => event.preventDefault()}
+				onclick={() => stepBy(-1)}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14" /></svg>
+			</button>
+			<button
+				type="button"
+				class="sv-number-field__step"
+				tabindex="-1"
+				aria-label={locale.t('increase')}
+				aria-controls={inputId}
+				disabled={inert || (max != null && current !== null && current >= max)}
+				onpointerdown={(event) => event.preventDefault()}
+				onclick={() => stepBy(1)}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+			</button>
+		</span>
+	{/if}
+{/snippet}
+
+<Field
+	{...p}
+	id={inputId}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{readonly}
+	{prepend}
+	append={controls || append ? end : undefined}
+	class={['sv-number-field', 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="text"
+			role="spinbutton"
+			inputmode={min != null && min >= 0 && integer ? 'numeric' : 'decimal'}
+			autocomplete="off"
+			aria-valuenow={current ?? undefined}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuetext={current === null ? undefined : text}
+			bind:value={() => text, read}
+			onkeydown={keydown}
+		/>
+		{#if name}<input type="hidden" {name} value={current ?? ''} />{/if}
+	{/snippet}
+</Field>

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

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

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

@@ -0,0 +1,2 @@
+export { default as NumberField } from './NumberField.svelte';
+export type { NumberFieldDefaults, NumberFieldProps } from './types.js';

package/dist/components/NumberField/index.js

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

package/dist/components/NumberField/number-field.css

@@ -0,0 +1,74 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Digits keep one width, so numbers that change or stack line up. */
+	.sv-number-field .sv-field__control {
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sv-number-field .sv-field__append {
+		align-self: stretch;
+	}
+
+	.sv-number-field__steps {
+		display: flex;
+		align-items: center;
+		gap: var(--sv-space-2);
+		margin-inline-end: calc(var(--sv-size-height) * var(--sv-density) * -0.146);
+	}
+
+	/* Square, φ⁻¹ of the field's height, and never under 24px (WCAG 2.5.8). */
+	.sv-number-field__step {
+		--sv-step: max(1.5rem, calc(var(--sv-size-height) * var(--sv-density) * 0.618));
+		position: relative;
+		display: grid;
+		place-items: center;
+		inline-size: var(--sv-step);
+		block-size: var(--sv-step);
+		padding: 0;
+		border: 0;
+		border-radius: var(--sv-radius-sm);
+		background: none;
+		color: var(--sv-color-text-muted);
+		cursor: pointer;
+	}
+
+	/* The state layer, as on a Button: only its opacity changes. */
+	.sv-number-field__step::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background-color: currentColor;
+		opacity: 0;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	@media (hover: hover) {
+		.sv-number-field__step:enabled:hover {
+			color: var(--sv-color-text);
+		}
+
+		.sv-number-field__step:enabled:hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-number-field__step:enabled:active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-number-field__step:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	.sv-number-field__step svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.75;
+		stroke-linecap: round;
+	}
+}

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

@@ -0,0 +1,73 @@
+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 NumberField props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type NumberFieldDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        NumberField: NumberFieldDefaults;
+    }
+}
+type NumberFieldOwnProps = Partial<NumberFieldDefaults> & FieldContentProps & {
+    /** The number, or `null` when the field is empty. Bindable. */
+    value?: number | null;
+    /** The smallest value. The keys and buttons stop here; a smaller typed value is an error. */
+    min?: number;
+    /** The largest value. The keys and buttons stop here; a larger typed value is an error. */
+    max?: number;
+    /**
+     * How far the arrow keys and the buttons move; Page Up and Page Down move ten steps. When
+     * set, a typed value off the steps, counted from `min`, is an error. When not set, they move
+     * by 1 and any number is accepted, decimals included.
+     */
+    step?: number;
+    /**
+     * How the number is written once the user leaves the field, as `Intl.NumberFormat` options
+     * in the app's locale: digits only, such as `{ minimumFractionDigits: 2 }`, so the user can
+     * edit what they see. Put a currency or a unit in `prepend` or `append`.
+     * @default { maximumFractionDigits: 20 }
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Shows decrease and increase buttons at the end of the field.
+     * @default true
+     */
+    controls?: boolean;
+    /** Checks run in order after the HTML constraints, with the number. The first message is shown. */
+    rules?: readonly Rule<number>[];
+    /** 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 number can be read and copied but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Submits the plain number, such as `1234.5`, under this name in a form. */
+    name?: string;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+};
+/**
+ * A number typed in the app's locale, stepped with the arrow keys or the buttons, and checked
+ * against `min`, `max` and `step`. The field shows the number formatted, for example
+ * `1,234.50`, and binds and submits the plain number. `class` and `style` apply to the field;
+ * `id`, `ref` and other attributes go to the `<input>`.
+ *
+ * @example
+ * <NumberField
+ *   label="Quantity"
+ *   name="quantity"
+ *   min={1}
+ *   max={99}
+ *   required
+ *   bind:value={quantity}
+ * />
+ */
+export type NumberFieldProps = ElementProps<HTMLInputElement, HTMLInputAttributes, NumberFieldOwnProps>;
+export {};

package/dist/components/NumberField/types.js

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

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	// A non-modal panel next to the control that opens it. See PopoverProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { ALIGNS, anchored, SIDES } from '../../primitives/anchored/anchored.js';
+	import { tabbable } from '../../primitives/focus/tabbable.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import './popover.css';
+	import type { PopoverDefaults, PopoverProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		trigger,
+		open = $bindable(false),
+		title,
+		children,
+		actions,
+		side = 'bottom',
+		align = 'start',
+		offset = 8,
+		persistent = false,
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: PopoverProps = $props();
+
+	const resolve = useDefaults<PopoverDefaults>('Popover', {
+		size: 'md',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+
+	if (DEV) {
+		$effect(() => checkValue('Popover', 'side', side, SIDES));
+		$effect(() => checkValue('Popover', 'align', align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// The control that opens it: the panel is placed against it, and focus goes back to it.
+	let anchor = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		anchor = node;
+		return () => {
+			if (anchor === node) anchor = null;
+		};
+	};
+	const ANCHOR = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'dialog',
+		'aria-expanded': open,
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open ? close('action') : (open = true)),
+		[ANCHOR]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		// Closed from inside, focus goes back to the control; a press or a Tab elsewhere has
+		// already chosen where it goes.
+		if (ref?.contains(document.activeElement)) anchor?.focus({ preventScroll: true });
+		open = false;
+		onclose?.(reason);
+	}
+
+	// In the top layer, with focus on the element marked autofocus, else the first that takes
+	// it, else the panel itself.
+	const show: Attachment<HTMLElement> = (panel) => {
+		panel.showPopover();
+		if (DEV) warnUnnamed('Popover', panel, 'a title');
+		const target = panel.querySelector<HTMLElement>('[autofocus]') ?? tabbable(panel)[0] ?? panel;
+		target.focus({ preventScroll: true });
+	};
+</script>
+
+{@render trigger(triggerAttributes)}
+
+{#if open}
+	<div
+		bind:this={ref}
+		aria-labelledby={title ? `${id}-title` : undefined}
+		tabindex="-1"
+		{...rest}
+		{id}
+		role="dialog"
+		popover="manual"
+		class={['sv-popover', sharedClasses(p, 'Popover'), className]}
+		{@attach show}
+		{@attach anchored({ anchor, side, align, offset })}
+		{@attach dismissable({
+			onDismiss: close,
+			escape: !persistent,
+			outside: !persistent,
+			focusOutside: !persistent,
+			inside: () => [anchor]
+		})}
+		transition:pop
+	>
+		{#if title}<div class="sv-popover__title" id="{id}-title">{title}</div>{/if}
+		{#if children}<div class="sv-popover__body">{@render children()}</div>{/if}
+		{#if actions}
+			<div class="sv-popover__actions">{@render actions({ close: () => close('action') })}</div>
+		{/if}
+	</div>
+{/if}

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

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

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

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.svelte';
+export type { PopoverDefaults, PopoverProps } from './types.js';

package/dist/components/Popover/index.js

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

package/dist/components/Popover/popover.css

@@ -0,0 +1,67 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A raised surface beside its control, as wide as its content up to its size and never wider
+	 * or taller than the screen, scrolling inside when its content is longer.
+	 */
+	.sv-popover {
+		--sv-popover-pad: calc(var(--sv-space-13) * var(--sv-density));
+		box-sizing: border-box;
+		display: grid;
+		gap: var(--sv-space-13);
+		inline-size: max-content;
+		max-inline-size: min(var(--sv-popover-width), 100vw - 2 * var(--sv-space-8));
+		max-block-size: calc(100dvh - 2 * var(--sv-space-8));
+		padding: var(--sv-popover-pad);
+		overflow: auto;
+		overscroll-behavior: contain;
+		border: var(--sv-hairline) solid var(--sv-color-border-soft);
+		border-radius: var(--sv-rounded, var(--sv-radius-lg));
+		outline: none;
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* Widths on the φ series: 13, 17, 21, 27 and 34rem. */
+	.sv-popover.sv-size-xs {
+		--sv-popover-width: 13rem;
+	}
+
+	.sv-popover.sv-size-sm {
+		--sv-popover-width: 17rem;
+	}
+
+	.sv-popover.sv-size-md {
+		--sv-popover-width: 21rem;
+	}
+
+	.sv-popover.sv-size-lg {
+		--sv-popover-width: 27rem;
+	}
+
+	.sv-popover.sv-size-xl {
+		--sv-popover-width: 34rem;
+	}
+
+	/* The heading in the theme's display voice, a step above the body. */
+	.sv-popover__title {
+		font: var(--sv-weight-display) var(--sv-text-md) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-popover__body {
+		min-inline-size: 0;
+	}
+
+	.sv-popover__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		justify-content: flex-end;
+	}
+}

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

@@ -0,0 +1,83 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { Align, Side } from '../../primitives/anchored/anchored.js';
+/** The Popover props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface PopoverDefaults {
+    /**
+     * The widest it grows, from `xs` (13rem) to `xl` (34rem); narrower content keeps it narrower.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Popover: PopoverDefaults;
+    }
+}
+/**
+ * A panel next to the control that opens it, for content the user works in: a few fields, a
+ * choice, a short explanation with a link. It does not block the page: Escape, a press outside
+ * and focus moving out close it. Focus moves into it when it opens and back to the control when
+ * it closes from inside. For text that only describes a control, use a Tooltip; for a task that
+ * needs the whole screen, a Dialog. `class`, `style`, `ref` and other attributes go to the panel.
+ *
+ * @example
+ * <Popover title="Amount range">
+ *   {#snippet trigger(attributes)}<Button {...attributes} variant="outlined">Amount</Button>{/snippet}
+ *   <NumberField label="From" bind:value={from} />
+ *   {#snippet actions({ close })}<Button onclick={close}>Apply</Button>{/snippet}
+ * </Popover>
+ */
+export type PopoverProps = ElementProps<HTMLDivElement, Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'popover' | 'role'>, Partial<PopoverDefaults> & {
+    /** The control that opens and closes it. Spread the attributes it receives onto it. */
+    trigger: Snippet<[TriggerAttributes]>;
+    /**
+     * Whether it is open. Bindable; it sets this to `false` when it closes itself.
+     * @default false
+     */
+    open?: boolean;
+    /** A heading, which also names it. Without it, name it with `aria-label`. */
+    title?: string;
+    /** The content. */
+    children?: Snippet;
+    /** Buttons at the end. `close()` closes it with the reason `'action'`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]>;
+    /**
+     * The side of the control it opens on, moved to the opposite side when there is no room.
+     * `start` and `end` follow the writing direction.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Its alignment along that side.
+     * @default 'start'
+     */
+    align?: Align;
+    /**
+     * The room between the control and the panel, in px.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Escape, a press outside and focus moving out do not close it: an answer is needed.
+     * @default false
+     */
+    persistent?: boolean;
+    /** Called when it closes itself, with the reason. */
+    onclose?: (reason: CloseReason) => void;
+}>;

package/dist/components/Popover/types.js

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