astralis-ui 0.1.0 → 0.1.1

package/dist/components/menu/menu.styles.js

@@ -1,5 +1,5 @@
 "use client";
-const a = "astralis:fixed astralis:z-higher astralis:min-w-44 astralis:max-w-72 astralis:rounded-xl astralis:border-normal astralis:border-stroke-subtle astralis:bg-surface-panel astralis:shadow-lg astralis:p-1 astralis:outline-none astralis:transition-all astralis:duration-fast", t = (s) => s === "open" ? "astralis:opacity-100 astralis:scale-100" : "astralis:opacity-0 astralis:scale-95", l = "astralis:flex astralis:w-full astralis:cursor-pointer astralis:select-none astralis:items-center astralis:gap-2 astralis:rounded-lg astralis:px-2.5 astralis:py-1.5 astralis:text-sm astralis:text-label-base astralis:outline-none astralis:transition-colors astralis:focus:bg-surface-subtle astralis:aria-disabled:opacity-moderate astralis:aria-disabled:pointer-events-none", r = "astralis:text-label-error astralis:focus:bg-surface-error", e = "astralis:px-2.5 astralis:py-1.5 astralis:text-xs astralis:font-medium astralis:text-label-subtle", i = "astralis:my-1 astralis:h-px astralis:bg-stroke-subtle", n = "astralis:h-4 astralis:w-4 astralis:shrink-0 astralis:text-label-muted", o = "astralis:ml-auto astralis:pl-4 astralis:text-xs astralis:text-label-subtle";
+const a = "astralis:fixed astralis:z-higher astralis:min-w-44 astralis:max-w-72 astralis:rounded-xl astralis:border-normal astralis:border-stroke-subtle astralis:bg-surface-panel astralis:shadow-lg astralis:p-1 astralis:outline-none astralis:transition astralis:duration-fast", t = (s) => s === "open" ? "astralis:opacity-100 astralis:scale-100" : "astralis:opacity-0 astralis:scale-95", l = "astralis:flex astralis:w-full astralis:cursor-pointer astralis:select-none astralis:items-center astralis:gap-2 astralis:rounded-lg astralis:px-2.5 astralis:py-1.5 astralis:text-sm astralis:text-label-base astralis:outline-none astralis:transition-colors astralis:focus:bg-surface-subtle astralis:aria-disabled:opacity-moderate astralis:aria-disabled:pointer-events-none", r = "astralis:text-label-error astralis:focus:bg-surface-error", e = "astralis:px-2.5 astralis:py-1.5 astralis:text-xs astralis:font-medium astralis:text-label-subtle", i = "astralis:my-1 astralis:h-px astralis:bg-stroke-subtle", n = "astralis:h-4 astralis:w-4 astralis:shrink-0 astralis:text-label-muted", o = "astralis:ml-auto astralis:pl-4 astralis:text-xs astralis:text-label-subtle";
 export {
   a as menuContentClasses,
   n as menuIconSlotClasses,

package/dist/components/overlay/popover/components/popover-content.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as a, jsxs as M } from "react/jsx-runtime";
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
 import { useMemo as S, useEffect as U } from "react";
 import { usePopover as $ } from "../popover.context.js";
 import { popoverArrowClasses as k, popoverContentClasses as q } from "../popover.styles.js";
@@ -8,8 +8,8 @@ import { usePresence as B } from "../../../../hooks/use-presence.js";
 import { useDismiss as F } from "../../../../hooks/use-dismiss.js";
 import { useAnchorPosition as G } from "../../../../hooks/use-anchor-position.js";
 import { astralisMerge as H } from "../../../../utils/astralis-merge.js";
