Interaction states

import { useId, useState, type Dispatch, type SetStateAction, type ReactElement } from "react";
import { Check } from "lucide-react";
import { Button } from "@bosunkit/components/button";
import { Input } from "@bosunkit/components/input";
import { Label } from "@bosunkit/components/label";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Switch } from "@bosunkit/components/switch";
import { Text } from "@bosunkit/components/text";

export const description: string =
  "Tab through real controls, toggle a selection, and make an action unavailable or pending.";
export default function Example(): ReactElement {
  const id: string = useId();
  const [selected, setSelected]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [unavailable, setUnavailable]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [pending, setPending]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [saved, setSaved]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  return (
    <Stack space="lg">
      <Inline>
        <Switch id={`${id}-disabled`} checked={unavailable} onCheckedChange={setUnavailable} />
        <Label htmlFor={`${id}-disabled`}>Make action unavailable</Label>
      </Inline>
      <Inline>
        <Switch id={`${id}-pending`} checked={pending} onCheckedChange={setPending} />
        <Label htmlFor={`${id}-pending`}>Show pending state</Label>
      </Inline>
      <Inline>
        <Button
          textCase="none"
          aria-pressed={selected}
          variant={selected ? "primary" : "default"}
          onClick={(): void => {
            setSelected(!selected);
          }}
        >
          {selected ? <Check aria-hidden /> : null} Compact view
        </Button>
        <Button
          textCase="none"
          disabled={unavailable || pending}
          aria-busy={pending}
          onClick={(): void => {
            setSaved(true);
          }}
        >
          {pending ? "Saving…" : "Save example"}
        </Button>
      </Inline>
      <div role="status">
        <Text>
          {pending
            ? "Example operation in progress. Turn off the pending switch to finish."
            : unavailable
              ? "Saving is unavailable while this example is locked."
              : saved
                ? "Example saved locally."
                : "The example is ready to save."}
        </Text>
      </div>
      <Stack space="xs">
        <Label htmlFor={`${id}-readonly`}>Read-only value</Label>
        <Input id={`${id}-readonly`} value="Vessel notes" readOnly />
        <Text variant="caption" color="text-dim">
          You can focus and copy this value; editing is unavailable.
        </Text>
      </Stack>
    </Stack>
  );
}