Select

import Select from '@/components/ui/Select';

const roles = [
  { value: 'owner', label: 'Owner' },
  { value: 'admin', label: 'Admin' },
  { value: 'editor', label: 'Editor' },
  { value: 'viewer', label: 'Viewer' },
];

export default function BasicDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select
        placeholder="Assign a role"
        defaultValue={roles[2]}
        options={roles}
      />
    </div>
  );
}

import Select from '@/components/ui/Select';

const skills = [
  { value: 'ts', label: 'TypeScript' },
  { value: 'react', label: 'React' },
  { value: 'node', label: 'Node.js' },
  { value: 'go', label: 'Go' },
  { value: 'rust', label: 'Rust' },
  { value: 'python', label: 'Python' },
];

export default function MultipleDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select.Multi
        placeholder="Select skills"
        defaultValue={[skills[0], skills[1]]}
        options={skills}
      />
    </div>
  );
}

import Select from '@/components/ui/Select';

const timezones = [
  { value: 'utc', label: 'UTC' },
  { value: 'est', label: 'Eastern (EST)' },
  { value: 'pst', label: 'Pacific (PST)' },
  { value: 'cet', label: 'Central Europe (CET)' },
];

export default function SizeDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Select size="sm" placeholder="Small" options={timezones} />
      <Select size="md" placeholder="Medium" options={timezones} />
      <Select size="lg" placeholder="Large" options={timezones} />
    </div>
  );
}

import Select from '@/components/ui/Select';

const countries = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
  { value: 'fr', label: 'France' },
  { value: 'jp', label: 'Japan' },
  { value: 'sg', label: 'Singapore' },
  { value: 'au', label: 'Australia' },
];

export default function SearchableDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select
        isSearchable
        placeholder="Select a country"
        options={countries}
        searchInputProps={{ placeholder: 'Search countries...' }}
      />
    </div>
  );
}

import Select from '@/components/ui/Select';

const plans = [
  { value: 'free', label: 'Free' },
  { value: 'pro', label: 'Pro' },
  { value: 'team', label: 'Team', disabled: true },
  { value: 'enterprise', label: 'Enterprise', disabled: true },
];

export default function DisabledDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Select placeholder="Some plans unavailable" options={plans} />
      <Select isDisabled defaultValue={plans[1]} options={plans} />
    </div>
  );
}

import Select from '@/components/ui/Select';

const groupedOptions = [
  {
    label: 'Frontend',
    options: [
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' },
      { value: 'svelte', label: 'Svelte' },
    ],
  },
  {
    label: 'Backend',
    options: [
      { value: 'node', label: 'Node.js' },
      { value: 'django', label: 'Django' },
      { value: 'rails', label: 'Rails' },
    ],
  },
];

export default function GroupedDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select<object>
        placeholder="Select a technology"
        options={groupedOptions}
        formatGroupLabel={(group) => (
          <div className="px-1 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            {group.label}
          </div>
        )}
      />
    </div>
  );
}

import Select from '@/components/ui/Select';
import Avatar from '@/components/ui/Avatar';

const members = [
  { value: 'aria', label: 'Aria Patel', avatar: '/img/avatars/thumb-5.jpg' },
  { value: 'diego', label: 'Diego Ramos', avatar: '/img/avatars/thumb-6.jpg' },
  { value: 'mei', label: 'Mei Lin', avatar: '/img/avatars/thumb-7.jpg' },
  { value: 'sam', label: 'Sam Turner', avatar: '/img/avatars/thumb-8.jpg' },
];

function MemberAvatar({ src, alt }: { src: string; alt: string }) {
  return <Avatar size={22} src={src} alt={alt} />;
}

export default function CustomOptionsDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select
        placeholder="Assign a member"
        defaultValue={members[0]}
        options={members}
        customInputDisplay={(selectedItem) =>
          selectedItem ? (
            <Select.ValueWithPrefix
              prefix={
                <MemberAvatar
                  src={selectedItem.avatar}
                  alt={selectedItem.label}
                />
              }
              label={selectedItem.label}
            />
          ) : null
        }
        customOption={({ option, selected, CheckIcon }) => (
          <Select.OptionWithPrefix
            prefix={<MemberAvatar src={option.avatar} alt={option.label} />}
            label={option.label}
            selected={selected}
            checkIcon={CheckIcon}
          />
        )}
      />
    </div>
  );
}

import { useState } from 'react';
import Select from '@/components/ui/Select';

type Tag = { value: string; label: string };

const initialTags: Tag[] = [
  { value: 'bug', label: 'bug' },
  { value: 'feature', label: 'feature' },
  { value: 'docs', label: 'docs' },
];

export default function CreatableDemo() {
  const [tags, setTags] = useState<Tag[]>(initialTags);
  const [selected, setSelected] = useState<Tag[]>([]);

  const handleChange = (next: Tag[]) => {
    const known = new Set(tags.map((tag) => tag.value));
    const created = next.filter((tag) => !known.has(tag.value));
    if (created.length) {
      setTags((prev) => [...prev, ...created]);
    }
    setSelected(next);
  };

  return (
    <div className="w-full max-w-sm">
      <Select.Multi
        isCreatable
        isSearchable
        placeholder="Select or create tags"
        options={tags}
        value={selected}
        onChange={handleChange}
        searchInputProps={{ placeholder: 'Type to search or create...' }}
      />
    </div>
  );
}

import { useState } from 'react';
import Select from '@/components/ui/Select';

type Repo = { value: string; label: string };

const allRepos: Repo[] = [
  { value: 'core', label: 'platform-core' },
  { value: 'ui', label: 'design-system' },
  { value: 'docs', label: 'docs-site' },
  { value: 'infra', label: 'infra-tooling' },
];

export default function AsyncDemo() {
  const [repos, setRepos] = useState<Repo[]>([]);
  const [loading, setLoading] = useState(false);

  const loadOnOpen = () => {
    if (repos.length > 0) {
      return;
    }
    setLoading(true);
    // Mock a request; replace with a real fetch in your app.
    setTimeout(() => {
      setRepos(allRepos);
      setLoading(false);
    }, 1200);
  };

  return (
    <div className="w-full max-w-sm">
      <Select
        placeholder="Select a repository"
        options={repos}
        isLoading={loading}
        onMenuOpen={loadOnOpen}
        noOptionsMessage={loading ? 'Loading...' : 'No options'}
      />
    </div>
  );
}

import { useState } from 'react';
import Select from '@/components/ui/Select';

type Option = { value: string; label: string };

const statuses: Option[] = [
  { value: 'todo', label: 'To do' },
  { value: 'in-progress', label: 'In progress' },
  { value: 'review', label: 'In review' },
  { value: 'done', label: 'Done' },
];

export default function ControlledDemo() {
  const [status, setStatus] = useState<Option>(statuses[1]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Select
        placeholder="Select a status"
        value={status}
        onChange={setStatus}
        options={statuses}
      />
      <div className="text-sm text-muted-foreground">
        Selected:{' '}
        <span className="font-semibold text-foreground">{status.label}</span>
      </div>
    </div>
  );
}