@kubit-ui-web/react-components 2.0.0-beta.48 → 2.0.0-beta.49

package/dist/esm/components/progressBar/progressBar.js

@@ -1,2 +1,23 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{ProgressBarStandalone as r}from"./progressBarStandAlone.js";const t=a(({additionalSizeClasses:a,additionalVariantClasses:t,percentProgressCompleted:o,size:i,variant:n,...m},l)=>{const p=e({additionalClassNames:t,component:"PROGRESS_BAR",variant:n}),d=e({additionalClassNames:a,component:"PROGRESS_BAR",variant:i}),C=o?Math.min(Math.max(o,0),100):0;/* @__PURE__ */
-return s(r,{...m,ref:l,cssSizeClasses:d,cssVariantClasses:p,progressCompleted:C})});export{t as ProgressBar};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { ProgressBarStandalone } from "./progressBarStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ProgressBar = forwardRef(({ additionalSizeClasses: e, additionalVariantClasses: t, percentProgressCompleted: n, size: r, variant: i, ...a }, o) => {
+	let s = useClassName({
+		additionalClassNames: t,
+		component: "PROGRESS_BAR",
+		variant: i
+	}), c = useClassName({
+		additionalClassNames: e,
+		component: "PROGRESS_BAR",
+		variant: r
+	}), l = n ? Math.min(Math.max(n, 0), 100) : 0;
+	return /* @__PURE__ */ jsx(ProgressBarStandalone, {
+		...a,
+		ref: o,
+		cssSizeClasses: c,
+		cssVariantClasses: s,
+		progressCompleted: l
+	});
+});
+export { ProgressBar };

package/dist/esm/components/progressBar/progressBarStandAlone.js

@@ -1,4 +1,32 @@
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import{forwardRef as s}from"react";import{classNames as e}from"../../lib/utils/classNames/classNames.js";const i=s(({barAriaLabel:s,color:i,cssSizeClasses:o,cssVariantClasses:t,progressAnimation:l,progressCompleted:n,...c},d)=>{const m=c["data-testid"]||"progress-bar",b={backgroundColor:i?.bar},p={backgroundColor:i?.progressBar,transition:`width ${l?.duration} ${l?.timingFunction}`,width:`${n}%`};/* @__PURE__ */
-return r("div",{ref:d,className:t?.progress_bar,"data-testid":`${m}-progressbar`,children:/* @__PURE__ */a("div",{className:t?.barcontainer,children:[
-/* @__PURE__ */r("div",{"aria-label":s,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":n,className:e(o?.bar,t?.bar),"data-testid":m,role:"progressbar",style:b}),
-/* @__PURE__ */r("div",{className:e(o?.progressbar,t?.progressbar),style:p})]})})});export{i as ProgressBarStandalone};
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ProgressBarStandalone = forwardRef(({ barAriaLabel: e, color: t, cssSizeClasses: n, cssVariantClasses: r, progressAnimation: i, progressCompleted: a, ...o }, s) => {
+	let c = o["data-testid"] || "progress-bar", l = { backgroundColor: t?.bar }, u = {
+		backgroundColor: t?.progressBar,
+		transition: `width ${i?.duration} ${i?.timingFunction}`,
+		width: `${a}%`
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: s,
+		className: r?.progress_bar,
+		"data-testid": `${c}-progressbar`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: r?.barcontainer,
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-label": e,
+				"aria-valuemax": 100,
+				"aria-valuemin": 0,
+				"aria-valuenow": a,
+				className: classNames(n?.bar, r?.bar),
+				"data-testid": c,
+				role: "progressbar",
+				style: l
+			}), /* @__PURE__ */ jsx("div", {
+				className: classNames(n?.progressbar, r?.progressbar),
+				style: u
+			})]
+		})
+	});
+});
+export { ProgressBarStandalone };

package/dist/esm/components/radioButton/radioButton.js

@@ -1,2 +1,20 @@
-import{jsx as s}from"react/jsx-runtime";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{RadioButtonStandAlone as e}from"./radioButtonStandAlone.js";import{getState as t}from"./utils/state.utils.js";const o=({additionalClasses:o,checked:r=!1,cssClasses:i,disabled:l=!1,error:m=!1,variant:n,...d})=>{const c=a({additionalClassNames:o,component:"RADIO_BUTTON",variant:n}),u=t(r,l,m);/* @__PURE__ */
-return s(e,{cssClasses:i??c,state:u,...d,checked:r,disabled:l,error:m})};export{o as RadioButton};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { RadioButtonStandAlone } from "./radioButtonStandAlone.js";
+import { getState } from "./utils/state.utils.js";
+import { jsx } from "react/jsx-runtime";
+const RadioButton = ({ additionalClasses: e, checked: t = !1, cssClasses: n, disabled: r = !1, error: i = !1, variant: a, ...o }) => {
+	let s = useClassName({
+		additionalClassNames: e,
+		component: "RADIO_BUTTON",
+		variant: a
+	}), c = getState(t, r, i);
+	return /* @__PURE__ */ jsx(RadioButtonStandAlone, {
+		cssClasses: n ?? s,
+		state: c,
+		...o,
+		checked: t,
+		disabled: r,
+		error: i
+	});
+};
+export { RadioButton };

