@kubit-ui-web/react-components 1.17.2 → 2.0.0-beta.1

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../_virtual/jsx-runtime.js"),r=require("../../renderIf/renderIf.js"),o=require("../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),e=require("../helper/controlType.js"),s=require("./arrowControlStandAlone.js"),n=require("./buttonControlStandAlone.js");exports.Controls=({control:i,cssArrowControlClasses:l,cssPageControlClasses:u,position:c,...x})=>{const a=o.pickCustomAttributes(x),j="left"===c?l?.leftbuttoncontrol:l?.rightbuttoncontrol,p="left"===c?l?.leftarrowcontrolcontainer:l?.rightarrowcontrolcontainer;return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(r.RenderIf,{condition:i&&!e.isElementOrIconProps(i),children:t.jsxRuntimeExports.jsx(n.ButtonControlStandAlone,{...i,cssPageControlClasses:j,position:c,...a})}),t.jsxRuntimeExports.jsx(r.RenderIf,{condition:e.isElementOrIconProps(i),children:t.jsxRuntimeExports.jsx("div",{className:p,children:t.jsxRuntimeExports.jsx(s.ArrowControlStandAlone,{cssArrowControlClasses:l,...i})})})]})};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.isElementOrIconProps=e=>void 0!==e?.icon;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.calcFirstLastVisiblePosition=({currentPosition:t,direction:i,dots:e,isBullet:o,pages:s})=>{let r=0,n=r+e-1;return o&&"forth"!==i?s-e<=t?(n=s-1,r=n-(e-1)):(r=t,n=r+e-1):t-e<0?(r=0,n=r+e-1):(n=t,r=n-(e-1)),{firstVisiblePosition:r,lastVisiblePosition:n}},exports.getPositionWithIn=(t,i)=>Math.max(0,Math.min(t,i-1));

package/dist/cjs/components/pageControl/index.js

@@ -0,0 +1,2 @@
+const { PageControl } = require('./pageControl.js');
+module.exports = { ...module.exports, PageControl };

