@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/slider/utils.js

@@ -1,126 +1,82 @@
-import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __, a as _n } from "../../default-i18n-CnQeC5Pl.js";
+import { n as _n, r as sprintf, t as __ } from "../../build-module-sxK3nxOK.js";
+//#region lib/components/slider/utils.js
 /**
- * Generates an array of markers based on the provided minimum and maximum values and step.
- * If the step is less than 10, only markers divisible by 5 and 10 are included.
- *
- * @param {number} min - The minimum value for the markers.
- * @param {number} max - The maximum value for the markers.
- * @param {number} [step=10] - The step between each marker. Default is 10.
- *
- * @returns {Object} An object where the keys are the marker values and the values are either the marker value (if divisible by 10) or an empty string.
- *
- * @example
- * generateMarkers(-20, 50, 10); // { '-20': '-20', '-10': '-10', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50' }
- *
- * @preserve
- */
-const generateMarkers = (min, max, step = 10) => {
-  const smallStep = step < 10 && Math.abs(max - min) > 20;
-  if (step < 1 && Math.abs(max - min) > 2) {
-    step = 1;
-  }
-  if (step < 0.1 && Math.abs(max - min) > 0.2) {
-    step = 0.1;
-  }
-  const markers = [];
-  if (min < 0) {
-    for (let i = min; i < 0; i += step) {
-      markers.push(i.toString());
-    }
-    for (let i = 0; i <= max; i += step) {
-      markers.push(i.toString());
-    }
-  } else {
-    for (let i = min; i <= max; i += step) {
-      markers.push(i.toString());
-    }
-  }
-  return markers.reduce((acc, marker) => {
-    if (smallStep && marker % 5 !== 0) {
-      return acc;
-    }
-    if (smallStep && marker % 10 !== 0) {
-      acc[marker] = "";
-    } else {
-      if (marker < 1) {
-        acc[marker] = parseFloat(marker).toFixed(step < 0.1 ? 2 : 1).replace(".0", "");
-      } else {
-        acc[marker] = marker;
-      }
-    }
-    return acc;
-  }, {});
+* Generates an array of markers based on the provided minimum and maximum values and step.
+* If the step is less than 10, only markers divisible by 5 and 10 are included.
+*
+* @param {number} min - The minimum value for the markers.
+* @param {number} max - The maximum value for the markers.
+* @param {number} [step=10] - The step between each marker. Default is 10.
+*
+* @returns {Object} An object where the keys are the marker values and the values are either the marker value (if divisible by 10) or an empty string.
+*
+* @example
+* generateMarkers(-20, 50, 10); // { '-20': '-20', '-10': '-10', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50' }
+*/
+var generateMarkers = (min, max, step = 10) => {
+	let adjustedStep = step;
+	const smallStep = adjustedStep < 10 && Math.abs(max - min) > 20;
+	if (adjustedStep < 1 && Math.abs(max - min) > 2) adjustedStep = 1;
+	if (adjustedStep < .1 && Math.abs(max - min) > .2) adjustedStep = .1;
+	const markers = [];
+	if (min < 0) {
+		for (let i = min; i < 0; i += adjustedStep) markers.push(i.toString());
+		for (let i = 0; i <= max; i += adjustedStep) markers.push(i.toString());
+	} else for (let i = min; i <= max; i += adjustedStep) markers.push(i.toString());
+	return markers.reduce((acc, marker) => {
+		if (smallStep && marker % 5 !== 0) return acc;
+		if (smallStep && marker % 10 !== 0) acc[marker] = "";
+		else if (marker < 1) acc[marker] = parseFloat(marker).toFixed(adjustedStep < .1 ? 2 : 1).replace(".0", "");
+		else acc[marker] = marker;
+		return acc;
+	}, {});
 };
 /**
- * Returns a human-readable string representing the column configuration.
- *
- * @param {Number} columns - Number of columns.
- * @param {Number} offset - Offset of the column.
- * @param {Number} width - Width of the column.
- * @param {boolean} [showOuterAsGutter=false] - If `true`, the outer columns are skipped when counting.
- *
- * @returns {string} Configuration info in a human-readable format.
- *
- * @example
- * const output = getColumnConfigOutputText(12, 1, 6); // => '6 cols from 1'
- *
- * @preserve
- */
-const getColumnConfigOutputText = (columns, offset, width, showOuterAsGutter = false) => {
-  const endOffset = offset + width - 1;
-  if (offset === 1 && endOffset === columns) {
-    return __("Full-width", "eightshift-ui-components");
-  }
-  if (showOuterAsGutter && width === 1 && offset === 1) {
-    return __("Start gutter", "eightshift-ui-components");
-  }
-  if (showOuterAsGutter && width === 1 && endOffset === columns) {
-    return __("End gutter", "eightshift-ui-components");
-  }
-  if (width === 1) {
-    return sprintf(__("Col %d", "eightshift-ui-components"), offset);
-  }
-  if (offset === 1 && endOffset < columns) {
-    return sprintf(__("To col %d", "eightshift-ui-components"), showOuterAsGutter ? endOffset - 1 : endOffset);
-  }
-  if (offset > 1 && endOffset === columns) {
-    return sprintf(__("From col %d", "eightshift-ui-components"), showOuterAsGutter ? offset - 1 : offset);
-  }
-  return sprintf(_n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"), width, showOuterAsGutter ? offset - 1 : offset);
+* Returns a human-readable string representing the column configuration.
+*
+* @param {Number} columns - Number of columns.
+* @param {Number} offset - Offset of the column.
+* @param {Number} width - Width of the column.
+* @param {boolean} [showOuterAsGutter=false] - If `true`, the outer columns are skipped when counting.
+*
+* @returns {string} Configuration info in a human-readable format.
+*
+* @example
+* const output = getColumnConfigOutputText(12, 1, 6); // => '6 cols from 1'
+*/
+var getColumnConfigOutputText = (columns, offset, width, showOuterAsGutter = false) => {
+	const endOffset = offset + width - 1;
+	if (offset === 1 && endOffset === columns) return __("Full-width", "eightshift-ui-components");
+	if (showOuterAsGutter && width === 1 && offset === 1) return __("Start gutter", "eightshift-ui-components");
+	if (showOuterAsGutter && width === 1 && endOffset === columns) return __("End gutter", "eightshift-ui-components");
+	if (width === 1) return sprintf(__("Col %d", "eightshift-ui-components"), offset);
+	if (offset === 1 && endOffset < columns) return sprintf(__("To col %d", "eightshift-ui-components"), showOuterAsGutter ? endOffset - 1 : endOffset);
+	if (offset > 1 && endOffset === columns) return sprintf(__("From col %d", "eightshift-ui-components"), showOuterAsGutter ? offset - 1 : offset);
+	return sprintf(_n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"), width, showOuterAsGutter ? offset - 1 : offset);
 };
-const generateGridTemplate = (points = [], splitPoint = null, { spaceBetween = 0, pointWidth = 3, vertical = false } = {}) => {
-  const gap = spaceBetween / 16;
-  const allPoints = [...points, ...splitPoint !== null && !points.includes(splitPoint) ? [splitPoint] : []].sort((a, b) => a - b);
-  if (allPoints.length === 0) {
-    return ["minmax(0, 100fr)"];
-  }
-  const segments = [];
-  let lastPosition = 0;
-  allPoints.forEach((point) => {
-    if (point > lastPosition) {
-      const segmentPercent = point - lastPosition;
-      segments.push(`${segmentPercent}fr`);
-      if (gap > 0) {
-        segments.push(`${gap}rem`);
-      }
-    }
-    if (points.includes(point)) {
-      segments.push(`${pointWidth}px`);
-      if (gap > 0) {
-        segments.push(`${gap}rem`);
-      }
-    }
-    lastPosition = point;
-  });
-  if (lastPosition < 100) {
-    const segmentPercent = 100 - lastPosition;
-    segments.push(`minmax(0, ${segmentPercent}fr)`);
-  }
-  return segments;
-};
-export {
-  generateGridTemplate,
-  generateMarkers,
-  getColumnConfigOutputText
+var generateGridTemplate = (points = [], splitPoint = null, { spaceBetween = 0, pointWidth = 3, vertical = false } = {}) => {
+	const gap = spaceBetween / 16;
+	const allPoints = [...points, ...splitPoint !== null && !points.includes(splitPoint) ? [splitPoint] : []].sort((a, b) => a - b);
+	if (allPoints.length === 0) return ["minmax(0, 100fr)"];
+	const segments = [];
+	let lastPosition = 0;
+	allPoints.forEach((point) => {
+		if (point > lastPosition) {
+			const segmentPercent = point - lastPosition;
+			segments.push(`${segmentPercent}fr`);
+			if (gap > 0) segments.push(`${gap}rem`);
+		}
+		if (points.includes(point)) {
+			segments.push(`${pointWidth}px`);
+			if (gap > 0) segments.push(`${gap}rem`);
+		}
+		lastPosition = point;
+	});
+	if (lastPosition < 100) {
+		const segmentPercent = 100 - lastPosition;
+		segments.push(`minmax(0, ${segmentPercent}fr)`);
+	}
+	return segments;
 };
+//#endregion
+export { generateGridTemplate, generateMarkers, getColumnConfigOutputText };

package/dist/components/smart-image/image-analysis-worker.js

@@ -0,0 +1,128 @@
+//#region lib/components/smart-image/image-analysis-worker.js
+var getSaturation = (r, g, b) => {
+	const red = r / 255;
+	const green = g / 255;
+	const blue = b / 255;
+	const max = Math.max(red, green, blue);
+	const delta = max - Math.min(red, green, blue);
+	if (max < .05) return 0;
+	let saturation = 0;
+	if (max !== 0) saturation = delta / max;
+	return parseFloat(saturation.toFixed(3));
+};
+var rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+self.onmessage = (e) => {
+	const { buffer, width, height, config } = e.data;
+	const { maxColors = 5, threshold = 96, transparencyThreshold = 255 } = config;
+	const stride = 4;
+	const isTransparent = (idx) => buffer[idx + 3] < transparencyThreshold;
+	const getIdx = (x, y) => (y * width + x) * stride;
+	const corners = {
+		topLeft: isTransparent(getIdx(0, 0)),
+		topRight: isTransparent(getIdx(width - 1, 0)),
+		bottomLeft: isTransparent(getIdx(0, height - 1)),
+		bottomRight: isTransparent(getIdx(width - 1, height - 1))
+	};
+	const sides = {
+		top: false,
+		bottom: false,
+		left: false,
+		right: false
+	};
+	for (let x = 0; x < width; x += 5) {
+		if (!sides.top && isTransparent(getIdx(x, 0))) sides.top = true;
+		if (!sides.bottom && isTransparent(getIdx(x, height - 1))) sides.bottom = true;
+	}
+	for (let y = 0; y < height; y += 5) {
+		if (!sides.left && isTransparent(getIdx(0, y))) sides.left = true;
+		if (!sides.right && isTransparent(getIdx(width - 1, y))) sides.right = true;
+	}
+	let internalTransparent = false;
+	if (!Object.values(sides).some((v) => v)) {
+		const len = buffer.length;
+		const step = Math.floor(len / 100);
+		for (let i = 0; i < len; i += step) if (buffer[i - i % 4 + 3] < 255) {
+			internalTransparent = true;
+			break;
+		}
+	} else internalTransparent = true;
+	const colorCounts = {};
+	const samplingRate = 20;
+	let totalSampledPixels = 0;
+	let sumR = 0;
+	let sumG = 0;
+	let sumB = 0;
+	for (let i = 0; i < buffer.length; i += stride * samplingRate) {
+		const rRaw = buffer[i];
+		const gRaw = buffer[i + 1];
+		const bRaw = buffer[i + 2];
+		if (buffer[i + 3] < 250) continue;
+		totalSampledPixels++;
+		sumR += rRaw;
+		sumG += gRaw;
+		sumB += bRaw;
+		const q = 5;
+		const key = `${Math.round(rRaw / q) * q},${Math.round(gRaw / q) * q},${Math.round(bRaw / q) * q}`;
+		colorCounts[key] = (colorCounts[key] || 0) + 1;
+	}
+	let averageColor = null;
+	if (totalSampledPixels > 0) {
+		const avgR = Math.round(sumR / totalSampledPixels);
+		const avgG = Math.round(sumG / totalSampledPixels);
+		const avgB = Math.round(sumB / totalSampledPixels);
+		const avgLum = .2126 * avgR + .7152 * avgG + .0722 * avgB;
+		averageColor = {
+			color: rgbToHex(avgR, avgG, avgB),
+			isDark: avgLum <= 128,
+			saturation: getSaturation(avgR, avgG, avgB)
+		};
+	}
+	const sortedRawColors = Object.entries(colorCounts).map(([key, count]) => {
+		const [r, g, b] = key.split(",").map(Number);
+		return {
+			r,
+			g,
+			b,
+			count
+		};
+	}).sort((a, b) => b.count - a.count);
+	const distinctPalette = [];
+	for (const candidate of sortedRawColors) {
+		if (distinctPalette.length >= maxColors) break;
+		let isSimilar = false;
+		for (const existing of distinctPalette) if (Math.sqrt(Math.pow(candidate.r - existing.r, 2) + Math.pow(candidate.g - existing.g, 2) + Math.pow(candidate.b - existing.b, 2)) < threshold) {
+			existing.count += candidate.count;
+			isSimilar = true;
+			break;
+		}
+		if (!isSimilar) distinctPalette.push({ ...candidate });
+	}
+	const palette = distinctPalette.map((item) => {
+		const percentage = parseFloat((item.count / totalSampledPixels).toFixed(3));
+		const lum = .2126 * item.r + .7152 * item.g + .0722 * item.b;
+		return {
+			color: rgbToHex(item.r, item.g, item.b),
+			area: percentage,
+			isDark: lum <= 128,
+			saturation: getSaturation(item.r, item.g, item.b)
+		};
+	});
+	self.postMessage({
+		dominantColors: palette,
+		averageColor,
+		isDark: palette[0]?.isDark || false,
+		isTransparent: internalTransparent || Object.values(corners).some((v) => v) || Object.values(sides).some((v) => v),
+		transparencyInfo: {
+			any: internalTransparent,
+			left: sides.left,
+			right: sides.right,
+			top: sides.top,
+			bottom: sides.bottom,
+			topLeftCorner: corners.topLeft,
+			topRightCorner: corners.topRight,
+			bottomLeftCorner: corners.bottomLeft,
+			bottomRightCorner: corners.bottomRight
+		}
+	});
+};
+//#endregion

package/dist/components/smart-image/smart-image.js

@@ -1,205 +1,3 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { useState, useRef, useEffect, cloneElement } from "react";
-import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-DAh4myol.js";
-import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { useImageAnalysisWorker } from "../../utilities/web-workers.js";
-import workerInline from "./worker-inline.js";
-import { cyrb64Hash } from "../../utilities/hash.js";
-import { b as analyzeImage } from "../../general-BfKmjm56.js";
-/**
- * @typedef {Object} CustomImageProps
- * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.
- * @property {string} [props.errorClassName] - Classes to pass to the default error view.
- * @property {string} [props.processingClassName] - Classes to apply while the image is loading / being processed.
- * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
- * @property {boolean} [props.verbose] - If `true`, extra debug info is logged in case of errors.
- * @property {import('../../utilities/general').ImageAnalysisSettings} [imageAnalysisSettings] - Settings to pass to the image analysis function.
- * @property {import('../../utilities/general').ImageAnalysisResult} [analysisData] - Previous analysis result to pass in directly, skipping analysis.
- *
- * @preserve
- */
-/**
- * @typedef {Omit<JSX.IntrinsicElements['img'], 'crossOrigin'>} BaseImageProps
- *
- * @preserve
- */
-/**
- * @typedef {CustomImageProps & BaseImageProps} ImageProps
- *
- * @preserve
- */
-/**
- * Image that analyzes its contents and can apply different classes based on image transparency.
- * It also provides a CSS variable with the image's dominant color, and optionally custom child rendering with all the data exposed.
- *
- * @component
- * @param {ImageProps} props - Component props.
- *
- * @returns {JSX.Element} The SmartImage component.
- *
- * @example
- * <SmartImage src='https://picsum.photos/600/400' />
- *
- * @example
- * <SmartImage src='https://picsum.photos/600/400'>
- *     {({ image, dominantColors, isDark }) => (
- *         <div style={{ backgroundColor: dominantColors[0].color }}>
- *             {image}
- *             <p style={{ color: isDark ? '#000000' : '#FFFFFF' }}>Lorem ipsum</p>
- *         </div>
- *     )}
- * </SmartImage>
- *
- * @preserve
- */
-const SmartImage = (props) => {
-  const { imageAnalysisSettings, errorClassName, processingClassName = "es:opacity-0 es:fixed", hidden, renderError, analysisData, children, verbose, ...imageProps } = props;
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [hasAnalysed, setHasAnalysed] = useState(false);
-  const [isTransparent, setIsTransparent] = useState(null);
-  const [transparencyInfo, setTransparencyInfo] = useState(null);
-  const [dominantColors, setDominantColors] = useState([]);
-  const [isDark, setIsDark] = useState(false);
-  const [error, setError] = useState(null);
-  const workerRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      if (workerRef.current) {
-        workerRef.current.terminate();
-        workerRef.current = null;
-      }
-    };
-  }, []);
-  const { analyzeWithWorkerCb } = useImageAnalysisWorker(workerRef, workerInline);
-  if (hidden) {
-    return null;
-  }
-  const classFetchProps = { isLoaded, hasAnalysed, isTransparent, dominantColors, isDark, transparencyInfo };
-  const imageElement = /* @__PURE__ */ jsx(
-    "img",
-    {
-      decoding: "async",
-      ...imageProps,
-      crossOrigin: "anonymous",
-      style: {
-        ...imageProps.style || {},
-        "--es-img-dominant-color": dominantColors?.[0]?.color ?? ""
-      },
-      className: clsx(
-        "es:transition-opacity",
-        !hasAnalysed && processingClassName,
-        typeof imageProps.className === "function" ? imageProps.className(classFetchProps) : imageProps.className
-      ),
-      onLoad: async (e) => {
-        setIsLoaded(true);
-        if (props.onLoad) {
-          props.onLoad(e);
-        }
-        if (!imageProps.src) {
-          setHasAnalysed(true);
-          return;
-        }
-        if (analysisData) {
-          const { isDark: dark, dominantColors: colors, isTransparent: transparent, transparencyInfo: transparencyInfo2 } = analysisData;
-          if (dark !== void 0 && colors !== void 0 && transparent !== void 0 && transparencyInfo2 !== void 0) {
-            setIsDark(dark);
-            setDominantColors(colors);
-            setIsTransparent(transparent);
-            setTransparencyInfo(transparencyInfo2);
-            setHasAnalysed(true);
-            return;
-          }
-        }
-        const cacheKey = `es-uic-img-analysis-${cyrb64Hash(imageProps.src)}`;
-        if (localStorage?.getItem(cacheKey)) {
-          const { isDark: dark, dominantColors: colors, isTransparent: transparent, transparencyInfo: transparencyInfo2 } = JSON.parse(localStorage.getItem(cacheKey));
-          setIsDark(dark);
-          setDominantColors(colors);
-          setIsTransparent(transparent);
-          setTransparencyInfo(transparencyInfo2);
-          setHasAnalysed(true);
-          return;
-        }
-        try {
-          const imageBitmap = await createImageBitmap(e.target);
-          const result = await analyzeWithWorkerCb(imageBitmap, imageAnalysisSettings);
-          if (result) {
-            const { isDark: dark, dominantColors: colors, isTransparent: transparent, transparencyInfo: transparencyInfo2 } = result;
-            setIsDark(dark);
-            setDominantColors(colors);
-            setIsTransparent(transparent);
-            setTransparencyInfo(transparencyInfo2);
-            localStorage?.setItem(cacheKey, JSON.stringify(result));
-          } else {
-            if (verbose) {
-              console.log("[SmartImage] Worker analysis failed, falling back to synchronous analysis.");
-            }
-            const syncResult = analyzeImage(e.target, imageAnalysisSettings);
-            if (syncResult) {
-              const { isDark: dark, dominantColors: colors, isTransparent: transparent, transparencyInfo: transparencyInfo2 } = syncResult;
-              setIsDark(dark);
-              setDominantColors(colors);
-              setIsTransparent(transparent);
-              setTransparencyInfo(transparencyInfo2);
-              localStorage?.setItem(cacheKey, JSON.stringify(syncResult));
-            } else {
-              if (verbose) {
-                console.log("[SmartImage] Synchronous analysis failed.");
-              }
-            }
-          }
-        } catch (err) {
-          if (verbose) {
-            console.error("[SmartImage] Error analyzing image.", err);
-          }
-          setError(err);
-        }
-        setHasAnalysed(true);
-      },
-      onError: () => setError(new Error("Image failed to load")),
-      "data-is-transparent": isTransparent,
-      "data-is-dark": isDark
-    }
-  );
-  if (error && renderError) {
-    return renderError(error);
-  } else if (error) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          typeof children !== "function" && "es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2",
-          "es:motion-preset-fade",
-          errorClassName
-        ),
-        children: [
-          typeof children !== "function" && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }),
-          typeof children === "function" ? children({
-            image: cloneElement(imageElement, { crossOrigin: null }),
-            hasAnalysed: true,
-            isTransparent: false,
-            hasError: true,
-            errorBadge: /* @__PURE__ */ jsx(
-              DecorativeTooltip,
-              {
-                wrapperClassName: "es:size-8 es:-translate-y-4 es:m-auto",
-                text: __("Error loading image", "eightshift-ui-components"),
-                children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" })
-              }
-            )
-          }) : cloneElement(imageElement, { crossOrigin: null })
-        ]
-      }
-    );
-  }
-  if (!children) {
-    return imageElement;
-  }
-  return typeof children === "function" ? children({ image: imageElement, dominantColors, isDark, hasAnalysed, isTransparent, transparencyInfo }) : imageElement;
-};
-export {
-  SmartImage
-};
+import "../../build-module-sxK3nxOK.js";
+import { t as SmartImage } from "../../smart-image-CbSsEASF.js";
+export { SmartImage, SmartImage as __SmartImage };