@lets-events/react 11.7.5 → 11.7.7

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@11.7.5 build
+> @lets-events/react@11.7.7 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 319.89 KB
-ESM ⚡️ Build success in 375ms
-CJS dist/index.js 332.01 KB
-CJS ⚡️ Build success in 375ms
+ESM dist/index.mjs 321.38 KB
+ESM ⚡️ Build success in 276ms
+CJS dist/index.js 333.60 KB
+CJS ⚡️ Build success in 277ms
 DTS Build start
-DTS ⚡️ Build success in 6308ms
-DTS dist/index.d.mts 374.48 KB
-DTS dist/index.d.ts  374.48 KB
+DTS ⚡️ Build success in 4801ms
+DTS dist/index.d.mts 374.51 KB
+DTS dist/index.d.ts  374.51 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.7.7
+
+### Patch Changes
+
+- BirthdateForm Validation
+
+## 11.7.6
+
+### Patch Changes
+
+- maxLength to TextField
+
 ## 11.7.5
 
 ### Patch Changes

package/dist/index.d.mts

@@ -2685,6 +2685,7 @@ type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     children?: React__default.ReactNode;
     isValid?: boolean;
     name?: string;
+    maxLength?: number;
     typography?: string;
     fontWeight?: "regular" | "medium" | "semibold" | "bold";
     textAlign?: "left" | "right" | "center";

package/dist/index.d.ts

@@ -2685,6 +2685,7 @@ type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     children?: React__default.ReactNode;
     isValid?: boolean;
     name?: string;
+    maxLength?: number;
     typography?: string;
     fontWeight?: "regular" | "medium" | "semibold" | "bold";
     textAlign?: "left" | "right" | "center";

package/dist/index.js

@@ -2812,6 +2812,22 @@ var InputAddon = styled(TextStyle, {
     }
   }
 });
+var TextFieldLimitIndicator = styled("div", {
+  width: "fit-content",
+  display: "flex",
+  justifyContent: "flex-end",
+  position: "absolute",
+  top: "0.5rem",
+  right: "1rem",
+  span: {
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+    fontSize: "$labelSmall",
+    backgroundColor: "$neutral200",
+    fontFamily: "$default"
+  }
+});
 var maskFormat = import_mask.format;
 var maskUnformat = import_mask.unformat;
 var TextField = import_react2.default.forwardRef(
@@ -2825,7 +2841,8 @@ var TextField = import_react2.default.forwardRef(
       fontWeight,
       addon,
       textAlign = "left",
-      mask
+      mask,
+      maxLength
     } = _b, props = __objRest(_b, [
       "children",
       "isValid",
@@ -2835,47 +2852,70 @@ var TextField = import_react2.default.forwardRef(
       "fontWeight",
       "addon",
       "textAlign",
-      "mask"
+      "mask",
+      "maxLength"
     ]);
     const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
-      !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { color, typography: "labelSmall", children: addon }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        TextFieldStyled,
-        __spreadProps(__spreadValues({
-          color,
-          isValid: isValid2,
-          name,
-          typography,
-          fontWeight,
-          textAlign,
-          ref: (r) => {
-            if (!r) return;
-            if (maskRef) maskRef.current = r;
-            if (fowardedRef) {
-              if (typeof fowardedRef === "function") fowardedRef(r);
-              else fowardedRef.current = r;
-            }
-          }
-        }, props), {
-          style: addon ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" } : void 0,
-          children: [
-            children,
-            isValid2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              TextFieldSlot,
-              {
-                position: "flex-end",
-                name,
-                color,
-                typography,
-                fontWeight,
-                textAlign,
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "check" })
+    const inputRef = import_react2.default.useRef(null);
+    const badgeRef = import_react2.default.useRef(null);
+    const updateCharCountBadge = () => {
+      var _a2, _b2;
+      if (!maxLength || !badgeRef.current) return;
+      const currentLength = (_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0;
+      badgeRef.current.textContent = String(maxLength - currentLength);
+    };
+    const handleInput = (e) => {
+      var _a2;
+      updateCharCountBadge();
+      (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { direction: "column", css: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%", position: "relative" }, children: [
+        !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { color, typography: "labelSmall", children: addon }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          TextFieldStyled,
+          __spreadProps(__spreadValues({
+            color,
+            isValid: isValid2,
+            name,
+            typography,
+            fontWeight,
+            textAlign,
+            maxLength,
+            ref: (r) => {
+              if (!r) return;
+              inputRef.current = r;
+              if (maskRef) maskRef.current = r;
+              if (fowardedRef) {
+                if (typeof fowardedRef === "function") fowardedRef(r);
+                else fowardedRef.current = r;
               }
-            )
-          ]
-        })
-      )
+            },
+            onInput: handleInput
+          }, props), {
+            style: addon ? {
+              borderTopLeftRadius: "0px",
+              borderBottomLeftRadius: "0px"
+            } : void 0,
+            children: [
+              children,
+              isValid2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                TextFieldSlot,
+                {
+                  position: "flex-end",
+                  name,
+                  color,
+                  typography,
+                  fontWeight,
+                  textAlign,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "check" })
+                }
+              )
+            ]
+          })
+        )
+      ] }),
+      maxLength && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextFieldLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref: badgeRef, children: maxLength }) })
     ] });
   }
 );
