@tempots/beatui 0.82.1 → 0.83.0

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

@@ -1,9 +1,55 @@
 import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { IconSize } from '../../theme';
+/**
+ * Configuration options for the {@link CheckboxInput} component.
+ *
+ * Extends {@link InputOptions} for boolean values with additional properties to
+ * customize the checked/unchecked icons and their size.
+ */
 export type CheckboxInputOptions = InputOptions<boolean> & {
+    /** Icon name to display when the checkbox is checked. @default 'akar-icons/check-box-fill' */
     checkedIcon?: Value<string | undefined>;
+    /** Icon name to display when the checkbox is unchecked. @default 'akar-icons/box' */
     uncheckedIcon?: Value<string | undefined>;
+    /** Size of the checkbox icon. @default 'lg' */
     iconSize?: Value<IconSize>;
 };
+/**
+ * A custom checkbox input component with icon-based checked/unchecked states.
+ *
+ * Renders a styled checkbox using icons rather than the native checkbox element,
+ * wrapped in an {@link InputContainer}. Supports full keyboard interaction (Space
+ * and Enter to toggle), ARIA `role="checkbox"` semantics, and an optional text
+ * label rendered from the `placeholder` property. When `placeholder` is set,
+ * clicking the label also toggles the checkbox.
+ *
+ * @param options - Configuration options for the checkbox, including custom icons and icon size
+ * @returns A styled checkbox element with optional label, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { CheckboxInput } from '@tempots/beatui'
+ *
+ * const agreed = prop(false)
+ * CheckboxInput({
+ *   value: agreed,
+ *   onChange: agreed.set,
+ *   placeholder: 'I agree to the terms and conditions',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With custom icons and size
+ * CheckboxInput({
+ *   value: prop(true),
+ *   onChange: (v) => console.log('Checked:', v),
+ *   checkedIcon: 'mdi:checkbox-marked',
+ *   uncheckedIcon: 'mdi:checkbox-blank-outline',
+ *   iconSize: 'xl',
+ * })
+ * ```
+ */
 export declare const CheckboxInput: (options: CheckboxInputOptions) => import("@tempots/dom").Renderable;

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

