@tempots/beatui 1.4.0 → 1.6.0

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

@@ -0,0 +1,68 @@
+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 NullableDateTimeSelect} component.
+ */
+export type NullableDateTimeSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date-time, or null when unset. */
+    value: Value<PlainDateTime | null>;
+    /** Callback invoked when the date-time changes (receives null when cleared). */
+    onChange?: (dateTime: PlainDateTime | 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>;
+    /** 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;
+    /** Placeholder shown when no date-time is selected. @default i18n dateTimeSelectDateTime */
+    placeholder?: string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A dropdown date-time selector where the value may be null.
+ *
+ * Displays the selected date-time in a styled trigger button, or a placeholder
+ * when nothing is selected. A reset (clear) button is shown when a date-time
+ * is set, allowing the user to clear back to null.
+ *
+ * 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 DateTimeSelect} when a date-time is always required.
+ *
+ * @param options - Configuration for the nullable date-time selector
+ * @returns A nullable date-time selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { NullableDateTimeSelect } from '@tempots/beatui'
+ *
+ * const dt = prop<PlainDateTime | null>(null)
+ * NullableDateTimeSelect({
+ *   value: dt,
+ *   onChange: v => dt.set(v),
+ *   placeholder: 'Select date and time',
+ * })
+ * ```
+ */
+export declare function NullableDateTimeSelect(options: NullableDateTimeSelectOptions): TNode;

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

@@ -0,0 +1,64 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainTime } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * Configuration options for the {@link NullableTimeSelect} component.
+ */
+export type NullableTimeSelectOptions = Merge<CommonInputOptions, {
+    /** The selected time, or null when unset. */
+    value: Value<PlainTime | null>;
+    /** Callback invoked when the time changes (receives null when cleared). */
+    onChange?: (time: PlainTime | null) => void;
+    /** Callback invoked on blur. */
+    onBlur?: () => void;
+    /** Theme color. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Whether to show seconds. @default false */
+    showSeconds?: Value<boolean>;
+    /** Whether to use 12-hour format. When omitted, auto-detected from the current 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. @default false */
+    showNow?: Value<boolean>;
+    /** Format a PlainTime for display. When omitted, uses locale-aware 12/24-hour format. */
+    formatTime?: (time: PlainTime) => string;
+    /** Placeholder shown when no time is selected. @default i18n timeSelectTime */
+    placeholder?: string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A dropdown time selector where the value may be null.
+ *
+ * Displays the selected time in a styled trigger button, or a placeholder when
+ * no time is selected. A reset (clear) button is shown in the trigger when a
+ * time is set, allowing the user to clear back to null.
+ *
+ * When no custom `formatTime` is provided, the display adapts to the
+ * locale's 12/24-hour convention (or the explicit `use12Hour` prop).
+ *
+ * Use {@link TimeSelect} when a time is always required.
+ *
+ * @param options - Configuration for the nullable time selector
+ * @returns A nullable time selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { NullableTimeSelect } from '@tempots/beatui'
+ *
+ * const time = prop<PlainTime | null>(null)
+ * NullableTimeSelect({
+ *   value: time,
+ *   onChange: v => time.set(v),
+ *   placeholder: 'Select a time',
+ * })
+ * ```
+ */
+export declare function NullableTimeSelect(options: NullableTimeSelectOptions): TNode;

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

@@ -1,4 +1,4 @@
-import { Value } from '@tempots/dom';
+import { Value, TNode } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { Merge } from '@tempots/std';
 /**
@@ -15,44 +15,9 @@ export type NumberInputOptions = Merge<InputOptions<number>, {
     min?: Value<number>;
     /** Maximum allowed value. Disables increment when reached. @default 10 */
     max?: Value<number>;
+    /** Unit of measurement label displayed after the input (e.g., "kg", "px", "%"). Rendered before stepper buttons. */
+    unit?: TNode;
+    /** When true, displays the value formatted with locale-aware grouping and decimals (derived from step) when the input is not focused. @default false */
+    formatted?: Value<boolean>;
 }>;
