@radix-ui/themes/dist/esm/components/select.js

[](https://radix-ui.com/themes)

"use client";import*as e from"react";import i from"classnames";import{Select as l,ScrollArea as a}from"radix-ui";import{extractProps as d}from"../helpers/extract-props.js";import{marginPropDefs as N}from"../props/margin.props.js";import{ChevronDownIcon as x,ThickCheckIcon as R}from"./icons.js";import{selectRootPropDefs as P,selectTriggerPropDefs as b,selectContentPropDefs as w}from"./select.props.js";import{useThemeContext as E,Theme as G}from"./theme.js";const f=e.createContext({}),C=r=>{const{children:o,size:t=P.size.default,...s}=r;return e.createElement(l.Root,{...s},e.createElement(f.Provider,{value:e.useMemo(()=>({size:t}),[t])},o))};C.displayName="Select.Root";const u=e.forwardRef((r,o)=>{const t=e.useContext(f),{children:s,className:p,color:n,radius:m,placeholder:c,...S}=d({size:t?.size,...r},{size:P.size},b,N);return e.createElement(l.Trigger,{asChild:!0},e.createElement("button",{"data-accent-color":n,"data-radius":m,...S,ref:o,className:i("rt-reset","rt-SelectTrigger",p)},e.createElement("span",{className:"rt-SelectTriggerInner"},e.createElement(l.Value,{placeholder:c},s)),e.createElement(l.Icon,{asChild:!0},e.createElement(x,{className:"rt-SelectIcon"}))))});u.displayName="Select.Trigger";const g=e.forwardRef((r,o)=>{const t=e.useContext(f),{className:s,children:p,color:n,container:m,...c}=d({size:t?.size,...r},{size:P.size},w),S=E(),T=n||S.accentColor;return e.createElement(l.Portal,{container:m},e.createElement(G,{asChild:!0},e.createElement(l.Content,{"data-accent-color":T,sideOffset:4,...c,asChild:!1,ref:o,className:i({"rt-PopperContent":c.position==="popper"},"rt-SelectContent",s)},e.createElement(a.Root,{type:"auto",className:"rt-ScrollAreaRoot"},e.createElement(l.Viewport,{asChild:!0,className:"rt-SelectViewport"},e.createElement(a.Viewport,{className:"rt-ScrollAreaViewport",style:{overflowY:void 0}},p)),e.createElement(a.Scrollbar,{className:"rt-ScrollAreaScrollbar rt-r-size-1",orientation:"vertical"},e.createElement(a.Thumb,{className:"rt-ScrollAreaThumb"}))))))});g.displayName="Select.Content";const v=e.forwardRef((r,o)=>{const{className:t,children:s,...p}=r;return e.createElement(l.Item,{...p,asChild:!1,ref:o,className:i("rt-SelectItem",t)},e.createElement(l.ItemIndicator,{className:"rt-SelectItemIndicator"},e.createElement(R,{className:"rt-SelectItemIndicatorIcon"})),e.createElement(l.ItemText,null,s))});v.displayName="Select.Item";const y=e.forwardRef(({className:r,...o},t)=>e.createElement(l.Group,{...o,asChild:!1,ref:t,className:i("rt-SelectGroup",r)}));y.displayName="Select.Group";const h=e.forwardRef(({className:r,...o},t)=>e.createElement(l.Label,{...o,asChild:!1,ref:t,className:i("rt-SelectLabel",r)}));h.displayName="Select.Label";const I=e.forwardRef(({className:r,...o},t)=>e.createElement(l.Separator,{...o,asChild:!1,ref:t,className:i("rt-SelectSeparator",r)}));I.displayName="Select.Separator";export{g as Content,y as Group,v as Item,h as Label,C as Root,I as Separator,u as Trigger};
//# sourceMappingURL=select.js.map