@payfit/unity-components
Version:
85 lines (84 loc) • 2.61 kB
JavaScript
import { Text as e } from "../text/Text.js";
import { Label as t } from "../label/Label.js";
import { Children as n, cloneElement as r, forwardRef as i, isValidElement as a, useCallback as o, useId as s, useRef as c, useState as l } from "react";
import { uyTv as u } from "@payfit/unity-themes";
import { jsx as d, jsxs as f } from "react/jsx-runtime";
//#region src/components/toggle-switch-group/ToggleSwitchGroup.tsx
var p = u({ base: "uy:flex uy:flex-col uy:gap-50" });
function m(e) {
if (!a(e)) return !1;
let t = e.props;
return typeof t == "object" && !!t && "value" in t && typeof t.value == "string";
}
var h = i(({ label: i, helperText: u, feedbackText: h, isDisabled: g, isReadOnly: _, isInvalid: v, isRequired: y, children: b, requiredVariant: x, value: S, defaultValue: C, onChange: w, onFocus: T, onBlur: E, onFocusChange: D, ...O }, k) => {
let A = S !== void 0, [j, M] = l(C ?? []), N = A ? S : j, P = s(), F = u ? `${P}-helper` : void 0, I = v && h ? `${P}-feedback` : void 0, L = [F, I].filter(Boolean).join(" ") || void 0, R = c(!1), z = (e) => {
R.current = !0, T?.(e), D?.(!0);
}, B = (e) => {
R.current = !1, E?.(e), D?.(!1);
}, V = o((e) => {
let t;
t = N.includes(e) ? N.filter((t) => t !== e) : [...N, e], A || M(t), w?.(t);
}, [
N,
A,
w
]), H = () => n.map(b, (e, t) => {
if (!m(e)) return e;
let n = e, i = n.props, a = i.value;
return r(n, {
key: n.key ?? t,
isSelected: N.includes(a),
isDisabled: g ?? i.isDisabled,
isReadOnly: _ ?? i.isReadOnly,
value: a,
onChange: () => {
V(a);
}
});
});
return /* @__PURE__ */ f("fieldset", {
...O,
ref: k,
className: p(),
"aria-describedby": L,
"aria-invalid": v || void 0,
"aria-required": y || void 0,
disabled: g,
onFocus: z,
onBlur: B,
children: [
/* @__PURE__ */ d("legend", {
className: "uy:mb-25",
children: /* @__PURE__ */ d(t, {
isRequired: y,
requiredVariant: x,
children: i
})
}),
u && /* @__PURE__ */ d(e, {
id: F,
variant: "bodySmall",
color: "content.neutral.low",
slot: "description",
children: u
}),
/* @__PURE__ */ d("div", {
className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25",
children: H()
}),
v && h && (typeof h == "string" ? /* @__PURE__ */ d(e, {
id: I,
variant: "bodySmallStrong",
color: "content.form.invalid",
slot: "errorMessage",
children: h
}) : a(h) && r(h, {
id: I,
slot: "errorMessage"
}))
]
});
});
h.displayName = "ToggleSwitchGroup";
//#endregion
export { h as ToggleSwitchGroup, p as toggleSwitchGroup };