@hexure/ui 1.11.9 → 1.11.11

package/dist/cjs/index.js

@@ -764,10 +764,11 @@ const Wrapper$c = styled.label `
   margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
+  background: ${props => (props.$invalid ? `rgba(${Colors.RED.Rgb}, 0.05)` : 'transparent')};
 
   &:focus-within {
     background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
@@ -776,7 +777,7 @@ const Wrapper$c = styled.label `
 Wrapper$c.defaultProps = { theme: EditableTheme };
 const Input$2 = styled.input `
   font-size: 20px;
-  margin: 5px 0px 0px 0px;
+  margin: 0px;
   line-height: 1.1em;
   box-sizing: border-box;
 `;
@@ -790,8 +791,8 @@ const Label$3 = styled.span `
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, disabled, checked, onChange } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    return (React.createElement(Wrapper$c, Object.assign({}, accessibleProps),
+    var { children, disabled, checked, onChange, invalid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "invalid"]);
+    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled, "$invalid": invalid }, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
         children ? React.createElement(Label$3, null, children) : null));
 };
@@ -1470,8 +1471,11 @@ const StyledInput = styled.input `
   line-height: 1.28em;
   color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
   position: relative;
-  height: auto;
-  padding: 10px;
+  height: ${props => props.$height || 'auto'};
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: ${({ $showCharCount }) => ($showCharCount ? '60px' : '10px')};
   opacity: ${props => (props.$readOnly ? 0.6 : 1)};
   box-shadow: none;
   outline: none;
@@ -1515,34 +1519,6 @@ const StyledWrapper = styled.div `
   }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const StyledTextarea = styled.textarea `
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  border-radius: 4px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.6em;
-  color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
-  position: relative;
-  height: ${props => props.$height || '40px'};
-  padding: 10px;
-  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || '100%'};
-  &:focus {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
-`;
-StyledTextarea.defaultProps = { theme: EditableTheme };
 const SuggestedValues = styled.div `
   background: #fff;
   box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
@@ -1587,8 +1563,16 @@ const SuggestedValue = styled.div `
   }
 `;
 SuggestedValue.defaultProps = { theme: EditableTheme };
+const CharacterCount = styled.div `
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.SMALL};
+  color: ${Colors.MEDIUM_GRAY.Hex};
+`;
 const Input$1 = (_a) => {
-    var { format, suffix, height, invalid, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, onSuggestedSelect, placeholder, readOnly, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "step", "style", "suggestedValues", "type", "value"]);
+    var { format, suffix, height, invalid, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, onSuggestedSelect, placeholder, readOnly, showCharCount, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
     const [show_options, setShowOptions] = React.useState(false);
     const handleInputChange = (e) => {
         if (format === 'currency' || format === 'currency_decimal') {
@@ -1609,10 +1593,6 @@ const Input$1 = (_a) => {
         if (!readOnly && onChange)
             onChange(e);
     };
-    const handleTextareaChange = (e) => {
-        if (!readOnly && onChange)
-            onChange(e);
-    };
     let formatted_value = value;
     if (format === 'phone') {
         formatted_value = formatAsPhone(value);
@@ -1628,8 +1608,8 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(value);
     }
-    return type === 'textarea' ? (React.createElement(StyledTextarea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: readOnly ? undefined : onBlur, onChange: readOnly ? undefined : handleTextareaChange, onFocus: readOnly ? undefined : onFocus, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
-        React.createElement(StyledInput, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
+    return (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
+        React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showCharCount": showCharCount, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? undefined
                 : e => {
                     if (onBlur)
@@ -1646,6 +1626,9 @@ const Input$1 = (_a) => {
                     if (onFocus)
                         onFocus(e);
                 }, onKeyDown: readOnly ? undefined : onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
+        showCharCount ? (React.createElement(CharacterCount, null,
+            value.length,
+            maxLength ? ` / ${maxLength}` : null)) : null,
         suffix && React.createElement(StyledSuffix, null, suffix),
         show_options && (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
             React.createElement(SuggestedSummary, null,
@@ -2045,8 +2028,9 @@ const Wrapper$2 = styled.label `
   display: flex;
   align-items: center;
   font-size: ${FontSizes.DEFAULT};
-  line-height: 1.6rm;
+  line-height: 1.6em;
   box-sizing: border-box;
+  background: ${props => (props.$invalid ? `rgba(${Colors.RED.Rgb}, 0.05)` : 'transparent')};
 
   &:focus-within {
     background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
@@ -2055,8 +2039,9 @@ const Wrapper$2 = styled.label `
 Wrapper$2.defaultProps = { theme: EditableTheme };
 const Input = styled.input `
   font-size: 20px;
-  margin: 0px 0px 2px 0px;
-  line-height: 1.1em;
+  margin: 0px;
+  line-height: 1.6em;
+  box-sizing: border-box;
 `;
 const Label = styled.span `
   font-family: ${FontStyles.DEFAULT};
@@ -2067,8 +2052,8 @@ const Label = styled.span `
   margin-left: 6px;
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
-    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled }, accessibleProps),
+    var { children, disabled, checked, onChange, value, invalid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid"]);
+    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled, "$invalid": invalid }, accessibleProps),
         React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
         React.createElement(Label, null, children)));
 };