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 font-(family-name:--tui-font) data-disabled:opacity-(--tui-select-disabled-opacity)",
  // One box holds the label and the choice, like the kit's text field, with the arrow at its side.
  trigger:
    "flex min-h-(--tui-select-height) w-full cursor-default items-center gap-3 rounded-(--tui-select-radius) border-none bg-(--tui-select-bg) px-(--tui-select-padding-x) py-(--tui-select-padding-y) text-left font-(family-name:--tui-font) outline-none transition-[background-color,box-shadow] duration-(--tui-duration) ease-out data-focus-visible:[box-shadow:0_0_0_var(--tui-select-ring-width)_var(--tui-select-ring)] data-hovered:bg-(--tui-select-bg-hover) data-pressed:bg-(--tui-select-bg-hover)",
  stack: "flex min-w-0 flex-1 flex-col gap-1",
  label: "text-(length:--tui-select-label-size) leading-none font-(--tui-select-label-weight) text-(--tui-select-label)",
  value: "truncate text-(length:--tui-select-font-size) leading-tight text-(--tui-select-fg) data-placeholder:text-(--tui-select-placeholder)",
  icon: "size-4 shrink-0 text-(--tui-select-label)",
  popover: "w-(--trigger-width) overflow-auto rounded-(--tui-select-menu-radius) bg-(--tui-select-menu-bg) p-(--tui-select-menu-padding) font-(family-name:--tui-font) shadow-(--tui-select-menu-shadow) outline-none",
  list: "flex flex-col gap-0.5 outline-none",
  item: "flex min-h-(--tui-select-item-height) cursor-default items-center justify-between gap-3 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 transition-colors duration-(--tui-duration) data-disabled:opacity-(--tui-select-disabled-opacity) data-focused:bg-(--tui-select-item-focus-bg)",
  check: "size-4 shrink-0 text-(--tui-select-check)",
};

export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "className" | "children"> {
  label?: string;
  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)}>
      <Button data-slot="select-trigger" className={selectStyles.trigger}>
        <span className={selectStyles.stack}>
          {label && <Label className={selectStyles.label}>{label}</Label>}
          <SelectValue className={selectStyles.value} />
        </span>
        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={selectStyles.icon}>
          <path d="M5 6.500l3-3 3 3M5 9.500l3 3 3-3" />
        </svg>
      </Button>
      <Popover data-slot="select-menu" offset={8} className={selectStyles.popover}>
        <ListBox items={items} className={selectStyles.list}>
          {children}
        </ListBox>
      </Popover>
    </AriaSelect>
  );
}

export function SelectItem({ className, children, ...props }: Omit<ListBoxItemProps, "className" | "children"> & { children: ReactNode; className?: string }) {
  return (
    <ListBoxItem textValue={typeof children === "string" ? children : undefined} {...props} className={join(selectStyles.item, className)}>
      {({ isSelected }) => (
        <>
          {children}
          {isSelected && (
            <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={selectStyles.check}>
              <path d="M3.500 8.500l3 3 6-7" />
            </svg>
          )}
        </>
      )}
    </ListBoxItem>
  );
}

: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-height: calc(var(--tui-space) * 14);
  --tui-select-padding-x: calc(var(--tui-space) * 4);
  --tui-select-padding-y: calc(var(--tui-space) * 2.5);
  --tui-select-radius: calc(var(--tui-radius) * 1.75);
  --tui-select-font-size: calc(var(--tui-text) + 1px);
  --tui-select-label-size: calc(var(--tui-text) - 2px);
  --tui-select-label-weight: 500;
  --tui-select-bg: color-mix(in srgb, var(--tui-bg) 95%, var(--tui-fg));
  --tui-select-fg: var(--tui-fg);
  --tui-select-label: var(--tui-muted-fg);
  --tui-select-placeholder: color-mix(in srgb, var(--tui-muted-fg) 65%, transparent);
  --tui-select-bg-hover: color-mix(in srgb, var(--tui-bg) 92%, var(--tui-fg));
  --tui-select-ring: var(--tui-fg);
  --tui-select-ring-width: 2px;
  --tui-select-menu-radius: calc(var(--tui-radius) * 2.25);
  --tui-select-menu-padding: calc(var(--tui-space) * 1.5);
  --tui-select-item-height: calc(var(--tui-space) * 10);
  --tui-select-item-radius: calc(var(--tui-radius) * 1.5);
  --tui-select-item-padding-x: calc(var(--tui-space) * 3);
  --tui-select-menu-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-select-menu-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-select-item-focus-bg: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-select-check: var(--tui-fg);
  --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;
}