@veracity/vui 0.3.1 → 0.3.2

package/core/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './component';
-export * from './themeGet';

package/core/types/index.js

@@ -1,14 +0,0 @@
-"use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./component"), exports);
-__exportStar(require("./themeGet"), exports);

package/core/types/themeGet.d.ts

@@ -1,24 +0,0 @@
-import { IProps, ThemeGetter } from '@xstyled/styled-components';
-import { VuiTheme } from '../../theme';
-import { AnyString, AnyNumber } from '../../utils';
-declare type VuiThemeGetter<ThemeKey extends keyof VuiTheme> = ThemeGetter<keyof VuiTheme[ThemeKey] | AnyString | AnyNumber>;
-export interface ThemeGet {
-    (path: string, defaultValue?: any): (props: IProps) => any;
-    animation: VuiThemeGetter<'animations'>;
-    borders: VuiThemeGetter<'borders'>;
-    color: VuiThemeGetter<'colors'>;
-    duration: VuiThemeGetter<'durations'>;
-    font: VuiThemeGetter<'fonts'>;
-    fontSize: VuiThemeGetter<'fontSizes'>;
-    fontWeight: VuiThemeGetter<'fontWeights'>;
-    radius: VuiThemeGetter<'radii'>;
-    ringWidth: VuiThemeGetter<'ringWidths'>;
-    screen: VuiThemeGetter<'screens'>;
-    shadow: VuiThemeGetter<'shadows'>;
-    size: VuiThemeGetter<'sizes'>;
-    space: VuiThemeGetter<'spaces'>;
-    transform: VuiThemeGetter<'transforms'>;
-    transition: VuiThemeGetter<'transitions'>;
-    zIndex: VuiThemeGetter<'zIndices'>;
-}
-export {};

package/core/utils.d.ts

