@otfdashkit/ui 0.1.1 → 0.1.3

package/src/components/data-grid.tsx

@@ -1,125 +1 @@
-import React from 'react'
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  RowSelectionState,
-  ColumnResizeMode,
-} from '@tanstack/react-table'
-import { cn } from '../utils/cn'
-import { Checkbox } from '../primitives/checkbox'
-
-interface DataGridProps<T extends object> {
-  columns: ColumnDef<T, any>[]
-  data: T[]
-  onDataChange?: (data: T[]) => void
-  editable?: boolean
-  className?: string
-}
-
-function EditableCell<T>({ value: initial, onSave }: { value: unknown; onSave: (v: string) => void }) {
-  const [editing, setEditing] = React.useState(false)
-  const [val, setVal] = React.useState(String(initial ?? ''))
-
-  const commit = () => { onSave(val); setEditing(false) }
-
-  if (editing) {
-    return (
-      <input
-        autoFocus
-        className="w-full bg-transparent outline outline-1 outline-[hsl(var(--ring))] rounded px-1 text-sm"
-        value={val}
-        onChange={(e) => setVal(e.target.value)}
-        onBlur={commit}
-        onKeyDown={(e) => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false) }}
-      />
-    )
-  }
-  return (
-    <span className="cursor-pointer w-full block" onDoubleClick={() => setEditing(true)}>
-      {String(initial ?? '')}
-    </span>
-  )
-}
-
-const selectionCol = <T,>(): ColumnDef<T> => ({
-  id: '_select',
-  header: ({ table }) => (
-    <Checkbox checked={table.getIsAllRowsSelected()} onCheckedChange={(v) => table.toggleAllRowsSelected(!!v)} />
-  ),
-  cell: ({ row }) => (
-    <Checkbox checked={row.getIsSelected()} onCheckedChange={(v) => row.toggleSelected(!!v)} />
-  ),
-  size: 40,
-  enableResizing: false,
-})
-
-export function DataGrid<T extends object>({ columns, data: initialData, onDataChange, editable, className }: DataGridProps<T>) {
-  const [data, setData] = React.useState<T[]>(initialData)
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
-  const columnResizeMode: ColumnResizeMode = 'onChange'
-
-  const editableColumns = React.useMemo(() => {
-    if (!editable) return columns
-    return columns.map((col) => ({
-      ...col,
-      cell: (info: any) => (
-        <EditableCell
-          value={info.getValue()}
-          onSave={(v) => {
-            const updated = data.map((row, i) =>
-              i === info.row.index ? { ...row, [info.column.id]: v } : row
-            ) as T[]
-            setData(updated)
-            onDataChange?.(updated)
-          }}
-        />
-      ),
-    }))
-  }, [columns, data, editable, onDataChange])
-
-  const allColumns = React.useMemo(() => [selectionCol<T>(), ...editableColumns], [editableColumns])
-
-  const table = useReactTable({
-    data,
-    columns: allColumns,
-    columnResizeMode,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: { rowSelection },
-    enableColumnResizing: true,
-  })
-
-  return (
-    <div className={cn('overflow-auto rounded-md border border-[hsl(var(--border))]', className)}>
-      <table className="w-full text-sm" style={{ width: table.getCenterTotalSize() }}>
-        <thead className="bg-[hsl(var(--muted)/0.4)]">
-          {table.getHeaderGroups().map((hg) => (
-            <tr key={hg.id}>
-              {hg.headers.map((h) => (
-                <th key={h.id} style={{ width: h.getSize() }} className="relative px-3 py-2 text-left font-medium text-[hsl(var(--muted-foreground))] border-r border-[hsl(var(--border))] last:border-r-0">
-                  {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
-                  {h.column.getCanResize() && (
-                    <div onMouseDown={h.getResizeHandler()} className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-[hsl(var(--primary)/0.4)]" />
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr key={row.id} className={cn('border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors', row.getIsSelected() && 'bg-[hsl(var(--primary)/0.06)]')}>
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id} style={{ width: cell.column.getSize() }} className="px-3 py-2 border-r border-[hsl(var(--border))] last:border-r-0">
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
+export * from './DataGrid'

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'