Switch

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/switch.tsx — toggled by the shared island (data-ui="switch")
export function Switch(o = {}) {
  const on = !!o.checked;
  return \`<button role="switch" data-ui="switch" data-state="\${on ? "checked" : "unchecked"}" aria-checked="\${on}"
    class="peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors \${on ? "bg-primary" : "bg-input"}">
    <span class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg transition-transform" style="transform:translateX(\${on ? "16px" : "0"})"></span>
  </button>\`;
}