package/dist/esm/components/radioButton/radioButtonStandAlone.js

@@ -1,4 +1,95 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as a}from"react";import{LabelStandAlone as t}from"../label/labelStandAlone.js";import{Text as i}from"../text/text.js";import{ElementOrIcon as s}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{classNames as o}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as l}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as n,processIconProp as d}from"../../lib/utils/process/processCommonProp.js";import{buildAriaLabelledBy as c}from"./utils/aria.utils.js";const m=({altVariant:m=!1,checked:b,cssClasses:u,disabled:p,error:h,errorAriaLiveType:g,errorIcon:f,errorMessage:v,id:C,label:I,lastChild:N,name:x,onBlur:j,onChange:y,screenReaderId:A,state:k,subTitle:$,tabIndex:_,value:B,...M})=>{let O=`radiobutton-${a().replace(/:/g,"")}`;O=C??O;const R=n($).id&&`${O}__description`,T=v&&`${O}__error`,w={"data-state":k},L=l(w),P=M["data-testid"]??"radio-button";/* @__PURE__ */
-return e("div",{className:u?.rowcontainer,"data-testid":P,...L,style:{display:I?"grid":"block",marginBottom:N?0:void 0},children:[
-/* @__PURE__ */r("div",{...L,className:u?.radiobuttoncontainer,children:/* @__PURE__ */r("input",{"aria-describedby":c({descriptionId:R,error:h,errorMessage:v,errorMessageId:T,screenReaderId:A}),"aria-hidden":M["aria-hidden"],"aria-label":M["aria-label"],"aria-labelledby":M["aria-labelledby"],checked:b,className:o(u?.radio_button,{"global-focus-visible":!!m}),"data-testid":`${P}-input`,disabled:p,id:O,name:x,tabIndex:_,type:"radio",value:B,onBlur:j,onChange:y,...L})}),
-/* @__PURE__ */e("div",{className:u?.infocontainer,children:[!!I?.content&&/* @__PURE__ */r("div",{className:u?.labelcontainer,children:/* @__PURE__ */r(t,{cursor:p?"default":"pointer",customAttributes:w,inputId:O,textCssClasses:o(u?.label,{[`${u?.speciallabel}`]:!!$}),...I,children:I?.content})}),!!n($).children&&("string"==typeof n($)?/* @__PURE__ */r(i,{additionalClasses:{text:u?.sublabel},...n($),id:R}):/* @__PURE__ */r("div",{id:R,children:n($).children})),!(!h||!v)&&/* @__PURE__ */r("div",{"aria-live":g,className:u?.errormessagecontainer,id:T,...L,children:/* @__PURE__ */e(i,{additionalClasses:{text:u?.errormessage},customAttributes:w,children:[!!f&&/* @__PURE__ */r("span",{...L,className:u?.errormessageiconcontainer,children:/* @__PURE__ */r(s,{className:u?.errormessageicon,customAttributes:w,...d(f)})}),v]})})]})]})};export{m as RadioButtonStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { Text } from "../text/text2.js";
+import { processIconProp, processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { LabelStandAlone } from "../label/labelStandAlone.js";
+import { buildAriaLabelledBy } from "./utils/aria.utils.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CURSOR_DEFAULT = "default", CURSOR_POINTER = "pointer";
+const RadioButtonStandAlone = ({ altVariant: e = !1, checked: t, cssClasses: n, disabled: r, error: i, errorAriaLiveType: a, errorIcon: o, errorMessage: s, id: c, label: l, lastChild: u, name: d, onBlur: f, onChange: p, screenReaderId: m, state: h, subTitle: g, tabIndex: _, value: v, ...y }) => {
+	let b = `radiobutton-${useId().replace(/:/g, "")}`;
+	b = c ?? b;
+	let x = processTextProp(g).id && `${b}__description`, S = s && `${b}__error`, C = { "data-state": h }, w = pickCustomAttributes(C), T = y["data-testid"] ?? "radio-button";
+	return /* @__PURE__ */ jsxs("div", {
+		className: n?.rowcontainer,
+		"data-testid": T,
+		...w,
+		style: {
+			display: l ? "grid" : "block",
+			marginBottom: u ? 0 : void 0
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			...w,
+			className: n?.radiobuttoncontainer,
+			children: /* @__PURE__ */ jsx("input", {
+				"aria-describedby": buildAriaLabelledBy({
+					descriptionId: x,
+					error: i,
+					errorMessage: s,
+					errorMessageId: S,
+					screenReaderId: m
+				}),
+				"aria-hidden": y["aria-hidden"],
+				"aria-label": y["aria-label"],
+				"aria-labelledby": y["aria-labelledby"],
+				checked: t,
+				className: classNames(n?.radio_button, { "global-focus-visible": !!e }),
+				"data-testid": `${T}-input`,
+				disabled: r,
+				id: b,
+				name: d,
+				tabIndex: _,
+				type: "radio",
+				value: v,
+				onBlur: f,
+				onChange: p,
+				...w
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: n?.infocontainer,
+			children: [
+				!!l?.content && /* @__PURE__ */ jsx("div", {
+					className: n?.labelcontainer,
+					children: /* @__PURE__ */ jsx(LabelStandAlone, {
+						cursor: r ? CURSOR_DEFAULT : CURSOR_POINTER,
+						customAttributes: C,
+						inputId: b,
+						textCssClasses: classNames(n?.label, { [`${n?.speciallabel}`]: !!g }),
+						...l,
+						children: l?.content
+					})
+				}),
+				!!processTextProp(g).children && (typeof processTextProp(g) == "string" ? /* @__PURE__ */ jsx(Text, {
+					additionalClasses: { text: n?.sublabel },
+					...processTextProp(g),
+					id: x
+				}) : /* @__PURE__ */ jsx("div", {
+					id: x,
+					children: processTextProp(g).children
+				})),
+				!!(i && s) && /* @__PURE__ */ jsx("div", {
+					"aria-live": a,
+					className: n?.errormessagecontainer,
+					id: S,
+					...w,
+					children: /* @__PURE__ */ jsxs(Text, {
+						additionalClasses: { text: n?.errormessage },
+						customAttributes: C,
+						children: [!!o && /* @__PURE__ */ jsx("span", {
+							...w,
+							className: n?.errormessageiconcontainer,
+							children: /* @__PURE__ */ jsx(ElementOrIcon, {
+								className: n?.errormessageicon,
+								customAttributes: C,
+								...processIconProp(o)
+							})
+						}), s]
+					})
+				})
+			]
+		})]
+	});
+};
+export { RadioButtonStandAlone };

package/dist/esm/components/radioButton/utils/aria.utils.js

@@ -1 +1,7 @@
-const e=({descriptionId:e,error:r,errorMessage:o,errorMessageId:s,screenReaderId:t})=>{let d="";e&&(d+=`${e}`),t&&(d+=` ${t}`),o&&r&&(d+=` ${s}`);const n=d.trim();return n.length>0?n:void 0};export{e as buildAriaLabelledBy};
+const buildAriaLabelledBy = ({ descriptionId: e, error: t, errorMessage: n, errorMessageId: r, screenReaderId: i }) => {
+	let a = "";
+	e && (a += `${e}`), i && (a += ` ${i}`), n && t && (a += ` ${r}`);
+	let o = a.trim();
+	return o.length > 0 ? o : void 0;
+};
+export { buildAriaLabelledBy };

package/dist/esm/components/radioButton/utils/state.utils.js

@@ -1 +1,6 @@
-import{STATES as E}from"../../../lib/types/states/states.js";const t=(t=!1,s=!1,D=!1)=>{const L=D,R=s,e=t;return L&&!e?E.ERROR:L&&e?E.ERROR_SELECTED:R&&!e?E.DISABLED:R&&e?E.DISABLED_SELECTED:e?E.SELECTED:E.DEFAULT};export{t as getState};
+import { STATES } from "../../../lib/types/states/states.js";
+const getState = (e = !1, t = !1, n = !1) => {
+	let r = n, i = t, a = e;
+	return r && !a ? STATES.ERROR : r && a ? STATES.ERROR_SELECTED : i && !a ? STATES.DISABLED : i && a ? STATES.DISABLED_SELECTED : a ? STATES.SELECTED : STATES.DEFAULT;
+};
+export { getState };

package/dist/esm/components/select/selectControlled.js

@@ -1 +1,33 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useEffect as s}from"react";import{TAB as t}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{useClassName as n}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as i}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{isKeyPressed as l}from"../../lib/utils/keyboard/keyboard.js";import{focusFirstDescendant as a}from"../../lib/utils/focusHandlers/focusHandlers.js";import{SelectStandAlone as m}from"./selectStandAlone.js";const p=o(({additionalClasses:o,closePopoverOnScroll:p,listOptions:c,onClosePopover:d,open:u,url:f,variant:v,...y},C)=>{const{LINK:b}=i(),j=n({additionalClassNames:o,component:"SELECT",variant:v}),k=r(null);return s(()=>{if(p)return window.addEventListener("scroll",d),()=>{window.removeEventListener("scroll",d)}},[p,d]),/* @__PURE__ */e(m,{ref:C,component:f?b:"button",cssClasses:j,listOptions:c,listOptionsRef:k,open:u,onButtonKeyDown:e=>{u&&l(e.key,t.key)&&!e.shiftKey&&k.current&&("selection"===c.type?k.current.firstElementChild?.focus():a({element:k.current}),e.preventDefault())},onClosePopover:d,...y})});export{p as SelectControlled};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TAB } from "../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../lib/utils/keyboard/keyboard.js";
+import { focusFirstDescendant } from "../../lib/utils/focusHandlers/focusHandlers.js";
+import { SelectStandAlone } from "./selectStandAlone.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const SelectControlled = forwardRef(({ additionalClasses: t, closePopoverOnScroll: n, listOptions: r, onClosePopover: i, open: a, url: o, variant: s, ...c }, l) => {
+	let { LINK: u } = useGenericComponents(), d = useClassName({
+		additionalClassNames: t,
+		component: "SELECT",
+		variant: s
+	}), f = useRef(null);
+	return useEffect(() => {
+		if (n) return window.addEventListener("scroll", i), () => {
+			window.removeEventListener("scroll", i);
+		};
+	}, [n, i]), /* @__PURE__ */ jsx(SelectStandAlone, {
+		ref: l,
+		component: o ? u : "button",
+		cssClasses: d,
+		listOptions: r,
+		listOptionsRef: f,
+		open: a,
+		onButtonKeyDown: (e) => {
+			a && isKeyPressed(e.key, TAB.key) && !e.shiftKey && f.current && (r.type === "selection" ? f.current.firstElementChild?.focus() : focusFirstDescendant({ element: f.current }), e.preventDefault());
+		},
+		onClosePopover: i,
+		...c
+	});
+});
+export { SelectControlled };

