@kitn.ai/ui/dist/elements/switch.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{g as p,n as m,a as b,d as v,u as C,b as w,t as y,e as A,f as $,A as f,h as R,c as E}from"./chunks/define-CNSKFZCd.js";import{c as x}from"./chunks/cn-CU7UAWzk.js";var j=y("<button type=button role=switch><span>"),q=y('<input type=checkbox aria-hidden=true tabindex=-1 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap">');function O(i){const[h,d]=p(i.defaultChecked??!1),c=()=>i.checked!==void 0,n=()=>c()?!!i.checked:h(),u=()=>{var e;if(i.disabled)return;const o=!n();c()||d(o),(e=i.onChange)==null||e.call(i,o)};return[m(()=>m(()=>i.name!=null)()&&(()=>{var e=q();return e.addEventListener("change",()=>{}),b(o=>{var l=i.name,t=i.disabled;return l!==o.e&&v(e,"name",o.e=l),t!==o.t&&(e.disabled=o.t=t),o},{e:void 0,t:void 0}),b(()=>e.value=i.value??"on"),b(()=>e.checked=n()),e})()),(()=>{var e=j(),o=e.firstChild;e.$$keydown=t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),u())},e.$$click=u;var l=i.buttonRef;return typeof l=="function"?C(l,e):i.buttonRef=e,b(t=>{var r=n(),a=i.label,s=i.disabled,g=x("relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background","disabled:cursor-not-allowed disabled:opacity-50",n()?"bg-primary":"bg-muted",i.class),k=x("inline-block h-4 w-4 rounded-full shadow transition-transform",n()?"translate-x-[1.125rem] bg-primary-foreground":"translate-x-0.5 bg-white");return r!==t.e&&v(e,"aria-checked",t.e=r),a!==t.t&&v(e,"aria-label",t.t=a),s!==t.a&&(e.disabled=t.a=s),g!==t.o&&w(e,t.o=g),k!==t.i&&w(o,t.i=k),t},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),e})()]}A(["click","keydown"]),$("kai-switch",{checked:void 0,defaultChecked:void 0,disabled:void 0,label:void 0,name:void 0,value:void 0},(i,h)=>{const{element:d,dispatch:c,flag:n,expose:u}=h,[e,o]=p(n("defaultChecked")||n("checked")),l=r=>r===!0?!0:r===!1?!1:d.hasAttribute("checked")&&d.getAttribute("checked")!=="false",t=r=>{n("disabled")||f(e)!==r&&(o(r),c("kai-change",{checked:r}))};return Object.defineProperty(d,"checked",{get:()=>e(),set:r=>{const a=l(r);f(e)!==a&&o(a)},configurable:!0,enumerable:!0}),R(()=>{const r=e();r!==d.hasAttribute("checked")&&d.toggleAttribute("checked",r)}),u({toggle:()=>t(!f(e)),focus:r=>{var a,s;return(s=(a=d.shadowRoot)==null?void 0:a.querySelector('button[role="switch"]'))==null?void 0:s.focus(r)}}),E(O,{get checked(){return e()},get disabled(){return n("disabled")},get label(){return i.label},get name(){return i.name},get value(){return i.value},onChange:r=>t(r)})});