@rudra-studio/rudra-layout 1.0.19 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/Grid/index.d.ts +13 -1
  2. package/components/Grid/index.js +7 -3
  3. package/components/Table/index.js +123 -80
  4. package/package.json +3 -2
package/components/Grid/index.d.ts CHANGED
@@ -4,6 +4,13 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
4
4
  children?: React.ReactNode;
5
5
  /** @select|div|section|article|main|aside */
6
6
  as?: GridElement;
7
+ /**
8
+ * Explicit equal-width column count. This is preferred when the desired
9
+ * count is data-driven or not represented by a Tailwind utility.
10
+ *
11
+ * @type|number
12
+ */
13
+ columns?: number;
7
14
  /**
8
15
  * @type|class
9
16
  * @schema [
@@ -18,6 +25,11 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
18
25
  * {"key":"4","label":"4 Columns"},
19
26
  * {"key":"5","label":"5 Columns"},
20
27
  * {"key":"6","label":"6 Columns"},
28
+ * {"key":"7","label":"7 Columns"},
29
+ * {"key":"8","label":"8 Columns"},
30
+ * {"key":"9","label":"9 Columns"},
31
+ * {"key":"10","label":"10 Columns"},
32
+ * {"key":"11","label":"11 Columns"},
21
33
  * {"key":"12","label":"12 Columns"}
22
34
  * ]
23
35
  * },
@@ -135,4 +147,4 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
135
147
  */
136
148
  className?: string;
137
149
  }
