@lyda/kilo-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+# kilo-ui
+
+shadcn-style Vue 3 registry for team CRUD apps.
+
+This package does **not** work like a normal UI runtime dependency. It works like shadcn: the CLI copies component source code into the project that needs it. After that, the project owns the code and can edit it.
+
+## Use In A Project
+
+From any Vue project:
+
+```bash
+npm install -D "C:\UI Library"
+npx kilo-ui init
+npx kilo-ui add data-table app-navbar activity-log
+```
+
+After you **publish** this project to npm, install the **exact** `name` from its `package.json` (for example `@ui-library/kilo-ui`).  
+**Do not** run `npm install -D kilo-ui` expecting this Vue CLI — the public npm name `kilo-ui` is already used by a different project.
+
+```bash
+npm install -D @ui-library/kilo-ui
+npx kilo-ui init
+npx kilo-ui add data-table
+```
+
+**Note:** The public npm name `kilo-ui` may point to a different project (not this Vue CLI). If `npm install -D kilo-ui` pulls SvelteKit or other wrong peers, use a scoped name or install from `file:` / Git. See [Installation](docs/docs/installation.md) in the docs site.
+
+## What `init` Creates
+
+`npx kilo-ui init` creates:
+
+- `components.json` - config and aliases
+- `src/styles/teamwork-ui.css` - Tailwind v4 import + Kilo UI theme tokens
+- `src/lib/utils.ts` - shared helper utilities
+
+Add the stylesheet once in your app entry, usually `src/main.ts`:
+
+```ts
+import './styles/teamwork-ui.css'
+```
+
+Your app should also have the normal Vue `@` alias pointing to `src`. Most Vite Vue projects already do. If not, add this to `vite.config.ts`:
+
+```ts
+import { fileURLToPath, URL } from 'node:url'
+
+resolve: {
+  alias: {
+    '@': fileURLToPath(new URL('./src', import.meta.url)),
+  },
+}
+```
+
+## What `add` Creates
+
+`npx kilo-ui add data-table` copies source into your app:
+
+```txt
+src/components/ui/data-table/DataTable.vue
+src/composables/useSortedFilteredList.ts
+src/types/teamwork-ui.ts
+```
+
+Then use it from your own source files:
+
+```vue
+<script setup lang="ts">
+import DataTable from '@/components/ui/data-table/DataTable.vue'
+import type { DataTableColumn } from '@/types/teamwork-ui'
+
+type User = { id: string; name: string; email: string }
+
+const columns: DataTableColumn<User>[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+]
+
+const users: User[] = [
+  { id: '1', name: 'Ashiba', email: 'ashiba@example.com' },
+]
+</script>
+
+<template>
+  <DataTable :columns="columns" :rows="users" />
+</template>
+```
+
+## Available Components
+
+```bash
+npx kilo-ui list
+```
+
+Current registry items:
+
+- `data-table` - searchable, sortable CRUD table
+- `app-navbar` - responsive web/mobile navbar
+- `activity-log` - user/activity log
+
+## Customize
+
+Because components are copied into the app, your team can edit them directly:
+
+```txt
+src/components/ui/data-table/DataTable.vue
+```
+
+Theme tokens live in `src/styles/teamwork-ui.css`:
+
+```css
+@theme {
+  --color-twui-accent: #16a34a;
+  --radius-twui: 0.5rem;
+}
+```
+
+## Documentation Site
+
+A shadcn-style docs site lives in `docs/` and is built with VitePress.
+
+```bash
+npm install
+npm run docs:dev      # http://localhost:5174
+npm run docs:build    # static build in docs/.vitepress/dist
+npm run docs:preview  # preview the production build
+```
+
+It includes:
+
+- A landing page
+- Get Started (Introduction, Installation, CLI, Theming)
+- Components index + per-component pages with live preview, source tab, and props tables
+- Live previews import directly from `registry/` so docs and what the CLI ships never drift
+
+## Repository Layout
+
+```
+bin/             # The kilo-ui CLI (Node, zero-dep)
+registry/        # Source-of-truth for components copied by the CLI
+docs/            # VitePress docs site (mirrors ui.shadcn.com style)
+```
+
+Editing a component? Update the file in `registry/`. The CLI and docs both pick it up automatically.
+
+## Publish to npm (so others can install your CLI)
+
+1. Create an [npm](https://www.npmjs.com/) account and log in: `npm login`
+2. Use a scoped package name you control (recommended). The unscoped npm name `kilo-ui` is already taken by a different project.
+3. Bump version when you ship changes: `npm version patch` (or `minor` / `major`)
+4. From this repo root:
+
+   ```bash
+   npm publish --access public
+   ```
+
+   For a **scoped** public package: `npm publish --access public`  
+   For **private** paid npm org: `npm publish --access restricted`
+
+5. Consumers install with:
+
+   ```bash
+   npm install -D @ui-library/kilo-ui
+   npx kilo-ui init
+   npx kilo-ui add data-table
+   ```
+
+**Note:** This package only ships `bin/`, `registry/`, and `README.md` (`files` in `package.json`). Docs and devDependencies are not published. Host the docs site separately (`npm run docs:build` → upload `docs/.vitepress/dist`).

package/bin/kilo-ui.mjs

@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const packageRoot = resolve(__dirname, '..')
+const registryRoot = join(packageRoot, 'registry')
+
+const pkg = JSON.parse(readFileSync(join(packageRoot, 'package.json'), 'utf8'))
+const cliName = typeof pkg.name === 'string' ? pkg.name : 'kilo-ui'
+
+const commands = new Set(['init', 'add', 'list', 'help'])
+const [, , maybeCommand, ...args] = process.argv
+const command = commands.has(maybeCommand) ? maybeCommand : 'help'
+
+const configFile = 'components.json'
+
+function log(message = '') {
+  console.log(message)
+}
+
+function fail(message) {
+  console.error(`\nError: ${message}`)
+  process.exit(1)
+}
+
+function readJson(path) {
+  return JSON.parse(readFileSync(path, 'utf8'))
+}
+
+function writeJson(path, value) {
+  writeFileSync(path, `${JSON.stringify(value, null, 2)}\n`, 'utf8')
+}
+
+function ensureDir(path) {
+  mkdirSync(path, { recursive: true })
+}
+
+function writeFile(path, content, force = false) {
+  if (existsSync(path) && !force) {
+    log(`skip ${relative(process.cwd(), path)} (already exists)`)
+    return
+  }
+  ensureDir(dirname(path))
+  writeFileSync(path, content, 'utf8')
+  log(`${existsSync(path) && force ? 'write' : 'add'} ${relative(process.cwd(), path)}`)
+}
+
+function registry() {
+  return readJson(join(registryRoot, 'index.json'))
+}
+
+function projectConfig() {
+  const path = join(process.cwd(), configFile)
+  if (!existsSync(path)) {
+    fail(`Missing ${configFile}. Run "npx ${cliName} init" first.`)
+  }
+  return readJson(path)
+}
+
+function aliasPath(config, key) {
+  const value = config.aliases?.[key]
+  if (!value) fail(`Missing aliases.${key} in ${configFile}`)
+  return value.replace(/^@\//, config.srcDir ? `${config.srcDir}/` : 'src/')
+}
+
+function resolveTarget(config, alias, fileName) {
+  return join(process.cwd(), aliasPath(config, alias), fileName)
+}
+
+function componentFilePath(config, componentName, fileName) {
+  return join(process.cwd(), aliasPath(config, 'components'), 'ui', componentName, fileName)
+}
+
+function copyRegistryFile(sourceRelative, targetPath, config, force) {
+  const sourcePath = join(registryRoot, sourceRelative)
+  if (!existsSync(sourcePath)) fail(`Registry file not found: ${sourceRelative}`)
+  const content = readFileSync(sourcePath, 'utf8')
+    .replaceAll('__COMPONENTS_ALIAS__', config.aliases.components)
+    .replaceAll('__COMPOSABLES_ALIAS__', config.aliases.composables)
+    .replaceAll('__LIB_ALIAS__', config.aliases.lib)
+    .replaceAll('__TYPES_ALIAS__', config.aliases.types)
+  writeFile(targetPath, content, force)
+}
+
+function init(args) {
+  const force = args.includes('--force')
+  const configPath = join(process.cwd(), configFile)
+  const defaultConfig = {
+    $schema: 'https://kilo-ui.local/schema.json',
+    style: 'default',
+    srcDir: 'src',
+    tailwind: {
+      css: 'src/styles/teamwork-ui.css',
+    },
+    aliases: {
+      components: '@/components',
+      composables: '@/composables',
+      lib: '@/lib',
+      types: '@/types',
+    },
+  }
+  const config = existsSync(configPath) && !force ? readJson(configPath) : defaultConfig
+
+  if (existsSync(configPath) && !force) {
+    log(`skip ${configFile} (already exists)`)
+  } else {
+    writeJson(configPath, config)
+    log(`write ${configFile}`)
+  }
+
+  copyRegistryFile('styles/teamwork-ui.css', join(process.cwd(), config.tailwind.css), config, force)
+  copyRegistryFile('lib/utils.ts', resolveTarget(config, 'lib', 'utils.ts'), config, force)
+
+  log('\nDone. Add this once in your app entry or main stylesheet:')
+  log(`  import './styles/${config.tailwind.css.replace(/^.*\//, '')}'`)
+  log('\nThen add components:')
+  log(`  npx ${cliName} add data-table app-navbar activity-log`)
+}
+
+function add(args) {
+  const force = args.includes('--force')
+  const names = args.filter((arg) => !arg.startsWith('--'))
+  if (names.length === 0) fail(`Tell me what to add, for example: npx ${cliName} add data-table`)
+
+  const config = projectConfig()
+  const items = registry().items
+
+  for (const name of names) {
+    const item = items.find((candidate) => candidate.name === name)
+    if (!item) {
+      fail(`Unknown component "${name}". Run "npx ${cliName} list" to see available components.`)
+    }
+
+    log(`\n${item.name}`)
+    for (const file of item.files) {
+      let targetPath
+      if (file.target === 'components') {
+        targetPath = componentFilePath(config, item.name, file.name)
+      } else {
+        targetPath = resolveTarget(config, file.target, file.name)
+      }
+      copyRegistryFile(file.path, targetPath, config, force)
+    }
+  }
+
+  log('\nDone.')
+}
+
+function list() {
+  log('Available components:\n')
+  for (const item of registry().items) {
+    log(`  ${item.name.padEnd(14)} ${item.description}`)
+  }
+}
+
+function help() {
+  log(`${cliName}
+
+Usage:
+  npx ${cliName} init [--force]
+  npx ${cliName} add <component...> [--force]
+  npx ${cliName} list
+
+Examples:
+  npx ${cliName} init
+  npx ${cliName} add data-table app-navbar
+`)
+}
+
+if (command === 'init') init(args)
+if (command === 'add') add(args)
+if (command === 'list') list()
+if (command === 'help') help()

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@lyda/kilo-ui",
+  "version": "0.1.0",
+  "description": "shadcn-style Vue component registry for team CRUD apps",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ui-library/kilo-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ui-library/kilo-ui/issues"
+  },
+  "homepage": "https://github.com/ui-library/kilo-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "kilo-ui": "bin/kilo-ui.mjs"
+  },
+  "files": [
+    "bin",
+    "registry",
+    "README.md"
+  ],
+  "scripts": {
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "check:cli": "node ./bin/kilo-ui.mjs list"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^22.19.17",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~5.7.2",
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "crud",
+    "ui"
+  ],
+  "license": "MIT"
+}

