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

package/dist/esm/components/calendar/list/list.js

@@ -1,2 +1,2 @@
 import{j as t}from"../../../_virtual/jsx-runtime.js";import{useState as e,useMemo as s}from"react";import{CustomComponent as a}from"../../../lib/components/customComponent/customComponent.js";import{useRoveFocus as o}from"../../../lib/hooks/useRoveFocus/useRoveFocus.js";import{useUtilsProvider as r}from"../../../lib/provider/utilsProvider/utilsProvider.js";import{STATES as i}from"../../../lib/types/states/states.js";import{pickCustomAttributes as n}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{WEEK_DAYS as l}from"../constants/constants.js";import{getAllDaysInMonth as d}from"../utils/getAllDaysInMonth.js";import{getFirstDayOfMonth as m}from"../utils/getFirstDayOfMonth.js";import{getStateDay as c}from"../utils/getState.js";import{groupDaysByWeeks as u}from"../utils/groupDaysByWeeks.js";import{getFirstEmptyAndDisabledDays as y,getDaysAndEmptyDaysUntilMaxDate as D,handleKeyUpMove as f,handleKeyTabMove as g,handleKeyRightMove as p,handleKeyPageUpMove as h,handleKeyPageDownMove as b,handleKeyLeftMove as j,handleKeyDownMove as v}from"../utils/handleKeysmoves.js";const k="ddMMyyyy",M=({cssClasses:M,currentDate:S,disabledDates:x=[],hasRange:w,maxDate:$,minDate:A,onDayClick:C,selectedDate:E,setSelectedDate:F,sundayFirst:R,...I})=>{const{dateHelpers:L,formatDate:N,transformDate:B}=r(),P=S.getMonth()+1,T=S.getFullYear(),U=N(/* @__PURE__ */new Date,k),z=d(P,T),O=m(T,P-1)-(R?0:1),q=[...new Array(O>=0?O:6),...z],G=q.filter(t=>void 0===t),[H,K]=e(0),[W,Y]=e(0),_=I["data-testid"]||"calendar",J={currentDate:S,dayList:q,daysAndEmptyDaysUntilMaxDate:D(G,$,S),firstEmptyAndDisabledDays:y(G,A,S),maxDate:$,minDate:A},Q=s(()=>({calendarBlankDaysSize:G.length,currentFocusSelected:(E[0]?E[0].getDate():/* @__PURE__ */(new Date).getDate())+G.length-1,keyDownMove:v(J),keyLeftMove:j(J),keyPageDownMove:b(J),keyPageUpMove:h(J),keyRightMove:p(J),keyTabMove:g,keyUpMove:f(J),size:q.length}),[G.length,q.length,S,A,$]),[V,X,Z]=o(Q),tt=t=>(t&&(V<G.length&&X(G.length),V>q.length&&X(q.length-1)),V===t),et=t=>{if(W){if(W<E[0])return t>W&&t<E[0];if(W>E[0])return t<W&&t>E[0]}else{if(t>E[0])return t<E[1];if(t<E[0])return t>E[1]}return!1},st=t=>{if(!w)return!1;const e=E?.findIndex(e=>e&&t&&N(e,k)===N(t,k));return 0===e&&W?W<t:0===e?t>E[1]:1===e&&t>E[0]},at=t=>{if(!w)return!1;const e=E?.findIndex(e=>e&&t&&N(e,k)===N(t,k));return 0===e&&W?W>t:0===e?t<E[1]:1===e&&t<E[0]};/* @__PURE__ */
-return t.jsx("tbody",{ref:Z,className:M?.tbody,"data-testid":"tbody-days-list",children:u(q).map((e,s)=>/* @__PURE__ */t.jsx("tr",{className:M?.tablerow,children:e.map((e,o)=>{const r=e||0;let d=!e||L.isBefore(e,A)||L.isAfter(e,B(N($,k),k));d||(d=x.some(t=>e&&L.isDatesEqual(e,t,!1)));const m=c({dayFormatted:r,formatDate:N,hasRange:w,isGhostSelected:et,isSelectedToLeft:st,isSelectedToRight:at,selectedDate:E,today:U}),u={"data-state":d?i.DISABLED:m};return e?/* @__PURE__ */t.jsx("td",{"aria-selected":m===i.SELECTED||void 0,className:M?.listelementrove,style:{width:`calc(100% / ${l})`},...n(u),children:/* @__PURE__ */t.jsx(a,{"aria-label":N(e,{day:"numeric",month:"long",weekday:"long",year:"numeric"}),ariaDisabled:d,className:M?.dayslist,component:"button","data-testid":`${_}-${o+l*s}`,focus:tt(o+l*s),index:o+l*s,type:"button",onMouseOver:()=>{1===H&&Y(r)},onSelectItem:()=>{d||(t=>{const[e,s]=E;w?e&&s||!e&&!s?(F([t,0]),K(1),t instanceof Date&&C?.(t.getDate().toString())):(F([e,t]),K(0),t instanceof Date&&C?.(t.getDate().toString())):(F([t]),t instanceof Date&&C?.(t.getDate().toString()))})(r)},...n(u),children:e.getDate()})},`day${o+l*s}${r}`):/* @__PURE__ */t.jsx("td",{"aria-hidden":!0,"aria-label":"empty day",className:M?.listelementempty,style:{width:`calc(100% / ${l})`}},`day${o+l*s}${r}`)})},`table-row-${s.toString()}`))})};export{M as List};
+return t.jsx("tbody",{ref:Z,className:M?.tbody,"data-testid":"tbody-days-list",children:u(q).map((e,s)=>/* @__PURE__ */t.jsx("tr",{className:M?.tablerow,children:e.map((e,o)=>{const r=e||0;let d=!e||L.isBefore(e,A)||L.isAfter(e,B(N($,k),k));d||(d=x.some(t=>e&&L.isDatesEqual(e,t,!1)));const m=c({dayFormatted:r,formatDate:N,hasRange:w,isGhostSelected:et,isSelectedToLeft:st,isSelectedToRight:at,selectedDate:E,today:U}),u={"data-state":d?i.DISABLED:m};return e?/* @__PURE__ */t.jsx("td",{"aria-selected":m===i.SELECTED||void 0,className:M?.listelementrove,style:{width:`calc(100% / ${l})`},...n(u),children:/* @__PURE__ */t.jsx(a,{"aria-disabled":d,"aria-label":N(e,{day:"numeric",month:"long",weekday:"long",year:"numeric"}),className:M?.dayslist,component:"button","data-testid":`${_}-${o+l*s}`,focus:tt(o+l*s),index:o+l*s,type:"button",onMouseOver:()=>{1===H&&Y(r)},onSelectItem:()=>{d||(t=>{const[e,s]=E;w?e&&s||!e&&!s?(F([t,0]),K(1),t instanceof Date&&C?.(t.getDate().toString())):(F([e,t]),K(0),t instanceof Date&&C?.(t.getDate().toString())):(F([t]),t instanceof Date&&C?.(t.getDate().toString()))})(r)},...n(u),children:e.getDate()})},`day${o+l*s}${r}`):/* @__PURE__ */t.jsx("td",{"aria-hidden":!0,"aria-label":"empty day",className:M?.listelementempty,style:{width:`calc(100% / ${l})`}},`day${o+l*s}${r}`)})},`table-row-${s.toString()}`))})};export{M as List};

package/dist/esm/components/calendar/selector/monthSelector/monthSelector.js

@@ -1,3 +1,3 @@
 import{j as t}from"../../../../_virtual/jsx-runtime.js";import{useMemo as e}from"react";import{Text as o}from"../../../text/text.js";import{CustomComponent as s}from"../../../../lib/components/customComponent/customComponent.js";import{useRoveFocus as r}from"../../../../lib/hooks/useRoveFocus/useRoveFocus.js";import{useUtilsProvider as a}from"../../../../lib/provider/utilsProvider/utilsProvider.js";import{STATES as n}from"../../../../lib/types/states/states.js";import{pickCustomAttributes as l}from"../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{setMonth as i}from"../../utils/setMonth.js";import{keyUpMove as m,keyTabMove as c,keyRightMove as u,keyLeftMove as p,keyDownMove as h}from"./utils/monthSelector.utils.js";const d=({configAccesibility:d,cssClasses:g,currentDate:D,maxDate:b,minDate:M,onMonthClick:f,setCurrentDate:j,today:v,...A})=>{const{dateHelpers:C,transformDate:x}=a(),y=A["data-testid"]||"calendar",E={currentDate:D,maxDate:b,minDate:M},k=e(()=>({currentFocusSelected:D?D.getMonth():/* @__PURE__ */(new Date).getMonth(),keyDownMove:h(E),keyLeftMove:p(E),keyRightMove:u(E),keyTabMove:c,keyUpMove:m(E),size:C.getAllMonthName("long").length}),[C.getAllMonthName("long").length,D]),[S,,F]=r(k),L=t=>{const e=D?.getFullYear();return M?.getFullYear()===e&&M?.getMonth()>t||b?.getFullYear()===e&&b?.getMonth()<t};/* @__PURE__ */
 return t.jsx("ul",{ref:F,"aria-label":d?.monthSelectorAriaLabel,className:g?.monthslist,"data-testid":"tbody-months-list",children:C.getAllMonthName("long",A.locale).map((e,r)=>{const a=((t,e,o)=>{let s;return s=t.getMonth()===e?n.SELECTED:e===v.getMonth()?n.CURRENT:o?n.DISABLED:n.DEFAULT,s})(D,r,L(r)),m={"data-state":L(r)?n.DISABLED:a};/* @__PURE__ */
-return t.jsx("li",{"aria-selected":a===n.SELECTED||void 0,className:g?.monthlistitem,...l(m),children:/* @__PURE__ */t.jsx(s,{"aria-label":e.charAt(0).toUpperCase()+e.slice(1),ariaDisabled:L(r),className:g?.monthelement,component:"button",focus:S===r,index:r,type:"button",...l(m),onSelectItem:()=>{const t=new Date(D);j(x(i(t,r))),f?.(e)},children:/* @__PURE__ */t.jsx(o,{component:"span","data-testid":y,children:e.charAt(0).toUpperCase()+e.slice(1)})})},e)})})};export{d as MonthSelector};
+return t.jsx("li",{"aria-selected":a===n.SELECTED||void 0,className:g?.monthlistitem,...l(m),children:/* @__PURE__ */t.jsx(s,{"aria-disabled":L(r),"aria-label":e.charAt(0).toUpperCase()+e.slice(1),className:g?.monthelement,component:"button",focus:S===r,index:r,type:"button",...l(m),onSelectItem:()=>{const t=new Date(D);j(x(i(t,r))),f?.(e)},children:/* @__PURE__ */t.jsx(o,{component:"span","data-testid":y,children:e.charAt(0).toUpperCase()+e.slice(1)})})},e)})})};export{d as MonthSelector};

package/dist/esm/components/image/image.css

@@ -1,38 +1 @@
-:root {
-  --border-radius: 0;
-  --fallback-ratio: 1;
-  --object-fit: cover;
-  --ratio: 1;
-  --width: 100%;
-}
-
-.kbt-picture {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
-  width: var(--width);
-  aspect-ratio: var(--ratio);
-}
-
-@supports not (aspect-ratio: 16 / 9) {
-  .kbt-picture {
-    padding-top: var(--fallback-ratio);
-  }
-
-  .kbt-picture img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: auto;
-  }
-}
-
-.kbt-picture img {
-  max-width: 100%;
-  border-radius: var(--border-radius);
-  object-fit: var(--object-fit);
-  aspect-ratio: var(--ratio);
-}
+:root{--border-radius:0;--fallback-ratio:1;--object-fit:cover;--ratio:1;--width:100%}.kbt-picture{aspect-ratio:var(--ratio);display:inline-block;max-height:100%;max-width:100%;overflow:hidden;position:relative;width:var(--width)}@supports not (aspect-ratio:16/9){.kbt-picture{padding-top:var(--fallback-ratio)}.kbt-picture img{height:auto;left:0;position:absolute;top:0;width:100%}}.kbt-picture img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);max-width:100%;object-fit:var(--object-fit)}

package/dist/esm/components/listOptions/listOptionsStandAlone.js

@@ -1,2 +1,2 @@
 import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,useMemo as e,useId as i,useImperativeHandle as s}from"react";import{Text as n}from"../text/text.js";import{useRoveFocus as l}from"../../lib/hooks/useRoveFocus/useRoveFocus.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processText as c}from"../../lib/utils/process/processText/processText.js";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{Option as p}from"../option/option.js";import{keyUpMove as d,keyDownMove as m,isSelected as u,getOptionVariant as h}from"./utils/listOptions.utils.js";const v=o(({caseSensitive:o,charsHighlighted:v,checkedIcon:g,content:b,cssClasses:j,highlightedOptionVariant:x,id:k,index:f=0,listComponent:C,multiSelect:$,onOptionClick:y,options:S,optionsContainerArias:F,roveFocus:M,selectedValue:O,title:A,type:I="selection",...N},R)=>{const T=N["data-testid"]??"list-options",V=r(N),H=e(()=>({currentFocusSelected:-1,keyDownMove:m(S),keyLeftMove:0,keyRightMove:0,keyTabMove:null,keyUpMove:d,size:S.length}),[S]),[L,_,w]=l(M??H),z=i();s(R,()=>w.current,[w]);const D=k??z,U="selection"===I,q="navigation"===I,B=S&&S.length>0;/* @__PURE__ */
-return t.jsxs("div",{className:j?.list_options,"data-testid":T,...V,children:[!!A&&S.length>0&&/* @__PURE__ */t.jsx("div",{className:j?.titlecontainer,children:/* @__PURE__ */t.jsx(n,{additionalClasses:{text:j?.title},...c(A)})}),b,B&&/* @__PURE__ */t.jsx(a,{ref:w,"aria-label":F?.["aria-label"],"aria-labelledby":F?.["aria-labelledby"],className:j?.optionscontainer,component:C??"ul",id:D,role:U?"listbox":void 0,children:S.map((e,i)=>{const s=u(e,O,$,o),n=`${T}-section-${f}-option-${i}`,l=/* @__PURE__ */t.jsx(p,{"aria-current":q?s:void 0,"aria-selected":U?s:void 0,checkedIcon:g,component:q?"div":"li","data-testid":n,focus:L===i,labelCharsHighlighted:v,multiSelect:$,role:U?"option":void 0,selected:s,tabIndex:q?0:-1,variant:h(e.highlighted,x,N?.optionVariant),...e,onClick:t=>{_(i),y?.(e.value,t),e.onClick?.(t)},onFocus:t=>{i!==L&&_(i),e.onFocus?.(t)}},`${D}Option-${f.toString()}-${i.toString()}`);return"selection"===I?/* @__PURE__ */t.jsx("li",{children:l},`${D}LiOption-${f.toString()}-${i.toString()}`):l})})]})});export{v as ListOptionsStandAlone};
+return t.jsxs("div",{className:j?.list_options,"data-testid":T,...V,children:[!!A&&S.length>0&&/* @__PURE__ */t.jsx("div",{className:j?.titlecontainer,children:/* @__PURE__ */t.jsx(n,{additionalClasses:{text:j?.title},...c(A)})}),b,B&&/* @__PURE__ */t.jsx(a,{ref:w,"aria-label":F?.["aria-label"],"aria-labelledby":F?.["aria-labelledby"],className:j?.optionscontainer,component:C??"ul",id:D,role:U?"listbox":void 0,children:S.map((e,i)=>{const s=u(e,O,$,o),n=`${T}-section-${f}-option-${i}`,l=U||q?"div":"li",r=/* @__PURE__ */t.jsx(p,{"aria-current":q?s:void 0,"aria-selected":U?s:void 0,checkedIcon:g,component:l,"data-testid":n,focus:L===i,labelCharsHighlighted:v,multiSelect:$,role:U?"option":void 0,selected:s,tabIndex:q?0:-1,variant:h(e.highlighted,x,N?.optionVariant),...e,onClick:t=>{_(i),y?.(e.value,t),e.onClick?.(t)},onFocus:t=>{i!==L&&_(i),e.onFocus?.(t)}},`${D}Option-${f.toString()}-${i.toString()}`);return"selection"===I?/* @__PURE__ */t.jsx("li",{children:r},`${D}LiOption-${f.toString()}-${i.toString()}`):r})})]})});export{v as ListOptionsStandAlone};

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

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

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

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

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

@@ -1,421 +1 @@
-/**
- * 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;
-}
+@keyframes popover-enter-center{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popover-exit-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@keyframes popover-enter-top{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-top{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}@keyframes popover-enter-top-start{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-top-end{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-bottom{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-bottom{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(20px)}}@keyframes popover-enter-bottom-start{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-bottom-end{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-left{0%{opacity:0;transform:translateY(-50%) translateX(-20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-left{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(-20px)}}@keyframes popover-enter-left-start{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-left-end{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-right{0%{opacity:0;transform:translateY(-50%) translateX(20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-right{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(20px)}}@keyframes popover-enter-right-start{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}@keyframes popover-enter-right-end{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}.popover-animate{animation-duration:.2s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.16,1,.3,1)}.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}.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

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