@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -0,0 +1,268 @@
+import { splitBySpaceOutsideParens as e } from "../../../cssValues.mjs";
+//#region src/components/StyleInspector/categories/Effects/Transition/helpers.ts
+var t = {
+	property: "opacity",
+	duration: "200ms",
+	easing: "ease",
+	delay: "0ms"
+}, n = /^[-+]?(\d|\.\d)[\d.]*m?s$/i, r = /* @__PURE__ */ new Set([
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out",
+	"linear",
+	"step-start",
+	"step-end"
+]), i = /^(cubic-bezier|steps|linear)\(/i, a = (t) => {
+	let a = [], o, s;
+	for (let c of e(t.trim())) if (n.test(c)) a.push(c);
+	else if (r.has(c.toLowerCase()) || i.test(c)) o = c;
+	else if (s === void 0 && /^[a-z-]+$/i.test(c)) s = c;
+	else return;
+	if (!(a.length > 2 || !s && a.length === 0)) return {
+		property: s ?? "all",
+		duration: a[0] ?? "0s",
+		easing: o ?? "ease",
+		delay: a[1] ?? "0s"
+	};
+}, o = ({ property: e, duration: t, delay: n }) => /^[-+]?0*\.?0*m?s$/i.test(n) ? `${e} ${t}` : `${e} ${t} after ${n}`, s = ({ property: e, duration: t, easing: n, delay: r }) => `${e} ${t} ${n} ${r}`, c = /* @__PURE__ */ new Set([
+	"ease",
+	"linear",
+	"ease-in",
+	"ease-out",
+	"ease-in-out"
+]), l = (e) => c.has(e) ? e.charAt(0).toUpperCase() + e.slice(1) : e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()), u = ([e, t, n, r]) => `cubic-bezier(${e}, ${t}, ${n}, ${r})`, d = (e, t) => {
+	let n = t[e];
+	return c.has(e) || !n ? e : u(n);
+}, f = (e) => Object.keys(e).map((t) => ({
+	label: l(t),
+	value: d(t, e)
+})), p = /^cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)$/i, m = (e, t) => {
+	let n = p.exec(e.trim());
+	return n ? [
+		Number(n[1]),
+		Number(n[2]),
+		Number(n[3]),
+		Number(n[4])
+	] : t[e.trim()];
+}, h = [
+	{
+		label: "Common",
+		options: [
+			{
+				label: "All Properties",
+				value: "all"
+			},
+			{
+				label: "Opacity",
+				value: "opacity"
+			},
+			{
+				label: "Transform",
+				value: "transform"
+			},
+			{
+				label: "Filter",
+				value: "filter"
+			},
+			{
+				label: "Margin",
+				value: "margin"
+			},
+			{
+				label: "Padding",
+				value: "padding"
+			},
+			{
+				label: "Border",
+				value: "border"
+			},
+			{
+				label: "Flex",
+				value: "flex"
+			}
+		]
+	},
+	{
+		label: "Color & background",
+		options: [
+			{
+				label: "Color",
+				value: "color"
+			},
+			{
+				label: "Background Color",
+				value: "background-color"
+			},
+			{
+				label: "Background Position",
+				value: "background-position"
+			},
+			{
+				label: "Box Shadow",
+				value: "box-shadow"
+			},
+			{
+				label: "Text Shadow",
+				value: "text-shadow"
+			}
+		]
+	},
+	{
+		label: "Size",
+		options: [
+			{
+				label: "Width",
+				value: "width"
+			},
+			{
+				label: "Height",
+				value: "height"
+			},
+			{
+				label: "Max Width",
+				value: "max-width"
+			},
+			{
+				label: "Max Height",
+				value: "max-height"
+			},
+			{
+				label: "Min Width",
+				value: "min-width"
+			},
+			{
+				label: "Min Height",
+				value: "min-height"
+			}
+		]
+	},
+	{
+		label: "Borders",
+		options: [
+			{
+				label: "Border Radius",
+				value: "border-radius"
+			},
+			{
+				label: "Border Color",
+				value: "border-color"
+			},
+			{
+				label: "Border Width",
+				value: "border-width"
+			}
+		]
+	},
+	{
+		label: "Typography",
+		options: [
+			{
+				label: "Font Size",
+				value: "font-size"
+			},
+			{
+				label: "Line Height",
+				value: "line-height"
+			},
+			{
+				label: "Letter Spacing",
+				value: "letter-spacing"
+			},
+			{
+				label: "Text Indent",
+				value: "text-indent"
+			},
+			{
+				label: "Word Spacing",
+				value: "word-spacing"
+			}
+		]
+	},
+	{
+		label: "Position",
+		options: [
+			{
+				label: "Top",
+				value: "top"
+			},
+			{
+				label: "Left",
+				value: "left"
+			},
+			{
+				label: "Bottom",
+				value: "bottom"
+			},
+			{
+				label: "Right",
+				value: "right"
+			},
+			{
+				label: "Z Index",
+				value: "z-index"
+			}
+		]
+	},
+	{
+		label: "Margin",
+		options: [
+			{
+				label: "Margin Top",
+				value: "margin-top"
+			},
+			{
+				label: "Margin Right",
+				value: "margin-right"
+			},
+			{
+				label: "Margin Bottom",
+				value: "margin-bottom"
+			},
+			{
+				label: "Margin Left",
+				value: "margin-left"
+			}
+		]
+	},
+	{
+		label: "Padding",
+		options: [
+			{
+				label: "Padding Top",
+				value: "padding-top"
+			},
+			{
+				label: "Padding Right",
+				value: "padding-right"
+			},
+			{
+				label: "Padding Bottom",
+				value: "padding-bottom"
+			},
+			{
+				label: "Padding Left",
+				value: "padding-left"
+			}
+		]
+	},
+	{
+		label: "Flex",
+		options: [
+			{
+				label: "Flex Grow",
+				value: "flex-grow"
+			},
+			{
+				label: "Flex Shrink",
+				value: "flex-shrink"
+			},
+			{
+				label: "Flex Basis",
+				value: "flex-basis"
+			}
+		]
+	}
+], g = (e) => h.some((t) => t.options.some((t) => t.value === e));
+//#endregion
+export { t as DEFAULT_TRANSITION, h as TRANSITION_PROPERTY_GROUPS, u as bezierCss, d as easingCss, m as easingCurve, f as easingOptions, g as isListedProperty, a as parseTransition, s as serializeTransition, o as transitionSummary };

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

