@quen-ui/components 0.0.14

package/dist/Dropdown/types.d.ts

@@ -0,0 +1,81 @@
+import { default as React, RefObject } from 'react';
+import { TransitionStatus } from 'react-transition-state';
+import { TQuenSize } from '../types/size';
+export declare const direction: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight", "bottom", "top", "left", "right"];
+export type TDropdownSortGroup = (a: string | number, b: string | number) => number;
+export type TDropdownDirection = (typeof direction)[number];
+export type TDropdownOnClick<Item> = (item: Item, event: React.MouseEvent) => void;
+export interface IDropdownDefaultItem {
+    key?: string | number;
+    label: React.ReactNode;
+    leftContent?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: TDropdownOnClick<IDropdownDefaultItem>;
+    groupId?: string | number;
+}
+export interface IDropdownMappersItem<ITEM> {
+    /** Label renderer */
+    getItemLabel?: TDropdownGetItemLabel<ITEM>;
+    /** Unique key extractor */
+    getItemKey?: TDropdownGetItemKey<ITEM>;
+    /** Disable state checker */
+    getItemDisabled?: TDropdownGetItemDisabled<ITEM>;
+    getItemLeftContent?: TDropdownGetItemLeftContent<ITEM>;
+    /** Group identifier */
+    getItemGroupId?: TDropdownGetItemGroupId<ITEM>;
+    getItemOnClick?: TDropdownGetItemOnClick<ITEM>;
+}
+export interface IDropdownProps<ITEM = IDropdownDefaultItem> extends IDropdownMappersItem<ITEM> {
+    /** Opening direction */
+    direction?: TDropdownDirection;
+    /** Array of dropdown items */
+    items?: ITEM[];
+    /** Item selection handler */
+    onItemClick?: TDropdownOnClick<ITEM>;
+    /** Click outside handler */
+    onClickOutside?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /**	Group sorting function */
+    sortGroup?: TDropdownSortGroup;
+    /** Custom close handler */
+    onClickClose?: () => void;
+    /** Custom width */
+    width?: string;
+    /** Custom height */
+    height?: string;
+    /**	Controls visibility */
+    open?: boolean;
+    /**  */
+    content?: React.ReactElement;
+    /** Disable close on outside click */
+    notCloseOutside?: boolean;
+    /** Disable entire dropdown */
+    disabled?: boolean;
+    /** Size variant */
+    size?: TQuenSize;
+    /** Reference to anchor element */
+    anchorRef: RefObject<HTMLElement | null>;
+}
+export type TDropdownListProps<Item> = Omit<IDropdownProps<Item>, "children" | "height"> & {
+    top?: number;
+    left?: number;
+};
+export type TDropdownPortalProps<Item> = Omit<TDropdownListProps<Item>, "children" | "ref"> & {
+    direction: TDropdownDirection;
+    anchorRect: DOMRect;
+    height?: string;
+    anchorRef: React.RefObject<HTMLElement | null>;
+    transitionStatus: TransitionStatus;
+};
+export type TDropdownGetItemLabel<Item> = (item: Item) => React.ReactNode;
+export type TDropdownGetItemKey<Item> = (item: Item) => string | number | undefined;
+export type TDropdownGetItemDisabled<Item> = (item: Item) => boolean | undefined;
+export type TDropdownGetItemLeftContent<Item> = (item: Item) => React.ReactNode | undefined;
+export type TDropdownGetItemGroupId<Item> = (item: Item) => string | number | undefined;
+export type TDropdownGetItemOnClick<Item> = (item: Item) => TDropdownOnClick<Item> | undefined;
+export type TDropdownItemProps<ITEM> = Omit<IDropdownMappersItem<ITEM>, "getItemKey" | "getItemGroupId"> & Required<Pick<IDropdownMappersItem<ITEM>, "getItemLabel">> & {
+    item: ITEM;
+    onItemClick?: TDropdownOnClick<ITEM>;
+    size: TQuenSize;
+};

package/dist/Flex/Flex.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const Flex = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(styles.FlexWrapper, { ref, ...props, children });
+  }
+);
+module.exports = Flex;

