@nori-ui/core 1.4.0 → 1.6.0

package/dist/client.cjs

@@ -88,7 +88,9 @@ var defaultDictionary = {
   "switch.off": "Off",
   // field
   "field.requiredIndicator": "*",
-  "field.requiredLabel": "required"
+  "field.requiredLabel": "required",
+  // table / dataTable
+  "table.empty": "No data"
 };
 
 // src/i18n/resolve.ts
@@ -6611,6 +6613,9 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var Combobox = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Select, { searchable: true, ...props });
+}, "Combobox");
 var MenuContext = React.createContext(null);
 var MenuContextProvider = /* @__PURE__ */ __name(({
   open,
@@ -7022,6 +7027,450 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   Separator: MenuSeparator,
   Label: MenuLabel
 });
+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");
+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 cmp2 = av < bv ? -1 : av > bv ? 1 : 0;
+    return sort.direction === "asc" ? cmp2 : -cmp2;
+  });
+}
+__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");
 function formatDate(date$1, locale) {
   try {
     return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
@@ -9094,124 +9543,6 @@ var Label = /* @__PURE__ */ __name(({ htmlFor, required = false, disabled = fals
     }
   );
 }, "Label");
-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");
 var PAGINATION_COMPACT_BREAKPOINT = 480;
 var PaginationContext = React.createContext(null);
 var usePaginationContext = /* @__PURE__ */ __name((label) => {
@@ -13460,7 +13791,9 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Combobox = Combobox;
 exports.ContextMenu = ContextMenu;
+exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
@@ -13502,6 +13835,7 @@ exports.SliderGestureProvider = SliderGestureProvider;
 exports.Slot = Slot;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
+exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;