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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.19",
+  "version": "2.0.0-beta.20",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -77,9 +77,19 @@
     "!dist/cjs/lib/storybook",
     "!dist/esm/lib/storybook",
     "!dist/types/lib/storybook",
+    "!dist/**/.storybook",
+    "!dist/esm/.storybook",
+    "!dist/cjs/.storybook",
+    "!dist/**/assets",
+    "!dist/esm/assets",
+    "!dist/cjs/assets",
+    "!dist/**/scripts",
+    "!dist/esm/scripts",
+    "!dist/cjs/scripts",
     "!dist/**/node_modules",
     "!dist/**/.tsbuildinfo",
-    "!dist/**/*.map"
+    "!dist/**/*.map",
+    "!dist/**/.DS_Store"
   ],
   "exports": {
     ".": {

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

@@ -1,13 +0,0 @@
-{
-  "metadata": {
-    "generated": "2026-01-08T15:02:18.053Z",
-    "totalComponents": 0,
-    "totalSize": {
-      "raw": 0,
-      "gzip": 0,
-      "formatted": "0 B",
-      "gzipFormatted": "0 B"
-    }
-  },
-  "components": {}
-}

package/dist/cjs/components/table/__stories__/css/table.css

@@ -1 +0,0 @@
-.scrollablecontainer-max-height{max-height:200px}.container-over-width{width:120%!important}

package/dist/cjs/lib/storybook/assets/icons/checkmark_thick.svg

@@ -1,3 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.788 10.277 11.74 14.78a.693.693 0 0 1-1.012 0L8.21 12.137a.769.769 0 0 1 0-1.058.693.693 0 0 1 1.011 0l2.024 2.115 4.541-3.975a.693.693 0 0 1 1.012 0 .78.78 0 0 1-.011 1.058z" fill="#EC0000"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_chevron_down.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.293 9.293L12 13.586L7.70697 9.293L6.29297 10.707L12 16.414L17.707 10.707L16.293 9.293Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_chevron_left.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.2929 6.293L7.58594 12L13.2929 17.707L14.7069 16.293L10.4139 12L14.7069 7.707L13.2929 6.293Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_chevron_right.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.707 17.707L16.414 12L10.707 6.293L9.29297 7.707L13.586 12L9.29297 16.293L10.707 17.707Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_chevron_up.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.29297 13.293L7.70697 14.707L12 10.414L16.293 14.707L17.707 13.293L12 7.586L6.29297 13.293Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_ds_handle.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="4" viewBox="0 0 32 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="32" height="4" rx="2" fill="#CCCCCC"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_ghost.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2C7.037 2 3 6.038 3 11V19H3.051C3.296 20.691 4.741 22 6.5 22C7.674 22 8.574 21.583 9.172 20.826C9.896 21.551 10.896 22 12 22C13.11 22 14.114 21.544 14.84 20.812C15.441 21.574 16.344 22 17.5 22C19.43 22 21 20.43 21 18.5V11C21 6.038 16.963 2 12 2ZM19 18.5C19 19.327 18.327 20 17.5 20C17.051 20 16 20 16 18V17H14V18C14 19.103 13.103 20 12 20C10.897 20 10 19.103 10 18V17H8V18C8 19.845 7.226 20 6.5 20C5.673 20 5 19.327 5 18.5V11C5 7.14 8.141 4 12 4C15.859 4 19 7.14 19 11V18.5Z" fill="#1A1A1A"/>
-<path d="M9 12C10.1046 12 11 11.1046 11 10C11 8.89543 10.1046 8 9 8C7.89543 8 7 8.89543 7 10C7 11.1046 7.89543 12 9 12Z" fill="#1A1A1A"/>
-<path d="M15 12C16.1046 12 17 11.1046 17 10C17 8.89543 16.1046 8 15 8C13.8954 8 13 8.89543 13 10C13 11.1046 13.8954 12 15 12Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_placeholder.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99138 2H4C2.89543 2 2 2.89543 2 4V4.99138L4.99138 2ZM2 12.0624V9.23402L9.23402 2H12.0624L2 12.0624ZM2 19.1335V16.3051L16.3051 2H19.1335L2 19.1335ZM6.20347 22H4C3.80971 22 3.62563 21.9734 3.45126 21.9238L21.9238 3.45126C21.9734 3.62563 22 3.80971 22 4V6.20347L6.20347 22ZM13.2745 22H10.4461L22 10.4461V13.2745L13.2745 22ZM20.3821 21.9635C20.2584 21.9875 20.1307 22 20 22H17.5172L22 17.5172V20C22 20.1307 21.9875 20.2584 21.9635 20.3821L20.3821 21.9635Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/icon_x_close.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.192 6.34399L11.949 10.586L7.70697 6.34399L6.29297 7.75799L10.535 12L6.29297 16.242L7.70697 17.656L11.949 13.414L16.192 17.656L17.606 16.242L13.364 12L17.606 7.75799L16.192 6.34399Z" fill="#1A1A1A"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/play_button.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.48633 17.5142 2 12 2C6.48584 2 2 6.48633 2 12C2 17.5137 6.48584 22 12 22C17.5142 22 22 17.5137 22 12ZM3 12C3 7.03711 7.0376 3 12 3C16.9624 3 21 7.03711 21 12C21 16.9629 16.9624 21 12 21C7.0376 21 3 16.9629 3 12ZM8.74951 6.96777C8.8785 6.8929 9.0319 6.8811 9.16903 6.93011L9.24902 6.9668L17.249 11.5664C17.4043 11.6553 17.5 11.8213 17.5 12C17.5 12.1489 17.4335 12.289 17.3215 12.383L17.249 12.4336L9.24902 17.0332C9.17188 17.0771 9.08594 17.0996 9 17.0996C8.91357 17.0996 8.82715 17.0771 8.74951 17.0322C8.62093 16.9582 8.53338 16.8312 8.50777 16.6875L8.5 16.5996V7.40039C8.5 7.22168 8.59521 7.05664 8.74951 6.96777ZM15.9971 12L9.5 15.7354V8.26465L15.9971 12Z" fill="#9747FF"/>
-</svg>

package/dist/cjs/lib/storybook/assets/icons/replace.svg

@@ -1,38 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="48" height="48" fill="#FEF1F1"/>
-<g id="Carousel">
-<path d="M-639 -1539C-639 -1540.1 -638.105 -1541 -637 -1541H2991C2992.1 -1541 2993 -1540.1 2993 -1539V7853C2993 7854.1 2992.1 7855 2991 7855H-637C-638.104 7855 -639 7854.1 -639 7853V-1539Z" fill="#002B45" fill-opacity="0.05"/>
-<path d="M-637 -1540H2991V-1542H-637V-1540ZM2992 -1539V7853H2994V-1539H2992ZM2991 7854H-637V7856H2991V7854ZM-638 7853V-1539H-640V7853H-638ZM-637 7854C-637.552 7854 -638 7853.55 -638 7853H-640C-640 7854.66 -638.657 7856 -637 7856V7854ZM2992 7853C2992 7853.55 2991.55 7854 2991 7854V7856C2992.66 7856 2994 7854.66 2994 7853H2992ZM2991 -1540C2991.55 -1540 2992 -1539.55 2992 -1539H2994C2994 -1540.66 2992.66 -1542 2991 -1542V-1540ZM-637 -1542C-638.657 -1542 -640 -1540.66 -640 -1539H-638C-638 -1539.55 -637.552 -1540 -637 -1540V-1542Z" fill="black" fill-opacity="0.1"/>
-<g id="mbCarouselMB]" clip-path="url(#clip0_4_218)">
-<rect width="1696" height="9196" transform="translate(-539 -1441)" fill="white"/>
-<g id="template-fluid">
-<g id="Anatomy">
-<g id="Anatomy_2">
-<g id="Frame 124">
-<rect x="-411" y="-285" width="1440" height="683" rx="12" fill="#FAFAFA"/>
-<g id="mbCarousel">
-<g id="content_placeholder">
-<path d="M-100 -82C-100 -86.4183 -96.4183 -90 -92 -90H140C144.418 -90 148 -86.4183 148 -82V182C148 186.418 144.418 190 140 190H-92C-96.4183 190 -100 186.418 -100 182V-82Z" fill="#236DF6" fill-opacity="0.1"/>
-<g id="Button container">
-<g id="Icon">
-<g id="Vector">
-<path d="M40 12C40 10.9391 39.5786 9.92172 38.8284 9.17157C38.0783 8.42143 37.0609 8 36 8H32C30.9391 8 29.9217 8.42143 29.1716 9.17157C28.4214 9.92172 28 10.9391 28 12V14C28 15.0609 28.4214 16.0783 29.1716 16.8284C29.9217 17.5786 30.9391 18 32 18H36C37.0609 18 38.0783 17.5786 38.8284 16.8284C39.5786 16.0783 40 15.0609 40 14V12Z" stroke="#236DF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M40 30C40 28.9391 39.5786 27.9217 38.8284 27.1716C38.0783 26.4214 37.0609 26 36 26H32C30.9391 26 29.9217 26.4214 29.1716 27.1716C28.4214 27.9217 28 28.9391 28 30V36C28 37.0609 28.4214 38.0783 29.1716 38.8284C29.9217 39.5786 30.9391 40 32 40H36C37.0609 40 38.0783 39.5786 38.8284 38.8284C39.5786 38.0783 40 37.0609 40 36V30Z" stroke="#236DF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20 12C20 10.9391 19.5786 9.92172 18.8284 9.17157C18.0783 8.42143 17.0609 8 16 8H12C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12V36C8 37.0609 8.42143 38.0783 9.17157 38.8284C9.92172 39.5786 10.9391 40 12 40H16C17.0609 40 18.0783 39.5786 18.8284 38.8284C19.5786 38.0783 20 37.0609 20 36V12Z" stroke="#236DF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_4_218">
-<rect width="1696" height="9196" fill="white" transform="translate(-539 -1441)"/>
-</clipPath>
-</defs>
-</svg>

package/dist/cjs/lib/storybook/assets/loader/loader.css

@@ -1 +0,0 @@
-.loader-wrapper{animation:spin 2s linear infinite;border:6px solid #f3f3f3;border-radius:50%;border-top-color:#3498db;height:24px;width:24px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/cjs/node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../../../../_virtual/react-jsx-runtime.production.min.js"),e=require("react");var t;exports.__require=function(){if(t)return r.__exports;t=1;var o=e,_=Symbol.for("react.element"),n=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,u=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function p(r,e,t){var o,n={},p=null,a=null;for(o in void 0!==t&&(p=""+t),void 0!==e.key&&(p=""+e.key),void 0!==e.ref&&(a=e.ref),e)s.call(e,o)&&!i.hasOwnProperty(o)&&(n[o]=e[o]);if(r&&r.defaultProps)for(o in e=r.defaultProps)void 0===n[o]&&(n[o]=e[o]);return{$$typeof:_,type:r,key:p,ref:a,props:n,_owner:u.current}}return r.__exports.Fragment=n,r.__exports.jsx=p,r.__exports.jsxs=p,r.__exports};

package/dist/cjs/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime2.js"),r=require("./cjs/react-jsx-runtime.production.min.js");var t;exports.__require=function(){return t||(t=1,e.__module.exports=r.__require()),e.__module.exports};

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();