Toggle

---
import { Toggle } from "@/components/starwind/toggle";
---

<Toggle variant="outline">Toggle</Toggle>

import { Toggle } from "@/components/starwind/toggle";

export function Example() {
  return (
    <>
      <Toggle variant="outline">Toggle</Toggle>
    </>
  );
}

---
import { Toggle } from "@/components/starwind/toggle";
---

<Toggle variant="default">Default</Toggle>
<Toggle variant="outline">Outline</Toggle>

import { Toggle } from "@/components/starwind/toggle";

export function Example() {
  return (
    <>
      <Toggle variant="default">Default</Toggle>
      <Toggle variant="outline">Outline</Toggle>
    </>
  );
}

---
import { Toggle } from "@/components/starwind/toggle";
---

<Toggle size="sm">Small</Toggle>
<Toggle size="md">Medium</Toggle>
<Toggle size="lg">Large</Toggle>

import { Toggle } from "@/components/starwind/toggle";

export function Example() {
  return (
    <>
      <Toggle size="sm">Small</Toggle>
      <Toggle size="md">Medium</Toggle>
      <Toggle size="lg">Large</Toggle>
    </>
  );
}

---
import { Toggle } from "@/components/starwind/toggle";
---

<Toggle variant="outline" syncGroup="view-mode">
  Grid view
</Toggle>
<Toggle variant="outline" syncGroup="view-mode">
  Grid view (mirrored)
</Toggle>

import { Toggle } from "@/components/starwind/toggle";

export function Example() {
  return (
    <>
      <Toggle variant="outline" syncGroup="view-mode">
        Grid view
      </Toggle>
      <Toggle variant="outline" syncGroup="view-mode">
        Grid view (mirrored)
      </Toggle>
    </>
  );
}

---
import { Toggle } from "@/components/starwind/toggle";
---

<div class="space-y-4">
  <Toggle id="test-toggle">Test Toggle</Toggle>

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

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

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

import { useState } from "react";
import { Toggle } from "@/components/starwind/toggle";

export function Example() {
  const [pressed, setPressed] = useState(false);

  return (
    <div className="space-y-4">
      <Toggle pressed={pressed} onPressedChange={setPressed}>Test Toggle</Toggle>
      <div className="text-muted-foreground text-sm">
        Toggle is currently:{" "}
        <span className="text-foreground font-medium">{pressed ? "on" : "off"}</span>
      </div>
    </div>
  );
}