shelving 1.199.2 → 1.200.0

package/ui/form/FormFields.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useStore } from "../../react/useStore.js";
+import { Field } from "./Field.js";
+import { requireForm, useField } from "./FormContext.js";
+import { SchemaInput } from "./SchemaInput.js";
+/** Show a `<Field>` for a named property in the current form. */
+export function FormField({ name, ...props }) {
+    const field = useField(name);
+    const { schema, message } = field;
+    return (_jsx(Field, { ...schema, message: message, required: props.required, children: _jsx(SchemaInput, { ...field, ...props }) }));
+}
+/** List of `<Field>` elements for every schema property in the current form. */
+export function FormFields() {
+    const form = useStore(requireForm());
+    return (_jsx(_Fragment, { children: Object.keys(form.schema.props).map(name => (_jsx(FormField, { name: name }, name))) }));
+}

package/ui/form/FormFields.tsx

@@ -0,0 +1,30 @@
+import type { ReactElement } from "react";
+import { useStore } from "../../react/useStore.js";
+import { Field } from "./Field.js";
+import { requireForm, useField } from "./FormContext.js";
+import type { InputProps } from "./Input.js";
+import { SchemaInput } from "./SchemaInput.js";
+
+/** Show a `<Field>` for a named property in the current form. */
+export function FormField({ name, ...props }: InputProps): ReactElement {
+	const field = useField(name);
+	const { schema, message } = field;
+
+	return (
+		<Field {...schema} message={message} required={props.required}>
+			<SchemaInput {...field} {...props} />
+		</Field>
+	);
+}
+
+/** List of `<Field>` elements for every schema property in the current form. */
+export function FormFields(): ReactElement {
+	const form = useStore(requireForm());
+	return (
+		<>
+			{Object.keys(form.schema.props).map(name => (
+				<FormField key={name} name={name} />
+			))}
+		</>
+	);
+}

package/ui/form/FormFooter.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from "react";
+export interface FormFooterProps {
+    children?: ReactNode | undefined;
+    submit?: ReactNode | undefined;
+}
+/**
+ * Show a form footer with custom submit text.
+ * - Shows an elements row containing a submit button (and any additional buttons provided as `children`).
+ * - Shows a `<FormMessage>` beneath the buttons that shows any error message set on the form.
+ */
+export declare function FormFooter({ children, submit }: FormFooterProps): ReactElement;

package/ui/form/FormFooter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Elements } from "../block/Elements.js";
+import { Footer } from "../block/Section.js";
+import { FormMessage } from "./FormMessage.js";
+import { SubmitButton } from "./SubmitButton.js";
+/**
+ * Show a form footer with custom submit text.
+ * - Shows an elements row containing a submit button (and any additional buttons provided as `children`).
+ * - Shows a `<FormMessage>` beneath the buttons that shows any error message set on the form.
+ */
+export function FormFooter({ children, submit }) {
+    return (_jsxs(Footer, { children: [_jsxs(Elements, { reverse: true, children: [_jsx(SubmitButton, { children: submit }), children] }), _jsx(FormMessage, {})] }));
+}

package/ui/form/FormFooter.tsx

@@ -0,0 +1,27 @@
+import type { ReactElement, ReactNode } from "react";
+import { Elements } from "../block/Elements.js";
+import { Footer } from "../block/Section.js";
+import { FormMessage } from "./FormMessage.js";
+import { SubmitButton } from "./SubmitButton.js";
+
+export interface FormFooterProps {
+	children?: ReactNode | undefined;
+	submit?: ReactNode | undefined;
+}
+
+/**
+ * Show a form footer with custom submit text.
+ * - Shows an elements row containing a submit button (and any additional buttons provided as `children`).
+ * - Shows a `<FormMessage>` beneath the buttons that shows any error message set on the form.
+ */
+export function FormFooter({ children, submit }: FormFooterProps): ReactElement {
+	return (
+		<Footer>
+			<Elements reverse>
+				<SubmitButton>{submit}</SubmitButton>
+				{children}
+			</Elements>
+			<FormMessage />
+		</Footer>
+	);
+}

package/ui/form/FormInput.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { InputProps } from "./Input.js";
+export interface FormInputProps extends InputProps {
+}
+/** Show a `SchemaInput` for each property in the current form. */
+export declare function FormInput({ name, ...props }: FormInputProps): ReactElement;
+/** Show a `SchemaInput` for a named property in the current form. */
+export declare function FormInputs(): ReactElement;

package/ui/form/FormInput.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { requireForm, useField } from "./FormContext.js";
+import { SchemaInput } from "./SchemaInput.js";
+/** Show a `SchemaInput` for each property in the current form. */
+export function FormInput({ name, ...props }) {
+    const field = useField(name);
+    return _jsx(SchemaInput, { ...field, ...props });
+}
+/** Show a `SchemaInput` for a named property in the current form. */
+export function FormInputs() {
+    return (_jsx(_Fragment, { children: Object.keys(requireForm().schema.props).map(name => (_jsx(FormInput, { name: name }, name))) }));
+}

package/ui/form/FormInput.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import { requireForm, useField } from "./FormContext.js";
+import type { InputProps } from "./Input.js";
+import { SchemaInput } from "./SchemaInput.js";
+
+export interface FormInputProps extends InputProps {}
+
+/** Show a `SchemaInput` for each property in the current form. */
+export function FormInput({ name, ...props }: FormInputProps): ReactElement {
+	const field = useField(name);
+	return <SchemaInput {...field} {...props} />;
+}
+
+/** Show a `SchemaInput` for a named property in the current form. */
+export function FormInputs(): ReactElement {
+	return (
+		<>
+			{Object.keys(requireForm().schema.props).map(name => (
+				<FormInput key={name} name={name} />
+			))}
+		</>
+	);
+}

package/ui/form/FormMessage.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import { type MessageProps } from "../notice/Message.js";
+/** Show the "main" message for the form as a `<Message>` */
+export declare function FormMessage(props: Omit<MessageProps, "children">): ReactElement | null;

package/ui/form/FormMessage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStore } from "../../react/useStore.js";
+import { Message } from "../notice/Message.js";
+import { requireForm } from "./FormContext.js";
+/** Show the "main" message for the form as a `<Message>` */
+export function FormMessage(props) {
+    const message = useStore(requireForm().messages).get("");
+    if (!message)
+        return null;
+    return (_jsx(Message, { status: "error", ...props, children: message }));
+}

package/ui/form/FormMessage.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import { useStore } from "../../react/useStore.js";
+import { Message, type MessageProps } from "../notice/Message.js";
+import { requireForm } from "./FormContext.js";
+
+/** Show the "main" message for the form as a `<Message>` */
+
+export function FormMessage(props: Omit<MessageProps, "children">): ReactElement | null {
+	const message = useStore(requireForm().messages).get("");
+	if (!message) return null;
+	return (
+		<Message status="error" {...props}>
+			{message}
+		</Message>
+	);
+}

package/ui/form/FormNotice.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import { type NoticeProps } from "../notice/Notice.js";
+/** Show the "main" message for the form as a `<Notice>` */
+export declare function FormNotice(props: Omit<NoticeProps, "children">): ReactElement | null;

package/ui/form/FormNotice.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStore } from "../../react/useStore.js";
+import { Notice } from "../notice/Notice.js";
+import { requireForm } from "./FormContext.js";
+/** Show the "main" message for the form as a `<Notice>` */
+export function FormNotice(props) {
+    const message = useStore(requireForm().messages).get("");
+    if (!message)
+        return null;
+    return (_jsx(Notice, { status: "error", ...props, children: message }));
+}

