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

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

import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { radio_group_exports as s } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group.js";
import x from "../../assets/radioChecked.svg.js";
import h from "../../assets/radioUnchecked.svg.js";
import { cx as c } from "../../styled-system/css/cx.js";
import { css as g } from "../../styled-system/css/css.js";
import { sva as f } from "../../styled-system/css/sva.js";
const I = {
  flexShrink: 0,
  cursor: "pointer",
  ".group:has(:focus-visible) &": {
    backgroundColor: "sd.system.color.interaction.selectedSurface",
    borderRadius: "sd.system.dimension.radius.full"
  }
}, S = {
  color: "sd.system.color.impression.primary",
  _disabled: {
    color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
  }
}, b = {
  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 = f({
  slots: [
    "item",
    "itemControl",
    "checkedIcon",
    "unCheckedIcon",
    "itemTextGroup",
    "itemText",
    "helperText"
  ],
  base: {
    item: {
      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: I,
    checkedIcon: S,
    unCheckedIcon: b,
    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"
      }
    }
  }
}), R = ({
  value: m,
  label: r,
  helperText: t,
  className: d,
  ...a
}) => {
  const [l, p] = n.splitVariantProps(a), e = n(l), y = c(
    e.item,
    t && g({ alignItems: "flex-start" })
  );
  return /* @__PURE__ */ i(
    s.Item,
    {
      value: m,
      className: c("group", y, d),
      ...p,
      children: [
        /* @__PURE__ */ o(s.ItemContext, { children: (u) => /* @__PURE__ */ o(s.ItemControl, { className: e.itemControl, asChild: !0, children: u.checked ? /* @__PURE__ */ o(x, { className: e.checkedIcon }) : /* @__PURE__ */ o(h, { className: e.unCheckedIcon }) }) }),
        /* @__PURE__ */ i("div", { className: e.itemTextGroup, children: [
          r && /* @__PURE__ */ o(s.ItemText, { className: e.itemText, children: r }),
          t && /* @__PURE__ */ o(s.ItemText, { className: e.helperText, children: t })
        ] }),
        /* @__PURE__ */ o(s.ItemHiddenInput, {})
      ]
    }
  );
};
export {
  R as RadioButton,
  n as RadioButtonStyle,
  S as radioCheckedIconCss,
  I as radioIconCss,
  b as radioUncheckedIconCss
};