@brutalcomponent/react
Version:
Brutalist React components
135 lines (132 loc) • 3.94 kB
JavaScript
import { getSizeClasses, cn, brutalVariants, brutalBase } from './chunk-KMHX64YN.mjs';
import React2 from 'react';
import { clsx } from 'clsx';
/**
* @brutalcomponent/react
* (c) David Heffler (https://dvh.sh)
* Licensed under MIT
*/
var LoadingSpinner = ({
size = "md",
className
}) => {
const spinnerSizes = {
xs: "w-3 h-3",
sm: "w-3.5 h-3.5",
md: "w-4 h-4",
lg: "w-5 h-5",
xl: "w-6 h-6"
};
return /* @__PURE__ */ React2.createElement(
"svg",
{
className: clsx("animate-spin", spinnerSizes[size || "md"], className),
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24"
},
/* @__PURE__ */ React2.createElement(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ React2.createElement(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
);
};
// src/components/core/Button/Button.tsx
var Button = React2.forwardRef(
({
variant = "primary",
size = "md",
brutal = true,
fullWidth = false,
uppercase = true,
skew = false,
leftIcon: LeftIcon,
rightIcon: RightIcon,
loading = false,
loadingText,
className,
children,
disabled,
...props
}, ref) => {
const sizeStyles = getSizeClasses(size);
return /* @__PURE__ */ React2.createElement(
"button",
{
ref,
className: cn(
// Base styles
"relative inline-flex items-center justify-center gap-2",
"font-bold transition-all duration-200",
"focus:outline-none focus:ring-2 focus:ring-offset-2",
brutalVariants[variant],
sizeStyles.text,
sizeStyles.padding,
uppercase && "uppercase tracking-wider",
fullWidth && "w-full",
// Brutal styles
brutal && [
sizeStyles.border,
"border-brutal-black",
"shadow-brutal hover:shadow-brutal-md active:shadow-brutal-sm",
brutalBase.hover,
brutalBase.active
],
// Non-brutal fallback
!brutal && "border-2 rounded",
// Skew effect
skew === true && "transform -skew-x-3 hover:skew-x-0",
skew === "left" && "transform -skew-x-3 hover:skew-x-0",
skew === "right" && "transform skew-x-3 hover:skew-x-0",
// Disabled state
(disabled || loading) && "opacity-50 cursor-not-allowed",
className
),
disabled: disabled || loading,
...props
},
loading ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LoadingSpinner, { size }), loadingText || children) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, LeftIcon && /* @__PURE__ */ React2.createElement(LeftIcon, { className: sizeStyles.text }), /* @__PURE__ */ React2.createElement("span", { className: "transform skew-x-0" }, children), RightIcon && /* @__PURE__ */ React2.createElement(RightIcon, { className: sizeStyles.text }))
);
}
);
Button.displayName = "Button";
/**
* @file src/components/core/Button/LoadingSpinner.tsx
* @author David (https://dvh.sh)
* @license MIT
*
* @created Thu Sep 11 2025
* @updated Fri Sep 12 2025
*
* @description
* Loading spinner for buttons
*/
/**
* @file src/components/core/Button/Button.tsx
* @author David (https://dvh.sh)
* @license MIT
*
* @created Thu Sep 11 2025
* @updated Sat Sep 13 2025
*
* @description
* Brutal button component with variants and enhanced styling.
*/
export { Button };
//# sourceMappingURL=chunk-E2BWEC67.mjs.map
//# sourceMappingURL=chunk-E2BWEC67.mjs.map