@hogoshi/ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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/collapse-screen-icon.ts

@@ -0,0 +1,16 @@
+import type { IconSvgElement } from "@hugeicons/react";
+
+const stroke = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2.4,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+} as const;
+
+export const CollapseScreenIcon: IconSvgElement = [
+  ["path", { d: "M9 5 V9 H5", ...stroke, key: "0" }],
+  ["path", { d: "M15 5 V9 H19", ...stroke, key: "1" }],
+  ["path", { d: "M9 19 V15 H5", ...stroke, key: "2" }],
+  ["path", { d: "M15 19 V15 H19", ...stroke, key: "3" }],
+];

package/src/components/image-viewer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { FullScreenIcon } from "@hugeicons-pro/core-solid-rounded";
 import {
   ArrowLeft01Icon,
   ArrowRight01Icon,
@@ -23,7 +24,9 @@ import {
 import { cn } from "../lib/cn";
 import { ContextMenuContent, ContextMenuItem, ContextMenuRoot, ContextMenuTrigger } from "./context-menu";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu";
+import { CollapseScreenIcon } from "./collapse-screen-icon";
 import { Icon } from "./icon";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 import { backdropMotion, popupMotion } from "./popup";
 
 export interface ViewerImage {
@@ -317,11 +320,28 @@ export function ImageGallery({
   className?: string;
   imageClassName?: string;
 }) {
+  const root = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [index, setIndex] = useState(0);
+  const [full, setFull] = useState(false);
+  useEffect(() => {
+    const sync = () => setFull(document.fullscreenElement === root.current);
+    document.addEventListener("fullscreenchange", sync);
+    return () => document.removeEventListener("fullscreenchange", sync);
+  }, []);
+  const toggleFull = () => {
+    const node = root.current as (HTMLDivElement & { webkitRequestFullscreen?: () => void }) | null;
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else if (node?.requestFullscreen) void node.requestFullscreen();
+    else node?.webkitRequestFullscreen?.();
+  };
   return (
     <>
-      <div className={cn("grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2", className)}>
+      <div
+        ref={root}
+        className={cn("relative min-w-0 pb-10", full && "bg-bg flex h-full w-full items-center justify-center p-6 pb-16")}
+      >
+      <div className={cn("grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(100%,8rem),1fr))] gap-2", full && "w-full max-w-5xl", className)}>
         {images.map((image, at) => (
           <button
             key={`${image.src}-${at}`}
@@ -346,6 +366,23 @@ export function ImageGallery({
           </button>
         ))}
       </div>
+      <Tooltip>
+        <TooltipTrigger
+          delay={0}
+          render={
+            <button
+              type="button"
+              aria-label={full ? "Exit fullscreen" : "Fullscreen"}
+              className="text-fg-muted hover:bg-bg-muted hover:text-fg absolute right-2 bottom-2 inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)]"
+              onClick={toggleFull}
+            />
+          }
+        >
+          <Icon icon={full ? CollapseScreenIcon : FullScreenIcon} size={16} />
+        </TooltipTrigger>
+        <TooltipContent>{full ? "Exit fullscreen" : "Fullscreen"}</TooltipContent>
+      </Tooltip>
+      </div>
       <ImageViewer images={images} index={index} open={open} onOpenChange={setOpen} onIndexChange={setIndex} />
     </>
   );

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/components/video-player.tsx

@@ -3,7 +3,6 @@
 import {
   Alert02Icon,
   FullScreenIcon,
-  MinimizeScreenIcon,
   PauseIcon,
   PictureInPictureOnIcon,
   PlayIcon,
@@ -23,6 +22,7 @@ import {
   type RefObject,
 } from "react";
 import { cn } from "../lib/cn";
+import { CollapseScreenIcon } from "./collapse-screen-icon";
 import { Icon, type AppIcon } from "./icon";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Slider } from "./slider";
@@ -549,7 +549,7 @@ export function VideoPlayer({
           <Control label="Picture in picture" icon={PictureInPictureOnIcon} onClick={togglePip} />
           <Control
             label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
-            icon={fullscreen ? MinimizeScreenIcon : FullScreenIcon}
+            icon={fullscreen ? CollapseScreenIcon : FullScreenIcon}
             onClick={toggleFullscreen}
           />
         </div>

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;
-  }
-}