@veracity/vui 0.0.2 → 0.0.3

package/styles/colors.d.ts

@@ -0,0 +1,171 @@
+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;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    green: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    grey: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    pink: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    prussian: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    red: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    yellow: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+};
+export default _default;

package/styles/colors.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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
+};

package/styles/durations.d.ts

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

package/styles/durations.js

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

package/styles/fontFaces.d.ts

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

package/styles/fontFaces.js

@@ -0,0 +1,4 @@
+"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/fontSizes.d.ts

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

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

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

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

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

package/styles/fonts.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("../core");
-var fonts = "\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";
-exports.default = fonts;
+exports.default = {
+    avenir: "'Avenir Next', Verdana, Geneva, Tahoma, sans-serif"
+};

package/styles/index.d.ts

@@ -1,3 +1,13 @@
 export * from './animations';
+export * from './colors';
 export * from './helpers';
+export { default as animations } from './animations';
+export { default as colors } from './colors';
+export { default as durations } from './durations';
+export { default as fontFaces } from './fontFaces';
 export { default as fonts } from './fonts';
+export { default as fontSizes } from './fontSizes';
+export { default as fontWeights } from './fontWeights';
+export { default as radii } from './radii';
+export { default as screens } from './screens';
+export { default as shadows } from './shadows';

package/styles/index.js

@@ -13,8 +13,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fonts = void 0;
+exports.shadows = exports.screens = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.fontFaces = exports.durations = exports.colors = exports.animations = void 0;
 __exportStar(require("./animations"), exports);
+__exportStar(require("./colors"), exports);
 __exportStar(require("./helpers"), exports);
+var animations_1 = require("./animations");
+Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return __importDefault(animations_1).default; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return __importDefault(colors_1).default; } });
+var durations_1 = require("./durations");
+Object.defineProperty(exports, "durations", { enumerable: true, get: function () { return __importDefault(durations_1).default; } });
+var fontFaces_1 = require("./fontFaces");
+Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
 var fonts_1 = require("./fonts");
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });
+var fontSizes_1 = require("./fontSizes");
+Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return __importDefault(fontSizes_1).default; } });
+var fontWeights_1 = require("./fontWeights");
+Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return __importDefault(fontWeights_1).default; } });
+var radii_1 = require("./radii");
+Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
+var screens_1 = require("./screens");
+Object.defineProperty(exports, "screens", { enumerable: true, get: function () { return __importDefault(screens_1).default; } });
+var shadows_1 = require("./shadows");
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });

package/styles/radii.d.ts

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

package/styles/radii.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    none: 0,
+    sm: 4,
+    md: 6,
+    lg: 10
+};

package/styles/screens.d.ts

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

package/styles/screens.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920
+};

package/styles/shadows.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export default _default;

package/styles/shadows.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var colors_1 = require("./colors");
+exports.default = {
+    0: "0px 0px 0px 0px " + colors_1.grey[80],
+    1: "0px 2px 7px -3px " + colors_1.grey[80],
+    2: "0px 6px 23px -8px " + colors_1.grey[80],
+    3: "0px 16px 42px -15px " + colors_1.grey[80],
+    4: "0px 18px 54px -8px " + colors_1.grey[80],
+    5: "0px 28px 77px -5px " + colors_1.grey[80]
+};

package/svg/svg.d.ts

@@ -1,5 +1,5 @@
 import { SvgProps, SvgStyleProps } from './svg.types';
-export declare const BaseSvg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+export declare const SvgBase: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & SvgStyleProps, never>;
 export declare const Svg: import("styled-components").StyledComponent<"svg", never, SvgProps, never>;

package/svg/svg.js

@@ -100,7 +100,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Svg = exports.BaseSvg = void 0;
+exports.Svg = exports.SvgBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
@@ -108,10 +108,10 @@ var cache_1 = __importDefault(require("./cache"));
 var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
-exports.BaseSvg = styled_components_2.default.svg.withConfig({
+var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
+exports.SvgBase = styled_components_2.default.svg.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"])), generator);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.Svg = core_1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, src = _a.src, rest = __rest(_a, ["children", "className", "src"]);
     var _b = __read(react_1.useState(helpers_1.initState()), 2), state = _b[0], setState = _b[1];
@@ -146,7 +146,7 @@ exports.Svg = core_1.forwardRef(function (_a, ref) {
         src && loadSvg(src);
     }, [src]);
     var innerHTML = !children ? { __html: content } : undefined;
-    return (react_1.default.createElement(exports.BaseSvg, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
+    return (react_1.default.createElement(exports.SvgBase, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
 });
 exports.Svg.displayName = 'Svg';
 exports.default = exports.Svg;

package/svg/svg.types.d.ts

@@ -1,13 +1,13 @@
 import { SVGProps } from 'react';
-import { AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps } from '../system';
+import { AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps } from '../system';
 import { Dict } from '../utils';
-export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'transform'>, SvgStyleProps {
+export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'display' | 'order' | 'transform'>, SvgStyleProps {
     src?: string;
 }
 export interface SvgState {
     content?: string;
     svgAttributes: Dict<string>;
 }
-export interface SvgStyleProps extends AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps {
+export interface SvgStyleProps extends AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps {
     color?: string;
 }

package/switch/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const SwitchProvider: import("react").Provider<Dict<any>>, useSwitch: () => Dict<any>;
+export { SwitchProvider, useSwitch };

package/switch/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwitch = exports.SwitchProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitch = _a[1];
+exports.SwitchProvider = SwitchProvider;
+exports.useSwitch = useSwitch;

package/switch/index.d.ts

@@ -0,0 +1,6 @@
+export * from './switch';
+export * from './switch.types';
+export * from './switchButton';
+export * from './switchButton.types';
+export * from './switchLabel';
+export { default } from './switch';

package/switch/index.js

@@ -0,0 +1,23 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./switch"), exports);
+__exportStar(require("./switch.types"), exports);
+__exportStar(require("./switchButton"), exports);
+__exportStar(require("./switchButton.types"), exports);
+__exportStar(require("./switchLabel"), exports);
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });

package/switch/switch.d.ts

@@ -0,0 +1,6 @@
+import { SwitchProps, SwitchStyleProps } from './switch.types';
+export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & SwitchStyleProps, never>;
+export declare const Switch: import("styled-components").StyledComponent<"span", never, SwitchProps, never>;
+export default Switch;