@lets-events/react 11.0.2 → 11.0.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.0.2 build
+> @lets-events/react@11.0.4 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 275.12 KB
-ESM ⚡️ Build success in 224ms
-CJS dist\index.js 283.47 KB
-CJS ⚡️ Build success in 225ms
+ESM dist\index.mjs 275.57 KB
+ESM ⚡️ Build success in 232ms
+CJS dist\index.js 283.95 KB
+CJS ⚡️ Build success in 232ms
 DTS Build start
-DTS ⚡️ Build success in 3530ms
-DTS dist\index.d.mts 338.30 KB
-DTS dist\index.d.ts  338.30 KB
+DTS ⚡️ Build success in 3634ms
+DTS dist\index.d.mts 338.33 KB
+DTS dist\index.d.ts  338.33 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.0.4
+
+### Patch Changes
+
+- fix textfield ref
+
+## 11.0.3
+
+### Patch Changes
+
+- fix textfield ref
+
 ## 11.0.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1926,7 +1926,7 @@ type AvatarProps = ComponentProps<typeof AvatarStyled> & {
 };
 declare function Avatar({ asChild, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<TextField$1.RootProps & react.RefAttributes<HTMLInputElement>>, {
+declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<TextField$1.RootProps & react__default.RefAttributes<HTMLInputElement>>, {
     color?: "default" | "error" | undefined;
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
@@ -2302,7 +2302,7 @@ declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComp
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TextFieldSlotStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<TextField$1.SlotProps & react.RefAttributes<HTMLDivElement>>, {
+declare const TextFieldSlotStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<TextField$1.SlotProps & react__default.RefAttributes<HTMLDivElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     textAlign?: "left" | "right" | "center" | undefined;
@@ -2679,27 +2679,27 @@ declare const TextFieldSlotStyled: _stitches_react_types_styled_component.Styled
 type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     addon?: ReactNode;
     placeholder?: string;
-    children?: React.ReactNode;
+    children?: react__default.ReactNode;
     isValid?: boolean;
     name?: string;
     typography?: string;
-    fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
-    textAlign?: 'left' | 'right' | 'center';
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: "left" | "right" | "center";
     mask?: MaskOptions;
 };
-type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
+type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, "color"> & {
     placeholder?: string;
-    children?: React.ReactNode;
-    position?: 'flex-start' | 'flex-end';
+    children?: react__default.ReactNode;
+    position?: "flex-start" | "flex-end";
     onClick?: () => void;
-    color?: 'error' | 'success' | undefined;
+    color?: "error" | "success" | undefined;
     typography?: string;
-    fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
-    textAlign?: 'left' | 'right' | 'center';
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: "left" | "right" | "center";
 };
 declare const maskFormat: typeof format;
 declare const maskUnformat: typeof unformat;
-declare function TextField({ children, isValid, name, color, typography, fontWeight, addon, textAlign, mask, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare const TextField: react__default.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react__default.RefAttributes<HTMLInputElement>>;
 declare function TextFieldSlot({ children, position, onClick, typography, fontWeight, textAlign, ...props }: TextFieldSlotProps): react_jsx_runtime.JSX.Element;
 
 declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<RadioGroup$1.RootProps & react.RefAttributes<HTMLDivElement>>, {

package/dist/index.d.ts

@@ -1926,7 +1926,7 @@ type AvatarProps = ComponentProps<typeof AvatarStyled> & {
 };
 declare function Avatar({ asChild, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<TextField$1.RootProps & react.RefAttributes<HTMLInputElement>>, {
+declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<TextField$1.RootProps & react__default.RefAttributes<HTMLInputElement>>, {
     color?: "default" | "error" | undefined;
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
@@ -2302,7 +2302,7 @@ declare const TextFieldStyled: _stitches_react_types_styled_component.StyledComp
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TextFieldSlotStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<TextField$1.SlotProps & react.RefAttributes<HTMLDivElement>>, {
+declare const TextFieldSlotStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<TextField$1.SlotProps & react__default.RefAttributes<HTMLDivElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     textAlign?: "left" | "right" | "center" | undefined;
@@ -2679,27 +2679,27 @@ declare const TextFieldSlotStyled: _stitches_react_types_styled_component.Styled
 type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     addon?: ReactNode;
     placeholder?: string;
-    children?: React.ReactNode;
+    children?: react__default.ReactNode;
     isValid?: boolean;
     name?: string;
     typography?: string;
-    fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
-    textAlign?: 'left' | 'right' | 'center';
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: "left" | "right" | "center";
     mask?: MaskOptions;
 };
-type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
+type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, "color"> & {
     placeholder?: string;
-    children?: React.ReactNode;
-    position?: 'flex-start' | 'flex-end';
+    children?: react__default.ReactNode;
+    position?: "flex-start" | "flex-end";
     onClick?: () => void;
-    color?: 'error' | 'success' | undefined;
+    color?: "error" | "success" | undefined;
     typography?: string;
-    fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
-    textAlign?: 'left' | 'right' | 'center';
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: "left" | "right" | "center";
 };
 declare const maskFormat: typeof format;
 declare const maskUnformat: typeof unformat;
-declare function TextField({ children, isValid, name, color, typography, fontWeight, addon, textAlign, mask, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare const TextField: react__default.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react__default.RefAttributes<HTMLInputElement>>;
 declare function TextFieldSlot({ children, position, onClick, typography, fontWeight, textAlign, ...props }: TextFieldSlotProps): react_jsx_runtime.JSX.Element;
 
 declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<RadioGroup$1.RootProps & react.RefAttributes<HTMLDivElement>>, {

package/dist/index.js

@@ -2472,6 +2472,7 @@ function Avatar(_a) {
 }
 
 // src/components/TextField.tsx
+var import_react2 = __toESM(require("react"));
 var import_themes7 = require("@radix-ui/themes");
 
 // src/components/Flex.tsx
@@ -2746,62 +2747,73 @@ var InputAddon = styled(TextStyle, {
 });
 var maskFormat = import_mask.format;
 var maskUnformat = import_mask.unformat;
-function TextField(_a) {
-  var _b = _a, {
-    children,
-    isValid: isValid2,
-    name,
-    color,
-    typography,
-    fontWeight,
-    addon,
-    textAlign = "left",
-    mask
-  } = _b, props = __objRest(_b, [
-    "children",
-    "isValid",
-    "name",
-    "color",
-    "typography",
-    "fontWeight",
-    "addon",
-    "textAlign",
-    "mask"
-  ]);
-  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, { typography: "labelSmall", children: addon }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      TextFieldStyled,
-      __spreadProps(__spreadValues({
-        color,
-        isValid: isValid2,
-        name,
-        typography,
-        fontWeight,
-        textAlign,
-        ref: maskRef
-      }, 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" })
+var TextField = import_react2.default.forwardRef(
+  (_a, fowardedRef) => {
+    var _b = _a, {
+      children,
+      isValid: isValid2,
+      name,
+      color,
+      typography,
+      fontWeight,
+      addon,
+      textAlign = "left",
+      mask
+    } = _b, props = __objRest(_b, [
+      "children",
+      "isValid",
+      "name",
+      "color",
+      "typography",
+      "fontWeight",
+      "addon",
+      "textAlign",
+      "mask"
+    ]);
+    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, { 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" })
+              }
+            )
+          ]
+        })
+      )
+    ] });
+  }
+);
 function TextFieldSlot(_a) {
   var _b = _a, {
     children,
@@ -3509,7 +3521,7 @@ function DropdownMenuItem(_a) {
 }
 
 // src/components/Badge.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_themes12 = require("@radix-ui/themes");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var BadgeStyled = styled(import_themes12.Badge, {
@@ -3616,9 +3628,9 @@ var BadgeStyled = styled(import_themes12.Badge, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react2.default.Children.map(children, (child) => {
-    if (import_react2.default.isValidElement(child)) {
-      return import_react2.default.cloneElement(child, { size: props.size });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react3.default.Children.map(children, (child) => {
+    if (import_react3.default.isValidElement(child)) {
+      return import_react3.default.cloneElement(child, { size: props.size });
     }
     return child;
   }) }));
@@ -3693,12 +3705,12 @@ function Modal(_a) {
 }
 
 // src/components/Calendar/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/useOnClickOutside.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useOnClickOutside(ref, handler) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -7835,15 +7847,15 @@ function Calendar(_a) {
     "setSelected",
     "position"
   ]);
-  const [inputValue, setInputValue] = (0, import_react4.useState)("");
-  const [showContainer, setShowCalendar] = (0, import_react4.useState)(false);
-  const dropdownRef = (0, import_react4.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const [showContainer, setShowCalendar] = (0, import_react5.useState)(false);
+  const dropdownRef = (0, import_react5.useRef)(null);
   useOnClickOutside(dropdownRef, () => {
     setShowCalendar(false);
   });
   const today = /* @__PURE__ */ new Date();
   const maxDate = addYears(today, 20);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (selected) {
       setInputValue(format2(selected, "dd/MM/yyyy"));
     } else {
@@ -7920,7 +7932,7 @@ function Calendar(_a) {
 }
 
 // src/components/TimePicker.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8024,14 +8036,14 @@ function TimePicker({
   setSelected,
   position = "bottom"
 }) {
-  const [hours, setHours] = (0, import_react5.useState)("00");
-  const [minutes, setMinutes] = (0, import_react5.useState)("00");
-  const [rawHours, setRawHours] = (0, import_react5.useState)("00");
-  const [rawMinutes, setRawMinutes] = (0, import_react5.useState)("00");
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const dropdownRef = (0, import_react5.useRef)(null);
+  const [hours, setHours] = (0, import_react6.useState)("00");
+  const [minutes, setMinutes] = (0, import_react6.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react6.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react6.useState)("00");
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const dropdownRef = (0, import_react6.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const handleIncrement = (0, import_react5.useCallback)(
+  const handleIncrement = (0, import_react6.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
@@ -8045,7 +8057,7 @@ function TimePicker({
     },
     [hours, minutes]
   );
-  const handleDecrement = (0, import_react5.useCallback)(
+  const handleDecrement = (0, import_react6.useCallback)(
     (type) => {
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
@@ -8567,7 +8579,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_themes16 = require("@radix-ui/themes");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var StepStyled = styled("div", {
@@ -8683,9 +8695,9 @@ function StepList(_a) {
     "children",
     "currentStep"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react6.default.Children.map(children, (child) => {
-    if (import_react6.default.isValidElement(child) && child.type === StepTrigger) {
-      return import_react6.default.cloneElement(child, { currentStep });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react7.default.Children.map(children, (child) => {
+    if (import_react7.default.isValidElement(child) && child.type === StepTrigger) {
+      return import_react7.default.cloneElement(child, { currentStep });
     }
     return child;
   }) }));
@@ -8742,7 +8754,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 var import_themes18 = require("@radix-ui/themes");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var TextareaFieldStyle = styled(import_themes18.TextArea, {
   display: "flex",
@@ -8801,8 +8813,8 @@ var TextareaLimitIndicator = styled("div", {
 });
 function TextareaField(_a) {
   var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
-  const inputRef = (0, import_react7.useRef)(null);
-  const badgeRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react8.useRef)(null);
+  const badgeRef = (0, import_react8.useRef)(null);
   if (!maxLength) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
   }
@@ -8825,12 +8837,12 @@ function TextareaField(_a) {
 }
 
 // src/components/Toast/components/ToastItem.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Toast/styles/index.ts
-var import_react8 = require("@stitches/react");
+var import_react9 = require("@stitches/react");
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var slideIn = (0, import_react8.keyframes)({
+var slideIn = (0, import_react9.keyframes)({
   from: {
     transform: "translateX(calc(100% + 25px))",
     opacity: 0
@@ -8840,7 +8852,7 @@ var slideIn = (0, import_react8.keyframes)({
     opacity: 1
   }
 });
-var slideOut = (0, import_react8.keyframes)({
+var slideOut = (0, import_react9.keyframes)({
   from: {
     transform: "translateX(0)",
     opacity: 1
@@ -8850,7 +8862,7 @@ var slideOut = (0, import_react8.keyframes)({
     opacity: 0
   }
 });
-var swipeOut = (0, import_react8.keyframes)({
+var swipeOut = (0, import_react9.keyframes)({
   from: {
     transform: "translateX(var(--radix-toast-swipe-end-x))",
     opacity: 1
@@ -8956,7 +8968,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [open, setOpen] = (0, import_react9.useState)(true);
+  const [open, setOpen] = (0, import_react10.useState)(true);
   const handleOpenChange = (open2) => {
     setOpen(open2);
     if (!open2) {
@@ -8980,17 +8992,17 @@ function ToastItem({
 }
 
 // src/components/Toast/components/ToastProvider.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var ToastContext = (0, import_react10.createContext)(null);
+var ToastContext = (0, import_react11.createContext)(null);
 function ToastProvider({
   children,
   defaultDuration = 5e3,
   maxToasts = 5,
   swipeDirection = "right"
 }) {
-  const [toasts, setToasts] = (0, import_react10.useState)([]);
+  const [toasts, setToasts] = (0, import_react11.useState)([]);
   const addToast = (toastData) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = __spreadProps(__spreadValues({
@@ -9026,9 +9038,9 @@ function ToastProvider({
 }
 
 // src/components/Toast/hooks/useToast.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useToast = () => {
-  const context = (0, import_react11.useContext)(ToastContext);
+  const context = (0, import_react12.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast deve ser usado dentro de um ToastProvider");
   }

package/dist/index.mjs

@@ -2386,6 +2386,7 @@ function Avatar(_a) {
 }
 
 // src/components/TextField.tsx
+import React from "react";
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
 
 // src/components/Flex.tsx
@@ -2660,62 +2661,73 @@ var InputAddon = styled(TextStyle, {
 });
 var maskFormat = format;
 var maskUnformat = unformat;
-function TextField(_a) {
-  var _b = _a, {
-    children,
-    isValid: isValid2,
-    name,
-    color,
-    typography,
-    fontWeight,
-    addon,
-    textAlign = "left",
-    mask
-  } = _b, props = __objRest(_b, [
-    "children",
-    "isValid",
-    "name",
-    "color",
-    "typography",
-    "fontWeight",
-    "addon",
-    "textAlign",
-    "mask"
-  ]);
-  const maskRef = mask ? useMask(mask) : void 0;
-  return /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
-    !!addon && /* @__PURE__ */ jsx7(InputAddon, { typography: "labelSmall", children: addon }),
-    /* @__PURE__ */ jsxs(
-      TextFieldStyled,
-      __spreadProps(__spreadValues({
-        color,
-        isValid: isValid2,
-        name,
-        typography,
-        fontWeight,
-        textAlign,
-        ref: maskRef
-      }, 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" })
+var TextField = React.forwardRef(
+  (_a, fowardedRef) => {
+    var _b = _a, {
+      children,
+      isValid: isValid2,
+      name,
+      color,
+      typography,
+      fontWeight,
+      addon,
+      textAlign = "left",
+      mask
+    } = _b, props = __objRest(_b, [
+      "children",
+      "isValid",
+      "name",
+      "color",
+      "typography",
+      "fontWeight",
+      "addon",
+      "textAlign",
+      "mask"
+    ]);
+    const maskRef = mask ? useMask(mask) : void 0;
+    return /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
+      !!addon && /* @__PURE__ */ jsx7(InputAddon, { 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" })
+              }
+            )
+          ]
+        })
+      )
+    ] });
+  }
+);
 function TextFieldSlot(_a) {
   var _b = _a, {
     children,
@@ -3423,7 +3435,7 @@ function DropdownMenuItem(_a) {
 }
 
 // src/components/Badge.tsx
-import React from "react";
+import React2 from "react";
 import { Badge as BadgeRadix } from "@radix-ui/themes";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var BadgeStyled = styled(BadgeRadix, {
@@ -3530,9 +3542,9 @@ var BadgeStyled = styled(BadgeRadix, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ jsx12(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, { size: props.size });
+  return /* @__PURE__ */ jsx12(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(child, { size: props.size });
     }
     return child;
   }) }));
@@ -8481,7 +8493,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-import React4 from "react";
+import React5 from "react";
 import { Box as Box2, Tabs as StepRadix } from "@radix-ui/themes";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var StepStyled = styled("div", {
@@ -8597,9 +8609,9 @@ function StepList(_a) {
     "children",
     "currentStep"
   ]);
-  return /* @__PURE__ */ jsx18(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React4.Children.map(children, (child) => {
-    if (React4.isValidElement(child) && child.type === StepTrigger) {
-      return React4.cloneElement(child, { currentStep });
+  return /* @__PURE__ */ jsx18(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React5.Children.map(children, (child) => {
+    if (React5.isValidElement(child) && child.type === StepTrigger) {
+      return React5.cloneElement(child, { currentStep });
     }
     return child;
   }) }));

package/package.json

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

package/src/components/TextField.tsx

@@ -1,89 +1,89 @@
-import { ComponentProps, ReactNode } from 'react'
-import { styled } from '../styles'
-import { TextField as TextFieldRadix } from '@radix-ui/themes'
-import Icon from './Icon'
-import { typographyValues } from '../types/typographyValues'
-import { TextStyle } from './Text'
-import { Flex } from './Flex'
-import { format, MaskOptions, useMask, unformat } from '@react-input/mask'
+import React, { ComponentProps, ReactNode } from "react";
+import { styled } from "../styles";
+import { TextField as TextFieldRadix } from "@radix-ui/themes";
+import Icon from "./Icon";
+import { typographyValues } from "../types/typographyValues";
+import { TextStyle } from "./Text";
+import { Flex } from "./Flex";
+import { format, MaskOptions, useMask, unformat } from "@react-input/mask";
 
 export const TextFieldStyled = styled(TextFieldRadix.Root, {
-  height: '$40',
-  fontFamily: '$default',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  color: '$dark500',
-  border: '1px solid $dark300',
-  position: 'relative',
-  display: 'flex',
-  width: '100%',
-  alignItems: 'center',
-  padding: '0 $14',
-  gap: '$14',
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0 $14",
+  gap: "$14",
   input: {
     order: 1,
-    outline: 'none',
-    border: 'none',
+    outline: "none",
+    border: "none",
     margin: 0,
-    width: '100%',
-    font: 'inherit',
-    textAlign: 'left',
+    width: "100%",
+    font: "inherit",
+    textAlign: "left",
   },
 
-  '&:has(input:focus)': {
-    border: '2px solid $brand300',
+  "&:has(input:focus)": {
+    border: "2px solid $brand300",
   },
-  '&:has(input:disabled)': {
-    backgroundColor: '$dark100',
-    color: '$dark400',
-    border: '1px solid $dark200',
-    cursor: 'not-allowed',
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
   },
 
   variants: {
     color: {
       default: {
-        color: '$dark400',
-        border: '1px solid $dark200',
-        '&:has(input:focus)': {
-          border: '2px solid $brand300',
+        color: "$dark400",
+        border: "1px solid $dark200",
+        "&:has(input:focus)": {
+          border: "2px solid $brand300",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$dark100',
-          color: '$dark400',
-          border: '1px solid $dark200',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed",
         },
       },
       error: {
-        border: '1px solid $error400',
-        color: '$error400',
-        'input::placeholder': {
-          color: '$error400',
+        border: "1px solid $error400",
+        color: "$error400",
+        "input::placeholder": {
+          color: "$error400",
         },
-        '&:has(input:focus)': {
-          border: '2px solid $error400',
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$error50',
-          color: '$error300',
-          border: '1px solid $error100',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
         },
       },
     },
 
     typography: typographyValues,
     fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
     textAlign: {
-      left: { textAlign: 'left' },
-      center: { textAlign: 'center' },
-      right: { textAlign: 'right' },
+      left: { textAlign: "left" },
+      center: { textAlign: "center" },
+      right: { textAlign: "right" },
     },
     isValid: {
       true: {},
@@ -95,171 +95,186 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     {
       isValid: false,
       css: {
-        border: '1px solid $error400',
-        color: '$error400',
-        backgroundColor: '$error50',
+        border: "1px solid $error400",
+        color: "$error400",
+        backgroundColor: "$error50",
         input: {
-          '&::placeholder': {
-            color: '$error400',
+          "&::placeholder": {
+            color: "$error400",
           },
-          backgroundColor: '$error50',
+          backgroundColor: "$error50",
         },
-        '&:has(input:focus)': {
-          border: '2px solid $error400',
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
         },
-        '&:has(input:disabled)': {
+        "&:has(input:disabled)": {
           input: {
-            backgroundColor: '$error50',
+            backgroundColor: "$error50",
           },
-          backgroundColor: '$error50',
-          color: '$error300',
-          border: '1px solid $error100',
-          cursor: 'not-allowed',
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
         },
       },
     },
     {
       isValid: true,
       css: {
-        '&:has(input:focus)': {
-          border: '2px solid $success500',
+        "&:has(input:focus)": {
+          border: "2px solid $success500",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$dark100',
-          color: '$dark400',
-          border: '1px solid $dark200',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed",
         },
       },
     },
   ],
-})
+});
 
 export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
   padding: 4,
 
   variants: {
     typography: typographyValues,
     fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
     textAlign: {
-      left: { textAlign: 'left' },
-      right: { textAlign: 'right' },
-      center: { textAlign: 'center' },
+      left: { textAlign: "left" },
+      right: { textAlign: "right" },
+      center: { textAlign: "center" },
     },
   },
-})
+});
 
 export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?: ReactNode
-  placeholder?: string
-  children?: React.ReactNode
-  isValid?: boolean
-  name?: string
-  typography?: string
-  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
-  textAlign?: 'left' | 'right' | 'center'
-  mask?: MaskOptions
-}
+  addon?: ReactNode;
+  placeholder?: string;
+  children?: React.ReactNode;
+  isValid?: boolean;
+  name?: string;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+  mask?: MaskOptions;
+};
 
 export type TextFieldSlotProps = Omit<
   ComponentProps<typeof TextFieldStyled>,
-  'color'
+  "color"
 > & {
-  placeholder?: string
-  children?: React.ReactNode
-  position?: 'flex-start' | 'flex-end'
-  onClick?: () => void
-  color?: 'error' | 'success' | undefined
-  typography?: string
-  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
-  textAlign?: 'left' | 'right' | 'center'
-}
+  placeholder?: string;
+  children?: React.ReactNode;
+  position?: "flex-start" | "flex-end";
+  onClick?: () => void;
+  color?: "error" | "success" | undefined;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+};
 
 const InputAddon = styled(TextStyle, {
-  boxSizing: 'border-box',
-  border: '1px solid $dark300',
-  height: '$40',
-  padding: '0  $12',
-  margin: '0 auto',
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+  height: "$40",
+  padding: "0  $12",
+  margin: "0 auto",
 
-  color: '$dark600',
-  whiteSpace: 'nowrap',
-  borderRadius: '$sm 0px 0px $sm',
-  borderRightWidth: '0px',
-  display: 'flex',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
+  color: "$dark600",
+  whiteSpace: "nowrap",
+  borderRadius: "$sm 0px 0px $sm",
+  borderRightWidth: "0px",
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
   lineHeight: 1,
-})
-export const maskFormat = format
-export const maskUnformat = unformat
+});
+export const maskFormat = format;
+export const maskUnformat = unformat;
 
-export function TextField({
-  children,
-  isValid,
-  name,
-  color,
-  typography,
-  fontWeight,
-  addon,
-  textAlign = 'left',
-  mask,
-  ...props
-}: TextFieldProps) {
-  const maskRef = mask ? useMask(mask) : undefined
+export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      children,
+      isValid,
+      name,
+      color,
+      typography,
+      fontWeight,
+      addon,
+      textAlign = "left",
+      mask,
+      ...props
+    },
+    fowardedRef
+  ) => {
+    const maskRef = mask ? useMask(mask) : undefined;
 
-  return (
-    <Flex gap={'0'} css={{ width: '100%' }}>
-      {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
+    return (
+      <Flex gap={"0"} css={{ width: "100%" }}>
+        {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
 
-      <TextFieldStyled
-        color={color}
-        isValid={isValid}
-        name={name}
-        typography={typography}
-        fontWeight={fontWeight}
-        textAlign={textAlign}
-        ref={maskRef}
-        {...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>
-    </Flex>
-  )
-}
+        <TextFieldStyled
+          color={color}
+          isValid={isValid}
+          name={name}
+          typography={typography}
+          fontWeight={fontWeight}
+          textAlign={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" }
+              : 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>
+      </Flex>
+    );
+  }
+);
 
 export function TextFieldSlot({
   children,
-  position = 'flex-start',
+  position = "flex-start",
   onClick,
-  typography = 'bodyXS',
-  fontWeight = 'regular',
-  textAlign = 'right',
+  typography = "bodyXS",
+  fontWeight = "regular",
+  textAlign = "right",
   ...props
 }: TextFieldSlotProps) {
   const sharedStyles = {
@@ -268,17 +283,17 @@ export function TextFieldSlot({
     textAlign,
     ...props,
     color: undefined,
-  }
+  };
 
   return onClick ? (
     <TextFieldSlotStyled
       {...sharedStyles}
       style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
         textAlign,
         zIndex: 2,
-        cursor: 'pointer',
+        cursor: "pointer",
       }}
       onClick={() => onClick()}
     >
@@ -288,12 +303,12 @@ export function TextFieldSlot({
     <TextFieldSlotStyled
       {...sharedStyles}
       style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
         textAlign,
       }}
     >
       {children}
     </TextFieldSlotStyled>
-  )
+  );
 }