@synerise/ds-image 0.1.0

package/dist/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,3 @@
+import { ThumbnailProps } from './Thumbnail.types';
+declare const Thumbnail: ({ src, alt, aspectRatio, size, height, background, objectFit, loading, deletable, onDelete, openZoom, onClick, fallback, texts, className, "data-testid": dataTestId, }: ThumbnailProps) => JSX.Element;
+export default Thumbnail;

package/dist/Thumbnail/Thumbnail.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Icon, { ImageM, ShowS, Close3FullBackgroundM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { useImageGalleryContext } from "../context/ImageGalleryContext.js";
+import { useImageTexts } from "../shared/useImageTexts.js";
+import { DEFAULT_ASPECT_RATIO, DEFAULT_SIZE, ASPECT_RATIO_MAP, SIZE_MAP } from "./Thumbnail.const.js";
+import { Tile, Clip, ThumbnailImage, EmptyPlaceholder, HoverOverlay, DeleteButton } from "./Thumbnail.styles.js";
+const Thumbnail = ({
+  src,
+  alt,
+  aspectRatio,
+  size,
+  height,
+  background,
+  objectFit,
+  loading,
+  deletable = false,
+  onDelete,
+  openZoom = false,
+  onClick,
+  fallback,
+  texts,
+  className,
+  "data-testid": dataTestId = "image-thumbnail"
+}) => {
+  const context = useImageGalleryContext();
+  const labels = useImageTexts(texts ?? context?.texts);
+  const resolvedAspectRatio = aspectRatio ?? context?.aspectRatio ?? DEFAULT_ASPECT_RATIO;
+  const resolvedSize = size ?? context?.size ?? DEFAULT_SIZE;
+  const resolvedHeight = height ?? context?.height;
+  const resolvedBackground = background ?? context?.background ?? "none";
+  const resolvedObjectFit = objectFit ?? context?.objectFit ?? "contain";
+  const resolvedLoading = loading ?? context?.loading ?? "lazy";
+  const resolvedFallback = fallback ?? context?.fallback;
+  const interactive = Boolean(openZoom || onClick);
+  const isSource = resolvedAspectRatio === "source";
+  const cssAspectRatio = resolvedAspectRatio === "source" ? void 0 : ASPECT_RATIO_MAP[resolvedAspectRatio];
+  const pixelHeight = resolvedSize === "custom" ? resolvedHeight ?? SIZE_MAP[DEFAULT_SIZE] : SIZE_MAP[resolvedSize];
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    event.currentTarget.blur();
+    onDelete?.();
+  };
+  return /* @__PURE__ */ jsxs(Tile, { className, role: interactive ? "button" : void 0, tabIndex: interactive ? 0 : void 0, $height: pixelHeight, $aspectRatio: cssAspectRatio, $interactive: interactive, onClick: interactive ? onClick : void 0, onKeyDown: interactive ? handleKeyDown : void 0, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsxs(Clip, { $background: resolvedBackground, $source: isSource, children: [
+      src ? /* @__PURE__ */ jsx(ThumbnailImage, { src, alt, loading: resolvedLoading, fallback: resolvedFallback, $objectFit: resolvedObjectFit, $source: isSource, "data-testid": `${dataTestId}-image` }) : /* @__PURE__ */ jsx(EmptyPlaceholder, { "data-testid": `${dataTestId}-empty`, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ImageM, {}) }) }),
+      interactive && src && /* @__PURE__ */ jsx(HoverOverlay, { "data-testid": `${dataTestId}-overlay`, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ShowS, {}) }) })
+    ] }),
+    deletable && /* @__PURE__ */ jsx(Tooltip, { title: labels.delete, placement: "top", children: /* @__PURE__ */ jsx(DeleteButton, { type: "button", "aria-label": labels.delete, onClick: handleDelete, "data-testid": `${dataTestId}-delete`, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3FullBackgroundM, {}) }) }) })
+  ] });
+};
+export {
+  Thumbnail as default
+};

package/dist/Thumbnail/Thumbnail.styles.d.ts

