@opencosmos/ui 1.3.1

package/src/components/navigation/Tabs.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'
+
+describe('Tabs', () => {
+  const renderTabs = (defaultValue = 'tab1') =>
+    render(
+      <Tabs defaultValue={defaultValue}>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content for tab 1</TabsContent>
+        <TabsContent value="tab2">Content for tab 2</TabsContent>
+        <TabsContent value="tab3">Content for tab 3</TabsContent>
+      </Tabs>
+    )
+
+  it('renders tabs with content', () => {
+    renderTabs()
+    expect(screen.getByRole('tab', { name: /tab 1/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /tab 2/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /tab 3/i })).toBeInTheDocument()
+    expect(screen.getByText('Content for tab 1')).toBeInTheDocument()
+  })
+
+  it('switches content on tab click', async () => {
+    const user = userEvent.setup()
+    renderTabs()
+
+    expect(screen.getByText('Content for tab 1')).toBeInTheDocument()
+    expect(screen.queryByText('Content for tab 2')).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('tab', { name: /tab 2/i }))
+    expect(screen.queryByText('Content for tab 1')).not.toBeInTheDocument()
+    expect(screen.getByText('Content for tab 2')).toBeInTheDocument()
+  })
+
+  it('defaults to first tab', () => {
+    renderTabs('tab1')
+    const tab1 = screen.getByRole('tab', { name: /tab 1/i })
+    expect(tab1).toHaveAttribute('data-state', 'active')
+    expect(screen.getByText('Content for tab 1')).toBeInTheDocument()
+  })
+})

package/src/components/navigation/Tabs.tsx

@@ -0,0 +1,60 @@
+"use client";
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../../lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    ref?: React.Ref<React.ElementRef<typeof TabsPrimitive.List>>;
+  }
+) => (<TabsPrimitive.List
+  ref={ref}
+  className={cn(
+    "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+    className
+  )}
+  {...props}
+/>)
+
+const TabsTrigger = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    ref?: React.Ref<React.ElementRef<typeof TabsPrimitive.Trigger>>;
+  }
+) => (<TabsPrimitive.Trigger
+  ref={ref}
+  className={cn(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+    className
+  )}
+  {...props}
+/>)
+
+const TabsContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof TabsPrimitive.Content>>;
+  }
+) => (<TabsPrimitive.Content
+  ref={ref}
+  className={cn(
+    "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  )}
+  {...props}
+/>)
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/navigation/TertiaryNav.tsx

@@ -0,0 +1,90 @@
+'use client';;
+import React from 'react';
+import { FilterButton } from '../forms/FilterButton';
+
+export interface TertiaryNavItem {
+    id: string;
+    label: string;
+}
+
+export interface TertiaryNavProps {
+    /**
+     * Array of navigation items
+     */
+    items: TertiaryNavItem[];
+    /**
+     * Currently active item ID
+     */
+    activeId: string;
+    /**
+     * Callback when an item is selected
+     */
+    onItemChange: (id: string) => void;
+    /**
+     * Additional className for customization
+     */
+    className?: string;
+    /**
+     * Sticky behavior mode
+     * - 'stacked': Positions automatically below SecondaryNav (default)
+     * - 'standalone': Sticks to top of viewport (0px)
+     * @default 'stacked'
+     */
+    mode?: 'stacked' | 'standalone';
+    /**
+     * Top offset for sticky positioning.
+     * Overrides 'mode' if provided.
+     */
+    top?: string;
+}
+
+/**
+ * Tertiary Navigation Component
+ * ... (keep existing comment block) ...
+ */
+export const TertiaryNav = (
+    {
+        ref,
+        items,
+        activeId,
+        onItemChange,
+        mode = 'stacked',
+        top,
+        className = ''
+    }: TertiaryNavProps & {
+        ref?: React.Ref<HTMLElement>;
+    }
+) => {
+    // Determine sticky position based on mode, unless manually overridden
+    const stickyClass = top || (mode === 'stacked' ? 'top-32 lg:top-36' : 'top-0');
+
+    return (
+        <nav
+            ref={ref}
+            className={`
+                sticky ${stickyClass} z-30
+                bg-[var(--color-surface)]/60 backdrop-blur-md
+                border-b border-[var(--color-border)]
+                ${className}
+            `}
+            aria-label="Tertiary navigation"
+        >
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex items-center gap-2 overflow-x-auto py-3 scrollbar-hide">
+                    {items.map((item) => (
+                        <FilterButton
+                            key={item.id}
+                            onClick={() => onItemChange(item.id)}
+                            active={activeId === item.id}
+                            shape="rounded"
+                            aria-current={activeId === item.id ? 'page' : undefined}
+                            className="whitespace-nowrap"
+                        >
+                            {item.label}
+                        </FilterButton>
+                    ))}
+                </div>
+            </div>
+        </nav>
+    );
+};

package/src/components/navigation/index.ts

@@ -0,0 +1,10 @@
+export * from './Breadcrumb';
+export * from './Breadcrumbs';
+export * from './Command';
+export * from './Menubar';
+export * from './NavLink';
+export * from './NavigationMenu';
+export * from './Pagination';
+export * from './SecondaryNav';
+export * from './Tabs';
+export * from './TertiaryNav';

package/src/components/overlays/AlertDialog.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './AlertDialog'
+
+describe('AlertDialog', () => {
+  it('renders trigger', () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Confirm</AlertDialogTitle>
+          <AlertDialogDescription>Are you sure?</AlertDialogDescription>
+        </AlertDialogContent>
+      </AlertDialog>
+    )
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument()
+  })
+
+  it('opens on trigger click', async () => {
+    const user = userEvent.setup()
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+          <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+        </AlertDialogContent>
+      </AlertDialog>
+    )
+
+    expect(screen.queryByText('Confirm Delete')).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: /delete/i }))
+    expect(screen.getByText('Confirm Delete')).toBeInTheDocument()
+    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument()
+  })
+
+  it('renders action and cancel buttons', async () => {
+    const user = userEvent.setup()
+    const onAction = vi.fn()
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Confirm</AlertDialogTitle>
+          <AlertDialogDescription>Sure?</AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={onAction}>Confirm</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    )
+
+    await user.click(screen.getByRole('button', { name: /delete/i }))
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument()
+  })
+})