package/registry/composables/useSortedFilteredList.ts

@@ -0,0 +1,52 @@
+import { computed, type ComputedRef, type Ref } from 'vue'
+import type { SortDirection } from '__TYPES_ALIAS__/teamwork-ui'
+
+export interface UseSortedFilteredListOptions<T extends Record<string, unknown>> {
+  rows: Ref<T[]> | ComputedRef<T[]>
+  search: Ref<string>
+  /** Row keys to include in text search (default: all keys) */
+  searchKeys?: (keyof T & string)[]
+  sortKey: Ref<string | null>
+  sortDir: Ref<SortDirection>
+}
+
+function defaultSearchKeys<T extends Record<string, unknown>>(rows: T[]): (keyof T & string)[] {
+  if (rows.length === 0) return []
+  return Object.keys(rows[0]!) as (keyof T & string)[]
+}
+
+function cellText(value: unknown): string {
+  if (value == null) return ''
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+export function useSortedFilteredList<T extends Record<string, unknown>>(
+  options: UseSortedFilteredListOptions<T>,
+): ComputedRef<T[]> {
+  return computed(() => {
+    const keys =
+      options.searchKeys?.length ? options.searchKeys : defaultSearchKeys(options.rows.value)
+
+    let list = [...options.rows.value]
+
+    const q = options.search.value.trim().toLowerCase()
+    if (q) {
+      list = list.filter((row) =>
+        keys.some((k) => cellText(row[k]).toLowerCase().includes(q)),
+      )
+    }
+
+    const sk = options.sortKey.value
+    if (sk) {
+      const dir = options.sortDir.value === 'asc' ? 1 : -1
+      list.sort((a, b) => {
+        const av = cellText(a[sk as keyof T])
+        const bv = cellText(b[sk as keyof T])
+        return av.localeCompare(bv, undefined, { numeric: true, sensitivity: 'base' }) * dir
+      })
+    }
+
+    return list
+  })
+}

package/registry/index.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://kilo-ui.local/registry.schema.json",
+  "name": "kilo-ui",
+  "homepage": "https://kilo-ui.local",
+  "items": [
+    {
+      "name": "data-table",
+      "type": "registry:ui",
+      "description": "Searchable, sortable table for CRUD list pages.",
+      "files": [
+        {
+          "path": "ui/data-table/DataTable.vue",
+          "target": "components",
+          "name": "DataTable.vue"
+        },
+        {
+          "path": "composables/useSortedFilteredList.ts",
+          "target": "composables",
+          "name": "useSortedFilteredList.ts"
+        },
+        {
+          "path": "types/teamwork-ui.ts",
+          "target": "types",
+          "name": "teamwork-ui.ts"
+        }
+      ]
+    },
+    {
+      "name": "app-navbar",
+      "type": "registry:ui",
+      "description": "Responsive navbar with mobile menu and brand slot.",
+      "files": [
+        {
+          "path": "ui/app-navbar/AppNavbar.vue",
+          "target": "components",
+          "name": "AppNavbar.vue"
+        },
+        {
+          "path": "types/teamwork-ui.ts",
+          "target": "types",
+          "name": "teamwork-ui.ts"
+        }
+      ]
+    },
+    {
+      "name": "activity-log",
+      "type": "registry:ui",
+      "description": "Simple activity/user log component for audit trails.",
+      "files": [
+        {
+          "path": "ui/activity-log/ActivityLog.vue",
+          "target": "components",
+          "name": "ActivityLog.vue"
+        },
+        {
+          "path": "types/teamwork-ui.ts",
+          "target": "types",
+          "name": "teamwork-ui.ts"
+        }
+      ]
+    },
+    {
+      "name": "card-box",
+      "type": "registry:ui",
+      "description": "Surface container with header, content, and footer slots.",
+      "files": [
+        {
+          "path": "ui/card-box/CardBox.vue",
+          "target": "components",
+          "name": "CardBox.vue"
+        }
+      ]
+    }
+  ]
+}

