@eightshift/ui-components 7.0.0 → 7.2.0

package/dist/gradient-editor-DbH8NU2p.js

@@ -1,604 +0,0 @@
-import { t as clsx } from "./clsx-BUU5J41u.js";
-import { n as ButtonGroup, t as Button } from "./button-COTeluL8.js";
-import { n as $251c695a52d94a8d$export$cae13e90592f246a } from "./color-swatch-CBYsO_Zs.js";
-import { t as SolidColorPicker } from "./solid-color-picker-DbT-aoVx.js";
-import { t as NumberPicker } from "./number-picker-CkA1iJNZ.js";
-import { BaseControl } from "./components/base-control/base-control.js";
-import { o as isColorDark, s as srgb } from "./general-D-7dwhuF.js";
-import { r as sprintf, t as __ } from "./build-module-sxK3nxOK.js";
-import { add } from "./icons/ui-icons/add.js";
-import { angle } from "./icons/ui-icons/angle.js";
-import { centerPoint } from "./icons/ui-icons/center-point.js";
-import { genericShapesAlt } from "./icons/ui-icons/generic-shapes-alt.js";
-import { gradientRepeat } from "./icons/ui-icons/gradient-repeat.js";
-import { gradientStop } from "./icons/ui-icons/gradient-stop.js";
-import { sliders } from "./icons/ui-icons/sliders.js";
-import { trash } from "./icons/ui-icons/trash.js";
-import { TriggeredPopover } from "./components/popover/popover.js";
-import { Menu, MenuItem } from "./components/menu/menu.js";
-import { Container, ContainerGroup } from "./components/base-control/container.js";
-import { DraggableList } from "./components/draggable-list/draggable-list.js";
-import { DraggableListItem } from "./components/draggable-list/draggable-list-item.js";
-import { Slider } from "./components/slider/slider.js";
-import { MatrixAlign } from "./components/matrix-align/matrix-align.js";
-import { Toggle } from "./components/toggle/toggle.js";
-import { OptionSelect } from "./components/option-select/option-select.js";
-import { useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region node_modules/css-gradient-parser/dist/index.js
-function c(e, o = ",") {
-	let t = [], n = 0, i = 0;
-	o = new RegExp(o);
-	for (let r = 0; r < e.length; r++) e[r] === "(" ? i++ : e[r] === ")" && i--, i === 0 && o.test(e[r]) && (t.push(e.slice(n, r).trim()), n = r + 1);
-	return t.push(e.slice(n).trim()), t;
-}
-function g(e) {
-	let o = [];
-	for (let t = 0, n = e.length; t < n;) {
-		let [i, r] = c(e[t], /\s+/);
-		m(e[t + 1]) ? (o.push({
-			color: i,
-			offset: l(r),
-			hint: l(e[t + 1])
-		}), t += 2) : (o.push({
-			color: i,
-			offset: l(r)
-		}), t++);
-	}
-	return o;
-}
-var u = /^(-?\d+\.?\d*)(%|vw|vh|px|em|rem|deg|rad|grad|turn|ch|vmin|vmax)?$/;
-function m(e) {
-	return u.test(e);
-}
-function l(e) {
-	if (!e) return;
-	let [, o, t] = e.trim().match(u) || [];
-	return {
-		value: o,
-		unit: t ?? "px"
-	};
-}
-function P(e) {
-	if (!/^(repeating-)?linear-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
-	let [, o, t] = e.match(/(repeating-)?linear-gradient\((.+)\)/), n = {
-		orientation: {
-			type: "directional",
-			value: "bottom"
-		},
-		repeating: !!o,
-		stops: []
-	}, i = c(t), r = x(i[0]);
-	return r && (n.orientation = r, i.shift()), {
-		...n,
-		stops: g(i)
-	};
-}
-function x(e) {
-	return e.startsWith("to ") ? {
-		type: "directional",
-		value: e.replace("to ", "")
-	} : [
-		"turn",
-		"deg",
-		"grad",
-		"rad"
-	].some((o) => e.endsWith(o)) ? {
-		type: "angular",
-		value: l(e)
-	} : null;
-}
-var v = new Set([
-	"closest-corner",
-	"closest-side",
-	"farthest-corner",
-	"farthest-side"
-]), w = new Set([
-	"center",
-	"left",
-	"top",
-	"right",
-	"bottom"
-]);
-function d(e) {
-	return v.has(e);
-}
-function h(e) {
-	return w.has(e);
-}
-function R(e) {
-	let o = Array(2).fill("");
-	for (let t = 0; t < 2; t++) e[t] ? o[t] = e[t] : o[t] = "center";
-	return o;
-}
-function K(e) {
-	if (!/(repeating-)?radial-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
-	let [, o, t] = e.match(/(repeating-)?radial-gradient\((.+)\)/), n = {
-		shape: "ellipse",
-		repeating: !!o,
-		size: [{
-			type: "keyword",
-			value: "farthest-corner"
-		}],
-		position: {
-			x: {
-				type: "keyword",
-				value: "center"
-			},
-			y: {
-				type: "keyword",
-				value: "center"
-			}
-		},
-		stops: []
-	}, i = c(t);
-	if (S(i[0])) return {
-		...n,
-		stops: g(i)
-	};
-	let r = i[0].split("at").map((f) => f.trim()), p = ((r[0] || "").match(/(circle|ellipse)/) || [])[1], a = (r[0] || "").match(/(-?\d+\.?\d*(vw|vh|px|em|rem|%|rad|grad|turn|deg)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || [], s = R((r[1] || "").split(" "));
-	return p ? n.shape = p : a.length === 1 && !d(a[0]) ? n.shape = "circle" : n.shape = "ellipse", a.length === 0 && a.push("farthest-corner"), n.size = a.map((f) => d(f) ? {
-		type: "keyword",
-		value: f
-	} : {
-		type: "length",
-		value: l(f)
-	}), n.position.x = h(s[0]) ? {
-		type: "keyword",
-		value: s[0]
-	} : {
-		type: "length",
-		value: l(s[0])
-	}, n.position.y = h(s[1]) ? {
-		type: "keyword",
-		value: s[1]
-	} : {
-		type: "length",
-		value: l(s[1])
-	}, (p || a.length > 0 || r[1]) && i.shift(), {
-		...n,
-		stops: g(i)
-	};
-}
-function S(e) {
-	return /(circle|ellipse|at)/.test(e) ? !1 : /^(rgba?|hwb|hsla?|lab|lch|oklab|color|#|[a-zA-Z]+)/.test(e);
-}
-var C = new Set([
-	"from",
-	"in",
-	"at"
-]);
-function j(e) {
-	if (!/(repeating-)?conic-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
-	let [, o, t] = e.match(/(repeating-)?conic-gradient\((.+)\)/), n = {
-		angle: "0deg",
-		repeating: !!o,
-		position: "center",
-		stops: []
-	}, i = c(t).map((s) => s.trim()), r = c(i[0], /\s+/), p = "", a = 0;
-	for (let s = 0, f = r.length; s < f; s++) C.has(r[s]) && (s > 0 && Object.assign(n, y(p, r, a, s)), p = r[s], a = s + 1);
-	return p && (Object.assign(n, y(p, r, a, r.length)), i.shift()), {
-		...n,
-		stops: g(i)
-	};
-}
-function y(e, o, t, n) {
-	switch (e) {
-		case "from": return { angle: o.slice(t, n).join(" ") };
-		case "at": return { position: o.slice(t, n).join(" ") };
-		case "in": {
-			let [i, ...r] = o.slice(t, n);
-			return { color: {
-				space: i,
-				method: r.length > 0 ? r.join(" ") : void 0
-			} };
-		}
-	}
-}
-//#endregion
-//#region lib/components/color-pickers/gradient-editor.jsx
-var getGradientResult = (input, type) => {
-	if (!input || !type) return "";
-	if (typeof input === "string" || !input?.stops) return "";
-	let output = "";
-	const { repeating } = input;
-	if (repeating) output += "repeating-";
-	output += `${type}-gradient(`;
-	if (type === "linear") {
-		const { orientation } = input;
-		if (orientation?.type === "angular") output += `${orientation.value.value}${orientation.value.unit}, `;
-		else if (orientation?.type === "directional") output += `to ${orientation.value}, `;
-	}
-	if (type === "radial") {
-		const { shape, position } = input;
-		output += `${shape ?? "circle"} at ${position?.x?.value ?? "center"} ${position?.y?.value ?? "center"}, `;
-	}
-	if (type === "conic") {
-		const { angle, position } = input;
-		output += `from ${angle ?? "0deg"} at ${position ?? "center"}, `;
-	}
-	output += input.stops.map((stop) => {
-		return `${stop.color} ${stop.offset?.value ?? ""}${stop.offset?.unit ?? ""}`.trim();
-	}).join(", ");
-	output += ")";
-	return output;
-};
-var gradientTypes = [
-	{
-		label: __("Linear"),
-		value: "linear",
-		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-linear-to-br es:from-current" })
-	},
-	{
-		label: __("Radial"),
-		value: "radial",
-		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-radial es:from-current/75 es:to-current/10" })
-	},
-	{
-		label: __("Conic"),
-		value: "conic",
-		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-conic es:from-current" })
-	}
-];
-var linearDirections = [
-	{
-		label: __("Right"),
-		value: "right",
-		iconClass: "es:bg-linear-to-r",
-		valueDegrees: 90
-	},
-	{
-		label: __("Left"),
-		value: "left",
-		iconClass: "es:bg-linear-to-l",
-		valueDegrees: 180
-	},
-	{
-		label: __("Top"),
-		value: "top",
-		iconClass: "es:bg-linear-to-t",
-		valueDegrees: 270
-	},
-	{
-		label: __("Bottom"),
-		value: "bottom",
-		iconClass: "es:bg-linear-to-b",
-		valueDegrees: 90
-	},
-	{
-		label: __("Top-right"),
-		value: "top right",
-		iconClass: "es:bg-linear-to-tr",
-		valueDegrees: 45
-	},
-	{
-		label: __("Top-left"),
-		value: "top left",
-		iconClass: "es:bg-linear-to-tl",
-		valueDegrees: 315
-	},
-	{
-		label: __("Bottom-right"),
-		value: "bottom right",
-		iconClass: "es:bg-linear-to-br",
-		valueDegrees: 135
-	},
-	{
-		label: __("Bottom-left"),
-		value: "bottom left",
-		iconClass: "es:bg-linear-to-bl",
-		valueDegrees: 225
-	}
-];
-/**
-* A simple gradient editor.
-* Allows editing linear, radial, and conic gradients.
-*
-* @component
-* @param {Object} props - Component props.
-* @param {string} props.value - The gradient definition.
-* @param {Function} props.onChange - Function to run when the gradient changes.
-* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
-*
-* @returns {JSX.Element} The GradientEditor component.
-*
-* @example
-* <GradientEditor
-* 	value='linear-gradient(90deg, #000000 0%, #ffffff 100%)'
-* 	onChange={setGradient}
-* />
-*/
-var GradientEditor = (props) => {
-	const { value, onChange, hidden } = props;
-	const gradientData = useMemo(() => {
-		if (value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) return K(value ?? "");
-		if (value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) return j(value ?? "");
-		return P(value ?? "");
-	}, [value]);
-	const gradientType = useMemo(() => {
-		if (typeof value === "string" && value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) return "radial";
-		if (typeof value === "string" && value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) return "conic";
-		return "linear";
-	}, [value]);
-	const setGradientData = (data) => {
-		onChange(getGradientResult(data, gradientType));
-	};
-	const outputGradient = useMemo(() => getGradientResult(gradientData, gradientType), [gradientData, gradientType]);
-	const [squarePreview, setSquarePreview] = useState(false);
-	if (hidden) return null;
-	return jsxs("div", {
-		className: "es:w-full es:space-y-2.5",
-		children: [
-			jsx(ContainerGroup, { children: jsxs(Container, { children: [jsx("button", {
-				className: clsx("es:shadow-sm, es:mx-auto es:block es:h-40 es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy", "es:mb-2", squarePreview ? "es:w-40" : "es:w-full"),
-				style: { backgroundImage: outputGradient },
-				onClick: () => setSquarePreview((prev) => !prev),
-				"aria-label": __("Toggle preview size", "eightshift-ui-components")
-			}), jsx(Slider, {
-				className: "es:mb-5",
-				"aria-label": __("Stop positions", "eightshift-ui-components"),
-				min: 0,
-				max: 100,
-				step: 1,
-				value: gradientData?.stops?.map(({ offset }, i) => {
-					if (!offset) return i * 100 / (gradientData.stops.length - 1);
-					return parseInt(offset?.value);
-				}),
-				onChange: (value) => {
-					setGradientData({
-						...gradientData,
-						stops: gradientData.stops.map((stop, i) => {
-							return {
-								...stop,
-								offset: {
-									value: value[i],
-									unit: "%"
-								}
-							};
-						})
-					});
-				},
-				thumbContent: (index) => {
-					const colorData = srgb(gradientData.stops[index]?.color);
-					let foregroundColor = "black";
-					if (colorData.alpha >= .5 && isColorDark(colorData.r, colorData.g, colorData.b)) foregroundColor = "white";
-					return jsx("div", {
-						className: "es:pointer-events-none es:absolute es:-bottom-4.5 es:-translate-x-1/3 es:flex es:w-3 es:items-center es:justify-center es:text-center es:text-12 es:leading-none es:py-px es:rounded-sm es:font-semibold es:tabular-nums es:font-mono es:ring es:ring-accent-600",
-						style: {
-							backgroundColor: gradientData.stops[index]?.color,
-							color: foregroundColor
-						},
-						children: index + 1
-					});
-				},
-				noActiveHighlight: true,
-				tooltipContent: (value) => `${Math.round(value)}%`
-			})] }) }),
-			jsxs(ContainerGroup, { children: [
-				jsx(Container, { children: jsx(OptionSelect, {
-					label: __("Type", "eightshift-ui-components"),
-					value: gradientType,
-					onChange: (value) => onChange(getGradientResult({ stops: gradientData.stops }, value)),
-					options: gradientTypes,
-					type: "toggleButtons",
-					inline: true
-				}) }),
-				jsx(Container, {
-					hidden: gradientType !== "linear",
-					children: jsx(NumberPicker, {
-						inline: true,
-						icon: angle,
-						label: __("Angle", "eightshift-ui-components"),
-						min: 0,
-						max: 360,
-						step: 1,
-						value: gradientData?.orientation?.type === "angular" ? gradientData?.orientation?.value?.value : null,
-						onChange: (angle) => {
-							setGradientData({
-								...gradientData,
-								orientation: {
-									type: "angular",
-									value: {
-										value: angle,
-										unit: "deg"
-									}
-								}
-							});
-						},
-						suffix: "°",
-						size: "medium",
-						className: "es:grow",
-						placeholder: linearDirections.find(({ value }) => value === gradientData?.orientation?.value)?.valueDegrees ?? "",
-						children: jsx(Menu, {
-							triggerIcon: sliders,
-							triggerProps: {
-								tooltip: __("Presets", "eightshift-ui-components"),
-								slot: null
-							},
-							keepOpen: true,
-							children: linearDirections.map(({ label, value, iconClass }) => {
-								return jsx(MenuItem, {
-									icon: jsx("div", { className: clsx("es:size-5 es:rounded-sm es:from-secondary-700 es:to-secondary-200", iconClass) }),
-									onClick: () => {
-										setGradientData({
-											...gradientData,
-											orientation: {
-												type: "directional",
-												value
-											}
-										});
-									},
-									children: label
-								}, value);
-							})
-						})
-					})
-				}),
-				jsx(Container, {
-					hidden: gradientType !== "radial",
-					children: jsx(OptionSelect, {
-						label: __("Shape", "eightshift-ui-components"),
-						icon: genericShapesAlt,
-						inline: true,
-						options: [{
-							label: __("Circle", "eightshift-ui-components"),
-							value: "circle"
-						}, {
-							label: __("Ellipse", "eightshift-ui-components"),
-							value: "ellipse"
-						}],
-						value: gradientData.shape,
-						onChange: (value) => {
-							setGradientData({
-								...gradientData,
-								shape: value
-							});
-						}
-					})
-				}),
-				jsx(Container, {
-					hidden: gradientType !== "radial",
-					children: jsx(MatrixAlign, {
-						icon: centerPoint,
-						label: __("Center point", "eightshift-ui-components"),
-						value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
-						onChange: (position) => {
-							const [x, y] = position.split(" ");
-							setGradientData({
-								...gradientData,
-								position: {
-									x: {
-										type: "keyword",
-										value: x
-									},
-									y: {
-										type: "keyword",
-										value: y
-									}
-								}
-							});
-						}
-					})
-				}),
-				jsx(Container, {
-					hidden: gradientType !== "conic",
-					children: jsx(NumberPicker, {
-						inline: true,
-						icon: angle,
-						label: __("Angle", "eightshift-ui-components"),
-						min: 0,
-						max: 360,
-						step: 1,
-						value: parseInt(gradientData?.angle?.replace("deg", "")),
-						onChange: (value) => {
-							setGradientData({
-								...gradientData,
-								angle: `${value}deg`
-							});
-						},
-						size: "medium",
-						suffix: "°"
-					})
-				}),
-				jsx(Container, {
-					hidden: gradientType !== "conic",
-					children: jsx(MatrixAlign, {
-						icon: centerPoint,
-						label: __("Center point", "eightshift-ui-components"),
-						value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
-						onChange: (value) => {
-							setGradientData({
-								...gradientData,
-								position: value
-							});
-						}
-					})
-				}),
-				jsx(Container, { children: jsx(Toggle, {
-					checked: gradientData.repeating,
-					onChange: (value) => {
-						setGradientData({
-							...gradientData,
-							repeating: value
-						});
-					},
-					label: __("Repeating", "eightshift-ui-components"),
-					icon: gradientRepeat
-				}) })
-			] }),
-			jsx(BaseControl, {
-				icon: gradientStop,
-				label: __("Gradient stops", "eightshift-ui-components"),
-				inline: true,
-				children: jsx(Button, {
-					icon: add,
-					size: "small",
-					onPress: () => {
-						setGradientData({
-							...gradientData,
-							stops: [...gradientData.stops, { color: "#000000FF" }]
-						});
-					},
-					type: "simple",
-					"aria-label": __("Add stop", "eightshift-ui-components")
-				})
-			}),
-			jsx(ContainerGroup, { children: jsx(DraggableList, {
-				items: gradientData?.stops,
-				onChange: (items) => {
-					setGradientData({
-						...gradientData,
-						stops: items.map(({ color }, i) => ({
-							...gradientData.stops[i] ?? {},
-							color
-						}))
-					});
-				},
-				orientation: "vertical",
-				className: "es:contents",
-				children: (item) => {
-					const { color, updateData, itemIndex } = item;
-					return jsx(DraggableListItem, {
-						label: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
-						subtitle: color,
-						icon: jsx(TriggeredPopover, {
-							triggerButtonIcon: jsx($251c695a52d94a8d$export$cae13e90592f246a, {
-								className: "es:size-5.5 es:rounded-full es:border es:border-white es:ring-1 es:ring-black",
-								color
-							}),
-							triggerButtonProps: {
-								size: "small",
-								type: "ghost",
-								className: "es:p-0!"
-							},
-							className: "es:p-2.5",
-							children: jsx(SolidColorPicker, {
-								value: color,
-								onChange: (color) => {
-									updateData({ color });
-								},
-								allowTransparency: true,
-								outputFormat: "rgba"
-							})
-						}),
-						children: jsx(ButtonGroup, { children: jsx(Button, {
-							onPress: () => {
-								setGradientData({
-									...gradientData,
-									stops: gradientData.stops.filter((_, i) => i !== itemIndex)
-								});
-							},
-							icon: trash,
-							size: "small",
-							"aria-label": __("Delete stop", "eightshift-ui-components"),
-							disabled: gradientData.stops.length <= 2,
-							type: "dangerGhost"
-						}) })
-					});
-				}
-			}) })
-		]
-	});
-};
-//#endregion
-export { GradientEditor as t };

package/dist/workers/image-analysis.worker.js

@@ -1,60 +0,0 @@
-import { c as FLOAT_RGBA, l as floatBufferFromCanvas, r as analyzeImageData } from "../general-D-7dwhuF.js";
-//#region lib/workers/image-analysis.worker.js
-/**
-* Web Worker for image analysis
-*/
-self.onmessage = async (event) => {
-	const { imageBitmap, settings } = event.data;
-	try {
-		const result = await analyzeImageInWorker(imageBitmap, settings);
-		self.postMessage({
-			success: true,
-			data: result
-		});
-	} catch (error) {
-		self.postMessage({
-			success: false,
-			error: error.message,
-			stack: error.stack
-		});
-	}
-};
-async function analyzeImageInWorker(imageBitmap, rawSettings) {
-	const settings = {
-		numColors: 3,
-		lightnessThreshold: .5,
-		yFrom: 0,
-		yTo: 1,
-		maxSize: 600,
-		alphaThreshold: 50,
-		...rawSettings
-	};
-	const { yFrom, yTo, maxSize } = settings;
-	const imageWidth = imageBitmap.width;
-	const imageHeight = imageBitmap.height;
-	if (!imageWidth || !imageHeight) return false;
-	let imageScale = 1;
-	if (imageWidth > maxSize || imageHeight > maxSize) imageScale = Math.min(maxSize / imageWidth, maxSize / imageHeight);
-	const imageWidthScaled = Math.floor(imageWidth * imageScale);
-	const imageHeightScaled = Math.floor(imageHeight * imageScale);
-	const srcX = 0;
-	const srcY = Math.floor(yFrom * imageHeight);
-	const srcW = Math.max(1, imageWidth);
-	const srcH = Math.max(1, Math.ceil((yTo - yFrom) * imageHeight));
-	const destW = Math.max(1, imageWidthScaled);
-	const destH = Math.max(1, Math.ceil((yTo - yFrom) * imageHeightScaled));
-	const colorCanvas = new OffscreenCanvas(destW, destH);
-	colorCanvas.getContext("2d").drawImage(imageBitmap, srcX, srcY, srcW, srcH, 0, 0, destW, destH);
-	const buffer = floatBufferFromCanvas(colorCanvas, FLOAT_RGBA);
-	const transparencyContext = new OffscreenCanvas(imageWidthScaled, imageHeightScaled).getContext("2d");
-	transparencyContext.drawImage(imageBitmap, 0, 0, imageWidth, imageHeight, 0, 0, imageWidthScaled, imageHeightScaled);
-	const imageData = transparencyContext.getImageData(0, 0, imageWidthScaled, imageHeightScaled).data;
-	return analyzeImageData({
-		buffer,
-		imageData,
-		width: imageWidthScaled,
-		height: imageHeightScaled,
-		settings
-	});
-}
-//#endregion