@envive-ai/react-toolkit-v3 0.3.5

package/dist/Form/utils/mapTextFields.js

@@ -0,0 +1,23 @@
+import { FormsComponents } from "../components/index.js";
+import { createElement } from "react";
+
+//#region src/components/Form/utils/mapTextFields.ts
+/**
+* Maps text field definitions to TextFieldItem elements.
+*/
+const mapTextFields = (textFields, values, onChange, fieldErrors = {}) => {
+	return textFields.map((field, index) => {
+		return createElement(FormsComponents.TextFieldItem, {
+			key: `${field.label}`,
+			label: field.label,
+			value: values[index] ?? "",
+			type: field.type,
+			onChange: (value) => onChange(index, value),
+			ariaLabel: field.ariaLabel,
+			error: fieldErrors[index]
+		});
+	});
+};
+
+//#endregion
+export { mapTextFields };

package/dist/Form/utils/validateTextFieldsForSubmit.cjs

@@ -0,0 +1,37 @@
+const require_createFormSchema = require('./createFormSchema.cjs');
+
+//#region src/components/Form/utils/validateTextFieldsForSubmit.ts
+/**
+* Validates form fields using Zod schema based on field types and requirements.
+* Returns errors mapped by field index.
+*/
+const validateTextFieldsForSubmit = (textFields, values) => {
+	const schema = require_createFormSchema.createFormSchema(textFields);
+	const data = {};
+	textFields.forEach((_, index) => {
+		const fieldKey = `field_${index}`;
+		data[fieldKey] = values[index] ?? "";
+	});
+	const result = schema.safeParse(data);
+	if (!result.success) {
+		const fieldErrors = {};
+		result.error.errors.forEach((error) => {
+			const fieldKey = error.path[0];
+			if (fieldKey?.startsWith("field_")) {
+				const fieldIndex = parseInt(fieldKey.replace("field_", ""), 10);
+				if (!Number.isNaN(fieldIndex)) fieldErrors[fieldIndex] = error.message;
+			}
+		});
+		return {
+			isValid: false,
+			fieldErrors
+		};
+	}
+	return {
+		isValid: true,
+		fieldErrors: {}
+	};
+};
+
+//#endregion
+exports.validateTextFieldsForSubmit = validateTextFieldsForSubmit;

package/dist/Form/utils/validateTextFieldsForSubmit.js

@@ -0,0 +1,37 @@
+import { createFormSchema } from "./createFormSchema.js";
+
+//#region src/components/Form/utils/validateTextFieldsForSubmit.ts
+/**
+* Validates form fields using Zod schema based on field types and requirements.
+* Returns errors mapped by field index.
+*/
+const validateTextFieldsForSubmit = (textFields, values) => {
+	const schema = createFormSchema(textFields);
+	const data = {};
+	textFields.forEach((_, index) => {
+		const fieldKey = `field_${index}`;
+		data[fieldKey] = values[index] ?? "";
+	});
+	const result = schema.safeParse(data);
+	if (!result.success) {
+		const fieldErrors = {};
+		result.error.errors.forEach((error) => {
+			const fieldKey = error.path[0];
+			if (fieldKey?.startsWith("field_")) {
+				const fieldIndex = parseInt(fieldKey.replace("field_", ""), 10);
+				if (!Number.isNaN(fieldIndex)) fieldErrors[fieldIndex] = error.message;
+			}
+		});
+		return {
+			isValid: false,
+			fieldErrors
+		};
+	}
+	return {
+		isValid: true,
+		fieldErrors: {}
+	};
+};
+
+//#endregion
+export { validateTextFieldsForSubmit };

package/dist/Image/Image.cjs

