@serendie/ui/dist/components/CheckBox/CheckBox.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

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
};