@ducor/form/dist/slider.js

form package

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Controller, useFormContext } from "react-hook-form";
import Errors from "./components/errors";
import Label from "./components/label";
import { uuidv4 } from "./utils";
import { twMerge } from "tailwind-merge";
import HelperText from "./components/helperText";
export const Slider = ({ name, label, min = 0, max = 100, defaultValue = 0, withAsterisk, direction = "vertical", helperText, id, }) => {
    const { control, formState: { errors }, } = useFormContext();
    const controlId = id || uuidv4();
    return (_jsxs("div", { className: twMerge("flex", direction === "horizontal"
            ? "flex-row items-center gap-4"
            : "flex-col gap-2"), children: [label && (_jsx(Label, { id: controlId, label: label, withAsterisk: withAsterisk })), _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative', children: _jsx(Controller, { name: name, control: control, defaultValue: defaultValue, rules: {
                                        required: withAsterisk ? "This field is required" : false,
                                    }, render: ({ field }) => (_jsx("input", Object.assign({ type: 'range', min: min, max: max, id: controlId }, field, { value: field.value || min, onChange: (e) => field.onChange(e.target.value) }))) }) }), helperText && _jsx(HelperText, { helperText: helperText })] }), errors[name] && _jsx(Errors, { value: errors[name] })] })] }));
};