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

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

@@ -0,0 +1,10 @@
+/**
+ * Popover 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/esm/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/esm/components/popover/styles/popover-arrow.css

@@ -0,0 +1,42 @@
+/* ============================================= */
+/* Popover 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);
+}