@marcoschwartz/lite-ui 0.27.0 → 0.27.3

package/dist/index.js

@@ -3757,54 +3757,23 @@ var SegmentedControl = ({
 }) => {
   const groupId = (0, import_react20.useId)();
   const groupName = name || `segmented-control-${groupId}`;
-  const containerRef = (0, import_react20.useRef)(null);
-  const [indicatorStyle, setIndicatorStyle] = (0, import_react20.useState)({});
-  const options = normalizeData(data);
+  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 activeIndex = options.findIndex((opt) => opt.value === currentValue);
   const handleChange = (0, import_react20.useCallback)((newValue) => {
     if (disabled) return;
+    setHasInteracted(true);
     if (!isControlled) {
       setInternalValue(newValue);
     }
     onChange?.(newValue);
   }, [disabled, isControlled, onChange]);
-  const updateIndicator = (0, import_react20.useCallback)(() => {
-    if (!containerRef.current) return;
-    const container = containerRef.current;
-    const activeIndex = options.findIndex((opt) => opt.value === currentValue);
-    if (activeIndex === -1) return;
-    const buttons = container.querySelectorAll("[data-segment-button]");
-    const activeButton = buttons[activeIndex];
-    if (!activeButton) return;
-    const containerRect = container.getBoundingClientRect();
-    const buttonRect = activeButton.getBoundingClientRect();
-    if (orientation === "horizontal") {
-      setIndicatorStyle({
-        width: buttonRect.width,
-        height: "100%",
-        transform: `translateX(${buttonRect.left - containerRect.left}px)`,
-        transition: `transform ${transitionDuration}ms ease, width ${transitionDuration}ms ease`
-      });
-    } else {
-      setIndicatorStyle({
-        width: "100%",
-        height: buttonRect.height,
-        transform: `translateY(${buttonRect.top - containerRect.top}px)`,
-        transition: `transform ${transitionDuration}ms ease, height ${transitionDuration}ms ease`
-      });
-    }
-  }, [currentValue, options, orientation, transitionDuration]);
-  (0, import_react20.useEffect)(() => {
-    updateIndicator();
-    const handleResize = () => updateIndicator();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [updateIndicator]);
-  const handleKeyDown = (0, import_react20.useCallback)((e, index) => {
+  const handleKeyDown = (0, import_react20.useCallback)((e) => {
     const enabledOptions = options.filter((opt) => !opt.disabled);
     const currentEnabledIndex = enabledOptions.findIndex((opt) => opt.value === currentValue);
     let nextIndex = -1;
@@ -3830,15 +3799,24 @@ var SegmentedControl = ({
       e.preventDefault();
       const nextOption = enabledOptions[nextIndex];
       handleChange(nextOption.value);
-      const buttons = containerRef.current?.querySelectorAll("[data-segment-button]");
-      const nextButton = Array.from(buttons || []).find(
-        (btn) => btn.getAttribute("data-value") === nextOption.value
-      );
-      nextButton?.focus();
     }
   }, [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))]",
@@ -3851,7 +3829,6 @@ var SegmentedControl = ({
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
-      ref: containerRef,
       role: "radiogroup",
       "aria-label": ariaLabel || "Segmented control",
       className: containerClasses,
@@ -3860,7 +3837,7 @@ var SegmentedControl = ({
           "div",
           {
             className: [
-              "absolute top-1 left-1 z-0",
+              "absolute z-0",
               radiusStyle,
               colorConfig[color],
               "shadow-sm"
@@ -3897,7 +3874,7 @@ var SegmentedControl = ({
               tabIndex: isActive ? 0 : -1,
               className: buttonClasses,
               onClick: () => !isDisabled && handleChange(option.value),
-              onKeyDown: (e) => handleKeyDown(e, index),
+              onKeyDown: handleKeyDown,
               children: [
                 option.label,
                 /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(