"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Select as BaseSelect } from "@base-ui/react/select"; import { HugeiconsIcon } from "@hugeicons/react"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon, UnfoldMoreIcon, } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; import { POPUP_ITEM } from "@/registry/default/lib/popup-search"; import { elevatedSurface, type SurfaceLevel, } from "@/registry/default/lib/elevated"; import { ScrollArea, type ScrollAreaProps, } from "@/registry/default/scroll-area/scroll-area"; const Select = BaseSelect.Root; function SelectGroup({ ...props }: BaseSelect.Group.Props) { return ; } function SelectBackdrop({ ...props }: BaseSelect.Backdrop.Props) { return ; } function SelectPortal({ ...props }: BaseSelect.Portal.Props) { return ; } function SelectValue({ className, ...props }: BaseSelect.Value.Props) { return ( ); } const selectTriggerVariants = cva( [ // Layout — w-fit by default since selects size to their value, not full-width "group/select-trigger relative inline-flex w-fit items-center justify-between gap-2.5 rounded-lg border border-transparent", // Focus ring "focus-visible:outline-ring ease-out-expo outline-0 -outline-offset-1 outline-transparent transition-[outline-width,outline-color] duration-100 outline-solid focus-visible:outline-2 focus-visible:-outline-offset-1", // Invalid state "aria-invalid:outline-destructive aria-invalid:outline-2 aria-invalid:-outline-offset-1 aria-invalid:outline-solid", // Text + placeholder + icon "text-base font-normal whitespace-nowrap sm:not-pointer-coarse:text-sm", "data-placeholder:text-muted-foreground", "[&_svg:not([class*='text-'])]:text-muted-foreground", "*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", // Disabled "data-disabled:pointer-events-none data-disabled:opacity-60", // Interaction "cursor-pointer select-none", ], { variants: { variant: { // Filled: a translucent tint on any surface; hover deepens it. default: "bg-input hover:bg-input-hover data-popup-open:bg-input-hover", // Outline: the outline Button's fill and edge. outline: "bg-(--outline) border-(--outline-border) bg-clip-padding hover:bg-(--outline-hover) data-popup-open:bg-(--outline-hover)", // Chromeless — mirrors the button's ghost variant for use in toolbars // and inline next to ghost buttons. Chevron follows the text on hover. ghost: "border-transparent bg-transparent text-muted-foreground hover:bg-surface-hover hover:text-foreground data-popup-open:bg-surface-hover data-popup-open:text-foreground group-hover/select-trigger:[&_svg:not([class*='text-'])]:text-foreground", }, size: { default: "h-10 px-3.5 pr-2.5 py-2 sm:not-pointer-coarse:h-9", // Compact trigger. Note: tighter than the Button sm size (px-3), so // ghost triggers in toolbars pair best with icon-size ghost buttons, // which carry no horizontal padding. sm: "h-9 px-3 pr-2 py-1.5 sm:not-pointer-coarse:h-8", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); type SelectTriggerProps = BaseSelect.Trigger.Props & VariantProps & { hideChevronRotation?: boolean; }; function SelectTrigger({ className, children, size, variant, hideChevronRotation = false, ...props }: SelectTriggerProps) { return ( {children} ); } interface SelectContentProps extends Omit, Pick< ScrollAreaProps, | "fadeEdges" | "scrollbarGutter" | "persistScrollbar" | "hideScrollbar" | "nativeScroll" > { className?: string; size?: "default" | "sm"; /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog or other elevated container. Defaults to 3. */ level?: SurfaceLevel; /** Shadow weight (1-8). Pinned to 3 by default so the dropdown reads the same regardless of nesting depth. */ shadowLevel?: SurfaceLevel; } function SelectContent({ className, sideOffset = 4, alignItemWithTrigger = false, nativeScroll = false, fadeEdges = true, scrollbarGutter = false, persistScrollbar, hideScrollbar, size, level = 3, shadowLevel = 3, children, ...props }: SelectContentProps) { return ( {alignItemWithTrigger && ( )} {children} {alignItemWithTrigger && ( )} ); } function SelectItem({ className, children, ...props }: BaseSelect.Item.Props) { return ( {children} ); } function SelectGroupLabel({ className, ...props }: BaseSelect.GroupLabel.Props) { return ( ); } function SelectSeparator({ className, ...props }: BaseSelect.Separator.Props) { return ( ); } function SelectLabel({ className, ...props }: BaseSelect.Label.Props) { return ( ); } function SelectList({ className, ...props }: BaseSelect.List.Props) { return ( ); } export { Select, SelectTrigger, selectTriggerVariants, SelectContent, SelectItem, SelectValue, SelectGroup, SelectGroupLabel, SelectSeparator, SelectBackdrop, SelectLabel, SelectList, };