@synerise/ds-image 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2026-07-08)
+
+### Features
+
+- add ImageView component ([8bb707d](https://github.com/Synerise/synerise-design/commit/8bb707de09785d60a0cee48ae7147f3d6b117b3f))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+# @synerise/ds-image
+
+Image components for the Synerise Design System: inline **thumbnails**, a
+**gallery** of thumbnails with uniform sizing, and a full-screen **preview**
+(lightbox) with zoom, pan and navigation.
+
+## Installation
+
+```bash
+pnpm add @synerise/ds-image
+```
+
+## Exports
+
+- `Thumbnail` — a single image tile (aspect ratio, size, background, object-fit,
+  Empty state, broken-image fallback, optional delete-on-hover).
+- `Gallery` — many thumbnails sharing the same visual settings; clicking one opens
+  the preview at that image.
+- `ImagePreview` — a controlled full-screen lightbox with a bottom-center toolbar
+  (navigation `‹ N of M ›` + zoom/fullscreen).
+- `useImagePreview` — open/close/next/prev state so the preview can be triggered
+  from any element (a list row, a button, a table cell).
+
+## Usage
+
+```tsx
+import { Gallery, ImagePreview, Thumbnail, useImagePreview } from '@synerise/ds-image';
+
+const images = [
+  { src: '/a.jpg', alt: 'A' },
+  { src: '/b.jpg', alt: 'B' },
+];
+
+// A single thumbnail
+<Thumbnail src="/a.jpg" alt="A" aspectRatio="1:1" size="m" objectFit="cover" />;
+
+// A gallery — settings apply to every thumbnail; clicking opens the preview
+<Gallery images={images} aspectRatio="1:1" size="s" background="subtle-grey" objectFit="cover" />;
+
+// Preview triggered from an arbitrary element
+const Example = () => {
+  const preview = useImagePreview(images);
+  return (
+    <>
+      <button type="button" onClick={() => preview.open(0)}>
+        Open
+      </button>
+      <ImagePreview {...preview.previewProps} />
+    </>
+  );
+};
+```
+
+See the Storybook overview page for full props tables, behavior notes, and
+accessibility guidance.

package/dist/Gallery/Gallery.d.ts

@@ -0,0 +1,3 @@
+import { GalleryProps } from './Gallery.types';
+declare const Gallery: ({ images, aspectRatio, size, height, background, objectFit, loading, fallback, deletable, onDelete, openZoom, zoomable, zoomStep, maxZoom, initialZoom, getContainer, texts, className, }: GalleryProps) => JSX.Element;
+export default Gallery;

package/dist/Gallery/Gallery.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import ImagePreview from "../Preview/ImagePreview.js";
+import Thumbnail from "../Thumbnail/Thumbnail.js";
+import { ImageGalleryContext } from "../context/ImageGalleryContext.js";
+import { Container } from "./Gallery.styles.js";
+const Gallery = ({
+  images,
+  aspectRatio,
+  size,
+  height,
+  background,
+  objectFit,
+  loading,
+  fallback,
+  deletable = false,
+  onDelete,
+  openZoom = true,
+  zoomable,
+  zoomStep,
+  maxZoom,
+  initialZoom,
+  getContainer,
+  texts,
+  className
+}) => {
+  const [previewIndex, setPreviewIndex] = useState(null);
+  const contextValue = useMemo(() => ({
+    aspectRatio,
+    size,
+    height,
+    background,
+    objectFit,
+    loading,
+    fallback,
+    texts
+  }), [aspectRatio, size, height, background, objectFit, loading, fallback, texts]);
+  return /* @__PURE__ */ jsxs(ImageGalleryContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(Container, { className, "data-testid": "image-gallery", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(Thumbnail, { src: image.src, alt: image.alt, fallback: image.fallback, deletable, onDelete: onDelete ? () => onDelete(imageIndex) : void 0, openZoom, onClick: openZoom ? () => setPreviewIndex(imageIndex) : void 0 }, `${image.src}-${imageIndex}`)) }),
+    openZoom && /* @__PURE__ */ jsx(ImagePreview, { open: previewIndex !== null, images, index: previewIndex ?? 0, onIndexChange: setPreviewIndex, onClose: () => setPreviewIndex(null), zoomable, zoomStep, maxZoom, initialZoom, fallback, getContainer, texts })
+  ] });
+};
+export {
+  Gallery as default
+};

