@veracity/vui 0.3.1 → 0.4.0

package/tag/tag.js

@@ -50,15 +50,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = exports.TagBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var tagButton_1 = __importDefault(require("./tagButton"));
 var tagIcon_1 = __importDefault(require("./tagIcon"));
 var tagText_1 = __importDefault(require("./tagText"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.TagBase = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\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&[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\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\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&[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"])), system_1.system);
+exports.TagBase = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-radius: md;\n\tdisplay: inline-flex;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\talign-items: center;\n\tborder-radius: md;\n\tdisplay: inline-flex;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
+    /**
+     * Displays text, icons or custom content. Can be made interactive or a link.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Displays text, icons or custom content. Can be made interactive or a link.
+ * Exposes some props to the children via context.
+ */
 exports.Tag = (0, core_1.vui)(function (props, ref) {
     var casing = props.casing, children = props.children, className = props.className, _a = props.colorScheme, colorScheme = _a === void 0 ? 'blue' : _a, disabled = props.disabled, icon = props.icon, iconLeft = props.iconLeft, iconRight = props.iconRight, isFullWidth = props.isFullWidth, _b = props.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = props.isRound, _c = props.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = props.itemLeft, itemRight = props.itemRight, onClick = props.onClick, onDelete = props.onDelete, _d = props.size, size = _d === void 0 ? 'md' : _d, text = props.text, _e = props.variant, variant = _e === void 0 ? 'subtle' : _e, weight = props.weight, rest = __rest(props, ["casing", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isFullWidth", "isInteractive", "isRound", "isTruncated", "itemLeft", "itemRight", "onClick", "onDelete", "size", "text", "variant", "weight"]);
     var styles = (0, core_1.useStyleConfig)('Tag', props);
@@ -80,13 +87,13 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
         : {};
     var aliasedProps = (0, utils_1.filterUndefined)({
         borderRadius: isRound ? h / 2 : undefined,
-        'data-disabled': disabled,
+        'aria-disabled': disabled,
         fontWeight: weight,
         textTransform: casing,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_1.TagProvider, { value: context },
-        react_1.default.createElement(exports.TagBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-tag', className), fontWeight: "medium", h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, tagStyles, interactiveProps, aliasedProps, rest),
+        react_1.default.createElement(exports.TagBase, __assign({ className: (0, utils_1.cs)('vui-tag', className), h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref }, tagStyles, interactiveProps, aliasedProps, rest),
             (0, utils_1.isString)(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
             !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                 itemLeft,

package/tag/tag.types.d.ts

@@ -2,20 +2,33 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface TagProps extends SystemProps, ThemingProps<'Tag'> {
+export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
+    /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+    /** Displays tag and its content in disabled state with appropriate styling. */
     disabled?: boolean;
-    icon?: IconProp | AnyElement;
-    iconLeft?: IconProp | AnyElement;
-    iconRight?: IconProp | AnyElement;
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element;
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element;
+    /** Makes the button take full width of the container. @deprecated */
     isFullWidth?: boolean;
+    /** Makes item clickable and focusable with appropriate styling. */
     isInteractive?: boolean;
+    /** Rounds the borders. @default false */
     isRound?: boolean;
+    /** Socket displaying a custom item on the left. */
     itemLeft?: React.ReactNode;
+    /** Socket displaying a custom item on right left. */
     itemRight?: React.ReactNode;
+    /** If provided, displays a remove button with this function as onClick. */
     onDelete?: () => void;
+    /** Socket displaying text as alternative to children. */
     text?: React.ReactNode;
+    /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
-}
+};

package/tag/tagButton.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '../button';
+/** Displays a button within the Tag. */
 export declare const TagButton: import("../core").VuiComponent<"button", ButtonProps>;
 export default TagButton;

package/tag/tagButton.js

@@ -10,32 +10,20 @@ var __assign = (this && this.__assign) || function () {
     };
     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.TagButton = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays a button within the Tag. */
 exports.TagButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var _b = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {}, disabled = _b.disabled, tagProps = __rest(_b, ["disabled"]);
-    var mergedProps = __assign(__assign({}, tagProps), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useTag)()), props);
     var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, props)));
+    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, props)));
 });
 exports.TagButton.displayName = 'TagButton';
 exports.default = exports.TagButton;

package/tag/tagIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon within the Tag. */
 export declare const TagIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default TagIcon;

package/tag/tagIcon.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
+/** Displays an icon within the Tag. */
 exports.TagIcon = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var tagProps = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, tagProps), props);
