@evinvest/uikit 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -105,14 +105,11 @@ declare function useFloating(opts: {
 declare function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null>;
 
 /**
- * Keeps a node mounted through its exit animation — the dep-light core of
- * `@radix-ui/react-presence`. While `present` is true the node is mounted with
- * `data-state="open"`; when `present` flips to false the hook switches it to
- * `data-state="closed"` and unmounts only after the node's CSS
- * animation/transition ends (or immediately if there is none).
- *
- * Usage: spread `{ ref, ...(isPresent ? {} : {}) }` and render only while
- * `isPresent`. The Rust mirror toggles `data-state` without deferring unmount.
+ * Tracks whether an overlay should be mounted. Mount/unmount steps in lockstep
+ * with `present`: enter animations (`data-[state=open]:animate-in`) still play
+ * on mount, but the kit intentionally does **not** defer unmount for an exit
+ * animation — deferring made portaled overlays flicker on close. Pass `ref`
+ * through to the animated node (kept for API stability / future use).
  */
 declare function usePresence(present: boolean): {
     isPresent: boolean;

package/dist/index.js

@@ -64,12 +64,10 @@ function useControllableState(opts) {
 }
 
 // src/primitives/portal.tsx
-import * as React3 from "react";
+import "react";
 import { createPortal } from "react-dom";
 function Portal({ children, container }) {
-  const [mounted, setMounted] = React3.useState(false);
-  React3.useEffect(() => setMounted(true), []);
-  if (!mounted) return null;
+  if (typeof document === "undefined") return null;
   const target = container ?? document.body;
   return createPortal(children, target);
 }
@@ -160,12 +158,21 @@ function useFloating(opts) {
       setStyle({ position: "fixed", top: Math.round(top), left: Math.round(left) });
       setResolved({ side: placed, align });
     }
+    let frame = 0;
+    function schedule() {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        update();
+      });
+    }
     update();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
     return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
+      if (frame) cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
     };
   }, [open, side, align, offset, anchorRef]);
   return { floatingRef, style, side: resolved.side, align: resolved.align };
@@ -219,34 +226,7 @@ function useFocusScope(enabled) {
 import * as React7 from "react";
 function usePresence(present) {
   const ref = React7.useRef(null);
-  const [isPresent, setIsPresent] = React7.useState(present);
-  React7.useEffect(() => {
-    const node = ref.current;
-    if (present) {
-      setIsPresent(true);
-      return;
-    }
-    if (!node) {
-      setIsPresent(false);
-      return;
-    }
-    const styles = getComputedStyle(node);
-    const hasAnim = styles.animationName && styles.animationName !== "none" || parseFloat(styles.transitionDuration) > 0;
-    if (!hasAnim) {
-      setIsPresent(false);
-      return;
-    }
-    function done() {
-      setIsPresent(false);
-    }
-    node.addEventListener("animationend", done);
-    node.addEventListener("transitionend", done);
-    return () => {
-      node.removeEventListener("animationend", done);
-      node.removeEventListener("transitionend", done);
-    };
-  }, [present]);
-  return { isPresent: present || isPresent, ref };
+  return { isPresent: present, ref };
 }
 
 // src/primitives/use-roving-focus.ts
@@ -2485,7 +2465,7 @@ function Slider({
     event.currentTarget.releasePointerCapture?.(event.pointerId);
   };
   const rangeStyle = orientation === "vertical" ? { height: `${percent}%` } : { width: `${percent}%` };
-  const thumbStyle = orientation === "vertical" ? { bottom: `${percent}%` } : { left: `${percent}%` };
+  const thumbStyle = orientation === "vertical" ? { position: "absolute", bottom: `${percent}%`, left: "50%", transform: "translate(-50%, 50%)" } : { position: "absolute", left: `${percent}%`, top: "50%", transform: "translate(-50%, -50%)" };
   return /* @__PURE__ */ jsxs5(
     "span",
     {
@@ -2494,6 +2474,9 @@ function Slider({
       "data-disabled": disabled || void 0,
       className: cn(ROOT_BASE2, className),
       ...props,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
       children: [
         /* @__PURE__ */ jsx31(
           "span",
@@ -2502,9 +2485,6 @@ function Slider({
             "data-slot": "slider-track",
             "data-orientation": orientation,
             className: TRACK_BASE,
-            onPointerDown,
-            onPointerMove,
-            onPointerUp,
             children: /* @__PURE__ */ jsx31(
               "span",
               {