react-better-html 1.1.74 → 1.1.76

package/dist/index.mjs

@@ -1335,7 +1335,7 @@ var theme = {
     },
     dark: {
       textPrimary: "#f8f8f8",
-      textSecondary: "#e8e8e8",
+      textSecondary: "#c8c8c8",
       textLink: "#0894ff",
       label: "#111111",
       primary: "#9b6499",
@@ -1344,7 +1344,7 @@ var theme = {
       success: "#28a745",
       info: "#0fa0da",
       warn: "#ffc107",
-      error: "#dc3545",
+      error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
       backgroundSecondary: "#222222",
@@ -1553,7 +1553,7 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
   const [loaders, setLoaders] = useState(value?.loaders ?? {});
   const [plugins] = useState(pluginsToUse ?? []);
   const [colorTheme, setColorTheme] = useState(
-    localStorage.getItem("theme") === "dark" ? "dark" : "light"
+    localStorage.getItem("theme") === "dark" ? "dark" : value?.colorTheme ?? "light"
   );
   const readyValue = useMemo(
     () => ({
@@ -1606,7 +1606,7 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes") {
-          setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : "light");
+          setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : value?.colorTheme ?? "light");
         }
       });
     });
@@ -2991,7 +2991,7 @@ function PageHeader({
     /* @__PURE__ */ jsxs6(
       Div_default.column,
       {
-        justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+        alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
         flex: 1,
         gap: theme2.styles.gap / 2,
         children: [
@@ -5908,7 +5908,7 @@ import styled10, { css as css2 } from "styled-components";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
 var TableStyledComponent = styled10.table.withConfig({
-  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop)
+  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
    width: 100%;
    border-collapse: collapse;
@@ -5936,7 +5936,7 @@ var TableStyledComponent = styled10.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):hover {
-                    background-color: ${props.theme.colors.backgroundSecondary}20;
+                    filter: brightness(${props.colorTheme === "light" ? "0.95" : "0.85"});
                  }
               ` : ""}
 
@@ -5947,7 +5947,7 @@ var TableStyledComponent = styled10.table.withConfig({
       }
 
       td {
-         border-top: 1px solid ${(props) => props.theme.colors.border}60;
+         border-top: 1px solid ${(props) => props.theme.colors.border + (props.colorTheme === "light" ? "60" : "40")};
          padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
 
          &.noData {
@@ -5974,12 +5974,14 @@ var TableComponent = forwardRef11(function Table({
   columns,
   data,
   isStriped,
+  isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
   onClickRow,
   onClickAllCheckboxes,
   ...props
 }, ref) {
+  const { colorTheme } = useBetterHtmlContext();
   const theme2 = useTheme();
   const [checkedItems, setCheckedItems] = useState8([]);
   const renderCellContent = useCallback10(
@@ -6051,6 +6053,7 @@ var TableComponent = forwardRef11(function Table({
           isStriped,
           withHover: onClickRow !== void 0,
           withStickyHeader,
+          colorTheme,
           theme: theme2,
           children: [
             /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx19(
@@ -6070,7 +6073,7 @@ var TableComponent = forwardRef11(function Table({
               },
               column.type + column.label + index
             )) }) }),
-            /* @__PURE__ */ jsx19("tbody", { children: data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx19("tbody", { children: isLoading ? /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx19(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ jsx19(
               "tr",
               {
                 className: onClickRow ? "isClickable" : void 0,