Switch

import { Switch } from "@/ui";

export default function SwitchBasicDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Switch defaultChecked>Enable notifications</Switch>
      <Switch>Enable dark mode</Switch>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Switch } from "@/ui";

export default function SwitchControlledDemo() {
  const [enabled, setEnabled] = useState(false);

  return (
    <div className="space-y-4">
      <Switch checked={enabled} onCheckedChange={setEnabled}>
        Airplane mode
      </Switch>
      <p className="text-sm text-muted-foreground">
        Airplane mode is {enabled ? "on" : "off"}
      </p>
    </div>
  );
}

import { Switch } from "@/ui";

export default function SwitchDisabledDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Switch disabled>Disabled (off)</Switch>
      <Switch disabled defaultChecked>
        Disabled (on)
      </Switch>
    </div>
  );
}

"use client";import { useState } from "react";import { SwitchLabel, SwitchRoot, SwitchThumb, SwitchTrack } from "@/ui";export default function Demo() {  const [checked, setChecked] = useState(false);  return (    <SwitchLabel>      <SwitchTrack        checked={checked}        className="w-14 h-7 bg-muted data-checked:bg-emerald-600"      >        <SwitchRoot          checked={checked}          onChange={(e) => setChecked(e.target.checked)}        />        <SwitchThumb          checked={checked}          className="w-6 h-6 data-checked:translate-x-7"        />      </SwitchTrack>      <span className="text-sm font-medium">Large switch</span>    </SwitchLabel>  );}