@marcoschwartz/lite-ui 0.27.3 → 0.27.4

package/dist/index.js

@@ -3757,17 +3757,64 @@ var SegmentedControl = ({
 }) => {
   const groupId = (0, import_react20.useId)();
   const groupName = name || `segmented-control-${groupId}`;
+  const containerRef = (0, import_react20.useRef)(null);
+  const indicatorRef = (0, import_react20.useRef)(null);
   const options = (0, import_react20.useMemo)(() => normalizeData(data), [data]);
   const [internalValue, setInternalValue] = (0, import_react20.useState)(
     defaultValue || options[0]?.value || ""
   );
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
-  const [hasInteracted, setHasInteracted] = (0, import_react20.useState)(false);
+  const [initialized, setInitialized] = (0, import_react20.useState)(false);
   const activeIndex = options.findIndex((opt) => opt.value === currentValue);
+  const updateIndicator = (0, import_react20.useCallback)((animate = true) => {
+    if (!containerRef.current || !indicatorRef.current) return;
+    const container = containerRef.current;
+    const indicator = indicatorRef.current;
+    if (activeIndex === -1) {
+      indicator.style.display = "none";
+      return;
+    }
+    const buttons = container.querySelectorAll("[data-segment-button]");
+    const activeButton = buttons[activeIndex];
+    if (!activeButton) return;
+    const containerRect = container.getBoundingClientRect();
+    const buttonRect = activeButton.getBoundingClientRect();
+    if (!animate) {
+      indicator.style.transitionDuration = "0ms";
+    } else {
+      indicator.style.transitionDuration = `${transitionDuration}ms`;
+    }
+    indicator.style.display = "block";
+    if (orientation === "horizontal") {
+      indicator.style.width = `${buttonRect.width}px`;
+      indicator.style.height = `calc(100% - 8px)`;
+      indicator.style.transform = `translateX(${buttonRect.left - containerRect.left - 4}px)`;
+    } else {
+      indicator.style.width = `calc(100% - 8px)`;
+      indicator.style.height = `${buttonRect.height}px`;
+      indicator.style.transform = `translateY(${buttonRect.top - containerRect.top - 4}px)`;
+    }
+  }, [activeIndex, orientation, transitionDuration]);
+  (0, import_react20.useEffect)(() => {
+    const timer = setTimeout(() => {
+      updateIndicator(false);
+      setInitialized(true);
+    }, 20);
+    return () => clearTimeout(timer);
+  }, []);
+  (0, import_react20.useEffect)(() => {
+    if (initialized) {
+      updateIndicator(true);
+    }
+  }, [currentValue, initialized, updateIndicator]);
+  (0, import_react20.useEffect)(() => {
+    const handleResize = () => updateIndicator(false);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator]);
   const handleChange = (0, import_react20.useCallback)((newValue) => {
     if (disabled) return;
-    setHasInteracted(true);
     if (!isControlled) {
       setInternalValue(newValue);
     }
@@ -3803,20 +3850,6 @@ var SegmentedControl = ({
   }, [options, currentValue, orientation, handleChange]);
   const sizeStyles2 = sizeConfig[size];
   const radiusStyle = radiusConfig[radius];
-  const totalOptions = options.length;
-  const indicatorStyle = activeIndex >= 0 ? orientation === "horizontal" ? {
-    width: `calc(${100 / totalOptions}% - ${totalOptions > 1 ? 0 : 0}px)`,
-    height: "calc(100% - 8px)",
-    left: `calc(${activeIndex / totalOptions * 100}% + 4px)`,
-    top: "4px",
-    transition: hasInteracted ? `left ${transitionDuration}ms ease, width ${transitionDuration}ms ease` : "none"
-  } : {
-    width: "calc(100% - 8px)",
-    height: `calc(${100 / totalOptions}% - ${totalOptions > 1 ? 0 : 0}px)`,
-    left: "4px",
-    top: `calc(${activeIndex / totalOptions * 100}% + 4px)`,
-    transition: hasInteracted ? `top ${transitionDuration}ms ease, height ${transitionDuration}ms ease` : "none"
-  } : { display: "none" };
   const containerClasses = [
     "relative inline-flex p-1",
     "bg-[hsl(var(--muted))]",
@@ -3829,6 +3862,7 @@ var SegmentedControl = ({
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
+      ref: containerRef,
       role: "radiogroup",
       "aria-label": ariaLabel || "Segmented control",
       className: containerClasses,
@@ -3836,17 +3870,23 @@ var SegmentedControl = ({
         /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           "div",
           {
+            ref: indicatorRef,
             className: [
-              "absolute z-0",
+              "absolute z-0 top-1 left-1",
               radiusStyle,
               colorConfig[color],
-              "shadow-sm"
+              "shadow-sm",
+              "transition-transform",
+              initialized ? "opacity-100" : "opacity-0"
             ].join(" "),
-            style: indicatorStyle,
+            style: {
+              transitionProperty: "transform, width, height, opacity",
+              transitionTimingFunction: "ease"
+            },
             "aria-hidden": "true"
           }
         ),
-        options.map((option, index) => {
+        options.map((option) => {
           const isActive = option.value === currentValue;
           const isDisabled = disabled || option.disabled;
           const buttonClasses = [