@gobolt/genesis 0.3.22 → 0.3.23

package/dist/components/Table/styles.js

@@ -1,64 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from "@gobolt/genesis/utils/styled";
 import { Table as AntTable } from "antd";
-export const getGenesisClass = ({ colors, borderRadius, sizing, typography, components }, $isMainContentCell) => {
+export var getGenesisClass = function (_a, $isMainContentCell) {
     // Log the hovered color and the entire tableCell object
-    return `
-    &.ant-table-wrapper {
-      // Add your custom styles here
-    }
-
-    .ant-table {
-      // Add your custom table styles here
-    }
-
-    .ant-table-cell {
-      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
-      color: ${$isMainContentCell
+    var colors = _a.colors, borderRadius = _a.borderRadius, sizing = _a.sizing, typography = _a.typography, components = _a.components;
+    return "\n    &.ant-table-wrapper {\n      // Add your custom styles here\n    }\n\n    .ant-table {\n      // Add your custom table styles here\n    }\n\n    .ant-table-cell {\n      font-size: ".concat($isMainContentCell ? "16px" : "14px", " !important;\n      color: ").concat($isMainContentCell
         ? colors.onsurface.copy
-        : colors.onsurface["copy-light"]} !important;
-      background-color: ${components.tableCell.surface} !important;
-      transition: background-color 0.2s ease;
-    }
-
-    .ant-table-tbody > tr:hover > td,
-    .ant-table-tbody > tr:hover > .ant-table-cell {
-      background-color: ${components.tableCell.hover} !important;
-    }
-
-    .ant-table-cell-selected {
-      background-color: ${components.tableCell.selected} !important;
-    }
-
-    .ant-table-thead > tr > th {
-      // Add your custom header styles here
-      font-family: 'Inter', sans-serif;
-      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
-      font-weight: 400;
-      color: ${$isMainContentCell
+        : colors.onsurface["copy-light"], " !important;\n      background-color: ").concat(components.tableCell.surface, " !important;\n      transition: background-color 0.2s ease;\n    }\n\n    .ant-table-tbody > tr:hover > td,\n    .ant-table-tbody > tr:hover > .ant-table-cell {\n      background-color: ").concat(components.tableCell.hover, " !important;\n    }\n\n    .ant-table-cell-selected {\n      background-color: ").concat(components.tableCell.selected, " !important;\n    }\n\n    .ant-table-thead > tr > th {\n      // Add your custom header styles here\n      font-family: 'Inter', sans-serif;\n      font-size: ").concat($isMainContentCell ? "16px" : "14px", " !important;\n      font-weight: 400;\n      color: ").concat($isMainContentCell
         ? colors.onsurface.copy
-        : colors.onsurface["copy-light"]} !important;
-    }
-
-    .ant-table-tbody > tr  {
-      // Add your custom row styles here
-    }
-
-    .ant-table-tbody > tr > td {
-      // Add your custom cell styles here
-      font-family: 'Inter', sans-serif;
-      font-size: 14px;
-      color: ${colors.onsurface["copy-light"]};
-    }
-
-    .ant-table-tbody > tr.ant-table-row-selected > td,
-    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {
-      background-color: ${components.tableCell.selected} !important;
-      color: #fff !important;
-    }
-  `;
+        : colors.onsurface["copy-light"], " !important;\n    }\n\n    .ant-table-tbody > tr  {\n      // Add your custom row styles here\n    }\n\n    .ant-table-tbody > tr > td {\n      // Add your custom cell styles here\n      font-family: 'Inter', sans-serif;\n      font-size: 14px;\n      color: ").concat(colors.onsurface["copy-light"], ";\n    }\n\n    .ant-table-tbody > tr.ant-table-row-selected > td,\n    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {\n      background-color: ").concat(components.tableCell.selected, " !important;\n      color: #fff !important;\n    }\n  ");
 };
-export const Table = styled(AntTable) `
-  ${({ theme, $isMainContentCell }) => {
+export var Table = styled(AntTable)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, $isMainContentCell = _a.$isMainContentCell;
     return getGenesisClass(theme, $isMainContentCell);
-}}
-`;
+});
+var templateObject_1;

package/dist/components/Table/useTable.js

@@ -1,33 +1,127 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 import { useState, useEffect, useCallback } from "react";
 // Function to sort data by field and order