@@ -0,0 +1,24 @@
+import { ThemeProps } from '@synerise/ds-core';
+import { ObjectFit, ThumbnailBackground } from '../shared/Image.shared.types';
+/**
+ * Outer box — owns sizing and the focus ring but does NOT clip, so the delete
+ * affordance can overhang the corner. Clipping lives on `Clip`.
+ */
+export declare const Tile: import('styled-components').StyledComponent<"div", any, ThemeProps & {
+    $height: number;
+    $aspectRatio?: string;
+    $interactive: boolean;
+}, never>;
+/** Inner box — clips the image + hover overlay to the rounded corners. */
+export declare const Clip: import('styled-components').StyledComponent<"div", any, ThemeProps & {
+    $background: ThumbnailBackground;
+    $source: boolean;
+}, never>;
+export declare const ThumbnailImage: import('styled-components').StyledComponent<({ src, alt, fallback, loading, draggable, className, onClick, onLoad, onError, "data-testid": dataTestId, }: import('../shared/ImageContent').ImageContentProps) => JSX.Element, any, {
+    $objectFit: ObjectFit;
+    $source: boolean;
+}, never>;
+export declare const EmptyPlaceholder: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+/** Hover affordance: a dim layer over the whole tile with a centered show icon. */
+export declare const HoverOverlay: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const DeleteButton: import('styled-components').StyledComponent<"button", any, ThemeProps, never>;

package/dist/Thumbnail/Thumbnail.styles.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import ImageContent from "../shared/ImageContent.js";
+const TILE_BORDER_RADIUS = 4;
+const HOVER_OVERLAY_ALPHA = "4D";
+const DELETE_BUTTON_SIZE = 24;
+const Tile = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Thumbnailstyles__Tile",
+  componentId: "sc-jzlfaw-0"
+})(["position:relative;display:inline-flex;margin:0;padding:0;border-radius:", "px;height:", "px;", " cursor:", ";&:focus-visible{outline:none;box-shadow:0 0 0 2px ", ";}"], TILE_BORDER_RADIUS, (props) => props.$height, (props) => props.$aspectRatio ? `aspect-ratio: ${props.$aspectRatio};` : "width: auto;", (props) => props.$interactive ? "pointer" : "default", (props) => props.theme.palette["blue-600"]);
+const Clip = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Thumbnailstyles__Clip",
+  componentId: "sc-jzlfaw-1"
+})(["position:relative;display:inline-flex;overflow:hidden;height:100%;", " border-radius:", "px;background-color:", ";"], (props) => props.$source ? "width: auto;" : "width: 100%;", TILE_BORDER_RADIUS, (props) => props.$background === "subtle-grey" ? props.theme.palette["grey-050"] : "transparent");
+const ThumbnailImage = /* @__PURE__ */ styled(ImageContent).withConfig({
+  displayName: "Thumbnailstyles__ThumbnailImage",
+  componentId: "sc-jzlfaw-2"
+})(["display:block;object-fit:", ";", ""], (props) => props.$objectFit, (props) => props.$source ? "height: 100%; width: auto;" : "width: 100%; height: 100%;");
+const EmptyPlaceholder = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Thumbnailstyles__EmptyPlaceholder",
+  componentId: "sc-jzlfaw-3"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:", ";background-color:", ";"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"]);
+const HoverOverlay = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Thumbnailstyles__HoverOverlay",
+  componentId: "sc-jzlfaw-4"
+})(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";opacity:0;transition:opacity 0.15s ease;", ":hover &{opacity:1;}"], (props) => props.theme.palette.white, (props) => `${props.theme.palette["grey-900"]}${HOVER_OVERLAY_ALPHA}`, Tile);
+const DeleteButton = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "Thumbnailstyles__DeleteButton",
+  componentId: "sc-jzlfaw-5"
+})(["position:absolute;top:0;right:0;z-index:2;transform:translate(50%,-50%);display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;padding:0;border:none;background:none;cursor:pointer;color:", ";opacity:0;transition:opacity 0.15s ease;", ":hover &,", ":focus-within &{opacity:1;}"], DELETE_BUTTON_SIZE, DELETE_BUTTON_SIZE, (props) => props.theme.palette["red-600"], Tile, Tile);
+export {
+  Clip,
+  DeleteButton,
+  EmptyPlaceholder,
+  HoverOverlay,
+  ThumbnailImage,
+  Tile
+};

