@hogoshi/ui 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@hogoshi/tokens": "^0.1.1",
+    "@hogoshi/tokens": "^0.1.2",
     "@hugeicons-pro/core-duotone-rounded": "^4.2.2",
     "@hugeicons-pro/core-solid-rounded": "^4.2.2",
     "@hugeicons-pro/core-stroke-rounded": "^4.2.2",

package/src/components/navbar.tsx

@@ -21,7 +21,7 @@ export function TopBar({ contained = false, children, className }: { contained?:
     const root = document.querySelector("[data-scroll-root]");
     const read = () => {
       const top = root instanceof HTMLElement ? root.scrollTop : window.scrollY;
-      setCompact(top > 24);
+      setCompact((current) => (current ? top > 8 : top > 24));
     };
     read();
     const target: EventTarget = root instanceof HTMLElement ? root : window;
@@ -30,13 +30,13 @@ export function TopBar({ contained = false, children, className }: { contained?:
   }, []);
 
   return (
-    <header className={cn("pointer-events-none inset-x-0 top-0 z-[var(--z-sticky)] flex justify-center", contained ? "absolute" : "fixed", className)}>
+    <header className={cn("pointer-events-none inset-x-0 top-0 z-[var(--z-sticky)]", contained ? "absolute" : "fixed", className)}>
       <div
         className={cn(
-          "pointer-events-auto flex items-center transition-[width,height,margin,border-radius,background-color,border-color,box-shadow] duration-500 ease-[var(--motion-ease)] motion-reduce:transition-none",
+          "pointer-events-auto relative mx-auto flex h-12 items-center border transition-[width,translate,border-radius,background-color,border-color,box-shadow] duration-[calc(var(--motion-duration)*4)] ease-[var(--motion-ease)]",
           compact
-            ? "border-border bg-bg-elevated mt-[calc(var(--safe-top)+0.75rem)] h-12 w-[min(40rem,calc(100%-1.5rem))] rounded-full border px-2 shadow-[var(--shadow-md)]"
-            : "mt-[calc(var(--safe-top)+0.5rem)] h-14 w-full border border-transparent bg-transparent px-3",
+            ? "border-border bg-bg-elevated w-[min(40rem,calc(100%-max(0.75rem,var(--safe-left))-max(0.75rem,var(--safe-right))))] translate-y-[calc(var(--safe-top)+0.75rem)] rounded-full px-2 shadow-[var(--shadow-md)]"
+            : "before:pointer-events-auto w-full translate-y-[var(--safe-top)] border-transparent bg-transparent pl-[max(0.75rem,var(--safe-left))] pr-[max(0.75rem,var(--safe-right))] before:absolute before:inset-x-0 before:bottom-full before:h-[var(--safe-top)] before:content-['']",
         )}
       >
         <Navbar className="relative h-full w-full bg-transparent px-1 shadow-none backdrop-blur-none">{children}</Navbar>

package/src/components/sidebar.tsx

@@ -154,7 +154,7 @@ export function BottomBar({ className, children, ...props }: ComponentProps<"nav
   return (
     <nav
       className={cn(
-        "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-2 left-[max(0.75rem,var(--safe-left))] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
+        "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-[max(0.5rem,var(--safe-bottom))] left-[max(0.75rem,var(--safe-left))] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
         className,
       )}
       {...props}

package/src/components/smooth-scroll.tsx

@@ -33,8 +33,7 @@ function markScrolling(element: Element) {
 
 function motionAllowed() {
   const motion = document.documentElement.getAttribute("data-motion");
-  if (motion === "off" || motion === "reduced") return false;
-  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  return motion !== "off" && motion !== "reduced";
 }
 
 function stop(element: Element) {

package/src/components/theme-toggle.tsx

@@ -38,6 +38,41 @@ function freeze(media: HTMLVideoElement | HTMLCanvasElement, copy: Element) {
   copy.replaceWith(canvas);
 }
 
+function lockScroll() {
+  const root = document.querySelector("[data-scroll-root]");
+  if (root instanceof HTMLElement) {
+    const top = root.scrollTop;
+    const left = root.scrollLeft;
+    return () => {
+      root.scrollTop = top;
+      root.scrollLeft = left;
+    };
+  }
+  const top = window.scrollY;
+  const left = window.scrollX;
+  const body = document.body;
+  const prev = {
+    position: body.style.position,
+    top: body.style.top,
+    left: body.style.left,
+    right: body.style.right,
+    width: body.style.width,
+  };
+  body.style.position = "fixed";
+  body.style.top = `-${top}px`;
+  body.style.left = "0";
+  body.style.right = "0";
+  body.style.width = "100%";
+  return () => {
+    body.style.position = prev.position;
+    body.style.top = prev.top;
+    body.style.left = prev.left;
+    body.style.right = prev.right;
+    body.style.width = prev.width;
+    window.scrollTo(left, top);
+  };
+}
+
 function holdPage() {
   const root = document.documentElement;
   root.setAttribute("data-theme-switching", "");
@@ -160,9 +195,7 @@ export function ThemeToggle({
     if (switching) return;
     const root = document.documentElement;
     const next = root.getAttribute("data-mode") === "dark" ? "light" : "dark";
-    const reduce =
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches || root.getAttribute("data-motion") === "off";
-    if (reduce) {
+    if (root.getAttribute("data-motion") === "off") {
       swap(next);
       return;
     }
@@ -172,8 +205,10 @@ export function ThemeToggle({
     const current = next === "dark" ? "light" : "dark";
     const inward = next === "dark";
     const layer = snapshot(inward ? current : next);
+    const unlock = lockScroll();
     const finish = () => {
       layer.remove();
+      unlock();
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           release();

package/src/styles.css

@@ -61,6 +61,8 @@ body {
   color: var(--fg);
   font-family: var(--font-sans);
   font-size: var(--text-base);
+  min-height: 100%;
+  min-height: 100dvh;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
@@ -328,11 +330,6 @@ nav,
   to { opacity: 1; transform: scale(1); }
 }
 
-html[data-theme-switching],
-html[data-theme-switching] body {
-  overflow: hidden !important;
-}
-
 html[data-theme-switching] body {
   pointer-events: none !important;
 }
@@ -432,12 +429,3 @@ button.hogoshi-grab:disabled {
   z-index: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 1ms !important;
-  }
-}