@evinvest/uikit 0.15.1 → 0.16.0

package/README.md

@@ -215,9 +215,19 @@ measuring needs host-only `web-sys`). Known gaps:
   onto an arbitrary child (no `Slot`), so it publishes them as a
   `FormControlContext` that `Input`/`Textarea` consume; wrap a bare element and
   you wire them yourself.
-- **resizable / carousel / drawer:** pointer-drag physics are TS-only (keyboard
-  in Rust for resizable; prev/next + keyboard for carousel; click-to-dismiss for
-  drawer). Embla momentum / vaul drag-to-dismiss are not reproduced.
+- **resizable / carousel:** pointer-drag physics are TS-only (keyboard in Rust
+  for resizable; prev/next + keyboard for carousel). Embla momentum is not
+  reproduced.
+- **drawer:** the Vaul-style enter/exit motion is shared by both ports via
+  `motion.css` (inlined into `tokens.css`), keyed on `data-slot` +
+  `data-vaul-drawer-direction` + `data-state`; the panel stays mounted on close
+  until its exit `transitionend`. Drag-to-dismiss (Vaul's pointer physics, from
+  any of the four edges; opt a region out with `data-vaul-no-drag`) is TS-only;
+  Rust dismisses on scrim click / Escape / `DrawerClose`. The panel is
+  `touch-action: none` so a touch never turns into a page pan, which also means
+  the panel itself must not scroll: the kit renders children inside a
+  `data-slot="drawer-body"` scroller (`overflow-y-auto`), so cap the sheet with
+  `max-h-*` on `DrawerContent` and let the body scroll by itself.
 - **sidebar:** the mobile-sheet integration, cookie persistence, and keyboard
   shortcut are omitted.
 - **brand chrome (header / footer / status pages):** TS routes links through an

package/dist/index.d.ts

@@ -168,9 +168,9 @@ declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.R
 
 declare const alertVariants: {
     readonly neutral: "bg-card text-ink";
-    readonly destructive: "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-error/90";
-    readonly success: "text-positive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-positive/90";
-    readonly info: "text-accent-info bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-info/90";
+    readonly destructive: "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid";
+    readonly success: "text-positive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid";
+    readonly info: "text-accent-info bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid";
 };
 type AlertVariant = keyof typeof alertVariants;
 
@@ -1242,10 +1242,10 @@ declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">)
 declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 
 declare const drawerDirectionClasses: {
-    readonly bottom: "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
-    readonly top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
-    readonly left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
-    readonly right: "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
+    readonly bottom: "inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
+    readonly top: "inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
+    readonly left: "inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
+    readonly right: "inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
 };
 type DrawerDirection = keyof typeof drawerDirectionClasses;
 
@@ -1265,7 +1265,20 @@ interface DrawerCloseProps extends React.ComponentProps<"button"> {
     asChild?: boolean;
 }
 declare function DrawerClose({ asChild, onClick, ...props }: DrawerCloseProps): React.JSX.Element;
+/**
+ * Standalone scrim, redundant with the one {@link DrawerContent} renders (as in
+ * shadcn). Mounted only while open; the animated exit lives on the content's
+ * own scrim.
+ */
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+/**
+ * The panel plus its scrim. Presence outlives `open`: once it turns false the
+ * panel flips to `data-state="closed"` and is unmounted when its exit
+ * `transform` transition ends (or the fallback timer fires). Re-opening
+ * mid-exit just flips the state back and the same transition carries the
+ * panel home. Drag-to-dismiss is TS-only pointer physics; opt a region out
+ * with `data-vaul-no-drag`.
+ */
 declare function DrawerContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/index.js

@@ -334,9 +334,9 @@ import "react";
 var ALERT_BASE = "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current";
 var alertVariants = {
   "neutral": "bg-card text-ink",
-  "destructive": "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-error/90",
-  "success": "text-positive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-positive/90",
-  "info": "text-accent-info bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-accent-info/90"
+  "destructive": "text-accent-error bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid",
+  "success": "text-positive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid",
+  "info": "text-accent-info bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-ink-mid"
 };
 var ALERT_TITLE = "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight";
 var ALERT_DESCRIPTION = "text-ink-soft col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed";