package/dist/Thumbnail/Thumbnail.types.d.ts

@@ -0,0 +1,34 @@
+import { MouseEvent, ReactNode } from 'react';
+import { AspectRatio, ImageTexts, ObjectFit, ThumbnailBackground, ThumbnailSize } from '../shared/Image.shared.types';
+export type ThumbnailProps = {
+    /** Image source URL. Omit (or leave empty) to render the Empty state. */
+    src?: string;
+    /** Alternative text — required for accessibility. */
+    alt: string;
+    /** Aspect ratio of the tile. Defaults to gallery context, else `1:1`. */
+    aspectRatio?: AspectRatio;
+    /** Height token. Defaults to gallery context, else `m`. */
+    size?: ThumbnailSize;
+    /** Explicit height in px, used when `size` is `custom`. */
+    height?: number;
+    /** Tile backdrop. Defaults to gallery context, else `none` (transparent). */
+    background?: ThumbnailBackground;
+    /** How the image fills the tile. Defaults to gallery context, else `contain`. */
+    objectFit?: ObjectFit;
+    /** Native loading hint. Defaults to gallery context, else `lazy`. */
+    loading?: 'lazy' | 'eager';
+    /** Show a delete affordance on hover/focus. */
+    deletable?: boolean;
+    /** Called when the delete affordance is activated. */
+    onDelete?: () => void;
+    /** Render the tile as an interactive trigger (e.g. opens a preview). */
+    openZoom?: boolean;
+    /** Click handler — fired for mouse and keyboard (Enter/Space) activation. */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** Fallback rendered when the image fails to load. Defaults to gallery context. */
+    fallback?: ReactNode;
+    /** Override tooltip / accessible labels (uses `delete`). Defaults to gallery context. */
+    texts?: Partial<ImageTexts>;
+    className?: string;
+    'data-testid'?: string;
+};

package/dist/Thumbnail/Thumbnail.types.js

@@ -0,0 +1 @@
+

package/dist/context/ImageGalleryContext.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { AspectRatio, ImageTexts, ObjectFit, ThumbnailBackground, ThumbnailSize } from '../shared/Image.shared.types';
+/** Visual settings a `Gallery` broadcasts to every `Thumbnail` it renders. */
+export type ImageGalleryContextValue = {
+    aspectRatio?: AspectRatio;
+    size?: ThumbnailSize;
+    height?: number;
+    background?: ThumbnailBackground;
+    objectFit?: ObjectFit;
+    loading?: 'lazy' | 'eager';
+    fallback?: ReactNode;
+    texts?: Partial<ImageTexts>;
+};
+export declare const ImageGalleryContext: import('react').Context<ImageGalleryContextValue | undefined>;
+/** Reads gallery-level defaults; returns `undefined` for a standalone `Thumbnail`. */
+export declare const useImageGalleryContext: () => ImageGalleryContextValue | undefined;

package/dist/context/ImageGalleryContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const ImageGalleryContext = createContext(void 0);
+const useImageGalleryContext = () => useContext(ImageGalleryContext);
+export {
+  ImageGalleryContext,
+  useImageGalleryContext
+};

package/dist/hooks/useImagePreview.d.ts

