@xyhp915/slack-base-ui 0.0.6 → 0.0.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xyhp915/slack-base-ui",
   "main": "libs/index.js",
   "types": "libs/index.d.ts",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Combobox.tsx

@@ -0,0 +1,441 @@
+import React from 'react'
+import { Combobox as BaseCombobox } from '@base-ui/react'
+import clsx from 'clsx'
+import { Check, ChevronDown, X } from 'lucide-react'
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface ComboboxGroup {
+  label: string
+  options: ComboboxOption[]
+}
+
+export interface ComboboxProps {
+  /** Flat option list */
+  options?: ComboboxOption[]
+  /** Grouped option list (mutually exclusive with `options`) */
+  groups?: ComboboxGroup[]
+  /** Controlled selected value */
+  value?: ComboboxOption | null
+  /** Initial selected value (uncontrolled) */
+  defaultValue?: ComboboxOption | null
+  /** Callback when the selected value changes */
+  onValueChange?: (value: ComboboxOption | null) => void
+  /** Placeholder text shown in the input */
+  placeholder?: string
+  /** Whether the combobox is disabled */
+  disabled?: boolean
+  /** Whether a value is required */
+  required?: boolean
+  /** Label shown above the input */
+  label?: string
+  /** Error message shown below the input */
+  error?: string
+  /** Whether the combobox takes full width */
+  fullWidth?: boolean
+  /** Whether the user can clear the selected value */
+  clearable?: boolean
+  /** No-results message */
+  emptyMessage?: string
+  /** Additional CSS class on the outermost container */
+  className?: string
+  /** HTML id forwarded to the input */
+  id?: string
+}
+
+export interface ComboboxMultipleProps {
+  /** Flat option list */
+  options?: ComboboxOption[]
+  /** Grouped option list */
+  groups?: ComboboxGroup[]
+  /** Controlled selected values */
+  value?: ComboboxOption[]
+  /** Initial selected values (uncontrolled) */
+  defaultValue?: ComboboxOption[]
+  /** Callback when selected values change */
+  onValueChange?: (value: ComboboxOption[]) => void
+  /** Placeholder text shown in the input */
+  placeholder?: string
+  /** Whether the combobox is disabled */
+  disabled?: boolean
+  /** Whether a value is required */
+  required?: boolean
+  /** Label shown above the input */
+  label?: string
+  /** Error message shown below the input */
+  error?: string
+  /** Whether the combobox takes full width */
+  fullWidth?: boolean
+  /** Whether the user can clear all selected values */
+  clearable?: boolean
+  /** No-results message */
+  emptyMessage?: string
+  /** Additional CSS class on the outermost container */
+  className?: string
+  /** HTML id forwarded to the input */
+  id?: string
+}
+
+// ── Shared styles ──────────────────────────────────────────────────────
+
+const inputGroupStyles = clsx(
+  'inline-flex w-full items-center rounded-md border',
+  'bg-(--bg-primary) text-(--text-primary)',
+  'transition-[border-color,box-shadow] outline-none',
+  'has-[:focus]:border-(--accent)/70',
+  'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50',
+)
+
+const inputStyles = clsx(
+  'flex-1 min-w-0 appearance-none bg-transparent text-[14px] leading-[1.4]',
+  'px-3 py-2 text-(--text-primary) placeholder-(--text-muted)',
+  'outline-none disabled:cursor-not-allowed',
+)
+
+const popupStyles = clsx(
+  'min-w-[var(--anchor-width)] overflow-auto rounded-lg border border-(--border-light) bg-(--bg-primary)',
+  'py-1 shadow-lg',
+  'origin-[var(--transform-origin)]',
+  'transition-[transform,scale,opacity]',
+  'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',
+  'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',
+)
+
+const itemStyles = clsx(
+  'relative flex cursor-default select-none items-center rounded px-3 py-1.5 text-[14px] text-(--text-primary) mx-1',
+  'data-[highlighted]:bg-(--bg-hover) data-[highlighted]:outline-none',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+)
+
+// ── Single-select Combobox ─────────────────────────────────────────────
+
+export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
+  (
+    {
+      options,
+      groups,
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder = 'Search…',
+      disabled,
+      required,
+      label,
+      error,
+      fullWidth,
+      clearable = true,
+      emptyMessage = 'No results found',
+      className,
+      id,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id ?? generatedId
+
+    // Build the flat items array that Base UI needs for filtering
+    const items = React.useMemo<ComboboxOption[]>(() => {
+      if (groups) return groups.flatMap((g) => g.options)
+      return options ?? []
+    }, [options, groups])
+
+    // Build grouped items when `groups` is provided
+    const groupedItems = React.useMemo(() => {
+      if (!groups) return undefined
+      return groups.map((g) => ({
+        value: g.label,
+        items: g.options,
+      }))
+    }, [groups])
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full', className)}>
+        {label && (
+          <label htmlFor={inputId} className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="ml-0.5 text-(--danger)">*</span>}
+          </label>
+        )}
+
+        <BaseCombobox.Root
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={
+            onValueChange
+              ? (v: ComboboxOption | null) => onValueChange(v)
+              : undefined
+          }
+          items={groupedItems ?? items}
+          disabled={disabled}
+          required={required}
+        >
+          {/* Input row — wraps input + action buttons */}
+          <div
+            className={clsx(
+              inputGroupStyles,
+              error
+                ? 'border-(--danger) has-[:focus]:border-(--danger) has-[:focus]:shadow-[0_0_0_2px_var(--danger)]'
+                : 'border-(--border-light) hover:border-(--text-primary)/30',
+            )}
+          >
+            <BaseCombobox.Input
+              ref={ref}
+              id={inputId}
+              placeholder={placeholder}
+              className={inputStyles}
+            />
+            <div className="flex items-center pr-2 gap-0.5 shrink-0">
+              {clearable && (
+                <BaseCombobox.Clear
+                  aria-label="Clear"
+                  className={clsx(
+                    'p-0.5 rounded text-(--text-muted) hover:text-(--text-primary)',
+                    'transition-colors cursor-pointer',
+                  )}
+                >
+                  <X size={14} />
+                </BaseCombobox.Clear>
+              )}
+              <BaseCombobox.Trigger
+                aria-label="Open"
+                className="p-0.5 rounded text-(--text-muted) hover:text-(--text-primary) transition-colors cursor-pointer"
+              >
+                <ChevronDown size={16} />
+              </BaseCombobox.Trigger>
+            </div>
+          </div>
+
+          <BaseCombobox.Portal>
+            <BaseCombobox.Positioner sideOffset={4} className="z-50">
+              <BaseCombobox.Popup className={popupStyles}>
+                <BaseCombobox.Empty className="px-3 py-2 text-[13px] text-(--text-muted)">
+                  {emptyMessage}
+                </BaseCombobox.Empty>
+
+                <BaseCombobox.List className="outline-none max-h-60 overflow-y-auto">
+                  {groups
+                    ? (group: { value: string; items: ComboboxOption[] }) => (
+                        <BaseCombobox.Group key={group.value}>
+                          <BaseCombobox.GroupLabel className="px-3 py-1 text-[12px] font-semibold text-(--text-muted) uppercase tracking-wider">
+                            {group.value}
+                          </BaseCombobox.GroupLabel>
+                          {group.items.map((opt) => (
+                            <ComboboxItem key={opt.value} option={opt} />
+                          ))}
+                        </BaseCombobox.Group>
+                      )
+                    : (item: ComboboxOption) => (
+                        <ComboboxItem key={item.value} option={item} />
+                      )}
+                </BaseCombobox.List>
+              </BaseCombobox.Popup>
+            </BaseCombobox.Positioner>
+          </BaseCombobox.Portal>
+        </BaseCombobox.Root>
+
+        {error && (
+          <span className="flex items-center gap-1 text-[12px] font-medium leading-tight text-(--danger)">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+Combobox.displayName = 'Combobox'
+
+// ── Multiple-select Combobox ──────────────────────────────────────────
+
+export const ComboboxMultiple = React.forwardRef<HTMLInputElement, ComboboxMultipleProps>(
+  (
+    {
+      options,
+      groups,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      placeholder = 'Search…',
+      disabled,
+      required,
+      label,
+      error,
+      fullWidth,
+      clearable = true,
+      emptyMessage = 'No results found',
+      className,
+      id,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id ?? generatedId
+
+    // Track selected values internally so we can render chips correctly
+    const [internalValue, setInternalValue] = React.useState<ComboboxOption[]>(
+      defaultValue ?? [],
+    )
+    const selectedValues = valueProp ?? internalValue
+
+    const handleValueChange = React.useCallback(
+      (v: ComboboxOption[]) => {
+        if (valueProp === undefined) {
+          setInternalValue(v)
+        }
+        onValueChange?.(v)
+      },
+      [valueProp, onValueChange],
+    )
+
+    const items = React.useMemo<ComboboxOption[]>(() => {
+      if (groups) return groups.flatMap((g) => g.options)
+      return options ?? []
+    }, [options, groups])
+
+    const groupedItems = React.useMemo(() => {
+      if (!groups) return undefined
+      return groups.map((g) => ({
+        value: g.label,
+        items: g.options,
+      }))
+    }, [groups])
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full', className)}>
+        {label && (
+          <label htmlFor={inputId} className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="ml-0.5 text-(--danger)">*</span>}
+          </label>
+        )}
+
+        <BaseCombobox.Root
+          multiple
+          value={selectedValues}
+          onValueChange={handleValueChange}
+          items={groupedItems ?? items}
+          disabled={disabled}
+          required={required}
+        >
+          {/* Input row with chips */}
+          <div
+            className={clsx(
+              inputGroupStyles,
+              'flex-wrap gap-1 py-1',
+              error
+                ? 'border-(--danger) has-[:focus]:border-(--danger) has-[:focus]:shadow-[0_0_0_2px_var(--danger)]'
+                : 'border-(--border-light) hover:border-(--text-primary)/30',
+            )}
+          >
+            {selectedValues.length > 0 && (
+              <BaseCombobox.Chips className="flex flex-wrap gap-1 pl-2">
+                {selectedValues.map((opt) => (
+                  <BaseCombobox.Chip
+                    key={opt.value}
+                    className={clsx(
+                      'inline-flex items-center gap-1 rounded-md px-2 py-0.5',
+                      'bg-(--bg-hover) text-(--text-primary) text-[12px] font-medium',
+                      'border border-(--border-light)',
+                    )}
+                  >
+                    {opt.label}
+                    <BaseCombobox.ChipRemove
+                      className="rounded-sm p-0.5 hover:bg-(--bg-secondary) text-(--text-muted) hover:text-(--text-primary) transition-colors cursor-pointer"
+                      aria-label={`Remove ${opt.label}`}
+                    >
+                      <X size={12} />
+                    </BaseCombobox.ChipRemove>
+                  </BaseCombobox.Chip>
+                ))}
+              </BaseCombobox.Chips>
+            )}
+
+            <BaseCombobox.Input
+              ref={ref}
+              id={inputId}
+              placeholder={placeholder}
+              className={clsx(inputStyles, 'py-1.5')}
+            />
+
+            <div className="flex items-center pr-2 gap-0.5 shrink-0">
+              {clearable && (
+                <BaseCombobox.Clear
+                  aria-label="Clear all"
+                  className={clsx(
+                    'p-0.5 rounded text-(--text-muted) hover:text-(--text-primary)',
+                    'transition-colors cursor-pointer',
+                  )}
+                >
+                  <X size={14} />
+                </BaseCombobox.Clear>
+              )}
+              <BaseCombobox.Trigger
+                aria-label="Open"
+                className="p-0.5 rounded text-(--text-muted) hover:text-(--text-primary) transition-colors cursor-pointer"
+              >
+                <ChevronDown size={16} />
+              </BaseCombobox.Trigger>
+            </div>
+          </div>
+
+          <BaseCombobox.Portal>
+            <BaseCombobox.Positioner sideOffset={4} className="z-50">
+              <BaseCombobox.Popup className={popupStyles}>
+                <BaseCombobox.Empty className="px-3 py-2 text-[13px] text-(--text-muted)">
+                  {emptyMessage}
+                </BaseCombobox.Empty>
+
+                <BaseCombobox.List className="outline-none max-h-60 overflow-y-auto">
+                  {groups
+                    ? (group: { value: string; items: ComboboxOption[] }) => (
+                        <BaseCombobox.Group key={group.value}>
+                          <BaseCombobox.GroupLabel className="px-3 py-1 text-[12px] font-semibold text-(--text-muted) uppercase tracking-wider">
+                            {group.value}
+                          </BaseCombobox.GroupLabel>
+                          {group.items.map((opt) => (
+                            <ComboboxItem key={opt.value} option={opt} />
+                          ))}
+                        </BaseCombobox.Group>
+                      )
+                    : (item: ComboboxOption) => (
+                        <ComboboxItem key={item.value} option={item} />
+                      )}
+                </BaseCombobox.List>
+              </BaseCombobox.Popup>
+            </BaseCombobox.Positioner>
+          </BaseCombobox.Portal>
+        </BaseCombobox.Root>
+
+        {error && (
+          <span className="flex items-center gap-1 text-[12px] font-medium leading-tight text-(--danger)">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+ComboboxMultiple.displayName = 'ComboboxMultiple'
+
+// ── Internal helpers ──────────────────────────────────────────────────
+
+/** Renders a single selectable option inside the popup list. */
+function ComboboxItem({ option }: { option: ComboboxOption }) {
+  return (
+    <BaseCombobox.Item value={option} disabled={option.disabled} className={itemStyles}>
+      <BaseCombobox.ItemIndicator className="absolute right-3 flex items-center text-(--accent)">
+        <Check size={14} />
+      </BaseCombobox.ItemIndicator>
+      <span className="flex-1">{option.label}</span>
+    </BaseCombobox.Item>
+  )
+}
+
+