@veracity/vui 0.0.3 → 0.0.5

package/p/p.types.d.ts

@@ -1,13 +1,10 @@
-import { HTMLAttributes } from 'react';
-import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TextAlignProps, TextDecorationProps, TextTransformProps, TransitionsProps, TypographyProps } from '../system';
-import { FontWeight, ThemingProps, VuiTheme } from '../theme';
-import { AnyString } from '../utils';
-export interface PProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'color'>, PStyleProps, ThemingProps<'P'> {
-    align?: TextAlignProps['textAlign'];
-    casing?: TextTransformProps<VuiTheme>['textTransform'];
-    decoration?: TextDecorationProps<VuiTheme>['textDecoration'];
-    weight?: FontWeight | AnyString | number;
+import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface PProps extends PStyleProps, ThemingProps<'P'> {
+    align?: TypographyProps['textAlign'];
+    casing?: TypographyProps['textTransform'];
+    decoration?: TypographyProps['textDecoration'];
+    weight?: TypographyProps['fontWeight'];
 }
-export interface PStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, Omit<TypographyProps<VuiTheme>, 'color'> {
-    color?: string;
+export interface PStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/radio/radio.d.ts

@@ -1,10 +1,6 @@
 import { RadioControlStyleProps, RadioProps, RadioStyleProps } from './radio.types';
 export declare const RadioInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & RadioStyleProps, never>;
-export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & RadioControlStyleProps, never>;
-export declare const Radio: import("styled-components").StyledComponent<"span", never, RadioProps, never>;
+export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, RadioStyleProps, never>;
+export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, RadioControlStyleProps, never>;
+export declare const Radio: import("../core").VuiComponent<"span", RadioProps>;
 export default Radio;

package/radio/radio.js

@@ -41,12 +41,8 @@ var utils_1 = require("../utils");
 var radioGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.RadioInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.RadioBase = styled_components_2.default.label.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(radioGenerator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th('colors', p.controlHoverColor)(p); }, radioGenerator);
-exports.RadioControl = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(controlGenerator.meta.props)
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
+exports.RadioBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(radioGenerator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th('colors', p.controlHoverColor)(p); }, radioGenerator);
+exports.RadioControl = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(controlGenerator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
 exports.Radio = core_1.forwardRef(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
@@ -63,11 +59,9 @@ exports.Radio = core_1.forwardRef(function (props, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
     return (react_1.default.createElement(exports.RadioBase, __assign({ className: utils_1.cs('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
-        react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, 
-            // hoverColor={hoverColor}
-            mr: controlMr, transitionDuration: "fast" }, controlStyles),
+        react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
             react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
-            react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel" }, styles.label), label)))));
+            react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Radio.displayName = 'Radio';
 exports.default = exports.Radio;

package/radio/radio.types.d.ts

@@ -1,10 +1,11 @@
 import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface RadioProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, RadioStyleProps, ThemingProps<'Radio'> {
+export interface RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
     checked?: boolean;
-    colorScheme?: 'blue' | 'prussian';
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     icon?: IconProp;
     iconChecked?: IconProp;
@@ -12,7 +13,9 @@ export interface RadioProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onCh
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     label?: string;
     name?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     required?: boolean;
     value?: number | string;
 }

package/radio/radioGroup.d.ts

@@ -1,6 +1,4 @@
 import { RadioGroupProps, RadioGroupStyleProps } from './radioGroup.types';
-export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & RadioGroupStyleProps, never>;
-export declare const RadioGroup: import("styled-components").StyledComponent<"div", never, RadioGroupProps, never>;
+export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, RadioGroupStyleProps, never>;
+export declare const RadioGroup: import("../core").VuiComponent<"div", RadioGroupProps>;
 export default RadioGroup;

package/radio/radioGroup.js

@@ -72,11 +72,9 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.RadioGroupBase = styled_components_2.default.div.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.RadioGroupBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
 exports.RadioGroup = core_1.forwardRef(function (props, ref) {
-    var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onChange", "row", "size", "value", "variant"]);
+    var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "value", "variant"]);
     var isControlled = react_1.useRef(valueProp !== undefined).current;
     var _b = __read(react_1.useState(defaultValue), 2), valueState = _b[0], setValueState = _b[1];
     var value = isControlled ? valueProp : valueState;
@@ -87,7 +85,9 @@ exports.RadioGroup = core_1.forwardRef(function (props, ref) {
     var setValue = react_1.useCallback(function (value) {
         !isControlled && setValueState(value);
     }, []);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: handleOnChange, size: size, value: value, variant: variant }); }, [colorScheme, disabled, name, handleOnChange, size, value, variant]);
+    var context = react_1.useMemo(function () {
+        return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus, size: size, value: value, variant: variant });
+    }, [colorScheme, disabled, name, handleOnChange, onBlur, onFocus, size, value, variant]);
     var aliasedProps = utils_1.filterUndefined({
         flexDirection: row ? 'row' : undefined
     });

package/radio/radioGroup.types.d.ts

@@ -1,11 +1,13 @@
-import { HTMLAttributes } from 'react';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, RadioGroupStyleProps, ThemingProps<'Radio'> {
-    colorScheme?: 'blue' | 'prussian';
+export interface RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Radio'> {
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     row?: boolean;
     value?: number | string;
 }

package/radio/theme.d.ts

@@ -28,7 +28,6 @@ declare const _default: {
                 w: number;
             };
             label: {
-                lineHeight: number;
                 size: string;
             };
         };

package/radio/theme.js

@@ -32,7 +32,6 @@ var sizes = {
             w: 20
         },
         label: {
-            lineHeight: 1.2,
             size: 'md'
         }
     },

package/skeleton/skeleton.d.ts

@@ -1,6 +1,4 @@
 import { SkeletonProps, SkeletonStyleProps } from './skeleton.types';
-export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & SkeletonStyleProps, never>;
-export declare const Skeleton: import("styled-components").StyledComponent<"div", never, SkeletonProps, never>;
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SkeletonStyleProps, never>;
+export declare const Skeleton: import("../core").VuiComponent<"div", SkeletonProps>;
 export default Skeleton;

package/skeleton/skeleton.js

@@ -56,9 +56,7 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
 var pulse = styled_components_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.SkeletonBase = styled_components_2.default.div.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
+exports.SkeletonBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
 exports.Skeleton = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
     var styles = core_1.useStyleConfig('Skeleton', props);

package/skeleton/skeleton.types.d.ts

@@ -1,7 +1,6 @@
-import { HTMLAttributes } from 'react';
 import { BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SkeletonStyleProps, ThemingProps<'Skeleton'> {
+export interface SkeletonProps extends SkeletonStyleProps, ThemingProps<'Skeleton'> {
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }

package/spinner/consts.d.ts

@@ -0,0 +1,34 @@
+export declare const positionMapping: {
+    bottom: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mb: number;
+        };
+    };
+    left: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            ml: number;
+        };
+    };
+    right: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mr: number;
+        };
+    };
+    top: {
+        container: {
+            flexDirection: string;
+        };
+        circle: {
+            mt: number;
+        };
+    };
+};

