diff options
Diffstat (limited to 'apps/web/src/components/ui/menubar.tsx')
| -rw-r--r-- | apps/web/src/components/ui/menubar.tsx | 324 |
1 files changed, 162 insertions, 162 deletions
diff --git a/apps/web/src/components/ui/menubar.tsx b/apps/web/src/components/ui/menubar.tsx index 96e66c8a..17a93839 100644 --- a/apps/web/src/components/ui/menubar.tsx +++ b/apps/web/src/components/ui/menubar.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { Menubar as MenubarPrimitive } from "radix-ui"; import { Check, ChevronRight, Circle } from "lucide-react"; -import { cn } from "../../lib/utils"; +import { cn } from "@/utils/ui"; const MenubarMenu = MenubarPrimitive.Menu; @@ -17,220 +17,220 @@ const MenubarSub = MenubarPrimitive.Sub; const MenubarRadioGroup = MenubarPrimitive.RadioGroup; const Menubar = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> + React.ElementRef<typeof MenubarPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> >(({ className, ...props }, ref) => ( - <MenubarPrimitive.Root - ref={ref} - className={cn( - "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs", - className - )} - {...props} - /> + <MenubarPrimitive.Root + ref={ref} + className={cn( + "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs", + className, + )} + {...props} + /> )); Menubar.displayName = MenubarPrimitive.Root.displayName; const MenubarTrigger = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Trigger>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> + React.ElementRef<typeof MenubarPrimitive.Trigger>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> >(({ className, ...props }, ref) => ( - <MenubarPrimitive.Trigger - ref={ref} - className={cn( - "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", - className - )} - {...props} - /> + <MenubarPrimitive.Trigger + ref={ref} + className={cn( + "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden select-none", + className, + )} + {...props} + /> )); MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName; const MenubarSubTrigger = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.SubTrigger>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { - inset?: boolean; - } + React.ElementRef<typeof MenubarPrimitive.SubTrigger>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { + inset?: boolean; + } >(({ className, inset, children, ...props }, ref) => ( - <MenubarPrimitive.SubTrigger - ref={ref} - className={cn( - "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", - inset && "pl-8", - className - )} - {...props} - > - {children} - <ChevronRight className="ml-auto h-4 w-4" /> - </MenubarPrimitive.SubTrigger> + <MenubarPrimitive.SubTrigger + ref={ref} + className={cn( + "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none", + inset && "pl-8", + className, + )} + {...props} + > + {children} + <ChevronRight className="ml-auto size-4" /> + </MenubarPrimitive.SubTrigger> )); MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; const MenubarSubContent = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.SubContent>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> + React.ElementRef<typeof MenubarPrimitive.SubContent>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> >(({ className, ...props }, ref) => ( - <MenubarPrimitive.SubContent - ref={ref} - className={cn( - "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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", - className - )} - {...props} - /> + <MenubarPrimitive.SubContent + ref={ref} + className={cn( + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg", + className, + )} + {...props} + /> )); MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName; const MenubarContent = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Content>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> + React.ElementRef<typeof MenubarPrimitive.Content>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> >( - ( - { className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, - ref - ) => ( - <MenubarPrimitive.Portal> - <MenubarPrimitive.Content - ref={ref} - align={align} - alignOffset={alignOffset} - sideOffset={sideOffset} - className={cn( - "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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", - className - )} - {...props} - /> - </MenubarPrimitive.Portal> - ) + ( + { className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, + ref, + ) => ( + <MenubarPrimitive.Portal> + <MenubarPrimitive.Content + ref={ref} + align={align} + alignOffset={alignOffset} + sideOffset={sideOffset} + className={cn( + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md", + className, + )} + {...props} + /> + </MenubarPrimitive.Portal> + ), ); MenubarContent.displayName = MenubarPrimitive.Content.displayName; const MenubarItem = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Item>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { - inset?: boolean; - } + React.ElementRef<typeof MenubarPrimitive.Item>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { + inset?: boolean; + } >(({ className, inset, ...props }, ref) => ( - <MenubarPrimitive.Item - ref={ref} - className={cn( - "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", - inset && "pl-8", - className - )} - {...props} - /> + <MenubarPrimitive.Item + ref={ref} + className={cn( + "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50", + inset && "pl-8", + className, + )} + {...props} + /> )); MenubarItem.displayName = MenubarPrimitive.Item.displayName; const MenubarCheckboxItem = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.CheckboxItem>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> + React.ElementRef<typeof MenubarPrimitive.CheckboxItem>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> >(({ className, children, checked, ...props }, ref) => ( - <MenubarPrimitive.CheckboxItem - ref={ref} - className={cn( - "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", - className - )} - checked={checked} - {...props} - > - <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> - <MenubarPrimitive.ItemIndicator> - <Check className="h-4 w-4" /> - </MenubarPrimitive.ItemIndicator> - </span> - {children} - </MenubarPrimitive.CheckboxItem> + <MenubarPrimitive.CheckboxItem + ref={ref} + className={cn( + "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50", + className, + )} + checked={checked} + {...props} + > + <span className="absolute left-2 flex size-3.5 items-center justify-center"> + <MenubarPrimitive.ItemIndicator> + <Check className="size-4" /> + </MenubarPrimitive.ItemIndicator> + </span> + {children} + </MenubarPrimitive.CheckboxItem> )); MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName; const MenubarRadioItem = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.RadioItem>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> + React.ElementRef<typeof MenubarPrimitive.RadioItem>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> >(({ className, children, ...props }, ref) => ( - <MenubarPrimitive.RadioItem - ref={ref} - className={cn( - "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", - className - )} - {...props} - > - <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> - <MenubarPrimitive.ItemIndicator> - <Circle className="h-4 w-4 fill-current" /> - </MenubarPrimitive.ItemIndicator> - </span> - {children} - </MenubarPrimitive.RadioItem> + <MenubarPrimitive.RadioItem + ref={ref} + className={cn( + "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50", + className, + )} + {...props} + > + <span className="absolute left-2 flex size-3.5 items-center justify-center"> + <MenubarPrimitive.ItemIndicator> + <Circle className="size-4 fill-current" /> + </MenubarPrimitive.ItemIndicator> + </span> + {children} + </MenubarPrimitive.RadioItem> )); MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName; const MenubarLabel = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Label>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { - inset?: boolean; - } + React.ElementRef<typeof MenubarPrimitive.Label>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { + inset?: boolean; + } >(({ className, inset, ...props }, ref) => ( - <MenubarPrimitive.Label - ref={ref} - className={cn( - "px-2 py-1.5 text-sm font-semibold", - inset && "pl-8", - className - )} - {...props} - /> + <MenubarPrimitive.Label + ref={ref} + className={cn( + "px-2 py-1.5 text-sm font-semibold", + inset && "pl-8", + className, + )} + {...props} + /> )); MenubarLabel.displayName = MenubarPrimitive.Label.displayName; const MenubarSeparator = React.forwardRef< - React.ElementRef<typeof MenubarPrimitive.Separator>, - React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> + React.ElementRef<typeof MenubarPrimitive.Separator>, + React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> >(({ className, ...props }, ref) => ( - <MenubarPrimitive.Separator - ref={ref} - className={cn("-mx-1 my-1 h-px bg-muted", className)} - {...props} - /> + <MenubarPrimitive.Separator + ref={ref} + className={cn("bg-muted -mx-1 my-1 h-px", className)} + {...props} + /> )); MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName; const MenubarShortcut = ({ - className, - ...props + className, + ...props }: React.HTMLAttributes<HTMLSpanElement>) => { - return ( - <span - className={cn( - "ml-auto text-xs tracking-widest text-muted-foreground", - className - )} - {...props} - /> - ); + return ( + <span + className={cn( + "text-muted-foreground ml-auto text-xs tracking-widest", + className, + )} + {...props} + /> + ); }; MenubarShortcut.displayname = "MenubarShortcut"; export { - Menubar, - MenubarMenu, - MenubarTrigger, - MenubarContent, - MenubarItem, - MenubarSeparator, - MenubarLabel, - MenubarCheckboxItem, - MenubarRadioGroup, - MenubarRadioItem, - MenubarPortal, - MenubarSubContent, - MenubarSubTrigger, - MenubarGroup, - MenubarSub, - MenubarShortcut, + Menubar, + MenubarMenu, + MenubarTrigger, + MenubarContent, + MenubarItem, + MenubarSeparator, + MenubarLabel, + MenubarCheckboxItem, + MenubarRadioGroup, + MenubarRadioItem, + MenubarPortal, + MenubarSubContent, + MenubarSubTrigger, + MenubarGroup, + MenubarSub, + MenubarShortcut, }; |