{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "primitives",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Timestamp with live relative formatting and a stated timezone.",
  "files": [
    {
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useSharedNow } from \"@/hooks/ledger/use-shared-now\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatDate, formatRelative, formatTimestamp } from \"@/lib/ledger/fiscal-period\";\nimport { Tooltip } from \"@/components/ledger/tooltip\";\n\nexport interface AsOfProps extends React.ComponentPropsWithoutRef<\"time\"> {\n  /**\n   * Beyond an hour, render the date alone and leave the clock time and zone to\n   * the tooltip. For dense meta rows, where the full stamp is the single\n   * longest run of text on a card and the least often read.\n   *\n   * Off by default: the unabridged form states its timezone inline, and that\n   * is the correct default for a figure whose basis is being asserted.\n   */\n  compact?: boolean;\n  date: Date;\n  /** Suppress the absolute-timestamp tooltip — e.g. inside a cell that has its own. */\n  noTooltip?: boolean;\n  prefix?: string;\n  timeZone?: string;\n}\n\n/**\n * A balance without an \"as of\" is a rumour.\n *\n * Relative under an hour, absolute beyond, timezone always stated. Driven by\n * one shared interval that pauses on tab hide — never one per instance.\n */\nexport const AsOf = React.forwardRef<HTMLTimeElement, AsOfProps>(\n  ({ className, date, timeZone = \"UTC\", prefix, noTooltip, compact, ...props }, ref) => {\n    const now = useSharedNow();\n    const absolute = formatTimestamp(date, timeZone);\n    const initial = compact ? formatDate(date) : absolute;\n    const [text, setText] = React.useState(initial);\n\n    // Render the absolute form on the server and on first paint so hydration\n    // matches; swap to relative once the client clock is available.\n    React.useEffect(() => {\n      const relative = formatRelative(date, now);\n      // `formatRelative` falls back to the full stamp beyond an hour; in\n      // compact mode that fallback is the date alone.\n      setText(compact && relative === formatTimestamp(date) ? formatDate(date) : relative);\n    }, [compact, date, now]);\n\n    // Supplementary by definition — the relative form is already readable, and\n    // the absolute one is a restatement. Exactly what a hover tooltip is for.\n    return (\n      <Tooltip content={absolute} disabled={noTooltip}>\n        <time\n          // A stamp never breaks: \"30 Sep / 2026\" across two lines reads as two\n          // facts. A tight row moves the whole stamp, not half of it.\n          className={cn(\"numeric whitespace-nowrap text-caption text-text-tertiary\", className)}\n          dateTime={date.toISOString()}\n          ref={ref}\n          {...props}\n        >\n          {/* Words in the text face, the stamp in the figure face. */}\n          {prefix ? <span className=\"font-sans\">{`${prefix} `}</span> : null}\n          {text}\n        </time>\n      </Tooltip>\n    );\n  },\n);\nAsOf.displayName = \"AsOf\";\n",
      "path": "components/ledger/as-of.tsx",
      "target": "components/ledger/as-of.tsx",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "license": "MIT"
  },
  "name": "as-of",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/fiscal-period",
    "@lopifi/tooltip",
    "@lopifi/use-shared-now"
  ],
  "title": "AsOf",
  "type": "registry:ui"
}