@multiplatform.one/table 7.10.0 → 7.15.0

package/dist/cjs/components/DataTableExport/index.cjs

@@ -158,7 +158,7 @@ function DataTableExport(props) {
       onPress: handlePrint,
       "aria-label": "Print table",
       children: isExporting === "print" ? "..." : "Print"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExportOptionsPopover, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExportOptionsPanel, {
       exportFormats,
       exportOptions,
       onOptionsChange: setExportOptions,
@@ -189,7 +189,7 @@ function extractColumnsFromTable(table) {
     return [];
   }
 }
-function ExportOptionsPopover({
+function ExportOptionsPanel({
   exportFormats,
   exportOptions,
   onOptionsChange,
@@ -205,157 +205,140 @@ function ExportOptionsPopover({
   const iconPx = (0, import_chromeIcons.iconSizeForToken)(String(knobProps.sizeToken));
   const sz = knobProps.sizeToken;
   const popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [open, setOpen] = (0, import_react2.useState)(false);
   const [selectedColumns, setSelectedColumns] = (0, import_react2.useState)(new Set(columns.map(col => col.accessorKey || col.id || "")));
   const availableColumns = columns.map(col => ({
     key: col.accessorKey || col.id || "",
     header: col.header || col.accessorKey || col.id || ""
   }));
+  const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    size: knobProps.sizeToken,
+    chromeless: true,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+      size: iconPx
+    }),
+    disabled,
+    "aria-label": "Export options",
+    children: "Options"
+  });
   return (
-    // LC-06/LC-10: collision handling — without stayInFrame/resize the tall
-    // option list painted past the viewport and the Export Formats / Print
-    // rows below the fold were unreachable (no scroll, no clamp).
+    // LC-06/LC-10: the option list is taller than most viewports. FloatingPanel
+    // clamps it inside the viewport and scrolls, so the Export Formats and
+    // Print rows below the fold stay reachable.
     /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-      stayInFrame: true,
-      allowFlip: true,
-      resize: true,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          chromeless: true,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
-            size: iconPx
-          }),
-          disabled,
-          "aria-label": "Export options",
-          children: "Options"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-        ...knobProps.elevatedSurface,
-        transition: knobProps.transition,
-        enterStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
-        exitStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
+    (0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
+      open,
+      onOpenChange: setOpen,
+      trigger,
+      triggerSizing: "content",
+      disabled,
+      scrollable: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
         minWidth: popoverMinWidth,
-        padding: 0,
-        overflow: "hidden",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
-          minHeight: 0,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
-            gap: "$4",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              ...knobProps.label,
-              fontWeight: "400",
-              children: "Export Options"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: "Filename"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-                value: exportOptions.filename || "",
-                onChangeText: text => onOptionsChange({
-                  ...exportOptions,
-                  filename: text
-                }),
-                placeholder: "Enter filename"
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-              label: "Include headers",
-              checked: exportOptions.includeHeaders ?? true,
-              onCheckedChange: checked => onOptionsChange({
-                ...exportOptions,
-                includeHeaders: checked
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-                maxHeight: 200,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                  gap: "$1",
-                  children: availableColumns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                    label: col.header,
-                    checked: selectedColumns.has(col.key),
-                    onCheckedChange: checked => {
-                      const newSelected = new Set(selectedColumns);
-                      if (checked) {
-                        newSelected.add(col.key);
-                      } else {
-                        newSelected.delete(col.key);
-                      }
-                      setSelectedColumns(newSelected);
-                      onOptionsChange({
-                        ...exportOptions,
-                        selectedColumns: Array.from(newSelected)
-                      });
-                    }
-                  }, col.key))
-                })
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
+        "data-dismiss-class": "compose",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          fontWeight: "400",
+          children: "Export Options"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: "Filename"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+            value: exportOptions.filename || "",
+            onChangeText: text => onOptionsChange({
+              ...exportOptions,
+              filename: text
+            }),
+            placeholder: "Enter filename"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+          label: "Include headers",
+          checked: exportOptions.includeHeaders ?? true,
+          onCheckedChange: checked => onOptionsChange({
+            ...exportOptions,
+            includeHeaders: checked
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 200,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$1",
+              children: availableColumns.map(col => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+                label: col.header,
+                checked: selectedColumns.has(col.key),
+                onCheckedChange: checked => {
+                  const newSelected = new Set(selectedColumns);
+                  if (checked) {
+                    newSelected.add(col.key);
+                  } else {
+                    newSelected.delete(col.key);
+                  }
+                  setSelectedColumns(newSelected);
+                  onOptionsChange({
+                    ...exportOptions,
+                    selectedColumns: Array.from(newSelected)
+                  });
+                }
+              }, col.key))
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: "Export Formats"
+          }), exportFormats.map(format => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            justifyContent: "flex-start",
+            disabled: disabled || isExporting === format.id || !format.enabled,
+            onPress: () => onExport(format),
+            icon: format.icon,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              gap: "$1",
               children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
                 ...knobProps.label,
                 fontWeight: "400",
-                children: "Export Formats"
-              }), exportFormats.map(format => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-                size: knobProps.sizeToken,
-                chromeless: true,
-                justifyContent: "flex-start",
-                disabled: disabled || isExporting === format.id || !format.enabled,
-                onPress: () => onExport(format),
-                icon: format.icon,
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                  gap: "$1",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    ...knobProps.label,
-                    fontWeight: "400",
-                    children: format.label
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    fontSize: "$2",
-                    color: "$color10",
-                    children: format.description
-                  })]
-                }), isExporting === format.id && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  fontSize: "$2",
-                  color: "$accentColor",
-                  marginInlineStart: "auto",
-                  children: "..."
-                })]
-              }, format.id))]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-              size: knobProps.sizeToken,
-              chromeless: true,
-              justifyContent: "flex-start",
-              disabled: disabled || isExporting === "print",
-              onPress: onPrint,
-              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
-                size: iconPx
-              }),
-              children: ["Print Table", isExporting === "print" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                children: format.label
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
                 fontSize: "$2",
-                color: "$accentColor",
-                marginInlineStart: "auto",
-                children: "..."
+                color: "$color10",
+                children: format.description
               })]
