@nori-ui/core 1.5.0 → 1.7.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
@@ -1803,6 +1805,24 @@ var AlertDialog = Object.assign(AlertDialogRoot, {
   Action: AlertDialogAction,
   Cancel: AlertDialogCancel
 });
+var BASE_STYLE = {
+  overflow: "hidden"
+};
+var AspectRatio = /* @__PURE__ */ __name(({ ratio, children, className, testID }) => {
+  const containerStyle = {
+    ...BASE_STYLE,
+    aspectRatio: ratio
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("overflow-hidden", className),
+      style: containerStyle,
+      children
+    }
+  );
+}, "AspectRatio");
 var SIZE_PX = {
   sm: 32,
   md: 40,
@@ -3528,7 +3548,7 @@ var SIZE_KEYS = {
   md: { padX: "4", font: "md" },
   lg: { padX: "5", font: "lg" }
 };
-var BASE_STYLE = {
+var BASE_STYLE2 = {
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "center"
@@ -3619,7 +3639,7 @@ var Button = /* @__PURE__ */ __name(({
   };
   const sizeFontSize = px(colors.fontSize[sizeKeys.font]);
   const inlineBase = [
-    BASE_STYLE,
+    BASE_STYLE2,
     { backgroundColor: stateBg },
     sizeContainer,
     { opacity: isInoperative ? 0.6 : stateInteractionOpacity }
@@ -3699,6 +3719,39 @@ var Button = /* @__PURE__ */ __name(({
     }
   );
 }, "Button");
+var ButtonGroup = /* @__PURE__ */ __name(({ children, orientation = "horizontal", size, className, testID }) => {
+  const isHorizontal = orientation === "horizontal";
+  const containerStyle = {
+    flexDirection: isHorizontal ? "row" : "column",
+    // gap: 0 so buttons touch; shared-border effect comes from CSS on web
+    // and from touching edges on native.
+    gap: 0,
+    alignSelf: "flex-start",
+    overflow: "hidden"
+  };
+  const childArray = React.Children.toArray(children).filter(React.isValidElement);
+  const total = childArray.length;
+  const clonedChildren = childArray.map((child, index) => {
+    const position = index === 0 ? "first" : index === total - 1 ? "last" : "middle";
+    const extraProps = {
+      "data-position": position,
+      "data-group-orientation": orientation
+    };
+    if (size !== void 0) {
+      extraProps["data-group-size"] = size;
+    }
+    return React.cloneElement(child, extraProps);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn(isHorizontal ? "flex-row" : "flex-col", "self-start overflow-hidden", className),
+      style: containerStyle,
+      children: clonedChildren
+    }
+  );
+}, "ButtonGroup");
 
 // src/components/Calendar/scroll/ScrollBody.tsx
 var ScrollBody = /* @__PURE__ */ __name((_props) => {
@@ -6611,6 +6664,182 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var CollapsibleContext = React.createContext(null);
+var useCollapsibleContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Collapsible>.`);
+  }
+  return ctx;
+}, "useCollapsibleContext");
+var CollapsibleRoot = /* @__PURE__ */ __name(({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  testID
+}) => {
+  const baseId = React.useId();
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : innerOpen;
+  const toggle = React.useCallback(() => {
+    const next = !open;
+    if (!isControlled) {
+      setInnerOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [open, isControlled, onOpenChange]);
+  const ctx = React.useMemo(
+    () => ({
+      open,
+      toggle,
+      contentId: `${baseId}-content`,
+      triggerId: `${baseId}-trigger`
+    }),
+    [open, toggle, baseId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col", className),
+      style: { flexDirection: "column" },
+      children
+    }
+  ) });
+}, "CollapsibleRoot");
+var CollapsibleTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, toggle, contentId, triggerId } = useCollapsibleContext("Collapsible.Trigger");
+  const colors = useThemeColors();
+  const triggerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["1"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      id: triggerId,
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      onPress: toggle,
+      className: cn("flex-row items-center py-2 px-1", className),
+      style: triggerStyle,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          children
+        }
+      ) : children
+    }
+  );
+}, "CollapsibleTrigger");
+var CollapsibleContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, contentId, triggerId } = useCollapsibleContext("Collapsible.Content");
+  const wrapperRef = React.useRef(null);
+  const innerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const inner = innerRef.current;
+    if (!wrapper || !inner) {
+      return;
+    }
+    const isFirstPaint = wrapper.dataset.noriPainted !== "1";
+    wrapper.dataset.noriPainted = "1";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.transitionProperty = "max-height, opacity";
+    wrapper.style.transitionDuration = "200ms";
+    wrapper.style.transitionTimingFunction = "cubic-bezier(0.16, 1, 0.3, 1)";
+    if (open) {
+      const target = inner.scrollHeight;
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+        return;
+      }
+      wrapper.style.maxHeight = "0px";
+      wrapper.style.opacity = "0";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+      });
+    } else {
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+        return;
+      }
+      const current = inner.scrollHeight;
+      wrapper.style.maxHeight = `${current}px`;
+      wrapper.style.opacity = "1";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+      });
+    }
+  }, [open]);
+  if (reactNative.Platform.OS !== "web") {
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        id: contentId,
+        "aria-labelledby": triggerId,
+        className: cn("flex-col", className),
+        style: { flexDirection: "column" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      ...testID !== void 0 ? { testID } : {},
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: (node) => {
+            innerRef.current = node;
+          },
+          className: "flex-col",
+          style: { flexDirection: "column" },
+          children
+        }
+      )
+    }
+  );
+}, "CollapsibleContent");
+var Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 var Combobox = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { searchable: true, ...props });
 }, "Combobox");
@@ -7025,45 +7254,489 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   Separator: MenuSeparator,
   Label: MenuLabel
 });
-function formatDate(date$1, locale) {
-  try {
-    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
-  } catch {
-    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
+var range = /* @__PURE__ */ __name((from, to) => {
+  if (to < from) {
+    return [];
   }
-}
-__name(formatDate, "formatDate");
-function CalendarIcon({ size = 16, color = "currentColor" }) {
-  const colors = useThemeColors();
-  if (reactNative.Platform.OS === "web") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: color,
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
+  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 resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Text,
-    {
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      style: { fontSize: size, lineHeight: size, color: resolvedColor },
-      children: "\u{1F4C5}"
+    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);
     }
-  );
-}
-__name(CalendarIcon, "CalendarIcon");
+    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()));
+  } catch {
+    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
+  }
+}
+__name(formatDate, "formatDate");
+function CalendarIcon({ size = 16, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: "\u{1F4C5}"
+    }
+  );
+}
+__name(CalendarIcon, "CalendarIcon");
 function buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek) {
   const out = {};
   if (minValue !== void 0) {
@@ -7765,6 +8438,55 @@ var Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose
 });
+var Empty = /* @__PURE__ */ __name(({ icon, title, description, action, className, testID }) => {
+  const colors = useThemeColors();
+  const containerStyle = {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["8"]),
+    paddingHorizontal: px(colors.spacing["4"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col items-center justify-center gap-3 py-8 px-4", className),
+      style: containerStyle,
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginBottom: px(colors.spacing["1"]) }, children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.md),
+              fontWeight: colors.fontWeight.semibold,
+              textAlign: "center"
+            },
+            children: title
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.muted,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),
+              textAlign: "center"
+            },
+            children: description
+          }
+        ) : null,
+        action != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: px(colors.spacing["1"]) }, children: action }) : null
+      ]
+    }
+  );
+}, "Empty");
 var FieldContext = React.createContext(null);
 var useFieldContextStrict = /* @__PURE__ */ __name((caller) => {
   const ctx = React.useContext(FieldContext);
@@ -9048,6 +9770,173 @@ var InputGroup = Object.assign(InputGroupRoot, {
   Addon: InputGroupAddon,
   Input: InputGroupInput
 });
+var Item = /* @__PURE__ */ __name(({
+  leading,
+  title,
+  description,
+  trailing,
+  chevron = false,
+  onPress,
+  disabled = false,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const isTappable = onPress !== void 0;
+  const rowStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["3"]),
+    paddingHorizontal: px(colors.spacing["4"]),
+    minHeight: 52,
+    opacity: disabled ? 0.5 : 1
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: leading }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, flexDirection: "column", gap: 2 }, children: [
+      typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          numberOfLines: 1,
+          children: title
+        }
+      ) : title,
+      description != null ? typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.muted,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs)
+          },
+          numberOfLines: 1,
+          children: description
+        }
+      ) : description : null
+    ] }),
+    trailing != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: trailing }) : null,
+    chevron ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: { flexShrink: 0 },
+        "aria-hidden": true,
+        testID: testID != null ? `${testID}-chevron` : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: {
+              fontSize: 14,
+              lineHeight: 16,
+              color: colors.semantic.text.muted,
+              // On web rn-web passes style through — transform
+              // with a rotate is the lightest-weight approach
+              // that avoids importing the full SVG icon set.
+              transform: [{ rotate: "-90deg" }]
+            },
+            children: "\u2304"
+          }
+        )
+      }
+    ) : null
+  ] });
+  if (isTappable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        role: "button",
+        accessibilityRole: "button",
+        disabled,
+        onPress: disabled ? void 0 : onPress,
+        className: cn(
+          "flex-row items-center",
+          disabled ? "opacity-50" : "hover:bg-semantic-background-subtle active:bg-semantic-border-default",
+          className
+        ),
+        style: rowStyle,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center", className),
+      style: rowStyle,
+      children: content
+    }
+  );
+}, "Item");
+var Kbd = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? colors.color.neutral["800"] : colors.color.neutral["100"];
+  const borderColor = isDark ? colors.color.neutral["600"] : colors.color.neutral["300"];
+  const textColor = isDark ? colors.color.neutral["200"] : colors.color.neutral["700"];
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: bgColor,
+    borderWidth: 1,
+    borderColor,
+    borderRadius: px(colors.radius.sm),
+    paddingHorizontal: px(colors.spacing["1"]),
+    paddingVertical: 2,
+    // Subtle bottom shadow gives the classic key look.
+    ...reactNative.Platform.OS === "web" ? {
+      boxShadow: `0 1px 0 ${borderColor}`,
+      display: "inline-flex"
+    } : {}
+  };
+  const textStyle = {
+    color: textColor,
+    // Monospace font for key labels.
+    fontFamily: colors.fontFamily.mono ?? "monospace",
+    fontSize: px(colors.fontSize.xs),
+    fontWeight: colors.fontWeight.medium,
+    lineHeight: px(colors.fontSize.xs) * Number(colors.lineHeight.normal)
+  };
+  const extraWebProps = reactNative.Platform.OS === "web" ? {
+    // rn-web: 'none' skips the role attribute so the outer
+    // View is just a plain <div>; we rely on the inner
+    // <span> with data-kbd for semantic annotation.
+    accessibilityRole: "none"
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...extraWebProps,
+      className: cn(
+        "inline-flex flex-row items-center rounded-sm border px-1 py-0.5",
+        isDark ? "bg-neutral-800 border-neutral-600 text-neutral-200" : "bg-neutral-100 border-neutral-300 text-neutral-700",
+        className
+      ),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          ...reactNative.Platform.OS === "web" ? { "data-kbd": "" } : {},
+          accessibilityRole: "none",
+          style: textStyle,
+          children
+        }
+      )
+    }
+  );
+}, "Kbd");
 var Label = /* @__PURE__ */ __name(({ htmlFor, required = false, disabled = false, children, className, testID }) => {
   const colors = useThemeColors();
   const { t } = useTranslation();
@@ -9097,124 +9986,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) => {
@@ -13455,26 +14226,33 @@ __name(NoriProvider, "NoriProvider");
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
 exports.Combobox = Combobox;
 exports.ContextMenu = ContextMenu;
+exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.DropdownMenu = DropdownMenu;
+exports.Empty = Empty;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
 exports.I18nProvider = I18nProvider;
 exports.Icon = Icon;
 exports.InputGroup = InputGroup;
+exports.Item = Item;
+exports.Kbd = Kbd;
 exports.Label = Label;
 exports.LocaleProvider = LocaleProvider;
 exports.MenuContent = MenuContent;
@@ -13506,6 +14284,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;