✨ feat: Added Combobox stories

src/components/ui/combobox/combobox.mdx

@@ -0,0 +1,16 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './combobox.stories'
+
+<Meta of={Story} />
+
+# Combobox
+
+Autocomplete input and command palette with a list of suggestions. \
+The Combobox is built using a composition of the [Popover](/docs/primitives-popover--docs) and the [Command](/docs/primitives-command--docs) components.
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />

src/components/ui/combobox/combobox.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import React from 'react'
+import { Button } from '../button'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '../command'
+import { cn } from '@/lib/utils'
+
+const meta: Meta = {
+  title: 'Primitives/Combobox',
+  component: Popover,
+  argTypes: {}
+}
+
+export default meta
+
+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 const Primary: StoryObj = {
+  render: () => {
+    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..." />
+            <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>
+    )
+  }
+}

src/components/ui/popover/popover.mdx

@@ -5,7 +5,8 @@ import * as Story from './popover.stories'
 
 # Popover
 
-Displays rich content in a portal, triggered by a button.
+Displays rich content in a portal, triggered by a button. \
+[Docs](https://www.radix-ui.com/primitives/docs/components/popover)
 
 ### Primary