@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -2,41 +2,18 @@ import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
 import n from "../../components/CategoryOption/index.mjs";
 import r from "../../components/CategorySection/index.mjs";
-import i from "../../components/CategoryAdvanced/index.mjs";
-import a from "../../components/CategoryContainer/index.mjs";
-import o from "./BoxShadow/index.mjs";
-import s from "./Filters/Filter.mjs";
-import c from "./Transform/index.mjs";
-import l from "./Transition/index.mjs";
-import { memo as u, use as d, useCallback as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/StyleInspector/categories/Effects/Effects.tsx
-var h = [
-	"opacity",
-	"visibility",
-	"cursor",
-	"transition",
-	"box-shadow",
-	"filter",
-	"backdrop-filter",
-	"mix-blend-mode",
-	"isolation",
-	"clip-path",
-	"transform",
-	"transform-origin",
-	"perspective",
-	"will-change"
-], g = [
-	"transform-origin",
-	"perspective",
-	"backdrop-filter",
-	"mix-blend-mode",
-	"isolation",
-	"clip-path",
-	"will-change"
-], _ = u(({ replaceTokens: u = !1, isCollapsed: _ = !0, onCollapse: v }) => {
-	let { setValue: y } = d(e), { opacity: b, visibility: x, cursor: S, transition: C, "box-shadow": w, filter: T, "backdrop-filter": E, "mix-blend-mode": D, isolation: O, "clip-path": k, transform: A, "transform-origin": j, perspective: M, "will-change": N } = t({
-		keys: h,
+import { EFFECTS_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryAdvanced/index.mjs";
+import o from "../../components/CategoryContainer/index.mjs";
+import s from "./BoxShadow/index.mjs";
+import c from "./Filters/Filter.mjs";
+import l from "./Transform/index.mjs";
+import u from "./Transition/index.mjs";
+import { memo as d, use as f, useCallback as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+var g = d(({ replaceTokens: d = !1, isCollapsed: g = !0, onCollapse: _ }) => {
+	let { setValue: v } = f(e), { opacity: y, visibility: b, cursor: x, transition: S, "box-shadow": C, filter: w, "backdrop-filter": T, "mix-blend-mode": E, isolation: D, "clip-path": O, transform: k, "transform-origin": A, perspective: j, "will-change": M } = t({
+		keys: i.dot,
 		asValue: !0,
 		strictMode: !0,
 		defaultValues: {
@@ -55,213 +32,213 @@ var h = [
 			perspective: void 0,
 			"will-change": void 0
 		},
-		replaceTokens: u
-	}), P = f((e) => v?.("effects", e), [v]), F = f((e) => (t) => y(e, t), [y]);
-	return /* @__PURE__ */ p(a, {
-		title: "Effects",
-		dotKeys: h,
-		advancedKeys: g,
-		isCollapsed: _,
-		onCollapse: P,
-		children: /* @__PURE__ */ m("div", {
+		replaceTokens: d
+	}), N = p((e) => _?.("effects", e), [_]), P = p((e) => (t) => v(e, t), [v]);
+	return /* @__PURE__ */ m(o, {
+		title: i.title,
+		dotKeys: i.dot,
+		advancedKeys: i.advanced,
+		isCollapsed: g,
+		onCollapse: N,
+		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col gap-2",
 			children: [
-				/* @__PURE__ */ m(r, {
+				/* @__PURE__ */ h(r, {
 					label: "",
-					children: [/* @__PURE__ */ p(n, {
+					children: [/* @__PURE__ */ m(n, {
 						keys: ["opacity"],
 						label: "Opacity",
-						value: b,
-						onChange: F("opacity"),
+						value: y,
+						onChange: P("opacity"),
 						type: "metric"
-					}), /* @__PURE__ */ m(n, {
+					}), /* @__PURE__ */ h(n, {
 						keys: ["visibility"],
 						label: "Visibility",
-						value: x,
-						onChange: F("visibility"),
+						value: b,
+						onChange: P("visibility"),
 						type: "select",
 						children: [
-							/* @__PURE__ */ p("option", {
+							/* @__PURE__ */ m("option", {
 								value: "visible",
 								children: "Visible"
 							}),
-							/* @__PURE__ */ p("option", {
+							/* @__PURE__ */ m("option", {
 								value: "hidden",
 								children: "Hidden"
 							}),
-							/* @__PURE__ */ p("option", {
+							/* @__PURE__ */ m("option", {
 								value: "collapse",
 								children: "Collapse"
 							})
 						]
 					})]
 				}),
-				/* @__PURE__ */ p(r, {
+				/* @__PURE__ */ m(r, {
 					label: "Cursor",
 					keys: ["cursor"],
-					children: /* @__PURE__ */ m(n, {
-						value: S,
-						onChange: F("cursor"),
+					children: /* @__PURE__ */ h(n, {
+						value: x,
+						onChange: P("cursor"),
 						type: "select",
 						children: [
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "General",
 								children: [
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "auto",
 										children: "Auto"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "default",
 										children: "Default"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "none",
 										children: "None"
 									})
 								]
 							}),
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "Links & Status",
 								children: [
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "pointer",
 										children: "Pointer"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "not-allowed",
 										children: "Not Allowed"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "wait",
 										children: "Wait"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "progress",
 										children: "Progress"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "help",
 										children: "Help"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "context-menu",
 										children: "Context Menu"
 									})
 								]
 							}),
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "Selection",
 								children: [
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "cell",
 										children: "Cell"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "crosshair",
 										children: "Crosshair"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "text",
 										children: "Text"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "vertical-text",
 										children: "Vertical Text"
 									})
 								]
 							}),
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "Drag & Drop",
 								children: [
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "grab",
 										children: "Grab"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "grabbing",
 										children: "Grabbing"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "alias",
 										children: "Alias"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "copy",
 										children: "Copy"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "move",
 										children: "Move"
 									})
 								]
 							}),
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "Zoom",
-								children: [/* @__PURE__ */ p("option", {
+								children: [/* @__PURE__ */ m("option", {
 									value: "zoom-in",
 									children: "Zoom In"
-								}), /* @__PURE__ */ p("option", {
+								}), /* @__PURE__ */ m("option", {
 									value: "zoom-out",
 									children: "Zoom Out"
 								})]
 							}),
-							/* @__PURE__ */ m("optgroup", {
+							/* @__PURE__ */ h("optgroup", {
 								label: "Resize",
 								children: [
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "col-resize",
 										children: "Col Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "row-resize",
 										children: "Row Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "nesw-resize",
 										children: "NESW Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "nwse-resize",
 										children: "NWSE Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "ew-resize",
 										children: "EW Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "ns-resize",
 										children: "NS Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "n-resize",
 										children: "N Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "w-resize",
 										children: "W Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "s-resize",
 										children: "S Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "e-resize",
 										children: "E Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "nw-resize",
 										children: "NW Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "ne-resize",
 										children: "NE Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "sw-resize",
 										children: "SW Resize"
 									}),
-									/* @__PURE__ */ p("option", {
+									/* @__PURE__ */ m("option", {
 										value: "se-resize",
 										children: "SE Resize"
 									})
@@ -270,145 +247,145 @@ var h = [
 						]
 					})
 				}),
-				/* @__PURE__ */ p(o, {
-					onChange: F("box-shadow"),
-					value: w
+				/* @__PURE__ */ m(s, {
+					onChange: P("box-shadow"),
+					value: C
 				}),
-				/* @__PURE__ */ p(c, {
-					onChange: F("transform"),
-					value: A
+				/* @__PURE__ */ m(l, {
+					onChange: P("transform"),
+					value: k
 				}),
-				/* @__PURE__ */ p(i, { children: /* @__PURE__ */ m(r, {
+				/* @__PURE__ */ m(a, { children: /* @__PURE__ */ h(r, {
 					label: "",
-					children: [/* @__PURE__ */ p(n, {
+					children: [/* @__PURE__ */ m(n, {
 						keys: ["transform-origin"],
 						label: "Origin",
-						value: j,
-						onChange: F("transform-origin")
-					}), /* @__PURE__ */ p(n, {
+						value: A,
+						onChange: P("transform-origin")
+					}), /* @__PURE__ */ m(n, {
 						keys: ["perspective"],
 						label: "Perspective",
-						value: M,
-						onChange: F("perspective"),
+						value: j,
+						onChange: P("perspective"),
 						type: "metric"
 					})]
 				}) }),
-				/* @__PURE__ */ p(l, {
-					onChange: F("transition"),
-					value: C
+				/* @__PURE__ */ m(u, {
+					onChange: P("transition"),
+					value: S
 				}),
-				/* @__PURE__ */ p(s, {
-					onChange: F("filter"),
-					value: T
+				/* @__PURE__ */ m(c, {
+					onChange: P("filter"),
+					value: w
 				}),
-				/* @__PURE__ */ m(i, { children: [
-					/* @__PURE__ */ p(s, {
+				/* @__PURE__ */ h(a, { children: [
+					/* @__PURE__ */ m(c, {
 						styleKey: "backdrop-filter",
 						label: "Backdrop Filters",
-						onChange: F("backdrop-filter"),
-						value: E
+						onChange: P("backdrop-filter"),
+						value: T
 					}),
-					/* @__PURE__ */ m(r, {
+					/* @__PURE__ */ h(r, {
 						label: "",
-						children: [/* @__PURE__ */ m(n, {
+						children: [/* @__PURE__ */ h(n, {
 							keys: ["mix-blend-mode"],
 							label: "Blend",
-							value: D,
-							onChange: F("mix-blend-mode"),
+							value: E,
+							onChange: P("mix-blend-mode"),
 							type: "select",
 							children: [
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "normal",
 									children: "Normal"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "multiply",
 									children: "Multiply"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "screen",
 									children: "Screen"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "overlay",
 									children: "Overlay"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "darken",
 									children: "Darken"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "lighten",
 									children: "Lighten"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "color-dodge",
 									children: "Color Dodge"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "color-burn",
 									children: "Color Burn"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "hard-light",
 									children: "Hard Light"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "soft-light",
 									children: "Soft Light"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "difference",
 									children: "Difference"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "exclusion",
 									children: "Exclusion"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "hue",
 									children: "Hue"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "saturation",
 									children: "Saturation"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "color",
 									children: "Color"
 								}),
-								/* @__PURE__ */ p("option", {
+								/* @__PURE__ */ m("option", {
 									value: "luminosity",
 									children: "Luminosity"
 								})
 							]
-						}), /* @__PURE__ */ m(n, {
+						}), /* @__PURE__ */ h(n, {
 							keys: ["isolation"],
 							label: "Isolation",
-							value: O,
-							onChange: F("isolation"),
+							value: D,
+							onChange: P("isolation"),
 							type: "select",
-							children: [/* @__PURE__ */ p("option", {
+							children: [/* @__PURE__ */ m("option", {
 								value: "auto",
 								children: "Auto"
-							}), /* @__PURE__ */ p("option", {
+							}), /* @__PURE__ */ m("option", {
 								value: "isolate",
 								children: "Isolate"
 							})]
 						})]
 					}),
-					/* @__PURE__ */ m(r, {
+					/* @__PURE__ */ h(r, {
 						label: "",
-						children: [/* @__PURE__ */ p(n, {
+						children: [/* @__PURE__ */ m(n, {
 							keys: ["clip-path"],
 							label: "Clip Path",
-							value: k,
-							onChange: F("clip-path")
-						}), /* @__PURE__ */ p(n, {
+							value: O,
+							onChange: P("clip-path")
+						}), /* @__PURE__ */ m(n, {
 							keys: ["will-change"],
 							label: "Will Change",
-							value: N,
-							onChange: F("will-change")
+							value: M,
+							onChange: P("will-change")
 						})]
 					})
 				] })
@@ -417,4 +394,4 @@ var h = [
 	});
 });
 //#endregion
-export { _ as default };
+export { g as default };

package/dist/components/StyleInspector/categories/Effects/Filters/Filter.mjs

@@ -1,37 +1,29 @@
-import e from "../../../components/InspectorLabel/index.mjs";
-import t from "./FilterItem.mjs";
-import { useCallback as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@plitzi/plitzi-ui/Icon";
+import { splitBySpaceOutsideParens as e } from "../../../cssValues.mjs";
+import t from "../../../components/ValueList/index.mjs";
+import { FILTER_SPECS as n, serializeFilter as r } from "./helpers.mjs";
+import i from "./FilterItem.mjs";
+import { useCallback as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Filters/Filter.tsx
 var s = ({ styleKey: s = "filter", label: c = "Filters", value: l, onChange: u }) => {
-	let d = [];
-	l && l !== "" && (d = l.split(" "));
-	let f = (e) => (t) => {
-		t.stopPropagation(), t.preventDefault(), d.splice(e, 1), d.length > 0 ? u?.(d.join(" ")) : u?.("");
-	}, p = (e) => (t) => {
-		t !== d[e] && (d[e] = t, u?.(d.join(" ")));
-	}, m = n(() => {
-		l ? u?.(`${l} blur(5px)`) : u?.("blur(5px)");
-	}, [l, u]);
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
-		className: "flex w-full justify-between",
-		children: [/* @__PURE__ */ i(e, {
-			keyValue: [s],
-			children: c
-		}), /* @__PURE__ */ i(o, {
-			className: "cursor-pointer",
-			icon: "fas fa-plus",
-			onClick: m
-		})]
-	}), d.length > 0 && /* @__PURE__ */ i("div", {
-		className: "flex flex-col gap-2",
-		children: d.map((e, n) => /* @__PURE__ */ i(t, {
+	let d = typeof l == "string" && l !== "" ? e(l) : [], f = s === "backdrop-filter" ? "Backdrop filter" : "Filter", p = a((e) => u?.(e.length > 0 ? e.join(" ") : ""), [u]), m = (e) => () => p(d.filter((t, n) => n !== e)), h = (e) => (t) => {
+		t !== d[e] && p(d.map((n, r) => r === e ? t : n));
+	};
+	return /* @__PURE__ */ o(t, {
+		label: c,
+		keys: [s],
+		addLabel: `Add ${f.toLowerCase()}`,
+		onAdd: () => p([...d, r({
+			name: "blur",
+			amount: n.blur.default
+		})]),
+		children: d.length > 0 && d.map((e, t) => /* @__PURE__ */ o(i, {
 			value: e,
-			onChange: p(n),
-			onRemove: f(n)
-		}, n))
-	})] });
+			title: f,
+			onChange: h(t),
+			onRemove: m(t)
+		}, t))
+	});
 };
 //#endregion
 export { s as default };

package/dist/components/StyleInspector/categories/Effects/Filters/FilterItem.d.ts

@@ -1,8 +1,12 @@
-import { MouseEvent } from 'react';
 export type FilterItemProps = {
-    value?: string;
-    onChange?: (value: string) => void;
-    onRemove?: (e: MouseEvent) => void;
+    value: string;
+    title: string;
+    onChange: (value: string) => void;
+    onRemove: () => void;
 };
-declare const FilterItem: ({ value, onRemove, onChange }: FilterItemProps) => import('react').JSX.Element;
+/**
+ * One function of a filter list. The ones without a control here — `drop-shadow(…)`, `url(#…)`, a token — are edited
+ * as the text they are.
+ */
+declare const FilterItem: ({ value, title, onRemove, onChange }: FilterItemProps) => import('react').JSX.Element;
 export default FilterItem;