@otfdashkit/ui 0.1.1 → 0.1.2

package/src/blocks/workspace-members.tsx

@@ -1,61 +1 @@
-import React, { useState } from 'react'
-import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Input } from '../primitives/input'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-import { Button } from '../primitives/button'
-
-const MEMBERS = [
-  { id: '1', name: 'Jane Doe', email: 'jane@acme.com', role: 'Owner', initials: 'JD' },
-  { id: '2', name: 'Bob Smith', email: 'bob@acme.com', role: 'Admin', initials: 'BS' },
-  { id: '3', name: 'Alice Chen', email: 'alice@acme.com', role: 'Member', initials: 'AC' },
-  { id: '4', name: 'Tom Ray', email: 'tom@acme.com', role: 'Member', initials: 'TR' },
-  { id: '5', name: 'Sara Kim', email: 'sara@acme.com', role: 'Viewer', initials: 'SK' },
-]
-
-const roleVariant = (role: string): 'default' | 'secondary' | 'outline' =>
-  role === 'Owner' ? 'default' : role === 'Admin' ? 'secondary' : 'outline'
-
-export interface WorkspaceMembersProps { className?: string }
-
-export function WorkspaceMembers({ className }: WorkspaceMembersProps) {
-  const [query, setQuery] = useState('')
-  const [members, setMembers] = useState(MEMBERS)
-  const filtered = members.filter(m =>
-    m.name.toLowerCase().includes(query.toLowerCase()) ||
-    m.email.toLowerCase().includes(query.toLowerCase())
-  )
-
-  return (
-    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
-      <div className="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
-        <div>
-          <h2 className="text-sm font-semibold">Members</h2>
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">{members.length} members</p>
-        </div>
-        <div className="relative">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
-          <Input className="h-8 pl-8 text-xs w-48" placeholder="Search members..." value={query} onChange={e => setQuery(e.target.value)} />
-        </div>
-      </div>
-      <div className="divide-y divide-[hsl(var(--border))]">
-        {filtered.map(m => (
-          <div key={m.id} className="flex items-center gap-3 px-4 py-3">
-            <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">{m.initials}</AvatarFallback></Avatar>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">{m.name}</p>
-              <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{m.email}</p>
-            </div>
-            <Badge variant={roleVariant(m.role)} className="text-[10px] px-1.5 py-0.5 shrink-0">{m.role}</Badge>
-            {m.role !== 'Owner' && (
-              <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={() => setMembers(ms => ms.filter(x => x.id !== m.id))}>
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+export * from './WorkspaceMembers'

package/src/charts/sparkline.tsx

@@ -38,7 +38,7 @@ export function Sparkline({
   const max = Math.max(...data)
   const range = max - min || 1
   const pad = 2
-  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2)
+  const lastY = pad + (1 - ((data.at(-1) ?? 0) - min) / range) * (height - pad * 2)
 
   const areaPath = type === 'area'
     ? `${path} L ${width - pad},${height - pad} L ${pad},${height - pad} Z`

package/src/components/DataGrid/DataGrid.tsx

@@ -8,7 +8,7 @@ import {
   ColumnResizeMode,
 } from '@tanstack/react-table'
 import { cn } from '../utils/cn'
-import { Checkbox } from '../primitives/checkbox'
+import { Checkbox } from '../../primitives/checkbox'
 
 interface DataGridProps<T extends object> {
   columns: ColumnDef<T, any>[]

package/src/components/DataTable/DataTable.tsx

@@ -11,10 +11,10 @@ import {
 } 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'
+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>[]

package/src/components/EmptyState/EmptyState.tsx

@@ -1,24 +1,15 @@
 import React from 'react'
 import { cn } from '../../utils/cn'
-import { Button } from '../../primitives/Button/Button'
+import { Button } from '../../primitives/button'
 
 export const EmptyStateIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="empty-state-icon"
-      className={cn(
-        'flex h-12 w-12 items-center justify-center rounded-full',
-        'bg-muted text-muted-foreground',
-        className
-      )}
-      {...props}
-    />
+    <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'
 
-export interface EmptyStateProps {
+interface EmptyStateProps {
   icon?: React.ReactNode
   title: string
   description?: string
@@ -62,23 +53,16 @@ export function EmptyState({
   className,
 }: EmptyStateProps) {
   return (
-    <div
-      data-slot="empty-state"
-      className={cn(
-        'flex flex-col items-center justify-center text-center',
-        sizeMap[size],
-        className
-      )}
-    >
+    <div className={cn('flex flex-col items-center justify-center text-center', sizeMap[size], className)}>
       {icon && (
         <EmptyStateIcon className={iconSizeMap[size]}>
           {icon}
         </EmptyStateIcon>
       )}
       <div className="space-y-1 max-w-sm">
-        <h3 className={cn(titleSizeMap[size], 'text-foreground')}>{title}</h3>
+        <h3 className={cn(titleSizeMap[size], 'text-[hsl(var(--foreground))]')}>{title}</h3>
         {description && (
-          <p className={cn(descSizeMap[size], 'text-muted-foreground')}>
+          <p className={cn(descSizeMap[size], 'text-[hsl(var(--muted-foreground))]')}>
             {description}
           </p>
         )}

package/src/components/Persona/Persona.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback, AvatarImage } from '../primitives/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '../../primitives/avatar'
 
 const sizeMap = {
   sm: { avatar: 'h-7 w-7', name: 'text-sm', subtitle: 'text-xs' },

package/src/components/Stat/Stat.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
 import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
+import { Card, CardContent } from '../../primitives/card'
 
 interface StatProps {
   label: string

package/src/components/Stepper/Stepper.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Check } from 'lucide-react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 interface StepDef { title: string; description?: string }
 
@@ -40,9 +40,20 @@ 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 }: StepperProps) {
+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) => (

package/src/components/banner.tsx

@@ -1,203 +1 @@
-import React from 'react'
-import { Info, CheckCircle2, AlertTriangle, XCircle, X, ArrowRight } from 'lucide-react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../utils/cn'
-
-// ─── Variant config ──────────────────────────────────────────────────────────
-
-const bannerVariants = cva(
-  'relative flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm transition-all',
-  {
-    variants: {
-      variant: {
-        info:    'border-blue-200/80   bg-blue-50/60   dark:border-blue-800/60  dark:bg-blue-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',
-        error:   'border-red-200/80    bg-red-50/60    dark:border-red-800/60   dark:bg-red-950/30',
-        neutral: 'border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.5)]',
-      },
-    },
-    defaultVariants: { variant: 'info' },
-  }
-)
-
-const accentVariants = cva('absolute left-0 top-[12%] bottom-[12%] w-[3px] rounded-full', {
-  variants: {
-    variant: {
-      info:    'bg-blue-500',
-      success: 'bg-green-500',
-      warning: 'bg-yellow-500',
-      error:   'bg-red-500',
-      neutral: 'bg-[hsl(var(--foreground)/0.3)]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const iconVariants = cva('mt-0.5 h-4 w-4 shrink-0', {
-  variants: {
-    variant: {
-      info:    'text-blue-500   dark:text-blue-400',
-      success: 'text-green-500  dark:text-green-400',
-      warning: 'text-yellow-500 dark:text-yellow-400',
-      error:   'text-red-500    dark:text-red-400',
-      neutral: 'text-[hsl(var(--muted-foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const titleVariants = cva('font-semibold leading-snug', {
-  variants: {
-    variant: {
-      info:    'text-blue-900   dark:text-blue-100',
-      success: 'text-green-900  dark:text-green-100',
-      warning: 'text-yellow-900 dark:text-yellow-100',
-      error:   'text-red-900    dark:text-red-100',
-      neutral: 'text-[hsl(var(--foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const descriptionVariants = cva('mt-0.5 leading-snug opacity-80', {
-  variants: {
-    variant: {
-      info:    'text-blue-800   dark:text-blue-200',
-      success: 'text-green-800  dark:text-green-200',
-      warning: 'text-yellow-800 dark:text-yellow-200',
-      error:   'text-red-800    dark:text-red-200',
-      neutral: 'text-[hsl(var(--muted-foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const actionVariants = cva(
-  'inline-flex items-center gap-1 text-xs font-medium underline-offset-2 hover:underline transition-opacity hover:opacity-80',
-  {
-    variants: {
-      variant: {
-        info:    'text-blue-700   dark:text-blue-300',
-        success: 'text-green-700  dark:text-green-300',
-        warning: 'text-yellow-700 dark:text-yellow-300',
-        error:   'text-red-700    dark:text-red-300',
-        neutral: 'text-[hsl(var(--foreground))]',
-      },
-    },
-    defaultVariants: { variant: 'info' },
-  }
-)
-
-// ─── Icons ───────────────────────────────────────────────────────────────────
-
-const ICONS: Record<NonNullable<BannerVariant>, React.ReactNode> = {
-  info:    <Info className="h-4 w-4" />,
-  success: <CheckCircle2 className="h-4 w-4" />,
-  warning: <AlertTriangle className="h-4 w-4" />,
-  error:   <XCircle className="h-4 w-4" />,
-  neutral: <Info className="h-4 w-4" />,
-}
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-type BannerVariant = VariantProps<typeof bannerVariants>['variant']
-
-export interface BannerAction {
-  label: string
-  onClick: () => void
-  icon?: boolean
-}
-
-export interface BannerProps extends VariantProps<typeof bannerVariants> {
-  title?: string
-  description?: string
-  dismissible?: boolean
-  onDismiss?: () => void
-  action?: BannerAction
-  icon?: boolean
-  className?: string
-  children?: React.ReactNode
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export function Banner({
-  variant = 'info',
-  title,
-  description,
-  dismissible,
-  onDismiss,
-  action,
-  icon = true,
-  className,
-  children,
-}: BannerProps) {
-  const [dismissed, setDismissed] = React.useState(false)
-  const [exiting, setExiting] = React.useState(false)
-
-  const handleDismiss = () => {
-    setExiting(true)
-    setTimeout(() => {
-      setDismissed(true)
-      onDismiss?.()
-    }, 200)
-  }
-
-  if (dismissed) return null
-
-  return (
-    <div
-      className={cn(
-        bannerVariants({ variant }),
-        'pl-[18px]',
-        exiting && 'opacity-0 translate-x-1 scale-[0.98]',
-        'transition-all duration-200',
-        className
-      )}
-    >
-      {/* left accent bar */}
-      <span className={accentVariants({ variant })} aria-hidden />
-
-      {/* icon */}
-      {icon && (
-        <span className={iconVariants({ variant })}>
-          {ICONS[variant as NonNullable<BannerVariant>]}
-        </span>
-      )}
-
-      {/* body */}
-      <div className="min-w-0 flex-1 space-y-1">
-        {title && (
-          <p className={cn(titleVariants({ variant }), 'text-sm')}>{title}</p>
-        )}
-        {description && (
-          <p className={cn(descriptionVariants({ variant }), 'text-sm')}>{description}</p>
-        )}
-        {children && (
-          <div className={cn(descriptionVariants({ variant }), 'text-sm')}>{children}</div>
-        )}
-        {action && (
-          <button
-            onClick={action.onClick}
-            className={cn(actionVariants({ variant }), 'mt-1.5')}
-          >
-            {action.label}
-            {action.icon !== false && <ArrowRight className="h-3 w-3" />}
-          </button>
-        )}
-      </div>
-
-      {/* dismiss */}
-      {dismissible && (
-        <button
-          onClick={handleDismiss}
-          aria-label="Dismiss"
-          className="shrink-0 rounded-md p-0.5 text-[hsl(var(--muted-foreground))] opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  )
-}
+export * from './Banner/index'

package/src/components/breadcrumb.tsx

@@ -1,58 +1 @@
-import React from 'react'
-import { ChevronRight } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-interface BreadcrumbItemProps {
-  href?: string
-  label: string
-  active?: boolean
-  className?: string
-}
-
-export function BreadcrumbItem({ href, label, active, className }: BreadcrumbItemProps) {
-  return (
-    <li className={cn('flex items-center', className)}>
-      {href && !active ? (
-        <a href={href} className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">{label}</a>
-      ) : (
-        <span className="text-sm text-[hsl(var(--foreground))] font-medium">{label}</span>
-      )}
-    </li>
-  )
-}
-
-export function BreadcrumbPage({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <li aria-current="page" className={cn('flex items-center text-sm font-medium text-[hsl(var(--foreground))]', className)}>
-      {children}
-    </li>
-  )
-}
-
-export function BreadcrumbSeparator({ className }: { className?: string }) {
-  return (
-    <li role="presentation" aria-hidden="true" className={cn('flex items-center text-[hsl(var(--muted-foreground))]', className)}>
-      <ChevronRight className="h-3.5 w-3.5" />
-    </li>
-  )
-}
-
-interface BreadcrumbProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function Breadcrumb({ children, className }: BreadcrumbProps) {
-  const items = React.Children.toArray(children)
-  const withSeparators: React.ReactNode[] = []
-  items.forEach((item, i) => {
-    withSeparators.push(item)
-    if (i < items.length - 1) withSeparators.push(<BreadcrumbSeparator key={`sep-${i}`} />)
-  })
-
-  return (
-    <nav aria-label="breadcrumb">
-      <ol className={cn('flex flex-wrap items-center gap-1', className)}>{withSeparators}</ol>
-    </nav>
-  )
-}
+export * from './Breadcrumb/index'

package/src/components/command-item.tsx

@@ -1,36 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface CommandItemProps {
-  icon?: React.ReactNode
-  label: string
-  description?: string
-  shortcut?: string
-  active?: boolean
-  onClick?: () => void
-  className?: string
-}
-
-export function CommandItem({ icon, label, description, shortcut, active, onClick, className }: CommandItemProps) {
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        'flex items-center gap-3 rounded-md px-3 py-2 cursor-pointer transition-colors',
-        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
-        className
-      )}
-    >
-      {icon && <span className="shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center">{icon}</span>}
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium truncate">{label}</p>
-        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
-      </div>
-      {shortcut && (
-        <kbd className="shrink-0 pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
-          {shortcut}
-        </kbd>
-      )}
-    </div>
-  )
-}
+export { CommandItem as CommandListItem } from './CommandItem'

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'