@@ -10160,16 +10200,18 @@ var isValidDate = (day, month, year) => {
   return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
 };
 var isValidBirthDate = (value, language) => {
-  const [part1, part2, part3] = value.split("/").map(Number);
-  let day = 0, month = 0, year = 0;
+  if (!/^\d{8}$/.test(value)) return false;
+  let day = 0;
+  let month = 0;
+  let year = 0;
   if (language === "en") {
-    month = part1;
-    day = part2;
-    year = part3;
+    month = Number(value.slice(0, 2));
+    day = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   } else {
-    day = part1;
-    month = part2;
-    year = part3;
+    day = Number(value.slice(0, 2));
+    month = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   }
   if (!isValidDate(day, month, year)) return false;
   const today = /* @__PURE__ */ new Date();
@@ -10188,7 +10230,7 @@ var BirthDateFormField = ({
   validationErrorMessage,
   language
 }) => {
-  const inputPlaceholder = placeholder || (language === "en" ? "MM/DD/YYYY" : "DD/MM/AAAA");
+  const inputPlaceholder = placeholder || (language === "pt-BR" ? "DD/MM/AAAA" : "MM/DD/YYYY");
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     TextFormField,
     {

package/dist/index.mjs

@@ -2705,6 +2705,22 @@ var InputAddon = styled(TextStyle, {
     }
   }
 });
+var TextFieldLimitIndicator = styled("div", {
+  width: "fit-content",
+  display: "flex",
+  justifyContent: "flex-end",
+  position: "absolute",
+  top: "0.5rem",
+  right: "1rem",
+  span: {
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+    fontSize: "$labelSmall",
+    backgroundColor: "$neutral200",
+    fontFamily: "$default"
+  }
+});
 var maskFormat = format;
 var maskUnformat = unformat;
 var TextField = React.forwardRef(
@@ -2718,7 +2734,8 @@ var TextField = React.forwardRef(
       fontWeight,
       addon,
       textAlign = "left",
-      mask
+      mask,
+      maxLength
     } = _b, props = __objRest(_b, [
       "children",
       "isValid",
@@ -2728,47 +2745,70 @@ var TextField = React.forwardRef(
       "fontWeight",
       "addon",
       "textAlign",
-      "mask"
+      "mask",
+      "maxLength"
     ]);
     const maskRef = mask ? useMask(mask) : void 0;
-    return /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
-      !!addon && /* @__PURE__ */ jsx7(InputAddon, { color, typography: "labelSmall", children: addon }),
-      /* @__PURE__ */ jsxs(
-        TextFieldStyled,
-        __spreadProps(__spreadValues({
-          color,
-          isValid: isValid2,
-          name,
-          typography,
-          fontWeight,
-          textAlign,
-          ref: (r) => {
-            if (!r) return;
-            if (maskRef) maskRef.current = r;
-            if (fowardedRef) {
-              if (typeof fowardedRef === "function") fowardedRef(r);
-              else fowardedRef.current = r;
-            }
-          }
-        }, props), {
-          style: addon ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" } : void 0,
-          children: [
-            children,
-            isValid2 && /* @__PURE__ */ jsx7(
-              TextFieldSlot,
-              {
-                position: "flex-end",
-                name,
-                color,
-                typography,
-                fontWeight,
-                textAlign,
-                children: /* @__PURE__ */ jsx7(Icon_default, { name: "check" })
+    const inputRef = React.useRef(null);
+    const badgeRef = React.useRef(null);
+    const updateCharCountBadge = () => {
+      var _a2, _b2;
+      if (!maxLength || !badgeRef.current) return;
+      const currentLength = (_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0;
+      badgeRef.current.textContent = String(maxLength - currentLength);
+    };
+    const handleInput = (e) => {
+      var _a2;
+      updateCharCountBadge();
+      (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
+    };
+    return /* @__PURE__ */ jsxs(Flex2, { direction: "column", css: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%", position: "relative" }, children: [
+        !!addon && /* @__PURE__ */ jsx7(InputAddon, { color, typography: "labelSmall", children: addon }),
+        /* @__PURE__ */ jsxs(
+          TextFieldStyled,
+          __spreadProps(__spreadValues({
+            color,
+            isValid: isValid2,
+            name,
+            typography,
+            fontWeight,
+            textAlign,
+            maxLength,
+            ref: (r) => {
+              if (!r) return;
+              inputRef.current = r;
+              if (maskRef) maskRef.current = r;
+              if (fowardedRef) {
+                if (typeof fowardedRef === "function") fowardedRef(r);
+                else fowardedRef.current = r;
               }
-            )
-          ]
-        })
-      )
+            },
+            onInput: handleInput
+          }, props), {
+            style: addon ? {
+              borderTopLeftRadius: "0px",
+              borderBottomLeftRadius: "0px"
+            } : void 0,
+            children: [
+              children,
+              isValid2 && /* @__PURE__ */ jsx7(
+                TextFieldSlot,
+                {
+                  position: "flex-end",
+                  name,
+                  color,
+                  typography,
+                  fontWeight,
+                  textAlign,
+                  children: /* @__PURE__ */ jsx7(Icon_default, { name: "check" })
+                }
+              )
+            ]
+          })
+        )
+      ] }),
+      maxLength && /* @__PURE__ */ jsx7(TextFieldLimitIndicator, { children: /* @__PURE__ */ jsx7("span", { ref: badgeRef, children: maxLength }) })
     ] });
   }
 );
