@usetheo/ui 0.7.0-next.0 → 0.8.0-next.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.7.0-next.0",
+  "version": "0.8.0-next.0",
   "description": "Theo UI — framework-agnostic React component library with the Violet Forge design system. Focused on AI-agent interfaces, cloud dashboards, and developer-tooling surfaces.",
   "license": "Apache-2.0",
   "type": "module",
-  "sideEffects": ["**/*.css"],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -129,10 +131,18 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./code-block": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./command-palette": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./confirm-dialog": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./context-card": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -141,6 +151,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./copy-button": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./cost-meter": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -157,6 +171,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./danger-zone": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./deployment-row": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -361,6 +379,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./stat-tile": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./status-dot": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./steps-rail": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -377,6 +403,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./table": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./tabs": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -397,6 +427,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./timestamp": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./toast": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -470,44 +504,14 @@
       "import": "./dist/preset-v3-legacy.js"
     }
   },
-  "files": ["dist", "registry/r", "registry/index.json", "LICENSE", "NOTICE", "CHANGELOG.md"],
-  "scripts": {
-    "build": "tsup",
-    "dev": "ladle serve",
-    "ladle:build": "ladle build",
-    "ladle:preview": "ladle preview",
-    "playground": "vite --config playground/vite.config.ts",
-    "playground:build": "vite build --config playground/vite.config.ts",
-    "playground:preview": "vite preview --config playground/vite.config.ts",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src",
-    "lint:ci": "biome ci src scripts .ladle playground",
-    "lint:fix": "biome check --write src",
-    "format": "biome format --write src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
-    "format:check": "biome format src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:ui": "vitest --ui",
-    "registry:build": "tsx scripts/build-registry.ts",
-    "registry:validate": "tsx scripts/validate-registry.ts",
-    "sync:readme": "tsx scripts/sync-readme.ts",
-    "sync:exports": "tsx scripts/sync-exports.ts",
-    "test:registry": "tsx scripts/test-registry-install.ts",
-    "test:coverage": "vitest run --coverage",
-    "quality:structure": "tsx scripts/validate-quality-gates.ts",
-    "quality:bundle": "tsx scripts/validate-bundle-size.ts",
-    "quality:bundle:update": "tsx scripts/validate-bundle-size.ts --update",
-    "quality:a11y": "vitest run src/test/ladle-axe.test.tsx",
-    "dogfood:whiteboard": "tsx scripts/dogfood-whiteboard.ts",
-    "dogfood:slide": "tsx scripts/dogfood-slide.ts",
-    "dogfood:slide-deck": "tsx scripts/dogfood-slide-deck.ts",
-    "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.ts",
-    "dogfood:v4-zero-config": "tsx scripts/dogfood-v4-zero-config.ts",
-    "dogfood:v4-real-build": "bash scripts/dogfood-v4-real-build.sh",
-    "dogfood:precompiled-utilities": "tsx scripts/dogfood-precompiled-utilities.ts",
-    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm test && pnpm build && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config && pnpm dogfood:precompiled-utilities",
-    "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm registry:build && pnpm registry:validate && pnpm quality:structure"
-  },
+  "files": [
+    "dist",
+    "registry/r",
+    "registry/index.json",
+    "LICENSE",
+    "NOTICE",
+    "CHANGELOG.md"
+  ],
   "peerDependencies": {
     "@tailwindcss/vite": "^4.0.0",
     "hast-util-from-html": "^2.0.0",
@@ -660,12 +664,6 @@
   "engines": {
     "node": ">=20"
   },
-  "pnpm": {
-    "onlyBuiltDependencies": ["@biomejs/biome", "@swc/core", "esbuild"],
-    "overrides": {
-      "postcss": ">=8.5.10"
-    }
-  },
   "keywords": [
     "react",
     "components",
@@ -681,5 +679,41 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be"
-}
+  "scripts": {
+    "build": "tsup",
+    "dev": "ladle serve",
+    "ladle:build": "ladle build",
+    "ladle:preview": "ladle preview",
+    "playground": "vite --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
+    "playground:preview": "vite preview --config playground/vite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src",
+    "lint:ci": "biome ci src scripts .ladle playground",
+    "lint:fix": "biome check --write src",
+    "format": "biome format --write src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
+    "format:check": "biome format src scripts .ladle package.json tsconfig.json tailwind.config.ts vitest.config.ts tsup.config.ts biome.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "registry:build": "tsx scripts/build-registry.ts",
+    "registry:validate": "tsx scripts/validate-registry.ts",
+    "sync:readme": "tsx scripts/sync-readme.ts",
+    "sync:exports": "tsx scripts/sync-exports.ts",
+    "test:registry": "tsx scripts/test-registry-install.ts",
+    "test:coverage": "vitest run --coverage",
+    "quality:structure": "tsx scripts/validate-quality-gates.ts",
+    "quality:bundle": "tsx scripts/validate-bundle-size.ts",
+    "quality:bundle:update": "tsx scripts/validate-bundle-size.ts --update",
+    "quality:a11y": "vitest run src/test/ladle-axe.test.tsx",
+    "dogfood:whiteboard": "tsx scripts/dogfood-whiteboard.ts",
+    "dogfood:slide": "tsx scripts/dogfood-slide.ts",
+    "dogfood:slide-deck": "tsx scripts/dogfood-slide-deck.ts",
+    "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.ts",
+    "dogfood:v4-zero-config": "tsx scripts/dogfood-v4-zero-config.ts",
+    "dogfood:v4-real-build": "bash scripts/dogfood-v4-real-build.sh",
+    "dogfood:precompiled-utilities": "tsx scripts/dogfood-precompiled-utilities.ts",
+    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm test && pnpm build && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config && pnpm dogfood:precompiled-utilities",
+    "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm registry:build && pnpm registry:validate && pnpm quality:structure"
+  }
+}