@@ -0,0 +1,64 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useGetSkeletonProperties = require('./hooks/useGetSkeletonProperties.cjs');
+const require_index = require('./types/index.cjs');
+const require_useGetAspectRatioProperties = require('./hooks/useGetAspectRatioProperties.cjs');
+const require_useGetObjectFitProperties = require('./hooks/useGetObjectFitProperties.cjs');
+const require_useGetRoundedProperties = require('./hooks/useGetRoundedProperties.cjs');
+const require_useGetAccessibilityProperties = require('./hooks/useGetAccessibilityProperties.cjs');
+const require_useGetWidthProperties = require('./hooks/useGetWidthProperties.cjs');
+const require_useHandleImageLoading = require('./hooks/useHandleImageLoading.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Image/Image.tsx
+/**
+* Renders an image with configurable aspect ratio and object fit options.
+* Supports square (1:1) and portrait (3:4) aspect ratios.
+*/
+const Image = ({ id, testId, src, alt, aspectRatio = require_index.ImageAspectRatio.GLOBAL_CUSTOM, objectFit = require_index.ImageObjectFit.COVER, className, style, rounded = false, width, isLoading: isLoadingProp = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role = "img", "aria-hidden": ariaHidden, ...rest }) => {
+	const { aspectRatioClass } = require_useGetAspectRatioProperties.useGetAspectRatioProperties(aspectRatio);
+	const { objectFitClass } = require_useGetObjectFitProperties.useGetObjectFitProperties(objectFit);
+	const { roundedClass } = require_useGetRoundedProperties.useGetRoundedProperties(rounded);
+	const { sizeStyle, widthClass } = require_useGetWidthProperties.useGetWidthProperties(width);
+	const { isLoading, imgRef, handleLoad, handleError } = require_useHandleImageLoading.useHandleImageLoading({
+		src,
+		isLoadingProp
+	});
+	const { skeletonClass } = require_useGetSkeletonProperties.useGetSkeletonProperties(isLoading);
+	const { accessibilityProps } = require_useGetAccessibilityProperties.useGetAccessibilityProperties({
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		role,
+		"aria-hidden": ariaHidden
+	});
+	const containerStyle = {
+		...style,
+		...sizeStyle || {}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("envive-tw-relative envive-tw-overflow-hidden", widthClass, aspectRatioClass, roundedClass, isLoading && skeletonClass, className),
+		style: containerStyle,
+		id,
+		"data-testid": testId,
+		children: [isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, classnames.default)("envive-tw-inset-0 envive-tw-absolute", skeletonClass),
+			"aria-label": ariaLabel || alt,
+			role: "img",
+			...ariaHidden !== void 0 && { "aria-hidden": ariaHidden }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			ref: imgRef,
+			src,
+			alt,
+			className: (0, classnames.default)("envive-tw-h-full envive-tw-w-full", objectFitClass, isLoading && "envive-tw-opacity-0"),
+			onLoad: handleLoad,
+			onError: handleError,
+			...accessibilityProps,
+			...rest
+		})]
+	});
+};
+
+//#endregion
+exports.Image = Image;

package/dist/Image/Image.d.cts

@@ -0,0 +1,30 @@
+import { ImageProps } from "./types/index.cjs";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
+
+//#region src/components/Image/Image.d.ts
+
+/**
+ * Renders an image with configurable aspect ratio and object fit options.
+ * Supports square (1:1) and portrait (3:4) aspect ratios.
+ */
+declare const Image: ({
+  id,
+  testId,
+  src,
+  alt,
+  aspectRatio,
+  objectFit,
+  className,
+  style,
+  rounded,
+  width,
+  isLoading: isLoadingProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  role,
+  "aria-hidden": ariaHidden,
+  ...rest
+}: ImageProps) => react_jsx_runtime27.JSX.Element;
+//#endregion
+export { Image };

package/dist/Image/Image.d.ts

@@ -0,0 +1,30 @@
+import { ImageProps } from "./types/index.js";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/components/Image/Image.d.ts
+
+/**
+ * Renders an image with configurable aspect ratio and object fit options.
+ * Supports square (1:1) and portrait (3:4) aspect ratios.
+ */
+declare const Image: ({
+  id,
+  testId,
+  src,
+  alt,
+  aspectRatio,
+  objectFit,
+  className,
+  style,
+  rounded,
+  width,
+  isLoading: isLoadingProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  role,
+  "aria-hidden": ariaHidden,
+  ...rest
+}: ImageProps) => react_jsx_runtime5.JSX.Element;
+//#endregion
+export { Image };

package/dist/Image/Image.js

