@webority/ui-react 0.113.0 → 0.115.0

package/dist/canvas-kit/kit.js

@@ -13478,14 +13478,13 @@ function spe(e, n, r, i, a, o) {
 	}) : null;
 }
 function ms(r) {
-	let { marker: i, props: a } = H("AppAlert", r), { variant: o = "info", children: s, title: c, icon: l, iconVariant: u, iconSize: d, image: f, imageAlt: p = "", imageSize: m, className: h = "", onClose: g, dismissible: _, bordered: v = !0, accent: y = !1, size: b = "md", action: x, role: S = "alert", ...C } = a;
-	U("AppAlert", C), V("AppAlert", "variant", o, rpe), V("AppAlert", "size", b, ipe), V("AppAlert", "role", S, ape), V("AppAlert", "iconVariant", u, ope);
+	let { marker: i, props: a } = H("AppAlert", r), { tone: o = "info", children: s, title: c, icon: l, iconVariant: u, iconSize: d, image: f, imageAlt: p = "", imageSize: m, className: h = "", onClose: g, dismissible: _, bordered: v = !0, accent: y = !1, size: b = "md", action: x, role: S = "alert", ...C } = a;
+	U("AppAlert", C), V("AppAlert", "tone", o, rpe), V("AppAlert", "size", b, ipe), V("AppAlert", "role", S, ape), V("AppAlert", "iconVariant", u, ope);
 	let w = l === void 0 ? npe[o] : l === "none" ? null : l, T = !!f || !!w, E = x != null && x !== !1, D = c ? t("div", {
 		className: "alert-heading",
 		children: c
 	}) : null, O = T && !!D && !!s, k = d > 0 ? d : b === "lg" ? O ? 17 : 15 : O ? 13 : 11;
 	return t(Ute, {
-		variant: o,
 		className: [
 			T ? "alert-has-icon" : "",
 			E ? "alert-has-action" : "",
@@ -13502,6 +13501,7 @@ function ms(r) {
 		role: S === "none" ? void 0 : S,
 		...i,
 		...C,
+		variant: o,
 		children: T || E ? n(e, { children: [
 			T && spe(w, k, u, f, p, m),
 			n("div", {
@@ -13874,49 +13874,81 @@ var wpe = {
 	name: "computeStyles",
 	options: { gpuAcceleration: !1 }
 }] }, Epe = ["dialog"];
-function Ds({ trigger: e, children: r, title: i, placement: a = "bottom", triggerType: o = "click", onToggle: c, className: l = "", show: u, role: d, labelledBy: f, autoFocus: p = !1, ...m }) {
-	U("AppPopover", m), V("AppPopover", "role", d, Epe);
-	let g = h(), _ = `${g}-title`, v = x(null), [y, b] = S(!1), C = u !== void 0, w = C ? u : y, T = d === "dialog", E = (e) => {
-		C || b(e), c?.(e);
-	}, D = n(Sa, {
-		id: g,
+function Ds({ trigger: e, children: r, title: i, placement: a = "bottom", triggerType: o = "click", onToggle: c, className: l = "", show: u, role: d, labelledBy: f, autoFocus: p = !1, openDelay: g = 80, closeDelay: _ = 220, ...v }) {
+	U("AppPopover", v), V("AppPopover", "role", d, Epe);
+	let y = h(), b = `${y}-title`, C = x(null), [w, T] = S(!1), E = u !== void 0, D = E ? u : w, O = d === "dialog", k = o === "hover" || Array.isArray(o) && o.includes("hover"), A = k && !E, j = x(null), M = x(w);
+	M.current = w;
+	let N = () => {
+		clearTimeout(j.current), j.current = null;
+	}, P = (e, t) => {
+		N(), j.current = setTimeout(() => {
+			j.current = null, e !== M.current && (T(e), c?.(e));
+		}, t);
+	};
+	m(() => () => clearTimeout(j.current), []), m(() => {
+		if (!A || !w) return;
+		let e = (e) => {
+			e.key === "Escape" && (clearTimeout(j.current), j.current = null, T(!1), c?.(!1));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		A,
+		w,
+		c
+	]);
+	let F = (e) => {
+		if (A) {
+			P(e, e ? g : _);
+			return;
+		}
+		E || T(e), c?.(e);
+	}, I = O ? {
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-labelledby": f ?? (i ? b : void 0)
+	} : {}, L = A ? {
+		onMouseEnter: N,
+		onMouseLeave: () => P(!1, _),
+		onFocus: N,
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || P(!1, _);
+		}
+	} : {}, R = n(Sa, {
+		id: y,
 		className: l || void 0,
-		...T ? {
-			role: "dialog",
-			"aria-modal": "false",
-			"aria-labelledby": f ?? (i ? _ : void 0)
-		} : {},
+		...I,
+		...L,
 		children: [
-			p && t(Cpe, { triggerRef: v }),
+			p && t(Cpe, { triggerRef: C }),
 			i && t(Sa.Header, {
 				as: "div",
-				id: _,
+				id: b,
 				children: i
 			}),
 			r == null ? null : t(Sa.Body, { children: r })
 		]
-	}), { onClick: O, "aria-expanded": k, ...A } = m, j = e.props["aria-expanded"], M, N = o === "click" || Array.isArray(o) && o.includes("click");
-	k === void 0 ? j === void 0 ? N && (M = w) : M = j : M = k;
-	let P = s(e, {
-		...A,
-		...M === void 0 ? {} : { "aria-expanded": M },
+	}), { onClick: z, "aria-expanded": B, ...ee } = v, te = e.props["aria-expanded"], ne, re = o === "click" || Array.isArray(o) && o.includes("click");
+	B === void 0 ? te === void 0 ? re && (ne = D) : ne = te : ne = B;
+	let ie = s(e, {
+		...ee,
+		...ne === void 0 ? {} : { "aria-expanded": ne },
 		onClick: (t) => {
-			v.current = t.currentTarget, O?.(t), typeof e.props.onClick == "function" && e.props.onClick(t);
+			C.current = t.currentTarget, z?.(t), typeof e.props.onClick == "function" && e.props.onClick(t);
 		}
-	}), F = o === "click", I = o === "hover" || Array.isArray(o) && o.includes("hover");
+	}), ae = o === "click";
 	return t(bae, {
 		trigger: o,
 		placement: wpe[a] || a,
 		popperConfig: Tpe,
-		overlay: D,
-		rootClose: F || T,
-		delay: I ? {
-			show: 80,
-			hide: 220
+		overlay: R,
+		rootClose: ae || O,
+		delay: E && k ? {
+			show: g,
+			hide: _
 		} : void 0,
-		onToggle: E,
-		...C ? { show: u } : {},
-		children: P
+		onToggle: F,
+		...E || k ? { show: D } : {},
+		children: ie
 	});
 }
 //#endregion
@@ -14939,18 +14971,18 @@ var dc = [
 	"neutral"
 ];
 function fc(e) {
-	let { marker: r, props: i } = H("AppBanner", e), { tone: a = "info", icon: o, children: s, dismissible: c = !1, onDismiss: l, className: u = "", ...d } = i;
-	U("AppBanner", d), V("AppBanner", "tone", a, dc);
-	let [f, p] = S(!0);
-	if (!f) return null;
-	let m = dc.includes(a) ? a : "info", h = () => {
-		p(!1), l?.();
+	let { marker: r, props: i } = H("AppBanner", e), { tone: a = "info", icon: o, children: s, dismissible: c = !1, onDismiss: l, action: u, className: d = "", ...f } = i;
+	U("AppBanner", f), V("AppBanner", "tone", a, dc);
+	let [p, m] = S(!0);
+	if (!p) return null;
+	let h = dc.includes(a) ? a : "info", g = u != null && u !== !1, _ = () => {
+		m(!1), l?.();
 	};
 	return n("div", {
-		className: `wui-banner wui-banner-${m}${u ? ` ${u}` : ""}`,
+		className: `wui-banner wui-banner-${h}${g ? " wui-banner-has-action" : ""}${d ? ` ${d}` : ""}`,
 		role: "status",
 		...r,
-		...d,
+		...f,
 		children: [
 			o && t("span", {
 				className: "wui-banner-icon",
@@ -14960,11 +14992,15 @@ function fc(e) {
 				className: "wui-banner-body",
 				children: s
 			}),
+			g && t("div", {
+				className: "wui-banner-action",
+				children: u
+			}),
 			c && t("button", {
 				type: "button",
 				className: "wui-banner-dismiss",
 				"aria-label": "Dismiss",
-				onClick: h,
+				onClick: _,
 				children: t(W, {
 					name: "x",
 					size: 18
@@ -87377,11 +87413,11 @@ function BQe(r) {
 		})] }),
 		children: [
 			Le === "error" && Ne && t(ms, {
-				variant: "danger",
+				tone: "danger",
 				children: se.unreadable(Ne.file)
 			}),
 			ze && t(ms, {
-				variant: "danger",
+				tone: "danger",
 				children: ze
 			}),
 			Ne && Le !== "error" && t("wui-image-crop", {
@@ -126756,7 +126792,7 @@ function Amt(e) {
 		}), j ? t("div", {
 			className: "wui-section-lead-success",
 			children: t(ms, {
-				variant: "success",
+				tone: "success",
 				title: u,
 				children: d
 			})
@@ -126770,7 +126806,7 @@ function Amt(e) {
 					children: s.map(F)
 				}),
 				D != null && t(ms, {
-					variant: "danger",
+					tone: "danger",
 					children: D
 				}),
 				t(bs, {
@@ -133480,7 +133516,7 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 		kind: "WeborityWeb",
 		library: {
 			name: "@webority/ui-react",
-			version: "0.113.0"
+			version: "0.115.0"
 		},
 		rendererProtocolVersion: 13,
 		platform: "Web",
@@ -133848,7 +133884,7 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						name: "accent",
 						type: "boolean",
 						required: !1,
-						description: "A thick left edge in the variant colour, marking the alert as an aside.",
+						description: "A thick left edge in the tone colour, marking the alert as an aside.",
 						default: !1
 					},
 					{
@@ -133861,7 +133897,7 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						name: "bordered",
 						type: "boolean",
 						required: !1,
-						description: "Draws the soft border of the variant. False keeps only the tint fill.",
+						description: "Draws the soft border of the tone. False keeps only the tint fill.",
 						default: !0
 					},
 					{
@@ -133881,7 +133917,7 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						name: "icon",
 						type: "icon",
 						required: !1,
-						description: "A leading glyph, given as a semantic icon name. It defaults to the glyph of the variant; pass null for no badge."
+						description: "A leading glyph, given as a semantic icon name. It defaults to the glyph of the tone; pass null for no badge."
 					},
 					{
 						name: "iconSize",
@@ -133953,7 +133989,7 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						description: "A bold heading line above the body."
 					},
 					{
-						name: "variant",
+						name: "tone",
 						type: "enum",
 						enum: [
 							"danger",
@@ -133996,17 +134032,17 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						}
 					],
 					do: [{
-						note: "Match the variant to intent and say what to do next. A danger alert names the problem and the recovery.",
+						note: "Match the tone to intent and say what to do next. A danger alert names the problem and the recovery.",
 						example: [{
 							component: "AppAlert",
-							props: { variant: "danger" },
+							props: { tone: "danger" },
 							children: "We couldn't save your changes: check the highlighted fields and try again."
 						}]
 					}, {
 						note: "A neutral, informational notice uses the info tone: calm, not alarming.",
 						example: [{
 							component: "AppAlert",
-							props: { variant: "info" },
+							props: { tone: "info" },
 							children: "Reports use the latest IEC 62305-2 methodology."
 						}]
 					}],
@@ -134014,14 +134050,14 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						note: "A success (green) tone on an error message contradicts the words. The colour lies about what happened.",
 						example: [{
 							component: "AppAlert",
-							props: { variant: "success" },
+							props: { tone: "success" },
 							children: "Something went wrong while saving."
 						}]
 					}, {
 						note: "A warning (amber) tone on a purely informational message implies a problem that is not there.",
 						example: [{
 							component: "AppAlert",
-							props: { variant: "warning" },
+							props: { tone: "warning" },
 							children: "Reports use the latest IEC 62305-2 methodology."
 						}]
 					}],
@@ -134829,6 +134865,12 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 				marker: "AppBanner",
 				acceptsChildren: !0,
 				props: [
+					{
+						name: "action",
+						type: "node",
+						required: !1,
+						description: "A button or link at the banner's right edge; it wraps below the message on a phone."
+					},
 					{
 						name: "className",
 						type: "string",
@@ -146560,12 +146602,26 @@ var iyt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						description: "Extra classes on the popover panel.",
 						default: ""
 					},
+					{
+						name: "closeDelay",
+						type: "number",
+						required: !1,
+						description: "Milliseconds a hover popover waits before it closes after the pointer leaves the trigger and the panel.",
+						default: 220
+					},
 					{
 						name: "labelledBy",
 						type: "string",
 						required: !1,
 						description: "The id of the element that names a dialog panel. It wins over the title."
 					},
+					{
+						name: "openDelay",
+						type: "number",
+						required: !1,
+						description: "Milliseconds a hover popover waits before it opens.",
+						default: 80
+					},
 					{
 						name: "placement",
 						type: "enum",

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.113.0"
+    "version": "0.115.0"
   },
   "rendererProtocolVersion": 13,
   "platform": "Web",
@@ -404,7 +404,7 @@
           "name": "accent",
           "type": "boolean",
           "required": false,
-          "description": "A thick left edge in the variant colour, marking the alert as an aside.",
+          "description": "A thick left edge in the tone colour, marking the alert as an aside.",
           "default": false
         },
         {
@@ -417,7 +417,7 @@
           "name": "bordered",
           "type": "boolean",
           "required": false,
-          "description": "Draws the soft border of the variant. False keeps only the tint fill.",
+          "description": "Draws the soft border of the tone. False keeps only the tint fill.",
           "default": true
         },
         {
@@ -437,7 +437,7 @@
           "name": "icon",
           "type": "icon",
           "required": false,
-          "description": "A leading glyph, given as a semantic icon name. It defaults to the glyph of the variant; pass null for no badge."
+          "description": "A leading glyph, given as a semantic icon name. It defaults to the glyph of the tone; pass null for no badge."
         },
         {
           "name": "iconSize",
@@ -509,7 +509,7 @@
           "description": "A bold heading line above the body."
         },
         {
-          "name": "variant",
+          "name": "tone",
           "type": "enum",
           "enum": [
             "danger",
@@ -553,12 +553,12 @@
         ],
         "do": [
           {
-            "note": "Match the variant to intent and say what to do next. A danger alert names the problem and the recovery.",
+            "note": "Match the tone to intent and say what to do next. A danger alert names the problem and the recovery.",
             "example": [
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "danger"
+                  "tone": "danger"
                 },
                 "children": "We couldn't save your changes: check the highlighted fields and try again."
               }
@@ -570,7 +570,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "info"
+                  "tone": "info"
                 },
                 "children": "Reports use the latest IEC 62305-2 methodology."
               }
@@ -584,7 +584,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "success"
+                  "tone": "success"
                 },
                 "children": "Something went wrong while saving."
               }
@@ -596,7 +596,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "warning"
+                  "tone": "warning"
                 },
                 "children": "Reports use the latest IEC 62305-2 methodology."
               }
@@ -1499,6 +1499,12 @@
       "marker": "AppBanner",
       "acceptsChildren": true,
       "props": [
+        {
+          "name": "action",
+          "type": "node",
+          "required": false,
+          "description": "A button or link at the banner's right edge; it wraps below the message on a phone."
+        },
         {
           "name": "className",
           "type": "string",
@@ -14290,12 +14296,26 @@
           "description": "Extra classes on the popover panel.",
           "default": ""
         },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "required": false,
+          "description": "Milliseconds a hover popover waits before it closes after the pointer leaves the trigger and the panel.",
+          "default": 220
+        },
         {
           "name": "labelledBy",
           "type": "string",
           "required": false,
           "description": "The id of the element that names a dialog panel. It wins over the title."
         },
+        {
+          "name": "openDelay",
+          "type": "number",
+          "required": false,
+          "description": "Milliseconds a hover popover waits before it opens.",
+          "default": 80
+        },
         {
           "name": "placement",
           "type": "enum",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.113.0",
+  "version": "0.115.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 13,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.113.0"
+    "version": "0.115.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "507e46306b003ed13b82c96b6cd126a2b50d9750ffbac40d25f60e4ed79015b2",
-      "bytes": 857685
+      "sha256": "fc11cfacd3f26beb34544aff96b00c418be9e61c164015dc41fcfd43fbd3c303",
+      "bytes": 858353
     },
     "kit.js": {
-      "sha256": "6266a26d8d26d3baa189b1e54ef3377b24ebea7530217cb4ca801fce6fd2b379",
-      "bytes": 10907516
+      "sha256": "ddb72d05323d932251e834ec1e00d08629a22768d18080d7694f23d145267107",
+      "bytes": 10909053
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppAlert.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`,`neutral`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{marker:m,props:h}=e(`AppAlert`,r),{variant:g=`info`,children:_,title:v,icon:y,iconVariant:b,iconSize:x,image:S,imageAlt:C=``,imageSize:w,className:T=``,onClose:E,dismissible:D,bordered:O=!0,accent:k=!1,size:A=`md`,action:j,role:M=`alert`,...N}=h;n(`AppAlert`,N),t(`AppAlert`,`variant`,g,l),t(`AppAlert`,`size`,A,u),t(`AppAlert`,`role`,M,d),t(`AppAlert`,`iconVariant`,b,f);let P=y===void 0?c[g]:y===`none`?null:y,F=!!S||!!P,I=j!=null&&j!==!1,L=v?o(`div`,{className:`alert-heading`,children:v}):null,R=F&&!!L&&!!_,z=x>0?x:A===`lg`?R?17:15:R?13:11;return o(i,{variant:g,className:[F?`alert-has-icon`:``,I?`alert-has-action`:``,R?`alert-stack`:``,O?``:`alert-borderless`,k?`alert-accent`:``,A===`sm`?`alert-sm`:``,A===`lg`?`alert-lg`:``,T].filter(Boolean).join(` `)||void 0,onClose:E,dismissible:D??typeof E==`function`,transition:!1,role:M===`none`?void 0:M,...m,...N,children:F||I?s(a,{children:[F&&p(P,z,b,S,C,w),s(`div`,{className:`alert-content`,children:[L,_]}),I&&o(`div`,{className:`alert-action`,children:j})]}):s(a,{children:[L,_]})})}export{m as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`,`neutral`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{marker:m,props:h}=e(`AppAlert`,r),{tone:g=`info`,children:_,title:v,icon:y,iconVariant:b,iconSize:x,image:S,imageAlt:C=``,imageSize:w,className:T=``,onClose:E,dismissible:D,bordered:O=!0,accent:k=!1,size:A=`md`,action:j,role:M=`alert`,...N}=h;n(`AppAlert`,N),t(`AppAlert`,`tone`,g,l),t(`AppAlert`,`size`,A,u),t(`AppAlert`,`role`,M,d),t(`AppAlert`,`iconVariant`,b,f);let P=y===void 0?c[g]:y===`none`?null:y,F=!!S||!!P,I=j!=null&&j!==!1,L=v?o(`div`,{className:`alert-heading`,children:v}):null,R=F&&!!L&&!!_,z=x>0?x:A===`lg`?R?17:15:R?13:11;return o(i,{className:[F?`alert-has-icon`:``,I?`alert-has-action`:``,R?`alert-stack`:``,O?``:`alert-borderless`,k?`alert-accent`:``,A===`sm`?`alert-sm`:``,A===`lg`?`alert-lg`:``,T].filter(Boolean).join(` `)||void 0,onClose:E,dismissible:D??typeof E==`function`,transition:!1,role:M===`none`?void 0:M,...m,...N,variant:g,children:F||I?s(a,{children:[F&&p(P,z,b,S,C,w),s(`div`,{className:`alert-content`,children:[L,_]}),I&&o(`div`,{className:`alert-action`,children:j})]}):s(a,{children:[L,_]})})}export{m as default};

package/dist/components/AppBanner.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`info`,`success`,`warning`,`danger`,`neutral`];function l(l){let{marker:u,props:d}=e(`AppBanner`,l),{tone:f=`info`,icon:p,children:m,dismissible:h=!1,onDismiss:g,className:_=``,...v}=d;n(`AppBanner`,v),t(`AppBanner`,`tone`,f,c);let[y,b]=a(!0);if(!y)return null;let x=c.includes(f)?f:`info`,S=()=>{b(!1),g?.()};return s(`div`,{className:`wui-banner wui-banner-${x}${_?` ${_}`:``}`,role:`status`,...u,...v,children:[p&&o(`span`,{className:`wui-banner-icon`,children:i(p,{size:18})}),o(`div`,{className:`wui-banner-body`,children:m}),h&&o(`button`,{type:`button`,className:`wui-banner-dismiss`,"aria-label":`Dismiss`,onClick:S,children:o(r,{name:`x`,size:18})})]})}export{l as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`info`,`success`,`warning`,`danger`,`neutral`];function l(l){let{marker:u,props:d}=e(`AppBanner`,l),{tone:f=`info`,icon:p,children:m,dismissible:h=!1,onDismiss:g,action:_,className:v=``,...y}=d;n(`AppBanner`,y),t(`AppBanner`,`tone`,f,c);let[b,x]=a(!0);if(!b)return null;let S=c.includes(f)?f:`info`,C=_!=null&&_!==!1,w=()=>{x(!1),g?.()};return s(`div`,{className:`wui-banner wui-banner-${S}${C?` wui-banner-has-action`:``}${v?` ${v}`:``}`,role:`status`,...u,...y,children:[p&&o(`span`,{className:`wui-banner-icon`,children:i(p,{size:18})}),o(`div`,{className:`wui-banner-body`,children:m}),C&&o(`div`,{className:`wui-banner-action`,children:_}),h&&o(`button`,{type:`button`,className:`wui-banner-dismiss`,"aria-label":`Dismiss`,onClick:w,children:o(r,{name:`x`,size:18})})]})}export{l as default};

package/dist/components/AppImagePicker.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import ee from"./withTooltip.js";import r from"./AppIcon.js";import te from"./AppAlert.js";import i from"./AppButton.js";import ne from"../lib/FieldMessage.js";import re from"./AppRequiredMark.js";import ie from"./AppModal.js";import ae from"../lib/useFileDrop.js";import{AVATAR_ACCEPT as oe,AVATAR_MAX_SIZE_MB as a,AVATAR_OUTPUT_SIZE as se,AVATAR_OUTPUT_TYPE as o,AVATAR_PREVIEW_SIZES as ce,AVATAR_TEXT as s,DEFAULT_IMAGE_ACCEPT as c,DEFAULT_MAX_SIZE_MB as l,avatarUnreadableMessage as u,validateFile as le}from"@webority/ui-elements/helpers";import{useCallback as ue,useEffect as de,useId as fe,useRef as d,useState as f}from"react";import{Fragment as pe,jsx as p,jsxs as m}from"react/jsx-runtime";import"@webority/ui-elements/elements/image-crop";var me=[`logo`,`avatar`],he=[`overlay`,`buttons`],ge=[`stacked`,`inline`,`profile`],_e=[`initials`,`avatar`],ve=[`circle`,`rounded`,`square`],ye=[`keep`,`image/webp`],be=ce.join(` `),xe={logo:{controls:`overlay`,accept:c,maxSizeMb:l,crop:void 0,rotatable:!1,previews:!1,camera:!1,outputSize:void 0,outputType:`keep`,variant:`initials`,sizes:{sm:72,md:120,lg:160}},avatar:{controls:`buttons`,accept:oe,maxSizeMb:a,crop:1,rotatable:!0,previews:!0,camera:!0,outputSize:se,outputType:o,variant:`avatar`,sizes:{sm:64,md:96,lg:128}}},Se=`That image could not be cropped. Choose another one.`,Ce=`That image could not be opened. Choose another one.`,we={dialogSize:`lg`,dialogTitle:`Crop photo`,dialogSubtitle:`Drag the frame and zoom to choose what to keep.`,save:`Apply`,cancel:`Cancel`,cropFailed:Se,unreadable:()=>Ce},Te={dialogSize:void 0,dialogTitle:s.dialogTitle,dialogSubtitle:s.dialogSubtitle,save:s.save,cancel:s.cancel,cropFailed:s.cropFailed,unreadable:u};function Ee(oe){let{marker:a,props:se}=e(`AppImagePicker`,oe),{kind:o=`logo`,controls:ce,value:c,fallback:l,variant:u,name:Se,onPick:Ce,onRemove:Ee,removeName:h,loading:g=!1,disabled:De=!1,accept:Oe,maxSizeMb:ke,shape:_=`circle`,size:v=`md`,crop:Ae,rotatable:je,previews:Me,camera:Ne,outputSize:Pe,outputType:Fe,layout:y=`stacked`,title:Ie,subtitle:Le,overlayIcon:Re=`image`,overlayLabel:ze=`Update photo`,removeLabel:b=`Remove photo`,ariaLabel:Be,label:Ve,hint:x,error:He,required:Ue=!1,className:We=``,fieldClassName:S=``,style:C,...w}=se;n(`AppImagePicker`,w),t(`AppImagePicker`,`kind`,o,me),t(`AppImagePicker`,`controls`,ce,he),t(`AppImagePicker`,`variant`,u,_e),t(`AppImagePicker`,`layout`,y,ge),t(`AppImagePicker`,`shape`,_,ve),t(`AppImagePicker`,`outputType`,Fe,ye);let T=xe[o]??xe.logo,E=o===`avatar`?Te:we,D=T.sizes;t(`AppImagePicker`,`size`,typeof v==`string`?v:null,Object.keys(D));let Ge=(ce??T.controls)===`overlay`,Ke=u??T.variant,O=Oe??T.accept,k=ke??T.maxSizeMb,A=Pe??T.outputSize,qe=Fe??T.outputType,Je=je??T.rotatable,Ye=Me??T.previews,Xe=Ne??T.camera,j=Ae??T.crop,M=j===`free`?null:typeof j==`number`&&Number.isFinite(j)&&j>0?j:void 0;j!=null&&M===void 0&&t(`AppImagePicker`,`crop`,String(j),[`free`,`a positive number`]);let Ze=M!==void 0&&A===void 0,N=d(null),Qe=d(null),P=d(null),F=fe(),[I,L]=f(null),[$e,R]=f(!1),[et,z]=f(!1),[tt,B]=f(``),[V,H]=f(null),[U,nt]=f(!1),[W,G]=f(`loading`),[rt,K]=f(``),it=ue(e=>{if(P.current=e,!e)return;let t=()=>{G(`ready`),e.querySelector(`.wui-crop-stage`)?.focus()},n=()=>G(`error`);return e.addEventListener(`load`,t),e.addEventListener(`error`,n),()=>{e.removeEventListener(`load`,t),e.removeEventListener(`error`,n),P.current=null}},[]);de(()=>()=>V&&URL.revokeObjectURL(V.url),[V]),de(()=>()=>I&&URL.revokeObjectURL(I),[I]);let[at,ot]=f(c);c!==at&&(ot(c),L(null),R(!1),z(!1));let q=g||De,J=$e?null:I||(c&&!et?c:null),st=!!J,Y=He||tt,X=x&&!Y?`${F}-hint`:void 0,Z=Y?`${F}-error`:void 0,ct=Z||X,lt=!q&&st&&(!!I||!!Ee||!!h),ut=st?s.change:s.choose,dt=typeof v==`number`?v:D[v]??D.md,ft=()=>{q||N.current?.click()},pt=()=>{q||Qe.current?.click()},mt=e=>{if(Se&&N.current&&typeof DataTransfer==`function`){let t=new DataTransfer;t.items.add(e),N.current.files=t.files}R(!1),z(!1),L(URL.createObjectURL(e)),Ce(e)},ht=e=>{let t=M!==void 0&&e.type!==`image/svg+xml`,n=le(e,{accept:O,maxSizeMb:t&&Ze?0:k});if(n){B(n);return}if(B(``),t){G(`loading`),K(``),H({file:e,url:URL.createObjectURL(e)});return}mt(e)},{dragOver:gt,dropProps:_t}=ae({accept:O,maxSizeMb:Ze?0:k,disabled:q,onFiles:e=>ht(e[0]),onReject:({message:e})=>B(e)}),vt=e=>{let t=qe===`keep`?e.type:qe;return A===void 0?{name:e.name,type:t,maxBytes:k>0?k*1024*1024:0}:{name:e.name||`photo`,type:t,size:A}},yt=async()=>{let{file:e}=V;nt(!0),K(``);let t=null;try{t=await P.current?.toFile(vt(e))}catch{t=null}if(nt(!1),!t){K(E.cropFailed);return}if(H(null),Ze){let e=le(t,{accept:O,maxSizeMb:k});e?B(e):mt(t);return}mt(t)},bt=()=>{U||H(null)},xt=e=>{let t=e.target.files?.[0];e.target.value=``,t&&ht(t)},St=()=>{L(null),R(!0),B(``),N.current&&(N.current.value=``),Ee?.()},Q=M!==void 0&&m(ie,{open:!!V,title:E.dialogTitle,subtitle:E.dialogSubtitle,size:E.dialogSize,staticBackdrop:!0,dismissible:!U,onClose:bt,footer:m(pe,{children:[p(i,{type:`button`,variant:`secondary`,disabled:U,onClick:bt,children:E.cancel}),p(i,{type:`button`,variant:`primary`,loading:U,disabled:W!==`ready`,onClick:yt,children:E.save})]}),children:[W===`error`&&V&&p(te,{variant:`danger`,children:E.unreadable(V.file)}),rt&&p(te,{variant:`danger`,children:rt}),V&&W!==`error`&&p(`wui-image-crop`,{ref:it,src:V.url,aspect:M??`free`,round:M===1&&_===`circle`,rotatable:Je,previews:Ye?be:void 0})]}),Ct=h&&p(`input`,{type:`hidden`,name:h,value:`true`,disabled:!$e}),$=Ve&&m(`label`,{className:`label`,htmlFor:F,children:[Ve,Ue&&p(re,{})]}),wt=p(`input`,{id:F,ref:N,type:`file`,name:Se,hidden:!0,accept:O,disabled:q,onChange:xt});if(!Ge){let e=dt,t=Xe&&m(`button`,{type:`button`,className:`btn btn-secondary btn-sm wui-image-picker-buttons-camera`,disabled:q,onClick:pt,children:[p(r,{name:`camera`,size:16}),s.camera]});return m(`div`,{...a,className:`field wui-image-picker-field${S?` ${S}`:``}`,children:[$,m(`div`,{className:`wui-image-picker-buttons${gt?` is-dragging`:``}${We?` ${We}`:``}`,style:{"--wui-avatar-size":`${e}px`,...C},..._t,children:[m(`button`,{type:`button`,className:`wui-image-picker-buttons-face`,tabIndex:-1,"aria-label":Be??ut,"aria-describedby":ct,"aria-busy":g||void 0,disabled:q,onClick:ft,...w,children:[J?p(`img`,{className:`wui-image-picker-buttons-img`,src:J,alt:``,onError:()=>z(!0)}):p(`span`,{className:`wui-image-picker-buttons-placeholder`,"aria-hidden":`true`,children:l||p(r,{name:`user`,size:Math.round(e*.5)})}),p(`span`,{className:`wui-image-picker-buttons-badge`,"aria-hidden":`true`,children:g?p(r,{name:`refresh-cw`,size:14,className:`wui-spin`}):p(r,{name:`camera`,size:14})})]}),m(`div`,{className:`wui-image-picker-buttons-actions`,children:[p(i,{variant:`secondary`,size:`sm`,disabled:q,"aria-describedby":ct,onClick:ft,children:ut}),t,p(i,{variant:`secondary-danger`,size:`sm`,"data-wui-image-picker-remove":!0,hidden:!lt,onClick:St,children:b})]}),wt,Xe&&p(`input`,{ref:Qe,type:`file`,hidden:!0,accept:`image/*`,capture:`user`,disabled:q,onChange:xt}),Ct]}),p(ne,{error:Y,hint:x,errorId:Z,hintId:X}),Q]})}let Tt=dt,Et=Math.max(14,Math.round(Tt*.18)),Dt=Math.round(Tt*.5),Ot=`wui-image-picker${Ke===`avatar`?` wui-image-picker-avatar`:``}${_===`rounded`?` wui-image-picker-rounded`:_===`square`?` wui-image-picker-square`:``}${gt?` is-dragging`:``}`,kt=y===`inline`,At=y===`profile`,jt=[`field`,`wui-image-picker-field`,kt&&`wui-image-picker-field-inline`,At&&`wui-image-picker-field-profile`,We,S].filter(Boolean).join(` `),Mt=m(`div`,{className:`wui-image-picker-shell`,style:{"--wui-logo-size":`${Tt}px`},children:[p(`button`,{type:`button`,className:Ot,onClick:ft,disabled:q,"aria-busy":g||void 0,"aria-label":Be??`Upload photo`,"aria-describedby":Z||X,..._t,...w,children:m(`span`,{className:`wui-image-picker-ring`,"data-overlay-label":ze,children:[J?p(`img`,{className:`wui-image-picker-img`,src:J,alt:``,onError:()=>z(!0)}):p(`span`,{className:`wui-image-picker-logo`,children:l||Ke===`avatar`&&p(r,{name:`user`,size:Dt})}),g?p(`span`,{className:`wui-image-picker-overlay is-loading`,"aria-hidden":`true`,children:p(r,{name:`refresh-cw`,size:Et,className:`wui-spin`})}):!De&&m(`span`,{className:`wui-image-picker-overlay`,children:[p(r,{name:Re,size:Et}),p(`span`,{children:ze})]})]})}),ee(p(`button`,{type:`button`,className:`wui-image-picker-remove`,hidden:!lt,"aria-label":b,"data-wui-image-picker-remove":!0,onClick:St,children:p(r,{name:`x`,size:14})}),lt?b:null),wt,Ct]}),Nt=x&&!Y?p(`div`,{className:`wui-image-picker-hint`,id:X,children:x}):null,Pt=Y?p(ne,{error:Y,errorId:Z}):null,Ft=m(`div`,{className:`wui-image-picker-meta`,children:[Ie&&p(`div`,{className:`wui-image-picker-title`,children:Ie}),Le&&p(`div`,{className:`wui-image-picker-subtitle`,children:Le}),Nt,Pt]});return kt?m(`div`,{...a,className:jt,style:C,children:[$,m(`div`,{className:`wui-image-picker-row`,children:[Mt,Ft]}),Q]}):At?m(`div`,{...a,className:jt,style:C,children:[$,Mt,Ft,Q]}):m(`div`,{...a,className:jt,style:C,children:[$,Mt,Nt,Pt,Q]})}export{Ee as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import ee from"./withTooltip.js";import r from"./AppIcon.js";import te from"./AppAlert.js";import i from"./AppButton.js";import ne from"../lib/FieldMessage.js";import re from"./AppRequiredMark.js";import ie from"./AppModal.js";import ae from"../lib/useFileDrop.js";import{AVATAR_ACCEPT as oe,AVATAR_MAX_SIZE_MB as a,AVATAR_OUTPUT_SIZE as se,AVATAR_OUTPUT_TYPE as o,AVATAR_PREVIEW_SIZES as ce,AVATAR_TEXT as s,DEFAULT_IMAGE_ACCEPT as c,DEFAULT_MAX_SIZE_MB as l,avatarUnreadableMessage as u,validateFile as le}from"@webority/ui-elements/helpers";import{useCallback as ue,useEffect as de,useId as fe,useRef as d,useState as f}from"react";import{Fragment as pe,jsx as p,jsxs as m}from"react/jsx-runtime";import"@webority/ui-elements/elements/image-crop";var me=[`logo`,`avatar`],he=[`overlay`,`buttons`],ge=[`stacked`,`inline`,`profile`],_e=[`initials`,`avatar`],ve=[`circle`,`rounded`,`square`],ye=[`keep`,`image/webp`],be=ce.join(` `),xe={logo:{controls:`overlay`,accept:c,maxSizeMb:l,crop:void 0,rotatable:!1,previews:!1,camera:!1,outputSize:void 0,outputType:`keep`,variant:`initials`,sizes:{sm:72,md:120,lg:160}},avatar:{controls:`buttons`,accept:oe,maxSizeMb:a,crop:1,rotatable:!0,previews:!0,camera:!0,outputSize:se,outputType:o,variant:`avatar`,sizes:{sm:64,md:96,lg:128}}},Se=`That image could not be cropped. Choose another one.`,Ce=`That image could not be opened. Choose another one.`,we={dialogSize:`lg`,dialogTitle:`Crop photo`,dialogSubtitle:`Drag the frame and zoom to choose what to keep.`,save:`Apply`,cancel:`Cancel`,cropFailed:Se,unreadable:()=>Ce},Te={dialogSize:void 0,dialogTitle:s.dialogTitle,dialogSubtitle:s.dialogSubtitle,save:s.save,cancel:s.cancel,cropFailed:s.cropFailed,unreadable:u};function Ee(oe){let{marker:a,props:se}=e(`AppImagePicker`,oe),{kind:o=`logo`,controls:ce,value:c,fallback:l,variant:u,name:Se,onPick:Ce,onRemove:Ee,removeName:h,loading:g=!1,disabled:De=!1,accept:Oe,maxSizeMb:ke,shape:_=`circle`,size:v=`md`,crop:Ae,rotatable:je,previews:Me,camera:Ne,outputSize:Pe,outputType:Fe,layout:y=`stacked`,title:Ie,subtitle:Le,overlayIcon:Re=`image`,overlayLabel:ze=`Update photo`,removeLabel:b=`Remove photo`,ariaLabel:Be,label:Ve,hint:x,error:He,required:Ue=!1,className:We=``,fieldClassName:S=``,style:C,...w}=se;n(`AppImagePicker`,w),t(`AppImagePicker`,`kind`,o,me),t(`AppImagePicker`,`controls`,ce,he),t(`AppImagePicker`,`variant`,u,_e),t(`AppImagePicker`,`layout`,y,ge),t(`AppImagePicker`,`shape`,_,ve),t(`AppImagePicker`,`outputType`,Fe,ye);let T=xe[o]??xe.logo,E=o===`avatar`?Te:we,D=T.sizes;t(`AppImagePicker`,`size`,typeof v==`string`?v:null,Object.keys(D));let Ge=(ce??T.controls)===`overlay`,Ke=u??T.variant,O=Oe??T.accept,k=ke??T.maxSizeMb,A=Pe??T.outputSize,qe=Fe??T.outputType,Je=je??T.rotatable,Ye=Me??T.previews,Xe=Ne??T.camera,j=Ae??T.crop,M=j===`free`?null:typeof j==`number`&&Number.isFinite(j)&&j>0?j:void 0;j!=null&&M===void 0&&t(`AppImagePicker`,`crop`,String(j),[`free`,`a positive number`]);let Ze=M!==void 0&&A===void 0,N=d(null),Qe=d(null),P=d(null),F=fe(),[I,L]=f(null),[$e,R]=f(!1),[et,z]=f(!1),[tt,B]=f(``),[V,H]=f(null),[U,nt]=f(!1),[W,G]=f(`loading`),[rt,K]=f(``),it=ue(e=>{if(P.current=e,!e)return;let t=()=>{G(`ready`),e.querySelector(`.wui-crop-stage`)?.focus()},n=()=>G(`error`);return e.addEventListener(`load`,t),e.addEventListener(`error`,n),()=>{e.removeEventListener(`load`,t),e.removeEventListener(`error`,n),P.current=null}},[]);de(()=>()=>V&&URL.revokeObjectURL(V.url),[V]),de(()=>()=>I&&URL.revokeObjectURL(I),[I]);let[at,ot]=f(c);c!==at&&(ot(c),L(null),R(!1),z(!1));let q=g||De,J=$e?null:I||(c&&!et?c:null),st=!!J,Y=He||tt,X=x&&!Y?`${F}-hint`:void 0,Z=Y?`${F}-error`:void 0,ct=Z||X,lt=!q&&st&&(!!I||!!Ee||!!h),ut=st?s.change:s.choose,dt=typeof v==`number`?v:D[v]??D.md,ft=()=>{q||N.current?.click()},pt=()=>{q||Qe.current?.click()},mt=e=>{if(Se&&N.current&&typeof DataTransfer==`function`){let t=new DataTransfer;t.items.add(e),N.current.files=t.files}R(!1),z(!1),L(URL.createObjectURL(e)),Ce(e)},ht=e=>{let t=M!==void 0&&e.type!==`image/svg+xml`,n=le(e,{accept:O,maxSizeMb:t&&Ze?0:k});if(n){B(n);return}if(B(``),t){G(`loading`),K(``),H({file:e,url:URL.createObjectURL(e)});return}mt(e)},{dragOver:gt,dropProps:_t}=ae({accept:O,maxSizeMb:Ze?0:k,disabled:q,onFiles:e=>ht(e[0]),onReject:({message:e})=>B(e)}),vt=e=>{let t=qe===`keep`?e.type:qe;return A===void 0?{name:e.name,type:t,maxBytes:k>0?k*1024*1024:0}:{name:e.name||`photo`,type:t,size:A}},yt=async()=>{let{file:e}=V;nt(!0),K(``);let t=null;try{t=await P.current?.toFile(vt(e))}catch{t=null}if(nt(!1),!t){K(E.cropFailed);return}if(H(null),Ze){let e=le(t,{accept:O,maxSizeMb:k});e?B(e):mt(t);return}mt(t)},bt=()=>{U||H(null)},xt=e=>{let t=e.target.files?.[0];e.target.value=``,t&&ht(t)},St=()=>{L(null),R(!0),B(``),N.current&&(N.current.value=``),Ee?.()},Q=M!==void 0&&m(ie,{open:!!V,title:E.dialogTitle,subtitle:E.dialogSubtitle,size:E.dialogSize,staticBackdrop:!0,dismissible:!U,onClose:bt,footer:m(pe,{children:[p(i,{type:`button`,variant:`secondary`,disabled:U,onClick:bt,children:E.cancel}),p(i,{type:`button`,variant:`primary`,loading:U,disabled:W!==`ready`,onClick:yt,children:E.save})]}),children:[W===`error`&&V&&p(te,{tone:`danger`,children:E.unreadable(V.file)}),rt&&p(te,{tone:`danger`,children:rt}),V&&W!==`error`&&p(`wui-image-crop`,{ref:it,src:V.url,aspect:M??`free`,round:M===1&&_===`circle`,rotatable:Je,previews:Ye?be:void 0})]}),Ct=h&&p(`input`,{type:`hidden`,name:h,value:`true`,disabled:!$e}),$=Ve&&m(`label`,{className:`label`,htmlFor:F,children:[Ve,Ue&&p(re,{})]}),wt=p(`input`,{id:F,ref:N,type:`file`,name:Se,hidden:!0,accept:O,disabled:q,onChange:xt});if(!Ge){let e=dt,t=Xe&&m(`button`,{type:`button`,className:`btn btn-secondary btn-sm wui-image-picker-buttons-camera`,disabled:q,onClick:pt,children:[p(r,{name:`camera`,size:16}),s.camera]});return m(`div`,{...a,className:`field wui-image-picker-field${S?` ${S}`:``}`,children:[$,m(`div`,{className:`wui-image-picker-buttons${gt?` is-dragging`:``}${We?` ${We}`:``}`,style:{"--wui-avatar-size":`${e}px`,...C},..._t,children:[m(`button`,{type:`button`,className:`wui-image-picker-buttons-face`,tabIndex:-1,"aria-label":Be??ut,"aria-describedby":ct,"aria-busy":g||void 0,disabled:q,onClick:ft,...w,children:[J?p(`img`,{className:`wui-image-picker-buttons-img`,src:J,alt:``,onError:()=>z(!0)}):p(`span`,{className:`wui-image-picker-buttons-placeholder`,"aria-hidden":`true`,children:l||p(r,{name:`user`,size:Math.round(e*.5)})}),p(`span`,{className:`wui-image-picker-buttons-badge`,"aria-hidden":`true`,children:g?p(r,{name:`refresh-cw`,size:14,className:`wui-spin`}):p(r,{name:`camera`,size:14})})]}),m(`div`,{className:`wui-image-picker-buttons-actions`,children:[p(i,{variant:`secondary`,size:`sm`,disabled:q,"aria-describedby":ct,onClick:ft,children:ut}),t,p(i,{variant:`secondary-danger`,size:`sm`,"data-wui-image-picker-remove":!0,hidden:!lt,onClick:St,children:b})]}),wt,Xe&&p(`input`,{ref:Qe,type:`file`,hidden:!0,accept:`image/*`,capture:`user`,disabled:q,onChange:xt}),Ct]}),p(ne,{error:Y,hint:x,errorId:Z,hintId:X}),Q]})}let Tt=dt,Et=Math.max(14,Math.round(Tt*.18)),Dt=Math.round(Tt*.5),Ot=`wui-image-picker${Ke===`avatar`?` wui-image-picker-avatar`:``}${_===`rounded`?` wui-image-picker-rounded`:_===`square`?` wui-image-picker-square`:``}${gt?` is-dragging`:``}`,kt=y===`inline`,At=y===`profile`,jt=[`field`,`wui-image-picker-field`,kt&&`wui-image-picker-field-inline`,At&&`wui-image-picker-field-profile`,We,S].filter(Boolean).join(` `),Mt=m(`div`,{className:`wui-image-picker-shell`,style:{"--wui-logo-size":`${Tt}px`},children:[p(`button`,{type:`button`,className:Ot,onClick:ft,disabled:q,"aria-busy":g||void 0,"aria-label":Be??`Upload photo`,"aria-describedby":Z||X,..._t,...w,children:m(`span`,{className:`wui-image-picker-ring`,"data-overlay-label":ze,children:[J?p(`img`,{className:`wui-image-picker-img`,src:J,alt:``,onError:()=>z(!0)}):p(`span`,{className:`wui-image-picker-logo`,children:l||Ke===`avatar`&&p(r,{name:`user`,size:Dt})}),g?p(`span`,{className:`wui-image-picker-overlay is-loading`,"aria-hidden":`true`,children:p(r,{name:`refresh-cw`,size:Et,className:`wui-spin`})}):!De&&m(`span`,{className:`wui-image-picker-overlay`,children:[p(r,{name:Re,size:Et}),p(`span`,{children:ze})]})]})}),ee(p(`button`,{type:`button`,className:`wui-image-picker-remove`,hidden:!lt,"aria-label":b,"data-wui-image-picker-remove":!0,onClick:St,children:p(r,{name:`x`,size:14})}),lt?b:null),wt,Ct]}),Nt=x&&!Y?p(`div`,{className:`wui-image-picker-hint`,id:X,children:x}):null,Pt=Y?p(ne,{error:Y,errorId:Z}):null,Ft=m(`div`,{className:`wui-image-picker-meta`,children:[Ie&&p(`div`,{className:`wui-image-picker-title`,children:Ie}),Le&&p(`div`,{className:`wui-image-picker-subtitle`,children:Le}),Nt,Pt]});return kt?m(`div`,{...a,className:jt,style:C,children:[$,m(`div`,{className:`wui-image-picker-row`,children:[Mt,Ft]}),Q]}):At?m(`div`,{...a,className:jt,style:C,children:[$,Mt,Ft,Q]}):m(`div`,{...a,className:jt,style:C,children:[$,Mt,Nt,Pt,Q]})}export{Ee as default};

package/dist/components/AppPopover.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`div`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useEffect as i,useId as a,useRef as o,useState as s}from"react";import{OverlayTrigger as c,Popover as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},p={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},m=[`dialog`];function h({trigger:h,children:g,title:_,placement:v=`bottom`,triggerType:y=`click`,onToggle:b,className:x=``,show:S,role:C,labelledBy:w,autoFocus:T=!1,openDelay:E=80,closeDelay:D=220,...O}){t(`AppPopover`,O),e(`AppPopover`,`role`,C,m);let k=a(),A=`${k}-title`,j=o(null),[M,N]=s(!1),P=S!==void 0,F=P?S:M,I=C===`dialog`,L=y===`hover`||Array.isArray(y)&&y.includes(`hover`),R=L&&!P,z=o(null),B=o(M);B.current=M;let V=()=>{clearTimeout(z.current),z.current=null},H=(e,t)=>{V(),z.current=setTimeout(()=>{z.current=null,e!==B.current&&(N(e),b?.(e))},t)};i(()=>()=>clearTimeout(z.current),[]),i(()=>{if(!R||!M)return;let e=e=>{e.key===`Escape`&&(clearTimeout(z.current),z.current=null,N(!1),b?.(!1))};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[R,M,b]);let U=e=>{if(R){H(e,e?E:D);return}P||N(e),b?.(e)},W=I?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":w??(_?A:void 0)}:{},G=R?{onMouseEnter:V,onMouseLeave:()=>H(!1,D),onFocus:V,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||H(!1,D)}}:{},K=d(l,{id:k,className:x||void 0,...W,...G,children:[T&&u(n,{triggerRef:j}),_&&u(l.Header,{as:`div`,id:A,children:_}),g==null?null:u(l.Body,{children:g})]}),{onClick:q,"aria-expanded":J,...Y}=O,X=h.props[`aria-expanded`],Z,Q=y===`click`||Array.isArray(y)&&y.includes(`click`);J===void 0?X===void 0?Q&&(Z=F):Z=X:Z=J;let $=r(h,{...Y,...Z===void 0?{}:{"aria-expanded":Z},onClick:e=>{j.current=e.currentTarget,q?.(e),typeof h.props.onClick==`function`&&h.props.onClick(e)}}),ee=y===`click`;return u(c,{trigger:y,placement:f[v]||v,popperConfig:p,overlay:K,rootClose:ee||I,delay:P&&L?{show:E,hide:D}:void 0,onToggle:U,...P||L?{show:F}:{},children:$})}export{h as default};

package/dist/components/AppSectionLeadCapture.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppAlert.js";import i from"./AppButton.js";import a from"./AppInput.js";import o from"./AppPhoneNumberInput.js";import s,{SECTION_ALIGNS as c,SECTION_HEADINGS as l,SECTION_VARIANTS as u,sectionHeading as d}from"../lib/sectionShell.js";import f from"./AppTextarea.js";import{useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";var _=[`name`,`email`,`phone`,`company`,`message`],v={name:`Name`,email:`Email`,phone:`Phone number`,company:`Company`,message:`Message`},y={name:`name`,email:`email`,company:`organization`},b=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,x=`This field is required.`,S=`Enter an email address such as name@example.com.`,C=`We could not send your message. Please try again.`;function w(e,t){let n={};for(let{name:r,required:i=!1}of e){let e=t[r].trim();i&&e===``?n[r]=x:r===`email`&&e!==``&&!b.test(e)&&(n[r]=S)}return n}function T(b){let{marker:x,props:S}=e(`AppSectionLeadCapture`,b),{title:T,text:E,fields:D,onSubmit:O,submitLabel:k=`Send`,successTitle:A,successText:j,consent:M,as:N=`h2`,eyebrow:P,subtitle:F,align:I=`center`,variant:L=`default`,className:R=``,...z}=S;n(`AppSectionLeadCapture`,z),t(`AppSectionLeadCapture`,`as`,N,l),t(`AppSectionLeadCapture`,`align`,I,c),t(`AppSectionLeadCapture`,`variant`,L,u);for(let e of D)t(`AppSectionLeadCapture`,`fields.name`,e.name,_);let B=p(),[V,H]=m(()=>Object.fromEntries(D.map(e=>[e.name,``]))),[U,W]=m({}),[G,K]=m(null),[q,J]=m(!1),[Y,X]=m(!1),Z=(e,t)=>H(n=>({...n,[e]:t}));async function Q(e){if(e.preventDefault(),q)return;let t=w(D,V);if(W(t),K(null),Object.keys(t).length>0)return;let n=Object.fromEntries(Object.entries(V).map(([e,t])=>[e,t.trim()]));J(!0);try{await O(n),X(!0)}catch(e){K(typeof e?.message==`string`&&e.message!==``?e.message:C)}finally{J(!1)}}function $({name:e,label:t=v[e],required:n=!1}){let r=`${B}-${e}`,i=U[e];return e===`phone`?h(o,{id:r,name:e,label:t,required:n,value:V[e],onChange:t=>Z(e,t),error:i},e):e===`message`?h(f,{id:r,name:e,label:t,required:n,value:V[e],onChange:t=>Z(e,t.target.value),error:i},e):h(a,{id:r,name:e,type:e===`email`?`email`:`text`,autoComplete:y[e],label:t,required:n,value:V[e],onChange:t=>Z(e,t.target.value),error:i},e)}return g(s,{component:`AppSectionLeadCapture`,kind:`lead-capture`,title:T,as:d(N,`h2`),eyebrow:P,subtitle:F,align:I,variant:L,className:R,rest:{...x,...z},children:[E!=null&&E!==``&&h(`p`,{className:`wui-section-lead-text`,children:E}),Y?h(`div`,{className:`wui-section-lead-success`,children:h(r,{variant:`success`,title:A,children:j})}):g(`form`,{className:`wui-section-lead-form`,noValidate:!0,onSubmit:Q,children:[h(`div`,{className:`wui-section-lead-fields`,children:D.map($)}),G!=null&&h(r,{variant:`danger`,children:G}),h(i,{type:`submit`,variant:`primary`,loading:q,children:k}),M!=null&&M!==``&&h(`p`,{className:`wui-section-lead-consent`,children:M})]})]})}export{T as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppAlert.js";import i from"./AppButton.js";import a from"./AppInput.js";import o from"./AppPhoneNumberInput.js";import s,{SECTION_ALIGNS as c,SECTION_HEADINGS as l,SECTION_VARIANTS as u,sectionHeading as d}from"../lib/sectionShell.js";import f from"./AppTextarea.js";import{useId as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";var _=[`name`,`email`,`phone`,`company`,`message`],v={name:`Name`,email:`Email`,phone:`Phone number`,company:`Company`,message:`Message`},y={name:`name`,email:`email`,company:`organization`},b=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,x=`This field is required.`,S=`Enter an email address such as name@example.com.`,C=`We could not send your message. Please try again.`;function w(e,t){let n={};for(let{name:r,required:i=!1}of e){let e=t[r].trim();i&&e===``?n[r]=x:r===`email`&&e!==``&&!b.test(e)&&(n[r]=S)}return n}function T(b){let{marker:x,props:S}=e(`AppSectionLeadCapture`,b),{title:T,text:E,fields:D,onSubmit:O,submitLabel:k=`Send`,successTitle:A,successText:j,consent:M,as:N=`h2`,eyebrow:P,subtitle:F,align:I=`center`,variant:L=`default`,className:R=``,...z}=S;n(`AppSectionLeadCapture`,z),t(`AppSectionLeadCapture`,`as`,N,l),t(`AppSectionLeadCapture`,`align`,I,c),t(`AppSectionLeadCapture`,`variant`,L,u);for(let e of D)t(`AppSectionLeadCapture`,`fields.name`,e.name,_);let B=p(),[V,H]=m(()=>Object.fromEntries(D.map(e=>[e.name,``]))),[U,W]=m({}),[G,K]=m(null),[q,J]=m(!1),[Y,X]=m(!1),Z=(e,t)=>H(n=>({...n,[e]:t}));async function Q(e){if(e.preventDefault(),q)return;let t=w(D,V);if(W(t),K(null),Object.keys(t).length>0)return;let n=Object.fromEntries(Object.entries(V).map(([e,t])=>[e,t.trim()]));J(!0);try{await O(n),X(!0)}catch(e){K(typeof e?.message==`string`&&e.message!==``?e.message:C)}finally{J(!1)}}function $({name:e,label:t=v[e],required:n=!1}){let r=`${B}-${e}`,i=U[e];return e===`phone`?h(o,{id:r,name:e,label:t,required:n,value:V[e],onChange:t=>Z(e,t),error:i},e):e===`message`?h(f,{id:r,name:e,label:t,required:n,value:V[e],onChange:t=>Z(e,t.target.value),error:i},e):h(a,{id:r,name:e,type:e===`email`?`email`:`text`,autoComplete:y[e],label:t,required:n,value:V[e],onChange:t=>Z(e,t.target.value),error:i},e)}return g(s,{component:`AppSectionLeadCapture`,kind:`lead-capture`,title:T,as:d(N,`h2`),eyebrow:P,subtitle:F,align:I,variant:L,className:R,rest:{...x,...z},children:[E!=null&&E!==``&&h(`p`,{className:`wui-section-lead-text`,children:E}),Y?h(`div`,{className:`wui-section-lead-success`,children:h(r,{tone:`success`,title:A,children:j})}):g(`form`,{className:`wui-section-lead-form`,noValidate:!0,onSubmit:Q,children:[h(`div`,{className:`wui-section-lead-fields`,children:D.map($)}),G!=null&&h(r,{tone:`danger`,children:G}),h(i,{type:`submit`,variant:`primary`,loading:q,children:k}),M!=null&&M!==``&&h(`p`,{className:`wui-section-lead-consent`,children:M})]})]})}export{T as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.113.0"
+    "version": "0.115.0"
   },
   "components": [
     {
@@ -220,12 +220,12 @@
         ],
         "do": [
           {
-            "note": "Match the variant to intent and say what to do next. A danger alert names the problem and the recovery.",
+            "note": "Match the tone to intent and say what to do next. A danger alert names the problem and the recovery.",
             "example": [
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "danger"
+                  "tone": "danger"
                 },
                 "children": "We couldn't save your changes: check the highlighted fields and try again."
               }
@@ -237,7 +237,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "info"
+                  "tone": "info"
                 },
                 "children": "Reports use the latest IEC 62305-2 methodology."
               }
@@ -251,7 +251,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "success"
+                  "tone": "success"
                 },
                 "children": "Something went wrong while saving."
               }
@@ -263,7 +263,7 @@
               {
                 "component": "AppAlert",
                 "props": {
-                  "variant": "warning"
+                  "tone": "warning"
                 },
                 "children": "Reports use the latest IEC 62305-2 methodology."
               }

package/dist/types/components/AppAlert.d.ts

@@ -11,7 +11,7 @@
  *   `accent` adds the thick left edge that marks such an aside.
  *
  * @param {object} props
- * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.variant]
+ * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.tone]
  * @param {import('react').ReactNode} props.children The alert body.
  * @param {import('react').ReactNode} [props.title]
  * @param {string|import('react').ReactNode} [props.icon]
@@ -34,11 +34,11 @@ export default function AppAlert(props: {
      * The status tone. Neutral is a plain notice in ink on a grey surface, with no semantic colour.
      * @default "info"
      */
-    variant?: "info" | "success" | "warning" | "danger" | "neutral";
+    tone?: "info" | "success" | "warning" | "danger" | "neutral";
     children: import('react').ReactNode;
     /** A bold heading line above the body. */
     title?: import('react').ReactNode;
-    /** A leading glyph, given as a semantic icon name. It defaults to the glyph of the variant; pass null for no badge. */
+    /** A leading glyph, given as a semantic icon name. It defaults to the glyph of the tone; pass null for no badge. */
     icon?: string | import('react').ReactNode;
     /** The iconsax style of a named icon. It does not change an image. */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
@@ -62,12 +62,12 @@ export default function AppAlert(props: {
     /** Shows the close button. It is on by default when a close handler is set. */
     dismissible?: boolean;
     /**
-     * Draws the soft border of the variant. False keeps only the tint fill.
+     * Draws the soft border of the tone. False keeps only the tint fill.
      * @default true
      */
     bordered?: boolean;
     /**
-     * A thick left edge in the variant colour, marking the alert as an aside.
+     * A thick left edge in the tone colour, marking the alert as an aside.
      * @default false
      */
     accent?: boolean;

package/dist/types/components/AppBanner.d.ts

@@ -10,6 +10,7 @@
  * @param {import('react').ReactNode} props.children The message; may include an inline action link.
  * @param {boolean} [props.dismissible]
  * @param {() => void} [props.onDismiss] Called after the banner is dismissed.
+ * @param {import('react').ReactNode} [props.action] A button or link at the banner's right edge.
  * @param {string} [props.className]
  */
 export default function AppBanner(props: {
@@ -27,6 +28,8 @@ export default function AppBanner(props: {
      */
     dismissible?: boolean;
     onDismiss?: () => void;
+    /** A button or link at the banner's right edge; it wraps below the message on a phone. */
+    action?: import('react').ReactNode;
     /**
      * Extra classes on the banner.
      * @default ""

package/dist/types/components/AppPopover.d.ts

@@ -17,8 +17,10 @@
  * @param {'dialog'} [props.role]
  * @param {string} [props.labelledBy]
  * @param {boolean} [props.autoFocus]
+ * @param {number} [props.openDelay] Milliseconds a hover popover waits before it opens.
+ * @param {number} [props.closeDelay] Milliseconds a hover popover waits before it closes after the pointer leaves the trigger and the panel.
  */
-export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, show, role, labelledBy, autoFocus, ...rest }: {
+export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, show, role, labelledBy, autoFocus, openDelay, closeDelay, ...rest }: {
     /** The element the panel opens from. It must be a single element that forwards a ref, such as a plain element, AppButton or AppActionIcon. */
     trigger: import('react').ReactElement;
     children: import('react').ReactNode;
@@ -47,4 +49,14 @@ export default function AppPopover({ trigger, children, title, placement, trigge
      * @default false
      */
     autoFocus?: boolean;
+    /**
+     * Milliseconds a hover popover waits before it opens.
+     * @default 80
+     */
+    openDelay?: number;
+    /**
+     * Milliseconds a hover popover waits before it closes after the pointer leaves the trigger and the panel.
+     * @default 220
+     */
+    closeDelay?: number;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.113.0",
+  "version": "0.115.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -29,9 +29,9 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/markdown-core": "0.113.0",
-    "@webority/theme": "0.113.0",
-    "@webority/ui-elements": "0.113.0"
+    "@webority/markdown-core": "0.115.0",
+    "@webority/ui-elements": "0.115.0",
+    "@webority/theme": "0.115.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.30.0",
@@ -57,8 +57,8 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/canvas-kit": "0.113.0",
-    "@webority/tokens": "0.113.0"
+    "@webority/canvas-kit": "0.115.0",
+    "@webority/tokens": "0.115.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json && node ../../scripts/inject-meta-docs.mjs && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit && node ../canvas-kit/dist/cli.js guidance --config canvas-kit.json --out dist/guidance.json && node ../../scripts/sync-rcl-assets.mjs analytics",