package/registry/index.json

@@ -16,7 +16,7 @@
       "name": "account-menu",
       "type": "registry:ui",
       "title": "AccountMenu",
-      "description": "Sidebar header for PaaS surfaces. Avatar + name + (optional) PlanBadge + (optional) secondary line, with dual mode: with onClick renders as a <button> with trailing chevron (account picker affordance); without, renders as a static <div>. PaaS-shape sibling of ProjectSwitcher."
+      "description": "Sidebar header for PaaS surfaces. Avatar + name + (optional) PlanBadge + (optional) secondary line, with dual mode: with onClick renders as a `button` with trailing chevron (account picker affordance); without, renders as a static `div`. PaaS-shape sibling of ProjectSwitcher."
     },
     {
       "name": "agent-composer",
@@ -192,12 +192,24 @@
       "title": "cn (Tailwind class merger)",
       "description": "Merge Tailwind classes with conflict resolution."
     },
+    {
+      "name": "code-block",
+      "type": "registry:ui",
+      "title": "CodeBlock",
+      "description": "Terminal / code-snippet surface. Renders code inside a <pre> with optional 'terminal' prefix per line ('$ '), optional caption (file name), and optional inline CopyButton in top-right. Copy uses the raw code (without the visual prefix). language prop is forward-compat for future syntax highlighting."
+    },
     {
       "name": "command-palette",
       "type": "registry:ui",
       "title": "CommandPalette",
       "description": "Cmd+K-style global launcher with arrow-key navigation, fuzzy ranking, and Enter/Escape behavior — built on cmdk + Theo Dialog."
     },
+    {
+      "name": "confirm-dialog",
+      "type": "registry:ui",
+      "title": "ConfirmDialog",
+      "description": "Controlled confirmation modal built on Dialog. Auto-focuses Cancel on open (deliberate — NOT the destructive button). Optional intent=destructive switches the confirm button to destructive variant. Optional confirmationPhrase enables typed-confirmation guard (case-sensitive, empty string = no phrase). Async onConfirm shows Loader2 spinner; resolve closes the dialog; reject keeps it open so consumers can surface their own error. Enter in the phrase input triggers confirm when matched."
+    },
     {
       "name": "context-card",
       "type": "registry:ui",
@@ -210,6 +222,12 @@
       "title": "ContextWindowBar",
       "description": "Shows how much of the model's context window has been"
     },
+    {
+      "name": "copy-button",
+      "type": "registry:ui",
+      "title": "CopyButton",
+      "description": "Click-to-copy button primitive. Wraps navigator.clipboard.writeText with icon swap (Copy → Check on success, Copy → X on failure), aria-live announcement for screen readers, optional label, ghost/outline variants, and SSR-safe rendering. Auto-cleans the revert timer on unmount and debounces double-clicks."
+    },
     {
       "name": "cost-meter",
       "type": "registry:ui",
@@ -234,6 +252,12 @@
       "title": "CronJobsList",
       "description": "Grid of CronJobCards with a sticky \"new job\" action."
     },
+    {
+      "name": "danger-zone",
+      "type": "registry:ui",
+      "title": "DangerZone",
+      "description": "Destructive-actions section primitive with sub-component DangerZone.Action. Red-bordered container with title bar (default 'Danger Zone') and action rows. Each row carries title + description + consumer-provided action slot (typically a destructive Button). Rows separated by hairline dividers; last row drops the bottom border via last:border-b-0."
+    },
     {
       "name": "deployment-row",
       "type": "registry:block",
@@ -606,6 +630,18 @@
       "title": "SocialAuthRow",
       "description": "Row of OAuth provider buttons."
     },
+    {
+      "name": "stat-tile",
+      "type": "registry:ui",
+      "title": "StatTile",
+      "description": "Big-number stat tile primitive for dashboard summaries. Renders value + label + optional icon + optional delta (trend up/down/flat with TrendingUp/TrendingDown/Minus icons and success/destructive/muted color). Dual mode: with onClick renders as button with hover state + trailing ArrowUpRight chevron; without, renders as static div. Value uses font-display tabular-nums whitespace-nowrap."
+    },
+    {
+      "name": "status-dot",
+      "type": "registry:ui",
+      "title": "StatusDot",
+      "description": "Semantic status indicator (small colored circle + optional label). Five status kinds: live (success), building (warning, auto-pulses), failed (destructive), idle (muted), warning (warning, static). Three sizes (xs 6px / sm 8px default / md 10px). When neither label nor aria-label is provided, auto-applies aria-label=status and emits a dev warning."
+    },
     {
       "name": "steps-rail",
       "type": "registry:ui",
@@ -630,6 +666,12 @@
       "title": "SystemPromptEditor",
       "description": "Surface the agent's system prompt with a clear"
     },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "title": "Table",
+      "description": "Semantic data-table primitive with sub-components (Table.Header, Table.Body, Table.Row, Table.Cell, Table.HeaderCell). Supports density (default | compact via Context), per-cell align (left | center | right), numeric cells (font-mono tabular-nums), and sortable header cells (onSort + sortDirection with ChevronUp/ChevronDown affordance + aria-sort)."
+    },
     {
       "name": "tabs",
       "type": "registry:ui",
@@ -690,6 +732,12 @@
       "title": "TheoUIProvider",
       "description": "Primary entry-point provider — composes ThemeProvider + Toaster with sensible defaults. Use as the single root wrapper in consumer apps."
     },
