@fayz-ai/ui 0.9.0 → 0.10.1

package/src/primitives/search-select.tsx

@@ -1,314 +0,0 @@
-import * as React from 'react'
-import { Search, X, ChevronDown, Loader2 } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface SearchSelectOption {
-  id: string
-  label: string
-  subtitle?: string
-  icon?: React.ReactNode
-  group?: string
-  disabled?: boolean
-  data?: any
-}
-
-export interface SearchSelectProps {
-  /** Currently selected option ID */
-  value?: string
-  /** Display text when a value is selected (overrides auto-lookup) */
-  displayValue?: string
-  /** Callback when an option is selected */
-  onChange: (id: string, option: SearchSelectOption | null) => void
-  /** Search function — async or sync. Called with debounced query. */
-  onSearch: (query: string) => Promise<SearchSelectOption[]> | SearchSelectOption[]
-  /** Placeholder text */
-  placeholder?: string
-  /** Label above the input */
-  label?: string
-  /** Required field indicator */
-  required?: boolean
-  /** Debounce delay in ms (default: 250) */
-  debounce?: number
-  /** Minimum characters before searching (default: 1) */
-  minChars?: number
-  /** Show a "Create new" action at the bottom */
-  allowCreate?: boolean
-  /** Label for create action (default: "Add") */
-  createLabel?: string
-  /** Callback when create is clicked. Can be async — component shows optimistic state while waiting. */
-  onCreate?: (query: string) => void | Promise<void>
-  /** Custom render for each option */
-  renderOption?: (option: SearchSelectOption) => React.ReactNode
-  /** Load initial results when dropdown opens (calls onSearch('')). Default
-   *  true — clicking lists options before any typing; pass false to require
-   *  a query first (e.g. very large datasets with no cheap top-N). */
-  loadOnOpen?: boolean
-  /** Additional className for the container */
-  className?: string
-  /** Disabled state */
-  disabled?: boolean
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function SearchSelect({
-  value,
-  displayValue,
-  onChange,
-  onSearch,
-  placeholder = 'Search...',
-  label,
-  required,
-  debounce = 250,
-  minChars = 1,
-  allowCreate,
-  createLabel = 'Add',
-  onCreate,
-  renderOption,
-  loadOnOpen = true,
-  className,
-  disabled,
-}: SearchSelectProps) {
-  const [open, setOpen] = React.useState(false)
-  const [query, setQuery] = React.useState('')
-  const [results, setResults] = React.useState<SearchSelectOption[]>([])
-  const [loading, setLoading] = React.useState(false)
-  const [creating, setCreating] = React.useState(false)
-  const [selectedLabel, setSelectedLabel] = React.useState(displayValue ?? '')
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>()
-
-  // Close on outside click
-  React.useEffect(() => {
-    function handler(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [])
-
-  // Update display when value/displayValue changes externally
-  React.useEffect(() => {
-    if (displayValue !== undefined) setSelectedLabel(displayValue)
-  }, [displayValue])
-
-  // Load initial results when dropdown opens with empty query
-  React.useEffect(() => {
-    if (open && loadOnOpen && query.length === 0 && results.length === 0 && !loading) {
-      setLoading(true)
-      Promise.resolve(onSearch('')).then(setResults).catch(() => setResults([])).finally(() => setLoading(false))
-    }
-  }, [open, loadOnOpen])
-
-  function handleQueryChange(q: string) {
-    setQuery(q)
-    if (timerRef.current) clearTimeout(timerRef.current)
-
-    if (q.length < minChars && !(loadOnOpen && q.length === 0)) {
-      setResults([])
-      setLoading(false)
-      return
-    }
-
-    setLoading(true)
-    timerRef.current = setTimeout(async () => {
-      try {
-        const res = await onSearch(q)
-        setResults(res)
-      } catch {
-        setResults([])
-      }
-      setLoading(false)
-    }, debounce)
-  }
-
-  function handleSelect(option: SearchSelectOption) {
-    onChange(option.id, option)
-    setSelectedLabel(option.label)
-    setOpen(false)
-    setQuery('')
-    setResults([])
-  }
-
-  function handleClear() {
-    onChange('', null)
-    setSelectedLabel('')
-    setQuery('')
-    setResults([])
-  }
-
-  async function handleCreate(name: string) {
-    if (!onCreate) return
-    setCreating(true)
-    setSelectedLabel(name)
-    setOpen(false)
-    setQuery('')
-    setResults([])
-    try {
-      await onCreate(name)
-    } finally {
-      setCreating(false)
-    }
-  }
-
-  function handleOpen() {
-    if (disabled || creating) return
-    setOpen(true)
-    setQuery('')
-    // Stale results from a previous typed query would render for the empty
-    // query now that the dropdown shows immediately — drop them so the
-    // loadOnOpen effect refetches the initial listing.
-    setResults([])
-    setTimeout(() => inputRef.current?.focus(), 0)
-  }
-
-  // Group results
-  const groups = React.useMemo(() => {
-    const map = new Map<string, SearchSelectOption[]>()
-    for (const opt of results) {
-      const group = opt.group ?? ''
-      if (!map.has(group)) map.set(group, [])
-      map.get(group)!.push(opt)
-    }
-    return map
-  }, [results])
-
-  const hasValue = !!value && !!selectedLabel
-  // With loadOnOpen the dropdown must show for the EMPTY query too — gating it
-  // on minChars silently hid the initial listing loadOnOpen had just fetched.
-  const showDropdown = open && (query.length >= minChars || loadOnOpen)
-
-  return (
-    <div ref={containerRef} className={cn('relative', className)}>
-      {label && (
-        <label className="text-xs font-medium text-muted-foreground">
-          {label}{required && ' *'}
-        </label>
-      )}
-
-      {/* Trigger — shows selected value or search input */}
-      <div
-        className={cn(
-          'mt-1 flex items-center gap-2 rounded-lg border bg-background transition-colors',
-          open ? 'ring-2 ring-primary/20' : 'hover:bg-muted/30',
-          disabled && 'opacity-50 cursor-not-allowed',
-        )}
-      >
-        <Search className="h-3.5 w-3.5 text-muted-foreground ml-3 shrink-0" />
-        {open ? (
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={(e) => handleQueryChange(e.target.value)}
-            placeholder={placeholder}
-            className="flex-1 bg-transparent py-2 pr-3 text-sm outline-none"
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') setOpen(false)
-            }}
-          />
-        ) : (
-          <button
-            type="button"
-            onClick={handleOpen}
-            className="flex-1 text-left py-2 pr-3 text-sm outline-none"
-            disabled={disabled || creating}
-          >
-            {creating ? (
-              <span className="flex items-center gap-1.5 text-muted-foreground">
-                <Loader2 className="h-3 w-3 animate-spin" />
-                <span className="font-medium text-foreground">{selectedLabel}</span>
-              </span>
-            ) : hasValue ? (
-              <span className="font-medium">{selectedLabel}</span>
-            ) : (
-              <span className="text-muted-foreground">{placeholder}</span>
-            )}
-          </button>
-        )}
-        {hasValue && !open && (
-          <button onClick={handleClear} className="pr-3 text-muted-foreground hover:text-foreground">
-            <X className="h-3 w-3" />
-          </button>
-        )}
-        {!hasValue && !open && (
-          <ChevronDown className="h-3 w-3 text-muted-foreground mr-3 shrink-0" />
-        )}
-      </div>
-
-      {/* Dropdown */}
-      {showDropdown && (
-        <div className="fayz-glass-surface absolute top-full left-0 right-0 z-50 mt-1 rounded-lg border bg-popover shadow-lg overflow-hidden">
-          {loading ? (
-            <div className="flex items-center justify-center gap-2 px-4 py-6 text-xs text-muted-foreground">
-              <Loader2 className="h-3.5 w-3.5 animate-spin" /> Searching...
-            </div>
-          ) : results.length === 0 ? (
-            <div className="px-4 py-4 text-center">
-              <p className="text-xs text-muted-foreground">{query ? `No results for "${query}"` : 'No results'}</p>
-              {allowCreate && onCreate && (
-                <button
-                  onClick={() => handleCreate(query)}
-                  className="mt-2 text-xs text-primary hover:underline"
-                >
-                  + {createLabel} "{query}"
-                </button>
-              )}
-            </div>
-          ) : (
-            <div className="max-h-64 overflow-auto py-1">
-              {[...groups.entries()].map(([group, options]) => (
-                <React.Fragment key={group}>
-                  {group && (
-                    <div className="sticky top-0 bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                      {group}
-                    </div>
-                  )}
-                  {options.map((opt) => (
-                    <button
-                      key={opt.id}
-                      onClick={() => handleSelect(opt)}
-                      disabled={opt.disabled}
-                      className={cn(
-                        'w-full text-left px-3 py-2 hover:bg-muted/50 transition-colors flex items-center gap-2.5',
-                        opt.disabled && 'opacity-40 cursor-not-allowed',
-                        opt.id === value && 'bg-muted/30',
-                      )}
-                    >
-                      {renderOption ? renderOption(opt) : (
-                        <>
-                          {opt.icon}
-                          <div className="min-w-0 flex-1">
-                            <p className="text-sm truncate">{opt.label}</p>
-                            {opt.subtitle && <p className="text-[10px] text-muted-foreground truncate">{opt.subtitle}</p>}
-                          </div>
-                        </>
-                      )}
-                    </button>
-                  ))}
-                </React.Fragment>
-              ))}
-              {allowCreate && onCreate && (
-                <button
-                  onClick={() => handleCreate(query)}
-                  className="w-full text-left px-3 py-2 text-xs text-primary hover:bg-muted/50 transition-colors border-t"
-                >
-                  + {createLabel} "{query}"
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/primitives/segmented-control.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-
-export interface SegmentedOption<T extends string = string> {
-  value: T
-  label: React.ReactNode
-}
-
-export interface SegmentedControlProps<T extends string = string> {
-  /** Options as plain values (label = value) or `{ value, label }` objects. */
-  options: ReadonlyArray<T | SegmentedOption<T>>
-  value: T
-  onChange: (value: T) => void
-  /** Matches the equivalent Button heights: sm = 26px, md = 30px. */
-  size?: 'sm' | 'md'
-  className?: string
-  'aria-label'?: string
-}
-
-const SIZE: Record<'sm' | 'md', { container: string; segment: string }> = {
-  sm: { container: 'h-[26px]', segment: 'px-2.5 text-xs' },
-  md: { container: 'h-[30px]', segment: 'px-3 text-sm' },
-}
-
-/**
- * Canonical segmented (pill) control — same chrome as Button (rounded-button
- * radius, hairline border + shadow-button bevel on a card surface). Use this for
- * any 7d/30d/90d-style toggle so every surface stays visually consistent instead
- * of hand-rolling a styled toggle group.
- */
-export function SegmentedControl<T extends string = string>({
-  options, value, onChange, size = 'sm', className, ...rest
-}: SegmentedControlProps<T>) {
-  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) as SegmentedOption<T>[]
-  return (
-    <div
-      role="tablist"
-      aria-label={rest['aria-label']}
-      className={cn(
-        'inline-flex items-center rounded-button border border-border bg-card p-0.5 shadow-button',
-        SIZE[size].container,
-        className,
-      )}
-    >
-      {items.map((item) => {
-        const active = item.value === value
-        return (
-          <button
-            key={item.value}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            onClick={() => onChange(item.value)}
-            className={cn(
-              'flex h-full items-center rounded-button font-semibold transition-colors',
-              SIZE[size].segment,
-              active ? 'bg-foreground text-background' : 'text-muted-foreground hover:bg-muted/60',
-            )}
-          >
-            {item.label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}

package/src/primitives/select.tsx

@@ -1,157 +0,0 @@
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { ChevronDown, ChevronUp, Check } from 'lucide-react'
-
-import { cn } from '../utils/cn'
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-input border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fayz-glass-surface relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-card border bg-popover text-popover-foreground shadow-md',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-muted focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/src/primitives/separator.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '../utils/cn'
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }