@cube-dev/ui-kit 0.98.9 → 0.99.0

package/es/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,275 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState, } from 'react';
-import styled from 'styled-components';
-import { tasty } from '../../../tasty';
-import { useLayoutEffect } from '../../../utils/react';
-import { Button } from '../../actions';
-import { Block } from '../../Block';
-import { Flex } from '../../layout/Flex';
-import { Flow } from '../../layout/Flow';
-import { Space } from '../../layout/Space';
-const LegacyTabsContext = createContext({
-    addTab() { },
-    removeTab() { },
-    setTab() { },
-    changeTab() { },
-});
-const TabElement = tasty(Button, {
-    type: 'tab',
-    styles: {
-        color: {
-            '': '#dark',
-            'selected, hovered': '#purple-text',
-            disabled: '#dark.50',
-        },
-        fill: '#purple.0',
-        textAlign: 'center',
-        fontWeight: 600,
-        radius: '1r 1r 0 0',
-        border: 0,
-    },
-});
-const StyledTabElement = styled(TabElement) `
-  &::before {
-    --outline-size: 0px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-    pointer-events: none;
-    transition:
-      opacity linear 0.2s,
-      box-shadow linear 0.2s;
-  }
-
-  &[data-selected]::before {
-    --outline-size: 2px;
-  }
-
-  &:not([data-selected]):not([disabled])[data-hovered]::before {
-    --outline-size: 1px;
-  }
-`;
-const TabsPanelElement = tasty(Space, {
-    styles: {
-        gap: '1x',
-        flexShrink: 0,
-    },
-});
-const StyledTabsPanelElement = styled(TabsPanelElement) `
-  position: relative;
-  overflow: auto hidden;
-  top: 1px;
-  white-space: nowrap;
-
-  ::-webkit-scrollbar-track {
-    background: var(--dark-bg-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 1px;
-    background: var(--dark-04-color);
-    background-clip: padding-box;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-`;
-const TabsContainerElement = tasty(Flow, {
-    styles: {
-        flow: 'column',
-        height: 'max 100%',
-        width: 'max 100%',
-    },
-});
-const StyledTabsContainerElement = styled(TabsContainerElement) `
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    width: 32px;
-    height: 37px;
-    transition: all 0.15s linear;
-    background-image: linear-gradient(
-      to left,
-      rgb(255 255 255 / 0),
-      rgb(255 255 255 / 1)
-    );
-    z-index: 1;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 37px;
-    pointer-events: none;
-    transition: all 0.15s linear;
-    background-image: linear-gradient(
-      to right,
-      rgb(255 255 255 / 0),
-      rgb(255 255 255 / 1)
-    );
-    z-index: 1;
-  }
-
-  &[data-left-fade]::before,
-  &[data-right-fade]::after {
-    opacity: 1;
-  }
-`;
-function Tab({ isSelected, isHidden, onClose, ...props }) {
-    return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }));
-}
-export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
-    const tabsRef = useRef(null);
-    const [tabs, setTabs] = useState([]);
-    const [activeKey, setActiveKey] = useState(activeKeyProp || defaultActiveKey);
-    const [leftFade, setLeftFade] = useState(false);
-    const [rightFade, setRightFade] = useState(false);
-    function updateScroll() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        setLeftFade(!!el.scrollLeft);
-        setRightFade(el.scrollWidth !== el.offsetWidth &&
-            !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
-    }
-    useLayoutEffect(updateScroll, [tabs]);
-    function scrollCurrentIntoView() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        const current = el.querySelector('button[disabled]');
-        if (!current)
-            return;
-        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
-    }
-    useEffect(() => {
-        function update() {
-            updateScroll();
-        }
-        if (tabsRef && tabsRef.current) {
-            tabsRef.current.addEventListener('scroll', update);
-            tabsRef.current.addEventListener('mousewheel', update);
-            window.addEventListener('resize', update);
-        }
-        return () => {
-            if (tabsRef && tabsRef.current) {
-                tabsRef.current.removeEventListener('scroll', update);
-                tabsRef.current.removeEventListener('mousewheel', update);
-            }
-            window.removeEventListener('resize', update);
-        };
-    }, [tabsRef]);
-    useEffect(scrollCurrentIntoView, [activeKey]);
-    useEffect(() => {
-        setActiveKey(activeKeyProp);
-    }, [activeKeyProp]);
-    function getTab(tabs, key) {
-        return tabs.find((tab) => tab.id === key);
-    }
-    function setTab(key) {
-        if (getTab(tabs, key)) {
-            setActiveKey(key);
-        }
-    }
-    function addTab(tab) {
-        setTabs((tabs) => {
-            if (!getTab(tabs, tab.id)) {
-                return [...tabs, tab];
-            }
-            return tabs;
-        });
-    }
-    function removeTab(tab) {
-        setTabs((tabs) => {
-            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
-            setActiveKey((prevActiveKey) => {
-                if (prevActiveKey === tab.id) {
-                    return _tabs[0] && _tabs[0].id;
-                }
-                return prevActiveKey;
-            });
-            return _tabs;
-        });
-    }
-    function changeTab(tab) {
-        setTabs((tabs) => {
-            const existTab = tabs.find((_tab) => _tab.id === tab.id);
-            if (existTab) {
-                Object.assign(existTab, tab);
-            }
-            return [...tabs];
-        });
-    }
-    function onPress(tab) {
-        onTabClick && onTabClick(tab.id);
-        setTab(tab.id);
-    }
-    return (_jsx(StyledTabsContainerElement, { "data-left-fade": leftFade || null, "data-right-fade": rightFade || null, ...props, children: _jsxs(LegacyTabsContext.Provider, { value: {
-                addTab,
-                setTab,
-                removeTab,
-                changeTab,
-                currentTab: activeKey,
-            }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
-                                return (_jsx(Tab, { "data-qa": tab.qa, isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, onPress: () => onPress(tab), children: tab.title }, tab.id));
-                            }) }), extra] }), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
-}
-LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
-    const { addTab, removeTab, changeTab, currentTab } = useContext(LegacyTabsContext);
-    useEffect(() => {
-        const tabData = {
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        };
-        addTab(tabData);
-        return () => {
-            removeTab(tabData);
-        };
-    }, [id]);
-    useEffect(() => {
-        changeTab({
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        });
-    }, [title, isDisabled, isHidden]);
-    const isCurrent = id === currentTab;
-    return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }));
-};
-
-        

