fixes

src/components/segmented-control/index.tsx

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, useEffect, useRef } from 'react';
 import { ToggleGroup as RToggleGroup } from 'radix-ui';
 import { cx } from '../utils';
 
@@ -18,22 +18,49 @@ export const SegmentedControl = ({
   items,
   className,
   ...props
-}: SegProps) => (
-  <RToggleGroup.Root
-    type="single"
-    className={cx('modern-sk-seg', className)}
-    value={value}
-    onValueChange={(v) => v && onValueChange(v)}
-    {...props}
-  >
-    {items.map((it) => (
-      <RToggleGroup.Item
-        key={it.value}
-        value={it.value}
-        className="modern-sk-seg__item"
-      >
-        {it.label}
-      </RToggleGroup.Item>
-    ))}
-  </RToggleGroup.Root>
-);
+}: SegProps) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLSpanElement>(null);
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const thumb = thumbRef.current;
+    if (!root || !thumb) return;
+    const selected = root.querySelector<HTMLElement>('[data-state="on"]');
+    if (!selected) return;
+
+    if (!initialized.current) {
+      thumb.style.transition = 'none';
+    }
+    thumb.style.transform = `translateX(${selected.offsetLeft}px)`;
+    thumb.style.width = `${selected.offsetWidth}px`;
+    if (!initialized.current) {
+      thumb.getBoundingClientRect();
+      thumb.style.transition = '';
+      initialized.current = true;
+    }
+  }, [value]);
+
+  return (
+    <RToggleGroup.Root
+      ref={rootRef}
+      type="single"
+      className={cx('modern-sk-seg', className)}
+      value={value}
+      onValueChange={(v) => v && onValueChange(v)}
+      {...props}
+    >
+      <span ref={thumbRef} className="modern-sk-seg__thumb" aria-hidden />
+      {items.map((it) => (
+        <RToggleGroup.Item
+          key={it.value}
+          value={it.value}
+          className="modern-sk-seg__item"
+        >
+          {it.label}
+        </RToggleGroup.Item>
+      ))}
+    </RToggleGroup.Root>
+  );
+};