@react-fabric/data 1.0.0-beta.8 → 1.0.1

package/dist/cjs/hooks/useSelectableList.js

@@ -5,15 +5,39 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useSelectableList = function useSelectableList(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
+function useSelectableList(_ref) {
   var items = _ref.items,
     selected = _ref.selected,
     nonselected = _ref.nonselected,
     onChange = _ref.onChange,
     onClick = _ref.onClick;
   var selectionRef = react.useRef({});
-  var _useState = react.useState({}),
+  var _useState = react.useState(function () {
+      return {};
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -26,6 +50,7 @@ var useSelectableList = function useSelectableList(_ref) {
       var id = _ref2.id;
       return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
     }, {});
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setSelection(_objectSpread({}, selectionRef.current));
   }, [items, selected, nonselected]);
   var toggleSelection = react.useCallback(function (id) {
@@ -44,11 +69,11 @@ var useSelectableList = function useSelectableList(_ref) {
       onClick === null || onClick === void 0 || onClick(id, isNegative);
       onChange === null || onChange === void 0 || onChange(change[0], change[1]);
     });
-  }, []);
+  }, [onChange, onClick]);
   return {
     selection: selection,
     toggleSelection: toggleSelection
   };
-};
+}
 
 exports.useSelectableList = useSelectableList;

package/dist/cjs/i18n/{ar.json.js → ar/data.json.js}

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "أضف عامل تصفية",
 	addFilterNot: "إضافة لا تصفية"
 };
+var data = {
+	tree: {
+		noItems: "لا توجد عناصر شجرة متوفرة"
+	}
+};
 var ar = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var ar = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = ar;
 exports.histogram = histogram;

package/dist/cjs/i18n/{en.json.js → en/data.json.js}

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "Add Filter",
 	addFilterNot: "Add not Filter"
 };
+var data = {
+	tree: {
+		noItems: "No tree items available"
+	}
+};
 var en = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var en = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = en;
 exports.histogram = histogram;

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var data = require('./ar/data.json.js');
+var data$1 = require('./en/data.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("data", {
-  en: en.default,
-  ar: ar.default
+  en: data$1.default,
+  ar: data.default
 });

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var CheckList = require('./checklist/CheckList.js');
 var Histogram = require('./histogram/Histogram.js');
 var JsonViewer = require('./json/JsonViewer.js');
 var Pagination = require('./pagination/Pagination.js');
+var HtmlTable = require('./table/HtmlTable.js');
 var Table = require('./table/Table.js');
 var TreePanel = require('./tree/TreePanel.js');
 var Gallery = require('./virtual/Gallery.js');
@@ -12,15 +13,44 @@ var List = require('./virtual/List.js');
 var useFilteredList = require('./hooks/useFilteredList.js');
 var usePagination = require('./hooks/usePagination.js');
 
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 
+var DATA_PACKAGE = "@react-fabric/data";
+var DATA_VERSION = "1.0.0";
 
 exports.CheckList = CheckList.CheckList;
 exports.Histogram = Histogram.Histogram;
 exports.JsonViewer = JsonViewer.JsonViewer;
 exports.Pagination = Pagination.Pagination;
+exports.HtmlTable = HtmlTable.HtmlTable;
 exports.Table = Table.Table;
 exports.TreePanel = TreePanel.TreePanel;
 exports.VirtualGallery = Gallery.VirtualGallery;
 exports.VirtualList = List.VirtualList;
 exports.useFilteredList = useFilteredList.useFilteredList;
 exports.usePagination = usePagination.usePagination;
+exports.DATA_PACKAGE = DATA_PACKAGE;
+exports.DATA_VERSION = DATA_VERSION;

package/dist/cjs/json/JsonViewer.js

@@ -6,15 +6,14 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "json", "copy", "propertyScheme", "filters", "inline", "labelWidth", "formatter", "labeler", "onFilter", "emptyMessage", "showPropertyTree"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var reduceObject = function reduceObject(json) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function reduceObject(json) {
   var keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
   var ret = [];
@@ -37,8 +36,8 @@ var reduceObject = function reduceObject(json) {
     }
   });
   return ret.flat(99);
