@otfdashkit/ui 0.1.0

package/src/forms/step-form.tsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useState } from 'react'
+import { Button } from '../primitives/button'
+import { cn } from '../utils/cn'
+
+interface StepFormContextValue {
+  currentStep: number
+  totalSteps: number
+  steps: string[]
+  next: () => void
+  prev: () => void
+  isFirst: boolean
+  isLast: boolean
+}
+
+const StepFormContext = createContext<StepFormContextValue | null>(null)
+
+function useStepForm() {
+  const ctx = useContext(StepFormContext)
+  if (!ctx) throw new Error('useStepForm must be used within StepForm')
+  return ctx
+}
+
+export interface StepFormProps {
+  steps: string[]
+  onSubmit: () => void
+  children: React.ReactNode
+  className?: string
+}
+
+export function StepForm({ steps, onSubmit, children, className }: StepFormProps) {
+  const [currentStep, setCurrentStep] = useState(0)
+  const totalSteps = steps.length
+
+  const ctx: StepFormContextValue = {
+    currentStep,
+    totalSteps,
+    steps,
+    next: () => setCurrentStep(s => Math.min(s + 1, totalSteps - 1)),
+    prev: () => setCurrentStep(s => Math.max(s - 1, 0)),
+    isFirst: currentStep === 0,
+    isLast: currentStep === totalSteps - 1,
+  }
+
+  const childArray = React.Children.toArray(children)
+  const currentChild = childArray[currentStep]
+
+  return (
+    <StepFormContext.Provider value={ctx}>
+      <div className={cn('flex flex-col gap-6', className)}>
+        <StepIndicator steps={steps} currentStep={currentStep} />
+        <div>{currentChild}</div>
+        <StepFormNavigation onSubmit={onSubmit} />
+      </div>
+    </StepFormContext.Provider>
+  )
+}
+
+function StepIndicator({ steps, currentStep }: { steps: string[]; currentStep: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      {steps.map((label, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <div className={cn('h-px flex-1 bg-[hsl(var(--border))]', i <= currentStep && 'bg-[hsl(var(--primary))]')} />}
+          <div className="flex flex-col items-center gap-1">
+            <div className={cn(
+              'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium border transition-colors',
+              i < currentStep && 'bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
+              i === currentStep && 'border-[hsl(var(--primary))] text-[hsl(var(--primary))]',
+              i > currentStep && 'border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))]'
+            )}>{i + 1}</div>
+            <span className="hidden text-[10px] text-[hsl(var(--muted-foreground))] sm:block">{label}</span>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export interface StepFormStepProps {
+  title: string
+  description?: string
+  children: React.ReactNode
+}
+
+export function StepFormStep({ title, description, children }: StepFormStepProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h3 className="text-base font-semibold text-[hsl(var(--foreground))]">{title}</h3>
+        {description && <p className="text-sm text-[hsl(var(--muted-foreground))]">{description}</p>}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export interface StepFormNavigationProps {
+  onSubmit?: () => void
+  submitLabel?: string
+}
+
+export function StepFormNavigation({ onSubmit, submitLabel = 'Submit' }: StepFormNavigationProps) {
+  const { prev, next, isFirst, isLast } = useStepForm()
+  return (
+    <div className="flex justify-between">
+      <Button type="button" variant="outline" onClick={prev} disabled={isFirst}>Previous</Button>
+      {isLast
+        ? <Button type="button" onClick={onSubmit}>{submitLabel}</Button>
+        : <Button type="button" onClick={next}>Next</Button>
+      }
+    </div>
+  )
+}

package/src/forms/tags.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import React from 'react'
+import { X } from 'lucide-react'
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '../primitives/command'
+import { Badge } from '../primitives/badge'
+import { cn } from '../utils/cn'
+
+export type TagsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /** Controlled value. */
+  value?: string[]
+  /** Uncontrolled initial value. */
+  defaultValue?: string[]
+  /** Fires whenever the tag list changes. */
+  onValueChange?: (tags: string[]) => void
+  /** Optional autocomplete pool. */
+  suggestions?: string[]
+  placeholder?: string
+  /** Cap the total tags. When reached, the input is disabled. */
+  maxTags?: number
+  /** Return false or an error string to reject a tag. */
+  validate?: (tag: string) => boolean | string
+  /** Allow duplicate tags. Default false. */
+  allowDuplicates?: boolean
+  disabled?: boolean
+}
+
+/**
+ * Multi-select tag input with optional autocomplete.
+ * Enter / Comma / Tab commits the current input, Backspace on empty input removes the last tag.
+ */
+export const Tags = React.forwardRef<HTMLDivElement, TagsProps>(
+  (
+    {
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      suggestions,
+      placeholder = 'Add a tag…',
+      maxTags,
+      validate,
+      allowDuplicates = false,
+      disabled = false,
+      className,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = valueProp !== undefined
+    const [internal, setInternal] = React.useState<string[]>(defaultValue ?? [])
+    const tags = isControlled ? (valueProp as string[]) : internal
+
+    const [input, setInput] = React.useState('')
+    const [error, setError] = React.useState<string | null>(null)
+    const [focused, setFocused] = React.useState(false)
+    const [activeIndex, setActiveIndex] = React.useState(0)
+
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    const containerRef = React.useRef<HTMLDivElement>(null)
+
+    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)
+
+    const atMax = maxTags !== undefined && tags.length >= maxTags
+    const inputDisabled = disabled || atMax
+
+    const commit = React.useCallback(
+      (next: string[]) => {
+        if (!isControlled) setInternal(next)
+        onValueChange?.(next)
+      },
+      [isControlled, onValueChange],
+    )
+
+    const addTag = React.useCallback(
+      (raw: string) => {
+        const tag = raw.trim()
+        if (!tag) return false
+        if (atMax) return false
+        if (!allowDuplicates && tags.includes(tag)) {
+          setError('Tag already added')
+          return false
+        }
+        if (validate) {
+          const result = validate(tag)
+          if (result === false) {
+            setError('Invalid tag')
+            return false
+          }
+          if (typeof result === 'string') {
+            setError(result)
+            return false
+          }
+        }
+        commit([...tags, tag])
+        setError(null)
+        return true
+      },
+      [tags, allowDuplicates, validate, atMax, commit],
+    )
+
+    const removeTag = React.useCallback(
+      (index: number) => {
+        commit(tags.filter((_, i) => i !== index))
+        setError(null)
+      },
+      [tags, commit],
+    )
+
+    // Suggestion filtering
+    const filteredSuggestions = React.useMemo(() => {
+      if (!suggestions || !input.trim()) return []
+      const q = input.trim().toLowerCase()
+      return suggestions
+        .filter((s) => s.toLowerCase().includes(q))
+        .filter((s) => allowDuplicates || !tags.includes(s))
+        .slice(0, 8)
+    }, [suggestions, input, tags, allowDuplicates])
+
+    const showPopover = focused && !inputDisabled && filteredSuggestions.length > 0
+
+    React.useEffect(() => {
+      if (activeIndex >= filteredSuggestions.length) setActiveIndex(0)
+    }, [filteredSuggestions.length, activeIndex])
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
+        if (showPopover && e.key !== 'Tab') {
+          e.preventDefault()
+          const picked = filteredSuggestions[activeIndex]
+          if (picked && addTag(picked)) setInput('')
+          return
+        }
+        if (input.trim()) {
+          e.preventDefault()
+          if (addTag(input)) setInput('')
+        }
+      } else if (e.key === 'Backspace' && !input && tags.length > 0) {
+        e.preventDefault()
+        removeTag(tags.length - 1)
+      } else if (e.key === 'ArrowDown' && showPopover) {
+        e.preventDefault()
+        setActiveIndex((i) => (i + 1) % filteredSuggestions.length)
+      } else if (e.key === 'ArrowUp' && showPopover) {
+        e.preventDefault()
+        setActiveIndex(
+          (i) => (i - 1 + filteredSuggestions.length) % filteredSuggestions.length,
+        )
+      } else if (e.key === 'Escape' && showPopover) {
+        e.preventDefault()
+        setFocused(false)
+        inputRef.current?.blur()
+      }
+    }
+
+    const handleContainerClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
+      onClick?.(e)
+      if (!disabled) inputRef.current?.focus()
+    }
+
+    return (
+      <div className={cn('relative w-full', className)}>
+        <div
+          ref={containerRef}
+          onClick={handleContainerClick}
+          data-slot="tags"
+          data-disabled={disabled || undefined}
+          className={cn(
+            'flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1.5 text-sm shadow-sm transition-colors',
+            'focus-within:outline-none focus-within:ring-2 focus-within:ring-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            error && 'border-destructive focus-within:ring-destructive',
+          )}
+          {...props}
+        >
+          {tags.map((tag, i) => (
+            <Badge
+              key={`${tag}-${i}`}
+              variant="secondary"
+              className="gap-1 px-2 py-0.5 font-medium"
+            >
+              <span className="leading-none">{tag}</span>
+              {!disabled && (
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    removeTag(i)
+                  }}
+                  className={cn(
+                    'inline-flex h-3.5 w-3.5 items-center justify-center rounded-full text-muted-foreground transition-colors',
+                    'hover:bg-foreground/10 hover:text-foreground',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  )}
+                  aria-label={`Remove ${tag}`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </Badge>
+          ))}
+          <input
+            ref={inputRef}
+            type="text"
+            value={input}
+            disabled={inputDisabled}
+            placeholder={tags.length === 0 ? placeholder : undefined}
+            onChange={(e) => {
+              setInput(e.target.value)
+              if (error) setError(null)
+            }}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => {
+              // Delay to allow click on suggestion
+              window.setTimeout(() => setFocused(false), 120)
+            }}
+            className={cn(
+              'flex-1 min-w-[80px] bg-transparent py-0.5 text-sm outline-none',
+              'placeholder:text-muted-foreground',
+              'disabled:cursor-not-allowed',
+            )}
+            aria-label="Add tag"
+            aria-invalid={error ? true : undefined}
+          />
+        </div>
+
+        {error && (
+          <p className="mt-1 text-xs text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+
+        {showPopover && (
+          <div
+            className={cn(
+              'absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',
+            )}
+          >
+            <Command shouldFilter={false}>
+              <CommandList className="max-h-56">
+                <CommandEmpty>No matches.</CommandEmpty>
+                <CommandGroup>
+                  {filteredSuggestions.map((s, i) => (
+                    <CommandItem
+                      key={s}
+                      value={s}
+                      data-selected={i === activeIndex || undefined}
+                      onMouseEnter={() => setActiveIndex(i)}
+                      onSelect={() => {
+                        if (addTag(s)) {
+                          setInput('')
+                          inputRef.current?.focus()
+                        }
+                      }}
+                    >
+                      {s}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+Tags.displayName = 'Tags'

package/src/forms/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../../utils/cn'

package/src/headers/ScrollHeader.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+
+export interface ScrollHeaderProps {
+  /** Title shown large when at top, shrinks on scroll */
+  title: React.ReactNode
+  /** Optional subtitle / description */
+  subtitle?: React.ReactNode
+  /** Actions slot (right side) — always visible */
+  actions?: React.ReactNode
+  /** Left slot (e.g. back button) */
+  left?: React.ReactNode
+  /**
+   * Scroll container to watch — defaults to window.
+   * Pass a ref to an overflow-auto div for in-page scroll.
+   */
+  scrollRef?: React.RefObject<HTMLElement>
+  /** Scroll offset that triggers the shrink (default 40px) */
+  threshold?: number
+  /** Whether to show a bottom border when scrolled */
+  bordered?: boolean
+  /** Sticky positioning (default true) */
+  sticky?: boolean
+  className?: string
+}
+
+/**
+ * ScrollHeader — title shrinks + header gains backdrop on scroll.
+ */
+export const ScrollHeader = React.forwardRef<HTMLDivElement, ScrollHeaderProps>(
+  (
+    {
+      title,
+      subtitle,
+      actions,
+      left,
+      scrollRef,
+      threshold = 40,
+      bordered = true,
+      sticky = true,
+      className,
+    },
+    ref
+  ) => {
+    const [scrolled, setScrolled] = useState(false)
+
+    useEffect(() => {
+      const container = scrollRef?.current ?? window
+
+      const handleScroll = () => {
+        const scrollY =
+          container === window
+            ? window.scrollY
+            : (container as HTMLElement).scrollTop
+        setScrolled(scrollY > threshold)
+      }
+
+      container.addEventListener('scroll', handleScroll, { passive: true })
+      return () => container.removeEventListener('scroll', handleScroll)
+    }, [scrollRef, threshold])
+
+    return (
+      <div
+        ref={ref}
+        data-slot="scroll-header"
+        data-scrolled={scrolled ? 'true' : 'false'}
+        className={cn(
+          'z-20 w-full',
+          sticky && 'sticky top-0',
+          'transition-all duration-200',
+          scrolled && 'bg-background/80 backdrop-blur-md',
+          bordered && scrolled && 'border-b border-border',
+          className
+        )}
+      >
+        <div
+          className={cn(
+            'flex items-center gap-3 px-4 transition-all duration-200',
+            scrolled ? 'h-12' : 'h-16'
+          )}
+        >
+          {left && <div className="shrink-0">{left}</div>}
+
+          <div className="flex-1 min-w-0">
+            <div
+              className={cn(
+                'font-semibold text-foreground truncate transition-all duration-200 leading-tight',
+                scrolled ? 'text-sm' : 'text-lg'
+              )}
+            >
+              {title}
+            </div>
+            {subtitle && !scrolled && (
+              <div className="text-xs text-muted-foreground truncate mt-0.5">
+                {subtitle}
+              </div>
+            )}
+          </div>
+
+          {actions && (
+            <div className="flex items-center gap-2 shrink-0">{actions}</div>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+ScrollHeader.displayName = 'ScrollHeader'

package/src/headers/index.ts

@@ -0,0 +1 @@
+export * from './ScrollHeader'

package/src/index.ts

@@ -0,0 +1,171 @@
+// @otfdashkit/ui — barrel exports
+
+export { cn } from './utils/cn'
+
+// primitives
+export * from './primitives/accordion'
+export * from './primitives/alert-dialog'
+export * from './primitives/alert'
+export * from './primitives/aspect-ratio'
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/button'
+export * from './primitives/calendar'
+export * from './primitives/card'
+export * from './primitives/carousel'
+export * from './primitives/chart'
+export * from './primitives/checkbox'
+export * from './primitives/code-block'
+export * from './primitives/collapsible'
+export * from './primitives/command'
+export * from './primitives/comparison'
+export * from './primitives/context-menu'
+export * from './primitives/dialog'
+export * from './primitives/drawer'
+export * from './primitives/dropdown-menu'
+export * from './primitives/form'
+export * from './primitives/hover-card'
+export * from './primitives/input-otp'
+export * from './primitives/input'
+export * from './primitives/label'
+export * from './primitives/logo-carousel'
+export * from './primitives/marquee'
+export * from './primitives/menubar'
+export * from './primitives/navigation-menu'
+export * from './primitives/pagination'
+export * from './primitives/popover'
+export * from './primitives/progress'
+export * from './primitives/qr-code'
+export * from './primitives/radio'
+export * from './primitives/rating'
+export * from './primitives/resizable'
+export * from './primitives/scroll-area'
+export * from './primitives/select'
+export * from './primitives/separator'
+export * from './primitives/sheet'
+export * from './primitives/skeleton'
+export * from './primitives/slider'
+// export * from './primitives/sonner'  // conflicts with feedback/Toaster
+export * from './primitives/spinner'
+export * from './primitives/switch'
+export * from './primitives/table'
+export * from './primitives/tabs'
+export * from './primitives/textarea'
+export * from './primitives/texture-card'
+export * from './primitives/toggle-group'
+export * from './primitives/toggle'
+export * from './primitives/tooltip'
+
+// components
+export * from './components/banner'
+export * from './components/breadcrumb'
+export * from './components/command-item'
+export * from './components/data-grid'
+export * from './components/data-table'
+export * from './components/empty-state'
+export * from './components/hotkeys'
+export * from './components/icon-badge'
+export * from './components/loading-overlay'
+export * from './components/persona'
+export * from './components/property-list'
+export * from './components/stat'
+export * from './components/stepper'
+export * from './components/structured-list'
+export * from './components/timeline'
+// export * from './components/toaster'  // conflicts with feedback/Toaster
+
+// blocks
+export * from './blocks/chat-detail'
+export * from './blocks/feedback-modal'
+export * from './blocks/file-cards'
+export * from './blocks/files-list'
+export * from './blocks/integration-card'
+export * from './blocks/invite-modal'
+export * from './blocks/manage-tags-modal'
+export * from './blocks/messages-card'
+export * from './blocks/metric-card'
+export * from './blocks/bar-list'
+export * from './blocks/activity-heatmap'
+export * from './blocks/FloatingActionButton'
+export * from './blocks/notification-settings'
+export * from './blocks/organization-menu'
+export * from './blocks/roles-menu'
+export * from './blocks/select-users-modal'
+export * from './blocks/sidebar-layout-dashboard'
+export * from './blocks/sidebar-layout-groups'
+export * from './blocks/sidebar-layout-minimal'
+export * from './blocks/sidebar-layout-search'
+export * from './blocks/sidebar-layout-user'
+export * from './blocks/sortable-task-list'
+export * from './blocks/stacked-layout-branded'
+export * from './blocks/stacked-layout-tabs'
+export * from './blocks/task-card'
+export * from './blocks/user-menu'
+export * from './blocks/workspace-members'
+
+// advanced
+export * from './advanced/bulk-actions'
+export * from './advanced/command-bar'
+export * from './advanced/filters'
+export * from './advanced/gantt'
+export * from './advanced/kanban'
+export * from './advanced/rich-editor'
+export * from './advanced/toggle-button'
+
+// charts
+export * from './charts/area-chart'
+export * from './charts/bar-chart'
+export * from './charts/line-chart'
+export * from './charts/sparkline'
+export * from './charts/heatmap'
+
+// engagement
+export * from './engagement/beacon'
+export * from './engagement/tour'
+export * from './engagement/checklist'
+export * from './engagement/intro-disclosure'
+
+// forms
+export * from './forms/array-field'
+export * from './forms/auto-form'
+export * from './forms/color-picker'
+export * from './forms/date-picker'
+export * from './forms/field'
+export * from './forms/file-upload'
+export * from './forms/form'
+export * from './forms/object-field'
+export * from './forms/password-input'
+export * from './forms/search-input'
+export * from './forms/step-form'
+export * from './forms/tags'
+
+// layouts
+export * from './layouts/app-shell'
+export * from './layouts/container'
+export * from './layouts/navbar'
+export * from './layouts/page'
+export * from './layouts/resize-box'
+export * from './layouts/sidebar'
+export * from './layouts/split-page'
+export * from './layouts/stack'
+
+// export * from './layout'  // COLLISION: PageHeader in layout/PageLayout.tsx shadows layouts/page.tsx
+export { PageLayout } from './layout/PageLayout'
+export type { PageHeaderProps } from './layout/PageLayout'
+export { PageContainer, PageMain } from './layout/PageContainer'
+export * from './nav'
+export * from './feedback'
+export * from './text'
+export * from './backgrounds'
+export * from './headers'
+export * from './motion'
+// export * from './data'      // conflicts with components/data-grid (DataGrid)
+export * from './data/DataList'
+export * from './data/EventCalendar'
+export * from './data/GridList'
+export * from './data/ImageCrop'
+export * from './data/Tree'
+export * from './data/VideoPlayer'
+export * from './forms/combobox'
+export * from './theme'
+export * from './app-shell'