@plitzi/sdk-style 0.30.19

package/dist/components/InputEasing/InputEasingHelper.mjs

@@ -0,0 +1,179 @@
+//#region src/components/InputEasing/InputEasingHelper.ts
+var e = {
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	],
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	"ease-in": [
+		.42,
+		0,
+		1,
+		1
+	],
+	"ease-out": [
+		0,
+		0,
+		.58,
+		1
+	],
+	"ease-in-out": [
+		.42,
+		0,
+		.58,
+		1
+	],
+	easeInQuad: [
+		.11,
+		0,
+		.5,
+		0
+	],
+	easeInCubic: [
+		.32,
+		0,
+		.67,
+		0
+	],
+	easeInQuart: [
+		.5,
+		0,
+		.75,
+		0
+	],
+	easeInQuint: [
+		.64,
+		0,
+		.78,
+		0
+	],
+	easeInSine: [
+		.12,
+		0,
+		.39,
+		0
+	],
+	easeInExpo: [
+		.7,
+		0,
+		.84,
+		0
+	],
+	easeInCirc: [
+		.55,
+		0,
+		1,
+		.45
+	],
+	easeInBack: [
+		.36,
+		0,
+		.66,
+		-.56
+	],
+	easeOutQuad: [
+		.5,
+		1,
+		.89,
+		1
+	],
+	easeOutCubic: [
+		.33,
+		1,
+		.68,
+		1
+	],
+	easeOutQuart: [
+		.25,
+		1,
+		.5,
+		1
+	],
+	easeOutQuint: [
+		.22,
+		1,
+		.36,
+		1
+	],
+	easeOutSine: [
+		.61,
+		1,
+		.88,
+		1
+	],
+	easeOutExpo: [
+		.16,
+		1,
+		.3,
+		1
+	],
+	easeOutCirc: [
+		0,
+		.55,
+		.45,
+		1
+	],
+	easeOutBack: [
+		.34,
+		1.56,
+		.64,
+		1
+	],
+	easeInOutQuad: [
+		.45,
+		0,
+		.55,
+		1
+	],
+	easeInOutCubic: [
+		.65,
+		0,
+		.35,
+		1
+	],
+	easeInOutQuart: [
+		.76,
+		0,
+		.24,
+		1
+	],
+	easeInOutQuint: [
+		.83,
+		0,
+		.17,
+		1
+	],
+	easeInOutSine: [
+		.37,
+		0,
+		.63,
+		1
+	],
+	easeInOutExpo: [
+		.87,
+		0,
+		.13,
+		1
+	],
+	easeInOutCirc: [
+		.85,
+		0,
+		.15,
+		1
+	],
+	easeInOutBack: [
+		.68,
+		-.6,
+		.32,
+		1.6
+	]
+};
+//#endregion
+export { e as easingGenerics };

package/dist/components/InputEasing/InputEasingList.d.ts

@@ -0,0 +1,6 @@
+export type InputEasingListProps = {
+    className?: string;
+    onChange?: (easing: string) => void;
+};
+declare const InputEasingList: ({ className, onChange }: InputEasingListProps) => import("react/jsx-runtime").JSX.Element;
+export default InputEasingList;

package/dist/components/InputEasing/InputEasingList.mjs