package/dist/esm/components/select/selectStandAlone.js

@@ -1,5 +1,95 @@
-import{jsxs as o,jsx as e}from"react/jsx-runtime";import{forwardRef as t,useId as n,useMemo as s}from"react";import{Text as i}from"../text/text.js";import{ElementOrIcon as r}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as l}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as a,processIconProp as c}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as p}from"../../lib/components/customComponent/customComponent.js";import{ListOptions as m}from"../listOptions/listOptions.js";import{keyUpMove as u,keyDownMove as d}from"../listOptions/utils/listOptions.utils.js";import{Popover as b}from"../popover/popover.js";const v=t(({buttonOrLinkRef:t,component:v,cssClasses:f,icon:C,label:h,listOptions:k,listOptionsRef:y,onBlur:x,onButtonClick:O,onButtonKeyDown:g,onClosePopover:D,onFocus:j,onKeyDown:F,onOptionClick:M,open:w,optionSelected:A,popover:K,url:B,urlTarget:N,...E},I)=>{const R=`select-${n().replace(/:/g,"")}`,T=w?`${R}-list`:void 0,$=E["data-testid"]||"select",L=l(E),P=s(()=>{return{currentFocusSelected:-1,keyDownMove:d(k.options),keyLeftMove:0,keyRightMove:0,keyTabMove:(o=k.options,(e,t)=>{if(t?.shiftKey){const o=Math.max(e,0)-1;return o>=0&&t?.preventDefault(),Math.max(o,0)}const n=Math.max(e,0)+1;return n<=o.length-1&&t?.preventDefault(),Math.min(n,o.length-1)}),keyUpMove:u,size:k.options.length};var o},[k.options]);/* @__PURE__ */
-return o("div",{ref:I,className:f?.select,"data-testid":$,role:"combobox",onBlur:x,onFocus:j,onKeyDown:F,...L,"aria-controls":"select-list","aria-expanded":w,tabIndex:0,children:[
-/* @__PURE__ */o(p,{ref:t,"aria-controls":T,"aria-expanded":w,"aria-haspopup":"listbox",className:f?.buttonorlinkcontainer,component:v,target:B?N:void 0,type:B?void 0:"button",url:B,onClick:O,onKeyDown:g,children:[
-/* @__PURE__ */e(i,{additionalClasses:{text:w?f?.labelopened:f?.labelclosed},component:"span",...a(h)}),
-/* @__PURE__ */e(r,{className:w?f?.iconopened:f?.iconclosed,rotate:w?"180deg":"0deg",transitionDuration:"0.2s",...c(C)})]}),!!K&&/* @__PURE__ */e(b,{anchorElement:t?.current,component:"div",disableAutoFocusFirstDescendant:!0,disableAutoFocusFirstDescendantAfterClose:!0,disableClickOverlayClose:!1,disableEscapeClose:!1,disableTrapFocus:!0,id:T,open:w,placement:"bottom",preventCloseOnClickElements:[t?.current],strategy:"absolute",...K,onClose:()=>{D(),K?.onClose?.()},children:/* @__PURE__ */e("div",{className:f?.listoptionscontainer,"data-testid":`${$}-list`,children:!!k.variant&&!!k.optionVariant&&/* @__PURE__ */e(m,{ref:y,roveFocus:"selection"===k.type?P:void 0,selectedValue:A,...k,onOptionClick:o=>{M(o),D()}})})})]})});export{v as SelectStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { Text } from "../text/text2.js";
+import { processIconProp, processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { keyDownMove, keyUpMove } from "../listOptions/utils/listOptions.utils.js";
+import { ListOptions } from "../listOptions/listOptions.js";
+import { Popover } from "../popover/popover.js";
+import { forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SelectStandAlone = forwardRef(({ buttonOrLinkRef: i, component: a, cssClasses: o, icon: s, label: c, listOptions: l, listOptionsRef: u, onBlur: d, onButtonClick: f, onButtonKeyDown: p, onClosePopover: m, onFocus: h, onKeyDown: g, onOptionClick: _, open: v, optionSelected: y, popover: b, url: x, urlTarget: S, ...C }, w) => {
+	let T = `select-${useId().replace(/:/g, "")}`, E = v ? `${T}-list` : void 0, D = C["data-testid"] || "select", O = pickCustomAttributes(C), k = (e) => (t, n) => {
+		if (n?.shiftKey) {
+			let e = Math.max(t, 0) - 1;
+			return e >= 0 && n?.preventDefault(), Math.max(e, 0);
+		}
+		let r = Math.max(t, 0) + 1;
+		return r <= e.length - 1 && n?.preventDefault(), Math.min(r, e.length - 1);
+	}, A = useMemo(() => ({
+		currentFocusSelected: -1,
+		keyDownMove: keyDownMove(l.options),
+		keyLeftMove: 0,
+		keyRightMove: 0,
+		keyTabMove: k(l.options),
+		keyUpMove,
+		size: l.options.length
+	}), [l.options]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: w,
+		className: o?.select,
+		"data-testid": D,
+		role: "combobox",
+		onBlur: d,
+		onFocus: h,
+		onKeyDown: g,
+		...O,
+		"aria-controls": "select-list",
+		"aria-expanded": v,
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsxs(CustomComponent, {
+			ref: i,
+			"aria-controls": E,
+			"aria-expanded": v,
+			"aria-haspopup": "listbox",
+			className: o?.buttonorlinkcontainer,
+			component: a,
+			target: x ? S : void 0,
+			type: x ? void 0 : "button",
+			url: x,
+			onClick: f,
+			onKeyDown: p,
+			children: [/* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: v ? o?.labelopened : o?.labelclosed },
+				component: "span",
+				...processTextProp(c)
+			}), /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: v ? o?.iconopened : o?.iconclosed,
+				rotate: v ? "180deg" : "0deg",
+				transitionDuration: "0.2s",
+				...processIconProp(s)
+			})]
+		}), !!b && /* @__PURE__ */ jsx(Popover, {
+			anchorElement: i?.current,
+			component: "div",
+			disableAutoFocusFirstDescendant: !0,
+			disableAutoFocusFirstDescendantAfterClose: !0,
+			disableClickOverlayClose: !1,
+			disableEscapeClose: !1,
+			disableTrapFocus: !0,
+			id: E,
+			open: v,
+			placement: "bottom",
+			preventCloseOnClickElements: [i?.current],
+			strategy: "absolute",
+			...b,
+			onClose: () => {
+				m(), b?.onClose?.();
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: o?.listoptionscontainer,
+				"data-testid": `${D}-list`,
+				children: !!l.variant && !!l.optionVariant && /* @__PURE__ */ jsx(ListOptions, {
+					ref: u,
+					roveFocus: l.type === "selection" ? A : void 0,
+					selectedValue: y,
+					...l,
+					onOptionClick: (e) => {
+						_(e), m();
+					}
+				})
+			})
+		})]
+	});
+});
+export { SelectStandAlone };

package/dist/esm/components/select/selectUncontrolled.js

@@ -1 +1,40 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useState as n,useRef as t,useEffect as r}from"react";import{ESCAPE as i}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{SelectControlled as c}from"./selectControlled.js";const l=o(({defaultOpen:o=!1,defaultOptionSelected:l,onBlur:s,onButtonClick:u,onClosePopover:d,onFocus:a,onOptionClick:p,openAndCloseOnHover:m=!1,...f},k)=>{const[y,v]=n(o),[C,b]=n(l),O=t(null);return r(()=>{const e=()=>{document.hidden&&v(!1)};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]),/* @__PURE__ */e(c,{...f,ref:k,buttonOrLinkRef:O,open:y,optionSelected:C,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(v(!1),s?.(!1)),m&&(v(!1),s?.(!1))},onButtonClick:()=>{u?.(!y),v(!y)},onClosePopover:()=>{v(!1),d?.(!1)},onFocus:()=>{m&&(v(!0),a?.(!0))},onKeyDown:e=>{i.key.includes(e.key)&&y&&(O.current?.focus(),v(!1))},onOptionClick:e=>{b(e),p?.(e)}})});export{l as Select,l as SelectUnControlled};
+import { ESCAPE } from "../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { SelectControlled } from "./selectControlled.js";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const SelectUnControlled = forwardRef(({ defaultOpen: n = !1, defaultOptionSelected: r, onBlur: i, onButtonClick: a, onClosePopover: o, onFocus: s, onOptionClick: c, openAndCloseOnHover: l = !1, ...u }, d) => {
+	let [f, p] = useState(n), [m, h] = useState(r), g = useRef(null);
+	useEffect(() => {
+		let e = () => {
+			document.hidden && p(!1);
+		};
+		return document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
+	}, []);
+	let _ = () => {
+		a?.(!f), p(!f);
+	}, v = () => {
+		p(!1), o?.(!1);
+	}, y = (e) => {
+		h(e), c?.(e);
+	}, b = (t) => {
+		ESCAPE.key.includes(t.key) && f && (g.current?.focus(), p(!1));
+	}, x = () => {
+		l && (p(!0), s?.(!0));
+	}, S = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || (p(!1), i?.(!1)), l && (p(!1), i?.(!1));
+	};
+	return /* @__PURE__ */ jsx(SelectControlled, {
+		...u,
+		ref: d,
+		buttonOrLinkRef: g,
+		open: f,
+		optionSelected: m,
+		onBlur: S,
+		onButtonClick: _,
+		onClosePopover: v,
+		onFocus: x,
+		onKeyDown: b,
+		onOptionClick: y
+	});
+});
+export { SelectUnControlled };

