@dmsi/wedgekit-react 0.0.2

package/dist/components/DataTable.js

@@ -0,0 +1,720 @@
+"use client";
+import {
+  CSS
+} from "../chunk-WVUIIBRR.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/DataTable.tsx
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext
+} from "@dnd-kit/sortable";
+import { useSortable } from "@dnd-kit/sortable";
+import { Switch } from "@headlessui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columns = [
+  {
+    header: "Order ID",
+    accessorKey: "orderId",
+    id: "orderId",
+    meta: {
+      sticky: true
+    }
+  },
+  {
+    header: "Actions",
+    id: "actions",
+    cell: () => {
+      const items = [
+        {
+          label: "Release",
+          icon: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" })
+        },
+        { label: "XML", icon: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" }) },
+        { label: "Copy", icon: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" }) },
+        { label: "Quote", icon: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" }) },
+        { label: "Retail", icon: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" }) }
+      ];
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-3", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center justify-center gap-1",
+          children: [
+            item.icon,
+            /* @__PURE__ */ jsx("span", { className: "text-[0.6rem] block text-neutral-500 font-semibold", children: item.label })
+          ]
+        },
+        index
+      )) });
+    }
+  },
+  {
+    header: "PO ID",
+    accessorKey: "poId",
+    id: "poId"
+  },
+  {
+    header: "Job ID",
+    accessorKey: "jobId",
+    id: "jobId"
+  },
+  {
+    header: "Reference",
+    accessorKey: "reference",
+    id: "reference",
+    meta: {
+      className: "hidden md:table-cell"
+    }
+  },
+  {
+    header: "Status",
+    accessorKey: "shipToStatus",
+    id: "shipToStatus",
+    meta: {
+      filterVariant: "select"
+    }
+  },
+  {
+    header: "Ordered date",
+    accessorKey: "orderedDate",
+    id: "orderedDate"
+  },
+  {
+    header: "Reference 1",
+    accessorKey: "reference1",
+    id: "reference1",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 12",
+    accessorKey: "reference12",
+    id: "reference12",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 13",
+    accessorKey: "reference13",
+    id: "reference13",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 14",
+    accessorKey: "reference14",
+    id: "reference14",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 15",
+    accessorKey: "reference15",
+    id: "reference15",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 16",
+    accessorKey: "reference16",
+    id: "reference16",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 17",
+    accessorKey: "reference17",
+    id: "reference17",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 18",
+    accessorKey: "reference18",
+    id: "reference18",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 19",
+    accessorKey: "reference19",
+    id: "reference19",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 10",
+    accessorKey: "reference10",
+    id: "reference10",
+    meta: { className: "hidden md:table-cell" }
+  },
+  {
+    header: "Reference 11",
+    accessorKey: "reference11",
+    id: "reference11",
+    meta: { className: "hidden md:table-cell" }
+  }
+];
+var EditingContext = createContext({
+  data: [],
+  setValue: (row, key, value) => {
+    console.log(row, key, value);
+  }
+});
+var EditingProvider = ({ data, children }) => {
+  const [actual, setData] = useState(data);
+  useEffect(() => console.log("data changed"), [actual]);
+  const context = {
+    data: actual,
+    setValue: (row, key, value) => {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = __spreadProps(__spreadValues({}, newData[row]), {
+          [key]: value
+        });
+        return newData;
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(EditingContext, { value: context, children });
+};
+var DataTable = ({ data }) => {
+  return /* @__PURE__ */ jsx(EditingProvider, { data, children: /* @__PURE__ */ jsx(DataTableInternals, {}) });
+};
+var DraggableTableHeader = ({
+  header
+}) => {
+  var _a, _b, _c, _d;
+  const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
+    id: header.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0
+  };
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      colSpan: header.colSpan,
+      ref: setNodeRef,
+      style,
+      className: clsx(
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.className,
+        "px-3 py-3.5 text-left text-sm font-semibold text-dmsi-white bg-dmsi-red ",
+        {
+          "sticky left-0": (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.sticky) != null ? _c : false
+        }
+      ),
+      children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: "flex space-x-1 justify-start items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          __spreadProps(__spreadValues(__spreadValues({
+            className: "cursor-grab shrink-0"
+          }, attributes), listeners), {
+            children: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" })
+          })
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "grow",
+              header.column.getCanSort() ? "cursor-pointer select-none" : "",
+              "flex flex-col gap-1 justify-between items-start"
+            ),
+            title: header.column.getCanSort() ? header.column.getNextSortingOrder() === "asc" ? "Sort ascending" : header.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }),
+              /* @__PURE__ */ jsx("div", { children: header.column.getCanFilter() ? /* @__PURE__ */ jsx(Filter, { column: header.column }) : /* @__PURE__ */ jsx("div", { className: "invisible", children: /* @__PURE__ */ jsx(Filter, { column: header.column }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "shrink-0 cursor-pointer",
+            onClick: header.column.getToggleSortingHandler(),
+            children: (_d = {
+              asc: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" }),
+              desc: /* @__PURE__ */ jsx("i", { className: "w-3 h-3" })
+            }[header.column.getIsSorted()]) != null ? _d : /* @__PURE__ */ jsx("i", { className: "w-3 h-3" })
+          }
+        )
+      ] })
+    }
+  );
+};
+var DragAlongCell = ({
+  cell,
+  setValue
+}) => {
+  var _a, _b, _c, _d;
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0
+  };
+  return /* @__PURE__ */ jsx(
+    EditCell,
+    {
+      ref: setNodeRef,
+      style,
+      cell,
+      className: clsx(
+        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
+        "text-sm whitespace-nowrap text-gray-900  bg-neutral-100",
+        {
+          "sticky left-0": (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.sticky) != null ? _d : false
+        }
+      ),
+      setValue
+    }
+  );
+};
+var DataTableInternals = () => {
+  const { data, setValue } = useContext(EditingContext);
+  const [columnOrder, setColumnOrder] = React.useState(
+    () => columns.map((c) => c.id)
+  );
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [columnVisibility, setColumnVisibility] = useState(
+    columns.reduce(
+      (acc, column) => {
+        if ("accessorKey" in column) {
+          acc[column.accessorKey] = true;
+        }
+        return acc;
+      },
+      {}
+    )
+  );
+  const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const table = useReactTable({
+    columns,
+    data,
+    debugAll: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    state: {
+      sorting,
+      columnFilters,
+      pagination,
+      columnVisibility,
+      columnOrder
+    }
+  });
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((columnOrder2) => {
+        const oldIndex = columnOrder2.indexOf(active.id);
+        const newIndex = columnOrder2.indexOf(over.id);
+        return arrayMove(columnOrder2, oldIndex, newIndex);
+      });
+    }
+  }
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold", children: "Show/Hide Columns" }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: table.getAllColumns().map((column) => /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "cursor-pointer flex flex-row items-center space-x-1",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Toggle,
+                  {
+                    enabled: column.getIsVisible(),
+                    onToggle: (checked) => column.getToggleVisibilityHandler()({
+                      target: { checked }
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "block", children: column.columnDef.header })
+              ]
+            },
+            column.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll scrollbar-thin", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-x divide-neutral-500", children: [
+          /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: columnOrder,
+              strategy: horizontalListSortingStrategy,
+              children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(DraggableTableHeader, { header }, header.id))
+            }
+          ) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: "bg-neutral-100 divide-y divide-neutral-200",
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: columnOrder,
+                  strategy: horizontalListSortingStrategy,
+                  children: /* @__PURE__ */ jsx(
+                    DragAlongCell,
+                    {
+                      cell,
+                      setValue
+                    },
+                    cell.id
+                  )
+                },
+                cell.id
+              ))
+            },
+            row.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: clsx(
+                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
+                  {
+                    "pointer-events-none": !table.getCanPreviousPage()
+                  }
+                ),
+                onClick: () => table.setPageIndex(0),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: clsx(
+                  "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                  {
+                    "pointer-events-none": !table.getCanPreviousPage()
+                  }
+                ),
+                onClick: () => table.previousPage(),
+                disabled: !table.getCanPreviousPage(),
+                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
+              }
+            ),
+            Array.from({ length: Math.min(5, table.getPageCount()) }).map(
+              (_, i) => {
+                const current = table.getState().pagination.pageIndex;
+                const index = current - 2 + i;
+                const active = index === current;
+                if (index < 0) return;
+                if (index > table.getPageCount() - 1) return;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: clsx(
+                      "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
+                      {
+                        "bg-neutral-200 border-x": active,
+                        "border-r-0": !active
+                      }
+                    ),
+                    onClick: () => table.setPageIndex(index),
+                    children: /* @__PURE__ */ jsx("span", { className: clsx({}), children: index + 1 })
+                  },
+                  i
+                );
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: clsx(
+                  "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
+                  {
+                    "pointer-events-none": !table.getCanNextPage()
+                  }
+                ),
+                onClick: () => table.nextPage(),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 group-disabled:stroke-gray-400 " })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: clsx(
+                  "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                  {
+                    "pointer-events-none": !table.getCanNextPage()
+                  }
+                ),
+                onClick: () => table.setPageIndex(table.getPageCount() - 1),
+                disabled: !table.getCanNextPage(),
+                children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4  group-disabled:stroke-gray-400" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-6", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("div", { children: "Page" }),
+              /* @__PURE__ */ jsxs("strong", { children: [
+                table.getState().pagination.pageIndex + 1,
+                " of",
+                " ",
+                table.getPageCount()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              "Page:",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  min: "1",
+                  max: table.getPageCount(),
+                  defaultValue: table.getState().pagination.pageIndex + 1,
+                  onChange: (e) => {
+                    const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                    table.setPageIndex(page);
+                  },
+                  className: "border border-gray-500 px-2 py-1 rounded w-16"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: "border border-gray-500 px-2 py-1 rounded",
+              value: table.getState().pagination.pageSize,
+              onChange: (e) => {
+                table.setPageSize(Number(e.target.value));
+              },
+              children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsxs("option", { value: pageSize, children: [
+                "Show ",
+                pageSize
+              ] }, pageSize))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+function EditCell({
+  className,
+  cell,
+  setValue,
+  style,
+  ref
+}) {
+  var _a, _b;
+  const [editing, setEditing] = useState(false);
+  const value = cell.getValue();
+  const isString = typeof value === "string";
+  const [editedValue, setEditedValue] = useState(isString ? value : "");
+  const onStartEdit = () => {
+    if (isString) {
+      setEditing(true);
+    }
+  };
+  const onEditValue = (e) => {
+    setEditedValue(e.target.value);
+  };
+  const onStopEdit = () => {
+    setValue(cell.row.index, cell.column.id, editedValue);
+    setEditing(false);
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      onStopEdit();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      className: clsx(
+        className,
+        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
+        "px-2 py-3 text-sm whitespace-nowrap text-gray-500"
+      ),
+      style,
+      ref,
+      children: [
+        isString && editing && /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: editedValue,
+              onChange: onEditValue,
+              onKeyUp,
+              onBlur: onStopEdit,
+              className: "border px-2 py-0.5 rounded inline min-w-0 shrink border-neutral-400 focus:outline-neutral-300 bg-white"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onStopEdit,
+              className: "border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white",
+              children: "Save"
+            }
+          )
+        ] }),
+        !editing && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: onStartEdit,
+            className: "px-2 py-1 flex flex-row items-center",
+            children: [
+              flexRender(cell.column.columnDef.cell, cell.getContext()),
+              /* @__PURE__ */ jsx("div", { className: "w-16" })
+            ]
+          }
+        )
+      ]
+    },
+    cell.id
+  );
+}
+function Filter({ column }) {
+  var _a, _b, _c, _d, _e;
+  const columnFilterValue = column.getFilterValue();
+  const { filterVariant } = (_a = column.columnDef.meta) != null ? _a : {};
+  return filterVariant === "range" ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+          type: "number",
+          value: (_b = columnFilterValue == null ? void 0 : columnFilterValue[0]) != null ? _b : "",
+          onChange: (e) => column.setFilterValue((old) => [
+            e.target.value,
+            old == null ? void 0 : old[1]
+          ]),
+          autoComplete: "off",
+          placeholder: `Min`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+          type: "number",
+          value: (_c = columnFilterValue == null ? void 0 : columnFilterValue[1]) != null ? _c : "",
+          onChange: (e) => column.setFilterValue((old) => [
+            old == null ? void 0 : old[0],
+            e.target.value
+          ]),
+          autoComplete: "off",
+          placeholder: `Max`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-1" })
+  ] }) : filterVariant === "select" ? /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: "block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+      onChange: (e) => column.setFilterValue(e.target.value),
+      value: columnFilterValue == null ? void 0 : columnFilterValue.toString(),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Status: All" }),
+        /* @__PURE__ */ jsx("option", { value: "cancelled", children: "Status: Cancelled" }),
+        /* @__PURE__ */ jsx("option", { value: "pending", children: "Status: Pending" }),
+        /* @__PURE__ */ jsx("option", { value: "shipped", children: "Status: Shipped" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: "block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6",
+      onChange: (e) => column.setFilterValue(e.target.value),
+      placeholder: (_e = (_d = column.columnDef.header) == null ? void 0 : _d.toString()) != null ? _e : "...",
+      type: "text",
+      autoComplete: "off",
+      value: columnFilterValue != null ? columnFilterValue : ""
+    }
+  );
+}
+Switch.displayName = "Switch";
+function Toggle({
+  enabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      checked: enabled,
+      onChange: onToggle,
+      className: "group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none inline-block size-3 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-3  group-data-[checked]:shadow-lg"
+        }
+      )
+    }
+  );
+}
+Toggle.displayName = "Toggle";
+export {
+  DataTable,
+  EditingProvider,
+  Toggle as default
+};