@anatoliygatt/dark-mode-toggle/dist/esm/index.js

A dark mode toggle component for React.

import*as n from"react";import{useEffect as D,useRef as M,useState as I}from"react";import{useRef as R}from"react";function d(){let e=R(!0);return e.current?(e.current=!1,!0):e.current}import{useEffect as w,useRef as H}from"react";function u(e){let t=H();return w(()=>{t.current=e}),t.current}function p(e,t){let c=d(),r=u(e),[s,l]=I(!1),i=M();return D(()=>{e!==r&&(l(!0),i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{l(!1),i.current=void 0},t))},[e,r,t]),c?!0:s}import P from"@emotion/styled";var a=250;function o(e){switch(e){case"sm":return 1;case"md":return 1.5;case"lg":return 2}}var v=P.div`
  display: inline-flex;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  span {
    transition: color ${a}ms ease-in-out;
    padding: ${e=>8*o(e.size)}px
      ${e=>12*o(e.size)}px;
    cursor: pointer;
    font-size: ${e=>12*o(e.size)}px;
    font-weight: 600;
    text-transform: uppercase;

    &:nth-of-type(1) {
      &:hover {
        color: ${e=>e.activeLabelColorOnHover};
      }

      &:active {
        color: ${e=>e.activeLabelColorOnActive};
      }
    }

    &:nth-of-type(2) {
      &:hover {
        color: ${e=>e.inactiveLabelColorOnHover};
      }

      &:active {
        color: ${e=>e.inactiveLabelColorOnActive};
      }
    }
  }

  input {
    position: relative;
    overflow: hidden;
    transition: all ${a}ms ease-in-out;
    transition-property: box-shadow, background-color;
    appearance: none;
    margin: 0;
    outline: none;
    border-radius: ${e=>14*o(e.size)}px;
    width: ${e=>48*o(e.size)}px;
    height: ${e=>28*o(e.size)}px;
    background-color: ${e=>e.inactiveTrackColor};
    cursor: pointer;
    user-select: none;

    &:checked {
      background-color: ${e=>e.activeTrackColor};

      &:hover,
      &:hover::after {
        background-color: ${e=>e.activeTrackColorOnHover};
      }

      &:active,
      &:active::after {
        background-color: ${e=>e.activeTrackColorOnActive};
      }

      &::before {
        left: ${e=>24*o(e.size)}px;
        background-color: ${e=>e.activeThumbColor};
      }

      &::after {
        top: ${e=>12*o(e.size)}px;
        right: ${e=>2*o(e.size)}px;
        width: ${e=>1*o(e.size)}px;
        height: ${e=>1*o(e.size)}px;
        border-radius: ${e=>.5*o(e.size)}px;
        background-color: ${e=>e.activeTrackColor};
      }
    }

    &:hover,
    &:hover::after {
      background-color: ${e=>e.inactiveTrackColorOnHover};
    }

    &:focus,
    &:focus-visible {
      box-shadow: 0 0 0 ${e=>2*o(e.size)}px
        ${e=>e.focusRingColor};
    }

    &:focus:not(:focus-visible) {
      box-shadow: none;
    }

    &:active,
    &:active::after {
      background-color: ${e=>e.inactiveTrackColorOnActive};
    }

    &::before {
      content: '';
      position: absolute;
      top: ${e=>4*o(e.size)}px;
      left: ${e=>4*o(e.size)}px;
      display: block;
      transition: all ${a}ms ease-in-out;
      transition-property: left, background-color;
      width: ${e=>20*o(e.size)}px;
      height: ${e=>20*o(e.size)}px;
      border-radius: ${e=>12*o(e.size)}px;
      background-color: ${e=>e.inactiveThumbColor};
    }

    &::after {
      content: '';
      position: absolute;
      top: ${e=>-2*o(e.size)}px;
      right: ${e=>2*o(e.size)}px;
      display: block;
      transition: all ${a}ms ease-in-out;
      transition-property: top, right, width, height, border-radius,
        background-color;
      width: ${e=>32*o(e.size)}px;
      height: ${e=>32*o(e.size)}px;
      border-radius: ${e=>16*o(e.size)}px;
      background-color: ${e=>e.inactiveTrackColor};
    }
  }

  &[data-checked='false'] {
    span {
      color: ${e=>e.inactiveLabelColor};

      &:nth-of-type(1) {
        pointer-events: none;
      }
    }
  }

  &[data-checked='true'] {
    span {
      color: ${e=>e.activeLabelColor};

      &:nth-of-type(2) {
        pointer-events: none;
      }
    }
  }

  &[data-transition-disabled='true'] {
    *,
    *::before,
    *::after {
      transition-duration: 0ms;
    }
  }
`;function V({mode:e="dark",dark:t,light:c,onChange:r,size:s="sm",inactiveLabelColor:l="#b9bdc1",inactiveLabelColorOnHover:i="#fcfefe",inactiveLabelColorOnActive:b="#cdd1d5",activeLabelColor:f="#5b5e62",activeLabelColorOnHover:g="#404346",activeLabelColorOnActive:k="#010101",inactiveTrackColor:T="#dce0e3",inactiveTrackColorOnHover:m="#fcfefe",inactiveTrackColorOnActive:h="#cdd1d5",activeTrackColor:$="#404346",activeTrackColorOnHover:x="#2d2f31",activeTrackColorOnActive:C="#141516",inactiveThumbColor:z="#2d2f31",activeThumbColor:O="#dce0e3",focusRingColor:y="rgb(59 130 246 / 0.5)",ariaLabel:L}){let A=p(s,a);return n.createElement(v,{size:s,inactiveLabelColor:l,inactiveLabelColorOnHover:i,inactiveLabelColorOnActive:b,activeLabelColor:f,activeLabelColorOnHover:g,activeLabelColorOnActive:k,inactiveTrackColor:T,inactiveTrackColorOnHover:m,inactiveTrackColorOnActive:h,activeTrackColor:$,activeTrackColorOnHover:x,activeTrackColorOnActive:C,inactiveThumbColor:z,activeThumbColor:O,focusRingColor:y,"data-transition-disabled":A,"data-checked":e==="light","data-testid":"dark-mode-toggle"},t&&n.createElement("span",{onClick:()=>{r==null||r("dark")},"aria-hidden":"true"},t),n.createElement("input",{type:"checkbox",role:"switch",checked:e==="light","aria-label":L,onChange:S=>{r==null||r(S.target.checked?"light":"dark")}}),c&&n.createElement("span",{onClick:()=>{r==null||r("light")},"aria-hidden":"true"},c))}export{V as DarkModeToggle};
//# sourceMappingURL=index.js.map