@anywayseo/tools 1.5.0 → 1.5.3

package/dist/components/base/center/index.d.ts

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
+import { BoxPositionProps } from '../../../types';
 type CenterProps = PropsWithChildren<{
-    className: string;
-}>;
+    className?: string;
+} & BoxPositionProps>;
 declare const Center: FC<CenterProps>;
 export default Center;

package/dist/components/base/grid/index.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { KeyGetter, RenderFunction } from '../../../types';
+import { BoxPositionProps, KeyGetter, RenderFunction } from '../../../types';
 import { ColumnsConfig, SpacingConfig } from './types';
 type GridGetKeyProp<T> = T extends {
     key: Key;
@@ -14,6 +14,6 @@ type GridProps<T> = {
     gap?: SpacingConfig;
     className?: string;
     render: RenderFunction<T>;
-} & GridGetKeyProp<T>;
-declare const Grid: <T>({ items, columns, gap, render, getKey, className }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+} & GridGetKeyProp<T> & BoxPositionProps;
+declare const Grid: <T>({ items, columns, gap, render, getKey, className, ...boxProps }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Grid;

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

@@ -1,3 +1,3 @@
 export { default as Center } from './center';
-export { default as Grid } from './center';
+export { default as Grid } from './grid';
 export { default as LinkButton } from './link-button';

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-CB4bJU2N.js");
+const index = require("../index-C5pGuMKq.js");
 exports.Author = index.Author;
 exports.BonusCard = index.BonusCard;
 exports.Center = index.Center;
@@ -11,7 +11,7 @@ exports.Features = index.Features;
 exports.GameCard = index.GameCard;
 exports.GameDemo = index.GameDemo;
 exports.GameInfo = index.GameInfo;
-exports.Grid = index.Center;
+exports.Grid = index.Grid;
 exports.HowTo = index.HowTo;
 exports.Layout = index.Layout;
 exports.LinkButton = index.LinkButton;

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, f, C, E, F, a, G, b, c, f as f2, H, L, g, d, P, S, T, e } from "../index-CD5ZU1Gw.mjs";
+import { A, B, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "../index-DZkjaSoV.mjs";
 export {
   A as Author,
   B as BonusCard,
@@ -10,10 +10,10 @@ export {
   G as GameCard,
   b as GameDemo,
   c as GameInfo,
-  f2 as Grid,
+  g as Grid,
   H as HowTo,
   L as Layout,
-  g as LinkButton,
+  h as LinkButton,
   d as List,
   P as ProsCons,
   S as Seo,

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

@@ -1,4 +1,4 @@
-import { RenderFunction } from '../../types';
+import { BoxPositionProps, RenderFunction } from '../../types';
 type ListRenderProps<T> = T extends string ? {
     render?: never;
 } : {
@@ -8,6 +8,6 @@ type ListProps<T = string> = {
     items: T[];
     bullet?: string;
     className?: string;
-} & ListRenderProps<T>;
-declare const List: <T>({ items, bullet, render, className }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+} & ListRenderProps<T> & BoxPositionProps;
+declare const List: <T>({ items, bullet, render, className, ...boxProps }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default List;

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

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { BoxPositionProps } from '../../types';
 type TableProps = {
     columnNumber: number;
     items: ReactNode[];
@@ -7,6 +8,6 @@ type TableProps = {
     striped?: boolean;
     scrollable?: boolean;
     className?: string;
-};
+} & BoxPositionProps;
 declare const Table: FC<TableProps>;
 export default Table;

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

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

package/dist/{index-CB4bJU2N.js → index-C5pGuMKq.js}

@@ -79,8 +79,25 @@ const Author = ({ author, ...cardProps }) => {
     )
   ] });
 };
-const Center = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { className, children });
+const Center = ({ children, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { className, ...boxProps, children });
+};
+const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
+const Grid = ({ items, columns = defaultColumns, gap, render, getKey, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.SimpleGrid,
+    {
+      as: "ul",
+      columns,
+      spacing: gap,
+      p: 0,
+      m: 0,
+      listStyleType: "none",
+      className,
+      ...boxProps,
+      children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2))
+    }
+  );
 };
 const LinkButton = ({ label, url, width = "auto" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -791,11 +808,11 @@ const Layout = ({ children }) => {
     /* @__PURE__ */ jsxRuntime.jsx(ScrollToTop, {})
   ] });
 };
