@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/data/comboboxes-data.tsx

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