package/dist/cjs/components/pageControl/pageControl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../_virtual/jsx-runtime.js"),e=require("react"),t=require("../../lib/hooks/useClassName/useClassName.js"),o=require("./helper/positions.js"),i=require("./pageControlStandAlone.js"),r=e.forwardRef(({additionalArrowControlClasses:r,additionalPageControlClasses:a,arrowsControlVariant:n,currentPosition:l,isBullet:u=!1,maxDots:C=5,pages:c,variant:d,...P},m)=>{const p=t.useClassName({additionalClassNames:r,component:"PAGE_CONTROL",variant:n}),g=t.useClassName({additionalClassNames:a,component:"PAGE_CONTROL",variant:d}),b=e.useRef(0),f=e.useMemo(()=>{let s="forth";return l<b.current&&(s="back"),b.current=l,s},[l]),j=c>C?C:c,N=o.getPositionWithIn(l,c),{firstVisiblePosition:x,lastVisiblePosition:A}=o.calcFirstLastVisiblePosition({currentPosition:N,direction:f,dots:j,isBullet:u,pages:c});return s.jsxRuntimeExports.jsx(i.PageControlStandAlone,{ref:m,cssArrowControlClasses:p,cssPageControlClasses:g,currentPosition:N,dots:j,firstVisiblePosition:x,isBullet:u,lastVisiblePosition:A,pages:0,...P})});exports.PageControl=r;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.js"),s=require("react"),e=require("../renderIf/renderIf.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),i=require("./components/controls.js"),r=s.forwardRef(({cssArrowControlClasses:s,cssPageControlClasses:r,currentPosition:n,dots:a,firstVisiblePosition:l,isBullet:c,lastVisiblePosition:d,leftControl:u,pages:x,rightControl:p,...j},m)=>{const C=j["data-testid"]||"page-control";return t.jsxRuntimeExports.jsx("div",{ref:m,className:r?.page_control,"data-testid":C,children:t.jsxRuntimeExports.jsx(e.RenderIf,{condition:a>0,children:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(i.Controls,{control:u,cssArrowControlClasses:s,cssPageControlClasses:r,currentPosition:n,"data-testid":`${C}-left-control`,dots:a,firstVisiblePosition:l,lastVisiblePosition:d,pages:x,position:"left"}),t.jsxRuntimeExports.jsxs("div",{className:r?.dotscontainer,children:[t.jsxRuntimeExports.jsx(e.RenderIf,{condition:c&&l>0,children:t.jsxRuntimeExports.jsx("div",{...o.pickCustomAttributes({"data-state":"last"}),className:r?.pagedot})}),[...Array(a)].map((s,e)=>{const i=e+l,a={"data-state":i===n?"current":"default"};return t.jsxRuntimeExports.jsx("div",{...o.pickCustomAttributes(a),className:r?.pagedot},`Dot-middle--${i}`)}),t.jsxRuntimeExports.jsx(e.RenderIf,{condition:c&&(d??0)<(x??0)-1,children:t.jsxRuntimeExports.jsx("div",{...o.pickCustomAttributes({"data-state":"last"}),className:r?.pagedot})})]}),t.jsxRuntimeExports.jsx(i.Controls,{control:p,cssArrowControlClasses:s,cssPageControlClasses:r,currentPosition:n,"data-testid":`${C}-right-control`,dots:a,firstVisiblePosition:l,lastVisiblePosition:d,pages:x,position:"right"})]})})})});exports.PageControlStandAlone=r;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../_virtual/jsx-runtime.js"),e=require("../../../lib/utils/classNames/classNames.js"),a=require("../../elementOrIcon/elementOrIcon.js");exports.PaginationButtonControl=({cssClasses:s,disabled:i,paginationButtonControl:o,position:r="left"})=>{const n={"data-state":i?"disabled":""};return t.jsxRuntimeExports.jsx(a.ElementOrIcon,{altText:o?.ariaLabel,"aria-controls":o?.ariaControls,"aria-label":o?.ariaLabel,className:e.classNames({[`${s?.paginationleftarrowicon}`]:"left"===r},{[`${s?.paginationrightarrowicon}`]:"right"===r}),customAttributes:n,disabled:i,icon:o?.icon,onClick:t=>{i||o?.onClick?.(t)}})};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.adjustMaxCountersNumber=({maxStepsNumber:e,propMaxCountersNumber:t})=>{let r;return e<=3?(r=e,r):(r=t||5,e>3&&r<=2&&(r=3),r=Math.min(e,r),r)};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=(e,t)=>[...Array(e)].map((e,r)=>t+1+r);exports.buildstepsNumber=(t,r,s)=>{let o=s,a=[],l=[],i=[],c=[],n=t+1;n>=s&&r!==s&&(a=[1,"..."],o--),(r+1-n>=s||n<s&&r-s>=1)&&r!==s&&(l=["...",r],o--);const p=n<=o,u=Math.abs(r-n)<o;if(p)n=1,c=e(o-1,n);else if(u)n=r-o+1,c=e(o-1,n);else{const t=(o-1)/2,r=Math.floor(t),s=Math.ceil(t);i=((e,t)=>[...Array(e)].map((r,s)=>t-(e-s)))(r,n),c=e(s,n)}return[...a,...i,n,...c,...l]};

package/dist/cjs/components/pagination/index.js

@@ -0,0 +1,2 @@
+const { Pagination } = require('./pagination.js');
+module.exports = { ...module.exports, Pagination };

