@illuma-ai/codeviz 1.0.9 → 1.0.11

package/dist/index.js

@@ -24696,9 +24696,9 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
   };
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-xl overflow-hidden">
+    <div className="bg-surface-secondary rounded-lg overflow-hidden border border-border-light">
       {searchable && (
-        <div className="px-4 py-3 border-b border-border-light">
+        <div className="px-3 py-2.5">
           <input
             type="text"
             placeholder="Search..."
@@ -24711,13 +24711,13 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
       <div className="overflow-x-auto">
         <table className="w-full">
           <thead>
-            <tr className="bg-surface-primary-alt border-b border-border-medium">
+            <tr className="bg-surface-primary-alt">
               {columns.map(col => (
                 <th
                   key={col.key}
                   onClick={() => col.sortable !== false && handleSort(col.key)}
                   className={cn(
-                    'px-4 py-3 text-xs font-semibold uppercase tracking-wider text-text-secondary whitespace-nowrap',
+                    'px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-text-secondary whitespace-nowrap border-b border-border-light',
                     col.align === 'right' ? 'text-right' : 'text-left',
                     col.sortable !== false && 'cursor-pointer hover:text-text-primary select-none'
                   )}
@@ -24732,12 +24732,12 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-border-light">
+          <tbody>
             {pageData.map((row, idx) => (
               <tr
                 key={idx}
                 onClick={() => onRowClick && onRowClick(row, idx)}
-                className={cn('border-b border-border-light last:border-b-0 transition-colors', onRowClick && 'cursor-pointer hover:bg-surface-hover')}
+                className={cn('border-b border-border-light last:border-b-0 transition-colors hover:bg-surface-hover', onRowClick && 'cursor-pointer')}
               >
                 {columns.map(col => (
                   <td
@@ -24764,7 +24764,7 @@ function DataTable({ columns = [], data = [], searchable = true, pageSize = 10,
         </table>
       </div>
       {totalPages > 1 && (
-        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border-light text-xs text-text-secondary">
+        <div className="flex items-center justify-between px-4 py-2 text-xs text-text-secondary">
           <span>{sorted.length} row{sorted.length !== 1 ? 's' : ''}</span>
           <div className="flex items-center gap-2">
             <button
@@ -24806,18 +24806,18 @@ function MetricCard({ label, value, trend, trendLabel, icon, iconColor = '#00C1D
   const IconComp = icon;
 
   return (
-    <div className="bg-surface-secondary border border-border-light rounded-xl p-4 transition-all">
+    <div className="bg-surface-secondary border border-border-light rounded-lg p-3">
       <div className="flex items-center justify-between mb-1">
         <p className="text-text-secondary text-xs font-medium">{label}</p>
         {IconComp && (
-          <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-surface-tertiary">
-            <IconComp className="w-4 h-4" style={{ color: iconColor }} />
+          <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-surface-tertiary">
+            <IconComp className="w-3.5 h-3.5" style={{ color: iconColor }} />
           </div>
         )}
       </div>
       <p className="text-xl font-bold text-text-primary tabular-nums">{value}</p>
       {trend && (
-        <div className="flex items-center gap-1.5 mt-1.5">
+        <div className="flex items-center gap-1.5 mt-1">
           <span className={cn('text-xs font-medium', isPositive && 'text-status-positive', isNegative && 'text-status-negative')}>
             {isPositive && '▲'}{isNegative && '▼'} {trend}
           </span>