@veracity/vui 0.2.1 → 0.2.3

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: {};
                 };
             };
         };

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/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/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.
  */

package/utils/object.js

@@ -1,46 +1,45 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.objectFilter = exports.merge = exports.filterUndefined = void 0;
 var assertion_1 = require("./assertion");
 /** Removes keys from an object if their value is undefined. */
 var filterUndefined = function (object) { return objectFilter(object, function (val) { return val !== null && val !== undefined; }); };
 exports.filterUndefined = filterUndefined;
-/**
- * Recursively deep merges two objects in an immutable fashion, following these rules:
- * - Key exists in target and both keys are objects => merge
- * - 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
- */
-function merge(target, source) {
-    var output = __assign({}, target);
-    if ((0, assertion_1.isObject)(target) && (0, assertion_1.isObject)(source)) {
+function merge() {
+    var sources = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        sources[_i] = arguments[_i];
+    }
+    var target = {};
+    sources.forEach(function (source) {
+        if (!(0, assertion_1.isObject)(source))
+            return;
         Object.keys(source).forEach(function (key) {
-            var _a;
             if (key === '__proto__')
                 return;
-            if (key in target && (0, assertion_1.isObject)(target[key]) && (0, assertion_1.isObject)(source[key])) {
-                output[key] = merge(target[key], source[key]);
+            if (target[key] === undefined) {
+                // Key not in target yet, assign source
+                target[key] = source[key];
             }
-            else if (key in target && (0, assertion_1.isArray)(target[key]) && (0, assertion_1.isArray)(source[key])) {
-                output[key] = (_a = target[key]) === null || _a === void 0 ? void 0 : _a.concat(source[key]);
+            else if (typeof target[key] === typeof source[key]) {
+                // Same types
+                if ((0, assertion_1.isObject)(source[key])) {
+                    target[key] = merge(target[key], source[key]);
+                }
+                else if ((0, assertion_1.isArray)(source[key])) {
+                    target[key] = target[key].concat(source[key]);
+                }
+                else {
+                    target[key] = source[key];
+                }
+                // Different types
             }
             else {
-                output[key] = source[key];
+                return;
             }
         });
-    }
-    return output;
+    });
+    return target;
 }
 exports.merge = merge;
 /**

package/utils/types.d.ts

@@ -1,5 +1,27 @@
-/// <reference types="react" />
+import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
 export declare type AnyElement = React.ReactNode & {};
 export declare type AnyNumber = number & {};
 export declare type AnyString = string & {};
+/** Type of change event defaulted to input element */
+export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
+/** Type of change event handler defaulted to input element */
+export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
 export declare type Dict<T = any> = Record<string, T>;
+/** Type of blur/focus event defaulted to any html element */
+export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
+/** Type of blur/focus event handler defaulted to any html element */
+export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
+/** Type of keyboard event defaulted to any html element */
+export declare type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
+/** Type of keyboard event handler defaulted to any html element */
+export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
+/** Type of mouse event defaulted to any html element */
+export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
+/** Type of mouse event handler defaulted to any html element */
+export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
+/** Merges component/element base props and custom props */
+export declare type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
+/** Merges component/element base props and custom props including ref */
+export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
+/** Merges props definitions, overriding source keys */
+export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;

package/core/types/events.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-/** Type of change event defaulted to input element */
-export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
-/** Type of change event handler defaulted to input element */
-export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
-/** Type of blur/focus event defaulted to any html element */
-export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
-/** Type of blur/focus event handler defaulted to any html element */
-export declare type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>;
-/** Type of keyboard event defaulted to any html element */
-export declare type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>;
-/** Type of keyboard event handler defaulted to any html element */
-export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>;
-/** Type of mouse event defaulted to any html element */
-export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
-/** Type of mouse event handler defaulted to any html element */
-export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;

package/core/types/events.js

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

package/core/types/styled.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { AnyStyledComponent, DefaultTheme, StyledComponentInnerAttrs, StyledComponentInnerComponent, StyledComponentInnerOtherProps, ThemedStyledFunction } from 'styled-components';
-import { SystemProps } from '../../system';
-declare type ThemedStyledComponentFactories<T extends object> = {
-    [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, T, SystemProps>;
-};
-export interface VStyled<T extends object = DefaultTheme> extends ThemedStyledComponentFactories<T> {
-    <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<StyledComponentInnerComponent<C>, T, StyledComponentInnerOtherProps<C> & SystemProps, StyledComponentInnerAttrs<C>>;
-    <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(component: C): ThemedStyledFunction<C, T, SystemProps>;
-}
-export {};

package/core/types/styled.js

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