@plitzi/sdk-elements 0.38.11 → 0.38.13

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

@@ -0,0 +1,6 @@
+import { ThemeToggleProps } from './ThemeToggle';
+type SettingsProps = Omit<ThemeToggleProps, 'ref' | 'className'> & {
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ subType, lightLabel, darkLabel, systemLabel, showSystem, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;

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

@@ -0,0 +1,49 @@
+import e from "../../useSettingsUpdate.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/basic/ThemeToggle/Settings.tsx
+var o = ({ subType: o = "switch", lightLabel: s = "Light", darkLabel: c = "Dark", systemLabel: l = "System", showSystem: u = !1, onUpdate: d }) => {
+	let f = e(d);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ n(a, {
+				value: o,
+				label: "Mode",
+				onChange: f.text("subType"),
+				size: "xs",
+				children: [/* @__PURE__ */ t("option", {
+					value: "switch",
+					children: "Switch"
+				}), /* @__PURE__ */ t("option", {
+					value: "segmented",
+					children: "Segmented"
+				})]
+			}),
+			/* @__PURE__ */ t(i, {
+				value: s,
+				label: "Light Label",
+				onChange: f.text("lightLabel")
+			}),
+			/* @__PURE__ */ t(i, {
+				value: c,
+				label: "Dark Label",
+				onChange: f.text("darkLabel")
+			}),
+			o === "segmented" && /* @__PURE__ */ t(r, {
+				checked: u,
+				onChange: f.checked("showSystem"),
+				label: "Offer System"
+			}),
+			o === "segmented" && u && /* @__PURE__ */ t(i, {
+				value: l,
+				label: "System Label",
+				onChange: f.text("systemLabel")
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

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

@@ -3,12 +3,13 @@ import t from "../../../Element/hocs/withElement.mjs";
 import n from "../../../Element/hooks/useElement.mjs";
 import { RootElement as r } from "../../../Element/RootElement.mjs";
 import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useSyncExternalStore as l } from "react";
-import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import u from "@plitzi/sdk-shared/hooks/usePlitzi";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import p from "clsx";
-import m from "@plitzi/sdk-shared/theme/useTheme";
+import m from "@plitzi/sdk-interactions/InteractionsContext";
+import h from "@plitzi/sdk-shared/theme/useTheme";
 //#region src/elements/basic/ThemeToggle/ThemeToggle.tsx
-var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f("svg", {
+var g = () => () => {}, _ = () => !0, v = () => !1, y = () => /* @__PURE__ */ f("svg", {
 	viewBox: "0 0 24 24",
 	width: "1em",
 	height: "1em",
@@ -24,7 +25,7 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		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"
 	})]
-}), y = () => /* @__PURE__ */ d("svg", {
+}), b = () => /* @__PURE__ */ d("svg", {
 	viewBox: "0 0 24 24",
 	width: "1em",
 	height: "1em",
@@ -36,52 +37,52 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		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"
 	})
-}), b = ({ ref: t, className: b = "", subType: x = "switch", lightLabel: S = "Light", darkLabel: C = "Dark", systemLabel: w = "System", showSystem: T = !1 }) => {
-	let { theme: E, resolvedTheme: D, setTheme: O, toggleTheme: k } = m(), { id: A, definition: { styleSelectors: j } } = n(), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = u(), { interactionsManager: P } = i(N), F = l(h, g, _), I = a((e) => (t) => {
-		t.preventDefault(), M && O(e);
-	}, [M, O]), L = a((e) => {
-		e.preventDefault(), M && k();
-	}, [M, k]), R = s(() => [
-		...T ? [{
+}), x = ({ ref: t, className: x = "", subType: S = "switch", lightLabel: C = "Light", darkLabel: w = "Dark", systemLabel: T = "System", showSystem: E = !1 }) => {
+	let { theme: D, resolvedTheme: O, setTheme: k, toggleTheme: A } = h(), { id: j, definition: { styleSelectors: M } } = n(), { settings: { previewMode: N } } = u(), { interactionsManager: P } = i(m), F = l(g, _, v), I = a((e) => (t) => {
+		t.preventDefault(), N && k(e);
+	}, [N, k]), L = a((e) => {
+		e.preventDefault(), N && A();
+	}, [N, A]), R = s(() => [
+		...E ? [{
 			value: "system",
-			label: w,
+			label: T,
 			icon: null
 		}] : [],
 		{
 			value: "light",
-			label: S,
-			icon: /* @__PURE__ */ d(v, {})
+			label: C,
+			icon: /* @__PURE__ */ d(y, {})
 		},
 		{
 			value: "dark",
-			label: C,
-			icon: /* @__PURE__ */ d(y, {})
+			label: w,
+			icon: /* @__PURE__ */ d(b, {})
 		}
 	], [
+		E,
 		T,
-		w,
-		S,
-		C
+		C,
+		w
 	]), z = c(null);
 	return o(() => {
 		let e = z.current;
-		z.current = E, e !== null && e !== E && P.interactionTrigger(A, "onThemeChange", { theme: E });
+		z.current = D, e !== null && e !== D && P.interactionTrigger(j, "onThemeChange", { theme: D });
 	}, [
-		E,
+		D,
 		P,
-		A
-	]), x === "segmented" ? /* @__PURE__ */ d(r, {
+		j
+	]), S === "segmented" ? /* @__PURE__ */ d(r, {
 		ref: t,
 		tag: "div",
 		role: "group",
-		"aria-label": `${S} / ${C}`,
-		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", b),
+		"aria-label": `${C} / ${w}`,
+		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", x),
 		interactionTriggers: e.triggers,
 		children: R.map((e) => /* @__PURE__ */ f("button", {
 			type: "button",
-			className: p("plitzi-component__theme-toggle-option", j.option),
-			"data-active": F && E === e.value ? "true" : void 0,
-			"aria-pressed": F ? E === e.value : void 0,
+			className: p("plitzi-component__theme-toggle-option", M.option),
+			"data-active": F && D === e.value ? "true" : void 0,
+			"aria-pressed": F ? D === e.value : void 0,
 			"data-theme-option": e.value,
 			onClick: I(e.value),
 			children: [e.icon, /* @__PURE__ */ d("span", { children: e.label })]
@@ -89,24 +90,24 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 	}) : /* @__PURE__ */ f(r, {
 		ref: t,
 		tag: "button",
-		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", b),
+		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", x),
 		interactionTriggers: e.triggers,
 		type: "button",
 		onClick: L,
-		"aria-label": `${S} / ${C}`,
-		title: `${S} / ${C}`,
+		"aria-label": `${C} / ${w}`,
+		title: `${C} / ${w}`,
 		children: [/* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", j.icon),
+			className: p("plitzi-component__theme-toggle-icon", M.icon),
 			"data-theme-icon": "light",
-			"aria-current": F && D === "light" ? "true" : void 0,
-			children: /* @__PURE__ */ d(v, {})
+			"aria-current": F && O === "light" ? "true" : void 0,
+			children: /* @__PURE__ */ d(y, {})
 		}), /* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", j.icon),
+			className: p("plitzi-component__theme-toggle-icon", M.icon),
 			"data-theme-icon": "dark",
-			"aria-current": F && D === "dark" ? "true" : void 0,
-			children: /* @__PURE__ */ d(y, {})
+			"aria-current": F && O === "dark" ? "true" : void 0,
+			children: /* @__PURE__ */ d(b, {})
 		})]
 	});
-}, x = t(b);
+}, S = t(x);
 //#endregion
-export { b as ThemeToggle, x as default };
+export { x as ThemeToggle, S as default };

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

@@ -2,7 +2,7 @@ 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: {
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
     readonly type: "themeToggle";
     readonly attributeValues: {
         readonly subType: readonly string[];
@@ -28,40 +28,18 @@ declare const declaration: {
         };
         readonly definition: {
             readonly label: "Theme Toggle";
-            readonly type: "themeToggle";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             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 canSnippet: 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: {
@@ -117,9 +95,8 @@ declare const declaration: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
-} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+}, Partial<{
     subType?: "switch" | "segmented" | undefined;
     lightLabel?: string | undefined;
     darkLabel?: string | undefined;

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

@@ -40,38 +40,18 @@ var n = {
 		},
 		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: its buttons carry no browser look and take the colour and type around them — style them with the space own classes. A `segmented` one marks the chosen option with `aria-pressed`, which is the `current` state of its `option` slot. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that. A `switch` marks the icon of the scheme in use — the one chosen, or the machine one while none is — with `aria-current`, the `current` state of its `icon` slot.",
 			items: [],
-			bindings: {},
 			styleSelectors: {
-				base: "",
 				icon: "",
 				option: ""
-			},
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !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: n },
 				icon: { default: {} },
@@ -82,8 +62,7 @@ var n = {
 				} }
 			},
 			subTypes: {}
-		},
-		settings: {}
+		}
 	}
 });
 //#endregion

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

@@ -27,40 +27,18 @@ declare const ThemeToggle: {
         };
         readonly definition: {
             readonly label: "Theme Toggle";
-            readonly type: "themeToggle";
             readonly description: string;
-            readonly items: readonly [];
-            readonly bindings: {};
+            readonly items: [];
             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 canSnippet: 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: {
@@ -116,8 +94,9 @@ declare const ThemeToggle: {
             };
             readonly subTypes: {};
         };
-        readonly settings: {};
     };
+} & {
+    content: import('@plitzi/sdk-shared/authoring/declare').ElementContentDefaults;
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     subType?: "switch" | "segmented" | undefined;
     lightLabel?: string | undefined;