@octavius2929-personal/design-system 1.4.0 → 1.4.1

package/dist/index.d.cts

@@ -1816,7 +1816,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "on
     testId?: string;
 }
 
-declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 
 interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     label?: ReactNode;
@@ -2028,7 +2028,7 @@ interface DialogProps {
 
 declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SnackbarProps {
+interface SnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "style"> {
     open: boolean;
     message: ReactNode;
     action?: ReactNode;

package/dist/index.d.ts

@@ -1816,7 +1816,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "on
     testId?: string;
 }
 
-declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 
 interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     label?: ReactNode;
@@ -2028,7 +2028,7 @@ interface DialogProps {
 
 declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SnackbarProps {
+interface SnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "style"> {
     open: boolean;
     message: ReactNode;
     action?: ReactNode;

package/dist/index.js

@@ -1403,7 +1403,11 @@ var Switch = forwardRef13(function Switch2({ checked = false, onChange, label: l
 });
 
 // src/components/text-field/index.tsx
-import { forwardRef as forwardRef15 } from "react";
+import {
+  forwardRef as forwardRef15,
+  useImperativeHandle,
+  useRef as useRef3
+} from "react";
 
 // src/components/base-field/index.tsx
 import { forwardRef as forwardRef14, useId as useId2 } from "react";
@@ -1498,59 +1502,64 @@ var BaseField = forwardRef14(function BaseField2({ label: label8, help, error, s
 
 // src/components/text-field/index.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
-var TextField = forwardRef15(function TextField2({
-  label: label8,
-  help,
-  error,
-  startIcon,
-  multiline,
-  rows,
-  type = "text",
-  onChange,
-  className,
-  id,
-  testId,
-  ...rest
-}, ref) {
-  const rawTestId = rest["data-testid"];
-  return /* @__PURE__ */ jsx19(
-    BaseField,
-    {
+var TextField = forwardRef15(
+  function TextField2({
+    label: label8,
+    help,
+    error,
+    startIcon,
+    multiline,
+    rows,
+    type = "text",
+    onChange,
+    className,
+    id,
+    testId,
+    ...rest
+  }, ref) {
+    const inputRef = useRef3(null);
+    const textareaRef = useRef3(null);
+    useImperativeHandle(
       ref,
-      label: label8,
-      help,
-      error,
-      startIcon,
-      id,
-      className,
-      testId,
-      children: ({ ref: controlRef, ...control }) => multiline ? (
-        // En multiline el control es un <textarea>: no reenviamos `controlRef` porque el
-        // tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
-        /* @__PURE__ */ jsx19(
+      () => multiline ? textareaRef.current : inputRef.current,
+      [multiline]
+    );
+    const rawTestId = rest["data-testid"];
+    return /* @__PURE__ */ jsx19(
+      BaseField,
+      {
+        label: label8,
+        help,
+        error,
+        startIcon,
+        id,
+        className,
+        testId,
+        children: (control) => multiline ? /* @__PURE__ */ jsx19(
           "textarea",
           {
             ...rest,
             ...control,
             "data-testid": rawTestId ?? control["data-testid"],
+            ref: textareaRef,
             rows: rows ?? 4,
             onChange: (e) => onChange?.(e.target.value)
           }
+        ) : /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ...rest,
+            ...control,
+            "data-testid": rawTestId ?? control["data-testid"],
+            ref: inputRef,
+            type,
+            onChange: (e) => onChange?.(e.target.value)
+          }
         )
-      ) : /* @__PURE__ */ jsx19(
-        "input",
-        {
-          ...rest,
-          ...control,
-          "data-testid": rawTestId ?? control["data-testid"],
-          ref: controlRef,
-          type,
-          onChange: (e) => onChange?.(e.target.value)
-        }
-      )
-    }
-  );
-});
+      }
+    );
+  }
+);
 
 // src/components/password-field/index.tsx
 import { forwardRef as forwardRef16, useState as useState3 } from "react";
@@ -2010,7 +2019,7 @@ import {
   forwardRef as forwardRef21,
   useEffect as useEffect4,
   useId as useId3,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState5
 } from "react";
 
@@ -2046,7 +2055,7 @@ var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placemen
   const tooltipId = useId3();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles19({ placement: placement2 });
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
-  const hideTimer = useRef3(null);
+  const hideTimer = useRef4(null);
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -2110,7 +2119,7 @@ var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placemen
 });
 
 // src/components/select/index.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect5, useId as useId4, useRef as useRef4, useState as useState6 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect5, useId as useId4, useRef as useRef5, useState as useState6 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -2183,7 +2192,7 @@ var Select = forwardRef22(function Select2({
 }, ref) {
   const [open, setOpen] = useState6(false);
   const [activeIndex, setActiveIndex] = useState6(0);
-  const rootRef = useRef4(null);
+  const rootRef = useRef5(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -2710,7 +2719,7 @@ var Stepper = forwardRef27(function Stepper2({ steps, active: active2 = 0, class
 });
 
 // src/components/tabs/index.tsx
-import { forwardRef as forwardRef28, useId as useId5, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef28, useId as useId5, useRef as useRef6 } from "react";
 
 // src/components/tabs/use-styles.ts
 import { useMemo as useMemo30 } from "react";
@@ -2738,7 +2747,7 @@ var Tabs = forwardRef28(function Tabs2({ items, value, onChange, testId, ...rest
   const { root: root25, tabClass, panel: panel3 } = useStyles26();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   const baseId = useId5();
-  const tabRefs = useRef5([]);
+  const tabRefs = useRef6([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
   const activeIndex = items.findIndex((item3) => item3.value === value);
   const tabId = (v) => `${baseId}-tab-${v}`;
@@ -2823,7 +2832,7 @@ import {
   forwardRef as forwardRef29,
   useEffect as useEffect6,
   useLayoutEffect,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState8
 } from "react";
 
@@ -2862,13 +2871,13 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
   const { testId: rootTestId, slot } = useTestId("menu", testId);
   const [open, setOpen] = useState8(false);
   const [alignEnd, setAlignEnd] = useState8(false);
-  const rootRef = useRef6(null);
+  const rootRef = useRef7(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     assignRef(ref, node);
   };
-  const listRef = useRef6(null);
-  const triggerRef = useRef6(null);
+  const listRef = useRef7(null);
+  const triggerRef = useRef7(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -3009,7 +3018,7 @@ import {
   forwardRef as forwardRef30,
   useEffect as useEffect7,
   useId as useId6,
-  useRef as useRef7
+  useRef as useRef8
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -3046,12 +3055,12 @@ function assignRef2(ref, value) {
 var Dialog = forwardRef30(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface3, body: body3, actions: actionsClass } = useStyles28();
   const { testId: rootTestId, slot } = useTestId("dialog", testId);
-  const surfaceRef = useRef7(null);
+  const surfaceRef = useRef8(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
     assignRef2(ref, node);
   };
-  const previouslyFocused = useRef7(null);
+  const previouslyFocused = useRef8(null);
   const generatedId = useId6();
   const titleId = title != null ? generatedId : void 0;
   useEffect7(() => {
@@ -3130,7 +3139,12 @@ var Dialog = forwardRef30(function Dialog2({ open, onClose, title, actions: acti
 });
 
 // src/components/snackbar/index.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback2, useEffect as useEffect8, useRef as useRef8 } from "react";
+import {
+  forwardRef as forwardRef31,
+  useCallback as useCallback2,
+  useEffect as useEffect8,
+  useRef as useRef9
+} from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
@@ -3157,15 +3171,27 @@ function useStyles29() {
 // src/components/snackbar/index.tsx
 import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 5e3;
-var Snackbar = forwardRef31(function Snackbar2({ open, message: message2, action, onClose, duration = DEFAULT_DURATION, testId }, ref) {
+var Snackbar = forwardRef31(function Snackbar2({
+  open,
+  message: message2,
+  action,
+  onClose,
+  duration = DEFAULT_DURATION,
+  testId,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
   const { root: root25, message: messageClass, closeBtn: closeBtn2 } = useStyles29();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
-  const onCloseRef = useRef8(onClose);
+  const onCloseRef = useRef9(onClose);
   useEffect8(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const interactingRef = useRef8({ hover: false, focus: false });
-  const timeoutRef = useRef8();
+  const interactingRef = useRef9({ hover: false, focus: false });
+  const timeoutRef = useRef9();
   const clearTimer = useCallback2(() => {
     if (timeoutRef.current !== void 0) {
       clearTimeout(timeoutRef.current);
@@ -3184,21 +3210,25 @@ var Snackbar = forwardRef31(function Snackbar2({ open, message: message2, action
     scheduleTimer();
     return clearTimer;
   }, [scheduleTimer, clearTimer]);
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (event) => {
     interactingRef.current.hover = true;
     clearTimer();
+    onMouseEnter?.(event);
   };
-  const handleMouseLeave = () => {
+  const handleMouseLeave = (event) => {
     interactingRef.current.hover = false;
     scheduleTimer();
+    onMouseLeave?.(event);
   };
-  const handleFocus = () => {
+  const handleFocus = (event) => {
     interactingRef.current.focus = true;
     clearTimer();
+    onFocus?.(event);
   };
-  const handleBlur = () => {
+  const handleBlur = (event) => {
     interactingRef.current.focus = false;
     scheduleTimer();
+    onBlur?.(event);
   };
   if (!open || typeof document === "undefined") return null;
   return createPortal2(
@@ -3207,12 +3237,13 @@ var Snackbar = forwardRef31(function Snackbar2({ open, message: message2, action
       {
         ref,
         role: "status",
-        className: root25,
         "data-testid": dataTestId,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
+        ...rest,
+        className: root25,
         children: [
           /* @__PURE__ */ jsx44("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
           action,