@kubit-ui-web/react-components 2.0.0-beta.27 → 2.0.0-beta.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",

package/dist/cjs/.storybook/bundle-sizes.json

@@ -1,13 +0,0 @@
-{
-  "metadata": {
-    "generated": "2026-01-12T10:44:26.949Z",
-    "totalComponents": 0,
-    "totalSize": {
-      "raw": 0,
-      "gzip": 0,
-      "formatted": "0 B",
-      "gzipFormatted": "0 B"
-    }
-  },
-  "components": {}
-}

package/dist/cjs/assets/react-components.css

@@ -1 +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}: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)}@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:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes popover-exit-top{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-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:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes popover-exit-bottom{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-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%) translate(-20px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@keyframes popover-exit-left{0%{opacity:1;transform:translateY(-50%) translate(0)}to{opacity:0;transform:translateY(-50%) translate(-20px)}}@keyframes popover-enter-left-start{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-left-start{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes popover-enter-left-end{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-left-end{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes popover-enter-right{0%{opacity:0;transform:translateY(-50%) translate(20px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@keyframes popover-exit-right{0%{opacity:1;transform:translateY(-50%) translate(0)}to{opacity:0;transform:translateY(-50%) translate(20px)}}@keyframes popover-enter-right-start{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-right-start{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}@keyframes popover-enter-right-end{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes popover-exit-right-end{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.popover-animate{animation-duration:.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards}.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}[data-kbt-id=popover][data-kbt-placement]{animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;animation-iteration-count: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}[data-kbt-id=popover-arrow]{position:absolute;transform:rotate(45deg);z-index:-1}[data-kbt-id=popover-arrow][data-kbt-placement^=top]{bottom:calc(-1 * var(--arrow-size, 8px) / 2);left:50%;transform:translate(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=bottom]{top:calc(-1 * var(--arrow-size, 8px) / 2);left:50%;transform:translate(-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)}[data-kbt-id=popover-arrow][data-kbt-placement=center]{top:calc(-1 * var(--arrow-size, 8px) / 2);left:50%;transform:translate(-50%) rotate(45deg)}@keyframes breatheAnimation{0%{background-position-x:0%}to{background-position-x:-200%}}.kbt-skeleton{width:var(--skeleton-width, 100%);height:var(--skeleton-height, 20px);animation-name:breatheAnimation;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--skeleton-duration, 2s);animation-delay:1ms;background-size:200% 100%}.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: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/dist/cjs/scripts/generate-bundle-sizes.mjs

@@ -1,236 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Generate bundle size information for each component
- * This script analyzes the dist folder and generates a JSON file with size information
- */
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { gzipSync } from 'zlib';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const rootDir = path.resolve(__dirname, '../..');
-
-// Paths
-const distEsmDir = path.join(rootDir, 'dist/esm/components');
-const outputFile = path.join(rootDir, '.storybook/bundle-sizes.json');
-
-/**
- * Get file size in bytes
- */
-function getFileSize(filePath) {
-  try {
-    const stats = fs.statSync(filePath);
-    return stats.size;
-  } catch (error) {
-    return 0;
-  }
-}
-
-/**
- * Get gzipped size of file
- */
-function getGzipSize(filePath) {
-  try {
-    const content = fs.readFileSync(filePath);
-    const gzipped = gzipSync(content);
-    return gzipped.length;
-  } catch (error) {
-    return 0;
-  }
-}
-
-/**
- * Format bytes to human readable
- */
-function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-/**
- * Get component files
- */
-function getComponentFiles(componentPath) {
-  const files = {
-    css: [],
-    js: [],
-  };
-
-  try {
-    const entries = fs.readdirSync(componentPath, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const fullPath = path.join(componentPath, entry.name);
-
-      if (entry.isDirectory()) {
-        // Recursively search subdirectories
-        const subFiles = getComponentFiles(fullPath);
-        files.css.push(...subFiles.css);
-        files.js.push(...subFiles.js);
-      } else if (entry.isFile()) {
-        if (entry.name.endsWith('.css')) {
-          files.css.push(fullPath);
-        } else if (entry.name.endsWith('.js')) {
-          files.js.push(fullPath);
-        }
-      }
-    }
-  } catch (error) {
-    // Directory doesn't exist
-  }
-
-  return files;
-}
-
-/**
- * Calculate sizes for a component
- */
-function calculateComponentSizes(componentName, componentPath) {
-  const files = getComponentFiles(componentPath);
-
-  let jsSize = 0;
-  let jsGzipSize = 0;
-  let cssSize = 0;
-  let cssGzipSize = 0;
-
-  // Sum JS files
-  for (const file of files.js) {
-    jsSize += getFileSize(file);
-    jsGzipSize += getGzipSize(file);
-  }
-
-  // Sum CSS files
-  for (const file of files.css) {
-    cssSize += getFileSize(file);
-    cssGzipSize += getGzipSize(file);
-  }
-
-  const totalSize = jsSize + cssSize;
-  const totalGzipSize = jsGzipSize + cssGzipSize;
-
-  return {
-    component: componentName,
-    sizes: {
-      js: {
-        raw: jsSize,
-        gzip: jsGzipSize,
-        formatted: formatBytes(jsSize),
-        gzipFormatted: formatBytes(jsGzipSize),
-      },
-      css: {
-        raw: cssSize,
-        gzip: cssGzipSize,
-        formatted: formatBytes(cssSize),
-        gzipFormatted: formatBytes(cssGzipSize),
-      },
-      total: {
-        raw: totalSize,
-        gzip: totalGzipSize,
-        formatted: formatBytes(totalSize),
-        gzipFormatted: formatBytes(totalGzipSize),
-      },
-    },
-    treeshakeable: true, // All ESM exports are treeshakeable
-    timestamp: new Date().toISOString(),
-  };
-}
-
-/**
- * Main function
- */
-function main() {
-  console.log('📦 Generating bundle size information...\n');
-
-  if (!fs.existsSync(distEsmDir)) {
-    console.warn('⚠️  Warning: dist/esm/components directory not found.');
-    console.warn(
-      '   Creating empty bundle-sizes.json. Run `pnpm dist` to populate.\n',
-    );
-
-    // Create empty bundle sizes file
-    const emptyOutput = {
-      metadata: {
-        generated: new Date().toISOString(),
-        totalComponents: 0,
-        totalSize: {
-          raw: 0,
-          gzip: 0,
-          formatted: '0 B',
-          gzipFormatted: '0 B',
-        },
-      },
-      components: {},
-    };
-
-    const storybookDir = path.dirname(outputFile);
-    if (!fs.existsSync(storybookDir)) {
-      fs.mkdirSync(storybookDir, { recursive: true });
-    }
-
-    fs.writeFileSync(outputFile, JSON.stringify(emptyOutput, null, 2));
-    console.log('📄 Created empty bundle-sizes.json\n');
-    return;
-  }
-
-  const components = fs
-    .readdirSync(distEsmDir, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
-
-  const bundleSizes = {};
-  let totalComponents = 0;
-  let totalSize = 0;
-  let totalGzipSize = 0;
-
-  for (const component of components) {
-    const componentPath = path.join(distEsmDir, component);
-    const sizeInfo = calculateComponentSizes(component, componentPath);
-
-    bundleSizes[component] = sizeInfo;
-    totalComponents++;
-    totalSize += sizeInfo.sizes.total.raw;
-    totalGzipSize += sizeInfo.sizes.total.gzip;
-
-    console.log(
-      `✓ ${component.padEnd(20)} ${sizeInfo.sizes.total.gzipFormatted} (gzip)`,
-    );
-  }
-
-  // Add metadata
-  const output = {
-    metadata: {
-      generated: new Date().toISOString(),
-      totalComponents,
-      totalSize: {
-        raw: totalSize,
-        gzip: totalGzipSize,
-        formatted: formatBytes(totalSize),
-        gzipFormatted: formatBytes(totalGzipSize),
-      },
-    },
-    components: bundleSizes,
-  };
-
-  // Write to file
-  const storybookDir = path.dirname(outputFile);
-  if (!fs.existsSync(storybookDir)) {
-    fs.mkdirSync(storybookDir, { recursive: true });
-  }
-
-  fs.writeFileSync(outputFile, JSON.stringify(output, null, 2));
-
-  console.log(`\n✨ Bundle sizes generated successfully!`);
-  console.log(`📊 Total components: ${totalComponents}`);
-  console.log(
-    `📦 Total size: ${formatBytes(totalSize)} (raw) / ${formatBytes(totalGzipSize)} (gzip)`,
-  );
-  console.log(`📄 Output: ${path.relative(rootDir, outputFile)}\n`);
-}
-
-main();