@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/Button.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx'
+import { Button as BaseButton } from '@base-ui/react'
+import type { ButtonProps as BaseButtonProps } from '@base-ui/react'
+import React from 'react'
+
+// Slack Button Variants
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends BaseButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'secondary', size = 'md', fullWidth, children, ...props }, ref) => {
+
+    // Base styles tailored to match Slack
+    const baseStyles = 'inline-flex items-center justify-center font-bold transition-all outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-primary) disabled:opacity-50 disabled:cursor-not-allowed select-none'
+
+    const variants = {
+      primary: 'bg-(--accent-action) text-(--accent-contrast) hover:bg-(--accent-action-hover) border border-transparent shadow-sm active:scale-[0.98]',
+      secondary: 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-active) hover:bg-(--bg-hover) hover:shadow-sm active:bg-(--bg-secondary)',
+      danger: 'bg-(--danger) text-(--accent-contrast) hover:bg-(--danger-hover) border border-transparent shadow-sm',
+      ghost: 'bg-transparent text-(--text-secondary) hover:bg-(--bg-hover) hover:text-(--text-primary)',
+    }
+
+    const sizes = {
+      sm: 'h-7 px-3 text-[13px] rounded',
+      md: 'h-9 px-4 text-[15px] rounded-md',
+      lg: 'h-11 px-6 text-[18px] rounded-lg',
+    }
+
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          fullWidth && 'w-full',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </BaseButton>
+    )
+  },
+)
+
+Button.displayName = 'Button'

