@eyesee/ui-components 0.7.0 → 0.9.0

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -1,118 +1,120 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useState as N } from "react";
 import t from "clsx";
-import { Checkbox as Y } from "../Checkbox/Checkbox.js";
-import { Tooltip as D } from "../Tooltip/Tooltip.js";
-import { tagPropsFromTag as G, badgePropsFromTag as V, pillPropsFromTag as q } from "./utilsImgPh.js";
-import { ASPECT_RATIOS as x, TAG_TYPES as I, OVERLAYS as H, TEXT_POSITIONS as S, LINES as J } from "./constantsImgPh.js";
-import { ImageOffIcon as K } from "../icons-v2/ImageOffIcon.js";
-import { MoreIcon as Q } from "../icons-v2/MoreIcon.js";
-import { XIcon as U } from "../icons-v2/XIcon.js";
-import e from "./ImagePlaceholder.module.scss.js";
-import { Button as Z } from "../Button/Button.js";
-import { EllipsisTooltip as $ } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { DropdownList as oo } from "../DropdownList/DropdownList.js";
-import { ListItem as eo } from "../ListItem/ListItem.js";
-import { Tag as ro } from "../Tag/Tag.js";
-import { Badge as lo } from "../Badge/Badge.js";
-import { Pill as so } from "../Pill/Pill.js";
-const Eo = ({
-  id: E,
-  url: g,
+import { Checkbox as D } from "../Checkbox/Checkbox.js";
+import { Tooltip as G } from "../Tooltip/Tooltip.js";
+import { tagPropsFromTag as H, badgePropsFromTag as V, pillPropsFromTag as q } from "./utilsImgPh.js";
+import { ASPECT_RATIOS as x, TAG_TYPES as I, OVERLAYS as J, TEXT_POSITIONS as S, LINES as K } from "./constantsImgPh.js";
+import { ImageOffIcon as Q } from "../icons-v2/ImageOffIcon.js";
+import { MoreIcon as U } from "../icons-v2/MoreIcon.js";
+import { XIcon as Z } from "../icons-v2/XIcon.js";
+import o from "./ImagePlaceholder.module.scss.js";
+import { Button as $ } from "../Button/Button.js";
+import { EllipsisTooltip as oo } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DropdownList as eo } from "../DropdownList/DropdownList.js";
+import { ListItem as ro } from "../ListItem/ListItem.js";
+import { Tag as lo } from "../Tag/Tag.js";
+import { Badge as so } from "../Badge/Badge.js";
+import { Pill as io } from "../Pill/Pill.js";
+function Eo({
+  id: g,
+  url: E,
   text: a,
   textPosition: m = S.inside,
   tag: l,
   overlay: s,
-  isChecked: C,
+  isChecked: w,
   onChecked: p,
   menu: d,
-  aspectRatio: P = x["1/1"],
-  lines: w = J[1],
-  disabled: i = !1,
+  aspectRatio: C = x["1/1"],
+  lines: P = K[1],
+  disabled: c = !1,
   onClose: L = () => {
   },
   tooltipContent: h,
-  tooltipTitle: A,
-  tooltipProps: y = { variant: "dark", showArrow: !1, position: "bottom" },
+  tooltipTitle: y,
+  tooltipProps: A = { variant: "light", showArrow: !0, position: "bottom" },
   imageAreaRef: M,
   onImageAreaMouseEnter: O,
   onImageAreaMouseLeave: B,
   onClick: u,
-  selected: F = !1
-}) => {
-  const [f, R] = N(!1), [n, z] = N(!1), b = () => {
+  selected: F = !1,
+  overlayDisplay: R = "always"
+}) {
+  const [f, W] = N(!1), [n, z] = N(!1), v = () => {
     switch (l == null ? void 0 : l.type) {
       case "pill":
-        return /* @__PURE__ */ o(so, { ...q(l) });
+        return /* @__PURE__ */ e(io, { ...q(l) });
       case "badge":
-        return /* @__PURE__ */ o(lo, { ...V(l) });
+        return /* @__PURE__ */ e(so, { ...V(l) });
       case "tag":
-        return /* @__PURE__ */ o(ro, { ...G(l) });
+        return /* @__PURE__ */ e(lo, { ...H(l) });
       default:
         return null;
     }
-  }, T = !a || m === S.outside ? "8px" : "8px 8px 0 0", W = Number(w), _ = t(e.contentText, e.contentTextClamped), j = { WebkitLineClamp: W }, X = !!h, k = !!u && !i, v = /* @__PURE__ */ c(
+  }, b = !a || m === S.outside ? "8px" : "8px 8px 0 0", _ = Number(P), j = t(o.contentText, o.contentTextClamped), X = { WebkitLineClamp: _ }, Y = !!h, T = !!u && !c, k = /* @__PURE__ */ i(
     "div",
     {
       className: t(
-        e.imagePlaceholder,
-        i && e.disabled,
-        k && e.clickable,
-        F && e.selected
+        o.imagePlaceholder,
+        c && o.disabled,
+        T && o.clickable,
+        F && o.selected,
+        R === "hover" && o.overlayHover
       ),
-      onClick: k ? u : void 0,
+      onClick: T ? u : void 0,
       children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ i(
           "div",
           {
             ref: M,
             className: t(
-              e.imageArea,
-              s === "checkbox" && e.clickable,
-              s === "checkbox" && !n && e.checkboxSelectable
+              o.imageArea,
+              s === "checkbox" && o.clickable,
+              s === "checkbox" && !n && o.checkboxSelectable
             ),
-            style: { borderRadius: T },
-            onClick: s === "checkbox" && !n && !i ? p : void 0,
+            style: { borderRadius: b },
+            onClick: s === "checkbox" && !n && !c ? p : void 0,
             onMouseEnter: O,
             onMouseLeave: B,
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e.imageFrame,
-                  style: { aspectRatio: x[P], borderRadius: T },
-                  children: n ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
-                    K,
+                  className: o.imageFrame,
+                  style: { aspectRatio: x[C], borderRadius: b },
+                  children: n ? /* @__PURE__ */ e("div", { className: o.imageError, children: /* @__PURE__ */ e(
+                    Q,
                     {
                       iconSize: "l",
                       strokeColor: "var(--color--icon--disabled--default)"
                     }
-                  ) }) : /* @__PURE__ */ o(
+                  ) }) : /* @__PURE__ */ e(
                     "img",
                     {
-                      className: e.image,
-                      src: g,
+                      className: o.image,
+                      src: E,
                       alt: a,
                       onError: () => z(!0)
                     }
                   )
                 }
               ),
-              !a && I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: b() }) : null,
-              H.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (r) => r.stopPropagation(), children: [
-                s === "checkbox" && !n ? /* @__PURE__ */ o(
-                  Y,
+              !a && I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { className: o.tagInImage, children: v() }) : null,
+              J.has(s) && /* @__PURE__ */ i("div", { className: o.overlay, onClick: (r) => r.stopPropagation(), children: [
+                s === "checkbox" && !n ? /* @__PURE__ */ e(
+                  D,
                   {
-                    checked: C,
+                    checked: w,
                     onChange: p,
                     size: "lg",
-                    disabled: i
+                    disabled: c
                   }
                 ) : null,
-                s === "close" ? /* @__PURE__ */ o(
-                  Z,
+                s === "close" ? /* @__PURE__ */ e(
+                  $,
                   {
-                    icon: /* @__PURE__ */ o(U, {}),
+                    icon: /* @__PURE__ */ e(Z, {}),
                     size: "xxs",
                     variant: "fill",
                     type: "neutral",
@@ -123,31 +125,31 @@ const Eo = ({
             ]
           }
         ),
-        a ? /* @__PURE__ */ c("div", { className: t(e.belowImage, e[m]), children: [
-          I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ o("div", { children: b() }) : null,
-          /* @__PURE__ */ c("div", { className: e.content, children: [
-            /* @__PURE__ */ o(
-              $,
+        a ? /* @__PURE__ */ i("div", { className: t(o.belowImage, o[m]), children: [
+          I.has(l == null ? void 0 : l.type) ? /* @__PURE__ */ e("div", { children: v() }) : null,
+          /* @__PURE__ */ i("div", { className: o.content, children: [
+            /* @__PURE__ */ e(
+              oo,
               {
                 position: "bottom",
                 showArrow: !0,
-                className: _,
-                wrapperStyle: j,
+                className: j,
+                wrapperStyle: X,
                 children: a
               }
             ),
-            d && /* @__PURE__ */ c("div", { className: e.menu, children: [
-              /* @__PURE__ */ o(
+            d && /* @__PURE__ */ i("div", { className: o.menu, children: [
+              /* @__PURE__ */ e(
                 "span",
                 {
                   onClick: (r) => {
-                    r.stopPropagation(), R(!f);
+                    r.stopPropagation(), W(!f);
                   },
-                  children: /* @__PURE__ */ o(Q, {})
+                  children: /* @__PURE__ */ e(U, {})
                 }
               ),
-              f && /* @__PURE__ */ o(oo, { children: d.map((r) => /* @__PURE__ */ o(
-                eo,
+              f && /* @__PURE__ */ e(eo, { children: d.map((r) => /* @__PURE__ */ e(
+                ro,
                 {
                   title: r == null ? void 0 : r.title,
                   value: r == null ? void 0 : r.value,
@@ -160,10 +162,10 @@ const Eo = ({
         ] }) : null
       ]
     },
-    E
+    g
   );
-  return X ? /* @__PURE__ */ o(D, { title: A, content: h, ...y, children: v }) : v;
-};
+  return Y ? /* @__PURE__ */ e(G, { title: y, content: h, ...A, fullWidth: !0, children: k }) : k;
+}
 export {
   Eo as default
 };

package/dist/components/ImagePlaceholder/ImagePlaceholder.module.scss.js

@@ -1,41 +1,43 @@
-const e = "_imagePlaceholder_1kga2_3", a = "_selected_1kga2_9", t = "_clickable_1kga2_13", _ = "_disabled_1kga2_16", c = "_imageArea_1kga2_22", o = "_checkboxSelectable_1kga2_34", n = "_imageFrame_1kga2_39", g = "_image_1kga2_3", l = "_imageError_1kga2_55", s = "_tagInImage_1kga2_62", i = "_overlay_1kga2_67", m = "_belowImage_1kga2_72", k = "_inside_1kga2_81", d = "_outside_1kga2_85", r = "_content_1kga2_89", b = "_contentText_1kga2_95", x = "_contentTextClamped_1kga2_109", I = "_menu_1kga2_114", u = {
+const e = "_imagePlaceholder_kbkw0_3", t = "_selected_kbkw0_9", _ = "_clickable_kbkw0_13", o = "_disabled_kbkw0_16", a = "_overlayHover_kbkw0_22", c = "_overlay_kbkw0_22", n = "_imageArea_kbkw0_28", k = "_checkboxSelectable_kbkw0_40", l = "_imageFrame_kbkw0_45", b = "_image_kbkw0_3", s = "_imageError_kbkw0_61", i = "_tagInImage_kbkw0_68", m = "_belowImage_kbkw0_78", r = "_inside_kbkw0_87", g = "_outside_kbkw0_91", d = "_content_kbkw0_95", w = "_contentText_kbkw0_101", x = "_contentTextClamped_kbkw0_115", v = "_menu_kbkw0_120", I = {
   imagePlaceholder: e,
-  selected: a,
-  clickable: t,
-  disabled: _,
-  imageArea: c,
-  checkboxSelectable: o,
-  imageFrame: n,
-  image: g,
-  imageError: l,
-  tagInImage: s,
-  overlay: i,
+  selected: t,
+  clickable: _,
+  disabled: o,
+  overlayHover: a,
+  overlay: c,
+  imageArea: n,
+  checkboxSelectable: k,
+  imageFrame: l,
+  image: b,
+  imageError: s,
+  tagInImage: i,
   belowImage: m,
-  inside: k,
-  outside: d,
-  content: r,
-  contentText: b,
+  inside: r,
+  outside: g,
+  content: d,
+  contentText: w,
   contentTextClamped: x,
-  menu: I
+  menu: v
 };
 export {
   m as belowImage,
-  o as checkboxSelectable,
-  t as clickable,
-  r as content,
-  b as contentText,
+  k as checkboxSelectable,
+  _ as clickable,
+  d as content,
+  w as contentText,
   x as contentTextClamped,
-  u as default,
-  _ as disabled,
-  g as image,
-  c as imageArea,
-  l as imageError,
-  n as imageFrame,
+  I as default,
+  o as disabled,
+  b as image,
+  n as imageArea,
+  s as imageError,
+  l as imageFrame,
   e as imagePlaceholder,
-  k as inside,
-  I as menu,
-  d as outside,
-  i as overlay,
-  a as selected,
-  s as tagInImage
+  r as inside,
+  v as menu,
+  g as outside,
+  c as overlay,
+  a as overlayHover,
+  t as selected,
+  i as tagInImage
 };

package/dist/components/ImagePlaceholder/constantsImgPh.d.ts

@@ -0,0 +1,16 @@
+export const ASPECT_RATIOS: {
+    '1/1': string;
+    '4/3': string;
+    '16/9': string;
+    '9/16': string;
+};
+export const LINES: {
+    1: string;
+    2: string;
+};
+export namespace TEXT_POSITIONS {
+    let inside: string;
+    let outside: string;
+}
+export const TAG_TYPES: Set<string>;
+export const OVERLAYS: Set<string>;

package/dist/components/ImagePlaceholder/utilsImgPh.d.ts

@@ -0,0 +1,18 @@
+export function tagPropsFromTag(tag: any): {
+    label: any;
+    shape: any;
+    state: any;
+    showLeadingIcon: boolean;
+    onDismiss: any;
+};
+export function badgePropsFromTag(tag: any): {
+    label: any;
+    shape: any;
+    state: any;
+};
+export function pillPropsFromTag(tag: any): {
+    label: any;
+    color: any;
+    status: string;
+    icon: any;
+};

package/dist/components/ImageWithData/ImageWithData.d.ts

@@ -0,0 +1,284 @@
+/**
+ * @callback ImageWithDataCheckedHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImageWithDataCloseHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImageWithDataIconClickHandler
+ * @returns {void}
+ */
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ *
+ * @typedef {object} ImageWithDataPillTag
+ * @property {'pill'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'light'|'dark'|'outline'} [color]
+ * @property {'turquoise'|'purple'|'green'|'red'|'yellow'|'orange'|'greenyellow'|'neutral'} [status]
+ * @property {React.ReactNode} [icon]
+ */
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ *
+ * @typedef {object} ImageWithDataBadgeTag
+ * @property {'badge'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'rectangle'|'pill'} [shape]
+ * @property {'neutral'|'warning'|'error'} [state]
+ */
+/**
+ * Tag config. Rendered as {@link Tag}.
+ *
+ * @typedef {object} ImageWithDataTagTag
+ * @property {'tag'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'rectangle'|'pill'} [shape]
+ * @property {'default'|'secondary'|'disabled'} [state]
+ * @property {boolean} [showLeadingIcon=false]
+ * @property {() => void} [onDismiss]
+ */
+/** @typedef {ImageWithDataPillTag|ImageWithDataBadgeTag|ImageWithDataTagTag} ImageWithDataTagConfig */
+/**
+ * @typedef {object} ImageWithDataProps
+ *
+ * @property {string} [id]
+ *   React key / card identifier.
+ * @property {string} [url]
+ *   Image source URL.
+ * @property {string} [text]
+ *   Caption below the image.
+ * @property {'inside'|'outside'} [textPosition='inside']
+ *   Caption placement. Default `'inside'`.
+ * @property {ImageWithDataTagConfig} [tag]
+ *   Optional {@link Pill}, {@link Badge}, or {@link Tag}.
+ *
+ * @property {'checkbox'|'close'|'icon'} [overlay]
+ *   Overlay control on the image.
+ * @property {boolean} [isChecked]
+ *   Checked state when `overlay` is `'checkbox'`.
+ * @property {ImageWithDataCheckedHandler} [onChecked]
+ *   Checkbox overlay toggle handler.
+ *
+ * @property {'1/1'|'4/3'|'16/9'|'9/16'} [aspectRatio='1/1']
+ *   Image frame aspect ratio. Default `'1/1'`.
+ * @property {'1'|'2'} [lines='1']
+ *   Max caption lines. Default `'1'`.
+ * @property {string|number|null} [number=null]
+ *   Metric shown beside the caption. Default `null`.
+ *
+ * @property {boolean} [disabled=false]
+ *   Disables the whole card. Default `false`.
+ * @property {boolean} [disabledOverlay=false]
+ *   Disables overlay controls only. Default `false`.
+ * @property {ImageWithDataCloseHandler} [onClose]
+ *   Close overlay click handler.
+ * @property {React.ReactNode} [icon]
+ *   Icon for `overlay="icon"`.
+ * @property {ImageWithDataIconClickHandler} [onIconClick]
+ *   Icon overlay click handler.
+ *
+ * @see {@link Button}
+ * @see {@link Pill}
+ * @see {@link Badge}
+ * @see {@link Tag}
+ * @see {@link Checkbox}
+ * @see {@link EllipsisTooltip}
+ */
+/**
+ * Image card with caption, optional tag, overlay controls, and supporting number.
+ *
+ * ## Props
+ *
+ * **id** `string` — no default
+ * React key / card identifier.
+ *
+ * **url** `string` — no default
+ * Image source URL.
+ *
+ * **text** `string` — no default
+ * Caption below the image.
+ *
+ * **textPosition** `'inside' | 'outside'` — default `'inside'`
+ * Caption placement relative to the card.
+ *
+ * **tag** `ImageWithDataTagConfig` — no default
+ * Optional tag on the image (no caption) or above the caption.
+ * - Pill: `type: 'pill'`, `label`, `color`, `status`, `icon`
+ * - Badge: `type: 'badge'`, `label`, `shape`, `state`
+ * - Tag: `type: 'tag'`, `label`, `shape`, `state`, `showLeadingIcon`, `onDismiss`
+ *
+ * **overlay** `'checkbox' | 'close' | 'icon'` — no default
+ * Overlay control on the image.
+ *
+ * **isChecked** `boolean` — no default
+ * Checked state when `overlay` is `'checkbox'`.
+ *
+ * **onChecked** `() => void` — no default
+ * Checkbox overlay toggle handler.
+ *
+ * **aspectRatio** `'1/1' | '4/3' | '16/9' | '9/16'` — default `'1/1'`
+ * Image frame aspect ratio.
+ *
+ * **lines** `'1' | '2'` — default `'1'`
+ * Max caption lines.
+ *
+ * **number** `string | number | null` — default `null`
+ * Metric shown beside the caption.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables the whole card.
+ *
+ * **disabledOverlay** `boolean` — default `false`
+ * Disables overlay controls only (also implied when `disabled`).
+ *
+ * **onClose** `() => void` — no default
+ * Close overlay click handler.
+ *
+ * **icon** `ReactNode` — no default
+ * Icon for `overlay="icon"` (rendered in {@link Button}).
+ *
+ * **onIconClick** `() => void` — no default
+ * Icon overlay click handler.
+ *
+ * @param {ImageWithDataProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData id="storybook-image" url="https://picsum.photos/400/400" text="Image caption" />
+ *
+ * @example <caption>WithNumber</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image with supporting number" number={12} />
+ *
+ * @example <caption>WithTag</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData
+ *   url="https://picsum.photos/400/400"
+ *   text="Image caption"
+ *   tag={{ type: 'pill', label: 'Active', color: 'light', status: 'green' }}
+ * />
+ *
+ * @example <caption>CheckboxOverlay</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image caption" overlay="checkbox" />
+ *
+ * @example <caption>Disabled</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image caption" disabled overlay="checkbox" isChecked />
+ */
+export default function ImageWithData({ id, url, text, textPosition, tag, overlay, isChecked, onChecked, aspectRatio, lines, number, disabled, disabledOverlay, onClose, icon, onIconClick, }: ImageWithDataProps): import("react").ReactElement;
+export type ImageWithDataCheckedHandler = () => void;
+export type ImageWithDataCloseHandler = () => void;
+export type ImageWithDataIconClickHandler = () => void;
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ */
+export type ImageWithDataPillTag = {
+    type: "pill";
+    label?: string;
+    text?: string;
+    color?: "light" | "dark" | "outline";
+    status?: "turquoise" | "purple" | "green" | "red" | "yellow" | "orange" | "greenyellow" | "neutral";
+    icon?: React.ReactNode;
+};
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ */
+export type ImageWithDataBadgeTag = {
+    type: "badge";
+    label?: string;
+    text?: string;
+    shape?: "rectangle" | "pill";
+    state?: "neutral" | "warning" | "error";
+};
+/**
+ * Tag config. Rendered as {@link Tag}.
+ */
+export type ImageWithDataTagTag = {
+    type: "tag";
+    label?: string;
+    text?: string;
+    shape?: "rectangle" | "pill";
+    state?: "default" | "secondary" | "disabled";
+    showLeadingIcon?: boolean;
+    onDismiss?: () => void;
+};
+export type ImageWithDataTagConfig = ImageWithDataPillTag | ImageWithDataBadgeTag | ImageWithDataTagTag;
+export type ImageWithDataProps = {
+    /**
+     * React key / card identifier.
+     */
+    id?: string;
+    /**
+     * Image source URL.
+     */
+    url?: string;
+    /**
+     * Caption below the image.
+     */
+    text?: string;
+    /**
+     * Caption placement. Default `'inside'`.
+     */
+    textPosition?: "inside" | "outside";
+    /**
+     * Optional {@link Pill}, {@link Badge}, or {@link Tag}.
+     */
+    tag?: ImageWithDataTagConfig;
+    /**
+     * Overlay control on the image.
+     */
+    overlay?: "checkbox" | "close" | "icon";
+    /**
+     * Checked state when `overlay` is `'checkbox'`.
+     */
+    isChecked?: boolean;
+    /**
+     * Checkbox overlay toggle handler.
+     */
+    onChecked?: ImageWithDataCheckedHandler;
+    /**
+     * Image frame aspect ratio. Default `'1/1'`.
+     */
+    aspectRatio?: "1/1" | "4/3" | "16/9" | "9/16";
+    /**
+     * Max caption lines. Default `'1'`.
+     */
+    lines?: "1" | "2";
+    /**
+     * Metric shown beside the caption. Default `null`.
+     */
+    number?: string | number | null;
+    /**
+     * Disables the whole card. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Disables overlay controls only. Default `false`.
+     */
+    disabledOverlay?: boolean;
+    /**
+     * Close overlay click handler.
+     */
+    onClose?: ImageWithDataCloseHandler;
+    /**
+     * Icon for `overlay="icon"`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon overlay click handler.
+     */
+    onIconClick?: ImageWithDataIconClickHandler;
+};