Kbd

import { Kbd, KbdGroup } from '@brika/clay/components/kbd';

/** `KbdGroup` aligns a chord and exposes it as a single ARIA group. */
export default function KbdGroupDemo() {
  return (
    <KbdGroup aria-label="Open command palette">
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

import { Button } from '@brika/clay/components/button';
import { Kbd } from '@brika/clay/components/kbd';
import { CornerDownLeftIcon } from 'lucide-react';

/** Kbd is `pointer-events-none`, so a key cap inside a button doesn't swallow clicks. */
export default function KbdInButtonDemo() {
  return (
    <Button variant="outline">
      Accept
      <Kbd>
        <CornerDownLeftIcon />
      </Kbd>
    </Button>
  );
}

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@brika/clay/components/input-group';
import { Kbd, KbdGroup } from '@brika/clay/components/kbd';
import { SearchIcon } from 'lucide-react';

/** Drop a chord into an `InputGroupAddon` to advertise a search shortcut. */
export default function KbdInInputDemo() {
  return (
    <InputGroup className="w-full max-w-xs">
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search the docs..." />
      <InputGroupAddon align="inline-end">
        <KbdGroup aria-label="Search shortcut">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </InputGroupAddon>
    </InputGroup>
  );
}

import { Kbd } from '@brika/clay/components/kbd';

/** Kbd flows inline with body copy thanks to `align-middle` and `inline-flex`. */
export default function KbdInTextDemo() {
  return (
    <p className="text-sm">
      Press <Kbd>⌘</Kbd>
      <Kbd>K</Kbd> to open the command palette.
    </p>
  );
}

import { Button } from '@brika/clay/components/button';
import { Kbd, KbdGroup } from '@brika/clay/components/kbd';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@brika/clay/components/tooltip';
/** Inside `TooltipContent`, Kbd auto-recolors to read against the inverted surface. */
export default function KbdInTooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Print</Button>
        </TooltipTrigger>
        <TooltipContent>
          Print the document
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>P</Kbd>
          </KbdGroup>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

'use client';

import { useModifier } from '@brika/clay';
import { Kbd, KbdGroup } from '@brika/clay/components/kbd';

/**
 * @title Platform modifier
 * `useModifier` resolves the shortcut key on the client (Command on Apple devices, Control elsewhere) so the hint is right on any OS.
 */
export default function KbdPlatformDemo() {
  const { symbol } = useModifier();
  return (
    <KbdGroup aria-label={`${symbol} K`}>
      <Kbd>{symbol}</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}