@nori-ui/core 1.4.0 → 1.6.0

package/dist/components/DataTable/index.cjs

@@ -0,0 +1,770 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var range = /* @__PURE__ */ __name((from, to) => {
+  if (to < from) {
+    return [];
+  }
+  const out = new Array(to - from + 1);
+  for (let i = 0; i < out.length; i += 1) {
+    out[i] = from + i;
+  }
+  return out;
+}, "range");
+function usePagination(args) {
+  const {
+    page: controlledPage,
+    defaultPage = 1,
+    pageCount,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
+    showPrevNext = true,
+    onPageChange
+  } = args;
+  const isControlled = controlledPage !== void 0;
+  const [uncontrolledPage, setUncontrolledPage] = react.useState(defaultPage);
+  const onChangeRef = react.useRef(onPageChange);
+  onChangeRef.current = onPageChange;
+  const safePageCount = Math.max(1, Math.floor(pageCount));
+  const rawPage = isControlled ? controlledPage : uncontrolledPage;
+  const currentPage = Math.min(Math.max(1, Math.floor(rawPage)), safePageCount);
+  const goToPage = react.useCallback(
+    (next2) => {
+      const clamped = Math.min(Math.max(1, Math.floor(next2)), Math.max(1, Math.floor(pageCount)));
+      if (!isControlled) {
+        setUncontrolledPage(clamped);
+      }
+      onChangeRef.current?.(clamped);
+    },
+    [isControlled, pageCount]
+  );
+  const prev = react.useCallback(() => goToPage(currentPage - 1), [goToPage, currentPage]);
+  const next = react.useCallback(() => goToPage(currentPage + 1), [goToPage, currentPage]);
+  const first = react.useCallback(() => goToPage(1), [goToPage]);
+  const last = react.useCallback(() => goToPage(safePageCount), [goToPage, safePageCount]);
+  const pages = react.useMemo(() => {
+    const items = [];
+    const safeSibling = Math.max(0, Math.floor(siblingCount));
+    const safeBoundary = Math.max(0, Math.floor(boundaryCount));
+    if (showFirstLast) {
+      items.push({ type: "first", disabled: currentPage <= 1 });
+    }
+    if (showPrevNext) {
+      items.push({ type: "prev", disabled: currentPage <= 1 });
+    }
+    const startPages = range(1, Math.min(safeBoundary, safePageCount));
+    const endPages = range(Math.max(safePageCount - safeBoundary + 1, safeBoundary + 1), safePageCount);
+    const siblingsStart = Math.max(
+      Math.min(currentPage - safeSibling, safePageCount - safeBoundary - safeSibling * 2 - 1),
+      safeBoundary + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + safeSibling, safeBoundary + safeSibling * 2 + 2),
+      endPages.length > 0 ? endPages[0] - 2 : safePageCount - 1
+    );
+    const middle = [];
+    if (siblingsStart > safeBoundary + 2) {
+      middle.push("ellipsis");
+    } else if (safeBoundary + 1 < safePageCount - safeBoundary) {
+      middle.push(safeBoundary + 1);
+    }
+    for (const p of range(siblingsStart, siblingsEnd)) {
+      middle.push(p);
+    }
+    if (siblingsEnd < safePageCount - safeBoundary - 1) {
+      middle.push("ellipsis");
+    } else if (safePageCount - safeBoundary > safeBoundary) {
+      middle.push(safePageCount - safeBoundary);
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const pushPage = /* @__PURE__ */ __name((n) => {
+      if (n < 1 || n > safePageCount || seen.has(n)) {
+        return;
+      }
+      seen.add(n);
+      items.push({ type: "page", page: n, selected: n === currentPage });
+    }, "pushPage");
+    for (const n of startPages) {
+      pushPage(n);
+    }
+    for (const m of middle) {
+      if (m === "ellipsis") {
+        items.push({ type: "ellipsis" });
+      } else {
+        pushPage(m);
+      }
+    }
+    for (const n of endPages) {
+      pushPage(n);
+    }
+    if (showPrevNext) {
+      items.push({ type: "next", disabled: currentPage >= safePageCount });
+    }
+    if (showFirstLast) {
+      items.push({ type: "last", disabled: currentPage >= safePageCount });
+    }
+    return items;
+  }, [currentPage, safePageCount, siblingCount, boundaryCount, showFirstLast, showPrevNext]);
+  return {
+    page: currentPage,
+    pages,
+    canPrev: currentPage > 1,
+    canNext: currentPage < safePageCount,
+    goToPage,
+    prev,
+    next,
+    first,
+    last
+  };
+}
+__name(usePagination, "usePagination");
+
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#0d9488",
+      primaryHover: "#0f766e",
+      primaryPressed: "#115e59"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2dd4bf",
+      primaryHover: "#5eead4",
+      primaryPressed: "#99f6e4"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var defaultTheme = {
+  light: theme,
+  dark: themeDark
+};
+var ThemeContext = react.createContext(defaultTheme);
+ThemeContext.displayName = "ThemeContext";
+var ColorSchemeOverrideContext = react.createContext(null);
+ColorSchemeOverrideContext.displayName = "ColorSchemeOverrideContext";
+var isWeb = reactNative.Platform.OS === "web";
+function readWebScheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (root.getAttribute("data-theme") === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+__name(readWebScheme, "readWebScheme");
+function useColorScheme() {
+  const override = react.useContext(ColorSchemeOverrideContext);
+  const [scheme, setScheme] = react.useState(() => {
+    if (isWeb) {
+      return readWebScheme();
+    }
+    return reactNative.Appearance.getColorScheme() ?? "light";
+  });
+  react.useEffect(() => {
+    if (isWeb) {
+      const root = document.documentElement;
+      const update = /* @__PURE__ */ __name(() => setScheme(readWebScheme()), "update");
+      const observer = new MutationObserver(update);
+      observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+      update();
+      return () => observer.disconnect();
+    }
+    const sub = reactNative.Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme ?? "light");
+    });
+    return () => sub.remove();
+  }, []);
+  return override ?? scheme;
+}
+__name(useColorScheme, "useColorScheme");
+
+// src/theme/use-theme-colors.ts
+function useThemeColors() {
+  const scheme = useColorScheme();
+  const themePair = react.useContext(ThemeContext);
+  return scheme === "dark" ? themePair.dark : themePair.light;
+}
+__name(useThemeColors, "useThemeColors");
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    append(out, input);
+  }
+  return out.join(" ");
+}
+__name(cn, "cn");
+function append(out, input) {
+  if (!input) {
+    return;
+  }
+  if (typeof input === "string") {
+    if (input.length > 0) {
+      out.push(input);
+    }
+    return;
+  }
+  if (typeof input === "number") {
+    return;
+  }
+  if (Array.isArray(input)) {
+    for (const inner of input) {
+      append(out, inner);
+    }
+    return;
+  }
+  if (typeof input === "object") {
+    for (const key of Object.keys(input)) {
+      if (input[key]) {
+        out.push(key);
+      }
+    }
+  }
+}
+__name(append, "append");
+var TableContext = react.createContext({
+  striped: false,
+  compact: false,
+  bordered: false,
+  rowIndex: 0,
+  setRowIndex: /* @__PURE__ */ __name(() => {
+  }, "setRowIndex")
+});
+function buildTableCompound(parts) {
+  return Object.assign(parts.Root, {
+    Header: parts.Header,
+    Body: parts.Body,
+    Footer: parts.Footer,
+    Row: parts.Row,
+    HeaderCell: parts.HeaderCell,
+    Cell: parts.Cell,
+    Caption: parts.Caption
+  });
+}
+__name(buildTableCompound, "buildTableCompound");
+var TableRoot = /* @__PURE__ */ __name(({ striped = false, compact = false, bordered = false, children, className, testID }) => {
+  const [rowIndex, setRowIndex] = react.useState(0);
+  const ctxValue = {
+    striped,
+    compact,
+    bordered,
+    rowIndex,
+    setRowIndex
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(
+        "w-full caption-bottom text-sm",
+        bordered && "border border-semantic-border-default",
+        className
+      ),
+      ...testID !== void 0 ? { "data-testid": testID } : {},
+      children
+    }
+  ) }) });
+}, "TableRoot");
+var TableHeader = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    className: cn("[&_tr]:border-b [&_tr]:border-semantic-border-default", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableHeader");
+var TableBody = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tbody",
+  {
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableBody");
+var TableFooter = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    className: cn("border-t border-semantic-border-default font-medium", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableFooter");
+var TableRow = /* @__PURE__ */ __name(({ selected = false, onPress, children, className, testID }) => {
+  const colors = useThemeColors();
+  const handleClick = react.useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-semantic-border-default transition-colors",
+        onPress && "cursor-pointer hover:bg-semantic-background-subtle",
+        selected && "bg-semantic-background-subtle",
+        className
+      ),
+      style: selected ? { backgroundColor: colors.semantic.background.subtle } : void 0,
+      onClick: onPress ? handleClick : void 0,
+      ...testID !== void 0 ? { "data-testid": testID } : {},
+      children
+    }
+  );
+}, "TableRow");
+var TableHeaderCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    className: cn(
+      "h-10 px-4 font-medium text-semantic-text-secondary",
+      align === "right" && "text-right",
+      align === "center" && "text-center",
+      align === "left" && "text-left",
+      className
+    ),
+    colSpan,
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableHeaderCell");
+var TableCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    className: cn(
+      "p-4 align-middle",
+      align === "right" && "text-right",
+      align === "center" && "text-center",
+      align === "left" && "text-left",
+      className
+    ),
+    colSpan,
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableCell");
+var TableCaption = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    className: cn("mt-4 text-sm text-semantic-text-secondary", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableCaption");
+var Table = buildTableCompound({
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  HeaderCell: TableHeaderCell,
+  Cell: TableCell,
+  Caption: TableCaption
+});
+function sortData(data, sort) {
+  if (!sort) {
+    return data;
+  }
+  const key = sort.id;
+  return [...data].sort((a, b) => {
+    const av = a[key];
+    const bv = b[key];
+    if (av == null && bv == null) {
+      return 0;
+    }
+    if (av == null) {
+      return 1;
+    }
+    if (bv == null) {
+      return -1;
+    }
+    const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+    return sort.direction === "asc" ? cmp : -cmp;
+  });
+}
+__name(sortData, "sortData");
+function SortIndicator({ direction }) {
+  if (direction === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4, opacity: 0.3 }, children: "\u21C5" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4 }, children: direction === "asc" ? "\u2191" : "\u2193" });
+}
+__name(SortIndicator, "SortIndicator");
+function DataTable({
+  data,
+  columns,
+  pageSize = 10,
+  defaultSort,
+  onRowPress,
+  emptyState,
+  striped,
+  compact,
+  bordered,
+  testID,
+  className
+}) {
+  const [sort, setSort] = react.useState(defaultSort ?? null);
+  const sorted = react.useMemo(() => sortData(data, sort), [data, sort]);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const { page, goToPage, canPrev, canNext } = usePagination({ pageCount, defaultPage: 1 });
+  const pageSlice = react.useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, page, pageSize]);
+  const handleSort = /* @__PURE__ */ __name((colId) => {
+    setSort((prev) => {
+      if (prev?.id !== colId) {
+        goToPage(1);
+        return { id: colId, direction: "asc" };
+      }
+      if (prev.direction === "asc") {
+        return { id: colId, direction: "desc" };
+      }
+      goToPage(1);
+      return null;
+    });
+  }, "handleSort");
+  const tableProps = {};
+  if (striped !== void 0) {
+    tableProps.striped = striped;
+  }
+  if (compact !== void 0) {
+    tableProps.compact = compact;
+  }
+  if (bordered !== void 0) {
+    tableProps.bordered = bordered;
+  }
+  if (testID !== void 0) {
+    tableProps.testID = testID;
+  }
+  if (className !== void 0) {
+    tableProps.className = className;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { ...tableProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: columns.map((col) => {
+        const align = col.align;
+        return /* @__PURE__ */ jsxRuntime.jsx(Table.HeaderCell, { ...align !== void 0 ? { align } : {}, children: col.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Sort by ${col.id}`,
+            "aria-label": `Sort by ${col.id}`,
+            onPress: () => handleSort(col.id),
+            style: { flexDirection: "row", alignItems: "center" },
+            children: [
+              typeof col.header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children: col.header }) : col.header,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SortIndicator,
+                {
+                  ...sort?.id === col.id ? { direction: sort.direction } : {}
+                }
+              )
+            ]
+          }
+        ) : col.header }, col.id);
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Table.Body, { children: pageSlice.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Cell, { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyState ?? "No data" }) }) }) : pageSlice.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        Table.Row,
+        {
+          ...onRowPress !== void 0 ? { onPress: /* @__PURE__ */ __name(() => onRowPress(row), "onPress") } : {},
+          children: columns.map((col) => {
+            const colAlign = col.align;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Table.Cell,
+              {
+                ...colAlign !== void 0 ? { align: colAlign } : {},
+                children: col.cell(row)
+              },
+              col.id
+            );
+          })
+        },
+        i
+      )) })
+    ] }),
+    pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      PaginationControls,
+      {
+        page,
+        pageCount,
+        canPrev,
+        canNext,
+        goToPage
+      }
+    )
+  ] });
+}
+__name(DataTable, "DataTable");
+function EmptyState({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { paddingVertical: 32, alignItems: "center" }, children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: "#888", fontSize: 14 }, children }) : children });
+}
+__name(EmptyState, "EmptyState");
+function PaginationControls({
+  page,
+  pageCount,
+  canPrev,
+  canNext,
+  goToPage
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingVertical: 8,
+        gap: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: canPrev ? () => goToPage(page - 1) : void 0,
+            accessibilityRole: "button",
+            accessibilityLabel: "Previous page",
+            "aria-label": "Previous page",
+            "aria-disabled": !canPrev,
+            style: { opacity: canPrev ? 1 : 0.4, paddingHorizontal: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "\u2039 Prev" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: { fontSize: 14 }, "aria-live": "polite", children: [
+          page,
+          " / ",
+          pageCount
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: canNext ? () => goToPage(page + 1) : void 0,
+            accessibilityRole: "button",
+            accessibilityLabel: "Next page",
+            "aria-label": "Next page",
+            "aria-disabled": !canNext,
+            style: { opacity: canNext ? 1 : 0.4, paddingHorizontal: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "Next \u203A" })
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PaginationControls, "PaginationControls");
+
+exports.DataTable = DataTable;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map