@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/basic/Text/index.d.ts

@@ -2,54 +2,57 @@ declare const Text: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Text').TextProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            content: string;
+    readonly type: "text";
+    readonly content: {
+        readonly attributes: {
+            readonly content: "Text";
         };
-        definition: {
-            label: string;
-            type: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Text";
+            readonly type: "text";
+            readonly description: "Inline plain-text content. Use for short runs of copy; bind its content to data for dynamic text.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            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: "fa-solid fa-align-left";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        'font-size': string;
-                        'line-height': string;
-                        display: string;
+        readonly defaultStyle: {
+            readonly name: "Text";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly 'font-size': "14px";
+                        readonly 'line-height': "24px";
+                        readonly display: "inline";
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    content?: string | number | undefined;
+}>>;
 export default Text;

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

@@ -1,45 +1,6 @@
-import e from "./Text.mjs";
+import e from "./declaration.mjs";
+import t from "./Text.mjs";
 //#region src/elements/basic/Text/index.ts
-var t = Object.assign(e, {
-	type: "text",
-	content: {
-		attributes: { content: "Text" },
-		definition: {
-			label: "Text",
-			type: "text",
-			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-align-left"
-		},
-		defaultStyle: {
-			name: "Text",
-			displayMode: "desktop",
-			style: { base: { default: {
-				"font-size": "14px",
-				"line-height": "24px",
-				display: "inline"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/basic/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+export type ThemeToggleProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    /** `switch` is one control that flips; `segmented` offers the three answers, including giving the machine its
+     *  say back. */
+    subType?: 'switch' | 'segmented';
+    lightLabel?: string;
+    darkLabel?: string;
+    systemLabel?: string;
+    /** Only meaningful for `segmented`: a two-way switch has nowhere to put a third answer. */
+    showSystem?: boolean;
+};
+/**
+ * Light and dark, as a control a page can carry.
+ *
+ * A space declares its colours per scheme and the machine decides between them — which is right until somebody
+ * wants the other one. This is where that decision is made: it writes the choice on the document root, where the
+ * space's own stylesheet is already looking for it, and remembers it for the next visit.
+ *
+ * **What it renders does not depend on the theme.** Both icons are always in the markup and CSS decides which one
+ * shows, so the server and the browser agree byte for byte: a control whose markup changed with the stored theme
+ * would either flash the wrong icon on every load or force the page to wait for storage before painting.
+ */
+declare const ThemeToggle: ({ ref, className, subType, lightLabel, darkLabel, systemLabel, showSystem }: ThemeToggleProps) => import("react").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ThemeToggleProps>): import("react").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { ThemeToggle };

package/dist/elements/basic/ThemeToggle/ThemeToggle.mjs

@@ -0,0 +1,114 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import { use as r, useCallback as i, useEffect as a, useMemo as o, useRef as s, useSyncExternalStore as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "clsx";
+import p from "@plitzi/sdk-shared/theme/useTheme";
+//#region src/elements/basic/ThemeToggle/ThemeToggle.tsx
+var m = () => () => {}, h = () => !0, g = () => !1, _ = () => /* @__PURE__ */ d("svg", {
+	viewBox: "0 0 24 24",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": !0,
+	children: [/* @__PURE__ */ u("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4.2"
+	}), /* @__PURE__ */ u("path", {
+		strokeLinecap: "round",
+		d: "M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"
+	})]
+}), v = () => /* @__PURE__ */ u("svg", {
+	viewBox: "0 0 24 24",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	"aria-hidden": !0,
+	children: /* @__PURE__ */ u("path", {
+		strokeLinejoin: "round",
+		d: "M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"
+	})
+}), y = ({ ref: e, className: y = "", subType: b = "switch", lightLabel: x = "Light", darkLabel: S = "Dark", systemLabel: C = "System", showSystem: w = !1 }) => {
+	let { theme: T, setTheme: E, toggleTheme: D } = p(), { id: O, definition: { styleSelectors: k } } = t(), { settings: { previewMode: A }, contexts: { InteractionsContext: j } } = l(), { interactionsManager: M } = r(j), N = c(m, h, g), P = i((e) => (t) => {
+		t.preventDefault(), A && E(e);
+	}, [A, E]), F = i((e) => {
+		e.preventDefault(), A && D();
+	}, [A, D]), I = o(() => [
+		...w ? [{
+			value: "system",
+			label: C,
+			icon: null
+		}] : [],
+		{
+			value: "light",
+			label: x,
+			icon: /* @__PURE__ */ u(_, {})
+		},
+		{
+			value: "dark",
+			label: S,
+			icon: /* @__PURE__ */ u(v, {})
+		}
+	], [
+		w,
+		C,
+		x,
+		S
+	]), L = s(null);
+	a(() => {
+		let e = L.current;
+		L.current = T, e !== null && e !== T && M.interactionTrigger(O, "onThemeChange", { theme: T });
+	}, [
+		T,
+		M,
+		O
+	]);
+	let R = o(() => ({ onThemeChange: {
+		action: "onThemeChange",
+		title: "On Theme Change",
+		type: "trigger",
+		params: {},
+		preview: { theme: "dark" }
+	} }), []);
+	return b === "segmented" ? /* @__PURE__ */ u(n, {
+		ref: e,
+		tag: "div",
+		className: f("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", y),
+		interactionTriggers: R,
+		children: I.map((e) => /* @__PURE__ */ d("button", {
+			type: "button",
+			className: f("plitzi-component__theme-toggle-option", k.option),
+			"data-active": N && T === e.value ? "true" : void 0,
+			"data-theme-option": e.value,
+			onClick: P(e.value),
+			children: [e.icon, /* @__PURE__ */ u("span", { children: e.label })]
+		}, e.value))
+	}) : /* @__PURE__ */ d(n, {
+		ref: e,
+		tag: "button",
+		className: f("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", y),
+		interactionTriggers: R,
+		type: "button",
+		onClick: F,
+		"aria-label": `${x} / ${S}`,
+		title: `${x} / ${S}`,
+		children: [/* @__PURE__ */ u("span", {
+			className: f("plitzi-component__theme-toggle-icon", k.icon),
+			"data-theme-icon": "light",
+			children: /* @__PURE__ */ u(_, {})
+		}), /* @__PURE__ */ u("span", {
+			className: f("plitzi-component__theme-toggle-icon", k.icon),
+			"data-theme-icon": "dark",
+			children: /* @__PURE__ */ u(v, {})
+		})]
+	});
+}, b = e(y);
+//#endregion
+export { y as ThemeToggle, b as default };

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

@@ -0,0 +1,71 @@
+import { ThemeToggleProps } from './ThemeToggle';
+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 ThemeToggleAttributes = AuthorableAttributes<ThemeToggleProps>;
+declare const declaration: {
+    readonly type: "themeToggle";
+    readonly content: {
+        readonly attributes: {
+            readonly subType: "switch";
+            readonly lightLabel: "Light";
+            readonly darkLabel: "Dark";
+            readonly systemLabel: "System";
+            readonly showSystem: false;
+        };
+        readonly definition: {
+            readonly label: "Theme Toggle";
+            readonly type: "themeToggle";
+            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly icon: "";
+                readonly option: "";
+            };
+            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-circle-half-stroke";
+        };
+        readonly defaultStyle: {
+            readonly name: "Theme Toggle";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-flex";
+                        readonly 'align-items': "center";
+                        readonly cursor: "pointer";
+                    };
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    subType?: "switch" | "segmented" | undefined;
+    lightLabel?: string | undefined;
+    darkLabel?: string | undefined;
+    systemLabel?: string | undefined;
+    showSystem?: boolean | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,58 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/basic/ThemeToggle/declaration.ts
+var t = e()({
+	type: "themeToggle",
+	content: {
+		attributes: {
+			subType: "switch",
+			lightLabel: "Light",
+			darkLabel: "Dark",
+			systemLabel: "System",
+			showSystem: !1
+		},
+		definition: {
+			label: "Theme Toggle",
+			type: "themeToggle",
+			description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.",
+			items: [],
+			bindings: {},
+			styleSelectors: {
+				base: "",
+				icon: "",
+				option: ""
+			},
+			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-circle-half-stroke"
+		},
+		defaultStyle: {
+			name: "Theme Toggle",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "inline-flex",
+				"align-items": "center",
+				cursor: "pointer"
+			} } },
+			subTypes: {}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/ThemeToggle/index.d.ts

@@ -0,0 +1,70 @@
+declare const ThemeToggle: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ThemeToggle').ThemeToggleProps>): import("react").JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "themeToggle";
+    readonly content: {
+        readonly attributes: {
+            readonly subType: "switch";
+            readonly lightLabel: "Light";
+            readonly darkLabel: "Dark";
+            readonly systemLabel: "System";
+            readonly showSystem: false;
+        };
+        readonly definition: {
+            readonly label: "Theme Toggle";
+            readonly type: "themeToggle";
+            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly icon: "";
+                readonly option: "";
+            };
+            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-circle-half-stroke";
+        };
+        readonly defaultStyle: {
+            readonly name: "Theme Toggle";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-flex";
+                        readonly 'align-items': "center";
+                        readonly cursor: "pointer";
+                    };
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    subType?: "switch" | "segmented" | undefined;
+    lightLabel?: string | undefined;
+    darkLabel?: string | undefined;
+    systemLabel?: string | undefined;
+    showSystem?: boolean | undefined;
+}>>;
+export default ThemeToggle;

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

@@ -0,0 +1,6 @@
+import e from "./declaration.mjs";
+import t from "./ThemeToggle.mjs";
+//#region src/elements/basic/ThemeToggle/index.ts
+var n = Object.assign(t, e);
+//#endregion
+export { n as default };