{"_id":"@darksnow-ui/menubar","name":"@darksnow-ui/menubar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/menubar","version":"1.0.0","description":"menubar component for DarkSnow UI","keywords":["react","menubar","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/menubar"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-menubar":"^1.1.2","@radix-ui/react-icons":"^1.3.2","clsx":"^2.1.1","@darksnow/ui-utils":"1.0.0"},"devDependencies":{"@types/react":"^19.1.0","@types/react-dom":"^19.1.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/menubar@1.0.0","_integrity":"sha512-3P4Gn6Woa7eDv4eGr7xOGJFsG2RUlAD5odFLQygB/9vvVSsb/O/5y+er5c6elz+4hp9yi2Y1ogdfMtAGLmg+Dg==","_resolved":"/tmp/f97ac2bdc006bcf055951925cd5f5085/darksnow-ui-menubar-1.0.0.tgz","_from":"file:darksnow-ui-menubar-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3P4Gn6Woa7eDv4eGr7xOGJFsG2RUlAD5odFLQygB/9vvVSsb/O/5y+er5c6elz+4hp9yi2Y1ogdfMtAGLmg+Dg==","shasum":"391f66c16ab202e25d5e46d776efc92e68721c38","tarball":"https://registry.npmjs.org/@darksnow-ui/menubar/-/menubar-1.0.0.tgz","fileCount":8,"unpackedSize":60733,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDiQEUr9hxF3Ai4ImNOfzVArM7/UogTHVrCvgaAlbuNIAIhAJe4+bXDFaxZZfIbIj9b5/tR8IF6D2SNwcUcuAptXxM3"}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/menubar_1.0.0_1749338984996_0.06196711688602785"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:44.895Z","1.0.0":"2025-06-07T23:29:45.172Z","modified":"2025-06-07T23:29:45.464Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"menubar component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","menubar","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/menubar"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# Menubar\n\nA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. Built on top of Radix UI Menubar primitive.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/menubar\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Usage\n\n```tsx\nimport {\n  Menubar,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarTrigger,\n} from \"@darksnow-ui/menubar\"\n\nexport function MenubarExample() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>New Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem>Print...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n```\n\n## Examples\n\n### Basic Menubar\n\n```tsx\n<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>\n        New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n      </MenubarItem>\n      <MenubarItem>\n        New Window <MenubarShortcut>⌘N</MenubarShortcut>\n      </MenubarItem>\n      <MenubarItem disabled>New Incognito Window</MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>\n        Print... <MenubarShortcut>⌘P</MenubarShortcut>\n      </MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n  <MenubarMenu>\n    <MenubarTrigger>Edit</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>\n        Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n      </MenubarItem>\n      <MenubarItem>\n        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n      </MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>Cut</MenubarItem>\n      <MenubarItem>Copy</MenubarItem>\n      <MenubarItem>Paste</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>\n```\n\n### With Submenus\n\n```tsx\n<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>New Tab</MenubarItem>\n      <MenubarSeparator />\n      <MenubarSub>\n        <MenubarSubTrigger>Share</MenubarSubTrigger>\n        <MenubarSubContent>\n          <MenubarItem>Email link</MenubarItem>\n          <MenubarItem>Messages</MenubarItem>\n          <MenubarItem>Notes</MenubarItem>\n        </MenubarSubContent>\n      </MenubarSub>\n      <MenubarSeparator />\n      <MenubarItem>Print...</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>\n```\n\n### With Checkbox Items\n\n```tsx\nfunction MenubarWithCheckbox() {\n  const [showBookmarks, setShowBookmarks] = useState(true)\n  const [showFullURLs, setShowFullURLs] = useState(false)\n\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem\n            checked={showBookmarks}\n            onCheckedChange={setShowBookmarks}\n          >\n            Always Show Bookmarks Bar\n          </MenubarCheckboxItem>\n          <MenubarCheckboxItem\n            checked={showFullURLs}\n            onCheckedChange={setShowFullURLs}\n          >\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n```\n\n### With Radio Groups\n\n```tsx\nfunction MenubarWithRadio() {\n  const [person, setPerson] = useState(\"pedro\")\n\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value={person} onValueChange={setPerson}>\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            <MenubarRadioItem value=\"pedro\">Pedro</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n```\n\n### Application Style Menubar\n\n```tsx\n<Menubar className=\"max-w-max\">\n  <MenubarMenu>\n    <MenubarTrigger>Application</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>About Application</MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>\n        Preferences... <MenubarShortcut>⌘,</MenubarShortcut>\n      </MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>\n        Hide Application <MenubarShortcut>⌘H</MenubarShortcut>\n      </MenubarItem>\n      <MenubarItem>\n        Quit Application <MenubarShortcut>⌘Q</MenubarShortcut>\n      </MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n  <MenubarMenu>\n    <MenubarTrigger>Help</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>Documentation</MenubarItem>\n      <MenubarItem>Keyboard Shortcuts</MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>Report Issue</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>\n```\n\n## Components\n\n### Menubar\n\nThe root container component.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n\n### MenubarMenu\n\nA container for each menu in the menubar.\n\n### MenubarTrigger\n\nThe button that toggles the menu dropdown.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| children  | React.ReactNode   | -       | Menu trigger content       |\n\n### MenubarContent\n\nThe dropdown content container.\n\n| Prop         | Type              | Default | Description                      |\n|--------------|-------------------|---------|----------------------------------|\n| className    | string            | -       | Additional CSS classes           |\n| align        | \"start\" \\| \"end\"  | \"start\" | Alignment relative to trigger    |\n| alignOffset  | number            | -4      | Offset from alignment position   |\n| sideOffset   | number            | 8       | Distance from trigger            |\n\n### MenubarItem\n\nA menu item component.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| inset     | boolean           | false   | Adds left padding          |\n| disabled  | boolean           | false   | Disables the item          |\n| onSelect  | function          | -       | Called when item selected  |\n\n### MenubarCheckboxItem\n\nA checkbox menu item.\n\n| Prop            | Type              | Default | Description                    |\n|-----------------|-------------------|---------|--------------------------------|\n| className       | string            | -       | Additional CSS classes         |\n| checked         | boolean           | false   | Checkbox state                 |\n| onCheckedChange | function          | -       | Called when checked changes    |\n\n### MenubarRadioGroup\n\nGroups radio items together.\n\n| Prop         | Type              | Default | Description                      |\n|--------------|-------------------|---------|----------------------------------|\n| value        | string            | -       | Current selected value           |\n| onValueChange| function          | -       | Called when value changes        |\n\n### MenubarRadioItem\n\nA radio menu item.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| value     | string            | -       | Radio item value           |\n\n### MenubarSub\n\nContainer for submenu functionality.\n\n### MenubarSubTrigger\n\nTrigger for opening a submenu.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| inset     | boolean           | false   | Adds left padding          |\n\n### MenubarSubContent\n\nContainer for submenu content.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n\n### MenubarSeparator\n\nVisual separator between menu items.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n\n### MenubarShortcut\n\nDisplays keyboard shortcuts in menu items.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n\n## Accessibility\n\n- Full keyboard navigation support\n- Screen reader accessible with proper ARIA attributes\n- Focus management between menu items\n- Supports escape key to close menus\n- Proper focus trapping within menu content\n- Arrow key navigation for menu items\n\n## Styling\n\nThe Menubar components use DarkSnow UI design tokens:\n\n- **Container**: `border-theme-mark-light bg-theme-surface shadow-theme-sm`\n- **Triggers**: Focus states with `focus:bg-theme-accent focus:text-theme-accent-content`\n- **Content**: Animated dropdown with theme-appropriate shadows and borders\n- **Items**: Hover and focus states with proper contrast\n- **Disabled**: Reduced opacity and pointer events disabled\n\n## Best Practices\n\n1. **Consistent structure**: Use similar menu structures across your application\n2. **Keyboard shortcuts**: Include shortcuts for frequently used actions\n3. **Logical grouping**: Use separators to group related menu items\n4. **Clear labels**: Use descriptive, concise labels for menu items\n5. **Disable unavailable actions**: Disable menu items when actions are not available\n6. **Icon consistency**: If using icons, maintain consistent icon usage\n\n## Common Patterns\n\n### File Menu\n\n```tsx\n<MenubarMenu>\n  <MenubarTrigger>File</MenubarTrigger>\n  <MenubarContent>\n    <MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>\n    <MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>\n    <MenubarSeparator />\n    <MenubarItem>Save <MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>\n    <MenubarItem>Save As <MenubarShortcut>⇧⌘S</MenubarShortcut></MenubarItem>\n    <MenubarSeparator />\n    <MenubarItem>Print <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>\n  </MenubarContent>\n</MenubarMenu>\n```\n\n### View Menu with Toggle Options\n\n```tsx\n<MenubarMenu>\n  <MenubarTrigger>View</MenubarTrigger>\n  <MenubarContent>\n    <MenubarCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>\n      Show Sidebar\n    </MenubarCheckboxItem>\n    <MenubarCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>\n      Show Toolbar\n    </MenubarCheckboxItem>\n    <MenubarSeparator />\n    <MenubarItem>Zoom In <MenubarShortcut>⌘+</MenubarShortcut></MenubarItem>\n    <MenubarItem>Zoom Out <MenubarShortcut>⌘-</MenubarShortcut></MenubarItem>\n  </MenubarContent>\n</MenubarMenu>\n```\n\n## Related Components\n\n- [Dropdown Menu](/components/ui/dropdown-menu) - Context menus and dropdown functionality\n- [Navigation Menu](/components/ui/navigation-menu) - Site navigation components\n- [Button](/components/ui/button) - Interactive button components","readmeFilename":"README.md","_rev":"1-9a2e0eba86eeaf90e3efdd89e44d4fae"}