-const sortData = (data, sorter) => {
+var sortData = function (data, sorter) {
     // Handle case when no sorting is applied
     if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
-        return [...data];
+        return __spreadArray([], __read(data), false);
     }
     // Handle multiple sorters
     if (Array.isArray(sorter)) {
-        return [...data].sort((a, b) => {
-            for (const sort of sorter) {
-                if (!sort.field)
-                    continue;
-                const field = sort.field;
-                const aValue = a[field];
-                const bValue = b[field];
-                if (aValue < bValue)
-                    return sort.order === "ascend" ? -1 : 1;
-                if (aValue > bValue)
-                    return sort.order === "ascend" ? 1 : -1;
+        return __spreadArray([], __read(data), false).sort(function (a, b) {
+            var e_1, _a;
+            try {
+                for (var sorter_1 = __values(sorter), sorter_1_1 = sorter_1.next(); !sorter_1_1.done; sorter_1_1 = sorter_1.next()) {
+                    var sort = sorter_1_1.value;
+                    if (!sort.field)
+                        continue;
+                    var field = sort.field;
+                    var aValue = a[field];
+                    var bValue = b[field];
+                    if (aValue < bValue)
+                        return sort.order === "ascend" ? -1 : 1;
+                    if (aValue > bValue)
+                        return sort.order === "ascend" ? 1 : -1;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (sorter_1_1 && !sorter_1_1.done && (_a = sorter_1.return)) _a.call(sorter_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
             return 0;
         });
     }
     // Handle single sorter
     if (sorter.field) {
-        const field = sorter.field;
-        return [...data].sort((a, b) => {
-            const aValue = a[field];
-            const bValue = b[field];
+        var field_1 = sorter.field;
+        return __spreadArray([], __read(data), false).sort(function (a, b) {
+            var aValue = a[field_1];
+            var bValue = b[field_1];
             if (sorter.order === "ascend") {
                 if (aValue < bValue)
                     return -1;
@@ -45,7 +139,7 @@ const sortData = (data, sorter) => {
             return 0;
         });
     }
-    return [...data];
+    return __spreadArray([], __read(data), false);
 };
 /*
 Example of disableRowSelection function which can be passed to the useTable hook
@@ -54,59 +148,71 @@ const disableRowSelection = (record: any) => ({
       name: record.status.toString(),
 });
 */
-const defaultRowSelection = (record) => ({
+var defaultRowSelection = function (record) { return ({
     disabled: false, // Add your disable logic here
     name: record.id,
-});
-export const useTable = (useTableConfig) => {
-    const [isLoading, setLoading] = useState(true);
-    const { columns, filters = null, fetchUrl = "/table/data", fetchOptions = {
+}); };
+export var useTable = function (useTableConfig) {
+    var _a = __read(useState(true), 2), isLoading = _a[0], setLoading = _a[1];
+    var _b = useTableConfig, columns = _b.columns, _c = _b.filters, filters = _c === void 0 ? null : _c, _d = _b.fetchUrl, fetchUrl = _d === void 0 ? "/table/data" : _d, _e = _b.fetchOptions, fetchOptions = _e === void 0 ? {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
         body: JSON.stringify(filters),
-    }, selectionType = "checkbox", simulateDelay = 0, disableRowSelection = defaultRowSelection, disableAutoFetch = false, dataSource: initialDataSource = [], } = useTableConfig;
+    } : _e, _f = _b.selectionType, selectionType = _f === void 0 ? "checkbox" : _f, _g = _b.simulateDelay, simulateDelay = _g === void 0 ? 0 : _g, _h = _b.disableRowSelection, disableRowSelection = _h === void 0 ? defaultRowSelection : _h, _j = _b.disableAutoFetch, disableAutoFetch = _j === void 0 ? false : _j, _k = _b.dataSource, initialDataSource = _k === void 0 ? [] : _k;
     // State to hold the original data and the current data
-    const [originalData, setOriginalData] = useState(initialDataSource);
-    const [data, setData] = useState({
+    var _l = __read(useState(initialDataSource), 2), originalData = _l[0], setOriginalData = _l[1];
+    var _m = __read(useState({
         dataSource: initialDataSource,
-        columns,
+        columns: columns,
         error: null,
-    });
-    const [selectedRows, setSelectedRows] = useState([]);
+    }), 2), data = _m[0], setData = _m[1];
+    var _o = __read(useState([]), 2), selectedRows = _o[0], setSelectedRows = _o[1];
     // Load initial data
-    useEffect(() => {
+    useEffect(function () {
         // If auto-fetch is disabled and we have initial data, skip fetching
         if (disableAutoFetch && initialDataSource.length > 0) {
             setLoading(false);
             return;
         }
-        const fetchData = async () => {
-            try {
-                const response = await fetch(fetchUrl, fetchOptions);
-                const result = await response.json();
-                const sourceData = result.data || [];
-                setOriginalData(sourceData);
-                setData({
-                    dataSource: sourceData,
-                    columns,
-                    error: null,
-                });
-            }
-            catch (error) {
-                console.error("Error fetching table data:", error);
-                // Fallback to static data
-                setData({
-                    dataSource: [],
-                    columns,
-                    error: error instanceof Error ? error : new Error(String(error)),
-                });
-            }
-            finally {
-                setLoading(false);
-            }
-        };
+        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, result, sourceData, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, 4, 5]);
+                        return [4 /*yield*/, fetch(fetchUrl, fetchOptions)];
+                    case 1:
+                        response = _a.sent();
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        result = _a.sent();
+                        sourceData = result.data || [];
+                        setOriginalData(sourceData);
+                        setData({
+                            dataSource: sourceData,
+                            columns: columns,
+                            error: null,
+                        });
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error("Error fetching table data:", error_1);
+                        // Fallback to static data
+                        setData({
+                            dataSource: [],
+                            columns: columns,
+                            error: error_1 instanceof Error ? error_1 : new Error(String(error_1)),
+                        });
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
         if (simulateDelay > 0) {
             setTimeout(fetchData, simulateDelay);
         }
@@ -114,28 +220,19 @@ export const useTable = (useTableConfig) => {
             fetchData();
         }
     }, [fetchOptions, disableAutoFetch, initialDataSource]);
-    const handleRowSelection = useCallback((selectedRowKeys, selectedRows) => {
+    var handleRowSelection = useCallback(function (selectedRowKeys, selectedRows) {
         console.log("Row Selected:", selectedRowKeys, selectedRows);
         setSelectedRows(selectedRows);
     }, []);
     // Function to manually update data source (for external data fetching)
-    const updateDataSource = useCallback((newDataSource) => {
+    var updateDataSource = useCallback(function (newDataSource) {
         setOriginalData(newDataSource);
-        setData((prev) => ({
-            ...prev,
-            dataSource: newDataSource,
-        }));
+        setData(function (prev) { return (__assign(__assign({}, prev), { dataSource: newDataSource })); });
     }, []);
-    const rowSelection = {
+    var rowSelection = {
         type: selectionType,
         onChange: handleRowSelection,
         getCheckboxProps: disableRowSelection,
     };
-    return {
-        ...data,
-        isLoading,
-        rowSelection,
-        selectedRows,
-        updateDataSource,
-    };
+    return __assign(__assign({}, data), { isLoading: isLoading, rowSelection: rowSelection, selectedRows: selectedRows, updateDataSource: updateDataSource });
 };

package/dist/components/TableWithControls/TableWithControls.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import TableControls from "../Table/TableControls";
 import Table from "../Table";
-const TableWithControls = ({ tableData, tableControlsData, onChange, }) => {
-    const { primaryTableRowData, secondaryTableRowData } = tableControlsData;
-    const { dataSource, columns, rowSelection } = tableData;
+var TableWithControls = function (_a) {
+    var tableData = _a.tableData, tableControlsData = _a.tableControlsData, onChange = _a.onChange;
+    var primaryTableRowData = tableControlsData.primaryTableRowData, secondaryTableRowData = tableControlsData.secondaryTableRowData;
+    var dataSource = tableData.dataSource, columns = tableData.columns, rowSelection = tableData.rowSelection;
     // handle changes from the table controls
-    const onTableControlsChange = (event) => {
+    var onTableControlsChange = function (event) {
         onChange(event);
     };
     // handle changes from the table
-    const onTableChange = (pagination, filters, sorter) => {
+    var onTableChange = function (pagination, filters, sorter) {
         onChange({
             event: "tableChange",
-            payload: { pagination, filters, sorter },
+            payload: { pagination: pagination, filters: filters, sorter: sorter },
         });
     };
     return (_jsxs(_Fragment, { children: [_jsx(TableControls, { primaryTableRowData: primaryTableRowData, secondaryTableRowData: secondaryTableRowData, onChange: onTableControlsChange }), _jsx(Table, { dataSource: dataSource, columns: columns, rowSelection: rowSelection, onChange: onTableChange })] }));

package/dist/components/TableWithControls/components/Badge/Badge.d.ts

@@ -0,0 +1,16 @@
+export type State = "success" | "warning" | "error" | "info" | "generic" | "hollow";
+export interface BadgeProps {
+    label?: string;
+    isDisabled?: boolean;
+    state?: State;
+    hasClose?: boolean;
+    hasIcon?: boolean;
+    customIcon?: React.ReactNode | null;
+    size?: "small" | "normal" | "large";
+    backgroundColor?: string;
+    textColor?: string;
+    onClick?: () => void | null;
+    hasHover?: boolean;
+}
+declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, hasIcon, customIcon, backgroundColor, textColor, hasHover, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/TableWithControls/components/Badge/Badge.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as S from "./styles";
+import { Typography } from "@gobolt/genesis/components";
+import { useGenesis } from "@gobolt/genesis/providers";
+import { getBadgeStateIcon } from "@gobolt/genesis/utils/icon-util";
+import { HiOutlineX } from "react-icons/hi";
+const isBadgeIconFilled = false;
+const Badge = ({ label, state = "info", isDisabled, hasClose = false, onClick = () => { }, size = "normal", hasIcon = true, customIcon = null, backgroundColor = null, textColor = null, hasHover = false, ...rest }) => {
+    const { theme } = useGenesis();
+    const role = hasClose ? "button" : "badge";
+    if (!label) {
+        return (_jsx(S.Badge, { label: label, role: "badge", state: state, disabled: isDisabled, style: {
+                padding: "4px 4px",
+            }, "$hasHover": hasHover, ...rest, children: _jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: getBadgeStateIcon(state, backgroundColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon) }) }));
+    }
+    return (_jsxs(S.Badge, { label: label, role: role, onClick: onClick, state: state, disabled: isDisabled, style: { cursor: role === "button" ? "pointer" : "default" }, "$backgroundColor": backgroundColor, "$hasHover": hasHover, ...rest, children: [getBadgeStateIcon(state, isDisabled
+                ? theme.colors.status.disabled.default
+                : textColor || theme.colors.status[state].onsurface, isBadgeIconFilled, hasIcon, customIcon), _jsx(Typography, { variant: size === "small" ? "label3" : "label2", color: isDisabled
+                    ? theme.colors.status.disabled.default
+                    : textColor || theme.colors.status[state].onsurface, 
+                // @ts-ignore
+                isDisabled: isDisabled, children: label }), hasClose ? (_jsx(HiOutlineX, { color: theme.colors.status[state].onsurface })) : null] }));
+};
+export default Badge;

package/dist/components/TableWithControls/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Badge";
+export type { BadgeProps } from "./Badge";

package/dist/components/TableWithControls/components/Badge/index.js

@@ -0,0 +1 @@
+export { default } from "./Badge";

package/dist/components/TableWithControls/components/Badge/styles.d.ts

@@ -0,0 +1,4 @@
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+import { type State } from "./Badge";
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, $backgroundColor?: string, $hasHover?: boolean) => string;
+export declare const Badge: any;

package/dist/components/TableWithControls/components/Badge/styles.js

@@ -0,0 +1,46 @@
+import styled from "@gobolt/genesis/utils/styled";
+const getBorderColor = (theme, state) => {
+    if (state === "hollow") {
+        return theme.colors.inputs.surface.border;
+    }
+    return theme.colors.status[state].surface;
+};
+export const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
+  display: inline-flex; 
+  align-self: inherit;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding-top: ${theme.components.badge["ver-padding"]}px;
+  padding-bottom: ${theme.components.badge["ver-padding"]}px;
+  padding-left: ${theme.components.badge["left-padding"]}px;
+  padding-right: ${theme.components.badge["right-padding"]}px;
+  border-radius: ${theme.components.badge.radius}px;
+  border: 1px solid ${getBorderColor(theme, state)};
+  background-color: ${$backgroundColor || theme.colors.status[state].surface};
+
+  &:not(:disabled):hover {
+    ${$hasHover
+    ? `background-color: ${theme.colors.status[state]["surface-hover"]};`
+    : ""}
+  }
+
+  ${disabled
+    ? `
+    background-color: ${theme.colors.status.disabled.surface} !important;
+    border-color: ${theme.colors.status.disabled} !important;
+    border: none;
+    cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  `
+    : ""}
+`;
+export const Badge = styled.div `
+  ${({ theme, state, label, disabled, $backgroundColor, $hasHover, }) => {
+    return getGenesisClass(theme, state, label, disabled, $backgroundColor, $hasHover);
+}}
+`;

package/dist/components/TableWithControls/components/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import React, { MouseEvent } from "react";
+import type { ButtonProps as AntButtonProperties } from "antd/es/button";
+import { STATE } from "../../constants";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    themeType?: ButtonThemeType;
+    state?: keyof typeof STATE;
+    isIconButton?: boolean;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/TableWithControls/components/Button/Button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+const getState = (state, isSelected) => {
+    if (isSelected) {
+        return "selected";
+    }
+    return state === "active" || state === "disabled" ? state : "active";
+};
+const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
+    const buttonState = getState(state, isSelected);
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
+};
+export default Button;

package/dist/components/TableWithControls/components/Button/IconButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from "./Button";
+export interface IconButtonProps extends Omit<ButtonProps, "themeType" | "size"> {
+    icon: React.ReactNode;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+}
+declare const IconButton: ({ isSelected, state, onClick, icon, size, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/TableWithControls/components/Button/IconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./icon-button-styles";
+import { TYPE } from "../../constants";
+const IconButton = ({ isSelected = false, state = "active", onClick, icon, size = "small", ...rest }) => {
+    const buttonState = state === "active" || state === "disabled" ? state : "active";
+    const themeType = TYPE.icon;
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, size: size, "$isSelected": isSelected, ...rest, children: icon }));
+};
+export default IconButton;

package/dist/components/TableWithControls/components/Button/icon-button-styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;

package/dist/components/TableWithControls/components/Button/icon-button-styles.js

@@ -0,0 +1,76 @@
+import styled from "@gobolt/genesis/utils/styled";
+const getPadding = (size, sizing) => {
+    if (size === "small") {
+        return `${sizing.Size1}px ${sizing.Size1}px`;
+    }
+    return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isSelected) => {
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: ${colors[$themeType][$state].color};
+      font-size: ${sizing.Size4}px;
+      line-height: ${sizing.Size6}px;
+      letter-spacing: 0;
+      font-weight: 400;
+      border-width: 1px;
+      cursor: pointer;
+      width: auto; !important;
+      height: auto; !important;
+
+      background-color:${$isSelected
+        ? colors[$themeType].hover.backgroundColor
+        : colors[$themeType][$state].backgroundColor};
+      padding: ${getPadding(size, sizing)};
+
+      box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+      border-radius: ${borderRadius.BorderRadiusMd}px;
+      gap: ${components.button.gap}px;
+      border-style: solid;
+      border-color: ${colors[$themeType][$state].borderColor};
+      
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: ${colors[$themeType].hover.color};
+        background-color: ${colors[$themeType].hover.backgroundColor};
+        border-color: ${colors[$themeType].hover.borderColor};
+      }
+
+      &:active {
+        color: ${colors[$themeType].pressed.color};
+        background-color: ${colors[$themeType].pressed.backgroundColor};
+        border-color: ${colors[$themeType].pressed.borderColor};
+      }
+
+      &:focus-visible {
+        outline: none;
+        color: ${colors[$themeType].focussed.color};
+        background-color: ${colors[$themeType].focussed.backgroundColor};
+        box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        border-color: ${colors[$themeType].focussed.borderColor};
+        transition: box-shadow 0.2s ease-in-out;
+      }
+
+      &:disabled {
+        color: ${colors[$themeType].disabled.color};
+        background-color: ${colors[$themeType].disabled.backgroundColor};
+        border-color: ${colors[$themeType].disabled.borderColor};
+        cursor: not-allowed;
+      }
+    `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, size, $isSelected) => `
+    font-family: 'Inter', sans-serif;
+    ${getVariant(theme, $themeType, $state, size, $isSelected)}
+`;
+export const Button = styled.button `
+  ${({ theme, $themeType, $state, size, $isSelected }) => {
+    return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
+}}
+`;

package/dist/components/TableWithControls/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";
+export { default as IconButton } from "./IconButton";
+export type { IconButtonProps } from "./IconButton";