-const l = 160;
-function _({ children: n, className: f = "", withArrow: c = !1, ...p }) {
+const a = 160;
+function _({ children: l, className: f = "", withArrow: c = !1, ...p }) {
   const {
     open: o,
     close: m,
@@ -28,7 +28,7 @@ function _({ children: n, className: f = "", withArrow: c = !1, ...p }) {
     avoidCollisions: x,
     closeOnEsc: C,
     closeOnOutsidePointer: I
-  } = $(), { mounted: w, state: D } = B(o, l), { x: T, y: A, side: r, arrow: i } = G({
+  } = $(), { mounted: w, state: D } = B(o, a), { x: T, y: A, side: r, arrow: i } = G({
     open: o,
     anchorRef: s,
     floatingRef: t,
@@ -46,7 +46,7 @@ function _({ children: n, className: f = "", withArrow: c = !1, ...p }) {
     };
   }, [o, t, s]), !w) return null;
   const N = D === "open", e = {};
-  return r === "bottom" ? (e.top = -4, e.left = i.left) : r === "top" ? (e.bottom = -4, e.left = i.left) : r === "right" ? (e.left = -4, e.top = i.top) : (e.right = -4, e.top = i.top), /* @__PURE__ */ a(z, { children: /* @__PURE__ */ M(
+  return r === "bottom" ? (e.top = -4, e.left = i.left) : r === "top" ? (e.bottom = -4, e.left = i.left) : r === "right" ? (e.left = -4, e.top = i.top) : (e.right = -4, e.top = i.top), /* @__PURE__ */ n(z, { children: /* @__PURE__ */ M(
     "div",
     {
       ref: t,
@@ -56,17 +56,18 @@ function _({ children: n, className: f = "", withArrow: c = !1, ...p }) {
       "aria-describedby": y ? g : void 0,
       tabIndex: -1,
       "data-side": r,
-      style: { left: T, top: A, transitionDuration: `${l}ms` },
+      style: { left: T, top: A, transitionDuration: `${a}ms` },
       className: H(
         q,
-        "astralis:p-4 astralis:transition-all",
+        // `transition` (not -all): left/top must snap, never animate.
+        "astralis:p-4 astralis:transition",
         N ? "astralis:opacity-100 astralis:scale-100" : "astralis:opacity-0 astralis:scale-95",
         f
       ),
       ...p,
       children: [
-        n,
-        c && /* @__PURE__ */ a("div", { ref: d, className: k, style: e })
+        l,
+        c && /* @__PURE__ */ n("div", { ref: d, className: k, style: e })
       ]
     }
   ) });

package/dist/components/overlay/portal.js

@@ -1,10 +1,8 @@
 "use client";
-import { useState as u, useEffect as n } from "react";
-import { createPortal as f } from "react-dom";
-function m({ children: t, container: e }) {
-  const [o, r] = u(!1);
-  return n(() => r(!0), []), o ? f(t, e ?? document.body) : null;
+import { createPortal as n } from "react-dom";
+function r({ children: e, container: t }) {
+  return typeof document > "u" ? null : n(e, t ?? document.body);
 }
 export {
-  m as Portal
+  r as Portal
 };

package/dist/hooks/use-anchor-position.js

@@ -1,39 +1,41 @@
 "use client";
-import { useState as S, useCallback as k, useLayoutEffect as A } from "react";
+import { useState as B, useCallback as S, useLayoutEffect as k } from "react";
 const L = { top: "bottom", bottom: "top", left: "right", right: "left" };
-function H({
-  open: b,
-  anchorRef: M,
-  floatingRef: p,
+function C({
+  open: p,
+  anchorRef: v,
+  floatingRef: l,
   side: o = "bottom",
   align: w = "center",
   sideOffset: m = 8,
-  alignOffset: l = 0,
-  avoidCollisions: u = !0,
+  alignOffset: s = 0,
+  avoidCollisions: a = !0,
   padding: r = 8
 }) {
-  const [P, y] = S({ x: 0, y: 0, side: o, arrow: {} }), i = k(() => {
-    const v = M.current, x = p.current;
-    if (!v || !x) return;
-    const t = v.getBoundingClientRect(), e = x.getBoundingClientRect(), f = window.innerWidth, g = window.innerHeight, z = o === "top" || o === "bottom";
+  const [y, P] = B({ x: 0, y: 0, side: o, arrow: {} }), h = S(() => {
+    const u = v.current, x = l.current;
+    if (!u || !x) return;
+    const t = u.getBoundingClientRect(), e = x.getBoundingClientRect(), f = window.innerWidth, E = window.innerHeight, T = o === "top" || o === "bottom";
     let c = o;
-    if (u) {
-      const a = { top: t.top, bottom: g - t.bottom, left: t.left, right: f - t.right }, B = (z ? e.height : e.width) + m + r;
-      a[o] < B && a[L[o]] > a[o] && (c = L[o]);
+    if (a) {
+      const M = { top: t.top, bottom: E - t.bottom, left: t.left, right: f - t.right }, z = (T ? e.height : e.width) + m + r;
+      M[o] < z && M[L[o]] > M[o] && (c = L[o]);
     }
-    const E = c === "top" || c === "bottom";
-    let h = 0, n = 0;
-    c === "bottom" ? n = t.bottom + m : c === "top" ? n = t.top - e.height - m : c === "right" ? h = t.right + m : h = t.left - e.width - m, E ? (h = w === "center" ? t.left + t.width / 2 - e.width / 2 : w === "start" ? t.left : t.right - e.width, h += l) : (n = w === "center" ? t.top + t.height / 2 - e.height / 2 : w === "start" ? t.top : t.bottom - e.height, n += l), u && (h = Math.min(Math.max(r, h), Math.max(r, f - e.width - r)), n = Math.min(Math.max(r, n), Math.max(r, g - e.height - r)));
-    const s = {};
-    E ? s.left = Math.min(Math.max(10, t.left + t.width / 2 - h), e.width - 10) : s.top = Math.min(Math.max(10, t.top + t.height / 2 - n), e.height - 10), y({ x: h, y: n, side: c, arrow: s });
-  }, [M, p, o, w, m, l, u, r]);
-  return A(() => {
-    if (b)
-      return i(), window.addEventListener("scroll", i, !0), window.addEventListener("resize", i), () => {
-        window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i);
-      };
-  }, [b, i]), { ...P, update: i };
+    const g = c === "top" || c === "bottom";
+    let n = 0, i = 0;
+    c === "bottom" ? i = t.bottom + m : c === "top" ? i = t.top - e.height - m : c === "right" ? n = t.right + m : n = t.left - e.width - m, g ? (n = w === "center" ? t.left + t.width / 2 - e.width / 2 : w === "start" ? t.left : t.right - e.width, n += s) : (i = w === "center" ? t.top + t.height / 2 - e.height / 2 : w === "start" ? t.top : t.bottom - e.height, i += s), a && (n = Math.min(Math.max(r, n), Math.max(r, f - e.width - r)), i = Math.min(Math.max(r, i), Math.max(r, E - e.height - r)));
+    const b = {};
+    g ? b.left = Math.min(Math.max(10, t.left + t.width / 2 - n), e.width - 10) : b.top = Math.min(Math.max(10, t.top + t.height / 2 - i), e.height - 10), P({ x: n, y: i, side: c, arrow: b });
+  }, [v, l, o, w, m, s, a, r]);
+  return k(() => {
+    if (!p) return;
+    h();
+    let u = null;
+    return l.current || (u = setTimeout(h, 0)), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      u && clearTimeout(u), window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    };
+  }, [p, h, l]), { ...y, update: h };
 }
 export {
-  H as useAnchorPosition
+  C as useAnchorPosition
 };

package/dist/hooks/use-overlay-behavior.js

@@ -1,12 +1,12 @@
 "use client";
 import { useRef as v, useEffect as b } from "react";
-import { lockBodyScroll as p, unlockBodyScroll as E, isTopOverlay as h, pushOverlay as k, popOverlay as A } from "../utils/overlay-stack.js";
+import { lockBodyScroll as p, isTopOverlay as E, pushOverlay as h, popOverlay as k, unlockBodyScroll as A } from "../utils/overlay-stack.js";
 const a = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function T(r, c, d = {}) {
   const { closeOnEsc: s = !0 } = d, o = v(null);
   return b(() => {
     if (!r) return;
-    const u = k();
+    const u = h();
     p();
     const m = document.activeElement, y = setTimeout(() => {
       const e = o.current;
@@ -15,7 +15,7 @@ function T(r, c, d = {}) {
         e.querySelectorAll(a)
       )[0] ?? e).focus();
     }, 0), l = (e) => {
-      if (h(u)) {
+      if (E(u)) {
         if (e.key === "Escape") {
           s && c(!1);
           return;
@@ -33,7 +33,7 @@ function T(r, c, d = {}) {
       }
     };
     return document.addEventListener("keydown", l), () => {
-      document.removeEventListener("keydown", l), A(u), E(), clearTimeout(y), m?.focus();
+      document.removeEventListener("keydown", l), k(u), A(), clearTimeout(y), m?.focus();
     };
   }, [r, c, s]), { containerRef: o };
 }

package/dist/index.d.ts

@@ -2272,7 +2272,13 @@ export declare function PopoverTitle({ children, className }: PopoverSectionProp
 
 export declare function PopoverTrigger({ children }: PopoverSlotProps): ReactElement<any, string | JSXElementConstructor<any>>;
 
-/** Renders children into `document.body` (after mount, so it's SSR-safe). */
+/**
+ * Renders children into `document.body`. Guarded for SSR (no document on the
+ * server) but NOT deferred behind an effect: overlay panels must exist in the
+ * same commit that opens them, so anchor positioning can measure them in its
+ * layout effect. (Portal children are never server-rendered or hydrated, so
+ * rendering the portal during the client render is safe.)
+ */
 export declare function Portal({ children, container }: {
     children: ReactNode;
     container?: HTMLElement;