@octavius2929-personal/design-system 1.4.0 → 1.5.0

package/dist/index.cjs

@@ -1000,36 +1000,103 @@ var import_react17 = require("react");
 var import_react16 = require("react");
 
 // src/components/avatar/use-styles.css.ts
+var dot = "use-styles_dot__1mn1rmu8";
+var dotSize = { sm: "use-styles_dotSize_sm__1mn1rmu9", md: "use-styles_dotSize_md__1mn1rmua", lg: "use-styles_dotSize_lg__1mn1rmub" };
+var dotTone = { online: "use-styles_dotTone_online__1mn1rmuc", away: "use-styles_dotTone_away__1mn1rmud", busy: "use-styles_dotTone_busy__1mn1rmue", offline: "use-styles_dotTone_offline__1mn1rmuf" };
+var image = "use-styles_image__1mn1rmu2";
+var mark = "use-styles_mark__1mn1rmug";
+var markShape = { online: "use-styles_markShape_online__1mn1rmuh", busy: "use-styles_markShape_busy__1mn1rmui", away: "use-styles_markShape_away__1mn1rmuj", offline: "use-styles_markShape_offline__1mn1rmuk" };
 var root3 = "use-styles_root__1mn1rmu0";
-var size2 = { sm: "use-styles_size_sm__1mn1rmu1", md: "use-styles_size_md__1mn1rmu2", lg: "use-styles_size_lg__1mn1rmu3" };
-var variant = { "default": "use-styles_variant_default__1mn1rmu4", filled: "use-styles_variant_filled__1mn1rmu5" };
+var size2 = { sm: "use-styles_size_sm__1mn1rmu3", md: "use-styles_size_md__1mn1rmu4", lg: "use-styles_size_lg__1mn1rmu5" };
+var statusText = "surfaces_srOnly__1qa7atn0";
+var variant = { "default": "use-styles_variant_default__1mn1rmu6", filled: "use-styles_variant_filled__1mn1rmu7" };
+var visual = "use-styles_visual__1mn1rmu1";
 
 // src/components/avatar/use-styles.ts
