@ttoss/components 2.4.0 → 2.4.1

package/dist/esm/NotificationsMenu/index.js

@@ -1,12 +1,12 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { NotificationCard } from "../chunk-E6CBXO5W.js";
-import { Icon } from "../chunk-JOSQSCZQ.js";
+import { NotificationCard } from "../chunk-GOISZ4AR.js";
+import { Icon } from "../chunk-AZTAV4VC.js";
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
 import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var NotificationsMenu = ({
+var NotificationsMenu = /* @__PURE__ */__name(({
   notifications,
   defaultOpen = false,
   hasMore = false,
@@ -22,13 +22,13 @@ var NotificationsMenu = ({
   const containerRef = React.useRef(null);
   const loadMoreRef = React.useRef(null);
   const [showCount, setShowCount] = React.useState(true);
-  const togglePanel = () => {
+  const togglePanel = /* @__PURE__ */__name(() => {
     setIsOpen(prev => {
       const next = !prev;
       onOpenChange?.(next);
       return next;
     });
-  };
+  }, "togglePanel");
   React.useEffect(() => {
     if (!isOpen || !buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
@@ -57,161 +57,149 @@ var NotificationsMenu = ({
   }, [hasMore, onLoadMore, notifications.length]);
   React.useEffect(() => {
     if (!isOpen) return;
-    const handleClickOutside = event => {
+    const handleClickOutside = /* @__PURE__ */__name(event => {
       if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
         setIsOpen(false);
         onOpenChange?.(false);
         onClose?.();
       }
-    };
+    }, "handleClickOutside");
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen, onOpenChange, onClose]);
-  return /* @__PURE__ */jsx(Flex, {
+  return /* @__PURE__ */React.createElement(Flex, {
     sx: {
       position: "relative",
       justifyContent: "flex-start"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "relative"
+    }
+  }, /* @__PURE__ */React.createElement(IconButton, {
+    ref: buttonRef,
+    variant: "ghost",
+    sx: {
+      position: "relative",
+      borderRadius: "full",
+      padding: 1,
+      transition: "background-color 0.3s ease",
+      "&:hover": {
+        backgroundColor: "action.background.muted.default"
+      }
+    },
+    onClick: togglePanel
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      color: "display.text.muted.default"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:bell-outline",
+    width: 22,
+    height: 22
+  })), count > 0 && showCount && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: "-2px",
+      right: "-2px",
+      minWidth: "14px",
+      height: "14px",
+      paddingX: 1,
+      borderRadius: "full",
+      backgroundColor: "action.background.negative.default",
+      color: "feedback.text.primary.default",
+      fontSize: "10px",
+      fontWeight: "bold",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: 1
+    }
+  }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React.createElement("div", {
+    ref: containerRef
+  }, /* @__PURE__ */React.createElement(Card, {
+    sx: {
+      position: "absolute",
+      top: "calc(100% + 8px)",
+      left: openToLeft ? "auto" : 0,
+      right: openToLeft ? 0 : "auto",
+      width: notifications.length === 0 ? ["60vw", "300px"] : ["90vw", "600px"],
+      maxHeight: "550px",
+      overflowY: "auto",
+      zIndex: "modal",
+      padding: 0,
+      boxShadow: "xl",
+      borderRadius: "2xl",
+      backgroundColor: "display.background.secondary.default"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: 4
+    }
+  }, notifications.length > 0 && onClearAll && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      justifyContent: "flex-end",
+      p: 2,
+      marginBottom: -2
+    }
+  }, /* @__PURE__ */React.createElement(Button, {
+    variant: "ghost",
+    sx: {
+      borderRadius: "md",
+      padding: 1,
+      paddingLeft: 10,
+      paddingRight: 10,
+      fontSize: "md",
+      color: "display.text.muted.default",
+      border: "1px solid",
+      borderColor: "display.border.default",
+      transition: "all 0.2s ease",
+      display: "flex",
+      alignItems: "center",
+      "&:hover": {
+        backgroundColor: "action.background.muted.default",
+        color: "display.text.default",
+        borderColor: "action.border.default"
+      }
     },
-    children: /* @__PURE__ */jsxs(Box, {
-      sx: {
-        position: "relative"
-      },
-      children: [/* @__PURE__ */jsxs(IconButton, {
-        ref: buttonRef,
-        variant: "ghost",
-        sx: {
-          position: "relative",
-          borderRadius: "full",
-          padding: 1,
-          transition: "background-color 0.3s ease",
-          "&:hover": {
-            backgroundColor: "action.background.muted.default"
-          }
-        },
-        onClick: togglePanel,
-        children: [/* @__PURE__ */jsx(Box, {
-          sx: {
-            color: "display.text.muted.default"
-          },
-          children: /* @__PURE__ */jsx(Icon, {
-            icon: "mdi:bell-outline",
-            width: 22,
-            height: 22
-          })
-        }), count > 0 && showCount && /* @__PURE__ */jsx(Box, {
-          sx: {
-            position: "absolute",
-            top: "-2px",
-            right: "-2px",
-            minWidth: "14px",
-            height: "14px",
-            paddingX: 1,
-            borderRadius: "full",
-            backgroundColor: "action.background.negative.default",
-            color: "feedback.text.primary.default",
-            fontSize: "10px",
-            fontWeight: "bold",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            lineHeight: 1
-          },
-          children: count > 99 ? "99+" : count
-        })]
-      }), isOpen && /* @__PURE__ */jsx("div", {
-        ref: containerRef,
-        children: /* @__PURE__ */jsx(Card, {
-          sx: {
-            position: "absolute",
-            top: "calc(100% + 8px)",
-            left: openToLeft ? "auto" : 0,
-            right: openToLeft ? 0 : "auto",
-            width: notifications.length === 0 ? ["60vw", "300px"] : ["90vw", "600px"],
-            maxHeight: "550px",
-            overflowY: "auto",
-            zIndex: "modal",
-            padding: 0,
-            boxShadow: "xl",
-            borderRadius: "2xl",
-            backgroundColor: "display.background.secondary.default"
-          },
-          children: /* @__PURE__ */jsx(Box, {
-            sx: {
-              width: "100%"
-            },
-            children: /* @__PURE__ */jsxs(Flex, {
-              sx: {
-                flexDirection: "column",
-                gap: 4
-              },
-              children: [notifications.length > 0 && onClearAll && /* @__PURE__ */jsx(Flex, {
-                sx: {
-                  justifyContent: "flex-end",
-                  p: 2,
-                  marginBottom: -2
-                },
-                children: /* @__PURE__ */jsxs(Button, {
-                  variant: "ghost",
-                  sx: {
-                    borderRadius: "md",
-                    padding: 1,
-                    paddingLeft: 10,
-                    paddingRight: 10,
-                    fontSize: "md",
-                    color: "display.text.muted.default",
-                    border: "1px solid",
-                    borderColor: "display.border.default",
-                    transition: "all 0.2s ease",
-                    display: "flex",
-                    alignItems: "center",
-                    "&:hover": {
-                      backgroundColor: "action.background.muted.default",
-                      color: "display.text.default",
-                      borderColor: "action.border.default"
-                    }
-                  },
-                  onClick: onClearAll,
-                  children: [/* @__PURE__ */jsx(Icon, {
-                    icon: "delete",
-                    width: 16,
-                    height: 16
-                  }), /* @__PURE__ */jsx(Text, {
-                    sx: {
-                      ml: -1,
-                      marginTop: -0.4,
-                      fontSize: "sm"
-                    },
-                    children: "Limpar Tudo"
-                  })]
-                })
-              }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
-                sx: {
-                  color: "display.text.muted.default",
-                  textAlign: "center",
-                  p: 4
-                },
-                children: "Nenhuma notifica\xE7\xE3o"
-              }) : notifications.map(notification => {
-                return /* @__PURE__ */jsx(NotificationCard, {
-                  ...notification,
-                  onClose: () => {
-                    notification.onClose?.();
-                    onClose?.();
-                  }
-                }, notification.id);
-              }), hasMore && /* @__PURE__ */jsx("div", {
-                ref: loadMoreRef,
-                style: {
-                  height: 1
-                }
-              })]
-            })
-          })
-        })
-      })]
-    })
-  });
-};
+    onClick: onClearAll
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: "delete",
+    width: 16,
+    height: 16
+  }), /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      ml: -1,
+      marginTop: -0.4,
+      fontSize: "sm"
+    }
+  }, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      color: "display.text.muted.default",
+      textAlign: "center",
+      p: 4
+    }
+  }, "Nenhuma notifica\xE7\xE3o") : notifications.map(notification => {
+    return /* @__PURE__ */React.createElement(NotificationCard, {
+      key: notification.id,
+      ...notification,
+      onClose: /* @__PURE__ */__name(() => {
+        notification.onClose?.();
+        onClose?.();
+      }, "onClose")
+    });
+  }), hasMore && /* @__PURE__ */React.createElement("div", {
+    ref: loadMoreRef,
+    style: {
+      height: 1
+    }
+  })))))));
+}, "NotificationsMenu");
 export { NotificationsMenu };

