@ttoss/forms 0.14.5 → 0.14.6

package/dist/esm/index.js

@@ -120,12 +120,21 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box4, Input, Label as Label3 } from "@ttoss/ui";
+import {
+  Box as Box4,
+  Icon,
+  Input,
+  Label as Label3,
+  Text as Text2
+} from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
+import React3 from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
+  tooltipIcon,
+  showCharacterCounter,
   ...inputProps
 }) => {
   const {
@@ -134,9 +143,45 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
+  const characterCounter = React3.useMemo(() => {
+    if (!value) {
+      return 0;
+    }
+    return String(value).length;
+  }, [value]);
   const id = `form-field-input-${name}`;
   return /* @__PURE__ */ jsxs3(Box4, { children: [
-    label && /* @__PURE__ */ jsx5(Label3, { "aria-disabled": inputProps.disabled, htmlFor: id, children: label }),
+    label && /* @__PURE__ */ jsxs3(
+      Label3,
+      {
+        sx: { display: "flex", alignItems: "center" },
+        "aria-disabled": inputProps.disabled,
+        htmlFor: id,
+        children: [
+          label,
+          tooltipIcon && /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              sx: { marginLeft: "md", fontSize: "xs", lineHeight: 0 },
+              variant: "tooltip-icon",
+              children: /* @__PURE__ */ jsx5(Icon, { icon: tooltipIcon })
+            }
+          ),
+          showCharacterCounter && /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              sx: {
+                marginLeft: "auto",
+                fontSize: "xs",
+                lineHeight: 0
+              },
+              variant: "character-counter",
+              children: characterCounter
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx5(
       Input,
       {

package/dist/index.d.ts

@@ -5,8 +5,7 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, CheckboxProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
-import * as iconify_icon from 'iconify-icon';
+import { BoxProps, CheckboxProps, IconType, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 import * as theme_ui from 'theme-ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -30,12 +29,14 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: react_hook_form.Path<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ label, name, ...inputProps }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ label, name, tooltipIcon, showCharacterCounter, ...inputProps }: {
     label?: string | undefined;
     name: TName;
+    tooltipIcon?: IconType | undefined;
+    showCharacterCounter?: boolean | undefined;
 } & theme_ui.InputProps & {
-    leadingIcon?: React.ReactNode | iconify_icon.IconifyIcon;
-    trailingIcon?: React.ReactNode | iconify_icon.IconifyIcon;
+    leadingIcon?: IconType | undefined;
+    trailingIcon?: IconType | undefined;
 }) => JSX.Element;
 
 type FormRadioOption$1 = {

package/dist/index.js

@@ -162,10 +162,13 @@ var FormFieldCheckbox = ({
 // src/FormFieldInput.tsx
 var import_ui5 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
+var import_react = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
+  tooltipIcon,
+  showCharacterCounter,
   ...inputProps
 }) => {
   const {
@@ -174,9 +177,45 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
+  const characterCounter = import_react.default.useMemo(() => {
+    if (!value) {
+      return 0;
+    }
+    return String(value).length;
+  }, [value]);
   const id = `form-field-input-${name}`;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, { "aria-disabled": inputProps.disabled, htmlFor: id, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_ui5.Label,
+      {
+        sx: { display: "flex", alignItems: "center" },
+        "aria-disabled": inputProps.disabled,
+        htmlFor: id,
+        children: [
+          label,
+          tooltipIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_ui5.Text,
+            {
+              sx: { marginLeft: "md", fontSize: "xs", lineHeight: 0 },
+              variant: "tooltip-icon",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Icon, { icon: tooltipIcon })
+            }
+          ),
+          showCharacterCounter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_ui5.Text,
+            {
+              sx: {
+                marginLeft: "auto",
+                fontSize: "xs",
+                lineHeight: 0
+              },
+              variant: "character-counter",
+              children: characterCounter
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_ui5.Input,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.28.2",
     "@ttoss/test-utils": "^1.20.4",
-    "@ttoss/ui": "^1.30.5",
+    "@ttoss/ui": "^1.30.6",
     "@types/jest": "^29.4.0",
     "jest": "^29.4.3",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9a1d05dc6546c74a3f83835e4dcef00bc7040b6b"
+  "gitHead": "0a6b947e6dc4386ff80861cbed8c119c6bd39f47"
 }

package/src/FormFieldInput.tsx

@@ -1,6 +1,15 @@
-import { Box, Input, type InputProps, Label } from '@ttoss/ui';
+import {
+  Box,
+  Icon,
+  type IconType,
+  Input,
+  type InputProps,
+  Label,
+  Text,
+} from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import React from 'react';
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -8,10 +17,14 @@ export const FormFieldInput = <
 >({
   label,
   name,
+  tooltipIcon,
+  showCharacterCounter,
   ...inputProps
 }: {
   label?: string;
   name: TName;
+  tooltipIcon?: IconType;
+  showCharacterCounter?: boolean;
 } & InputProps) => {
   const {
     field: { onChange, onBlur, value, ref },
@@ -20,15 +33,49 @@ export const FormFieldInput = <
     defaultValue: '',
   });
 
+  const characterCounter = React.useMemo(() => {
+    if (!value) {
+      return 0;
+    }
+
+    return String(value).length;
+  }, [value]);
+
   const id = `form-field-input-${name}`;
 
   return (
     <Box>
       {label && (
-        <Label aria-disabled={inputProps.disabled} htmlFor={id}>
+        <Label
+          sx={{ display: 'flex', alignItems: 'center' }}
+          aria-disabled={inputProps.disabled}
+          htmlFor={id}
+        >
           {label}
+          {tooltipIcon && (
+            <Text
+              sx={{ marginLeft: 'md', fontSize: 'xs', lineHeight: 0 }}
+              variant="tooltip-icon"
+            >
+              <Icon icon={tooltipIcon} />
+            </Text>
+          )}
+
+          {showCharacterCounter && (
+            <Text
+              sx={{
+                marginLeft: 'auto',
+                fontSize: 'xs',
+                lineHeight: 0,
+              }}
+              variant="character-counter"
+            >
+              {characterCounter}
+            </Text>
+          )}
         </Label>
       )}
+
       <Input
         ref={ref}
         onChange={onChange}
@@ -38,6 +85,7 @@ export const FormFieldInput = <
         id={id}
         {...inputProps}
       />
+
       <ErrorMessage name={name} />
     </Box>
   );