package/spinner/consts.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionMapping = void 0;
+exports.positionMapping = {
+    bottom: {
+        container: { flexDirection: 'column' },
+        circle: { mb: 1 }
+    },
+    left: {
+        container: { flexDirection: 'row-reverse' },
+        circle: { ml: 1 }
+    },
+    right: {
+        container: { flexDirection: 'row' },
+        circle: { mr: 1 }
+    },
+    top: {
+        container: { flexDirection: 'column-reverse' },
+        circle: { mt: 1 }
+    }
+};

package/spinner/index.d.ts

@@ -0,0 +1,3 @@
+export * from './spinner';
+export * from './spinner.types';
+export { default } from './spinner';

package/spinner/index.js

@@ -0,0 +1,20 @@
+"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("./spinner"), exports);
+__exportStar(require("./spinner.types"), exports);
+var spinner_1 = require("./spinner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(spinner_1).default; } });

package/spinner/spinner.d.ts

@@ -0,0 +1,4 @@
+import { SpinnerCircleStyleProps, SpinnerProps } from './spinner.types';
+export declare const SpinnerCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpinnerCircleStyleProps, never>;
+export declare const Spinner: import("../core").VuiComponent<"div", SpinnerProps>;
+export default Spinner;

package/spinner/spinner.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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.Spinner = exports.SpinnerCircle = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var consts_1 = require("./consts");
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var circleGenerator = styled_components_1.compose(styled_components_1.animation, styled_components_1.borders, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+exports.SpinnerCircle = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(circleGenerator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), circleGenerator, function (p) { return p.speed; });
+exports.Spinner = core_1.forwardRef(function (props, ref) {
+    var className = props.className, emptyColor = props.emptyColor, size = props.size, _a = props.speed, speed = _a === void 0 ? '0.8s' : _a, text = props.text, _b = props.textPosition, textPosition = _b === void 0 ? 'bottom' : _b, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);
+    var styles = core_1.useStyleConfig('Spinner', props);
+    var isCustomSize = typeof size === 'number';
+    var positionProps = consts_1.positionMapping[textPosition];
+    var circleProps = utils_1.filterUndefined({
+        borderColor: emptyColor,
+        borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
+        h: isCustomSize ? size : undefined,
+        w: isCustomSize ? size : undefined
+    });
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: utils_1.cs('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", flexShrink: "0", speed: speed }, styles.circle, positionProps.circle, circleProps)),
+        text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
+});
+exports.Spinner.displayName = 'Spinner';
+exports.default = exports.Spinner;
+var templateObject_1;

package/spinner/spinner.types.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '../box';
+import { BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface SpinnerCircleStyleProps extends BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+    speed?: string;
+}
+export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {
+    colorScheme?: 'blue' | 'grey' | 'prussian';
+    emptyColor?: string;
+    speed?: string;
+    size?: ThemingProps<'Spinner'>['size'] | number;
+    text?: string;
+    textPosition?: 'bottom' | 'left' | 'right' | 'top';
+    thickness?: number;
+}

package/spinner/spinner.types.js

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

package/spinner/theme.d.ts

@@ -0,0 +1,68 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    container: {
+        color: string;
+    };
+    circle: {
+        borderColor: string;
+        borderTopColor: string;
+        borderRightColor: string;
+    };
+    text: {};
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        xs: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        sm: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        md: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        lg: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        card: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        page: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/spinner/theme.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var container = {
+        color: c + ".60"
+    };
+    var circle = {
+        borderColor: c + ".20",
+        borderTopColor: c + ".60",
+        borderRightColor: c + ".60"
+    };
+    var text = {};
+    return { container: container, circle: circle, text: text };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'page',
+    variant: 'default'
+};
+var parts = ['container', 'circle', 'text'];
+var sizes = {
+    xs: {
+        circle: {
+            borderWidth: 1,
+            h: 16,
+            w: 16
+        }
+    },
+    sm: {
+        circle: {
+            borderWidth: 2,
+            h: 24,
+            w: 24
+        }
+    },
+    md: {
+        circle: {
+            borderWidth: 3,
+            h: 32,
+            w: 32
+        }
+    },
+    lg: {
+        circle: {
+            borderWidth: 3,
+            h: 40,
+            w: 40
+        }
+    },
+    card: {
+        circle: {
+            borderWidth: 4,
+            h: 60,
+            w: 60
+        }
+    },
+    page: {
+        circle: {
+            borderWidth: 5,
+            h: 80,
+            w: 80
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/styles/radii.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     sm: number;
     md: number;
     lg: number;
+    round: number;
 };
 export default _default;

package/styles/radii.js

@@ -4,5 +4,6 @@ exports.default = {
     none: 0,
     sm: 4,
     md: 6,
-    lg: 10
+    lg: 10,
+    round: 9999
 };

package/svg/helpers.d.ts

@@ -2,7 +2,7 @@ import { SvgState } from './svg.types';
 import { Dict } from '../utils';
 /** Returns an object with given element's HTML attributes. */
 export declare function getAttributes(element?: Element): Dict<string>;
-/** Returns content of the SVG HTML string by stripping <svg> tag. */
+/** Returns content of the SVG HTML string by stripping the svg tag. */
 export declare function getSvgContent(html?: string): string;
 /** Returns object with initial state values. */
 export declare function initState(): SvgState;

package/svg/helpers.js

@@ -13,7 +13,7 @@ function getAttributes(element) {
     }, {});
 }
 exports.getAttributes = getAttributes;
