@kubit-ui-web/react-components 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/esm/components/label/labelStandAlone.js

@@ -1,2 +1,28 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{Text as e}from"../text/text.js";import{useId as r}from"../../lib/hooks/useId/useId.js";const i=s(({asteriskColor:s,asteriskCssClasses:i,asteriskWeight:o,children:a,color:l,cursor:d,customAttributes:n,id:c,inputId:m,required:u,requiredSymbol:h,textCssClasses:p,weight:x,...b},j)=>{const C=r("label"),f=c??C,g=b["data-testid"]||"label";/* @__PURE__ */
-return t.jsxs(e,{ref:j,additionalClasses:{text:p},color:l,component:"label",cursor:d,customAttributes:n,"data-testid":g,htmlFor:m,id:f,weight:x,children:[a,u&&/* @__PURE__ */t.jsx(e,{additionalClasses:{text:i},"aria-hidden":!0,color:s,component:"span","data-testid":`${g}Required`,weight:o,children:h})]})});export{i as Label,i as LabelStandAlone};
+import { Text } from "../text/text2.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LabelStandAlone = forwardRef(({ asteriskColor: e, asteriskCssClasses: t, asteriskWeight: n, children: r, color: i, cursor: a, customAttributes: o, id: s, inputId: c, required: l, requiredSymbol: u, textCssClasses: d, weight: f, ...p }, m) => {
+	let h = `label-${useId().replace(/:/g, "")}`, g = s ?? h, _ = p["data-testid"] || "label";
+	return /* @__PURE__ */ jsxs(Text, {
+		ref: m,
+		additionalClasses: { text: d },
+		color: i,
+		component: "label",
+		cursor: a,
+		customAttributes: o,
+		"data-testid": _,
+		htmlFor: c,
+		id: g,
+		weight: f,
+		children: [r, l && /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: t },
+			"aria-hidden": !0,
+			color: e,
+			component: "span",
+			"data-testid": `${_}Required`,
+			weight: n,
+			children: u
+		})]
+	});
+});
+export { LabelStandAlone };

package/dist/esm/components/link/helpers/disabled.js

@@ -1 +1,2 @@
-const o=(o,e)=>({role:o&&!e?"link":e});export{o as disabledLink};
+const disabledLink = (e, t) => ({ role: e && !t ? "link" : t });
+export { disabledLink };

package/dist/esm/components/link/link.js

@@ -1,2 +1,34 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{useClassName as i}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as a}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{disabledLink as s}from"./helpers/disabled.js";import{LinkStandAlone as n}from"./linkStandAlone.js";const r=e(({action:e="navigation",additionalClasses:r,additionalTextClasses:t,alignCenter:l=!1,color:d,decoration:m="auto",disabled:c=!1,icon:p,role:C,textVariant:v,variant:j,weight:f,...g},u)=>{const{LINK:b}=a(),{role:x}=s(c,C),N=c||void 0,h=i({additionalClassNames:r,component:"LINK",variant:`${e}_${j}`}),T=i({additionalClassNames:t,component:"TEXT",variant:v});/* @__PURE__ */
-return o.jsx(n,{...g,ref:u,action:e,alignCenter:l,"aria-disabled":N,color:d,component:b,cssClasses:h,cssTextClasses:T,decoration:"inline"===e?"underline":m,disabled:c,icon:p,role:x,weight:f})});export{r as Link};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { disabledLink } from "./helpers/disabled.js";
+import { LinkStandAlone } from "./linkStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Link = forwardRef(({ action: e = "navigation", additionalClasses: t, additionalTextClasses: n, alignCenter: r = !1, color: i, decoration: a = "auto", disabled: o = !1, icon: s, role: c, textVariant: l, variant: u, weight: d, ...f }, p) => {
+	let { LINK: m } = useGenericComponents(), { role: h } = disabledLink(o, c), g = o || void 0, _ = useClassName({
+		additionalClassNames: t,
+		component: "LINK",
+		variant: `${e}_${u}`
+	}), v = useClassName({
+		additionalClassNames: n,
+		component: "TEXT",
+		variant: l
+	});
+	return /* @__PURE__ */ jsx(LinkStandAlone, {
+		...f,
+		ref: p,
+		action: e,
+		alignCenter: r,
+		"aria-disabled": g,
+		color: i,
+		component: m,
+		cssClasses: _,
+		cssTextClasses: v,
+		decoration: e === "inline" ? "underline" : a,
+		disabled: o,
+		icon: s,
+		role: h,
+		weight: d
+	});
+});
+export { Link };

package/dist/esm/components/link/linkAsButton/linkAsButton.js

