react-toggly/dist/index.js

A highly customizable and themeable toggle switch component for React, built with TypeScript and styled-components. Supports multiple themes like iOS, Bootstrap, and Tailwind CSS, and allows for custom icons, accessibility features, and controlled/uncontr

import{jsxs as e,jsx as a}from"react/jsx-runtime";import c from"react";const l=({isChecked:l,defaultIsChecked:t=!1,onToggleChange:r,onToggleFocus:o,onToggleBlur:n,inputName:i,inputValue:s,inputId:g,customIcons:d,ariaLabelledBy:h,ariaLabel:p,isDisabled:_,containerClassName:u,toggleTheme:m="ios",leftLabel:y,rightLabel:b})=>{const k=void 0!==l,[N,f]=c.useState(t),v=k?l:N;return e("div",{className:`react-toggly-container ${u||""}`,children:[y&&a("span",{className:"react-toggly__left-label",children:y}),e("label",{className:`react-toggly__wrapper react-toggly__wrapper--${m} ${_?"react-toggly__wrapper--disabled":""}`,children:[a("input",{type:"checkbox",className:"react-toggly__input",checked:v,onChange:e=>{_||(k||f(e.target.checked),r?.(e))},onFocus:o,onBlur:n,name:i,value:s,id:g,"aria-labelledby":h,"aria-label":p,disabled:_}),e("span",{className:"react-toggly__slider",children:[d?.checked&&v&&a("div",{className:"react-toggly__icon-wrapper react-toggly__checked-icon",children:d.checked}),d?.unchecked&&!v&&a("div",{className:"react-toggly__icon-wrapper react-toggly__unchecked-icon",children:d.unchecked})]})]}),b&&a("span",{className:"react-toggly__right-label",children:b})]})};export{l as default};
//# sourceMappingURL=index.js.map