+            }), isExporting === format.id && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$accentColor",
+              marginInlineStart: "auto",
+              children: "..."
             })]
-          })
-        })
-      })]
+          }, format.id))]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          chromeless: true,
+          justifyContent: "flex-start",
+          disabled: disabled || isExporting === "print",
+          onPress: onPrint,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
+            size: iconPx
+          }),
+          children: ["Print Table", isExporting === "print" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$2",
+            color: "$accentColor",
+            marginInlineStart: "auto",
+            children: "..."
+          })]
+        })]
+      })
     })
   );
 }

package/dist/cjs/components/DataTableExport/index.native.js

@@ -187,7 +187,7 @@ function DataTableExport(props) {
       "aria-label": "Print table",
       children: isExporting === "print" ? "..." : "Print"
     }), /* Advanced Export Options */
-    /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExportOptionsPopover, {
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExportOptionsPanel, {
       exportFormats,
       exportOptions,
       onOptionsChange: setExportOptions,
@@ -223,7 +223,7 @@ function extractColumnsFromTable(table) {
     return [];
   }
 }
-function ExportOptionsPopover(param) {
+function ExportOptionsPanel(param) {
   var {
     exportFormats,
     exportOptions,
@@ -241,6 +241,7 @@ function ExportOptionsPopover(param) {
   var iconPx = (0, import_chromeIcons.iconSizeForToken)(String(knobProps.sizeToken));
   var sz = knobProps.sizeToken;
   var popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  var [open, setOpen] = (0, import_react2.useState)(false);
   var [selectedColumns, setSelectedColumns] = (0, import_react2.useState)(new Set(columns.map(function (col) {
     return col.accessorKey || col.id || "";
   })));
@@ -250,172 +251,149 @@ function ExportOptionsPopover(param) {
       header: col.header || col.accessorKey || col.id || ""
     };
   });
+  var trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    size: knobProps.sizeToken,
+    chromeless: true,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+      size: iconPx
+    }),
+    disabled,
+    "aria-label": "Export options",
+    children: "Options"
+  });
   return (
-    // LC-06/LC-10: collision handling — without stayInFrame/resize the tall
-    // option list painted past the viewport and the Export Formats / Print
-    // rows below the fold were unreachable (no scroll, no clamp).
+    // LC-06/LC-10: the option list is taller than most viewports. FloatingPanel
+    // clamps it inside the viewport and scrolls, so the Export Formats and
+    // Print rows below the fold stay reachable.
     /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-      stayInFrame: true,
-      allowFlip: true,
-      resize: true,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          chromeless: true,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
-            size: iconPx
-          }),
-          disabled,
-          "aria-label": "Export options",
-          children: "Options"
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-        ...knobProps.elevatedSurface,
-        transition: knobProps.transition,
-        enterStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
-        exitStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
+    (0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
+      open,
+      onOpenChange: setOpen,
+      trigger,
+      triggerSizing: "content",
+      disabled,
+      scrollable: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
         minWidth: popoverMinWidth,
-        padding: 0,
-        overflow: "hidden",
-        children: (
-        /* The popper resize middleware caps the height to the viewport; the
-        ScrollView keeps every section reachable (same pattern as
-        DataTableDateFilter). */
-        /* @__PURE__ */
-        (0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
-          minHeight: 0,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
-            gap: "$4",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              ...knobProps.label,
-              fontWeight: "400",
-              children: "Export Options"
-            }), /* Filename */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: "Filename"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-                value: exportOptions.filename || "",
-                onChangeText: function onChangeText(text) {
-                  return onOptionsChange({
-                    ...exportOptions,
-                    filename: text
-                  });
-                },
-                placeholder: "Enter filename"
-              })]
-            }), /* Include Headers */
-            /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-              label: "Include headers",
-              checked: (_exportOptions_includeHeaders = exportOptions.includeHeaders) !== null && _exportOptions_includeHeaders !== void 0 ? _exportOptions_includeHeaders : true,
-              onCheckedChange: function onCheckedChange(checked) {
-                return onOptionsChange({
-                  ...exportOptions,
-                  includeHeaders: checked
-                });
-              }
-            }), /* Column Selection */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-                maxHeight: 200,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                  gap: "$1",
-                  children: availableColumns.map(function (col) {
-                    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                      label: col.header,
-                      checked: selectedColumns.has(col.key),
-                      onCheckedChange: function onCheckedChange(checked) {
-                        var newSelected = new Set(selectedColumns);
-                        if (checked) {
-                          newSelected.add(col.key);
-                        } else {
-                          newSelected.delete(col.key);
-                        }
-                        setSelectedColumns(newSelected);
-                        onOptionsChange({
-                          ...exportOptions,
-                          selectedColumns: Array.from(newSelected)
-                        });
-                      }
-                    }, col.key);
-                  })
-                })
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Export Formats */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                children: "Export Formats"
-              }), exportFormats.map(function (format) {
-                return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-                  size: knobProps.sizeToken,
-                  chromeless: true,
-                  justifyContent: "flex-start",
-                  disabled: disabled || isExporting === format.id || !format.enabled,
-                  onPress: function onPress() {
-                    return onExport(format);
-                  },
-                  icon: format.icon,
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                    gap: "$1",
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                      ...knobProps.label,
-                      fontWeight: "400",
-                      children: format.label
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                      fontSize: "$2",
-                      color: "$color10",
-                      children: format.description
-                    })]
-                  }), isExporting === format.id && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    fontSize: "$2",
-                    color: "$accentColor",
-                    marginInlineStart: "auto",
-                    children: "..."
-                  })]
-                }, format.id);
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Print */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+        "data-dismiss-class": "compose",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          fontWeight: "400",
+          children: "Export Options"
+        }), /* Filename */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: "Filename"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+            value: exportOptions.filename || "",
+            onChangeText: function onChangeText(text) {
+              return onOptionsChange({
+                ...exportOptions,
+                filename: text
+              });
+            },
+            placeholder: "Enter filename"
+          })]
+        }), /* Include Headers */
+        /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+          label: "Include headers",
+          checked: (_exportOptions_includeHeaders = exportOptions.includeHeaders) !== null && _exportOptions_includeHeaders !== void 0 ? _exportOptions_includeHeaders : true,
+          onCheckedChange: function onCheckedChange(checked) {
+            return onOptionsChange({
+              ...exportOptions,
+              includeHeaders: checked
+            });
+          }
+        }), /* Column Selection */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: ["Select Columns (", selectedColumns.size, " of ", availableColumns.length, ")"]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 200,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$1",
+              children: availableColumns.map(function (col) {
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+                  label: col.header,
+                  checked: selectedColumns.has(col.key),
+                  onCheckedChange: function onCheckedChange(checked) {
+                    var newSelected = new Set(selectedColumns);
+                    if (checked) {
+                      newSelected.add(col.key);
+                    } else {
+                      newSelected.delete(col.key);
+                    }
+                    setSelectedColumns(newSelected);
+                    onOptionsChange({
+                      ...exportOptions,
+                      selectedColumns: Array.from(newSelected)
+                    });
+                  }
+                }, col.key);
+              })
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Export Formats */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            fontWeight: "400",
+            children: "Export Formats"
+          }), exportFormats.map(function (format) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
               size: knobProps.sizeToken,
               chromeless: true,
               justifyContent: "flex-start",
-              disabled: disabled || isExporting === "print",
-              onPress: onPrint,
-              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
-                size: iconPx
-              }),
-              children: ["Print Table", isExporting === "print" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              disabled: disabled || isExporting === format.id || !format.enabled,
+              onPress: function onPress() {
+                return onExport(format);
+              },
+              icon: format.icon,
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                gap: "$1",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  ...knobProps.label,
+                  fontWeight: "400",
+                  children: format.label
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$2",
+                  color: "$color10",
+                  children: format.description
+                })]
+              }), isExporting === format.id && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
                 fontSize: "$2",
                 color: "$accentColor",
                 marginInlineStart: "auto",
                 children: "..."
               })]
-            })]
-          })
-        }))
-      })]
+            }, format.id);
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Print */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          chromeless: true,
+          justifyContent: "flex-start",
+          disabled: disabled || isExporting === "print",
+          onPress: onPrint,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PrinterIcon, {
+            size: iconPx
+          }),
+          children: ["Print Table", isExporting === "print" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$2",
+            color: "$accentColor",
+            marginInlineStart: "auto",
+            children: "..."
+          })]
+        })]
+      })
     })
   );
 }