@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
35 lines • 1.79 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 gapSpacing = {
none: 'gap-0',
sm: 'gap-1',
md: 'gap-2',
lg: 'gap-3',
xl: 'gap-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, _g = _a.gap, gap = _g === void 0 ? 'none' : _g;
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]);
var gapClasses = useMemo(function () { return gapSpacing[gap]; }, [gap]);
return (_jsx("div", { className: twMerge("buttongroup group inline-flex overflow-hidden ".concat(layoutClasses, " ").concat(outlineClasses, " ").concat(outlineColorClasses, " ").concat(gapClasses, " ").concat(rounded ? 'rounded-md' : 'rounded-none'), className), role: 'group', "aria-label": label, "data-testid": 'buttongroup', children: children }));
};
export default ButtonGroup;
//# sourceMappingURL=ButtonGroup.js.map