banhaten 0.1.3 → 0.2.0

package/registry/components/kbd.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
@@ -9,6 +11,7 @@ const kbdVariants = cva(
     "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
     "font-[var(--bh-font-family)] 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)] shadow-[var(--shadow-button-soft)]",
+    "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)] data-[disabled=true]:shadow-none",
   ],
   {
     variants: {
@@ -24,14 +27,17 @@ const kbdVariants = cva(
 )
 
 type KbdProps = React.ComponentProps<"kbd"> &
-  VariantProps<typeof kbdVariants>
+  VariantProps<typeof kbdVariants> & {
+    disabled?: boolean
+  }
 
 const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
-  { className, size, ...props },
+  { className, disabled = false, size, ...props },
   ref
 ) {
   return (
     <kbd
+      data-disabled={disabled ? "true" : undefined}
       data-slot="kbd"
       ref={ref}
       className={cn(kbdVariants({ size, className }))}
@@ -40,5 +46,106 @@ const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
   )
 })
 
-export { Kbd, kbdVariants }
-export type { KbdProps }
+type ShortcutPlatform = "auto" | "mac" | "windows" | "linux"
+
+type KbdShortcutProps = Omit<React.ComponentProps<"span">, "children"> & {
+  disabled?: boolean
+  keys: readonly string[]
+  platform?: ShortcutPlatform
+  size?: KbdProps["size"]
+}
+
+const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
+  function KbdShortcut(
+    {
+      "aria-label": ariaLabel,
+      className,
+      disabled = false,
+      keys,
+      platform = "auto",
+      size = "sm",
+      ...props
+    },
+    ref
+  ) {
+    const [resolvedPlatform, setResolvedPlatform] = React.useState<
+      Exclude<ShortcutPlatform, "auto">
+    >(platform === "auto" ? "mac" : platform)
+
+    React.useEffect(() => {
+      if (platform !== "auto") {
+        setResolvedPlatform(platform)
+        return
+      }
+
+      setResolvedPlatform(detectShortcutPlatform())
+    }, [platform])
+
+    const resolvedKeys = keys.map((key) =>
+      resolveShortcutKey(key, resolvedPlatform)
+    )
+    const accessibleLabel =
+      ariaLabel ?? resolvedKeys.map(readableShortcutKey).join(" plus ")
+
+    return (
+      <span
+        aria-label={accessibleLabel}
+        className={cn(
+          "inline-flex shrink-0 items-center gap-[var(--bh-space-xs-4)]",
+          className
+        )}
+        data-disabled={disabled ? "true" : undefined}
+        data-platform={resolvedPlatform}
+        data-slot="kbd-shortcut"
+        dir="ltr"
+        ref={ref}
+        role="group"
+        {...props}
+      >
+        {resolvedKeys.map((key, index) => (
+          <Kbd
+            aria-hidden="true"
+            disabled={disabled}
+            key={`${key}-${index}`}
+            size={size}
+          >
+            {key}
+          </Kbd>
+        ))}
+      </span>
+    )
+  }
+)
+
+function detectShortcutPlatform(): Exclude<ShortcutPlatform, "auto"> {
+  if (typeof navigator === "undefined") return "mac"
+  const platform = navigator.platform.toLowerCase()
+  if (
+    platform.includes("mac") ||
+    platform.includes("iphone") ||
+    platform.includes("ipad")
+  ) {
+    return "mac"
+  }
+  if (platform.includes("linux")) return "linux"
+  return "windows"
+}
+
+function resolveShortcutKey(
+  key: string,
+  platform: Exclude<ShortcutPlatform, "auto">
+) {
+  if (key !== "Mod") return key
+  return platform === "mac" ? "⌘" : "Ctrl"
+}
+
+function readableShortcutKey(key: string) {
+  if (key === "⌘") return "Command"
+  if (key === "⌥") return "Option"
+  if (key === "⇧") return "Shift"
+  if (key === "⌃") return "Control"
+  return key
+}
+
+export { Kbd, KbdShortcut, kbdVariants }
+export type { KbdProps, KbdShortcutProps, ShortcutPlatform }