package/src/components/Checkbox.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Checkbox as BaseCheckbox } from '@base-ui/react'
+import clsx from 'clsx'
+import { Check, Minus } from 'lucide-react'
+
+export interface CheckboxProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  indeterminate?: boolean
+  disabled?: boolean
+  required?: boolean
+  /** Label text shown next to the checkbox */
+  label?: string
+  /** Helper text shown below the label */
+  description?: string
+  /** Error message */
+  error?: string
+  name?: string
+  value?: string
+  id?: string
+  className?: string
+}
+
+export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (
+    {
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      indeterminate,
+      disabled,
+      required,
+      label,
+      description,
+      error,
+      name,
+      value,
+      id,
+      className,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId()
+    const checkboxId = id ?? generatedId
+
+    const rootEl = (
+      <BaseCheckbox.Root
+        ref={ref}
+        id={checkboxId}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
+        indeterminate={indeterminate}
+        disabled={disabled}
+        required={required}
+        name={name}
+        value={value}
+        className={clsx(
+          'relative flex h-4 w-4 shrink-0 items-center justify-center rounded',
+          'border-2 border-(--border-gray) bg-(--bg-primary)',
+          'transition-[background-color,border-color] outline-none',
+          'focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1',
+          'data-[checked]:border-(--accent) data-[checked]:bg-(--accent)',
+          'data-[indeterminate]:border-(--accent) data-[indeterminate]:bg-(--accent)',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-(--danger)',
+          className,
+        )}
+      >
+        <BaseCheckbox.Indicator className="flex items-center justify-center text-white">
+          {indeterminate ? <Minus size={10} strokeWidth={3} /> : <Check size={10} strokeWidth={3} />}
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+    )
+
+    if (!label) return rootEl
+
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-start gap-2">
+          {rootEl}
+          <div className="flex flex-col">
+            <label
+              htmlFor={checkboxId}
+              className={clsx(
+                'text-[14px] leading-none text-(--text-primary) select-none',
+                disabled && 'opacity-50 cursor-not-allowed',
+              )}
+            >
+              {label}
+              {required && <span className="ml-0.5 text-(--danger)">*</span>}
+            </label>
+            {description && (
+              <span className="mt-0.5 text-[12px] text-(--text-muted)">{description}</span>
+            )}
+          </div>
+        </div>
+        {error && (
+          <span className="flex items-center gap-1 text-[12px] font-medium leading-tight text-(--danger)">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+Checkbox.displayName = 'Checkbox'

package/src/components/ContextMenu.tsx

@@ -0,0 +1,393 @@
+import React from 'react'
+import { Menu as BaseMenu } from '@base-ui/react'
+import clsx from 'clsx'
+import { ChevronRight } from 'lucide-react'
+import { MenuTrigger, MenuItem, MenuCheckboxItem, MenuRadioItem } from './Menu'
+
+export interface ContextMenuProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface ContextMenuTriggerProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+export interface ContextMenuContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export interface ContextMenuItemProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  onSelect?: () => void
+  destructive?: boolean
+}
+
+export interface ContextMenuCheckboxItemProps {
+  children: React.ReactNode
+  className?: string
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+}
+
+export interface ContextMenuRadioGroupProps {
+  children: React.ReactNode
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export interface ContextMenuRadioItemProps {
+  children: React.ReactNode
+  value: string
+  className?: string
+  disabled?: boolean
+}
+
+export interface ContextMenuLabelProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export interface ContextMenuSeparatorProps {
+  className?: string
+}
+
+export interface ContextMenuSubProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface ContextMenuSubTriggerProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+export interface ContextMenuSubContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+// Context for sharing anchor position between components
+const ContextMenuContext = React.createContext<{
+  anchorEl: VirtualElement | null
+  setAnchorEl: (el: VirtualElement | null) => void
+} | null>(null)
+
+interface VirtualElement {
+  getBoundingClientRect: () => DOMRect
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  children,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)
+  const [anchorEl, setAnchorEl] = React.useState<VirtualElement | null>(null)
+
+  const open = controlledOpen ?? uncontrolledOpen
+  const handleOpenChange = (newOpen: boolean) => {
+    setUncontrolledOpen(newOpen)
+    onOpenChange?.(newOpen)
+  }
+
+  return (
+    <ContextMenuContext.Provider value={{ anchorEl, setAnchorEl }}>
+      <BaseMenu.Root
+        open={open}
+        onOpenChange={handleOpenChange}
+      >
+        {children}
+      </BaseMenu.Root>
+    </ContextMenuContext.Provider>
+  )
+}
+
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuTriggerProps
+>(({ children, className, disabled }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (disabled) return
+
+    // Create a virtual element at the mouse position
+    const virtualEl: VirtualElement = {
+      getBoundingClientRect: () => ({
+        width: 0,
+        height: 0,
+        x: e.clientX,
+        y: e.clientY,
+        left: e.clientX,
+        right: e.clientX,
+        top: e.clientY,
+        bottom: e.clientY,
+        toJSON: () => ({}),
+      } as DOMRect),
+    }
+
+    context?.setAnchorEl(virtualEl)
+
+    // Programmatically trigger the menu
+    if (triggerRef.current) {
+      triggerRef.current.click()
+    }
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={clsx('outline-none focus:outline-none', className)}
+      onContextMenu={handleContextMenu}
+    >
+      {/* Hidden trigger button — must suppress all focus styles */}
+      <MenuTrigger
+        ref={triggerRef}
+        className="!absolute !w-0 !h-0 !p-0 !m-0 !border-0 !outline-none !shadow-none !opacity-0 overflow-hidden pointer-events-none"
+        render={
+          <button
+            disabled={disabled}
+            tabIndex={-1}
+            aria-hidden="true"
+          />
+        }
+      />
+      {children}
+    </div>
+  )
+})
+
+ContextMenuTrigger.displayName = 'ContextMenuTrigger'
+
+export const ContextMenuContent = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuContentProps
+>(({ children, className }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+
+  return (
+    <BaseMenu.Portal>
+      <BaseMenu.Positioner
+        anchor={context?.anchorEl || undefined}
+        side="bottom"
+        align="start"
+        sideOffset={4}
+      >
+        <BaseMenu.Popup
+          ref={ref}
+          className={clsx(
+            'z-50 min-w-56 rounded-md border border-(--border-light) bg-(--bg-primary) shadow-lg',
+            'py-1 outline-0',
+            className
+          )}
+        >
+          {children}
+        </BaseMenu.Popup>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+
+  )
+})
+
+ContextMenuContent.displayName = 'ContextMenuContent'
+
+export const ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(
+  ({ children, className, disabled, onSelect, destructive }, ref) => {
+    return (
+      <MenuItem
+        ref={ref}
+        className={className}
+        disabled={disabled}
+        onSelect={onSelect}
+        destructive={destructive}
+      >
+        {children}
+      </MenuItem>
+    )
+  }
+)
+
+ContextMenuItem.displayName = 'ContextMenuItem'
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuCheckboxItemProps
+>(({ children, className, checked, onCheckedChange, disabled }, ref) => {
+  return (
+    <MenuCheckboxItem
+      ref={ref}
+      className={className}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+    >
+      {children}
+    </MenuCheckboxItem>
+  )
+})
+
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem'
+
+export const ContextMenuRadioGroup: React.FC<ContextMenuRadioGroupProps> = ({
+  children,
+  value,
+  onValueChange,
+}) => {
+  return (
+    <BaseMenu.RadioGroup value={value} onValueChange={onValueChange}>
+      {children}
+    </BaseMenu.RadioGroup>
+  )
+}
+
+export const ContextMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuRadioItemProps
+>(({ children, value, className, disabled }, ref) => {
+  return (
+    <MenuRadioItem
+      ref={ref}
+      value={value}
+      className={className}
+      disabled={disabled}
+    >
+      {children}
+    </MenuRadioItem>
+  )
+})
+
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem'
+
+export const ContextMenuLabel: React.FC<ContextMenuLabelProps> = ({
+  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 ContextMenuSeparator: React.FC<ContextMenuSeparatorProps> = ({
+  className,
+}) => {
+  return (
+    <BaseMenu.Separator
+      className={clsx('my-1 h-px bg-(--border-light)', className)}
+    />
+  )
+}
+
+export const ContextMenuSub: React.FC<ContextMenuSubProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+}) => {
+  return (
+    <BaseMenu.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      {children}
+    </BaseMenu.Root>
+  )
+}
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ContextMenuSubTriggerProps
+>(({ children, className, disabled }, ref) => {
+  return (
+    <MenuTrigger
+      ref={ref}
+      className={clsx(
+        'relative flex items-center justify-between gap-2 px-3 py-2 text-[15px] 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
+      )}
+      render={
+        <button disabled={disabled}>
+          {children}
+          <ChevronRight className="w-4 h-4 ml-auto"/>
+        </button>
+      }
+    />
+  )
+})
+
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger'
+
+export const ContextMenuSubContent = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuSubContentProps
+>(({ 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>
+  )
+})
+
+ContextMenuSubContent.displayName = 'ContextMenuSubContent'
+
+// Convenience component for context menu items with icons and shortcuts
+export const ContextMenuItemWithIcon: 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 (
+    <ContextMenuItem
+      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>
+      )}
+    </ContextMenuItem>
+  )
+}