@veracity/vui 0.0.8 → 0.0.9

package/alert/alertTitle.js

@@ -18,13 +18,13 @@ exports.AlertTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
-var heading_1 = __importDefault(require("../heading"));
+var heading_1 = require("../heading");
 exports.AlertTitle = core_1.vui(function (props, ref) {
     var _a;
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(heading_1.default, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref, size: "h6" }, styles.title, props));
+    return react_1.default.createElement(heading_1.H2, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
 });
 exports.AlertTitle.displayName = 'AlertTitle';
 exports.default = exports.AlertTitle;

package/button/button.types.d.ts

@@ -3,7 +3,7 @@ import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'green' | 'grey' | 'pink' | 'prussian' | 'red';
     icon?: IconProp;
     iconLeft?: IconProp;
     iconRight?: IconProp;
@@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    text?: string;
+    text?: number | string;
 }
 export interface ButtonStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps {
 }

package/button/buttons.d.ts

@@ -1,5 +1,8 @@
-export declare const AppButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const CTAButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const DangerButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const OutlinedButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const TextButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
+import { ButtonProps } from './button.types';
+export declare const AppButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const BackButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const CloseButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const CTAButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const DangerButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const LineButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;

package/button/buttons.js

@@ -14,12 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextButton = exports.OutlinedButton = exports.DangerButton = exports.CTAButton = exports.AppButton = void 0;
+exports.TextButton = exports.LineButton = exports.DangerButton = exports.CTAButton = exports.CloseButton = exports.BackButton = exports.AppButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("./button"));
 var core_1 = require("../core");
 exports.AppButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))); });
+exports.BackButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falChevronLeft", ref: ref, variant: "text" }, props))); });
+exports.CloseButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))); });
 exports.CTAButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "green", ref: ref, variant: "solid" }, props))); });
 exports.DangerButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "red", ref: ref, variant: "solid" }, props))); });
-exports.OutlinedButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))); });
+exports.LineButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))); });
 exports.TextButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))); });

package/button/theme.d.ts

@@ -7,8 +7,13 @@ declare function variantOutlined(props: Dict): {
     borderColor: string;
     borderWidth: number;
 };
+declare function variantSubtle(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
 declare function variantSolid(props: Dict): {
-    borderColor: string;
     hoverBg: string;
     activeBg: string;
     bg: string;
@@ -59,6 +64,7 @@ declare const _default: {
     variants: {
         outlined: typeof variantOutlined;
         solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
         text: typeof variantText;
     };
 };

package/button/theme.js

@@ -16,10 +16,23 @@ function variantOutlined(props) {
     var styles = __assign({ borderColor: c + ".80", borderWidth: 1 }, variantText(props));
     return styles;
 }
+function variantSubtle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        bg: c + ".20",
+        color: c + ".90"
+    };
+    // Special cases
+    if (c === 'grey') {
+        styles.color = 'prussian.80';
+    }
+    return styles;
+}
 function variantSolid(props) {
     var c = props.colorScheme;
     var styles = {
-        borderColor: c + ".100",
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
@@ -45,6 +58,9 @@ function variantText(props) {
         styles.activeBg = 'blue.30';
         styles.hoverBg = 'blue.20';
     }
+    if (c === 'grey') {
+        styles.color = 'prussian.80';
+    }
     return styles;
 }
 var defaultProps = {
@@ -85,6 +101,7 @@ var sizes = {
 var variants = {
     outlined: variantOutlined,
     solid: variantSolid,
+    subtle: variantSubtle,
     text: variantText
 };
 exports.default = {

package/core/types/component.d.ts

@@ -7,12 +7,9 @@ export declare type RefPropsOf<C extends React.ElementType, Props = {}> = RightJ
 export declare type RightJoinProps<SourceProps, OverrideProps> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
 /** VUI component interface, which allows element props inference and extension, 'as' and 'ref' */
 export interface VuiComponent<C extends React.ElementType, Props = {}> {
-    <AsC extends React.ElementType>(props: RefPropsOf<AsC, Props> & {
+    <AsC extends React.ElementType>(props: RefPropsOf<PropsOf<C, AsC>, Props> & {
         as: AsC;
     }): JSX.Element;
-    <AsC extends React.ElementType>(props: RefPropsOf<AsC, Props> & {
-        forwardedAs: AsC;
-    }): JSX.Element;
     (props: RefPropsOf<C, Props>): JSX.Element;
     defaultProps?: Partial<PropsOf<C, Props>>;
     displayName?: string;

package/core/vuiProvider.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_1 = require("styled-components");
 var globalStyle_1 = __importDefault(require("./globalStyle"));
 var resetCSS_1 = __importDefault(require("./resetCSS"));
 var theme_1 = __importDefault(require("../theme"));

package/heading/heading.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.HeadingBase = styled_components_2.default.h2.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.Heading = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);
     var hClassName = props.size ? "vui-" + props.size : '';
     var aliasedProps = utils_1.filterUndefined({
@@ -48,7 +48,7 @@ exports.Heading = core_1.vui(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

package/heading/heading.types.d.ts

@@ -4,6 +4,7 @@ export interface HeadingProps extends HeadingStyleProps, ThemingProps<'Heading'>
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface HeadingStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/heading/headings.d.ts

@@ -1,6 +1,7 @@
-export declare const H1: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H2: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H3: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H4: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H5: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H6: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
+import { HeadingProps } from './heading.types';
+export declare const H1: import("../core").VuiComponent<"h1", HeadingProps>;
+export declare const H2: import("../core").VuiComponent<"h2", HeadingProps>;
+export declare const H3: import("../core").VuiComponent<"h3", HeadingProps>;
+export declare const H4: import("../core").VuiComponent<"h4", HeadingProps>;
+export declare const H5: import("../core").VuiComponent<"h5", HeadingProps>;
+export declare const H6: import("../core").VuiComponent<"h6", HeadingProps>;

package/label/label.types.d.ts

@@ -16,7 +16,7 @@ export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    text?: string;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface LabelStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/link/link.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.borders, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.LinkBase = styled_components_2.default.a.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), generator);
 exports.Link = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, weight = _a.weight, rest = __rest(_a, ["className", "decoration", "hoverDecoration", "isExternal", "weight"]);
+    var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "text", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
@@ -48,7 +48,7 @@ exports.Link = core_1.vui(function (props, ref) {
         target: isExternal ? '_blank' : undefined,
         textDecoration: decoration
     });
-    return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: utils_1.cs('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: utils_1.cs('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Link.displayName = 'Link';
 exports.default = exports.Link;

package/link/link.types.d.ts

@@ -5,6 +5,7 @@ export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
     decoration?: TypographyProps['textDecoration'];
     hoverDecoration?: TypographyProps['textDecoration'];
     isExternal?: boolean;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface LinkStyleProps extends BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/list/list.d.ts

@@ -1,9 +1,11 @@
 import { ListProps, ListStyleProps } from './list.types';
+import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
 import { VuiComponent } from '../core';
 export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, ListStyleProps, never>;
 export declare const List: VuiComponent<"ul", ListProps> & {
+    Heading: typeof ListHeading;
     Icon: typeof ListIcon;
     Item: typeof ListItem;
 };

package/list/list.js

@@ -53,6 +53,7 @@ var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
@@ -60,7 +61,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
 exports.ListBase = styled_components_2.default.ul.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.List = core_1.vui(function (props, ref) {
-    var children = props.children, className = props.className, colorScheme = props.colorScheme, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);
+    var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
     var styles = core_1.useStyleConfig('List', props);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
         colorScheme,
@@ -70,10 +71,11 @@ exports.List = core_1.vui(function (props, ref) {
     ]);
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
         react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.container, rest),
-            subheader && (react_1.default.createElement(listItem_1.default, { className: "vui-listSubheader", color: "grey.80", fontSize: "sm", fontWeight: "medium" }, subheader)),
+            heading && react_1.default.createElement(listHeading_1.default, null, heading),
             children)));
 });
 exports.List.displayName = 'List';
+exports.List.Heading = listHeading_1.default;
 exports.List.Icon = listIcon_1.default;
 exports.List.Item = listItem_1.default;
 exports.default = exports.List;

package/list/list.types.d.ts

@@ -3,8 +3,8 @@ import { ThemingProps } from '../theme';
 export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
+    heading?: string;
     isInteractive?: boolean;
-    subheader?: string;
 }
 export interface ListStyleProps extends BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/listHeading.d.ts

@@ -0,0 +1,3 @@
+import { ListItemProps } from './listItem.types';
+export declare const ListHeading: import("../core").VuiComponent<"li", ListItemProps>;
+export default ListHeading;

package/list/listHeading.js

@@ -0,0 +1,30 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListHeading = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var listItem_1 = __importDefault(require("./listItem"));
+var core_1 = require("../core");
+exports.ListHeading = core_1.vui(function (props, ref) {
+    var _a;
+    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var styles = core_1.useStyleConfig('List', mergedProps);
+    return (react_1.default.createElement(listItem_1.default, __assign({ className: "vui-listHeading", color: "grey.80", fontSize: "sm", fontWeight: "medium", ref: ref, textTransform: "uppercase" }, styles.heading, props)));
+});
+exports.ListHeading.displayName = 'ListHeading';
+exports.default = exports.ListHeading;

package/list/listItem.js

@@ -42,7 +42,7 @@ exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardP
 exports.ListItem = core_1.vui(function (props, ref) {
     var listProps = context_1.useList();
     var mergedProps = __assign(__assign({}, listProps), props);
-    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);
+    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick", "text"]);
     var styles = core_1.useStyleConfig('List', mergedProps);
     var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
     var alignItems = (center || (column ? centerH : centerV)) && 'center';
@@ -66,8 +66,7 @@ exports.ListItem = core_1.vui(function (props, ref) {
         justifyContent: justifyContent
     });
     return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
-        iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }),
-        children,
+        iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }), children !== null && children !== void 0 ? children : text,
         iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));
 });
 exports.ListItem.displayName = 'ListItem';

