react-better-html 1.1.291 → 1.1.292

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme30,
+  useTheme as useTheme31,
   useLoader as useLoader2,
   useLoaderControls,
   countries as countries3,
@@ -8767,11 +8767,79 @@ var SideMenu2 = memo27(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
+
+// src/components/DeveloperPage.tsx
+import { memo as memo28 } from "react";
+import { useBetterCoreContext as useBetterCoreContext11, useTheme as useTheme30 } from "react-better-core";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+function DeveloperPage({ iconSize = 24, assetSize = 120, sections }) {
+  const theme2 = useTheme30();
+  const { devMode, icons: icons2, assets: assets2 } = useBetterCoreContext11();
+  const gridGap = theme2.styles.space;
+  const iconNameFontSie = 12;
+  return devMode ? /* @__PURE__ */ jsxs25(Div_default.column, { gap: theme2.styles.space, children: [
+    /* @__PURE__ */ jsx29(Div_default.box, { title: "Icons", titleAs: "h2", description: "List of all icons in the config", children: /* @__PURE__ */ jsx29(Div_default.row, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: gridGap, children: Object.keys(icons2).map((icon) => /* @__PURE__ */ jsxs25(
+      Div_default.row,
+      {
+        position: "relative",
+        width: iconSize + gridGap * 2 + iconNameFontSie,
+        height: iconSize + gridGap * 2 + iconNameFontSie,
+        alignItems: "center",
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ jsx29(Icon_default, { name: icon, color: theme2.colors.primary, size: iconSize }),
+          /* @__PURE__ */ jsx29(
+            Text_default,
+            {
+              position: "absolute",
+              width: "100%",
+              top: `calc(100% - ${iconNameFontSie}px)`,
+              fontSize: iconNameFontSie,
+              textAlign: "center",
+              wordBreak: "break-all",
+              color: theme2.colors.textSecondary,
+              children: icon
+            }
+          )
+        ]
+      },
+      icon
+    )) }) }),
+    /* @__PURE__ */ jsx29(Div_default.box, { title: "Assets", titleAs: "h2", description: "List of all assets in the config", children: /* @__PURE__ */ jsx29(Div_default.row, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: gridGap, children: Object.keys(assets2).map((asset) => /* @__PURE__ */ jsxs25(
+      Div_default.column,
+      {
+        position: "relative",
+        width: assetSize,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: theme2.styles.gap,
+        children: [
+          /* @__PURE__ */ jsx29(Image_default, { name: asset, width: "100%", height: assetSize, objectFit: "contain" }),
+          /* @__PURE__ */ jsx29(
+            Text_default,
+            {
+              width: "100%",
+              fontSize: iconNameFontSie,
+              textAlign: "center",
+              wordBreak: "break-all",
+              color: theme2.colors.textSecondary,
+              children: asset
+            }
+          )
+        ]
+      },
+      asset
+    )) }) }),
+    sections?.map((section) => /* @__PURE__ */ jsx29(Div_default.box, { title: section.title, titleAs: "h2", description: section.description, children: section.children }, section.title))
+  ] }) : void 0;
+}
+var DeveloperPage_default = memo28(DeveloperPage);
 export {
   BetterHtmlProvider_default as BetterHtmlProvider,
   Button_default as Button,
   Chip_default as Chip,
   ColorThemeSwitch_default as ColorThemeSwitch,
+  DeveloperPage_default as DeveloperPage,
   Div_default as Div,
   Divider_default as Divider,
   Dropdown_default as Dropdown,
@@ -8836,7 +8904,7 @@ export {
   useMediaQuery,
   usePageResize,
   usePageScroll,
-  useTheme30 as useTheme,
+  useTheme31 as useTheme,
   useUrlQuery
 };
 //# sourceMappingURL=index.mjs.map