sate-lib/lib/components/segmented-control/segmented-control.js

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Item as l,Root as r}from"@radix-ui/react-radio-group";import{Fragment as i,useEffect as n,useRef as o,useState as a}from"react";import{Icon as d}from"../icon/icon.js";import u from"./segmented-control.styles.module.js";function c({options:c,value:s,defaultValue:m,onChange:f,className:h=""}){let p=o(null),g=o([]),[x,$]=a(c.findIndex(e=>e.value===s||e.value===m)),v=e=>{let t=c.findIndex(t=>t.value===e);$(t);let l=g.current[t],r=p.current;if(l&&r){let e=l.getBoundingClientRect(),t=r.getBoundingClientRect();r.style.cssText=`
        --slider-x: ${e.left-t.left+r.scrollLeft}px;
        --slider-width: ${e.width}px;
        --slider-height: ${e.height}px;
      `}};return n(()=>{let e=setTimeout(()=>{v(s||m)},20);return()=>clearTimeout(e)},[s,m,c]),e(r,{className:`${u.root} ${h}`.trim(),defaultValue:m,onValueChange:e=>{v(e),f?.(e)},ref:p,value:s,children:c.map((r,n)=>t(i,{children:[t(l,{className:`bodyDefault ${u.item} ${r.icon?u.withIcon:""}`,disabled:r.disabled,ref:e=>{g.current[n]=e},value:r.value,children:[r.icon&&e(d,{name:r.icon,size:18}),r.label]}),n<c.length-1&&e("div",{className:`${u.separator} ${n===x-1||n===x?u.hide:""}`})]},r.value))})}export{c as SegmentedControl};