{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "intro-disclosure-demo",
  "type": "registry:component",
  "registryDependencies": [
    "intro-disclosure"
  ],
  "files": [
    {
      "path": "registry/default/example/intro-disclosure-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { useRouter } from \"next/navigation\"\nimport { ChevronDownIcon, ResetIcon } from \"@radix-ui/react-icons\"\nimport { DatabaseIcon } from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n\nimport { IntroDisclosure } from \"../ui/intro-disclosure\"\n\nconst steps = [\n  {\n    title: \"Welcome to Cult UI\",\n    short_description: \"Discover our modern component library\",\n    full_description:\n      \"Welcome to Cult UI! Let's explore how our beautifully crafted components can help you build stunning user interfaces with ease.\",\n    media: {\n      type: \"image\" as const,\n      src: \"/feature-3.png\",\n      alt: \"Cult UI components overview\",\n    },\n  },\n  {\n    title: \"Customizable Components\",\n    short_description: \"Style and adapt to your needs\",\n    full_description:\n      \"Every component is built with customization in mind. Use our powerful theming system with Tailwind CSS to match your brand perfectly.\",\n    media: {\n      type: \"image\" as const,\n      src: \"/feature-2.png\",\n      alt: \"Component customization interface\",\n    },\n    action: {\n      label: \"View Theme Builder\",\n      href: \"/docs/theming\",\n    },\n  },\n  {\n    title: \"Responsive & Accessible\",\n    short_description: \"Built for everyone\",\n    full_description:\n      \"All components are fully responsive and follow WAI-ARIA guidelines, ensuring your application works seamlessly across all devices and is accessible to everyone.\",\n    media: {\n      type: \"image\" as const,\n\n      src: \"/feature-1.png\",\n      alt: \"Responsive design demonstration\",\n    },\n  },\n  {\n    title: \"Start Building\",\n    short_description: \"Create your next project\",\n    full_description:\n      \"You're ready to start building! Check out our comprehensive documentation and component examples to create your next amazing project.\",\n    action: {\n      label: \"View Components\",\n      href: \"/docs/components\",\n    },\n  },\n]\n\ntype StorageState = {\n  desktop: string | null\n  mobile: string | null\n}\n\nexport default function IntroDisclosureDemo() {\n  const router = useRouter()\n  const [open, setOpen] = useState(true)\n  const [openMobile, setOpenMobile] = useState(true)\n  const [debugOpen, setDebugOpen] = useState(false)\n  const [storageState, setStorageState] = useState<StorageState>({\n    desktop: null,\n    mobile: null,\n  })\n\n  const updateStorageState = () => {\n    setStorageState({\n      desktop: localStorage.getItem(\"feature_intro-demo_desktop\"),\n      mobile: localStorage.getItem(\"feature_intro-demo_mobile\"),\n    })\n  }\n\n  // Update storage state whenever localStorage changes\n  useEffect(() => {\n    updateStorageState()\n    window.addEventListener(\"storage\", updateStorageState)\n    return () => window.removeEventListener(\"storage\", updateStorageState)\n  }, [])\n\n  // Update storage state after reset\n  const handleReset = () => {\n    // localStorage.removeItem(\"feature_intro-demo\")\n    setOpen(true)\n    if (storageState.desktop === \"false\") {\n      toast.info(\"Clear the local storage to trigger the feature again\")\n      setDebugOpen(true)\n    }\n    if (storageState.desktop === null) {\n      updateStorageState()\n    }\n  }\n\n  const handleResetMobile = () => {\n    // localStorage.removeItem(\"feature_intro-demo-mobile\")\n    setOpenMobile(true)\n    updateStorageState()\n  }\n\n  const handleClearDesktop = () => {\n    localStorage.removeItem(\"feature_intro-demo_desktop\")\n    updateStorageState()\n    router.refresh()\n    toast.success(\"Desktop storage cleared\")\n  }\n\n  const handleClearMobile = () => {\n    localStorage.removeItem(\"feature_intro-demo_mobile\")\n    updateStorageState()\n    router.refresh()\n    toast.success(\"Mobile storage cleared\")\n  }\n\n  const handleDebugOpenChange = (open: boolean) => {\n    if (open) {\n      updateStorageState()\n    }\n    setDebugOpen(open)\n  }\n\n  return (\n    <div className=\"w-full space-y-8\">\n      <div className=\"bg-card text-card-foreground rounded-lg border shadow-sm\">\n        <div className=\"p-6\">\n          <h2 className=\"mb-4 text-2xl leading-none font-semibold tracking-tight\">\n            IntroDisclosure Demo\n          </h2>\n          <p className=\"text-muted-foreground mb-6\">\n            Experience our feature introduction component in both desktop and\n            mobile variants. Click the reset buttons to restart the demos.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-8 p-6 pt-0 md:grid-cols-2\">\n          <div className=\"flex flex-col\">\n            <div\n              className={cn(\n                \"flex flex-col gap-6 rounded-lg border-2 p-6 transition-colors\",\n                !open && \"border-muted bg-muted/50\",\n                open && \"border-primary\"\n              )}\n            >\n              <div className=\"flex flex-col items-center justify-between gap-4 md:flex-row\">\n                <div className=\"flex flex-col\">\n                  <p className=\"text-muted-foreground text-left text-sm\">\n                    (Disclosure)\n                  </p>\n                  <h3 className=\"text-xl font-semibold\">Desktop View</h3>\n                </div>\n                <button\n                  onClick={handleReset}\n                  className=\"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  <ResetIcon className=\"mr-2 h-4 w-4\" />\n                  Start Demo\n                </button>\n              </div>\n              <IntroDisclosure\n                open={open}\n                setOpen={setOpen}\n                steps={steps}\n                featureId=\"intro-demo\"\n                showProgressBar={false}\n                onComplete={() => toast.success(\"Tour completed\")}\n                onSkip={() => toast.info(\"Tour skipped\")}\n              />\n              <div className=\"text-muted-foreground text-sm\">\n                Status: {open ? \"Active\" : \"Completed/Skipped\"}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col\">\n            <div\n              className={cn(\n                \"flex flex-col gap-6 rounded-lg border-2 p-6 transition-colors\",\n                !openMobile && \"border-muted bg-muted/50\",\n                openMobile && \"border-primary\"\n              )}\n            >\n              <div className=\"flex flex-col items-center justify-between gap-4 md:flex-row\">\n                <div className=\"flex flex-col\">\n                  <p className=\"text-muted-foreground text-sm\">\n                    (Drawer + Swipe)\n                  </p>\n                  <h3 className=\"text-xl font-semibold\">Mobile View</h3>\n                </div>\n                <button\n                  onClick={handleResetMobile}\n                  className=\"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  <ResetIcon className=\"mr-2 h-4 w-4\" />\n                  Start Demo\n                </button>\n              </div>\n              <IntroDisclosure\n                open={openMobile}\n                setOpen={setOpenMobile}\n                steps={steps}\n                featureId=\"intro-demo\"\n                onComplete={() => toast.success(\"Mobile tour completed\")}\n                onSkip={() => toast.info(\"Mobile tour skipped\")}\n                forceVariant=\"mobile\"\n              />\n              <div className=\"text-muted-foreground text-sm\">\n                Status: {openMobile ? \"Active\" : \"Completed/Skipped\"}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"border-t p-4\">\n          <Collapsible\n            open={debugOpen}\n            onOpenChange={handleDebugOpenChange}\n            className=\"w-full\"\n          >\n            <CollapsibleTrigger className=\"hover:bg-muted/50 flex w-full items-center justify-between rounded-lg p-2 text-sm\">\n              <div className=\"flex flex-col items-start text-left\">\n                <h4 className=\"flex items-center gap-2 text-sm font-semibold\">\n                  <DatabaseIcon className=\"size-4\" />{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    Browser Local Storage State\n                  </span>\n                </h4>\n                <p className=\"text-muted-foreground mb-4 max-w-xl text-sm\">\n                  These values represent the \"Don't show again\" checkbox state.\n                  <br />- When set to{\" \"}\n                  <code className=\"bg-background px-1\">true</code>, the intro\n                  will be hidden. <br /> - When{\" \"}\n                  <code className=\"bg-background px-1\">null</code>, the intro\n                  will be shown.\n                </p>\n              </div>\n              <ChevronDownIcon\n                className={cn(\n                  \"size-8 transition-transform duration-200\",\n                  debugOpen && \"rotate-180\"\n                )}\n              />\n            </CollapsibleTrigger>\n            <CollapsibleContent className=\"space-y-2\">\n              <div className=\"bg-muted rounded-md p-4 text-sm\">\n                <div className=\"space-y-4\">\n                  <div className=\"flex items-center justify-between gap-4\">\n                    <div className=\"flex-1\">\n                      <span className=\"text-muted-foreground\">\n                        Desktop State:{\" \"}\n                      </span>\n                      <code className=\"bg-background rounded px-2 py-1\">\n                        {storageState.desktop === null\n                          ? \"null\"\n                          : storageState.desktop}\n                      </code>\n                    </div>\n                    <Button size=\"sm\" onClick={handleClearDesktop}>\n                      Reset Local Storage\n                    </Button>\n                  </div>\n                  <div className=\"flex items-center justify-between gap-4\">\n                    <div className=\"flex-1\">\n                      <span className=\"text-muted-foreground\">\n                        Mobile State:{\" \"}\n                      </span>\n                      <code className=\"bg-background rounded px-2 py-1\">\n                        {storageState.mobile === null\n                          ? \"null\"\n                          : storageState.mobile}\n                      </code>\n                    </div>\n                    <Button size=\"sm\" onClick={handleClearMobile}>\n                      Reset Local Storage\n                    </Button>\n                  </div>\n                </div>\n              </div>\n            </CollapsibleContent>\n          </Collapsible>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}