@hogoshi/ui 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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

@@ -321,7 +321,7 @@ export function ImageGallery({
   const [index, setIndex] = useState(0);
   return (
     <>
-      <div className={cn("grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2", className)}>
+      <div className={cn("grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(100%,8rem),1fr))] gap-2", className)}>
         {images.map((image, at) => (
           <button
             key={`${image.src}-${at}`}

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>