@tempots/beatui 1.2.2 → 1.3.0

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

@@ -1,143 +0,0 @@
-import { Value, TNode } from '@tempots/dom';
-import { ControlSize } from '../../theme';
-import { ThemeColorName } from '../../../tokens';
-/**
- * Definition of a tick mark on the slider track.
- */
-export interface SliderTick {
-    /** The numeric value where this tick appears */
-    value: number;
-    /** Optional label displayed below the tick mark */
-    label?: string;
-}
-/**
- * Configuration options for the {@link AdvancedSlider} component.
- *
- * Supports single value, range (two thumbs), and multi-point (arbitrary number
- * of thumbs) modes. Features tick marks, value labels, and customizable colors.
- */
-export interface AdvancedSliderOptions {
-    /** Minimum value of the slider range */
-    min?: Value<number>;
-    /** Maximum value of the slider range */
-    max?: Value<number>;
-    /** Step increment between valid values. @default 1 */
-    step?: Value<number>;
-    /** Whether the slider is disabled. @default false */
-    disabled?: Value<boolean>;
-    /** Visual size of the slider. @default 'md' */
-    size?: Value<ControlSize>;
-    /** Theme color for the filled track and thumbs. @default 'primary' */
-    color?: Value<ThemeColorName>;
-    /**
-     * Single value mode: the current slider value.
-     * Use this for a simple single-thumb slider.
-     */
-    value?: Value<number>;
-    /** Callback for single-value mode changes */
-    onChange?: (value: number) => void;
-    /**
-     * Range mode: a two-element array `[low, high]`.
-     * When provided, two thumbs are rendered.
-     */
-    range?: Value<[number, number]>;
-    /** Callback for range mode changes */
-    onRangeChange?: (range: [number, number]) => void;
-    /**
-     * Multi-point mode: an array of values, each getting its own thumb.
-     * When provided, multiple thumbs are rendered at initialization time.
-     * The number of points is fixed after component creation.
-     */
-    points?: Value<number[]>;
-    /** Callback for multi-point mode changes */
-    onPointsChange?: (points: number[]) => void;
-    /**
-     * Tick marks along the slider track.
-     * Can be `true` for automatic step-based ticks, or an array of custom tick definitions.
-     */
-    ticks?: Value<boolean | SliderTick[]>;
-    /**
-     * Whether to show the current value label(s) above the thumb(s).
-     * @default false
-     */
-    showValue?: Value<boolean>;
-    /**
-     * Custom formatter for the displayed value labels.
-     * @default (v) => String(v)
-     */
-    formatValue?: (value: number) => string;
-    /**
-     * Colors for individual segments between consecutive thumbs in multi-point mode.
-     * Each entry corresponds to the segment between thumb[i] and thumb[i+1].
-     * If fewer colors than segments are provided, remaining segments use the default color.
-     * If not provided, a single fill spanning all thumbs is used (existing behavior).
-     */
-    segmentColors?: Value<ThemeColorName[]>;
-    /**
-     * Custom renderer for the thumb element. When provided, replaces the default
-     * circular thumb with your custom content. The rendered content is placed
-     * inside the thumb container that handles positioning, ARIA attributes,
-     * keyboard navigation, and pointer events.
-     *
-     * @param index - The zero-based index of the thumb
-     * @param value - A reactive value holding the current thumb position
-     * @returns A TNode to render as the thumb
-     */
-    renderThumb?: (index: number, value: Value<number>) => TNode;
-}
-/**
- * An advanced slider component supporting single value, range selection,
- * and multi-point modes with tick marks and value display.
- *
- * - **Single mode**: Pass `value` and `onChange` for a standard single-thumb slider.
- * - **Range mode**: Pass `range` and `onRangeChange` for a two-thumb range selector.
- * - **Multi-point mode**: Pass `points` and `onPointsChange` for arbitrary number of thumbs.
- *
- * Additional features include configurable tick marks (automatic or custom),
- * value labels above the thumbs, step snapping, and theme-aware coloring.
- *
- * @param options - Configuration for the slider
- * @returns A styled slider element
- *
- * @example
- * ```ts
- * // Simple slider with value display
- * const vol = prop(50)
- * AdvancedSlider({
- *   value: vol, onChange: vol.set,
- *   min: 0, max: 100,
- *   showValue: true,
- *   ticks: true,
- * })
- * ```
- *
- * @example
- * ```ts
- * // Range slider
- * const priceRange = prop<[number, number]>([20, 80])
- * AdvancedSlider({
- *   range: priceRange, onRangeChange: priceRange.set,
- *   min: 0, max: 100, step: 5,
- *   ticks: [
- *     { value: 0, label: '$0' },
- *     { value: 50, label: '$50' },
- *     { value: 100, label: '$100' },
- *   ],
- *   showValue: true,
- *   formatValue: v => `$${v}`,
- * })
- * ```
- *
- * @example
- * ```ts
- * // Multi-point slider
- * const pts = prop([10, 40, 70])
- * AdvancedSlider({
- *   points: pts, onPointsChange: pts.set,
- *   min: 0, max: 100,
- *   showValue: true,
- *   color: 'green',
- * })
- * ```
- */
-export declare function AdvancedSlider({ min: minOpt, max: maxOpt, step: stepOpt, disabled, size, color, value, onChange, range, points, onRangeChange, onPointsChange, ticks, showValue, formatValue, segmentColors, renderThumb, }: AdvancedSliderOptions): import("@tempots/dom").Renderable;