@xyhp915/slack-base-ui 0.0.1 → 0.0.2

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>
+  )
+}
+

package/src/components/Popover.tsx

@@ -0,0 +1,200 @@
+import React from 'react'
+import { Popover as BasePopover } from '@base-ui/react'
+import clsx from 'clsx'
+
+export interface PopoverProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  modal?: boolean
+}
+
+export interface PopoverTriggerProps {
+  children?: React.ReactNode
+  className?: string
+  render?: React.ReactElement
+}
+
+export interface PopoverContentProps {
+  children: React.ReactNode
+  className?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+}
+
+export interface PopoverCloseProps {
+  children?: React.ReactNode
+  className?: string
+  render?: React.ReactElement
+}
+
+export const Popover: React.FC<PopoverProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+}) => {
+  return (
+    <BasePopover.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      modal={modal}
+    >
+      {children}
+    </BasePopover.Root>
+  )
+}
+
+export const PopoverTrigger = React.forwardRef<
+  HTMLButtonElement,
+  PopoverTriggerProps
+>(({ children, className, render }, ref) => {
+  // Wrap with `contents` span to isolate the hidden accessibility <span> nodes
+  // that @base-ui/react injects as siblings of the trigger. Without this wrapper,
+  // those fixed-position spans become siblings in the parent container and break
+  // Tailwind's `space-y-*` selectors (`:not(:last-child)`) causing layout shifts.
+  if (render) {
+    return (
+      <span className="contents">
+        <BasePopover.Trigger
+          ref={ref}
+          className={clsx('outline-none', className)}
+          render={render}
+        />
+      </span>
+    )
+  }
+
+  return (
+    <span className="contents">
+      <BasePopover.Trigger
+        ref={ref}
+        className={clsx('outline-none', className)}
+      >
+        {children}
+      </BasePopover.Trigger>
+    </span>
+  )
+})
+
+PopoverTrigger.displayName = 'PopoverTrigger'
+
+export const PopoverContent: React.FC<PopoverContentProps> = ({
+  children,
+  className,
+  side = 'bottom',
+  align = 'center',
+  sideOffset = 8,
+  alignOffset = 0,
+}) => {
+  return (
+    <BasePopover.Portal>
+      <BasePopover.Positioner
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+      >
+        <BasePopover.Popup
+          className={clsx(
+            'z-50 min-w-50 max-w-90 rounded-lg border border-(--border-light) bg-(--bg-primary) shadow-lg',
+            className
+          )}
+        >
+          {children}
+          <BasePopover.Arrow className="fill-(--bg-primary) stroke-(--border-light)" />
+        </BasePopover.Popup>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  )
+}
+
+PopoverContent.displayName = 'PopoverContent'
+
+export const PopoverClose = React.forwardRef<
+  HTMLButtonElement,
+  PopoverCloseProps
+>(({ children, className, render }, ref) => {
+  if (render) {
+    return (
+      <BasePopover.Close
+        ref={ref}
+        className={clsx('outline-none', className)}
+        render={render}
+      />
+    )
+  }
+
+  return (
+    <BasePopover.Close
+      ref={ref}
+      className={clsx('outline-none', className)}
+    >
+      {children}
+    </BasePopover.Close>
+  )
+})
+
+PopoverClose.displayName = 'PopoverClose'
+
+// Convenience components for common Popover content patterns
+export const PopoverHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        'px-4 py-3 border-b border-(--border-light)',
+        'font-bold text-[15px] text-(--text-primary)',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const PopoverBody: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        'px-4 py-3',
+        'text-[15px] text-(--text-primary)',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const PopoverFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        'px-4 py-3 border-t border-(--border-light)',
+        'flex items-center justify-end gap-2',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+
+
+
+

package/src/components/Progress.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Progress as BaseProgress } from '@base-ui/react'
+import clsx from 'clsx'
+
+export type ProgressVariant = 'default' | 'success' | 'warning' | 'danger'
+export type ProgressSize = 'sm' | 'md' | 'lg'
+
+export interface ProgressProps {
+  /** Current value (0–max). Omit for indeterminate state. */
+  value?: number
+  /** Maximum value. Defaults to 100. */
+  max?: number
+  variant?: ProgressVariant
+  size?: ProgressSize
+  /** Label shown above the bar */
+  label?: string
+  /** Show percentage text on the right */
+  showValue?: boolean
+  className?: string
+}
+
+const variantColor: Record<ProgressVariant, string> = {
+  default: 'bg-(--accent)',
+  success: 'bg-(--slack-green)',
+  warning: 'bg-amber-400',
+  danger: 'bg-(--danger)',
+}
+
+const trackSizes: Record<ProgressSize, string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+}
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      value,
+      max = 100,
+      variant = 'default',
+      size = 'md',
+      label,
+      showValue,
+      className,
+    },
+    ref,
+  ) => {
+    return (
+      <div className={clsx('flex flex-col gap-1.5', className)}>
+        {(label || showValue) && (
+          <div className="flex items-center justify-between gap-2">
+            {label && (
+              <span className="text-[13px] font-medium text-(--text-secondary)">{label}</span>
+            )}
+            {showValue && value !== undefined && (
+              <span className="text-[12px] text-(--text-muted)">
+                {Math.round((value / max) * 100)}%
+              </span>
+            )}
+          </div>
+        )}
+
+        <BaseProgress.Root
+          ref={ref}
+          value={value ?? null}
+          max={max}
+          className={clsx(
+            'w-full overflow-hidden rounded-full bg-(--bg-hover)',
+            trackSizes[size],
+          )}
+        >
+          <BaseProgress.Track className="relative h-full w-full">
+            <BaseProgress.Indicator
+              className={clsx(
+                'h-full rounded-full transition-[width] duration-300 ease-out',
+                variantColor[variant],
+                // Indeterminate animation when value is null
+                value === undefined &&
+                  'w-1/3 animate-[progress-indeterminate_1.5s_ease-in-out_infinite]',
+              )}
+            />
+          </BaseProgress.Track>
+        </BaseProgress.Root>
+      </div>
+    )
+  },
+)
+
+Progress.displayName = 'Progress'