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

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

@@ -0,0 +1,421 @@
+/**
+ * CSS animations for popover positioning
+ * Each animation corresponds to a specific body position from positionStyles.ts
+ */
+
+/* ========================================
+   CENTER POSITION ANIMATIONS
+   ======================================== */
+
+/* Center position - scales from center */
+@keyframes popover-enter-center {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes popover-exit-center {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* ========================================
+   TOP POSITION ANIMATIONS
+   ======================================== */
+
+/* Top center - slides down and fades in */
+@keyframes popover-enter-top {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-top {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+}
+
+/* Top start (left) - slides down only (same as top) */
+@keyframes popover-enter-top-start {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* Top end (right) - slides down only (same as top) */
+@keyframes popover-enter-top-end {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* ========================================
+   BOTTOM POSITION ANIMATIONS
+   ======================================== */
+
+/* Bottom center - slides up and fades in */
+@keyframes popover-enter-bottom {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+}
+
+/* Bottom start (left) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-start {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Bottom end (right) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-end {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* ========================================
+   LEFT POSITION ANIMATIONS
+   ======================================== */
+
+/* Left center - slides right and fades in */
+@keyframes popover-enter-left {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-left {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+}
+
+/* Left start (top) - slides right only (same as left) */
+@keyframes popover-enter-left-start {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* Left end (bottom) - slides right only (same as left) */
+@keyframes popover-enter-left-end {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* ========================================
+   RIGHT POSITION ANIMATIONS
+   ======================================== */
+
+/* Right center - slides left and fades in */
+@keyframes popover-enter-right {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-right {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+}
+
+/* Right start (top) - slides left only (same as right) */
+@keyframes popover-enter-right-start {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* Right end (bottom) - slides left only (same as right) */
+@keyframes popover-enter-right-end {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* ========================================
+   NOTE: No default animation needed
+   ======================================== */
+/* When no placement is specified, center animation is used as fallback */
+
+/* ========================================
+   UTILITY CLASSES FOR APPLYING ANIMATIONS
+   ======================================== */
+
+/* Animation duration and timing */
+.popover-animate {
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+
+/* Enter animations by position */
+.popover-enter-center {
+  animation-name: popover-enter-center;
+}
+.popover-enter-top {
+  animation-name: popover-enter-top;
+}
+.popover-enter-top-start {
+  animation-name: popover-enter-top-start;
+}
+.popover-enter-top-end {
+  animation-name: popover-enter-top-end;
+}
+.popover-enter-bottom {
+  animation-name: popover-enter-bottom;
+}
+.popover-enter-bottom-start {
+  animation-name: popover-enter-bottom-start;
+}
+.popover-enter-bottom-end {
+  animation-name: popover-enter-bottom-end;
+}
+.popover-enter-left {
+  animation-name: popover-enter-left;
+}
+.popover-enter-left-start {
+  animation-name: popover-enter-left-start;
+}
+.popover-enter-left-end {
+  animation-name: popover-enter-left-end;
+}
+.popover-enter-right {
+  animation-name: popover-enter-right;
+}
+.popover-enter-right-start {
+  animation-name: popover-enter-right-start;
+}
+.popover-enter-right-end {
+  animation-name: popover-enter-right-end;
+}
+
+/* Exit animations by position */
+.popover-exit-center {
+  animation-name: popover-exit-center;
+}
+.popover-exit-top {
+  animation-name: popover-exit-top;
+}
+.popover-exit-top-start {
+  animation-name: popover-exit-top-start;
+}
+.popover-exit-top-end {
+  animation-name: popover-exit-top-end;
+}
+.popover-exit-bottom {
+  animation-name: popover-exit-bottom;
+}
+.popover-exit-bottom-start {
+  animation-name: popover-exit-bottom-start;
+}
+.popover-exit-bottom-end {
+  animation-name: popover-exit-bottom-end;
+}
+.popover-exit-left {
+  animation-name: popover-exit-left;
+}
+.popover-exit-left-start {
+  animation-name: popover-exit-left-start;
+}
+.popover-exit-left-end {
+  animation-name: popover-exit-left-end;
+}
+.popover-exit-right {
+  animation-name: popover-exit-right;
+}
+.popover-exit-right-start {
+  animation-name: popover-exit-right-start;
+}
+.popover-exit-right-end {
+  animation-name: popover-exit-right-end;
+}

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

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

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

@@ -0,0 +1,189 @@
+/**
+ * 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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,14 @@
+.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;
+}