package/registry/lib/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(' ')
+}

package/registry/styles/teamwork-ui.css

@@ -0,0 +1,33 @@
+@import 'tailwindcss';
+
+/* Scan copied Teamwork UI files inside the consuming app. */
+@source "../components/ui/**/*.{vue,ts}";
+@source "../composables/**/*.{ts,vue}";
+@source "../lib/**/*.{ts,vue}";
+
+@theme {
+  --color-twui-accent: #2563eb;
+  --color-twui-accent-contrast: #ffffff;
+  --color-twui-danger: #dc2626;
+  --color-twui-surface: #ffffff;
+  --color-twui-surface-2: #f8fafc;
+  --color-twui-border: #e2e8f0;
+  --color-twui-muted: #64748b;
+  --color-twui-text: #0f172a;
+  --radius-twui: 0.625rem;
+  --radius-twui-sm: 0.375rem;
+  --shadow-twui: 0 1px 2px rgb(15 23 42 / 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-twui-surface: #0f172a;
+    --color-twui-surface-2: #111c2e;
+    --color-twui-border: #1f2a40;
+    --color-twui-muted: #94a3b8;
+    --color-twui-text: #f8fafc;
+    --color-twui-accent: #60a5fa;
+    --color-twui-accent-contrast: #0b1220;
+    --shadow-twui: 0 1px 2px rgb(0 0 0 / 0.4);
+  }
+}

