@veracity/vui 0.6.2 → 0.7.0-beta.0

package/esm/theme/foundations/screens.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export default _default;

package/esm/theme/foundations/screens.js

@@ -0,0 +1,7 @@
+export default {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920
+};

package/esm/theme/foundations/shadows.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    '0': string;
+    '1': string;
+    '2': string;
+    '3': string;
+    '4': string;
+    t1: string;
+    t2: string;
+    t3: string;
+    t4: string;
+    r1: string;
+    r2: string;
+    r3: string;
+    r4: string;
+    l1: string;
+    l2: string;
+    l3: string;
+    l4: string;
+};
+export default _default;

package/esm/theme/foundations/shadows.js

@@ -0,0 +1,23 @@
+import { hexToRGBA } from '../../utils';
+import { grey } from './colors';
+const greyLight = hexToRGBA(grey[80], 0.4);
+const greyDark = hexToRGBA(grey[80], 0.6);
+export default {
+    '0': `0 0 0 0 #fff`,
+    '1': `0 2px 5px 0 ${greyLight}`,
+    '2': `0 4px 12px 0 ${greyLight}`,
+    '3': `0 7px 20px 0 ${greyDark}`,
+    '4': `0 12px 30px 0 ${greyDark}`,
+    t1: `0 -2px 5px 0 ${greyLight}`,
+    t2: `0 -4px 12px 0 ${greyLight}`,
+    t3: `0 -7px 20px 0 ${greyDark}`,
+    t4: `0 -12px 30px 0 ${greyDark}`,
+    r1: `2px 0 5px 0 ${greyLight}`,
+    r2: `4px 0 12px 0 ${greyLight}`,
+    r3: `7px 0 20px 0 ${greyDark}`,
+    r4: `12px 0 30px 0 ${greyDark}`,
+    l1: `-2px 0 5px 0 ${greyLight}`,
+    l2: `-4px 0 12px 0 ${greyLight}`,
+    l3: `-7px 0 20px 0 ${greyDark}`,
+    l4: `-12px 0 30px 0 ${greyDark}`
+};

package/esm/theme/foundations/sizes.d.ts

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

package/esm/theme/foundations/sizes.js

@@ -0,0 +1 @@
+export default {};

package/esm/theme/foundations/spaces.d.ts

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

package/esm/theme/foundations/spaces.js

@@ -0,0 +1 @@
+export default {};

package/esm/theme/foundations/timingFunctions.d.ts

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

package/esm/theme/foundations/timingFunctions.js

@@ -0,0 +1 @@
+export default {};

package/esm/theme/foundations/transformers.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    border: (value: number | string, { props }: any) => string;
+    space: (value: string | number) => string;
+};
+export default _default;

package/esm/theme/foundations/transformers.js

@@ -0,0 +1,14 @@
+import { getColor } from '@xstyled/system';
+export default {
+    border: (value, { props }) => {
+        if (typeof value === 'number')
+            return `${value}px solid`;
+        const values = value.split(' ');
+        const [width, style = '', color] = values;
+        const colorValue = getColor(color)(props) ?? '';
+        return `${width} ${style} ${colorValue}`;
+    },
+    space: (value) => {
+        return typeof value === 'string' ? value : `${value * 8}px`;
+    }
+};

package/esm/theme/foundations/transforms.d.ts

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

package/esm/theme/foundations/transforms.js

@@ -0,0 +1 @@
+export default {};

package/esm/theme/foundations/transitions.d.ts

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

package/esm/theme/foundations/transitions.js

@@ -0,0 +1 @@
+export default {};

package/esm/theme/foundations/zIndices.d.ts

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

package/esm/theme/foundations/zIndices.js

@@ -0,0 +1,6 @@
+export default {
+    drawer: 1300,
+    modal: 1400,
+    toast: 1500,
+    tooltip: 1600
+};

package/esm/theme/index.d.ts