@@ -5891,15 +5891,16 @@ function SheetDescription({ className, ...props }) {
 import * as React62 from "react";
 
 // src/generated/drawer.ts
-var DRAWER_CONTENT_BASE = "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex h-auto border transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500";
+var DRAWER_CONTENT_BASE = "bg-background fixed z-50 flex h-auto border";
 var drawerDirectionClasses = {
-  "bottom": "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0",
-  "top": "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0",
-  "left": "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm",
-  "right": "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm"
+  "bottom": "inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0",
+  "top": "inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0",
+  "left": "inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm",
+  "right": "inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm"
 };
-var DRAWER_OVERLAY = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50";
-var DRAWER_HANDLE = "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full";
+var DRAWER_OVERLAY = "fixed inset-0 z-50 bg-black/50";
+var DRAWER_HANDLE = "bg-muted mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full";
+var DRAWER_BODY = "flex min-h-0 flex-1 flex-col overflow-y-auto";
 var DRAWER_HEADER = "flex flex-col gap-0.5 p-4 text-center sm:gap-1.5 sm:text-left";
 var DRAWER_FOOTER = "mt-auto flex flex-col gap-2 p-4";
 var DRAWER_TITLE = "text-ink font-semibold";
@@ -5907,6 +5908,10 @@ var DRAWER_DESCRIPTION = "text-ink-soft text-sm";
 
 // src/components/drawer.tsx
 import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
+var CLOSE_THRESHOLD = 0.25;
+var VELOCITY_THRESHOLD = 0.4;
+var DRAG_AFTER_OPEN_MS = 500;
+var EXIT_FALLBACK_MS = 600;
 var DrawerContext = React62.createContext(null);
 function useDrawer() {
   const ctx = React62.useContext(DrawerContext);
@@ -5971,16 +5976,169 @@ function DrawerOverlay({ className, ...props }) {
     }
   );
 }
