@tempots/beatui 0.82.1 → 0.83.0

package/dist/types/components/form/input/email-input.d.ts

@@ -1,2 +1,36 @@
 import { InputOptions } from './input-options';
+/**
+ * An email input component wrapping a native `<input type="email">` element.
+ *
+ * Renders a styled email field inside an {@link InputContainer} with an email icon
+ * displayed by default in the `before` slot. The autocomplete attribute defaults to
+ * `'email'` and the name defaults to `'email'` for browser autofill compatibility.
+ * Placeholder text is sourced from the BeatUI i18n system when not explicitly provided.
+ *
+ * @param options - Configuration options following the {@link InputOptions} pattern for string values
+ * @returns A styled email input element with an email icon, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { EmailInput } from '@tempots/beatui'
+ *
+ * const email = prop('')
+ * EmailInput({
+ *   value: email,
+ *   onChange: email.set,
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Override the default before icon
+ * EmailInput({
+ *   value: prop(''),
+ *   onChange: (v) => console.log('Email:', v),
+ *   before: Icon({ icon: 'custom-email-icon' }),
+ *   placeholder: 'user@example.com',
+ * })
+ * ```
+ */
 export declare const EmailInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/file-input.d.ts

@@ -2,10 +2,43 @@ import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { Merge } from '@tempots/std';
 import { FileInputMode } from './files-input';
+/**
+ * Options for the {@link FileInput} component.
+ * Extends standard `InputOptions` for a single file with file-specific settings.
+ */
 export type FileInputOptions = Merge<InputOptions<File | undefined>, {
+    /** Comma-separated list of accepted MIME types or file extensions (e.g., `'image/*,.pdf'`). */
     accept?: Value<string>;
+    /** Maximum allowed file size in bytes. Files exceeding this size are rejected. */
     maxFileSize?: Value<number>;
+    /**
+     * Display mode for the file input.
+     * @default 'default'
+     */
     mode?: Value<FileInputMode>;
+    /**
+     * Whether to show the selected file in a list below the drop zone.
+     * @default true
+     */
     showFileList?: Value<boolean>;
 }>;
