@veracity/vui 1.8.0-redesign.0 → 1.8.1

package/dist/esm/tag/theme.js

@@ -1,24 +1,69 @@
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        color: 'white',
+        focusRing: 3
+    };
+    const button = {
+        hoverBg: `${c}.70`,
+        activeBg: `${c}.60`,
+        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';
+        container.bg = 'yellow.70';
+        button.hoverBg = 'yellow.60';
+        button.activeBg = 'yellow.50';
+        button.bg = 'yellow.70';
+    }
+    return { container, button };
+}
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        bg: `${c}.20`,
+        color: `${c}.90`
+    };
+    const button = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        color: `${c}.90`
+    };
+    if (c === 'blue') {
+        container.color = 'blue.80';
+        button.color = 'blue.80';
+    }
+    if (c === 'grey') {
+        container.color = 'prussian.80';
+        button.color = 'prussian.80';
+    }
+    if (c === 'yellow') {
+        container.color = 'yellow.100';
+        button.color = 'yellow.100';
+    }
+    return { container, button };
+}
 const baseStyle = {};
 const defaultProps = {
+    colorScheme: 'blue',
     size: 'md',
-    variant: 'subtleBlue'
+    variant: 'subtle'
 };
 const parts = ['container', 'button', 'icon', 'text'];
 const sizes = {
-    xs: {
-        container: {
-            borderRadius: 'lg',
-            fontSize: 'sm',
-            h: 20,
-            spaceX: 4
-        },
-        button: {
-            size: 'sm'
-        },
-        icon: {
-            size: 'xs'
-        }
-    },
     sm: {
         container: {
             fontSize: 'sm',
@@ -26,7 +71,7 @@ const sizes = {
             spaceX: 4
         },
         button: {
-            size: 'sm'
+            size: 'xs'
         },
         icon: {
             size: 'xs'
@@ -39,7 +84,7 @@ const sizes = {
             spaceX: 6
         },
         button: {
-            size: 'sm'
+            size: 'xs'
         },
         icon: {
             size: 'sm'
@@ -52,7 +97,7 @@ const sizes = {
             spaceX: 8
         },
         button: {
-            size: 'md'
+            size: 'sm'
         },
         icon: {
             size: 'md'
@@ -60,170 +105,8 @@ const sizes = {
     }
 };
 const variants = {
-    subtleGrey: {
-        container: {
-            bg: 'sandstone.95',
-            hoverBg: 'sandstone.90',
-            borderColor: 'sandstone.90',
-            color: 'sandstone.20',
-            activeBg: 'sandstone.85'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sandstone.90',
-            hoverBorderColor: 'transparent',
-            color: 'sandstone.20',
-            activeBg: 'sandstone.85'
-        }
-    },
-    subtleBlue: {
-        container: {
-            bg: 'skyBlue.95',
-            hoverBg: 'skyBlue.90',
-            activeBg: 'skyBlue.85',
-            borderColor: 'skyBlue.95',
-            color: 'seaBlue.28'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'skyBlue.90',
-            activeBg: 'skyBlue.85',
-            hoverBorderColor: 'transparent',
-            color: 'seaBlue.28'
-        }
-    },
-    subtleRed: {
-        container: {
-            bg: 'energyRed.95',
-            borderColor: 'energyRed.95',
-            hoverBg: 'energyRed.90',
-            activeBg: 'energyRed.85',
-            color: 'energyRed.45'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'energyRed.90',
-            activeBg: 'energyRed.85',
-            hoverBorderColor: 'transparent',
-            color: 'energyRed.45'
-        }
-    },
-    subtleYellow: {
-        container: {
-            bg: 'sunflower.85',
-            hoverBg: 'sunflower.70',
-            activeBg: 'sunflower.65',
-            borderColor: 'terracotta.30',
-            color: 'sunflower.20'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sunflower.70',
-            activeBg: 'sunflower.65',
-            hoverBorderColor: 'transparent',
-            color: 'sunflower.20'
-        }
-    },
-    subtleGreen: {
-        container: {
-            bg: 'landGreen.95',
-            hoverBg: 'landGreen.90',
-            borderColor: 'landGreen.30',
-            color: 'landGreen.30',
-            activeBg: 'landGreen.85'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'landGreen.90',
-            activeBg: 'landGreen.85',
-            hoverBorderColor: 'transparent',
-            color: 'landGreen.30'
-        }
-    },
-    /** solids next */
-    solidBlue: {
-        container: {
-            bg: 'seaBlue.28',
-            hoverBg: 'seaBlue.35',
-            activeBg: 'seaBlue.40',
-            borderColor: 'seaBlue.28',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'seaBlue.35',
-            activeBg: 'seaBlue.40',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidDarkBlue: {
-        container: {
-            bg: 'darkBlue.18',
-            hoverBg: 'darkBlue.25',
-            activeBg: 'darkBlue.35',
-            borderColor: 'darkBlue.18',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'darkBlue.25',
-            activeBg: 'darkBlue.35',
-            hoverBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidRed: {
-        container: {
-            bg: 'energyRed.45',
-            hoverBg: 'energyRed.54',
-            activeBg: 'energyRed.60',
-            borderColor: 'energyRed.45',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'energyRed.54',
-            activeBg: 'energyRed.60',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidYellow: {
-        container: {
-            bg: 'sunflower.65',
-            hoverBg: 'sunflower.80',
-            activeBg: 'sunflower.85',
-            borderColor: 'sunflower.65',
-            color: 'sunflower.15'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sunflower.80',
-            activeBg: 'sunflower.85',
-            hoverBorderColor: 'transparent',
-            color: 'sunflower.15'
-        }
-    },
-    solidGreen: {
-        container: {
-            bg: 'landGreen.35',
-            hoverBg: 'landGreen.41',
-            activeBg: 'landGreen.45',
-            borderColor: 'landGreen.35',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'landGreen.41',
-            activeBg: 'landGreen.45',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    }
+    solid: variantSolid,
+    subtle: variantSubtle
 };
 export default {
     baseStyle,

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,10 +1,11 @@
-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: none;
+  border-radius: md;
   border-width: 1px;
   outline: none;
   padding: 1;
@@ -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;