@plitzi/sdk-elements 0.33.2 → 0.34.1

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

@@ -1,193 +1,17 @@
-import e from "./FormControl.mjs";
-import { jsx as t } from "react/jsx-runtime";
-import { omit as n } from "@plitzi/plitzi-ui/helpers/lodash";
+import e from "./declaration.mjs";
+import t from "./FormControl.mjs";
+import { jsx as n } from "react/jsx-runtime";
 import r from "@plitzi/plitzi-ui/icons/Form";
 //#region src/elements/form/FormControl/index.tsx
-var i = {
-	width: "100%",
-	display: "flex",
-	"align-items": "center",
-	"border-right-color": "#6f7780",
-	"border-right-style": "solid",
-	"border-right-width": "1px",
-	"border-top-right-radius": "4px",
-	"border-bottom-color": "#6f7780",
-	"border-bottom-style": "solid",
-	"border-bottom-width": "1px",
-	"border-bottom-right-radius": "4px",
-	"border-bottom-left-radius": "4px",
-	"border-top-left-radius": "4px",
-	"border-left-color": "#6f7780",
-	"border-left-style": "solid",
-	"border-left-width": "1px",
-	"border-top-color": "#6f7780",
-	"border-top-style": "solid",
-	"border-top-width": "1px",
-	"user-select": "none",
-	"font-size": "14px",
-	"padding-left": "16px",
-	"padding-right": "16px",
-	"padding-top": "8px",
-	"padding-bottom": "8px",
-	"line-height": "20px",
-	outline: "none",
-	position: "relative"
-}, a = {
-	display: "flex",
-	cursor: "pointer",
-	"margin-bottom": "4px",
-	"font-weight": "600",
-	"font-size": "14px",
-	"line-height": "18px",
-	color: "#6b7280",
-	"user-select": "none"
-}, o = {
-	display: "block",
-	color: "red",
-	"margin-top": "4px"
-}, s = Object.assign(e, {
-	type: "formControl",
+var i = Object.assign(t, {
+	...e,
 	content: {
-		attributes: {
-			subType: "text",
-			name: "",
-			label: "Label",
-			placeholder: "",
-			defaultValue: "",
-			autoComplete: !0,
-			disabled: !1,
-			options: [],
-			required: !0,
-			readOnly: !1
-		},
-		definition: {
-			label: "Form Control",
-			type: "formControl",
-			description: "",
-			bindings: {},
-			styleSelectors: {
-				base: "",
-				label: "",
-				input: "",
-				error: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !1,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
+		...e.content,
 		market: {
-			category: "form",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: /* @__PURE__ */ t(r, {})
-		},
-		defaultStyle: {
-			name: "Form Control",
-			displayMode: "desktop",
-			style: { base: { default: {} } },
-			subTypes: {
-				hidden: {
-					name: "Form Control Hidden",
-					displayMode: "desktop",
-					style: {
-						base: {},
-						input: { default: {} },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				text: {
-					name: "Form Control Text",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: i },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				password: {
-					name: "Form Control Password",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: i },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				number: {
-					name: "Form Control Number",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: i },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				email: {
-					name: "Form Control Email",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: i },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				textarea: {
-					name: "Form Control Textarea",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: i },
-						label: { default: a },
-						error: { default: o }
-					}
-				},
-				checkbox: {
-					name: "Form Control Checkbox",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: {
-							"margin-top": "0px",
-							"margin-bottom": "0px",
-							"margin-left": "0px",
-							"margin-right": "4px"
-						} },
-						label: { default: n(a, ["margin-bottom"]) },
-						error: { default: o }
-					}
-				},
-				select: {
-					name: "Form Control Select",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: {
-							...i,
-							cursor: "pointer"
-						} },
-						label: a,
-						error: { default: o }
-					}
-				}
-			}
-		},
-		settings: {}
+			...e.content.market,
+			icon: /* @__PURE__ */ n(r, {})
+		}
 	}
 });
 //#endregion
-export { s as default };
+export { i as default };

package/dist/elements/form/FormControl/inputs/Input.d.ts

@@ -7,10 +7,12 @@ export type InputProps = {
     type?: string;
     autoComplete?: boolean;
     required?: boolean;
+    /** `0` for none. The one rule the browser enforces itself, and by the kindest means: it stops the typing. */
+    maxLength?: number;
     disabled?: boolean;
     readOnly?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onValidate?: () => void;
 };
-declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, required, disabled, readOnly, onChange, onValidate }: InputProps) => import("react").JSX.Element;
+declare const Input: ({ className, id, name, placeholder, value, type, autoComplete, required, maxLength, disabled, readOnly, onChange, onValidate }: InputProps) => import("react").JSX.Element;
 export default Input;

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

