diff --git a/apps/v4/content/docs/components/base/combobox.mdx b/apps/v4/content/docs/components/base/combobox.mdx index 61c5b18d72..1219d4b6d1 100644 --- a/apps/v4/content/docs/components/base/combobox.mdx +++ b/apps/v4/content/docs/components/base/combobox.mdx @@ -1,8 +1,11 @@ --- title: Combobox -description: Autocomplete input and command palette with a list of suggestions. +description: Autocomplete input with a list of suggestions. base: base component: true +links: + doc: https://base-ui.com/react/components/combobox + api: https://base-ui.com/react/components/combobox#api-reference --- ` and the `` components. + -See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components. + + Command + Manual + + + +```bash +npx shadcn@latest add combobox +``` + + + + + + +Install the following dependencies: + +```bash +npm install @base-ui/react +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + ## Usage - - -```tsx showLineNumbers title="components/example-combobox.tsx" -"use client" - -import * as React from "react" -import { CheckIcon, ChevronsUpDownIcon } from "lucide-react" - -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +```tsx showLineNumbers import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/components/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/components/ui/combobox" +``` -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", - }, -] +```tsx showLineNumbers +const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleCombobox() { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") - return ( - - - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - - {framework.label} - - ))} - - - - - + + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } ``` - +## Custom Items + +Use `itemToStringValue` when your items are objects. + +```tsx showLineNumbers +import * as React from "react" + +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/components/ui/combobox" + +type Framework = { + label: string + value: string +} + +const frameworks: Framework[] = [ + { label: "Next.js", value: "next" }, + { label: "SvelteKit", value: "sveltekit" }, + { label: "Nuxt", value: "nuxt" }, +] + +export function ExampleComboboxCustomItems() { + return ( + framework.label} + > + + + No items found. + + {(framework) => ( + + {framework.label} + + )} + + + + ) +} +``` + +## Multiple Selection + +Use `multiple` with chips for multi-select behavior. + +```tsx showLineNumbers +import * as React from "react" + +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxValue, +} from "@/components/ui/combobox" + +const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] + +export function ExampleComboboxMultiple() { + const [value, setValue] = React.useState([]) + + return ( + + + + {value.map((item) => ( + {item} + ))} + + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} +``` ## Examples -### Combobox +### Basic - +A simple combobox with a list of frameworks. -### Popover + - +### Multiple -### Dropdown menu +A combobox with multiple selection using `multiple` and `ComboboxChips`. - + -### Responsive +### Clear Button -You can create a responsive combobox by using the `` on desktop and the `` components on mobile. +Use the `showClear` prop to show a clear button. - + + +### Groups + +Use `ComboboxGroup` and `ComboboxSeparator` to group items. + + + +### Custom Items + +You can render custom component inside `ComboboxItem`. + + + +### Invalid + +Use the `aria-invalid` prop to make the combobox invalid. + + + +### Disabled + +Use the `disabled` prop to disable the combobox. + + + +### Auto Highlight + +Use the `autoHighlight` prop automatically highlight the first item on filter. + + + +### Popup + +You can trigger the combobox from a button or any other component by using the `render` prop. Move the `ComboboxInput` inside the `ComboboxContent`. + + + +### Input Group + +You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`. + + + +## API Reference + +See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information. diff --git a/apps/v4/content/docs/components/radix/combobox.mdx b/apps/v4/content/docs/components/radix/combobox.mdx index 828ad21de2..fca3eaf527 100644 --- a/apps/v4/content/docs/components/radix/combobox.mdx +++ b/apps/v4/content/docs/components/radix/combobox.mdx @@ -1,149 +1,261 @@ --- title: Combobox -description: Autocomplete input and command palette with a list of suggestions. +description: Autocomplete input with a list of suggestions. base: radix component: true +links: + doc: https://base-ui.com/react/components/combobox + api: https://base-ui.com/react/components/combobox#api-reference --- ## Installation -The Combobox is built using a composition of the `` and the `` components. + -See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components. + + Command + Manual + + + +```bash +npx shadcn@latest add combobox +``` + + + + + + +Install the following dependencies: + +```bash +npm install @base-ui/react +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + ## Usage - - -```tsx showLineNumbers title="components/example-combobox.tsx" -"use client" - -import * as React from "react" -import { CheckIcon, ChevronsUpDownIcon } from "lucide-react" - -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +```tsx showLineNumbers import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/components/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/components/ui/combobox" +``` -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", - }, -] +```tsx showLineNumbers +const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] export function ExampleCombobox() { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") - return ( - - - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - - {framework.label} - - ))} - - - - - + + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } ``` - +## Custom Items + +Use `itemToStringValue` when your items are objects. + +```tsx showLineNumbers +import * as React from "react" + +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/components/ui/combobox" + +type Framework = { + label: string + value: string +} + +const frameworks: Framework[] = [ + { label: "Next.js", value: "next" }, + { label: "SvelteKit", value: "sveltekit" }, + { label: "Nuxt", value: "nuxt" }, +] + +export function ExampleComboboxCustomItems() { + return ( + framework.label} + > + + + No items found. + + {(framework) => ( + + {framework.label} + + )} + + + + ) +} +``` + +## Multiple Selection + +Use `multiple` with chips for multi-select behavior. + +```tsx showLineNumbers +import * as React from "react" + +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxValue, +} from "@/components/ui/combobox" + +const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] + +export function ExampleComboboxMultiple() { + const [value, setValue] = React.useState([]) + + return ( + + + + {value.map((item) => ( + {item} + ))} + + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} +``` ## Examples -### Combobox +### Basic - +A simple combobox with a list of frameworks. -### Popover + - +### Multiple -### Dropdown menu +A combobox with multiple selection using `multiple` and `ComboboxChips`. - + -### Responsive +### Clear Button -You can create a responsive combobox by using the `` on desktop and the `` components on mobile. +Use the `showClear` prop to show a clear button. - + + +### Groups + +Use `ComboboxGroup` and `ComboboxSeparator` to group items. + + + +### Custom Items + +You can render custom component inside `ComboboxItem`. + + + +### Invalid + +Use the `aria-invalid` prop to make the combobox invalid. + + + +### Disabled + +Use the `disabled` prop to disable the combobox. + + + +### Auto Highlight + +Use the `autoHighlight` prop automatically highlight the first item on filter. + + + +### Popup + +You can trigger the combobox from a button or any other component by using the `render` prop. Move the `ComboboxInput` inside the `ComboboxContent`. + + + +### Input Group + +You can add an addon to the combobox by using the `InputGroupAddon` component inside the `ComboboxInput`. + + + +## API Reference + +See the [Base UI](https://base-ui.com/react/components/combobox#api-reference) documentation for more information. diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx index 4a9689a4fc..51152b53e0 100644 --- a/apps/v4/examples/__index__.tsx +++ b/apps/v4/examples/__index__.tsx @@ -1383,6 +1383,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-clear": { + name: "combobox-clear", + filePath: "examples/radix/combobox-clear.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-clear") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-clear" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-custom": { + name: "combobox-custom", + filePath: "examples/radix/combobox-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-custom") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-custom" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-demo": { name: "combobox-demo", filePath: "examples/radix/combobox-demo.tsx", @@ -1409,42 +1435,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-dropdown-menu": { - name: "combobox-dropdown-menu", - filePath: "examples/radix/combobox-dropdown-menu.tsx", + "combobox-groups": { + name: "combobox-groups", + filePath: "examples/radix/combobox-groups.tsx", component: React.lazy(async () => { - const mod = await import("./radix/combobox-dropdown-menu") + const mod = await import("./radix/combobox-groups") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-dropdown-menu" + ) || "combobox-groups" return { default: mod.default || mod[exportName] } }), }, - "combobox-in-dialog": { - name: "combobox-in-dialog", - filePath: "examples/radix/combobox-in-dialog.tsx", + "combobox-input-group": { + name: "combobox-input-group", + filePath: "examples/radix/combobox-input-group.tsx", component: React.lazy(async () => { - const mod = await import("./radix/combobox-in-dialog") + const mod = await import("./radix/combobox-input-group") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-in-dialog" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-in-popup": { - name: "combobox-in-popup", - filePath: "examples/radix/combobox-in-popup.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-in-popup") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-in-popup" + ) || "combobox-input-group" return { default: mod.default || mod[exportName] } }), }, @@ -1461,58 +1474,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-large-list": { - name: "combobox-large-list", - filePath: "examples/radix/combobox-large-list.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-large-list") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-large-list" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-disabled": { - name: "combobox-multiple-disabled", - filePath: "examples/radix/combobox-multiple-disabled.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-multiple-disabled") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-disabled" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-invalid": { - name: "combobox-multiple-invalid", - filePath: "examples/radix/combobox-multiple-invalid.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-multiple-invalid") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-invalid" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-no-remove": { - name: "combobox-multiple-no-remove", - filePath: "examples/radix/combobox-multiple-no-remove.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-multiple-no-remove") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-no-remove" - return { default: mod.default || mod[exportName] } - }), - }, "combobox-multiple": { name: "combobox-multiple", filePath: "examples/radix/combobox-multiple.tsx", @@ -1526,120 +1487,16 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-popover": { - name: "combobox-popover", - filePath: "examples/radix/combobox-popover.tsx", + "combobox-popup": { + name: "combobox-popup", + filePath: "examples/radix/combobox-popup.tsx", component: React.lazy(async () => { - const mod = await import("./radix/combobox-popover") + const mod = await import("./radix/combobox-popup") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-popover" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-responsive": { - name: "combobox-responsive", - filePath: "examples/radix/combobox-responsive.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-responsive") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-responsive" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-clear": { - name: "combobox-with-clear", - filePath: "examples/radix/combobox-with-clear.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-clear") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-clear" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-custom-items": { - name: "combobox-with-custom-items", - filePath: "examples/radix/combobox-with-custom-items.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-custom-items") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-custom-items" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-form": { - name: "combobox-with-form", - filePath: "examples/radix/combobox-with-form.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-form") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-form" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-groups-and-separator": { - name: "combobox-with-groups-and-separator", - filePath: "examples/radix/combobox-with-groups-and-separator.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-groups-and-separator") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-groups-and-separator" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-groups": { - name: "combobox-with-groups", - filePath: "examples/radix/combobox-with-groups.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-groups") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-groups" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-other-inputs": { - name: "combobox-with-other-inputs", - filePath: "examples/radix/combobox-with-other-inputs.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/combobox-with-other-inputs") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-other-inputs" - return { default: mod.default || mod[exportName] } - }), - }, - "comboxbox-input-addon": { - name: "comboxbox-input-addon", - filePath: "examples/radix/comboxbox-input-addon.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/comboxbox-input-addon") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "comboxbox-input-addon" + ) || "combobox-popup" return { default: mod.default || mod[exportName] } }), }, @@ -7991,6 +7848,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-clear": { + name: "combobox-clear", + filePath: "examples/base/combobox-clear.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-clear") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-clear" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-custom": { + name: "combobox-custom", + filePath: "examples/base/combobox-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-custom") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-custom" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-demo": { name: "combobox-demo", filePath: "examples/base/combobox-demo.tsx", @@ -8017,42 +7900,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-dropdown-menu": { - name: "combobox-dropdown-menu", - filePath: "examples/base/combobox-dropdown-menu.tsx", + "combobox-groups": { + name: "combobox-groups", + filePath: "examples/base/combobox-groups.tsx", component: React.lazy(async () => { - const mod = await import("./base/combobox-dropdown-menu") + const mod = await import("./base/combobox-groups") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-dropdown-menu" + ) || "combobox-groups" return { default: mod.default || mod[exportName] } }), }, - "combobox-in-dialog": { - name: "combobox-in-dialog", - filePath: "examples/base/combobox-in-dialog.tsx", + "combobox-input-group": { + name: "combobox-input-group", + filePath: "examples/base/combobox-input-group.tsx", component: React.lazy(async () => { - const mod = await import("./base/combobox-in-dialog") + const mod = await import("./base/combobox-input-group") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-in-dialog" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-in-popup": { - name: "combobox-in-popup", - filePath: "examples/base/combobox-in-popup.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-in-popup") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-in-popup" + ) || "combobox-input-group" return { default: mod.default || mod[exportName] } }), }, @@ -8069,58 +7939,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-large-list": { - name: "combobox-large-list", - filePath: "examples/base/combobox-large-list.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-large-list") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-large-list" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-disabled": { - name: "combobox-multiple-disabled", - filePath: "examples/base/combobox-multiple-disabled.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-multiple-disabled") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-disabled" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-invalid": { - name: "combobox-multiple-invalid", - filePath: "examples/base/combobox-multiple-invalid.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-multiple-invalid") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-invalid" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-multiple-no-remove": { - name: "combobox-multiple-no-remove", - filePath: "examples/base/combobox-multiple-no-remove.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-multiple-no-remove") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-multiple-no-remove" - return { default: mod.default || mod[exportName] } - }), - }, "combobox-multiple": { name: "combobox-multiple", filePath: "examples/base/combobox-multiple.tsx", @@ -8134,120 +7952,16 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "combobox-popover": { - name: "combobox-popover", - filePath: "examples/base/combobox-popover.tsx", + "combobox-popup": { + name: "combobox-popup", + filePath: "examples/base/combobox-popup.tsx", component: React.lazy(async () => { - const mod = await import("./base/combobox-popover") + const mod = await import("./base/combobox-popup") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-popover" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-responsive": { - name: "combobox-responsive", - filePath: "examples/base/combobox-responsive.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-responsive") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-responsive" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-clear": { - name: "combobox-with-clear", - filePath: "examples/base/combobox-with-clear.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-clear") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-clear" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-custom-items": { - name: "combobox-with-custom-items", - filePath: "examples/base/combobox-with-custom-items.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-custom-items") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-custom-items" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-form": { - name: "combobox-with-form", - filePath: "examples/base/combobox-with-form.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-form") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-form" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-groups-and-separator": { - name: "combobox-with-groups-and-separator", - filePath: "examples/base/combobox-with-groups-and-separator.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-groups-and-separator") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-groups-and-separator" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-groups": { - name: "combobox-with-groups", - filePath: "examples/base/combobox-with-groups.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-groups") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-groups" - return { default: mod.default || mod[exportName] } - }), - }, - "combobox-with-other-inputs": { - name: "combobox-with-other-inputs", - filePath: "examples/base/combobox-with-other-inputs.tsx", - component: React.lazy(async () => { - const mod = await import("./base/combobox-with-other-inputs") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "combobox-with-other-inputs" - return { default: mod.default || mod[exportName] } - }), - }, - "comboxbox-input-addon": { - name: "comboxbox-input-addon", - filePath: "examples/base/comboxbox-input-addon.tsx", - component: React.lazy(async () => { - const mod = await import("./base/comboxbox-input-addon") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "comboxbox-input-addon" + ) || "combobox-popup" return { default: mod.default || mod[exportName] } }), }, diff --git a/apps/v4/examples/base/combobox-auto-highlight.tsx b/apps/v4/examples/base/combobox-auto-highlight.tsx index 0a9c07ca7b..c3944be9ec 100644 --- a/apps/v4/examples/base/combobox-auto-highlight.tsx +++ b/apps/v4/examples/base/combobox-auto-highlight.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -16,41 +17,6 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - export function ComboboxAutoHighlight() { return ( diff --git a/apps/v4/examples/base/combobox-basic.tsx b/apps/v4/examples/base/combobox-basic.tsx index bcf42b5216..4279c4a445 100644 --- a/apps/v4/examples/base/combobox-basic.tsx +++ b/apps/v4/examples/base/combobox-basic.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -16,42 +17,7 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxBasic() { +export default function ComboboxBasic() { return ( diff --git a/apps/v4/examples/base/combobox-with-clear.tsx b/apps/v4/examples/base/combobox-clear.tsx similarity index 57% rename from apps/v4/examples/base/combobox-with-clear.tsx rename to apps/v4/examples/base/combobox-clear.tsx index 8bebfda480..b2239f5cdb 100644 --- a/apps/v4/examples/base/combobox-with-clear.tsx +++ b/apps/v4/examples/base/combobox-clear.tsx @@ -1,4 +1,5 @@ -import { Button } from "@/examples/base/ui/button" +"use client" + import { Combobox, ComboboxContent, @@ -7,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -17,41 +17,6 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - export function ComboboxWithClear() { return ( diff --git a/apps/v4/examples/base/combobox-custom.tsx b/apps/v4/examples/base/combobox-custom.tsx new file mode 100644 index 0000000000..ca9f447818 --- /dev/null +++ b/apps/v4/examples/base/combobox-custom.tsx @@ -0,0 +1,99 @@ +"use client" + +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { + Item, + ItemContent, + ItemDescription, + ItemTitle, +} from "@/examples/base/ui/item" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, +] + +export function ComboboxWithCustomItems() { + return ( + country.code !== "")} + itemToStringValue={(country: (typeof countries)[number]) => country.label} + > + + + No countries found. + + {(country) => ( + + + + + {country.label} + + + {country.continent} ({country.code}) + + + + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-demo.tsx b/apps/v4/examples/base/combobox-demo.tsx index 37a8e6a4aa..4279c4a445 100644 --- a/apps/v4/examples/base/combobox-demo.tsx +++ b/apps/v4/examples/base/combobox-demo.tsx @@ -1,96 +1,36 @@ "use client" -import * as React from "react" -import { Button } from "@/examples/base/ui/button" import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/base/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/base/ui/popover" -import { Check, ChevronsUpDown } from "lucide-react" - -import { cn } from "@/lib/utils" + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" 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 default function ComboboxDemo() { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const +export default function ComboboxBasic() { return ( - - - } - > - {value - ? frameworks.find((framework) => framework.value === value)?.label - : "Select framework..."} - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - {framework.label} - - - ))} - - - - - + + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } diff --git a/apps/v4/examples/base/combobox-disabled.tsx b/apps/v4/examples/base/combobox-disabled.tsx index 5eaaa476d0..9bdb316163 100644 --- a/apps/v4/examples/base/combobox-disabled.tsx +++ b/apps/v4/examples/base/combobox-disabled.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -16,41 +17,6 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - export function ComboboxDisabled() { return ( diff --git a/apps/v4/examples/base/combobox-dropdown-menu.tsx b/apps/v4/examples/base/combobox-dropdown-menu.tsx deleted file mode 100644 index 3522f36050..0000000000 --- a/apps/v4/examples/base/combobox-dropdown-menu.tsx +++ /dev/null @@ -1,99 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/base/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/base/ui/command" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuTrigger, -} from "@/examples/base/ui/dropdown-menu" -import { MoreHorizontal } from "lucide-react" - -const labels = [ - "feature", - "bug", - "enhancement", - "documentation", - "design", - "question", - "maintenance", -] - -export default function ComboboxDropdownMenu() { - const [label, setLabel] = React.useState("feature") - const [open, setOpen] = React.useState(false) - - return ( -
-

