Combo box

"use client";import { ComboBox } from "@/components/vip-ui/combo-box";export function ComboBoxBasicDemo() {  return (    <div className="w-full max-w-[340px]">      <ComboBox        label="Framework"        placeholder="Search frameworks"        options={[          { id: "next", name: "Next.js" },          { id: "astro", name: "Astro" },          { id: "remix", name: "Remix" },        ]}      />    </div>  );}

"use client";import {  ComboBox,  ComboBoxContent,  ComboBoxControl,  ComboBoxDescription,  ComboBoxError,  ComboBoxInput,  ComboBoxItem,  ComboBoxLabel,  ComboBoxTrigger,} from "@/components/vip-ui/combo-box";const frameworks = [  { id: "next", name: "Next.js", description: "React framework" },  { id: "astro", name: "Astro", description: "Content-driven websites" },  { id: "remix", name: "Remix", description: "Full-stack web framework" },  {    id: "svelte",    name: "SvelteKit",    description: "Svelte application framework",  },  { id: "vue", name: "Nuxt", description: "Vue application framework" },];export function ComboBoxDemo() {  return (    <ComboBox className="w-full max-w-[340px]">      <ComboBoxLabel>Framework</ComboBoxLabel>      <ComboBoxControl>        <ComboBoxInput placeholder="Search frameworks" />        <ComboBoxTrigger />      </ComboBoxControl>      <ComboBoxDescription>        Type to filter the list, then select one.      </ComboBoxDescription>      <ComboBoxError />      <ComboBoxContent>        {frameworks.map((framework) => (          <ComboBoxItem            key={framework.id}            id={framework.id}            textValue={framework.name}          >            <span className="min-w-0">              <span className="block font-medium">{framework.name}</span>              <span className="block text-xs text-muted-foreground group-selected/item:text-accent-foreground">                {framework.description}              </span>            </span>          </ComboBoxItem>        ))}      </ComboBoxContent>    </ComboBox>  );}

"use client";import { GlobeHemisphereWestIcon } from "@phosphor-icons/react";import {  ComboBox,  ComboBoxContent,  ComboBoxControl,  ComboBoxIcon,  ComboBoxInput,  ComboBoxItem,  ComboBoxLabel,  ComboBoxTrigger,} from "@/components/vip-ui/combo-box";const zones = [  { id: "pst", name: "Pacific Time", offset: "UTC−08:00" },  { id: "est", name: "Eastern Time", offset: "UTC−05:00" },  { id: "gmt", name: "Greenwich Mean Time", offset: "UTC+00:00" },  { id: "cet", name: "Central European Time", offset: "UTC+01:00" },  { id: "ist", name: "India Standard Time", offset: "UTC+05:30" },  { id: "jst", name: "Japan Standard Time", offset: "UTC+09:00" },];export function ComboBoxIconDemo() {  return (    <ComboBox      items={zones}      defaultSelectedKey="gmt"      className="w-full max-w-[340px]"    >      <ComboBoxLabel>Time zone</ComboBoxLabel>      <ComboBoxControl>        <ComboBoxIcon>          <GlobeHemisphereWestIcon />        </ComboBoxIcon>        <ComboBoxInput placeholder="Search time zones" />        <ComboBoxTrigger />      </ComboBoxControl>      <ComboBoxContent<(typeof zones)[number]>>        {(zone) => (          <ComboBoxItem id={zone.id} textValue={zone.name}>            <span className="flex min-w-0 flex-1 items-baseline justify-between gap-3">              <span className="truncate font-medium">{zone.name}</span>              <span className="shrink-0 text-xs text-muted-foreground tabular-nums group-selected/item:text-accent-foreground">                {zone.offset}              </span>            </span>          </ComboBoxItem>        )}      </ComboBoxContent>    </ComboBox>  );}

"use client";import { ComboBox } from "@/components/vip-ui/combo-box";export function ComboBoxDisabledDemo() {  return (    <div className="w-full max-w-[340px]">      <ComboBox        label="Framework"        defaultValue="next"        isDisabled        options={[          { id: "next", name: "Next.js" },          { id: "astro", name: "Astro" },        ]}      />    </div>  );}