package/ui/form/FormNotice.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import { useStore } from "../../react/useStore.js";
+import { Notice, type NoticeProps } from "../notice/Notice.js";
+import { requireForm } from "./FormContext.js";
+
+/** Show the "main" message for the form as a `<Notice>` */
+
+export function FormNotice(props: Omit<NoticeProps, "children">): ReactElement | null {
+	const message = useStore(requireForm().messages).get("");
+	if (!message) return null;
+	return (
+		<Notice status="error" {...props}>
+			{message}
+		</Notice>
+	);
+}

package/ui/form/FormNotify.d.ts

@@ -0,0 +1,2 @@
+/** Publish the "main" message of a form as a global notice. */
+export declare function FormNotify(): void;

package/ui/form/FormNotify.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useStore } from "../../react/useStore.js";
+import { notifySuccess } from "../util/notice.js";
+import { requireForm } from "./FormContext.js";
+/** Publish the "main" message of a form as a global notice. */
+export function FormNotify() {
+    const message = useStore(requireForm().messages).get("");
+    useEffect(() => {
+        notifySuccess(message);
+    }, [message]);
+}

package/ui/form/FormNotify.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useStore } from "../../react/useStore.js";
+import { notifySuccess } from "../util/notice.js";
+import { requireForm } from "./FormContext.js";
+
+/** Publish the "main" message of a form as a global notice. */
+
+export function FormNotify(): void {
+	const message = useStore(requireForm().messages).get("");
+	useEffect(() => {
+		notifySuccess(message);
+	}, [message]);
+}

package/ui/form/FormStore.d.ts

@@ -0,0 +1,39 @@
+import type { DataSchema } from "../../schema/DataSchema.js";
+import { Schema } from "../../schema/Schema.js";
+import { DataStore } from "../../store/DataStore.js";
+import { DictionaryStore } from "../../store/DictionaryStore.js";
+import type { Data, DataKey } from "../../util/data.js";
+import type { ImmutableDictionary } from "../../util/dictionary.js";
+import type { Arguments } from "../../util/function.js";
+/** Store the current value of a form. */
+export declare class FormStore<T extends Data> extends DataStore<Partial<T>> implements AsyncDisposable {
+    /** Unique ID for the form. */
+    readonly id: string;
+    /** Key used for mounting the form */
+    readonly key: string;
+    /** Schema for the current form. */
+    readonly schema: DataSchema<T>;
+    /**
+     * Store named error messages for individual fields.
+     * - Throwing a string triggers changes in this.
+     * - Rows prefixed with `fieldName:` are shown on those specific fields.
+     * - See `splitMessages()` in `shelving` for more information.
+     */
+    readonly messages: DictionaryStore<string>;
+    /** Get the current valid value for this form (throws string for invalid values). */
+    get validated(): T;
+    get reason(): unknown;
+    set reason(reason: unknown);
+    constructor(schema: DataSchema<T>, partialData?: Partial<T>, messages?: ImmutableDictionary<string> | string | undefined);
+    /** Get a named schema for a field of this form. */
+    requireSchema<K extends DataKey<T>>(name: K): Schema<T[K]>;
+    /** Publish a value for a field of this form. */
+    publish<K extends DataKey<T>>(name: K, unsafeValue: T[K]): void;
+    /**
+     * Validate and submit the current values of the form.
+     *
+     * @param callback Optional callback that takes the current (validated) value of the form, processes it (possibly asynchronously) and returns any new values.
+     */
+    submit<A extends Arguments>(callback?: ((value: T, ...args: A) => void) | undefined, ...args: A): boolean | Promise<boolean>;
+    [Symbol.asyncDispose](): Promise<void>;
+}

package/ui/form/FormStore.js