package/dist/Gallery/Gallery.styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Gallery/Gallery.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const Container = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Gallerystyles__Container",
+  componentId: "sc-94iczo-0"
+})(["display:flex;flex-wrap:wrap;gap:8px;"]);
+export {
+  Container
+};

package/dist/Gallery/Gallery.types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { AspectRatio, ImageSource, ImageTexts, InitialZoom, ObjectFit, ThumbnailBackground, ThumbnailSize } from '../shared/Image.shared.types';
+export type GalleryProps = {
+    /** Images rendered as thumbnails and paged through in the preview. */
+    images: ImageSource[];
+    /** Aspect ratio applied to every thumbnail. Defaults to `1:1`. */
+    aspectRatio?: AspectRatio;
+    /** Height token applied to every thumbnail. Defaults to `m`. */
+    size?: ThumbnailSize;
+    /** Explicit height in px, used when `size` is `custom`. */
+    height?: number;
+    /** Backdrop applied to every thumbnail. Defaults to `none`. */
+    background?: ThumbnailBackground;
+    /** How images fill their tiles. Defaults to `contain`. */
+    objectFit?: ObjectFit;
+    /** Native loading hint applied to every thumbnail. Defaults to `lazy`. */
+    loading?: 'lazy' | 'eager';
+    /** Fallback for any broken image (thumbnails and preview). */
+    fallback?: ReactNode;
+    /** Show a delete affordance on each thumbnail. */
+    deletable?: boolean;
+    /** Called with the index of the thumbnail whose delete affordance fired. */
+    onDelete?: (index: number) => void;
+    /** Whether clicking a thumbnail opens the preview. Defaults to true. */
+    openZoom?: boolean;
+    /** Preview pass-through — enable zoom/pan. */
+    zoomable?: boolean;
+    /** Preview pass-through — per-click zoom multiplier. */
+    zoomStep?: number;
+    /** Preview pass-through — max zoom relative to natural size. */
+    maxZoom?: number;
+    /** Preview pass-through — where zoom starts. */
+    initialZoom?: InitialZoom;
+    /** Preview pass-through — portal target. */
+    getContainer?: () => HTMLElement;
+    /** Override tooltip / accessible labels for thumbnails and the preview. */
+    texts?: Partial<ImageTexts>;
+    className?: string;
+};

package/dist/Gallery/Gallery.types.js

@@ -0,0 +1 @@
+

package/dist/Preview/ImagePreview.const.d.ts

@@ -0,0 +1,16 @@
+/** RZPP scale at which the whole image is fitted to the working area. */
+export declare const FIT_SCALE = 1;
+/**
+ * Per-click zoom multiplier (Figma: "Skok zooma"). `1.4` means each zoom step
+ * scales by ×1.4. Converted to the additive step react-zoom-pan-pinch expects
+ * via `multiplier - 1`.
+ */
+export declare const DEFAULT_ZOOM_STEP = 1.4;
+/** Max zoom relative to the image's natural size (Figma: "Max zoom" = 300%). */
+export declare const DEFAULT_MAX_ZOOM = 3;
+/**
+ * Gap (px) between the previewed image and the viewport edge. Kept constant
+ * (not removed on zoom) so the zoom/pan working area never resizes mid-zoom —
+ * resizing it makes react-zoom-pan-pinch re-fit and corrupts the first zoom step.
+ */
+export declare const PREVIEW_PADDING = 32;

package/dist/Preview/ImagePreview.const.js

@@ -0,0 +1,10 @@
+const FIT_SCALE = 1;
+const DEFAULT_ZOOM_STEP = 1.4;
+const DEFAULT_MAX_ZOOM = 3;
+const PREVIEW_PADDING = 32;
+export {
+  DEFAULT_MAX_ZOOM,
+  DEFAULT_ZOOM_STEP,
+  FIT_SCALE,
+  PREVIEW_PADDING
+};

