@veracity/vui 0.0.2 → 0.0.4

package/spinner/consts.d.ts

@@ -0,0 +1,34 @@
+export declare const positionMapping: {
+    bottom: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mb: number;
+        };
+    };
+    left: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            ml: number;
+        };
+    };
+    right: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mr: number;
+        };
+    };
+    top: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mt: number;
+        };
+    };
+};

package/spinner/consts.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionMapping = void 0;
+exports.positionMapping = {
+    bottom: {
+        container: { flexDirection: 'column' },
+        circle: { mb: 1 }
+    },
+    left: {
+        container: { flexDirection: 'row-reverse' },
+        circle: { ml: 1 }
+    },
+    right: {
+        container: { flexDirection: 'row' },
+        circle: { mr: 1 }
+    },
+    top: {
+        container: { flexDirection: 'column-reverse' },
+        circle: { mt: 1 }
+    }
+};

package/spinner/index.d.ts

@@ -0,0 +1,3 @@
+export * from './spinner';
+export * from './spinner.types';
+export { default } from './spinner';

package/spinner/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./spinner"), exports);
+__exportStar(require("./spinner.types"), exports);
+var spinner_1 = require("./spinner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(spinner_1).default; } });

package/spinner/spinner.d.ts

@@ -0,0 +1,4 @@
+import { SpinnerCircleStyleProps, SpinnerProps } from './spinner.types';
+export declare const SpinnerCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpinnerCircleStyleProps, never>;
+export declare const Spinner: import("../core").VuiComponent<"div", SpinnerProps>;
+export default Spinner;

package/spinner/spinner.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = exports.SpinnerCircle = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var consts_1 = require("./consts");
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var circleGenerator = styled_components_1.compose(styled_components_1.animation, styled_components_1.borders, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+exports.SpinnerCircle = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(circleGenerator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), circleGenerator, function (p) { return p.speed; });
+exports.Spinner = core_1.forwardRef(function (props, ref) {
+    var className = props.className, emptyColor = props.emptyColor, size = props.size, _a = props.speed, speed = _a === void 0 ? '0.8s' : _a, text = props.text, _b = props.textPosition, textPosition = _b === void 0 ? 'bottom' : _b, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);
+    var styles = core_1.useStyleConfig('Spinner', props);
+    var isCustomSize = typeof size === 'number';
+    var positionProps = consts_1.positionMapping[textPosition];
+    var circleProps = utils_1.filterUndefined({
+        borderColor: emptyColor,
+        borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
+        h: isCustomSize ? size : undefined,
+        w: isCustomSize ? size : undefined
+    });
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: utils_1.cs('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", flexShrink: "0", speed: speed }, styles.circle, positionProps.circle, circleProps)),
+        text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
+});
+exports.Spinner.displayName = 'Spinner';
+exports.default = exports.Spinner;
+var templateObject_1;

package/spinner/spinner.types.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '../box';
+import { BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface SpinnerCircleStyleProps extends BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+    speed?: string;
+}
+export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {
+    colorScheme?: 'blue' | 'grey' | 'prussian';
+    emptyColor?: string;
+    speed?: string;
+    size?: ThemingProps<'Spinner'>['size'] | number;
+    text?: string;
+    textPosition?: 'bottom' | 'left' | 'right' | 'top';
+    thickness?: number;
+}

package/spinner/spinner.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/spinner/theme.d.ts

@@ -0,0 +1,68 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    container: {
+        color: string;
+    };
+    circle: {
+        borderColor: string;
+        borderTopColor: string;
+        borderRightColor: string;
+    };
+    text: {};
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        xs: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        sm: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        md: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        lg: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        card: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        page: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/spinner/theme.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var container = {
+        color: c + ".60"
+    };
+    var circle = {
+        borderColor: c + ".20",
+        borderTopColor: c + ".60",
+        borderRightColor: c + ".60"
+    };
+    var text = {};
+    return { container: container, circle: circle, text: text };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'page',
+    variant: 'default'
+};
+var parts = ['container', 'circle', 'text'];
+var sizes = {
+    xs: {
+        circle: {
+            borderWidth: 1,
+            h: 16,
+            w: 16
+        }
+    },
+    sm: {
+        circle: {
+            borderWidth: 2,
+            h: 24,
+            w: 24
+        }
+    },
+    md: {
+        circle: {
+            borderWidth: 3,
+            h: 32,
+            w: 32
+        }
+    },
+    lg: {
+        circle: {
+            borderWidth: 3,
+            h: 40,
+            w: 40
+        }
+    },
+    card: {
+        circle: {
+            borderWidth: 4,
+            h: 60,
+            w: 60
+        }
+    },
+    page: {
+        circle: {
+            borderWidth: 5,
+            h: 80,
+            w: 80
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/styles/animations.d.ts

@@ -5,3 +5,13 @@ export declare const fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n
 export declare const fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 export declare const fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 export declare const spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+declare const _default: {
+    fadeDown: string;
+    fadeIn: string;
+    fadeLeft: string;
+    fadeOut: string;
+    fadeRight: string;
+    fadeUp: string;
+    spin: string;
+};
+export default _default;

package/styles/animations.js

@@ -8,3 +8,12 @@ exports.fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
 exports.fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 exports.fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 exports.spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+exports.default = {
+    fadeDown: 'fadeDown 0.3s ease-in-out',
+    fadeIn: 'fadeIn 0.3s ease-in-out',
+    fadeLeft: 'fadeLeft 0.3s ease-in-out',
+    fadeOut: 'fadeOut 0.3s ease-in-out',
+    fadeRight: 'fadeRight 0.3s ease-in-out',
+    fadeUp: 'fadeUp 0.3s ease-in-out',
+    spin: 'spin 1s linear infinite'
+};

package/styles/colors.d.ts

@@ -0,0 +1,171 @@
+export declare const blue: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const green: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const grey: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const pink: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const prussian: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const red: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const yellow: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+declare const _default: {
+    blue: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    green: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    grey: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    pink: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    prussian: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    red: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    yellow: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+};
+export default _default;

package/styles/colors.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
+exports.blue = {
+    10: '#f6fbff',
+    20: '#e2f1ff',
+    30: '#c2e1fe',
+    40: '#a1cef9',
+    50: '#77baf9',
+    60: '#48a1f3',
+    70: '#1e86e5',
+    80: '#0067c5',
+    90: '#075094',
+    100: '#003f79'
+};
+exports.green = {
+    10: '#efffed',
+    20: '#d8ffd3',
+    30: '#bdfbb6',
+    40: '#9df291',
+    50: '#82db77',
+    60: '#68c35e',
+    70: '#4ea344',
+    80: '#36842d',
+    90: '#276121',
+    100: '#024019'
+};
+exports.grey = {
+    10: '#f7f8f9',
+    20: '#f1f3f5',
+    30: '#e1e6e9',
+    40: '#c3ccd3',
+    50: '#a5b3bd',
+    60: '#8799a7',
+    70: '#768b9c',
+    80: '#698091',
+    90: '#586c7a',
+    100: '#465663'
+};
+exports.pink = {
+    10: '#fff3fd',
+    20: '#ffddf9',
+    30: '#ffbdf3',
+    40: '#ff8eea',
+    50: '#ff55df',
+    60: '#ff0ed2',
+    70: '#ee00c1',
+    80: '#da00b1',
+    90: '#a00082',
+    100: '#72005c'
+};
+exports.prussian = {
+    10: '#eff3f5',
+    20: '#c5dce8',
+    30: '#91bbcf',
+    40: '#5690ac',
+    50: '#32718e',
+    60: '#0d5071',
+    70: '#003b57',
+    80: '#002a3e',
+    90: '#001620',
+    100: '#000b11'
+};
+exports.red = {
+    10: '#fff1f1',
+    20: '#ffe4e4',
+    30: '#ffc8c8',
+    40: '#faa7ab',
+    50: '#fb7b81',
+    60: '#f64d55',
+    70: '#e84148',
+    80: '#d6383f',
+    90: '#b62f3a',
+    100: '#962730'
+};
+exports.yellow = {
+    10: '#fffde7',
+    20: '#fff8bd',
+    30: '#ffed7a',
+    40: '#ffe43a',
+    50: '#ffd600',
+    60: '#fec600',
+    70: '#f4b40d',
+    80: '#e29c13',
+    90: '#b67b08',
+    100: '#83591a'
+};
+exports.default = {
+    blue: exports.blue,
+    green: exports.green,
+    grey: exports.grey,
+    pink: exports.pink,
+    prussian: exports.prussian,
+    red: exports.red,
+    yellow: exports.yellow
+};

package/styles/durations.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    instant: string;
+    fast: string;
+    normal: string;
+    slow: string;
+};
+export default _default;

package/styles/durations.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    instant: '100ms',
+    fast: '200ms',
+    normal: '300ms',
+    slow: '400ms'
+};

package/styles/fontFaces.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/styles/fontFaces.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("../core");
+exports.default = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";

package/styles/fontSizes.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export default _default;

package/styles/fontSizes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18
+};

package/styles/fontWeights.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    regular: string;
+    medium: string;
+    demi: string;
+    bold: string;
+};
+export default _default;

package/styles/fontWeights.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    regular: '400',
+    medium: '500',
+    demi: '600',
+    bold: '700'
+};

package/styles/fonts.d.ts

@@ -1,2 +1,4 @@
-declare const fonts: string;
-export default fonts;
+declare const _default: {
+    avenir: string;
+};
+export default _default;