package/dist/cjs/components/pagination/pagination.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),r=require("../../lib/hooks/useClassName/useClassName.js"),t=require("./helpers/adjustMaxCountersNumber.js"),a=require("./helpers/getMaxCountersNumber.js"),u=require("./paginationStandAlone.js"),i=s.forwardRef(({additionalClasses:s,currentStep:i,maxCountersNumber:n,maxStepsNumber:o,variant:m,...l},p)=>{const b=r.useClassName({additionalClassNames:s,component:"PAGINATION",variant:m}),d=Math.max(0,Math.min(i,o-1)),x=t.adjustMaxCountersNumber({maxStepsNumber:o,propMaxCountersNumber:n}),N=a.buildstepsNumber(d,o,x),j=N.indexOf(d+1),C=0===d,c=d===o-1;return e.jsxRuntimeExports.jsx(u.PaginationStandAlone,{ref:p,cssClasses:b,leftDisabled:C,rightDisabled:c,stepActive:j,stepsNumber:N,...l})});exports.Pagination=i;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./types.js"),e=({arrowElement:e,arrowX:r,arrowY:o,offset:s="0px",placement:l})=>{if(!e)return;e.setAttribute("data-kbt-placement",l),e.style.top="",e.style.right="",e.style.bottom="",e.style.left="";const a=l.split("-")[0],n=t.ArrowPositions[a];e.style[n]=s;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)")}};exports.positionArrow=(t,r,o,s,l,a)=>{if(!t||!o.arrow||!r)return;const{x:n,y:p}=o.arrow;let y=`-${Math.floor(a/2)}px`;l&&void 0!==l[0]&&(y=-Math.abs(l[0]/4)+"px"),e({arrowElement:r,arrowX:n,arrowY:p,offset:y,placement:s})},exports.updateArrowStyles=e;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@floating-ui/dom"),t=require("../../utils/placement.utils.js");exports.calculateMainAxisOffset=({arrowSize:e,hasArrow:t,offsetDistance:i})=>"number"==typeof i?.[0]?i[0]:t?e:0,exports.getMiddlewareStack=({arrowElement:i,customMiddlewares:s,edgePadding:r,hideWhenDetached:a,isBodyAnchor:n,mainAxisOffset:d,offsetDistance:o,placement:h})=>{let c=[];return c=s?.length?[...s]:n?((i,s)=>{const r=t.getPlacementDirection(i),a=[];return"center"===r?a.push(e.shift({crossAxis:!0,mainAxis:!0,padding:s})):r.startsWith("right")||r.startsWith("left")?a.push(e.offset({alignmentAxis:0,mainAxis:0})):(r.startsWith("bottom")||r.startsWith("top"))&&a.push(e.offset({mainAxis:0})),a})(h,r):((t,i,s)=>{const r=[];return r.push(e.offset({crossAxis:i?.[1]||0,mainAxis:t})),r.push(e.flip({fallbackAxisSideDirection:"start",padding:s})),r.push(e.shift({padding:s})),r})(d,o,r),(({middlewareStack:t,isBodyAnchor:i,hideWhenDetached:s,arrowElement:r,edgePadding:a})=>{!i&&s&&t.push(e.hide()),r&&t.push(e.arrow({element:r,padding:a}))})({middlewareStack:c,isBodyAnchor:n,hideWhenDetached:a,arrowElement:i,edgePadding:r}),c};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.determinePositioningConfig=(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}};

