@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/module/sortable-media/SortablePhotoGrid.js

@@ -0,0 +1,792 @@
+"use strict";
+
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Image, Platform, Pressable, View } from 'react-native';
+import { Button } from '../button';
+import { mixColor, resolveButtonRamps } from "../button/shared.js";
+import { FOCUS_RING_OFFSET_COLOR, webDataSet } from "../checkbox/shared.js";
+import { resolveMenuPalette } from "../floating/menu-palette.js";
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiArrowLeftSLine } from "../icons/remix/RiArrowLeftSLine.js";
+import { RiArrowRightSLine } from "../icons/remix/RiArrowRightSLine.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { RiErrorWarningLine } from "../icons/remix/RiErrorWarningLine.js";
+import { RiImageAddLine } from "../icons/remix/RiImageAddLine.js";
+import { useImageResolver } from "../image-resolver/context.js";
+import { resolvePhoto } from "../listing-card/shared.js";
+import { Loading } from '../loading';
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { moveItem, slotAtPoint, sortableGridColumns } from "./reorder.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * An editable, reorderable grid of uploaded photos. The first photo is the
+ * cover.
+ *
+ *   grid      3 columns below 640 wide, 4 from there (or `columns`); square
+ *             tiles, 12 apart (8 below 480)
+ *   tile      radius 12, placeholder neutral-100 (dark neutral-800) behind the
+ *             photo, which covers the tile
+ *   cover     the first tile's top-left pill: the floating surface,
+ *             caption-1-semibold, 24 tall, full pill
+ *   controls  small secondary icon `Button`s (32): remove top-right, move
+ *             earlier bottom-left, move later bottom-right. On a web pointer
+ *             that can hover they appear while the tile is hovered or holds
+ *             focus; on touch and native they are always shown.
+ *   uploading a neutral-950 scrim at 50%, the percentage (caption-1-semibold)
+ *             over a 4-tall bar 60% of the tile wide, both neutral-50; no
+ *             `progress` draws a spinner instead
+ *   error     the same scrim, a warning glyph, the error line and a Retry
+ *             button when `onRetry` is given
+ *   add       a dashed 1.5px neutral-300 (dark neutral-600) tile with the
+ *             add-photo glyph and "Add photos"; hover fills neutral-50 (dark
+ *             neutral-900)
+ *
+ * Reordering: on web a mouse or pen drags a tile (5px of travel starts the
+ * drag); the other tiles make room live, a lifted copy follows the pointer,
+ * and Escape cancels. Touch and native reorder with the move buttons, which is
+ * also the keyboard and screen-reader path — after a move, focus stays on the
+ * moved photo's button and the new position is announced politely.
+ *
+ * Colour-only hover; no scale.
+ */
+
+const IS_WEB = Platform.OS === 'web';
+const RADIUS = 12;
+const DRAG_THRESHOLD = 5;
+const DEFAULT_LABELS = {
+  photo: (position, total) => `Photo ${position} of ${total}`,
+  cover: 'Cover',
+  moveEarlier: position => `Move photo ${position} earlier`,
+  moveLater: position => `Move photo ${position} later`,
+  remove: position => `Remove photo ${position}`,
+  retry: position => `Retry uploading photo ${position}`,
+  retryAction: 'Retry',
+  uploading: position => `Uploading photo ${position}`,
+  failed: 'Upload failed',
+  add: 'Add photos',
+  moved: (position, total) => `Moved to position ${position} of ${total}`
+};
+const STYLE_ID = 'bloom-sortable-photo-grid-web-css';
+const GRID = '[data-bloom-sortable-grid]';
+const TILE = '[data-bloom-sortable-tile]';
+const CONTROLS = '[data-bloom-sortable-controls]';
+const ADD = '[data-bloom-sortable-add]';
+const CSS = `
+${GRID}[data-bloom-sortable-grid="enabled"] ${TILE} {
+  cursor: grab;
+}
+${GRID}[data-bloom-sortable-grid="dragging"],
+${GRID}[data-bloom-sortable-grid="dragging"] ${TILE} {
+  cursor: grabbing;
+}
+${TILE} {
+  user-select: none;
+  -webkit-user-select: none;
+}
+${TILE} img {
+  -webkit-user-drag: none;
+  user-drag: none;
+}
+${CONTROLS} {
+  transition: opacity 150ms ease-out;
+}
+@media (any-hover: hover) {
+  ${CONTROLS} {
+    opacity: 0;
+  }
+  ${TILE}:hover ${CONTROLS}, ${TILE}:focus-within ${CONTROLS} {
+    opacity: 1;
+  }
+  ${GRID}[data-bloom-sortable-grid="dragging"] ${CONTROLS} {
+    opacity: 0;
+  }
+}
+${ADD} {
+  outline: none;
+  cursor: pointer;
+}
+${ADD}[aria-disabled="true"] {
+  cursor: default;
+}
+${ADD}:focus-visible {
+  box-shadow: 0 0 0 2px ${FOCUS_RING_OFFSET_COLOR}, 0 0 0 4px var(--bloom-sortable-ring, currentColor);
+}
+@media (prefers-reduced-motion: reduce) {
+  ${CONTROLS} {
+    transition: none;
+  }
+}
+`;
+function resolveGridPaint(theme) {
+  const {
+    accent,
+    neutral: n
+  } = resolveButtonRamps(theme);
+  const menu = resolveMenuPalette(theme);
+  const dark = theme.isDark;
+  return {
+    placeholder: dark ? mixColor(n[800], n[700], 0.6) : n[100],
+    scrim: n[950],
+    onMedia: n[50],
+    surface: menu.surface,
+    surfaceText: menu.text,
+    surfaceShadow: menu.shadow,
+    addBorder: dark ? n[600] : n[300],
+    addHover: dark ? n[900] : n[50],
+    addIcon: theme.colors.textSecondary,
+    text: theme.colors.text,
+    textSecondary: theme.colors.textSecondary,
+    slotBorder: dark ? n[600] : n[300],
+    ring: accent[500]
+  };
+}
+function SortablePhotoGridComponent({
+  photos,
+  onReorder,
+  onRemove,
+  onRetry,
+  onAdd,
+  maxPhotos,
+  addHint,
+  columns: columnsProp,
+  photoVariant,
+  disabled = false,
+  labels: labelsProp,
+  accessibilityLabel = 'Photos',
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const resolver = useImageResolver();
+  const paint = useMemo(() => resolveGridPaint(theme), [theme]);
+  const labels = useMemo(() => ({
+    ...DEFAULT_LABELS,
+    ...labelsProp
+  }), [labelsProp]);
+  useEffect(() => {
+    if (IS_WEB) adoptStyleSheet(STYLE_ID, CSS);
+  }, []);
+  const [width, setWidth] = useState(0);
+  const columns = columnsProp ?? sortableGridColumns(width);
+  const gap = width > 0 && width < 480 ? 8 : 12;
+  const cell = width > 0 ? Math.floor((width - gap * (columns - 1)) / columns) : 0;
+  const [drag, setDrag] = useState(null);
+  const [announcement, setAnnouncement] = useState('');
+  const gridRef = useRef(null);
+  const pendingFocus = useRef(null);
+  const latest = useRef({
+    photos,
+    columns,
+    cell,
+    gap,
+    disabled,
+    onReorder,
+    labels
+  });
+  latest.current = {
+    photos,
+    columns,
+    cell,
+    gap,
+    disabled,
+    onReorder,
+    labels
+  };
+
+  // ---------------------------------------------------------------------------
+  //  Web drag: pointer events on the grid element, window listeners while held.
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    if (!IS_WEB) return undefined;
+    const element = gridRef.current;
+    if (!element || typeof element.addEventListener !== 'function') return undefined;
+    let pending = null;
+    const finish = commit => {
+      const current = pending;
+      pending = null;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onCancel);
+      window.removeEventListener('keydown', onKey, true);
+      if (!current?.active) return;
+      setDrag(null);
+      const state = latest.current;
+      if (commit && current.over !== current.from) {
+        state.onReorder(moveItem(state.photos, current.from, current.over));
+        setAnnouncement(state.labels.moved(current.over + 1, state.photos.length));
+      }
+    };
+    const onMove = event => {
+      const current = pending;
+      if (!current) return;
+      if (!current.active) {
+        const travel = Math.hypot(event.clientX - current.startX, event.clientY - current.startY);
+        if (travel < DRAG_THRESHOLD) return;
+        current.active = true;
+      }
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const state = latest.current;
+      current.over = slotAtPoint(x, y, {
+        columns: state.columns,
+        cellWidth: state.cell,
+        cellHeight: state.cell,
+        gap: state.gap,
+        count: state.photos.length
+      });
+      setDrag({
+        id: current.id,
+        from: current.from,
+        over: current.over,
+        x: x - current.offsetX,
+        y: y - current.offsetY
+      });
+    };
+    const onUp = () => finish(true);
+    const onCancel = () => finish(false);
+    const onKey = event => {
+      if (event.key === 'Escape' && pending?.active) {
+        event.preventDefault();
+        event.stopPropagation();
+        finish(false);
+      }
+    };
+    const onPointerDown = event => {
+      const state = latest.current;
+      if (state.disabled || event.button !== 0 || event.pointerType === 'touch') return;
+      const target = event.target;
+      if (!target || typeof target.closest !== 'function') return;
+      if (target.closest('button, a, input, [role="button"]')) return;
+      const tile = target.closest(TILE);
+      if (!tile || !element.contains(tile)) return;
+      const id = tile.getAttribute('data-bloom-sortable-tile');
+      const from = state.photos.findIndex(photo => photo.id === id);
+      if (id == null || from < 0 || state.photos.length < 2) return;
+      event.preventDefault();
+      const tileRect = tile.getBoundingClientRect();
+      pending = {
+        id,
+        from,
+        over: from,
+        startX: event.clientX,
+        startY: event.clientY,
+        offsetX: event.clientX - tileRect.left,
+        offsetY: event.clientY - tileRect.top,
+        active: false
+      };
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onUp);
+      window.addEventListener('pointercancel', onCancel);
+      window.addEventListener('keydown', onKey, true);
+    };
+    element.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
+      finish(false);
+    };
+  }, []);
+
+  // ---------------------------------------------------------------------------
+  //  Move buttons
+  // ---------------------------------------------------------------------------
+  const move = useCallback((id, direction) => {
+    const from = photos.findIndex(photo => photo.id === id);
+    if (from < 0) return;
+    const to = direction === 'earlier' ? from - 1 : from + 1;
+    if (to < 0 || to >= photos.length) return;
+    pendingFocus.current = {
+      id,
+      direction
+    };
+    onReorder(moveItem(photos, from, to));
+    setAnnouncement(labels.moved(to + 1, photos.length));
+  }, [photos, onReorder, labels]);
+
+  // Keep focus on the moved photo's button: the tile has moved in the DOM, and a
+  // button that reached the end of the list is now disabled.
+  useLayoutEffect(() => {
+    const request = pendingFocus.current;
+    if (!IS_WEB || !request) return;
+    pendingFocus.current = null;
+    const element = gridRef.current;
+    if (!element || typeof element.querySelector !== 'function') return;
+    const find = direction => element.querySelector(`[data-bloom-sortable-move="${request.id}:${direction}"] button:not([disabled])`);
+    const other = request.direction === 'earlier' ? 'later' : 'earlier';
+    (find(request.direction) ?? find(other))?.focus();
+  }, [photos]);
+  const shown = drag ? moveItem(photos, drag.from, drag.over) : photos;
+  const total = photos.length;
+  const canAdd = !!onAdd && (maxPhotos === undefined || total < maxPhotos);
+  const dragged = drag ? photos.find(photo => photo.id === drag.id) : undefined;
+  const gridState = drag ? 'dragging' : disabled || total < 2 ? 'static' : 'enabled';
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: style,
+    onLayout: event => setWidth(event.nativeEvent.layout.width),
+    children: [/*#__PURE__*/_jsxs(View, {
+      ref: gridRef,
+      role: "list",
+      accessibilityLabel: accessibilityLabel,
+      ...webDataSet({
+        bloomSortableGrid: gridState
+      }),
+      testID: testID ? `${testID}-grid` : undefined,
+      style: {
+        position: 'relative',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap
+      },
+      children: [cell > 0 ? shown.map((photo, index) => /*#__PURE__*/_jsx(PhotoTile, {
+        photo: photo,
+        position: index + 1,
+        total: total,
+        size: cell,
+        paint: paint,
+        labels: labels,
+        resolvedUri: resolvePhoto(photo.uri, resolver, photoVariant),
+        slot: drag?.id === photo.id,
+        disabled: disabled,
+        onMove: move,
+        onRemove: onRemove,
+        onRetry: onRetry,
+        testID: testID ? `${testID}-photo-${photo.id}` : undefined
+      }, photo.id)) : null, cell > 0 && canAdd ? /*#__PURE__*/_jsx(AddTile, {
+        size: cell,
+        paint: paint,
+        label: labels.add,
+        hint: addHint,
+        disabled: disabled,
+        onPress: onAdd,
+        testID: testID ? `${testID}-add` : undefined
+      }) : null, drag && dragged ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        "aria-hidden": true,
+        testID: testID ? `${testID}-lifted` : undefined,
+        style: {
+          position: 'absolute',
+          left: drag.x,
+          top: drag.y,
+          width: cell,
+          height: cell,
+          borderRadius: RADIUS,
+          overflow: 'hidden',
+          backgroundColor: paint.placeholder,
+          boxShadow: '0 12px 28px rgba(0, 0, 0, 0.28)',
+          zIndex: 2
+        },
+        children: /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: resolvePhoto(dragged.uri, resolver, photoVariant)
+          },
+          style: {
+            width: cell,
+            height: cell
+          },
+          resizeMode: "cover"
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+        opacity: 0
+      },
+      testID: testID ? `${testID}-status` : undefined,
+      children: announcement
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Tiles
+// ---------------------------------------------------------------------------
+
+const PhotoTile = /*#__PURE__*/memo(function PhotoTile({
+  photo,
+  position,
+  total,
+  size,
+  paint,
+  labels,
+  resolvedUri,
+  slot,
+  disabled,
+  onMove,
+  onRemove,
+  onRetry,
+  testID
+}) {
+  const cover = position === 1;
+  const status = photo.status ?? 'uploaded';
+  const nameParts = [labels.photo(position, total)];
+  if (cover) nameParts.push(labels.cover);
+  if (photo.alt) nameParts.push(photo.alt);
+  if (status === 'error') nameParts.push(photo.error ?? labels.failed);
+  const name = nameParts.join(', ');
+  const showControls = !slot && !disabled;
+  return /*#__PURE__*/_jsx(View, {
+    role: "listitem",
+    accessibilityLabel: name,
+    ...webDataSet({
+      bloomSortableTile: photo.id
+    }),
+    testID: testID,
+    style: {
+      width: size,
+      height: size,
+      borderRadius: RADIUS,
+      overflow: 'hidden',
+      backgroundColor: slot ? 'transparent' : paint.placeholder,
+      borderWidth: slot ? 1.5 : 0,
+      borderStyle: 'dashed',
+      borderColor: paint.slotBorder
+    },
+    children: slot ? null : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [resolvedUri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: resolvedUri
+        },
+        accessibilityIgnoresInvertColors: true,
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: size,
+          height: size
+        },
+        resizeMode: "cover"
+      }) : null, status === 'uploading' ? /*#__PURE__*/_jsx(UploadOverlay, {
+        photo: photo,
+        position: position,
+        paint: paint,
+        labels: labels,
+        testID: testID
+      }) : null, status === 'error' ? /*#__PURE__*/_jsx(ErrorOverlay, {
+        photo: photo,
+        position: position,
+        size: size,
+        paint: paint,
+        labels: labels,
+        onRetry: onRetry && !disabled ? () => onRetry(photo.id) : undefined,
+        testID: testID
+      }) : null, cover ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-cover` : undefined,
+        style: {
+          position: 'absolute',
+          top: 8,
+          left: 8,
+          height: 24,
+          paddingLeft: 8,
+          paddingRight: 8,
+          borderRadius: 999,
+          justifyContent: 'center',
+          backgroundColor: paint.surface,
+          boxShadow: paint.surfaceShadow
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-semibold",
+          numberOfLines: 1,
+          style: {
+            color: paint.surfaceText
+          },
+          children: labels.cover
+        })
+      }) : null, showControls ? /*#__PURE__*/_jsxs(View, {
+        pointerEvents: "box-none",
+        ...webDataSet({
+          bloomSortableControls: ''
+        }),
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: [onRemove ? /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            top: 6,
+            right: 6
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            size: "small",
+            iconOnly: true,
+            leadingIcon: RiCloseLine,
+            accessibilityLabel: labels.remove(position),
+            onPress: () => onRemove(photo.id),
+            testID: testID ? `${testID}-remove` : undefined
+          })
+        }) : null, total > 1 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            ...webDataSet({
+              bloomSortableMove: `${photo.id}:earlier`
+            }),
+            style: {
+              position: 'absolute',
+              bottom: 6,
+              left: 6
+            },
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              size: "small",
+              iconOnly: true,
+              leadingIcon: RiArrowLeftSLine,
+              accessibilityLabel: labels.moveEarlier(position),
+              disabled: position === 1,
+              onPress: () => onMove(photo.id, 'earlier'),
+              testID: testID ? `${testID}-earlier` : undefined
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            ...webDataSet({
+              bloomSortableMove: `${photo.id}:later`
+            }),
+            style: {
+              position: 'absolute',
+              bottom: 6,
+              right: 6
+            },
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              size: "small",
+              iconOnly: true,
+              leadingIcon: RiArrowRightSLine,
+              accessibilityLabel: labels.moveLater(position),
+              disabled: position === total,
+              onPress: () => onMove(photo.id, 'later'),
+              testID: testID ? `${testID}-later` : undefined
+            })
+          })]
+        }) : null]
+      }) : null]
+    })
+  });
+});
+function Scrim({
+  paint
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: paint.scrim,
+      opacity: 0.5
+    }
+  });
+}
+function UploadOverlay({
+  photo,
+  position,
+  paint,
+  labels,
+  testID
+}) {
+  const progress = photo.progress == null ? undefined : Math.min(100, Math.max(0, Math.round(photo.progress)));
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [/*#__PURE__*/_jsx(Scrim, {
+      paint: paint
+    }), /*#__PURE__*/_jsx(View, {
+      role: "progressbar",
+      accessibilityLabel: labels.uploading(position),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": progress,
+      "aria-busy": true,
+      testID: testID ? `${testID}-progress` : undefined,
+      style: {
+        width: '60%',
+        alignItems: 'center',
+        gap: 6
+      },
+      children: progress === undefined ? /*#__PURE__*/_jsx(Loading, {
+        variant: "spinner",
+        size: "small",
+        color: paint.onMedia
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-semibold",
+          style: {
+            color: paint.onMedia,
+            fontVariant: ['tabular-nums']
+          },
+          children: `${progress}%`
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignSelf: 'stretch',
+            height: 4,
+            borderRadius: 2,
+            overflow: 'hidden'
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: paint.onMedia,
+              opacity: 0.3
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              width: `${progress}%`,
+              height: 4,
+              backgroundColor: paint.onMedia
+            }
+          })]
+        })]
+      })
+    })]
+  });
+}
+function ErrorOverlay({
+  photo,
+  position,
+  size,
+  paint,
+  labels,
+  onRetry,
+  testID
+}) {
+  const compact = size < 120;
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "box-none",
+    testID: testID ? `${testID}-error` : undefined,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+      paddingLeft: 8,
+      paddingRight: 8
+    },
+    children: [/*#__PURE__*/_jsx(Scrim, {
+      paint: paint
+    }), /*#__PURE__*/_jsx(RiErrorWarningLine, {
+      width: 20,
+      height: 20,
+      fill: paint.onMedia
+    }), compact ? null : /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-medium",
+      numberOfLines: 2,
+      style: {
+        color: paint.onMedia,
+        textAlign: 'center'
+      },
+      children: photo.error ?? labels.failed
+    }), onRetry ? /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      size: "xs",
+      onPress: onRetry,
+      accessibilityLabel: labels.retry(position),
+      testID: testID ? `${testID}-retry` : undefined,
+      children: labels.retryAction
+    }) : null]
+  });
+}
+function AddTile({
+  size,
+  paint,
+  label,
+  hint,
+  disabled,
+  onPress,
+  testID
+}) {
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut
+  } = useInteractionState();
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut
+  } = useInteractionState();
+  const active = !disabled && (hovered || pressed);
+  const compact = size < 120;
+  const tileStyle = {
+    width: size,
+    height: size,
+    borderRadius: RADIUS,
+    borderWidth: 1.5,
+    borderStyle: 'dashed',
+    borderColor: paint.addBorder,
+    backgroundColor: active ? paint.addHover : 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingLeft: 8,
+    paddingRight: 8,
+    opacity: disabled ? 0.5 : 1,
+    '--bloom-sortable-ring': paint.ring
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    role: "button",
+    accessibilityLabel: hint ? `${label}, ${hint}` : label,
+    "aria-disabled": disabled || undefined,
+    disabled: disabled,
+    onPress: onPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onHoverIn: onHoverIn,
+    onHoverOut: onHoverOut,
+    ...webDataSet({
+      bloomSortableAdd: ''
+    }),
+    testID: testID,
+    style: tileStyle,
+    children: [/*#__PURE__*/_jsx(RiImageAddLine, {
+      width: 24,
+      height: 24,
+      fill: paint.addIcon
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-medium",
+      numberOfLines: 2,
+      style: {
+        color: paint.text,
+        textAlign: 'center'
+      },
+      children: label
+    }), hint && !compact ? /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      numberOfLines: 2,
+      style: {
+        color: paint.textSecondary,
+        textAlign: 'center'
+      },
+      children: hint
+    }) : null]
+  });
+}
+export const SortablePhotoGrid = /*#__PURE__*/memo(SortablePhotoGridComponent);
+SortablePhotoGrid.displayName = 'SortablePhotoGrid';
+//# sourceMappingURL=SortablePhotoGrid.js.map