package/dist/Preview/ImagePreview.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ImagePreviewProps } from './ImagePreview.types';
+declare const ImagePreview: ({ open, images, index, onIndexChange, onClose, zoomable, zoomStep, maxZoom, initialZoom, closable, maskClosable, fallback, getContainer, destroyOnClose, onZoom, texts: textsProp, }: ImagePreviewProps) => React.ReactPortal | null;
+export default ImagePreview;

package/dist/Preview/ImagePreview.js

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import Icon, { ImageM, CloseM } from "@synerise/ds-icon";
+import { ToolbarGroup, ToolbarButton } from "@synerise/ds-toolbar";
+import { useFocusTrap } from "@synerise/ds-utils";
+import { useImageStatus } from "../shared/useImageStatus.js";
+import { useImageTexts } from "../shared/useImageTexts.js";
+import { FIT_SCALE, PREVIEW_PADDING, DEFAULT_MAX_ZOOM, DEFAULT_ZOOM_STEP } from "./ImagePreview.const.js";
+import { Image, Fallback, FallbackBox, Overlay, ImageWrapper, CloseWrapper, ToolbarWrapper } from "./ImagePreview.styles.js";
+import PreviewToolbar from "./PreviewToolbar.js";
+const SCALE_EPSILON = 0.01;
+const ZOOM_ANIMATION_MS = 200;
+const CLICK_MOVE_THRESHOLD = 5;
+const stopPropagation = (event) => {
+  event.stopPropagation();
+};
+const getDownloadName = (src) => {
+  if (!src || src.startsWith("data:")) {
+    return "image";
+  }
+  const path = src.split(/[?#]/)[0];
+  return path.substring(path.lastIndexOf("/") + 1) || "image";
+};
+const ImagePreview = ({
+  open,
+  images,
+  index,
+  onIndexChange,
+  onClose,
+  zoomable = true,
+  zoomStep = DEFAULT_ZOOM_STEP,
+  maxZoom = DEFAULT_MAX_ZOOM,
+  initialZoom = "fit",
+  closable = true,
+  maskClosable = true,
+  fallback,
+  getContainer,
+  destroyOnClose = false,
+  onZoom,
+  texts: textsProp
+}) => {
+  const texts = useImageTexts(textsProp);
+  const overlayRef = useRef(null);
+  const workingAreaRef = useRef(null);
+  const transformRef = useRef(null);
+  const pointerDownRef = useRef(null);
+  const total = images.length;
+  const currentImage = images[index];
+  const currentSrc = currentImage?.src ?? "";
+  const {
+    ref: imgRef,
+    status,
+    handleLoad,
+    handleError
+  } = useImageStatus(currentSrc);
+  const [naturalScaleFactor, setNaturalScaleFactor] = useState(FIT_SCALE);
+  const [maxScale, setMaxScale] = useState(FIT_SCALE);
+  const [scale, setScale] = useState(FIT_SCALE);
+  const [isPanning, setIsPanning] = useState(false);
+  useFocusTrap(overlayRef, open);
+  useEffect(() => {
+    if (open) {
+      overlayRef.current?.focus();
+    }
+  }, [open]);
+  const goTo = useCallback((next) => {
+    if (total < 2) {
+      return;
+    }
+    onIndexChange((next + total) % total);
+  }, [total, onIndexChange]);
+  const measureZoom = useCallback(() => {
+    const area = workingAreaRef.current;
+    const img = imgRef.current;
+    if (!area || !img || !img.naturalWidth) {
+      return FIT_SCALE;
+    }
+    const availableWidth = area.clientWidth - 2 * PREVIEW_PADDING;
+    const availableHeight = area.clientHeight - 2 * PREVIEW_PADDING;
+    const fitToNatural = Math.max(img.naturalWidth / availableWidth, img.naturalHeight / availableHeight);
+    const factor = fitToNatural > FIT_SCALE ? fitToNatural : FIT_SCALE;
+    setNaturalScaleFactor(factor);
+    setMaxScale(factor * maxZoom);
+    return factor;
+  }, [imgRef, maxZoom]);
+  const applyInitialZoom = useCallback((factor) => {
+    if (initialZoom === "real-size" && factor > FIT_SCALE) {
+      transformRef.current?.centerView?.(factor, 0);
+    }
+  }, [initialZoom]);
+  const handleImageLoad = useCallback((event) => {
+    handleLoad(event);
+    applyInitialZoom(measureZoom());
+  }, [handleLoad, measureZoom, applyInitialZoom]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    transformRef.current?.resetTransform?.(0);
+    setScale(FIT_SCALE);
+    const img = imgRef.current;
+    if (img?.complete && img.naturalWidth) {
+      applyInitialZoom(measureZoom());
+    }
+  }, [open, currentSrc, imgRef, measureZoom, applyInitialZoom]);
+  useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && closable) {
+        event.stopPropagation();
+        onClose();
+      } else if (event.key === "ArrowLeft") {
+        goTo(index - 1);
+      } else if (event.key === "ArrowRight") {
+        goTo(index + 1);
+      }
+    };
+    const handleResize = () => {
+      measureZoom();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("resize", handleResize);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("resize", handleResize);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open, closable, onClose, goTo, index, measureZoom]);
+  const handleTransformed = useCallback((_ref, state) => {
+    setScale(state.scale);
+    onZoom?.(state.scale);
+  }, [onZoom]);
+  const handleOverlayPointerDown = useCallback((event) => {
+    pointerDownRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, []);
+  const handleMaskClick = useCallback((event) => {
+    const start = pointerDownRef.current;
+    pointerDownRef.current = null;
+    if (!maskClosable) {
+      return;
+    }
+    if (start && (Math.abs(event.clientX - start.x) > CLICK_MOVE_THRESHOLD || Math.abs(event.clientY - start.y) > CLICK_MOVE_THRESHOLD)) {
+      return;
+    }
+    onClose();
+  }, [maskClosable, onClose]);
+  const rzppStep = Math.max(zoomStep - 1, SCALE_EPSILON);
+  const stepZoom = useCallback((direction) => {
+    const level = Math.round(Math.log(scale / naturalScaleFactor) / Math.log(zoomStep));
+    const target = naturalScaleFactor * zoomStep ** (level + direction);
+    const clamped = Math.min(Math.max(target, FIT_SCALE), maxScale);
+    transformRef.current?.centerView?.(clamped, ZOOM_ANIMATION_MS);
+  }, [scale, naturalScaleFactor, zoomStep, maxScale]);
+  const handleZoomIn = useCallback(() => stepZoom(1), [stepZoom]);
+  const handleZoomOut = useCallback(() => stepZoom(-1), [stepZoom]);
+  if (!open && destroyOnClose) {
+    return null;
+  }
+  const isZoomed = scale > FIT_SCALE + SCALE_EPSILON;
+  const showZoomControls = zoomable && maxScale > FIT_SCALE + SCALE_EPSILON;
+  const getPanCursor = () => {
+    if (!isZoomed) {
+      return "default";
+    }
+    return isPanning ? "grabbing" : "grab";
+  };
+  const zoomPercent = naturalScaleFactor > 0 ? Math.round(scale / naturalScaleFactor * 100) : 100;
+  const hasError = status === "error" || !currentImage;
+  const showDownload = !hasError && Boolean(currentSrc);
+  const image = /* @__PURE__ */ jsx(Image, { ref: imgRef, src: currentSrc, alt: currentImage?.alt ?? "", onLoad: handleImageLoad, onError: handleError, onClick: stopPropagation, draggable: false, "data-testid": "image-preview-image" }, index);
+  const content = hasError ? /* @__PURE__ */ jsx(Fallback, { onClick: stopPropagation, "data-testid": "image-preview-fallback", children: currentImage?.fallback ?? fallback ?? /* @__PURE__ */ jsx(FallbackBox, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ImageM, {}) }) }) }) : image;
+  return createPortal(/* @__PURE__ */ jsxs(Overlay, { ref: overlayRef, role: "dialog", "aria-modal": true, "aria-label": currentImage?.alt, tabIndex: -1, $hidden: !open, onMouseDown: handleOverlayPointerDown, onClick: handleMaskClick, "data-testid": "image-preview", children: [
+    /* @__PURE__ */ jsx(ImageWrapper, { ref: workingAreaRef, children: zoomable && !hasError ? /* @__PURE__ */ jsx(TransformWrapper, { ref: transformRef, minScale: FIT_SCALE, maxScale, initialScale: FIT_SCALE, centerOnInit: true, doubleClick: {
+      mode: "reset"
+    }, wheel: {
+      step: rzppStep
+    }, panning: {
+      disabled: !isZoomed
+    }, onPanningStart: () => setIsPanning(true), onPanningStop: () => setIsPanning(false), onTransformed: handleTransformed, children: /* @__PURE__ */ jsx(TransformComponent, { wrapperStyle: {
+      width: "100%",
+      height: "100%",
+      cursor: getPanCursor()
+    }, contentStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%"
+    }, children: content }) }) : content }),
+    closable && /* @__PURE__ */ jsx(CloseWrapper, { onClick: stopPropagation, children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.close, tooltipProps: {
+      title: texts.close,
+      placement: "bottom"
+    }, onClick: onClose, "data-testid": "image-preview-close", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) }) }) }),
+    (total > 1 || showZoomControls || showDownload) && /* @__PURE__ */ jsx(ToolbarWrapper, { onClick: stopPropagation, children: /* @__PURE__ */ jsx(PreviewToolbar, { showNavigation: total > 1, current: index + 1, total, onPrev: () => goTo(index - 1), onNext: () => goTo(index + 1), showZoom: showZoomControls, zoomPercent, canZoomIn: scale < maxScale - SCALE_EPSILON, canZoomOut: isZoomed, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, showDownload, downloadHref: currentSrc, downloadName: getDownloadName(currentSrc), texts }) })
+  ] }), getContainer?.() || document.body);
+};
+export {
+  ImagePreview as default
+};

