@plitzi/sdk-style 0.32.15 → 0.32.17

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @plitzi/sdk-style
 
+## 0.32.17
+
+### Patch Changes
+
+- v0.32.17
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.17
+  - @plitzi/sdk-shared@0.32.17
+  - @plitzi/sdk-variables@0.32.17
+
+## 0.32.16
+
+### Patch Changes
+
+- v0.32.16
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.16
+  - @plitzi/sdk-shared@0.32.16
+  - @plitzi/sdk-variables@0.32.16
+
 ## 0.32.15
 
 ### Patch Changes

package/dist/StyleAdvanceEditor.mjs

@@ -29,16 +29,16 @@ var g = () => {
 		T,
 		b,
 		S
-	]);
+	]), k = i(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
+		type: "css-token",
+		value: e
+	})) : [], [v]);
 	return /* @__PURE__ */ s("div", {
 		className: "relative flex h-full w-full flex-col",
 		children: [/* @__PURE__ */ o(d, {
 			className: "h-full",
 			value: b,
-			autoComplete: i(() => v ? Object.keys(v).flatMap((e) => Object.keys(v[e] ?? {})).map((e) => ({
-				type: "css-token",
-				value: e
-			})) : [], [v]),
+			autoComplete: k,
 			theme: g === "dark" ? "dark" : "light",
 			lineWrapping: !0,
 			onChange: D

package/dist/StyleMap/StyleMap.mjs

@@ -50,7 +50,7 @@ var o = class {
 		return !s || !s.variables || !s.variables[i] || !s.variables[i][o] ? !1 : (delete s.variables[i][o], Object.keys(s.variables[i]).length === 0 && delete s.variables[i], Object.keys(s.variables).length === 0 && delete s.variables, a(this.platform, `${n}.${r}.cache`, e(s)), !0);
 	};
 	static removeSelectorVariable = (e, t, n, r, i) => this.getInstance(e).removeSelectorVariable(t, n, r, i);
-	addVariable = (e, t, n) => (this.variables[e] || (this.variables[e] = {}), this.variables[e][t] ? !1 : (this.variables[e][t] = n, !0));
+	addVariable = (e, t, n) => (this.variables[e] || (this.variables[e] = {}), !this.variables[e][t] && (this.variables[e][t] = n, !0));
 	static addVariable = (e, t, n, r) => this.getInstance(e).addVariable(t, n, r);
 	updateVariable = (e, t, n) => !this.variables[e] || !this.variables[e][t] ? !1 : (this.variables[e][t] = n, !0);
 	static updateVariable = (e, t, n, r) => this.getInstance(e).updateVariable(t, n, r);

package/dist/StyleMap/helpers/utils.mjs

@@ -16,19 +16,25 @@ var i = (t, n, r) => {
 	let m = a(l, p, f), h = !!f || !!p;
 	if (d !== void 0) {
 		if (e(d) && o(d)) {
-			if (s === "update" && h && !t(c, p ? `attributes.${l}.variants` : `attributes.${l}.states`)) return;
+			if (s === "update" && h) {
+				let e = p ? `attributes.${l}.variants` : `attributes.${l}.states`;
+				if (!t(c, e)) return;
+			}
 			r(c, m, {});
 			return;
 		}
-		r(c, m, i(u, d, t(c, m, {})));
+		let n = t(c, m, {});
+		r(c, m, i(u, d, n));
 		return;
 	}
 	if (s === "add" && !u && h) {
-		t(c, p ? `attributes.${l}.variants` : `attributes.${l}.states`) || r(c, m, {});
+		let e = p ? `attributes.${l}.variants` : `attributes.${l}.states`;
+		t(c, e) || r(c, m, {});
 		return;
 	}
 	if (u) {
-		r(c, m, n(t(c, m, {}), [u]));
+		let e = t(c, m, {});
+		r(c, m, n(e, [u]));
 		return;
 	}
 	if (p) {

package/dist/components/InputEasing/Curve.mjs

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/InputEasing/Curve.tsx
 var t = [], n = ({ value: n = t, xFrom: r = 0, xTo: i = 0, yFrom: a = 0, yTo: o = 0 }) => {
-	let s = (e, t, n) => e * (1 - n) + t * n, c = (e) => Math.round(s(r, i, e)), l = (e) => Math.round(s(a, o, e)), u = c(0), d = l(0), f = c(1), p = l(1);
+	let s = (e, t, n) => e * (1 - n) + t * n, c = (e) => Math.round(s(r, i, e)), l = (e) => Math.round(s(a, o, e)), u = c(0), d = l(0), f = c(1), p = l(1), m = c(n[0]), h = l(n[1]), g = c(n[2]), _ = l(n[3]);
 	return /* @__PURE__ */ e("path", {
 		className: "fill-transparent stroke-gray-900 stroke-2",
-		d: `M${u},${d} C${c(n[0])},${l(n[1])} ${c(n[2])},${l(n[3])} ${f},${p}`
+		d: `M${u},${d} C${m},${h} ${g},${_} ${f},${p}`
 	});
 };
 //#endregion

package/dist/components/InputEasing/Progress.mjs

@@ -5,10 +5,10 @@ import { jsx as n } from "react/jsx-runtime";
 var r = ({ progress: r = 0, xFrom: i = 0, xTo: a = 0, yFrom: o = 0, yTo: s = 0, value: c }) => {
 	let l = t(() => e(...c), [c]), u = (e, t, n) => e * (1 - n) + t * n, d = (e) => Math.round(u(i, a, e)), f = (e) => Math.round(u(o, s, e));
 	if (!r) return /* @__PURE__ */ n("path", {});
-	let p = d(0), m = f(0), h = d(r), g = f(l ? l(r) : 0);
+	let p = d(0), m = f(0), h = d(r), g = f(l ? l(r) : 0), _ = `M${h},${m} L${h},${g} L${p},${g}`;
 	return /* @__PURE__ */ n("path", {
 		className: "fill-transparent stroke-blue-400 stroke-1",
-		d: `M${h},${m} L${h},${g} L${p},${g}`
+		d: _
 	});
 };
 //#endregion

package/dist/components/Selector/Selector.mjs

@@ -40,7 +40,6 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 				E?.(n, !0, i(R, `${e}`)), w?.(t);
 				break;
 			}
-			default: break;
 		}
 	}, [
 		R,
@@ -72,10 +71,7 @@ var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, compon
 			case "ArrowDown":
 				M(!0);
 				break;
-			case "Escape":
-				t.stopPropagation(), A(""), t.target.blur();
-				break;
-			default: break;
+			case "Escape": t.stopPropagation(), A(""), t.target.blur();
 		}
 	}, [
 		R,

package/dist/components/StyleInspector/StyleInspectorProvider.mjs

@@ -49,37 +49,37 @@ var u = ({ children: u, componentType: d, selector: f, styleSelector: p = "base"
 			}), {});
 			C(void 0, t);
 		} else C(e);
-	}, [C]);
+	}, [C]), E = a(() => ({
+		componentType: d,
+		selector: f,
+		styleSelector: p,
+		styleState: m,
+		styleVariant: h,
+		displayMode: v,
+		variables: x,
+		inheritData: _.style,
+		bindingData: b,
+		getValues: S,
+		setValue: C,
+		resetValue: T,
+		getDefaultValue: w
+	}), [
+		d,
+		f,
+		p,
+		m,
+		h,
+		v,
+		x,
+		_.style,
+		b,
+		S,
+		C,
+		T,
+		w
+	]);
 	return /* @__PURE__ */ o(e, {
-		value: a(() => ({
-			componentType: d,
-			selector: f,
-			styleSelector: p,
-			styleState: m,
-			styleVariant: h,
-			displayMode: v,
-			variables: x,
-			inheritData: _.style,
-			bindingData: b,
-			getValues: S,
-			setValue: C,
-			resetValue: T,
-			getDefaultValue: w
-		}), [
-			d,
-			f,
-			p,
-			m,
-			h,
-			v,
-			x,
-			_.style,
-			b,
-			S,
-			C,
-			T,
-			w
-		]),
+		value: E,
 		children: u
 	});
 };

