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

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

"use client";import*as e from"react";import m from"classnames";import*as a 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/extract-props.js";import{marginPropDefs as c}from"../props/margin.props.js";const p=e.forwardRef((o,t)=>{const{className:r,children:n,radius:i,value:d,defaultValue:g,onValueChange:f,...P}=I(o,v,c),[C,u]=S({prop:d,onChange:f,defaultProp:g});return e.createElement(a.Root,{"data-radius":i,ref:t,className:m("rt-SegmentedControlRoot",r),onValueChange:s=>{s&&u(s)},...P,type:"single",value:C,asChild:!1,disabled:!1},n,e.createElement("div",{className:"rt-SegmentedControlIndicator"}))});p.displayName="SegmentedControl.Root";const l=e.forwardRef(({children:o,className:t,...r},n)=>e.createElement(a.Item,{ref:n,className:m("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))));l.displayName="SegmentedControl.Item";export{l as Item,p as Root};
//# sourceMappingURL=segmented-control.js.map