@@ -1,2 +1,32 @@
-import{j as s}from"../../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{useClassName as a}from"../../../lib/hooks/useClassName/useClassName.js";import{useManageState as t}from"../../../lib/hooks/useManageState/useManageState.js";import{useGenericComponents as o}from"../../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{STATES as i}from"../../../lib/types/states/states.js";import{LinkAsButtonStandAlone as n}from"./linkAsButtonStandAlone.js";const r=e(({additionalSizeClasses:e,additionalVariantClasses:r,disabled:m,size:l,variant:d,...p},c)=>{const C=a({component:"LINK_AS_BUTTON"}),f=a({additionalClassNames:r,component:"BUTTON",variant:d}),j=a({additionalClassNames:e,component:"BUTTON",variant:l}),{LINK:u}=o(),{setRef:N}=t({disabled:m,ref:c,states:Object.values(i)});/* @__PURE__ */
-return s.jsx(n,{...p,ref:N,component:u,cssLinkAsButtonClasses:C,cssSizeClasses:j,cssVariantClasses:f,disabled:m})});export{r as LinkAsButton};
+import { useGenericComponents } from "../../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../../lib/hooks/useClassName/useClassName.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { useManageState } from "../../../lib/hooks/useManageState/useManageState.js";
+import { LinkAsButtonStandAlone } from "./linkAsButtonStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const LinkAsButton = forwardRef(({ additionalSizeClasses: e, additionalVariantClasses: t, disabled: n, size: r, variant: i, ...a }, o) => {
+	let s = useClassName({ component: "LINK_AS_BUTTON" }), c = useClassName({
+		additionalClassNames: t,
+		component: "BUTTON",
+		variant: i
+	}), l = useClassName({
+		additionalClassNames: e,
+		component: "BUTTON",
+		variant: r
+	}), { LINK: u } = useGenericComponents(), { setRef: d } = useManageState({
+		disabled: n,
+		ref: o,
+		states: Object.values(STATES)
+	});
+	return /* @__PURE__ */ jsx(LinkAsButtonStandAlone, {
+		...a,
+		ref: d,
+		component: u,
+		cssLinkAsButtonClasses: s,
+		cssSizeClasses: l,
+		cssVariantClasses: c,
+		disabled: n
+	});
+});
+export { LinkAsButton };

package/dist/esm/components/link/linkAsButton/linkAsButtonStandAlone.js

@@ -1,2 +1,46 @@
-import{j as t}from"../../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{ButtonStandAlone as i}from"../../button/buttonStandAlone.js";import{CustomComponent as o}from"../../../lib/components/customComponent/customComponent.js";import{POSITIONS as e}from"../../../lib/types/positions/positions.js";import{STATES as a}from"../../../lib/types/states/states.js";import{classNames as l}from"../../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as r}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const n=s(({"aria-label":s,"aria-labelledby":n,ariaLabelText:m,children:c,component:b,cssLinkAsButtonClasses:d,cssSizeClasses:u,cssVariantClasses:p,fullWidth:j,iconPosition:f,minWidth:h,onClick:k,rel:C,role:x,state:y,target:A,url:w,...D},L)=>{const N=D["data-testid"]||"link-as-button",v=r(D);/* @__PURE__ */
-return t.jsx("div",{className:d?.link_as_button,"data-kbt-full-width":j,"data-testid":N,...v,children:/* @__PURE__ */t.jsx(o,{ref:L,"aria-label":s,"aria-labelledby":n,component:b,"data-testid":"link",decoration:"none",isDisabled:y===a.DISABLED,rel:C,role:x,target:A,url:w,onClick:k,children:/* @__PURE__ */t.jsx("span",{"aria-label":m,...D,className:l(u?.button,p?.button),style:{flexDirection:f===e.LEFT?"row":"row-reverse",minWidth:h,width:j?"100%":"auto"},children:/* @__PURE__ */t.jsx(i,{...D,children:c})})})})});export{n as LinkAsButtonStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../../lib/utils/classNames/classNames.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { POSITIONS } from "../../../lib/types/positions/positions.js";
+import { ButtonStandAlone } from "../../button/buttonStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const LinkAsButtonStandAlone = forwardRef(({ "aria-label": e, "aria-labelledby": t, ariaLabelText: n, children: r, component: i, cssLinkAsButtonClasses: a, cssSizeClasses: o, cssVariantClasses: s, fullWidth: c, iconPosition: l, minWidth: u, onClick: d, rel: f, role: p, state: m, target: h, url: g, ..._ }, v) => {
+	let y = _["data-testid"] || "link-as-button", b = pickCustomAttributes(_);
+	return /* @__PURE__ */ jsx("div", {
+		className: a?.link_as_button,
+		"data-kbt-full-width": c,
+		"data-testid": y,
+		...b,
+		children: /* @__PURE__ */ jsx(CustomComponent, {
+			ref: v,
+			"aria-label": e,
+			"aria-labelledby": t,
+			component: i,
+			"data-testid": "link",
+			decoration: "none",
+			isDisabled: m === STATES.DISABLED,
+			rel: f,
+			role: p,
+			target: h,
+			url: g,
+			onClick: d,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-label": n,
+				..._,
+				className: classNames(o?.button, s?.button),
+				style: {
+					flexDirection: l === POSITIONS.LEFT ? "row" : "row-reverse",
+					minWidth: u,
+					width: c ? "100%" : "auto"
+				},
+				children: /* @__PURE__ */ jsx(ButtonStandAlone, {
+					..._,
+					children: r
+				})
+			})
+		})
+	});
+});
+export { LinkAsButtonStandAlone };