package/es/components/other/Base64Upload/Base64Upload.js

@@ -1,103 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import styled from 'styled-components';
-import { extractStyles, filterBaseProps, POSITION_STYLES, } from '../../../tasty';
-import { Button } from '../../actions';
-import { Block } from '../../Block';
-import { Text } from '../../content/Text';
-import { Flex } from '../../layout/Flex';
-const DEFAULT_STYLES = {
-    display: 'inline-flex',
-    padding: '.75x 1x',
-    gap: '1x',
-    flow: 'row',
-    placeItems: 'center',
-    fill: '#white',
-    border: true,
-    preset: 't3',
-};
-export const Base64Upload = styled(forwardRef(function Base64Upload(allProps, ref) {
-    const { onInput, ...props } = allProps;
-    const styles = extractStyles(props, POSITION_STYLES, DEFAULT_STYLES);
-    const [file, setFile] = useState();
-    const [error, setError] = useState('');
-    function onInputFile(e) {
-        if (!e.target)
-            return;
-        const localFile = e.target.files[0];
-        const reader = new FileReader();
-        setError('');
-        if (!localFile)
-            return;
-        if (!localFile.name.endsWith('.json')) {
-            setError('Incorrect format. JSON file is required');
-            return;
-        }
-        reader.onload = function () {
-            /**
-             * @type {string}
-             */
-            const text = String(reader.result);
-            let base64text;
-            try {
-                JSON.parse(text);
-                base64text = btoa(text);
-            }
-            catch (e) {
-                setError('Invalid JSON file');
-                console.error(e);
-                return;
-            }
-            onInput &&
-                onInput({
-                    encoded: base64text,
-                    raw: JSON.parse(text),
-                });
-            setFile(localFile.name);
-        };
-        try {
-            reader.readAsText(localFile);
-        }
-        catch (e) {
-            setError('Invalid file');
-        }
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, children: [_jsx(Flex, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: "0 1x", height: "($size - 1x + 2bw)", placeItems: "center", children: "Choose file" }), _jsx(Block, { color: "#dark-04", children: file || 'No file selected' }), _jsx("input", { type: "file", name: "base64", accept: ".json", onInput: onInputFile })] }), error && _jsx(Text.Danger, { color: "danger", children: error })] }));
-})) `
-  appearance: none;
-  cursor: var(--pointer);
-  outline: none;
-
-  & input {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    cursor: var(--pointer);
-    width: 100%;
-    height: 100%;
-  }
-
-  && {
-    border: var(--border-width) solid rgb(var(--dark-02-color-rgb) / 0.1);
-  }
-
-  &&:not([data-hovered]) {
-    background: rgb(var(--purple-color) / 0);
-  }
-
-  &&[data-hovered] {
-    background: rgb(var(--purple-color) / 0.1);
-  }
-`;
-
-        