-/**
- * 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/number-stepper.d.ts

@@ -0,0 +1,53 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+import { ThemeColorName } from '../../../tokens';
+/** Orientation of the stepper layout. */
+export type NumberStepperOrientation = 'horizontal' | 'vertical';
+/** Configuration options for the {@link NumberStepper} component. */
+export interface NumberStepperOptions {
+    /** The current numeric value.  @default 1*/
+    value: Value<number>;
+    /** Callback invoked when the value changes. */
+    onChange: (value: number) => void;
+    /** Minimum allowed value. @default 0 */
+    min?: Value<number>;
+    /** Maximum allowed value. @default 100 */
+    max?: Value<number>;
+    /** Increment/decrement step. @default 1 */
+    step?: Value<number>;
+    /** Size of the stepper. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Theme color. @default 'base' */
+    color?: Value<ThemeColorName>;
+    /** Whether the stepper is disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Layout orientation. @default 'horizontal' */
+    orientation?: Value<NumberStepperOrientation>;
+}
+/**
+ * A quantity selector with compact +/- buttons and a displayed value.
+ *
+ * Unlike {@link NumberInput}, this component does not include a text field —
+ * it shows the current value between decrement and increment buttons. Ideal
+ * for cart quantities, counters, and other discrete value adjustments.
+ *
+ * Supports both horizontal (default) and vertical orientation.
+ *
+ * @param options - Configuration for the number stepper
+ * @returns A number stepper element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { NumberStepper } from '@tempots/beatui'
+ *
+ * const qty = prop(1)
+ * NumberStepper({
+ *   value: qty,
+ *   onChange: v => qty.set(v),
+ *   min: 0,
+ *   max: 99,
+ * })
+ * ```
+ */
+export declare function NumberStepper(options: NumberStepperOptions): TNode;

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

@@ -0,0 +1,75 @@
+import { type TNode, Value, type Merge } from '@tempots/dom';
+import { CommonInputOptions } from './input-options';
+import type { PlainDate } from '../../../temporal/types';
+import { ThemeColorName } from '../../../tokens';
+/**
+ * An open date range where either or both dates may be null/undefined.
+ */
+export type OpenDateRange = [
+    PlainDate | null | undefined,
+    PlainDate | null | undefined
+];
+/**
+ * Configuration options for the {@link OpenDateRangeSelect} component.
+ *
+ * Either or both dates can be null/undefined, allowing open-ended ranges
+ * like "from X onwards" or "up to Y".
+ */
+export type OpenDateRangeSelectOptions = Merge<CommonInputOptions, {
+    /** The selected date range as `[start, end]`. Either value may be null/undefined. */
+    value: Value<OpenDateRange>;
+    /** Callback invoked when the range changes. */
+    onChange?: (range: OpenDateRange) => 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;
+    /** Label for the start picker. @default i18n dateRangeStart */
+    startLabel?: string;
+    /** Label for the end picker. @default i18n dateRangeEnd */
+    endLabel?: string;
+    /** Placeholder when no date is selected. @default i18n dateRangeNoLimit */
+    emptyPlaceholder?: string;
+    /** Content to render before the display text. */
+    before?: TNode;
+    /** Content to render after the display text. */
+    after?: TNode;
+}>;
+/**
+ * A date range selector that allows open-ended ranges.
+ *
+ * Displays the selected range in a styled trigger button. Clicking opens a
+ * flyout panel with two side-by-side {@link DatePicker} components for
+ * selecting start and end dates independently. Either or both dates can be
+ * null/undefined, enabling "from X onwards" or "up to Y" ranges.
+ *
+ * Use {@link DateRangeSelect} when both dates are always required.
+ *
+ * @param options - Configuration for the open date range selector
+ * @returns An open date range selector element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { OpenDateRangeSelect } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * // Open-ended range: from a date onwards
+ * const range = prop<OpenDateRange>([
+ *   Temporal.PlainDate.from('2026-01-01'),
+ *   null,
+ * ])
+ * OpenDateRangeSelect({
+ *   value: range,
+ *   onChange: v => range.set(v),
+ *   emptyPlaceholder: 'No limit',
+ * })
+ * ```
+ */
+export declare function OpenDateRangeSelect(options: OpenDateRangeSelectOptions): TNode;

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

