@marcoschwartz/lite-ui 0.27.3 → 0.27.4

package/dist/index.mjs

@@ -3512,7 +3512,7 @@ var Radio = ({
 };
 
 // src/components/SegmentedControl.tsx
-import { useState as useState12, useId, useCallback as useCallback2, useMemo } from "react";
+import { useState as useState12, useRef as useRef6, useEffect as useEffect9, useId, useCallback as useCallback2, useMemo } from "react";
 import { jsx as jsx99, jsxs as jsxs27 } from "react/jsx-runtime";
 function normalizeData(data) {
   return data.map(
@@ -3580,17 +3580,64 @@ var SegmentedControl = ({
 }) => {
   const groupId = useId();
   const groupName = name || `segmented-control-${groupId}`;
+  const containerRef = useRef6(null);
+  const indicatorRef = useRef6(null);
   const options = useMemo(() => normalizeData(data), [data]);
   const [internalValue, setInternalValue] = useState12(
     defaultValue || options[0]?.value || ""
   );
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
-  const [hasInteracted, setHasInteracted] = useState12(false);
+  const [initialized, setInitialized] = useState12(false);
   const activeIndex = options.findIndex((opt) => opt.value === currentValue);
+  const updateIndicator = useCallback2((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]);
+  useEffect9(() => {
+    const timer = setTimeout(() => {
+      updateIndicator(false);
+      setInitialized(true);
+    }, 20);
+    return () => clearTimeout(timer);
+  }, []);
+  useEffect9(() => {
+    if (initialized) {
+      updateIndicator(true);
+    }
+  }, [currentValue, initialized, updateIndicator]);
+  useEffect9(() => {
+    const handleResize = () => updateIndicator(false);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator]);
   const handleChange = useCallback2((newValue) => {
     if (disabled) return;
-    setHasInteracted(true);
     if (!isControlled) {
       setInternalValue(newValue);
     }
@@ -3626,20 +3673,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))]",
@@ -3652,6 +3685,7 @@ var SegmentedControl = ({
   return /* @__PURE__ */ jsxs27(
     "div",
     {
+      ref: containerRef,
       role: "radiogroup",
       "aria-label": ariaLabel || "Segmented control",
       className: containerClasses,
@@ -3659,17 +3693,23 @@ var SegmentedControl = ({
         /* @__PURE__ */ jsx99(
           "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 = [
@@ -3776,7 +3816,7 @@ var ProgressBar = ({
 };
 
 // src/components/Slider.tsx
-import React21, { useRef as useRef6 } from "react";
+import React21, { useRef as useRef7 } from "react";
 import { jsx as jsx101, jsxs as jsxs29 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
@@ -3796,7 +3836,7 @@ var Slider = ({
 }) => {
   const [internalValue, setInternalValue] = React21.useState(defaultValue);
   const [internalRangeValue, setInternalRangeValue] = React21.useState(defaultRangeValue);
-  const trackRef = useRef6(null);
+  const trackRef = useRef7(null);
   const [isDragging, setIsDragging] = React21.useState(null);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const rangeValue = controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
@@ -4064,7 +4104,7 @@ var Textarea = ({
 };
 
 // src/components/RichTextEditor.tsx
-import { useRef as useRef7, useCallback as useCallback3, useState as useState14, useEffect as useEffect9, useLayoutEffect } from "react";
+import { useRef as useRef8, useCallback as useCallback3, useState as useState14, useEffect as useEffect10, useLayoutEffect } from "react";
 import { jsx as jsx104, jsxs as jsxs31 } from "react/jsx-runtime";
 var RichTextEditor = ({
   value = "",
@@ -4079,7 +4119,7 @@ var RichTextEditor = ({
   helperText
 }) => {
   const { themeName } = useTheme();
-  const editorRef = useRef7(null);
+  const editorRef = useRef8(null);
   const [isFocused, setIsFocused] = useState14(false);
   const [activeFormats, setActiveFormats] = useState14(/* @__PURE__ */ new Set());
   const [showLinkModal, setShowLinkModal] = useState14(false);
@@ -4087,7 +4127,7 @@ var RichTextEditor = ({
   const [showImageModal, setShowImageModal] = useState14(false);
   const [imageUrl, setImageUrl] = useState14("");
   const [imageAlt, setImageAlt] = useState14("");
-  const savedSelection = useRef7(null);
+  const savedSelection = useRef8(null);
   useLayoutEffect(() => {
     const styleId = "rich-text-editor-styles";
     if (!document.getElementById(styleId)) {
@@ -4150,9 +4190,9 @@ var RichTextEditor = ({
       document.head.appendChild(style);
     }
   }, []);
-  const isInitialRender = useRef7(true);
-  const isInternalUpdate = useRef7(false);
-  useEffect9(() => {
+  const isInitialRender = useRef8(true);
+  const isInternalUpdate = useRef8(false);
+  useEffect10(() => {
     if (isInitialRender.current && editorRef.current) {
       editorRef.current.innerHTML = value;
       isInitialRender.current = false;
@@ -4163,7 +4203,7 @@ var RichTextEditor = ({
       }
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isInitialRender.current && !isInternalUpdate.current && editorRef.current) {
       const currentHtml = editorRef.current.innerHTML;
       if (currentHtml !== value) {
@@ -4918,7 +4958,7 @@ var Divider = ({
 };
 
 // src/components/FileUpload.tsx
-import { useRef as useRef8, useState as useState16 } from "react";
+import { useRef as useRef9, useState as useState16 } from "react";
 import { jsx as jsx108, jsxs as jsxs35 } from "react/jsx-runtime";
 var FileUpload = ({
   accept,
@@ -4934,7 +4974,7 @@ var FileUpload = ({
 }) => {
   const [files, setFiles] = useState16([]);
   const [isDragging, setIsDragging] = useState16(false);
-  const fileInputRef = useRef8(null);
+  const fileInputRef = useRef9(null);
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
@@ -5061,7 +5101,7 @@ var FileUpload = ({
 };
 
 // src/components/AudioPlayer.tsx
-import { useRef as useRef9, useState as useState17, useEffect as useEffect10 } from "react";
+import { useRef as useRef10, useState as useState17, useEffect as useEffect11 } from "react";
 import { jsx as jsx109, jsxs as jsxs36 } from "react/jsx-runtime";
 var AudioPlayer = ({
   src,
@@ -5085,7 +5125,7 @@ var AudioPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const audioRef = useRef9(null);
+  const audioRef = useRef10(null);
   const [isPlaying, setIsPlaying] = useState17(false);
   const [currentTime, setCurrentTime] = useState17(0);
   const [duration, setDuration] = useState17(0);
@@ -5096,7 +5136,7 @@ var AudioPlayer = ({
   const [showChapterList, setShowChapterList] = useState17(false);
   const [hoveredChapter, setHoveredChapter] = useState17(null);
   const [hoverPosition, setHoverPosition] = useState17({ x: 0, y: 0 });
-  useEffect10(() => {
+  useEffect11(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const handleLoadedMetadata = () => {
@@ -5160,7 +5200,7 @@ var AudioPlayer = ({
       audio.removeEventListener("error", handleError);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  useEffect10(() => {
+  useEffect11(() => {
     const audio = audioRef.current;
     if (!audio) return;
     audio.load();
@@ -5541,7 +5581,7 @@ var AudioPlayer = ({
 };
 
 // src/components/VideoPlayer.tsx
-import { useRef as useRef10, useState as useState18, useEffect as useEffect11 } from "react";
+import { useRef as useRef11, useState as useState18, useEffect as useEffect12 } from "react";
 import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
 var VideoPlayer = ({
   src,
@@ -5566,8 +5606,8 @@ var VideoPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const videoRef = useRef10(null);
-  const containerRef = useRef10(null);
+  const videoRef = useRef11(null);
+  const containerRef = useRef11(null);
   const [isPlaying, setIsPlaying] = useState18(false);
   const [currentTime, setCurrentTime] = useState18(0);
   const [duration, setDuration] = useState18(0);
@@ -5576,11 +5616,11 @@ var VideoPlayer = ({
   const [isLoading, setIsLoading] = useState18(true);
   const [isFullscreen, setIsFullscreen] = useState18(false);
   const [showControlsOverlay, setShowControlsOverlay] = useState18(true);
-  const hideControlsTimeout = useRef10(null);
+  const hideControlsTimeout = useRef11(null);
   const [currentChapter, setCurrentChapter] = useState18(null);
   const [hoveredChapter, setHoveredChapter] = useState18(null);
   const [hoverPosition, setHoverPosition] = useState18({ x: 0, y: 0 });
-  useEffect11(() => {
+  useEffect12(() => {
     const video = videoRef.current;
     if (!video) return;
     const handleLoadedMetadata = () => {
@@ -5649,12 +5689,12 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  useEffect11(() => {
+  useEffect12(() => {
     const video = videoRef.current;
     if (!video) return;
     video.load();
   }, [src]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isPlaying) {
       setShowControlsOverlay(true);
       return;
@@ -6055,7 +6095,7 @@ var VideoPlayer = ({
 };
 
 // src/charts/LineChart.tsx
-import React31, { useMemo as useMemo3, useCallback as useCallback5, useRef as useRef12, useState as useState21 } from "react";
+import React31, { useMemo as useMemo3, useCallback as useCallback5, useRef as useRef13, useState as useState21 } from "react";
 
 // src/charts/constants.ts
 var CHART_DEFAULTS = {
@@ -6122,7 +6162,7 @@ var CHART_DEFAULTS = {
 };
 
 // src/charts/hooks/useResponsiveChart.ts
-import { useState as useState19, useEffect as useEffect12 } from "react";
+import { useState as useState19, useEffect as useEffect13 } from "react";
 var BREAKPOINTS = {
   mobile: 640,
   // < 640px
@@ -6142,7 +6182,7 @@ var DEFAULT_ASPECT_RATIOS = {
 };
 function useBreakpoint() {
   const [breakpoint, setBreakpoint] = useState19("desktop");
-  useEffect12(() => {
+  useEffect13(() => {
     const update = () => {
       const width = window.innerWidth;
       if (width < BREAKPOINTS.mobile) {
@@ -6439,7 +6479,7 @@ function createTickFormatter(domain) {
 }
 
 // src/charts/components/ChartTooltip.tsx
-import React29, { useRef as useRef11, useEffect as useEffect13, useState as useState20 } from "react";
+import React29, { useRef as useRef12, useEffect as useEffect14, useState as useState20 } from "react";
 import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
 var DefaultTooltipContent = ({
   active,
@@ -6486,10 +6526,10 @@ var ChartTooltip = ({
   containerBounds,
   animationDuration = 150
 }) => {
-  const tooltipRef = useRef11(null);
+  const tooltipRef = useRef12(null);
   const [position, setPosition] = useState20({ x: 0, y: 0 });
   const [isVisible, setIsVisible] = useState20(false);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!active || !tooltipRef.current) {
       setIsVisible(false);
       return;
@@ -7082,8 +7122,8 @@ var LineChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef12(null);
-  const svgRef = useRef12(null);
+  const containerRef = useRef13(null);
+  const svgRef = useRef13(null);
   const [hoveredPoint, setHoveredPoint] = useState21(null);
   const [crosshairX, setCrosshairX] = useState21(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
@@ -7540,7 +7580,7 @@ var LineChart = ({
 };
 
 // src/charts/BarChart.tsx
-import React32, { useMemo as useMemo4, useCallback as useCallback6, useRef as useRef13, useState as useState22 } from "react";
+import React32, { useMemo as useMemo4, useCallback as useCallback6, useRef as useRef14, useState as useState22 } from "react";
 import { jsx as jsx117, jsxs as jsxs44 } from "react/jsx-runtime";
 var BarChart = ({
   data,
@@ -7577,7 +7617,7 @@ var BarChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef13(null);
+  const containerRef = useRef14(null);
   const [hoveredBar, setHoveredBar] = useState22(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
@@ -7966,7 +8006,7 @@ var BarChart = ({
 };
 
 // src/charts/AreaChart.tsx
-import React33, { useMemo as useMemo5, useCallback as useCallback7, useRef as useRef14, useState as useState23, useId as useId2 } from "react";
+import React33, { useMemo as useMemo5, useCallback as useCallback7, useRef as useRef15, useState as useState23, useId as useId2 } from "react";
 import { jsx as jsx118, jsxs as jsxs45 } from "react/jsx-runtime";
 var AreaChart = ({
   data,
@@ -8002,7 +8042,7 @@ var AreaChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef14(null);
+  const containerRef = useRef15(null);
   const chartId = useId2();
   const [hoveredPoint, setHoveredPoint] = useState23(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
@@ -8440,7 +8480,7 @@ var AreaChart = ({
 };
 
 // src/charts/PieChart.tsx
-import { useMemo as useMemo6, useCallback as useCallback8, useRef as useRef15, useState as useState24 } from "react";
+import { useMemo as useMemo6, useCallback as useCallback8, useRef as useRef16, useState as useState24 } from "react";
 import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
 var PieChart = ({
   data,
@@ -8474,7 +8514,7 @@ var PieChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef15(null);
+  const containerRef = useRef16(null);
   const [hoveredSlice, setHoveredSlice] = useState24(null);
   const [activeSlice, setActiveSlice] = useState24(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
@@ -8743,7 +8783,7 @@ var PieChart = ({
 };
 
 // src/charts/ScatterChart.tsx
-import React35, { useMemo as useMemo7, useCallback as useCallback9, useRef as useRef16, useState as useState25 } from "react";
+import React35, { useMemo as useMemo7, useCallback as useCallback9, useRef as useRef17, useState as useState25 } from "react";
 import { jsx as jsx120, jsxs as jsxs47 } from "react/jsx-runtime";
 function linearRegression(points) {
   const n = points.length;
@@ -8871,7 +8911,7 @@ var ScatterChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef16(null);
+  const containerRef = useRef17(null);
   const [hoveredPoint, setHoveredPoint] = useState25(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
@@ -9201,7 +9241,7 @@ var ScatterChart = ({
 };
 
 // src/charts/components/ResponsiveContainer.tsx
-import React36, { useRef as useRef17, useState as useState26, useEffect as useEffect14, useCallback as useCallback10 } from "react";
+import React36, { useRef as useRef18, useState as useState26, useEffect as useEffect15, useCallback as useCallback10 } from "react";
 import { jsx as jsx121 } from "react/jsx-runtime";
 var ResponsiveContainer = ({
   width = "100%",
@@ -9216,12 +9256,12 @@ var ResponsiveContainer = ({
   children,
   onResize
 }) => {
-  const containerRef = useRef17(null);
+  const containerRef = useRef18(null);
   const [dimensions, setDimensions] = useState26({
     width: 0,
     height: 0
   });
-  const debounceTimerRef = useRef17(null);
+  const debounceTimerRef = useRef18(null);
   const calculateDimensions = useCallback10((containerWidth, containerHeight) => {
     let finalWidth = containerWidth;
     let finalHeight = containerHeight;
@@ -9256,7 +9296,7 @@ var ResponsiveContainer = ({
       updateDimensions();
     }
   }, [calculateDimensions, debounce, onResize]);
-  useEffect14(() => {
+  useEffect15(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(handleResize);