Cursors

import { Box } from "@bosunkit/components/box";
import { Button } from "@bosunkit/components/button";
import { FormField } from "@bosunkit/components/form-field";
import { Input } from "@bosunkit/components/input";
import { Logo } from "@bosunkit/components/logo";
import { Stack } from "@bosunkit/components/stack";
import { Text } from "@bosunkit/components/text";
import { useId, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Hover the logo, open the details and edit the field. The cursor follows what each element allows.";

export default function Example(): ReactElement {
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const detailsId: string = useId();
  const unavailableId: string = useId();

  return (
    <div role="group" aria-label="Cursor examples" style={{ width: "100%" }}>
      <Stack space="lg">
        <Box background="surface2" padding="lg" radius="md">
          <Stack space="md">
            <Text variant="label">Identity · default arrow</Text>
            <Logo size="md" version="26.10.2" />
            <Text variant="caption" color="text-dim">
              The mark, name, tagline and version keep the same cursor.
            </Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="lg" radius="md">
          <Stack space="md">
            <Text variant="label">Action · pointing hand</Text>
            <div>
              <Button
                textCase="none"
                motion={false}
                aria-expanded={open}
                aria-controls={detailsId}
                onClick={(): void => {
                  setOpen(!open);
                }}
              >
                {open ? "Hide details" : "Show details"}
              </Button>
            </div>
            <div id={detailsId} hidden={!open}>
              <Text>The button opens and closes these details with a mouse, touch, Enter or Space.</Text>
            </div>
          </Stack>
        </Box>
        <Box background="surface2" padding="lg" radius="md">
          <FormField label="Editable text · I-beam" hint="Select or edit this name. Changes stay in this example.">
            <Input defaultValue="Windgrazer" />
          </FormField>
        </Box>
        <Box background="surface2" padding="lg" radius="md">
          <Stack space="md">
            <Text variant="label">Unavailable action</Text>
            <div>
              <Button disabled textCase="none" aria-describedby={unavailableId}>
                Save changes
              </Button>
            </div>
            <div id={unavailableId}>
              <Text variant="caption" color="text-dim">
                This example does not save changes.
              </Text>
            </div>
          </Stack>
        </Box>
      </Stack>
    </div>
  );
}