@lumx/vue 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputText.js

@@ -0,0 +1,42 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_NATIVE_CLASSNAME } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/TextField/RawInputText.tsx
+var { block } = bem(INPUT_NATIVE_CLASSNAME);
+/**
+* Defines the props of the component.
+*/
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { type: "text" };
+/**
+* Raw input text component
+* (input element without any decoration)
+*/
+var RawInputText = (props) => {
+	const { className, theme, value, handleChange, handleInput, handleFocus, handleBlur, type = DEFAULT_PROPS.type, name, ref, ...forwardedProps } = props;
+	const handleOnChange = (evt) => {
+		handleChange?.(evt.target.value, name, evt);
+	};
+	const handleOnInput = (evt) => {
+		handleInput?.(evt.target.value, name, evt);
+	};
+	return createVNode("input", mergeProps(forwardedProps, {
+		"name": name,
+		"type": type,
+		"ref": ref,
+		"className": import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			text: true
+		})),
+		"onChange": handleOnChange,
+		"onInput": handleOnInput,
+		"onFocus": handleFocus,
+		"onBlur": handleBlur,
+		"value": value
+	}), null);
+};
+//#endregion
+export { RawInputText };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputTextarea.d.ts

@@ -0,0 +1,19 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/TextField/RawInputTextarea.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextareaProps extends HasTheme, HasClassName {
+  value?: string;
+  rows?: number;
+  name?: string | undefined;
+  ref?: CommonRef;
+  handleChange?: (value: string, name?: string, event?: any) => void;
+  handleInput?: (value: string, name?: string, event?: any) => void;
+  handleFocus?: (event?: any) => void;
+  handleBlur?: (event?: any) => void;
+}
+//#endregion
+export { RawInputTextareaProps };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputTextarea.js

@@ -0,0 +1,42 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_NATIVE_CLASSNAME } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/TextField/RawInputTextarea.tsx
+var { block } = bem(INPUT_NATIVE_CLASSNAME);
+/**
+* Defines the props of the component.
+*/
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { rows: 2 };
+/**
+* Raw input textarea component
+* (textarea element without any decoration)
+*/
+var RawInputTextarea = (props) => {
+	const { className, theme, value, handleChange, handleInput, handleFocus, handleBlur, rows = DEFAULT_PROPS.rows, name, ref, ...forwardedProps } = props;
+	const handleOnChange = (evt) => {
+		handleChange?.(evt.target.value, name, evt);
+	};
+	const handleOnInput = (evt) => {
+		handleInput?.(evt.target.value, name, evt);
+	};
+	return createVNode("textarea", mergeProps(forwardedProps, {
+		"name": name,
+		"ref": ref,
+		"className": import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			textarea: true
+		})),
+		"onChange": handleOnChange,
+		"onInput": handleOnInput,
+		"onFocus": handleFocus,
+		"onBlur": handleBlur,
+		"value": value,
+		"rows": rows
+	}), null);
+};
+//#endregion
+export { DEFAULT_PROPS, RawInputTextarea };

package/_internal/packages/lumx-core/src/js/components/TextField/TextField.d.ts

