Autocomplete

import { createSignal } from "solid-js"
import * as Autocomplete from "@danielfrg/solid-ui/autocomplete"
import styles from "./index.module.css"

interface Fruit {
  value: string
  label: string
  disabled: boolean
}

const ALL_FRUITS: Fruit[] = [
  { value: "apple", label: "Apple", disabled: false },
  { value: "banana", label: "Banana", disabled: false },
  { value: "blueberry", label: "Blueberry", disabled: false },
  { value: "cherry", label: "Cherry", disabled: false },
  { value: "coconut", label: "Coconut", disabled: false },
  { value: "grape", label: "Grape", disabled: false },
  { value: "mango", label: "Mango", disabled: false },
  { value: "orange", label: "Orange", disabled: false },
  { value: "peach", label: "Peach", disabled: false },
  { value: "strawberry", label: "Strawberry", disabled: false },
]

export function DemoAutocompleteHero() {
  const [options, setOptions] = createSignal<Fruit[]>(ALL_FRUITS)

  const onInputChange = (value: string) => {
    const filtered = ALL_FRUITS.filter((fruit) => fruit.label.toLowerCase().includes(value.toLowerCase()))
    setOptions(filtered)
  }

  return (
    <Autocomplete.Root<Fruit>
      class={styles.root}
      options={options()}
      optionValue="value"
      optionTextValue="label"
      optionLabel="label"
      optionDisabled="disabled"
      onInputChange={onInputChange}
      placeholder="Search a fruit..."
      itemComponent={(props) => (
        <Autocomplete.Item item={props.item} class={styles.item}>
          <Autocomplete.ItemLabel>{props.item.rawValue.label}</Autocomplete.ItemLabel>
        </Autocomplete.Item>
      )}
    >
      <Autocomplete.Label class={styles.label}>Fruit</Autocomplete.Label>
      <Autocomplete.Control class={styles.control}>
        <Autocomplete.Input class={styles.input} />
        <Autocomplete.Indicator class={styles.indicator}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
        </Autocomplete.Indicator>
      </Autocomplete.Control>
      <Autocomplete.Portal>
        <Autocomplete.Content class={styles.content}>
          <Autocomplete.Listbox class={styles.listbox} />
          <Autocomplete.NoResult class={styles["no-result"]}>No results found.</Autocomplete.NoResult>
        </Autocomplete.Content>
      </Autocomplete.Portal>
    </Autocomplete.Root>
  )
}

.root {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 15rem;
}

.label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.control {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background-color: white;
  padding-inline-end: 0.5rem;
}

.control:focus-within {
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

.input {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.875rem;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-gray-900);
}

.input::placeholder {
  color: var(--color-gray-400);
}

.indicator {
  display: flex;
  align-items: center;
  color: var(--color-gray-400);
}

.content {
  background-color: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transform-origin: var(--kb-combobox-content-transform-origin);
  animation: contentHide 250ms ease-in forwards;
}

.content[data-expanded] {
  animation: contentShow 250ms ease-out;
}

.listbox {
  margin: 0;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.25rem;
}

.item {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  cursor: default;
  color: var(--color-gray-900);
  outline: none;
}

.item[data-highlighted] {
  background-color: var(--color-gray-100);
}

.item[data-disabled] {
  opacity: 0.5;
}

.no-result {
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  text-align: center;
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentHide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}