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

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

@@ -1,9 +1,107 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{Text as e}from"../text/text.js";import{ElementOrIcon as o}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{STATES as i}from"../../lib/types/states/states.js";import{pickCustomAttributes as l}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processText as n}from"../../lib/utils/process/processText/processText.js";import{CustomComponent as r}from"../../lib/components/customComponent/customComponent.js";import{isKeyEnterPressed as a,isKeySpacePressed as c}from"../../lib/utils/keyboard/keyboard.js";import{OptionLabelSlice as m}from"./components.ts/optionLabelSlice.js";import{getState as d,getHighlightedIndexes as u}from"./utils/option.utils.js";const b=s(({checkedIcon:s,component:b,componentLink:p,cssClasses:h,disabled:j,extraContent:x,focus:g,hover:f,icon:C,label:E,labelCharsHighlighted:L,multiSelect:k,onBlur:A,onClick:I,onFocus:v,onMouseEnter:y,onMouseLeave:$,role:T,selected:D,sublabel:M,tabIndex:N,url:S,...H})=>{const _=d(j,g,D,k,f,!!L&&L?.length>0),B={"data-state":_},F=_===i.DISABLED,O=l({...H,customAttributes:B}),w=l(B),P=O["data-testid"]||"option",U=[i.MULTIPLE_SELECTED,i.MULTIPLE_SELECTED_HOVER,i.SELECTED].includes(_);let K,R,V;if("string"==typeof E){const{firstHighlightedIndex:t,lastHighlightedIndex:s}=u(E,L);K=E.substring(0,t),R=E.substring(t,s),V=E.substring(s)}/* @__PURE__ */
-return t.jsxs(r,{"aria-disabled":F,className:h?.option,...O,component:S?p:b??"div","data-testid":P,role:T,tabIndex:N,url:S,onBlur:A,onClick:t=>{F||I?.(t)},onFocus:v,onKeyDown:t=>{F||!a(t.key)&&!c(t.key)||I?.(t)},onMouseEnter:y,onMouseLeave:$,...w,children:[
-/* @__PURE__ */t.jsxs("div",{className:h?.firstrowcontainer,children:[
-/* @__PURE__ */t.jsxs("div",{className:h?.labeliconcontainer,...w,children:[
-/* @__PURE__ */t.jsx(o,{className:h?.icon,customAttributes:B,...C}),!!n(M).children&&/* @__PURE__ */t.jsx("div",{className:h?.sublabelcontainer,...w,children:/* @__PURE__ */t.jsx(e,{additionalClasses:{text:h?.sublabel},component:"span",customAttributes:B,...n(M)})}),
-/* @__PURE__ */t.jsx("p",{children:"string"==typeof E?/* @__PURE__ */t.jsxs(t.Fragment,{children:[" ",
-/* @__PURE__ */t.jsx(m,{component:"span",cssClasses:h?.label,customAttributes:B,"data-testid":`${P}-first-no-hightlighted-label`,children:K}),
-/* @__PURE__ */t.jsx(m,{component:"span",cssClasses:`${h?.label} ${h?.labelhighlighted}`,customAttributes:B,"data-testid":`${P}-highlighted-label`,children:R}),
-/* @__PURE__ */t.jsx(m,{component:"span",cssClasses:`${h?.label} ${h?.labelhighlighted}`,customAttributes:B,"data-testid":`${P}-last-no-hightlighted-label`,children:V})]}):/* @__PURE__ */t.jsx(m,{component:"span",cssClasses:h?.label,customAttributes:B,"data-testid":`${P}-label`,children:E})})]}),U&&/* @__PURE__ */t.jsx(o,{className:h?.checkedicon,customAttributes:B,...s})]}),!!x&&x]})});export{b as OptionStandAlone};
+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 { STATES } from "../../lib/types/states/states.js";
+import { ENTER, SPACE } from "../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../lib/utils/keyboard/keyboard.js";
+import { OptionLabelSlice } from "./components.ts/optionLabelSlice.js";
+import { getHighlightedIndexes, getState } from "./utils/option.utils.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const OptionStandAlone = forwardRef(({ checkedIcon: n, component: r, componentLink: i, cssClasses: a, disabled: o, extraContent: s, focus: c, hover: l, icon: u, label: d, labelCharsHighlighted: f, multiSelect: p, onBlur: m, onClick: h, onFocus: g, onMouseEnter: _, onMouseLeave: v, role: y, selected: b, sublabel: x, tabIndex: S, url: C, ...w }, T) => {
+	let E = getState(o, c, b, p, l, !!f && f?.length > 0), D = { "data-state": E }, O = E === STATES.DISABLED, k = (e) => {
+		O || h?.(e);
+	}, A = pickCustomAttributes({
+		...w,
+		customAttributes: D
+	}), j = pickCustomAttributes(D), M = A["data-testid"] || "option", N = [
+		STATES.MULTIPLE_SELECTED,
+		STATES.MULTIPLE_SELECTED_HOVER,
+		STATES.SELECTED
+	].includes(E), P, F, I;
+	if (typeof d == "string") {
+		let { firstHighlightedIndex: e, lastHighlightedIndex: t } = getHighlightedIndexes(d, f);
+		P = d.substring(0, e), F = d.substring(e, t), I = d.substring(t);
+	}
+	return /* @__PURE__ */ jsxs(CustomComponent, {
+		ref: T,
+		"aria-disabled": O,
+		className: a?.option,
+		...A,
+		component: C ? i : r ?? "div",
+		"data-testid": M,
+		role: y,
+		tabIndex: S,
+		url: C,
+		onBlur: m,
+		onClick: k,
+		onFocus: g,
+		onKeyDown: (e) => {
+			!O && isKeyPressed(e.key, ENTER.key, SPACE.key) && h?.(e);
+		},
+		onMouseEnter: _,
+		onMouseLeave: v,
+		...j,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: a?.firstrowcontainer,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: a?.labeliconcontainer,
+				...j,
+				children: [
+					/* @__PURE__ */ jsx(ElementOrIcon, {
+						className: a?.icon,
+						customAttributes: D,
+						...processIconProp(u)
+					}),
+					!!processTextProp(x).children && /* @__PURE__ */ jsx("div", {
+						className: a?.sublabelcontainer,
+						...j,
+						children: /* @__PURE__ */ jsx(Text, {
+							additionalClasses: { text: a?.sublabel },
+							component: "span",
+							customAttributes: D,
+							...processTextProp(x)
+						})
+					}),
+					/* @__PURE__ */ jsx("p", { children: typeof d == "string" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						" ",
+						/* @__PURE__ */ jsx(OptionLabelSlice, {
+							component: "span",
+							cssClasses: a?.label,
+							customAttributes: D,
+							"data-testid": `${M}-first-no-hightlighted-label`,
+							children: P
+						}),
+						/* @__PURE__ */ jsx(OptionLabelSlice, {
+							component: "span",
+							cssClasses: `${a?.label} ${a?.labelhighlighted}`,
+							customAttributes: D,
+							"data-testid": `${M}-highlighted-label`,
+							children: F
+						}),
+						/* @__PURE__ */ jsx(OptionLabelSlice, {
+							component: "span",
+							cssClasses: `${a?.label} ${a?.labelhighlighted}`,
+							customAttributes: D,
+							"data-testid": `${M}-last-no-hightlighted-label`,
+							children: I
+						})
+					] }) : /* @__PURE__ */ jsx(OptionLabelSlice, {
+						component: "span",
+						cssClasses: a?.label,
+						customAttributes: D,
+						"data-testid": `${M}-label`,
+						children: d
+					}) })
+				]
+			}), N && /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: a?.checkedicon,
+				customAttributes: D,
+				...processIconProp(n)
+			})]
+		}), !!s && s]
+	});
+});
+export { OptionStandAlone };

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

