@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/image/index.js

@@ -0,0 +1,323 @@
+import { mergeStyles } from "../style/runtime.js";
+import { useTheme } from "../provider/index.js";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
+import { createIsSkeleton, loadingStyle, useLoadingAnimation } from "../skeleton/index.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
+import { Show, createContext, createEffect, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, splitProps, untrack, useContext } from "solid-js";
+//#region src/image/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<img>`, true, false, false), _tmpl$2 = /*#__PURE__*/ template(`<picture class=" _H40ub4c151 __D40ub4c151"><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<source>`), _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+const ImageContext = createContext(null);
+const defaultImageGroupValue = {
+	revealAll: true,
+	register() {},
+	unregister() {},
+	load() {}
+};
+function createImageGroup() {
+	return createContext(defaultImageGroupValue);
+}
+const DefaultImageGroup = createImageGroup();
+const imageWrapperStyles = " gkDWoNd151 _Nc151 Pc151";
+const imageStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " sb151";
+	rules += " Za151";
+	rules += " Fb151";
+	rules += " _H40ub4c151";
+	rules += " __D40ub4c151";
+	if (props.isRevealed) rules += " _Ib151";
+	else rules += " _Ia151";
+	if (props.isTransitioning) rules += " Yf151";
+	else rules += " Ye151";
+	rules += " Xe151";
+	if (props.isTransitioning) rules += " _2b151";
+	else rules += " _2b151";
+	return rules;
+};
+function isAllLoaded(loaded) {
+	for (const isLoaded of loaded.values()) if (!isLoaded) return false;
+	return true;
+}
+function ImageCoordinator(props) {
+	const group = () => props.group ?? DefaultImageGroup;
+	if (useContext(group()) !== defaultImageGroupValue) return memo(() => props.children);
+	return createComponent(ImageCoordinatorRoot, props);
+}
+function ImageCoordinatorRoot(props) {
+	const group = () => props.group ?? DefaultImageGroup;
+	const timeout = () => props.timeout ?? 5e3;
+	const [loadedAll, setLoadedAll] = createSignal(true);
+	const [timedOut, setTimedOut] = createSignal(false);
+	const [loadStartTime, setLoadStartTime] = createSignal(0);
+	const [loaded, setLoaded] = createSignal(/* @__PURE__ */ new Map());
+	const register = (url) => {
+		untrack(() => {
+			setLoaded((current) => {
+				if (current.get(url) === false) return current;
+				const next = new Map(current);
+				next.set(url, false);
+				if (loadedAll()) {
+					setTimedOut(false);
+					setLoadStartTime(Date.now());
+				}
+				setLoadedAll(false);
+				return next;
+			});
+		});
+	};
+	const unregister = (url) => {
+		setLoaded((current) => {
+			if (!current.has(url)) return current;
+			const next = new Map(current);
+			next.delete(url);
+			setLoadedAll(isAllLoaded(next));
+			return next;
+		});
+	};
+	const load = (url) => {
+		setLoaded((current) => {
+			if (current.get(url) !== false) return current;
+			const next = new Map(current);
+			next.set(url, true);
+			setLoadedAll(isAllLoaded(next));
+			return next;
+		});
+	};
+	createEffect(() => {
+		if (loadedAll()) return;
+		const delay = Math.max(0, loadStartTime() + timeout() - Date.now());
+		const timeoutId = window.setTimeout(() => setTimedOut(true), delay);
+		onCleanup(() => window.clearTimeout(timeoutId));
+	});
+	const value = {
+		get revealAll() {
+			return loadedAll() || timedOut();
+		},
+		register,
+		unregister,
+		load
+	};
+	const GroupProvider = group().Provider;
+	return createComponent(GroupProvider, {
+		value,
+		get children() {
+			return props.children;
+		}
+	});
+}
+function sourceCacheKey(src) {
+	return Array.isArray(src) ? JSON.stringify(src) : src ?? "";
+}
+function sourceMedia(source, colorScheme) {
+	return `${source.media ? `${source.media} and ` : ""}(prefers-color-scheme: ${colorScheme})`;
+}
+function Image(props) {
+	const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);
+	const [local] = splitProps(mergeProps$1(contextProps ?? {}, props), [
+		"src",
+		"alt",
+		"crossOrigin",
+		"decoding",
+		"fetchPriority",
+		"loading",
+		"referrerPolicy",
+		"width",
+		"height",
+		"styles",
+		"renderError",
+		"group",
+		"itemProp",
+		"slot",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"hidden",
+		"ref"
+	]);
+	const theme = useTheme();
+	const imageGroup = useContext(local.group ?? DefaultImageGroup);
+	const [state, setState] = createSignal("loading");
+	const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));
+	const [startTime, setStartTime] = createSignal(Date.now());
+	const [loadTime, setLoadTime] = createSignal(0);
+	const isSkeleton = createIsSkeleton();
+	let imageElement;
+	const nodeEnv = globalThis.process?.env?.NODE_ENV;
+	if (local.alt == null && nodeEnv !== "production") console.warn("The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.");
+	const hidden = () => local.hidden === true;
+	const srcProp = () => local.src ?? "";
+	const cacheKey = createMemo(() => sourceCacheKey(local.src));
+	const revealed = () => state() === "revealed" && !isSkeleton();
+	const transitioning = () => revealed() && loadTime() > 200;
+	const animating = () => isSkeleton() || state() === "loading" || state() === "loaded";
+	const loadingAnimationRef = useLoadingAnimation(animating);
+	createEffect(() => {
+		const nextKey = cacheKey();
+		if (nextKey !== lastCacheKey() && !hidden()) {
+			setState("loading");
+			setLastCacheKey(nextKey);
+			setStartTime(Date.now());
+			setLoadTime(0);
+		}
+	});
+	createEffect(() => {
+		if (hidden()) return;
+		const key = cacheKey();
+		imageGroup.register(key);
+		onCleanup(() => imageGroup.unregister(key));
+	});
+	createEffect(() => {
+		if (state() === "loaded" && imageGroup.revealAll && !hidden()) {
+			setState("revealed");
+			setLoadTime(Date.now() - startTime());
+		}
+	});
+	createEffect(() => {
+		if (hidden()) return;
+		const image = imageElement;
+		if (state() === "loading" && image?.complete) queueMicrotask(() => {
+			if (image.naturalWidth === 0 && image.naturalHeight === 0) handleError();
+			else handleLoad();
+		});
+	});
+	const handleLoad = () => {
+		imageGroup.load(cacheKey());
+		setState("loaded");
+	};
+	const handleError = () => {
+		setState("error");
+		imageGroup.unregister(cacheKey());
+	};
+	const slot = () => local.slot === null ? void 0 : local.slot ?? contextProps?.slot;
+	const wrapperClass = () => [
+		local.UNSAFE_className,
+		mergeStyles(imageWrapperStyles, mergeContextStyles(contextProps?.styles, props.styles)),
+		animating() ? loadingStyle : void 0
+	].filter(Boolean).join(" ");
+	const wrapperStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const errorState = () => !isSkeleton() && state() === "error" && local.renderError?.();
+	const sources = () => {
+		const src = srcProp();
+		if (!Array.isArray(src)) return [];
+		return src.map((source) => {
+			if (!source.colorScheme) return source;
+			const colorScheme = theme.colorScheme;
+			if (!colorScheme || colorScheme === "light dark") return {
+				...source,
+				media: sourceMedia(source, source.colorScheme)
+			};
+			return source.colorScheme === colorScheme ? source : null;
+		}).filter((source) => source != null);
+	};
+	const img = () => (() => {
+		var _el$ = getNextElement(_tmpl$);
+		_el$.addEventListener("error", handleError);
+		_el$.addEventListener("load", handleLoad);
+		use((element) => {
+			imageElement = element;
+		}, _el$);
+		spread(_el$, mergeProps({
+			get src() {
+				return memo(() => !!(typeof srcProp() === "string" && srcProp()))() ? srcProp() : void 0;
+			},
+			get alt() {
+				return local.alt;
+			},
+			get crossOrigin() {
+				return local.crossOrigin;
+			},
+			get decoding() {
+				return local.decoding;
+			},
+			get loading() {
+				return local.loading;
+			},
+			get referrerPolicy() {
+				return local.referrerPolicy;
+			},
+			get width() {
+				return local.width;
+			},
+			get height() {
+				return local.height;
+			},
+			get itemProp() {
+				return local.itemProp;
+			},
+			get ["class"]() {
+				return imageStyles({
+					isRevealed: revealed(),
+					isTransitioning: transitioning()
+				});
+			}
+		}, () => ({ fetchpriority: local.fetchPriority })), false, false);
+		runHydrationEvents();
+		return _el$;
+	})();
+	const imageContent = () => {
+		if (Array.isArray(srcProp())) return (() => {
+			var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
+			insert(_el$2, () => sources().map((source) => {
+				const { colorScheme: _colorScheme, ...sourceProps } = source;
+				return (() => {
+					var _el$7 = getNextElement(_tmpl$3);
+					effect((_p$) => {
+						var _v$ = sourceProps.srcSet, _v$2 = sourceProps.media, _v$3 = sourceProps.sizes, _v$4 = sourceProps.type, _v$5 = sourceProps.width, _v$6 = sourceProps.height;
+						_v$ !== _p$.e && setAttribute(_el$7, "srcset", _p$.e = _v$);
+						_v$2 !== _p$.t && setAttribute(_el$7, "media", _p$.t = _v$2);
+						_v$3 !== _p$.a && setAttribute(_el$7, "sizes", _p$.a = _v$3);
+						_v$4 !== _p$.o && setAttribute(_el$7, "type", _p$.o = _v$4);
+						_v$5 !== _p$.i && setAttribute(_el$7, "width", _p$.i = _v$5);
+						_v$6 !== _p$.n && setAttribute(_el$7, "height", _p$.n = _v$6);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0
+					});
+					return _el$7;
+				})();
+			}), _el$4, _co$);
+			insert(_el$2, img, _el$6, _co$2);
+			return _el$2;
+		})();
+		return img();
+	};
+	if (hidden()) return null;
+	return (() => {
+		var _el$8 = getNextElement(_tmpl$4);
+		var _ref$ = mergeContextRefs(contextProps?.ref, props.ref, (element) => {
+			loadingAnimationRef(element);
+		});
+		typeof _ref$ === "function" && use(_ref$, _el$8);
+		insert(_el$8, createComponent(Show, {
+			get when() {
+				return !errorState();
+			},
+			get fallback() {
+				return errorState();
+			},
+			get children() {
+				return imageContent();
+			}
+		}));
+		effect((_p$) => {
+			var _v$7 = slot() ?? void 0, _v$8 = wrapperStyle(), _v$9 = wrapperClass();
+			_v$7 !== _p$.e && setAttribute(_el$8, "slot", _p$.e = _v$7);
+			_p$.t = style(_el$8, _v$8, _p$.t);
+			_v$9 !== _p$.a && className(_el$8, _p$.a = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$8;
+	})();
+}
+//#endregion
+export { DefaultImageGroup, Image, ImageContext, ImageCoordinator, createImageGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/image/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  type Context,\n  type JSX,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { useTheme } from \"../provider\";\nimport { createIsSkeleton, loadingStyle, useLoadingAnimation } from \"../skeleton\";\n\nexport interface ImageSource {\n  /** A comma-separated list of image URLs and descriptors. */\n  srcSet?: string;\n  /** The color scheme for this image source. */\n  colorScheme?: \"light\" | \"dark\";\n  /** A media query describing when the source should render. */\n  media?: string;\n  /** A list of source sizes that describe the final rendered width of the image. */\n  sizes?: string;\n  /** The mime type of the image. */\n  type?: string;\n  /** The intrinsic width of the image. */\n  width?: number;\n  /** The intrinsic height of the image. */\n  height?: number;\n}\n\nexport interface ImageProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  /** Accessible alt text for the image. */\n  alt?: string;\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  decoding?: \"async\" | \"auto\" | \"sync\";\n  fetchPriority?: \"high\" | \"low\" | \"auto\";\n  loading?: \"eager\" | \"lazy\";\n  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>[\"referrerPolicy\"];\n  width?: number;\n  height?: number;\n  styles?: StyleString | (() => StyleString | undefined);\n  renderError?: () => JSX.Element;\n  group?: ImageGroup;\n  itemProp?: string;\n  slot?: string | null;\n  UNSAFE_className?: UnsafeClassName | string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n}\n\ntype ImageContextValue = ImageProps & {\n  hidden?: boolean;\n};\n\nexport const ImageContext = createContext<SpectrumContextValue<ImageContextValue>>(null);\n\nexport interface ImageCoordinatorProps {\n  children?: JSX.Element;\n  /** Time in milliseconds after which images are always displayed. @default 5000 */\n  timeout?: number;\n  group?: ImageGroup;\n}\n\ninterface ImageGroupValue {\n  readonly revealAll: boolean;\n  register(url: string): void;\n  unregister(url: string): void;\n  load(url: string): void;\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\nconst defaultImageGroupValue: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {},\n};\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultImageGroupValue);\n}\n\nexport const DefaultImageGroup = createImageGroup();\n\ntype ImageState = \"loading\" | \"loaded\" | \"revealed\" | \"error\";\n\nconst imageWrapperStyles = style({\n  backgroundColor: \"gray-100\",\n  overflow: \"hidden\",\n});\n\nconst imageStyles = style({\n  display: \"block\",\n  width: \"full\",\n  height: \"full\",\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n  opacity: {\n    default: 0,\n    isRevealed: 1,\n  },\n  transition: {\n    default: \"none\",\n    isTransitioning: \"opacity\",\n  },\n  transitionDuration: 500,\n});\n\nconst pictureStyles = style({\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n});\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (const isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function ImageCoordinator(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const context = useContext(group());\n\n  if (context !== defaultImageGroupValue) {\n    return <>{props.children}</>;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const timeout = () => props.timeout ?? 5000;\n  const [loadedAll, setLoadedAll] = createSignal(true);\n  const [timedOut, setTimedOut] = createSignal(false);\n  const [loadStartTime, setLoadStartTime] = createSignal(0);\n  const [loaded, setLoaded] = createSignal(new Map<string, boolean>());\n\n  const register = (url: string) => {\n    untrack(() => {\n      setLoaded((current) => {\n        if (current.get(url) === false) {\n          return current;\n        }\n\n        const next = new Map(current);\n        next.set(url, false);\n        if (loadedAll()) {\n          setTimedOut(false);\n          setLoadStartTime(Date.now());\n        }\n        setLoadedAll(false);\n        return next;\n      });\n    });\n  };\n\n  const unregister = (url: string) => {\n    setLoaded((current) => {\n      if (!current.has(url)) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.delete(url);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  const load = (url: string) => {\n    setLoaded((current) => {\n      if (current.get(url) !== false) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.set(url, true);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  createEffect(() => {\n    if (loadedAll()) {\n      return;\n    }\n\n    const delay = Math.max(0, loadStartTime() + timeout() - Date.now());\n    const timeoutId = window.setTimeout(() => setTimedOut(true), delay);\n    onCleanup(() => window.clearTimeout(timeoutId));\n  });\n\n  const value: ImageGroupValue = {\n    get revealAll() {\n      return loadedAll() || timedOut();\n    },\n    register,\n    unregister,\n    load,\n  };\n\n  const GroupProvider = group().Provider;\n  return <GroupProvider value={value}>{props.children}</GroupProvider>;\n}\n\nfunction sourceCacheKey(src: string | ImageSource[] | undefined) {\n  return Array.isArray(src) ? JSON.stringify(src) : (src ?? \"\");\n}\n\nfunction sourceMedia(source: ImageSource, colorScheme: \"light\" | \"dark\") {\n  return `${source.media ? `${source.media} and ` : \"\"}(prefers-color-scheme: ${colorScheme})`;\n}\n\nexport function Image(props: ImageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"crossOrigin\",\n    \"decoding\",\n    \"fetchPriority\",\n    \"loading\",\n    \"referrerPolicy\",\n    \"width\",\n    \"height\",\n    \"styles\",\n    \"renderError\",\n    \"group\",\n    \"itemProp\",\n    \"slot\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hidden\",\n    \"ref\",\n  ]);\n  const theme = useTheme();\n  const imageGroup = useContext(local.group ?? DefaultImageGroup);\n  const [state, setState] = createSignal<ImageState>(\"loading\");\n  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));\n  const [startTime, setStartTime] = createSignal(Date.now());\n  const [loadTime, setLoadTime] = createSignal(0);\n  const isSkeleton = createIsSkeleton();\n  let imageElement: HTMLImageElement | undefined;\n\n  const nodeEnv = (globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } })\n    .process?.env?.NODE_ENV;\n  if (local.alt == null && nodeEnv !== \"production\") {\n    console.warn(\n      'The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.',\n    );\n  }\n\n  const hidden = () => local.hidden === true;\n  const srcProp = () => local.src ?? \"\";\n  const cacheKey = createMemo(() => sourceCacheKey(local.src));\n  const revealed = () => state() === \"revealed\" && !isSkeleton();\n  const transitioning = () => revealed() && loadTime() > 200;\n  const animating = () => isSkeleton() || state() === \"loading\" || state() === \"loaded\";\n  const loadingAnimationRef = useLoadingAnimation(animating);\n\n  createEffect(() => {\n    const nextKey = cacheKey();\n    if (nextKey !== lastCacheKey() && !hidden()) {\n      setState(\"loading\");\n      setLastCacheKey(nextKey);\n      setStartTime(Date.now());\n      setLoadTime(0);\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const key = cacheKey();\n    imageGroup.register(key);\n    onCleanup(() => imageGroup.unregister(key));\n  });\n\n  createEffect(() => {\n    if (state() === \"loaded\" && imageGroup.revealAll && !hidden()) {\n      setState(\"revealed\");\n      setLoadTime(Date.now() - startTime());\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const image = imageElement;\n    if (state() === \"loading\" && image?.complete) {\n      queueMicrotask(() => {\n        if (image.naturalWidth === 0 && image.naturalHeight === 0) {\n          handleError();\n        } else {\n          handleLoad();\n        }\n      });\n    }\n  });\n\n  const handleLoad = () => {\n    imageGroup.load(cacheKey());\n    setState(\"loaded\");\n  };\n\n  const handleError = () => {\n    setState(\"error\");\n    imageGroup.unregister(cacheKey());\n  };\n\n  const slot = () => (local.slot === null ? undefined : (local.slot ?? contextProps?.slot));\n  const wrapperClass = () =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        imageWrapperStyles as unknown as StyleString,\n        mergeContextStyles(contextProps?.styles, props.styles),\n      ),\n      animating() ? loadingStyle : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const wrapperStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const errorState = () => !isSkeleton() && state() === \"error\" && local.renderError?.();\n\n  const sources = () => {\n    const src = srcProp();\n    if (!Array.isArray(src)) {\n      return [];\n    }\n\n    return src\n      .map((source) => {\n        if (!source.colorScheme) {\n          return source;\n        }\n\n        const colorScheme = theme.colorScheme;\n        if (!colorScheme || colorScheme === \"light dark\") {\n          return {\n            ...source,\n            media: sourceMedia(source, source.colorScheme),\n          };\n        }\n\n        return source.colorScheme === colorScheme ? source : null;\n      })\n      .filter((source): source is ImageSource => source != null);\n  };\n\n  const img = () => (\n    <img\n      src={typeof srcProp() === \"string\" && srcProp() ? (srcProp() as string) : undefined}\n      alt={local.alt}\n      crossOrigin={local.crossOrigin}\n      decoding={local.decoding}\n      loading={local.loading}\n      referrerPolicy={local.referrerPolicy}\n      width={local.width}\n      height={local.height}\n      ref={(element) => {\n        imageElement = element;\n      }}\n      itemProp={local.itemProp}\n      onLoad={handleLoad}\n      onError={handleError}\n      class={imageStyles({\n        isRevealed: revealed(),\n        isTransitioning: transitioning(),\n      })}\n      {...({ fetchpriority: local.fetchPriority } as Record<string, string | undefined>)}\n    />\n  );\n\n  const imageContent = () => {\n    if (Array.isArray(srcProp())) {\n      return (\n        <picture class={pictureStyles}>\n          {sources().map((source) => {\n            const { colorScheme: _colorScheme, ...sourceProps } = source;\n            return (\n              <source\n                srcset={sourceProps.srcSet}\n                media={sourceProps.media}\n                sizes={sourceProps.sizes}\n                type={sourceProps.type}\n                width={sourceProps.width}\n                height={sourceProps.height}\n              />\n            );\n          })}\n          {img()}\n        </picture>\n      );\n    }\n\n    return img();\n  };\n\n  if (hidden()) {\n    return null as unknown as JSX.Element;\n  }\n\n  return (\n    <div\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n        (element) => {\n          loadingAnimationRef(element);\n        },\n      )}\n      slot={slot() ?? undefined}\n      style={wrapperStyle()}\n      class={wrapperClass()}\n    >\n      <Show when={!errorState()} fallback={errorState()}>\n        {imageContent()}\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/image/index.jsx

@@ -0,0 +1,233 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { useTheme } from "../provider/index.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { createIsSkeleton, loadingStyle, useLoadingAnimation } from "../skeleton/index.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, mergeProps, onCleanup, splitProps, untrack, useContext } from "solid-js";
+//#region src/image/index.tsx
+const ImageContext = createContext(null);
+const defaultImageGroupValue = {
+	revealAll: true,
+	register() {},
+	unregister() {},
+	load() {}
+};
+function createImageGroup() {
+	return createContext(defaultImageGroupValue);
+}
+const DefaultImageGroup = createImageGroup();
+const imageWrapperStyles = " gkDWoNd151 _Nc151 Pc151";
+const imageStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " sb151";
+	rules += " Za151";
+	rules += " Fb151";
+	rules += " _H40ub4c151";
+	rules += " __D40ub4c151";
+	if (props.isRevealed) rules += " _Ib151";
+	else rules += " _Ia151";
+	if (props.isTransitioning) rules += " Yf151";
+	else rules += " Ye151";
+	rules += " Xe151";
+	if (props.isTransitioning) rules += " _2b151";
+	else rules += " _2b151";
+	return rules;
+};
+const pictureStyles = " _H40ub4c151 __D40ub4c151";
+function isAllLoaded(loaded) {
+	for (const isLoaded of loaded.values()) if (!isLoaded) return false;
+	return true;
+}
+function ImageCoordinator(props) {
+	const group = () => props.group ?? DefaultImageGroup;
+	if (useContext(group()) !== defaultImageGroupValue) return <>{props.children}</>;
+	return <ImageCoordinatorRoot {...props} />;
+}
+function ImageCoordinatorRoot(props) {
+	const group = () => props.group ?? DefaultImageGroup;
+	const timeout = () => props.timeout ?? 5e3;
+	const [loadedAll, setLoadedAll] = createSignal(true);
+	const [timedOut, setTimedOut] = createSignal(false);
+	const [loadStartTime, setLoadStartTime] = createSignal(0);
+	const [loaded, setLoaded] = createSignal(/* @__PURE__ */ new Map());
+	const register = (url) => {
+		untrack(() => {
+			setLoaded((current) => {
+				if (current.get(url) === false) return current;
+				const next = new Map(current);
+				next.set(url, false);
+				if (loadedAll()) {
+					setTimedOut(false);
+					setLoadStartTime(Date.now());
+				}
+				setLoadedAll(false);
+				return next;
+			});
+		});
+	};
+	const unregister = (url) => {
+		setLoaded((current) => {
+			if (!current.has(url)) return current;
+			const next = new Map(current);
+			next.delete(url);
+			setLoadedAll(isAllLoaded(next));
+			return next;
+		});
+	};
+	const load = (url) => {
+		setLoaded((current) => {
+			if (current.get(url) !== false) return current;
+			const next = new Map(current);
+			next.set(url, true);
+			setLoadedAll(isAllLoaded(next));
+			return next;
+		});
+	};
+	createEffect(() => {
+		if (loadedAll()) return;
+		const delay = Math.max(0, loadStartTime() + timeout() - Date.now());
+		const timeoutId = window.setTimeout(() => setTimedOut(true), delay);
+		onCleanup(() => window.clearTimeout(timeoutId));
+	});
+	const value = {
+		get revealAll() {
+			return loadedAll() || timedOut();
+		},
+		register,
+		unregister,
+		load
+	};
+	const GroupProvider = group().Provider;
+	return <GroupProvider value={value}>{props.children}</GroupProvider>;
+}
+function sourceCacheKey(src) {
+	return Array.isArray(src) ? JSON.stringify(src) : src ?? "";
+}
+function sourceMedia(source, colorScheme) {
+	return `${source.media ? `${source.media} and ` : ""}(prefers-color-scheme: ${colorScheme})`;
+}
+function Image(props) {
+	const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);
+	const [local] = splitProps(mergeProps(contextProps ?? {}, props), [
+		"src",
+		"alt",
+		"crossOrigin",
+		"decoding",
+		"fetchPriority",
+		"loading",
+		"referrerPolicy",
+		"width",
+		"height",
+		"styles",
+		"renderError",
+		"group",
+		"itemProp",
+		"slot",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"hidden",
+		"ref"
+	]);
+	const theme = useTheme();
+	const imageGroup = useContext(local.group ?? DefaultImageGroup);
+	const [state, setState] = createSignal("loading");
+	const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));
+	const [startTime, setStartTime] = createSignal(Date.now());
+	const [loadTime, setLoadTime] = createSignal(0);
+	const isSkeleton = createIsSkeleton();
+	let imageElement;
+	const nodeEnv = globalThis.process?.env?.NODE_ENV;
+	if (local.alt == null && nodeEnv !== "production") console.warn("The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.");
+	const hidden = () => local.hidden === true;
+	const srcProp = () => local.src ?? "";
+	const cacheKey = createMemo(() => sourceCacheKey(local.src));
+	const revealed = () => state() === "revealed" && !isSkeleton();
+	const transitioning = () => revealed() && loadTime() > 200;
+	const animating = () => isSkeleton() || state() === "loading" || state() === "loaded";
+	const loadingAnimationRef = useLoadingAnimation(animating);
+	createEffect(() => {
+		const nextKey = cacheKey();
+		if (nextKey !== lastCacheKey() && !hidden()) {
+			setState("loading");
+			setLastCacheKey(nextKey);
+			setStartTime(Date.now());
+			setLoadTime(0);
+		}
+	});
+	createEffect(() => {
+		if (hidden()) return;
+		const key = cacheKey();
+		imageGroup.register(key);
+		onCleanup(() => imageGroup.unregister(key));
+	});
+	createEffect(() => {
+		if (state() === "loaded" && imageGroup.revealAll && !hidden()) {
+			setState("revealed");
+			setLoadTime(Date.now() - startTime());
+		}
+	});
+	createEffect(() => {
+		if (hidden()) return;
+		const image = imageElement;
+		if (state() === "loading" && image?.complete) queueMicrotask(() => {
+			if (image.naturalWidth === 0 && image.naturalHeight === 0) handleError();
+			else handleLoad();
+		});
+	});
+	const handleLoad = () => {
+		imageGroup.load(cacheKey());
+		setState("loaded");
+	};
+	const handleError = () => {
+		setState("error");
+		imageGroup.unregister(cacheKey());
+	};
+	const slot = () => local.slot === null ? void 0 : local.slot ?? contextProps?.slot;
+	const wrapperClass = () => [
+		local.UNSAFE_className,
+		mergeStyles(imageWrapperStyles, mergeContextStyles(contextProps?.styles, props.styles)),
+		animating() ? loadingStyle : void 0
+	].filter(Boolean).join(" ");
+	const wrapperStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const errorState = () => !isSkeleton() && state() === "error" && local.renderError?.();
+	const sources = () => {
+		const src = srcProp();
+		if (!Array.isArray(src)) return [];
+		return src.map((source) => {
+			if (!source.colorScheme) return source;
+			const colorScheme = theme.colorScheme;
+			if (!colorScheme || colorScheme === "light dark") return {
+				...source,
+				media: sourceMedia(source, source.colorScheme)
+			};
+			return source.colorScheme === colorScheme ? source : null;
+		}).filter((source) => source != null);
+	};
+	const img = () => <img src={typeof srcProp() === "string" && srcProp() ? srcProp() : void 0} alt={local.alt} crossOrigin={local.crossOrigin} decoding={local.decoding} loading={local.loading} referrerPolicy={local.referrerPolicy} width={local.width} height={local.height} ref={(element) => {
+		imageElement = element;
+	}} itemProp={local.itemProp} onLoad={handleLoad} onError={handleError} class={imageStyles({
+		isRevealed: revealed(),
+		isTransitioning: transitioning()
+	})} {...{ fetchpriority: local.fetchPriority }} />;
+	const imageContent = () => {
+		if (Array.isArray(srcProp())) return <picture class={pictureStyles}>
+          {sources().map((source) => {
+			const { colorScheme: _colorScheme, ...sourceProps } = source;
+			return <source srcset={sourceProps.srcSet} media={sourceProps.media} sizes={sourceProps.sizes} type={sourceProps.type} width={sourceProps.width} height={sourceProps.height} />;
+		})}
+          {img()}
+        </picture>;
+		return img();
+	};
+	if (hidden()) return null;
+	return <div ref={mergeContextRefs(contextProps?.ref, props.ref, (element) => {
+		loadingAnimationRef(element);
+	})} slot={slot() ?? void 0} style={wrapperStyle()} class={wrapperClass()}>
+      <Show when={!errorState()} fallback={errorState()}>
+        {imageContent()}
+      </Show>
+    </div>;
+}
+//#endregion
+export { DefaultImageGroup, Image, ImageContext, ImageCoordinator, createImageGroup };
+
+//# sourceMappingURL=index.jsx.map

