{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-drawer",
  "type": "registry:block",
  "title": "Family drawer",
  "description": "Family drawer",
  "files": [
    {
      "path": "components/usages/familydrawerusage.tsx",
      "content": "\"use client\";\r\n\r\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\r\n\r\nimport {\r\n\tFamilyDrawerAnimatedContent,\r\n\tFamilyDrawerAnimatedWrapper,\r\n\tFamilyDrawerButton,\r\n\tFamilyDrawerClose,\r\n\tFamilyDrawerContent,\r\n\tFamilyDrawerHeader,\r\n\tFamilyDrawerOverlay,\r\n\tFamilyDrawerPortal,\r\n\tFamilyDrawerRoot,\r\n\tFamilyDrawerSecondaryButton,\r\n\tFamilyDrawerTrigger,\r\n\tFamilyDrawerViewContent,\r\n\tuseFamilyDrawer,\r\n\ttype ViewsRegistry,\r\n} from \"@/registry/open-source/family-drawer\";\r\nimport {\r\n\tAlertTriangle,\r\n\tArrowLeft,\r\n\tArrowRight,\r\n\tCheckCircle,\r\n\tFile,\r\n\tImage,\r\n\tTrash,\r\n\tUpload,\r\n\tXCircle,\r\n} from \"lucide-react\";\r\n\r\n// ============================================================================\r\n// Example 2: Custom Views via Props\r\n// ============================================================================\r\n\r\nfunction CustomDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<header className=\"mb-4 flex h-[72px] items-center border-b border-border pl-2\">\r\n\t\t\t\t<h2 className=\"text-[19px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\tCustom Menu\r\n\t\t\t\t</h2>\r\n\t\t\t</header>\r\n\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"settings\")}>\r\n\t\t\t\t\t⚙️ Settings\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"profile\")}>\r\n\t\t\t\t\t👤 Profile\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"about\")}>\r\n\t\t\t\t\tℹ️ About\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nfunction CustomSettingsView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">⚙️</span>}\r\n\t\t\t\t\ttitle=\"Settings\"\r\n\t\t\t\t\tdescription=\"Configure your preferences and application settings.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center justify-between\">\r\n\t\t\t\t\t\t<span className=\"text-[15px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\t\t\tNotifications\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input type=\"checkbox\" defaultChecked />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center justify-between\">\r\n\t\t\t\t\t\t<span className=\"text-[15px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\t\t\tDark Mode\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input type=\"checkbox\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tBack\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tSave\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction CustomProfileView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst nameId = useId();\r\n\tconst emailId = useId();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">👤</span>}\r\n\t\t\t\t\ttitle=\"Profile\"\r\n\t\t\t\t\tdescription=\"View and edit your profile information.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={nameId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tName\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={nameId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tdefaultValue=\"John Doe\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border px-3 py-2 bg-background\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={emailId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tEmail\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={emailId}\r\n\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\tdefaultValue=\"john@example.com\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border px-3 py-2 bg-background\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tCancel\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tUpdate\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction CustomAboutView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">ℹ️</span>}\r\n\t\t\t\t\ttitle=\"About\"\r\n\t\t\t\t\tdescription=\"Learn more about this application.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tVersion 1.0.0\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tBuilt with React and TypeScript\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tClose\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst customViews: ViewsRegistry = {\r\n\tdefault: CustomDefaultView,\r\n\tsettings: CustomSettingsView,\r\n\tprofile: CustomProfileView,\r\n\tabout: CustomAboutView,\r\n};\r\n\r\nexport function CustomViewsExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Custom Views via Props</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tPass custom views as a prop to FamilyDrawerRoot\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={customViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Custom Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 4: Composable Pattern (Manual View Control)\r\n// ============================================================================\r\n\r\nfunction ComposableView() {\r\n\tconst { view, setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">🎨</span>}\r\n\t\t\t\t\ttitle=\"Composable Example\"\r\n\t\t\t\t\tdescription=\"This view uses the composable pattern with manual view control.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tCurrent view: <strong>{view}</strong>\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view1\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 1\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 2\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view3\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 3\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View1() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">1️⃣</span>}\r\n\t\t\t\ttitle=\"View 1\"\r\n\t\t\t\tdescription=\"This is the first view in the composable pattern.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tFirst step completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>→</span>\r\n\t\t\t\t\tReady to proceed\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowRight /> View 2\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View2() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">2️⃣</span>}\r\n\t\t\t\ttitle=\"View 2\"\r\n\t\t\t\tdescription=\"This is the second view in the composable pattern with additional content.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tFirst step completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tSecond step in progress\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>→</span>\r\n\t\t\t\t\tContinue to final step\r\n\t\t\t\t</div>\r\n\t\t\t\t<p className=\"mt-4 text-sm text-muted-foreground\">\r\n\t\t\t\t\tThis view has more content to demonstrate height differences\r\n\t\t\t\t\tbetween views.\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view1\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> View 1\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view3\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowRight /> View 3\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View3() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">3️⃣</span>}\r\n\t\t\t\ttitle=\"View 3\"\r\n\t\t\t\tdescription=\"This is the final view in the composable pattern.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tAll steps completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>🎉</span>\r\n\t\t\t\t\tReady to finish\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> View 2\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tBack to Menu\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst composableViews: ViewsRegistry = {\r\n\tdefault: ComposableView,\r\n\tview1: View1,\r\n\tview2: View2,\r\n\tview3: View3,\r\n};\r\n\r\nexport function ComposablePatternExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Composable Pattern</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tManual view control using useFamilyDrawer hook\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={composableViews} defaultView=\"default\">\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Composable Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 5: Minimal Custom View\r\n// ============================================================================\r\n\r\nfunction MinimalView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2 py-4\">\r\n\t\t\t<h2 className=\"text-xl font-semibold\">Minimal View</h2>\r\n\t\t\t<p className=\"mt-2 text-sm text-muted-foreground\">\r\n\t\t\t\tA simple, minimal view example.\r\n\t\t\t</p>\r\n\t\t\t<button\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\tclassName=\"mt-4 rounded-lg bg-primary px-4 py-2 text-primary-foreground\"\r\n\t\t\t>\r\n\t\t\t\tClose\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst minimalViews: ViewsRegistry = {\r\n\tdefault: MinimalView,\r\n};\r\n\r\nexport function MinimalExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Minimal Example</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tA simple, single-view drawer\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={minimalViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Minimal Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 6: File Upload Flow\r\n// ============================================================================\r\n\r\ninterface FileWithPreview extends File {\r\n\tpreview?: string;\r\n}\r\n\r\nfunction FileUploadDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\r\n\tconst [isDragging, setIsDragging] = useState(false);\r\n\r\n\tconst handleDragEnter = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t\tsetIsDragging(true);\r\n\t}, []);\r\n\r\n\tconst handleDragLeave = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t\tsetIsDragging(false);\r\n\t}, []);\r\n\r\n\tconst handleDragOver = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t}, []);\r\n\r\n\tconst handleDrop = useCallback(\r\n\t\t(e: React.DragEvent) => {\r\n\t\t\te.preventDefault();\r\n\t\t\te.stopPropagation();\r\n\t\t\tsetIsDragging(false);\r\n\r\n\t\t\tconst files = Array.from(e.dataTransfer.files);\r\n\t\t\tif (files.length > 0) {\r\n\t\t\t\t// Store files in a way that can be accessed by other views\r\n\t\t\t\t// For demo purposes, we'll use a simple approach\r\n\t\t\t\tconst event = new CustomEvent(\"filesSelected\", {\r\n\t\t\t\t\tdetail: { files },\r\n\t\t\t\t});\r\n\t\t\t\twindow.dispatchEvent(event);\r\n\t\t\t\tsetView(\"preview\");\r\n\t\t\t}\r\n\t\t},\r\n\t\t[setView]\r\n\t);\r\n\r\n\tconst handleFileSelect = useCallback(\r\n\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\t\tconst files = Array.from(e.target.files || []);\r\n\t\t\tif (files.length > 0) {\r\n\t\t\t\tconst event = new CustomEvent(\"filesSelected\", {\r\n\t\t\t\t\tdetail: { files },\r\n\t\t\t\t});\r\n\t\t\t\twindow.dispatchEvent(event);\r\n\t\t\t\tsetView(\"preview\");\r\n\t\t\t}\r\n\t\t},\r\n\t\t[setView]\r\n\t);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Upload className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Upload Files\"\r\n\t\t\t\t\tdescription=\"Drag and drop files here or click to browse\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6\">\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\tonDragEnter={handleDragEnter}\r\n\t\t\t\t\t\tonDragOver={handleDragOver}\r\n\t\t\t\t\t\tonDragLeave={handleDragLeave}\r\n\t\t\t\t\t\tonDrop={handleDrop}\r\n\t\t\t\t\t\tonClick={() => fileInputRef.current?.click()}\r\n\t\t\t\t\t\tclassName={`w-full rounded-lg border-2 border-dashed p-8 text-center transition-colors ${\r\n\t\t\t\t\t\t\tisDragging\r\n\t\t\t\t\t\t\t\t? \"border-primary bg-primary/5\"\r\n\t\t\t\t\t\t\t\t: \"border-border bg-muted/30\"\r\n\t\t\t\t\t\t}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Upload\r\n\t\t\t\t\t\t\tclassName={`mx-auto mb-3 size-10 ${\r\n\t\t\t\t\t\t\t\tisDragging ? \"text-primary\" : \"text-muted-foreground\"\r\n\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<p className=\"mb-2 text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t{isDragging\r\n\t\t\t\t\t\t\t\t? \"Drop files here\"\r\n\t\t\t\t\t\t\t\t: \"Drag and drop files here\"}\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mb-4 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tor click to browse\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<span className=\"inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\">\r\n\t\t\t\t\t\t\tChoose Files\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tref={fileInputRef}\r\n\t\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t\tmultiple\r\n\t\t\t\t\t\t\tclassName=\"hidden\"\r\n\t\t\t\t\t\t\tonChange={handleFileSelect}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FilePreviewView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst [files, setFiles] = useState<FileWithPreview[]>([]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst handleFilesSelected = (e: Event) => {\r\n\t\t\tconst customEvent = e as CustomEvent<{ files: File[] }>;\r\n\t\t\tconst selectedFiles = customEvent.detail.files.map((file, idx) => {\r\n\t\t\t\tconst fileWithPreview: FileWithPreview = Object.assign(file, {\r\n\t\t\t\t\tpreview: undefined,\r\n\t\t\t\t});\r\n\t\t\t\tif (file.type.startsWith(\"image/\")) {\r\n\t\t\t\t\tconst reader = new FileReader();\r\n\t\t\t\t\treader.onload = (e) => {\r\n\t\t\t\t\t\tfileWithPreview.preview = e.target?.result as string;\r\n\t\t\t\t\t\tsetFiles((prev) => {\r\n\t\t\t\t\t\t\tconst updated = [...prev];\r\n\t\t\t\t\t\t\tupdated[idx] = fileWithPreview;\r\n\t\t\t\t\t\t\treturn updated;\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t};\r\n\t\t\t\t\treader.readAsDataURL(file);\r\n\t\t\t\t}\r\n\t\t\t\treturn fileWithPreview;\r\n\t\t\t});\r\n\t\t\tsetFiles(selectedFiles);\r\n\t\t};\r\n\r\n\t\twindow.addEventListener(\"filesSelected\", handleFilesSelected);\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener(\"filesSelected\", handleFilesSelected);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst formatFileSize = (bytes: number) => {\r\n\t\tif (bytes === 0) return \"0 Bytes\";\r\n\t\tconst k = 1024;\r\n\t\tconst sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\r\n\t\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\r\n\t\treturn Math.round((bytes / Math.pow(k, i)) * 100) / 100 + \" \" + sizes[i];\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Image className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Preview Files\"\r\n\t\t\t\t\tdescription={`${files.length} file${files.length !== 1 ? \"s\" : \"\"} selected`}\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t\t{files.map((file) => {\r\n\t\t\t\t\t\tconst fileKey = `${file.name}-${file.size}-${file.lastModified}`;\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tkey={fileKey}\r\n\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-3 rounded-lg border border-border bg-muted/30 p-3\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{file.preview ? (\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-12 rounded bg-cover bg-center\"\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundImage: `url(${file.preview})`,\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\trole=\"img\"\r\n\t\t\t\t\t\t\t\t\t\taria-label={file.name}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex size-12 items-center justify-center rounded bg-muted\">\r\n\t\t\t\t\t\t\t\t\t\t<File className=\"size-6 text-muted-foreground\" />\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<div className=\"flex-1 min-w-0\">\r\n\t\t\t\t\t\t\t\t\t<p className=\"truncate text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t\t\t\t{file.name}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t})}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"edit\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileEditMetadataView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst nameId = useId();\r\n\tconst descriptionId = useId();\r\n\tconst tagsId = useId();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<File className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Edit Metadata\"\r\n\t\t\t\t\tdescription=\"Add details to your files\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={nameId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tFile Name\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={nameId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tplaceholder=\"my-document.pdf\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={descriptionId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tDescription\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<textarea\r\n\t\t\t\t\t\t\tid={descriptionId}\r\n\t\t\t\t\t\t\tplaceholder=\"Add a description...\"\r\n\t\t\t\t\t\t\trows={3}\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={tagsId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tTags (comma separated)\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={tagsId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tplaceholder=\"work, important, draft\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"preview\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileConfirmView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-primary\" />}\r\n\t\t\t\t\ttitle=\"Confirm Upload\"\r\n\t\t\t\t\tdescription=\"Review your files before uploading\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-muted/30 p-4\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-primary\" />\r\n\t\t\t\t\t\t\t<span>Files ready to upload</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tYour files will be uploaded securely. You can access them\r\n\t\t\t\t\t\t\tanytime from your dashboard.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex justify-between\">\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">Files:</span>\r\n\t\t\t\t\t\t\t<span className=\"font-medium text-foreground\">\r\n\t\t\t\t\t\t\t\t3 files\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex justify-between\">\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">Total size:</span>\r\n\t\t\t\t\t\t\t<span className=\"font-medium text-foreground\">2.4 MB</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"edit\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"complete\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<Upload className=\"size-4\" /> Upload\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileCompleteView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-primary\" />}\r\n\t\t\t\t\ttitle=\"Upload Complete!\"\r\n\t\t\t\t\tdescription=\"Your files have been successfully uploaded\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<CheckCircle className=\"size-5 text-primary\" />\r\n\t\t\t\t\t\t<span>Files uploaded successfully</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<CheckCircle className=\"size-5 text-primary\" />\r\n\t\t\t\t\t\t<span>Metadata saved</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<p className=\"mt-4 text-sm text-muted-foreground\">\r\n\t\t\t\t\t\tYou can now access your files from the dashboard or upload\r\n\t\t\t\t\t\tmore files.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tUpload More Files\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst fileUploadViews: ViewsRegistry = {\r\n\tdefault: FileUploadDefaultView,\r\n\tpreview: FilePreviewView,\r\n\tedit: FileEditMetadataView,\r\n\tconfirm: FileConfirmView,\r\n\tcomplete: FileCompleteView,\r\n};\r\n\r\nexport function FileUploadFlowExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">File Upload Flow</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tMulti-step upload with drag-and-drop, preview, and metadata editing\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={fileUploadViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Upload Flow\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 7: Confirmation Flow\r\n// ============================================================================\r\n\r\nfunction ConfirmationWarningView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Delete Account\"\r\n\t\t\t\t\tdescription=\"This action cannot be undone\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tWarning: This is a destructive action\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tDeleting your account will permanently remove all your\r\n\t\t\t\t\t\t\tdata, including files, settings, and history. This action\r\n\t\t\t\t\t\t\tcannot be reversed.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>All your files will be deleted</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>Your account history will be lost</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>You won't be able to recover this account</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tCancel\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-destructive text-white\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationInputView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst [confirmationText, setConfirmationText] = useState(\"\");\r\n\tconst confirmationId = useId();\r\n\tconst CONFIRMATION_WORD = \"DELETE\";\r\n\r\n\tconst isConfirmed = confirmationText === CONFIRMATION_WORD;\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Confirm Deletion\"\r\n\t\t\t\t\tdescription=\"Type DELETE to confirm this action\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tThis action is permanent\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tTo confirm, please type{\" \"}\r\n\t\t\t\t\t\t\t<strong>{CONFIRMATION_WORD}</strong> in the field below.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={confirmationId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tType {CONFIRMATION_WORD} to confirm\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={confirmationId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tvalue={confirmationText}\r\n\t\t\t\t\t\t\tonChange={(e) => setConfirmationText(e.target.value)}\r\n\t\t\t\t\t\t\tplaceholder={CONFIRMATION_WORD}\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t{confirmationText && !isConfirmed && (\r\n\t\t\t\t\t\t\t<p className=\"mt-1 text-xs text-destructive\">\r\n\t\t\t\t\t\t\t\tThe text doesn't match. Please type {CONFIRMATION_WORD}{\" \"}\r\n\t\t\t\t\t\t\t\texactly.\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"warning\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\tif (isConfirmed) {\r\n\t\t\t\t\t\t\tsetView(\"final-warning\");\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName={`bg-destructive text-white ${\r\n\t\t\t\t\t\t!isConfirmed ? \"opacity-50 cursor-not-allowed\" : \"\"\r\n\t\t\t\t\t}`}\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationFinalWarningView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Trash className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Last Chance\"\r\n\t\t\t\t\tdescription=\"Are you absolutely sure?\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg border-2 border-destructive bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-bold text-destructive\">\r\n\t\t\t\t\t\t\tFinal Warning\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tThis is your last opportunity to cancel. Once you proceed,\r\n\t\t\t\t\t\t\tyour account and all associated data will be permanently\r\n\t\t\t\t\t\t\tdeleted immediately.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-3 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tAll your files, documents, and media will be permanently\r\n\t\t\t\t\t\t\t\tremoved\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tYour account history and activity will be erased\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tYou will need to create a new account if you want to use\r\n\t\t\t\t\t\t\t\tour service again\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"processing\")}\r\n\t\t\t\t\tclassName=\"bg-destructive text-white\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<Trash className=\"size-4\" /> Delete\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationProcessingView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\tuseEffect(() => {\r\n\t\t// Simulate processing delay, then transition to complete\r\n\t\tconst timer = setTimeout(() => {\r\n\t\t\tsetView(\"complete\");\r\n\t\t}, 3000);\r\n\r\n\t\treturn () => clearTimeout(timer);\r\n\t}, [setView]);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Processing...\"\r\n\t\t\t\t\tdescription=\"Your account is being deleted\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Removing your account data...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Deleting associated files...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Clearing account history...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationCompleteView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Account Deleted\"\r\n\t\t\t\t\tdescription=\"Your account has been permanently deleted\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tAccount deletion complete\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tAll your data has been permanently removed from our\r\n\t\t\t\t\t\t\tsystems. You will need to create a new account if you wish\r\n\t\t\t\t\t\t\tto use our service again.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>Account data removed</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>Files deleted</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>History cleared</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tClose\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<header className=\"mb-4 flex h-[72px] items-center border-b border-border pl-2\">\r\n\t\t\t\t<h2 className=\"text-[19px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\tAccount Settings\r\n\t\t\t\t</h2>\r\n\t\t\t</header>\r\n\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"warning\")}>\r\n\t\t\t\t\t<Trash className=\"size-4\" />\r\n\t\t\t\t\tDelete Account\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nconst confirmationViews: ViewsRegistry = {\r\n\tdefault: ConfirmationDefaultView,\r\n\twarning: ConfirmationWarningView,\r\n\tconfirm: ConfirmationInputView,\r\n\t\"final-warning\": ConfirmationFinalWarningView,\r\n\tprocessing: ConfirmationProcessingView,\r\n\tcomplete: ConfirmationCompleteView,\r\n};\r\n\r\nexport function ConfirmationFlowExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Confirmation Flow</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tMulti-step destructive action confirmation with warnings\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={confirmationViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Confirmation Flow\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// All Examples Container\r\n// ============================================================================\r\n\r\nexport default function Example() {\r\n\treturn (\r\n\t\t<div className=\"space-y-12 p-8\">\r\n\t\t\t<div>\r\n\t\t\t\t<h1 className=\"text-3xl font-bold\">FamilyDrawer Examples</h1>\r\n\t\t\t\t<p className=\"mt-2 text-muted-foreground\">\r\n\t\t\t\t\tVarious usage patterns for the composable FamilyDrawer component\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"grid gap-8 md:grid-cols-2\">\r\n\t\t\t\t<CustomViewsExample />\r\n\t\t\t\t<ComposablePatternExample />\r\n\t\t\t\t<MinimalExample />\r\n\t\t\t\t<FileUploadFlowExample />\r\n\t\t\t\t<ConfirmationFlowExample />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/familydrawerusage.tsx",
      "content": "\"use client\";\r\n\r\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\r\n\r\nimport {\r\n\tFamilyDrawerAnimatedContent,\r\n\tFamilyDrawerAnimatedWrapper,\r\n\tFamilyDrawerButton,\r\n\tFamilyDrawerClose,\r\n\tFamilyDrawerContent,\r\n\tFamilyDrawerHeader,\r\n\tFamilyDrawerOverlay,\r\n\tFamilyDrawerPortal,\r\n\tFamilyDrawerRoot,\r\n\tFamilyDrawerSecondaryButton,\r\n\tFamilyDrawerTrigger,\r\n\tFamilyDrawerViewContent,\r\n\tuseFamilyDrawer,\r\n\ttype ViewsRegistry,\r\n} from \"@/registry/open-source/family-drawer\";\r\nimport {\r\n\tAlertTriangle,\r\n\tArrowLeft,\r\n\tArrowRight,\r\n\tCheckCircle,\r\n\tFile,\r\n\tImage,\r\n\tTrash,\r\n\tUpload,\r\n\tXCircle,\r\n} from \"lucide-react\";\r\n\r\n// ============================================================================\r\n// Example 2: Custom Views via Props\r\n// ============================================================================\r\n\r\nfunction CustomDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<header className=\"mb-4 flex h-[72px] items-center border-b border-border pl-2\">\r\n\t\t\t\t<h2 className=\"text-[19px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\tCustom Menu\r\n\t\t\t\t</h2>\r\n\t\t\t</header>\r\n\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"settings\")}>\r\n\t\t\t\t\t⚙️ Settings\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"profile\")}>\r\n\t\t\t\t\t👤 Profile\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"about\")}>\r\n\t\t\t\t\tℹ️ About\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nfunction CustomSettingsView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">⚙️</span>}\r\n\t\t\t\t\ttitle=\"Settings\"\r\n\t\t\t\t\tdescription=\"Configure your preferences and application settings.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center justify-between\">\r\n\t\t\t\t\t\t<span className=\"text-[15px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\t\t\tNotifications\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input type=\"checkbox\" defaultChecked />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center justify-between\">\r\n\t\t\t\t\t\t<span className=\"text-[15px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\t\t\tDark Mode\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input type=\"checkbox\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tBack\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tSave\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction CustomProfileView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst nameId = useId();\r\n\tconst emailId = useId();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">👤</span>}\r\n\t\t\t\t\ttitle=\"Profile\"\r\n\t\t\t\t\tdescription=\"View and edit your profile information.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={nameId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tName\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={nameId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tdefaultValue=\"John Doe\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border px-3 py-2 bg-background\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={emailId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tEmail\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={emailId}\r\n\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\tdefaultValue=\"john@example.com\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border px-3 py-2 bg-background\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tCancel\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tUpdate\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction CustomAboutView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">ℹ️</span>}\r\n\t\t\t\t\ttitle=\"About\"\r\n\t\t\t\t\tdescription=\"Learn more about this application.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tVersion 1.0.0\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tBuilt with React and TypeScript\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tClose\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst customViews: ViewsRegistry = {\r\n\tdefault: CustomDefaultView,\r\n\tsettings: CustomSettingsView,\r\n\tprofile: CustomProfileView,\r\n\tabout: CustomAboutView,\r\n};\r\n\r\nexport function CustomViewsExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Custom Views via Props</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tPass custom views as a prop to FamilyDrawerRoot\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={customViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Custom Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 4: Composable Pattern (Manual View Control)\r\n// ============================================================================\r\n\r\nfunction ComposableView() {\r\n\tconst { view, setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<span className=\"text-4xl\">🎨</span>}\r\n\t\t\t\t\ttitle=\"Composable Example\"\r\n\t\t\t\t\tdescription=\"This view uses the composable pattern with manual view control.\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<p className=\"text-[15px] font-medium text-muted-foreground md:font-normal\">\r\n\t\t\t\t\t\tCurrent view: <strong>{view}</strong>\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view1\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 1\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 2\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tonClick={() => setView(\"view3\")}\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg bg-muted px-4 py-2 text-sm text-foreground\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tView 3\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View1() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">1️⃣</span>}\r\n\t\t\t\ttitle=\"View 1\"\r\n\t\t\t\tdescription=\"This is the first view in the composable pattern.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tFirst step completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>→</span>\r\n\t\t\t\t\tReady to proceed\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowRight /> View 2\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View2() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">2️⃣</span>}\r\n\t\t\t\ttitle=\"View 2\"\r\n\t\t\t\tdescription=\"This is the second view in the composable pattern with additional content.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tFirst step completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tSecond step in progress\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>→</span>\r\n\t\t\t\t\tContinue to final step\r\n\t\t\t\t</div>\r\n\t\t\t\t<p className=\"mt-4 text-sm text-muted-foreground\">\r\n\t\t\t\t\tThis view has more content to demonstrate height differences\r\n\t\t\t\t\tbetween views.\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view1\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> View 1\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view3\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowRight /> View 3\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction View3() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2\">\r\n\t\t\t<FamilyDrawerHeader\r\n\t\t\t\ticon={<span className=\"text-4xl\">3️⃣</span>}\r\n\t\t\t\ttitle=\"View 3\"\r\n\t\t\t\tdescription=\"This is the final view in the composable pattern.\"\r\n\t\t\t/>\r\n\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>✓</span>\r\n\t\t\t\t\tAll steps completed\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t<span>🎉</span>\r\n\t\t\t\t\tReady to finish\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"view2\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> View 2\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tBack to Menu\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst composableViews: ViewsRegistry = {\r\n\tdefault: ComposableView,\r\n\tview1: View1,\r\n\tview2: View2,\r\n\tview3: View3,\r\n};\r\n\r\nexport function ComposablePatternExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Composable Pattern</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tManual view control using useFamilyDrawer hook\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={composableViews} defaultView=\"default\">\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Composable Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 5: Minimal Custom View\r\n// ============================================================================\r\n\r\nfunction MinimalView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div className=\"px-2 py-4\">\r\n\t\t\t<h2 className=\"text-xl font-semibold\">Minimal View</h2>\r\n\t\t\t<p className=\"mt-2 text-sm text-muted-foreground\">\r\n\t\t\t\tA simple, minimal view example.\r\n\t\t\t</p>\r\n\t\t\t<button\r\n\t\t\t\ttype=\"button\"\r\n\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\tclassName=\"mt-4 rounded-lg bg-primary px-4 py-2 text-primary-foreground\"\r\n\t\t\t>\r\n\t\t\t\tClose\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst minimalViews: ViewsRegistry = {\r\n\tdefault: MinimalView,\r\n};\r\n\r\nexport function MinimalExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Minimal Example</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tA simple, single-view drawer\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={minimalViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Minimal Drawer\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 6: File Upload Flow\r\n// ============================================================================\r\n\r\ninterface FileWithPreview extends File {\r\n\tpreview?: string;\r\n}\r\n\r\nfunction FileUploadDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\r\n\tconst [isDragging, setIsDragging] = useState(false);\r\n\r\n\tconst handleDragEnter = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t\tsetIsDragging(true);\r\n\t}, []);\r\n\r\n\tconst handleDragLeave = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t\tsetIsDragging(false);\r\n\t}, []);\r\n\r\n\tconst handleDragOver = useCallback((e: React.DragEvent) => {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\t}, []);\r\n\r\n\tconst handleDrop = useCallback(\r\n\t\t(e: React.DragEvent) => {\r\n\t\t\te.preventDefault();\r\n\t\t\te.stopPropagation();\r\n\t\t\tsetIsDragging(false);\r\n\r\n\t\t\tconst files = Array.from(e.dataTransfer.files);\r\n\t\t\tif (files.length > 0) {\r\n\t\t\t\t// Store files in a way that can be accessed by other views\r\n\t\t\t\t// For demo purposes, we'll use a simple approach\r\n\t\t\t\tconst event = new CustomEvent(\"filesSelected\", {\r\n\t\t\t\t\tdetail: { files },\r\n\t\t\t\t});\r\n\t\t\t\twindow.dispatchEvent(event);\r\n\t\t\t\tsetView(\"preview\");\r\n\t\t\t}\r\n\t\t},\r\n\t\t[setView]\r\n\t);\r\n\r\n\tconst handleFileSelect = useCallback(\r\n\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\r\n\t\t\tconst files = Array.from(e.target.files || []);\r\n\t\t\tif (files.length > 0) {\r\n\t\t\t\tconst event = new CustomEvent(\"filesSelected\", {\r\n\t\t\t\t\tdetail: { files },\r\n\t\t\t\t});\r\n\t\t\t\twindow.dispatchEvent(event);\r\n\t\t\t\tsetView(\"preview\");\r\n\t\t\t}\r\n\t\t},\r\n\t\t[setView]\r\n\t);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Upload className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Upload Files\"\r\n\t\t\t\t\tdescription=\"Drag and drop files here or click to browse\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6\">\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\tonDragEnter={handleDragEnter}\r\n\t\t\t\t\t\tonDragOver={handleDragOver}\r\n\t\t\t\t\t\tonDragLeave={handleDragLeave}\r\n\t\t\t\t\t\tonDrop={handleDrop}\r\n\t\t\t\t\t\tonClick={() => fileInputRef.current?.click()}\r\n\t\t\t\t\t\tclassName={`w-full rounded-lg border-2 border-dashed p-8 text-center transition-colors ${\r\n\t\t\t\t\t\t\tisDragging\r\n\t\t\t\t\t\t\t\t? \"border-primary bg-primary/5\"\r\n\t\t\t\t\t\t\t\t: \"border-border bg-muted/30\"\r\n\t\t\t\t\t\t}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Upload\r\n\t\t\t\t\t\t\tclassName={`mx-auto mb-3 size-10 ${\r\n\t\t\t\t\t\t\t\tisDragging ? \"text-primary\" : \"text-muted-foreground\"\r\n\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<p className=\"mb-2 text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t{isDragging\r\n\t\t\t\t\t\t\t\t? \"Drop files here\"\r\n\t\t\t\t\t\t\t\t: \"Drag and drop files here\"}\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mb-4 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tor click to browse\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<span className=\"inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\">\r\n\t\t\t\t\t\t\tChoose Files\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tref={fileInputRef}\r\n\t\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t\tmultiple\r\n\t\t\t\t\t\t\tclassName=\"hidden\"\r\n\t\t\t\t\t\t\tonChange={handleFileSelect}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FilePreviewView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst [files, setFiles] = useState<FileWithPreview[]>([]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst handleFilesSelected = (e: Event) => {\r\n\t\t\tconst customEvent = e as CustomEvent<{ files: File[] }>;\r\n\t\t\tconst selectedFiles = customEvent.detail.files.map((file, idx) => {\r\n\t\t\t\tconst fileWithPreview: FileWithPreview = Object.assign(file, {\r\n\t\t\t\t\tpreview: undefined,\r\n\t\t\t\t});\r\n\t\t\t\tif (file.type.startsWith(\"image/\")) {\r\n\t\t\t\t\tconst reader = new FileReader();\r\n\t\t\t\t\treader.onload = (e) => {\r\n\t\t\t\t\t\tfileWithPreview.preview = e.target?.result as string;\r\n\t\t\t\t\t\tsetFiles((prev) => {\r\n\t\t\t\t\t\t\tconst updated = [...prev];\r\n\t\t\t\t\t\t\tupdated[idx] = fileWithPreview;\r\n\t\t\t\t\t\t\treturn updated;\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t};\r\n\t\t\t\t\treader.readAsDataURL(file);\r\n\t\t\t\t}\r\n\t\t\t\treturn fileWithPreview;\r\n\t\t\t});\r\n\t\t\tsetFiles(selectedFiles);\r\n\t\t};\r\n\r\n\t\twindow.addEventListener(\"filesSelected\", handleFilesSelected);\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener(\"filesSelected\", handleFilesSelected);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst formatFileSize = (bytes: number) => {\r\n\t\tif (bytes === 0) return \"0 Bytes\";\r\n\t\tconst k = 1024;\r\n\t\tconst sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\r\n\t\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\r\n\t\treturn Math.round((bytes / Math.pow(k, i)) * 100) / 100 + \" \" + sizes[i];\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Image className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Preview Files\"\r\n\t\t\t\t\tdescription={`${files.length} file${files.length !== 1 ? \"s\" : \"\"} selected`}\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-3 border-t border-border pt-6\">\r\n\t\t\t\t\t{files.map((file) => {\r\n\t\t\t\t\t\tconst fileKey = `${file.name}-${file.size}-${file.lastModified}`;\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tkey={fileKey}\r\n\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-3 rounded-lg border border-border bg-muted/30 p-3\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{file.preview ? (\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-12 rounded bg-cover bg-center\"\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundImage: `url(${file.preview})`,\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\trole=\"img\"\r\n\t\t\t\t\t\t\t\t\t\taria-label={file.name}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex size-12 items-center justify-center rounded bg-muted\">\r\n\t\t\t\t\t\t\t\t\t\t<File className=\"size-6 text-muted-foreground\" />\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<div className=\"flex-1 min-w-0\">\r\n\t\t\t\t\t\t\t\t\t<p className=\"truncate text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t\t\t\t{file.name}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t})}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"edit\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileEditMetadataView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst nameId = useId();\r\n\tconst descriptionId = useId();\r\n\tconst tagsId = useId();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<File className=\"size-12\" />}\r\n\t\t\t\t\ttitle=\"Edit Metadata\"\r\n\t\t\t\t\tdescription=\"Add details to your files\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={nameId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tFile Name\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={nameId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tplaceholder=\"my-document.pdf\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={descriptionId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tDescription\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<textarea\r\n\t\t\t\t\t\t\tid={descriptionId}\r\n\t\t\t\t\t\t\tplaceholder=\"Add a description...\"\r\n\t\t\t\t\t\t\trows={3}\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={tagsId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tTags (comma separated)\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={tagsId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tplaceholder=\"work, important, draft\"\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"preview\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileConfirmView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-primary\" />}\r\n\t\t\t\t\ttitle=\"Confirm Upload\"\r\n\t\t\t\t\tdescription=\"Review your files before uploading\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-muted/30 p-4\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-sm font-medium text-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-primary\" />\r\n\t\t\t\t\t\t\t<span>Files ready to upload</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tYour files will be uploaded securely. You can access them\r\n\t\t\t\t\t\t\tanytime from your dashboard.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex justify-between\">\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">Files:</span>\r\n\t\t\t\t\t\t\t<span className=\"font-medium text-foreground\">\r\n\t\t\t\t\t\t\t\t3 files\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex justify-between\">\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">Total size:</span>\r\n\t\t\t\t\t\t\t<span className=\"font-medium text-foreground\">2.4 MB</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"edit\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"complete\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<Upload className=\"size-4\" /> Upload\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction FileCompleteView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-primary\" />}\r\n\t\t\t\t\ttitle=\"Upload Complete!\"\r\n\t\t\t\t\tdescription=\"Your files have been successfully uploaded\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<CheckCircle className=\"size-5 text-primary\" />\r\n\t\t\t\t\t\t<span>Files uploaded successfully</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<CheckCircle className=\"size-5 text-primary\" />\r\n\t\t\t\t\t\t<span>Metadata saved</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<p className=\"mt-4 text-sm text-muted-foreground\">\r\n\t\t\t\t\t\tYou can now access your files from the dashboard or upload\r\n\t\t\t\t\t\tmore files.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-primary text-primary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tUpload More Files\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst fileUploadViews: ViewsRegistry = {\r\n\tdefault: FileUploadDefaultView,\r\n\tpreview: FilePreviewView,\r\n\tedit: FileEditMetadataView,\r\n\tconfirm: FileConfirmView,\r\n\tcomplete: FileCompleteView,\r\n};\r\n\r\nexport function FileUploadFlowExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">File Upload Flow</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tMulti-step upload with drag-and-drop, preview, and metadata editing\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={fileUploadViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Upload Flow\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// Example 7: Confirmation Flow\r\n// ============================================================================\r\n\r\nfunction ConfirmationWarningView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Delete Account\"\r\n\t\t\t\t\tdescription=\"This action cannot be undone\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tWarning: This is a destructive action\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tDeleting your account will permanently remove all your\r\n\t\t\t\t\t\t\tdata, including files, settings, and history. This action\r\n\t\t\t\t\t\t\tcannot be reversed.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>All your files will be deleted</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>Your account history will be lost</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<XCircle className=\"size-4\" />\r\n\t\t\t\t\t\t\t<span>You won't be able to recover this account</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tCancel\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-destructive text-white\"\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationInputView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\tconst [confirmationText, setConfirmationText] = useState(\"\");\r\n\tconst confirmationId = useId();\r\n\tconst CONFIRMATION_WORD = \"DELETE\";\r\n\r\n\tconst isConfirmed = confirmationText === CONFIRMATION_WORD;\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Confirm Deletion\"\r\n\t\t\t\t\tdescription=\"Type DELETE to confirm this action\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tThis action is permanent\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tTo confirm, please type{\" \"}\r\n\t\t\t\t\t\t\t<strong>{CONFIRMATION_WORD}</strong> in the field below.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<label\r\n\t\t\t\t\t\t\thtmlFor={confirmationId}\r\n\t\t\t\t\t\t\tclassName=\"text-[15px] font-semibold text-foreground md:font-medium\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tType {CONFIRMATION_WORD} to confirm\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\tid={confirmationId}\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tvalue={confirmationText}\r\n\t\t\t\t\t\t\tonChange={(e) => setConfirmationText(e.target.value)}\r\n\t\t\t\t\t\t\tplaceholder={CONFIRMATION_WORD}\r\n\t\t\t\t\t\t\tclassName=\"mt-2 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t{confirmationText && !isConfirmed && (\r\n\t\t\t\t\t\t\t<p className=\"mt-1 text-xs text-destructive\">\r\n\t\t\t\t\t\t\t\tThe text doesn't match. Please type {CONFIRMATION_WORD}{\" \"}\r\n\t\t\t\t\t\t\t\texactly.\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"warning\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\tif (isConfirmed) {\r\n\t\t\t\t\t\t\tsetView(\"final-warning\");\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName={`bg-destructive text-white ${\r\n\t\t\t\t\t\t!isConfirmed ? \"opacity-50 cursor-not-allowed\" : \"\"\r\n\t\t\t\t\t}`}\r\n\t\t\t\t>\r\n\t\t\t\t\tContinue <ArrowRight />\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationFinalWarningView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<Trash className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Last Chance\"\r\n\t\t\t\t\tdescription=\"Are you absolutely sure?\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg border-2 border-destructive bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-bold text-destructive\">\r\n\t\t\t\t\t\t\tFinal Warning\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tThis is your last opportunity to cancel. Once you proceed,\r\n\t\t\t\t\t\t\tyour account and all associated data will be permanently\r\n\t\t\t\t\t\t\tdeleted immediately.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-3 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tAll your files, documents, and media will be permanently\r\n\t\t\t\t\t\t\t\tremoved\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tYour account history and activity will be erased\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\r\n\t\t\t\t\t\t\t<AlertTriangle className=\"size-4 mt-0.5 text-destructive\" />\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">\r\n\t\t\t\t\t\t\t\tYou will need to create a new account if you want to use\r\n\t\t\t\t\t\t\t\tour service again\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"confirm\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ArrowLeft /> Back\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"processing\")}\r\n\t\t\t\t\tclassName=\"bg-destructive text-white\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<Trash className=\"size-4\" /> Delete\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationProcessingView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\tuseEffect(() => {\r\n\t\t// Simulate processing delay, then transition to complete\r\n\t\tconst timer = setTimeout(() => {\r\n\t\t\tsetView(\"complete\");\r\n\t\t}, 3000);\r\n\r\n\t\treturn () => clearTimeout(timer);\r\n\t}, [setView]);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<AlertTriangle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Processing...\"\r\n\t\t\t\t\tdescription=\"Your account is being deleted\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Removing your account data...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Deleting associated files...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex items-center gap-3 text-[15px] font-semibold text-muted-foreground md:font-medium\">\r\n\t\t\t\t\t\t<div className=\"size-5 animate-spin rounded-full border-2 border-destructive border-t-transparent\" />\r\n\t\t\t\t\t\t<span>Clearing account history...</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationCompleteView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<div className=\"px-2\">\r\n\t\t\t\t<FamilyDrawerHeader\r\n\t\t\t\t\ticon={<CheckCircle className=\"size-12 text-destructive\" />}\r\n\t\t\t\t\ttitle=\"Account Deleted\"\r\n\t\t\t\t\tdescription=\"Your account has been permanently deleted\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"mt-6 space-y-4 border-t border-border pt-6\">\r\n\t\t\t\t\t<div className=\"rounded-lg bg-destructive/10 p-4\">\r\n\t\t\t\t\t\t<p className=\"text-sm font-medium text-destructive\">\r\n\t\t\t\t\t\t\tAccount deletion complete\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\r\n\t\t\t\t\t\t\tAll your data has been permanently removed from our\r\n\t\t\t\t\t\t\tsystems. You will need to create a new account if you wish\r\n\t\t\t\t\t\t\tto use our service again.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"space-y-2 text-sm\">\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>Account data removed</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>Files deleted</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground\">\r\n\t\t\t\t\t\t\t<CheckCircle className=\"size-4 text-destructive\" />\r\n\t\t\t\t\t\t\t<span>History cleared</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"mt-7 flex gap-4\">\r\n\t\t\t\t<FamilyDrawerSecondaryButton\r\n\t\t\t\t\tonClick={() => setView(\"default\")}\r\n\t\t\t\t\tclassName=\"bg-secondary text-secondary-foreground\"\r\n\t\t\t\t>\r\n\t\t\t\t\tClose\r\n\t\t\t\t</FamilyDrawerSecondaryButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction ConfirmationDefaultView() {\r\n\tconst { setView } = useFamilyDrawer();\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<header className=\"mb-4 flex h-[72px] items-center border-b border-border pl-2\">\r\n\t\t\t\t<h2 className=\"text-[19px] font-semibold text-foreground md:font-medium\">\r\n\t\t\t\t\tAccount Settings\r\n\t\t\t\t</h2>\r\n\t\t\t</header>\r\n\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t<FamilyDrawerButton onClick={() => setView(\"warning\")}>\r\n\t\t\t\t\t<Trash className=\"size-4\" />\r\n\t\t\t\t\tDelete Account\r\n\t\t\t\t</FamilyDrawerButton>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nconst confirmationViews: ViewsRegistry = {\r\n\tdefault: ConfirmationDefaultView,\r\n\twarning: ConfirmationWarningView,\r\n\tconfirm: ConfirmationInputView,\r\n\t\"final-warning\": ConfirmationFinalWarningView,\r\n\tprocessing: ConfirmationProcessingView,\r\n\tcomplete: ConfirmationCompleteView,\r\n};\r\n\r\nexport function ConfirmationFlowExample() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h3 className=\"text-lg font-semibold\">Confirmation Flow</h3>\r\n\t\t\t<p className=\"text-sm text-muted-foreground\">\r\n\t\t\t\tMulti-step destructive action confirmation with warnings\r\n\t\t\t</p>\r\n\t\t\t<FamilyDrawerRoot views={confirmationViews}>\r\n\t\t\t\t<FamilyDrawerTrigger className=\"relative! top-auto! left-auto! translate-y-0! translate-x-0! block h-[44px] rounded-full border border-border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\">\r\n\t\t\t\t\tOpen Confirmation Flow\r\n\t\t\t\t</FamilyDrawerTrigger>\r\n\t\t\t\t<FamilyDrawerPortal>\r\n\t\t\t\t\t<FamilyDrawerOverlay />\r\n\t\t\t\t\t<FamilyDrawerContent>\r\n\t\t\t\t\t\t<FamilyDrawerClose />\r\n\t\t\t\t\t\t<FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t\t\t<FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t\t\t<FamilyDrawerViewContent />\r\n\t\t\t\t\t\t\t</FamilyDrawerAnimatedContent>\r\n\t\t\t\t\t\t</FamilyDrawerAnimatedWrapper>\r\n\t\t\t\t\t</FamilyDrawerContent>\r\n\t\t\t\t</FamilyDrawerPortal>\r\n\t\t\t</FamilyDrawerRoot>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n// ============================================================================\r\n// All Examples Container\r\n// ============================================================================\r\n\r\nexport default function Example() {\r\n\treturn (\r\n\t\t<div className=\"space-y-12 p-8\">\r\n\t\t\t<div>\r\n\t\t\t\t<h1 className=\"text-3xl font-bold\">FamilyDrawer Examples</h1>\r\n\t\t\t\t<p className=\"mt-2 text-muted-foreground\">\r\n\t\t\t\t\tVarious usage patterns for the composable FamilyDrawer component\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"grid gap-8 md:grid-cols-2\">\r\n\t\t\t\t<CustomViewsExample />\r\n\t\t\t\t<ComposablePatternExample />\r\n\t\t\t\t<MinimalExample />\r\n\t\t\t\t<FileUploadFlowExample />\r\n\t\t\t\t<ConfirmationFlowExample />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/family-drawer.tsx",
      "content": "\"use client\";\n\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\ttype ReactNode,\n} from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport useMeasure from \"react-use-measure\";\nimport { Drawer } from \"vaul\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\n// Credit:\n// https://www.cult-ui.com/docs/components/family-drawer\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype ViewComponent = React.ComponentType<Record<string, unknown>>;\n\ninterface ViewsRegistry {\n\t[viewName: string]: ViewComponent;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface FamilyDrawerContextValue {\n\tisOpen: boolean;\n\tview: string;\n\tsetView: (view: string) => void;\n\topacityDuration: number;\n\telementRef: ReturnType<typeof useMeasure>[0];\n\tbounds: ReturnType<typeof useMeasure>[1];\n\tviews: ViewsRegistry | undefined;\n}\n\nconst FamilyDrawerContext = createContext<FamilyDrawerContextValue | undefined>(\n\tundefined\n);\n\nfunction useFamilyDrawer() {\n\tconst context = useContext(FamilyDrawerContext);\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"FamilyDrawer components must be used within FamilyDrawerRoot\"\n\t\t);\n\t}\n\treturn context;\n}\n\n// ============================================================================\n// Root Component\n// ============================================================================\n\ninterface FamilyDrawerRootProps {\n\tchildren: ReactNode;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tdefaultView?: string;\n\tonViewChange?: (view: string) => void;\n\tviews?: ViewsRegistry;\n}\n\nfunction FamilyDrawerRoot({\n\tchildren,\n\topen: controlledOpen,\n\tdefaultOpen = false,\n\tonOpenChange,\n\tdefaultView = \"default\",\n\tonViewChange,\n\tviews: customViews,\n}: FamilyDrawerRootProps) {\n\tconst [internalOpen, setInternalOpen] = useState(defaultOpen);\n\tconst [view, setView] = useState(defaultView);\n\tconst [elementRef, bounds] = useMeasure();\n\tconst previousHeightRef = useRef<number>(0);\n\n\tconst isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\tconst setIsOpen = onOpenChange || setInternalOpen;\n\n\tconst opacityDuration = useMemo(() => {\n\t\tconst currentHeight = bounds.height;\n\t\tconst previousHeight = previousHeightRef.current;\n\n\t\tconst MIN_DURATION = 0.15;\n\t\tconst MAX_DURATION = 0.27;\n\n\t\tif (!previousHeightRef.current) {\n\t\t\tpreviousHeightRef.current = currentHeight;\n\t\t\treturn MIN_DURATION;\n\t\t}\n\n\t\tconst heightDifference = Math.abs(currentHeight - previousHeight);\n\t\tpreviousHeightRef.current = currentHeight;\n\n\t\tconst duration = Math.min(\n\t\t\tMath.max(heightDifference / 500, MIN_DURATION),\n\t\t\tMAX_DURATION\n\t\t);\n\n\t\treturn duration;\n\t}, [bounds.height]);\n\n\tconst handleViewChange = (newView: string) => {\n\t\tsetView(newView);\n\t\tonViewChange?.(newView);\n\t};\n\n\t// Use custom views if provided, otherwise pass undefined\n\tconst views =\n\t\tcustomViews && Object.keys(customViews).length > 0\n\t\t\t? customViews\n\t\t\t: undefined;\n\n\tconst contextValue: FamilyDrawerContextValue = {\n\t\tisOpen,\n\t\tview,\n\t\tsetView: handleViewChange,\n\t\topacityDuration,\n\t\telementRef,\n\t\tbounds,\n\t\tviews,\n\t};\n\n\treturn (\n\t\t<FamilyDrawerContext.Provider value={contextValue}>\n\t\t\t<Drawer.Root open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t{children}\n\t\t\t</Drawer.Root>\n\t\t</FamilyDrawerContext.Provider>\n\t);\n}\n\n// ============================================================================\n// Trigger Component\n// ============================================================================\n\ninterface FamilyDrawerTriggerProps {\n\tchildren: ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n}\n\nfunction FamilyDrawerTrigger({\n\tchildren,\n\tasChild = false,\n\tclassName,\n}: FamilyDrawerTriggerProps) {\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Drawer.Trigger asChild>\n\t\t\t\t<Slot>{children}</Slot>\n\t\t\t</Drawer.Trigger>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Drawer.Trigger asChild>\n\t\t\t<button\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 antialiased -translate-y-1/2 -translate-x-1/2 h-[44px] rounded-full border bg-background px-4 py-2 font-medium text-foreground transition-colors hover:bg-accent focus-visible:shadow-focus-ring-button md:font-medium cursor-pointer\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\ttype=\"button\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t</Drawer.Trigger>\n\t);\n}\n\n// ============================================================================\n// Portal Component\n// ============================================================================\n\nfunction FamilyDrawerPortal({ children }: { children: ReactNode }) {\n\treturn <Drawer.Portal>{children}</Drawer.Portal>;\n}\n\n// ============================================================================\n// Overlay Component\n// ============================================================================\n\ninterface FamilyDrawerOverlayProps {\n\tclassName?: string;\n\tonClick?: () => void;\n}\n\nfunction FamilyDrawerOverlay({ className, onClick }: FamilyDrawerOverlayProps) {\n\tconst { setView } = useFamilyDrawer();\n\n\treturn (\n\t\t<Drawer.Overlay\n\t\t\tclassName={cn(\"fixed inset-0 z-10 bg-black/30\", className)}\n\t\t\tonClick={onClick || (() => setView(\"default\"))}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Content Component\n// ============================================================================\n\ninterface FamilyDrawerContentProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tasChild?: boolean;\n}\n\nfunction FamilyDrawerContent({\n\tchildren,\n\tclassName,\n\tasChild = false,\n}: FamilyDrawerContentProps) {\n\tconst { bounds } = useFamilyDrawer();\n\n\tconst content = (\n\t\t<motion.div\n\t\t\tanimate={{\n\t\t\t\theight: bounds.height,\n\t\t\t\ttransition: {\n\t\t\t\t\tduration: 0.27,\n\t\t\t\t\tease: [0.25, 1, 0.5, 1],\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Drawer.Content\n\t\t\t\tasChild\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed inset-x-4 bottom-4 z-10 mx-auto max-w-[361px] overflow-hidden rounded-[36px] bg-background outline-hidden md:mx-auto md:w-full\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Slot>{content}</Slot>\n\t\t\t</Drawer.Content>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Drawer.Content\n\t\t\tasChild\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-x-4 bottom-4 z-10 mx-auto max-w-[361px] overflow-hidden rounded-[36px] bg-background outline-hidden md:mx-auto md:w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{content}\n\t\t</Drawer.Content>\n\t);\n}\n\n// ============================================================================\n// Animated Wrapper Component\n// ============================================================================\n\ninterface FamilyDrawerAnimatedWrapperProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nfunction FamilyDrawerAnimatedWrapper({\n\tchildren,\n\tclassName,\n}: FamilyDrawerAnimatedWrapperProps) {\n\tconst { elementRef } = useFamilyDrawer();\n\n\treturn (\n\t\t<div\n\t\t\tref={elementRef}\n\t\t\tclassName={cn(\"px-6 pb-6 pt-2.5 antialiased\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Animated Content Component\n// ============================================================================\n\ninterface FamilyDrawerAnimatedContentProps {\n\tchildren: ReactNode;\n}\n\nfunction FamilyDrawerAnimatedContent({\n\tchildren,\n}: FamilyDrawerAnimatedContentProps) {\n\tconst { view, opacityDuration } = useFamilyDrawer();\n\n\treturn (\n\t\t<AnimatePresence initial={false} mode=\"popLayout\" custom={view}>\n\t\t\t<motion.div\n\t\t\t\tinitial={{ opacity: 0, scale: 0.96 }}\n\t\t\t\tanimate={{ opacity: 1, scale: 1, y: 0 }}\n\t\t\t\texit={{ opacity: 0, scale: 0.96 }}\n\t\t\t\tkey={view}\n\t\t\t\ttransition={{\n\t\t\t\t\tduration: opacityDuration,\n\t\t\t\t\tease: [0.26, 0.08, 0.25, 1],\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</motion.div>\n\t\t</AnimatePresence>\n\t);\n}\n\n// ============================================================================\n// Close Component\n// ============================================================================\n\ninterface FamilyDrawerCloseProps {\n\tchildren?: ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n}\n\nfunction FamilyDrawerClose({\n\tchildren,\n\tasChild = false,\n\tclassName,\n}: FamilyDrawerCloseProps) {\n\tconst defaultClose = (\n\t\t<button\n\t\t\tdata-vaul-no-drag=\"\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute right-8 top-7 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-muted text-muted-foreground transition-transform focus:scale-95 focus-visible:shadow-focus-ring-button active:scale-75 cursor-pointer\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{children || <CloseIcon />}\n\t\t</button>\n\t);\n\n\tif (asChild) {\n\t\treturn (\n\t\t\t<Drawer.Close asChild>\n\t\t\t\t<Slot>{defaultClose}</Slot>\n\t\t\t</Drawer.Close>\n\t\t);\n\t}\n\n\treturn <Drawer.Close asChild>{defaultClose}</Drawer.Close>;\n}\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\ninterface FamilyDrawerHeaderProps {\n\ticon: ReactNode;\n\ttitle: string;\n\tdescription: string;\n\tclassName?: string;\n}\n\nfunction FamilyDrawerHeader({\n\ticon,\n\ttitle,\n\tdescription,\n\tclassName,\n}: FamilyDrawerHeaderProps) {\n\treturn (\n\t\t<header className={cn(\"mt-[21px]\", className)}>\n\t\t\t{icon}\n\t\t\t<h2 className=\"mt-2.5 text-[22px] font-semibold text-foreground md:font-medium\">\n\t\t\t\t{title}\n\t\t\t</h2>\n\t\t\t<p className=\"mt-3 text-[17px] font-medium leading-[24px] text-muted-foreground md:font-normal\">\n\t\t\t\t{description}\n\t\t\t</p>\n\t\t</header>\n\t);\n}\n\ninterface FamilyDrawerButtonProps {\n\tchildren: ReactNode;\n\tonClick: () => void;\n\tclassName?: string;\n\tasChild?: boolean;\n}\n\nfunction FamilyDrawerButton({\n\tchildren,\n\tonClick,\n\tclassName,\n\tasChild = false,\n}: FamilyDrawerButtonProps) {\n\tconst button = (\n\t\t<button\n\t\t\tdata-vaul-no-drag=\"\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-12 w-full items-center gap-[15px] rounded-[16px] bg-muted px-4 text-[17px] font-semibold text-foreground transition-transform focus:scale-95 focus-visible:shadow-focus-ring-button active:scale-95 md:font-medium cursor-pointer\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={onClick}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n\n\tif (asChild) {\n\t\treturn <Slot>{button}</Slot>;\n\t}\n\n\treturn button;\n}\n\ninterface FamilyDrawerSecondaryButtonProps {\n\tchildren: ReactNode;\n\tonClick: () => void;\n\tclassName: string;\n\tasChild?: boolean;\n}\n\nfunction FamilyDrawerSecondaryButton({\n\tchildren,\n\tonClick,\n\tclassName,\n\tasChild = false,\n}: FamilyDrawerSecondaryButtonProps) {\n\tconst button = (\n\t\t<button\n\t\t\tdata-vaul-no-drag=\"\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-12 w-full items-center justify-center gap-[15px] rounded-full text-center text-[19px] font-semibold transition-transform focus:scale-95 focus-visible:shadow-focus-ring-button active:scale-95 md:font-medium cursor-pointer\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n\n\tif (asChild) {\n\t\treturn <Slot>{button}</Slot>;\n\t}\n\n\treturn button;\n}\n\n// ============================================================================\n// View Content Renderer\n// ============================================================================\n\ninterface FamilyDrawerViewContentProps {\n\tviews?: ViewsRegistry;\n}\n\nfunction FamilyDrawerViewContent(\n\t{\n\t\tviews: propViews,\n\t}: FamilyDrawerViewContentProps = {} as FamilyDrawerViewContentProps\n) {\n\tconst { view, views: contextViews } = useFamilyDrawer();\n\n\t// Use prop views first, then context views\n\tconst views = propViews || contextViews;\n\n\tif (!views) {\n\t\tthrow new Error(\n\t\t\t\"FamilyDrawerViewContent requires views to be provided via props or FamilyDrawerRoot\"\n\t\t);\n\t}\n\n\tconst ViewComponent = views[view];\n\n\tif (!ViewComponent) {\n\t\t// Fallback to default view if view not found\n\t\tconst DefaultComponent = views.default;\n\t\treturn DefaultComponent ? <DefaultComponent /> : null;\n\t}\n\n\treturn <ViewComponent />;\n}\n\n// ============================================================================\n// Icons\n// ============================================================================\n\nfunction CloseIcon() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"12\"\n\t\t\theight=\"12\"\n\t\t\tviewBox=\"0 0 12 12\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<title>Close Icon</title>\n\t\t\t<path\n\t\t\t\td=\"M10.4854 1.99998L2.00007 10.4853\"\n\t\t\t\tstroke=\"#999999\"\n\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M10.4854 10.4844L2.00007 1.99908\"\n\t\t\t\tstroke=\"#999999\"\n\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n\tFamilyDrawerRoot,\n\tFamilyDrawerTrigger,\n\tFamilyDrawerPortal,\n\tFamilyDrawerOverlay,\n\tFamilyDrawerContent,\n\tFamilyDrawerAnimatedWrapper,\n\tFamilyDrawerAnimatedContent,\n\tFamilyDrawerClose,\n\tFamilyDrawerHeader,\n\tFamilyDrawerButton,\n\tFamilyDrawerSecondaryButton,\n\tFamilyDrawerViewContent,\n\tuseFamilyDrawer,\n\ttype ViewsRegistry,\n\ttype ViewComponent,\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}