@veracity/vui 0.0.15 → 0.2.0

package/{label → image}/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-__exportStar(require("./label"), exports);
-__exportStar(require("./label.types"), exports);
-var label_1 = require("./label");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(label_1).default; } });
+__exportStar(require("./image"), exports);
+__exportStar(require("./image.types"), exports);
+var image_1 = require("./image");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(image_1).default; } });

package/image/theme.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/image/theme.js

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

package/index.d.ts

@@ -1,18 +1,21 @@
-export * from './alert';
 export * from './avatar';
 export * from './box';
 export * from './button';
+export * from './buttonGroup';
+export * from './card';
 export * from './checkbox';
 export * from './core';
 export * from './divider';
 export * from './heading';
 export * from './icon';
 export * from './icons';
+export * from './image';
 export * from './input';
-export * from './label';
 export * from './link';
 export * from './list';
+export * from './notification';
 export * from './p';
+export * from './panel';
 export * from './radio';
 export * from './skeleton';
 export * from './spinner';
@@ -21,7 +24,7 @@ export * from './svg';
 export * from './switch';
 export * from './system';
 export * from './t';
+export * from './tag';
 export * from './textarea';
 export * from './theme';
-export * from './tile';
 export * from './utils';

package/index.js

@@ -10,21 +10,24 @@ 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);
+__exportStar(require("./buttonGroup"), exports);
+__exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
 __exportStar(require("./icons"), exports);
+__exportStar(require("./image"), exports);
 __exportStar(require("./input"), exports);
-__exportStar(require("./label"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
+__exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
+__exportStar(require("./panel"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./spinner"), exports);
@@ -33,7 +36,7 @@ __exportStar(require("./svg"), exports);
 __exportStar(require("./switch"), exports);
 __exportStar(require("./system"), exports);
 __exportStar(require("./t"), exports);
+__exportStar(require("./tag"), exports);
 __exportStar(require("./textarea"), exports);
 __exportStar(require("./theme"), exports);
-__exportStar(require("./tile"), exports);
 __exportStar(require("./utils"), exports);

package/input/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputProps } from './input.types';
+declare const InputProvider: import("react").Provider<Partial<InputProps>>, useInput: () => Partial<InputProps>;
+export { InputProvider, useInput };

package/{alert → input}/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAlert = exports.AlertProvider = void 0;
+exports.useInput = exports.InputProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), AlertProvider = _a[0], useAlert = _a[1];
-exports.AlertProvider = AlertProvider;
-exports.useAlert = useAlert;
+var _a = __read(core_1.createContext({ isOptional: true }), 2), InputProvider = _a[0], useInput = _a[1];
+exports.InputProvider = InputProvider;
+exports.useInput = useInput;

package/input/index.d.ts

@@ -1,3 +1,5 @@
 export * from './input';
 export * from './input.types';
+export * from './inputIcon';
+export * from './inputInput';
 export { default } from './input';

package/input/index.js

@@ -16,5 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./input"), exports);
 __exportStar(require("./input.types"), exports);
+__exportStar(require("./inputIcon"), exports);
+__exportStar(require("./inputInput"), exports);
 var input_1 = require("./input");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(input_1).default; } });

package/input/input.d.ts

@@ -1,6 +1,11 @@
 import { InputProps } from './input.types';
+import InputIcon from './inputIcon';
+import InputInput from './inputInput';
+import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
-export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const Input: import("../core").VuiComponent<"div", InputProps>;
+export declare const Input: VuiComponent<"div", InputProps> & {
+    Icon: typeof InputIcon;
+    Input: typeof InputInput;
+};
 export default Input;

package/input/input.js

@@ -64,45 +64,52 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputBase = exports.InputInput = void 0;
+exports.Input = exports.InputBase = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var consts_1 = require("./consts");
+var context_1 = require("./context");
 var helpers_1 = require("./helpers");
+var inputIcon_1 = __importDefault(require("./inputIcon"));
+var inputInput_1 = __importDefault(require("./inputInput"));
 var core_1 = require("../core");