@@ -1,56 +0,0 @@
-import { StyleGenerator } from '@xstyled/styled-components';
-import React from 'react';
-import { StyledProps } from 'styled-components';
-import { ThemeGet, VuiComponent, VuiComponentConfig } from './types';
-import { Screen, ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
-import { AnyNumber, AnyString, Dict, PropsOf } from '../utils';
-/** Merges provided theme extensions and overrides with default VUI theme */
-export declare function extendTheme(extensions: VuiThemeExtensions): VuiTheme;
-/**
- * Provides configuration to the 'styled' function, which filters out xstyled system props
- * Return type is cast to {} in order to avoid messing up styled component's actual props definition.
- */
-export declare function forwardPropConfig(generator: StyleGenerator): {};
-declare type ScreenWidth = Screen | AnyNumber | AnyString;
-/** Returns CSS media string with appropriate min-width and max-width values */
-export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Returns CSS media string with appropriate max-width value */
-export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Returns CSS media string with appropriate min-width value */
-export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
-/** Removes specific theming keys from the given props. */
-export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "size" | "variant">;
-/**
- * Custom validator to prevent certain props from reaching the HTML element.
- * @param props - list of props to filter out
- */
-export declare function shouldForwardProp(props: string[]): (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) => boolean;
-/** Re-export of xstyled 'th' with custom typing and screen getter */
-declare const th: ThemeGet;
-export { th };
-/** Returns true of current viewport width is between provided min and max widths */
-export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
-/** Returns true of current viewport width is smaller than provided width */
-export declare function useDown(width: ScreenWidth): boolean;
-/** Returns viewport width and provided screen width as a number  */
-export declare function useMedia(width: ScreenWidth): {
-    value: number;
-    viewportWidth: number | null;
-};
-/**
- * Retrieves and merges size and variant styling from a component's theme configuration.
- * @param component - name of any component configured in the theme
- * @param props - props object of the given component
- */
-export declare function useStyleConfig(component: keyof VuiTheme['components'], props?: any): Dict<any>;
-/** Returns theme value at the given path */
-export declare function useTh(path: keyof VuiTheme | AnyString, defaultValue?: any): any;
-/** Returns the theme object with extensions */
-export declare function useTheme(): VuiTheme;
-/** Returns true of current viewport width is larger or equal to provided width */
-export declare function useUp(width: ScreenWidth): boolean;
-/**
- * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
- * Config object allows toggling memoization and providing custom 'areEqual' function.
- */
-export declare function vui<C extends React.ElementType, Props = {}>(component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>, config?: VuiComponentConfig<C, Props>): VuiComponent<C, Props>;

package/core/utils.js

@@ -1,194 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.vui = exports.useUp = exports.useTheme = exports.useTh = exports.useStyleConfig = exports.useMedia = exports.useDown = exports.useBetween = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.mediaUp = exports.mediaDown = exports.mediaBetween = exports.forwardPropConfig = exports.extendTheme = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importStar(require("react"));
-var styled_components_2 = require("styled-components");
-var theme_1 = __importDefault(require("../theme"));
-var utils_1 = require("../utils");
-/** Merges provided theme extensions and overrides with default VUI theme */
-function extendTheme(extensions) {
-    return (0, utils_1.merge)(theme_1.default, extensions);
-}
-exports.extendTheme = extendTheme;
-/**
- * Provides configuration to the 'styled' function, which filters out xstyled system props
- * Return type is cast to {} in order to avoid messing up styled component's actual props definition.
- */
-function forwardPropConfig(generator) {
-    return {
-        shouldForwardProp: function (prop, defaultValidatorFn) {
-            if (typeof prop === 'string' && generator.meta.props.includes(prop))
-                return false;
-            return defaultValidatorFn(prop);
-        }
-    };
-}
-exports.forwardPropConfig = forwardPropConfig;
-/** Returns CSS media string with appropriate min-width and max-width values */
-var mediaBetween = function (minWidth, maxWidth) { return function (props) {
-    return "@media (min-width: " + th.screen(minWidth)(props) + ") and (max-width: " + th.screen(maxWidth)(props) + ")";
-}; };
-exports.mediaBetween = mediaBetween;
-/** Returns CSS media string with appropriate max-width value */
-var mediaDown = function (width) { return function (props) {
-    return "@media (max-width: " + th.screen(width)(props) + ")";
-}; };
-exports.mediaDown = mediaDown;
-/** Returns CSS media string with appropriate min-width value */
-var mediaUp = function (width) { return function (props) {
-    return "@media (min-width: " + th.screen(width)(props) + ")";
-}; };
-exports.mediaUp = mediaUp;
-/** Removes specific theming keys from the given props. */
-function omitThemingProps(props) {
-    var size = props.size, variant = props.variant, rest = __rest(props, ["size", "variant"]); // eslint-disable-line @typescript-eslint/no-unused-vars
-    return rest;
-}
-exports.omitThemingProps = omitThemingProps;
-/**
- * Custom validator to prevent certain props from reaching the HTML element.
- * @param props - list of props to filter out
- */
-function shouldForwardProp(props) {
-    return function (prop, defaultValidatorFn) {
-        if (props.includes(prop.toString()))
-            return false;
-        return defaultValidatorFn(prop);
-    };
-}
-exports.shouldForwardProp = shouldForwardProp;
-/** Re-export of xstyled 'th' with custom typing and screen getter */
-var th = styled_components_1.th;
-exports.th = th;
-th.screen = (0, styled_components_1.themeGetter)({
-    name: 'screen',
-    key: 'screens',
-    compose: styled_components_1.getPx
-});
-/** Returns true of current viewport width is between provided min and max widths */
-function useBetween(minWidth, maxWidth) {
-    var isDown = useDown(maxWidth);
-    var isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-exports.useBetween = useBetween;
-/** Returns true of current viewport width is smaller than provided width */
-function useDown(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
-exports.useDown = useDown;
-/** Returns viewport width and provided screen width as a number  */
-function useMedia(width) {
-    var theme = useTheme();
-    var viewportWidth = (0, styled_components_1.useViewportWidth)();
-    var valueString = th.screen(width)({ theme: theme });
-    var value = Number(valueString.replace('px', ''));
-    return { value: value, viewportWidth: viewportWidth };
-}
-exports.useMedia = useMedia;
-/**
- * Retrieves and merges size and variant styling from a component's theme configuration.
- * @param component - name of any component configured in the theme
- * @param props - props object of the given component
- */
-function useStyleConfig(component, props) {
-    var _a;
-    if (props === void 0) { props = {}; }
-    var theme = useTheme();
-    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, baseStyle = _b.baseStyle, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
-    var mergedProps = __assign(__assign({}, defaultProps), props);
-    var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
-    return (0, react_1.useMemo)(function () {
-        var _a, _b, _c;
-        var baseStyles = (_a = (0, utils_1.runIfFn)(baseStyle, mergedProps)) !== null && _a !== void 0 ? _a : {};
-        var sizeStyles = (_b = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _b !== void 0 ? _b : {};
-        var variantStyles = (_c = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _c !== void 0 ? _c : {};
-        var styles = {};
-        if (parts.length > 0) {
-            parts.forEach(function (part) {
-                var _a, _b, _c;
-                styles[part] = (0, utils_1.merge)((_a = baseStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = sizeStyles[part]) !== null && _b !== void 0 ? _b : {}, (_c = variantStyles[part]) !== null && _c !== void 0 ? _c : {});
-            });
-        }
-        else {
-            styles = (0, utils_1.merge)(baseStyles, sizeStyles, variantStyles);
-        }
-        return styles;
-    }, [colorScheme, size, variant]);
-}
-exports.useStyleConfig = useStyleConfig;
-/** Returns theme value at the given path */
-function useTh(path, defaultValue) {
-    var theme = useTheme();
-    return th(path, defaultValue)({ theme: theme });
-}
-exports.useTh = useTh;
-/** Returns the theme object with extensions */
-function useTheme() {
-    return (0, styled_components_2.useTheme)();
-}
-exports.useTheme = useTheme;
-/** Returns true of current viewport width is larger or equal to provided width */
-function useUp(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth >= value;
-}
-exports.useUp = useUp;
-/**
- * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
- * Config object allows toggling memoization and providing custom 'areEqual' function.
- */
-function vui(component, config) {
-    var _a = config !== null && config !== void 0 ? config : {}, memoCompare = _a.memoCompare, _b = _a.isMemo, isMemo = _b === void 0 ? true : _b;
-    if (isMemo) {
-        return react_1.default.memo(react_1.default.forwardRef(component), memoCompare);
-    }
-    return react_1.default.forwardRef(component);
-}
-exports.vui = vui;

package/core/vuiProvider.d.ts

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { VuiTheme } from '../theme';
-declare type VuiProviderProps = {
-    /**
-     * Adds basic styles to body
-     * @default true
-     */
-    globalStyle?: boolean;
-    /**
-     * Applies custom CSS reset
-     * @default true
-     */
-    resetCSS?: boolean;
-    /**
-     * Modified theme config using 'extendTheme' utility
-     */
-    theme?: VuiTheme;
-};
-declare const VuiProvider: FC<VuiProviderProps>;
-export default VuiProvider;

package/icons/library.d.ts

@@ -1,11 +0,0 @@
-import { IconDefinition } from './types';
-declare class Library {
-    cache: Map<string, IconDefinition>;
-    add: (...icons: IconDefinition[]) => void;
-    get: (name: string) => IconDefinition | undefined;
-    has: (name: string) => boolean;
-    init: () => void;
-    reset: () => void;
-}
-declare const library: Library;
-export default library;

package/popover/plugins.d.ts

@@ -1,3 +0,0 @@
-import { Plugin } from 'tippy.js';
-/** Closes the popper if 'Escape' is pressed. */
-export declare const closeOnEscPlugin: Plugin;

package/popover/plugins.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.closeOnEscPlugin = void 0;
-/** Closes the popper if 'Escape' is pressed. */
-exports.closeOnEscPlugin = {
-    name: 'closeOnEsc',
-    defaultValue: true,
-    fn: function (_a) {
-        var hide = _a.hide;
-        function onKeyDown(e) {
-            if (e.key === 'Escape') {
-                hide();
-            }
-        }
-        return {
-            onHide: function () {
-                document.removeEventListener('keydown', onKeyDown);
-            },
-            onShow: function () {
-                document.addEventListener('keydown', onKeyDown);
-            }
-        };
-    }
-};

package/styles/fontFaces.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("../core");
-exports.default = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";

package/styles/helpers.d.ts

@@ -1,4 +0,0 @@
-export declare const lineClamp: (maxLines: number) => string;
-export declare const resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
-export declare const resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
-export declare const truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/helpers.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.truncateText = exports.resetList = exports.resetLink = exports.lineClamp = void 0;
-var lineClamp = function (maxLines) { return "\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: " + maxLines + ";\n\t-webkit-box-orient: vertical;  \n\toverflow: hidden;\n"; };
-exports.lineClamp = lineClamp;
-exports.resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
-exports.resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
-exports.truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/index.d.ts

@@ -1,3 +0,0 @@
-export * from './animations';
-export * from './helpers';
-export { default as fontFaces } from './fontFaces';