package/registry/components/menu.tsx

@@ -4,39 +4,21 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type MenuWidth = "menu" | "default" | "multiline" | "action" | "auto"
 type MenuItemKind = "default" | "multiline" | "action" | "progress" | "button"
 type MenuItemState = "default" | "disabled"
 type MenuItemIconPosition = "leading" | "trailing"
 type MenuItemAvatarSize = "sm" | "lg"
-type MenuCollisionShift = {
-  x: number
-  y: number
-}
 type MenuCollisionPadding = NonNullable<
   React.ComponentProps<typeof DropdownMenuPrimitive.Content>["collisionPadding"]
 >
-type MenuCollisionPaddingSides = {
-  bottom: number
-  left: number
-  right: number
-  top: number
-}
-type MenuResizeObserverConstructor = new (
-  callback: () => void
-) => {
-  disconnect: () => void
-  observe: (target: Element) => void
-}
 
 // Default Radix collisionPadding mirrors --bh-space-md-8.
 const MENU_COLLISION_PADDING_PX = 8
 // Radix sideOffset is numeric; this mirrors --bh-space-xs-4.
 const MENU_SUBCONTENT_SIDE_OFFSET_PX = 4
-const zeroMenuCollisionShift: MenuCollisionShift = { x: 0, y: 0 }
-const useSafeLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
 
 const menuVariants = cva(
   "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--shadow-menu)]",
@@ -119,14 +101,7 @@ const menuItemIconVariants = cva(
   }
 )
 