@@ -0,0 +1,291 @@
+import e from "./InputEasingButton.mjs";
+import t from "clsx";
+import { useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/InputEasing/InputEasingList.tsx
+var a = ({ className: a = "", onChange: o }) => {
+	let s = n((e) => () => o?.(e), [o]);
+	return /* @__PURE__ */ i("div", {
+		className: t("flex flex-col border-r border-gray-300", a),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "bg-blue-400 p-1 text-xs text-white",
+					children: "Default"
+				}), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap",
+					children: [
+						/* @__PURE__ */ r(e, {
+							title: "Linear",
+							onClick: s("linear"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C22.5,7.5 7.5,22.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease",
+							onClick: s("ease"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C7.5,0 7.5,27 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease-in",
+							onClick: s("ease-in"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C30,0 12.6,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease-out",
+							onClick: s("ease-out"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C17.4,0 0,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease-in-out",
+							onClick: s("ease-in-out"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C17.4,0 12.6,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "bg-blue-400 p-1 text-xs text-white",
+					children: "Ease In"
+				}), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap",
+					children: [
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Quad",
+							onClick: s("easeInQuad"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C20.400000000000002,14.1 16.5,27.45 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Cubic",
+							onClick: s("easeInCubic"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C20.25,24.3 16.5,28.35 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Quart",
+							onClick: s("easeInQuart"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C25.65,28.2 22.65,28.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Quint",
+							onClick: s("easeInQuint"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C25.65,28.2 22.65,28.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Sine",
+							onClick: s("easeInSine"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C22.35,8.55 14.1,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Expo",
+							onClick: s("easeInExpo"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C23.85,28.95 28.5,28.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Circ",
+							onClick: s("easeInCirc"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C29.4,19.95 18,28.8 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Back",
+							onClick: s("easeInBack"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C22.05,28.65 18,38.4 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "bg-blue-400 p-1 text-xs text-white",
+					children: "Ease Out"
+				}), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap",
+					children: [
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Quad",
+							onClick: s("easeOutQuad"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C13.5,1.8000000000000007 7.5,16.2 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Cubic",
+							onClick: s("easeOutCubic"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C10.649999999999999,0 6.45,11.7 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Quart",
+							onClick: s("easeOutQuart"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C13.2,0 4.95,4.800000000000001 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Quint",
+							onClick: s("easeOutQuint"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C9.6,0 6.9,0 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Sine",
+							onClick: s("easeOutSine"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C16.95,0 11.700000000000001,12.75 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Expo",
+							onClick: s("easeOutExpo"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C6.6,0 5.7,0 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Circ",
+							onClick: s("easeOutCirc"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C4.95,0 2.25,5.400000000000002 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease Out Back",
+							onClick: s("easeOutBack"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C9.6,-8.25 5.25,3.4499999999999993 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ r("div", {
+					className: "bg-blue-400 p-1 text-xs text-white",
+					children: "Ease In Out"
+				}), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap",
+					children: [
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Quad",
+							onClick: s("easeInOutQuad"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C15.450000000000001,1.3500000000000014 13.65,29.1 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Cubic",
+							onClick: s("easeInOutCubic"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C10.649999999999999,0 19.35,28.65 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Quart",
+							onClick: s("easeInOutQuart"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C5.25,0 23.1,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Quint",
+							onClick: s("easeInOutQuint"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C2.1,0 25.8,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Sine",
+							onClick: s("easeInOutSine"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C16.5,1.5 13.35,28.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Expo",
+							onClick: s("easeInOutExpo"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C0,0 30,30 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Circ",
+							onClick: s("easeInOutCirc"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C4.5,4.199999999999999 23.55,25.95 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						}),
+						/* @__PURE__ */ r(e, {
+							title: "Ease In Out Back",
+							onClick: s("easeInOutBack"),
+							children: /* @__PURE__ */ r("path", {
+								d: "M30,0 C7.95,-16.5 20.400000000000002,46.5 0,30",
+								className: "fill-transparent stroke-current stroke-2"
+							})
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/InputEasing/Progress.d.ts

@@ -0,0 +1,10 @@
+export type ProgressProps = {
+    progress?: number;
+    xFrom?: number;
+    xTo?: number;
+    yFrom?: number;
+    yTo?: number;
+    value: [number, number, number, number];
+};
+declare const Progress: ({ progress, xFrom, xTo, yFrom, yTo, value }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default Progress;

package/dist/components/InputEasing/Progress.mjs

@@ -0,0 +1,15 @@
+import e from "./BezierEasing.mjs";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/InputEasing/Progress.tsx
+var r = ({ progress: r = 0, xFrom: i = 0, xTo: a = 0, yFrom: o = 0, yTo: s = 0, value: c }) => {
+	let l = t(() => e(...c), [c]), u = (e, t, n) => e * (1 - n) + t * n, d = (e) => Math.round(u(i, a, e)), f = (e) => Math.round(u(o, s, e));
+	if (!r) return /* @__PURE__ */ n("path", {});
+	let p = d(0), m = f(0), h = d(r), g = f(l ? l(r) : 0);
+	return /* @__PURE__ */ n("path", {
+		className: "fill-transparent stroke-blue-400 stroke-1",
+		d: `M${h},${m} L${h},${g} L${p},${g}`
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/InputEasing/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InputEasing } from './InputEasing';
+export * from './InputEasing';
+export default InputEasing;

package/dist/components/InputEasing/index.mjs

@@ -0,0 +1,5 @@
+import e from "./InputEasing.mjs";
+//#region src/components/InputEasing/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Selector/Selector.d.ts

@@ -0,0 +1,16 @@
+import { StyleItem } from '@plitzi/sdk-shared';
+export type SelectorValue = Pick<StyleItem, 'name' | 'type'>;
+export type SelectorProps = {
+    className?: string;
+    value?: string;
+    selectors?: Record<string, StyleItem>;
+    selector?: Pick<StyleItem, 'name' | 'type'>;
+    componentType?: string;
+    disabled?: boolean;
+    onSelectorSelected?: (selector?: SelectorValue) => void;
+    onAdd?: (selector: SelectorValue, isDuplicated: boolean, originalSelector?: SelectorValue) => void;
+    onChange?: (value: string) => void;
+    onRemove?: (selector: SelectorValue) => void;
+};
+declare const _default: import('react').MemoExoticComponent<({ className, value, selectors, selector: selectorProp, componentType, disabled, onChange, onSelectorSelected, onAdd, onRemove }: SelectorProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Selector/Selector.mjs

@@ -0,0 +1,171 @@
+import { selectorFormatter as e } from "./SelectorHelper.mjs";
+import t from "./SelectorItem/index.mjs";
+import n from "./SelectorSuggestions/index.mjs";
+import r from "../StyleManager/index.mjs";
+import { get as i, omit as a, pick as o } from "@plitzi/plitzi-ui/helpers";
+import s from "clsx";
+import { memo as c, useCallback as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h, { useFloating as g } from "@plitzi/plitzi-ui/ContainerFloating";
+import _ from "@plitzi/plitzi-ui/Button";
+import { usePopup as v } from "@plitzi/plitzi-ui/Popup";
+var y = c(({ className: c = "", value: y = "", selectors: b, selector: x, componentType: S, disabled: C = !1, onChange: w, onSelectorSelected: T, onAdd: E, onRemove: D }) => {
+	let O = d(null), [k, A] = f(""), [j, M, , N, P] = g({ disabled: C }), { existsPopup: F, addPopup: I } = v("floating"), L = u(() => Object.values(b ?? {}).find((e) => e.type === "element" && e.componentType === S), [S, b]), R = u(() => Object.values(o(b ?? {}, y.split(" "))).map((e) => o(e, ["name", "type"])), [b, y]), z = u(() => Object.values(a(b ?? {}, y.split(" "))), [b, y]), B = l((e) => {
+		M(e.target.value.length > 0), A(e.target.value);
+	}, [M]), V = l(() => {
+		O.current?.focus(), M(k.length > 0);
+	}, [
+		O,
+		k,
+		M
+	]), H = l((e) => T?.(e), [T]), U = l((e) => (t, n = !0) => {
+		let r = [...R.filter((t, n) => n !== e), t].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+		E?.(t, !1), w?.(r), n && T?.(t);
+	}, [
+		R,
+		E,
+		w,
+		T
+	]), W = l((e) => (t, n) => {
+		switch (t) {
+			case "remove":
+			case "delete": {
+				let n = R.filter((t, n) => n !== e), r = n.reduce((e, t) => `${e} ${t.name}`, "").trim();
+				x && R[e].name === x.name && T?.(i(n, "0")), w?.(r), t === "delete" && D?.(R[e]);
+				break;
+			}
+			case "duplicate": {
+				if (!n) break;
+				let t = [...R, n].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+				E?.(n, !0, i(R, `${e}`)), w?.(t);
+				break;
+			}
+			default: break;
+		}
+	}, [
+		R,
+		x,
+		w,
+		T,
+		E,
+		D
+	]), G = l((t) => {
+		switch (t.key) {
+			case "Enter": {
+				let { value: n } = t.target;
+				if (n !== "" && !R.find((e) => e.name === n)) {
+					A("");
+					let r = {
+						name: e(n),
+						type: "class"
+					}, i = [...R, r].filter((e) => !!e.name).reduce((e, t) => `${e} ${t.name}`, "").trim();
+					E?.(r, !1), w?.(i), M(!1), t.target.blur(), T?.(r);
+				}
+				setTimeout(() => {
+					O.current?.focus();
+				}, 0);
+				break;
+			}
+			case "ArrowUp":
+				M(!1);
+				break;
+			case "ArrowDown":
+				M(!0);
+				break;
+			case "Escape":
+				t.stopPropagation(), A(""), t.target.blur();
+				break;
+			default: break;
+		}
+	}, [
+		R,
+		E,
+		w,
+		T,
+		M
+	]), K = l((e) => {
+		setTimeout(() => A(""), 0), M(!1);
+		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
+		w?.(t), T?.(e);
+	}, [
+		R,
+		w,
+		T,
+		M
+	]), q = l((e) => {
+		setTimeout(() => A(""), 0), M(!1);
+		let t = [...R, e].reduce((e, t) => `${e} ${t.name}`, "").trim();
+		w?.(t), E?.(e, !1), T?.(e);
+	}, [
+		R,
+		w,
+		E,
+		T,
+		M
+	]), J = l((e) => {
+		e.preventDefault(), e.stopPropagation(), F("styleManager") || I("styleManager", /* @__PURE__ */ p(r, {}), {
+			icon: /* @__PURE__ */ p("i", { className: "fas fa-swatchbook text-base" }),
+			title: "Style Manager",
+			resizeHandles: ["se"],
+			allowLeftSide: !0,
+			allowRightSide: !0,
+			placement: "floating",
+			width: 600
+		});
+	}, [I, F]), Y = u(() => ({ width: P?.width }), [P]), X = L ? [L, ...R] : R;
+	return /* @__PURE__ */ m(h, {
+		ref: N,
+		className: "w-full",
+		open: j,
+		children: [/* @__PURE__ */ p(h.Trigger, {
+			className: "w-full",
+			children: /* @__PURE__ */ m("div", {
+				className: s("bg-grayviolet-200 relative flex flex-wrap gap-1 rounded-sm p-1 dark:bg-zinc-800", c, {
+					"pointer-events-none cursor-not-allowed bg-gray-100 dark:bg-zinc-900": C,
+					"cursor-pointer": !C
+				}),
+				onClick: V,
+				onKeyDown: G,
+				children: [
+					/* @__PURE__ */ p(_, {
+						intent: "secondary",
+						size: "custom",
+						onClick: J,
+						className: "h-7 w-7 rounded-sm bg-white dark:bg-zinc-700 dark:text-zinc-200",
+						title: "Style Manager",
+						children: /* @__PURE__ */ p(_.Icon, { icon: "fas fa-swatchbook" })
+					}),
+					X.map((e, n) => /* @__PURE__ */ p(t, {
+						selector: e.name,
+						type: e.type,
+						editable: e.type !== "element",
+						active: e.name === x?.name.replace(/:.*/, ""),
+						onAction: W(L ? n - 1 : n),
+						onClick: H,
+						onChange: U(L ? n - 1 : n)
+					}, `${n}_${e.name}`)),
+					/* @__PURE__ */ p("input", {
+						ref: O,
+						className: "flex min-h-0 w-0 border-none bg-transparent px-1 py-0 text-xs text-inherit outline-hidden focus:min-w-[50px] focus:grow focus:ring-transparent",
+						autoComplete: "off",
+						autoCorrect: "off",
+						autoCapitalize: "off",
+						spellCheck: "false",
+						value: k,
+						onChange: B
+					})
+				]
+			})
+		}), /* @__PURE__ */ p(h.Content, {
+			style: Y,
+			children: /* @__PURE__ */ p(n, {
+				selector: k,
+				selectors: z,
+				onSelect: K,
+				onCreate: q
+			})
+		})]
+	});
+});
+//#endregion
+export { y as default };

package/dist/components/Selector/SelectorHelper.d.ts

@@ -0,0 +1 @@
+export declare const selectorFormatter: (selector: string) => string;