@tempots/beatui 1.5.0 → 1.6.0

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';
@@ -36,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';
@@ -55,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/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;

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

@@ -146,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,
  * })
@@ -157,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}`,
@@ -169,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,
  * })
@@ -182,7 +182,7 @@ 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',
  *   })

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/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,