{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ledger",
  "title": "Ledger",
  "description": "A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json",
    "https://bevel-ui.vercel.app/r/amount.json",
    "https://bevel-ui.vercel.app/r/stamp.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/ledger.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport { Amount, type AmountProps } from \"@/components/ui/amount\"\n\n/** A ruled ledger page. Every row sits on one rule. */\nfunction Ledger({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"ledger\"\n      className={cn(\n        \"bevel-paper ledger-ruling relative w-full overflow-x-auto rounded-(--bevel-radius-xs) pt-(--ledger-rule) pb-(--ledger-rule) text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction LedgerTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"ledger-title\"\n      className={cn(\n        \"flex h-(--ledger-rule) items-end pr-4 pb-(--ledger-baseline) pl-(--ledger-indent) font-semibold tracking-(--bevel-tracking-label) uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction LedgerTable({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <table\n      data-slot=\"ledger-table\"\n      className={cn(\"w-full border-collapse text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction LedgerHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"ledger-header\"\n      className={cn(\"text-(length:--bevel-fine) tracking-(--bevel-tracking-print) text-(--bevel-paper-muted) uppercase\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction LedgerBody(props: React.ComponentProps<\"tbody\">) {\n  return <tbody data-slot=\"ledger-body\" {...props} />\n}\n\nfunction LedgerRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return <tr data-slot=\"ledger-row\" className={cn(\"h-(--ledger-rule)\", className)} {...props} />\n}\n\nfunction LedgerHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"ledger-head\"\n      scope=\"col\"\n      className={cn(\n        \"px-3 pb-(--ledger-baseline) align-bottom font-semibold whitespace-nowrap\",\n        \"first:w-(--ledger-margin) first:min-w-(--ledger-margin) first:pr-3 first:pl-2 first:text-right\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction LedgerCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"ledger-cell\"\n      className={cn(\n        // Written on the line, like ink on ruled paper.\n        \"px-3 pb-(--ledger-baseline) align-bottom whitespace-nowrap\",\n        \"first:w-(--ledger-margin) first:min-w-(--ledger-margin) first:pr-3 first:pl-2 first:text-right\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The entry number in the margin column: \"No. 0042\". */\nfunction LedgerNumber({ value, className, ...props }: { value: number } & Omit<React.ComponentProps<\"span\">, \"children\">) {\n  return (\n    <span\n      data-slot=\"ledger-number\"\n      className={cn(\"font-mono text-(length:--bevel-fine) text-(--bevel-paper-muted) tabular-nums\", className)}\n      {...props}\n    >\n      <span aria-hidden>No.&nbsp;</span>\n      <span className=\"sr-only\">Entry </span>\n      {String(value).padStart(4, \"0\")}\n    </span>\n  )\n}\n\n/** A signed amount: credits in green ink, debits in black. */\nfunction LedgerAmount({ className, ...props }: AmountProps) {\n  return (\n    <Amount\n      signed\n      className={cn(\n        \"font-semibold text-(--ledger-debit) data-[sign=positive]:text-(--ledger-credit)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Ledger,\n  LedgerTitle,\n  LedgerTable,\n  LedgerHeader,\n  LedgerBody,\n  LedgerRow,\n  LedgerHead,\n  LedgerCell,\n  LedgerNumber,\n  LedgerAmount,\n}\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--ledger-rule": "2.25rem",
      "--ledger-margin": "5.5rem",
      "--ledger-indent": "calc(var(--ledger-margin) + 0.75rem)",
      "--ledger-baseline": "0.375rem",
      "--ledger-credit": "oklch(0.45 0.12 155)",
      "--ledger-debit": "var(--bevel-paper-foreground)"
    },
    "@utility ledger-ruling": {
      "background-image": "linear-gradient( to right, transparent calc(var(--ledger-margin) - 1px), var(--bevel-paper-margin) calc(var(--ledger-margin) - 1px) calc(var(--ledger-margin) + 1px), transparent calc(var(--ledger-margin) + 1px) ), repeating-linear-gradient( to bottom, transparent 0 calc(var(--ledger-rule) - 1px), var(--bevel-paper-rule) calc(var(--ledger-rule) - 1px) var(--ledger-rule) ), var(--bevel-fibre)",
      "background-size": "100% 100%, 100% 100%, 240px 240px",
      "background-attachment": "local"
    }
  },
  "categories": [
    "money"
  ],
  "type": "registry:ui"
}