{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pixel-heading-character-demo",
  "type": "registry:component",
  "registryDependencies": [
    "pixel-heading-character"
  ],
  "files": [
    {
      "path": "registry/default/example/pixel-heading-character-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { PixelHeading } from \"@/registry/default/ui/pixel-heading-character\"\nimport type { PixelHeadingMode } from \"@/registry/default/ui/pixel-heading-character\"\n\n/* ─── Constants ─── */\n\nconst MODES: PixelHeadingMode[] = [\"uniform\", \"multi\", \"wave\", \"random\"]\nconst PREFIX_FONTS = [\n  \"none\",\n  \"square\",\n  \"grid\",\n  \"circle\",\n  \"triangle\",\n  \"line\",\n] as const\nconst HEADING_LEVELS = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"] as const\n\n/* ─── Demo ─── */\n\nexport default function PixelHeadingCharacterDemo() {\n  const [text, setText] = useState(\"Pixel Fonts\")\n  const [mode, setMode] = useState<PixelHeadingMode>(\"wave\")\n  const [autoPlay, setAutoPlay] = useState(true)\n  const [showLabel, setShowLabel] = useState(true)\n  const [cycleInterval, setCycleInterval] = useState(340)\n  const [staggerDelay, setStaggerDelay] = useState(200)\n  const [prefix, setPrefix] = useState(\"\")\n  const [prefixFont, setPrefixFont] =\n    useState<(typeof PREFIX_FONTS)[number]>(\"none\")\n  const [headingLevel, setHeadingLevel] =\n    useState<(typeof HEADING_LEVELS)[number]>(\"h1\")\n  const [defaultFontIndex, setDefaultFontIndex] = useState(3)\n  const [isolateEnabled, setIsolateEnabled] = useState(false)\n  const [isolateChars, setIsolateChars] = useState(\"x\")\n  const [isolateFont, setIsolateFont] = useState(\"sans\")\n\n  const isolateMap = isolateEnabled\n    ? Object.fromEntries(isolateChars.split(\"\").map((c) => [c, isolateFont]))\n    : undefined\n\n  /* ── Reset key forces remount when autoPlay toggles ── */\n  const [resetKey, setResetKey] = useState(0)\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          key={resetKey}\n          as={headingLevel}\n          mode={mode}\n          autoPlay={autoPlay}\n          showLabel={showLabel}\n          cycleInterval={cycleInterval}\n          staggerDelay={staggerDelay}\n          defaultFontIndex={defaultFontIndex}\n          prefix={prefix || undefined}\n          prefixFont={prefixFont}\n          isolate={isolateMap}\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        {/* Mode */}\n        <ControlGroup label=\"Mode\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {MODES.map((m) => (\n              <button\n                type=\"button\"\n                key={m}\n                onClick={() => {\n                  setMode(m)\n                  setResetKey((k) => k + 1)\n                }}\n                className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${\n                  mode === m\n                    ? \"bg-foreground text-background\"\n                    : \"bg-muted text-muted-foreground hover:bg-muted/80\"\n                }`}\n              >\n                {m}\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        {/* Cycle Interval */}\n        <ControlGroup label={`Cycle Interval: ${cycleInterval}ms`}>\n          <input\n            type=\"range\"\n            min={30}\n            max={500}\n            step={10}\n            value={cycleInterval}\n            onChange={(e) => setCycleInterval(Number(e.target.value))}\n            className=\"accent-foreground w-full\"\n          />\n        </ControlGroup>\n\n        {/* Stagger Delay */}\n        <ControlGroup label={`Stagger Delay: ${staggerDelay}ms`}>\n          <input\n            type=\"range\"\n            min={0}\n            max={200}\n            step={5}\n            value={staggerDelay}\n            onChange={(e) => setStaggerDelay(Number(e.target.value))}\n            className=\"accent-foreground w-full\"\n          />\n        </ControlGroup>\n\n        {/* Default Font Index (uniform) */}\n        <ControlGroup label={`Default Font Index: ${defaultFontIndex}`}>\n          <input\n            type=\"range\"\n            min={0}\n            max={4}\n            step={1}\n            value={defaultFontIndex}\n            onChange={(e) => setDefaultFontIndex(Number(e.target.value))}\n            className=\"accent-foreground w-full\"\n          />\n        </ControlGroup>\n\n        {/* Auto Play */}\n        <ControlGroup label=\"Auto Play\">\n          <Toggle\n            checked={autoPlay}\n            onChange={(v) => {\n              setAutoPlay(v)\n              setResetKey((k) => k + 1)\n            }}\n          />\n        </ControlGroup>\n\n        {/* Show Label */}\n        <ControlGroup label=\"Show Label\">\n          <Toggle checked={showLabel} onChange={setShowLabel} />\n        </ControlGroup>\n\n        {/* Prefix */}\n        <ControlGroup label=\"Prefix\">\n          <input\n            type=\"text\"\n            value={prefix}\n            onChange={(e) => setPrefix(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. Shadcn,\"\n          />\n        </ControlGroup>\n\n        {/* Prefix Font */}\n        <ControlGroup label=\"Prefix Font\">\n          <select\n            value={prefixFont}\n            onChange={(e) =>\n              setPrefixFont(e.target.value as (typeof PREFIX_FONTS)[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            {PREFIX_FONTS.map((f) => (\n              <option key={f} value={f}>\n                {f}\n              </option>\n            ))}\n          </select>\n        </ControlGroup>\n\n        {/* Isolate */}\n        <ControlGroup label=\"Isolate Characters\">\n          <div className=\"space-y-2\">\n            <Toggle checked={isolateEnabled} onChange={setIsolateEnabled} />\n            {isolateEnabled && (\n              <div className=\"flex gap-2\">\n                <input\n                  type=\"text\"\n                  value={isolateChars}\n                  onChange={(e) => setIsolateChars(e.target.value)}\n                  className=\"border-input placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-20 rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none\"\n                  placeholder=\"chars\"\n                />\n                <select\n                  value={isolateFont}\n                  onChange={(e) => setIsolateFont(e.target.value)}\n                  className=\"border-input focus-visible:ring-ring h-9 flex-1 rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none\"\n                >\n                  <option value=\"sans\">sans</option>\n                  <option value=\"mono\">mono</option>\n                </select>\n              </div>\n            )}\n          </div>\n        </ControlGroup>\n\n        {/* Remount */}\n        <ControlGroup label=\"Reset Animation\">\n          <button\n            type=\"button\"\n            onClick={() => setResetKey((k) => k + 1)}\n            className=\"border-input hover:bg-muted h-9 rounded-md border bg-transparent px-4 text-sm font-medium shadow-sm transition-colors\"\n          >\n            Restart\n          </button>\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"
    }
  ]
}