-};
-var JsonEntry = function JsonEntry(_ref3) {
+}
+function JsonEntry(_ref3) {
   var value = _ref3.value,
     path = _ref3.path,
     field = _ref3.field,
@@ -69,7 +68,7 @@ var JsonEntry = function JsonEntry(_ref3) {
     return (_ref4 = (_value$_label_ = value === null || value === void 0 ? void 0 : value._label_) !== null && _value$_label_ !== void 0 ? _value$_label_ : value) !== null && _ref4 !== void 0 ? _ref4 : "";
   }, [value]);
   var display = react.useMemo(function () {
-    var _propertyScheme$date, _propertyScheme$time, _propertyScheme$numbe, _propertyScheme$bytes, _propertyScheme$perce, _propertyScheme$numbe2, _propertyScheme$boole, _ret;
+    var _propertyScheme$date, _propertyScheme$time, _propertyScheme$numbe, _Format$phone, _propertyScheme$bytes, _propertyScheme$perce, _propertyScheme$numbe2, _propertyScheme$boole, _ret;
     if (children) return null;
     if (utilities.isNil(value)) return /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "text-muted",
@@ -89,7 +88,7 @@ var JsonEntry = function JsonEntry(_ref3) {
     }
     if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$date = propertyScheme.date) !== null && _propertyScheme$date !== void 0 && _propertyScheme$date.includes(path)) ;
     if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$time = propertyScheme.time) !== null && _propertyScheme$time !== void 0 && _propertyScheme$time.includes(path)) ret = utilities.Format.date(actualValue, "pp");
-    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$numbe = propertyScheme.number) !== null && _propertyScheme$numbe !== void 0 && _propertyScheme$numbe.phone(path)) ret = utilities.Format.phone(actualValue);
+    if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$numbe = propertyScheme.number) !== null && _propertyScheme$numbe !== void 0 && _propertyScheme$numbe.phone(path)) ret = (_Format$phone = utilities.Format.phone(actualValue)) !== null && _Format$phone !== void 0 ? _Format$phone : "";
     if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$bytes = propertyScheme.bytes) !== null && _propertyScheme$bytes !== void 0 && _propertyScheme$bytes.includes(path)) ret = utilities.Format.bytes(actualValue);
     if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$perce = propertyScheme.percent) !== null && _propertyScheme$perce !== void 0 && _propertyScheme$perce.includes(path)) ret = utilities.Format.percent(actualValue);
     if (propertyScheme !== null && propertyScheme !== void 0 && (_propertyScheme$numbe2 = propertyScheme.number) !== null && _propertyScheme$numbe2 !== void 0 && _propertyScheme$numbe2.includes(path)) ret = utilities.Format.number(actualValue);
@@ -99,6 +98,11 @@ var JsonEntry = function JsonEntry(_ref3) {
         clamp: 3,
         children: ret
       });
+    } else {
+      ret = /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "break-words",
+        children: ret
+      });
     }
     return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [ret, utilities.isObject(value) && value._score_ > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Meter, {
@@ -106,6 +110,7 @@ var JsonEntry = function JsonEntry(_ref3) {
         value: value._score_
       })]
     });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [value, path, formatter, propertyScheme, actualValue]);
   var pathWithoutOrdinal = react.useMemo(function () {
     return path.replace(/\.\d*\./, ".");
@@ -120,39 +125,43 @@ var JsonEntry = function JsonEntry(_ref3) {
   }, [filters, path, pathWithoutOrdinal]);
   var labelDisplay = react.useMemo(function () {
     var _labeler;
-    return /*#__PURE__*/jsxRuntime.jsx(core.ActionLabel, {
-      className: "text-dimmed text-sm px-2 flex-1 truncate",
-      actions: !canExpand && canFilter ? [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "danger",
-        size: "sm",
-        variant: "link",
-        icon: core.CoreIcons.funnelMinus,
-        "aria-label": "Filter Negative",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
-        }
-      }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "primary",
-        size: "sm",
-        variant: "link",
-        icon: core.CoreIcons.funnelPlus,
-        "aria-label": "Filter",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
-        }
-      }, "positive")] : [],
-      children: (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: utilities.cn("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words"),
+      children: [!canExpand && canFilter && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "hidden pe-1 group-hover:inline-block align-middle",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "primary",
+          size: "xs",
+          variant: "link",
+          icon: "icon-[mdi--filter-plus]",
+          "aria-label": "Filter",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
+          }
+        }, "positive"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "danger",
+          size: "xs",
+          variant: "link",
+          icon: "icon-[mdi--filter-minus]",
+          "aria-label": "Filter Negative",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+          }
+        }, "negative")]
+      }), (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field]
     });