package/src/components/overlays/AlertDialog.tsx

@@ -0,0 +1,166 @@
+"use client";
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "../actions/Button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
+  }
+) => (<AlertDialogPrimitive.Overlay
+  className={cn(
+    "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    className
+  )}
+  style={{
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    zIndex: 50,
+    ...style,
+  }}
+  {...props}
+  ref={ref}
+/>)
+
+const AlertDialogContent = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
+  }
+) => (<AlertDialogPortal>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    ref={ref}
+    className={cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+      className
+    )}
+    style={{
+      backgroundColor: 'var(--color-background, #ffffff)',
+      border: '1px solid var(--color-border, #d4d4d4)',
+      borderRadius: '0.75rem',
+      boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      zIndex: 50,
+      ...style,
+    }}
+    {...props}
+  />
+</AlertDialogPortal>)
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
+  }
+) => (<AlertDialogPrimitive.Title
+  ref={ref}
+  className={cn("text-lg font-semibold", className)}
+  {...props}
+/>)
+
+const AlertDialogDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Description>>;
+  }
+) => (<AlertDialogPrimitive.Description
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
+
+const AlertDialogAction = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
+  }
+) => (<AlertDialogPrimitive.Action
+  ref={ref}
+  className={cn(buttonVariants(), className)}
+  {...props}
+/>)
+
+const AlertDialogCancel = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+    ref?: React.Ref<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
+  }
+) => (<AlertDialogPrimitive.Cancel
+  ref={ref}
+  className={cn(
+    buttonVariants({ variant: "outline" }),
+    "mt-2 sm:mt-0",
+    className
+  )}
+  {...props}
+/>)
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/components/overlays/ContextMenu.tsx

@@ -0,0 +1,243 @@
+"use client";
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = (
+  {
+    ref,
+    className,
+    inset,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>>;
+  }
+) => (<ContextMenuPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none 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" />
+</ContextMenuPrimitive.SubTrigger>)
+
+const ContextMenuSubContent = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
+  }
+) => (<ContextMenuPrimitive.SubContent
+  ref={ref}
+  className={cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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
+  )}
+  style={{
+    backgroundColor: 'var(--color-popover, #ffffff)',
+    color: 'var(--color-popover-foreground, #0a0a0a)',
+    border: '1px solid var(--color-border, #d4d4d4)',
+    borderRadius: 'var(--radius, 0.5rem)',
+    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    zIndex: 50,
+    overflow: 'hidden',
+    ...style,
+  }}
+  {...props}
+/>)
+
+const ContextMenuContent = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
+  }
+) => (<ContextMenuPrimitive.Portal>
+  <ContextMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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
+    )}
+    style={{
+      backgroundColor: 'var(--color-popover, #ffffff)',
+      color: 'var(--color-popover-foreground, #0a0a0a)',
+      border: '1px solid var(--color-border, #d4d4d4)',
+      borderRadius: 'var(--radius, 0.5rem)',
+      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      zIndex: 50,
+      overflow: 'hidden',
+      ...style,
+    }}
+    {...props}
+  />
+</ContextMenuPrimitive.Portal>)
+
+const ContextMenuItem = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Item>>;
+  }
+) => (<ContextMenuPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
+
+const ContextMenuCheckboxItem = (
+  {
+    ref,
+    className,
+    children,
+    checked,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
+  }
+) => (<ContextMenuPrimitive.CheckboxItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none 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">
+    <ContextMenuPrimitive.ItemIndicator>
+      <Check className="h-4 w-4" />
+    </ContextMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</ContextMenuPrimitive.CheckboxItem>)
+
+const ContextMenuRadioItem = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
+  }
+) => (<ContextMenuPrimitive.RadioItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none 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">
+    <ContextMenuPrimitive.ItemIndicator>
+      <Circle className="h-2 w-2 fill-current" />
+    </ContextMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</ContextMenuPrimitive.RadioItem>)
+
+const ContextMenuLabel = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  } & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Label>>;
+  }
+) => (<ContextMenuPrimitive.Label
+  ref={ref}
+  className={cn(
+    "px-2 py-1.5 text-sm font-semibold text-foreground",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
+
+const ContextMenuSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
+  }
+) => (<ContextMenuPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-border", className)}
+  {...props}
+/>)
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}