Select

1"use client";
2 
3import "./select.css";
4import { Select as BaseSelect } from "@base-ui/react/select";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { SelectContext, useSelectContext } from "./select.context";
9import { selectVariants, type SelectVariants } from "./select.variants";
10 
11export type SelectProps = SelectVariants & React.ComponentProps<typeof BaseSelect.Root>;
12 
13export const SelectRoot = ({ children, size, ...props }: SelectProps) => {
14  const slots = selectVariants({ size });
15 
16  return (
17    <SelectContext.Provider value={{ slots }}>
18      <BaseSelect.Root {...props}>{children}</BaseSelect.Root>
19    </SelectContext.Provider>
20  );
21};
22 
23export type SelectLabelProps = React.ComponentProps<typeof BaseSelect.Label>;
24 
25export const SelectLabel = ({ className, ...props }: SelectLabelProps) => {
26  const { slots } = useSelectContext();
27  return <BaseSelect.Label className={cn(slots.label(), className)} {...props} />;
28};
29 
30export type SelectTriggerProps = React.ComponentProps<typeof BaseSelect.Trigger>;
31 
32export const SelectTrigger = ({ className, ...props }: SelectTriggerProps) => {
33  const { slots } = useSelectContext();
34  return <BaseSelect.Trigger className={cn(slots.trigger(), className)} {...props} />;
35};
36 
37export type SelectValueProps = React.ComponentProps<typeof BaseSelect.Value>;
38 
39export const SelectValue = ({ className, ...props }: SelectValueProps) => {
40  const { slots } = useSelectContext();
41  return <BaseSelect.Value className={cn(slots.value(), className)} {...props} />;
42};
43 
44export type SelectIconProps = React.ComponentProps<typeof BaseSelect.Icon>;
45 
46export const SelectIcon = ({ children, className, ...props }: SelectIconProps) => {
47  const { slots } = useSelectContext();
48  return (
49    <BaseSelect.Icon className={cn(slots.icon(), className)} {...props}>
50      {children ?? (
51        <svg className="h-4 w-4 stroke-current" fill="none" strokeWidth="2" viewBox="0 0 24 24">
52          <path d="M7 10l5 5 5-5" />
53        </svg>
54      )}
55    </BaseSelect.Icon>
56  );
57};
58 
59export type SelectPortalProps = React.ComponentProps<typeof BaseSelect.Portal>;
60 
61export const SelectPortal = (props: SelectPortalProps) => {
62  return <BaseSelect.Portal {...props} />;
63};
64 
65export type SelectBackdropProps = React.ComponentProps<typeof BaseSelect.Backdrop>;
66 
67export const SelectBackdrop = ({ className, ...props }: SelectBackdropProps) => {
68  const { slots } = useSelectContext();
69// … truncated