docs: move combobox and date picker to their own page (#283)

apps/www/app/examples/cards/components/date-picker.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
-import { CalendarDateRangePicker } from "@/components/examples/calendar/date-range-picker"
+import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
 
 export function DemoDatePicker() {
   return (
@@ -10,7 +10,7 @@ export function DemoDatePicker() {
           <Label htmlFor="date" className="shrink-0">
             Pick a date
           </Label>
-          <CalendarDateRangePicker className="[&>button]:w-[260px]" />
+          <DatePickerWithRange className="[&>button]:w-[260px]" />
         </div>
       </CardContent>
     </Card>

apps/www/app/sink/page.tsx

@@ -18,12 +18,12 @@ import { ButtonLoading } from "@/components/examples/button/loading"
 import { ButtonOutline } from "@/components/examples/button/outline"
 import { ButtonSecondary } from "@/components/examples/button/secondary"
 import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CalendarDatePicker } from "@/components/examples/calendar/date-picker"
 import { CardDemo } from "@/components/examples/card/demo"
 import { CheckboxDemo } from "@/components/examples/checkbox/demo"
 import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
 import { CommandDemo } from "@/components/examples/command/demo"
 import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
+import { DatePickerDemo } from "@/components/examples/date-picker/demo"
 import { DialogDemo } from "@/components/examples/dialog/demo"
 import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
 import { HoverCardDemo } from "@/components/examples/hover-card/demo"
@@ -109,7 +109,7 @@ export default function KitchenSinkPage() {
               </div>
             </ComponentWrapper>
             <ComponentWrapper>
-              <CalendarDatePicker />
+              <DatePickerDemo />
             </ComponentWrapper>
             <ComponentWrapper>
               <AccordionDemo />

apps/www/components/component-example.tsx

@@ -42,7 +42,7 @@ export function ComponentExample({
       className={cn("group relative my-4 flex flex-col space-y-2", className)}
       {...props}
     >
-      <Tabs defaultValue="preview" className="mr-auto w-full">
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
         <div className="flex items-center justify-between pb-3">
           <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
             <TabsTrigger
@@ -62,9 +62,15 @@ export function ComponentExample({
             <CopyWithClassNames
               value={codeString}
               classNames={extractedClassNames}
+              className="absolute right-4 top-20"
             />
           ) : (
-            codeString && <CopyButton value={codeString} />
+            codeString && (
+              <CopyButton
+                value={codeString}
+                className="absolute right-4 top-20"
+              />
+            )
           )}
         </div>
         <TabsContent value="preview" className="rounded-md border">

apps/www/components/copy-button.tsx

@@ -115,7 +115,7 @@ export function CopyWithClassNames({
         )}
         <span className="sr-only">Copy</span>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => copyToClipboard(value)}>
           <Icons.react className="mr-2 h-4 w-4" />
           <span>Component</span>

apps/www/components/examples/combobox/demo.tsx

@@ -41,7 +41,7 @@ const frameworks = [
   },
 ]
 
-export function CommandCombobox() {
+export function ComboboxDemo() {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState("")
 

apps/www/components/examples/combobox/dropdown-menu.tsx

@@ -36,7 +36,7 @@ const labels = [
   "maintenance",
 ]
 
-export function CommandDropdownMenu() {
+export function ComboboxDropdownMenu() {
   const [label, setLabel] = React.useState("feature")
   const [open, setOpen] = React.useState(false)
 

apps/www/components/examples/combobox/popover.tsx

@@ -60,7 +60,7 @@ const statuses: Status[] = [
   },
 ]
 
-export function CommandPopover() {
+export function ComboboxPopover() {
   const [open, setOpen] = React.useState(false)
   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
     null

apps/www/components/examples/date-picker/demo.tsx

@@ -13,7 +13,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function CalendarDatePicker() {
+export function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
 
   return (

apps/www/components/examples/date-picker/with-presets.tsx

@@ -20,7 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-export function CalendarDatePickerWithPresets() {
+export function DatePickerWithPresets() {
   const [date, setDate] = React.useState<Date>()
 
   return (

apps/www/components/examples/date-picker/with-range.tsx

@@ -14,7 +14,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function CalendarDateRangePicker({
+export function DatePickerWithRange({
   className,
 }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({

apps/www/components/examples/index.tsx

@@ -17,22 +17,22 @@ import { ButtonLoading } from "@/components/examples/button/loading"
 import { ButtonOutline } from "@/components/examples/button/outline"
 import { ButtonSecondary } from "@/components/examples/button/secondary"
 import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CalendarDatePicker } from "@/components/examples/calendar/date-picker"
-import { CalendarDateRangePicker } from "@/components/examples/calendar/date-range-picker"
 import { CalendarDemo } from "@/components/examples/calendar/demo"
-import { CalendarDatePickerWithPresets } from "@/components/examples/calendar/with-presets"
 import { CardDemo } from "@/components/examples/card/demo"
 import { CardWithForm } from "@/components/examples/card/with-form"
 import { CheckboxDemo } from "@/components/examples/checkbox/demo"
 import { CheckboxDisabled } from "@/components/examples/checkbox/disabled"
 import { CheckboxWithText } from "@/components/examples/checkbox/with-text"
 import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
-import { CommandCombobox } from "@/components/examples/command/combobox"
+import { ComboboxDemo } from "@/components/examples/combobox/demo"
+import { ComboboxDropdownMenu } from "@/components/examples/combobox/dropdown-menu"
+import { ComboboxPopover } from "@/components/examples/combobox/popover"
 import { CommandDemo } from "@/components/examples/command/demo"
 import { CommandDialogDemo } from "@/components/examples/command/dialog"
-import { CommandDropdownMenu } from "@/components/examples/command/dropdown-menu"
-import { CommandPopover } from "@/components/examples/command/popover"
 import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
+import { DatePickerDemo } from "@/components/examples/date-picker/demo"
+import { DatePickerWithPresets } from "@/components/examples/date-picker/with-presets"
+import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
 import { DialogDemo } from "@/components/examples/dialog/demo"
 import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes"
 import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
@@ -113,9 +113,9 @@ export const examples = {
   ButtonWithIcon,
   ButtonAsChild,
   CalendarDemo,
-  CalendarDatePicker,
-  CalendarDateRangePicker,
-  CalendarDatePickerWithPresets,
+  DatePickerDemo,
+  DatePickerWithRange,
+  DatePickerWithPresets,
   CardDemo,
   CardWithForm,
   CheckboxDemo,
@@ -124,9 +124,9 @@ export const examples = {
   CollapsibleDemo,
   CommandDemo,
   CommandDialogDemo,
-  CommandCombobox,
-  CommandPopover,
-  CommandDropdownMenu,
+  ComboboxDemo,
+  ComboboxPopover,
+  ComboboxDropdownMenu,
   ContextMenuDemo,
   DialogDemo,
   DropdownMenuCheckboxes,

apps/www/components/mdx-components.tsx

@@ -170,7 +170,7 @@ const components = {
       <>
         <pre
           className={cn(
-            "mb-4 mt-6 overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white",
+            "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white",
             className
           )}
           {...props}

apps/www/config/docs.ts

@@ -137,6 +137,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/collapsible",
           items: [],
         },
+        {
+          title: "Combobox",
+          href: "/docs/components/combobox",
+          items: [],
+        },
         {
           title: "Command",
           href: "/docs/components/command",
@@ -147,6 +152,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/context-menu",
           items: [],
         },
+        {
+          title: "Date Picker",
+          href: "/docs/components/date-picker",
+          items: [],
+        },
         {
           title: "Dialog",
           href: "/docs/components/dialog",

apps/www/content/docs/components/calendar.mdx

@@ -64,22 +64,6 @@ return (
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
-## Examples
+## Date Picker
 
-### Date Picker
-
-<ComponentExample src="/components/examples/calendar/date-picker.tsx">
-  <CalendarDatePicker />
-</ComponentExample>
-
-### Date Range Picker
-
-<ComponentExample src="/components/examples/calendar/date-range-picker.tsx">
-  <CalendarDateRangePicker />
-</ComponentExample>
-
-## With Presets
-
-<ComponentExample src="/components/examples/calendar/with-presets.tsx">
-  <CalendarDatePickerWithPresets />
-</ComponentExample>
+You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.

apps/www/content/docs/components/combobox.mdx

@@ -0,0 +1,132 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+component: true
+---
+
+<ComponentExample src="/components/examples/combobox/demo.tsx">
+  <ComboboxDemo />
+</ComponentExample>
+
+## About
+
+The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
+
+## Installation
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
+
+## Usage
+
+```tsx
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+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="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === framework.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Examples
+
+### Combobox
+
+<ComponentExample src="/components/examples/combobox/demo.tsx">
+  <ComboboxDemo />
+</ComponentExample>
+
+### Popover
+
+<ComponentExample src="/components/examples/combobox/popover.tsx">
+  <ComboboxPopover />
+</ComponentExample>
+
+### Dropdown menu
+
+<ComponentExample src="/components/examples/combobox/dropdown-menu.tsx">
+  <ComboboxDropdownMenu />
+</ComponentExample>

apps/www/content/docs/components/command.mdx

@@ -120,20 +120,6 @@ export function CommandMenu() {
 }
 ```
 
-### Combobox
+## Combobox
 
-<ComponentExample src="/components/examples/command/combobox.tsx">
-  <CommandCombobox />
-</ComponentExample>
-
-### Popover
-
-<ComponentExample src="/components/examples/command/popover.tsx">
-  <CommandPopover />
-</ComponentExample>
-
-### Dropdown menu
-
-<ComponentExample src="/components/examples/command/dropdown-menu.tsx">
-  <CommandDropdownMenu />
-</ComponentExample>
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.

apps/www/content/docs/components/date-picker.mdx

@@ -0,0 +1,87 @@
+---
+title: Date Picker
+description: A date picker component with range and presets.
+component: true
+---
+
+<ComponentExample src="/components/examples/date-picker/demo.tsx">
+  <DatePickerDemo />
+</ComponentExample>
+
+## About
+
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+
+## Installation
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+
+## Usage
+
+```tsx
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date Picker
+
+<ComponentExample src="/components/examples/date-picker/demo.tsx">
+  <DatePickerDemo />
+</ComponentExample>
+
+### Date Range Picker
+
+<ComponentExample src="/components/examples/date-picker/with-range.tsx">
+  <DatePickerWithRange />
+</ComponentExample>
+
+### With Presets
+
+<ComponentExample src="/components/examples/date-picker/with-presets.tsx">
+  <DatePickerWithPresets />
+</ComponentExample>