@@ -0,0 +1,70 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+import { InputLabelProps } from "../InputLabel/index.js";
+
+//#region ../lumx-core/src/js/components/TextField/TextField.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TextFieldProps extends HasClassName, HasTheme, HasAriaDisabled, HasDisabled {
+  /** Chip Group to be rendered before the main text input. */
+  chips?: JSXElement;
+  /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
+  clearButtonProps?: GenericProps;
+  /** Error message. */
+  error?: string | JSXElement;
+  /** Whether we force the focus style or not. */
+  forceFocusStyle?: boolean;
+  /** Whether the text field is displayed with error style or not. */
+  hasError?: boolean;
+  /** Additional element to put at the end of the text field. */
+  afterElement?: JSXElement;
+  /** Helper text. */
+  helper?: string | JSXElement;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Native input id property (generated if not provided to link the label element). */
+  id?: string;
+  /** Generated helper id for accessibility attributes. */
+  helperId?: string;
+  /** Generated error id for accessibility attributes. */
+  errorId?: string;
+  /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+  labelId?: string;
+  /** Whether the component is required or not. */
+  isRequired?: boolean;
+  /** Whether the text field is displayed with valid style or not. */
+  isValid?: boolean;
+  /** Label text. */
+  label?: string;
+  /** Additional label props. */
+  labelProps?: InputLabelProps;
+  /** Max string length the input accepts (constrains the input and displays a character counter). */
+  maxLength?: number;
+  /** Whether the text field is a textarea or an input. */
+  multiline?: boolean;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Reference to the wrapper. */
+  textFieldRef?: CommonRef;
+  /** Value. */
+  value?: string;
+  /** Whether any part is disabled. */
+  isAnyDisabled?: boolean;
+  /** The input element (input or textarea). */
+  input: JSXElement;
+  /** Whether the input is focused. */
+  isFocus?: boolean;
+  /** IconButton component. */
+  IconButton: (props: Record<string, any>) => any;
+  /** Ref to the component root. */
+  ref?: CommonRef;
+}
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
+//#endregion
+export { TextFieldProps, TextFieldPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/TextField/TextField.js

@@ -0,0 +1,127 @@
+import { Emphasis, Kind, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { CLASSNAME } from "./constants.js";
+import { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+import { mdiCheckCircle } from "@lumx/icons/esm/check-circle.js";
+import { mdiCloseCircle } from "@lumx/icons/esm/close-circle.js";
+//#region ../lumx-core/src/js/components/TextField/TextField.tsx
+var { block, element } = bem(CLASSNAME);
+/**
+* Defines the props of the component.
+*/
+/**
+* Generate unique accessibility IDs for helper and error texts.
+* Combines them with any existing aria-describedby in priority order (error > helper > existing).
+*
+* @param helper Helper text content
+* @param error Error text content
+* @param generatedId Unique ID for this text field instance
+* @param existingAriaDescribedBy Existing aria-describedby value to merge
+* @return Object containing helperId, errorId, and combined describedById
+*/
+function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy, label) {
+	const helperId = helper ? `text-field-helper-${generatedId}` : void 0;
+	const errorId = error ? `text-field-error-${generatedId}` : void 0;
+	const labelId = label ? `text-field-label-${generatedId}` : void 0;
+	const describedByIds = [
+		errorId,
+		helperId,
+		existingAriaDescribedBy
+	].filter(Boolean);
+	return {
+		helperId,
+		errorId,
+		describedById: describedByIds.length === 0 ? void 0 : describedByIds.join(" "),
+		labelId
+	};
+}
+/**
+* TextField component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TextField = (props) => {
+	const { chips, className, clearButtonProps, error, forceFocusStyle, hasError, helper, icon, id: textFieldId, isRequired, isValid, label, labelProps, isAnyDisabled, maxLength, multiline, placeholder, textFieldRef, helperId, errorId, labelId, theme, value, afterElement, input, isFocus, IconButton, ref } = props;
+	const valueLength = (value || "").length;
+	const isNotEmpty = valueLength > 0;
+	return createVNode("div", {
+		"ref": ref,
+		"className": import_classnames.default(className, block({
+			"has-chips": Boolean(chips),
+			"has-error": !isValid && hasError,
+			"has-icon": Boolean(icon),
+			"has-input": !multiline,
+			"has-input-clear": Boolean(clearButtonProps && isNotEmpty),
+			"has-label": Boolean(label),
+			"has-placeholder": Boolean(placeholder),
+			"has-textarea": multiline,
+			"has-value": Boolean(value),
+			"is-disabled": isAnyDisabled,
+			"is-focus": isFocus || forceFocusStyle,
+			"is-valid": isValid,
+			[`theme-${theme}`]: Boolean(theme)
+		}))
+	}, [
+		(label || maxLength) && createVNode("div", { "className": element("header") }, [label && InputLabel({
+			...labelProps,
+			id: labelId,
+			htmlFor: textFieldId,
+			className: element("label"),
+			isRequired,
+			theme,
+			children: label
+		}), maxLength && createVNode("div", { "className": element("char-counter") }, [createVNode("span", null, [maxLength - valueLength]), maxLength - valueLength === 0 && Icon({
+			icon: mdiAlertCircle,
+			size: Size.xxs
+		})])]),
+		createVNode("div", {
+			"className": element("wrapper"),
+			"ref": textFieldRef
+		}, [
+			icon && Icon({
+				className: element("input-icon"),
+				color: theme === Theme.dark ? "light" : void 0,
+				icon,
+				size: Size.xs
+			}),
+			chips ? createVNode("div", { "className": element("chips") }, [chips, input]) : createVNode("div", { "className": element("input-wrapper") }, [input]),
+			(isValid || hasError) && Icon({
+				className: element("input-validity"),
+				color: theme === Theme.dark ? "light" : void 0,
+				icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+				size: Size.xxs
+			}),
+			clearButtonProps && isNotEmpty && !isAnyDisabled && createVNode(IconButton, mergeProps({ "aria-describedby": labelId }, clearButtonProps, {
+				"className": element("input-clear"),
+				"icon": mdiCloseCircle,
+				"emphasis": Emphasis.low,
+				"size": Size.s,
+				"theme": theme,
+				"type": "button"
+			}), null),
+			afterElement && createVNode("div", { "className": element("after-element") }, [afterElement])
+		]),
+		hasError && error && InputHelper({
+			children: error,
+			className: element("helper"),
+			kind: Kind.error,
+			theme,
+			id: errorId
+		}),
+		helper && InputHelper({
+			className: element("helper"),
+			theme,
+			id: helperId,
+			children: helper
+		})
+	]);
+};
+//#endregion
+export { TextField, generateAccessibilityIds };

package/_internal/packages/lumx-core/src/js/components/TextField/constants.d.ts

@@ -0,0 +1 @@
+export { };

package/_internal/packages/lumx-core/src/js/components/TextField/constants.js

@@ -0,0 +1,11 @@
+//#region ../lumx-core/src/js/components/TextField/constants.ts
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-text-field";
+/**
+* Input native element class name.
+*/
+var INPUT_NATIVE_CLASSNAME = `${CLASSNAME}__input-native`;
+//#endregion
+export { CLASSNAME, INPUT_NATIVE_CLASSNAME };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/index.d.ts

@@ -0,0 +1,60 @@
+import { ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant } from "./types.js";
+import { AspectRatio, HorizontalAlignment } from "@lumx/core/js/constants";
+import { CommonRef, GenericProps, HasClassName, HasTheme, JSXElement } from "@lumx/core/js/types";
+import { ImgHTMLAttributes } from "react";
+
+//#region ../lumx-core/src/js/components/Thumbnail/index.d.ts
+type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * Defines the props of the component.
+ */
+interface ThumbnailProps extends HasTheme, HasClassName {
+  /** Alignment of the thumbnail in it's parent (requires flex parent). */
+  align?: HorizontalAlignment;
+  /** Image alternative text. */
+  alt: string;
+  /** Image aspect ratio. */
+  aspectRatio?: AspectRatio;
+  /** Badge. */
+  badge?: JSXElement;
+  /** Image cross origin resource policy. */
+  crossOrigin?: ImgHTMLProps['crossOrigin'];
+  /** Fallback icon (SVG path) or react node when image fails to load. */
+  fallback?: string | JSXElement;
+  /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
+  fillHeight?: boolean;
+  /** Image URL. */
+  image: string;
+  loadingState: string;
+  /** Props to inject into the native <img> element. */
+  imgProps?: ImgHTMLProps;
+  /** Reference to the native <img> element. */
+  imgRef?: CommonRef;
+  ref?: CommonRef;
+  /** Set to true to force the display of the loading skeleton. */
+  isLoading?: boolean;
+  /** Set how the image should fit when its aspect ratio is constrained */
+  objectFit?: ThumbnailObjectFit;
+  /** Size variant of the component. */
+  size?: ThumbnailSize;
+  /** Image loading mode. */
+  loading?: 'eager' | 'lazy';
+  /** Ref of an existing placeholder image to display while loading. */
+  loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+  /** On key press callback. */
+  handleKeyPress?: (event: any) => void;
+  /** Variant of the component. */
+  variant?: ThumbnailVariant;
+  /** Props to pass to the link wrapping the thumbnail. */
+  linkProps?: GenericProps;
+  focusPointStyle?: GenericProps;
+  disabledStateProps?: GenericProps;
+  isAnyDisabled?: boolean;
+  /** Custom react component for the link (can be used to inject react router Link). */
+  linkAs?: 'a' | any;
+  'aria-label'?: string;
+}
+//#endregion
+export { ThumbnailProps };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/index.js

@@ -0,0 +1,99 @@
+import { RawClickable } from "../RawClickable/index.js";
+import { Icon } from "../Icon/index.js";
+import "./utils.js";
+import { AspectRatio, Size } from "@lumx/core/js/constants";
+import { Fragment, createVNode, mergeProps } from "vue";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiImageBroken } from "@lumx/icons/esm/image-broken.js";
+//#region ../lumx-core/src/js/components/Thumbnail/index.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-thumbnail";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	fallback: mdiImageBroken,
+	loading: "lazy"
+};
+/**
+* Thumbnail component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Thumbnail = (props) => {
+	const { align, alt, aspectRatio = AspectRatio.original, badge, className, crossOrigin, ref, fallback = DEFAULT_PROPS.fallback, focusPointStyle, fillHeight, image, imgProps, imgRef: propImgRef, isLoading: isLoadingProp, objectFit, loading = DEFAULT_PROPS.loading, loadingPlaceholderImageRef, isAnyDisabled, disabledStateProps, size, theme, loadingState, variant, linkProps, linkAs, handleClick, handleKeyPress, ...forwardedProps } = props;
+	const isLoading = isLoadingProp || loadingState === "isLoading";
+	const hasError = loadingState === "hasError";
+	const hasIconErrorFallback = hasError && typeof fallback === "string";
+	const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+	const imageErrorStyle = {};
+	if (hasIconErrorFallback) imageErrorStyle.visibility = "hidden";
+	else if (hasCustomErrorFallback) imageErrorStyle.display = "none";
+	const isLink = Boolean(linkProps?.href || linkAs);
+	const isClickable = !isAnyDisabled && Boolean(isLink || !!handleClick || !!handleKeyPress);
+	const wrapperProps = { ...forwardedProps };
+	if (isClickable) {
+		Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? "a" : "button") }, disabledStateProps);
+		if (isLink) Object.assign(wrapperProps, linkProps);
+		else wrapperProps["aria-label"] = forwardedProps["aria-label"] || alt;
+	}
+	const wrapperClassName = classNames.join(linkProps?.className, className, block({
+		[`align-${align}`]: Boolean(align),
+		[`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+		[`size-${size}`]: Boolean(size),
+		[`theme-${theme}`]: Boolean(theme),
+		[`variant-${variant}`]: Boolean(variant),
+		"is-clickable": isClickable,
+		"has-error": hasError,
+		"has-icon-error-fallback": hasIconErrorFallback,
+		"has-custom-error-fallback": hasCustomErrorFallback,
+		"is-loading": isLoading,
+		[`object-fit-${objectFit}`]: Boolean(objectFit),
+		"has-badge": !!badge,
+		"fill-height": fillHeight
+	}));
+	const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || void 0;
+	const loadingStyle = loadingPlaceholderImage ? { backgroundImage: `url(${loadingPlaceholderImage.src})` } : void 0;
+	const innerImage = createVNode(Fragment, null, [createVNode("span", { "className": element("background") }, [createVNode("img", mergeProps({
+		"width": loadingPlaceholderImage?.naturalWidth,
+		"height": loadingPlaceholderImage?.naturalHeight
+	}, imgProps, {
+		"style": {
+			width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : void 0,
+			...imgProps?.style,
+			...imageErrorStyle,
+			...focusPointStyle,
+			...loadingStyle
+		},
+		"ref": propImgRef,
+		"className": classNames.join(element("image", {
+			"is-loading": isLoading,
+			"has-defined-size": Boolean(imgProps?.height && imgProps.width)
+		}), imgProps?.className),
+		"crossOrigin": crossOrigin,
+		"src": image,
+		"alt": alt,
+		"loading": loading
+	}), null), !isLoading && hasError && createVNode("span", { "className": element("fallback") }, [hasIconErrorFallback ? Icon({
+		icon: fallback,
+		size: Size.xxs,
+		theme
+	}) : fallback])]), badge]);
+	/** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
+	if (isClickable) return RawClickable({
+		ref,
+		...wrapperProps,
+		className: wrapperClassName,
+		children: innerImage,
+		handleClick,
+		handleKeyPress
+	});
+	return createVNode("div", mergeProps({ "ref": ref }, wrapperProps, { "className": wrapperClassName }), [innerImage]);
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, Thumbnail, element };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/types.d.ts

@@ -0,0 +1,47 @@
+import { Size } from "../../constants/enums/index.js";
+import { ValueOf } from "../../types/ValueOf.js";
+//#region ../lumx-core/src/js/components/Thumbnail/types.d.ts
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+type FocusPoint = {
+  x?: number;
+  y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+  interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    loading?: 'eager' | 'lazy';
+  }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+/**
+ *  Thumbnail sizes.
+ */
+type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+  readonly squared: "squared";
+  readonly rounded: "rounded";
+};
+type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+declare const ThumbnailObjectFit: {
+  readonly cover: "cover";
+  readonly contain: "contain";
+};
+type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
+type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
+//#endregion
+export { FocusPoint, LoadingState, ThumbnailObjectFit, ThumbnailSize, ThumbnailVariant };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/types.js

