AutoComplete

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     AutoComplete is a COMPOSITE (antd, no framework-free element), so its HTML form is a CDN-React
     page — React + antd load from a CDN (esm.sh) and mount on open. It consumes the SAME shared
     `autocompleteTheme` the React/Vue wrappers use, so it renders the DS V3 look (32px control,
     radius 8, #E3E3E3 border, brand focus, brand-tint option). size / status / allowClear / grouped
     options all theme through the same token set.
     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->
<div id="root"></div>
<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { ConfigProvider, AutoComplete } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { autocompleteTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/autocomplete-theme.js';

  const h = React.createElement;
  // Grouped ({ label, options }) suggestions — flat works too.
  const options = [
    { label: 'Live polls', options: [{ value: 'Poll' }, { value: 'Quiz' }, { value: 'Word cloud' }] },
    { label: 'Discussion', options: [{ value: 'Q&A' }, { value: 'Open-ended' }] },
  ];

  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: autocompleteTheme },
      h(AutoComplete, {
        options,
        size: 'default',          // 'small' | 'default' | 'large' → 24 / 32 / 40
        status: undefined,        // 'error' | 'warning' for validation
        allowClear: true,         // × affordance once there's a value
        placeholder: 'Type a slide type',
        filterOption: (input, opt) => opt.value.toLowerCase().includes(input.toLowerCase()),
        style: { width: 260 },
      })
    )
  );
</script>

import { ConfigProvider, AutoComplete } from 'antd';   // antd v6
import { autocompleteTheme } from '@ahaslides-product/design/autocomplete-theme';

// Flat or grouped ({ label, options }) suggestions — both theme the same.
const options = [
  { label: 'Live polls',  options: [{ value: 'Poll' }, { value: 'Quiz' }, { value: 'Word cloud' }] },
  { label: 'Discussion',  options: [{ value: 'Q&A' }, { value: 'Open-ended' }] },
];

<ConfigProvider theme={autocompleteTheme}>
  <AutoComplete
    options={options}
    size="default"          // 'small' | 'default' | 'large' → 24 / 32 / 40
    status={error ? 'error' : undefined}   // 'error' | 'warning' — DS V3 Input states
    allowClear              // × affordance once there's a value
    disabled={false}
    placeholder="Type a slide type"
    onSearch={fetchSuggestions}   // fires as the query changes
    onSelect={setValue}
    filterOption={(input, opt) => opt.value.toLowerCase().includes(input.toLowerCase())}
    style={{ width: 260 }}
  />
</ConfigProvider>
// One shared autocompleteTheme → the DS V3 look; AutoComplete allows free text, use Select if the value must be from the set.

<script setup>
import { ref } from 'vue';
import { ConfigProvider, AutoComplete } from 'ant-design-vue';   // ant-design-vue v4
import { autocompleteTheme } from '@ahaslides-product/design/autocomplete-theme';

const value = ref('');
// Flat or grouped ({ label, options }) suggestions — both theme the same.
const options = ref([
  { label: 'Live polls', options: [{ value: 'Poll' }, { value: 'Quiz' }, { value: 'Word cloud' }] },
  { label: 'Discussion', options: [{ value: 'Q&A' }, { value: 'Open-ended' }] },
]);
</script>

<template>
  <a-config-provider :theme="autocompleteTheme">
    <a-auto-complete
      v-model:value="value"
      :options="options"
      size="default"                    <!-- 'small' | 'default' | 'large' → 24 / 32 / 40 -->
      :status="error ? 'error' : undefined"  <!-- 'error' | 'warning' -->
      allow-clear
      :disabled="false"
      placeholder="Type a slide type"
      :filter-option="(input, opt) => opt.value.toLowerCase().includes(input.toLowerCase())"
      style="width: 260px"
    />
  </a-config-provider>
</template>
<!-- The SAME autocompleteTheme as React → one DS V3 look across both vendor libraries. -->

// @ahaslides-product/design/autocomplete-theme — declared ONCE, consumed by both tiers.
import { autocompleteTheme } from '@ahaslides-product/design/autocomplete-theme';

export const autocompleteTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    borderRadius: 8,
    controlHeight: 32,
    colorBorder: '#E3E3E3',
    colorTextPlaceholder: '#8A8A8A',
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    // AutoComplete renders on Ant's Select internals — theme it through the Select component token.
    Select: {
      optionSelectedBg: '#F9F5FF',   // brand-tint selected row
      optionActiveBg: '#F7F7F7',     // keyboard/hover row
      borderRadius: 8,
      controlHeight: 32,
    },
  },
};