@anywayseo/tools 2.3.0 → 2.4.0

package/dist/components/game-demo/index.d.ts

@@ -1,9 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactElement } from 'react';
 import { BoxPositionProps, ImageFit } from '../../types';
+type GamePreviewImageProps = {
+    previewImage: string;
+    previewImageFit?: ImageFit;
+} | {
+    previewImage: ReactElement;
+    previewImageFit?: never;
+};
 type GameDemoProps = {
     name: string;
     src: string;
-    previewImageFit?: ImageFit;
-} & BoxPositionProps;
+} & BoxPositionProps & GamePreviewImageProps;
 declare const GameDemo: FC<GameDemoProps>;
 export default GameDemo;

package/dist/components/game-demo/preview/index.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, ReactElement } from 'react';
 import { ImageFit } from '../../../types';
 type GameDemoPreviewProps = {
+    image: string | ReactElement;
     alt: string;
     imageFit?: ImageFit;
     onPlay: VoidFunction;

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-C5BWCSo_.js");
+const index = require("../index-BKBWEEyT.js");
 exports.Author = index.Author;
 exports.BonusCard = index.BonusCard;
 exports.Center = index.Center;

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-DaSzU8Hb.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-DF1kFmrH.mjs";
 export {
   A as Author,
   B as BonusCard,

package/dist/components/tabs/index.d.ts

@@ -1,7 +1,10 @@
 import { BoxPositionProps, ITabItem, RenderFunction } from '../../types';
 type TabsProps<T> = {
     items: ITabItem<T>[];
+} & BoxPositionProps & (T extends unknown[] ? {
     render: RenderFunction<T>;
-} & BoxPositionProps;
+} : {
+    render?: never;
+});
 declare const Tabs: <T>({ items, render, ...boxProps }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/{index-C5BWCSo_.js → index-BKBWEEyT.js}

@@ -363,18 +363,15 @@ const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscre
     /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const GameDemoPreview = ({ alt, imageFit = "contain", onPlay }) => {
-  var _a;
-  const { assets } = index.useSiteContext();
+const GameDemoPreview = ({ image, alt, imageFit = "contain", onPlay }) => {
   const { t } = reactI18next.useTranslation("gameDemo");
-  const gamePreviewImage = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.gamePreview;
-  const gamePreviewImageComponent = typeof gamePreviewImage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: gamePreviewImage, alt, objectFit: imageFit }) : gamePreviewImage;
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: image, alt, objectFit: imageFit }) : image;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    gamePreviewImageComponent,
+    imageComponent,
     /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(PulseButton, { label: t("action.playForFree"), onClick: onPlay }) })
   ] });
 };
-const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
+const GameDemo = ({ name, src, previewImage, previewImageFit, ...boxProps }) => {
   const [isRunning, setIsRunning] = react$1.useState(false);
   const [isLoaded, setIsLoaded] = react$1.useState(false);
   const { isOpen: isFullscreen, onToggle } = react.useDisclosure({ defaultIsOpen: false });
@@ -406,7 +403,7 @@ const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
           onLoad,
           onToggleFullscreen: handleToggleFullscreen
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { alt: name, imageFit: previewImageFit, onPlay: handlePlay })
+      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { image: previewImage, alt: name, imageFit: previewImageFit, onPlay: handlePlay })
     }
   );
 };
@@ -495,10 +492,11 @@ const GameInfo = ({ info }) => {
 };
 const HowTo = ({ steps, ...boxProps }) => {
   const { color, bgColor } = index$2.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, image }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { flex: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: image, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : image,
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: description })
     ] })
   ] }, index2)) });
@@ -981,7 +979,7 @@ const Tabs = ({ items, render, ...boxProps }) => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Tabs, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.TabPanel, { children: render(panel) }, index2)) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.TabPanel, { children: render ? render(panel) : panel }, index2)) })
   ] });
 };
 exports.Author = Author;

package/dist/{index-DaSzU8Hb.mjs → index-DF1kFmrH.mjs}

@@ -362,18 +362,15 @@ const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscre
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const GameDemoPreview = ({ alt, imageFit = "contain", onPlay }) => {
-  var _a;
-  const { assets } = useSiteContext();
+const GameDemoPreview = ({ image, alt, imageFit = "contain", onPlay }) => {
   const { t: t2 } = useTranslation("gameDemo");
-  const gamePreviewImage = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.gamePreview;
-  const gamePreviewImageComponent = typeof gamePreviewImage === "string" ? /* @__PURE__ */ jsx(Image, { src: gamePreviewImage, alt, objectFit: imageFit }) : gamePreviewImage;
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit }) : image;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    gamePreviewImageComponent,
+    imageComponent,
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(PulseButton, { label: t2("action.playForFree"), onClick: onPlay }) })
   ] });
 };
-const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
+const GameDemo = ({ name, src, previewImage, previewImageFit, ...boxProps }) => {
   const [isRunning, setIsRunning] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const { isOpen: isFullscreen, onToggle } = useDisclosure({ defaultIsOpen: false });
@@ -405,7 +402,7 @@ const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
           onLoad,
           onToggleFullscreen: handleToggleFullscreen
         }
-      ) : /* @__PURE__ */ jsx(GameDemoPreview, { alt: name, imageFit: previewImageFit, onPlay: handlePlay })
+      ) : /* @__PURE__ */ jsx(GameDemoPreview, { image: previewImage, alt: name, imageFit: previewImageFit, onPlay: handlePlay })
     }
   );
 };
@@ -494,10 +491,11 @@ const GameInfo = ({ info }) => {
 };
 const HowTo = ({ steps, ...boxProps }) => {
   const { color, bgColor } = usePrimaryColors();
-  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index) => /* @__PURE__ */ jsxs(Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, image }, index) => /* @__PURE__ */ jsxs(Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
     /* @__PURE__ */ jsx(Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index + 1) }),
     /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
       /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : image,
       /* @__PURE__ */ jsx(Text, { children: description })
     ] })
   ] }, index)) });
@@ -980,7 +978,7 @@ const Tabs = ({ items, render, ...boxProps }) => {
   }, []);
   return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
     /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
-    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render(panel) }, index)) })
+    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render ? render(panel) : panel }, index)) })
   ] });
 };
 export {

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-C5BWCSo_.js");
+const index = require("./index-BKBWEEyT.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-uq_uSyaC.js");
 const index$2 = require("./index-m97PmVsd.js");

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-DaSzU8Hb.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-DF1kFmrH.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DjBQjd1k.mjs";
 import { M } from "./index-C-e_0aJJ.mjs";

package/dist/types/components/how-to/index.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from 'react';
 export interface IHowToStep {
     title: string;
     description?: string;
-    image?: string;
+    image?: string | ReactElement;
 }

package/dist/types/site/index.d.ts

@@ -7,7 +7,6 @@ type Image = ImageUrl | ImageComponent;
 export interface ISiteAssets {
     images?: {
         logo?: Image;
-        gamePreview?: Image;
         expert?: Image;
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "keywords": [
     "react",
     "ui",