@@ -0,0 +1,33 @@
+import { ImagePreviewProps } from '../Preview/ImagePreview.types';
+import { ImageSource } from '../shared/Image.shared.types';
+export type UseImagePreviewReturn = {
+    /** Whether the preview is currently open. */
+    isOpen: boolean;
+    /** Index of the currently shown image. */
+    index: number;
+    /** Open the preview, optionally at a specific index. */
+    open: (index?: number) => void;
+    /** Close the preview. */
+    close: () => void;
+    /** Go to the next image (wraps). */
+    next: () => void;
+    /** Go to the previous image (wraps). */
+    prev: () => void;
+    /** Jump to a specific index. */
+    setIndex: (index: number) => void;
+    /** Spread onto `<ImagePreview>` to wire it up. */
+    previewProps: Pick<ImagePreviewProps, 'open' | 'images' | 'index' | 'onIndexChange' | 'onClose'>;
+};
+/**
+ * Drives an `<ImagePreview>` from any trigger (a list row, a button, a table
+ * cell) without a global provider. Owns the open/index state and exposes
+ * handlers plus `previewProps` to spread onto the component.
+ *
+ * @example
+ * const preview = useImagePreview(images);
+ * <Row onClick={() => preview.open(2)} />
+ * <ImagePreview {...preview.previewProps} />
+ */
+export declare const useImagePreview: (images: ImageSource[], options?: {
+    initialIndex?: number;
+}) => UseImagePreviewReturn;

package/dist/hooks/useImagePreview.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useMemo } from "react";
+const useImagePreview = (images, options) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [index, setIndexState] = useState(options?.initialIndex ?? 0);
+  const total = images.length;
+  const open = useCallback((nextIndex) => {
+    if (typeof nextIndex === "number") {
+      setIndexState(nextIndex);
+    }
+    setIsOpen(true);
+  }, []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const setIndex = useCallback((nextIndex) => {
+    setIndexState(nextIndex);
+  }, []);
+  const next = useCallback(() => {
+    if (total > 1) {
+      setIndexState((current) => (current + 1) % total);
+    }
+  }, [total]);
+  const prev = useCallback(() => {
+    if (total > 1) {
+      setIndexState((current) => (current - 1 + total) % total);
+    }
+  }, [total]);
+  const previewProps = useMemo(() => ({
+    open: isOpen,
+    images,
+    index,
+    onIndexChange: setIndexState,
+    onClose: close
+  }), [isOpen, images, index, close]);
+  return {
+    isOpen,
+    index,
+    open,
+    close,
+    next,
+    prev,
+    setIndex,
+    previewProps
+  };
+};
+export {
+  useImagePreview
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Thumbnail } from './Thumbnail/Thumbnail';
+export { default as Gallery } from './Gallery/Gallery';
+export { default as ImagePreview } from './Preview/ImagePreview';
+export { useImagePreview, type UseImagePreviewReturn, } from './hooks/useImagePreview';
+export type { ThumbnailProps } from './Thumbnail/Thumbnail.types';
+export type { GalleryProps } from './Gallery/Gallery.types';
+export type { ImagePreviewProps } from './Preview/ImagePreview.types';
+export type { ImageSource, AspectRatio, ThumbnailSize, ThumbnailBackground, ObjectFit, InitialZoom, ImageTexts, } from './shared/Image.shared.types';

package/dist/index.js

@@ -0,0 +1,10 @@
+import { default as default2 } from "./Thumbnail/Thumbnail.js";
+import { default as default3 } from "./Gallery/Gallery.js";
+import { default as default4 } from "./Preview/ImagePreview.js";
+import { useImagePreview } from "./hooks/useImagePreview.js";
+export {
+  default3 as Gallery,
+  default4 as ImagePreview,
+  default2 as Thumbnail,
+  useImagePreview
+};

