@cube-dev/ui-kit 0.56.3 → 0.58.0

package/cjs/components/GlobalStyles.js

@@ -1,385 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyles = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = require("styled-components");
-const tokens_1 = require("../tokens");
-const BODY_STYLES = {
-    'overscroll-behavior-y': 'none',
-    'background-color': 'white !important',
-    'font-family': 'var(--font)',
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    margin: '0',
-    padding: '0',
-    color: 'var(--dark-02-color)',
-    'font-size': '14px',
-    'line-height': '20px',
-    'letter-spacing': '0.02em',
-    'font-weight': '400',
-};
-const fontsProvider = ({ publicUrl = '', fontDisplay = 'swap' }) => `
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Regular.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Medium.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Medium.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-SemiBold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-SemiBold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/Inter-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Bold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Source Code Pro';
-    src: url('${publicUrl}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
-      url('${publicUrl}/fonts/SourceCodePro-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: ${fontDisplay};
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 700;
-    font-display: ${fontDisplay};
-    src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'text-security-disc';
-    src: url(${publicUrl}/fonts/text-security-disc.woff2) format('woff2'),
-      url(${publicUrl}/fonts/text-security-disc.woff) format('woff');
-  }
-`;
-const GlobalStylesElement = (0, styled_components_1.createGlobalStyle) `
-  body {
-    ${({ $applyLegacyTokens }) => {
-    return $applyLegacyTokens
-        ? Object.entries(tokens_1.TOKENS)
-            .map(([key, value]) => {
-            // `inherit` value in custom property is reserved for inheritance behavior
-            if (value === 'inherit') {
-                // so we should rewrite it to contain the actual `inherit` value.
-                value = `var(--non-existent-${key}, inherit)`;
-            }
-            return `--${key}: ${value};`;
-        })
-            .join('\n    ')
-        : '';
-}}
-    ${({ $bodyStyles }) => {
-    return Object.entries({ ...BODY_STYLES, ...$bodyStyles })
-        .map(([key, value]) => {
-        return `${key}: ${value};`;
-    })
-        .join('\n    ');
-}}
-  }
-
-  html {
-    overscroll-behavior-y: none;
-    --font: ${({ $font }) => $font ||
-    'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --monospace-font: ${({ $monospaceFont }) => `${$monospaceFont ? `${$monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;`}
-  }
-
-  kbd {
-    font-family: var(--c2-font-family);
-    font-weight: var(--c2-font-weight);
-    font-size: var(--c2-font-size);
-    border: var(--border-width) solid var(--dark-04-color);
-    background-color: white;
-    color: var(--dark-color);
-    border-radius: var(--radius);
-    padding: 0 var(--outline-width);
-  }
-
-  .cube-animation-spin {
-    animation: cube-animation-spin 1s linear infinite;
-  }
-
-  @keyframes cube-animation-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-  }
-
-  .cube-notification-container {
-    min-width: 288px;
-    max-width: 340px;
-    width: calc(100vw - 32px);
-    position: fixed;
-    top: 32px;
-    right: 16px;
-    z-index: 999999;
-  }
-
-  .cube-notifications {
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-
-  .cube-notification-enter {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-  }
-
-  .cube-notification-enter-active {
-    opacity: 1;
-    max-height: 56px;
-    margin-bottom: 8px;
-    transform: translate(0, 0);
-    transition: all 300ms ease-in;
-
-    & > * {
-      margin-bottom: 0px;
-    }
-  }
-
-  .cube-notification-exit {
-    opacity: 1;
-    margin-bottom: 8px;
-    max-height: 56px;
-    transform: translate(0, 0);
-  }
-
-  .cube-notification-exit-active {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-    transition: all 300ms ease-in;
-
-    & > * {
-      margin-bottom: 0px;
-    }
-  }
-
-  b, strong {
-    font-weight: var(--bold-font-weight, 700);
-  }
-
-  [type=reset], [type=submit], button, html [type=button] {
-    -webkit-appearance: none;
-  }
-
-  code {
-    font-family: var(--monospace-font);
-  }
-
-  ${({ $fonts, $publicUrl, $fontDisplay }) => $fonts === false
-    ? ''
-    : fontsProvider({
-        publicUrl: $publicUrl,
-        ...($fontDisplay ? { fontDisplay: $fontDisplay } : {}),
-    })}
-    // Prism Code
-  code[class*="language-"],
-  pre[class*="language-"] {
-    color: var(--dark-color);
-    background: none;
-    font-family: var(--monospace-font);
-    text-align: left;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 20px;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    border-radius: 6px;
-    border: none;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-    text-shadow: none;
-    background: rgba(var(--purple-color-rgb), .2);
-  }
-
-  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-  code[class*="language-"]::selection, code[class*="language-"] ::selection {
-    text-shadow: none;
-    background: rgba(var(--purple-color-rgb), .2);
-  }
-
-  @media print {
-    code[class*="language-"],
-    pre[class*="language-"] {
-      text-shadow: none;
-    }
-  }
-
-  /* Code blocks */
-  pre[class*="language-"] {
-    overflow: auto;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*="language-"] {
-    border-radius: .3em;
-    white-space: normal;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: var(--dark-03-color);
-  }
-
-  .token.tag,
-  .token.operator,
-  .token.punctuation {
-    color: #993388;
-  }
-
-  .namespace {
-    opacity: .7;
-  }
-
-  .token.property,
-  .token.boolean,
-  .token.constant,
-  .token.symbol,
-  .token.key,
-  .token.keyword,
-  .token.deleted {
-    color: var(--pink-color);
-  }
-
-  .token.entity,
-  .token.number {
-    color: #30A666;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: var(--purple-text-color);
-  }
-
-  .token.url,
-  .language-css .token.string,
-  .style .token.string {
-    color: var(--dark-color);
-  }
-
-  .token.attr-value {
-    color: var(--dark-color);
-  }
-
-  .token.atrule,
-  .token.keyword {
-    font-weight: 500;
-  }
-
-  .token.function,
-  .token.class-name {
-    color: var(--pink-color);
-  }
-
-  .token.regex,
-  .token.important,
-  .token.variable {
-    color: var(--pink-color);
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .token.inserted-sign {
-    background-color: #e6ffed;
-    color: #30A666;
-  }
-
-  .token.deleted-sign {
-    background-color: #ffeef0;
-    color: (--danger-color);
-  }
-`;
-const GlobalStyles = (props) => {
-    const newProps = {};
-    Object.entries(props).forEach(([key, value]) => {
-        if (value !== undefined) {
-            newProps[`$${key}`] = value;
-        }
-    });
-    return (0, jsx_runtime_1.jsx)(GlobalStylesElement, { ...newProps });
-};
-exports.GlobalStyles = GlobalStyles;
-
-        

package/cjs/components/GridProvider.js

@@ -1,89 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../tasty");
-const react_2 = require("../utils/react");
-const tasty_2 = require("../tasty");
-const GridElement = (0, tasty_2.tasty)({
-    styles: {
-        display: 'contents',
-    },
-});
-const COLUMN_WIDTH = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
-exports.GridProvider = (0, react_1.forwardRef)(function GridProvider(props, outerRef) {
-    let ref = (0, react_2.useCombinedRefs)(outerRef);
-    let { children, columns = 2, gap = '0', width: forcedWidth, initialWidth, } = props;
-    let [width, setWidth] = (0, react_1.useState)(forcedWidth || initialWidth || '100vw');
-    const resizeCallback = (0, react_1.useCallback)(() => {
-        const el = ref?.current?.parentElement;
-        if (!el)
-            return;
-        const computedStyle = getComputedStyle(el);
-        const containerWidth = el.clientWidth -
-            parseFloat(computedStyle.paddingLeft) -
-            parseFloat(computedStyle.paddingRight);
-        setWidth(`${containerWidth}px`);
-    }, [ref, columns, gap]);
-    (0, react_1.useEffect)(() => {
-        if (forcedWidth)
-            return;
-        const el = ref && ref.current && ref.current.parentNode;
-        if (!el)
-            return;
-        let sensor;
-        Promise.resolve().then(() => __importStar(require('../utils/ResizeSensor'))).then((module) => module.ResizeSensor)
-            .then((ResizeSensor) => {
-            sensor = new ResizeSensor(el, resizeCallback);
-        });
-        return () => {
-            if (sensor) {
-                sensor.detach();
-            }
-        };
-    }, [resizeCallback]);
-    (0, react_1.useEffect)(() => {
-        if (forcedWidth)
-            return;
-        resizeCallback();
-    }, [resizeCallback]);
-    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: {
-            '--grid-width': width,
-            '--columns-amount': columns,
-            '--column-gap': gap,
-            '--column-width': COLUMN_WIDTH,
-        }, children: children }));
-});
-
-        

package/cjs/components/HiddenInput.js

@@ -1,38 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenInput = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.HiddenInput = styled_components_1.default.input `
-  &&&&& {
-    display: block;
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-    margin: 0;
-    overflow: visible;
-    box-sizing: border-box;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    opacity: 0.0001;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    cursor: ${({ $isButton }) => ($isButton ? 'pointer' : 'default')};
-  }
-`;
-
-        

package/cjs/components/OpenTrasition.js

@@ -1,34 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenTransition = OpenTransition;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_transition_group_1 = require("react-transition-group");
-const OPEN_STATES = {
-    entering: false,
-    entered: true,
-};
-/**
- * Timeout issues adding css animations to enter may be related to
- * https://github.com/reactjs/react-transition-group/issues/189 or
- * https://github.com/reactjs/react-transition-group/issues/22
- * my VM isn't good enough to debug accurately and get a better answer.
- *
- * As a result, use enter 0 so that is-open is applied once entered
- * it doesn't matter if we know when the css-animation is done on entering
- * for exiting though, give time for the css-animation to play
- * before removing from the DOM
- * **note** hitting esc bypasses exit animation for anyone testing.
- */
-function OpenTransition(props) {
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.Transition, { timeout: { enter: 0, exit: 350 }, ...props, children: (state) => react_1.Children.map(props.children, (child) => child && (0, react_1.cloneElement)(child, { isOpen: !!OPEN_STATES[state] })) }));
-}
-
-        

package/cjs/components/Root.js

@@ -1,92 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Root = Root;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const styled_components_1 = require("styled-components");
-const tasty_1 = require("../tasty");
-const provider_1 = require("../provider");
-const tokens_1 = require("../tokens");
-const react_2 = require("../utils/react");
-const TrackingProvider_1 = require("../providers/TrackingProvider");
-const portal_1 = require("./portal");
-const GlobalStyles_1 = require("./GlobalStyles");
-const AlertDialog_1 = require("./overlays/AlertDialog");
-const NotificationsProvider_1 = require("./overlays/NewNotifications/NotificationsContext/NotificationsProvider");
-const RootElement = (0, tasty_1.tasty)({
-    id: 'cube-ui-kit-root',
-    className: 'root',
-});
-const DEFAULT_STYLES = {
-    display: 'block',
-    preset: 't3',
-    ...Object.keys(tokens_1.TOKENS).reduce((map, key) => {
-        map[`@${key}`] = tokens_1.TOKENS[key];
-        return map;
-    }, {}),
-};
-const STYLES = [...tasty_1.BASE_STYLES, ...tasty_1.BLOCK_STYLES];
-const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
-    ? CSS.supports('height: 100dvh')
-    : false;
-function Root(allProps) {
-    let { children, 
-    /** Raw css styles for body element */
-    bodyStyles, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, router, font, monospaceFont, applyLegacyTokens, tracking, style, ...props } = allProps;
-    const ref = (0, react_1.useRef)(null);
-    const [rootRef, setRootRef] = (0, react_1.useState)();
-    // We need to measure the window's height in JS rather than using percentages in CSS
-    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
-    // does not work properly because there is nothing to base the percentage on.
-    // We cannot use vh units because mobile browsers adjust the window height dynamically
-    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
-    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
-    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
-    let viewport = (0, react_2.useViewportSize)({ isDisabled: IS_DVH_SUPPORTED });
-    let [height, setHeight] = (0, react_1.useState)(IS_DVH_SUPPORTED ? undefined : viewport.height);
-    let timeoutRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        if (IS_DVH_SUPPORTED && typeof window !== 'undefined') {
-            return;
-        }
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        // When the height is decreasing, and the keyboard is visible
-        // (visual viewport smaller than layout viewport), delay setting
-        // the new max height until after the animation is complete
-        // so that there isn't an empty space under the tray briefly.
-        if (viewport.height < (height || 0) &&
-            viewport.height < window.innerHeight) {
-            timeoutRef.current = setTimeout(() => {
-                setHeight(viewport.height);
-            }, 500);
-        }
-        else {
-            setHeight(viewport.height);
-        }
-    }, [height, viewport.height]);
-    (0, react_1.useEffect)(() => {
-        if (!rootRef) {
-            // @ts-ignore
-            setRootRef(ref?.current);
-        }
-    }, []);
-    const styles = (0, tasty_1.extractStyles)(props, STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, breakpoints: breakpoints, children: (0, jsx_runtime_1.jsx)(TrackingProvider_1.TrackingProvider, { event: tracking?.event, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { children: (0, jsx_runtime_1.jsxs)(RootElement, { ref: ref, "data-font-display": fontDisplay, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, style: {
-                        '--cube-dynamic-viewport-height': height
-                            ? height + 'px'
-                            : '100dvh',
-                        ...style,
-                    }, children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), (0, jsx_runtime_1.jsx)(react_aria_1.ModalProvider, { children: (0, jsx_runtime_1.jsx)(portal_1.PortalProvider, { value: ref, children: (0, jsx_runtime_1.jsx)(NotificationsProvider_1.NotificationsProvider, { rootRef: ref, children: (0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialogApiProvider, { children: children }) }) }) })] }) }) }) }));
-}
-
-        

package/cjs/components/actions/Action/Action.js

@@ -1,42 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.56.3
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Action = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../../../tasty");
-const use_action_1 = require("../use-action");
-const DEFAULT_ACTION_STYLES = {
-    reset: 'button',
-    position: 'relative',
-    margin: 0,
-    preset: 'inherit',
-    border: 0,
-    padding: 0,
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-    transition: 'theme',
-    cursor: 'pointer',
-    textDecoration: 'none',
-    fill: '#clear',
-};
-const ActionElement = (0, tasty_1.tasty)({
-    as: 'button',
-    styles: DEFAULT_ACTION_STYLES,
-});
-const STYLE_PROPS = [...tasty_1.CONTAINER_STYLES, ...tasty_1.TEXT_STYLES];
-exports.Action = (0, react_1.forwardRef)(function Action({ to, as, download, htmlType, label, theme, mods, onPress, ...props }, ref) {
-    const { actionProps } = (0, use_action_1.useAction)({ to, as, htmlType, label, onPress, mods, ...props }, ref);
-    const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
-    return ((0, jsx_runtime_1.jsx)(ActionElement, { "data-theme": theme, download: download, ...actionProps, isDisabled: undefined, styles: styles }));
-});
-
-