@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{ToggleGroup as m}from"radix-ui";import{useControllableState as S}from"radix-ui/internal";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:d,value:i,defaultValue:g,onValueChange:f,...P}=I(o,v,c),[u,C]=S({prop:i,onChange:f,defaultProp:g});return e.createElement(m.Root,{"data-disabled":o.disabled||void 0,"data-radius":d,ref:t,className:a("rt-SegmentedControlRoot",r),onValueChange:s=>{s&&C(s)},...P,type:"single",value:u,asChild:!1,disabled:!!o.disabled},n,e.createElement("div",{className:"rt-SegmentedControlIndicator"}))});p.displayName="SegmentedControl.Root";const l=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","aria-hidden":!0},o))));l.displayName="SegmentedControl.Item";export{l as Item,p as Root};
//# sourceMappingURL=segmented-control.js.map