@@ -55,7 +55,7 @@ export interface OtpInputOptions {
  * const code = prop('')
  * OtpInput({
  *   value: code,
- *   onChange: code.set,
+ *   onChange: v => code.set(v),
  *   onComplete: (v) => console.log('Code entered:', v),
  *   length: 6,
  * })
@@ -74,4 +74,4 @@ export interface OtpInputOptions {
  * })
  * ```
  */
-export declare function OtpInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OtpInputOptions): import("@tempots/dom").Renderable;
+export declare function OtpInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OtpInputOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -22,7 +22,7 @@ import { InputOptions } from './input-options';
  * const password = prop('')
  * PasswordInput({
  *   value: password,
- *   onChange: password.set,
+ *   onChange: v => password.set(v),
  *   placeholder: 'Enter password',
  * })
  * ```

package/dist/types/components/form/input/radio-group.d.ts

@@ -72,7 +72,7 @@ export interface RadioGroupOptions<V = string> {
  *     { value: 'dark', label: 'Dark Mode' },
  *   ],
  *   value: theme,
- *   onChange: theme.set,
+ *   onChange: v => theme.set(v),
  *   orientation: 'horizontal'
  * })
  * ```

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

@@ -14,6 +14,17 @@ export interface RangeSliderTick {
     /** Optional label displayed near the tick mark */
     label?: string;
 }
+/**
+ * Definition of a marker dot on the range slider track.
+ * Markers are small circles rendered directly on the track,
+ * unlike ticks which extend outward from the track.
+ */
+export interface RangeSliderMarker {
+    /** The numeric value where this marker appears */
+    value: number;
+    /** Optional label displayed below (horizontal) or beside (vertical) the marker */
+    label?: string;
+}
 /**
  * Style configuration for an individual track segment.
  */
@@ -70,10 +81,16 @@ export interface RangeSliderOptions {
     /** Callback for multi-point mode changes */
     onPointsChange?: (points: number[]) => void;
     /**
-     * Tick marks along the slider track.
+     * Tick marks along the slider track (extend outward from the track).
      * Can be `true` for automatic step-based ticks, or an array of custom tick definitions.
      */
     ticks?: Value<boolean | RangeSliderTick[]>;
+    /**
+     * Marker dots rendered directly on the track surface.
+     * Can be `true` for automatic step-based markers, or an array of custom marker definitions.
+     * Unlike ticks, markers are small circles that sit on the track itself.
+     */
+    markers?: Value<boolean | RangeSliderMarker[]>;
     /**
      * Whether to show the current value label(s) above the thumb(s).
      * @default false
@@ -129,7 +146,7 @@ export interface RangeSliderOptions {
  * // Simple single-value slider
  * const vol = prop(50)
  * RangeSlider({
- *   value: vol, onChange: vol.set,
+ *   value: vol, onChange: v => vol.set(v),
  *   min: 0, max: 100,
  *   showValue: true,
  * })
@@ -140,7 +157,7 @@ export interface RangeSliderOptions {
  * // Dual-thumb range selector
  * const priceRange = prop<[number, number]>([20, 80])
  * RangeSlider({
- *   range: priceRange, onRangeChange: priceRange.set,
+ *   range: priceRange, onRangeChange: v => priceRange.set(v),
  *   min: 0, max: 100,
  *   showValue: true,
  *   formatValue: v => `$${v}`,
@@ -152,7 +169,7 @@ export interface RangeSliderOptions {
  * // Multi-point slider
  * const pts = prop([10, 40, 70])
  * RangeSlider({
- *   points: pts, onPointsChange: pts.set,
+ *   points: pts, onPointsChange: v => pts.set(v),
  *   min: 0, max: 100,
  *   showValue: true,
  * })
@@ -165,11 +182,11 @@ export interface RangeSliderOptions {
  * html.div(
  *   attr.style('height: 200px'),
  *   RangeSlider({
- *     value: vol, onChange: vol.set,
+ *     value: vol, onChange: v => vol.set(v),
  *     min: 0, max: 100,
  *     orientation: 'vertical',
  *   })
  * )
  * ```
  */
-export declare function RangeSlider({ min: minOpt, max: maxOpt, step: stepOpt, disabled, readonly: readonlyOpt, size, color, value, onChange, range, onRangeChange, points, onPointsChange, ticks, showValue, formatValue, segmentStyles, renderThumb, orientation: orientationOpt, }: RangeSliderOptions): import("@tempots/dom").Renderable;
+export declare function RangeSlider({ min: minOpt, max: maxOpt, step: stepOpt, disabled, readonly: readonlyOpt, size, color, value, onChange, range, onRangeChange, points, onPointsChange, ticks, markers, showValue, formatValue, segmentStyles, renderThumb, orientation: orientationOpt, }: RangeSliderOptions): import("@tempots/dom").Renderable;

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

