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