"use client";
import{a as p}from"./chunk-VWS2Q7O3.js";import{d as i,e as n}from"./chunk-CLTGASR6.js";import{a as c,m as r}from"./chunk-3CHPBNY2.js";import{p as s}from"./chunk-KEPQUAOX.js";import{forwardRef as P}from"react";import l from"clsx";var w=c("EulToggle",["checked","disabled","focusVisible","input","readOnly","root"]),d=o=>n("EulToggle",{input:["input"],root:["root",o.checked&&"checked",o.disabled&&"disabled",o.focusVisible&&"focusVisible",o.readOnly&&"readOnly"],thumb:["thumb"]}),e=w;var u=r("input")`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
`,g=r("div")(({theme:o})=>s`
    position: relative;
    display: inline-block;
    width: ${o.spacing(8)};
    height: ${o.spacing(5)};
    font-size: 0;
    background-color: ${o.palette.background[200]};
    border-radius: 100px;
    cursor: pointer;
    transition: ${o.transitions.create(["background-color"])};

    &.${e.checked} {
      background-color: ${o.palette.tealOpaque[300]};
    }

    &:hover {
      background-color: ${o.palette.background[100]};

      &.${e.checked} {
        background-color: ${o.palette.tealOpaque[400]};
      }
    }

    &.${e.focusVisible} {
      outline: ${o.spacing(.5)} solid ${o.palette.yellow[600]};
      outline-offset: ${o.spacing(.5)};
    }

    &.${e.disabled}, &.${e.disabled}:hover {
      background-color: transparent;
      outline: 1px solid ${o.palette.background[600]};
      cursor: not-allowed;
    }
  `),b=r("span")(({theme:o})=>s`
    position: relative;
    top: 2px;
    left: 2px;
    display: block;
    width: ${o.spacing(4)};
    height: ${o.spacing(4)};
    background-color: ${o.palette.background[700]};
    border-radius: ${o.spacing(4)};
    transition: ${o.transitions.create(["left","background-color"])};

    .${e.checked} & {
      top: 2px;
      left: 14px;
      background-color: ${o.palette.teal[700]};
    }

    .${e.root}:hover & {
      background-color: ${o.palette.background[800]};
    }

    .${e.checked}:hover & {
      background-color: ${o.palette.teal[800]};
    }

    .${e.disabled} &,
    .${e.disabled}:hover & {
      background-color: ${o.palette.background[600]};
    }
  `);import{jsx as f,jsxs as I}from"react/jsx-runtime";var $=P(({className:o,name:k,value:m,...a},T)=>{let{checked:x,disabled:y,focusVisible:h,getInputProps:C,readOnly:S}=p(a),v=i(a),t=d({checked:x,disabled:y,focusVisible:h,readOnly:S});return I(g,{className:l(o,t.root),children:[f(b,{className:l(t.thumb)}),f(u,{className:l(t.input),name:k,value:m,...C(),...v,ref:T})]})});$.displayName="Toggle";var V=$;export{e as a,V as b};
