@plitzi/sdk-elements 0.38.11 → 0.38.13

package/dist/elements/form/FormControl/FormControl.mjs

@@ -2,91 +2,92 @@ import e from "./declaration.mjs";
 import t from "../../../Element/hocs/withElement.mjs";
 import n from "../../../Element/hooks/useElement.mjs";
 import { RootElement as r } from "../../../Element/RootElement.mjs";
-import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
-import a from "./components/Label.mjs";
-import { isChecked as o } from "./helpers/isChecked.mjs";
-import s from "./hocs/withFieldValue.mjs";
-import c from "./inputs/Checkbox.mjs";
-import l from "./inputs/Hidden.mjs";
-import u from "./inputs/Input.mjs";
-import d from "./inputs/Select.mjs";
-import f from "./inputs/Textarea.mjs";
-import { use as p, useCallback as m, useEffect as h } from "react";
-import g from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { createStoreHook as ee } from "@plitzi/nexus/react";
+import { VISUALLY_HIDDEN as ee } from "./components/visuallyHidden.mjs";
+import i from "./components/Label.mjs";
+import { isChecked as a } from "./helpers/isChecked.mjs";
+import o from "./hocs/withFieldValue.mjs";
+import s from "./inputs/Checkbox.mjs";
+import c from "./inputs/Hidden.mjs";
+import l from "./inputs/Input.mjs";
+import u from "./inputs/Select.mjs";
+import d from "./inputs/Textarea.mjs";
+import { use as f, useCallback as p, useEffect as m } from "react";
+import h from "@plitzi/sdk-shared/hooks/usePlitzi";
+import { createStoreHook as g } from "@plitzi/nexus/react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import y from "clsx";
+import b from "@plitzi/sdk-interactions/InteractionsContext";
 //#region src/elements/form/FormControl/FormControl.tsx
