@gobolt/genesis 0.3.21 → 0.3.23

package/dist/components/Button/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/Button/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/Button/components/Button/styles.d.ts

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

package/dist/components/Button/components/Button/styles.js

@@ -0,0 +1,118 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Button as AntButton } from "antd";
+const getPadding = (size, $themeType, sizing, $isIconButton) => {
+    if ($isIconButton && (size === "normal" || size === "large")) {
+        return `${sizing.Size2}px ${sizing.Size2}px`;
+    }
+    if ($isIconButton && size === "small") {
+        return `${sizing.Size1}px ${sizing.Size1}px`;
+    }
+    // utility button padding is different from the main button
+    if ($themeType === "utility" && size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size2}px`;
+    }
+    if ($themeType === "utility" && (size === "normal" || size === "large")) {
+        return `${sizing.Size2_5}px ${sizing.Size3}px`;
+    }
+    if (size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size4}px`;
+    }
+    if (size === "normal" || size === "large") {
+        return `${sizing.Size2_5}px ${sizing.Size6}px`;
+    }
+    return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getHeight = (size) => {
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getWidth = (size, $isIconButton) => {
+    if (!$isIconButton) {
+        return `auto`;
+    }
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isIconButton) => {
+    const backgroundColor = colors[$themeType][$state].backgroundColor;
+    return `
+      &.ant-btn {
+      
+        color: ${colors[$themeType][$state].color};
+        font-size: ${sizing.Size4}px;
+        line-height: ${sizing.Size6}px;
+        letter-spacing: 0;
+        font-weight: 400;
+        border-width: 1px;
+        line-height: 1 !important;
+
+        width: ${getWidth(size, $isIconButton)}; !important;
+        height: ${getHeight(size)}; !important;
+
+        background-color: ${colors[$themeType][$state].backgroundColor};
+        padding: ${getPadding(size, $themeType, sizing, $isIconButton)};
+
+        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, $isIconButton, size) => `
+    &.ant-btn {
+      font-family: 'Inter', sans-serif;
+ 
+      ${getVariant(theme, $themeType, $state, size, $isIconButton)}
+    } 
+`;
+export const Button = styled(AntButton) `
+  ${({ theme, $themeType, $state, children, $isIconButton, size }) => {
+    return getGenesisButtonClass(theme, $themeType, $state, $isIconButton, size);
+}}
+`;

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

@@ -0,0 +1,163 @@
+export declare const TYPE: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    destructive: string;
+    utility: string;
+    icon: string;
+};
+export declare const BREAKPOINTS: {
+    wide: string;
+    medium: string;
+    narrow: string;
+};
+export declare const STATE: {
+    active: string;
+    hover: string;
+    pressed: string;
+    focussed: string;
+    disabled: string;
+    error: string;
+    success: string;
+    warning: string;
+    progress: string;
+    info: string;
+    filled: string;
+    generic: string;
+    removed: string;
+    hollow: string;
+};
+export declare const TYPOGRAPHY_VARIANT: {
+    display1: string;
+    display2: string;
+    display3: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    subHeading1: string;
+    subHeading2: string;
+    subHeading3: string;
+    body1: string;
+    body2: string;
+    body3: string;
+    body4: string;
+    body5: string;
+    message: string;
+    overline1: string;
+    overline2: string;
+    overline3: string;
+    label1: string;
+    label2: string;
+    label3: string;
+    link1: string;
+    link2: string;
+    link3: string;
+    digits1: string;
+    digits2: string;
+    digits3: string;
+};
+export declare const BUTTON_VARIANT: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
+export declare const SIZE: {
+    small: string;
+    medium: string;
+    large: string;
+    standard: string;
+};
+export declare const BADGE: {
+    appointment: string;
+    asn: string;
+    inventory: string;
+    parcel: string;
+    product: string;
+    route: string;
+    shipment: string;
+    shoppingCart: string;
+    system: string;
+};
+declare const _default: {
+    TYPE: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        destructive: string;
+        utility: string;
+        icon: string;
+    };
+    BREAKPOINTS: {
+        wide: string;
+        medium: string;
+        narrow: string;
+    };
+    STATE: {
+        active: string;
+        hover: string;
+        pressed: string;
+        focussed: string;
+        disabled: string;
+        error: string;
+        success: string;
+        warning: string;
+        progress: string;
+        info: string;
+        filled: string;
+        generic: string;
+        removed: string;
+        hollow: string;
+    };
+    TYPOGRAPHY_VARIANT: {
+        display1: string;
+        display2: string;
+        display3: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        subHeading1: string;
+        subHeading2: string;
+        subHeading3: string;
+        body1: string;
+        body2: string;
+        body3: string;
+        body4: string;
+        body5: string;
+        message: string;
+        overline1: string;
+        overline2: string;
+        overline3: string;
+        label1: string;
+        label2: string;
+        label3: string;
+        link1: string;
+        link2: string;
+        link3: string;
+        digits1: string;
+        digits2: string;
+        digits3: string;
+    };
+    BUTTON_VARIANT: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    SIZE: {
+        small: string;
+        medium: string;
+        large: string;
+        standard: string;
+    };
+    BADGE: {
+        appointment: string;
+        asn: string;
+        inventory: string;
+        parcel: string;
+        product: string;
+        route: string;
+        shipment: string;
+        shoppingCart: string;
+        system: string;
+    };
+};
+export default _default;

package/dist/components/Button/constants/index.js

@@ -0,0 +1,89 @@
+export const TYPE = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+    destructive: "destructive",
+    utility: "utility",
+    icon: "icon",
+};
+export const BREAKPOINTS = {
+    wide: "wide",
+    medium: "medium",
+    narrow: "narrow",
+};
+export const STATE = {
+    active: "active",
+    hover: "hover",
+    pressed: "pressed",
+    focussed: "focus",
+    disabled: "disabled",
+    error: "error",
+    success: "success",
+    warning: "warning",
+    progress: "progress",
+    info: "info",
+    filled: "filled",
+    generic: "generic",
+    removed: "removed",
+    hollow: "hollow",
+};
+export const TYPOGRAPHY_VARIANT = {
+    display1: "display1",
+    display2: "display2",
+    display3: "display3",
+    heading1: "heading1",
+    heading2: "heading2",
+    heading3: "heading3",
+    subHeading1: "subHeading1",
+    subHeading2: "subHeading2",
+    subHeading3: "subHeading3",
+    body1: "body1",
+    body2: "body2",
+    body3: "body3",
+    body4: "body4",
+    body5: "body5",
+    message: "message",
+    overline1: "overline1",
+    overline2: "overline2",
+    overline3: "overline3",
+    label1: "label1",
+    label2: "label2",
+    label3: "label3",
+    link1: "link1",
+    link2: "link2",
+    link3: "link3",
+    digits1: "digits1",
+    digits2: "digits2",
+    digits3: "digits3",
+};
+export const BUTTON_VARIANT = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+};
+export const SIZE = {
+    small: "small",
+    medium: "medium",
+    large: "large",
+    standard: "standard",
+};
+export const BADGE = {
+    appointment: "appointment",
+    asn: "asn",
+    inventory: "inventory",
+    parcel: "parcel",
+    product: "product",
+    route: "route",
+    shipment: "shipment",
+    shoppingCart: "shopping cart",
+    system: "system",
+};
+export default {
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
+};

package/dist/components/Table/Table/Table.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { ColumnType } from "antd/es/table";
+import type { TablePaginationConfig } from "antd/es/table";
+import { PaginationStyle } from "./TableControls/CustomPagination";
+import type { ActionEvent } from "@/lib/types";
+export type Change = (actionEvent: ActionEvent) => void;
+export type SelectionType = "checkbox" | "radio";
+export interface TableProps<T extends Record<string, any>> {
+    dataSource: T[];
+    columns: ColumnType<T>[];
+    rowKey?: keyof T | ((record: T) => React.Key);
+    size?: "small" | "middle" | "large";
+    rowSelection?: {
+        type?: SelectionType;
+        selectedRowKeys?: React.Key[];
+        onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        getCheckboxProps?: (record: T) => {
+            disabled?: boolean;
+            name?: string;
+        };
+    };
+    onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
+    loading?: boolean;
+    pagination?: (TablePaginationConfig & {
+        paginationStyle?: PaginationStyle;
+    }) | false;
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    bordered?: boolean;
+    locale?: {
+        emptyText?: React.ReactNode;
+    };
+    [key: string]: any;
+    isMainContentCell?: boolean;
+}
+export type TablePaginationType = {
+    pageSize?: number;
+    current?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+};
+export type SorterResult<T> = {
+    column?: ColumnType<T>;
+    order?: "ascend" | "descend" | null;
+    field?: keyof T | string | React.Key | readonly React.Key[];
+    columnKey?: React.Key;
+};
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/Table/Table/Table.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
+function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
+    const paginationConfig = pagination === false
+        ? false
+        : {
+            ...pagination,
+            itemRender: undefined, // Clear any existing itemRender to avoid conflicts
+            render: (properties) => (_jsx(CustomPagination, { ...properties, paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE })),
+        };
+    return (_jsx(S.Table, { "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell, ...rest }));
+}
+export default Table;

package/dist/components/Table/Table/TableControls/CustomPagination.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { PaginationProps } from "antd";
+export declare enum PaginationStyle {
+    SIMPLE = "simple",// Shows just 1-5
+    TRUNCATED = "truncated",// Shows 1-5...20
+    CENTERED = "centered",// Shows 1...4-5-6-7-8...20
+    END_FOCUSED = "endFocused"
+}
+interface CustomPaginationProperties extends Omit<PaginationProps, "itemRender"> {
+    paginationStyle?: PaginationStyle;
+}
+declare const CustomPagination: React.FC<CustomPaginationProperties>;
+export default CustomPagination;

package/dist/components/Table/Table/TableControls/CustomPagination.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { PaginationNumber } from "./PaginationNumber";
+export var PaginationStyle;
+(function (PaginationStyle) {
+    PaginationStyle["SIMPLE"] = "simple";
+    PaginationStyle["TRUNCATED"] = "truncated";
+    PaginationStyle["CENTERED"] = "centered";
+    PaginationStyle["END_FOCUSED"] = "endFocused";
+})(PaginationStyle || (PaginationStyle = {}));
+const PaginationContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  gap: 0 0;
+`;
+const ChevronButton = styled.button `
+  background: transparent;
+  border: none;
+  color: ${({ theme, disabled }) => disabled ? theme.colors.onsurface["copy-light"] || "#B0B0B0" : "#222"};
+  font-size: 32px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  margin-right: ${({ $right }) => ($right ? "0" : "8px")};
+  margin-left: ${({ $right }) => ($right ? "8px" : "0")};
+  transition: color 0.2s;
+`;
+const ChevronIcon = ({ left = false }) => (_jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: left ? "M17.5 21L11.5 14L17.5 7" : "M10.5 7L16.5 14L10.5 21", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const getSimplePages = (current, total) => {
+    // Always show 1-5, but don't exceed total
+    const pages = [];
+    for (let index = 1; index <= Math.min(5, total); index++) {
+        pages.push(index);
+    }
+    return pages;
+};
+const CustomPagination = ({ paginationStyle = PaginationStyle.SIMPLE, current = 1, total = 1, pageSize = 10, onChange, ...properties }) => {
+    const pageCount = Math.ceil(total / pageSize);
+    const handleChange = (page) => {
+        if (onChange)
+            onChange(page, pageSize);
+    };
+    if (paginationStyle === PaginationStyle.SIMPLE) {
+        const pages = getSimplePages(current, pageCount);
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.TRUNCATED) {
+        // Show 1 2 3 4 5 ... last
+        const pages = [];
+        for (let index = 1; index <= Math.min(5, pageCount); index++) {
+            pages.push(index);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), pageCount > 5 && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingBottom: 10,
+                            }, children: "..." }), _jsx(PaginationNumber, { active: current === pageCount, onClick: () => handleChange(pageCount), "aria-label": `Page ${pageCount}`, children: pageCount }, pageCount)] })), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.CENTERED) {
+        // Show 1 ... left mid mid mid mid ... last
+        // Always show 5 numbers, current centered if possible
+        const pages = [];
+        const visibleCount = 5;
+        const sideCount = 2; // numbers to show on each side of current
+        let start = Math.max(2, current - 2);
+        let end = Math.min(pageCount - 1, current + 2);
+        // Adjust if near the start
+        if (current <= 3) {
+            start = 2;
+            end = 6;
+        }
+        // Adjust if near the end
+        if (current >= pageCount - 2) {
+            start = pageCount - 4;
+            end = pageCount - 1;
+        }
+        start = Math.max(2, start);
+        end = Math.min(pageCount - 1, end);
+        // Always show first page
+        pages.push(1);
+        // Show left ellipsis if needed
+        if (start > 2) {
+            pages.push("left-ellipsis");
+        }
+        // Show middle pages
+        for (let index = start; index <= end; index++) {
+            pages.push(index);
+        }
+        // Show right ellipsis if needed
+        if (end < pageCount - 1) {
+            pages.push("right-ellipsis");
+        }
+        // Always show last page if more than 1
+        if (pageCount > 1) {
+            pages.push(pageCount);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
+                    if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7FB0",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                height: "40px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingBottom: 10,
+                            }, children: "..." }, number_ + index));
+                    }
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.END_FOCUSED) {
+        // Show 1 ... last 5 pages
+        const pages = [];
+        // Always show first page
+        pages.push(1);
+        // If more than 6 pages, show ellipsis
+        if (pageCount > 6) {
+            pages.push("left-ellipsis");
+        }
+        // Show last 5 pages
+        const start = Math.max(2, pageCount - 4);
+        for (let index = start; index <= pageCount; index++) {
+            pages.push(index);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
+                    if (number_ === "left-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 18,
+                                margin: "0 8px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "40px",
+                                paddingBottom: 10,
+                            }, children: "..." }, number_ + index));
+                    }
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    // Fallback for other styles (not implemented yet)
+    return null;
+};
+export default CustomPagination;

package/dist/components/Table/Table/TableControls/PaginationNumber.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PaginationNumberProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    children: React.ReactNode;
+}
+export declare const PaginationNumber: React.FC<PaginationNumberProperties>;
+export {};

package/dist/components/Table/Table/TableControls/PaginationNumber.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Typography from "../../Typography";
+const NumberButton = styled.button `
+  background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
+  color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};
+  border: none;
+  border-radius: 4px;
+  min-width: 24px;
+  height: 24px;
+  padding: 4px 7px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 4px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ $active, theme }) => $active
+    ? theme.colors.primary.default.backgroundColor
+    : theme.colors.primary.default.backgroundColor + "22"};
+    color: #fff;
+  }
+`;
+export const PaginationNumber = ({ active, children, ...properties }) => (_jsx(NumberButton, { "$active": active, "aria-current": active ? "page" : undefined, ...properties, children: _jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children: children }) }));