@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/basic/Button/index.mjs

@@ -1,106 +1,6 @@
 import e from "./Button.mjs";
+import t from "./declaration.mjs";
 //#region src/elements/basic/Button/index.ts
-var t = Object.assign(e, {
-	type: "button",
-	content: {
-		attributes: {
-			contentPlacement: "after",
-			content: "Button",
-			subType: "button",
-			disabled: !1
-		},
-		definition: {
-			label: "Button",
-			type: "button",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "basic",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-stop"
-		},
-		defaultStyle: {
-			name: "Button",
-			displayMode: "desktop",
-			style: { base: { default: {} } },
-			subTypes: {
-				button: {
-					name: "Default Button",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"min-height": "30px",
-						"min-width": "30px",
-						"padding-top": "6px",
-						"padding-left": "12px",
-						"padding-right": "12px",
-						"padding-bottom": "6px",
-						cursor: "pointer",
-						"font-size": "16px",
-						"line-height": "24px",
-						"border-top-left-radius": "4px",
-						"border-top-right-radius": "4px",
-						"border-bottom-left-radius": "4px",
-						"border-bottom-right-radius": "4px"
-					} } }
-				},
-				reset: {
-					name: "Reset Button",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"min-height": "30px",
-						"min-width": "30px",
-						"padding-top": "6px",
-						"padding-left": "12px",
-						"padding-right": "12px",
-						"padding-bottom": "6px",
-						cursor: "pointer",
-						"font-size": "16px",
-						"line-height": "24px",
-						"border-top-left-radius": "4px",
-						"border-top-right-radius": "4px",
-						"border-bottom-left-radius": "4px",
-						"border-bottom-right-radius": "4px"
-					} } }
-				},
-				submit: {
-					name: "Submit Button",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"min-height": "30px",
-						"min-width": "30px",
-						"padding-top": "6px",
-						"padding-left": "12px",
-						"padding-right": "12px",
-						"padding-bottom": "6px",
-						cursor: "pointer",
-						"font-size": "16px",
-						"line-height": "24px",
-						"border-top-left-radius": "4px",
-						"border-top-right-radius": "4px",
-						"border-bottom-left-radius": "4px",
-						"border-bottom-right-radius": "4px"
-					} } }
-				}
-			}
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(e, t);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/basic/Dropdown/Dropdown.mjs

@@ -1,15 +1,15 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "./DropdownContext.mjs";
-import r from "./useDropdown.mjs";
-import i 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 r from "./DropdownContext.mjs";
+import i from "./useDropdown.mjs";
 import { useCallback as a, useMemo as o, useRef as s } from "react";
 import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "clsx";
 //#region src/elements/basic/Dropdown/Dropdown.tsx
