@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
89 lines (88 loc) • 3.49 kB
JavaScript
"use client";
import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { c as x } from "./index.DL9mof6u.js";
import { forwardRef as j, useRef as B, useState as H, useEffect as V, useCallback as $ } from "react";
import { u as A } from "./useBreakpoint.1txsny17.js";
import "./index.D-sRdssb.js";
import { D as _ } from "./Icon.CDLyB7Pv.js";
import { D as L } from "./SystemFeedback.CjlARKki.js";
import { g as C } from "./helpers.CexwVao7.js";
import '../assets/Checkbox.CyOw3rXI.css';const O = "ds-checkbox_root_xklfa_1", U = "ds-checkbox_root--disabled_xklfa_21", z = "ds-checkbox_checkbox_xklfa_25", F = "ds-checkbox_icon-check_xklfa_41", J = "ds-checkbox_icon-minus_xklfa_42", K = "ds-checkbox_checkbox--invalid_xklfa_66", Q = "ds-checkbox_label--hidden_xklfa_71", R = "ds-checkbox_input_xklfa_84", T = "ds-checkbox_label_xklfa_71", W = "ds-checkbox_feedback_xklfa_198", e = {
root: O,
rootDisabled: U,
checkbox: z,
iconCheck: F,
iconMinus: J,
checkboxInvalid: K,
labelHidden: Q,
input: R,
label: T,
feedback: W
}, X = ({
label: c,
id: n,
invalid: t,
systemFeedback: k
}) => {
if (!c)
throw new Error(C("DSCheckbox", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSCheckbox component. If you don't want to display a label, set hideLabel={true}.`));
if (k && t && !n)
throw new Error(C("DSCheckbox", `A unique "id" prop is required when passing in the systemFeedback prop and setting invalid to true. Please add a unique "id" prop to the DSCheckbox component with label: "${c}".`));
}, Y = j(({
label: c,
checkboxGroupId: n,
checked: t,
className: k,
defaultChecked: D = !1,
disabled: r = !1,
hideLabel: N = !1,
id: b,
indeterminate: p = !1,
invalid: a = !1,
systemFeedback: l,
onChange: h,
...S
}, i) => {
process.env.NODE_ENV !== "production" && X({
label: c,
id: b,
invalid: a,
systemFeedback: l
});
const d = B(null), [y, v] = H(D), w = A(N);
V(() => {
d && d.current && (d.current.indeterminate = p);
}, [p]);
const f = t !== void 0, g = f ? t : y, m = `${b}-feedback`, E = [a && l && m, a && n && `${n}-feedback`].filter(Boolean).join(" ") || void 0, I = x(e.root, {
[e.rootDisabled]: r
}), q = x(e.label, {
// hide label only visually to keep them available for assistive technologies
[e.labelHidden]: w
}), M = x(e.checkbox, {
[e.checkboxInvalid]: a
}), P = $((o) => {
if (r) {
o.preventDefault();
return;
}
f || v(o.target.checked), h && h(o);
}, [r, f, h]);
return /* @__PURE__ */ u("div", { className: k, children: [
/* @__PURE__ */ u("label", { className: I, children: [
/* @__PURE__ */ s("input", { id: b, type: "checkbox", className: e.input, ref: (o) => {
typeof i == "function" ? i(o) : i !== null && (i.current = o), d.current = o;
}, ...S, checked: g, disabled: r, "aria-label": c, "aria-describedby": E, "aria-invalid": a, onChange: P }),
/* @__PURE__ */ u("div", { className: M, children: [
/* @__PURE__ */ s(_, { name: "check", className: e.iconCheck, "aria-hidden": "true" }),
/* @__PURE__ */ s(_, { name: "minus", className: e.iconMinus, "aria-hidden": "true" })
] }),
/* @__PURE__ */ s("span", { className: q, children: c })
] }),
a && l && /* @__PURE__ */ s(L, { id: m, variant: "error", className: e.feedback, message: l })
] });
});
Y.displayName = "DSCheckbox";
export {
Y as D,
X as v
};