package/dist/Flex/Flex.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IFlexProps } from './types';
+declare const Flex: React.ForwardRefExoticComponent<IFlexProps & React.RefAttributes<unknown>>;
+export default Flex;

package/dist/Flex/Flex.es.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FlexWrapper } from "./styles.es.js";
+const Flex = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(FlexWrapper, { ref, ...props, children });
+  }
+);
+export {
+  Flex as default
+};

package/dist/Flex/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Flex } from './Flex';
+export type { IFlexProps } from './types';

package/dist/Flex/styles.cjs.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getGap = (theme, gap) => {
+  if (typeof gap === "number") {
+    return `${gap}px`;
+  } else if (gap) {
+    return theme.space[gap];
+  }
+  return void 0;
+};
+const FlexWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => ![
+    "direction",
+    "gap",
+    "align",
+    "columnGap",
+    "rowGap",
+    "justify",
+    "wrap"
+  ].includes(prop)
+}).attrs({ className: "quen-ui__flex" })`
+  display: flex;
+  flex-direction: ${({ direction }) => direction || "row"};
+  gap: ${({ gap, theme }) => getGap(theme, gap)};
+  align-items: ${({ align }) => align};
+  column-gap: ${({ columnGap, theme }) => getGap(theme, columnGap)};
+  row-gap: ${({ rowGap, theme }) => getGap(theme, rowGap)};
+  justify-content: ${({ justify }) => justify};
+  flex-wrap: ${({ wrap }) => wrap};
+`;
+exports.FlexWrapper = FlexWrapper;

package/dist/Flex/styles.d.ts

@@ -0,0 +1,2 @@
+import { IFlexProps } from './types';
+export declare const FlexWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, Omit<IFlexProps, "children">>> & string;

package/dist/Flex/styles.es.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+const getGap = (theme, gap) => {
+  if (typeof gap === "number") {
+    return `${gap}px`;
+  } else if (gap) {
+    return theme.space[gap];
+  }
+  return void 0;
+};
+const FlexWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => ![
+    "direction",
+    "gap",
+    "align",
+    "columnGap",
+    "rowGap",
+    "justify",
+    "wrap"
+  ].includes(prop)
+}).attrs({ className: "quen-ui__flex" })`
+  display: flex;
+  flex-direction: ${({ direction }) => direction || "row"};
+  gap: ${({ gap, theme }) => getGap(theme, gap)};
+  align-items: ${({ align }) => align};
+  column-gap: ${({ columnGap, theme }) => getGap(theme, columnGap)};
+  row-gap: ${({ rowGap, theme }) => getGap(theme, rowGap)};
+  justify-content: ${({ justify }) => justify};
+  flex-wrap: ${({ wrap }) => wrap};
+`;
+export {
+  FlexWrapper
+};

package/dist/Flex/types.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { IQuenUITheme } from '../../../theme/src';
+export interface IFlexProps {
+    /** Additional style */
+    style?: React.CSSProperties;
+    /**	Custom CSS class */
+    className?: string;
+    /** Content */
+    children?: React.ReactNode;
+    /** Spacing between all children (CSS gap) */
+    gap?: keyof IQuenUITheme["space"] | number;
+    /** Cross-axis alignment (align-items) */
+    align?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    /** Horizontal spacing between columns */
+    columnGap?: keyof IQuenUITheme["space"] | number;
+    /** Vertical spacing between rows */
+    rowGap?: keyof IQuenUITheme["space"] | number;
+    /** Main axis direction */
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /** Main-axis alignment (justify-content) */
+    justify?: "start" | "center" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    wrap?: "wrap" | "wrap-reverse" | "no-wrap";
+}

package/dist/Image/Image.cjs.js