138
- export default function Grid({ children, as, className, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
150
+ export default function Grid({ children, as, columns, className, style, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
package/components/Grid/index.js CHANGED
@@ -1,10 +1,14 @@
1
1
  import "react";
2
2
  import { jsx as e } from "react/jsx-runtime";
3
3
  //#region src/components/Grid/index.tsx
4
- function t({ children: t, as: n = "div", className: r = "", ...i }) {
4
+ function t({ children: t, as: n = "div", columns: r, className: i = "", style: a, ...o }) {
5
5
  return /* @__PURE__ */ e(n, {
6
- ...i,
7
- className: ["grid", r].filter(Boolean).join(" "),
6
+ ...o,
7
+ className: ["grid", i].filter(Boolean).join(" "),
8
+ style: r ? {
9
+ ...a,
10
+ gridTemplateColumns: `repeat(${Math.max(1, Math.min(12, Math.floor(r)))}, minmax(0, 1fr))`
11
+ } : a,
8
12
  children: t
9
13
  });
10
14
  }
package/components/Table/index.js CHANGED
@@ -3,117 +3,150 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
3
3
  import { ChevronDown as o, ChevronLeft as s, ChevronRight as c, ChevronUp as l, ChevronsLeft as u, ChevronsRight as d, ChevronsUpDown as f, Loader2 as p, Search as m, SlidersHorizontal as h } from "lucide-react";
4
4
  import { flexRender as g, getCoreRowModel as _, getFilteredRowModel as v, getPaginationRowModel as y, getSortedRowModel as b, useReactTable as x } from "@tanstack/react-table";
5
5
  //#region src/components/Table/index.tsx
6
- function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "pagination", onLoadMore: E, isFetching: D = !1, hasMore: O = !1, globalFilterPlaceholder: k = "Search all records..." }) {
7
- let [A, j] = r([]), [M, N] = r([]), [P, F] = r(""), [I, L] = r(!1), R = n(null), z = e((e) => {
8
- D || (R.current && R.current.disconnect(), R.current = new IntersectionObserver((e) => {
9
- e[0].isIntersecting && O && E && E();
10
- }), e && R.current.observe(e));
6
+ var S = [], C = [];
7
+ function w({ columns: w = S, data: T = C, pageSize: E = 10, mode: D = "pagination", onLoadMore: O, isFetching: k = !1, hasMore: A = !1, globalFilterPlaceholder: j = "Search all records..." }) {
8
+ let [M, N] = r([]), [P, F] = r([]), [I, L] = r(""), [R, z] = r(!1), B = n(null), V = n(O), H = n(!1);
9
+ t(() => {
10
+ V.current = O;
11
+ }, [O]), t(() => {
12
+ k || (H.current = !1);
13
+ }, [k, T.length]);
14
+ let U = e((e) => {
15
+ B.current = e;
16
+ }, []);
17
+ t(() => {
18
+ let e = B.current;
19
+ if (D !== "infinite" || !e || k || !A || !V.current) return;
20
+ let t = new IntersectionObserver(([e]) => {
21
+ !e?.isIntersecting || H.current || !V.current || (H.current = !0, V.current());
22
+ }, {
23
+ root: null,
24
+ rootMargin: "200px 0px",
25
+ threshold: 0
26
+ });
27
+ return t.observe(e), () => {
28
+ t.disconnect();
29
+ };
11
30
  }, [
12
31
  D,
13
- O,
14
- E
15
- ]), B = x({
16
- data: C,
17
- columns: S,
32
+ k,
33
+ A,
34
+ T.length
35
+ ]);
36
+ let W = x({
37
+ data: T,
38
+ columns: w,
18
39
  state: {
19
- sorting: A,
20
- columnFilters: M,
21
- globalFilter: P
40
+ sorting: M,
41
+ columnFilters: P,
42
+ globalFilter: I
22
43
  },
23
- initialState: { pagination: { pageSize: w } },
24
- onSortingChange: j,
25
- onColumnFiltersChange: N,
26
- onGlobalFilterChange: F,
44
+ initialState: { pagination: { pageSize: E } },
45
+ onSortingChange: N,
46
+ onColumnFiltersChange: F,
47
+ onGlobalFilterChange: L,
27
48
  globalFilterFn: "includesString",
28
49
  getCoreRowModel: _(),
29
50
  getFilteredRowModel: v(),
30
51
  getSortedRowModel: b(),
31
- getPaginationRowModel: T === "pagination" ? y() : void 0
52
+ getPaginationRowModel: D === "pagination" ? y() : void 0
32
53
  });
33
54
  return t(() => {
34
- B.setPageSize(w);
35
- }, [w, B]), /* @__PURE__ */ a("div", {
36
- className: "space-y-4 w-full",
55
+ W.getState().pagination.pageSize !== E && W.setPageSize(E);
56
+ }, [E, W]), /* @__PURE__ */ a("div", {
57
+ className: "w-full space-y-4",
37
58
  children: [
38
59
  /* @__PURE__ */ a("div", {
39
- className: "flex flex-col sm:flex-row items-center justify-between gap-4",
60
+ className: "flex flex-col items-center justify-between gap-4 sm:flex-row",
40
61
  children: [/* @__PURE__ */ a("div", {
41
62
  className: "relative w-full sm:w-96",
42
- children: [/* @__PURE__ */ i(m, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ i("input", {
43
- value: P ?? "",
44
- onChange: (e) => F(e.target.value),
45
- placeholder: k,
46
- className: "w-full bg-white dark:bg-[#0A0A0A] border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm text-slate-900 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-600 focus:outline-none focus:border-blue-500 dark:focus:border-cyan-500/50 transition-colors shadow-sm dark:shadow-none"
63
+ children: [/* @__PURE__ */ i(m, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500" }), /* @__PURE__ */ i("input", {
64
+ type: "text",
65
+ value: I,
66
+ onChange: (e) => {
67
+ L(e.target.value);
68
+ },
69
+ placeholder: j,
70
+ className: "w-full rounded-xl border border-slate-200 bg-white py-2 pl-10 pr-4 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400 focus:border-blue-500 focus:outline-none dark:border-white/10 dark:bg-[#0A0A0A] dark:text-slate-200 dark:shadow-none dark:placeholder:text-slate-600 dark:focus:border-cyan-500/50"
47
71
  })]
48
72
  }), /* @__PURE__ */ a("button", {
49
- onClick: () => L(!I),
50
- className: `flex items-center gap-2 px-4 py-2 border rounded-xl text-sm font-medium transition-colors w-full sm:w-auto shadow-sm dark:shadow-none ${I ? "bg-blue-50 dark:bg-white/10 border-blue-200 dark:border-white/20 text-blue-700 dark:text-white" : "border-slate-200 dark:border-white/10 bg-white dark:bg-[#0A0A0A] hover:bg-slate-50 dark:hover:bg-white/5 text-slate-700 dark:text-slate-300"}`,
73
+ type: "button",
74
+ onClick: () => {
75
+ z((e) => !e);
76
+ },
77
+ className: `flex w-full items-center gap-2 rounded-xl border px-4 py-2 text-sm font-medium shadow-sm transition-colors sm:w-auto dark:shadow-none ${R ? "border-blue-200 bg-blue-50 text-blue-700 dark:border-white/20 dark:bg-white/10 dark:text-white" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-[#0A0A0A] dark:text-slate-300 dark:hover:bg-white/5"}`,
51
78
  children: [/* @__PURE__ */ i(h, { size: 14 }), /* @__PURE__ */ i("span", { children: "Filters" })]
52
79
  })]
53
80
  }),
54
81
  /* @__PURE__ */ a("div", {
55
- className: "rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-[#0A0A0A] overflow-hidden shadow-sm dark:shadow-none flex flex-col",
82
+ className: "flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[#0A0A0A] dark:shadow-none",
56
83
  children: [/* @__PURE__ */ i("div", {
57
- className: "overflow-x-auto custom-scrollbar",
84
+ className: "custom-scrollbar overflow-x-auto",
58
85
  children: /* @__PURE__ */ a("table", {
59
- className: "w-full text-sm text-left",
86
+ className: "w-full text-left text-sm",
60
87
  children: [/* @__PURE__ */ i("thead", {
61
- className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 uppercase text-[10px] tracking-wider font-bold",
62
- children: B.getHeaderGroups().map((e) => /* @__PURE__ */ i("tr", { children: e.headers.map((e) => /* @__PURE__ */ i("th", {
63
- className: "px-6 py-4 whitespace-nowrap align-top",
88
+ className: "border-b border-slate-200 bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400",
89
+ children: W.getHeaderGroups().map((e) => /* @__PURE__ */ i("tr", { children: e.headers.map((e) => /* @__PURE__ */ i("th", {
90
+ className: "whitespace-nowrap px-6 py-4 align-top",
64
91
  children: e.isPlaceholder ? null : /* @__PURE__ */ a("div", {
65
92
  className: "flex flex-col gap-3",
66
93
  children: [/* @__PURE__ */ a("div", {
67
- className: e.column.getCanSort() ? "cursor-pointer select-none flex items-center gap-2 hover:text-slate-900 dark:hover:text-white transition-colors" : "flex items-center gap-2",
94
+ role: e.column.getCanSort() ? "button" : void 0,
95
+ tabIndex: e.column.getCanSort() ? 0 : void 0,
96
+ className: e.column.getCanSort() ? "flex cursor-pointer select-none items-center gap-2 transition-colors hover:text-slate-900 dark:hover:text-white" : "flex items-center gap-2",
68
97
  onClick: e.column.getToggleSortingHandler(),
69
- children: [g(e.column.columnDef.header, e.getContext()), {
70
- asc: /* @__PURE__ */ i(l, {
71
- size: 14,
72
- className: "text-blue-500 dark:text-cyan-400"
73
- }),
74
- desc: /* @__PURE__ */ i(o, {
75
- size: 14,
76
- className: "text-blue-500 dark:text-cyan-400"
77
- })
78
- }[e.column.getIsSorted()] ?? (e.column.getCanSort() ? /* @__PURE__ */ i(f, {
98
+ onKeyDown: (t) => {
99
+ !e.column.getCanSort() || t.key !== "Enter" && t.key !== " " || (t.preventDefault(), e.column.toggleSorting());
100
+ },
101
+ children: [g(e.column.columnDef.header, e.getContext()), e.column.getIsSorted() === "asc" ? /* @__PURE__ */ i(l, {
79
102
  size: 14,
80
- className: "opacity-0 group-hover:opacity-50"
81
- }) : null)]
82
- }), I && e.column.getCanFilter() ? /* @__PURE__ */ i("input", {
103
+ className: "text-blue-500 dark:text-cyan-400"
104
+ }) : e.column.getIsSorted() === "desc" ? /* @__PURE__ */ i(o, {
105
+ size: 14,
106
+ className: "text-blue-500 dark:text-cyan-400"
107
+ }) : e.column.getCanSort() ? /* @__PURE__ */ i(f, {
108
+ size: 14,
109
+ className: "opacity-50"
110
+ }) : null]
111
+ }), R && e.column.getCanFilter() ? /* @__PURE__ */ i("input", {
83
112
  type: "text",
84
113
  value: e.column.getFilterValue() ?? "",
85
- onChange: (t) => e.column.setFilterValue(t.target.value),
114
+ onChange: (t) => {
115
+ e.column.setFilterValue(t.target.value);
116
+ },
117
+ onClick: (e) => {
118
+ e.stopPropagation();
119
+ },
86
120
  placeholder: "Filter...",
87
- className: "w-full min-w-[120px] px-2 py-1.5 text-xs font-normal normal-case border rounded-lg bg-white dark:bg-black/40 border-slate-200 dark:border-white/10 text-slate-700 dark:text-slate-300 focus:outline-none focus:border-blue-500 dark:focus:border-cyan-500/50 transition-colors shadow-inner",
88
- onClick: (e) => e.stopPropagation()
121
+ className: "w-full min-w-[120px] rounded-lg border border-slate-200 bg-white px-2 py-1.5 text-xs font-normal normal-case text-slate-700 shadow-inner transition-colors focus:border-blue-500 focus:outline-none dark:border-white/10 dark:bg-black/40 dark:text-slate-300 dark:focus:border-cyan-500/50"
89
122
  }) : null]
90
123
  })
91
124
  }, e.id)) }, e.id))
92
125
  }), /* @__PURE__ */ i("tbody", {
93
126
  className: "divide-y divide-slate-200 dark:divide-white/5",
94
- children: B.getRowModel().rows?.length ? B.getRowModel().rows.map((e) => /* @__PURE__ */ i("tr", {
95
- className: "hover:bg-slate-50 dark:hover:bg-white/5 transition-colors group",
127
+ children: W.getRowModel().rows.length > 0 ? W.getRowModel().rows.map((e) => /* @__PURE__ */ i("tr", {
128
+ className: "group transition-colors hover:bg-slate-50 dark:hover:bg-white/5",
96
129
  children: e.getVisibleCells().map((e) => /* @__PURE__ */ i("td", {
97
- className: "px-6 py-4 text-slate-700 dark:text-slate-300 whitespace-nowrap",
130
+ className: "whitespace-nowrap px-6 py-4 text-slate-700 dark:text-slate-300",
98
131
  children: g(e.column.columnDef.cell, e.getContext())
99
132
  }, e.id))
100
133
  }, e.id)) : /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", {
101
- colSpan: S.length,
134
+ colSpan: Math.max(w.length, 1),
102
135
  className: "px-6 py-12 text-center text-slate-500",
103
136
  children: "No results found matching your filters."
104
137
  }) })
105
138
  })]
106
139
  })
107
- }), T === "infinite" && /* @__PURE__ */ i("div", {
108
- ref: z,
109
- className: "flex items-center justify-center p-4 text-slate-500 border-t border-slate-200 dark:border-white/10",
110
- children: D ? /* @__PURE__ */ a("span", {
140
+ }), D === "infinite" && /* @__PURE__ */ i("div", {
141
+ ref: U,
142
+ className: "flex items-center justify-center border-t border-slate-200 p-4 text-slate-500 dark:border-white/10",
143
+ children: k ? /* @__PURE__ */ a("span", {
111
144
  className: "flex items-center gap-2 text-sm",
112
145
  children: [/* @__PURE__ */ i(p, {
113
146
  className: "animate-spin",
114
147
  size: 14
115
- }), " Loading more..."]
116
- }) : O ? /* @__PURE__ */ i("span", {
148
+ }), "Loading more..."]
149
+ }) : A ? /* @__PURE__ */ i("span", {
117
150
  className: "text-sm",
118
151
  children: "Scroll for more"
119
152
  }) : /* @__PURE__ */ i("span", {
@@ -122,48 +155,58 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
122
155
  })
123
156
  })]
124
157
  }),
125
- T === "pagination" && /* @__PURE__ */ a("div", {
158
+ D === "pagination" && /* @__PURE__ */ a("div", {
126
159
  className: "flex items-center justify-between px-4 py-2 text-sm text-slate-500 dark:text-slate-400",
127
160
  children: [/* @__PURE__ */ a("div", {
128
161
  className: "flex-1",
129
162
  children: [
130
- "Page ",
163
+ "Page",
164
+ " ",
131
165
  /* @__PURE__ */ i("span", {
132
166
  className: "font-semibold text-slate-700 dark:text-slate-200",
133
- children: B.getState().pagination.pageIndex + 1
167
+ children: W.getState().pagination.pageIndex + 1
134
168
  }),
135
- " of",
169
+ " ",
170
+ "of",
136
171
  " ",
137
172
  /* @__PURE__ */ i("span", {
138
173
  className: "font-semibold text-slate-700 dark:text-slate-200",
139
- children: B.getPageCount() || 1
174
+ children: W.getPageCount() || 1
140
175
  })
141
176
  ]
142
177
  }), /* @__PURE__ */ a("div", {
143
178
  className: "flex items-center gap-1.5",
144
179
  children: [
145
180
  /* @__PURE__ */ i("button", {
146
- onClick: () => B.setPageIndex(0),
147
- disabled: !B.getCanPreviousPage(),
148
- className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
181
+ type: "button",
182
+ "aria-label": "First page",
183
+ onClick: () => W.setPageIndex(0),
184
+ disabled: !W.getCanPreviousPage(),
185
+ className: "rounded-lg p-1.5 text-slate-600 transition-colors hover:bg-slate-100 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/5",
149
186
  children: /* @__PURE__ */ i(u, { size: 16 })
150
187
  }),
151
188
  /* @__PURE__ */ i("button", {
152
- onClick: () => B.previousPage(),
153
- disabled: !B.getCanPreviousPage(),
154
- className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
189
+ type: "button",
190
+ "aria-label": "Previous page",
191
+ onClick: () => W.previousPage(),
192
+ disabled: !W.getCanPreviousPage(),
193
+ className: "rounded-lg p-1.5 text-slate-600 transition-colors hover:bg-slate-100 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/5",
155
194
  children: /* @__PURE__ */ i(s, { size: 16 })
156
195
  }),
157
196
  /* @__PURE__ */ i("button", {
158
- onClick: () => B.nextPage(),
159
- disabled: !B.getCanNextPage(),
160
- className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
197
+ type: "button",
198
+ "aria-label": "Next page",
199
+ onClick: () => W.nextPage(),
200
+ disabled: !W.getCanNextPage(),
201
+ className: "rounded-lg p-1.5 text-slate-600 transition-colors hover:bg-slate-100 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/5",
161
202
  children: /* @__PURE__ */ i(c, { size: 16 })
162
203
  }),
163
204
  /* @__PURE__ */ i("button", {
164
- onClick: () => B.setPageIndex(B.getPageCount() - 1),
165
- disabled: !B.getCanNextPage(),
166
- className: "p-1.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-30 transition-colors",
205
+ type: "button",
206
+ "aria-label": "Last page",
207
+ onClick: () => W.setPageIndex(Math.max(W.getPageCount() - 1, 0)),
208
+ disabled: !W.getCanNextPage(),
209
+ className: "rounded-lg p-1.5 text-slate-600 transition-colors hover:bg-slate-100 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/5",
167
210
  children: /* @__PURE__ */ i(d, { size: 16 })
168
211
  })
169
212
  ]
@@ -173,4 +216,4 @@ function S({ columns: S = [], data: C = [], pageSize: w = 10, mode: T = "paginat
173
216
  });
174
217
  }
175
218
  //#endregion
176
- export { S as default };
219
+ export { w as default };
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "dependencies": {
3
+ "@monaco-editor/react": "4.7.0",
3
4
  "@react-three/fiber": "9.6.1",
4
- "@tanstack/react-table": "8",
5
+ "@tanstack/react-table": "8.21.3",
5
6
  "gsap": "3.12.5",
6
7
  "lucide-react": "^1.8.0",
7
8
  "motion": "12.0.0",
@@ -42,5 +43,5 @@
42
43
  },
43
44
  "types": "./index.d.ts",
44
45
  "unpkg": "./index.umd.js",
45
- "version": "1.0.19"
46
+ "version": "1.0.22"
46
47
  }