package/list/listItem.types.d.ts

@@ -12,6 +12,7 @@ export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'>
     iconRight?: IconProp;
     isInteractive?: boolean;
     isSelected?: boolean;
+    text?: number | string;
 }
 export interface ListItemStyleProps extends BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/theme.js

@@ -16,7 +16,7 @@ var defaultProps = {
     size: 'md',
     variant: 'default'
 };
-var parts = ['container', 'icon', 'item'];
+var parts = ['container', 'heading', 'icon', 'item'];
 var sizes = {
     sm: {
         icon: {

package/p/p.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.PBase = styled_components_2.default.p.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.P = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = core_1.useStyleConfig('P', props);
     var aliasedProps = utils_1.filterUndefined({
         fontWeight: weight,
@@ -47,7 +47,7 @@ exports.P = core_1.vui(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/p/p.types.d.ts

@@ -4,6 +4,7 @@ export interface PProps extends PStyleProps, ThemingProps<'P'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface PStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -23,5 +23,8 @@
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.8"
   }
 }

package/spinner/consts.d.ts

@@ -1,4 +1,5 @@
-export declare const positionMapping: {
+import { Dict } from '../utils';
+export declare const spinnerPositionMapping: {
     bottom: {
         container: {
             flexDirection: string;
@@ -32,3 +33,4 @@ export declare const positionMapping: {
         };
     };
 };
+export declare const spinnerSpeedMapping: Dict<string>;

package/spinner/consts.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.positionMapping = void 0;
-exports.positionMapping = {
+exports.spinnerSpeedMapping = exports.spinnerPositionMapping = void 0;
+exports.spinnerPositionMapping = {
     bottom: {
         container: { flexDirection: 'column' },
         circle: { mb: 1 }
@@ -19,3 +19,8 @@ exports.positionMapping = {
         circle: { mt: 1 }
     }
 };
+exports.spinnerSpeedMapping = {
+    slow: '1s',
+    normal: '0.9s',
+    fast: '0.8s'
+};

package/spinner/spinner.js

@@ -39,12 +39,14 @@ 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.SpinnerCircle = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(circleGenerator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), circleGenerator, function (p) { return p.speed; });
 exports.Spinner = core_1.vui(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 _a;
+    var className = props.className, emptyColor = props.emptyColor, size = props.size, _b = props.speed, speedProp = _b === void 0 ? 'normal' : _b, text = props.text, _c = props.textPosition, textPosition = _c === void 0 ? 'bottom' : _c, 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 positionProps = consts_1.spinnerPositionMapping[textPosition];
+    var speed = (_a = consts_1.spinnerSpeedMapping[speedProp]) !== null && _a !== void 0 ? _a : speedProp;
     var circleProps = utils_1.filterUndefined({
         borderColor: emptyColor,
         borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
@@ -52,7 +54,7 @@ exports.Spinner = core_1.vui(function (props, ref) {
         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)),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", 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';

package/spinner/theme.d.ts

@@ -6,7 +6,6 @@ declare function variantDefault(props: Dict): {
     circle: {
         borderColor: string;
         borderTopColor: string;
-        borderRightColor: string;
     };
     text: {};
 };

package/spinner/theme.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
     var container = {
-        color: c + ".60"
+        color: c + ".50"
     };
     var circle = {
         borderColor: c + ".20",
-        borderTopColor: c + ".60",
-        borderRightColor: c + ".60"
+        borderTopColor: c + ".50"
     };
     var text = {};
     return { container: container, circle: circle, text: text };

package/t/t.js

@@ -39,7 +39,7 @@ var utils_1 = require("../utils");
 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.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 _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, children = _a.children, className = _a.className, decoration = _a.decoration, isFlex = _a.isFlex, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "isFlex", "text", "weight"]);
     var styles = core_1.useStyleConfig('T', props);
     var aliasedProps = utils_1.filterUndefined({
         alignItems: centerV ? 'center' : undefined,
@@ -49,7 +49,7 @@ exports.T = core_1.vui(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.T.displayName = 'T';
 exports.default = exports.T;

package/t/t.types.d.ts

@@ -6,6 +6,7 @@ export interface TProps extends TStyleProps, ThemingProps<'T'> {
     centerV?: boolean;
     decoration?: TypographyProps['textDecoration'];
     isFlex?: boolean;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface TStyleProps extends BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/theme/components.d.ts

@@ -143,7 +143,12 @@ declare const _default: {
                 borderWidth: number;
             };
             solid: (props: import("..").Dict<any>) => {
-                borderColor: string;
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
+            subtle: (props: import("..").Dict<any>) => {
                 hoverBg: string;
                 activeBg: string;
                 bg: string;
@@ -629,7 +634,6 @@ declare const _default: {
                 circle: {
                     borderColor: string;
                     borderTopColor: string;
-                    borderRightColor: string;
                 };
                 text: {};
             };

package/theme/defaultTheme.d.ts

@@ -294,7 +294,12 @@ declare const defaultTheme: {
                     borderWidth: number;
                 };
                 solid: (props: import("..").Dict<any>) => {
-                    borderColor: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+                subtle: (props: import("..").Dict<any>) => {
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
@@ -780,7 +785,6 @@ declare const defaultTheme: {
                     circle: {
                         borderColor: string;
                         borderTopColor: string;
-                        borderRightColor: string;
                     };
                     text: {};
                 };

package/theme/index.d.ts

@@ -1,3 +1,6 @@
 import defaultTheme from './defaultTheme';
+export { default as components } from './components';
+export { default as defaultTheme } from './defaultTheme';
+export { default as foundations } from './foundations';
 export * from './types';
 export default defaultTheme;

package/theme/index.js

@@ -13,6 +13,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.foundations = exports.defaultTheme = exports.components = void 0;
 var defaultTheme_1 = __importDefault(require("./defaultTheme"));
+var components_1 = require("./components");
+Object.defineProperty(exports, "components", { enumerable: true, get: function () { return __importDefault(components_1).default; } });
+var defaultTheme_2 = require("./defaultTheme");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return __importDefault(defaultTheme_2).default; } });
+var foundations_1 = require("./foundations");
+Object.defineProperty(exports, "foundations", { enumerable: true, get: function () { return __importDefault(foundations_1).default; } });
 __exportStar(require("./types"), exports);
 exports.default = defaultTheme_1.default;