@@ -0,0 +1,79 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Loader = require("../Loader/Loader.cjs.js");
+const Image = ({
+  src,
+  fallback,
+  onError,
+  alt,
+  height,
+  width,
+  placeholder,
+  preview = false,
+  ...props
+}) => {
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(!src);
+  React.useEffect(() => setError(!src), [src]);
+  const handleImageError = (e) => {
+    setError(true);
+    if (onError) {
+      onError(e);
+    }
+  };
+  const handleClick = () => {
+    if (preview && !error && src) {
+      setIsFullScreen(true);
+      setIsLoading(true);
+    }
+  };
+  const handleCloseFullscreen = () => {
+    setIsFullScreen(false);
+  };
+  const imageSrc = error && fallback ? fallback : src;
+  const showPlaceholder = (!imageSrc || error) && placeholder;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.ImageContainer,
+      {
+        height,
+        preview: preview && !error && !!src,
+        width,
+        onClick: handleClick,
+        ...props,
+        children: showPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(styles.ImagePlaceholderWrapper, { children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            styles.ImageStyled,
+            {
+              src: imageSrc,
+              alt,
+              onError: handleImageError,
+              onLoad: () => setIsLoading(false)
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(styles.ImageLoaderWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { view: "oval" }) }),
+          preview && !error && src && /* @__PURE__ */ jsxRuntime.jsx(styles.ImagePreviewOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "m", color: "unset", children: "Preview" }) })
+        ] })
+      }
+    ),
+    isFullScreen && /* @__PURE__ */ jsxRuntime.jsxs(styles.ImageFullscreenOverlay, { onClick: handleCloseFullscreen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(styles.CloseButtonStyled, { view: "icon", onClick: handleCloseFullscreen, children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        styles.ImageFullscreenStyled,
+        {
+          src,
+          alt,
+          onClick: (e) => e.stopPropagation(),
+          onLoad: () => setIsLoading(false)
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx(styles.ImageLoaderWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { view: "oval" }) })
+    ] })
+  ] });
+};
+module.exports = Image;

package/dist/Image/Image.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IImageProps } from './types';
+declare const Image: ({ src, fallback, onError, alt, height, width, placeholder, preview, ...props }: IImageProps) => React.ReactNode;
+export default Image;

package/dist/Image/Image.es.js

@@ -0,0 +1,80 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+import { ImageContainer, ImagePlaceholderWrapper, ImageStyled, ImageLoaderWrapper, ImagePreviewOverlay, ImageFullscreenOverlay, CloseButtonStyled, ImageFullscreenStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Loader from "../Loader/Loader.es.js";
+const Image = ({
+  src,
+  fallback,
+  onError,
+  alt,
+  height,
+  width,
+  placeholder,
+  preview = false,
+  ...props
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(!src);
+  useEffect(() => setError(!src), [src]);
+  const handleImageError = (e) => {
+    setError(true);
+    if (onError) {
+      onError(e);
+    }
+  };
+  const handleClick = () => {
+    if (preview && !error && src) {
+      setIsFullScreen(true);
+      setIsLoading(true);
+    }
+  };
+  const handleCloseFullscreen = () => {
+    setIsFullScreen(false);
+  };
+  const imageSrc = error && fallback ? fallback : src;
+  const showPlaceholder = (!imageSrc || error) && placeholder;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ImageContainer,
+      {
+        height,
+        preview: preview && !error && !!src,
+        width,
+        onClick: handleClick,
+        ...props,
+        children: showPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholderWrapper, { children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ImageStyled,
+            {
+              src: imageSrc,
+              alt,
+              onError: handleImageError,
+              onLoad: () => setIsLoading(false)
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx(ImageLoaderWrapper, { children: /* @__PURE__ */ jsx(Loader, { view: "oval" }) }),
+          preview && !error && src && /* @__PURE__ */ jsx(ImagePreviewOverlay, { children: /* @__PURE__ */ jsx(Text, { size: "m", color: "unset", children: "Preview" }) })
+        ] })
+      }
+    ),
+    isFullScreen && /* @__PURE__ */ jsxs(ImageFullscreenOverlay, { onClick: handleCloseFullscreen, children: [
+      /* @__PURE__ */ jsx(CloseButtonStyled, { view: "icon", onClick: handleCloseFullscreen, children: /* @__PURE__ */ jsx(SvgIconClose, {}) }),
+      /* @__PURE__ */ jsx(
+        ImageFullscreenStyled,
+        {
+          src,
+          alt,
+          onClick: (e) => e.stopPropagation(),
+          onLoad: () => setIsLoading(false)
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx(ImageLoaderWrapper, { children: /* @__PURE__ */ jsx(Loader, { view: "oval" }) })
+    ] })
+  ] });
+};
+export {
+  Image as default
+};