-type MenuProps = React.ComponentProps<"div"> &
-  VariantProps<typeof menuVariants> & {
-    asChild?: boolean
-    defaultOpen?: boolean
-    modal?: boolean
-    onOpenChange?: (open: boolean) => void
-    open?: boolean
-  }
+type MenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>
 
 type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> &
   VariantProps<typeof menuVariants> & {
@@ -143,147 +118,38 @@ const MenuSub = DropdownMenuPrimitive.Sub
 const MenuTrigger = DropdownMenuPrimitive.Trigger
 const MenuStaticContext = React.createContext(false)
 
+function Menu({ dir, ...props }: MenuProps) {
+  const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+
+  return (
+    <span className="contents" data-slot="menu-root-boundary" ref={directionBoundaryRef}>
+      <MenuRoot dir={resolvedDirection} {...props} />
+    </span>
+  )
+}
+
 type MenuSurfaceProps = React.ComponentProps<"div"> &
   VariantProps<typeof menuVariants> & {
     asChild?: boolean
-    avoidViewportNudge?: boolean
-    collisionPadding?: MenuCollisionPadding
   }
 
 const MenuSurface = React.forwardRef<HTMLDivElement, MenuSurfaceProps>(function MenuSurface({
   asChild = false,
-  avoidViewportNudge = true,
   children,
   className,
-  collisionPadding = MENU_COLLISION_PADDING_PX,
   role = "menu",
-  style,
   width,
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "div"
-  const surfaceRef = React.useRef<HTMLDivElement | null>(null)
-  const collisionShiftRef = React.useRef(zeroMenuCollisionShift)
-  const [collisionShift, setCollisionShift] = React.useState(
-    zeroMenuCollisionShift
-  )
-
-  function updateCollisionShift(nextShift: MenuCollisionShift) {
-    collisionShiftRef.current = nextShift
-    setCollisionShift((currentShift) =>
-      isSameMenuCollisionShift(currentShift, nextShift)
-        ? currentShift
-        : nextShift
-    )
-  }
-
-  function setSurfaceRef(node: HTMLDivElement | null) {
-    surfaceRef.current = node
-
-    if (typeof ref === "function") {
-      ref(node)
-    } else if (ref) {
-      ref.current = node
-    }
-  }
-
-  useSafeLayoutEffect(() => {
-    if (!avoidViewportNudge) {
-      updateCollisionShift(zeroMenuCollisionShift)
-      return
-    }
-
-    const node = surfaceRef.current
-    if (!node) return
-    const surfaceNode: HTMLDivElement = node
-
-    const ownerWindow = surfaceNode.ownerDocument.defaultView
-    if (!ownerWindow) return
-    const surfaceWindow: Window = ownerWindow
-
-    let animationFrame = 0
-    const resolvedCollisionPadding = resolveMenuCollisionPadding(collisionPadding)
-    const requestFrame =
-      typeof surfaceWindow.requestAnimationFrame === "function"
-        ? surfaceWindow.requestAnimationFrame.bind(surfaceWindow)
-        : (callback: FrameRequestCallback) =>
-            surfaceWindow.setTimeout(
-              () => callback(surfaceWindow.performance.now()),
-              0
-            )
-    const cancelFrame =
-      typeof surfaceWindow.cancelAnimationFrame === "function"
-        ? surfaceWindow.cancelAnimationFrame.bind(surfaceWindow)
-        : surfaceWindow.clearTimeout.bind(surfaceWindow)
-
-    function measureCollisionShift() {
-      animationFrame = 0
-
-      const rect = surfaceNode.getBoundingClientRect()
-      const currentShift = collisionShiftRef.current
-      const unshiftedRect = {
-        bottom: rect.bottom - currentShift.y,
-        left: rect.left - currentShift.x,
-        right: rect.right - currentShift.x,
-        top: rect.top - currentShift.y,
-      }
-
-      updateCollisionShift(
-        getMenuCollisionShift({
-          collisionPadding: resolvedCollisionPadding,
-          rect: unshiftedRect,
-          viewportHeight: surfaceWindow.innerHeight,
-          viewportWidth: surfaceWindow.innerWidth,
-        })
-      )
-    }
-
-    function queueCollisionShiftMeasure() {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      animationFrame = requestFrame(measureCollisionShift)
-    }
-
-    queueCollisionShiftMeasure()
-    surfaceWindow.addEventListener("resize", queueCollisionShiftMeasure)
-    surfaceWindow.addEventListener("scroll", queueCollisionShiftMeasure, true)
-
-    const ResizeObserver = (
-      surfaceWindow as Window & {
-        ResizeObserver?: MenuResizeObserverConstructor
-      }
-    ).ResizeObserver
-    const resizeObserver = ResizeObserver
-      ? new ResizeObserver(queueCollisionShiftMeasure)
-      : undefined
-    resizeObserver?.observe(surfaceNode)
-
-    return () => {
-      if (animationFrame) {
-        cancelFrame(animationFrame)
-      }
-
-      surfaceWindow.removeEventListener("resize", queueCollisionShiftMeasure)
-      surfaceWindow.removeEventListener("scroll", queueCollisionShiftMeasure, true)
-      resizeObserver?.disconnect()
-    }
-  }, [avoidViewportNudge, collisionPadding, width])
 
   return (
     <Comp
       data-slot="menu"
       data-width={width ?? "menu"}
-      ref={setSurfaceRef}
+      ref={ref}
       role={role}
-      style={{
-        ...style,
-        transform: mergeMenuTransforms(
-          getMenuCollisionTransform(collisionShift),
-          style?.transform
-        ),
-      }}
       className={cn(
         menuVariants({ width }),
         "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto",
@@ -314,7 +180,6 @@ const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -345,7 +210,6 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
       <MenuSurface
         asChild={asChild}
         className={className}
-        collisionPadding={collisionPadding}
         ref={ref}
         role={role}
         width={width}
@@ -356,37 +220,30 @@ const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(fun
   )
 })
 
-function Menu({
+type MenuPreviewProps = React.ComponentProps<"div"> &
+  VariantProps<typeof menuVariants> & {
+    asChild?: boolean
+  }
+
+function MenuPreview({
   children,
   className,
-  defaultOpen = true,
-  modal = false,
-  onOpenChange,
-  open,
   role = "menu",
   width,
   asChild = false,
   ...props
-}: MenuProps) {
-  const Comp = asChild ? Slot : "div"
-  const isOpen = open ?? defaultOpen
-
-  void modal
-  void onOpenChange
-
-  if (!isOpen) return null
-
+}: MenuPreviewProps) {
   return (
     <MenuStaticContext.Provider value>
-      <Comp
-        data-slot="menu"
-        data-width={width ?? "menu"}
+      <MenuSurface
+        asChild={asChild}
+        className={className}
         role={role}
-        className={cn(menuVariants({ width, className }))}
+        width={width}
         {...props}
       >
         {children}
-      </Comp>
+      </MenuSurface>
     </MenuStaticContext.Provider>
   )
 }
@@ -907,7 +764,7 @@ function MenuProgressSpinner({ className }: { className?: string }) {
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
-        strokeWidth="3"
+        strokeWidth="var(--bh-icon-stroke-300)"
       />
     </svg>
   )
@@ -1025,81 +882,6 @@ function MenuSeparator({
   return <DropdownMenuPrimitive.Separator asChild>{separator}</DropdownMenuPrimitive.Separator>
 }
 
-function getMenuCollisionShift({
-  collisionPadding,
-  rect,
-  viewportHeight,
-  viewportWidth,
-}: {
-  collisionPadding: MenuCollisionPaddingSides
-  rect: Pick<DOMRect, "bottom" | "left" | "right" | "top">
-  viewportHeight: number
-  viewportWidth: number
-}): MenuCollisionShift {
-  let x = 0
-  let y = 0
-  const minX = collisionPadding.left
-  const minY = collisionPadding.top
-  const maxX = viewportWidth - collisionPadding.right
-  const maxY = viewportHeight - collisionPadding.bottom
-
-  if (rect.left < minX) {
-    x = minX - rect.left
-  } else if (rect.right > maxX) {
-    x = maxX - rect.right
-  }
-
-  if (rect.top < minY) {
-    y = minY - rect.top
-  } else if (rect.bottom > maxY) {
-    y = maxY - rect.bottom
-  }
-
-  return { x: Math.round(x), y: Math.round(y) }
-}
-
-function resolveMenuCollisionPadding(
-  collisionPadding: MenuCollisionPadding
-): MenuCollisionPaddingSides {
-  if (typeof collisionPadding === "number") {
-    const padding = Math.max(0, collisionPadding)
-
-    return {
-      bottom: padding,
-      left: padding,
-      right: padding,
-      top: padding,
-    }
-  }
-
-  return {
-    bottom: Math.max(0, collisionPadding.bottom ?? 0),
-    left: Math.max(0, collisionPadding.left ?? 0),
-    right: Math.max(0, collisionPadding.right ?? 0),
-    top: Math.max(0, collisionPadding.top ?? 0),
-  }
-}
-
-function getMenuCollisionTransform(shift: MenuCollisionShift) {
-  return `translate(${Math.round(shift.x)}px, ${Math.round(shift.y)}px)`
-}
-
-function mergeMenuTransforms(
-  collisionTransform: string,
-  customTransform: string | undefined
-) {
-  return customTransform
-    ? `${collisionTransform} ${customTransform}`
-    : collisionTransform
-}
-
-function isSameMenuCollisionShift(
-  currentShift: MenuCollisionShift,
-  nextShift: MenuCollisionShift
-) {
-  return currentShift.x === nextShift.x && currentShift.y === nextShift.y
-}
-
 export {
   Menu,
   MenuCaption,
@@ -1117,12 +899,14 @@ export {
   MenuItemTitle,
   MenuLabel,
   MenuProgress,
+  MenuPreview,
   MenuPortal,
   MenuRoot,
   MenuSeparator,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
+  MenuSurface,
   MenuTrigger,
   menuItemContentVariants,
   menuItemIconVariants,
@@ -1146,5 +930,7 @@ export type {
   MenuLabelProps,
   MenuProgressProps,
   MenuProps,
+  MenuPreviewProps,
+  MenuSurfaceProps,
   MenuWidth,
 }

package/registry/components/menubar.tsx

@@ -78,7 +78,7 @@ 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-min-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)]"
+  "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 MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,