@plitzi/sdk-style 0.38.6 → 0.38.8

package/dist/components/StyleInspector/Inspector.mjs

@@ -23,149 +23,159 @@ 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 O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleAncestor: P, styleSelector: F = "base", element: I, displayMode: L, mode: R = "element" }) => {
-	let { builderHandler: z } = _(T), [B, V] = E(`builder-state.styleInspector.${R}.collapsedCache`, {}), [H, U] = E(`builder-state.styleInspector.${R}.showAllOptions`, !1), [W, G] = E(`builder-state.styleInspector.${R}.replaceTokens`, !1), K = h({
-		element: I,
+var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, styleState: M, styleVariant: N, styleAncestor: P, stylePseudo: F, styleCondition: I, styleSelector: L = "base", element: R, displayMode: z, mode: B = "element" }) => {
+	let { builderHandler: V } = _(T), [H, U] = E(`builder-state.styleInspector.${B}.collapsedCache`, {}), [W, G] = E(`builder-state.styleInspector.${B}.showAllOptions`, !1), [K, q] = E(`builder-state.styleInspector.${B}.replaceTokens`, !1), J = h({
+		element: R,
 		componentType: k,
 		componentSubType: A,
 		selector: j?.name,
-		styleSelector: F,
+		styleSelector: L,
 		styleState: M,
 		styleVariant: N,
-		styleAncestor: P
-	}), q = v((e, t) => V((n) => ({
+		styleAncestor: P,
+		stylePseudo: F,
+		styleCondition: I
+	}), Y = v((e, t) => U((n) => ({
 		...n,
 		[e]: t
-	})), [V]), J = v((e) => U(e.target.checked), [U]), Y = v((e) => G(e.target.checked), [G]), X = v((t, n) => {
+	})), [U]), X = v((e) => G(e.target.checked), [G]), Z = v((e) => q(e.target.checked), [q]), Q = v((t, n) => {
 		if (j) {
-			z("styleUpdateSelector", L, j.name, t, n, {
+			V("styleUpdateSelector", z, j.name, t, n, {
 				componentType: j.type === "element" ? k : void 0,
-				styleSelector: F,
+				styleSelector: L,
 				styleState: M,
 				styleVariant: N,
-				styleAncestor: P
+				styleAncestor: P,
+				stylePseudo: F,
+				styleCondition: I
 			});
 			return;
 		}
 		if (!k) return;
-		let r = e(k, F);
-		if (z("styleAddSelector", L, r, "class", t, n, {
-			styleSelector: F,
+		let r = e(k, L);
+		if (V("styleAddSelector", z, r, "class", t, n, {
+			styleSelector: L,
 			styleState: M,
 			styleVariant: N,
-			styleAncestor: P
-		}), !I) return;
-		let i = b(I, `definition.styleSelectors.${F}`);
-		z("schemaUpdateElement", S(I, (e) => {
-			i ? x(e, `definition.styleSelectors.${F}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${F}`, r);
+			styleAncestor: P,
+			stylePseudo: F,
+			styleCondition: I
+		}), !R) return;
+		let i = b(R, `definition.styleSelectors.${L}`);
+		V("schemaUpdateElement", S(R, (e) => {
+			i ? x(e, `definition.styleSelectors.${L}`, `${i} ${r}`) : x(e, `definition.styleSelectors.${L}`, r);
 		}));
 	}, [
-		z,
+		V,
 		k,
-		L,
-		I,
+		z,
+		R,
 		j,
-		F,
+		L,
 		M,
 		N,
-		P
-	]), Z = y(() => {
-		let e = I?.definition.type;
-		return H || R === "manager" || e === "list" || e === "listItem";
+		P,
+		F,
+		I
+	]), $ = y(() => {
+		let e = R?.definition.type;
+		return W || B === "manager" || e === "list" || e === "listItem";
 	}, [
-		I?.definition.type,
-		R,
-		H
-	]), Q = y(() => H || R === "manager" || b(K, "parentStyle.display", "block") === "flex", [
-		K,
-		R,
-		H
-	]), $ = y(() => b(K, "parentStyle.flex-direction", "row") === "column", [K]);
+		R?.definition.type,
+		B,
+		W
+	]), ee = y(() => W || B === "manager" || b(J, "parentStyle.display", "block") === "flex", [
+		J,
+		B,
+		W
+	]), te = y(() => b(J, "parentStyle.flex-direction", "row") === "column", [J]);
 	return /* @__PURE__ */ C(g, {
 		componentType: k,
-		displayMode: L,
-		styleSelector: F,
+		displayMode: z,
+		styleSelector: L,
 		styleState: M,
 		styleVariant: N,
 		styleAncestor: P,
+		stylePseudo: F,
+		styleCondition: I,
 		selector: j,
-		element: I,
-		inheritData: K,
-		onChange: X,
+		element: R,
+		inheritData: J,
+		onChange: Q,
 		children: /* @__PURE__ */ w("div", {
 			className: "flex grow flex-col justify-between",
 			children: [/* @__PURE__ */ w("div", {
 				className: "flex grow flex-col",
 				children: [
-					Z && /* @__PURE__ */ C(o, {
-						replaceTokens: W,
-						isCollapsed: B.list ?? !0,
-						onCollapse: q
+					$ && /* @__PURE__ */ C(o, {
+						replaceTokens: K,
+						isCollapsed: H.list ?? !0,
+						onCollapse: Y
 					}),
-					Z && /* @__PURE__ */ C(s, {
-						replaceTokens: W,
-						isCollapsed: B.listItem ?? !0,
-						onCollapse: q
+					$ && /* @__PURE__ */ C(s, {
+						replaceTokens: K,
+						isCollapsed: H.listItem ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(r, {
-						replaceTokens: W,
-						isCollapsed: B.display ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.display ?? !0,
+						onCollapse: Y
 					}),
-					Q && /* @__PURE__ */ C(i, {
-						replaceTokens: W,
-						isCollapsed: B.displayFlexChild ?? !0,
-						isFlexVertical: $,
-						onCollapse: q
+					ee && /* @__PURE__ */ C(i, {
+						replaceTokens: K,
+						isCollapsed: H.displayFlexChild ?? !0,
+						isFlexVertical: te,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(f, {
-						replaceTokens: W,
-						isCollapsed: B.spacing ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.spacing ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(d, {
-						replaceTokens: W,
-						isCollapsed: B.size ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.size ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(l, {
-						replaceTokens: W,
-						isCollapsed: B.position ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.position ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(p, {
-						replaceTokens: W,
-						isCollapsed: B.typography ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.typography ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(t, {
-						replaceTokens: W,
-						isCollapsed: B.background ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.background ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(n, {
-						replaceTokens: W,
-						isCollapsed: B.border ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.border ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(a, {
-						replaceTokens: W,
-						isCollapsed: B.effects ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.effects ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(c, {
-						replaceTokens: W,
-						isCollapsed: B.others ?? !0,
-						onCollapse: q
+						replaceTokens: K,
+						isCollapsed: H.others ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(m, {
-						isCollapsed: B.variables ?? !0,
-						onCollapse: q
+						isCollapsed: H.variables ?? !0,
+						onCollapse: Y
 					}),
 					/* @__PURE__ */ C(u, {
-						isCollapsed: B.rawStyle ?? !0,
+						isCollapsed: H.rawStyle ?? !0,
 						selectors: O,
-						onCollapse: q
+						onCollapse: Y
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
@@ -173,13 +183,13 @@ var O = ({ selectors: O, componentType: k, componentSubType: A, selector: j, sty
 				children: [/* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Replace Tokens",
-					checked: W,
-					onChange: Y
-				}), R === "element" && /* @__PURE__ */ C(D, {
+					checked: K,
+					onChange: Z
+				}), B === "element" && /* @__PURE__ */ C(D, {
 					size: "xs",
 					label: "Show All Options",
-					checked: H,
-					onChange: J
+					checked: W,
+					onChange: X
 				})]
 			})]
 		})