package/dist/Preview/ImagePreview.styles.d.ts

@@ -0,0 +1,13 @@
+import { ThemeProps } from '@synerise/ds-core';
+export declare const Overlay: import('styled-components').StyledComponent<"div", any, ThemeProps & {
+    $hidden?: boolean;
+}, never>;
+export declare const ImageWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Image: import('styled-components').StyledComponent<"img", any, ThemeProps, never>;
+export declare const Fallback: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Default broken-image placeholder shown when an image fails to load. */
+export declare const FallbackBox: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+/** Close button — kept in the top-right corner, away from the bottom toolbar. */
+export declare const CloseWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+/** Navigation + zoom controls — centered along the bottom edge. */
+export declare const ToolbarWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Preview/ImagePreview.styles.js

@@ -0,0 +1,44 @@
+import styled, { keyframes } from "styled-components";
+import { PREVIEW_PADDING } from "./ImagePreview.const.js";
+const OVERLAY_Z_INDEX = 1050;
+const imageFadeIn = /* @__PURE__ */ keyframes(["from{opacity:0;}to{opacity:1;}"]);
+const BACKDROP_ALPHA = "CC";
+const CONTROLS_INSET = 16;
+const IMAGE_BORDER_RADIUS = 8;
+const Overlay = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__Overlay",
+  componentId: "sc-17aatff-0"
+})(["position:fixed;inset:0;z-index:", ";display:flex;align-items:center;justify-content:center;outline:none;background-color:", ";opacity:", ";visibility:", ";pointer-events:", ";transition:opacity 160ms ease,visibility 160ms ease;"], OVERLAY_Z_INDEX, (props) => `${props.theme.palette["grey-900"]}${BACKDROP_ALPHA}`, (props) => props.$hidden ? 0 : 1, (props) => props.$hidden ? "hidden" : "visible", (props) => props.$hidden ? "none" : "auto");
+const ImageWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__ImageWrapper",
+  componentId: "sc-17aatff-1"
+})(["position:relative;display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;padding:", "px;"], PREVIEW_PADDING);
+const Image = /* @__PURE__ */ styled.img.withConfig({
+  displayName: "ImagePreviewstyles__Image",
+  componentId: "sc-17aatff-2"
+})(["max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;border-radius:", "px;box-shadow:", ";animation:", " 200ms ease;"], IMAGE_BORDER_RADIUS, (props) => props.theme.variables["box-shadow-4"], imageFadeIn);
+const Fallback = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__Fallback",
+  componentId: "sc-17aatff-3"
+})(["display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;"]);
+const FallbackBox = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__FallbackBox",
+  componentId: "sc-17aatff-4"
+})(["display:flex;align-items:center;justify-content:center;width:240px;height:180px;border-radius:", "px;color:", ";background-color:", ";"], IMAGE_BORDER_RADIUS, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"]);
+const CloseWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__CloseWrapper",
+  componentId: "sc-17aatff-5"
+})(["position:absolute;top:", "px;right:", "px;z-index:2;"], CONTROLS_INSET, CONTROLS_INSET);
+const ToolbarWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImagePreviewstyles__ToolbarWrapper",
+  componentId: "sc-17aatff-6"
+})(["position:absolute;bottom:", "px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;"], CONTROLS_INSET);
+export {
+  CloseWrapper,
+  Fallback,
+  FallbackBox,
+  Image,
+  ImageWrapper,
+  Overlay,
+  ToolbarWrapper
+};

