namirasoft-site-react 1.3.43 → 1.3.44

package/dist/App.js

@@ -28,9 +28,6 @@ export function App() {
             status: "Done"
         }
     ];
-    function getCell(row, column) {
-        return row[column];
-    }
-    return (_jsx(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", children: _jsx("div", { className: "container", children: _jsx(NSTable, { columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }) }) }));
+    return (_jsx(NSLayoutTitle, { scope: 'Namirasoft Account Console', logo: '', title: "Namirasoft", children: _jsx("div", { className: "container", children: _jsx(NSTable, { columns: columns, rows: rows, getRowKey: row => row.id.toString() }) }) }));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAErB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAErC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,CACH,KAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,YACxE,cAAK,SAAS,EAAC,WAAW,YACtB,KAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GACxI,GACM,CACnB,CAAC;AACN,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,UAAU,GAAG;IAEf,IAAI,OAAO,GAAG;QACV,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACR,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;QACD;YACI,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACjB;KACA,CAAA;IAUD,OAAO,CACH,KAAC,aAAa,IAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,YAAY,YACxE,cAAK,SAAS,EAAC,WAAW,YACtB,KAAC,OAAO,IAAM,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAI,GACjF,GACM,CACnB,CAAC;AACN,CAAC"}

package/dist/components/NSButton.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { BackgroundProps } from "../props/BackgroundProps";
+import { ImageProps } from "../props/ImageProps";
+import { NSButtonProps } from "../props/NSButtonProps";
+export interface NSButtonState {
+    title: string;
+    border?: string;
+    background?: BackgroundProps;
+    icon?: ImageProps;
+}
+export declare class NSButton extends React.Component<NSButtonProps, NSButtonState> {
+    constructor(props: NSButtonProps);
+    setTitle(title: string): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Style from "./NSButton.module.css";
+export class NSButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            title: props.title,
+            border: props.border,
+            background: props.background,
+            icon: props.icon,
+        };
+    }
+    setTitle(title) {
+        this.setState({ title });
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (_jsxs("button", { onClick: e => this.props.onClick(e), className: Style.ns_button, style: {
+                border: this.state.border,
+                backgroundColor: (_a = this.state.background) === null || _a === void 0 ? void 0 : _a.color,
+                backgroundImage: (_b = this.state.background) === null || _b === void 0 ? void 0 : _b.image,
+                backdropFilter: (_c = this.state.background) === null || _c === void 0 ? void 0 : _c.filter,
+                backgroundPosition: (_d = this.state.background) === null || _d === void 0 ? void 0 : _d.position,
+            }, children: [this.state.icon && _jsx("img", { src: this.state.icon.src, alt: this.state.icon.alt }), this.state.title] }));
+    }
+}
+//# sourceMappingURL=NSButton.js.map

package/dist/components/NSButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSButton.js","sourceRoot":"","sources":["../../src/components/NSButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAkC1C,MAAM,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAuC;IAEvE,YAAY,KAAoB;QAE5B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;SACnB,CAAC;IACN,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACQ,MAAM;;QAEX,OAAO,CACH,kBAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EACnE,KAAK,EAAE;gBACH,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;gBACzB,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,cAAc,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,MAAM;gBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACtD,aAEG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,EAEjF,IAAI,CAAC,KAAK,CAAC,KAAK,IACX,CACb,CAAA;IACL,CAAC;CACJ"}

package/dist/components/NSButton.module.css

@@ -0,0 +1,12 @@
+.ns_button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+    padding: 12px 48px;
+}

