@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
127 lines (126 loc) • 3.98 kB
JavaScript
import { jsxs as c, jsx as e } from "react/jsx-runtime";
import { checkbox_exports as s } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox.js";
import x from "../../assets/checkboxChecked.svg.js";
import u from "../../assets/checkboxUnchecked.svg.js";
import k from "../../assets/checkboxIndeterminate.svg.js";
import { cx as i } from "../../styled-system/css/cx.js";
import { css as b } from "../../styled-system/css/css.js";
import { sva as g } from "../../styled-system/css/sva.js";
const f = {
flexShrink: 0,
cursor: "pointer",
".group:has(:focus-visible) &": {
outlineStyle: "solid",
outlineOffset: "-2px",
outlineWidth: "1.5px",
outlineColor: "sd.system.color.impression.primary",
borderRadius: "sd.system.dimension.radius.small"
},
_disabled: {
_checked: {
"& svg": {
color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
},
"& .checkmark": {
color: "color-mix(in srgb, {colors.sd.system.color.interaction.disabled}, {colors.sd.system.color.impression.onPrimaryContainer});"
}
}
}
}, C = {
width: 24,
height: 24,
color: "sd.system.color.impression.primary",
"& .checkmark": {
color: "sd.system.color.impression.onPrimaryContainer"
}
}, S = {
width: 24,
height: 24,
color: "sd.system.color.component.outlineDim",
_disabled: {
color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
}
}, n = g({
slots: [
"root",
"itemControl",
"checkedIcon",
"uncheckedIcon",
"itemTextGroup",
"itemText",
"helperText"
],
base: {
root: {
display: "flex",
alignItems: "center",
gap: "sd.system.dimension.spacing.medium",
paddingY: "sd.system.dimension.spacing.small",
paddingX: "sd.system.dimension.spacing.medium",
cursor: "pointer",
position: "relative"
},
itemControl: f,
checkedIcon: C,
uncheckedIcon: S,
itemTextGroup: {
display: "flex",
flexFlow: "column"
},
itemText: {
color: "sd.system.color.component.onSurface",
textStyle: "sd.system.typography.body.medium_compact",
_expanded: {
textStyle: "sd.system.typography.body.medium_expanded"
},
_disabled: {
color: "sd.system.color.interaction.disabledOnSurface"
}
},
helperText: {
color: "sd.system.color.component.onSurfaceVariant",
marginTop: "sd.system.dimension.spacing.twoExtraSmall",
textStyle: "sd.system.typography.body.extraSmall_compact",
_expanded: {
textStyle: "sd.system.typography.body.extraSmall_expanded"
},
_disabled: {
color: "sd.system.color.interaction.disabledOnSurface"
}
}
}
}), G = ({
value: m,
label: l,
helperText: t,
className: d,
...a
}) => {
const [p, y] = n.splitVariantProps(a), o = n(p), h = i(
o.root,
t && b({ alignItems: "flex-start" })
);
return /* @__PURE__ */ c(
s.Root,
{
value: m,
className: i("group", h, d),
...y,
children: [
/* @__PURE__ */ e(s.Context, { children: (r) => /* @__PURE__ */ e(s.Control, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(u, { className: o.uncheckedIcon }) }) }),
/* @__PURE__ */ c("div", { className: o.itemTextGroup, children: [
/* @__PURE__ */ e(s.Label, { className: o.itemText, children: l }),
t && /* @__PURE__ */ e(s.Label, { className: o.helperText, children: t })
] }),
/* @__PURE__ */ e(s.HiddenInput, {})
]
}
);
};
export {
G as CheckBox,
n as CheckBoxStyle,
C as checkboxCheckedIconCss,
f as checkboxIconCss,
S as checkboxUncheckedIconCss
};