@smitch/fluid/lib/counter/Counter.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { twMerge } from "tailwind-merge";
import { FaPlus, FaMinus } from "react-icons/fa6";
import { Input, Button, Label } from "..";
var Counter = function (_a) {
    var _b = _a.name, name = _b === void 0 ? "counter" : _b, _c = _a.id, id = _c === void 0 ? "counter" : _c, _d = _a.className, className = _d === void 0 ? "font-semibold" : _d, _e = _a.min, min = _e === void 0 ? 0 : _e, max = _a.max, _f = _a.value, value = _f === void 0 ? 1 : _f, _g = _a.step, step = _g === void 0 ? 1 : _g, onCountChange = _a.onCountChange, _h = _a.btnShape, btnShape = _h === void 0 ? "circle" : _h, _j = _a.btnBackground, btnBackground = _j === void 0 ? "info" : _j, _k = _a.btnColor, btnColor = _k === void 0 ? "light" : _k, _l = _a.size, size = _l === void 0 ? "md" : _l, _m = _a.spacing, spacing = _m === void 0 ? "2" : _m, label = _a.label, _o = _a.labelIsBold, labelIsBold = _o === void 0 ? true : _o, _p = _a.layout, layout = _p === void 0 ? "col" : _p, title = _a.title, _q = _a.hint, hint = _q === void 0 ? false : _q, _r = _a.inputStyles, inputStyles = _r === void 0 ? "max-w-[3em] border-neutral border-2" : _r, _s = _a.rounded, rounded = _s === void 0 ? "md" : _s;
    var _t = useState(value), total = _t[0], setTotal = _t[1];
    var _u = useState(false), error = _u[0], setError = _u[1];
    var input = useRef(null);
    var handleValueChange = function (value) {
        setTotal(value);
        onCountChange(value);
        input.current.valueAsNumber = value;
        ifError(value);
    };
    var plus = function () {
        var value = total + step;
        handleValueChange(value);
    };
    var minus = function () {
        var value = total - step;
        handleValueChange(value);
    };
    var handleChange = function (e) {
        var value = e.target.valueAsNumber;
        handleValueChange(value);
    };
    var ifError = function (value) {
        if (!value || value > max || value < min)
            setError(true);
        else
            setError(false);
    };
    return (_jsxs(Label, { label: label, isBold: labelIsBold, layout: layout, forId: id, size: size, type: "number", className: twMerge("counter group", className), "data-testid": "counter", children: [_jsxs("div", { className: "flex items-center gap-".concat(spacing), children: [_jsxs(Button, { disabled: total <= Number(min), onClick: minus, "aria-label": "Minus", title: "Minus", id: "minus", layout: btnShape, size: size, btnBackground: btnBackground, btnColor: btnColor, children: [_jsx(FaMinus, {}), _jsx("span", { className: "sr-only", children: "Minus" })] }), _jsx(Input, { name: name, id: id, type: "number", max: max, min: min, value: total, ref: input, onChange: handleChange, "data-testid": "counter-input", className: "!me-0 ".concat(inputStyles), size: size, title: title, placeholder: min === null || min === void 0 ? void 0 : min.toString(), rounded: rounded }), _jsxs(Button, { disabled: total >= Number(max), onClick: plus, "aria-label": "Plus", title: "Plus", id: "plus", layout: btnShape, size: size, btnBackground: btnBackground, btnColor: btnColor, children: [_jsx(FaPlus, {}), _jsx("span", { className: "sr-only", children: "Add" })] })] }), hint && (_jsx("p", { className: "hint text-sm font-normal mt-[.5em] dark:text-light ".concat(error && "text-error"), children: title }))] }));
};
export default Counter;
//# sourceMappingURL=Counter.js.map