@hogoshi/ui 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "repository": {
     "type": "git",

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/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>