package/registry/types/teamwork-ui.ts

@@ -0,0 +1,29 @@
+export type SortDirection = 'asc' | 'desc'
+
+export interface DataTableColumn<T extends Record<string, unknown>> {
+  /** Key on row object */
+  key: keyof T & string
+  /** Column header label */
+  label: string
+  /** Enable click-to-sort on this column */
+  sortable?: boolean
+  /** Optional formatter for cell display */
+  format?: (value: unknown, row: T) => string
+}
+
+export interface ActivityLogItem {
+  id: string
+  /** ISO date string or display-ready time */
+  at: string
+  /** Who performed the action */
+  actor: string
+  /** Short description */
+  message: string
+}
+
+export interface NavbarLink {
+  label: string
+  href: string
+  /** Mark current route (you set this from the app) */
+  active?: boolean
+}

package/registry/ui/activity-log/ActivityLog.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ActivityLogItem } from '__TYPES_ALIAS__/teamwork-ui'
+
+defineProps<{
+  items: ActivityLogItem[]
+  title?: string
+}>()
+</script>
+
+<template>
+  <section
+    aria-label="Activity log"
+    class="rounded-[var(--radius-twui)] border border-twui-border bg-twui-surface p-4 text-twui-text shadow-twui"
+  >
+    <header v-if="title" class="mb-4 text-base font-bold">
+      {{ title }}
+    </header>
+
+    <ol class="m-0 flex list-none flex-col gap-4 p-0">
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="grid grid-cols-1 items-start gap-3 sm:grid-cols-[8rem_1fr]"
+      >
+        <time
+          :datetime="item.at"
+          class="text-xs whitespace-nowrap text-twui-muted"
+        >
+          {{ item.at }}
+        </time>
+        <div class="flex flex-col gap-1">
+          <span class="text-sm font-semibold">{{ item.actor }}</span>
+          <span class="text-sm leading-snug">{{ item.message }}</span>
+        </div>
+      </li>
+    </ol>
+
+    <p v-if="items.length === 0" class="m-0 text-sm text-twui-muted">
+      No activity yet.
+    </p>
+  </section>
+</template>

