@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
82 lines (81 loc) • 2.77 kB
JavaScript
import { jsxs as s, jsx as e, Fragment as x } from "react/jsx-runtime";
import { checkbox_exports as r } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox.js";
import { radio_group_exports as n } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group.js";
import C from "../../assets/checkboxChecked.svg.js";
import l from "../../assets/checkboxUnchecked.svg.js";
import p from "../../assets/checkboxIndeterminate.svg.js";
import b from "../../assets/radioChecked.svg.js";
import f from "../../assets/radioUnchecked.svg.js";
import { checkboxUncheckedIconCss as U, checkboxCheckedIconCss as g, checkboxIconCss as u } from "../CheckBox/CheckBox.js";
import { radioUncheckedIconCss as N, radioCheckedIconCss as v, radioIconCss as S } from "../RadioButton/RadioButton.js";
import { cx as m } from "../../styled-system/css/cx.js";
import { sva as P } from "../../styled-system/css/sva.js";
const a = P({
slots: [
"root",
"radioItem",
"radioCheckedIcon",
"radioUncheckedIcon",
"checkboxItem",
"checkboxCheckedIcon",
"checkboxUncheckedIcon"
],
base: {
root: {
display: "flex"
},
radioItem: S,
radioCheckedIcon: v,
radioUncheckedIcon: N,
checkboxItem: u,
checkboxCheckedIcon: g,
checkboxUncheckedIcon: U
}
}), D = ({
type: t,
value: d,
className: h,
...i
}) => {
const [k, I] = a.splitVariantProps(i), o = a(k);
if (t === "radio")
return /* @__PURE__ */ s(
n.Item,
{
value: d,
className: m("group", o.root, h),
...I,
children: [
/* @__PURE__ */ e(n.ItemContext, { children: (c) => /* @__PURE__ */ e(n.ItemControl, { className: o.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ e(b, { className: o.radioCheckedIcon }) : /* @__PURE__ */ e(f, { className: o.radioUncheckedIcon }) }) }),
/* @__PURE__ */ e(n.ItemHiddenInput, {})
]
}
);
if (t === "checkbox")
return /* @__PURE__ */ e(
r.Root,
{
value: d,
className: m("group", o.root, h),
...i,
children: /* @__PURE__ */ e(r.Context, { children: (c) => /* @__PURE__ */ s(x, { children: [
/* @__PURE__ */ e(r.Control, { className: o.checkboxItem, children: c.checked === !0 ? /* @__PURE__ */ e(C, { className: o.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ e(
p,
{
className: o.checkboxCheckedIcon
}
) : /* @__PURE__ */ e(
l,
{
className: o.checkboxUncheckedIcon
}
) }),
/* @__PURE__ */ e(r.HiddenInput, {})
] }) })
}
);
};
export {
D as ChoiceBox,
a as ChoiceBoxStyle
};