react-better-html 1.1.74 → 1.1.76

package/dist/index.d.mts

@@ -609,6 +609,8 @@ type TableProps<DataItem> = {
     /** @default false */
     isStriped?: boolean;
     /** @default false */
+    isLoading?: boolean;
+    /** @default false */
     withStickyHeader?: boolean;
     /** @default "No data available" */
     noDataItemsMessage?: string;
@@ -649,7 +651,7 @@ declare const useLoaderControls: () => {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
-type BetterHtmlProviderValue = DeepPartialRecord<OmitProps<BetterHtmlConfig, "colorTheme">>;
+type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
     value?: BetterHtmlProviderValue;
     plugins?: BetterHtmlPlugin[];

package/dist/index.d.ts

@@ -609,6 +609,8 @@ type TableProps<DataItem> = {
     /** @default false */
     isStriped?: boolean;
     /** @default false */
+    isLoading?: boolean;
+    /** @default false */
     withStickyHeader?: boolean;
     /** @default "No data available" */
     noDataItemsMessage?: string;
@@ -649,7 +651,7 @@ declare const useLoaderControls: () => {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
-type BetterHtmlProviderValue = DeepPartialRecord<OmitProps<BetterHtmlConfig, "colorTheme">>;
+type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
     value?: BetterHtmlProviderValue;
     plugins?: BetterHtmlPlugin[];

package/dist/index.js

@@ -1408,7 +1408,7 @@ var theme = {
     },
     dark: {
       textPrimary: "#f8f8f8",
-      textSecondary: "#e8e8e8",
+      textSecondary: "#c8c8c8",
       textLink: "#0894ff",
       label: "#111111",
       primary: "#9b6499",
@@ -1417,7 +1417,7 @@ var theme = {
       success: "#28a745",
       info: "#0fa0da",
       warn: "#ffc107",
-      error: "#dc3545",
+      error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
       backgroundSecondary: "#222222",
@@ -1626,7 +1626,7 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
   const [loaders, setLoaders] = (0, import_react.useState)(value?.loaders ?? {});
   const [plugins] = (0, import_react.useState)(pluginsToUse ?? []);
   const [colorTheme, setColorTheme] = (0, import_react.useState)(
-    localStorage.getItem("theme") === "dark" ? "dark" : "light"
+    localStorage.getItem("theme") === "dark" ? "dark" : value?.colorTheme ?? "light"
   );
   const readyValue = (0, import_react.useMemo)(
     () => ({
@@ -1679,7 +1679,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");
         }
       });
     });
@@ -3064,7 +3064,7 @@ function PageHeader({
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       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: [
@@ -5981,7 +5981,7 @@ var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultImageWidth = 120;
 var TableStyledComponent = import_styled_components11.default.table.withConfig({
-  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop)
+  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
    width: 100%;
    border-collapse: collapse;
@@ -6009,7 +6009,7 @@ var TableStyledComponent = import_styled_components11.default.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"});
                  }
               ` : ""}
 
@@ -6020,7 +6020,7 @@ var TableStyledComponent = import_styled_components11.default.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 {
@@ -6047,12 +6047,14 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
   columns,
   data,
   isStriped,
+  isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
   onClickRow,
   onClickAllCheckboxes,
   ...props
 }, ref) {
+  const { colorTheme } = useBetterHtmlContext();
   const theme2 = useTheme();
   const [checkedItems, setCheckedItems] = (0, import_react22.useState)([]);
   const renderCellContent = (0, import_react22.useCallback)(
@@ -6124,6 +6126,7 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
           isStriped,
           withHover: onClickRow !== void 0,
           withStickyHeader,
+          colorTheme,
           theme: theme2,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -6143,7 +6146,7 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
               },
               column.type + column.label + index
             )) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "tr",
               {
                 className: onClickRow ? "isClickable" : void 0,