package/registry/ui/app-navbar/AppNavbar.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import type { NavbarLink } from '__TYPES_ALIAS__/teamwork-ui'
+
+defineProps<{
+  links: NavbarLink[]
+  /** Accessible label for the menu button */
+  menuLabel?: string
+}>()
+
+const open = ref(false)
+
+function close() {
+  open.value = false
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <header
+    class="sticky top-0 z-40 border-b border-twui-border bg-twui-surface text-twui-text"
+  >
+    <div
+      class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3"
+    >
+      <div class="text-base font-bold tracking-tight">
+        <slot name="brand">App</slot>
+      </div>
+
+      <button
+        type="button"
+        :aria-expanded="open"
+        :aria-label="menuLabel ?? 'Open menu'"
+        class="inline-flex h-10 w-10 items-center justify-center rounded-[var(--radius-twui-sm)] border border-twui-border bg-twui-surface-2 md:hidden"
+        @click="open = !open"
+      >
+        <span class="relative block h-0.5 w-5 rounded bg-current">
+          <span
+            class="absolute -top-1.5 left-0 block h-0.5 w-5 rounded bg-current"
+          />
+          <span
+            class="absolute top-1.5 left-0 block h-0.5 w-5 rounded bg-current"
+          />
+        </span>
+      </button>
+
+      <nav
+        aria-label="Main"
+        class="absolute top-full right-0 left-0 flex-col gap-1 border-b border-twui-border bg-twui-surface px-4 pt-3 pb-4 shadow-twui md:static md:flex md:flex-row md:items-center md:gap-2 md:border-0 md:bg-transparent md:p-0 md:shadow-none"
+        :class="open ? 'flex' : 'hidden md:flex'"
+      >
+        <a
+          v-for="link in links"
+          :key="link.href"
+          :href="link.href"
+          class="rounded-[var(--radius-twui-sm)] px-3 py-2 text-sm font-medium text-twui-text no-underline hover:bg-twui-surface-2"
+          :class="
+            link.active
+              ? 'bg-twui-accent/15 text-twui-accent hover:bg-twui-accent/20'
+              : ''
+          "
+          @click="close"
+        >
+          {{ link.label }}
+        </a>
+        <div class="mt-2 md:mt-0 md:ml-2" @click="close">
+          <slot />
+        </div>
+      </nav>
+    </div>
+  </header>
+</template>

package/registry/ui/card-box/CardBox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    image?: string
+    flush?: boolean
+  }>(),
+  { flush: false },
+)
+</script>
+
+<template>
+  <div
+    class="border rounded-2xl border-twui-border bg-twui-surface text-twui-text shadow-twui"
+  >
+    <div :class="flush ? '' : 'px-2 py-1.5'">
+      <slot name="content">
+        <slot />
+      </slot>
+    </div>
+  </div>
+</template>

