@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/image-DpDFrrXL.js

@@ -0,0 +1,147 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { t as n } from "./aspect-ratio-C76l-aoY.js";
+import { createContext as r, useCallback as i, useContext as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/image/image-defaults.tsx
+var u = r({
+	bordered: !1,
+	decoding: "async",
+	fit: "cover",
+	layout: "intrinsic",
+	loading: "lazy",
+	placeholder: "surface",
+	position: "center",
+	radius: "none"
+});
+function d() {
+	return a(u);
+}
+function f({ children: e, ...t }) {
+	let n = d();
+	return /* @__PURE__ */ c(u.Provider, {
+		value: {
+			bordered: t.bordered ?? n.bordered,
+			decoding: t.decoding ?? n.decoding,
+			fit: t.fit ?? n.fit,
+			layout: t.layout ?? n.layout,
+			loading: t.loading ?? n.loading,
+			placeholder: t.placeholder ?? n.placeholder,
+			position: t.position ?? n.position,
+			radius: t.radius ?? n.radius
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/image/image.tsx
+var p = /* @__PURE__ */ new Set([
+	"center",
+	"top",
+	"bottom",
+	"start",
+	"end"
+]);
+function m({ alt: r, bordered: a, className: u, decoding: f, fallback: m, fallbackSrc: g, fetchPriority: _, fit: v, layout: y, loading: ee, onError: b, onLoad: x, onStatusChange: S, placeholder: C, placeholderContent: w, placeholderSrc: T, position: E, priority: D = !1, radius: O, ratio: k, ref: A, render: j, renderImage: M, sources: N, src: P, status: te, style: F, ...I }) {
+	let L = d(), [R, z] = o(() => ({
+		attempt: "primary",
+		src: P,
+		status: h(P)
+	}));
+	R.src !== P && z({
+		attempt: "primary",
+		src: P,
+		status: h(P)
+	});
+	let B = te ?? R.status, V = R.attempt === "fallback" ? g : P, H = i((e) => {
+		z((t) => t.src === e.src ? e : t), S?.(e.status);
+	}, [S]), U = i((e) => {
+		typeof A == "function" ? A(e) : A != null && (A.current = e), e !== null && e.complete && e.naturalWidth > 0 && R.status === "loading" && H({
+			attempt: R.attempt,
+			src: P,
+			status: "loaded"
+		});
+	}, [
+		R,
+		A,
+		H,
+		P
+	]), W = (e) => {
+		x?.(e), R.status !== "loaded" && H({
+			attempt: R.attempt,
+			src: P,
+			status: "loaded"
+		});
+	}, G = (e) => {
+		if (b?.(e), R.attempt === "primary" && g !== void 0) {
+			z({
+				attempt: "fallback",
+				src: P,
+				status: "loading"
+			});
+			return;
+		}
+		H({
+			attempt: R.attempt,
+			src: P,
+			status: "error"
+		});
+	}, K = y ?? (k === void 0 ? L.layout : "framed"), q = E ?? L.position, J = p.has(q) ? q : "custom", Y = C ?? L.placeholder, X = {
+		...I,
+		alt: r,
+		"data-part": "image",
+		decoding: f ?? L.decoding,
+		..._ === void 0 ? D ? { fetchPriority: "high" } : {} : { fetchPriority: _ },
+		loading: ee ?? (D ? "eager" : L.loading),
+		onError: G,
+		onLoad: W,
+		ref: U,
+		...V === void 0 ? {} : { src: V }
+	}, Z = M === void 0 ? /* @__PURE__ */ c("img", { ...X }) : M(X), ne = N === void 0 || N.length === 0 ? Z : /* @__PURE__ */ l("picture", {
+		"data-part": "picture",
+		children: [N.map((e, t) => /* @__PURE__ */ c("source", {
+			...e.media === void 0 ? {} : { media: e.media },
+			...e.sizes === void 0 ? {} : { sizes: e.sizes },
+			srcSet: e.srcSet,
+			...e.type === void 0 ? {} : { type: e.type }
+		}, t)), Z]
+	}), Q = /* @__PURE__ */ l(s, { children: [
+		ne,
+		/* @__PURE__ */ l("span", {
+			"aria-hidden": "true",
+			"data-part": "placeholder",
+			children: [Y === "blur" && T !== void 0 ? /* @__PURE__ */ c("img", {
+				alt: "",
+				src: T
+			}) : null, w]
+		}),
+		/* @__PURE__ */ c("span", {
+			"data-part": "fallback",
+			children: m ?? /* @__PURE__ */ c(t, { children: /* @__PURE__ */ c(e, { name: "image-off" }) })
+		})
+	] }), $ = {
+		children: k === void 0 ? Q : /* @__PURE__ */ c(n, {
+			ratio: k,
+			children: Q
+		}),
+		...u === void 0 ? {} : { className: u },
+		"data-fit": v ?? L.fit,
+		"data-layout": K,
+		"data-part": "root",
+		"data-placeholder": Y,
+		"data-position": J,
+		"data-radius": O ?? L.radius,
+		"data-status": B,
+		"data-ui": "image",
+		...a ?? L.bordered ? { "data-bordered": "" } : {},
+		style: J === "custom" ? {
+			...F,
+			"--slotted-image-position": q
+		} : F
+	};
+	return j === void 0 ? /* @__PURE__ */ c("div", { ...$ }) : j($);
+}
+function h(e) {
+	return e === void 0 ? "idle" : "loading";
+}
+//#endregion
+export { f as n, d as r, m as t };

package/dist/image.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./image-DpDFrrXL.js";
+export { n as Image, e as ImageDefaultsProvider, t as useImageDefaults };