-function useStyles6({
-  size: size3 = "md",
-  filled,
-  className
-}) {
+function useStyles6({ size: size3 = "md", filled, status, className }) {
   const { themeClass } = useTheme();
   const root25 = (0, import_react16.useMemo)(
-    () => [
-      themeClass,
-      root3,
-      size2[size3],
-      filled ? variant.filled : variant.default,
-      className
-    ].filter(Boolean).join(" "),
-    [themeClass, size3, filled, className]
+    () => [themeClass, root3, size2[size3]].filter(Boolean).join(" "),
+    [themeClass, size3]
   );
-  return { root: root25 };
+  const visual2 = (0, import_react16.useMemo)(
+    () => [visual, filled ? variant.filled : variant.default, className].filter(Boolean).join(" "),
+    [filled, className]
+  );
+  const dot4 = (0, import_react16.useMemo)(
+    () => status ? [dot, dotSize[size3], dotTone[status]].filter(Boolean).join(" ") : "",
+    [status, size3]
+  );
+  const mark2 = (0, import_react16.useMemo)(
+    () => status ? [mark, markShape[status]].filter(Boolean).join(" ") : "",
+    [status]
+  );
+  return { root: root25, visual: visual2, image, dot: dot4, mark: mark2, statusText };
 }
 
 // src/components/avatar/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Avatar = (0, import_react17.forwardRef)(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
-  const { root: root25 } = useStyles6({ size: size3, filled, className });
-  const { testId: dataTestId } = useTestId("media", testId);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { ref, className: root25, "data-testid": dataTestId, ...rest, children });
+function getInitials(name) {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  if (words.length === 0) return "";
+  const firstWord = words[0] ?? "";
+  const firstLetter = Array.from(firstWord)[0] ?? "";
+  if (words.length === 1) return firstLetter.toLocaleUpperCase();
+  const secondWord = words[1] ?? "";
+  const secondLetter = Array.from(secondWord)[0] ?? "";
+  return (firstLetter + secondLetter).toLocaleUpperCase();
+}
+var statusLabel = {
+  online: "Online",
+  away: "Away",
+  busy: "Busy",
+  offline: "Offline"
+};
+var Avatar = (0, import_react17.forwardRef)(function Avatar2({
+  size: size3,
+  filled,
+  src,
+  alt,
+  name,
+  status,
+  decorative = false,
+  className,
+  children,
+  testId,
+  ...rest
+}, ref) {
+  const [imgFailed, setImgFailed] = (0, import_react17.useState)(false);
+  const [lastSrc, setLastSrc] = (0, import_react17.useState)(src);
+  if (src !== lastSrc) {
+    setLastSrc(src);
+    setImgFailed(false);
+  }
+  const { root: root25, visual: visual2, image: image2, dot: dot4, mark: mark2, statusText: statusText2 } = useStyles6({
+    size: size3,
+    filled,
+    status,
+    className
+  });
+  const { testId: dataTestId, slot } = useTestId("media", testId);
+  const showImage = Boolean(src) && !imgFailed;
+  const accessibleName = alt?.trim() || name?.trim() || void 0;
+  const fallback = children ?? getInitials(name);
+  const visualA11yProps = decorative ? { "aria-hidden": true } : showImage ? {} : accessibleName ? { role: "img", "aria-label": accessibleName } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root25, "data-testid": dataTestId, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: visual2, "data-testid": slot("visual"), ...visualA11yProps, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "img",
+      {
+        src,
+        alt: decorative ? "" : accessibleName ?? "",
+        className: image2,
+        onError: () => setImgFailed(true)
+      }
+    ) : fallback }),
+    status && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: dot4, "data-testid": slot("status"), "data-status": status, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: mark2, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: statusText2, children: statusLabel[status] })
+    ] })
+  ] });
 });
 
 // src/components/badge/index.tsx
@@ -1039,7 +1106,7 @@ var import_react19 = require("react");
 var import_react18 = require("react");
 
 // src/components/badge/use-styles.css.ts
-var dot = "use-styles_dot__1wpei6p1";
+var dot2 = "use-styles_dot__1wpei6p1";
 var root4 = "use-styles_root__1wpei6p0";
 var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
 
@@ -1053,18 +1120,18 @@ function useStyles7({
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react18.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
-  return { root: root25, dot: dot3 };
+  const dot4 = (0, import_react18.useMemo)(() => [dot2, tone2[tone4]].join(" "), [tone4]);
+  return { root: root25, dot: dot4 };
 }
 
 // src/components/badge/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var Badge = (0, import_react19.forwardRef)(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
-  const { root: root25, dot: dot3 } = useStyles7({ tone: tone4, className });
+  const { root: root25, dot: dot4 } = useStyles7({ tone: tone4, className });
   const { testId: dataTestId, slot } = useTestId("media", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { ref, className: root25, "data-testid": dataTestId, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: dot3, "data-testid": slot("dot"), children: count })
+    count != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: dot4, "data-testid": slot("dot"), children: count })
   ] });
 });
 
@@ -1331,7 +1398,7 @@ var import_react26 = require("react");
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
 var disabled2 = "use-styles_disabled__vy61b41";
-var dot2 = "use-styles_dot__vy61b43";
+var dot3 = "use-styles_dot__vy61b43";
 var input2 = "surfaces_srOnly__1qa7atn0";
 var label2 = "use-styles_label__vy61b44";
 var root7 = "use-styles_root__vy61b40";
@@ -1350,7 +1417,7 @@ function useStyles11({
     root: root25,
     input: input2,
     circle,
-    dot: dot2,
+    dot: dot3,
     label: label2
   };
 }
