@plitzi/sdk-style 0.32.20 → 0.32.22

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

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

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

@@ -1,7 +1,9 @@
 import { StyleCategory, StyleValue } from '@plitzi/sdk-shared';
 export type FilterProps = {
+    styleKey?: StyleCategory;
+    label?: string;
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const Filter: ({ value, onChange }: FilterProps) => import("react").JSX.Element;
+declare const Filter: ({ styleKey, label, value, onChange }: FilterProps) => import("react").JSX.Element;
 export default Filter;

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

@@ -4,32 +4,32 @@ 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";
 //#region src/components/StyleInspector/categories/Effects/Filters/Filter.tsx
-var s = ({ value: s, onChange: c }) => {
-	let l = [];
-	s && s !== "" && (l = s.split(" "));
-	let u = (e) => (t) => {
-		t.stopPropagation(), t.preventDefault(), l.splice(e, 1), l.length > 0 ? c?.(l.join(" ")) : c?.("");
-	}, d = (e) => (t) => {
-		t !== l[e] && (l[e] = t, c?.(l.join(" ")));
-	}, f = n(() => {
-		s ? c?.(`${s} blur(5px)`) : c?.("blur(5px)");
-	}, [s, c]);
+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: ["filter"],
-			children: "Filters"
+			keyValue: [s],
+			children: c
 		}), /* @__PURE__ */ i(o, {
 			className: "cursor-pointer",
 			icon: "fas fa-plus",
-			onClick: f
+			onClick: m
 		})]
-	}), l.length > 0 && /* @__PURE__ */ i("div", {
+	}), d.length > 0 && /* @__PURE__ */ i("div", {
 		className: "flex flex-col gap-2",
-		children: l.map((e, n) => /* @__PURE__ */ i(t, {
+		children: d.map((e, n) => /* @__PURE__ */ i(t, {
 			value: e,
-			onChange: d(n),
-			onRemove: u(n)
+			onChange: p(n),
+			onRemove: f(n)
 		}, n))
 	})] });
 };

package/dist/components/StyleInspector/categories/Others/Others.d.ts

@@ -0,0 +1,7 @@
+export type OthersProps = {
+    replaceTokens?: boolean;
+    isCollapsed?: boolean;
+    onCollapse?: (category: string, isCollapsed: boolean) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: OthersProps) => import("react").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,103 @@
+import e from "../../StyleInspectorContext.mjs";
+import t from "../../hooks/useInspectorValues.mjs";
+import n from "../../components/CategoryAdvanced/index.mjs";
+import r from "../../components/CategoryContainer/index.mjs";
+import i from "./OthersForm.mjs";
+import a from "./OthersInteraction.mjs";
+import o from "./OthersOutline.mjs";
+import s from "./OthersSvg.mjs";
+import c from "./OthersTable.mjs";
+import { memo as l, use as u, useCallback as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Others/Others.tsx
+var m = [
+	"pointer-events",
+	"user-select",
+	"touch-action",
+	"resize",
+	"appearance",
+	"scroll-behavior",
+	"overscroll-behavior",
+	"accent-color",
+	"caret-color",
+	"color-scheme",
+	"outline-width",
+	"outline-style",
+	"outline-color",
+	"outline-offset",
+	"border-collapse",
+	"border-spacing",
+	"table-layout",
+	"fill",
+	"stroke",
+	"stroke-width"
+], h = [
+	"touch-action",
+	"resize",
+	"appearance",
+	"scroll-behavior",
+	"overscroll-behavior",
+	"accent-color",
+	"caret-color",
+	"color-scheme",
+	"border-collapse",
+	"border-spacing",
+	"table-layout",
+	"fill",
+	"stroke",
+	"stroke-width"
+], g = l(({ replaceTokens: l = !1, isCollapsed: g = !0, onCollapse: _ }) => {
+	let { setValue: v } = u(e), { "pointer-events": y, "user-select": b, "touch-action": x, resize: S, appearance: C, "scroll-behavior": w, "overscroll-behavior": T, "accent-color": E, "caret-color": D, "color-scheme": O, "outline-width": k, "outline-style": A, "outline-color": j, "outline-offset": M, "border-collapse": N, "border-spacing": P, "table-layout": F, fill: I, stroke: L, "stroke-width": R } = t({
+		keys: m,
+		asValue: !0,
+		replaceTokens: l
+	}), z = d((e) => _?.("others", e), [_]), B = d((e) => (t) => v(e, t), [v]);
+	return /* @__PURE__ */ p(r, {
+		title: "Others",
+		dotKeys: m,
+		advancedKeys: h,
+		isCollapsed: g,
+		onCollapse: z,
+		children: [
+			/* @__PURE__ */ f(a, {
+				pointerEvents: y,
+				userSelect: b,
+				touchAction: x,
+				resize: S,
+				appearance: C,
+				scrollBehavior: w,
+				overscrollBehavior: T,
+				onChange: B
+			}),
+			/* @__PURE__ */ f(o, {
+				outlineWidth: k,
+				outlineStyle: A,
+				outlineColor: j,
+				outlineOffset: M,
+				onChange: B
+			}),
+			/* @__PURE__ */ p(n, { children: [
+				/* @__PURE__ */ f(i, {
+					accentColor: E,
+					caretColor: D,
+					colorScheme: O,
+					onChange: B
+				}),
+				/* @__PURE__ */ f(c, {
+					borderCollapse: N,
+					borderSpacing: P,
+					tableLayout: F,
+					onChange: B
+				}),
+				/* @__PURE__ */ f(s, {
+					fill: I,
+					stroke: L,
+					strokeWidth: R,
+					onChange: B
+				})
+			] })
+		]
+	});
+});
+//#endregion
+export { g as default };