package/dist/modules.d.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/shared/Image.shared.types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+/** One image in a gallery or preview set. */
+export type ImageSource = {
+    /** Image source URL. */
+    src: string;
+    /** Alternative text — required for accessibility. */
+    alt: string;
+    /** Per-image override for the broken-image fallback. */
+    fallback?: ReactNode;
+};
+/**
+ * Aspect ratio applied to a thumbnail. `source` keeps the image's intrinsic
+ * ratio; the rest force a fixed box.
+ */
+export type AspectRatio = '1:1' | '4:3' | '16:9' | 'source';
+/**
+ * Thumbnail height token. `custom` defers to the `height` prop; the rest map to
+ * fixed pixel heights (see `SIZE_MAP`).
+ */
+export type ThumbnailSize = 'custom' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+/** Thumbnail backdrop — transparent (`none`) or a subtle grey fill. */
+export type ThumbnailBackground = 'none' | 'subtle-grey';
+/** How the image fills the thumbnail box. */
+export type ObjectFit = 'contain' | 'cover';
+/**
+ * Preview zoom start. `fit` downscales to the working area only when the image
+ * is larger than it; `real-size` starts at the image's natural size (100%).
+ */
+export type InitialZoom = 'real-size' | 'fit';
+/**
+ * Tooltip / accessible labels for the image controls. DS provides translated
+ * defaults; pass a subset via the `texts` prop to override.
+ */
+export type ImageTexts = {
+    zoomIn: string;
+    zoomOut: string;
+    nextImage: string;
+    previousImage: string;
+    download: string;
+    close: string;
+    delete: string;
+};

package/dist/shared/Image.shared.types.js

@@ -0,0 +1 @@
+

package/dist/shared/ImageContent.d.ts

@@ -0,0 +1,27 @@
+import { default as React, ReactNode } from 'react';
+export type ImageContentProps = {
+    /** Image source URL. */
+    src: string;
+    /** Alternative text. */
+    alt: string;
+    /** Rendered in place of the image when the `src` fails to load. */
+    fallback?: ReactNode;
+    /** Native lazy/eager loading hint. */
+    loading?: 'lazy' | 'eager';
+    draggable?: boolean;
+    /** styled-components hook — applied to the `<img>`. */
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
+    /** Forwarded after the internal load handler (e.g. for zoom measurement). */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    'data-testid'?: string;
+};
+/**
+ * Renders an `<img>` and swaps in `fallback` (or a default broken-image
+ * placeholder) when the source fails to load. The single place that knows how
+ * to detect a broken image — reused by `Thumbnail` and `ImagePreview`. Style it
+ * per consumer with `styled(ImageContent)`; the className lands on the `<img>`.
+ */
+declare const ImageContent: ({ src, alt, fallback, loading, draggable, className, onClick, onLoad, onError, "data-testid": dataTestId, }: ImageContentProps) => JSX.Element;
+export default ImageContent;

package/dist/shared/ImageContent.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import Icon, { ImageM } from "@synerise/ds-icon";
+import { DefaultFallback } from "./ImageContent.styles.js";
+import { useImageStatus } from "./useImageStatus.js";
+const ImageContent = ({
+  src,
+  alt,
+  fallback,
+  loading = "lazy",
+  draggable,
+  className,
+  onClick,
+  onLoad,
+  onError,
+  "data-testid": dataTestId
+}) => {
+  const {
+    ref,
+    status,
+    handleLoad,
+    handleError
+  } = useImageStatus(src);
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? /* @__PURE__ */ jsx(DefaultFallback, { "data-testid": dataTestId && `${dataTestId}-fallback`, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ImageM, {}) }) }) });
+  }
+  return /* @__PURE__ */ jsx("img", { ref, src, alt, className, loading, draggable, onClick, "data-testid": dataTestId, onLoad: (event) => {
+    handleLoad(event);
+    onLoad?.(event);
+  }, onError: (event) => {
+    handleError();
+    onError?.(event);
+  } });
+};
+export {
+  ImageContent as default
+};

package/dist/shared/ImageContent.styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProps } from '@synerise/ds-core';
+export declare const DefaultFallback: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;

package/dist/shared/ImageContent.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const DefaultFallback = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ImageContentstyles__DefaultFallback",
+  componentId: "sc-ea3axh-0"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:", ";background-color:", ";"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"]);
+export {
+  DefaultFallback
+};

package/dist/shared/useImageStatus.d.ts