@@ -0,0 +1,20 @@
+export { default as components } from './components';
+export { default, 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';

package/esm/theme/index.js

@@ -0,0 +1,20 @@
+export { default as components } from './components';
+export { default, 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';

package/esm/theme/types.d.ts

@@ -0,0 +1,30 @@
+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 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 {
+}
+/** Defines variant and size types of each component connected to the theme. */
+export declare type ThemingProps<ThemeComponent extends string = string> = {
+    variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string;
+    size?: ThemeComponent extends keyof VuiTheme['components'] ? keyof VuiTheme['components'][ThemeComponent]['sizes'] : string;
+};
+/** VUI theme definition object, containing default values and extensions */
+export declare type VuiTheme = VuiThemeDefaults & VuiThemeExtensions;

package/esm/theme/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/assertion.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+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 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). */
+export declare function isObject<T = Dict>(value: any): value is T;
+/** Is value a valid ReactText - string or number. */
+export declare function isReactText(value: any): value is React.ReactText;
+/** Is value a string. */
+export declare function isString(value: any): value is string;

package/esm/utils/assertion.js

@@ -0,0 +1,29 @@
+import React from 'react';
+/** Is value an array. */
+export function isArray(value) {
+    return Array.isArray(value);
+}
+/** Is value a function. */
+export function isFunction(value) {
+    return typeof value === 'function';
+}
+/** Is value JSX / React Element */
+export function isJsx(value) {
+    return React.isValidElement(value);
+}
+/** Is value a number. */
+export function isNumber(value) {
+    return typeof value === 'number';
+}
+/** Is value a regular object (functions, arrays and React elements excluded). */
+export function isObject(value) {
+    return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !React.isValidElement(value);
+}
+/** Is value a valid ReactText - string or number. */
+export function isReactText(value) {
+    return isNumber(value) || isString(value);
+}
+/** Is value a string. */
+export function isString(value) {
+    return Object.prototype.toString.call(value) === '[object String]';
+}

package/esm/utils/function.d.ts

@@ -0,0 +1,9 @@
+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.
+ */
+export declare function runIfFn<T, U>(valueOrFn: T | ((...fnArgs: U[]) => T), ...args: U[]): T;

package/esm/utils/function.js

@@ -0,0 +1,14 @@
+import { isFunction } from './assertion';
+/** Calls each provided function with the same set of arguments. Useful for merging multiple callbacks. */
+export function callAll(...fns) {
+    return (...args) => fns.forEach(fn => typeof fn === 'function' && fn(...args));
+}
+// Used as a safe default to be called when no function is provided.
+export function noop() { }
+/**
+ * If given value is a function, it's called with any additional arguments provided.
+ * Otherwise, the provided value is returned directly.
+ */
+export function runIfFn(valueOrFn, ...args) {
+    return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+}

package/esm/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './assertion';
+export * from './function';
+export * from './number';
+export * from './object';
+export * from './react';
+export * from './styles';
+export * from './types';

package/esm/utils/index.js

@@ -0,0 +1,7 @@
+export * from './assertion';
+export * from './function';
+export * from './number';
+export * from './object';
+export * from './react';
+export * from './styles';
+export * from './types';

package/esm/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/esm/utils/number.js

@@ -0,0 +1,4 @@
+/** Returns a random integer within the provided range. Default: 0 - 1000000 */
+export function random(start = 0, end = 1000000) {
+    return Math.floor(Math.random() * end) + start;
+}

package/esm/utils/object.d.ts

@@ -0,0 +1,17 @@
+import { Dict } from './types';
+/** Removes keys from an object if their value is undefined. */
+export declare function filterUndefined<T = Dict>(object: T): Partial<T>;
+/**
+ * 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
+ */
+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.
+ */
+export declare function objectFilter<T extends Dict, K extends keyof T>(object: T, fn: (value: any, key: string, object: T) => boolean): Partial<T>;

package/esm/utils/object.js

@@ -0,0 +1,43 @@
+import { isArray, isObject } from './assertion';
+/** Removes keys from an object if their value is undefined. */
+export function filterUndefined(object) {
+    return objectFilter(object, val => val !== null && val !== undefined);
+}
+export function merge(...sources) {
+    const target = {};
+    sources.forEach(source => {
+        if (!isObject(source))
+            return;
+        Object.keys(source).forEach(key => {
+            if (key === '__proto__')
+                return;
+            if (isObject(target[key]) && isObject(source[key])) {
+                // Merge objects
+                target[key] = merge(target[key], source[key]);
+            }
+            else if (isArray(target[key]) && isArray(source[key])) {
+                // Concat arrays
+                target[key] = target[key].concat(source[key]);
+            }
+            else if (source[key] !== undefined) {
+                // Pick source if it exists
+                target[key] = source[key];
+            }
+        });
+    });
+    return target;
+}
+/**
+ * Returns the items of an object that meet the condition specified in a callback function.
+ */
+export function objectFilter(object, fn) {
+    const result = {};
+    Object.keys(object).forEach(key => {
+        const value = object[key];
+        const shouldPass = fn(value, key, object);
+        if (shouldPass) {
+            result[key] = value;
+        }
+    });
+    return result;
+}

package/esm/utils/react.d.ts

@@ -0,0 +1,39 @@
+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.
+ * 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;
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
+/**
+ * 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 useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback?: (event: Event) => void, events?: string[]): void;
+export declare type UseControlledProps<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+};
+/** Supports state management in components that can be controlled or uncontrolled. */
+export declare function useControlled<T>(props: UseControlledProps<T>): [T, React.Dispatch<React.SetStateAction<T>>, {
+    isControlled: boolean;
+    reset: () => 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[];
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+export declare function useIsMounted(): () => boolean;
+export {};

package/esm/utils/react.js

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { isArray, isFunction } from './assertion';
+import { runIfFn } from './function';
+/**
+ * Assigns given value to the provided ref.
+ * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
+ */
+export function assignRef(ref, value) {
+    if (ref === null || ref === undefined)
+        return;
+    if (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}'`);
+    }
+}
+/** Generic function to create new Context and context access hook. */
+export function createContext(options = {}) {
+    const { errorMessage = 'Context can only be accessed by components wrapped with the Provider.', isOptional, name } = options;
+    const Context = React.createContext(undefined);
+    Context.displayName = name;
+    function useContext() {
+        const context = React.useContext(Context);
+        if (!isOptional && context === undefined)
+            throw new Error(errorMessage);
+        return context;
+    }
+    return [Context.Provider, useContext];
+}
+/** Assigns a node to all provided refs. */
+export function mergeRefs(...refs) {
+    return (node) => {
+        refs.forEach(ref => assignRef(ref, node));
+    };
+}
+// TODO: Bring it from UI-Utils
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+export function useCallbackRef(callback) {
+    const ref = useRef(callback);
+    ref.current = callback;
+    return useCallback(((...args) => ref.current?.(...args)), []);
+}
+const defaultEvents = ['mousedown', 'touchstart'];
+// TODO: Bring it from UI-Utils
+/**
+ * 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 function useClickOutside(ref, callback, events = defaultEvents) {
+    const eventsString = JSON.stringify(events);
+    const listener = useCallbackRef((ev) => {
+        const refs = isArray(ref) ? ref : [ref];
+        const target = ev.target;
+        const isClickOutside = refs.every(ref => ref.current && !ref.current.contains(target));
+        isClickOutside && callback?.(ev);
+    });
+    useEffect(() => {
+        const events = JSON.parse(eventsString);
+        events.forEach(event => window.addEventListener(event, listener));
+        return () => {
+            events.forEach(event => window.removeEventListener(event, listener));
+        };
+    }, [eventsString, ref]);
+}
+// TODO: Move to ui-utils
+/** Supports state management in components that can be controlled or uncontrolled. */
+export function useControlled(props) {
+    const { defaultValue, onChange: onChangeProp, value: valueProp } = props;
+    const [valueState, setValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : valueState;
+    /** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
+    const onChange = useCallbackRef((next) => {
+        const newValue = runIfFn(next);
+        if (!isControlled)
+            setValue(newValue);
+        onChangeProp?.(newValue);
+    });
+    /** In uncontrolled mode, sets the state to the default value. */
+    const reset = useCallbackRef(() => {
+        !isControlled && defaultValue && onChange(defaultValue);
+    });
+    return [value, onChange, { isControlled, reset }];
+}
+/** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
+export function useIds(id, prefixes) {
+    return prefixes.map(prefix => `${prefix}-${id}`);
+}
+// TODO: Bring it from ui-utils
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+export function useIsMounted() {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return useCallback(() => isMounted.current, []);
+}

package/esm/utils/styles.d.ts

@@ -0,0 +1,4 @@
+/** Concatenates individual className arguments and returns a single string. */
+export declare function cs(...classNames: any[]): string;
+/** Converts hex color value to rgb with optional alpha property. */
+export declare function hexToRGBA(hex: string, alpha?: number): string;

package/esm/utils/styles.js

@@ -0,0 +1,26 @@
+/** Concatenates individual className arguments and returns a single string. */
+export function cs(...classNames) {
+    return classNames.filter(Boolean).join(' ');
+}
+/** Converts hex color value to rgb with optional alpha property. */
+export function hexToRGBA(hex, alpha) {
+    let hexStr = hex;
+    if (hexStr.charAt(0) === '#') {
+        hexStr = hexStr.slice(1);
+    }
+    if (hexStr.length < 4) {
+        hexStr = hexStr
+            .split('')
+            .map(char => char + char)
+            .join('');
+    }
+    const r = parseInt(hexStr.slice(0, 2), 16);
+    const g = parseInt(hexStr.slice(2, 4), 16);
+    const b = parseInt(hexStr.slice(4, 6), 16);
+    if (alpha !== undefined) {
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    else {
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+}

package/esm/utils/types.d.ts

@@ -0,0 +1,45 @@
+import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+/** Type for a a no-op function stub. */
+export declare type AnyFunction = (...args: any[]) => any;
+/** Type for any number without breaking autocompletion. */
+export declare type AnyNumber = number & {};
+/** Type for any string without breaking autocompletion. */
+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 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;
+};
+/** Return value of the createContext function. */
+export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
+/** Basic dictionary typing. */
+export declare type Dict<T = any> = Record<string, T>;
+/** Classic application's environment names. */
+export declare type Environment = 'Prod' | 'Stag' | 'Test';
+/** 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>;
+/** Render props of component's children. */
+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/esm/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@veracity/vui",
-  "version": "0.6.2",
+  "version": "0.7.0-beta.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
-  "main": "index.js",
+  "type": "module",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "sideEffects": false,
   "author": "Veracity",
   "license": "UNLICENSED",
   "keywords": [
@@ -24,7 +27,7 @@
     "tippy.js": "^6.3.7"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }