@veracity/vui 0.0.3 → 0.0.5

package/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./alert"), exports);
 __exportStar(require("./avatar"), exports);
 __exportStar(require("./box"), exports);
 __exportStar(require("./button"), exports);
@@ -25,6 +26,7 @@ __exportStar(require("./list"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
+__exportStar(require("./spinner"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./switch"), exports);

package/input/consts.d.ts

@@ -1,3 +1,4 @@
+import { InputStateMapping } from './input.types';
 export declare const inputLengths: {
     fluid: string;
     xs: number;
@@ -6,21 +7,4 @@ export declare const inputLengths: {
     lg: number;
     xl: number;
 };
-export declare const inputStates: {
-    default: {
-        colorScheme: string;
-        iconRight: string;
-    };
-    error: {
-        colorScheme: string;
-        iconRight: string;
-    };
-    loading: {
-        colorScheme: string;
-        iconRight: string;
-    };
-    success: {
-        colorScheme: string;
-        iconRight: string;
-    };
-};
+export declare const inputStateMapping: InputStateMapping;

package/input/consts.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputStates = exports.inputLengths = void 0;
+exports.inputStateMapping = exports.inputLengths = void 0;
 exports.inputLengths = {
     fluid: 'none',
     xs: 104,
@@ -9,7 +9,7 @@ exports.inputLengths = {
     lg: 320,
     xl: 480
 };
-exports.inputStates = {
+exports.inputStateMapping = {
     default: {
         colorScheme: 'grey',
         iconRight: ''

package/input/input.d.ts

@@ -1,7 +1,7 @@
 import { InputInputStyleProps, InputProps, InputStyleProps } from './input.types';
-export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps, never>;
-export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & InputStyleProps, never>;
-export declare const Input: import("styled-components").StyledComponent<"div", never, InputProps, never>;
+export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps & {
+    color?: any;
+}, never>;
+export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputStyleProps, never>;
+export declare const Input: import("../core").VuiComponent<"div", InputProps>;
 export default Input;

package/input/input.js

@@ -39,14 +39,14 @@ var icon_1 = __importDefault(require("../icon"));
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.InputInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
-exports.InputBase = styled_components_2.default.div.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
+exports.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
 exports.Input = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, iconLeft = _a.iconLeft, iconRightProp = _a.iconRight, _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, inputRef = _a.inputRef, itemLeft = _a.itemLeft, itemRight = _a.itemRight, _c = _a.length, length = _c === void 0 ? 'fluid' : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, readOnly = _a.readOnly, required = _a.required, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, value = _a.value, rest = __rest(_a, ["autoComplete", "autoFocus", "className", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "type", "value"]);
-    var _f = core_1.useStyleConfig('Input', __assign({ colorScheme: consts_1.inputStates[state].colorScheme }, props)), borderColor = _f.borderColor, focusWithinRingColor = _f.focusWithinRingColor, fontSize = _f.fontSize, iconColorProp = _f.iconColor, iconSize = _f.iconSize, styles = __rest(_f, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor", "iconSize"]);
+    var _a;
+    var _b = core_1.omitThemingProps(props), autoComplete = _b.autoComplete, autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, iconLeft = _b.iconLeft, iconRightProp = _b.iconRight, _c = _b.inputProps, inputProps = _c === void 0 ? {} : _c, inputRef = _b.inputRef, itemLeft = _b.itemLeft, itemRight = _b.itemRight, _d = _b.length, length = _d === void 0 ? 'fluid' : _d, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, _e = _b.state, state = _e === void 0 ? 'default' : _e, stateMapping = _b.stateMapping, _f = _b.type, type = _f === void 0 ? 'text' : _f, value = _b.value, rest = __rest(_b, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "stateMapping", "type", "value"]);
+    var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
+    var _g = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, _h = _g.colorScheme, colorScheme = _h === void 0 ? colorSchemeProp : _h, _j = _g.iconRight, iconRight = _j === void 0 ? iconRightProp : _j;
+    var _k = core_1.useStyleConfig('Input', __assign({ colorScheme: colorScheme }, props)), borderColor = _k.borderColor, focusWithinRingColor = _k.focusWithinRingColor, fontSize = _k.fontSize, iconColorProp = _k.iconColor, iconSize = _k.iconSize, styles = __rest(_k, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor", "iconSize"]);
     var iconColor = !disabled ? iconColorProp : 'grey.50';
-    var iconRight = iconRightProp !== null && iconRightProp !== void 0 ? iconRightProp : consts_1.inputStates[state].iconRight;
     var aliasedProps = utils_1.filterUndefined({
         bg: readOnly ? 'grey.20' : undefined,
         maxW: consts_1.inputLengths[length]

package/input/input.types.d.ts

@@ -1,15 +1,15 @@
-import { HTMLAttributes } from 'react';
-import { inputLengths, inputStates } from './consts';
+/// <reference types="react" />
+import { inputLengths } from './consts';
+import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface InputInputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'color'>, InputInputStyleProps {
-    color?: string;
+export interface InputInputProps extends InputInputStyleProps {
 }
 export interface InputInputStyleProps extends ColorProps, FontSizeProps {
 }
 export declare type InputLength = keyof typeof inputLengths;
-export interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, InputStyleProps, ThemingProps<'Input'> {
+export interface InputProps extends InputStyleProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
@@ -22,14 +22,21 @@ export interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
     itemRight?: React.ReactNode;
     length?: InputLength;
     name?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
     placeholder?: string;
     readOnly?: boolean;
     required?: boolean;
     state?: InputState;
+    stateMapping?: InputStateMapping;
     type?: string;
     value?: number | string;
 }
-export declare type InputState = keyof typeof inputStates;
+export declare type InputState = 'default' | 'error' | 'loading' | 'success';
+export declare type InputStateMapping = Record<string, {
+    colorScheme?: InputProps['colorScheme'];
+    iconRight: InputProps['iconRight'];
+}>;
 export interface InputStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, SizingProps, SpaceProps, TransitionsProps {
 }

package/label/label.d.ts

@@ -1,6 +1,6 @@
 import { LabelProps, LabelStyleProps } from './label.types';
-export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & LabelStyleProps, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", never, LabelProps, never>;
+export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, LabelStyleProps & {
+    color?: any;
+}, never>;
+export declare const Label: import("../core").VuiComponent<"span", LabelProps>;
 export default Label;

package/label/label.js

@@ -39,9 +39,7 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var Text = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
-exports.LabelBase = styled_components_2.default.span.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
+exports.LabelBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
 exports.Label = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isLoading = _a.isLoading, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isLoading", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
     var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);

package/label/label.types.d.ts

@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react';
+/// <reference types="react" />
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LabelProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, LabelStyleProps, ThemingProps<'Label'> {
+export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
     casing?: TypographyProps['textTransform'];
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     icon?: IconProp;

package/link/link.d.ts

@@ -1,6 +1,6 @@
 import { LinkProps, LinkStyleProps } from './link.types';
-export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & LinkStyleProps, never>;
-export declare const Link: import("styled-components").StyledComponent<"a", never, LinkProps, never>;
+export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, LinkStyleProps & {
+    color?: any;
+}, never>;
+export declare const Link: import("../core").VuiComponent<"a", LinkProps>;
 export default Link;

package/link/link.js

@@ -37,9 +37,7 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition: all 0s ease-in-out;\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\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t", "\n"])), generator);
+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.forwardRef(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 styles = core_1.useStyleConfig('Link', props);

package/link/link.types.d.ts

@@ -1,13 +1,11 @@
-import { HTMLAttributes } from 'react';
-import { BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TextDecorationProps, TransitionsProps, TypographyProps } from '../system';
-import { FontWeight, ThemingProps, VuiTheme } from '../theme';
-import { AnyString } from '../utils';
-export interface LinkProps extends Omit<HTMLAttributes<HTMLAnchorElement>, 'color'>, LinkStyleProps, ThemingProps<'Link'> {
+import { BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
     colorScheme?: 'blue' | 'prussian';
-    decoration?: TextDecorationProps['textDecoration'];
-    hoverDecoration?: TextDecorationProps['textDecoration'];
+    decoration?: TypographyProps['textDecoration'];
+    hoverDecoration?: TypographyProps['textDecoration'];
     isExternal?: boolean;
-    weight?: FontWeight | AnyString | number;
+    weight?: TypographyProps['fontWeight'];
 }
-export interface LinkStyleProps extends BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps<VuiTheme> {
+export interface LinkStyleProps extends BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/list.d.ts

@@ -1,6 +1,10 @@
 import { ListProps, ListStyleProps } from './list.types';
-export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & ListStyleProps, never>;
-export declare const List: import("styled-components").StyledComponent<"ul", never, ListProps, never>;
+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<"div", ListProps> & {
+    Icon: typeof ListIcon;
+    Item: typeof ListItem;
+};
 export default List;

package/list/list.js

@@ -53,13 +53,12 @@ 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 listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
-exports.ListBase = styled_components_2.default.ul.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+var generator = styled_components_1.compose(styled_components_1.flexboxes, 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.forwardRef(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 styles = core_1.useStyleConfig('List', props);
@@ -69,12 +68,13 @@ exports.List = core_1.forwardRef(function (props, ref) {
         size,
         variant
     ]);
-    var listStyleType = props.as === 'ol' ? 'decimal' : 'disc';
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
-        react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), listStyleType: listStyleType, ref: ref }, styles.list, rest),
+        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)),
             children)));
 });
 exports.List.displayName = 'List';
+exports.List.Icon = listIcon_1.default;
+exports.List.Item = listItem_1.default;
 exports.default = exports.List;
 var templateObject_1;

package/list/list.types.d.ts

@@ -1,11 +1,10 @@
-import { HTMLAttributes } from 'react';
-import { SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'color'>, ListStyleProps, ThemingProps<'List'> {
+export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
     isInteractive?: boolean;
     subheader?: string;
 }
-export interface ListStyleProps extends SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface ListStyleProps extends FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/list/listIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../icon';
+export declare const ListIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default ListIcon;

package/list/listIcon.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.ListIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+exports.ListIcon = core_1.forwardRef(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(icon_1.default, __assign({ ref: ref }, styles.icon, props));
+});
+exports.ListIcon.displayName = 'ListIcon';
+exports.default = exports.ListIcon;

package/list/listItem.d.ts

@@ -1,6 +1,4 @@
 import { ListItemProps, ListItemStyleProps } from './listItem.types';
-export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & ListItemStyleProps, never>;
-export declare const ListItem: import("styled-components").StyledComponent<"li", never, ListItemProps, never>;
+export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, ListItemStyleProps, never>;
+export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;
 export default ListItem;

package/list/listItem.js

@@ -34,34 +34,41 @@ var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
+var listIcon_1 = __importDefault(require("./listIcon"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.ListItemBase = styled_components_2.default.li.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tline-height: 1.1;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
+exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
 exports.ListItem = core_1.forwardRef(function (props, ref) {
     var listProps = context_1.useList();
     var mergedProps = __assign(__assign({}, listProps), props);
-    var className = mergedProps.className, disabled = mergedProps.disabled, _a = mergedProps.isInteractive, isInteractive = _a === void 0 ? props.onClick !== undefined : _a, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["className", "disabled", "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, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);
     var styles = core_1.useStyleConfig('List', mergedProps);
-    var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, hoverColor = _b.hoverColor, itemStyles = __rest(_b, ["activeBg", "hoverBg", "hoverColor"]);
+    var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
+    var alignItems = (center || (column ? centerH : centerV)) && 'center';
+    var flexDirection = column && 'column';
+    var justifyContent = (center || (column ? centerV : centerH)) && 'center';
     var interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
-            focusVisibleRing: 3,
+            focusVisibleRing: 2,
             hoverBg: hoverBg,
             activeBg: activeBg,
-            hoverColor: hoverColor,
             tabIndex: 0,
             userSelect: 'none'
         }
         : {};
     var aliasedProps = utils_1.filterUndefined({
+        alignItems: alignItems,
         bg: isSelected ? hoverBg : undefined,
-        color: isSelected ? hoverColor : undefined
+        'data-disabled': disabled,
+        flexDirection: flexDirection,
+        justifyContent: justifyContent
     });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className, disabled && 'disabled'), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest)));
+    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,
+        iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));
 });
 exports.ListItem.displayName = 'ListItem';
 exports.default = exports.ListItem;

package/list/listItem.types.d.ts

@@ -1,9 +1,15 @@
-import { HTMLAttributes } from 'react';
+import { IconProp } from '../icon';
 import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'color'>, ListItemStyleProps, ThemingProps<'List'> {
+export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'> {
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
     colorScheme?: 'blue' | 'grey';
+    column?: boolean;
     disabled?: boolean;
+    iconLeft?: IconProp;
+    iconRight?: IconProp;
     isInteractive?: boolean;
     isSelected?: boolean;
 }

package/list/theme.d.ts

@@ -1,5 +1,7 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
+    container: {};
+    icon: {};
     item: Dict<any>;
 };
 declare const _default: {
@@ -11,18 +13,36 @@ declare const _default: {
     parts: string[];
     sizes: {
         sm: {
+            icon: {
+                size: string;
+            };
             item: {
                 fontSize: string;
                 h: number;
             };
         };
         md: {
+            icon: {
+                size: string;
+            };
             item: {
                 fontSize: string;
                 h: number;
             };
         };
         lg: {
+            icon: {
+                size: string;
+            };
+            item: {
+                fontSize: string;
+                h: number;
+            };
+        };
+        xl: {
+            icon: {
+                scale: number;
+            };
             item: {
                 fontSize: string;
                 h: number;
@@ -31,14 +51,29 @@ declare const _default: {
     };
     variants: {
         default: typeof variantDefault;
-        unstyled: {
+        ordered: {
+            container: {
+                as: string;
+                listStyleType: string;
+                pl: number;
+            };
             item: {
                 display: string;
                 h: undefined;
+                lineHeight: number;
             };
-            list: {
+        };
+        unordered: {
+            container: {
+                as: string;
+                listStyleType: string;
                 pl: number;
             };
+            item: {
+                display: string;
+                h: undefined;
+                lineHeight: number;
+            };
         };
     };
 };

package/list/theme.js

@@ -2,54 +2,83 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var itemStyles = {
+    var item = {
         activeBg: c + ".30",
         borderRadius: 'md',
         hoverBg: c + ".20"
     };
-    // Special cases
-    if (c === 'blue') {
-        itemStyles.hoverColor = 'blue.80';
-    }
-    return {
-        item: itemStyles
-    };
+    var container = {};
+    var icon = {};
+    return { container: container, icon: icon, item: item };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
-var parts = ['list', 'item'];
+var parts = ['container', 'icon', 'item'];
 var sizes = {
     sm: {
+        icon: {
+            size: 'sm'
+        },
         item: {
-            fontSize: 'sm',
+            fontSize: 'md',
             h: 32
         }
     },
     md: {
+        icon: {
+            size: 'md'
+        },
         item: {
             fontSize: 'md',
             h: 40
         }
     },
     lg: {
+        icon: {
+            size: 'lg'
+        },
         item: {
             fontSize: 'md',
             h: 48
         }
+    },
+    xl: {
+        icon: {
+            scale: 2
+        },
+        item: {
+            fontSize: 'lg',
+            h: 56
+        }
     }
 };
 var variants = {
     default: variantDefault,
-    unstyled: {
+    ordered: {
+        container: {
+            as: 'ol',
+            listStyleType: 'decimal',
+            pl: 3
+        },
         item: {
             display: 'list-item',
-            h: undefined
-        },
-        list: {
+            h: undefined,
+            lineHeight: 1.5
+        }
+    },
+    unordered: {
+        container: {
+            as: 'ul',
+            listStyleType: 'disc',
             pl: 3
+        },
+        item: {
+            display: 'list-item',
+            h: undefined,
+            lineHeight: 1.5
         }
     }
 };

package/p/p.d.ts

@@ -1,6 +1,6 @@
 import { PProps, PStyleProps } from './p.types';
-export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & PStyleProps, never>;
-export declare const P: import("styled-components").StyledComponent<"p", never, PProps, never>;
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, PStyleProps & {
+    color?: any;
+}, never>;
+export declare const P: import("../core").VuiComponent<"p", PProps>;
 export default P;

package/p/p.js

@@ -37,9 +37,7 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
+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.forwardRef(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 styles = core_1.useStyleConfig('P', props);