@tempots/beatui 0.82.1 → 0.83.0

package/dist/types/components/form/input/nullable-plain-year-month-input.d.ts

@@ -1,3 +1,21 @@
+/**
+ * A nullable variant of {@link PlainYearMonthInput} for `PlainYearMonth | null` values.
+ *
+ * Renders a native HTML `month` input that can be cleared to `null`.
+ * Created via {@link createNullableTemporalInput} with `PlainYearMonth` serialization.
+ * Includes a reset button to clear the value. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for a `PlainYearMonth | null` value.
+ * @returns A renderable nullable plain year-month input component.
+ *
+ * @example
+ * ```ts
+ * NullablePlainYearMonthInput({
+ *   value: prop<PlainYearMonth | null>(null),
+ *   onChange: ym => console.log('YearMonth:', ym?.toString() ?? 'null'),
+ * })
+ * ```
+ */
 export declare const NullablePlainYearMonthInput: (options: {
     autocomplete?: import("@tempots/dom").Value<string> | undefined;
     autofocus?: import("@tempots/dom").Value<boolean> | undefined;

package/dist/types/components/form/input/nullable-rating-input.d.ts

@@ -2,13 +2,46 @@ import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { ThemeColorName } from '../../../tokens';
 import { ControlSize } from '../../theme/types';
+/**
+ * Options for the {@link NullableRatingInput} component.
+ * Extends standard `InputOptions` for `number | null` values with rating-specific settings.
+ */
 export type NullableRatingInputOptions = InputOptions<number | null> & {
+    /**
+     * Maximum number of rating stars/items.
+     * @default 5
+     */
     max?: Value<number>;
+    /** Color name for filled rating icons. */
     fullColor?: Value<ThemeColorName>;
+    /** Color name for empty rating icons. */
     emptyColor?: Value<ThemeColorName>;
+    /** Icon identifier for filled rating items. */
     fullIcon?: Value<string>;
+    /** Icon identifier for empty rating items. */
     emptyIcon?: Value<string>;
+    /** Size of the rating icons. */
     size?: Value<ControlSize>;
+    /** Rounding precision for fractional ratings (e.g., `0.5` for half stars). */
     rounding?: Value<number>;
 };
+/**
+ * A nullable variant of {@link RatingInput} for `number | null` values.
+ *
+ * Displays as a standard rating input where `null` values show as zero stars.
+ * Includes a reset button to clear the value back to `null`. Supports all
+ * rating options like custom icons, colors, and rounding.
+ *
+ * @param options - Configuration options for the nullable rating input.
+ * @returns A renderable nullable rating input component.
+ *
+ * @example
+ * ```ts
+ * NullableRatingInput({
+ *   value: prop<number | null>(null),
+ *   max: 5,
+ *   onChange: v => console.log('Rating:', v), // null or number
+ * })
+ * ```
+ */
 export declare const NullableRatingInput: (options: NullableRatingInputOptions) => import("@tempots/dom").Renderable;

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

@@ -1,9 +1,36 @@
 import { Value } from '@tempots/dom';
 import { Merge } from '@tempots/std';
 import { TextArea, TextAreaOptions } from './text-area';
+/**
+ * Options for the {@link NullableTextArea} component.
+ * Extends `TextAreaOptions` but accepts `null | string` for value and callbacks.
+ */
 export type NullableTextAreaOptions = Merge<Omit<TextAreaOptions, 'value' | 'onChange' | 'onInput'>, {
+    /** The current value, which may be `null` (empty/unset) or a `string`. */
     value: Value<null | string>;
+    /** Callback invoked on change with `null` (if emptied) or the new string value. */
     onChange?: (value: null | string) => void;
+    /** Callback invoked on input with `null` (if emptied) or the new string value. */
     onInput?: (value: null | string) => void;
 }>;
+/**
+ * A nullable variant of {@link TextArea} that maps between `string | null` and `string`.
+ *
+ * Empty strings are converted to `null` on change, and `null` values are displayed
+ * as empty strings. Includes a reset button to clear the value back to `null`.
+ * Preserves all `TextAreaOptions` like `rows`, `cols`, and `autoResize`.
+ *
+ * @param options - Nullable text area options.
+ * @returns A renderable nullable text area component.
+ *
+ * @example
+ * ```ts
+ * NullableTextArea({
+ *   value: prop<string | null>(null),
+ *   rows: 4,
+ *   placeholder: 'Enter text or leave empty...',
+ *   onChange: v => console.log('Value:', v), // null or string
+ * })
+ * ```
+ */
 export declare const NullableTextArea: (options: NullableTextAreaOptions) => ReturnType<typeof TextArea>;

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

@@ -1,3 +1,21 @@
 import { emptyToNull, nullToEmpty } from './create-nullable-string-input';
 export { emptyToNull, nullToEmpty };
+/**
+ * A nullable variant of {@link TextInput} that maps between `string | null` and `string`.
+ *
+ * Empty strings are converted to `null` on change, and `null` values are displayed
+ * as empty strings. Includes a reset button to clear the value back to `null`.
+ *
+ * @param options - Standard input options for a `string | null` value.
+ * @returns A renderable nullable text input component.
+ *
+ * @example
+ * ```ts
+ * NullableTextInput({
+ *   value: prop<string | null>(null),
+ *   placeholder: 'Enter text or leave empty...',
+ *   onChange: v => console.log('Value:', v), // null or string
+ * })
+ * ```
+ */
 export declare const NullableTextInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-url-input.d.ts

@@ -1 +1,19 @@
+/**
+ * A nullable variant of {@link UrlInput} that maps between `string | null` and `string`.
+ *
+ * Empty strings are converted to `null` on change, and `null` values are displayed
+ * as empty strings. Includes a reset button to clear the value back to `null`.
+ *
+ * @param options - Standard input options for a `string | null` value.
+ * @returns A renderable nullable URL input component.
+ *
+ * @example
+ * ```ts
+ * NullableUrlInput({
+ *   value: prop<string | null>(null),
+ *   placeholder: 'Enter URL or leave empty...',
+ *   onChange: v => console.log('URL:', v), // null or string
+ * })
+ * ```
+ */
 export declare const NullableUrlInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-utils.d.ts

@@ -1,2 +1,22 @@
-import { TNode, Value } from '@tempots/dom';
-export declare function NullableResetAfter<V>(value: Value<V | null>, disabled?: Value<boolean>, onChange?: (v: V | null) => void): TNode;
+import { Value } from '@tempots/dom';
+/**
+ * Creates a small reset (clear) button for nullable input fields.
+ *
+ * The button is rendered in the `after` slot of an `InputContainer` and allows
+ * users to clear the current value back to `null`. It is automatically disabled
+ * when the value is already `null` or the input is disabled.
+ *
+ * @typeParam V - The non-null value type of the input.
+ * @param value - Reactive value that may be `V` or `null`.
+ * @param disabled - Optional reactive boolean indicating whether the input is disabled.
+ * @param onChange - Optional callback invoked with `null` when the reset button is clicked.
+ * @returns A DOM node representing the reset button.
+ *
+ * @example
+ * ```ts
+ * const resetAfter = NullableResetAfter(value, disabled, onChange)
+ * // Use in InputContainer:
+ * InputContainer({ ...options, after: resetAfter })
+ * ```
+ */
+export declare function NullableResetAfter<V>(value: Value<V | null>, disabled?: Value<boolean>, onChange?: (v: V | null) => void): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-uuid-input.d.ts

@@ -1 +1,19 @@
+/**
+ * A nullable variant of {@link UUIDInput} that maps between `string | null` and `string`.
+ *
+ * Empty strings are converted to `null` on change, and `null` values are displayed
+ * as empty strings. Includes a reset button to clear the value back to `null`.
+ * Retains the 8-4-4-4-12 hex digit mask from `UUIDInput`.
+ *
+ * @param options - Standard input options for a `string | null` value.
+ * @returns A renderable nullable UUID input component.
+ *
+ * @example
+ * ```ts
+ * NullableUUIDInput({
+ *   value: prop<string | null>(null),
+ *   onChange: v => console.log('UUID:', v), // null or string
+ * })
+ * ```
+ */
 export declare const NullableUUIDInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;

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

@@ -1,3 +1,23 @@
 import { InputOptions } from './input-options';
 import { ZonedDateTime } from '../../../temporal';
+/**
+ * A nullable variant of {@link ZonedDateTimeInput} for `ZonedDateTime | null` values.
+ *
+ * Renders a `datetime-local` HTML input that can be cleared to `null`. The time
+ * zone is inferred from the `placeholder` option or defaults to the user's local
+ * time zone. Includes a reset button to clear the value. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for a `ZonedDateTime | null` value.
+ *   The `placeholder` option can be used to specify a time zone string.
+ * @returns A renderable nullable zoned date-time input component.
+ *
+ * @example
+ * ```ts
+ * NullableZonedDateTimeInput({
+ *   value: prop<ZonedDateTime | null>(null),
+ *   placeholder: 'America/New_York',
+ *   onChange: zdt => console.log('ZonedDateTime:', zdt?.toString() ?? 'null'),
+ * })
+ * ```
+ */
 export declare const NullableZonedDateTimeInput: (options: InputOptions<ZonedDateTime | null>) => import("@tempots/dom").Renderable;

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

@@ -1,9 +1,58 @@
 import { Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { Merge } from '@tempots/std';
+/**
+ * Configuration options for the {@link NumberInput} component.
+ *
+ * Extends {@link InputOptions} for numeric values with additional properties for
+ * step increment, minimum and maximum bounds. When `step` is provided, stepper
+ * buttons and mouse wheel support are automatically enabled.
+ */
 export type NumberInputOptions = Merge<InputOptions<number>, {
+    /** Step increment for stepper buttons and wheel interactions. When set, enables +/- buttons and scroll-to-step. Hold Shift for 10x multiplier. */
     step?: Value<number>;
+    /** Minimum allowed value. Disables decrement when reached. */
     min?: Value<number>;
+    /** Maximum allowed value. Disables increment when reached. */
     max?: Value<number>;
 }>;
+/**
+ * A numeric input component wrapping a native `<input type="number">` with optional stepper buttons.
+ *
+ * Renders a styled number field inside an {@link InputContainer} with support for
+ * reactive values, min/max constraints, and an optional step increment. When `step`
+ * is provided, increment/decrement buttons appear alongside the input, and mouse
+ * wheel scrolling adjusts the value. Holding Shift while clicking steppers or
+ * scrolling applies a 10x multiplier to the step value.
+ *
+ * @param options - Configuration options for the number input
+ * @returns A styled number input element with optional stepper buttons, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { NumberInput } from '@tempots/beatui'
+ *
+ * const quantity = prop(1)
+ * NumberInput({
+ *   value: quantity,
+ *   onChange: quantity.set,
+ *   min: 0,
+ *   max: 100,
+ *   step: 1,
+ *   placeholder: 'Quantity',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Without stepper buttons (no step provided)
+ * NumberInput({
+ *   value: prop(0),
+ *   onChange: (v) => console.log('Value:', v),
+ *   min: -10,
+ *   max: 10,
+ * })
+ * ```
+ */
 export declare const NumberInput: (options: NumberInputOptions) => import("@tempots/dom").Renderable;

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

@@ -1,38 +1,203 @@
 import { TNode } from '@tempots/dom';
+/**
+ * Represents a single selectable option with a value and label.
+ *
+ * This is the primary option type used in dropdowns, select inputs, and comboboxes.
+ * Each option has a unique value and a human-readable label, with optional decorations
+ * (before/after nodes) and disabled state.
+ *
+ * @template T - The type of the option's value
+ */
 export type ValueOption<T> = {
+    /** Discriminator for option type */
     type: 'value';
+    /** The actual value of the option (returned on selection) */
     value: T;
+    /** Display label shown to the user */
     label: string;
+    /** Whether the option is disabled and cannot be selected */
     disabled?: boolean;
+    /** Optional node to render before the label (e.g., icon) */
     before?: TNode;
+    /** Optional node to render after the label (e.g., badge) */
     after?: TNode;
 };
+/**
+ * Represents a group of options with a header label.
+ *
+ * Used to organize options into logical sections in dropdowns and selects.
+ * The group itself cannot be selected, but contains a list of selectable options.
+ *
+ * @template T - The type of the option values within the group
+ */
 export type GroupOption<T> = {
+    /** Discriminator for option type */
     type: 'group';
+    /** Header label for the group */
     group: string;
+    /** Array of options within this group */
     options: ValueOption<T>[];
+    /** Whether all options in the group are disabled */
     disabled?: boolean;
+    /** Optional node to render before the group label */
     before?: TNode;
+    /** Optional node to render after the group label */
     after?: TNode;
 };
+/**
+ * Represents a visual separator (divider) in the option list.
+ *
+ * Used to add visual breaks between sections of options without creating a labeled group.
+ */
 export type BreakOption = {
     type: 'break';
 };
+/**
+ * Union type for all option types that can be used in select inputs.
+ *
+ * @template T - The type of the option values
+ */
 export type SelectOption<T> = ValueOption<T> | GroupOption<T> | BreakOption;
+/**
+ * Union type for all option types that can be used in dropdown and combobox inputs.
+ *
+ * This is a discriminated union that allows type-safe handling of different option kinds:
+ * - `ValueOption<T>` - A selectable option with value and label
+ * - `GroupOption<T>` - A group header containing multiple options
+ * - `BreakOption` - A visual separator
+ *
+ * @template T - The type of the option values
+ *
+ * @example
+ * ```ts
+ * const options: DropdownOption<string>[] = [
+ *   Option.value('red', 'Red'),
+ *   Option.value('blue', 'Blue'),
+ *   Option.break,
+ *   Option.group('Advanced', [
+ *     Option.value('cyan', 'Cyan'),
+ *     Option.value('magenta', 'Magenta')
+ *   ])
+ * ]
+ * ```
+ */
 export type DropdownOption<T> = ValueOption<T> | GroupOption<T> | BreakOption;
+/**
+ * Generic union of all option types for maximum flexibility.
+ *
+ * @template T - The type of the option values
+ */
 export type AnyOption<T> = SelectOption<T> | DropdownOption<T>;
+/**
+ * Utility namespace for creating and manipulating option structures.
+ *
+ * Provides factory functions for creating options, groups, and breaks, as well as
+ * helper methods for extracting values and checking option membership.
+ */
 export declare const Option: {
+    /**
+     * Creates a value option.
+     *
+     * @template T - The type of the option value
+     * @param value - The option's value
+     * @param label - Display label for the option
+     * @param options - Additional configuration (disabled, before, after)
+     * @returns A ValueOption object
+     *
+     * @example
+     * ```ts
+     * Option.value('red', 'Red', {
+     *   before: Icon({ icon: 'circle', color: 'red' }),
+     *   disabled: false
+     * })
+     * ```
+     */
     value: <T>(value: T, label: string, { disabled, before, after, }?: {
         disabled?: boolean;
         before?: TNode;
         after?: TNode;
     }) => ValueOption<T>;
+    /**
+     * Creates a group option containing multiple value options.
+     *
+     * @template T - The type of the option values
+     * @param group - Header label for the group
+     * @param options - Array of value options or breaks within the group
+     * @param config - Additional configuration (disabled, before, after)
+     * @returns A GroupOption object
+     *
+     * @example
+     * ```ts
+     * Option.group('Colors', [
+     *   Option.value('red', 'Red'),
+     *   Option.value('blue', 'Blue'),
+     *   Option.break,
+     *   Option.value('green', 'Green')
+     * ])
+     * ```
+     */
     group: <T>(group: string, options: (ValueOption<T> | BreakOption)[], { disabled, before, after, }?: {
         disabled?: boolean;
         before?: TNode;
         after?: TNode;
     }) => GroupOption<T>;
+    /**
+     * A visual separator for breaking up option lists.
+     *
+     * @example
+     * ```ts
+     * const options = [
+     *   Option.value(1, 'One'),
+     *   Option.value(2, 'Two'),
+     *   Option.break,
+     *   Option.value(3, 'Three')
+     * ]
+     * ```
+     */
     break: BreakOption;
+    /**
+     * Extracts all values from an array of options, flattening groups.
+     *
+     * This recursively walks through the option structure and returns only the
+     * actual values (ignoring groups and breaks).
+     *
+     * @template T - The type of the option values
+     * @param options - Array of options to extract values from
+     * @returns Array of all values in the option structure
+     *
+     * @example
+     * ```ts
+     * const options = [
+     *   Option.value(1, 'One'),
+     *   Option.group('Group', [Option.value(2, 'Two')]),
+     *   Option.break
+     * ]
+     * Option.getValues(options) // Returns [1, 2]
+     * ```
+     */
     getValues: <T>(options: AnyOption<T>[]) => T[];
+    /**
+     * Checks if a value exists within an array of options.
+     *
+     * This is useful for validating whether a selected value is actually present
+     * in the available options. Uses a custom equality function for complex types.
+     *
+     * @template T - The type of the option values
+     * @param options - Array of options to search
+     * @param value - Value to search for
+     * @param equality - Optional custom equality function (defaults to strict equality)
+     * @returns True if the value exists in the options, false otherwise
+     *
+     * @example
+     * ```ts
+     * const options = [Option.value(1, 'One'), Option.value(2, 'Two')]
+     * Option.contains(options, 1) // Returns true
+     * Option.contains(options, 3) // Returns false
+     *
+     * // Custom equality for objects
+     * const objOptions = [Option.value({ id: 1 }, 'Item 1')]
+     * Option.contains(objOptions, { id: 1 }, (a, b) => a.id === b.id) // Returns true
+     * ```
+     */
     contains: <T>(options: AnyOption<T>[], value: T, equality?: (a: T, b: T) => boolean) => boolean;
 };

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

@@ -0,0 +1,77 @@
+import { Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * Configuration options for the {@link OTPInput} component.
+ */
+export interface OTPInputOptions {
+    /** Number of input digits/characters. @default 6 */
+    length?: number;
+    /** The current OTP value as a string */
+    value?: Value<string>;
+    /** Callback invoked on every input change */
+    onChange?: (value: string) => void;
+    /** Callback invoked when all digits have been entered */
+    onComplete?: (value: string) => void;
+    /** Whether the input is disabled. @default false */
+    disabled?: Value<boolean>;
+    /**
+     * Whether to mask the input characters (like a password).
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Allowed input type.
+     * - `'numeric'` allows only digits 0-9
+     * - `'alphanumeric'` allows letters and digits
+     * @default 'numeric'
+     */
+    type?: 'numeric' | 'alphanumeric';
+    /** Visual size of the input cells. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Theme color for the focused input border. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Placeholder character shown in empty cells. @default '' */
+    placeholder?: string;
+    /** Whether to auto-focus the first cell on mount. @default false */
+    autoFocus?: boolean;
+}
+/**
+ * A one-time password (OTP) / PIN input component.
+ *
+ * Renders a row of individual input cells for entering verification codes,
+ * PINs, or any fixed-length token. Features automatic focus advancement
+ * between cells, paste support, keyboard navigation (arrow keys, backspace),
+ * and optional character masking.
+ *
+ * @param options - Configuration for the OTP input
+ * @returns A row of input cells for OTP entry
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { OTPInput } from '@tempots/beatui'
+ *
+ * const code = prop('')
+ * OTPInput({
+ *   value: code,
+ *   onChange: code.set,
+ *   onComplete: (v) => console.log('Code entered:', v),
+ *   length: 6,
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Masked 4-digit PIN
+ * OTPInput({
+ *   value: prop(''),
+ *   onChange: (v) => console.log(v),
+ *   length: 4,
+ *   mask: true,
+ *   type: 'numeric',
+ *   size: 'lg',
+ * })
+ * ```
+ */
+export declare function OTPInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OTPInputOptions): import("@tempots/dom").Renderable;

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

@@ -1,2 +1,41 @@
 import { InputOptions } from './input-options';
+/**
+ * A password input component with a built-in visibility toggle button.
+ *
+ * Renders a styled password field inside an {@link InputContainer} that switches
+ * between `type="password"` and `type="text"` when the user clicks the eye icon
+ * toggle. The placeholder automatically shows bullet characters when the password
+ * is hidden. Autocomplete defaults to `'current-password'` when hidden and `'off'`
+ * when visible.
+ *
+ * The component uses the BeatUI i18n system for localized placeholder text and
+ * toggle button aria labels.
+ *
+ * @param options - Configuration options following the {@link InputOptions} pattern for string values
+ * @returns A styled password input element with visibility toggle, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { PasswordInput } from '@tempots/beatui'
+ *
+ * const password = prop('')
+ * PasswordInput({
+ *   value: password,
+ *   onChange: password.set,
+ *   placeholder: 'Enter password',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With custom before icon and additional after content
+ * PasswordInput({
+ *   value: prop(''),
+ *   onChange: (v) => console.log('Password:', v),
+ *   before: Icon({ icon: 'line-md:lock' }),
+ *   after: html.span('Strength: weak'),
+ * })
+ * ```
+ */
 export declare const PasswordInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

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

@@ -1,3 +1,20 @@
+/**
+ * An input component for `Temporal.PlainDate` values.
+ *
+ * Renders a native HTML `date` input. Created via {@link createTemporalInput}
+ * with `PlainDate` serialization. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for a `PlainDate` value.
+ * @returns A renderable plain date input component.
+ *
+ * @example
+ * ```ts
+ * PlainDateInput({
+ *   value: prop(Temporal.PlainDate.from('2024-01-15')),
+ *   onChange: date => console.log('Date:', date.toString()),
+ * })
+ * ```
+ */
 export declare const PlainDateInput: (options: {
     autocomplete?: import("@tempots/dom").Value<string> | undefined;
     autofocus?: import("@tempots/dom").Value<boolean> | undefined;

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

@@ -1,3 +1,20 @@
+/**
+ * An input component for `Temporal.PlainDateTime` values.
+ *
+ * Renders a native HTML `datetime-local` input. Created via {@link createTemporalInput}
+ * with `PlainDateTime` serialization. Requires the Temporal polyfill.
+ *
+ * @param options - Standard input options for a `PlainDateTime` value.
+ * @returns A renderable plain date-time input component.
+ *
+ * @example
+ * ```ts
+ * PlainDateTimeInput({
+ *   value: prop(Temporal.PlainDateTime.from('2024-01-15T14:30')),
+ *   onChange: dt => console.log('DateTime:', dt.toString()),
+ * })
+ * ```
+ */
 export declare const PlainDateTimeInput: (options: {
     autocomplete?: import("@tempots/dom").Value<string> | undefined;
     autofocus?: import("@tempots/dom").Value<boolean> | undefined;

package/dist/types/components/form/input/plain-month-day-input.d.ts

@@ -1,3 +1,21 @@
 import { InputOptions } from './input-options';
 import { PlainMonthDay } from '../../../temporal';
+/**
+ * An input component for `Temporal.PlainMonthDay` values.
+ *
+ * Uses a masked text input with the pattern `MM-DD`. The value is displayed
+ * without the leading `--` prefix and parsed back with it. Requires the
+ * Temporal polyfill.
+ *
+ * @param options - Standard input options for a `PlainMonthDay` value.
+ * @returns A renderable plain month-day input component.
+ *
+ * @example
+ * ```ts
+ * PlainMonthDayInput({
+ *   value: prop(Temporal.PlainMonthDay.from('--12-25')),
+ *   onChange: md => console.log('MonthDay:', md.toString()),
+ * })
+ * ```
+ */
 export declare const PlainMonthDayInput: (options: InputOptions<PlainMonthDay>) => import("@tempots/dom").Renderable;