@mastra/playground-ui 58.1.0-alpha.0 → 59.0.0

package/dist/components/RelativeTimestamp.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTimestamp.es.js","sources":["../../src/ds/components/RelativeTimestamp/relative-timestamp.tsx"],"sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDate, toDate } from '@/utils/date-format';\nimport type { DateInput } from '@/utils/date-format';\nimport { formatRelativeTime } from '@/utils/relative-time';\n\nexport interface RelativeTimestampProps {\n  value: DateInput;\n  className?: string;\n}\n\nconst listeners = new Set<() => void>();\nlet ticker: ReturnType<typeof setInterval> | undefined;\nlet now = Date.now();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  if (!ticker) {\n    now = Date.now();\n    ticker = setInterval(() => {\n      now = Date.now();\n      listeners.forEach(notify => notify());\n    }, 1000);\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      clearInterval(ticker);\n      ticker = undefined;\n    }\n  };\n}\n\nfunction useNow() {\n  const read = () => (ticker ? now : Date.now());\n  return useSyncExternalStore(subscribe, read, read);\n}\n\nconst SINCE_UNITS = [\n  ['day', 86_400_000],\n  ['hour', 3_600_000],\n  ['minute', 60_000],\n  ['second', 1_000],\n] as const;\n\nfunction formatUnit(count: number, unit: (typeof SINCE_UNITS)[number][0]) {\n  return new Intl.NumberFormat(undefined, { style: 'unit', unit, unitDisplay: 'long' }).format(count);\n}\n\nfunction formatSince(date: Date, at: number) {\n  const diff = at - date.getTime();\n  let rest = Math.abs(diff);\n  const parts: string[] = [];\n  for (const [unit, size] of SINCE_UNITS) {\n    const count = Math.floor(rest / size);\n    rest %= size;\n    if (parts.length > 0) {\n      if (count > 0) parts.push(formatUnit(count, unit));\n      break;\n    }\n    if (count > 0 || unit === 'second') parts.push(formatUnit(count, unit));\n  }\n  const label = parts.join(' ');\n  return diff < 0 ? `${label} from now` : `${label} ago`;\n}\n\nfunction Relative({ date }: { date: Date }) {\n  return <>{formatRelativeTime(date, { now: useNow() })}</>;\n}\n\nfunction Since({ date }: { date: Date }) {\n  return <>{formatSince(date, useNow())}</>;\n}\n\nfunction zoneName(date: Date, timeZone?: string) {\n  return new Intl.DateTimeFormat(undefined, { timeZone, timeZoneName: 'short' })\n    .formatToParts(date)\n    .find(part => part.type === 'timeZoneName')?.value;\n}\n\nfunction zoneRow(date: Date, timeZone?: string) {\n  return {\n    zone: zoneName(date, timeZone) ?? 'Local',\n    day: new Intl.DateTimeFormat(undefined, { timeZone, month: 'short', day: 'numeric', year: 'numeric' }).format(date),\n    time: new Intl.DateTimeFormat(undefined, {\n      timeZone,\n      hour: 'numeric',\n      minute: '2-digit',\n      second: '2-digit',\n    }).format(date),\n  };\n}\n\nexport function RelativeTimestamp({ value, className }: RelativeTimestampProps) {\n  const date = toDate(value);\n  if (!date) return null;\n\n  const local = zoneRow(date);\n  const rows = local.zone === 'UTC' ? [local] : [local, zoneRow(date, 'UTC')];\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <time\n            dateTime={date.toISOString()}\n            tabIndex={0}\n            className={cn('rounded-sm font-mono whitespace-nowrap tabular-nums', focusRing.visible, className)}\n          />\n        }\n      >\n        <span aria-hidden=\"true\">\n          <Relative date={date} />\n        </span>\n        <span className=\"sr-only\">{formatDate(date, 'date-time-seconds')}</span>\n      </TooltipTrigger>\n      <TooltipContent>\n        <span className=\"text-muted-foreground\">\n          <Since date={date} />\n        </span>\n        <table className=\"mt-1.5 border-t border-border font-mono tabular-nums\">\n          <tbody>\n            {rows.map(row => (\n              <tr key={row.zone}>\n                <td className=\"pt-1.5 pr-3\">\n                  <Badge size=\"xs\">{row.zone}</Badge>\n                </td>\n                <td className=\"pt-1.5 pr-3\">{row.day}</td>\n                <td className=\"pt-1.5 text-right\">{row.time}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Section.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const section = require('../section-CTihfzmc.cjs');
+const section = require('../section-p9vCSmPq.cjs');
 
 
 

