@smitch/fluid
Version:
A Next/React ui-component libray.
27 lines (26 loc) • 1.49 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var layouts = {
horizontal: 'flex-row',
vertical: 'flex-col text-start',
};
var outlines = {
none: '',
thin: 'border-2',
thick: 'border-4',
};
var outlineColors = {
none: 'border-transparent',
light: 'border-light',
dark: 'border-dark',
grey: 'border-neutral',
};
var ButtonGroup = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? 'Button group' : _c, _d = _a.layout, layout = _d === void 0 ? 'horizontal' : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e, children = _a.children, outline = _a.outline, _f = _a.outlineColor, outlineColor = _f === void 0 ? 'light' : _f;
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
var outlineClasses = useMemo(function () { return outline ? outlines[outline] : ''; }, [outline]);
var outlineColorClasses = useMemo(function () { return outline ? outlineColors[outlineColor] : ''; }, [outline, outlineColor]);
return (_jsx("div", { className: twMerge("buttongroup group inline-flex overflow-hidden ".concat(layoutClasses, " ").concat(outlineClasses, " ").concat(outlineColorClasses, " ").concat(rounded ? 'rounded-md' : 'rounded-none'), className), role: 'group', "aria-label": label, "data-testid": 'buttongroup', children: children }));
};
export default ButtonGroup;