barua-ui 0.4.1 → 0.5.0

package/css/components/nav.css

@@ -522,6 +522,11 @@
   }
 
   /* Dropdown wrapper (CSS-only open via <details>) */
+  /* A menu used as a listbox can hold a long list — twenty blocks of a serial,
+     every region — so it scrolls inside itself rather than running off the
+     card or the screen. */
+  .b-menu[role="listbox"] { max-block-size: min(18rem, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
+
   .b-dropdown { position: relative; display: inline-block; }
   .b-dropdown > summary { list-style: none; cursor: pointer; }
   .b-dropdown > summary::-webkit-details-marker { display: none; }

package/css/utilities.css

@@ -599,4 +599,61 @@
   @media (min-width: 768px) {
     .b-hide-desktop { display: none !important; }
   }
+
+  /* ---- Scroll: what a container's own position can drive ------------------
+     A container carrying data-b-scroll-geometry publishes --b-scroll-progress
+     (0–1) and --b-scroll-y, so a progress line or a parallax can be pure CSS.
+     .b-scroll-progress is that line: a hairline at the top of a scroll area
+     whose width is the distance scrolled. */
+  .b-scroll-progress {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--b-z-raised);
+    height: 2px;
+    width: calc(var(--b-scroll-progress, 0) * 100%);
+    background: var(--b-color-accent);
+    transition: width 80ms linear;
+  }
+
+  /* A large title that condenses as its scroll area moves — SwiftUI's
+     navigation title, on the scroll timeline so the browser drives it. Put it
+     on .b-large-title or .b-mobile-header__large-title inside the scroller. */
+  @supports (animation-timeline: scroll()) {
+    .b-scroll-condense {
+      animation: b-condense linear both;
+      animation-timeline: scroll(nearest);
+      animation-range: 0 5rem;
+      transform-origin: 0 100%;
+    }
+    @keyframes b-condense {
+      to { scale: 0.62; opacity: 0.9; }
+    }
+  }
+
+  /* A bar over content that has moved gains its edge. */
+  .is-scrolled > .b-mobile-header,
+  .is-scrolled > .b-topnav,
+  .is-scrolled > .b-marketing-nav,
+  .b-mobile-header.is-scrolled,
+  .b-topnav.is-scrolled,
+  .b-marketing-nav.is-scrolled {
+    box-shadow: var(--b-shadow-sm);
+  }
+
+  /* data-b-visible: the entrance for browsers without a view timeline, and a
+     hook any element can use — .is-visible arrives when the threshold does. */
+  @supports not (animation-timeline: view()) {
+    .b-reveal[data-b-visible]:not(.is-visible) { opacity: 0; translate: 0 12px; }
+    .b-reveal[data-b-visible] { transition: opacity var(--b-duration-slow) var(--b-ease-out), translate var(--b-duration-slow) var(--b-ease-out); }
+  }
+
+  /* A backplate: glass put on any one element — SwiftUI's glassBackgroundEffect.
+     Blur behind, a lit top edge, a soft shadow, the system radius. */
+  .b-backplate {
+    background: var(--b-material-regular-bg);
+    -webkit-backdrop-filter: var(--b-glass);
+    backdrop-filter: var(--b-glass);
+    border-radius: var(--b-radius-xl);
+    box-shadow: var(--b-glass-edge), var(--b-shadow-md);
+  }
 }

package/dist/index.cjs

@@ -314,9 +314,14 @@ __export(index_exports, {
   block: () => block,
   buttonClasses: () => buttonClasses,
   cn: () => cn,
+  haptic: () => haptic,
   iconNames: () => iconNames,
   useBaruaTheme: () => useBaruaTheme,
-  useToast: () => useToast
+  usePersistedState: () => usePersistedState,
+  useScrollGeometry: () => useScrollGeometry,
+  useSnapPosition: () => useSnapPosition,
+  useToast: () => useToast,
+  useVisible: () => useVisible
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2617,6 +2622,194 @@ var ContextMenuTarget = (0, import_react21.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component, { ref, "data-b-contextmenu": menu, ...rest, children });
   }
 );
