Select

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     Select 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 `selectTheme` the React/Vue wrappers use, so it renders
     the DS V3 look (32px control, radius 8, #E3E3E3 border, brand-tint selected option).
     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, Select } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { selectTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/select-theme.js';

  const h = React.createElement;

  const options = [
    { value: 'poll',      label: 'Poll' },
    { value: 'quiz',      label: 'Quiz' },
    { value: 'wordcloud', label: 'Word cloud' },
    { value: 'qa',        label: 'Q&A' },
  ];

  // Same shared theme the React/Vue wrappers pass to ConfigProvider.
  // The DS V3 matrix is just props: size ('small'|'default'|'large'),
  // status ('error'|'warning'), mode ('multiple'|'tags'), allowClear, loading, disabled.
  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: selectTheme },
      h(Select, {
        showSearch: true,
        size: 'default',        // 'small' | 'default' | 'large' → 24 / 32 / 40
        mode: 'multiple',       // omit for single; 'multiple' | 'tags'
        allowClear: true,
        placeholder: 'Choose a slide type',
        options,
        style: { width: 240 },
      })
    )
  );
</script>

import { ConfigProvider, Select } from 'antd';   // antd v6
import { selectTheme } from '@ahaslides-product/design/select-theme';

const options = [
  { value: 'poll',      label: 'Poll' },
  { value: 'quiz',      label: 'Quiz' },
  { value: 'wordcloud', label: 'Word cloud' },
  { value: 'qa',        label: 'Q&A' },
];

<ConfigProvider theme={selectTheme}>
  <Select
    showSearch
    size="default"                          // small | default | large → 24 / 32 / 40
    status={error ? 'error' : undefined}    // 'error' | 'warning' for validation
    mode="multiple"                         // omit for single; 'multiple' | 'tags'
    allowClear                              // × to clear the selection
    loading={fetching}                      // spinner while async options load
    disabled={locked}
    placeholder="Choose a slide type"
    options={options}
    value={type}
    onChange={setType}
    style={{ width: 240 }}
  />
</ConfigProvider>
// One shared selectTheme → the DS V3 look; never restyle a bare <Select> per call site.

<script setup>
import { ref } from 'vue';
import { ConfigProvider, Select } from 'ant-design-vue';   // ant-design-vue v4
import { selectTheme } from '@ahaslides-product/design/select-theme';

const type = ref('poll');
const options = [
  { value: 'poll',      label: 'Poll' },
  { value: 'quiz',      label: 'Quiz' },
  { value: 'wordcloud', label: 'Word cloud' },
  { value: 'qa',        label: 'Q&A' },
];
</script>

<template>
  <a-config-provider :theme="selectTheme">
    <a-select
      v-model:value="type"
      show-search
      size="default"                       <!-- small | large → 24 / 40 -->
      :status="error ? 'error' : ''"       <!-- 'error' | 'warning' -->
      mode="multiple"                      <!-- omit for single; 'multiple' | 'tags' -->
      allow-clear
      :loading="fetching"
      :disabled="locked"
      placeholder="Choose a slide type"
      :options="options"
      style="width: 240px"
    />
  </a-config-provider>
</template>
<!-- The SAME selectTheme as React → one DS V3 look across both vendor libraries. -->

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

export const selectTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    borderRadius: 8,
    controlHeight: 32,
    colorBorder: '#E3E3E3',            // 1px rest border
    colorTextPlaceholder: '#8A8A8A',
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    Select: {
      optionSelectedBg: '#F9F5FF',     // brand-tint selected row
      optionSelectedColor: '#6A1EBB',
      optionActiveBg: '#F7F7F7',       // keyboard/hover row
      borderRadius: 8,
      controlHeight: 32,
    },
  },
};