@sia.soul/sia-react-ui 0.1.44 → 0.1.46

package/dist/{chunk-QIXU7N4X.js → chunk-E4RMSZOC.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk-H7IAG72O.js";
 
 // src/components/DatePicker.tsx
-import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
+import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState } from "react";
 
 // src/components/DatePickerPanel.tsx
 import { useLayoutEffect, useRef } from "react";
@@ -496,6 +496,24 @@ function DateRangePicker({
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [draftValue, setDraftValue] = useState(currentValue);
   const [activeIndex, setActiveIndex] = useState(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const indicatorRef = useRef2(null);
+  useLayoutEffect2(() => {
+    const field = rootRef.current?.querySelector(`[data-range-endpoint="${activeIndex}"]`);
+    const indicator = indicatorRef.current;
+    if (!field || !indicator) return;
+    const alignIndicator = () => {
+      indicator.style.transform = `translateX(${field.offsetLeft}px)`;
+      indicator.style.width = `${field.offsetWidth}px`;
+    };
+    alignIndicator();
+    const observer = new ResizeObserver(alignIndicator);
+    const trigger = field.parentElement;
+    if (trigger) {
+      observer.observe(trigger);
+      for (const child of trigger.children) if (child !== indicator) observer.observe(child);
+    }
+    return () => observer.disconnect();
+  });
   const [confirmedIndex, setConfirmedIndex] = useState(null);
   const [presetSelected, setPresetSelected] = useState(false);
   const [hoverDate, setHoverDate] = useState("");
@@ -762,6 +780,7 @@ function DateRangePicker({
             /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${displayValue[1] ? "" : " is-placeholder"}`, children: displayValue[1] ? formatValue(displayValue[1]) : placeholder[1] }),
             endFloating.label
           ] }),
+          /* @__PURE__ */ jsx2("span", { ref: indicatorRef, className: "sia-picker-range-control__indicator", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx2("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ jsx2(Icon, { name: "calendar", size: 16 }) })
         ]
       }

package/dist/core.css

@@ -121,15 +121,26 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   min-width: 0;
   height: 100%;
 }
-.sia-picker-range-control__field.is-active::after {
-  content: "";
+.sia-picker-range-control > .sia-picker__trigger {
+  position: relative;
+}
+.sia-picker-range-control__indicator {
   position: absolute;
-  right: 0;
   bottom: -1px;
   left: 0;
   height: 3px;
   background: var(--sia-color-primary);
   pointer-events: none;
+  visibility: hidden;
+}
+.sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+  visibility: visible;
+  transition: transform 220ms ease, width 220ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+    transition: none;
+  }
 }
 .sia-picker-range-control__field.sia-placeholder-floating > .is-placeholder {
   color: transparent;