@veracity/vui 0.1.0 → 0.2.1

package/theme/defaultTheme.d.ts

@@ -161,50 +161,6 @@ declare const defaultTheme: {
     transitions: {};
     zIndices: {};
     components: {
-        Alert: {
-            defaultProps: {
-                colorScheme: string;
-                variant: string;
-            };
-            parts: string[];
-            sizes: {};
-            variants: {
-                solid: (props: import("..").Dict<any>) => {
-                    container: {
-                        bg: string;
-                        color: string;
-                    };
-                    button: {
-                        bg: string;
-                        borderColor: string;
-                        hoverBg: string;
-                        hoverBorderColor: 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;
@@ -670,6 +626,34 @@ declare const defaultTheme: {
                 };
             };
         };
+        Notification: {
+            defaultProps: {
+                colorScheme: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {};
+            variants: {
+                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: {};
+                };
+            };
+        };
         P: {
             defaultProps: {
                 size: string;
@@ -964,6 +948,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -975,6 +962,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -986,6 +976,9 @@ declare const defaultTheme: {
                         h: number;
                         spaceX: number;
                     };
+                    button: {
+                        size: string;
+                    };
                     icon: {
                         size: string;
                     };
@@ -1000,6 +993,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: {
@@ -1008,6 +1010,14 @@ declare const defaultTheme: {
                         bg: string;
                         color: string;
                     };
+                    button: {
+                        hoverBorderColor: string;
+                        borderColor: string;
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        variant: string;
+                    };
                 };
             };
         };

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/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.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Dict } from './types';
 /** Is value an array. */
-export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isArray<T>(value: any): value is T[];
 /** Is value a function. */
 export declare function isFunction<T>(value: any): value is T;
 /** Is value a number. */

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

@@ -1,13 +1,6 @@
 import { Dict } from './types';
 /** Removes keys from an object if their value is undefined. */
 export declare const filterUndefined: (object: Dict) => Dict<any>;
-/**
- * Recursively retrieves a nested property of a given object
- * @param object
- * @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): any | undefined;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
  * - Key exists in target and both keys are objects => merge
@@ -15,11 +8,7 @@ export declare function get(object: Dict, path: string | string[], separator?: s
  * - 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;
-declare type FilterFn<T> = (value: any, key: string, object: T) => boolean;
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
-export declare function objectFilter<T extends Dict>(object: T, fn: FilterFn<T>): Dict<any>;
-/** Removes given keys from an object. */
-export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
-export {};
+export declare function objectFilter<T extends Dict>(object: T, fn: (value: any, key: string, object: T) => boolean): Dict<any>;

package/utils/object.js

@@ -11,25 +11,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.omit = exports.objectFilter = exports.merge = exports.get = exports.filterUndefined = void 0;
+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 retrieves a nested property of a given object
- * @param object
- * @param path string, such as: 'user.name', or array ['user', 'name']
- * @param separator used when path is a string to split individual keys
- */
-function get(object, path, separator) {
-    if (separator === void 0) { separator = '.'; }
-    if (!assertion_1.isObject(object))
-        return;
-    var keys = Array.isArray(path) ? path : path.split(separator);
-    return keys.reduce(function (obj, property) { return obj === null || obj === void 0 ? void 0 : obj[property]; }, object);
-}
-exports.get = get;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
  * - Key exists in target and both keys are objects => merge
@@ -38,15 +24,15 @@ exports.get = get;
  */
 function merge(target, source) {
     var output = __assign({}, target);
-    if (assertion_1.isObject(target) && assertion_1.isObject(source)) {
+    if ((0, assertion_1.isObject)(target) && (0, assertion_1.isObject)(source)) {
         Object.keys(source).forEach(function (key) {
             var _a;
             if (key === '__proto__')
                 return;
-            if (key in target && assertion_1.isObject(target[key]) && assertion_1.isObject(source[key])) {
+            if (key in target && (0, assertion_1.isObject)(target[key]) && (0, assertion_1.isObject)(source[key])) {
                 output[key] = merge(target[key], source[key]);
             }
-            else if (key in target && assertion_1.isArray(target[key]) && assertion_1.isArray(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 {
@@ -72,14 +58,3 @@ function objectFilter(object, fn) {
     return result;
 }
 exports.objectFilter = objectFilter;
-/** Removes given keys from an object. */
-function omit(object, keys) {
-    var result = {};
-    Object.keys(object).forEach(function (key) {
-        if (keys.includes(key))
-            return;
-        result[key] = object[key];
-    });
-    return result;
-}
-exports.omit = omit;

package/alert/alert.d.ts

@@ -1,13 +0,0 @@
-import { AlertProps } from './alert.types';
-import AlertButton from './alertButton';
-import AlertIcon from './alertIcon';
-import AlertText from './alertText';
-import AlertTitle from './alertTitle';
-import { VuiComponent } from '../core';
-export declare const Alert: VuiComponent<"div", AlertProps> & {
-    Button: typeof AlertButton;
-    Icon: typeof AlertIcon;
-    Text: typeof AlertText;
-    Title: typeof AlertTitle;
-};
-export default Alert;

package/alert/alert.types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { BoxProps } from '../box';
-import { IconProp, IconProps } from '../icon';
-import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
-    action?: ReactNode;
-    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    icon?: IconProp | AnyElement;
-    onClose?: () => void;
-    status?: AlertStatus;
-    statusMapping?: AlertStatusMapping;
-    text?: ReactNode;
-    title?: ReactNode;
-}
-export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
-export declare type AlertStatusMapping = Record<string, {
-    colorScheme?: AlertProps['colorScheme'];
-    iconProps: IconProps;
-}>;

package/alert/alertButton.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '../button';
-export declare const AlertButton: import("../core").VuiComponent<"button", ButtonProps>;
-export default AlertButton;

package/alert/alertIcon.d.ts

@@ -1,3 +0,0 @@
-import { IconProps } from '../icon';
-export declare const AlertIcon: import("../core").VuiComponent<"svg", IconProps>;
-export default AlertIcon;

package/alert/alertText.d.ts

@@ -1,3 +0,0 @@
-import { TProps } from '../t';
-export declare const AlertText: import("../core").VuiComponent<"p", TProps>;
-export default AlertText;

package/alert/alertTitle.d.ts

@@ -1,3 +0,0 @@
-import { HeadingProps } from '../heading';
-export declare const AlertTitle: import("../core").VuiComponent<"h6", HeadingProps>;
-export default AlertTitle;

package/alert/consts.d.ts

@@ -1,2 +0,0 @@
-import { AlertStatusMapping } from './alert.types';
-export declare const alertStatusMapping: AlertStatusMapping;

package/alert/context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { AlertProps } from './alert.types';
-declare const AlertProvider: import("react").Provider<Partial<AlertProps>>, useAlert: () => Partial<AlertProps>;
-export { AlertProvider, useAlert };

package/alert/index.d.ts

@@ -1,8 +0,0 @@
-export * from './alert';
-export * from './alert.types';
-export * from './alertButton';
-export * from './alertIcon';
-export * from './alertText';
-export * from './alertTitle';
-export * from './context';
-export { default } from './alert';