package/dist/cjs/components/popover/hooks/positioning/positionStyles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../types/animation.js"),o=({edgePadding:o=0,isBodyAnchor:r=!0,placement:e=t.DEFAULT_PLACEMENT,strategy:i,useFloatingUICoordinates:n=!1,x:a=0,y:s=0})=>{if(!r)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:i,right:"auto",top:`${s}px`,transform:"",transformOrigin:""};if(n)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:"fixed",right:"auto",top:`${s}px`,transformOrigin:"center bottom"};const x={bottom:{bottom:`${o}px`,boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:"auto",transform:"translateX(-50%)",transformOrigin:"center bottom"},"bottom-end":{bottom:`${o}px`,boxSizing:"border-box",left:"auto",position:"fixed",right:`${o}px`,top:"auto",transform:"none",transformOrigin:"right bottom"},"bottom-start":{bottom:`${o}px`,boxSizing:"border-box",left:`${o}px`,position:"fixed",right:"auto",top:"auto",transform:"none",transformOrigin:"left bottom"},center:{bottom:"auto",boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:"50%",transform:"translate(-50%, -50%)",transformOrigin:"center center"},defaultStyle:{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:i,right:"auto",top:`${s}px`},left:{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:"50%",transform:"translateY(-50%)",transformOrigin:"left center"},"left-end":{bottom:`${o}px`,boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:"auto",transform:"none",transformOrigin:"left bottom"},"left-start":{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:`${o}px`,position:"fixed",right:"auto",top:`${o}px`,transform:"none",transformOrigin:"left top"},right:{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:"50%",transform:"translateY(-50%)",transformOrigin:"right center"},"right-end":{bottom:`${o}px`,boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:"auto",transform:"none",transformOrigin:"right bottom"},"right-start":{bottom:"auto",boxSizing:"border-box",display:"flex",flexDirection:"column",left:"auto",position:"fixed",right:`${o}px`,top:`${o}px`,transform:"none",transformOrigin:"right top"},top:{bottom:"auto",boxSizing:"border-box",left:"50%",position:"fixed",right:"auto",top:`${o}px`,transform:"translateX(-50%)",transformOrigin:"center top"},"top-end":{bottom:"auto",boxSizing:"border-box",left:"auto",position:"fixed",right:`${o}px`,top:`${o}px`,transform:"none",transformOrigin:"right top"},"top-start":{bottom:"auto",boxSizing:"border-box",left:`${o}px`,position:"fixed",right:"auto",top:`${o}px`,transform:"none",transformOrigin:"left top"}};return x[e]||x.defaultStyle};exports.applyPositionStyles=({edgePadding:r=0,hasCustomMiddlewares:e=!1,isBodyAnchor:i,middlewareStack:n=[],placement:a,ref:s,strategy:x,x:f=0,y:p=0})=>{if(s?.current)if(i?s.current.setAttribute("data-kbt-placement",a||t.DEFAULT_PLACEMENT):s.current.setAttribute("data-kbt-placement",s.current.getAttribute("data-kbt-placement")||a||"bottom"),i){const t=n.some(t=>"body-auto-centering"===t.name),i=o({edgePadding:r,placement:a,strategy:x,useFloatingUICoordinates:e||t,x:f,y:p});Object.assign(s.current.style,i)}else{const t=o({edgePadding:r,isBodyAnchor:!1,placement:a,strategy:x,x:f,y:p});Object.assign(s.current.style,t)}},exports.getPositionStyles=o;

package/dist/cjs/components/popover/hooks/positioning/types.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.ArrowPositions={bottom:"top",left:"right",right:"left",top:"bottom"};