@@ -10066,16 +10106,18 @@ var isValidDate = (day, month, year) => {
   return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
 };
 var isValidBirthDate = (value, language) => {
-  const [part1, part2, part3] = value.split("/").map(Number);
-  let day = 0, month = 0, year = 0;
+  if (!/^\d{8}$/.test(value)) return false;
+  let day = 0;
+  let month = 0;
+  let year = 0;
   if (language === "en") {
-    month = part1;
-    day = part2;
-    year = part3;
+    month = Number(value.slice(0, 2));
+    day = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   } else {
-    day = part1;
-    month = part2;
-    year = part3;
+    day = Number(value.slice(0, 2));
+    month = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   }
   if (!isValidDate(day, month, year)) return false;
   const today = /* @__PURE__ */ new Date();
@@ -10094,7 +10136,7 @@ var BirthDateFormField = ({
   validationErrorMessage,
   language
 }) => {
-  const inputPlaceholder = placeholder || (language === "en" ? "MM/DD/YYYY" : "DD/MM/AAAA");
+  const inputPlaceholder = placeholder || (language === "pt-BR" ? "DD/MM/AAAA" : "MM/DD/YYYY");
   return /* @__PURE__ */ jsx39(
     TextFormField,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.7.5",
+  "version": "11.7.7",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/FormFields/BirthDateFormField.tsx

@@ -19,21 +19,20 @@ const isValidDate = (day: number, month: number, year: number): boolean => {
     date.getDate() === day
   );
 };
-
 const isValidBirthDate = (value: string, language: Language): boolean => {
-  const [part1, part2, part3] = value.split("/").map(Number);
-  let day = 0,
-    month = 0,
-    year = 0;
+  if (!/^\d{8}$/.test(value)) return false;
 
+  let day = 0;
+  let month = 0;
+  let year = 0;
   if (language === "en") {
-    month = part1;
-    day = part2;
-    year = part3;
+    month = Number(value.slice(0, 2));
+    day = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   } else {
-    day = part1;
-    month = part2;
-    year = part3;
+    day = Number(value.slice(0, 2));
+    month = Number(value.slice(2, 4));
+    year = Number(value.slice(4));
   }
 
   if (!isValidDate(day, month, year)) return false;
@@ -63,7 +62,7 @@ export const BirthDateFormField = ({
   language,
 }: BirthDateFormFieldProps) => {
   const inputPlaceholder =
-    placeholder || (language === "en" ? "MM/DD/YYYY" : "DD/MM/AAAA");
+    placeholder || (language === "pt-BR" ? "DD/MM/AAAA" : "MM/DD/YYYY");
 
   return (
     <TextFormField

package/src/components/TextField.tsx

@@ -168,6 +168,7 @@ export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
   children?: React.ReactNode;
   isValid?: boolean;
   name?: string;
+  maxLength?: number;
   typography?: string;
   fontWeight?: "regular" | "medium" | "semibold" | "bold";
   textAlign?: "left" | "right" | "center";
@@ -215,6 +216,22 @@ const InputAddon = styled(TextStyle, {
     },
   },
 });
+const TextFieldLimitIndicator = styled("div", {
+  width: "fit-content",
+  display: "flex",
+  justifyContent: "flex-end",
+  position: "absolute",
+  top: "0.5rem",
+  right: "1rem",
+  span: {
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+    fontSize: "$labelSmall",
+    backgroundColor: "$neutral200",
+    fontFamily: "$default",
+  },
+});
 export const maskFormat = format;
 export const maskUnformat = unformat;
 
@@ -230,52 +247,84 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       addon,
       textAlign = "left",
       mask,
+      maxLength,
       ...props
     },
     fowardedRef
   ) => {
     const maskRef = mask ? useMask(mask) : undefined;
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const badgeRef = React.useRef<HTMLSpanElement>(null);
+
+    const updateCharCountBadge = () => {
+      if (!maxLength || !badgeRef.current) return;
+      const currentLength = inputRef.current?.value.length ?? 0;
+      badgeRef.current.textContent = String(maxLength - currentLength);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+      updateCharCountBadge();
+      props.onInput?.(e);
+    };
+
     return (
-      <Flex gap={"0"} css={{ width: "100%" }}>
-        {!!addon && <InputAddon color={color} typography="labelSmall">{addon}</InputAddon>}
+      <Flex direction="column" css={{ width: "100%" }}>
+        <Flex gap={"0"} css={{ width: "100%", position: "relative" }}>
+          {!!addon && (
+            <InputAddon color={color} typography="labelSmall">
+              {addon}
+            </InputAddon>
+          )}
 
-        <TextFieldStyled
-          color={color}
-          isValid={isValid}
-          name={name}
-          typography={typography}
-          fontWeight={fontWeight}
-          textAlign={textAlign}
-          ref={(r) => {
-            if (!r) return;
-            if (maskRef) maskRef.current = r;
+          <TextFieldStyled
+            color={color}
+            isValid={isValid}
+            name={name}
+            typography={typography}
+            fontWeight={fontWeight}
+            textAlign={textAlign}
+            maxLength={maxLength}
+            ref={(r) => {
+              if (!r) return;
+              inputRef.current = r;
+              if (maskRef) maskRef.current = r;
 
-            if (fowardedRef) {
-              if (typeof fowardedRef === "function") fowardedRef(r);
-              else fowardedRef.current = r;
+              if (fowardedRef) {
+                if (typeof fowardedRef === "function") fowardedRef(r);
+                else fowardedRef.current = r;
+              }
+            }}
+            onInput={handleInput}
+            {...props}
+            style={
+              addon
+                ? {
+                    borderTopLeftRadius: "0px",
+                    borderBottomLeftRadius: "0px",
+                  }
+                : undefined
             }
-          }}
-          {...props}
-          style={
-            addon
-              ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" }
-              : undefined
-          }
-        >
-          {children}
-          {isValid && (
-            <TextFieldSlot
-              position="flex-end"
-              name={name}
-              color={color as TextFieldSlotProps["color"]}
-              typography={typography}
-              fontWeight={fontWeight}
-              textAlign={textAlign}
-            >
-              <Icon name="check" />
-            </TextFieldSlot>
-          )}
-        </TextFieldStyled>
+          >
+            {children}
+            {isValid && (
+              <TextFieldSlot
+                position="flex-end"
+                name={name}
+                color={color as TextFieldSlotProps["color"]}
+                typography={typography}
+                fontWeight={fontWeight}
+                textAlign={textAlign}
+              >
+                <Icon name="check" />
+              </TextFieldSlot>
+            )}
+          </TextFieldStyled>
+        </Flex>
+        {maxLength && (
+          <TextFieldLimitIndicator>
+            <span ref={badgeRef}>{maxLength}</span>
+          </TextFieldLimitIndicator>
+        )}
       </Flex>
     );
   }