\n \n {Array.from({ length: 24 }, (_, index) => (\n {mark}\n ))}\n
\n \n {children}
\n \n );\n}\n"
}
],
"meta": {
"version": "0.1.0",
"lifecycle": "unlocked",
"whenToUse": "Unlocked work should carry who it was prepared for, including into screenshots that leave the review.",
"notFor": "A draft status strip. Use Preview ribbon when the label should sit above the work rather than across it.",
"pitfalls": [
"The overlay is visual. It does not prevent copies, and it is not authorization."
],
"dependencies": [],
"usedBy": [],
"sourceHash": "cde4033691e510b370c58f09ee5c74b1a177cfd709817a95abea924270562088",
"component": "PreviewWatermark",
"contract": "Marks unlocked work with a light recipient or build overlay for screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle timestamps and action callbacks.",
"props": [
{
"name": "children",
"type": "ReactNode",
"required": true,
"default": null,
"description": "Work shown under the mark; required."
},
{
"name": "recipient",
"type": "string",
"required": false,
"default": null,
"description": "Intended recipient name or organization."
},
{
"name": "buildLabel",
"type": "string",
"required": false,
"default": null,
"description": "Preview build identifier."
},
{
"name": "labels",
"type": "{ mark?: string; }",
"required": false,
"default": null,
"description": "Localized mark text when recipient and build are omitted.",
"properties": [
{
"name": "mark",
"type": "string",
"required": false,
"default": null
}
]
},
{
"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": {
"className": "''"
},
"slots": [
"children"
],
"a11y": "Native controls, visible focus, localized labels; the repeating mark is decorative and hidden from assistive technology. No modal dialog is created.",
"unsupportedProps": [
"onSuccess",
"password",
"correctCode",
"attempts",
"maxAttempts",
"onUnlock"
],
"examples": {
"minimal": "'use client';\nimport { useState } from 'react';\nimport { PreviewWatermark } from '@/components/knock/preview-watermark';\n\nexport default function Example() {\n const [value, setValue] = useState('');\n const [unlocked, setUnlocked] = useState(false);\n const [message, setMessage] = useState('');\n return \n {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n Preview content
\n {message}
\n ;\n}\n",
"full": "'use client';\nimport { useState } from 'react';\nimport { PreviewWatermark } from '@/components/knock/preview-watermark';\n\nexport default function Example() {\n const [value, setValue] = useState('');\n const [unlocked, setUnlocked] = useState(false);\n const [message, setMessage] = useState('');\n return \n {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n Preview content
\n {message}
\n ;\n}\n"
}
},
"docs": "UI only. Read https://knock.codes/docs/preview-watermark.md. Consumers own authorization."
}