@plitzi/sdk-style 0.38.9 → 0.38.11

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

@@ -2,124 +2,116 @@ 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 "./PositionAdvanced.mjs";
-import s from "./PositionAdvancedButtons.mjs";
-import c from "./PositionClear.mjs";
-import l from "./PositionFloat.mjs";
-import { memo as u, use as d, useCallback as f, useMemo as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import g from "@plitzi/plitzi-ui/icons/XMark";
-import _ from "@plitzi/plitzi-ui/icons/ListNumbers";
-import v from "@plitzi/plitzi-ui/icons/PositionAbsolute";
-import y from "@plitzi/plitzi-ui/icons/PositionFixed";
-import b from "@plitzi/plitzi-ui/icons/PositionRelative";
+import { POSITION_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryAdvanced/index.mjs";
+import o from "../../components/CategoryContainer/index.mjs";
+import s from "./PositionAdvanced.mjs";
+import c from "./PositionAdvancedButtons.mjs";
+import l from "./PositionClear.mjs";
+import u from "./PositionFloat.mjs";
+import { memo as d, use as f, useCallback as p, useMemo as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "@plitzi/plitzi-ui/icons/XMark";
+import v from "@plitzi/plitzi-ui/icons/ListNumbers";
+import y from "@plitzi/plitzi-ui/icons/PositionAbsolute";
+import b from "@plitzi/plitzi-ui/icons/PositionFixed";
+import x from "@plitzi/plitzi-ui/icons/PositionRelative";
 //#region src/components/StyleInspector/categories/Position/Position.tsx
-var x = [
+var S = [
 	"position",
 	"top",
 	"bottom",
-	"z-index",
-	"float",
-	"clear",
 	"left",
 	"right"
-], S = [
-	"position",
-	"top",
-	"bottom",
-	"left",
-	"right"
-], C = ["float", "clear"], w = u(({ replaceTokens: u = !1, isCollapsed: w = !0, onCollapse: T }) => {
-	let { setValue: E } = d(e), { position: D, top: O, bottom: k, left: A, right: j, float: M, clear: N, "z-index": P } = t({
-		keys: x,
+], C = d(({ replaceTokens: d = !1, isCollapsed: C = !0, onCollapse: w }) => {
+	let { setValue: T } = f(e), { position: E, top: D, bottom: O, left: k, right: A, float: j, clear: M, "z-index": N } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: u
-	}), F = p(() => ({
-		top: O,
-		bottom: k,
-		left: A,
-		right: j
+		replaceTokens: d
+	}), P = m(() => ({
+		top: D,
+		bottom: O,
+		left: k,
+		right: A
 	}), [
+		D,
 		O,
 		k,
-		A,
-		j
-	]), I = f((e) => T?.("position", e), [T]), L = f((e) => (t) => {
-		E(e === "position-path" ? void 0 : e, t);
-	}, [E]), R = p(() => [
+		A
+	]), F = p((e) => w?.("position", e), [w]), I = p((e) => (t) => {
+		T(e === "position-path" ? void 0 : e, t);
+	}, [T]), L = m(() => [
 		{
 			value: "static",
-			icon: /* @__PURE__ */ m(g, {}),
+			icon: /* @__PURE__ */ h(_, {}),
 			description: "Static",
-			active: D === "static"
+			active: E === "static"
 		},
 		{
 			value: "relative",
-			icon: /* @__PURE__ */ m(b, {}),
+			icon: /* @__PURE__ */ h(x, {}),
 			description: "Relative",
-			active: D === "relative"
+			active: E === "relative"
 		},
 		{
 			value: "absolute",
-			icon: /* @__PURE__ */ m(v, {}),
+			icon: /* @__PURE__ */ h(y, {}),
 			description: "Absolute",
-			active: D === "absolute"
+			active: E === "absolute"
 		},
 		{
 			value: "fixed",
-			icon: /* @__PURE__ */ m(y, {}),
+			icon: /* @__PURE__ */ h(b, {}),
 			description: "Fixed",
-			active: D === "fixed"
+			active: E === "fixed"
 		},
 		{
 			value: "sticky",
-			icon: /* @__PURE__ */ m(_, {}),
+			icon: /* @__PURE__ */ h(v, {}),
 			description: "Sticky",
-			active: D === "sticky"
+			active: E === "sticky"
 		}
-	], [D]);
-	return /* @__PURE__ */ m(a, {
-		title: "Position",
-		dotKeys: x,
-		advancedKeys: C,
-		isCollapsed: w,
-		onCollapse: I,
-		children: /* @__PURE__ */ h("div", {
+	], [E]);
+	return /* @__PURE__ */ h(o, {
+		title: i.title,
+		dotKeys: i.dot,
+		advancedKeys: i.advanced,
+		isCollapsed: C,
+		onCollapse: F,
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col gap-2",
 			children: [
-				/* @__PURE__ */ m(r, {
+				/* @__PURE__ */ h(r, {
 					keys: S,
 					label: "Position",
-					children: /* @__PURE__ */ m(n, {
-						onChange: L("position"),
+					children: /* @__PURE__ */ h(n, {
+						onChange: I("position"),
 						type: "iconGroup",
-						items: R
+						items: L
 					})
 				}),
-				(D === "fixed" || D === "absolute") && /* @__PURE__ */ m(s, {
-					value: F,
-					onChange: L("position-path")
+				(E === "fixed" || E === "absolute") && /* @__PURE__ */ h(c, {
+					value: P,
+					onChange: I("position-path")
 				}),
-				/* @__PURE__ */ m(o, {
-					value: F,
-					onChange: L
+				/* @__PURE__ */ h(s, {
+					value: P,
+					onChange: I
 				}),
-				/* @__PURE__ */ h(i, { children: [/* @__PURE__ */ m(l, {
+				/* @__PURE__ */ g(a, { children: [/* @__PURE__ */ h(u, {
+					value: j,
+					onChange: I("float")
+				}), /* @__PURE__ */ h(l, {
 					value: M,
-					onChange: L("float")
-				}), /* @__PURE__ */ m(c, {
-					value: N,
-					onChange: L("clear")
+					onChange: I("clear")
 				})] }),
-				/* @__PURE__ */ m(r, {
+				/* @__PURE__ */ h(r, {
 					keys: ["z-index"],
 					label: "Z-Index",
-					children: /* @__PURE__ */ m(n, {
-						onChange: L("z-index"),
+					children: /* @__PURE__ */ h(n, {
+						onChange: I("z-index"),
 						type: "input",
-						value: P
+						value: N
 					})
 				})
 			]
@@ -127,4 +119,4 @@ var x = [
 	});
 });
 //#endregion
-export { w as default };
+export { C as default };

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

@@ -1,27 +1,28 @@
 import { processSelectors as e } from "../../../../helpers/processSelector.mjs";
-import t from "../../components/CategoryContainer/index.mjs";
-import { useCallback as n, useMemo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/CodeMirror";
-import o from "@plitzi/sdk-shared/theme/useTheme";
-import s from "clsx";
+import { RAW_STYLE_KEYS as t } from "../../categoryKeys.mjs";
+import n from "../../components/CategoryContainer/index.mjs";
+import { useCallback as r, useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/CodeMirror";
+import s from "@plitzi/sdk-shared/theme/useTheme";
+import c from "clsx";
 //#region src/components/StyleInspector/categories/RawStyle/RawStyle.tsx
-var c = ({ selectors: c, isCollapsed: l, onCollapse: u }) => {
-	let { resolvedTheme: d } = o(), f = r(() => e(c ?? [], !1).join("\n\n"), [c]), p = n((e) => u?.("rawStyle", e), [u]);
-	return /* @__PURE__ */ i(t, {
-		className: l ? "" : "grow",
-		classNameContent: s("p-0", { grow: !l }),
-		title: "Raw Style",
-		isCollapsed: l,
-		onCollapse: p,
-		children: /* @__PURE__ */ i(a, {
-			value: f,
+var l = ({ selectors: l, isCollapsed: u, onCollapse: d }) => {
+	let { resolvedTheme: f } = s(), p = i(() => e(l ?? [], !1).join("\n\n"), [l]), m = r((e) => d?.("rawStyle", e), [d]);
+	return /* @__PURE__ */ a(n, {
+		className: u ? "" : "grow",
+		classNameContent: c("p-0", { grow: !u }),
+		title: t.title,
+		isCollapsed: u,
+		onCollapse: m,
+		children: /* @__PURE__ */ a(o, {
+			value: p,
 			className: "h-full",
-			theme: d,
+			theme: f,
 			lineWrapping: !0,
 			readOnly: !0
 		})
 	});
 };
 //#endregion
-export { c as default };
+export { l as default };

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

@@ -2,143 +2,123 @@ 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 "./SizeContainer.mjs";
-import s from "./SizeFit.mjs";
-import c from "./SizeOverflow.mjs";
-import l from "./SizePosition.mjs";
-import { memo as u, use as d, useCallback as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { SIZE_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryAdvanced/index.mjs";
+import o from "../../components/CategoryContainer/index.mjs";
+import s from "./SizeContainer.mjs";
+import c from "./SizeFit.mjs";
+import l from "./SizeOverflow.mjs";
+import u from "./SizePosition.mjs";
+import { memo as d, use as f, useCallback as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Size/Size.tsx
-var h = [
-	"width",
-	"height",
-	"min-width",
-	"min-height",
-	"max-width",
-	"max-height",
-	"aspect-ratio",
-	"box-sizing",
-	"overflow",
-	"object-fit",
-	"object-position",
-	"container-type",
-	"container-name"
-], g = [
-	"aspect-ratio",
-	"box-sizing",
-	"object-position",
-	"object-fit",
-	"container-type",
-	"container-name"
-], _ = ["width", "height"], v = ["min-width", "min-height"], y = ["max-width", "max-height"], b = u(({ replaceTokens: u = !1, isCollapsed: b = !0, onCollapse: x }) => {
-	let { setValue: S } = d(e), { width: C, height: w, "min-width": T, "min-height": E, "max-width": D, "max-height": O, "aspect-ratio": k, "box-sizing": A, overflow: j, "object-position": M, "object-fit": N, "container-type": P, "container-name": F } = t({
-		keys: h,
+var g = ["width", "height"], _ = ["min-width", "min-height"], v = ["max-width", "max-height"], y = d(({ replaceTokens: d = !1, isCollapsed: y = !0, onCollapse: b }) => {
+	let { setValue: x } = f(e), { width: S, height: C, "min-width": w, "min-height": T, "max-width": E, "max-height": D, "aspect-ratio": O, "box-sizing": k, overflow: A, "object-position": j, "object-fit": M, "container-type": N, "container-name": P } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: u
-	}), I = f((e) => x?.("size", e), [x]), L = f((e) => (t) => S(e, t), [S]);
-	return /* @__PURE__ */ m(a, {
-		title: "Size",
-		dotKeys: h,
-		advancedKeys: g,
-		isCollapsed: b,
-		onCollapse: I,
+		replaceTokens: d
+	}), F = p((e) => b?.("size", e), [b]), I = p((e) => (t) => x(e, t), [x]);
+	return /* @__PURE__ */ h(o, {
+		title: i.title,
+		dotKeys: i.dot,
+		advancedKeys: i.advanced,
+		isCollapsed: y,
+		onCollapse: F,
 		children: [
-			/* @__PURE__ */ m(r, {
+			/* @__PURE__ */ h(r, {
 				label: "Size",
-				keys: _,
-				children: [/* @__PURE__ */ p(n, {
+				keys: g,
+				children: [/* @__PURE__ */ m(n, {
 					keys: ["width"],
 					preffix: "W",
-					value: C,
-					onChange: L("width"),
+					value: S,
+					onChange: I("width"),
 					type: "metric"
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					keys: ["height"],
 					preffix: "H",
-					value: w,
-					onChange: L("height"),
+					value: C,
+					onChange: I("height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ m(r, {
+			/* @__PURE__ */ h(r, {
 				label: "Min Size",
-				keys: v,
-				children: [/* @__PURE__ */ p(n, {
+				keys: _,
+				children: [/* @__PURE__ */ m(n, {
 					keys: ["min-width"],
 					preffix: "W",
-					value: T,
-					onChange: L("min-width"),
+					value: w,
+					onChange: I("min-width"),
 					type: "metric"
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					keys: ["min-height"],
 					preffix: "H",
-					value: E,
-					onChange: L("min-height"),
+					value: T,
+					onChange: I("min-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ m(r, {
+			/* @__PURE__ */ h(r, {
 				label: "Max Size",
-				keys: y,
-				children: [/* @__PURE__ */ p(n, {
+				keys: v,
+				children: [/* @__PURE__ */ m(n, {
 					keys: ["max-width"],
 					preffix: "W",
-					value: D,
-					onChange: L("max-width"),
+					value: E,
+					onChange: I("max-width"),
 					type: "metric"
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					keys: ["max-height"],
 					preffix: "H",
-					value: O,
-					onChange: L("max-height"),
+					value: D,
+					onChange: I("max-height"),
 					type: "metric"
 				})]
 			}),
-			/* @__PURE__ */ p(i, { children: /* @__PURE__ */ m(r, {
+			/* @__PURE__ */ m(a, { children: /* @__PURE__ */ h(r, {
 				label: "",
-				children: [/* @__PURE__ */ p(n, {
+				children: [/* @__PURE__ */ m(n, {
 					keys: ["aspect-ratio"],
 					label: "Ratio",
-					value: k,
-					onChange: L("aspect-ratio")
-				}), /* @__PURE__ */ m(n, {
+					value: O,
+					onChange: I("aspect-ratio")
+				}), /* @__PURE__ */ h(n, {
 					keys: ["box-sizing"],
 					label: "Box Sizing",
-					value: A,
-					onChange: L("box-sizing"),
+					value: k,
+					onChange: I("box-sizing"),
 					type: "select",
-					children: [/* @__PURE__ */ p("option", {
+					children: [/* @__PURE__ */ m("option", {
 						value: "border-box",
 						children: "Border Box"
-					}), /* @__PURE__ */ p("option", {
+					}), /* @__PURE__ */ m("option", {
 						value: "content-box",
 						children: "Content Box"
 					})]
 				})]
 			}) }),
-			/* @__PURE__ */ p(c, {
-				value: j,
-				onChange: L
+			/* @__PURE__ */ m(l, {
+				value: A,
+				onChange: I
 			}),
-			/* @__PURE__ */ m(i, { children: [
-				/* @__PURE__ */ p(l, {
-					value: M,
-					onChange: L
+			/* @__PURE__ */ h(a, { children: [
+				/* @__PURE__ */ m(u, {
+					value: j,
+					onChange: I
 				}),
-				/* @__PURE__ */ p(s, {
-					value: N,
-					onChange: L
+				/* @__PURE__ */ m(c, {
+					value: M,
+					onChange: I
 				}),
-				/* @__PURE__ */ p(o, {
-					containerType: P,
-					containerName: F,
-					onChange: L
+				/* @__PURE__ */ m(s, {
+					containerType: N,
+					containerName: P,
+					onChange: I
 				})
 			] })
 		]
 	});
 });
 //#endregion
-export { b as default };
+export { y as default };

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

@@ -1,26 +1,17 @@
 import e from "../../StyleInspectorContext.mjs";
 import t from "../../hooks/useInspectorValues.mjs";
-import n from "../../components/CategoryContainer/index.mjs";
-import r from "./SpacingEditor.mjs";
-import i from "./SpacingMargin.mjs";
-import { memo as a, use as o, useCallback as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region src/components/StyleInspector/categories/Spacing/Spacing.tsx
-var d = [
-	"margin-top",
-	"margin-bottom",
-	"margin-left",
-	"margin-right",
-	"padding-top",
-	"padding-bottom",
-	"padding-left",
-	"padding-right"
-], f = a(({ replaceTokens: a = !1, isCollapsed: f = !0, onCollapse: p }) => {
-	let [m, h] = c(!1), { setValue: g } = o(e), _ = t({
-		keys: d,
+import { SPACING_KEYS as n } from "../../categoryKeys.mjs";
+import r from "../../components/CategoryContainer/index.mjs";
+import i from "./SpacingEditor.mjs";
+import a from "./SpacingMargin.mjs";
+import { memo as o, use as s, useCallback as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+var f = o(({ replaceTokens: o = !1, isCollapsed: f = !0, onCollapse: p }) => {
+	let [m, h] = l(!1), { setValue: g } = s(e), _ = t({
+		keys: n.dot,
 		asValue: !0,
-		replaceTokens: a
-	}), [v, y] = c(), b = s((e) => p?.("spacing", e), [p]), x = s(() => h((e) => !e), [h]), S = s((e, t) => {
+		replaceTokens: o
+	}), [v, y] = l(), b = c((e) => p?.("spacing", e), [p]), x = c(() => h((e) => !e), [h]), S = c((e, t) => {
 		if (!m) {
 			g(e, t);
 			return;
@@ -46,21 +37,21 @@ var d = [
 			"padding-left": t,
 			"padding-right": t
 		});
-	}, [m, g]), C = s((e) => y(e), [y]);
-	return /* @__PURE__ */ l(n, {
-		title: "Spacing",
-		dotKeys: d,
+	}, [m, g]), C = c((e) => y(e), [y]);
+	return /* @__PURE__ */ u(r, {
+		title: n.title,
+		dotKeys: n.dot,
 		isCollapsed: f,
 		onCollapse: b,
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: "flex flex-col",
-			children: [/* @__PURE__ */ l(i, {
+			children: [/* @__PURE__ */ u(a, {
 				values: _,
 				fragmentSelected: v,
 				onSelectFragment: C,
 				isLinked: m,
 				onLinkSelected: x
-			}), v && /* @__PURE__ */ l(r, {
+			}), v && /* @__PURE__ */ u(i, {
 				fragmentSelected: v,
 				onChange: S,
 				value: _[v]

package/dist/components/StyleInspector/categories/Spacing/SpacingMargin.mjs

@@ -14,12 +14,12 @@ var o = [
 		e === s ? d?.(void 0) : d?.(e);
 	}, [s, d]), { "margin-top": p, "margin-bottom": m, "margin-left": h, "margin-right": g } = c ?? {};
 	return /* @__PURE__ */ a("div", {
-		className: "relative flex cursor-pointer flex-col rounded-md border border-gray-300 bg-white select-none dark:border-zinc-600 dark:bg-zinc-800",
+		className: "relative flex cursor-pointer flex-col rounded-md border border-dashed border-gray-300 select-none dark:border-zinc-600",
 		children: [
 			/* @__PURE__ */ a("div", {
 				className: "flex items-center justify-center py-0.5",
 				children: [/* @__PURE__ */ i(e, {
-					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[10px]",
+					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[11px]",
 					size: "custom",
 					keyValue: o,
 					children: "MARGIN"

package/dist/components/StyleInspector/categories/Spacing/SpacingPadding.mjs

@@ -13,13 +13,13 @@ var a = [
 		e === o ? u?.(void 0) : u?.(e);
 	}, [u, o]), { "padding-top": f, "padding-bottom": p, "padding-left": m, "padding-right": h } = s ?? {};
 	return /* @__PURE__ */ i("div", {
-		className: "relative grow rounded-md border border-gray-300 dark:border-zinc-600",
+		className: "relative grow rounded-md border border-gray-300 bg-gray-50 dark:border-zinc-600 dark:bg-zinc-800/70",
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-center py-0.5",
 				children: [/* @__PURE__ */ r(e, {
 					keyValue: a,
-					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[10px]",
+					className: "absolute top-0 left-0 overflow-hidden rounded-br-md !p-0 text-[11px]",
 					size: "custom",
 					children: "PADDING"
 				}), /* @__PURE__ */ r(t, {
@@ -40,7 +40,8 @@ var a = [
 						})
 					}),
 					/* @__PURE__ */ i("div", {
-						className: "flex grow items-center justify-center rounded-md border border-gray-300 bg-slate-100 py-1 dark:border-zinc-600 dark:bg-zinc-700/50",
+						className: "flex grow items-center justify-center rounded border border-gray-300 bg-white py-1 text-zinc-500 hover:text-zinc-900 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
+						title: c ? "Sides linked: a change applies to all four" : "Link the four sides",
 						onClick: l,
 						children: [c && /* @__PURE__ */ r("i", { className: "fa-solid fa-link text-sm" }), !c && /* @__PURE__ */ r("i", { className: "fa-solid fa-link-slash text-sm" })]
 					}),