{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recipient-line",
  "type": "registry:component",
  "title": "Recipient line",
  "description": "Addresses a private preview to its intended recipient. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle timestamps and action callbacks.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/recipient-line.tsx",
      "type": "registry:component",
      "target": "@components/knock/recipient-line.tsx",
      "content": "/**\n * MIT License — Copyright (c) 2026 Knock contributors.\n * Addresses a private preview to its intended recipient.\n * Does not verify codes, persist state, or grant or revoke access.\n * Contract: the consumer owns lifecycle timestamps and action callbacks.\n * @version 0.2.0\n * @minimalExample <RecipientLine recipient=\"Acme Co.\" />\n * @fullExample <RecipientLine recipient={<strong>Acme Co.</strong>} label=\"Prepared for\" theme=\"light\" className=\"mb-4\" />\n * @lifecycle gate\n * @whenToUse A preview was prepared for a named person or company and the screen should say so before any code is entered.\n * @notFor Proof of identity. A recipient shown here is presentation, and it is visible to anyone holding the link.\n * @pitfall This text is readable before unlocking. Use a company or first name, never an email address or anything you would not put in the invitation itself.\n * @a11y Native controls, visible focus, localized labels; lifecycle messages use polite announcements. No modal dialog is created.\n */\n'use client';\n\nimport type { ReactNode } from 'react';\nexport interface RecipientLineProps {\n  /** Recipient name or organization; required. */\n  recipient: ReactNode;\n  /** Localized prefix. @default \"Prepared for\" */\n  label?: string;\n\n  /** Explicit theme; omitted follows the system preference. */\n  theme?: 'light' | 'dark';\n  /** Additional wrapper classes. */\n  className?: string;\n}\nexport function RecipientLine({\n  recipient,\n  label = 'Prepared for',\n  theme,\n  className = '',\n}: RecipientLineProps) {\n  return (\n    <div\n      data-knock-item=\"recipient\"\n      data-theme={theme}\n      className={`flex flex-wrap items-center gap-x-2 gap-y-1 text-sm ${className}`}\n    >\n      <style>{`[data-knock-item]{--knock-surface:#fffefa;--knock-text:#30382c;--knock-secondary:#65705b;--knock-line:#d8dece;--knock-highlight:#a3462d;color:var(--knock-ink,var(--knock-text));color-scheme:light}[data-knock-item][data-theme=dark]{--knock-surface:#293028;--knock-text:#f0f3e9;--knock-secondary:#b6c2ab;--knock-line:#59654f;--knock-highlight:#f1a187;color-scheme:dark}@media(prefers-color-scheme:dark){[data-knock-item]:not([data-theme=light]){--knock-surface:#293028;--knock-text:#f0f3e9;--knock-secondary:#b6c2ab;--knock-line:#59654f;--knock-highlight:#f1a187;color-scheme:dark}}[data-knock-item] a:focus-visible,[data-knock-item] button:focus-visible,[data-knock-item] [tabindex]:focus-visible{outline:2px solid var(--knock-accent,var(--knock-highlight));outline-offset:4px}[data-knock-item] button,[data-knock-item] a{overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){[data-knock-item] *{animation:none!important;transition:none!important}}`}</style>\n      <span className=\"text-[var(--knock-muted,var(--knock-secondary))]\">{label}</span>\n      <strong className=\"font-medium\">{recipient}</strong>\n    </div>\n  );\n}\n"
    }
  ],
  "meta": {
    "version": "0.2.0",
    "lifecycle": "gate",
    "whenToUse": "A preview was prepared for a named person or company and the screen should say so before any code is entered.",
    "notFor": "Proof of identity. A recipient shown here is presentation, and it is visible to anyone holding the link.",
    "pitfalls": [
      "This text is readable before unlocking. Use a company or first name, never an email address or anything you would not put in the invitation itself."
    ],
    "dependencies": [],
    "usedBy": [
      "client-preview-gate",
      "cooldown-screen",
      "expired-notice",
      "gated-section",
      "open-invitation",
      "quick-gate",
      "revoked-notice",
      "teaser-gate"
    ],
    "sourceHash": "05d327bbd4b3b95f2833e30725193da92f2cf74544debdb438f44165f82f6040",
    "component": "RecipientLine",
    "contract": "Addresses a private preview to its intended recipient. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle timestamps and action callbacks.",
    "props": [
      {
        "name": "recipient",
        "type": "ReactNode",
        "required": true,
        "default": null,
        "description": "Recipient name or organization; required."
      },
      {
        "name": "label",
        "type": "string",
        "required": false,
        "default": "'Prepared for'",
        "description": "Localized prefix."
      },
      {
        "name": "theme",
        "type": "'light' | 'dark'",
        "required": false,
        "default": null,
        "description": "Explicit theme; omitted follows the system preference."
      },
      {
        "name": "className",
        "type": "string",
        "required": false,
        "default": "''",
        "description": "Additional wrapper classes."
      }
    ],
    "defaults": {
      "label": "'Prepared for'",
      "className": "''"
    },
    "slots": [
      "recipient"
    ],
    "a11y": "Native controls, visible focus, localized labels; lifecycle messages use polite announcements. No modal dialog is created.",
    "unsupportedProps": [
      "onSuccess",
      "password",
      "correctCode",
      "attempts",
      "maxAttempts",
      "onUnlock"
    ],
    "examples": {
      "minimal": "'use client';\nimport { useState } from 'react';\nimport { RecipientLine } from '@/components/knock/recipient-line';\n\nexport default function Example() {\n  const [value, setValue] = useState('');\n  const [unlocked, setUnlocked] = useState(false);\n  const [message, setMessage] = useState('');\n  return <section aria-label=\"Recipient line example\">\n    {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n    <RecipientLine recipient=\"Acme Co.\" />\n    <p role=\"status\">{message}</p>\n  </section>;\n}\n",
      "full": "'use client';\nimport { useState } from 'react';\nimport { RecipientLine } from '@/components/knock/recipient-line';\n\nexport default function Example() {\n  const [value, setValue] = useState('');\n  const [unlocked, setUnlocked] = useState(false);\n  const [message, setMessage] = useState('');\n  return <section aria-label=\"Recipient line example\">\n    {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n    <RecipientLine recipient={<strong>Acme Co.</strong>} label=\"Prepared for\" theme=\"light\" className=\"mb-4\" />\n    <p role=\"status\">{message}</p>\n  </section>;\n}\n"
    }
  },
  "docs": "UI only. Read https://knock.codes/docs/recipient-line.md. Consumers own authorization."
}