@kubit-ui-web/react-components 2.0.0-beta.2 → 2.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (285) hide show
  1. package/README.md +17 -28
  2. package/dist/cjs/_virtual/jsx-runtime.js +1 -1
  3. package/dist/cjs/components/accordion/accordionStandAlone.js +1 -1
  4. package/dist/cjs/components/alert/alertControlled.js +1 -0
  5. package/dist/cjs/components/alert/alertStandAlone.js +1 -0
  6. package/dist/cjs/components/alert/index.js +2 -0
  7. package/dist/cjs/components/avatar/fragments/drawContent.js +1 -1
  8. package/dist/cjs/components/badge/badgeStandAlone.js +1 -1
  9. package/dist/cjs/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +1 -1
  10. package/dist/cjs/components/button/button.js +1 -1
  11. package/dist/cjs/components/button/buttonStandAlone.js +1 -1
  12. package/dist/cjs/components/calendar/list/list.js +1 -1
  13. package/dist/cjs/components/calendar/selector/monthSelector/monthSelector.js +1 -1
  14. package/dist/cjs/components/calendar/selector/selector.js +1 -1
  15. package/dist/cjs/components/cardImage/cardImageStandAlone.js +1 -1
  16. package/dist/cjs/components/carousel/hooks/useCarousel.js +1 -1
  17. package/dist/cjs/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
  18. package/dist/cjs/components/carousel/hooks/useCarouselSwipe.js +1 -1
  19. package/dist/cjs/components/carousel/hooks/utils/calc.utils.js +1 -1
  20. package/dist/cjs/components/carousel/hooks/utils/dom.utils.js +1 -1
  21. package/dist/cjs/components/checkbox/checkboxStandAlone.js +1 -1
  22. package/dist/cjs/components/checkboxBase/checkboxBaseStandAlone.js +1 -1
  23. package/dist/cjs/components/chip/chipStandAlone.js +1 -1
  24. package/dist/cjs/components/container/containerStandAlone.js +1 -1
  25. package/dist/cjs/components/dataTable/dataTableStandAlone.js +1 -1
  26. package/dist/cjs/components/dataTable/hooks/useDataTableHasScroll.js +1 -1
  27. package/dist/cjs/components/dataTable/hooks/useDataTableShadow.js +1 -1
  28. package/dist/cjs/components/dataTable/hooks/useDataTableStickyDividers.js +1 -1
  29. package/dist/cjs/components/dataTable/hooks/useDataTableStickyLeftColumns.js +1 -1
  30. package/dist/cjs/components/dataTable/hooks/useDataTableStickyRightColumns.js +1 -1
  31. package/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.js +1 -1
  32. package/dist/cjs/components/dropdownSelected/dropdownSelectedStandAlone.js +1 -1
  33. package/dist/cjs/components/image/image.css +1 -38
  34. package/dist/cjs/components/input/input.js +1 -1
  35. package/dist/cjs/components/input/inputStandAlone.js +1 -1
  36. package/dist/cjs/components/inputBase/inputBase.js +1 -1
  37. package/dist/cjs/components/inputDecoration/inputDecorationStandAlone.js +1 -1
  38. package/dist/cjs/components/inputSignature/inputSignatureStandAlone.js +1 -1
  39. package/dist/cjs/components/label/labelStandAlone.js +1 -1
  40. package/dist/cjs/components/link/linkStandAlone.js +1 -1
  41. package/dist/cjs/components/listOptions/listOptionsStandAlone.js +1 -1
  42. package/dist/cjs/components/modal/fragments/modalHeader.js +1 -1
  43. package/dist/cjs/components/modal/modalControlled.js +1 -1
  44. package/dist/cjs/components/modal/modalStandAlone.js +1 -1
  45. package/dist/cjs/components/modal/modalUnControlled.js +1 -1
  46. package/dist/cjs/components/option/optionStandAlone.js +1 -1
  47. package/dist/cjs/components/pageControl/components/arrowControlStandAlone.js +1 -1
  48. package/dist/cjs/components/pageControl/components/controls.js +1 -1
  49. package/dist/cjs/components/pageControl/pageControlStandAlone.js +1 -1
  50. package/dist/cjs/components/pagination/fragments/paginationButtonControl.js +1 -1
  51. package/dist/cjs/components/popover/hooks/positioning/middlewareUtils.js +1 -1
  52. package/dist/cjs/components/popover/hooks/usePopoverInteractions.js +1 -1
  53. package/dist/cjs/components/popover/hooks/usePopoverLifecycle.js +1 -1
  54. package/dist/cjs/components/popover/hooks/usePopoverPositioning.js +1 -1
  55. package/dist/cjs/components/popover/popover.js +1 -1
  56. package/dist/cjs/components/popover/styles/index.css +1 -10
  57. package/dist/cjs/components/popover/styles/keyframes.css +1 -421
  58. package/dist/cjs/components/popover/styles/popover-arrow.css +1 -42
  59. package/dist/cjs/components/popover/styles/popover.css +1 -189
  60. package/dist/cjs/components/progressBar/progressBarStandAlone.js +1 -1
  61. package/dist/cjs/components/radioButton/radioButtonStandAlone.js +1 -1
  62. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileAnimation.js +1 -1
  63. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +1 -1
  64. package/dist/cjs/components/selectorBoxFile/selectorBoxFile.js +1 -1
  65. package/dist/cjs/components/selectorBoxFile/selectorBoxFileStandAlone.js +1 -1
  66. package/dist/cjs/components/skeleton/skeleton.css +1 -20
  67. package/dist/cjs/components/slider/components/sliderHelperTextStandAlone.js +1 -1
  68. package/dist/cjs/components/slider/components/sliderScaleStandAlone.js +1 -1
  69. package/dist/cjs/components/slider/components/sliderThumbStandAlone.js +1 -1
  70. package/dist/cjs/components/slider/sliderStandAlone.js +1 -1
  71. package/dist/cjs/components/stepperNumber/stepperNumberStandAlone.js +1 -1
  72. package/dist/cjs/components/table/hooks/useTableHasScroll.js +1 -1
  73. package/dist/cjs/components/table/hooks/useTableShadow.js +1 -1
  74. package/dist/cjs/components/table/hooks/useTableStickyLeftColumns.js +1 -1
  75. package/dist/cjs/components/table/hooks/useTableStickyRightColumns.js +1 -1
  76. package/dist/cjs/components/tabs/tabsStandAlone.js +1 -1
  77. package/dist/cjs/components/tag/tagStandAlone.js +1 -1
  78. package/dist/cjs/components/text/text.css +1 -14
  79. package/dist/cjs/components/text/textStandAlone.js +1 -1
  80. package/dist/cjs/components/textArea/components/errorStandAlone.js +1 -1
  81. package/dist/cjs/components/textArea/components/helpMessageStandAlone.js +1 -1
  82. package/dist/cjs/components/textArea/components/titleStandAlone.js +1 -1
  83. package/dist/cjs/components/textArea/textAreaStandAlone.js +1 -1
  84. package/dist/cjs/components/toggle/toggleStandAlone.js +1 -1
  85. package/dist/cjs/components/tooltip/hooks/useTooltip.js +1 -1
  86. package/dist/cjs/components/tooltip/tooltip.css +1 -69
  87. package/dist/cjs/components/tooltip/tooltipControlled.js +1 -1
  88. package/dist/cjs/components/tooltip/tooltipStandAlone.js +1 -1
  89. package/dist/cjs/components/tooltip/tooltipUnControlled.js +1 -1
  90. package/dist/cjs/components/virtualKeyboard/virtualKeyboardStandAlone.js +1 -1
  91. package/dist/cjs/index.js +1 -1
  92. package/dist/cjs/lib/components/customComponent/customComponent.js +1 -1
  93. package/dist/cjs/lib/components/elementOrIcon/elementOrIcon.js +1 -0
  94. package/dist/cjs/lib/components/errorMessage/errorMessageStandAlone.js +1 -1
  95. package/dist/cjs/lib/components/itemRove/itemRove.js +1 -0
  96. package/dist/cjs/lib/components/overlay/overlay.js +1 -0
  97. package/dist/cjs/lib/components/overlay/overlayStandAlone.js +1 -0
  98. package/dist/cjs/lib/designSystem/kubit/css/kubit.css +1 -0
  99. package/dist/cjs/lib/designSystem/kubit/css/kubit.min.css +1 -0
  100. package/dist/cjs/lib/hooks/useClickOutside/useClickOutside.js +1 -1
  101. package/dist/cjs/lib/hooks/useContentVisibility/useContentVisibility.js +1 -1
  102. package/dist/cjs/lib/hooks/useManageState/useManageState.js +1 -1
  103. package/dist/cjs/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
  104. package/dist/cjs/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
  105. package/dist/cjs/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
  106. package/dist/cjs/lib/provider/cssProvider/provider.js +1 -1
  107. package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1641
  108. package/dist/cjs/lib/provider/stylesProvider/stylesProvider.js +1 -1
  109. package/dist/cjs/lib/storybook/components/divider/divider.css +1 -0
  110. package/dist/cjs/lib/storybook/components/note/styles.css +1 -0
  111. package/dist/cjs/lib/utils/keyboard/keyboard.js +1 -1
  112. package/dist/cjs/lib/utils/process/processCommonProp.js +1 -0
  113. package/dist/cjs/react-components.css +1 -1
  114. package/dist/esm/_virtual/jsx-runtime.js +1 -1
  115. package/dist/esm/components/accordion/accordionStandAlone.js +4 -4
  116. package/dist/esm/components/alert/alertControlled.js +2 -0
  117. package/dist/esm/components/alert/alertStandAlone.js +2 -0
  118. package/dist/esm/components/alert/index.js +1 -0
  119. package/dist/esm/components/avatar/fragments/drawContent.js +1 -4
  120. package/dist/esm/components/badge/badgeStandAlone.js +7 -9
  121. package/dist/esm/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +3 -6
  122. package/dist/esm/components/button/button.js +1 -1
  123. package/dist/esm/components/button/buttonStandAlone.js +3 -5
  124. package/dist/esm/components/calendar/list/list.js +1 -1
  125. package/dist/esm/components/calendar/selector/monthSelector/monthSelector.js +1 -1
  126. package/dist/esm/components/calendar/selector/selector.js +7 -9
  127. package/dist/esm/components/cardImage/cardImageStandAlone.js +7 -7
  128. package/dist/esm/components/carousel/hooks/useCarousel.js +1 -1
  129. package/dist/esm/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
  130. package/dist/esm/components/carousel/hooks/useCarouselSwipe.js +1 -1
  131. package/dist/esm/components/carousel/hooks/utils/calc.utils.js +1 -1
  132. package/dist/esm/components/carousel/hooks/utils/dom.utils.js +1 -1
  133. package/dist/esm/components/checkbox/checkboxStandAlone.js +5 -7
  134. package/dist/esm/components/checkboxBase/checkboxBaseStandAlone.js +4 -4
  135. package/dist/esm/components/chip/chipStandAlone.js +8 -9
  136. package/dist/esm/components/container/containerStandAlone.js +4 -4
  137. package/dist/esm/components/dataTable/dataTableStandAlone.js +10 -14
  138. package/dist/esm/components/dataTable/hooks/useDataTableHasScroll.js +1 -1
  139. package/dist/esm/components/dataTable/hooks/useDataTableShadow.js +1 -1
  140. package/dist/esm/components/dataTable/hooks/useDataTableStickyDividers.js +1 -1
  141. package/dist/esm/components/dataTable/hooks/useDataTableStickyLeftColumns.js +1 -1
  142. package/dist/esm/components/dataTable/hooks/useDataTableStickyRightColumns.js +1 -1
  143. package/dist/esm/components/dropdownSelected/dropdownSelectedControlled.js +1 -1
  144. package/dist/esm/components/dropdownSelected/dropdownSelectedStandAlone.js +5 -6
  145. package/dist/esm/components/image/image.css +1 -38
  146. package/dist/esm/components/input/input.js +2 -2
  147. package/dist/esm/components/input/inputStandAlone.js +3 -5
  148. package/dist/esm/components/inputBase/inputBase.js +2 -2
  149. package/dist/esm/components/inputDecoration/inputDecorationStandAlone.js +2 -2
  150. package/dist/esm/components/inputSignature/inputSignatureStandAlone.js +3 -4
  151. package/dist/esm/components/label/labelStandAlone.js +2 -3
  152. package/dist/esm/components/link/linkStandAlone.js +3 -3
  153. package/dist/esm/components/listOptions/listOptionsStandAlone.js +2 -4
  154. package/dist/esm/components/modal/fragments/modalHeader.js +3 -9
  155. package/dist/esm/components/modal/modalControlled.js +1 -1
  156. package/dist/esm/components/modal/modalStandAlone.js +4 -5
  157. package/dist/esm/components/modal/modalUnControlled.js +2 -2
  158. package/dist/esm/components/option/optionStandAlone.js +8 -11
  159. package/dist/esm/components/pageControl/components/arrowControlStandAlone.js +2 -2
  160. package/dist/esm/components/pageControl/components/controls.js +2 -4
  161. package/dist/esm/components/pageControl/pageControlStandAlone.js +6 -8
  162. package/dist/esm/components/pagination/fragments/paginationButtonControl.js +2 -2
  163. package/dist/esm/components/popover/hooks/positioning/middlewareUtils.js +1 -1
  164. package/dist/esm/components/popover/hooks/usePopoverInteractions.js +1 -1
  165. package/dist/esm/components/popover/hooks/usePopoverLifecycle.js +1 -1
  166. package/dist/esm/components/popover/hooks/usePopoverPositioning.js +1 -1
  167. package/dist/esm/components/popover/popover.js +1 -1
  168. package/dist/esm/components/popover/styles/index.css +1 -10
  169. package/dist/esm/components/popover/styles/keyframes.css +1 -421
  170. package/dist/esm/components/popover/styles/popover-arrow.css +1 -42
  171. package/dist/esm/components/popover/styles/popover.css +1 -189
  172. package/dist/esm/components/progressBar/progressBarStandAlone.js +4 -4
  173. package/dist/esm/components/radioButton/radioButtonStandAlone.js +4 -8
  174. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileAnimation.js +3 -7
  175. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +8 -13
  176. package/dist/esm/components/selectorBoxFile/selectorBoxFile.js +2 -2
  177. package/dist/esm/components/selectorBoxFile/selectorBoxFileStandAlone.js +4 -8
  178. package/dist/esm/components/skeleton/skeleton.css +1 -20
  179. package/dist/esm/components/slider/components/sliderHelperTextStandAlone.js +1 -3
  180. package/dist/esm/components/slider/components/sliderScaleStandAlone.js +2 -2
  181. package/dist/esm/components/slider/components/sliderThumbStandAlone.js +1 -1
  182. package/dist/esm/components/slider/sliderStandAlone.js +17 -19
  183. package/dist/esm/components/stepperNumber/stepperNumberStandAlone.js +8 -8
  184. package/dist/esm/components/table/hooks/useTableHasScroll.js +1 -1
  185. package/dist/esm/components/table/hooks/useTableShadow.js +1 -1
  186. package/dist/esm/components/table/hooks/useTableStickyLeftColumns.js +1 -1
  187. package/dist/esm/components/table/hooks/useTableStickyRightColumns.js +1 -1
  188. package/dist/esm/components/tabs/tabsStandAlone.js +5 -6
  189. package/dist/esm/components/tag/tagStandAlone.js +4 -4
  190. package/dist/esm/components/text/text.css +1 -14
  191. package/dist/esm/components/text/textStandAlone.js +1 -1
  192. package/dist/esm/components/textArea/components/errorStandAlone.js +3 -3
  193. package/dist/esm/components/textArea/components/helpMessageStandAlone.js +1 -1
  194. package/dist/esm/components/textArea/components/titleStandAlone.js +1 -1
  195. package/dist/esm/components/textArea/textAreaStandAlone.js +10 -11
  196. package/dist/esm/components/toggle/toggleStandAlone.js +4 -4
  197. package/dist/esm/components/tooltip/hooks/useTooltip.js +1 -1
  198. package/dist/esm/components/tooltip/tooltip.css +1 -69
  199. package/dist/esm/components/tooltip/tooltipControlled.js +1 -1
  200. package/dist/esm/components/tooltip/tooltipStandAlone.js +8 -10
  201. package/dist/esm/components/tooltip/tooltipUnControlled.js +1 -1
  202. package/dist/esm/components/virtualKeyboard/virtualKeyboardStandAlone.js +4 -4
  203. package/dist/esm/index.js +1 -1
  204. package/dist/esm/lib/components/customComponent/customComponent.js +2 -2
  205. package/dist/esm/lib/components/elementOrIcon/elementOrIcon.js +1 -0
  206. package/dist/esm/lib/components/errorMessage/errorMessageStandAlone.js +4 -4
  207. package/dist/esm/lib/components/itemRove/itemRove.js +2 -0
  208. package/dist/esm/lib/components/overlay/overlay.js +2 -0
  209. package/dist/esm/lib/components/overlay/overlayStandAlone.js +2 -0
  210. package/dist/esm/lib/designSystem/kubit/css/kubit.css +1 -0
  211. package/dist/esm/lib/designSystem/kubit/css/kubit.min.css +1 -0
  212. package/dist/esm/lib/hooks/useClickOutside/useClickOutside.js +1 -1
  213. package/dist/esm/lib/hooks/useContentVisibility/useContentVisibility.js +1 -1
  214. package/dist/esm/lib/hooks/useManageState/useManageState.js +1 -1
  215. package/dist/esm/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
  216. package/dist/esm/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
  217. package/dist/esm/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
  218. package/dist/esm/lib/provider/cssProvider/provider.js +1 -1
  219. package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1641
  220. package/dist/esm/lib/provider/stylesProvider/stylesProvider.js +2 -2
  221. package/dist/esm/lib/storybook/components/divider/divider.css +1 -0
  222. package/dist/esm/lib/storybook/components/note/styles.css +1 -0
  223. package/dist/esm/lib/utils/keyboard/keyboard.js +1 -1
  224. package/dist/esm/lib/utils/process/processCommonProp.js +1 -0
  225. package/dist/esm/react-components.css +1 -1
  226. package/dist/styles/kubit/css/kubit.css +10 -57
  227. package/dist/styles/kubit/css/kubit.min.css +1 -1
  228. package/dist/types/index.d.ts +1038 -292
  229. package/package.json +70 -46
  230. package/dist/cjs/components/elementOrIcon/elementOrIcon.js +0 -1
  231. package/dist/cjs/components/elementOrIcon/index.js +0 -2
  232. package/dist/cjs/components/itemRove/index.js +0 -2
  233. package/dist/cjs/components/itemRove/itemRove.js +0 -1
  234. package/dist/cjs/components/message/index.js +0 -4
  235. package/dist/cjs/components/message/messageControlled.js +0 -1
  236. package/dist/cjs/components/message/messageStandAlone.js +0 -1
  237. package/dist/cjs/components/message/messageUnControlled.js +0 -1
  238. package/dist/cjs/components/overlay/index.js +0 -1
  239. package/dist/cjs/components/overlay/overlay.js +0 -1
  240. package/dist/cjs/components/overlay/overlayStandAlone.js +0 -1
  241. package/dist/cjs/components/renderIf/renderIf.js +0 -1
  242. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileErrorMessage.js +0 -1
  243. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileHeader.js +0 -1
  244. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileTooltip.js +0 -1
  245. package/dist/cjs/components/table/__stories__/css/table.css +0 -7
  246. package/dist/cjs/lib/hooks/useContentVisibilityDetection/useContentVisibilityDetection.js +0 -1
  247. package/dist/cjs/lib/hooks/useId/useId.js +0 -1
  248. package/dist/cjs/lib/hooks/useInputFocus/useInputFocus.js +0 -1
  249. package/dist/cjs/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
  250. package/dist/cjs/lib/utils/changeCssProperty/changeCssProperty.js +0 -1
  251. package/dist/cjs/lib/utils/is/isReactNode.js +0 -1
  252. package/dist/cjs/lib/utils/is/isString.js +0 -1
  253. package/dist/cjs/lib/utils/process/processIcon/processIcon.js +0 -1
  254. package/dist/cjs/lib/utils/process/processText/processText.js +0 -1
  255. package/dist/cjs/lib/utils/resizeObserver/resizeObserver.js +0 -1
  256. package/dist/esm/components/elementOrIcon/elementOrIcon.js +0 -1
  257. package/dist/esm/components/elementOrIcon/index.js +0 -1
  258. package/dist/esm/components/itemRove/index.js +0 -1
  259. package/dist/esm/components/itemRove/itemRove.js +0 -2
  260. package/dist/esm/components/message/index.js +0 -2
  261. package/dist/esm/components/message/messageControlled.js +0 -2
  262. package/dist/esm/components/message/messageStandAlone.js +0 -10
  263. package/dist/esm/components/message/messageUnControlled.js +0 -2
  264. package/dist/esm/components/overlay/index.js +0 -1
  265. package/dist/esm/components/overlay/overlay.js +0 -2
  266. package/dist/esm/components/overlay/overlayStandAlone.js +0 -2
  267. package/dist/esm/components/renderIf/renderIf.js +0 -1
  268. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileErrorMessage.js +0 -3
  269. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileHeader.js +0 -9
  270. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileTooltip.js +0 -1
  271. package/dist/esm/components/table/__stories__/css/table.css +0 -7
  272. package/dist/esm/lib/hooks/useContentVisibilityDetection/useContentVisibilityDetection.js +0 -1
  273. package/dist/esm/lib/hooks/useId/useId.js +0 -1
  274. package/dist/esm/lib/hooks/useInputFocus/useInputFocus.js +0 -1
  275. package/dist/esm/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
  276. package/dist/esm/lib/utils/changeCssProperty/changeCssProperty.js +0 -1
  277. package/dist/esm/lib/utils/is/isReactNode.js +0 -1
  278. package/dist/esm/lib/utils/is/isString.js +0 -1
  279. package/dist/esm/lib/utils/process/processIcon/processIcon.js +0 -1
  280. package/dist/esm/lib/utils/process/processText/processText.js +0 -1
  281. package/dist/esm/lib/utils/resizeObserver/resizeObserver.js +0 -1
  282. /package/dist/cjs/lib/hooks/{useContentVisibilityDetection → useContentVisibility}/utils/contentVisibility.js +0 -0
  283. /package/dist/cjs/lib/{hooks/syncRefs → utils/refs}/syncRefs.js +0 -0
  284. /package/dist/esm/lib/hooks/{useContentVisibilityDetection → useContentVisibility}/utils/contentVisibility.js +0 -0
  285. /package/dist/esm/lib/{hooks/syncRefs → utils/refs}/syncRefs.js +0 -0
@@ -1,421 +1 @@
1
- /**
2
- * CSS animations for popover positioning
3
- * Each animation corresponds to a specific body position from positionStyles.ts
4
- */
5
-
6
- /* ========================================
7
- CENTER POSITION ANIMATIONS
8
- ======================================== */
9
-
10
- /* Center position - scales from center */
11
- @keyframes popover-enter-center {
12
- from {
13
- opacity: 0;
14
- transform: translate(-50%, -50%) scale(0.8);
15
- }
16
- to {
17
- opacity: 1;
18
- transform: translate(-50%, -50%) scale(1);
19
- }
20
- }
21
-
22
- @keyframes popover-exit-center {
23
- from {
24
- opacity: 1;
25
- transform: translate(-50%, -50%) scale(1);
26
- }
27
- to {
28
- opacity: 0;
29
- transform: translate(-50%, -50%) scale(0.8);
30
- }
31
- }
32
-
33
- /* ========================================
34
- TOP POSITION ANIMATIONS
35
- ======================================== */
36
-
37
- /* Top center - slides down and fades in */
38
- @keyframes popover-enter-top {
39
- from {
40
- opacity: 0;
41
- transform: translateX(-50%) translateY(-20px);
42
- }
43
- to {
44
- opacity: 1;
45
- transform: translateX(-50%) translateY(0);
46
- }
47
- }
48
-
49
- @keyframes popover-exit-top {
50
- from {
51
- opacity: 1;
52
- transform: translateX(-50%) translateY(0);
53
- }
54
- to {
55
- opacity: 0;
56
- transform: translateX(-50%) translateY(-20px);
57
- }
58
- }
59
-
60
- /* Top start (left) - slides down only (same as top) */
61
- @keyframes popover-enter-top-start {
62
- from {
63
- opacity: 0;
64
- transform: translateY(-20px);
65
- }
66
- to {
67
- opacity: 1;
68
- transform: translateY(0);
69
- }
70
- }
71
-
72
- @keyframes popover-exit-top-start {
73
- from {
74
- opacity: 1;
75
- transform: translateY(0);
76
- }
77
- to {
78
- opacity: 0;
79
- transform: translateY(-20px);
80
- }
81
- }
82
-
83
- /* Top end (right) - slides down only (same as top) */
84
- @keyframes popover-enter-top-end {
85
- from {
86
- opacity: 0;
87
- transform: translateY(-20px);
88
- }
89
- to {
90
- opacity: 1;
91
- transform: translateY(0);
92
- }
93
- }
94
-
95
- @keyframes popover-exit-top-end {
96
- from {
97
- opacity: 1;
98
- transform: translateY(0);
99
- }
100
- to {
101
- opacity: 0;
102
- transform: translateY(-20px);
103
- }
104
- }
105
-
106
- /* ========================================
107
- BOTTOM POSITION ANIMATIONS
108
- ======================================== */
109
-
110
- /* Bottom center - slides up and fades in */
111
- @keyframes popover-enter-bottom {
112
- from {
113
- opacity: 0;
114
- transform: translateX(-50%) translateY(20px);
115
- }
116
- to {
117
- opacity: 1;
118
- transform: translateX(-50%) translateY(0);
119
- }
120
- }
121
-
122
- @keyframes popover-exit-bottom {
123
- from {
124
- opacity: 1;
125
- transform: translateX(-50%) translateY(0);
126
- }
127
- to {
128
- opacity: 0;
129
- transform: translateX(-50%) translateY(20px);
130
- }
131
- }
132
-
133
- /* Bottom start (left) - slides up only (same as bottom) */
134
- @keyframes popover-enter-bottom-start {
135
- from {
136
- opacity: 0;
137
- transform: translateY(20px);
138
- }
139
- to {
140
- opacity: 1;
141
- transform: translateY(0);
142
- }
143
- }
144
-
145
- @keyframes popover-exit-bottom-start {
146
- from {
147
- opacity: 1;
148
- transform: translateY(0);
149
- }
150
- to {
151
- opacity: 0;
152
- transform: translateY(20px);
153
- }
154
- }
155
-
156
- /* Bottom end (right) - slides up only (same as bottom) */
157
- @keyframes popover-enter-bottom-end {
158
- from {
159
- opacity: 0;
160
- transform: translateY(20px);
161
- }
162
- to {
163
- opacity: 1;
164
- transform: translateY(0);
165
- }
166
- }
167
-
168
- @keyframes popover-exit-bottom-end {
169
- from {
170
- opacity: 1;
171
- transform: translateY(0);
172
- }
173
- to {
174
- opacity: 0;
175
- transform: translateY(20px);
176
- }
177
- }
178
-
179
- /* ========================================
180
- LEFT POSITION ANIMATIONS
181
- ======================================== */
182
-
183
- /* Left center - slides right and fades in */
184
- @keyframes popover-enter-left {
185
- from {
186
- opacity: 0;
187
- transform: translateY(-50%) translateX(-20px);
188
- }
189
- to {
190
- opacity: 1;
191
- transform: translateY(-50%) translateX(0);
192
- }
193
- }
194
-
195
- @keyframes popover-exit-left {
196
- from {
197
- opacity: 1;
198
- transform: translateY(-50%) translateX(0);
199
- }
200
- to {
201
- opacity: 0;
202
- transform: translateY(-50%) translateX(-20px);
203
- }
204
- }
205
-
206
- /* Left start (top) - slides right only (same as left) */
207
- @keyframes popover-enter-left-start {
208
- from {
209
- opacity: 0;
210
- transform: translateX(-20px);
211
- }
212
- to {
213
- opacity: 1;
214
- transform: translateX(0);
215
- }
216
- }
217
-
218
- @keyframes popover-exit-left-start {
219
- from {
220
- opacity: 1;
221
- transform: translateX(0);
222
- }
223
- to {
224
- opacity: 0;
225
- transform: translateX(-20px);
226
- }
227
- }
228
-
229
- /* Left end (bottom) - slides right only (same as left) */
230
- @keyframes popover-enter-left-end {
231
- from {
232
- opacity: 0;
233
- transform: translateX(-20px);
234
- }
235
- to {
236
- opacity: 1;
237
- transform: translateX(0);
238
- }
239
- }
240
-
241
- @keyframes popover-exit-left-end {
242
- from {
243
- opacity: 1;
244
- transform: translateX(0);
245
- }
246
- to {
247
- opacity: 0;
248
- transform: translateX(-20px);
249
- }
250
- }
251
-
252
- /* ========================================
253
- RIGHT POSITION ANIMATIONS
254
- ======================================== */
255
-
256
- /* Right center - slides left and fades in */
257
- @keyframes popover-enter-right {
258
- from {
259
- opacity: 0;
260
- transform: translateY(-50%) translateX(20px);
261
- }
262
- to {
263
- opacity: 1;
264
- transform: translateY(-50%) translateX(0);
265
- }
266
- }
267
-
268
- @keyframes popover-exit-right {
269
- from {
270
- opacity: 1;
271
- transform: translateY(-50%) translateX(0);
272
- }
273
- to {
274
- opacity: 0;
275
- transform: translateY(-50%) translateX(20px);
276
- }
277
- }
278
-
279
- /* Right start (top) - slides left only (same as right) */
280
- @keyframes popover-enter-right-start {
281
- from {
282
- opacity: 0;
283
- transform: translateX(20px);
284
- }
285
- to {
286
- opacity: 1;
287
- transform: translateX(0);
288
- }
289
- }
290
-
291
- @keyframes popover-exit-right-start {
292
- from {
293
- opacity: 1;
294
- transform: translateX(0);
295
- }
296
- to {
297
- opacity: 0;
298
- transform: translateX(20px);
299
- }
300
- }
301
-
302
- /* Right end (bottom) - slides left only (same as right) */
303
- @keyframes popover-enter-right-end {
304
- from {
305
- opacity: 0;
306
- transform: translateX(20px);
307
- }
308
- to {
309
- opacity: 1;
310
- transform: translateX(0);
311
- }
312
- }
313
-
314
- @keyframes popover-exit-right-end {
315
- from {
316
- opacity: 1;
317
- transform: translateX(0);
318
- }
319
- to {
320
- opacity: 0;
321
- transform: translateX(20px);
322
- }
323
- }
324
-
325
- /* ========================================
326
- NOTE: No default animation needed
327
- ======================================== */
328
- /* When no placement is specified, center animation is used as fallback */
329
-
330
- /* ========================================
331
- UTILITY CLASSES FOR APPLYING ANIMATIONS
332
- ======================================== */
333
-
334
- /* Animation duration and timing */
335
- .popover-animate {
336
- animation-duration: 200ms;
337
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
338
- animation-fill-mode: forwards;
339
- }
340
-
341
- /* Enter animations by position */
342
- .popover-enter-center {
343
- animation-name: popover-enter-center;
344
- }
345
- .popover-enter-top {
346
- animation-name: popover-enter-top;
347
- }
348
- .popover-enter-top-start {
349
- animation-name: popover-enter-top-start;
350
- }
351
- .popover-enter-top-end {
352
- animation-name: popover-enter-top-end;
353
- }
354
- .popover-enter-bottom {
355
- animation-name: popover-enter-bottom;
356
- }
357
- .popover-enter-bottom-start {
358
- animation-name: popover-enter-bottom-start;
359
- }
360
- .popover-enter-bottom-end {
361
- animation-name: popover-enter-bottom-end;
362
- }
363
- .popover-enter-left {
364
- animation-name: popover-enter-left;
365
- }
366
- .popover-enter-left-start {
367
- animation-name: popover-enter-left-start;
368
- }
369
- .popover-enter-left-end {
370
- animation-name: popover-enter-left-end;
371
- }
372
- .popover-enter-right {
373
- animation-name: popover-enter-right;
374
- }
375
- .popover-enter-right-start {
376
- animation-name: popover-enter-right-start;
377
- }
378
- .popover-enter-right-end {
379
- animation-name: popover-enter-right-end;
380
- }
381
-
382
- /* Exit animations by position */
383
- .popover-exit-center {
384
- animation-name: popover-exit-center;
385
- }
386
- .popover-exit-top {
387
- animation-name: popover-exit-top;
388
- }
389
- .popover-exit-top-start {
390
- animation-name: popover-exit-top-start;
391
- }
392
- .popover-exit-top-end {
393
- animation-name: popover-exit-top-end;
394
- }
395
- .popover-exit-bottom {
396
- animation-name: popover-exit-bottom;
397
- }
398
- .popover-exit-bottom-start {
399
- animation-name: popover-exit-bottom-start;
400
- }
401
- .popover-exit-bottom-end {
402
- animation-name: popover-exit-bottom-end;
403
- }
404
- .popover-exit-left {
405
- animation-name: popover-exit-left;
406
- }
407
- .popover-exit-left-start {
408
- animation-name: popover-exit-left-start;
409
- }
410
- .popover-exit-left-end {
411
- animation-name: popover-exit-left-end;
412
- }
413
- .popover-exit-right {
414
- animation-name: popover-exit-right;
415
- }
416
- .popover-exit-right-start {
417
- animation-name: popover-exit-right-start;
418
- }
419
- .popover-exit-right-end {
420
- animation-name: popover-exit-right-end;
421
- }
1
+ @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}
@@ -1,42 +1 @@
1
- /* ============================================= */
2
- /* PopoverV2 Arrow Styles */
3
- /* ============================================= */
4
-
5
- /* Arrow base styles */
6
- [data-kbt-id='popover-arrow'] {
7
- position: absolute;
8
- transform: rotate(45deg);
9
- z-index: -1;
10
- }
11
-
12
- /* Arrow positioning based on placement */
13
- [data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
14
- bottom: calc(-1 * var(--arrow-size, 8px) / 2);
15
- left: 50%;
16
- transform: translateX(-50%) rotate(45deg);
17
- }
18
-
19
- [data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
20
- top: calc(-1 * var(--arrow-size, 8px) / 2);
21
- left: 50%;
22
- transform: translateX(-50%) rotate(45deg);
23
- }
24
-
25
- [data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
26
- right: calc(-1 * var(--arrow-size, 8px) / 2);
27
- top: 50%;
28
- transform: translateY(-50%) rotate(45deg);
29
- }
30
-
31
- [data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
32
- left: calc(-1 * var(--arrow-size, 8px) / 2);
33
- top: 50%;
34
- transform: translateY(-50%) rotate(45deg);
35
- }
36
-
37
- /* Center placement arrow - default to bottom position */
38
- [data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
39
- top: calc(-1 * var(--arrow-size, 8px) / 2);
40
- left: 50%;
41
- transform: translateX(-50%) rotate(45deg);
42
- }
1
+ [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)}
@@ -1,189 +1 @@
1
- /**
2
- * PopoverV2 Main Styles
3
- * Contains animation logic and positioning styles
4
- */
5
-
6
- /* Import all animation keyframes */
7
- @import './keyframes.css';
8
-
9
- /* Popover Animation Styles */
10
- /* ============================================= */
11
-
12
- /* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
13
- /* This allows additionalClasses to work properly */
14
- [data-kbt-id='popover'][data-kbt-placement] {
15
- animation-duration: 500ms;
16
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
17
- animation-fill-mode: forwards;
18
- animation-iteration-count: 1;
19
- }
20
-
21
- /* Opening animations based on placement - ONLY when animations are enabled */
22
- [data-kbt-id='popover'][data-kbt-closing='false']:not(
23
- [data-kbt-disable-animations='true']
24
- ) {
25
- --animation-prefix: 'popover-enter-';
26
- }
27
-
28
- [data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='false']:not(
29
- [data-kbt-disable-animations='true']
30
- ) {
31
- animation-name: popover-enter-center;
32
- }
33
-
34
- [data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='false']:not(
35
- [data-kbt-disable-animations='true']
36
- ) {
37
- animation-name: var(--animation-name, popover-enter-top);
38
- }
39
-
40
- [data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='false']:not(
41
- [data-kbt-disable-animations='true']
42
- ) {
43
- animation-name: popover-enter-top-start;
44
- }
45
-
46
- [data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='false']:not(
47
- [data-kbt-disable-animations='true']
48
- ) {
49
- animation-name: popover-enter-top-end;
50
- }
51
-
52
- [data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='false']:not(
53
- [data-kbt-disable-animations='true']
54
- ) {
55
- animation-name: var(--animation-name, popover-enter-bottom);
56
- }
57
-
58
- [data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='false']:not(
59
- [data-kbt-disable-animations='true']
60
- ) {
61
- animation-name: popover-enter-bottom-start;
62
- }
63
-
64
- [data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='false']:not(
65
- [data-kbt-disable-animations='true']
66
- ) {
67
- animation-name: popover-enter-bottom-end;
68
- }
69
-
70
- [data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='false']:not(
71
- [data-kbt-disable-animations='true']
72
- ) {
73
- animation-name: var(--animation-name, popover-enter-left);
74
- }
75
-
76
- [data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='false']:not(
77
- [data-kbt-disable-animations='true']
78
- ) {
79
- animation-name: popover-enter-left-start;
80
- }
81
-
82
- [data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='false']:not(
83
- [data-kbt-disable-animations='true']
84
- ) {
85
- animation-name: popover-enter-left-end;
86
- }
87
-
88
- [data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='false']:not(
89
- [data-kbt-disable-animations='true']
90
- ) {
91
- animation-name: var(--animation-name, popover-enter-right);
92
- }
93
-
94
- [data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='false']:not(
95
- [data-kbt-disable-animations='true']
96
- ) {
97
- animation-name: popover-enter-right-start;
98
- }
99
-
100
- [data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='false']:not(
101
- [data-kbt-disable-animations='true']
102
- ) {
103
- animation-name: popover-enter-right-end;
104
- }
105
-
106
- /* Closing animations based on placement - ONLY when animations are enabled */
107
- [data-kbt-id='popover'][data-kbt-closing='true']:not(
108
- [data-kbt-disable-animations='true']
109
- ) {
110
- --animation-prefix: 'popover-exit-';
111
- }
112
-
113
- [data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='true']:not(
114
- [data-kbt-disable-animations='true']
115
- ) {
116
- animation-name: popover-exit-center;
117
- }
118
-
119
- [data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='true']:not(
120
- [data-kbt-disable-animations='true']
121
- ) {
122
- animation-name: var(--exit-animation-name, popover-exit-top);
123
- }
124
-
125
- [data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='true']:not(
126
- [data-kbt-disable-animations='true']
127
- ) {
128
- animation-name: popover-exit-top-start;
129
- }
130
-
131
- [data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='true']:not(
132
- [data-kbt-disable-animations='true']
133
- ) {
134
- animation-name: popover-exit-top-end;
135
- }
136
-
137
- [data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='true']:not(
138
- [data-kbt-disable-animations='true']
139
- ) {
140
- animation-name: var(--exit-animation-name, popover-exit-bottom);
141
- }
142
-
143
- [data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='true']:not(
144
- [data-kbt-disable-animations='true']
145
- ) {
146
- animation-name: popover-exit-bottom-start;
147
- }
148
-
149
- [data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='true']:not(
150
- [data-kbt-disable-animations='true']
151
- ) {
152
- animation-name: popover-exit-bottom-end;
153
- }
154
-
155
- [data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='true']:not(
156
- [data-kbt-disable-animations='true']
157
- ) {
158
- animation-name: var(--exit-animation-name, popover-exit-left);
159
- }
160
-
161
- [data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='true']:not(
162
- [data-kbt-disable-animations='true']
163
- ) {
164
- animation-name: popover-exit-left-start;
165
- }
166
-
167
- [data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='true']:not(
168
- [data-kbt-disable-animations='true']
169
- ) {
170
- animation-name: popover-exit-left-end;
171
- }
172
-
173
- [data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='true']:not(
174
- [data-kbt-disable-animations='true']
175
- ) {
176
- animation-name: var(--exit-animation-name, popover-exit-right);
177
- }
178
-
179
- [data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='true']:not(
180
- [data-kbt-disable-animations='true']
181
- ) {
182
- animation-name: popover-exit-right-start;
183
- }
184
-
185
- [data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='true']:not(
186
- [data-kbt-disable-animations='true']
187
- ) {
188
- animation-name: popover-exit-right-end;
189
- }
1
+ @import "./keyframes.css";[data-kbt-id=popover][data-kbt-placement]{animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}[data-kbt-id=popover][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-enter-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-end}[data-kbt-id=popover][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-exit-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-end}
@@ -1,4 +1,4 @@
1
- import{j as r}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{classNames as a}from"../../lib/utils/classNames/classNames.js";import{Slider as e}from"../slider/slider.js";const o=s(({barAriaLabel:s,color:o,cssSizeClasses:t,cssVariantClasses:i,onChange:n,onDragEnd:l,onDragStart:d,progressAnimation:m,progressCompleted:c,tooltip:g,useAsSlider:p=!1,...b},u)=>{const j=b["data-testid"]||"progress-bar",x={backgroundColor:o?.bar},C={backgroundColor:o?.progressBar,transition:`width ${m?.duration} ${m?.timingFunction}`,width:`${c}%`};/* @__PURE__ */
2
- return r.jsx("div",{ref:u,className:i?.progress_bar,"data-testid":`${j}-progressbar`,children:/* @__PURE__ */r.jsx("div",{className:i?.barcontainer,children:p?/* @__PURE__ */r.jsx(e,{additionalClasses:i?.slider,ariaLabel:s,max:1e3,min:0,tooltip:g,type:"continuous",value:10*c,onChange:r=>{n&&!Array.isArray(r)&&n(r/10)},onDragEnd:l,onDragStart:d}):/* @__PURE__ */r.jsxs(r.Fragment,{children:[
3
- /* @__PURE__ */r.jsx("div",{className:a(t?.bar,i?.bar),"data-testid":j,style:x}),
4
- /* @__PURE__ */r.jsx("div",{className:a(t?.progressbar,i?.progressbar),style:C})]})})})});export{o as ProgressBarStandalone};
1
+ import{j as r}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{classNames as a}from"../../lib/utils/classNames/classNames.js";const e=s(({barAriaLabel:s,color:e,cssSizeClasses:i,cssVariantClasses:o,progressAnimation:t,progressCompleted:l,...n},c)=>{const d=n["data-testid"]||"progress-bar",m={backgroundColor:e?.bar},b={backgroundColor:e?.progressBar,transition:`width ${t?.duration} ${t?.timingFunction}`,width:`${l}%`};/* @__PURE__ */
2
+ return r.jsx("div",{ref:c,className:o?.progress_bar,"data-testid":`${d}-progressbar`,children:/* @__PURE__ */r.jsxs("div",{className:o?.barcontainer,children:[
3
+ /* @__PURE__ */r.jsx("div",{"aria-label":s,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":l,className:a(i?.bar,o?.bar),"data-testid":d,role:"progressbar",style:m}),
4
+ /* @__PURE__ */r.jsx("div",{className:a(i?.progressbar,o?.progressbar),style:b})]})})});export{e as ProgressBarStandalone};