-var b = ({ ref: t, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !1, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
-	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = n(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
-		if (P?.(e), !B) return;
+var x = ({ ref: t, className: o = "", subType: x = "text", name: S = "", label: C = "Label", hideLabel: w = !1, placeholder: T = "", autoComplete: E = !0, autoFocus: D = !1, disabled: O = !1, options: k = [], required: A = !1, maxLength: j = 0, readOnly: M = !1, value: N = "", error: P = "", handleChange: F, handleValidate: I }) => {
+	let { id: L, rootId: R, visible: z, definition: { styleSelectors: B } } = n(), { settings: { previewMode: V } } = h(), { interactionsManager: H } = f(b), { useStore: U } = g(), [W] = U("runtime.sources.form"), G = p((e) => {
+		if (F?.(e), !V) return;
 		let { target: t } = e, n = t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked : t.value;
-		H.interactionTrigger(I, "onChange", {
+		H.interactionTrigger(L, "onChange", {
 			value: n,
-			name: x
+			name: S
 		});
 	}, [
-		P,
-		B,
+		F,
+		V,
 		H,
-		I,
-		x
-	]), K = W?.registerField, q = W?.unregisterField, J = ["checkbox", "switch"].includes(b), Y = b === "hidden", X = E && B && R, Z = C && B, Q = N && B ? `${L}_${I}_error` : void 0, $ = J && /* @__PURE__ */ _(c, {
-		variant: b === "switch" ? "switch" : "checkbox",
-		id: `${L}_${I}`,
-		name: x,
-		checked: o(M),
-		className: z.input,
-		required: k,
-		disabled: D,
+		L,
+		S
+	]), K = W?.registerField, q = W?.unregisterField, J = ["checkbox", "switch"].includes(x), Y = x === "hidden", X = D && V && z, Z = w && V, Q = P && V ? `${R}_${L}_error` : void 0, $ = J && /* @__PURE__ */ _(s, {
+		variant: x === "switch" ? "switch" : "checkbox",
+		id: `${R}_${L}`,
+		name: S,
+		checked: a(N),
+		className: B.input,
+		required: A,
+		disabled: O,
 		onChange: G,
-		onValidate: F,
+		onValidate: I,
 		errorId: Q
 	});
-	return h(() => {
+	return m(() => {
 		if (K && q) return K({
-			name: x,
-			path: x
-		}), () => q(x);
+			name: S,
+			path: S
+		}), () => q(S);
 	}, [
-		x,
+		S,
 		K,
 		q
 	]), /* @__PURE__ */ v(r, {
 		ref: t,
 		interactionTriggers: e.triggers,
 		className: y("plitzi-component__form-control", {
-			"form-control--invalid": N && B,
-			[`plitzi-component__form-control-${b}`]: b
-		}, s),
+			"form-control--invalid": P && V,
+			[`plitzi-component__form-control-${x}`]: x
+		}, o),
 		children: [
-			!J && !Y && S && /* @__PURE__ */ _(a, {
-				targetInput: `${L}_${I}`,
-				previewMode: B,
-				className: z.label,
-				requiredClassName: z.requiredMark,
-				type: b,
-				required: k,
+			!J && !Y && C && /* @__PURE__ */ _(i, {
+				targetInput: `${R}_${L}`,
+				previewMode: V,
+				className: B.label,
+				requiredClassName: B.requiredMark,
+				type: x,
+				required: A,
 				hidden: Z,
-				children: S
+				children: C
 			}),
-			J && S && /* @__PURE__ */ v(a, {
-				targetInput: `${L}_${I}`,
-				previewMode: B,
-				className: z.label,
-				requiredClassName: z.requiredMark,
-				type: b,
-				required: k,
+			J && C && /* @__PURE__ */ v(i, {
+				targetInput: `${R}_${L}`,
+				previewMode: V,
+				className: B.label,
+				requiredClassName: B.requiredMark,
+				type: x,
+				required: A,
 				children: [
 					$,
 					Z && /* @__PURE__ */ _("span", {
-						style: i,
-						children: S
+						style: ee,
+						children: C
 					}),
-					!Z && S
+					!Z && C
 				]
 			}),
-			J && !S && $,
+			J && !C && $,
 			[
 				"text",
 				"number",
@@ -98,69 +99,69 @@ var b = ({ ref: t, className: s = "", subType: b = "text", name: x = "", label:
 				"date",
 				"time",
 				"color"
-			].includes(b) && /* @__PURE__ */ _(u, {
-				id: `${L}_${I}`,
-				name: x,
-				value: M,
-				type: b,
-				className: z.input,
-				fieldClassName: z.field,
-				iconClassName: z.icon,
-				placeholder: w,
-				autoComplete: b !== "password" && T,
+			].includes(x) && /* @__PURE__ */ _(l, {
+				id: `${R}_${L}`,
+				name: S,
+				value: N,
+				type: x,
+				className: B.input,
+				fieldClassName: B.field,
+				iconClassName: B.icon,
+				placeholder: T,
+				autoComplete: x !== "password" && E,
 				autoFocus: X,
-				required: k,
-				maxLength: A,
-				disabled: D,
-				readOnly: j || !B,
+				required: A,
+				maxLength: j,
+				disabled: O,
+				readOnly: M || !V,
 				onChange: G,
-				onValidate: F,
+				onValidate: I,
 				errorId: Q
 			}),
-			b === "hidden" && /* @__PURE__ */ _(l, {
-				id: `${L}_${I}`,
-				name: x,
-				value: M,
-				required: k,
-				disabled: D,
-				previewMode: B
+			x === "hidden" && /* @__PURE__ */ _(c, {
+				id: `${R}_${L}`,
+				name: S,
+				value: N,
+				required: A,
+				disabled: O,
+				previewMode: V
 			}),
-			b === "select" && /* @__PURE__ */ _(d, {
-				id: `${L}_${I}`,
-				name: x,
+			x === "select" && /* @__PURE__ */ _(u, {
+				id: `${R}_${L}`,
+				name: S,
 				onChange: G,
-				onValidate: F,
+				onValidate: I,
 				errorId: Q,
-				value: M,
-				className: z.input,
-				fieldClassName: z.field,
-				placeholder: w,
-				disabled: D,
-				options: O
+				value: N,
+				className: B.input,
+				fieldClassName: B.field,
+				placeholder: T,
+				disabled: O,
+				options: k
 			}),
-			b === "textarea" && /* @__PURE__ */ _(f, {
-				id: `${L}_${I}`,
-				name: x,
-				value: M,
-				className: z.input,
-				placeholder: w,
+			x === "textarea" && /* @__PURE__ */ _(d, {
+				id: `${R}_${L}`,
+				name: S,
+				value: N,
+				className: B.input,
+				placeholder: T,
 				autoFocus: X,
-				required: k,
-				maxLength: A,
-				disabled: D,
-				readOnly: j,
+				required: A,
+				maxLength: j,
+				disabled: O,
+				readOnly: M,
 				onChange: G,
-				onValidate: F,
+				onValidate: I,
 				errorId: Q
 			}),
-			N && /* @__PURE__ */ _("div", {
+			P && /* @__PURE__ */ _("div", {
 				id: Q,
 				role: "alert",
-				className: y("form-control__error-message", z.error),
-				children: N
+				className: y("form-control__error-message", B.error),
+				children: P
 			})
 		]
 	});
-}, x = t(s(b));
+}, S = t(o(x));
 //#endregion
-export { b as FormControl, x as default };
+export { x as FormControl, S as default };

package/dist/elements/form/FormControl/declaration.d.ts

@@ -6,7 +6,7 @@ export type FormControlAttributes = AuthorableAttributes<FormControlProps, 'valu
     /** Read by `withFieldValue`, not by the component: shows the control in its error state while editing. */
     previewError?: boolean;
 };
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "formControl";
     readonly attributeValues: {
         readonly subType: readonly string[];
@@ -50,11 +50,8 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Form Control";
-            readonly type: "formControl";
             readonly description: string;
-            readonly bindings: {};
             readonly styleSelectors: {
-                readonly base: "";
                 readonly label: "";
                 readonly requiredMark: "";
                 readonly input: "";
@@ -62,31 +59,15 @@ declare const declaration: {
                 readonly icon: "";
                 readonly error: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
-            };
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
             readonly canSnippet: false;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "form";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-i-cursor";
         };
         readonly defaultStyle: {
-            readonly name: "Form Control";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -761,7 +742,6 @@ declare const declaration: {
                 };
             };
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<FormControlAttributes>;
+}, FormControlAttributes>;
 export default declaration;

package/dist/elements/form/FormControl/declaration.mjs

@@ -72,6 +72,7 @@ var n = {
 }, u = {
 	height: "100%",
 	width: "100%",
+	"padding-right": "calc(1.15em + 8px)",
 	display: "block",
 	...c,
 	"background-color": "transparent",
@@ -201,41 +202,22 @@ var n = {
 		},
 		definition: {
 			label: "Form Control",
-			type: "formControl",
 			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. Optional unless `required: true`, as an HTML field is: a `requiredMessage` alone requires nothing. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The box is ringed (`2px solid currentColor`) while the field inside has keyboard focus: restyle it with a `focus-within` state on the `input` slot — the box never takes `focus` itself. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
-			bindings: {},
 			styleSelectors: {
-				base: "",
 				label: "",
 				requiredMark: "",
 				input: "",
 				field: "",
 				icon: "",
 				error: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !1,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			}
 		},
+		builder: { canSnippet: !1 },
 		market: {
 			category: "form",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-i-cursor"
 		},
 		defaultStyle: {
-			name: "Form Control",
-			displayMode: "desktop",
 			style: { base: { default: {} } },
 			subTypes: {
 				hidden: m("Form Control Hidden", {}),
@@ -289,8 +271,7 @@ var n = {
 					}
 				}
 			}
-		},
-		settings: {}
+		}
 	}
 });
 //#endregion

package/dist/elements/form/FormControl/hocs/withFieldValue.mjs

@@ -1,6 +1,6 @@
 import { validateField as e } from "../helpers/validateField.mjs";
 import { useCallback as t, useEffect as n, useMemo as r, useState as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import a from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { get as o } from "@plitzi/plitzi-ui/helpers";
 import { createStoreHook as s } from "@plitzi/nexus/react";
 import { getDisplayName as c } from "@plitzi/sdk-shared/helpers/utils";

package/dist/elements/form/FormControl/index.d.ts

@@ -6,11 +6,11 @@ declare const FormControl: {
         market: {
             icon: import('react').JSX.Element;
             category: "form";
-            owner: "Plitzi";
-            verified: true;
-            license: "MIT";
-            website: "https://plitzi.com";
-            backgroundColor: "#4422ee";
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
         };
         attributes: {
             readonly subType: "text";
@@ -38,11 +38,8 @@ declare const FormControl: {
         };
         definition: {
             readonly label: "Form Control";
-            readonly type: "formControl";
             readonly description: string;
-            readonly bindings: {};
             readonly styleSelectors: {
-                readonly base: "";
                 readonly label: "";
                 readonly requiredMark: "";
                 readonly input: "";
@@ -50,22 +47,18 @@ declare const FormControl: {
                 readonly icon: "";
                 readonly error: "";
             };
-            readonly initialState: {
-                readonly visibility: true;
+        } & {
+            type: string;
+            bindings: NonNullable<import('@plitzi/sdk-shared').ElementDefinition["bindings"]>;
+            initialState: Record<string, unknown>;
+            styleSelectors: Record<string, string> & {
+                base: string;
             };
         };
         builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
-            readonly canDragDrop: true;
-            readonly canMove: true;
             readonly canSnippet: false;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
-        };
+        } & Required<import('@plitzi/sdk-shared').PluginBuilder>;
         defaultStyle: {
-            readonly name: "Form Control";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -739,8 +732,11 @@ declare const FormControl: {
                     };
                 };
             };
+        } & {
+            name: string;
+            displayMode: import('@plitzi/sdk-shared').DisplayMode;
         };
-        settings: {};
+        settings: Record<string, string | number | boolean>;
     };
     type: "formControl";
     attributeValues: {

package/dist/elements/internal/LayoutContainer/LayoutContainer.mjs

@@ -3,7 +3,7 @@ import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
 import { boxOf as r, maskFrameOf as i } from "./mask.mjs";
 import { useCallback as a, useEffect as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import s from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { throttle as c } from "@plitzi/plitzi-ui/helpers";
 import { jsx as l } from "react/jsx-runtime";
 import u from "clsx";

package/dist/elements/internal/LayoutContainer/declaration.d.ts

@@ -2,7 +2,7 @@ import { LayoutContainerProps } from './LayoutContainer';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
 export type LayoutContainerAttributes = AuthorableAttributes<LayoutContainerProps>;
-declare const declaration: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "layoutContainer";
     readonly attributeValues: {
         readonly subType: readonly string[];
@@ -13,38 +13,17 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Layout Container";
-            readonly type: "layoutContainer";
             readonly description: "A reusable layout shell (header/footer chrome) shared across pages.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
             readonly canDragDrop: false;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "internal";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-border-all";
         };
         readonly defaultStyle: {
-            readonly name: "Layout Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -52,9 +31,8 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     layout?: string | undefined;
     subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
     layoutContainer?: string | undefined;

package/dist/elements/internal/LayoutContainer/declaration.mjs

@@ -18,38 +18,18 @@ var n = e()({
 		attributes: { subType: "div" },
 		definition: {
 			label: "Layout Container",
-			type: "layoutContainer",
 			description: "A reusable layout shell (header/footer chrome) shared across pages.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !1,
-			canMove: !0,
-			canSnippet: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
+			items: []
 		},
+		builder: { canDragDrop: !1 },
 		market: {
 			category: "internal",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
 			icon: "fa-solid fa-border-all"
 		},
 		defaultStyle: {
-			name: "Layout Container",
-			displayMode: "desktop",
 			style: { base: { default: {} } },
 			subTypes: {}
-		},
-		settings: {}
+		}
 	}
 });
 //#endregion

package/dist/elements/internal/LayoutContainer/index.d.ts

@@ -12,38 +12,17 @@ declare const LayoutContainer: {
         };
         readonly definition: {
             readonly label: "Layout Container";
-            readonly type: "layoutContainer";
             readonly description: "A reusable layout shell (header/footer chrome) shared across pages.";
-            readonly items: readonly [];
-            readonly bindings: {};
-            readonly styleSelectors: {
-                readonly base: "";
-            };
-            readonly initialState: {
-                readonly visibility: true;
-            };
+            readonly items: [];
         };
         readonly builder: {
-            readonly canDelete: true;
-            readonly canSelect: true;
             readonly canDragDrop: false;
-            readonly canMove: true;
-            readonly canSnippet: true;
-            readonly itemsAllowed: readonly [];
-            readonly itemsNotAllowed: readonly [];
         };
         readonly market: {
             readonly category: "internal";
-            readonly owner: "Plitzi";
-            readonly verified: true;
-            readonly license: "MIT";
-            readonly website: "https://plitzi.com";
-            readonly backgroundColor: "#4422ee";
             readonly icon: "fa-solid fa-border-all";
         };
         readonly defaultStyle: {
-            readonly name: "Layout Container";
-            readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
                     readonly default: {};
@@ -51,8 +30,9 @@ declare const LayoutContainer: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     layout?: string | undefined;
     subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;

package/dist/elements/internal/Loading/Settings.d.ts

@@ -0,0 +1,2 @@
+declare const Settings: () => import('react').JSX.Element;
+export default Settings;

package/dist/elements/internal/Loading/Settings.mjs

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/elements/internal/Loading/Settings.tsx
+var t = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-4" });
+//#endregion
+export { t as default };