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

React component library

import { jsxs as P, jsx as m } from "react/jsx-runtime";
import { useState as S } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as k } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { e as j, b as n, c as f } from "./utils-DtRLzzTZ.js";
import { u as B } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const o = {
  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"
  }
}, F = {
  checked: {
    left: {
      small: "1.25rem",
      medium: "1.5rem",
      large: "1.75rem"
    }
  }
}, l = {
  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"
    }
  }
}, H = (e) => e == "left" ? "row-reverse" : "row", N = k.label`
  box-sizing: content-box !important;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  display: flex;
  gap: 0.75rem;
  flex-direction: ${(e) => H(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) => n(
  e.theme,
  "Toggle",
  null,
  "hover",
  "background",
  "backgroundOpacity"
)};
  }

  & input:checked:hover:enabled ~ span.toggle-slider {
    background-color: ${(e) => n(
  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 ? n(
  e.theme,
  "Toggle",
  e.color,
  "enabled",
  "background"
) : n(
  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) => F.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 ? n(
  e.theme,
  "ToggleSlider",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
) : n(
  e.theme,
  "ToggleSlider",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  }

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

  & span.toggle-slider::after {
    left: 0.25rem;
    width: ${(e) => o.slider[e.size]};
    height: ${(e) => o.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) => o.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

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

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

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

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

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

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

  & span.toggle-slider {
    position: relative;
    width: ${(e) => o.containerWidth[e.size]};
    height: ${(e) => o.containerHeight[e.size]};
    background-color: ${(e) => e.disabled !== !0 ? n(
  e.theme,
  "Toggle",
  null,
  "enabled",
  "background",
  "backgroundOpacity"
) : n(
  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 ? n(
  e.theme,
  "ToggleSlider",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
) : n(
  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;
  }
`, W = k.span`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 3;

  ${(e) => e.disabled ? f(e.theme, "Toggle", e.size, "disabled") : f(
  e.theme,
  "Toggle",
  e.size,
  "enabled"
)};
`, A = (e) => {
  const {
    // id,
    disabled: s,
    readOnly: d,
    value: c,
    label: g,
    labelPosition: x = "right",
    spaceBetween: $,
    unicodeIcon: z,
    // tabIndex,
    //----------------
    onChange: u,
    change: L,
    onFocus: r,
    onBlur: a,
    //----------------
    className: p = "",
    style: y = {},
    size: w = "medium",
    color: O = "primary",
    ...T
  } = e, I = B(), [v, h] = S(!1);
  let b = {
    theme: I,
    size: w,
    color: O,
    disabled: s,
    readOnly: d,
    focused: v,
    labelPosition: x,
    spaceBetween: $
  };
  function C(i) {
    s || d || (c === null ? u(i, !1) : u(i, !c));
  }
  return /* @__PURE__ */ P(
    N,
    {
      ...b,
      className: p,
      style: y,
      unicodeIcon: z,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ m(
          "input",
          {
            type: "checkbox",
            checked: c ? "checked" : "",
            disabled: s,
            readOnly: d,
            onChange: C,
            onFocus: (i) => {
              h(!0), r && (r == null || r(i));
            },
            onBlur: (i) => {
              h(!1), a && (a == null || a(i));
            },
            ...T
          }
        ),
        /* @__PURE__ */ m("span", { tabIndex: -1, className: "toggle-slider" }),
        g && /* @__PURE__ */ m(W, { tabIndex: -1, title: g, ...b, children: g })
      ]
    }
  );
};
A.propTypes = {
  id: t.any,
  disabled: t.bool,
  readOnly: t.bool,
  label: t.oneOfType([t.element, t.string]),
  unicodeIcon: t.string,
  labelPosition: t.oneOf(["right", "left"]),
  spaceBetween: t.bool,
  tabIndex: t.number,
  //-------------------------------
  onChange: t.func,
  change: t.func,
  onFocus: t.func,
  onBlur: t.func,
  //-------------------------------
  style: t.object,
  className: t.string,
  size: t.oneOf(["small", "medium", "large"]),
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  A as default
};