package/dist/Preview/ImagePreview.types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ImageSource, ImageTexts, InitialZoom } from '../shared/Image.shared.types';
+export type ImagePreviewProps = {
+    /** Controls visibility of the viewer. */
+    open: boolean;
+    /** Images to page through. Navigation is shown only when there is more than one. */
+    images: ImageSource[];
+    /** Controlled index of the currently shown image. */
+    index: number;
+    /** Called when navigation (arrows / keyboard) requests a different image. */
+    onIndexChange: (index: number) => void;
+    /** Called when the viewer requests to close (Escape, backdrop click, close button). */
+    onClose: () => void;
+    /**
+     * Whether zoom and pan are enabled. Defaults to true. Zoom runs from the
+     * fitted view up to `maxZoom` × the image's natural size.
+     */
+    zoomable?: boolean;
+    /** Per-click zoom multiplier. Defaults to 1.4. */
+    zoomStep?: number;
+    /** Maximum zoom relative to natural size. Defaults to 3 (300%). */
+    maxZoom?: number;
+    /** Where zoom starts. Defaults to `fit`. */
+    initialZoom?: InitialZoom;
+    /** Whether to render the close button and allow Escape to close. Defaults to true. */
+    closable?: boolean;
+    /** Whether clicking the dimmed backdrop closes the viewer. Defaults to true. */
+    maskClosable?: boolean;
+    /** Fallback rendered when an image fails to load (per-image override via `ImageSource.fallback`). */
+    fallback?: ReactNode;
+    /** Portal target. Defaults to `document.body`. */
+    getContainer?: () => HTMLElement;
+    /** Unmount the viewer (and reset zoom state) when closed. Defaults to false. */
+    destroyOnClose?: boolean;
+    /** Called with the current scale whenever the zoom transform changes. */
+    onZoom?: (scale: number) => void;
+    /** Override the default tooltip / accessible labels for the controls. */
+    texts?: Partial<ImageTexts>;
+};

