opencode/packages/ui/src/v2/components/keybind-v2.stories.tsx

import { KeybindV2 } from "./keybind-v2"

const docs = `### Overview
Inline keybind indicator that renders one or more keyboard keys in a compact row.

### API
- \`keys\`: Array of key labels to display (e.g. \`["⌘", "K"]\`).
- \`variant\`: "neutral" (gray background) | "ghost" (no background).
- Inherits native div attributes.

### Variants
- **Neutral** — each key sits on a \`#D4D4D4\` pill with darker text.
- **Ghost** — keys render without a background, lighter text color.
`

export default {
  title: "UI V2/Keybind",
  id: "components-keybind-v2",
  component: KeybindV2,
  tags: ["autodocs"],
  parameters: {
    frameHeight: "200px",
    frameBackground: "#fff",
    docs: {
      description: {
        component: docs,
      },
    },
  },
  args: {
    keys: ["⌘"],
    variant: "neutral",
  },
  argTypes: {
    keys: {
      control: "object",
    },
    variant: {
      control: "select",
      options: ["neutral", "ghost"],
    },
  },
}

export const Playground = {}

export const Variants = {
  render: () => (
    <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
      <KeybindV2 keys={["⌘"]} variant="neutral" />
      <KeybindV2 keys={["⌘"]} variant="ghost" />
    </div>
  ),
}

export const MultipleKeys = {
  render: () => (
    <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
      <KeybindV2 keys={["⌘", "K"]} variant="neutral" />
      <KeybindV2 keys={["⌘", "K"]} variant="ghost" />
    </div>
  ),
}

export const AllExamples = {
  render: () => (
    <div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
      <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
        <span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Neutral</span>
        <KeybindV2 keys={["⌘"]} variant="neutral" />
        <KeybindV2 keys={["⌘", "K"]} variant="neutral" />
        <KeybindV2 keys={["⌘", "⇧", "P"]} variant="neutral" />
      </div>
      <div style={{ display: "flex", gap: "24px", "align-items": "center" }}>
        <span style={{ "font-size": "11px", color: "#808080", width: "50px" }}>Ghost</span>
        <KeybindV2 keys={["⌘"]} variant="ghost" />
        <KeybindV2 keys={["⌘", "K"]} variant="ghost" />
        <KeybindV2 keys={["⌘", "⇧", "P"]} variant="ghost" />
      </div>
    </div>
  ),
}