Hugging Face's logo

SaylorTwift
/
opencode

agent
coding-agent
cli
llm
typescript
tool-use
Model card Files
xet
 Community
opencode
File size: 3,419 Bytes
9697ede
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// @ts-nocheck
import * as mod from "./dropdown-menu"
import { Button } from "./button"

const docs = `### Overview
Dropdown menu built on Kobalte with composable items, groups, and submenus.

Use \`DropdownMenu.ItemLabel\`/\`ItemDescription\` for richer rows.

### API
- Root accepts Kobalte DropdownMenu props (\`open\`, \`defaultOpen\`, \`onOpenChange\`).
- Compose with \`Trigger\`, \`Content\`, \`Item\`, \`Separator\`, and optional \`Sub\` sections.

### Variants and states
- Supports item groups, separators, and nested submenus.

### Behavior
- Menu opens from trigger and renders in a portal by default.

### Accessibility
- TODO: confirm keyboard navigation from Kobalte.

### Theming/tokens
- Uses \`data-component="dropdown-menu"\` and slot attributes for styling.

`

export default {
  title: "UI/DropdownMenu",
  id: "components-dropdown-menu",
  component: mod.DropdownMenu,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component: docs,
      },
    },
  },
}

export const Basic = {
  render: () => (
    <mod.DropdownMenu defaultOpen>
      <mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
        Open menu
      </mod.DropdownMenu.Trigger>
      <mod.DropdownMenu.Portal>
        <mod.DropdownMenu.Content>
          <mod.DropdownMenu.Group>
            <mod.DropdownMenu.GroupLabel>Actions</mod.DropdownMenu.GroupLabel>
            <mod.DropdownMenu.Item>
              <mod.DropdownMenu.ItemLabel>New file</mod.DropdownMenu.ItemLabel>
            </mod.DropdownMenu.Item>
            <mod.DropdownMenu.Item>
              <mod.DropdownMenu.ItemLabel>Rename</mod.DropdownMenu.ItemLabel>
              <mod.DropdownMenu.ItemDescription>Shift+R</mod.DropdownMenu.ItemDescription>
            </mod.DropdownMenu.Item>
          </mod.DropdownMenu.Group>
          <mod.DropdownMenu.Separator />
          <mod.DropdownMenu.Sub>
            <mod.DropdownMenu.SubTrigger>More options</mod.DropdownMenu.SubTrigger>
            <mod.DropdownMenu.SubContent>
              <mod.DropdownMenu.Item>
                <mod.DropdownMenu.ItemLabel>Duplicate</mod.DropdownMenu.ItemLabel>
              </mod.DropdownMenu.Item>
              <mod.DropdownMenu.Item>
                <mod.DropdownMenu.ItemLabel>Move</mod.DropdownMenu.ItemLabel>
              </mod.DropdownMenu.Item>
            </mod.DropdownMenu.SubContent>
          </mod.DropdownMenu.Sub>
        </mod.DropdownMenu.Content>
      </mod.DropdownMenu.Portal>
    </mod.DropdownMenu>
  ),
}

export const CheckboxRadio = {
  render: () => (
    <mod.DropdownMenu defaultOpen>
      <mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
        Open menu
      </mod.DropdownMenu.Trigger>
      <mod.DropdownMenu.Portal>
        <mod.DropdownMenu.Content>
          <mod.DropdownMenu.CheckboxItem checked>Show line numbers</mod.DropdownMenu.CheckboxItem>
          <mod.DropdownMenu.CheckboxItem>Wrap lines</mod.DropdownMenu.CheckboxItem>
          <mod.DropdownMenu.Separator />
          <mod.DropdownMenu.RadioGroup value="compact">
            <mod.DropdownMenu.RadioItem value="compact">Compact</mod.DropdownMenu.RadioItem>
            <mod.DropdownMenu.RadioItem value="comfortable">Comfortable</mod.DropdownMenu.RadioItem>
          </mod.DropdownMenu.RadioGroup>
        </mod.DropdownMenu.Content>
      </mod.DropdownMenu.Portal>
    </mod.DropdownMenu>
  ),
}