uifolio 0.5.4 → 0.5.5

package/README.md

@@ -90,7 +90,7 @@ only marks the installation as complete when that is relevant.
 | ResizablePanels | `src/components/ui/resizable.tsx` | horizontal/vertical groups, handles, min-size, keyboard |
 | OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
 | ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
-| Table | `src/components/ui/table.tsx` | typed data table, uniform `px-4` cells and a wider gap before Actions, selection and row actions |
+| Table | `src/components/ui/table.tsx` | shadcn-style typed table, uniform `px-4` cells and a wider gap before Actions, select-all checkbox, row actions |
 
 Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",

package/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { useEffect, useRef, type ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { useControllableValue } from '@/lib/use-controllable'
 
@@ -8,7 +8,7 @@ export interface TableColumn<T> {
   /** Stable identifier, also used as the React key of the column. */
   key: string
   header: ReactNode
-  cell: (row: T) => ReactNode
+  cell: (row: T, index: number) => ReactNode
   /** Applied to the header and body cells: width, nowrap… */
   className?: string
   align?: 'left' | 'center' | 'right'
@@ -36,9 +36,10 @@ function alignClass(align: TableColumn<unknown>['align']): string {
 }
 
 /**
- * Data table with a shadcn-like API: typed columns, optional selection and a
- * dedicated actions column. Every cell on the left shares the same `px-4`
- * padding; the actions column keeps a wider `pl-10` gap with the last column.
+ * Data table with a shadcn-like API: typed columns, an optional select-all
+ * checkbox, and a dedicated actions column. Every cell on the left shares the
+ * same `px-4` padding; the actions column keeps a wider `pl-10` gap with the
+ * last column.
  */
 export function Table<T>({
   columns,
@@ -59,6 +60,17 @@ export function Table<T>({
     defaultSelectedKeys,
     onSelectionChange,
   )
+  const selectAllRef = useRef<HTMLInputElement>(null)
+
+  const keys = rows.map((row) => String(rowKey(row)))
+  const allSelected = keys.length > 0 && keys.every((key) => selection.includes(key))
+  const someSelected = keys.some((key) => selection.includes(key))
+
+  useEffect(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = someSelected && !allSelected
+    }
+  }, [someSelected, allSelected])
 
   const toggle = (key: string, checked: boolean) => {
     setSelection((current) =>
@@ -70,13 +82,29 @@ export function Table<T>({
     )
   }
 
-  const columnsCount = columns.length + (actions ? 1 : 0)
+  const toggleAll = (checked: boolean) => {
+    setSelection(checked ? keys : [])
+  }
+
+  const columnsCount = columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0)
 
   return (
     <div className={cn('w-full overflow-x-auto rounded-sm border bg-card', className)}>
       <table className="w-full min-w-[860px] border-collapse text-left text-xs">
         <thead>
           <tr className="border-b bg-muted/50">
+            {selectable && (
+              <th scope="col" className="w-10 px-4 py-3.5">
+                <input
+                  ref={selectAllRef}
+                  type="checkbox"
+                  checked={allSelected}
+                  onChange={(event) => toggleAll(event.target.checked)}
+                  aria-label="Select all rows"
+                  className="size-4 cursor-pointer rounded-sm border-border accent-primary"
+                />
+              </th>
+            )}
             {columns.map((column) => (
               <th
                 key={column.key}
@@ -108,7 +136,7 @@ export function Table<T>({
               </td>
             </tr>
           ) : (
-            rows.map((row) => {
+            rows.map((row, rowIndex) => {
               const key = String(rowKey(row))
               const selected = selection.includes(key)
 
@@ -122,7 +150,19 @@ export function Table<T>({
                     selected ? 'bg-primary/5' : 'hover:bg-muted/30',
                   )}
                 >
-                  {columns.map((column, index) => (
+                  {selectable && (
+                    <td className="w-10 px-4 py-3.5 align-middle">
+                      <input
+                        type="checkbox"
+                        checked={selected}
+                        onChange={(event) => toggle(key, event.target.checked)}
+                        onClick={(event) => event.stopPropagation()}
+                        aria-label={`Select row ${key}`}
+                        className="size-4 cursor-pointer rounded-sm border-border accent-primary"
+                      />
+                    </td>
+                  )}
+                  {columns.map((column) => (
                     <td
                       key={column.key}
                       className={cn(
@@ -131,21 +171,7 @@ export function Table<T>({
                         column.className,
                       )}
                     >
-                      {selectable && index === 0 ? (
-                        <div className="flex items-center gap-3">
-                          <input
-                            type="checkbox"
-                            checked={selected}
-                            onChange={(event) => toggle(key, event.target.checked)}
-                            onClick={(event) => event.stopPropagation()}
-                            aria-label={`Select row ${key}`}
-                            className="size-4 shrink-0 cursor-pointer rounded-sm border-border accent-primary"
-                          />
-                          {column.cell(row)}
-                        </div>
-                      ) : (
-                        column.cell(row)
-                      )}
+                      {column.cell(row, rowIndex)}
                     </td>
                   ))}
                   {actions && (