@eyesee/ui-components 0.8.0 → 0.10.0

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js

@@ -2,9 +2,10 @@ import { jsxs as f, Fragment as p, jsx as m } from "react/jsx-runtime";
 import { useRef as I, useState as E } from "react";
 import { createPortal as M } from "react-dom";
 import P from "../ImagePlaceholder.js";
-import d from "./ImageHoverPreview.module.scss.js";
-const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? document.body, g = (t, e, a) => Math.min(Math.max(t, e), a), j = ({ previewSize: t = w, ...e }) => {
-  const a = I(null), [s, c] = E(null);
+import u from "./ImageHoverPreview.module.scss.js";
+const w = 200, r = 8, d = 8, x = () => document.getElementById("modal") ?? document.body, g = (t, e, a) => Math.min(Math.max(t, e), a);
+function j({ previewSize: t = w, ...e }) {
+  const a = I(null), [s, i] = E(null);
   return /* @__PURE__ */ f(p, { children: [
     /* @__PURE__ */ m(
       P,
@@ -12,12 +13,12 @@ const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? docum
         ...e,
         imageAreaRef: a,
         onImageAreaMouseEnter: (l) => {
-          var i;
+          var c;
           l.stopPropagation();
-          const o = (i = a.current) == null ? void 0 : i.getBoundingClientRect();
+          const o = (c = a.current) == null ? void 0 : c.getBoundingClientRect();
           if (!o) return;
-          let n = o.right + u;
-          n + t > window.innerWidth - r && (n = o.left - t - u), n = g(
+          let n = o.right + d;
+          n + t > window.innerWidth - r && (n = o.left - t - d), n = g(
             n,
             r,
             window.innerWidth - t - r
@@ -27,10 +28,10 @@ const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? docum
             r,
             window.innerHeight - t - r
           );
-          c({ top: h, left: n });
+          i({ top: h, left: n });
         },
         onImageAreaMouseLeave: (l) => {
-          l.stopPropagation(), c(null);
+          l.stopPropagation(), i(null);
         }
       }
     ),
@@ -38,7 +39,7 @@ const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? docum
       /* @__PURE__ */ m(
         "div",
         {
-          className: d.preview,
+          className: u.preview,
           style: {
             top: s.top,
             left: s.left,
@@ -50,7 +51,7 @@ const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? docum
             {
               src: e.url,
               alt: e.text ?? "",
-              className: d.previewImage
+              className: u.previewImage
             }
           )
         }
@@ -58,7 +59,7 @@ const w = 200, r = 8, u = 8, x = () => document.getElementById("modal") ?? docum
       x()
     )
   ] });
-};
+}
 export {
   j as ImageHoverPreview
 };

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