-var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.InputInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\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\tmin-width: 0;\n\toutline: none;\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"])), system_1.system);
-exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\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\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\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"])), system_1.system);
+exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\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\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\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"])), system_1.system);
 exports.Input = core_1.vui(function (props, ref) {
-    var _a, _b;
-    var _c = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _c[0], setCount = _c[1];
-    var _d = core_1.omitThemingProps(props), autoComplete = _d.autoComplete, autoFocus = _d.autoFocus, className = _d.className, colorSchemeProp = _d.colorScheme, defaultValue = _d.defaultValue, disabled = _d.disabled, iconLeft = _d.iconLeft, iconRight = _d.iconRight, inputProps = _d.inputProps, inputRef = _d.inputRef, isInvalid = _d.isInvalid, itemLeft = _d.itemLeft, itemRight = _d.itemRight, max = _d.max, maxLength = _d.maxLength, min = _d.min, name = _d.name, onBlur = _d.onBlur, onChangeProp = _d.onChange, onFocus = _d.onFocus, pattern = _d.pattern, placeholder = _d.placeholder, readOnly = _d.readOnly, required = _d.required, showCount = _d.showCount, _e = _d.state, state = _e === void 0 ? '' : _e, stateMapping = _d.stateMapping, step = _d.step, _f = _d.type, type = _f === void 0 ? 'text' : _f, value = _d.value, rest = __rest(_d, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "state", "stateMapping", "step", "type", "value"]);
+    var _a, _b, _c, _d;
+    var _e = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _e[0], setCount = _e[1];
+    var autoComplete = props.autoComplete, autoFocus = props.autoFocus, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, iconLeft = props.iconLeft, iconRight = props.iconRight, id = props.id, input = props.input, inputProps = props.inputProps, inputRef = props.inputRef, isInvalid = props.isInvalid, itemLeft = props.itemLeft, itemRight = props.itemRight, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, onBlur = props.onBlur, onChangeProp = props.onChange, onFocus = props.onFocus, pattern = props.pattern, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, showCount = props.showCount, size = props.size, _f = props.state, state = _f === void 0 ? '' : _f, stateMapping = props.stateMapping, step = props.step, _g = props.type, type = _g === void 0 ? 'text' : _g, value = props.value, variant = props.variant, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
-    var _g = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, stateColorScheme = _g.colorScheme, stateIconProps = _g.iconProps;
-    var stateProps = utils_1.filterUndefined({
-        colorScheme: (_b = colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)) !== null && _b !== void 0 ? _b : stateColorScheme
+    var computedColorScheme = utils_1.filterUndefined({
+        colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? 'red' : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
     });
-    var _h = core_1.useStyleConfig('Input', __assign(__assign({}, stateProps), props)), fontSize = _h.fontSize, iconSize = _h.iconSize, styles = __rest(_h, ["fontSize", "iconSize"]);
+    var styles = core_1.useStyleConfig('Input', __assign(__assign({}, computedColorScheme), props));
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [
+        colorScheme,
+        disabled,
+        size,
+        variant
+    ]);
     function onChange(e) {
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
-    var iconColor = !disabled ? 'blue.80' : 'grey.50';
     var aliasedProps = utils_1.filterUndefined({
         bg: readOnly ? 'grey.20' : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
-    return (react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft, ml: 1, size: iconSize })),
-        react_1.default.createElement(exports.InputInput, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: inputRef }, {
+    return (react_1.default.createElement(context_1.InputProvider, { value: context },
+        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
+            itemLeft,
+            utils_1.isString(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
-            fontSize: fontSize,
+            id: id,
             max: max,
             maxLength: maxLength,
             min: min,
@@ -117,13 +124,17 @@ exports.Input = core_1.vui(function (props, ref) {
             step: step,
             type: type,
             value: value
-        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight, mr: 1, size: iconSize })),
-        state && react_1.default.createElement(icon_1.default, __assign({ mr: 1, size: iconSize }, stateIconProps)),
-        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
-            count,
-            " / ",
-            maxLength))));
+        }, inputProps))),
+            utils_1.isString(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
+            itemRight,
+            state && react_1.default.createElement(inputIcon_1.default, __assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
+            showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+                count,
+                " / ",
+                maxLength)))));
 });
 exports.Input.displayName = 'Input';