package/dist/esm/components/link/linkStandAlone.js

@@ -1,3 +1,47 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{Text as o}from"../text/text.js";import{ElementOrIcon as s}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{classNames as r}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as i}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as l}from"../../lib/components/customComponent/customComponent.js";const n=e(({children:e,color:n,component:c=o,cssClasses:a,cssTextClasses:m,decoration:d,disabled:p,draggable:u,icon:j,iconPosition:x,id:b,onClick:f,rel:g,role:C,target:h,url:k,weight:N,...v},w)=>{const y=p?void 0:f,A=p?void 0:k,D=r(a?.link,m?.text),I={flexDirection:"left"===x?"row":"row-reverse"},O={color:n,fontWeight:N,textDecoration:d},P=i(v);/* @__PURE__ */
-return t.jsx(l,{ref:w,className:D,component:c,"data-testid":"link",disabled:p,draggable:u,id:b,rel:g,role:C,style:O,target:h,url:A,onClick:y,...P,children:j?/* @__PURE__ */t.jsxs("span",{className:a?.labelandiconcontainer,style:I,children:[
-/* @__PURE__ */t.jsx(s,{className:a?.icon,...j},"icon"),e]}):/* @__PURE__ */t.jsx("span",{style:I,children:e})})});export{n as LinkStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { Text } from "../text/text2.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LinkStandAlone = forwardRef(({ children: e, color: t, component: n = Text, cssClasses: r, cssTextClasses: i, decoration: a, disabled: o, draggable: s, icon: c, iconPosition: l, id: u, onClick: d, rel: f, role: p, target: m, url: h, weight: g, ..._ }, v) => {
+	let y = o ? void 0 : d, b = o ? void 0 : h, x = classNames(r?.link, i?.text), S = {
+		color: t,
+		flexDirection: l === "left" ? "row" : "row-reverse",
+		fontWeight: g,
+		textDecoration: a
+	}, C = {
+		color: t,
+		fontWeight: g,
+		textDecoration: a
+	}, w = pickCustomAttributes(_);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: v,
+		className: x,
+		component: n,
+		"data-testid": "link",
+		disabled: o,
+		draggable: s,
+		id: u,
+		rel: f,
+		role: p,
+		style: C,
+		target: m,
+		url: b,
+		onClick: y,
+		...w,
+		children: c ? /* @__PURE__ */ jsxs("span", {
+			className: r?.labelandiconcontainer,
+			style: S,
+			children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.icon,
+				...c
+			}, "icon"), e]
+		}) : /* @__PURE__ */ jsx("span", {
+			style: S,
+			children: e
+		})
+	});
+});
+export { LinkStandAlone };

package/dist/esm/components/listOptions/listOptions.js

@@ -1,2 +1,17 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{ListOptionsStandAlone as t}from"./listOptionsStandAlone.js";const r=a(({additionalClasses:a,variant:r,...i},e)=>{const m=o({additionalClassNames:a,component:"LIST_OPTIONS",variant:r});/* @__PURE__ */
-return s.jsx(t,{...i,ref:e,cssClasses:m})});export{r as ListOptions};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { ListOptionsStandAlone } from "./listOptionsStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ListOptions = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "LIST_OPTIONS",
+		variant: t
+	});
+	return /* @__PURE__ */ jsx(ListOptionsStandAlone, {
+		...n,
+		ref: r,
+		cssClasses: i
+	});
+});
+export { ListOptions };

package/dist/esm/components/listOptions/listOptionsStandAlone.js

