@veracity/vui 0.0.6 → 0.0.8

package/switch/switchLabel.js

@@ -19,7 +19,7 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.SwitchLabel = core_1.forwardRef(function (props, ref) {
+exports.SwitchLabel = core_1.vui(function (props, ref) {
     var _a;
     var switchProps = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, switchProps), props);

package/system/space.d.ts

@@ -5,71 +5,85 @@ declare type MarginProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginProps<T extends ITheme = VuiTheme> {
     m?: MarginProp<T>;
     hoverM?: MarginProp<T>;
+    lastM?: MarginProp<T>;
 }
 declare type MarginTopProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginTopProps<T extends ITheme = VuiTheme> {
     mt?: MarginTopProp<T>;
     hoverMt?: MarginTopProp<T>;
+    lastMt?: MarginTopProp<T>;
 }
 declare type MarginRightProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginRightProps<T extends ITheme = VuiTheme> {
     mr?: MarginRightProp<T>;
     hoverMr?: MarginRightProp<T>;
+    lastMr?: MarginRightProp<T>;
 }
 declare type MarginBottomProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginBottomProps<T extends ITheme = VuiTheme> {
     mb?: MarginBottomProp<T>;
     hoverMb?: MarginBottomProp<T>;
+    lastMb?: MarginBottomProp<T>;
 }
 declare type MarginLeftProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginLeftProps<T extends ITheme = VuiTheme> {
     ml?: MarginLeftProp<T>;
     hoverMl?: MarginLeftProp<T>;
+    lastMl?: MarginLeftProp<T>;
 }
 declare type MarginXProp<T extends ITheme = VuiTheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginXProps<T extends ITheme = VuiTheme> {
     mx?: MarginXProp<T>;
     hoverMx?: MarginXProp<T>;
+    lastMx?: MarginXProp<T>;
 }
 declare type MarginYProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginYProps<T extends ITheme = VuiTheme> {
     my?: MarginYProp<T>;
     hoverMy?: MarginYProp<T>;
+    lastMy?: MarginYProp<T>;
 }
 declare type PaddingProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingProps<T extends ITheme = VuiTheme> {
     p?: PaddingProp<T>;
     hoverP?: PaddingProp<T>;
+    lastP?: PaddingProp<T>;
 }
 declare type PaddingTopProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingTopProps<T extends ITheme = VuiTheme> {
     pt?: PaddingTopProp<T>;
     hoverPt?: PaddingTopProp<T>;
+    lastPt?: PaddingTopProp<T>;
 }
 declare type PaddingRightProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingRightProps<T extends ITheme = VuiTheme> {
     pr?: PaddingRightProp<T>;
     hoverPr?: PaddingRightProp<T>;
+    lastPr?: PaddingRightProp<T>;
 }
 declare type PaddingBottomProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingBottomProps<T extends ITheme = VuiTheme> {
     pb?: PaddingBottomProp<T>;
     hoverPb?: PaddingBottomProp<T>;
+    lastPb?: PaddingBottomProp<T>;
 }
 declare type PaddingLeftProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingLeftProps<T extends ITheme = VuiTheme> {
     pl?: PaddingLeftProp<T>;
     hoverPl?: PaddingLeftProp<T>;
+    lastPl?: PaddingLeftProp<T>;
 }
 declare type PaddingXProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingXProps<T extends ITheme = VuiTheme> {
     px?: PaddingXProp<T>;
     hoverPx?: PaddingXProp<T>;
+    lastPx?: PaddingXProp<T>;
 }
 declare type PaddingYProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingYProps<T extends ITheme = VuiTheme> {
     py?: PaddingYProp<T>;
     hoverPy?: PaddingYProp<T>;
+    lastPy?: PaddingYProp<T>;
 }
 export interface SpaceProps<T extends ITheme = VuiTheme> extends MarginProps<T>, MarginTopProps<T>, MarginRightProps<T>, MarginBottomProps<T>, MarginLeftProps<T>, MarginXProps<T>, MarginYProps<T>, PaddingProps<T>, PaddingTopProps<T>, PaddingRightProps<T>, PaddingBottomProps<T>, PaddingLeftProps<T>, PaddingXProps<T>, PaddingYProps<T> {
 }

package/t/t.js

@@ -36,9 +36,9 @@ var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(system_1.isTruncated, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.cursor, styled_components_1.flexboxes, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.TBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.T = core_1.forwardRef(function (props, ref) {
+exports.T = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, className = _a.className, decoration = _a.decoration, isFlex = _a.isFlex, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "className", "decoration", "isFlex", "weight"]);
     var styles = core_1.useStyleConfig('T', props);
     var aliasedProps = utils_1.filterUndefined({

package/t/t.types.d.ts

@@ -1,4 +1,4 @@
-import { IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TProps extends TStyleProps, ThemingProps<'T'> {
     align?: TypographyProps['textAlign'];
@@ -8,5 +8,5 @@ export interface TProps extends TStyleProps, ThemingProps<'T'> {
     isFlex?: boolean;
     weight?: TypographyProps['fontWeight'];
 }
-export interface TStyleProps extends IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface TStyleProps extends BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/textarea/textarea.js

@@ -37,7 +37,7 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.fontSize, styled_components_1.resize, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.TextareaBase = styled_components_2.default.textarea.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
-exports.Textarea = core_1.forwardRef(function (props, ref) {
+exports.Textarea = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = core_1.useStyleConfig('Textarea', props);
     return (react_1.default.createElement(exports.TextareaBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), p: 1, placeholderColor: "grey.60", ref: ref, transitionDuration: "fast" }, styles, rest)));

package/theme/defaultTheme.d.ts

@@ -1,13 +1,16 @@
 declare const defaultTheme: {
     animations: {
+        bounce: string;
         fadeDown: string;
         fadeIn: string;
         fadeLeft: string;
         fadeOut: string;
         fadeRight: string;
         fadeUp: string;
+        pulse: string;
         spin: string;
     };
+    borders: {};
     colors: {
         blue: {
             10: string;
@@ -122,6 +125,14 @@ declare const defaultTheme: {
         lg: number;
         round: number;
     };
+    ringWidths: {};
+    screens: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
     shadows: {
         0: string;
         1: string;
@@ -130,16 +141,14 @@ declare const defaultTheme: {
         4: string;
         5: string;
     };
-    screens: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
+    sizes: {};
+    spaces: {};
     transformers: {
         space: (value: string | number) => string;
     };
+    transforms: {};
+    transitions: {};
+    zIndices: {};
     components: {
         Alert: {
             defaultProps: {

package/theme/foundations/animations.d.ts

@@ -1,10 +1,12 @@
-declare const animations: {
+declare const _default: {
+    bounce: string;
     fadeDown: string;
     fadeIn: string;
     fadeLeft: string;
     fadeOut: string;
     fadeRight: string;
     fadeUp: string;
+    pulse: string;
     spin: string;
 };
-export default animations;
+export default _default;

package/theme/foundations/animations.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var animations = {
-    fadeDown: 'fadeDown 0.3s ease-in-out',
-    fadeIn: 'fadeIn 0.3s ease-in-out',
-    fadeLeft: 'fadeLeft 0.3s ease-in-out',
-    fadeOut: 'fadeOut 0.3s ease-in-out',
-    fadeRight: 'fadeRight 0.3s ease-in-out',
-    fadeUp: 'fadeUp 0.3s ease-in-out',
-    spin: 'spin 1s linear infinite'
+exports.default = {
+    bounce: 'vui-bounce 1s infinite',
+    fadeDown: 'vui-fadeDown 0.3s ease-in-out',
+    fadeIn: 'vui-fadeIn 0.3s ease-in-out',
+    fadeLeft: 'vui-fadeLeft 0.3s ease-in-out',
+    fadeOut: 'vui-fadeOut 0.3s ease-in-out',
+    fadeRight: 'vui-fadeRight 0.3s ease-in-out',
+    fadeUp: 'vui-fadeUp 0.3s ease-in-out',
+    pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    spin: 'vui-spin 1s linear infinite'
 };
-exports.default = animations;

package/theme/foundations/borders.d.ts

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

package/theme/foundations/borders.js

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

package/theme/foundations/colors.d.ts

@@ -1,4 +1,88 @@
-declare const colors: {
+export declare const blue: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const green: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const grey: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const pink: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const prussian: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const red: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const yellow: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+declare const _default: {
     blue: {
         10: string;
         20: string;
@@ -84,4 +168,4 @@ declare const colors: {
         100: string;
     };
 };
-export default colors;
+export default _default;

package/theme/foundations/colors.js

@@ -1,89 +1,96 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var colors = {
-    blue: {
-        10: '#f6fbff',
-        20: '#e2f1ff',
-        30: '#c2e1fe',
-        40: '#a1cef9',
-        50: '#77baf9',
-        60: '#48a1f3',
-        70: '#1e86e5',
-        80: '#0067c5',
-        90: '#075094',
-        100: '#003f79'
-    },
-    green: {
-        10: '#efffed',
-        20: '#d8ffd3',
-        30: '#bdfbb6',
-        40: '#9df291',
-        50: '#82db77',
-        60: '#68c35e',
-        70: '#4ea344',
-        80: '#36842d',
-        90: '#276121',
-        100: '#024019'
-    },
-    grey: {
-        10: '#f7f8f9',
-        20: '#f1f3f5',
-        30: '#e1e6e9',
-        40: '#c3ccd3',
-        50: '#a5b3bd',
-        60: '#8799a7',
-        70: '#768b9c',
-        80: '#698091',
-        90: '#586c7a',
-        100: '#465663'
-    },
-    pink: {
-        10: '#fff3fd',
-        20: '#ffddf9',
-        30: '#ffbdf3',
-        40: '#ff8eea',
-        50: '#ff55df',
-        60: '#ff0ed2',
-        70: '#ee00c1',
-        80: '#da00b1',
-        90: '#a00082',
-        100: '#72005c'
-    },
-    prussian: {
-        10: '#eff3f5',
-        20: '#c5dce8',
-        30: '#91bbcf',
-        40: '#5690ac',
-        50: '#32718e',
-        60: '#0d5071',
-        70: '#003b57',
-        80: '#002a3e',
-        90: '#001620',
-        100: '#000b11'
-    },
-    red: {
-        10: '#fff1f1',
-        20: '#ffe4e4',
-        30: '#ffc8c8',
-        40: '#faa7ab',
-        50: '#fb7b81',
-        60: '#f64d55',
-        70: '#e84148',
-        80: '#d6383f',
-        90: '#b62f3a',
-        100: '#962730'
-    },
-    yellow: {
-        10: '#fffde7',
-        20: '#fff8bd',
-        30: '#ffed7a',
-        40: '#ffe43a',
-        50: '#ffd600',
-        60: '#fec600',
-        70: '#f4b40d',
-        80: '#e29c13',
-        90: '#b67b08',
-        100: '#83591a'
-    }
+exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
+exports.blue = {
+    10: '#f6fbff',
+    20: '#e2f1ff',
+    30: '#c2e1fe',
+    40: '#a1cef9',
+    50: '#77baf9',
+    60: '#48a1f3',
+    70: '#1e86e5',
+    80: '#0067c5',
+    90: '#075094',
+    100: '#003f79'
+};
+exports.green = {
+    10: '#efffed',
+    20: '#d8ffd3',
+    30: '#bdfbb6',
+    40: '#9df291',
+    50: '#82db77',
+    60: '#68c35e',
+    70: '#4ea344',
+    80: '#36842d',
+    90: '#276121',
+    100: '#024019'
+};
+exports.grey = {
+    10: '#f7f8f9',
+    20: '#f1f3f5',
+    30: '#e1e6e9',
+    40: '#c3ccd3',
+    50: '#a5b3bd',
+    60: '#8799a7',
+    70: '#768b9c',
+    80: '#698091',
+    90: '#586c7a',
+    100: '#465663'
+};
+exports.pink = {
+    10: '#fff3fd',
+    20: '#ffddf9',
+    30: '#ffbdf3',
+    40: '#ff8eea',
+    50: '#ff55df',
+    60: '#ff0ed2',
+    70: '#ee00c1',
+    80: '#da00b1',
+    90: '#a00082',
+    100: '#72005c'
+};
+exports.prussian = {
+    10: '#eff3f5',
+    20: '#c5dce8',
+    30: '#91bbcf',
+    40: '#5690ac',
+    50: '#32718e',
+    60: '#0d5071',
+    70: '#003b57',
+    80: '#002a3e',
+    90: '#001620',
+    100: '#000b11'
+};
+exports.red = {
+    10: '#fff1f1',
+    20: '#ffe4e4',
+    30: '#ffc8c8',
+    40: '#faa7ab',
+    50: '#fb7b81',
+    60: '#f64d55',
+    70: '#e84148',
+    80: '#d6383f',
+    90: '#b62f3a',
+    100: '#962730'
+};
+exports.yellow = {
+    10: '#fffde7',
+    20: '#fff8bd',
+    30: '#ffed7a',
+    40: '#ffe43a',
+    50: '#ffd600',
+    60: '#fec600',
+    70: '#f4b40d',
+    80: '#e29c13',
+    90: '#b67b08',
+    100: '#83591a'
+};
+exports.default = {
+    blue: exports.blue,
+    green: exports.green,
+    grey: exports.grey,
+    pink: exports.pink,
+    prussian: exports.prussian,
+    red: exports.red,
+    yellow: exports.yellow
 };
-exports.default = colors;

package/theme/foundations/durations.d.ts

@@ -1,6 +1,7 @@
-declare const durations: {
+declare const _default: {
+    instant: string;
     fast: string;
     normal: string;
     slow: string;
 };
-export default durations;
+export default _default;

package/theme/foundations/durations.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var durations = {
+exports.default = {
+    instant: '100ms',
     fast: '200ms',
     normal: '300ms',
     slow: '400ms'
 };
-exports.default = durations;

package/theme/foundations/fontSizes.d.ts

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

package/theme/foundations/fontSizes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18
+};

package/theme/foundations/fontWeights.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    regular: string;
+    medium: string;
+    demi: string;
+    bold: string;
+};
+export default _default;

package/theme/foundations/fontWeights.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    regular: '400',
+    medium: '500',
+    demi: '600',
+    bold: '700'
+};

package/theme/foundations/fonts.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    avenir: string;
+};
+export default _default;

package/theme/foundations/fonts.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    avenir: "'Avenir Next', Verdana, Geneva, Tahoma, sans-serif"
+};