@@ -1 +1,14 @@
-import{STATES as e}from"../../../lib/types/states/states.js";const E=(E,t,L,s,o,i)=>E?e.DISABLED:t?e.FOCUS:L?s?o?e.MULTIPLE_SELECTED_HOVER:e.MULTIPLE_SELECTED:o?e.SELECTED_HOVER:e.SELECTED:o?e.HOVER:i?e.FILLING:e.DEFAULT,t=(e,E)=>{let t=0,L=0;if(E){const s=e.toLocaleLowerCase(),o=E.toLocaleLowerCase();s.includes(o)&&(t=s.indexOf(o),L=t+E.length)}return{firstHighlightedIndex:t,lastHighlightedIndex:L}};export{t as getHighlightedIndexes,E as getState};
+import { STATES } from "../../../lib/types/states/states.js";
+var getState = (t, n, r, i, a, o) => t ? STATES.DISABLED : n ? STATES.FOCUS : r ? i ? a ? STATES.MULTIPLE_SELECTED_HOVER : STATES.MULTIPLE_SELECTED : a ? STATES.SELECTED_HOVER : STATES.SELECTED : a ? STATES.HOVER : o ? STATES.FILLING : STATES.DEFAULT;
+const getHighlightedIndexes = (e, t) => {
+	let n = 0, r = 0;
+	if (t) {
+		let i = e.toLocaleLowerCase(), a = t.toLocaleLowerCase();
+		i.includes(a) && (n = i.indexOf(a), r = n + t.length);
+	}
+	return {
+		firstHighlightedIndex: n,
+		lastHighlightedIndex: r
+	};
+};
+export { getHighlightedIndexes, getState };

package/dist/esm/components/pageControl/components/arrowControlStandAlone.js

@@ -1,2 +1,12 @@
-import{j as t}from"../../../_virtual/jsx-runtime.js";import{ElementOrIcon as s}from"../../../lib/components/elementOrIcon/elementOrIcon.js";const e=({cssArrowControlClasses:e,disabled:o=!1,...r})=>{const n={"data-state":o?"inactive":"active"};/* @__PURE__ */
-return t.jsx(s,{className:e?.icon,customAttributes:n,disabled:o,...r})};export{e as ArrowControlStandAlone};
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { jsx } from "react/jsx-runtime";
+const ArrowControlStandAlone = ({ cssArrowControlClasses: e, disabled: t = !1, ...n }) => {
+	let r = t ? "inactive" : "active";
+	return /* @__PURE__ */ jsx(ElementOrIcon, {
+		className: e?.icon,
+		customAttributes: { "data-state": r },
+		disabled: t,
+		...n
+	});
+};
+export { ArrowControlStandAlone };

package/dist/esm/components/pageControl/components/buttonControlStandAlone.js

