Menubar

import { Menubar } from "@/ui/Menubar";

function MyApp() {
  return (
    <Menubar>
      <Menubar.Menu>
        <Menubar.Trigger>File</Menubar.Trigger>
        <Menubar.Content>
          <Menubar.Item onSelect={() => {}}>
            New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
          </Menubar.Item>
          <Menubar.Separator />
          <Menubar.Item onSelect={() => {}}>
            Save <Menubar.Shortcut>⌘S</Menubar.Shortcut>
          </Menubar.Item>
        </Menubar.Content>
      </Menubar.Menu>
    </Menubar>
  );
}

"use client";

import React, {
  createContext, useCallback, useContext, useEffect, useRef, useState,
  type ButtonHTMLAttributes, type HTMLAttributes, type ReactElement, type ReactNode,
} from "react";
import { cn } from "@/shared/utils/cn";

// ─── Types ────────────────────────────────────────────────────────────────────

export interface MenubarProps { children: ReactNode; className?: string; }
export interface MenubarMenuProps { children: ReactNode; className?: string; }
export interface MenubarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: ReactNode; }
export interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> { children: ReactNode; }
export interface MenubarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode; onSelect?: () => void; disabled?: boolean; inset?: boolean;
}
export interface MenubarCheckboxItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode; checked?: boolean; defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void; disabled?: boolean;
}
export interface MenubarRadioGroupProps {
  value?: string; defaultValue?: string; onValueChange?: (value: string) => void;
  children: ReactNode; className?: string;
}
export interface MenubarRadioItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  value: string; children: ReactNode; disabled?: boolean;
}
export interface MenubarSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
export interface MenubarSubProps {
  children: ReactNode; className?: string; defaultOpen?: boolean;
  open?: boolean; onOpenChange?: (open: boolean) => void;
}
export interface MenubarSubTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: ReactNode; }
export interface MenubarShortcutProps extends HTMLAttributes<HTMLSpanElement> { children: ReactNode; }

// See full source at /docs/menubar or run: npx react-principles add menubar