@catalystsoftware/ui 1.0.5 → 1.0.7

package/data/comboboxes-data.tsx

@@ -1,1843 +0,0 @@
-// EmojiPicker
-export const comboboxes = [
-    {
-        name: "filter combobox",
-        value: "filter-combobox",
-        importPath: "~/components/catalyst-ui/comboboxes/filter-combobox",
-        path: "/components/catalyst-ui/comboboxes/filter-combobox.tsx",
-        premium: true,
-        source: null,
-        basicusage: `
-
-
-const [selectedStatus, setSelectedStatus] = useState("");
-const [error, setError] = useState("");
-
-const statusOptions = [
-  { value: "active", label: "Active" },
-  { value: "inactive", label: "Inactive" },
-  { value: "pending", label: "Pending" },
-  { value: "completed", label: "Completed" },
-  { value: "cancelled", label: "Cancelled" }
-];
-
-const handleChange = (value: string) => {
-  setSelectedStatus(value);
-  
-  if (!value) {
-    setError("Please select a status");
-  } else {
-    setError("");
-  }
-};
-
-// Basic usage without validation
-<Field>
-  <FieldLabel>Status</FieldLabel>
-  <FilterCombobox
-    placeholder="Select Status"
-    options={statusOptions}
-    value={selectedStatus}
-    onValueChange={setSelectedStatus}
-  />
-  <FieldDescription>Choose a status option</FieldDescription>
-</Field>
-
-// With validation
-<Field>
-  <FieldLabel>Status</FieldLabel>
-  <FilterCombobox
-    placeholder="Select Status"
-    options={statusOptions}
-    value={selectedStatus}
-    onValueChange={handleChange}
-  />
-  <FieldDescription>Choose a status option</FieldDescription>
-  {error && <FieldError>{error}</FieldError>}
-</Field>`,
-        usage: `
-const statusOptions = [
-  { value: "active", label: "Active" },
-  { value: "inactive", label: "Inactive" },
-  { value: "pending", label: "Pending" },
-  { value: "completed", label: "Completed" },
-  { value: "cancelled", label: "Cancelled" }
-];
-
-<FilterCombobox
-  placeholder="Select Status"
-  options={statusOptions}
-  value={selectedStatus}
-  onValueChange={setSelectedStatus}
-/>
-
-const categoryOptions = [
-  { value: "electronics", label: "Electronics" },
-  { value: "clothing", label: "Clothing" },
-  { value: "books", label: "Books" },
-  { value: "home", label: "Home & Garden" },
-  { value: "sports", label: "Sports" },
-  { value: "beauty", label: "Beauty" }
-];
-
-<FilterCombobox
-  placeholder="Select Category"
-  options={categoryOptions}
-  value={selectedCategory}
-  onValueChange={setSelectedCategory}
-/>
-
-const priorityOptions = [
-  { value: "high", label: "High Priority" },
-  { value: "medium", label: "Medium Priority" },
-  { value: "low", label: "Low Priority" },
-  { value: "urgent", label: "Urgent" }
-];
-
-<FilterCombobox
-  placeholder="Select Priority"
-  options={priorityOptions}
-  value={selectedPriority}
-  onValueChange={setSelectedPriority}
-/>
-
-const dateOptions = [
-  { value: "today", label: "Today" },
-  { value: "yesterday", label: "Yesterday" },
-  { value: "this_week", label: "This Week" },
-  { value: "last_week", label: "Last Week" },
-  { value: "this_month", label: "This Month" },
-  { value: "last_month", label: "Last Month" },
-  { value: "custom", label: "Custom Range" }
-];
-
-<FilterCombobox
-  placeholder="Select Date Range"
-  options={dateOptions}
-  value={selectedDateRange}
-  onValueChange={setSelectedDateRange}
-/>
-
-const sortOptions = [
-  { value: "newest", label: "Newest First" },
-  { value: "oldest", label: "Oldest First" },
-  { value: "name_asc", label: "Name (A-Z)" },
-  { value: "name_desc", label: "Name (Z-A)" },
-  { value: "price_low", label: "Price: Low to High" },
-  { value: "price_high", label: "Price: High to Low" }
-];
-
-<FilterCombobox
-  placeholder="Sort By"
-  options={sortOptions}
-  value={selectedSort}
-  onValueChange={setSelectedSort}
-/>
-
-const locationOptions = [
-  { value: "new_york", label: "New York" },
-  { value: "los_angeles", label: "Los Angeles" },
-  { value: "chicago", label: "Chicago" },
-  { value: "houston", label: "Houston" },
-  { value: "phoenix", label: "Phoenix" },
-  { value: "miami", label: "Miami" }
-];
-
-<FilterCombobox
-  placeholder="Select Location"
-  options={locationOptions}
-  value={selectedLocation}
-  onValueChange={setSelectedLocation}
-/>
-
-const booleanOptions = [
-  { value: "true", label: "Yes" },
-  { value: "false", label: "No" },
-  { value: "both", label: "Both" }
-];
-
-<FilterCombobox
-  placeholder="Has Image?"
-  options={booleanOptions}
-  value={hasImage}
-  onValueChange={setHasImage}
-/>
-
-export function FilterComboboxDemo() {
-  const [selectedStatus, setSelectedStatus] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState("");
-
-  const statusOptions = [
-	{ value: "active", label: "Active" },
-	{ value: "inactive", label: "Inactive" },
-	{ value: "pending", label: "Pending" }
-  ];
-
-  const categoryOptions = [
-	{ value: "electronics", label: "Electronics" },
-	{ value: "clothing", label: "Clothing" },
-	{ value: "books", label: "Books" }
-  ];
-
-  return (
-	<div className="flex gap-4">
-	  <FilterCombobox
-		placeholder="Select Status"
-		options={statusOptions}
-		value={selectedStatus}
-		onValueChange={setSelectedStatus}
-	  />
-	  
-	  <FilterCombobox
-		placeholder="Select Category"
-		options={categoryOptions}
-		value={selectedCategory}
-		onValueChange={setSelectedCategory}
-		className="w-[250px]"
-	  />
-	</div>
-  );
-}
-`,
-        usagePath: null,
-        category: "Comboboxes",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["@radix-ui/react-aspect-ratio"],
-        props: {
-            "FilterCombobox": [
-                { name: "placeholder", type: "string", default: "null", required: true },
-                { name: "options", type: "Array<{ value: string; label: string }>", default: "null", required: true },
-                { name: "value", type: "string", default: "null", required: false },
-                { name: "onValueChange", type: "(value: string) => void", default: "null", required: false },
-                { name: "className", type: "string", default: "''", required: false },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Combobox0",
-        value: "combobox-0",
-        importPath: "~/components/catalyst-ui/comboboxes/combobox-0",
-        path: "/components/catalyst-ui/comboboxes/combobox-0.tsx",
-        premium: false,
-        source: "/components/catalyst-ui/comboboxes/combobox-0.tsx",
-        category: "Comboboxes",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react", "cmdk", "@radix-ui/react-popover"],
-        basicusage: `
-
-
-
-
-
-
-
-const frameworks = [
-  {
-	value: "next.js",
-	label: "Next.js",
-  },
-  {
-	value: "sveltekit",
-	label: "SvelteKit",
-  },
-  {
-	value: "nuxt.js",
-	label: "Nuxt.js",
-  },
-  {
-	value: "remix",
-	label: "Remix",
-  },
-  {
-	value: "astro",
-	label: "Astro",
-  },
-]
-
-export function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-	<Popover open={open} onOpenChange={setOpen}>
-	  <PopoverTrigger asChild>
-		<Button
-		  variant="outline"
-		  role="combobox"
-		  aria-expanded={open}
-		  className="w-[200px] justify-between"
-		>
-		  {value
-			? frameworks.find((framework) => framework.value === value)?.label
-			: "Select framework..."}
-		  <ChevronsUpDown className="opacity-50" />
-		</Button>
-	  </PopoverTrigger>
-	  <PopoverContent className="w-[200px] p-0">
-		<Command>
-		  <CommandInput placeholder="Search framework..." className="h-9" />
-		  <CommandList>
-			<CommandEmpty>No framework found.</CommandEmpty>
-			<CommandGroup>
-			  {frameworks.map((framework) => (
-				<CommandItem
-				  key={framework.value}
-				  value={framework.value}
-				  onSelect={(currentValue) => {
-					setValue(currentValue === value ? "" : currentValue)
-					setOpen(false)
-				  }}
-				>
-				  {framework.label}
-				  <Check
-					className={cn(
-					  "ml-auto",
-					  value === framework.value ? "opacity-100" : "opacity-0"
-					)}
-				  />
-				</CommandItem>
-			  ))}
-			</CommandGroup>
-		  </CommandList>
-		</Command>
-	  </PopoverContent>
-	</Popover>
-  )
-}
-`,
-        usage: null,
-        usagePath: null,
-        props: {},
-        desc: 'Orginal shadCN component structure',
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Combobox V1",
-        value: "combobox-1",
-        importPath: "~/components/catalyst-ui/comboboxes/combobox-1",
-        path: "/components/catalyst-ui/comboboxes/combobox-1.tsx",
-        premium: true,
-        source: null,
-        category: "Comboboxes",
-        tags: ["ui", "forms", "core"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        usage: `
-	
-	
-	
-	
-	
-	
-	export const meta: MetaFunction = () => {
-	  return [
-		{ title: "Comboboxes Demo" },
-		{ name: "description", content: "Demo of combobox components with various styles and functionality" },
-	  ]
-	}
-	
-	export default function ComboboxesDemo() {
-	  const [selectedCountry, setSelectedCountry] = useState("")
-	  const [selectedCategory, setSelectedCategory] = useState("")
-	  const [selectedStatus, setSelectedStatus] = useState("")
-	  const [selectedTags, setSelectedTags] = useState<string[]>([])
-	  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
-	  const [searchQuery, setSearchQuery] = useState("")
-	
-	  // Sample data
-	  const countries = [
-		{ value: "us", label: "United States" },
-		{ value: "ca", label: "Canada" },
-		{ value: "uk", label: "United Kingdom" },
-		{ value: "au", label: "Australia" },
-		{ value: "de", label: "Germany" },
-		{ value: "fr", label: "France" },
-		{ value: "jp", label: "Japan" },
-		{ value: "br", label: "Brazil" },
-	  ]
-	
-	  const categories = [
-		{ value: "electronics", label: "Electronics" },
-		{ value: "clothing", label: "Clothing" },
-		{ value: "books", label: "Books" },
-		{ value: "home", label: "Home & Garden" },
-		{ value: "sports", label: "Sports & Outdoors" },
-		{ value: "beauty", label: "Beauty & Personal Care" },
-		{ value: "toys", label: "Toys & Games" },
-	  ]
-	
-	  const statuses = [
-		{ value: "active", label: "Active" },
-		{ value: "pending", label: "Pending" },
-		{ value: "draft", label: "Draft" },
-		{ value: "archived", label: "Archived" },
-	  ]
-	
-	  const tags = [
-		{ value: "featured", label: "Featured" },
-		{ value: "sale", label: "On Sale" },
-		{ value: "new", label: "New Arrival" },
-		{ value: "popular", label: "Popular" },
-		{ value: "limited", label: "Limited Edition" },
-		{ value: "clearance", label: "Clearance" },
-	  ]
-	
-	  const users = [
-		{ value: "alice", label: "Alice Johnson", email: "alice@example.com" },
-		{ value: "bob", label: "Bob Smith", email: "bob@example.com" },
-		{ value: "carol", label: "Carol Williams", email: "carol@example.com" },
-		{ value: "dave", label: "Dave Brown", email: "dave@example.com" },
-		{ value: "eve", label: "Eve Davis", email: "eve@example.com" },
-		{ value: "frank", label: "Frank Miller", email: "frank@example.com" },
-	  ]
-	
-	  // Sample products data
-	  const products = [
-		{ id: 1, name: "Wireless Headphones", category: "electronics", tags: ["featured", "new"], status: "active", country: "us" },
-		{ id: 2, name: "Cotton T-Shirt", category: "clothing", tags: ["sale"], status: "active", country: "ca" },
-		{ id: 3, name: "Programming Book", category: "books", tags: ["popular"], status: "draft", country: "uk" },
-		{ id: 4, name: "Desk Lamp", category: "home", tags: ["new"], status: "active", country: "de" },
-		{ id: 5, name: "Yoga Mat", category: "sports", tags: ["featured", "sale"], status: "active", country: "us" },
-		{ id: 6, name: "Face Cream", category: "beauty", tags: ["new", "limited"], status: "pending", country: "fr" },
-		{ id: 7, name: "Board Game", category: "toys", tags: ["popular", "clearance"], status: "active", country: "ca" },
-		{ id: 8, name: "Smart Watch", category: "electronics", tags: ["featured", "new"], status: "archived", country: "jp" },
-	  ]
-	
-	  // Filter products based on selected filters and search query
-	  const filteredProducts = products.filter(product => {
-		// Filter by category if selected
-		if (selectedCategory && product.category !== selectedCategory) return false
-		
-		// Filter by status if selected
-		if (selectedStatus && product.status !== selectedStatus) return false
-		
-		// Filter by country if selected
-		if (selectedCountry && product.country !== selectedCountry) return false
-		
-		// Filter by tags if selected
-		if (selectedTags.length > 0 && !selectedTags.some(tag => product.tags.includes(tag))) return false
-		
-		// Filter by search query
-		if (searchQuery && !product.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
-		
-		return true
-	  })
-	
-	  return (
-		<div className="container mx-auto py-10 px-4 max-w-6xl">
-		  <div className="mb-10">
-			<h1 className="text-3xl font-bold text-foreground mb-2">Combobox Components</h1>
-			<p className="text-muted-foreground">
-			  Various combobox styles and implementations with functional examples.
-			</p>
-		  </div>
-	
-		  {/* Filterable Products Section */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Product Filter with Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-			  {/* Search Input */}
-			  <div className="lg:col-span-2">
-				<div className="relative">
-				  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-				  <input
-					type="text"
-					placeholder="Search products..."
-					className="w-full pl-10 pr-4 py-2 border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-					value={searchQuery}
-					onChange={(e) => setSearchQuery(e.target.value)}
-				  />
-				</div>
-			  </div>
-	
-			  {/* Category Combobox */}
-			  <div>
-				<Combobox
-				  items={categories}
-				  value={selectedCategory}
-				  onValueChange={setSelectedCategory}
-				  placeholder="Select category"
-				  searchPlaceholder="Search categories..."
-				/>
-			  </div>
-	
-			  {/* Status Combobox */}
-			  <div>
-				<Combobox
-				  items={statuses}
-				  value={selectedStatus}
-				  onValueChange={setSelectedStatus}
-				  placeholder="Select status"
-				  searchPlaceholder="Search statuses..."
-				/>
-			  </div>
-	
-			  {/* Country Combobox */}
-			  <div>
-				<Combobox
-				  items={countries}
-				  value={selectedCountry}
-				  onValueChange={setSelectedCountry}
-				  placeholder="Select country"
-				  searchPlaceholder="Search countries..."
-				/>
-			  </div>
-	
-			  {/* Tags MultiCombobox */}
-			  <div className="lg:col-span-2">
-				<MultiCombobox
-				  items={tags}
-				  value={selectedTags}
-				  onValueChange={setSelectedTags}
-				  placeholder="Select tags"
-				  searchPlaceholder="Search tags..."
-				/>
-			  </div>
-			</div>
-	
-			{/* Results */}
-			<div>
-			  <h3 className="text-lg font-medium text-foreground mb-4">
-				Products ({filteredProducts.length} items)
-			  </h3>
-			  
-			  {filteredProducts.length === 0 ? (
-				<p className="text-muted-foreground">No products match your filters.</p>
-			  ) : (
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				  {filteredProducts.map(product => (
-					<div key={product.id} className="border rounded-lg p-4 bg-background">
-					  <h4 className="font-medium text-foreground mb-2">{product.name}</h4>
-					  <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
-						<div>
-						  <span className="font-medium">Category:</span> {product.category}
-						</div>
-						<div>
-						  <span className="font-medium">Status:</span> {product.status}
-						</div>
-						<div>
-						  <span className="font-medium">Country:</span> {countries.find(c => c.value === product.country)?.label}
-						</div>
-						<div>
-						  <span className="font-medium">Tags:</span> {product.tags.join(", ")}
-						</div>
-					  </div>
-					</div>
-				  ))}
-				</div>
-			  )}
-			</div>
-		  </div>
-	
-		  {/* Single Combobox Examples */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Single Selection Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Country</label>
-				<Combobox
-				  items={countries}
-				  value={selectedCountry}
-				  onValueChange={setSelectedCountry}
-				  placeholder="Select a country"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Status</label>
-				<Combobox
-				  items={statuses}
-				  value={selectedStatus}
-				  onValueChange={setSelectedStatus}
-				  placeholder="Select status"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Category</label>
-				<Combobox
-				  items={categories}
-				  value={selectedCategory}
-				  onValueChange={setSelectedCategory}
-				  placeholder="Select category"
-				/>
-			  </div>
-			</div>
-		  </div>
-	
-		  {/* Multi Combobox Examples */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Multiple Selection Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Tags</label>
-				<MultiCombobox
-				  items={tags}
-				  value={selectedTags}
-				  onValueChange={setSelectedTags}
-				  placeholder="Select tags"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Team Members</label>
-				<MultiCombobox
-				  items={users}
-				  value={selectedUsers}
-				  onValueChange={setSelectedUsers}
-				  placeholder="Select team members"
-				/>
-			  </div>
-			</div>
-	
-			{selectedUsers.length > 0 && (
-			  <div className="mt-4 p-4 bg-muted rounded-md">
-				<h3 className="font-medium text-foreground mb-2">Selected Team Members:</h3>
-				<div className="space-y-2">
-				  {selectedUsers.map(userId => {
-					const user = users.find(u => u.value === userId)
-					return user ? (
-					  <div key={user.value} className="flex items-center space-x-3 p-2 bg-background rounded-md">
-						<div className="flex items-center justify-center h-8 w-8 rounded-full bg-primary text-primary-foreground">
-						  <User className="h-4 w-4" />
-						</div>
-						<div>
-						  <div className="text-sm font-medium text-foreground">{user.label}</div>
-						  <div className="text-xs text-muted-foreground">{user.email}</div>
-						</div>
-					  </div>
-					) : null
-				  })}
-				</div>
-			  </div>
-			)}
-		  </div>
-	
-		  {/* Combobox with Icons */}
-		  <div className="bg-card p-6 rounded-lg border">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Combobox with Custom Items</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Payment Method</label>
-				<Combobox
-				  items={[
-					{ value: "credit-card", label: "Credit Card" },
-					{ value: "paypal", label: "PayPal" },
-					{ value: "bank-transfer", label: "Bank Transfer" },
-				  ]}
-				  placeholder="Select payment method"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Shipping Method</label>
-				<Combobox
-				  items={[
-					{ value: "standard", label: "Standard Shipping" },
-					{ value: "express", label: "Express Shipping" },
-					{ value: "priority", label: "Priority Shipping" },
-				  ]}
-				  placeholder="Select shipping method"
-				/>
-			  </div>
-			</div>
-		  </div>
-		</div>
-	  )
-	}`,
-        basicusage: `
-	const [selectedCategory, setSelectedCategory] = useState("")
-	
-	  
-	  const categories = [
-		{ value: "electronics", label: "Electronics" },
-		{ value: "clothing", label: "Clothing" },
-		{ value: "books", label: "Books" },
-		{ value: "home", label: "Home & Garden" },
-		{ value: "sports", label: "Sports & Outdoors" },
-		{ value: "beauty", label: "Beauty & Personal Care" },
-		{ value: "toys", label: "Toys & Games" },
-	  ]
-	
-	<ComboboxV1
-	  items={categories}
-	  value={selectedCategory}
-	  onValueChange={setSelectedCategory}
-	  placeholder="Select category"
-	  searchPlaceholder="Search categories..."
-	/>`,
-        usagePath: null,
-        desc: null,
-        customize: null,
-        props: {
-            "ComboboxV1": [
-                { name: "items", type: "ComboboxItem[]", default: "null" },
-                { name: "value", type: "string", default: "null" },
-                { name: "onValueChange", type: "(value: string) => void", default: "null" },
-                { name: "placeholder", type: "string", default: "Select an item..." },
-                { name: "disabled", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-                { name: "searchPlaceholder", type: "string", default: "Search..." },
-                { name: "emptyText", type: "string", default: "No results found." },
-            ]
-        }
-    },
-    {
-        name: "multi combobox",
-        value: "multi-combobox",
-        importPath: "~/components/catalyst-ui/comboboxes/multi-combobox",
-        path: "/components/catalyst-ui/comboboxes/multi-combobox.tsx",
-        premium: true,
-        source: null,
-        category: "Comboboxes",
-        tags: ["ui", "forms", "core"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        usage: `
-	
-	
-	
-	
-	
-	
-	export const meta: MetaFunction = () => {
-	  return [
-		{ title: "Comboboxes Demo" },
-		{ name: "description", content: "Demo of combobox components with various styles and functionality" },
-	  ]
-	}
-	
-	export default function ComboboxesDemo() {
-	  const [selectedCountry, setSelectedCountry] = useState("")
-	  const [selectedCategory, setSelectedCategory] = useState("")
-	  const [selectedStatus, setSelectedStatus] = useState("")
-	  const [selectedTags, setSelectedTags] = useState<string[]>([])
-	  const [selectedUsers, setSelectedUsers] = useState<string[]>([])
-	  const [searchQuery, setSearchQuery] = useState("")
-	
-	  // Sample data
-	  const countries = [
-		{ value: "us", label: "United States" },
-		{ value: "ca", label: "Canada" },
-		{ value: "uk", label: "United Kingdom" },
-		{ value: "au", label: "Australia" },
-		{ value: "de", label: "Germany" },
-		{ value: "fr", label: "France" },
-		{ value: "jp", label: "Japan" },
-		{ value: "br", label: "Brazil" },
-	  ]
-	
-	  const categories = [
-		{ value: "electronics", label: "Electronics" },
-		{ value: "clothing", label: "Clothing" },
-		{ value: "books", label: "Books" },
-		{ value: "home", label: "Home & Garden" },
-		{ value: "sports", label: "Sports & Outdoors" },
-		{ value: "beauty", label: "Beauty & Personal Care" },
-		{ value: "toys", label: "Toys & Games" },
-	  ]
-	
-	  const statuses = [
-		{ value: "active", label: "Active" },
-		{ value: "pending", label: "Pending" },
-		{ value: "draft", label: "Draft" },
-		{ value: "archived", label: "Archived" },
-	  ]
-	
-	  const tags = [
-		{ value: "featured", label: "Featured" },
-		{ value: "sale", label: "On Sale" },
-		{ value: "new", label: "New Arrival" },
-		{ value: "popular", label: "Popular" },
-		{ value: "limited", label: "Limited Edition" },
-		{ value: "clearance", label: "Clearance" },
-	  ]
-	
-	  const users = [
-		{ value: "alice", label: "Alice Johnson", email: "alice@example.com" },
-		{ value: "bob", label: "Bob Smith", email: "bob@example.com" },
-		{ value: "carol", label: "Carol Williams", email: "carol@example.com" },
-		{ value: "dave", label: "Dave Brown", email: "dave@example.com" },
-		{ value: "eve", label: "Eve Davis", email: "eve@example.com" },
-		{ value: "frank", label: "Frank Miller", email: "frank@example.com" },
-	  ]
-	
-	  // Sample products data
-	  const products = [
-		{ id: 1, name: "Wireless Headphones", category: "electronics", tags: ["featured", "new"], status: "active", country: "us" },
-		{ id: 2, name: "Cotton T-Shirt", category: "clothing", tags: ["sale"], status: "active", country: "ca" },
-		{ id: 3, name: "Programming Book", category: "books", tags: ["popular"], status: "draft", country: "uk" },
-		{ id: 4, name: "Desk Lamp", category: "home", tags: ["new"], status: "active", country: "de" },
-		{ id: 5, name: "Yoga Mat", category: "sports", tags: ["featured", "sale"], status: "active", country: "us" },
-		{ id: 6, name: "Face Cream", category: "beauty", tags: ["new", "limited"], status: "pending", country: "fr" },
-		{ id: 7, name: "Board Game", category: "toys", tags: ["popular", "clearance"], status: "active", country: "ca" },
-		{ id: 8, name: "Smart Watch", category: "electronics", tags: ["featured", "new"], status: "archived", country: "jp" },
-	  ]
-	
-	  // Filter products based on selected filters and search query
-	  const filteredProducts = products.filter(product => {
-		// Filter by category if selected
-		if (selectedCategory && product.category !== selectedCategory) return false
-		
-		// Filter by status if selected
-		if (selectedStatus && product.status !== selectedStatus) return false
-		
-		// Filter by country if selected
-		if (selectedCountry && product.country !== selectedCountry) return false
-		
-		// Filter by tags if selected
-		if (selectedTags.length > 0 && !selectedTags.some(tag => product.tags.includes(tag))) return false
-		
-		// Filter by search query
-		if (searchQuery && !product.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
-		
-		return true
-	  })
-	
-	  return (
-		<div className="container mx-auto py-10 px-4 max-w-6xl">
-		  <div className="mb-10">
-			<h1 className="text-3xl font-bold text-foreground mb-2">Combobox Components</h1>
-			<p className="text-muted-foreground">
-			  Various combobox styles and implementations with functional examples.
-			</p>
-		  </div>
-	
-		  {/* Filterable Products Section */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Product Filter with Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-			  {/* Search Input */}
-			  <div className="lg:col-span-2">
-				<div className="relative">
-				  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-				  <input
-					type="text"
-					placeholder="Search products..."
-					className="w-full pl-10 pr-4 py-2 border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-					value={searchQuery}
-					onChange={(e) => setSearchQuery(e.target.value)}
-				  />
-				</div>
-			  </div>
-	
-			  {/* Category Combobox */}
-			  <div>
-				<Combobox
-				  items={categories}
-				  value={selectedCategory}
-				  onValueChange={setSelectedCategory}
-				  placeholder="Select category"
-				  searchPlaceholder="Search categories..."
-				/>
-			  </div>
-	
-			  {/* Status Combobox */}
-			  <div>
-				<Combobox
-				  items={statuses}
-				  value={selectedStatus}
-				  onValueChange={setSelectedStatus}
-				  placeholder="Select status"
-				  searchPlaceholder="Search statuses..."
-				/>
-			  </div>
-	
-			  {/* Country Combobox */}
-			  <div>
-				<Combobox
-				  items={countries}
-				  value={selectedCountry}
-				  onValueChange={setSelectedCountry}
-				  placeholder="Select country"
-				  searchPlaceholder="Search countries..."
-				/>
-			  </div>
-	
-			  {/* Tags MultiCombobox */}
-			  <div className="lg:col-span-2">
-				<MultiCombobox
-				  items={tags}
-				  value={selectedTags}
-				  onValueChange={setSelectedTags}
-				  placeholder="Select tags"
-				  searchPlaceholder="Search tags..."
-				/>
-			  </div>
-			</div>
-	
-			{/* Results */}
-			<div>
-			  <h3 className="text-lg font-medium text-foreground mb-4">
-				Products ({filteredProducts.length} items)
-			  </h3>
-			  
-			  {filteredProducts.length === 0 ? (
-				<p className="text-muted-foreground">No products match your filters.</p>
-			  ) : (
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				  {filteredProducts.map(product => (
-					<div key={product.id} className="border rounded-lg p-4 bg-background">
-					  <h4 className="font-medium text-foreground mb-2">{product.name}</h4>
-					  <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
-						<div>
-						  <span className="font-medium">Category:</span> {product.category}
-						</div>
-						<div>
-						  <span className="font-medium">Status:</span> {product.status}
-						</div>
-						<div>
-						  <span className="font-medium">Country:</span> {countries.find(c => c.value === product.country)?.label}
-						</div>
-						<div>
-						  <span className="font-medium">Tags:</span> {product.tags.join(", ")}
-						</div>
-					  </div>
-					</div>
-				  ))}
-				</div>
-			  )}
-			</div>
-		  </div>
-	
-		  {/* Single Combobox Examples */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Single Selection Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Country</label>
-				<Combobox
-				  items={countries}
-				  value={selectedCountry}
-				  onValueChange={setSelectedCountry}
-				  placeholder="Select a country"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Status</label>
-				<Combobox
-				  items={statuses}
-				  value={selectedStatus}
-				  onValueChange={setSelectedStatus}
-				  placeholder="Select status"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Category</label>
-				<Combobox
-				  items={categories}
-				  value={selectedCategory}
-				  onValueChange={setSelectedCategory}
-				  placeholder="Select category"
-				/>
-			  </div>
-			</div>
-		  </div>
-	
-		  {/* Multi Combobox Examples */}
-		  <div className="bg-card p-6 rounded-lg border mb-8">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Multiple Selection Comboboxes</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Tags</label>
-				<MultiCombobox
-				  items={tags}
-				  value={selectedTags}
-				  onValueChange={setSelectedTags}
-				  placeholder="Select tags"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Team Members</label>
-				<MultiCombobox
-				  items={users}
-				  value={selectedUsers}
-				  onValueChange={setSelectedUsers}
-				  placeholder="Select team members"
-				/>
-			  </div>
-			</div>
-	
-			{selectedUsers.length > 0 && (
-			  <div className="mt-4 p-4 bg-muted rounded-md">
-				<h3 className="font-medium text-foreground mb-2">Selected Team Members:</h3>
-				<div className="space-y-2">
-				  {selectedUsers.map(userId => {
-					const user = users.find(u => u.value === userId)
-					return user ? (
-					  <div key={user.value} className="flex items-center space-x-3 p-2 bg-background rounded-md">
-						<div className="flex items-center justify-center h-8 w-8 rounded-full bg-primary text-primary-foreground">
-						  <User className="h-4 w-4" />
-						</div>
-						<div>
-						  <div className="text-sm font-medium text-foreground">{user.label}</div>
-						  <div className="text-xs text-muted-foreground">{user.email}</div>
-						</div>
-					  </div>
-					) : null
-				  })}
-				</div>
-			  </div>
-			)}
-		  </div>
-	
-		  {/* Combobox with Icons */}
-		  <div className="bg-card p-6 rounded-lg border">
-			<h2 className="text-xl font-semibold text-foreground mb-4">Combobox with Custom Items</h2>
-			
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Payment Method</label>
-				<Combobox
-				  items={[
-					{ value: "credit-card", label: "Credit Card" },
-					{ value: "paypal", label: "PayPal" },
-					{ value: "bank-transfer", label: "Bank Transfer" },
-				  ]}
-				  placeholder="Select payment method"
-				/>
-			  </div>
-	
-			  <div className="space-y-2">
-				<label className="text-sm font-medium text-foreground">Shipping Method</label>
-				<Combobox
-				  items={[
-					{ value: "standard", label: "Standard Shipping" },
-					{ value: "express", label: "Express Shipping" },
-					{ value: "priority", label: "Priority Shipping" },
-				  ]}
-				  placeholder="Select shipping method"
-				/>
-			  </div>
-			</div>
-		  </div>
-		</div>
-	  )
-	}`,
-        basicusage: `
-
-const frameworks = [
-	{ value: "react", label: "React" },
-	{ value: "vue", label: "Vue.js" },
-	{ value: "angular", label: "Angular" },
-	{ value: "svelte", label: "Svelte" },
-	{ value: "nextjs", label: "Next.js" },
-	{ value: "nuxtjs", label: "Nuxt.js" },
-	{ value: "gatsby", label: "Gatsby" },
-	{ value: "remix", label: "Remix" },
-];
-   const [selectedFrameworks, setSelectedFrameworks] = useState(['react', 'nextjs']);
-   <MultiCombobox
-						items={frameworks}
-						value={selectedFrameworks}
-						onValueChange={setSelectedFrameworks}
-						placeholder="Choose your frameworks..."
-						searchPlaceholder="Search frameworks..."
-					/>`,
-        usagePath: null,
-        desc: null,
-        customize: null,
-        props: {
-            "MultiCombobox": [
-                { name: "items", type: "MultiComboboxItem[]", default: "null" },
-                { name: "value", type: "string[]", default: "[]" },
-                { name: "onValueChange", type: "(value: string[]) => void", default: "null" },
-                { name: "placeholder", type: "string", default: "Select items..." },
-                { name: "disabled", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-                { name: "searchPlaceholder", type: "string", default: "Search..." },
-                { name: "emptyText", type: "string", default: "No results found." },
-            ]
-        }
-    },
-    {
-        name: "nested combobox",
-        value: "nested-combobox",
-        importPath: "~/components/catalyst-ui/comboboxes/nested-combobox",
-        path: "/components/catalyst-ui/comboboxes/nested-combobox.tsx",
-        premium: true,
-        source: null,
-        category: "Comboboxes",
-        tags: ["utils", "auth", "user auth"],
-        features: ["utils", "auth", "user auth"],
-        dependencies: [],
-        usage: `
-
-export function NestedComboboxDemo() {
-  const [frameworkValue, setFrameworkValue] = useState("");
-  const [projectValue, setProjectValue] = useState("");
-  const [settingsValue, setSettingsValue] = useState("");
-
-  const frameworkPages = [
-	{
-	  id: 'root',
-	  items: [
-		{ id: 'next.js', label: 'Next.js', icon: <FolderOpen size={16} /> },
-		{ id: 'sveltekit', label: 'SvelteKit', icon: <FolderOpen size={16} /> },
-		{ id: 'nuxt.js', label: 'Nuxt.js', icon: <FolderOpen size={16} /> },
-		{ id: 'remix', label: 'Remix', icon: <FolderOpen size={16} /> },
-		{ id: 'astro', label: 'Astro', icon: <FolderOpen size={16} /> },
-	  ]
-	}
-  ];
-
-  const projectPages = [
-	{
-	  id: 'main',
-	  title: 'Categories',
-	  items: [
-		{
-		  id: 'projects-nav',
-		  label: 'Projects',
-		  icon: <FolderOpen size={16} />,
-		  navigateTo: 'projects'
-		},
-		{
-		  id: 'teams-nav',
-		  label: 'Teams',
-		  icon: <Users size={16} />,
-		  navigateTo: 'teams'
-		}
-	  ]
-	},
-	{
-	  id: 'projects',
-	  title: 'Available Projects',
-	  items: [
-		{
-		  id: 'project-alpha',
-		  label: 'Project Alpha',
-		  value: 'alpha',
-		  icon: <FolderOpen size={16} />
-		},
-		{
-		  id: 'project-beta',
-		  label: 'Project Beta',
-		  value: 'beta',
-		  icon: <FolderOpen size={16} />
-		},
-		{
-		  id: 'project-gamma',
-		  label: 'Project Gamma',
-		  value: 'gamma',
-		  icon: <FolderOpen size={16} />
-		}
-	  ]
-	},
-	{
-	  id: 'teams',
-	  title: 'Available Teams',
-	  items: [
-		{
-		  id: 'frontend-team',
-		  label: 'Frontend Team',
-		  value: 'frontend',
-		  icon: <Users size={16} />
-		},
-		{
-		  id: 'backend-team',
-		  label: 'Backend Team',
-		  value: 'backend',
-		  icon: <Users size={16} />
-		},
-		{
-		  id: 'design-team',
-		  label: 'Design Team',
-		  value: 'design',
-		  icon: <Users size={16} />
-		}
-	  ]
-	}
-  ];
-
-  const settingsPages = [
-	{
-	  id: 'main',
-	  title: 'Settings',
-	  items: [
-		{
-		  id: 'general',
-		  label: 'General Settings',
-		  icon: <Settings size={16} />,
-		  navigateTo: 'general'
-		},
-		{
-		  id: 'appearance',
-		  label: 'Appearance',
-		  icon: <Palette size={16} />,
-		  navigateTo: 'themes'
-		}
-	  ]
-	},
-	{
-	  id: 'general',
-	  title: 'General',
-	  items: [
-		{
-		  id: 'notifications',
-		  label: 'Enable Notifications',
-		  value: 'notifications',
-		  icon: <Bell size={16} />
-		},
-		{
-		  id: 'security',
-		  label: 'Security Settings',
-		  value: 'security',
-		  icon: <Shield size={16} />
-		}
-	  ]
-	},
-	{
-	  id: 'themes',
-	  title: 'Themes',
-	  items: [
-		{
-		  id: 'light',
-		  label: 'Light Theme',
-		  value: 'light',
-		  icon: <Sun size={16} />
-		},
-		{
-		  id: 'dark',
-		  label: 'Dark Theme',
-		  value: 'dark',
-		  icon: <Moon size={16} />
-		}
-	  ]
-	}
-  ];
-
-  return (
-	<div className="max-w-4xl mx-auto p-6 space-y-8">
-	  <div className="text-center">
-		<h1 className="text-3xl font-bold mb-2">NestedCombobox Component</h1>
-		<p className="text-muted-foreground">Combobox with nested navigation support</p>
-	  </div>
-
-	  <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-		<div className="space-y-4">
-		  <h3 className="text-lg font-semibold">Simple Framework Selection</h3>
-		  <p className="text-sm text-muted-foreground">Basic combobox without nesting</p>
-		  <NestedCombobox
-			pages={frameworkPages}
-			placeholder="Select framework..."
-			value={frameworkValue}
-			onValueChange={setFrameworkValue}
-			defaultPage="root"
-			width="w-full"
-		  />
-		  {frameworkValue && (
-			<p className="text-sm text-muted-foreground">Selected: {frameworkValue}</p>
-		  )}
-		</div>
-
-		<div className="space-y-4">
-		  <h3 className="text-lg font-semibold">Project & Team Selection</h3>
-		  <p className="text-sm text-muted-foreground">Navigate through categories to select</p>
-		  <NestedCombobox
-			pages={projectPages}
-			placeholder="Choose project or team..."
-			value={projectValue}
-			onValueChange={setProjectValue}
-			width="w-full"
-		  />
-		  {projectValue && (
-			<p className="text-sm text-muted-foreground">Selected: {projectValue}</p>
-		  )}
-		</div>
-
-		<div className="space-y-4">
-		  <h3 className="text-lg font-semibold">Settings Selection</h3>
-		  <p className="text-sm text-muted-foreground">Choose from nested settings options</p>
-		  <NestedCombobox
-			pages={settingsPages}
-			placeholder="Select setting..."
-			value={settingsValue}
-			onValueChange={setSettingsValue}
-			width="w-full"
-		  />
-		  {settingsValue && (
-			<p className="text-sm text-muted-foreground">Selected: {settingsValue}</p>
-		  )}
-		</div>
-	  </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>
-		  <p>Click "Back" button or use keyboard to navigate between levels</p>
-		</div>
-	  </div>
-
-	  <div className="space-y-4">
-		<h2 className="text-xl font-semibold">Current Values</h2>
-		<div className="grid gap-4 md:grid-cols-3">
-		  <div className="p-4 border rounded-lg">
-			<h4 className="font-medium">Framework</h4>
-			<p className="text-sm text-muted-foreground">{frameworkValue || 'None selected'}</p>
-		  </div>
-		  <div className="p-4 border rounded-lg">
-			<h4 className="font-medium">Project/Team</h4>
-			<p className="text-sm text-muted-foreground">{projectValue || 'None selected'}</p>
-		  </div>
-		  <div className="p-4 border rounded-lg">
-			<h4 className="font-medium">Setting</h4>
-			<p className="text-sm text-muted-foreground">{settingsValue || 'None selected'}</p>
-		  </div>
-		</div>
-	  </div>
-	</div>
-  );
-}`,
-        basicusage: `
-
-
-  const [frameworkValue, setFrameworkValue] = useState("");
-  const [projectValue, setProjectValue] = useState("");
-  const [settingsValue, setSettingsValue] = useState("");
-
-  const frameworkPages = [
-	{
-	  id: 'root',
-	  items: [
-		{ id: 'next.js', label: 'Next.js', icon: <FolderOpen size={16} /> },
-		{ id: 'sveltekit', label: 'SvelteKit', icon: <FolderOpen size={16} /> },
-		{ id: 'nuxt.js', label: 'Nuxt.js', icon: <FolderOpen size={16} /> },
-		{ id: 'remix', label: 'Remix', icon: <FolderOpen size={16} /> },
-		{ id: 'astro', label: 'Astro', icon: <FolderOpen size={16} /> },
-	  ]
-	}
-  ];
-
-  const projectPages = [
-	{
-	  id: 'main',
-	  title: 'Categories',
-	  items: [
-		{
-		  id: 'projects-nav',
-		  label: 'Projects',
-		  icon: <FolderOpen size={16} />,
-		  navigateTo: 'projects'
-		},
-		{
-		  id: 'teams-nav',
-		  label: 'Teams',
-		  icon: <Users size={16} />,
-		  navigateTo: 'teams'
-		}
-	  ]
-	},
-	{
-	  id: 'projects',
-	  title: 'Available Projects',
-	  items: [
-		{
-		  id: 'project-alpha',
-		  label: 'Project Alpha',
-		  value: 'alpha',
-		  icon: <FolderOpen size={16} />
-		},
-		{
-		  id: 'project-beta',
-		  label: 'Project Beta',
-		  value: 'beta',
-		  icon: <FolderOpen size={16} />
-		},
-		{
-		  id: 'project-gamma',
-		  label: 'Project Gamma',
-		  value: 'gamma',
-		  icon: <FolderOpen size={16} />
-		}
-	  ]
-	},
-	{
-	  id: 'teams',
-	  title: 'Available Teams',
-	  items: [
-		{
-		  id: 'frontend-team',
-		  label: 'Frontend Team',
-		  value: 'frontend',
-		  icon: <Users size={16} />
-		},
-		{
-		  id: 'backend-team',
-		  label: 'Backend Team',
-		  value: 'backend',
-		  icon: <Users size={16} />
-		},
-		{
-		  id: 'design-team',
-		  label: 'Design Team',
-		  value: 'design',
-		  icon: <Users size={16} />
-		}
-	  ]
-	}
-  ];
-
-  const settingsPages = [
-	{
-	  id: 'main',
-	  title: 'Settings',
-	  items: [
-		{
-		  id: 'general',
-		  label: 'General Settings',
-		  icon: <Settings size={16} />,
-		  navigateTo: 'general'
-		},
-		{
-		  id: 'appearance',
-		  label: 'Appearance',
-		  icon: <Palette size={16} />,
-		  navigateTo: 'themes'
-		}
-	  ]
-	},
-	{
-	  id: 'general',
-	  title: 'General',
-	  items: [
-		{
-		  id: 'notifications',
-		  label: 'Enable Notifications',
-		  value: 'notifications',
-		  icon: <Bell size={16} />
-		},
-		{
-		  id: 'security',
-		  label: 'Security Settings',
-		  value: 'security',
-		  icon: <Shield size={16} />
-		}
-	  ]
-	},
-	{
-	  id: 'themes',
-	  title: 'Themes',
-	  items: [
-		{
-		  id: 'light',
-		  label: 'Light Theme',
-		  value: 'light',
-		  icon: <Sun size={16} />
-		},
-		{
-		  id: 'dark',
-		  label: 'Dark Theme',
-		  value: 'dark',
-		  icon: <Moon size={16} />
-		}
-	  ]
-	}
-  ]
-<div className="max-w-4xl mx-auto p-6 space-y-8">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold mb-2">NestedCombobox Component</h1>
-        <p className="text-muted-foreground">Combobox with nested navigation support</p>
-      </div>
-
-      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold">Simple Framework Selection</h3>
-          <p className="text-sm text-muted-foreground">Basic combobox without nesting</p>
-          <NestedCombobox
-            pages={frameworkPages}
-            placeholder="Select framework..."
-            value={frameworkValue}
-            onValueChange={setFrameworkValue}
-            defaultPage="root"
-            width="w-full"
-          />
-          {frameworkValue && (
-            <p className="text-sm text-muted-foreground">Selected: {frameworkValue}</p>
-          )}
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold">Project & Team Selection</h3>
-          <p className="text-sm text-muted-foreground">Navigate through categories to select</p>
-          <NestedCombobox
-            pages={projectPages}
-            placeholder="Choose project or team..."
-            value={projectValue}
-            onValueChange={setProjectValue}
-            width="w-full"
-          />
-          {projectValue && (
-            <p className="text-sm text-muted-foreground">Selected: {projectValue}</p>
-          )}
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold">Settings Selection</h3>
-          <p className="text-sm text-muted-foreground">Choose from nested settings options</p>
-          <NestedCombobox
-            pages={settingsPages}
-            placeholder="Select setting..."
-            value={settingsValue}
-            onValueChange={setSettingsValue}
-            width="w-full"
-          />
-          {settingsValue && (
-            <p className="text-sm text-muted-foreground">Selected: {settingsValue}</p>
-          )}
-        </div>
-      </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>
-          <p>Click "Back" button or use keyboard to navigate between levels</p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold">Current Values</h2>
-        <div className="grid gap-4 md:grid-cols-3">
-          <div className="p-4 border rounded-lg">
-            <h4 className="font-medium">Framework</h4>
-            <p className="text-sm text-muted-foreground">{frameworkValue || 'None selected'}</p>
-          </div>
-          <div className="p-4 border rounded-lg">
-            <h4 className="font-medium">Project/Team</h4>
-            <p className="text-sm text-muted-foreground">{projectValue || 'None selected'}</p>
-          </div>
-          <div className="p-4 border rounded-lg">
-            <h4 className="font-medium">Setting</h4>
-            <p className="text-sm text-muted-foreground">{settingsValue || 'None selected'}</p>
-          </div>
-        </div>
-      </div>
-    </div> `,
-        props: {
-            "NestedCombobox": [
-                { name: "pages", type: "CommandPage[]", default: "null", required: true },
-                { name: "placeholder", type: "string", default: "Select option...", required: false },
-                { name: "emptyMessage", type: "string", default: "No results found.", required: false },
-                { name: "className", type: "string", default: "w-[300px]", required: false },
-                { name: "defaultPage", type: "string", default: "null", required: false },
-                { name: "value", type: "string", default: "''", required: false },
-                { name: "onValueChange", type: "(value: string) => void", default: "null", required: false },
-                { name: "onItemSelect", type: "(item: CommandItemData, pageId: string) => void", default: "null", required: false },
-                { name: "displayValue", type: "(value: string) => string", default: "null", required: false },
-            ],
-        },
-        usagePath: null,
-        desc: null,
-        customize: null
-    },
-    {
-        name: "Combobox 2",
-        value: "combobox-2",
-        importPath: "~/components/catalyst-ui/comboboxes/combobox2",
-        multiImport: "Combobox2, ComboboxTrigger2, ComboboxContent2, ComboboxInput2, ComboboxList2, ComboboxEmpty2, ComboboxGroup2, ComboboxItem2, ComboboxSeparator2, ComboboxCreateNew2",
-        basicusage: `
-<Combobox2 data={data} type="item">
-  <ComboboxTrigger2 />
-  <ComboboxContent2>
-    <ComboboxInput2 />
-    <ComboboxList2>
-      <ComboboxEmpty2 />
-      <ComboboxGroup2>
-        {data.map((item) => (
-          <ComboboxItem2 key={item.value} value={item.value}>
-            {item.label}
-          </ComboboxItem2>
-        ))}
-      </ComboboxGroup2>
-    </ComboboxList2>
-  </ComboboxContent2>
-</Combobox2>
-
-<Combobox2 
-  data={data} 
-  type="item"
-  defaultValue=""
-  value={value}
-  onValueChange={setValue}
-  open={open}
-  onOpenChange={setOpen}
-  defaultOpen={false}
->
-  <ComboboxTrigger2 className="" />
-  <ComboboxContent2 popoverOptions={{}}>
-    <ComboboxInput2 
-      value={inputValue}
-      defaultValue=""
-      onValueChange={setInputValue}
-    />
-    <ComboboxList2>
-      <ComboboxEmpty2>No items found.</ComboboxEmpty2>
-      <ComboboxGroup2>
-        {data.map((item) => (
-          <ComboboxItem2 key={item.value} value={item.value}>
-            {item.label}
-          </ComboboxItem2>
-        ))}
-      </ComboboxGroup2>
-      <ComboboxSeparator2 />
-      <ComboboxCreateNew2 onCreateNew={handleCreate}>
-        {(inputValue) => <span>Create: {inputValue}</span>}
-      </ComboboxCreateNew2>
-    </ComboboxList2>
-  </ComboboxContent2>
-</Combobox2>`,
-        path: "/components/catalyst-ui/comboboxes/combobox2.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/comboboxes/combobox2.tsx",
-        usage: null,
-        premium: true,
-        category: "Comboboxes",
-        tags: ["combobox", "select", "dropdown", "search", "filter"],
-        features: ["Responsive", "TypeScript", "Accessible", "Searchable", "Create New"],
-        dependencies: ["lucide-react", "react", "@radix-ui/react-use-controllable-state"],
-        props: {
-            "Combobox2": [
-                { name: "data", type: "ComboboxData[]", default: "required" },
-                { name: "type", type: "string", default: "required" },
-                { name: "defaultValue", type: "string", default: "undefined" },
-                { name: "value", type: "string", default: "undefined" },
-                { name: "onValueChange", type: "(value: string) => void", default: "undefined" },
-                { name: "open", type: "boolean", default: "undefined" },
-                { name: "onOpenChange", type: "(open: boolean) => void", default: "undefined" },
-                { name: "defaultOpen", type: "boolean", default: "false" },
-            ],
-            "ComboboxTrigger2": [
-                { name: "className", type: "string", default: "undefined" },
-                { name: "children", type: "ReactNode", default: "undefined" },
-            ],
-            "ComboboxContent2": [
-                { name: "className", type: "string", default: "undefined" },
-                { name: "popoverOptions", type: "ComponentProps<typeof PopoverContent>", default: "undefined" },
-            ],
-            "ComboboxInput2": [
-                { name: "value", type: "string", default: "undefined" },
-                { name: "defaultValue", type: "string", default: "undefined" },
-                { name: "onValueChange", type: "(value: string) => void", default: "undefined" },
-            ],
-            "ComboboxItem2": [
-                { name: "value", type: "string", default: "required" },
-                { name: "children", type: "ReactNode", default: "required" },
-            ],
-            "ComboboxCreateNew2": [
-                { name: "onCreateNew", type: "(value: string) => void", default: "required" },
-                { name: "children", type: "(inputValue: string) => ReactNode", default: "undefined" },
-                { name: "className", type: "string", default: "undefined" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Choicebox",
-        value: "choicebox",
-        importPath: "~/components/catalyst-ui/comboboxes/choicebox",
-        multiImport: "Choicebox, ChoiceboxItem, ChoiceboxItemHeader, ChoiceboxItemTitle, ChoiceboxItemSubtitle, ChoiceboxItemDescription, ChoiceboxItemContent, ChoiceboxItemIndicator",
-        basicusage: `
-<Choicebox value="option1" onValueChange={setValue}>
-  <ChoiceboxItem value="option1">
-    <ChoiceboxItemHeader>
-      <ChoiceboxItemTitle>Option 1</ChoiceboxItemTitle>
-      <ChoiceboxItemDescription>Description</ChoiceboxItemDescription>
-    </ChoiceboxItemHeader>
-    <ChoiceboxItemContent>
-      <ChoiceboxItemIndicator />
-    </ChoiceboxItemContent>
-  </ChoiceboxItem>
-</Choicebox>
-
-<Choicebox 
-  value={selectedValue} 
-  onValueChange={handleChange}
-  className="space-y-2"
->
-  <ChoiceboxItem value="premium" className="border-2">
-    <ChoiceboxItemHeader>
-      <ChoiceboxItemTitle className="text-lg">Premium Plan</ChoiceboxItemTitle>
-      <ChoiceboxItemSubtitle>Most popular</ChoiceboxItemSubtitle>
-      <ChoiceboxItemDescription>Full access to all features</ChoiceboxItemDescription>
-    </ChoiceboxItemHeader>
-    <ChoiceboxItemContent>
-      <ChoiceboxItemIndicator />
-    </ChoiceboxItemContent>
-  </ChoiceboxItem>
-</Choicebox>`,
-        path: "/components/catalyst-ui/comboboxes/choicebox.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/comboboxes/choicebox.tsx",
-        usage: null,
-        premium: true,
-        category: "Comboboxes",
-        tags: ["radio", "selection", "cards", "forms"],
-        features: ["Card-based UI", "Accessible", "Customizable", "TypeScript"],
-        dependencies: ["lucide-react", "radix-ui", "react"],
-        props: {
-            "Choicebox": [
-                { name: "className", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" },
-                { name: "onValueChange", type: "(value: string) => void", default: "null" }
-            ],
-            "ChoiceboxItem": [
-                { name: "className", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemHeader": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemTitle": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemSubtitle": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemDescription": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemContent": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ChoiceboxItemIndicator": [
-                { name: "className", type: "string", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Combobox",
-        value: "combobox",
-        importPath: "~/components/catalyst-ui/comboboxes/combobox",
-        path: "/components/catalyst-ui/comboboxes/combobox.tsx",
-        premium: true,
-        source: null,
-        category: "Comboboxes",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react", "cmdk", "@radix-ui/react-popover"],
-        basicusage: `
-<Combobox
-	options={options}
-	value={value}
-	onValueChange={setValue}
-	// placeholder
-	// emptyText
-	// className
-/>`,
-        usage: `
-
-<Combobox
-	options={options}
-	value={value}
-	onValueChange={setValue}
-	// placeholder
-	// emptyText
-	// className
-/>
-
-export function ComboboxDemo() {
-  const [value, setValue] = React.useState("")
-  const options = [
-    {
-      value: "next.js",
-      label: "Next.js",
-    },
-    {
-      value: "sveltekit",
-      label: "SvelteKit",
-    },
-    {
-      value: "nuxt.js",
-      label: "Nuxt.js",
-    },
-    {
-      value: "remix",
-      label: "Remix",
-    },
-    {
-      value: "astro",
-      label: "Astro",
-    },
-  ]
-  return (
-    <div>
-      <Combobox
-        options={options}
-        value={value}
-        onValueChange={setValue}
-      // placeholder
-      // emptyText
-      // className
-      />
-    </div>
-  )
-}`,
-        usagePath: null,
-        props: {
-            "Combobox": [
-                { name: "options", type: "{ value: string; label: string }[]", default: "null", required: true },
-                { name: "value", type: "string", default: "null", required: false },
-                { name: "onValueChange", type: "(value: string) => void", default: "null", required: false },
-                { name: "placeholder", type: "string", default: "Select option...", required: false },
-                { name: "emptyText", type: "string", default: "No option found.", required: false },
-                { name: "className", type: "string", default: "null", required: false },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Command W Combobox",
-        value: "command-w-combobox",
-        importPath: "~/components/catalyst-ui/comboboxes/command-w-combobox",
-        multiImport: "CommandWCombobox",
-        basicusage: null,
-        path: "/components/catalyst-ui/comboboxes/command-w-combobox.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/comboboxes/command-w-combobox.tsx",
-        usage: null,
-        premium: true,
-        category: "Comboboxes",
-        tags: ["command", "combobox", "search", "filter"],
-        features: ["Responsive", "TypeScript", "Accessible", "Search", "Filter"],
-        dependencies: ["lucide-react", "react", "@radix-ui/react-popover"],
-        props: {
-            "CommandWCombobox": [
-                { name: "className", type: "string", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-];