package/dist/esm/components/selectorBoxFile/components/selectorBoxFileAnimation.js

@@ -1,3 +1,47 @@
-import{jsxs as t,jsx as a,Fragment as e}from"react/jsx-runtime";import{Children as i,isValidElement as o,cloneElement as n}from"react";import{pickCustomAttributes as r}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{useBorderAnimation as s}from"../hooks/useBorderAnimation.js";const m=({children:m,cssClasses:c,focus:d,onAnimationCompleted:f,percentage:l,state:p,...u})=>{const{bottomRef:h,leftRef:b,rightRef:v,topRef:N}=s({onAnimationCompleted:f,percentage:l}),A=r({"data-focus":d,"data-state":p}),C=c?.animationcontainer,g=c?.topanimationcontainer,R=c?.rightanimationcontainer,j=c?.bottomanimationcontainer,k=c?.leftanimationcontainer,x=i.map(m,t=>o(t)?n(t,{focus:d}):t);return C?/* @__PURE__ */t("div",{className:C,"data-focus":d,"data-testid":`${u["data-testid"]}-animations`,...A,children:[!!g&&/* @__PURE__ */a("div",{...A,ref:N,className:g}),!!R&&/* @__PURE__ */a("div",{...A,ref:v,className:R}),!!j&&/* @__PURE__ */a("div",{...A,ref:h,className:j}),!!k&&/* @__PURE__ */a("div",{...A,ref:b,className:k}),
-/* @__PURE__ */a("div",{...A,className:c.borderanimationcontainer,children:m})]}):
-/* @__PURE__ */a(e,{children:x})};export{m as SelectorBoxFileAnimation};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { useBorderAnimation } from "../hooks/useBorderAnimation.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const SelectorBoxFileAnimation = ({ children: t, cssClasses: n, focus: r, onAnimationCompleted: i, percentage: a, state: o, ...s }) => {
+	let { bottomRef: c, leftRef: l, rightRef: u, topRef: d } = useBorderAnimation({
+		onAnimationCompleted: i,
+		percentage: a
+	}), f = pickCustomAttributes({
+		"data-focus": r,
+		"data-state": o
+	}), p = n?.animationcontainer, m = n?.topanimationcontainer, h = n?.rightanimationcontainer, g = n?.bottomanimationcontainer, _ = n?.leftanimationcontainer, v = Children.map(t, (e) => isValidElement(e) ? cloneElement(e, { focus: r }) : e);
+	return p ? /* @__PURE__ */ jsxs("div", {
+		className: p,
+		"data-focus": r,
+		"data-testid": `${s["data-testid"]}-animations`,
+		...f,
+		children: [
+			!!m && /* @__PURE__ */ jsx("div", {
+				...f,
+				ref: d,
+				className: m
+			}),
+			!!h && /* @__PURE__ */ jsx("div", {
+				...f,
+				ref: u,
+				className: h
+			}),
+			!!g && /* @__PURE__ */ jsx("div", {
+				...f,
+				ref: c,
+				className: g
+			}),
+			!!_ && /* @__PURE__ */ jsx("div", {
+				...f,
+				ref: l,
+				className: _
+			}),
+			/* @__PURE__ */ jsx("div", {
+				...f,
+				className: n.borderanimationcontainer,
+				children: t
+			})
+		]
+	}) : /* @__PURE__ */ jsx(Fragment$1, { children: v });
+};
+export { SelectorBoxFileAnimation };