package/dist/Preview/ImagePreview.types.js

@@ -0,0 +1 @@
+

package/dist/Preview/PreviewToolbar.d.ts

@@ -0,0 +1,21 @@
+import { ImageTexts } from '../shared/Image.shared.types';
+export type PreviewToolbarProps = {
+    showNavigation: boolean;
+    current: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+    showZoom: boolean;
+    zoomPercent: number;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    showDownload: boolean;
+    downloadHref: string;
+    downloadName: string;
+    texts: ImageTexts;
+};
+/** Bottom-center controls: a navigation pill and a zoom/download pill. */
+declare const PreviewToolbar: ({ showNavigation, current, total, onPrev, onNext, showZoom, zoomPercent, canZoomIn, canZoomOut, onZoomIn, onZoomOut, showDownload, downloadHref, downloadName, texts, }: PreviewToolbarProps) => JSX.Element;
+export default PreviewToolbar;

package/dist/Preview/PreviewToolbar.js

@@ -0,0 +1,60 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import Icon, { AngleLeftM, AngleRightM, FormulaMinusM, FormulaPlusM, FileDownloadM } from "@synerise/ds-icon";
+import { ToolbarGroup, ToolbarButton, ToolbarLabel } from "@synerise/ds-toolbar";
+const TOOLTIP_PLACEMENT = "top";
+const PreviewToolbar = ({
+  showNavigation,
+  current,
+  total,
+  onPrev,
+  onNext,
+  showZoom,
+  zoomPercent,
+  canZoomIn,
+  canZoomOut,
+  onZoomIn,
+  onZoomOut,
+  showDownload,
+  downloadHref,
+  downloadName,
+  texts
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showNavigation && /* @__PURE__ */ jsxs(ToolbarGroup, { isCompact: true, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.previousImage, tooltipProps: {
+      title: texts.previousImage,
+      placement: TOOLTIP_PLACEMENT
+    }, onClick: onPrev, "data-testid": "image-preview-prev", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleLeftM, {}) }) }),
+    /* @__PURE__ */ jsxs(ToolbarLabel, { "data-testid": "image-preview-counter", children: [
+      current,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.nextImage, tooltipProps: {
+      title: texts.nextImage,
+      placement: TOOLTIP_PLACEMENT
+    }, onClick: onNext, "data-testid": "image-preview-next", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightM, {}) }) })
+  ] }),
+  (showZoom || showDownload) && /* @__PURE__ */ jsxs(ToolbarGroup, { isCompact: true, children: [
+    showZoom && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.zoomOut, tooltipProps: {
+        title: texts.zoomOut,
+        placement: TOOLTIP_PLACEMENT
+      }, disabled: !canZoomOut, onClick: onZoomOut, "data-testid": "image-preview-zoom-out", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FormulaMinusM, {}) }) }),
+      /* @__PURE__ */ jsxs(ToolbarLabel, { "data-testid": "image-preview-zoom-level", children: [
+        zoomPercent,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.zoomIn, tooltipProps: {
+        title: texts.zoomIn,
+        placement: TOOLTIP_PLACEMENT
+      }, disabled: !canZoomIn, onClick: onZoomIn, "data-testid": "image-preview-zoom-in", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FormulaPlusM, {}) }) })
+    ] }),
+    showDownload && /* @__PURE__ */ jsx(ToolbarButton, { mode: "single-icon", "aria-label": texts.download, tooltipProps: {
+      title: texts.download,
+      placement: TOOLTIP_PLACEMENT
+    }, href: downloadHref, download: downloadName, target: "_blank", "data-testid": "image-preview-download", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FileDownloadM, {}) }) })
+  ] })
+] });
+export {
+  PreviewToolbar as default
+};