@@ -0,0 +1,606 @@
+/**
+ * @callback ImagePlaceholderCheckedHandler
+ * @param {import('react').ChangeEvent<HTMLInputElement>|import('react').MouseEvent} [event]
+ *   Checkbox change or image-area click.
+ * @returns {void}
+ */
+/**
+ * @callback ImagePlaceholderCloseHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImagePlaceholderClickHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImagePlaceholderTagDismissHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImagePlaceholderMouseAreaHandler
+ * @param {import('react').MouseEvent} event
+ * @returns {void}
+ */
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ *
+ * @typedef {object} ImagePlaceholderPillTag
+ * @property {'pill'} type
+ * @property {string} [label]
+ *   Tag text (`text` alias supported).
+ * @property {string} [text]
+ *   Tag text alias for `label`.
+ * @property {'light'|'dark'|'outline'} [color]
+ *   {@link Pill} colour. Default first pill colour.
+ * @property {'turquoise'|'purple'|'green'|'red'|'yellow'|'orange'|'greenyellow'|'neutral'} [status]
+ *   {@link Pill} status. Default `'neutral'`.
+ * @property {React.ReactNode} [icon]
+ *   Optional {@link Pill} icon.
+ */
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ *
+ * @typedef {object} ImagePlaceholderBadgeTag
+ * @property {'badge'} type
+ * @property {string} [label]
+ *   Badge text (`text` alias supported).
+ * @property {string} [text]
+ *   Badge text alias for `label`.
+ * @property {'rectangle'|'pill'} [shape]
+ *   {@link Badge} shape. Default `'rectangle'`.
+ * @property {'neutral'|'warning'|'error'} [state]
+ *   {@link Badge} state. Default `'neutral'`.
+ */
+/**
+ * Tag config. Rendered as {@link Tag}.
+ *
+ * @typedef {object} ImagePlaceholderTagTag
+ * @property {'tag'} type
+ * @property {string} [label]
+ *   Tag text (`text` alias supported).
+ * @property {string} [text]
+ *   Tag text alias for `label`.
+ * @property {'rectangle'|'pill'} [shape]
+ *   {@link Tag} shape. Default `'rectangle'`.
+ * @property {'default'|'secondary'|'disabled'} [state]
+ *   {@link Tag} foreground state. Default `'default'`.
+ * @property {boolean} [showLeadingIcon=false]
+ *   Shows help icon. Default `false`.
+ * @property {ImagePlaceholderTagDismissHandler} [onDismiss]
+ *   Enables dismiss control on {@link Tag}.
+ */
+/** @typedef {ImagePlaceholderPillTag|ImagePlaceholderBadgeTag|ImagePlaceholderTagTag} ImagePlaceholderTagConfig */
+/**
+ * Context menu row passed to {@link ListItem}.
+ *
+ * @typedef {object} ImagePlaceholderMenuItem
+ * @property {string} title - Row label.
+ * @property {string} value  - Unique React key.
+ */
+/**
+ * Extra {@link Tooltip} props. Used only when `tooltipContent` is set.
+ *
+ * @typedef {object} ImagePlaceholderTooltipProps
+ * @property {'top'|'bottom'|'left'|'right'} [position='bottom']
+ * @property {'dark'|'light'}                [variant='light']
+ * @property {boolean}                       [showArrow=true]
+ */
+/**
+ * @typedef {object} ImagePlaceholderProps
+ *
+ * @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 {ImagePlaceholderTagConfig} [tag]
+ *   Optional {@link Pill}, {@link Badge}, or {@link Tag} on image or caption.
+ *
+ * @property {'checkbox'|'close'} [overlay]
+ *   Overlay control on the image.
+ * @property {boolean} [isChecked]
+ *   Checked state when `overlay` is `'checkbox'`.
+ * @property {ImagePlaceholderCheckedHandler} [onChecked]
+ *   Checkbox overlay toggle handler.
+ * @property {ImagePlaceholderMenuItem[]} [menu]
+ *   Three-dot menu items (shown when `text` is set).
+ *
+ * @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 (`-webkit-line-clamp`). Default `'1'`.
+ * @property {boolean} [disabled=false]
+ *   Disables interaction. Default `false`.
+ * @property {ImagePlaceholderCloseHandler} [onClose]
+ *   Close overlay click handler. Default `() => {}`.
+ *
+ * @property {React.ReactNode} [tooltipContent]
+ *   Wraps the card in {@link Tooltip} when set.
+ * @property {string} [tooltipTitle]
+ *   Tooltip heading.
+ * @property {ImagePlaceholderTooltipProps} [tooltipProps]
+ *   Extra {@link Tooltip} props. Default `{ variant: 'light', showArrow: true, position: 'bottom' }`.
+ *
+ * @property {import('react').Ref} [imageAreaRef]
+ *   Ref on the image area (used by {@link ImageHoverPreview}).
+ * @property {ImagePlaceholderMouseAreaHandler} [onImageAreaMouseEnter]
+ *   Mouse enter on the image area.
+ * @property {ImagePlaceholderMouseAreaHandler} [onImageAreaMouseLeave]
+ *   Mouse leave on the image area.
+ * @property {ImagePlaceholderClickHandler} [onClick]
+ *   Whole-card click handler (ignored when `disabled`).
+ *
+ * @property {boolean} [selected=false]
+ *   Selected-state styling. Default `false`.
+ * @property {'always'|'hover'} [overlayDisplay='always']
+ *   When to show the overlay. Default `'always'`.
+ *
+ * @see {@link Tooltip}
+ * @see {@link Button}
+ * @see {@link ListItem}
+ * @see {@link Pill}
+ * @see {@link Badge}
+ * @see {@link Tag}
+ * @see {@link Checkbox}
+ * @see {@link DropdownList}
+ * @see {@link EllipsisTooltip}
+ */
+/**
+ * Image card with optional caption, tag, overlay, tooltip, and context menu.
+ *
+ * ## 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** `ImagePlaceholderTagConfig` — 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'` — no default
+ * Overlay control on the image.
+ *
+ * **isChecked** `boolean` — no default
+ * Checked state when `overlay` is `'checkbox'`.
+ *
+ * **onChecked** `(event?) => void` — no default
+ * Checkbox overlay toggle handler.
+ *
+ * **menu** `ImagePlaceholderMenuItem[]` — no default
+ * Three-dot {@link ListItem} menu (shown when `text` is set).
+ * - `title` `string` — required. Row label.
+ * - `value` `string` — required. Unique key.
+ *
+ * **aspectRatio** `'1/1' | '4/3' | '16/9' | '9/16'` — default `'1/1'`
+ * Image frame aspect ratio.
+ *
+ * **lines** `'1' | '2'` — default `'1'`
+ * Max caption lines.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables interaction.
+ *
+ * **onClose** `() => void` — default `() => {}`
+ * Close overlay click handler.
+ *
+ * **tooltipContent** `ReactNode` — no default
+ * Wraps the card in {@link Tooltip} when set.
+ *
+ * **tooltipTitle** `string` — no default
+ * Tooltip heading.
+ *
+ * **tooltipProps** `ImagePlaceholderTooltipProps` — default `{ variant: 'light', showArrow: true, position: 'bottom' }`
+ * Extra {@link Tooltip} props. Used only when `tooltipContent` is set.
+ * - `position` `'top' | 'bottom' | 'left' | 'right'` — default `'bottom'`
+ * - `variant` `'dark' | 'light'` — default `'light'`
+ * - `showArrow` `boolean` — default `true`
+ *
+ * **imageAreaRef** `Ref` — no default
+ * Ref on the image area.
+ *
+ * **onImageAreaMouseEnter** `(event: MouseEvent) => void` — no default
+ * Mouse enter on the image area.
+ *
+ * **onImageAreaMouseLeave** `(event: MouseEvent) => void` — no default
+ * Mouse leave on the image area.
+ *
+ * **onClick** `() => void` — no default
+ * Whole-card click handler (ignored when `disabled`).
+ *
+ * **selected** `boolean` — default `false`
+ * Selected-state styling.
+ *
+ * **overlayDisplay** `'always' | 'hover'` — default `'always'`
+ * `'hover'` reveals the overlay only while hovered.
+ *
+ * @param {ImagePlaceholderProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Image caption" />
+ *
+ * @example <caption>Image only</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" />
+ *
+ * @example <caption>Two-line caption</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="This is a longer caption that wraps onto a second line."
+ *   lines="2"
+ * />
+ *
+ * @example <caption>With pill tag</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Tagged item"
+ *   tag={{ type: 'pill', label: 'Active', color: 'light', status: 'green' }}
+ * />
+ *
+ * @example <caption>With badge tag</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Album with overflow count"
+ *   tag={{ type: 'badge', label: '+100', shape: 'rectangle', state: 'neutral' }}
+ * />
+ *
+ * @example <caption>With tag</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Tagged asset"
+ *   tag={{ type: 'tag', label: 'Tag', shape: 'rectangle', state: 'secondary', showLeadingIcon: true }}
+ * />
+ *
+ * @example <caption>Tag on image</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   tag={{ type: 'pill', label: 'New', color: 'light', status: 'turquoise' }}
+ * />
+ *
+ * @example <caption>Checkbox overlay</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Selectable image"
+ *   overlay="checkbox"
+ *   isChecked={false}
+ * />
+ *
+ * @example <caption>Selected</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Selected card"
+ *   selected
+ *   overlay="checkbox"
+ *   isChecked
+ * />
+ *
+ * @example <caption>Selected vs default</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Default" overlay="checkbox" />
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Selected" selected overlay="checkbox" isChecked />
+ *
+ * @example <caption>Close overlay</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Dismissible image" overlay="close" />
+ *
+ * @example <caption>Overlay on hover</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Hover to reveal overlay"
+ *   overlay="checkbox"
+ *   overlayDisplay="hover"
+ * />
+ *
+ * @example <caption>Clickable</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Click anywhere on the card" overlay="checkbox" onClick={() => {}} />
+ *
+ * @example <caption>With tooltip</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Hover for preview" tooltipContent="Full-size preview image" />
+ *
+ * @example <caption>With tooltip title</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Asset thumbnail"
+ *   tooltipTitle="Asset ID"
+ *   tooltipContent="EXT-001 — uploaded 12 Jan 2026"
+ *   tooltipProps={{ variant: 'dark', showArrow: true, position: 'bottom' }}
+ * />
+ *
+ * @example <caption>Clickable with tooltip</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Select or preview"
+ *   tooltipContent="Click to select · hover for preview"
+ *   onClick={() => {}}
+ * />
+ *
+ * @example <caption>With context menu</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Click the three-dot icon"
+ *   menu={[
+ *     { title: 'Edit', value: 'edit' },
+ *     { title: 'Duplicate', value: 'duplicate' },
+ *     { title: 'Delete', value: 'delete' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Aspect ratios</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="1/1" aspectRatio="1/1" />
+ * <ImagePlaceholder url="https://picsum.photos/640/360" text="16/9" aspectRatio="16/9" />
+ * <ImagePlaceholder url="https://picsum.photos/270/480" text="9/16" aspectRatio="9/16" />
+ *
+ * @example <caption>Full — all features</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Project thumbnail with all options enabled"
+ *   tag={{ type: 'pill', label: 'Draft', color: 'light', status: 'orange' }}
+ *   overlay="checkbox"
+ *   isChecked
+ *   selected
+ *   aspectRatio="4/3"
+ *   lines="2"
+ *   menu={[
+ *     { title: 'Edit', value: 'edit' },
+ *     { title: 'Delete', value: 'delete' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Grid layout</caption>
+ * import { ImagePlaceholder } from '@eyesee/ui-components';
+ *
+ * <ImagePlaceholder
+ *   url="https://picsum.photos/400/400"
+ *   text="Alpha"
+ *   tag={{ type: 'pill', label: 'Active', color: 'light', status: 'green' }}
+ *   overlay="checkbox"
+ *   isChecked
+ *   selected
+ * />
+ * <ImagePlaceholder url="https://picsum.photos/400/400" text="Beta" overlay="checkbox" />
+ */
+export default function ImagePlaceholder({ id, url, text, textPosition, tag, overlay, isChecked, onChecked, menu, aspectRatio, lines, disabled, onClose, tooltipContent, tooltipTitle, tooltipProps, imageAreaRef, onImageAreaMouseEnter, onImageAreaMouseLeave, onClick, selected, overlayDisplay, }: ImagePlaceholderProps): import("react").ReactElement;
+export type ImagePlaceholderCheckedHandler = (event?: import("react").ChangeEvent<HTMLInputElement> | import("react").MouseEvent) => void;
+export type ImagePlaceholderCloseHandler = () => void;
+export type ImagePlaceholderClickHandler = () => void;
+export type ImagePlaceholderTagDismissHandler = () => void;
+export type ImagePlaceholderMouseAreaHandler = (event: import("react").MouseEvent) => void;
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ */
+export type ImagePlaceholderPillTag = {
+    type: "pill";
+    /**
+     * Tag text (`text` alias supported).
+     */
+    label?: string;
+    /**
+     * Tag text alias for `label`.
+     */
+    text?: string;
+    /**
+     * {@link Pill} colour. Default first pill colour.
+     */
+    color?: "light" | "dark" | "outline";
+    /**
+     * {@link Pill} status. Default `'neutral'`.
+     */
+    status?: "turquoise" | "purple" | "green" | "red" | "yellow" | "orange" | "greenyellow" | "neutral";
+    /**
+     * Optional {@link Pill} icon.
+     */
+    icon?: React.ReactNode;
+};
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ */
+export type ImagePlaceholderBadgeTag = {
+    type: "badge";
+    /**
+     * Badge text (`text` alias supported).
+     */
+    label?: string;
+    /**
+     * Badge text alias for `label`.
+     */
+    text?: string;
+    /**
+     * {@link Badge} shape. Default `'rectangle'`.
+     */
+    shape?: "rectangle" | "pill";
+    /**
+     * {@link Badge} state. Default `'neutral'`.
+     */
+    state?: "neutral" | "warning" | "error";
+};
+/**
+ * Tag config. Rendered as {@link Tag}.
+ */
+export type ImagePlaceholderTagTag = {
+    type: "tag";
+    /**
+     * Tag text (`text` alias supported).
+     */
+    label?: string;
+    /**
+     * Tag text alias for `label`.
+     */
+    text?: string;
+    /**
+     * {@link Tag} shape. Default `'rectangle'`.
+     */
+    shape?: "rectangle" | "pill";
+    /**
+     * {@link Tag} foreground state. Default `'default'`.
+     */
+    state?: "default" | "secondary" | "disabled";
+    /**
+     * Shows help icon. Default `false`.
+     */
+    showLeadingIcon?: boolean;
+    /**
+     * Enables dismiss control on {@link Tag}.
+     */
+    onDismiss?: ImagePlaceholderTagDismissHandler;
+};
+export type ImagePlaceholderTagConfig = ImagePlaceholderPillTag | ImagePlaceholderBadgeTag | ImagePlaceholderTagTag;
+/**
+ * Context menu row passed to {@link ListItem}.
+ */
+export type ImagePlaceholderMenuItem = {
+    /**
+     * - Row label.
+     */
+    title: string;
+    /**
+     * - Unique React key.
+     */
+    value: string;
+};
+/**
+ * Extra {@link Tooltip} props. Used only when `tooltipContent` is set.
+ */
+export type ImagePlaceholderTooltipProps = {
+    position?: "top" | "bottom" | "left" | "right";
+    variant?: "dark" | "light";
+    showArrow?: boolean;
+};
+export type ImagePlaceholderProps = {
+    /**
+     * 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} on image or caption.
+     */
+    tag?: ImagePlaceholderTagConfig;
+    /**
+     * Overlay control on the image.
+     */
+    overlay?: "checkbox" | "close";
+    /**
+     * Checked state when `overlay` is `'checkbox'`.
+     */
+    isChecked?: boolean;
+    /**
+     * Checkbox overlay toggle handler.
+     */
+    onChecked?: ImagePlaceholderCheckedHandler;
+    /**
+     * Three-dot menu items (shown when `text` is set).
+     */
+    menu?: ImagePlaceholderMenuItem[];
+    /**
+     * Image frame aspect ratio. Default `'1/1'`.
+     */
+    aspectRatio?: "1/1" | "4/3" | "16/9" | "9/16";
+    /**
+     * Max caption lines (`-webkit-line-clamp`). Default `'1'`.
+     */
+    lines?: "1" | "2";
+    /**
+     * Disables interaction. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Close overlay click handler. Default `() => {}`.
+     */
+    onClose?: ImagePlaceholderCloseHandler;
+    /**
+     * Wraps the card in {@link Tooltip} when set.
+     */
+    tooltipContent?: React.ReactNode;
+    /**
+     * Tooltip heading.
+     */
+    tooltipTitle?: string;
+    /**
+     * Extra {@link Tooltip} props. Default `{ variant: 'light', showArrow: true, position: 'bottom' }`.
+     */
+    tooltipProps?: ImagePlaceholderTooltipProps;
+    /**
+     * Ref on the image area (used by {@link ImageHoverPreview}).
+     */
+    imageAreaRef?: any;
+    /**
+     * Mouse enter on the image area.
+     */
+    onImageAreaMouseEnter?: ImagePlaceholderMouseAreaHandler;
+    /**
+     * Mouse leave on the image area.
+     */
+    onImageAreaMouseLeave?: ImagePlaceholderMouseAreaHandler;
+    /**
+     * Whole-card click handler (ignored when `disabled`).
+     */
+    onClick?: ImagePlaceholderClickHandler;
+    /**
+     * Selected-state styling. Default `false`.
+     */
+    selected?: boolean;
+    /**
+     * When to show the overlay. Default `'always'`.
+     */
+    overlayDisplay?: "always" | "hover";
+};

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -16,7 +16,7 @@ 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";
-const Eo = ({
+function Eo({
   id: g,
   url: E,
   text: a,
@@ -40,7 +40,7 @@ const Eo = ({
   onClick: u,
   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":
@@ -165,7 +165,7 @@ const Eo = ({
     g
   );
   return Y ? /* @__PURE__ */ e(G, { title: y, content: h, ...A, fullWidth: !0, children: k }) : k;
-};
+}
 export {
   Eo as default
 };