Switch

---
import { Switch } from "@/components/starwind/switch";
---

<Switch id="default" label="Default" variant="default" defaultChecked />
<Switch id="primary" label="Primary" variant="primary" defaultChecked />
<Switch id="secondary" label="Secondary" variant="secondary" defaultChecked />
<Switch id="info" label="Info" variant="info" defaultChecked />
<Switch id="success" label="Success" variant="success" defaultChecked />
<Switch id="warning" label="Warning" variant="warning" defaultChecked />
<Switch id="error" label="Error" variant="error" defaultChecked />

---
import { Switch } from "@/components/starwind/switch";
---

<Switch id="small" label="Small" size="sm" />
<Switch id="medium" label="Medium" size="md" />
<Switch id="large" label="Large" size="lg" />

---
import { Switch } from "@/components/starwind/switch";
---

<div class="mt-8 space-y-4">
  <h2 class="text-xl font-semibold">Switch Event Test</h2>

  <div class="space-y-4">
    <Switch id="test-switch" label="Test Switch" variant="primary" />

    <div id="status-display" class="text-muted-foreground text-sm">
      Switch is currently: <span class="text-foreground font-medium">off</span>
    </div>
  </div>
</div>

<script>
  const root = document.querySelector<HTMLElement>("#test-switch");
  const output = document.querySelector<HTMLElement>("#status-display span");

  root?.addEventListener("starwind:checked-change", (event) => {
    const { checked } = (event as CustomEvent<{ checked: boolean }>).detail;
    if (output) output.textContent = checked ? "on" : "off";
  });
</script>