@xyhp915/slack-base-ui 0.0.1 → 0.0.2

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'

package/src/components/Select.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import { Select as BaseSelect } from '@base-ui/react'
+import clsx from 'clsx'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SelectGroup {
+  label: string
+  options: SelectOption[]
+}
+
+export interface SelectProps {
+  /** Option items (flat list or grouped) */
+  options?: SelectOption[]
+  groups?: SelectGroup[]
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string | null) => void
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  /** Label shown above the trigger */
+  label?: string
+  /** Error message shown below the trigger */
+  error?: string
+  /** Full width */
+  fullWidth?: boolean
+  className?: string
+  id?: string
+}
+
+const itemClass = clsx(
+  'relative flex cursor-default select-none items-center rounded px-3 py-1.5 text-[14px] text-(--text-primary)',
+  'data-[highlighted]:bg-(--bg-hover) data-[highlighted]:outline-none',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+)
+
+export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
+  (
+    {
+      options,
+      groups,
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder = 'Select an option',
+      disabled,
+      required,
+      label,
+      error,
+      fullWidth,
+      className,
+      id,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId()
+    const triggerId = id ?? generatedId
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
+        {label && (
+          <label
+            htmlFor={triggerId}
+            className="text-[14px] font-semibold text-(--text-primary)"
+          >
+            {label}
+            {required && <span className="ml-0.5 text-(--danger)">*</span>}
+          </label>
+        )}
+
+        <BaseSelect.Root
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          required={required}
+        >
+          <BaseSelect.Trigger
+            id={triggerId}
+            ref={ref}
+            className={clsx(
+              'inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-[14px]',
+              'bg-(--bg-primary) text-(--text-primary)',
+              'transition-[border-color,box-shadow] outline-none',
+              'focus:border-(--accent)/70',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              error
+                ? 'border-(--danger) focus:shadow-[0_0_0_2px_var(--danger)]'
+                : 'border-(--border-light) hover:border-(--text-primary)/30',
+              className,
+            )}
+          >
+            <BaseSelect.Value
+              className="flex-1 text-left data-[placeholder]:text-(--text-muted)"
+              placeholder={placeholder}
+            />
+            <BaseSelect.Icon className="shrink-0 text-(--text-muted)">
+              <ChevronDown size={14} />
+            </BaseSelect.Icon>
+          </BaseSelect.Trigger>
+
+          <BaseSelect.Portal>
+            <BaseSelect.Positioner sideOffset={4} className="z-50">
+              <BaseSelect.ScrollUpArrow className="flex h-5 w-full cursor-default items-center justify-center rounded-t-md bg-(--bg-primary) text-(--text-muted)">
+                <ChevronUp size={12} />
+              </BaseSelect.ScrollUpArrow>
+
+              <BaseSelect.Popup
+                className={clsx(
+                  'min-w-[var(--anchor-width)] overflow-auto rounded-lg border border-(--border-light) bg-(--bg-primary)',
+                  'py-1 shadow-lg',
+                )}
+              >
+                {groups
+                  ? groups.map((group) => (
+                      <BaseSelect.Group key={group.label}>
+                        <BaseSelect.GroupLabel className="px-3 py-1 text-[12px] font-semibold text-(--text-muted) uppercase tracking-wider">
+                          {group.label}
+                        </BaseSelect.GroupLabel>
+                        {group.options.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </BaseSelect.Group>
+                    ))
+                  : options?.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+              </BaseSelect.Popup>
+
+              <BaseSelect.ScrollDownArrow className="flex h-5 w-full cursor-default items-center justify-center rounded-b-md bg-(--bg-primary) text-(--text-muted)">
+                <ChevronDown size={12} />
+              </BaseSelect.ScrollDownArrow>
+            </BaseSelect.Positioner>
+          </BaseSelect.Portal>
+        </BaseSelect.Root>
+
+        {error && (
+          <span className="flex items-center gap-1 text-[12px] font-medium leading-tight text-(--danger)">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
+
+Select.displayName = 'Select'
+
+// Internal SelectItem helper
+function SelectItem({
+  value,
+  disabled,
+  children,
+}: {
+  value: string
+  disabled?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <BaseSelect.Item value={value} disabled={disabled} className={itemClass}>
+      <BaseSelect.ItemIndicator className="absolute right-3 flex items-center text-(--accent)">
+        <Check size={14} />
+      </BaseSelect.ItemIndicator>
+      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>
+    </BaseSelect.Item>
+  )
+}

package/src/components/Switch.tsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import { Switch as BaseSwitch } from '@base-ui/react'
+import clsx from 'clsx'
+
+export type SwitchSize = 'sm' | 'md' | 'lg'
+
+export interface SwitchProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+  required?: boolean
+  size?: SwitchSize
+  /** Label text shown next to the switch */
+  label?: string
+  /** Helper text shown below the label */
+  description?: string
+  name?: string
+  value?: string
+  id?: string
+  className?: string
+}
+
+const rootSizes: Record<SwitchSize, string> = {
+  sm: 'h-4 w-7',
+  md: 'h-5 w-9',
+  lg: 'h-6 w-11',
+}
+
+const thumbSizes: Record<SwitchSize, string> = {
+  sm: 'h-3 w-3 data-[checked]:translate-x-3',
+  md: 'h-3.5 w-3.5 data-[checked]:translate-x-4',
+  lg: 'h-4.5 w-4.5 data-[checked]:translate-x-5',
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled,
+      required,
+      size = 'md',
+      label,
+      description,
+      name,
+      value,
+      id,
+      className,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId()
+    const switchId = id ?? generatedId
+
+    const switchEl = (
+      <BaseSwitch.Root
+        ref={ref}
+        id={switchId}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        required={required}
+        name={name}
+        value={value}
+        className={clsx(
+          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5',
+          'border-2 border-transparent outline-none',
+          'transition-colors duration-200',
+          'bg-(--border-gray)',
+          'data-[checked]:bg-(--accent)',
+          'focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          rootSizes[size],
+          className,
+        )}
+      >
+        <BaseSwitch.Thumb
+          className={clsx(
+            'block rounded-full bg-white shadow-sm',
+            'transition-transform duration-200',
+            'translate-x-0',
+            thumbSizes[size],
+          )}
+        />
+      </BaseSwitch.Root>
+    )
+
+    if (!label) return switchEl
+
+    return (
+      <div className="flex items-start gap-3">
+        {switchEl}
+        <div className="flex flex-col">
+          <label
+            htmlFor={switchId}
+            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>
+    )
+  },
+)
+
+Switch.displayName = 'Switch'

package/src/components/Tabs.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { Tabs as BaseTabs } from '@base-ui/react'
+import clsx from 'clsx'
+
+// ── Tabs Root ─────────────────────────────────────────────────────────────────
+
+export interface TabsProps {
+  children: React.ReactNode
+  value?: string | number
+  defaultValue?: string | number
+  onValueChange?: (value: string | number) => void
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ children, value, defaultValue, onValueChange, orientation = 'horizontal', className }, ref) => {
+    return (
+      <BaseTabs.Root
+        ref={ref}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        orientation={orientation}
+        className={clsx(
+          'flex',
+          orientation === 'horizontal' ? 'flex-col' : 'flex-row gap-4',
+          className,
+        )}
+      >
+        {children}
+      </BaseTabs.Root>
+    )
+  },
+)
+
+Tabs.displayName = 'Tabs'
+
+// ── TabList ───────────────────────────────────────────────────────────────────
+
+export interface TabListProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+  ({ children, className }, ref) => {
+    return (
+      <BaseTabs.List
+        ref={ref}
+        className={clsx(
+          'relative flex border-b border-(--border-light)',
+          className,
+        )}
+      >
+        {children}
+        <BaseTabs.Indicator
+          className={clsx(
+            'absolute bottom-0 left-0 h-0.5 bg-(--accent)',
+            'transition-[left,width] duration-200 ease-out',
+          )}
+        />
+      </BaseTabs.List>
+    )
+  },
+)
+
+TabList.displayName = 'TabList'
+
+// ── Tab ───────────────────────────────────────────────────────────────────────
+
+export interface TabProps {
+  children: React.ReactNode
+  value: string | number
+  disabled?: boolean
+  className?: string
+}
+
+export const Tab = React.forwardRef<HTMLButtonElement, TabProps>(
+  ({ children, value, disabled, className }, ref) => {
+    return (
+      <BaseTabs.Tab
+        ref={ref}
+        value={value}
+        disabled={disabled}
+        className={clsx(
+          'relative px-4 py-2.5 text-[14px] font-medium outline-none',
+          'text-(--text-secondary) transition-colors',
+          'hover:text-(--text-primary)',
+          'data-[selected]:text-(--accent)',
+          'focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-inset',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+      >
+        {children}
+      </BaseTabs.Tab>
+    )
+  },
+)
+
+Tab.displayName = 'Tab'
+
+// ── TabPanel ──────────────────────────────────────────────────────────────────
+
+export interface TabPanelProps {
+  children: React.ReactNode
+  value: string | number
+  keepMounted?: boolean
+  className?: string
+}
+
+export const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(
+  ({ children, value, keepMounted = false, className }, ref) => {
+    return (
+      <BaseTabs.Panel
+        ref={ref}
+        value={value}
+        keepMounted={keepMounted}
+        className={clsx('pt-4 outline-none', className)}
+      >
+        {children}
+      </BaseTabs.Panel>
+    )
+  },
+)
+
+TabPanel.displayName = 'TabPanel'

package/src/components/Toast.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { Toast as BaseToast } from '@base-ui/react'
+import clsx from 'clsx'
+import { X, Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error'
+
+// ── ToastProvider ─────────────────────────────────────────────────────────────
+
+export interface ToastProviderProps {
+  children: React.ReactNode
+  timeout?: number
+  limit?: number
+}
+
+/**
+ * Wrap your app (or part of it) with `ToastProvider` to enable toasts.
+ * Then use the `useToast()` hook inside to add toasts.
+ */
+export const ToastProvider: React.FC<ToastProviderProps> = ({
+  children,
+  timeout = 5000,
+  limit = 5,
+}) => {
+  return (
+    <BaseToast.Provider timeout={timeout} limit={limit}>
+      {children}
+      <ToastViewport />
+    </BaseToast.Provider>
+  )
+}
+
+// ── useToast hook ─────────────────────────────────────────────────────────────
+
+export interface ToastOptions {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  type?: ToastType
+  timeout?: number
+  /** Action button rendered inside the toast */
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+/**
+ * Hook to imperatively add, close and update toasts.
+ *
+ * Must be used inside `<ToastProvider>`.
+ */
+export function useToast() {
+  const manager = BaseToast.useToastManager()
+  return {
+    toast: (options: ToastOptions) =>
+      manager.add({
+        title: options.title,
+        description: options.description,
+        type: options.type ?? 'default',
+        timeout: options.timeout,
+        actionProps: options.action
+          ? { children: options.action.label, onClick: options.action.onClick }
+          : undefined,
+      }),
+    dismiss: manager.close,
+  }
+}
+
+// ── ToastViewport (internal) ──────────────────────────────────────────────────
+
+function ToastViewport() {
+  const { toasts } = BaseToast.useToastManager()
+
+  return (
+    <BaseToast.Viewport className="fixed bottom-4 right-4 z-[100] flex w-80 flex-col-reverse gap-2 outline-none">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} />
+      ))}
+    </BaseToast.Viewport>
+  )
+}
+
+// ── ToastItem (internal) ──────────────────────────────────────────────────────
+
+const typeStyles: Record<ToastType, { icon: React.ReactNode; color: string }> = {
+  default: { icon: null, color: 'border-(--border-light)' },
+  info: {
+    icon: <Info size={16} className="shrink-0 text-blue-500" />,
+    color: 'border-blue-200 dark:border-blue-900',
+  },
+  success: {
+    icon: <CheckCircle size={16} className="shrink-0 text-(--slack-green)" />,
+    color: 'border-green-200 dark:border-green-900',
+  },
+  warning: {
+    icon: <AlertTriangle size={16} className="shrink-0 text-amber-500" />,
+    color: 'border-amber-200 dark:border-amber-900',
+  },
+  error: {
+    icon: <XCircle size={16} className="shrink-0 text-(--danger)" />,
+    color: 'border-red-200 dark:border-red-900',
+  },
+}
+
+function ToastItem({ toast }: { toast: BaseToast.Root.ToastObject }) {
+  const type = (toast.type ?? 'default') as ToastType
+  const style = typeStyles[type] ?? typeStyles.default
+
+  return (
+    <BaseToast.Root
+      toast={toast}
+      className={clsx(
+        'flex w-full items-start gap-3 rounded-lg border bg-(--bg-primary) px-4 py-3 shadow-lg',
+        style.color,
+        'data-[ending]:animate-[fade-out_150ms_ease-in] data-[starting]:animate-[zoom-in_150ms_ease-out]',
+      )}
+    >
+      {style.icon && <div className="pt-0.5">{style.icon}</div>}
+
+      <div className="flex flex-1 flex-col gap-0.5 min-w-0">
+        {toast.title && (
+          <BaseToast.Title className="text-[14px] font-semibold text-(--text-primary) leading-snug">
+            {toast.title}
+          </BaseToast.Title>
+        )}
+        {toast.description && (
+          <BaseToast.Description className="text-[13px] text-(--text-secondary) leading-snug">
+            {toast.description}
+          </BaseToast.Description>
+        )}
+        {toast.actionProps && (
+          <button
+            {...toast.actionProps}
+            className={clsx(
+              'mt-1.5 self-start text-[13px] font-semibold text-(--accent) hover:underline outline-none',
+              'focus-visible:ring-1 focus-visible:ring-(--focus-ring) rounded',
+            )}
+          />
+        )}
+      </div>
+
+      <BaseToast.Close className="shrink-0 rounded p-0.5 text-(--text-muted) hover:text-(--text-primary) hover:bg-(--bg-hover) outline-none focus-visible:ring-1 focus-visible:ring-(--focus-ring) transition-colors">
+        <X size={14} />
+      </BaseToast.Close>
+    </BaseToast.Root>
+  )
+}