@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/gradient-editor-DbH8NU2p.js

@@ -0,0 +1,604 @@
+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/icons/block-icon.js

@@ -1,42 +1,37 @@
-import { jsx } from "react/jsx-runtime";
 import { blockIcons } from "./icons.js";
+import { jsx } from "react/jsx-runtime";
+//#region lib/icons/block-icon.jsx
 /**
- * A component that displays a block icon.
- *
- * Usage:
- *
- * ```jsx
- * import { BlockIcon } from '@eightshift/frontend-libs/scripts';
- *
- * <BlockIcon iconName='es-button' />
- * ```
- *
- * Output:
- *
- * Selected block icon displayed inline.
- * ```html
- * <i><svg ...> ... </svg></i>
- * ```
- *
- * @param {object} props          - BlockIcon options.
- * @param {string} props.iconName - Name of the block icon to display.
- *
- * @access public
- *
- * @returns {JSX.Element} The BlockIcon component.
- *
- * @preserve
- */
-const BlockIcon = (props) => {
-  const { iconName } = props;
-  return /* @__PURE__ */ jsx(
-    "i",
-    {
-      dangerouslySetInnerHTML: { __html: blockIcons[iconName] },
-      style: { lineHeight: 0 }
-    }
-  );
-};
-export {
-  BlockIcon
+* A component that displays a block icon.
+*
+* Usage:
+*
+* ```jsx
+* import { BlockIcon } from '@eightshift/frontend-libs/scripts';
+*
+* <BlockIcon iconName='es-button' />
+* ```
+*
+* Output:
+*
+* Selected block icon displayed inline.
+* ```html
+* <i><svg ...> ... </svg></i>
+* ```
+*
+* @param {object} props          - BlockIcon options.
+* @param {string} props.iconName - Name of the block icon to display.
+*
+* @access public
+*
+* @returns {JSX.Element} The BlockIcon component.
+*/
+var BlockIcon = (props) => {
+	const { iconName } = props;
+	return jsx("i", {
+		dangerouslySetInnerHTML: { __html: blockIcons[iconName] },
+		style: { lineHeight: 0 }
+	});
 };
+//#endregion
+export { BlockIcon };