package/dist/esm/Search/index.js

@@ -1,11 +1,11 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Search/Search.tsx
 import * as React from "react";
 import { Input } from "@ttoss/ui";
 import { useDebounce } from "@ttoss/react-hooks";
-import { jsx } from "react/jsx-runtime";
-var Search = ({
+var Search = /* @__PURE__ */__name(({
   value,
   defaultValue,
   loading,
@@ -17,13 +17,13 @@ var Search = ({
   React.useEffect(() => {
     onChange(debouncedValue);
   }, [debouncedValue, onChange]);
-  return /* @__PURE__ */jsx(Input, {
+  return /* @__PURE__ */React.createElement(Input, {
     leadingIcon: loading ? "loading" : "search",
     defaultValue: text,
-    onChange: e => {
+    onChange: /* @__PURE__ */__name(e => {
       return setText(e.target.value);
-    },
+    }, "onChange"),
     ...props
   });
-};
+}, "Search");
 export { Search };

package/dist/esm/Table/index.js

@@ -1,57 +1,57 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Table/Table.tsx
 import { Box } from "@ttoss/ui";
 import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { jsx } from "react/jsx-runtime";
-var Table = props => {
-  return /* @__PURE__ */jsx(Box, {
+var Table = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "table",
     ...props
   });
-};
-var TableHead = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "Table");
+var TableHead = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "thead",
     ...props
   });
-};
-var TableBody = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableHead");
+var TableBody = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "tbody",
     ...props
   });
