@veracity/vui 0.2.4 → 0.3.0

package/tag/theme.js

@@ -9,18 +9,15 @@ function variantSolid(props) {
         color: 'white'
     };
     var button = {
-        hoverBorderColor: "transparent",
-        borderColor: "transparent",
-        color: 'white',
         hoverBg: c + ".70",
         activeBg: c + ".60",
         bg: c + ".80",
-        variant: 'solid'
+        color: 'white'
     };
     if (c === 'yellow') {
-        container.hoverBg = c + ".80";
-        container.activeBg = c + ".90";
-        container.bg = c + ".70";
+        container.hoverBg = 'yellow.80';
+        container.activeBg = 'yellow.90';
+        container.bg = 'yellow.70';
         button.hoverBg = 'yellow.60';
         button.activeBg = 'yellow.50';
         button.bg = 'yellow.70';
@@ -33,16 +30,25 @@ function variantSubtle(props) {
         hoverBg: c + ".30",
         activeBg: c + ".40",
         bg: c + ".20",
-        color: 'prussian.80'
+        color: c + ".90"
     };
     var button = {
-        hoverBorderColor: "transparent",
-        borderColor: "transparent",
-        color: c + ".90",
         hoverBg: c + ".30",
         activeBg: c + ".40",
-        variant: 'outlined'
+        color: c + ".90"
     };
+    if (c === 'blue') {
+        container.color = 'blue.80';
+        button.color = 'blue.80';
+    }
+    if (c === 'grey') {
+        container.color = 'prussian.80';
+        button.color = 'prussian.80';
+    }
+    if (c === 'yellow') {
+        container.color = 'yellow.100';
+        button.color = 'yellow.100';
+    }
     return { container: container, button: button };
 }
 var defaultProps = {
@@ -63,8 +69,7 @@ var sizes = {
         },
         icon: {
             size: 'xs'
-        },
-        text: {}
+        }
     },
     md: {
         container: {
@@ -77,8 +82,7 @@ var sizes = {
         },
         icon: {
             size: 'sm'
-        },
-        text: {}
+        }
     },
     lg: {
         container: {
@@ -91,8 +95,7 @@ var sizes = {
         },
         icon: {
             size: 'md'
-        },
-        text: {}
+        }
     }
 };
 var variants = {

package/theme/components.d.ts

@@ -211,6 +211,12 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    Footer: {
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Heading: {
         defaultProps: {
             size: string;
@@ -462,6 +468,12 @@ declare const _default: {
             };
         };
     };
+    Menu: {
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Notification: {
         defaultProps: {
             colorScheme: string;
@@ -481,12 +493,7 @@ declare const _default: {
                     color: string;
                     hoverBg: string;
                     activeBg: string;
-                    variant: string;
                 };
-                icon: {};
-                message: {};
-                text: {};
-                title: {};
             };
         };
     };
@@ -533,6 +540,12 @@ declare const _default: {
             };
         };
     };