-const List = ({ items, bullet = "—", render, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { as: "ul", pl: 0, ml: 2, mb: 4, className, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { as: "li", display: "flex", gap: 1, children: [
+const List = ({ items, bullet = "—", render, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, mb: 4, className, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { children: bullet }),
     render ? render(item) : item
-  ] })) });
+  ] }, index2)) });
 };
 const TitleMap = {
   pros: "advantages",
@@ -893,7 +910,8 @@ const Table = ({
   bordered = false,
   striped = true,
   scrollable,
-  className
+  className,
+  ...boxProps
 }) => {
   const headerItems = items.slice(0, columnNumber);
   const bodyItems = items.slice(columnNumber);
@@ -903,6 +921,7 @@ const Table = ({
       border: bordered ? void 0 : "none",
       ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
       className,
+      ...boxProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(react$1.Table, { variant: striped ? "striped" : "simple", children: [
           /* @__PURE__ */ jsxRuntime.jsx(react$1.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Th, { children: item }, index2)) }) }),
@@ -913,7 +932,7 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, className, render }) => {
+const Tabs = ({ items, className, render, ...boxProps }) => {
   const { tabs, panels } = react.useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
@@ -923,7 +942,7 @@ const Tabs = ({ items, className, render }) => {
     });
     return { tabs: tabs2, panels: panels2 };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", className, ...boxProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react$1.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
     /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanel, { children: render(panel) }, index2)) })
   ] });
@@ -938,6 +957,7 @@ exports.Features = Features;
 exports.GameCard = GameCard;
 exports.GameDemo = GameDemo;
 exports.GameInfo = GameInfo;
+exports.Grid = Grid;
 exports.HowTo = HowTo;
 exports.Layout = Layout;
 exports.LinkButton = LinkButton;

package/dist/{index-CD5ZU1Gw.mjs → index-DZkjaSoV.mjs}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, Center as Center$1, Link, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SimpleGrid, LinkBox, Image, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, Center as Center$1, SimpleGrid, Link, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, Image, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
 import { getImage, GatsbyImage } from "gatsby-plugin-image";
@@ -78,8 +78,25 @@ const Author = ({ author, ...cardProps }) => {
     )
   ] });
 };