-};
-var TableRow = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableBody");
+var TableRow = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "tr",
     ...props
   });
-};
-var TableCell = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableRow");
+var TableCell = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "td",
     ...props
   });
-};
-var TableHeader = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableCell");
+var TableHeader = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "th",
     ...props
   });
-};
-var TableCaption = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableHeader");
+var TableCaption = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "caption",
     ...props
   });
-};
-var TableFooter = props => {
-  return /* @__PURE__ */jsx(Box, {
+}, "TableCaption");
+var TableFooter = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
     as: "tfoot",
     ...props
   });
-};
+}, "TableFooter");
 Table.Head = TableHead;
 Table.Body = TableBody;
 Table.Row = TableRow;

package/dist/esm/Tabs/index.js

@@ -1,23 +1,23 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Tabs/Tabs.tsx
 import { Box } from "@ttoss/ui";
 import { Tab, TabList, TabPanel, Tabs as ReactTabs } from "react-tabs";
-import { jsx } from "react/jsx-runtime";
-var Tabs = props => {
+var Tabs = /* @__PURE__ */__name(props => {
   const {
     sx: customSx,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Box, {
-    sx: ({
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
       colors
     }) => {
       const themeColors = colors;
       return {
         /**
-         * Tabs
-         */
+        * Tabs
+        */
         ".react-tabs": {
           WebkitTapHighlightColor: "transparent"
         },
@@ -61,14 +61,10 @@ var Tabs = props => {
         },
         ...customSx
       };
-    },
-    ...restProps,
-    children: /* @__PURE__ */jsx(ReactTabs, {
-      ...props,
-      children: props.children
-    })
-  });
-};
+    }, "sx"),
+    ...restProps
+  }, /* @__PURE__ */React.createElement(ReactTabs, props, props.children));
+}, "Tabs");
 Tabs.TabList = TabList;
 Tabs.Tab = Tab;
 Tabs.TabPanel = TabPanel;

package/dist/esm/Toast/index.js

@@ -1,4 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Toast/Toast.tsx
 import { css as createClassName } from "@emotion/css";
@@ -6,8 +7,7 @@ import { css as transformStyleObject } from "@theme-ui/css";
 import { Box, useTheme } from "@ttoss/ui";
 import * as React from "react";
 import { toast as toastReactToastify, ToastContainer as ReactToastifyToastContainer } from "react-toastify";
-import { jsx } from "react/jsx-runtime";
-var ToastContainer = props => {
+var ToastContainer = /* @__PURE__ */__name(props => {
   const {
     theme
   } = useTheme();
@@ -17,9 +17,9 @@ var ToastContainer = props => {
     })(theme);
     return createClassName(styles);
   }, [theme]);
-  return /* @__PURE__ */jsx(Box, {
+  return /* @__PURE__ */React.createElement(Box, {
     className,
-    sx: ({
+    sx: /* @__PURE__ */__name(({
       colors,
       fonts
     }) => {
@@ -28,12 +28,11 @@ var ToastContainer = props => {
         "--toastify-font-family": fonts?.body,
         "--toastify-color-light": themeColors?.feedback?.background?.primary?.default
       };
-    },
-    children: /* @__PURE__ */jsx(ReactToastifyToastContainer, {
-      className,
-      ...props
-    })
-  });
-};
+    }, "sx")
+  }, /* @__PURE__ */React.createElement(ReactToastifyToastContainer, {
+    className,
+    ...props
+  }));
+}, "ToastContainer");
 var toast = toastReactToastify;
 export { ToastContainer, toast };