From b3280a848311f670a9a87a41766b66fe01995cbc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 5 May 2026 11:38:39 -0400
Subject: [PATCH] feat(headless): add Select primitive

---
 packages/headless/package.json                |   4 +
 .../headless/src/primitives/select/README.md  | 163 ++++
 .../headless/src/primitives/select/index.ts   |  12 +
 .../src/primitives/select/select.test.tsx     | 704 ++++++++++++++++++
 .../headless/src/primitives/select/select.tsx | 625 ++++++++++++++++
 packages/headless/vite.config.ts              |   1 +
 6 files changed, 1509 insertions(+)
 create mode 100644 packages/headless/src/primitives/select/README.md
 create mode 100644 packages/headless/src/primitives/select/index.ts
 create mode 100644 packages/headless/src/primitives/select/select.test.tsx
 create mode 100644 packages/headless/src/primitives/select/select.tsx

diff --git a/packages/headless/package.json b/packages/headless/package.json
index 97ecfbd4c03..97d663f1487 100644
--- a/packages/headless/package.json
+++ b/packages/headless/package.json
@@ -20,6 +20,10 @@
       "import": "./dist/primitives/popover/index.js",
       "types": "./dist/primitives/popover/index.d.ts"
     },
+    "./select": {
+      "import": "./dist/primitives/select/index.js",
+      "types": "./dist/primitives/select/index.d.ts"
+    },
     "./dialog": {
       "import": "./dist/primitives/dialog/index.js",
       "types": "./dist/primitives/dialog/index.d.ts"
diff --git a/packages/headless/src/primitives/select/README.md b/packages/headless/src/primitives/select/README.md
new file mode 100644
index 00000000000..21cb4813135
--- /dev/null
+++ b/packages/headless/src/primitives/select/README.md
@@ -0,0 +1,163 @@
+# Select
+
+A dropdown select component with keyboard navigation, typeahead, and optional item-to-trigger alignment. Replaces native `<select>` with a fully styled, accessible alternative.
+
+## When to Use
+
+- Picking a single value from a predefined list of options.
+- When you need typeahead, keyboard navigation, and full styling control.
+- Prefer Select over Autocomplete when the user should choose from a fixed list without typing to filter.
+
+## Usage
+
+```tsx
+import { Select } from '@/primitives/select';
+
+<Select>
+  <Select.Trigger>
+    <Select.Value placeholder='Choose a fruit...' />
+  </Select.Trigger>
+  <Select.Positioner>
+    <Select.Popup>
+      <Select.Option
+        value='apple'
+        label='Apple'
+      />
+      <Select.Option
+        value='banana'
+        label='Banana'
+      />
+      <Select.Option
+        value='cherry'
+        label='Cherry'
+      />
+    </Select.Popup>
+  </Select.Positioner>
+</Select>;
+```
+
+### Controlled
+
+```tsx
+const [value, setValue] = useState('apple');
+
+<Select
+  value={value}
+  onValueChange={setValue}
+>
+  {/* ... */}
+</Select>;
+```
+
+### With `items` for SSR label resolution
+
+The `items` prop allows label resolution before options mount (useful for server rendering or deferred lists):
+
+```tsx
+const items = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+];
+
+<Select
+  items={items}
+  defaultValue='apple'
+>
+  {/* Select.Value will display "Apple" even before Options mount */}
+</Select>;
+```
+
+### Disable item-to-trigger alignment
+
+By default, the selected option visually aligns with the trigger. Disable this for standard dropdown positioning:
+
+```tsx
+<Select alignItemWithTrigger={false}>{/* Uses standard Floating UI positioning */}</Select>
+```
+
+## Parts
+
+| Part                | Default Element | Description                                |
+| ------------------- | --------------- | ------------------------------------------ |
+| `Select`            | —               | Root context provider                      |
+| `Select.Trigger`    | `<button>`      | Toggles the dropdown on click              |
+| `Select.Value`      | `<span>`        | Displays the selected label or placeholder |
+| `Select.Portal`     | —               | Portals children (accepts `root` prop)     |
+| `Select.Positioner` | `<div>`         | Floating positioned container              |
+| `Select.Popup`      | `<div>`         | Visual wrapper for the option list         |
+| `Select.Option`     | `<button>`      | A selectable option                        |
+| `Select.Arrow`      | `<svg>`         | Optional floating arrow                    |
+
+## Props
+
+### `Select` (root)
+
+| Prop                   | Type                      | Default          | Description                                                        |
+| ---------------------- | ------------------------- | ---------------- | ------------------------------------------------------------------ |
+| `value`                | `string`                  | —                | Controlled selected value                                          |
+| `defaultValue`         | `string`                  | —                | Initial selected value (uncontrolled)                              |
+| `onValueChange`        | `(value: string) => void` | —                | Called when selection changes                                      |
+| `open`                 | `boolean`                 | —                | Controlled open state                                              |
+| `defaultOpen`          | `boolean`                 | `false`          | Initial open state (uncontrolled)                                  |
+| `onOpenChange`         | `(open: boolean) => void` | —                | Called when open state changes                                     |
+| `items`                | `SelectItem[]`            | —                | `{ label, value }` pairs for label resolution before options mount |
+| `alignItemWithTrigger` | `boolean`                 | `true`           | Visually align selected option over the trigger                    |
+| `placement`            | `Placement`               | `"bottom-start"` | Floating UI placement                                              |
+| `sideOffset`           | `number`                  | `4`              | Gap between trigger and popup (px)                                 |
+
+### `Select.Value`
+
+| Prop          | Type        | Default | Description                     |
+| ------------- | ----------- | ------- | ------------------------------- |
+| `placeholder` | `ReactNode` | —       | Shown when no value is selected |
+
+### `Select.Option`
+
+| Prop       | Type      | Default               | Description                            |
+| ---------- | --------- | --------------------- | -------------------------------------- |
+| `value`    | `string`  | **required**          | The option's value                     |
+| `label`    | `string`  | falls back to `value` | Display label, also used for typeahead |
+| `disabled` | `boolean` | —                     | Prevents selection                     |
+
+### `Select.Trigger`, `Select.Positioner`, `Select.Popup`
+
+No additional props beyond standard HTML attributes and the `render` prop.
+
+### `Select.Arrow`
+
+Accepts all `FloatingArrow` props. `ref` and `context` are injected automatically.
+
+## Keyboard Navigation
+
+| Key               | Action                                |
+| ----------------- | ------------------------------------- |
+| `ArrowDown`       | Move to next option                   |
+| `ArrowUp`         | Move to previous option               |
+| `Enter` / `Space` | Select the active option, close popup |
+| `Escape`          | Close the popup                       |
+| Type a character  | Jump to matching option (typeahead)   |
+
+Typeahead also works while the popup is closed — it changes the selected value directly.
+
+## Data Attributes
+
+| Attribute                         | Applies To | Description                              |
+| --------------------------------- | ---------- | ---------------------------------------- |
+| `data-cl-slot`                    | All parts  | Part identifier (e.g. `"select-option"`) |
+| `data-cl-open` / `data-cl-closed` | Trigger    | Popup open state                         |
+| `data-cl-selected`                | Option     | The currently selected option            |
+| `data-cl-active`                  | Option     | The keyboard-highlighted option          |
+| `data-cl-disabled`                | Option     | Disabled option                          |
+| `data-cl-side`                    | Positioner | Resolved placement side                  |
+
+## Important Notes
+
+- **`label` on `Select.Option`** drives both display in `Select.Value` and typeahead matching. If omitted, `value` is used for both.
+- **`items` prop** is only for label resolution — it does not control which options render. You still render `Select.Option` children yourself.
+- **Disabled options** can still receive keyboard focus but cannot be selected.
+
+## ARIA
+
+- Popup: `role="listbox"`
+- Option: `role="option"`, `aria-selected`, `aria-disabled`
+- Trigger: `aria-expanded`, `aria-haspopup="listbox"`, `aria-controls`
diff --git a/packages/headless/src/primitives/select/index.ts b/packages/headless/src/primitives/select/index.ts
new file mode 100644
index 00000000000..c05100f2203
--- /dev/null
+++ b/packages/headless/src/primitives/select/index.ts
@@ -0,0 +1,12 @@
+export type {
+  SelectArrowProps,
+  SelectItem,
+  SelectOptionProps,
+  SelectPopupProps,
+  SelectPortalProps,
+  SelectPositionerProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from './select';
+export { Select } from './select';
diff --git a/packages/headless/src/primitives/select/select.test.tsx b/packages/headless/src/primitives/select/select.test.tsx
new file mode 100644
index 00000000000..512a0b162e7
--- /dev/null
+++ b/packages/headless/src/primitives/select/select.test.tsx
@@ -0,0 +1,704 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { axe } from '../../test-utils/axe';
+import { Select, type SelectItem } from './select';
+
+afterEach(() => cleanup());
+
+const fruits: SelectItem[] = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' },
+];
+
+function renderSelect(props: Partial<React.ComponentProps<typeof Select>> = {}) {
+  const { children, ...rest } = props as Record<string, unknown>;
+  return render(
+    <Select
+      items={fruits}
+      alignItemWithTrigger={false}
+      {...rest}
+    >
+      <Select.Trigger>
+        <Select.Value placeholder='Pick a fruit...' />
+      </Select.Trigger>
+      <Select.Positioner>
+        <Select.Popup>
+          {fruits.map(({ label, value }) => (
+            <Select.Option
+              key={value}
+              value={value}
+              label={label}
+            >
+              {label}
+            </Select.Option>
+          ))}
+        </Select.Popup>
+      </Select.Positioner>
+    </Select>,
+  );
+}
+
+describe('Select', () => {
+  describe('slot attributes', () => {
+    it('renders trigger with data-cl-slot', () => {
+      renderSelect();
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveAttribute('data-cl-slot', 'select-trigger');
+    });
+
+    it('renders value with data-cl-slot', () => {
+      renderSelect();
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value).toBeInTheDocument();
+    });
+
+    it('renders all parts with correct slot attributes when open', () => {
+      renderSelect({ defaultOpen: true });
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      const popup = document.querySelector('[data-cl-slot="select-popup"]');
+      const options = document.querySelectorAll('[data-cl-slot="select-option"]');
+
+      expect(positioner).toBeInTheDocument();
+      expect(popup).toBeInTheDocument();
+      expect(options).toHaveLength(3);
+    });
+  });
+
+  describe('items prop and label resolution', () => {
+    it('shows placeholder when no value is selected', () => {
+      renderSelect();
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toBe('Pick a fruit...');
+    });
+
+    it('resolves label from items before options mount', () => {
+      renderSelect({ defaultValue: 'banana' });
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toBe('Banana');
+    });
+
+    it('resolves label for controlled value from items', () => {
+      renderSelect({ value: 'cherry' });
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toBe('Cherry');
+    });
+
+    it('falls back to raw value when no items provided', () => {
+      render(
+        <Select
+          defaultValue='banana'
+          alignItemWithTrigger={false}
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <Select.Option
+                value='banana'
+                label='Banana'
+              >
+                Banana
+              </Select.Option>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toBe('banana');
+    });
+
+    it('updates label after selection via option registry', async () => {
+      const user = userEvent.setup();
+      // No items prop — labels only known once options mount
+      render(
+        <Select alignItemWithTrigger={false}>
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <Select.Option
+                value='x'
+                label='Special Item'
+              >
+                Special Item
+              </Select.Option>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(screen.getByText('Special Item'));
+
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toBe('Special Item');
+    });
+  });
+
+  describe('open/close', () => {
+    it('opens on trigger click', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+
+      expect(trigger).toHaveAttribute('data-cl-open', '');
+      expect(document.querySelector('[data-cl-slot="select-popup"]')).toBeInTheDocument();
+    });
+
+    it('closes on Escape', async () => {
+      const user = userEvent.setup();
+      renderSelect({ defaultOpen: true });
+
+      await user.keyboard('{Escape}');
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveAttribute('data-cl-closed', '');
+    });
+
+    it('calls onOpenChange when toggled', async () => {
+      const onOpenChange = vi.fn();
+      const user = userEvent.setup();
+      renderSelect({ onOpenChange });
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('selection', () => {
+    it('selects option on click', async () => {
+      const onValueChange = vi.fn();
+      const user = userEvent.setup();
+      renderSelect({ onValueChange });
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+
+      const option = screen.getByText('Banana');
+      await user.click(option);
+
+      expect(onValueChange).toHaveBeenCalledWith('banana');
+    });
+
+    it('displays selected label in Value after selection', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(screen.getByText('Cherry'));
+
+      const value = document.querySelector('[data-cl-slot="select-value"]');
+      expect(value?.textContent).toContain('Cherry');
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('navigates options with arrow keys', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+      await user.keyboard('{ArrowDown}');
+
+      const activeOption = document.querySelector('[data-cl-slot="select-option"][data-cl-active]');
+      expect(activeOption).toBeInTheDocument();
+    });
+
+    it('scrolls options into view on arrow key navigation', async () => {
+      const manyItems = Array.from({ length: 20 }, (_, i) => ({
+        label: `Item ${i + 1}`,
+        value: `item-${i + 1}`,
+      }));
+
+      const user = userEvent.setup();
+      render(
+        <Select
+          items={manyItems}
+          alignItemWithTrigger={false}
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <div style={{ maxHeight: '100px', overflow: 'auto' }}>
+                {manyItems.map(({ label, value }) => (
+                  <Select.Option
+                    key={value}
+                    value={value}
+                    label={label}
+                  >
+                    {label}
+                  </Select.Option>
+                ))}
+              </div>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      // Navigate down through many items to force scrolling
+      for (let i = 0; i < 15; i++) {
+        await user.keyboard('{ArrowDown}');
+      }
+
+      const activeOption = document.querySelector('[data-cl-slot="select-option"][data-cl-active]');
+      expect(activeOption).toBeInTheDocument();
+
+      // The active item should be visible within its scroll container
+      const scrollContainer = activeOption!.closest('div[style]') as HTMLElement;
+      const optionRect = activeOption!.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      expect(optionRect.bottom).toBeLessThanOrEqual(containerRect.bottom + 1);
+      expect(optionRect.top).toBeGreaterThanOrEqual(containerRect.top - 1);
+    });
+
+    it('scrolls selected item into view when reopening', async () => {
+      const manyItems = Array.from({ length: 20 }, (_, i) => ({
+        label: `Item ${i + 1}`,
+        value: `item-${i + 1}`,
+      }));
+
+      const user = userEvent.setup();
+      render(
+        <Select
+          items={manyItems}
+          alignItemWithTrigger={false}
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <div style={{ maxHeight: '100px', overflow: 'auto' }}>
+                {manyItems.map(({ label, value }) => (
+                  <Select.Option
+                    key={value}
+                    value={value}
+                    label={label}
+                  >
+                    {label}
+                  </Select.Option>
+                ))}
+              </div>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      const trigger = screen.getByRole('combobox');
+
+      // Open, navigate to item near the bottom, select it
+      await user.click(trigger);
+      for (let i = 0; i < 15; i++) {
+        await user.keyboard('{ArrowDown}');
+      }
+      await user.keyboard('{Enter}');
+
+      // Reopen — the selected item should be scrolled into view
+      await user.click(trigger);
+
+      const selectedOption = document.querySelector('[data-cl-slot="select-option"][data-cl-selected]');
+      expect(selectedOption).toBeInTheDocument();
+
+      const scrollContainer = selectedOption!.closest('div[style]') as HTMLElement;
+      const optionRect = selectedOption!.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      expect(optionRect.bottom).toBeLessThanOrEqual(containerRect.bottom + 1);
+      expect(optionRect.top).toBeGreaterThanOrEqual(containerRect.top - 1);
+    });
+  });
+
+  describe('option state attributes', () => {
+    it('marks selected option with data-cl-selected', () => {
+      renderSelect({ defaultValue: 'banana', defaultOpen: true });
+
+      const options = document.querySelectorAll('[data-cl-slot="select-option"]');
+      expect(options[1]).toHaveAttribute('data-cl-selected', '');
+    });
+
+    it('marks active option with data-cl-active', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      await user.keyboard('{ArrowDown}');
+
+      const activeOption = document.querySelector('[data-cl-slot="select-option"][data-cl-active]');
+      expect(activeOption).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled option', () => {
+    it('renders disabled option with data-cl-disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <Select alignItemWithTrigger={false}>
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <Select.Option
+                value='apple'
+                label='Apple'
+              >
+                Apple
+              </Select.Option>
+              <Select.Option
+                value='banana'
+                label='Banana'
+                disabled
+              >
+                Banana
+              </Select.Option>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      const disabledOption = screen.getByText('Banana').closest("[data-cl-slot='select-option']");
+      expect(disabledOption).toHaveAttribute('data-cl-disabled', '');
+      expect(disabledOption).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('does not select disabled option on click', async () => {
+      const onValueChange = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <Select
+          onValueChange={onValueChange}
+          alignItemWithTrigger={false}
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              <Select.Option
+                value='apple'
+                label='Apple'
+              >
+                Apple
+              </Select.Option>
+              <Select.Option
+                value='banana'
+                label='Banana'
+                disabled
+              >
+                Banana
+              </Select.Option>
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(screen.getByText('Banana'));
+
+      expect(onValueChange).not.toHaveBeenCalledWith('banana');
+    });
+  });
+
+  describe('ARIA attributes', () => {
+    it('options have role=option', () => {
+      renderSelect({ defaultOpen: true });
+
+      const options = screen.getAllByRole('option');
+      expect(options).toHaveLength(3);
+    });
+
+    it('selected option has aria-selected=true', () => {
+      renderSelect({ defaultValue: 'apple', defaultOpen: true });
+
+      const options = screen.getAllByRole('option');
+      expect(options[0]).toHaveAttribute('aria-selected', 'true');
+      expect(options[1]).toHaveAttribute('aria-selected', 'false');
+    });
+  });
+
+  describe('animation lifecycle', () => {
+    it('positioner is not rendered when closed', () => {
+      renderSelect();
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      expect(positioner).not.toBeInTheDocument();
+    });
+
+    it('applies data-cl-open on popup when open', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+
+      const popup = document.querySelector('[data-cl-slot="select-popup"]');
+      expect(popup).toHaveAttribute('data-cl-open', '');
+    });
+
+    it('positioner has data-cl-side', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      expect(positioner).toHaveAttribute('data-cl-side');
+    });
+  });
+
+  describe('controlled open', () => {
+    it('respects controlled open prop', () => {
+      renderSelect({ open: true });
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      expect(positioner).toBeInTheDocument();
+    });
+
+    it('does not open when controlled open is false', async () => {
+      const user = userEvent.setup();
+      renderSelect({ open: false });
+
+      await user.click(screen.getByRole('combobox'));
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      expect(positioner).not.toBeInTheDocument();
+    });
+  });
+
+  describe('alignItemWithTrigger', () => {
+    it('defaults to true', () => {
+      // Render without explicitly setting alignItemWithTrigger
+      render(
+        <Select
+          items={fruits}
+          defaultOpen
+          defaultValue='banana'
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              {fruits.map(({ label, value }) => (
+                <Select.Option
+                  key={value}
+                  value={value}
+                  label={label}
+                >
+                  {label}
+                </Select.Option>
+              ))}
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      // The positioner should render (alignItemWithTrigger doesn't prevent rendering)
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]');
+      expect(positioner).toBeInTheDocument();
+    });
+
+    it('uses standard floating styles when disabled', async () => {
+      const user = userEvent.setup();
+      renderSelect({ alignItemWithTrigger: false });
+
+      await user.click(screen.getByRole('combobox'));
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]') as HTMLElement;
+      // Standard Floating UI positioning uses position: absolute with transform
+      expect(positioner.style.position).toBe('absolute');
+    });
+
+    const manyItems: SelectItem[] = Array.from({ length: 20 }, (_, i) => ({
+      label: `Item ${i + 1}`,
+      value: `item-${i + 1}`,
+    }));
+
+    it('aligns selected item with trigger vertically', async () => {
+      render(
+        <Select
+          items={manyItems}
+          defaultOpen
+          defaultValue='item-10'
+        >
+          <Select.Trigger>
+            <Select.Value placeholder='Pick...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              {manyItems.map(({ label, value }) => (
+                <Select.Option
+                  key={value}
+                  value={value}
+                  label={label}
+                >
+                  {label}
+                </Select.Option>
+              ))}
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const selectedOption = document.querySelector('[data-cl-slot="select-option"][data-cl-selected]');
+      expect(selectedOption).toBeInTheDocument();
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const selectedRect = selectedOption!.getBoundingClientRect();
+
+      // The selected item should be positioned near the trigger's vertical position
+      expect(Math.abs(selectedRect.top - triggerRect.top)).toBeLessThan(50);
+    });
+
+    // Requires real layout engine — getBoundingClientRect returns 0 in happy-dom
+    it.skip('repositions when ancestor scrolls', async () => {
+      const user = userEvent.setup();
+      render(
+        <div
+          data-testid='scroll-container'
+          style={{ height: '200px', overflow: 'auto', paddingTop: '300px' }}
+        >
+          <Select
+            items={manyItems}
+            defaultValue='item-5'
+          >
+            <Select.Trigger>
+              <Select.Value placeholder='Pick...' />
+            </Select.Trigger>
+            <Select.Positioner>
+              <Select.Popup>
+                {manyItems.map(({ label, value }) => (
+                  <Select.Option
+                    key={value}
+                    value={value}
+                    label={label}
+                  >
+                    {label}
+                  </Select.Option>
+                ))}
+              </Select.Popup>
+            </Select.Positioner>
+          </Select>
+          <div style={{ height: '500px' }} />
+        </div>,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      const positioner = document.querySelector('[data-cl-slot="select-positioner"]') as HTMLElement;
+      const initialTop = positioner.getBoundingClientRect().top;
+
+      // Scroll the container
+      const scrollContainer = screen.getByTestId('scroll-container');
+      scrollContainer.scrollTop = 100;
+      scrollContainer.dispatchEvent(new Event('scroll'));
+
+      // autoUpdate repositions on scroll — wait for the update
+      await waitFor(() => {
+        const newTop = positioner.getBoundingClientRect().top;
+        expect(newTop).not.toBe(initialTop);
+      });
+    });
+  });
+
+  describe('accessibility (axe)', () => {
+    it('has no violations when closed', async () => {
+      const { container } = render(
+        <Select
+          items={fruits}
+          alignItemWithTrigger={false}
+        >
+          <Select.Trigger aria-label='Fruit'>
+            <Select.Value placeholder='Pick a fruit...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              {fruits.map(({ label, value }) => (
+                <Select.Option
+                  key={value}
+                  value={value}
+                  label={label}
+                >
+                  {label}
+                </Select.Option>
+              ))}
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('has no violations when open', async () => {
+      render(
+        <Select
+          items={fruits}
+          alignItemWithTrigger={false}
+          defaultOpen
+        >
+          <Select.Trigger aria-label='Fruit'>
+            <Select.Value placeholder='Pick a fruit...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              {fruits.map(({ label, value }) => (
+                <Select.Option
+                  key={value}
+                  value={value}
+                  label={label}
+                >
+                  {label}
+                </Select.Option>
+              ))}
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+      expect(await axe(document.body, { rules: { region: { enabled: false } } })).toHaveNoViolations();
+    });
+
+    it('has no violations with a selected value', async () => {
+      const { container } = render(
+        <Select
+          items={fruits}
+          alignItemWithTrigger={false}
+          defaultValue='banana'
+        >
+          <Select.Trigger aria-label='Fruit'>
+            <Select.Value placeholder='Pick a fruit...' />
+          </Select.Trigger>
+          <Select.Positioner>
+            <Select.Popup>
+              {fruits.map(({ label, value }) => (
+                <Select.Option
+                  key={value}
+                  value={value}
+                  label={label}
+                >
+                  {label}
+                </Select.Option>
+              ))}
+            </Select.Popup>
+          </Select.Positioner>
+        </Select>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});
diff --git a/packages/headless/src/primitives/select/select.tsx b/packages/headless/src/primitives/select/select.tsx
new file mode 100644
index 00000000000..fef3374a5eb
--- /dev/null
+++ b/packages/headless/src/primitives/select/select.tsx
@@ -0,0 +1,625 @@
+'use client';
+
+import {
+  arrow,
+  autoUpdate,
+  type ExtendedRefs,
+  FloatingArrow,
+  type FloatingContext,
+  FloatingFocusManager,
+  FloatingList,
+  FloatingNode,
+  FloatingPortal,
+  FloatingTree,
+  flip,
+  type Middleware,
+  offset,
+  type Placement,
+  type ReferenceType,
+  shift,
+  size,
+  type UseInteractionsReturn,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useInteractions,
+  useListItem,
+  useListNavigation,
+  useMergeRefs,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react';
+import {
+  type CSSProperties,
+  createContext,
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import { type TransitionProps, useTransition } from '../../hooks/use-transition';
+import { cssVars } from '../../utils/css-vars';
+import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SelectItem {
+  label: string;
+  value: string;
+}
+
+// ---------------------------------------------------------------------------
+// Label resolution
+// ---------------------------------------------------------------------------
+
+function resolveLabel(
+  value: string | undefined,
+  items: SelectItem[] | undefined,
+  valueToLabelRef: React.MutableRefObject<Map<string, string>>,
+): string | null {
+  if (value === undefined) return null;
+  // 1. items prop (available before options mount)
+  if (items) {
+    const item = items.find(i => i.value === value);
+    if (item) return item.label;
+  }
+  // 2. runtime registry (populated after options mount)
+  const label = valueToLabelRef.current.get(value);
+  if (label) return label;
+  // 3. fallback to raw value
+  return value;
+}
+
+// ---------------------------------------------------------------------------
+// alignSelectedItem middleware
+// ---------------------------------------------------------------------------
+
+/**
+ * Custom floating-ui middleware that positions the floating element so the
+ * selected item overlays the reference (trigger), like a native `<select>`.
+ * Running as middleware means it automatically re-runs on scroll/resize via
+ * `autoUpdate`, preventing drift.
+ */
+function alignSelectedItem(selectedItemRef: RefObject<HTMLElement | null>): Middleware {
+  return {
+    name: 'alignSelectedItem',
+    fn({ elements }) {
+      const selectedEl = selectedItemRef.current;
+      if (!selectedEl) return {};
+
+      const floatingRect = elements.floating.getBoundingClientRect();
+      const selectedRect = selectedEl.getBoundingClientRect();
+      const referenceRect = (elements.reference as HTMLElement).getBoundingClientRect();
+
+      // How far the selected item is from the top of the floating element
+      const itemOffsetInPopup = selectedRect.top - floatingRect.top;
+
+      // Position so the selected item sits at the same Y as the trigger
+      const desiredTop = referenceRect.top - itemOffsetInPopup;
+
+      // Clamp to viewport with 8px padding
+      const viewportHeight = window.innerHeight;
+      const clampedTop = Math.max(8, Math.min(desiredTop, viewportHeight - floatingRect.height - 8));
+
+      return {
+        x: referenceRect.left,
+        y: clampedTop,
+      };
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface SelectContextValue {
+  open: boolean;
+  items: SelectItem[] | undefined;
+  floatingContext: FloatingContext;
+  refs: ExtendedRefs<ReferenceType>;
+  floatingStyles: CSSProperties;
+  placement: Placement;
+  getReferenceProps: UseInteractionsReturn['getReferenceProps'];
+  getFloatingProps: UseInteractionsReturn['getFloatingProps'];
+  getItemProps: UseInteractionsReturn['getItemProps'];
+  activeIndex: number | null;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+  selectedIndex: number | null;
+  selectedValue: string | undefined;
+  selectedLabel: string | null;
+  elementsRef: React.MutableRefObject<Array<HTMLElement | null>>;
+  labelsRef: React.MutableRefObject<Array<string | null>>;
+  popupRef: RefObject<HTMLDivElement | null>;
+  arrowRef: React.MutableRefObject<SVGSVGElement | null>;
+  valueToLabelRef: React.MutableRefObject<Map<string, string>>;
+  selectedItemRef: React.MutableRefObject<HTMLElement | null>;
+  alignItemWithTrigger: boolean;
+  handleSelect: (value: string, index: number) => void;
+  mounted: boolean;
+  transitionProps: TransitionProps;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error('Select compound components must be used within <Select>');
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Select (root)
+// ---------------------------------------------------------------------------
+
+export interface SelectProps {
+  /** Array of `{ label, value }` items for label resolution before options mount. */
+  items?: SelectItem[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When true, the popup is positioned so the selected item overlays the
+   * trigger — like a native `<select>`. Defaults to `true`.
+   */
+  alignItemWithTrigger?: boolean;
+  placement?: Placement;
+  sideOffset?: number;
+  children: ReactNode;
+}
+
+function SelectInner(props: SelectProps) {
+  const {
+    items,
+    alignItemWithTrigger: alignProp = true,
+    placement: placementProp = 'bottom-start',
+    sideOffset = 4,
+    children,
+  } = props;
+
+  const nodeId = useFloatingNodeId();
+
+  const [open, setOpen] = useControllableState(props.open, props.defaultOpen ?? false, props.onOpenChange);
+
+  const [selectedValue, setSelectedValue] = useControllableState<string | undefined>(
+    props.value,
+    props.defaultValue,
+    props.onValueChange as ((value: string | undefined) => void) | undefined,
+  );
+
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  // Label captured at selection time — survives option unmount
+  const [selectedLabel, setSelectedLabel] = useState<string | null>(null);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+  const arrowRef = useRef<SVGSVGElement | null>(null);
+  const popupRef = useRef<HTMLDivElement | null>(null);
+  const valueToLabelRef = useRef<Map<string, string>>(new Map());
+  const selectedItemRef = useRef<HTMLElement | null>(null);
+
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext,
+    placement,
+  } = useFloating({
+    nodeId,
+    open,
+    onOpenChange: setOpen,
+    placement: placementProp,
+    middleware: [
+      offset(alignProp ? 0 : sideOffset),
+      ...(!alignProp ? [flip(), shift({ padding: 5 })] : []),
+      size({
+        apply({ availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+      }),
+      ...(!alignProp ? [arrow({ element: arrowRef })] : []),
+      ...(alignProp ? [alignSelectedItem(selectedItemRef)] : []),
+      cssVars({ sideOffset }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { mounted, transitionProps } = useTransition({
+    open,
+    ref: popupRef,
+  });
+
+  const handleSelect = useCallback(
+    (value: string, index: number) => {
+      setSelectedValue(value);
+      setSelectedIndex(index);
+      setSelectedLabel(valueToLabelRef.current.get(value) ?? value);
+      setOpen(false);
+    },
+    [setSelectedValue, setOpen],
+  );
+
+  const handleTypeaheadMatch = useCallback(
+    (index: number | null) => {
+      if (open) {
+        setActiveIndex(index);
+      } else if (index !== null) {
+        setSelectedIndex(index);
+      }
+    },
+    [open],
+  );
+
+  const click = useClick(floatingContext);
+  const dismiss = useDismiss(floatingContext);
+  const role = useRole(floatingContext, { role: 'listbox' });
+  const listNav = useListNavigation(floatingContext, {
+    listRef: elementsRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+    loop: true,
+  });
+  const typeahead = useTypeahead(floatingContext, {
+    listRef: labelsRef,
+    activeIndex,
+    selectedIndex,
+    onMatch: handleTypeaheadMatch,
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+    listNav,
+    typeahead,
+  ]);
+
+  const contextValue = useMemo<SelectContextValue>(
+    () => ({
+      open,
+      items,
+      floatingContext,
+      refs,
+      floatingStyles,
+      placement,
+      getReferenceProps,
+      getFloatingProps,
+      getItemProps,
+      activeIndex,
+      setActiveIndex,
+      selectedIndex,
+      selectedValue,
+      selectedLabel,
+      elementsRef,
+      labelsRef,
+      popupRef,
+      arrowRef,
+      valueToLabelRef,
+      selectedItemRef,
+      alignItemWithTrigger: alignProp,
+      handleSelect,
+      mounted,
+      transitionProps,
+    }),
+    [
+      open,
+      items,
+      floatingContext,
+      refs,
+      floatingStyles,
+      placement,
+      getReferenceProps,
+      getFloatingProps,
+      getItemProps,
+      activeIndex,
+      setActiveIndex,
+      selectedIndex,
+      selectedValue,
+      selectedLabel,
+      alignProp,
+      handleSelect,
+      mounted,
+      transitionProps,
+    ],
+  );
+
+  return (
+    <FloatingNode id={nodeId}>
+      <SelectContext.Provider value={contextValue}>{children}</SelectContext.Provider>
+    </FloatingNode>
+  );
+}
+
+function SelectRoot(props: SelectProps) {
+  const parentId = useFloatingParentNodeId();
+
+  if (parentId === null) {
+    return (
+      <FloatingTree>
+        <SelectInner {...props} />
+      </FloatingTree>
+    );
+  }
+
+  return <SelectInner {...props} />;
+}
+
+// ---------------------------------------------------------------------------
+// Select.Trigger
+// ---------------------------------------------------------------------------
+
+export interface SelectTriggerProps extends ComponentProps<'button'> {}
+
+function SelectTrigger(props: SelectTriggerProps) {
+  const { render, ...otherProps } = props;
+  const { open, refs, getReferenceProps } = useSelectContext();
+
+  const state = { open };
+
+  const defaultProps = {
+    type: 'button' as const,
+    'data-cl-slot': 'select-trigger',
+    ref: refs.setReference,
+    ...(getReferenceProps() as React.ComponentPropsWithRef<'button'>),
+  };
+
+  return renderElement({
+    defaultTagName: 'button',
+    render,
+    state,
+    stateAttributesMapping: {
+      open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
+    },
+    props: mergeProps<'button'>(defaultProps, otherProps),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Select.Value
+// ---------------------------------------------------------------------------
+
+export interface SelectValueProps extends ComponentProps<'span'> {
+  placeholder?: ReactNode;
+}
+
+function SelectValue(props: SelectValueProps) {
+  const { render, placeholder, ...otherProps } = props;
+  const { selectedValue, selectedLabel, items, valueToLabelRef } = useSelectContext();
+
+  const displayText =
+    selectedValue !== undefined ? (selectedLabel ?? resolveLabel(selectedValue, items, valueToLabelRef)) : placeholder;
+
+  const defaultProps = {
+    'data-cl-slot': 'select-value',
+    children: displayText,
+  };
+
+  return renderElement({
+    defaultTagName: 'span',
+    render,
+    props: mergeProps<'span'>(defaultProps, otherProps),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Select.Portal
+// ---------------------------------------------------------------------------
+
+export interface SelectPortalProps {
+  children: ReactNode;
+  root?: HTMLElement | null | React.RefObject<HTMLElement | null>;
+}
+
+function SelectPortal(props: SelectPortalProps) {
+  const { mounted } = useSelectContext();
+  if (!mounted) return null;
+  return <FloatingPortal root={props.root}>{props.children}</FloatingPortal>;
+}
+
+// ---------------------------------------------------------------------------
+// Select.Positioner
+// ---------------------------------------------------------------------------
+
+export interface SelectPositionerProps extends ComponentProps<'div'> {}
+
+function SelectPositioner(props: SelectPositionerProps) {
+  const { render, ...otherProps } = props;
+  const {
+    mounted,
+    floatingContext,
+    refs,
+    floatingStyles,
+    placement,
+    getFloatingProps,
+    elementsRef,
+    labelsRef,
+    setActiveIndex,
+  } = useSelectContext();
+
+  const side = placement.split('-')[0];
+
+  const defaultProps = {
+    'data-cl-slot': 'select-positioner',
+    'data-cl-side': side,
+    ref: refs.setFloating,
+    style: floatingStyles,
+    ...(getFloatingProps({
+      onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+        if (event.key === 'Home' || event.key === 'End') {
+          event.preventDefault();
+          const items = elementsRef.current;
+          if (event.key === 'Home') {
+            const firstEnabled = items.findIndex(el => el != null && !el.hasAttribute('aria-disabled'));
+            if (firstEnabled !== -1) setActiveIndex(firstEnabled);
+          } else {
+            for (let i = items.length - 1; i >= 0; i--) {
+              if (items[i] != null && !items[i]!.hasAttribute('aria-disabled')) {
+                setActiveIndex(i);
+                break;
+              }
+            }
+          }
+        }
+      },
+    }) as React.ComponentPropsWithRef<'div'>),
+  };
+
+  return (
+    <FloatingFocusManager
+      context={floatingContext}
+      modal={false}
+    >
+      <FloatingList
+        elementsRef={elementsRef}
+        labelsRef={labelsRef}
+      >
+        {renderElement({
+          defaultTagName: 'div',
+          render,
+          enabled: mounted,
+          props: mergeProps<'div'>(defaultProps, otherProps),
+        })}
+      </FloatingList>
+    </FloatingFocusManager>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Select.Popup
+// ---------------------------------------------------------------------------
+
+export interface SelectPopupProps extends ComponentProps<'div'> {}
+
+function SelectPopup(props: SelectPopupProps) {
+  const { render, ...otherProps } = props;
+  const { popupRef, transitionProps } = useSelectContext();
+
+  const defaultProps = {
+    'data-cl-slot': 'select-popup',
+    ref: popupRef,
+    ...transitionProps,
+  };
+
+  return renderElement({
+    defaultTagName: 'div',
+    render,
+    props: mergeProps<'div'>(defaultProps, otherProps),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Select.Option
+// ---------------------------------------------------------------------------
+
+export interface SelectOptionProps extends ComponentProps<'button'> {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+function SelectOption(props: SelectOptionProps) {
+  const { render, value, label, disabled, ...otherProps } = props;
+  const { activeIndex, selectedValue, getItemProps, handleSelect, valueToLabelRef, selectedItemRef } =
+    useSelectContext();
+
+  const displayLabel = label ?? value;
+  const { ref: itemRef, index } = useListItem({ label: displayLabel });
+
+  const isSelected = selectedValue === value;
+  const isActive = activeIndex === index;
+
+  // Register value→label mapping for Select.Value display
+  useEffect(() => {
+    valueToLabelRef.current.set(value, displayLabel);
+    return () => {
+      valueToLabelRef.current.delete(value);
+    };
+  }, [value, displayLabel, valueToLabelRef]);
+
+  // Track the selected item element for alignItemWithTrigger
+  const combinedRef = useMergeRefs([itemRef, isSelected ? selectedItemRef : null]);
+
+  const state = {
+    selected: isSelected,
+    active: isActive,
+    disabled: !!disabled,
+  };
+
+  const defaultProps = {
+    'data-cl-slot': 'select-option',
+    ref: combinedRef,
+    role: 'option' as const,
+    'aria-selected': isSelected,
+    'aria-disabled': disabled || undefined,
+    tabIndex: isActive ? 0 : -1,
+    ...(getItemProps({
+      onClick() {
+        if (!disabled) handleSelect(value, index);
+      },
+    }) as React.ComponentPropsWithRef<'button'>),
+  };
+
+  return renderElement({
+    defaultTagName: 'button',
+    render,
+    state,
+    stateAttributesMapping: {
+      selected: (v: boolean) => (v ? { 'data-cl-selected': '' } : null),
+      active: (v: boolean) => (v ? { 'data-cl-active': '' } : null),
+      disabled: (v: boolean) => (v ? { 'data-cl-disabled': '' } : null),
+    },
+    props: mergeProps<'button'>(defaultProps, otherProps),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Select.Arrow
+// ---------------------------------------------------------------------------
+
+export interface SelectArrowProps extends React.ComponentPropsWithRef<typeof FloatingArrow> {}
+
+function SelectArrowComponent(props: SelectArrowProps) {
+  const { floatingContext, arrowRef, placement } = useSelectContext();
+  const side = placement.split('-')[0];
+
+  return (
+    <FloatingArrow
+      data-cl-slot='select-arrow'
+      data-cl-side={side}
+      {...props}
+      ref={arrowRef}
+      context={floatingContext}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Compound export
+// ---------------------------------------------------------------------------
+
+export const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Portal: SelectPortal,
+  Positioner: SelectPositioner,
+  Popup: SelectPopup,
+  Option: SelectOption,
+  Arrow: SelectArrowComponent,
+});
diff --git a/packages/headless/vite.config.ts b/packages/headless/vite.config.ts
index 53c1f77a990..613ef999005 100644
--- a/packages/headless/vite.config.ts
+++ b/packages/headless/vite.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
         'primitives/tabs/index': 'src/primitives/tabs/index.ts',
         'primitives/tooltip/index': 'src/primitives/tooltip/index.ts',
         'primitives/popover/index': 'src/primitives/popover/index.ts',
+        'primitives/select/index': 'src/primitives/select/index.ts',
         'primitives/dialog/index': 'src/primitives/dialog/index.ts',
         'utils/index': 'src/utils/index.ts',
         'hooks/use-controllable-state': 'src/hooks/use-controllable-state.ts',