@tempots/beatui 1.5.0 → 1.6.0

package/dist/types/components/data/time-picker.d.ts

@@ -0,0 +1,54 @@
+import { Value, type Renderable } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+import type { PlainTime } from '../../temporal/types';
+/**
+ * Configuration options for the {@link TimePicker} component.
+ * Uses Temporal `PlainTime` for time values — no date or timezone concerns.
+ */
+export interface TimePickerOptions {
+    /** The currently selected time. */
+    value?: Value<PlainTime | null>;
+    /** Callback invoked when a time is selected. */
+    onSelect?: (time: PlainTime) => void;
+    /** Whether to show the seconds column. @default false */
+    showSeconds?: Value<boolean>;
+    /** Whether the picker uses 12-hour format with AM/PM. When omitted, auto-detected from the current locale. */
+    use12Hour?: Value<boolean>;
+    /** Theme color for the selected highlight. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Visual size of the time picker. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether the time picker is disabled. @default false */
+    disabled?: 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 that sets the time to the current local time. @default false */
+    showNow?: Value<boolean>;
+}
+/**
+ * A time picker component for selecting hours, minutes, and optionally seconds.
+ *
+ * Uses Temporal `PlainTime` internally — a time-only type with no date or
+ * timezone concerns. Renders scrollable columns for hours and minutes (and
+ * optionally seconds), with support for 12-hour format with AM/PM.
+ *
+ * @param options - Configuration for the time picker
+ * @returns A time picker element with time selection capability
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { TimePicker } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * const time = prop<PlainTime | null>(Temporal.PlainTime.from('14:30'))
+ * TimePicker({
+ *   value: time,
+ *   onSelect: v => time.set(v),
+ * })
+ * ```
+ */
+export declare function TimePicker(options?: TimePickerOptions): Renderable;

package/dist/types/components/data/virtual-scrolling/index.d.ts

@@ -0,0 +1 @@
+export * from './virtual-list';

package/dist/types/components/data/virtual-scrolling/virtual-list.d.ts

@@ -0,0 +1,91 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Configuration options for the {@link VirtualList} component.
+ *
+ * A virtualized list that renders only visible items for performance with
+ * large datasets. Items outside the visible viewport are not rendered in the
+ * DOM, dramatically reducing memory usage and rendering time.
+ *
+ * @typeParam T - The type of items in the list
+ */
+export interface VirtualListOptions<T> {
+    /** The array of items to render. May be a static array or a reactive signal. */
+    items: Value<T[]>;
+    /**
+     * A function that renders a single item. Called only for visible items.
+     *
+     * @param item - The item data
+     * @param index - The item's index in the full items array
+     * @returns A TNode representing the rendered item
+     */
+    renderItem: (item: T, index: number) => TNode;
+    /**
+     * The height of each item. Can be a fixed number (pixels) for uniform-height
+     * lists, or a function that returns the height for a given index for
+     * variable-height lists.
+     *
+     * Fixed heights are more performant as they avoid cumulative height calculations.
+     */
+    itemHeight: number | ((index: number) => number);
+    /**
+     * Number of extra items to render above and below the visible viewport.
+     * Larger values reduce the chance of blank flickers during fast scrolling
+     * at the cost of rendering more items.
+     *
+     * @default 5
+     */
+    overscan?: Value<number>;
+    /**
+     * The height of the scroll container. Can be a pixel number (e.g. 400) or
+     * a CSS string (e.g. '100%', '50vh').
+     */
+    containerHeight: Value<number | string>;
+    /** Additional CSS class names to apply to the outer container element. */
+    class?: Value<string>;
+}
+/**
+ * A virtualized list component that renders only visible items for high
+ * performance with large datasets (10,000+ items).
+ *
+ * The component maintains a scroll container with a spacer element sized to
+ * the total height of all items. Only items within the visible viewport (plus
+ * an overscan buffer) are rendered in the DOM.
+ *
+ * Supports both fixed-height items (more performant) and variable-height items
+ * via a height function.
+ *
+ * @typeParam T - The type of items in the list
+ * @param options - Configuration for the virtual list
+ * @returns A scroll container with virtualized item rendering
+ *
+ * @example
+ * ```typescript
+ * // Fixed-height virtual list with 10,000 items
+ * const items = prop(Array.from({ length: 10000 }, (_, i) => ({ id: i, label: `Item ${i}` })))
+ *
+ * VirtualList({
+ *   items,
+ *   itemHeight: 48,
+ *   containerHeight: 400,
+ *   renderItem: (item, index) =>
+ *     html.div(
+ *       attr.class('flex items-center px-4 border-b'),
+ *       attr.style('height: 48px'),
+ *       `${index}: ${item.label}`
+ *     ),
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Variable-height items
+ * VirtualList({
+ *   items: myItems,
+ *   itemHeight: index => index % 3 === 0 ? 72 : 48,
+ *   containerHeight: '100%',
+ *   overscan: 10,
+ *   renderItem: (item) => html.div(item.label),
+ * })
+ * ```
+ */
+export declare function VirtualList<T>({ items, renderItem, itemHeight, overscan: overscanOpt, containerHeight, class: className, }: VirtualListOptions<T>): TNode;

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

