TypedCombobox

import { TypedCombobox } from "@/components/typed-combobox";

export function BasicUsage() {
  return (
    <TypedCombobox
      placeholder="Select a framework..."
      searchPlaceholder="Search frameworks..."
      options={
        [
          { label: "Next.js", value: "nextjs" },
          { label: "Remix", value: "remix" },
          { label: "Astro", value: "astro" },
          { label: "SvelteKit", value: "sveltekit" },
          { label: "Nuxt", value: "nuxt" },
        ] as const
      }
      onValueChange={(value) => {
                      
value: "nextjs" | "remix" | "astro" | "sveltekit" | "nuxt"
        console.log(value);
      }}
    />
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

export function NumberValues() {
  return (
    <TypedCombobox
      placeholder="Select priority..."
      searchPlaceholder="Search priorities..."
      options={
        [
          { label: "Low", value: 1 },
          { label: "Medium", value: 2 },
          { label: "High", value: 3 },
          { label: "Critical", value: 4 },
        ] as const
      }
      onValueChange={(value) => {
                      
value: 1 | 2 | 3 | 4
        console.log(value);
      }}
    />
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

export function BooleanValues() {
  return (
    <TypedCombobox
      placeholder="Select status..."
      searchPlaceholder="Search..."
      options={
        [
          { label: "Active", value: true },
          { label: "Inactive", value: false },
        ] as const
      }
      onValueChange={(value) => {
                      
value: boolean
        console.log(value);
      }}
    />
  );
}

import { CheckIcon } from "lucide-react";
import { TypedCombobox } from "@/components/typed-combobox";
import { cn } from "@/lib/utils";

const users = [
  { id: 1, name: "John Doe", email: "john@example.com", avatar: "JD" },
  { id: 2, name: "Jane Smith", email: "jane@example.com", avatar: "JS" },
  { id: 3, name: "Bob Johnson", email: "bob@example.com", avatar: "BJ" },
] as const;

export function CustomItem() {
  return (
    <TypedCombobox
      placeholder="Select a user..."
      searchPlaceholder="Search users..."
      options={users}
      valueKey="id"
      labelKey="name"
      popoverWidth={300}
      renderItem={({ option, isSelected, itemProps, Item }) => (
        <Item {...itemProps} className="flex items-center gap-3 px-2 py-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium">
            {option.avatar}
          </div>
          <div className="flex-1 min-w-0">
            <div className="font-medium truncate">{option.name}</div>
            <div className="text-xs text-muted-foreground truncate">
              {option.email}
            </div>
          </div>
          <CheckIcon
            className={cn(
              "h-4 w-4 shrink-0",
              isSelected ? "opacity-100" : "opacity-0",
            )}
          />
        </Item>
      )}
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

const groupedOptions = [
  {
    label: "Frontend",
    options: [
      { label: "React", value: "react" },
      { label: "Vue", value: "vue" },
      { label: "Svelte", value: "svelte" },
    ],
  },
  {
    label: "Backend",
    options: [
      { label: "Node.js", value: "nodejs" },
      { label: "Python", value: "python" },
      { label: "Go", value: "go" },
    ],
  },
] as const;

export function GroupedOptions() {
  return (
    <TypedCombobox
      placeholder="Select a technology..."
      searchPlaceholder="Search technologies..."
      options={groupedOptions}
      popoverWidth={250}
      onValueChange={(value) => {
                      
value: "react" | "vue" | "svelte" | "nodejs" | "python" | "go"
        console.log(value);
      }}
    />
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

export function DisabledOptions() {
  return (
    <TypedCombobox
      placeholder="Select a plan..."
      searchPlaceholder="Search plans..."
      options={
        [
          { label: "Free", value: "free" },
          { label: "Pro", value: "pro" },
          { label: "Enterprise", value: "enterprise", disabled: true },
        ] as const
      }
    />
  );
}

"use client";

import { useState } from "react";
import { TypedCombobox } from "@/components/typed-combobox";

const frameworks = [
  { label: "Next.js", value: "nextjs" },
  { label: "Remix", value: "remix" },
  { label: "Astro", value: "astro" },
  { label: "SvelteKit", value: "sveltekit" },
] as const;

type FrameworkValue = (typeof frameworks)[number]["value"];

export function Controlled() {
  const [value, setValue] = useState<FrameworkValue>("nextjs");

  return (
    <div className="space-y-4">
      <TypedCombobox
        placeholder="Select a framework..."
        searchPlaceholder="Search..."
        options={frameworks}
        value={value}
        onValueChange={setValue}
      />
      <p className="text-sm text-muted-foreground">
        Selected: <code className="font-mono">{value}</code>
      </p>
    </div>
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

const users = [
  { id: 1, name: "John Doe", email: "john@example.com", role: "admin" },
  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "user" },
  { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "admin" },
  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "user" },
] as const;

export function CustomFilter() {
  return (
    <TypedCombobox
      placeholder="Search by name, email, or role..."
      searchPlaceholder="Type to search..."
      options={users}
      valueKey="id"
      labelKey="name"
      popoverWidth={300}
      filterFn={(option, query) => {
        const q = query.toLowerCase();
        return (
          option.name.toLowerCase().includes(q) ||
          option.email.toLowerCase().includes(q) ||
          option.role.toLowerCase().includes(q)
        );
      }}
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}

import { TypedCombobox } from "@/components/typed-combobox";

const users = [
  { id: 1, name: "John Doe", email: "john@example.com" },
  { id: 2, name: "Jane Smith", email: "jane@example.com" },
  { id: 3, name: "Bob Johnson", email: "bob@example.com" },
] as const;

export function CustomKeys() {
  return (
    <TypedCombobox
      placeholder="Select a user..."
      searchPlaceholder="Search users..."
      options={users}
      valueKey="id"
      labelKey="name"
      popoverWidth={250}
      onValueChange={(value) => {
                      
value: 1 | 2 | 3
        console.log(value);
      }}
    />
  );
}