{"name":"menu","type":"registry:ui","files":[{"path":"menu.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Check as CheckIcon, ChevronRight as ChevronRightIcon } from \"honestui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Menu = MenuPrimitive.Root\n\nconst MenuPortal = MenuPrimitive.Portal\n\nfunction MenuTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {\n  return (\n    <MenuPrimitive.Trigger\n      data-slot=\"menu-trigger\"\n      className={cn(\n        \"data-pressed:bg-[var(--hui-color-background-base-primary-hover)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuPopup({\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        data-slot=\"menu-positioner\"\n        className=\"z-[var(--hui-z-index-portal)]\"\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"menu-popup\"\n          className={cn(\n            \"box-border max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] p-[var(--hui-space-2)] text-[var(--hui-color-foreground-base-primary)] shadow-[var(--hui-shadow-soft)] outline-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] [transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out)] focus:outline-none focus-visible:outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:[transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out),transform_var(--hui-duration-fast)_var(--hui-ease-out)] motion-safe:data-ending-style:scale-[0.97] motion-safe:data-starting-style:scale-[0.97]\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex items-center gap-[var(--hui-space-3)] p-[var(--hui-space-3)] outline-none select-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:rounded-[var(--hui-radius-2)] data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] data-inset:ps-8 data-[variant=destructive]:text-[var(--hui-color-foreground-danger-primary)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-[var(--hui-color-foreground-base-secondary)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      className={cn(\n        \"relative grid grid-cols-[1rem_1fr] items-center gap-[var(--hui-space-3)] p-[var(--hui-space-3)] outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:rounded-[var(--hui-radius-2)] data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-[var(--hui-color-foreground-base-secondary)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.CheckboxItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      className={cn(\n        \"relative grid grid-cols-[1rem_1fr] items-center gap-[var(--hui-space-3)] p-[var(--hui-space-3)] outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:rounded-[var(--hui-radius-2)] data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-[var(--hui-color-foreground-base-secondary)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-[var(--hui-space-3)] py-[var(--hui-space-2)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-medium)] data-inset:ps-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\n        \"my-[var(--hui-space-2)] h-px bg-[var(--hui-color-border-base-primary)] [margin-inline:calc(var(--hui-space-3)*-1)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      className={cn(\n        \"ms-auto flex items-center text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex items-center gap-[var(--hui-space-3)] p-[var(--hui-space-3)] outline-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:rounded-[var(--hui-radius-2)] data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] data-popup-open:cursor-pointer data-popup-open:rounded-[var(--hui-radius-2)] data-popup-open:bg-[var(--hui-color-background-base-primary-hover)] data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:text-[var(--hui-color-foreground-base-secondary)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset = -4,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n}) {\n  return (\n    <MenuPopup\n      className={className}\n      sideOffset={sideOffset}\n      align={align}\n      alignOffset={alignOffset}\n      data-slot=\"menu-sub-content\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  Menu as DropdownMenu,\n  MenuPortal,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup,\n  MenuSubPopup as DropdownMenuSubContent,\n}\n","target":"components/ui/menu.tsx"}],"dependencies":["@base-ui/react","honestui"]}