Two month of work

resources/js/components/ui/table/Table.vue

@@ -8,8 +8,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-auto">
-    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
   </div>

resources/js/components/ui/table/TableBody.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tbody
-    data-slot="table-body"
-    :class="cn('[&_tr:last-child]:border-0', props.class)"
-  >
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
     <slot />
   </tbody>
 </template>

resources/js/components/ui/table/TableCaption.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
-  >
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
     <slot />
   </caption>
 </template>

resources/js/components/ui/table/TableCell.vue

@@ -9,10 +9,9 @@ const props = defineProps<{
 
 <template>
   <td
-    data-slot="table-cell"
     :class="
       cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "

resources/js/components/ui/table/TableFooter.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tfoot
-    data-slot="table-footer"
-    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
-  >
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>

resources/js/components/ui/table/TableHead.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th
-    data-slot="table-head"
-    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
-  >
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>

resources/js/components/ui/table/TableHeader.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <thead
-    data-slot="table-header"
-    :class="cn('[&_tr]:border-b', props.class)"
-  >
+  <thead :class="cn('[&_tr]:border-b', props.class)">
     <slot />
   </thead>
 </template>

resources/js/components/ui/table/TableRow.vue

@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tr
-    data-slot="table-row"
-    :class="cn('hover:bg-accent data-[state=selected]:bg-muted border-b transition-colors', props.class)"
-  >
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
     <slot />
   </tr>
 </template>