@boyernick/standard-ui-react 0.4.2-canary.52 → 0.4.2-canary.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.52",
+  "version": "0.4.2-canary.54",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/icons.tsx

@@ -1,6 +1,9 @@
 "use client"
 
-import type { CentralIconBaseProps } from "@central-icons-react/round-outlined-radius-2-stroke-2/CentralIconBase"
+import {
+  CentralIconBase,
+  type CentralIconBaseProps,
+} from "@central-icons-react/round-outlined-radius-2-stroke-2/CentralIconBase"
 import { IconArrowDown as IconArrowDownBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconArrowDown"
 import { IconBell as IconBellBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconBell"
 import { IconCalendar1 as IconCalendar1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCalendar1"
@@ -63,6 +66,32 @@ export const withCentralIconDefaults = (
 }
 
 export const IconArrowDown = withCentralIconDefaults(IconArrowDownBase)
+
+/**
+ * Central ships a Small cut of the cross and the chevrons but not of the down
+ * arrow, whose full-size glyph is 16 units tall and outweighs IconCrossSmall
+ * beside it. Drawn on Central's base with the same 2px round stroke, 9 × 12
+ * units: a touch larger than the cross's 8 × 8 so it holds its own.
+ */
+const IconArrowDownSmallBase = (props: CentralIconBaseProps) => (
+  <CentralIconBase
+    {...props}
+    ariaLabel="arrow-down-small, download"
+    maskId="round-outlined-radius-2-stroke-2-IconArrowDownSmall"
+  >
+    <path
+      d="M12 6V18M7.5 13.5L12 18L16.5 13.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </CentralIconBase>
+)
+
+export const IconArrowDownSmall = withCentralIconDefaults(
+  IconArrowDownSmallBase,
+)
 export const IconBell = withCentralIconDefaults(IconBellBase)
 export const IconCalendar1 = withCentralIconDefaults(IconCalendar1Base)
 export const IconChainLink1 = withCentralIconDefaults(IconChainLink1Base)
@@ -124,6 +153,7 @@ export const iconGallery = [
   { name: "IconPlus", Icon: IconPlus },
   { name: "IconMinus", Icon: IconMinus },
   { name: "IconCrossSmall", Icon: IconCrossSmall },
+  { name: "IconArrowDownSmall", Icon: IconArrowDownSmall },
   { name: "IconX", Icon: IconX },
   { name: "IconCheckmark1", Icon: IconCheckmark1 },
   { name: "IconChevronBottom", Icon: IconChevronBottom },

package/src/index.ts

@@ -967,6 +967,7 @@ export {
   withCentralIconDefaults,
   iconGallery,
   IconArrowDown,
+  IconArrowDownSmall,
   IconBell,
   IconCalendar1,
   IconChainLink1,

package/src/modal.tsx

@@ -31,7 +31,7 @@ import {
   DialogTrigger,
 } from "./dialog"
 import {
-  IconArrowDown,
+  IconArrowDownSmall,
   IconChevronRightSmall,
   IconCrossSmall,
 } from "./icons"
@@ -174,15 +174,39 @@ const ModalImage = ({
 }: Pick<GalleryItem, "src" | "alt" | "imgProps"> & {
   fit?: "viewport" | "contain"
 }) => {
-  const { className, ...props } = imgProps ?? {}
+  const { className, onLoad, onError, ...props } = imgProps ?? {}
+  // Held transparent until decoded, then faded in: a large file otherwise
+  // paints in top-down bands inside the lightbox. The ref catches an image the
+  // browser already has (a cached file, or the one the trigger just showed)
+  // before first paint, so it appears at once with nothing to fade.
+  const [loaded, setLoaded] = useState(false)
+  const catchLoaded = useCallback((image: HTMLImageElement | null) => {
+    if (image?.complete && image.naturalWidth > 0) setLoaded(true)
+  }, [])
 
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
+      ref={catchLoaded}
       src={src}
       alt={alt}
       draggable={false}
+      onLoad={(event) => {
+        onLoad?.(event)
+        event.currentTarget
+          .decode()
+          .catch(() => {})
+          .then(() => setLoaded(true))
+      }}
+      onError={(event) => {
+        onError?.(event)
+        // Reveal the broken image rather than leave an invisible one.
+        setLoaded(true)
+      }}
       className={cn(
+        // Linear, like every fade in `motion` — see the note there.
+        "transition-opacity duration-[var(--duration-lg)] ease-linear motion-reduce:transition-none",
+        !loaded && "opacity-0",
         "rounded-lg object-contain shadow-lg select-none",
         fit === "contain"
           ? "max-h-full max-w-full"
@@ -233,10 +257,12 @@ const ModalDownload = ({
           iconOnly: true,
         }),
         modalControlClassName,
-        "absolute top-4 right-4 z-20",
+        // Download sits top-left and Close top-right, where dismissal is
+        // expected; the gallery's previous/next arrows stay vertically centred.
+        "absolute top-4 left-4 z-20",
       )}
     >
-      <IconArrowDown aria-hidden />
+      <IconArrowDownSmall aria-hidden />
     </a>
   </ModalControlTooltip>
 )
@@ -254,7 +280,7 @@ const ModalDismiss = () => (
           aria-label="Close image"
           className={cn(
             modalControlClassName,
-            "absolute top-4 left-4 z-20",
+            "absolute top-4 right-4 z-20",
           )}
         />
       }