@kubit-ui-web/react-components 2.0.0-beta.6 → 2.0.0-beta.62

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

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

package/dist/esm/components/pageControl/helper/index.mjs

@@ -0,0 +1 @@
+export*from"./controlType.mjs";export*from"./positions.mjs";

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

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

package/dist/esm/components/pageControl/index.mjs

@@ -0,0 +1 @@
+import{PageControl as o}from"./pageControl.mjs";export{o as PageControl};

package/dist/esm/components/pageControl/pageControl.mjs

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

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

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

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

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

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

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

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

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

package/dist/esm/components/pagination/index.mjs

@@ -0,0 +1 @@
+import{Pagination as i}from"./pagination.mjs";export{i as Pagination};

package/dist/esm/components/pagination/pagination.mjs

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

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

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

package/dist/esm/components/popover/animations/keyframes.utils.mjs

@@ -0,0 +1,5 @@
+const e=new Map;let t=0;const n=n=>{const r=n.replace(/\s+/g,"").substring(0,50);const o=e.get(r);if(o)return o;const a=`popover-animation-${++t}`;e.set(r,a);return a};const r=e=>{if(!e||""===e.trim())return"";const t=n(e);const r=document.head.querySelector(`[data-keyframes="${t}"]`);if(r)return t;const o=document.createElement("style");o.setAttribute("data-keyframes",t);o.textContent=`
+    @keyframes ${t} {
+      ${e}
+    }
+  `;document.head.appendChild(o);return t};const o=e=>{if(!e)return;const t=document.head.querySelector(`[data-keyframes="${e}"]`);if(t)document.head.removeChild(t)};export{o as cleanupKeyframes,r as injectKeyframes};

package/dist/esm/components/popover/animations/popover.animations.mjs

@@ -0,0 +1,20 @@
+import{ANIMATION_TYPES as t,DEFAULT_PLACEMENT as n}from"../types/animation.mjs";import{PLACEMENT_TRANSFORM_ORIGINS as o,generateTransform as i,getAnimationOpacities as e,getSlideTransforms as r,getTransformOrigin as a,resolveAnimationConfig as s}from"../utils/animation.utils.mjs";import{getPlacementDirection as m}from"../utils/placement.utils.mjs";const f=(n,o,a,s)=>{const m=a===t.ENTER;const{end:f,start:c}=e(n,m);let l="";let u="";if("fade"!==o){const{end:t,start:i}=r(n,o,m);l=i;u=t}const p=i(n,l,!m,false,s);const d=i(n,u,m,!m,s);return`from {
+    opacity: ${c};
+    ${p?`transform: ${p};`:""}
+  }
+  to {
+    opacity: ${f};
+    ${d?`transform: ${d};`:""}
+  }`};const c=(t,n)=>{const{direction:o,placement:i,type:e}=n;return f(t,o,e,i)};const l=(n,o)=>({in:(o,i)=>f(o,n,t.ENTER,i),out:(n,i)=>f(n,o,t.EXIT,i)});const u={bottom:l("up","down"),"bottom-end":l("up","down"),"bottom-start":l("up","down"),center:l("fade","fade"),left:l("left","left"),"left-end":l("left","left"),"left-start":l("left","left"),right:l("right","right"),"right-end":l("right","right"),"right-start":l("right","right"),top:l("down","up"),"top-end":l("down","up"),"top-start":l("down","up")};const p=(t,i,e)=>{const r=s(i,t);const f=e||n;let c=u[f];let l=f;if(!c){const t=m(f);c=u[t];l=t}const p=t?c.out:c.in;const d=p(r,f);const g=a(r,o[l]);let $=`@keyframes popover-animation {
+    ${d}
+  }`;if(g)$+=`
+  transform-origin: ${g};`;return $};const d=(t,n,o,i,e)=>{const r=f(n,o,i,e);return`@keyframes ${t} {
+  ${r}
+}`};const g=(t,n=false)=>{const o=s(t,n);const i=o.duration||"0ms";const e=o.delay||"0ms";const r=Math.max(1,o.iterationCount||1);const a=o.timingFunction||"ease";let m=`
+    animation-name: popover-animation;
+    animation-duration: ${i};
+    animation-delay: ${e};
+    animation-timing-function: ${a};
+    animation-iteration-count: ${r};
+    animation-fill-mode: forwards;`;if(o.transformOrigin&&""!==o.transformOrigin)m+=`
+    transform-origin: ${o.transformOrigin};`;return m};export{c as createCustomAnimation,f as generateAnimation,d as generateAnimationKeyframesRule,g as generateAnimationStyles,p as getPlacementAnimation};

package/dist/esm/components/popover/animations/position-animation.utils.mjs

@@ -0,0 +1 @@
+const t={bottom:"bottom","bottom-end":"bottom-end","bottom-start":"bottom-start",center:"center",left:"left","left-end":"left-end","left-start":"left-start",right:"right","right-end":"right-end","right-start":"right-start",top:"top","top-end":"top-end","top-start":"top-start"};const e=(e,o=false)=>{if(!e){const t=o?"exit":"enter";return`popover-animate popover-${t}-center`}const n=t[e]||"center";const r=o?"exit":"enter";return`popover-animate popover-${r}-${n}`};const o=(t,o=false)=>{const n=e(t,o);const r=n.split(" ");return r.find(t=>t.startsWith("popover-enter-")||t.startsWith("popover-exit-"))||"popover-enter-center"};const n=(t,e=false,n=200,r="cubic-bezier(0.16, 1, 0.3, 1)")=>{const i=o(t,e);return{animationDuration:`${n}ms`,animationFillMode:"forwards",animationName:i,animationTimingFunction:r}};const r=e=>{if(!e)return false;return e in t};const i=()=>{const e={};Object.keys(t).forEach(o=>{const n=t[o]||"center";e[o]={enter:`popover-animate popover-enter-${n}`,exit:`popover-animate popover-exit-${n}`}});return e};export{i as getAllPositionAnimationClasses,e as getPositionAnimationClass,o as getPositionAnimationName,n as getPositionAnimationStyles,r as hasPositionAnimation};

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

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

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

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

package/dist/esm/components/popover/hooks/positioning/index.mjs

@@ -0,0 +1 @@
+export*from"./arrowPositionStyles.mjs";export*from"./middlewareUtils.mjs";export*from"./positionCalculation.mjs";export*from"./positionStyles.mjs";export*from"./types.mjs";

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

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

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

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

package/dist/esm/components/popover/hooks/positioning/positionStyles.mjs

