@plitzi/sdk-style 0.32.19 → 0.32.21

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @plitzi/sdk-style
 
+## 0.32.21
+
+### Patch Changes
+
+- v0.32.21
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.21
+  - @plitzi/sdk-shared@0.32.21
+  - @plitzi/sdk-variables@0.32.21
+
+## 0.32.20
+
+### Patch Changes
+
+- v0.32.20
+- Updated dependencies
+  - @plitzi/sdk-plugins@0.32.20
+  - @plitzi/sdk-shared@0.32.20
+  - @plitzi/sdk-variables@0.32.20
+
 ## 0.32.19
 
 ### Patch Changes

package/dist/components/StyleInspector/Inspector.mjs

@@ -6,173 +6,179 @@ import i from "./categories/DisplayFlexChild/index.mjs";
 import a from "./categories/Effects/index.mjs";
 import o from "./categories/List/index.mjs";
 import s from "./categories/ListItem/index.mjs";
-import c from "./categories/Position/index.mjs";
-import l from "./categories/RawStyle/index.mjs";
-import u from "./categories/Size/index.mjs";
-import d from "./categories/Spacing/index.mjs";
-import f from "./categories/Typography/index.mjs";
-import p from "./categories/Variables/index.mjs";
-import m from "./hooks/useStyleInherit.mjs";
-import h from "./StyleInspectorProvider.mjs";
-import { get as g, set as _ } from "@plitzi/plitzi-ui/helpers";
-import { use as v, useCallback as y, useMemo as b } from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { produce as C } from "immer";
-import w from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
-import T from "@plitzi/plitzi-ui/hooks/useStorage";
-import E from "@plitzi/plitzi-ui/Switch";
+import c from "./categories/Others/index.mjs";
+import l from "./categories/Position/index.mjs";
+import u from "./categories/RawStyle/index.mjs";
+import d from "./categories/Size/index.mjs";
+import f from "./categories/Spacing/index.mjs";
+import p from "./categories/Typography/index.mjs";
+import m from "./categories/Variables/index.mjs";
+import h from "./hooks/useStyleInherit.mjs";
+import g from "./StyleInspectorProvider.mjs";
+import { get as _, set as v } from "@plitzi/plitzi-ui/helpers";
+import { use as y, useCallback as b, useMemo as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { produce as w } from "immer";
+import T from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+import E from "@plitzi/plitzi-ui/hooks/useStorage";
+import D from "@plitzi/plitzi-ui/Switch";
 //#region src/components/StyleInspector/Inspector.tsx
-var D = ({ selectors: D, componentType: O, componentSubType: k, selector: A, styleState: j, styleVariant: M, styleSelector: N = "base", element: P, displayMode: F, mode: I = "element" }) => {
-	let { builderHandler: L } = v(w), [R, z] = T(`builder-state.styleInspector.${I}.collapsedCache`, {}), [B, V] = T(`builder-state.styleInspector.${I}.showAllOptions`, !1), [H, U] = T(`builder-state.styleInspector.${I}.replaceTokens`, !1), W = m({
-		element: P,
-		componentType: O,
-		componentSubType: k,
-		selector: A?.name,
-		styleSelector: N,
-		styleState: j,
-		styleVariant: M
-	}), G = y((e, t) => z((n) => ({
+var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleSelector: P = "base", element: F, displayMode: I, mode: L = "element" }) => {
+	let { builderHandler: R } = y(T), [z, B] = E(`builder-state.styleInspector.${L}.collapsedCache`, {}), [V, H] = E(`builder-state.styleInspector.${L}.showAllOptions`, !1), [U, W] = E(`builder-state.styleInspector.${L}.replaceTokens`, !1), G = h({
+		element: F,
+		componentType: k,
+		componentSubType: A,
+		selector: j?.name,
+		styleSelector: P,
+		styleState: M,
+		styleVariant: N
+	}), K = b((e, t) => B((n) => ({
 		...n,
 		[e]: t
-	})), [z]), K = y((e) => V(e.target.checked), [V]), q = y((e) => U(e.target.checked), [U]), J = y((t, n) => {
-		if (A) {
-			L("styleUpdateSelector", F, A.name, t, n, {
-				componentType: A.type === "element" ? O : void 0,
-				styleSelector: N,
-				styleState: j,
-				styleVariant: M
+	})), [B]), q = b((e) => H(e.target.checked), [H]), J = b((e) => W(e.target.checked), [W]), Y = b((t, n) => {
+		if (j) {
+			R("styleUpdateSelector", I, j.name, t, n, {
+				componentType: j.type === "element" ? k : void 0,
+				styleSelector: P,
+				styleState: M,
+				styleVariant: N
 			});
 			return;
 		}
-		if (!O) return;
-		let r = e(O, N);
-		if (L("styleAddSelector", F, r, "class", t, n, {
-			styleSelector: N,
-			styleState: j,
-			styleVariant: M
-		}), !P) return;
-		let i = g(P, `definition.styleSelectors.${N}`);
-		L("schemaUpdateElement", C(P, (e) => {
-			i ? _(e, `definition.styleSelectors.${N}`, `${i} ${r}`) : _(e, `definition.styleSelectors.${N}`, r);
+		if (!k) return;
+		let r = e(k, P);
+		if (R("styleAddSelector", I, r, "class", t, n, {
+			styleSelector: P,
+			styleState: M,
+			styleVariant: N
+		}), !F) return;
+		let i = _(F, `definition.styleSelectors.${P}`);
+		R("schemaUpdateElement", w(F, (e) => {
+			i ? v(e, `definition.styleSelectors.${P}`, `${i} ${r}`) : v(e, `definition.styleSelectors.${P}`, r);
 		}));
 	}, [
-		L,
-		O,
+		R,
+		k,
+		I,
 		F,
-		P,
-		A,
-		N,
 		j,
-		M
-	]), Y = b(() => {
-		let e = P?.definition.type;
-		return B || I === "manager" || e === "list" || e === "listItem";
+		P,
+		M,
+		N
+	]), X = x(() => {
+		let e = F?.definition.type;
+		return V || L === "manager" || e === "list" || e === "listItem";
 	}, [
-		P?.definition.type,
-		I,
-		B
-	]), X = b(() => B || I === "manager" || g(W, "parentStyle.display", "block") === "flex", [
-		W,
-		I,
-		B
-	]), Z = b(() => g(W, "parentStyle.flex-direction", "row") === "column", [W]);
-	return /* @__PURE__ */ x(h, {
-		componentType: O,
-		displayMode: F,
-		styleSelector: N,
-		styleState: j,
-		styleVariant: M,
-		selector: A,
-		element: P,
-		inheritData: W,
-		onChange: J,
-		children: /* @__PURE__ */ S("div", {
+		F?.definition.type,
+		L,
+		V
+	]), Z = x(() => V || L === "manager" || _(G, "parentStyle.display", "block") === "flex", [
+		G,
+		L,
+		V
+	]), Q = x(() => _(G, "parentStyle.flex-direction", "row") === "column", [G]);
+	return /* @__PURE__ */ S(g, {
+		componentType: k,
+		displayMode: I,
+		styleSelector: P,
+		styleState: M,
+		styleVariant: N,
+		selector: j,
+		element: F,
+		inheritData: G,
+		onChange: Y,
+		children: /* @__PURE__ */ C("div", {
 			className: "flex grow flex-col justify-between",
-			children: [/* @__PURE__ */ S("div", {
+			children: [/* @__PURE__ */ C("div", {
 				className: "flex grow flex-col",
 				children: [
-					Y && /* @__PURE__ */ x(o, {
-						replaceTokens: H,
-						isCollapsed: R.list ?? !0,
-						onCollapse: G
+					X && /* @__PURE__ */ S(o, {
+						replaceTokens: U,
+						isCollapsed: z.list ?? !0,
+						onCollapse: K
+					}),
+					X && /* @__PURE__ */ S(s, {
+						replaceTokens: U,
+						isCollapsed: z.listItem ?? !0,
+						onCollapse: K
 					}),
-					Y && /* @__PURE__ */ x(s, {
-						replaceTokens: H,
-						isCollapsed: R.listItem ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(r, {
+						replaceTokens: U,
+						isCollapsed: z.display ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(r, {
-						replaceTokens: H,
-						isCollapsed: R.display ?? !0,
-						onCollapse: G
+					Z && /* @__PURE__ */ S(i, {
+						replaceTokens: U,
+						isCollapsed: z.displayFlexChild ?? !0,
+						isFlexVertical: Q,
+						onCollapse: K
 					}),
-					X && /* @__PURE__ */ x(i, {
-						replaceTokens: H,
-						isCollapsed: R.displayFlexChild ?? !0,
-						isFlexVertical: Z,
-						onCollapse: G
+					/* @__PURE__ */ S(f, {
+						replaceTokens: U,
+						isCollapsed: z.spacing ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(d, {
-						replaceTokens: H,
-						isCollapsed: R.spacing ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(d, {
+						replaceTokens: U,
+						isCollapsed: z.size ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(u, {
-						replaceTokens: H,
-						isCollapsed: R.size ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(l, {
+						replaceTokens: U,
+						isCollapsed: z.position ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(c, {
-						replaceTokens: H,
-						isCollapsed: R.position ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(p, {
+						replaceTokens: U,
+						isCollapsed: z.typography ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(f, {
-						replaceTokens: H,
-						isCollapsed: R.typography ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(t, {
+						replaceTokens: U,
+						isCollapsed: z.background ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(t, {
-						replaceTokens: H,
-						isCollapsed: R.background ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(n, {
+						replaceTokens: U,
+						isCollapsed: z.border ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(n, {
-						replaceTokens: H,
-						isCollapsed: R.border ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(a, {
+						replaceTokens: U,
+						isCollapsed: z.effects ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(a, {
-						replaceTokens: H,
-						isCollapsed: R.effects ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(c, {
+						replaceTokens: U,
+						isCollapsed: z.others ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(p, {
-						isCollapsed: R.variables ?? !0,
-						onCollapse: G
+					/* @__PURE__ */ S(m, {
+						isCollapsed: z.variables ?? !0,
+						onCollapse: K
 					}),
-					/* @__PURE__ */ x(l, {
-						isCollapsed: R.rawStyle ?? !0,
-						selectors: D,
-						onCollapse: G
+					/* @__PURE__ */ S(u, {
+						isCollapsed: z.rawStyle ?? !0,
+						selectors: O,
+						onCollapse: K
 					})
 				]
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "flex items-center justify-end gap-4 border-t border-gray-200 px-2 py-1 dark:border-zinc-700",
-				children: [/* @__PURE__ */ x(E, {
+				children: [/* @__PURE__ */ S(D, {
 					size: "xs",
 					label: "Replace Tokens",
-					checked: H,
-					onChange: q
-				}), I === "element" && /* @__PURE__ */ x(E, {
+					checked: U,
+					onChange: J
+				}), L === "element" && /* @__PURE__ */ S(D, {
 					size: "xs",
 					label: "Show All Options",
-					checked: B,
-					onChange: K
+					checked: V,
+					onChange: q
 				})]
 			})]
 		})
 	});
 };
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -5,13 +5,14 @@ import r from "../../components/CategoryOption/index.mjs";
 import i from "../../components/CategorySection/index.mjs";
 import { DEFAULT_LAYER_PROPS as a, DEFAULT_STOPS as o, newLayerId as s, newStopId as c, serializeLayersToCSS as l } from "./helpers/backgroundParser.mjs";
 import u from "./components/BackgroundLayer/index.mjs";
-import d from "../../components/CategoryContainer/index.mjs";
-import f from "./helpers/parseToBgLayers.mjs";
-import { memo as p, use as m, useCallback as h, useRef as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import b from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+import d from "../../components/CategoryAdvanced/index.mjs";
+import f from "../../components/CategoryContainer/index.mjs";
+import p from "./helpers/parseToBgLayers.mjs";
+import { memo as m, use as h, useCallback as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import x from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
 //#region src/components/StyleInspector/categories/Background/Background.tsx
-var x = [
+var S = [
 	"background-color",
 	"background-image",
 	"background-attachment",
@@ -19,40 +20,45 @@ var x = [
 	"background-repeat",
 	"background-clip",
 	"background-size",
+	"background-blend-mode",
 	"mask-image"
-], S = [
+], C = [
 	"background-image",
 	"background-size",
 	"background-position",
 	"background-repeat",
 	"background-attachment",
 	"background-clip"
-], C = (e) => S.map((t) => String(e[t])).join("||"), w = p(({ replaceTokens: p = !1, isCollapsed: w = !0, onCollapse: T }) => {
-	let { setValue: E } = m(e), D = t({
-		keys: S,
+], w = ["background-blend-mode", "mask-image"], T = (e) => C.map((t) => String(e[t])).join("||"), E = m(({ replaceTokens: m = !1, isCollapsed: E = !0, onCollapse: D }) => {
+	let { setValue: O } = h(e), k = t({
+		keys: C,
 		asValue: !0,
 		strictMode: !0,
-		replaceTokens: p
-	}), { "background-color": O, "mask-image": k } = t({
-		keys: ["background-color", "mask-image"],
+		replaceTokens: m
+	}), { "background-color": A, "background-blend-mode": j, "mask-image": M } = t({
+		keys: [
+			"background-color",
+			"background-blend-mode",
+			"mask-image"
+		],
 		asValue: !0,
-		replaceTokens: p
-	}), A = C(D), j = g(D);
-	j.current = D;
-	let M = g(null), [N, P] = _(() => f(D));
-	b(() => {
-		A !== M.current && (P(f(j.current)), M.current = A);
-	}, [A]);
-	let [F, I] = _(null), L = h((e) => I((t) => t === e ? null : e), []), R = h((e) => {
+		replaceTokens: m
+	}), N = T(k), P = _(k);
+	P.current = k;
+	let F = _(null), [I, L] = v(() => p(k));
+	x(() => {
+		N !== F.current && (L(p(P.current)), F.current = N);
+	}, [N]);
+	let [R, z] = v(null), B = g((e) => z((t) => t === e ? null : e), []), V = g((e) => {
 		let t = l(e);
-		M.current = C(t), P(e), E(void 0, t);
-	}, [E]), z = h((e, t) => {
+		F.current = T(t), L(e), O(void 0, t);
+	}, [O]), H = g((e, t) => {
 		if (e === t) return;
-		let n = [...N], [r] = n.splice(e, 1);
-		n.splice(t, 0, r), R(n);
-	}, [N, R]), B = h((e) => (t) => {
-		R(N.map((n, r) => r === e ? t : n));
-	}, [N, R]), V = h(() => {
+		let n = [...I], [r] = n.splice(e, 1);
+		n.splice(t, 0, r), V(n);
+	}, [I, V]), U = g((e) => (t) => {
+		V(I.map((n, r) => r === e ? t : n));
+	}, [I, V]), W = g(() => {
 		let e = s(), t = {
 			...a,
 			id: e,
@@ -67,76 +73,152 @@ var x = [
 				position: "100%"
 			}]
 		};
-		I(e), R([...N, t]);
-	}, [N, R]), H = h((e) => () => {
-		R(N.filter((t, n) => n !== e));
-	}, [N, R]), U = h((e) => {
-		E("background-color", e);
-	}, [E]), W = h((e) => {
-		E("mask-image", e);
-	}, [E]), G = h((e) => T?.("background", e), [T]);
-	return /* @__PURE__ */ v(d, {
+		z(e), V([...I, t]);
+	}, [I, V]), G = g((e) => () => {
+		V(I.filter((t, n) => n !== e));
+	}, [I, V]), K = g((e) => {
+		O("background-color", e);
+	}, [O]), q = g((e) => {
+		O("background-blend-mode", e);
+	}, [O]), J = g((e) => {
+		O("mask-image", e);
+	}, [O]), Y = g((e) => D?.("background", e), [D]);
+	return /* @__PURE__ */ y(f, {
 		title: "Background",
-		dotKeys: x,
-		isCollapsed: w,
-		onCollapse: G,
-		children: /* @__PURE__ */ y("div", {
+		dotKeys: S,
+		advancedKeys: w,
+		isCollapsed: E,
+		onCollapse: Y,
+		children: /* @__PURE__ */ b("div", {
 			className: "flex flex-col gap-2",
 			children: [
-				/* @__PURE__ */ y("div", {
+				/* @__PURE__ */ b("div", {
 					className: "flex flex-col gap-1",
 					children: [
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ b("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ v(n, {
-								keyValue: S,
+							children: [/* @__PURE__ */ y(n, {
+								keyValue: C,
 								children: "Layers"
-							}), /* @__PURE__ */ y("button", {
+							}), /* @__PURE__ */ b("button", {
 								type: "button",
 								className: "flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-xs text-blue-500 hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-900/30",
-								onClick: V,
+								onClick: W,
 								title: "Add background layer",
-								children: [/* @__PURE__ */ v("i", { className: "fas fa-plus text-[10px]" }), "Add"]
+								children: [/* @__PURE__ */ y("i", { className: "fas fa-plus text-[10px]" }), "Add"]
 							})]
 						}),
-						!N.length && /* @__PURE__ */ v("div", {
+						!I.length && /* @__PURE__ */ y("div", {
 							className: "rounded border border-dashed border-gray-300 py-3 text-center text-xs text-gray-400 dark:border-zinc-600 dark:text-zinc-500",
 							children: "No layers — click Add to start"
 						}),
-						N.length > 0 && /* @__PURE__ */ v("div", {
+						I.length > 0 && /* @__PURE__ */ y("div", {
 							className: "flex flex-col gap-1",
-							children: N.map((e, t) => /* @__PURE__ */ v(u, {
+							children: I.map((e, t) => /* @__PURE__ */ y(u, {
 								index: t,
 								layer: e,
-								expanded: F === e.id,
-								onExpand: L,
-								onChange: B(t),
-								onRemove: H(t),
-								onReorder: z
+								expanded: R === e.id,
+								onExpand: B,
+								onChange: U(t),
+								onRemove: G(t),
+								onReorder: H
 							}, e.id))
 						})
 					]
 				}),
-				/* @__PURE__ */ v(i, {
+				/* @__PURE__ */ y(i, {
 					label: "Base Color",
 					keys: ["background-color"],
-					children: /* @__PURE__ */ v(r, {
+					children: /* @__PURE__ */ y(r, {
 						type: "color",
-						value: O,
-						onChange: U
+						value: A,
+						onChange: K
 					})
 				}),
-				/* @__PURE__ */ v(i, {
-					label: "Mask",
-					keys: ["mask-image"],
-					children: /* @__PURE__ */ v(r, {
-						value: k,
-						onChange: W
-					})
-				})
+				/* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(i, {
+					label: "",
+					children: [/* @__PURE__ */ b(r, {
+						keys: ["background-blend-mode"],
+						label: "Blend",
+						value: j,
+						onChange: q,
+						type: "select",
+						children: [
+							/* @__PURE__ */ y("option", {
+								value: "normal",
+								children: "Normal"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "multiply",
+								children: "Multiply"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "screen",
+								children: "Screen"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "overlay",
+								children: "Overlay"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "darken",
+								children: "Darken"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "lighten",
+								children: "Lighten"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "color-dodge",
+								children: "Color Dodge"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "color-burn",
+								children: "Color Burn"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "hard-light",
+								children: "Hard Light"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "soft-light",
+								children: "Soft Light"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "difference",
+								children: "Difference"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "exclusion",
+								children: "Exclusion"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "hue",
+								children: "Hue"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "saturation",
+								children: "Saturation"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "color",
+								children: "Color"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "luminosity",
+								children: "Luminosity"
+							})
+						]
+					}), /* @__PURE__ */ y(r, {
+						keys: ["mask-image"],
+						label: "Mask",
+						value: M,
+						onChange: J
+					})]
+				}) })
 			]
 		})
 	});
 });
 //#endregion
-export { w as default };
+export { E as default };