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

package/dist/esm/components/tooltip/tooltip.css

@@ -1,54 +1 @@
-.kbt-tooltip {
-  display: inline-block;
-}
-
-.kbt-tooltip__trigger-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  background: none;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-}
-
-.kbt-tooltip__external-container {
-  display: flex;
-}
-
-.kbt-tooltip__paragraph {
-  word-break: break-word;
-}
-
-.kbt-tooltip__inner-content {
-  overflow-y: auto;
-}
-
-.kbt-tooltip__arrow {
-  position: absolute;
-}
-
-.kbt-tooltip__arrow--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.kbt-tooltip__arrow--right {
-  top: 50%;
-  left: 100%;
-  transform: translateY(-50%);
-}
-
-.kbt-tooltip__arrow--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.kbt-tooltip__arrow--left {
-  top: 50%;
-  right: 100%;
-  transform: translateY(-50%);
-}
+.kbt-tooltip{display:inline-block}.kbt-tooltip__trigger-wrapper{background:0 0;border:none;justify-content:center;align-items:center;min-width:1.5rem;min-height:1.5rem;padding:0;display:flex}.kbt-tooltip__external-container{display:flex}.kbt-tooltip__paragraph{word-break:break-word}.kbt-tooltip__inner-content{overflow-y:auto}.kbt-tooltip__arrow{position:absolute}.kbt-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%)}.kbt-tooltip__arrow--right{top:50%;left:100%;transform:translateY(-50%)}.kbt-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%)}.kbt-tooltip__arrow--left{top:50%;right:100%;transform:translateY(-50%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.62",
+  "version": "2.0.0-beta.63",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -172,7 +172,7 @@
     "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.18",
     "vitest-axe": "^0.1.0",
-    "@kubit-ui-web/design-system": "2.0.0-beta.22"
+    "@kubit-ui-web/design-system": "2.0.0-beta.23"
   },
   "publishConfig": {
     "access": "public",
@@ -186,10 +186,9 @@
   "documentation": "https://www.kubit-ui.com",
   "scripts": {
     "dev": "rslib build --watch",
-    "build": "rslib build && pnpm postbuild",
-    "postbuild": "find src -name '*.css' -type f | while read file; do target_esm=\"dist/esm/${file#src/}\"; target_cjs=\"dist/cjs/${file#src/}\"; mkdir -p \"$(dirname \"$target_esm\")\" \"$(dirname \"$target_cjs\")\"; cp \"$file\" \"$target_esm\"; cp \"$file\" \"$target_cjs\"; done",
+    "build": "rslib build",
     "predist": "rm -rf dist",
-    "dist": "rslib build && pnpm postbuild",
+    "dist": "rslib build",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",

package/dist/cjs/src/components/image/image.css

@@ -1,38 +0,0 @@
-: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);
-}

package/dist/cjs/src/components/input/stories/styles.css

@@ -1,11 +0,0 @@
-.custom-input-base {
-  border: '1px solid pink';
-  border-color: 'pink';
-  border-style: 'dashed';
-  border-width: '2px';
-  padding: '14px';
-}
-
-.custom-input-label {
-  position: 'undefined';
-}

package/dist/cjs/src/components/popover/stories/demos/animationsDemo.css

@@ -1,97 +0,0 @@
-/* Keyframes for custom animations */
-@keyframes demo-scale-fade-in {
-  0% {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes demo-rotate-slide-in {
-  0% {
-    transform: translate(-50%, -50%) translateY(30px) rotate(-8deg);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
-    opacity: 1;
-  }
-}
-
-@keyframes demo-zoom-in {
-  0% {
-    transform: translate(-50%, -50%) scale(0.2);
-    opacity: 0;
-  }
-  60% {
-    transform: translate(-50%, -50%) scale(1.1);
-    opacity: 0.8;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes demo-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Demo container styles */
-.demo-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 2rem;
-  max-width: 1200px;
-}
-
-.demo-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #fafafa;
-}
-
-.demo-section-title {
-  margin: 0;
-  color: #333;
-  font-size: 1.2rem;
-}
-
-.demo-section-description {
-  margin: 0;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.demo-button-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.demo-button {
-  justify-self: stretch;
-}
-
-.demo-code-block {
-  background: #f5f5f5;
-  padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-size: 0.85rem;
-  margin: 0.5rem 0;
-}

package/dist/cjs/src/components/popover/styles/index.css

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

package/dist/cjs/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/cjs/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);
-}