@@ -0,0 +1,17 @@
+import { RefObject, SyntheticEvent } from 'react';
+export type ImageStatus = 'loading' | 'loaded' | 'error';
+/**
+ * Tracks the load state of a single `<img>`. The single source of truth for
+ * "is this image broken?" across thumbnails and the preview.
+ *
+ * Attach `ref`, `handleLoad`, and `handleError` to the `<img>`. On `src`
+ * change the status resets to `loading`, then re-reads the element's cached
+ * `complete`/`naturalWidth` so an already-decoded (cached) image resolves
+ * without waiting for a load event that may have fired before this hook ran.
+ */
+export declare const useImageStatus: (src: string) => {
+    ref: RefObject<HTMLImageElement>;
+    status: ImageStatus;
+    handleLoad: (event: SyntheticEvent<HTMLImageElement>) => void;
+    handleError: () => void;
+};

package/dist/shared/useImageStatus.js

@@ -0,0 +1,28 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+const useImageStatus = (src) => {
+  const ref = useRef(null);
+  const [status, setStatus] = useState("loading");
+  useEffect(() => {
+    const node = ref.current;
+    if (node?.complete) {
+      setStatus(node.naturalWidth > 0 ? "loaded" : "error");
+    } else {
+      setStatus("loading");
+    }
+  }, [src]);
+  const handleLoad = useCallback((event) => {
+    setStatus(event.currentTarget.naturalWidth > 0 ? "loaded" : "error");
+  }, []);
+  const handleError = useCallback(() => {
+    setStatus("error");
+  }, []);
+  return {
+    ref,
+    status,
+    handleLoad,
+    handleError
+  };
+};
+export {
+  useImageStatus
+};

package/dist/shared/useImageTexts.d.ts

@@ -0,0 +1,8 @@
+import { ImageTexts } from './Image.shared.types';
+/**
+ * Resolves the control labels: DS-translated defaults (`DS.IMAGE.*`) shallow-
+ * merged with any consumer overrides. Returns plain strings so they work as
+ * both tooltip `title` and `aria-label`. Requires an `IntlProvider` ancestor
+ * (supplied by `@synerise/ds-core`'s `DSProvider`).
+ */
+export declare const useImageTexts: (texts?: Partial<ImageTexts>) => ImageTexts;

package/dist/shared/useImageTexts.js

@@ -0,0 +1,38 @@
+import { useIntl } from "react-intl";
+const useImageTexts = (texts) => {
+  const intl = useIntl();
+  return {
+    zoomIn: intl.formatMessage({
+      id: "DS.IMAGE.ZOOM-IN",
+      defaultMessage: "Zoom in"
+    }),
+    zoomOut: intl.formatMessage({
+      id: "DS.IMAGE.ZOOM-OUT",
+      defaultMessage: "Zoom out"
+    }),
+    nextImage: intl.formatMessage({
+      id: "DS.IMAGE.NEXT-IMAGE",
+      defaultMessage: "Next image"
+    }),
+    previousImage: intl.formatMessage({
+      id: "DS.IMAGE.PREVIOUS-IMAGE",
+      defaultMessage: "Previous image"
+    }),
+    download: intl.formatMessage({
+      id: "DS.IMAGE.DOWNLOAD",
+      defaultMessage: "Download"
+    }),
+    close: intl.formatMessage({
+      id: "DS.IMAGE.CLOSE",
+      defaultMessage: "Close"
+    }),
+    delete: intl.formatMessage({
+      id: "DS.IMAGE.DELETE",
+      defaultMessage: "Delete"
+    }),
+    ...texts || {}
+  };
+};
+export {
+  useImageTexts
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@synerise/ds-image",
+  "version": "0.1.0",
+  "description": "Image UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*.js": "./dist/*.js",
+    "./dist/*": "./dist/*.js"
+  },
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "pnpm run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "types": "tsc --noEmit",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.18.4",
+    "@synerise/ds-toolbar": "^1.1.62",
+    "@synerise/ds-tooltip": "^1.5.3",
+    "@synerise/ds-utils": "^1.10.1",
+    "react-zoom-pan-pinch": "^3.6.1"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": ">=3.12.0 <= 6.8",
+    "styled-components": "^5.3.3",
+    "vitest": "4"
+  },
+  "gitHead": "5452c886c6a70cc2847fdb50ccf376dfb93916e5"
+}