+var EDGE_SIGN = {
+  bottom: 1,
+  top: -1,
+  right: 1,
+  left: -1
+};
+function isVertical(direction) {
+  return direction === "bottom" || direction === "top";
+}
+function translateAlong(direction, px) {
+  return isVertical(direction) ? `translate3d(0, ${px}px, 0)` : `translate3d(${px}px, 0, 0)`;
+}
+function dampen(px) {
+  return Math.max(8 * (Math.log(px + 1) - 2), 0);
+}
+function shouldDrag(target, panel, direction, towardsEdge) {
+  if (!(target instanceof Element)) return false;
+  if (target.tagName === "SELECT") return false;
+  if (target.closest("[data-vaul-no-drag]")) return false;
+  if (!isVertical(direction)) return true;
+  if (!towardsEdge) return false;
+  const selection = window.getSelection?.()?.toString();
+  if (selection && selection.length > 0) return false;
+  let el = target;
+  while (el && el !== panel) {
+    if (el.scrollHeight > el.clientHeight && el.scrollTop > 0) return false;
+    el = el.parentElement;
+  }
+  return true;
+}
+function useDrawerDrag(opts) {
+  const { panelRef, scrimRef, direction, open, present, openedAtRef, onClose } = opts;
+  const dragRef = React62.useRef(null);
+  React62.useEffect(() => {
+    if (!present) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    const onTouchMove = (e) => {
+      if (dragRef.current?.allowed) e.preventDefault();
+    };
+    panel.addEventListener("touchmove", onTouchMove, { passive: false });
+    return () => panel.removeEventListener("touchmove", onTouchMove);
+  }, [present, panelRef]);
+  const axisPos = (e) => isVertical(direction) ? e.clientY : e.clientX;
+  const onPointerDown = (e) => {
+    const panel = panelRef.current;
+    if (!panel || e.button > 0 || !open || dragRef.current) return;
+    const target = e.target;
+    if (target.closest('[data-slot="drawer-close"]')) return;
+    if (!panel.contains(target)) return;
+    const rect = panel.getBoundingClientRect();
+    dragRef.current = {
+      pointerId: e.pointerId,
+      target,
+      start: axisPos(e),
+      time: Date.now(),
+      size: isVertical(direction) ? rect.height : rect.width,
+      allowed: null,
+      delta: 0
+    };
+    try {
+      target.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const drag = dragRef.current;
+    const panel = panelRef.current;
+    if (!drag || !panel) return;
+    const delta = (axisPos(e) - drag.start) * EDGE_SIGN[direction];
+    drag.delta = delta;
+    if (!drag.allowed) {
+      if (Date.now() - openedAtRef.current < DRAG_AFTER_OPEN_MS) return;
+      if (!shouldDrag(drag.target, panel, direction, delta > 0)) return;
+      drag.allowed = true;
+      panel.setAttribute("data-dragging", "true");
+      scrimRef.current?.setAttribute("data-dragging", "true");
+    }
+    const scrim = scrimRef.current;
+    if (delta < 0) {
+      panel.style.transform = translateAlong(direction, -dampen(-delta) * EDGE_SIGN[direction]);
+      if (scrim) scrim.style.opacity = "1";
+      return;
+    }
+    panel.style.transform = translateAlong(direction, delta * EDGE_SIGN[direction]);
+    if (scrim) {
+      scrim.style.opacity = `${Math.min(1, Math.max(0, 1 - delta / drag.size))}`;
+    }
+  };
+  const endGesture = (e, cancelled) => {
+    const drag = dragRef.current;
+    const panel = panelRef.current;
+    if (!drag || !panel || e.pointerId !== drag.pointerId) return;
+    dragRef.current = null;
+    try {
+      drag.target.releasePointerCapture?.(drag.pointerId);
+    } catch {
+    }
+    if (!drag.allowed) return;
+    panel.removeAttribute("data-dragging");
+    panel.style.transform = "";
+    const scrim = scrimRef.current;
+    if (scrim) {
+      scrim.removeAttribute("data-dragging");
+      scrim.style.opacity = "";
+    }
+    if (cancelled || drag.delta <= 0) return;
+    const dt = Date.now() - drag.time;
+    const velocity = dt > 0 ? drag.delta / dt : 0;
+    if (velocity > VELOCITY_THRESHOLD || drag.delta >= drag.size * CLOSE_THRESHOLD) {
+      onClose();
+    }
+  };
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: (e) => endGesture(e, false),
+    onPointerCancel: (e) => endGesture(e, true)
+  };
+}
 function DrawerContent({ className, children, ...props }) {
   const { open, setOpen, direction } = useDrawer();
+  const [present, setPresent] = React62.useState(open);
+  if (open && !present) setPresent(true);
+  const closing = present && !open;
   const scopeRef = useFocusScope(open);
-  if (!open) return null;
+  const panelRef = React62.useRef(null);
+  const scrimRef = React62.useRef(null);
+  const openedAtRef = React62.useRef(0);
+  React62.useEffect(() => {
+    if (open) openedAtRef.current = Date.now();
+  }, [open]);
+  React62.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  React62.useEffect(() => {
+    if (!closing) return;
+    const id = setTimeout(() => setPresent(false), EXIT_FALLBACK_MS);
+    return () => clearTimeout(id);
+  }, [closing]);
+  const drag = useDrawerDrag({
+    panelRef,
+    scrimRef,
+    direction,
+    open,
+    present,
+    openedAtRef,
+    onClose: () => setOpen(false)
+  });
+  if (!present) return null;
+  const state = closing ? "closed" : "open";
   return /* @__PURE__ */ jsxs22(Portal, { children: [
     /* @__PURE__ */ jsx52(
       "div",
       {
+        ref: scrimRef,
         "data-slot": "drawer-overlay",
-        "data-state": "open",
+        "data-state": state,
         className: DRAWER_OVERLAY,
         onClick: () => setOpen(false)
       }
@@ -5991,12 +6149,21 @@ function DrawerContent({ className, children, ...props }) {
         role: "dialog",
         "aria-modal": "true",
         "data-slot": "drawer-content",
-        "data-state": "open",
+        "data-state": state,
         "data-vaul-drawer-direction": direction,
-        ref: mergeRefs(scopeRef),
+        ref: mergeRefs(scopeRef, panelRef),
         onKeyDown: (e) => {
           if (e.key === "Escape") setOpen(false);
         },
+        onTransitionEnd: (e) => {
+          if (closing && e.propertyName === "transform" && e.target === e.currentTarget) {
+            setPresent(false);
+          }
+        },
+        onPointerDown: drag.onPointerDown,
+        onPointerMove: drag.onPointerMove,
+        onPointerUp: drag.onPointerUp,
+        onPointerCancel: drag.onPointerCancel,
         className: cn(DRAWER_CONTENT_BASE, drawerDirectionClasses[direction], className),
         ...props,
         children: [
@@ -6007,7 +6174,14 @@ function DrawerContent({ className, children, ...props }) {
               className: DRAWER_HANDLE
             }
           ) : null,
-          children
+          /* @__PURE__ */ jsx52(
+            "div",
+            {
+              "data-slot": "drawer-body",
+              className: DRAWER_BODY,
+              children
+            }
+          )
         ]
       }
     )