"use client" import * as React from "react" import { ChevronDownIcon } from "lucide-react" import { createPortal } from "react-dom" import { cn } from "@/lib/utils" /* ============================================================================= * Select — compound dropdown for Motoko UI * * Usage (compound): * * * Usage (options kit): * * ============================================================================= */ // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- type SelectSize = "sm" | "default" export interface SelectProps { children: React.ReactNode /** Controlled selected value. */ value?: string /** Initial value for uncontrolled mode. */ defaultValue?: string /** Fires when the user picks an option. */ onValueChange?: (value: string) => void /** Fallback text when nothing is selected. */ placeholder?: React.ReactNode /** Extra classes on the root wrapper. */ className?: string /** Disables the whole control (trigger + items). */ disabled?: boolean } export interface SelectTriggerProps extends React.ButtonHTMLAttributes { size?: SelectSize } export interface SelectValueProps extends React.HTMLAttributes { /** Overrides the placeholder from `Select`. */ placeholder?: React.ReactNode } export type SelectContentProps = React.HTMLAttributes export interface SelectItemProps extends Omit< React.HTMLAttributes, "onSelect" > { value: string disabled?: boolean } export interface SelectKitOption { value: string label: React.ReactNode } export interface SelectKitProps { options: SelectKitOption[] value?: string defaultValue?: string onValueChange?: (value: string) => void placeholder?: React.ReactNode disabled?: boolean /** Classes on the root wrapper. */ className?: string /** Classes on the trigger button. */ classNameTrigger?: string size?: SelectSize } interface SelectContextValue { open: boolean setOpen: (open: boolean) => void value: string selectValue: (next: string, label: React.ReactNode) => void placeholder: React.ReactNode disabled: boolean /** Label for the current value, pushed by SelectItem. */ selectedLabel: React.ReactNode | null /** Sync trigger label when an item mounts already selected (e.g. defaultValue). */ syncLabel: (value: string, label: React.ReactNode) => void triggerRef: React.RefObject contentRef: React.RefObject contentId: string } // --------------------------------------------------------------------------- // Context // --------------------------------------------------------------------------- const SelectContext = React.createContext(null) function useSelectContext(component: string): SelectContextValue { const ctx = React.useContext(SelectContext) if (!ctx) { throw new Error(`${component} must be used within {options.map((option) => ( {option.label} ))} ) } export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectKit, }