@tempots/beatui 0.94.0 → 1.0.0

package/dist/types/components/form/control/control.d.ts

@@ -22,18 +22,18 @@ export declare const makeOnChangeHandler: <T>(controller: Controller<T>, onChang
 /**
  * Base options type for any input component, derived from InputOptions.
  */
-export type BaseControlOptions = InputOptions<any>;
+export type BaseControlInputOptions = InputOptions<any>;
 /**
  * Options for a control that includes both input and wrapper options.
  */
-export type ControlOptions = Merge<BaseControlOptions, InputWrapperOptions>;
+export type ControlInputOptions = Merge<BaseControlInputOptions, InputWrapperOptions>;
 /**
  * Options for connecting a controller to an input component without a wrapper.
  *
  * @template T - The controller value type
  * @template O - The input component options type
  */
-export type BaseControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<O, 'value'>, {
+export type BaseControlOptions<T, O extends BaseControlInputOptions> = Merge<Omit<O, 'value'>, {
     controller: Controller<T>;
     triggerOn?: 'input' | 'change';
 }>;
@@ -43,7 +43,7 @@ export type BaseControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<
  * @template T - The controller value type
  * @template O - The input component options type
  */
-export type ControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<InputWrapperOptions, 'content'>, Merge<Omit<O, 'value'>, {
+export type ControlOptions<T, O extends BaseControlInputOptions> = Merge<Omit<InputWrapperOptions, 'content'>, Merge<Omit<O, 'value'>, {
     controller: Controller<T>;
     triggerOn?: 'input' | 'change';
 }>>;
@@ -54,7 +54,7 @@ export type ControllerOptions<T, O extends BaseControlOptions> = Merge<Omit<Inpu
  * @template U - The input component value type
  * @template O - The input component options type
  */
-export type MappedControllerOptions<T, U, O extends BaseControlOptions> = Merge<ControllerOptions<T, O>, {
+export type MappedControlOptions<T, U, O extends BaseControlInputOptions> = Merge<ControlOptions<T, O>, {
     /** Transforms controller value to input value. */
     toInput: (value: T) => U;
     /** Transforms input value back to controller value. */
@@ -86,7 +86,7 @@ export type MappedControllerOptions<T, U, O extends BaseControlOptions> = Merge<
  * })
  * ```
  */
-export declare function BaseControl<T, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: BaseControllerOptions<T, O>): TNode;
+export declare function BaseControl<T, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, options: BaseControlOptions<T, O>): TNode;
 /**
  * Connects an input component to a controller with a wrapper that provides label, error display, and layout.
  * Automatically binds the controller's value, disabled state, error state, and event handlers.
@@ -116,7 +116,7 @@ export declare function BaseControl<T, O extends BaseControlOptions>(InputCompon
  * })
  * ```
  */
-export declare function Control<T, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: ControllerOptions<T, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function Control<T, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: ControlOptions<T, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
 /**
  * Connects an input component to a controller with bidirectional value transformation, without a wrapper.
  * Useful when the controller value type differs from the input component's expected value type.
@@ -145,7 +145,7 @@ export declare function Control<T, O extends BaseControlOptions>(InputComponent:
  * })
  * ```
  */
-export declare function BaseMappedControl<T, U, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, options: MappedControllerOptions<T, U, O>): TNode;
+export declare function BaseMappedControl<T, U, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, options: MappedControlOptions<T, U, O>): TNode;
 /**
  * Connects an input component to a controller with bidirectional value transformation and a wrapper.
  * Combines value transformation with label, error display, and layout features.
@@ -176,4 +176,4 @@ export declare function BaseMappedControl<T, U, O extends BaseControlOptions>(In
  * })
  * ```
  */
-export declare function MappedControl<T, U, O extends BaseControlOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: MappedControllerOptions<T, U, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function MappedControl<T, U, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: MappedControlOptions<T, U, O>, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/advanced-slider.d.ts

@@ -18,11 +18,11 @@ export interface SliderTick {
  */
 export interface AdvancedSliderOptions {
     /** Minimum value of the slider range */
-    min?: number;
+    min?: Value<number>;
     /** Maximum value of the slider range */
-    max?: number;
+    max?: Value<number>;
     /** Step increment between valid values. @default 1 */
-    step?: number;
+    step?: Value<number>;
     /** Whether the slider is disabled. @default false */
     disabled?: Value<boolean>;
     /** Visual size of the slider. @default 'md' */
@@ -55,7 +55,7 @@ export interface AdvancedSliderOptions {
      * Tick marks along the slider track.
      * Can be `true` for automatic step-based ticks, or an array of custom tick definitions.
      */
-    ticks?: boolean | SliderTick[];
+    ticks?: Value<boolean | SliderTick[]>;
     /**
      * Whether to show the current value label(s) above the thumb(s).
      * @default false
@@ -72,7 +72,7 @@ export interface AdvancedSliderOptions {
      * If fewer colors than segments are provided, remaining segments use the default color.
      * If not provided, a single fill spanning all thumbs is used (existing behavior).
      */
-    segmentColors?: ThemeColorName[];
+    segmentColors?: Value<ThemeColorName[]>;
     /**
      * Custom renderer for the thumb element. When provided, replaces the default
      * circular thumb with your custom content. The rendered content is placed
@@ -140,4 +140,4 @@ export interface AdvancedSliderOptions {
  * })
  * ```
  */
-export declare function AdvancedSlider({ min, max, step, disabled, size, color, value, onChange, range, points, onRangeChange, onPointsChange, ticks, showValue, formatValue, segmentColors, renderThumb, }: AdvancedSliderOptions): import("@tempots/dom").Renderable;
+export declare function AdvancedSlider({ min: minOpt, max: maxOpt, step: stepOpt, disabled, size, color, value, onChange, range, points, onRangeChange, onPointsChange, ticks, showValue, formatValue, segmentColors, renderThumb, }: AdvancedSliderOptions): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/appearance-selector.d.ts

@@ -1,4 +1,5 @@
 import { AppearancePreference } from '../../theme';
+import type { ControlSize } from '../../theme';
 import { Value } from '@tempots/dom';
 /**
  * Options for the {@link AppearanceSelector} component.
@@ -13,6 +14,11 @@ export type AppearanceSelectorOptions = {
      * @default false
      */
     disabled?: Value<boolean>;
+    /**
+     * Visual size of the selector.
+     * @default 'sm'
+     */
+    size?: Value<ControlSize>;
 };
 /**
  * A segmented input for selecting the application appearance (light, dark, or system).
@@ -31,12 +37,13 @@ export type AppearanceSelectorOptions = {
  * })
  * ```
  */
-export declare function AppearanceSelector({ value, onChange, disabled, }: AppearanceSelectorOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function AppearanceSelector({ value, onChange, disabled, size, }: AppearanceSelectorOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
 /**
  * A standalone appearance selector that automatically connects to the application's
  * {@link Theme} provider. Reads and writes the appearance preference from the
  * current theme context without requiring manual wiring.
  *
+ * @param options - Optional configuration (e.g. size).
  * @returns A renderable standalone appearance selector component.
  *
  * @example
@@ -45,4 +52,4 @@ export declare function AppearanceSelector({ value, onChange, disabled, }: Appea
  * StandaloneAppearanceSelector()
  * ```
  */
-export declare function StandaloneAppearanceSelector(): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function StandaloneAppearanceSelector(options?: Pick<AppearanceSelectorOptions, 'size'>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -8,10 +8,10 @@ import { IconSize } from '../../theme';
  * 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>;
+    /** Icon name to display when the checkbox is active (checked). @default 'ri:checkbox-fill' */
+    activeIcon?: Value<string | undefined>;
+    /** Icon name to display when the checkbox is inactive (unchecked). @default 'mdi:checkbox-blank-outline' */
+    inactiveIcon?: Value<string | undefined>;
     /** Size of the checkbox icon. @default 'lg' */
     iconSize?: Value<IconSize>;
 };
@@ -46,9 +46,8 @@ export type CheckboxInputOptions = InputOptions<boolean> & {
  * CheckboxInput({
  *   value: prop(true),
  *   onChange: (v) => console.log('Checked:', v),
- *   checkedIcon: 'mdi:checkbox-marked',
- *   uncheckedIcon: 'mdi:checkbox-blank-outline',
- *   iconSize: 'xl',
+ *   activeIcon: 'mdi:checkbox-marked',
+ *   inactiveIcon: 'mdi:checkbox-blank-outline',
  * })
  * ```
  */

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

@@ -8,7 +8,7 @@ import { InputOptions } from './input-options';
  */
 export type ColorInputOptions = InputOptions<string> & {
     /** Size in pixels of the color swatch preview (square). @default 32 */
-    size?: Value<number>;
+    swatchSize?: Value<number>;
 };
 /**
  * A color input component combining a text field with a clickable color swatch preview.

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

@@ -10,7 +10,7 @@ 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>;
+    swatchSize?: 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 */
@@ -42,7 +42,7 @@ export type ColorSwatchInputOptions = InputOptions<string> & {
  *   value: color,
  *   onChange: color.set,
  *   displayValue: true,
- *   size: 40,
+ *   swatchSize: 40,
  * })
  * ```
  *
@@ -55,7 +55,7 @@ export type ColorSwatchInputOptions = InputOptions<string> & {
  *   withAlpha: true,
  *   displayValue: true,
  *   colorTextFormat: 'hsl',
- *   size: 48,
+ *   swatchSize: 48,
  * })
  * ```
  */

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

@@ -1,6 +1,6 @@
 import { Merge, Renderable, Signal, TNode, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
-import { BaseControllerOptions, ControllerOptions } from '../control';
+import { BaseControlOptions, ControlOptions } from '../control';
 import { DropdownOption } from './option';
 /**
  * Configuration options for the {@link ComboboxInput} component.
@@ -11,7 +11,7 @@ import { DropdownOption } from './option';
  *
  * @template T - The type of the selectable option values
  */
-export type ComboboxOptions<T> = Merge<InputOptions<T>, {
+export type ComboboxInputOptions<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 */
@@ -65,7 +65,7 @@ export type ComboboxOptions<T> = Merge<InputOptions<T>, {
  * })
  * ```
  */
-export declare const ComboboxInput: <T>(options: ComboboxOptions<T>) => Renderable;
+export declare const ComboboxInput: <T>(options: ComboboxInputOptions<T>) => Renderable;
 /**
  * A combobox input wired to a form controller for managed form state.
  *
@@ -77,7 +77,7 @@ export declare const ComboboxInput: <T>(options: ComboboxOptions<T>) => Renderab
  * @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;
+export declare const BaseComboboxControl: <T>(options: BaseControlOptions<T, ComboboxInputOptions<T>>) => Renderable;
 /**
  * A complete combobox form control with label, description, error message, and validation.
  *
@@ -88,4 +88,4 @@ export declare const BaseComboboxControl: <T>(options: BaseControllerOptions<T,
  * @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;
+export declare const ComboboxControl: <T>(options: ControlOptions<T, ComboboxInputOptions<T>>) => Renderable;

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

@@ -1,14 +1,14 @@
 import { Renderable, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { DropdownOption } from './option';
-import { BaseControllerOptions, ControllerOptions } from '../control';
+import { BaseControlOptions, ControlOptions } 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> = {
+export type ComboboxTagsInputOptions<T> = {
     /** The available dropdown options to choose from. */
     options: Value<DropdownOption<T>[]>;
     /**
@@ -51,7 +51,7 @@ export type ComboboxTagsOptions<T> = {
  * })
  * ```
  */
-export declare function ComboboxTagsInput<T>(options: ComboboxTagsOptions<T>): Renderable;
+export declare function ComboboxTagsInput<T>(options: ComboboxTagsInputOptions<T>): Renderable;
 /**
  * A base form control wrapper for {@link ComboboxTagsInput} using a raw controller.
  *
@@ -59,7 +59,7 @@ export declare function ComboboxTagsInput<T>(options: ComboboxTagsOptions<T>): R
  * @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>>): import("@tempots/dom").TNode;
+export declare function BaseComboboxTagsControl<T>(options: BaseControlOptions<T[], ComboboxTagsInputOptions<T>>): import("@tempots/dom").TNode;
 /**
  * A full form control wrapper for {@link ComboboxTagsInput} with label, error, and description support.
  *
@@ -67,4 +67,4 @@ export declare function BaseComboboxTagsControl<T>(options: BaseControllerOption
  * @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>>): Renderable;
+export declare function ComboboxTagsControl<T>(options: ControlOptions<T[], ComboboxTagsInputOptions<T>>): Renderable;

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

@@ -12,13 +12,13 @@ export declare const nullToEmpty: (value: null | string) => string;
  * Factory function to create nullable string input components.
  * Eliminates duplication across nullable text-based inputs.
  *
- * @param BaseInput - The base input component (e.g., TextInput, EmailInput, PasswordInput)
+ * @param BaseInput - The base input component (e.g., TextInput, NativeEmailInput, PasswordInput)
  * @returns A nullable version of the input component
  *
  * @example
  * ```ts
  * export const NullableTextInput = createNullableStringInput(TextInput)
- * export const NullableEmailInput = createNullableStringInput(EmailInput)
+ * export const NativeNullableEmailInput = createNullableStringInput(NativeEmailInput)
  * ```
  */
 export declare function createNullableStringInput(BaseInput: (options: InputOptions<string>) => Renderable): (options: InputOptions<null | string>) => Renderable;

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

@@ -12,10 +12,10 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * import { prop } from '@tempots/dom'
- * import { DateInput } from '@tempots/beatui'
+ * import { NativeDateInput } from '@tempots/beatui'
  *
  * const birthday = prop(new Date('1990-01-15'))
- * DateInput({
+ * NativeDateInput({
  *   value: birthday,
  *   onChange: birthday.set,
  * })
@@ -24,7 +24,7 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * // With error state and disabled
- * DateInput({
+ * NativeDateInput({
  *   value: prop(new Date()),
  *   onChange: (d) => console.log('Selected:', d),
  *   hasError: prop(true),
@@ -32,4 +32,4 @@ import { InputOptions } from './input-options';
  * })
  * ```
  */
-export declare const DateInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;
+export declare const NativeDateInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

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

@@ -1,6 +1,6 @@
 import { Renderable, Value, Merge } from '@tempots/dom';
 import { InputOptions } from './input-options';
-import { BaseControllerOptions, ControllerOptions } from '../control';
+import { BaseControlOptions, ControlOptions } from '../control';
 import { DropdownOption } from './option';
 /**
  * Configuration options for the {@link DropdownInput} component.
@@ -11,7 +11,7 @@ import { DropdownOption } from './option';
  *
  * @template T - The type of the selectable option values
  */
-export type DropdownOptions<T> = Merge<InputOptions<T>, {
+export type DropdownInputOptions<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. */
@@ -74,7 +74,7 @@ export type DropdownOptions<T> = Merge<InputOptions<T>, {
  * })
  * ```
  */
-export declare const DropdownInput: <T>(options: DropdownOptions<T>) => Renderable;
+export declare const DropdownInput: <T>(options: DropdownInputOptions<T>) => Renderable;
 /**
  * A dropdown input wired to a form controller for managed form state.
  *
@@ -86,7 +86,7 @@ export declare const DropdownInput: <T>(options: DropdownOptions<T>) => Renderab
  * @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;
+export declare const BaseDropdownControl: <T>(options: BaseControlOptions<T, DropdownInputOptions<T>>) => Renderable;
 /**
  * A complete dropdown form control with label, description, error message, and validation.
  *
@@ -97,4 +97,4 @@ export declare const BaseDropdownControl: <T>(options: BaseControllerOptions<T,
  * @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;
+export declare const DropdownControl: <T>(options: ControlOptions<T, DropdownInputOptions<T>>) => Renderable;

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

@@ -3,11 +3,11 @@ import { Renderable, Value } from '@tempots/dom';
  * Options for the {@link EditableText} component.
  */
 export type EditableTextOptions = {
-    /** The current text value to display and edit. */
+    /** The current text value to display and edit. @default 'The content' */
     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 text shown when the value is empty. @default 'Edit me' */
     placeholder?: Value<string>;
     /**
      * Whether the component should start in editing mode.

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

@@ -13,10 +13,10 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * import { prop } from '@tempots/dom'
- * import { EmailInput } from '@tempots/beatui'
+ * import { NativeEmailInput } from '@tempots/beatui'
  *
  * const email = prop('')
- * EmailInput({
+ * NativeEmailInput({
  *   value: email,
  *   onChange: email.set,
  * })
@@ -25,7 +25,7 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * // Override the default before icon
- * EmailInput({
+ * NativeEmailInput({
  *   value: prop(''),
  *   onChange: (v) => console.log('Email:', v),
  *   before: Icon({ icon: 'custom-email-icon' }),
@@ -33,4 +33,4 @@ import { InputOptions } from './input-options';
  * })
  * ```
  */
-export declare const EmailInput: (options: InputOptions<string>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare const NativeEmailInput: (options: InputOptions<string>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -2,6 +2,7 @@ export * from './appearance-selector';
 export * from './base64-input';
 export * from './base64s-input';
 export * from './checkbox-input';
+export * from './tri-state-checkbox-input';
 export * from './color-input';
 export * from './color-swatch-input';
 export * from './nullable-color-input';

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

@@ -20,7 +20,7 @@ export declare function generateInputContainerInputClasses(baseContainer: boolea
  * - 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
+ * Used by most form inputs (TextInput, NumberInput, NativeDateInput, etc.) to ensure
  * visual consistency across the component library.
  *
  * @param options - Container configuration options

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

@@ -56,7 +56,7 @@ export type CommonInputOptions = {
     tabIndex?: Value<number>;
     /**
      * Visual size of the control, aligned with Button sizes.
-     * Defaults to 'md' when omitted.
+     * @default 'md'
      */
     size?: Value<ControlSize>;
 };
@@ -93,6 +93,33 @@ export type InputOptions<V> = Merge<CommonInputOptions, {
     /** Callback invoked when the input loses focus */
     onBlur?: () => void;
 }>;
+/**
+ * Maps an `InputOptions<Outer>` to an `InputOptions<Inner>` by transforming
+ * the `value`, `onChange`, and `onInput` fields. All other options pass through
+ * unchanged.
+ *
+ * Use this to adapt an input component that works with type `Inner` so it can
+ * be driven by a value of type `Outer`.
+ *
+ * @template Outer - The external value type (what the consumer provides)
+ * @template Inner - The internal value type (what the wrapped component expects)
+ * @param options - The original input options with the `Outer` value type
+ * @param toInner - Converts an `Outer` value to `Inner` (for display)
+ * @param toOuter - Converts an `Inner` value back to `Outer` (for change events)
+ * @returns A new `InputOptions<Inner>` suitable for the wrapped component
+ *
+ * @example
+ * ```ts
+ * // Adapt a TextInput (string) to accept string | null
+ * const mapped = mapInputOptions<string | null, string>(
+ *   options,
+ *   v => v ?? '',           // null → '' for display
+ *   v => v === '' ? null : v // '' → null on change
+ * )
+ * TextInput(mapped)
+ * ```
+ */
+export declare function mapInputOptions<Outer, Inner>(options: InputOptions<Outer>, toInner: (value: Outer) => Inner, toOuter: (value: Inner) => Outer): InputOptions<Inner>;
 /**
  * Helper function that applies common HTML attributes to an input element.
  *

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

@@ -151,7 +151,10 @@ export interface MaskedInputOptions {
     value?: string;
     /** Default value used when no value is provided. */
     defaultValue?: string;
-    /** The mask pattern or dynamic mask function. */
+    /**
+     * The mask pattern or dynamic mask function.
+     * @default '(999) 999-9999'
+     */
     mask: Value<Mask | DynamicMask>;
     /** Custom mask symbol definitions. */
     definitions?: Value<MaskDictionary>;
@@ -160,7 +163,10 @@ export interface MaskedInputOptions {
      * @default true
      */
     useDefaultDefinitions?: Value<boolean>;
-    /** Placeholder text displayed when the input is empty. */
+    /**
+     * Placeholder text displayed when the input is empty.
+     * @default '(___) ___-____'
+     */
     placeholder?: Value<string>;
     /** Options for placeholder guide display. */
     placeholderOptions?: Value<PlaceholderOptions>;

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

@@ -1,6 +1,6 @@
 import { Renderable, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
-import { BaseControllerOptions, ControllerOptions } from '../control';
+import { BaseControlOptions, ControlOptions } from '../control';
 import { SelectOption } from './option';
 /**
  * Options for the {@link NativeSelect} component.
@@ -51,7 +51,7 @@ export declare const NativeSelect: <T>(options: NativeSelectOptions<T>) => Rende
  * @param options - Base controller options for the native select control.
  * @returns A renderable form control component.
  */
-export declare function BaseNativeSelectControl<T>(options: BaseControllerOptions<T, NativeSelectOptions<T>>): Renderable;
+export declare function BaseNativeSelectControl<T>(options: BaseControlOptions<T, NativeSelectOptions<T>>): Renderable;
 /**
  * A full form control wrapper for {@link NativeSelect} with label, error, and description support.
  *
@@ -59,4 +59,4 @@ export declare function BaseNativeSelectControl<T>(options: BaseControllerOption
  * @param options - Controller options for the native select control.
  * @returns A renderable form control component with wrapper.
  */
-export declare function NativeSelectControl<T>(options: ControllerOptions<T, NativeSelectOptions<T>>): Renderable;
+export declare function NativeSelectControl<T>(options: ControlOptions<T, NativeSelectOptions<T>>): Renderable;

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

@@ -11,10 +11,10 @@ import { InputOptions } from './input-options';
  *
  * @example
  * ```ts
- * NullableDateInput({
+ * NativeNullableDateInput({
  *   value: prop<Date | null>(null),
  *   onChange: date => console.log('Date:', date),
  * })
  * ```
  */
-export declare const NullableDateInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;
+export declare const NativeNullableDateInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;

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

@@ -1,5 +1,5 @@
 /**
- * A nullable variant of {@link EmailInput} that maps between `string | null` and `string`.
+ * A nullable variant of {@link NativeEmailInput} 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`.
@@ -9,11 +9,11 @@
  *
  * @example
  * ```ts
- * NullableEmailInput({
+ * NativeNullableEmailInput({
  *   value: prop<string | null>(null),
  *   placeholder: 'Enter email or leave empty...',
  *   onChange: v => console.log('Email:', v), // null or string
  * })
  * ```
  */
-export declare const NullableEmailInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;
+export declare const NativeNullableEmailInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;

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

@@ -12,17 +12,17 @@ export type NullableRatingInputOptions = InputOptions<number | null> & {
      * @default 5
      */
     max?: Value<number>;
-    /** Color name for filled rating icons. */
+    /** Color name for filled rating icons. @default 'yellow' */
     fullColor?: Value<ThemeColorName>;
-    /** Color name for empty rating icons. */
+    /** Color name for empty rating icons. @default 'neutral' */
     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. */
+    /** Icon identifier for active (filled) rating items. @default 'line-md:star-alt-filled' */
+    activeIcon?: Value<string>;
+    /** Icon identifier for inactive (empty) rating items. @default 'line-md:star-alt' */
+    inactiveIcon?: Value<string>;
+    /** Size of the rating icons. @default 'md' */
     size?: Value<ControlSize>;
-    /** Rounding precision for fractional ratings (e.g., `0.5` for half stars). */
+    /** Rounding precision for fractional ratings (e.g., `0.5` for half stars). @default 1 */
     rounding?: Value<number>;
 };
 /**

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

@@ -1,19 +1,19 @@
 /**
- * A nullable variant of {@link UUIDInput} that maps between `string | null` and `string`.
+ * 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`.
+ * 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({
+ * 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;
+export declare const NullableUuidInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;