+    Popover: {
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Radio: {
         defaultProps: {
             colorScheme: string;
@@ -785,7 +798,6 @@ declare const _default: {
                 icon: {
                     size: string;
                 };
-                text: {};
             };
             md: {
                 container: {
@@ -799,7 +811,6 @@ declare const _default: {
                 icon: {
                     size: string;
                 };
-                text: {};
             };
             lg: {
                 container: {
@@ -813,7 +824,6 @@ declare const _default: {
                 icon: {
                     size: string;
                 };
-                text: {};
             };
         };
         variants: {
@@ -825,13 +835,10 @@ declare const _default: {
                     color: string;
                 };
                 button: {
-                    hoverBorderColor: string;
-                    borderColor: string;
-                    color: string;
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
-                    variant: string;
+                    color: string;
                 };
             };
             subtle: (props: import("..").Dict<any>) => {
@@ -842,12 +849,9 @@ declare const _default: {
                     color: string;
                 };
                 button: {
-                    hoverBorderColor: string;
-                    borderColor: string;
-                    color: string;
                     hoverBg: string;
                     activeBg: string;
-                    variant: string;
+                    color: string;
                 };
             };
         };

package/theme/components.js

@@ -9,22 +9,25 @@ var theme_3 = __importDefault(require("../button/theme"));
 var theme_4 = __importDefault(require("../card/theme"));
 var theme_5 = __importDefault(require("../checkbox/theme"));
 var theme_6 = __importDefault(require("../divider/theme"));
-var theme_7 = __importDefault(require("../heading/theme"));
-var theme_8 = __importDefault(require("../icon/theme"));
-var theme_9 = __importDefault(require("../image/theme"));
-var theme_10 = __importDefault(require("../input/theme"));
-var theme_11 = __importDefault(require("../link/theme"));
-var theme_12 = __importDefault(require("../list/theme"));
-var theme_13 = __importDefault(require("../notification/theme"));
-var theme_14 = __importDefault(require("../p/theme"));
-var theme_15 = __importDefault(require("../panel/theme"));
-var theme_16 = __importDefault(require("../radio/theme"));
-var theme_17 = __importDefault(require("../skeleton/theme"));
-var theme_18 = __importDefault(require("../spinner/theme"));
-var theme_19 = __importDefault(require("../switch/theme"));
-var theme_20 = __importDefault(require("../t/theme"));
-var theme_21 = __importDefault(require("../tag/theme"));
-var theme_22 = __importDefault(require("../textarea/theme"));
+var theme_7 = __importDefault(require("../footer/theme"));
+var theme_8 = __importDefault(require("../heading/theme"));
+var theme_9 = __importDefault(require("../icon/theme"));
+var theme_10 = __importDefault(require("../image/theme"));
+var theme_11 = __importDefault(require("../input/theme"));
+var theme_12 = __importDefault(require("../link/theme"));
+var theme_13 = __importDefault(require("../list/theme"));
+var theme_14 = __importDefault(require("../menu/theme"));
+var theme_15 = __importDefault(require("../notification/theme"));
+var theme_16 = __importDefault(require("../p/theme"));
+var theme_17 = __importDefault(require("../panel/theme"));
+var theme_18 = __importDefault(require("../popover/theme"));
+var theme_19 = __importDefault(require("../radio/theme"));
+var theme_20 = __importDefault(require("../skeleton/theme"));
+var theme_21 = __importDefault(require("../spinner/theme"));
+var theme_22 = __importDefault(require("../switch/theme"));
+var theme_23 = __importDefault(require("../t/theme"));
+var theme_24 = __importDefault(require("../tag/theme"));
+var theme_25 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -32,20 +35,23 @@ exports.default = {
     Card: theme_4.default,
     Checkbox: theme_5.default,
     Divider: theme_6.default,
-    Heading: theme_7.default,
-    Icon: theme_8.default,
-    Image: theme_9.default,
-    Input: theme_10.default,
-    Link: theme_11.default,
-    List: theme_12.default,
-    Notification: theme_13.default,
-    P: theme_14.default,
-    Panel: theme_15.default,
-    Radio: theme_16.default,
-    Skeleton: theme_17.default,
-    Spinner: theme_18.default,
-    Switch: theme_19.default,
-    T: theme_20.default,
-    Tag: theme_21.default,
-    Textarea: theme_22.default
+    Footer: theme_7.default,
+    Heading: theme_8.default,
+    Icon: theme_9.default,
+    Image: theme_10.default,
+    Input: theme_11.default,
+    Link: theme_12.default,
+    List: theme_13.default,
+    Menu: theme_14.default,
+    Notification: theme_15.default,
+    P: theme_16.default,
+    Panel: theme_17.default,
+    Popover: theme_18.default,
+    Radio: theme_19.default,
+    Skeleton: theme_20.default,
+    Spinner: theme_21.default,
+    Switch: theme_22.default,
+    T: theme_23.default,
+    Tag: theme_24.default,
+    Textarea: theme_25.default
 };

package/theme/defaultTheme.d.ts

@@ -374,6 +374,12 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        Footer: {
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Heading: {
             defaultProps: {
                 size: string;
@@ -625,6 +631,12 @@ declare const defaultTheme: {
                 };
             };
         };
+        Menu: {
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Notification: {
             defaultProps: {
                 colorScheme: string;
@@ -644,12 +656,7 @@ declare const defaultTheme: {
                         color: string;
                         hoverBg: string;
                         activeBg: string;
-                        variant: string;
                     };
-                    icon: {};
-                    message: {};
-                    text: {};
-                    title: {};
                 };
             };
         };
@@ -696,6 +703,12 @@ declare const defaultTheme: {
                 };
             };
         };
+        Popover: {
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Radio: {
             defaultProps: {
                 colorScheme: string;
@@ -948,7 +961,6 @@ declare const defaultTheme: {
                     icon: {
                         size: string;
                     };
-                    text: {};
                 };
                 md: {
                     container: {
@@ -962,7 +974,6 @@ declare const defaultTheme: {
                     icon: {
                         size: string;
                     };
-                    text: {};
                 };
                 lg: {
                     container: {
@@ -976,7 +987,6 @@ declare const defaultTheme: {
                     icon: {
                         size: string;
                     };
-                    text: {};
                 };
             };
             variants: {
@@ -988,13 +998,10 @@ declare const defaultTheme: {
                         color: string;
                     };
                     button: {
-                        hoverBorderColor: string;
-                        borderColor: string;
-                        color: string;
                         hoverBg: string;
                         activeBg: string;
                         bg: string;
-                        variant: string;
+                        color: string;
                     };
                 };
                 subtle: (props: import("..").Dict<any>) => {
@@ -1005,12 +1012,9 @@ declare const defaultTheme: {
                         color: string;
                     };
                     button: {
-                        hoverBorderColor: string;
-                        borderColor: string;
-                        color: string;
                         hoverBg: string;
                         activeBg: string;
-                        variant: string;
+                        color: string;
                     };
                 };
             };

package/utils/assertion.d.ts

@@ -3,7 +3,7 @@ import { Dict } from './types';
 /** Is value an array. */
 export declare function isArray<T>(value: any): value is T[];
 /** Is value a function. */
-export declare function isFunction<T>(value: any): value is T;
+export declare function isFunction<T extends Function = Function>(value: any): value is T;
 /** Is value a number. */
 export declare function isNumber(value: any): value is number;
 /** Is value an object. */

package/utils/function.d.ts

@@ -2,4 +2,4 @@
  * If given value is a function, it's called with any additional arguments provided.
  * Otherwise, the provided value is returned directly.
  */
-export declare function runIfFn(value: any, ...args: any[]): any;
+export declare function runIfFn<T, U>(valueOrFn: T | ((...fnArgs: U[]) => T), ...args: U[]): T;

package/utils/function.js

@@ -26,15 +26,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runIfFn = void 0;
+var assertion_1 = require("./assertion");
 /**
  * If given value is a function, it's called with any additional arguments provided.
  * Otherwise, the provided value is returned directly.
  */
-function runIfFn(value) {
+function runIfFn(valueOrFn) {
     var args = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];
     }
-    return typeof value === 'function' ? value.apply(void 0, __spreadArray([], __read(args), false)) : value;
+    return (0, assertion_1.isFunction)(valueOrFn) ? valueOrFn.apply(void 0, __spreadArray([], __read(args), false)) : valueOrFn;
 }
 exports.runIfFn = runIfFn;

package/utils/index.d.ts

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

package/utils/index.js

@@ -13,5 +13,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./assertion"), exports);
 __exportStar(require("./function"), exports);
 __exportStar(require("./object"), exports);
+__exportStar(require("./react"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./types"), exports);

package/utils/react.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CreateContextOptions, CreateContextReturn } from './types';
+declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
+/**
+ * Assigns given value to the provided ref.
+ * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
+ */
+export declare function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T): void;
+/** Generic function to create new Context and context access hook. */
+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;
+/**
+ * Saves given function in a ref to ensure stable exported reference.
+ * When input function changes, ref is updated.
+ */
+export declare function useFnRef(fn?: Function): React.MutableRefObject<Function | undefined>;
+export {};

package/utils/react.js

@@ -0,0 +1,83 @@
+"use strict";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFnRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+var react_1 = __importStar(require("react"));
+var assertion_1 = require("./assertion");
+/**
+ * Assigns given value to the provided ref.
+ * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
+ */
+function assignRef(ref, value) {
+    if (ref === null || ref === undefined)
+        return;
+    if ((0, assertion_1.isFunction)(ref)) {
+        ref(value);
+        return;
+    }
+    try {
+        // @ts-ignore - TS complains about 'current' being read-only
+        ref.current = value;
+    }
+    catch (error) {
+        throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
+    }
+}
+exports.assignRef = assignRef;
+/** Generic function to create new Context and context access hook. */
+function createContext(options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.errorMessage, errorMessage = _a === void 0 ? 'Context can only be accessed by components wrapped with the Provider.' : _a, isOptional = options.isOptional, name = options.name;
+    var Context = react_1.default.createContext(undefined);
+    Context.displayName = name;
+    function useContext() {
+        var context = react_1.default.useContext(Context);
+        if (!isOptional && context === undefined)
+            throw new Error(errorMessage);
+        return context;
+    }
+    return [Context.Provider, useContext];
+}
+exports.createContext = createContext;
+/** Assigns a node to all provided refs. */
+function mergeRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (node) {
+        refs.forEach(function (ref) { return assignRef(ref, node); });
+    };
+}
+exports.mergeRefs = mergeRefs;
+/**
+ * Saves given function in a ref to ensure stable exported reference.
+ * When input function changes, ref is updated.
+ */
+function useFnRef(fn) {
+    var fnRef = (0, react_1.useRef)(fn);
+    (0, react_1.useEffect)(function () {
+        fnRef.current = fn;
+    }, [fn]);
+    return fnRef;
+}
+exports.useFnRef = useFnRef;

package/utils/types.d.ts

@@ -6,6 +6,15 @@ export declare type AnyString = string & {};
 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 interface CreateContextOptions {
+    /** Message displayed when context is used outside of the provider */
+    errorMessage?: string;
+    /** Accessing context outside of provider won't throw error */
+    isOptional?: boolean;
+    /** Name of the context */
+    name?: string;
+}
+export declare type CreateContextReturn<T> = [React.Provider<T>, () => 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>;
@@ -19,9 +28,11 @@ export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventH
 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>;
+export declare type PropGetter<T extends ElementType, Props = {}> = (props: PropsOf<T, Props>, ref?: React.Ref<any> | React.RefObject<any>) => RefPropsOf<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>;
+export declare type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
 /** Merges props definitions, overriding source keys */
 export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;

package/utils/types.js

@@ -1,3 +1,2 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-types */
 Object.defineProperty(exports, "__esModule", { value: true });

package/core/types/context.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface CreateContextOptions {
-    /** Message displayed when context is used outside of the provider */
-    errorMessage?: string;
-    /** Accessing context outside of provider won't throw error */
-    isOptional?: boolean;
-    /** Name of the context */
-    name?: string;
-}
-export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];