@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/command-data.tsx

@@ -1,1381 +0,0 @@
-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
-    },
-];