-var f = ({ ref: i, children: f, className: p = "", popupPlacement: m = "bottom", openPopup: h = !1, backgroundDisabled: g = !1, closeOnClickBackground: _ = !0, closeOnClickPopup: v = !0, containerTopOffset: y = 5, containerLeftOffset: b = 5, disabled: x = !1 }) => {
-	let { setElementState: S, definition: { styleSelectors: C } } = e(), { settings: { previewMode: w }, utils: { getWindow: T } } = c(), E = s(null), D = s(null), O = o(() => T(), [T]), k = a((e) => {
+var f = ({ ref: e, children: f, className: p = "", popupPlacement: m = "bottom", openPopup: h = !1, backgroundDisabled: g = !1, closeOnClickBackground: _ = !0, closeOnClickPopup: v = !0, containerTopOffset: y = 5, containerLeftOffset: b = 5, disabled: x = !1 }) => {
+	let { setElementState: S, definition: { styleSelectors: C } } = t(), { settings: { previewMode: w }, utils: { getWindow: T } } = c(), E = s(null), D = s(null), O = o(() => T(), [T]), k = a((e) => {
 		_ && (e.stopPropagation(), e.preventDefault(), S((e) => ({
 			...e,
 			openPopup: !1
@@ -19,8 +19,8 @@ var f = ({ ref: i, children: f, className: p = "", popupPlacement: m = "bottom",
 			...t,
 			openPopup: e
 		}));
-	}, [S]), [, , j, M, , N] = r({
-		ref: i,
+	}, [S]), [, , j, M, , N] = i({
+		ref: e,
 		popupRef: E,
 		open: h,
 		disabled: !w || x,
@@ -40,11 +40,11 @@ var f = ({ ref: i, children: f, className: p = "", popupPlacement: m = "bottom",
 		h,
 		N
 	]);
-	return /* @__PURE__ */ u(t, {
-		ref: i,
+	return /* @__PURE__ */ u(n, {
+		ref: e,
 		className: d("plitzi-component__dropdown", p, { "container--empty--skip": !w && !f }),
 		onClick: j,
-		children: [/* @__PURE__ */ l(n, {
+		children: [/* @__PURE__ */ l(r, {
 			value: P,
 			children: f
 		}), h && g && w && /* @__PURE__ */ l("div", {
@@ -53,6 +53,6 @@ var f = ({ ref: i, children: f, className: p = "", popupPlacement: m = "bottom",
 			onClick: k
 		})]
 	});
-}, p = i(f);
+}, p = e(f);
 //#endregion
 export { f as Dropdown, p as default };

package/dist/elements/basic/Dropdown/DropdownPopup/DropdownPopup.mjs

@@ -1,19 +1,19 @@
-import { RootElement as e } from "../../../../Element/RootElement.mjs";
-import t from "../DropdownContext.mjs";
-import n from "../../../../Element/hocs/withElement.mjs";
+import e from "../../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../../Element/RootElement.mjs";
+import n from "../DropdownContext.mjs";
 import { use as r, useImperativeHandle as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 import o from "clsx";
 //#region src/elements/basic/Dropdown/DropdownPopup/DropdownPopup.tsx
-var s = ({ ref: n, className: s = "", children: c }) => {
-	let { popupRef: l, openPopup: u, parameters: d, onClick: f } = r(t);
-	return i(n, () => l.current ?? null, [l]), /* @__PURE__ */ a(e, {
+var s = ({ ref: e, className: s = "", children: c }) => {
+	let { popupRef: l, openPopup: u, parameters: d, onClick: f } = r(n);
+	return i(e, () => l.current ?? null, [l]), /* @__PURE__ */ a(t, {
 		ref: l,
 		className: o("plitzi-component__dropdown-popup", s, { "popup-container--no-visible": !u || !d }),
 		style: d,
 		onClick: f,
 		children: c
 	});
-}, c = n(s);
+}, c = e(s);
 //#endregion
 export { s as DropdownPopup, c as default };

package/dist/elements/basic/Dropdown/DropdownPopup/Settings.mjs

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

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.d.ts

@@ -0,0 +1,67 @@
+import { DropdownPopupProps } from './DropdownPopup';
+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 DropdownPopupAttributes = AuthorableAttributes<DropdownPopupProps>;
+declare const declaration: {
+    readonly type: "dropdownPopup";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Dropdown Popup";
+            readonly type: "dropdownPopup";
+            readonly description: "The floating panel revealed by a dropdown.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {};
+        };
+        readonly builder: {
+            readonly canDelete: false;
+            readonly canSelect: true;
+            readonly canDragDrop: false;
+            readonly canMove: false;
+            readonly canTemplate: false;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "";
+        };
+        readonly defaultStyle: {
+            readonly name: "Dropdown Popup";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly 'background-color': "white";
+                        readonly 'padding-right': "4px";
+                        readonly 'padding-bottom': "4px";
+                        readonly 'padding-left': "4px";
+                        readonly 'padding-top': "4px";
+                        readonly position: "fixed";
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'border-top-right-radius': "4px";
+                        readonly 'border-bottom-right-radius': "4px";
+                        readonly 'border-bottom-left-radius': "4px";
+                        readonly 'border-top-left-radius': "4px";
+                        readonly 'box-shadow': "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px";
+                        readonly 'z-index': 100;
+                    };
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly [];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+export default declaration;

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.mjs

@@ -0,0 +1,60 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/basic/Dropdown/DropdownPopup/declaration.ts
+var t = e()({
+	type: "dropdownPopup",
+	content: {
+		attributes: {},
+		definition: {
+			label: "Dropdown Popup",
+			type: "dropdownPopup",
+			description: "The floating panel revealed by a dropdown.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: {}
+		},
+		builder: {
+			canDelete: !1,
+			canSelect: !0,
+			canDragDrop: !1,
+			canMove: !1,
+			canTemplate: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: ""
+		},
+		defaultStyle: {
+			name: "Dropdown Popup",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"background-color": "white",
+				"padding-right": "4px",
+				"padding-bottom": "4px",
+				"padding-left": "4px",
+				"padding-top": "4px",
+				position: "fixed",
+				display: "flex",
+				"flex-direction": "column",
+				"border-top-right-radius": "4px",
+				"border-bottom-right-radius": "4px",
+				"border-bottom-left-radius": "4px",
+				"border-top-left-radius": "4px",
+				"box-shadow": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px",
+				"z-index": 100
+			} } },
+			subTypes: {}
+		},
+		settings: {}
+	},
+	initialItems: []
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

@@ -2,67 +2,65 @@ declare const DropdownPopup: {
     (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup').DropdownPopupProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {};
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            items: never[];
-            bindings: {};
-            styleSelectors: {
-                base: string;
+    readonly type: "dropdownPopup";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Dropdown Popup";
+            readonly type: "dropdownPopup";
+            readonly description: "The floating panel revealed by a dropdown.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {};
+            readonly initialState: {};
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: false;
+            readonly canSelect: true;
+            readonly canDragDrop: false;
+            readonly canMove: false;
+            readonly canTemplate: false;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        'background-color': string;
-                        'min-height': string;
-                        'min-width': string;
-                        'padding-right': string;
-                        'padding-bottom': string;
-                        'padding-left': string;
-                        'padding-top': string;
-                        position: string;
-                        display: string;
-                        'flex-direction': string;
-                        'border-top-right-radius': string;
-                        'border-bottom-right-radius': string;
-                        'border-bottom-left-radius': string;
-                        'border-top-left-radius': string;
-                        'box-shadow': string;
-                        'z-index': number;
+        readonly defaultStyle: {
+            readonly name: "Dropdown Popup";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly 'background-color': "white";
+                        readonly 'padding-right': "4px";
+                        readonly 'padding-bottom': "4px";
+                        readonly 'padding-left': "4px";
+                        readonly 'padding-top': "4px";
+                        readonly position: "fixed";
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'border-top-right-radius': "4px";
+                        readonly 'border-bottom-right-radius': "4px";
+                        readonly 'border-bottom-left-radius': "4px";
+                        readonly 'border-top-left-radius': "4px";
+                        readonly 'box-shadow': "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px";
+                        readonly 'z-index': 100;
                     };
                 };
             };
-            subTypes: {};
+            readonly subTypes: {};
         };
-        settings: {};
+        readonly settings: {};
     };
-    initialItems: never[];
-};
+    readonly initialItems: readonly [];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
 export default DropdownPopup;

package/dist/elements/basic/Dropdown/DropdownPopup/index.mjs

@@ -1,62 +1,6 @@
-import e from "./DropdownPopup.mjs";
+import e from "./declaration.mjs";
+import t from "./DropdownPopup.mjs";
 //#region src/elements/basic/Dropdown/DropdownPopup/index.ts
-var t = Object.assign(e, {
-	type: "dropdownPopup",
-	content: {
-		attributes: {},
-		definition: {
-			label: "Dropdown Popup",
-			type: "dropdownPopup",
-			description: "",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: {}
-		},
-		builder: {
-			canDelete: !1,
-			canSelect: !0,
-			canDragDrop: !1,
-			canMove: !1,
-			canTemplate: !1,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "basic",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: ""
-		},
-		defaultStyle: {
-			name: "Dropdown Popup",
-			displayMode: "desktop",
-			style: { base: { default: {
-				"background-color": "white",
-				"min-height": "50px",
-				"min-width": "50px",
-				"padding-right": "4px",
-				"padding-bottom": "4px",
-				"padding-left": "4px",
-				"padding-top": "4px",
-				position: "fixed",
-				display: "flex",
-				"flex-direction": "column",
-				"border-top-right-radius": "4px",
-				"border-bottom-right-radius": "4px",
-				"border-bottom-left-radius": "4px",
-				"border-top-left-radius": "4px",
-				"box-shadow": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px",
-				"z-index": 100
-			} } },
-			subTypes: {}
-		},
-		settings: {}
-	},
-	initialItems: []
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/basic/Dropdown/declaration.d.ts

@@ -0,0 +1,86 @@
+import { DropdownProps } from './Dropdown';
+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 DropdownAttributes = AuthorableAttributes<DropdownProps>;
+declare const declaration: {
+    readonly type: "dropdown";
+    readonly content: {
+        readonly attributes: {
+            readonly popupPlacement: "bottom";
+            readonly openPopup: false;
+            readonly backgroundDisabled: false;
+            readonly closeOnClickBackground: true;
+            readonly closeOnClickPopup: true;
+            readonly containerTopOffset: 5;
+            readonly containerLeftOffset: 5;
+            readonly disabled: false;
+        };
+        readonly definition: {
+            readonly label: "Dropdown";
+            readonly type: "dropdown";
+            readonly description: "A trigger that toggles an attached popup panel (dropdownPopup) — menus, selects, flyouts.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly backgroundContainer: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-angle-down";
+        };
+        readonly defaultStyle: {
+            readonly name: "Dropdown";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly cursor: "pointer";
+                        readonly 'user-select': "none";
+                    };
+                };
+                readonly backgroundContainer: {
+                    readonly default: {
+                        readonly top: 0;
+                        readonly bottom: 0;
+                        readonly left: 0;
+                        readonly right: 0;
+                        readonly position: "fixed";
+                        readonly cursor: "default";
+                        readonly 'z-index': 50;
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["dropdownPopup"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    disabled?: boolean | undefined;
+    closeOnClickPopup?: boolean | undefined;
+    popupPlacement?: "left" | "right" | "top" | "bottom" | undefined;
+    openPopup?: boolean | undefined;
+    backgroundDisabled?: boolean | undefined;
+    closeOnClickBackground?: boolean | undefined;
+    containerTopOffset?: number | undefined;
+    containerLeftOffset?: number | undefined;
+}>>;
+export default declaration;

package/dist/elements/basic/Dropdown/declaration.mjs

@@ -0,0 +1,70 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/basic/Dropdown/declaration.ts
+var t = e()({
+	type: "dropdown",
+	content: {
+		attributes: {
+			popupPlacement: "bottom",
+			openPopup: !1,
+			backgroundDisabled: !1,
+			closeOnClickBackground: !0,
+			closeOnClickPopup: !0,
+			containerTopOffset: 5,
+			containerLeftOffset: 5,
+			disabled: !1
+		},
+		definition: {
+			label: "Dropdown",
+			type: "dropdown",
+			description: "A trigger that toggles an attached popup panel (dropdownPopup) — menus, selects, flyouts.",
+			items: [],
+			bindings: {},
+			styleSelectors: {
+				base: "",
+				backgroundContainer: ""
+			},
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-angle-down"
+		},
+		defaultStyle: {
+			name: "Dropdown",
+			displayMode: "desktop",
+			style: {
+				base: { default: {
+					cursor: "pointer",
+					"user-select": "none"
+				} },
+				backgroundContainer: { default: {
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0,
+					position: "fixed",
+					cursor: "default",
+					"z-index": 50
+				} }
+			}
+		},
+		settings: {}
+	},
+	initialItems: ["dropdownPopup"]
+});
+//#endregion
+export { t as default };