uifolio 0.5.3 → 0.5.4

package/README.md

@@ -2,46 +2,8 @@
 
 [![npm version](https://img.shields.io/npm/v/uifolio.svg)](https://www.npmjs.com/package/uifolio)
 [![license](https://img.shields.io/npm/l/uifolio.svg)](https://www.npmjs.com/package/uifolio)
-[![node](https://img.shields.io/node/v/uifolio.svg)](https://www.npmjs.com/package/uifolio)
 
-My component and animation library: the code lives in your project, gets copied and edited.
-
-The `uifolio` npm package contains the CLI, the 14 components and their 9 helpers — nothing else.
-The demo site (Vite, animations, playgrounds) lives in the project repository and is not part
-of the package.
-
-## Getting started
-
-```bash
-npm install
-npm run dev      # demo server (http://localhost:5173)
-npm run build    # typecheck + production build
-npm run preview  # serve the build
-npm run lint     # oxlint
-npm test         # CLI tests (copy, color, npm manifest)
-```
-
-Routes (hash):
-
-- `#/` — home page (UIFolio identity)
-- `#/docs` — introduction, installation, theme
-- `#/components` — documented catalog
-- `#/components/video` — VideoPlayer playground
-- `#/components/calendar`, `/time`, `/audio`, `/stories`, `/editor`, `/upload`,
-  `/shortcuts`, `/panels`, `/choice`, `/color-picker`, `/icon-picker`
-- `#/animations/otp` — animated OTP demo
-- `#/animations/horizontal-accordion`, `/storytelling`, `/stacking`,
-  `/scroll-text`, `/image-crossfade` — scroll animations and crossfades
-
-**Light/dark** theme: button in the header, choice persisted in
-`localStorage (uifolio-theme)`, initialized before the first paint (no flash),
-default = system preference.
-
-**Global customization**: the right panel (or the accordion on mobile) sets the
-`--primary` color and the `--radius` for every component. The advanced picker offers
-saturation/lightness, hue, alpha, eyedropper, RGB channels, presets and HEX/RGB/HSL/RGBA
-formats. The choice is persisted in `localStorage (uifolio:design)` and reused in the
-copied CLI commands (`--color`, `--radius`).
+A small, theme-friendly UI registry (components live in the target project, copied and edited) with a shadcn-like CLI (`uifolio add`).
 
 ## Using the components in another project (CLI)
 
@@ -69,21 +31,19 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 | `uifolio init` | writes `uifolio.json` (dir, lib, alias) in the target project |
 | `uifolio add <names...>` | copies the component **+ transitive dependencies** (helpers `@/lib/*`) |
 
-Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`),
-`--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`),
-`--page <path>` (created if missing), `--interactive` (force the questions),
-`--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
+Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
 
-`add` does not stop at the copy. Without `--dir` or `--page`, the CLI asks for the
-components folder, then:
+`add` does not stop at the copy. The components always land in
+`src/components/ui` (override with `--dir`) and the page imports them through
+the `@/` alias. Without `--page`, the CLI asks where to use them:
 
-1. *Do you already have a file ready to receive the component (Calendar)?*
-   `y` → *In which file should the component (Calendar) be copied?* (format
-   `src/pages/calendar.tsx`): the import and `<Component />` are added without
-   duplication, and the file is created when missing;
-2. `n` → *Would you like to create a new folder and an import file?*
-   `y` → *Please specify the new path*: the folder and the file are created;
-   `n` → install only, no file is touched.
+1. *Do you already have a file ready to receive the component (…component…) (y/N) ?* `yes` → *In which file should the component (…component…) be copied (e.g. src/pages/calendar.tsx) ?*: the import and a ready-to-render example are added without duplication, and the file is created when missing;
+2. `no` → *Would you like to create a new folder and an import file (Y/n) ?* `yes` → *Please specify the new path (e.g. src/pages/calendar.tsx) ?*: the folder and the file are created; `no` → install only, no file is touched.
+
+The example is a small component (`<CalendarExample />` plus its definition)
+that carries the data and props each component needs (items for `Stories` and
+`CommandMenu`, a source for the players, children for the resizable panels…),
+so the component is visible immediately instead of an empty `<Component />`.
 
 Answering `-` to a path question installs the component without creating or
 modifying any page.
@@ -103,65 +63,17 @@ At the end, the CLI prints the detected npm dependencies, for example:
 npm install clsx tailwind-merge lucide-react hls.js
 ```
 
-## Light/dark themes
-
-- CSS tokens: `:root` (light) and `.dark` (dark) in `src/index.css`,
-  wired to Tailwind through `@theme inline` + `@custom-variant dark`.
-- `useTheme()` (`src/lib/use-theme.ts`): `{ theme, setTheme, toggle }`,
-  persistence in `localStorage('uifolio-theme')`.
-- `<ThemeToggle />` (`src/components/theme-toggle.tsx`): Sun/Moon button.
-- No fixed color anywhere in the components: everything goes through
-  `background`, `foreground`, `card`, `muted`, `border`, `primary`, `accent`, `ring`.
-
-## Real upload
-
-`FileUpload` knows nothing about your backend: it calls
-`uploader(file, onProgress) => Promise<url>` and shows progress, success and a link
-to the returned public URL.
-
-The demo uses `createUploader()` (`src/lib/uploader.ts`):
+### Preview parity
 
-1. `POST /api/upload/sign` → `{ key, uploadUrl, publicUrl }` (signed URL);
-2. `PUT` of the file through **XHR with progress**;
-3. **automatic retry** (2 retries, backoff) reusing the same signed URL;
-   a 4xx does not retry (final refusal).
+The docs preview and the installed component render identically because the page
+written by the CLI ships a demo of the same shape as the docs. If a component
+needs data to show anything (for example Stories, CommandMenu, FileUpload,
+AudioPlayer, VideoPlayer or the resizable panels), the page is created with that
+data, not an empty instance.
 
-On the server side, the `upload-plugin.ts` plugin (wired in `vite.config.ts`):
-
-- **Local mode (default, zero config)**: writes into `public/uploads/` and serves
-  `/uploads/<key>`;
-- **S3-compatible mode** (AWS S3, Cloudflare R2, MinIO): when `S3_ENDPOINT`,
-  `S3_BUCKET`, `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY` are set, the server
-  returns a **SigV4** signed PUT URL (implemented with `node:crypto`, no SDK)
-  and the browser uploads straight to the bucket.
-
-Configuration in `.env` — see `.env.example`.
-
-Plugging in your own uploader:
-
-```tsx
-const upload = createUploader({ signEndpoint: '/api/upload/sign' })
-
-// or your own backend:
-const upload = async (file: File, onProgress: (v: number) => void) => {
-  const form = new FormData()
-  form.append('file', file)
-  const res = await fetch('/api/your-endpoint', { method: 'POST', body: form })
-  const { url } = await res.json()
-  return url
-}
-
-<FileUpload accept="image/*" uploader={upload} onChange={setFiles} />
-```
-
-## Stack
-
-- Vite 8 · React 19 · TypeScript
-- Tailwind CSS 4 (CSS tokens, no JS config)
-- `lucide-react` for icons, `clsx` + `tailwind-merge` for `cn()`
-- `hls.js` imported **dynamically**, only when a `.m3u8` stream is played
-- No other dependency: editor, calendar, time picker, panels, palette,
-  OTP and SigV4 signing are home-made
+If the docs entry for a component is missing, the detail page does not show a blank
+placeholder. It falls back to the preview as-is (or a minimal coherent state) and
+only marks the installation as complete when that is relevant.
 
 ## Components
 
@@ -178,142 +90,24 @@ const upload = async (file: File, onProgress: (v: number) => void) => {
 | 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 |
 
 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`,
 `src/lib/use-theme.ts`, `src/lib/use-hotkeys.ts`, `src/lib/use-reduced-motion.ts`.
 
-## VideoPlayer
-
-```tsx
-<VideoPlayer
-  sources={file ?? '/video.mp4'}
-  aspectRatio="16/9"
-  fit="cover"
-  controls="full"          // full | minimal | none
-  accent="#facc15"
-  autoPlay
-  muted
-  loop
-  lazy
-  subtitles={[
-    { src: '/fr.vtt', label: 'French', lang: 'fr', default: true },
-    { src: '/en.vtt', label: 'English', lang: 'en' },
-  ]}
-  subtitleClassName="bottom-20"
-  overlay={(state) => <MyBadge playing={state.playing} />}
-/>
-```
-
-- Sources: direct URL, `File`/`Blob`, quality list (`{ src, quality }`), `.m3u8`,
-  YouTube and Vimeo.
-- For embeds, the iframe is only injected on click (facade + thumbnail) and native
-  controls are hidden: the component bar drives the platform player
-  (progress, time, volume, speed, play/pause) through `postMessage`.
-- `ref` exposes `play`, `pause`, `seek`, `mute`, `setVolume`, `setPlaybackRate`,
-  `requestFullscreen`, `getVideo`.
-- The progress bar and the volume follow the global `--radius` (handles
-  included), like the rest of the catalog.
-- Optimizations: lazy loading, pause off-screen, controlled `preload`, `hls.js` in a separate
-  chunk, revoked object URLs, quality switch without losing the position.
-- Subtitles: tolerant VTT parsing, file or URL tracks, free styling through
-  `subtitleClassName`, CC menu.
-
-## Calendar / TimePicker
-
-```tsx
-const [date, setDate] = useState<CalendarValue>(null)
-<Calendar mode="single" value={date} onChange={setDate} min={min} max={max} />
-<Calendar mode="range" value={range} onChange={setRange} />
-<Calendar disabled={(day) => day.getDay() === 0} />
-
-<TimePicker value={time} onChange={setTime} withSeconds step={15} hour12 />
-```
-
-Manual input accepts `dd/mm/yyyy`, `dd-mm-yyyy` and `yyyy-mm-dd`.
-
-## Audio / Stories
-
-```tsx
-<AudioPlayer src="/audio.wav" title="Title" cover="/cover.svg" accent="#facc15" />
-<AudioPlayer variant="compact" src="/audio.wav" title="Title" />
-
-<Stories items={stories} open={open} onOpenChange={setOpen} duration={5000} />
-```
-
-A story can be an image, a video or a text slide with its own background and duration.
-
-## Editor / Upload / Shortcuts / Panels / OTP
-
-```tsx
-<RichTextEditor value={html} onChange={setHtml} toolbar />
-
-<FileUpload accept="image/*,video/*" maxFiles={3} uploader={upload} onChange={setFiles} />
-
-<CommandMenu items={items} open={open} onOpenChange={setOpen} />
-useHotkeys({ 'mod+k': () => setOpen(true) })
-
-<ResizablePanelGroup direction="horizontal">
-  <ResizablePanel defaultSize={34} minSize={20}>…</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={66} minSize={25}>…</ResizablePanel>
-</ResizablePanelGroup>
-
-<OtpInput length={4} value={code} onChange={setCode} onComplete={validate} />
-```
-
-The OTP aligns 4 to 8 fields, forms a circle on validation and then shows a check.
-The animation respects `prefers-reduced-motion`.
-
-## Animations
-
-Every animation has its own documented page: `#/animations/otp` for the OTP, then
-`#/animations/horizontal-accordion` and `#/animations/storytelling` for the
-horizontal cards, and `#/animations/stacking` for the cards that stack on scroll with
-a text color driven by progress. Colors follow `--primary`. The number of cards is set
-from 4 to 8 right in each preview. These stand-alone demos are not installable
-through the CLI.
-
 ## Publishing the package
 
-The published package only contains the CLI, the components and the helpers (`files`): no
-runtime dependency, React and Tailwind stay in `devDependencies` so they are not installed
-by people running `npx uifolio`.
-
 ```bash
-npm login                          # once per machine
-npm profile enable-2fa auth-and-writes   # npm refuses to publish without 2FA
-npm publish --otp 123456           # prepublishOnly checks cli/uifolio.mjs
+npm publish
 ```
 
-A *granular* token with “Bypass 2FA” also works, but npm is progressively restricting
-these tokens for publishing: 2FA + `--otp` is the safe path.
-
-Then `npx uifolio@latest add <component>` and `pnpm dlx uifolio@latest add <component>`
-work.
+Automatic publishing is wired in `.github/workflows/publish.yml` and runs on tag push.
 
 ### Automatic publishing (GitHub Actions)
 
-`.github/workflows/publish.yml` publishes to npm on every `v*` tag: it checks that the tag
-matches the `package.json` version, installs with `npm ci`, runs `oxlint`,
-`npm pack --dry-run` and `npm test`, then publishes through **trusted publishing** (OIDC, no
-stored token). A second job then creates the tag's **GitHub Release** with notes generated
-from the commits.
-
-```bash
-npm version patch        # 0.3.0 → 0.3.1, commit + tag v0.3.1
-git push --follow-tags   # triggers the workflow
-```
-
-Prerequisites, once:
+The workflow publishes on tag `v*`. Run `git tag vX.Y.Z && git push --tags` to publish.
 
-1. first manual publication (above) — the package must exist on npm;
-2. npmjs.com → `uifolio` → Settings → **Trusted publishing** → GitHub Actions:
-   organization `Barronakn`, repository `UIfolio`, workflow `publish.yml`,
-   “npm publish” action allowed;
-3. a new configuration must complete its first publication **within 2 days**,
-   otherwise it expires and has to be recreated.
+More info: [README on GitHub](https://github.com/Barronakn/UIfolio#readme).
 
-The workflow must be present on the tagged commit. Once enabled, you can harden the
-package with Settings → Publishing access → “Require two-factor authentication and
-disallow tokens”.
+License: [MIT](https://opensource.org/license/mit).

package/cli/uifolio.mjs

@@ -22,8 +22,8 @@
  *   --force              overwrite existing files
  *   --dry-run            print what would be copied without writing anything
  *
- * Without --dir / --page, the CLI asks interactively (terminal) which folder
- * receives the components and where to use them.
+ * Without --page, the CLI asks interactively (terminal) where to use them.
+ * The components always land in src/components/ui unless --dir overrides it.
  *
  * Examples:
  *   node cli/uifolio.mjs add calendar otp --cwd ../my-project
@@ -164,10 +164,11 @@ function externalDeps(source) {
   return [...deps]
 }
 
-/** Real exported name of the file (otp-input → OtpInput). */
+/** Real exported name of the file (otp-input → OtpInput, icon-picker → IconPicker). */
 function componentExportName(source, fallback) {
-  const matches = [...source.matchAll(/export\s+function\s+([A-Z][A-Za-z0-9_]*)/g)].map((match) => match[1])
-  return matches[0] ?? fallback
+  const exported = [...source.matchAll(/export\s+function\s+([A-Z][A-Za-z0-9_]*)/g)].map((match) => match[1])
+  const pascal = fallback.replace(/(^|-)([a-z0-9])/g, (_, __, char) => char.toUpperCase())
+  return exported.find((name) => name === pascal) ?? exported[0] ?? fallback
 }
 
 /** .tsx files under src/pages of the target project, sorted. */
@@ -222,8 +223,9 @@ function createPrompter(flags) {
   })
 
   async function ask(question, fallback) {
+    const text = question.trim().replace(/\?+$/, '')
     const suffix = fallback ? ` (${fallback})` : ''
-    process.stdout.write(`\n  \x1b[36m?\x1b[0m ${question}${suffix} : `)
+    process.stdout.write(`\n  \x1b[36m${text}${suffix} ?\x1b[0m `)
 
     let answer
     if (queued.length > 0) answer = queued.shift()
@@ -243,7 +245,7 @@ function createPrompter(flags) {
     ask,
     /** y / yes / n / no (French values tolerated as fallback). */
     async confirm(question, fallback = false) {
-      const answer = await ask(`${question} (y/n)`)
+      const answer = await ask(question, fallback ? 'Y/n' : 'y/N')
       const value = String(answer ?? '')
         .trim()
         .toLowerCase()
@@ -463,10 +465,179 @@ function writeTheme({ cwd, accent, radius, dryRun }) {
 /* Usage du composant dans une page                                           */
 /* -------------------------------------------------------------------------- */
 
-/** Chemin d'import relatif, sans extension, en slashs. */
-function importSpecifier(fromDir, target) {
-  const rel = relative(fromDir, target).replace(/\\/g, '/')
-  return rel.startsWith('.') ? rel : `./${rel}`
+/** Import specifier through the project alias: @/components/ui/calendar. */
+function aliasImport(cwd, componentsDir, name, alias) {
+  const relativePath = relative(resolve(cwd), join(resolve(cwd, componentsDir), name))
+    .replace(/\\/g, '/')
+    .replace(/^src\//, '')
+  return `${alias}/${relativePath}`
+}
+
+/**
+ * Example generated with the page: an instance that renders right away.
+ * A bare `<Component />` shows nothing for dialogs, players, radio groups or
+ * the animated wrappers that require children, so these examples carry the
+ * props and data each one needs.
+ */
+const USAGE_EXAMPLES = {
+  'audio-player': {
+    body: `  return (
+    <AudioPlayer
+      src="/sample.wav"
+      title="Test signal"
+      subtitle="Generated loop · 8 s · WAV"
+      accent="#10B981"
+    />
+  )
+`,
+  },
+  'video-player': {
+    body: `  return <VideoPlayer sources="/sample-720.mp4" aspectRatio="16/9" muted loop />
+`,
+  },
+  'file-upload': {
+    body: `  return <FileUpload accept="image/*,video/*" maxSizeMb={25} maxFiles={3} />
+`,
+  },
+  choice: {
+    imports: ["import { useState } from 'react'"],
+    body: `  const [checked, setChecked] = useState(true)
+
+  return (
+    <Choice
+      checked={checked}
+      onChange={setChecked}
+      label="Email alerts"
+      description="Get a summary every week."
+    />
+  )
+`,
+  },
+  'command-menu': {
+    imports: ["import { useState } from 'react'"],
+    body: `  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="space-y-3">
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="rounded-full bg-primary px-4 py-2 text-xs font-medium text-primary-foreground"
+      >
+        Open the palette
+      </button>
+      <CommandMenu
+        open={open}
+        onOpenChange={setOpen}
+        items={[
+          { id: 'home', label: 'Home', group: 'Navigation', action: () => {} },
+          { id: 'components', label: 'Components', group: 'Navigation', action: () => {} },
+        ]}
+      />
+    </div>
+  )
+`,
+  },
+  stories: {
+    imports: ["import { useState } from 'react'"],
+    types: ['StoryItem'],
+    body: `  const [open, setOpen] = useState(false)
+  const items: StoryItem[] = [
+    { type: 'image', src: '/story-1.svg', title: 'Dawn', duration: 5000 },
+    { type: 'text', title: 'Text only', text: 'A story can be plain text.', duration: 5000 },
+  ]
+
+  return (
+    <div className="space-y-3">
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="rounded-full bg-primary px-4 py-2 text-xs font-medium text-primary-foreground"
+      >
+        Open the stories
+      </button>
+      <Stories items={items} open={open} onOpenChange={setOpen} />
+    </div>
+  )
+`,
+  },
+  resizable: {
+    members: ['ResizablePanel', 'ResizableHandle'],
+    body: `  return (
+    <ResizablePanelGroup className="h-64 rounded-xl border">
+      <ResizablePanel className="p-4">Left panel</ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel className="p-4">Right panel</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+`,
+  },
+  motion: {
+    body: `  return (
+    <FadeIn>
+      <p className="text-sm">Fade in on mount.</p>
+    </FadeIn>
+  )
+`,
+  },
+  table: {
+    imports: ["import { useState } from 'react'"],
+    members: ['type TableColumn'],
+    body: `  const [selected, setSelected] = useState<string[]>([])
+  type Row = { id: string; name: string; status: string; total: number }
+  const rows: Row[] = [
+    { id: 'finanx', name: 'Finanx', status: 'Active', total: 0 },
+    { id: 'facebook', name: 'Facebook', status: 'Active', total: 408221304 },
+  ]
+  const columns: TableColumn<Row>[] = [
+    { key: 'name', header: 'Name', cell: (row) => row.name },
+    { key: 'status', header: 'Status', cell: (row) => row.status },
+    { key: 'total', header: 'Total received', cell: (row) => row.total },
+  ]
+
+  return (
+    <Table
+      rows={rows}
+      columns={columns}
+      rowKey={(row) => row.id}
+      selectable
+      selectedKeys={selected}
+      onSelectionChange={setSelected}
+    />
+  )
+`,
+  },
+}
+
+/** Example component written next to the page, plus the imports it needs. */
+function exampleFor({ name, exportName }) {
+  const spec = USAGE_EXAMPLES[name]
+  const component = `${exportName}Example`
+  if (!spec) {
+    return {
+      component,
+      imports: [],
+      types: [],
+      members: [],
+      code: `function ${component}() {\n  return <${exportName} />\n}\n`,
+    }
+  }
+  return {
+    component,
+    imports: spec.imports ?? [],
+    types: spec.types ?? [],
+    members: spec.members ?? [],
+    code: `function ${component}() {\n${spec.body}}\n`,
+  }
+}
+
+/** Appends the example components that are not in the file yet. */
+function addExamples(source, examples) {
+  const missing = examples.filter(
+    ({ component }) => !new RegExp(`function\\s+${component}\\s*\\(`).test(source),
+  )
+  if (missing.length === 0) return source
+  return `${source.trimEnd()}\n\n${missing.map(({ code }) => code.trimEnd()).join('\n\n')}\n`
 }
 
 /** Inserts the imports after the last import of the file. */
@@ -563,33 +734,49 @@ function addJsxUsage(source, exportNames) {
 }
 
 /**
- * Writes (or completes) the chosen file: imports from the real folder of the
- * composants + appel `<Composant />` dans le JSX.
+ * Writes (or completes) the chosen file: `@/` imports from the real folder of
+ * the components, a working example (`<CalendarExample />`) and its definition.
  */
-function writeUsage({ cwd, target, componentsDir, components, dryRun }) {
+function writeUsage({ cwd, target, componentsDir, components, alias, dryRun }) {
   if (existsSync(target) && statSync(target).isDirectory()) {
     fail(`${relative(cwd, target)} is a folder: give a file (e.g. src/pages/${components[0].name}.tsx).`)
   }
   const created = !existsSync(target)
-  const lines = components.map(({ name, exportName }) =>
-    `import { ${exportName} } from '${importSpecifier(dirname(target), join(resolve(cwd, componentsDir), name))}'`,
-  )
+  const entries = components.map((component) => ({
+    exportName: component.exportName,
+    specifier: aliasImport(cwd, componentsDir, component.name, alias),
+    example: exampleFor(component),
+  }))
   const label = relative(cwd, target)
-  const names = components.map((component) => component.exportName)
+
+  const imports = new Set()
+  for (const { exportName, specifier, example } of entries) {
+    for (const line of example.imports) imports.add(line)
+    imports.add(`import { ${[exportName, ...example.members].join(', ')} } from '${specifier}'`)
+    if (example.types.length > 0) {
+      imports.add(`import type { ${example.types.join(', ')} } from '${specifier}'`)
+    }
+  }
+
+  const orderedImports = [...imports].sort(
+    (left, right) => Number(left.includes(`'${alias}/`)) - Number(right.includes(`'${alias}/`)),
+  )
 
   if (created) {
     const body = [
-      ...lines,
-      '',
-      `export default function ${names[0]}Page() {`,
-      '  return (',
-      '    <main className="space-y-6 p-6">',
-      ...names.map((name) => `      <${name} />`),
-      '    </main>',
-      '  )',
-      '}',
+      orderedImports.join('\n'),
+      entries.map(({ example }) => example.code.trimEnd()).join('\n\n'),
+      [
+        `export default function ${entries[0].exportName}Page() {`,
+        '  return (',
+        '    <main className="space-y-6 p-6">',
+        ...entries.map(({ example }) => `      <${example.component} />`),
+        '    </main>',
+        '  )',
+        '}',
+      ].join('\n'),
       '',
-    ].join('\n')
+    ].join('\n\n')
     if (!dryRun) {
       try {
         mkdirSync(dirname(target), { recursive: true })
@@ -601,8 +788,13 @@ function writeUsage({ cwd, target, componentsDir, components, dryRun }) {
     ok(`${dryRun ? '[dry-run] ' : ''}page created: ${label}`)
   } else {
     const source = readFileSync(target, 'utf8')
-    const withImports = addImports(source, lines)
-    const { source: updated, added } = addJsxUsage(withImports, names)
+    const withImports = addImports(source, [...imports])
+    const names = entries.map(({ example }) => example.component)
+    const { source: withUsage, added } = addJsxUsage(withImports, names)
+    const updated = addExamples(
+      withUsage,
+      entries.map(({ example }) => example),
+    )
     if (!dryRun) {
       try {
         writeFileSync(target, updated, 'utf8')
@@ -617,7 +809,7 @@ function writeUsage({ cwd, target, componentsDir, components, dryRun }) {
     }
   }
 
-  for (const name of names) info(`· <${name} />`)
+  for (const { example } of entries) info(`· <${example.component} />`)
 }
 
 /* -------------------------------------------------------------------------- */
@@ -672,20 +864,26 @@ async function chooseUsageTarget({ prompter, cwd, names, exportNames }) {
   if (candidates.length > 0) info(`existing files: ${candidates.join(', ')}`)
 
   const ready = await prompter.confirm(
-    `Do you already have a file ready to receive the component (${label})?`,
+    `Do you already have a file ready to receive the component (${label})`,
     false,
   )
 
   let answer
   if (ready) {
-    answer = await prompter.ask(`In which file should the component (${label}) be copied? (${pathFormat})`, suggestion)
+    answer = await prompter.ask(
+      `In which file should the component (${label}) be copied`,
+      pathFormat,
+    )
   } else {
-    const create = await prompter.confirm('Would you like to create a new folder and an import file?', true)
+    const create = await prompter.confirm(
+      'Would you like to create a new folder and an import file',
+      true,
+    )
     if (!create) {
       info('the component is installed but not used in any file.')
       return null
     }
-    answer = await prompter.ask(`Please specify the new path (${pathFormat})`, suggestion)
+    answer = await prompter.ask('Please specify the new path', pathFormat)
   }
 
   // “ - ”: installation only, like the “no” answer.
@@ -730,20 +928,10 @@ async function commandAdd({ positional, flags }) {
 
   const prompter = createPrompter(flags)
   try {
-    // 1. Dossier d'import des composants.
-    let componentsDir = normalizeComponentsDir(
+    // 1. Dossier d'import des composants : toujours src/components/ui.
+    const componentsDir = normalizeComponentsDir(
       typeof flags.dir === 'string' ? flags.dir : config.dir ?? DEFAULT_COMPONENTS_DIR,
     )
-    if (prompter && typeof flags.dir !== 'string') {
-      // A file path was already accepted here (mkdir relative to the root).
-      for (let attempts = 0; ; attempts += 1) {
-        const fallback = attempts === 0 ? componentsDir : DEFAULT_COMPONENTS_DIR
-        const answer = await prompter.ask('In which folder should the components be copied?', fallback)
-        componentsDir = normalizeComponentsDir(answer ?? DEFAULT_COMPONENTS_DIR)
-        if (!looksLikeFile(componentsDir) || attempts >= 2) break
-        info(`"${componentsDir}" is a file, not a folder: give a folder, e.g. ${DEFAULT_COMPONENTS_DIR}.`)
-      }
-    }
     if (looksLikeFile(componentsDir)) {
       fail(`"${componentsDir}" is a file: give a folder (e.g. ${DEFAULT_COMPONENTS_DIR}).`)
     }
@@ -807,7 +995,16 @@ async function commandAdd({ positional, flags }) {
         exportNames: components.map((component) => component.exportName),
       })
     }
-    if (pageTarget) writeUsage({ cwd, target: pageTarget, componentsDir, components, dryRun })
+    if (pageTarget) {
+      writeUsage({
+        cwd,
+        target: pageTarget,
+        componentsDir,
+        components,
+        alias: targetAlias,
+        dryRun,
+      })
+    }
 
     if (written.size > 0 || dryRun) {
       console.log('\n  Detected npm dependencies:')
@@ -847,11 +1044,13 @@ Options:
   --force           overwrite existing files
   --dry-run         simulate without writing
 
-Without --dir or --page, the CLI asks in which folder to copy the components,
-then whether a file is already ready to receive them. The component is either
-added to an existing file, added to a new folder + import file, or installed
-only. Colors go through a Tailwind CSS 4 theme (uifolio-theme.css, @theme), so
-classes like bg-primary and text-muted-foreground stay in the code.
+Without --page, the CLI asks whether a file is already ready to receive the
+components: they are added to that file, to a new folder + file, or installed
+only. Files go to src/components/ui (override with --dir) and the page imports
+them through the alias (@/components/ui/...). The page also gets a working
+example, with the data and props each component needs, so it shows immediately.
+Colors go through a Tailwind CSS 4 theme (uifolio-theme.css, @theme), so classes
+like bg-primary and text-muted-foreground stay in the code.
 
 Examples:
   node cli/uifolio.mjs add video-player calendar otp --cwd ../my-project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "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",
@@ -29,6 +29,7 @@
     "file-upload",
     "rich-text-editor",
     "command-menu",
+    "data-table",
     "resizable-panels",
     "time-picker",
     "cadence",

package/src/components/ui/audio-player.tsx

@@ -136,7 +136,7 @@ export function AudioPlayer({
               <button
                 type="button"
                 onClick={() => void togglePlay()}
-                aria-label={playing ? 'Mettre en pause' : 'Lire'}
+                aria-label={playing ? 'Pause' : 'Play'}
                 className="grid size-9 shrink-0 place-items-center rounded-full bg-[var(--ap-accent)] text-black shadow-sm transition hover:brightness-110"
               >
                 {playing ? (
@@ -157,7 +157,7 @@ export function AudioPlayer({
                   step={0.05}
                   value={Math.min(currentTime, duration || 0)}
                   onChange={(event) => seek(Number(event.target.value))}
-                  aria-label="Position de lecture"
+                  aria-label="Playback position"
                   className="h-1 w-full min-w-0 cursor-pointer appearance-none rounded-full"
                   style={{
                     accentColor: accent,
@@ -176,7 +176,7 @@ export function AudioPlayer({
           <button
             type="button"
             onClick={() => void togglePlay()}
-            aria-label={playing ? 'Mettre en pause' : 'Lire'}
+            aria-label={playing ? 'Pause' : 'Play'}
             className="grid size-8 shrink-0 place-items-center rounded-full bg-[var(--ap-accent)] text-black transition hover:brightness-110"
           >
             {playing ? (
@@ -195,7 +195,7 @@ export function AudioPlayer({
               step={0.05}
               value={Math.min(currentTime, duration || 0)}
               onChange={(event) => seek(Number(event.target.value))}
-              aria-label="Position de lecture"
+              aria-label="Playback position"
               className="mt-1.5 h-1 w-full cursor-pointer appearance-none rounded-full"
               style={{
                 accentColor: accent,
@@ -214,7 +214,7 @@ export function AudioPlayer({
         <button
           type="button"
           onClick={() => setMuted((value) => !value)}
-          aria-label={muted ? 'Activer le son' : 'Couper le son'}
+          aria-label={muted ? 'Unmute' : 'Mute'}
           className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           {effectiveVolume === 0 ? (
@@ -246,12 +246,12 @@ export function AudioPlayer({
         <button
           type="button"
           onClick={cycleRate}
-          aria-label={`Vitesse ${rate}×`}
+          aria-label={`Speed ${rate}×`}
           className="ml-auto rounded-md px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           {rate}×
         </button>
-        {error && <span className="text-[10px] text-rose-400">Source indisponible</span>}
+        {error && <span className="text-[10px] text-rose-400">Source unavailable</span>}
       </div>
     </div>
   )

package/src/components/ui/color-picker.tsx

@@ -313,7 +313,7 @@ export function ColorPicker({
 
         <div className="relative min-w-0 flex-1">
           <span className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {displayFormat}
+            {label ?? 'Color'}
           </span>
           <input
             id={inputId}
@@ -382,7 +382,7 @@ export function ColorPicker({
               maxHeight: 'min(620px, calc(100dvh - 20px))',
               visibility: position ? 'visible' : 'hidden',
             }}
-            className="z-[100] overflow-y-auto rounded-md border bg-card text-card-foreground shadow-2xl outline-none"
+            className="z-100 overflow-y-auto rounded-md border bg-card text-card-foreground shadow-2xl outline-none"
           >
             <div className="flex items-start justify-between gap-3 border-b px-3.5 py-3">
               <div className="min-w-0">
@@ -444,7 +444,7 @@ export function ColorPicker({
 
               <div className="space-y-2">
                 <div className="flex items-center justify-between text-[9px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                  <span>Teinte</span>
+                  <span>Hue</span>
                   <span className="font-mono">{Math.round(hue)}°</span>
                 </div>
                 <input
@@ -458,7 +458,7 @@ export function ColorPicker({
                     setDraft(null)
                     emitHsv({ ...hsva, h: Number(event.target.value) })
                   }}
-                  aria-label="Teinte"
+                  aria-label="Hue"
                   className="h-3 w-full cursor-pointer appearance-none rounded-full outline-none transition focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:shadow-md [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:shadow-md"
                   style={{
                     background:
@@ -484,7 +484,7 @@ export function ColorPicker({
                       setDraft(null)
                       emit({ ...current, a: Number(event.target.value) / 100 })
                     }}
-                    aria-label="Transparence"
+                    aria-label="Transparency"
                     className="h-3 w-full cursor-pointer appearance-none rounded-full border border-border outline-none transition focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:shadow-md [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:shadow-md"
                     style={{
                       backgroundColor: 'transparent',
@@ -589,7 +589,7 @@ export function ColorPicker({
                             emit(rgba)
                           }}
                           title={raw}
-                          aria-label={`Couleur ${raw}`}
+                          aria-label={`Color ${raw}`}
                           aria-pressed={selected}
                           className={cn(
                             'relative grid size-5 place-items-center overflow-hidden rounded-sm border transition hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed',

package/src/components/ui/command-menu.tsx

@@ -94,7 +94,7 @@ export function CommandMenu({
 
   return (
     <div
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/65 px-4 pt-[12vh] backdrop-blur-sm"
+      className="fixed inset-0 z-70 flex items-start justify-center bg-black/65 px-4 pt-[12vh] backdrop-blur-sm"
       onPointerDown={(event) => {
         if (event.target === event.currentTarget) setOpen(false)
       }}
@@ -102,7 +102,7 @@ export function CommandMenu({
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Palette de commandes"
+        aria-label="Command palette"
         className={cn(
           'w-full max-w-lg overflow-hidden rounded-sm border bg-card shadow-2xl shadow-black/50',
           className,
@@ -211,8 +211,8 @@ export function CommandMenu({
 
         <div className="flex items-center justify-between border-t px-3.5 py-2 text-[10px] text-muted-foreground">
           <span className="flex items-center gap-3">
-            <span>↑↓ naviguer</span>
-            <span>↵ ouvrir</span>
+            <span>↑↓ to navigate</span>
+            <span>↵ to open</span>
           </span>
           <span className="font-mono">ctrl / ⌘ + k</span>
         </div>

package/src/components/ui/file-upload.tsx

@@ -243,7 +243,7 @@ export function FileUpload({
           <button
             type="button"
             onClick={() => setRejection(null)}
-            aria-label="Masquer l'erreur"
+            aria-label="Hide error"
             className="text-rose-300/70 transition hover:text-rose-200"
           >
             <X className="size-3.5" />
@@ -322,7 +322,7 @@ export function FileUpload({
               <button
                 type="button"
                 onClick={() => remove(item.id)}
-                aria-label={`Retirer ${item.file.name}`}
+                aria-label={`Remove ${item.file.name}`}
                 className="grid size-7 place-items-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
               >
                 <X className="size-3.5" />

package/src/components/ui/icon-picker.tsx

@@ -245,7 +245,7 @@ export function IconPicker({
 
   return (
     <div className={cn('relative w-full max-w-md', className)}>
-      {/* Bouton principal */}
+      {/* Main button */}
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
@@ -287,7 +287,7 @@ export function IconPicker({
             </button>
           </div>
 
-          {/* Barre de recherche */}
+          {/* Search bar */}
           <div className="border-b border-border p-3">
             <div className="relative">
               <Search
@@ -298,7 +298,7 @@ export function IconPicker({
                 type="text"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                placeholder="Rechercher : shirt, shopping, home..."
+                placeholder="Search: shirt, shopping, home..."
                 autoFocus
                 className="h-10 w-full rounded-lg border border-border bg-muted/50 pl-9 pr-3 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary/60 focus:bg-card"
               />
@@ -352,7 +352,7 @@ export function IconPicker({
                   No icon found
                 </p>
                 <p className="mt-1 text-xs text-muted-foreground/70">
-                  Essayez un autre terme
+                  Try another term
                 </p>
               </div>
             )}

package/src/components/ui/rich-text-editor.tsx

@@ -38,7 +38,7 @@ export function RichTextEditor({
   value,
   defaultValue = '',
   onChange,
-  placeholder = 'Écris quelque chose…',
+  placeholder = 'Write something…',
   readOnly = false,
   toolbar = true,
   minHeight = 220,
@@ -115,7 +115,7 @@ export function RichTextEditor({
       editor.focus()
       return
     }
-    const input = window.prompt('URL du lien', 'https://')
+    const input = window.prompt('Enter link URL', 'https://')
     if (!input) return
     const url = /^(https?:|mailto:|tel:)/i.test(input) ? input : `https://${input}`
     exec('createLink', url)
@@ -136,10 +136,10 @@ export function RichTextEditor({
     >
       {toolbar && (
         <div className="flex flex-wrap items-center gap-0.5 border-b bg-muted/30 p-1.5">
-          <ToolButton label="Gras" active={active.bold} onClick={() => exec('bold')}>
+          <ToolButton label="Bold" active={active.bold} onClick={() => exec('bold')}>
             <Bold className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Italique" active={active.italic} onClick={() => exec('italic')}>
+          <ToolButton label="Italic" active={active.italic} onClick={() => exec('italic')}>
             <Italic className="size-3.5" />
           </ToolButton>
           <ToolButton
@@ -159,17 +159,17 @@ export function RichTextEditor({
 
           <Divider />
 
-          <ToolButton label="Titre 2" active={active.h2} onClick={() => toggleBlock('h2')}>
+          <ToolButton label="Heading 2" active={active.h2} onClick={() => toggleBlock('h2')}>
             <Heading2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Titre 3" active={active.h3} onClick={() => toggleBlock('h3')}>
+          <ToolButton label="Heading 3" active={active.h3} onClick={() => toggleBlock('h3')}>
             <Heading3 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Paragraphe" onClick={() => toggleBlock('p')}>
+          <ToolButton label="Paragraph" onClick={() => toggleBlock('p')}>
             <Pilcrow className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Citation"
+            label="Quote"
             active={active.blockquote}
             onClick={() => toggleBlock('blockquote')}
           >
@@ -195,24 +195,23 @@ export function RichTextEditor({
           >
             <ListOrdered className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Lien" onClick={addLink}>
+          <ToolButton label="Link" onClick={addLink}>
             <Link2 className="size-3.5" />
           </ToolButton>
 
           <Divider />
 
-          <ToolButton label="Annuler" onClick={() => exec('undo')}>
+          <ToolButton label="Undo" onClick={() => exec('undo')}>
             <Undo2 className="size-3.5" />
           </ToolButton>
           <ToolButton label="Redo" onClick={() => exec('redo')}>
             <Redo2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Effacer la mise en forme" onClick={() => exec('removeFormat')}>
+          <ToolButton label="Remove formatting" onClick={() => exec('removeFormat')}>
             <RemoveFormatting className="size-3.5" />
           </ToolButton>
 
-          <span className="ml-auto px-1.5 text-[10px] tabular-nums text-muted-foreground">
-            {characters} car.
+          <span className="ml-auto px-1.5 text-[10px] tabular-nums text-muted-foreground">{characters} chars
           </span>
         </div>
       )}

package/src/components/ui/stories.tsx

@@ -166,7 +166,7 @@ export function Stories({
       aria-modal="true"
       aria-label="Stories"
       className={cn(
-        'fixed inset-0 z-[80] flex items-center justify-center bg-black/95 p-0 backdrop-blur-sm sm:p-6',
+        'fixed inset-0 z-80 flex items-center justify-center bg-black/95 p-0 backdrop-blur-sm sm:p-6',
         className,
       )}
     >
@@ -210,7 +210,7 @@ export function Stories({
               type="button"
               onClick={close}
               onPointerDown={(event) => event.stopPropagation()}
-              aria-label="Fermer les stories"
+              aria-label="Close stories"
               className="grid size-8 place-items-center rounded-full bg-black/40 text-white/80 ring-1 ring-white/15 transition hover:bg-black/60 hover:text-white"
             >
               <X className="size-4" />

package/src/components/ui/table.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { useControllableValue } from '@/lib/use-controllable'
+
+export interface TableColumn<T> {
+  /** Stable identifier, also used as the React key of the column. */
+  key: string
+  header: ReactNode
+  cell: (row: T) => ReactNode
+  /** Applied to the header and body cells: width, nowrap… */
+  className?: string
+  align?: 'left' | 'center' | 'right'
+}
+
+export interface TableProps<T> {
+  columns: ReadonlyArray<TableColumn<T>>
+  rows: ReadonlyArray<T>
+  rowKey: (row: T) => string | number
+  selectable?: boolean
+  selectedKeys?: string[]
+  defaultSelectedKeys?: string[]
+  onSelectionChange?: (keys: string[]) => void
+  actions?: (row: T) => ReactNode
+  actionsHeader?: ReactNode
+  onRowClick?: (row: T) => void
+  emptyText?: string
+  className?: string
+}
+
+function alignClass(align: TableColumn<unknown>['align']): string {
+  if (align === 'center') return 'text-center'
+  if (align === 'right') return 'text-right'
+  return 'text-left'
+}
+
+/**
+ * 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.
+ */
+export function Table<T>({
+  columns,
+  rows,
+  rowKey,
+  selectable = false,
+  selectedKeys,
+  defaultSelectedKeys = [],
+  onSelectionChange,
+  actions,
+  actionsHeader = 'Actions',
+  onRowClick,
+  emptyText = 'No data.',
+  className,
+}: Readonly<TableProps<T>>) {
+  const [selection, setSelection] = useControllableValue<string[]>(
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+  )
+
+  const toggle = (key: string, checked: boolean) => {
+    setSelection((current) =>
+      checked
+        ? current.includes(key)
+          ? current
+          : [...current, key]
+        : current.filter((entry) => entry !== key),
+    )
+  }
+
+  const columnsCount = columns.length + (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">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={cn(
+                  'whitespace-nowrap px-4 py-3.5 text-[11px] font-medium text-muted-foreground',
+                  alignClass(column.align),
+                  column.className,
+                )}
+              >
+                {column.header}
+              </th>
+            ))}
+            {actions && (
+              <th
+                scope="col"
+                className="whitespace-nowrap py-3.5 pl-10 pr-4 text-right text-[11px] font-medium text-muted-foreground"
+              >
+                {actionsHeader}
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td colSpan={columnsCount} className="px-4 py-10 text-center text-muted-foreground">
+                {emptyText}
+              </td>
+            </tr>
+          ) : (
+            rows.map((row) => {
+              const key = String(rowKey(row))
+              const selected = selection.includes(key)
+
+              return (
+                <tr
+                  key={key}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  className={cn(
+                    'border-b transition last:border-b-0',
+                    onRowClick && 'cursor-pointer',
+                    selected ? 'bg-primary/5' : 'hover:bg-muted/30',
+                  )}
+                >
+                  {columns.map((column, index) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        'px-4 py-3.5 align-middle',
+                        alignClass(column.align),
+                        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)
+                      )}
+                    </td>
+                  ))}
+                  {actions && (
+                    <td className="whitespace-nowrap py-3.5 pl-10 pr-4">
+                      <div className="flex items-center justify-end gap-1.5">{actions(row)}</div>
+                    </td>
+                  )}
+                </tr>
+              )
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}