@otfdashkit/ui 0.1.1 → 0.1.3

package/src/components/timeline.tsx

@@ -1,69 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-type TimelineVariant = 'default' | 'success' | 'error' | 'warning'
-
-const dotColors: Record<TimelineVariant, string> = {
-  default: 'bg-[hsl(var(--primary))]',
-  success: 'bg-green-500',
-  error: 'bg-red-500',
-  warning: 'bg-yellow-500',
-}
-
-interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-export const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('pb-1', className)} {...props} />
-)
-TimelineContent.displayName = 'TimelineContent'
-
-export function TimelineConnector({ className }: { className?: string }) {
-  return <div className={cn('absolute left-[7px] top-5 bottom-0 w-0.5 bg-[hsl(var(--border))]', className)} />
-}
-
-interface TimelineItemProps {
-  icon?: React.ReactNode
-  title: string
-  description?: string
-  timestamp?: string
-  variant?: TimelineVariant
-  isLast?: boolean
-  className?: string
-}
-
-export function TimelineItem({ icon, title, description, timestamp, variant = 'default', isLast, className }: TimelineItemProps) {
-  return (
-    <div className={cn('relative flex gap-4', !isLast && 'pb-6', className)}>
-      <div className="relative flex-none">
-        <div className={cn('h-4 w-4 rounded-full border-2 border-[hsl(var(--background))] flex items-center justify-center mt-0.5', dotColors[variant])}>
-          {icon && <span className="text-white text-[8px]">{icon}</span>}
-        </div>
-        {!isLast && <TimelineConnector />}
-      </div>
-      <TimelineContent>
-        <div className="flex items-baseline justify-between gap-2">
-          <p className="text-sm font-medium text-[hsl(var(--foreground))]">{title}</p>
-          {timestamp && <span className="text-xs text-[hsl(var(--muted-foreground))] shrink-0">{timestamp}</span>}
-        </div>
-        {description && <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>}
-      </TimelineContent>
-    </div>
-  )
-}
-
-interface TimelineProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function Timeline({ children, className }: TimelineProps) {
-  const items = React.Children.toArray(children)
-  return (
-    <div className={cn('', className)}>
-      {items.map((child, i) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<TimelineItemProps>, { isLast: i === items.length - 1 })
-          : child
-      )}
-    </div>
-  )
-}
+export * from './Timeline/index'

package/src/components/toaster.tsx

