@webority/ui-react 0.37.0 → 0.39.0

package/dist/components/AppTablePagination.js

@@ -1,85 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppIcon.js";
-import { pageWindow as r } from "../lib/pageWindow.js";
-import i from "./AppSelectMini.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/AppTablePagination.jsx
-var s = ["numbered", "prev-next"], c = [
-	5,
-	10,
-	25,
-	50
-];
-function l({ page: l, totalPages: u, pageSize: d, onPageChange: f, onPageSizeChange: p, pageSizes: m = c, mode: h = "numbered", showPageSize: g = !0, className: _ = "", ...v }) {
-	t("AppTablePagination", v), e("AppTablePagination", "mode", h, s);
-	let y = h === "numbered", b = y ? r(l, u) : null;
-	return /* @__PURE__ */ o("div", {
-		className: `table-pagination${_ ? ` ${_}` : ""}`,
-		...v,
-		children: [
-			g && /* @__PURE__ */ a("span", {
-				className: "tpg-rows",
-				children: /* @__PURE__ */ a(i, {
-					value: d,
-					onChange: (e) => p(Number(e)),
-					ariaLabel: "Rows per page",
-					options: m.map((e) => ({
-						value: e,
-						label: `${e} per page`
-					}))
-				})
-			}),
-			!y && /* @__PURE__ */ o("span", {
-				className: "tpg-range",
-				children: [
-					"Page ",
-					l,
-					" of ",
-					u
-				]
-			}),
-			/* @__PURE__ */ o("div", {
-				className: "tpg-nav",
-				children: [
-					/* @__PURE__ */ a("button", {
-						type: "button",
-						className: "tpg-arrow",
-						onClick: () => f(Math.max(1, l - 1)),
-						disabled: l <= 1,
-						"aria-label": "Previous page",
-						children: /* @__PURE__ */ a(n, {
-							name: "arrow-left",
-							size: 18
-						})
-					}),
-					y && b.map((e) => typeof e == "number" ? /* @__PURE__ */ a("button", {
-						type: "button",
-						className: `tpg-page${e === l ? " is-active" : ""}`,
-						onClick: () => f(e),
-						"aria-current": e === l ? "page" : void 0,
-						"aria-label": `Page ${e}`,
-						children: e
-					}, e) : /* @__PURE__ */ a("span", {
-						className: "tpg-ellipsis",
-						"aria-hidden": "true",
-						children: "…"
-					}, e)),
-					/* @__PURE__ */ a("button", {
-						type: "button",
-						className: "tpg-arrow",
-						onClick: () => f(Math.min(u, l + 1)),
-						disabled: l >= u,
-						"aria-label": "Next page",
-						children: /* @__PURE__ */ a(n, {
-							name: "arrow-right",
-							size: 18
-						})
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { l as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{pageWindow as r}from"../lib/pageWindow.js";import i from"./AppSelectMini.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=[`numbered`,`prev-next`],c=[5,10,25,50];function l({page:l,totalPages:u,pageSize:d,onPageChange:f,onPageSizeChange:p,pageSizes:m=c,mode:h=`numbered`,showPageSize:g=!0,className:_=``,...v}){t(`AppTablePagination`,v),e(`AppTablePagination`,`mode`,h,s);let y=h===`numbered`,b=y?r(l,u):null;return o(`div`,{className:`table-pagination${_?` ${_}`:``}`,...v,children:[g&&a(`span`,{className:`tpg-rows`,children:a(i,{value:d,onChange:e=>p(Number(e)),ariaLabel:`Rows per page`,options:m.map(e=>({value:e,label:`${e} per page`}))})}),!y&&o(`span`,{className:`tpg-range`,children:[`Page `,l,` of `,u]}),o(`div`,{className:`tpg-nav`,children:[a(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>f(Math.max(1,l-1)),disabled:l<=1,"aria-label":`Previous page`,children:a(n,{name:`arrow-left`,size:18})}),y&&b.map(e=>typeof e==`number`?a(`button`,{type:`button`,className:`tpg-page${e===l?` is-active`:``}`,onClick:()=>f(e),"aria-current":e===l?`page`:void 0,"aria-label":`Page ${e}`,children:e},e):a(`span`,{className:`tpg-ellipsis`,"aria-hidden":`true`,children:`…`},e)),a(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>f(Math.min(u,l+1)),disabled:l>=u,"aria-label":`Next page`,children:a(n,{name:`arrow-right`,size:18})})]})]})}export{l as default};

package/dist/components/AppTableToolbar.js

@@ -1,41 +1 @@
-import e from "./warnUnknownProps.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region src/components/AppTableToolbar.jsx
-function r({ filters: r, actions: i, selectedCount: a = 0, bulkActions: o, onClearSelection: s, className: c = "", ...l }) {
-	e("AppTableToolbar", l);
-	let u = a > 0;
-	return /* @__PURE__ */ n("div", {
-		className: `wui-table-toolbar${c ? ` ${c}` : ""}`,
-		...l,
-		children: [/* @__PURE__ */ n("div", {
-			className: "wui-table-toolbar-main",
-			hidden: u,
-			children: [/* @__PURE__ */ t("div", {
-				className: "wui-table-toolbar-filters",
-				children: r
-			}), /* @__PURE__ */ t("div", {
-				className: "wui-table-toolbar-actions",
-				children: i
-			})]
-		}), /* @__PURE__ */ n("div", {
-			className: "wui-table-toolbar-bulk",
-			hidden: !u,
-			children: [
-				/* @__PURE__ */ n("span", {
-					className: "wui-table-toolbar-count",
-					"aria-live": "polite",
-					children: [a, " selected"]
-				}),
-				o,
-				s && /* @__PURE__ */ t("button", {
-					type: "button",
-					className: "btn btn-ghost btn-sm wui-table-toolbar-clear",
-					onClick: s,
-					children: "Clear"
-				})
-			]
-		})]
-	});
-}
-//#endregion
-export { r as default };
+import e from"./warnUnknownProps.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function r({filters:r,actions:i,selectedCount:a=0,bulkActions:o,onClearSelection:s,className:c=``,...l}){e(`AppTableToolbar`,l);let u=a>0;return n(`div`,{className:`wui-table-toolbar${c?` ${c}`:``}`,...l,children:[n(`div`,{className:`wui-table-toolbar-main`,hidden:u,children:[t(`div`,{className:`wui-table-toolbar-filters`,children:r}),t(`div`,{className:`wui-table-toolbar-actions`,children:i})]}),n(`div`,{className:`wui-table-toolbar-bulk`,hidden:!u,children:[n(`span`,{className:`wui-table-toolbar-count`,"aria-live":`polite`,children:[a,` selected`]}),o,s&&t(`button`,{type:`button`,className:`btn btn-ghost btn-sm wui-table-toolbar-clear`,onClick:s,children:`Clear`})]})]})}export{r as default};

package/dist/components/AppTabs.js

@@ -1,195 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppTooltip.js";
-import r from "./AppIcon.js";
-import i from "./renderIconProp.js";
-import { useCallback as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/AppTabs.jsx
-var p = ["underline", "pills"], m = ["horizontal", "vertical"], h = [
-	"sm",
-	"md",
-	"lg"
-], g = ["automatic", "manual"], _ = [
-	"success",
-	"warning",
-	"danger",
-	"info"
-], v = 1, y = 28, b = .7;
-function x({ tabs: x, value: S, onChange: C, linkComponent: w, variant: T = "underline", orientation: E = "horizontal", size: D = "md", fitted: O = !1, activation: k = "automatic", ariaLabel: A, className: j = "", style: M, ...N }) {
-	t("AppTabs", N), e("AppTabs", "variant", T, p), e("AppTabs", "orientation", E, m), e("AppTabs", "size", D, h), e("AppTabs", "activation", k, g);
-	for (let t of x) e("AppTabs", "tabs[].tone", t.tone, _);
-	let P = c(null), F = c(null), I = E === "vertical", [L, R] = l(S);
-	o(() => {
-		R(S);
-	}, [S]);
-	let z = x.find((e) => !e.disabled)?.key, B = x.some((e) => e.key === L && !e.disabled) ? L : void 0, V = x.some((e) => e.key === S && !e.disabled) ? S : void 0, H = B ?? V ?? z, U = (e) => {
-		P.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus();
-	}, W = a(() => {
-		let e = P.current, t = F.current;
-		if (!e || !t || I) return;
-		let n = e.scrollWidth - e.clientWidth;
-		t.classList.toggle("is-overflow-start", e.scrollLeft > v), t.classList.toggle("is-overflow-end", n > v && e.scrollLeft < n - v);
-	}, [I]), G = a(() => {
-		let e = P.current;
-		if (!e) return;
-		let t = e.querySelector(".app-tab.active");
-		t ? (I ? (e.style.setProperty("--wui-tab-y", `${t.offsetTop}px`), e.style.setProperty("--wui-tab-h", `${t.offsetHeight}px`)) : (e.style.setProperty("--wui-tab-x", `${t.offsetLeft}px`), e.style.setProperty("--wui-tab-w", `${t.offsetWidth}px`)), e.toggleAttribute("data-active-danger", !!x.find((e) => e.key === S)?.danger)) : e.style.setProperty(I ? "--wui-tab-h" : "--wui-tab-w", "0px"), e.setAttribute("data-wui-tabs", ""), W();
-	}, [
-		I,
-		x,
-		S,
-		W
-	]), K = a(() => {
-		let e = P.current;
-		if (!e || I) return;
-		let t = e.querySelector(".app-tab.active");
-		if (!t) return;
-		let n = y, r = t.offsetLeft, i = r + t.offsetWidth;
-		r - n < e.scrollLeft ? e.scrollLeft = Math.max(0, r - n) : i + n > e.scrollLeft + e.clientWidth && (e.scrollLeft = i + n - e.clientWidth);
-	}, [I]);
-	s(() => {
-		G();
-	}, [G]), s(() => {
-		K();
-	}, [S, K]);
-	let q = c(G);
-	o(() => {
-		q.current = G;
-	}, [G]), o(() => {
-		if (typeof ResizeObserver > "u") return;
-		let e = new ResizeObserver(() => q.current());
-		return P.current && e.observe(P.current), F.current && e.observe(F.current), () => e.disconnect();
-	}, [I]);
-	function J(e) {
-		let t = e.target?.dataset?.key;
-		if (t == null) return;
-		let n = x.findIndex((e) => e.key === t);
-		if (n < 0) return;
-		let r = x.length, i = (e, t) => {
-			for (let n = 1; n <= r; n++) {
-				let i = x[((e + t * n) % r + r) % r];
-				if (!i.disabled) return i;
-			}
-			return null;
-		}, a = I ? "ArrowDown" : "ArrowRight", o = I ? "ArrowUp" : "ArrowLeft", s = null;
-		if (e.key === a ? s = i(n, 1) : e.key === o ? s = i(n, -1) : e.key === "Home" ? s = x.find((e) => !e.disabled) ?? null : e.key === "End" && (s = [...x].reverse().find((e) => !e.disabled) ?? null), !s) return;
-		e.preventDefault(), R(s.key), U(s.key);
-		let c = s.href != null || s.to != null;
-		k === "automatic" && !c && C?.(s.key);
-	}
-	let Y = (e) => {
-		let t = P.current;
-		t && t.scrollBy({ left: e * t.clientWidth * b });
-	}, X = [
-		"app-tabs",
-		T === "pills" ? "app-tabs-pills" : "",
-		I ? "app-tabs-vertical" : "",
-		D === "sm" ? "app-tabs-sm" : "",
-		D === "lg" ? "app-tabs-lg" : "",
-		O ? "app-tabs-fitted" : "",
-		j
-	].filter(Boolean).join(" "), Z = /* @__PURE__ */ f("div", {
-		ref: P,
-		role: "tablist",
-		"aria-orientation": I ? "vertical" : void 0,
-		"aria-label": A,
-		className: X,
-		style: M,
-		...N,
-		onKeyDown: J,
-		onScroll: W,
-		children: [x.map((e) => {
-			let t = e.key === S, r = e.href != null || e.to != null, a = {
-				role: "tab",
-				"data-key": e.key,
-				"aria-selected": t,
-				tabIndex: e.key === H ? 0 : -1,
-				className: `app-tab${t ? " active" : ""}${e.danger ? " danger" : ""}${r && e.disabled ? " disabled" : ""}`
-			}, o = /* @__PURE__ */ f(u, { children: [
-				e.image ? /* @__PURE__ */ d("img", {
-					className: "app-tab-img",
-					src: e.image,
-					alt: e.imageAlt ?? ""
-				}) : i(e.icon, {
-					size: 16,
-					className: "app-tab-icon"
-				}),
-				e.label,
-				e.count != null && /* @__PURE__ */ d("span", {
-					className: `app-tab-count${e.tone ? ` ${e.tone}` : ""}`,
-					children: e.count
-				})
-			] }), s;
-			if (r) {
-				let t = e.to != null && w ? w : "a", n = e.rel ?? (e.target === "_blank" ? "noopener noreferrer" : void 0), r = e.disabled ? { "aria-disabled": !0 } : t === "a" ? {
-					href: e.href ?? e.to,
-					target: e.target,
-					rel: n
-				} : {
-					to: e.to,
-					target: e.target,
-					rel: n
-				}, i = (t) => {
-					if (e.disabled) {
-						t.preventDefault();
-						return;
-					}
-					t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || (R(e.key), C?.(e.key));
-				};
-				s = /* @__PURE__ */ d(t, {
-					...a,
-					...r,
-					onClick: i,
-					children: o
-				}, e.key);
-			} else s = /* @__PURE__ */ d("button", {
-				type: "button",
-				...a,
-				disabled: e.disabled,
-				onClick: () => {
-					e.disabled || (R(e.key), C?.(e.key));
-				},
-				children: o
-			}, e.key);
-			return e.tooltip ? /* @__PURE__ */ d(n, {
-				content: e.tooltip,
-				children: s
-			}, e.key) : s;
-		}), /* @__PURE__ */ d("span", {
-			className: "app-tab-indicator",
-			"aria-hidden": "true"
-		})]
-	});
-	return I ? Z : /* @__PURE__ */ f("div", {
-		ref: F,
-		className: "app-tabs-wrap",
-		children: [
-			/* @__PURE__ */ d("button", {
-				type: "button",
-				className: "app-tabs-scroll-btn prev",
-				"aria-label": "Scroll tabs backward",
-				tabIndex: -1,
-				onClick: () => Y(-1),
-				children: /* @__PURE__ */ d(r, {
-					name: "chevron-left",
-					size: 16
-				})
-			}),
-			Z,
-			/* @__PURE__ */ d("button", {
-				type: "button",
-				className: "app-tabs-scroll-btn next",
-				"aria-label": "Scroll tabs forward",
-				tabIndex: -1,
-				onClick: () => Y(1),
-				children: /* @__PURE__ */ d(r, {
-					name: "chevron-right",
-					size: 16
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { x as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppTooltip.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{useCallback as a,useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`underline`,`pills`],m=[`horizontal`,`vertical`],h=[`sm`,`md`,`lg`],g=[`automatic`,`manual`],_=[`success`,`warning`,`danger`,`info`],v=1,y=28,b=.7;function x({tabs:x,value:S,onChange:C,linkComponent:w,variant:T=`underline`,orientation:E=`horizontal`,size:D=`md`,fitted:O=!1,activation:k=`automatic`,ariaLabel:A,className:j=``,style:M,...N}){t(`AppTabs`,N),e(`AppTabs`,`variant`,T,p),e(`AppTabs`,`orientation`,E,m),e(`AppTabs`,`size`,D,h),e(`AppTabs`,`activation`,k,g);for(let t of x)e(`AppTabs`,`tabs[].tone`,t.tone,_);let P=c(null),F=c(null),I=E===`vertical`,[L,R]=l(S);o(()=>{R(S)},[S]);let z=x.find(e=>!e.disabled)?.key,B=x.some(e=>e.key===L&&!e.disabled)?L:void 0,V=x.some(e=>e.key===S&&!e.disabled)?S:void 0,H=B??V??z,U=e=>{P.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},W=a(()=>{let e=P.current,t=F.current;if(!e||!t||I)return;let n=e.scrollWidth-e.clientWidth;t.classList.toggle(`is-overflow-start`,e.scrollLeft>v),t.classList.toggle(`is-overflow-end`,n>v&&e.scrollLeft<n-v)},[I]),G=a(()=>{let e=P.current;if(!e)return;let t=e.querySelector(`.app-tab.active`);t?(I?(e.style.setProperty(`--wui-tab-y`,`${t.offsetTop}px`),e.style.setProperty(`--wui-tab-h`,`${t.offsetHeight}px`)):(e.style.setProperty(`--wui-tab-x`,`${t.offsetLeft}px`),e.style.setProperty(`--wui-tab-w`,`${t.offsetWidth}px`)),e.toggleAttribute(`data-active-danger`,!!x.find(e=>e.key===S)?.danger)):e.style.setProperty(I?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),W()},[I,x,S,W]),K=a(()=>{let e=P.current;if(!e||I)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=y,r=t.offsetLeft,i=r+t.offsetWidth;r-n<e.scrollLeft?e.scrollLeft=Math.max(0,r-n):i+n>e.scrollLeft+e.clientWidth&&(e.scrollLeft=i+n-e.clientWidth)},[I]);s(()=>{G()},[G]),s(()=>{K()},[S,K]);let q=c(G);o(()=>{q.current=G},[G]),o(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>q.current());return P.current&&e.observe(P.current),F.current&&e.observe(F.current),()=>e.disconnect()},[I]);function J(e){let t=e.target?.dataset?.key;if(t==null)return;let n=x.findIndex(e=>e.key===t);if(n<0)return;let r=x.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=x[((e+t*n)%r+r)%r];if(!i.disabled)return i}return null},a=I?`ArrowDown`:`ArrowRight`,o=I?`ArrowUp`:`ArrowLeft`,s=null;if(e.key===a?s=i(n,1):e.key===o?s=i(n,-1):e.key===`Home`?s=x.find(e=>!e.disabled)??null:e.key===`End`&&(s=[...x].reverse().find(e=>!e.disabled)??null),!s)return;e.preventDefault(),R(s.key),U(s.key);let c=s.href!=null||s.to!=null;k===`automatic`&&!c&&C?.(s.key)}let Y=e=>{let t=P.current;t&&t.scrollBy({left:e*t.clientWidth*b})},X=[`app-tabs`,T===`pills`?`app-tabs-pills`:``,I?`app-tabs-vertical`:``,D===`sm`?`app-tabs-sm`:``,D===`lg`?`app-tabs-lg`:``,O?`app-tabs-fitted`:``,j].filter(Boolean).join(` `),Z=f(`div`,{ref:P,role:`tablist`,"aria-orientation":I?`vertical`:void 0,"aria-label":A,className:X,style:M,...N,onKeyDown:J,onScroll:W,children:[x.map(e=>{let t=e.key===S,r=e.href!=null||e.to!=null,a={role:`tab`,"data-key":e.key,"aria-selected":t,tabIndex:e.key===H?0:-1,className:`app-tab${t?` active`:``}${e.danger?` danger`:``}${r&&e.disabled?` disabled`:``}`},o=f(u,{children:[e.image?d(`img`,{className:`app-tab-img`,src:e.image,alt:e.imageAlt??``}):i(e.icon,{size:16,className:`app-tab-icon`}),e.label,e.count!=null&&d(`span`,{className:`app-tab-count${e.tone?` ${e.tone}`:``}`,children:e.count})]}),s;if(r){let t=e.to!=null&&w?w:`a`,n=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0),r=e.disabled?{"aria-disabled":!0}:t===`a`?{href:e.href??e.to,target:e.target,rel:n}:{to:e.to,target:e.target,rel:n},i=t=>{if(e.disabled){t.preventDefault();return}t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||(R(e.key),C?.(e.key))};s=d(t,{...a,...r,onClick:i,children:o},e.key)}else s=d(`button`,{type:`button`,...a,disabled:e.disabled,onClick:()=>{e.disabled||(R(e.key),C?.(e.key))},children:o},e.key);return e.tooltip?d(n,{content:e.tooltip,children:s},e.key):s}),d(`span`,{className:`app-tab-indicator`,"aria-hidden":`true`})]});return I?Z:f(`div`,{ref:F,className:`app-tabs-wrap`,children:[d(`button`,{type:`button`,className:`app-tabs-scroll-btn prev`,"aria-label":`Scroll tabs backward`,tabIndex:-1,onClick:()=>Y(-1),children:d(r,{name:`chevron-left`,size:16})}),Z,d(`button`,{type:`button`,className:`app-tabs-scroll-btn next`,"aria-label":`Scroll tabs forward`,tabIndex:-1,onClick:()=>Y(1),children:d(r,{name:`chevron-right`,size:16})})]})}export{x as default};

package/dist/components/AppTagInput.js

@@ -1,63 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppInfoTip.js";
-import r from "./AppRequiredMark.js";
-import i, { readValues as a, writeValues as o } from "./useWuiControl.js";
-import { forwardRef as s, useId as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import "@webority/ui-elements/elements/taginput";
-//#region src/components/AppTagInput.jsx
-var d = ["sm", "lg"], f = s(function({ values: s, onChange: f, placeholder: p = "Add…", name: m, label: h, error: g, hint: _, required: v = !1, size: y, maxTags: b, allowDuplicates: x = !1, disabled: S = !1, id: C, ariaLabel: w, className: T = "", fieldClassName: E = "", help: D, helpLabel: O = "More information", ...k }, A) {
-	t("AppTagInput", k), e("AppTagInput", "size", y, d);
-	let j = c(), M = C || j, { setRef: N } = i({
-		ref: A,
-		value: s,
-		onChange: f,
-		readValue: a,
-		writeValue: o
-	});
-	return /* @__PURE__ */ u("div", {
-		className: `field${E ? ` ${E}` : ""}`,
-		children: [
-			h && /* @__PURE__ */ u("label", {
-				className: "label",
-				htmlFor: M,
-				children: [
-					h,
-					v && /* @__PURE__ */ l(r, {}),
-					D && /* @__PURE__ */ l(n, {
-						label: O,
-						children: D
-					})
-				]
-			}),
-			/* @__PURE__ */ l("wui-taginput", {
-				"aria-label": w || (typeof h == "string" ? h : void 0),
-				"aria-describedby": g ? `${M}-error` : _ ? `${M}-hint` : void 0,
-				"aria-invalid": g ? "true" : void 0,
-				id: M,
-				ref: N,
-				name: m,
-				placeholder: p,
-				size: y || void 0,
-				"max-tags": b === void 0 ? void 0 : String(b),
-				"allow-duplicates": x ? "" : void 0,
-				disabled: S ? "" : void 0,
-				required: v ? "" : void 0,
-				className: T || void 0,
-				...k
-			}),
-			g ? /* @__PURE__ */ l("div", {
-				className: "field-error",
-				id: `${M}-error`,
-				children: g
-			}) : _ ? /* @__PURE__ */ l("div", {
-				className: "field-hint",
-				id: `${M}-hint`,
-				children: _
-			}) : null
-		]
-	});
-});
-//#endregion
-export { f as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i,{readValues as a,writeValues as o}from"./useWuiControl.js";import{forwardRef as s,useId as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import"@webority/ui-elements/elements/taginput";var d=[`sm`,`lg`],f=s(function({values:s,onChange:f,placeholder:p=`Add…`,name:m,label:h,error:g,hint:_,required:v=!1,size:y,maxTags:b,allowDuplicates:x=!1,disabled:S=!1,id:C,ariaLabel:w,className:T=``,fieldClassName:E=``,help:D,helpLabel:O=`More information`,...k},A){t(`AppTagInput`,k),e(`AppTagInput`,`size`,y,d);let j=c(),M=C||j,{setRef:N}=i({ref:A,value:s,onChange:f,readValue:a,writeValue:o});return u(`div`,{className:`field${E?` ${E}`:``}`,children:[h&&u(`label`,{className:`label`,htmlFor:M,children:[h,v&&l(r,{}),D&&l(n,{label:O,children:D})]}),l(`wui-taginput`,{"aria-label":w||(typeof h==`string`?h:void 0),"aria-describedby":g?`${M}-error`:_?`${M}-hint`:void 0,"aria-invalid":g?`true`:void 0,id:M,ref:N,name:m,placeholder:p,size:y||void 0,"max-tags":b===void 0?void 0:String(b),"allow-duplicates":x?``:void 0,disabled:S?``:void 0,required:v?``:void 0,className:T||void 0,...k}),g?l(`div`,{className:`field-error`,id:`${M}-error`,children:g}):_?l(`div`,{className:`field-hint`,id:`${M}-hint`,children:_}):null]})});export{f as default};

package/dist/components/AppTextarea.js

@@ -1,81 +1 @@
-import e from "./warnUnknownProps.js";
-import t from "./AppInfoTip.js";
-import n from "./AppRequiredMark.js";
-import { forwardRef as r, useCallback as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
-import { Form as u } from "react-bootstrap";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/AppTextarea.jsx
-var p = r(function({ label: r, required: p = !1, error: m, hint: h, help: g, helpLabel: _ = "More information", id: v, name: y, rows: b = 4, autoGrow: x = !1, showCount: S = !1, maxLength: C, className: w = "", fieldClassName: T = "", ...E }, D) {
-	e("AppTextarea", E);
-	let O = o(), k = v || O, A = [
-		"textarea",
-		x ? "autosize" : "",
-		m ? "error" : "",
-		w
-	].filter(Boolean).join(" "), j = m && k ? `${k}-error` : void 0, M = h && k ? `${k}-hint` : void 0, N = j || M, P = c(null), F = (e) => {
-		P.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
-	}, I = i(() => {
-		let e = P.current;
-		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
-	}, []);
-	s(() => {
-		x && I();
-	}, [
-		x,
-		I,
-		E.value
-	]);
-	let [L, R] = l(() => String(E.value ?? E.defaultValue ?? "").length);
-	a(() => {
-		!S || E.value === void 0 || R(String(E.value ?? "").length);
-	}, [E.value, S]);
-	let z = (e) => {
-		x && I(), S && R(e.target.value.length), E.onInput?.(e);
-	};
-	return /* @__PURE__ */ f(u.Group, {
-		className: `field${T ? ` ${T}` : ""}`,
-		children: [
-			r && /* @__PURE__ */ f(u.Label, {
-				className: "label",
-				htmlFor: k,
-				children: [
-					r,
-					p && /* @__PURE__ */ d(n, {}),
-					g && /* @__PURE__ */ d(t, {
-						label: _,
-						children: g
-					})
-				]
-			}),
-			/* @__PURE__ */ d(u.Control, {
-				as: "textarea",
-				id: k,
-				name: y,
-				rows: b,
-				className: A,
-				"aria-invalid": m ? "true" : "false",
-				"aria-describedby": N,
-				required: p,
-				maxLength: C,
-				...E,
-				ref: F,
-				onInput: z
-			}),
-			m ? /* @__PURE__ */ d("div", {
-				className: "field-error",
-				id: j,
-				children: m
-			}) : h ? /* @__PURE__ */ d("div", {
-				className: "field-hint",
-				id: M,
-				children: h
-			}) : null,
-			S && /* @__PURE__ */ f("div", {
-				className: `field-count${C && L >= C ? " at-limit" : ""}`,
-				children: [L, C ? ` / ${C}` : ""]
-			})
-		]
-	});
-});
-//#endregion
-export { p as default };
+import e from"./warnUnknownProps.js";import t from"./AppInfoTip.js";import n from"./AppRequiredMark.js";import{forwardRef as r,useCallback as i,useEffect as a,useId as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import{Form as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=r(function({label:r,required:p=!1,error:m,hint:h,help:g,helpLabel:_=`More information`,id:v,name:y,rows:b=4,autoGrow:x=!1,showCount:S=!1,maxLength:C,className:w=``,fieldClassName:T=``,...E},D){e(`AppTextarea`,E);let O=o(),k=v||O,A=[`textarea`,x?`autosize`:``,m?`error`:``,w].filter(Boolean).join(` `),j=m&&k?`${k}-error`:void 0,M=h&&k?`${k}-hint`:void 0,N=j||M,P=c(null),F=e=>{P.current=e,typeof D==`function`?D(e):D&&(D.current=e)},I=i(()=>{let e=P.current;e&&(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[]);s(()=>{x&&I()},[x,I,E.value]);let[L,R]=l(()=>String(E.value??E.defaultValue??``).length);a(()=>{!S||E.value===void 0||R(String(E.value??``).length)},[E.value,S]);let z=e=>{x&&I(),S&&R(e.target.value.length),E.onInput?.(e)};return f(u.Group,{className:`field${T?` ${T}`:``}`,children:[r&&f(u.Label,{className:`label`,htmlFor:k,children:[r,p&&d(n,{}),g&&d(t,{label:_,children:g})]}),d(u.Control,{as:`textarea`,id:k,name:y,rows:b,className:A,"aria-invalid":m?`true`:`false`,"aria-describedby":N,required:p,maxLength:C,...E,ref:F,onInput:z}),m?d(`div`,{className:`field-error`,id:j,children:m}):h?d(`div`,{className:`field-hint`,id:M,children:h}):null,S&&f(`div`,{className:`field-count${C&&L>=C?` at-limit`:``}`,children:[L,C?` / ${C}`:``]})]})});export{p as default};

package/dist/components/AppThemeToggle.js

@@ -1,102 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppActionIcon.js";
-import r from "./AppSegmented.js";
-import { DEFAULT_THEME_EFFECT as i, DEFAULT_THEME_STORAGE_KEY as a, THEME_CHANGE_EVENT as o, THEME_EFFECTS as s, THEME_MODES as c, applyTheme as l, nextTheme as u, readStoredTheme as d, resolveTheme as f, storeTheme as p, transitionTheme as m, watchSystemTheme as h } from "@webority/ui-elements/helpers";
-import { useCallback as g, useEffect as _, useId as v, useState as y } from "react";
-import { jsx as b } from "react/jsx-runtime";
-import { flushSync as x } from "react-dom";
-//#region src/components/AppThemeToggle.jsx
-var S = {
-	light: "sun",
-	dark: "moon",
-	auto: "refresh-cw"
-}, C = ["icon", "segmented"], w = {
-	sm: 16,
-	md: 20,
-	lg: 24,
-	xl: 28
-};
-function T({ variant: T = "icon", effect: E = i, includeAuto: D = !0, storageKey: O = a, duration: k, label: A = "Theme", lightLabel: j = "Light", darkLabel: M = "Dark", autoLabel: N = "System", name: P, size: F = "md", tooltipPlacement: I = "auto", onChange: L, className: R = "", ...z }) {
-	t("AppThemeToggle", z), e("AppThemeToggle", "variant", T, C), e("AppThemeToggle", "effect", E, s), e("AppThemeToggle", "size", F, Object.keys(w));
-	let B = g((e) => e === "auto" && !D ? f(e) : e, [D]), [V, H] = y(() => B(typeof window > "u" ? "auto" : d(O))), U = v(), W = P || U;
-	_(() => {
-		let e = document.documentElement.getAttribute("data-theme");
-		c.includes(e) ? H(B(e)) : l(d(O));
-	}, []), _(() => {
-		let e = (e) => {
-			let t = e.detail?.preference;
-			c.includes(t) && H(B(t));
-		};
-		return document.addEventListener(o, e), () => document.removeEventListener(o, e);
-	}, [B]), _(() => h(() => {
-		document.documentElement.getAttribute("data-theme") === "auto" && l("auto");
-	}), []);
-	let G = g((e, t, n) => {
-		let r = t?.getBoundingClientRect?.() ?? {
-			left: 0,
-			top: 0,
-			width: 0,
-			height: 0
-		}, i = {
-			x: r.left + r.width / 2,
-			y: r.top + r.height / 2
-		};
-		m(() => {
-			l(e), p(e, O), x(() => H(e)), L?.(e);
-		}, {
-			effect: E,
-			to: f(e),
-			origin: i,
-			duration: k,
-			live: n
-		});
-	}, [
-		O,
-		E,
-		k,
-		L
-	]);
-	if (T === "segmented") {
-		let e = [{
-			value: "light",
-			label: j,
-			icon: S.light
-		}, {
-			value: "dark",
-			label: M,
-			icon: S.dark
-		}];
-		return D && e.push({
-			value: "auto",
-			label: N,
-			icon: S.auto
-		}), /* @__PURE__ */ b(r, {
-			options: e,
-			value: V,
-			name: W,
-			label: A,
-			size: F,
-			className: [
-				"wui-theme-toggle",
-				"wui-theme-toggle-segmented",
-				R
-			].filter(Boolean).join(" "),
-			onChange: (e) => {
-				if (e === V) return;
-				let t = document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);
-				G(e, t?.closest(".segmented-option") ?? t, t?.closest(".segmented"));
-			}
-		});
-	}
-	return /* @__PURE__ */ b(n, {
-		icon: S[V],
-		label: `${A}: ${V}`,
-		size: w[F] ?? w.md,
-		tooltipPlacement: I,
-		onClick: (e) => G(u(V, { includeAuto: D }), e.currentTarget, e.currentTarget),
-		className: ["wui-theme-toggle", R].filter(Boolean).join(" ")
-	});
-}
-//#endregion
-export { T as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`refresh-cw`},C=[`icon`,`segmented`],w={sm:16,md:20,lg:24,xl:28};function T({variant:T=`icon`,effect:E=i,includeAuto:D=!0,storageKey:O=a,duration:k,label:A=`Theme`,lightLabel:j=`Light`,darkLabel:M=`Dark`,autoLabel:N=`System`,name:P,size:F=`md`,tooltipPlacement:I=`auto`,onChange:L,className:R=``,...z}){t(`AppThemeToggle`,z),e(`AppThemeToggle`,`variant`,T,C),e(`AppThemeToggle`,`effect`,E,s),e(`AppThemeToggle`,`size`,F,Object.keys(w));let B=g(e=>e===`auto`&&!D?f(e):e,[D]),[V,H]=y(()=>B(typeof window>`u`?`auto`:d(O))),U=v(),W=P||U;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?H(B(e)):l(d(O))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&H(B(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[B]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let G=g((e,t,n)=>{let r=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},i={x:r.left+r.width/2,y:r.top+r.height/2};m(()=>{l(e),p(e,O),x(()=>H(e)),L?.(e)},{effect:E,to:f(e),origin:i,duration:k,live:n})},[O,E,k,L]);if(T===`segmented`){let e=[{value:`light`,label:j,icon:S.light},{value:`dark`,label:M,icon:S.dark}];return D&&e.push({value:`auto`,label:N,icon:S.auto}),b(r,{options:e,value:V,name:W,label:A,size:F,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,R].filter(Boolean).join(` `),onChange:e=>{if(e===V)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);G(e,t?.closest(`.segmented-option`)??t,t?.closest(`.segmented`))}})}return b(n,{icon:S[V],label:`${A}: ${V}`,size:w[F]??w.md,tooltipPlacement:I,onClick:e=>G(u(V,{includeAuto:D}),e.currentTarget,e.currentTarget),className:[`wui-theme-toggle`,R].filter(Boolean).join(` `)})}export{T as default};

package/dist/components/AppTimePicker.js

@@ -1,68 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppInfoTip.js";
-import r from "./AppRequiredMark.js";
-import i from "./useWuiControl.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import "@webority/ui-elements/elements/timepicker";
-//#region src/components/AppTimePicker.jsx
-var l = [
-	"sm",
-	"md",
-	"lg"
-], u = ["12", "24"], d = a(function({ value: a, onChange: d, label: f, required: p = !1, hint: m, error: h, help: g, helpLabel: _ = "More information", name: v, min: y, max: b, step: x, format: S = "24", placeholder: C = "Select time", disabled: w, size: T, id: E, ariaLabel: D, className: O = "", fieldClassName: k = "", ...A }, j) {
-	t("AppTimePicker", A), e("AppTimePicker", "size", T, l), e("AppTimePicker", "format", S, u);
-	let M = o(), N = E || v || M, { setRef: P } = i({
-		ref: j,
-		value: a ?? "",
-		onChange: d
-	}), F = !f && !h && !m, I = h ? `${N}-error` : void 0, L = m ? `${N}-hint` : void 0, R = /* @__PURE__ */ s("wui-timepicker", {
-		ref: P,
-		id: N,
-		name: v,
-		min: y,
-		max: b,
-		step: x == null ? void 0 : String(x),
-		format: S,
-		placeholder: C,
-		size: T || void 0,
-		"aria-label": D || (typeof f == "string" ? f : void 0),
-		"aria-describedby": I || L,
-		"aria-invalid": h ? "true" : void 0,
-		disabled: w ? "" : void 0,
-		required: p ? "" : void 0,
-		className: O || void 0,
-		...A
-	});
-	return F ? R : /* @__PURE__ */ c("div", {
-		className: `field${k ? ` ${k}` : ""}`,
-		children: [
-			f && /* @__PURE__ */ c("label", {
-				className: "label",
-				htmlFor: N,
-				children: [
-					f,
-					p && /* @__PURE__ */ s(r, {}),
-					g && /* @__PURE__ */ s(n, {
-						label: _,
-						children: g
-					})
-				]
-			}),
-			R,
-			h && /* @__PURE__ */ s("div", {
-				className: "field-error",
-				id: I,
-				children: h
-			}),
-			!h && m && /* @__PURE__ */ s("div", {
-				className: "field-hint",
-				id: L,
-				children: m
-			})
-		]
-	});
-});
-//#endregion
-export { d as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useWuiControl.js";import{forwardRef as a,useId as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/timepicker";var l=[`sm`,`md`,`lg`],u=[`12`,`24`],d=a(function({value:a,onChange:d,label:f,required:p=!1,hint:m,error:h,help:g,helpLabel:_=`More information`,name:v,min:y,max:b,step:x,format:S=`24`,placeholder:C=`Select time`,disabled:w,size:T,id:E,ariaLabel:D,className:O=``,fieldClassName:k=``,...A},j){t(`AppTimePicker`,A),e(`AppTimePicker`,`size`,T,l),e(`AppTimePicker`,`format`,S,u);let M=o(),N=E||v||M,{setRef:P}=i({ref:j,value:a??``,onChange:d}),F=!f&&!h&&!m,I=h?`${N}-error`:void 0,L=m?`${N}-hint`:void 0,R=s(`wui-timepicker`,{ref:P,id:N,name:v,min:y,max:b,step:x==null?void 0:String(x),format:S,placeholder:C,size:T||void 0,"aria-label":D||(typeof f==`string`?f:void 0),"aria-describedby":I||L,"aria-invalid":h?`true`:void 0,disabled:w?``:void 0,required:p?``:void 0,className:O||void 0,...A});return F?R:c(`div`,{className:`field${k?` ${k}`:``}`,children:[f&&c(`label`,{className:`label`,htmlFor:N,children:[f,p&&s(r,{}),g&&s(n,{label:_,children:g})]}),R,h&&s(`div`,{className:`field-error`,id:I,children:h}),!h&&m&&s(`div`,{className:`field-hint`,id:L,children:m})]})});export{d as default};