@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/esm/views/ImageGrid.mjs

@@ -1,10 +1,11 @@
 import { AsyncBoundary, resolveAsyncStatus } from "../layouts/AsyncBoundary.mjs";
 import { Skeleton } from "../Skeleton/index.mjs";
+import { useDirection } from "../hooks/useDirection.mjs";
 import { Spinner } from "@multiplatform.one/forms";
-import { getLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { getLayoutSizeClass, keyboardFocusRingProps, ensureKeyboardModalityTracking, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n.mjs";
 import { View, XStack, YStack, getTokenValue, useWindowDimensions } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ImageGridSkeleton({
@@ -31,6 +32,63 @@ function ImageGridSkeleton({
     }, i))
   });
 }
+function ImageGridTile({
+  id,
+  isFocused,
+  showRing,
+  clickable,
+  cellPadding,
+  columns,
+  colIndex,
+  rowIndex,
+  radius,
+  radiusClassName,
+  onPress,
+  children
+}) {
+  const [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */jsx(View, {
+    width: `${100 / columns}%`,
+    padding: cellPadding,
+    role: "presentation",
+    children: /* @__PURE__ */jsxs(View, {
+      id,
+      ...{
+        role: "gridcell"
+      },
+      "aria-colindex": colIndex,
+      "aria-rowindex": rowIndex,
+      "aria-selected": isFocused,
+      "data-focused": isFocused || void 0,
+      position: "relative",
+      borderRadius: radius,
+      ...(radiusClassName ? {
+        className: radiusClassName
+      } : {}),
+      cursor: clickable ? "pointer" : void 0,
+      ...(showRing ? keyboardFocusRingProps : {
+        outlineWidth: 0
+      }),
+      ...{
+        onHoverIn: () => setHovered(true),
+        onHoverOut: () => setHovered(false)
+      },
+      onPress,
+      children: [/* @__PURE__ */jsx(View, {
+        borderRadius: radius,
+        overflow: "hidden",
+        children
+      }), hovered && !showRing ? /* @__PURE__ */jsx(View, {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        backgroundColor: "$color12",
+        opacity: 0.08,
+        borderRadius: radius
+      }) : null]
+    })
+  });
+}
 function ImageGrid({
   items,
   renderItem,
@@ -55,6 +113,7 @@ function ImageGrid({
   const {
     knobProps
   } = useResolvedKnobs();
+  const isRTL = useDirection() === "rtl";
   const {
     width: windowWidth
   } = useWindowDimensions();
@@ -71,6 +130,11 @@ function ImageGrid({
   const containerRef = useRef(null);
   const sentinelRef = useRef(null);
   const [focusedIndex, setFocusedIndex] = useState(-1);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(prev => prev < 0 ? 0 : prev);
+  }, []);
   const gapToken = knobProps.gap.gap;
   const gutter = typeof gapToken === "number" ? gapToken : getTokenValue(gapToken, "space") ?? 16;
   const cellPadding = gutter / 2;
@@ -81,59 +145,42 @@ function ImageGrid({
       });
     }
   }, [gridId, items.length]);
-  const hotkeyOpts = {
-    target: containerRef
-  };
-  useHotkey(hotkeyOverrides?.right ?? "ArrowRight", () => {
-    setFocusedIndex(prev => {
-      if (prev < 0) return 0;
-      const col = prev % columns;
-      if (col < columns - 1 && prev + 1 < items.length) {
-        const next = prev + 1;
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
-  }, hotkeyOpts);
-  useHotkey(hotkeyOverrides?.left ?? "ArrowLeft", () => {
+  const moveFocus = useCallback(delta => {
     setFocusedIndex(prev => {
-      if (prev < 0) return 0;
-      const col = prev % columns;
-      if (col > 0) {
-        const next = prev - 1;
-        scrollToIndex(next);
-        return next;
+      if (items.length === 0) return prev;
+      if (prev < 0) {
+        scrollToIndex(0);
+        return 0;
       }
-      return prev;
+      const next = Math.max(0, Math.min(items.length - 1, prev + delta));
+      scrollToIndex(next);
+      return next;
     });
-  }, hotkeyOpts);
-  useHotkey(hotkeyOverrides?.down ?? "ArrowDown", () => {
-    setFocusedIndex(prev => {
-      if (prev < 0) return 0;
-      const next = prev + columns;
-      if (next < items.length) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
-  }, hotkeyOpts);
-  useHotkey(hotkeyOverrides?.up ?? "ArrowUp", () => {
-    setFocusedIndex(prev => {
-      if (prev < 0) return 0;
-      const next = prev - columns;
-      if (next >= 0) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
-  }, hotkeyOpts);
-  useHotkey(hotkeyOverrides?.select ?? "Enter", () => {
+  }, [items.length, scrollToIndex]);
+  const hotkeyOpts = {
+    target: containerRef
+  };
+  useHotkey(hotkeyOverrides?.right ?? "ArrowRight", () => moveFocus(isRTL ? -1 : 1), hotkeyOpts);
+  useHotkey(hotkeyOverrides?.left ?? "ArrowLeft", () => moveFocus(isRTL ? 1 : -1), hotkeyOpts);
+  useHotkey(hotkeyOverrides?.down ?? "ArrowDown", () => moveFocus(columns), hotkeyOpts);
+  useHotkey(hotkeyOverrides?.up ?? "ArrowUp", () => moveFocus(-columns), hotkeyOpts);
+  const activateFocused = useCallback(() => {
     if (focusedIndex >= 0 && focusedIndex < items.length) {
       onItemClick?.(items[focusedIndex]);
     }
+  }, [focusedIndex, items, onItemClick]);
+  useHotkey(hotkeyOverrides?.select ?? "Enter", activateFocused, hotkeyOpts);
+  useHotkey("Space", activateFocused, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.first ?? "Home", () => {
+    if (items.length === 0) return;
+    setFocusedIndex(0);
+    scrollToIndex(0);
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.last ?? "End", () => {
+    if (items.length === 0) return;
+    const last = items.length - 1;
+    setFocusedIndex(last);
+    scrollToIndex(last);
   }, hotkeyOpts);
   useEffect(() => {
     if (height !== void 0 || !onLoadMore || !hasMore || isLoading) return;
@@ -150,13 +197,26 @@ function ImageGrid({
     error
   }) === "error";
   const effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
+  const showKeyboardRing = effectiveFocused >= 0 && wasKeyboardFocus();
+  const rowCount = Math.ceil(items.length / columns);
+  const radius = knobProps.borderRadius.borderRadius;
+  const radiusClassName = knobProps.borderRadius.className;
   const gridBody = items.length === 0 ? null : /* @__PURE__ */jsxs(View, {
     ref: containerRef,
     role: "grid",
     "aria-label": t("Image grid"),
+    "aria-colcount": columns,
+    "aria-rowcount": rowCount,
     "aria-activedescendant": effectiveFocused >= 0 ? `${gridId}-item-${effectiveFocused}` : void 0,
     tabIndex: 0,
     outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    onFocus: handleContainerFocus,
     ...(height !== void 0 ? {
       style: {
         height,
@@ -169,32 +229,37 @@ function ImageGrid({
         }
       } : void 0
     } : null),
-    children: [/* @__PURE__ */jsx(XStack, {
-      flexWrap: "wrap",
+    children: [/* @__PURE__ */jsx(YStack, {
       margin: -cellPadding,
-      children: items.map((item, index) => {
-        const isFocused = effectiveFocused === index;
-        return /* @__PURE__ */jsx(View, {
-          id: `${gridId}-item-${index}`,
-          "data-focused": isFocused || void 0,
-          width: `${100 / columns}%`,
-          padding: cellPadding,
-          backgroundColor: isFocused ? "$accentBackground" : void 0,
-          borderRadius: isFocused ? knobProps.borderRadius.borderRadius : void 0,
-          cursor: onItemClick ? "pointer" : void 0,
-          onPress: onItemClick ? () => {
-            setFocusedIndex(index);
-            onItemClick(item);
-          } : void 0,
-          children: /* @__PURE__ */jsx(View, {
-            borderRadius: knobProps.borderRadius.borderRadius,
-            ...(knobProps.borderRadius.className ? {
-              className: knobProps.borderRadius.className
-            } : {}),
-            overflow: "hidden",
-            children: renderItem(item)
+      children: Array.from({
+        length: rowCount
+      }, (_, row) => {
+        const start = row * columns;
+        const rowItems = items.slice(start, start + columns);
+        return /* @__PURE__ */jsx(XStack, {
+          role: "row",
+          children: rowItems.map((item, col) => {
+            const index = start + col;
+            const isFocused = effectiveFocused === index;
+            return /* @__PURE__ */jsx(ImageGridTile, {
+              id: `${gridId}-item-${index}`,
+              isFocused,
+              showRing: isFocused && showKeyboardRing,
+              clickable: Boolean(onItemClick),
+              cellPadding,
+              columns,
+              colIndex: col + 1,
+              rowIndex: row + 1,
+              radius,
+              radiusClassName,
+              onPress: onItemClick ? () => {
+                setFocusedIndex(index);
+                onItemClick(item);
+              } : void 0,
+              children: renderItem(item)
+            }, `${gridId}-item-${index}`);
           })
-        }, `${gridId}-item-${index}`);
+        }, `${gridId}-row-${row}`);
       })
     }), isLoading && items.length > 0 && /* @__PURE__ */jsx(YStack, {
       padding: "$2",

package/dist/esm/views/ImageGrid.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["AsyncBoundary","resolveAsyncStatus","Skeleton","Spinner","getLayoutSizeClass","useResolvedKnobs","useHotkey","useCallback","useEffect","useId","useRef","useState","useTranslation","View","XStack","YStack","getTokenValue","useWindowDimensions","jsx","jsxs","ImageGridSkeleton","columns","cellPadding","loadingLabel","flexWrap","margin","children","Array","from","length","map","_","i","width","padding","variant","aspectRatio","ImageGrid","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","error","onRetry","columnsProp","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","emptyMessageProp","hotkeys","hotkeyOverrides","stackProps","t","knobProps","windowWidth","columnsBySizeClass","compact","medium","expanded","large","xl","gridId","containerRef","sentinelRef","focusedIndex","setFocusedIndex","gapToken","gap","gutter","scrollToIndex","index","document","getElementById","scrollIntoView","block","hotkeyOpts","target","right","prev","col","next","left","down","up","select","IntersectionObserver","el","current","observer","entries","some","entry","isIntersecting","observe","disconnect","hasError","effectiveFocused","gridBody","ref","role","tabIndex","outlineWidth","style","overflowY","onScroll","scrollTop","clientHeight","scrollHeight","item","isFocused","id","backgroundColor","borderRadius","cursor","onPress","className","overflow","alignItems","size","errorTitle","emptyTitle","loading","empty"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["AsyncBoundary","resolveAsyncStatus","Skeleton","useDirection","Spinner","getLayoutSizeClass","keyboardFocusRingProps","ensureKeyboardModalityTracking","useResolvedKnobs","wasKeyboardFocus","useHotkey","useCallback","useEffect","useId","useRef","useState","useTranslation","View","XStack","YStack","getTokenValue","useWindowDimensions","jsx","jsxs","ImageGridSkeleton","columns","cellPadding","loadingLabel","flexWrap","margin","children","Array","from","length","map","_","i","width","padding","variant","aspectRatio","ImageGridTile","id","isFocused","showRing","clickable","colIndex","rowIndex","radius","radiusClassName","onPress","hovered","setHovered","role","position","borderRadius","className","cursor","outlineWidth","onHoverIn","onHoverOut","overflow","inset","pointerEvents","backgroundColor","opacity","ImageGrid","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","error","onRetry","columnsProp","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","emptyMessageProp","hotkeys","hotkeyOverrides","stackProps","t","knobProps","isRTL","windowWidth","columnsBySizeClass","compact","medium","expanded","large","xl","gridId","containerRef","sentinelRef","focusedIndex","setFocusedIndex","document","handleContainerFocus","prev","gapToken","gap","gutter","scrollToIndex","index","getElementById","scrollIntoView","block","moveFocus","delta","next","Math","max","min","hotkeyOpts","target","right","left","down","up","activateFocused","select","first","last","IntersectionObserver","el","current","observer","entries","some","entry","isIntersecting","observe","disconnect","hasError","effectiveFocused","showKeyboardRing","rowCount","ceil","gridBody","ref","tabIndex","focusStyle","focusVisibleStyle","onFocus","style","overflowY","onScroll","scrollTop","clientHeight","scrollHeight","row","start","rowItems","slice","item","col","Boolean","alignItems","size","errorTitle","emptyTitle","loading","empty"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/views/ImageGrid.native.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AsyncBoundary, resolveAsyncStatus } from "../layouts/AsyncBoundary.native.js";
 import { Skeleton } from "../Skeleton/index.native.js";
+import { useDirection } from "../hooks/useDirection.native.js";
 import { Spinner } from "@multiplatform.one/forms";
-import { getLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { getLayoutSizeClass, keyboardFocusRingProps, ensureKeyboardModalityTracking, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n.native.js";
 import { View, XStack, YStack, getTokenValue, useWindowDimensions } from "tamagui";
 function ImageGridSkeleton(param) {
   var {
@@ -34,6 +35,76 @@ function ImageGridSkeleton(param) {
     })
   });
 }
+function ImageGridTile(param) {
+  var {
+    id,
+    isFocused,
+    showRing,
+    clickable,
+    cellPadding,
+    columns,
+    colIndex,
+    rowIndex,
+    radius,
+    radiusClassName,
+    onPress,
+    children
+  } = param;
+  var [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */_jsx(View, {
+    width: `${100 / columns}%`,
+    padding: cellPadding,
+    role: "presentation",
+    children: /* @__PURE__ */_jsxs(View, {
+      id,
+      // "gridcell" is a valid ARIA role but outside RN's `Role` union;
+      // forwarded to the DOM node on web (house Record cast).
+      ...{
+        role: "gridcell"
+      },
+      "aria-colindex": colIndex,
+      "aria-rowindex": rowIndex,
+      "aria-selected": isFocused,
+      "data-focused": isFocused || void 0,
+      position: "relative",
+      borderRadius: radius,
+      ...(radiusClassName ? {
+        className: radiusClassName
+      } : {}),
+      cursor: clickable ? "pointer" : void 0,
+      ...(showRing ? keyboardFocusRingProps : {
+        outlineWidth: 0
+      }),
+      // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
+      // View prop type omits them (house Record cast).
+      ...{
+        onHoverIn: function onHoverIn() {
+          return setHovered(true);
+        },
+        onHoverOut: function onHoverOut() {
+          return setHovered(false);
+        }
+      },
+      onPress,
+      children: [
+      /* Clip media to the radius; keep overflow off the ring node so
+      LC-71 outline is not severed (same split as Input.Box). */
+      /* @__PURE__ */
+      _jsx(View, {
+        borderRadius: radius,
+        overflow: "hidden",
+        children
+      }), hovered && !showRing ? /* @__PURE__ */_jsx(View, {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        backgroundColor: "$color12",
+        opacity: 0.08,
+        borderRadius: radius
+      }) : null]
+    })
+  });
+}
 function ImageGrid(param) {
   var {
     items,
@@ -52,7 +123,7 @@ function ImageGrid(param) {
     hotkeys: hotkeyOverrides,
     ...stackProps
   } = param;
-  var _getTokenValue, _ref, _ref1, _ref2, _ref3, _ref4;
+  var _getTokenValue, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
   var {
     t
   } = useTranslation();
@@ -60,6 +131,7 @@ function ImageGrid(param) {
   var {
     knobProps
   } = useResolvedKnobs();
+  var isRTL = useDirection() === "rtl";
   var {
     width: windowWidth
   } = useWindowDimensions();
@@ -76,6 +148,13 @@ function ImageGrid(param) {
   var containerRef = useRef(null);
   var sentinelRef = useRef(null);
   var [focusedIndex, setFocusedIndex] = useState(-1);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  var handleContainerFocus = useCallback(function () {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(function (prev) {
+      return prev < 0 ? 0 : prev;
+    });
+  }, []);
   var gapToken = knobProps.gap.gap;
   var gutter = typeof gapToken === "number" ? gapToken : (_getTokenValue = getTokenValue(gapToken, "space")) !== null && _getTokenValue !== void 0 ? _getTokenValue : 16;
   var cellPadding = gutter / 2;
@@ -87,59 +166,50 @@ function ImageGrid(param) {
       });
     }
   }, [gridId, items.length]);
+  var moveFocus = useCallback(function (delta) {
+    setFocusedIndex(function (prev) {
+      if (items.length === 0) return prev;
+      if (prev < 0) {
+        scrollToIndex(0);
+        return 0;
+      }
+      var next = Math.max(0, Math.min(items.length - 1, prev + delta));
+      scrollToIndex(next);
+      return next;
+    });
+  }, [items.length, scrollToIndex]);
   var hotkeyOpts = {
     target: containerRef
   };
   useHotkey((_ref = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.right) !== null && _ref !== void 0 ? _ref : "ArrowRight", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var col = prev % columns;
-      if (col < columns - 1 && prev + 1 < items.length) {
-        var next = prev + 1;
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(isRTL ? -1 : 1);
   }, hotkeyOpts);
   useHotkey((_ref1 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.left) !== null && _ref1 !== void 0 ? _ref1 : "ArrowLeft", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var col = prev % columns;
-      if (col > 0) {
-        var next = prev - 1;
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(isRTL ? 1 : -1);
   }, hotkeyOpts);
   useHotkey((_ref2 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.down) !== null && _ref2 !== void 0 ? _ref2 : "ArrowDown", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var next = prev + columns;
-      if (next < items.length) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(columns);
   }, hotkeyOpts);
   useHotkey((_ref3 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.up) !== null && _ref3 !== void 0 ? _ref3 : "ArrowUp", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var next = prev - columns;
-      if (next >= 0) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(-columns);
   }, hotkeyOpts);
-  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", function () {
+  var activateFocused = useCallback(function () {
     if (focusedIndex >= 0 && focusedIndex < items.length) {
       onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(items[focusedIndex]);
     }
+  }, [focusedIndex, items, onItemClick]);
+  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", activateFocused, hotkeyOpts);
+  useHotkey("Space", activateFocused, hotkeyOpts);
+  useHotkey((_ref5 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.first) !== null && _ref5 !== void 0 ? _ref5 : "Home", function () {
+    if (items.length === 0) return;
+    setFocusedIndex(0);
+    scrollToIndex(0);
+  }, hotkeyOpts);
+  useHotkey((_ref6 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.last) !== null && _ref6 !== void 0 ? _ref6 : "End", function () {
+    if (items.length === 0) return;
+    var last = items.length - 1;
+    setFocusedIndex(last);
+    scrollToIndex(last);
   }, hotkeyOpts);
   useEffect(function () {
     if (height !== void 0 || !onLoadMore || !hasMore || isLoading) return;
@@ -160,13 +230,26 @@ function ImageGrid(param) {
     error
   }) === "error";
   var effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
+  var showKeyboardRing = effectiveFocused >= 0 && wasKeyboardFocus();
+  var rowCount = Math.ceil(items.length / columns);
+  var radius = knobProps.borderRadius.borderRadius;
+  var radiusClassName = knobProps.borderRadius.className;
   var gridBody = items.length === 0 ? null : /* @__PURE__ */_jsxs(View, {
     ref: containerRef,
     role: "grid",
     "aria-label": t("Image grid"),
+    "aria-colcount": columns,
+    "aria-rowcount": rowCount,
     "aria-activedescendant": effectiveFocused >= 0 ? `${gridId}-item-${effectiveFocused}` : void 0,
     tabIndex: 0,
     outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    onFocus: handleContainerFocus,
     ...(height !== void 0 ? {
       style: {
         height,
@@ -179,36 +262,37 @@ function ImageGrid(param) {
         }
       } : void 0
     } : null),
-    children: [/* @__PURE__ */_jsx(XStack, {
-      flexWrap: "wrap",
+    children: [/* @__PURE__ */_jsx(YStack, {
       margin: -cellPadding,
-      children: items.map(function (item, index) {
-        var isFocused = effectiveFocused === index;
-        return /* @__PURE__ */_jsx(View, {
-          id: `${gridId}-item-${index}`,
-          "data-focused": isFocused || void 0,
-          width: `${100 / columns}%`,
-          padding: cellPadding,
-          backgroundColor: isFocused ? "$accentBackground" : void 0,
-          borderRadius: isFocused ? knobProps.borderRadius.borderRadius : void 0,
-          cursor: onItemClick ? "pointer" : void 0,
-          onPress: onItemClick ? function () {
-            setFocusedIndex(index);
-            onItemClick(item);
-          } : void 0,
-          children: (
-          /* Cards/media are R-SCALE (spec ImageGrid): the owned card
-          frame rounds with the radius knob and clips the media. */
-          /* @__PURE__ */
-          _jsx(View, {
-            borderRadius: knobProps.borderRadius.borderRadius,
-            ...(knobProps.borderRadius.className ? {
-              className: knobProps.borderRadius.className
-            } : {}),
-            overflow: "hidden",
-            children: renderItem(item)
-          }))
-        }, `${gridId}-item-${index}`);
+      children: Array.from({
+        length: rowCount
+      }, function (_, row) {
+        var start = row * columns;
+        var rowItems = items.slice(start, start + columns);
+        return /* @__PURE__ */_jsx(XStack, {
+          role: "row",
+          children: rowItems.map(function (item, col) {
+            var index = start + col;
+            var isFocused = effectiveFocused === index;
+            return /* @__PURE__ */_jsx(ImageGridTile, {
+              id: `${gridId}-item-${index}`,
+              isFocused,
+              showRing: isFocused && showKeyboardRing,
+              clickable: Boolean(onItemClick),
+              cellPadding,
+              columns,
+              colIndex: col + 1,
+              rowIndex: row + 1,
+              radius,
+              radiusClassName,
+              onPress: onItemClick ? function () {
+                setFocusedIndex(index);
+                onItemClick(item);
+              } : void 0,
+              children: renderItem(item)
+            }, `${gridId}-item-${index}`);
+          })
+        }, `${gridId}-row-${row}`);
       })
     }), isLoading && items.length > 0 && /* @__PURE__ */_jsx(YStack, {
       padding: "$2",