@@ -0,0 +1,62 @@
+import { useGetSkeletonProperties } from "./hooks/useGetSkeletonProperties.js";
+import { ImageAspectRatio, ImageObjectFit } from "./types/index.js";
+import { useGetAspectRatioProperties } from "./hooks/useGetAspectRatioProperties.js";
+import { useGetObjectFitProperties } from "./hooks/useGetObjectFitProperties.js";
+import { useGetRoundedProperties } from "./hooks/useGetRoundedProperties.js";
+import { useGetAccessibilityProperties } from "./hooks/useGetAccessibilityProperties.js";
+import { useGetWidthProperties } from "./hooks/useGetWidthProperties.js";
+import { useHandleImageLoading } from "./hooks/useHandleImageLoading.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/Image/Image.tsx
+/**
+* Renders an image with configurable aspect ratio and object fit options.
+* Supports square (1:1) and portrait (3:4) aspect ratios.
+*/
+const Image = ({ id, testId, src, alt, aspectRatio = ImageAspectRatio.GLOBAL_CUSTOM, objectFit = ImageObjectFit.COVER, className, style, rounded = false, width, isLoading: isLoadingProp = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role = "img", "aria-hidden": ariaHidden, ...rest }) => {
+	const { aspectRatioClass } = useGetAspectRatioProperties(aspectRatio);
+	const { objectFitClass } = useGetObjectFitProperties(objectFit);
+	const { roundedClass } = useGetRoundedProperties(rounded);
+	const { sizeStyle, widthClass } = useGetWidthProperties(width);
+	const { isLoading, imgRef, handleLoad, handleError } = useHandleImageLoading({
+		src,
+		isLoadingProp
+	});
+	const { skeletonClass } = useGetSkeletonProperties(isLoading);
+	const { accessibilityProps } = useGetAccessibilityProperties({
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		role,
+		"aria-hidden": ariaHidden
+	});
+	const containerStyle = {
+		...style,
+		...sizeStyle || {}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("envive-tw-relative envive-tw-overflow-hidden", widthClass, aspectRatioClass, roundedClass, isLoading && skeletonClass, className),
+		style: containerStyle,
+		id,
+		"data-testid": testId,
+		children: [isLoading && /* @__PURE__ */ jsx("div", {
+			className: classNames("envive-tw-inset-0 envive-tw-absolute", skeletonClass),
+			"aria-label": ariaLabel || alt,
+			role: "img",
+			...ariaHidden !== void 0 && { "aria-hidden": ariaHidden }
+		}), /* @__PURE__ */ jsx("img", {
+			ref: imgRef,
+			src,
+			alt,
+			className: classNames("envive-tw-h-full envive-tw-w-full", objectFitClass, isLoading && "envive-tw-opacity-0"),
+			onLoad: handleLoad,
+			onError: handleError,
+			...accessibilityProps,
+			...rest
+		})]
+	});
+};
+
+//#endregion
+export { Image };

package/dist/Image/hooks/useGetAccessibilityProperties.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetAccessibilityProperties.ts
+const useGetAccessibilityProperties = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role = "img", "aria-hidden": ariaHidden }) => {
+	return { accessibilityProps: (0, react.useMemo)(() => {
+		const props = {};
+		if (ariaLabel) props["aria-label"] = ariaLabel;
+		if (ariaLabelledBy) props["aria-labelledby"] = ariaLabelledBy;
+		if (ariaDescribedBy) props["aria-describedby"] = ariaDescribedBy;
+		props.role = role;
+		if (ariaHidden !== void 0) props["aria-hidden"] = ariaHidden;
+		return props;
+	}, [
+		ariaLabel,
+		ariaLabelledBy,
+		ariaDescribedBy,
+		role,
+		ariaHidden
+	]) };
+};
+
+//#endregion
+exports.useGetAccessibilityProperties = useGetAccessibilityProperties;