-  }, [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
+  },
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
     children: [showPropertyTree && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("py-2", inline && "flex flex-nowrap items-center"),
+      className: utilities.cn("py-2", inline && "flex flex-nowrap items-center"),
       style: {
         paddingInlineStart: level * 8
       },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",
-        className: classNames("flex overflow-hidden items-center", inline && "flex-content"),
+        className: utilities.cn("flex overflow-hidden items-center", inline && "flex-content"),
         style: {
           flexBasis: labelWidth
         },
@@ -161,30 +170,36 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: [canExpand && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
           rtlFlip: true,
-          icon: expanded ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
+          icon: expanded ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: utilities.cn("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
           size: "xs",
           text: actualValue
-        }), display]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), !showPropertyTree && !children && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("py-2", inline && "flex flex-nowrap items-center"),
+      className: utilities.cn("py-2", inline && "flex flex-nowrap items-center"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         role: "none",
-        className: classNames("flex overflow-hidden items-center", inline && "flex-content"),
+        className: utilities.cn("flex overflow-hidden items-center", inline && "flex-content"),
         style: {
           flexBasis: labelWidth
         },
         children: labelDisplay
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: utilities.cn("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
           size: "xs",
           text: value
-        }), display]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), expanded && (children === null || children === void 0 ? void 0 : children.map(function (item) {
       return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
@@ -201,8 +216,30 @@ var JsonEntry = function JsonEntry(_ref3) {
       }), item.path);
     }))]
   });
-};
-var JsonViewer = function JsonViewer(_ref5) {
+}
+
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ */
+function JsonViewer(_ref5) {
   var className = _ref5.className,
     json = _ref5.json,
     copy = _ref5.copy,
@@ -223,7 +260,7 @@ var JsonViewer = function JsonViewer(_ref5) {
     return reduceObject(json);
   }, [json]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(className, "p-4 bg-alternate"),
+    className: utilities.cn(className, "bg-alternate"),
     children: !utilities.isEmpty(json) ? list.map(function (item) {
       return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
         copy: copy,
@@ -241,6 +278,6 @@ var JsonViewer = function JsonViewer(_ref5) {
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("json.empty")
     })
   }));
-};
+}
 
 exports.JsonViewer = JsonViewer;

package/dist/cjs/pagination/Pagination.js

@@ -2,11 +2,11 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core = require('@react-fabric/core');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var Pagination = /*#__PURE__*/react.memo(function (_ref) {
+var PaginationComponent = function PaginationComponent(_ref) {
   var page = _ref.page,
     ranges = _ref.ranges,
     totalPages = _ref.totalPages,
@@ -23,7 +23,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), mid && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -34,7 +34,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), last && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -45,30 +45,30 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       })]
     });
-  }, [start, mid, last, page]);
+  }, [start, mid, last, page, onPageChange]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "inline-flex items-center",
     children: [/*#__PURE__*/jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return onPageChange(0);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronsLeft,
+        icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       })
     }), /*#__PURE__*/jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return onPageChange(page - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
       })
     }), !minimal && pageBody, minimal && /*#__PURE__*/jsxRuntime.jsxs("label", {
@@ -78,23 +78,32 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page + 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronRight,
+        icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
       })
     }), /*#__PURE__*/jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return onPageChange(totalPages - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: utilities.cn("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.chevronsRight,
+        icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       })
     })]
   });