@@ -1,2 +1,71 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,useMemo as e,useImperativeHandle as i}from"react";import{Text as s}from"../text/text.js";import{useId as n}from"../../lib/hooks/useId/useId.js";import{useRoveFocus as l}from"../../lib/hooks/useRoveFocus/useRoveFocus.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processText as c}from"../../lib/utils/process/processText/processText.js";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{Option as p}from"../option/option.js";import{keyUpMove as d,keyDownMove as m,isSelected as u,getOptionVariant as h}from"./utils/listOptions.utils.js";const v=o(({caseSensitive:o,charsHighlighted:v,checkedIcon:b,content:g,cssClasses:j,highlightedOptionVariant:x,id:k,index:f=0,listComponent:C,multiSelect:$,onOptionClick:y,options:S,optionsContainerArias:F,roveFocus:I,selectedValue:M,title:O,type:A="selection",...N},R)=>{const T=N["data-testid"]??"list-options",V=r(N),H=e(()=>({currentFocusSelected:-1,keyDownMove:m(S),keyLeftMove:0,keyRightMove:0,keyTabMove:null,keyUpMove:d,size:S.length}),[S]),[L,_,w]=l(I??H),z=n();i(R,()=>w.current,[w]);const D=k??z,U="selection"===A,q="navigation"===A,B=S&&S.length>0;/* @__PURE__ */
-return t.jsxs("div",{className:j?.list_options,"data-testid":T,...V,children:[!!O&&S.length>0&&/* @__PURE__ */t.jsx("div",{className:j?.titlecontainer,children:/* @__PURE__ */t.jsx(s,{additionalClasses:{text:j?.title},...c(O)})}),g,B&&/* @__PURE__ */t.jsx(a,{ref:w,"aria-label":F?.["aria-label"],"aria-labelledby":F?.["aria-labelledby"],className:j?.optionscontainer,component:C??"ul",id:D,role:U?"listbox":void 0,children:S.map((e,i)=>{const s=u(e,M,$,o),n=`${T}-section-${f}-option-${i}`,l=/* @__PURE__ */t.jsx(p,{"aria-current":q?s:void 0,"aria-selected":U?s:void 0,checkedIcon:b,component:q?"div":"li","data-testid":n,focus:L===i,labelCharsHighlighted:v,multiSelect:$,role:U?"option":void 0,selected:s,tabIndex:q?0:-1,variant:h(e.highlighted,x,N?.optionVariant),...e,onClick:t=>{_(i),y?.(e.value,t),e.onClick?.(t)},onFocus:t=>{i!==L&&_(i),e.onFocus?.(t)}},`${D}Option-${f.toString()}-${i.toString()}`);return"selection"===A?/* @__PURE__ */t.jsx("li",{children:l},`${D}LiOption-${f.toString()}-${i.toString()}`):l})})]})});export{v as ListOptionsStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { useRoveFocus } from "../../lib/hooks/useRoveFocus/useRoveFocus.js";
+import { Option } from "../option/option.js";
+import { getOptionVariant, isSelected, keyDownMove, keyUpMove } from "./utils/listOptions.utils.js";
+import { forwardRef, useId, useImperativeHandle, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ListOptionsStandAlone = forwardRef(({ caseSensitive: o, charsHighlighted: s, checkedIcon: c, content: l, cssClasses: u, highlightedOptionVariant: d, id: f, index: p = 0, listComponent: m, multiSelect: h, onOptionClick: g, options: _, optionsContainerArias: v, roveFocus: y, selectedValue: b, title: x, type: S = "selection", ...C }, w) => {
+	let T = C["data-testid"] ?? "list-options", E = pickCustomAttributes(C), D = useMemo(() => ({
+		currentFocusSelected: -1,
+		keyDownMove: keyDownMove(_),
+		keyLeftMove: 0,
+		keyRightMove: 0,
+		keyTabMove: null,
+		keyUpMove,
+		size: _.length
+	}), [_]), [O, k, A] = useRoveFocus(y ?? D), j = useId();
+	useImperativeHandle(w, () => A.current, [A]);
+	let M = f ?? j, N = S === "selection", P = S === "navigation", F = _ && _.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: u?.list_options,
+		"data-testid": T,
+		...E,
+		children: [
+			!!x && _.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: u?.titlecontainer,
+				children: /* @__PURE__ */ jsx(Text, {
+					additionalClasses: { text: u?.title },
+					...processTextProp(x)
+				})
+			}),
+			l,
+			F && /* @__PURE__ */ jsx(CustomComponent, {
+				ref: A,
+				"aria-label": v?.["aria-label"],
+				"aria-labelledby": v?.["aria-labelledby"],
+				className: u?.optionscontainer,
+				component: m ?? "ul",
+				id: M,
+				role: N ? "listbox" : void 0,
+				children: _.map((e, t) => {
+					let n = isSelected(e, b, h, o), r = `${T}-section-${p}-option-${t}`, i = N || P ? "div" : "li", a = /* @__PURE__ */ jsx(Option, {
+						"aria-current": P ? n : void 0,
+						"aria-selected": N ? n : void 0,
+						checkedIcon: c,
+						component: i,
+						"data-testid": r,
+						focus: O === t,
+						labelCharsHighlighted: s,
+						multiSelect: h,
+						role: N ? "option" : void 0,
+						selected: n,
+						tabIndex: P ? 0 : -1,
+						variant: getOptionVariant(e.highlighted, d, C?.optionVariant),
+						...e,
+						onClick: (n) => {
+							k(t), g?.(e.value, n), e.onClick?.(n);
+						},
+						onFocus: (n) => {
+							t !== O && k(t), e.onFocus?.(n);
+						}
+					}, `${M}Option-${p.toString()}-${t.toString()}`);
+					return S === "selection" ? /* @__PURE__ */ jsx("li", { children: a }, `${M}LiOption-${p.toString()}-${t.toString()}`) : a;
+				})
+			})
+		]
+	});
+});
+export { ListOptionsStandAlone };

package/dist/esm/components/listOptions/utils/listOptions.utils.js