+    {
+      "name": "timestamp",
+      "type": "registry:ui",
+      "title": "Timestamp",
+      "description": "Accessible <time> primitive with relative/absolute/both formats, auto-refresh interval (default 60s, 0 disables), native title tooltip with absolute time, and aria-label that always carries the full date. Built on Intl.RelativeTimeFormat (zero deps). value accepts ISO string, Date, or Unix ms (NOT seconds). Invalid date renders empty element; invalid locale falls back to default with dev warning."
+    },
     {
       "name": "toast",
       "type": "registry:ui",

package/registry/r/account-menu.json

@@ -3,7 +3,7 @@
   "name": "account-menu",
   "type": "registry:ui",
   "title": "AccountMenu",
-  "description": "Sidebar header for PaaS surfaces. Avatar + name + (optional) PlanBadge + (optional) secondary line, with dual mode: with onClick renders as a <button> with trailing chevron (account picker affordance); without, renders as a static <div>. PaaS-shape sibling of ProjectSwitcher.",
+  "description": "Sidebar header for PaaS surfaces. Avatar + name + (optional) PlanBadge + (optional) secondary line, with dual mode: with onClick renders as a `button` with trailing chevron (account picker affordance); without, renders as a static `div`. PaaS-shape sibling of ProjectSwitcher.",
   "dependencies": [
     "lucide-react"
   ],

package/registry/r/code-block.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "code-block",
+  "type": "registry:ui",
+  "title": "CodeBlock",
+  "description": "Terminal / code-snippet surface. Renders code inside a <pre> with optional 'terminal' prefix per line ('$ '), optional caption (file name), and optional inline CopyButton in top-right. Copy uses the raw code (without the visual prefix). language prop is forward-compat for future syntax highlighting.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/copy-button.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/code-block/code-block.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/code-block.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\n\n/**\n * CodeBlock — terminal command / code snippet surface.\n *\n * Pre-rendered code block with optional terminal \"$ \" prefix per line,\n * optional caption (file name), and optional CopyButton positioned top-right.\n * The CopyButton receives the RAW `code` (without the visual \"$ \" prefix),\n * so consumers paste only the executable command.\n *\n * @example\n *   <CodeBlock code=\"theo deploy\" terminal copyable />\n *   <CodeBlock code={dotenv} caption=\".env.local\" copyable />\n *\n * `language` is reserved for future syntax highlighting (v1: ignored).\n */\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Code content. Can be multiline. */\n  code: string;\n  /** Language hint (forward-compat; v1 ignored). */\n  language?: string;\n  /** When true, prefix each line with \"$ \" for shell commands. */\n  terminal?: boolean;\n  /** Show inline CopyButton in top-right. */\n  copyable?: boolean;\n  /** Optional caption above block (e.g. \".env.local\"). */\n  caption?: ReactNode;\n}\n\nconst CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(\n  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {\n    const lines = code.split(/\\r?\\n/);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {caption !== undefined ? (\n          <div className=\"border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground\">\n            {caption}\n          </div>\n        ) : null}\n        {copyable ? (\n          <CopyButton value={code} aria-label=\"Copy code\" className=\"absolute top-2 right-2\" />\n        ) : null}\n        <pre className=\"overflow-x-auto p-3 text-foreground\">\n          {terminal ? (\n            <code>\n              {lines.map((line, i) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.\n                <span key={i} className=\"block whitespace-pre\">\n                  <span className=\"select-none text-muted-foreground\">$ </span>\n                  {line}\n                </span>\n              ))}\n            </code>\n          ) : (\n            <code>{code}</code>\n          )}\n        </pre>\n      </div>\n    );\n  },\n);\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"
+    }
+  ]
+}

