@octavius2929-personal/design-system 1.0.1 → 1.1.0

package/dist/index.d.cts

@@ -1297,6 +1297,10 @@ interface ColorTokens {
         sunken: string;
         inset: string;
     };
+    /** `strong`/`muted` cumplen AA (≥4.5) sobre los 4 fondos. **`subtle` solo cumple AA sobre
+     *  `bg.page`/`bg.surface`**: sobre los hundidos (`bg.sunken`/`bg.inset`) queda en ~3–4.4, así
+     *  que ahí es válido únicamente para uso incidental (estados `:disabled`, que WCAG 1.4.3
+     *  exime). Para texto ACTIVO sobre fondos hundidos usá `muted`. Lo fija `contrast.test.ts`. */
     fg: {
         strong: string;
         muted: string;
@@ -1985,6 +1989,17 @@ interface SnackbarProps {
     message: ReactNode;
     action?: ReactNode;
     onClose?: () => void;
+    /**
+     * Tiempo en ms antes de auto-cerrarse (dispara `onClose`). Default: `5000`.
+     * Pasá `null` para desactivarlo: el snackbar queda persistente y solo se
+     * cierra por acción del usuario (p. ej. el botón de cerrar).
+     *
+     * A11y (WCAG 2.2.1 — Timing Adjustable): el timer se pausa mientras el
+     * puntero está sobre el snackbar o el foco está dentro de él, y se reinicia
+     * con la duración completa al terminar la interacción. Así no se cierra
+     * algo que el usuario está leyendo o con lo que está interactuando.
+     */
+    duration?: number | null;
     /** testId de la instancia: compone `feedback__<contexto>__<testId>`. */
     testId?: string;
 }

package/dist/index.d.ts

@@ -1297,6 +1297,10 @@ interface ColorTokens {
         sunken: string;
         inset: string;
     };
+    /** `strong`/`muted` cumplen AA (≥4.5) sobre los 4 fondos. **`subtle` solo cumple AA sobre
+     *  `bg.page`/`bg.surface`**: sobre los hundidos (`bg.sunken`/`bg.inset`) queda en ~3–4.4, así
+     *  que ahí es válido únicamente para uso incidental (estados `:disabled`, que WCAG 1.4.3
+     *  exime). Para texto ACTIVO sobre fondos hundidos usá `muted`. Lo fija `contrast.test.ts`. */
     fg: {
         strong: string;
         muted: string;
@@ -1985,6 +1989,17 @@ interface SnackbarProps {
     message: ReactNode;
     action?: ReactNode;
     onClose?: () => void;
+    /**
+     * Tiempo en ms antes de auto-cerrarse (dispara `onClose`). Default: `5000`.
+     * Pasá `null` para desactivarlo: el snackbar queda persistente y solo se
+     * cierra por acción del usuario (p. ej. el botón de cerrar).
+     *
+     * A11y (WCAG 2.2.1 — Timing Adjustable): el timer se pausa mientras el
+     * puntero está sobre el snackbar o el foco está dentro de él, y se reinicia
+     * con la duración completa al terminar la interacción. Así no se cierra
+     * algo que el usuario está leyendo o con lo que está interactuando.
+     */
+    duration?: number | null;
     /** testId de la instancia: compone `feedback__<contexto>__<testId>`. */
     testId?: string;
 }

package/dist/index.js

@@ -1795,17 +1795,33 @@ var defaultIcons = {
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
+var roleBySeverity = {
+  info: "status",
+  ok: "status",
+  warn: "alert",
+  danger: "alert"
+};
 var Alert = forwardRef19(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
   const styles = useStyles17({ severity: severity2, className });
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ jsxs16("div", { ref, role: "alert", className: styles.root, "data-testid": dataTestId, ...rest, children: [
-    /* @__PURE__ */ jsx29("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ jsx29(IconComponent, {}) }),
-    /* @__PURE__ */ jsxs16("div", { className: styles.content, "data-testid": slot("content"), children: [
-      title != null && /* @__PURE__ */ jsx29(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ jsx29(Typography, { variant: "body", color: "muted", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      ref,
+      role: roleBySeverity[severity2],
+      className: styles.root,
+      "data-testid": dataTestId,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx29("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ jsx29(IconComponent, {}) }),
+        /* @__PURE__ */ jsxs16("div", { className: styles.content, "data-testid": slot("content"), children: [
+          title != null && /* @__PURE__ */ jsx29(Typography, { variant: "h4", children: title }),
+          children != null && /* @__PURE__ */ jsx29(Typography, { variant: "body", color: "muted", children })
+        ] })
+      ]
+    }
+  );
 });
 
 // src/components/tooltip/index.tsx
@@ -2934,7 +2950,7 @@ var Dialog = forwardRef29(function Dialog2({ open, onClose, title, actions: acti
 });
 
 // src/components/snackbar/index.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback2, useEffect as useEffect8, useRef as useRef7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
@@ -2960,26 +2976,80 @@ function useStyles28() {
 
 // src/components/snackbar/index.tsx
 import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
-var Snackbar = forwardRef30(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
+var DEFAULT_DURATION = 5e3;
+var Snackbar = forwardRef30(function Snackbar2({ open, message: message2, action, onClose, duration = DEFAULT_DURATION, testId }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles28();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
+  const onCloseRef = useRef7(onClose);
+  useEffect8(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  const interactingRef = useRef7({ hover: false, focus: false });
+  const timeoutRef = useRef7();
+  const clearTimer = useCallback2(() => {
+    if (timeoutRef.current !== void 0) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+  }, []);
+  const scheduleTimer = useCallback2(() => {
+    clearTimer();
+    if (!open || duration == null || !onCloseRef.current) return;
+    if (interactingRef.current.hover || interactingRef.current.focus) return;
+    timeoutRef.current = setTimeout(() => {
+      onCloseRef.current?.();
+    }, duration);
+  }, [open, duration, clearTimer]);
+  useEffect8(() => {
+    scheduleTimer();
+    return clearTimer;
+  }, [scheduleTimer, clearTimer]);
+  const handleMouseEnter = () => {
+    interactingRef.current.hover = true;
+    clearTimer();
+  };
+  const handleMouseLeave = () => {
+    interactingRef.current.hover = false;
+    scheduleTimer();
+  };
+  const handleFocus = () => {
+    interactingRef.current.focus = true;
+    clearTimer();
+  };
+  const handleBlur = () => {
+    interactingRef.current.focus = false;
+    scheduleTimer();
+  };
   if (!open || typeof document === "undefined") return null;
   return createPortal2(
-    /* @__PURE__ */ jsxs27("div", { ref, role: "status", className: root24, "data-testid": dataTestId, children: [
-      /* @__PURE__ */ jsx43("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
-      action,
-      onClose && /* @__PURE__ */ jsx43(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Close",
-          className: closeBtn2,
-          "data-testid": slot("close"),
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx43(XIcon, { size: 18 })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs27(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: root24,
+        "data-testid": dataTestId,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ jsx43("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
+          action,
+          onClose && /* @__PURE__ */ jsx43(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              className: closeBtn2,
+              "data-testid": slot("close"),
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx43(XIcon, { size: 18 })
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 });