@multiplatform.one/table 6.0.0

package/dist/jsx/components/DataTableViewOptions/DataTableViewOptions.spec.mjs

@@ -0,0 +1,126 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DataTableViewOptions } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+const mockColumns = [{
+  id: "name",
+  label: "Name",
+  visible: true,
+  order: 0,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "email",
+  label: "Email",
+  visible: true,
+  order: 1,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "status",
+  label: "Status",
+  visible: true,
+  order: 2,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "createdAt",
+  label: "Created At",
+  visible: true,
+  order: 3,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}];
+describe("DataTableViewOptions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it("renders view options button", () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+  it("opens popover when clicked", async () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    const button = screen.getByText("View");
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+  });
+  it("displays column visibility toggles", async () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    fireEvent.click(screen.getByText("View"));
+    await waitFor(() => {
+      expect(screen.getByText("Name")).toBeInTheDocument();
+      expect(screen.getByText("Email")).toBeInTheDocument();
+      expect(screen.getByText("Status")).toBeInTheDocument();
+    });
+  });
+  it("calls onColumnVisibilityChange when column is toggled", async () => {
+    const mockOnChange = vi.fn();
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: mockOnChange,
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    fireEvent.click(screen.getByText("View"));
+    await waitFor(() => {
+      expect(screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+    const switches = screen.getAllByRole("switch");
+    expect(switches.length).toBeGreaterThan(0);
+    fireEvent.click(switches[0]);
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+  it("handles empty columns array", () => {
+    renderWithProviders(/* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: [],
+      onColumnVisibilityChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+      onColumnSizingChange: vi.fn(),
+      onSaveView: vi.fn(),
+      onLoadView: vi.fn(),
+      onResetToDefault: vi.fn(),
+      compact: true
+    }));
+    expect(screen.getByText("View")).toBeInTheDocument();
+  });
+});
+//# sourceMappingURL=DataTableViewOptions.spec.mjs.map

package/dist/jsx/components/DataTableViewOptions/DataTableViewOptions.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["fireEvent","screen","waitFor","renderWithProviders","beforeEach","describe","expect","it","vi","DataTableViewOptions","jsx","mockColumns","id","label","visible","order","canHide","canResize","canReorder","clearAllMocks","columns","onColumnVisibilityChange","fn","onColumnOrderChange","onColumnSizingChange","onSaveView","onLoadView","onResetToDefault","compact","getByText","toBeInTheDocument","button","click","mockOnChange","switches","getAllByRole","length","toBeGreaterThan","toHaveBeenCalled"],"sources":["../../../../src/components/DataTableViewOptions/DataTableViewOptions.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/components/DataTableViewOptions/DataTableViewOptions.spec.native.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_vitest = require("vitest");
+var import_jest_dom = require("@testing-library/jest-dom");
+var import_index = require("./index.native.js");
+var mockColumns = [{
+  id: "name",
+  label: "Name",
+  visible: true,
+  order: 0,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "email",
+  label: "Email",
+  visible: true,
+  order: 1,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "status",
+  label: "Status",
+  visible: true,
+  order: 2,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}, {
+  id: "createdAt",
+  label: "Created At",
+  visible: true,
+  order: 3,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}];
+(0, import_vitest.describe)("DataTableViewOptions", function () {
+  (0, import_vitest.beforeEach)(function () {
+    import_vitest.vi.clearAllMocks();
+  });
+  (0, import_vitest.it)("renders view options button", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: import_vitest.vi.fn(),
+      onColumnOrderChange: import_vitest.vi.fn(),
+      onColumnSizingChange: import_vitest.vi.fn(),
+      onSaveView: import_vitest.vi.fn(),
+      onLoadView: import_vitest.vi.fn(),
+      onResetToDefault: import_vitest.vi.fn(),
+      compact: true
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("View")).toBeInTheDocument();
+  });
+  (0, import_vitest.it)("opens popover when clicked", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: import_vitest.vi.fn(),
+      onColumnOrderChange: import_vitest.vi.fn(),
+      onColumnSizingChange: import_vitest.vi.fn(),
+      onSaveView: import_vitest.vi.fn(),
+      onLoadView: import_vitest.vi.fn(),
+      onResetToDefault: import_vitest.vi.fn(),
+      compact: true
+    }));
+    var button = import_react.screen.getByText("View");
+    import_react.fireEvent.click(button);
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+  });
+  (0, import_vitest.it)("displays column visibility toggles", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: import_vitest.vi.fn(),
+      onColumnOrderChange: import_vitest.vi.fn(),
+      onColumnSizingChange: import_vitest.vi.fn(),
+      onSaveView: import_vitest.vi.fn(),
+      onLoadView: import_vitest.vi.fn(),
+      onResetToDefault: import_vitest.vi.fn(),
+      compact: true
+    }));
+    import_react.fireEvent.click(import_react.screen.getByText("View"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByText("Name")).toBeInTheDocument();
+      (0, import_vitest.expect)(import_react.screen.getByText("Email")).toBeInTheDocument();
+      (0, import_vitest.expect)(import_react.screen.getByText("Status")).toBeInTheDocument();
+    });
+  });
+  (0, import_vitest.it)("calls onColumnVisibilityChange when column is toggled", async function () {
+    var mockOnChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
+      columns: mockColumns,
+      onColumnVisibilityChange: mockOnChange,
+      onColumnOrderChange: import_vitest.vi.fn(),
+      onColumnSizingChange: import_vitest.vi.fn(),
+      onSaveView: import_vitest.vi.fn(),
+      onLoadView: import_vitest.vi.fn(),
+      onResetToDefault: import_vitest.vi.fn(),
+      compact: true
+    }));
+    import_react.fireEvent.click(import_react.screen.getByText("View"));
+    await (0, import_react.waitFor)(function () {
+      (0, import_vitest.expect)(import_react.screen.getByText("Column Visibility")).toBeInTheDocument();
+    });
+    var switches = import_react.screen.getAllByRole("switch");
+    (0, import_vitest.expect)(switches.length).toBeGreaterThan(0);
+    import_react.fireEvent.click(switches[0]);
+    (0, import_vitest.expect)(mockOnChange).toHaveBeenCalled();
+  });
+  (0, import_vitest.it)("handles empty columns array", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableViewOptions, {
+      columns: [],
+      onColumnVisibilityChange: import_vitest.vi.fn(),
+      onColumnOrderChange: import_vitest.vi.fn(),
+      onColumnSizingChange: import_vitest.vi.fn(),
+      onSaveView: import_vitest.vi.fn(),
+      onLoadView: import_vitest.vi.fn(),
+      onResetToDefault: import_vitest.vi.fn(),
+      compact: true
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("View")).toBeInTheDocument();
+  });
+});
+//# sourceMappingURL=DataTableViewOptions.spec.native.js.map

package/dist/jsx/components/DataTableViewOptions/DataTableViewOptions.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react","import_test_utils","import_vitest","import_jest_dom","import_index","mockColumns","id","label","visible","order","canHide","canResize","canReorder","describe","beforeEach","vi","clearAllMocks","it","renderWithProviders","jsx","DataTableViewOptions","columns","onColumnVisibilityChange","fn","onColumnOrderChange","onColumnSizingChange","onSaveView","onLoadView","onResetToDefault","compact","expect","screen","getByText","toBeInTheDocument","button","fireEvent","click","waitFor","mockOnChange","switches","getAllByRole","length","toBeGreaterThan","toHaveBeenCalled"],"sources":["../../../../src/components/DataTableViewOptions/DataTableViewOptions.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/components/DataTableViewOptions/DataTableViewOptions.stories.mjs

@@ -0,0 +1,393 @@
+import { action } from "@multiplatform.one/storybook";
+import React from "react";
+import { Card, Text, View, XStack, YStack } from "tamagui";
+import { DataTableViewOptions } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const allColumns = [{
+  accessorKey: "name",
+  header: "Product Name"
+}, {
+  accessorKey: "category",
+  header: "Category"
+}, {
+  accessorKey: "price",
+  header: "Price",
+  cell: info => `$${info.getValue().toFixed(2)}`
+}, {
+  accessorKey: "stock",
+  header: "Stock"
+}, {
+  accessorKey: "status",
+  header: "Status"
+}, {
+  accessorKey: "rating",
+  header: "Rating"
+}, {
+  accessorKey: "weight",
+  header: "Weight (lbs)"
+}, {
+  accessorKey: "dimensions",
+  header: "Dimensions"
+}, {
+  accessorKey: "createdAt",
+  header: "Created",
+  cell: info => new Date(info.getValue()).toLocaleDateString()
+}, {
+  accessorKey: "description",
+  header: "Description"
+}, {
+  accessorKey: "tags",
+  header: "Tags",
+  cell: info => info.getValue().join(", ")
+}];
+const transformedColumns = allColumns.map((col, index) => ({
+  id: col.accessorKey,
+  label: col.header,
+  visible: true,
+  order: index,
+  canHide: true,
+  canResize: true,
+  canReorder: true
+}));
+var DataTableViewOptions_stories_default = {
+  title: "Table/DataTableViewOptions",
+  component: DataTableViewOptions,
+  parameters: {
+    docs: {
+      description: {
+        component: "A component for controlling table view options like column visibility, density, and page size."
+      }
+    }
+  }
+};
+const Default = () => {
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [density, _setDensity] = React.useState("comfortable");
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "View Options Demo"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns,
+      onColumnVisibilityChange: (columnId, visible) => setColumnVisibility(prev => ({
+        ...prev,
+        [columnId]: visible
+      })),
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Card, {
+      padding: "$4",
+      borderRadius: "$4",
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: "$3",
+          fontWeight: "500",
+          children: "Current Settings:"
+        }), /* @__PURE__ */jsxs(Text, {
+          fontSize: "$2",
+          color: "$gray11",
+          children: ["Density: ", density]
+        }), /* @__PURE__ */jsxs(Text, {
+          fontSize: "$2",
+          color: "$gray11",
+          children: ["Visible Columns: ", Object.keys(columnVisibility).length || "All"]
+        })]
+      })
+    })]
+  });
+};
+Default.storyName = "Main";
+const WithPageSizeControls = () => {
+  const [pageSize, _setPageSize] = React.useState(10);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "With Page Size Controls"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns,
+      onColumnVisibilityChange: () => {},
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Card, {
+      padding: "$3",
+      borderRadius: "$4",
+      backgroundColor: "$blue2",
+      children: /* @__PURE__ */jsxs(Text, {
+        fontSize: "$3",
+        color: "$blue11",
+        children: ["Current page size: ", pageSize, " items per page"]
+      })
+    })]
+  });
+};
+const ManyColumns = () => {
+  const [_columnVisibility, setColumnVisibility] = React.useState({});
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Many Columns Example"
+    }), /* @__PURE__ */jsx(Card, {
+      padding: "$3",
+      borderRadius: "$4",
+      backgroundColor: "$green2",
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: "$3",
+          fontWeight: "500",
+          color: "$green11",
+          children: "Available Columns:"
+        }), /* @__PURE__ */jsxs(Text, {
+          fontSize: "$2",
+          color: "$green11",
+          children: [transformedColumns.length, " total columns to manage visibility"]
+        })]
+      })
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns,
+      onColumnVisibilityChange: (columnId, visible) => {
+        setColumnVisibility(prev => ({
+          ...prev,
+          [columnId]: visible
+        }));
+        action("column-visibility-changed")({
+          [columnId]: visible
+        });
+      },
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      color: "$gray11",
+      children: "Toggle column visibility to customize your table view."
+    })]
+  });
+};
+const DensityOptions = () => {
+  const [density, _setDensity] = React.useState("comfortable");
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Density Options"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns.slice(0, 5),
+      onColumnVisibilityChange: () => {},
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Card, {
+      padding: "$4",
+      borderRadius: "$4",
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$3",
+        children: [/* @__PURE__ */jsxs(Text, {
+          fontSize: "$3",
+          fontWeight: "500",
+          children: ["Current Density: ", density]
+        }), /* @__PURE__ */jsxs(YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */jsxs(XStack, {
+            alignItems: "center",
+            gap: "$2",
+            children: [/* @__PURE__ */jsx(View, {
+              style: {
+                width: 20,
+                height: density === "compact" ? 8 : density === "comfortable" ? 12 : 16,
+                backgroundColor: "var(--color-blue9)",
+                borderRadius: 2
+              }
+            }), /* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              color: "$gray11",
+              children: "Compact: Tighter row spacing"
+            })]
+          }), /* @__PURE__ */jsxs(XStack, {
+            alignItems: "center",
+            gap: "$2",
+            children: [/* @__PURE__ */jsx(View, {
+              style: {
+                width: 20,
+                height: density === "comfortable" ? 12 : 16,
+                backgroundColor: "var(--color-green9)",
+                borderRadius: 2
+              }
+            }), /* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              color: "$gray11",
+              children: "Comfortable: Balanced spacing"
+            })]
+          }), /* @__PURE__ */jsxs(XStack, {
+            alignItems: "center",
+            gap: "$2",
+            children: [/* @__PURE__ */jsx(View, {
+              style: {
+                width: 20,
+                height: 16,
+                backgroundColor: "var(--color-purple9)",
+                borderRadius: 2
+              }
+            }), /* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              color: "$gray11",
+              children: "Spacious: More generous row spacing"
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};
+const Disabled = () => {
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Disabled State"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns,
+      onColumnVisibilityChange: () => {},
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      color: "$gray11",
+      children: "View options are disabled and cannot be interacted with."
+    })]
+  });
+};
+const MinimalColumns = () => {
+  const minimalColumns = transformedColumns.slice(0, 3);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Minimal Columns"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: minimalColumns,
+      onColumnVisibilityChange: () => {},
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      color: "$gray11",
+      children: "Example with only a few columns to manage."
+    })]
+  });
+};
+const AllOptionsCombined = () => {
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [density, _setDensity] = React.useState("comfortable");
+  const [pageSize, _setPageSize] = React.useState(10);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$6",
+    padding: "$4",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "All View Options Combined"
+    }), /* @__PURE__ */jsx(DataTableViewOptions, {
+      columns: transformedColumns,
+      onColumnVisibilityChange: (columnId, visible) => {
+        setColumnVisibility(prev => ({
+          ...prev,
+          [columnId]: visible
+        }));
+        action("column-visibility")({
+          [columnId]: visible
+        });
+      },
+      onColumnOrderChange: () => {},
+      onColumnSizingChange: () => {},
+      onSaveView: () => {},
+      onLoadView: () => {},
+      onResetToDefault: () => {}
+    }), /* @__PURE__ */jsx(Card, {
+      padding: "$4",
+      borderRadius: "$4",
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$3",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: "$3",
+          fontWeight: "500",
+          children: "Current Configuration:"
+        }), /* @__PURE__ */jsxs(XStack, {
+          gap: "$4",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */jsxs(YStack, {
+            gap: "$1",
+            children: [/* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              fontWeight: "500",
+              color: "$gray12",
+              children: "Density"
+            }), /* @__PURE__ */jsx(Text, {
+              fontSize: "$3",
+              color: "$blue11",
+              children: density
+            })]
+          }), /* @__PURE__ */jsxs(YStack, {
+            gap: "$1",
+            children: [/* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              fontWeight: "500",
+              color: "$gray12",
+              children: "Page Size"
+            }), /* @__PURE__ */jsxs(Text, {
+              fontSize: "$3",
+              color: "$green11",
+              children: [pageSize, " items"]
+            })]
+          }), /* @__PURE__ */jsxs(YStack, {
+            gap: "$1",
+            children: [/* @__PURE__ */jsx(Text, {
+              fontSize: "$2",
+              fontWeight: "500",
+              color: "$gray12",
+              children: "Visible Columns"
+            }), /* @__PURE__ */jsxs(Text, {
+              fontSize: "$3",
+              color: "$purple11",
+              children: [Object.keys(columnVisibility).filter(key => columnVisibility[key]).length || transformedColumns.length, " ", "of ", transformedColumns.length]
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+};
+export { AllOptionsCombined, Default, DensityOptions, Disabled, ManyColumns, MinimalColumns, WithPageSizeControls, DataTableViewOptions_stories_default as default };
+//# sourceMappingURL=DataTableViewOptions.stories.mjs.map