package/dist/Image/hooks/useGetAccessibilityProperties.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetAccessibilityProperties.ts
+const useGetAccessibilityProperties = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role = "img", "aria-hidden": ariaHidden }) => {
+	return { accessibilityProps: useMemo(() => {
+		const props = {};
+		if (ariaLabel) props["aria-label"] = ariaLabel;
+		if (ariaLabelledBy) props["aria-labelledby"] = ariaLabelledBy;
+		if (ariaDescribedBy) props["aria-describedby"] = ariaDescribedBy;
+		props.role = role;
+		if (ariaHidden !== void 0) props["aria-hidden"] = ariaHidden;
+		return props;
+	}, [
+		ariaLabel,
+		ariaLabelledBy,
+		ariaDescribedBy,
+		role,
+		ariaHidden
+	]) };
+};
+
+//#endregion
+export { useGetAccessibilityProperties };

package/dist/Image/hooks/useGetAspectRatioProperties.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../types/index.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetAspectRatioProperties.ts
+const useGetAspectRatioProperties = (aspectRatio) => {
+	return { aspectRatioClass: (0, react.useMemo)(() => {
+		if (!aspectRatio) return void 0;
+		return {
+			[require_index.ImageAspectRatio.SQUARE]: "envive-tw-aspect-square",
+			[require_index.ImageAspectRatio.PORTRAIT]: "envive-tw-aspect-portrait",
+			[require_index.ImageAspectRatio.LANDSCAPE]: "envive-tw-aspect-landscape",
+			[require_index.ImageAspectRatio.GLOBAL_CUSTOM]: "envive-tw-aspect-global-custom"
+		}[aspectRatio];
+	}, [aspectRatio]) };
+};
+
+//#endregion
+exports.useGetAspectRatioProperties = useGetAspectRatioProperties;

package/dist/Image/hooks/useGetAspectRatioProperties.js

@@ -0,0 +1,18 @@
+import { ImageAspectRatio } from "../types/index.js";
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetAspectRatioProperties.ts
+const useGetAspectRatioProperties = (aspectRatio) => {
+	return { aspectRatioClass: useMemo(() => {
+		if (!aspectRatio) return void 0;
+		return {
+			[ImageAspectRatio.SQUARE]: "envive-tw-aspect-square",
+			[ImageAspectRatio.PORTRAIT]: "envive-tw-aspect-portrait",
+			[ImageAspectRatio.LANDSCAPE]: "envive-tw-aspect-landscape",
+			[ImageAspectRatio.GLOBAL_CUSTOM]: "envive-tw-aspect-global-custom"
+		}[aspectRatio];
+	}, [aspectRatio]) };
+};
+
+//#endregion
+export { useGetAspectRatioProperties };

package/dist/Image/hooks/useGetObjectFitProperties.cjs

@@ -0,0 +1,20 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../types/index.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetObjectFitProperties.ts
+const useGetObjectFitProperties = (objectFit) => {
+	return { objectFitClass: (0, react.useMemo)(() => {
+		const objectFitClassMap = {
+			[require_index.ImageObjectFit.CONTAIN]: "envive-tw-object-contain",
+			[require_index.ImageObjectFit.COVER]: "envive-tw-object-cover",
+			[require_index.ImageObjectFit.FILL]: "envive-tw-object-fill",
+			[require_index.ImageObjectFit.NONE]: "envive-tw-object-none",
+			[require_index.ImageObjectFit.SCALE_DOWN]: "envive-tw-object-scale-down"
+		};
+		return objectFitClassMap[objectFit] || objectFitClassMap[require_index.ImageObjectFit.COVER];
+	}, [objectFit]) };
+};
+
+//#endregion
+exports.useGetObjectFitProperties = useGetObjectFitProperties;

package/dist/Image/hooks/useGetObjectFitProperties.js

@@ -0,0 +1,19 @@
+import { ImageObjectFit } from "../types/index.js";
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetObjectFitProperties.ts
+const useGetObjectFitProperties = (objectFit) => {
+	return { objectFitClass: useMemo(() => {
+		const objectFitClassMap = {
+			[ImageObjectFit.CONTAIN]: "envive-tw-object-contain",
+			[ImageObjectFit.COVER]: "envive-tw-object-cover",
+			[ImageObjectFit.FILL]: "envive-tw-object-fill",
+			[ImageObjectFit.NONE]: "envive-tw-object-none",
+			[ImageObjectFit.SCALE_DOWN]: "envive-tw-object-scale-down"
+		};
+		return objectFitClassMap[objectFit] || objectFitClassMap[ImageObjectFit.COVER];
+	}, [objectFit]) };
+};
+
+//#endregion
+export { useGetObjectFitProperties };

