3a:T49c2,

"use client"

import { useState } from "react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

const groups: {
  label: string
  items: { value: string; shortcut?: string }[]
}[] = [
  {
    label: "Suggestions",
    items: [
      { value: "Search screens", shortcut: "⌘K" },
      { value: "New collection", shortcut: "⌘N" },
      { value: "Open settings", shortcut: "⌘," },
    ],
  },
  {
    label: "Apps",
    items: [{ value: "Shopify" }, { value: "Linear" }, { value: "Notion" }],
  },
]

const Palette = () => (
  <Command>
    <CommandInput placeholder="Type a command or search" />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      {groups.map((group) => (
        <CommandGroup key={group.label} heading={group.label}>
          {group.items.map((item) => (
            <CommandItem key={item.value} value={item.value}>
              {item.value}
              {item.shortcut && (
                <CommandShortcut>{item.shortcut}</CommandShortcut>
              )}
            </CommandItem>
          ))}
        </CommandGroup>
      ))}
    </CommandList>
  </Command>
)

const Demo = () => {
  const [open, setOpen] = useState(false)
  return (
    <div className="flex w-full max-w-480 flex-col items-start gap-16">
      <div className="w-full rounded-24 bg-glass-background-surface p-4 shadow-glass-surface backdrop-glass">
        <Palette />
      </div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Open command dialog
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Palette />
      </CommandDialog>
    </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:Tcfc3,

"use client"

import { createContext, useContext, useState } from "react"
import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"

import { cn } from "@/lib/utils"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

// ponytail: built on base ui autocomplete instead of cmdk. Items are static children,
// so filtering is done here against each item's value instead of through the items prop.
const QueryContext = createContext("")

const Command = ({
  className,
  children,
  onValueChange,
  ...props
}: Omit<AutocompletePrimitive.Root.Props<string>, "children" | "items"> & {
  className?: string
  children: React.ReactNode
}) => {
  const [query, setQuery] = useState("")
  return (
    <AutocompletePrimitive.Root
      open
      inline
      autoHighlight="always"
      keepHighlight
      onValueChange={(value, details) => {
        setQuery(value)
        onValueChange?.(value, details)
      }}
      {...props}
    >
      <QueryContext value={query}>
        <div
          data-slot="command"
          className={cn(
            "flex size-full flex-col overflow-hidden rounded-24 text-text-primary",
            className
          )}
        >
          {children}
        </div>
      </QueryContext>
    </AutocompletePrimitive.Root>
  )
}

const CommandDialog = ({
  title = "Command palette",
  description = "Search for a command to run",
  children,
  className,
  ...props
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
  title?: string
  description?: string
  className?: string
  children: React.ReactNode
}) => (
  <Dialog {...props}>
    <DialogContent
      showCloseButton={false}
      className={cn(
        // dark keeps the palette dark glass in both themes, like the other popups
        "dark top-[20%] max-w-560 translate-y-0 overflow-hidden",
        className
      )}
    >
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      {children}
    </DialogContent>
  </Dialog>
)

const CommandInput = ({
  className,
  ...props
}: AutocompletePrimitive.Input.Props) => (
  <div
    data-slot="command-input-wrapper"
    className="flex h-56 items-center gap-12 border-b border-divider px-16"
  >
    <svg
      viewBox="0 0 16 16"
      fill="none"
      className="size-16 shrink-0 text-text-tertiary"
      aria-hidden="true"
    >
      <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M10.5 10.5L14 14"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
    <AutocompletePrimitive.Input
      data-slot="command-input"
      className={cn(
        "h-full min-w-0 flex-1 bg-transparent text-body outline-none placeholder:text-text-tertiary disabled:cursor-not-allowed",
        className
      )}
      {...props}
    />
  </div>
)

const CommandList = ({
  className,
  ...props
}: AutocompletePrimitive.List.Props) => (
  <AutocompletePrimitive.List
    data-slot="command-list"
    className={cn(
      "max-h-320 scroll-py-8 overflow-x-hidden overflow-y-auto overscroll-contain p-8 outline-none",
      className
    )}
    {...props}
  />
)

const CommandEmpty = ({
  className,
  ...props
}: AutocompletePrimitive.Empty.Props) => (
  <AutocompletePrimitive.Empty
    data-slot="command-empty"
    // base ui always reports the list as empty since filtering happens here, so hide on real items instead
    className={cn(
      "py-24 text-center text-compact text-text-tertiary empty:hidden [[data-slot=command-list]:has([data-slot=command-item])_&]:hidden",
      className
    )}
    {...props}
  />
)

const CommandGroup = ({
  className,
  heading,
  children,
  ...props
}: AutocompletePrimitive.Group.Props & { heading?: React.ReactNode }) => (
  <AutocompletePrimitive.Group
    data-slot="command-group"
    className={cn(
      "not-last:mb-4 [&:not(:has([data-slot=command-item]))]:hidden",
      className
    )}
    {...props}
  >
    {heading && (
      <AutocompletePrimitive.GroupLabel className="px-[10px] py-8 text-caption-bold text-text-tertiary select-none">
        {heading}
      </AutocompletePrimitive.GroupLabel>
    )}
    {children}
  </AutocompletePrimitive.Group>
)

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

const CommandItem = ({
  className,
  value,
  keywords = [],
  ...props
}: AutocompletePrimitive.Item.Props & {
  value: string
  keywords?: string[]
}) => {
  const query = useContext(QueryContext)
  const filter = AutocompletePrimitive.useFilter()
  if (![value, ...keywords].some((v) => filter.contains(v, query))) return null
  return (
    <AutocompletePrimitive.Item
      data-slot="command-item"
      value={value}
      className={cn(
        "flex h-40 cursor-pointer items-center gap-x-8 rounded-12 px-[10px] text-body outline-none select-none data-disabled:pointer-events-none data-disabled:text-text-disabled data-highlighted:bg-background-secondary [&_svg]:pointer-events-none [&_svg]:size-16 [&_svg]:shrink-0 [&_svg]:text-text-tertiary",
        className
      )}
      {...props}
    />
  )
}

const CommandShortcut = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    data-slot="command-shortcut"
    className={cn(
      "ml-auto text-caption-bold tracking-wide text-text-tertiary",
      className
    )}
    {...props}
  />
)

export {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
}

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