-});
+};
+
+/**
+ * Pagination component to navigate through pages of data.
+ * It displays buttons for navigating to the first, previous, next, and last pages,
+ * as well as buttons for specific page numbers based on the provided ranges.
+ * The component supports a minimal view that shows the current page and total pages.
+ * It uses memoization to optimize rendering performance.
+ */
+var Pagination = /*#__PURE__*/react.memo(PaginationComponent);
 Pagination.displayName = "Pagination";
 
 exports.Pagination = Pagination;

package/dist/cjs/table/AddColumn.js

@@ -26,15 +26,15 @@ var jsxRuntime = require('react/jsx-runtime');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var AddColumn = function AddColumn(_ref) {
+function AddColumn(_ref) {
   var columns = _ref.columns,
     onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    className: "group font-medium w-6 flex flex-nowrap text-start items-center",
     children: /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
       placement: "bottom-end",
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.insert,
+        icon: "icon-[mdi--plus-circle-outline]",
         className: "p-1 rounded-t rounded-b-none hover:outline"
       }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
         className: "text-sm",
@@ -45,12 +45,12 @@ var AddColumn = function AddColumn(_ref) {
             id: String(col.id),
             "data-dropdown-dismiss": "false",
             label: "".concat((_col$label = col.label) !== null && _col$label !== void 0 ? _col$label : String(col.id)),
-            icon: !col.hidden ? core.CoreIcons.tick : ""
+            icon: !col.hidden ? "icon-[mdi--check]" : ""
           }, String(col.id));
         })
       })]
     })
   });
-};
+}
 
 exports.AddColumn = AddColumn;

package/dist/cjs/table/BodyCell.js

@@ -2,9 +2,8 @@
 
 var date = require('@react-fabric/date');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
-var Context = require('./Context.js');
+var context = require('./context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -31,36 +30,38 @@ var jsxRuntime = require('react/jsx-runtime');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var BodyCell = function BodyCell(_ref) {
+function BodyCell(_ref) {
   var _column$minWidth, _column$maxWidth;
   var column = _ref.column,
     item = _ref.item,
     index = _ref.index;
-  var _useTableContext = Context.useTableContext(),
+  var _useTableContext = context.useTableContext(),
     widths = _useTableContext.widths;
   var width = react.useMemo(function () {
     var _widths$get;
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
   var content = react.useMemo(function () {
+    var _column$dataType2, _ref2;
     var value = utilities.getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
       var _column$valueMap;
       var map = (_column$valueMap = column.valueMap) !== null && _column$valueMap !== void 0 ? _column$valueMap : {
         "true": "Yes",
-        "false": "no"
+        "false": "No"
       };
       return map["".concat(utilities.isTrue(value) ? "true" : "false")];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      var _column$dataType;
+      if (["number", "string"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "string") && value in column.valueMap) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes((_column$dataType2 = column.dataType) !== null && _column$dataType2 !== void 0 ? _column$dataType2 : "")) {
       return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
         date: value,
         format: column.format
@@ -69,20 +70,26 @@ var BodyCell = function BodyCell(_ref) {
     if (column.dataType === "number") {
       return utilities.Format.number(value, column.format);
     }
-    return value !== null && value !== void 0 ? value : "";
-  }, [item, column]);
+    if (utilities.isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (utilities.isArray(value)) {
+      return value.join(", ");
+    }
+    return (_ref2 = value) !== null && _ref2 !== void 0 ? _ref2 : "";
+  }, [item, column, index]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "overflow-hidden bg-inherit start-0",
+    className: "overflow-hidden bg-inherit inset-s-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      className: utilities.cn("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
       children: content
     })
   });
-};
+}
 
 exports.BodyCell = BodyCell;