3a:T36f0,

"use client"

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
} from "@/components/ui/combobox"

const platforms = ["iOS", "Android", "Web", "macOS", "Windows"]

const List = () => (
  <ComboboxContent>
    <ComboboxEmpty>No platform found.</ComboboxEmpty>
    <ComboboxList>
      {(item: string) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
)

const Demo = () => (
  <div className="grid max-w-480 gap-12">
    <Combobox items={platforms}>
      <ComboboxInput placeholder="Pick a platform" showClear />
      <List />
    </Combobox>
    <Combobox items={platforms} multiple defaultValue={["iOS", "Web"]}>
      <ComboboxChips>
        <ComboboxValue>
          {(values: string[]) => (
            <>
              {values.map((v) => (
                <ComboboxChip key={v}>{v}</ComboboxChip>
              ))}
              <ComboboxChipsInput placeholder="Add platform" />
            </>
          )}
        </ComboboxValue>
      </ComboboxChips>
      <List />
    </Combobox>
  </div>
)

export default Demo

37:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3a"}}],"$L3b"]}] 3c:T10c76,

"use client"

import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"

import { cn } from "@/lib/utils"

const Combobox = ComboboxPrimitive.Root

const ComboboxValue = (props: ComboboxPrimitive.Value.Props) => (
  <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
)

const ChevronIcon = () => (
  <svg viewBox="0 0 16 16" fill="none" className="size-16" aria-hidden="true">
    <path
      d="M4 6l4 4 4-4"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)

const CloseIcon = () => (
  <svg viewBox="0 0 12 12" fill="none" className="size-12" aria-hidden="true">
    <path
      d="M2.5 2.5l7 7M9.5 2.5l-7 7"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
  </svg>
)

const iconButtonClass =
  "flex size-32 shrink-0 cursor-pointer items-center justify-center rounded-full text-text-tertiary outline-none hover:bg-background-primary-hover hover:text-text-primary focus-visible:ring-4 focus-visible:ring-blue-60/50 disabled:pointer-events-none"

const ComboboxTrigger = ({
  className,
  children,
  ...props
}: ComboboxPrimitive.Trigger.Props) => (
  <ComboboxPrimitive.Trigger
    data-slot="combobox-trigger"
    className={cn(iconButtonClass, className)}
    {...props}
  >
    {children ?? <ChevronIcon />}
  </ComboboxPrimitive.Trigger>
)

const ComboboxClear = ({
  className,
  ...props
}: ComboboxPrimitive.Clear.Props) => (
  <ComboboxPrimitive.Clear
    data-slot="combobox-clear"
    aria-label="Clear"
    className={cn(iconButtonClass, className)}
    {...props}
  >
    <CloseIcon />
  </ComboboxPrimitive.Clear>
)

const ComboboxInput = ({
  className,
  children,
  disabled,
  showTrigger = true,
  showClear = false,
  ...props
}: ComboboxPrimitive.Input.Props & {
  showTrigger?: boolean
  showClear?: boolean
}) => (
  <div
    data-slot="combobox-input"
    className={cn(
      "flex h-48 w-full min-w-0 items-center gap-4 rounded-16 bg-glass-background-control pr-8 pl-16 shadow-glass-control backdrop-glass-thin ring-inset has-focus-visible:ring-2 has-focus-visible:ring-text-primary has-disabled:bg-background-disabled",
      className
    )}
  >
    <ComboboxPrimitive.Input
      disabled={disabled}
      className="h-full min-w-0 flex-1 bg-transparent text-body-bold text-text-primary outline-none placeholder:text-body placeholder:text-text-tertiary disabled:cursor-not-allowed disabled:text-text-disabled"
      {...props}
    />
    {showClear && <ComboboxClear disabled={disabled} />}
    {showTrigger && (
      <ComboboxTrigger
        disabled={disabled}
        className="in-data-[slot=combobox-input]:has-[~[data-slot=combobox-clear]]:hidden"
      />
    )}
    {children}
  </div>
)

const ComboboxContent = ({
  className,
  sideOffset = 8,
  align = "start",
  anchor,
  ...props
}: ComboboxPrimitive.Popup.Props &
  Pick<
    ComboboxPrimitive.Positioner.Props,
    "side" | "align" | "sideOffset" | "anchor"
  >) => (
  <ComboboxPrimitive.Portal>
    <ComboboxPrimitive.Positioner
      sideOffset={sideOffset}
      align={align}
      anchor={anchor}
      className="z-50 outline-none"
    >
      <ComboboxPrimitive.Popup
        data-slot="combobox-content"
        className={cn(
          "flex max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-col rounded-20 bg-glass-background-primary p-8 text-glass-text-primary shadow-glass backdrop-glass transition-[opacity,scale] duration-150 ease-out outline-none select-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
          className
        )}
        {...props}
      />
    </ComboboxPrimitive.Positioner>
  </ComboboxPrimitive.Portal>
)

const ComboboxList = ({
  className,
  ...props
}: ComboboxPrimitive.List.Props) => (
  <ComboboxPrimitive.List
    data-slot="combobox-list"
    className={cn("overflow-y-auto overscroll-contain outline-none", className)}
    {...props}
  />
)

const ComboboxItem = ({
  className,
  children,
  ...props
}: ComboboxPrimitive.Item.Props) => (
  <ComboboxPrimitive.Item
    data-slot="combobox-item"
    className={cn(
      "flex h-36 cursor-pointer items-center gap-x-8 rounded-12 px-[10px] text-body outline-none data-disabled:pointer-events-none data-disabled:text-glass-text-disabled data-highlighted:bg-glass-background-primary-hover",
      className
    )}
    {...props}
  >
    <span className="flex-1 truncate">{children}</span>
    <ComboboxPrimitive.ItemIndicator className="flex size-16 items-center justify-center">
      <svg
        viewBox="0 0 12 12"
        fill="none"
        className="size-12"
        aria-hidden="true"
      >
        <path
          d="M2.5 6.5l2.5 2.5 4.5-5"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </ComboboxPrimitive.ItemIndicator>
  </ComboboxPrimitive.Item>
)

const ComboboxGroup = (props: ComboboxPrimitive.Group.Props) => (
  <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />
)

const ComboboxLabel = ({
  className,
  ...props
}: ComboboxPrimitive.GroupLabel.Props) => (
  <ComboboxPrimitive.GroupLabel
    data-slot="combobox-label"
    className={cn(
      "px-[10px] py-8 text-caption-bold text-glass-text-tertiary",
      className
    )}
    {...props}
  />
)

const ComboboxCollection = (props: ComboboxPrimitive.Collection.Props) => (
  <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
)

const ComboboxEmpty = ({
  className,
  ...props
}: ComboboxPrimitive.Empty.Props) => (
  <ComboboxPrimitive.Empty
    data-slot="combobox-empty"
    className={cn(
      "px-[10px] py-8 text-compact text-glass-text-tertiary empty:hidden",
      className
    )}
    {...props}
  />
)

const ComboboxSeparator = ({
  className,
  ...props
}: ComboboxPrimitive.Separator.Props) => (
  <ComboboxPrimitive.Separator
    data-slot="combobox-separator"
    className={cn("my-8 h-px bg-glass-divider", className)}
    {...props}
  />
)

const ComboboxChips = ({
  className,
  ...props
}: ComboboxPrimitive.Chips.Props) => (
  <ComboboxPrimitive.Chips
    data-slot="combobox-chips"
    className={cn(
      "flex min-h-48 w-full flex-wrap items-center gap-4 rounded-16 bg-glass-background-control px-8 py-8 shadow-glass-control backdrop-glass-thin ring-inset has-focus-visible:ring-2 has-focus-visible:ring-text-primary",
      className
    )}
    {...props}
  />
)

const ComboboxChip = ({
  className,
  children,
  showRemove = true,
  ...props
}: ComboboxPrimitive.Chip.Props & { showRemove?: boolean }) => (
  <ComboboxPrimitive.Chip
    data-slot="combobox-chip"
    className={cn(
      "flex h-28 items-center gap-4 rounded-full bg-background-primary pr-4 pl-10 text-compact-bold shadow-xs has-disabled:pointer-events-none has-disabled:opacity-50",
      className
    )}
    {...props}
  >
    {children}
    {showRemove && (
      <ComboboxPrimitive.ChipRemove
        data-slot="combobox-chip-remove"
        aria-label="Remove"
        className="flex size-20 cursor-pointer items-center justify-center rounded-full text-text-tertiary hover:bg-background-primary-hover hover:text-text-primary"
      >
        <CloseIcon />
      </ComboboxPrimitive.ChipRemove>
    )}
  </ComboboxPrimitive.Chip>
)

const ComboboxChipsInput = ({
  className,
  ...props
}: ComboboxPrimitive.Input.Props) => (
  <ComboboxPrimitive.Input
    data-slot="combobox-chip-input"
    className={cn(
      "h-28 min-w-64 flex-1 bg-transparent px-8 text-body-bold outline-none placeholder:text-body placeholder:text-text-tertiary",
      className
    )}
    {...props}
  />
)

export {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxClear,
  ComboboxCollection,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxValue,
}

39:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3c"}}],"$L3d"]}]

Installation

Usage