free-grid-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tony Tom K
+
+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.

package/dist/Grid.d.ts

@@ -0,0 +1,4 @@
+import { GridProps } from './types';
+export declare function Grid<T extends {
+    id?: string | number;
+} | any>({ data, columns, showHeader, renderChildView, selectable, selectedIds, onSelectionChange, pagination, className, id, }: GridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/free-grid.css

@@ -0,0 +1 @@
+:root{--fg-border-color: #e0e0e0;--fg-header-bg: #ffffff;--fg-header-text: rgba(0, 0, 0, .87);--fg-row-hover: rgba(0, 0, 0, .04);--fg-row-selected: rgba(25, 118, 210, .08);--fg-row-border: #e0e0e0;--fg-text-color: rgba(0, 0, 0, .87);--fg-primary-color: #1976d2;--fg-font-family: "Roboto", "Helvetica", "Arial", sans-serif;--fg-transition: background-color .2s cubic-bezier(.4, 0, .2, 1) 0ms}.free-grid-container{width:100%;border:1px solid var(--fg-border-color);border-radius:4px;overflow:hidden;font-family:var(--fg-font-family);background:#fff;display:flex;flex-direction:column}.free-grid-header{background:var(--fg-header-bg);border-bottom:1px solid var(--fg-border-color);font-weight:700;color:var(--fg-header-text);font-size:.875rem}.free-grid-header-cell{padding:12px 16px;display:flex;align-items:center;position:relative}.free-grid-header-cell:not(:last-child):after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background-color:var(--fg-border-color)}.free-grid-body{display:flex;flex-direction:column;overflow-y:auto}.free-grid-row{border-bottom:1px solid var(--fg-row-border);transition:var(--fg-transition);color:var(--fg-text-color);font-size:.875rem;min-height:52px}.free-grid-row:last-child{border-bottom:none}.free-grid-row.expandable{cursor:pointer}.free-grid-row:hover,.free-grid-row.expanded{background-color:var(--fg-row-hover)}.free-grid-cell{padding:8px 16px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.free-grid-checkbox-cell{width:50px;flex:none!important;justify-content:center}.free-grid-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fg-primary-color)}.free-grid-footer{padding:8px 16px;border-top:1px solid var(--fg-border-color);display:flex;justify-content:flex-end;align-items:center;font-size:.875rem;color:var(--fg-text-color);gap:24px}.free-grid-pagination{display:flex;align-items:center;gap:16px}.free-grid-pagination-actions{display:flex;gap:8px}.free-grid-icon-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--fg-transition);color:#0000008a}.free-grid-icon-button:hover:not(:disabled){background-color:#0000000a}.free-grid-icon-button:disabled{color:#00000042;cursor:default}.free-grid-child-view{padding:24px;background-color:#fcfcfc;border-bottom:1px solid var(--fg-border-color);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

package/dist/free-grid.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}

package/dist/free-grid.js

@@ -0,0 +1,372 @@
+import B, { useState as re } from "react";
+var O = { exports: {} }, g = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var G;
+function te() {
+  if (G) return g;
+  G = 1;
+  var f = Symbol.for("react.transitional.element"), E = Symbol.for("react.fragment");
+  function b(p, u, d) {
+    var m = null;
+    if (d !== void 0 && (m = "" + d), u.key !== void 0 && (m = "" + u.key), "key" in u) {
+      d = {};
+      for (var l in u)
+        l !== "key" && (d[l] = u[l]);
+    } else d = u;
+    return u = d.ref, {
+      $$typeof: f,
+      type: p,
+      key: m,
+      ref: u !== void 0 ? u : null,
+      props: d
+    };
+  }
+  return g.Fragment = E, g.jsx = b, g.jsxs = b, g;
+}
+var k = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var V;
+function ae() {
+  return V || (V = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case t:
+          return "Fragment";
+        case i:
+          return "Profiler";
+        case c:
+          return "StrictMode";
+        case C:
+          return "Suspense";
+        case N:
+          return "SuspenseList";
+        case Z:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case S:
+            return "Portal";
+          case y:
+            return e.displayName || "Context";
+          case v:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case h:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case H:
+            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
+          case Y:
+            r = e._payload, e = e._init;
+            try {
+              return f(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function E(e) {
+      return "" + e;
+    }
+    function b(e) {
+      try {
+        E(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var a = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          s
+        ), E(e);
+      }
+    }
+    function p(e) {
+      if (e === t) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === Y)
+        return "<...>";
+      try {
+        var r = f(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function u() {
+      var e = F.A;
+      return e === null ? null : e.getOwner();
+    }
+    function d() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (z.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function l(e, r) {
+      function a() {
+        I || (I = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function P() {
+      var e = f(this.type);
+      return W[e] || (W[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function $(e, r, a, s, A, M) {
+      var o = a.ref;
+      return e = {
+        $$typeof: w,
+        type: e,
+        key: r,
+        props: a,
+        _owner: s
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: P
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: M
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function R(e, r, a, s, A, M) {
+      var o = r.children;
+      if (o !== void 0)
+        if (s)
+          if (K(o)) {
+            for (s = 0; s < o.length; s++)
+              T(o[s]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else T(o);
+      if (z.call(r, "key")) {
+        o = f(e);
+        var x = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        s = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", J[o + s] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          s,
+          o,
+          x,
+          o
+        ), J[o + s] = !0);
+      }
+      if (o = null, a !== void 0 && (b(a), o = "" + a), m(r) && (b(r.key), o = "" + r.key), "key" in r) {
+        a = {};
+        for (var D in r)
+          D !== "key" && (a[D] = r[D]);
+      } else a = r;
+      return o && l(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), $(
+        e,
+        o,
+        a,
+        u(),
+        A,
+        M
+      );
+    }
+    function T(e) {
+      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === Y && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function j(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === w;
+    }
+    var _ = B, w = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), t = Symbol.for("react.fragment"), c = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), v = Symbol.for("react.consumer"), y = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), Y = Symbol.for("react.lazy"), Z = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), F = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, z = Object.prototype.hasOwnProperty, K = Array.isArray, L = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var I, W = {}, U = _.react_stack_bottom_frame.bind(
+      _,
+      d
+    )(), q = L(p(d)), J = {};
+    k.Fragment = t, k.jsx = function(e, r, a) {
+      var s = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return R(
+        e,
+        r,
+        a,
+        !1,
+        s ? Error("react-stack-top-frame") : U,
+        s ? L(p(e)) : q
+      );
+    }, k.jsxs = function(e, r, a) {
+      var s = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return R(
+        e,
+        r,
+        a,
+        !0,
+        s ? Error("react-stack-top-frame") : U,
+        s ? L(p(e)) : q
+      );
+    };
+  })()), k;
+}
+var X;
+function ne() {
+  return X || (X = 1, process.env.NODE_ENV === "production" ? O.exports = te() : O.exports = ae()), O.exports;
+}
+var n = ne();
+function oe({
+  data: f,
+  columns: E,
+  showHeader: b = !0,
+  renderChildView: p,
+  selectable: u,
+  selectedIds: d = [],
+  onSelectionChange: m,
+  pagination: l,
+  className: P = "",
+  id: $
+}) {
+  const [R, T] = re(/* @__PURE__ */ new Set()), j = (t, c) => {
+    const i = c.id !== void 0 ? c.id : t, v = new Set(R);
+    v.has(i) ? v.delete(i) : v.add(i), T(v);
+  }, _ = (t) => {
+    m && (t.target.checked ? m(f.map((c, i) => c.id !== void 0 ? c.id : i)) : m([]));
+  }, w = (t, c) => {
+    if (t.stopPropagation(), !m) return;
+    const i = new Set(d);
+    t.target.checked ? i.add(c) : i.delete(c), m(Array.from(i));
+  }, S = {
+    display: "grid",
+    gridTemplateColumns: `${u ? "50px " : ""}${E.map((t) => t.width ? typeof t.width == "number" ? `${t.width}px` : t.width : t.flex ? `${t.flex}fr` : "1fr").join(" ")}`
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: `free-grid-container ${P}`, id: $, children: [
+    b && /* @__PURE__ */ n.jsxs("div", { className: "free-grid-header", style: S, children: [
+      u && /* @__PURE__ */ n.jsx("div", { className: "free-grid-header-cell free-grid-checkbox-cell", children: /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "free-grid-checkbox",
+          onChange: _,
+          checked: f.length > 0 && d.length === f.length
+        }
+      ) }),
+      E.map((t, c) => /* @__PURE__ */ n.jsx("div", { className: "free-grid-header-cell", children: t.header }, `header-${c}`))
+    ] }),
+    /* @__PURE__ */ n.jsx("div", { className: "free-grid-body", children: f.map((t, c) => {
+      const i = t.id !== void 0 ? t.id : c, v = R.has(i), y = d.includes(i);
+      return /* @__PURE__ */ n.jsxs(B.Fragment, { children: [
+        /* @__PURE__ */ n.jsxs(
+          "div",
+          {
+            className: `free-grid-row ${p ? "expandable" : ""} ${v ? "expanded" : ""} ${y ? "selected" : ""}`,
+            style: S,
+            onClick: () => p && j(c, t),
+            children: [
+              u && /* @__PURE__ */ n.jsx("div", { className: "free-grid-cell free-grid-checkbox-cell", children: /* @__PURE__ */ n.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "free-grid-checkbox",
+                  checked: y,
+                  onChange: (h) => w(h, i),
+                  onClick: (h) => h.stopPropagation()
+                }
+              ) }),
+              E.map((h, C) => {
+                const N = t[h.key];
+                return /* @__PURE__ */ n.jsx("div", { className: "free-grid-cell", children: h.render ? h.render(N, t) : N }, `cell-${c}-${C}`);
+              })
+            ]
+          }
+        ),
+        v && p && /* @__PURE__ */ n.jsx("div", { className: "free-grid-child-view", children: p(t) })
+      ] }, `row-${i}`);
+    }) }),
+    l && /* @__PURE__ */ n.jsx("div", { className: "free-grid-footer", children: /* @__PURE__ */ n.jsxs("div", { className: "free-grid-pagination", children: [
+      /* @__PURE__ */ n.jsxs("span", { children: [
+        Math.min((l.page - 1) * l.pageSize + 1, l.total),
+        "-",
+        Math.min(l.page * l.pageSize, l.total),
+        " of ",
+        l.total
+      ] }),
+      /* @__PURE__ */ n.jsxs("div", { className: "free-grid-pagination-actions", children: [
+        /* @__PURE__ */ n.jsx("button", { className: "free-grid-icon-button", disabled: l.page <= 1, children: /* @__PURE__ */ n.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ n.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }) }),
+        /* @__PURE__ */ n.jsx(
+          "button",
+          {
+            className: "free-grid-icon-button",
+            disabled: l.page * l.pageSize >= l.total,
+            children: /* @__PURE__ */ n.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ n.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  oe as Grid
+};

package/dist/free-grid.umd.cjs

@@ -0,0 +1,22 @@
+(function(E,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],_):(E=typeof globalThis<"u"?globalThis:E||self,_(E.FreeGrid={},E.React))})(this,(function(E,_){"use strict";var w={exports:{}},T={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var W;function Z(){if(W)return T;W=1;var f=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function x(p,u,d){var m=null;if(d!==void 0&&(m=""+d),u.key!==void 0&&(m=""+u.key),"key"in u){d={};for(var l in u)l!=="key"&&(d[l]=u[l])}else d=u;return u=d.ref,{$$typeof:f,type:p,key:m,ref:u!==void 0?u:null,props:d}}return T.Fragment=b,T.jsx=x,T.jsxs=x,T}var j={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var U;function Q(){return U||(U=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case t:return"Fragment";case i:return"Profiler";case c:return"StrictMode";case F:return"Suspense";case P:return"SuspenseList";case te:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case O:return"Portal";case A:return e.displayName||"Context";case h:return(e._context.displayName||"Context")+".Consumer";case v:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case M:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function b(e){return""+e}function x(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),b(e)}}function p(e){if(e===t)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===M)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=L.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function m(e){if(J.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function l(e,r){function a(){q||(q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function $(){var e=f(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function Y(e,r,a,s,C,z){var o=a.ref;return e={$$typeof:N,type:e,key:r,props:a,_owner:s},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:$}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function k(e,r,a,s,C,z){var o=r.children;if(o!==void 0)if(s)if(ae(o)){for(s=0;s<o.length;s++)y(o[s]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(o);if(J.call(r,"key")){o=f(e);var g=Object.keys(r).filter(function(se){return se!=="key"});s=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",H[o+s]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,o,g,o),H[o+s]=!0)}if(o=null,a!==void 0&&(x(a),o=""+a),m(r)&&(x(r.key),o=""+r.key),"key"in r){a={};for(var I in r)I!=="key"&&(a[I]=r[I])}else a=r;return o&&l(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),Y(e,o,a,u(),C,z)}function y(e){S(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===M&&(e._payload.status==="fulfilled"?S(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function S(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var R=_,N=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),t=Symbol.for("react.fragment"),c=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),h=Symbol.for("react.consumer"),A=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),L=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,J=Object.prototype.hasOwnProperty,ae=Array.isArray,D=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var q,V={},X=R.react_stack_bottom_frame.bind(R,d)(),B=D(p(d)),H={};j.Fragment=t,j.jsx=function(e,r,a){var s=1e4>L.recentlyCreatedOwnerStacks++;return k(e,r,a,!1,s?Error("react-stack-top-frame"):X,s?D(p(e)):B)},j.jsxs=function(e,r,a){var s=1e4>L.recentlyCreatedOwnerStacks++;return k(e,r,a,!0,s?Error("react-stack-top-frame"):X,s?D(p(e)):B)}})()),j}var G;function K(){return G||(G=1,process.env.NODE_ENV==="production"?w.exports=Z():w.exports=Q()),w.exports}var n=K();function ee({data:f,columns:b,showHeader:x=!0,renderChildView:p,selectable:u,selectedIds:d=[],onSelectionChange:m,pagination:l,className:$="",id:Y}){const[k,y]=_.useState(new Set),S=(t,c)=>{const i=c.id!==void 0?c.id:t,h=new Set(k);h.has(i)?h.delete(i):h.add(i),y(h)},R=t=>{m&&(t.target.checked?m(f.map((c,i)=>c.id!==void 0?c.id:i)):m([]))},N=(t,c)=>{if(t.stopPropagation(),!m)return;const i=new Set(d);t.target.checked?i.add(c):i.delete(c),m(Array.from(i))},O={display:"grid",gridTemplateColumns:`${u?"50px ":""}${b.map(t=>t.width?typeof t.width=="number"?`${t.width}px`:t.width:t.flex?`${t.flex}fr`:"1fr").join(" ")}`};return n.jsxs("div",{className:`free-grid-container ${$}`,id:Y,children:[x&&n.jsxs("div",{className:"free-grid-header",style:O,children:[u&&n.jsx("div",{className:"free-grid-header-cell free-grid-checkbox-cell",children:n.jsx("input",{type:"checkbox",className:"free-grid-checkbox",onChange:R,checked:f.length>0&&d.length===f.length})}),b.map((t,c)=>n.jsx("div",{className:"free-grid-header-cell",children:t.header},`header-${c}`))]}),n.jsx("div",{className:"free-grid-body",children:f.map((t,c)=>{const i=t.id!==void 0?t.id:c,h=k.has(i),A=d.includes(i);return n.jsxs(_.Fragment,{children:[n.jsxs("div",{className:`free-grid-row ${p?"expandable":""} ${h?"expanded":""} ${A?"selected":""}`,style:O,onClick:()=>p&&S(c,t),children:[u&&n.jsx("div",{className:"free-grid-cell free-grid-checkbox-cell",children:n.jsx("input",{type:"checkbox",className:"free-grid-checkbox",checked:A,onChange:v=>N(v,i),onClick:v=>v.stopPropagation()})}),b.map((v,F)=>{const P=t[v.key];return n.jsx("div",{className:"free-grid-cell",children:v.render?v.render(P,t):P},`cell-${c}-${F}`)})]}),h&&p&&n.jsx("div",{className:"free-grid-child-view",children:p(t)})]},`row-${i}`)})}),l&&n.jsx("div",{className:"free-grid-footer",children:n.jsxs("div",{className:"free-grid-pagination",children:[n.jsxs("span",{children:[Math.min((l.page-1)*l.pageSize+1,l.total),"-",Math.min(l.page*l.pageSize,l.total)," of ",l.total]}),n.jsxs("div",{className:"free-grid-pagination-actions",children:[n.jsx("button",{className:"free-grid-icon-button",disabled:l.page<=1,children:n.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:n.jsx("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})})}),n.jsx("button",{className:"free-grid-icon-button",disabled:l.page*l.pageSize>=l.total,children:n.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:n.jsx("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"})})})]})]})})]})}E.Grid=ee,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+export interface Column<T> {
+    key: keyof T | string;
+    header: React.ReactNode;
+    width?: string | number;
+    flex?: number;
+    render?: (value: any, item: T) => React.ReactNode;
+}
+export interface GridProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    showHeader?: boolean;
+    rowHeight?: string | number;
+    renderChildView?: (item: T) => React.ReactNode;
+    selectable?: boolean;
+    selectedIds?: (string | number)[];
+    onSelectionChange?: (ids: (string | number)[]) => void;
+    pagination?: {
+        total: number;
+        page: number;
+        pageSize: number;
+    };
+    className?: string;
+    id?: string;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "free-grid-react",
+  "version": "0.1.0",
+  "description": "A lightweight, high-performance React grid component built with CSS Grid and TypeScript.",
+  "author": "Tony Tom K",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "grid",
+    "table",
+    "typescript",
+    "vite",
+    "flexbox",
+    "mui-style"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "import": "./dist/free-grid.js",
+      "require": "./dist/free-grid.umd.cjs"
+    },
+    "./src/Grid.css": "./src/Grid.css",
+    "./free-grid.css": "./dist/free-grid.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.4.0"
+  }
+}