feat(ui): add character counter to controlled Input and Textarea components

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>

src/components/ui/Input.module.css

@@ -61,3 +61,10 @@
   font-size: 0.8125rem;
   color: var(--md-sys-color-error);
 }
+
+.charCount {
+  font-size: 0.75rem;
+  color: var(--md-sys-color-outline);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

src/components/ui/Input.tsx

@@ -30,6 +30,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {error && <span id={errorId} className={styles.error}>{error}</span>}
+        {props.maxLength !== undefined && props.value !== undefined && (
+          <div className={styles.charCount} aria-hidden="true">
+            {String(props.value).length} / {props.maxLength}
+          </div>
+        )}
       </div>
     );
   }
@@ -66,6 +71,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && <span id={errorId} className={styles.error}>{error}</span>}
+        {props.maxLength !== undefined && props.value !== undefined && (
+          <div className={styles.charCount} aria-hidden="true">
+            {String(props.value).length} / {props.maxLength}
+          </div>
+        )}
       </div>
     );
   }