@@ -0,0 +1,95 @@
+import { RequiredError } from "../../error/RequiredError.js";
+import { Schema } from "../../schema/Schema.js";
+import { DataStore } from "../../store/DataStore.js";
+import { DictionaryStore } from "../../store/DictionaryStore.js";
+import { awaitDispose } from "../../util/dispose.js";
+import { splitMessage } from "../../util/error.js";
+import { getRandomKey } from "../../util/random.js";
+/** Store the current value of a form. */
+export class FormStore extends DataStore {
+    /** Unique ID for the form. */
+    id = getRandomKey();
+    /** Key used for mounting the form */
+    key;
+    /** Schema for the current form. */
+    schema;
+    /**
+     * Store named error messages for individual fields.
+     * - Throwing a string triggers changes in this.
+     * - Rows prefixed with `fieldName:` are shown on those specific fields.
+     * - See `splitMessages()` in `shelving` for more information.
+     */
+    messages = new DictionaryStore();
+    /** Get the current valid value for this form (throws string for invalid values). */
+    get validated() {
+        return (this.value = this.schema.validate(this.value));
+    }
+    get reason() {
+        return super.reason;
+    }
+    set reason(reason) {
+        if (typeof reason === "string") {
+            this.messages.value = splitMessage(reason);
+            super.reason = undefined;
+        }
+        else {
+            super.reason = reason;
+        }
+    }
+    constructor(schema, partialData = {}, messages) {
+        super(partialData);
+        this.key = `${this.id}:${JSON.stringify(partialData)}`;
+        this.schema = schema;
+        if (messages)
+            this.messages.value = typeof messages === "string" ? splitMessage(messages) : messages;
+    }
+    /** Get a named schema for a field of this form. */
+    requireSchema(name) {
+        const schema = this.schema.props[name];
+        if (schema instanceof Schema)
+            return schema;
+        throw new RequiredError(`Schema "${name}" does not exist in form`, { received: name, caller: this.requireSchema });
+    }
+    /** Publish a value for a field of this form. */
+    publish(name, unsafeValue) {
+        this.abort();
+        // Clear main message and this named message.
+        this.messages.delete("");
+        this.messages.delete(name);
+        try {
+            const value = this.requireSchema(name).validate(unsafeValue);
+            this.set(name, value);
+        }
+        catch (thrown) {
+            if (typeof thrown === "string")
+                this.messages.set(name, thrown);
+            else
+                this.reason = thrown;
+            // Save the value _even if_ it didn't validate so it's persisted.
+            // Everything gets validated before submit.
+            this.set(name, unsafeValue);
+        }
+    }
+    /**
+     * Validate and submit the current values of the form.
+     *
+     * @param callback Optional callback that takes the current (validated) value of the form, processes it (possibly asynchronously) and returns any new values.
+     */
+    submit(callback, ...args) {
+        try {
+            const value = this.validated;
+            if (callback)
+                return this.run(callback, value, ...args);
+            return true;
+        }
+        catch (thrown) {
+            this.reason = thrown;
+            return false;
+        }
+    }
+    // Implement `AsyncDisposable`
+    async [Symbol.asyncDispose]() {
+        await awaitDispose(this.messages, // Dispose of messages store.
+        super[Symbol.asyncDispose]());
+    }
+}

package/ui/form/FormStore.tsx

