@veracity/vui 0.3.2 → 0.5.0

package/theme/defaultTheme.d.ts

@@ -123,6 +123,28 @@ declare const defaultTheme: {
         demi: string;
         bold: string;
     };
+    gridTemplateColumns: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+    gridTemplateRows: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
     radii: {
         none: number;
         sm: number;
@@ -165,7 +187,13 @@ declare const defaultTheme: {
     };
     transforms: {};
     transitions: {};
-    zIndices: {};
+    timingFunctions: {};
+    zIndices: {
+        drawer: number;
+        modal: number;
+        toast: number;
+        tooltip: number;
+    };
     components: {
         Avatar: {
             baseStyle: {};
@@ -285,6 +313,7 @@ declare const defaultTheme: {
                     container: {
                         borderColor: string;
                         hoverBorderColor: string;
+                        focusRing: number;
                         hoverBg: string;
                         activeBg: string;
                         bg: string;
@@ -323,6 +352,7 @@ declare const defaultTheme: {
                         borderColor: string;
                         borderWidth: number;
                         color: string;
+                        focusRing: number;
                     };
                 };
             };
@@ -379,6 +409,27 @@ declare const defaultTheme: {
                 };
             };
         };
+        Dialog: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            parts: string[];
+            sizes: {
+                md: {
+                    container: {
+                        maxW: number;
+                    };
+                };
+                lg: {
+                    container: {
+                        maxW: number;
+                    };
+                };
+                fullWidth: {};
+            };
+            variants: {};
+        };
         Divider: {
             baseStyle: {};
             defaultProps: {};
@@ -392,24 +443,85 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        Grid: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Header: {
             baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {
-                test: {
+                dark: {
                     container: {
                         bg: string;
-                        color: string;
+                        borderBottom: number;
                     };
-                    profile: {
-                        content: {
-                            color: string;
-                        };
+                    account: {
                         trigger: {
+                            bg: string;
                             color: string;
-                            name: string;
+                            hoverBg: string;
+                            activeBg: string;
+                        };
+                    };
+                    createAccount: {
+                        link: {
+                            color: {
+                                xs: string;
+                                md: string;
+                            };
+                            hoverColor: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        text: {
+                            color: {
+                                md: string;
+                            };
+                        };
+                    };
+                    divider: {
+                        borderColor: string;
+                    };
+                    linkItem: {
+                        container: {
+                            hoverBg: {
+                                xs: string;
+                                md: string;
+                            };
+                            activeBg: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        link: {
+                            borderColor: string;
+                        };
+                    };
+                    logo: {
+                        svg: {
+                            pathFill: string;
+                        };
+                    };
+                    mainLinks: {
+                        color: {
+                            md: string;
+                        };
+                    };
+                    mobileContent: {
+                        top: string;
+                    };
+                    mobileToggle: {
+                        variant: string;
+                    };
+                    notifications: {
+                        container: {
+                            variant: string;
                         };
                     };
                     services: {
@@ -667,8 +779,7 @@ declare const defaultTheme: {
                     };
                     item: {
                         display: string;
-                        h: undefined;
-                        lineHeight: number;
+                        h: string;
                     };
                 };
                 unordered: {
@@ -679,8 +790,7 @@ declare const defaultTheme: {
                     };
                     item: {
                         display: string;
-                        h: undefined;
-                        lineHeight: number;
+                        h: string;
                     };
                 };
             };
@@ -705,6 +815,13 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Modal: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Notification: {
             baseStyle: {};
             defaultProps: {
@@ -1074,6 +1191,7 @@ declare const defaultTheme: {
                         activeBg: string;
                         bg: string;
                         color: string;
+                        focusRing: number;
                     };
                     button: {
                         hoverBg: string;

package/theme/foundations/gridTemplateColumns.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+};
+export default _default;

package/theme/foundations/gridTemplateColumns.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    1: 'repeat(1, minmax(0, 1fr))',
+    2: 'repeat(2, minmax(0, 1fr))',
+    3: 'repeat(3, minmax(0, 1fr))',
+    4: 'repeat(4, minmax(0, 1fr))',
+    5: 'repeat(5, minmax(0, 1fr))',
+    6: 'repeat(6, minmax(0, 1fr))',
+    7: 'repeat(7, minmax(0, 1fr))',
+    8: 'repeat(8, minmax(0, 1fr))',
+    9: 'repeat(9, minmax(0, 1fr))',
+    10: 'repeat(10, minmax(0, 1fr))',
+    11: 'repeat(11, minmax(0, 1fr))',
+    12: 'repeat(12, minmax(0, 1fr))'
+};

package/theme/foundations/gridTemplateRows.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+};
+export default _default;

package/theme/foundations/gridTemplateRows.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    1: 'repeat(1, minmax(0, 1fr))',
+    2: 'repeat(2, minmax(0, 1fr))',
+    3: 'repeat(3, minmax(0, 1fr))',
+    4: 'repeat(4, minmax(0, 1fr))',
+    5: 'repeat(5, minmax(0, 1fr))',
+    6: 'repeat(6, minmax(0, 1fr))'
+};

package/theme/foundations/index.d.ts

@@ -123,6 +123,28 @@ declare const _default: {
         demi: string;
         bold: string;
     };
+    gridTemplateColumns: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+    gridTemplateRows: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
     radii: {
         none: number;
         sm: number;
@@ -165,6 +187,12 @@ declare const _default: {
     };
     transforms: {};
     transitions: {};
-    zIndices: {};
+    timingFunctions: {};
+    zIndices: {
+        drawer: number;
+        modal: number;
+        toast: number;
+        tooltip: number;
+    };
 };
 export default _default;

package/theme/foundations/index.js

@@ -10,12 +10,15 @@ var durations_1 = __importDefault(require("./durations"));
 var fonts_1 = __importDefault(require("./fonts"));
 var fontSizes_1 = __importDefault(require("./fontSizes"));
 var fontWeights_1 = __importDefault(require("./fontWeights"));
+var gridTemplateColumns_1 = __importDefault(require("./gridTemplateColumns"));
+var gridTemplateRows_1 = __importDefault(require("./gridTemplateRows"));
 var radii_1 = __importDefault(require("./radii"));
 var ringWidths_1 = __importDefault(require("./ringWidths"));
 var screens_1 = __importDefault(require("./screens"));
 var shadows_1 = __importDefault(require("./shadows"));
 var sizes_1 = __importDefault(require("./sizes"));
 var spaces_1 = __importDefault(require("./spaces"));
+var timingFunctions_1 = __importDefault(require("./timingFunctions"));
 var transformers_1 = __importDefault(require("./transformers"));
 var transforms_1 = __importDefault(require("./transforms"));
 var transitions_1 = __importDefault(require("./transitions"));
@@ -28,6 +31,8 @@ exports.default = {
     fonts: fonts_1.default,
     fontSizes: fontSizes_1.default,
     fontWeights: fontWeights_1.default,
+    gridTemplateColumns: gridTemplateColumns_1.default,
+    gridTemplateRows: gridTemplateRows_1.default,
     radii: radii_1.default,
     ringWidths: ringWidths_1.default,
     screens: screens_1.default,
@@ -37,5 +42,6 @@ exports.default = {
     transformers: transformers_1.default,
     transforms: transforms_1.default,
     transitions: transitions_1.default,
+    timingFunctions: timingFunctions_1.default,
     zIndices: zIndices_1.default
 };

package/theme/foundations/timingFunctions.d.ts

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

package/theme/foundations/timingFunctions.js

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

package/theme/foundations/zIndices.d.ts

@@ -1,2 +1,7 @@
-declare const _default: {};
+declare const _default: {
+    drawer: number;
+    modal: number;
+    toast: number;
+    tooltip: number;
+};
 export default _default;

package/theme/foundations/zIndices.js

@@ -1,3 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {};
+exports.default = {
+    drawer: 1300,
+    modal: 1400,
+    toast: 1500,
+    tooltip: 1600
+};

package/theme/types.d.ts

@@ -1,14 +1,22 @@
 import defaultTheme from './defaultTheme';
 export declare type Animation = keyof VuiTheme['animations'];
+export declare type Border = keyof VuiTheme['borders'];
 export declare type Color = keyof VuiTheme['colors'];
 export declare type Component = keyof VuiTheme['components'];
+export declare type Font = keyof VuiTheme['fonts'];
 export declare type FontSize = keyof VuiTheme['fontSizes'];
 export declare type FontWeight = keyof VuiTheme['fontWeights'];
-export declare type Font = keyof VuiTheme['fonts'];
+export declare type GridTemplateColumn = keyof VuiTheme['gridTemplateColumns'];
+export declare type GridTemplateRow = keyof VuiTheme['gridTemplateRows'];
 export declare type Radius = keyof VuiTheme['radii'];
+export declare type RingWidth = keyof VuiTheme['ringWidths'];
 export declare type Screen = keyof VuiTheme['screens'];
 export declare type Shadow = keyof VuiTheme['shadows'];
+export declare type Size = keyof VuiTheme['sizes'];
+export declare type Space = keyof VuiTheme['spaces'];
+export declare type Transform = keyof VuiTheme['transforms'];
 export declare type TransitionDuration = keyof VuiTheme['durations'];
+export declare type ZIndex = keyof VuiTheme['zIndices'];
 export declare type VuiThemeDefaults = typeof defaultTheme;
 /** Can be extended to add new properties to the theme or override default ones  */
 export interface VuiThemeExtensions {

package/utils/assertion.d.ts

@@ -4,6 +4,8 @@ import { Dict } from './types';
 export declare function isArray<T>(value: any): value is T[];
 /** Is value a function. */
 export declare function isFunction<T extends Function = Function>(value: any): value is T;
+/** Is value JSX / React Element */
+export declare function isJsx<T = JSX.Element>(value: any): value is T;
 /** Is value a number. */
 export declare function isNumber(value: any): value is number;
 /** Is value a regular object (functions, arrays and React elements excluded). */

package/utils/assertion.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isString = exports.isReactText = exports.isObject = exports.isNumber = exports.isFunction = exports.isArray = void 0;
+exports.isString = exports.isReactText = exports.isObject = exports.isNumber = exports.isJsx = exports.isFunction = exports.isArray = void 0;
 var react_1 = __importDefault(require("react"));
 /** Is value an array. */
 function isArray(value) {
@@ -15,6 +15,11 @@ function isFunction(value) {
     return typeof value === 'function';
 }
 exports.isFunction = isFunction;
+/** Is value JSX / React Element */
+function isJsx(value) {
+    return react_1.default.isValidElement(value);
+}
+exports.isJsx = isJsx;
 /** Is value a number. */
 function isNumber(value) {
     return typeof value === 'number';

package/utils/function.d.ts

@@ -1,3 +1,7 @@
+import { AnyFunction } from './types';
+/** Calls each provided function with the same set of arguments. Useful for merging multiple callbacks. */
+export declare function callAll(...fns: (AnyFunction | undefined)[]): (...args: any[]) => void;
+export declare function noop(): void;
 /**
  * If given value is a function, it's called with any additional arguments provided.
  * Otherwise, the provided value is returned directly.

package/utils/function.js

@@ -25,8 +25,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runIfFn = void 0;
+exports.runIfFn = exports.noop = exports.callAll = void 0;
 var assertion_1 = require("./assertion");
+/** Calls each provided function with the same set of arguments. Useful for merging multiple callbacks. */
+function callAll() {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return fns.forEach(function (fn) { return typeof fn === 'function' && fn.apply(void 0, __spreadArray([], __read(args), false)); });
+    };
+}
+exports.callAll = callAll;
+// Used as a safe default to be called when no function is provided.
+function noop() { }
+exports.noop = noop;
 /**
  * If given value is a function, it's called with any additional arguments provided.
  * Otherwise, the provided value is returned directly.

package/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './assertion';
 export * from './function';
+export * from './number';
 export * from './object';
 export * from './react';
 export * from './styles';

package/utils/index.js

@@ -12,6 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./assertion"), exports);
 __exportStar(require("./function"), exports);
+__exportStar(require("./number"), exports);
 __exportStar(require("./object"), exports);
 __exportStar(require("./react"), exports);
 __exportStar(require("./styles"), exports);

package/utils/number.d.ts

@@ -0,0 +1,2 @@
+/** Returns a random integer within the provided range. Default: 0 - 1000000 */
+export declare function random(start?: number, end?: number): number;

package/utils/number.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.random = void 0;
+/** Returns a random integer within the provided range. Default: 0 - 1000000 */
+function random(start, end) {
+    if (start === void 0) { start = 0; }
+    if (end === void 0) { end = 1000000; }
+    return Math.floor(Math.random() * end) + start;
+}
+exports.random = random;

package/utils/object.js

@@ -19,25 +19,17 @@ function merge() {
         Object.keys(source).forEach(function (key) {
             if (key === '__proto__')
                 return;
-            if (target[key] === undefined) {
-                // Key not in target yet, assign source
-                target[key] = source[key];
+            if ((0, assertion_1.isObject)(target[key]) && (0, assertion_1.isObject)(source[key])) {
+                // Merge objects
+                target[key] = merge(target[key], 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 if ((0, assertion_1.isArray)(target[key]) && (0, assertion_1.isArray)(source[key])) {
+                // Concat arrays
+                target[key] = target[key].concat(source[key]);
             }
-            else {
-                return;
+            else if (source[key] !== undefined) {
+                // Pick source if it exists
+                target[key] = source[key];
             }
         });
     });

package/utils/react.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CreateContextOptions, CreateContextReturn } from './types';
+import React, { RefObject } from 'react';
+import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
  * Assigns given value to the provided ref.
@@ -10,9 +10,16 @@ export declare function assignRef<T = any>(ref: ReactRef<T> | undefined, value:
 export declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
 /** Assigns a node to all provided refs. */
 export declare function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]): (node: T | null) => void;
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
 /**
- * Saves given function in a ref to ensure stable exported reference.
- * When input function changes, ref is updated.
+ * Triggers given callback when an event happens outside of a given element.
+ * Event listeners are attached to the window object.
+ * @param ref - element to check click position for
+ * @param callback - function triggered on outside click
+ * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
-export declare function useFnRef(fn?: Function): React.MutableRefObject<Function | undefined>;
+export declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback?: (event: Event) => void, events?: string[]): void;
+/** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
+export declare function useIds(id: string, prefixes: string[]): string[];
 export {};

package/utils/react.js

@@ -19,8 +19,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
+};
+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.useFnRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+exports.useIds = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
 var react_1 = __importStar(require("react"));
 var assertion_1 = require("./assertion");
 /**
@@ -69,15 +94,50 @@ function mergeRefs() {
     };
 }
 exports.mergeRefs = mergeRefs;
+// TODO: Bring it from UI-Utils
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+function useCallbackRef(callback) {
+    var ref = (0, react_1.useRef)(callback);
+    ref.current = callback;
+    return (0, react_1.useCallback)((function () {
+        var _a;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([ref], __read(args), false));
+    }), []);
+}
+exports.useCallbackRef = useCallbackRef;
+var defaultEvents = ['mousedown', 'touchstart'];
+// TODO: Bring it from UI-Utils
 /**
- * Saves given function in a ref to ensure stable exported reference.
- * When input function changes, ref is updated.
+ * Triggers given callback when an event happens outside of a given element.
+ * Event listeners are attached to the window object.
+ * @param ref - element to check click position for
+ * @param callback - function triggered on outside click
+ * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
-function useFnRef(fn) {
-    var fnRef = (0, react_1.useRef)(fn);
+function useClickOutside(ref, callback, events) {
+    if (events === void 0) { events = defaultEvents; }
+    var eventsString = JSON.stringify(events);
+    var listener = useCallbackRef(function (ev) {
+        var refs = (0, assertion_1.isArray)(ref) ? ref : [ref];
+        var target = ev.target;
+        var isClickOutside = refs.every(function (ref) { return ref.current && !ref.current.contains(target); });
+        isClickOutside && (callback === null || callback === void 0 ? void 0 : callback(ev));
+    });
     (0, react_1.useEffect)(function () {
-        fnRef.current = fn;
-    }, [fn]);
-    return fnRef;
+        var events = JSON.parse(eventsString);
+        events.forEach(function (event) { return window.addEventListener(event, listener); });
+        return function () {
+            events.forEach(function (event) { return window.removeEventListener(event, listener); });
+        };
+    }, [eventsString, ref]);
+}
+exports.useClickOutside = useClickOutside;
+/** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
+function useIds(id, prefixes) {
+    return prefixes.map(function (prefix) { return prefix + "-" + id; });
 }
-exports.useFnRef = useFnRef;
+exports.useIds = useIds;