sodtrack-web-ui 0.8.0 → 0.9.1

package/dist/alert.mjs

@@ -1,5 +1,5 @@
-export { Alert } from './chunk-EFMITOLW.mjs';
-import './chunk-GY2JBRY6.mjs';
+export { Alert } from './chunk-XDQ2Y2UR.mjs';
 import './chunk-P3UP2HUA.mjs';
 import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/dist/button.d.mts

@@ -8,7 +8,7 @@ type ButtonProps = {
 } & React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & VariantProps<typeof button>;
 declare const Button: FC<ButtonProps>;
 declare const button: (props?: ({
-    size?: "large" | "medium" | "small" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
     variant?: "link" | "contained" | "outlined" | "ghost" | "standard" | undefined;
     loading?: boolean | undefined;
 } & ({

package/dist/button.mjs

@@ -1,5 +1,5 @@
-export { Button } from './chunk-QQLQXUJA.mjs';
-import './chunk-GY2JBRY6.mjs';
+export { Button } from './chunk-4YE5CU7E.mjs';
 import './chunk-P3UP2HUA.mjs';
 import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/dist/chip-status.d.mts

@@ -3,7 +3,7 @@ import { FC, HTMLAttributes } from 'react';
 
 declare const chipStatus: (props?: ({
     variant?: "success" | "info" | "warning" | "error" | undefined;
-    size?: "sm" | "md" | "xs" | undefined;
+    size?: "xs" | "sm" | "md" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;

package/dist/{chunk-QQLQXUJA.mjs → chunk-4YE5CU7E.mjs}

@@ -1,6 +1,6 @@
-import { LoaderCircleIcon } from './chunk-GY2JBRY6.mjs';
 import { cn } from './chunk-P3UP2HUA.mjs';
 import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { LoaderCircleIcon } from './chunk-ERH7LWVL.mjs';
 import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
 import { cva } from 'cva';
 

package/dist/{chunk-GY2JBRY6.mjs → chunk-ERH7LWVL.mjs}

@@ -76,6 +76,16 @@ var ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
 
+// node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-left.js
+var ChevronLeft = createLucideIcon("ChevronLeft", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
+
+// node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-right.js
+var ChevronRight = createLucideIcon("ChevronRight", [
+  ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
+]);
+
 // node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/circle-check.js
 var CircleCheck = createLucideIcon("CircleCheck", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
@@ -128,6 +138,8 @@ var CloseIcon = X;
 var InfoIcon = Info;
 var TriangleAlertIcon = TriangleAlert;
 var ChevronDownIcon = ChevronDown;
+var ChevronRightIcon = ChevronRight;
+var ChevronLeftIcon = ChevronLeft;
 /*! Bundled license information:
 
 lucide-react/dist/esm/shared/src/utils.js:
@@ -170,6 +182,22 @@ lucide-react/dist/esm/icons/chevron-down.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/chevron-left.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/chevron-right.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/icons/circle-check.js:
   (**
    * @license lucide-react v0.379.0 - ISC
@@ -227,4 +255,4 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { ChevronDownIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon };
+export { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon };

package/dist/{chunk-FULNSEPZ.mjs → chunk-KY2KI4AD.mjs}

@@ -1,6 +1,6 @@
-import { ChevronDownIcon } from './chunk-GY2JBRY6.mjs';
 import { cn } from './chunk-P3UP2HUA.mjs';
 import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { ChevronDownIcon } from './chunk-ERH7LWVL.mjs';
 import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
 import { Label } from '@radix-ui/react-label';
 

package/dist/chunk-O5QOPJOD.mjs

@@ -0,0 +1,143 @@
+import { cn } from './chunk-P3UP2HUA.mjs';
+import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { ChevronDownIcon } from './chunk-ERH7LWVL.mjs';
+import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
+import { useFloating, autoUpdate, offset, flip, size, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+
+// src/components/rows-per-page-select.tsx
+var React = __toESM(require_react());
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var options = ["10", "25", "50"];
+var RowsPerPageSelect = ({
+  value,
+  onRowsPerPageChange
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(
+    options.findIndex((option) => option === value)
+  );
+  const { refs, floatingStyles, context } = useFloating({
+    placement: "bottom-start",
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({ padding: 10 }),
+      size({
+        apply({ rects, elements, availableHeight }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+            minWidth: `${rects.reference.width}px`
+          });
+        },
+        padding: 10
+      })
+    ]
+  });
+  const listRef = React.useRef([]);
+  const listContentRef = React.useRef(options);
+  const isTypingRef = React.useRef(false);
+  const click = useClick(context, { event: "mousedown" });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "listbox" });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+    // This is a large list, allow looping.
+    loop: true
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex,
+    selectedIndex,
+    onMatch: isOpen ? setActiveIndex : setSelectedIndex,
+    onTypingChange(isTyping) {
+      isTypingRef.current = isTyping;
+    }
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [dismiss, role, listNav, typeahead, click]
+  );
+  const handleSelect = (index) => {
+    onRowsPerPageChange(options[index]);
+    setSelectedIndex(index);
+    setIsOpen(false);
+  };
+  const selectedItemLabel = selectedIndex !== null ? options[selectedIndex] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: "40px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        tabIndex: 0,
+        ref: refs.setReference,
+        "aria-labelledby": "select-label",
+        "aria-autocomplete": "none",
+        ...getReferenceProps(),
+        className: "flex cursor-pointer items-center gap-1 text-sm leading-[120%] text-neutral-900",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: selectedItemLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ChevronDownIcon,
+            {
+              width: "18px",
+              height: "18px",
+              className: "h-[1.125rem] w-[1.125rem] text-neutral-900"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: refs.setFloating,
+        className: "overflow-y-auto rounded-lg bg-neutral-100 text-sm font-semibold leading-[120%] text-neutral-900 outline-none",
+        style: {
+          ...floatingStyles
+        },
+        ...getFloatingProps(),
+        children: options.map((value2, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: (node) => {
+              listRef.current[i] = node;
+            },
+            role: "option",
+            tabIndex: i === activeIndex ? 0 : -1,
+            "aria-selected": i === selectedIndex && i === activeIndex,
+            className: cn(
+              "cursor-default p-[0.625rem]",
+              i === activeIndex && "bg-neutral-200"
+            ),
+            ...getItemProps({
+              // Handle pointer select.
+              onClick() {
+                handleSelect(i);
+              },
+              // Handle keyboard select.
+              onKeyDown(event) {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleSelect(i);
+                }
+                if (event.key === " " && !isTypingRef.current) {
+                  event.preventDefault();
+                  handleSelect(i);
+                }
+              }
+            }),
+            children: value2
+          },
+          value2
+        ))
+      }
+    ) }) })
+  ] });
+};
+var rows_per_page_select_default = RowsPerPageSelect;
+
+export { rows_per_page_select_default };

package/dist/chunk-V2LMCQ4I.mjs

@@ -0,0 +1,192 @@
+import { rows_per_page_select_default } from './chunk-O5QOPJOD.mjs';
+import { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
+import { cn } from './chunk-P3UP2HUA.mjs';
+import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { ChevronLeftIcon, ChevronRightIcon } from './chunk-ERH7LWVL.mjs';
+import { __toESM } from './chunk-PLJ6ZHAI.mjs';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+function DataTable({
+  columns,
+  data,
+  rowsCount,
+  pagination,
+  onPaginationChange,
+  noResults,
+  rowsPerPageText = "Rows per page",
+  ofText = "of",
+  className,
+  ...props
+}) {
+  const table = useReactTable({
+    data,
+    columns,
+    rowCount: rowsCount,
+    state: { pagination },
+    onPaginationChange,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollArea, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, { orientation: "horizontal" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              className: "w-full table-auto overflow-hidden text-neutral-900",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("colgroup", { children: table.getHeaderGroups()[0].headers.map((header) => {
+                  const width = header.column.getSize() / table.getHeaderGroups()[0].headers.reduce((acc, curr) => acc + curr.getSize(), 0) * 100;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "col",
+                    {
+                      span: 1,
+                      style: {
+                        width: `${width}%`
+                      }
+                    },
+                    header.id
+                  );
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "bg-neutral-100", children: headerGroup.headers.map((header) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "th",
+                    {
+                      className: "h-14 px-4 py-3 text-left text-sm font-semibold uppercase leading-[120%] tracking-sm",
+                      children: header.isPlaceholder ? null : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )
+                    },
+                    header.id
+                  );
+                }) }, headerGroup.id)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "tr",
+                  {
+                    "data-state": row.getIsSelected() && "selected",
+                    className: "text-base font-normal leading-[130%] tracking-body",
+                    children: row.getVisibleCells().map((cell) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: cn("p-4"), children: flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      ) }, cell.id);
+                    })
+                  },
+                  row.id
+                )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    className: "flex flex-col items-center justify-center px-10 pb-12 pt-10 font-normal leading-[120%] tracking-body-lg text-neutral-500",
+                    children: [
+                      noResults.icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-2 text-lg text-neutral-500", children: noResults.title }),
+                      noResults.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-neutral-500", children: noResults.description })
+                    ]
+                  }
+                ) }) }) })
+              ]
+            }
+          )
+        ] }),
+        pagination && onPaginationChange && !!rowsCount && data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "mx-6 ml-auto flex h-8 items-center justify-end gap-6 border-t-1 border-t-neutral-200",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "mr-2 text-sm font-semibold leading-[120%] tracking-sm text-neutral-700",
+                    children: `${rowsPerPageText}:`
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  rows_per_page_select_default,
+                  {
+                    value: "10",
+                    onRowsPerPageChange: (value) => {
+                      table.setPageSize(Number(value));
+                      table.setPageIndex(0);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "text-sm font-normal leading-[120%] tracking-sm text-neutral-900",
+                  children: `${pagination?.pageIndex * pagination.pageSize + 1}-${rowsCount > pagination?.pageIndex * pagination.pageSize + pagination.pageSize ? pagination?.pageIndex * pagination.pageSize + pagination.pageSize : rowsCount} ${ofText} ${rowsCount}`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-8 items-center px-3",
+                      table.getCanPreviousPage() ? "cursor-pointer" : "cursor-not-allowed"
+                    ),
+                    onClick: () => {
+                      if (table.getCanPreviousPage()) {
+                        table.previousPage();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ChevronLeftIcon,
+                      {
+                        className: cn(
+                          "h-[1.125rem] w-[1.125rem]",
+                          table.getCanPreviousPage() ? "text-neutral-900" : "text-neutral-500"
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-8 items-center px-3",
+                      table.getCanNextPage() ? "cursor-pointer" : "cursor-not-allowed"
+                    ),
+                    onClick: () => {
+                      if (table.getCanNextPage()) {
+                        table.nextPage();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ChevronRightIcon,
+                      {
+                        className: cn(
+                          "h-[1.125rem] w-[1.125rem]",
+                          table.getCanNextPage() ? "text-neutral-900" : "text-neutral-500"
+                        )
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var data_table_default = DataTable;
+
+export { DataTable, data_table_default };

package/dist/{chunk-EFMITOLW.mjs → chunk-XDQ2Y2UR.mjs}

@@ -1,6 +1,6 @@
-import { TriangleAlertIcon, CircleCheckIcon, CircleXIcon, InfoIcon, CloseIcon } from './chunk-GY2JBRY6.mjs';
 import { cn } from './chunk-P3UP2HUA.mjs';
 import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { TriangleAlertIcon, CircleCheckIcon, CircleXIcon, InfoIcon, CloseIcon } from './chunk-ERH7LWVL.mjs';
 import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
 import { cva } from 'cva';
 

package/dist/{chunk-RLA4I2X2.mjs → chunk-YXXI2T2N.mjs}

@@ -1,5 +1,5 @@
-import { LoaderCircleIcon } from './chunk-GY2JBRY6.mjs';
 import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { LoaderCircleIcon } from './chunk-ERH7LWVL.mjs';
 import { __toESM } from './chunk-PLJ6ZHAI.mjs';
 import { cva } from 'cva';
 

package/dist/chunk-ZVOUAD54.mjs

@@ -0,0 +1,49 @@
+import { cn } from './chunk-P3UP2HUA.mjs';
+import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
+import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+// src/components/scrollarea.tsx
+var React = __toESM(require_react());
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative h-full overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit] [&>div]:!flex [&>div]:h-full [&>div]:flex-col", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none bg-neutral-200 transition-colors",
+      orientation === "vertical" && "h-full w-4 py-2",
+      orientation === "horizontal" && "h-4 flex-col px-2",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ScrollAreaPrimitive.ScrollAreaThumb,
+      {
+        className: cn(
+          "relative flex-1 rounded bg-primary-500",
+          orientation === "vertical" && "mx-1 w-2",
+          orientation === "horizontal" && "my-1 h-2"
+        )
+      }
+    )
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/dist/data-table.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { HTMLAttributes } from 'react';
+import { ColumnDef, OnChangeFn, PaginationState } from '@tanstack/react-table';
+
+interface DataTableProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    rowsCount?: number;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    noResults: {
+        icon: React__default.ReactNode;
+        title: string;
+        description?: string;
+    };
+    rowsPerPageText?: string;
+    ofText?: string;
+}
+declare function DataTable<TData, TValue>({ columns, data, rowsCount, pagination, onPaginationChange, noResults, rowsPerPageText, ofText, className, ...props }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
+export { DataTable, DataTable as default };

package/dist/data-table.mjs

@@ -0,0 +1,7 @@
+export { DataTable, data_table_default as default } from './chunk-V2LMCQ4I.mjs';
+import './chunk-O5QOPJOD.mjs';
+import './chunk-ZVOUAD54.mjs';
+import './chunk-P3UP2HUA.mjs';
+import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
+import './chunk-PLJ6ZHAI.mjs';

package/dist/icon-button.d.mts

@@ -6,7 +6,7 @@ type IconButtonProps = {
 } & VariantProps<typeof iconButton> & React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 declare const iconButton: (props?: ({
     variant?: "contained" | "outlined" | "ghost" | "standard" | undefined;
-    size?: "large" | "medium" | "small" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;

package/dist/icons.d.mts

@@ -8,5 +8,7 @@ declare const CloseIcon: React.ForwardRefExoticComponent<Omit<lucide_react.Lucid
 declare const InfoIcon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const TriangleAlertIcon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 declare const ChevronDownIcon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronRightIcon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftIcon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
-export { ChevronDownIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon };
+export { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon };

package/dist/icons.mjs

@@ -1,2 +1,2 @@
-export { ChevronDownIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon } from './chunk-GY2JBRY6.mjs';
+export { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, CircleXIcon, CloseIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon } from './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/dist/index.css

@@ -369,6 +369,10 @@ video {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -385,6 +389,9 @@ video {
 .ml-4 {
   margin-left: 1rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -394,9 +401,15 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .flex {
   display: flex;
 }
+.table {
+  display: table;
+}
 .hidden {
   display: none;
 }
@@ -421,6 +434,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-\[1\.125rem\] {
+  height: 1.125rem;
+}
 .h-\[1\.375rem\] {
   height: 1.375rem;
 }
@@ -454,12 +470,18 @@ video {
 .w-8 {
   width: 2rem;
 }
+.w-\[1\.125rem\] {
+  width: 1.125rem;
+}
 .w-\[1\.375rem\] {
   width: 1.375rem;
 }
 .w-\[20rem\] {
   width: 20rem;
 }
+.w-\[40rem\] {
+  width: 40rem;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -479,6 +501,9 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.table-auto {
+  table-layout: auto;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -487,6 +512,12 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+.cursor-default {
+  cursor: default;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -504,6 +535,9 @@ video {
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -516,9 +550,15 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -543,10 +583,21 @@ video {
 .border-b-1 {
   border-bottom-width: 1px;
 }
+.border-t-1 {
+  border-top-width: 1px;
+}
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 231 230 / var(--tw-border-opacity));
+}
 .border-neutral-600 {
   --tw-border-opacity: 1;
   border-color: rgb(126 138 134 / var(--tw-border-opacity));
 }
+.border-t-neutral-200 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(225 231 230 / var(--tw-border-opacity));
+}
 .bg-error-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 231 216 / var(--tw-bg-opacity));
@@ -555,6 +606,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(207 235 254 / var(--tw-bg-opacity));
 }
+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 246 245 / var(--tw-bg-opacity));
+}
 .bg-neutral-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 231 230 / var(--tw-bg-opacity));
@@ -599,10 +654,17 @@ video {
 .p-4 {
   padding: 1rem;
 }
+.p-\[0\.625rem\] {
+  padding: 0.625rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -631,12 +693,25 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.pb-12 {
+  padding-bottom: 3rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
 .pr-2 {
   padding-right: 0.5rem;
 }
+.pt-10 {
+  padding-top: 2.5rem;
+}
+.text-left {
+  text-align: left;
+}
 .text-start {
   text-align: start;
 }
@@ -647,6 +722,10 @@ video {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -658,9 +737,15 @@ video {
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
+.uppercase {
+  text-transform: uppercase;
+}
 .leading-\[110\%\] {
   line-height: 110%;
 }
@@ -673,6 +758,15 @@ video {
 .leading-none {
   line-height: 1;
 }
+.tracking-body {
+  letter-spacing: 0.32px;
+}
+.tracking-body-lg {
+  letter-spacing: 0.36px;
+}
+.tracking-sm {
+  letter-spacing: 0.28px;
+}
 .text-error-500 {
   --tw-text-opacity: 1;
   color: rgb(241 96 89 / var(--tw-text-opacity));
@@ -772,6 +866,10 @@ video {
 .caret-neutral-900 {
   caret-color: #283331;
 }
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .outline-0 {
   outline-width: 0px;
 }

package/dist/index.d.mts

@@ -7,8 +7,13 @@ export { TextField } from './text-field.mjs';
 export { Spinner } from './spinner.mjs';
 export { ChipForm } from './chip-form.mjs';
 export { ChipStatus } from './chip-status.mjs';
+export { ScrollArea, ScrollBar } from './scrollarea.mjs';
+export { default as DataTable } from './data-table.mjs';
 import 'react';
 import 'cva';
 import '@radix-ui/react-tooltip';
 import '@radix-ui/react-tabs';
 import 'lucide-react';
+import '@radix-ui/react-scroll-area';
+import 'react/jsx-runtime';
+import '@tanstack/react-table';

package/dist/index.mjs

@@ -1,13 +1,16 @@
-export { Spinner } from './chunk-RLA4I2X2.mjs';
+export { Spinner } from './chunk-YXXI2T2N.mjs';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './chunk-2OWGGXTX.mjs';
-export { TextField } from './chunk-FULNSEPZ.mjs';
+export { TextField } from './chunk-KY2KI4AD.mjs';
 export { Tooltip, TooltipProvider } from './chunk-FRPPC3Z5.mjs';
-export { Alert } from './chunk-EFMITOLW.mjs';
-export { Button } from './chunk-QQLQXUJA.mjs';
+export { Alert } from './chunk-XDQ2Y2UR.mjs';
+export { Button } from './chunk-4YE5CU7E.mjs';
 export { ChipForm } from './chunk-RZ2JP5UH.mjs';
 export { ChipStatus } from './chunk-WSAW6L2X.mjs';
-export { IconButton } from './chunk-JVSF3AX2.mjs';
-import './chunk-GY2JBRY6.mjs';
+export { DataTable } from './chunk-V2LMCQ4I.mjs';
+import './chunk-O5QOPJOD.mjs';
+export { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
 import './chunk-P3UP2HUA.mjs';
+export { IconButton } from './chunk-JVSF3AX2.mjs';
 import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/dist/rows-per-page-select.d.mts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+declare const options: readonly ["10", "25", "50"];
+type RowsPerPageSelectProps = {
+    value: (typeof options)[number];
+    onRowsPerPageChange: (value: (typeof options)[number]) => void;
+};
+declare const RowsPerPageSelect: FC<RowsPerPageSelectProps>;
+
+export { RowsPerPageSelect as default };

package/dist/rows-per-page-select.mjs

@@ -0,0 +1,5 @@
+export { rows_per_page_select_default as default } from './chunk-O5QOPJOD.mjs';
+import './chunk-P3UP2HUA.mjs';
+import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
+import './chunk-PLJ6ZHAI.mjs';

package/dist/scrollarea.mjs

@@ -1,49 +1,4 @@
-import { cn } from './chunk-P3UP2HUA.mjs';
-import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
-import { __toESM, require_react } from './chunk-PLJ6ZHAI.mjs';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-// src/components/scrollarea.tsx
-var React = __toESM(require_react());
-var import_jsx_runtime = __toESM(require_jsx_runtime());
-var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative h-full overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit] [&>div]:!flex [&>div]:h-full [&>div]:flex-col", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none select-none bg-neutral-200 transition-colors",
-      orientation === "vertical" && "h-full w-4 py-2",
-      orientation === "horizontal" && "h-4 flex-col px-2",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ScrollAreaPrimitive.ScrollAreaThumb,
-      {
-        className: cn(
-          "relative flex-1 rounded bg-primary-500",
-          orientation === "vertical" && "mx-1 w-2",
-          orientation === "horizontal" && "my-1 h-2"
-        )
-      }
-    )
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
+import './chunk-P3UP2HUA.mjs';
+import './chunk-2MWIFYP3.mjs';
+import './chunk-PLJ6ZHAI.mjs';

package/dist/spinner.mjs

@@ -1,4 +1,4 @@
-export { Spinner } from './chunk-RLA4I2X2.mjs';
-import './chunk-GY2JBRY6.mjs';
+export { Spinner } from './chunk-YXXI2T2N.mjs';
 import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/dist/text-field.mjs

@@ -1,5 +1,5 @@
-export { TextField } from './chunk-FULNSEPZ.mjs';
-import './chunk-GY2JBRY6.mjs';
+export { TextField } from './chunk-KY2KI4AD.mjs';
 import './chunk-P3UP2HUA.mjs';
 import './chunk-2MWIFYP3.mjs';
+import './chunk-ERH7LWVL.mjs';
 import './chunk-PLJ6ZHAI.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sodtrack-web-ui",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "UI components for Sodtrack Web",
   "exports": {
     "./dist/index.css": "./dist/index.css",
@@ -45,10 +45,12 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.16",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/react-table": "^8.17.3",
     "cva": "1.0.0-beta.1"
   },
   "scripts": {