@smitch/fluid
Version:
A Next/React ui-component libray.
76 lines (75 loc) • 5 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { forwardRef } from 'react';
import { twMerge } from 'tailwind-merge';
var stateStyles = 'disabled:grayscale disabled:opacity-50';
var sizes = {
sm: 'text-[.8em] border-[.15em]',
md: 'text-[1em] border-[.15em]',
lg: 'text-[1.5em] border-[.15em]',
xl: 'text-[1.75em] border-[.15em]',
};
var layouts = {
default: '',
rounded: 'rounded-md',
pill: 'rounded-full',
square: 'aspect-square',
circle: 'aspect-square rounded-full',
};
var backgrounds = {
info: 'bg-info',
success: 'bg-success',
warning: 'bg-warning',
danger: 'bg-error',
primary: 'bg-primary',
secondary: 'bg-secondary',
accent: 'bg-accent',
dark: 'bg-dark',
light: 'bg-light',
transparent: 'bg-transparent',
neutral: 'bg-neutral',
};
var colors = {
info: 'text-info',
success: 'text-success',
warning: 'text-warning',
danger: 'text-error',
primary: 'text-primary',
secondary: 'text-secondary',
accent: 'text-accent',
dark: 'text-dark',
light: 'text-light',
current: 'text-current',
neutral: 'text-neutral',
};
var borderColors = {
info: 'border-info',
success: 'border-success',
warning: 'border-warning',
danger: 'border-error',
primary: 'border-primary',
secondary: 'border-secondary',
accent: 'border-accent',
dark: 'border-dark',
light: 'border-light',
current: 'border-current',
};
var shadows = {
sm: 'shadow-sm shadow-[2px_2px_2px_0_rgba(0,0,0,0.15)] rtl:shadow-[-2px_2px_2px_0_rgba(0,0,0,0.15)] dark:shadow-[2px_2px_2px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-2px_2px_2px_0_rgba(255,255,255,0.2)]',
md: 'shadow-md shadow-[4px_4px_4px_0_rgba(0,0,0,0.15)] rtl:shadow-[-4px_4px_4px_0_rgba(0,0,0,0.15)] dark:shadow-[4px_4px_4px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-4px_4px_4px_0_rgba(255,255,255,0.2)]',
lg: 'shadow-lg shadow-[6px_6px_6px_0_rgba(0,0,0,0.15)] rtl:shadow-[-6px_6px_10px_6px_rgba(0,0,0,0.15)] dark:shadow-[6px_6px_6px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-6px_6px_6px_0_rgba(255,255,255,0.2)]',
xl: 'shadow-xl shadow-[8px_8px_8px_0_rgba(0,0,0,0.15)] rtl:shadow-[-8px_8px_8px_0_rgba(0,0,0,0.15)] dark:shadow-[8px_8px_8px_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[-8px_8px_8px_0_rgba(255,255,255,0.2)]',
none: 'shadow-none',
};
var Button = forwardRef(function Button(props, ref) {
var _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.className, className = _b === void 0 ? '' : _b, style = props.style, _c = props.btnBackground, btnBackground = _c === void 0 ? 'primary' : _c, _d = props.btnColor, btnColor = _d === void 0 ? 'light' : _d, _e = props.layout, layout = _e === void 0 ? 'default' : _e, _f = props.outline, outline = _f === void 0 ? false : _f, _g = props.outlineColor, outlineColor = _g === void 0 ? 'current' : _g, _h = props.shadow, shadow = _h === void 0 ? 'none' : _h, _j = props.type, type = _j === void 0 ? 'button' : _j, title = props.title, id = props.id, disabled = props.disabled, onClick = props.onClick, onBlur = props.onBlur, tabindex = props.tabindex, _k = props.role, role = _k === void 0 ? 'button' : _k, _l = props.textcase, textcase = _l === void 0 ? 'capitalize' : _l, _m = props.isBold, isBold = _m === void 0 ? false : _m, _o = props.hoverScale, hoverScale = _o === void 0 ? false : _o, _p = props.suppressHydrationWarning, suppressHydrationWarning = _p === void 0 ? false : _p, children = props.children;
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var backgroundClasses = useMemo(function () { return backgrounds[btnBackground]; }, [btnBackground]);
var colorClasses = useMemo(function () { return colors[btnColor]; }, [btnColor]);
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
var shadowClasses = useMemo(function () { return shadows[shadow]; }, [shadow]);
var outlineStyles = useMemo(function () { return "border-solid ".concat(borderColors[outlineColor]); }, [outlineColor]);
var outlineClasses = useMemo(function () { return (outline ? outlineStyles : 'border-none'); }, [outline, outlineStyles]);
return (_jsx("button", { className: twMerge("button group flex gap-2 items-center justify-center group-[.flex-col]:justify-start scale-100 focus:text-accent ".concat(sizeClasses, " p-[.5em] ").concat(textcase, " ").concat(backgroundClasses, " ").concat(colorClasses, " ").concat(layoutClasses, " ").concat(outlineClasses, " ").concat(shadowClasses, " ").concat(stateStyles, " ").concat(isBold ? 'font-semibold' : 'font-normal', " ").concat(hoverScale ? 'hover:scale-105 disabled:hover:scale-100' : ''), className), style: style, "data-testid": 'button', type: type, title: title, id: id, disabled: disabled, tabIndex: tabindex, onClick: onClick, onBlur: onBlur, ref: ref, role: role, suppressHydrationWarning: suppressHydrationWarning, children: children }));
});
export default Button;