-    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-tagIcon", ref: ref }, styles.icon, props));
 });
 exports.TagIcon.displayName = 'TagIcon';

package/tag/tagText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays text within the Tag. */
 export declare const TagText: import("../core").VuiComponent<"span", TProps>;
 export default TagText;

package/tag/tagText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text within the Tag. */
 exports.TagText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var tagProps = (_a = (0, context_1.useTag)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, tagProps), props);
-    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.TagText.displayName = 'TagText';

package/tag/theme.d.ts

@@ -27,6 +27,7 @@ declare function variantSubtle(props: Dict): {
     };
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/tag/theme.js

@@ -14,6 +14,12 @@ function variantSolid(props) {
         bg: c + ".80",
         color: 'white'
     };
+    if (c === 'prussian') {
+        container.hoverBg = 'prussian.60';
+        container.activeBg = 'prussian.50';
+        button.hoverBg = 'prussian.60';
+        button.activeBg = 'prussian.50';
+    }
     if (c === 'yellow') {
         container.hoverBg = 'yellow.80';
         container.activeBg = 'yellow.90';
@@ -51,6 +57,7 @@ function variantSubtle(props) {
     }
     return { container: container, button: button };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -103,6 +110,7 @@ var variants = {
     subtle: variantSubtle
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/textarea/helpers.d.ts

@@ -1,2 +1,3 @@
 import { TextareaProps } from './textarea.types';
+/** Returns length of the initial textarea's value. */
 export declare function getInitialCount(props: TextareaProps): number;

package/textarea/helpers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInitialCount = void 0;
+/** Returns length of the initial textarea's value. */
 function getInitialCount(props) {
     var _a, _b;
     var defaultValue = props.defaultValue, value = props.value;

package/textarea/index.d.ts

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

package/textarea/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./textarea"), exports);
-__exportStar(require("./textarea.types"), exports);
 var textarea_1 = require("./textarea");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(textarea_1).default; } });
+__exportStar(require("./textarea.types"), exports);

package/textarea/textarea.d.ts

@@ -1,6 +1,8 @@
 import { TextareaProps } from './textarea.types';
-import { SystemProps } from '../system';
-export declare const TextareaTextarea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const TextareaBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const TextareaBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a textarea element wrapped in a div to allow extra content, like counter.
+ * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
+ */
 export declare const Textarea: import("../core").VuiComponent<"div", TextareaProps>;
 export default Textarea;

package/textarea/textarea.js

@@ -64,19 +64,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = exports.TextareaBase = exports.TextareaTextarea = void 0;
+exports.Textarea = exports.TextareaBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var helpers_1 = require("./helpers");
 var core_1 = require("../core");