@@ -2,75 +2,76 @@ 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 { memo as a, use as o, useCallback as s, useMemo as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
-import u from "@plitzi/plitzi-ui/icons/XMark";
-import d from "@plitzi/plitzi-ui/icons/ListCircles";
-import f from "@plitzi/plitzi-ui/icons/ListDots";
-import p from "@plitzi/plitzi-ui/icons/ListLetters";
-import m from "@plitzi/plitzi-ui/icons/ListNumbers";
-import h from "@plitzi/plitzi-ui/icons/ListRoman";
-import g from "@plitzi/plitzi-ui/icons/ListSquares";
+import { LIST_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import { memo as o, use as s, useCallback as c, useMemo as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import d from "@plitzi/plitzi-ui/icons/XMark";
+import f from "@plitzi/plitzi-ui/icons/ListCircles";
+import p from "@plitzi/plitzi-ui/icons/ListDots";
+import m from "@plitzi/plitzi-ui/icons/ListLetters";
+import h from "@plitzi/plitzi-ui/icons/ListNumbers";
+import g from "@plitzi/plitzi-ui/icons/ListRoman";
+import _ from "@plitzi/plitzi-ui/icons/ListSquares";
 //#region src/components/StyleInspector/categories/List/List.tsx
-var _ = "none", v = "circle", y = "decimal", b = "disc", x = "square", S = "lower-alpha", C = "lower-roman", w = ["list-style"], T = a(({ replaceTokens: a = !1, isCollapsed: T = !0, onCollapse: E }) => {
-	let { setValue: D } = o(e), { "list-style": O } = t({
-		keys: w,
+var v = "none", y = "circle", b = "decimal", x = "disc", S = "square", C = "lower-alpha", w = "lower-roman", T = o(({ replaceTokens: o = !1, isCollapsed: T = !0, onCollapse: E }) => {
+	let { setValue: D } = s(e), { "list-style": O } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: a
-	}), k = s((e) => E?.("list", e), [E]), A = s((e) => D("list-style", e), [D]), j = c(() => [
-		{
-			value: _,
-			icon: /* @__PURE__ */ l(u, {}),
-			description: "",
-			active: O === _
-		},
-		{
-			value: b,
-			icon: /* @__PURE__ */ l(f, {}),
-			description: "",
-			active: O === b
-		},
+		replaceTokens: o
+	}), k = c((e) => E?.("list", e), [E]), A = c((e) => D("list-style", e), [D]), j = l(() => [
 		{
 			value: v,
-			icon: /* @__PURE__ */ l(d, {}),
+			icon: /* @__PURE__ */ u(d, {}),
 			description: "",
 			active: O === v
 		},
 		{
 			value: x,
-			icon: /* @__PURE__ */ l(g, {}),
+			icon: /* @__PURE__ */ u(p, {}),
 			description: "",
 			active: O === x
 		},
 		{
 			value: y,
-			icon: /* @__PURE__ */ l(m, {}),
+			icon: /* @__PURE__ */ u(f, {}),
 			description: "",
 			active: O === y
 		},
 		{
 			value: S,
-			icon: /* @__PURE__ */ l(p, {}),
+			icon: /* @__PURE__ */ u(_, {}),
 			description: "",
 			active: O === S
 		},
+		{
+			value: b,
+			icon: /* @__PURE__ */ u(h, {}),
+			description: "",
+			active: O === b
+		},
 		{
 			value: C,
-			icon: /* @__PURE__ */ l(h, {}),
+			icon: /* @__PURE__ */ u(m, {}),
 			description: "",
 			active: O === C
+		},
+		{
+			value: w,
+			icon: /* @__PURE__ */ u(g, {}),
+			description: "",
+			active: O === w
 		}
 	], [O]);
-	return /* @__PURE__ */ l(i, {
-		title: "List",
-		dotKeys: w,
+	return /* @__PURE__ */ u(a, {
+		title: i.title,
+		dotKeys: i.dot,
 		isCollapsed: T,
 		onCollapse: k,
-		children: /* @__PURE__ */ l(r, {
-			keys: w,
+		children: /* @__PURE__ */ u(r, {
+			keys: i.dot,
 			label: "Style",
-			children: /* @__PURE__ */ l(n, {
+			children: /* @__PURE__ */ u(n, {
 				onChange: A,
 				type: "iconGroup",
 				items: j

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

@@ -2,75 +2,75 @@ 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 { memo as a, use as o, useCallback as s, useMemo as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
-import u from "@plitzi/plitzi-ui/icons/XMark";
-import d from "@plitzi/plitzi-ui/icons/ListCircles";
-import f from "@plitzi/plitzi-ui/icons/ListDots";
-import p from "@plitzi/plitzi-ui/icons/ListLetters";
-import m from "@plitzi/plitzi-ui/icons/ListNumbers";
-import h from "@plitzi/plitzi-ui/icons/ListRoman";
-import g from "@plitzi/plitzi-ui/icons/ListSquares";
-//#region src/components/StyleInspector/categories/ListItem/ListItem.tsx
-var _ = ["list-style-type"], v = a(({ replaceTokens: a = !1, isCollapsed: v = !0, onCollapse: y }) => {
-	let { setValue: b } = o(e), { "list-style-type": x } = t({
-		keys: _,
+import { LIST_ITEM_KEYS as i } from "../../categoryKeys.mjs";
+import a from "../../components/CategoryContainer/index.mjs";
+import { memo as o, use as s, useCallback as c, useMemo as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import d from "@plitzi/plitzi-ui/icons/XMark";
+import f from "@plitzi/plitzi-ui/icons/ListCircles";
+import p from "@plitzi/plitzi-ui/icons/ListDots";
+import m from "@plitzi/plitzi-ui/icons/ListLetters";
+import h from "@plitzi/plitzi-ui/icons/ListNumbers";
+import g from "@plitzi/plitzi-ui/icons/ListRoman";
+import _ from "@plitzi/plitzi-ui/icons/ListSquares";
+var v = o(({ replaceTokens: o = !1, isCollapsed: v = !0, onCollapse: y }) => {
+	let { setValue: b } = s(e), { "list-style-type": x } = t({
+		keys: i.dot,
 		asValue: !0,
-		replaceTokens: a
-	}), S = s((e) => y?.("listItem", e), [y]), C = s((e) => b("list-style-type", e), [b]), w = c(() => [
+		replaceTokens: o
+	}), S = c((e) => y?.("listItem", e), [y]), C = c((e) => b("list-style-type", e), [b]), w = l(() => [
 		{
 			value: "none",
-			icon: /* @__PURE__ */ l(u, {}),
+			icon: /* @__PURE__ */ u(d, {}),
 			description: "",
 			active: x === "none"
 		},
 		{
 			value: "disc",
-			icon: /* @__PURE__ */ l(f, {}),
+			icon: /* @__PURE__ */ u(p, {}),
 			description: "",
 			active: x === "disc"
 		},
 		{
 			value: "circle",
-			icon: /* @__PURE__ */ l(d, {}),
+			icon: /* @__PURE__ */ u(f, {}),
 			description: "",
 			active: x === "circle"
 		},
 		{
 			value: "square",
-			icon: /* @__PURE__ */ l(g, {}),
+			icon: /* @__PURE__ */ u(_, {}),
 			description: "",
 			active: x === "square"
 		},
 		{
 			value: "decimal",
-			icon: /* @__PURE__ */ l(m, {}),
+			icon: /* @__PURE__ */ u(h, {}),
 			description: "",
 			active: x === "decimal"
 		},
 		{
 			value: "lower-alpha",
-			icon: /* @__PURE__ */ l(p, {}),
+			icon: /* @__PURE__ */ u(m, {}),
 			description: "",
 			active: x === "lower-alpha"
 		},
 		{
 			value: "lower-roman",
-			icon: /* @__PURE__ */ l(h, {}),
+			icon: /* @__PURE__ */ u(g, {}),
 			description: "",
 			active: x === "lower-roman"
 		}
 	], [x]);
-	return /* @__PURE__ */ l(i, {
-		title: "List Item",
-		dotKeys: _,
+	return /* @__PURE__ */ u(a, {
+		title: i.title,
+		dotKeys: i.dot,
 		isCollapsed: v,
 		onCollapse: S,
-		children: /* @__PURE__ */ l(r, {
-			keys: _,
+		children: /* @__PURE__ */ u(r, {
+			keys: i.dot,
 			label: "Style",
-			children: /* @__PURE__ */ l(n, {
+			children: /* @__PURE__ */ u(n, {
 				onChange: C,
 				type: "iconGroup",
 				items: w

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

@@ -1,104 +1,82 @@
 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 "./OthersScrollbar.mjs";
-import c from "./OthersScrollSnap.mjs";
-import l from "./OthersSvg.mjs";
-import u from "./OthersTable.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/Others/Others.tsx
-var g = /* @__PURE__ */ "pointer-events.user-select.touch-action.resize.appearance.scroll-behavior.overscroll-behavior.scroll-snap-type.scroll-snap-align.scroll-snap-stop.scroll-padding-top.scroll-margin-top.accent-color.caret-color.color-scheme.scrollbar-width.scrollbar-color.outline-width.outline-style.outline-color.outline-offset.border-collapse.border-spacing.table-layout.fill.stroke.stroke-width".split("."), _ = [
-	"touch-action",
-	"resize",
-	"appearance",
-	"scroll-behavior",
-	"overscroll-behavior",
-	"scroll-snap-type",
-	"scroll-snap-align",
-	"scroll-snap-stop",
-	"scroll-padding-top",
-	"scroll-margin-top",
-	"accent-color",
-	"caret-color",
-	"color-scheme",
-	"scrollbar-width",
-	"scrollbar-color",
-	"border-collapse",
-	"border-spacing",
-	"table-layout",
-	"fill",
-	"stroke",
-	"stroke-width"
-], v = d(({ replaceTokens: d = !1, isCollapsed: v = !0, onCollapse: y }) => {
-	let { setValue: b } = f(e), { "pointer-events": x, "user-select": S, "touch-action": C, resize: w, appearance: T, "scroll-behavior": E, "overscroll-behavior": D, "scroll-snap-type": O, "scroll-snap-align": k, "scroll-snap-stop": A, "scroll-padding-top": j, "scroll-margin-top": M, "accent-color": N, "caret-color": P, "color-scheme": F, "scrollbar-width": I, "scrollbar-color": L, "outline-width": R, "outline-style": z, "outline-color": B, "outline-offset": V, "border-collapse": H, "border-spacing": U, "table-layout": W, fill: G, stroke: K, "stroke-width": q } = t({
-		keys: g,
+import { OTHERS_KEYS as n } from "../../categoryKeys.mjs";
+import r from "../../components/CategoryAdvanced/index.mjs";
+import i from "../../components/CategoryContainer/index.mjs";
+import a from "./OthersForm.mjs";
+import o from "./OthersInteraction.mjs";
+import s from "./OthersOutline.mjs";
+import c from "./OthersScrollbar.mjs";
+import l from "./OthersScrollSnap.mjs";
+import u from "./OthersSvg.mjs";
+import d from "./OthersTable.mjs";
+import { memo as f, use as p, useCallback as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+var _ = f(({ replaceTokens: f = !1, isCollapsed: _ = !0, onCollapse: v }) => {
+	let { setValue: y } = p(e), { "pointer-events": b, "user-select": x, "touch-action": S, resize: C, appearance: w, "scroll-behavior": T, "overscroll-behavior": E, "scroll-snap-type": D, "scroll-snap-align": O, "scroll-snap-stop": k, "scroll-padding-top": A, "scroll-margin-top": j, "accent-color": M, "caret-color": N, "color-scheme": P, "scrollbar-width": F, "scrollbar-color": I, "outline-width": L, "outline-style": R, "outline-color": z, "outline-offset": B, "border-collapse": V, "border-spacing": H, "table-layout": U, fill: W, stroke: G, "stroke-width": K } = t({
+		keys: n.dot,
 		asValue: !0,
-		replaceTokens: d
-	}), J = p((e) => y?.("others", e), [y]), Y = p((e) => (t) => b(e, t), [b]);
-	return /* @__PURE__ */ h(r, {
-		title: "Others",
-		dotKeys: g,
-		advancedKeys: _,
-		isCollapsed: v,
-		onCollapse: J,
+		replaceTokens: f
+	}), q = m((e) => v?.("others", e), [v]), J = m((e) => (t) => y(e, t), [y]);
+	return /* @__PURE__ */ g(i, {
+		title: n.title,
+		dotKeys: n.dot,
+		advancedKeys: n.advanced,
+		isCollapsed: _,
+		onCollapse: q,
 		children: [
-			/* @__PURE__ */ m(a, {
-				pointerEvents: x,
-				userSelect: S,
-				touchAction: C,
-				resize: w,
-				appearance: T,
-				scrollBehavior: E,
-				overscrollBehavior: D,
-				onChange: Y
+			/* @__PURE__ */ h(o, {
+				pointerEvents: b,
+				userSelect: x,
+				touchAction: S,
+				resize: C,
+				appearance: w,
+				scrollBehavior: T,
+				overscrollBehavior: E,
+				onChange: J
 			}),
-			/* @__PURE__ */ m(o, {
-				outlineWidth: R,
-				outlineStyle: z,
-				outlineColor: B,
-				outlineOffset: V,
-				onChange: Y
+			/* @__PURE__ */ h(s, {
+				outlineWidth: L,
+				outlineStyle: R,
+				outlineColor: z,
+				outlineOffset: B,
+				onChange: J
 			}),
-			/* @__PURE__ */ h(n, { children: [
-				/* @__PURE__ */ m(s, {
-					scrollbarWidth: I,
-					scrollbarColor: L,
-					onChange: Y
+			/* @__PURE__ */ g(r, { children: [
+				/* @__PURE__ */ h(c, {
+					scrollbarWidth: F,
+					scrollbarColor: I,
+					onChange: J
 				}),
-				/* @__PURE__ */ m(c, {
-					scrollSnapType: O,
-					scrollSnapAlign: k,
-					scrollSnapStop: A,
-					scrollPaddingTop: j,
-					scrollMarginTop: M,
-					onChange: Y
+				/* @__PURE__ */ h(l, {
+					scrollSnapType: D,
+					scrollSnapAlign: O,
+					scrollSnapStop: k,
+					scrollPaddingTop: A,
+					scrollMarginTop: j,
+					onChange: J
 				}),
-				/* @__PURE__ */ m(i, {
-					accentColor: N,
-					caretColor: P,
-					colorScheme: F,
-					onChange: Y
+				/* @__PURE__ */ h(a, {
+					accentColor: M,
+					caretColor: N,
+					colorScheme: P,
+					onChange: J
 				}),
-				/* @__PURE__ */ m(u, {
-					borderCollapse: H,
-					borderSpacing: U,
-					tableLayout: W,
-					onChange: Y
+				/* @__PURE__ */ h(d, {
+					borderCollapse: V,
+					borderSpacing: H,
+					tableLayout: U,
+					onChange: J
 				}),
-				/* @__PURE__ */ m(l, {
-					fill: G,
-					stroke: K,
-					strokeWidth: q,
-					onChange: Y
+				/* @__PURE__ */ h(u, {
+					fill: W,
+					stroke: G,
+					strokeWidth: K,
+					onChange: J
 				})
 			] })
 		]
 	});
 });
 //#endregion
-export { v as default };
+export { _ as default };