@mihcm/ui 0.14.1 → 0.15.0

package/src/Select.tsx

@@ -3,9 +3,10 @@
 /**
  * Select (web variant — React DOM).
  *
- * Custom composable select dropdown. No native `<select>` or external deps.
+ * Composable select dropdown built on top of native focus management — no
+ * external listbox engine, no native `<select>`. Plus a `react-select`-backed
+ * family for searchable / async / multi / creatable cases.
  *
- * Usage:
  *   <Select value={val} onValueChange={setVal}>
  *     <SelectTrigger placeholder="Pick a fruit" />
  *     <SelectContent>
@@ -14,697 +15,38 @@
  *     </SelectContent>
  *   </Select>
  *
- * Controlled-only: pass `value` / `onValueChange`.
- * Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close.
- * WCAG 2.1 AA: role="listbox", role="option", aria-expanded, aria-selected.
+ * Controlled-only: pass `value` / `onValueChange`. Keyboard: ArrowDown/Up to
+ * navigate, Enter to select, Escape to close. WCAG 2.1 AA: role="listbox",
+ * role="option", aria-expanded, aria-selected.
+ *
+ * Public barrel — implementation split across `./Select/*` per CLAUDE.md §6.
  *
  * Wiki: docs/components/Select.md
  */
-import {
-  forwardRef,
-  Children,
-  createContext,
-  isValidElement,
-  useContext,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import ReactSelectBase, {
-  type ClassNamesConfig,
-  type GroupBase,
-  type Props as BaseReactSelectProps,
-  type SelectComponentsConfig,
-} from 'react-select';
-import ReactAsyncSelectBase, { type AsyncProps } from 'react-select/async';
-import ReactCreatableSelectBase, { type CreatableProps } from 'react-select/creatable';
-import ReactAsyncCreatableSelectBase, {
-  type AsyncCreatableProps,
-} from 'react-select/async-creatable';
-import makeAnimated from 'react-select/animated';
-import { cn } from './internal/cn.js';
-
-interface ReactSelectDefaultableProps<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
-> {
-  className?: string | undefined;
-  classNamePrefix?: string | null | undefined;
-  classNames?: ClassNamesConfig<Option, IsMulti, Group> | undefined;
-  unstyled?: boolean | undefined;
-}
-
-export interface DefaultReactSelectOption {
-  value: string;
-  label: string;
-  isDisabled?: boolean;
-}
-
-export type ReactSelectProps<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> = BaseReactSelectProps<Option, IsMulti, Group>;
-
-export type ReactAsyncSelectProps<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> = AsyncProps<Option, IsMulti, Group>;
-
-export type ReactCreatableSelectProps<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> = CreatableProps<Option, IsMulti, Group>;
-
-export type ReactAsyncCreatableSelectProps<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> = AsyncCreatableProps<Option, IsMulti, Group>;
-
-export function getReactSelectAnimatedComponents<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(): SelectComponentsConfig<Option, IsMulti, Group> {
-  return makeAnimated() as unknown as SelectComponentsConfig<Option, IsMulti, Group>;
-}
-
-export const reactSelectAnimatedComponents: SelectComponentsConfig<
-  DefaultReactSelectOption,
-  false,
-  GroupBase<DefaultReactSelectOption>
-> =
-  getReactSelectAnimatedComponents<DefaultReactSelectOption>();
-
-const reactSelectClassNames = {
-  clearIndicator: ({ isFocused }) => cn(
-    'rounded-md p-1 text-muted-foreground transition-colors',
-    'hover:bg-muted hover:text-foreground',
-    isFocused && 'text-foreground',
-  ),
-  control: ({ isDisabled, isFocused }) => cn(
-    'min-h-10 rounded-lg border bg-card px-2.5 text-body-sm shadow-mi-input transition-colors',
-    'hover:border-primary/60',
-    isFocused ? 'border-primary ring-2 ring-ring/20' : 'border-border',
-    isDisabled && 'cursor-not-allowed bg-muted opacity-50',
-  ),
-  dropdownIndicator: ({ isFocused }) => cn(
-    'rounded-md p-1 text-muted-foreground transition-colors',
-    'hover:bg-muted hover:text-foreground',
-    isFocused && 'text-foreground',
-  ),
-  group: () => 'py-1',
-  groupHeading: () => 'px-2 py-1 text-xs font-semibold text-muted-foreground',
-  indicatorsContainer: () => 'gap-1',
-  indicatorSeparator: () => 'mx-1 my-2 w-px self-stretch bg-border',
-  input: () => 'text-foreground',
-  loadingIndicator: () => 'text-muted-foreground',
-  loadingMessage: () => 'px-3 py-6 text-center text-body-sm text-muted-foreground',
-  menu: () => 'z-50 mt-1 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-mi-input',
-  menuList: () => 'max-h-72 overflow-y-auto p-1',
-  multiValue: () => 'm-0.5 inline-flex items-center gap-1 rounded-md bg-muted text-foreground',
-  multiValueLabel: () => 'px-2 py-0.5 text-xs font-medium',
-  multiValueRemove: () => cn(
-    'rounded-r-md px-1 text-muted-foreground transition-colors',
-    'hover:bg-destructive hover:text-destructive-foreground',
-  ),
-  noOptionsMessage: () => 'px-3 py-6 text-center text-body-sm text-muted-foreground',
-  option: ({ isDisabled, isFocused, isSelected }) => cn(
-    'cursor-pointer rounded-md px-2 py-1.5 text-body-sm outline-none transition-colors',
-    isFocused && 'bg-muted',
-    isSelected && 'bg-primary text-primary-foreground',
-    isDisabled && 'pointer-events-none cursor-not-allowed opacity-50',
-  ),
-  placeholder: () => 'text-muted-foreground',
-  singleValue: () => 'text-foreground',
-  valueContainer: () => 'gap-1 py-1.5',
-} satisfies ClassNamesConfig<unknown, boolean, GroupBase<unknown>>;
-
-function withReactSelectDefaults<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
-  Props extends ReactSelectDefaultableProps<Option, IsMulti, Group>,
->(props: Props): Props {
-  const {
-    className,
-    classNamePrefix = 'mihcm-select',
-    classNames,
-    unstyled = true,
-    ...rest
-  } = props;
-  const defaultClassNames = reactSelectClassNames as unknown as ClassNamesConfig<
-    Option,
-    IsMulti,
-    Group
-  >;
-
-  return {
-    ...rest,
-    className: cn('w-full min-w-0', className),
-    classNamePrefix,
-    classNames: {
-      ...defaultClassNames,
-      ...classNames,
-    },
-    unstyled,
-  } as Props;
-}
-
-/* ── React Select powered exports ──────────────────────────────────── */
-
-export function ReactSelect<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(props: ReactSelectProps<Option, IsMulti, Group>) {
-  return (
-    <ReactSelectBase
-      {...withReactSelectDefaults<Option, IsMulti, Group, ReactSelectProps<Option, IsMulti, Group>>(
-        props,
-      )}
-    />
-  );
-}
-
-export function ReactAsyncSelect<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(props: ReactAsyncSelectProps<Option, IsMulti, Group>) {
-  return (
-    <ReactAsyncSelectBase
-      {...withReactSelectDefaults<
-        Option,
-        IsMulti,
-        Group,
-        ReactAsyncSelectProps<Option, IsMulti, Group>
-      >(props)}
-    />
-  );
-}
-
-export function ReactCreatableSelect<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(props: ReactCreatableSelectProps<Option, IsMulti, Group>) {
-  return (
-    <ReactCreatableSelectBase
-      {...withReactSelectDefaults<
-        Option,
-        IsMulti,
-        Group,
-        ReactCreatableSelectProps<Option, IsMulti, Group>
-      >(props)}
-    />
-  );
-}
-
-export function ReactAsyncCreatableSelect<
-  Option = DefaultReactSelectOption,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(props: ReactAsyncCreatableSelectProps<Option, IsMulti, Group>) {
-  return (
-    <ReactAsyncCreatableSelectBase
-      {...withReactSelectDefaults<
-        Option,
-        IsMulti,
-        Group,
-        ReactAsyncCreatableSelectProps<Option, IsMulti, Group>
-      >(props)}
-    />
-  );
-}
-
-/* ── Context ───────────────────────────────────────────────────────── */
-
-interface SelectContextValue {
-  value: string | undefined;
-  onValueChange: (value: string) => void;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  disabled: boolean;
-  triggerRef: React.RefObject<HTMLButtonElement | null>;
-  setTriggerRef: (el: HTMLButtonElement | null) => void;
-  /** Label text of the currently selected item (set by SelectItem). */
-  selectedLabel: { value: string; label: string } | undefined;
-  setSelectedLabel: (selected: { value: string; label: string } | undefined) => void;
-  getLabelForValue: (value: string | undefined) => string | undefined;
-}
-
-const SelectContext = createContext<SelectContextValue | null>(null);
-
-function useSelectContext() {
-  const ctx = useContext(SelectContext);
-  if (!ctx) throw new Error('Select sub-components must be used within <Select>.');
-  return ctx;
-}
-
-function getTextLabel(children: ReactNode): string | undefined {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return String(children);
-  }
-
-  return undefined;
-}
-
-function findSelectItemLabel(children: ReactNode, value: string | undefined): string | undefined {
-  if (!value) return undefined;
-
-  let match: string | undefined;
-
-  Children.forEach(children, (child) => {
-    if (match || !isValidElement(child)) return;
-
-    const props = child.props as {
-      value?: unknown;
-      children?: ReactNode;
-    };
-
-    if (props.value === value) {
-      match = getTextLabel(props.children);
-      return;
-    }
-
-    match = findSelectItemLabel(props.children, value);
-  });
-
-  return match;
-}
-
-/* ── Root ───────────────────────────────────────────────────────────── */
-
-export interface SelectProps {
-  value?: string | undefined;
-  onValueChange?: ((value: string) => void) | undefined;
-  open?: boolean | undefined;
-  onOpenChange?: ((open: boolean) => void) | undefined;
-  disabled?: boolean | undefined;
-  children: ReactNode;
-}
-
-export function Select({
-  value,
-  onValueChange,
-  open: controlledOpen,
-  onOpenChange,
-  disabled,
-  children,
-}: SelectProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (disabled && next) return;
-      onOpenChange?.(next);
-      setInternalOpen(next);
-    },
-    [disabled, onOpenChange],
-  );
-
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const setTriggerRef = useCallback((el: HTMLButtonElement | null) => {
-    triggerRef.current = el;
-  }, []);
-  const [selectedLabel, setSelectedLabel] = useState<{ value: string; label: string } | undefined>();
-
-  const handleValueChange = useCallback(
-    (v: string) => {
-      onValueChange?.(v);
-      setOpen(false);
-    },
-    [onValueChange, setOpen],
-  );
-
-  const getLabelForValue = useCallback(
-    (nextValue: string | undefined) => findSelectItemLabel(children, nextValue),
-    [children],
-  );
-
-  return (
-    <SelectContext.Provider
-      value={{
-        value,
-        onValueChange: handleValueChange,
-        open,
-        setOpen,
-        disabled: !!disabled,
-        triggerRef,
-        setTriggerRef,
-        selectedLabel,
-        setSelectedLabel,
-        getLabelForValue,
-      }}
-    >
-      <div className="relative inline-block">{children}</div>
-    </SelectContext.Provider>
-  );
-}
-
-/* ── Trigger ───────────────────────────────────────────────────────── */
-
-export const selectTriggerVariants = cva(
-  'inline-flex w-full items-center justify-between gap-2 rounded-lg border bg-card text-foreground shadow-mi-input ' +
-    'transition-colors duration-150 ' +
-    'focus-visible:outline-none focus-visible:border-primary ' +
-    'disabled:pointer-events-none disabled:opacity-50 ' +
-    'select-none whitespace-nowrap',
-  {
-    variants: {
-      variant: {
-        default: 'border-border',
-        destructive:
-          'border-destructive text-destructive focus-visible:border-destructive',
-      },
-      size: {
-        sm: 'h-9 px-3 text-body-sm',
-        md: 'h-10 px-3.5 text-body-sm',
-        lg: 'h-12 px-4 text-body-sm',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  },
-);
-
-export interface SelectTriggerProps
-  extends Omit<HTMLAttributes<HTMLButtonElement>, 'children'>,
-    VariantProps<typeof selectTriggerVariants> {
-  placeholder?: string | undefined;
-  disabled?: boolean | undefined;
-}
-
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  function SelectTrigger({ className, variant, size, placeholder, disabled, id, ...props }, ref) {
-    const ctx = useSelectContext();
-    const isDisabled = disabled ?? ctx.disabled;
-    const listboxId = id ? `${id}-listbox` : undefined;
-
-    const handleClick = useCallback(() => {
-      ctx.setOpen(!ctx.open);
-    }, [ctx]);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          if (!ctx.open) ctx.setOpen(true);
-        }
-      },
-      [ctx],
-    );
-
-    // Merge refs
-    const setRef = useCallback(
-      (el: HTMLButtonElement | null) => {
-        ctx.setTriggerRef(el);
-        if (typeof ref === 'function') ref(el);
-        else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el;
-      },
-      [ctx, ref],
-    );
-
-    const selectedLabel = ctx.selectedLabel;
-    const hasValue = ctx.value !== undefined && ctx.value !== '';
-    const displayText =
-      hasValue && selectedLabel && selectedLabel.value === ctx.value
-        ? selectedLabel.label
-        : hasValue
-          ? ctx.getLabelForValue(ctx.value) ?? ctx.value
-          : undefined;
-
-    return (
-      <button
-        ref={setRef}
-        type="button"
-        id={id}
-        role="combobox"
-        aria-expanded={ctx.open}
-        aria-haspopup="listbox"
-        aria-controls={ctx.open ? listboxId : undefined}
-        disabled={isDisabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        className={cn(selectTriggerVariants({ variant, size }), className)}
-        {...props}
-      >
-        <span className={cn('truncate', !displayText && 'text-muted-foreground')}>
-          {displayText ?? placeholder ?? 'Select…'}
-        </span>
-        {/* Chevron-down icon */}
-        <svg
-          aria-hidden
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
-          className={cn(
-            'h-4 w-4 shrink-0 opacity-50 transition-transform duration-200',
-            ctx.open && 'rotate-180',
-          )}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6l4 4 4-4" />
-        </svg>
-      </button>
-    );
-  },
-);
-
-/* ── Content ───────────────────────────────────────────────────────── */
-
-export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {}
-
-export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  function SelectContent({ className, children, ...props }, ref) {
-    const ctx = useSelectContext();
-    const contentRef = useRef<HTMLDivElement | null>(null);
-    const focusedIndexRef = useRef(-1);
-
-    // Close on click outside
-    useEffect(() => {
-      if (!ctx.open) return;
-      function handleClickOutside(e: MouseEvent) {
-        const target = e.target as Node;
-        if (
-          contentRef.current &&
-          !contentRef.current.contains(target) &&
-          ctx.triggerRef.current &&
-          !ctx.triggerRef.current.contains(target)
-        ) {
-          ctx.setOpen(false);
-        }
-      }
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [ctx]);
-
-    // Keyboard navigation within the list
-    useEffect(() => {
-      if (!ctx.open) return;
-      function handleKeyDown(e: KeyboardEvent) {
-        const options = contentRef.current?.querySelectorAll<HTMLElement>('[role="option"]');
-        if (!options?.length) return;
-
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          ctx.setOpen(false);
-          ctx.triggerRef.current?.focus();
-          return;
-        }
-
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          focusedIndexRef.current = Math.min(focusedIndexRef.current + 1, options.length - 1);
-          options[focusedIndexRef.current]?.focus();
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          focusedIndexRef.current = Math.max(focusedIndexRef.current - 1, 0);
-          options[focusedIndexRef.current]?.focus();
-        }
-      }
-      document.addEventListener('keydown', handleKeyDown);
-      return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [ctx]);
-
-    // Focus first option (or selected) on open
-    useEffect(() => {
-      if (!ctx.open || !contentRef.current) return;
-      focusedIndexRef.current = -1;
-      const selected = contentRef.current.querySelector<HTMLElement>('[aria-selected="true"]');
-      if (selected) {
-        selected.focus();
-      } else {
-        const first = contentRef.current.querySelector<HTMLElement>('[role="option"]');
-        first?.focus();
-      }
-    }, [ctx.open]);
-
-    // Merge refs
-    const setRef = useCallback(
-      (el: HTMLDivElement | null) => {
-        contentRef.current = el;
-        if (typeof ref === 'function') ref(el);
-        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
-      },
-      [ref],
-    );
-
-    if (!ctx.open) return null;
-
-    return (
-      <div
-        ref={setRef}
-        id={ctx.triggerRef.current?.id ? `${ctx.triggerRef.current.id}-listbox` : undefined}
-        role="listbox"
-        aria-labelledby={ctx.triggerRef.current?.id || undefined}
-        className={cn(
-          'absolute left-0 top-full z-50 mt-1 w-full min-w-[8rem] overflow-hidden rounded-lg',
-          'border border-border bg-card text-card-foreground shadow-mi-input',
-          'animate-dropdown-in',
-          className,
-        )}
-        {...props}
-      >
-        <div className="max-h-60 overflow-y-auto p-1">{children}</div>
-      </div>
-    );
-  },
-);
-
-/* ── Item ──────────────────────────────────────────────────────────── */
-
-export interface SelectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
-  value: string;
-  disabled?: boolean;
-  children: ReactNode;
-}
-
-export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
-  function SelectItem({ className, value, disabled, children, ...props }, ref) {
-    const ctx = useSelectContext();
-    const { onValueChange, selectedLabel, setSelectedLabel, triggerRef } = ctx;
-    const isSelected = ctx.value === value;
-
-    // Register label of selected item
-    useEffect(() => {
-      if (
-        isSelected &&
-        typeof children === 'string' &&
-        (selectedLabel?.value !== value || selectedLabel.label !== children)
-      ) {
-        setSelectedLabel({ value, label: children });
-      }
-    }, [isSelected, children, selectedLabel?.label, selectedLabel?.value, setSelectedLabel, value]);
-
-    const handleSelect = useCallback(() => {
-      if (disabled) return;
-      if (typeof children === 'string') {
-        setSelectedLabel({ value, label: children });
-      }
-      onValueChange(value);
-      triggerRef.current?.focus();
-    }, [children, disabled, onValueChange, setSelectedLabel, triggerRef, value]);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          handleSelect();
-        }
-      },
-      [handleSelect],
-    );
-
-    return (
-      <div
-        ref={ref}
-        role="option"
-        aria-selected={isSelected}
-        aria-disabled={disabled || undefined}
-        tabIndex={disabled ? undefined : -1}
-        onClick={handleSelect}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          'relative flex cursor-pointer items-center rounded-md px-2 py-1.5 text-body-sm outline-none',
-          'transition-colors duration-150',
-          'hover:bg-muted focus:bg-muted',
-          isSelected && 'font-medium',
-          disabled && 'pointer-events-none opacity-50',
-          className,
-        )}
-        {...props}
-      >
-        {/* Check icon */}
-        <span className="mr-2 inline-flex h-4 w-4 shrink-0 items-center justify-center">
-          {isSelected && (
-            <svg
-              aria-hidden
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="h-4 w-4"
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l3 3 7-7" />
-            </svg>
-          )}
-        </span>
-        <span className="truncate">{children}</span>
-      </div>
-    );
-  },
-);
-
-/* ── Group ─────────────────────────────────────────────────────────── */
-
-export interface SelectGroupProps extends HTMLAttributes<HTMLDivElement> {}
-
-export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
-  function SelectGroup({ className, ...props }, ref) {
-    return <div ref={ref} role="group" className={cn('py-1', className)} {...props} />;
-  },
-);
-
-/* ── Label ─────────────────────────────────────────────────────────── */
-
-export interface SelectLabelProps extends HTMLAttributes<HTMLDivElement> {}
-
-export const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
-  function SelectLabel({ className, ...props }, ref) {
-    return (
-      <div
-        ref={ref}
-        className={cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', className)}
-        {...props}
-      />
-    );
-  },
-);
-
-/* ── Separator ─────────────────────────────────────────────────────── */
-
-export interface SelectSeparatorProps extends HTMLAttributes<HTMLHRElement> {}
 
-export const SelectSeparator = forwardRef<HTMLHRElement, SelectSeparatorProps>(
-  function SelectSeparator({ className, ...props }, ref) {
-    return (
-      <hr
-        ref={ref}
-        className={cn('-mx-1 my-1 border-t border-border', className)}
-        {...props}
-      />
-    );
-  },
-);
+export {
+  getReactSelectAnimatedComponents,
+  reactSelectAnimatedComponents,
+  ReactAsyncCreatableSelect,
+  ReactAsyncSelect,
+  ReactCreatableSelect,
+  ReactSelect,
+  type DefaultReactSelectOption,
+  type ReactAsyncCreatableSelectProps,
+  type ReactAsyncSelectProps,
+  type ReactCreatableSelectProps,
+  type ReactSelectProps,
+} from './Select/react-select.js';
+
+export { Select, type SelectProps } from './Select/root.js';
+export { SelectTrigger, selectTriggerVariants, type SelectTriggerProps } from './Select/trigger.js';
+export { SelectContent, type SelectContentProps } from './Select/content.js';
+export { SelectItem, type SelectItemProps } from './Select/item.js';
+export {
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+  type SelectGroupProps,
+  type SelectLabelProps,
+  type SelectSeparatorProps,
+} from './Select/parts.js';