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

package/registry/r/alert.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "title": "Alert",
+  "description": "Persistent inline notice primitive. Four intents (info / success / warning / destructive) with mapped lucide icons (Info / CheckCircle2 / TriangleAlert / AlertCircle) and design tokens. Optional title, description, action slot, and onDismiss handler. destructive intent renders role=alert (assertive); other intents render role=status (polite). Distinct from Toast (transient, auto-dismiss) and EmptyState (centered card).",
+  "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/alert/alert.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/alert.tsx",
+      "content": "import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Alert — persistent inline notice. Distinct from `Toast` (transient,\n * corner-positioned, multiple stackable) and `EmptyState` (centered card\n * for no-data affordances). Full-width-of-section banner that stays\n * visible until the user acts.\n *\n * `intent` drives icon + color tokens. `destructive` intent renders\n * `role=\"alert\"` for assertive screen-reader announcement; the other\n * three intents render `role=\"status\"` (polite). `onDismiss`, when\n * provided, renders a trailing `X` button. `action` slot accepts any\n * ReactNode (typically a `<Button>` or anchor).\n *\n * @example\n *   <Alert\n *     intent=\"warning\"\n *     title=\"Verify your email\"\n *     description=\"We sent a link to your email.\"\n *     action={<Button size=\"sm\" onClick={resend}>Resend</Button>}\n *   />\n */\nexport type AlertIntent = \"info\" | \"success\" | \"warning\" | \"destructive\";\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"role\"> {\n  intent?: AlertIntent;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  onDismiss?: () => void;\n}\n\nconst INTENT: Record<\n  AlertIntent,\n  { icon: ElementType; border: string; bg: string; iconColor: string }\n> = {\n  info: {\n    icon: Info,\n    border: \"border-primary/30\",\n    bg: \"bg-primary/[0.04]\",\n    iconColor: \"text-primary\",\n  },\n  success: {\n    icon: CheckCircle2,\n    border: \"border-success/30\",\n    bg: \"bg-success/[0.04]\",\n    iconColor: \"text-success\",\n  },\n  warning: {\n    icon: TriangleAlert,\n    border: \"border-warning/30\",\n    bg: \"bg-warning/[0.04]\",\n    iconColor: \"text-warning\",\n  },\n  destructive: {\n    icon: AlertCircle,\n    border: \"border-destructive/30\",\n    bg: \"bg-destructive/[0.04]\",\n    iconColor: \"text-destructive\",\n  },\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, intent = \"info\", title, description, action, onDismiss, ...props }, ref) => {\n    const config = INTENT[intent];\n    const Icon = config.icon;\n    const hasTitle = title !== undefined && title !== null;\n    const hasDescription = description !== undefined && description !== null;\n    const role = intent === \"destructive\" ? \"alert\" : \"status\";\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        className={cn(\n          \"rounded-lg border\",\n          config.border,\n          config.bg,\n          hasTitle && hasDescription ? \"p-4\" : \"p-3\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-start gap-3\">\n          <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-4 shrink-0\", config.iconColor)} />\n          <div className=\"min-w-0 flex-1\">\n            {hasTitle ? (\n              <div className=\"font-medium font-sans text-body-sm text-foreground\">{title}</div>\n            ) : null}\n            {hasDescription ? (\n              <div\n                className={cn(\"font-sans text-body-sm text-muted-foreground\", hasTitle && \"mt-0.5\")}\n              >\n                {description}\n              </div>\n            ) : null}\n          </div>\n          {action !== undefined ? <div className=\"ml-auto shrink-0\">{action}</div> : null}\n          {onDismiss !== undefined ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              aria-label=\"Dismiss\"\n              className={cn(\n                \"shrink-0 rounded p-0.5 text-muted-foreground transition-colors\",\n                \"hover:text-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n            >\n              <X aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n"
+    }
+  ]
+}

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/pagination.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "title": "Pagination",
+  "description": "Accessible page-number navigation primitive. Renders <nav aria-label=Pagination> with first/prev/numbers/next/last buttons and visual ellipses when totalPages exceeds the visible range. Active page carries aria-current=page. Keyboard nav: ArrowLeft / ArrowRight / Home / End. Configurable siblingCount + optional jump buttons. Returns null when totalPages <= 1. Exports a pure computePageRange helper for unit testing the range logic in isolation.",
+  "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/pagination/pagination.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/pagination.tsx",
+      "content": "import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Pagination — accessible page-number navigation primitive.\n *\n * Renders a `<nav aria-label=\"Pagination\">` containing a button group:\n * `[<<] [<] 1 ... 5 6 [7] 8 9 ... 42 [>] [>>]`. The active page carries\n * `aria-current=\"page\"`. Keyboard navigation (ArrowLeft / ArrowRight /\n * Home / End) is wired on the nav. Ellipses are rendered as\n * non-interactive `<span>` elements with `aria-hidden`.\n *\n * Renders nothing when `totalPages <= 1` (the page is the whole list).\n *\n * `siblingCount` controls how many neighbors of the current page are\n * always visible (default 1 → \"5 6 [7] 8 9\"). `showJumpButtons`\n * toggles the first/last `<<` / `>>` buttons.\n *\n * Consumers control state (`currentPage`) and are responsible for any\n * URL routing — the buttons are `<button>`, not `<a>`.\n *\n * @example\n *   <Pagination\n *     currentPage={page}\n *     totalPages={42}\n *     onPageChange={setPage}\n *   />\n */\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  /** Neighbors of current page that stay visible. Default 1. */\n  siblingCount?: number;\n  /** Render `<<` / `>>` first/last buttons. Default true. */\n  showJumpButtons?: boolean;\n  /** Size variant. Default md. */\n  size?: \"sm\" | \"md\";\n}\n\n/**\n * Pure helper: compute the visible page-range with ellipses.\n * Exported for unit testing — most pagination bugs live here.\n */\nexport function computePageRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount = 1,\n): Array<number | \"ellipsis-start\" | \"ellipsis-end\"> {\n  if (totalPages <= 1) return [];\n\n  // Always keep first + last + siblings around current.\n  // Total \"core\" buttons: 1 + (siblingCount * 2 + 1) + 1 = siblingCount * 2 + 3.\n  // Plus possibly 2 ellipsis placeholders → max visible = siblingCount * 2 + 5.\n  const totalNumbers = siblingCount * 2 + 3;\n  const totalWithEdges = totalNumbers + 2;\n\n  if (totalPages <= totalWithEdges) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblingCount, 1);\n  const rightSibling = Math.min(currentPage + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRangeEnd = 1 + (siblingCount * 2 + 2);\n    const leftRange = Array.from({ length: leftRangeEnd }, (_, i) => i + 1);\n    return [...leftRange, \"ellipsis-end\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightStart = totalPages - (siblingCount * 2 + 2);\n    const rightRange = Array.from(\n      { length: totalPages - rightStart + 1 },\n      (_, i) => rightStart + i,\n    );\n    return [1, \"ellipsis-start\", ...rightRange];\n  }\n\n  // Both sides need ellipsis.\n  const middleRange = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  );\n  return [1, \"ellipsis-start\", ...middleRange, \"ellipsis-end\", totalPages];\n}\n\nconst SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-7 text-label\",\n  md: \"size-8 text-body-sm\",\n};\n\nconst ICON_SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-3\",\n  md: \"size-3.5\",\n};\n\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      currentPage,\n      totalPages,\n      onPageChange,\n      siblingCount = 1,\n      showJumpButtons = true,\n      size = \"md\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (totalPages <= 1) {\n      return null;\n    }\n\n    const range = computePageRange(currentPage, totalPages, siblingCount);\n    const prevDisabled = currentPage <= 1;\n    const nextDisabled = currentPage >= totalPages;\n    const sizeClass = SIZE[size];\n    const iconClass = ICON_SIZE[size];\n\n    const buttonBase = cn(\n      \"inline-flex items-center justify-center rounded-md font-mono tabular-nums\",\n      \"transition-colors\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      sizeClass,\n    );\n\n    function go(page: number) {\n      const clamped = Math.max(1, Math.min(totalPages, page));\n      if (clamped !== currentPage) onPageChange(clamped);\n    }\n\n    function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        go(currentPage - 1);\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        go(currentPage + 1);\n      } else if (e.key === \"Home\") {\n        e.preventDefault();\n        go(1);\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        go(totalPages);\n      }\n    }\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex items-center gap-1\", className)}\n        {...props}\n      >\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(1)}\n            disabled={prevDisabled}\n            aria-label=\"Go to first page\"\n            aria-disabled={prevDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsLeft aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage - 1)}\n          disabled={prevDisabled}\n          aria-label=\"Go to previous page\"\n          aria-disabled={prevDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronLeft aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {range.map((item) => {\n          if (item === \"ellipsis-start\" || item === \"ellipsis-end\") {\n            return (\n              <span\n                key={item}\n                aria-hidden=\"true\"\n                className={cn(\n                  \"inline-flex items-center justify-center text-muted-foreground\",\n                  sizeClass,\n                )}\n              >\n                …\n              </span>\n            );\n          }\n          const isActive = item === currentPage;\n          return (\n            <button\n              key={item}\n              type=\"button\"\n              onClick={() => go(item)}\n              aria-label={`Go to page ${item}`}\n              aria-current={isActive ? \"page\" : undefined}\n              className={cn(\n                buttonBase,\n                isActive\n                  ? \"bg-primary text-primary-foreground hover:bg-primary\"\n                  : \"text-foreground hover:bg-muted\",\n              )}\n            >\n              {item}\n            </button>\n          );\n        })}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage + 1)}\n          disabled={nextDisabled}\n          aria-label=\"Go to next page\"\n          aria-disabled={nextDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronRight aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(totalPages)}\n            disabled={nextDisabled}\n            aria-label=\"Go to last page\"\n            aria-disabled={nextDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsRight aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n      </nav>\n    );\n  },\n);\nPagination.displayName = \"Pagination\";\n\nexport { Pagination };\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"
+    }
+  ]
+}