package/es/icons/add-new-icon.js

@@ -1,129 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
- * Released under the MIT license.
- */
-
-#!/usr/bin/env node
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import prettier from 'prettier';
-(async function main() {
-    // Run svgo on all svg files in this folder
-    try {
-        console.log('Optimizing SVGs with svgo...');
-        execSync('svgo *.svg', { stdio: 'inherit' });
-    }
-    catch (err) {
-        console.error('Error running svgo:', err);
-        process.exit(1);
-    }
-    // Get all .svg files in the current directory
-    const allFiles = fs.readdirSync(process.cwd());
-    const svgFiles = allFiles.filter((file) => file.endsWith('.svg'));
-    for (const svgFile of svgFiles) {
-        const name = path.basename(svgFile, '.svg');
-        const tsxFileName = `${name}Icon.tsx`;
-        // Read the original SVG file
-        let svgContent = fs.readFileSync(svgFile, 'utf8');
-        // Replace '#43436B' with 'currentColor'
-        svgContent = svgContent.replace(/("#43436B"|"#000"|"#000000"|"black")/g, '"currentColor"');
-        // Ensure the <svg> tag has a viewBox attribute; if not, add one.
-        const svgTagMatch = svgContent.match(/<svg\b([^>]*)>/);
-        if (svgTagMatch) {
-            const svgTag = svgTagMatch[0];
-            if (!/viewBox=/.test(svgTag)) {
-                // Insert viewBox attribute right after <svg
-                const newSvgTag = svgTag.replace('<svg', '<svg viewBox="0 0 24 24"');
-                svgContent = svgContent.replace(svgTag, newSvgTag);
-            }
-        }
-        else {
-            console.warn(`No <svg> tag found in ${svgFile}. Skipping file.`);
-            continue;
-        }
-        // Convert dash-case attributes to camelCase (e.g. fill-rule -> fillRule)
-        svgContent = svgContent.replace(/(\s+)([a-z]+-[a-z0-9-]+)(\s*=)/gi, (match, pre, attrName, post) => {
-            const camelAttr = attrName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-            return pre + camelAttr + post;
-        });
-        // Build the TSX content using the template.
-        const tsxTemplate = `
-import { wrapIcon } from './wrap-icon';
-
-export const ${name}Icon = wrapIcon(
-  '${name}Icon',
-  (
-    ${svgContent.trim()}
-  ),
-);
-`;
-        // Format the content with local Prettier configuration (using babel-ts parser)
-        let formattedTSX;
-        try {
-            formattedTSX = await prettier.format(tsxTemplate, { parser: 'babel-ts' });
-        }
-        catch (err) {
-            console.error(`Error formatting ${tsxFileName} with Prettier:`, err);
-            formattedTSX = tsxTemplate; // Fallback to unformatted version
-        }
-        // Write the new TSX file
-        fs.writeFileSync(tsxFileName, formattedTSX, 'utf8');
-        console.log(`Created ${tsxFileName}`);
-    }
-    // Update index.ts to add new exports and sort them
-    const indexPath = path.join(process.cwd(), 'index.ts');
-    if (!fs.existsSync(indexPath)) {
-        console.error('index.ts not found in the current directory.');
-        process.exit(1);
-    }
-    let indexContent = fs.readFileSync(indexPath, 'utf8');
-    const lines = indexContent.split('\n');
-    // Locate the line with "export { wrapIcon } from './wrap-icon';"
-    const wrapIconLineIndex = lines.findIndex((line) => line.includes("export { wrapIcon } from './wrap-icon';"));
-    if (wrapIconLineIndex === -1) {
-        console.error("Couldn't find the export { wrapIcon } line in index.ts.");
-        process.exit(1);
-    }
-    // Get the export block above the wrapIcon export
-    let headerLines = lines.slice(0, wrapIconLineIndex);
-    const footerLines = lines.slice(wrapIconLineIndex);
-    // Ensure that for each SVG file there is an export line
-    svgFiles.forEach((svgFile) => {
-        const name = path.basename(svgFile, '.svg');
-        const exportLine = `export { ${name}Icon } from './${name}Icon';`;
-        // Add if not already present (ignoring extra whitespace)
-        if (!headerLines.some((line) => line.trim() === exportLine)) {
-            headerLines.push(exportLine);
-        }
-    });
-    // Remove empty lines and sort the export lines alphabetically
-    headerLines = headerLines
-        .filter((line) => line.trim() !== '')
-        .sort((a, b) => a.localeCompare(b));
-    // Reassemble the file content
-    const newIndexContent = [...headerLines, ...footerLines].join('\n');
-    // Format the updated index.ts with Prettier
-    let formattedIndex;
-    try {
-        formattedIndex = await prettier.format(newIndexContent, {
-            parser: 'babel-ts',
-        });
-    }
-    catch (err) {
-        console.error('Error formatting index.ts with Prettier:', err);
-        formattedIndex = newIndexContent;
-    }
-    // Write the updated index.ts
-    fs.writeFileSync(indexPath, formattedIndex, 'utf8');
-    console.log('Updated index.ts');
-    // Remove all initial SVG files
-    for (const svgFile of svgFiles) {
-        fs.unlinkSync(svgFile);
-        console.log(`Removed ${svgFile}`);
-    }
-})();
-
-        

