banhaten 0.1.2 → 0.2.0

package/registry/components/context-menu.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Trigger
+>
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Content
+>
+type ContextMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Item
+> & {
+  inset?: boolean
+}
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+>
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioItem
+>
+type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Label
+> & {
+  inset?: boolean
+}
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Separator
+>
+type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean
+}
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubContent
+>
+type ContextMenuShortcutProps = React.ComponentProps<"span">
+
+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 menuContentClassName =
+  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
+
+const menuItemClassName =
+  "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPortal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        ref={ref}
+        className={cn(menuContentClassName, className)}
+        {...props}
+      />
+    </ContextMenuPortal>
+  )
+})
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(function ContextMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-item"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ContextMenuCheckboxItemProps
+>(function ContextMenuCheckboxItem({ children, className, checked, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      data-slot="context-menu-checkbox-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+})
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ContextMenuRadioItemProps
+>(function ContextMenuRadioItem({ children, className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      ref={ref}
+      className={cn(menuItemClassName, "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      <span className="absolute start-[var(--bh-space-md-8)] inline-flex size-[var(--bh-space-5xl-24)] items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+})
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  ContextMenuLabelProps
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-label"
+      ref={ref}
+      className={cn(
+        "px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-muted)]",
+        inset && "ps-[var(--bh-space-8xl-48)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ContextMenuSeparatorProps
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      ref={ref}
+      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ContextMenuSubTriggerProps
+>(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-inset={inset ? "true" : undefined}
+      data-slot="context-menu-sub-trigger"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+})
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ContextMenuSubContentProps
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      ref={ref}
+      className={cn(menuContentClassName, className)}
+      {...props}
+    />
+  )
+})
+
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("ms-auto text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+}
+export type {
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubContentProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuTriggerProps,
+}