@@ -0,0 +1,107 @@
+import { RequiredError } from "../../error/RequiredError.js";
+import type { DataSchema } from "../../schema/DataSchema.js";
+import { Schema } from "../../schema/Schema.js";
+import { DataStore } from "../../store/DataStore.js";
+import { DictionaryStore } from "../../store/DictionaryStore.js";
+import type { Data, DataKey } from "../../util/data.js";
+import type { ImmutableDictionary } from "../../util/dictionary.js";
+import { awaitDispose } from "../../util/dispose.js";
+import { splitMessage } from "../../util/error.js";
+import type { Arguments } from "../../util/function.js";
+import { getRandomKey } from "../../util/random.js";
+
+/** Store the current value of a form. */
+export class FormStore<T extends Data> extends DataStore<Partial<T>> implements AsyncDisposable {
+	/** Unique ID for the form. */
+	readonly id = getRandomKey();
+
+	/** Key used for mounting the form */
+	readonly key: string;
+
+	/** Schema for the current form. */
+	readonly schema: DataSchema<T>;
+
+	/**
+	 * Store named error messages for individual fields.
+	 * - Throwing a string triggers changes in this.
+	 * - Rows prefixed with `fieldName:` are shown on those specific fields.
+	 * - See `splitMessages()` in `shelving` for more information.
+	 */
+	readonly messages = new DictionaryStore<string>();
+
+	/** Get the current valid value for this form (throws string for invalid values). */
+	get validated(): T {
+		return (this.value = this.schema.validate(this.value));
+	}
+
+	override get reason(): unknown {
+		return super.reason;
+	}
+	override set reason(reason: unknown) {
+		if (typeof reason === "string") {
+			this.messages.value = splitMessage(reason);
+			super.reason = undefined;
+		} else {
+			super.reason = reason;
+		}
+	}
+
+	constructor(schema: DataSchema<T>, partialData: Partial<T> = {}, messages?: ImmutableDictionary<string> | string | undefined) {
+		super(partialData);
+		this.key = `${this.id}:${JSON.stringify(partialData)}`;
+		this.schema = schema;
+		if (messages) this.messages.value = typeof messages === "string" ? splitMessage(messages) : messages;
+	}
+
+	/** Get a named schema for a field of this form. */
+	requireSchema<K extends DataKey<T>>(name: K): Schema<T[K]> {
+		const schema = this.schema.props[name];
+		if (schema instanceof Schema) return schema as Schema<T[K]>;
+		throw new RequiredError(`Schema "${name}" does not exist in form`, { received: name, caller: this.requireSchema });
+	}
+
+	/** Publish a value for a field of this form. */
+	publish<K extends DataKey<T>>(name: K, unsafeValue: T[K]): void {
+		this.abort();
+
+		// Clear main message and this named message.
+		this.messages.delete("");
+		this.messages.delete(name);
+
+		try {
+			const value = this.requireSchema(name).validate(unsafeValue);
+			this.set(name, value);
+		} catch (thrown) {
+			if (typeof thrown === "string") this.messages.set(name, thrown);
+			else this.reason = thrown;
+
+			// Save the value _even if_ it didn't validate so it's persisted.
+			// Everything gets validated before submit.
+			this.set(name, unsafeValue);
+		}
+	}
+
+	/**
+	 * Validate and submit the current values of the form.
+	 *
+	 * @param callback Optional callback that takes the current (validated) value of the form, processes it (possibly asynchronously) and returns any new values.
+	 */
+	submit<A extends Arguments>(callback?: ((value: T, ...args: A) => void) | undefined, ...args: A): boolean | Promise<boolean> {
+		try {
+			const value = this.validated;
+			if (callback) return this.run(callback, value, ...args);
+			return true;
+		} catch (thrown) {
+			this.reason = thrown;
+			return false;
+		}
+	}
+
+	// Implement `AsyncDisposable`
+	override async [Symbol.asyncDispose]() {
+		await awaitDispose(
+			this.messages, // Dispose of messages store.
+			super[Symbol.asyncDispose](),
+		);
+	}
+}

package/ui/form/Input.d.ts