-/** Returns content of the SVG HTML string by stripping <svg> tag. */
+/** Returns content of the SVG HTML string by stripping the svg tag. */
 function getSvgContent(html) {
     if (html === void 0) { html = ''; }
     return html.replace(/(<\/?svg(?:.|\n)*?>)|(\r\n|\n|\r)/gm, '');

package/svg/svg.d.ts

@@ -1,6 +1,4 @@
-import { SvgProps, SvgStyleProps } from './svg.types';
-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>;
+import { SvgBaseOmitProps, SvgProps, SvgStyleProps } from './svg.types';
+export declare const SvgBase: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SvgStyleProps & SvgBaseOmitProps, never>;
+export declare const Svg: import("../core").VuiComponent<"svg", SvgProps>;
 export default Svg;

package/svg/svg.js

@@ -109,15 +109,14 @@ 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.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\t", "\n"], ["\n\t", "\n"])), generator);
+exports.SvgBase = styled_components_2.default.svg.withConfig(core_1.forwardPropConfig(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];
     var _c = state.content, content = _c === void 0 ? '' : _c, _d = state.svgAttributes, svgAttributes = _d === void 0 ? {} : _d;
-    svgAttributes['data-src'] = src !== null && src !== void 0 ? src : '';
+    var srcRef = react_1.useRef(src);
     react_1.useEffect(function () {
+        srcRef.current = src;
         function loadSvg(src) {
             return __awaiter(this, void 0, void 0, function () {
                 var response, content_1, svgEl, svgAttributes_1, error_1;
@@ -131,7 +130,11 @@ exports.Svg = core_1.forwardRef(function (_a, ref) {
                             content_1 = helpers_1.getSvgContent(response);
                             svgEl = helpers_1.stringToHTML(response);
                             svgAttributes_1 = helpers_1.getAttributes(svgEl);
-                            setState({ content: content_1, svgAttributes: svgAttributes_1 });
+                            svgAttributes_1['data-src'] = src !== null && src !== void 0 ? src : '';
+                            // Update state only when requested 'src' and current 'src' are the same
+                            if (srcRef.current === src) {
+                                setState({ content: content_1, svgAttributes: svgAttributes_1 });
+                            }
                             return [3 /*break*/, 3];
                         case 2:
                             error_1 = _a.sent();

package/svg/svg.types.d.ts

@@ -1,7 +1,13 @@
-import { SVGProps } from 'react';
 import { AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps } from '../system';
 import { Dict } from '../utils';
-export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'display' | 'order' | 'transform'>, SvgStyleProps {
+/** Fix for conflicting types of styled.svg */
+export interface SvgBaseOmitProps {
+    color?: any;
+    display?: any;
+    order?: any;
+    transform?: any;
+}
+export interface SvgProps extends SvgStyleProps {
     src?: string;
 }
 export interface SvgState {
@@ -9,5 +15,4 @@ export interface SvgState {
     svgAttributes: Dict<string>;
 }
 export interface SvgStyleProps extends AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps {
-    color?: string;
 }