package/registry/r/confirm-dialog.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "confirm-dialog",
+  "type": "registry:ui",
+  "title": "ConfirmDialog",
+  "description": "Controlled confirmation modal built on Dialog. Auto-focuses Cancel on open (deliberate — NOT the destructive button). Optional intent=destructive switches the confirm button to destructive variant. Optional confirmationPhrase enables typed-confirmation guard (case-sensitive, empty string = no phrase). Async onConfirm shows Loader2 spinner; resolve closes the dialog; reject keeps it open so consumers can surface their own error. Enter in the phrase input triggers confirm when matched.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/dialog.json",
+    "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/input.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/confirm-dialog/confirm-dialog.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/confirm-dialog.tsx",
+      "content": "import { Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\n\n/**\n * ConfirmDialog — controlled confirmation modal built on `Dialog`.\n *\n * Focuses Cancel on open (deliberate — NOT the destructive button).\n * `intent=\"destructive\"` styles the confirm button with the destructive\n * variant. `confirmationPhrase` enables typed-confirmation guard:\n * the confirm button is disabled until the input value matches the\n * phrase exactly (case-sensitive). An empty string phrase is treated\n * as \"no phrase required\" (`!!confirmationPhrase`). Pressing Enter in\n * the input triggers confirm when `canConfirm` is true.\n *\n * `onConfirm` can be async. While the returned promise is pending,\n * both buttons are disabled and a `Loader2` spinner appears. On\n * resolve, the dialog closes via `onOpenChange(false)`. On reject,\n * the dialog stays open so the consumer can show their own error.\n *\n * @example\n *   <ConfirmDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project\"\n *     description=\"This cannot be undone.\"\n *     intent=\"destructive\"\n *     confirmationPhrase=\"my-project\"\n *     onConfirm={async () => api.deleteProject(id)}\n *   />\n */\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  intent?: \"default\" | \"destructive\";\n  confirmationPhrase?: string;\n  onConfirm: () => void | Promise<void>;\n  loading?: boolean;\n}\n\nconst ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      intent = \"default\",\n      confirmationPhrase,\n      onConfirm,\n      loading: externalLoading,\n    },\n    ref,\n  ) => {\n    const [phraseInput, setPhraseInput] = useState(\"\");\n    const [internalLoading, setInternalLoading] = useState(false);\n    const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n    const phraseRequired = !!confirmationPhrase;\n    const phraseMatched = phraseRequired ? phraseInput === confirmationPhrase : true;\n    const showLoading = externalLoading === true || internalLoading;\n    const canConfirm = phraseMatched && !showLoading;\n\n    // Reset phrase input whenever the dialog closes.\n    useEffect(() => {\n      if (!open) setPhraseInput(\"\");\n    }, [open]);\n\n    // Auto-focus Cancel on open (NOT confirm — destructive safety).\n    useEffect(() => {\n      if (open) {\n        const id = window.setTimeout(() => cancelRef.current?.focus(), 0);\n        return () => window.clearTimeout(id);\n      }\n    }, [open]);\n\n    async function handleConfirm() {\n      if (!canConfirm) return;\n      setInternalLoading(true);\n      try {\n        await onConfirm();\n        onOpenChange(false);\n      } catch {\n        // Stay open; consumer surfaces error.\n      } finally {\n        setInternalLoading(false);\n      }\n    }\n\n    function handleInputKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n      if (e.key === \"Enter\" && canConfirm) {\n        e.preventDefault();\n        void handleConfirm();\n      }\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <Dialog.Content ref={ref}>\n          <Dialog.Header>\n            <Dialog.Title>{title}</Dialog.Title>\n            <Dialog.Description>{description}</Dialog.Description>\n          </Dialog.Header>\n          {phraseRequired ? (\n            <Dialog.Body>\n              <p className=\"mb-2 text-body-sm text-muted-foreground\">\n                Type{\" \"}\n                <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-foreground\">\n                  {confirmationPhrase}\n                </code>{\" \"}\n                to confirm\n              </p>\n              <Input\n                value={phraseInput}\n                onChange={(e) => setPhraseInput(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                autoComplete=\"off\"\n                aria-label=\"Confirmation phrase\"\n              />\n            </Dialog.Body>\n          ) : null}\n          <Dialog.Footer>\n            <Button\n              ref={cancelRef}\n              variant=\"secondary\"\n              onClick={() => onOpenChange(false)}\n              disabled={showLoading}\n            >\n              {cancelLabel}\n            </Button>\n            <Button\n              variant={intent === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={() => void handleConfirm()}\n              disabled={!canConfirm}\n              data-confirm\n            >\n              {showLoading ? <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" /> : null}\n              {confirmLabel}\n            </Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>\n    );\n  },\n);\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"
+    }
+  ]
+}

