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

React component library

import { jsxs as C, jsx as g } from "react/jsx-runtime";
import { useState as S } from "react";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { f as j, c as i, d as b } from "./utils-BUdHa0nB.js";
import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const t = {
  containerWidth: {
    small: "2.5rem",
    medium: "3rem",
    large: "3.5rem"
  },
  containerHeight: {
    small: "1.5rem",
    medium: "1.75rem",
    large: "2rem"
  },
  slider: {
    small: "1rem",
    medium: "1.25rem",
    large: "1.5rem"
  },
  icon: {
    small: "0.75rem",
    medium: "0.875rem",
    large: "1rem"
  },
  iconOff: {
    small: "0.625rem",
    medium: "0.6875rem",
    large: "0.75rem"
  }
}, H = {
  checked: {
    left: {
      small: "1.25rem",
      medium: "1.5rem",
      large: "1.75rem"
    }
  }
}, n = {
  on: {
    top: {
      small: "0.25rem",
      medium: "0.25rem",
      large: "0.25rem"
    },
    left: {
      small: "1.375rem",
      medium: "1.6875rem",
      large: "2rem"
    },
    right: {
      small: "0.5rem",
      medium: "0.5rem",
      large: "0.5rem"
    }
  },
  off: {
    top: {
      small: "0.375rem",
      medium: "0.4375rem",
      large: "0.5rem"
    },
    left: {
      small: "1.375rem",
      medium: "1.75rem",
      large: "2.125rem"
    },
    right: {
      small: "0.5rem",
      medium: "0.5rem",
      large: "0.5rem"
    }
  }
}, P = (e) => e == "left" ? "row-reverse" : "row", W = f.label`
  box-sizing: content-box !important;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  display: flex;
  gap: 0.75rem;
  flex-direction: ${(e) => P(e.labelPosition)};
  ${(e) => e.spaceBetween == !0 && "justify-content: space-between;"}
  position: relative;
  cursor: ${(e) => e.disabled || e.readOnly ? "default" : "pointer"};
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
  flex-shrink: 0;

  min-height: ${(e) => e.theme.sizes[e.size]};
  max-height: ${(e) => e.theme.sizes[e.size]};

  & input:focus:enabled ~ span.toggle-slider {
    ${(e) => !e.disabled && j(e.theme)};
  }

  & input:hover:enabled ~ span.toggle-slider {
    background-color: ${(e) => i(
  e.theme,
  "Toggle",
  null,
  "hover",
  "background",
  "backgroundOpacity"
)};
  }

  & input:checked:hover:enabled ~ span.toggle-slider {
    background-color: ${(e) => i(
  e.theme,
  "Toggle",
  e.color,
  "hover",
  "background"
)};
  }

  & input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: all 0.2s ease;
  }

  & input:checked ~ span.toggle-slider {
    background-color: ${(e) => e.disabled !== !0 ? i(
  e.theme,
  "Toggle",
  e.color,
  "enabled",
  "background"
) : i(
  e.theme,
  "Toggle",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
    transition: all 0.2s ease;
    border-radius: 100px;
    flex-shrink: 0;
  }

  & input:checked ~ span.toggle-slider:after {
    opacity: 1;
    transition: all 0.2s ease-out;
    box-sizing: content-box;
    left: ${(e) => H.checked.left[e.size]};
    position: absolute;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    background-color: ${(e) => e.disabled === !0 ? i(
  e.theme,
  "ToggleSlider",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
) : i(
  e.theme,
  "ToggleSlider",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  }

  & span.toggle-slider {
    width: ${(e) => t.containerWidth[e.size]};
    height: ${(e) => t.containerHeight[e.size]};
    border-radius: 100px;
    font-size: ${(e) => t.icon[e.size]};
    flex-shrink: 0;
  }

  & span.toggle-slider::after {
    left: 0.25rem;
    width: ${(e) => t.slider[e.size]};
    height: ${(e) => t.slider[e.size]};
    top: 0.25rem;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    flex-shrink: 0;
  }

  & span.toggle-slider::before {
    content: ${(e) => `"${e.unicodeIcon ? "\\" + e.unicodeIcon : ""}"`};
    font-family: FontAwesome;
    font-weight: 900;
    width: ${(e) => t.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    color: ${(e) => i(
  e.theme,
  "ToggleIcon",
  e.color,
  "enabled",
  "text"
)};
      flex-shrink: 0;
    border-radius: 100px;
    z-index: 2;

    font-size: ${(e) => t.iconOff[e.size]};
    width: ${(e) => t.iconOff[e.size]};

    top: ${(e) => n.off.top[e.size]};
    right: ${(e) => n.off.right[e.size]};
    left: ${(e) => n.off.left[e.size]};
  }

  & input:checked ~ span.toggle-slider::before {
    content: ${(e) => `"${e.unicodeIcon ? "\\" + e.unicodeIcon : ""}"`};
    font-family: FontAwesome;
    font-weight: 900;
    width: ${(e) => t.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
    color: ${(e) => i(
  e.theme,
  "ToggleIcon",
  e.color,
  "enabled",
  "text"
)};

    font-size: ${(e) => t.icon[e.size]};
    width: ${(e) => t.icon[e.size]};

    top: ${(e) => n.on.top[e.size]};
    right: ${(e) => n.on.right[e.size]};
    left: ${(e) => n.on.left[e.size]};
  }

  & span.toggle-slider {
    position: relative;
    width: ${(e) => t.containerWidth[e.size]};
    height: ${(e) => t.containerHeight[e.size]};
    background-color: ${(e) => e.disabled !== !0 ? i(
  e.theme,
  "Toggle",
  null,
  "enabled",
  "background",
  "backgroundOpacity"
) : i(
  e.theme,
  "Toggle",
  null,
  "disabled",
  "background",
  "backgroundOpacity"
)};
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  & span.toggle-slider:after {
    content: "";
    position: absolute;
    opacity: 1;
    flex-shrink: 0;
    background-color: ${(e) => e.disabled === !0 ? i(
  e.theme,
  "ToggleSlider",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
) : i(
  e.theme,
  "ToggleSlider",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};

    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    transition: all 0.2s ease-out;
  }
`, A = f.span`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 3;

  ${(e) => e.disabled ? b(e.theme, "Toggle", e.size, "disabled") : b(
  e.theme,
  "Toggle",
  e.size,
  "enabled"
)};
`, V = (e) => {
  const {
    // id,
    disabled: a,
    readOnly: s,
    value: d,
    label: c,
    labelPosition: k = "right",
    spaceBetween: x,
    unicodeIcon: $,
    // tabIndex,
    //----------------
    onChange: m,
    onFocus: l,
    onBlur: r,
    //----------------
    className: z = "",
    style: w = {},
    size: p = "medium",
    color: y = "primary",
    ...T
  } = e, O = F(), [v, u] = S(!1);
  let h = {
    theme: O,
    size: p,
    color: y,
    disabled: a,
    readOnly: s,
    focused: v,
    labelPosition: k,
    spaceBetween: x
  };
  function I(o) {
    a || s || (d === null ? m(o, !1) : m(o, !d));
  }
  return /* @__PURE__ */ C(
    W,
    {
      ...h,
      className: z,
      style: w,
      unicodeIcon: $,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ g(
          "input",
          {
            type: "checkbox",
            checked: d ? "checked" : "",
            disabled: a,
            readOnly: s,
            onChange: I,
            onFocus: (o) => {
              u(!0), l && (l == null || l(o));
            },
            onBlur: (o) => {
              u(!1), r && (r == null || r(o));
            },
            ...T
          }
        ),
        /* @__PURE__ */ g("span", { tabIndex: -1, className: "toggle-slider" }),
        c && /* @__PURE__ */ g(A, { tabIndex: -1, title: c, ...h, children: c })
      ]
    }
  );
};
export {
  V as default
};