@otfdashkit/ui 0.1.1 → 0.1.2

package/src/components/data-table.tsx

@@ -1,139 +1 @@
-import React from 'react'
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  getFilteredRowModel,
-  SortingState,
-  useReactTable,
-} from '@tanstack/react-table'
-import { ArrowUpDown, ArrowUp, ArrowDown, ChevronLeft, ChevronRight } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Input } from '../primitives/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Skeleton } from '../primitives/skeleton'
-
-interface DataTableProps<T> {
-  columns: ColumnDef<T>[]
-  data: T[]
-  pageSize?: number
-  searchable?: boolean
-  searchColumn?: string
-  loading?: boolean
-}
-
-export function DataTableColumnHeader({ column, title }: { column: any; title: string }) {
-  if (!column.getCanSort()) return <span>{title}</span>
-  const sorted = column.getIsSorted()
-  return (
-    <button
-      onClick={() => column.toggleSorting(sorted === 'asc')}
-      className="flex items-center gap-1 hover:text-[hsl(var(--foreground))]"
-    >
-      {title}
-      {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3 opacity-50" />}
-    </button>
-  )
-}
-
-export function DataTablePagination({ table }: { table: any }) {
-  return (
-    <div className="flex items-center justify-between px-2 py-3">
-      <span className="text-sm text-[hsl(var(--muted-foreground))]">
-        Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-      </span>
-      <div className="flex items-center gap-2">
-        <Select
-          value={String(table.getState().pagination.pageSize)}
-          onValueChange={(v) => table.setPageSize(Number(v))}
-        >
-          <SelectTrigger className="h-8 w-[70px]"><SelectValue /></SelectTrigger>
-          <SelectContent>
-            {[10, 20, 50].map((n) => <SelectItem key={n} value={String(n)}>{n}</SelectItem>)}
-          </SelectContent>
-        </Select>
-        <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-          <ChevronLeft className="h-4 w-4" />
-        </Button>
-        <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export function DataTableToolbar({ table, searchColumn }: { table: any; searchColumn?: string }) {
-  if (!searchColumn) return null
-  return (
-    <div className="py-3">
-      <Input
-        placeholder="Search..."
-        value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ''}
-        onChange={(e) => table.getColumn(searchColumn)?.setFilterValue(e.target.value)}
-        className="max-w-sm h-8"
-      />
-    </div>
-  )
-}
-
-export function DataTable<T>({ columns, data, pageSize = 10, searchable, searchColumn, loading }: DataTableProps<T>) {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onSortingChange: setSorting,
-    initialState: { pagination: { pageSize } },
-    state: { sorting },
-  })
-
-  if (loading) return (
-    <div className="space-y-2">
-      {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
-    </div>
-  )
-
-  return (
-    <div className="w-full">
-      {searchable && <DataTableToolbar table={table} searchColumn={searchColumn} />}
-      <div className="rounded-md border border-[hsl(var(--border))] overflow-hidden">
-        <table className="w-full text-sm">
-          <thead className="bg-[hsl(var(--muted)/0.4)]">
-            {table.getHeaderGroups().map((hg) => (
-              <tr key={hg.id}>
-                {hg.headers.map((h) => (
-                  <th key={h.id} className="px-4 py-3 text-left font-medium text-[hsl(var(--muted-foreground))]">
-                    {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.map((row, i) => (
-              <tr key={row.id} className={cn('border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors', i % 2 === 0 ? '' : 'bg-[hsl(var(--muted)/0.1)]')}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className="px-4 py-3">
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))}
-            {table.getRowModel().rows.length === 0 && (
-              <tr><td colSpan={columns.length} className="px-4 py-8 text-center text-[hsl(var(--muted-foreground))]">No results.</td></tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-      <DataTablePagination table={table} />
-    </div>
-  )
-}
+export * from './DataTable'

package/src/components/empty-state.tsx

@@ -1,31 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-
-export const EmptyStateIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]', className)} {...props} />
-  )
-)
-EmptyStateIcon.displayName = 'EmptyStateIcon'
-
-interface EmptyStateProps {
-  icon?: React.ReactNode
-  title: string
-  description?: string
-  action?: { label: string; onClick: () => void }
-  className?: string
-}
-
-export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
-  return (
-    <div className={cn('flex flex-col items-center justify-center gap-3 py-12 text-center', className)}>
-      {icon && <EmptyStateIcon>{icon}</EmptyStateIcon>}
-      <div className="space-y-1">
-        <h3 className="font-semibold text-[hsl(var(--foreground))]">{title}</h3>
-        {description && <p className="text-sm text-[hsl(var(--muted-foreground))]">{description}</p>}
-      </div>
-      {action && <Button onClick={action.onClick} className="mt-1">{action.label}</Button>}
-    </div>
-  )
-}
+export * from './EmptyState'

package/src/components/hotkeys.tsx

@@ -1,31 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface HotkeyBadgeProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function HotkeyBadge({ children, className }: HotkeyBadgeProps) {
-  return (
-    <kbd className={cn(
-      'inline-flex items-center justify-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[11px] font-medium text-[hsl(var(--muted-foreground))] shadow-[0_1px_0_rgba(0,0,0,0.1)] min-w-[20px] h-5',
-      className
-    )}>
-      {children}
-    </kbd>
-  )
-}
-
-interface HotkeysProps {
-  keys: string[]
-  className?: string
-}
-
-export function Hotkeys({ keys, className }: HotkeysProps) {
-  return (
-    <span className={cn('inline-flex items-center gap-0.5', className)}>
-      {keys.map((key, i) => <HotkeyBadge key={i}>{key}</HotkeyBadge>)}
-    </span>
-  )
-}
+export * from './Hotkeys/index'

package/src/components/icon-badge.tsx

@@ -1,35 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-type IconBadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'purple'
-type IconBadgeSize = 'sm' | 'md' | 'lg'
-
-const colorMap: Record<IconBadgeColor, string> = {
-  default: 'bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]',
-  primary: 'bg-[hsl(var(--primary)/0.12)] text-[hsl(var(--primary))]',
-  success: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-  warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-  error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
-  purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-}
-
-const sizeMap: Record<IconBadgeSize, string> = {
-  sm: 'h-7 w-7 [&>*]:h-3.5 [&>*]:w-3.5',
-  md: 'h-10 w-10 [&>*]:h-5 [&>*]:w-5',
-  lg: 'h-14 w-14 [&>*]:h-7 [&>*]:w-7',
-}
-
-interface IconBadgeProps {
-  icon: React.ReactNode
-  color?: IconBadgeColor
-  size?: IconBadgeSize
-  className?: string
-}
-
-export function IconBadge({ icon, color = 'default', size = 'md', className }: IconBadgeProps) {
-  return (
-    <div className={cn('inline-flex items-center justify-center rounded-full shrink-0', colorMap[color], sizeMap[size], className)}>
-      {icon}
-    </div>
-  )
-}
+export * from './IconBadge'

package/src/components/loading-overlay.tsx

@@ -1,38 +1 @@
-import React from 'react'
-import { Loader2 } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-interface LoadingOverlayProps {
-  loading: boolean
-  text?: string
-  fullPage?: boolean
-  children?: React.ReactNode
-  className?: string
-}
-
-export function LoadingOverlay({ loading, text, fullPage, children, className }: LoadingOverlayProps) {
-  if (fullPage) {
-    return loading ? (
-      <div className={cn('fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm', className)}>
-        <div className="flex flex-col items-center gap-2">
-          <Loader2 className="h-8 w-8 animate-spin text-[hsl(var(--primary))]" />
-          {text && <p className="text-sm text-[hsl(var(--muted-foreground))]">{text}</p>}
-        </div>
-      </div>
-    ) : null
-  }
-
-  return (
-    <div className={cn('relative', className)}>
-      {children}
-      {loading && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-[hsl(var(--background)/0.8)] backdrop-blur-[2px]">
-          <div className="flex flex-col items-center gap-2">
-            <Loader2 className="h-6 w-6 animate-spin text-[hsl(var(--primary))]" />
-            {text && <p className="text-xs text-[hsl(var(--muted-foreground))]">{text}</p>}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+export * from './LoadingOverlay'

package/src/components/persona.tsx

@@ -1,38 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback, AvatarImage } from '../primitives/avatar'
-
-const sizeMap = {
-  sm: { avatar: 'h-7 w-7', name: 'text-sm', subtitle: 'text-xs' },
-  md: { avatar: 'h-9 w-9', name: 'text-sm font-medium', subtitle: 'text-xs' },
-  lg: { avatar: 'h-12 w-12', name: 'text-base font-medium', subtitle: 'text-sm' },
-}
-
-interface PersonaProps {
-  name: string
-  subtitle?: string
-  src?: string
-  size?: 'sm' | 'md' | 'lg'
-  badge?: React.ReactNode
-  className?: string
-}
-
-export function Persona({ name, subtitle, src, size = 'md', badge, className }: PersonaProps) {
-  const s = sizeMap[size]
-  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()
-  return (
-    <div className={cn('flex items-center gap-2.5', className)}>
-      <div className="relative shrink-0">
-        <Avatar className={s.avatar}>
-          {src && <AvatarImage src={src} alt={name} />}
-          <AvatarFallback className="text-xs">{initials}</AvatarFallback>
-        </Avatar>
-        {badge && <div className="absolute -bottom-0.5 -right-0.5">{badge}</div>}
-      </div>
-      <div className="min-w-0">
-        <p className={cn('truncate text-[hsl(var(--foreground))]', s.name)}>{name}</p>
-        {subtitle && <p className={cn('truncate text-[hsl(var(--muted-foreground))]', s.subtitle)}>{subtitle}</p>}
-      </div>
-    </div>
-  )
-}
+export * from './Persona/index'

package/src/components/property-list.tsx

@@ -1,29 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface PropertyListProps extends React.HTMLAttributes<HTMLDListElement> {}
-
-export const PropertyList = React.forwardRef<HTMLDListElement, PropertyListProps>(
-  ({ className, ...props }, ref) => (
-    <dl ref={ref} className={cn('divide-y divide-[hsl(var(--border))]', className)} {...props} />
-  )
-)
-PropertyList.displayName = 'PropertyList'
-
-interface PropertyItemProps {
-  label: string
-  value: React.ReactNode
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-}
-
-export function PropertyItem({ label, value, orientation = 'horizontal', className }: PropertyItemProps) {
-  return (
-    <div className={cn('py-3', orientation === 'horizontal' ? 'flex gap-4' : 'space-y-1', className)}>
-      <dt className={cn('text-sm font-medium text-[hsl(var(--muted-foreground))] shrink-0', orientation === 'horizontal' && 'w-[40%]')}>
-        {label}
-      </dt>
-      <dd className="text-sm text-[hsl(var(--foreground))] min-w-0">{value}</dd>
-    </div>
-  )
-}
+export * from './PropertyList'

package/src/components/stat.tsx

@@ -1,51 +1 @@
-import React from 'react'
-import { TrendingUp, TrendingDown } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
-
-interface StatProps {
-  label: string
-  value: string | number
-  trend?: number
-  trendLabel?: string
-  icon?: React.ReactNode
-  description?: string
-  className?: string
-}
-
-export function Stat({ label, value, trend, trendLabel, icon, description, className }: StatProps) {
-  const isPositive = trend !== undefined && trend >= 0
-  return (
-    <Card className={cn('', className)}>
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between">
-          <div className="space-y-1 min-w-0">
-            <p className="text-sm font-medium text-[hsl(var(--muted-foreground))] truncate">{label}</p>
-            <p className="text-2xl font-bold text-[hsl(var(--foreground))]">{value}</p>
-          </div>
-          {icon && <div className="text-[hsl(var(--muted-foreground))] shrink-0 ml-2">{icon}</div>}
-        </div>
-        {(trend !== undefined || description) && (
-          <div className="mt-2 flex items-center gap-1">
-            {trend !== undefined && (
-              <span className={cn('flex items-center gap-0.5 text-xs font-medium', isPositive ? 'text-green-600' : 'text-red-600')}>
-                {isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
-                {Math.abs(trend)}%
-              </span>
-            )}
-            {trendLabel && <span className="text-xs text-[hsl(var(--muted-foreground))]">{trendLabel}</span>}
-            {description && !trendLabel && <span className="text-xs text-[hsl(var(--muted-foreground))]">{description}</span>}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-interface StatGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function StatGroup({ className, ...props }: StatGroupProps) {
-  return (
-    <div className={cn('grid gap-4', className)} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 200px), 1fr))' }} {...props} />
-  )
-}
+export * from './Stat/index'

package/src/components/stepper.tsx

@@ -1,69 +1 @@
-import React from 'react'
-import { Check } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-interface StepDef { title: string; description?: string }
-
-interface StepperStepProps extends StepDef {
-  index: number
-  current: number
-  total: number
-}
-
-export function StepperStep({ index, current, total, title, description }: StepperStepProps) {
-  const done = index < current
-  const active = index === current
-  const isLast = index === total - 1
-
-  return (
-    <div className="flex items-start gap-3 flex-1 min-w-0">
-      <div className="flex flex-col items-center shrink-0">
-        <div className={cn(
-          'h-8 w-8 rounded-full flex items-center justify-center border-2 text-sm font-semibold transition-colors',
-          done && 'bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
-          active && 'border-[hsl(var(--primary))] text-[hsl(var(--primary))] bg-transparent',
-          !done && !active && 'border-[hsl(var(--muted-foreground)/0.4)] text-[hsl(var(--muted-foreground))] bg-transparent',
-        )}>
-          {done ? <Check className="h-4 w-4" /> : index + 1}
-        </div>
-        {!isLast && <div className={cn('w-0.5 flex-1 min-h-[16px] mt-1', done ? 'bg-[hsl(var(--primary))]' : 'bg-[hsl(var(--border))]')} />}
-      </div>
-      <div className="min-w-0 pb-4">
-        <p className={cn('text-sm font-medium', active ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))]')}>{title}</p>
-        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>}
-      </div>
-    </div>
-  )
-}
-
-interface StepperProps {
-  currentStep: number
-  steps: StepDef[]
-  className?: string
-  /** 'horizontal' (default) | 'vertical' — vertical stacks steps as rows */
-  direction?: 'horizontal' | 'vertical'
-}
-
-export function Stepper({ currentStep, steps, className, direction = 'horizontal' }: StepperProps) {
-  if (direction === 'vertical' || (className && className.includes('flex-col'))) {
-    return (
-      <div className={cn('flex flex-col gap-0', className?.replace('flex-col', ''))}>
-        {steps.map((step, i) => (
-          <StepperStep key={i} {...step} index={i} current={currentStep} total={steps.length} />
-        ))}
-      </div>
-    )
-  }
-  return (
-    <div className={cn('flex gap-0', className)}>
-      {steps.map((step, i) => (
-        <div key={i} className={cn('flex items-start', i < steps.length - 1 && 'flex-1')}>
-          <StepperStep {...step} index={i} current={currentStep} total={steps.length} />
-          {i < steps.length - 1 && (
-            <div className={cn('flex-1 h-0.5 mt-4 mx-2', i < currentStep ? 'bg-[hsl(var(--primary))]' : 'bg-[hsl(var(--border))]')} />
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}
+export * from './Stepper/index'

package/src/components/structured-list.tsx

@@ -1,51 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface StructuredListSectionProps {
-  title?: string
-  children: React.ReactNode
-  className?: string
-}
-
-export function StructuredListSection({ title, children, className }: StructuredListSectionProps) {
-  return (
-    <div className={cn('', className)}>
-      {title && <p className="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">{title}</p>}
-      <div className="rounded-md border border-[hsl(var(--border))] overflow-hidden divide-y divide-[hsl(var(--border))]">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-interface StructuredListItemProps {
-  left?: React.ReactNode
-  title: string
-  description?: string
-  right?: React.ReactNode
-  onClick?: () => void
-  className?: string
-}
-
-export function StructuredListItem({ left, title, description, right, onClick, className }: StructuredListItemProps) {
-  return (
-    <div
-      onClick={onClick}
-      className={cn('flex items-center gap-3 px-4 py-3 bg-[hsl(var(--card))]', onClick && 'cursor-pointer hover:bg-[hsl(var(--muted)/0.5)] transition-colors', className)}
-    >
-      {left && <div className="shrink-0">{left}</div>}
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium text-[hsl(var(--foreground))] truncate">{title}</p>
-        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
-      </div>
-      {right && <div className="shrink-0 text-[hsl(var(--muted-foreground))]">{right}</div>}
-    </div>
-  )
-}
-
-interface StructuredListProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const StructuredList = React.forwardRef<HTMLDivElement, StructuredListProps>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('space-y-4', className)} {...props} />
-)
-StructuredList.displayName = 'StructuredList'
+export * from './StructuredList'

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