@anywayseo/tools 1.5.1 → 1.5.4

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/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-DLPk8AIs.js");
+const index = require("../index-BbMf3hdf.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, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "../index-DD5l7Azu.mjs";
+import { A, B, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "../index-C95D6IAi.mjs";
 export {
   A as Author,
   B as BonusCard,

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-DLPk8AIs.js → index-BbMf3hdf.js}

@@ -79,12 +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 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", className, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2)) });
+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(
@@ -132,7 +145,6 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
       as: "article",
       h: "full",
       bg: "linear-gradient(90deg, #3b1f47, #731d58)",
-      overflow: "hidden",
       _before: image ? {
         content: '""',
         position: "absolute",
@@ -795,8 +807,8 @@ 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, index2) => /* @__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)) });
@@ -897,7 +909,8 @@ const Table = ({
   bordered = false,
   striped = true,
   scrollable,
-  className
+  className,
+  ...boxProps
 }) => {
   const headerItems = items.slice(0, columnNumber);
   const bodyItems = items.slice(columnNumber);
@@ -907,6 +920,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)) }) }),
@@ -917,7 +931,7 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, className, render }) => {
+const Tabs = ({ items, className, render, ...boxProps }) => {
   const { tabs, panels } = react.useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
@@ -927,7 +941,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)) })
   ] });

package/dist/{index-DD5l7Azu.mjs → index-C95D6IAi.mjs}

@@ -78,12 +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 }) => {
-  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", className, children: items.map((item, index) => /* @__PURE__ */ jsx(Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index)) });
+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(
@@ -131,7 +144,6 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
       as: "article",
       h: "full",
       bg: "linear-gradient(90deg, #3b1f47, #731d58)",
-      overflow: "hidden",
       _before: image ? {
         content: '""',
         position: "absolute",
@@ -794,8 +806,8 @@ 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, index) => /* @__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)) });
@@ -896,7 +908,8 @@ const Table = ({
   bordered = false,
   striped = true,
   scrollable,
-  className
+  className,
+  ...boxProps
 }) => {
   const headerItems = items.slice(0, columnNumber);
   const bodyItems = items.slice(columnNumber);
@@ -906,6 +919,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)) }) }),
@@ -916,7 +930,7 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, className, render }) => {
+const Tabs = ({ items, className, render, ...boxProps }) => {
   const { tabs, panels } = useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
@@ -926,7 +940,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)) })
   ] });

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-DLPk8AIs.js");
+const index = require("./index-BbMf3hdf.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-DCIXk-YH.js");
 const index$2 = require("./index-BWuTDC6H.js");

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "./index-DD5l7Azu.mjs";
+import { A, B, f, C, E, F, a, G, b, c, g, H, L, h, d, P, S, T, e } from "./index-C95D6IAi.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";

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.1",
+  "version": "1.5.4",
   "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"
   }
-}
+}