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

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

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

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

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

@@ -1,189 +0,0 @@
-/**
- * Popover Main Styles
- * Contains animation logic and positioning styles
- */
-
-/* Import all animation keyframes */
-@import './keyframes.css';
-
-/* Popover Animation Styles */
-/* ============================================= */
-
-/* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
-/* This allows additionalClasses to work properly */
-[data-kbt-id='popover'][data-kbt-placement] {
-  animation-duration: 500ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-}
-
-/* Opening animations based on placement - ONLY when animations are enabled */
-[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;
-}
-
-/* Closing animations based on placement - ONLY when animations are enabled */
-[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;
-}

package/dist/esm/src/components/skeleton/skeleton.css

@@ -1,13 +0,0 @@
-@keyframes breatheAnimation {
-  from {
-    background-position-x: 0%;
-  }
-
-  to {
-    background-position-x: -200%;
-  }
-}
-
-.kbt-skeleton {
-  animation-name: breatheAnimation;
-}

package/dist/esm/src/components/text/text.css

@@ -1,14 +0,0 @@
-.kbt-text {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-.kbt-text--disabled {
-  pointer-events: none;
-}
-
-.kbt-text--truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}