-var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.TextareaTextarea = styled_components_1.default.textarea.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.TextareaBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"])), system_1.system);
+var helpers_1 = require("./helpers");
+var TextareaTextarea = core_1.styled.textareaBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"])));
+exports.TextareaBase = core_1.styled.divBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"
+    /**
+     * Displays a textarea element wrapped in a div to allow extra content, like counter.
+     * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
+     */
+])));
+/**
+ * Displays a textarea element wrapped in a div to allow extra content, like counter.
+ * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
+ */
 exports.Textarea = (0, core_1.vui)(function (props, ref) {
     var _a = __read((0, react_1.useState)((0, helpers_1.getInitialCount)(props)), 2), count = _a[0], setCount = _a[1];
-    var _b = (0, core_1.omitThemingProps)(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, id = _b.id, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
+    var _b = (0, core_1.omitThemingProps)(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, cols = _b.cols, defaultValue = _b.defaultValue, disabled = _b.disabled, id = _b.id, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, _c = _b.resize, resize = _c === void 0 ? 'none' : _c, rows = _b.rows, showCount = _b.showCount, _d = _b.textareaProps, textareaProps = _d === void 0 ? {} : _d, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
     var colorProps = (0, utils_1.filterUndefined)({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
@@ -86,13 +93,18 @@ exports.Textarea = (0, core_1.vui)(function (props, ref) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
     var aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled
+    });
+    var textareaAliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled,
         bg: readOnly ? 'grey.20' : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
-    return (react_1.default.createElement(exports.TextareaBase, __assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, rest),
-        react_1.default.createElement(exports.TextareaTextarea, __assign({ borderRadius: "md", className: "vui-textareaTextarea", p: 1, placeholderColor: "grey.60", ref: textareaRef, transitionDuration: "fast" }, {
+    return (react_1.default.createElement(exports.TextareaBase, __assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(TextareaTextarea, __assign({ className: "vui-textareaTextarea", ref: textareaRef }, {
             autoFocus: autoFocus,
+            cols: cols,
             defaultValue: defaultValue,
             disabled: disabled,
             id: id,
@@ -105,8 +117,9 @@ exports.Textarea = (0, core_1.vui)(function (props, ref) {
             readOnly: readOnly,
             required: required,
             resize: resize,
+            rows: rows,
             value: value
-        }, styles.textarea, aliasedProps, textareaProps)),
+        }, styles.textarea, textareaAliasedProps, textareaProps)),
         showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " / ",

package/textarea/textarea.types.d.ts

@@ -2,25 +2,45 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
-export interface TextareaProps extends SystemProps, ThemingProps<'Textarea'> {
+export declare type TextareaProps = SystemProps & ThemingProps<'Textarea'> & {
+    /** Passed to the inner input. */
     autoFocus?: boolean;
+    /** Children are disabled for this component. */
     children?: never;
+    /** Available theme colors for this component. @default grey */
     colorScheme?: 'green' | 'grey' | 'red';
+    /** Passed to the inner input. */
     cols?: number;
+    /** Passed to the inner input. */
     defaultValue?: number | string;
+    /** Passed to the inner input. */
     disabled?: boolean;
+    /** Styles the textarea in invalid state. */
     isInvalid?: boolean;
+    /** Passed to the inner input. */
     maxLength?: number;
+    /** Passed to the inner input. */
     name?: string;
+    /** Passed to the inner input. */
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Passed to the inner input. */
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /** Passed to the inner input. */
     onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Passed to the inner input. */
     placeholder?: string;
+    /** Passed to the inner input. */
     readOnly?: boolean;
+    /** Passed to the inner input. */
     required?: boolean;
+    /** Passed to the inner input. */
     rows?: number;
+    /** Displays length of textarea value if also using maxLength. */
     showCount?: boolean;
+    /** Props object passed to the inner textarea. */
     textareaProps?: PropsOf<'textarea', SystemProps>;
+    /** Ref passed to the inner textarea. */
     textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null> | null;
+    /** Passed to the inner input. */
     value?: number | string;
-}
+};

package/textarea/theme.d.ts

@@ -8,6 +8,7 @@ declare function variantDefault(props: Dict): {
     };
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         variant: string;

package/textarea/theme.js

@@ -14,6 +14,7 @@ function variantDefault(props) {
     }
     return { container: container, textarea: textarea };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'grey',
     variant: 'default'
@@ -24,6 +25,7 @@ var variants = {
     default: variantDefault
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,