@@ -1,2 +1,13 @@
-import{j as t}from"../../../_virtual/jsx-runtime.js";import{pickCustomAttributes as s}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const o=({cssPageControlClasses:o,disabled:i=!1,position:r,...e})=>{const u=s(e);/* @__PURE__ */
-return t.jsx("button",{className:o,disabled:i,type:"button",...e,...u})};export{o as ButtonControlStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { jsx } from "react/jsx-runtime";
+const ButtonControlStandAlone = ({ cssPageControlClasses: e, disabled: t = !1, position: n, ...r }) => {
+	let i = pickCustomAttributes(r);
+	return /* @__PURE__ */ jsx("button", {
+		className: e,
+		disabled: t,
+		type: "button",
+		...r,
+		...i
+	});
+};
+export { ButtonControlStandAlone };

package/dist/esm/components/pageControl/components/controls.js

@@ -1,2 +1,21 @@
-import{j as o}from"../../../_virtual/jsx-runtime.js";import{pickCustomAttributes as t}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{isElementOrIconProps as r}from"../helper/controlType.js";import{ArrowControlStandAlone as s}from"./arrowControlStandAlone.js";import{ButtonControlStandAlone as n}from"./buttonControlStandAlone.js";const l=({control:l,cssArrowControlClasses:e,cssPageControlClasses:i,position:c,...a})=>{const m=t(a),p="left"===c?e?.leftbuttoncontrol:e?.rightbuttoncontrol,C="left"===c?e?.leftarrowcontrolcontainer:e?.rightarrowcontrolcontainer;/* @__PURE__ */
-return o.jsxs(o.Fragment,{children:[l&&!r(l)&&/* @__PURE__ */o.jsx(n,{...l,cssPageControlClasses:p,position:c,...m}),r(l)&&/* @__PURE__ */o.jsx("div",{className:C,children:/* @__PURE__ */o.jsx(s,{cssArrowControlClasses:e,...l})})]})};export{l as Controls};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { isElementOrIconProps } from "../helper/controlType.js";
+import { ArrowControlStandAlone } from "./arrowControlStandAlone.js";
+import { ButtonControlStandAlone } from "./buttonControlStandAlone.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const Controls = ({ control: e, cssArrowControlClasses: t, cssPageControlClasses: n, position: r, ...i }) => {
+	let a = pickCustomAttributes(i), o = r === "left" ? t?.leftbuttoncontrol : t?.rightbuttoncontrol, s = r === "left" ? t?.leftarrowcontrolcontainer : t?.rightarrowcontrolcontainer;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [e && !isElementOrIconProps(e) && /* @__PURE__ */ jsx(ButtonControlStandAlone, {
+		...e,
+		cssPageControlClasses: o,
+		position: r,
+		...a
+	}), isElementOrIconProps(e) && /* @__PURE__ */ jsx("div", {
+		className: s,
+		children: /* @__PURE__ */ jsx(ArrowControlStandAlone, {
+			cssArrowControlClasses: t,
+			...e
+		})
+	})] });
+};
+export { Controls };

package/dist/esm/components/pageControl/helper/controlType.js

@@ -1 +1,2 @@
-const o=o=>void 0!==o?.icon;export{o as isElementOrIconProps};
+const isElementOrIconProps = (e) => e?.icon !== void 0;
+export { isElementOrIconProps };

package/dist/esm/components/pageControl/helper/positions.js

@@ -1 +1,8 @@
-const t=(t,i)=>Math.max(0,Math.min(t,i-1)),i=({currentPosition:t,direction:i,dots:o,isBullet:s,pages:e})=>{let n=0,r=n+o-1;return s&&"forth"!==i?e-o<=t?(r=e-1,n=r-(o-1)):(n=t,r=n+o-1):t-o<0?(n=0,r=n+o-1):(r=t,n=r-(o-1)),{firstVisiblePosition:n,lastVisiblePosition:r}};export{i as calcFirstLastVisiblePosition,t as getPositionWithIn};
+const getPositionWithIn = (e, t) => Math.max(0, Math.min(e, t - 1)), calcFirstLastVisiblePosition = ({ currentPosition: e, direction: t, dots: n, isBullet: r, pages: i }) => {
+	let a = 0, o = a + n - 1;
+	return !r || t === "forth" ? e - n < 0 ? (a = 0, o = a + n - 1) : (o = e, a = o - (n - 1)) : i - n <= e ? (o = i - 1, a = o - (n - 1)) : (a = e, o = a + n - 1), {
+		firstVisiblePosition: a,
+		lastVisiblePosition: o
+	};
+};
+export { calcFirstLastVisiblePosition, getPositionWithIn };

package/dist/esm/components/pageControl/pageControl.js