@@ -0,0 +1 @@
+import{DEFAULT_PLACEMENT as t}from"../../types/animation.mjs";const o=({edgePadding:o=0,isBodyAnchor:r=true,placement:i=t,strategy:e,useFloatingUICoordinates:n=false,x:a=0,y:f=0})=>{if(!r)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:e,right:"auto",top:`${f}px`,transform:"",transformOrigin:""};if(n)return{bottom:"auto",boxSizing:"border-box",left:`${a}px`,position:"fixed",right:"auto",top:`${f}px`,transformOrigin:"center bottom"};const s={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:e,right:"auto",top:`${f}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 s[i]||s.defaultStyle};const r=({edgePadding:r=0,hasCustomMiddlewares:i=false,isBodyAnchor:e,middlewareStack:n=[],placement:a,ref:f,strategy:s,x=0,y:b=0})=>{if(!f?.current)return;if(e)f.current.setAttribute("data-kbt-placement",a||t);else f.current.setAttribute("data-kbt-placement",f.current.getAttribute("data-kbt-placement")||a||"bottom");if(e){const t=n.some(t=>"body-auto-centering"===t.name);const e=i||t;const p=o({edgePadding:r,placement:a,strategy:s,useFloatingUICoordinates:e,x,y:b});Object.assign(f.current.style,p)}else{const t=o({edgePadding:r,isBodyAnchor:false,placement:a,strategy:s,x,y:b});Object.assign(f.current.style,t)}};export{r as applyPositionStyles,o as getPositionStyles};

package/dist/esm/components/popover/hooks/positioning/types.mjs

@@ -0,0 +1 @@
+const t={bottom:"top",left:"right",right:"left",top:"bottom"};export{t as ArrowPositions};

package/dist/esm/components/popover/hooks/usePopoverInteractions.mjs

@@ -0,0 +1 @@
+import{useCallback as e,useEffect as t,useMemo as o}from"react";import{ESCAPE as r}from"../../../lib/constants/keyboardKeys/keyboardKeys.mjs";import{useClickOutside as n}from"../../../lib/hooks/useClickOutside/useClickOutside.mjs";import{isKeyPressed as s}from"../../../lib/utils/keyboard/keyboard.mjs";const i=({disableClickOverlayClose:i=false,disableEscapeClose:a=false,isVisible:c,onClose:u,popoverRef:m,preventCloseOnClickElements:f=[]})=>{const d=o(()=>f.filter(Boolean),[f]);const k=e(e=>{if(!c||i)return;const t=e.target;if(m.current?.contains(t))return;const o=d.some(e=>e.contains(t));if(o)return;u?.()},[c,i,m,d,u]);n(m,k,d);t(()=>{if(!c)return;const e=e=>{if(s(e.key,...r.key)){e.preventDefault();e.stopPropagation();if(!a)u?.()}};document.addEventListener("keydown",e);return()=>{document.removeEventListener("keydown",e)}},[a,c,u]);return{handleClickOutside:k}};export{i as usePopoverInteractions};

package/dist/esm/components/popover/hooks/usePopoverLifecycle.mjs

@@ -0,0 +1 @@
+import{useCallback as e,useEffect as r,useRef as t,useState as n}from"react";import{useScrollBlock as o}from"../../../lib/hooks/useScrollBlock/useScrollBlock.mjs";import{convertDurationToNumber as l}from"../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.mjs";import{focusFirstDescendant as s}from"../../../lib/utils/focusHandlers/focusHandlers.mjs";import{syncInnerAndForwardedRef as c}from"../../../lib/utils/refs/syncRefs.mjs";const u=({animationExitDuration:u=200,disableAnimations:f,disableAutoFocusFirstDescendant:i=false,disableAutoFocusFirstDescendantAfterClose:m=true,disableRestoreFocusAfterClose:a=false,disableScrollBackground:d=false,open:p=false,popoverContainerRef:w,preventScrollOnCloseFocus:b=false})=>{const v=t(null);const S=t(false);const j=t(null);const k=t(null);const[T,y]=n(p);const[R,h]=n(false);const B=l(u);const{allowScroll:D,blockScroll:H}=o();const x=e(()=>{if(!i&&v.current)s({element:v.current,preventScroll:true})},[i]);const E=e(()=>{if(!a)return void k.current?.focus({preventScroll:b});if(!m)s({element:document.body})},[a,b,m]);r(()=>{if(p){k.current=document.activeElement;y(true);h(false)}},[p]);r(()=>{if(!p&&T)if(f){E();y(false);h(false)}else{h(true);j.current=window.setTimeout(()=>{E();y(false);h(false)},B)}return()=>{if(null!==j.current){window.clearTimeout(j.current);j.current=null}}},[p,T,f,B,E]);const L=e(e=>{v.current=e;x();if(d&&!S.current){S.current=true;H({elementsToOmit:[v.current]})}},[H,x,d]);const N=e(()=>{if(S.current)D();v.current=null},[D]);const O=e(e=>{if(e)L(e);else N();c({forwardedRef:w,innerRef:v})},[w,N,L]);return{handleInnerRef:O,isClosing:R,isVisible:T,popoverRef:v}};export{u as usePopoverLifecycle};

package/dist/esm/components/popover/hooks/usePopoverPositioning.mjs

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

package/dist/esm/components/popover/index.mjs

@@ -0,0 +1 @@
+import{Popover as o}from"./popover.mjs";export*from"./animations/spring.animations.mjs";export*from"./positioning/middlewares.mjs";export{o as Popover};

package/dist/esm/components/popover/popover.mjs

@@ -0,0 +1,2 @@
+/*! For license information please see popover.mjs.LICENSE.txt */
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.mjs";import{useTrapFocus as r}from"../../lib/hooks/useTrapFocus/useTrapFocus.mjs";import{usePopoverInteractions as a}from"./hooks/usePopoverInteractions.mjs";import{usePopoverLifecycle as t}from"./hooks/usePopoverLifecycle.mjs";import{usePopoverPositioning as m}from"./hooks/usePopoverPositioning.mjs";import{PopoverStandAlone as i}from"./popoverStandAlone.mjs";const l=({additionalClasses:s,anchorElement:l,animationExitDuration:n=200,disableAnimations:p=false,disableAutoFocusFirstDescendant:f=false,disableAutoFocusFirstDescendantAfterClose:c=true,disableClickOverlayClose:u=false,disableEscapeClose:d=false,disableRestoreFocusAfterClose:j=false,disableScrollBackground:P=false,disableTrapFocus:b=false,middlewareOptions:h,middlewares:v,onClose:C,open:k=false,popoverContainerRef:y,preventCloseOnClickElements:g=[],preventScrollOnCloseFocus:w=false,strategy:A="absolute",...F},N)=>{const O=p||!!l;const S=e({additionalClassNames:s,component:"POPOVER"});const{handleInnerRef:x,isClosing:E,isVisible:R,popoverRef:T}=t({animationExitDuration:n,disableAnimations:O,disableAutoFocusFirstDescendant:f,disableAutoFocusFirstDescendantAfterClose:c,disableRestoreFocusAfterClose:j,disableScrollBackground:P,open:k,popoverContainerRef:y,preventScrollOnCloseFocus:w});r({ref:T,trapFocus:!b&&R});a({disableClickOverlayClose:u,disableEscapeClose:d,isVisible:R,onClose:C,popoverRef:T,preventCloseOnClickElements:g});m({anchorElement:l,arrowStyles:F.arrowStyles,isVisible:R,middlewareOptions:h,middlewares:v,placement:F.placement,ref:T,strategy:A});return o(i,{ref:N,...F,anchorElement:!!l,cssClasses:S,disableAnimations:O,isClosing:E,isVisible:R,middlewareOptions:h,popoverContainerRef:x,strategy:A})};const n=s(l);export{n as Popover};

package/dist/esm/components/popover/popover.mjs.LICENSE.txt

@@ -0,0 +1,5 @@
+/**
+ * Positioning utilities built on top of Floating UI.
+ * @see https://floating-ui.com/docs/platform
+ * @license MIT - Floating UI is licensed under MIT
+ */

package/dist/esm/components/popover/popoverStandAlone.mjs

@@ -0,0 +1 @@
+import{Fragment as t,jsx as o,jsxs as a}from"react/jsx-runtime";import"./styles/index.css";import{forwardRef as e}from"react";import{CustomComponent as r}from"../../lib/components/customComponent/customComponent.mjs";import{classNames as s}from"../../lib/utils/classNames/classNames.mjs";import{pickCustomAttributes as i}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.mjs";import{getArrowBorderStyles as m}from"./utils/styling.utils.mjs";const n=({anchorElement:e,arrowStyles:n,children:d,component:p="div",cssClasses:c,disableAnimations:l,id:b,isClosing:u,isVisible:k,overlay:f,placement:v,popoverContainerRef:h,zIndex:j="auto",...x},y)=>{const w=i(x,true);const{["data-testid"]:C="popover",...N}=w;return o("div",{ref:y,"data-testid":C,id:b,children:k&&a(t,{children:[f,a(r,{ref:h,...N,...x,className:s(c?.popover),component:p,"data-kbt-anchor-element":e,"data-kbt-closing":u,"data-kbt-disable-animations":l,"data-kbt-has-arrow":!!n,"data-kbt-id":"popover","data-kbt-placement":v,style:{zIndex:j||"auto"},children:[!!n&&o("div",{className:s(c?.arrow),"data-kbt-arrow-border":!!n,"data-kbt-id":"popover-arrow","data-kbt-placement":v,style:{...v?m(v,n):{},zIndex:"number"==typeof j?j+1:j}}),d]})]})})};const d=e(n);export{d as PopoverStandAlone};

package/dist/esm/components/popover/positioning/index.mjs

@@ -0,0 +1 @@
+export*from"./middlewares.mjs";

package/dist/esm/components/popover/positioning/middlewares.mjs

@@ -0,0 +1 @@
+import{arrow as o,autoPlacement as e,flip as p,hide as r,offset as a,shift as i,size as s}from"@floating-ui/dom";export{o as popoverMWArrow,e as popoverMWAutoPlacement,p as popoverMWFlip,r as popoverMWHide,a as popoverMWOffset,i as popoverMWShift,s as popoverMWSize};

package/dist/esm/components/popover/stories/argtypes.mjs

@@ -0,0 +1 @@
+import{configArgTypes as e}from"@/lib/storybook/argtypes/argtypes";import{getBooleanArgTypes as o}from"@/lib/storybook/argtypes/booleanArgTypes";import{getDisabledArgTypes as t}from"@/lib/storybook/argtypes/disabledArgTypes";import{getHtmlComponentArgTypes as r}from"@/lib/storybook/argtypes/htmlComponentArgTypes";import{getSelectorArgTypes as s}from"@/lib/storybook/argtypes/selectorArgTypes";import{getStringtArgTypes as a}from"@/lib/storybook/argtypes/stringArgTypes";import{CATEGORY_CONTROL as p}from"@/lib/storybook/constants/categoryControl";const n=()=>({...e,...t(["anchorElement","arrowStyles","middlewareOptions","middlewares","onClose","overlay","preventCloseOnClickElements"]),children:a({category:p.CONTENT,keyName:"children",name:"popover"}),component:r({name:"popover"}),disableAnimations:o({descriptionName:"popover",name:"disableAnimations",subCategory:p.MODIFIERS}),disableAutoFocusFirstDescendant:o({descriptionName:"popover",name:"disableAutoFocusFirstDescendant",subCategory:p.ACCESIBILITY}),disableAutoFocusFirstDescendantAfterClose:o({descriptionName:"popover",name:"disableAutoFocusFirstDescendantAfterClose",subCategory:p.ACCESIBILITY}),disableClickOverlayClose:o({descriptionName:"popover",name:"disableClickOverlayClose",subCategory:p.MODIFIERS}),disableEscapeClose:o({descriptionName:"popover",name:"disableEscapeClose",subCategory:p.MODIFIERS}),disableRestoreFocusAfterClose:o({descriptionName:"popover",name:"disableRestoreFocusAfterClose",subCategory:p.ACCESIBILITY}),disableScrollBackground:o({descriptionName:"popover",name:"disableScrollBackground",subCategory:p.MODIFIERS}),disableTrapFocus:o({descriptionName:"popover",name:"disableTrapFocus",subCategory:p.ACCESIBILITY}),id:a({category:p.MODIFIERS,keyName:"id",name:"popover"}),open:o({descriptionName:"popover",name:"open",subCategory:p.MODIFIERS}),placement:s({category:p.MODIFIERS,defaultValue:"top",keyName:"placement",name:"popover",options:{bottom:"bottom","bottom-end":"bottom-end","bottom-start":"bottom-start",center:"center",left:"left","left-end":"left-end","left-start":"left-start",right:"right","right-end":"right-end","right-start":"right-start",top:"top","top-end":"top-end","top-start":"top-start"}}),preventScrollOnCloseFocus:o({descriptionName:"popover",name:"preventScrollOnCloseFocus",subCategory:p.ACCESIBILITY}),role:a({category:p.ACCESIBILITY,keyName:"role",name:"popover"}),strategy:s({category:p.MODIFIERS,defaultValue:"absolute",keyName:"strategy",name:"popover",options:{absolute:"absolute",fixed:"fixed"}}),zIndex:a({category:p.MODIFIERS,keyName:"zIndex",name:"popover"})});export{n as argtypes};

package/dist/esm/components/popover/stories/demos/animationsDemo.css

@@ -0,0 +1,97 @@
+/* Keyframes for custom animations */
+@keyframes demo-scale-fade-in {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes demo-rotate-slide-in {
+  0% {
+    transform: translate(-50%, -50%) translateY(30px) rotate(-8deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes demo-zoom-in {
+  0% {
+    transform: translate(-50%, -50%) scale(0.2);
+    opacity: 0;
+  }
+  60% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes demo-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Demo container styles */
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem;
+  max-width: 1200px;
+}
+
+.demo-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: #333;
+  font-size: 1.2rem;
+}
+
+.demo-section-description {
+  margin: 0;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.demo-button-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.demo-button {
+  justify-self: stretch;
+}
+
+.demo-code-block {
+  background: #f5f5f5;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  margin: 0.5rem 0;
+}

package/dist/esm/components/popover/stories/demos/animationsDemo.mjs

@@ -0,0 +1,39 @@
+import{Fragment as t,jsx as e,jsxs as i}from"react/jsx-runtime";import"./animationsDemo.css";import{useEffect as n,useState as a}from"react";import{Button as o}from"../../../button/button.mjs";import{Overlay as s}from"../../../../lib/components/overlay/overlay.mjs";import{createSpringAnimation as r}from"../../animations/spring.animations.mjs";import{Popover as m}from"../../popover.mjs";const d={background:"white",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1)",padding:"1rem"};const l={extra:{...d,maxWidth:"350px",minWidth:"250px"},modal:{...d,borderRadius:"8px",maxWidth:"500px",minWidth:"300px",padding:"2rem"},standard:{...d,minWidth:"200px"},wide:{...d,maxWidth:"350px",minWidth:"200px"}};const c=[{content:{description:"Slides from bottom to top (down → up animation). Automatically positioned above the trigger.",title:"\uD83C\uDFAF Top Animation"},id:"default-top",placement:"top",styleType:"standard"},{content:{description:"Same animation as 'top' but aligned to the left edge. Animation maintains vertical slide behavior.",title:"\uD83C\uDFAF Top Start Animation"},id:"default-top-start",placement:"top-start",styleType:"standard"},{content:{description:"Same animation as 'top' but aligned to the right edge. Animation maintains vertical slide behavior.",title:"\uD83C\uDFAF Top End Animation"},id:"default-top-end",placement:"top-end",styleType:"standard"},{content:{description:"Slides from top to bottom (up → down animation). Automatically positioned below the trigger.",title:"\uD83C\uDFAF Bottom Animation"},id:"default-bottom",placement:"bottom",styleType:"standard"},{content:{description:"Same animation as 'bottom' but aligned to the left edge. Animation maintains vertical slide behavior.",title:"\uD83C\uDFAF Bottom Start Animation"},id:"default-bottom-start",placement:"bottom-start",styleType:"standard"},{content:{description:"Same animation as 'bottom' but aligned to the right edge. Animation maintains vertical slide behavior.",title:"\uD83C\uDFAF Bottom End Animation"},id:"default-bottom-end",placement:"bottom-end",styleType:"standard"},{content:{description:"Slides from right to left (right → left animation). Positioned to the left of the trigger.",title:"\uD83C\uDFAF Left Animation"},id:"default-left",placement:"left",styleType:"wide"},{content:{description:"Same animation as 'left' but aligned to the top edge. Animation maintains horizontal slide behavior.",title:"\uD83C\uDFAF Left Start Animation"},id:"default-left-start",placement:"left-start",styleType:"wide"},{content:{description:"Same animation as 'left' but aligned to the bottom edge. Animation maintains horizontal slide behavior.",title:"\uD83C\uDFAF Left End Animation"},id:"default-left-end",placement:"left-end",styleType:"wide"},{content:{description:"Slides from left to right (left → right animation). Positioned to the right of the trigger.",title:"\uD83C\uDFAF Right Animation"},id:"default-right",placement:"right",styleType:"wide"},{content:{description:"Same animation as 'right' but aligned to the top edge. Animation maintains horizontal slide behavior.",title:"\uD83C\uDFAF Right Start Animation"},id:"default-right-start",placement:"right-start",styleType:"wide"},{content:{description:"Same animation as 'right' but aligned to the bottom edge. Animation maintains horizontal slide behavior.",title:"\uD83C\uDFAF Right End Animation"},id:"default-right-end",placement:"right-end",styleType:"wide"},{content:{description:"Fade animation for centered modal behavior. Perfect for dialogs and important content.",title:"\uD83C\uDFAF Center Animation (Modal Style)"},id:"default-center",placement:void 0,styleType:"modal"}];const p=[{additionalClasses:{container:"spring-bouncy-animation"},content:{description:"Low damping creates multiple oscillations for a playful, bouncy effect. Perfect for fun interactions and attention-grabbing animations.",params:"stiffness: 150, damping: 8",title:"\uD83C\uDFBE Bouncy Spring Physics"},id:"spring-bouncy"},{additionalClasses:{container:"spring-smooth-animation"},content:{description:"Balanced damping provides natural movement with minimal overshoot. Ideal for professional interfaces and subtle interactions.",params:"stiffness: 300, damping: 25",title:"\uD83C\uDF0A Smooth Spring Physics"},id:"spring-smooth",middlewareOptions:void 0,styleType:"extra"},{additionalClasses:{container:"spring-quick-animation"},content:{description:"High stiffness with lower mass creates snappy, responsive animations. Perfect for buttons and quick feedback interactions.",params:"stiffness: 500, mass: 0.8",title:"⚡ Quick Spring Physics"},id:"spring-quick",middlewareOptions:void 0,styleType:"extra"},{additionalClasses:{container:"spring-overdamped-animation"},content:{description:"High damping prevents oscillation, creating smooth, gradual movement. Great for elegant, calm interfaces and accessibility-friendly animations.",params:"damping: 40, mass: 1.2",title:"\uD83D\uDC0C Overdamped Spring Physics"},id:"spring-overdamped",middlewareOptions:void 0,styleType:"extra"}];const g=({content:n})=>i(t,{children:[e("strong",{children:n.title}),e("p",{children:n.description}),n.params&&e("div",{style:{color:"#666",fontSize:"0.9em",marginTop:"0.5rem"},children:e("code",{children:n.params})})]});const h=({id:t,label:i,onClick:n})=>e(o,{size:"MEDIUM",variant:"PRIMARY",onClick:e=>n(e,t),children:i});const f=()=>{const[t,o]=a(null);const d=(t,e)=>{o(e)};const f=()=>{o(null)};n(()=>{const t=[{className:"spring-bouncy-animation",config:{damping:8,duration:"1200ms",initialDisplacement:35,keyframeCount:24,mass:1,stiffness:150}},{className:"spring-smooth-animation",config:{damping:25,duration:"800ms",initialDisplacement:30,keyframeCount:20,mass:1,stiffness:300}},{className:"spring-quick-animation",config:{damping:20,duration:"600ms",initialDisplacement:25,keyframeCount:16,mass:.8,stiffness:500}},{className:"spring-overdamped-animation",config:{damping:40,duration:"1000ms",initialDisplacement:40,keyframeCount:20,mass:1.2,stiffness:200}}];t.forEach(({className:t,config:e})=>{const i=r("down",{...e,placement:"bottom"});const n=document.getElementById(`spring-style-${t}`);if(n)n.remove();const a=`${t}-keyframes`;const o=`
+        @keyframes ${a} {
+          ${i.keyframesCSS}
+        }
+
+        .${t}[data-kbt-closing="false"] {
+          animation: ${a} ${i.duration} ease-out !important;
+        }
+
+        .${t}[data-kbt-closing="true"] {
+          animation: ${a} ${i.duration} ease-in reverse !important;
+        }
+      `;const s=document.createElement("style");s.id=`spring-style-${t}`;s.textContent=o;document.head.appendChild(s)});return()=>{t.forEach(({className:t})=>{const e=document.getElementById(`spring-style-${t}`);if(e)e.remove()})}},[]);return i("div",{className:"demo-container",children:[i("div",{className:"demo-section",children:[e("h3",{className:"demo-section-title",children:"\uD83C\uDFAF Built-in CSS Animations"}),e("p",{className:"demo-section-description",children:"Popover uses pure CSS animations that automatically adapt to placement. The animations are optimized for performance and work consistently across all placements."}),e("pre",{className:"demo-code-block",children:`// No animation configuration needed - Popover handles everything
+<Popover
+  placement="bottom"  // Animation direction determined automatically
+  open={isOpen}
+  onClose={handleClose}
+>
+  Content here
+</Popover>
+`}),e("div",{className:"demo-button-grid",children:c.map(t=>{const i=t.content.title.replace("\uD83C\uDFAF ","").replace(" Animation","");return e(h,{id:t.id,label:i,onClick:d},t.id)})})]}),i("div",{className:"demo-section",children:[e("h3",{className:"demo-section-title",children:"\uD83C\uDF00 Spring Physics Custom Animations"}),e("p",{className:"demo-section-description",children:"Advanced physics-based animations using spring-damper calculations. These produce natural, realistic movements with customizable physics parameters. Applied using additionalClasses to inject custom CSS animations."}),e("pre",{className:"demo-code-block",children:`// Spring physics animations with realistic movement
+import { createSpringAnimation } from '@/components/popover/animations/spring.animations';
+
+// Create spring animation
+const springAnimation = createSpringAnimation('down', {
+  stiffness: 300,         // Spring stiffness (higher = faster)
+  damping: 15,            // Damping ratio (lower = more bounce)
+  mass: 1,                // Object mass (higher = slower)
+  duration: '1200ms',     // Total animation duration
+  initialDisplacement: 35, // Starting offset distance
+  keyframeCount: 30,      // Animation smoothness (more = smoother)
+});
+
+// Apply using additionalClasses
+<Popover
+  placement="bottom"
+  additionalClasses={{ container: "spring-bouncy-animation" }}
+  // ... other props
+/>`}),e("div",{className:"demo-button-grid",children:p.map(t=>{const i=t.content.title.replace(" Physics","");return e(h,{id:t.id,label:i,onClick:d},t.id)})})]}),c.map(i=>e(m,{open:t===i.id,overlay:e(s,{variant:"POPOVER"}),placement:i.placement,onClose:f,children:e("div",{style:l[i.styleType],children:e(g,{content:i.content})})},i.id)),p.map(i=>e(m,{open:t===i.id,overlay:e(s,{variant:"POPOVER"}),placement:"bottom",onClose:f,children:e("div",{style:l.extra,children:e(g,{content:i.content})})},i.id))]})};export{f as AnimationsDemo};

package/dist/esm/components/popover/stories/demos/popoverBodyPositionDemo.mjs

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as o,useState as i}from"react";import{Button as n}from"../../../button/button.mjs";import{Text as r}from"../../../text/text.mjs";import{TextVariantType as d}from"@/lib/designSystem/kubit/components/text/variants";import{ButtonSizeType as a,ButtonVariantType as s}from"@/lib/designSystem/kubit/components/variants";import{useActiveBreakpoints as c}from"../../../../lib/hooks/useMediaDevice/useActiveBreakpoints.mjs";import{Popover as p}from"../../popover.mjs";const l=e=>{switch(e){case"center":return;case"top":return"top";case"right":return"right";case"left":return"left";case"bottom":return"bottom";default:return}};const h=h=>{const[g,f]=i(false);const[A,v]=i("center");const[m,E]=i({edgePadding:0,offsetDistance:[0,0]});const x=o(null);const P=()=>{f(false)};const u=e=>{v(e);f(true)};const D=()=>{E(e=>({...e,edgePadding:0===e.edgePadding?24:0}))};const{isMobile:b}=c();const{placement:R,...w}=h;const _=e=>{if(b&&"center"!==e)return{width:"100%"};switch(e){case"center":return{maxWidth:"500px",minWidth:"400px"};case"top":return{maxWidth:"90vw",minWidth:"300px"};case"right":return{maxWidth:"400px",minWidth:"300px"};case"left":return{maxWidth:"350px",minWidth:"250px"};case"bottom":return{maxWidth:"600px",minWidth:"200px"};default:return{}}};const y={bottom:"This popover is anchored to the bottom of the viewport. Perfect for action sheets, mobile menus, and keyboard-avoiding containers. (Width: 200px - 600px)",center:"This popover is centered in the viewport. This is the default positioning behavior and works well for dialogs and modals. (Width: 400px - 500px)",left:"This popover is anchored to the left edge of the viewport. Good for navigation menus or toolbars. (Width: 250px - 350px)",right:"This popover is anchored to the right edge of the viewport. Useful for side panels, contextual menus, or navigation drawers. (Width: 300px - 400px)",top:"This popover is anchored to the top of the viewport. Perfect for top notifications, banners, or alerts that need immediate attention. (Width: 300px - 90vw)"};return t("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e(r,{variant:d.PARAGRAPH_MEDIUM_EXTENDED,weight:700,children:"Popover Body Positioning"}),e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:"Without a specific anchor element (body by default), the popover can be positioned in different ways relative to the viewport with placement property."}),e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:"Uses an overlay with backdrop (overlay property) that darkens the background, and can be configured with a optional directional arrow with hasArrow property."}),e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:"When using the body as anchor, the popover can be positioned in different ways (placement prop). Select one of the options below to see how each position works."}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:[e("strong",{children:"Edge Padding:"})," This demo also showcases the"," ",e("code",{children:"edgePadding"})," option, which maintains distance from viewport edges to prevent the popover from touching the screen boundaries."]}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:[e("strong",{children:"Width and Height Control:"})," Each position demonstrates different width constraints. The popover content controls its own dimensions instead of the popover container having fixed constraints. Notice how each position has different sizing to show the flexibility."]}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:["For more information, check the"," ",e("a",{href:"?path=/docs/components-resources-Popover--docs",rel:"noopener noreferrer",style:{color:"#0066cc",textDecoration:"underline"},target:"_blank",children:"Documentation section"})," ","in Storybook."]}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:[e("strong",{children:"Edge Padding Demo:"})," Use the controls below to see how"," ",e("code",{children:"edgePadding"})," affects popover positioning relative to viewport edges."]}),t("div",{style:{backgroundColor:"#e8f4fd",borderRadius:"8px",display:"flex",flexDirection:"column",gap:"16px",padding:"20px"},children:[e(r,{variant:d.PARAGRAPH_MEDIUM_EXTENDED,children:e("strong",{children:"\uD83D\uDD27 Edge Padding Controls"})}),t("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[t("div",{style:{alignItems:"center",display:"flex",gap:"12px"},children:[e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:e("strong",{children:"Edge Padding:"})}),e(n,{size:a.SMALL,variant:m.edgePadding>0?s.PRIMARY:s.SECONDARY,onClick:D,children:m.edgePadding>0?"24px ON":"OFF"})]}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:["Current: ",m.edgePadding,"px -"," ",m.edgePadding>0?"✅ Maintains distance from viewport edges":"❌ Can touch viewport edges"]})]})]}),t("div",{style:{backgroundColor:"#fff9e6",border:"1px solid #ffd700",borderRadius:"8px",padding:"12px"},children:[e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:e("strong",{children:"\uD83D\uDD0D How edge padding work:"})}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:["1. ",e("strong",{children:"Edge Padding:"})," Always works - maintains distance from viewport edges"]})]}),t("div",{style:{backgroundColor:"#f5f5f5",borderRadius:"8px",display:"flex",flexDirection:"column",gap:"8px",justifyContent:"center",padding:"20px"},children:[e("div",{children:t(r,{variant:d.PARAGRAPH_MEDIUM_EXTENDED,children:[e("strong",{children:"Current Position:"})," ",A]})}),e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:"center"===A?"The popover will be centered on the screen.":"top"===A?"The popover will be anchored to the top of the screen.":"right"===A?"The popover will be anchored to the right edge of the screen.":"left"===A?"The popover will be anchored to the left edge of the screen.":"The popover will be anchored to the bottom of the screen."}),e("div",{style:{display:"flex",flexWrap:"wrap",gap:"16px",justifyContent:"center"},children:["center","top","right","left","bottom"].map(t=>e(n,{ref:"center"===t?x:void 0,size:a.LARGE,type:"button",variant:A===t?s.PRIMARY:s.SECONDARY,onClick:()=>u(t),children:"center"===t?"Center (Default)":t.charAt(0).toUpperCase()+t.slice(1)},t))})]}),e(p,{...w,middlewareOptions:m,open:g,placement:l(A),zIndex:800,onClose:P,children:t("div",{style:{backgroundColor:"white",border:"1px solid #e8e8e8",borderRadius:"8px",boxShadow:"0 6px 16px rgba(0, 0, 0, 0.12)",height:b&&"center"!==A?"100vh":"auto",padding:"24px",..._(A)},children:[t(r,{variant:d.HEADING_H3_EXTENDED,children:[A.charAt(0).toUpperCase()+A.slice(1)," Position"]}),e("div",{style:{backgroundColor:"#f9f9f9",border:"1px solid #f0f0f0",borderRadius:"6px",marginBottom:"20px",marginTop:"12px",padding:"12px"},children:e(r,{variant:d.PARAGRAPH_MEDIUM_EXTENDED,children:y[A]})}),t("div",{style:{backgroundColor:"#f0f8ff",border:"1px solid #d0e7ff",borderRadius:"6px",marginBottom:"20px",padding:"12px"},children:[e(r,{variant:d.PARAGRAPH_MEDIUM_EXTENDED,children:e("strong",{children:"\uD83D\uDD27 Current Edge Padding Configuration"})}),t("div",{style:{marginTop:"8px"},children:[t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:[e("strong",{children:"Edge Padding:"})," ",m.edgePadding,"px"," ",m.edgePadding>0?"✅ Active":"❌ Disabled"]}),e(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:m.edgePadding>0?`• Maintains ${m.edgePadding}px distance from viewport edges`:"• Popover can touch viewport edges"}),t(r,{variant:d.PARAGRAPH_SMALL_EXTENDED,children:[e("strong",{children:"Current Position:"})," ",A]})]})]}),e("div",{style:{display:"flex",justifyContent:"flex-end"},children:e(n,{size:a.LARGE,variant:s.PRIMARY,onClick:P,children:"Close"})})]})})]})};export{h as BodyPositionsDemo};

package/dist/esm/components/popover/stories/demos/popoverScrollBehaviorDemo.mjs

@@ -0,0 +1 @@
+import{Fragment as e,jsx as o,jsxs as l}from"react/jsx-runtime";import{flip as r,size as t}from"@floating-ui/dom";import{useRef as a,useState as n}from"react";import{Text as i}from"../../../text/text.mjs";import{ENTER as c,ESCAPE as s,SPACE as d}from"../../../../lib/constants/keyboardKeys/keyboardKeys.mjs";import{TextVariantType as p}from"@/lib/designSystem/kubit/components/text/variants";import{isKeyPressed as m}from"../../../../lib/utils/keyboard/keyboard.mjs";import{Popover as h}from"../../popover.mjs";const b=[{color:"#ef4444",label:"Red",value:"red"},{color:"#f97316",label:"Orange",value:"orange"},{color:"#eab308",label:"Yellow",value:"yellow"},{color:"#22c55e",label:"Green",value:"green"},{color:"#06b6d4",label:"Cyan",value:"cyan"},{color:"#3b82f6",label:"Blue",value:"blue"},{color:"#a855f7",label:"Purple",value:"purple"},{color:"#ec4899",label:"Pink",value:"pink"},{color:"#800000",label:"Maroon",value:"maroon"},{color:"#000000",label:"Black",value:"black"},{color:"#ffffff",label:"White",value:"white"}];const u={COLORS:{active:"#adb5bd",border:"#e9ecef",hover:"#f8f9fa",placeholder:"#6c757d",primary:"#f8f9fa",secondary:"#e9ecef",white:"white"},SIZES:{bottomBlock:"300px",contentBlock:"150px",dropdownMaxHeight:"320px",minSelectWidth:"100%"},SPACING:{large:"16px",medium:"12px",small:"8px",xlarge:"20px"}};const f=({children:e,height:l=u.SIZES.contentBlock})=>o("div",{style:{alignItems:"center",backgroundColor:u.COLORS.white,border:`1px solid ${u.COLORS.border}`,borderRadius:u.SPACING.medium,display:"flex",height:l,justifyContent:"center",padding:u.SPACING.medium},children:e});const g=({children:e,title:r})=>l("div",{children:[o(i,{variant:p.PARAGRAPH_MEDIUM_EXTENDED,weight:600,children:r}),o("div",{style:{backgroundColor:u.COLORS.primary,display:"flex",flexDirection:"column",gap:u.SPACING.small,height:"100%",justifyContent:"space-around",margin:`${u.SPACING.medium} 0`,padding:u.SPACING.xlarge},children:e})]});const S=({color:e})=>o("div",{style:{backgroundColor:e,border:"1px solid rgba(0, 0, 0, 0.2)",borderRadius:"50%",flexShrink:0,height:u.SPACING.large,width:u.SPACING.large}});const y=(e,o)=>{const l=l=>{if(m(l.key,c.key,d.key)){l.preventDefault();e()}if(m(l.key,...s.key))o()};const r=(e,o)=>{if(m(e.key,c.key,d.key)){e.preventDefault();o()}};return{handleOptionKeyDown:r,handleSelectKeyDown:l}};const v=c=>{const[s,d]=n(false);const[m,v]=n(null);const x=a(null);const C=()=>d(!s);const A=()=>d(false);const P=e=>{v(e);d(false)};const{handleOptionKeyDown:I,handleSelectKeyDown:k}=y(C,A);const w={alignItems:"center",backgroundColor:s?u.COLORS.secondary:u.COLORS.primary,borderColor:s?u.COLORS.active:u.COLORS.border,borderRadius:u.SPACING.small,borderStyle:"solid",borderWidth:"1px",cursor:"default",display:"flex",gap:u.SPACING.small,minWidth:u.SIZES.minSelectWidth,outline:"none",padding:`${u.SPACING.medium} ${u.SPACING.large}`,position:"relative",transition:"all 0.2s ease",userSelect:"none"};const R={alignItems:"center",borderRadius:"4px",cursor:"pointer",display:"flex",gap:u.SPACING.small,outline:"none",padding:`${u.SPACING.small} ${u.SPACING.medium}`,transition:"background-color 0.15s ease"};const E={fontSize:u.SPACING.medium,marginLeft:"auto",transform:s?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"};return l("div",{style:{display:"flex",flexDirection:"column",gap:u.SPACING.small},children:[l("div",{children:[o(i,{variant:p.PARAGRAPH_MEDIUM_EXTENDED,weight:700,children:"Popover Scroll Behavior Demo"}),o(i,{variant:p.PARAGRAPH_SMALL_EXTENDED,children:"This demo shows how the popover automatically repositions when there's not enough space below the trigger element. Try scrolling the page while the dropdown is open to see the behavior in action."})]}),o(g,{title:"Scroll down to test the behavior",children:o(f,{children:o(i,{variant:p.PARAGRAPH_SMALL_EXTENDED,children:"Content block - This content creates the scrollable area to demonstrate the popover repositioning behavior."})})}),l("div",{style:{alignItems:"center",display:"flex",flexDirection:"column",gap:u.SPACING.small,minHeight:"120px",padding:`${u.SPACING.xlarge} 0`},children:[o(i,{variant:p.PARAGRAPH_MEDIUM_EXTENDED,weight:600,children:"Select a color (the dropdown will reposition on scroll)"}),l("div",{ref:x,"aria-controls":"color-listbox","aria-expanded":s,"aria-haspopup":"listbox","aria-label":"Select a color",role:"combobox",style:w,tabIndex:0,onClick:C,onKeyDown:k,children:[m?l(e,{children:[o(S,{color:m.color}),o("span",{children:m.label})]}):o("span",{style:{color:u.COLORS.placeholder},children:"Select a color..."}),o("span",{style:E,children:"▼"})]}),o(h,{...c,anchorElement:x.current,disableAnimations:true,middlewares:[t({apply({elements:e,rects:o}){Object.assign(e.floating.style,{minWidth:`${o.reference.width}px`})}}),r()],open:s,placement:"bottom-start",onClose:A,children:o("div",{"aria-label":"Color options",id:"color-listbox",role:"listbox",style:{backgroundColor:u.COLORS.white,border:`1px solid ${u.COLORS.border}`,borderRadius:u.SPACING.small,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",maxHeight:u.SIZES.dropdownMaxHeight,overflowY:"auto",padding:"4px"},children:b.map(e=>{const r=m?.value===e.value;return l("div",{"aria-selected":r,className:"dropdown-option",role:"option",style:{...R,backgroundColor:r?u.COLORS.secondary:"transparent"},tabIndex:0,onClick:()=>P(e),onKeyDown:o=>I(o,()=>P(e)),onMouseDown:e=>e.preventDefault(),children:[o(S,{color:e.color}),o("span",{children:e.label}),r&&o("span",{style:{fontSize:"14px",marginLeft:"auto"},children:"✓"})]},e.value)})})})]}),o(g,{title:"More content below",children:o(f,{height:u.SIZES.bottomBlock,children:o(i,{variant:p.PARAGRAPH_SMALL_EXTENDED,children:"Bottom content block - Keep scrolling to see how the popover repositions itself when space becomes limited."})})})]})};export{v as ScrollBehaviorDemo};

package/dist/esm/components/popover/stories/demos/popoverWithAnchorElementDemo.mjs

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";const t=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"];const o=({anchorElRef:o,handlePlacementChange:n,placement:i})=>{const d={alignItems:"center",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 0 20px rgba(0, 0, 0, 0.05)",display:"flex",flexDirection:"column",padding:"20px",position:"relative"};const a={backgroundColor:"white",borderRadius:"8px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.03)",display:"grid",gap:"0px",gridTemplateColumns:"repeat(5, 1fr)",gridTemplateRows:"repeat(5, 1fr)",padding:"6px",position:"relative"};const l=r=>{switch(r){case"top-start":return{gridColumn:"2",gridRow:"1"};case"top":return{gridColumn:"3",gridRow:"1"};case"top-end":return{gridColumn:"4",gridRow:"1"};case"right-start":return{gridColumn:"5",gridRow:"2"};case"right":return{gridColumn:"5",gridRow:"3"};case"right-end":return{gridColumn:"5",gridRow:"4"};case"bottom-start":return{gridColumn:"2",gridRow:"5"};case"bottom":return{gridColumn:"3",gridRow:"5"};case"bottom-end":return{gridColumn:"4",gridRow:"5"};case"left-start":return{gridColumn:"1",gridRow:"2"};case"left":return{gridColumn:"1",gridRow:"3"};case"left-end":return{gridColumn:"1",gridRow:"4"};default:return{gridColumn:"3",gridRow:"3"}}};return r("div",{style:d,children:e("div",{style:a,children:[t.map(t=>r("div",{style:{...l(t),alignItems:"center",display:"flex",justifyContent:"center"},children:e("label",{style:{alignItems:"center",backgroundColor:i===t?"#f5f5f5":"white",border:i===t?"1px solid #1A1A1A":"1px solid #e0e0e0",borderRadius:"4px",boxShadow:i===t?"0 0 0 2px rgba(26, 26, 26, 0.1)":"none",cursor:"pointer",display:"flex",gap:"4px",padding:"4px 6px",transition:"all 0.2s ease",whiteSpace:"nowrap"},children:[r("input",{checked:i===t,name:"placement",style:{accentColor:"#DF2B51",cursor:"pointer",height:"14px",width:"14px"},type:"radio",value:t,onChange:n}),r("span",{style:{color:i===t?"#1A1A1A":"#767676",fontSize:"11px",fontWeight:i===t?500:400},children:t})]})},t)),r("div",{style:{cursor:"default",gridColumn:"3",gridRow:"3",pointerEvents:"none",position:"relative",transform:"scale(1)",transition:"all 0.2s ease"},children:r("div",{ref:o,style:{background:"rgb(223, 43, 81)",border:"2px dashed black",padding:"36px 24px"},children:r("p",{children:"AnchorEl"})})})]})})};const n=({placement:e})=>r("div",{style:{background:"#767676",border:"none",borderRadius:"4px",boxShadow:"0px 2px 8px 0px rgba(0, 0, 0, 0.25)",color:"#FFFFFF",fontSize:"14px",fontWeight:400,lineHeight:"20px",maxWidth:"180px",padding:"16px",position:"relative",textAlign:"center"},children:e});export{n as PopoverWithAnchorElementContent,o as RadioGroupPositions,t as placements};

package/dist/esm/components/popover/stories/notes.mjs

@@ -0,0 +1 @@
+import{jsx as n,jsxs as e}from"react/jsx-runtime";const t={text:[e("span",{children:["- Closes via Escape key (unless ",n("strong",{children:"disablePressEscapeClose"})," ","is true) or by clicking outside the popover content (handled by the"," ",n("strong",{children:"onClose"})," callback in the controlled component)."]},"note-1"),e("span",{children:["- Animations can be fully customized using the"," ",n("strong",{children:"animationConfig"})," prop, which allows configuring duration, timing functions, rotation, scaling, distance, and spring effects for smooth entrance and exit transitions."]},"note-2")],theme:"information"};const o={text:[e("span",{children:["This example demonstrates the ",n("strong",{children:"Popover"})," component positioned relative to a specific element."]},"note-1"),e("span",{children:["- Uses an ",n("strong",{children:"anchor element"})," (via the"," ",n("strong",{children:"anchorElement"})," prop) with various"," ",n("strong",{children:"placement"})," options to position the popover."]},"note-2"),e("span",{children:["- Features a directional ",n("strong",{children:"arrow"})," that points to the anchor element, creating a visual connection."]},"note-3"),n("span",{children:"- Doesn't include an overlay/backdrop, allowing interaction with elements behind the popover."},"note-4"),e("span",{children:["- Supports custom animations through the ",n("strong",{children:"animationConfig"})," ","prop for enhanced user experience with configurable entrance and exit effects."]},"note-5")],theme:"information"};const i={text:[e("span",{children:[n("strong",{children:"Note:"})," This is a behavioral demonstration and should not be used for accessibility testing as it may not meet all accessibility requirements."]},"note-1")],theme:"information"};const r={text:[n("span",{children:n("strong",{children:"Available Animation Methods:"})},"note-1"),e("span",{children:["- ",n("strong",{children:"createSpringAnimation(direction, config)"}),": Physics-based animations with realistic spring behavior. Directions: 'up', 'down', 'left', 'right'"]},"note-2"),e("span",{children:["- ",n("strong",{children:"customKeyframes"}),": Complete control using custom CSS animations for unique brand-specific effects"]},"note-3"),e("span",{children:["- ",n("strong",{children:"Built-in system"}),": Modify duration, distance, and timing without losing automatic entrance/exit handling"]},"note-4")],theme:"information"};export{r as popoverAnimationsNotes,t as popoverBodyLikeAnchorElementNotes,i as popoverScrollBehaviorNotes,o as popoverWithAnchorElementNotes};

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

@@ -1,5 +1,5 @@
 /**
- * PopoverV2 Styles Index
+ * Popover Styles Index
  * Imports all popover-related CSS files
  */
 

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

@@ -1,5 +1,5 @@
 /* ============================================= */
-/* PopoverV2 Arrow Styles */
+/* Popover Arrow Styles */
 /* ============================================= */
 
 /* Arrow base styles */

package/dist/esm/components/popover/styles/popover.css

@@ -1,5 +1,5 @@
 /**
- * PopoverV2 Main Styles
+ * Popover Main Styles
  * Contains animation logic and positioning styles
  */
 

package/dist/esm/components/popover/types/animation.mjs

@@ -0,0 +1 @@
+const t={ENTER:"enter",EXIT:"exit"};const e={CUSTOM:"custom",SIMPLE:"simple"};const n="center";const i=["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"];const o=[...i,"center"];const E={CUBIC_BEZIER:"cubic-bezier(0.16, 1, 0.3, 1)",EASE:"ease",EASE_IN:"ease-in",EASE_IN_OUT:"ease-in-out",EASE_IN_OUT_CUBIC:"cubic-bezier(0.645, 0.045, 0.355, 1)",EASE_OUT:"ease-out",EASE_OUT_BOUNCE:"cubic-bezier(0.68, -0.55, 0.265, 1.55)",LINEAR:"linear"};const a={animationDistanceInPx:0,animationRotationInDeg:0,delay:"0ms",duration:"500ms",iterationCount:1,opacityEnd:1,opacityStart:0,scaleStart:1,timingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",transformOrigin:"",type:e.SIMPLE};export{e as ANIMATION_CONFIG_TYPES,t as ANIMATION_TYPES,n as DEFAULT_PLACEMENT,a as DEFAULT_POPOVER_ANIMATION_CONFIG,E as PopoverAnimationTimingFunction,i as VALID_PLACEMENTS,o as VALID_PLACEMENTS_WITH_CENTER};

package/dist/esm/components/popover/types/index.mjs

@@ -0,0 +1 @@
+import{ANIMATION_CONFIG_TYPES as i,ANIMATION_TYPES as n,PopoverAnimationTimingFunction as o}from"./animation.mjs";export{i as ANIMATION_CONFIG_TYPES,n as ANIMATION_TYPES,o as PopoverAnimationTimingFunctions};

package/dist/esm/components/popover/utils/animation.utils.mjs

@@ -0,0 +1 @@
+import{convertDurationToNumber as t}from"../../../lib/hooks/useSwipeDown/utils/convertDurationToNumber.mjs";const n={bottom:"center bottom","bottom-end":"right bottom","bottom-start":"left bottom",center:"center center",left:"left center","left-end":"left bottom","left-start":"left top",right:"right center","right-end":"right bottom","right-start":"right top",top:"center top","top-end":"right top","top-start":"left top"};const e=(t,n)=>{if("enter"in t&&"exit"in t)return n?t.exit:t.enter;return t};const r=(t,e=n.center)=>t.transformOrigin&&""!==t.transformOrigin?t.transformOrigin:e;const o=(t,n)=>({end:n?t.opacityEnd:t.opacityStart,start:n?t.opacityStart:t.opacityEnd});const a=n=>{const e=t(n.duration);const r=t(n.delay);return e>0&&r>=0&&n.iterationCount>0&&n.opacityStart>=0&&n.opacityStart<=1&&n.opacityEnd>=0&&n.opacityEnd<=1&&n.scaleStart>0};const i=t=>1===t.scaleStart&&0===t.animationRotationInDeg;const s=t=>0===t.animationDistanceInPx?"100%":`${t.animationDistanceInPx}px`;const l={down:{axis:"Y",enterFrom:t=>`translateY(-${t})`,exitTo:t=>`translateY(${t})`,neutral:"translateY(0)"},fade:{axis:null,enterFrom:()=>"",exitTo:()=>"",neutral:""},left:{axis:"X",enterFrom:t=>`translateX(-${t})`,exitTo:t=>`translateX(-${t})`,neutral:"translateX(0)"},right:{axis:"X",enterFrom:t=>`translateX(${t})`,exitTo:t=>`translateX(${t})`,neutral:"translateX(0)"},up:{axis:"Y",enterFrom:t=>`translateY(${t})`,exitTo:t=>`translateY(-${t})`,neutral:"translateY(0)"}};const c=(t,n,e)=>{const r=s(t);const o=l[n];return{end:e?o.neutral:o.exitTo(r),start:e?o.enterFrom(r):o.neutral}};const m=t=>{const n={bottom:"translateX(-50%)","bottom-end":"","bottom-start":"",center:"translate(-50%, -50%)",left:"translateY(-50%)","left-end":"","left-start":"",right:"translateY(-50%)","right-end":"","right-start":"",top:"translateX(-50%)","top-end":"","top-start":""};return n[t]||""};const f=(t,n,e=[])=>{const r=[t,n,...e].filter(Boolean).join(" ");return r};const g=(t,n="",e=false,r=false,o)=>{const a=o?m(o):"";if(i(t))return f(a,n);const s=e?1:t.scaleStart;const l=e?0:r?-t.animationRotationInDeg:t.animationRotationInDeg;const c=[`scale(${s})`,`rotate(${l}deg)`].filter(Boolean);return f(a,n,c)};export{n as PLACEMENT_TRANSFORM_ORIGINS,l as TRANSFORM_CONFIGURATIONS,f as combineTransforms,g as generateTransform,o as getAnimationOpacities,m as getPositioningTransforms,s as getSlideDistance,c as getSlideTransforms,r as getTransformOrigin,i as isDefaultTransforms,e as resolveAnimationConfig,a as validateAnimationConfig};

package/dist/esm/components/popover/utils/placement.utils.mjs

@@ -0,0 +1 @@
+import{DEFAULT_PLACEMENT as t,VALID_PLACEMENTS as r}from"../types/animation.mjs";const i=r=>{if(!r)return t;if(r.startsWith("top"))return"top";if(r.startsWith("bottom"))return"bottom";if(r.startsWith("left"))return"left";if(r.startsWith("right"))return"right";return t};const e=t=>{const r=["fade"];if(t.startsWith("top")||t.startsWith("bottom"))return[...r,"up","down"];if(t.startsWith("left")||t.startsWith("right"))return[...r,"left","right"];return[...r,"up","down","left","right"]};const n=e=>{if(!e)return t;if(r.includes(e))return e;return i(e)};export{e as getAvailableDirections,i as getPlacementDirection,n as normalizeToValidPlacement};

package/dist/esm/components/popover/utils/styling.utils.mjs

@@ -0,0 +1 @@
+import{getPlacementDirection as r}from"./placement.utils.mjs";const o={bottom:r=>({borderLeft:r,borderTop:r}),left:r=>({borderRight:r,borderTop:r}),right:r=>({borderBottom:r,borderLeft:r}),top:r=>({borderBottom:r,borderRight:r})};const t=(t,e)=>{if(!e)return{};const i={"--arrow-size":`${e.size}px`,backgroundColor:e.backgroundColor,height:`${e.size}px`,width:`${e.size}px`};if(e.border){const b=r(t);const d=o[b];if(d)Object.assign(i,d(e.border))}return i};export{t as getArrowBorderStyles};

package/dist/esm/components/portal/index.mjs

@@ -0,0 +1 @@
+import{Portal as o}from"./portal.mjs";export{o as Portal};

package/dist/esm/components/portal/portal.mjs

@@ -0,0 +1 @@
+import{createPortal as t}from"react-dom";const e=t=>{const e=document.createElement("div");e.setAttribute("id",t);document.body.appendChild(e);return e};const o=({children:o,wrapperId:d})=>{let n=document.body;if(d){n=document.getElementById(d);if(!n)n=e(d)}return t(o,n)};export{o as Portal};

package/dist/esm/components/progressBar/index.mjs

@@ -0,0 +1 @@
+import{ProgressBar as r}from"./progressBar.mjs";export{r as ProgressBar};

package/dist/esm/components/progressBar/progressBar.mjs

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

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

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

package/dist/esm/components/radioButton/index.mjs

@@ -0,0 +1 @@
+import{RadioButton as o}from"./radioButton.mjs";import{RadioButtonStandAlone as t}from"./radioButtonStandAlone.mjs";export{o as RadioButton,t as RadioButtonStandAlone};

package/dist/esm/components/radioButton/radioButton.mjs

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

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

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

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

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

package/dist/esm/components/radioButton/utils/index.mjs

@@ -0,0 +1 @@
+export*from"./aria.utils.mjs";export*from"./state.utils.mjs";

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

@@ -0,0 +1 @@
+import{STATES as t}from"../../../lib/types/states/states.mjs";const e=(e=false,r=false,E=false)=>{const s=E;const n=r;const f=e;if(s&&!f)return t.ERROR;if(s&&f)return t.ERROR_SELECTED;if(n&&!f)return t.DISABLED;if(n&&f)return t.DISABLED_SELECTED;if(f)return t.SELECTED;return t.DEFAULT};export{e as getState};

package/dist/esm/components/select/index.mjs

@@ -0,0 +1 @@
+import{SelectControlled as e}from"./selectControlled.mjs";import{Select as o}from"./selectUncontrolled.mjs";export{o as Select,e as SelectControlled};

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

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

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

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