@@ -1 +1,8 @@
-const e=(e,a,o,l)=>null!=a&&void 0!==e.value&&(o?Boolean(Array.isArray(a)&&a.includes(e.value)):l?Boolean(a===e.value):Boolean(a.toLocaleString().toLocaleLowerCase()===e.value.toLocaleString().toLocaleLowerCase())),a=(e,a,o)=>e&&a?a:o||"",o=e=>{let a=Math.max(e,0);return e>0&&(a-=1),a},l=e=>a=>{let o=Math.max(a,0);return a+1<=e.length-1&&(o+=1),o};export{a as getOptionVariant,e as isSelected,l as keyDownMove,o as keyUpMove};
+const isSelected = (e, t, n, r) => t != null && e.value !== void 0 ? n ? !!(Array.isArray(t) && t.includes(e.value)) : r ? t === e.value : t.toLocaleString().toLocaleLowerCase() === e.value.toLocaleString().toLocaleLowerCase() : !1, getOptionVariant = (e, t, n) => e && t ? t : n || "", keyUpMove = (e) => {
+	let t = Math.max(e, 0);
+	return e > 0 && --t, t;
+}, keyDownMove = (e) => (t) => {
+	let n = Math.max(t, 0);
+	return t + 1 <= e.length - 1 && (n += 1), n;
+};
+export { getOptionVariant, isSelected, keyDownMove, keyUpMove };

package/dist/esm/components/modal/fragments/modalHeader.js

