@radix-ui/themes/dist/esm/components/segmented-control.js

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

"use client";import*as e from"react";import a from"classnames";import*as m from"@radix-ui/react-toggle-group";import{useControllableState as S}from"@radix-ui/react-use-controllable-state";import{segmentedControlRootPropDefs as v}from"./segmented-control.props.js";import{extractProps as I}from"../helpers/index.js";import{marginPropDefs as c}from"../props/index.js";const l=e.forwardRef((o,t)=>{const{className:r,children:n,radius:i,value:d,defaultValue:g,onValueChange:P,...f}=I(o,v,c),[C,u]=S({prop:d,onChange:P,defaultProp:g});return e.createElement(m.Root,{"data-radius":i,ref:t,className:a("rt-SegmentedControlRoot",r),onValueChange:s=>{s&&u(s)},...f,type:"single",value:C,asChild:!1,disabled:!1},n,e.createElement("div",{className:"rt-SegmentedControlIndicator"}))});l.displayName="SegmentedControl.Root";const p=e.forwardRef(({children:o,className:t,...r},n)=>e.createElement(m.Item,{ref:n,className:a("rt-reset","rt-SegmentedControlItem",t),...r,disabled:!1,asChild:!1},e.createElement("span",{className:"rt-SegmentedControlItemSeparator"}),e.createElement("span",{className:"rt-SegmentedControlItemLabel"},e.createElement("span",{className:"rt-SegmentedControlItemLabelActive"},o),e.createElement("span",{className:"rt-SegmentedControlItemLabelInactive"},o))));p.displayName="SegmentedControl.Item";export{p as Item,l as Root};
//# sourceMappingURL=segmented-control.js.map