package/dist/components/Section.es.js

@@ -1,2 +1,2 @@
-export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-B9OLuEq3.js';
+export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-Bi0g7cn6.js';
 //# sourceMappingURL=Section.es.js.map

package/dist/components/SettingsRow.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const settingsRow = require('../settings-row-BoAuUUuH.cjs');
+const settingsRow = require('../settings-row-Cr8gaO5a.cjs');
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(settingsRow.SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/SettingsRow.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { S as SettingsRowLayout } from '../settings-row-B2IekRyH.js';
+import { S as SettingsRowLayout } from '../settings-row-Cr9DsBSX.js';
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/SideDialog.cjs.js

@@ -14,7 +14,7 @@ const React = require('react');
 const Button = require('../Button-BAMnPqos.cjs');
 const buttonsGroup = require('../buttons-group-CoZP3lJt.cjs');
 const copyButton = require('../copy-button-D2MTGxq_.cjs');
-const section = require('../section-CTihfzmc.cjs');
+const section = require('../section-p9vCSmPq.cjs');
 const themeProvider = require('../theme-provider-aO5-jZVp.cjs');
 const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
 const drawer = require('../drawer-DpldATv1.cjs');

package/dist/components/SideDialog.es.js

@@ -11,7 +11,7 @@ import { useState, useMemo } from 'react';
 import { B as Button } from '../Button-B8nF87ai.js';
 import { B as ButtonsGroup } from '../buttons-group-DsZgrZBZ.js';
 import { C as CopyButton } from '../copy-button-DcZ1mdw4.js';
-import { S as Section } from '../section-B9OLuEq3.js';
+import { S as Section } from '../section-Bi0g7cn6.js';
 import { u as useTheme } from '../theme-provider-CQKmlkHX.js';
 import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
 import { j as DrawerInteractive, D as Drawer, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle, e as DrawerDescription, c as DrawerClose } from '../drawer-DZnqDb9H.js';

package/dist/components/StatusIndicators.cjs.js

@@ -4,41 +4,47 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
-const Txt = require('../Txt-B4-2nLaI.cjs');
 const React = require('react');
 const popover = require('../popover-lBqKiPtp.cjs');
 const tooltip = require('../tooltip-FvWL16Xn.cjs');
 
+const deployStates = {
+  ready: { label: "Ready", tone: "success" },
+  building: { label: "Building", tone: "progress" },
+  idle: { label: "Idle", tone: "neutral", glyph: "ring" },
+  queued: { label: "Queued", tone: "neutral", glyph: "ring" },
+  stopped: { label: "Stopped", tone: "neutral" },
+  error: { label: "Error", tone: "error" }
+};
 const TONE_FILL = {
   success: "bg-notice-success",
   progress: "bg-notice-warning",
   error: "bg-notice-destructive",
-  idle: "bg-notice-info",
   neutral: "bg-muted-foreground"
 };
-const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
-const GLYPH_CLASS = {
-  circle: "rounded-full",
-  square: "rounded-xs",
-  dashed: "border-muted-foreground rounded-full border border-dashed bg-transparent"
+const TONE_RING = {
+  success: "border-notice-success",
+  progress: "border-notice-warning",
+  error: "border-notice-destructive",
+  neutral: "border-muted-foreground"
 };
+const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
 function statusToneFill(tone) {
   return TONE_FILL[tone];
 }
-function statusDotClass({ tone, glyph = "circle" }, className) {
+function statusDotClass({ tone, glyph = "filled" }, className) {
   return utils_cn.cn(
-    "inline-block size-2 shrink-0",
-    TONE_FILL[tone],
+    "inline-block size-2 shrink-0 rounded-full",
+    glyph === "ring" ? utils_cn.cn("border bg-transparent", TONE_RING[tone]) : TONE_FILL[tone],
     tone === "progress" && PROGRESS_DECORATION,
-    GLYPH_CLASS[glyph],
     className
   );
 }
 
-function Status({ presentation, children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("inline-flex items-center gap-2 text-foreground", className), ...props, children: [
+function Status({ presentation, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils_cn.cn("inline-flex items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusDotClass(presentation), "aria-hidden": true }),
-    children ?? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", children: presentation.label })
+    presentation.label
   ] });
 }
 
@@ -139,6 +145,7 @@ function StatusDot({
 
 exports.Status = Status;
 exports.StatusDot = StatusDot;
+exports.deployStates = deployStates;
 exports.statusDotClass = statusDotClass;
 exports.statusToneFill = statusToneFill;
 //# sourceMappingURL=StatusIndicators.cjs.js.map

package/dist/components/StatusIndicators.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';\nexport type StatusDotGlyph = 'circle' | 'square' | 'dashed';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  idle: 'bg-notice-info',\n  neutral: 'bg-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nconst GLYPH_CLASS: Record<StatusDotGlyph, string> = {\n  circle: 'rounded-full',\n  square: 'rounded-xs',\n  dashed: 'border-muted-foreground rounded-full border border-dashed bg-transparent',\n};\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'circle' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0',\n    TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    GLYPH_CLASS[glyph],\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n  children?: ReactNode;\n};\n\nexport function Status({ presentation, children, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2 text-foreground', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {children ?? (\n        <Txt as=\"span\" variant=\"meta\">\n          {presentation.label}\n        </Txt>\n      )}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","Txt","useState","useRef","useEffect","Popover","PopoverTrigger","PopoverContent","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-notice-success',\n  progress: 'border-notice-warning',\n  error: 'border-notice-destructive',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","useRef","useEffect","Popover","PopoverTrigger","PopoverContent","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}

package/dist/components/StatusIndicators.es.js

@@ -1,40 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as cn } from '../cn-65Adrsfj.js';
-import { T as Txt } from '../Txt-DTh3Pa_a.js';
 import { useState, useRef, useEffect } from 'react';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-BrDiP0RI.js';
 
+const deployStates = {
+  ready: { label: "Ready", tone: "success" },
+  building: { label: "Building", tone: "progress" },
+  idle: { label: "Idle", tone: "neutral", glyph: "ring" },
+  queued: { label: "Queued", tone: "neutral", glyph: "ring" },
+  stopped: { label: "Stopped", tone: "neutral" },
+  error: { label: "Error", tone: "error" }
+};
 const TONE_FILL = {
   success: "bg-notice-success",
   progress: "bg-notice-warning",
   error: "bg-notice-destructive",
-  idle: "bg-notice-info",
   neutral: "bg-muted-foreground"
 };
-const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
-const GLYPH_CLASS = {
-  circle: "rounded-full",
-  square: "rounded-xs",
-  dashed: "border-muted-foreground rounded-full border border-dashed bg-transparent"
+const TONE_RING = {
+  success: "border-notice-success",
+  progress: "border-notice-warning",
+  error: "border-notice-destructive",
+  neutral: "border-muted-foreground"
 };
+const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
 function statusToneFill(tone) {
   return TONE_FILL[tone];
 }
-function statusDotClass({ tone, glyph = "circle" }, className) {
+function statusDotClass({ tone, glyph = "filled" }, className) {
   return cn(
-    "inline-block size-2 shrink-0",
-    TONE_FILL[tone],
+    "inline-block size-2 shrink-0 rounded-full",
+    glyph === "ring" ? cn("border bg-transparent", TONE_RING[tone]) : TONE_FILL[tone],
     tone === "progress" && PROGRESS_DECORATION,
-    GLYPH_CLASS[glyph],
     className
   );
 }
 
-function Status({ presentation, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-2 text-foreground", className), ...props, children: [
+function Status({ presentation, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: statusDotClass(presentation), "aria-hidden": true }),
-    children ?? /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", children: presentation.label })
+    presentation.label
   ] });
 }
 
@@ -133,5 +139,5 @@ function StatusDot({
   ] });
 }
 
-export { Status, StatusDot, statusDotClass, statusToneFill };
+export { Status, StatusDot, deployStates, statusDotClass, statusToneFill };
 //# sourceMappingURL=StatusIndicators.es.js.map

package/dist/components/StatusIndicators.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicators.es.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';\nexport type StatusDotGlyph = 'circle' | 'square' | 'dashed';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  idle: 'bg-notice-info',\n  neutral: 'bg-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nconst GLYPH_CLASS: Record<StatusDotGlyph, string> = {\n  circle: 'rounded-full',\n  square: 'rounded-xs',\n  dashed: 'border-muted-foreground rounded-full border border-dashed bg-transparent',\n};\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'circle' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0',\n    TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    GLYPH_CLASS[glyph],\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n  children?: ReactNode;\n};\n\nexport function Status({ presentation, children, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2 text-foreground', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {children ?? (\n        <Txt as=\"span\" variant=\"meta\">\n          {presentation.label}\n        </Txt>\n      )}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["presented"],"mappings":"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"}
+{"version":3,"file":"StatusIndicators.es.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-notice-success',\n  progress: 'border-notice-warning',\n  error: 'border-notice-destructive',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["presented"],"mappings":"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"}

package/dist/components/Table.cjs.js

@@ -6,7 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
-const Txt = require('../Txt-B4-2nLaI.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
+const utils_dateFormat = require('../utils/date-format.cjs.js');
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -83,20 +84,6 @@ const Row = React.forwardRef(
   }
 );
 
-const formatDateCell = (date) => {
-  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
-  const day = date.getDate();
-  const formattedDay = `${month} ${day}`;
-  const time = new Intl.DateTimeFormat("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-    // Use 24-hour format
-  }).format(date);
-  return { day: formattedDay, time };
-};
-
 const Cell = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("td", { className: utils_cn.cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex size-full shrink-0 items-center"), children }) });
 };
@@ -104,12 +91,7 @@ const TxtCell = ({ className, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
-  const { day, time } = formatDateCell(dateTime);
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", children: time })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", className: "shrink-0", children: utils_dateFormat.formatDate(dateTime, "date-time-seconds") }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3.5", children: [

package/dist/components/Table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"body\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","jsxs","Icon","useState","useCallback"],"mappings":";;;;;;;;;;AAWA,MAAM,OAAA,GAAU;AAAA,EACd,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,UAAU,IAAA,GAAO,SAAA,EAAW,OAAM,KAAkB;AACrF,EAAA,uBACEA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAWC,WAAA,CAAG,QAAA,EAAU,OAAA,CAAQ,IAAI,CAAA,EAAG,SAAS,CAAA,EAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;AAOO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,UAAS,KAAkB;AAC5D,EAAA,uBACED,cAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,YAAG,+CAAA,EAAiD,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA,EAC3F,CAAA;AAEJ;AAQO,MAAM,KAAK,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAe;AAChE,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAOO,MAAM,QAAQ,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAkB;AACtE,EAAA,uBACED,cAAA,CAAC,WAAM,SAAA,EAAWC,WAAA,CAAG,IAAI,SAAS,CAAA,EAAI,GAAG,KAAA,EACtC,QAAA,EACH,CAAA;AAEJ;AAaO,MAAM,GAAA,GAAMC,gBAAA;AAAA,EACjB,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,KAAA,EAAO,OAAA,EAAS,QAAA,GAAW,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC9F,IAAA,MAAM,WAAA,GAAcC,aAA4B,IAAI,CAAA;AAGpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,GAAA,EAAK;AACV,MAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,QAAA,GAAA,CAAI,YAAY,OAAO,CAAA;AAAA,MACzB,CAAA,MAAO;AACL,QAAA,GAAA,CAAI,UAAU,WAAA,CAAY,OAAA;AAAA,MAC5B;AAAA,IACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAGR,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,IAAY,YAAY,OAAA,EAAS;AACnC,QAAA,WAAA,CAAY,QAAQ,KAAA,EAAM;AAC1B,QAAA,WAAA,CAAY,OAAA,CAAQ,cAAA,CAAe,EAAE,KAAA,EAAO,WAAW,CAAA;AAAA,MACzD;AAAA,IACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAoD;AACzE,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,OAAA,EAAS;AACpC,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,uBACEJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,wBAAA;AAAA;AAAA,UAEA,mDAAA;AAAA,UACA,sBAAA;AAAA;AAAA,UAEA,+FAAA;AAAA,UACA,QAAA,IAAY,eAAA;AAAA,UACZ,OAAA,IAAW,gBAAA;AAAA,UACX;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACA,OAAA;AAAA,QACA,GAAA,EAAK,WAAA;AAAA,QACL,QAAA,EAAU,UAAU,CAAA,GAAI,MAAA;AAAA,QACxB,SAAA,EAAW,aAAA;AAAA,QACX,eAAa,QAAA,IAAY,MAAA;AAAA,QACxB,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;ACtIO,MAAM,cAAA,GAAiB,CAAC,IAAA,KAAe;AAE5C,EAAA,MAAM,KAAA,GAAQ,IAAI,IAAA,CAAK,cAAA,CAAe,OAAA,EAAS,EAAE,KAAA,EAAO,OAAA,EAAS,CAAA,CAAE,MAAA,CAAO,IAAI,EAAE,WAAA,EAAY;AAC5F,EAAA,MAAM,GAAA,GAAM,KAAK,OAAA,EAAQ;AAEzB,EAAA,MAAM,YAAA,GAAe,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA;AAEpC,EAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,cAAA,CAAe,OAAA,EAAS;AAAA,IAC5C,IAAA,EAAM,SAAA;AAAA,IACN,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ;AAAA;AAAA,GACT,CAAA,CAAE,MAAA,CAAO,IAAI,CAAA;AAEd,EAAA,OAAO,EAAE,GAAA,EAAK,YAAA,EAAc,IAAA,EAAK;AACnC,CAAA;;ACHO,MAAM,OAAO,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAiB;AACpE,EAAA,sCACG,IAAA,EAAA,EAAG,SAAA,EAAWA,WAAA,CAAG,sCAAA,EAAwC,SAAS,CAAA,EAAI,GAAG,KAAA,EACxE,QAAA,kBAAAD,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,sCAAsC,CAAA,EAAI,UAAS,CAAA,EACxE,CAAA;AAEJ;AAEO,MAAM,OAAA,GAAU,CAAC,EAAE,SAAA,EAAW,UAAS,KAAiB;AAC7D,EAAA,uBACED,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EACJ,QAAA,kBAAAA,cAAA,CAACK,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,iBAAA,EACxC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAMO,MAAM,eAAe,CAAC,EAAE,QAAA,EAAU,GAAG,OAAM,KAAyB;AACzE,EAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAK,GAAI,eAAe,QAAQ,CAAA;AAE7C,EAAA,sCACG,IAAA,EAAA,EAAM,GAAG,OACR,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,UAAA,EACb,QAAA,EAAA;AAAA,oBAAAN,cAAA,CAACK,WAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,SAAA,EAAU,IAAA,EAAK,SACnC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,IAAO,GAAA;AAAA,mCACNA,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QACpB,QAAA,EAAA,IAAA,EACH;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;AASO,MAAM,SAAA,GAAY,CAAC,EAAE,IAAA,EAAM,aAAa,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,KAAsB;AACxF,EAAA,sCACG,IAAA,EAAA,EAAM,GAAG,OACR,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,IAAA,IAAA,mCACEC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAK,SAAA,EAAU,mBACvB,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,oBAGFD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,sBAAAN,cAAA,CAACK,WAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,MAAA,EAAO,IAAA,EAAK,OAChC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,MACC,WAAA,oBACCL,cAAA,CAACK,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAClD,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;;AC1DO,SAAS,0BAAA,CAA2B;AAAA,EACzC,SAAA;AAAA,EACA,YAAA,GAAe,EAAA;AAAA,EACf,IAAA,GAAO,KAAA;AAAA,EACP,QAAA;AAAA,EACA,MAAA,GAAS;AACX,CAAA,EAAwE;AACtE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIG,eAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,IACpB,CAAC,CAAA,KAA2C;AAE1C,MAAA,IAAI,cAAc,CAAA,EAAG;AAErB,MAAA,QAAQ,EAAE,GAAA;AAAK,QACb,KAAK,WAAA,EAAa;AAChB,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAA,IAAA,KAAQ;AACrB,YAAA,IAAI,IAAA,KAAS,IAAI,OAAO,CAAA;AACxB,YAAA,IAAI,IAAA,IAAQ,YAAY,CAAA,EAAG;AACzB,cAAA,OAAO,IAAA,GAAO,IAAI,SAAA,GAAY,CAAA;AAAA,YAChC;AACA,YAAA,OAAO,IAAA,GAAO,CAAA;AAAA,UAChB,CAAC,CAAA;AACD,UAAA;AAAA,QACF;AAAA,QACA,KAAK,SAAA,EAAW;AACd,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAA,IAAA,KAAQ;AACrB,YAAA,IAAI,IAAA,KAAS,EAAA,EAAI,OAAO,SAAA,GAAY,CAAA;AACpC,YAAA,IAAI,QAAQ,CAAA,EAAG;AACb,cAAA,OAAO,IAAA,GAAO,YAAY,CAAA,GAAI,CAAA;AAAA,YAChC;AACA,YAAA,OAAO,IAAA,GAAO,CAAA;AAAA,UAChB,CAAC,CAAA;AACD,UAAA;AAAA,QACF;AAAA,QACA,KAAK,MAAA,EAAQ;AACX,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAC,CAAA;AAChB,UAAA;AAAA,QACF;AAAA,QACA,KAAK,KAAA,EAAO;AACV,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,YAAY,CAAC,CAAA;AAC5B,UAAA;AAAA,QACF;AAAA,QACA,KAAK,OAAA,EAAS;AACZ,UAAA,IAAI,WAAA,IAAe,KAAK,QAAA,EAAU;AAChC,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,QAAA,CAAS,WAAW,CAAA;AAAA,UACtB;AACA,UAAA;AAAA,QACF;AAAA;AACF,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,IAAA,EAAM,WAAA,EAAa,QAAQ;AAAA,GACzC;AAGA,EAAAL,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,aAAa,CAAC,CAAA;AAE1B,EAAA,MAAM,gBAAA,GAAmBK,kBAAY,MAAM;AACzC,IAAA,IAAI,QAAQ,OAAO,IAAA;AACnB,IAAA,OAAO,EAAE,SAAA,EAAW,aAAA,EAAmD,QAAA,EAAU,CAAA,EAAE;AAAA,EACrF,CAAA,EAAG,CAAC,MAAA,EAAQ,aAAa,CAAC,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDate } from '@/utils/date-format';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  return (\n    <Cell {...props}>\n      <Txt as=\"span\" variant=\"body\" className=\"shrink-0\">\n        {formatDate(dateTime, 'date-time-seconds')}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","formatDate","jsxs","Icon","useState","useCallback"],"mappings":";;;;;;;;;;;AAWA,MAAM,OAAA,GAAU;AAAA,EACd,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,UAAU,IAAA,GAAO,SAAA,EAAW,OAAM,KAAkB;AACrF,EAAA,uBACEA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAWC,WAAA,CAAG,QAAA,EAAU,OAAA,CAAQ,IAAI,CAAA,EAAG,SAAS,CAAA,EAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;AAOO,MAAM,KAAA,GAAQ,CAAC,EAAE,SAAA,EAAW,UAAS,KAAkB;AAC5D,EAAA,uBACED,cAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,YAAG,+CAAA,EAAiD,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA,EAC3F,CAAA;AAEJ;AAQO,MAAM,KAAK,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAe;AAChE,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAOO,MAAM,QAAQ,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAkB;AACtE,EAAA,uBACED,cAAA,CAAC,WAAM,SAAA,EAAWC,WAAA,CAAG,IAAI,SAAS,CAAA,EAAI,GAAG,KAAA,EACtC,QAAA,EACH,CAAA;AAEJ;AAaO,MAAM,GAAA,GAAMC,gBAAA;AAAA,EACjB,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,KAAA,EAAO,OAAA,EAAS,QAAA,GAAW,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC9F,IAAA,MAAM,WAAA,GAAcC,aAA4B,IAAI,CAAA;AAGpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,GAAA,EAAK;AACV,MAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,QAAA,GAAA,CAAI,YAAY,OAAO,CAAA;AAAA,MACzB,CAAA,MAAO;AACL,QAAA,GAAA,CAAI,UAAU,WAAA,CAAY,OAAA;AAAA,MAC5B;AAAA,IACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAGR,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,IAAY,YAAY,OAAA,EAAS;AACnC,QAAA,WAAA,CAAY,QAAQ,KAAA,EAAM;AAC1B,QAAA,WAAA,CAAY,OAAA,CAAQ,cAAA,CAAe,EAAE,KAAA,EAAO,WAAW,CAAA;AAAA,MACzD;AAAA,IACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAoD;AACzE,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,OAAA,EAAS;AACpC,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,uBACEJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,wBAAA;AAAA;AAAA,UAEA,mDAAA;AAAA,UACA,sBAAA;AAAA;AAAA,UAEA,+FAAA;AAAA,UACA,QAAA,IAAY,eAAA;AAAA,UACZ,OAAA,IAAW,gBAAA;AAAA,UACX;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACA,OAAA;AAAA,QACA,GAAA,EAAK,WAAA;AAAA,QACL,QAAA,EAAU,UAAU,CAAA,GAAI,MAAA;AAAA,QACxB,SAAA,EAAW,aAAA;AAAA,QACX,eAAa,QAAA,IAAY,MAAA;AAAA,QACxB,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;AC1HO,MAAM,OAAO,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,OAAM,KAAiB;AACpE,EAAA,sCACG,IAAA,EAAA,EAAG,SAAA,EAAWA,WAAA,CAAG,sCAAA,EAAwC,SAAS,CAAA,EAAI,GAAG,KAAA,EACxE,QAAA,kBAAAD,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,sCAAsC,CAAA,EAAI,UAAS,CAAA,EACxE,CAAA;AAEJ;AAEO,MAAM,OAAA,GAAU,CAAC,EAAE,SAAA,EAAW,UAAS,KAAiB;AAC7D,EAAA,uBACED,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EACJ,QAAA,kBAAAA,cAAA,CAACK,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,iBAAA,EACxC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAMO,MAAM,eAAe,CAAC,EAAE,QAAA,EAAU,GAAG,OAAM,KAAyB;AACzE,EAAA,sCACG,IAAA,EAAA,EAAM,GAAG,KAAA,EACR,QAAA,kBAAAL,cAAA,CAACK,WAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,WAAU,UAAA,EACrC,QAAA,EAAAC,2BAAA,CAAW,QAAA,EAAU,mBAAmB,GAC3C,CAAA,EACF,CAAA;AAEJ;AASO,MAAM,SAAA,GAAY,CAAC,EAAE,IAAA,EAAM,aAAa,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,KAAsB;AACxF,EAAA,sCACG,IAAA,EAAA,EAAM,GAAG,OACR,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,IAAA,IAAA,mCACEC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAK,SAAA,EAAU,mBACvB,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,oBAGFD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,sBAAAP,cAAA,CAACK,WAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,MAAA,EAAO,IAAA,EAAK,OAChC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,MACC,WAAA,oBACCL,cAAA,CAACK,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,+BAAA,EAClD,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;;ACnDO,SAAS,0BAAA,CAA2B;AAAA,EACzC,SAAA;AAAA,EACA,YAAA,GAAe,EAAA;AAAA,EACf,IAAA,GAAO,KAAA;AAAA,EACP,QAAA;AAAA,EACA,MAAA,GAAS;AACX,CAAA,EAAwE;AACtE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAII,eAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,IACpB,CAAC,CAAA,KAA2C;AAE1C,MAAA,IAAI,cAAc,CAAA,EAAG;AAErB,MAAA,QAAQ,EAAE,GAAA;AAAK,QACb,KAAK,WAAA,EAAa;AAChB,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAA,IAAA,KAAQ;AACrB,YAAA,IAAI,IAAA,KAAS,IAAI,OAAO,CAAA;AACxB,YAAA,IAAI,IAAA,IAAQ,YAAY,CAAA,EAAG;AACzB,cAAA,OAAO,IAAA,GAAO,IAAI,SAAA,GAAY,CAAA;AAAA,YAChC;AACA,YAAA,OAAO,IAAA,GAAO,CAAA;AAAA,UAChB,CAAC,CAAA;AACD,UAAA;AAAA,QACF;AAAA,QACA,KAAK,SAAA,EAAW;AACd,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAA,IAAA,KAAQ;AACrB,YAAA,IAAI,IAAA,KAAS,EAAA,EAAI,OAAO,SAAA,GAAY,CAAA;AACpC,YAAA,IAAI,QAAQ,CAAA,EAAG;AACb,cAAA,OAAO,IAAA,GAAO,YAAY,CAAA,GAAI,CAAA;AAAA,YAChC;AACA,YAAA,OAAO,IAAA,GAAO,CAAA;AAAA,UAChB,CAAC,CAAA;AACD,UAAA;AAAA,QACF;AAAA,QACA,KAAK,MAAA,EAAQ;AACX,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,CAAC,CAAA;AAChB,UAAA;AAAA,QACF;AAAA,QACA,KAAK,KAAA,EAAO;AACV,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,cAAA,CAAe,YAAY,CAAC,CAAA;AAC5B,UAAA;AAAA,QACF;AAAA,QACA,KAAK,OAAA,EAAS;AACZ,UAAA,IAAI,WAAA,IAAe,KAAK,QAAA,EAAU;AAChC,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,QAAA,CAAS,WAAW,CAAA;AAAA,UACtB;AACA,UAAA;AAAA,QACF;AAAA;AACF,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,IAAA,EAAM,WAAA,EAAa,QAAQ;AAAA,GACzC;AAGA,EAAAN,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,aAAa,CAAC,CAAA;AAE1B,EAAA,MAAM,gBAAA,GAAmBM,kBAAY,MAAM;AACzC,IAAA,IAAI,QAAQ,OAAO,IAAA;AACnB,IAAA,OAAO,EAAE,SAAA,EAAW,aAAA,EAAmD,QAAA,EAAU,CAAA,EAAE;AAAA,EACrF,CAAA,EAAG,CAAC,MAAA,EAAQ,aAAa,CAAC,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;;;;;;;;;;"}

package/dist/components/Table.es.js

@@ -2,7 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
 import { c as cn } from '../cn-65Adrsfj.js';
 import { Icon } from '../icons/Icon.es.js';
-import { T as Txt } from '../Txt-DTh3Pa_a.js';
+import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { formatDate } from '../utils/date-format.es.js';
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -79,20 +80,6 @@ const Row = forwardRef(
   }
 );
 
-const formatDateCell = (date) => {
-  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
-  const day = date.getDate();
-  const formattedDay = `${month} ${day}`;
-  const time = new Intl.DateTimeFormat("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-    // Use 24-hour format
-  }).format(date);
-  return { day: formattedDay, time };
-};
-
 const Cell = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsx("td", { className: cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex size-full shrink-0 items-center"), children }) });
 };
@@ -100,12 +87,7 @@ const TxtCell = ({ className, children }) => {
   return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
-  const { day, time } = formatDateCell(dateTime);
-  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
-    " ",
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", children: time })
-  ] }) });
+  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", className: "shrink-0", children: formatDate(dateTime, "date-time-seconds") }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [

package/dist/components/Table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.es.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"body\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.es.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDate } from '@/utils/date-format';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  return (\n    <Cell {...props}>\n      <Txt as=\"span\" variant=\"body\" className=\"shrink-0\">\n        {formatDate(dateTime, 'date-time-seconds')}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ThreadList.cjs.js

@@ -8,7 +8,7 @@ const React = require('react');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
 const Button = require('../Button-BAMnPqos.cjs');
-const Txt = require('../Txt-B4-2nLaI.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/ThreadList.es.js

@@ -4,7 +4,7 @@ import { createElement } from 'react';
 import { c as cn } from '../cn-65Adrsfj.js';
 import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
 import { B as Button } from '../Button-B8nF87ai.js';
-import { T as Txt } from '../Txt-DTh3Pa_a.js';
+import { T as Txt } from '../Txt-BP1SRHmL.js';
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsx(

package/dist/components/Truncate.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const copyButton = require('../copy-button-D2MTGxq_.cjs');
 const tooltip = require('../tooltip-FvWL16Xn.cjs');
-const Txt = require('../Txt-B4-2nLaI.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function Truncate({