@@ -1,3 +1,56 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{Text as s}from"../../text/text.js";import{ElementOrIcon as t}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{useActiveBreakpoints as i}from"../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{processText as n}from"../../../lib/utils/process/processText/processText.js";import{Button as o}from"../../button/button.js";const a=({blocked:a,closeButton:c,closeIcon:l,cssClasses:r,dragIcon:d,title:m,titleIdFinal:j})=>{const{isMobileOrTablet:x}=i();/* @__PURE__ */
-return e.jsxs("div",{className:r?.headercontainer,"data-modal-header":!0,children:[x&&!a&&!!d&&/* @__PURE__ */e.jsx("div",{className:r?.dragiconcontainer,"data-modal-draggable-icon":!0,children:/* @__PURE__ */e.jsx(t,{className:r?.dragicon,...d})}),
-/* @__PURE__ */e.jsxs("div",{className:r?.headercontentcontainer,children:[!a&&!!l?.icon&&/* @__PURE__ */e.jsx("div",{className:r?.closebuttoncontainer,children:/* @__PURE__ */e.jsx(t,{className:r?.closebuttonicon,...l})}),!a&&!!c?.content&&!!c?.variant&&/* @__PURE__ */e.jsx(o,{...c,variant:c?.variant,children:c?.content}),(void 0===m?.visible||m.visible)&&/* @__PURE__ */e.jsx("div",{className:r?.titlecontainer,children:/* @__PURE__ */e.jsx(s,{additionalClasses:{text:r?.title},component:"h1",id:j,...n(m)})}),!1===m?.visible&&/* @__PURE__ */e.jsx("span",{className:r?.titlehiddencontainer,id:j,children:n(m).children}),!a&&!!l?.icon&&/* @__PURE__ */e.jsx("div",{className:r?.closebuttoncontainer,children:/* @__PURE__ */e.jsx("span",{className:r?.closebuttonicon})})]})]})};export{a as ModalHeader};
+import { Text } from "../../text/text2.js";
+import { processIconProp, processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { Button } from "../../button/button.js";
+import { useActiveBreakpoints } from "../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ModalHeader = ({ blocked: e, closeButton: t, closeIcon: n, cssClasses: r, dragIcon: i, title: a, titleIdFinal: o }) => {
+	let { isMobileOrTablet: s } = useActiveBreakpoints();
+	return /* @__PURE__ */ jsxs("div", {
+		className: r?.headercontainer,
+		"data-modal-header": !0,
+		children: [s && !e && !!i && /* @__PURE__ */ jsx("div", {
+			className: r?.dragiconcontainer,
+			"data-modal-draggable-icon": !0,
+			children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.dragicon,
+				...processIconProp(i)
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: r?.headercontentcontainer,
+			children: [
+				!e && !!n && /* @__PURE__ */ jsx("div", {
+					className: r?.closebuttoncontainer,
+					children: /* @__PURE__ */ jsx(ElementOrIcon, {
+						className: r?.closebuttonicon,
+						...processIconProp(n)
+					})
+				}),
+				!e && !!t?.content && !!t?.variant && /* @__PURE__ */ jsx(Button, {
+					...t,
+					variant: t?.variant,
+					children: t?.content
+				}),
+				(a?.visible === void 0 || a.visible) && /* @__PURE__ */ jsx("div", {
+					className: r?.titlecontainer,
+					children: /* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: r?.title },
+						component: "h1",
+						id: o,
+						...processTextProp(a)
+					})
+				}),
+				a?.visible === !1 && /* @__PURE__ */ jsx("span", {
+					className: r?.titlehiddencontainer,
+					id: o,
+					children: processTextProp(a).children
+				}),
+				!e && !!n && /* @__PURE__ */ jsx("div", {
+					className: r?.closebuttoncontainer,
+					children: /* @__PURE__ */ jsx("span", { className: r?.closebuttonicon })
+				})
+			]
+		})]
+	});
+};
+export { ModalHeader };

package/dist/esm/components/modal/modalControlled.js

@@ -1 +1,46 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as t,useCallback as r}from"react";import{syncInnerAndForwardedRef as s}from"../../lib/hooks/syncRefs/syncRefs.js";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{useContentVisibility as i}from"../../lib/hooks/useContentVisibility/useContentVisibility.js";import{useMediaDevice as n}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetectionWithAutoFocus as a}from"../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js";import{useScrollEffect as c}from"../../lib/hooks/useScrollEffect/useScrollEffect.js";import{useSwipeDown as m}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{Portal as d}from"../portal/portal.js";import{ModalStandAlone as u}from"./modalStandAlone.js";const p=e(({additionalClasses:e,disableFocusableContent:p=!1,onClose:f,popover:h,portalId:b,variant:j,...S},C)=>{const v=l({additionalClassNames:e,component:"MODAL",variant:j}),y=n(),D=t(null),{scrollableRef:w,shadowRef:R}=c({shadowStyles:"none"}),{handleContentVisibility:k}=i({}),{setDragIconRef:x}=m(void 0,()=>f?.()),{handleScrollDetection:A,hasScroll:I}=a({disabled:p,parentElementRef:D}),g=r(o=>{D.current=o,s({forwardedRef:C,innerRef:D});const e=D.current?.querySelector("[data-modal-header]"),t=D.current?.querySelector("[data-modal-content]"),r=D.current?.querySelector("[data-modal-draggable-icon]");R(e),k({container:D.current,content:t}),w(t),A(t),x(r)},[]),q=/* @__PURE__ */o.jsx(u,{...S,ref:g,contentHasScroll:I,cssClasses:v,device:y,popover:{...h},onPopoverCloseInternally:()=>{f?.()}});return b?/* @__PURE__ */o.jsx(d,{wrapperId:b,children:q}):q});export{p as ModalControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useContentVisibility } from "../../lib/hooks/useContentVisibility/useContentVisibility.js";
+import { useMediaDevice } from "../../lib/hooks/useMediaDevice/useMediaDevice.js";
+import { useScrollDetection } from "../../lib/hooks/useScrollDetection/useScrollDetection.js";
+import { useScrollEffect } from "../../lib/hooks/useScrollEffect/useScrollEffect.js";
+import { useSwipeDown } from "../../lib/hooks/useSwipeDown/useSwipeDown.js";
+import { syncInnerAndForwardedRef } from "../../lib/utils/refs/syncRefs.js";
+import { Portal } from "../portal/portal.js";
+import { ModalStandAlone } from "./modalStandAlone.js";
+import { forwardRef, useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ModalControlled = forwardRef(({ additionalClasses: i, disableFocusableContent: a = !1, onClose: o, popover: s, portalId: c, variant: l, ...u }, d) => {
+	let f = useClassName({
+		additionalClassNames: i,
+		component: "MODAL",
+		variant: l
+	}), p = useMediaDevice(), m = useRef(null), { scrollableRef: h, shadowRef: g } = useScrollEffect({ shadowStyles: "none" }), { handleContentVisibility: _ } = useContentVisibility({}), { setDragIconRef: v, setPopoverRef: y } = useSwipeDown({ handleClose: o }), { handleScrollDetection: b, hasScroll: x } = useScrollDetection({ autoFocus: !a }), S = useCallback((e) => {
+		m.current = e, syncInnerAndForwardedRef({
+			forwardedRef: d,
+			innerRef: m
+		});
+		let t = m.current?.querySelector("[data-modal-header]"), n = m.current?.querySelector("[data-modal-content]"), r = m.current?.querySelector("[data-modal-draggable-icon]");
+		g(t), _({
+			container: m.current,
+			content: n
+		}), h(n), b(n), r && v(r);
+	}, []), C = () => {
+		o?.();
+	}, w = /* @__PURE__ */ jsx(ModalStandAlone, {
+		...u,
+		ref: S,
+		contentHasScroll: x,
+		cssClasses: f,
+		device: p,
+		popover: {
+			...s,
+			popoverContainerRef: y
+		},
+		onPopoverCloseInternally: C
+	});
+	return c ? /* @__PURE__ */ jsx(Portal, {
+		wrapperId: c,
+		children: w
+	}) : w;
+});
+export { ModalControlled };

package/dist/esm/components/modal/modalStandAlone.js

@@ -1,4 +1,65 @@
-import{j as e}from"../../_virtual/jsx-runtime.js";import{forwardRef as o}from"react";import{Overlay as t}from"../../lib/components/overlay/overlay.js";import{useId as i}from"../../lib/hooks/useId/useId.js";import{processText as a}from"../../lib/utils/process/processText/processText.js";import{NabVar as s}from"../navBar/navBar.js";import{Popover as l}from"../popover/popover.js";import{ModalHeader as r}from"./fragments/modalHeader.js";import{onlyDesktopSize as n}from"./utils/onlyDesktopSize.js";const d=o(({blocked:o,closeButton:d,closeIcon:m,content:c,contentContainer:p,contentHasScroll:v,contentScrollArias:h,cssClasses:b,customHeightAllDevices:j=!1,customWidthAllDevices:x=!1,device:g,dragIcon:f,footer:y,id:u,maxHeight:I,maxWidth:C,minContentHeight:H,minHeight:k,minWidth:B,onKeyDown:W,onPopoverCloseInternally:D,open:A,popover:N,title:S,...T},F)=>{const w=i("modal"),z=u??w,E=i("modal-title"),K=a(S).id??E,O=y?.variant,P=T["data-testid"]||"modal";/* @__PURE__ */
-return e.jsx(l,{"aria-labelledby":K,"aria-modal":A,component:"div",disableClickOverlayClose:o,disableEscapeClose:o,disableTrapFocus:!1,id:z,open:A,overlay:/* @__PURE__ */e.jsx(t,{}),role:"dialog",strategy:"fixed",onClose:D,...N,children:/* @__PURE__ */e.jsxs("div",{ref:F,className:b?.modal,"data-testid":P,style:{maxHeight:I,maxWidth:C,minHeight:j?k:n(g,k),minWidth:x?B:n(g,B),paddingBottom:y?.rightItems?"0":void 0},children:[
-/* @__PURE__ */e.jsx(r,{blocked:o,closeButton:d,closeIcon:m,cssClasses:b,device:g,dragIcon:f,title:S,titleIdFinal:K}),
-/* @__PURE__ */e.jsx("div",{"aria-label":v?h?.["aria-label"]:void 0,"aria-labelledby":v?h?.["aria-labelledby"]:void 0,className:b?.content,"data-modal-content":!0,"data-testid":`${P}-content`,role:v?"region":void 0,style:{minHeight:H},...v?{tabIndex:0}:{},...p,children:c}),!!O&&!!y&&/* @__PURE__ */e.jsx("div",{className:b?.footer,children:/* @__PURE__ */e.jsx(s,{variant:O,...y})})]})})});export{d as ModalStandAlone};
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { Overlay } from "../../lib/components/overlay/overlay.js";
+import { Popover } from "../popover/popover.js";
+import { ModalHeader } from "./fragments/modalHeader.js";
+import { onlyDesktopSize } from "./utils/onlyDesktopSize.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ModalStandAlone = forwardRef(({ blocked: e, closeButton: t, closeIcon: n, content: r, contentContainer: i, contentHasScroll: a, contentScrollArias: o, cssClasses: s, customHeightAllDevices: c = !1, customWidthAllDevices: l = !1, device: u, dragIcon: d, footer: f, id: p, maxHeight: m, maxWidth: h, minContentHeight: g, minHeight: _, minWidth: v, onKeyDown: y, onPopoverCloseInternally: b, open: x, popover: S, title: C, ...w }, T) => {
+	let E = `modal-${useId().replace(/:/g, "")}`, D = p ?? E, O = `modal-title-${useId().replace(/:/g, "")}`, k = processTextProp(C).id ?? O, A = w["data-testid"] || "modal";
+	return /* @__PURE__ */ jsx(Popover, {
+		"aria-labelledby": k,
+		"aria-modal": x,
+		component: "div",
+		disableClickOverlayClose: e,
+		disableEscapeClose: e,
+		disableTrapFocus: !1,
+		id: D,
+		open: x,
+		overlay: /* @__PURE__ */ jsx(Overlay, {}),
+		role: "dialog",
+		strategy: "fixed",
+		onClose: b,
+		...S,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: T,
+			className: s?.modal,
+			"data-testid": A,
+			style: {
+				maxHeight: m,
+				maxWidth: h,
+				minHeight: c ? _ : onlyDesktopSize(u, _),
+				minWidth: l ? v : onlyDesktopSize(u, v)
+			},
+			children: [
+				/* @__PURE__ */ jsx(ModalHeader, {
+					blocked: e,
+					closeButton: t,
+					closeIcon: n,
+					cssClasses: s,
+					device: u,
+					dragIcon: d,
+					title: C,
+					titleIdFinal: k
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-label": a ? o?.["aria-label"] : void 0,
+					"aria-labelledby": a ? o?.["aria-labelledby"] : void 0,
+					className: s?.content,
+					"data-modal-content": !0,
+					"data-testid": `${A}-content`,
+					role: a ? "region" : void 0,
+					style: { minHeight: g },
+					...a ? { tabIndex: 0 } : {},
+					...i,
+					children: r
+				}),
+				!!f && /* @__PURE__ */ jsx("div", {
+					className: s?.footer,
+					children: f
+				})
+			]
+		})
+	});
+});
+export { ModalStandAlone };