+
+// src/scroll.tsx
+var import_react22 = require("react");
+function readGeometry(el) {
+  const page = !el || el === document.documentElement || el === document.body;
+  const box = page ? document.documentElement : el;
+  const x = page ? window.scrollX : el.scrollLeft;
+  const y = page ? window.scrollY : el.scrollTop;
+  const width = box.clientWidth, height = box.clientHeight;
+  const contentWidth = box.scrollWidth, contentHeight = box.scrollHeight;
+  return {
+    x,
+    y,
+    width,
+    height,
+    contentWidth,
+    contentHeight,
+    progressX: contentWidth > width ? Math.min(1, x / (contentWidth - width)) : 0,
+    progressY: contentHeight > height ? Math.min(1, y / (contentHeight - height)) : 0
+  };
+}
+function useScrollGeometry(ref, onChange) {
+  const [geometry, setGeometry] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
+    const el = ref?.current ?? null;
+    const page = !el || el === document.documentElement || el === document.body;
+    const target = page ? window : el;
+    let queued = false;
+    const flush = () => {
+      queued = false;
+      const g = readGeometry(el);
+      setGeometry(g);
+      onChange?.(g);
+    };
+    const on = () => {
+      if (!queued) {
+        queued = true;
+        requestAnimationFrame(flush);
+      }
+    };
+    target.addEventListener("scroll", on, { passive: true });
+    const ro = !page && "ResizeObserver" in window ? new ResizeObserver(on) : null;
+    if (ro && el) ro.observe(el);
+    else window.addEventListener("resize", on);
+    flush();
+    return () => {
+      target.removeEventListener("scroll", on);
+      if (ro) ro.disconnect();
+      else window.removeEventListener("resize", on);
+    };
+  }, [ref?.current]);
+  return geometry;
+}
+function useVisible(ref, { threshold = 0.5 } = {}) {
+  const [visible, setVisible] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!("IntersectionObserver" in window)) {
+      setVisible(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          setVisible(threshold === 0 ? entry.isIntersecting : entry.intersectionRatio >= threshold);
+        }
+      },
+      { threshold: threshold === 0 ? [0] : [0, threshold] }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [ref.current, threshold]);
+  return visible;
+}
+function useSnapPosition(ref) {
+  const [current, setCurrent] = (0, import_react22.useState)({ id: null, index: -1 });
+  const items = (0, import_react22.useCallback)(() => ref.current ? Array.from(ref.current.children).filter((c) => !c.hidden) : [], [ref]);
+  (0, import_react22.useEffect)(() => {
+    const box = ref.current;
+    if (!box) return;
+    const announce = (el) => {
+      if (!el) return;
+      const list = items();
+      const index = list.indexOf(el);
+      if (index >= 0) setCurrent({ id: el.id || null, index });
+    };
+    const nearest = () => {
+      const list = items();
+      const horizontal = box.scrollWidth > box.clientWidth;
+      const origin = box.getBoundingClientRect();
+      let best = null, distance = Infinity;
+      for (const c of list) {
+        const r = c.getBoundingClientRect();
+        const d = Math.abs(horizontal ? r.left - origin.left : r.top - origin.top);
+        if (d < distance) {
+          distance = d;
+          best = c;
+        }
+      }
+      return best;
+    };
+    let timer;
+    const native = "onscrollsnapchange" in box;
+    const onSnap = (e) => {
+      const ev = e;
+      announce(ev.snapTargetInline || ev.snapTargetBlock);
+    };
+    const settle = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => announce(nearest()), 90);
+    };
+    if (native) box.addEventListener("scrollsnapchange", onSnap);
+    else box.addEventListener("onscrollend" in box ? "scrollend" : "scroll", settle, { passive: true });
+    announce(nearest());
+    return () => {
+      box.removeEventListener("scrollsnapchange", onSnap);
+      box.removeEventListener("scrollend", settle);
+      box.removeEventListener("scroll", settle);
+      clearTimeout(timer);
+    };
+  }, [ref.current]);
+  const to = (0, import_react22.useCallback)(
+    (target) => {
+      const list = items();
+      const el = typeof target === "number" ? list[target] : list.find((c) => c.id === target);
+      el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+    },
+    [items]
+  );
+  return { ...current, to };
+}
+var HAPTICS = {
+  selection: [8],
+  impact: [16],
+  success: [10, 30, 20],
+  warning: [25, 40, 25],
+  error: [40, 30, 40, 30, 60]
+};
+function haptic(kind = "selection") {
+  if (typeof navigator === "undefined") return false;
+  if (typeof navigator.vibrate === "function") {
+    navigator.vibrate(HAPTICS[kind]);
+    return true;
+  }
+  if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
+    let sw = document.getElementById("b-haptic-switch");
+    if (!sw) {
+      sw = document.createElement("input");
+      sw.type = "checkbox";
+      sw.id = "b-haptic-switch";
+      sw.tabIndex = -1;
+      sw.setAttribute("switch", "");
+      sw.setAttribute("aria-hidden", "true");
+      sw.style.cssText = "position:fixed;inset:auto auto 0 0;width:1px;height:1px;opacity:0;pointer-events:none";
+      document.body.appendChild(sw);
+    }
+    sw.click();
+    return true;
+  }
+  return false;
+}
+var PERSIST = "barua-persist:";
+function usePersistedState(key, initial) {
+  const [value, setValue] = (0, import_react22.useState)(() => {
+    if (typeof window === "undefined") return initial;
+    try {
+      const raw = localStorage.getItem(PERSIST + key);
+      return raw === null ? initial : JSON.parse(raw);
+    } catch {
+      return initial;
+    }
+  });
+  const set = (0, import_react22.useCallback)(
+    (next) => {
+      setValue((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        try {
+          localStorage.setItem(PERSIST + key, JSON.stringify(resolved));
+        } catch {
+        }
+        return resolved;
+      });
+    },
+    [key]
+  );
+  return [value, set];
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2912,8 +3105,13 @@ var ContextMenuTarget = (0, import_react21.forwardRef)(
   block,
   buttonClasses,
   cn,
+  haptic,
   iconNames,
   useBaruaTheme,
-  useToast
+  usePersistedState,
+  useScrollGeometry,
+  useSnapPosition,
+  useToast,
+  useVisible
 });
 //# sourceMappingURL=index.cjs.map