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: () => (
),
}
export const MultipleKeys = {
render: () => (
),
}
export const AllExamples = {
render: () => (
),
}