@@ -1,2 +1,38 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,useRef as t,useMemo as i}from"react";import{useClassName as r}from"../../lib/hooks/useClassName/useClassName.js";import{calcFirstLastVisiblePosition as a,getPositionWithIn as e}from"./helper/positions.js";import{PageControlStandAlone as n}from"./pageControlStandAlone.js";const l=o(({additionalArrowControlClasses:o,additionalPageControlClasses:l,arrowsControlVariant:m,currentPosition:C,isBullet:c=!1,maxDots:p=5,pages:u,variant:d,...P},f)=>{const j=r({additionalClassNames:o,component:"PAGE_CONTROL",variant:m}),b=r({additionalClassNames:l,component:"PAGE_CONTROL",variant:d}),g=t(0),N=i(()=>{let s="forth";return C<g.current&&(s="back"),g.current=C,s},[C]),A=u>p?p:u,V=e(C,u),{firstVisiblePosition:v,lastVisiblePosition:x}=a({currentPosition:V,direction:N,dots:A,isBullet:c,pages:u});/* @__PURE__ */
-return s.jsx(n,{ref:f,cssArrowControlClasses:j,cssPageControlClasses:b,currentPosition:V,dots:A,firstVisiblePosition:v,isBullet:c,lastVisiblePosition:x,pages:0,...P})});export{l as PageControl};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { calcFirstLastVisiblePosition, getPositionWithIn } from "./helper/positions.js";
+import { PageControlStandAlone } from "./pageControlStandAlone.js";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const PageControl = forwardRef(({ additionalArrowControlClasses: t, additionalPageControlClasses: n, arrowsControlVariant: r, currentPosition: i, isBullet: a = !1, maxDots: o = 5, pages: s, variant: c, ...l }, u) => {
+	let d = useClassName({
+		additionalClassNames: t,
+		component: "PAGE_CONTROL",
+		variant: r
+	}), f = useClassName({
+		additionalClassNames: n,
+		component: "PAGE_CONTROL",
+		variant: c
+	}), p = useRef(0), m = useMemo(() => {
+		let e = "forth";
+		return i < p.current && (e = "back"), p.current = i, e;
+	}, [i]), h = s > o ? o : s, g = getPositionWithIn(i, s), { firstVisiblePosition: _, lastVisiblePosition: v } = calcFirstLastVisiblePosition({
+		currentPosition: g,
+		direction: m,
+		dots: h,
+		isBullet: a,
+		pages: s
+	});
+	return /* @__PURE__ */ jsx(PageControlStandAlone, {
+		ref: u,
+		cssArrowControlClasses: d,
+		cssPageControlClasses: f,
+		currentPosition: g,
+		dots: h,
+		firstVisiblePosition: _,
+		isBullet: a,
+		lastVisiblePosition: v,
+		pages: 0,
+		...l
+	});
+});
+export { PageControl };

package/dist/esm/components/pageControl/pageControlStandAlone.js

@@ -1,6 +1,59 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as t}from"react";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{Controls as i}from"./components/controls.js";const r=t(({cssArrowControlClasses:t,cssPageControlClasses:r,currentPosition:e,dots:a,firstVisiblePosition:l,isBullet:n,lastVisiblePosition:c,leftControl:d,pages:m,rightControl:p,...C},g)=>{const u=C["data-testid"]||"page-control";/* @__PURE__ */
-return s.jsx("div",{ref:g,className:r?.page_control,"data-testid":u,children:a>0&&/* @__PURE__ */s.jsxs(s.Fragment,{children:[
-/* @__PURE__ */s.jsx(i,{control:d,cssArrowControlClasses:t,cssPageControlClasses:r,currentPosition:e,"data-testid":`${u}-left-control`,dots:a,firstVisiblePosition:l,lastVisiblePosition:c,pages:m,position:"left"}),
-/* @__PURE__ */s.jsxs("div",{className:r?.dotscontainer,children:[n&&l>0&&/* @__PURE__ */s.jsx("div",{...o({"data-state":"last"}),className:r?.pagedot}),[...Array(a)].map((t,i)=>{const a=i+l,n={"data-state":a===e?"current":"default"};/* @__PURE__ */
-return s.jsx("div",{...o(n),className:r?.pagedot},`Dot-middle--${a}`)}),n&&(c??0)<(m??0)-1&&/* @__PURE__ */s.jsx("div",{...o({"data-state":"last"}),className:r?.pagedot})]}),
-/* @__PURE__ */s.jsx(i,{control:p,cssArrowControlClasses:t,cssPageControlClasses:r,currentPosition:e,"data-testid":`${u}-right-control`,dots:a,firstVisiblePosition:l,lastVisiblePosition:c,pages:m,position:"right"})]})})});export{r as PageControlStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Controls } from "./components/controls.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const PageControlStandAlone = forwardRef(({ cssArrowControlClasses: t, cssPageControlClasses: i, currentPosition: a, dots: o, firstVisiblePosition: s, isBullet: c, lastVisiblePosition: l, leftControl: u, pages: d, rightControl: f, ...p }, m) => {
+	let h = p["data-testid"] || "page-control";
+	return /* @__PURE__ */ jsx("div", {
+		ref: m,
+		className: i?.page_control,
+		"data-testid": h,
+		children: o > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Controls, {
+				control: u,
+				cssArrowControlClasses: t,
+				cssPageControlClasses: i,
+				currentPosition: a,
+				"data-testid": `${h}-left-control`,
+				dots: o,
+				firstVisiblePosition: s,
+				lastVisiblePosition: l,
+				pages: d,
+				position: "left"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: i?.dotscontainer,
+				children: [
+					c && s > 0 && /* @__PURE__ */ jsx("div", {
+						...pickCustomAttributes({ "data-state": "last" }),
+						className: i?.pagedot
+					}),
+					[...Array(o)].map((e, t) => {
+						let n = t + s, r = n === a ? "current" : "default";
+						return /* @__PURE__ */ jsx("div", {
+							...pickCustomAttributes({ "data-state": r }),
+							className: i?.pagedot
+						}, `Dot-middle--${n}`);
+					}),
+					c && (l ?? 0) < (d ?? 0) - 1 && /* @__PURE__ */ jsx("div", {
+						...pickCustomAttributes({ "data-state": "last" }),
+						className: i?.pagedot
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Controls, {
+				control: f,
+				cssArrowControlClasses: t,
+				cssPageControlClasses: i,
+				currentPosition: a,
+				"data-testid": `${h}-right-control`,
+				dots: o,
+				firstVisiblePosition: s,
+				lastVisiblePosition: l,
+				pages: d,
+				position: "right"
+			})
+		] })
+	});
+});
+export { PageControlStandAlone };