package/registry/ui/data-table/DataTable.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed, ref } from 'vue'
+import type { DataTableColumn, SortDirection } from '__TYPES_ALIAS__/teamwork-ui'
+import { useSortedFilteredList } from '__COMPOSABLES_ALIAS__/useSortedFilteredList'
+
+const props = withDefaults(
+  defineProps<{
+    columns: DataTableColumn<T>[]
+    rows: T[]
+    /** Placeholder for the search field */
+    searchPlaceholder?: string
+    /** Show built-in search input */
+    showSearch?: boolean
+    /** Initial sort column key */
+    initialSortKey?: string | null
+    initialSortDir?: SortDirection
+  }>(),
+  {
+    searchPlaceholder: 'Search...',
+    showSearch: true,
+    initialSortKey: null,
+    initialSortDir: 'asc',
+  },
+)
+
+const emit = defineEmits<{
+  rowClick: [row: T]
+}>()
+
+const search = ref('')
+const sortKey = ref<string | null>(props.initialSortKey ?? null)
+const sortDir = ref<SortDirection>(props.initialSortDir)
+
+const rowsRef = computed(() => props.rows)
+
+const displayRows = useSortedFilteredList<T>({
+  rows: rowsRef,
+  search,
+  sortKey,
+  sortDir,
+})
+
+function toggleSort(col: DataTableColumn<T>) {
+  if (!col.sortable) return
+  if (sortKey.value !== col.key) {
+    sortKey.value = col.key
+    sortDir.value = 'asc'
+    return
+  }
+  sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+}
+
+function displayCell(row: T, col: DataTableColumn<T>): string {
+  const raw = row[col.key]
+  return col.format ? col.format(raw, row) : raw == null ? '' : String(raw)
+}
+
+function sortIndicator(col: DataTableColumn<T>): string {
+  if (!col.sortable || sortKey.value !== col.key) return ''
+  return sortDir.value === 'asc' ? ' ▲' : ' ▼'
+}
+</script>
+
+<template>
+  <div
+    class="overflow-hidden rounded-[var(--radius-twui)] border border-twui-border bg-twui-surface text-twui-text shadow-twui"
+  >
+    <div
+      v-if="showSearch"
+      class="border-b border-twui-border bg-twui-surface-2 px-4 py-3"
+    >
+      <input
+        v-model="search"
+        type="search"
+        :placeholder="searchPlaceholder"
+        autocomplete="off"
+        class="w-full max-w-xs rounded-[var(--radius-twui-sm)] border border-twui-border bg-twui-surface px-3 py-2 text-sm text-twui-text outline-none placeholder:text-twui-muted focus:border-twui-accent focus:ring-2 focus:ring-twui-accent/30"
+      />
+    </div>
+
+    <div class="overflow-x-auto">
+      <table class="w-full border-collapse text-sm">
+        <thead class="bg-twui-surface-2 text-twui-text">
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              scope="col"
+              class="border-b border-twui-border px-4 py-3 text-left font-semibold whitespace-nowrap"
+              :class="col.sortable ? 'cursor-pointer select-none hover:text-twui-accent' : ''"
+              @click="toggleSort(col)"
+            >
+              {{ col.label }}{{ sortIndicator(col) }}
+            </th>
+            <th
+              v-if="$slots.actions"
+              scope="col"
+              class="w-px border-b border-twui-border px-4 py-3 text-right whitespace-nowrap"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, idx) in displayRows"
+            :key="idx"
+            class="cursor-pointer hover:bg-twui-accent/10"
+            @click="emit('rowClick', row)"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              class="border-b border-twui-border px-4 py-3 align-middle last:border-b-0"
+            >
+              {{ displayCell(row, col) }}
+            </td>
+            <td
+              v-if="$slots.actions"
+              class="w-px border-b border-twui-border px-4 py-3 text-right whitespace-nowrap last:border-b-0"
+              @click.stop
+            >
+              <slot name="actions" :row="row" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p v-if="displayRows.length === 0" class="m-0 px-4 py-4 text-sm text-twui-muted">
+      No rows match.
+    </p>
+  </div>
+</template>