package/dist/Thumbnail/Thumbnail.const.d.ts

@@ -0,0 +1,7 @@
+import { AspectRatio, ThumbnailSize } from '../shared/Image.shared.types';
+/** Fixed thumbnail heights (px) per size token. `custom` defers to `height`. */
+export declare const SIZE_MAP: Record<Exclude<ThumbnailSize, 'custom'>, number>;
+/** CSS `aspect-ratio` values per fixed ratio. `source` keeps intrinsic ratio. */
+export declare const ASPECT_RATIO_MAP: Record<Exclude<AspectRatio, 'source'>, string>;
+export declare const DEFAULT_ASPECT_RATIO: AspectRatio;
+export declare const DEFAULT_SIZE = "m";

package/dist/Thumbnail/Thumbnail.const.js

@@ -0,0 +1,22 @@
+const SIZE_MAP = {
+  xxs: 40,
+  xs: 80,
+  s: 120,
+  m: 180,
+  l: 240,
+  xl: 360,
+  xxl: 540
+};
+const ASPECT_RATIO_MAP = {
+  "1:1": "1 / 1",
+  "4:3": "4 / 3",
+  "16:9": "16 / 9"
+};
+const DEFAULT_ASPECT_RATIO = "1:1";
+const DEFAULT_SIZE = "m";
+export {
+  ASPECT_RATIO_MAP,
+  DEFAULT_ASPECT_RATIO,
+  DEFAULT_SIZE,
+  SIZE_MAP
+};