{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar",
  "title": "Menubar",
  "description": "web/desktop pattern",
  "dependencies": [
    "@rn-primitives/menubar@^1.5.2",
    "@rn-primitives/portal@~1.4.0",
    "lucide-react-native@^1.21.0",
    "react-native-reanimated@4.5.1",
    "react-native-screens@~4.26.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text",
    "https://reactnativereusables.com/r/nativewind/native-only-animated-view.json"
  ],
  "files": [
    {
      "path": "components/ui/menubar.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { NativeOnlyAnimatedView } from '@/components/ui/native-only-animated-view';\nimport { TextClassContext } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport * as MenubarPrimitive from '@rn-primitives/menubar';\nimport { Portal } from '@rn-primitives/portal';\nimport { Check, ChevronDown, ChevronRight, ChevronUp } from 'lucide-react-native';\nimport * as React from 'react';\nimport {\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text,\n  View,\n} from 'react-native';\nimport { FadeIn, ReduceMotion } from 'react-native-reanimated';\nimport { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';\n\nconst MenubarMenu = MenubarPrimitive.Menu;\n\nconst MenubarGroup = MenubarPrimitive.Group;\n\nconst MenubarPortal = MenubarPrimitive.Portal;\n\nconst MenubarSub = MenubarPrimitive.Sub;\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup;\n\nconst FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;\n\nfunction Menubar({\n  className,\n  value: valueProp,\n  onValueChange: onValueChangeProp,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  const id = React.useId();\n  const [value, setValue] = React.useState<string | undefined>(undefined);\n\n  function closeMenu() {\n    if (onValueChangeProp) {\n      onValueChangeProp(undefined);\n      return;\n    }\n    setValue(undefined);\n  }\n\n  return (\n    <>\n      {Platform.OS !== 'web' && (value || valueProp) ? (\n        <Portal name={`menubar-overlay-${id}`}>\n          <Pressable onPress={closeMenu} style={StyleSheet.absoluteFill} />\n        </Portal>\n      ) : null}\n      <MenubarPrimitive.Root\n        className={cn(\n          'bg-background border-border flex h-10 flex-row items-center gap-1 rounded-md border p-1 shadow-sm sm:h-9',\n          className\n        )}\n        value={value ?? valueProp}\n        onValueChange={onValueChangeProp ?? setValue}\n        {...props}\n      />\n    </>\n  );\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  const { value } = MenubarPrimitive.useRootContext();\n  const { value: itemValue } = MenubarPrimitive.useMenuContext();\n\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'text-sm font-medium select-none group-active:text-accent-foreground',\n        value === itemValue && 'text-accent-foreground'\n      )}>\n      <MenubarPrimitive.Trigger\n        className={cn(\n          'group flex items-center rounded-md px-2 py-1.5 sm:py-1',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none',\n          }),\n          value === itemValue && 'bg-accent',\n          className\n        )}\n        {...props}\n      />\n    </TextClassContext.Provider>\n  );\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  iconClassName,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n    children?: React.ReactNode;\n    iconClassName?: string;\n    inset?: boolean;\n  }) {\n  const { open } = MenubarPrimitive.useSubContext();\n  const icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'text-sm select-none group-active:text-accent-foreground',\n        open && 'text-accent-foreground'\n      )}>\n      <MenubarPrimitive.SubTrigger\n        className={cn(\n          'active:bg-accent group flex flex-row items-center rounded-sm px-2 py-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none',\n          }),\n          className,\n          open && 'bg-accent',\n          inset && 'pl-8'\n        )}\n        {...props}>\n        <>{children}</>\n        <Icon as={icon} className={cn('text-foreground ml-auto size-4 shrink-0', iconClassName)} />\n      </MenubarPrimitive.SubTrigger>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <NativeOnlyAnimatedView entering={FadeIn.reduceMotion(ReduceMotion.System)}>\n      <MenubarPrimitive.SubContent\n        className={cn(\n          'bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg',\n          Platform.select({\n            web: 'animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]',\n          }),\n          className\n        )}\n        {...props}\n      />\n    </NativeOnlyAnimatedView>\n  );\n}\n\nfunction MenubarContent({\n  className,\n  portalHost,\n  align = 'start',\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content> & {\n    portalHost?: string;\n  }) {\n  return (\n    <MenubarPrimitive.Portal hostName={portalHost}>\n      <FullWindowOverlay>\n        <NativeOnlyAnimatedView\n          as=\"Pressable\"\n          accessible={false}\n          entering={FadeIn.reduceMotion(ReduceMotion.System)}\n          style={StyleSheet.absoluteFill}\n          pointerEvents=\"box-none\">\n          <TextClassContext.Provider value=\"text-popover-foreground\">\n            <MenubarPrimitive.Content\n              className={cn(\n                'bg-popover border-border min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-lg',\n                Platform.select({\n                  web: cn(\n                    'animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default',\n                    props.side === 'bottom' && 'slide-in-from-top-2',\n                    props.side === 'top' && 'slide-in-from-bottom-2'\n                  ),\n                }),\n                className\n              )}\n              align={align}\n              alignOffset={alignOffset}\n              sideOffset={sideOffset}\n              {...props}\n            />\n          </TextClassContext.Provider>\n        </NativeOnlyAnimatedView>\n      </FullWindowOverlay>\n    </MenubarPrimitive.Portal>\n  );\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n    className?: string;\n    inset?: boolean;\n    variant?: 'default' | 'destructive';\n  }) {\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'select-none text-sm text-popover-foreground group-active:text-popover-foreground',\n        variant === 'destructive' && 'text-destructive group-active:text-destructive'\n      )}>\n      <MenubarPrimitive.Item\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5',\n          Platform.select({\n            web: cn(\n              'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n              variant === 'destructive' && 'focus:bg-destructive/10 dark:focus:bg-destructive/20'\n            ),\n          }),\n          variant === 'destructive' && 'active:bg-destructive/10 dark:active:bg-destructive/20',\n          props.disabled && 'opacity-50',\n          inset && 'pl-8',\n          className\n        )}\n        {...props}\n      />\n    </TextClassContext.Provider>\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n    children?: React.ReactNode;\n  }) {\n  return (\n    <TextClassContext.Provider value=\"text-sm text-popover-foreground select-none group-active:text-accent-foreground\">\n      <MenubarPrimitive.CheckboxItem\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n          }),\n          props.disabled && 'opacity-50',\n          className\n        )}\n        {...props}>\n        <View className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n          <MenubarPrimitive.ItemIndicator>\n            <Icon\n              as={Check}\n              className={cn(\n                'text-foreground size-4',\n                Platform.select({ web: 'pointer-events-none' })\n              )}\n            />\n          </MenubarPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </MenubarPrimitive.CheckboxItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {\n    children?: React.ReactNode;\n  }) {\n  return (\n    <TextClassContext.Provider value=\"text-sm text-popover-foreground select-none group-active:text-accent-foreground\">\n      <MenubarPrimitive.RadioItem\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n          }),\n          props.disabled && 'opacity-50',\n          className\n        )}\n        {...props}>\n        <View className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n          <MenubarPrimitive.ItemIndicator>\n            <View className=\"bg-foreground h-2 w-2 rounded-full\" />\n          </MenubarPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </MenubarPrimitive.RadioItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n    className?: string;\n    inset?: boolean;\n  }) {\n  return (\n    <MenubarPrimitive.Label\n      className={cn(\n        'text-foreground px-2 py-2 text-sm font-medium sm:py-1.5',\n        inset && 'pl-8',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />\n  );\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<typeof Text>) {\n  return (\n    <Text\n      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/menubar.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Menubar"
    ],
    "api": "<Menubar value onValueChange><MenubarMenu value><MenubarTrigger /><MenubarContent /></MenubarMenu></Menubar>"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}