package/registry/r/copy-button.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "copy-button",
+  "type": "registry:ui",
+  "title": "CopyButton",
+  "description": "Click-to-copy button primitive. Wraps navigator.clipboard.writeText with icon swap (Copy → Check on success, Copy → X on failure), aria-live announcement for screen readers, optional label, ghost/outline variants, and SSR-safe rendering. Auto-cleans the revert timer on unmount and debounces double-clicks.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/copy-button/copy-button.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/copy-button.tsx",
+      "content": "import { Check, Copy, X } from \"lucide-react\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * CopyButton — click-to-copy primitive for PaaS surfaces.\n *\n * Wraps the Clipboard API behind a button that:\n *   - Calls `navigator.clipboard.writeText(value)` on click\n *   - Swaps the icon (Copy → Check on success, Copy → X on failure)\n *   - Optionally swaps the visible `label` to \"Copied!\" / \"Failed\"\n *   - Announces the state change via an `aria-live=\"polite\"` sr-only region\n *   - Reverts to idle after `feedbackDuration` ms (default 1500)\n *\n * SSR-safe (guards `navigator?.clipboard?.writeText`). Debounces double-clicks\n * by ignoring clicks while not in the `idle` state. Cleans up the revert timer\n * on unmount so no `setState` happens on unmounted components.\n *\n * @example\n *   <CopyButton value={envVar.value} />               // icon-only ghost\n *   <CopyButton value={token} label=\"Copy token\" variant=\"outline\" />\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"onClick\" | \"children\"> {\n  /** String to copy when clicked. */\n  value: string;\n  /** Optional button label. Default: just the icon. */\n  label?: ReactNode;\n  /** Visual style. */\n  variant?: \"ghost\" | \"outline\";\n  /** Size. */\n  size?: \"sm\" | \"md\";\n  /** Callback after successful copy (e.g. analytics). */\n  onCopied?: (value: string) => void;\n  /** Duration of the feedback state in ms. Default 1500. */\n  feedbackDuration?: number;\n}\n\nconst VARIANT: Record<NonNullable<CopyButtonProps[\"variant\"]>, string> = {\n  ghost: \"hover:bg-muted\",\n  outline: \"border border-border/60 rounded-md\",\n};\n\nconst SIZE: Record<NonNullable<CopyButtonProps[\"size\"]>, string> = {\n  sm: \"px-2 py-1 text-label\",\n  md: \"px-2.5 py-1.5 text-body-sm\",\n};\n\nconst CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(\n  (\n    {\n      className,\n      value,\n      label,\n      variant = \"ghost\",\n      size = \"sm\",\n      onCopied,\n      feedbackDuration = 1500,\n      ...props\n    },\n    ref,\n  ) => {\n    const [state, setState] = useState<CopyState>(\"idle\");\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current);\n        }\n      };\n    }, []);\n\n    const scheduleRevert = useCallback(() => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setState(\"idle\");\n        timerRef.current = null;\n      }, feedbackDuration);\n    }, [feedbackDuration]);\n\n    const handleClick = useCallback(() => {\n      if (state !== \"idle\") return;\n\n      if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n        setState(\"failed\");\n        scheduleRevert();\n        return;\n      }\n\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setState(\"copied\");\n          onCopied?.(value);\n          scheduleRevert();\n        },\n        () => {\n          setState(\"failed\");\n          scheduleRevert();\n        },\n      );\n    }, [state, value, onCopied, scheduleRevert]);\n\n    const Icon = state === \"copied\" ? Check : state === \"failed\" ? X : Copy;\n    const liveMessage =\n      state === \"copied\" ? \"Copied to clipboard\" : state === \"failed\" ? \"Copy failed\" : \"\";\n\n    const labelText =\n      label !== undefined\n        ? state === \"copied\"\n          ? \"Copied!\"\n          : state === \"failed\"\n            ? \"Failed\"\n            : label\n        : null;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-state={state}\n        className={cn(\n          \"inline-flex items-center gap-1.5\",\n          \"font-sans transition-colors\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n          VARIANT[variant],\n          SIZE[size],\n          className,\n        )}\n        {...props}\n      >\n        <Icon\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-3.5 shrink-0 transition-opacity duration-200\",\n            state === \"copied\" && \"text-success\",\n            state === \"failed\" && \"text-destructive\",\n          )}\n        />\n        {labelText !== null ? <span>{labelText}</span> : null}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveMessage}\n        </span>\n      </button>\n    );\n  },\n);\nCopyButton.displayName = \"CopyButton\";\n\nexport { CopyButton };\n"
+    }
+  ]
+}

package/registry/r/danger-zone.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "danger-zone",
+  "type": "registry:ui",
+  "title": "DangerZone",
+  "description": "Destructive-actions section primitive with sub-component DangerZone.Action. Red-bordered container with title bar (default 'Danger Zone') and action rows. Each row carries title + description + consumer-provided action slot (typically a destructive Button). Rows separated by hairline dividers; last row drops the bottom border via last:border-b-0.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/danger-zone/danger-zone.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/danger-zone.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DangerZone — destructive-actions section primitive.\n *\n * Red-bordered container with a title bar and `DangerZone.Action` rows.\n * Each Action is laid out as title + description on the left, with a\n * consumer-provided action slot (typically a destructive Button) on\n * the right. Rows are separated by hairline dividers; the last row\n * has no bottom border via `last:border-b-0`.\n *\n * The consumer supplies the destructive button — this primitive never\n * imports `<Button>`, keeping it free of internal `@usetheo/ui` deps\n * (true primitive).\n *\n * @example\n *   <DangerZone>\n *     <DangerZone.Action\n *       title=\"Delete project\"\n *       description=\"Permanently delete this project.\"\n *       action={<Button variant=\"destructive\">Delete</Button>}\n *     />\n *   </DangerZone>\n */\nexport interface DangerZoneProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Section title. Default \"Danger Zone\". */\n  title?: ReactNode;\n}\n\nconst Root = forwardRef<HTMLElement, DangerZoneProps>(\n  ({ className, title = \"Danger Zone\", children, ...props }, ref) => (\n    <section\n      ref={ref}\n      aria-label={typeof title === \"string\" ? title : \"Danger Zone\"}\n      className={cn(\"rounded-xl border border-destructive/30 bg-destructive/[0.02]\", className)}\n      {...props}\n    >\n      <div className=\"border-destructive/20 border-b px-5 py-3 font-sans text-destructive text-label-caps uppercase tracking-wider\">\n        {title}\n      </div>\n      {children}\n    </section>\n  ),\n);\nRoot.displayName = \"DangerZone\";\n\nexport interface DangerZoneActionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description: ReactNode;\n  /** Consumer-provided destructive button (or any ReactNode). */\n  action: ReactNode;\n}\n\nconst Action = forwardRef<HTMLDivElement, DangerZoneActionProps>(\n  ({ className, title, description, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-4 border-destructive/10 border-b px-5 py-4 last:border-b-0\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col\">\n        <span className=\"font-medium font-sans text-body-sm text-foreground\">{title}</span>\n        <span className=\"mt-0.5 font-sans text-label text-muted-foreground\">{description}</span>\n      </div>\n      <div className=\"shrink-0\">{action}</div>\n    </div>\n  ),\n);\nAction.displayName = \"DangerZone.Action\";\n\ntype DangerZoneRoot = typeof Root & { Action: typeof Action };\nconst DangerZone: DangerZoneRoot = Object.assign(Root, { Action });\n\nexport { DangerZone };\n"
+    }
+  ]
+}