@@ -2,37 +2,38 @@ import { useCallback as e, useRef as t, useState as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "clsx";
 //#region src/elements/form/FormControl/inputs/Input.tsx
-var o = ({ className: o = "", id: s = "", name: c = "", placeholder: l = "", value: u = "", type: d = "text", autoComplete: f = !1, required: p = !0, disabled: m = !1, readOnly: h = !1, onChange: g, onValidate: _ }) => {
-	let [v, y] = n(!1), b = t(null), x = e(() => y((e) => !e), [y]), S = e(() => {
-		b.current?.focus();
-	}, [b]), C = e(() => _?.(), [_]);
+var o = ({ className: o = "", id: s = "", name: c = "", placeholder: l = "", value: u = "", type: d = "text", autoComplete: f = !1, required: p = !0, maxLength: m = 0, disabled: h = !1, readOnly: g = !1, onChange: _, onValidate: v }) => {
+	let [y, b] = n(!1), x = t(null), S = e(() => b((e) => !e), [b]), C = e(() => {
+		x.current?.focus();
+	}, [x]), w = e(() => v?.(), [v]);
 	return /* @__PURE__ */ i("div", {
 		className: a("form-control__input-container", o),
-		onClick: S,
+		onClick: C,
 		children: [
 			/* @__PURE__ */ r("input", {
-				ref: b,
+				ref: x,
 				className: "input-container__input",
 				id: s,
 				name: c,
-				type: d === "password" && v ? "text" : d,
+				type: d === "password" && y ? "text" : d,
 				placeholder: l,
 				value: u,
 				required: p,
+				maxLength: m > 0 ? m : void 0,
 				autoComplete: f ? "on" : "off",
-				disabled: m,
-				readOnly: h,
-				onChange: g,
-				onBlur: C
+				disabled: h,
+				readOnly: g,
+				onChange: _,
+				onBlur: w
 			}),
-			d === "password" && !v && /* @__PURE__ */ r("div", {
+			d === "password" && !y && /* @__PURE__ */ r("div", {
 				className: "form-input__icon",
-				onClick: x,
+				onClick: S,
 				children: /* @__PURE__ */ r("i", { className: "fa-solid fa-eye" })
 			}),
-			d === "password" && v && /* @__PURE__ */ r("div", {
+			d === "password" && y && /* @__PURE__ */ r("div", {
 				className: "form-input__icon",
-				onClick: x,
+				onClick: S,
 				children: /* @__PURE__ */ r("i", { className: "fa-solid fa-eye-slash" })
 			})
 		]

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

@@ -7,15 +7,22 @@ var o = ({ id: o = "", name: s, options: c = [], placeholder: l = "", value: u =
 		h.current?.click();
 	}, [h]), _ = e((e) => {
 		e.stopPropagation();
-	}, []), v = e(() => m?.(), [m]), y = t(() => Array.isArray(c) ? c.map((e) => typeof e == "string" ? {
-		value: e,
-		label: e
-	} : typeof e == "object" && (!e.value || !e.label) ? (e = e.value ?? e.label ?? "", {
-		value: e,
-		label: e
-	}) : {
-		value: e.value ?? "",
-		label: e.label ?? ""
+	}, []), v = e(() => m?.(), [m]), y = t(() => Array.isArray(c) ? c.map((e) => {
+		if (typeof e == "string") return {
+			value: e,
+			label: e
+		};
+		if (e.value === void 0 || e.label === void 0) {
+			let t = e.value ?? e.label ?? "";
+			return {
+				value: t,
+				label: t
+			};
+		}
+		return {
+			value: e.value,
+			label: e.label
+		};
 	}) : [], [c]);
 	return /* @__PURE__ */ r("div", {
 		className: a("form-control__select-container", d),

package/dist/elements/form/FormControl/inputs/Textarea.d.ts

@@ -6,10 +6,12 @@ export type TextareaProps = {
     placeholder?: string;
     value?: string;
     required?: boolean;
+    /** `0` for none. */
+    maxLength?: number;
     disabled?: boolean;
     readOnly?: boolean;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     onValidate?: () => void;
 };
-declare const Textarea: ({ className, id, name, placeholder, value, required, disabled, readOnly, onChange, onValidate }: TextareaProps) => import("react").JSX.Element;
+declare const Textarea: ({ className, id, name, placeholder, value, required, maxLength, disabled, readOnly, onChange, onValidate }: TextareaProps) => import("react").JSX.Element;
 export default Textarea;

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

@@ -2,23 +2,24 @@ import { useCallback as e, useRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 import r from "clsx";
 //#region src/elements/form/FormControl/inputs/Textarea.tsx
-var i = ({ className: i = "", id: a = "", name: o = "", placeholder: s = "", value: c = "", required: l = !0, disabled: u = !1, readOnly: d = !1, onChange: f, onValidate: p }) => {
-	let m = t(null), h = e((e) => {
+var i = ({ className: i = "", id: a = "", name: o = "", placeholder: s = "", value: c = "", required: l = !0, maxLength: u = 0, disabled: d = !1, readOnly: f = !1, onChange: p, onValidate: m }) => {
+	let h = t(null), g = e((e) => {
 		e.stopPropagation();
-	}, []), g = e(() => p?.(), [p]);
+	}, []), _ = e(() => m?.(), [m]);
 	return /* @__PURE__ */ n("textarea", {
-		ref: m,
+		ref: h,
 		className: r("form-control__textarea-container", i),
 		id: a,
 		name: o,
 		placeholder: s,
 		value: c,
-		readOnly: d,
+		readOnly: f,
 		required: l,
-		disabled: u,
-		onChange: f,
-		onBlur: g,
-		onClick: h
+		maxLength: u > 0 ? u : void 0,
+		disabled: d,
+		onChange: p,
+		onBlur: _,
+		onClick: g
 	});
 };
 //#endregion

package/dist/elements/index.d.ts

@@ -11,6 +11,7 @@ import { default as Markdown } from './basic/Markdown';
 import { default as Paragraph } from './basic/Paragraph';
 import { default as RichText } from './basic/RichText';
 import { default as Text } from './basic/Text';
+import { default as ThemeToggle } from './basic/ThemeToggle';
 import { default as Form } from './form/Form';
 import { default as FormControl } from './form/FormControl';
 import { default as LayoutContainer } from './internal/LayoutContainer';
@@ -40,6 +41,7 @@ export * from './basic/Markdown';
 export * from './basic/Paragraph';
 export * from './basic/RichText';
 export * from './basic/Text';
+export * from './basic/ThemeToggle';
 export * from './form/Form';
 export * from './form/FormControl';
 export * from './internal/LayoutContainer';
@@ -55,4 +57,4 @@ export * from './structure/List';
 export * from './structure/ModalContainer';
 export * from './structure/Pagination';
 export * from './structure/TabContainer';
-export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer };
+export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer };

package/dist/elements/index.mjs

@@ -12,53 +12,55 @@ import u from "./basic/Markdown/index.mjs";
 import d from "./basic/Paragraph/index.mjs";
 import f from "./basic/RichText/index.mjs";
 import p from "./basic/Text/index.mjs";
-import m from "./form/Form/index.mjs";
-import h from "./form/FormControl/index.mjs";
-import g from "./internal/LayoutContainer/index.mjs";
-import _ from "./internal/Loading/index.mjs";
-import { NotFound as v } from "./internal/NotFound/index.mjs";
-import y from "./internal/Page/index.mjs";
-import b from "./media/FontAwesome/index.mjs";
-import x from "./media/Image/index.mjs";
-import S from "./media/Video/index.mjs";
-import C from "./provider/ApiContainer/index.mjs";
-import w from "./structure/Container/index.mjs";
-import T from "./structure/DialogContainer/index.mjs";
-import E from "./structure/List/index.mjs";
-import D from "./structure/ModalContainer/index.mjs";
-import O from "./structure/Pagination/index.mjs";
-import k from "./structure/TabContainer/index.mjs";
+import m from "./basic/ThemeToggle/index.mjs";
+import h from "./form/Form/index.mjs";
+import g from "./form/FormControl/index.mjs";
+import _ from "./internal/LayoutContainer/index.mjs";
+import v from "./internal/Loading/index.mjs";
+import { NotFound as y } from "./internal/NotFound/index.mjs";
+import b from "./internal/Page/index.mjs";
+import x from "./media/FontAwesome/index.mjs";
+import S from "./media/Image/index.mjs";
+import C from "./media/Video/index.mjs";
+import w from "./provider/ApiContainer/index.mjs";
+import T from "./structure/Container/index.mjs";
+import E from "./structure/DialogContainer/index.mjs";
+import D from "./structure/List/index.mjs";
+import O from "./structure/ModalContainer/index.mjs";
+import k from "./structure/Pagination/index.mjs";
+import A from "./structure/TabContainer/index.mjs";
 //#region src/elements/index.ts
-var A = /* @__PURE__ */ e({
-	ApiContainer: () => C,
+var j = /* @__PURE__ */ e({
+	ApiContainer: () => w,
 	BlockHtml: () => t,
 	BlockJsx: () => n,
 	Button: () => o,
-	Container: () => w,
+	Container: () => T,
 	Custom: () => r,
-	DialogContainer: () => T,
+	DialogContainer: () => E,
 	Dropdown: () => s,
-	FontAwesome: () => b,
-	Form: () => m,
-	FormControl: () => h,
+	FontAwesome: () => x,
+	Form: () => h,
+	FormControl: () => g,
 	Heading: () => c,
-	Image: () => x,
-	LayoutContainer: () => g,
+	Image: () => S,
+	LayoutContainer: () => _,
 	Link: () => l,
-	List: () => E,
-	Loading: () => _,
+	List: () => D,
+	Loading: () => v,
 	Markdown: () => u,
-	ModalContainer: () => D,
+	ModalContainer: () => O,
 	NodeHtml: () => i,
-	NotFound: () => v,
-	Page: () => y,
-	Pagination: () => O,
+	NotFound: () => y,
+	Page: () => b,
+	Pagination: () => k,
 	Paragraph: () => d,
 	Reference: () => a,
 	RichText: () => f,
-	TabContainer: () => k,
+	TabContainer: () => A,
 	Text: () => p,
-	Video: () => S
+	ThemeToggle: () => m,
+	Video: () => C
 });
 //#endregion
-export { C as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, w as Container, r as Custom, T as DialogContainer, s as Dropdown, b as FontAwesome, m as Form, h as FormControl, c as Heading, x as Image, g as LayoutContainer, l as Link, E as List, _ as Loading, u as Markdown, D as ModalContainer, i as NodeHtml, v as NotFound, y as Page, O as Pagination, d as Paragraph, a as Reference, f as RichText, k as TabContainer, p as Text, S as Video, A as elements_exports };
+export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Container, r as Custom, E as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, D as List, v as Loading, u as Markdown, O as ModalContainer, i as NodeHtml, y as NotFound, b as Page, k as Pagination, d as Paragraph, a as Reference, f as RichText, A as TabContainer, p as Text, m as ThemeToggle, C as Video, j as elements_exports };

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

@@ -1,14 +1,14 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
 import { useCallback as r, useEffect as i } from "react";
 import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { throttle as o } from "@plitzi/plitzi-ui/helpers";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
 //#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
-var l = ({ ref: n, className: l = "", children: u, subType: d = "div" }) => {
-	let { plitziElementLayout: f } = e(), { settings: { previewMode: p } } = a(), m = r((e, t) => {
+var l = ({ ref: e, className: l = "", children: u, subType: d = "div" }) => {
+	let { plitziElementLayout: f } = t(), { settings: { previewMode: p } } = a(), m = r((e, t) => {
 		if (!e || !t) return;
 		let n = t.getBoundingClientRect(), r = n.top - 0, i = n.left - 0, a = i + n.width + 0, o = r + n.height + 0, s = `
       polygon(
@@ -21,27 +21,27 @@ var l = ({ ref: n, className: l = "", children: u, subType: d = "div" }) => {
 		e.style.setProperty("--child-clip", s);
 	}, []);
 	return i(() => {
-		if (!f || !n?.current || p) return;
-		let e = o(() => {
-			let e = n.current, t = e.querySelector(".plitzi-component--layout-body");
-			m(e, t);
-		}, 150), t = new ResizeObserver(e);
-		t.observe(n.current);
-		let r = n.current.querySelector(".plitzi-component--layout-body");
-		return r && t.observe(r), () => {
-			e.cancel(), t.disconnect();
+		if (!f || !e?.current || p) return;
+		let t = o(() => {
+			let t = e.current, n = t.querySelector(".plitzi-component--layout-body");
+			m(t, n);
+		}, 150), n = new ResizeObserver(t);
+		n.observe(e.current);
+		let r = e.current.querySelector(".plitzi-component--layout-body");
+		return r && n.observe(r), () => {
+			t.cancel(), n.disconnect();
 		};
 	}, [
 		f,
 		p,
-		n,
+		e,
 		m
-	]), /* @__PURE__ */ s(t, {
-		ref: n,
+	]), /* @__PURE__ */ s(n, {
+		ref: e,
 		tag: d,
 		className: c("plitzi-component__layout-container", l),
 		children: u
 	});
-}, u = n(l);
+}, u = e(l);
 //#endregion
 export { l as LayoutContainer, u as default };

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

@@ -0,0 +1,57 @@
+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: {
+    readonly type: "layoutContainer";
+    readonly content: {
+        readonly attributes: {
+            readonly subType: "div";
+        };
+        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 builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: false;
+            readonly canMove: true;
+            readonly canTemplate: 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: {};
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,44 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/internal/LayoutContainer/declaration.ts
+var t = e()({
+	type: "layoutContainer",
+	content: {
+		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,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		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
+export { t as default };