Uncontrolled, controlled and disabled

// apps/docs/examples/ui/toggle.tsx'use client';
import {useState} from 'react';import {BellIcon, BellOffIcon, BoldIcon} from 'lucide-react';
import {Toggle} from '@workspace/active-ui/components/primitives/toggle';
/** * A button with an on and an off state. Uncontrolled, it keeps its own * state; controlled, `pressed` and `onPressedChange` hand it to your * application. Its state is announced as `aria-pressed`. */export default function ToggleExample() {  const [muted, setMuted] = useState(false);  return (    <div className="flex flex-wrap items-center gap-4">      <Toggle aria-label="Bold">        <BoldIcon aria-hidden />      </Toggle>      <Toggle variant="outline" pressed={muted} onPressedChange={setMuted}>        {muted ? (          <BellOffIcon data-icon="inline-start" aria-hidden />        ) : (          <BellIcon data-icon="inline-start" aria-hidden />        )}        Mute notifications      </Toggle>      <p className="text-muted-foreground text-sm" aria-live="polite">        Notifications are {muted ? 'muted' : 'on'}.      </p>      <Toggle disabled aria-label="Bold, not available">        <BoldIcon aria-hidden />      </Toggle>    </div>  );}