package/registry/r/stat-tile.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stat-tile",
+  "type": "registry:ui",
+  "title": "StatTile",
+  "description": "Big-number stat tile primitive for dashboard summaries. Renders value + label + optional icon + optional delta (trend up/down/flat with TrendingUp/TrendingDown/Minus icons and success/destructive/muted color). Dual mode: with onClick renders as button with hover state + trailing ArrowUpRight chevron; without, renders as static div. Value uses font-display tabular-nums whitespace-nowrap.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/stat-tile/stat-tile.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/stat-tile.tsx",
+      "content": "import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            className,\n          )}\n          {...props}\n        >\n          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"
+    }
+  ]
+}

package/registry/r/status-dot.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "status-dot",
+  "type": "registry:ui",
+  "title": "StatusDot",
+  "description": "Semantic status indicator (small colored circle + optional label). Five status kinds: live (success), building (warning, auto-pulses), failed (destructive), idle (muted), warning (warning, static). Three sizes (xs 6px / sm 8px default / md 10px). When neither label nor aria-label is provided, auto-applies aria-label=status and emits a dev warning.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/status-dot/status-dot.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/status-dot.tsx",
+      "content": "import { forwardRef, useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatusDot — semantic status indicator (colored circle + optional label).\n *\n * Five status kinds:\n *   - `live`     — deployed / verified / healthy (success)\n *   - `building` — in-progress / queued (warning, auto-pulses)\n *   - `failed`   — error / down / rejected (destructive)\n *   - `idle`     — pending / offline (muted)\n *   - `warning`  — degraded but functional (warning, static)\n *\n * Three sizes (xs 6px, sm 8px default, md 10px). `pulse` defaults to\n * `true` for `building` and `false` otherwise; passing `pulse` explicitly\n * overrides the auto behavior. When no visible `label` AND no `aria-label`\n * are provided, the component auto-applies `aria-label={status}` and\n * emits a dev-mode warning (a status communicated only by color is\n * invisible to screen readers).\n *\n * @example\n *   <StatusDot status=\"live\" label=\"Production\" />\n *   <StatusDot status=\"building\" />            // auto-pulses + auto-aria-label\n */\nexport type StatusKind = \"live\" | \"building\" | \"failed\" | \"idle\" | \"warning\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  status: StatusKind;\n  label?: ReactNode;\n  size?: \"xs\" | \"sm\" | \"md\";\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusKind, string> = {\n  live: \"bg-success\",\n  building: \"bg-warning\",\n  failed: \"bg-destructive\",\n  idle: \"bg-muted-foreground/40\",\n  warning: \"bg-warning\",\n};\n\nconst LABEL_COLOR: Record<StatusKind, string> = {\n  live: \"text-success\",\n  building: \"text-warning\",\n  failed: \"text-destructive\",\n  idle: \"text-muted-foreground\",\n  warning: \"text-warning\",\n};\n\nconst SIZE: Record<NonNullable<StatusDotProps[\"size\"]>, string> = {\n  xs: \"size-1.5\",\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nconst StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ className, status, label, size = \"sm\", pulse, \"aria-label\": ariaLabel, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === \"building\";\n\n    const hasVisibleLabel = label !== undefined && label !== null;\n    const effectiveAriaLabel = ariaLabel ?? (hasVisibleLabel ? undefined : status);\n\n    // EC-6: dev warning when neither label nor aria-label is provided.\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\" && !hasVisibleLabel && ariaLabel === undefined) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for a11y misconfiguration.\n        console.warn(\n          `<StatusDot status=\"${status}\" />: no \\`label\\` or \\`aria-label\\` provided. Color-only status is invisible to screen readers. Falling back to aria-label=\"${status}\".`,\n        );\n      }\n    }, [hasVisibleLabel, ariaLabel, status]);\n\n    const dot = (\n      <span\n        aria-hidden={hasVisibleLabel ? \"true\" : undefined}\n        className={cn(\n          \"inline-block shrink-0 rounded-full\",\n          SIZE[size],\n          DOT_COLOR[status],\n          shouldPulse && \"animate-pulse\",\n        )}\n      />\n    );\n\n    if (!hasVisibleLabel) {\n      return (\n        <span\n          ref={ref}\n          // biome-ignore lint/a11y/useSemanticElements: StatusDot is a generic inline indicator; there is no HTML element with implicit role=\"status\" that is an inline span. The native <output> is block-level and form-bound, which doesn't fit this use case.\n          role=\"status\"\n          aria-label={effectiveAriaLabel}\n          className={cn(\"inline-flex items-center\", className)}\n          {...props}\n        >\n          {dot}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        aria-label={effectiveAriaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1.5 font-mono text-label\",\n          LABEL_COLOR[status],\n          className,\n        )}\n        {...props}\n      >\n        {dot}\n        <span>{label}</span>\n      </span>\n    );\n  },\n);\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot };\n"
+    }
+  ]
+}