package/dist/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Image } from './Image';
+export type { IImageProps } from './types';

package/dist/Image/styles.cjs.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const Button = require("../Button/Button.cjs.js");
+const ImageContainer = styled.div`
+  position: relative;
+  width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
+  height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};
+  display: inline-block;
+  cursor: ${({ preview }) => preview ? "pointer" : "default"};
+`;
+const ImageStyled = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+`;
+const ImagePlaceholderWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+`;
+const ImagePreviewOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.2rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+  ${ImageContainer}:hover & {
+    opacity: 1;
+  }
+`;
+const ImageFullscreenOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${({ theme }) => polished.rgba(theme.colors.gray["2"], 0.5)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+const ImageFullscreenStyled = styled.img`
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+`;
+const CloseButtonStyled = styled(Button)`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1001;
+`;
+const ImageLoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.3s ease;
+`;
+exports.CloseButtonStyled = CloseButtonStyled;
+exports.ImageContainer = ImageContainer;
+exports.ImageFullscreenOverlay = ImageFullscreenOverlay;
+exports.ImageFullscreenStyled = ImageFullscreenStyled;
+exports.ImageLoaderWrapper = ImageLoaderWrapper;
+exports.ImagePlaceholderWrapper = ImagePlaceholderWrapper;
+exports.ImagePreviewOverlay = ImagePreviewOverlay;
+exports.ImageStyled = ImageStyled;

package/dist/Image/styles.d.ts

@@ -0,0 +1,13 @@
+import { IImageProps } from './types';
+export declare const ImageContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width: IImageProps["width"];
+    height: IImageProps["height"];
+    preview: IImageProps["preview"];
+}>> & string;
+export declare const ImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const ImagePlaceholderWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ImagePreviewOverlay: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ImageFullscreenOverlay: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ImageFullscreenStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const CloseButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').IButtonProps, never>> & string & Omit<import('react').FC<import('..').IButtonProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageLoaderWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Image/styles.es.js

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import { rgba } from "polished";
+import Button from "../Button/Button.es.js";
+const ImageContainer = styled.div`
+  position: relative;
+  width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
+  height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};
+  display: inline-block;
+  cursor: ${({ preview }) => preview ? "pointer" : "default"};
+`;
+const ImageStyled = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+`;
+const ImagePlaceholderWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+`;
+const ImagePreviewOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.2rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+  ${ImageContainer}:hover & {
+    opacity: 1;
+  }
+`;
+const ImageFullscreenOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${({ theme }) => rgba(theme.colors.gray["2"], 0.5)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+const ImageFullscreenStyled = styled.img`
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+`;
+const CloseButtonStyled = styled(Button)`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1001;
+`;
+const ImageLoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.3s ease;
+`;
+export {
+  CloseButtonStyled,
+  ImageContainer,
+  ImageFullscreenOverlay,
+  ImageFullscreenStyled,
+  ImageLoaderWrapper,
+  ImagePlaceholderWrapper,
+  ImagePreviewOverlay,
+  ImageStyled
+};

package/dist/Image/types.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface IImageProps {
+    /** Alternative text for accessibility */
+    alt?: string;
+    /** Fallback image URL when main fails to load */
+    fallback?: string;
+    /** Image height */
+    height?: number | string;
+    /** Custom placeholder while loading */
+    placeholder?: React.ReactNode;
+    /** Enables lightbox preview on click */
+    preview?: boolean;
+    /** Image source URL */
+    src?: string;
+    /** Image width */
+    width?: number | string;
+    /** Error handler for failed loads */
+    onError?: (event: React.SyntheticEvent) => void;
+    [key: string]: any;
+}