package/dist/esm/components/modal/modalUnControlled.js

@@ -1,2 +1,37 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as n,useState as r,useEffect as t}from"react";import{isKeyEscapePressed as e}from"../../lib/utils/keyboard/keyboard.js";import{ModalControlled as l}from"./modalControlled.js";const s=n(({closeButton:n,closeIcon:s,onClose:c,open:i,popover:a,variant:p,...m},k)=>{const[u,C]=r(i);t(()=>{C(i)},[i]);const d=()=>{C(!1),c?.()};/* @__PURE__ */
-return o.jsx(l,{...m,ref:k,closeButton:n&&{...n,onClick:o=>{d(),n?.onClick?.(o)}},closeIcon:{...s,onClick:o=>{d(),s?.onClick?.(o)}},open:u,popover:{...a},variant:p,onClose:c,onKeyDown:o=>m?.blocked&&e(o.key)?o.stopPropagation():null})});export{s as Modal,s as ModalUnControlled};
+import { processIconProp } from "../../lib/utils/process/processCommonProp.js";
+import { ESCAPE } from "../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../lib/utils/keyboard/keyboard.js";
+import { ModalControlled } from "./modalControlled.js";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const ModalUnControlled = forwardRef(({ closeButton: n, closeIcon: r, onClose: i, open: a, popover: o, variant: s, ...c }, l) => {
+	let [u, d] = useState(a), f = (e) => c?.blocked && isKeyPressed(e.key, ...ESCAPE.key) ? e.stopPropagation() : null;
+	useEffect(() => {
+		d(a);
+	}, [a]);
+	let p = () => {
+		d(!1), i?.();
+	}, m = (t) => {
+		p(), processIconProp(r)?.onClick?.(t);
+	}, h = (e) => {
+		p(), n?.onClick?.(e);
+	};
+	return /* @__PURE__ */ jsx(ModalControlled, {
+		...c,
+		ref: l,
+		closeButton: n && {
+			...n,
+			onClick: h
+		},
+		closeIcon: {
+			...processIconProp(r),
+			onClick: m
+		},
+		open: u,
+		popover: { ...o },
+		variant: s,
+		onClose: i,
+		onKeyDown: f
+	});
+});
+export { ModalUnControlled };