package/registry/r/table.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "title": "Table",
+  "description": "Semantic data-table primitive with sub-components (Table.Header, Table.Body, Table.Row, Table.Cell, Table.HeaderCell). Supports density (default | compact via Context), per-cell align (left | center | right), numeric cells (font-mono tabular-nums), and sortable header cells (onSort + sortDirection with ChevronUp/ChevronDown affordance + aria-sort).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/table/table.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/table.tsx",
+      "content": "import { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Table — semantic data table primitive with sub-components.\n *\n * Composition:\n *   <Table density=\"default\">\n *     <Table.Header>\n *       <Table.Row>\n *         <Table.HeaderCell>Date</Table.HeaderCell>\n *         <Table.HeaderCell align=\"right\">Amount</Table.HeaderCell>\n *       </Table.Row>\n *     </Table.Header>\n *     <Table.Body>\n *       <Table.Row>\n *         <Table.Cell>2026-05-23</Table.Cell>\n *         <Table.Cell align=\"right\" numeric>$ 42.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Body>\n *   </Table>\n *\n * density propagates via Context so Cells pick up vertical padding without\n * prop drilling. Sub-components are attached as static properties on the\n * root (`Table.Header`, etc.) — single import surface.\n *\n * Sortable header: pass `onSort` + `sortDirection`. The HeaderCell renders\n * the sort affordance (ChevronUp/ChevronDown) and triggers the consumer\n * callback. `sortDirection` without `onSort` is a no-op (header stays\n * static); `sortDirection=\"none\"` with `onSort` shows a dimmed affordance.\n */\n\ntype TableDensity = \"default\" | \"compact\";\ntype AlignKind = \"left\" | \"center\" | \"right\";\ntype SortDirection = \"asc\" | \"desc\" | \"none\";\n\nconst TableDensityContext = createContext<TableDensity>(\"default\");\n\nconst alignClass: Record<AlignKind, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n};\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  density?: TableDensity;\n}\n\nconst Root = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = \"default\", children, ...props }, ref) => (\n    <TableDensityContext.Provider value={density}>\n      <table\n        ref={ref}\n        className={cn(\"w-full border-collapse font-sans text-body-sm\", className)}\n        {...props}\n      >\n        {children}\n      </table>\n    </TableDensityContext.Provider>\n  ),\n);\nRoot.displayName = \"Table\";\n\nconst Header = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <thead\n      ref={ref}\n      className={cn(\n        \"border-border/40 border-b text-label-caps text-muted-foreground uppercase tracking-wider\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Table.Header\";\n\nconst Body = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn(\"text-foreground\", className)} {...props} />\n  ),\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        \"border-border/20 border-b transition-colors last:border-0 hover:bg-muted/40\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRow.displayName = \"Table.Row\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  numeric?: boolean;\n}\n\nconst Cell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = \"left\", numeric, children, ...props }, ref) => {\n    const density = useContext(TableDensityContext);\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          \"px-3\",\n          density === \"compact\" ? \"py-1.5\" : \"py-3\",\n          alignClass[align],\n          numeric && \"font-mono tabular-nums\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </td>\n    );\n  },\n);\nCell.displayName = \"Table.Cell\";\n\nexport interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  /** When provided, header becomes a sort trigger. */\n  onSort?: () => void;\n  /** Current sort state for this column. */\n  sortDirection?: SortDirection;\n}\n\nconst HeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  ({ className, align = \"left\", onSort, sortDirection = \"none\", children, ...props }, ref) => {\n    const sortAffordance =\n      onSort !== undefined ? (\n        <span className=\"ml-1 inline-flex flex-col\">\n          <ChevronUp\n            aria-hidden=\"true\"\n            className={cn(\"-mb-1 size-3\", sortDirection === \"asc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n          <ChevronDown\n            aria-hidden=\"true\"\n            className={cn(\"size-3\", sortDirection === \"desc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n        </span>\n      ) : null;\n\n    const ariaSort: ThHTMLAttributes<HTMLTableCellElement>[\"aria-sort\"] =\n      onSort === undefined\n        ? undefined\n        : sortDirection === \"asc\"\n          ? \"ascending\"\n          : sortDirection === \"desc\"\n            ? \"descending\"\n            : \"none\";\n\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        aria-sort={ariaSort}\n        className={cn(\n          \"px-3 py-2.5 font-medium\",\n          alignClass[align],\n          align === \"right\" && \"[&_button]:justify-end\",\n          className,\n        )}\n        {...props}\n      >\n        {onSort !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onSort}\n            className={cn(\n              \"inline-flex items-center gap-1\",\n              \"text-label-caps uppercase tracking-wider\",\n              \"transition-colors hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {children}\n            {sortAffordance}\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    );\n  },\n);\nHeaderCell.displayName = \"Table.HeaderCell\";\n\ntype TableRoot = typeof Root & {\n  Header: typeof Header;\n  Body: typeof Body;\n  Row: typeof Row;\n  Cell: typeof Cell;\n  HeaderCell: typeof HeaderCell;\n};\n\nconst Table: TableRoot = Object.assign(Root, { Header, Body, Row, Cell, HeaderCell });\n\nexport { Table };\n"
+    }
+  ]
+}

