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

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

@@ -1,9 +1,107 @@
-import{jsxs as t,jsx as e,Fragment as s}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Text as i}from"../text/text.js";import{ElementOrIcon as n}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{SPACE as l,ENTER as r}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{STATES as a}from"../../lib/types/states/states.js";import{pickCustomAttributes as c}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as m,processTextProp as d}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as b}from"../../lib/components/customComponent/customComponent.js";import{isKeyPressed as u}from"../../lib/utils/keyboard/keyboard.js";import{OptionLabelSlice as p}from"./components.ts/optionLabelSlice.js";import{getState as h,getHighlightedIndexes as g}from"./utils/option.utils.js";const f=o(({checkedIcon:o,component:f,componentLink:C,cssClasses:E,disabled:k,extraContent:y,focus:L,hover:j,icon:A,label:x,labelCharsHighlighted:I,multiSelect:$,onBlur:v,onClick:D,onFocus:M,onMouseEnter:N,onMouseLeave:S,role:T,selected:H,sublabel:B,tabIndex:K,url:O,...P},_)=>{const w=h(k,L,H,$,j,!!I&&I?.length>0),F={"data-state":w},U=w===a.DISABLED,R=c({...P,customAttributes:F}),V=c(F),q=R["data-testid"]||"option",z=[a.MULTIPLE_SELECTED,a.MULTIPLE_SELECTED_HOVER,a.SELECTED].includes(w);let G,J,Q;if("string"==typeof x){const{firstHighlightedIndex:t,lastHighlightedIndex:e}=g(x,I);G=x.substring(0,t),J=x.substring(t,e),Q=x.substring(e)}/* @__PURE__ */
-return t(b,{ref:_,"aria-disabled":U,className:E?.option,...R,component:O?C:f??"div","data-testid":q,role:T,tabIndex:K,url:O,onBlur:v,onClick:t=>{U||D?.(t)},onFocus:M,onKeyDown:t=>{!U&&u(t.key,r.key,l.key)&&D?.(t)},onMouseEnter:N,onMouseLeave:S,...V,children:[
-/* @__PURE__ */t("div",{className:E?.firstrowcontainer,children:[
-/* @__PURE__ */t("div",{className:E?.labeliconcontainer,...V,children:[
-/* @__PURE__ */e(n,{className:E?.icon,customAttributes:F,...m(A)}),!!d(B).children&&/* @__PURE__ */e("div",{className:E?.sublabelcontainer,...V,children:/* @__PURE__ */e(i,{additionalClasses:{text:E?.sublabel},component:"span",customAttributes:F,...d(B)})}),
-/* @__PURE__ */e("p",{children:"string"==typeof x?/* @__PURE__ */t(s,{children:[" ",
-/* @__PURE__ */e(p,{component:"span",cssClasses:E?.label,customAttributes:F,"data-testid":`${q}-first-no-hightlighted-label`,children:G}),
-/* @__PURE__ */e(p,{component:"span",cssClasses:`${E?.label} ${E?.labelhighlighted}`,customAttributes:F,"data-testid":`${q}-highlighted-label`,children:J}),
-/* @__PURE__ */e(p,{component:"span",cssClasses:`${E?.label} ${E?.labelhighlighted}`,customAttributes:F,"data-testid":`${q}-last-no-hightlighted-label`,children:Q})]}):/* @__PURE__ */e(p,{component:"span",cssClasses:E?.label,customAttributes:F,"data-testid":`${q}-label`,children:x})})]}),z&&/* @__PURE__ */e(n,{className:E?.checkedicon,customAttributes:F,...m(o)})]}),!!y&&y]})});export{f 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{jsx as t}from"react/jsx-runtime";import{ElementOrIcon as e}from"../../../lib/components/elementOrIcon/elementOrIcon.js";const s=({cssArrowControlClasses:s,disabled:o=!1,...r})=>{const n={"data-state":o?"inactive":"active"};/* @__PURE__ */
-return t(e,{className:s?.icon,customAttributes:n,disabled:o,...r})};export{s 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{jsx as t}from"react/jsx-runtime";import{pickCustomAttributes as s}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const o=({cssPageControlClasses:o,disabled:i=!1,position:e,...r})=>{const u=s(r);/* @__PURE__ */
-return t("button",{className:o,disabled:i,type:"button",...r,...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{jsxs as o,Fragment as t,jsx as r}from"react/jsx-runtime";import{pickCustomAttributes as s}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{isElementOrIconProps as n}from"../helper/controlType.js";import{ArrowControlStandAlone as l}from"./arrowControlStandAlone.js";import{ButtonControlStandAlone as e}from"./buttonControlStandAlone.js";const i=({control:i,cssArrowControlClasses:c,cssPageControlClasses:a,position:m,...p})=>{const C=s(p),u="left"===m?c?.leftbuttoncontrol:c?.rightbuttoncontrol,f="left"===m?c?.leftarrowcontrolcontainer:c?.rightarrowcontrolcontainer;/* @__PURE__ */
-return o(t,{children:[i&&!n(i)&&/* @__PURE__ */r(e,{...i,cssPageControlClasses:u,position:m,...C}),n(i)&&/* @__PURE__ */r("div",{className:f,children:/* @__PURE__ */r(l,{cssArrowControlClasses:c,...i})})]})};export{i 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{jsx as s}from"react/jsx-runtime";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 b=r({additionalClassNames:o,component:"PAGE_CONTROL",variant:m}),g=r({additionalClassNames:l,component:"PAGE_CONTROL",variant:d}),N=t(0),A=i(()=>{let s="forth";return C<N.current&&(s="back"),N.current=C,s},[C]),V=u>p?p:u,j=e(C,u),{firstVisiblePosition:O,lastVisiblePosition:h}=a({currentPosition:j,direction:A,dots:V,isBullet:c,pages:u});/* @__PURE__ */
-return s(n,{ref:f,cssArrowControlClasses:b,cssPageControlClasses:g,currentPosition:j,dots:V,firstVisiblePosition:O,isBullet:c,lastVisiblePosition:h,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{jsx as t,jsxs as s,Fragment as o}from"react/jsx-runtime";import{forwardRef as i}from"react";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{Controls as e}from"./components/controls.js";const a=i(({cssArrowControlClasses:i,cssPageControlClasses:a,currentPosition:l,dots:n,firstVisiblePosition:c,isBullet:d,lastVisiblePosition:m,leftControl:p,pages:C,rightControl:g,...u},f)=>{const P=u["data-testid"]||"page-control";/* @__PURE__ */
-return t("div",{ref:f,className:a?.page_control,"data-testid":P,children:n>0&&/* @__PURE__ */s(o,{children:[
-/* @__PURE__ */t(e,{control:p,cssArrowControlClasses:i,cssPageControlClasses:a,currentPosition:l,"data-testid":`${P}-left-control`,dots:n,firstVisiblePosition:c,lastVisiblePosition:m,pages:C,position:"left"}),
-/* @__PURE__ */s("div",{className:a?.dotscontainer,children:[d&&c>0&&/* @__PURE__ */t("div",{...r({"data-state":"last"}),className:a?.pagedot}),[...Array(n)].map((s,o)=>{const i=o+c;/* @__PURE__ */
-return t("div",{...r({"data-state":i===l?"current":"default"}),className:a?.pagedot},`Dot-middle--${i}`)}),d&&(m??0)<(C??0)-1&&/* @__PURE__ */t("div",{...r({"data-state":"last"}),className:a?.pagedot})]}),
-/* @__PURE__ */t(e,{control:g,cssArrowControlClasses:i,cssPageControlClasses:a,currentPosition:l,"data-testid":`${P}-right-control`,dots:n,firstVisiblePosition:c,lastVisiblePosition:m,pages:C,position:"right"})]})})});export{a 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{jsx as a}from"react/jsx-runtime";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:e="left"})=>{const n={"data-state":s?"disabled":""};/* @__PURE__ */
-return a(t,{altText:r?.ariaLabel,"aria-controls":r?.ariaControls,"aria-label":r?.ariaLabel,className:o({[`${i?.paginationleftarrowicon}`]:"left"===e},{[`${i?.paginationrightarrowicon}`]:"right"===e}),customAttributes:n,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{jsx as e}from"react/jsx-runtime";import{forwardRef as s}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=s(({additionalClasses:s,currentStep:o,maxCountersNumber:i,maxStepsNumber:n,variant:p,...u},l)=>{const N=r({additionalClassNames:s,component:"PAGINATION",variant:p}),b=Math.max(0,Math.min(o,n-1)),x=t({maxStepsNumber:n,propMaxCountersNumber:i}),d=a(b,n,x),f=d.indexOf(b+1);/* @__PURE__ */
-return e(m,{ref:l,cssClasses:N,leftDisabled:0===b,rightDisabled:b===n-1,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{jsxs as t,jsx as o}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Text as n}from"../text/text.js";import{STATES as i}from"../../lib/types/states/states.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{PaginationButtonControl as r}from"./fragments/paginationButtonControl.js";const p=s(({cssClasses:s,leftDisabled:p,onStepClick:m,paginationLeftButtonControl:c,paginationRightButtonControl:l,rightDisabled:d,stepActive:u,stepsNumber:C,...g},b)=>{const f=g["data-testid"]||"pagination";/* @__PURE__ */
-return t("div",{ref:b,className:s?.pagination,"data-testid":f,children:[
-/* @__PURE__ */o(r,{cssClasses:s,disabled:p,paginationButtonControl:c}),
-/* @__PURE__ */o("div",{className:s?.pagescontainer,"data-testid":`${f}-steps-content`,children:C.map((t,r)=>{const p="number"==typeof t,c={"data-clickable":p,"data-state":u===r?i.SELECTED:i.DEFAULT},l=e(g);/* @__PURE__ */
-return o(a,{className:s?.pagecontainer,component:p?"button":void 0,type:p?"button":void 0,onClick:p?m?.(t-1):void 0,...l,children:/* @__PURE__ */o(n,{additionalClasses:{text:s?.page},component:"span",customAttributes:c,children:t})},`PaginationContent-${t}-${r.toString()}`)})}),
-/* @__PURE__ */o(r,{cssClasses:s,disabled:d,paginationButtonControl:l,position:"right"})]})});export{p 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

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