-const Center = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(Center$1, { className, children });
+const Center = ({ children, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(Center$1, { className, ...boxProps, children });
+};
+const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
+const Grid = ({ items, columns = defaultColumns, gap, render, getKey, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(
+    SimpleGrid,
+    {
+      as: "ul",
+      columns,
+      spacing: gap,
+      p: 0,
+      m: 0,
+      listStyleType: "none",
+      className,
+      ...boxProps,
+      children: items.map((item, index) => /* @__PURE__ */ jsx(Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index))
+    }
+  );
 };
 const LinkButton = ({ label, url, width = "auto" }) => {
   return /* @__PURE__ */ jsx(
@@ -790,11 +807,11 @@ const Layout = ({ children }) => {
     /* @__PURE__ */ jsx(ScrollToTop, {})
   ] });
 };
-const List = ({ items, bullet = "—", render, className }) => {
-  return /* @__PURE__ */ jsx(List$1, { as: "ul", pl: 0, ml: 2, mb: 4, className, children: items.map((item) => /* @__PURE__ */ jsxs(ListItem, { as: "li", display: "flex", gap: 1, children: [
+const List = ({ items, bullet = "—", render, className, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, mb: 4, className, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
     /* @__PURE__ */ jsx(Box, { children: bullet }),
     render ? render(item) : item
-  ] })) });
+  ] }, index)) });
 };
 const TitleMap = {
   pros: "advantages",
@@ -892,7 +909,8 @@ const Table = ({
   bordered = false,
   striped = true,
   scrollable,
-  className
+  className,
+  ...boxProps
 }) => {
   const headerItems = items.slice(0, columnNumber);
   const bodyItems = items.slice(columnNumber);
@@ -902,6 +920,7 @@ const Table = ({
       border: bordered ? void 0 : "none",
       ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
       className,
+      ...boxProps,
       children: [
         /* @__PURE__ */ jsxs(Table$1, { variant: striped ? "striped" : "simple", children: [
           /* @__PURE__ */ jsx(Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsx(Tr, { children: headerItems.map((item, index) => /* @__PURE__ */ jsx(Th, { children: item }, index)) }) }),
@@ -912,7 +931,7 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, className, render }) => {
+const Tabs = ({ items, className, render, ...boxProps }) => {
   const { tabs, panels } = useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
@@ -922,7 +941,7 @@ const Tabs = ({ items, className, render }) => {
     });
     return { tabs: tabs2, panels: panels2 };
   }, []);
-  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", className, children: [
+  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", className, ...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)) })
   ] });
@@ -945,5 +964,6 @@ export {
   List as d,
   Tabs as e,
   Center as f,
-  LinkButton as g
+  Grid as g,
+  LinkButton as h
 };

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-CB4bJU2N.js");
+const index = require("./index-C5pGuMKq.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-DCIXk-YH.js");
 const index$2 = require("./index-BWuTDC6H.js");
@@ -18,7 +18,7 @@ exports.Features = index.Features;
 exports.GameCard = index.GameCard;
 exports.GameDemo = index.GameDemo;
 exports.GameInfo = index.GameInfo;
-exports.Grid = index.Center;
+exports.Grid = index.Grid;
 exports.HowTo = index.HowTo;
 exports.Layout = index.Layout;
 exports.LinkButton = index.LinkButton;

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { A, B, f, C, E, F, a, G, b, c, f as f2, H, L, g, d, P, S, T, e } from "./index-CD5ZU1Gw.mjs";
+import { A, B, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "./index-DZkjaSoV.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DxLcykuT.mjs";
 import { M } from "./index-wbMOJRW_.mjs";
 import { S as S2, u as u2 } from "./index-Bs4zA1wD.mjs";
-import { f as f3, b as b2, c as c2, a as a3, g as g2, d as d2, p, r as r2, t } from "./index-CJvs4SfG.mjs";
+import { f as f2, b as b2, c as c2, a as a3, g as g2, d as d2, p, r as r2, t } from "./index-CJvs4SfG.mjs";
 import { e as e2, g as g3 } from "./index-BUx1Bxrs.mjs";
 import { default as default2 } from "i18next";
 export {
@@ -19,10 +19,10 @@ export {
   b as GameDemo,
   c as GameInfo,
   G2 as GameVolatility,
-  f2 as Grid,
+  g as Grid,
   H as HowTo,
   L as Layout,
-  g as LinkButton,
+  h as LinkButton,
   d as List,
   M as MdxProvider,
   P as ProsCons,
@@ -31,7 +31,7 @@ export {
   T as Table,
   e as Tabs,
   e2 as extractTheme,
-  f3 as formatDate,
+  f2 as formatDate,
   b2 as formatNumber,
   g3 as generateColorPalette,
   c2 as getCurrencySymbol,

package/dist/types/components/common/index.d.ts

@@ -1,3 +1,8 @@
 import { Key, ReactElement } from 'react';
+import { BoxProps } from '@chakra-ui/react';
 export type KeyGetter<T> = (item: T) => Key;
 export type RenderFunction<T> = (item: T) => ReactElement;
+type BoxPaddingProps = Pick<BoxProps, 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'ps' | 'pe'>;
+type BoxMarginProps = Pick<BoxProps, 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'ms' | 'me'>;
+export type BoxPositionProps = BoxMarginProps & BoxPaddingProps;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "1.5.0",
+  "version": "1.5.3",
   "keywords": [
     "react",
     "ui",
@@ -67,7 +67,11 @@
     "start": "npm pack",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "bump:patch": "npm version patch",
+    "bump:minor": "npm version minor",
+    "bump:major": "npm version major",
+    "postversion": "git push --follow-tags && npm publish"
   },
   "devDependencies": {
     "@types/react": "18.3.12",
@@ -98,4 +102,4 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.0"
   }
-}
+}