+/**
+ * A single-file input component built on top of {@link FilesInput}.
+ *
+ * Provides a drag-and-drop zone and click-to-select interface for uploading
+ * a single file. Internally delegates to `FilesInput` with `maxFiles: 1`.
+ *
+ * @param options - Configuration options for the file input.
+ * @returns A renderable file input component.
+ *
+ * @example
+ * ```ts
+ * FileInput({
+ *   value: prop<File | undefined>(undefined),
+ *   accept: 'image/*',
+ *   maxFileSize: 5 * 1024 * 1024, // 5 MB
+ *   onChange: file => console.log('Selected:', file?.name),
+ * })
+ * ```
+ */
 export declare const FileInput: (options: FileInputOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/files-input.d.ts

@@ -1,12 +1,56 @@
 import { Value, TNode } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { Merge } from '@tempots/std';
+/**
+ * Display mode for file input components.
+ * - `'default'` - Full drop zone with file list below.
+ * - `'input'` - Inline input-style with compact file chips.
+ * - `'compact'` - Compact drop zone with inline file previews.
+ */
 export type FileInputMode = 'default' | 'input' | 'compact';
+/**
+ * Options for the {@link FilesInput} component.
+ * Extends standard `InputOptions` for a `File[]` value with file-specific settings.
+ */
 export type FilesInputOptions = Merge<InputOptions<File[]>, {
+    /** Comma-separated list of accepted MIME types or file extensions (e.g., `'image/*,.pdf'`). */
     accept?: Value<string>;
+    /** Maximum number of files that can be selected. */
     maxFiles?: Value<number>;
+    /** Maximum allowed file size in bytes. Files exceeding this size are filtered out. */
     maxFileSize?: Value<number>;
+    /**
+     * Display mode for the file input.
+     * @default 'default'
+     */
     mode?: Value<FileInputMode>;
+    /**
+     * Whether to show the selected files in a list below the drop zone.
+     * @default true
+     */
     showFileList?: Value<boolean>;
 }>;
+/**
+ * A multi-file input component with drag-and-drop support.
+ *
+ * Supports multiple display modes (`default`, `input`, `compact`), file type
+ * filtering, file size limits, thumbnail previews for images, and per-file
+ * removal. Integrates with the i18n system for localized messages.
+ *
+ * @param options - Configuration options for the multi-file input.
+ * @param children - Additional child nodes to render inside the container.
+ * @returns A renderable file input component.
+ *
+ * @example
+ * ```ts
+ * FilesInput({
+ *   value: prop<File[]>([]),
+ *   accept: 'image/*,.pdf',
+ *   maxFiles: 5,
+ *   maxFileSize: 10 * 1024 * 1024, // 10 MB
+ *   mode: 'default',
+ *   onChange: files => console.log('Files:', files.length),
+ * })
+ * ```
+ */
 export declare const FilesInput: (options: FilesInputOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/index.d.ts

@@ -15,6 +15,7 @@ export * from './editable-text';
 export * from './email-input';
 export * from './file-input';
 export * from './files-input';
+export * from './input-adornment';
 export * from './input-container';
 export * from './input-options';
 export * from './input-wrapper';
@@ -37,6 +38,7 @@ export * from './nullable-bigint-input';
 export * from './password-input';
 export * from './segmented-input';
 export * from './switch';
+export * from './tag-input';
 export * from './tags-input';
 export * from './text-area';
 export * from './text-input';
@@ -44,7 +46,10 @@ export * from './uuid-input';
 export * from './nullable-uuid-input';
 export * from './rating-input';
 export * from './nullable-rating-input';
+export * from './radio-group';
 export * from './slider-input';
+export * from './advanced-slider';
+export * from './otp-input';
 export * from './plain-date-input';
 export * from './nullable-plain-date-input';
 export * from './plain-time-input';

package/dist/types/components/form/input/input-adornment.d.ts

@@ -0,0 +1,38 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+/**
+ * Configuration options for {@link InputAdornment}.
+ */
+export type InputAdornmentOptions = {
+    /**
+     * The size of the adornment, controlling padding and font size.
+     * @default 'md'
+     */
+    size?: Value<ControlSize>;
+    /**
+     * When true, applies a subtle background fill and stretches to full height.
+     * @default false
+     */
+    filled?: Value<boolean>;
+};
+/**
+ * Renders a styled adornment for use in the `before` or `after` slots of {@link InputContainer}.
+ *
+ * Provides consistent padding, dimmed text color, and an optional background fill.
+ * Useful for prefixes (e.g., "$", "https://"), suffixes (e.g., "kg", ".com"),
+ * or any small decorative text around an input.
+ *
+ * @param options - Adornment configuration
+ * @param children - Content to display inside the adornment
+ * @returns A span element with adornment styling
+ *
+ * @example
+ * ```ts
+ * InputContainer({
+ *   input: html.input(attr.type('text')),
+ *   before: InputAdornment({ filled: true }, '$'),
+ *   after: InputAdornment({}, '.00'),
+ * })
+ * ```
+ */
+export declare function InputAdornment(options: InputAdornmentOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/input-container.d.ts

@@ -1,7 +1,51 @@
 import { TNode, Value } from '@tempots/dom';
 import { ControlSize } from '../../theme';
 import { ThemeColorName } from '../../../tokens';
+/**
+ * Generates CSS class names for the input element wrapper based on size and container type.
+ *
+ * @param baseContainer - Whether to use base container styles (skips padding/text size)
+ * @param size - The control size ('xs' | 'sm' | 'md' | 'lg' | 'xl')
+ * @returns Space-separated string of CSS class names
+ */
 export declare function generateInputContainerInputClasses(baseContainer: boolean, size: ControlSize): string;
+/**
+ * Wraps an input element with the standard BeatUI input container styling.
+ *
+ * This component provides:
+ * - Consistent border, background, and focus styles via `bc-input-container`
+ * - Error state styling when `hasError` is true
+ * - Optional `before` and `after` slots for icons, buttons, or other decorations
+ * - Click-to-focus behavior (clicking the container focuses the input)
+ * - Responsive sizing based on the `size` prop
+ *
+ * Used by most form inputs (TextInput, NumberInput, DateInput, etc.) to ensure
+ * visual consistency across the component library.
+ *
+ * @param options - Container configuration options
+ * @param options.input - The actual input element (or custom control) to wrap
+ * @param options.disabled - Whether the input is disabled
+ * @param options.hasError - Whether to apply error styling
+ * @param options.before - Node to render before the input (e.g., icon)
+ * @param options.after - Node to render after the input (e.g., clear button)
+ * @param options.baseContainer - Use minimal "base" container styles instead of full styling
+ * @param options.focusableSelector - CSS selector to find the focusable element (default: 'input, select, textarea')
+ * @param options.growInput - Whether the input should grow to fill available space (default: true)
+ * @param options.size - Visual size of the control (default: 'md')
+ * @param children - Additional child nodes to append to the container
+ * @returns A div element with the input container structure
+ *
+ * @example
+ * ```ts
+ * InputContainer({
+ *   input: html.input(attr.type('text')),
+ *   before: InputIcon({ icon: 'search' }),
+ *   after: html.button('Clear'),
+ *   hasError: prop(false),
+ *   size: 'md'
+ * })
+ * ```
+ */
 export declare const InputContainer: ({ baseContainer, disabled, input, before, after, hasError, focusableSelector, growInput, size, }: {
     disabled?: Value<boolean>;
     input: TNode;
@@ -13,6 +57,27 @@ export declare const InputContainer: ({ baseContainer, disabled, input, before,
     baseContainer?: Value<boolean>;
     size?: Value<ControlSize>;
 }, ...children: TNode[]) => import("@tempots/dom").Renderable;
+/**
+ * Renders an icon with proper styling for use within an input container.
+ *
+ * This is a convenience component that wraps the `Icon` component with
+ * the `bc-input-container__icon` class, which provides appropriate spacing
+ * and sizing when placed in the `before` or `after` slots of `InputContainer`.
+ *
+ * @param options - Icon configuration
+ * @param options.icon - Icon name or reactive signal
+ * @param options.size - Size of the icon, aligned with input size (default: 'md')
+ * @param options.color - Theme color for the icon (default: 'neutral')
+ * @returns A span element containing the styled icon
+ *
+ * @example
+ * ```ts
+ * InputContainer({
+ *   input: html.input(),
+ *   before: InputIcon({ icon: 'search', color: 'primary' })
+ * })
+ * ```
+ */
 export declare function InputIcon({ icon, size, color, }: {
     icon: Value<string>;
     size?: Value<ControlSize>;

package/dist/types/components/form/input/input-options.d.ts

@@ -1,16 +1,36 @@
 import { TNode, Value } from '@tempots/dom';
 import { ControlSize } from '../../theme';
 import { Merge } from '@tempots/std';
+/**
+ * Common options shared across all input components in BeatUI.
+ *
+ * This type defines the foundational properties that every input component
+ * accepts, such as disabled state, size, placeholder text, and accessibility
+ * attributes. It serves as the base for more specific input option types.
+ *
+ * All properties accept `Value<T>`, meaning they can be either static values
+ * or reactive signals from Tempo's `prop()` function.
+ */
 export type CommonInputOptions = {
+    /** HTML autocomplete attribute for browser autofill suggestions */
     autocomplete?: Value<string>;
+    /** Whether the input should automatically receive focus when mounted */
     autofocus?: Value<boolean>;
+    /** Additional CSS classes to apply to the input element */
     class?: Value<string>;
+    /** Whether the input is disabled and cannot be interacted with */
     disabled?: Value<boolean>;
+    /** Whether the input has a validation error (applies error styling) */
     hasError?: Value<boolean>;
+    /** HTML name attribute, used for form submission */
     name?: Value<string>;
+    /** Placeholder text displayed when the input is empty */
     placeholder?: Value<string>;
+    /** Unique HTML id attribute for the input element */
     id?: Value<string>;
+    /** Whether the input is required for form validation */
     required?: Value<boolean>;
+    /** Tab index for keyboard navigation order */
     tabIndex?: Value<number>;
     /**
      * Visual size of the control, aligned with Button sizes.
@@ -18,12 +38,62 @@ export type CommonInputOptions = {
      */
     size?: Value<ControlSize>;
 };
+/**
+ * Generic input options that extend `CommonInputOptions` with value handling.
+ *
+ * This type is used by most form input components (TextInput, NumberInput, etc.)
+ * to provide both common input properties and value-specific callbacks.
+ *
+ * @template V - The type of the input's value (e.g., string, number, Date)
+ *
+ * @example
+ * ```ts
+ * const options: InputOptions<string> = {
+ *   value: prop('initial'),
+ *   onChange: (val) => console.log('Changed:', val),
+ *   placeholder: 'Enter text...',
+ *   disabled: false,
+ *   size: 'md'
+ * }
+ * ```
+ */
 export type InputOptions<V> = Merge<CommonInputOptions, {
+    /** The current value of the input (can be static or reactive signal) */
     value: Value<V>;
+    /** Optional node to render before the input element (e.g., icon) */
     before?: TNode;
+    /** Optional node to render after the input element (e.g., button) */
     after?: TNode;
+    /** Callback invoked when the value changes (typically on blur or enter) */
     onChange?: (value: V) => void;
+    /** Callback invoked on every input event (real-time changes) */
     onInput?: (value: V) => void;
+    /** Callback invoked when the input loses focus */
     onBlur?: () => void;
 }>;
+/**
+ * Helper function that applies common HTML attributes to an input element.
+ *
+ * This utility converts `CommonInputOptions` into Tempo DOM attribute nodes,
+ * handling standard HTML attributes and ARIA attributes for accessibility.
+ * It's used internally by all input components to ensure consistent attribute
+ * application.
+ *
+ * Note: The `name` attribute falls back to `id` if not explicitly provided.
+ *
+ * @param options - Common input options to convert to attributes
+ * @returns A Fragment containing all applicable attribute nodes
+ *
+ * @example
+ * ```ts
+ * html.input(
+ *   CommonInputAttributes({
+ *     id: 'email',
+ *     placeholder: 'Enter email',
+ *     required: true,
+ *     hasError: prop(false)
+ *   })
+ * )
+ * ```
+ */
 export declare const CommonInputAttributes: ({ autocomplete, autofocus, class: cls, disabled, name, placeholder, id, required, tabIndex, hasError, }: CommonInputOptions) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;

package/dist/types/components/form/input/input-wrapper.d.ts

@@ -1,19 +1,97 @@
 import { TNode, Value } from '@tempots/dom';
+/**
+ * A visual indicator (asterisk) appended to labels for required fields.
+ *
+ * Renders as a red asterisk (" *") with the `bc-input-wrapper__required` class.
+ */
 export declare const RequiredSymbol: import("@tempots/dom").Renderable;
+/**
+ * Layout modes for the input wrapper structure.
+ *
+ * - `'vertical'` - Label above input (default)
+ * - `'horizontal'` - Label and input side-by-side with flexible label width
+ * - `'horizontal-label-right'` - Label on the right side of the input
+ * - `'horizontal-fixed'` - Label on the left with fixed width (use `labelWidth` option)
+ */
 export type InputWrapperLayout = 'vertical' | 'horizontal' | 'horizontal-label-right' | 'horizontal-fixed';
+/**
+ * Configuration options for the `InputWrapper` component.
+ *
+ * This type defines all the options for wrapping an input with label, description,
+ * error message, and contextual information. It's used by form controls and
+ * standalone inputs to provide consistent labeling and error display.
+ */
 export type InputWrapperOptions = {
+    /** Whether the wrapper should take full width of its container */
     fullWidth?: Value<boolean>;
+    /** Label text or node to display above/beside the input */
     label?: TNode;
+    /** Additional content to render after the label (e.g., badges, tooltips) */
     labelChildren?: TNode;
+    /** Contextual information displayed in the header area (e.g., character count) */
     context?: TNode;
+    /** Helpful description text displayed below the input (or under label in horizontal layouts) */
     description?: TNode;
+    /** Error message to display when the input has a validation error */
     error?: TNode;
+    /** Whether the input is required (adds asterisk to label) */
     required?: Value<boolean>;
+    /** The actual input element or control to wrap */
     content: TNode;
+    /** ID of the input element for the label's `for` attribute */
     labelFor?: Value<string>;
+    /** Whether the input has a validation error (applies error styling) */
     hasError?: Value<boolean>;
+    /** Whether the input is disabled (applies disabled styling to label) */
     disabled?: Value<boolean>;
+    /** Layout mode for label and input positioning */
     layout?: Value<InputWrapperLayout>;
+    /** CSS width value for label in 'horizontal-fixed' layout (e.g., '120px', '10rem') */
     labelWidth?: Value<string>;
 };
+/**
+ * Wraps an input element with label, description, error message, and accessibility attributes.
+ *
+ * This is the primary wrapper component used by all form controls in BeatUI. It provides:
+ * - Label with optional required indicator (asterisk)
+ * - Contextual information (e.g., character count)
+ * - Description text for additional guidance
+ * - Error message display with ARIA live region announcements
+ * - Proper accessibility attributes (aria-describedby, aria-invalid, role="alert")
+ * - Multiple layout modes (vertical, horizontal, horizontal-label-right, horizontal-fixed)
+ * - Automatic ID generation for linking label, description, and error to the input
+ *
+ * The component handles state styling (error, disabled) and ensures screen readers
+ * receive appropriate context through ARIA attributes.
+ *
+ * @param options - Configuration options for the wrapper
+ * @param options.content - The input element or control to wrap (required)
+ * @param options.label - Label text or node
+ * @param options.description - Help text displayed below the input
+ * @param options.error - Error message (automatically sets hasError to true)
+ * @param options.required - Whether to show the required asterisk
+ * @param options.labelFor - ID of the input element
+ * @param options.hasError - Whether to apply error styling
+ * @param options.disabled - Whether to apply disabled styling
+ * @param options.layout - Layout mode (default: 'vertical')
+ * @param options.labelWidth - Fixed width for label in 'horizontal-fixed' layout
+ * @param options.context - Contextual info in the header (e.g., character count)
+ * @param options.labelChildren - Additional content after the label
+ * @param options.fullWidth - Whether to take full container width
+ * @param children - Additional nodes to append to the wrapper
+ * @returns A div element with the complete input wrapper structure
+ *
+ * @example
+ * ```ts
+ * InputWrapper({
+ *   label: 'Email',
+ *   description: 'We will never share your email',
+ *   required: true,
+ *   labelFor: 'email-input',
+ *   content: html.input(attr.type('email'), attr.id('email-input')),
+ *   error: prop<string | undefined>(undefined),
+ *   layout: 'vertical'
+ * })
+ * ```
+ */
 export declare const InputWrapper: ({ fullWidth, required, label, labelChildren, context, description, content, error, labelFor, hasError, disabled, layout, labelWidth, }: InputWrapperOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/instant-input.d.ts

@@ -1,3 +1,21 @@
 import { InputOptions } from './input-options';
 import { Instant } from '../../../temporal';
+/**
+ * An input component for `Temporal.Instant` values.
+ *
+ * Renders a `datetime-local` HTML input. Converts the instant to a local
+ * date-time string for display and parses the input back to an `Instant`
+ * via ISO string conversion. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for an `Instant` value.
+ * @returns A renderable instant input component.
+ *
+ * @example
+ * ```ts
+ * InstantInput({
+ *   value: prop(Temporal.Now.instant()),
+ *   onChange: instant => console.log('Instant:', instant.toString()),
+ * })
+ * ```
+ */
 export declare const InstantInput: (options: InputOptions<Instant>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/lazy-native-select.d.ts

@@ -1,8 +1,21 @@
 import { Signal, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { SelectOption } from './option';
+/**
+ * Options for the {@link LazyNativeSelect} component.
+ * Extends standard `InputOptions` with async option loading.
+ *
+ * @typeParam T - The type of option values.
+ * @typeParam R - The type of the request signal that triggers loading.
+ */
 export type LazyNativeSelectOptions<T, R> = InputOptions<T> & {
+    /** A reactive signal whose changes trigger option reloading. */
     request: Signal<R>;
+    /**
+     * Async function that loads options. Receives the current request value
+     * and an abort signal for cancellation. Can return either `SelectOption<T>`
+     * objects or simplified `{ id, label }` objects.
+     */
     load: (options: {
         request: R;
         abortSignal: AbortSignal;
@@ -10,7 +23,37 @@ export type LazyNativeSelectOptions<T, R> = InputOptions<T> & {
         id: T;
         label: string;
     })[]>;
+    /** Label for the initial unselected/placeholder option. */
     unselectedLabel?: Value<string>;
+    /**
+     * Custom equality function for comparing option values.
+     * @default (a, b) => a === b
+     */
     equality?: (a: T, b: T) => boolean;
 };
+/**
+ * A native select input that loads its options asynchronously.
+ *
+ * Shows a loading spinner while options are being fetched, then renders a
+ * standard {@link NativeSelect} once loaded. Options are reloaded whenever
+ * the `request` signal changes.
+ *
+ * @typeParam T - The type of option values.
+ * @typeParam R - The type of the request signal that triggers loading.
+ * @param options - Configuration options for the lazy native select.
+ * @returns A renderable lazy native select component.
+ *
+ * @example
+ * ```ts
+ * LazyNativeSelect({
+ *   value: prop<string>(''),
+ *   request: prop({ search: '' }),
+ *   load: async ({ request, abortSignal }) => {
+ *     const response = await fetch(`/api/options?q=${request.search}`, { signal: abortSignal })
+ *     return response.json()
+ *   },
+ *   onChange: value => console.log('Selected:', value),
+ * })
+ * ```
+ */
 export declare const LazyNativeSelect: <T, R>(options: LazyNativeSelectOptions<T, R>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/list-input.d.ts

@@ -1,14 +1,64 @@
 import { ElementPosition, Signal, TNode } from '@tempots/dom';
 import { ArrayController, Controller } from '../controller/controller';
+/**
+ * Payload passed to the element render function of a {@link ListInput}.
+ * Provides the controller, item data, position information, and
+ * actions for removing and reordering items.
+ *
+ * @typeParam T - The type of individual list items.
+ */
 export type ListInputPayload<T> = {
+    /** The array controller managing the entire list. */
     list: ArrayController<T[]>;
+    /** The controller for this specific item. */
     item: Controller<T>;
+    /** The element's position information (index, isFirst, isLast, etc.). */
     position: ElementPosition;
+    /** Removes this item from the list. */
     remove: () => void;
+    /** Moves this item in the specified direction. */
     move: (direction: MoveDirection) => void;
+    /** Returns a reactive signal indicating whether the item can be moved in the given direction. */
     canMove: (direction: MovableDirection) => Signal<boolean>;
+    /** Returns a reactive signal indicating whether the item cannot be moved in the given direction. */
     cannotMove: (direction: MovableDirection) => Signal<boolean>;
 };
+/**
+ * Direction in which a list item can be moved.
+ */
 export type MoveDirection = 'up' | 'down' | 'first' | 'last';
+/**
+ * Directions that can be checked for movability (only up and down, since
+ * first/last are always possible when movement in that direction is possible).
+ */
 export type MovableDirection = 'up' | 'down';
+/**
+ * A dynamic list input component that renders a repeating set of items from an
+ * array controller. Each item receives a payload with actions for removal and
+ * reordering (move up, down, first, last).
+ *
+ * @typeParam T - The type of individual list items.
+ * @param controller - The array controller managing the list state.
+ * @param element - Render function called for each list item. Receives a
+ *   {@link ListInputPayload} with the item controller and action callbacks.
+ * @param separator - Optional render function for separators between items.
+ * @returns A renderable list of items with management actions.
+ *
+ * @example
+ * ```ts
+ * ListInput(
+ *   myArrayController,
+ *   ({ item, remove, move, canMove }) =>
+ *     html.div(
+ *       TextInput({ value: item.signal, onChange: item.set }),
+ *       html.button(on.click(remove), 'Remove'),
+ *       html.button(
+ *         attr.disabled(canMove('up').map(v => !v)),
+ *         on.click(() => move('up')),
+ *         'Move Up'
+ *       ),
+ *     )
+ * )
+ * ```
+ */
 export declare function ListInput<T>(controller: ArrayController<T[]>, element: (payload: ListInputPayload<T>) => TNode, separator?: (pos: ElementPosition) => TNode): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;