@evinvest/uikit 0.15.2 → 0.17.0

package/dist/index.js

@@ -109,37 +109,46 @@ function useDismissableLayer(opts) {
 
 // src/primitives/use-floating.ts
 import * as React5 from "react";
+var ABSOLUTE = Object.freeze({ position: "absolute", top: 0, left: 0 });
+var POSITIONED = /* @__PURE__ */ new Set(["relative", "absolute", "fixed", "sticky"]);
+function toContainingBlock(floating, x, y) {
+  const parent = floating.offsetParent;
+  const doc = floating.ownerDocument;
+  const root = parent === doc.body || parent === doc.documentElement || parent === null;
+  const positioned = parent instanceof HTMLElement && (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? ""));
+  if (!positioned) {
+    const win = doc.defaultView;
+    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };
+  }
+  const p = parent.getBoundingClientRect();
+  return {
+    x: x - p.left - parent.clientLeft + parent.scrollLeft,
+    y: y - p.top - parent.clientTop + parent.scrollTop,
+    root: false
+  };
+}
+function layoutSize(el) {
+  return { width: el.offsetWidth, height: el.offsetHeight };
+}
+function viewport() {
+  const el = document.documentElement;
+  return {
+    vw: el.clientWidth || window.innerWidth,
+    vh: el.clientHeight || window.innerHeight
+  };
+}
 function useFloating(opts) {
   const { anchorRef, open, side = "bottom", align = "center", offset = 4 } = opts;
   const floatingRef = React5.useRef(null);
-  const [style, setStyle] = React5.useState({
-    position: "fixed",
-    top: 0,
-    left: 0
-  });
-  const [resolved, setResolved] = React5.useState({
+  const [placedSide, setPlacedSide] = React5.useState(side);
+  const placement = React5.useRef({
     side,
-    align
+    shiftX: 0,
+    shiftY: 0
   });
   React5.useLayoutEffect(() => {
     if (!open) return;
-    function update() {
-      const anchor = anchorRef.current;
-      const floating = floatingRef.current;
-      if (!anchor || !floating) return;
-      const a = anchor.getBoundingClientRect();
-      const f = floating.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      let placed = side;
-      if (side === "bottom" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)
-        placed = "top";
-      else if (side === "top" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)
-        placed = "bottom";
-      else if (side === "right" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)
-        placed = "left";
-      else if (side === "left" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)
-        placed = "right";
+    function ideal(a, f, placed) {
       let top = 0;
       let left = 0;
       const vertical = placed === "top" || placed === "bottom";
@@ -156,29 +165,71 @@ function useFloating(opts) {
         else if (align === "end") top = a.bottom - f.height;
         else top = a.top + a.height / 2 - f.height / 2;
       }
-      left = Math.max(offset, Math.min(left, vw - f.width - offset));
-      top = Math.max(offset, Math.min(top, vh - f.height - offset));
-      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", schedule, true);
-    window.addEventListener("resize", schedule);
+      return { top, left };
+    }
+    function write(floating, f, top, left, contain) {
+      const p = toContainingBlock(floating, left, top);
+      let { x, y } = p;
+      if (contain && p.root) {
+        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;
+        x = Math.max(0, Math.min(x, icbWidth - f.width));
+        y = Math.max(0, y);
+      }
+      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
+    }
+    function place() {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = layoutSize(floating);
+      const { vw, vh } = viewport();
+      let placed = side;
+      if (side === "bottom" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)
+        placed = "top";
+      else if (side === "top" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)
+        placed = "bottom";
+      else if (side === "right" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)
+        placed = "left";
+      else if (side === "left" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)
+        placed = "right";
+      const { top, left } = ideal(a, f, placed);
+      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));
+      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));
+      placement.current = {
+        side: placed,
+        shiftX: clampedLeft - left,
+        shiftY: clampedTop - top
+      };
+      write(floating, f, clampedTop, clampedLeft, false);
+      setPlacedSide((prev) => prev === placed ? prev : placed);
+    }
+    function sync() {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = layoutSize(floating);
+      const { side: placed, shiftX, shiftY } = placement.current;
+      const { top, left } = ideal(a, f, placed);
+      write(floating, f, top + shiftY, left + shiftX, true);
+    }
+    place();
+    window.addEventListener("scroll", sync, true);
+    window.addEventListener("resize", place);
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(place);
+      if (anchorRef.current) observer.observe(anchorRef.current);
+      if (floatingRef.current) observer.observe(floatingRef.current);
+    }
     return () => {
-      if (frame) cancelAnimationFrame(frame);
-      window.removeEventListener("scroll", schedule, true);
-      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", sync, true);
+      window.removeEventListener("resize", place);
+      observer?.disconnect();
     };
   }, [open, side, align, offset, anchorRef]);
-  return { floatingRef, style, side: resolved.side, align: resolved.align };
+  return { floatingRef, style: ABSOLUTE, side: placedSide, align };
 }
 
 // src/primitives/focus-scope.tsx
@@ -227,9 +278,44 @@ function useFocusScope(enabled) {
 
 // src/primitives/presence.ts
 import * as React7 from "react";
+import { flushSync } from "react-dom";
+var EXIT_FALLBACK_MS = 1e3;
 function usePresence(present) {
   const ref = React7.useRef(null);
-  return { isPresent: present, ref };
+  const [mounted, setMounted] = React7.useState(present);
+  React7.useLayoutEffect(() => {
+    if (present) {
+      setMounted(true);
+      return;
+    }
+    const node = ref.current;
+    if (!node) {
+      setMounted(false);
+      return;
+    }
+    const name = getComputedStyle(node).animationName;
+    if (name === "" || name === "none") {
+      setMounted(false);
+      return;
+    }
+    const prevPointerEvents = node.style.pointerEvents;
+    node.style.pointerEvents = "none";
+    const onEnd = (e) => {
+      if (e.target !== node) return;
+      if (e.animationName && !name.includes(e.animationName)) return;
+      flushSync(() => setMounted(false));
+    };
+    node.addEventListener("animationend", onEnd);
+    node.addEventListener("animationcancel", onEnd);
+    const timer = setTimeout(() => setMounted(false), EXIT_FALLBACK_MS);
+    return () => {
+      clearTimeout(timer);
+      node.removeEventListener("animationend", onEnd);
+      node.removeEventListener("animationcancel", onEnd);
+      node.style.pointerEvents = prevPointerEvents;
+    };
+  }, [present]);
+  return { isPresent: present || mounted, ref };
 }
 
 // src/primitives/use-roving-focus.ts
@@ -5197,14 +5283,14 @@ function useItem() {
 function NavigationMenu({
   className,
   children,
-  viewport = true,
+  viewport: viewport2 = true,
   ...props
 }) {
   return /* @__PURE__ */ jsxs18(
     "nav",
     {
       "data-slot": "navigation-menu",
-      "data-viewport": viewport,
+      "data-viewport": viewport2,
       role: "navigation",
       className: cn(
         NAVIGATION_MENU,
@@ -5213,7 +5299,7 @@ function NavigationMenu({
       ...props,
       children: [
         children,
-        viewport && /* @__PURE__ */ jsx48(NavigationMenuViewport, {})
+        viewport2 && /* @__PURE__ */ jsx48(NavigationMenuViewport, {})
       ]
     }
   );
@@ -5891,15 +5977,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 +5994,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_MS2 = 600;
 var DrawerContext = React62.createContext(null);
 function useDrawer() {
   const ctx = React62.useContext(DrawerContext);
@@ -5971,16 +6062,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_MS2);
+    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 +6235,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 +6260,14 @@ function DrawerContent({ className, children, ...props }) {
               className: DRAWER_HANDLE
             }
           ) : null,
-          children
+          /* @__PURE__ */ jsx52(
+            "div",
+            {
+              "data-slot": "drawer-body",
+              className: DRAWER_BODY,
+              children
+            }
+          )
         ]
       }
     )
@@ -6704,17 +6964,17 @@ function ChartLegendContent({
 import * as React66 from "react";
 
 // src/generated/calendar.ts
-var CALENDAR_ROOT = "bg-background p-3 w-fit";
+var CALENDAR_ROOT = "p-3 w-fit";
 var CALENDAR_NAV_BUTTON = "size-8 p-0 select-none";
 var CALENDAR_NAV = "flex items-center justify-between gap-1 w-full px-1";
 var CALENDAR_CAPTION = "text-sm font-medium select-none";
 var CALENDAR_GRID = "w-full border-collapse mt-4";
 var CALENDAR_WEEKDAY_ROW = "flex";
-var CALENDAR_WEEKDAY = "text-ink-soft rounded-md flex-1 font-normal text-[0.8rem] select-none";
+var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none";
 var CALENDAR_WEEK = "flex w-full mt-2";
-var CALENDAR_DAY_EMPTY = "relative w-full h-full p-0 aspect-square select-none";
-var CALENDAR_DAY_CELL = "relative w-full h-full p-0 text-center aspect-square select-none";
-var CALENDAR_DAY = "size-auto w-full aspect-square font-normal leading-none";
+var CALENDAR_DAY_EMPTY = "relative size-9 shrink-0 p-0 select-none";
+var CALENDAR_DAY_CELL = "relative size-9 shrink-0 p-0 text-center select-none";
+var CALENDAR_DAY = "size-auto w-full aspect-square font-normal leading-none tabular-nums";
 var CALENDAR_DAY_SELECTED = "bg-primary text-on-primary";
 var CALENDAR_DAY_TODAY = "bg-hover text-ink rounded-md";
 
@@ -6813,7 +7073,7 @@ function Calendar({
   const cells = [];
   for (let i = 0; i < lead; i += 1) cells.push(null);
   for (let day = 1; day <= total; day += 1) cells.push(day);
-  while (cells.length % 7 !== 0) cells.push(null);
+  while (cells.length < 42) cells.push(null);
   const weeks = [];
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   const navClass = buttonVariants({
@@ -6955,6 +7215,25 @@ function CalendarIcon() {
     }
   );
 }
+function XIcon3() {
+  return /* @__PURE__ */ jsx57(
+    "svg",
+    {
+      className: "size-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx57("path", { d: "M18 6 6 18M6 6l12 12" })
+    }
+  );
+}
 var pad = (n) => String(n).padStart(2, "0");
 function atMinute(d) {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
@@ -7162,6 +7441,18 @@ function DateTimePicker({
                 onClick: onClear,
                 children: labels.clear ?? "Clear"
               }
+            ),
+            /* @__PURE__ */ jsx57(
+              "button",
+              {
+                type: "button",
+                className: buttonVariants({ variant: "ghost", size: "sm", icon: true }),
+                "data-slot": "date-time-picker-close",
+                "aria-label": labels.close ?? "Close",
+                disabled,
+                onClick: () => setOpen(false),
+                children: /* @__PURE__ */ jsx57(XIcon3, {})
+              }
             )
           ] })
         ]