@@ -35,7 +35,7 @@ export type CheckboxInputOptions = InputOptions<boolean> & {
  * const agreed = prop(false)
  * CheckboxInput({
  *   value: agreed,
- *   onChange: agreed.set,
+ *   onChange: v => agreed.set(v),
  *   placeholder: 'I agree to the terms and conditions',
  * })
  * ```

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

@@ -31,7 +31,7 @@ export type ColorInputOptions = Omit<InputOptions<string>, 'value'> & {
  * const color = prop('#ff6600')
  * ColorInput({
  *   value: color,
- *   onChange: color.set,
+ *   onChange: v => color.set(v),
  *   placeholder: '#rrggbb',
  * })
  * ```

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

@@ -0,0 +1,12 @@
+/**
+ * Draw a full hue rainbow strip (0→360) on a canvas.
+ */
+export declare function drawHueCanvas({ ctx, width, height, }: {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+}): void;
+/**
+ * Draw a checkerboard pattern (used as background for alpha strips/swatches).
+ */
+export declare function drawCheckerboard(ctx: CanvasRenderingContext2D, width: number, height: number, size?: number): void;

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

@@ -0,0 +1,71 @@
+import { Renderable, Value, TNode, Signal, Prop } from '@tempots/dom';
+import { Color } from '@tempots/std';
+export interface RenderOptions {
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    ctx: CanvasRenderingContext2D;
+}
+export interface ChannelPickerOptions {
+    /** Current value. */
+    value: Value<number>;
+    /** Callback on value change. */
+    onChange?: (value: number) => void;
+    /** Callback on value input. */
+    onInput?: (value: number) => void;
+    /** Function to draw the strip background. */
+    draw: (options: RenderOptions) => void;
+    /** Dependencies that trigger a redraw. */
+    dependencies?: (Signal<any> | Prop<never>)[];
+    /** Min for the number input. */
+    min: Value<number>;
+    /** Max for the number input. */
+    max: Value<number>;
+    /** Step for the number input. */
+    step?: Value<number>;
+    unit?: TNode;
+    /** Handle color as CSS string. */
+    handleColor?: Value<string>;
+    /** Whether disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Strip height. @default 14 */
+    stripHeight?: Value<number>;
+    label: Value<string>;
+}
+export declare function ChannelPicker(options: ChannelPickerOptions): Renderable;
+export interface AlphaChannelPickerOptions {
+    /** Current value. */
+    value: Value<number>;
+    /** The color to use for the strip. */
+    color: Signal<Color>;
+    /** Callback on value change. */
+    onChange?: (value: number) => void;
+    /** Callback on value input. */
+    onInput?: (value: number) => void;
+    /** Dependencies that trigger a redraw. */
+    dependencies?: (Signal<any> | Prop<never>)[];
+    /** Whether disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Label for the alpha channel. @default 'Alpha' */
+    label?: Value<string>;
+}
+export declare function AlphaChannelPicker(options: AlphaChannelPickerOptions): Renderable;
+export interface ColorFieldOptions {
+    render: (options: RenderOptions) => void;
+    dependencies?: Signal<any>[];
+    handlePosition?: Signal<{
+        x: number;
+        y: number;
+    }>;
+    handleColor?: Value<string>;
+    disabled?: Value<boolean>;
+    onChange?: (value: {
+        x: number;
+        y: number;
+    }) => void;
+    onInput?: (value: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare function ColorField(options: ColorFieldOptions): Renderable;

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

@@ -0,0 +1,20 @@
+import { Renderable, Value } from '@tempots/dom';
+export interface HexColorPickerOptions {
+    /** The current color as a hex string (e.g. '#ff0000', '#ff000080'). */
+    value: Value<string>;
+    /** Callback with the new hex string. */
+    onChange?: (value: string) => void;
+    /** Callback with the new hex string (on input). */
+    onInput?: (value: string) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone hex color picker with color field, hue channel strip,
+ * hex text input, optional alpha, and color swatch preview.
+ *
+ * Accepts and emits hex strings. Internally converts to RGBA (0-1) for
+ * the color field and channel strips.
+ */
+export declare function HexColorPicker(options: HexColorPickerOptions): Renderable;

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

@@ -0,0 +1,14 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type HSLA } from '@tempots/std/color';
+export interface HslColorPickerOptions {
+    value: Value<HSLA>;
+    onChange?: (value: HSLA) => void;
+    onInput?: (value: HSLA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * The HSL format input panel.
+ */
+export declare function HslColorPicker(options: HslColorPickerOptions): Renderable;

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

@@ -0,0 +1,15 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type HWBA } from '@tempots/std/color';
+export interface HwbColorPickerOptions {
+    value: Value<HWBA>;
+    onChange?: (value: HWBA) => void;
+    onInput?: (value: HWBA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone HWB color picker with color field, H/W/B channel strips,
+ * optional alpha, and color swatch preview.
+ */
+export declare function HwbColorPicker(options: HwbColorPickerOptions): Renderable;

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

@@ -0,0 +1,7 @@
+export * from './canvas-draw';
+export * from './channel-picker';
+export * from './hex-color-picker';
+export * from './rgb-color-picker';
+export * from './hsl-color-picker';
+export * from './hwb-color-picker';
+export * from './oklch-color-picker';

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

@@ -0,0 +1,15 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type OKLCHA } from '@tempots/std/color';
+export interface OklchColorPickerOptions {
+    value: Value<OKLCHA>;
+    onChange?: (value: OKLCHA) => void;
+    onInput?: (value: OKLCHA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone OKLCH color picker with color field, L/C/H channel strips,
+ * optional alpha, and color swatch preview.
+ */
+export declare function OklchColorPicker(options: OklchColorPickerOptions): Renderable;

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

@@ -0,0 +1,17 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type RGBA } from '@tempots/std/color';
+export interface RgbColorPickerOptions {
+    value: Value<RGBA>;
+    onChange?: (value: RGBA) => void;
+    onInput?: (value: RGBA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone RGB color picker with color field, R/G/B channel strips,
+ * optional alpha, and color swatch preview.
+ *
+ * RGBA channels are 0–1 internally. Displayed as 0–100% in the inputs.
+ */
+export declare function RgbColorPicker(options: RgbColorPickerOptions): Renderable;

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

@@ -40,7 +40,7 @@ export type ColorSwatchInputOptions = InputOptions<string> & {
  * const color = prop('#3498db')
  * ColorSwatchInput({
  *   value: color,
- *   onChange: color.set,
+ *   onChange: v => color.set(v),
  *   displayValue: true,
  *   swatchSize: 40,
  * })

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))

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,7 +18,7 @@ import { InputOptions } from './input-options';
  * const appointment = prop(new Date())
  * DateTimeInput({
  *   value: appointment,
- *   onChange: appointment.set,
+ *   onChange: v => appointment.set(v),
  * })
  * ```
  *

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'),

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),
  * })
  * ```
  *