@veracity/vui 1.8.0 → 1.8.1

package/dist/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwHV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -73,15 +73,17 @@ exports.InputBase = core_1.styled.divBox `
  */
 exports.Input = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c, _d;
-    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant } = props, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
+    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
     const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
     const computedColorScheme = (0, 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
+        colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? consts_1.redColor : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
     });
     const styles = (0, core_1.useStyleConfig)('Input', Object.assign(Object.assign({}, computedColorScheme), props));
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
@@ -91,6 +93,11 @@ exports.Input = (0, core_1.vui)((props, ref) => {
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setValueInternal(value);
+        setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
+    }, [value]);
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
         react_1.default.createElement(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
             itemLeft,
@@ -112,16 +119,15 @@ exports.Input = (0, core_1.vui)((props, ref) => {
             readOnly,
             required,
             step,
-            type,
-            value
-        }, inputProps))),
+            type
+        }, { value: valueInternal }, inputProps))),
             (0, 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, Object.assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
-            showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
-                " / ",
-                maxLength))),
+                " ",
+                maxLength ? `/ ${maxLength}` : null))),
         !!helpText && react_1.default.createElement(helpText_1.default, null, helpText),
         !!errorText && react_1.default.createElement(helpText_1.default, { isError: true }, errorText)));
 });

package/dist/cjs/textarea/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const greyLightColor = "grey.10";
+export declare const greyColor = "grey.80";
+export declare const redColor = "red.80";
+//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/textarea/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/textarea/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAY,CAAA;AACvC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,eAAO,MAAM,QAAQ,WAAW,CAAA"}

package/dist/cjs/textarea/consts.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redColor = exports.greyColor = exports.greyLightColor = void 0;
+exports.greyLightColor = 'grey.10';
+exports.greyColor = 'grey.80';
+exports.redColor = 'red.80';

package/dist/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/textarea/textarea.js

@@ -42,6 +42,7 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const helpers_1 = require("./helpers");
 const TextareaTextarea = core_1.styled.textareaBox `
   border-radius: md;
@@ -75,13 +76,15 @@ exports.TextareaBase = core_1.styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 exports.Textarea = (0, core_1.vui)((props, ref) => {
-    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const _a = (0, core_1.omitThemingProps)(props), { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, isInvalid, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
+    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
     const colorProps = (0, utils_1.filterUndefined)({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
     const styles = (0, core_1.useStyleConfig)('Textarea', Object.assign(Object.assign({}, colorProps), props));
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
@@ -90,10 +93,15 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
     });
     const textareaAliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled,
-        bg: readOnly ? 'grey.20' : undefined,
+        bg: readOnly ? consts_1.greyLightColor : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setValueInternal(value);
+        setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
+    }, [value]);
     return (react_1.default.createElement(exports.TextareaBase, Object.assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(TextareaTextarea, Object.assign({ className: "vui-textareaTextarea", ref: textareaRef }, {
             autoFocus,
@@ -110,12 +118,11 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
             readOnly,
             required,
             resize,
-            rows,
-            value
-        }, styles.textarea, textareaAliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            rows
+        }, { value: valueInternal }, styles.textarea, textareaAliasedProps, textareaProps)),
+        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
-            " / ",
-            maxLength))));
+            " ",
+            maxLength ? `/ ${maxLength}` : null))));
 });
 exports.default = exports.Textarea;

package/dist/cjs/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AAyB/B,wBAAkC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AA8B/B,wBAAkC"}

package/dist/cjs/toast/toast.js

@@ -10,8 +10,11 @@ const core_1 = require("../core");
 const theme_1 = require("../theme");
 exports.toasterWidth = 420;
 const Toaster = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const { toasts } = (0, core_1.useVuiContext)();
