@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/Popover.tsx

@@ -0,0 +1,367 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } 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>
+  )
+}
+
+// ─── Imperative Popover API ───────────────────────────────────────────────────
+
+export interface ImperativePopoverOptions {
+  /** Content rendered inside the popover */
+  content: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+  className?: string
+}
+
+export interface UseImperativePopoverReturn {
+  /**
+   * Show the popover anchored to the given element.
+   * If already open on the same anchor, calling `show` again replaces the content.
+   */
+  show: (anchor: HTMLElement | null, options: ImperativePopoverOptions) => void
+  /** Hide the currently open popover. */
+  hide: () => void
+  /**
+   * Toggle the popover for the given anchor.
+   * Closes it if the same anchor is already open; otherwise opens on the new anchor.
+   */
+  toggle: (anchor: HTMLElement | null, options: ImperativePopoverOptions) => void
+  /** Whether the imperative popover is currently open. */
+  isOpen: boolean
+}
+
+interface ImperativePopoverState {
+  open: boolean
+  anchor: HTMLElement | null
+  options: ImperativePopoverOptions
+}
+
+const ImperativePopoverContext = createContext<UseImperativePopoverReturn | null>(null)
+
+/**
+ * Provides the imperative popover API to all descendant components.
+ * Only one popover is shown at a time (singleton).
+ * Must wrap any component that calls `useImperativePopover()`.
+ *
+ * @example
+ * ```tsx
+ * // main.tsx
+ * <ImperativePopoverProvider>
+ *   <App />
+ * </ImperativePopoverProvider>
+ *
+ * // Any component
+ * const popover = useImperativePopover()
+ *
+ * <button onClick={e => popover.show(e.currentTarget, { content: <MyPanel /> })}>
+ *   Open
+ * </button>
+ * ```
+ */
+export const ImperativePopoverProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [state, setState] = useState<ImperativePopoverState>({
+    open: false,
+    anchor: null,
+    options: { content: null },
+  })
+
+  const show = useCallback(
+    (anchor: HTMLElement | null, options: ImperativePopoverOptions) => {
+      setState({ open: true, anchor, options })
+    },
+    [],
+  )
+
+  const hide = useCallback(() => {
+    setState(prev => ({ ...prev, open: false }))
+  }, [])
+
+  const toggle = useCallback(
+    (anchor: HTMLElement | null, options: ImperativePopoverOptions) => {
+      setState(prev => {
+        if (prev.open && prev.anchor === anchor) {
+          return { ...prev, open: false }
+        }
+        return { open: true, anchor, options }
+      })
+    },
+    [],
+  )
+
+  const value = useMemo<UseImperativePopoverReturn>(
+    () => ({ show, hide, toggle, isOpen: state.open }),
+    [show, hide, toggle, state.open],
+  )
+
+  return (
+    <ImperativePopoverContext.Provider value={value}>
+      {children}
+      <ImperativePopoverPortal state={state} onClose={hide} />
+    </ImperativePopoverContext.Provider>
+  )
+}
+
+ImperativePopoverProvider.displayName = 'ImperativePopoverProvider'
+
+function ImperativePopoverPortal({
+  state,
+  onClose,
+}: {
+  state: ImperativePopoverState
+  onClose: () => void
+}) {
+  if (!state.open || !state.anchor) return null
+
+  const { options } = state
+
+  return (
+    <BasePopover.Root open={state.open} onOpenChange={open => !open && onClose()}>
+      <BasePopover.Portal>
+        <BasePopover.Positioner
+          anchor={state.anchor}
+          side={options.side ?? 'bottom'}
+          align={options.align ?? 'center'}
+          sideOffset={options.sideOffset ?? 8}
+          alignOffset={options.alignOffset ?? 0}
+        >
+          <BasePopover.Popup
+            className={clsx(
+              'z-50 min-w-50 max-w-90 rounded-lg border border-(--border-light) bg-(--bg-primary) shadow-lg',
+              options.className,
+            )}
+          >
+            {options.content}
+            <BasePopover.Arrow className="fill-(--bg-primary) stroke-(--border-light)" />
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  )
+}
+
+/**
+ * Returns imperative methods for showing a popover anchored to any element.
+ *
+ * Must be used inside `<ImperativePopoverProvider>`.
+ *
+ * @example
+ * ```tsx
+ * const popover = useImperativePopover()
+ *
+ * // Show on button click
+ * <button onClick={e => popover.show(e.currentTarget, { content: <ProfileCard />, side: 'bottom' })}>
+ *   Profile
+ * </button>
+ *
+ * // Toggle
+ * <button onClick={e => popover.toggle(e.currentTarget, { content: <Settings /> })}>
+ *   Settings
+ * </button>
+ * ```
+ */
+export function useImperativePopover(): UseImperativePopoverReturn {
+  const ctx = useContext(ImperativePopoverContext)
+  if (!ctx) throw new Error('useImperativePopover must be used within <ImperativePopoverProvider>')
+  return ctx
+}
+
+
+
+
+
+

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'