@@ -47,7 +47,7 @@ export type RatingInputOptions = InputOptions<number> & {
  * const rating = prop(3.5)
  * RatingInput({
  *   value: rating,
- *   onChange: rating.set,
+ *   onChange: v => rating.set(v),
  *   max: 5,
  *   rounding: 0.5,
  * })

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

@@ -29,6 +29,10 @@ export interface SegmentedInputOptions<T extends Record<string, TNode>, K extend
      * When not set, uses the default white indicator with primary-tinted active text.
      */
     color?: Value<ThemeColorName>;
+    /**
+     * Subset of keys to display. If not provided, all keys are displayed.
+     */
+    subset?: Value<K[]>;
 }
 /**
  * A segmented control input that allows selecting one of several mutually exclusive options.
@@ -58,7 +62,7 @@ export interface SegmentedInputOptions<T extends Record<string, TNode>, K extend
  *     table: 'Table',
  *   },
  *   value: view,
- *   onChange: view.set,
+ *   onChange: v => view.set(v),
  *   size: 'md',
  * })
  * ```
@@ -76,4 +80,4 @@ export interface SegmentedInputOptions<T extends Record<string, TNode>, K extend
  * })
  * ```
  */
-export declare function SegmentedInput<T extends Record<string, TNode>>({ options, value, onChange, size, disabled, variant, color, }: SegmentedInputOptions<T, keyof T>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function SegmentedInput<T extends Record<string, TNode>>({ options, value, onChange, size, disabled, variant, color, subset, }: SegmentedInputOptions<T, keyof T>, ...children: TNode[]): import("@tempots/dom").Renderable;

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

@@ -0,0 +1,84 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+import { ThemeColorName } from '../../../tokens';
+import { SelectOption } from './option';
+/**
+ * Configuration options for the {@link SegmentedSelect} component.
+ *
+ * @template T - The type of the selectable option values
+ */
+export interface SegmentedSelectOptions<T> {
+    /** The list of selectable options. Groups are flattened and breaks are ignored. */
+    options: Value<SelectOption<T>[]>;
+    /** The currently selected value */
+    value: Value<T>;
+    /** Callback invoked when a different option is selected */
+    onChange?: (value: T) => void;
+    /** Custom equality function for comparing option values. @default strict equality (===) */
+    equality?: (a: T, b: T) => boolean;
+    /** Visual size of the segmented control. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether the segmented control is disabled. @default false */
+    disabled?: Value<boolean>;
+    /**
+     * Shape variant. `'pill'` uses fully rounded corners, `'squared'` uses control-like
+     * border-radius and taller padding to match the height of regular inputs like TextInput.
+     * @default 'squared'
+     */
+    variant?: Value<'pill' | 'squared'>;
+    /**
+     * Theme color for the active segment indicator and text, using solid button-style coloring.
+     * When not set, uses the default white indicator with primary-tinted active text.
+     */
+    color?: Value<ThemeColorName>;
+}
+/**
+ * A segmented control that allows selecting one value from a list of typed options.
+ *
+ * Renders a horizontal row of clickable segments with a sliding indicator, similar to
+ * {@link SegmentedInput}, but accepts {@link SelectOption} arrays with typed values
+ * instead of a static key-label record. This makes it suitable for use with the same
+ * option data used by {@link NativeSelect} or {@link DropdownInput}.
+ *
+ * Groups are flattened and breaks are ignored since segments are rendered as a flat row.
+ * Disabled individual options are respected.
+ *
+ * @template T - The type of the selectable option values
+ * @param options - Configuration options for the segmented select
+ * @param children - Additional child nodes to render after the control
+ * @returns A styled segmented control element with animated indicator
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { SegmentedSelect, Option } from '@tempots/beatui'
+ *
+ * const selected = prop('list')
+ * SegmentedSelect({
+ *   options: [
+ *     Option.value('list', 'List'),
+ *     Option.value('grid', 'Grid'),
+ *     Option.value('table', 'Table'),
+ *   ],
+ *   value: selected,
+ *   onChange: v => selected.set(v),
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With typed enum values
+ * type Status = 'active' | 'inactive' | 'archived'
+ * const status = prop<Status>('active')
+ * SegmentedSelect<Status>({
+ *   options: [
+ *     Option.value('active', 'Active'),
+ *     Option.value('inactive', 'Inactive'),
+ *     Option.value('archived', 'Archived', { disabled: true }),
+ *   ],
+ *   value: status,
+ *   onChange: v => status.set(v),
+ * })
+ * ```
+ */
+export declare function SegmentedSelect<T>({ options, value, onChange, equality, size, disabled, variant, color, }: SegmentedSelectOptions<T>, ...children: TNode[]): import("@tempots/dom").Renderable;

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

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

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

@@ -42,7 +42,7 @@ export type SliderInputOptions = Merge<InputOptions<number>, {
  * const volume = prop(50)
  * SliderInput({
  *   value: volume,
- *   onChange: volume.set,
+ *   onChange: v => volume.set(v),
  *   min: 0,
  *   max: 100,
  *   step: 1,
@@ -105,7 +105,7 @@ export type NullableSliderInputOptions = Merge<InputOptions<number | null>, {
  * const brightness = prop<number | null>(null)
  * NullableSliderInput({
  *   value: brightness,
- *   onChange: brightness.set,
+ *   onChange: v => brightness.set(v),
  *   min: 0,
  *   max: 100,
  *   step: 5,

package/dist/types/components/form/input/sortable-list.d.ts

@@ -0,0 +1,68 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+/** Visual variant for the sortable list items. */
+export type SortableListVariant = 'bordered' | 'card' | 'plain';
+/** Configuration options for the {@link SortableList} component. */
+export interface SortableListOptions<T> {
+    /** The ordered list of items. */
+    items: Value<T[]>;
+    /** Callback invoked with the reordered list after a drag-and-drop or keyboard reorder. */
+    onChange: (items: T[]) => void;
+    /**
+     * Render function for each item. The `handle` TNode is a drag grip
+     * that should be placed inside the returned element to serve as the
+     * drag handle. Only the handle initiates drag — the rest of the item
+     * content remains interactive.
+     */
+    renderItem: (item: T, handle: TNode) => TNode;
+    /** Extract a unique key from an item (used for identity). */
+    keyOf: (item: T) => string;
+    /** Whether drag-and-drop is disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Size variant. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Additional CSS class(es) applied to the list container. */
+    class?: Value<string>;
+    /**
+     * Visual variant for items.
+     * - `'bordered'` — border around each item (default)
+     * - `'card'` — elevated card with shadow, no border
+     * - `'plain'` — no border, no background — items blend into the page
+     * @default 'bordered'
+     */
+    variant?: Value<SortableListVariant>;
+    /** Gap between items. Mapped to CSS spacing tokens. @default 'md' */
+    gap?: Value<ControlSize>;
+    /**
+     * Iconify icon identifier for the drag handle.
+     * @default 'lucide:grip-vertical'
+     */
+    handleIcon?: Value<string>;
+}
+/**
+ * A drag-and-drop reorderable list.
+ *
+ * Each item receives a drag handle TNode that the consumer places inside
+ * their render function. Dragging initiates only from the handle. Items
+ * can also be reordered via keyboard using Alt+ArrowUp / Alt+ArrowDown.
+ *
+ * @typeParam T - The item type
+ * @param options - Configuration for the sortable list
+ * @returns A sortable list element
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { SortableList } from '@tempots/beatui'
+ *
+ * const items = prop(['Apple', 'Banana', 'Cherry'])
+ * SortableList({
+ *   items,
+ *   onChange: v => items.set(v),
+ *   renderItem: (item, handle) =>
+ *     html.div(attr.class('flex items-center gap-2'), handle, item),
+ *   keyOf: item => item,
+ * })
+ * ```
+ */
+export declare function SortableList<T>(options: SortableListOptions<T>): TNode;

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

@@ -56,7 +56,7 @@ export type SwitchOptions = {
  * const enabled = prop(false)
  * Switch({
  *   value: enabled,
- *   onChange: enabled.set,
+ *   onChange: v => enabled.set(v),
  *   size: 'md',
  *   color: 'primary',
  * })

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

@@ -30,7 +30,7 @@ export type TextAreaOptions = Merge<InputOptions<string>, {
  * const bio = prop('')
  * TextArea({
  *   value: bio,
- *   onChange: bio.set,
+ *   onChange: v => bio.set(v),
  *   placeholder: 'Tell us about yourself...',
  *   rows: 5,
  *   size: 'md',