@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
97 lines (96 loc) • 3.83 kB
JavaScript
"use client";
import { jsxs as f, jsx as n } from "react/jsx-runtime";
import { c as k } from "./index.DQOqod3i.js";
import { forwardRef as L, useRef as V, useState as $, useEffect as A, useCallback as O } from "react";
import { D as C } from "./Icon.DYtaQgbw.js";
import { D as G } from "./SystemFeedback.DhWcYjnu.js";
import { g as v } from "./helpers.CexwVao7.js";
import { u as T } from "./useBreakpoint.1txsny17.js";
import '../assets/Checkbox.C6RWhy0V.css';const U = "ds-checkbox_root_1fk9p_1", z = "ds-checkbox_root--disabled_1fk9p_21", J = "ds-checkbox_root--dark_1fk9p_24", K = "ds-checkbox_checkbox_1fk9p_48", Q = "ds-checkbox_icon-check_1fk9p_64", R = "ds-checkbox_icon-minus_1fk9p_65", W = "ds-checkbox_checkbox--dark_1fk9p_89", X = "ds-checkbox_checkbox--invalid_1fk9p_130", Y = "ds-checkbox_label--hidden_1fk9p_139", Z = "ds-checkbox_input_1fk9p_152", ee = "ds-checkbox_label_1fk9p_139", ce = "ds-checkbox_input--dark_1fk9p_265", oe = "ds-checkbox_feedback_1fk9p_338", e = {
root: U,
rootDisabled: z,
rootDark: J,
checkbox: K,
iconCheck: Q,
iconMinus: R,
checkboxDark: W,
checkboxInvalid: X,
labelHidden: Y,
input: Z,
label: ee,
inputDark: ce,
feedback: oe
}, ae = ({
label: t,
id: o,
invalid: s,
systemFeedback: i
}) => {
if (!t)
throw new Error(v("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 (i && s && !o)
throw new Error(v("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: "${t}".`));
}, se = L((t, o) => {
const {
label: s,
checkboxGroupId: i,
checked: _,
className: y,
defaultChecked: N = !1,
disabled: r = !1,
hideLabel: g = !1,
id: b,
indeterminate: m = !1,
invalid: a = !1,
systemFeedback: d,
theme: x = "light",
onChange: h,
...S
} = t;
process.env.NODE_ENV !== "production" && ae({
label: s,
id: b,
invalid: a,
systemFeedback: d
});
const p = x === "dark", l = V(null), [w, I] = $(N), E = T(g);
A(() => {
l && l.current && (l.current.indeterminate = m);
}, [m]);
const u = _ !== void 0, q = u ? _ : w, D = `${b}-feedback`, F = [a && d && D, a && i && `${i}-feedback`].filter(Boolean).join(" ") || void 0, M = k(e.root, {
[e.rootDark]: p,
[e.rootDisabled]: r
}), P = k(e.label, {
// hide label only visually to keep them available for assistive technologies
[e.labelHidden]: E
}), j = k(e.checkbox, {
[e.checkboxDark]: p,
[e.checkboxInvalid]: a
}), B = k(e.input, {
[e.inputDark]: p
}), H = O((c) => {
if (r) {
c.preventDefault();
return;
}
u || I(c.target.checked), h && h(c);
}, [r, u, h]);
return /* @__PURE__ */ f("div", { className: y, children: [
/* @__PURE__ */ f("label", { className: M, children: [
/* @__PURE__ */ n("input", { id: b, type: "checkbox", className: B, ref: (c) => {
typeof o == "function" ? o(c) : o !== null && (o.current = c), l.current = c;
}, ...S, checked: q, disabled: r, "aria-label": s, "aria-describedby": F, "aria-invalid": a, onChange: H }),
/* @__PURE__ */ f("div", { className: j, children: [
/* @__PURE__ */ n(C, { name: "check", className: e.iconCheck, "aria-hidden": "true" }),
/* @__PURE__ */ n(C, { name: "minus", className: e.iconMinus, "aria-hidden": "true" })
] }),
/* @__PURE__ */ n("span", { className: P, children: s })
] }),
a && d && /* @__PURE__ */ n(G, { id: D, variant: "error", className: e.feedback, message: d, theme: x })
] });
});
se.displayName = "DSCheckbox";
export {
se as D,
ae as v
};