@smitch/fluid/lib/radiogroup/RadioGroup.js

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

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { Input, Label, Fieldset } from '..';
var layouts = {
    1: 'grid-cols-1',
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-4',
    5: 'grid-cols-5',
    6: 'grid-cols-6',
};
var RadioGroup = function (_a) {
    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.labelStyles, labelStyles = _c === void 0 ? '' : _c, legend = _a.legend, data = _a.data, name = _a.name, getIcon = _a.getIcon, _d = _a.icons, icons = _d === void 0 ? false : _d, onChange = _a.onChange, hideInput = _a.hideInput, _e = _a.columns, columns = _e === void 0 ? 1 : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.legendAlign, legendAlign = _g === void 0 ? 'center' : _g, _h = _a.legendBold, legendBold = _h === void 0 ? true : _h, _j = _a.hasBorder, hasBorder = _j === void 0 ? false : _j, _k = _a.spacing, spacing = _k === void 0 ? '4' : _k, _l = _a.roundedRadio, roundedRadio = _l === void 0 ? 'full' : _l;
    var _m = useState(''), checked = _m[0], setChecked = _m[1];
    var layoutStyles = useMemo(function () { return layouts[columns]; }, [columns]);
    var handleChange = function (event) {
        setChecked(event.target.value);
        if (onChange && event.type === 'change')
            onChange(event);
    };
    return (_jsx(Fieldset, { legendText: legend, legendSize: size, legendAlign: legendAlign, isBold: legendBold, hasBorder: hasBorder, children: _jsx("div", { className: twMerge("radiogroup group grid ".concat(layoutStyles, " gap-").concat(spacing, " ").concat(icons ? 'icons' : ''), className), children: data.map(function (item) {
                return (_jsx(Label, { label: getIcon ? getIcon(item.id) : item.name, layout: 'row_reverse', type: 'radio', className: labelStyles, size: size, children: _jsx(Input, { name: name, type: 'radio', value: item.id, onChange: handleChange, checked: item.id === checked, className: "".concat(hideInput ? 'opacity-0 w-0 h-0 -ml-1' : ''), size: size, rounded: roundedRadio }) }, item.id));
            }) }) }));
};
export default RadioGroup;
//# sourceMappingURL=RadioGroup.js.map