package/dist/components/NSCard.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { LinkType } from '../types/Link';
+import { LinkProps } from '../props/LinkProps';
 export interface NSCardProps {
     id?: string | number;
     title?: string;
@@ -12,7 +12,7 @@ export interface NSCardProps {
         src: string;
         alt: string;
     };
-    link?: LinkType;
+    link?: LinkProps;
 }
 export declare class NSCard extends Component<NSCardProps> {
     render(): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSEntityCardBackground.d.ts

@@ -1,14 +1,14 @@
 import { Component } from 'react';
-import { BackgroundType } from '../types/Background';
-import { LinkType } from '../types/Link';
+import { BackgroundProps } from '../props/BackgroundProps';
+import { LinkProps } from '../props/LinkProps';
 export interface NSEntityCardBackgroundProps {
     id?: string | number;
     title: string;
-    link?: LinkType;
-    background?: BackgroundType;
+    link?: LinkProps;
+    background?: BackgroundProps;
 }
 export interface NSEntityCardBackgroundState {
-    background?: BackgroundType;
+    background?: BackgroundProps;
 }
 export declare class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState> {
     constructor(props: NSEntityCardBackgroundProps);

package/dist/components/NSHeader.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { FilterLinkRow } from 'namirasoft-api-link';
-import { BackgroundType } from "../types/Background";
+import { BackgroundProps } from "../props/BackgroundProps";
 export interface NSHeaderProps {
     scope: string;
     name: string;
     logo: string;
     account?: boolean;
-    background?: BackgroundType;
+    background?: BackgroundProps;
 }
 export interface NSHeaderState {
     filters: FilterLinkRow[];

package/dist/components/NSLinkBlue.d.ts

@@ -1,9 +1,9 @@
-import { LinkType } from "../types/Link";
+import { LinkProps } from "../props/LinkProps";
 import React from "react";
-export interface NSLinkBlueProps extends LinkType {
+export interface NSLinkBlueProps extends LinkProps {
     style?: React.CSSProperties;
 }
-export interface NSLinkBlueState extends LinkType {
+export interface NSLinkBlueState extends LinkProps {
 }
 export declare class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> {
     constructor(props: NSLinkBlueProps);

package/dist/components/NSLoading.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 interface NSLoadingProps {
-    background?: BackgroundType;
+    background?: BackgroundProps;
 }
 export declare class NSLoading extends Component<NSLoadingProps> {
     render(): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSection.d.ts

@@ -1,12 +1,12 @@
 import { Component, ReactNode } from "react";
-import { BackgroundType } from "../types/Background";
+import { BackgroundProps } from "../props/BackgroundProps";
 export interface NSSectionProps {
     children: ReactNode;
-    background?: BackgroundType;
+    background?: BackgroundProps;
     center_items?: boolean;
 }
 export interface NSSectionState {
-    background?: BackgroundType;
+    background?: BackgroundProps;
 }
 export declare class NSSection extends Component<NSSectionProps, NSSectionState> {
     constructor(props: NSSectionProps);

package/dist/components/NSSectionBars.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 import { NSEntityBarProps } from './NSEntityBar';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 export interface NSSectionBarsProps {
-    background?: BackgroundType;
+    background?: BackgroundProps;
     bars: NSEntityBarProps[];
 }
 export declare class NSSectionBars extends Component<NSSectionBarsProps> {

package/dist/components/NSSectionBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionBars.js","sourceRoot":"","sources":["../../src/components/NSSectionBars.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AASxC,MAAM,OAAO,aAAc,SAAQ,SAA6B;IACtD,MAAM;;QAEd,OAAO,CACN,4BACC,KAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,YAC3C,cAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,YAEjF,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEhE,GACK,GACV,CACH,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSectionBars.js","sourceRoot":"","sources":["../../src/components/NSSectionBars.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AASxC,MAAM,OAAO,aAAc,SAAQ,SAA6B;IAEtD,MAAM;;QAEd,OAAO,CACN,4BACC,KAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,YAC3C,cAAK,SAAS,EAAE,mCAAmC,MAAM,CAAC,uBAAuB,EAAE,YAEjF,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAkB,GAAG,GAAf,GAAG,CAAC,EAAE,CAAa,CAAC,GAEhE,GACK,GACV,CACH,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSectionCards.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { NSCardProps } from './NSCard';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 export interface NSSectionCardsProps {
     title?: {
         text: string;
@@ -10,7 +10,7 @@ export interface NSSectionCardsProps {
         text: string;
         color?: string;
     };
-    background?: BackgroundType;
+    background?: BackgroundProps;
     button?: {
         href: string;
         title: string;

package/dist/components/NSSectionTitle.d.ts

@@ -1,11 +1,11 @@
 import { Component, ReactNode } from 'react';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 export interface NSSectionTitleProps {
     title: {
         text: string;
         color?: string;
     };
-    background?: BackgroundType;
+    background?: BackgroundProps;
     children: ReactNode;
 }
 export declare class NSSectionTitle extends Component<NSSectionTitleProps> {

package/dist/components/NSSectionTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSectionTitle.js","sourceRoot":"","sources":["../../src/components/NSSectionTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,OAAO,cAAe,SAAQ,SAA8B;IACxD,MAAM;QAEd,OAAO,CACN,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,EACvE,IAAI,CAAC,KAAK,CAAC,QAAQ,IACT,CACZ,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSectionTitle.js","sourceRoot":"","sources":["../../src/components/NSSectionTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,OAAO,cAAe,SAAQ,SAA8B;IAExD,MAAM;QAEd,OAAO,CACN,MAAC,SAAS,IAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,aAC3C,KAAC,OAAO,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAI,EACvE,IAAI,CAAC,KAAK,CAAC,QAAQ,IACT,CACZ,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSTable.d.ts

@@ -5,10 +5,10 @@ export interface NSTableProps<RowType> {
     };
     rows: RowType[];
     getRowKey: (row: RowType, rowIndex: number) => string;
-    getColumnAttributes: (column: string, columnIndex: number) => {
+    getColumnAttributes?: (column: string, columnIndex: number) => {
         [key: string]: string;
     };
-    getCell: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
+    getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
 }
 export interface NSTableState<RowType> {
     columns: {

package/dist/components/NSTable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import NSButtonGroup from './NSButtonGroup';
+import { NSButton } from './NSButton';
 import { NSInputSearch } from './NSInputSearch';
 import { NSPagination } from './NSPagination';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
@@ -19,7 +19,17 @@ export class NSTable extends Component {
     }
     render() {
         let column_keys = Object.keys(this.state.columns);
-        return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_button_group, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSButtonGroup, {})] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
+        let getColumnAttributes = (column, columnIndex) => {
+            if (this.props.getColumnAttributes)
+                return this.props.getColumnAttributes(column, columnIndex);
+            return {};
+        };
+        let getCell = (row, column, rowIndex, columnIndex) => {
+            if (this.props.getCell)
+                return this.props.getCell(row, column, rowIndex, columnIndex);
+            return row[column];
+        };
+        return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_button_group, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, background: { color: "" }, border: '1px solid rgba(255, 148, 50, 1)' })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
     }
 }
 //# sourceMappingURL=NSTable.js.map

package/dist/components/NSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}

package/dist/main.d.ts

@@ -1,7 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
-export * from "./components/NSButtonGroup";
+export * from "./components/NSButton";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js

@@ -1,7 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
-export * from "./components/NSButtonGroup";
+export * from "./components/NSButton";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/dist/{types/Background.d.ts → props/BackgroundProps.d.ts}

@@ -1,4 +1,4 @@
-export interface BackgroundType {
+export interface BackgroundProps {
     image?: string;
     color?: string;
     position?: string;

package/dist/props/BackgroundProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BackgroundProps.js.map

package/dist/props/BackgroundProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundProps.js","sourceRoot":"","sources":["../../src/props/BackgroundProps.ts"],"names":[],"mappings":""}

package/dist/props/ImageProps.d.ts

@@ -0,0 +1,4 @@
+export interface ImageProps {
+    src: string;
+    alt?: string;
+}

package/dist/props/ImageProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageProps.js.map

package/dist/props/ImageProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageProps.js","sourceRoot":"","sources":["../../src/props/ImageProps.ts"],"names":[],"mappings":""}

package/dist/{types/Link.d.ts → props/LinkProps.d.ts}

@@ -1,4 +1,4 @@
-export interface LinkType {
+export interface LinkProps {
     title?: string;
     href: string;
     target?: string;

package/dist/props/LinkProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LinkProps.js.map

package/dist/props/LinkProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkProps.js","sourceRoot":"","sources":["../../src/props/LinkProps.ts"],"names":[],"mappings":""}

package/dist/props/NSButtonProps.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BackgroundProps } from "./BackgroundProps";
+import { ImageProps } from "./ImageProps";
+export interface NSButtonProps {
+    title: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    border?: string;
+    background?: BackgroundProps;
+    icon?: ImageProps;
+}

package/dist/props/NSButtonProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NSButtonProps.js.map

package/dist/props/NSButtonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSButtonProps.js","sourceRoot":"","sources":["../../src/props/NSButtonProps.ts"],"names":[],"mappings":""}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.43",
+    "version": "1.3.44",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -11,7 +11,6 @@ export function App()
         "message": "Message",
         "cent": "Cent",
         "status": "Status",
-
     }
     let rows = [{
         id: 1,
@@ -39,14 +38,10 @@ export function App()
         cent: string,
         status: string
     }
-    function getCell(row: Row, column: string): any
-    {
-        return (row as any)[column];
-    }
     return (
         <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
             <div className="container">
-                <NSTable columns={columns} rows={rows} getCell={getCell} getColumnAttributes={() => { return {} }} getRowKey={row => row.id.toString()} />
+                <NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
             </div>
         </NSLayoutTitle>
     );

package/src/components/NSButton.module.css

@@ -0,0 +1,12 @@
+.ns_button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+    padding: 12px 48px;
+}

package/src/components/NSButton.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import Style from "./NSButton.module.css";
+import { BackgroundProps } from "../props/BackgroundProps";
+import { ImageProps } from "../props/ImageProps";
+import { NSButtonProps } from "../props/NSButtonProps";
+
+
+// export enum NSButtonBackgroundColor;
+// {
+//      red = "#FF0000",
+//      blue ="	#0000FF",
+//      green ="#008000",
+//      black ="#000000",
+//      white ="#fffaf0",
+//      orange ="#ff8c00",
+//      yellow ="#FFFF00",
+// }
+// export enum NSButtonBackgroundSize;
+// {
+//      xsmal = "",
+//      small ="",
+//      medium ="",
+//      large ="",
+//      xlarge ="",
+//      xxlarge ="",
+//      xxxlarge ="",
+// }
+export interface NSButtonState
+{
+    title: string;
+    border?: string;
+    background?: BackgroundProps;
+    icon?: ImageProps;
+}
+
+export class NSButton extends React.Component<NSButtonProps, NSButtonState>
+{
+    constructor(props: NSButtonProps)
+    {
+        super(props);
+        this.state = {
+            title: props.title,
+            border: props.border,
+            background: props.background,
+            icon: props.icon,
+        };
+    }
+    setTitle(title: string)
+    {
+        this.setState({ title });
+    }
+    override render()
+    {
+        return (
+            <button onClick={e => this.props.onClick(e)} className={Style.ns_button}
+                style={{
+                    border: this.state.border,
+                    backgroundColor: this.state.background?.color,
+                    backgroundImage: this.state.background?.image,
+                    backdropFilter: this.state.background?.filter,
+                    backgroundPosition: this.state.background?.position,
+                }}>
+                {
+                    this.state.icon && <img src={this.state.icon.src} alt={this.state.icon.alt} />
+                }
+                {this.state.title}
+            </button >
+        )
+    }
+}

package/src/components/NSCard.tsx

@@ -2,7 +2,7 @@
 import { Component } from 'react';
 import Styles from './NSCard.module.css'
 import { NSLinkBlue } from './NSLinkBlue';
-import { LinkType } from '../types/Link';
+import { LinkProps } from '../props/LinkProps';
 
 export interface NSCardProps
 {
@@ -17,7 +17,7 @@ export interface NSCardProps
 		src: string;
 		alt: string;
 	};
-	link?: LinkType
+	link?: LinkProps
 }
 
 export class NSCard extends Component<NSCardProps>

package/src/components/NSEntityCardBackground.tsx

@@ -2,23 +2,23 @@
 
 import { Component } from 'react';
 import Styles from './NSEntityCardBackground.module.css'
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 import { NSLinkBlue } from './NSLinkBlue';
-import { LinkType } from '../types/Link';
+import { LinkProps } from '../props/LinkProps';
 
 
 export interface NSEntityCardBackgroundProps
 {
 	id?: string | number;
 	title: string;
-	link?: LinkType
+	link?: LinkProps
 
-	background?: BackgroundType;
+	background?: BackgroundProps;
 }
 
 export interface NSEntityCardBackgroundState
 {
-	background?: BackgroundType;
+	background?: BackgroundProps;
 }
 
 export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState>

package/src/components/NSHeader.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Styles from "./NSHeader.module.css";
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
-import { BackgroundType } from "../types/Background";
+import { BackgroundProps } from "../props/BackgroundProps";
 
 export interface NSHeaderProps
 {
@@ -12,7 +12,7 @@ export interface NSHeaderProps
     name: string;
     logo: string;
     account?: boolean;
-    background?: BackgroundType;
+    background?: BackgroundProps;
 }
 
 export interface NSHeaderState

package/src/components/NSLinkBlue.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { LinkType } from "../types/Link";
+import { LinkProps } from "../props/LinkProps";
 import Styles from "./NSLinkBlue.module.css";
 import React from "react";
 
-export interface NSLinkBlueProps extends LinkType
+export interface NSLinkBlueProps extends LinkProps
 {
 	style?: React.CSSProperties;
 }
 
-export interface NSLinkBlueState extends LinkType
+export interface NSLinkBlueState extends LinkProps
 {
 
 }

package/src/components/NSLoading.tsx

@@ -3,11 +3,11 @@
 import { Component } from 'react';
 import Styles from './NSLoading.module.css';
 import { NSSection } from './NSSection';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 
 interface NSLoadingProps
 {
-	background?: BackgroundType;
+	background?: BackgroundProps;
 }
 
 export class NSLoading extends Component<NSLoadingProps>

package/src/components/NSSection.tsx

@@ -2,18 +2,18 @@
 
 import { Component, ReactNode } from "react";
 import Styles from './NSSection.module.css'
-import { BackgroundType } from "../types/Background";
+import { BackgroundProps } from "../props/BackgroundProps";
 
 export interface NSSectionProps
 {
 	children: ReactNode;
-	background?: BackgroundType;
+	background?: BackgroundProps;
 	center_items?: boolean;
 }
 
 export interface NSSectionState
 {
-	background?: BackgroundType;
+	background?: BackgroundProps;
 }
 
 export class NSSection extends Component<NSSectionProps, NSSectionState>

package/src/components/NSSectionBars.tsx

@@ -4,15 +4,16 @@ import { Component } from 'react';
 import Styles from './NSSectionBars.module.css';
 import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
 import { NSSection } from './NSSection';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 
 export interface NSSectionBarsProps
 {
-	background?: BackgroundType;
+	background?: BackgroundProps;
 	bars: NSEntityBarProps[]
 }
 
-export class NSSectionBars extends Component<NSSectionBarsProps> {
+export class NSSectionBars extends Component<NSSectionBarsProps>
+{
 	override render()
 	{
 		return (

package/src/components/NSSectionCards.tsx

@@ -6,7 +6,7 @@ import { NSTitle } from './NSTitle';
 import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 
 export interface NSSectionCardsProps
 {
@@ -18,7 +18,7 @@ export interface NSSectionCardsProps
 		text: string,
 		color?: string
 	};
-	background?: BackgroundType
+	background?: BackgroundProps
 	button?: {
 		href: string;
 		title: string;

package/src/components/NSSectionTitle.tsx

@@ -3,7 +3,7 @@
 import { Component, ReactNode } from 'react';
 import { NSSection } from './NSSection';
 import { NSTitle } from './NSTitle';
-import { BackgroundType } from '../types/Background';
+import { BackgroundProps } from '../props/BackgroundProps';
 
 export interface NSSectionTitleProps
 {
@@ -11,11 +11,12 @@ export interface NSSectionTitleProps
 		text: string,
 		color?: string
 	};
-	background?: BackgroundType
+	background?: BackgroundProps
 	children: ReactNode
 }
 
-export class NSSectionTitle extends Component<NSSectionTitleProps> {
+export class NSSectionTitle extends Component<NSSectionTitleProps>
+{
 	override render()
 	{
 		return (

package/src/components/NSTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import NSButtonGroup from './NSButtonGroup';
+import { NSButton } from './NSButton';
 import { NSInputSearch } from './NSInputSearch';
 import { NSPagination } from './NSPagination';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
@@ -12,8 +12,8 @@ export interface NSTableProps<RowType>
     columns: { [key: string]: string };
     rows: RowType[];
     getRowKey: (row: RowType, rowIndex: number) => string;
-    getColumnAttributes: (column: string, columnIndex: number) => { [key: string]: string };
-    getCell: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
+    getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
+    getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
 }
 
 export interface NSTableState<RowType>
@@ -41,6 +41,18 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
     override render()
     {
         let column_keys = Object.keys(this.state.columns);
+        let getColumnAttributes = (column: string, columnIndex: number) => 
+        {
+            if (this.props.getColumnAttributes)
+                return this.props.getColumnAttributes(column, columnIndex);
+            return {};
+        }
+        let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
+        {
+            if (this.props.getCell)
+                return this.props.getCell(row, column, rowIndex, columnIndex);
+            return (row as any)[column];
+        }
         return (
             <div className={`container ${Styles.ns_project_list_container}`}>
                 <section className={Styles.ns_search_input}>
@@ -59,8 +71,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                                 <tr key={this.props.getRowKey(row, rowIndex)} onClick={() => this.setState({ modalState: !this.state.modalState })}>
                                     {
                                         column_keys.map((column, columnIndex) => (
-                                            <td {...this.props.getColumnAttributes(column, columnIndex)} data-label={this.state.columns[column]}>
-                                                {this.props.getCell(row, column, rowIndex, columnIndex)}
+                                            <td {...getColumnAttributes(column, columnIndex)} data-label={this.state.columns[column]}>
+                                                {getCell(row, column, rowIndex, columnIndex)}
                                             </td>
                                         ))
                                     }
@@ -72,7 +84,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                 <section className={Styles.ns_button_group}>
                     <NSPagination size={50} page={5} />
                     <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <NSButtonGroup />
+                    <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} background={{ color: "" }} border='1px solid rgba(255, 148, 50, 1)' />
                 </section>
                 <NSSpace size={NSSpaceSizeType.SMALL} />
                 <section onClick={() => this.setState({ modalState: !this.state.modalState })} className={Styles.ns_modal} style={{ display: this.state.modalState ? "block" : "none" }}>

package/src/main.ts

@@ -1,7 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
-export * from "./components/NSButtonGroup";
+export * from "./components/NSButton";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/src/{types/Background.ts → props/BackgroundProps.ts}

@@ -1,4 +1,4 @@
-export interface BackgroundType
+export interface BackgroundProps
 {
 	image?: string,
 	color?: string,

package/src/props/ImageProps.ts

@@ -0,0 +1,5 @@
+export interface ImageProps
+{
+    src: string;
+    alt?: string;
+}

package/src/{types/Link.ts → props/LinkProps.ts}

@@ -1,4 +1,4 @@
-export interface LinkType
+export interface LinkProps
 {
 	title?: string;
 	href: string;

package/src/props/NSButtonProps.ts

@@ -0,0 +1,11 @@
+import { BackgroundProps } from "./BackgroundProps";
+import { ImageProps } from "./ImageProps";
+
+export interface NSButtonProps
+{
+    title: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    border?: string;
+    background?: BackgroundProps;
+    icon?: ImageProps;
+}

package/dist/components/NSButtonGroup.d.ts

@@ -1,2 +0,0 @@
-declare function NSButtonGroup(): import("react/jsx-runtime").JSX.Element;
-export default NSButtonGroup;

package/dist/components/NSButtonGroup.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Styles from './NSButtonGroup.module.css';
-function NSButtonGroup() {
-    return (_jsxs("div", { className: Styles.ns_button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.ns_export_button, children: [_jsx("img", { src: "/assets/images/export-vector.png", alt: "Export Table Data", width: 13, height: 16 }), "Export"] }), _jsxs("button", { onClick: () => window.location.reload(), className: Styles.ns_refresh_button, children: [_jsx("img", { src: "/assets/images/refresh-vector.png", alt: "Refresh Table Contnet", width: 15, height: 16 }), "Refresh"] })] }));
-}
-export default NSButtonGroup;
-//# sourceMappingURL=NSButtonGroup.js.map

package/dist/components/NSButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSButtonGroup.js","sourceRoot":"","sources":["../../src/components/NSButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,SAAS,aAAa;IAElB,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,aAC1C,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACvL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACtM,CACT,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/components/NSButtonGroup.module.css

@@ -1,38 +0,0 @@
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-between;
-}
-
-.ns_button_group_desktop button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
-}
-
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
-}
-
-.ns_project img {
-    margin-right: 8px;
-}
-
-@media only screen and (min-width:768px) {
-    .ns_button_group_desktop {
-        gap: 24px;
-    }
-}

package/dist/types/Background.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Background.js.map

package/dist/types/Background.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../src/types/Background.ts"],"names":[],"mappings":""}

package/dist/types/Link.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Link.js.map

package/dist/types/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/types/Link.ts"],"names":[],"mappings":""}

package/src/components/NSButtonGroup.module.css

@@ -1,38 +0,0 @@
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-between;
-}
-
-.ns_button_group_desktop button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
-}
-
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
-}
-
-.ns_project img {
-    margin-right: 8px;
-}
-
-@media only screen and (min-width:768px) {
-    .ns_button_group_desktop {
-        gap: 24px;
-    }
-}

package/src/components/NSButtonGroup.tsx

@@ -1,12 +0,0 @@
-import Styles from './NSButtonGroup.module.css'
-function NSButtonGroup()
-{
-    return (
-        <div className={Styles.ns_button_group_desktop}>
-            <button onClick={() => window.print()} className={Styles.ns_export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
-            <button onClick={() => window.location.reload()} className={Styles.ns_refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
-        </div>
-    );
-}
-
-export default NSButtonGroup;