{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-drawer-demo",
  "type": "registry:component",
  "registryDependencies": [
    "family-drawer"
  ],
  "files": [
    {
      "path": "registry/default/example/family-drawer-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n  AlertTriangle,\n  ArrowLeft,\n  ArrowRight,\n  CheckCircle,\n  File,\n  Image,\n  Trash,\n  Upload,\n  XCircle,\n} from \"lucide-react\"\n\nimport {\n  FamilyDrawerAnimatedContent,\n  FamilyDrawerAnimatedWrapper,\n  FamilyDrawerButton,\n  FamilyDrawerClose,\n  FamilyDrawerContent,\n  FamilyDrawerDescription,\n  FamilyDrawerHeader,\n  FamilyDrawerOverlay,\n  FamilyDrawerPortal,\n  FamilyDrawerRoot,\n  FamilyDrawerSecondaryButton,\n  FamilyDrawerTitle,\n  FamilyDrawerTrigger,\n  FamilyDrawerViewContent,\n  useFamilyDrawer,\n  type ViewsRegistry,\n} from \"@/registry/default/ui/family-drawer\"\n\n// ============================================================================\n// Example 2: Custom Views via Props\n// ============================================================================\n\nfunction CustomDefaultView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <>\n      <header className=\"border-border mb-4 flex h-[72px] items-center border-b pl-2\">\n        <FamilyDrawerTitle className=\"text-[19px]\">Custom Menu</FamilyDrawerTitle>\n      </header>\n      <div className=\"space-y-3\">\n        <FamilyDrawerButton onClick={() => setView(\"settings\")}>\n          ⚙️ Settings\n        </FamilyDrawerButton>\n        <FamilyDrawerButton onClick={() => setView(\"profile\")}>\n          👤 Profile\n        </FamilyDrawerButton>\n        <FamilyDrawerButton onClick={() => setView(\"about\")}>\n          ℹ️ About\n        </FamilyDrawerButton>\n      </div>\n    </>\n  )\n}\n\nfunction CustomSettingsView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<span className=\"text-4xl\">⚙️</span>}\n          title=\"Settings\"\n          description=\"Configure your preferences and application settings.\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-foreground text-[15px] font-semibold md:font-medium\">\n              Notifications\n            </span>\n            <input type=\"checkbox\" defaultChecked />\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-foreground text-[15px] font-semibold md:font-medium\">\n              Dark Mode\n            </span>\n            <input type=\"checkbox\" />\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Save\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction CustomProfileView() {\n  const { setView } = useFamilyDrawer()\n  const nameId = useId()\n  const emailId = useId()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<span className=\"text-4xl\">👤</span>}\n          title=\"Profile\"\n          description=\"View and edit your profile information.\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div>\n            <label\n              htmlFor={nameId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              Name\n            </label>\n            <input\n              id={nameId}\n              type=\"text\"\n              defaultValue=\"John Doe\"\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor={emailId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              Email\n            </label>\n            <input\n              id={emailId}\n              type=\"email\"\n              defaultValue=\"john@example.com\"\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2\"\n            />\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          Cancel\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Update\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction CustomAboutView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<span className=\"text-4xl\">ℹ️</span>}\n          title=\"About\"\n          description=\"Learn more about this application.\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-[15px] font-medium md:font-normal\">\n            Version 1.0.0\n          </p>\n          <p className=\"text-muted-foreground text-[15px] font-medium md:font-normal\">\n            Built with React and TypeScript\n          </p>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          Close\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nconst customViews: ViewsRegistry = {\n  default: CustomDefaultView,\n  settings: CustomSettingsView,\n  profile: CustomProfileView,\n  about: CustomAboutView,\n}\n\nexport function CustomViewsExample() {\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"text-lg font-semibold\">Custom Views via Props</h3>\n      <p className=\"text-muted-foreground text-sm\">\n        Pass custom views as a prop to FamilyDrawerRoot\n      </p>\n      <FamilyDrawerRoot views={customViews}>\n        <FamilyDrawerTrigger className=\"border-border bg-background text-foreground hover:bg-accent focus-visible:shadow-focus-ring-button !relative !top-auto !left-auto block h-[44px] !-translate-x-0 !-translate-y-0 cursor-pointer rounded-full border px-4 py-2 font-medium transition-colors md:font-medium\">\n          Open Custom Drawer\n        </FamilyDrawerTrigger>\n        <FamilyDrawerPortal>\n          <FamilyDrawerOverlay />\n          <FamilyDrawerContent>\n            <FamilyDrawerClose />\n            <FamilyDrawerAnimatedWrapper>\n              <FamilyDrawerAnimatedContent>\n                <FamilyDrawerViewContent />\n              </FamilyDrawerAnimatedContent>\n            </FamilyDrawerAnimatedWrapper>\n          </FamilyDrawerContent>\n        </FamilyDrawerPortal>\n      </FamilyDrawerRoot>\n    </div>\n  )\n}\n\n// ============================================================================\n// Example 4: Composable Pattern (Manual View Control)\n// ============================================================================\n\nfunction ComposableView() {\n  const { view, setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<span className=\"text-4xl\">🎨</span>}\n          title=\"Composable Example\"\n          description=\"This view uses the composable pattern with manual view control.\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-[15px] font-medium md:font-normal\">\n            Current view: <strong>{view}</strong>\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setView(\"view1\")}\n              className=\"bg-muted text-foreground rounded-lg px-4 py-2 text-sm\"\n            >\n              View 1\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setView(\"view2\")}\n              className=\"bg-muted text-foreground rounded-lg px-4 py-2 text-sm\"\n            >\n              View 2\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setView(\"view3\")}\n              className=\"bg-muted text-foreground rounded-lg px-4 py-2 text-sm\"\n            >\n              View 3\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction View1() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div className=\"px-2\">\n      <FamilyDrawerHeader\n        icon={<span className=\"text-4xl\">1️⃣</span>}\n        title=\"View 1\"\n        description=\"This is the first view in the composable pattern.\"\n      />\n      <div className=\"border-border mt-6 space-y-3 border-t pt-6\">\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>✓</span>\n          First step completed\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>→</span>\n          Ready to proceed\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"view2\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          <ArrowRight /> View 2\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction View2() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div className=\"px-2\">\n      <FamilyDrawerHeader\n        icon={<span className=\"text-4xl\">2️⃣</span>}\n        title=\"View 2\"\n        description=\"This is the second view in the composable pattern with additional content.\"\n      />\n      <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>✓</span>\n          First step completed\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>✓</span>\n          Second step in progress\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>→</span>\n          Continue to final step\n        </div>\n        <p className=\"text-muted-foreground mt-4 text-sm\">\n          This view has more content to demonstrate height differences between\n          views.\n        </p>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"view1\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> View 1\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"view3\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          <ArrowRight /> View 3\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction View3() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div className=\"px-2\">\n      <FamilyDrawerHeader\n        icon={<span className=\"text-4xl\">3️⃣</span>}\n        title=\"View 3\"\n        description=\"This is the final view in the composable pattern.\"\n      />\n      <div className=\"border-border mt-6 space-y-3 border-t pt-6\">\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>✓</span>\n          All steps completed\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n          <span>🎉</span>\n          Ready to finish\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"view2\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> View 2\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Back to Menu\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nconst composableViews: ViewsRegistry = {\n  default: ComposableView,\n  view1: View1,\n  view2: View2,\n  view3: View3,\n}\n\nexport function ComposablePatternExample() {\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"text-lg font-semibold\">Composable Pattern</h3>\n      <p className=\"text-muted-foreground text-sm\">\n        Manual view control using useFamilyDrawer hook\n      </p>\n      <FamilyDrawerRoot views={composableViews} defaultView=\"default\">\n        <FamilyDrawerTrigger className=\"border-border bg-background text-foreground hover:bg-accent focus-visible:shadow-focus-ring-button !relative !top-auto !left-auto block h-[44px] !-translate-x-0 !-translate-y-0 cursor-pointer rounded-full border px-4 py-2 font-medium transition-colors md:font-medium\">\n          Open Composable Drawer\n        </FamilyDrawerTrigger>\n        <FamilyDrawerPortal>\n          <FamilyDrawerOverlay />\n          <FamilyDrawerContent>\n            <FamilyDrawerClose />\n            <FamilyDrawerAnimatedWrapper>\n              <FamilyDrawerAnimatedContent>\n                <FamilyDrawerViewContent />\n              </FamilyDrawerAnimatedContent>\n            </FamilyDrawerAnimatedWrapper>\n          </FamilyDrawerContent>\n        </FamilyDrawerPortal>\n      </FamilyDrawerRoot>\n    </div>\n  )\n}\n\n// ============================================================================\n// Example 5: Minimal Custom View\n// ============================================================================\n\nfunction MinimalView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div className=\"px-2 py-4\">\n      <FamilyDrawerTitle className=\"text-xl font-semibold\">\n        Minimal View\n      </FamilyDrawerTitle>\n      <FamilyDrawerDescription className=\"mt-2 text-sm\">\n        A simple, minimal view example.\n      </FamilyDrawerDescription>\n      <button\n        type=\"button\"\n        onClick={() => setView(\"default\")}\n        className=\"bg-primary text-primary-foreground mt-4 rounded-lg px-4 py-2\"\n      >\n        Close\n      </button>\n    </div>\n  )\n}\n\nconst minimalViews: ViewsRegistry = {\n  default: MinimalView,\n}\n\nexport function MinimalExample() {\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"text-lg font-semibold\">Minimal Example</h3>\n      <p className=\"text-muted-foreground text-sm\">\n        A simple, single-view drawer\n      </p>\n      <FamilyDrawerRoot views={minimalViews}>\n        <FamilyDrawerTrigger className=\"border-border bg-background text-foreground hover:bg-accent focus-visible:shadow-focus-ring-button !relative !top-auto !left-auto block h-[44px] !-translate-x-0 !-translate-y-0 cursor-pointer rounded-full border px-4 py-2 font-medium transition-colors md:font-medium\">\n          Open Minimal Drawer\n        </FamilyDrawerTrigger>\n        <FamilyDrawerPortal>\n          <FamilyDrawerOverlay />\n          <FamilyDrawerContent>\n            <FamilyDrawerClose />\n            <FamilyDrawerAnimatedWrapper>\n              <FamilyDrawerAnimatedContent>\n                <FamilyDrawerViewContent />\n              </FamilyDrawerAnimatedContent>\n            </FamilyDrawerAnimatedWrapper>\n          </FamilyDrawerContent>\n        </FamilyDrawerPortal>\n      </FamilyDrawerRoot>\n    </div>\n  )\n}\n\n// ============================================================================\n// Example 6: File Upload Flow\n// ============================================================================\n\ninterface FileWithPreview extends File {\n  preview?: string\n}\n\nfunction FileUploadDefaultView() {\n  const { setView } = useFamilyDrawer()\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n\n  const handleDragEnter = useCallback((e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(true)\n  }, [])\n\n  const handleDragLeave = useCallback((e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(false)\n  }, [])\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragging(false)\n\n      const files = Array.from(e.dataTransfer.files)\n      if (files.length > 0) {\n        // Store files in a way that can be accessed by other views\n        // For demo purposes, we'll use a simple approach\n        const event = new CustomEvent(\"filesSelected\", { detail: { files } })\n        window.dispatchEvent(event)\n        setView(\"preview\")\n      }\n    },\n    [setView]\n  )\n\n  const handleFileSelect = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const files = Array.from(e.target.files || [])\n      if (files.length > 0) {\n        const event = new CustomEvent(\"filesSelected\", { detail: { files } })\n        window.dispatchEvent(event)\n        setView(\"preview\")\n      }\n    },\n    [setView]\n  )\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<Upload className=\"size-12\" />}\n          title=\"Upload Files\"\n          description=\"Drag and drop files here or click to browse\"\n        />\n        <div className=\"mt-6\">\n          <button\n            type=\"button\"\n            onDragEnter={handleDragEnter}\n            onDragOver={handleDragOver}\n            onDragLeave={handleDragLeave}\n            onDrop={handleDrop}\n            onClick={() => fileInputRef.current?.click()}\n            className={`w-full rounded-lg border-2 border-dashed p-8 text-center transition-colors ${\n              isDragging\n                ? \"border-primary bg-primary/5\"\n                : \"border-border bg-muted/30\"\n            }`}\n          >\n            <Upload\n              className={`mx-auto mb-3 size-10 ${\n                isDragging ? \"text-primary\" : \"text-muted-foreground\"\n              }`}\n            />\n            <p className=\"text-foreground mb-2 text-sm font-medium\">\n              {isDragging ? \"Drop files here\" : \"Drag and drop files here\"}\n            </p>\n            <p className=\"text-muted-foreground mb-4 text-xs\">\n              or click to browse\n            </p>\n            <span className=\"bg-primary text-primary-foreground hover:bg-primary/90 inline-block rounded-lg px-4 py-2 text-sm font-medium transition-colors\">\n              Choose Files\n            </span>\n            <input\n              ref={fileInputRef}\n              type=\"file\"\n              multiple\n              className=\"hidden\"\n              onChange={handleFileSelect}\n            />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction FilePreviewView() {\n  const { setView } = useFamilyDrawer()\n  const [files, setFiles] = useState<FileWithPreview[]>([])\n\n  useEffect(() => {\n    const handleFilesSelected = (e: Event) => {\n      const customEvent = e as CustomEvent<{ files: File[] }>\n      const selectedFiles = customEvent.detail.files.map((file, idx) => {\n        const fileWithPreview: FileWithPreview = Object.assign(file, {\n          preview: undefined,\n        })\n        if (file.type.startsWith(\"image/\")) {\n          const reader = new FileReader()\n          reader.onload = (e) => {\n            fileWithPreview.preview = e.target?.result as string\n            setFiles((prev) => {\n              const updated = [...prev]\n              updated[idx] = fileWithPreview\n              return updated\n            })\n          }\n          reader.readAsDataURL(file)\n        }\n        return fileWithPreview\n      })\n      setFiles(selectedFiles)\n    }\n\n    window.addEventListener(\"filesSelected\", handleFilesSelected)\n    return () => {\n      window.removeEventListener(\"filesSelected\", handleFilesSelected)\n    }\n  }, [])\n\n  const formatFileSize = (bytes: number) => {\n    if (bytes === 0) return \"0 Bytes\"\n    const k = 1024\n    const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"]\n    const i = Math.floor(Math.log(bytes) / Math.log(k))\n    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + \" \" + sizes[i]\n  }\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<Image className=\"size-12\" />}\n          title=\"Preview Files\"\n          description={`${files.length} file${files.length !== 1 ? \"s\" : \"\"} selected`}\n        />\n        <div className=\"border-border mt-6 space-y-3 border-t pt-6\">\n          {files.map((file) => {\n            const fileKey = `${file.name}-${file.size}-${file.lastModified}`\n            return (\n              <div\n                key={fileKey}\n                className=\"border-border bg-muted/30 flex items-center gap-3 rounded-lg border p-3\"\n              >\n                {file.preview ? (\n                  <div\n                    className=\"size-12 rounded bg-cover bg-center\"\n                    style={{ backgroundImage: `url(${file.preview})` }}\n                    role=\"img\"\n                    aria-label={file.name}\n                  />\n                ) : (\n                  <div className=\"bg-muted flex size-12 items-center justify-center rounded\">\n                    <File className=\"text-muted-foreground size-6\" />\n                  </div>\n                )}\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-foreground truncate text-sm font-medium\">\n                    {file.name}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    {formatFileSize(file.size)}\n                  </p>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"edit\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Continue <ArrowRight />\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction FileEditMetadataView() {\n  const { setView } = useFamilyDrawer()\n  const nameId = useId()\n  const descriptionId = useId()\n  const tagsId = useId()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<File className=\"size-12\" />}\n          title=\"Edit Metadata\"\n          description=\"Add details to your files\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div>\n            <label\n              htmlFor={nameId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              File Name\n            </label>\n            <input\n              id={nameId}\n              type=\"text\"\n              placeholder=\"my-document.pdf\"\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2 text-sm\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor={descriptionId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              Description\n            </label>\n            <textarea\n              id={descriptionId}\n              placeholder=\"Add a description...\"\n              rows={3}\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2 text-sm\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor={tagsId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              Tags (comma separated)\n            </label>\n            <input\n              id={tagsId}\n              type=\"text\"\n              placeholder=\"work, important, draft\"\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2 text-sm\"\n            />\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"preview\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"confirm\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Continue <ArrowRight />\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction FileConfirmView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<CheckCircle className=\"text-primary size-12\" />}\n          title=\"Confirm Upload\"\n          description=\"Review your files before uploading\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"bg-muted/30 rounded-lg p-4\">\n            <div className=\"text-foreground flex items-center gap-2 text-sm font-medium\">\n              <CheckCircle className=\"text-primary size-4\" />\n              <span>Files ready to upload</span>\n            </div>\n            <p className=\"text-muted-foreground mt-2 text-xs\">\n              Your files will be uploaded securely. You can access them anytime\n              from your dashboard.\n            </p>\n          </div>\n          <div className=\"space-y-2 text-sm\">\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Files:</span>\n              <span className=\"text-foreground font-medium\">3 files</span>\n            </div>\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Total size:</span>\n              <span className=\"text-foreground font-medium\">2.4 MB</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"edit\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"complete\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          <Upload className=\"size-4\" /> Upload\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction FileCompleteView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<CheckCircle className=\"text-primary size-12\" />}\n          title=\"Upload Complete!\"\n          description=\"Your files have been successfully uploaded\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n            <CheckCircle className=\"text-primary size-5\" />\n            <span>Files uploaded successfully</span>\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n            <CheckCircle className=\"text-primary size-5\" />\n            <span>Metadata saved</span>\n          </div>\n          <p className=\"text-muted-foreground mt-4 text-sm\">\n            You can now access your files from the dashboard or upload more\n            files.\n          </p>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-primary text-primary-foreground\"\n        >\n          Upload More Files\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nconst fileUploadViews: ViewsRegistry = {\n  default: FileUploadDefaultView,\n  preview: FilePreviewView,\n  edit: FileEditMetadataView,\n  confirm: FileConfirmView,\n  complete: FileCompleteView,\n}\n\nexport function FileUploadFlowExample() {\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"text-lg font-semibold\">File Upload Flow</h3>\n      <p className=\"text-muted-foreground text-sm\">\n        Multi-step upload with drag-and-drop, preview, and metadata editing\n      </p>\n      <FamilyDrawerRoot views={fileUploadViews}>\n        <FamilyDrawerTrigger className=\"border-border bg-background text-foreground hover:bg-accent focus-visible:shadow-focus-ring-button !relative !top-auto !left-auto block h-[44px] !-translate-x-0 !-translate-y-0 cursor-pointer rounded-full border px-4 py-2 font-medium transition-colors md:font-medium\">\n          Open Upload Flow\n        </FamilyDrawerTrigger>\n        <FamilyDrawerPortal>\n          <FamilyDrawerOverlay />\n          <FamilyDrawerContent>\n            <FamilyDrawerClose />\n            <FamilyDrawerAnimatedWrapper>\n              <FamilyDrawerAnimatedContent>\n                <FamilyDrawerViewContent />\n              </FamilyDrawerAnimatedContent>\n            </FamilyDrawerAnimatedWrapper>\n          </FamilyDrawerContent>\n        </FamilyDrawerPortal>\n      </FamilyDrawerRoot>\n    </div>\n  )\n}\n\n// ============================================================================\n// Example 7: Confirmation Flow\n// ============================================================================\n\nfunction ConfirmationWarningView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<AlertTriangle className=\"text-destructive size-12\" />}\n          title=\"Delete Account\"\n          description=\"This action cannot be undone\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"bg-destructive/10 rounded-lg p-4\">\n            <p className=\"text-destructive text-sm font-medium\">\n              Warning: This is a destructive action\n            </p>\n            <p className=\"text-muted-foreground mt-2 text-xs\">\n              Deleting your account will permanently remove all your data,\n              including files, settings, and history. This action cannot be\n              reversed.\n            </p>\n          </div>\n          <div className=\"space-y-2 text-sm\">\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <XCircle className=\"size-4\" />\n              <span>All your files will be deleted</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <XCircle className=\"size-4\" />\n              <span>Your account history will be lost</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <XCircle className=\"size-4\" />\n              <span>You won't be able to recover this account</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          Cancel\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"confirm\")}\n          className=\"bg-destructive text-white\"\n        >\n          Continue <ArrowRight />\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction ConfirmationInputView() {\n  const { setView } = useFamilyDrawer()\n  const [confirmationText, setConfirmationText] = useState(\"\")\n  const confirmationId = useId()\n  const CONFIRMATION_WORD = \"DELETE\"\n\n  const isConfirmed = confirmationText === CONFIRMATION_WORD\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<AlertTriangle className=\"text-destructive size-12\" />}\n          title=\"Confirm Deletion\"\n          description=\"Type DELETE to confirm this action\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"bg-destructive/10 rounded-lg p-4\">\n            <p className=\"text-destructive text-sm font-medium\">\n              This action is permanent\n            </p>\n            <p className=\"text-muted-foreground mt-2 text-xs\">\n              To confirm, please type <strong>{CONFIRMATION_WORD}</strong> in\n              the field below.\n            </p>\n          </div>\n          <div>\n            <label\n              htmlFor={confirmationId}\n              className=\"text-foreground text-[15px] font-semibold md:font-medium\"\n            >\n              Type {CONFIRMATION_WORD} to confirm\n            </label>\n            <input\n              id={confirmationId}\n              type=\"text\"\n              value={confirmationText}\n              onChange={(e) => setConfirmationText(e.target.value)}\n              placeholder={CONFIRMATION_WORD}\n              className=\"border-border bg-background mt-2 w-full rounded-lg border px-3 py-2 text-sm\"\n            />\n            {confirmationText && !isConfirmed && (\n              <p className=\"text-destructive mt-1 text-xs\">\n                The text doesn't match. Please type {CONFIRMATION_WORD} exactly.\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"warning\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => {\n            if (isConfirmed) {\n              setView(\"final-warning\")\n            }\n          }}\n          className={`bg-destructive text-white ${\n            !isConfirmed ? \"cursor-not-allowed opacity-50\" : \"\"\n          }`}\n        >\n          Continue <ArrowRight />\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction ConfirmationFinalWarningView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<Trash className=\"text-destructive size-12\" />}\n          title=\"Last Chance\"\n          description=\"Are you absolutely sure?\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"border-destructive bg-destructive/10 rounded-lg border-2 p-4\">\n            <p className=\"text-destructive text-sm font-bold\">Final Warning</p>\n            <p className=\"text-muted-foreground mt-2 text-xs\">\n              This is your last opportunity to cancel. Once you proceed, your\n              account and all associated data will be permanently deleted\n              immediately.\n            </p>\n          </div>\n          <div className=\"space-y-3 text-sm\">\n            <div className=\"flex items-start gap-2\">\n              <AlertTriangle className=\"text-destructive mt-0.5 size-4\" />\n              <span className=\"text-muted-foreground\">\n                All your files, documents, and media will be permanently removed\n              </span>\n            </div>\n            <div className=\"flex items-start gap-2\">\n              <AlertTriangle className=\"text-destructive mt-0.5 size-4\" />\n              <span className=\"text-muted-foreground\">\n                Your account history and activity will be erased\n              </span>\n            </div>\n            <div className=\"flex items-start gap-2\">\n              <AlertTriangle className=\"text-destructive mt-0.5 size-4\" />\n              <span className=\"text-muted-foreground\">\n                You will need to create a new account if you want to use our\n                service again\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"confirm\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          <ArrowLeft /> Back\n        </FamilyDrawerSecondaryButton>\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"processing\")}\n          className=\"bg-destructive text-white\"\n        >\n          <Trash className=\"size-4\" /> Delete\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction ConfirmationProcessingView() {\n  const { setView } = useFamilyDrawer()\n\n  useEffect(() => {\n    // Simulate processing delay, then transition to complete\n    const timer = setTimeout(() => {\n      setView(\"complete\")\n    }, 3000)\n\n    return () => clearTimeout(timer)\n  }, [setView])\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<AlertTriangle className=\"text-destructive size-12\" />}\n          title=\"Processing...\"\n          description=\"Your account is being deleted\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n            <div className=\"border-destructive size-5 animate-spin rounded-full border-2 border-t-transparent\" />\n            <span>Removing your account data...</span>\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n            <div className=\"border-destructive size-5 animate-spin rounded-full border-2 border-t-transparent\" />\n            <span>Deleting associated files...</span>\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-3 text-[15px] font-semibold md:font-medium\">\n            <div className=\"border-destructive size-5 animate-spin rounded-full border-2 border-t-transparent\" />\n            <span>Clearing account history...</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction ConfirmationCompleteView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <div>\n      <div className=\"px-2\">\n        <FamilyDrawerHeader\n          icon={<CheckCircle className=\"text-destructive size-12\" />}\n          title=\"Account Deleted\"\n          description=\"Your account has been permanently deleted\"\n        />\n        <div className=\"border-border mt-6 space-y-4 border-t pt-6\">\n          <div className=\"bg-destructive/10 rounded-lg p-4\">\n            <p className=\"text-destructive text-sm font-medium\">\n              Account deletion complete\n            </p>\n            <p className=\"text-muted-foreground mt-2 text-xs\">\n              All your data has been permanently removed from our systems. You\n              will need to create a new account if you wish to use our service\n              again.\n            </p>\n          </div>\n          <div className=\"space-y-2 text-sm\">\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <CheckCircle className=\"text-destructive size-4\" />\n              <span>Account data removed</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <CheckCircle className=\"text-destructive size-4\" />\n              <span>Files deleted</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2\">\n              <CheckCircle className=\"text-destructive size-4\" />\n              <span>History cleared</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-7 flex gap-4\">\n        <FamilyDrawerSecondaryButton\n          onClick={() => setView(\"default\")}\n          className=\"bg-secondary text-secondary-foreground\"\n        >\n          Close\n        </FamilyDrawerSecondaryButton>\n      </div>\n    </div>\n  )\n}\n\nfunction ConfirmationDefaultView() {\n  const { setView } = useFamilyDrawer()\n\n  return (\n    <>\n      <header className=\"border-border mb-4 flex h-[72px] items-center border-b pl-2\">\n        <FamilyDrawerTitle className=\"text-[19px]\">\n          Account Settings\n        </FamilyDrawerTitle>\n      </header>\n      <div className=\"space-y-3\">\n        <FamilyDrawerButton onClick={() => setView(\"warning\")}>\n          <Trash className=\"size-4\" />\n          Delete Account\n        </FamilyDrawerButton>\n      </div>\n    </>\n  )\n}\n\nconst confirmationViews: ViewsRegistry = {\n  default: ConfirmationDefaultView,\n  warning: ConfirmationWarningView,\n  confirm: ConfirmationInputView,\n  \"final-warning\": ConfirmationFinalWarningView,\n  processing: ConfirmationProcessingView,\n  complete: ConfirmationCompleteView,\n}\n\nexport function ConfirmationFlowExample() {\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"text-lg font-semibold\">Confirmation Flow</h3>\n      <p className=\"text-muted-foreground text-sm\">\n        Multi-step destructive action confirmation with warnings\n      </p>\n      <FamilyDrawerRoot views={confirmationViews}>\n        <FamilyDrawerTrigger className=\"border-border bg-background text-foreground hover:bg-accent focus-visible:shadow-focus-ring-button !relative !top-auto !left-auto block h-[44px] !-translate-x-0 !-translate-y-0 cursor-pointer rounded-full border px-4 py-2 font-medium transition-colors md:font-medium\">\n          Open Confirmation Flow\n        </FamilyDrawerTrigger>\n        <FamilyDrawerPortal>\n          <FamilyDrawerOverlay />\n          <FamilyDrawerContent>\n            <FamilyDrawerClose />\n            <FamilyDrawerAnimatedWrapper>\n              <FamilyDrawerAnimatedContent>\n                <FamilyDrawerViewContent />\n              </FamilyDrawerAnimatedContent>\n            </FamilyDrawerAnimatedWrapper>\n          </FamilyDrawerContent>\n        </FamilyDrawerPortal>\n      </FamilyDrawerRoot>\n    </div>\n  )\n}\n\n// ============================================================================\n// All Examples Container\n// ============================================================================\n\nexport default function FamilyDrawerDemo() {\n  return (\n    <div className=\"space-y-12 p-8\">\n      <div>\n        <h1 className=\"text-3xl font-bold\">FamilyDrawer Examples</h1>\n        <p className=\"text-muted-foreground mt-2\">\n          Various usage patterns for the composable FamilyDrawer component\n        </p>\n      </div>\n\n      <div className=\"grid gap-8 md:grid-cols-2\">\n        <CustomViewsExample />\n        <ComposablePatternExample />\n        <MinimalExample />\n        <FileUploadFlowExample />\n        <ConfirmationFlowExample />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}