@plitzi/sdk-style 0.38.10 → 0.38.11

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

@@ -0,0 +1,92 @@
+import { easingGenerics as e } from "../../../../InputEasing/InputEasingHelper.mjs";
+import t from "../../../../InputEasing/InputEasingList.mjs";
+import n from "../../../../InputEasing/index.mjs";
+import { asText as r } from "../../../cssValues.mjs";
+import i from "../../../components/CategoryOption/index.mjs";
+import { bezierCss as a, easingCss as o, easingCurve as s, easingOptions as c } from "./helpers.mjs";
+import { useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/StyleInspector/categories/Effects/Transition/TransitionEasing.tsx
+var h = c(e), g = 1600, _ = ({ value: c, onChange: _ }) => {
+	let [v, y] = f(!1), [b, x] = f(!1), [S, C] = f(0), w = s(c, e), T = h.some((e) => e.value === c);
+	u(() => {
+		if (!b) {
+			C(0);
+			return;
+		}
+		let e = 0, t = performance.now(), n = (r) => {
+			C((r - t) % g / g), e = requestAnimationFrame(n);
+		};
+		return e = requestAnimationFrame(n), () => cancelAnimationFrame(e);
+	}, [b]);
+	let E = l((e) => _(r(e)), [_]), D = l((t) => _(o(t, e)), [_]), O = l((e) => {
+		let [t = 0, n = 0, r = 1, i = 1] = e;
+		_(a([
+			t,
+			n,
+			r,
+			i
+		]));
+	}, [_]), k = l(() => y((e) => !e), []), A = l(() => x((e) => !e), []), j = d(() => `Custom — ${c}`, [c]);
+	return /* @__PURE__ */ m("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-end gap-2",
+				children: [/* @__PURE__ */ p("div", {
+					className: "min-w-0 grow",
+					children: /* @__PURE__ */ m(i, {
+						label: "Easing",
+						type: "select",
+						value: c,
+						onChange: E,
+						children: [!T && /* @__PURE__ */ p("option", {
+							value: c,
+							children: j
+						}), h.map((e) => /* @__PURE__ */ p("option", {
+							value: e.value,
+							children: e.label
+						}, e.value))]
+					})
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					className: "aria-pressed:border-primary-500 aria-pressed:text-primary-600 dark:aria-pressed:text-primary-300 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-200 text-zinc-500 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-100",
+					"aria-pressed": v,
+					title: v ? "Hide the curve" : "Edit the curve",
+					"aria-label": v ? "Hide the curve" : "Edit the curve",
+					onClick: k,
+					children: /* @__PURE__ */ p("i", { className: "fa-solid fa-bezier-curve text-xs" })
+				})]
+			}),
+			v && !w && /* @__PURE__ */ m("p", {
+				className: "m-0 text-[11px] text-zinc-500 dark:text-zinc-400",
+				children: [c, " is not a curve, so there is nothing to drag. Pick a preset to start from one."]
+			}),
+			v && w && /* @__PURE__ */ m("div", {
+				className: "flex flex-col items-center gap-2 rounded-md border border-gray-200 p-2 dark:border-zinc-700",
+				children: [
+					/* @__PURE__ */ p(n, {
+						value: w,
+						progress: S,
+						width: 200,
+						height: 200,
+						handleRadius: 6,
+						onChange: O
+					}),
+					/* @__PURE__ */ m("button", {
+						type: "button",
+						className: "flex cursor-pointer items-center gap-1.5 text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100",
+						onClick: A,
+						children: [/* @__PURE__ */ p("i", { className: b ? "fa-solid fa-pause" : "fa-solid fa-play" }), b ? "Pause preview" : "Preview"]
+					}),
+					/* @__PURE__ */ p(t, {
+						className: "w-full border-r-0",
+						onChange: D
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { _ as default };

package/dist/components/StyleInspector/categories/Effects/Transition/TransitionItem.d.ts

@@ -1,8 +1,8 @@
-import { MouseEvent } from 'react';
 export type TransitionItemProps = {
-    value?: string;
-    onChange?: (value: string) => void;
-    onRemove?: (e: MouseEvent) => void;
+    value: string;
+    onChange: (value: string) => void;
+    onRemove: () => void;
 };
+/** One transition of the list. One the editor cannot read as parts — a token for it — is edited as written. */
 declare const TransitionItem: ({ value, onRemove, onChange }: TransitionItemProps) => import('react').JSX.Element;
 export default TransitionItem;

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

@@ -1,365 +1,84 @@
-import { easingGenerics as e } from "../../../../InputEasing/InputEasingHelper.mjs";
-import t from "../../../../InputEasing/InputEasingList.mjs";
-import n from "../../../../InputEasing/index.mjs";
-import r from "../../../components/InspectorLabel/index.mjs";
-import i from "../../../components/CategoryOption/index.mjs";
-import a from "../../../components/CategorySection/index.mjs";
-import { useCallback as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "@plitzi/plitzi-ui/ContainerFloating";
-import f from "@plitzi/plitzi-ui/Icon";
-import p from "@plitzi/plitzi-ui/Input";
-import m from "@plitzi/plitzi-ui/icons/EffectsTransitionEase";
+import { asText as e } from "../../../cssValues.mjs";
+import t from "../../../components/CategoryOption/index.mjs";
+import n from "../../../components/ValueListItem/index.mjs";
+import { TRANSITION_PROPERTY_GROUPS as r, isListedProperty as i, parseTransition as a, serializeTransition as o, transitionSummary as s } from "./helpers.mjs";
+import c from "./TransitionEasing.mjs";
+import { useCallback as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/StyleInspector/categories/Effects/Transition/TransitionItem.tsx
-var h = ({ value: h = "", onRemove: g, onChange: _ }) => {
-	let [v, y] = c(0), [b, x] = c(void 0), S = () => {
-		if (b) {
-			clearInterval(b), x(void 0), y(0);
-			return;
-		}
-		x(setInterval(() => {
-			y((e) => (e + .005 <= 1 ? e += .005 : e = 0, e));
-		}, 10));
-	}, C = h.split(/ (?![^()]*\))/gim), { property: w = "opacity", duration: T = "0ms", easing: E = "ease", delay: D = "0ms" } = {};
-	C.length === 4 && ([w, T, E, D] = C);
-	let O = s({
-		property: w,
-		duration: T,
-		easing: E,
-		delay: D
-	});
-	O.current = {
-		property: w,
-		duration: T,
-		easing: E,
-		delay: D
-	};
-	let k = o((e) => (t) => {
-		let n = { ...O.current };
-		if (e === "easing" && t.includes(",")) {
-			let r = t.split(",");
-			n[e] = `cubic-bezier(${r[0]}, ${r[1]}, ${r[2]}, ${r[3]})`;
-		} else n[e] = e === "easing" && Array.isArray(t) ? `cubic-bezier(${t[0]}, ${t[1]}, ${t[2]}, ${t[3]})` : t;
-		let { duration: r, delay: i, property: a, easing: o } = n;
-		_?.(`${a} ${r} ${o} ${i}`);
-	}, [_]), A = o((e) => k("easing")(e), [k]), j = [];
-	return j = E in e ? e[E] : E.match(/[0-9.]+/gim), /* @__PURE__ */ u(d, {
-		className: "w-full",
-		closeOnClick: !1,
-		containerTopOffset: 5,
-		children: [/* @__PURE__ */ u(d.Trigger, {
-			className: "flex w-full cursor-pointer items-center justify-between rounded-sm border border-gray-300 bg-white px-2 py-0.5 select-none hover:bg-gray-100 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700/60",
-			children: [/* @__PURE__ */ l("div", {
-				className: "flex items-center",
-				children: `${w} ${T} after ${D}`
-			}), /* @__PURE__ */ l("div", {
-				className: "flex",
-				children: /* @__PURE__ */ l(f, {
-					size: "xs",
-					icon: "fas fa-trash-alt",
-					onClick: g,
-					intent: "danger",
-					title: "Remove"
-				})
-			})]
-		}), /* @__PURE__ */ l(d.Content, {
-			className: "w-[260px]",
-			children: /* @__PURE__ */ u("div", {
-				className: "flex w-full flex-col gap-2 p-2",
-				children: [
-					/* @__PURE__ */ l(a, {
-						label: "Property",
-						children: /* @__PURE__ */ u(i, {
-							onChange: k("property"),
-							type: "select",
-							value: w,
-							children: [
-								/* @__PURE__ */ u("optgroup", {
-									label: "Common",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "opacity",
-											children: "Opacity"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "margin",
-											children: "Margin"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "padding",
-											children: "Padding"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "border",
-											children: "Border"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "transform",
-											children: "Transform"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "filter",
-											children: "Filter"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "flex",
-											children: "Flex"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Background",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "background-color",
-											children: "Background Color"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "background-position",
-											children: "Background Position"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "text-shadow",
-											children: "Text Shadow"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "box-shadow",
-											children: "Box Shadow"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Size",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "width",
-											children: "Width"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "height",
-											children: "Height"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "max-width",
-											children: "Max Width"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "max-height",
-											children: "Max Height"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "min-width",
-											children: "Min Width"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "min-height",
-											children: "Min Height"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Borders",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "border-radius",
-											children: "Border Radius"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "border-color",
-											children: "Border Color"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "border-width",
-											children: "Border Width"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Typography",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "font-color",
-											children: "Font Color"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "font-size",
-											children: "Font Size"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "line-height",
-											children: "Line Height"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "letter-spacing",
-											children: "Letter Spacing"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "text-indent",
-											children: "Text Indent"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "word-spacing",
-											children: "Word Spacing"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Position",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "top",
-											children: "Top"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "left",
-											children: "Left"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "bottom",
-											children: "Bottom"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "right",
-											children: "Right"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "z-index",
-											children: "Z Index"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Margin",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "margin-bottom",
-											children: "Margin Bottom"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "margin-left",
-											children: "Margin Left"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "margin-right",
-											children: "Margin RIght"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "margin-top",
-											children: "Margin Top"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Padding",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "padding-bottom",
-											children: "Padding Bottom"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "padding-left",
-											children: "Padding Left"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "padding-right",
-											children: "Padding Right"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "padding-top",
-											children: "Padding Top"
-										})
-									]
-								}),
-								/* @__PURE__ */ u("optgroup", {
-									label: "Flex",
-									children: [
-										/* @__PURE__ */ l("option", {
-											value: "flex-grow",
-											children: "Flex Grow"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "flex-shrink",
-											children: "Flex Shrink"
-										}),
-										/* @__PURE__ */ l("option", {
-											value: "flex-basis",
-											children: "Flex Basis"
-										})
-									]
-								}),
-								/* @__PURE__ */ l("optgroup", {
-									label: "Advanced",
-									children: /* @__PURE__ */ l("option", {
-										value: "all",
-										children: "All Properties"
-									})
-								})
-							]
-						})
-					}),
-					/* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(i, {
-						label: "Duration",
-						value: T,
-						onChange: k("duration"),
-						type: "metric",
-						units: [{
-							label: "MS",
-							value: "ms"
-						}],
-						min: 0
-					}), /* @__PURE__ */ l(i, {
-						label: "Delay",
-						value: D,
-						onChange: k("delay"),
-						type: "metric",
-						units: [{
-							label: "MS",
-							value: "ms"
-						}],
-						min: 0
-					})] }),
-					/* @__PURE__ */ u(a, {
-						label: "Easing",
-						children: [/* @__PURE__ */ u(d, {
-							containerLeftOffset: -92,
-							containerTopOffset: 154,
-							closeOnClick: !1,
-							children: [/* @__PURE__ */ l(d.Trigger, { children: /* @__PURE__ */ l(f, {
-								className: "rounded-sm border border-gray-300 p-0.5 dark:border-zinc-600",
-								size: "xl",
-								children: /* @__PURE__ */ l(m, {})
-							}) }), /* @__PURE__ */ u(d.Content, {
-								className: "flex h-[456px] w-[260px] flex-col items-center overflow-y-auto",
-								children: [/* @__PURE__ */ l(t, {
-									className: "w-[260px]",
-									onChange: k("easing")
-								}), /* @__PURE__ */ u("div", {
-									className: "m-2 flex flex-col",
-									children: [/* @__PURE__ */ u("div", {
-										className: "flex",
-										onClick: S,
-										children: [/* @__PURE__ */ l(f, { icon: b ? "fas fa-pause" : "fas fa-play" }), /* @__PURE__ */ l(r, { children: b ? "Pause" : "Play" })]
-									}), /* @__PURE__ */ l(n, {
-										value: j,
-										progress: v,
-										height: 200,
-										width: 200,
-										handleRadius: 6
-									})]
-								})]
-							})]
-						}), /* @__PURE__ */ l(p, {
-							className: "w-full grow",
-							type: "text",
-							size: "xs",
-							value: j.toString(),
-							readOnly: !0,
-							onChange: A
-						})]
+var m = [{
+	label: "MS",
+	value: "ms"
+}, {
+	label: "S",
+	value: "s"
+}], h = ({ value: h, onRemove: g, onChange: _ }) => {
+	let v = a(h), y = u(v);
+	y.current = v;
+	let b = l((t) => (n) => {
+		let r = y.current;
+		r && _(o({
+			...r,
+			[t]: e(n)
+		}));
+	}, [_]), x = l((e) => b("easing")(e), [b]), S = l((t) => _(e(t)), [_]), C = v ? s(v) : h;
+	return /* @__PURE__ */ p(n, {
+		summary: C,
+		title: "Transition",
+		removeLabel: "Remove transition",
+		onRemove: g,
+		children: [
+			!v && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(t, {
+				label: "Value",
+				type: "input",
+				value: h,
+				onChange: S
+			}), /* @__PURE__ */ f("p", {
+				className: "m-0 text-[11px] text-zinc-500 dark:text-zinc-400",
+				children: "Not a single transition the editor can split into parts (a token, for one), so it is edited as written."
+			})] }),
+			v && /* @__PURE__ */ p(t, {
+				label: "Property",
+				type: "select",
+				value: v.property,
+				onChange: b("property"),
+				children: [!i(v.property) && /* @__PURE__ */ f("optgroup", {
+					label: "Current",
+					children: /* @__PURE__ */ f("option", {
+						value: v.property,
+						children: v.property
 					})
-				]
+				}), r.map((e) => /* @__PURE__ */ f("optgroup", {
+					label: e.label,
+					children: e.options.map((e) => /* @__PURE__ */ f("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				}, e.label))]
+			}),
+			v && /* @__PURE__ */ p("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [/* @__PURE__ */ f(t, {
+					label: "Duration",
+					type: "metric",
+					value: v.duration,
+					units: m,
+					min: 0,
+					onChange: b("duration")
+				}), /* @__PURE__ */ f(t, {
+					label: "Delay",
+					type: "metric",
+					value: v.delay,
+					units: m,
+					min: -Infinity,
+					onChange: b("delay")
+				})]
+			}),
+			v && /* @__PURE__ */ f(c, {
+				value: v.easing,
+				onChange: x
 			})
-		})]
+		]
 	});
 };
 //#endregion

package/dist/components/StyleInspector/categories/Effects/Transition/helpers.d.ts

@@ -0,0 +1,39 @@
+/** One transition of a `transition` list, its parts named. */
+export type TransitionValue = {
+    property: string;
+    duration: string;
+    easing: string;
+    delay: string;
+};
+export declare const DEFAULT_TRANSITION: TransitionValue;
+/**
+ * A transition as CSS allows it to be written: the parts in any order, any of them left out — the first time is the
+ * duration and the second the delay, an easing keyword or function is the easing, and what is left is the property.
+ * Anything else (a token for the whole transition) answers `undefined` and is kept as text.
+ */
+export declare const parseTransition: (value: string) => TransitionValue | undefined;
+/** How a row names a transition: what it animates and for how long, and its delay when it has one. */
+export declare const transitionSummary: ({ property, duration, delay }: TransitionValue) => string;
+export declare const serializeTransition: ({ property, duration, easing, delay }: TransitionValue) => string;
+type Bezier = [number, number, number, number];
+export declare const bezierCss: ([x1, y1, x2, y2]: Bezier) => string;
+/**
+ * An easing preset as CSS can read it. The presets' own names (`easeInQuad`) are not CSS — written as they were, they
+ * made the browser drop the whole `transition` — so only CSS's five keywords stay as words.
+ */
+export declare const easingCss: (name: string, presets: Record<string, Bezier>) => string;
+export type EasingOption = {
+    label: string;
+    value: string;
+};
+/** Every preset as the easing picker offers it: its name for a person, its value for the stylesheet. */
+export declare const easingOptions: (presets: Record<string, Bezier>) => EasingOption[];
+/** The curve an easing draws, for the editor — `undefined` for one that is not a curve (`steps(4)`). */
+export declare const easingCurve: (easing: string, presets: Record<string, Bezier>) => Bezier | undefined;
+/** The properties the picker offers, grouped. One a transition names that is not here is offered on its own. */
+export declare const TRANSITION_PROPERTY_GROUPS: {
+    label: string;
+    options: EasingOption[];
+}[];
+export declare const isListedProperty: (property: string) => boolean;
+export {};