@veracity/vui 0.0.15 → 0.1.0

package/icon/icon.js

@@ -32,9 +32,10 @@ var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
 exports.Icon = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "rotate", "scale"]);
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
     var styles = core_1.useStyleConfig('Icon', props);
-    var _b = helpers_1.getIconDetails(icon), customIcon = _b.customIcon, src = _b.src;
+    var _c = helpers_1.getIconDetails(name), customIcon = _c.customIcon, src = _c.src;
     var scaledSize = scale ? 16 * scale : undefined;
     var aliasedProps = utils_1.filterUndefined({
         h: scaledSize,

package/icon/icon.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PropsOf } from '../core';
-import { IconDefinition, VuiIcon } from '../icons';
+import { VuiIcon } from '../icons';
 import Svg, { SvgProps } from '../svg';
 import { ThemingProps } from '../theme';
 import { AnyString } from '../utils';
@@ -12,9 +12,11 @@ export interface GetIconDetailsResult {
     };
     src?: string;
 }
-export declare type IconProp = VuiIcon | IconDefinition | AnyString;
+export declare type IconProp = VuiIcon | AnyString;
 export interface IconProps extends SvgProps, ThemingProps<'Icon'> {
+    /** @deprecated use 'name' instead */
     icon?: IconProp;
+    name?: IconProp;
     rotate?: number;
     scale?: number;
 }

package/icons/library.js

@@ -32,7 +32,7 @@ var Library = /** @class */ (function () {
                 icons[_i] = arguments[_i];
             }
             icons.forEach(function (icon) {
-                icon.name && _this.cache.set(icon.name, icon);
+                _this.cache.set(icon.name, icon);
             });
         };
         this.get = function (name) {

package/icons/types.d.ts

@@ -4,7 +4,7 @@ import { PropsOf } from '../core';
 import Svg from '../svg';
 export interface IconDefinition {
     details: IconDetails;
-    name?: string;
+    name: string;
     pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
     svgProps?: PropsOf<typeof Svg>;
 }

package/image/image.d.ts

@@ -0,0 +1,3 @@
+import { ImageProps } from './image.types';
+export declare const Image: import("../core").VuiComponent<"img", ImageProps>;
+export default Image;

package/image/image.js

@@ -0,0 +1,38 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.Image = core_1.vui(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = core_1.useStyleConfig('Image', props);
+    return react_1.default.createElement(core_1.v.img, __assign({ className: utils_1.cs('vui-image', className), ref: ref }, styles, rest));
+});
+exports.Image.displayName = 'Image';
+exports.default = exports.Image;

package/image/image.types.d.ts

@@ -0,0 +1,4 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ImageProps extends SystemProps, ThemingProps<'Image'> {
+}

package/image/index.d.ts

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

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

@@ -2,17 +2,20 @@ 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 './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

@@ -14,17 +14,20 @@ __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("./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/input/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInput = exports.InputProvider = void 0;
+var core_1 = require("../core");
+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,51 @@ 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, 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", "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,
             max: max,
             maxLength: maxLength,
             min: min,
@@ -117,13 +123,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: {