{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pixel-paragraph-words-inverse-demo",
  "type": "registry:component",
  "registryDependencies": [
    "pixel-paragraph-words-inverse"
  ],
  "files": [
    {
      "path": "registry/default/example/pixel-paragraph-words-inverse-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { PixelParagraphInverse } from \"@/registry/default/ui/pixel-paragraph-words-inverse\"\n\n/* ─── Constants ─── */\n\nconst PIXEL_FONTS = [\"square\", \"grid\", \"circle\", \"triangle\", \"line\"] as const\ntype PixelFont = (typeof PIXEL_FONTS)[number]\n\nconst PLAIN_FONTS = [\"sans\", \"mono\"] as const\ntype PlainFont = (typeof PLAIN_FONTS)[number]\n\nconst WRAPPER_TAGS = [\"p\", \"span\", \"div\"] as const\n\nconst DEFAULT_TEXT =\n  \"54+ animated components and effects. Free, open source, and built to drop into any shadcn/ui project.\"\nconst DEFAULT_PLAIN_WORDS = \"animated,shadcn/ui\"\n\n/* ─── Demo ─── */\n\nexport default function PixelParagraphWordsInverseDemo() {\n  const [text, setText] = useState(DEFAULT_TEXT)\n  const [plainWordsInput, setPlainWordsInput] = useState(DEFAULT_PLAIN_WORDS)\n  const [pixelFont, setPixelFont] = useState<PixelFont>(\"square\")\n  const [plainFont, setPlainFont] = useState<PlainFont>(\"sans\")\n  const [wrapperTag, setWrapperTag] =\n    useState<(typeof WRAPPER_TAGS)[number]>(\"p\")\n\n  const plainWords = plainWordsInput\n    .split(\",\")\n    .map((w) => w.trim())\n    .filter(Boolean)\n\n  return (\n    <div className=\"w-full space-y-8 py-4\">\n      {/* ── Preview ── */}\n      <div className=\"border-border/40 bg-background flex min-h-[120px] items-center justify-center rounded-lg border p-8\">\n        <PixelParagraphInverse\n          text={text}\n          plainWords={plainWords}\n          as={wrapperTag}\n          pixelFont={pixelFont}\n          plainFont={plainFont}\n          className=\"text-muted-foreground max-w-xl text-lg leading-relaxed\"\n          plainWordClassName=\"text-foreground font-medium\"\n        />\n      </div>\n\n      {/* ── Controls ── */}\n      <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        {/* Text */}\n        <ControlGroup\n          label=\"Paragraph Text\"\n          className=\"sm:col-span-2 lg:col-span-3\"\n        >\n          <textarea\n            value={text}\n            onChange={(e) => setText(e.target.value)}\n            rows={3}\n            className=\"border-input placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none\"\n            placeholder=\"Enter paragraph text\"\n          />\n        </ControlGroup>\n\n        {/* Plain Words */}\n        <ControlGroup\n          label=\"Plain Words (comma-separated)\"\n          className=\"sm:col-span-2 lg:col-span-3\"\n        >\n          <input\n            type=\"text\"\n            value={plainWordsInput}\n            onChange={(e) => setPlainWordsInput(e.target.value)}\n            className=\"border-input placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none\"\n            placeholder=\"e.g. animated,shadcn/ui,open source\"\n          />\n          <p className=\"text-muted-foreground text-xs\">\n            These words escape the pixel font and render in sans/mono\n          </p>\n        </ControlGroup>\n\n        {/* Pixel Font */}\n        <ControlGroup label=\"Pixel Font (base text)\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {PIXEL_FONTS.map((f) => (\n              <button\n                type=\"button\"\n                key={f}\n                onClick={() => setPixelFont(f)}\n                className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                  pixelFont === f\n                    ? \"bg-foreground text-background\"\n                    : \"bg-muted text-muted-foreground hover:bg-muted/80\"\n                }`}\n              >\n                {f}\n              </button>\n            ))}\n          </div>\n        </ControlGroup>\n\n        {/* Plain Font */}\n        <ControlGroup label=\"Plain Font (escaped words)\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {PLAIN_FONTS.map((f) => (\n              <button\n                type=\"button\"\n                key={f}\n                onClick={() => setPlainFont(f)}\n                className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                  plainFont === f\n                    ? \"bg-foreground text-background\"\n                    : \"bg-muted text-muted-foreground hover:bg-muted/80\"\n                }`}\n              >\n                {f}\n              </button>\n            ))}\n          </div>\n        </ControlGroup>\n\n        {/* Wrapper Tag */}\n        <ControlGroup label=\"Wrapper Element\">\n          <select\n            value={wrapperTag}\n            onChange={(e) =>\n              setWrapperTag(e.target.value as (typeof WRAPPER_TAGS)[number])\n            }\n            className=\"border-input focus-visible:ring-ring h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none\"\n          >\n            {WRAPPER_TAGS.map((t) => (\n              <option key={t} value={t}>\n                {\"<\" + t + \">\"}\n              </option>\n            ))}\n          </select>\n        </ControlGroup>\n      </div>\n    </div>\n  )\n}\n\n/* ─── Shared control primitives ─── */\n\nfunction ControlGroup({\n  label,\n  children,\n  className,\n}: {\n  label: string\n  children: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div className={`space-y-2 ${className ?? \"\"}`}>\n      <span className=\"text-muted-foreground block text-xs font-medium tracking-wider uppercase\">\n        {label}\n      </span>\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}