+exports.Input.Icon = inputIcon_1.default;
+exports.Input.Input = inputInput_1.default;
 exports.default = exports.Input;
-var templateObject_1, templateObject_2;
+var templateObject_1;

package/input/input.types.d.ts

@@ -3,15 +3,19 @@ import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../core';
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { AnyElement } from '../utils';
+export interface InputInputProps extends PropsOf<'input', SystemProps> {
+}
 export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
     defaultValue?: number | string;
     disabled?: boolean;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
-    inputProps?: PropsOf<'input', SystemProps>;
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
+    input?: React.ReactNode;
+    inputProps?: InputInputProps;
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
     isInvalid?: boolean;
     itemLeft?: React.ReactNode;

package/input/inputIcon.d.ts

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

package/input/inputIcon.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.InputIcon = 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.InputIcon = core_1.vui(function (props, ref) {
+    var inputProps = context_1.useInput();
+    var mergedProps = __assign(__assign({}, inputProps), props);
+    var styles = core_1.useStyleConfig('Input', mergedProps);
+    var color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
+    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-inputIcon", color: color, ref: ref }, styles.icon, props));
+});
+exports.InputIcon.displayName = 'InputIcon';
+exports.default = exports.InputIcon;

package/input/inputInput.d.ts

@@ -0,0 +1,5 @@
+import { InputInputProps } from './input.types';
+import { SystemProps } from '../system';
+export declare const InputInputBase: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const InputInput: import("../core").VuiComponent<"input", InputInputProps>;
+export default InputInput;

package/input/inputInput.js

@@ -0,0 +1,36 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputInput = exports.InputInputBase = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var system_1 = require("../system");
+exports.InputInputBase = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\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\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\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"])), system_1.system);
+exports.InputInput = core_1.vui(function (props, ref) {
+    var inputProps = context_1.useInput();
+    var mergedProps = __assign(__assign({}, inputProps), props);
+    var styles = core_1.useStyleConfig('Input', mergedProps);
+    return (react_1.default.createElement(exports.InputInputBase, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: ref }, styles.input, props)));
+});
+exports.InputInput.displayName = 'InputInput';
+exports.default = exports.InputInput;
+var templateObject_1;

package/input/theme.d.ts

@@ -1,8 +1,12 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
-    borderColor: string;
-    focusWithinRing: number;
-    focusWithinRingColor: string;
+    container: {
+        borderColor: string;
+        focusWithinRing: number;
+        focusWithinRingColor: string;
+    };
+    icon: {};
+    input: {};
 };
 declare const _default: {
     defaultProps: {
@@ -10,26 +14,47 @@ declare const _default: {
         size: string;
         variant: string;
     };
+    parts: string[];
     sizes: {
         xs: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
+            container: {
+                fontSize: string;
+                h: number;
+            };
+            icon: {
+                size: string;
+            };
+            input: {};
         };
         sm: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
+            container: {
+                fontSize: string;
+                h: number;
+            };
+            icon: {
+                size: string;
+            };
+            input: {};
         };
         md: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
+            container: {
+                fontSize: string;
+                h: number;
+            };
+            icon: {
+                size: string;
+            };
+            input: {};
         };
         lg: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
