@lanaco/lnc-react-ui/dist/RadioInput.js

React component library

import { jsxs as u, jsx as l } from "react/jsx-runtime";
import { forwardRef as B, useState as j } from "react";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as b, d as N, f as P, c as i } from "./utils-BUdHa0nB.js";
import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const I = (e) => e == "left" ? "row-reverse" : "row", L = f.label`
  min-height: ${(e) => b(e.theme, e.size)};
  max-height: ${(e) => b(e.theme, e.size)};
  width: 100%;
  display: inline-flex;
  justify-content: start;
  align-items: center;
  flex-direction: ${(e) => I(e.labelPosition)};
  ${(e) => e.spaceBetween === !0 && "justify-content: space-between;"}
  gap: 0.5rem;
  ${(e) => e.disabled === !0 && "pointer-events: none;"}
  ${(e) => N(e.theme, "Radio", e.size, "enabled")};
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  & input {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  & .checkmark {
    box-sizing: border-box;
    cursor: pointer;
    min-height: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
    min-width: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
    height: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
    width: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    ${(e) => e.focused === !0 && e.disabled !== !0 && e.readOnly !== !0 ? P(e.theme) : ""};
    & svg {
      fill: transparent;
      & .outer-circle {
        stroke: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "enabled",
  "border"
)};
      }
      & .inner-circle {
        stroke: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "enabled",
  "border"
)};
      }
    }
  }
  & input:hover ~ .lnc-radio-input-label {
    color: ${(e) => i(e.theme, "Radio", e.color, "hover", "text")};
  }

  
  & input:checked ~ .lnc-radio-input-label {
    color: ${(e) => i(e.theme, "Radio", e.color, "active", "text")};
  }
  & input:checked ~ .checkmark {
    & svg {
      fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
      & .outer-circle {
        fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "active",
  "border"
)};
      }
      & .inner-circle {
        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
  e.theme,
  "Radio",
  e.color,
  "active",
  "border"
)}};
      }
    }
  }

  & input:disabled ~ .lnc-radio-input-label {
    color: ${(e) => i(e.theme, "Radio", e.color, "disabled", "text")};
  }
  
  & input[disabled]:checked ~ .checkmark {
    & svg {
      fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
      & .outer-circle {
        fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
      }
      & .inner-circle {
        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)}
            };
      }
    }


    & input[disabled] ~ .checkmark {
      & svg {
        fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        & .outer-circle {
          fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
        }
        & .inner-circle {
          fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
        }
      }

    & input:hover ~ .lnc-radio-input-label {
      color: ${(e) => i(e.theme, "Radio", e.color, "hover", "text")};
    }
    & input[hover]:checked ~ .checkmark {
      & svg {
        fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
        & .outer-circle {
          fill: ${(e) => i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
        }
        & .inner-circle {
          fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
        }
      }
    }
`, S = f.label`
  ${(e) => e.disabled !== !0 && e.readOnly !== !0 && "cursor: pointer"};
  min-width: 0;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: ${(e) => i(e.theme, "Radio", e.color, "enabled", "text")};
`, G = B((e, g) => {
  const {
    wrapperRef: R,
    className: $ = "",
    style: k = {},
    color: v = "primary",
    innerColor: w = "white",
    size: x = "small",
    onChange: n,
    onFocus: r,
    onBlur: o,
    onClick: a,
    label: s,
    labelPosition: y = "right",
    spaceBetween: C,
    disabled: d,
    readOnly: c,
    ...z
  } = e, [O, h] = j(!1);
  var m = {
    theme: F(),
    size: x,
    color: v,
    disabled: d,
    labelPosition: y,
    spaceBetween: C
  };
  return /* @__PURE__ */ u(
    L,
    {
      ...m,
      ref: R,
      className: $,
      style: k,
      tabIndex: -1,
      readOnly: c,
      focused: O,
      onClick: (t) => a == null ? void 0 : a(t),
      innerColor: w,
      children: [
        /* @__PURE__ */ l(
          "input",
          {
            ref: g,
            disabled: d || c,
            type: "radio",
            onBlur: (t) => {
              h(!1), o && (o == null || o(t));
            },
            onFocus: (t) => {
              h(!0), r && (r == null || r(t));
            },
            onChange: (t) => n == null ? void 0 : n(t),
            ...z
          }
        ),
        /* @__PURE__ */ l("div", { className: "checkmark", children: /* @__PURE__ */ u(
          "svg",
          {
            id: "eqw1eBsfm9l1",
            xmlns: "http://www.w3.org/2000/svg",
            viewBox: "0 0 20 20",
            shapeRendering: "geometricPrecision",
            textRendering: "geometricPrecision",
            children: [
              /* @__PURE__ */ l(
                "ellipse",
                {
                  className: "outer-circle",
                  rx: "9.5",
                  ry: "9.5",
                  transform: "translate(10 10)",
                  fillRule: "evenodd",
                  stroke: "red"
                }
              ),
              /* @__PURE__ */ l(
                "ellipse",
                {
                  rx: "5",
                  ry: "5",
                  transform: "translate(10 10)",
                  className: "inner-circle",
                  strokeWidth: "0"
                }
              )
            ]
          }
        ) }),
        /* @__PURE__ */ l(
          S,
          {
            ...m,
            className: "lnc-radio-input-label",
            disalbed: d,
            readOnly: c,
            title: s,
            tabIndex: -1,
            children: s
          }
        )
      ]
    }
  );
});
export {
  G as default
};