package/dist/Image/hooks/useGetRoundedProperties.cjs

@@ -0,0 +1,12 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetRoundedProperties.ts
+const useGetRoundedProperties = (rounded) => {
+	return { roundedClass: (0, react.useMemo)(() => {
+		return rounded ? "envive-tw-rounded-global-custom" : void 0;
+	}, [rounded]) };
+};
+
+//#endregion
+exports.useGetRoundedProperties = useGetRoundedProperties;

package/dist/Image/hooks/useGetRoundedProperties.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetRoundedProperties.ts
+const useGetRoundedProperties = (rounded) => {
+	return { roundedClass: useMemo(() => {
+		return rounded ? "envive-tw-rounded-global-custom" : void 0;
+	}, [rounded]) };
+};
+
+//#endregion
+export { useGetRoundedProperties };

package/dist/Image/hooks/useGetSkeletonProperties.cjs

@@ -0,0 +1,13 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetSkeletonProperties.ts
+const useGetSkeletonProperties = (isLoading) => {
+	return { skeletonClass: (0, react.useMemo)(() => {
+		if (!isLoading) return void 0;
+		return "envive-tw-animate-pulse";
+	}, [isLoading]) };
+};
+
+//#endregion
+exports.useGetSkeletonProperties = useGetSkeletonProperties;

package/dist/Image/hooks/useGetSkeletonProperties.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetSkeletonProperties.ts
+const useGetSkeletonProperties = (isLoading) => {
+	return { skeletonClass: useMemo(() => {
+		if (!isLoading) return void 0;
+		return "envive-tw-animate-pulse";
+	}, [isLoading]) };
+};
+
+//#endregion
+export { useGetSkeletonProperties };

package/dist/Image/hooks/useGetWidthProperties.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useGetWidthProperties.ts
+const useGetWidthProperties = (width) => {
+	return {
+		sizeStyle: (0, react.useMemo)(() => {
+			const style = {};
+			if (width) style.width = typeof width === "number" ? `${width}px` : width;
+			return Object.keys(style).length > 0 ? style : void 0;
+		}, [width]),
+		widthClass: (0, react.useMemo)(() => {
+			return !width ? "envive-tw-w-full" : void 0;
+		}, [width])
+	};
+};
+
+//#endregion
+exports.useGetWidthProperties = useGetWidthProperties;

package/dist/Image/hooks/useGetWidthProperties.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+
+//#region src/components/Image/hooks/useGetWidthProperties.ts
+const useGetWidthProperties = (width) => {
+	return {
+		sizeStyle: useMemo(() => {
+			const style = {};
+			if (width) style.width = typeof width === "number" ? `${width}px` : width;
+			return Object.keys(style).length > 0 ? style : void 0;
+		}, [width]),
+		widthClass: useMemo(() => {
+			return !width ? "envive-tw-w-full" : void 0;
+		}, [width])
+	};
+};
+
+//#endregion
+export { useGetWidthProperties };

package/dist/Image/hooks/useHandleImageLoading.cjs

@@ -0,0 +1,32 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Image/hooks/useHandleImageLoading.ts
+const useHandleImageLoading = ({ src, isLoadingProp }) => {
+	const [isImageLoading, setIsImageLoading] = (0, react.useState)(true);
+	const isLoading = isLoadingProp || isImageLoading;
+	(0, react.useEffect)(() => {
+		if (src) setIsImageLoading(true);
+	}, [src]);
+	const imgRef = (img) => {
+		if (img && src) {
+			if (img.complete && img.naturalHeight !== 0) setIsImageLoading(false);
+		}
+	};
+	const handleLoad = () => {
+		setIsImageLoading(false);
+	};
+	const handleError = () => {
+		setIsImageLoading(false);
+	};
+	return {
+		isImageLoading,
+		imgRef,
+		handleLoad,
+		handleError,
+		isLoading
+	};
+};
+
+//#endregion
+exports.useHandleImageLoading = useHandleImageLoading;

