{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "redaction",
  "title": "Redaction",
  "description": "A black marker bar over withheld text, read as “Redacted” with the reason. Hidden text is never rendered; revealed text keeps a trace of the marker.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/redaction.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\n\ntype RedactionProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /**\n   * Show the text. Only pass `children` to viewers allowed to read it: a\n   * hidden redaction never renders its text, but anything you send to the\n   * browser can still be read there.\n   */\n  revealed?: boolean\n  /** Approximate length of the withheld text, in characters, for the bar's width. */\n  length?: number\n  /** Why it's withheld, read to screen readers: \"privileged\". */\n  reason?: string\n  /** The withheld text. Rendered only when revealed. */\n  children?: React.ReactNode\n}\n\n/**\n * A black marker bar over withheld text, read as \"Redacted\". When revealed\n * to someone allowed to read it, the text keeps a faint trace of the marker.\n */\nfunction Redaction({ className, revealed = false, length = 8, reason, children, ...props }: RedactionProps) {\n  if (revealed) {\n    return (\n      <span\n        data-slot=\"redaction\"\n        data-revealed=\"\"\n        className={cn(\"rounded-(--bevel-radius-xs) bg-(--redaction-revealed) px-0.5 box-decoration-clone\", className)}\n        {...props}\n      >\n        <span className=\"sr-only\">Redacted text, shown to you: </span>\n        {children}\n      </span>\n    )\n  }\n  return (\n    <span\n      data-slot=\"redaction\"\n      className={cn(\n        \"redaction-bar relative inline-block max-w-full h-(--redaction-height) translate-y-(--redaction-drop) rounded-(--bevel-radius-xs) align-baseline\",\n        \"forced-colors:bg-[CanvasText]\",\n        className\n      )}\n      style={{ width: `${Math.max(1, length)}ch` }}\n      {...props}\n    >\n      <span className=\"sr-only\">{reason ? `Redacted: ${reason}` : \"Redacted\"}</span>\n    </span>\n  )\n}\n\nexport { Redaction }\nexport type { RedactionProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--redaction-ink": "oklch(0.16 0.005 260)",
      "--redaction-revealed": "oklch(0.16 0.005 260 / 0.08)",
      "--redaction-height": "1.1em",
      "--redaction-drop": "0.15em"
    },
    "@utility redaction-bar": {
      "background-color": "var(--redaction-ink)",
      "mask-image": "var(--bevel-ink-texture)",
      "mask-size": "160px 160px"
    }
  },
  "categories": [
    "marks"
  ],
  "type": "registry:ui"
}