package/dist/esm/components/selectorBoxFile/components/selectorBoxFileContainerBox.js

@@ -1,8 +1,77 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{Text as n}from"../../text/text.js";import{ElementOrIcon as e}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{STATES as s}from"../../../lib/types/states/states.js";import{pickCustomAttributes as i}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as c,processTextProp as a}from"../../../lib/utils/process/processCommonProp.js";const r=({containerBoxStateContent:r,cssClasses:l,filename:m,focus:p,htmlFor:d,loader:u,state:b})=>{const x={"data-focus":p,"data-state":b};/* @__PURE__ */
-return t("label",{className:l?.containerboxcontainer,"data-focus":p,htmlFor:d,...i(x),children:[
-/* @__PURE__ */t("span",{children:[u,
-/* @__PURE__ */o(e,{className:l?.containerboxicon,customAttributes:x,...c(r[b]?.icon)}),
-/* @__PURE__ */o(e,{className:l?.containerboxicon,customAttributes:x,...c(r[b]?.icon)})]}),
-/* @__PURE__ */t("span",{className:l?.containerboxtextscontainer,...i(x),children:[!!m&&[s.LOADING,s.SUCCESS,s.ERROR].includes(b)&&/* @__PURE__ */o(n,{additionalClasses:{text:l?.containerboxfilename},component:"span",customAttributes:x,children:m}),!!a(r[b]?.actionText).children&&/* @__PURE__ */t("span",{className:l?.actioniconandactiontextcontainer,...i(x),children:[
-/* @__PURE__ */o(e,{className:l?.actionicon,customAttributes:x,...c(r[b]?.actionIcon)}),
-/* @__PURE__ */o(n,{additionalClasses:{text:l?.containerboxactiontext},component:"span",customAttributes:x,...a(r[b]?.actionText),children:a(r[b]?.actionText).children})]}),!!r[b]?.description&&/* @__PURE__ */o(n,{additionalClasses:{text:l?.containerboxdescription},component:"span",customAttributes:x,...a(r[b]?.description),children:a(r[b]?.description).children})]}),!!r[b]?.iconRight&&/* @__PURE__ */o("span",{children:/* @__PURE__ */o(e,{className:l?.containerboxicon,customAttributes:x,...c(r[b]?.iconRight)})})]})};export{r as SelectorBoxFileContainerBox};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../../text/text2.js";
+import { processIconProp, processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SelectorBoxFileContainerBox = ({ containerBoxStateContent: e, cssClasses: t, filename: n, focus: r, htmlFor: i, loader: a, state: o }) => {
+	let s = {
+		"data-focus": r,
+		"data-state": o
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: t?.containerboxcontainer,
+		"data-focus": r,
+		htmlFor: i,
+		...pickCustomAttributes(s),
+		children: [
+			/* @__PURE__ */ jsxs("span", { children: [
+				a,
+				/* @__PURE__ */ jsx(ElementOrIcon, {
+					className: t?.containerboxicon,
+					customAttributes: s,
+					...processIconProp(e[o]?.icon)
+				}),
+				/* @__PURE__ */ jsx(ElementOrIcon, {
+					className: t?.containerboxicon,
+					customAttributes: s,
+					...processIconProp(e[o]?.icon)
+				})
+			] }),
+			/* @__PURE__ */ jsxs("span", {
+				className: t?.containerboxtextscontainer,
+				...pickCustomAttributes(s),
+				children: [
+					!!n && [
+						STATES.LOADING,
+						STATES.SUCCESS,
+						STATES.ERROR
+					].includes(o) && /* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: t?.containerboxfilename },
+						component: "span",
+						customAttributes: s,
+						children: n
+					}),
+					!!processTextProp(e[o]?.actionText).children && /* @__PURE__ */ jsxs("span", {
+						className: t?.actioniconandactiontextcontainer,
+						...pickCustomAttributes(s),
+						children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+							className: t?.actionicon,
+							customAttributes: s,
+							...processIconProp(e[o]?.actionIcon)
+						}), /* @__PURE__ */ jsx(Text, {
+							additionalClasses: { text: t?.containerboxactiontext },
+							component: "span",
+							customAttributes: s,
+							...processTextProp(e[o]?.actionText),
+							children: processTextProp(e[o]?.actionText).children
+						})]
+					}),
+					!!e[o]?.description && /* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: t?.containerboxdescription },
+						component: "span",
+						customAttributes: s,
+						...processTextProp(e[o]?.description),
+						children: processTextProp(e[o]?.description).children
+					})
+				]
+			}),
+			!!e[o]?.iconRight && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: t?.containerboxicon,
+				customAttributes: s,
+				...processIconProp(e[o]?.iconRight)
+			}) })
+		]
+	});
+};
+export { SelectorBoxFileContainerBox };

package/dist/esm/components/selectorBoxFile/hooks/useBorderAnimation.js

@@ -1 +1,45 @@
-import{useRef as e,useState as t,useEffect as n}from"react";import{getTopBarWith as r,getRightBarHeight as i,getBottomBarWith as c,getLeftBarHeight as s}from"../utils/animation/animation.js";const o="100%",a=(e,t)=>{e&&(e.style.transition="none",e.style[t]="0%",e.style.removeProperty("transition"))},u=({...u})=>{const d=e(null),l=e(null),h=e(null),g=e(null),[p,m]=t(!1),[v,y]=t(!1),[E,L]=t(!1);return n(()=>{0===u.percentage?(a(d.current,"width"),a(l.current,"height"),a(h.current,"width"),a(g.current,"height"),m(!1),y(!1),L(!1)):u.percentage>0&&(u.percentage>=0&&d?.current&&(d.current.style.width=`${r(u.percentage)}%`),p&&u.percentage>25&&l?.current&&(l.current.style.height=`${i(u.percentage)}%`),v&&u.percentage>50&&h?.current&&(h.current.style.width=`${c(u.percentage)}%`),E&&u.percentage>75&&g?.current&&(g.current.style.height=`${s(u.percentage)}%`))},[u.percentage,p,v,E]),n(()=>{const e=()=>{m(d.current?.style.width===o)},t=()=>{y(l.current?.style.height===o)},n=()=>{L(h.current?.style.width===o)},r=()=>{g.current?.style.height===o&&u.onAnimationCompleted?.()};return d.current?.addEventListener("transitionend",e),l.current?.addEventListener("transitionend",t),h.current?.addEventListener("transitionend",n),g.current?.addEventListener("transitionend",r),()=>{d.current?.removeEventListener("transitionend",e),l.current?.removeEventListener("transitionend",t),h.current?.removeEventListener("transitionend",n),g.current?.removeEventListener("transitionend",r)}},[]),{bottomRef:h,leftRef:g,rightRef:l,topRef:d}};export{u as useBorderAnimation};
+import { getBottomBarWith, getLeftBarHeight, getRightBarHeight, getTopBarWith } from "../utils/animation/animation.js";
+import { useEffect, useRef, useState } from "react";
+var FIRST_QUARTER = 25, SECOND_QUARTER = 50, THIRD_QUARTER = 75, ZERO = 0, MAX = "100%", resetMeasure = (e, t) => {
+	e && (e.style.transition = "none", e.style[t] = "0%", e.style.removeProperty("transition"));
+};
+const useBorderAnimation = ({ ...i }) => {
+	let a = useRef(null), o = useRef(null), s = useRef(null), c = useRef(null), [l, u] = useState(!1), [d, f] = useState(!1), [p, m] = useState(!1), h = () => {
+		i.percentage >= ZERO && a?.current && (a.current.style.width = `${getTopBarWith(i.percentage)}%`);
+	}, g = () => {
+		l && i.percentage > FIRST_QUARTER && o?.current && (o.current.style.height = `${getRightBarHeight(i.percentage)}%`);
+	}, _ = () => {
+		d && i.percentage > SECOND_QUARTER && s?.current && (s.current.style.width = `${getBottomBarWith(i.percentage)}%`);
+	}, v = () => {
+		p && i.percentage > THIRD_QUARTER && c?.current && (c.current.style.height = `${getLeftBarHeight(i.percentage)}%`);
+	}, y = () => {
+		resetMeasure(a.current, "width"), resetMeasure(o.current, "height"), resetMeasure(s.current, "width"), resetMeasure(c.current, "height"), u(!1), f(!1), m(!1);
+	};
+	return useEffect(() => {
+		i.percentage === 0 ? y() : i.percentage > 0 && (h(), g(), _(), v());
+	}, [
+		i.percentage,
+		l,
+		d,
+		p
+	]), useEffect(() => {
+		let e = () => {
+			u(a.current?.style.width === MAX);
+		}, t = () => {
+			f(o.current?.style.height === MAX);
+		}, n = () => {
+			m(s.current?.style.width === MAX);
+		}, r = () => {
+			c.current?.style.height === MAX && i.onAnimationCompleted?.();
+		};
+		return a.current?.addEventListener("transitionend", e), o.current?.addEventListener("transitionend", t), s.current?.addEventListener("transitionend", n), c.current?.addEventListener("transitionend", r), () => {
+			a.current?.removeEventListener("transitionend", e), o.current?.removeEventListener("transitionend", t), s.current?.removeEventListener("transitionend", n), c.current?.removeEventListener("transitionend", r);
+		};
+	}, []), {
+		bottomRef: s,
+		leftRef: c,
+		rightRef: o,
+		topRef: a
+	};
+};
+export { useBorderAnimation };

package/dist/esm/components/selectorBoxFile/selectorBoxFile.js

@@ -1,2 +1,40 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as s,useState as o}from"react";import{useClassName as t}from"../../lib/hooks/useClassName/useClassName.js";import{SelectorBoxFileStandAlone as i}from"./selectorBoxFileStandAlone.js";import{getState as n}from"./utils/state/state.js";const r=s(({additionalClasses:s,disabled:r=!1,error:a=!1,errorFileExtensionMessage:l={content:""},errorMaxSizeMessage:c={content:""},fileExtension:m,loading:d=!1,maxSize:u,onChange:f,onFileError:p,onSizeError:x,percentage:E=0,success:g=!1,variant:v,...C},S)=>{const z=t({additionalClassNames:s,component:"SELECTOR_BOX_FILE",variant:v}),[F,h]=o(!1),[j,B]=o({validExtension:!0,validSize:!0});/* @__PURE__ */
-return e(i,{...C,ref:S,cssClasses:z,focus:F,percentage:E,state:n(d,g,a||!j.validExtension||!j.validSize,r),onBlur:()=>{h(!1)},onChange:e=>{(e=>{if(!e||0===e.length)return;const s=e[0],o=s.size/1024/1024,t=s.type;let i=!0,n=!0;u&&o>u&&(i=!1,x?.(!0)),m&&!m?.some(e=>t.includes(e))&&(n=!1,p?.(!0)),B({validExtension:n,validSize:i})})(e.target.files),f?.(e)},onFocus:()=>{h(!0)}})});export{r as SelectorBoxFile};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { SelectorBoxFileStandAlone } from "./selectorBoxFileStandAlone.js";
+import { getState } from "./utils/state/state.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const SelectorBoxFile = forwardRef(({ additionalClasses: r, disabled: o = !1, error: s = !1, errorFileExtensionMessage: c = { content: "" }, errorMaxSizeMessage: l = { content: "" }, fileExtension: u, loading: d = !1, maxSize: f, onChange: p, onFileError: m, onSizeError: h, percentage: g = 0, success: _ = !1, variant: v, ...y }, b) => {
+	let x = useClassName({
+		additionalClassNames: r,
+		component: "SELECTOR_BOX_FILE",
+		variant: v
+	}), [S, C] = useState(!1), [w, T] = useState({
+		validExtension: !0,
+		validSize: !0
+	}), E = () => {
+		C(!0);
+	}, D = () => {
+		C(!1);
+	}, O = (e) => {
+		if (!e || e.length === 0) return;
+		let t = e[0], n = t.size / 1024 / 1024, r = t.type, i = !0, a = !0;
+		f && n > f && (i = !1, h?.(!0)), u && !u?.some((e) => r.includes(e)) && (a = !1, m?.(!0)), T({
+			validExtension: a,
+			validSize: i
+		});
+	}, k = () => s || !w.validExtension || !w.validSize, A = (e) => {
+		O(e.target.files), p?.(e);
+	};
+	return /* @__PURE__ */ jsx(SelectorBoxFileStandAlone, {
+		...y,
+		ref: b,
+		cssClasses: x,
+		focus: S,
+		percentage: g,
+		state: getState(d, _, k(), o),
+		onBlur: D,
+		onChange: A,
+		onFocus: E
+	});
+});
+export { SelectorBoxFile };