package/dist/Image/hooks/useHandleImageLoading.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+//#region src/components/Image/hooks/useHandleImageLoading.ts
+const useHandleImageLoading = ({ src, isLoadingProp }) => {
+	const [isImageLoading, setIsImageLoading] = useState(true);
+	const isLoading = isLoadingProp || isImageLoading;
+	useEffect(() => {
+		if (src) setIsImageLoading(true);
+	}, [src]);
+	const imgRef = (img) => {
+		if (img && src) {
+			if (img.complete && img.naturalHeight !== 0) setIsImageLoading(false);
+		}
+	};
+	const handleLoad = () => {
+		setIsImageLoading(false);
+	};
+	const handleError = () => {
+		setIsImageLoading(false);
+	};
+	return {
+		isImageLoading,
+		imgRef,
+		handleLoad,
+		handleError,
+		isLoading
+	};
+};
+
+//#endregion
+export { useHandleImageLoading };

package/dist/Image/index.cjs

@@ -0,0 +1,6 @@
+const require_index = require('./types/index.cjs');
+const require_Image = require('./Image.cjs');
+
+exports.Image = require_Image.Image;
+exports.ImageAspectRatio = require_index.ImageAspectRatio;
+exports.ImageObjectFit = require_index.ImageObjectFit;

package/dist/Image/index.d.cts

@@ -0,0 +1,3 @@
+import { ImageAspectRatio, ImageObjectFit, ImageProps } from "./types/index.cjs";
+import { Image } from "./Image.cjs";
+export { Image, ImageAspectRatio, ImageObjectFit, type ImageProps };

package/dist/Image/index.d.ts

@@ -0,0 +1,3 @@
+import { ImageAspectRatio, ImageObjectFit, ImageProps } from "./types/index.js";
+import { Image } from "./Image.js";
+export { Image, ImageAspectRatio, ImageObjectFit, type ImageProps };

package/dist/Image/index.js

@@ -0,0 +1,4 @@
+import { ImageAspectRatio, ImageObjectFit } from "./types/index.js";
+import { Image } from "./Image.js";
+
+export { Image, ImageAspectRatio, ImageObjectFit };

package/dist/Image/types/index.cjs

@@ -0,0 +1,54 @@
+
+//#region src/components/Image/types/index.ts
+/**
+* Aspect ratio options for the Image component.
+*/
+let ImageAspectRatio = /* @__PURE__ */ function(ImageAspectRatio$1) {
+	/**
+	* Square aspect ratio (1:1)
+	*/
+	ImageAspectRatio$1["SQUARE"] = "square";
+	/**
+	* Portrait aspect ratio (3:4)
+	*/
+	ImageAspectRatio$1["PORTRAIT"] = "portrait";
+	/**
+	* Landscape aspect ratio (16:9)
+	*/
+	ImageAspectRatio$1["LANDSCAPE"] = "landscape";
+	/**
+	* Global custom aspect ratio (--envive-global-custom-aspect-ratio)
+	*/
+	ImageAspectRatio$1["GLOBAL_CUSTOM"] = "global-custom";
+	return ImageAspectRatio$1;
+}({});
+/**
+* Object fit options for the Image component.
+*/
+let ImageObjectFit = /* @__PURE__ */ function(ImageObjectFit$1) {
+	/**
+	* The image is scaled to maintain its aspect ratio while fitting within the element's content box.
+	*/
+	ImageObjectFit$1["CONTAIN"] = "contain";
+	/**
+	* The image is scaled to maintain its aspect ratio while filling the element's entire content box.
+	*/
+	ImageObjectFit$1["COVER"] = "cover";
+	/**
+	* The image is sized to fill the element's content box.
+	*/
+	ImageObjectFit$1["FILL"] = "fill";
+	/**
+	* The image is displayed at its natural size.
+	*/
+	ImageObjectFit$1["NONE"] = "none";
+	/**
+	* The image is scaled down to fit if larger, but not scaled up if smaller.
+	*/
+	ImageObjectFit$1["SCALE_DOWN"] = "scale-down";
+	return ImageObjectFit$1;
+}({});
+
+//#endregion
+exports.ImageAspectRatio = ImageAspectRatio;
+exports.ImageObjectFit = ImageObjectFit;