White mac native + notification test

client/uiwails/frontend/src/components/ui/Table.tsx

@@ -0,0 +1,72 @@
+/* Table primitives for macOS System Settings style tables */
+
+export function TableContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="rounded-[var(--radius-card)] overflow-hidden"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        boxShadow: 'var(--shadow-card)',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function TableHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <thead>
+      <tr style={{ borderBottom: '0.5px solid var(--color-separator)' }}>
+        {children}
+      </tr>
+    </thead>
+  )
+}
+
+export function TableHeaderCell({ children, onClick, className }: { children: React.ReactNode; onClick?: () => void; className?: string }) {
+  return (
+    <th
+      className={`px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wide ${onClick ? 'cursor-pointer select-none' : ''} ${className ?? ''}`}
+      style={{ color: 'var(--color-text-tertiary)' }}
+      onClick={onClick}
+    >
+      {children}
+    </th>
+  )
+}
+
+export function TableRow({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <tr
+      className={`transition-colors group/row ${className ?? ''}`}
+      style={{ borderBottom: '0.5px solid var(--color-separator)' }}
+      onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-sidebar-hover)')}
+      onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export function TableCell({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <td className={`px-4 py-3 align-middle ${className ?? ''}`}>
+      {children}
+    </td>
+  )
+}
+
+export function TableFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="px-4 py-2 text-[11px]"
+      style={{
+        borderTop: '0.5px solid var(--color-separator)',
+        color: 'var(--color-text-tertiary)',
+      }}
+    >
+      {children}
+    </div>
+  )
+}