package/src/components/Radio.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from '@base-ui/react'
+import clsx from 'clsx'
+
+// ── RadioGroup ────────────────────────────────────────────────────────────────
+
+export interface RadioGroupProps {
+  children: React.ReactNode
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  disabled?: boolean
+  required?: boolean
+  /** Group label shown above the radios */
+  label?: string
+  /** Error message */
+  error?: string
+  /** Arrange items horizontally instead of vertically */
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      children,
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      required,
+      label,
+      error,
+      orientation = 'vertical',
+      className,
+    },
+    ref,
+  ) => {
+    return (
+      <div className={clsx('flex flex-col gap-1.5', className)}>
+        {label && (
+          <span className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="ml-0.5 text-(--danger)">*</span>}
+          </span>
+        )}
+
+        <BaseRadioGroup
+          ref={ref}
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          required={required}
+          className={clsx(
+            'flex gap-3',
+            orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
+          )}
+        >
+          {children}
+        </BaseRadioGroup>
+
+        {error && (
+          <span className="flex items-center gap-1 text-[12px] font-medium leading-tight text-(--danger)">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+RadioGroup.displayName = 'RadioGroup'
+
+// ── Radio ─────────────────────────────────────────────────────────────────────
+
+export interface RadioProps {
+  value: string
+  disabled?: boolean
+  /** Label text shown next to the radio */
+  label?: string
+  /** Helper text shown below the label */
+  description?: string
+  id?: string
+  className?: string
+}
+
+export const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(
+  ({ value, disabled, label, description, id, className }, ref) => {
+    const generatedId = React.useId()
+    const radioId = id ?? generatedId
+
+    const radioEl = (
+      <BaseRadio.Root
+        ref={ref}
+        id={radioId}
+        value={value}
+        disabled={disabled}
+        className={clsx(
+          'relative flex h-4 w-4 shrink-0 items-center justify-center rounded-full',
+          '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)',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+      >
+        <BaseRadio.Indicator className="h-2 w-2 rounded-full bg-(--accent) data-[unchecked]:hidden" />
+      </BaseRadio.Root>
+    )
+
+    if (!label) return radioEl
+
+    return (
+      <div className="flex items-start gap-2">
+        {radioEl}
+        <div className="flex flex-col">
+          <label
+            htmlFor={radioId}
+            className={clsx(
+              'text-[14px] leading-none text-(--text-primary) select-none',
+              disabled && 'opacity-50 cursor-not-allowed',
+            )}
+          >
+            {label}
+          </label>
+          {description && (
+            <span className="mt-0.5 text-[12px] text-(--text-muted)">{description}</span>
+          )}
+        </div>
+      </div>
+    )
+  },
+)
+
+Radio.displayName = 'Radio'