@@ -1,42 +1 @@
-'use client'
-
-import React from 'react'
-import { Toaster as SonnerToaster, toast } from 'sonner'
-import { useOtfUI } from '../provider/otf-ui-provider'
-
-export interface ToasterProps extends React.ComponentProps<typeof SonnerToaster> {}
-
-export function Toaster(props: ToasterProps) {
-  const ctx = useOtfUI?.()
-  const dark = ctx?.darkMode === 'dark'
-
-  return (
-    <SonnerToaster
-      theme={dark ? 'dark' : 'light'}
-      position="bottom-right"
-      toastOptions={{
-        classNames: {
-          toast: [
-            'group flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm shadow-md',
-            'border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]',
-          ].join(' '),
-          title: 'font-semibold text-sm leading-snug',
-          description: 'text-xs text-[hsl(var(--muted-foreground))] mt-0.5 leading-snug',
-          actionButton: [
-            'mt-2 inline-flex items-center gap-1 text-xs font-medium',
-            'text-[hsl(var(--primary))] underline-offset-2 hover:underline',
-          ].join(' '),
-          cancelButton: 'mt-2 text-xs text-[hsl(var(--muted-foreground))] hover:opacity-80',
-          closeButton: 'text-[hsl(var(--muted-foreground))] opacity-60 hover:opacity-100 transition-opacity',
-          error: 'border-red-200/80 bg-red-50/60 dark:border-red-800/60 dark:bg-red-950/30',
-          success: 'border-green-200/80 bg-green-50/60 dark:border-green-800/60 dark:bg-green-950/30',
-          warning: 'border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30',
-          info: 'border-blue-200/80 bg-blue-50/60 dark:border-blue-800/60 dark:bg-blue-950/30',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { toast }
+export * from './Toaster'

package/src/data/DataList.tsx

@@ -31,7 +31,7 @@ export const DataList = React.forwardRef<HTMLUListElement, DataListProps>(
 )
 DataList.displayName = 'DataList'
 
-export interface DataListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+export interface DataListItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'> {
   left?: React.ReactNode
   title?: React.ReactNode
   description?: React.ReactNode

package/src/engagement/Tour/Tour.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
+import { Button } from '../../primitives/button'
 
 interface TourContextValue {
   currentStep: number

package/src/engagement/beacon.tsx

@@ -1,50 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-const colorMap = {
-  primary: 'bg-[hsl(var(--primary))]',
-  success: 'bg-green-500',
-  warning: 'bg-yellow-500',
-  error: 'bg-red-500',
-}
-
-const sizeMap = {
-  sm: 'h-1.5 w-1.5',
-  md: 'h-2.5 w-2.5',
-  lg: 'h-3.5 w-3.5',
-}
-
-export interface BeaconProps {
-  color?: keyof typeof colorMap
-  size?: keyof typeof sizeMap
-  children?: React.ReactNode
-  className?: string
-}
-
-function BeaconDot({ color = 'primary', size = 'md' }: Pick<BeaconProps, 'color' | 'size'>) {
-  return (
-    <span className="relative flex">
-      <span className={cn('animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', colorMap[color])} />
-      <span className={cn('relative inline-flex rounded-full', sizeMap[size], colorMap[color])} />
-    </span>
-  )
-}
-
-export function Beacon({ color = 'primary', size = 'md', children, className }: BeaconProps) {
-  if (!children) {
-    return (
-      <span className={cn('inline-flex', className)}>
-        <BeaconDot color={color} size={size} />
-      </span>
-    )
-  }
-
-  return (
-    <span className={cn('relative inline-flex', className)}>
-      {children}
-      <span className="absolute -top-1 -right-1 flex">
-        <BeaconDot color={color} size={size} />
-      </span>
-    </span>
-  )
-}
+export * from './Beacon/index'

package/src/engagement/tour.tsx

@@ -1,106 +1 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-
-interface TourContextValue {
-  currentStep: number
-  totalSteps: number
-  isActive: boolean
-  start: () => void
-  stop: () => void
-  next: () => void
-  prev: () => void
-  goTo: (step: number) => void
-}
-
-const TourContext = createContext<TourContextValue | null>(null)
-
-export function useTour(): TourContextValue {
-  const ctx = useContext(TourContext)
-  if (!ctx) throw new Error('useTour must be used within <Tour>')
-  return ctx
-}
-
-export interface TourProps {
-  totalSteps: number
-  children: React.ReactNode
-}
-
-export function Tour({ totalSteps, children }: TourProps) {
-  const [currentStep, setCurrentStep] = useState(0)
-  const [isActive, setIsActive] = useState(false)
-
-  const stop = useCallback(() => setIsActive(false), [])
-  const start = useCallback(() => { setCurrentStep(0); setIsActive(true) }, [])
-  const next = useCallback(() => setCurrentStep(s => Math.min(s + 1, totalSteps - 1)), [totalSteps])
-  const prev = useCallback(() => setCurrentStep(s => Math.max(s - 1, 0)), [])
-  const goTo = useCallback((step: number) => setCurrentStep(Math.max(0, Math.min(step, totalSteps - 1))), [totalSteps])
-
-  useEffect(() => {
-    if (!isActive) return
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') stop()
-      if (e.key === 'ArrowRight') next()
-      if (e.key === 'ArrowLeft') prev()
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [isActive, stop, next, prev])
-
-  return (
-    <TourContext.Provider value={{ currentStep, totalSteps, isActive, start, stop, next, prev, goTo }}>
-      {children}
-    </TourContext.Provider>
-  )
-}
-
-const placementClasses: Record<string, string> = {
-  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
-}
-
-export interface TourStepProps {
-  step: number
-  title: string
-  description: string
-  placement?: 'top' | 'bottom' | 'left' | 'right'
-  children: React.ReactNode
-}
-
-export function TourStep({ step, title, description, placement = 'bottom', children }: TourStepProps) {
-  const { currentStep, isActive, stop, next, prev, totalSteps } = useTour()
-  const active = isActive && currentStep === step
-  const isLast = step === totalSteps - 1
-
-  return (
-    <span className="relative inline-block">
-      {active && (
-        <span
-          className="fixed inset-0 z-40 pointer-events-none"
-          style={{ boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)' }}
-        />
-      )}
-      <span className={cn('relative', active && 'z-50 ring-2 ring-[hsl(var(--primary))] ring-offset-2 rounded-md')}>
-        {children}
-      </span>
-      {active && (
-        <div className={cn('absolute z-50 w-64 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 shadow-lg', placementClasses[placement])}>
-          <p className="font-semibold text-sm mb-1">{title}</p>
-          <p className="text-xs text-[hsl(var(--muted-foreground))] mb-3">{description}</p>
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-xs text-[hsl(var(--muted-foreground))]">{step + 1} / {totalSteps}</span>
-            <div className="flex gap-1.5">
-              {step > 0 && <Button size="sm" variant="outline" onClick={prev}>Back</Button>}
-              {isLast
-                ? <Button size="sm" onClick={stop}>Done</Button>
-                : <Button size="sm" onClick={next}>Next</Button>
-              }
-            </div>
-          </div>
-        </div>
-      )}
-    </span>
-  )
-}
+export * from './Tour/index'

package/src/forms/ArrayField/ArrayField.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Plus, X } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { cn } from '../../utils/cn'
 
 export interface ArrayFieldProps<T> {
   value: T[]

package/src/forms/AutoForm/AutoForm.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import { Input } from '../primitives/input'
-import { Checkbox } from '../primitives/checkbox'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Button } from '../primitives/button'
-import { DatePicker } from './date-picker'
-import { Field } from './field'
+import { Input } from '../../primitives/input'
+import { Checkbox } from '../../primitives/checkbox'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select'
+import { Button } from '../../primitives/button'
+import { DatePicker } from '../date-picker'
+import { Field } from '../field'
 
 export interface AutoFormProps {
   schema: z.ZodObject<z.ZodRawShape>
@@ -108,14 +108,15 @@ function FieldRenderer({ name, field, register, setValue, watch, error }: FieldR
 
 export function AutoForm({ schema, onSubmit, defaultValues, submitLabel = 'Submit' }: AutoFormProps) {
   const { register, handleSubmit, setValue, watch, formState } = useForm({
-    resolver: zodResolver(schema),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(schema as any),
     defaultValues: defaultValues as Record<string, unknown>,
   })
 
   const shape = schema.shape
 
   return (
-    <form onSubmit={handleSubmit(d => onSubmit(d as Record<string, unknown>))} className="flex flex-col gap-4">
+    <form onSubmit={handleSubmit((d) => onSubmit(d as unknown as Record<string, unknown>))} className="flex flex-col gap-4">
       {Object.entries(shape).map(([name, field]) => (
         <FieldRenderer
           key={name}

package/src/forms/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { cn } from '../../utils/cn'
 
 const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

package/src/forms/FloatingLabelInput/FloatingLabelInput.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import React, { useState, useId } from 'react'
+import { cn } from '../../utils/cn'
+
+/**
+ * FloatingLabelInput — input where the label sits inside the field at rest
+ * and floats up + shrinks when the field is focused OR contains text. Cross-
+ * platform parity with @otfdashkit/ui-native's FloatingLabelInput.
+ *
+ * Reference (visual spec): https://www.grepped.ai/animations/components-ui/floating-label
+ *
+ * Forms pattern, not a primitive — pairs with Form, Field, AutoForm helpers.
+ */
+
+export interface FloatingLabelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {
+  /** Label that floats up when focused or filled. */
+  label:    string
+  /** Inline error text shown below the input. */
+  error?:   string
+  /** Helper text shown below the input when there's no error. */
+  hint?:    string
+  /** Wrap the field + label + helper text in this className for layout. */
+  wrapperClassName?: string
+}
+
+export const FloatingLabelInput = React.forwardRef<HTMLInputElement, FloatingLabelInputProps>(
+  ({ label, error, hint, wrapperClassName, className, id, value, defaultValue, onFocus, onBlur, onChange, ...props }, ref) => {
+    const autoId   = useId()
+    const inputId  = id ?? autoId
+    const errorId  = error ? `${inputId}-error` : undefined
+    const hintId   = hint  ? `${inputId}-hint`  : undefined
+    const describedBy = [errorId, hintId].filter(Boolean).join(' ') || undefined
+
+    // "Filled" tracks whether the field has any user-visible content. We
+    // compute it from the initial defaultValue / value, then update on every
+    // change so the label floats correctly even before focus.
+    const [focused, setFocused] = useState(false)
+    const [filled,  setFilled]  = useState(() => {
+      if (value !== undefined && value !== null && value !== '') return true
+      if (defaultValue !== undefined && defaultValue !== null && defaultValue !== '') return true
+      return false
+    })
+
+    const isFloated = focused || filled
+
+    return (
+      <div data-slot="floating-label-input" className={cn('flex flex-col gap-1.5', wrapperClassName)}>
+        <div className="relative">
+          <input
+            ref={ref}
+            id={inputId}
+            value={value}
+            defaultValue={defaultValue}
+            data-slot="input"
+            data-state={isFloated ? 'floated' : 'rest'}
+            aria-invalid={Boolean(error) || undefined}
+            aria-describedby={describedBy}
+            onFocus={(e) => { setFocused(true);  onFocus?.(e) }}
+            onBlur ={(e) => { setFocused(false); onBlur?.(e)  }}
+            onChange={(e) => { setFilled(e.target.value.length > 0); onChange?.(e) }}
+            className={cn(
+              // Reset + structure
+              'peer w-full appearance-none bg-transparent',
+              'h-14 rounded-md border px-3 pt-5 pb-1.5',
+              'text-base text-foreground leading-tight',
+              // Border / focus ring colors
+              'border-input focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30',
+              error && 'border-destructive focus:border-destructive focus:ring-destructive/30',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              'placeholder:text-transparent', // hide native placeholder; label takes its job
+              className,
+            )}
+            {...props}
+          />
+
+          <label
+            htmlFor={inputId}
+            className={cn(
+              'pointer-events-none absolute left-3',
+              'origin-[0_50%] transition-all duration-150 ease-out',
+              'text-muted-foreground',
+              // Rest: centered vertically inside the field, full size
+              !isFloated && 'top-1/2 -translate-y-1/2 text-base',
+              // Floated: tucked into the top with a small subtle background
+              isFloated  && 'top-1.5 text-[11px] uppercase tracking-wider text-foreground/85',
+              error && 'text-destructive',
+            )}
+          >
+            {label}
+          </label>
+        </div>
+
+        {error ? (
+          <p id={errorId} className="text-xs text-destructive">{error}</p>
+        ) : hint ? (
+          <p id={hintId} className="text-xs text-muted-foreground">{hint}</p>
+        ) : null}
+      </div>
+    )
+  },
+)
+FloatingLabelInput.displayName = 'FloatingLabelInput'

package/src/forms/FloatingLabelInput/index.ts

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

package/src/forms/PasswordInput/PasswordInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input, type InputProps } from '../primitives/input'
-import { cn } from '../utils/cn'
+import { Input, type InputProps } from '../../primitives/input'
+import { cn } from '../../utils/cn'
 
 export interface PasswordInputProps extends InputProps {
   strength?: boolean

package/src/forms/SearchInput/SearchInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { type InputProps } from '../primitives/input'
+import { cn } from '../../utils/cn'
+import { type InputProps } from '../../primitives/input'
 
 export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
   shortcut?: string

package/src/forms/StepForm/StepForm.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState } from 'react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
+import { Button } from '../../primitives/button'
+import { cn } from '../../utils/cn'
 
 interface StepFormContextValue {
   currentStep: number

package/src/forms/array-field.tsx

@@ -1,61 +1 @@
-import React from 'react'
-import { Plus, X } from 'lucide-react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
-
-export interface ArrayFieldProps<T> {
-  value: T[]
-  onChange: (v: T[]) => void
-  renderItem: (item: T, index: number, remove: () => void) => React.ReactNode
-  addLabel?: string
-  maxItems?: number
-  defaultItem: T
-  className?: string
-}
-
-export function ArrayField<T>({
-  value,
-  onChange,
-  renderItem,
-  addLabel = 'Add item',
-  maxItems,
-  defaultItem,
-  className,
-}: ArrayFieldProps<T>) {
-  function add() {
-    if (maxItems && value.length >= maxItems) return
-    onChange([...value, defaultItem])
-  }
-
-  function remove(index: number) {
-    onChange(value.filter((_, i) => i !== index))
-  }
-
-  const atMax = maxItems !== undefined && value.length >= maxItems
-
-  return (
-    <div className={cn('flex flex-col gap-2', className)}>
-      {value.map((item, i) => (
-        <div key={i} className="flex items-start gap-2">
-          <div className="flex-1 min-w-0">{renderItem(item, i, () => remove(i))}</div>
-          <button
-            type="button"
-            onClick={() => remove(i)}
-            className="mt-2 shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-      ))}
-      <div className="flex items-center justify-between">
-        <Button type="button" variant="outline" size="sm" onClick={add} disabled={atMax}>
-          <Plus className="h-4 w-4" />
-          {addLabel}
-        </Button>
-        {maxItems && (
-          <span className="text-xs text-[hsl(var(--muted-foreground))]">{value.length}/{maxItems}</span>
-        )}
-      </div>
-    </div>
-  )
-}
+export * from './ArrayField'