package/dist/components/StyleInspector/categories/Background/Background.mjs

@@ -74,12 +74,12 @@ var x = [
 		E("background-color", e);
 	}, [E]), W = h((e) => {
 		E("mask-image", e);
-	}, [E]);
+	}, [E]), G = h((e) => T?.("background", e), [T]);
 	return /* @__PURE__ */ v(d, {
 		title: "Background",
 		dotKeys: x,
 		isCollapsed: w,
-		onCollapse: h((e) => T?.("background", e), [T]),
+		onCollapse: G,
 		children: /* @__PURE__ */ y("div", {
 			className: "flex flex-col gap-2",
 			children: [

package/dist/components/StyleInspector/categories/Background/components/BackgroundSize/BackgroundSize.mjs

@@ -31,43 +31,43 @@ var s = ({ layer: s, onChange: c }) => {
 		s,
 		c,
 		u
-	]);
+	]), h = r(() => [
+		{
+			value: "auto",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Custom"
+			}),
+			description: "Custom dimensions",
+			active: f === "auto",
+			size: "custom"
+		},
+		{
+			value: "cover",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Cover"
+			}),
+			description: "Cover the element",
+			active: f === "cover",
+			size: "custom"
+		},
+		{
+			value: "contain",
+			icon: /* @__PURE__ */ a("div", {
+				className: "px-1 text-xs select-none",
+				children: "Contain"
+			}),
+			description: "Fit inside the element",
+			active: f === "contain",
+			size: "custom"
+		}
+	], [f]);
 	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
 		label: "Size",
 		children: /* @__PURE__ */ a(e, {
 			type: "iconGroup",
-			items: r(() => [
-				{
-					value: "auto",
-					icon: /* @__PURE__ */ a("div", {
-						className: "px-1 text-xs select-none",
-						children: "Custom"
-					}),
-					description: "Custom dimensions",
-					active: f === "auto",
-					size: "custom"
-				},
-				{
-					value: "cover",
-					icon: /* @__PURE__ */ a("div", {
-						className: "px-1 text-xs select-none",
-						children: "Cover"
-					}),
-					description: "Cover the element",
-					active: f === "cover",
-					size: "custom"
-				},
-				{
-					value: "contain",
-					icon: /* @__PURE__ */ a("div", {
-						className: "px-1 text-xs select-none",
-						children: "Contain"
-					}),
-					description: "Fit inside the element",
-					active: f === "contain",
-					size: "custom"
-				}
-			], [f]),
+			items: h,
 			onChange: d
 		})
 	}), l && /* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(e, {

package/dist/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.mjs

@@ -7,41 +7,44 @@ import o from "@plitzi/plitzi-ui/icons/BackgroundTileXY";
 import s from "@plitzi/plitzi-ui/icons/BackgroundTileY";
 import c from "@plitzi/plitzi-ui/icons/XMark";
 //#region src/components/StyleInspector/categories/Background/components/BackgroundTile/BackgroundTile.tsx
-var l = ({ layer: l, onChange: u }) => /* @__PURE__ */ i(t, {
-	label: "Tile",
-	children: /* @__PURE__ */ i(e, {
-		type: "iconGroup",
-		items: r(() => [
-			{
-				value: "repeat",
-				icon: /* @__PURE__ */ i(o, {}),
-				description: "Horizontally and Vertically",
-				active: l.repeat === "repeat"
-			},
-			{
-				value: "repeat-x",
-				icon: /* @__PURE__ */ i(a, {}),
-				description: "Horizontally",
-				active: l.repeat === "repeat-x"
-			},
-			{
-				value: "repeat-y",
-				icon: /* @__PURE__ */ i(s, {}),
-				description: "Vertically",
-				active: l.repeat === "repeat-y"
-			},
-			{
-				value: "no-repeat",
-				icon: /* @__PURE__ */ i(c, {}),
-				description: "Don't tile",
-				active: l.repeat === "no-repeat"
-			}
-		], [l.repeat]),
-		onChange: n((e) => u?.({
-			...l,
-			repeat: String(e)
-		}), [l, u])
-	})
-});
+var l = ({ layer: l, onChange: u }) => {
+	let d = r(() => [
+		{
+			value: "repeat",
+			icon: /* @__PURE__ */ i(o, {}),
+			description: "Horizontally and Vertically",
+			active: l.repeat === "repeat"
+		},
+		{
+			value: "repeat-x",
+			icon: /* @__PURE__ */ i(a, {}),
+			description: "Horizontally",
+			active: l.repeat === "repeat-x"
+		},
+		{
+			value: "repeat-y",
+			icon: /* @__PURE__ */ i(s, {}),
+			description: "Vertically",
+			active: l.repeat === "repeat-y"
+		},
+		{
+			value: "no-repeat",
+			icon: /* @__PURE__ */ i(c, {}),
+			description: "Don't tile",
+			active: l.repeat === "no-repeat"
+		}
+	], [l.repeat]), f = n((e) => u?.({
+		...l,
+		repeat: String(e)
+	}), [l, u]);
+	return /* @__PURE__ */ i(t, {
+		label: "Tile",
+		children: /* @__PURE__ */ i(e, {
+			type: "iconGroup",
+			items: d,
+			onChange: f
+		})
+	});
+};
 //#endregion
 export { l as default };