@@ -0,0 +1,18 @@
+import { AspectRatio } from "../../constants/enums/index.js";
+({ ...AspectRatio });
+/**
+* Thumbnail variants.
+*/
+var ThumbnailVariant = {
+	squared: "squared",
+	rounded: "rounded"
+};
+/**
+* Thumbnail object fit.
+*/
+var ThumbnailObjectFit = {
+	cover: "cover",
+	contain: "contain"
+};
+//#endregion
+export { ThumbnailObjectFit, ThumbnailVariant };

package/_internal/packages/lumx-core/src/js/components/Thumbnail/utils.d.ts

@@ -0,0 +1 @@
+import { CSSProperties } from "react";

package/_internal/packages/lumx-core/src/js/components/Thumbnail/utils.js

@@ -0,0 +1,76 @@
+import { AspectRatio } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/Thumbnail/utils.ts
+/**
+* Determines the loading state of an HTML image element.
+*
+* @param img - The HTML image element to check
+* @param event - Optional event (load or error) that triggered the state check
+* @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
+*/
+function getImageLoadingState(img, event) {
+	if (event?.type === "error" || img?.complete && !img.getAttribute("src")) return "hasError";
+	if (!img || !img.complete) return "isLoading";
+	return "isLoaded";
+}
+/**
+* Gets the natural image size from props or element.
+* Returns undefined if focus point is not applicable or size cannot be determined.
+*
+* @param params - Image size parameters
+* @returns Image size or undefined
+*/
+function getImageSize({ image, aspectRatio, focusPoint, width, height, element, isLoaded }) {
+	if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return;
+	if (typeof width === "number" && typeof height === "number") return {
+		width,
+		height
+	};
+	if (element && isLoaded) return {
+		width: element.naturalWidth,
+		height: element.naturalHeight
+	};
+}
+/**
+* Calculate shift position to center the focus point in the container.
+*
+* This function computes the percentage offset needed to position an image
+* such that a specific focus point on the image aligns with the center of
+* the container, taking into account the image's scale.
+*
+* @param params - Focus point shift calculation parameters
+* @returns Percentage shift (0-100) for CSS positioning
+*/
+function shiftPosition({ scale, focusPoint, imageSize, containerSize }) {
+	const scaledSize = imageSize / scale;
+	if (scaledSize === containerSize) return 0;
+	const shift = (focusPoint * scaledSize - containerSize / 2) / (scaledSize - containerSize);
+	return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
+}
+/**
+* Calculates CSS style for applying focus point positioning.
+*
+* @param params - Focus point style parameters
+* @returns CSS properties to apply to the image
+*/
+function calculateFocusPointStyle({ image, aspectRatio, focusPoint, element, imageSize, containerSize }) {
+	if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return {};
+	if (!element || !imageSize) return { visibility: "hidden" };
+	if (!containerSize || !imageSize.height || !imageSize.width) return {};
+	const heightScale = imageSize.height / containerSize.height;
+	const widthScale = imageSize.width / containerSize.width;
+	const scale = Math.min(widthScale, heightScale);
+	const y = shiftPosition({
+		scale,
+		focusPoint: Math.abs((focusPoint?.y || 0) - 1) / 2,
+		imageSize: imageSize.height,
+		containerSize: containerSize.height
+	});
+	return { objectPosition: `${shiftPosition({
+		scale,
+		focusPoint: Math.abs((focusPoint?.x || 0) + 1) / 2,
+		imageSize: imageSize.width,
+		containerSize: containerSize.width
+	})}% ${y}%` };
+}
+//#endregion
+export { calculateFocusPointStyle, getImageLoadingState, getImageSize, shiftPosition };