@tempots/beatui 1.4.0 → 1.6.0

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

@@ -54,7 +54,7 @@ export type ComboboxInputOptions<T> = Merge<InputOptions<T>, {
  * const user = prop<User | null>(null)
  * ComboboxInput({
  *   value: user,
- *   onChange: user.set,
+ *   onChange: v => user.set(v),
  *   loadOptions: async (search) => {
  *     const users = await fetchUsers(search)
  *     return users.map(u => Option.value(u, u.name))
@@ -81,11 +81,11 @@ export declare const BaseComboboxControl: <T>(options: BaseControlOptions<T, Com
 /**
  * A complete combobox form control with label, description, error message, and validation.
  *
- * Combines {@link BaseComboboxControl} with an {@link InputWrapper} to provide a
+ * Combines {@link BaseComboboxControl} with a {@link Field} 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: ControlOptions<T, ComboboxInputOptions<T>>) => Renderable;
+export declare const ComboboxControl: <T>(options: ControlOptions<T, ComboboxInputOptions<T>>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -67,4 +67,4 @@ export declare function BaseComboboxTagsControl<T>(options: BaseControlOptions<T
  * @param options - Controller options for the combobox tags control.
  * @returns A renderable form control component with wrapper.
  */
-export declare function ComboboxTagsControl<T>(options: ControlOptions<T[], ComboboxTagsInputOptions<T>>): Renderable;
+export declare function ComboboxTagsControl<T>(options: ControlOptions<T[], ComboboxTagsInputOptions<T>>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -17,7 +17,7 @@ import { InputOptions } from './input-options';
  * const birthday = prop(new Date('1990-01-15'))
  * DateInput({
  *   value: birthday,
- *   onChange: birthday.set,
+ *   onChange: v => birthday.set(v),
  * })
  * ```
  *

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

@@ -0,0 +1,23 @@
+import { TNode, Value } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+/**
+ * Internal base options for the date range select shell (trigger + flyout).
+ * The actual picker content is provided via `panelContent`.
+ */
+export interface DateRangeSelectShellOptions extends CommonInputOptions {
+    /** The display text shown in the trigger. */
+    displayText: Value<string>;
+    /** The content to render inside the flyout panel. */
+    panelContent: TNode;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}
+/**
+ * Shared shell for date range selectors: trigger button + flyout panel.
+ * Used by both DateRangeSelect and OpenDateRangeSelect.
+ */
+export declare function DateRangeSelectShell(options: DateRangeSelectShellOptions): TNode;

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

@@ -0,0 +1,64 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainDate } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * A date range as a `[start, end]` tuple where both dates are required.
+ */
+export type DateRange = [PlainDate, PlainDate];
+/**
+ * Configuration options for the {@link DateRangeSelect} component.
+ *
+ * Both start and end dates are required. Use {@link OpenDateRangeSelect}
+ * if either end can be null/undefined.
+ */
+export type DateRangeSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date range as `[start, end]`. */
+    value: Value<DateRange>;
+    /** Callback invoked when the range changes. */
+    onChange?: (range: DateRange) => void;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Predicate returning true if a date should be disabled. */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** The day the week starts on (0=Sun, 1=Mon). @default 0 */
+    weekStartsOn?: Value<number>;
+    /** Format a PlainDate for display. Defaults to ISO string. */
+    formatDate?: (date: PlainDate) => string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A date range selector using a single calendar with range highlighting.
+ *
+ * Displays the selected range in a styled trigger button. Clicking opens a
+ * flyout panel with a {@link DateRangePicker} — a single calendar where the
+ * user clicks to set the start date, then clicks again to set the end date,
+ * with a hover preview showing the prospective range.
+ *
+ * Use {@link OpenDateRangeSelect} if either date can be null/undefined.
+ *
+ * @param options - Configuration for the date range selector
+ * @returns A date range selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateRangeSelect } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * const range = prop<DateRange>([
+ *   Temporal.PlainDate.from('2026-01-01'),
+ *   Temporal.PlainDate.from('2026-01-31'),
+ * ])
+ * DateRangeSelect({
+ *   value: range,
+ *   onChange: v => range.set(v),
+ * })
+ * ```
+ */
+export declare function DateRangeSelect(options: DateRangeSelectOptions): TNode;

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

@@ -0,0 +1,52 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainDate } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * Configuration options for the {@link DateSelect} component.
+ */
+export type DateSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date. */
+    value: Value<PlainDate>;
+    /** Callback invoked when the date changes. */
+    onChange?: (date: PlainDate) => void;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Predicate returning true if a date should be disabled. */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** The day the week starts on (0=Sun, 1=Mon). @default 0 */
+    weekStartsOn?: Value<number>;
+    /** Format a PlainDate for display. Defaults to ISO string. */
+    formatDate?: (date: PlainDate) => string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A dropdown single-date selector.
+ *
+ * Displays the selected date in a styled trigger button. Clicking opens a
+ * flyout panel with a {@link DatePicker} for selecting a date.
+ *
+ * Use {@link NullableDateSelect} when the date can be null/unset.
+ *
+ * @param options - Configuration for the date selector
+ * @returns A date selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateSelect } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * const date = prop(Temporal.Now.plainDateISO())
+ * DateSelect({
+ *   value: date,
+ *   onChange: v => date.set(v),
+ * })
+ * ```
+ */
+export declare function DateSelect(options: DateSelectOptions): TNode;

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

@@ -18,13 +18,13 @@ import { InputOptions } from './input-options';
  * const appointment = prop(new Date())
  * DateTimeInput({
  *   value: appointment,
- *   onChange: appointment.set,
+ *   onChange: v => appointment.set(v),
  * })
  * ```
  *
  * @example
  * ```ts
- * // With label via InputWrapper
+ * // With label via Field
  * DateTimeInput({
  *   value: prop(new Date()),
  *   onChange: (d) => console.log('Selected:', d.toISOString()),

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

@@ -0,0 +1,23 @@
+import { TNode, Value } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+/**
+ * Internal base options for the date-time select shell (trigger + flyout).
+ * The actual picker content is provided via `panelContent`.
+ */
+export interface DateTimeSelectShellOptions extends CommonInputOptions {
+    /** The display text shown in the trigger. */
+    displayText: Value<string>;
+    /** The content to render inside the flyout panel. */
+    panelContent: TNode;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}
+/**
+ * Shared shell for date-time selectors: trigger button + flyout panel.
+ * Used by both DateTimeSelect and NullableDateTimeSelect.
+ */
+export declare function DateTimeSelectShell(options: DateTimeSelectShellOptions): TNode;

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

@@ -0,0 +1,66 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainDate, PlainDateTime } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * Configuration options for the {@link DateTimeSelect} component.
+ */
+export type DateTimeSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date-time. */
+    value: Value<PlainDateTime>;
+    /** Callback invoked when the date-time changes. */
+    onChange?: (dateTime: PlainDateTime) => void;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Predicate returning true if a date should be disabled. */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** The day the week starts on (0=Sun, 1=Mon). @default 0 */
+    weekStartsOn?: Value<number>;
+    /** Whether to show seconds in the time picker. @default false */
+    showSeconds?: Value<boolean>;
+    /** Whether to use 12-hour format. When omitted, auto-detected from locale. */
+    use12Hour?: Value<boolean>;
+    /** Step for minutes column. @default 1 */
+    minuteStep?: Value<number>;
+    /** Step for seconds column. @default 1 */
+    secondStep?: Value<number>;
+    /** Whether to show a "Now" button in the time picker. @default false */
+    showNow?: Value<boolean>;
+    /** Format a PlainDateTime for display. When omitted, uses locale-aware 12/24-hour format. */
+    formatDateTime?: (dt: PlainDateTime) => string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A dropdown date-time selector combining a date picker and time picker.
+ *
+ * Displays the selected date-time in a styled trigger button. Clicking opens a
+ * flyout panel with a {@link DatePicker} and {@link TimePicker} side by side,
+ * separated by a visual divider.
+ *
+ * When no custom `formatDateTime` is provided, the time portion adapts to the
+ * locale's 12/24-hour convention (or the explicit `use12Hour` prop).
+ *
+ * Use {@link NullableDateTimeSelect} when the date-time can be null/unset.
+ *
+ * @param options - Configuration for the date-time selector
+ * @returns A date-time selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateTimeSelect } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * const dt = prop(Temporal.Now.plainDateTimeISO())
+ * DateTimeSelect({
+ *   value: dt,
+ *   onChange: v => dt.set(v),
+ * })
+ * ```
+ */
+export declare function DateTimeSelect(options: DateTimeSelectOptions): TNode;

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

@@ -44,7 +44,7 @@ export type DropdownInputOptions<T> = Merge<InputOptions<T>, {
  * const color = prop('red')
  * DropdownInput({
  *   value: color,
- *   onChange: color.set,
+ *   onChange: v => color.set(v),
  *   options: [
  *     Option.value('red', 'Red'),
  *     Option.value('green', 'Green'),
@@ -90,11 +90,11 @@ export declare const BaseDropdownControl: <T>(options: BaseControlOptions<T, Dro
 /**
  * A complete dropdown form control with label, description, error message, and validation.
  *
- * Combines {@link BaseDropdownControl} with an {@link InputWrapper} to provide a
+ * Combines {@link BaseDropdownControl} with a {@link Field} 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: ControlOptions<T, DropdownInputOptions<T>>) => Renderable;
+export declare const DropdownControl: <T>(options: ControlOptions<T, DropdownInputOptions<T>>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -18,7 +18,7 @@ import { InputOptions } from './input-options';
  * const email = prop('')
  * EmailInput({
  *   value: email,
- *   onChange: email.set,
+ *   onChange: v => email.set(v),
  * })
  * ```
  *

package/dist/types/components/form/input/field-layout.d.ts

@@ -0,0 +1,64 @@
+import { Provider, Value } from '@tempots/dom';
+import type { ControlSize } from '../../theme';
+import type { FieldLabelLayout } from './field';
+/**
+ * Layout configuration values cascaded by the {@link FieldLayout} provider.
+ *
+ * When a `Fieldset` provides this context, descendant `Field` components
+ * automatically inherit these defaults. Local options on individual Fields
+ * take precedence over provider values.
+ */
+export interface FieldLayoutValue {
+    /** Label position relative to input. @default 'vertical' */
+    layout: Value<FieldLabelLayout>;
+    /** Label column width for horizontal layouts. @default '7.5rem' */
+    labelWidth: Value<string>;
+    /** Control size cascaded to children. @default 'md' */
+    size: Value<ControlSize>;
+    /** Gap between fields in a Fieldset. @default 'md' */
+    gap: Value<ControlSize>;
+    /** Number of grid columns. @default 1 */
+    columns: Value<number>;
+    /** Minimum field width before columns auto-collapse. @default '15rem' */
+    minFieldWidth: Value<string>;
+    /** Reduced spacing mode for data-dense interfaces. @default false */
+    compact: Value<boolean>;
+}
+/** Default values for the FieldLayout provider. */
+export declare const FIELD_LAYOUT_DEFAULTS: FieldLayoutValue;
+/**
+ * Options accepted by the {@link FieldLayout} provider.
+ *
+ * All properties are optional — unspecified properties fall back to
+ * {@link FIELD_LAYOUT_DEFAULTS}.
+ */
+export interface FieldLayoutOptions {
+    /** Label position relative to input. @default 'vertical' */
+    layout?: Value<FieldLabelLayout>;
+    /** Label column width for horizontal layouts. @default '7.5rem' */
+    labelWidth?: Value<string>;
+    /** Control size cascaded to children. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Gap between fields in a Fieldset. @default 'md' */
+    gap?: Value<ControlSize>;
+    /** Number of grid columns. @default 1 */
+    columns?: Value<number>;
+    /** Minimum field width before columns auto-collapse. @default '15rem' */
+    minFieldWidth?: Value<string>;
+    /** Reduced spacing mode. @default false */
+    compact?: Value<boolean>;
+}
+/**
+ * Provider that cascades form layout configuration to descendant `Field` components.
+ *
+ * Typically provided by a `Fieldset`, but can also be used directly via `Provide`:
+ *
+ * @example
+ * ```typescript
+ * Provide(FieldLayout, { layout: 'horizontal-fixed', labelWidth: '160px' },
+ *   Field({ label: 'Name', content: TextInput({ ... }) }),
+ *   Field({ label: 'Email', content: TextInput({ ... }) }),
+ * )
+ * ```
+ */
+export declare const FieldLayout: Provider<FieldLayoutValue, any>;

package/dist/types/components/form/input/{input-wrapper.d.ts → field.d.ts}

@@ -2,26 +2,28 @@ 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.
+ * Renders as a red asterisk (" *") with the `bc-field__required` class.
  */
 export declare const RequiredSymbol: import("@tempots/dom").Renderable;
 /**
- * Layout modes for the input wrapper structure.
+ * Layout modes for the field 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)
+ * - `'horizontal-fixed'` - Label on the left with fixed width, left-aligned
+ * - `'horizontal-end'` - Label on the left with fixed width, right-aligned (flush with input)
+ * - `'horizontal-label-right'` - Label on the right side of the input (for checkboxes, switches)
+ * - `'responsive'` - Horizontal-fixed above 480px, vertical below (container query)
  */
-export type InputWrapperLayout = 'vertical' | 'horizontal' | 'horizontal-label-right' | 'horizontal-fixed';
+export type FieldLabelLayout = 'vertical' | 'horizontal' | 'horizontal-fixed' | 'horizontal-end' | 'horizontal-label-right' | 'responsive';
 /**
- * Configuration options for the `InputWrapper` component.
+ * Configuration options for the `Field` 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 = {
+export type FieldOptions = {
     /** Whether the wrapper should take full width of its container */
     fullWidth?: Value<boolean>;
     /** Label text or node to display above/beside the input */
@@ -45,9 +47,13 @@ export type InputWrapperOptions = {
     /** 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') */
+    layout?: Value<FieldLabelLayout>;
+    /** CSS width value for label in horizontal layouts (e.g., '120px', '10rem') */
     labelWidth?: Value<string>;
+    /** Reduced spacing mode for data-dense interfaces */
+    compact?: Value<boolean>;
+    /** Number of grid columns this field spans in a Fieldset grid */
+    span?: Value<number>;
 };
 /**
  * Wraps an input element with label, description, error message, and accessibility attributes.
@@ -58,8 +64,9 @@ export type InputWrapperOptions = {
  * - 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)
+ * - Multiple layout modes (vertical, horizontal, horizontal-label-right, horizontal-fixed, responsive)
  * - Automatic ID generation for linking label, description, and error to the input
+ * - FieldLayout provider integration: inherits layout settings from a parent Fieldset
  *
  * The component handles state styling (error, disabled) and ensures screen readers
  * receive appropriate context through ARIA attributes.
@@ -73,17 +80,19 @@ export type InputWrapperOptions = {
  * @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.layout - Layout mode (default: inherited from FieldLayout or 'vertical')
  * @param options.labelWidth - Fixed width for label in 'horizontal-fixed' layout
+ * @param options.compact - Reduced spacing mode
+ * @param options.span - Number of grid columns this field spans in a Fieldset grid
  * @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
+ * @returns A div element with the complete field structure
  *
  * @example
  * ```ts
- * InputWrapper({
+ * Field({
  *   label: 'Email',
  *   description: 'We will never share your email',
  *   required: true,
@@ -94,4 +103,4 @@ export type InputWrapperOptions = {
  * })
  * ```
  */
-export declare const InputWrapper: ({ fullWidth, required, label, labelChildren, context, description, content, error, labelFor, hasError, disabled, layout, labelWidth, }: InputWrapperOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const Field: (options: FieldOptions, ...children: TNode[]) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -4,6 +4,7 @@ export * from './base64s-input';
 export * from './checkbox-input';
 export * from './tri-state-checkbox-input';
 export * from './color-input';
+export * from './color-picker/index';
 export * from './color-swatch-input';
 export * from './nullable-color-input';
 export * from './nullable-color-swatch-input';
@@ -14,6 +15,11 @@ export * from './select-tags-input';
 export * from './combobox-tags-input';
 export * from './multi-select';
 export * from './date-input';
+export * from './date-range-select';
+export * from './date-range-select-base';
+export * from './open-date-range-select';
+export * from './date-select';
+export * from './nullable-date-select';
 export * from './date-time-input';
 export * from './editable-text';
 export * from './email-input';
@@ -22,7 +28,8 @@ export * from './files-input';
 export * from './input-adornment';
 export * from './input-container';
 export * from './input-options';
-export * from './input-wrapper';
+export * from './field';
+export * from './field-layout';
 export * from './lazy-native-select';
 export * from './list-input';
 export * from './mask-input';
@@ -35,12 +42,16 @@ export * from './nullable-password-input';
 export * from './nullable-text-area';
 export * from './nullable-text-input';
 export * from './number-input';
+export * from './number-stepper';
+export * from './sortable-list';
+export * from './transfer-list';
 export * from './nullable-number-input';
 export * from './option';
 export * from './bigint-input';
 export * from './nullable-bigint-input';
 export * from './password-input';
 export * from './segmented-input';
+export * from './segmented-select';
 export * from './switch';
 export * from './tag-input';
 export * from './tags-input';
@@ -54,6 +65,13 @@ export * from './radio-group';
 export * from './slider-input';
 export * from './range-slider';
 export * from './otp-input';
+export * from './time-format';
+export * from './time-select';
+export * from './time-select-base';
+export * from './nullable-time-select';
+export * from './date-time-select';
+export * from './date-time-select-base';
+export * from './nullable-date-time-select';
 export * from './plain-date-input';
 export * from './nullable-plain-date-input';
 export * from './plain-time-input';

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

@@ -1,4 +1,4 @@
-import { Renderable, TNode, Value } from '@tempots/dom';
+import { TNode, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { DropdownOption } from './option';
 import { BaseControlOptions, ControlOptions } from '../control';
@@ -95,4 +95,4 @@ export declare function BaseMultiSelectControl<T>(options: BaseControlOptions<T[
  * @param options - Controller options for the multi-select control.
  * @returns A renderable form control component with wrapper.
  */
-export declare function MultiSelectControl<T>(options: ControlOptions<T[], MultiSelectOptions<T>>): Renderable;
+export declare function MultiSelectControl<T>(options: ControlOptions<T[], MultiSelectOptions<T>>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -59,4 +59,4 @@ export declare function BaseNativeSelectControl<T>(options: BaseControlOptions<T
  * @param options - Controller options for the native select control.
  * @returns A renderable form control component with wrapper.
  */
-export declare function NativeSelectControl<T>(options: ControlOptions<T, NativeSelectOptions<T>>): Renderable;
+export declare function NativeSelectControl<T>(options: ControlOptions<T, NativeSelectOptions<T>>): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -0,0 +1,55 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainDate } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * Configuration options for the {@link NullableDateSelect} component.
+ */
+export type NullableDateSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date, or null when unset. */
+    value: Value<PlainDate | null>;
+    /** Callback invoked when the date changes (receives null when cleared). */
+    onChange?: (date: PlainDate | null) => void;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Predicate returning true if a date should be disabled. */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** The day the week starts on (0=Sun, 1=Mon). @default 0 */
+    weekStartsOn?: Value<number>;
+    /** Format a PlainDate for display. Defaults to ISO string. */
+    formatDate?: (date: PlainDate) => string;
+    /** Placeholder shown when no date is selected. @default i18n dateRangeSelectDate */
+    placeholder?: string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A dropdown single-date selector where the value may be null.
+ *
+ * Displays the selected date in a styled trigger button, or a placeholder when
+ * no date is selected. A reset (clear) button is shown in the trigger when a
+ * date is set, allowing the user to clear back to null.
+ *
+ * Use {@link DateSelect} when a date is always required.
+ *
+ * @param options - Configuration for the nullable date selector
+ * @returns A nullable date selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { NullableDateSelect } from '@tempots/beatui'
+ *
+ * const date = prop<PlainDate | null>(null)
+ * NullableDateSelect({
+ *   value: date,
+ *   onChange: v => date.set(v),
+ *   placeholder: 'Select a date',
+ * })
+ * ```
+ */
+export declare function NullableDateSelect(options: NullableDateSelectOptions): TNode;