@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/command-data.tsx

@@ -0,0 +1,1381 @@
+export const commands = [
+    {
+        name: "nested command dialog",
+        value: "nested-command-dialog",
+        importPath: "~/components/catalyst-ui/commands/nested-command-dialog",
+        path: "/components/catalyst-ui/commands/nested-command-dialog.tsx",
+        premium: true,
+        source: null,
+        category: "Commands",
+        tags: ["utils", "auth", "user auth"],
+        features: ["utils", "auth", "user auth"],
+        dependencies: [],
+        basicusage: ``,
+        usage: `
+
+
+  const [open, setOpen] = useState(false);
+  const [basicOpen, setBasicOpen] = useState(false);
+  const [themeOpen, setThemeOpen] = useState(false);
+
+  const commandPages = [
+	{
+	  id: 'main',
+	  title: 'Actions',
+	  items: [
+		{
+		  id: 'search-projects',
+		  label: 'Search projects...',
+		  icon: <FolderOpen size={16} />,
+		  navigateTo: 'projects',
+		  shortcut: '⌘P'
+		},
+		{
+		  id: 'join-team',
+		  label: 'Join a team...',
+		  icon: <Users size={16} />,
+		  navigateTo: 'teams',
+		  shortcut: '⌘T'
+		},
+		{
+		  id: 'settings',
+		  label: 'Settings...',
+		  icon: <Settings size={16} />,
+		  navigateTo: 'settings',
+		  shortcut: '⌘,'
+		},
+		{
+		  id: 'theme',
+		  label: 'Change theme...',
+		  icon: <Palette size={16} />,
+		  navigateTo: 'theme',
+		}
+	  ]
+	},
+	{
+	  id: 'projects',
+	  title: 'Projects',
+	  items: [
+		{
+		  id: 'project-a',
+		  label: 'Project Alpha',
+		  icon: <FolderOpen size={16} />,
+		  value: 'React application with TypeScript',
+		  onSelect: () => console.log('Selected Project Alpha')
+		},
+		{
+		  id: 'project-b',
+		  label: 'Project Beta',
+		  icon: <FolderOpen size={16} />,
+		  value: 'Vue.js dashboard application',
+		  onSelect: () => console.log('Selected Project Beta')
+		},
+		{
+		  id: 'project-c',
+		  label: 'Project Gamma',
+		  icon: <FolderOpen size={16} />,
+		  value: 'Next.js e-commerce site',
+		  onSelect: () => console.log('Selected Project Gamma')
+		}
+	  ]
+	},
+	{
+	  id: 'teams',
+	  title: 'Teams',
+	  items: [
+		{
+		  id: 'team-1',
+		  label: 'Frontend Team',
+		  icon: <Users size={16} />,
+		  value: '12 members • Active',
+		  onSelect: () => console.log('Joined Frontend Team')
+		},
+		{
+		  id: 'team-2',
+		  label: 'Backend Team',
+		  icon: <Users size={16} />,
+		  value: '8 members • Active',
+		  onSelect: () => console.log('Joined Backend Team')
+		},
+		{
+		  id: 'team-3',
+		  label: 'Design Team',
+		  icon: <Users size={16} />,
+		  value: '6 members • Active',
+		  onSelect: () => console.log('Joined Design Team')
+		}
+	  ]
+	},
+	{
+	  id: 'settings',
+	  title: 'Settings',
+	  items: [
+		{
+		  id: 'profile',
+		  label: 'Profile Settings',
+		  icon: <Settings size={16} />,
+		  onSelect: () => console.log('Opening Profile Settings')
+		},
+		{
+		  id: 'notifications',
+		  label: 'Notifications',
+		  icon: <Bell size={16} />,
+		  onSelect: () => console.log('Opening Notifications')
+		},
+		{
+		  id: 'security',
+		  label: 'Security & Privacy',
+		  icon: <Shield size={16} />,
+		  onSelect: () => console.log('Opening Security Settings')
+		},
+		{
+		  id: 'help',
+		  label: 'Help & Support',
+		  icon: <HelpCircle size={16} />,
+		  onSelect: () => console.log('Opening Help')
+		}
+	  ]
+	},
+	{
+	  id: 'theme',
+	  title: 'Theme',
+	  items: [
+		{
+		  id: 'light-theme',
+		  label: 'Light Theme',
+		  icon: <Sun size={16} />,
+		  onSelect: () => console.log('Switched to Light Theme')
+		},
+		{
+		  id: 'dark-theme',
+		  label: 'Dark Theme',
+		  icon: <Moon size={16} />,
+		  onSelect: () => console.log('Switched to Dark Theme')
+		}
+	  ]
+	}
+  ];
+
+  const basicPages = [
+	{
+	  id: 'root',
+	  items: [
+		{
+		  id: 'calendar',
+		  label: 'Calendar',
+		  icon: <Calendar size={16} />,
+		  shortcut: '⌘K',
+		  onSelect: () => console.log('Calendar selected')
+		},
+		{
+		  id: 'emoji',
+		  label: 'Search Emoji',
+		  icon: <Search size={16} />,
+		  onSelect: () => console.log('Emoji search selected')
+		},
+		{
+		  id: 'calculator',
+		  label: 'Calculator',
+		  icon: <Calculator size={16} />,
+		  onSelect: () => console.log('Calculator selected')
+		}
+	  ]
+	}
+  ];
+
+  const themePages = [
+	{
+	  id: 'main',
+	  title: 'Quick Actions',
+	  items: [
+		{
+		  id: 'theme-settings',
+		  label: 'Change theme...',
+		  icon: <Palette size={16} />,
+		  navigateTo: 'themes'
+		},
+		{
+		  id: 'home',
+		  label: 'Go to Dashboard',
+		  icon: <Home size={16} />,
+		  shortcut: '⌘H',
+		  onSelect: () => console.log('Going to Dashboard')
+		}
+	  ]
+	},
+	{
+	  id: 'themes',
+	  title: 'Available Themes',
+	  items: [
+		{
+		  id: 'light',
+		  label: 'Light theme',
+		  icon: <Sun size={16} />,
+		  onSelect: () => console.log('Light theme selected')
+		},
+		{
+		  id: 'dark',
+		  label: 'Dark theme',
+		  icon: <Moon size={16} />,
+		  onSelect: () => console.log('Dark theme selected')
+		}
+	  ]
+	}
+  ]
+<div className="max-w-4xl mx-auto p-6 space-y-8 bg-background text-foreground">
+	  <div className="text-center">
+		<h1 className="text-3xl font-bold mb-2">NestedCommandDialog Component</h1>
+		<p className="text-muted-foreground">A command palette with nested navigation support</p>
+	  </div>
+
+	  <div className="space-y-6">
+		<div className="space-y-4">
+		  <h2 className="text-xl font-semibold">Complex Nested Command</h2>
+		  <p className="text-sm text-muted-foreground">
+			Navigate through multiple levels: Projects, Teams, Settings, and Theme selection
+		  </p>
+		  <Button onClick={() => setOpen(true)} variant="outline">
+			Open Complex Command
+			<CommandShortcut>⌘K</CommandShortcut>
+		  </Button>
+		</div>
+
+		<div className="space-y-4">
+		  <h2 className="text-xl font-semibold">Basic Command (No Nesting)</h2>
+		  <p className="text-sm text-muted-foreground">
+			Simple command palette without navigation
+		  </p>
+		  <Button onClick={() => setBasicOpen(true)} variant="outline">
+			Open Basic Command
+		  </Button>
+		</div>
+
+		<div className="space-y-4">
+		  <h2 className="text-xl font-semibold">Theme Selector Example</h2>
+		  <p className="text-sm text-muted-foreground">
+			Example showing theme selection with navigation (like the original pattern)
+		  </p>
+		  <Button onClick={() => setThemeOpen(true)} variant="outline">
+			Open Theme Command
+		  </Button>
+		</div>
+
+		<div className="space-y-4">
+		  <h2 className="text-xl font-semibold">Navigation Instructions</h2>
+		  <div className="text-sm text-muted-foreground space-y-1">
+			<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Escape</kbd> - Go back or close</p>
+			<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Backspace</kbd> - Go back when search is empty</p>
+			<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Enter</kbd> - Select item or navigate deeper</p>
+			<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">↑↓</kbd> - Navigate items</p>
+		  </div>
+		</div>
+	  </div>
+
+	  <NestedCommandDialog
+		open={open}
+		onOpenChange={setOpen}
+		pages={commandPages}
+		placeholder="Type a command or search..."
+		onItemSelect={(item, pageId) => {
+		  console.log'Selected $ {item.label} from page $ {pageId}');
+		}}
+	  />
+
+	  <NestedCommandDialog
+		open={basicOpen}
+		onOpenChange={setBasicOpen}
+		pages={basicPages}
+		placeholder="Search commands..."
+		defaultPage="root"
+	  />
+
+	  <NestedCommandDialog
+		open={themeOpen}
+		onOpenChange={setThemeOpen}
+		pages={themePages}
+		placeholder="Search theme options..."
+		onItemSelect={(item, pageId) => {
+		  console.log('Theme action: $ {item.label} from $ {pageId}');
+		}}
+	  />
+	</div>`,
+        usagePath: "/components/catalyst-ui/commands/nested-command.tsx",
+        props: {
+            "NestedCommandDialog": [
+                { name: "open", type: "boolean", default: "false", required: false },
+                { name: "onOpenChange", type: "(open: boolean) => void", default: "null", required: false },
+                { name: "placeholder", type: "string", default: "Type a command or search...", required: false },
+                { name: "emptyMessage", type: "string", default: "No results found.", required: false },
+                { name: "pages", type: "CommandPage[]", default: "null", required: true },
+                { name: "className", type: "string", default: "null", required: false },
+                { name: "defaultPage", type: "string", default: "null", required: false },
+                { name: "onItemSelect", type: "(item: CommandItemData, pageId: string) => void", default: "null", required: false },
+            ],
+        },
+        desc: null,
+        customize: null
+    },
+    {
+        name: "nested command",
+        value: "nested-command",
+        importPath: "~/components/catalyst-ui/commands/nested-command",
+        path: "/components/catalyst-ui/commands/nested-command.tsx",
+        premium: true,
+        source: null,
+        category: "Commands",
+        tags: ["utils", "auth", "user auth"],
+        features: ["utils", "auth", "user auth"],
+        dependencies: [],
+        basicusage: `
+
+
+  const commandPages = [
+	{
+	  id: 'main',
+	  title: 'Actions',
+	  items: [
+		{
+		  id: 'search-projects',
+		  label: 'Search projects...',
+		  icon: <FolderOpen size={16} />,
+		  navigateTo: 'projects',
+		  shortcut: '⌘P'
+		},
+		{
+		  id: 'join-team',
+		  label: 'Join a team...',
+		  icon: <Users size={16} />,
+		  navigateTo: 'teams',
+		  shortcut: '⌘T'
+		},
+		{
+		  id: 'settings',
+		  label: 'Settings...',
+		  icon: <Settings size={16} />,
+		  navigateTo: 'settings',
+		  shortcut: '⌘,'
+		},
+		{
+		  id: 'theme',
+		  label: 'Change theme...',
+		  icon: <Palette size={16} />,
+		  navigateTo: 'theme',
+		}
+	  ]
+	},
+	{
+	  id: 'projects',
+	  title: 'Projects',
+	  items: [
+		{
+		  id: 'project-a',
+		  label: 'Project Alpha',
+		  icon: <FolderOpen size={16} />,
+		  value: 'React application with TypeScript',
+		  onSelect: () => console.log('Selected Project Alpha')
+		},
+		{
+		  id: 'project-b',
+		  label: 'Project Beta',
+		  icon: <FolderOpen size={16} />,
+		  value: 'Vue.js dashboard application',
+		  onSelect: () => console.log('Selected Project Beta')
+		},
+		{
+		  id: 'project-c',
+		  label: 'Project Gamma',
+		  icon: <FolderOpen size={16} />,
+		  value: 'Next.js e-commerce site',
+		  onSelect: () => console.log('Selected Project Gamma')
+		}
+	  ]
+	},
+	{
+	  id: 'teams',
+	  title: 'Teams',
+	  items: [
+		{
+		  id: 'team-1',
+		  label: 'Frontend Team',
+		  icon: <Users size={16} />,
+		  value: '12 members • Active',
+		  onSelect: () => console.log('Joined Frontend Team')
+		},
+		{
+		  id: 'team-2',
+		  label: 'Backend Team',
+		  icon: <Users size={16} />,
+		  value: '8 members • Active',
+		  onSelect: () => console.log('Joined Backend Team')
+		},
+		{
+		  id: 'team-3',
+		  label: 'Design Team',
+		  icon: <Users size={16} />,
+		  value: '6 members • Active',
+		  onSelect: () => console.log('Joined Design Team')
+		}
+	  ]
+	},
+	{
+	  id: 'settings',
+	  title: 'Settings',
+	  items: [
+		{
+		  id: 'profile',
+		  label: 'Profile Settings',
+		  icon: <Settings size={16} />,
+		  onSelect: () => console.log('Opening Profile Settings')
+		},
+		{
+		  id: 'notifications',
+		  label: 'Notifications',
+		  icon: <Bell size={16} />,
+		  onSelect: () => console.log('Opening Notifications')
+		},
+		{
+		  id: 'security',
+		  label: 'Security & Privacy',
+		  icon: <Shield size={16} />,
+		  onSelect: () => console.log('Opening Security Settings')
+		},
+		{
+		  id: 'help',
+		  label: 'Help & Support',
+		  icon: <HelpCircle size={16} />,
+		  onSelect: () => console.log('Opening Help')
+		}
+	  ]
+	},
+	{
+	  id: 'theme',
+	  title: 'Theme',
+	  items: [
+		{
+		  id: 'light-theme',
+		  label: 'Light Theme',
+		  icon: <Sun size={16} />,
+		  onSelect: () => console.log('Switched to Light Theme')
+		},
+		{
+		  id: 'dark-theme',
+		  label: 'Dark Theme',
+		  icon: <Moon size={16} />,
+		  onSelect: () => console.log('Switched to Dark Theme')
+		}
+	  ]
+	}
+  ];
+
+  const basicPages = [
+	{
+	  id: 'root',
+	  items: [
+		{
+		  id: 'calendar',
+		  label: 'Calendar',
+		  icon: <Calendar size={16} />,
+		  shortcut: '⌘K',
+		  onSelect: () => console.log('Calendar selected')
+		},
+		{
+		  id: 'emoji',
+		  label: 'Search Emoji',
+		  icon: <Search size={16} />,
+		  onSelect: () => console.log('Emoji search selected')
+		},
+		{
+		  id: 'calculator',
+		  label: 'Calculator',
+		  icon: <Calculator size={16} />,
+		  onSelect: () => console.log('Calculator selected')
+		}
+	  ]
+	}
+  ];
+
+  const themePages = [
+	{
+	  id: 'main',
+	  title: 'Quick Actions',
+	  items: [
+		{
+		  id: 'theme-settings',
+		  label: 'Change theme...',
+		  icon: <Palette size={16} />,
+		  navigateTo: 'themes'
+		},
+		{
+		  id: 'home',
+		  label: 'Go to Dashboard',
+		  icon: <Home size={16} />,
+		  shortcut: '⌘H',
+		  onSelect: () => console.log('Going to Dashboard')
+		}
+	  ]
+	},
+	{
+	  id: 'themes',
+	  title: 'Available Themes',
+	  items: [
+		{
+		  id: 'light',
+		  label: 'Light theme',
+		  icon: <Sun size={16} />,
+		  onSelect: () => console.log('Light theme selected')
+		},
+		{
+		  id: 'dark',
+		  label: 'Dark theme',
+		  icon: <Moon size={16} />,
+		  onSelect: () => console.log('Dark theme selected')
+		}
+	  ]
+	}
+  ]
+<NestedCommand
+		pages={commandPages}
+		placeholder="Search..."
+		onItemSelect={(item, pageId) => {
+		  console.log('Selected $ {item.label} from page $ {pageId}');
+		}}
+	  />
+   <NestedCommand
+		pages={basicPages}
+		placeholder="Search..."
+		defaultPage="root"
+	  />
+  <NestedCommand
+		pages={themePages}
+		placeholder="Search theme options..."
+		onItemSelect={(item, pageId) => {
+		  console.log('Theme action: $ {item.label} from $ {pageId}');
+		}}
+	  />`,
+        usage: `
+export function NestedCommandDemo() {
+	const [open, setOpen] = useState(false);
+	const [basicOpen, setBasicOpen] = useState(false);
+	const [themeOpen, setThemeOpen] = useState(false);
+
+	const commandPages: CommandPage[] = [
+		{
+			id: 'main',
+			title: 'Actions',
+			items: [
+				{
+					id: 'search-projects',
+					label: 'Search projects...',
+					icon: <FolderOpen size={16} />,
+					navigateTo: 'projects',
+					shortcut: '⌘P'
+				},
+				{
+					id: 'join-team',
+					label: 'Join a team...',
+					icon: <Users size={16} />,
+					navigateTo: 'teams',
+					shortcut: '⌘T'
+				},
+				{
+					id: 'settings',
+					label: 'Settings...',
+					icon: <Settings size={16} />,
+					navigateTo: 'settings',
+					shortcut: '⌘,'
+				},
+				{
+					id: 'theme',
+					label: 'Change theme...',
+					icon: <Palette size={16} />,
+					navigateTo: 'theme',
+				}
+			]
+		},
+		{
+			id: 'projects',
+			title: 'Projects',
+			items: [
+				{
+					id: 'project-a',
+					label: 'Project Alpha',
+					icon: <FolderOpen size={16} />,
+					value: 'React application with TypeScript',
+					onSelect: () => console.log('Selected Project Alpha')
+				},
+				{
+					id: 'project-b',
+					label: 'Project Beta',
+					icon: <FolderOpen size={16} />,
+					value: 'Vue.js dashboard application',
+					onSelect: () => console.log('Selected Project Beta')
+				},
+				{
+					id: 'project-c',
+					label: 'Project Gamma',
+					icon: <FolderOpen size={16} />,
+					value: 'Next.js e-commerce site',
+					onSelect: () => console.log('Selected Project Gamma')
+				}
+			]
+		},
+		{
+			id: 'teams',
+			title: 'Teams',
+			items: [
+				{
+					id: 'team-1',
+					label: 'Frontend Team',
+					icon: <Users size={16} />,
+					value: '12 members • Active',
+					onSelect: () => console.log('Joined Frontend Team')
+				},
+				{
+					id: 'team-2',
+					label: 'Backend Team',
+					icon: <Users size={16} />,
+					value: '8 members • Active',
+					onSelect: () => console.log('Joined Backend Team')
+				},
+				{
+					id: 'team-3',
+					label: 'Design Team',
+					icon: <Users size={16} />,
+					value: '6 members • Active',
+					onSelect: () => console.log('Joined Design Team')
+				}
+			]
+		},
+		{
+			id: 'settings',
+			title: 'Settings',
+			items: [
+				{
+					id: 'profile',
+					label: 'Profile Settings',
+					icon: <Settings size={16} />,
+					onSelect: () => console.log('Opening Profile Settings')
+				},
+				{
+					id: 'notifications',
+					label: 'Notifications',
+					icon: <Bell size={16} />,
+					onSelect: () => console.log('Opening Notifications')
+				},
+				{
+					id: 'security',
+					label: 'Security & Privacy',
+					icon: <Shield size={16} />,
+					onSelect: () => console.log('Opening Security Settings')
+				},
+				{
+					id: 'help',
+					label: 'Help & Support',
+					icon: <HelpCircle size={16} />,
+					onSelect: () => console.log('Opening Help')
+				}
+			]
+		},
+		{
+			id: 'theme',
+			title: 'Theme',
+			items: [
+				{
+					id: 'light-theme',
+					label: 'Light Theme',
+					icon: <Sun size={16} />,
+					onSelect: () => console.log('Switched to Light Theme')
+				},
+				{
+					id: 'dark-theme',
+					label: 'Dark Theme',
+					icon: <Moon size={16} />,
+					onSelect: () => console.log('Switched to Dark Theme')
+				}
+			]
+		}
+	];
+
+	const basicPages: CommandPage[] = [
+		{
+			id: 'root',
+			items: [
+				{
+					id: 'calendar',
+					label: 'Calendar',
+					icon: <Calendar size={16} />,
+					shortcut: '⌘K',
+					onSelect: () => console.log('Calendar selected')
+				},
+				{
+					id: 'emoji',
+					label: 'Search Emoji',
+					icon: <Search size={16} />,
+					onSelect: () => console.log('Emoji search selected')
+				},
+				{
+					id: 'calculator',
+					label: 'Calculator',
+					icon: <Calculator size={16} />,
+					onSelect: () => console.log('Calculator selected')
+				}
+			]
+		}
+	];
+
+	const themePages: CommandPage[] = [
+		{
+			id: 'main',
+			title: 'Quick Actions',
+			items: [
+				{
+					id: 'theme-settings',
+					label: 'Change theme...',
+					icon: <Palette size={16} />,
+					navigateTo: 'themes'
+				},
+				{
+					id: 'home',
+					label: 'Go to Dashboard',
+					icon: <Home size={16} />,
+					shortcut: '⌘H',
+					onSelect: () => console.log('Going to Dashboard')
+				}
+			]
+		},
+		{
+			id: 'themes',
+			title: 'Available Themes',
+			items: [
+				{
+					id: 'light',
+					label: 'Light theme',
+					icon: <Sun size={16} />,
+					onSelect: () => console.log('Light theme selected')
+				},
+				{
+					id: 'dark',
+					label: 'Dark theme',
+					icon: <Moon size={16} />,
+					onSelect: () => console.log('Dark theme selected')
+				}
+			]
+		}
+	];
+
+	return (
+		<div className="max-w-4xl mx-auto p-6 space-y-8 bg-background text-foreground">
+			<div className="text-center">
+				<h1 className="text-3xl font-bold mb-2">NestedCommand Component</h1>
+				<p className="text-muted-foreground">A command palette with nested navigation support</p>
+			</div>
+
+			<div className="space-y-6">
+				<div className="space-y-4">
+					<h2 className="text-xl font-semibold">Complex Nested Command</h2>
+					<p className="text-sm text-muted-foreground">
+						Navigate through multiple levels: Projects, Teams, Settings, and Theme selection
+					</p>
+					<NestedCommand
+						pages={commandPages}
+						placeholder="Search..."
+						onItemSelect={(item, pageId) => {
+						}}
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h2 className="text-xl font-semibold">Basic Command (No Nesting)</h2>
+					<p className="text-sm text-muted-foreground">
+						Simple command palette without navigation
+					</p>
+					<NestedCommand
+						pages={basicPages}
+						placeholder="Search..."
+						defaultPage="root"
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h2 className="text-xl font-semibold">Theme Selector Example</h2>
+					<p className="text-sm text-muted-foreground">
+						Example showing theme selection with navigation (like the original pattern)
+					</p>
+					<NestedCommand
+						pages={themePages}
+						placeholder="Search theme options..."
+						onItemSelect={(item, pageId) => {
+						}}
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h2 className="text-xl font-semibold">Navigation Instructions</h2>
+					<div className="text-sm text-muted-foreground space-y-1">
+						<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Escape</kbd> - Go back or close</p>
+						<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Backspace</kbd> - Go back when search is empty</p>
+						<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">Enter</kbd> - Select item or navigate deeper</p>
+						<p><kbd className="px-1 py-0.5 bg-muted rounded text-xs">↑↓</kbd> - Navigate items</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}`,
+        usagePath: null,
+        props: {
+            "NestedCommand": [
+                { name: "placeholder", type: "string", default: "Search...", required: false },
+                { name: "emptyMessage", type: "string", default: "No results found.", required: false },
+                { name: "pages", type: "CommandPage[]", default: "null", required: true },
+                { name: "className", type: "string", default: "null", required: false },
+                { name: "defaultPage", type: "string", default: "null", required: false },
+                { name: "MHList", type: "string", default: "max-h-[575px]", required: false },
+                { name: "onItemSelect", type: "(item: CommandItemData, pageId: string) => void", default: "null", required: false },
+            ],
+        },
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Command V2",
+        value: "command-2",
+        importPath: "~/components/catalyst-ui/commands/command-2",
+        multiImport: null,
+        basicusage: `
+const items = [
+  {
+    id: "1",
+    label: "Profile",
+    value: "profile",
+    icon: <Search className="h-4 w-4" />,
+    shortcut: "⌘P",
+    group: "Settings"
+  },
+];
+
+<CommandV2
+  items={items} 
+  onItemSelect={(item) => console.log(item)}
+  placeholder="Search..." // not req
+  className="" // not req
+  maxHeight="max-h-[400px]" // not req
+/>`,
+        path: "/components/catalyst-ui/commands/command-2.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/commands/command-2.tsx",
+        usage: null,
+        premium: true,
+        category: "Commands",
+        tags: ["command", "search", "dialog", "navigation"],
+        features: ["Responsive", "TypeScript", "Accessible", "Keyboard Navigation"],
+        dependencies: ["lucide-react", "react"],
+        props: {
+            "Command": [
+                { name: "variant", type: "'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | 'search'", default: "'default'" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "label", type: "string", default: "undefined", description: "Accessible label for the command menu" },
+                { name: "shouldFilter", type: "boolean", default: "true", description: "Enable/disable built-in filtering" },
+                { name: "filter", type: "(value: string, search: string, keywords?: string[]) => number", default: "undefined", description: "Custom filter function" },
+                { name: "defaultValue", type: "string", default: "undefined", description: "Default selected item value" },
+                { name: "value", type: "string", default: "undefined", description: "Controlled selected item value" },
+                { name: "onValueChange", type: "(value: string) => void", default: "undefined", description: "Callback when selected value changes" },
+                { name: "loop", type: "boolean", default: "false", description: "Enable keyboard navigation loop" },
+                { name: "disablePointerSelection", type: "boolean", default: "false", description: "Disable pointer-based selection" },
+                { name: "vimBindings", type: "boolean", default: "true", description: "Enable vim-style keyboard bindings" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive>", default: "undefined" },
+            ],
+            "CommandInput": [
+                { name: "placeholder", type: "string", default: "'Search...'" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "value", type: "string", default: "undefined", description: "Controlled input value" },
+                { name: "onValueChange", type: "(search: string) => void", default: "undefined", description: "Callback when input value changes" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>", default: "undefined" },
+            ],
+            "CommandList": [
+                { name: "MHList", type: "string", default: "'max-h-[700px]'" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "label", type: "string", default: "undefined", description: "Accessible label for the list" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>", default: "undefined" },
+            ],
+            "CommandEmpty": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined", description: "Content to show when no results" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>", default: "undefined" },
+            ],
+            "CommandGroup": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "heading", type: "string", default: "undefined", description: "Group heading text" },
+                { name: "value", type: "string", default: "undefined", description: "Optional value for the group" },
+                { name: "forceMount", type: "boolean", default: "undefined", description: "Force mount the group even when empty" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>", default: "undefined" },
+            ],
+            "CommandItem": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "value", type: "string", default: "undefined", description: "Value for filtering and selection" },
+                { name: "keywords", type: "string[]", default: "undefined", description: "Additional keywords for filtering" },
+                { name: "onSelect", type: "(value: string) => void", default: "undefined", description: "Callback when item is selected" },
+                { name: "disabled", type: "boolean", default: "false", description: "Disable the item" },
+                { name: "forceMount", type: "boolean", default: "undefined", description: "Force mount the item" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>", default: "undefined" },
+            ],
+            "CommandShortcut": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "...props", type: "React.HTMLAttributes<HTMLSpanElement>", default: "undefined" },
+            ],
+            "CommandSeparator": [
+                { name: "className", type: "string", default: "undefined" },
+                { name: "alwaysRender", type: "boolean", default: "false", description: "Render separator even when adjacent to hidden items" },
+                { name: "...props", type: "React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>", default: "undefined" },
+            ],
+            "CommandDialog": [
+                { name: "variant", type: "'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | 'search'", default: "'default'" },
+                { name: "buttonChildren", type: "React.ReactNode", default: "undefined" },
+                { name: "children", type: "React.ReactNode", default: "undefined" },
+                { name: "open", type: "boolean", default: "undefined", description: "Controlled open state" },
+                { name: "onOpenChange", type: "(open: boolean) => void", default: "undefined", description: "Callback when open state changes" },
+                { name: "...props", type: "React.ComponentProps<typeof Dialog>", default: "undefined" },
+            ],
+            "CommandDialogButton": [
+                { name: "variant", type: "string", default: "'outline'" },
+                { name: "setOpen", type: "(open: boolean) => void", default: "undefined" },
+                { name: "buttonChildren", type: "React.ReactNode", default: "undefined" },
+                { name: "...buttonProps", type: "any", default: "undefined" },
+            ],
+            "CommandDialogCustom": [
+                { name: "variant", type: "'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | 'search'", default: "'default'" },
+                { name: "children", type: "React.ReactNode", default: "undefined" },
+                { name: "open", type: "boolean", default: "undefined", description: "Controlled open state" },
+                { name: "onOpenChange", type: "(open: boolean) => void", default: "undefined", description: "Callback when open state changes" },
+                { name: "...props", type: "any", default: "undefined" },
+            ],
+            "NestedCommand": [
+                { name: "variant", type: "'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | 'search'", default: "'default'" },
+                { name: "open", type: "boolean", default: "undefined" },
+                { name: "onOpenChange", type: "(open: boolean) => void", default: "undefined" },
+                { name: "placeholder", type: "string", default: "'Search...'" },
+                { name: "emptyMessage", type: "string", default: "'No results found.'" },
+                { name: "pages", type: "CommandPage[]", default: "required" },
+                { name: "className", type: "string", default: "undefined" },
+                { name: "defaultPage", type: "string", default: "undefined" },
+                { name: "MHList", type: "string", default: "'max-h-[700px]'" },
+                { name: "onItemSelect", type: "(item: CommandItemData, pageId: string) => void", default: "undefined" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "nested command-dialog",
+        value: "nested-command-dialog",
+        importPath: "~/components/catalyst-ui/commands/nested-command-dialog",
+        path: "/components/catalyst-ui/components/overlay/nested-command-dialog.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+
+interface CommandItemData {
+  id: string;
+  label: string;
+  value?: string;
+  icon?: React.ReactNode;
+  onSelect?: () => void;
+  navigateTo?: string;
+  shortcut?: string;
+  disabled?: boolean;
+}
+
+interface CommandPage {
+  id: string;
+  title?: string;
+  items: CommandItemData[];
+  backLabel?: string;
+}
+
+interface NestedCommandProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placeholder?: string;
+  emptyMessage?: string;
+  pages: CommandPage[];
+  className?: string;
+  defaultPage?: string;
+  onItemSelect?: (item: CommandItemData, pageId: string) => void;
+}
+
+export function NestedCommandDialog({
+  open = false,
+  onOpenChange,
+  placeholder = "Type a command or search...",
+  emptyMessage = "No results found.",
+  pages,
+  className,
+  defaultPage,
+  onItemSelect,
+}: NestedCommandProps) {
+  const [search, setSearch] = useState('');
+  const [pageStack, setPageStack] = useState<string[]>(defaultPage ? [defaultPage] : []);
+  const ref = useRef(null);
+  
+  const currentPage = pageStack.length > 0 ? pages.find(p => p.id === pageStack[pageStack.length - 1]) : null;
+  const isRootPage = pageStack.length === 0;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
+      e.preventDefault();
+      if (pageStack.length > 0) {
+        setPageStack(pages => pages.slice(0, -1));
+      }
+    }
+  };
+
+  const handleItemSelect = (item: CommandItemData) => {
+    if (item.disabled) return;
+
+    if (item.navigateTo) {
+      const targetPage = pages.find(p => p.id === item.navigateTo);
+      if (targetPage) {
+        setPageStack(prev => [...prev, item.navigateTo!]);
+        setSearch('');
+      }
+    } else {
+      item.onSelect?.();
+      const pageId = currentPage?.id || (isRootPage ? 'root' : '');
+      onItemSelect?.(item, pageId);
+      if (onOpenChange) {
+        onOpenChange(false);
+      }
+    }
+  };
+
+  const renderItems = () => {
+    if (!currentPage && isRootPage) {
+      return pages.map(page => (
+        <CommandGroup key={page.id} heading={page.title}>
+          {page.items.map((item) => (
+            <CommandItem
+              key={item.id}
+              onSelect={() => handleItemSelect(item)}
+              disabled={item.disabled}
+              className="flex items-center gap-2"
+            >
+              {item.icon}
+              <span className="flex-1">{item.label}</span>
+              {item.navigateTo && <ChevronRight size={14} className="text-muted-foreground" />}
+              {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      ));
+    }
+
+    if (!currentPage) return null;
+
+    return (
+      <CommandGroup heading={currentPage.title}>
+        {currentPage.items.map((item) => (
+          <CommandItem
+            key={item.id}
+            onSelect={() => handleItemSelect(item)}
+            disabled={item.disabled}
+            className="flex items-center gap-2"
+          >
+            {item.icon}
+            <span className="flex-1">{item.label}</span>
+            {item.navigateTo && <ChevronRight size={14} className="text-muted-foreground" />}
+            {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+          </CommandItem>
+        ))}
+      </CommandGroup>
+    );
+  };
+
+  return (
+    <CommandDialogCustom open={open} onOpenChange={onOpenChange}>
+      <Command ref={ref} onKeyDown={handleKeyDown} className={className}>
+        <CommandInput
+          placeholder={placeholder}
+          value={search}
+          onValueChange={setSearch}
+        />
+        <CommandList>
+          <CommandEmpty>{emptyMessage}</CommandEmpty>
+          {renderItems()}
+        </CommandList>
+      </Command>
+    </CommandDialogCustom>
+  );
+}`,
+        usage: `
+  const [open, setOpen] = useState(false);
+  const [basicOpen, setBasicOpen] = useState(false);
+  const [themeOpen, setThemeOpen] = useState(false);
+
+  const commandPages = [
+    {
+      id: 'main',
+      title: 'Actions',
+      items: [
+        {
+          id: 'search-projects',
+          label: 'Search projects...',
+          icon: <FolderOpen size={16} />,
+          navigateTo: 'projects',
+          shortcut: '⌘P'
+        },
+        {
+          id: 'join-team',
+          label: 'Join a team...',
+          icon: <Users size={16} />,
+          navigateTo: 'teams',
+          shortcut: '⌘T'
+        },
+        {
+          id: 'settings',
+          label: 'Settings...',
+          icon: <Settings size={16} />,
+          navigateTo: 'settings',
+          shortcut: '⌘,'
+        },
+        {
+          id: 'theme',
+          label: 'Change theme...',
+          icon: <Palette size={16} />,
+          navigateTo: 'theme',
+        }
+      ]
+    },
+    {
+      id: 'projects',
+      title: 'Projects',
+      items: [
+        {
+          id: 'project-a',
+          label: 'Project Alpha',
+          icon: <FolderOpen size={16} />,
+          value: 'React application with TypeScript',
+          onSelect: () => console.log('Selected Project Alpha')
+        },
+        {
+          id: 'project-b',
+          label: 'Project Beta',
+          icon: <FolderOpen size={16} />,
+          value: 'Vue.js dashboard application',
+          onSelect: () => console.log('Selected Project Beta')
+        },
+        {
+          id: 'project-c',
+          label: 'Project Gamma',
+          icon: <FolderOpen size={16} />,
+          value: 'Next.js e-commerce site',
+          onSelect: () => console.log('Selected Project Gamma')
+        }
+      ]
+    },
+    {
+      id: 'teams',
+      title: 'Teams',
+      items: [
+        {
+          id: 'team-1',
+          label: 'Frontend Team',
+          icon: <Users size={16} />,
+          value: '12 members • Active',
+          onSelect: () => console.log('Joined Frontend Team')
+        },
+        {
+          id: 'team-2',
+          label: 'Backend Team',
+          icon: <Users size={16} />,
+          value: '8 members • Active',
+          onSelect: () => console.log('Joined Backend Team')
+        },
+        {
+          id: 'team-3',
+          label: 'Design Team',
+          icon: <Users size={16} />,
+          value: '6 members • Active',
+          onSelect: () => console.log('Joined Design Team')
+        }
+      ]
+    },
+    {
+      id: 'settings',
+      title: 'Settings',
+      items: [
+        {
+          id: 'profile',
+          label: 'Profile Settings',
+          icon: <Settings size={16} />,
+          onSelect: () => console.log('Opening Profile Settings')
+        },
+        {
+          id: 'notifications',
+          label: 'Notifications',
+          icon: <Bell size={16} />,
+          onSelect: () => console.log('Opening Notifications')
+        },
+        {
+          id: 'security',
+          label: 'Security & Privacy',
+          icon: <Shield size={16} />,
+          onSelect: () => console.log('Opening Security Settings')
+        },
+        {
+          id: 'help',
+          label: 'Help & Support',
+          icon: <HelpCircle size={16} />,
+          onSelect: () => console.log('Opening Help')
+        }
+      ]
+    },
+    {
+      id: 'theme',
+      title: 'Theme',
+      items: [
+        {
+          id: 'light-theme',
+          label: 'Light Theme',
+          icon: <Sun size={16} />,
+          onSelect: () => console.log('Switched to Light Theme')
+        },
+        {
+          id: 'dark-theme',
+          label: 'Dark Theme',
+          icon: <Moon size={16} />,
+          onSelect: () => console.log('Switched to Dark Theme')
+        }
+      ]
+    }
+  ];
+
+  const basicPages = [
+    {
+      id: 'root',
+      items: [
+        {
+          id: 'calendar',
+          label: 'Calendar',
+          icon: <Calendar size={16} />,
+          shortcut: '⌘K',
+          onSelect: () => console.log('Calendar selected')
+        },
+        {
+          id: 'emoji',
+          label: 'Search Emoji',
+          icon: <Search size={16} />,
+          onSelect: () => console.log('Emoji search selected')
+        },
+        {
+          id: 'calculator',
+          label: 'Calculator',
+          icon: <Calculator size={16} />,
+          onSelect: () => console.log('Calculator selected')
+        }
+      ]
+    }
+  ];
+
+  const themePages = [
+    {
+      id: 'main',
+      title: 'Quick Actions',
+      items: [
+        {
+          id: 'theme-settings',
+          label: 'Change theme...',
+          icon: <Palette size={16} />,
+          navigateTo: 'themes'
+        },
+        {
+          id: 'home',
+          label: 'Go to Dashboard',
+          icon: <Home size={16} />,
+          shortcut: '⌘H',
+          onSelect: () => console.log('Going to Dashboard')
+        }
+      ]
+    },
+    {
+      id: 'themes',
+      title: 'Available Themes',
+      items: [
+        {
+          id: 'light',
+          label: 'Light theme',
+          icon: <Sun size={16} />,
+          onSelect: () => console.log('Light theme selected')
+        },
+        {
+          id: 'dark',
+          label: 'Dark theme',
+          icon: <Moon size={16} />,
+          onSelect: () => console.log('Dark theme selected')
+        }
+      ]
+    }
+  ]
+<Button onClick={() => setOpen(true)} variant="outline">
+            Open Complex Command
+            <CommandShortcut>⌘K</CommandShortcut>
+          </Button>
+  <Button onClick={() => setBasicOpen(true)} variant="outline">
+            Open Basic Command
+          </Button>
+   <Button onClick={() => setThemeOpen(true)} variant="outline">
+            Open Theme Command
+          </Button>
+      <NestedCommandDialog
+        open={open}
+        onOpenChange={setOpen}
+        pages={commandPages}
+        placeholder="Type a command or search..."
+        onItemSelect={(item, pageId) => {
+          console.log();
+        }}
+      />
+
+      <NestedCommandDialog
+        open={basicOpen}
+        onOpenChange={setBasicOpen}
+        pages={basicPages}
+        placeholder="Search commands..."
+        defaultPage="root"
+      />
+
+      <NestedCommandDialog
+        open={themeOpen}
+        onOpenChange={setThemeOpen}
+        pages={themePages}
+        placeholder="Search theme options..."
+        onItemSelect={(item, pageId) => {
+          console.log();
+        }}
+      />
+`,
+        usagePath: null,
+        category: "Commands",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { "name": "open", "type": "boolean", "default": "false" },
+            { "name": "onOpenChange", "type": "(open: boolean) => void", "default": "undefined" },
+            { "name": "placeholder", "type": "string", "default": "\"Type a command or search...\"" },
+            { "name": "emptyMessage", "type": "string", "default": "\"No results found.\"" },
+            { "name": "pages", "type": "CommandPage[]", "default": "undefined", "required": true },
+            { "name": "className", "type": "string", "default": "undefined" },
+            { "name": "defaultPage", "type": "string", "default": "undefined" },
+            { "name": "onItemSelect", "type": "(item: CommandItemData, pageId: string) => void", "default": "undefined" }
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];