@gobolt/genesis 0.2.21 → 0.3.0

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

@@ -0,0 +1,321 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsxRuntime = require("react/jsx-runtime");
+var styled = require("styled-components");
+var PaginationNumber = require("./PaginationNumber.cjs");
+var PaginationStyle = /* @__PURE__ */ ((PaginationStyle2) => {
+  PaginationStyle2["SIMPLE"] = "simple";
+  PaginationStyle2["TRUNCATED"] = "truncated";
+  PaginationStyle2["CENTERED"] = "centered";
+  PaginationStyle2["END_FOCUSED"] = "endFocused";
+  return PaginationStyle2;
+})(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 }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "28",
+    height: "28",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.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) => {
+  const pages = [];
+  for (let index = 1; index <= Math.min(5, total); index++) {
+    pages.push(index);
+  }
+  return pages;
+};
+const CustomPagination = ({
+  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 === "simple") {
+    const pages = getSimplePages(current, pageCount);
+    return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_) => /* @__PURE__ */ jsxRuntime.jsx(
+        PaginationNumber.PaginationNumber,
+        {
+          active: number_ === current,
+          onClick: () => handleChange(number_),
+          "aria-label": `Page ${number_}`,
+          children: number_
+        },
+        number_
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "truncated") {
+    const pages = [];
+    for (let index = 1; index <= Math.min(5, pageCount); index++) {
+      pages.push(index);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_) => /* @__PURE__ */ jsxRuntime.jsx(
+        PaginationNumber.PaginationNumber,
+        {
+          active: number_ === current,
+          onClick: () => handleChange(number_),
+          "aria-label": `Page ${number_}`,
+          children: number_
+        },
+        number_
+      )),
+      pageCount > 5 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              color: "#7F7F7F",
+              fontWeight: 600,
+              fontSize: 16,
+              margin: "0 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              paddingBottom: 10
+            },
+            children: "..."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PaginationNumber.PaginationNumber,
+          {
+            active: current === pageCount,
+            onClick: () => handleChange(pageCount),
+            "aria-label": `Page ${pageCount}`,
+            children: pageCount
+          },
+          pageCount
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "centered") {
+    const pages = [];
+    let start = Math.max(2, current - 2);
+    let end = Math.min(pageCount - 1, current + 2);
+    if (current <= 3) {
+      start = 2;
+      end = 6;
+    }
+    if (current >= pageCount - 2) {
+      start = pageCount - 4;
+      end = pageCount - 1;
+    }
+    start = Math.max(2, start);
+    end = Math.min(pageCount - 1, end);
+    pages.push(1);
+    if (start > 2) {
+      pages.push("left-ellipsis");
+    }
+    for (let index = start; index <= end; index++) {
+      pages.push(index);
+    }
+    if (end < pageCount - 1) {
+      pages.push("right-ellipsis");
+    }
+    if (pageCount > 1) {
+      pages.push(pageCount);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_, index) => {
+        if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
+          return /* @__PURE__ */ jsxRuntime.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 /* @__PURE__ */ jsxRuntime.jsx(
+          PaginationNumber.PaginationNumber,
+          {
+            active: number_ === current,
+            onClick: () => typeof number_ === "number" && handleChange(number_),
+            "aria-label": `Page ${number_}`,
+            children: number_
+          },
+          number_
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "endFocused") {
+    const pages = [];
+    pages.push(1);
+    if (pageCount > 6) {
+      pages.push("left-ellipsis");
+    }
+    const start = Math.max(2, pageCount - 4);
+    for (let index = start; index <= pageCount; index++) {
+      pages.push(index);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_, index) => {
+        if (number_ === "left-ellipsis") {
+          return /* @__PURE__ */ jsxRuntime.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 /* @__PURE__ */ jsxRuntime.jsx(
+          PaginationNumber.PaginationNumber,
+          {
+            active: number_ === current,
+            onClick: () => typeof number_ === "number" && handleChange(number_),
+            "aria-label": `Page ${number_}`,
+            children: number_
+          },
+          number_
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  return null;
+};
+exports.PaginationStyle = PaginationStyle;
+exports.default = CustomPagination;

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { 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/TableControls/CustomPagination.js

@@ -0,0 +1,321 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { PaginationNumber } from "./PaginationNumber.js";
+var PaginationStyle = /* @__PURE__ */ ((PaginationStyle2) => {
+  PaginationStyle2["SIMPLE"] = "simple";
+  PaginationStyle2["TRUNCATED"] = "truncated";
+  PaginationStyle2["CENTERED"] = "centered";
+  PaginationStyle2["END_FOCUSED"] = "endFocused";
+  return PaginationStyle2;
+})(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 }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "28",
+    height: "28",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ 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) => {
+  const pages = [];
+  for (let index = 1; index <= Math.min(5, total); index++) {
+    pages.push(index);
+  }
+  return pages;
+};
+const CustomPagination = ({
+  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 === "simple") {
+    const pages = getSimplePages(current, pageCount);
+    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_) => /* @__PURE__ */ jsx(
+        PaginationNumber,
+        {
+          active: number_ === current,
+          onClick: () => handleChange(number_),
+          "aria-label": `Page ${number_}`,
+          children: number_
+        },
+        number_
+      )),
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "truncated") {
+    const pages = [];
+    for (let index = 1; index <= Math.min(5, pageCount); index++) {
+      pages.push(index);
+    }
+    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_) => /* @__PURE__ */ jsx(
+        PaginationNumber,
+        {
+          active: number_ === current,
+          onClick: () => handleChange(number_),
+          "aria-label": `Page ${number_}`,
+          children: number_
+        },
+        number_
+      )),
+      pageCount > 5 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: "#7F7F7F",
+              fontWeight: 600,
+              fontSize: 16,
+              margin: "0 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              paddingBottom: 10
+            },
+            children: "..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PaginationNumber,
+          {
+            active: current === pageCount,
+            onClick: () => handleChange(pageCount),
+            "aria-label": `Page ${pageCount}`,
+            children: pageCount
+          },
+          pageCount
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "centered") {
+    const pages = [];
+    let start = Math.max(2, current - 2);
+    let end = Math.min(pageCount - 1, current + 2);
+    if (current <= 3) {
+      start = 2;
+      end = 6;
+    }
+    if (current >= pageCount - 2) {
+      start = pageCount - 4;
+      end = pageCount - 1;
+    }
+    start = Math.max(2, start);
+    end = Math.min(pageCount - 1, end);
+    pages.push(1);
+    if (start > 2) {
+      pages.push("left-ellipsis");
+    }
+    for (let index = start; index <= end; index++) {
+      pages.push(index);
+    }
+    if (end < pageCount - 1) {
+      pages.push("right-ellipsis");
+    }
+    if (pageCount > 1) {
+      pages.push(pageCount);
+    }
+    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_, index) => {
+        if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
+          return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(
+          PaginationNumber,
+          {
+            active: number_ === current,
+            onClick: () => typeof number_ === "number" && handleChange(number_),
+            "aria-label": `Page ${number_}`,
+            children: number_
+          },
+          number_
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  if (paginationStyle === "endFocused") {
+    const pages = [];
+    pages.push(1);
+    if (pageCount > 6) {
+      pages.push("left-ellipsis");
+    }
+    const start = Math.max(2, pageCount - 4);
+    for (let index = start; index <= pageCount; index++) {
+      pages.push(index);
+    }
+    return /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous Page",
+          children: /* @__PURE__ */ jsx(ChevronIcon, { left: true })
+        }
+      ),
+      pages.map((number_, index) => {
+        if (number_ === "left-ellipsis") {
+          return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(
+          PaginationNumber,
+          {
+            active: number_ === current,
+            onClick: () => typeof number_ === "number" && handleChange(number_),
+            "aria-label": `Page ${number_}`,
+            children: number_
+          },
+          number_
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        ChevronButton,
+        {
+          onClick: () => handleChange(current + 1),
+          disabled: current === pageCount,
+          "aria-label": "Next Page",
+          $right: true,
+          children: /* @__PURE__ */ jsx(ChevronIcon, {})
+        }
+      )
+    ] });
+  }
+  return null;
+};
+export {
+  PaginationStyle,
+  CustomPagination as default
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var styled = require("styled-components");
+var Typography = require("../../Typography/Typography.cjs");
+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;
+  }
+`;
+const PaginationNumber = ({
+  active,
+  children,
+  ...properties
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  NumberButton,
+  {
+    $active: active,
+    "aria-current": active ? "page" : void 0,
+    ...properties,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children })
+  }
+);
+exports.PaginationNumber = PaginationNumber;

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

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