@xyhp915/slack-base-ui 0.0.5 → 0.0.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xyhp915/slack-base-ui",
   "main": "libs/index.js",
   "types": "libs/index.d.ts",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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>
+  )
+}
+
+

package/src/components/Dialog.tsx

@@ -10,7 +10,7 @@ import React, {
 import { X } from 'lucide-react'
 import { Button } from './Button'
 
-export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface DialogProps {
   open?: boolean;
@@ -29,7 +29,7 @@ export const Dialog = ({
   title,
   description,
   children,
-  size = 'md',
+  size = 'xl',
   showCloseButton = true,
   className,
 }: DialogProps) => {
@@ -38,6 +38,9 @@ export const Dialog = ({
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
   }
 
   return (
@@ -242,27 +245,27 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }, [])
 
   const value = useMemo<UseDialogReturn>(
-    () => ({ show, confirm, alert }),
-    [show, confirm, alert],
+      () => ({ show, confirm, alert }),
+      [show, confirm, alert],
   )
 
   return (
-    <DialogImperativeContext.Provider value={value}>
-      {children}
-      {dialogs.map(dialog => (
-        <ImperativeDialogItem
-          key={dialog.id}
-          dialog={dialog}
-          onRemove={() => removeDialog(dialog.id)}
-        />
-      ))}
-    </DialogImperativeContext.Provider>
+      <DialogImperativeContext.Provider value={value}>
+        {children}
+        {dialogs.map(dialog => (
+            <ImperativeDialogItem
+                key={dialog.id}
+                dialog={dialog}
+                onRemove={() => removeDialog(dialog.id)}
+            />
+        ))}
+      </DialogImperativeContext.Provider>
   )
 }
 
 DialogProvider.displayName = 'DialogProvider'
 
-function ImperativeDialogItem({
+function ImperativeDialogItem ({
   dialog,
   onRemove,
 }: {
@@ -272,13 +275,13 @@ function ImperativeDialogItem({
   const [open, setOpen] = useState(true)
 
   const handleClose = useCallback(
-    (result: boolean) => {
-      setOpen(false)
-      dialog.resolve(result)
-      // Allow close animation to finish before unmounting
-      setTimeout(onRemove, 300)
-    },
-    [dialog, onRemove],
+      (result: boolean) => {
+        setOpen(false)
+        dialog.resolve(result)
+        // Allow close animation to finish before unmounting
+        setTimeout(onRemove, 300)
+      },
+      [dialog, onRemove],
   )
 
   const commonProps = {
@@ -291,55 +294,55 @@ function ImperativeDialogItem({
 
   if (dialog.type === 'show') {
     return (
-      <Dialog
-        {...commonProps}
-        showCloseButton={dialog.showCloseButton ?? true}
-        onOpenChange={o => !o && handleClose(false)}
-      >
-        {dialog.content}
-      </Dialog>
+        <Dialog
+            {...commonProps}
+            showCloseButton={dialog.showCloseButton ?? true}
+            onOpenChange={o => !o && handleClose(false)}
+        >
+          {dialog.content}
+        </Dialog>
     )
   }
 
   if (dialog.type === 'confirm') {
     return (
+        <Dialog
+            {...commonProps}
+            size={dialog.size ?? 'sm'}
+            showCloseButton={false}
+            onOpenChange={o => !o && handleClose(false)}
+        >
+          {dialog.content}
+          <DialogFooter>
+            <Button variant="secondary" onClick={() => handleClose(false)}>
+              {dialog.cancelLabel ?? 'Cancel'}
+            </Button>
+            <Button
+                variant={dialog.confirmVariant ?? 'primary'}
+                onClick={() => handleClose(true)}
+            >
+              {dialog.confirmLabel ?? 'Confirm'}
+            </Button>
+          </DialogFooter>
+        </Dialog>
+    )
+  }
+
+  // alert
+  return (
       <Dialog
-        {...commonProps}
-        size={dialog.size ?? 'sm'}
-        showCloseButton={false}
-        onOpenChange={o => !o && handleClose(false)}
+          {...commonProps}
+          size={dialog.size ?? 'sm'}
+          showCloseButton={false}
+          onOpenChange={o => !o && handleClose(true)}
       >
         {dialog.content}
         <DialogFooter>
-          <Button variant="secondary" onClick={() => handleClose(false)}>
-            {dialog.cancelLabel ?? 'Cancel'}
-          </Button>
-          <Button
-            variant={dialog.confirmVariant ?? 'primary'}
-            onClick={() => handleClose(true)}
-          >
-            {dialog.confirmLabel ?? 'Confirm'}
+          <Button variant="primary" onClick={() => handleClose(true)}>
+            {dialog.confirmLabel ?? 'OK'}
           </Button>
         </DialogFooter>
       </Dialog>
-    )
-  }
-
-  // alert
-  return (
-    <Dialog
-      {...commonProps}
-      size={dialog.size ?? 'sm'}
-      showCloseButton={false}
-      onOpenChange={o => !o && handleClose(true)}
-    >
-      {dialog.content}
-      <DialogFooter>
-        <Button variant="primary" onClick={() => handleClose(true)}>
-          {dialog.confirmLabel ?? 'OK'}
-        </Button>
-      </DialogFooter>
-    </Dialog>
   )
 }
 
@@ -363,7 +366,7 @@ function ImperativeDialogItem({
  * await alert({ title: 'Error', description: 'Something went wrong.' })
  * ```
  */
-export function useDialog(): UseDialogReturn {
+export function useDialog (): UseDialogReturn {
   const ctx = useContext(DialogImperativeContext)
   if (!ctx) throw new Error('useDialog must be used within <DialogProvider>')
   return ctx