package/registry/r/timestamp.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "timestamp",
+  "type": "registry:ui",
+  "title": "Timestamp",
+  "description": "Accessible <time> primitive with relative/absolute/both formats, auto-refresh interval (default 60s, 0 disables), native title tooltip with absolute time, and aria-label that always carries the full date. Built on Intl.RelativeTimeFormat (zero deps). value accepts ISO string, Date, or Unix ms (NOT seconds). Invalid date renders empty element; invalid locale falls back to default with dev warning.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/timestamp/timestamp.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/timestamp.tsx",
+      "content": "import { forwardRef, useEffect, useState } from \"react\";\nimport type { TimeHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Timestamp — accessible relative/absolute time primitive.\n *\n * Renders a semantic `<time datetime>` element. Format modes:\n *   - `relative` (default) — \"just now\", \"5 minutes ago\", \"2 hours ago\",\n *     \"Dec 5\" (>7d), \"Dec 5, 2024\" (different year)\n *   - `absolute` — full localized date+time\n *   - `both` — \"Dec 5, 2026 (2 hours ago)\"\n *\n * Uses zero-dep `Intl.RelativeTimeFormat`. The tooltip on hover is the\n * HTML `title` attribute (not the `<Tooltip>` component) — keeps this\n * file a true primitive without sibling-primitive imports.\n *\n * Auto-refreshes via `setInterval` (default 60_000ms); pass\n * `refreshInterval={0}` to disable. `aria-label` always carries the\n * absolute time so screen readers read \"May 23, 2026 14:32 — posted\n * 2 hours ago\".\n *\n * @param value Source date — ISO string, Date object, or **Unix ms**\n *              (NOT seconds). Passing seconds renders ~1970.\n */\nexport interface TimestampProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, \"children\"> {\n  value: string | Date | number;\n  format?: \"relative\" | \"absolute\" | \"both\";\n  /** Auto-refresh interval when format=relative. Default 60000. 0 disables. */\n  refreshInterval?: number;\n  /** Locale for absolute formatting + Intl.RelativeTimeFormat. Default browser locale. */\n  locale?: string;\n  /** When true, omit the `title` tooltip. */\n  noTooltip?: boolean;\n}\n\nfunction toDate(value: string | Date | number): Date | null {\n  const d = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(d.getTime()) ? null : d;\n}\n\nconst SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;\nconst UNITS: Array<{ unit: Intl.RelativeTimeFormatUnit; ms: number }> = [\n  { unit: \"year\", ms: 365 * 24 * 60 * 60 * 1000 },\n  { unit: \"month\", ms: 30 * 24 * 60 * 60 * 1000 },\n  { unit: \"day\", ms: 24 * 60 * 60 * 1000 },\n  { unit: \"hour\", ms: 60 * 60 * 1000 },\n  { unit: \"minute\", ms: 60 * 1000 },\n];\n\nfunction safeRelativeFormatter(locale: string | undefined): Intl.RelativeTimeFormat | null {\n  try {\n    return new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\n  } catch {\n    // EC-8: invalid locale tag — fall back to default locale.\n    if (process.env.NODE_ENV !== \"production\") {\n      // biome-ignore lint/suspicious/noConsole: dev-only diagnostic.\n      console.warn(`<Timestamp locale=\"${locale}\">: invalid locale tag, falling back to default.`);\n    }\n    try {\n      return new Intl.RelativeTimeFormat(undefined, { numeric: \"auto\" });\n    } catch {\n      return null;\n    }\n  }\n}\n\nfunction safeAbsoluteFormat(date: Date, locale: string | undefined, withYear: boolean): string {\n  try {\n    return date.toLocaleDateString(locale, {\n      month: \"short\",\n      day: \"numeric\",\n      ...(withYear ? { year: \"numeric\" } : {}),\n    });\n  } catch {\n    return date.toLocaleDateString(undefined, {\n      month: \"short\",\n      day: \"numeric\",\n      ...(withYear ? { year: \"numeric\" } : {}),\n    });\n  }\n}\n\nfunction formatRelative(date: Date, now: Date, locale: string | undefined): string {\n  const diffMs = date.getTime() - now.getTime();\n  const absMs = Math.abs(diffMs);\n\n  if (absMs < 60_000) return \"just now\";\n\n  if (diffMs < 0 && absMs > SEVEN_DAYS_MS) {\n    const sameYear = date.getFullYear() === now.getFullYear();\n    return safeAbsoluteFormat(date, locale, !sameYear);\n  }\n\n  const rtf = safeRelativeFormatter(locale);\n  if (rtf === null) {\n    return safeAbsoluteFormat(date, locale, date.getFullYear() !== now.getFullYear());\n  }\n\n  for (const { unit, ms } of UNITS) {\n    if (absMs >= ms) {\n      return rtf.format(Math.round(diffMs / ms), unit);\n    }\n  }\n  return \"just now\";\n}\n\nfunction formatAbsolute(date: Date, locale: string | undefined): string {\n  try {\n    return date.toLocaleString(locale, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"numeric\",\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n    });\n  } catch {\n    return date.toLocaleString(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"numeric\",\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n    });\n  }\n}\n\nconst Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      className,\n      value,\n      format = \"relative\",\n      refreshInterval = 60_000,\n      locale,\n      noTooltip,\n      ...props\n    },\n    ref,\n  ) => {\n    const date = toDate(value);\n    const [now, setNow] = useState<Date>(() => new Date());\n\n    useEffect(() => {\n      if (format !== \"relative\" || refreshInterval === 0 || date === null) return;\n      const id = setInterval(() => setNow(new Date()), refreshInterval);\n      return () => clearInterval(id);\n    }, [format, refreshInterval, date]);\n\n    if (date === null) {\n      return <time ref={ref} className={cn(className)} suppressHydrationWarning {...props} />;\n    }\n\n    const iso = date.toISOString();\n    const absolute = formatAbsolute(date, locale);\n    const relative = formatRelative(date, now, locale);\n    const visibleText =\n      format === \"absolute\" ? absolute : format === \"both\" ? `${absolute} (${relative})` : relative;\n\n    return (\n      <time\n        ref={ref}\n        dateTime={iso}\n        title={noTooltip ? undefined : absolute}\n        aria-label={absolute}\n        suppressHydrationWarning\n        className={cn(className)}\n        {...props}\n      >\n        {visibleText}\n      </time>\n    );\n  },\n);\nTimestamp.displayName = \"Timestamp\";\n\nexport { Timestamp };\n"
+    }
+  ]
+}