@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTable/DataTable.stories.mjs

@@ -1,2672 +0,0 @@
-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.mjs";
-import { DataTable } from "./index.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-const 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: [Story => /* @__PURE__ */jsx(View, {
-    flex: 1,
-    padding: "$4",
-    width: "100%",
-    children: /* @__PURE__ */jsx(Story, {})
-  })]
-};
-var DataTable_stories_default = meta;
-const generateUsers = count => {
-  const departments = ["Engineering", "Marketing", "Sales", "HR", "Finance"];
-  const roles = ["Developer", "Manager", "Analyst", "Designer", "Coordinator"];
-  const statuses = ["active", "inactive", "pending"];
-  return Array.from({
-    length: count
-  }, (_, i) => ({
-    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]
-  }));
-};
-const columnHelper = createColumnHelper();
-const columns = [
-// Avatar Column
-columnHelper.accessor("avatar", {
-  header: "Avatar",
-  cell: info => /* @__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(row => `${row.firstName} ${row.lastName}`, {
-  id: "fullName",
-  header: "Full Name",
-  cell: info => {
-    const 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: (row, _id, value) => {
-    const fullName = `${row.original.firstName} ${row.original.lastName}`.toLowerCase();
-    return fullName.includes(value.toLowerCase());
-  }
-}),
-// Age Column
-columnHelper.accessor("age", {
-  header: "Age",
-  cell: info => /* @__PURE__ */jsx(Text, {
-    children: info.getValue()
-  }),
-  filterFn: "inNumberRange"
-}),
-// Department Column
-columnHelper.accessor("department", {
-  header: "Department",
-  cell: info => /* @__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: info => /* @__PURE__ */jsx(Text, {
-    children: info.getValue()
-  })
-}),
-// Salary Column
-columnHelper.accessor("salary", {
-  header: "Salary",
-  cell: info => /* @__PURE__ */jsxs(Text, {
-    children: ["$", info.getValue().toLocaleString()]
-  }),
-  filterFn: "inNumberRange"
-}),
-// Status Column
-columnHelper.accessor("status", {
-  header: "Status",
-  cell: info => {
-    const 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: info => /* @__PURE__ */jsx(Text, {
-    children: new Date(info.getValue()).toLocaleDateString()
-  }),
-  filterFn: "includesString"
-}),
-// Last Login Column
-columnHelper.accessor("lastLogin", {
-  header: "Last Login",
-  cell: info => /* @__PURE__ */jsx(Text, {
-    children: new Date(info.getValue()).toLocaleDateString()
-  }),
-  filterFn: "includesString"
-}),
-// Actions Column
-columnHelper.display({
-  id: "actions",
-  header: "Actions",
-  cell: _info => /* @__PURE__ */jsx(Button, {
-    size: "$2",
-    variant: "outlined",
-    children: "Edit"
-  }),
-  enableSorting: false,
-  enableColumnFilter: false
-})];
-const 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"
-}];
-const AdvancedTableStory = () => {
-  const data = useMemo(() => generateUsers(1e3), []);
-  const columnsWithCounts = useMemo(() => {
-    return availableColumns.map(column => {
-      if (column.options) {
-        const counts = column.options.map(option => {
-          const count = data.filter(item => {
-            const 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: props => /* @__PURE__ */jsx(DataTableToolbar, {
-          ...props,
-          customActions: /* @__PURE__ */jsx(Button, {
-            size: "$3",
-            variant: "outlined",
-            children: "Export CSV"
-          })
-        }),
-        renderFilters: props => /* @__PURE__ */jsx(DataTableFilters, {
-          ...props,
-          availableColumns: columnsWithCounts,
-          maxFilters: 5
-        }),
-        renderPagination: props => /* @__PURE__ */jsx(DataTablePagination, {
-          ...props,
-          compact: true
-        }),
-        size: "md",
-        "aria-label": "User management table"
-      })]
-    })
-  });
-};
-const SimpleTableStory = () => {
-  const data = useMemo(() => generateUsers(50), []);
-  const 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"
-    })
-  });
-};
-const 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"
-}];
-const personColumnHelper = createColumnHelper();
-const basicColumns = [personColumnHelper.accessor("id", {
-  header: "ID",
-  cell: info => info.getValue()
-}), personColumnHelper.accessor("firstName", {
-  header: "First Name",
-  cell: info => info.getValue()
-}), personColumnHelper.accessor("lastName", {
-  header: "Last Name",
-  cell: info => info.getValue()
-}), personColumnHelper.accessor("age", {
-  header: "Age",
-  cell: info => info.getValue()
-}), personColumnHelper.accessor("email", {
-  header: "Email",
-  cell: info => info.getValue()
-}), personColumnHelper.accessor("status", {
-  header: "Status",
-  cell: info => {
-    const status = info.getValue();
-    return /* @__PURE__ */jsx(Text, {
-      style: {
-        color: status === "active" ? "green" : "red",
-        fontWeight: "bold"
-      },
-      children: status
-    });
-  }
-})];
-const Advanced = {
-  name: "Main",
-  render: () => /* @__PURE__ */jsx(AdvancedTableStory, {})
-};
-const Simple = {
-  render: () => /* @__PURE__ */jsx(SimpleTableStory, {})
-};
-const Basic = {
-  args: {
-    data: sampleData,
-    columns: basicColumns
-  }
-};
-const WithPagination = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enablePagination: true,
-    initialState: {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 2
-      }
-    }
-  }
-};
-const WithSorting = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableSorting: true
-  }
-};
-const WithFiltering = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableFiltering: true
-  }
-};
-const FullFeatured = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableFiltering: true,
-    enableSorting: true,
-    enablePagination: true,
-    initialState: {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 3
-      }
-    }
-  }
-};
-const Compact = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    size: "sm"
-  }
-};
-const Large = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    size: "lg"
-  }
-};
-const WithColumnResizing = {
-  args: {
-    data: sampleData,
-    columns: basicColumns.map(col => ({
-      ...col,
-      minSize: 80,
-      maxSize: 300
-    })),
-    enableColumnResizing: true
-  }
-};
-const largeData = Array.from({
-  length: 1e4
-}, (_, i) => ({
-  ...sampleData[i % sampleData.length],
-  id: i + 1,
-  firstName: `User${i + 1}`,
-  lastName: `Last${i + 1}`,
-  email: `user${i + 1}@example.com`
-}));
-const WithVirtualization = {
-  args: {
-    data: largeData,
-    columns: basicColumns,
-    enableVirtualization: true,
-    virtualizationHeight: 400,
-    virtualizationOverscan: 5
-  }
-};
-const WithColumnPinning = {
-  args: {
-    data: sampleData,
-    columns: basicColumns.map(col => ({
-      ...col,
-      minSize: 80,
-      maxSize: 300
-    })),
-    enableColumnPinning: true,
-    maxPinnedColumns: 2,
-    enableColumnResizing: true
-  }
-};
-const WithKeyboardNavigation = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    enableKeyboardNavigation: true
-  }
-};
-const expandableData = sampleData.map((p, i) => ({
-  ...p,
-  subRows: i < 2 ? [{
-    ...p,
-    id: -i - 1,
-    firstName: `Detail ${i}`
-  }] : void 0
-}));
-const WithRowExpansion = {
-  args: {
-    data: expandableData,
-    columns: basicColumns,
-    enableRowExpansion: true,
-    renderSubComponent: row => /* @__PURE__ */jsx(View, {
-      padding: "$4",
-      backgroundColor: "$color2",
-      children: /* @__PURE__ */jsxs(Text, {
-        children: ["Expanded: ", row.original.firstName, " ", row.original.lastName]
-      })
-    })
-  }
-};
-const Empty = {
-  args: {
-    data: [],
-    columns: basicColumns
-  }
-};
-const ReadOnly = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const WithRowNumbers = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const 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
-}];
-const EditableTableStory = () => {
-  const [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
-      }
-    })
-  });
-};
-const EditableTable = {
-  render: () => /* @__PURE__ */jsx(EditableTableStory, {})
-};
-const WithFieldTypes = {
-  render: () => /* @__PURE__ */jsx(EditableTableStory, {})
-};
-const 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"
-}];
-const selectOptions = [{
-  label: "Option 1",
-  value: "option1"
-}, {
-  label: "Option 2",
-  value: "option2"
-}, {
-  label: "Option 3",
-  value: "option3"
-}];
-const comboboxOptions = [{
-  label: "Choice 1",
-  value: "choice1"
-}, {
-  label: "Choice 2",
-  value: "choice2"
-}, {
-  label: "Choice 3",
-  value: "choice3"
-}, {
-  label: "Choice 4",
-  value: "choice4"
-}];
-const linkOptions = [{
-  label: "Document 001",
-  value: "DOC-001"
-}, {
-  label: "Document 002",
-  value: "DOC-002"
-}, {
-  label: "Document 003",
-  value: "DOC-003"
-}];
-const 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..."
-  }
-}];
-const AllFieldTypesEditableStory = () => {
-  const [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"
-    })]
-  });
-};
-const AllFieldTypesEditable = {
-  render: () => /* @__PURE__ */jsx(AllFieldTypesEditableStory, {})
-};
-const AllFieldTypesReadOnlyStory = () => {
-  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"
-    })]
-  });
-};
-const AllFieldTypesReadOnly = {
-  render: () => /* @__PURE__ */jsx(AllFieldTypesReadOnlyStory, {})
-};
-const 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"
-}];
-const textFieldColumns = [{
-  accessorKey: "title",
-  header: "Title",
-  field: "input"
-}, {
-  accessorKey: "description",
-  header: "Description",
-  field: "input"
-}, {
-  accessorKey: "notes",
-  header: "Notes",
-  field: "input"
-}];
-const TextFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const TextField = {
-  render: () => /* @__PURE__ */jsx(TextFieldStory, {})
-};
-const TextFieldReadOnly = {
-  args: {
-    data: textFieldData,
-    columns: textFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const 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
-  }
-}];
-const NumberFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const NumberField = {
-  render: () => /* @__PURE__ */jsx(NumberFieldStory, {})
-};
-const NumberFieldReadOnly = {
-  args: {
-    data: numberFieldData,
-    columns: numberFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const 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"
-    }]
-  }
-}];
-const SelectFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const SelectField = {
-  render: () => /* @__PURE__ */jsx(SelectFieldStory, {})
-};
-const SelectFieldReadOnly = {
-  args: {
-    data: selectFieldData,
-    columns: selectFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const checkboxFieldColumns = [{
-  accessorKey: "isActive",
-  header: "Active",
-  field: "checkbox"
-}, {
-  accessorKey: "isVerified",
-  header: "Verified",
-  field: "checkbox"
-}, {
-  accessorKey: "hasSubscription",
-  header: "Subscription",
-  field: "checkbox"
-}];
-const CheckboxFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const CheckboxField = {
-  render: () => /* @__PURE__ */jsx(CheckboxFieldStory, {})
-};
-const CheckboxFieldReadOnly = {
-  args: {
-    data: checkboxFieldData,
-    columns: checkboxFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const switchFieldColumns = [{
-  accessorKey: "enabled",
-  header: "Enabled",
-  field: "switch"
-}, {
-  accessorKey: "notifications",
-  header: "Notifications",
-  field: "switch"
-}, {
-  accessorKey: "darkMode",
-  header: "Dark Mode",
-  field: "switch"
-}];
-const SwitchFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const SwitchField = {
-  render: () => /* @__PURE__ */jsx(SwitchFieldStory, {})
-};
-const SwitchFieldReadOnly = {
-  args: {
-    data: switchFieldData,
-    columns: switchFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const dateTimeFieldColumns = [{
-  accessorKey: "date",
-  header: "Date",
-  field: "datepicker"
-}, {
-  accessorKey: "datetime",
-  header: "DateTime",
-  field: "datetimepicker"
-}, {
-  accessorKey: "time",
-  header: "Time",
-  field: "timepicker"
-}];
-const DateTimeFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const DateTimeField = {
-  render: () => /* @__PURE__ */jsx(DateTimeFieldStory, {})
-};
-const DateTimeFieldReadOnly = {
-  args: {
-    data: dateTimeFieldData,
-    columns: dateTimeFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const 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"
-}];
-const DurationFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const DurationField = {
-  render: () => /* @__PURE__ */jsx(DurationFieldStory, {})
-};
-const DurationFieldReadOnly = {
-  args: {
-    data: durationFieldData,
-    columns: durationFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const colorFieldColumns = [{
-  accessorKey: "primaryColor",
-  header: "Primary Color",
-  field: "colorpicker"
-}, {
-  accessorKey: "secondaryColor",
-  header: "Secondary Color",
-  field: "colorpicker"
-}, {
-  accessorKey: "accentColor",
-  header: "Accent Color",
-  field: "colorpicker"
-}];
-const ColorFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const ColorField = {
-  render: () => /* @__PURE__ */jsx(ColorFieldStory, {})
-};
-const ColorFieldReadOnly = {
-  args: {
-    data: colorFieldData,
-    columns: colorFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const ratingFieldColumns = [{
-  accessorKey: "productRating",
-  header: "Product",
-  field: "rating"
-}, {
-  accessorKey: "serviceRating",
-  header: "Service",
-  field: "rating"
-}, {
-  accessorKey: "overallRating",
-  header: "Overall",
-  field: "rating"
-}];
-const RatingFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const RatingField = {
-  render: () => /* @__PURE__ */jsx(RatingFieldStory, {})
-};
-const RatingFieldReadOnly = {
-  args: {
-    data: ratingFieldData,
-    columns: ratingFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const phoneFieldColumns = [{
-  accessorKey: "mobile",
-  header: "Mobile",
-  field: "phoneinput"
-}, {
-  accessorKey: "work",
-  header: "Work",
-  field: "phoneinput"
-}, {
-  accessorKey: "home",
-  header: "Home",
-  field: "phoneinput"
-}];
-const PhoneFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const PhoneField = {
-  render: () => /* @__PURE__ */jsx(PhoneFieldStory, {})
-};
-const PhoneFieldReadOnly = {
-  args: {
-    data: phoneFieldData,
-    columns: phoneFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const 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"
-  }
-}];
-const CurrencyFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const CurrencyField = {
-  render: () => /* @__PURE__ */jsx(CurrencyFieldStory, {})
-};
-const CurrencyFieldReadOnly = {
-  args: {
-    data: currencyFieldData,
-    columns: currencyFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const percentFieldColumns = [{
-  accessorKey: "progress",
-  header: "Progress",
-  field: "stepper"
-}, {
-  accessorKey: "completion",
-  header: "Completion",
-  field: "stepper"
-}, {
-  accessorKey: "discount",
-  header: "Discount",
-  field: "stepper"
-}];
-const PercentFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const PercentField = {
-  render: () => /* @__PURE__ */jsx(PercentFieldStory, {})
-};
-const PercentFieldReadOnly = {
-  args: {
-    data: percentFieldData,
-    columns: percentFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const countryOptions = [{
-  label: "United States",
-  value: "us"
-}, {
-  label: "United Kingdom",
-  value: "uk"
-}, {
-  label: "Germany",
-  value: "de"
-}, {
-  label: "France",
-  value: "fr"
-}, {
-  label: "Japan",
-  value: "jp"
-}];
-const cityOptions = [{
-  label: "New York",
-  value: "nyc"
-}, {
-  label: "London",
-  value: "london"
-}, {
-  label: "Berlin",
-  value: "berlin"
-}, {
-  label: "Paris",
-  value: "paris"
-}, {
-  label: "Tokyo",
-  value: "tokyo"
-}];
-const languageOptions = [{
-  label: "English",
-  value: "en"
-}, {
-  label: "German",
-  value: "de"
-}, {
-  label: "French",
-  value: "fr"
-}, {
-  label: "Japanese",
-  value: "ja"
-}, {
-  label: "Spanish",
-  value: "es"
-}];
-const 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"
-}];
-const 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
-  }
-}];
-const ComboboxFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const ComboboxField = {
-  render: () => /* @__PURE__ */jsx(ComboboxFieldStory, {})
-};
-const ComboboxFieldReadOnly = {
-  args: {
-    data: comboboxFieldData,
-    columns: comboboxFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const 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"
-}];
-const orderOptions = [{
-  label: "ORD-001",
-  value: "ORD-001"
-}, {
-  label: "ORD-002",
-  value: "ORD-002"
-}, {
-  label: "ORD-003",
-  value: "ORD-003"
-}];
-const 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"
-}];
-const 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
-  }
-}];
-const LinkFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const LinkField = {
-  render: () => /* @__PURE__ */jsx(LinkFieldStory, {})
-};
-const LinkFieldReadOnly = {
-  args: {
-    data: linkFieldData,
-    columns: linkFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const customFieldColumns = [{
-  accessorKey: "customRender",
-  header: "Custom User",
-  field: "custom",
-  fieldProps: {
-    render: value => /* @__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?.role || "N/A"
-        })
-      }), /* @__PURE__ */jsx(Text, {
-        children: value?.name || "Unknown"
-      })]
-    })
-  }
-}, {
-  accessorKey: "customBadge",
-  header: "Badge",
-  field: "custom",
-  fieldProps: {
-    render: (value, _row, onChange) => /* @__PURE__ */jsx(View, {
-      flexDirection: "row",
-      gap: "$1",
-      children: ["premium", "standard", "trial"].map(badge => /* @__PURE__ */jsx(View, {
-        backgroundColor: value === badge ? "$green5" : "$gray3",
-        padding: "$1",
-        borderRadius: "$2",
-        onPress: () => onChange(badge),
-        cursor: "pointer",
-        children: /* @__PURE__ */jsx(Text, {
-          fontSize: "$2",
-          color: value === badge ? "$green11" : "$gray11",
-          children: badge
-        })
-      }, badge))
-    })
-  }
-}];
-const CustomFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const CustomField = {
-  render: () => /* @__PURE__ */jsx(CustomFieldStory, {})
-};
-const 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"
-}];
-const 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"
-    }]
-  }
-}];
-const GlobalSearchStory = () => {
-  const [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"
-    })]
-  });
-};
-const GlobalSearch = {
-  render: () => /* @__PURE__ */jsx(GlobalSearchStory, {})
-};
-const ServerSideSearchStory = () => {
-  const [data, setData] = React.useState(searchableData);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const handleSearch = React.useCallback(searchTerm => {
-    setIsLoading(true);
-    setTimeout(() => {
-      if (!searchTerm) {
-        setData(searchableData);
-      } else {
-        const filtered = searchableData.filter(row => 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: props => /* @__PURE__ */jsx(DataTableToolbar, {
-        ...props,
-        onGlobalFilterChange: value => {
-          props.onGlobalFilterChange(value);
-          handleSearch(value);
-        }
-      }),
-      initialState: {
-        isLoading
-      },
-      showRowNumbers: true,
-      "aria-label": "Server-side search table"
-    })]
-  });
-};
-const ServerSideSearch = {
-  render: () => /* @__PURE__ */jsx(ServerSideSearchStory, {})
-};
-const 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"
-}];
-const textareaFieldColumns = [{
-  accessorKey: "description",
-  header: "Description",
-  field: "textarea"
-}, {
-  accessorKey: "notes",
-  header: "Notes",
-  field: "textarea"
-}, {
-  accessorKey: "comments",
-  header: "Comments",
-  field: "textarea"
-}];
-const TextareaFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const TextareaField = {
-  render: () => /* @__PURE__ */jsx(TextareaFieldStory, {})
-};
-const TextareaFieldReadOnly = {
-  args: {
-    data: textareaFieldData,
-    columns: textareaFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const signatureFieldColumns = [{
-  accessorKey: "customerSignature",
-  header: "Customer",
-  field: "signature"
-}, {
-  accessorKey: "managerSignature",
-  header: "Manager",
-  field: "signature"
-}, {
-  accessorKey: "witnessSignature",
-  header: "Witness",
-  field: "signature"
-}];
-const SignatureFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const SignatureField = {
-  render: () => /* @__PURE__ */jsx(SignatureFieldStory, {})
-};
-const SignatureFieldReadOnly = {
-  args: {
-    data: signatureFieldData,
-    columns: signatureFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const fileFieldColumns = [{
-  accessorKey: "document",
-  header: "Document",
-  field: "fileupload"
-}, {
-  accessorKey: "attachment",
-  header: "Attachment",
-  field: "fileupload"
-}, {
-  accessorKey: "report",
-  header: "Report",
-  field: "fileupload"
-}];
-const FileFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const FileField = {
-  render: () => /* @__PURE__ */jsx(FileFieldStory, {})
-};
-const FileFieldReadOnly = {
-  args: {
-    data: fileFieldData,
-    columns: fileFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const imageFieldColumns = [{
-  accessorKey: "avatar",
-  header: "Avatar",
-  field: "image"
-}, {
-  accessorKey: "productImage",
-  header: "Product Image",
-  field: "image"
-}, {
-  accessorKey: "thumbnail",
-  header: "Thumbnail",
-  field: "image"
-}];
-const ImageFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const ImageField = {
-  render: () => /* @__PURE__ */jsx(ImageFieldStory, {})
-};
-const ImageFieldReadOnly = {
-  args: {
-    data: imageFieldData,
-    columns: imageFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-  }
-}];
-const geolocationFieldColumns = [{
-  accessorKey: "storeLocation",
-  header: "Store Location",
-  field: "geolocation"
-}, {
-  accessorKey: "deliveryAddress",
-  header: "Delivery Address",
-  field: "geolocation"
-}, {
-  accessorKey: "pickupPoint",
-  header: "Pickup Point",
-  field: "geolocation"
-}];
-const GeolocationFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const GeolocationField = {
-  render: () => /* @__PURE__ */jsx(GeolocationFieldStory, {})
-};
-const GeolocationFieldReadOnly = {
-  args: {
-    data: geolocationFieldData,
-    columns: geolocationFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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"
-}];
-const barcodeFieldColumns = [{
-  accessorKey: "sku",
-  header: "SKU",
-  field: "barcode"
-}, {
-  accessorKey: "upc",
-  header: "UPC",
-  field: "barcode"
-}, {
-  accessorKey: "serialNumber",
-  header: "Serial Number",
-  field: "barcode"
-}];
-const BarcodeFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const BarcodeField = {
-  render: () => /* @__PURE__ */jsx(BarcodeFieldStory, {})
-};
-const BarcodeFieldReadOnly = {
-  args: {
-    data: barcodeFieldData,
-    columns: barcodeFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const 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
-  }
-}];
-const SliderFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const SliderField = {
-  render: () => /* @__PURE__ */jsx(SliderFieldStory, {})
-};
-const SliderFieldReadOnly = {
-  args: {
-    data: sliderFieldData,
-    columns: sliderFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const 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
-}];
-const progressFieldColumns = [{
-  accessorKey: "taskProgress",
-  header: "Task Progress",
-  field: "progress"
-}, {
-  accessorKey: "downloadProgress",
-  header: "Download",
-  field: "progress"
-}, {
-  accessorKey: "completionRate",
-  header: "Completion",
-  field: "progress"
-}];
-const ProgressFieldStory = () => {
-  const [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"
-    })]
-  });
-};
-const ProgressField = {
-  render: () => /* @__PURE__ */jsx(ProgressFieldStory, {})
-};
-const ProgressFieldReadOnly = {
-  args: {
-    data: progressFieldData,
-    columns: progressFieldColumns,
-    readOnly: true,
-    showRowNumbers: true
-  }
-};
-const ColumnLayoutEqual = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    columnLayout: "equal",
-    enablePagination: true
-  }
-};
-const ColumnLayoutAuto = {
-  args: {
-    data: sampleData,
-    columns: basicColumns,
-    columnLayout: "auto",
-    enablePagination: true
-  }
-};
-const ScrollLayoutStory = () => {
-  const data = useMemo(() => generateUsers(20), []);
-  return /* @__PURE__ */jsx(View, {
-    padding: "$4",
-    children: /* @__PURE__ */jsx(DataTable, {
-      data,
-      columns,
-      columnLayout: "scroll",
-      enablePagination: true,
-      "aria-label": "Scroll layout table"
-    })
-  });
-};
-const ColumnLayoutScroll = {
-  render: () => /* @__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.mjs.map