package/dist/esm/components/pagination/fragments/paginationButtonControl.js

@@ -1,2 +1,19 @@
-import{j as a}from"../../../_virtual/jsx-runtime.js";import{ElementOrIcon as t}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{classNames as o}from"../../../lib/utils/classNames/classNames.js";const i=({cssClasses:i,disabled:s,paginationButtonControl:r,position:n="left"})=>{const e={"data-state":s?"disabled":""};/* @__PURE__ */
-return a.jsx(t,{altText:r?.ariaLabel,"aria-controls":r?.ariaControls,"aria-label":r?.ariaLabel,className:o({[`${i?.paginationleftarrowicon}`]:"left"===n},{[`${i?.paginationrightarrowicon}`]:"right"===n}),customAttributes:e,disabled:s,icon:r?.icon,onClick:a=>{s||r?.onClick?.(a)}})};export{i as PaginationButtonControl};
+import { classNames } from "../../../lib/utils/classNames/classNames.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { jsx } from "react/jsx-runtime";
+const PaginationButtonControl = ({ cssClasses: t, disabled: n, paginationButtonControl: r, position: i = "left" }) => {
+	let a = (e) => {
+		n || r?.onClick?.(e);
+	}, o = { "data-state": n ? "disabled" : "" };
+	return /* @__PURE__ */ jsx(ElementOrIcon, {
+		altText: r?.ariaLabel,
+		"aria-controls": r?.ariaControls,
+		"aria-label": r?.ariaLabel,
+		className: classNames({ [`${t?.paginationleftarrowicon}`]: i === "left" }, { [`${t?.paginationrightarrowicon}`]: i === "right" }),
+		customAttributes: o,
+		disabled: n,
+		icon: r?.icon,
+		onClick: a
+	});
+};
+export { PaginationButtonControl };

package/dist/esm/components/pagination/helpers/adjustMaxCountersNumber.js

@@ -1 +1,6 @@
-const e=({maxStepsNumber:e,propMaxCountersNumber:r})=>{let t;return e<=3?(t=e,t):(t=r||5,e>3&&t<=2&&(t=3),t=Math.min(e,t),t)};export{e as adjustMaxCountersNumber};
+var DEFAULT_MAX_COUNTERS_NUMBER = 5;
+const adjustMaxCountersNumber = ({ maxStepsNumber: e, propMaxCountersNumber: t }) => {
+	let n;
+	return e <= 3 ? (n = e, n) : (n = t || DEFAULT_MAX_COUNTERS_NUMBER, e > 3 && n <= 2 && (n = 3), n = Math.min(e, n), n);
+};
+export { adjustMaxCountersNumber };

package/dist/esm/components/pagination/helpers/getMaxCountersNumber.js

@@ -1 +1,20 @@
-const t=(t,a)=>[...Array(t)].map((t,e)=>a+1+e),a=(a,e,r)=>{let o=r,s=[],l=[],c=[],n=[],f=a+1;f>=r&&e!==r&&(s=[1,"..."],o--),(e+1-f>=r||f<r&&e-r>=1)&&e!==r&&(l=["...",e],o--);const h=f<=o,i=Math.abs(e-f)<o;if(h)f=1,n=t(o-1,f);else if(i)f=e-o+1,n=t(o-1,f);else{const a=(o-1)/2,e=Math.floor(a),r=Math.ceil(a);c=((t,a)=>[...Array(t)].map((e,r)=>a-(t-r)))(e,f),n=t(r,f)}return[...s,...c,f,...n,...l]};export{a as buildstepsNumber};
+var buildBeforeCounters = (e, t) => [...Array(e)].map((n, r) => t - (e - r)), buildAfterCounters = (e, t) => [...Array(e)].map((e, n) => t + 1 + n);
+const buildstepsNumber = (n, r, i) => {
+	let a = i, o = [], s = [], c = [], l = [], u = n + 1;
+	u >= i && r !== i && (o = [1, "..."], a--), (r + 1 - u >= i || u < i && r - i >= 1) && r !== i && (s = ["...", r], a--);
+	let d = u <= a, f = Math.abs(r - u) < a;
+	if (d) u = 1, l = buildAfterCounters(a - 1, u);
+	else if (f) u = r - a + 1, l = buildAfterCounters(a - 1, u);
+	else {
+		let n = (a - 1) / 2, r = Math.floor(n), i = Math.ceil(n);
+		c = buildBeforeCounters(r, u), l = buildAfterCounters(i, u);
+	}
+	return [
+		...o,
+		...c,
+		u,
+		...l,
+		...s
+	];
+};
+export { buildstepsNumber };

