@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/Menu.tsx

@@ -0,0 +1,368 @@
+import React from 'react'
+import { Menu as BaseMenu } from '@base-ui/react'
+import clsx from 'clsx'
+import { Check, ChevronRight } from 'lucide-react'
+
+export interface MenuProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface MenuTriggerProps {
+  children?: React.ReactNode
+  className?: string
+  render?: React.ReactElement
+}
+
+export interface MenuContentProps {
+  children: React.ReactNode
+  className?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+}
+
+export interface MenuItemProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  onSelect?: () => void
+  destructive?: boolean
+}
+
+export interface MenuCheckboxItemProps {
+  children: React.ReactNode
+  className?: string
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+}
+
+export interface MenuRadioGroupProps {
+  children: React.ReactNode
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export interface MenuRadioItemProps {
+  children: React.ReactNode
+  value: string
+  className?: string
+  disabled?: boolean
+}
+
+export interface MenuLabelProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export interface MenuSeparatorProps {
+  className?: string
+}
+
+export interface MenuSubProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface MenuSubTriggerProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+export interface MenuSubContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const Menu: React.FC<MenuProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+}) => {
+  return (
+    <BaseMenu.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      {children}
+    </BaseMenu.Root>
+  )
+}
+
+export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>(
+  ({ children, className, render }, ref) => {
+    if (render) {
+      return (
+        <span className="contents">
+          <BaseMenu.Trigger
+            ref={ref}
+            className={clsx('outline-none', className)}
+            render={render}
+          />
+        </span>
+      )
+    }
+
+    return (
+      <span className="contents">
+        <BaseMenu.Trigger
+          ref={ref}
+          className={clsx('outline-none', className)}
+        >
+          {children}
+        </BaseMenu.Trigger>
+      </span>
+    )
+  }
+)
+
+MenuTrigger.displayName = 'MenuTrigger'
+
+export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
+  (
+    {
+      children,
+      className,
+      side = 'bottom',
+      align = 'start',
+      sideOffset = 4,
+      alignOffset = 0,
+    },
+    ref
+  ) => {
+    return (
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+        >
+          <BaseMenu.Popup
+            ref={ref}
+            className={clsx(
+              'z-50 min-w-45 max-w-80 rounded-md border border-(--border-light) bg-(--bg-primary) shadow-lg',
+              'py-1',
+              className
+            )}
+          >
+            {children}
+            <BaseMenu.Arrow className="fill-(--bg-primary) stroke-(--border-light)" />
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    )
+  }
+)
+
+MenuContent.displayName = 'MenuContent'
+
+export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
+  ({ children, className, disabled, onSelect, destructive }, ref) => {
+    return (
+      <BaseMenu.Item
+        ref={ref}
+        className={clsx(
+          'relative flex items-center gap-2 px-3 py-1.5 text-[15px] outline-none cursor-pointer select-none',
+          'text-(--text-primary) hover:bg-(--bg-hover)',
+          'data-highlighted:bg-(--bg-hover)',
+          'data-disabled:opacity-50 data-disabled:pointer-events-none',
+          destructive && 'text-(--danger) hover:bg-red-50 dark:hover:bg-red-950/20',
+          className
+        )}
+        disabled={disabled}
+        onSelect={onSelect}
+      >
+        {children}
+      </BaseMenu.Item>
+    )
+  }
+)
+
+MenuItem.displayName = 'MenuItem'
+
+export const MenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  MenuCheckboxItemProps
+>(({ children, className, checked, onCheckedChange, disabled }, ref) => {
+  return (
+    <BaseMenu.CheckboxItem
+      ref={ref}
+      className={clsx(
+        'relative flex items-center gap-2 px-3 py-1.5 pl-8 text-[15px] outline-none cursor-pointer select-none',
+        'text-(--text-primary) hover:bg-(--bg-hover)',
+        'data-highlighted:bg-(--bg-hover)',
+        'data-disabled:opacity-50 data-disabled:pointer-events-none',
+        className
+      )}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+    >
+      <BaseMenu.CheckboxItemIndicator className="absolute left-2 flex items-center justify-center">
+        <Check className="w-4 h-4" />
+      </BaseMenu.CheckboxItemIndicator>
+      {children}
+    </BaseMenu.CheckboxItem>
+  )
+})
+
+MenuCheckboxItem.displayName = 'MenuCheckboxItem'
+
+export const MenuRadioGroup: React.FC<MenuRadioGroupProps> = ({
+  children,
+  value,
+  onValueChange,
+}) => {
+  return (
+    <BaseMenu.RadioGroup value={value} onValueChange={onValueChange}>
+      {children}
+    </BaseMenu.RadioGroup>
+  )
+}
+
+export const MenuRadioItem = React.forwardRef<HTMLDivElement, MenuRadioItemProps>(
+  ({ children, value, className, disabled }, ref) => {
+    return (
+      <BaseMenu.RadioItem
+        ref={ref}
+        value={value}
+        className={clsx(
+          'relative flex items-center gap-2 px-3 py-1.5 pl-8 text-[15px] outline-none cursor-pointer select-none',
+          'text-(--text-primary) hover:bg-(--bg-hover)',
+          'data-highlighted:bg-(--bg-hover)',
+          'data-disabled:opacity-50 data-disabled:pointer-events-none',
+          className
+        )}
+        disabled={disabled}
+      >
+        <BaseMenu.RadioItemIndicator className="absolute left-2 flex items-center justify-center">
+          <Check className="w-4 h-4" />
+        </BaseMenu.RadioItemIndicator>
+        {children}
+      </BaseMenu.RadioItem>
+    )
+  }
+)
+
+MenuRadioItem.displayName = 'MenuRadioItem'
+
+export const MenuLabel: React.FC<MenuLabelProps> = ({ children, className }) => {
+  return (
+    <div
+      className={clsx(
+        'px-3 py-2 text-xs font-semibold text-(--text-muted) uppercase tracking-wider',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const MenuSeparator: React.FC<MenuSeparatorProps> = ({ className }) => {
+  return (
+    <BaseMenu.Separator
+      className={clsx('my-1 h-px bg-(--border-light)', className)}
+    />
+  )
+}
+
+export const MenuSub: React.FC<MenuSubProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+}) => {
+  return (
+    <BaseMenu.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      {children}
+    </BaseMenu.Root>
+  )
+}
+
+export const MenuSubTrigger = React.forwardRef<HTMLButtonElement, MenuSubTriggerProps>(
+  ({ children, className, disabled }, ref) => {
+    return (
+      <BaseMenu.Trigger
+        ref={ref}
+        className={clsx(
+          'relative flex items-center justify-between gap-2 px-3 py-2 text-[15px] outline-none cursor-pointer select-none',
+          'text-(--text-primary) hover:bg-(--bg-hover)',
+          'data-highlighted:bg-(--bg-hover)',
+          'data-disabled:opacity-50 data-disabled:pointer-events-none w-full',
+          className
+        )}
+        disabled={disabled}
+      >
+        {children}
+        <ChevronRight className="w-4 h-4 ml-auto" />
+      </BaseMenu.Trigger>
+    )
+  }
+)
+
+MenuSubTrigger.displayName = 'MenuSubTrigger'
+
+export const MenuSubContent = React.forwardRef<HTMLDivElement, MenuSubContentProps>(
+  ({ children, className }, ref) => {
+    return (
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner side="right" align="start" sideOffset={8}>
+          <BaseMenu.Popup
+            ref={ref}
+            className={clsx(
+              'z-50 min-w-45 max-w-80 rounded-md border border-(--border-light) bg-(--bg-primary) shadow-lg',
+              'py-1',
+              className
+            )}
+          >
+            {children}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    )
+  }
+)
+
+MenuSubContent.displayName = 'MenuSubContent'
+
+// Convenience component for menu items with icons
+export const MenuItemWithIcon: React.FC<{
+  icon?: React.ReactNode
+  children: React.ReactNode
+  shortcut?: string
+  className?: string
+  disabled?: boolean
+  onSelect?: () => void
+  destructive?: boolean
+}> = ({ icon, children, shortcut, className, disabled, onSelect, destructive }) => {
+  return (
+    <MenuItem
+      className={className}
+      disabled={disabled}
+      onSelect={onSelect}
+      destructive={destructive}
+    >
+      {icon && <span className="shrink-0">{icon}</span>}
+      <span className="flex-1">{children}</span>
+      {shortcut && (
+        <span className="ml-auto text-xs text-(--text-muted)">{shortcut}</span>
+      )}
+    </MenuItem>
+  )
+}
+