@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
78 lines (76 loc) • 2.33 kB
JavaScript
import {
useFieldsetContext
} from "./chunk-Z2ZPTZ6F.mjs";
import {
ErrorMessage
} from "./chunk-LHIG6RW7.mjs";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/form/checkbox/checkbox.tsx
import { forwardRef, useId } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var Checkbox = forwardRef(
(_a, ref) => {
var _b = _a, {
variant = "plain",
hasError: hasErrorProp,
errorMessage,
errorMessageProps,
title,
children,
className
} = _b, rest = __objRest(_b, [
"variant",
"hasError",
"errorMessage",
"errorMessageProps",
"title",
"children",
"className"
]);
const errorMessageId = useId();
const { hasError: hasFieldsetError } = useFieldsetContext();
const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
return /* @__PURE__ */ jsxs("div", { className: clsx("hds-checkbox-wrapper"), children: [
/* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"hds-checkbox",
{
[`hds-checkbox--${variant}`]: variant === "bounding-box",
"hds-checkbox--error": hasError
},
className
),
children: [
/* @__PURE__ */ jsxs("label", { children: [
/* @__PURE__ */ jsx(
"input",
__spreadProps(__spreadValues({}, rest), {
"aria-invalid": hasError ? true : void 0,
"aria-describedby": errorMessage ? errorMessageId : void 0,
ref,
type: "checkbox"
})
),
/* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
title ? /* @__PURE__ */ jsx("p", { className: "hds-checkbox__title", children: title }) : children
] }),
title ? children : null
]
}
),
/* @__PURE__ */ jsx(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
] });
}
);
Checkbox.displayName = "Checkbox";
export {
Checkbox
};
//# sourceMappingURL=chunk-BO3EWZGA.mjs.map