-    return (react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' }, minW: { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, (_b = (_a = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (toast) => (react_1.default.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+    const padding = ((_a = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _a === void 0 ? void 0 : _a.length) ? { md: '16px', sm: '4px', xs: '2px' } : 0;
+    const right = { md: '1rem', sm: 0, xs: 0 };
+    const width = { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' };
+    return (react_1.default.createElement(box_1.Box, { bottom: "1rem", className: "vui-toaster", display: "block", maxW: width, minW: width, p: padding, position: "fixed", right: right, zIndex: theme_1.zIndices.toast }, (_c = (_b = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (toast) => (react_1.default.createElement(core_1.v.div, { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
 };
 exports.default = react_1.default.memo(Toaster);

package/dist/esm/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwHV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/esm/input/input.js

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { T } from '../t';
 import { cs, filterUndefined, isString } from '../utils';
-import { greyColor, greyLightColor, inputStateMapping } from './consts';
+import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts';
 import { InputProvider } from './context';
 import { getInitialCount } from './helpers';
 import HelpText from './helpText';
@@ -32,15 +32,17 @@ export const InputBase = styled.divBox `
  * Exposes some props to the children via context.
  */
 export const Input = vui((props, ref) => {
-    const [count, setCount] = useState(getInitialCount(props));
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
+    const [count, setCount] = useState(getInitialCount(props));
+    const [valueInternal, setValueInternal] = useState(defaultValue);
     const states = { ...inputStateMapping, ...stateMapping };
     const computedColorScheme = filterUndefined({
-        colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
+        colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
     });
     const styles = useStyleConfig('Input', { ...computedColorScheme, ...props });
     const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp?.(e);
     }
@@ -50,6 +52,10 @@ export const Input = vui((props, ref) => {
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
+    useEffect(() => {
+        setValueInternal(value);
+        setCount(`${value}`?.length ? `${value}`.length : 0);
+    }, [value]);
     return (React.createElement(InputProvider, { value: context },
         React.createElement(InputBase, { className: cs('vui-input', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
             itemLeft,
@@ -72,16 +78,15 @@ export const Input = vui((props, ref) => {
                     readOnly,
                     required,
                     step,
-                    type,
-                    value
-                }, ...inputProps })),
+                    type
+                }, value: valueInternal, ...inputProps })),
             isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),
-            showCount && (React.createElement(T, { className: "vui-inputCount", color: greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            showCount && (React.createElement(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
-                " / ",
-                maxLength))),
+                " ",
+                maxLength ? `/ ${maxLength}` : null))),
         !!helpText && React.createElement(HelpText, null, helpText),
         !!errorText && React.createElement(HelpText, { isError: true }, errorText)));
 });

package/dist/esm/textarea/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const greyLightColor = "grey.10";
+export declare const greyColor = "grey.80";
+export declare const redColor = "red.80";
+//# sourceMappingURL=consts.d.ts.map

package/dist/esm/textarea/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/textarea/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAY,CAAA;AACvC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,eAAO,MAAM,QAAQ,WAAW,CAAA"}

package/dist/esm/textarea/consts.js

@@ -0,0 +1,3 @@
+export const greyLightColor = 'grey.10';
+export const greyColor = 'grey.80';
+export const redColor = 'red.80';

package/dist/esm/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/textarea/textarea.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
 import T from '../t';
 import { cs, filterUndefined } from '../utils';
+import { greyColor, greyLightColor, redColor } from './consts';
 import { getInitialCount } from './helpers';
 const TextareaTextarea = styled.textareaBox `
   border-radius: md;
@@ -35,13 +36,15 @@ export const TextareaBase = styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 export const Textarea = vui((props, ref) => {
-    const [count, setCount] = useState(getInitialCount(props));
     const { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, isInvalid, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value, ...rest } = omitThemingProps(props);
+    const [count, setCount] = useState(getInitialCount(props));
+    const [valueInternal, setValueInternal] = useState(defaultValue);
     const colorProps = filterUndefined({
         colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
     });
     const styles = useStyleConfig('Textarea', { ...colorProps, ...props });
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp?.(e);
     }
@@ -50,10 +53,14 @@ export const Textarea = vui((props, ref) => {
     });
     const textareaAliasedProps = filterUndefined({
         'aria-disabled': disabled,
-        bg: readOnly ? 'grey.20' : undefined,
+        bg: readOnly ? greyLightColor : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
+    useEffect(() => {
+        setValueInternal(value);
+        setCount(`${value}`?.length ? `${value}`.length : 0);
+    }, [value]);
     return (React.createElement(TextareaBase, { className: cs('vui-textarea', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
         React.createElement(TextareaTextarea, { className: "vui-textareaTextarea", ref: textareaRef, ...{
                 autoFocus,
@@ -70,12 +77,11 @@ export const Textarea = vui((props, ref) => {
                 readOnly,
                 required,
                 resize,
-                rows,
-                value
-            }, ...styles.textarea, ...textareaAliasedProps, ...textareaProps }),
-        showCount && (React.createElement(T, { className: "vui-textareaCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+                rows
+            }, value: valueInternal, ...styles.textarea, ...textareaAliasedProps, ...textareaProps }),
+        showCount && (React.createElement(T, { className: "vui-textareaCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
-            " / ",
-            maxLength))));
+            " ",
+            maxLength ? `/ ${maxLength}` : null))));
 });
 export default Textarea;

package/dist/esm/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AAyB/B,wBAAkC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AA8B/B,wBAAkC"}

package/dist/esm/toast/toast.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Box } from '../box';
-import { useVuiContext } from '../core';
+import { useVuiContext, v } from '../core';
 import { zIndices } from '../theme';
 export const toasterWidth = 420;
 const Toaster = () => {
     const { toasts } = useVuiContext();
-    return (React.createElement(Box, { bottom: "1rem", display: "block", maxW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, minW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+    const padding = toasts?.list?.length ? { md: '16px', sm: '4px', xs: '2px' } : 0;
+    const right = { md: '1rem', sm: 0, xs: 0 };
+    const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' };
+    return (React.createElement(Box, { bottom: "1rem", className: "vui-toaster", display: "block", maxW: width, minW: width, p: padding, position: "fixed", right: right, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement(v.div, { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
 };
 export default React.memo(Toaster);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/input/input.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
-import { greyColor, greyLightColor, inputStateMapping } from './consts'
+import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -36,7 +36,6 @@ export const InputBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const Input = vui<'div', InputProps>((props, ref) => {
-  const [count, setCount] = useState(getInitialCount(props))
   const {
     autoComplete,
     autoFocus,
@@ -78,9 +77,11 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     ...rest
   } = props
 
+  const [count, setCount] = useState(getInitialCount(props))
+  const [valueInternal, setValueInternal] = useState(defaultValue)
   const states = { ...inputStateMapping, ...stateMapping }
   const computedColorScheme = filterUndefined({
-    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
+    colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
   })
 
   const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
@@ -91,6 +92,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   )
 
   function onChange(e: ChangeEvent) {
+    setValueInternal(e.target.value)
     setCount(e.target.value.length)
     onChangeProp?.(e)
   }
@@ -102,6 +104,11 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })
 
+  useEffect(() => {
+    setValueInternal(value)
+    setCount(`${value}`?.length ? `${value}`.length : 0)
+  }, [value])
+
   return (
     <InputProvider value={context}>
       <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
@@ -128,9 +135,9 @@ export const Input = vui<'div', InputProps>((props, ref) => {
               readOnly,
               required,
               step,
-              type,
-              value
+              type
             }}
+            value={valueInternal}
             {...inputProps}
           />
         )}
@@ -140,13 +147,13 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         {showCount && (
           <T
             className="vui-inputCount"
-            color={greyColor}
+            color={maxLength && count > maxLength ? redColor : greyColor}
             position="absolute"
             right={0}
             size="sm"
             top="calc(100% + 1px)"
           >
-            {count} / {maxLength}
+            {count} {maxLength ? `/ ${maxLength}` : null}
           </T>
         )}
       </InputBase>

package/src/textarea/consts.ts

@@ -0,0 +1,3 @@
+export const greyLightColor = 'grey.10'
+export const greyColor = 'grey.80'
+export const redColor = 'red.80'

package/src/textarea/textarea.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
+import { greyColor, greyLightColor, redColor } from './consts'
 import { getInitialCount } from './helpers'
 import { TextareaProps } from './textarea.types'
 
@@ -40,7 +41,6 @@ export const TextareaBase = styled.divBox`
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 export const Textarea = vui<'div', TextareaProps>((props, ref) => {
-  const [count, setCount] = useState(getInitialCount(props))
   const {
     autoFocus,
     className,
@@ -66,12 +66,17 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
     value,
     ...rest
   } = omitThemingProps(props)
+
+  const [count, setCount] = useState(getInitialCount(props))
+  const [valueInternal, setValueInternal] = useState(defaultValue)
+
   const colorProps = filterUndefined({
     colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
   })
   const styles = useStyleConfig('Textarea', { ...colorProps, ...props })
 
   function onChange(e: ChangeEvent<HTMLTextAreaElement>) {
+    setValueInternal(e.target.value)
     setCount(e.target.value.length)
     onChangeProp?.(e)
   }
@@ -82,11 +87,16 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 
   const textareaAliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? 'grey.20' : undefined,
+    bg: readOnly ? greyLightColor : undefined,
     focusBorderColor: !readOnly ? 'transparent' : undefined,
     focusRing: readOnly ? 0 : undefined
   })
 
+  useEffect(() => {
+    setValueInternal(value)
+    setCount(`${value}`?.length ? `${value}`.length : 0)
+  }, [value])
+
   return (
     <TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
       <TextareaTextarea
@@ -107,17 +117,24 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
           readOnly,
           required,
           resize,
-          rows,
-          value
+          rows
         }}
+        value={valueInternal}
         {...styles.textarea}
         {...textareaAliasedProps}
         {...textareaProps}
       />
 
       {showCount && (
-        <T className="vui-textareaCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
-          {count} / {maxLength}
+        <T
+          className="vui-textareaCount"
+          color={maxLength && count > maxLength ? redColor : greyColor}
+          position="absolute"
+          right={0}
+          size="sm"
+          top="calc(100% + 1px)"
+        >
+          {count} {maxLength ? `/ ${maxLength}` : null}
         </T>
       )}
     </TextareaBase>

package/src/toast/toast.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Box } from '../box'
-import { useVuiContext } from '../core'
+import { useVuiContext, v } from '../core'
 import { zIndices } from '../theme'
 import { ToastListItem } from './toast.types'
 
@@ -10,21 +10,26 @@ export const toasterWidth = 420
 const Toaster = () => {
   const { toasts } = useVuiContext()
 
+  const padding = toasts?.list?.length ? { md: '16px', sm: '4px', xs: '2px' } : 0
+  const right = { md: '1rem', sm: 0, xs: 0 }
+  const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' }
+
   return (
     <Box
       bottom="1rem"
+      className="vui-toaster"
       display="block"
-      maxW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
-      minW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
-      p={{ md: '16px', sm: '4px', xs: '2px' }}
+      maxW={width}
+      minW={width}
+      p={padding}
       position="fixed"
-      right={{ md: '1rem', sm: 0, xs: 0 }}
+      right={right}
       zIndex={zIndices.toast}
     >
       {toasts?.list?.map?.((toast: ToastListItem) => (
-        <div id={`toast_${toast.id}`} key={toast.id}>
+        <v.div id={`toast_${toast.id}`} key={toast.id}>
           {toast.component}
-        </div>
+        </v.div>
       ))}
     </Box>
   )