@@ -1358,7 +1425,7 @@ function useStyles11({
 // src/components/radio/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Radio = (0, import_react27.forwardRef)(function Radio2({ checked, onChange, label: label8, name, value, disabled: disabled4, testId, ...rest }, ref) {
-  const { root: root25, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles11({ disabled: disabled4 });
+  const { root: root25, input: input6, circle: circle2, dot: dot4, label: labelClass } = useStyles11({ disabled: disabled4 });
   const { testId: dataTestId } = useTestId("toggle", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root25, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled4 }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1375,7 +1442,7 @@ var Radio = (0, import_react27.forwardRef)(function Radio2({ checked, onChange,
         ...rest
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: dot3 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: dot4 }) }),
     label8 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: labelClass, children: label8 })
   ] });
 });
@@ -1678,60 +1745,65 @@ var BaseField = (0, import_react33.forwardRef)(function BaseField2({ label: labe
 });
 
 // src/components/text-field/index.tsx
-var import_jsx_runtime19 = (
-  // 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>).
-  require("react/jsx-runtime")
-);
-var TextField = (0, import_react34.forwardRef)(function TextField2({
-  label: label8,
-  help,
-  error,
-  startIcon,
-  multiline,
-  rows,
-  type = "text",
-  onChange,
-  className,
-  id,
-  testId,
-  ...rest
-}, ref) {
-  const rawTestId = rest["data-testid"];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    BaseField,
-    {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var TextField = (0, import_react34.forwardRef)(
+  function TextField2({
+    label: label8,
+    help,
+    error,
+    startIcon,
+    multiline,
+    rows,
+    type = "text",
+    onChange,
+    className,
+    id,
+    testId,
+    ...rest
+  }, ref) {
+    const inputRef = (0, import_react34.useRef)(null);
+    const textareaRef = (0, import_react34.useRef)(null);
+    (0, import_react34.useImperativeHandle)(
       ref,
-      label: label8,
-      help,
-      error,
-      startIcon,
-      id,
-      className,
-      testId,
-      children: ({ ref: controlRef, ...control }) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "textarea",
-        {
-          ...rest,
-          ...control,
-          "data-testid": rawTestId ?? control["data-testid"],
-          rows: rows ?? 4,
-          onChange: (e) => onChange?.(e.target.value)
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "input",
-        {
-          ...rest,
-          ...control,
-          "data-testid": rawTestId ?? control["data-testid"],
-          ref: controlRef,
-          type,
-          onChange: (e) => onChange?.(e.target.value)
-        }
-      )
-    }
-  );
-});
+      () => multiline ? textareaRef.current : inputRef.current,
+      [multiline]
+    );
+    const rawTestId = rest["data-testid"];
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      BaseField,
+      {
+        label: label8,
+        help,
+        error,
+        startIcon,
+        id,
+        className,
+        testId,
+        children: (control) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "textarea",
+          {
+            ...rest,
+            ...control,
+            "data-testid": rawTestId ?? control["data-testid"],
+            ref: textareaRef,
+            rows: rows ?? 4,
+            onChange: (e) => onChange?.(e.target.value)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ...rest,
+            ...control,
+            "data-testid": rawTestId ?? control["data-testid"],
+            ref: inputRef,
+            type,
+            onChange: (e) => onChange?.(e.target.value)
+          }
+        )
+      }
+    );
+  }
+);
 
 // src/components/password-field/index.tsx
 var import_react36 = require("react");
@@ -3319,7 +3391,19 @@ function useStyles29() {
 // src/components/snackbar/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DEFAULT_DURATION = 5e3;
-var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, duration = DEFAULT_DURATION, testId }, ref) {
+var Snackbar = (0, import_react65.forwardRef)(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 = (0, import_react65.useRef)(onClose);
@@ -3346,21 +3430,25 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({ open, message
     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 (0, import_react_dom2.createPortal)(
@@ -3369,12 +3457,13 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({ open, message
       {
         ref,
         role: "status",
-        className: root25,
         "data-testid": dataTestId,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
+        ...rest,
+        className: root25,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
           action,