package/dist/cjs/components/popover/hooks/usePopoverInteractions.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),s=require("../../../lib/hooks/useClickOutside/useClickOutside.js"),t=require("../../../lib/utils/keyboard/keyboard.js");exports.usePopoverInteractions=({disableClickOverlayClose:r=!1,disableEscapeClose:o=!1,isVisible:i,onClose:n,popoverRef:l,preventCloseOnClickElements:u=[]})=>{const c=e.useMemo(()=>u.filter(Boolean),[u]),a=e.useCallback(e=>{if(!i||r)return;const s=e.target;if(l.current?.contains(s))return;c.some(e=>e.contains(s))||n?.()},[i,r,l,c,n]);return s.useClickOutside(l,a,c),e.useEffect(()=>{if(!i)return;const e=e=>{t.isKeyEscapePressed(e.key)&&(e.preventDefault(),e.stopPropagation(),o||n?.())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[o,i,n]),{handleClickOutside:a}};

package/dist/cjs/components/popover/hooks/usePopoverLifecycle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../lib/hooks/syncRefs/syncRefs.js"),l=require("../../../lib/hooks/useScrollBlock/useScrollBlock.js"),n=require("../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.js"),o=require("../../../lib/utils/focusHandlers/focusHandlers.js");exports.usePopoverLifecycle=({animationExitDuration:s=200,disableAnimations:t,open:u=!1,disableAutoFocusFirstDescendant:c=!1,disableAutoFocusFirstDescendantAfterClose:i=!0,disableRestoreFocusAfterClose:a=!1,disableScrollBackground:f=!1,preventScrollOnCloseFocus:d=!1,popoverContainerRef:b})=>{const m=e.useRef(null),S=e.useRef(!1),k=e.useRef(null),p=e.useRef(null),[R,v]=e.useState(u),[C,w]=e.useState(!1),F=n.convertDurationToNumber(s),{allowScroll:D,blockScroll:y}=l.useScrollBlock(),A=e.useCallback(()=>{!c&&m.current&&o.focusFirstDescendant({element:m.current,preventScroll:!0})},[c]),T=e.useCallback(()=>{a?i||o.focusFirstDescendant({element:document.body}):p.current?.focus({preventScroll:d})},[a,d,i]);e.useEffect(()=>{u&&(p.current=document.activeElement,v(!0),w(!1))},[u]),e.useEffect(()=>(!u&&R&&(t?(T(),v(!1),w(!1)):(w(!0),k.current=window.setTimeout(()=>{T(),v(!1),w(!1)},F))),()=>{null!==k.current&&(window.clearTimeout(k.current),k.current=null)}),[u,R,t,F,T]);const j=e.useCallback(e=>{m.current=e,A(),f&&!S.current&&(S.current=!0,y({elementsToOmit:[m.current]}))},[y,A,f]),q=e.useCallback(()=>{S.current&&D(),m.current=null},[D]),g=e.useCallback(e=>{e?j(e):q(),r.syncInnerAndForwardedRef({forwardedRef:b,innerRef:m})},[b,q,j]);return{isClosing:C,isVisible:R,handleInnerRef:g,popoverRef:m}};

package/dist/cjs/components/popover/hooks/usePopoverPositioning.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("@floating-ui/dom"),r=require("./positioning/arrowPositionStyles.js"),n=require("./positioning/middlewareUtils.js"),i=require("./positioning/positionCalculation.js"),a=require("./positioning/positionStyles.js");exports.usePopoverPositioning=({anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:d={},middlewares:l=[],placement:u,ref:m,strategy:f})=>{const{edgePadding:p=0,hideWhenDetached:g,offsetDistance:w}=d,y=e.useRef(document.body),h=e.useRef(null),b=e.useRef({anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:{edgePadding:p,hideWhenDetached:g,offsetDistance:w},middlewares:l,placement:u,ref:m,strategy:f});e.useEffect(()=>{b.current={anchorElement:s,arrowStyles:o,isVisible:c,middlewareOptions:{edgePadding:p,hideWhenDetached:g,offsetDistance:w},middlewares:l,placement:u,ref:m,strategy:f}},[s,u,w,p,g,l,f,c,m,o]);const S=e.useCallback(()=>m?.current&&c&&o?(h.current=m.current.querySelector('[data-kbt-id="popover-arrow"]'),h.current):null,[m,c,o]);e.useEffect(()=>{const e=()=>{!S()&&c&&o&&m?.current&&requestAnimationFrame(e)};e()},[S,c,o]);const P=e.useCallback((e,t)=>e&&t?.current&&document.body.contains(t.current),[]),k=e.useCallback((e,t,n,i,s,c,d,l,u,m,f,p,g,w=[],y=[])=>{e?.current&&(a.applyPositionStyles({edgePadding:d,hasCustomMiddlewares:w.length>0,isBodyAnchor:t,middlewareStack:y,placement:n,ref:e,strategy:c,x:i,y:s}),t||e.current.setAttribute("data-kbt-placement",m),r.positionArrow(!!o,l,u,m,f,p),g?.())},[o]),D=e.useCallback((e,t,r,i,a,s,c)=>{const d=n.calculateMainAxisOffset({arrowSize:t,hasArrow:!!o,offsetDistance:e}),l=h.current;return{arrowElement:l,middlewareStack:n.getMiddlewareStack({arrowElement:l,customMiddlewares:s,edgePadding:i,hideWhenDetached:c?.hideWhenDetached,isBodyAnchor:r,mainAxisOffset:d,offsetDistance:e,placement:a})}},[o]),E=e.useCallback((e,t,r,n,i,a,s,o,c,d,l,u,m,f=[],p=[])=>{const g=t.hide?.referenceHidden||t.hide?.escaped;e.current&&(e.current.style.opacity=g?"0":"",e.current.style.pointerEvents=g?"none":""),g||k(e,r,n,i,a,s,o,c,t,d,l,u,m,f,p)},[k]),C=e.useCallback(async()=>{const{anchorElement:e,arrowStyles:r,middlewareOptions:n,middlewares:a,onPositioned:s,placement:o,ref:c,strategy:d}=b.current,l=n?.offsetDistance,u=n?.edgePadding??8,m=r?.size||0,f=e||y.current;if(!c?.current||!P(f,c))return;const p=f===document.body,{arrowElement:g,middlewareStack:w}=D(l,m,p,u,o,a,n||{}),{actualPlacement:h,autoStrategy:S}=i.determinePositioningConfig(p,d,o),k="center"===h?"top":h,C=await t.computePosition(f,c.current,{middleware:w,placement:k,strategy:S}),{middlewareData:q,placement:A,x:O,y:x}=C;E(c,q,p,h,O,x,d,u,g,A,l,m,s,a,w)},[]);e.useEffect(()=>{if(!c||!m?.current)return;m.current.offsetHeight,C();const e=s??y.current;let r=()=>{};return r=t.autoUpdate(e,m.current,C,{ancestorResize:!0,ancestorScroll:!0,animationFrame:!1,elementResize:!0}),()=>{r()}},[c,s,C])};

package/dist/cjs/components/popover/index.js

@@ -0,0 +1,3 @@
+module.exports = { ...module.exports, ...require('./middlewares.js') };
+const { Popover } = require('./popover.js');
+module.exports = { ...module.exports, Popover };

package/dist/cjs/components/popover/popover.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),o=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useTrapFocus/useTrapFocus.js"),i=require("./hooks/usePopoverInteractions.js"),l=require("./hooks/usePopoverLifecycle.js"),a=require("./hooks/usePopoverPositioning.js"),n=require("./popoverStandAlone.js"),t=s.forwardRef(({additionalClasses:s,anchorElement:t,animationExitDuration:u=200,disableAnimations:c=!1,disableAutoFocusFirstDescendant:p=!1,disableAutoFocusFirstDescendantAfterClose:d=!0,disableClickOverlayClose:C=!1,disableEscapeClose:b=!1,disableRestoreFocusAfterClose:m=!1,disableScrollBackground:v=!1,disableTrapFocus:f=!1,middlewareOptions:F,middlewares:A,onClose:P,open:O=!1,preventCloseOnClickElements:g=[],preventScrollOnCloseFocus:j=!1,strategy:k="absolute",popoverContainerRef:y,...E},R)=>{const S=c||!!t,h=o.useClassName({additionalClassNames:s,component:"POPOVER"}),{isVisible:q,isClosing:w,handleInnerRef:x,popoverRef:D}=l.usePopoverLifecycle({open:O,disableAnimations:S,disableAutoFocusFirstDescendant:p,disableAutoFocusFirstDescendantAfterClose:d,disableRestoreFocusAfterClose:m,disableScrollBackground:v,preventScrollOnCloseFocus:j,popoverContainerRef:y,animationExitDuration:u});return r.useTrapFocus({ref:D,trapFocus:!f&&q}),i.usePopoverInteractions({disableClickOverlayClose:C,disableEscapeClose:b,isVisible:q,onClose:P,popoverRef:D,preventCloseOnClickElements:g}),a.usePopoverPositioning({anchorElement:t,arrowStyles:E.arrowStyles,isVisible:q,middlewareOptions:F,middlewares:A,placement:E.placement,ref:D,strategy:k}),e.jsxRuntimeExports.jsx(n.PopoverStandAlone,{ref:R,...E,anchorElement:!!t,cssClasses:h,disableAnimations:S,isClosing:w,isVisible:q,middlewareOptions:F,popoverContainerRef:x,strategy:k})});exports.Popover=t;

package/dist/cjs/components/popover/popoverStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js");;/* empty css                  */const t=require("react"),s=require("../../lib/components/customComponent/customComponent.js"),r=require("../../lib/utils/classNames/classNames.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),a=require("./utils/styling.utils.js"),i=t.forwardRef(({anchorElement:t,arrowStyles:i,children:n,component:l="div",cssClasses:d,disableAnimations:m,id:u,isClosing:c,isVisible:p,overlay:b,placement:x,popoverContainerRef:j,zIndex:k="auto",...v},y)=>{const C=o.pickCustomAttributes(v,!0),{"data-testid":f="popover",...g}=C;return e.jsxRuntimeExports.jsx("div",{ref:y,"data-testid":f,id:u,children:p&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[b,e.jsxRuntimeExports.jsxs(s.CustomComponent,{ref:j,...g,...v,className:r.classNames(d?.popover),component:l,"data-kbt-anchor-element":t,"data-kbt-closing":c,"data-kbt-disable-animations":m,"data-kbt-has-arrow":!!i,"data-kbt-id":"popover","data-kbt-placement":x,style:{zIndex:k||"auto"},children:[!!i&&e.jsxRuntimeExports.jsx("div",{className:r.classNames(d?.arrow),"data-kbt-arrow-border":!!i,"data-kbt-id":"popover-arrow","data-kbt-placement":x,style:{...x?a.getArrowBorderStyles(x,i):{},zIndex:"number"==typeof k?k+1:k}}),n]})]})})});exports.PopoverStandAlone=i;