- - {label} - - Create a new project -

- - }> - - - - - Actions - Assign to... - Set due date... - - - Apply label - - - - - No label found. - - {labels.map((label) => ( - { - setLabel(value) - setOpen(false) - }} - > - {label} - - ))} - - - - - - - - Delete - ⌘⌫ - - - - -
- ) -} diff --git a/apps/v4/examples/radix/combobox-with-groups.tsx b/apps/v4/examples/base/combobox-groups.tsx similarity index 86% rename from apps/v4/examples/radix/combobox-with-groups.tsx rename to apps/v4/examples/base/combobox-groups.tsx index 64557b874b..c9dba221e4 100644 --- a/apps/v4/examples/radix/combobox-with-groups.tsx +++ b/apps/v4/examples/base/combobox-groups.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxCollection, @@ -8,8 +10,8 @@ import { ComboboxItem, ComboboxLabel, ComboboxList, -} from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" + ComboboxSeparator, +} from "@/examples/base/ui/combobox" const timezones = [ { @@ -47,14 +49,14 @@ const timezones = [ }, ] as const -export function ComboboxWithGroups() { +export function ComboboxWithGroupsAndSeparator() { return ( No timezones found. - {(group) => ( + {(group, index) => ( {group.value} @@ -64,6 +66,7 @@ export function ComboboxWithGroups() { )} + {index < timezones.length - 1 && } )} diff --git a/apps/v4/examples/base/combobox-in-dialog.tsx b/apps/v4/examples/base/combobox-in-dialog.tsx deleted file mode 100644 index 072d56fb8b..0000000000 --- a/apps/v4/examples/base/combobox-in-dialog.tsx +++ /dev/null @@ -1,128 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/base/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/examples/base/ui/dialog" -import { Field, FieldLabel } from "@/examples/base/ui/field" -import { Select } from "@/examples/base/ui/select" -import { toast } from "sonner" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxInDialog() { - const [open, setOpen] = React.useState(false) - - return ( - <> - - }> - Open Dialog - - - - Select Framework - - Choose your preferred framework from the list below. - - - - - Framework - - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/combobox-in-popup.tsx b/apps/v4/examples/base/combobox-in-popup.tsx deleted file mode 100644 index ef823674a9..0000000000 --- a/apps/v4/examples/base/combobox-in-popup.tsx +++ /dev/null @@ -1,488 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, - ComboboxTrigger, - ComboboxValue, -} from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" - -const countries = [ - { code: "", value: "", continent: "", label: "Select country" }, - { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, - { code: "al", value: "albania", label: "Albania", continent: "Europe" }, - { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, - { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, - { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, - { - code: "ar", - value: "argentina", - label: "Argentina", - continent: "South America", - }, - { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, - { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, - { code: "at", value: "austria", label: "Austria", continent: "Europe" }, - { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, - { - code: "bs", - value: "bahamas", - label: "Bahamas", - continent: "North America", - }, - { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, - { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, - { - code: "bb", - value: "barbados", - label: "Barbados", - continent: "North America", - }, - { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, - { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, - { code: "bz", value: "belize", label: "Belize", continent: "North America" }, - { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, - { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, - { - code: "bo", - value: "bolivia", - label: "Bolivia", - continent: "South America", - }, - { - code: "ba", - value: "bosnia-and-herzegovina", - label: "Bosnia and Herzegovina", - continent: "Europe", - }, - { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, - { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, - { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, - { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, - { - code: "bf", - value: "burkina-faso", - label: "Burkina Faso", - continent: "Africa", - }, - { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, - { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, - { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, - { code: "ca", value: "canada", label: "Canada", continent: "North America" }, - { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, - { - code: "cf", - value: "central-african-republic", - label: "Central African Republic", - continent: "Africa", - }, - { code: "td", value: "chad", label: "Chad", continent: "Africa" }, - { code: "cl", value: "chile", label: "Chile", continent: "South America" }, - { code: "cn", value: "china", label: "China", continent: "Asia" }, - { - code: "co", - value: "colombia", - label: "Colombia", - continent: "South America", - }, - { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, - { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, - { - code: "cr", - value: "costa-rica", - label: "Costa Rica", - continent: "North America", - }, - { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, - { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, - { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, - { - code: "cz", - value: "czech-republic", - label: "Czech Republic", - continent: "Europe", - }, - { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, - { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, - { - code: "dm", - value: "dominica", - label: "Dominica", - continent: "North America", - }, - { - code: "do", - value: "dominican-republic", - label: "Dominican Republic", - continent: "North America", - }, - { - code: "ec", - value: "ecuador", - label: "Ecuador", - continent: "South America", - }, - { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, - { - code: "sv", - value: "el-salvador", - label: "El Salvador", - continent: "North America", - }, - { - code: "gq", - value: "equatorial-guinea", - label: "Equatorial Guinea", - continent: "Africa", - }, - { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, - { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, - { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, - { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, - { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, - { code: "fr", value: "france", label: "France", continent: "Europe" }, - { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, - { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, - { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, - { code: "de", value: "germany", label: "Germany", continent: "Europe" }, - { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, - { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, - { - code: "gd", - value: "grenada", - label: "Grenada", - continent: "North America", - }, - { - code: "gt", - value: "guatemala", - label: "Guatemala", - continent: "North America", - }, - { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, - { - code: "gw", - value: "guinea-bissau", - label: "Guinea-Bissau", - continent: "Africa", - }, - { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, - { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, - { - code: "hn", - value: "honduras", - label: "Honduras", - continent: "North America", - }, - { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, - { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, - { code: "in", value: "india", label: "India", continent: "Asia" }, - { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, - { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, - { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, - { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, - { code: "il", value: "israel", label: "Israel", continent: "Asia" }, - { code: "it", value: "italy", label: "Italy", continent: "Europe" }, - { - code: "jm", - value: "jamaica", - label: "Jamaica", - continent: "North America", - }, - { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, - { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, - { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, - { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, - { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, - { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, - { code: "la", value: "laos", label: "Laos", continent: "Asia" }, - { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, - { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, - { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, - { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, - { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, - { - code: "li", - value: "liechtenstein", - label: "Liechtenstein", - continent: "Europe", - }, - { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, - { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, - { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, - { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, - { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, - { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, - { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, - { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, - { - code: "mh", - value: "marshall-islands", - label: "Marshall Islands", - continent: "Oceania", - }, - { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, - { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, - { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, - { - code: "fm", - value: "micronesia", - label: "Micronesia", - continent: "Oceania", - }, - { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, - { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, - { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, - { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, - { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, - { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, - { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, - { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, - { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, - { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, - { - code: "nl", - value: "netherlands", - label: "Netherlands", - continent: "Europe", - }, - { - code: "nz", - value: "new-zealand", - label: "New Zealand", - continent: "Oceania", - }, - { - code: "ni", - value: "nicaragua", - label: "Nicaragua", - continent: "North America", - }, - { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, - { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, - { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, - { - code: "mk", - value: "north-macedonia", - label: "North Macedonia", - continent: "Europe", - }, - { code: "no", value: "norway", label: "Norway", continent: "Europe" }, - { code: "om", value: "oman", label: "Oman", continent: "Asia" }, - { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, - { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, - { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, - { code: "pa", value: "panama", label: "Panama", continent: "North America" }, - { - code: "pg", - value: "papua-new-guinea", - label: "Papua New Guinea", - continent: "Oceania", - }, - { - code: "py", - value: "paraguay", - label: "Paraguay", - continent: "South America", - }, - { code: "pe", value: "peru", label: "Peru", continent: "South America" }, - { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, - { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, - { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, - { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, - { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, - { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, - { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, - { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, - { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, - { - code: "sa", - value: "saudi-arabia", - label: "Saudi Arabia", - continent: "Asia", - }, - { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, - { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, - { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, - { - code: "sl", - value: "sierra-leone", - label: "Sierra Leone", - continent: "Africa", - }, - { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, - { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, - { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, - { - code: "sb", - value: "solomon-islands", - label: "Solomon Islands", - continent: "Oceania", - }, - { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, - { - code: "za", - value: "south-africa", - label: "South Africa", - continent: "Africa", - }, - { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, - { - code: "ss", - value: "south-sudan", - label: "South Sudan", - continent: "Africa", - }, - { code: "es", value: "spain", label: "Spain", continent: "Europe" }, - { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, - { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, - { - code: "sr", - value: "suriname", - label: "Suriname", - continent: "South America", - }, - { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, - { - code: "ch", - value: "switzerland", - label: "Switzerland", - continent: "Europe", - }, - { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, - { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, - { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, - { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, - { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, - { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, - { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, - { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, - { - code: "tt", - value: "trinidad-and-tobago", - label: "Trinidad and Tobago", - continent: "North America", - }, - { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, - { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, - { - code: "tm", - value: "turkmenistan", - label: "Turkmenistan", - continent: "Asia", - }, - { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, - { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, - { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, - { - code: "ae", - value: "united-arab-emirates", - label: "United Arab Emirates", - continent: "Asia", - }, - { - code: "gb", - value: "united-kingdom", - label: "United Kingdom", - continent: "Europe", - }, - { - code: "us", - value: "united-states", - label: "United States", - continent: "North America", - }, - { - code: "uy", - value: "uruguay", - label: "Uruguay", - continent: "South America", - }, - { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, - { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, - { - code: "va", - value: "vatican-city", - label: "Vatican City", - continent: "Europe", - }, - { - code: "ve", - value: "venezuela", - label: "Venezuela", - continent: "South America", - }, - { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, - { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, - { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, - { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, -] - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxInPopup() { - return ( - <> - - - } - > - - - - - No items found. - - {(item) => ( - - {item.label} - - )} - - - - - ) -} diff --git a/apps/v4/examples/base/comboxbox-input-addon.tsx b/apps/v4/examples/base/combobox-input-group.tsx similarity index 72% rename from apps/v4/examples/base/comboxbox-input-addon.tsx rename to apps/v4/examples/base/combobox-input-group.tsx index 8b9d4043b1..d7255f2a15 100644 --- a/apps/v4/examples/base/comboxbox-input-addon.tsx +++ b/apps/v4/examples/base/combobox-input-group.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxCollection, @@ -9,9 +11,7 @@ import { ComboboxLabel, ComboboxList, } from "@/examples/base/ui/combobox" -import { Input } from "@/examples/base/ui/input" -import { InputGroup, InputGroupAddon } from "@/examples/base/ui/input-group" -import { Select } from "@/examples/base/ui/select" +import { InputGroupAddon } from "@/examples/base/ui/input-group" import { GlobeIcon } from "lucide-react" const timezones = [ @@ -50,42 +50,7 @@ const timezones = [ }, ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboxboxInputAddon() { +export function ComboxboxInputGroup() { return ( diff --git a/apps/v4/examples/base/combobox-invalid.tsx b/apps/v4/examples/base/combobox-invalid.tsx index ba3c9f2310..89553ea33b 100644 --- a/apps/v4/examples/base/combobox-invalid.tsx +++ b/apps/v4/examples/base/combobox-invalid.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,13 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/base/ui/combobox" -import { - Field, - FieldDescription, - FieldError, - FieldLabel, -} from "@/examples/base/ui/field" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -22,79 +17,20 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - export function ComboboxInvalid() { return ( -
- - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Framework - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - Please select a valid framework. - - -
+ + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } diff --git a/apps/v4/examples/base/combobox-large-list.tsx b/apps/v4/examples/base/combobox-large-list.tsx deleted file mode 100644 index c7fcc29eca..0000000000 --- a/apps/v4/examples/base/combobox-large-list.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { Item } from "@/examples/base/ui/item" -import { Select } from "@/examples/base/ui/select" - -const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`) - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxLargeList() { - return ( - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-multiple-disabled.tsx b/apps/v4/examples/base/combobox-multiple-disabled.tsx deleted file mode 100644 index 9e58e4fa87..0000000000 --- a/apps/v4/examples/base/combobox-multiple-disabled.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxMultipleDisabled() { - const anchor = useComboboxAnchor() - - return ( - - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-multiple-invalid.tsx b/apps/v4/examples/base/combobox-multiple-invalid.tsx deleted file mode 100644 index c8afbe7554..0000000000 --- a/apps/v4/examples/base/combobox-multiple-invalid.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/base/ui/combobox" -import { - Field, - FieldDescription, - FieldError, - FieldLabel, -} from "@/examples/base/ui/field" -import { Select } from "@/examples/base/ui/select" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxMultipleInvalid() { - const anchor1 = useComboboxAnchor() - const anchor2 = useComboboxAnchor() - - return ( -
- - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Frameworks - - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Please select at least one framework. - - - -
- ) -} diff --git a/apps/v4/examples/base/combobox-multiple-no-remove.tsx b/apps/v4/examples/base/combobox-multiple-no-remove.tsx deleted file mode 100644 index 6b3ab4ec39..0000000000 --- a/apps/v4/examples/base/combobox-multiple-no-remove.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxMultipleNoRemove() { - const anchor = useComboboxAnchor() - - return ( - - - - {(values) => ( - - {values.map((value: string) => ( - - {value} - - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-multiple.tsx b/apps/v4/examples/base/combobox-multiple.tsx index c1951ac31b..97b974c3c8 100644 --- a/apps/v4/examples/base/combobox-multiple.tsx +++ b/apps/v4/examples/base/combobox-multiple.tsx @@ -1,3 +1,5 @@ +"use client" + import * as React from "react" import { Combobox, @@ -11,7 +13,6 @@ import { ComboboxValue, useComboboxAnchor, } from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" const frameworks = [ "Next.js", @@ -21,41 +22,6 @@ const frameworks = [ "Astro", ] as const -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - export function ComboboxMultiple() { const anchor = useComboboxAnchor() @@ -66,7 +32,7 @@ export function ComboboxMultiple() { items={frameworks} defaultValue={[frameworks[0]]} > - + {(values) => ( diff --git a/apps/v4/examples/base/combobox-popover.tsx b/apps/v4/examples/base/combobox-popover.tsx deleted file mode 100644 index 14da8b32cc..0000000000 --- a/apps/v4/examples/base/combobox-popover.tsx +++ /dev/null @@ -1,92 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/base/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/base/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/base/ui/popover" - -type Status = { - value: string - label: string -} - -const statuses: Status[] = [ - { - value: "backlog", - label: "Backlog", - }, - { - value: "todo", - label: "Todo", - }, - { - value: "in progress", - label: "In Progress", - }, - { - value: "done", - label: "Done", - }, - { - value: "canceled", - label: "Canceled", - }, -] - -export default function ComboboxPopover() { - const [open, setOpen] = React.useState(false) - const [selectedStatus, setSelectedStatus] = React.useState( - null - ) - - return ( -
-

Status

- - - } - > - {selectedStatus ? <>{selectedStatus.label} : <>+ Set status} - - - - - - No results found. - - {statuses.map((status) => ( - { - setSelectedStatus( - statuses.find((priority) => priority.value === value) || - null - ) - setOpen(false) - }} - > - {status.label} - - ))} - - - - - -
- ) -} diff --git a/apps/v4/examples/base/combobox-popup.tsx b/apps/v4/examples/base/combobox-popup.tsx new file mode 100644 index 0000000000..584d8f189e --- /dev/null +++ b/apps/v4/examples/base/combobox-popup.tsx @@ -0,0 +1,96 @@ +"use client" + +import { Button } from "@/examples/base/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxTrigger, + ComboboxValue, +} from "@/examples/base/ui/combobox" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, +] + +export function ComboboxPopup() { + return ( + <> + + + } + > + + + + + No items found. + + {(item) => ( + + {item.label} + + )} + + + + + ) +} diff --git a/apps/v4/examples/base/combobox-responsive.tsx b/apps/v4/examples/base/combobox-responsive.tsx deleted file mode 100644 index 911784f0a9..0000000000 --- a/apps/v4/examples/base/combobox-responsive.tsx +++ /dev/null @@ -1,121 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/base/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/base/ui/command" -import { Drawer, DrawerContent, DrawerTrigger } from "@/examples/base/ui/drawer" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/base/ui/popover" - -import { useMediaQuery } from "@/hooks/use-media-query" - -type Status = { - value: string - label: string -} - -const statuses: Status[] = [ - { - value: "backlog", - label: "Backlog", - }, - { - value: "todo", - label: "Todo", - }, - { - value: "in progress", - label: "In Progress", - }, - { - value: "done", - label: "Done", - }, - { - value: "canceled", - label: "Canceled", - }, -] - -export default function ComboBoxResponsive() { - const [open, setOpen] = React.useState(false) - const isDesktop = useMediaQuery("(min-width: 768px)") - const [selectedStatus, setSelectedStatus] = React.useState( - null - ) - - if (isDesktop) { - return ( - - - } - > - {selectedStatus ? <>{selectedStatus.label} : <>+ Set status} - - - - - - ) - } - - return ( - - - - - -
- -
- - - ) -} - -function StatusList({ - setOpen, - setSelectedStatus, -}: { - setOpen: (open: boolean) => void - setSelectedStatus: (status: Status | null) => void -}) { - return ( - - - - No results found. - - {statuses.map((status) => ( - { - setSelectedStatus( - statuses.find((priority) => priority.value === value) || null - ) - setOpen(false) - }} - > - {status.label} - - ))} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-with-custom-items.tsx b/apps/v4/examples/base/combobox-with-custom-items.tsx deleted file mode 100644 index 3cab674660..0000000000 --- a/apps/v4/examples/base/combobox-with-custom-items.tsx +++ /dev/null @@ -1,491 +0,0 @@ -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { - Item, - ItemContent, - ItemDescription, - ItemTitle, -} from "@/examples/base/ui/item" -import { Select } from "@/examples/base/ui/select" - -const countries = [ - { code: "", value: "", continent: "", label: "Select country" }, - { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, - { code: "al", value: "albania", label: "Albania", continent: "Europe" }, - { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, - { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, - { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, - { - code: "ar", - value: "argentina", - label: "Argentina", - continent: "South America", - }, - { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, - { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, - { code: "at", value: "austria", label: "Austria", continent: "Europe" }, - { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, - { - code: "bs", - value: "bahamas", - label: "Bahamas", - continent: "North America", - }, - { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, - { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, - { - code: "bb", - value: "barbados", - label: "Barbados", - continent: "North America", - }, - { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, - { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, - { code: "bz", value: "belize", label: "Belize", continent: "North America" }, - { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, - { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, - { - code: "bo", - value: "bolivia", - label: "Bolivia", - continent: "South America", - }, - { - code: "ba", - value: "bosnia-and-herzegovina", - label: "Bosnia and Herzegovina", - continent: "Europe", - }, - { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, - { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, - { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, - { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, - { - code: "bf", - value: "burkina-faso", - label: "Burkina Faso", - continent: "Africa", - }, - { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, - { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, - { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, - { code: "ca", value: "canada", label: "Canada", continent: "North America" }, - { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, - { - code: "cf", - value: "central-african-republic", - label: "Central African Republic", - continent: "Africa", - }, - { code: "td", value: "chad", label: "Chad", continent: "Africa" }, - { code: "cl", value: "chile", label: "Chile", continent: "South America" }, - { code: "cn", value: "china", label: "China", continent: "Asia" }, - { - code: "co", - value: "colombia", - label: "Colombia", - continent: "South America", - }, - { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, - { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, - { - code: "cr", - value: "costa-rica", - label: "Costa Rica", - continent: "North America", - }, - { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, - { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, - { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, - { - code: "cz", - value: "czech-republic", - label: "Czech Republic", - continent: "Europe", - }, - { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, - { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, - { - code: "dm", - value: "dominica", - label: "Dominica", - continent: "North America", - }, - { - code: "do", - value: "dominican-republic", - label: "Dominican Republic", - continent: "North America", - }, - { - code: "ec", - value: "ecuador", - label: "Ecuador", - continent: "South America", - }, - { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, - { - code: "sv", - value: "el-salvador", - label: "El Salvador", - continent: "North America", - }, - { - code: "gq", - value: "equatorial-guinea", - label: "Equatorial Guinea", - continent: "Africa", - }, - { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, - { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, - { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, - { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, - { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, - { code: "fr", value: "france", label: "France", continent: "Europe" }, - { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, - { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, - { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, - { code: "de", value: "germany", label: "Germany", continent: "Europe" }, - { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, - { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, - { - code: "gd", - value: "grenada", - label: "Grenada", - continent: "North America", - }, - { - code: "gt", - value: "guatemala", - label: "Guatemala", - continent: "North America", - }, - { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, - { - code: "gw", - value: "guinea-bissau", - label: "Guinea-Bissau", - continent: "Africa", - }, - { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, - { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, - { - code: "hn", - value: "honduras", - label: "Honduras", - continent: "North America", - }, - { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, - { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, - { code: "in", value: "india", label: "India", continent: "Asia" }, - { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, - { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, - { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, - { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, - { code: "il", value: "israel", label: "Israel", continent: "Asia" }, - { code: "it", value: "italy", label: "Italy", continent: "Europe" }, - { - code: "jm", - value: "jamaica", - label: "Jamaica", - continent: "North America", - }, - { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, - { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, - { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, - { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, - { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, - { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, - { code: "la", value: "laos", label: "Laos", continent: "Asia" }, - { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, - { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, - { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, - { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, - { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, - { - code: "li", - value: "liechtenstein", - label: "Liechtenstein", - continent: "Europe", - }, - { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, - { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, - { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, - { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, - { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, - { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, - { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, - { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, - { - code: "mh", - value: "marshall-islands", - label: "Marshall Islands", - continent: "Oceania", - }, - { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, - { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, - { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, - { - code: "fm", - value: "micronesia", - label: "Micronesia", - continent: "Oceania", - }, - { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, - { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, - { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, - { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, - { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, - { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, - { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, - { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, - { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, - { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, - { - code: "nl", - value: "netherlands", - label: "Netherlands", - continent: "Europe", - }, - { - code: "nz", - value: "new-zealand", - label: "New Zealand", - continent: "Oceania", - }, - { - code: "ni", - value: "nicaragua", - label: "Nicaragua", - continent: "North America", - }, - { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, - { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, - { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, - { - code: "mk", - value: "north-macedonia", - label: "North Macedonia", - continent: "Europe", - }, - { code: "no", value: "norway", label: "Norway", continent: "Europe" }, - { code: "om", value: "oman", label: "Oman", continent: "Asia" }, - { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, - { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, - { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, - { code: "pa", value: "panama", label: "Panama", continent: "North America" }, - { - code: "pg", - value: "papua-new-guinea", - label: "Papua New Guinea", - continent: "Oceania", - }, - { - code: "py", - value: "paraguay", - label: "Paraguay", - continent: "South America", - }, - { code: "pe", value: "peru", label: "Peru", continent: "South America" }, - { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, - { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, - { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, - { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, - { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, - { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, - { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, - { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, - { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, - { - code: "sa", - value: "saudi-arabia", - label: "Saudi Arabia", - continent: "Asia", - }, - { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, - { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, - { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, - { - code: "sl", - value: "sierra-leone", - label: "Sierra Leone", - continent: "Africa", - }, - { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, - { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, - { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, - { - code: "sb", - value: "solomon-islands", - label: "Solomon Islands", - continent: "Oceania", - }, - { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, - { - code: "za", - value: "south-africa", - label: "South Africa", - continent: "Africa", - }, - { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, - { - code: "ss", - value: "south-sudan", - label: "South Sudan", - continent: "Africa", - }, - { code: "es", value: "spain", label: "Spain", continent: "Europe" }, - { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, - { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, - { - code: "sr", - value: "suriname", - label: "Suriname", - continent: "South America", - }, - { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, - { - code: "ch", - value: "switzerland", - label: "Switzerland", - continent: "Europe", - }, - { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, - { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, - { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, - { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, - { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, - { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, - { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, - { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, - { - code: "tt", - value: "trinidad-and-tobago", - label: "Trinidad and Tobago", - continent: "North America", - }, - { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, - { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, - { - code: "tm", - value: "turkmenistan", - label: "Turkmenistan", - continent: "Asia", - }, - { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, - { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, - { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, - { - code: "ae", - value: "united-arab-emirates", - label: "United Arab Emirates", - continent: "Asia", - }, - { - code: "gb", - value: "united-kingdom", - label: "United Kingdom", - continent: "Europe", - }, - { - code: "us", - value: "united-states", - label: "United States", - continent: "North America", - }, - { - code: "uy", - value: "uruguay", - label: "Uruguay", - continent: "South America", - }, - { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, - { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, - { - code: "va", - value: "vatican-city", - label: "Vatican City", - continent: "Europe", - }, - { - code: "ve", - value: "venezuela", - label: "Venezuela", - continent: "South America", - }, - { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, - { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, - { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, - { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, -] - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxWithCustomItems() { - return ( - country.code !== "")} - itemToStringValue={(country: (typeof countries)[number]) => country.label} - > - - - No countries found. - - {(country) => ( - - - - - {country.label} - - - {country.continent} ({country.code}) - - - - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-with-form.tsx b/apps/v4/examples/base/combobox-with-form.tsx deleted file mode 100644 index 3febdced0f..0000000000 --- a/apps/v4/examples/base/combobox-with-form.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import * as React from "react" -import { Button } from "@/examples/base/ui/button" -import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" -import { Select } from "@/examples/base/ui/select" -import { toast } from "sonner" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxWithForm() { - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault() - const formData = new FormData(event.target as HTMLFormElement) - const framework = formData.get("framework") as string - toast(`You selected ${framework} as your framework.`) - } - - return ( - - -
- - - Framework - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - -
- - - - - - ) -} diff --git a/apps/v4/examples/base/combobox-with-groups-and-separator.tsx b/apps/v4/examples/base/combobox-with-groups-and-separator.tsx deleted file mode 100644 index a0ebad2cb5..0000000000 --- a/apps/v4/examples/base/combobox-with-groups-and-separator.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { - Combobox, - ComboboxCollection, - ComboboxContent, - ComboboxEmpty, - ComboboxGroup, - ComboboxInput, - ComboboxItem, - ComboboxLabel, - ComboboxList, - ComboboxSeparator, -} from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" - -const timezones = [ - { - value: "Americas", - items: [ - "(GMT-5) New York", - "(GMT-8) Los Angeles", - "(GMT-6) Chicago", - "(GMT-5) Toronto", - "(GMT-8) Vancouver", - "(GMT-3) São Paulo", - ], - }, - { - value: "Europe", - items: [ - "(GMT+0) London", - "(GMT+1) Paris", - "(GMT+1) Berlin", - "(GMT+1) Rome", - "(GMT+1) Madrid", - "(GMT+1) Amsterdam", - ], - }, - { - value: "Asia/Pacific", - items: [ - "(GMT+9) Tokyo", - "(GMT+8) Shanghai", - "(GMT+8) Singapore", - "(GMT+4) Dubai", - "(GMT+11) Sydney", - "(GMT+9) Seoul", - ], - }, -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxWithGroupsAndSeparator() { - return ( - - - - No timezones found. - - {(group) => ( - - {group.value} - - {(item) => ( - - {item} - - )} - - - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-with-groups.tsx b/apps/v4/examples/base/combobox-with-groups.tsx deleted file mode 100644 index f978629fc8..0000000000 --- a/apps/v4/examples/base/combobox-with-groups.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { - Combobox, - ComboboxCollection, - ComboboxContent, - ComboboxEmpty, - ComboboxGroup, - ComboboxInput, - ComboboxItem, - ComboboxLabel, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { Select } from "@/examples/base/ui/select" - -const timezones = [ - { - value: "Americas", - items: [ - "(GMT-5) New York", - "(GMT-8) Los Angeles", - "(GMT-6) Chicago", - "(GMT-5) Toronto", - "(GMT-8) Vancouver", - "(GMT-3) São Paulo", - ], - }, - { - value: "Europe", - items: [ - "(GMT+0) London", - "(GMT+1) Paris", - "(GMT+1) Berlin", - "(GMT+1) Rome", - "(GMT+1) Madrid", - "(GMT+1) Amsterdam", - ], - }, - { - value: "Asia/Pacific", - items: [ - "(GMT+9) Tokyo", - "(GMT+8) Shanghai", - "(GMT+8) Singapore", - "(GMT+4) Dubai", - "(GMT+11) Sydney", - "(GMT+9) Seoul", - ], - }, -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxWithGroups() { - return ( - - - - No timezones found. - - {(group) => ( - - {group.value} - - {(item) => ( - - {item} - - )} - - - )} - - - - ) -} diff --git a/apps/v4/examples/base/combobox-with-other-inputs.tsx b/apps/v4/examples/base/combobox-with-other-inputs.tsx deleted file mode 100644 index 8126e65793..0000000000 --- a/apps/v4/examples/base/combobox-with-other-inputs.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/base/ui/combobox" -import { Input } from "@/examples/base/ui/input" -import { - InputGroup, - InputGroupAddon, - InputGroupInput, -} from "@/examples/base/ui/input-group" -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/examples/base/ui/select" -import { ChevronDownIcon } from "lucide-react" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -const items = [ - { - label: "Select a framework", - value: null, - }, - { - label: "React", - value: "react", - }, - { - label: "Vue", - value: "vue", - }, - { - label: "Angular", - value: "angular", - }, - { - label: "Svelte", - value: "svelte", - }, - { - label: "Solid", - value: "solid", - }, - { - label: "Preact", - value: "preact", - }, - { - label: "Next.js", - value: "next.js", - }, -] - -export function ComboboxWithOtherInputs() { - return ( - <> - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-auto-highlight.tsx b/apps/v4/examples/radix/combobox-auto-highlight.tsx index b87de060e8..ea9ef76aaa 100644 --- a/apps/v4/examples/radix/combobox-auto-highlight.tsx +++ b/apps/v4/examples/radix/combobox-auto-highlight.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" const frameworks = [ "Next.js", diff --git a/apps/v4/examples/radix/combobox-basic.tsx b/apps/v4/examples/radix/combobox-basic.tsx index 73de495e61..a3bb62caeb 100644 --- a/apps/v4/examples/radix/combobox-basic.tsx +++ b/apps/v4/examples/radix/combobox-basic.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" const frameworks = [ "Next.js", @@ -16,7 +17,7 @@ const frameworks = [ "Astro", ] as const -export function ComboboxBasic() { +export default function ComboboxBasic() { return ( diff --git a/apps/v4/examples/radix/combobox-with-clear.tsx b/apps/v4/examples/radix/combobox-clear.tsx similarity index 87% rename from apps/v4/examples/radix/combobox-with-clear.tsx rename to apps/v4/examples/radix/combobox-clear.tsx index 81c47bfda5..9ae4bf1f33 100644 --- a/apps/v4/examples/radix/combobox-with-clear.tsx +++ b/apps/v4/examples/radix/combobox-clear.tsx @@ -1,4 +1,5 @@ -import { Button } from "@/examples/radix/ui/button" +"use client" + import { Combobox, ComboboxContent, @@ -7,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" const frameworks = [ "Next.js", diff --git a/apps/v4/examples/radix/combobox-custom.tsx b/apps/v4/examples/radix/combobox-custom.tsx new file mode 100644 index 0000000000..257f9fdb2f --- /dev/null +++ b/apps/v4/examples/radix/combobox-custom.tsx @@ -0,0 +1,99 @@ +"use client" + +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/radix/ui/combobox" +import { + Item, + ItemContent, + ItemDescription, + ItemTitle, +} from "@/examples/radix/ui/item" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, +] + +export function ComboboxWithCustomItems() { + return ( + country.code !== "")} + itemToStringValue={(country: (typeof countries)[number]) => country.label} + > + + + No countries found. + + {(country) => ( + + + + + {country.label} + + + {country.continent} ({country.code}) + + + + + )} + + + + ) +} diff --git a/apps/v4/examples/radix/combobox-demo.tsx b/apps/v4/examples/radix/combobox-demo.tsx index 86ade97c99..a3bb62caeb 100644 --- a/apps/v4/examples/radix/combobox-demo.tsx +++ b/apps/v4/examples/radix/combobox-demo.tsx @@ -1,94 +1,36 @@ "use client" -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/radix/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/radix/ui/popover" -import { Check, ChevronsUpDown } from "lucide-react" - -import { cn } from "@/lib/utils" + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/radix/ui/combobox" 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 default function ComboboxDemo() { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const +export default function ComboboxBasic() { return ( - - - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - {framework.label} - - - ))} - - - - - + + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } diff --git a/apps/v4/examples/radix/combobox-disabled.tsx b/apps/v4/examples/radix/combobox-disabled.tsx index 5cf6b6bdd4..9abbce67a5 100644 --- a/apps/v4/examples/radix/combobox-disabled.tsx +++ b/apps/v4/examples/radix/combobox-disabled.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,7 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" const frameworks = [ "Next.js", diff --git a/apps/v4/examples/radix/combobox-dropdown-menu.tsx b/apps/v4/examples/radix/combobox-dropdown-menu.tsx deleted file mode 100644 index 83610122c0..0000000000 --- a/apps/v4/examples/radix/combobox-dropdown-menu.tsx +++ /dev/null @@ -1,102 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/radix/ui/command" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuShortcut, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuTrigger, -} from "@/examples/radix/ui/dropdown-menu" -import { MoreHorizontal } from "lucide-react" - -const labels = [ - "feature", - "bug", - "enhancement", - "documentation", - "design", - "question", - "maintenance", -] - -export default function ComboboxDropdownMenu() { - const [label, setLabel] = React.useState("feature") - const [open, setOpen] = React.useState(false) - - return ( -
-

- - {label} - - Create a new project -

- - - - - - - Actions - Assign to... - Set due date... - - - - Apply label - - - - - No label found. - - {labels.map((label) => ( - { - setLabel(value) - setOpen(false) - }} - > - {label} - - ))} - - - - - - - - - Delete - ⌘⌫ - - - - -
- ) -} diff --git a/apps/v4/examples/radix/combobox-with-groups-and-separator.tsx b/apps/v4/examples/radix/combobox-groups.tsx similarity index 93% rename from apps/v4/examples/radix/combobox-with-groups-and-separator.tsx rename to apps/v4/examples/radix/combobox-groups.tsx index 4ae1721740..1f2cd32f84 100644 --- a/apps/v4/examples/radix/combobox-with-groups-and-separator.tsx +++ b/apps/v4/examples/radix/combobox-groups.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxCollection, @@ -10,7 +12,6 @@ import { ComboboxList, ComboboxSeparator, } from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" const timezones = [ { @@ -55,7 +56,7 @@ export function ComboboxWithGroupsAndSeparator() { No timezones found. - {(group) => ( + {(group, index) => ( {group.value} @@ -65,7 +66,7 @@ export function ComboboxWithGroupsAndSeparator() { )} - + {index < timezones.length - 1 && } )} diff --git a/apps/v4/examples/radix/combobox-in-dialog.tsx b/apps/v4/examples/radix/combobox-in-dialog.tsx deleted file mode 100644 index 0d64e5e70e..0000000000 --- a/apps/v4/examples/radix/combobox-in-dialog.tsx +++ /dev/null @@ -1,91 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/radix/ui/combobox" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/examples/radix/ui/dialog" -import { Field, FieldLabel } from "@/examples/radix/ui/field" -import { Select } from "@/examples/radix/ui/select" -import { toast } from "sonner" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxInDialog() { - const [open, setOpen] = React.useState(false) - - return ( - - - - - - - Select Framework - - Choose your preferred framework from the list below. - - - - - Framework - - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-in-popup.tsx b/apps/v4/examples/radix/combobox-in-popup.tsx deleted file mode 100644 index c4becdaf28..0000000000 --- a/apps/v4/examples/radix/combobox-in-popup.tsx +++ /dev/null @@ -1,453 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, - ComboboxTrigger, - ComboboxValue, -} from "@/examples/radix/ui/combobox" -import { Select } from "@/examples/radix/ui/select" - -const countries = [ - { code: "", value: "", continent: "", label: "Select country" }, - { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, - { code: "al", value: "albania", label: "Albania", continent: "Europe" }, - { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, - { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, - { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, - { - code: "ar", - value: "argentina", - label: "Argentina", - continent: "South America", - }, - { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, - { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, - { code: "at", value: "austria", label: "Austria", continent: "Europe" }, - { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, - { - code: "bs", - value: "bahamas", - label: "Bahamas", - continent: "North America", - }, - { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, - { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, - { - code: "bb", - value: "barbados", - label: "Barbados", - continent: "North America", - }, - { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, - { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, - { code: "bz", value: "belize", label: "Belize", continent: "North America" }, - { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, - { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, - { - code: "bo", - value: "bolivia", - label: "Bolivia", - continent: "South America", - }, - { - code: "ba", - value: "bosnia-and-herzegovina", - label: "Bosnia and Herzegovina", - continent: "Europe", - }, - { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, - { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, - { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, - { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, - { - code: "bf", - value: "burkina-faso", - label: "Burkina Faso", - continent: "Africa", - }, - { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, - { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, - { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, - { code: "ca", value: "canada", label: "Canada", continent: "North America" }, - { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, - { - code: "cf", - value: "central-african-republic", - label: "Central African Republic", - continent: "Africa", - }, - { code: "td", value: "chad", label: "Chad", continent: "Africa" }, - { code: "cl", value: "chile", label: "Chile", continent: "South America" }, - { code: "cn", value: "china", label: "China", continent: "Asia" }, - { - code: "co", - value: "colombia", - label: "Colombia", - continent: "South America", - }, - { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, - { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, - { - code: "cr", - value: "costa-rica", - label: "Costa Rica", - continent: "North America", - }, - { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, - { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, - { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, - { - code: "cz", - value: "czech-republic", - label: "Czech Republic", - continent: "Europe", - }, - { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, - { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, - { - code: "dm", - value: "dominica", - label: "Dominica", - continent: "North America", - }, - { - code: "do", - value: "dominican-republic", - label: "Dominican Republic", - continent: "North America", - }, - { - code: "ec", - value: "ecuador", - label: "Ecuador", - continent: "South America", - }, - { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, - { - code: "sv", - value: "el-salvador", - label: "El Salvador", - continent: "North America", - }, - { - code: "gq", - value: "equatorial-guinea", - label: "Equatorial Guinea", - continent: "Africa", - }, - { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, - { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, - { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, - { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, - { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, - { code: "fr", value: "france", label: "France", continent: "Europe" }, - { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, - { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, - { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, - { code: "de", value: "germany", label: "Germany", continent: "Europe" }, - { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, - { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, - { - code: "gd", - value: "grenada", - label: "Grenada", - continent: "North America", - }, - { - code: "gt", - value: "guatemala", - label: "Guatemala", - continent: "North America", - }, - { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, - { - code: "gw", - value: "guinea-bissau", - label: "Guinea-Bissau", - continent: "Africa", - }, - { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, - { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, - { - code: "hn", - value: "honduras", - label: "Honduras", - continent: "North America", - }, - { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, - { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, - { code: "in", value: "india", label: "India", continent: "Asia" }, - { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, - { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, - { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, - { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, - { code: "il", value: "israel", label: "Israel", continent: "Asia" }, - { code: "it", value: "italy", label: "Italy", continent: "Europe" }, - { - code: "jm", - value: "jamaica", - label: "Jamaica", - continent: "North America", - }, - { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, - { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, - { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, - { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, - { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, - { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, - { code: "la", value: "laos", label: "Laos", continent: "Asia" }, - { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, - { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, - { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, - { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, - { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, - { - code: "li", - value: "liechtenstein", - label: "Liechtenstein", - continent: "Europe", - }, - { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, - { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, - { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, - { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, - { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, - { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, - { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, - { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, - { - code: "mh", - value: "marshall-islands", - label: "Marshall Islands", - continent: "Oceania", - }, - { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, - { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, - { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, - { - code: "fm", - value: "micronesia", - label: "Micronesia", - continent: "Oceania", - }, - { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, - { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, - { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, - { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, - { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, - { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, - { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, - { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, - { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, - { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, - { - code: "nl", - value: "netherlands", - label: "Netherlands", - continent: "Europe", - }, - { - code: "nz", - value: "new-zealand", - label: "New Zealand", - continent: "Oceania", - }, - { - code: "ni", - value: "nicaragua", - label: "Nicaragua", - continent: "North America", - }, - { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, - { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, - { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, - { - code: "mk", - value: "north-macedonia", - label: "North Macedonia", - continent: "Europe", - }, - { code: "no", value: "norway", label: "Norway", continent: "Europe" }, - { code: "om", value: "oman", label: "Oman", continent: "Asia" }, - { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, - { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, - { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, - { code: "pa", value: "panama", label: "Panama", continent: "North America" }, - { - code: "pg", - value: "papua-new-guinea", - label: "Papua New Guinea", - continent: "Oceania", - }, - { - code: "py", - value: "paraguay", - label: "Paraguay", - continent: "South America", - }, - { code: "pe", value: "peru", label: "Peru", continent: "South America" }, - { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, - { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, - { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, - { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, - { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, - { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, - { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, - { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, - { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, - { - code: "sa", - value: "saudi-arabia", - label: "Saudi Arabia", - continent: "Asia", - }, - { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, - { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, - { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, - { - code: "sl", - value: "sierra-leone", - label: "Sierra Leone", - continent: "Africa", - }, - { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, - { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, - { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, - { - code: "sb", - value: "solomon-islands", - label: "Solomon Islands", - continent: "Oceania", - }, - { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, - { - code: "za", - value: "south-africa", - label: "South Africa", - continent: "Africa", - }, - { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, - { - code: "ss", - value: "south-sudan", - label: "South Sudan", - continent: "Africa", - }, - { code: "es", value: "spain", label: "Spain", continent: "Europe" }, - { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, - { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, - { - code: "sr", - value: "suriname", - label: "Suriname", - continent: "South America", - }, - { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, - { - code: "ch", - value: "switzerland", - label: "Switzerland", - continent: "Europe", - }, - { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, - { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, - { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, - { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, - { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, - { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, - { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, - { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, - { - code: "tt", - value: "trinidad-and-tobago", - label: "Trinidad and Tobago", - continent: "North America", - }, - { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, - { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, - { - code: "tm", - value: "turkmenistan", - label: "Turkmenistan", - continent: "Asia", - }, - { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, - { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, - { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, - { - code: "ae", - value: "united-arab-emirates", - label: "United Arab Emirates", - continent: "Asia", - }, - { - code: "gb", - value: "united-kingdom", - label: "United Kingdom", - continent: "Europe", - }, - { - code: "us", - value: "united-states", - label: "United States", - continent: "North America", - }, - { - code: "uy", - value: "uruguay", - label: "Uruguay", - continent: "South America", - }, - { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, - { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, - { - code: "va", - value: "vatican-city", - label: "Vatican City", - continent: "Europe", - }, - { - code: "ve", - value: "venezuela", - label: "Venezuela", - continent: "South America", - }, - { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, - { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, - { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, - { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, -] - -export function ComboboxInPopup() { - return ( - <> - - - } - > - - - - - No items found. - - {(item) => ( - - {item.label} - - )} - - - - - ) -} diff --git a/apps/v4/examples/radix/comboxbox-input-addon.tsx b/apps/v4/examples/radix/combobox-input-group.tsx similarity index 88% rename from apps/v4/examples/radix/comboxbox-input-addon.tsx rename to apps/v4/examples/radix/combobox-input-group.tsx index e7bd4c45c2..819d97dcc9 100644 --- a/apps/v4/examples/radix/comboxbox-input-addon.tsx +++ b/apps/v4/examples/radix/combobox-input-group.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxCollection, @@ -9,9 +11,7 @@ import { ComboboxLabel, ComboboxList, } from "@/examples/radix/ui/combobox" -import { Input } from "@/examples/radix/ui/input" -import { InputGroup, InputGroupAddon } from "@/examples/radix/ui/input-group" -import { Select } from "@/examples/radix/ui/select" +import { InputGroupAddon } from "@/examples/radix/ui/input-group" import { GlobeIcon } from "lucide-react" const timezones = [ @@ -50,7 +50,7 @@ const timezones = [ }, ] as const -export function ComboxboxInputAddon() { +export function ComboxboxInputGroup() { return ( diff --git a/apps/v4/examples/radix/combobox-invalid.tsx b/apps/v4/examples/radix/combobox-invalid.tsx index 5615956880..7cd0bc2485 100644 --- a/apps/v4/examples/radix/combobox-invalid.tsx +++ b/apps/v4/examples/radix/combobox-invalid.tsx @@ -1,3 +1,5 @@ +"use client" + import { Combobox, ComboboxContent, @@ -6,13 +8,6 @@ import { ComboboxItem, ComboboxList, } from "@/examples/radix/ui/combobox" -import { - Field, - FieldDescription, - FieldError, - FieldLabel, -} from "@/examples/radix/ui/field" -import { Select } from "@/examples/radix/ui/select" const frameworks = [ "Next.js", @@ -24,42 +19,18 @@ const frameworks = [ export function ComboboxInvalid() { return ( -
- - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Framework - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - Please select a valid framework. - - -
+ + + + No items found. + + {(item) => ( + + {item} + + )} + + + ) } diff --git a/apps/v4/examples/radix/combobox-large-list.tsx b/apps/v4/examples/radix/combobox-large-list.tsx deleted file mode 100644 index 1f5b6075e7..0000000000 --- a/apps/v4/examples/radix/combobox-large-list.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/radix/ui/combobox" -import { Item } from "@/examples/radix/ui/item" - -const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`) - -export function ComboboxLargeList() { - return ( - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-multiple-disabled.tsx b/apps/v4/examples/radix/combobox-multiple-disabled.tsx deleted file mode 100644 index 9be489358f..0000000000 --- a/apps/v4/examples/radix/combobox-multiple-disabled.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/radix/ui/combobox" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxMultipleDisabled() { - const anchor = useComboboxAnchor() - - return ( - - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-multiple-invalid.tsx b/apps/v4/examples/radix/combobox-multiple-invalid.tsx deleted file mode 100644 index 3b8619bf79..0000000000 --- a/apps/v4/examples/radix/combobox-multiple-invalid.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/radix/ui/combobox" -import { - Field, - FieldDescription, - FieldError, - FieldLabel, -} from "@/examples/radix/ui/field" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxMultipleInvalid() { - const anchor1 = useComboboxAnchor() - const anchor2 = useComboboxAnchor() - - return ( -
- - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Frameworks - - - - {(values) => ( - - {values.map((value: string) => ( - {value} - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - Please select at least one framework. - - - -
- ) -} diff --git a/apps/v4/examples/radix/combobox-multiple-no-remove.tsx b/apps/v4/examples/radix/combobox-multiple-no-remove.tsx deleted file mode 100644 index 94da9cf1d5..0000000000 --- a/apps/v4/examples/radix/combobox-multiple-no-remove.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from "react" -import { - Combobox, - ComboboxChip, - ComboboxChips, - ComboboxChipsInput, - ComboboxContent, - ComboboxEmpty, - ComboboxItem, - ComboboxList, - ComboboxValue, - useComboboxAnchor, -} from "@/examples/radix/ui/combobox" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxMultipleNoRemove() { - const anchor = useComboboxAnchor() - - return ( - - - - {(values) => ( - - {values.map((value: string) => ( - - {value} - - ))} - - - )} - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-multiple.tsx b/apps/v4/examples/radix/combobox-multiple.tsx index 844373dab9..0e09d06c04 100644 --- a/apps/v4/examples/radix/combobox-multiple.tsx +++ b/apps/v4/examples/radix/combobox-multiple.tsx @@ -1,3 +1,5 @@ +"use client" + import * as React from "react" import { Combobox, @@ -30,7 +32,7 @@ export function ComboboxMultiple() { items={frameworks} defaultValue={[frameworks[0]]} > - + {(values) => ( diff --git a/apps/v4/examples/radix/combobox-popover.tsx b/apps/v4/examples/radix/combobox-popover.tsx deleted file mode 100644 index a7ff549a45..0000000000 --- a/apps/v4/examples/radix/combobox-popover.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/radix/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/radix/ui/popover" - -type Status = { - value: string - label: string -} - -const statuses: Status[] = [ - { - value: "backlog", - label: "Backlog", - }, - { - value: "todo", - label: "Todo", - }, - { - value: "in progress", - label: "In Progress", - }, - { - value: "done", - label: "Done", - }, - { - value: "canceled", - label: "Canceled", - }, -] - -export default function ComboboxPopover() { - const [open, setOpen] = React.useState(false) - const [selectedStatus, setSelectedStatus] = React.useState( - null - ) - - return ( -
-

Status

- - - - - - - - - No results found. - - {statuses.map((status) => ( - { - setSelectedStatus( - statuses.find((priority) => priority.value === value) || - null - ) - setOpen(false) - }} - > - {status.label} - - ))} - - - - - -
- ) -} diff --git a/apps/v4/examples/radix/combobox-popup.tsx b/apps/v4/examples/radix/combobox-popup.tsx new file mode 100644 index 0000000000..70318b597a --- /dev/null +++ b/apps/v4/examples/radix/combobox-popup.tsx @@ -0,0 +1,96 @@ +"use client" + +import { Button } from "@/examples/radix/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxTrigger, + ComboboxValue, +} from "@/examples/radix/ui/combobox" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, +] + +export function ComboboxPopup() { + return ( + <> + + + } + > + + + + + No items found. + + {(item) => ( + + {item.label} + + )} + + + + + ) +} diff --git a/apps/v4/examples/radix/combobox-responsive.tsx b/apps/v4/examples/radix/combobox-responsive.tsx deleted file mode 100644 index 799dea7b1c..0000000000 --- a/apps/v4/examples/radix/combobox-responsive.tsx +++ /dev/null @@ -1,123 +0,0 @@ -"use client" - -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/examples/radix/ui/command" -import { - Drawer, - DrawerContent, - DrawerTrigger, -} from "@/examples/radix/ui/drawer" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/examples/radix/ui/popover" - -import { useMediaQuery } from "@/hooks/use-media-query" - -type Status = { - value: string - label: string -} - -const statuses: Status[] = [ - { - value: "backlog", - label: "Backlog", - }, - { - value: "todo", - label: "Todo", - }, - { - value: "in progress", - label: "In Progress", - }, - { - value: "done", - label: "Done", - }, - { - value: "canceled", - label: "Canceled", - }, -] - -export default function ComboBoxResponsive() { - const [open, setOpen] = React.useState(false) - const isDesktop = useMediaQuery("(min-width: 768px)") - const [selectedStatus, setSelectedStatus] = React.useState( - null - ) - - if (isDesktop) { - return ( - - - - - - - - - ) - } - - return ( - - - - - -
- -
- - - ) -} - -function StatusList({ - setOpen, - setSelectedStatus, -}: { - setOpen: (open: boolean) => void - setSelectedStatus: (status: Status | null) => void -}) { - return ( - - - - No results found. - - {statuses.map((status) => ( - { - setSelectedStatus( - statuses.find((priority) => priority.value === value) || null - ) - setOpen(false) - }} - > - {status.label} - - ))} - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-with-custom-items.tsx b/apps/v4/examples/radix/combobox-with-custom-items.tsx deleted file mode 100644 index a87fb9c74a..0000000000 --- a/apps/v4/examples/radix/combobox-with-custom-items.tsx +++ /dev/null @@ -1,456 +0,0 @@ -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/radix/ui/combobox" -import { - Item, - ItemContent, - ItemDescription, - ItemTitle, -} from "@/examples/radix/ui/item" -import { Select } from "@/examples/radix/ui/select" - -const countries = [ - { code: "", value: "", continent: "", label: "Select country" }, - { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, - { code: "al", value: "albania", label: "Albania", continent: "Europe" }, - { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, - { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, - { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, - { - code: "ar", - value: "argentina", - label: "Argentina", - continent: "South America", - }, - { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, - { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, - { code: "at", value: "austria", label: "Austria", continent: "Europe" }, - { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, - { - code: "bs", - value: "bahamas", - label: "Bahamas", - continent: "North America", - }, - { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, - { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, - { - code: "bb", - value: "barbados", - label: "Barbados", - continent: "North America", - }, - { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, - { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, - { code: "bz", value: "belize", label: "Belize", continent: "North America" }, - { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, - { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, - { - code: "bo", - value: "bolivia", - label: "Bolivia", - continent: "South America", - }, - { - code: "ba", - value: "bosnia-and-herzegovina", - label: "Bosnia and Herzegovina", - continent: "Europe", - }, - { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, - { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, - { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, - { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, - { - code: "bf", - value: "burkina-faso", - label: "Burkina Faso", - continent: "Africa", - }, - { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, - { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, - { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, - { code: "ca", value: "canada", label: "Canada", continent: "North America" }, - { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, - { - code: "cf", - value: "central-african-republic", - label: "Central African Republic", - continent: "Africa", - }, - { code: "td", value: "chad", label: "Chad", continent: "Africa" }, - { code: "cl", value: "chile", label: "Chile", continent: "South America" }, - { code: "cn", value: "china", label: "China", continent: "Asia" }, - { - code: "co", - value: "colombia", - label: "Colombia", - continent: "South America", - }, - { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, - { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, - { - code: "cr", - value: "costa-rica", - label: "Costa Rica", - continent: "North America", - }, - { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, - { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, - { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, - { - code: "cz", - value: "czech-republic", - label: "Czech Republic", - continent: "Europe", - }, - { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, - { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, - { - code: "dm", - value: "dominica", - label: "Dominica", - continent: "North America", - }, - { - code: "do", - value: "dominican-republic", - label: "Dominican Republic", - continent: "North America", - }, - { - code: "ec", - value: "ecuador", - label: "Ecuador", - continent: "South America", - }, - { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, - { - code: "sv", - value: "el-salvador", - label: "El Salvador", - continent: "North America", - }, - { - code: "gq", - value: "equatorial-guinea", - label: "Equatorial Guinea", - continent: "Africa", - }, - { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, - { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, - { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, - { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, - { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, - { code: "fr", value: "france", label: "France", continent: "Europe" }, - { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, - { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, - { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, - { code: "de", value: "germany", label: "Germany", continent: "Europe" }, - { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, - { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, - { - code: "gd", - value: "grenada", - label: "Grenada", - continent: "North America", - }, - { - code: "gt", - value: "guatemala", - label: "Guatemala", - continent: "North America", - }, - { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, - { - code: "gw", - value: "guinea-bissau", - label: "Guinea-Bissau", - continent: "Africa", - }, - { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, - { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, - { - code: "hn", - value: "honduras", - label: "Honduras", - continent: "North America", - }, - { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, - { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, - { code: "in", value: "india", label: "India", continent: "Asia" }, - { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, - { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, - { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, - { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, - { code: "il", value: "israel", label: "Israel", continent: "Asia" }, - { code: "it", value: "italy", label: "Italy", continent: "Europe" }, - { - code: "jm", - value: "jamaica", - label: "Jamaica", - continent: "North America", - }, - { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, - { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, - { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, - { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, - { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, - { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, - { code: "la", value: "laos", label: "Laos", continent: "Asia" }, - { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, - { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, - { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, - { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, - { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, - { - code: "li", - value: "liechtenstein", - label: "Liechtenstein", - continent: "Europe", - }, - { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, - { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, - { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, - { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, - { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, - { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, - { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, - { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, - { - code: "mh", - value: "marshall-islands", - label: "Marshall Islands", - continent: "Oceania", - }, - { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, - { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, - { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, - { - code: "fm", - value: "micronesia", - label: "Micronesia", - continent: "Oceania", - }, - { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, - { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, - { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, - { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, - { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, - { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, - { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, - { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, - { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, - { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, - { - code: "nl", - value: "netherlands", - label: "Netherlands", - continent: "Europe", - }, - { - code: "nz", - value: "new-zealand", - label: "New Zealand", - continent: "Oceania", - }, - { - code: "ni", - value: "nicaragua", - label: "Nicaragua", - continent: "North America", - }, - { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, - { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, - { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, - { - code: "mk", - value: "north-macedonia", - label: "North Macedonia", - continent: "Europe", - }, - { code: "no", value: "norway", label: "Norway", continent: "Europe" }, - { code: "om", value: "oman", label: "Oman", continent: "Asia" }, - { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, - { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, - { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, - { code: "pa", value: "panama", label: "Panama", continent: "North America" }, - { - code: "pg", - value: "papua-new-guinea", - label: "Papua New Guinea", - continent: "Oceania", - }, - { - code: "py", - value: "paraguay", - label: "Paraguay", - continent: "South America", - }, - { code: "pe", value: "peru", label: "Peru", continent: "South America" }, - { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, - { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, - { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, - { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, - { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, - { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, - { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, - { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, - { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, - { - code: "sa", - value: "saudi-arabia", - label: "Saudi Arabia", - continent: "Asia", - }, - { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, - { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, - { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, - { - code: "sl", - value: "sierra-leone", - label: "Sierra Leone", - continent: "Africa", - }, - { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, - { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, - { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, - { - code: "sb", - value: "solomon-islands", - label: "Solomon Islands", - continent: "Oceania", - }, - { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, - { - code: "za", - value: "south-africa", - label: "South Africa", - continent: "Africa", - }, - { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, - { - code: "ss", - value: "south-sudan", - label: "South Sudan", - continent: "Africa", - }, - { code: "es", value: "spain", label: "Spain", continent: "Europe" }, - { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, - { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, - { - code: "sr", - value: "suriname", - label: "Suriname", - continent: "South America", - }, - { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, - { - code: "ch", - value: "switzerland", - label: "Switzerland", - continent: "Europe", - }, - { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, - { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, - { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, - { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, - { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, - { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, - { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, - { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, - { - code: "tt", - value: "trinidad-and-tobago", - label: "Trinidad and Tobago", - continent: "North America", - }, - { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, - { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, - { - code: "tm", - value: "turkmenistan", - label: "Turkmenistan", - continent: "Asia", - }, - { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, - { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, - { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, - { - code: "ae", - value: "united-arab-emirates", - label: "United Arab Emirates", - continent: "Asia", - }, - { - code: "gb", - value: "united-kingdom", - label: "United Kingdom", - continent: "Europe", - }, - { - code: "us", - value: "united-states", - label: "United States", - continent: "North America", - }, - { - code: "uy", - value: "uruguay", - label: "Uruguay", - continent: "South America", - }, - { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, - { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, - { - code: "va", - value: "vatican-city", - label: "Vatican City", - continent: "Europe", - }, - { - code: "ve", - value: "venezuela", - label: "Venezuela", - continent: "South America", - }, - { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, - { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, - { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, - { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, -] - -export function ComboboxWithCustomItems() { - return ( - country.code !== "")} - itemToStringValue={(country: (typeof countries)[number]) => country.label} - > - - - No countries found. - - {(country) => ( - - - - - {country.label} - - - {country.continent} ({country.code}) - - - - - )} - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-with-form.tsx b/apps/v4/examples/radix/combobox-with-form.tsx deleted file mode 100644 index 4523c00129..0000000000 --- a/apps/v4/examples/radix/combobox-with-form.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from "react" -import { Button } from "@/examples/radix/ui/button" -import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/radix/ui/combobox" -import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field" -import { Select } from "@/examples/radix/ui/select" -import { toast } from "sonner" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxWithForm() { - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault() - const formData = new FormData(event.target as HTMLFormElement) - const framework = formData.get("framework") as string - toast(`You selected ${framework} as your framework.`) - } - - return ( - - -
- - - Framework - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - -
- - - - - - ) -} diff --git a/apps/v4/examples/radix/combobox-with-other-inputs.tsx b/apps/v4/examples/radix/combobox-with-other-inputs.tsx deleted file mode 100644 index 2981406046..0000000000 --- a/apps/v4/examples/radix/combobox-with-other-inputs.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Combobox, - ComboboxContent, - ComboboxEmpty, - ComboboxInput, - ComboboxItem, - ComboboxList, -} from "@/examples/radix/ui/combobox" -import { Input } from "@/examples/radix/ui/input" -import { - InputGroup, - InputGroupAddon, - InputGroupInput, -} from "@/examples/radix/ui/input-group" -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/examples/radix/ui/select" -import { ChevronDownIcon } from "lucide-react" - -const frameworks = [ - "Next.js", - "SvelteKit", - "Nuxt.js", - "Remix", - "Astro", -] as const - -export function ComboboxWithOtherInputs() { - return ( - <> - - - - No items found. - - {(item) => ( - - {item} - - )} - - - - - - - - - - - - - - ) -}