@lovett/ui 0.0.1

package/src/tag-chip-input.tsx

@@ -0,0 +1,394 @@
+/**
+ * TagChipInput — type-to-create chips with autocomplete.
+ *
+ * Behavior:
+ *   • Comma or Enter commits the current draft into a chip.
+ *   • Backspace on an empty input removes the last chip.
+ *   • Autocomplete suggestions surface as a popover; filtered by the
+ *     current draft (case-insensitive). Click or arrow-keys + Enter to
+ *     pick a suggestion.
+ *   • Tags are case-insensitively deduped; the displayed label preserves
+ *     the user's first casing per session.
+ *   • Submitting a new label (not in suggestions) creates it inline.
+ *
+ * Token discipline:
+ *   • Chips inherit Badge tones via tokens.
+ *   • Popover uses --popover / --popover-foreground / --shadow-lg.
+ *   • No hex, no inline SVG outside Lucide.
+ *
+ * First consumer: Keywords lens (NewSetPage, NewGroupPage). Generic —
+ * promote anywhere a multi-tag input is needed.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { Plus, X } from 'lucide-react'
+import { cn } from './lib/utils'
+
+export interface TagChipInputProps {
+  /** Current list of tag labels. */
+  value: string[]
+  onChange: (next: string[]) => void
+  /** Existing labels (across all items in scope) used for autocomplete. */
+  suggestions?: string[]
+  placeholder?: string
+  /** Hard cap on the number of chips. When reached, the input becomes
+   *  disabled with a "max reached" hint. */
+  max?: number
+  /** Maximum length of any single tag. Defaults to 60. */
+  maxLength?: number
+  /** Disable input + interactions. */
+  disabled?: boolean
+  /** id attached to the text input — for label-for binding. */
+  id?: string
+  /** Apply error styling. */
+  error?: boolean
+  className?: string
+}
+
+function normalize(label: string): string {
+  return label.trim().toLowerCase()
+}
+
+export function TagChipInput({
+  value,
+  onChange,
+  suggestions = [],
+  placeholder = 'Add a tag…',
+  max,
+  maxLength = 60,
+  disabled,
+  id,
+  error,
+  className,
+}: TagChipInputProps) {
+  const [draft, setDraft] = useState('')
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
+  const generatedId = useId()
+  const popoverId = `tag-chip-${generatedId.replace(/:/g, '')}`
+
+  const atMax = typeof max === 'number' && value.length >= max
+  const isDisabled = disabled || atMax
+
+  // Filter suggestions: not already in value, matches draft (substring,
+  // case-insensitive), sorted alpha. Limited to 8 to keep the popover
+  // tight.
+  const filteredSuggestions = useMemo(() => {
+    const selected = new Set(value.map(normalize))
+    const needle = normalize(draft)
+    return suggestions
+      .filter((s) => {
+        const n = normalize(s)
+        if (selected.has(n)) return false
+        if (needle && !n.includes(needle)) return false
+        return true
+      })
+      .slice(0, 8)
+  }, [suggestions, value, draft])
+
+  // Show the "create" affordance when the draft is non-empty and isn't
+  // already a chip / suggestion (case-insensitive).
+  const canCreate = useMemo(() => {
+    const needle = normalize(draft)
+    if (!needle) return false
+    if (value.some((v) => normalize(v) === needle)) return false
+    if (suggestions.some((s) => normalize(s) === needle)) return false
+    return true
+  }, [draft, value, suggestions])
+
+  const optionCount = filteredSuggestions.length + (canCreate ? 1 : 0)
+
+  // Clamp activeIndex when the option list changes.
+  useEffect(() => {
+    if (activeIndex >= optionCount) {
+      setActiveIndex(Math.max(0, optionCount - 1))
+    }
+  }, [optionCount, activeIndex])
+
+  const addTag = useCallback(
+    (label: string) => {
+      const cleaned = label.trim()
+      if (!cleaned) return
+      const exists = value.some((v) => normalize(v) === normalize(cleaned))
+      if (exists) {
+        setDraft('')
+        return
+      }
+      if (typeof max === 'number' && value.length >= max) return
+      onChange([...value, cleaned])
+      setDraft('')
+      setActiveIndex(0)
+    },
+    [value, onChange, max],
+  )
+
+  const removeAt = useCallback(
+    (index: number) => {
+      const next = value.filter((_, i) => i !== index)
+      onChange(next)
+    },
+    [value, onChange],
+  )
+
+  const commitFromKeyboard = useCallback(() => {
+    if (!open || optionCount === 0) {
+      // Plain submit of whatever's in the draft.
+      if (draft.trim()) addTag(draft)
+      return
+    }
+    if (activeIndex < filteredSuggestions.length) {
+      addTag(filteredSuggestions[activeIndex]!)
+    } else {
+      addTag(draft)
+    }
+  }, [open, optionCount, activeIndex, filteredSuggestions, draft, addTag])
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setDraft(event.target.value)
+    setOpen(true)
+    setActiveIndex(0)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      commitFromKeyboard()
+      return
+    }
+    if (event.key === ',') {
+      event.preventDefault()
+      if (draft.trim()) addTag(draft)
+      return
+    }
+    if (event.key === 'Backspace' && draft.length === 0 && value.length > 0) {
+      event.preventDefault()
+      removeAt(value.length - 1)
+      return
+    }
+    if (event.key === 'ArrowDown' && optionCount > 0) {
+      event.preventDefault()
+      setOpen(true)
+      setActiveIndex((i) => (i + 1) % optionCount)
+      return
+    }
+    if (event.key === 'ArrowUp' && optionCount > 0) {
+      event.preventDefault()
+      setOpen(true)
+      setActiveIndex((i) => (i - 1 + optionCount) % optionCount)
+      return
+    }
+    if (event.key === 'Escape') {
+      setOpen(false)
+      return
+    }
+  }
+
+  // Outside-click + Esc dismissal of the popover.
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null
+      if (!target) return
+      if (wrapperRef.current?.contains(target)) return
+      if (popoverRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
+  // Position the popover under the wrapper.
+  const [popoverPos, setPopoverPos] = useState<{
+    left: number
+    top: number
+    width: number
+  } | null>(null)
+  useEffect(() => {
+    if (!open) {
+      setPopoverPos(null)
+      return
+    }
+    const measure = () => {
+      const wrap = wrapperRef.current
+      if (!wrap) return
+      const rect = wrap.getBoundingClientRect()
+      setPopoverPos({
+        left: rect.left,
+        top: rect.bottom + 4,
+        width: rect.width,
+      })
+    }
+    measure()
+    window.addEventListener('resize', measure)
+    window.addEventListener('scroll', measure, true)
+    return () => {
+      window.removeEventListener('resize', measure)
+      window.removeEventListener('scroll', measure, true)
+    }
+  }, [open])
+
+  return (
+    <>
+      <div
+        ref={wrapperRef}
+        className={cn(
+          'flex flex-wrap items-center gap-1.5 px-2 py-1.5 min-h-10 cursor-text',
+          'border transition-colors',
+          error
+            ? 'border-[rgb(var(--ring-error))]'
+            : 'border-[rgb(var(--border))] focus-within:border-[rgb(var(--accent))]',
+          isDisabled && 'opacity-60 cursor-not-allowed',
+          className,
+        )}
+        style={{
+          background: 'rgb(var(--bg-input))',
+          borderRadius: 'var(--radius-sm)',
+        }}
+        onClick={() => {
+          if (!isDisabled) inputRef.current?.focus()
+        }}
+      >
+        {value.map((label, index) => (
+          <span
+            key={`${label}-${index}`}
+            className="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 text-[12px] font-medium"
+            style={{
+              background: 'rgb(var(--surface-overlay))',
+              color: 'rgb(var(--foreground))',
+              borderRadius: 'var(--radius-xs)',
+            }}
+          >
+            <span className="truncate max-w-[12rem]">{label}</span>
+            <button
+              type="button"
+              aria-label={`Remove tag ${label}`}
+              onClick={(e) => {
+                e.stopPropagation()
+                removeAt(index)
+              }}
+              className="inline-flex h-4 w-4 items-center justify-center rounded-[var(--radius-xs)] transition-colors hover:bg-[rgb(var(--surface-overlay-strong))]"
+              style={{ color: 'rgb(var(--text-muted))' }}
+            >
+              <X className="h-3 w-3" aria-hidden="true" />
+            </button>
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          type="text"
+          value={draft}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setOpen(true)}
+          placeholder={value.length === 0 ? placeholder : ''}
+          disabled={isDisabled}
+          maxLength={maxLength}
+          autoComplete="off"
+          aria-autocomplete="list"
+          aria-controls={open ? popoverId : undefined}
+          aria-expanded={open}
+          className="flex-1 min-w-[6rem] bg-transparent text-[13px] outline-none disabled:cursor-not-allowed"
+          style={{ color: 'rgb(var(--foreground))' }}
+        />
+      </div>
+
+      {atMax && (
+        <p
+          className="text-[11px] mt-1"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          Maximum of {max} tags reached.
+        </p>
+      )}
+
+      {open && popoverPos && optionCount > 0 && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={popoverRef}
+              id={popoverId}
+              role="listbox"
+              className="fixed z-[100] p-1 overflow-y-auto max-h-64"
+              style={{
+                left: popoverPos.left,
+                top: popoverPos.top,
+                width: popoverPos.width,
+                background: 'rgb(var(--popover))',
+                color: 'rgb(var(--popover-foreground))',
+                border: '1px solid rgb(var(--border))',
+                borderRadius: 'var(--radius-md)',
+                boxShadow: 'var(--shadow-lg, 0 10px 32px rgba(0,0,0,0.18))',
+              }}
+            >
+              {filteredSuggestions.map((label, index) => {
+                const isActive = index === activeIndex
+                return (
+                  <button
+                    key={label}
+                    type="button"
+                    role="option"
+                    aria-selected={isActive}
+                    onClick={() => addTag(label)}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    className={cn(
+                      'w-full flex items-center gap-2 px-2 py-1.5 text-left text-[13px]',
+                      'rounded-[var(--radius-xs)] cursor-default',
+                      isActive
+                        ? 'bg-[rgb(var(--surface-overlay))]'
+                        : 'hover:bg-[rgb(var(--surface-overlay-soft))]',
+                    )}
+                    style={{ color: 'rgb(var(--foreground))' }}
+                  >
+                    <span className="truncate">{label}</span>
+                  </button>
+                )
+              })}
+              {canCreate && (
+                <button
+                  key="__create__"
+                  type="button"
+                  role="option"
+                  aria-selected={activeIndex === filteredSuggestions.length}
+                  onClick={() => addTag(draft)}
+                  onMouseEnter={() =>
+                    setActiveIndex(filteredSuggestions.length)
+                  }
+                  className={cn(
+                    'w-full flex items-center gap-2 px-2 py-1.5 text-left text-[13px]',
+                    'rounded-[var(--radius-xs)] cursor-default',
+                    activeIndex === filteredSuggestions.length
+                      ? 'bg-[rgb(var(--surface-overlay))]'
+                      : 'hover:bg-[rgb(var(--surface-overlay-soft))]',
+                  )}
+                  style={{ color: 'rgb(var(--foreground))' }}
+                >
+                  <Plus
+                    className="h-3.5 w-3.5 shrink-0"
+                    style={{ color: 'rgb(var(--text-muted))' }}
+                    aria-hidden="true"
+                  />
+                  <span className="truncate">
+                    Create &ldquo;{draft.trim()}&rdquo;
+                  </span>
+                </button>
+              )}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  )
+}

package/src/textarea.tsx

@@ -0,0 +1,39 @@
+/**
+ * Textarea — typed primitive in the .input-shell.textarea-shell variant.
+ * Auto-grows to content (resize: vertical), shares the same focus/error/
+ * disabled visuals as Input.
+ *
+ *   <Textarea
+ *     value={v}
+ *     onChange={e => setV(e.target.value)}
+ *     placeholder="Write something…"
+ *     rows={4}
+ *   />
+ */
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
+import { cn } from './lib/utils'
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean
+  /** Override classes on the .input-shell wrapper. */
+  shellClassName?: string
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { error, shellClassName, className, disabled, rows = 4, ...rest },
+  ref,
+) {
+  return (
+    <div
+      className={cn(
+        'input-shell',
+        'textarea-shell',
+        error && 'is-error',
+        disabled && 'is-disabled',
+        shellClassName,
+      )}
+    >
+      <textarea ref={ref} disabled={disabled} rows={rows} className={className} {...rest} />
+    </div>
+  )
+})

package/src/toast.tsx

@@ -0,0 +1,59 @@
+/**
+ * @lovett/ui — toast surface.
+ *
+ * Sonner is the toast provider; this module is a thin wrapper that
+ *  (a) re-exports Sonner's `toast` API verbatim, and
+ *  (b) exports a `<Toaster />` component pre-styled with @lovett/ui
+ *      tokens (--toast-bg, --toast-text, --toast-border).
+ *
+ * Per ADR-008 Decision 5, `@lovett/ui` does not own the toast
+ * primitive itself — it owns the wrapper. Apps mount one `<Toaster />`
+ * at the root and call `toast(...)` from anywhere.
+ *
+ *   import { Toaster, toast } from '@lovett/ui'
+ *
+ *   <Toaster />                       // mount once at app root
+ *   toast.success('Saved')            // call from anywhere
+ *   toast.error('Something went wrong')
+ *
+ * Sonner's full API is available via the re-exported `toast`.
+ */
+
+import { Toaster as SonnerToaster, toast } from 'sonner'
+import type { ComponentProps } from 'react'
+
+type SonnerToasterProps = ComponentProps<typeof SonnerToaster>
+
+/**
+ * Token-aware `<Toaster />` shell.
+ *
+ * Defaults: top-right, 12px gap, 5s duration. The toastOptions wire
+ * Sonner's internal CSS variables to our `--toast-*` tokens so toasts
+ * adopt the design system surface color, border, and text color.
+ *
+ * Apps can override any prop (position, duration, theme, etc.) by
+ * passing it through.
+ */
+export function Toaster(props: SonnerToasterProps) {
+  return (
+    <SonnerToaster
+      position="top-right"
+      gap={12}
+      duration={5000}
+      toastOptions={{
+        style: {
+          background: 'rgb(var(--toast-bg))',
+          color: 'rgb(var(--toast-text))',
+          border: '1px solid rgb(var(--toast-border))',
+          borderRadius: 'var(--radius-md)',
+          boxShadow: 'var(--shadow-lg)',
+          fontFamily: 'var(--font-sans)',
+          fontSize: '13px',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { toast }