@brutalcomponent/react
Version:
Brutalist React components
124 lines (122 loc) • 3.83 kB
JavaScript
import { cn } from './chunk-KMHX64YN.mjs';
import React from 'react';
import { FaCheck } from 'react-icons/fa';
/**
* @brutalcomponent/react
* (c) David Heffler (https://dvh.sh)
* Licensed under MIT
*/
var Checkbox = React.forwardRef(
({
label,
onChange,
error,
brutal = true,
className,
checked,
disabled,
...props
}, ref) => {
return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
"label",
{
className: cn(
"inline-flex items-center gap-3 cursor-pointer group",
disabled && "cursor-not-allowed opacity-50"
)
},
/* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
"input",
{
ref,
type: "checkbox",
checked,
onChange: (e) => onChange?.(e.target.checked),
disabled,
className: "sr-only peer",
...props
}
), /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"w-6 h-6 transition-all duration-200",
"flex items-center justify-center",
brutal ? "border-4" : "border-2",
"border-brutal-black bg-brutal-white",
!disabled && "group-hover:shadow-brutal group-hover:-translate-y-0.5",
error && "border-brutal-coral",
"peer-checked:bg-brutal-black peer-checked:border-brutal-black"
)
},
/* @__PURE__ */ React.createElement(FaCheck, { className: "w-4 h-4 text-brutal-white scale-0 peer-checked:scale-100 transition-transform duration-100" })
)),
label && /* @__PURE__ */ React.createElement("span", { className: "text-sm font-black uppercase tracking-wider text-brutal-gray-700" }, label)
), error && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-xs text-brutal-coral font-bold uppercase" }, error));
}
);
Checkbox.displayName = "Checkbox";
var CheckboxGroup = ({
options,
value,
onChange,
label,
error,
brutal = true,
className
}) => {
const handleChange = (optionValue, checked) => {
if (checked) {
onChange([...value, optionValue]);
} else {
onChange(value.filter((v) => v !== optionValue));
}
};
return /* @__PURE__ */ React.createElement("div", { className }, label && /* @__PURE__ */ React.createElement("p", { className: "text-xs font-bold uppercase tracking-wider text-brutal-black mb-3" }, label), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, options.map((option) => /* @__PURE__ */ React.createElement(
Checkbox,
{
key: option.value,
label: option.label,
checked: value.includes(option.value),
onChange: (checked) => handleChange(option.value, checked),
disabled: option.disabled,
brutal
}
))), error && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-xs text-brutal-coral font-bold uppercase" }, error));
};
/**
* @file src/components/core/Checkbox/Checkbox.tsx
* @author David (https://dvh.sh)
* @license MIT
*
* @created Thu Sep 11 2025
* @updated Sat Sep 13 2025
*
* @description
* Brutal checkbox component with enhanced styling.
*/
/**
* @file src/components/core/Checkbox/CheckboxGroup.tsx
* @author David (https://dvh.sh)
* @license MIT
*
* @created Thu Sep 11 2025
* @updated Fri Sep 12 2025
*
* @description
* Group of checkboxes
*/
/**
* @file src/components/core/Checkbox/index.ts
* @author David (https://dvh.sh)
* @license MIT
*
* @created Thu Sep 11 2025
* @updated Fri Sep 12 2025
*
* @description
* Checkbox components barrel export
*/
export { Checkbox, CheckboxGroup };
//# sourceMappingURL=chunk-INKC4SYH.mjs.map
//# sourceMappingURL=chunk-INKC4SYH.mjs.map