welcome-ui/dist/Radio.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as i } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { Hint as b } from "./Hint.mjs";
import { shouldForwardProp as g, forwardRef as $ } from "./System.mjs";
import e, { th as r, system as k, css as j } from "@xstyled/styled-components";
import { Label as w } from "./Label.mjs";
import { d as y } from "./field-styles-CfVLcVQp.mjs";
import { R } from "./NLEBE274-CnAMhwcR.mjs";
const v = e(R).withConfig({ shouldForwardProp: g })(
  ({ order: o = "-1", size: t, variant: s }) => j`
    ${y({ size: t, variant: s })};
    ${r("radios.default")}
    position: relative;
    padding: 0;
    order: ${o};
    cursor: pointer;
    border-radius: 50%;
    transition: medium;
    ${k};

    &::after {
      content: '';
      position: absolute;
      width: 8;
      height: 8;
      border-radius: 8;
      top: 3;
      left: 3;
      background-color: transparent;
      transition: medium;
    }

    &[aria-checked='true'] {
      &:not([disabled]) {
        ${r("radios.checked")};
      }

      &[disabled] {
        &::after {
          background-color: ${r("radios.checkedCenteredColor.disabled")};
        }
      }

      &::after {
        background-color: ${r("radios.checkedCenteredColor.default")};
      }
    }
  `
), C = e(w)`
  max-width: 100%;
  /** we need to reset margin-bottom from Label component */
  margin-bottom: 0 !important;
`, L = e.divBox`
  flex-shrink: 0;
  position: relative;
  align-items: center;
  display: flex;
`, F = e.divBox`
  display: flex;
  align-items: flex-start;
  gap: sm;

  input {
    margin-top: xs;
  }
`, B = e.div`
  display: flex;
  flex-direction: column;
`, D = $(
  ({
    dataTestId: o,
    disabled: t,
    disabledIcon: s,
    flexDirection: p,
    hint: d,
    label: l,
    maxWidth: f,
    onChange: n,
    onClick: c,
    variant: m,
    ...u
  }, x) => {
    const h = (a) => {
      a.stopPropagation(), c && c(a), n && n(a);
    };
    return /* @__PURE__ */ i.jsx(
      C,
      {
        alignItems: "flex-start",
        checkableField: !0,
        disabled: t,
        disabledIcon: s,
        flexDirection: "column",
        maxWidth: f,
        onClick: h,
        variant: m,
        withDisabledIcon: !1,
        children: /* @__PURE__ */ i.jsxs(F, { flexDirection: p, children: [
          /* @__PURE__ */ i.jsx(L, { children: /* @__PURE__ */ i.jsx(
            v,
            {
              "data-testid": o,
              disabled: t,
              label: l,
              ref: x,
              variant: m,
              ...u
            }
          ) }),
          /* @__PURE__ */ i.jsxs(B, { children: [
            /* @__PURE__ */ i.jsx("div", { "data-testid": o ? `${o}-label` : void 0, children: l }),
            d ? /* @__PURE__ */ i.jsx(b, { "data-testid": o ? `${o}-hint` : void 0, mt: "0", children: d }) : null
          ] })
        ] })
      }
    );
  }
);
D.displayName = "Radio";
export {
  D as Radio
};