{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pixel-heading-word-demo",
  "type": "registry:component",
  "registryDependencies": [
    "pixel-heading-word"
  ],
  "files": [
    {
      "path": "registry/default/example/pixel-heading-word-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { PixelHeading } from \"@/registry/default/ui/pixel-heading-word\"\n\n/* ─── Constants ─── */\n\nconst PIXEL_FONTS = [\"square\", \"grid\", \"circle\", \"triangle\", \"line\"] as const\ntype PixelFont = (typeof PIXEL_FONTS)[number]\n\nconst HEADING_LEVELS = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"] as const\n\n/* ─── Demo ─── */\n\nexport default function PixelHeadingWordDemo() {\n  const [text, setText] = useState(\"Pixel Fonts\")\n  const [initialFont, setInitialFont] = useState<PixelFont>(\"square\")\n  const [hoverFont, setHoverFont] = useState<PixelFont | \"cycle\">(\"triangle\")\n\n  const [showLabel, setShowLabel] = useState(true)\n  const [headingLevel, setHeadingLevel] =\n    useState<(typeof HEADING_LEVELS)[number]>(\"h1\")\n\n  const isSwapMode = hoverFont !== \"cycle\"\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-[160px] items-center justify-center rounded-lg border p-8\">\n        <PixelHeading\n          as={headingLevel}\n          initialFont={initialFont}\n          hoverFont={isSwapMode ? (hoverFont as PixelFont) : undefined}\n          showLabel={showLabel}\n          className=\"text-5xl tracking-tight md:text-7xl\"\n        >\n          {text}\n        </PixelHeading>\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 label=\"Text\">\n          <input\n            type=\"text\"\n            value={text}\n            onChange={(e) => setText(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=\"Enter heading text\"\n          />\n        </ControlGroup>\n\n        {/* Initial Font */}\n        <ControlGroup label=\"Initial Font\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {PIXEL_FONTS.map((f) => (\n              <button\n                type=\"button\"\n                key={f}\n                onClick={() => setInitialFont(f)}\n                className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                  initialFont === 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        {/* Hover Font / Mode */}\n        <ControlGroup label=\"Hover Behavior\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            <button\n              type=\"button\"\n              onClick={() => setHoverFont(\"cycle\")}\n              className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                hoverFont === \"cycle\"\n                  ? \"bg-foreground text-background\"\n                  : \"bg-muted text-muted-foreground hover:bg-muted/80\"\n              }`}\n            >\n              cycle all\n            </button>\n            {PIXEL_FONTS.map((f) => (\n              <button\n                type=\"button\"\n                key={f}\n                onClick={() => setHoverFont(f)}\n                className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                  hoverFont === 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        {/* Heading Level */}\n        <ControlGroup label=\"Heading Level\">\n          <select\n            value={headingLevel}\n            onChange={(e) =>\n              setHeadingLevel(e.target.value as (typeof HEADING_LEVELS)[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            {HEADING_LEVELS.map((h) => (\n              <option key={h} value={h}>\n                {h}\n              </option>\n            ))}\n          </select>\n        </ControlGroup>\n\n        {/* Show Label */}\n        <ControlGroup label=\"Show Label\">\n          <Toggle checked={showLabel} onChange={setShowLabel} />\n        </ControlGroup>\n      </div>\n    </div>\n  )\n}\n\n/* ─── Shared control primitives ─── */\n\nfunction ControlGroup({\n  label,\n  children,\n}: {\n  label: string\n  children: React.ReactNode\n}) {\n  return (\n    <div className=\"space-y-2\">\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\nfunction Toggle({\n  checked,\n  onChange,\n}: {\n  checked: boolean\n  onChange: (v: boolean) => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      onClick={() => onChange(!checked)}\n      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${\n        checked ? \"bg-foreground\" : \"bg-input\"\n      }`}\n    >\n      <span\n        className={`bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform ${\n          checked ? \"translate-x-5\" : \"translate-x-0\"\n        }`}\n      />\n    </button>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}