@veracity/vui 0.0.2 → 0.0.4

package/theme/defaultTheme.d.ts

@@ -1,19 +1,4 @@
 declare const defaultTheme: {
-    fonts: {
-        avenir: string;
-    };
-    fontSizes: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-    };
-    fontWeights: {
-        regular: number;
-        medium: number;
-        demi: number;
-        bold: number;
-    };
     animations: {
         fadeDown: string;
         fadeIn: string;
@@ -110,15 +95,32 @@ declare const defaultTheme: {
         };
     };
     durations: {
+        instant: string;
         fast: string;
         normal: string;
         slow: string;
     };
+    fonts: {
+        avenir: string;
+    };
+    fontSizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        demi: string;
+        bold: string;
+    };
     radii: {
         none: number;
         sm: number;
         md: number;
         lg: number;
+        round: number;
     };
     shadows: {
         0: string;
@@ -139,6 +141,48 @@ declare const defaultTheme: {
         space: (value: string | number) => string;
     };
     components: {
+        Alert: {
+            defaultProps: {
+                colorScheme: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {};
+            variants: {
+                solid: (props: import("..").Dict<any>) => {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                    button: {
+                        bg: string;
+                        hoverBg: string;
+                    };
+                    icon: {};
+                    message: {};
+                    text: {};
+                    title: {};
+                };
+                subtle: (props: import("..").Dict<any>) => {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        borderWidth: number;
+                        color: string;
+                    };
+                    button: {
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        variant: string;
+                    };
+                    icon: {};
+                    message: {};
+                    text: {};
+                    title: {};
+                };
+            };
+        };
         Avatar: {
             defaultProps: {
                 colorScheme: string;
@@ -261,31 +305,45 @@ declare const defaultTheme: {
                 size: string;
                 variant: string;
             };
+            parts: string[];
             sizes: {
                 sm: {
-                    h: number;
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
                 };
                 md: {
-                    h: number;
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+                lg: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
                 };
             };
             variants: {
                 default: (props: import("..").Dict<any>) => {
-                    color: string;
-                    hoverColor: string;
+                    control: {
+                        color: string;
+                        hoverColor: string;
+                    };
                 };
             };
         };
-        ControlLabel: {
-            defaultProps: {
-                size: string;
-            };
-            sizes: {
-                sm: {};
-                md: {};
-            };
-            variants: {};
-        };
         Divider: {
             defaultProps: {};
             sizes: {};
@@ -360,6 +418,11 @@ declare const defaultTheme: {
                 variant: string;
             };
             sizes: {
+                xs: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                };
                 sm: {
                     fontSize: string;
                     h: number;
@@ -441,9 +504,31 @@ declare const defaultTheme: {
             };
         };
         Link: {
-            defaultProps: {};
-            sizes: {};
-            variants: {};
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                xs: {
+                    fontSize: string;
+                };
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            };
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
         };
         List: {
             defaultProps: {
@@ -454,18 +539,36 @@ declare const defaultTheme: {
             parts: string[];
             sizes: {
                 sm: {
+                    icon: {
+                        size: string;
+                    };
                     item: {
                         fontSize: string;
                         h: number;
                     };
                 };
                 md: {
+                    icon: {
+                        size: string;
+                    };
                     item: {
                         fontSize: string;
                         h: number;
                     };
                 };
                 lg: {
+                    icon: {
+                        size: string;
+                    };
+                    item: {
+                        fontSize: string;
+                        h: number;
+                    };
+                };
+                xl: {
+                    icon: {
+                        scale: number;
+                    };
                     item: {
                         fontSize: string;
                         h: number;
@@ -474,17 +577,33 @@ declare const defaultTheme: {
             };
             variants: {
                 default: (props: import("..").Dict<any>) => {
+                    container: {};
+                    icon: {};
                     item: import("..").Dict<any>;
-                    list: import("..").Dict<any>;
                 };
-                unstyled: {
+                ordered: {
+                    container: {
+                        as: string;
+                        listStyleType: string;
+                        pl: number;
+                    };
                     item: {
                         display: string;
                         h: undefined;
+                        lineHeight: number;
                     };
-                    list: {
+                };
+                unordered: {
+                    container: {
+                        as: string;
+                        listStyleType: string;
                         pl: number;
                     };
+                    item: {
+                        display: string;
+                        h: undefined;
+                        lineHeight: number;
+                    };
                 };
             };
         };
@@ -516,6 +635,51 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Radio: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+                md: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+                lg: {
+                    control: {
+                        h: number;
+                        w: number;
+                    };
+                    label: {
+                        size: string;
+                    };
+                };
+            };
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    control: {
+                        color: string;
+                        hoverColor: string;
+                    };
+                };
+            };
+        };
         Skeleton: {
             defaultProps: {
                 colorScheme: string;
@@ -548,6 +712,151 @@ declare const defaultTheme: {
                 };
             };
         };
+        Spinner: {
+            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: (props: import("..").Dict<any>) => {
+                    container: {
+                        color: string;
+                    };
+                    circle: {
+                        borderColor: string;
+                        borderTopColor: string;
+                        borderRightColor: string;
+                    };
+                    text: {};
+                };
+            };
+        };
+        Switch: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+                md: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+                lg: (props: import("..").Dict<any>) => {
+                    button: {
+                        fontSize: string;
+                    };
+                    label: {
+                        size: string;
+                    };
+                    thumb: {
+                        h: number;
+                        w: number;
+                    };
+                    track: {
+                        h: number;
+                        minW: number;
+                    };
+                };
+            };
+            variants: {
+                contained: (props: import("..").Dict<any>) => {
+                    thumb: {
+                        bg: string;
+                    };
+                    track: {
+                        bg: string;
+                        ring: number;
+                    };
+                };
+                thin: (props: import("..").Dict<any>) => {
+                    thumb: {
+                        bg: string;
+                        borderColor: string;
+                        borderWidth: number;
+                        ring: number;
+                    };
+                    track: {
+                        bg: string;
+                    };
+                };
+            };
+        };
         T: {
             defaultProps: {
                 size: string;

package/theme/foundations.d.ts

@@ -0,0 +1,144 @@
+declare const _default: {
+    animations: {
+        fadeDown: string;
+        fadeIn: string;
+        fadeLeft: string;
+        fadeOut: string;
+        fadeRight: string;
+        fadeUp: string;
+        spin: string;
+    };
+    colors: {
+        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;
+        };
+    };
+    durations: {
+        instant: string;
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+    fonts: {
+        avenir: string;
+    };
+    fontSizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        demi: string;
+        bold: string;
+    };
+    radii: {
+        none: number;
+        sm: number;
+        md: number;
+        lg: number;
+        round: number;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    screens: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    transformers: {
+        space: (value: string | number) => string;
+    };
+};
+export default _default;

package/theme/foundations.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("../styles");
+var transformers = {
+    space: function (value) {
+        return typeof value === 'string' ? value : value * 8 + "px";
+    }
+};
+exports.default = {
+    animations: styles_1.animations,
+    colors: styles_1.colors,
+    durations: styles_1.durations,
+    fonts: styles_1.fonts,
+    fontSizes: styles_1.fontSizes,
+    fontWeights: styles_1.fontWeights,
+    radii: styles_1.radii,
+    shadows: styles_1.shadows,
+    screens: styles_1.screens,
+    transformers: transformers
+};

package/tile/tile.d.ts

@@ -1,3 +1,3 @@
 import { TileProps } from './tile.types';
-export declare const Tile: import("styled-components").StyledComponent<"div", never, TileProps, never>;
+export declare const Tile: import("../core").VuiComponent<"div", TileProps>;
 export default Tile;

package/tile/tile.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tile = void 0;
 var react_1 = __importDefault(require("react"));
-var box_1 = require("../box");
+var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 exports.Tile = core_1.forwardRef(function (props, ref) {
@@ -40,7 +40,7 @@ exports.Tile = core_1.forwardRef(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    return react_1.default.createElement(box_1.Box, __assign({ className: utils_1.cs('vui-tile', className), ref: ref }, styles, interactiveProps, rest));
+    return react_1.default.createElement(box_1.default, __assign({ className: utils_1.cs('vui-tile', className), ref: ref }, styles, interactiveProps, rest));
 });
 exports.Tile.displayName = 'Tile';
 exports.default = exports.Tile;

package/tile/tile.types.d.ts

@@ -1,7 +1,7 @@
-import { BoxProps } from '../box';
+import { BoxProps, BoxStyleProps } from '../box';
 import { ThemingProps } from '../theme';
 export interface TileProps extends Omit<BoxProps, 'size' | 'variant'>, TileStyleProps, ThemingProps<'Tile'> {
     isInteractive?: boolean;
 }
-export interface TileStyleProps {
+export interface TileStyleProps extends BoxStyleProps {
 }

package/utils/object.d.ts

@@ -7,7 +7,7 @@ export declare const filterUndefined: (object: Dict) => Dict<any>;
  * @param path string, such as: 'user.name', or array ['user', 'name']
  * @param separator used when path is a string to split individual keys
  */
-export declare function get(object: Dict, path: string | string[], separator?: string): Dict<any> | undefined;
+export declare function get(object: Dict, path: string | string[], separator?: string): any | undefined;
 /** Checks if the item is an object. */
 export declare function isObj(item: any): boolean;
 /**