package/dist/esm/components/pagination/pagination.js

@@ -1,2 +1,26 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{useClassName as r}from"../../lib/hooks/useClassName/useClassName.js";import{adjustMaxCountersNumber as t}from"./helpers/adjustMaxCountersNumber.js";import{buildstepsNumber as a}from"./helpers/getMaxCountersNumber.js";import{PaginationStandAlone as m}from"./paginationStandAlone.js";const o=e(({additionalClasses:e,currentStep:o,maxCountersNumber:i,maxStepsNumber:n,variant:p,...u},l)=>{const N=r({additionalClassNames:e,component:"PAGINATION",variant:p}),x=Math.max(0,Math.min(o,n-1)),b=t({maxStepsNumber:n,propMaxCountersNumber:i}),d=a(x,n,b),f=d.indexOf(x+1),j=0===x,C=x===n-1;/* @__PURE__ */
-return s.jsx(m,{ref:l,cssClasses:N,leftDisabled:j,rightDisabled:C,stepActive:f,stepsNumber:d,...u})});export{o as Pagination};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { adjustMaxCountersNumber } from "./helpers/adjustMaxCountersNumber.js";
+import { buildstepsNumber } from "./helpers/getMaxCountersNumber.js";
+import { PaginationStandAlone } from "./paginationStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Pagination = forwardRef(({ additionalClasses: e, currentStep: t, maxCountersNumber: n, maxStepsNumber: r, variant: i, ...a }, o) => {
+	let s = useClassName({
+		additionalClassNames: e,
+		component: "PAGINATION",
+		variant: i
+	}), c = Math.max(0, Math.min(t, r - 1)), l = buildstepsNumber(c, r, adjustMaxCountersNumber({
+		maxStepsNumber: r,
+		propMaxCountersNumber: n
+	})), u = l.indexOf(c + 1);
+	return /* @__PURE__ */ jsx(PaginationStandAlone, {
+		ref: o,
+		cssClasses: s,
+		leftDisabled: c === 0,
+		rightDisabled: c === r - 1,
+		stepActive: u,
+		stepsNumber: l,
+		...a
+	});
+});
+export { Pagination };

package/dist/esm/components/pagination/paginationStandAlone.js

@@ -1,6 +1,52 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{Text as o}from"../text/text.js";import{STATES as i}from"../../lib/types/states/states.js";import{pickCustomAttributes as n}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as e}from"../../lib/components/customComponent/customComponent.js";import{PaginationButtonControl as a}from"./fragments/paginationButtonControl.js";const r=s(({cssClasses:s,leftDisabled:r,onStepClick:p,paginationLeftButtonControl:m,paginationRightButtonControl:l,rightDisabled:c,stepActive:d,stepsNumber:u,...C},g)=>{const b=C["data-testid"]||"pagination";/* @__PURE__ */
-return t.jsxs("div",{ref:g,className:s?.pagination,"data-testid":b,children:[
-/* @__PURE__ */t.jsx(a,{cssClasses:s,disabled:r,paginationButtonControl:m}),
-/* @__PURE__ */t.jsx("div",{className:s?.pagescontainer,"data-testid":`${b}-steps-content`,children:u.map((a,r)=>{const m="number"==typeof a,l={"data-clickable":m,"data-state":d===r?i.SELECTED:i.DEFAULT},c=n(C);/* @__PURE__ */
-return t.jsx(e,{className:s?.pagecontainer,component:m?"button":void 0,type:m?"button":void 0,onClick:m?p?.(a-1):void 0,...c,children:/* @__PURE__ */t.jsx(o,{additionalClasses:{text:s?.page},component:"span",customAttributes:l,children:a})},`PaginationContent-${a}-${r.toString()}`)})}),
-/* @__PURE__ */t.jsx(a,{cssClasses:s,disabled:c,paginationButtonControl:l,position:"right"})]})});export{r as PaginationStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { Text } from "../text/text2.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { PaginationButtonControl } from "./fragments/paginationButtonControl.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const PaginationStandAlone = forwardRef(({ cssClasses: t, leftDisabled: r, onStepClick: i, paginationLeftButtonControl: a, paginationRightButtonControl: o, rightDisabled: s, stepActive: c, stepsNumber: l, ...u }, d) => {
+	let f = u["data-testid"] || "pagination";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: d,
+		className: t?.pagination,
+		"data-testid": f,
+		children: [
+			/* @__PURE__ */ jsx(PaginationButtonControl, {
+				cssClasses: t,
+				disabled: r,
+				paginationButtonControl: a
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: t?.pagescontainer,
+				"data-testid": `${f}-steps-content`,
+				children: l.map((e, n) => {
+					let r = c === n ? STATES.SELECTED : STATES.DEFAULT, a = typeof e == "number", o = {
+						"data-clickable": a,
+						"data-state": r
+					}, s = pickCustomAttributes(u);
+					return /* @__PURE__ */ jsx(CustomComponent, {
+						className: t?.pagecontainer,
+						component: a ? "button" : void 0,
+						type: a ? "button" : void 0,
+						onClick: a ? i?.(e - 1) : void 0,
+						...s,
+						children: /* @__PURE__ */ jsx(Text, {
+							additionalClasses: { text: t?.page },
+							component: "span",
+							customAttributes: o,
+							children: e
+						})
+					}, `PaginationContent-${e}-${n.toString()}`);
+				})
+			}),
+			/* @__PURE__ */ jsx(PaginationButtonControl, {
+				cssClasses: t,
+				disabled: s,
+				paginationButtonControl: o,
+				position: "right"
+			})
+		]
+	});
+});
+export { PaginationStandAlone };

package/dist/esm/components/popover/animations/spring.animations.js

@@ -0,0 +1,52 @@
+import { getPositioningTransforms } from "../utils/animation.utils.js";
+const generateSpringKeyframes = (t, n = 300, r = 20, i = 1, a = 20, o = 20, s) => {
+	let c = Math.sqrt(n / i), l = r / (2 * Math.sqrt(n * i)), u = (e) => {
+		if (l < 1) {
+			let t = c * Math.sqrt(1 - l * l), n = a, r = l * c * a / t;
+			return Math.exp(-l * c * e) * (n * Math.cos(t * e) + r * Math.sin(t * e));
+		}
+		if (l === 1) return a * Math.exp(-c * e) * (1 + c * e);
+		let t = Math.sqrt(l * l - 1), n = -c * (l + t), r = -c * (l - t), i = a * r / (r - n), o = -a * n / (r - n);
+		return i * Math.exp(n * e) + o * Math.exp(r * e);
+	}, d = [];
+	for (let e = 0; e <= o; e++) {
+		let t = e / o * 1, n = e / o * 100, r = u(t);
+		d.push({
+			displacement: r,
+			time: n
+		});
+	}
+	let f = (e) => {
+		if (e === 0) return t === "up" || t === "down" ? "translateY(0)" : "translateX(0)";
+		switch (t) {
+			case "up": return `translateY(${-e}px)`;
+			case "down": return `translateY(${e}px)`;
+			case "left": return `translateX(${-e}px)`;
+			case "right": return `translateX(${e}px)`;
+			case "fade": {
+				let t = 1 + e / a * .1;
+				return `scale(${Math.max(.9, Math.min(1.1, t))})`;
+			}
+			default: return "translateY(0)";
+		}
+	}, p = (t) => {
+		let n = s ? getPositioningTransforms(s) : "", r = f(t);
+		return n ? `${n} ${r}` : r;
+	};
+	return d.map((e) => {
+		let n = p(e.displacement), r = t === "fade" ? Math.max(0, Math.min(1, 1 - Math.abs(e.displacement) / a * .3)) : 1;
+		return `${e.time.toFixed(1)}% {
+    opacity: ${r.toFixed(3)};
+    transform: ${n};
+  }`;
+	}).join("\n  ");
+}, generateSpringKeyframesRule = (e, n, r = 300, i = 20, a = 1, o = 20, s = 20, c) => `@keyframes ${e} {
+  ${generateSpringKeyframes(n, r, i, a, o, s, c)}
+}`, createSpringAnimation = (e, n = {}) => {
+	let { damping: r = 20, duration: i = "800ms", initialDisplacement: a = 20, keyframeCount: o = 20, mass: s = 1, placement: c, stiffness: l = 300 } = n;
+	return {
+		duration: i,
+		keyframesCSS: generateSpringKeyframes(e, l, r, s, a, o, c)
+	};
+};
+export { createSpringAnimation, generateSpringKeyframes, generateSpringKeyframesRule };

package/dist/esm/components/popover/hooks/positioning/arrowPositionStyles.js

@@ -1 +1,18 @@
-import{ArrowPositions as t}from"./types.js";const e=({arrowElement:e,arrowX:r,arrowY:o,offset:l="0px",placement:s})=>{if(!e)return;e.setAttribute("data-kbt-placement",s),e.style.top="",e.style.right="",e.style.bottom="",e.style.left="";const a=s.split("-")[0],n=t[a];e.style[n]=l;if("top"===a||"bottom"===a){null!=r?(e.style.left=`${r}px`,e.style.transform="rotate(45deg)"):(e.style.left="50%",e.style.transform="translateX(-50%) rotate(45deg)")}else{null!=o?(e.style.top=`${o}px`,e.style.transform="rotate(45deg)"):(e.style.top="50%",e.style.transform="translateY(-50%) rotate(45deg)")}},r=(t,r,o,l,s,a)=>{if(!t||!o.arrow||!r)return;const{x:n,y:f}=o.arrow;let p=`-${Math.floor(a/2)}px`;s&&void 0!==s[0]&&(p=-Math.abs(s[0]/4)+"px"),e({arrowElement:r,arrowX:n,arrowY:f,offset:p,placement:l})};export{r as positionArrow,e as updateArrowStyles};
+import { ArrowPositions } from "./types.js";
+const updateArrowStyles = ({ arrowElement: t, arrowX: n, arrowY: r, offset: i = "0px", placement: a }) => {
+	if (!t) return;
+	t.setAttribute("data-kbt-placement", a), t.style.top = "", t.style.right = "", t.style.bottom = "", t.style.left = "";
+	let o = a.split("-")[0], s = ArrowPositions[o];
+	t.style[s] = i, o === "top" || o === "bottom" ? n == null ? (t.style.left = "50%", t.style.transform = "translateX(-50%) rotate(45deg)") : (t.style.left = `${n}px`, t.style.transform = "rotate(45deg)") : r == null ? (t.style.top = "50%", t.style.transform = "translateY(-50%) rotate(45deg)") : (t.style.top = `${r}px`, t.style.transform = "rotate(45deg)");
+}, positionArrow = (e, n, r, i, a, o) => {
+	if (!e || !r.arrow || !n) return;
+	let { x: s, y: c } = r.arrow, l = `-${Math.floor(o / 2)}px`;
+	a && a[0] !== void 0 && (l = `${-Math.abs(a[0] / 4)}px`), updateArrowStyles({
+		arrowElement: n,
+		arrowX: s,
+		arrowY: c,
+		offset: l,
+		placement: i
+	});
+};
+export { positionArrow };