package/dist/image/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/image/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  type Context,\n  type JSX,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { useTheme } from \"../provider\";\nimport { createIsSkeleton, loadingStyle, useLoadingAnimation } from \"../skeleton\";\n\nexport interface ImageSource {\n  /** A comma-separated list of image URLs and descriptors. */\n  srcSet?: string;\n  /** The color scheme for this image source. */\n  colorScheme?: \"light\" | \"dark\";\n  /** A media query describing when the source should render. */\n  media?: string;\n  /** A list of source sizes that describe the final rendered width of the image. */\n  sizes?: string;\n  /** The mime type of the image. */\n  type?: string;\n  /** The intrinsic width of the image. */\n  width?: number;\n  /** The intrinsic height of the image. */\n  height?: number;\n}\n\nexport interface ImageProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  /** Accessible alt text for the image. */\n  alt?: string;\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  decoding?: \"async\" | \"auto\" | \"sync\";\n  fetchPriority?: \"high\" | \"low\" | \"auto\";\n  loading?: \"eager\" | \"lazy\";\n  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>[\"referrerPolicy\"];\n  width?: number;\n  height?: number;\n  styles?: StyleString | (() => StyleString | undefined);\n  renderError?: () => JSX.Element;\n  group?: ImageGroup;\n  itemProp?: string;\n  slot?: string | null;\n  UNSAFE_className?: UnsafeClassName | string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n}\n\ntype ImageContextValue = ImageProps & {\n  hidden?: boolean;\n};\n\nexport const ImageContext = createContext<SpectrumContextValue<ImageContextValue>>(null);\n\nexport interface ImageCoordinatorProps {\n  children?: JSX.Element;\n  /** Time in milliseconds after which images are always displayed. @default 5000 */\n  timeout?: number;\n  group?: ImageGroup;\n}\n\ninterface ImageGroupValue {\n  readonly revealAll: boolean;\n  register(url: string): void;\n  unregister(url: string): void;\n  load(url: string): void;\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\nconst defaultImageGroupValue: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {},\n};\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultImageGroupValue);\n}\n\nexport const DefaultImageGroup = createImageGroup();\n\ntype ImageState = \"loading\" | \"loaded\" | \"revealed\" | \"error\";\n\nconst imageWrapperStyles = style({\n  backgroundColor: \"gray-100\",\n  overflow: \"hidden\",\n});\n\nconst imageStyles = style({\n  display: \"block\",\n  width: \"full\",\n  height: \"full\",\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n  opacity: {\n    default: 0,\n    isRevealed: 1,\n  },\n  transition: {\n    default: \"none\",\n    isTransitioning: \"opacity\",\n  },\n  transitionDuration: 500,\n});\n\nconst pictureStyles = style({\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n});\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (const isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function ImageCoordinator(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const context = useContext(group());\n\n  if (context !== defaultImageGroupValue) {\n    return <>{props.children}</>;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const timeout = () => props.timeout ?? 5000;\n  const [loadedAll, setLoadedAll] = createSignal(true);\n  const [timedOut, setTimedOut] = createSignal(false);\n  const [loadStartTime, setLoadStartTime] = createSignal(0);\n  const [loaded, setLoaded] = createSignal(new Map<string, boolean>());\n\n  const register = (url: string) => {\n    untrack(() => {\n      setLoaded((current) => {\n        if (current.get(url) === false) {\n          return current;\n        }\n\n        const next = new Map(current);\n        next.set(url, false);\n        if (loadedAll()) {\n          setTimedOut(false);\n          setLoadStartTime(Date.now());\n        }\n        setLoadedAll(false);\n        return next;\n      });\n    });\n  };\n\n  const unregister = (url: string) => {\n    setLoaded((current) => {\n      if (!current.has(url)) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.delete(url);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  const load = (url: string) => {\n    setLoaded((current) => {\n      if (current.get(url) !== false) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.set(url, true);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  createEffect(() => {\n    if (loadedAll()) {\n      return;\n    }\n\n    const delay = Math.max(0, loadStartTime() + timeout() - Date.now());\n    const timeoutId = window.setTimeout(() => setTimedOut(true), delay);\n    onCleanup(() => window.clearTimeout(timeoutId));\n  });\n\n  const value: ImageGroupValue = {\n    get revealAll() {\n      return loadedAll() || timedOut();\n    },\n    register,\n    unregister,\n    load,\n  };\n\n  const GroupProvider = group().Provider;\n  return <GroupProvider value={value}>{props.children}</GroupProvider>;\n}\n\nfunction sourceCacheKey(src: string | ImageSource[] | undefined) {\n  return Array.isArray(src) ? JSON.stringify(src) : (src ?? \"\");\n}\n\nfunction sourceMedia(source: ImageSource, colorScheme: \"light\" | \"dark\") {\n  return `${source.media ? `${source.media} and ` : \"\"}(prefers-color-scheme: ${colorScheme})`;\n}\n\nexport function Image(props: ImageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"crossOrigin\",\n    \"decoding\",\n    \"fetchPriority\",\n    \"loading\",\n    \"referrerPolicy\",\n    \"width\",\n    \"height\",\n    \"styles\",\n    \"renderError\",\n    \"group\",\n    \"itemProp\",\n    \"slot\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hidden\",\n    \"ref\",\n  ]);\n  const theme = useTheme();\n  const imageGroup = useContext(local.group ?? DefaultImageGroup);\n  const [state, setState] = createSignal<ImageState>(\"loading\");\n  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));\n  const [startTime, setStartTime] = createSignal(Date.now());\n  const [loadTime, setLoadTime] = createSignal(0);\n  const isSkeleton = createIsSkeleton();\n  let imageElement: HTMLImageElement | undefined;\n\n  const nodeEnv = (globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } })\n    .process?.env?.NODE_ENV;\n  if (local.alt == null && nodeEnv !== \"production\") {\n    console.warn(\n      'The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.',\n    );\n  }\n\n  const hidden = () => local.hidden === true;\n  const srcProp = () => local.src ?? \"\";\n  const cacheKey = createMemo(() => sourceCacheKey(local.src));\n  const revealed = () => state() === \"revealed\" && !isSkeleton();\n  const transitioning = () => revealed() && loadTime() > 200;\n  const animating = () => isSkeleton() || state() === \"loading\" || state() === \"loaded\";\n  const loadingAnimationRef = useLoadingAnimation(animating);\n\n  createEffect(() => {\n    const nextKey = cacheKey();\n    if (nextKey !== lastCacheKey() && !hidden()) {\n      setState(\"loading\");\n      setLastCacheKey(nextKey);\n      setStartTime(Date.now());\n      setLoadTime(0);\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const key = cacheKey();\n    imageGroup.register(key);\n    onCleanup(() => imageGroup.unregister(key));\n  });\n\n  createEffect(() => {\n    if (state() === \"loaded\" && imageGroup.revealAll && !hidden()) {\n      setState(\"revealed\");\n      setLoadTime(Date.now() - startTime());\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const image = imageElement;\n    if (state() === \"loading\" && image?.complete) {\n      queueMicrotask(() => {\n        if (image.naturalWidth === 0 && image.naturalHeight === 0) {\n          handleError();\n        } else {\n          handleLoad();\n        }\n      });\n    }\n  });\n\n  const handleLoad = () => {\n    imageGroup.load(cacheKey());\n    setState(\"loaded\");\n  };\n\n  const handleError = () => {\n    setState(\"error\");\n    imageGroup.unregister(cacheKey());\n  };\n\n  const slot = () => (local.slot === null ? undefined : (local.slot ?? contextProps?.slot));\n  const wrapperClass = () =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        imageWrapperStyles as unknown as StyleString,\n        mergeContextStyles(contextProps?.styles, props.styles),\n      ),\n      animating() ? loadingStyle : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const wrapperStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const errorState = () => !isSkeleton() && state() === \"error\" && local.renderError?.();\n\n  const sources = () => {\n    const src = srcProp();\n    if (!Array.isArray(src)) {\n      return [];\n    }\n\n    return src\n      .map((source) => {\n        if (!source.colorScheme) {\n          return source;\n        }\n\n        const colorScheme = theme.colorScheme;\n        if (!colorScheme || colorScheme === \"light dark\") {\n          return {\n            ...source,\n            media: sourceMedia(source, source.colorScheme),\n          };\n        }\n\n        return source.colorScheme === colorScheme ? source : null;\n      })\n      .filter((source): source is ImageSource => source != null);\n  };\n\n  const img = () => (\n    <img\n      src={typeof srcProp() === \"string\" && srcProp() ? (srcProp() as string) : undefined}\n      alt={local.alt}\n      crossOrigin={local.crossOrigin}\n      decoding={local.decoding}\n      loading={local.loading}\n      referrerPolicy={local.referrerPolicy}\n      width={local.width}\n      height={local.height}\n      ref={(element) => {\n        imageElement = element;\n      }}\n      itemProp={local.itemProp}\n      onLoad={handleLoad}\n      onError={handleError}\n      class={imageStyles({\n        isRevealed: revealed(),\n        isTransitioning: transitioning(),\n      })}\n      {...({ fetchpriority: local.fetchPriority } as Record<string, string | undefined>)}\n    />\n  );\n\n  const imageContent = () => {\n    if (Array.isArray(srcProp())) {\n      return (\n        <picture class={pictureStyles}>\n          {sources().map((source) => {\n            const { colorScheme: _colorScheme, ...sourceProps } = source;\n            return (\n              <source\n                srcset={sourceProps.srcSet}\n                media={sourceProps.media}\n                sizes={sourceProps.sizes}\n                type={sourceProps.type}\n                width={sourceProps.width}\n                height={sourceProps.height}\n              />\n            );\n          })}\n          {img()}\n        </picture>\n      );\n    }\n\n    return img();\n  };\n\n  if (hidden()) {\n    return null as unknown as JSX.Element;\n  }\n\n  return (\n    <div\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n        (element) => {\n          loadingAnimationRef(element);\n        },\n      )}\n      slot={slot() ?? undefined}\n      style={wrapperStyle()}\n      class={wrapperClass()}\n    >\n      <Show when={!errorState()} fallback={errorState()}>\n        {imageContent()}\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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"}