@@ -0,0 +1,47 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ClickableProps } from "./Clickable.js";
+export declare const RADIO_CLASS: string | undefined;
+export declare const CHECKBOX_CLASS: string | undefined;
+export declare const PLACEHOLDER_CLASS: string | undefined;
+export declare const INPUT_CLASS: string | undefined;
+export declare const TEXT_INPUT_CLASS: string;
+export declare const MULTILINE_TEXT_INPUT_CLASS: string;
+export declare const SELECT_INPUT_CLASS: string;
+export declare const EMPTY_OPTION_INPUT_CLASS: string | undefined;
+export declare const VALUE_OPTION_INPUT_CLASS: string | undefined;
+export declare const ELEMENTS_INPUT_CLASS: string;
+export declare const ELEMENTS_BUTTON_INPUT_CLASS: string;
+export declare const PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS: string;
+export declare const ELEMENTS_LABEL_INPUT_CLASS: string;
+export declare const PLACEHOLDER_ELEMENTS_LABEL_INPUT_CLASS: string;
+export declare const WRAPPER_INPUT_CLASS: string;
+/** Props all inputs allow. */
+export interface InputProps {
+    /** The `name=""` prop of the input. */
+    name: string;
+    /** Friendly title for the input. */
+    title?: string | undefined;
+    /** Placeholder for the input. Defaults to `title`. Set to `""` to show no placeholder. */
+    placeholder?: string | undefined;
+    /** Whether the input is required. */
+    required?: boolean | undefined;
+    /** Whether the input is disabled. */
+    disabled?: boolean | undefined;
+    /** Any error message for the input. */
+    message?: string | undefined;
+}
+/** "Value inputs" are inputs that generate a value, like `<input>` or `<textarea>` */
+export interface ValueInputProps<O, I = never> extends InputProps {
+    /** The current value of the input. */
+    value?: O | I | undefined;
+    /** Called when the value for the input changes, so you can make changes based on the new value (or `undefined` to set back to default). */
+    onValue(value: O | undefined): void;
+}
+/** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
+export declare function Input({ title, placeholder, disabled, href, onClick, target, download, children }: InputProps & ClickableProps): ReactElement;
+/** Input that is loading. */
+export declare const LOADING_INPUT: import("react/jsx-runtime").JSX.Element;
+/** Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side. */
+export declare function InputWrapper({ children }: {
+    children: ReactNode;
+}): ReactElement;

package/ui/form/Input.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ELEMENTS_CSS } from "../block/Elements.js";
+import { LOADING } from "../misc/Loading.js";
+import { getClass } from "../util/css.js";
+import { getClickable } from "./Clickable.js";
+import INPUT_CSS from "./Input.module.css";
+// Precomposed classes.
+export const RADIO_CLASS = INPUT_CSS.radio;
+export const CHECKBOX_CLASS = INPUT_CSS.radio;
+export const PLACEHOLDER_CLASS = INPUT_CSS.placeholder;
+export const INPUT_CLASS = INPUT_CSS.input;
+export const TEXT_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.text);
+export const MULTILINE_TEXT_INPUT_CLASS = getClass(TEXT_INPUT_CLASS, INPUT_CSS.multiline);
+export const SELECT_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.select);
+export const EMPTY_OPTION_INPUT_CLASS = INPUT_CSS.empty;
+export const VALUE_OPTION_INPUT_CLASS = INPUT_CSS.value;
+export const ELEMENTS_INPUT_CLASS = getClass(INPUT_CSS.input, ELEMENTS_CSS.elements, ELEMENTS_CSS.center);
+export const ELEMENTS_BUTTON_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.button, ELEMENTS_CSS.elements, ELEMENTS_CSS.center);
+export const PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS = getClass(ELEMENTS_BUTTON_INPUT_CLASS, INPUT_CSS.placeholder);
+export const ELEMENTS_LABEL_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.label, ELEMENTS_CSS.elements, ELEMENTS_CSS.left);
+export const PLACEHOLDER_ELEMENTS_LABEL_INPUT_CLASS = getClass(ELEMENTS_LABEL_INPUT_CLASS, INPUT_CSS.placeholder);
+export const WRAPPER_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.wrapper);
+/** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
+export function Input({ 
+// name,
+title, placeholder = title, 
+// message,
+disabled, href, onClick, target, download, children, }) {
+    return getClickable({
+        disabled,
+        href,
+        onClick,
+        target,
+        download,
+        children: children || placeholder,
+    }, getClass(INPUT_CSS.input, INPUT_CSS.button, children ? undefined : INPUT_CSS.placeholder));
+}
+/** Input that is loading. */
+export const LOADING_INPUT = _jsx("div", { className: ELEMENTS_INPUT_CLASS, children: LOADING });
+/** Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side. */
+export function InputWrapper({ children }) {
+    return _jsx("div", { className: WRAPPER_INPUT_CLASS, children: children });
+}