package/dist/esm/components/popover/hooks/positioning/middlewareUtils.js

@@ -1 +1,38 @@
-import{shift as e,offset as t,flip as i,hide as s,arrow as n}from"@floating-ui/dom";import{getPlacementDirection as a}from"../../utils/placement.utils.js";const r=({arrowElement:r,customMiddlewares:d,edgePadding:o,hideWhenDetached:h,isBodyAnchor:m,mainAxisOffset:c,offsetDistance:p,placement:l})=>{let u=[];return u=d?.length?[...d]:m?((i,s)=>{const n=a(i),r=[];return"center"===n?r.push(e({crossAxis:!0,mainAxis:!0,padding:s})):n.startsWith("right")||n.startsWith("left")?r.push(t({alignmentAxis:0,mainAxis:0})):(n.startsWith("bottom")||n.startsWith("top"))&&r.push(t({mainAxis:0})),r})(l,o):((s,n,a)=>{const r=[];return r.push(t({crossAxis:n?.[1]||0,mainAxis:s})),r.push(i({fallbackAxisSideDirection:"start",padding:a})),r.push(e({padding:a})),r})(c,p,o),(({arrowElement:e,edgePadding:t,hideWhenDetached:i,isBodyAnchor:a,middlewareStack:r})=>{!a&&i&&r.push(s()),e&&r.push(n({element:e,padding:t}))})({arrowElement:r,edgePadding:o,hideWhenDetached:h,isBodyAnchor:m,middlewareStack:u}),u},d=({arrowSize:e,hasArrow:t,offsetDistance:i})=>"number"==typeof i?.[0]?i[0]:t?e:0;export{d as calculateMainAxisOffset,r as getMiddlewareStack};
+import { getPlacementDirection } from "../../utils/placement.utils.js";
+import { arrow, flip, hide, offset, shift } from "@floating-ui/dom";
+var createBodyAnchorMiddlewares = (t, n) => {
+	let r = getPlacementDirection(t), o = [];
+	return r === "center" ? o.push(shift({
+		crossAxis: !0,
+		mainAxis: !0,
+		padding: n
+	})) : r.startsWith("right") || r.startsWith("left") ? o.push(offset({
+		alignmentAxis: 0,
+		mainAxis: 0
+	})) : (r.startsWith("bottom") || r.startsWith("top")) && o.push(offset({ mainAxis: 0 })), o;
+}, createElementAnchorMiddlewares = (e, t, r) => {
+	let o = [];
+	return o.push(offset({
+		crossAxis: t?.[1] || 0,
+		mainAxis: e
+	})), o.push(flip({
+		fallbackAxisSideDirection: "start",
+		padding: r
+	})), o.push(shift({ padding: r })), o;
+}, addConditionalMiddlewares = ({ arrowElement: e, edgePadding: n, hideWhenDetached: i, isBodyAnchor: a, middlewareStack: o }) => {
+	!a && i && o.push(hide()), e && o.push(arrow({
+		element: e,
+		padding: n
+	}));
+};
+const getMiddlewareStack = ({ arrowElement: e, customMiddlewares: t, edgePadding: n, hideWhenDetached: r, isBodyAnchor: i, mainAxisOffset: a, offsetDistance: s, placement: c }) => {
+	let l = [];
+	return l = t?.length ? [...t] : i ? createBodyAnchorMiddlewares(c, n) : createElementAnchorMiddlewares(a, s, n), addConditionalMiddlewares({
+		arrowElement: e,
+		edgePadding: n,
+		hideWhenDetached: r,
+		isBodyAnchor: i,
+		middlewareStack: l
+	}), l;
+}, calculateMainAxisOffset = ({ arrowSize: e, hasArrow: t, offsetDistance: n }) => typeof n?.[0] == "number" ? n[0] : t ? e : 0;
+export { calculateMainAxisOffset, getMiddlewareStack };

package/dist/esm/components/popover/hooks/positioning/positionCalculation.js

@@ -1 +1,17 @@
-const t=(t,e,a)=>{if(t){const t="fixed";if(!a){return{actualPlacement:"center",autoStrategy:t}}if("center"===a){return{actualPlacement:a,autoStrategy:t}}return{actualPlacement:a,autoStrategy:t}}return{actualPlacement:a||"top",autoStrategy:e}};export{t as determinePositioningConfig};
+const determinePositioningConfig = (e, t, n) => {
+	if (e) {
+		let e = "fixed";
+		return n ? {
+			actualPlacement: n,
+			autoStrategy: e
+		} : {
+			actualPlacement: "center",
+			autoStrategy: e
+		};
+	}
+	return {
+		actualPlacement: n || "top",
+		autoStrategy: t
+	};
+};
+export { determinePositioningConfig };