package/dist/cjs/components/popover/styles/index.css

@@ -0,0 +1,10 @@
+/**
+ * PopoverV2 Styles Index
+ * Imports all popover-related CSS files
+ */
+
+/* Core popover styles and animations */
+@import './popover.css';
+
+/* Arrow positioning and styling */
+@import './popover-arrow.css';

package/dist/cjs/components/popover/styles/keyframes.css

@@ -0,0 +1,421 @@
+/**
+ * CSS animations for popover positioning
+ * Each animation corresponds to a specific body position from positionStyles.ts
+ */
+
+/* ========================================
+   CENTER POSITION ANIMATIONS
+   ======================================== */
+
+/* Center position - scales from center */
+@keyframes popover-enter-center {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes popover-exit-center {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* ========================================
+   TOP POSITION ANIMATIONS
+   ======================================== */
+
+/* Top center - slides down and fades in */
+@keyframes popover-enter-top {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-top {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+}
+
+/* Top start (left) - slides down only (same as top) */
+@keyframes popover-enter-top-start {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* Top end (right) - slides down only (same as top) */
+@keyframes popover-enter-top-end {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* ========================================
+   BOTTOM POSITION ANIMATIONS
+   ======================================== */
+
+/* Bottom center - slides up and fades in */
+@keyframes popover-enter-bottom {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+}
+
+/* Bottom start (left) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-start {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Bottom end (right) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-end {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* ========================================
+   LEFT POSITION ANIMATIONS
+   ======================================== */
+
+/* Left center - slides right and fades in */
+@keyframes popover-enter-left {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-left {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+}
+
+/* Left start (top) - slides right only (same as left) */
+@keyframes popover-enter-left-start {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* Left end (bottom) - slides right only (same as left) */
+@keyframes popover-enter-left-end {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* ========================================
+   RIGHT POSITION ANIMATIONS
+   ======================================== */
+
+/* Right center - slides left and fades in */
+@keyframes popover-enter-right {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-right {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+}
+
+/* Right start (top) - slides left only (same as right) */
+@keyframes popover-enter-right-start {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* Right end (bottom) - slides left only (same as right) */
+@keyframes popover-enter-right-end {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* ========================================
+   NOTE: No default animation needed
+   ======================================== */
+/* When no placement is specified, center animation is used as fallback */
+
+/* ========================================
+   UTILITY CLASSES FOR APPLYING ANIMATIONS
+   ======================================== */
+
+/* Animation duration and timing */
+.popover-animate {
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+
+/* Enter animations by position */
+.popover-enter-center {
+  animation-name: popover-enter-center;
+}
+.popover-enter-top {
+  animation-name: popover-enter-top;
+}
+.popover-enter-top-start {
+  animation-name: popover-enter-top-start;
+}
+.popover-enter-top-end {
+  animation-name: popover-enter-top-end;
+}
+.popover-enter-bottom {
+  animation-name: popover-enter-bottom;
+}
+.popover-enter-bottom-start {
+  animation-name: popover-enter-bottom-start;
+}
+.popover-enter-bottom-end {
+  animation-name: popover-enter-bottom-end;
+}
+.popover-enter-left {
+  animation-name: popover-enter-left;
+}
+.popover-enter-left-start {
+  animation-name: popover-enter-left-start;
+}
+.popover-enter-left-end {
+  animation-name: popover-enter-left-end;
+}
+.popover-enter-right {
+  animation-name: popover-enter-right;
+}
+.popover-enter-right-start {
+  animation-name: popover-enter-right-start;
+}
+.popover-enter-right-end {
+  animation-name: popover-enter-right-end;
+}
+
+/* Exit animations by position */
+.popover-exit-center {
+  animation-name: popover-exit-center;
+}
+.popover-exit-top {
+  animation-name: popover-exit-top;
+}
+.popover-exit-top-start {
+  animation-name: popover-exit-top-start;
+}
+.popover-exit-top-end {
+  animation-name: popover-exit-top-end;
+}
+.popover-exit-bottom {
+  animation-name: popover-exit-bottom;
+}
+.popover-exit-bottom-start {
+  animation-name: popover-exit-bottom-start;
+}
+.popover-exit-bottom-end {
+  animation-name: popover-exit-bottom-end;
+}
+.popover-exit-left {
+  animation-name: popover-exit-left;
+}
+.popover-exit-left-start {
+  animation-name: popover-exit-left-start;
+}
+.popover-exit-left-end {
+  animation-name: popover-exit-left-end;
+}
+.popover-exit-right {
+  animation-name: popover-exit-right;
+}
+.popover-exit-right-start {
+  animation-name: popover-exit-right-start;
+}
+.popover-exit-right-end {
+  animation-name: popover-exit-right-end;
+}

package/dist/cjs/components/popover/styles/popover-arrow.css

@@ -0,0 +1,42 @@
+/* ============================================= */
+/* PopoverV2 Arrow Styles */
+/* ============================================= */
+
+/* Arrow base styles */
+[data-kbt-id='popover-arrow'] {
+  position: absolute;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+/* Arrow positioning based on placement */
+[data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
+  bottom: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
+  top: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
+  right: calc(-1 * var(--arrow-size, 8px) / 2);
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
+  left: calc(-1 * var(--arrow-size, 8px) / 2);
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* Center placement arrow - default to bottom position */
+[data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
+  top: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}