@cube-dev/ui-kit 0.9.4 → 0.9.7

package/dist/es/components/Root.js

@@ -1,46 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { GlobalStyles } from './GlobalStyles';
-import { Base } from './Base';
-import { PortalProvider } from './portal';
-import { BASE_STYLES, BLOCK_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
-import { Provider } from '../provider';
-import { ModalProvider } from '@react-aria/overlays';
-import { StyleSheetManager } from 'styled-components';
-import { TOKENS } from '../tokens';
-import { AlertDialogApiProvider } from './overlays/AlertDialog';
-const DEFAULT_STYLES = {
-    display: 'block',
-    preset: 't3',
-    ...Object.keys(TOKENS).reduce((map, key) => {
-        map[`@${key}`] = TOKENS[key];
-        return map;
-    }, {}),
-};
-const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
-export const Root = (allProps) => {
-    let { children, 
-    /** Raw css styles for body element */
-    bodyStyles, fonts, publicUrl, router, font, monospaceFont, applyLegacyTokens, ...props } = allProps;
-    const ref = useRef(null);
-    const [rootRef, setRootRef] = useState();
-    useEffect(() => {
-        if (!rootRef) {
-            // @ts-ignore
-            setRootRef(ref === null || ref === void 0 ? void 0 : ref.current);
-        }
-    }, []);
-    const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
-    return (_jsx(Provider, { router: router, root: rootRef, children: _jsx(StyleSheetManager, { disableVendorPrefixes: true, children: _jsxs(Base, { ref: ref, id: "cube-ui-kit-root", className: "root", ...filterBaseProps(props, { eventProps: true }), styles: styles, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), _jsx(PortalProvider, { value: ref, children: _jsx(AlertDialogApiProvider, { children: _jsx(ModalProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
-};
-
-        

package/dist/es/components/actions/Action.js

@@ -1,130 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useCallback } from 'react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { Base } from '../Base';
-import { useHover } from '@react-aria/interactions';
-import { useFocus } from '../../utils/interactions';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '../../utils/react';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { UIKitContext } from '../../provider';
-import { useFocusableRef } from '@react-spectrum/utils';
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export function openLink(href, target) {
-    const link = document.createElement('a');
-    link.href = href;
-    if (target) {
-        link.target = target === true ? '_blank' : target;
-    }
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-}
-export function parseTo(to) {
-    const newTab = to && typeof to === 'string' && to.startsWith('!');
-    const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
-    const href = to && typeof to === 'string'
-        ? newTab || nativeRoute
-            ? to.slice(1)
-            : to
-        : undefined;
-    return {
-        newTab,
-        nativeRoute,
-        href,
-    };
-}
-export function performClickHandler(evt, router, to, onPress) {
-    const { newTab, nativeRoute, href } = parseTo(to);
-    onPress === null || onPress === void 0 ? void 0 : onPress(evt);
-    if (!to)
-        return;
-    if (evt.shiftKey || evt.metaKey || newTab) {
-        openLink(href, true);
-        return;
-    }
-    if (nativeRoute) {
-        openLink(href || window.location.href);
-    }
-    else if (href && href.startsWith('#')) {
-        const id = href.slice(1);
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest',
-            });
-            return;
-        }
-    }
-    if (router) {
-        router.push(href);
-    }
-    else if (href) {
-        window.location.href = href;
-    }
-}
-const DEFAULT_STYLES = {
-    reset: 'button',
-    position: 'relative',
-    margin: 0,
-    fontFamily: 'var(--font)',
-    fontWeight: 'inherit',
-    border: 0,
-    padding: 0,
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-    transition: 'theme',
-    cursor: 'pointer',
-};
-const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Action = forwardRef(({ to, as, htmlType, label, theme, css, mods, onPress, ...props }, ref) => {
-    as = to ? 'a' : as || 'button';
-    const router = useContext(UIKitContext).router;
-    const isDisabled = props.isDisabled;
-    const { newTab, href } = parseTo(to);
-    const target = newTab ? '_blank' : undefined;
-    const domRef = useFocusableRef(ref);
-    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    const customOnPress = useCallback((evt) => {
-        performClickHandler(evt, router, to, onPress);
-    }, [router, to, onPress]);
-    let { buttonProps, isPressed } = useButton({
-        ...props,
-        onPress: customOnPress,
-    }, domRef);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let { focusProps, isFocused } = useFocus({ isDisabled }, true);
-    const customProps = to
-        ? {
-            onClick(evt) {
-                evt.preventDefault();
-            },
-        }
-        : {};
-    return (_jsx(Base, { mods: {
-            hovered: isHovered && !isDisabled,
-            pressed: isPressed && !isDisabled,
-            focused: isFocused && !isDisabled,
-            disabled: isDisabled,
-            ...mods,
-        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, ref: domRef, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href, css: css }, void 0));
-});
-
-        

package/dist/es/components/actions/Button/Button.js

@@ -1,309 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Action } from '../Action';
-import { LoadingOutlined } from '@ant-design/icons';
-import { useContextStyles } from '../../../providers/StylesProvider';
-import { accessibilityWarning } from '../../../utils/warnings';
-export function provideStyles({ size, type, theme, isLoading, icon, children, label, }) {
-    children = children || icon ? children : label;
-    return {
-        ...STYLES_BY_SIZE[size || 'default'],
-        ...DEFAULT_STYLES,
-        ...(theme === 'danger' ? DANGER_STYLES_BY_TYPE : DEFAULT_STYLES_BY_TYPE)[type || 'default'],
-        ...((isLoading || icon) && !children
-            ? {
-                padding: '0',
-                width: '(2.5x + 1lh)',
-                height: '(2.5x + 1lh)',
-            }
-            : null),
-    };
-}
-const DEFAULT_STYLES_BY_TYPE = {
-    primary: {
-        border: {
-            '': '#clear',
-            pressed: '#purple-text',
-        },
-        fill: {
-            hovered: '#purple-text',
-            'pressed | !hovered': '#purple',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#white',
-            '[disabled]': '#dark.30',
-        },
-    },
-    default: {
-        border: {
-            '': '#clear',
-            pressed: '#purple.30',
-        },
-        fill: {
-            '': '#purple.10',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#purple',
-            '[disabled]': '#dark.30',
-        },
-    },
-    clear: {
-        border: {
-            '': '#clear',
-            pressed: '#purple-text.10',
-        },
-        fill: {
-            '': '#purple.0',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#purple.0',
-        },
-        color: {
-            '': '#purple-text',
-            '[disabled]': '#dark.30',
-        },
-    },
-    outline: {
-        border: {
-            '': '#purple.30',
-            pressed: '#purple-text.10',
-            '[disabled]': '#dark.12',
-        },
-        fill: {
-            '': '#purple.0',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#purple.0',
-        },
-        color: {
-            '': '#purple-text',
-            '[disabled]': '#dark.30',
-        },
-    },
-    link: {
-        fontWeight: 500,
-        padding: '0',
-        radius: {
-            '': '0',
-            focused: true,
-        },
-        fill: '#clear',
-        color: {
-            '': '#purple-text',
-            pressed: '#purple',
-            '[disabled]': '#dark.30',
-        },
-        shadow: {
-            '': '0 @border-width 0 0 #purple-03.20',
-            focused: '0 0 0 @outline-width #purple-03.20',
-            'pressed | hovered | [disabled]': '0 0 0 0 #purple.20',
-        },
-    },
-    danger: {
-        border: {
-            '': '#clear',
-            pressed: '#danger-text',
-        },
-        fill: {
-            '': '#danger',
-            pressed: '#danger',
-            hovered: '#danger-text',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#white',
-            '[disabled]': '#dark.30',
-        },
-    },
-    neutral: {
-        border: '0',
-        fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#dark.75',
-            hovered: '#dark.75',
-            pressed: '#purple',
-            '[disabled]': '#dark.30',
-        },
-        padding: '(1x - 1px) (1.5x - 1px)',
-        height: 'min (2x + 1lh)',
-    },
-};
-const DANGER_STYLES_BY_TYPE = {
-    primary: {
-        border: {
-            '': '#clear',
-            pressed: '#danger-text',
-        },
-        fill: {
-            hovered: '#danger-text',
-            'pressed | !hovered': '#danger',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#white',
-            '[disabled]': '#dark.30',
-        },
-    },
-    default: {
-        border: {
-            '': '#clear',
-            pressed: '#danger.30',
-        },
-        fill: {
-            '': '#danger.05',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#danger',
-            '[disabled]': '#dark.30',
-        },
-    },
-    clear: {
-        border: {
-            '': '#clear',
-            pressed: '#danger-text.10',
-        },
-        fill: {
-            '': '#danger.0',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#danger.0',
-        },
-        color: {
-            '': '#danger-text',
-            '[disabled]': '#dark.30',
-        },
-    },
-    outline: {
-        border: {
-            '': '#danger.30',
-            pressed: '#danger-text.10',
-            '[disabled]': '#dark.04',
-        },
-        fill: {
-            '': '#danger.0',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#danger.0',
-        },
-        color: {
-            '': '#danger-text',
-            '[disabled]': '#dark.30',
-        },
-    },
-    link: {
-        ...DEFAULT_STYLES_BY_TYPE.link,
-        color: {
-            '': '#danger-text',
-            pressed: '#danger',
-            '[disabled]': '#dark.30',
-        },
-        shadow: {
-            '': '0 @border-width 0 0 #danger.20',
-            focused: '0 0 0 @outline-width #danger.20',
-            'pressed | hovered | [disabled]': '0 0 0 0 #danger.20',
-        },
-    },
-    neutral: {
-        border: '0',
-        fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#dark.75',
-            hovered: '#dark.75',
-            pressed: '#danger',
-            '[disabled]': '#dark.30',
-        },
-        textAlign: 'left',
-        padding: '(1x - 1px) (1.5x - 1px)',
-        height: 'min (2x + 1lh)',
-    },
-};
-const STYLES_BY_SIZE = {
-    small: {
-        padding: '(.75x - 1px) (1.5x - 1px)',
-    },
-    default: {
-        padding: '(1.25x - 1px) (2x - 1px)',
-    },
-};
-const DEFAULT_STYLES = {
-    display: 'inline-grid',
-    placeItems: 'center stretch',
-    placeContent: 'center',
-    gap: '1x',
-    flow: 'column',
-    radius: true,
-    fontWeight: 500,
-    preset: 'default',
-    textDecoration: 'none',
-    transition: 'theme',
-    whiteSpace: 'nowrap',
-    '& .anticon.anticon-loading': {
-        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
-        // lineHeight: 0,
-    },
-};
-export const Button = forwardRef((allProps, ref) => {
-    let { type, size, label, styles, children, theme, css, icon, mods, ...props } = allProps;
-    const isDisabled = props.isDisabled;
-    const isLoading = props.isLoading;
-    const isSelected = props.isSelected;
-    const propsForStyles = {
-        ...props,
-        label,
-        isLoading,
-        isDisabled,
-        theme,
-        size,
-        type,
-        icon,
-        children,
-    };
-    const contextStyles = useContextStyles('Button', propsForStyles);
-    if (!children) {
-        if (icon) {
-            if (!label) {
-                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.');
-            }
-        }
-        else {
-            if (!label) {
-                accessibilityWarning('If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.');
-            }
-        }
-    }
-    children = children || icon ? children : label;
-    styles = {
-        ...provideStyles(propsForStyles),
-        ...contextStyles,
-        ...styles,
-    };
-    if (isLoading && !children && styles) {
-        styles.fontSize = '1em';
-        styles.lineHeight = '1em';
-    }
-    return (_jsxs(Action, { as: props.to ? 'a' : undefined, css: css, ...props, ref: ref, isDisabled: isLoading || isDisabled, theme: theme, "data-type": type, "data-is-loading": isLoading ? '' : undefined, "data-is-selected": isSelected ? '' : undefined, "data-size": size, mods: mods, styles: styles, label: label, children: [icon || isLoading ? !isLoading ? icon : _jsx(LoadingOutlined, {}, void 0) : null, children] }, void 0));
-});
-
-        

package/dist/es/components/actions/Button/Submit.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Button } from './Button';
-import { useProviderProps } from '../../../provider';
-import { useFormProps } from '../../forms/Form/Form';
-function Submit(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    const { form, ...otherProps } = props;
-    const formData = form.getFieldsValue();
-    const isValid = !Object.keys(formData).find((name) => {
-        return form.isFieldInvalid(name);
-    });
-    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form.isSubmitting, isDisabled: !isValid, ...otherProps }, void 0));
-}
-const _Submit = forwardRef(Submit);
-export { _Submit as Submit };
-
-        

package/dist/es/components/actions/Button/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-export * from './Button';
-export * from './Submit';
-
-        

package/dist/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,25 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useSlotProps } from '../../../utils/react';
-import { Space } from '../../layout/Space';
-import { useContextStyles } from '../../../providers/StylesProvider';
-export const ButtonGroup = forwardRef((props, ref) => {
-    let { styles, ...otherProps } = useSlotProps(props, 'buttonGroup');
-    const contextStyles = useContextStyles('ButtonGroup', otherProps);
-    styles = styles
-        ? {
-            ...contextStyles,
-            ...styles,
-        }
-        : contextStyles;
-    return _jsx(Space, { gridArea: "buttonGroup", styles: styles, ref: ref, ...props }, void 0);
-});
-
-        

package/dist/es/components/actions/index.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { Button as __Button } from './Button';
-import { ButtonGroup } from './ButtonGroup/ButtonGroup';
-const Button = Object.assign(__Button, { Group: ButtonGroup });
-export * from './Button';
-export * from './Action';
-export { Button };
-
-        

package/dist/es/components/content/ActiveZone/ActiveZone.js

@@ -1,41 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps } from '../../../utils/react';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useFocusableRef } from '@react-spectrum/utils';
-import { useFocusable } from '@react-aria/focus';
-import { useFocus } from '../../../utils/interactions';
-const DEFAULT_STYLES = {
-    display: 'inline-block',
-    position: 'relative',
-    opacity: {
-        '': 1,
-        '[disabled]': 0.4,
-    },
-    transition: 'theme',
-};
-const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const ActiveZone = ({ as, label, onClick, ...props }, ref) => {
-    const isDisabled = props.isDisabled;
-    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    const domRef = useFocusableRef(ref);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let { focusProps, isFocused } = useFocus({ isDisabled });
-    let { focusableProps } = useFocusable(props, domRef);
-    return (_jsx(Base, { "data-is-hovered": isHovered && !isDisabled ? '' : null, "data-is-focused": isFocused && !isDisabled ? '' : null, "data-is-disabled": isDisabled || null, "aria-label": label, ...mergeProps(hoverProps, focusProps, focusableProps, { onClick }, filterBaseProps(props, { eventProps: true })), tabIndex: props.excludeFromTabOrder || isDisabled ? -1 : 0, as: as, styles: styles, ref: domRef }, void 0));
-};
-const _ActiveZone = forwardRef(ActiveZone);
-export { _ActiveZone as ActiveZone };
-
-        

package/dist/es/components/content/Avatar/Avatar.js

@@ -1,36 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'grid',
-    gap: '1x',
-    flow: 'row',
-    fill: '#purple',
-    color: '#white',
-    radius: 'round',
-    placeContent: 'center',
-    width: '@avatar-size @avatar-size @avatar-size',
-    height: '@avatar-size @avatar-size @avatar-size',
-    fontSize: 'calc(@avatar-size / 2)',
-    lineHeight: 'calc(@avatar-size / 2)',
-    fontWeight: 500,
-};
-export const Avatar = forwardRef(({ size = '4x', icon, children, ...props }, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        '--avatar-size': size,
-    });
-    return (_jsxs(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, "data-theme": "special", children: [icon, children] }, void 0));
-});
-
-