@drivy/cobalt/components/Form/Slider.js

Opinionated design system for Drivy's projects.

import React, { useState } from 'react';
import { Slider as Slider$1 } from '@ark-ui/react';
import cx from 'classnames';
import { FieldWrapper } from './field.js';

const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, ...restProps }) => {
    const value = Array.isArray(_value)
        ? _value
        : _value !== undefined && !isNaN(_value)
            ? [_value]
            : undefined;
    const defaultValue = Array.isArray(_defaultValue)
        ? _defaultValue
        : _defaultValue !== undefined && !isNaN(_defaultValue)
            ? [_defaultValue]
            : undefined;
    function initValue() {
        if (value !== undefined)
            return value;
        if (defaultValue !== undefined)
            return defaultValue;
        if (min !== undefined)
            return [min];
        return [0];
    }
    const [sliderValue, setSliderValue] = useState(() => initValue());
    return (React.createElement(FieldWrapper, { ...restProps, status: status, label: label, hint: hint },
        React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
                "cobalt-slider--disabled": disabled,
                "cobalt-slider--withHint": hint,
            }), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max, 
            // Need to force disbplaying in smaller spaces like popovers
            thumbSize: {
                width: 24,
                height: 24,
            }, onValueChange: ({ value: newValueArr }) => {
                setSliderValue(newValueArr);
                const newValue = newValueArr.length === 1 ? newValueArr[0] : newValueArr;
                onValueChange && onValueChange(newValue);
            } },
            React.createElement(Slider$1.Label, { className: FieldWrapper.labelClassName }, label),
            renderValue && (React.createElement("div", { className: "cobalt-slider__value-container" }, renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status))),
            React.createElement(Slider$1.Control, null,
                React.createElement(Slider$1.Track, null,
                    React.createElement(Slider$1.Range, null)),
                sliderValue.map((_v, i) => (React.createElement(Slider$1.Thumb, { key: i, index: i },
                    React.createElement(Slider$1.HiddenInput, null))))))));
};
const SliderValueMeta = ({ children }) => {
    return React.createElement("span", { className: "cobalt-slider__value-meta" }, children);
};

export { SliderValueMeta, Slider as default };
//# sourceMappingURL=Slider.js.map