package/dist/components/StyleInspector/categories/Border/Border.mjs

@@ -75,18 +75,17 @@ var m = [
 				});
 				break;
 			}
-			default: break;
 		}
 	}, [
 		_,
 		b,
 		y
-	]);
+	]), S = u((e) => g?.("border", e), [g]);
 	return /* @__PURE__ */ f(n, {
 		title: "Border",
 		dotKeys: m,
 		isCollapsed: h,
-		onCollapse: u((e) => g?.("border", e), [g]),
+		onCollapse: S,
 		children: /* @__PURE__ */ p("div", {
 			className: "flex flex-col gap-2",
 			children: [/* @__PURE__ */ f(a, {

package/dist/components/StyleInspector/categories/Border/BorderColor.mjs

@@ -14,15 +14,15 @@ var i = ({ values: i, currentPlacement: a, onChange: o }) => {
 			case a === "right": return r;
 			default: return "#000000";
 		}
-	}, [i, a]);
+	}, [i, a]), c = n(() => a === "all" ? [
+		"border-top-color",
+		"border-bottom-color",
+		"border-left-color",
+		"border-right-color"
+	] : [`border-${a}-color`], [a]);
 	return /* @__PURE__ */ r(t, {
 		label: "Color",
-		keys: n(() => a === "all" ? [
-			"border-top-color",
-			"border-bottom-color",
-			"border-left-color",
-			"border-right-color"
-		] : [`border-${a}-color`], [a]),
+		keys: c,
 		children: /* @__PURE__ */ r(e, {
 			value: s,
 			onChange: o,

package/dist/components/StyleInspector/categories/Border/BorderRadius.mjs

@@ -19,24 +19,24 @@ var s = [
 	f === p && f === m && f === h && (v = f);
 	let y = n((e) => {
 		_(e);
-	}, []);
+	}, []), b = r(() => [{
+		value: !1,
+		icon: "fa-regular fa-square",
+		description: "",
+		active: !g
+	}, {
+		value: !0,
+		icon: "fa-solid fa-expand",
+		description: "",
+		active: g
+	}], [g]);
 	return /* @__PURE__ */ o("div", {
 		className: "flex flex-col gap-2",
 		children: [/* @__PURE__ */ o(t, {
 			label: "Radius",
 			keys: s,
 			children: [/* @__PURE__ */ a(e, {
-				items: r(() => [{
-					value: !1,
-					icon: "fa-regular fa-square",
-					description: "",
-					active: !g
-				}, {
-					value: !0,
-					icon: "fa-solid fa-expand",
-					description: "",
-					active: g
-				}], [g]),
+				items: b,
 				type: "iconGroup",
 				onChange: y
 			}), /* @__PURE__ */ a(e, {

package/dist/components/StyleInspector/categories/Border/BorderStyle.mjs

@@ -43,15 +43,15 @@ var c = ({ values: c, currentPlacement: l, onChange: u }) => {
 			description: "",
 			active: d === "dotted"
 		}
-	], [d]);
+	], [d]), p = n(() => l === "all" ? [
+		"border-top-style",
+		"border-bottom-style",
+		"border-left-style",
+		"border-right-style"
+	] : [`border-${l}-style`], [l]);
 	return /* @__PURE__ */ r(t, {
 		label: "Style",
-		keys: n(() => l === "all" ? [
-			"border-top-style",
-			"border-bottom-style",
-			"border-left-style",
-			"border-right-style"
-		] : [`border-${l}-style`], [l]),
+		keys: p,
 		children: /* @__PURE__ */ r(e, {
 			onChange: u,
 			items: f,

package/dist/components/StyleInspector/categories/Border/BorderWidth.mjs

@@ -14,15 +14,15 @@ var i = ({ values: i, currentPlacement: a, onChange: o }) => {
 			case a === "right": return r;
 			default: return "0px";
 		}
-	}, [i, a]);
+	}, [i, a]), c = n(() => a === "all" ? [
+		"border-top-width",
+		"border-bottom-width",
+		"border-left-width",
+		"border-right-width"
+	] : [`border-${a}-width`], [a]);
 	return /* @__PURE__ */ r(t, {
 		label: "Width",
-		keys: n(() => a === "all" ? [
-			"border-top-width",
-			"border-bottom-width",
-			"border-left-width",
-			"border-right-width"
-		] : [`border-${a}-width`], [a]),
+		keys: c,
 		children: /* @__PURE__ */ r(e, {
 			value: s,
 			onChange: o,

package/dist/components/StyleInspector/categories/Display/DisplayElements.mjs

@@ -14,51 +14,54 @@ var u = [
 	"align-items",
 	"justify-content",
 	"flex-wrap"
-], d = ({ value: d = "block", onChange: f }) => /* @__PURE__ */ i(t, {
-	keys: u,
-	label: "Display",
-	children: /* @__PURE__ */ i(e, {
-		onChange: n((e) => f?.("display", e), [f]),
-		type: "iconGroup",
-		items: r(() => [
-			{
-				value: "block",
-				icon: /* @__PURE__ */ i(a, {}),
-				description: "Block elements start on a new line and take up the full available width.",
-				active: d === "block"
-			},
-			{
-				value: "flex",
-				icon: /* @__PURE__ */ i(o, {}),
-				description: "Flex lays out its child elements on a horizontal or vertical axis.",
-				active: d === "flex"
-			},
-			{
-				value: "grid",
-				icon: /* @__PURE__ */ i(s, {}),
-				description: "Grid lets place you items within rows and columns.",
-				active: d === "grid"
-			},
-			{
-				value: "inline-block",
-				icon: /* @__PURE__ */ i(l, {}),
-				description: "Inline-block behaves like inline, but accepts width and height properties.",
-				active: d === "inline-block"
-			},
-			{
-				value: "inline",
-				icon: /* @__PURE__ */ i(c, {}),
-				description: "Inline is the default for text content. The text's font size and line height determine its size",
-				active: d === "inline"
-			},
-			{
-				value: "none",
-				icon: "fa-solid fa-eye-slash",
-				description: "None hides elements.",
-				active: d === "none"
-			}
-		], [d])
-	})
-});
+], d = ({ value: d = "block", onChange: f }) => {
+	let p = n((e) => f?.("display", e), [f]), m = r(() => [
+		{
+			value: "block",
+			icon: /* @__PURE__ */ i(a, {}),
+			description: "Block elements start on a new line and take up the full available width.",
+			active: d === "block"
+		},
+		{
+			value: "flex",
+			icon: /* @__PURE__ */ i(o, {}),
+			description: "Flex lays out its child elements on a horizontal or vertical axis.",
+			active: d === "flex"
+		},
+		{
+			value: "grid",
+			icon: /* @__PURE__ */ i(s, {}),
+			description: "Grid lets place you items within rows and columns.",
+			active: d === "grid"
+		},
+		{
+			value: "inline-block",
+			icon: /* @__PURE__ */ i(l, {}),
+			description: "Inline-block behaves like inline, but accepts width and height properties.",
+			active: d === "inline-block"
+		},
+		{
+			value: "inline",
+			icon: /* @__PURE__ */ i(c, {}),
+			description: "Inline is the default for text content. The text's font size and line height determine its size",
+			active: d === "inline"
+		},
+		{
+			value: "none",
+			icon: "fa-solid fa-eye-slash",
+			description: "None hides elements.",
+			active: d === "none"
+		}
+	], [d]);
+	return /* @__PURE__ */ i(t, {
+		keys: u,
+		label: "Display",
+		children: /* @__PURE__ */ i(e, {
+			onChange: p,
+			type: "iconGroup",
+			items: m
+		})
+	});
+};
 //#endregion
 export { d as default };