+            container: {
+                fontSize: string;
+                h: number;
+            };
+            icon: {
+                size: string;
+            };
+            input: {};
         };
     };
     variants: {

package/input/theme.js

@@ -2,42 +2,65 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var styles = {
+    var container = {
         borderColor: c + ".80",
         focusWithinRing: 2,
         focusWithinRingColor: c + ".80"
     };
     if (c === 'grey') {
-        styles.borderColor = c + ".60";
-        styles.focusWithinRingColor = 'blue.50';
+        container.borderColor = c + ".60";
+        container.focusWithinRingColor = 'blue.50';
     }
-    return styles;
+    var icon = {};
+    var input = {};
+    return { container: container, icon: icon, input: input };
 }
 var defaultProps = {
     colorScheme: 'grey',
     size: 'md',
     variant: 'default'
 };
+var parts = ['container', 'icon', 'input'];
 var sizes = {
     xs: {
-        fontSize: 'sm',
-        h: 24,
-        iconSize: 'xs'
+        container: {
+            fontSize: 'sm',
+            h: 24
+        },
+        icon: {
+            size: 'xs'
+        },
+        input: {}
     },
     sm: {
-        fontSize: 'sm',
-        h: 32,
-        iconSize: 'sm'
+        container: {
+            fontSize: 'sm',
+            h: 32
+        },
+        icon: {
+            size: 'sm'
+        },
+        input: {}
     },
     md: {
-        fontSize: 'md',
-        h: 40,
-        iconSize: 'md'
+        container: {
+            fontSize: 'md',
+            h: 40
+        },
+        icon: {
+            size: 'md'
+        },
+        input: {}
     },
     lg: {
-        fontSize: 'lg',
-        h: 48,
-        iconSize: 'md'
+        container: {
+            fontSize: 'lg',
+            h: 48
+        },
+        icon: {
+            size: 'md'
+        },
+        input: {}
     }
 };
 var variants = {
@@ -45,6 +68,7 @@ var variants = {
 };
 exports.default = {
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/list/index.d.ts

@@ -1,6 +1,8 @@
 export * from './context';
 export * from './list';
 export * from './list.types';
+export * from './listHeading';
+export * from './listIcon';
 export * from './listItem';
-export * from './listItem.types';
+export * from './listText';
 export { default } from './list';

package/list/index.js

@@ -17,7 +17,9 @@ exports.default = void 0;
 __exportStar(require("./context"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./list.types"), exports);
+__exportStar(require("./listHeading"), exports);
+__exportStar(require("./listIcon"), exports);
 __exportStar(require("./listItem"), exports);
-__exportStar(require("./listItem.types"), exports);
+__exportStar(require("./listText"), exports);
 var list_1 = require("./list");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(list_1).default; } });

package/list/list.d.ts

@@ -2,6 +2,7 @@ import { ListProps } from './list.types';
 import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
+import ListText from './listText';
 import { VuiComponent } from '../core';
 import { SystemProps } from '../system';
 export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, SystemProps, never>;
@@ -9,5 +10,6 @@ export declare const List: VuiComponent<"ul", ListProps> & {
     Heading: typeof ListHeading;
     Icon: typeof ListIcon;
     Item: typeof ListItem;
+    Text: typeof ListText;
 };
 export default List;

package/list/list.js

@@ -55,6 +55,7 @@ var context_1 = require("./context");
 var listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
+var listText_1 = __importDefault(require("./listText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
@@ -70,12 +71,13 @@ 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),
-            heading && react_1.default.createElement(listHeading_1.default, null, heading),
+            utils_1.isReactText(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : 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.List.Text = listText_1.default;
 exports.default = exports.List;
 var templateObject_1;

package/list/list.types.d.ts

@@ -1,8 +1,26 @@
+/// <reference types="react" />
+import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { AnyElement } from '../utils';
 export interface ListProps extends SystemProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
-    heading?: string;
+    heading?: React.ReactNode;
     isInteractive?: boolean;
 }
+export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
+    colorScheme?: 'blue' | 'grey';
+    column?: boolean;
+    disabled?: boolean;
+    iconLeft?: IconProp | AnyElement;
+    iconRight?: IconProp | AnyElement;
+    isInteractive?: boolean;
+    isSelected?: boolean;
+    itemLeft?: React.ReactNode;
+    itemRight?: React.ReactNode;
+    text?: React.ReactNode;
+}

package/list/listHeading.d.ts

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