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

React component library

import { jsxs as k, jsx as i, Fragment as B } from "react/jsx-runtime";
import { forwardRef as I } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as j } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { d as g, c as L, b as n, a as N, e as x } from "./utils-DtRLzzTZ.js";
import { u as P } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const R = (e) => e == "left" ? "row-reverse" : "row", o = (e, d) => `calc(${e.components.Checkbox.default.enabled.sizes[d]} / 2)`, T = j.label`
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  min-height: ${(e) => g(e.theme, e.size)};
  max-height: ${(e) => g(e.theme, e.size)};
  display: inline-flex;
  align-items: center;
  justify-content: start;
  flex-direction: ${(e) => R(e.labelPosition)};
  ${(e) => e.spaceBetween == !0 && "justify-content: space-between;"}
  width: 100%;
  ${(e) => e.disabled === !0 && "pointer-events: none;"}
  ${(e) => L(e.theme, "Checkbox", e.size, "enabled")};
  gap: 0.75rem;
  position: relative;
  & .checkbox-label {
    ${(e) => !e.disabled && e.readOnly !== !0 && "cursor: pointer;"}
    min-width: 0;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "enabled",
  "text"
)};
  }
  & input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 3;
  }
  & input:focus {
    outline: none;
    background: transparent;
  }
  & input:active {
    outline: none;
    background: transparent;
  }
  & .checkmark {
    min-height: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
    min-width: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    background-color: transparent;
    color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "enabled",
  "text"
)};
    border: 1px solid
      ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "enabled",
  "border"
)};
    border-radius: ${(e) => N(e.theme, "slight")};
    ${(e) => e.disabled === !0 && `background-color: ${n(
  e.theme,
  "Checkbox",
  e.color,
  "disabled",
  "border"
)}`};
    & svg {
      height: 0;
      width: 0;
      stroke: transparent;
    }
    & img {
      max-height: 0;
      max-width: 0;
      filter: brightness(0) invert(1);
    }
  }
  & input:checked ~ .checkmark {
    background-color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
    border: 1px solid
      ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "active",
  "border"
)};
    & .checked {
      height: ${(e) => o(e.theme, e.size)};
      width: ${(e) => o(e.theme, e.size)};
      stroke: white;
    }
    & .indeterminate {
      height: 0;
      width: 0;
    }
    & img {
      max-height: ${(e) => o(e.theme, e.size)};
      max-width: ${(e) => o(e.theme, e.size)};
    }
  }
  & input:checked ~ .checkbox-label {
    color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "active",
  "text"
)};
  }
  & input:indeterminate ~ .checkmark {
    & .checked {
      height: 0;
      width: 0;
    }
    background-color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
    & .indeterminate {
      height: ${(e) => o(e.theme, e.size)};
      width: ${(e) => o(e.theme, e.size)};
      stroke: white;
    }
  }
  & input:indeterminate ~ .checkbox-label {
    color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "enabled",
  "text"
)};
  }
  & input:disabled ~ .checkmark {
    ${(e) => e.readOnly !== !0 && `background-color: ${n(
  e.theme,
  "Checkbox",
  e.color,
  "disabled",
  "border"
)};
    border-color: ${n(
  e.theme,
  "Checkbox",
  e.color,
  "disabled",
  "border"
)};
    `};
  }
  & input:disabled ~ .checkbox-label {
    color: ${(e) => n(
  e.theme,
  "Checkbox",
  e.color,
  "disabled",
  "text"
)};
  }
  & input:focus ~ .checkmark {
    ${(e) => x(e.theme)};
  }
  & input:active ~ .checkmark {
    ${(e) => x(e.theme)};
  }
`, F = I((e, d) => {
  const {
    containerRef: f,
    id: W,
    indeterminate: S,
    disabled: b,
    readOnly: h,
    label: a,
    labelPosition: u = "right",
    spaceBetween: w,
    customCheckmark: s,
    //----------------
    onChange: m,
    onFocus: c,
    onBlur: l,
    onClick: $,
    //----------------
    color: C = "primary",
    size: y = "small",
    className: v = "",
    style: z = {},
    children: V,
    ...O
  } = e;
  var p = { theme: P(), size: y, color: C, disabled: b, readOnly: h };
  return /* @__PURE__ */ k(
    T,
    {
      ref: f,
      direction: u,
      className: v,
      style: z,
      label: a,
      labelPosition: u,
      spaceBetween: w,
      tabIndex: -1,
      readOnly: h,
      onClick: $,
      ...p,
      children: [
        /* @__PURE__ */ i(
          "input",
          {
            ref: d,
            type: "checkbox",
            onBlur: (r) => {
              l && (l == null || l(r));
            },
            onFocus: (r) => {
              c && (c == null || c(r));
            },
            disabled: b || h,
            onChange: (r) => m == null ? void 0 : m(r),
            ...O
          }
        ),
        /* @__PURE__ */ k("div", { className: "checkmark", tabIndex: -1, children: [
          !s && /* @__PURE__ */ i(
            "svg",
            {
              viewBox: "0 0 8 6",
              fill: "none",
              xmlns: "http://www.w3.org/2000/svg",
              "aria-hidden": !0,
              disabled: !0,
              tabIndex: -1,
              className: "checked",
              children: /* @__PURE__ */ i(
                "path",
                {
                  d: "M1 3.15385L2.89474 5L7 1",
                  strokeWidth: "2",
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  tabIndex: -1
                }
              )
            }
          ),
          /* @__PURE__ */ i(
            "svg",
            {
              width: "8",
              height: "2",
              viewBox: "0 0 8 2",
              fill: "none",
              xmlns: "http://www.w3.org/2000/svg",
              "aria-hidden": !0,
              disabled: !0,
              tabIndex: -1,
              className: "indeterminate",
              children: /* @__PURE__ */ i(
                "path",
                {
                  d: "M1 1H7",
                  stroke: "white",
                  strokeWidth: "2",
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  tabIndex: -1,
                  title: a
                }
              )
            }
          ),
          s && /* @__PURE__ */ i(B, { children: s })
        ] }),
        a && /* @__PURE__ */ i("div", { className: "checkbox-label", tabIndex: -1, children: a })
      ]
    }
  );
});
F.propTypes = {
  containerRef: t.any,
  id: t.any,
  defaultChecked: t.bool,
  checked: t.bool,
  disabled: t.bool,
  readOnly: t.bool,
  label: t.oneOfType([t.string, t.element]),
  /**
   * Default state indeterminate
   */
  indeterminate: t.bool,
  labelPosition: t.oneOf(["right", "left"]),
  tabIndex: t.number,
  spaceBetween: t.bool,
  customCheckmark: t.element,
  //---------------------------------------------------------------
  onChange: t.func,
  onBlur: t.func,
  onFocus: t.func,
  onClick: t.func,
  //---------------------------------------------------------------
  className: t.string,
  style: t.object,
  size: t.oneOf(["small", "medium", "large"]),
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  F as default
};