banhaten 0.1.2 → 0.1.3

package/registry/components/menubar.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type MenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>
+type MenubarTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Trigger
+>
+type MenubarContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Content
+>
+type MenubarItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Item
+> & {
+  inset?: boolean
+}
+type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.CheckboxItem
+>
+type MenubarRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.RadioItem
+>
+type MenubarLabelProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Label
+> & {
+  inset?: boolean
+}
+type MenubarSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Separator
+>
+type MenubarShortcutProps = React.ComponentProps<"span">
+
+const MenubarMenu = MenubarPrimitive.Menu
+const MenubarGroup = MenubarPrimitive.Group
+const MenubarPortal = MenubarPrimitive.Portal
+const MenubarSub = MenubarPrimitive.Sub
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  MenubarProps
+>(function Menubar({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-space-7xl-40)] items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] shadow-[var(--shadow-component-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  MenubarTriggerProps
+>(function MenubarTrigger({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      ref={ref}
+      className={cn(
+        "flex h-[var(--bh-space-6xl-32)] items-center rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none data-[highlighted]:bg-[var(--bh-interactive-ghost-hover)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+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)]"
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  MenubarContentProps
+>(function MenubarContent({ align = "start", className, ...props }, ref) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        align={align}
+        data-slot="menubar-content"
+        ref={ref}
+        className={cn(menuContentClassName, className)}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+})
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  MenubarItemProps
+>(function MenubarItem({ className, inset, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Item
+      data-inset={inset ? "true" : undefined}
+      data-slot="menubar-item"
+      ref={ref}
+      className={cn(menuItemClassName, inset && "ps-[var(--bh-space-8xl-48)]", className)}
+      {...props}
+    />
+  )
+})
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  MenubarCheckboxItemProps
+>(function MenubarCheckboxItem({ children, className, checked, ...props }, ref) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      checked={checked}
+      data-slot="menubar-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">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-[var(--bh-space-3xl-16)]" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+})
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  MenubarRadioItemProps
+>(function MenubarRadioItem({ children, className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-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">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-[var(--bh-space-md-8)] fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+})
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  MenubarLabelProps
+>(function MenubarLabel({ className, inset, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-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 MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  MenubarSeparatorProps
+>(function MenubarSeparator({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      ref={ref}
+      className={cn("my-[var(--bh-space-xs-4)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
+      {...props}
+    />
+  )
+})
+
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps) {
+  return (
+    <span
+      data-slot="menubar-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 {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarTrigger,
+}
+export type {
+  MenubarCheckboxItemProps,
+  MenubarContentProps,
+  MenubarItemProps,
+  MenubarLabelProps,
+  MenubarProps,
+  MenubarRadioItemProps,
+  MenubarSeparatorProps,
+  MenubarShortcutProps,
+  MenubarTriggerProps,
+}

package/registry/components/modal.tsx

@@ -5,6 +5,15 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
 import { InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react"
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  type AlertDialogContentProps,
+} from "@/components/ui/alert-dialog"
 import { Button, type ButtonProps } from "@/components/ui/button"
 import { Checkbox, type CheckboxProps } from "@/components/ui/checkbox"
 import { Spinner } from "@/components/ui/spinner"
@@ -57,6 +66,12 @@ const modalHeaderIconIntentClassNames: Record<ModalIntent, string> = {
     "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
 }
 
+const modalTitleClassName =
+  "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]"
+
+const modalDescriptionClassName =
+  "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+
 type ModalRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
 type ModalContentProps = React.ComponentPropsWithoutRef<
   typeof DialogPrimitive.Content
@@ -79,6 +94,7 @@ type ModalHeaderIconProps = React.ComponentProps<"span"> & {
 type ModalCloseButtonProps = React.ComponentProps<"button"> & {
   label?: string
 }
+type ConfirmModalContentProps = AlertDialogContentProps
 type ModalFooterCheckboxProps = Omit<React.ComponentProps<"div">, "children"> & {
   checked?: CheckboxProps["checked"]
   defaultChecked?: CheckboxProps["defaultChecked"]
@@ -238,13 +254,10 @@ const ModalTitle = React.forwardRef<
 >(function ModalTitle({ className, dir = "auto", ...props }, ref) {
   return (
     <DialogPrimitive.Title
-      data-slot="modal-title"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
-        className
-      )}
+        data-slot="modal-title"
+        dir={dir}
+        ref={ref}
+        className={cn(modalTitleClassName, className)}
       {...props}
     />
   )
@@ -256,18 +269,47 @@ const ModalDescription = React.forwardRef<
 >(function ModalDescription({ className, dir = "auto", ...props }, ref) {
   return (
     <DialogPrimitive.Description
-      data-slot="modal-description"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
-        className
-      )}
+        data-slot="modal-description"
+        dir={dir}
+        ref={ref}
+        className={cn(modalDescriptionClassName, className)}
       {...props}
     />
   )
 })
 
+const ConfirmModalCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  ModalCloseButtonProps
+>(function ConfirmModalCloseButton(
+  { children, className, label = "Close modal", type = "button", ...props },
+  ref
+) {
+  return (
+    <AlertDialogCancel asChild>
+      <button
+        aria-label={label}
+        data-slot="modal-close"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute end-[var(--bh-space-3xl-16)] top-1/2 inline-flex size-[var(--bh-space-6xl-32)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <XIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-5xl-24)]"
+            strokeWidth={2}
+          />
+        )}
+      </button>
+    </AlertDialogCancel>
+  )
+})
+
 const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody({
   className,
   ...props
@@ -539,18 +581,18 @@ function ConfirmModal({
   description,
   dir,
   intent = "danger",
-  modal = true,
+  modal: _modal = true,
   onCancel,
   onConfirm,
   onEscapeKeyDown,
-  onInteractOutside,
   onOpenAutoFocus,
   onOpenChange,
-  onPointerDownOutside,
+  onInteractOutside: _onInteractOutside,
+  onPointerDownOutside: _onPointerDownOutside,
   open,
   overlayClassName,
   preventEscapeDismiss = false,
-  preventOutsideDismiss = true,
+  preventOutsideDismiss: _preventOutsideDismiss = true,
   showCancelButton = true,
   showCloseButton = false,
   showDivider = true,
@@ -565,8 +607,8 @@ function ConfirmModal({
   const isRtl = dir === "rtl"
   const rootProps =
     open === undefined
-      ? { defaultOpen, modal, onOpenChange }
-      : { modal, onOpenChange, open }
+      ? { defaultOpen, onOpenChange }
+      : { onOpenChange, open }
   const resolvedTitle = title ?? (isRtl ? defaultRtlConfirmTitle : defaultConfirmTitle)
   const resolvedDescription =
     description ?? (isRtl ? defaultRtlConfirmDescription : defaultConfirmDescription)
@@ -592,57 +634,36 @@ function ConfirmModal({
   } = confirmButtonProps ?? {}
   const isConfirmDisabled = confirmDisabled || confirmLoading || confirmButtonDisabled
 
-  const handleOpenAutoFocus: NonNullable<ModalContentProps["onOpenAutoFocus"]> =
-    React.useCallback(
-      (event) => {
-        onOpenAutoFocus?.(event)
-        if (event.defaultPrevented) return
+  const handleOpenAutoFocus: NonNullable<
+    ConfirmModalContentProps["onOpenAutoFocus"]
+  > = React.useCallback(
+    (event) => {
+      onOpenAutoFocus?.(event)
+      if (event.defaultPrevented) return
 
-        const focusTarget = showCancelButton
-          ? cancelButtonRef.current
-          : confirmButtonRef.current
-        if (!focusTarget) return
+      const focusTarget = showCancelButton
+        ? cancelButtonRef.current
+        : confirmButtonRef.current
+      if (!focusTarget) return
 
-        event.preventDefault()
-        focusTarget.focus()
-      },
-      [onOpenAutoFocus, showCancelButton]
-    )
+      event.preventDefault()
+      focusTarget.focus()
+    },
+    [onOpenAutoFocus, showCancelButton]
+  )
 
-  const handlePointerDownOutside: NonNullable<
-    ModalContentProps["onPointerDownOutside"]
+  const handleEscapeKeyDown: NonNullable<
+    ConfirmModalContentProps["onEscapeKeyDown"]
   > = React.useCallback(
     (event) => {
-      onPointerDownOutside?.(event)
-      if (!event.defaultPrevented && preventOutsideDismiss) {
+      onEscapeKeyDown?.(event)
+      if (!event.defaultPrevented && preventEscapeDismiss) {
         event.preventDefault()
       }
     },
-    [onPointerDownOutside, preventOutsideDismiss]
+    [onEscapeKeyDown, preventEscapeDismiss]
   )
 
-  const handleInteractOutside: NonNullable<ModalContentProps["onInteractOutside"]> =
-    React.useCallback(
-      (event) => {
-        onInteractOutside?.(event)
-        if (!event.defaultPrevented && preventOutsideDismiss) {
-          event.preventDefault()
-        }
-      },
-      [onInteractOutside, preventOutsideDismiss]
-    )
-
-  const handleEscapeKeyDown: NonNullable<ModalContentProps["onEscapeKeyDown"]> =
-    React.useCallback(
-      (event) => {
-        onEscapeKeyDown?.(event)
-        if (!event.defaultPrevented && preventEscapeDismiss) {
-          event.preventDefault()
-        }
-      },
-      [onEscapeKeyDown, preventEscapeDismiss]
-    )
-
   const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     cancelButtonOnClick?.(event)
     if (!event.defaultPrevented) {
@@ -691,26 +712,26 @@ function ConfirmModal({
   )
 
   return (
-    <ModalRoot {...rootProps}>
-      <ModalContent
+    <AlertDialog {...rootProps}>
+      <AlertDialogContent
         data-intent={intent}
+        data-size={size}
         data-slot="confirm-modal"
         dir={dir}
+        className={cn(modalContentVariants({ size, className }))}
         overlayClassName={overlayClassName}
-        role="alertdialog"
-        size={size}
-        className={className}
         onEscapeKeyDown={handleEscapeKeyDown}
-        onInteractOutside={handleInteractOutside}
         onOpenAutoFocus={handleOpenAutoFocus}
-        onPointerDownOutside={handlePointerDownOutside}
         {...props}
       >
         <ModalHeader>
           {showIcon ? (
             <ModalHeaderIcon intent={intent}>
               {intent === "default" ? (
-                <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
+                <InfoIcon
+                  className="size-[var(--bh-space-3xl-16)]"
+                  strokeWidth={2}
+                />
               ) : (
                 <TriangleAlertIcon
                   className="size-[var(--bh-space-3xl-16)]"
@@ -719,31 +740,43 @@ function ConfirmModal({
               )}
             </ModalHeaderIcon>
           ) : null}
-          <ModalTitle>{resolvedTitle}</ModalTitle>
-          {showCloseButton ? <ModalCloseButton /> : null}
+          <AlertDialogTitle
+            data-slot="modal-title"
+            className={modalTitleClassName}
+          >
+            {resolvedTitle}
+          </AlertDialogTitle>
+          {showCloseButton ? <ConfirmModalCloseButton /> : null}
         </ModalHeader>
         <ModalBody>
-          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
+          {children ?? (
+            <AlertDialogDescription
+              data-slot="modal-description"
+              className={modalDescriptionClassName}
+            >
+              {resolvedDescription}
+            </AlertDialogDescription>
+          )}
         </ModalBody>
         {showDivider ? <ModalDivider /> : null}
         {showFooter ? (
           <ModalFooter>
             <ModalActions>
               {cancelAction && closeOnCancel ? (
-                <ModalClose asChild>{cancelAction}</ModalClose>
+                <AlertDialogCancel asChild>{cancelAction}</AlertDialogCancel>
               ) : (
                 cancelAction
               )}
               {closeOnConfirm ? (
-                <ModalClose asChild>{confirmAction}</ModalClose>
+                <AlertDialogAction asChild>{confirmAction}</AlertDialogAction>
               ) : (
                 confirmAction
               )}
             </ModalActions>
           </ModalFooter>
         ) : null}
-      </ModalContent>
-    </ModalRoot>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }