"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { Select as SelectPrimitive } from "@base-ui/react/select"; import { useRender } from "@base-ui/react/use-render"; import { cva, type VariantProps } from "class-variance-authority"; import { ChevronDownIcon, ChevronsUpDownIcon, ChevronUpIcon, } from "lucide-react"; import type * as React from "react"; import { cn } from "@/registry/default/lib/utils"; export const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root; export const selectTriggerVariants = cva( "relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", { defaultVariants: { size: "default", }, variants: { size: { default: "", lg: "min-h-10 sm:min-h-9", sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7", }, }, }, ); export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4"; export interface SelectButtonProps extends useRender.ComponentProps<"button"> { size?: VariantProps["size"]; } export function SelectButton({ className, size, render, children, ...props }: SelectButtonProps): React.ReactElement { const typeValue: React.ButtonHTMLAttributes["type"] = render ? undefined : "button"; const defaultProps = { children: ( <> {children} ), className: cn(selectTriggerVariants({ size }), "min-w-0", className), "data-slot": "select-button", type: typeValue, }; return useRender({ defaultTagName: "button", props: mergeProps<"button">(defaultProps, props), render, }); } export function SelectTrigger({ className, size = "default", children, ...props }: SelectPrimitive.Trigger.Props & VariantProps): React.ReactElement { return ( {children} ); } export function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.ReactElement { return ( ); } export function SelectPopup({ className, children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, alignItemWithTrigger = true, anchor, portalProps, ...props }: SelectPrimitive.Popup.Props & { portalProps?: SelectPrimitive.Portal.Props; side?: SelectPrimitive.Positioner.Props["side"]; sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"]; align?: SelectPrimitive.Positioner.Props["align"]; alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"]; alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"]; anchor?: SelectPrimitive.Positioner.Props["anchor"]; }): React.ReactElement { return (

{children}

); } export function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.ReactElement { return ( {children} ); } export function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.ReactElement { return ( ); } export function SelectGroup( props: SelectPrimitive.Group.Props, ): React.ReactElement { return ; } export function SelectLabel({ className, ...props }: SelectPrimitive.Label.Props): React.ReactElement { return ( ); } export function SelectGroupLabel( props: SelectPrimitive.GroupLabel.Props, ): React.ReactElement { return ( ); } export { SelectPrimitive, SelectPopup as SelectContent };

Select

Instalação

Dependências