package/es/tasty/providers/BreakpointsProvider.js

@@ -1,16 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext } from 'react';
-// Default breakpoints mirror Bootstrap defaults without md and xxl breakpoints.
-export const BreakpointsContext = createContext([980]);
-export function BreakpointsProvider({ value, children, }) {
-    return (_jsx(BreakpointsContext.Provider, { value: value, children: children }));
-}
-
-        

package/es/tasty/utils/getModCombinations.js

@@ -1,38 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
- * Released under the MIT license.
- */
-
-/**
- * Efficient iterative combination generator with early pruning
- * Generates combinations one by one and prunes branches early when conflicts are detected
- * @param array - Array of mod strings to generate combinations from
- * @param allowEmpty - Whether to include empty combination
- * @param conflictChecker - Function to detect conflicting combinations (required)
- */
-export function getModCombinationsIterative(array, allowEmpty, conflictChecker) {
-    if (!conflictChecker) {
-        throw new Error('getModCombinationsIterative requires a conflictChecker function');
-    }
-    if (array.length === 0) {
-        return allowEmpty ? [[]] : [];
-    }
-    // Use iterative approach with early pruning for better performance
-    const combinations = [[]];
-    for (let i = 0; i < array.length; i++) {
-        const currentLength = combinations.length;
-        for (let j = 0; j < currentLength; j++) {
-            const newCombination = [...combinations[j], array[i]];
-            // Early conflict detection - only add if no conflicts
-            if (!conflictChecker(newCombination)) {
-                combinations.push(newCombination);
-            }
-        }
-    }
-    // Filter out empty combination if not allowed, but keep others
-    return combinations.filter((combo) => allowEmpty || combo.length > 0);
-}
-
-