@payfit/unity-components
Version:
84 lines (83 loc) • 2.82 kB
JavaScript
import { Text as e } from "../text/Text.js";
import { checkbox as t } from "./Checkbox.variants.js";
import { CheckboxIndicator as n } from "./parts/CheckboxIndicator.js";
import { cloneElement as r, forwardRef as i, isValidElement as a } from "react";
import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
import { useId as l } from "react-aria/useId";
import { CheckboxButton as u, CheckboxField as d } from "react-aria-components/Checkbox";
//#region src/components/checkbox/Checkbox.tsx
var f = i(({ children: i, helperText: f, feedbackText: p, ...m }, h) => {
let g = l(), { isDisabled: _, isReadOnly: v, isInvalid: y, isRequired: b, requiredVariant: x = "required", ...S } = m, { base: C, wrapper: w, label: T, asterisk: E, optionalTag: D, descriptionsContainer: O, helperText: k, feedbackText: A } = t({
isDisabled: _,
isReadOnly: v,
isInvalid: y
}), j = [m["aria-labelledby"], `${g}-label`].filter(Boolean), M = [
m["aria-describedby"],
typeof f == "string" ? `${g}-helper-text` : void 0,
typeof p == "string" ? `${g}-feedback-text` : void 0
].filter(Boolean), N = j.length > 0 ? j.join(" ") : void 0, P = M.length > 0 ? M.join(" ") : void 0;
return /* @__PURE__ */ c("div", {
className: C(),
children: [/* @__PURE__ */ s(d, {
...S,
isInvalid: y,
className: "uy:contents",
"aria-labelledby": N,
"aria-describedby": P,
isDisabled: _,
isReadOnly: v,
children: /* @__PURE__ */ s(u, {
ref: h,
className: w(),
children: (e) => /* @__PURE__ */ c(o, { children: [
/* @__PURE__ */ s(n, {
...e,
className: "uy:mt-25 uy:ml-0"
}),
/* @__PURE__ */ s("span", {
id: `${g}-label`,
className: T(),
"data-dd-privacy": "allow",
children: i
}),
x === "required" && b && /* @__PURE__ */ c("span", {
className: E(),
children: ["*", /* @__PURE__ */ s("span", {
className: "uy:sr-only",
children: "required"
})]
}),
x === "optional" && !b && /* @__PURE__ */ s("span", {
className: D(),
children: "(optional)"
})
] })
})
}), (f || p) && /* @__PURE__ */ c("div", {
className: O(),
"data-dd-privacy": "allow",
children: [typeof f == "string" ? /* @__PURE__ */ s(e, {
variant: "bodySmall",
color: "content.neutral.low",
id: `${g}-helper-text`,
className: k(),
children: f
}) : a(f) && r(f, {
"data-id": `${g}-helper-text`,
className: k()
}), y && (typeof p == "string" ? /* @__PURE__ */ s(e, {
variant: "bodySmallStrong",
color: "content.form.invalid",
id: `${g}-feedback-text`,
className: A(),
children: p
}) : a(p) && r(p, {
"data-id": `${g}-feedback-text`,
className: A()
}))]
})]
});
});
f.displayName = "Checkbox";
//#endregion
export { f as Checkbox };