Select

npm install react-aria-components

"use client";

import type { ReactNode } from "react";
import {
  Button,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  Select as AriaSelect,
  SelectValue,
  type ListBoxItemProps,
  type SelectProps as AriaSelectProps,
} from "react-aria-components";

const join = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(" ");

export const selectStyles = {
  root: "flex flex-col gap-(--tui-select-gap) font-(family-name:--tui-font) data-disabled:opacity-(--tui-select-disabled-opacity)",
  label: "text-(length:--tui-select-label-size) leading-none font-(--tui-select-label-weight) text-(--tui-select-label)",
  trigger:
    "flex h-(--tui-select-height) w-full cursor-default items-center justify-between gap-2 rounded-(--tui-select-radius) border-solid border-(length:--tui-select-border-width) border-(--tui-select-border) bg-(--tui-select-bg) px-(--tui-select-padding-x) text-left font-(family-name:--tui-font) text-(length:--tui-select-font-size) text-(--tui-select-fg) outline-none transition-colors duration-(--tui-duration) data-focus-visible:[outline:var(--tui-select-ring-width)_solid_var(--tui-select-ring)] data-focus-visible:[outline-offset:var(--tui-select-ring-offset)] data-hovered:border-(--tui-select-border-hover)",
  value: "min-w-0 flex-1 truncate data-placeholder:text-(--tui-select-placeholder)",
  icon: "size-4 shrink-0 text-(--tui-select-placeholder)",
  popover:
    "w-(--trigger-width) overflow-auto rounded-(--tui-select-menu-radius) border-solid border-(length:--tui-select-border-width) border-(--tui-select-menu-border) bg-(--tui-select-menu-bg) p-(--tui-select-menu-padding) font-(family-name:--tui-font) shadow-(--tui-select-menu-shadow)",
  list: "outline-none",
  item: "flex h-(--tui-select-item-height) cursor-default items-center rounded-(--tui-select-item-radius) px-(--tui-select-item-padding-x) text-(length:--tui-select-font-size) leading-none text-(--tui-select-fg) outline-none data-disabled:opacity-(--tui-select-disabled-opacity) data-focused:bg-(--tui-select-item-focus-bg) data-selected:font-(--tui-select-item-selected-weight)",
};

export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "className" | "children"> {
  label?: string;
  /** For a list built from data. Otherwise pass SelectItem children. */
  items?: Iterable<T>;
  children: ReactNode | ((item: T) => ReactNode);
  className?: string;
}

export function Select<T extends object>({ label, items, children, className, ...props }: SelectProps<T>) {
  return (
    <AriaSelect {...props} className={join(selectStyles.root, className)}>
      {label && <Label data-slot="field-label" className={selectStyles.label}>{label}</Label>}
      <Button data-slot="select-trigger" className={selectStyles.trigger}>
        <SelectValue className={selectStyles.value} />
        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={selectStyles.icon}>
          <path d="M4 6l4 4 4-4" />
        </svg>
      </Button>
      <Popover data-slot="select-menu" className={selectStyles.popover}>
        <ListBox items={items} className={selectStyles.list}>
          {children}
        </ListBox>
      </Popover>
    </AriaSelect>
  );
}

export function SelectItem({ className, ...props }: Omit<ListBoxItemProps, "className"> & { className?: string }) {
  return <ListBoxItem {...props} className={join(selectStyles.item, className)} />;
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Select */
  --tui-select-radius: var(--tui-radius);
  --tui-select-border-width: var(--tui-border-width);
  --tui-select-height: calc(var(--tui-space) * 9);
  --tui-select-padding-x: calc(var(--tui-space) * 3);
  --tui-select-gap: calc(var(--tui-space) * 1.5);
  --tui-select-font-size: var(--tui-text);
  --tui-select-label-size: 13px;
  --tui-select-label-weight: 500;
  --tui-select-bg: var(--tui-bg);
  --tui-select-fg: var(--tui-fg);
  --tui-select-border: var(--tui-border);
  --tui-select-placeholder: var(--tui-muted-fg);
  --tui-select-label: var(--tui-fg);
  --tui-select-menu-radius: var(--tui-radius);
  --tui-select-menu-padding: calc(var(--tui-space) * 1);
  --tui-select-item-height: calc(var(--tui-space) * 8);
  --tui-select-item-padding-x: calc(var(--tui-space) * 2);
  --tui-select-item-radius: calc(var(--tui-radius) * 0.75);
  --tui-select-menu-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  --tui-select-menu-bg: var(--tui-bg);
  --tui-select-menu-border: var(--tui-border);
  --tui-select-border-hover: color-mix(in oklab, var(--tui-border) 55%, var(--tui-fg));
  --tui-select-item-focus-bg: var(--tui-muted);
  --tui-select-item-selected-weight: 600;
  --tui-select-ring: var(--tui-ring);
  --tui-select-ring-width: 2px;
  --tui-select-ring-offset: 2px;
  --tui-select-disabled-opacity: 0.5;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}