@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTable/DataTable.stories.native.js

@@ -1,2802 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fn } from "storybook/test";
-import { createColumnHelper } from "@tanstack/react-table";
-import React, { useMemo } from "react";
-import { Button } from "@multiplatform.one/forms";
-import { Avatar, Text, View, YStack } from "tamagui";
-import { DataTableFilters, DataTablePagination, DataTableToolbar } from "../../index.native.js";
-import { DataTable } from "./index.native.js";
-var meta = {
-  title: "Table/DataTable",
-  component: DataTable,
-  parameters: {
-    layout: "fullscreen"
-  },
-  // Storybook 10 errors when callback args are used implicitly during render.
-  // Provide explicit spies for all on* callbacks the component fires.
-  args: {
-    onStateChange: fn(),
-    onCellChange: fn(),
-    onDataChange: fn()
-  },
-  decorators: [function (Story) {
-    return /* @__PURE__ */_jsx(View, {
-      flex: 1,
-      padding: "$4",
-      width: "100%",
-      children: /* @__PURE__ */_jsx(Story, {})
-    });
-  }]
-};
-var DataTable_stories_default = meta;
-var generateUsers = function generateUsers2(count) {
-  var departments = ["Engineering", "Marketing", "Sales", "HR", "Finance"];
-  var roles = ["Developer", "Manager", "Analyst", "Designer", "Coordinator"];
-  var statuses = ["active", "inactive", "pending"];
-  return Array.from({
-    length: count
-  }, function (_, i) {
-    return {
-      id: `user-${i + 1}`,
-      avatar: `https://i.pravatar.cc/150?img=${i % 70 + 1}`,
-      firstName: `User${i + 1}`,
-      lastName: `Last${i + 1}`,
-      email: `user${i + 1}@company.com`,
-      age: 20 + i % 40,
-      department: departments[i % departments.length],
-      role: roles[i % roles.length],
-      salary: 5e4 + i % 1e5,
-      status: statuses[i % statuses.length],
-      joinDate: new Date(2020, i % 12, i % 28 + 1).toISOString().split("T")[0],
-      lastLogin: new Date(Date.now() - i % 30 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0]
-    };
-  });
-};
-var columnHelper = createColumnHelper();
-var columns = [
-// Avatar Column
-columnHelper.accessor("avatar", {
-  header: "Avatar",
-  cell: function cell(info) {
-    return /* @__PURE__ */_jsxs(Avatar, {
-      circular: true,
-      size: "$3",
-      children: [/* @__PURE__ */_jsx(Avatar.Image, {
-        accessibilityLabel: "User avatar",
-        src: info.getValue()
-      }), /* @__PURE__ */_jsx(Avatar.Fallback, {
-        backgroundColor: "$gray6"
-      })]
-    });
-  },
-  enableSorting: false,
-  enableColumnFilter: false,
-  size: 60
-}),
-// Name Column
-columnHelper.accessor(function (row) {
-  return `${row.firstName} ${row.lastName}`;
-}, {
-  id: "fullName",
-  header: "Full Name",
-  cell: function cell2(info) {
-    var user = info.row.original;
-    return /* @__PURE__ */_jsxs(YStack, {
-      gap: "$1",
-      children: [/* @__PURE__ */_jsx(Text, {
-        fontWeight: "600",
-        children: `${user.firstName} ${user.lastName}`
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$2",
-        color: "$gray11",
-        children: user.email
-      })]
-    });
-  },
-  filterFn: function filterFn(row, _id, value) {
-    var fullName = `${row.original.firstName} ${row.original.lastName}`.toLowerCase();
-    return fullName.includes(value.toLowerCase());
-  }
-}),
-// Age Column
-columnHelper.accessor("age", {
-  header: "Age",
-  cell: function cell3(info) {
-    return /* @__PURE__ */_jsx(Text, {
-      children: info.getValue()
-    });
-  },
-  filterFn: "inNumberRange"
-}),
-// Department Column
-columnHelper.accessor("department", {
-  header: "Department",
-  cell: function cell4(info) {
-    return /* @__PURE__ */_jsx(View, {
-      backgroundColor: "$blue5",
-      paddingHorizontal: "$2",
-      paddingVertical: "$1",
-      borderRadius: "$2",
-      children: /* @__PURE__ */_jsx(Text, {
-        color: "$blue11",
-        fontSize: "$2",
-        children: info.getValue()
-      })
-    });
-  }
-}),
-// Role Column
-columnHelper.accessor("role", {
-  header: "Role",
-  cell: function cell5(info) {
-    return /* @__PURE__ */_jsx(Text, {
-      children: info.getValue()
-    });
-  }
-}),
-// Salary Column
-columnHelper.accessor("salary", {
-  header: "Salary",
-  cell: function cell6(info) {
-    return /* @__PURE__ */_jsxs(Text, {
-      children: ["$", info.getValue().toLocaleString()]
-    });
-  },
-  filterFn: "inNumberRange"
-}),
-// Status Column
-columnHelper.accessor("status", {
-  header: "Status",
-  cell: function cell7(info) {
-    var status = info.getValue();
-    return /* @__PURE__ */_jsx(View, {
-      backgroundColor: status === "active" ? "$green5" : status === "inactive" ? "$red5" : "$yellow5",
-      paddingHorizontal: "$2",
-      paddingVertical: "$1",
-      borderRadius: "$2",
-      children: /* @__PURE__ */_jsx(Text, {
-        color: status === "active" ? "$green11" : status === "inactive" ? "$red11" : "$yellow11",
-        fontSize: "$2",
-        fontWeight: "600",
-        textTransform: "capitalize",
-        children: status
-      })
-    });
-  }
-}),
-// Join Date Column
-columnHelper.accessor("joinDate", {
-  header: "Join Date",
-  cell: function cell8(info) {
-    return /* @__PURE__ */_jsx(Text, {
-      children: new Date(info.getValue()).toLocaleDateString()
-    });
-  },
-  filterFn: "includesString"
-}),
-// Last Login Column
-columnHelper.accessor("lastLogin", {
-  header: "Last Login",
-  cell: function cell9(info) {
-    return /* @__PURE__ */_jsx(Text, {
-      children: new Date(info.getValue()).toLocaleDateString()
-    });
-  },
-  filterFn: "includesString"
-}),
-// Actions Column
-columnHelper.display({
-  id: "actions",
-  header: "Actions",
-  cell: function cell10(_info) {
-    return /* @__PURE__ */_jsx(Button, {
-      size: "$2",
-      variant: "outlined",
-      children: "Edit"
-    });
-  },
-  enableSorting: false,
-  enableColumnFilter: false
-})];
-var availableColumns = [{
-  id: "fullName",
-  label: "Full Name",
-  type: "text"
-}, {
-  id: "age",
-  label: "Age",
-  type: "number"
-}, {
-  id: "department",
-  label: "Department",
-  type: "select",
-  options: [{
-    label: "Engineering",
-    value: "Engineering",
-    count: 0
-  }, {
-    label: "Marketing",
-    value: "Marketing",
-    count: 0
-  }, {
-    label: "Sales",
-    value: "Sales",
-    count: 0
-  }, {
-    label: "HR",
-    value: "HR",
-    count: 0
-  }, {
-    label: "Finance",
-    value: "Finance",
-    count: 0
-  }]
-}, {
-  id: "role",
-  label: "Role",
-  type: "select",
-  options: [{
-    label: "Developer",
-    value: "Developer",
-    count: 0
-  }, {
-    label: "Manager",
-    value: "Manager",
-    count: 0
-  }, {
-    label: "Analyst",
-    value: "Analyst",
-    count: 0
-  }, {
-    label: "Designer",
-    value: "Designer",
-    count: 0
-  }, {
-    label: "Coordinator",
-    value: "Coordinator",
-    count: 0
-  }]
-}, {
-  id: "salary",
-  label: "Salary",
-  type: "number"
-}, {
-  id: "status",
-  label: "Status",
-  type: "select",
-  options: [{
-    label: "Active",
-    value: "active",
-    count: 0
-  }, {
-    label: "Inactive",
-    value: "inactive",
-    count: 0
-  }, {
-    label: "Pending",
-    value: "pending",
-    count: 0
-  }]
-}, {
-  id: "joinDate",
-  label: "Join Date",
-  type: "date"
-}, {
-  id: "lastLogin",
-  label: "Last Login",
-  type: "date"
-}];
-var AdvancedTableStory = function AdvancedTableStory2() {
-  var data = useMemo(function () {
-    return generateUsers(1e3);
-  }, []);
-  var columnsWithCounts = useMemo(function () {
-    return availableColumns.map(function (column) {
-      if (column.options) {
-        var counts = column.options.map(function (option) {
-          var count = data.filter(function (item) {
-            var value = item[column.id];
-            return String(value).toLowerCase() === option.value.toLowerCase();
-          }).length;
-          return {
-            ...option,
-            count
-          };
-        });
-        return {
-          ...column,
-          options: counts
-        };
-      }
-      return column;
-    });
-  }, [data]);
-  return /* @__PURE__ */_jsx(View, {
-    flex: 1,
-    padding: "$4",
-    children: /* @__PURE__ */_jsxs(YStack, {
-      gap: "$6",
-      children: [/* @__PURE__ */_jsxs(YStack, {
-        gap: "$2",
-        children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: "$6",
-          fontWeight: "bold",
-          children: "Advanced User Management Table"
-        }), /* @__PURE__ */_jsx(Text, {
-          fontSize: "$4",
-          color: "$gray11",
-          children: "Powerful filtering, sorting, and pagination with URL state management"
-        })]
-      }), /* @__PURE__ */_jsx(DataTable, {
-        data,
-        columns,
-        syncWithUrl: true,
-        enableFiltering: true,
-        enableSorting: true,
-        enablePagination: true,
-        enableColumnVisibility: true,
-        enableColumnResizing: true,
-        enableGlobalSearch: true,
-        enableViews: true,
-        renderToolbar: function renderToolbar(props) {
-          return /* @__PURE__ */_jsx(DataTableToolbar, {
-            ...props,
-            customActions: /* @__PURE__ */_jsx(Button, {
-              size: "$3",
-              variant: "outlined",
-              children: "Export CSV"
-            })
-          });
-        },
-        renderFilters: function renderFilters(props) {
-          return /* @__PURE__ */_jsx(DataTableFilters, {
-            ...props,
-            availableColumns: columnsWithCounts,
-            maxFilters: 5
-          });
-        },
-        renderPagination: function renderPagination(props) {
-          return /* @__PURE__ */_jsx(DataTablePagination, {
-            ...props,
-            compact: true
-          });
-        },
-        size: "md",
-        "aria-label": "User management table"
-      })]
-    })
-  });
-};
-var SimpleTableStory = function SimpleTableStory2() {
-  var data = useMemo(function () {
-    return generateUsers(50);
-  }, []);
-  var simpleColumns = columns.slice(1, 6);
-  return /* @__PURE__ */_jsx(View, {
-    flex: 1,
-    padding: "$4",
-    children: /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: simpleColumns,
-      enableFiltering: false,
-      enableSorting: true,
-      enablePagination: true,
-      enableGlobalSearch: true,
-      size: "sm"
-    })
-  });
-};
-var sampleData = [{
-  id: 1,
-  firstName: "John",
-  lastName: "Doe",
-  age: 28,
-  email: "john.doe@example.com",
-  status: "active"
-}, {
-  id: 2,
-  firstName: "Jane",
-  lastName: "Smith",
-  age: 32,
-  email: "jane.smith@example.com",
-  status: "active"
-}, {
-  id: 3,
-  firstName: "Bob",
-  lastName: "Johnson",
-  age: 45,
-  email: "bob.johnson@example.com",
-  status: "inactive"
-}, {
-  id: 4,
-  firstName: "Alice",
-  lastName: "Williams",
-  age: 29,
-  email: "alice.williams@example.com",
-  status: "active"
-}, {
-  id: 5,
-  firstName: "Charlie",
-  lastName: "Brown",
-  age: 35,
-  email: "charlie.brown@example.com",
-  status: "inactive"
-}];
-var personColumnHelper = createColumnHelper();
-var basicColumns = [personColumnHelper.accessor("id", {
-  header: "ID",
-  cell: function cell11(info) {
-    return info.getValue();
-  }
-}), personColumnHelper.accessor("firstName", {
-  header: "First Name",
-  cell: function cell12(info) {
-    return info.getValue();
-  }
-}), personColumnHelper.accessor("lastName", {
-  header: "Last Name",
-  cell: function cell13(info) {
-    return info.getValue();
-  }
-}), personColumnHelper.accessor("age", {
-  header: "Age",
-  cell: function cell14(info) {
-    return info.getValue();
-  }
-}), personColumnHelper.accessor("email", {
-  header: "Email",
-  cell: function cell15(info) {
-    return info.getValue();
-  }
-}), personColumnHelper.accessor("status", {
-  header: "Status",
-  cell: function cell16(info) {
-    var status = info.getValue();
-    return /* @__PURE__ */_jsx(Text, {
-      style: {
-        color: status === "active" ? "green" : "red",
-        fontWeight: "bold"
-      },
-      children: status
-    });
-  }
-})];
-var Advanced = {
-  name: "Main",
-  render: function render() {
-    return /* @__PURE__ */_jsx(AdvancedTableStory, {});
-  }
-};
-var Simple = {
-  render: function render2() {
-    return /* @__PURE__ */_jsx(SimpleTableStory, {});
-  }
-};
-var Basic = {
-  args: {
-    data: sampleData,
-    columns: basicColumns
-  }
-};
-var WithPagination = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enablePagination: true,
-    initialState: {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 2
-      }
-    }
-  }
-};
-var WithSorting = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableSorting: true
-  }
-};
-var WithFiltering = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableFiltering: true
-  }
-};
-var FullFeatured = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableFiltering: true,
-    enableSorting: true,
-    enablePagination: true,
-    initialState: {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 3
-      }
-    }
-  }
-};
-var Compact = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    size: "sm"
-  }
-};
-var Large = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    size: "lg"
-  }
-};
-var WithColumnResizing = {
-  args: {
-    data: sampleData,
-    columns: basicColumns.map(function (col) {
-      return {
-        ...col,
-        minSize: 80,
-        maxSize: 300
-      };
-    }),
-    enableColumnResizing: true
-  }
-};
-var largeData = Array.from({
-  length: 1e4
-}, function (_, i) {
-  return {
-    ...sampleData[i % sampleData.length],
-    id: i + 1,
-    firstName: `User${i + 1}`,
-    lastName: `Last${i + 1}`,
-    email: `user${i + 1}@example.com`
-  };
-});
-var WithVirtualization = {
-  args: {
-    data: largeData,
-    columns: basicColumns,
-    enableVirtualization: true,
-    virtualizationHeight: 400,
-    virtualizationOverscan: 5
-  }
-};
-var WithColumnPinning = {
-  args: {
-    data: sampleData,
-    columns: basicColumns.map(function (col) {
-      return {
-        ...col,
-        minSize: 80,
-        maxSize: 300
-      };
-    }),
-    enableColumnPinning: true,
-    maxPinnedColumns: 2,
-    enableColumnResizing: true
-  }
-};
-var WithKeyboardNavigation = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableKeyboardNavigation: true
-  }
-};
-var expandableData = sampleData.map(function (p, i) {
-  return {
-    ...p,
-    subRows: i < 2 ? [{
-      ...p,
-      id: -i - 1,
-      firstName: `Detail ${i}`
-    }] : void 0
-  };
-});
-var WithRowExpansion = {
-  args: {
-    data: expandableData,
-    columns: basicColumns,
-    enableRowExpansion: true,
-    renderSubComponent: function renderSubComponent(row) {
-      return /* @__PURE__ */_jsx(View, {
-        padding: "$4",
-        backgroundColor: "$color2",
-        children: /* @__PURE__ */_jsxs(Text, {
-          children: ["Expanded: ", row.original.firstName, " ", row.original.lastName]
-        })
-      });
-    }
-  }
-};
-var Empty = {
-  args: {
-    data: [],
-    columns: basicColumns
-  }
-};
-var ReadOnly = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var WithRowNumbers = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    showRowNumbers: true
-  }
-};
-var editableColumns = [{
-  accessorKey: "name",
-  header: "Name",
-  field: "input"
-}, {
-  accessorKey: "quantity",
-  header: "Quantity",
-  field: "stepper",
-  fieldProps: {
-    min: 0,
-    max: 100
-  }
-}, {
-  accessorKey: "category",
-  header: "Category",
-  field: "select",
-  fieldProps: {
-    options: [{
-      label: "Electronics",
-      value: "electronics"
-    }, {
-      label: "Clothing",
-      value: "clothing"
-    }, {
-      label: "Food",
-      value: "food"
-    }]
-  }
-}, {
-  accessorKey: "active",
-  header: "Active",
-  field: "checkbox"
-}];
-var editableData = [{
-  id: 1,
-  name: "Product A",
-  quantity: 10,
-  category: "electronics",
-  active: true
-}, {
-  id: 2,
-  name: "Product B",
-  quantity: 5,
-  category: "clothing",
-  active: false
-}, {
-  id: 3,
-  name: "Product C",
-  quantity: 20,
-  category: "food",
-  active: true
-}];
-var EditableTableStory = function EditableTableStory2() {
-  var [data, setData] = React.useState(editableData);
-  return /* @__PURE__ */_jsx(View, {
-    flex: 1,
-    padding: "$4",
-    children: /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: editableColumns,
-      onDataChange: setData,
-      showAddRow: true,
-      showDeleteRow: true,
-      showRowNumbers: true,
-      defaultRow: {
-        id: Date.now(),
-        name: "",
-        quantity: 0,
-        category: "electronics",
-        active: false
-      }
-    })
-  });
-};
-var EditableTable = {
-  render: function render3() {
-    return /* @__PURE__ */_jsx(EditableTableStory, {});
-  }
-};
-var WithFieldTypes = {
-  render: function render4() {
-    return /* @__PURE__ */_jsx(EditableTableStory, {});
-  }
-};
-var allFieldsData = [{
-  id: 1,
-  textField: "Hello World",
-  numberField: 42,
-  selectField: "option1",
-  comboboxField: "choice1",
-  checkboxField: true,
-  switchField: false,
-  dateField: "2024-03-15",
-  datetimeField: "2024-03-15 14:30",
-  timeField: "14:30",
-  durationField: 3600,
-  colorField: "#FF5733",
-  ratingField: 4,
-  phoneField: "+1234567890",
-  currencyField: 1250.5,
-  percentField: 75.5,
-  linkField: "DOC-001"
-}, {
-  id: 2,
-  textField: "Test Row",
-  numberField: 100,
-  selectField: "option2",
-  comboboxField: "choice2",
-  checkboxField: false,
-  switchField: true,
-  dateField: "2024-06-20",
-  datetimeField: "2024-06-20 09:00",
-  timeField: "09:00",
-  durationField: 7200,
-  colorField: "#33FF57",
-  ratingField: 5,
-  phoneField: "+0987654321",
-  currencyField: 2500,
-  percentField: 100,
-  linkField: "DOC-002"
-}, {
-  id: 3,
-  textField: "Another Entry",
-  numberField: 0,
-  selectField: "option3",
-  comboboxField: "choice3",
-  checkboxField: true,
-  switchField: true,
-  dateField: "2024-01-01",
-  datetimeField: "2024-01-01 00:00",
-  timeField: "00:00",
-  durationField: 0,
-  colorField: "#3357FF",
-  ratingField: 1,
-  phoneField: "+1111111111",
-  currencyField: 0,
-  percentField: 0,
-  linkField: "DOC-003"
-}];
-var selectOptions = [{
-  label: "Option 1",
-  value: "option1"
-}, {
-  label: "Option 2",
-  value: "option2"
-}, {
-  label: "Option 3",
-  value: "option3"
-}];
-var comboboxOptions = [{
-  label: "Choice 1",
-  value: "choice1"
-}, {
-  label: "Choice 2",
-  value: "choice2"
-}, {
-  label: "Choice 3",
-  value: "choice3"
-}, {
-  label: "Choice 4",
-  value: "choice4"
-}];
-var linkOptions = [{
-  label: "Document 001",
-  value: "DOC-001"
-}, {
-  label: "Document 002",
-  value: "DOC-002"
-}, {
-  label: "Document 003",
-  value: "DOC-003"
-}];
-var allFieldsColumns = [{
-  accessorKey: "textField",
-  header: "Text",
-  field: "input",
-  fieldProps: {
-    placeholder: "Enter text..."
-  }
-}, {
-  accessorKey: "numberField",
-  header: "Number",
-  field: "stepper",
-  fieldProps: {
-    min: 0,
-    max: 1e3,
-    placeholder: "0"
-  }
-}, {
-  accessorKey: "selectField",
-  header: "Select",
-  field: "select",
-  fieldProps: {
-    options: selectOptions,
-    placeholder: "Select..."
-  }
-}, {
-  accessorKey: "comboboxField",
-  header: "Combobox",
-  field: "combobox",
-  fieldProps: {
-    options: comboboxOptions,
-    placeholder: "Search..."
-  }
-}, {
-  accessorKey: "checkboxField",
-  header: "Checkbox",
-  field: "checkbox"
-}, {
-  accessorKey: "switchField",
-  header: "Switch",
-  field: "switch"
-}, {
-  accessorKey: "dateField",
-  header: "Date",
-  field: "datepicker",
-  fieldProps: {
-    placeholder: "YYYY-MM-DD"
-  }
-}, {
-  accessorKey: "datetimeField",
-  header: "DateTime",
-  field: "datetimepicker",
-  fieldProps: {
-    placeholder: "YYYY-MM-DD HH:MM"
-  }
-}, {
-  accessorKey: "timeField",
-  header: "Time",
-  field: "timepicker",
-  fieldProps: {
-    placeholder: "HH:MM"
-  }
-}, {
-  accessorKey: "durationField",
-  header: "Duration",
-  field: "duration",
-  fieldProps: {
-    placeholder: "Seconds"
-  }
-}, {
-  accessorKey: "colorField",
-  header: "Color",
-  field: "colorpicker",
-  fieldProps: {
-    placeholder: "#000000"
-  }
-}, {
-  accessorKey: "ratingField",
-  header: "Rating",
-  field: "rating"
-}, {
-  accessorKey: "phoneField",
-  header: "Phone",
-  field: "phoneinput",
-  fieldProps: {
-    placeholder: "+1234567890"
-  }
-}, {
-  accessorKey: "currencyField",
-  header: "Currency",
-  field: "stepper",
-  fieldProps: {
-    currency: "$",
-    placeholder: "0.00"
-  }
-}, {
-  accessorKey: "percentField",
-  header: "Percent",
-  field: "stepper",
-  fieldProps: {
-    placeholder: "0"
-  }
-}, {
-  accessorKey: "linkField",
-  header: "Link",
-  field: "combobox",
-  fieldProps: {
-    options: linkOptions,
-    placeholder: "Search document..."
-  }
-}];
-var AllFieldTypesEditableStory = function AllFieldTypesEditableStory2() {
-  var [data, setData] = React.useState(allFieldsData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsxs(YStack, {
-      gap: "$2",
-      children: [/* @__PURE__ */_jsx(Text, {
-        fontSize: "$6",
-        fontWeight: "bold",
-        children: "All Field Types - Editable"
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$gray11",
-        children: "Testing all 17 DataTable field types in editable mode"
-      })]
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: allFieldsColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      showAddRow: true,
-      showDeleteRow: true,
-      defaultRow: {
-        id: Date.now(),
-        textField: "",
-        numberField: 0,
-        selectField: "",
-        comboboxField: "",
-        checkboxField: false,
-        switchField: false,
-        dateField: "",
-        datetimeField: "",
-        timeField: "",
-        durationField: 0,
-        colorField: "",
-        ratingField: 0,
-        phoneField: "",
-        currencyField: 0,
-        percentField: 0,
-        linkField: ""
-      },
-      "aria-label": "All field types editable table"
-    })]
-  });
-};
-var AllFieldTypesEditable = {
-  render: function render5() {
-    return /* @__PURE__ */_jsx(AllFieldTypesEditableStory, {});
-  }
-};
-var AllFieldTypesReadOnlyStory = function AllFieldTypesReadOnlyStory2() {
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsxs(YStack, {
-      gap: "$2",
-      children: [/* @__PURE__ */_jsx(Text, {
-        fontSize: "$6",
-        fontWeight: "bold",
-        children: "All Field Types - Read Only"
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$gray11",
-        children: "Testing all 17 DataTable field types in read-only mode"
-      })]
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data: allFieldsData,
-      columns: allFieldsColumns,
-      readOnly: true,
-      showRowNumbers: true,
-      "aria-label": "All field types read-only table"
-    })]
-  });
-};
-var AllFieldTypesReadOnly = {
-  render: function render6() {
-    return /* @__PURE__ */_jsx(AllFieldTypesReadOnlyStory, {});
-  }
-};
-var textFieldData = [{
-  id: 1,
-  title: "First Item",
-  description: "Description for first item",
-  notes: "Some notes"
-}, {
-  id: 2,
-  title: "Second Item",
-  description: "Another description",
-  notes: "More notes here"
-}, {
-  id: 3,
-  title: "Third Item",
-  description: "Final description",
-  notes: "Final notes"
-}];
-var textFieldColumns = [{
-  accessorKey: "title",
-  header: "Title",
-  field: "input"
-}, {
-  accessorKey: "description",
-  header: "Description",
-  field: "input"
-}, {
-  accessorKey: "notes",
-  header: "Notes",
-  field: "input"
-}];
-var TextFieldStory = function TextFieldStory2() {
-  var [data, setData] = React.useState(textFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Text Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: textFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Text field type table"
-    })]
-  });
-};
-var TextField = {
-  render: function render7() {
-    return /* @__PURE__ */_jsx(TextFieldStory, {});
-  }
-};
-var TextFieldReadOnly = {
-  args: {
-    data: textFieldData,
-    columns: textFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var numberFieldData = [{
-  id: 1,
-  quantity: 10,
-  price: 99.99,
-  weight: 2.5
-}, {
-  id: 2,
-  quantity: 25,
-  price: 149.99,
-  weight: 5
-}, {
-  id: 3,
-  quantity: 100,
-  price: 9.99,
-  weight: 0.1
-}];
-var numberFieldColumns = [{
-  accessorKey: "quantity",
-  header: "Quantity",
-  field: "stepper",
-  fieldProps: {
-    min: 0
-  }
-}, {
-  accessorKey: "price",
-  header: "Price",
-  field: "stepper",
-  fieldProps: {
-    min: 0,
-    step: 0.01
-  }
-}, {
-  accessorKey: "weight",
-  header: "Weight (kg)",
-  field: "stepper",
-  fieldProps: {
-    min: 0
-  }
-}];
-var NumberFieldStory = function NumberFieldStory2() {
-  var [data, setData] = React.useState(numberFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Number Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: numberFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Number field type table"
-    })]
-  });
-};
-var NumberField = {
-  render: function render8() {
-    return /* @__PURE__ */_jsx(NumberFieldStory, {});
-  }
-};
-var NumberFieldReadOnly = {
-  args: {
-    data: numberFieldData,
-    columns: numberFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var selectFieldData = [{
-  id: 1,
-  category: "electronics",
-  priority: "high",
-  status: "active"
-}, {
-  id: 2,
-  category: "clothing",
-  priority: "medium",
-  status: "pending"
-}, {
-  id: 3,
-  category: "food",
-  priority: "low",
-  status: "inactive"
-}];
-var selectFieldColumns = [{
-  accessorKey: "category",
-  header: "Category",
-  field: "select",
-  fieldProps: {
-    options: [{
-      label: "Electronics",
-      value: "electronics"
-    }, {
-      label: "Clothing",
-      value: "clothing"
-    }, {
-      label: "Food",
-      value: "food"
-    }]
-  }
-}, {
-  accessorKey: "priority",
-  header: "Priority",
-  field: "select",
-  fieldProps: {
-    options: [{
-      label: "High",
-      value: "high"
-    }, {
-      label: "Medium",
-      value: "medium"
-    }, {
-      label: "Low",
-      value: "low"
-    }]
-  }
-}, {
-  accessorKey: "status",
-  header: "Status",
-  field: "select",
-  fieldProps: {
-    options: [{
-      label: "Active",
-      value: "active"
-    }, {
-      label: "Pending",
-      value: "pending"
-    }, {
-      label: "Inactive",
-      value: "inactive"
-    }]
-  }
-}];
-var SelectFieldStory = function SelectFieldStory2() {
-  var [data, setData] = React.useState(selectFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Select Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: selectFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Select field type table"
-    })]
-  });
-};
-var SelectField = {
-  render: function render9() {
-    return /* @__PURE__ */_jsx(SelectFieldStory, {});
-  }
-};
-var SelectFieldReadOnly = {
-  args: {
-    data: selectFieldData,
-    columns: selectFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var checkboxFieldData = [{
-  id: 1,
-  isActive: true,
-  isVerified: true,
-  hasSubscription: false
-}, {
-  id: 2,
-  isActive: false,
-  isVerified: true,
-  hasSubscription: true
-}, {
-  id: 3,
-  isActive: true,
-  isVerified: false,
-  hasSubscription: true
-}];
-var checkboxFieldColumns = [{
-  accessorKey: "isActive",
-  header: "Active",
-  field: "checkbox"
-}, {
-  accessorKey: "isVerified",
-  header: "Verified",
-  field: "checkbox"
-}, {
-  accessorKey: "hasSubscription",
-  header: "Subscription",
-  field: "checkbox"
-}];
-var CheckboxFieldStory = function CheckboxFieldStory2() {
-  var [data, setData] = React.useState(checkboxFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Checkbox Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: checkboxFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Checkbox field type table"
-    })]
-  });
-};
-var CheckboxField = {
-  render: function render10() {
-    return /* @__PURE__ */_jsx(CheckboxFieldStory, {});
-  }
-};
-var CheckboxFieldReadOnly = {
-  args: {
-    data: checkboxFieldData,
-    columns: checkboxFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var switchFieldData = [{
-  id: 1,
-  enabled: true,
-  notifications: false,
-  darkMode: true
-}, {
-  id: 2,
-  enabled: false,
-  notifications: true,
-  darkMode: false
-}, {
-  id: 3,
-  enabled: true,
-  notifications: true,
-  darkMode: true
-}];
-var switchFieldColumns = [{
-  accessorKey: "enabled",
-  header: "Enabled",
-  field: "switch"
-}, {
-  accessorKey: "notifications",
-  header: "Notifications",
-  field: "switch"
-}, {
-  accessorKey: "darkMode",
-  header: "Dark Mode",
-  field: "switch"
-}];
-var SwitchFieldStory = function SwitchFieldStory2() {
-  var [data, setData] = React.useState(switchFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Switch Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: switchFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Switch field type table"
-    })]
-  });
-};
-var SwitchField = {
-  render: function render11() {
-    return /* @__PURE__ */_jsx(SwitchFieldStory, {});
-  }
-};
-var SwitchFieldReadOnly = {
-  args: {
-    data: switchFieldData,
-    columns: switchFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var dateTimeFieldData = [{
-  id: 1,
-  date: "2024-03-15",
-  datetime: "2024-03-15 14:30",
-  time: "14:30"
-}, {
-  id: 2,
-  date: "2024-06-20",
-  datetime: "2024-06-20 09:00",
-  time: "09:00"
-}, {
-  id: 3,
-  date: "2024-12-25",
-  datetime: "2024-12-25 00:00",
-  time: "00:00"
-}];
-var dateTimeFieldColumns = [{
-  accessorKey: "date",
-  header: "Date",
-  field: "datepicker"
-}, {
-  accessorKey: "datetime",
-  header: "DateTime",
-  field: "datetimepicker"
-}, {
-  accessorKey: "time",
-  header: "Time",
-  field: "timepicker"
-}];
-var DateTimeFieldStory = function DateTimeFieldStory2() {
-  var [data, setData] = React.useState(dateTimeFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Date/Time Field Types"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: dateTimeFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Date time field types table"
-    })]
-  });
-};
-var DateTimeField = {
-  render: function render12() {
-    return /* @__PURE__ */_jsx(DateTimeFieldStory, {});
-  }
-};
-var DateTimeFieldReadOnly = {
-  args: {
-    data: dateTimeFieldData,
-    columns: dateTimeFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var durationFieldData = [{
-  id: 1,
-  taskDuration: 3600,
-  breakTime: 900,
-  totalTime: 4500
-}, {
-  id: 2,
-  taskDuration: 7200,
-  breakTime: 1800,
-  totalTime: 9e3
-}, {
-  id: 3,
-  taskDuration: 1800,
-  breakTime: 300,
-  totalTime: 2100
-}];
-var durationFieldColumns = [{
-  accessorKey: "taskDuration",
-  header: "Task Duration (s)",
-  field: "duration"
-}, {
-  accessorKey: "breakTime",
-  header: "Break Time (s)",
-  field: "duration"
-}, {
-  accessorKey: "totalTime",
-  header: "Total Time (s)",
-  field: "duration"
-}];
-var DurationFieldStory = function DurationFieldStory2() {
-  var [data, setData] = React.useState(durationFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Duration Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: durationFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Duration field type table"
-    })]
-  });
-};
-var DurationField = {
-  render: function render13() {
-    return /* @__PURE__ */_jsx(DurationFieldStory, {});
-  }
-};
-var DurationFieldReadOnly = {
-  args: {
-    data: durationFieldData,
-    columns: durationFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var colorFieldData = [{
-  id: 1,
-  primaryColor: "#FF5733",
-  secondaryColor: "#33FF57",
-  accentColor: "#3357FF"
-}, {
-  id: 2,
-  primaryColor: "#E91E63",
-  secondaryColor: "#9C27B0",
-  accentColor: "#673AB7"
-}, {
-  id: 3,
-  primaryColor: "#00BCD4",
-  secondaryColor: "#009688",
-  accentColor: "#4CAF50"
-}];
-var colorFieldColumns = [{
-  accessorKey: "primaryColor",
-  header: "Primary Color",
-  field: "colorpicker"
-}, {
-  accessorKey: "secondaryColor",
-  header: "Secondary Color",
-  field: "colorpicker"
-}, {
-  accessorKey: "accentColor",
-  header: "Accent Color",
-  field: "colorpicker"
-}];
-var ColorFieldStory = function ColorFieldStory2() {
-  var [data, setData] = React.useState(colorFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Color Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: colorFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Color field type table"
-    })]
-  });
-};
-var ColorField = {
-  render: function render14() {
-    return /* @__PURE__ */_jsx(ColorFieldStory, {});
-  }
-};
-var ColorFieldReadOnly = {
-  args: {
-    data: colorFieldData,
-    columns: colorFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var ratingFieldData = [{
-  id: 1,
-  productRating: 5,
-  serviceRating: 4,
-  overallRating: 5
-}, {
-  id: 2,
-  productRating: 3,
-  serviceRating: 5,
-  overallRating: 4
-}, {
-  id: 3,
-  productRating: 4,
-  serviceRating: 3,
-  overallRating: 3
-}];
-var ratingFieldColumns = [{
-  accessorKey: "productRating",
-  header: "Product",
-  field: "rating"
-}, {
-  accessorKey: "serviceRating",
-  header: "Service",
-  field: "rating"
-}, {
-  accessorKey: "overallRating",
-  header: "Overall",
-  field: "rating"
-}];
-var RatingFieldStory = function RatingFieldStory2() {
-  var [data, setData] = React.useState(ratingFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Rating Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: ratingFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Rating field type table"
-    })]
-  });
-};
-var RatingField = {
-  render: function render15() {
-    return /* @__PURE__ */_jsx(RatingFieldStory, {});
-  }
-};
-var RatingFieldReadOnly = {
-  args: {
-    data: ratingFieldData,
-    columns: ratingFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var phoneFieldData = [{
-  id: 1,
-  mobile: "+1234567890",
-  work: "+0987654321",
-  home: "+1111111111"
-}, {
-  id: 2,
-  mobile: "+4455667788",
-  work: "+9988776655",
-  home: "+2233445566"
-}, {
-  id: 3,
-  mobile: "+1122334455",
-  work: "+6677889900",
-  home: "+3344556677"
-}];
-var phoneFieldColumns = [{
-  accessorKey: "mobile",
-  header: "Mobile",
-  field: "phoneinput"
-}, {
-  accessorKey: "work",
-  header: "Work",
-  field: "phoneinput"
-}, {
-  accessorKey: "home",
-  header: "Home",
-  field: "phoneinput"
-}];
-var PhoneFieldStory = function PhoneFieldStory2() {
-  var [data, setData] = React.useState(phoneFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Phone Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: phoneFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Phone field type table"
-    })]
-  });
-};
-var PhoneField = {
-  render: function render16() {
-    return /* @__PURE__ */_jsx(PhoneFieldStory, {});
-  }
-};
-var PhoneFieldReadOnly = {
-  args: {
-    data: phoneFieldData,
-    columns: phoneFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var currencyFieldData = [{
-  id: 1,
-  priceUSD: 99.99,
-  priceEUR: 89.99,
-  priceGBP: 79.99
-}, {
-  id: 2,
-  priceUSD: 199.5,
-  priceEUR: 179.5,
-  priceGBP: 159.5
-}, {
-  id: 3,
-  priceUSD: 49,
-  priceEUR: 44,
-  priceGBP: 39
-}];
-var currencyFieldColumns = [{
-  accessorKey: "priceUSD",
-  header: "Price (USD)",
-  field: "stepper",
-  fieldProps: {
-    currency: "$"
-  }
-}, {
-  accessorKey: "priceEUR",
-  header: "Price (EUR)",
-  field: "stepper",
-  fieldProps: {
-    currency: "\u20AC"
-  }
-}, {
-  accessorKey: "priceGBP",
-  header: "Price (GBP)",
-  field: "stepper",
-  fieldProps: {
-    currency: "\xA3"
-  }
-}];
-var CurrencyFieldStory = function CurrencyFieldStory2() {
-  var [data, setData] = React.useState(currencyFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Currency Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: currencyFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Currency field type table"
-    })]
-  });
-};
-var CurrencyField = {
-  render: function render17() {
-    return /* @__PURE__ */_jsx(CurrencyFieldStory, {});
-  }
-};
-var CurrencyFieldReadOnly = {
-  args: {
-    data: currencyFieldData,
-    columns: currencyFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var percentFieldData = [{
-  id: 1,
-  progress: 75,
-  completion: 100,
-  discount: 10
-}, {
-  id: 2,
-  progress: 50,
-  completion: 80,
-  discount: 25
-}, {
-  id: 3,
-  progress: 25,
-  completion: 60,
-  discount: 5
-}];
-var percentFieldColumns = [{
-  accessorKey: "progress",
-  header: "Progress",
-  field: "stepper"
-}, {
-  accessorKey: "completion",
-  header: "Completion",
-  field: "stepper"
-}, {
-  accessorKey: "discount",
-  header: "Discount",
-  field: "stepper"
-}];
-var PercentFieldStory = function PercentFieldStory2() {
-  var [data, setData] = React.useState(percentFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Percent Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: percentFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Percent field type table"
-    })]
-  });
-};
-var PercentField = {
-  render: function render18() {
-    return /* @__PURE__ */_jsx(PercentFieldStory, {});
-  }
-};
-var PercentFieldReadOnly = {
-  args: {
-    data: percentFieldData,
-    columns: percentFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var countryOptions = [{
-  label: "United States",
-  value: "us"
-}, {
-  label: "United Kingdom",
-  value: "uk"
-}, {
-  label: "Germany",
-  value: "de"
-}, {
-  label: "France",
-  value: "fr"
-}, {
-  label: "Japan",
-  value: "jp"
-}];
-var cityOptions = [{
-  label: "New York",
-  value: "nyc"
-}, {
-  label: "London",
-  value: "london"
-}, {
-  label: "Berlin",
-  value: "berlin"
-}, {
-  label: "Paris",
-  value: "paris"
-}, {
-  label: "Tokyo",
-  value: "tokyo"
-}];
-var languageOptions = [{
-  label: "English",
-  value: "en"
-}, {
-  label: "German",
-  value: "de"
-}, {
-  label: "French",
-  value: "fr"
-}, {
-  label: "Japanese",
-  value: "ja"
-}, {
-  label: "Spanish",
-  value: "es"
-}];
-var comboboxFieldData = [{
-  id: 1,
-  country: "us",
-  city: "nyc",
-  language: "en"
-}, {
-  id: 2,
-  country: "uk",
-  city: "london",
-  language: "en"
-}, {
-  id: 3,
-  country: "de",
-  city: "berlin",
-  language: "de"
-}];
-var comboboxFieldColumns = [{
-  accessorKey: "country",
-  header: "Country",
-  field: "combobox",
-  fieldProps: {
-    options: countryOptions
-  }
-}, {
-  accessorKey: "city",
-  header: "City",
-  field: "combobox",
-  fieldProps: {
-    options: cityOptions
-  }
-}, {
-  accessorKey: "language",
-  header: "Language",
-  field: "combobox",
-  fieldProps: {
-    options: languageOptions
-  }
-}];
-var ComboboxFieldStory = function ComboboxFieldStory2() {
-  var [data, setData] = React.useState(comboboxFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Combobox Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: comboboxFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Combobox field type table"
-    })]
-  });
-};
-var ComboboxField = {
-  render: function render19() {
-    return /* @__PURE__ */_jsx(ComboboxFieldStory, {});
-  }
-};
-var ComboboxFieldReadOnly = {
-  args: {
-    data: comboboxFieldData,
-    columns: comboboxFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var customerOptions = [{
-  label: "CUST-001: John Doe",
-  value: "CUST-001"
-}, {
-  label: "CUST-002: Jane Smith",
-  value: "CUST-002"
-}, {
-  label: "CUST-003: Bob Johnson",
-  value: "CUST-003"
-}];
-var productOptions = [{
-  label: "PROD-001: Widget A",
-  value: "PROD-001"
-}, {
-  label: "PROD-002: Widget B",
-  value: "PROD-002"
-}, {
-  label: "PROD-003: Widget C",
-  value: "PROD-003"
-}];
-var orderOptions = [{
-  label: "ORD-001",
-  value: "ORD-001"
-}, {
-  label: "ORD-002",
-  value: "ORD-002"
-}, {
-  label: "ORD-003",
-  value: "ORD-003"
-}];
-var linkFieldData = [{
-  id: 1,
-  customer: "CUST-001",
-  product: "PROD-001",
-  order: "ORD-001"
-}, {
-  id: 2,
-  customer: "CUST-002",
-  product: "PROD-002",
-  order: "ORD-002"
-}, {
-  id: 3,
-  customer: "CUST-003",
-  product: "PROD-003",
-  order: "ORD-003"
-}];
-var linkFieldColumns = [{
-  accessorKey: "customer",
-  header: "Customer",
-  field: "combobox",
-  fieldProps: {
-    options: customerOptions
-  }
-}, {
-  accessorKey: "product",
-  header: "Product",
-  field: "combobox",
-  fieldProps: {
-    options: productOptions
-  }
-}, {
-  accessorKey: "order",
-  header: "Order",
-  field: "combobox",
-  fieldProps: {
-    options: orderOptions
-  }
-}];
-var LinkFieldStory = function LinkFieldStory2() {
-  var [data, setData] = React.useState(linkFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Link Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: linkFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Link field type table"
-    })]
-  });
-};
-var LinkField = {
-  render: function render20() {
-    return /* @__PURE__ */_jsx(LinkFieldStory, {});
-  }
-};
-var LinkFieldReadOnly = {
-  args: {
-    data: linkFieldData,
-    columns: linkFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var customFieldData = [{
-  id: 1,
-  customRender: {
-    name: "John",
-    role: "Admin"
-  },
-  customBadge: "premium"
-}, {
-  id: 2,
-  customRender: {
-    name: "Jane",
-    role: "User"
-  },
-  customBadge: "standard"
-}, {
-  id: 3,
-  customRender: {
-    name: "Bob",
-    role: "Guest"
-  },
-  customBadge: "trial"
-}];
-var customFieldColumns = [{
-  accessorKey: "customRender",
-  header: "Custom User",
-  field: "custom",
-  fieldProps: {
-    render: function render21(value) {
-      return /* @__PURE__ */_jsxs(View, {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: "$2",
-        children: [/* @__PURE__ */_jsx(View, {
-          backgroundColor: "$blue5",
-          padding: "$1",
-          borderRadius: "$2",
-          children: /* @__PURE__ */_jsx(Text, {
-            fontSize: "$2",
-            color: "$blue11",
-            children: (value === null || value === void 0 ? void 0 : value.role) || "N/A"
-          })
-        }), /* @__PURE__ */_jsx(Text, {
-          children: (value === null || value === void 0 ? void 0 : value.name) || "Unknown"
-        })]
-      });
-    }
-  }
-}, {
-  accessorKey: "customBadge",
-  header: "Badge",
-  field: "custom",
-  fieldProps: {
-    render: function render22(value, _row, onChange) {
-      return /* @__PURE__ */_jsx(View, {
-        flexDirection: "row",
-        gap: "$1",
-        children: ["premium", "standard", "trial"].map(function (badge) {
-          return /* @__PURE__ */_jsx(View, {
-            backgroundColor: value === badge ? "$green5" : "$gray3",
-            padding: "$1",
-            borderRadius: "$2",
-            onPress: function onPress() {
-              return onChange(badge);
-            },
-            cursor: "pointer",
-            children: /* @__PURE__ */_jsx(Text, {
-              fontSize: "$2",
-              color: value === badge ? "$green11" : "$gray11",
-              children: badge
-            })
-          }, badge);
-        })
-      });
-    }
-  }
-}];
-var CustomFieldStory = function CustomFieldStory2() {
-  var [data, setData] = React.useState(customFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Custom Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: customFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Custom field type table"
-    })]
-  });
-};
-var CustomField = {
-  render: function render23() {
-    return /* @__PURE__ */_jsx(CustomFieldStory, {});
-  }
-};
-var searchableData = [{
-  id: 1,
-  name: "John Doe",
-  email: "john@example.com",
-  department: "Engineering"
-}, {
-  id: 2,
-  name: "Jane Smith",
-  email: "jane@example.com",
-  department: "Marketing"
-}, {
-  id: 3,
-  name: "Bob Johnson",
-  email: "bob@example.com",
-  department: "Sales"
-}, {
-  id: 4,
-  name: "Alice Williams",
-  email: "alice@example.com",
-  department: "HR"
-}, {
-  id: 5,
-  name: "Charlie Brown",
-  email: "charlie@example.com",
-  department: "Finance"
-}];
-var searchableColumns = [{
-  accessorKey: "id",
-  header: "ID",
-  field: "stepper"
-}, {
-  accessorKey: "name",
-  header: "Name",
-  field: "input"
-}, {
-  accessorKey: "email",
-  header: "Email",
-  field: "input"
-}, {
-  accessorKey: "department",
-  header: "Department",
-  field: "select",
-  fieldProps: {
-    options: [{
-      label: "Engineering",
-      value: "Engineering"
-    }, {
-      label: "Marketing",
-      value: "Marketing"
-    }, {
-      label: "Sales",
-      value: "Sales"
-    }, {
-      label: "HR",
-      value: "HR"
-    }, {
-      label: "Finance",
-      value: "Finance"
-    }]
-  }
-}];
-var GlobalSearchStory = function GlobalSearchStory2() {
-  var [data] = React.useState(searchableData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsxs(YStack, {
-      gap: "$2",
-      children: [/* @__PURE__ */_jsx(Text, {
-        fontSize: "$5",
-        fontWeight: "bold",
-        children: "Global Search"
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$gray11",
-        children: "Search across all visible columns"
-      })]
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: searchableColumns,
-      enableGlobalSearch: true,
-      enableFiltering: true,
-      enableSorting: true,
-      showRowNumbers: true,
-      "aria-label": "Global search table"
-    })]
-  });
-};
-var GlobalSearch = {
-  render: function render24() {
-    return /* @__PURE__ */_jsx(GlobalSearchStory, {});
-  }
-};
-var ServerSideSearchStory = function ServerSideSearchStory2() {
-  var [data, setData] = React.useState(searchableData);
-  var [isLoading, setIsLoading] = React.useState(false);
-  var handleSearch = React.useCallback(function (searchTerm) {
-    setIsLoading(true);
-    setTimeout(function () {
-      if (!searchTerm) {
-        setData(searchableData);
-      } else {
-        var filtered = searchableData.filter(function (row) {
-          return row.name.toLowerCase().includes(searchTerm.toLowerCase()) || row.email.toLowerCase().includes(searchTerm.toLowerCase()) || row.department.toLowerCase().includes(searchTerm.toLowerCase());
-        });
-        setData(filtered);
-      }
-      setIsLoading(false);
-    }, 500);
-  }, []);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsxs(YStack, {
-      gap: "$2",
-      children: [/* @__PURE__ */_jsx(Text, {
-        fontSize: "$5",
-        fontWeight: "bold",
-        children: "Server-Side Search (Simulated)"
-      }), /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
-        color: "$gray11",
-        children: "Search triggers server callback with debouncing"
-      })]
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: searchableColumns,
-      enableGlobalSearch: true,
-      manualFiltering: true,
-      renderToolbar: function renderToolbar(props) {
-        return /* @__PURE__ */_jsx(DataTableToolbar, {
-          ...props,
-          onGlobalFilterChange: function onGlobalFilterChange(value) {
-            props.onGlobalFilterChange(value);
-            handleSearch(value);
-          }
-        });
-      },
-      initialState: {
-        isLoading
-      },
-      showRowNumbers: true,
-      "aria-label": "Server-side search table"
-    })]
-  });
-};
-var ServerSideSearch = {
-  render: function render25() {
-    return /* @__PURE__ */_jsx(ServerSideSearchStory, {});
-  }
-};
-var textareaFieldData = [{
-  id: 1,
-  description: "This is a longer description that spans multiple lines.",
-  notes: "Important notes here",
-  comments: "User feedback"
-}, {
-  id: 2,
-  description: "Another description with more details about the item.",
-  notes: "Additional notes",
-  comments: "More comments"
-}];
-var textareaFieldColumns = [{
-  accessorKey: "description",
-  header: "Description",
-  field: "textarea"
-}, {
-  accessorKey: "notes",
-  header: "Notes",
-  field: "textarea"
-}, {
-  accessorKey: "comments",
-  header: "Comments",
-  field: "textarea"
-}];
-var TextareaFieldStory = function TextareaFieldStory2() {
-  var [data, setData] = React.useState(textareaFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Textarea Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: textareaFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Textarea field type table"
-    })]
-  });
-};
-var TextareaField = {
-  render: function render26() {
-    return /* @__PURE__ */_jsx(TextareaFieldStory, {});
-  }
-};
-var TextareaFieldReadOnly = {
-  args: {
-    data: textareaFieldData,
-    columns: textareaFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var signatureFieldData = [{
-  id: 1,
-  customerSignature: "sig_data_1",
-  managerSignature: null,
-  witnessSignature: "sig_data_3"
-}, {
-  id: 2,
-  customerSignature: null,
-  managerSignature: "sig_data_2",
-  witnessSignature: null
-}, {
-  id: 3,
-  customerSignature: "sig_data_4",
-  managerSignature: "sig_data_5",
-  witnessSignature: "sig_data_6"
-}];
-var signatureFieldColumns = [{
-  accessorKey: "customerSignature",
-  header: "Customer",
-  field: "signature"
-}, {
-  accessorKey: "managerSignature",
-  header: "Manager",
-  field: "signature"
-}, {
-  accessorKey: "witnessSignature",
-  header: "Witness",
-  field: "signature"
-}];
-var SignatureFieldStory = function SignatureFieldStory2() {
-  var [data, setData] = React.useState(signatureFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Signature Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: signatureFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Signature field type table"
-    })]
-  });
-};
-var SignatureField = {
-  render: function render27() {
-    return /* @__PURE__ */_jsx(SignatureFieldStory, {});
-  }
-};
-var SignatureFieldReadOnly = {
-  args: {
-    data: signatureFieldData,
-    columns: signatureFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var fileFieldData = [{
-  id: 1,
-  document: "report_2024.pdf",
-  attachment: null,
-  report: "analysis.docx"
-}, {
-  id: 2,
-  document: null,
-  attachment: "invoice.pdf",
-  report: null
-}, {
-  id: 3,
-  document: "contract.pdf",
-  attachment: "receipt.jpg",
-  report: "summary.xlsx"
-}];
-var fileFieldColumns = [{
-  accessorKey: "document",
-  header: "Document",
-  field: "fileupload"
-}, {
-  accessorKey: "attachment",
-  header: "Attachment",
-  field: "fileupload"
-}, {
-  accessorKey: "report",
-  header: "Report",
-  field: "fileupload"
-}];
-var FileFieldStory = function FileFieldStory2() {
-  var [data, setData] = React.useState(fileFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "File Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: fileFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "File field type table"
-    })]
-  });
-};
-var FileField = {
-  render: function render28() {
-    return /* @__PURE__ */_jsx(FileFieldStory, {});
-  }
-};
-var FileFieldReadOnly = {
-  args: {
-    data: fileFieldData,
-    columns: fileFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var imageFieldData = [{
-  id: 1,
-  avatar: "user1.jpg",
-  productImage: "product1.png",
-  thumbnail: null
-}, {
-  id: 2,
-  avatar: null,
-  productImage: "product2.png",
-  thumbnail: "thumb2.jpg"
-}, {
-  id: 3,
-  avatar: "user3.jpg",
-  productImage: null,
-  thumbnail: "thumb3.jpg"
-}];
-var imageFieldColumns = [{
-  accessorKey: "avatar",
-  header: "Avatar",
-  field: "image"
-}, {
-  accessorKey: "productImage",
-  header: "Product Image",
-  field: "image"
-}, {
-  accessorKey: "thumbnail",
-  header: "Thumbnail",
-  field: "image"
-}];
-var ImageFieldStory = function ImageFieldStory2() {
-  var [data, setData] = React.useState(imageFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Image Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: imageFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Image field type table"
-    })]
-  });
-};
-var ImageField = {
-  render: function render29() {
-    return /* @__PURE__ */_jsx(ImageFieldStory, {});
-  }
-};
-var ImageFieldReadOnly = {
-  args: {
-    data: imageFieldData,
-    columns: imageFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var geolocationFieldData = [{
-  id: 1,
-  storeLocation: {
-    lat: 40.7128,
-    lng: -74.006
-  },
-  deliveryAddress: "123 Main St, NYC",
-  pickupPoint: null
-}, {
-  id: 2,
-  storeLocation: null,
-  deliveryAddress: null,
-  pickupPoint: {
-    lat: 34.0522,
-    lng: -118.2437
-  }
-}, {
-  id: 3,
-  storeLocation: {
-    lat: 51.5074,
-    lng: -0.1278
-  },
-  deliveryAddress: "456 High St, London",
-  pickupPoint: {
-    lat: 48.8566,
-    lng: 2.3522
-  }
-}];
-var geolocationFieldColumns = [{
-  accessorKey: "storeLocation",
-  header: "Store Location",
-  field: "geolocation"
-}, {
-  accessorKey: "deliveryAddress",
-  header: "Delivery Address",
-  field: "geolocation"
-}, {
-  accessorKey: "pickupPoint",
-  header: "Pickup Point",
-  field: "geolocation"
-}];
-var GeolocationFieldStory = function GeolocationFieldStory2() {
-  var [data, setData] = React.useState(geolocationFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Geolocation Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: geolocationFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Geolocation field type table"
-    })]
-  });
-};
-var GeolocationField = {
-  render: function render30() {
-    return /* @__PURE__ */_jsx(GeolocationFieldStory, {});
-  }
-};
-var GeolocationFieldReadOnly = {
-  args: {
-    data: geolocationFieldData,
-    columns: geolocationFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var barcodeFieldData = [{
-  id: 1,
-  sku: "SKU-001234",
-  upc: "012345678901",
-  serialNumber: "SN-ABC123"
-}, {
-  id: 2,
-  sku: "SKU-005678",
-  upc: "098765432109",
-  serialNumber: "SN-DEF456"
-}, {
-  id: 3,
-  sku: "SKU-009012",
-  upc: "111222333444",
-  serialNumber: "SN-GHI789"
-}];
-var barcodeFieldColumns = [{
-  accessorKey: "sku",
-  header: "SKU",
-  field: "barcode"
-}, {
-  accessorKey: "upc",
-  header: "UPC",
-  field: "barcode"
-}, {
-  accessorKey: "serialNumber",
-  header: "Serial Number",
-  field: "barcode"
-}];
-var BarcodeFieldStory = function BarcodeFieldStory2() {
-  var [data, setData] = React.useState(barcodeFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Barcode Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: barcodeFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Barcode field type table"
-    })]
-  });
-};
-var BarcodeField = {
-  render: function render31() {
-    return /* @__PURE__ */_jsx(BarcodeFieldStory, {});
-  }
-};
-var BarcodeFieldReadOnly = {
-  args: {
-    data: barcodeFieldData,
-    columns: barcodeFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var sliderFieldData = [{
-  id: 1,
-  volume: 75,
-  brightness: 100,
-  opacity: 50
-}, {
-  id: 2,
-  volume: 30,
-  brightness: 60,
-  opacity: 80
-}, {
-  id: 3,
-  volume: 100,
-  brightness: 25,
-  opacity: 100
-}];
-var sliderFieldColumns = [{
-  accessorKey: "volume",
-  header: "Volume",
-  field: "slider",
-  fieldProps: {
-    max: 100
-  }
-}, {
-  accessorKey: "brightness",
-  header: "Brightness",
-  field: "slider",
-  fieldProps: {
-    max: 100
-  }
-}, {
-  accessorKey: "opacity",
-  header: "Opacity",
-  field: "slider",
-  fieldProps: {
-    max: 100
-  }
-}];
-var SliderFieldStory = function SliderFieldStory2() {
-  var [data, setData] = React.useState(sliderFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Slider Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: sliderFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Slider field type table"
-    })]
-  });
-};
-var SliderField = {
-  render: function render32() {
-    return /* @__PURE__ */_jsx(SliderFieldStory, {});
-  }
-};
-var SliderFieldReadOnly = {
-  args: {
-    data: sliderFieldData,
-    columns: sliderFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var progressFieldData = [{
-  id: 1,
-  taskProgress: 75,
-  downloadProgress: 100,
-  completionRate: 50
-}, {
-  id: 2,
-  taskProgress: 30,
-  downloadProgress: 60,
-  completionRate: 80
-}, {
-  id: 3,
-  taskProgress: 100,
-  downloadProgress: 25,
-  completionRate: 100
-}];
-var progressFieldColumns = [{
-  accessorKey: "taskProgress",
-  header: "Task Progress",
-  field: "progress"
-}, {
-  accessorKey: "downloadProgress",
-  header: "Download",
-  field: "progress"
-}, {
-  accessorKey: "completionRate",
-  header: "Completion",
-  field: "progress"
-}];
-var ProgressFieldStory = function ProgressFieldStory2() {
-  var [data, setData] = React.useState(progressFieldData);
-  return /* @__PURE__ */_jsxs(YStack, {
-    gap: "$4",
-    flex: 1,
-    padding: "$4",
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: "$5",
-      fontWeight: "bold",
-      children: "Progress Field Type"
-    }), /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns: progressFieldColumns,
-      onDataChange: setData,
-      showRowNumbers: true,
-      "aria-label": "Progress field type table"
-    })]
-  });
-};
-var ProgressField = {
-  render: function render33() {
-    return /* @__PURE__ */_jsx(ProgressFieldStory, {});
-  }
-};
-var ProgressFieldReadOnly = {
-  args: {
-    data: progressFieldData,
-    columns: progressFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-var ColumnLayoutEqual = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    columnLayout: "equal",
-    enablePagination: true
-  }
-};
-var ColumnLayoutAuto = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    columnLayout: "auto",
-    enablePagination: true
-  }
-};
-var ScrollLayoutStory = function ScrollLayoutStory2() {
-  var data = useMemo(function () {
-    return generateUsers(20);
-  }, []);
-  return /* @__PURE__ */_jsx(View, {
-    padding: "$4",
-    children: /* @__PURE__ */_jsx(DataTable, {
-      data,
-      columns,
-      columnLayout: "scroll",
-      enablePagination: true,
-      "aria-label": "Scroll layout table"
-    })
-  });
-};
-var ColumnLayoutScroll = {
-  render: function render34() {
-    return /* @__PURE__ */_jsx(ScrollLayoutStory, {});
-  }
-};
-export { Advanced, AllFieldTypesEditable, AllFieldTypesReadOnly, BarcodeField, BarcodeFieldReadOnly, Basic, CheckboxField, CheckboxFieldReadOnly, ColorField, ColorFieldReadOnly, ColumnLayoutAuto, ColumnLayoutEqual, ColumnLayoutScroll, ComboboxField, ComboboxFieldReadOnly, Compact, CurrencyField, CurrencyFieldReadOnly, CustomField, DateTimeField, DateTimeFieldReadOnly, DurationField, DurationFieldReadOnly, EditableTable, Empty, FileField, FileFieldReadOnly, FullFeatured, GeolocationField, GeolocationFieldReadOnly, GlobalSearch, ImageField, ImageFieldReadOnly, Large, LinkField, LinkFieldReadOnly, NumberField, NumberFieldReadOnly, PercentField, PercentFieldReadOnly, PhoneField, PhoneFieldReadOnly, ProgressField, ProgressFieldReadOnly, RatingField, RatingFieldReadOnly, ReadOnly, SelectField, SelectFieldReadOnly, ServerSideSearch, SignatureField, SignatureFieldReadOnly, Simple, SliderField, SliderFieldReadOnly, SwitchField, SwitchFieldReadOnly, TextField, TextFieldReadOnly, TextareaField, TextareaFieldReadOnly, WithColumnPinning, WithColumnResizing, WithFieldTypes, WithFiltering, WithKeyboardNavigation, WithPagination, WithRowExpansion, WithRowNumbers, WithSorting, WithVirtualization, DataTable_stories_default as default };
-//# sourceMappingURL=DataTable.stories.native.js.map