@veracity/vui 0.2.0 → 0.2.2

package/theme/components.d.ts

@@ -26,16 +26,13 @@ declare const _default: {
                 h: number;
                 iconSize: string;
             };
+            xl: {
+                fontSize: string;
+                h: number;
+                iconSize: string;
+            };
         };
         variants: {
-            outlined: (props: import("..").Dict<any>) => {
-                borderColor: string;
-                borderWidth: number;
-                hoverBg: string;
-                activeBg: string;
-                bg: string;
-                color: string;
-            };
             solid: (props: import("..").Dict<any>) => {
                 hoverBg: string;
                 activeBg: string;
@@ -348,28 +345,45 @@ declare const _default: {
             size: string;
             variant: string;
         };
+        parts: string[];
         sizes: {
-            xs: {
-                fontSize: string;
-            };
             sm: {
-                fontSize: string;
+                container: {
+                    fontSize: string;
+                };
+                icon: {
+                    size: string;
+                };
             };
             md: {
-                fontSize: string;
+                container: {
+                    fontSize: string;
+                };
+                icon: {
+                    size: string;
+                };
             };
             lg: {
-                fontSize: string;
+                container: {
+                    fontSize: string;
+                };
+                icon: {
+                    size: string;
+                };
             };
         };
         variants: {
             default: (props: import("..").Dict<any>) => {
-                color: string;
-                hoverColor: string;
+                container: {
+                    color: string;
+                    hoverColor: string;
+                };
             };
             light: (props: import("..").Dict<any>) => {
-                color: string;
-                hoverColor: string;
+                container: {
+                    color: string;
+                    hoverColor: string;
+                };
             };
         };
     };
@@ -382,8 +396,6 @@ declare const _default: {
         parts: string[];
         sizes: {
             sm: {
-                container: {};
-                heading: {};
                 icon: {
                     size: string;
                 };
@@ -391,11 +403,8 @@ declare const _default: {
                     fontSize: string;
                     h: number;
                 };
-                text: {};
             };
             md: {
-                container: {};
-                heading: {};
                 icon: {
                     size: string;
                 };
@@ -403,11 +412,8 @@ declare const _default: {
                     fontSize: string;
                     h: number;
                 };
-                text: {};
             };
             lg: {
-                container: {};
-                heading: {};
                 item: {
                     fontSize: string;
                     h: number;
@@ -415,11 +421,8 @@ declare const _default: {
                 icon: {
                     size: string;
                 };
-                text: {};
             };
             xl: {
-                container: {};
-                heading: {};
                 item: {
                     fontSize: string;
                     h: number;
@@ -427,16 +430,11 @@ declare const _default: {
                 icon: {
                     scale: number;
                 };
-                text: {};
             };
         };
         variants: {
             default: (props: import("..").Dict<any>) => {
-                container: {};
-                heading: {};
-                icon: {};
                 item: import("..").Dict<any>;
-                text: {};
             };
             ordered: {
                 container: {
@@ -685,7 +683,6 @@ declare const _default: {
         parts: string[];
         sizes: {
             sm: () => {
-                container: {};
                 button: {
                     fontSize: string;
                     minW: number;
@@ -702,7 +699,6 @@ declare const _default: {
                 };
             };
             md: () => {
-                container: {};
                 button: {
                     fontSize: string;
                     minW: number;
@@ -719,7 +715,6 @@ declare const _default: {
                 };
             };
             lg: () => {
-                container: {};
                 button: {
                     fontSize: string;
                     minW: number;
@@ -738,7 +733,6 @@ declare const _default: {
         };
         variants: {
             contained: (props: import("..").Dict<any>) => {
-                container: {};
                 button: {
                     thumb: {
                         bg: string;
@@ -748,7 +742,6 @@ declare const _default: {
                         ring: number;
                     };
                 };
-                label: {};
             };
         };
     };
@@ -786,6 +779,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -797,6 +793,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -808,6 +807,9 @@ declare const _default: {
                     h: number;
                     spaceX: number;
                 };
+                button: {
+                    size: string;
+                };
                 icon: {
                     size: string;
                 };
@@ -822,6 +824,15 @@ declare const _default: {
                     bg: string;
                     color: string;
                 };
+                button: {
+                    hoverBorderColor: string;
+                    borderColor: string;
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    variant: string;
+                };
             };
             subtle: (props: import("..").Dict<any>) => {
                 container: {
@@ -830,6 +841,14 @@ declare const _default: {
                     bg: string;
                     color: string;
                 };
+                button: {
+                    hoverBorderColor: string;
+                    borderColor: string;
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    variant: string;
+                };
             };
         };
     };

package/theme/defaultTheme.d.ts

@@ -155,6 +155,7 @@ declare const defaultTheme: {
     sizes: {};
     spaces: {};
     transformers: {
+        border: (value: string | number, { props }: any) => string;
         space: (value: string | number) => string;
     };
     transforms: {};
@@ -188,16 +189,13 @@ declare const defaultTheme: {
                     h: number;
                     iconSize: string;
                 };
+                xl: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                };
             };
             variants: {
-                outlined: (props: import("..").Dict<any>) => {
-                    borderColor: string;
-                    borderWidth: number;
-                    hoverBg: string;
-                    activeBg: string;
-                    bg: string;
-                    color: string;
-                };
                 solid: (props: import("..").Dict<any>) => {
                     hoverBg: string;
                     activeBg: string;
@@ -510,28 +508,45 @@ declare const defaultTheme: {
                 size: string;
                 variant: string;
             };
+            parts: string[];
             sizes: {
-                xs: {
-                    fontSize: string;
-                };
                 sm: {
-                    fontSize: string;
+                    container: {
+                        fontSize: string;
+                    };
+                    icon: {
+                        size: string;
+                    };
                 };
                 md: {
-                    fontSize: string;
+                    container: {
+                        fontSize: string;
+                    };
+                    icon: {
+                        size: string;
+                    };
                 };
                 lg: {
-                    fontSize: string;
+                    container: {
+                        fontSize: string;
+                    };
+                    icon: {
+                        size: string;
+                    };
                 };
             };
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    color: string;
-                    hoverColor: string;
+                    container: {
+                        color: string;
+                        hoverColor: string;
+                    };
                 };
                 light: (props: import("..").Dict<any>) => {
-                    color: string;
-                    hoverColor: string;
+                    container: {
+                        color: string;
+                        hoverColor: string;
+                    };
                 };
             };
         };
@@ -544,8 +559,6 @@ declare const defaultTheme: {
             parts: string[];
             sizes: {
                 sm: {
-                    container: {};
-                    heading: {};
                     icon: {
                         size: string;
                     };
@@ -553,11 +566,8 @@ declare const defaultTheme: {
                         fontSize: string;
                         h: number;
                     };
-                    text: {};
                 };
                 md: {
-                    container: {};
-                    heading: {};
                     icon: {
                         size: string;
                     };
@@ -565,11 +575,8 @@ declare const defaultTheme: {
                         fontSize: string;
                         h: number;
                     };
-                    text: {};
                 };
                 lg: {
-                    container: {};
-                    heading: {};
                     item: {
                         fontSize: string;
                         h: number;
@@ -577,11 +584,8 @@ declare const defaultTheme: {
                     icon: {
                         size: string;
                     };
-                    text: {};
                 };
                 xl: {
-                    container: {};
-                    heading: {};
                     item: {
                         fontSize: string;
                         h: number;
@@ -589,16 +593,11 @@ declare const defaultTheme: {
                     icon: {
                         scale: number;
                     };
-                    text: {};
                 };
             };
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    container: {};
-                    heading: {};
-                    icon: {};
                     item: import("..").Dict<any>;
-                    text: {};
                 };
                 ordered: {
                     container: {
@@ -847,7 +846,6 @@ declare const defaultTheme: {
             parts: string[];
             sizes: {
                 sm: () => {
-                    container: {};
                     button: {
                         fontSize: string;
                         minW: number;
@@ -864,7 +862,6 @@ declare const defaultTheme: {
                     };
                 };
                 md: () => {
-                    container: {};
                     button: {
                         fontSize: string;
                         minW: number;
@@ -881,7 +878,6 @@ declare const defaultTheme: {
                     };
                 };
                 lg: () => {
-                    container: {};
                     button: {
                         fontSize: string;
                         minW: number;
@@ -900,7 +896,6 @@ declare const defaultTheme: {
             };
             variants: {
                 contained: (props: import("..").Dict<any>) => {
-                    container: {};
                     button: {
                         thumb: {
                             bg: string;
@@ -910,7 +905,6 @@ declare const defaultTheme: {
                             ring: number;
                         };
                     };
-                    label: {};
                 };
             };
         };
@@ -948,6 +942,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -959,6 +956,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -970,6 +970,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -984,6 +987,15 @@ declare const defaultTheme: {
                         bg: string;
                         color: string;
                     };
+                    button: {
+                        hoverBorderColor: string;
+                        borderColor: string;
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        bg: string;
+                        variant: string;
+                    };
                 };
                 subtle: (props: import("..").Dict<any>) => {
                     container: {
@@ -992,6 +1004,14 @@ declare const defaultTheme: {
                         bg: string;
                         color: string;
                     };
+                    button: {
+                        hoverBorderColor: string;
+                        borderColor: string;
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        variant: string;
+                    };
                 };
             };
         };

package/theme/foundations/index.d.ts

@@ -155,6 +155,7 @@ declare const _default: {
     sizes: {};
     spaces: {};
     transformers: {
+        border: (value: string | number, { props }: any) => string;
         space: (value: string | number) => string;
     };
     transforms: {};

package/theme/foundations/shadows.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var colors_1 = require("./colors");
 var utils_1 = require("../../utils");
-var greyLight = utils_1.hexToRGB(colors_1.grey[80], 0.4);
-var greyDark = utils_1.hexToRGB(colors_1.grey[80], 0.6);
+var greyLight = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.4);
+var greyDark = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.6);
 exports.default = {
     '0': "0 0 0 0 #fff",
     '1': "0 2px 5px 0 " + greyLight,

package/theme/foundations/transformers.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    border: (value: number | string, { props }: any) => string;
     space: (value: string | number) => string;
 };
 export default _default;

package/theme/foundations/transformers.js

@@ -1,6 +1,32 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var system_1 = require("@xstyled/system");
 exports.default = {
+    border: function (value, _a) {
+        var props = _a.props;
+        if (typeof value === 'number')
+            return value + "px solid";
+        var values = value.split(' ');
+        var _b = __read(values, 3), width = _b[0], style = _b[1], color = _b[2];
+        var colorValue = (0, system_1.getColor)(color)(props);
+        return width + " " + style + " " + colorValue;
+    },
     space: function (value) {
         return typeof value === 'string' ? value : value * 8 + "px";
     }

package/theme/index.d.ts

@@ -2,5 +2,21 @@ import defaultTheme from './defaultTheme';
 export { default as components } from './components';
 export { default as defaultTheme } from './defaultTheme';
 export { default as foundations } from './foundations';
+export { default as animations } from './foundations/animations';
+export { default as borders } from './foundations/borders';
+export { default as colors } from './foundations/colors';
+export { default as durations } from './foundations/durations';
+export { default as fonts } from './foundations/fonts';
+export { default as fontSizes } from './foundations/fontSizes';
+export { default as fontWeights } from './foundations/fontWeights';
+export { default as radii } from './foundations/radii';
+export { default as ringWidths } from './foundations/ringWidths';
+export { default as screens } from './foundations/screens';
+export { default as shadows } from './foundations/shadows';
+export { default as sizes } from './foundations/sizes';
+export { default as spaces } from './foundations/spaces';
+export { default as transforms } from './foundations/transforms';
+export { default as transitions } from './foundations/transitions';
+export { default as zIndices } from './foundations/zIndices';
 export * from './types';
 export default defaultTheme;

package/theme/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.foundations = exports.defaultTheme = exports.components = void 0;
+exports.zIndices = exports.transitions = exports.transforms = exports.spaces = exports.sizes = exports.shadows = exports.screens = exports.ringWidths = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.durations = exports.colors = exports.borders = exports.animations = exports.foundations = exports.defaultTheme = exports.components = void 0;
 var defaultTheme_1 = __importDefault(require("./defaultTheme"));
 var components_1 = require("./components");
 Object.defineProperty(exports, "components", { enumerable: true, get: function () { return __importDefault(components_1).default; } });
@@ -21,5 +21,37 @@ var defaultTheme_2 = require("./defaultTheme");
 Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return __importDefault(defaultTheme_2).default; } });
 var foundations_1 = require("./foundations");
 Object.defineProperty(exports, "foundations", { enumerable: true, get: function () { return __importDefault(foundations_1).default; } });
+var animations_1 = require("./foundations/animations");
+Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return __importDefault(animations_1).default; } });
+var borders_1 = require("./foundations/borders");
+Object.defineProperty(exports, "borders", { enumerable: true, get: function () { return __importDefault(borders_1).default; } });
+var colors_1 = require("./foundations/colors");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return __importDefault(colors_1).default; } });
+var durations_1 = require("./foundations/durations");
+Object.defineProperty(exports, "durations", { enumerable: true, get: function () { return __importDefault(durations_1).default; } });
+var fonts_1 = require("./foundations/fonts");
+Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });
+var fontSizes_1 = require("./foundations/fontSizes");
+Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return __importDefault(fontSizes_1).default; } });
+var fontWeights_1 = require("./foundations/fontWeights");
+Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return __importDefault(fontWeights_1).default; } });
+var radii_1 = require("./foundations/radii");
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+var ringWidths_1 = require("./foundations/ringWidths");
+Object.defineProperty(exports, "ringWidths", { enumerable: true, get: function () { return __importDefault(ringWidths_1).default; } });
+var screens_1 = require("./foundations/screens");
+Object.defineProperty(exports, "screens", { enumerable: true, get: function () { return __importDefault(screens_1).default; } });
+var shadows_1 = require("./foundations/shadows");
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
+var sizes_1 = require("./foundations/sizes");
+Object.defineProperty(exports, "sizes", { enumerable: true, get: function () { return __importDefault(sizes_1).default; } });
+var spaces_1 = require("./foundations/spaces");
+Object.defineProperty(exports, "spaces", { enumerable: true, get: function () { return __importDefault(spaces_1).default; } });
+var transforms_1 = require("./foundations/transforms");
+Object.defineProperty(exports, "transforms", { enumerable: true, get: function () { return __importDefault(transforms_1).default; } });
+var transitions_1 = require("./foundations/transitions");
+Object.defineProperty(exports, "transitions", { enumerable: true, get: function () { return __importDefault(transitions_1).default; } });
+var zIndices_1 = require("./foundations/zIndices");
+Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 __exportStar(require("./types"), exports);
 exports.default = defaultTheme_1.default;

package/utils/assertion.js

@@ -18,8 +18,7 @@ function isNumber(value) {
 exports.isNumber = isNumber;
 /** Is value an object. */
 function isObject(value) {
-    var type = typeof value;
-    return value !== null && (type === 'object' || type === 'function') && !isArray(value);
+    return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value);
 }
 exports.isObject = isObject;
 /** Is value a valid ReactText - string or number */

package/utils/function.js

@@ -15,10 +15,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runIfFn = void 0;
@@ -31,6 +35,6 @@ function runIfFn(value) {
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
     }
-    return typeof value === 'function' ? value.apply(void 0, __spreadArray([], __read(args))) : value;
+    return typeof value === 'function' ? value.apply(void 0, __spreadArray([], __read(args), false)) : value;
 }
 exports.runIfFn = runIfFn;

package/utils/object.d.ts

@@ -7,7 +7,10 @@ export declare const filterUndefined: (object: Dict) => Dict<any>;
  * - Key exists in target and both keys are arrays => concat (not unique)
  * - Key isn't an object, an array or doesn't exist in target => override
  */
-export declare function merge<Target extends Dict, Source extends Dict>(target: Target, source: Source): Target & Source;
+export declare function merge<S1 extends Dict>(s1: S1): S1;
+export declare function merge<S1 extends Dict, S2 extends Dict>(s1: S1, s2: S2): S1 & S2;
+export declare function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict>(s1: S1, s2: S2, s3: S3): S1 & S2 & S3;
+export declare function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict, S4 extends Dict>(s1: S1, s2: S2, s3: S3, s4: S4): S1 & S2 & S3 & S4;
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */