@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 f, jsx as t } from "react/jsx-runtime";
import { c as p } from "./index.CEyLAtio.js";
import { forwardRef as j, useRef as B, useState as H, useEffect as V, useCallback as $ } from "react";
import { u as A } from "./useBreakpoint.CMOR9ZOB.js";
import "./index.CgTHIF3K.js";
import { D as x } from "./Icon.DGTYCv63.js";
import { D as L } from "./SystemFeedback.B9f67mjJ.js";
import { g as C } from "./helpers.BbWkXTr3.js";
import '../assets/Checkbox.BKHQN_tu.css';const O = "ds-checkbox_root_1tuqo_1", U = "ds-checkbox_root--disabled_1tuqo_21", z = "ds-checkbox_checkbox_1tuqo_25", F = "ds-checkbox_icon-check_1tuqo_41", J = "ds-checkbox_icon-minus_1tuqo_42", K = "ds-checkbox_checkbox--invalid_1tuqo_66", Q = "ds-checkbox_label--hidden_1tuqo_71", R = "ds-checkbox_input_1tuqo_84", T = "ds-checkbox_label_1tuqo_71", W = "ds-checkbox_feedback_1tuqo_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: a,
invalid: n,
systemFeedback: b
}) => {
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 (b && n && !a)
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: a,
checked: n,
className: b,
defaultChecked: D = !1,
disabled: r = !1,
hideLabel: q = !1,
id: h,
indeterminate: m = !1,
invalid: s = !1,
systemFeedback: i,
onChange: u,
...N
}, l) => {
process.env.NODE_ENV !== "production" && X({
label: c,
id: h,
invalid: s,
systemFeedback: i
});
const d = B(null), [S, y] = H(D), v = A(q);
V(() => {
d && d.current && (d.current.indeterminate = m);
}, [m]);
const k = n !== void 0, w = k ? n : S, _ = `${h}-feedback`, g = [s && i && _, s && a && `${a}-feedback`].filter(Boolean).join(" ") || void 0, E = p(e.root, {
[e.rootDisabled]: r
}), I = p(e.label, {
// hide label only visually to keep them available for assistive technologies
[e.labelHidden]: v
}), M = p(e.checkbox, {
[e.checkboxInvalid]: s
}), P = $((o) => {
if (r) {
o.preventDefault();
return;
}
k || y(o.target.checked), u && u(o);
}, [r, k, u]);
return /* @__PURE__ */ f("div", { className: b, children: [
/* @__PURE__ */ f("label", { className: E, children: [
/* @__PURE__ */ t("input", { id: h, type: "checkbox", className: e.input, ref: (o) => {
typeof l == "function" ? l(o) : l !== null && (l.current = o), d.current = o;
}, ...N, checked: w, disabled: r, "aria-label": c, "aria-describedby": g, "aria-invalid": s, onChange: P }),
/* @__PURE__ */ f("div", { className: M, children: [
/* @__PURE__ */ t(x, { name: "check", className: e.iconCheck, "aria-hidden": "true" }),
/* @__PURE__ */ t(x, { name: "minus", className: e.iconMinus, "aria-hidden": "true" })
] }),
/* @__PURE__ */ t("span", { className: I, children: c })
] }),
s && i && /* @__PURE__ */ t(L, { id: _, variant: "error", className: e.feedback, message: i })
] });
});
Y.displayName = "DSCheckbox";
export {
Y as D,
X as v
};