@@ -1,6 +1,48 @@
 import { Renderable, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
+/**
+ * Configuration options for the {@link ColorInput} component.
+ *
+ * Extends {@link InputOptions} for string color values with an optional size
+ * property for the color swatch preview.
+ */
 export type ColorInputOptions = InputOptions<string> & {
+    /** Size in pixels of the color swatch preview (square). @default 32 */
     size?: Value<number>;
 };
+/**
+ * A color input component combining a text field with a clickable color swatch preview.
+ *
+ * Renders a styled text input for typing color values alongside a {@link Swatch} component
+ * that displays the current color and opens the browser's native color picker on click.
+ * The text input and swatch stay synchronized through the shared `value` signal. Accepts
+ * any valid CSS color string.
+ *
+ * @param options - Configuration options for the color input
+ * @returns A styled color input element with swatch preview, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { ColorInput } from '@tempots/beatui'
+ *
+ * const color = prop('#ff6600')
+ * ColorInput({
+ *   value: color,
+ *   onChange: color.set,
+ *   placeholder: '#rrggbb',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With before icon and error state
+ * ColorInput({
+ *   value: prop('#000000'),
+ *   onInput: (v) => console.log('Picking:', v),
+ *   before: Icon({ icon: 'line-md:paint-drop' }),
+ *   hasError: prop(false),
+ * })
+ * ```
+ */
 export declare function ColorInput(options: ColorInputOptions): Renderable;

package/dist/types/components/form/input/color-swatch-input.d.ts

@@ -1,9 +1,62 @@
 import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
+/**
+ * Configuration options for the {@link ColorSwatchInput} component.
+ *
+ * Extends {@link InputOptions} for string color values with properties to control
+ * the blob preview size, alpha channel support, value display, and output color format.
+ */
 export type ColorSwatchInputOptions = InputOptions<string> & {
+    /** When true, renders the formatted color value text next to the blob preview. @default false */
     displayValue?: Value<boolean>;
+    /** Size in pixels of the blob preview (square). @default 32 */
     size?: Value<number>;
+    /** Enable alpha channel support with a small opacity slider. @default false */
     withAlpha?: Value<boolean>;
+    /** Color space format for the displayed text label and emitted value. @default 'rgb' for display, 'hex' for emitted values */
     colorTextFormat?: Value<'hex' | 'rgb' | 'hsl' | 'hwb' | 'oklch'>;
 };
+/**
+ * A visually rich color input component displaying a unique SVG blob swatch for each color.
+ *
+ * Renders an organic blob-shaped color preview (deterministic per RGB value) with a hidden
+ * native color picker overlay, wrapped in an {@link InputContainer}. The blob shape changes
+ * dynamically as the color changes, providing a unique visual identity for each color.
+ * Supports optional alpha channel control via a range slider and displays the formatted
+ * color value as text when `displayValue` is enabled.
+ *
+ * The component accepts colors in any CSS format and can emit values in hex, rgb, hsl,
+ * hwb, or oklch format based on the `colorTextFormat` option. The alpha slider preserves
+ * its state across color changes.
+ *
+ * @param options - Configuration options for the color swatch input
+ * @returns A styled color swatch input with blob preview, optional alpha slider, and value display
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { ColorSwatchInput } from '@tempots/beatui'
+ *
+ * const color = prop('#3498db')
+ * ColorSwatchInput({
+ *   value: color,
+ *   onChange: color.set,
+ *   displayValue: true,
+ *   size: 40,
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With alpha channel and HSL format
+ * ColorSwatchInput({
+ *   value: prop('hsl(200, 70%, 50%)'),
+ *   onChange: (v) => console.log('Color:', v),
+ *   withAlpha: true,
+ *   displayValue: true,
+ *   colorTextFormat: 'hsl',
+ *   size: 48,
+ * })
+ * ```
+ */
 export declare const ColorSwatchInput: (options: ColorSwatchInputOptions) => import("@tempots/dom").Renderable;

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

@@ -2,15 +2,88 @@ import { Merge, Renderable, Signal, TNode, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { BaseControllerOptions, ControllerOptions } from '../control';
 import { DropdownOption } from './option';
+/**
+ * Configuration options for the {@link ComboboxInput} component.
+ *
+ * Extends {@link InputOptions} with combobox-specific properties including an
+ * asynchronous option loader, custom renderers for options and the selected value,
+ * and debounce timing for search queries.
+ *
+ * @template T - The type of the selectable option values
+ */
 export type ComboboxOptions<T> = Merge<InputOptions<T>, {
+    /** Async function to fetch options dynamically based on the current search text */
     loadOptions: (search: string) => Promise<DropdownOption<T>[]>;
+    /** Render function for displaying each option in the dropdown list */
     renderOption: (value: Signal<T>) => TNode;
+    /** Optional render function for displaying the selected value in the closed trigger. Falls back to `renderOption`. */
     renderValue?: (value: Signal<T>) => TNode;
+    /** Custom equality function for comparing option values. @default strict equality (===) */
     equality?: (a: T, b: T) => boolean;
+    /** Placeholder text displayed when no option is selected */
     placeholder?: Value<string>;
+    /** Placeholder text for the search input inside the dropdown. @default 'Search' */
     searchPlaceholder?: Value<string>;
+    /** Debounce delay in milliseconds for the search query. @default 150 */
     debounceMs?: number;
 }>;
+/**
+ * A searchable combobox input component with asynchronous option loading and custom rendering.
+ *
+ * Renders a styled dropdown trigger inside an {@link InputContainer} that opens a
+ * floating listbox with a search input at the top. Options are loaded asynchronously
+ * via the `loadOptions` callback, which is debounced and triggered whenever the search
+ * text changes. Each option is rendered using the custom `renderOption` function, while
+ * the closed trigger shows the selected value via `renderValue` (or `renderOption` as
+ * fallback). A loading spinner appears while options are being fetched.
+ *
+ * Keyboard navigation supports Arrow Up/Down, Enter to select, and Escape to close.
+ * The search input receives focus automatically when the dropdown opens.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Configuration options for the combobox
+ * @returns A styled combobox input element with search and async option loading
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { ComboboxInput, Option } from '@tempots/beatui'
+ *
+ * const user = prop<User | null>(null)
+ * ComboboxInput({
+ *   value: user,
+ *   onChange: user.set,
+ *   loadOptions: async (search) => {
+ *     const users = await fetchUsers(search)
+ *     return users.map(u => Option.value(u, u.name))
+ *   },
+ *   renderOption: (userSignal) => html.span(userSignal.$.name),
+ *   placeholder: 'Search for a user...',
+ *   debounceMs: 300,
+ * })
+ * ```
+ */
 export declare const ComboboxInput: <T>(options: ComboboxOptions<T>) => Renderable;
+/**
+ * A combobox input wired to a form controller for managed form state.
+ *
+ * Connects a {@link ComboboxInput} to a form {@link Controller}, automatically
+ * mapping the controller's signal to the combobox value and routing change/blur
+ * events through the controller's validation pipeline.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Controller options including the form controller and combobox configuration
+ * @returns A controller-bound combobox input
+ */
 export declare const BaseComboboxControl: <T>(options: BaseControllerOptions<T, ComboboxOptions<T>>) => Renderable;
+/**
+ * A complete combobox form control with label, description, error message, and validation.
+ *
+ * Combines {@link BaseComboboxControl} with an {@link InputWrapper} to provide a
+ * full-featured form field with label, optional description, and validation error display.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Controller options including wrapper label/description and combobox configuration
+ * @returns A combobox input wrapped in a form field with label and error display
+ */
 export declare const ComboboxControl: <T>(options: ControllerOptions<T, ComboboxOptions<T>>) => Renderable;

package/dist/types/components/form/input/combobox-tags-input.d.ts

@@ -2,15 +2,69 @@ import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { DropdownOption } from './option';
 import { BaseControllerOptions, ControllerOptions } from '../control';
+/**
+ * Options for the {@link ComboboxTagsInput} component.
+ * Combines tag selection with a searchable dropdown.
+ *
+ * @typeParam T - The type of tag values.
+ */
 export type ComboboxTagsOptions<T> = {
+    /** The available dropdown options to choose from. */
     options: Value<DropdownOption<T>[]>;
+    /**
+     * Custom equality function for comparing option values.
+     * @default (a, b) => a === b
+     */
     equality?: (a: T, b: T) => boolean;
+    /** Placeholder text shown when no tags are selected. */
     placeholder?: Value<string>;
+    /** Placeholder text for the search input field. */
     searchPlaceholder?: Value<string>;
+    /** Custom filter function for matching options against the search query. */
     filter?: (q: string, opt: {
         label: string;
     }) => boolean;
 } & InputOptions<T[]>;
+/**
+ * A multi-select tag input with an integrated searchable dropdown.
+ *
+ * Selected values are displayed as removable chips. An always-visible search
+ * input filters the dropdown options. Clicking a dropdown item toggles
+ * its selection. Supports grouped options and custom filtering.
+ *
+ * @typeParam T - The type of tag values.
+ * @param options - Configuration options for the combobox tags input.
+ * @returns A renderable combobox tags input component.
+ *
+ * @example
+ * ```ts
+ * ComboboxTagsInput({
+ *   value: prop<string[]>([]),
+ *   options: [
+ *     { type: 'value', value: 'react', label: 'React' },
+ *     { type: 'value', value: 'vue', label: 'Vue' },
+ *     { type: 'value', value: 'angular', label: 'Angular' },
+ *   ],
+ *   placeholder: 'Select frameworks...',
+ *   searchPlaceholder: 'Search...',
+ *   onChange: tags => console.log('Selected:', tags),
+ * })
+ * ```
+ */
 export declare function ComboboxTagsInput<T>(options: ComboboxTagsOptions<T>): import("@tempots/dom").Renderable;
+/**
+ * A base form control wrapper for {@link ComboboxTagsInput} using a raw controller.
+ *
+ * @typeParam T - The type of tag values.
+ * @param options - Base controller options for the combobox tags control.
+ * @returns A renderable form control component.
+ */
 export declare function BaseComboboxTagsControl<T>(options: BaseControllerOptions<T[], ComboboxTagsOptions<T>>): any;
+/**
+ * A full form control wrapper for {@link ComboboxTagsInput} with label, error, and description support.
+ *
+ * @typeParam T - The type of tag values.
+ * @param options - Controller options for the combobox tags control.
+ * @returns A renderable form control component with wrapper.
+ */
 export declare function ComboboxTagsControl<T>(options: ControllerOptions<T[], ComboboxTagsOptions<T>>): import("@tempots/dom").Renderable;

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

@@ -1,2 +1,35 @@
 import { InputOptions } from './input-options';
+/**
+ * A date input component wrapping a native `<input type="date">` element.
+ *
+ * Renders a styled date picker inside an {@link InputContainer} using the browser's
+ * native date selection UI. The value is handled as a JavaScript `Date` object and
+ * automatically converted to/from the native input's date representation.
+ *
+ * @param options - Configuration options following the {@link InputOptions} pattern for Date values
+ * @returns A styled date input element wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateInput } from '@tempots/beatui'
+ *
+ * const birthday = prop(new Date('1990-01-15'))
+ * DateInput({
+ *   value: birthday,
+ *   onChange: birthday.set,
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With error state and disabled
+ * DateInput({
+ *   value: prop(new Date()),
+ *   onChange: (d) => console.log('Selected:', d),
+ *   hasError: prop(true),
+ *   disabled: prop(false),
+ * })
+ * ```
+ */
 export declare const DateInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/date-time-input.d.ts

@@ -1,2 +1,36 @@
 import { InputOptions } from './input-options';
+/**
+ * A date and time input component wrapping a native `<input type="datetime-local">` element.
+ *
+ * Renders a styled date-time picker inside an {@link InputContainer} using the browser's
+ * native datetime selection UI. The value is handled as a JavaScript `Date` object and
+ * automatically converted to/from the local datetime string format (`YYYY-MM-DDThh:mm`)
+ * required by the native input.
+ *
+ * @param options - Configuration options following the {@link InputOptions} pattern for Date values
+ * @returns A styled datetime input element wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateTimeInput } from '@tempots/beatui'
+ *
+ * const appointment = prop(new Date())
+ * DateTimeInput({
+ *   value: appointment,
+ *   onChange: appointment.set,
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With label via InputWrapper
+ * DateTimeInput({
+ *   value: prop(new Date()),
+ *   onChange: (d) => console.log('Selected:', d.toISOString()),
+ *   disabled: false,
+ *   size: 'lg',
+ * })
+ * ```
+ */
 export declare const DateTimeInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/dropdown-base.d.ts

@@ -1,19 +1,71 @@
 import { Signal, TNode, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { DropdownOption } from './option';
+/**
+ * Options for the {@link DropdownBase} component.
+ * Provides a reusable foundation for building dropdown and combobox inputs
+ * with full keyboard navigation, flyout positioning, and ARIA attributes.
+ *
+ * @typeParam T - The type of option values.
+ */
 export type DropdownBaseOptions<T> = InputOptions<T> & {
+    /** ARIA role for the dropdown trigger (`'combobox'` or `'dropdown'`). */
     role: 'combobox' | 'dropdown';
+    /** The display content shown in the trigger area (e.g., the selected label). */
     display: TNode;
+    /** The list of available dropdown options. */
     optionsSource: Value<DropdownOption<T>[]>;
+    /**
+     * Whether pressing the spacebar toggles the dropdown open/closed.
+     * @default false
+     */
     allowSpaceToggle?: Value<boolean>;
+    /** Callback invoked before the dropdown opens (e.g., to kick off loading). */
     onBeforeOpen?: () => void;
+    /** Callback invoked right after the dropdown opens (e.g., to focus search input). */
     onAfterOpen?: () => void;
+    /**
+     * Function that builds the listbox content inside the dropdown flyout.
+     * Receives context with IDs, focused value signal, keyboard handler, and selection callback.
+     */
     buildListboxContent: (ctx: {
+        /** Unique ID for the dropdown trigger element. */
         dropdownId: string;
+        /** Unique ID for the listbox element. */
         listboxId: string;
+        /** Signal tracking the currently focused option value. */
         focusedValue: Signal<T | null>;
+        /** Keyboard event handler for arrow navigation and selection. */
         handleKeyDown: (ev: KeyboardEvent) => void;
+        /** Callback to invoke when an option is selected. */
         onSelect: (value: T) => void;
     }) => TNode;
 };
+/**
+ * A reusable base component for building dropdown and combobox inputs.
+ *
+ * Provides full keyboard navigation (ArrowUp/Down, Enter, Escape, Space),
+ * flyout positioning, ARIA attributes for accessibility, and click-to-toggle
+ * behavior. The listbox content is delegated to the `buildListboxContent` option,
+ * making this a flexible foundation for both `DropdownInput` and `ComboboxInput`.
+ *
+ * @typeParam T - The type of option values.
+ * @param options - Configuration options for the dropdown base.
+ * @returns A renderable dropdown base component.
+ *
+ * @example
+ * ```ts
+ * DropdownBase({
+ *   value: prop(''),
+ *   role: 'dropdown',
+ *   display: html.span('Select...'),
+ *   optionsSource: myOptions,
+ *   onChange: v => console.log('Selected:', v),
+ *   buildListboxContent: ({ onSelect, focusedValue }) =>
+ *     html.div(
+ *       // render option items here
+ *     ),
+ * })
+ * ```
+ */
 export declare const DropdownBase: <T>(options: DropdownBaseOptions<T>) => import("@tempots/dom").Renderable;

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

@@ -2,13 +2,99 @@ import { Renderable, Value, Merge } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { BaseControllerOptions, ControllerOptions } from '../control';
 import { DropdownOption } from './option';
+/**
+ * Configuration options for the {@link DropdownInput} component.
+ *
+ * Extends {@link InputOptions} with dropdown-specific properties including the
+ * list of selectable options, custom equality comparison, and optional search
+ * filtering.
+ *
+ * @template T - The type of the selectable option values
+ */
 export type DropdownOptions<T> = Merge<InputOptions<T>, {
+    /** The list of selectable options, supporting value items, groups, and break separators */
     options: Value<DropdownOption<T>[]>;
+    /** Label to show when no option is selected (fallback for `placeholder`). Uses i18n "selectOne" when both are omitted. */
     unselectedLabel?: Value<string>;
+    /** Custom equality function for comparing option values. @default strict equality (===) */
     equality?: (a: T, b: T) => boolean;
+    /** Placeholder text displayed when no option is selected */
     placeholder?: Value<string>;
+    /** Whether to enable keyboard search filtering (disables Space-to-toggle). @default false */
     searchable?: Value<boolean>;
 }>;
+/**
+ * A dropdown select input component with keyboard navigation and flyout option list.
+ *
+ * Renders a styled dropdown trigger inside an {@link InputContainer} that opens a
+ * floating listbox of options on click or keyboard interaction. Supports value options,
+ * grouped options, and break separators. The display label automatically reflects the
+ * currently selected value's label. Keyboard navigation supports Arrow Up/Down, Enter
+ * to select, Escape to close, and optionally Space to toggle (when `searchable` is false).
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Configuration options for the dropdown
+ * @returns A styled dropdown input element with a floating option list
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DropdownInput, Option } from '@tempots/beatui'
+ *
+ * const color = prop('red')
+ * DropdownInput({
+ *   value: color,
+ *   onChange: color.set,
+ *   options: [
+ *     Option.value('red', 'Red'),
+ *     Option.value('green', 'Green'),
+ *     Option.value('blue', 'Blue'),
+ *   ],
+ *   placeholder: 'Select a color',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With grouped options
+ * DropdownInput({
+ *   value: prop(''),
+ *   onChange: (v) => console.log('Selected:', v),
+ *   options: [
+ *     Option.group('Warm', [
+ *       Option.value('red', 'Red'),
+ *       Option.value('orange', 'Orange'),
+ *     ]),
+ *     Option.break,
+ *     Option.group('Cool', [
+ *       Option.value('blue', 'Blue'),
+ *       Option.value('green', 'Green'),
+ *     ]),
+ *   ],
+ * })
+ * ```
+ */
 export declare const DropdownInput: <T>(options: DropdownOptions<T>) => Renderable;
+/**
+ * A dropdown input wired to a form controller for managed form state.
+ *
+ * Connects a {@link DropdownInput} to a form {@link Controller}, automatically
+ * mapping the controller's signal to the dropdown value and routing change/blur
+ * events through the controller's validation pipeline.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Controller options including the form controller and dropdown configuration
+ * @returns A controller-bound dropdown input
+ */
 export declare const BaseDropdownControl: <T>(options: BaseControllerOptions<T, DropdownOptions<T>>) => Renderable;
+/**
+ * A complete dropdown form control with label, description, error message, and validation.
+ *
+ * Combines {@link BaseDropdownControl} with an {@link InputWrapper} to provide a
+ * full-featured form field with label, optional description, and validation error display.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Controller options including wrapper label/description and dropdown configuration
+ * @returns A dropdown input wrapped in a form field with label and error display
+ */
 export declare const DropdownControl: <T>(options: ControllerOptions<T, DropdownOptions<T>>) => Renderable;

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

@@ -1,3 +1,21 @@
 import { InputOptions } from './input-options';
 import { Duration } from '../../../temporal';
+/**
+ * An ISO-8601 duration input component with mask validation.
+ *
+ * Accepts duration strings in the format `PnYnMnDTnHnMnS` (e.g., `P1DT2H30M`).
+ * Uses a custom mask that allows only valid duration characters and validates
+ * the input via `Temporal.Duration.from()`. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for a `Duration` value.
+ * @returns A renderable duration input component.
+ *
+ * @example
+ * ```ts
+ * DurationInput({
+ *   value: prop(Temporal.Duration.from('PT1H30M')),
+ *   onChange: d => console.log('Duration:', d.toString()),
+ * })
+ * ```
+ */
 export declare const DurationInput: (options: InputOptions<Duration>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/duration-mask.d.ts

@@ -1,5 +1,29 @@
+/**
+ * Regular expression for validating partial ISO-8601 duration strings during input.
+ * Allows incomplete durations that are still being typed (e.g., `P1`, `P1DT`).
+ */
 export declare const DURATION_PARTIAL_RE: RegExp;
+/**
+ * Regular expression for validating complete ISO-8601 duration strings.
+ * Matches fully formed durations like `P1Y2M3DT4H5M6S`.
+ */
 export declare const DURATION_FULL_RE: RegExp;
+/**
+ * Creates a mask configuration object for ISO-8601 duration inputs.
+ *
+ * The configuration allows only valid duration characters (digits and P, T, W, D, H, M, S),
+ * auto-uppercases input, rejects invalid partial patterns, and uses a custom completion
+ * check that validates via the provided parse function.
+ *
+ * @param parse - A function that parses a duration string (e.g., `Temporal.Duration.from`).
+ * @returns A mask configuration object suitable for use with {@link MaskInput}.
+ *
+ * @example
+ * ```ts
+ * const config = durationMaskConfig(Temporal.Duration.from)
+ * MaskInput({ ...options, ...config })
+ * ```
+ */
 export declare function durationMaskConfig(parse: (s: string) => unknown): {
     mask: null;
     allowMode: "custom";

package/dist/types/components/form/input/editable-text.d.ts

@@ -1,9 +1,42 @@
 import { Renderable, Value } from '@tempots/dom';
+/**
+ * Options for the {@link EditableText} component.
+ */
 export type EditableTextOptions = {
+    /** The current text value to display and edit. */
     value: Value<string>;
+    /** Callback invoked with the new text value when editing completes. */
     onChange: (value: string) => void;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: Value<string>;
+    /**
+     * Whether the component should start in editing mode.
+     * @default false
+     */
     startEditing?: Value<boolean>;
+    /**
+     * Whether the component is disabled and cannot be edited.
+     * @default false
+     */
     disabled?: Value<boolean>;
 };
+/**
+ * An inline editable text component that toggles between display and edit modes.
+ *
+ * In display mode, shows the text with a pencil icon button. Clicking the text
+ * or button switches to edit mode with an auto-selected input field. Press Enter
+ * to confirm, Escape to cancel, or blur to confirm the change.
+ *
+ * @param options - Configuration options for the editable text.
+ * @returns A renderable editable text component.
+ *
+ * @example
+ * ```ts
+ * EditableText({
+ *   value: prop('Click to edit'),
+ *   onChange: newValue => console.log('Changed to:', newValue),
+ *   placeholder: 'Enter text...',
+ * })
+ * ```
+ */
 export declare const EditableText: ({ startEditing, value, onChange, placeholder, disabled, }: EditableTextOptions) => Renderable;