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

React component library

import { jsxs as b, jsx as n } from "react/jsx-runtime";
import { forwardRef as P, useState as j } from "react";
import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as i } from "./index-S5Cd7WrG.js";
import { d as f, c as N, e as T, b as t } from "./utils-DtRLzzTZ.js";
import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
  min-height: ${(e) => f(e.theme, e.size)};
  max-height: ${(e) => f(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 ? T(e.theme) : ""};
    & svg {
      fill: transparent;
      & .outer-circle {
        stroke: ${(e) => t(
  e.theme,
  "Radio",
  e.color,
  "enabled",
  "border"
)};
      }
      & .inner-circle {
        stroke: ${(e) => t(
  e.theme,
  "Radio",
  e.color,
  "enabled",
  "border"
)};
      }
    }
  }
  & input:hover ~ .lnc-radio-input-label {
    color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
  }

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

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


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

    & input:hover ~ .lnc-radio-input-label {
      color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
    }
    & input[hover]:checked ~ .checkmark {
      & svg {
        fill: ${(e) => t(
  e.theme,
  "Radio",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
        & .outer-circle {
          fill: ${(e) => t(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)};
        }
        & .inner-circle {
          fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
  e.theme,
  "Radio",
  e.color,
  "disabled",
  "border"
)}};
        }
      }
`, S = g.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) => t(e.theme, "Radio", e.color, "enabled", "text")};
`, K = P((e, y) => {
  const {
    wrapperRef: w,
    className: k = "",
    style: R = {},
    color: $ = "primary",
    innerColor: v = "white",
    size: x = "small",
    onChange: a,
    onFocus: o,
    onBlur: l,
    onClick: c,
    onKeyDown: L,
    label: h,
    labelPosition: C = "right",
    spaceBetween: O,
    disabled: d,
    readOnly: s,
    ...z
  } = e, [B, m] = j(!1);
  var u = {
    theme: F(),
    size: x,
    color: $,
    disabled: d,
    labelPosition: C,
    spaceBetween: O
  };
  return /* @__PURE__ */ b(
    D,
    {
      ...u,
      ref: w,
      className: k,
      style: R,
      tabIndex: -1,
      readOnly: s,
      focused: B,
      onClick: (r) => c == null ? void 0 : c(r),
      innerColor: v,
      children: [
        /* @__PURE__ */ n(
          "input",
          {
            ref: y,
            disabled: d || s,
            type: "radio",
            onBlur: (r) => {
              m(!1), l && (l == null || l(r));
            },
            onFocus: (r) => {
              m(!0), o && (o == null || o(r));
            },
            onChange: (r) => a == null ? void 0 : a(r),
            ...z
          }
        ),
        /* @__PURE__ */ n("div", { className: "checkmark", children: /* @__PURE__ */ b(
          "svg",
          {
            id: "eqw1eBsfm9l1",
            xmlns: "http://www.w3.org/2000/svg",
            viewBox: "0 0 20 20",
            shapeRendering: "geometricPrecision",
            textRendering: "geometricPrecision",
            children: [
              /* @__PURE__ */ n(
                "ellipse",
                {
                  className: "outer-circle",
                  rx: "9.5",
                  ry: "9.5",
                  transform: "translate(10 10)",
                  fillRule: "evenodd",
                  stroke: "red"
                }
              ),
              /* @__PURE__ */ n(
                "ellipse",
                {
                  rx: "5",
                  ry: "5",
                  transform: "translate(10 10)",
                  className: "inner-circle",
                  strokeWidth: "0"
                }
              )
            ]
          }
        ) }),
        /* @__PURE__ */ n(
          S,
          {
            ...u,
            className: "lnc-radio-input-label",
            disalbed: d,
            readOnly: s,
            title: h,
            tabIndex: -1,
            children: h
          }
        )
      ]
    }
  );
});
K.propTypes = {
  id: i.string,
  name: i.string,
  checked: i.bool,
  disabled: i.bool,
  readOnly: i.bool,
  label: i.oneOfType([i.string, i.element]),
  labelPosition: i.oneOf(["right", "left"]),
  tabIndex: i.number,
  spaceBetween: i.bool,
  //-------------------------
  onChange: i.func,
  onFocus: i.func,
  onBlur: i.func,
  onClick: i.func,
  onKeyDown: i.func,
  //-------------------------
  className: i.string,
  style: i.object,
  size: i.oneOf(["small", "medium", "large"]),
  color: i.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ]),
  innerColor: i.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray",
    "white",
    "transparent"
  ])
};
export {
  K as default
};