package/dist/esm/components/modal/utils/onlyDesktopSize.js

@@ -1 +1,3 @@
-import{DeviceBreakpointsTypeUtils as o}from"../../../lib/types/breakpoints/breakpoints.js";const s=(s,t)=>o.isDesktopOrLargeDesktop(s)?t:void 0;export{s as onlyDesktopSize};
+import { DeviceBreakpointsTypeUtils } from "../../../lib/types/breakpoints/breakpoints.js";
+const onlyDesktopSize = (e, t) => DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(e) ? t : void 0;
+export { onlyDesktopSize };

package/dist/esm/components/option/components.ts/optionLabelSlice.js

@@ -1,2 +1,15 @@
-import{j as t}from"../../../_virtual/jsx-runtime.js";import{Text as s}from"../../text/text.js";import{pickCustomAttributes as r}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const i=({children:i,component:o,cssClasses:e,customAttributes:u,...m})=>{if(!i)return null;const n=r(m);/* @__PURE__ */
-return t.jsx(s,{additionalClasses:{text:e},component:o,customAttributes:u,...n,children:i})};export{i as OptionLabelSlice};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../../text/text2.js";
+import { jsx } from "react/jsx-runtime";
+const OptionLabelSlice = ({ children: e, component: t, cssClasses: n, customAttributes: r, ...i }) => {
+	if (!e) return null;
+	let a = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: n },
+		component: t,
+		customAttributes: r,
+		...a,
+		children: e
+	});
+};
+export { OptionLabelSlice };

package/dist/esm/components/option/option.js

@@ -1,2 +1,33 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as s,useRef as r,useState as e,useImperativeHandle as n,useEffect as t}from"react";import{useClassName as i}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as a}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{OptionStandAlone as m}from"./optionStandAlone.js";const u=s(({additionalClasses:s,focus:u,onBlur:c,onFocus:l,variant:p,...f},d)=>{const v=i({additionalClassNames:s,component:"OPTION",variant:p}),{LINK:j}=a(),C=r(),[N,x]=e(!1),[L,P]=e(!1);n(d,()=>C.current,[]),t(()=>{u&&C.current?.focus()},[u]);/* @__PURE__ */
-return o.jsx(m,{...f,ref:C,componentLink:j,cssClasses:v,focus:L,hover:N,onBlur:o=>{c?.(o),P(!1)},onFocus:o=>{l?.(o),P(!0)},onMouseEnter:()=>x(!0),onMouseLeave:()=>x(!1)})});export{u as Option};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { OptionStandAlone } from "./optionStandAlone.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const Option = forwardRef(({ additionalClasses: t, focus: n, onBlur: r, onFocus: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: t,
+		component: "OPTION",
+		variant: a
+	}), { LINK: l } = useGenericComponents(), u = useRef(), [d, f] = useState(!1), [p, m] = useState(!1);
+	useImperativeHandle(s, () => u.current, []), useEffect(() => {
+		n && u.current?.focus();
+	}, [n]);
+	let h = (e) => {
+		i?.(e), m(!0);
+	}, g = (e) => {
+		r?.(e), m(!1);
+	};
+	return /* @__PURE__ */ jsx(OptionStandAlone, {
+		...o,
+		ref: u,
+		componentLink: l,
+		cssClasses: c,
+		focus: p,
+		hover: d,
+		onBlur: g,
+		onFocus: h,
+		onMouseEnter: () => f(!0),
+		onMouseLeave: () => f(!1)
+	});
+});
+export { Option };