feat(Table): implement component (#2364)

src/theme/command-palette.ts

@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     content: 'relative overflow-hidden',
     viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
     group: 'p-1 isolate',
-    empty: 'py-6 text-center text-sm',
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
     label: 'px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]',
     item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
     itemLeadingIcon: ['shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],

src/theme/index.ts

@@ -35,6 +35,7 @@ export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as slider } from './slider'
 export { default as switch } from './switch'
+export { default as table } from './table'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
 export { default as toast } from './toast'

src/theme/table.ts

@@ -0,0 +1,83 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative overflow-auto',
+    base: 'min-w-full overflow-clip',
+    thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]',
+    tbody: 'divide-y divide-[var(--ui-border)]',
+    tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
+    th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
+    td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
+        td: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0'
+      }
+    },
+    sticky: {
+      true: {
+        thead: 'sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur'
+      }
+    },
+    loading: {
+      true: {
+        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'
+      }
+    },
+    loadingAnimation: {
+      'carousel': '',
+      'carousel-inverse': '',
+      'swing': '',
+      'elastic': ''
+    },
+    loadingColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((loadingColor: string) => ({
+    loading: true,
+    loadingColor,
+    class: {
+      thead: `after:bg-[var(--ui-${loadingColor})]`
+    }
+  })), {
+    loading: true,
+    loadingColor: 'neutral',
+    class: {
+      thead: 'after:bg-[var(--ui-bg-inverted)]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'carousel',
+    class: {
+      thead: 'after:animate-[carousel_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'carousel-inverse',
+    class: {
+      thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'swing',
+    class: {
+      thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'elastic',
+    class: {
+      thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
+    }
+  }],
+  defaultVariants: {
+    loadingColor: 'primary',
+    loadingAnimation: 'carousel'
+  }
+})