"use client";import { useState } from "react";import { ComboBox } from "@/components/vip-ui/combo-box";const teams = [  { id: "design", name: "Design" },  { id: "engineering", name: "Engineering" },  { id: "research", name: "Research" },  { id: "support", name: "Support" },];export function ComboBoxMultipleDemo() {  const [selected, setSelected] = useState<(string | number)[]>([    "design",    "research",  ]);  return (    <div className="grid w-full max-w-sm gap-4">      <ComboBox        selectionMode="multiple"        label="Project teams"        placeholder="Find a team"        description="Select one or more teams. Remove a tag to clear it."        options={teams}        value={selected}        onChange={setSelected}      />      <output className="block rounded-md border border-border bg-background px-3 py-2.5 text-xs text-muted-foreground">        {selected.length          ? `Selected: ${selected.map((key) => teams.find((team) => team.id === key)?.name).join(", ")}`          : "No teams selected."}      </output>    </div>  );}

"use client";import { useAsyncList } from "react-aria-components";import {  ComboBox,  ComboBoxContent,  ComboBoxControl,  ComboBoxInput,  ComboBoxItem,  ComboBoxLabel,  ComboBoxTrigger,} from "@/components/vip-ui/combo-box";import { Spinner } from "@/components/vip-ui/spinner";interface Person {  id: string;  name: string;  role: string;}const people: Person[] = [  { id: "ada", name: "Ada Lovelace", role: "Research" },  { id: "alan", name: "Alan Turing", role: "Engineering" },  { id: "grace", name: "Grace Hopper", role: "Engineering" },  { id: "hedy", name: "Hedy Lamarr", role: "Design" },  { id: "katherine", name: "Katherine Johnson", role: "Research" },  { id: "linus", name: "Linus Torvalds", role: "Engineering" },  { id: "margaret", name: "Margaret Hamilton", role: "Engineering" },  { id: "radia", name: "Radia Perlman", role: "Support" },  { id: "tim", name: "Tim Berners-Lee", role: "Design" },];function search(text: string, signal: AbortSignal) {  return new Promise<Person[]>((resolve, reject) => {    const timer = setTimeout(() => {      const query = text.trim().toLowerCase();      resolve(        people.filter((person) => person.name.toLowerCase().includes(query)),      );    }, 600);    signal.addEventListener("abort", () => {      clearTimeout(timer);      reject(signal.reason);    });  });}export function ComboBoxAsyncDemo() {  const list = useAsyncList<Person>({    async load({ signal, filterText }) {      return { items: await search(filterText ?? "", signal) };    },  });  return (    <ComboBox      items={list.items}      inputValue={list.filterText}      onInputChange={list.setFilterText}      className="w-full max-w-[340px]"    >      <ComboBoxLabel>Assignee</ComboBoxLabel>      <ComboBoxControl>        <ComboBoxInput placeholder="Search people" />        <ComboBoxTrigger>          {list.isLoading ? <Spinner size="sm" decorative /> : undefined}        </ComboBoxTrigger>      </ComboBoxControl>      <ComboBoxContent<Person>>        {(person) => (          <ComboBoxItem id={person.id} textValue={person.name}>            <span className="min-w-0">              <span className="block font-medium">{person.name}</span>              <span className="block text-xs text-muted-foreground group-selected/item:text-accent-foreground">                {person.role}              </span>            </span>          </ComboBoxItem>        )}      </ComboBoxContent>    </ComboBox>  );}

"use client";import { ComboBox } from "@/components/vip-ui/combo-box";const options = [  { id: "next", name: "Next.js" },  { id: "astro", name: "Astro" },  { id: "remix", name: "Remix" },];export function ComboBoxSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-3">      <ComboBox        size="xs"        aria-label="Framework"        placeholder="Search frameworks"        options={options}      />      <ComboBox        size="sm"        aria-label="Framework"        placeholder="Search frameworks"        options={options}      />      <ComboBox        size="md"        aria-label="Framework"        placeholder="Search frameworks"        options={options}      />      <ComboBox        aria-label="Framework"        placeholder="Search frameworks"        options={options}      />    </div>  );}