munza-x-data-grid 3.0.0-beta.5 → 3.0.0-beta.7
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.
- package/README.md +272 -61
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/index.d.ts +7 -0
- package/dist/main.d.ts +1 -0
- package/dist/munza-x-data-grid.cjs.js +5 -0
- package/dist/munza-x-data-grid.es.js +29 -0
- package/dist/style.css +3 -0
- package/package.json +51 -89
- package/dist/README.md +0 -77
- package/dist/components/ui/badge.d.ts +0 -9
- package/dist/components/ui/button.d.ts +0 -10
- package/dist/components/ui/checkbox.d.ts +0 -4
- package/dist/components/ui/input.d.ts +0 -3
- package/dist/components/ui/label.d.ts +0 -4
- package/dist/components/ui/popover.d.ts +0 -10
- package/dist/components/ui/skeleton.d.ts +0 -2
- package/dist/components/ui/spinner.d.ts +0 -2
- package/dist/components/ui/table.d.ts +0 -10
- package/dist/data/dummyVehicles.d.ts +0 -13
- package/dist/data-grid.cjs +0 -5
- package/dist/data-grid.js +0 -185
- package/dist/hooks/use-mobile.d.ts +0 -1
- package/dist/lib/utils.d.ts +0 -2
- package/dist/package/contexts/GridContext.d.ts +0 -16
- package/dist/package/grid/index.d.ts +0 -3
- package/dist/package/index.d.ts +0 -3
- package/dist/package/lib/queryBuilder.d.ts +0 -76
- package/dist/package/table/TMain.d.ts +0 -2
- package/dist/package/types/index.d.ts +0 -8
package/README.md
CHANGED
|
@@ -1,77 +1,288 @@
|
|
|
1
|
-
#
|
|
1
|
+
# munza-x-data-grid
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A flexible, feature-rich React data grid component built on top of [@tanstack/react-table](https://tanstack.com/table), with Tailwind CSS v4 styling and shadcn/ui primitives.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
7
|
+
## Installation
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install munza-x-data-grid
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
Import the stylesheet in your app entry point:
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
```js
|
|
16
|
+
import 'munza-x-data-grid/style.css';
|
|
17
|
+
```
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
### Peer Dependencies
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npm install react react-dom
|
|
23
|
+
```
|
|
19
24
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// Other configs...
|
|
36
|
-
],
|
|
37
|
-
languageOptions: {
|
|
38
|
-
parserOptions: {
|
|
39
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
40
|
-
tsconfigRootDir: import.meta.dirname,
|
|
41
|
-
},
|
|
42
|
-
// other options...
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
])
|
|
25
|
+
Requires **React 18 or 19**.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Basic Usage
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Grid, useGridState, type ColumnDef } from 'munza-x-data-grid';
|
|
33
|
+
import 'munza-x-data-grid/style.css';
|
|
34
|
+
|
|
35
|
+
type Person = {
|
|
36
|
+
firstName: string;
|
|
37
|
+
lastName: string;
|
|
38
|
+
age: number;
|
|
39
|
+
};
|
|
46
40
|
|
|
41
|
+
const columns: ColumnDef<Person>[] = [
|
|
42
|
+
{ accessorKey: 'firstName', header: 'First Name' },
|
|
43
|
+
{ accessorKey: 'lastName', header: 'Last Name' },
|
|
44
|
+
{ accessorKey: 'age', header: 'Age' },
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
const data: Person[] = [{ firstName: 'Alice', lastName: 'Smith', age: 30 }];
|
|
48
|
+
|
|
49
|
+
export default function App() {
|
|
50
|
+
const { state, handlers } = useGridState();
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<Grid
|
|
54
|
+
columns={columns}
|
|
55
|
+
payload={{ data, total: data.length }}
|
|
56
|
+
state={state}
|
|
57
|
+
{...handlers}
|
|
58
|
+
/>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
47
61
|
```
|
|
48
62
|
|
|
49
|
-
|
|
63
|
+
---
|
|
50
64
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
## API Reference
|
|
66
|
+
|
|
67
|
+
### `<Grid />`
|
|
68
|
+
|
|
69
|
+
The top-level component that renders the full data grid.
|
|
70
|
+
|
|
71
|
+
| Prop | Type | Required | Description |
|
|
72
|
+
| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
|
|
73
|
+
| `columns` | `ColumnDef<T>[]` | ✅ | Column definitions (TanStack Table format) |
|
|
74
|
+
| `payload` | `{ data: T[], total: number }` | ✅ | Row data and total count for pagination |
|
|
75
|
+
| `state` | `Partial<TableState>` | ✅ | Controlled table state (from `useGridState`) |
|
|
76
|
+
| `onColumnFiltersChange` | `OnChangeFn<ColumnFiltersState>` | — | Callback for column filter changes |
|
|
77
|
+
| `onPaginationChange` | `OnChangeFn<PaginationState>` | — | Callback for pagination changes |
|
|
78
|
+
| `onSortingChange` | `OnChangeFn<SortingState>` | — | Callback for sort changes |
|
|
79
|
+
| `setGlobalFilter` | `Dispatch<SetStateAction<string>>` | — | Callback to update the global search filter |
|
|
80
|
+
| `isLoading` | `boolean` | — | Displays a loading state |
|
|
81
|
+
| `isError` | `boolean` | — | Displays an error state |
|
|
82
|
+
| `manualPagination` | `boolean` | — | Set `true` for server-side pagination (default: `false`) |
|
|
83
|
+
| `getRowCanExpand` | `(row: Row<T>) => boolean` | — | Controls which rows are expandable |
|
|
84
|
+
| `renderSubComponent` | `(props: { row: Row<T> }) => ReactElement` | — | Renders expanded row content |
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
### `useGridState()`
|
|
89
|
+
|
|
90
|
+
Hook that provides controlled state and event handlers to pass into `<Grid />`.
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
const { state, handlers } = useGridState();
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**Returns:**
|
|
97
|
+
|
|
98
|
+
| Key | Description |
|
|
99
|
+
| ---------- | ----------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| `state` | Partial `TableState` object (sorting, pagination, filters, etc.) |
|
|
101
|
+
| `handlers` | Object containing `onSortingChange`, `onPaginationChange`, `onColumnFiltersChange`, `setGlobalFilter` |
|
|
102
|
+
|
|
103
|
+
Spread `handlers` directly onto `<Grid />`:
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<Grid state={state} {...handlers} columns={columns} payload={payload} />
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Tailwind v4 Setup
|
|
110
|
+
|
|
111
|
+
If you're using Tailwind v4, add this to your `app.css` so Tailwind scans the grid's classes:
|
|
112
|
+
|
|
113
|
+
```css
|
|
114
|
+
@source "../node_modules/munza-x-data-grid/**/*.{js,ts,jsx,tsx}";
|
|
115
|
+
@theme inline {
|
|
116
|
+
--color-background: var(--background);
|
|
117
|
+
--color-foreground: var(--foreground);
|
|
118
|
+
--color-border: var(--border);
|
|
119
|
+
--color-muted: var(--muted);
|
|
120
|
+
--color-accent: var(--accent);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:root {
|
|
124
|
+
--background: oklch(1 0 0);
|
|
125
|
+
--foreground: oklch(0.145 0 0);
|
|
126
|
+
--border: oklch(0.922 0 0);
|
|
127
|
+
--muted: oklch(0.97 0 0);
|
|
128
|
+
--accent: oklch(0.97 0 0);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.dark {
|
|
132
|
+
--background: oklch(0.145 0 0);
|
|
133
|
+
--foreground: oklch(0.985 0 0);
|
|
134
|
+
--border: oklch(1 0 0 / 10%);
|
|
135
|
+
--muted: oklch(0.269 0 0);
|
|
136
|
+
--accent: oklch(0.269 0 0);
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Column Definitions
|
|
143
|
+
|
|
144
|
+
Columns follow the standard [TanStack Table `ColumnDef`](https://tanstack.com/table/latest/docs/api/core/column-def) format with an additional `meta` field for filter configuration.
|
|
145
|
+
|
|
146
|
+
### Filter Variants
|
|
147
|
+
|
|
148
|
+
Set `meta.filterVariant` on a column to control its filter UI:
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
{
|
|
152
|
+
accessorKey: 'status',
|
|
153
|
+
header: 'Status',
|
|
154
|
+
meta: {
|
|
155
|
+
filterVariant: 'select', // dropdown filter
|
|
74
156
|
},
|
|
75
|
-
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
{
|
|
160
|
+
accessorKey: 'age',
|
|
161
|
+
header: 'Age',
|
|
162
|
+
meta: {
|
|
163
|
+
filterVariant: 'text', // text input filter
|
|
164
|
+
},
|
|
165
|
+
}
|
|
166
|
+
```
|
|
76
167
|
|
|
168
|
+
### Row Number Column
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
{
|
|
172
|
+
accessorFn: (_row, index) => index + 1,
|
|
173
|
+
cell: ({ row }) => row.index + 1,
|
|
174
|
+
id: 'rowNumber',
|
|
175
|
+
header: '',
|
|
176
|
+
size: 54,
|
|
177
|
+
maxSize: 54,
|
|
178
|
+
enableColumnFilter: false,
|
|
179
|
+
}
|
|
77
180
|
```
|
|
181
|
+
|
|
182
|
+
### Checkbox Selection Column
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
{
|
|
186
|
+
id: 'select',
|
|
187
|
+
header: ({ table }) => (
|
|
188
|
+
<Checkbox
|
|
189
|
+
checked={
|
|
190
|
+
table.getIsAllPageRowsSelected() ||
|
|
191
|
+
(table.getIsSomePageRowsSelected() && 'indeterminate')
|
|
192
|
+
}
|
|
193
|
+
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
194
|
+
aria-label="Select all"
|
|
195
|
+
/>
|
|
196
|
+
),
|
|
197
|
+
cell: ({ row }) => (
|
|
198
|
+
<Checkbox
|
|
199
|
+
checked={row.getIsSelected()}
|
|
200
|
+
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
|
201
|
+
aria-label="Select row"
|
|
202
|
+
/>
|
|
203
|
+
),
|
|
204
|
+
size: 40,
|
|
205
|
+
maxSize: 40,
|
|
206
|
+
enableColumnFilter: false,
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## Server-Side Pagination
|
|
213
|
+
|
|
214
|
+
Set `manualPagination` to `true` and pass `payload.total` as the full server-side count.
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
<Grid
|
|
218
|
+
columns={columns}
|
|
219
|
+
payload={{ data: serverData, total: serverTotal }}
|
|
220
|
+
state={state}
|
|
221
|
+
{...handlers}
|
|
222
|
+
manualPagination={true}
|
|
223
|
+
/>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
The built-in pagination UI supports the following page sizes:
|
|
227
|
+
|
|
228
|
+
```
|
|
229
|
+
20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
## Expandable Rows
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
<Grid
|
|
238
|
+
columns={columns}
|
|
239
|
+
payload={payload}
|
|
240
|
+
state={state}
|
|
241
|
+
{...handlers}
|
|
242
|
+
getRowCanExpand={(row) => !!row.original.subRows?.length}
|
|
243
|
+
renderSubComponent={({ row }) => (
|
|
244
|
+
<div className="p-4">
|
|
245
|
+
<pre>{JSON.stringify(row.original, null, 2)}</pre>
|
|
246
|
+
</div>
|
|
247
|
+
)}
|
|
248
|
+
/>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
## Column Pinning
|
|
254
|
+
|
|
255
|
+
Column pinning is managed internally by the grid. No additional configuration is required — use the built-in toolbar UI to pin columns left or right.
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
## Default Column Sizing
|
|
260
|
+
|
|
261
|
+
| Property | Default |
|
|
262
|
+
| --------- | ------- |
|
|
263
|
+
| `size` | `180px` |
|
|
264
|
+
| `minSize` | `180px` |
|
|
265
|
+
| `maxSize` | `180px` |
|
|
266
|
+
|
|
267
|
+
Override per-column:
|
|
268
|
+
|
|
269
|
+
```tsx
|
|
270
|
+
{
|
|
271
|
+
accessorKey: 'id',
|
|
272
|
+
size: 60,
|
|
273
|
+
minSize: 60,
|
|
274
|
+
maxSize: 60,
|
|
275
|
+
}
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
## TypeScript
|
|
281
|
+
|
|
282
|
+
All props and hooks are fully typed. Import types directly from the package:
|
|
283
|
+
|
|
284
|
+
```ts
|
|
285
|
+
import type { ColumnDef } from 'munza-x-data-grid';
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
TanStack Table types (`Row`, `TableState`, `PaginationState`, etc.) are re-exported and available from `@tanstack/react-table`.
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|
package/dist/icons.svg
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
3
|
+
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
4
|
+
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
5
|
+
</symbol>
|
|
6
|
+
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
7
|
+
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
10
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
11
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
12
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
13
|
+
</symbol>
|
|
14
|
+
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
15
|
+
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
18
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
19
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
20
|
+
</symbol>
|
|
21
|
+
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
22
|
+
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
23
|
+
</symbol>
|
|
24
|
+
</svg>
|
package/dist/index.d.ts
ADDED
package/dist/main.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react/jsx-runtime");var n=e((e=>{var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){return t.H.useMemoCache(e)}})),r=e((e=>{process.env.NODE_ENV!==`production`&&(function(){var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){var n=t.H;return n===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
|
2
|
+
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
|
3
|
+
2. You might be breaking the Rules of Hooks
|
|
4
|
+
3. You might have more than one copy of React in the same app
|
|
5
|
+
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),n.useMemoCache(e)}})()})),i=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=n():t.exports=r()}))(),a=e=>{let n=(0,i.c)(3),{className:r,children:a}=e,o;return n[0]!==a||n[1]!==r?(o=(0,t.jsx)(`button`,{className:r,children:a}),n[0]=a,n[1]=r,n[2]=o):o=n[2],o};module.exports=a;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
3
|
+
var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
|
|
4
|
+
if (typeof require < "u") return require.apply(this, arguments);
|
|
5
|
+
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
6
|
+
}), r = /* @__PURE__ */ t(((e) => {
|
|
7
|
+
var t = n("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
|
|
8
|
+
e.c = function(e) {
|
|
9
|
+
return t.H.useMemoCache(e);
|
|
10
|
+
};
|
|
11
|
+
})), i = /* @__PURE__ */ t(((e) => {
|
|
12
|
+
process.env.NODE_ENV !== "production" && (function() {
|
|
13
|
+
var t = n("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
|
|
14
|
+
e.c = function(e) {
|
|
15
|
+
var n = t.H;
|
|
16
|
+
return n === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), n.useMemoCache(e);
|
|
17
|
+
};
|
|
18
|
+
})();
|
|
19
|
+
})), a = (/* @__PURE__ */ t(((e, t) => {
|
|
20
|
+
process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
|
|
21
|
+
})))(), o = (t) => {
|
|
22
|
+
let n = (0, a.c)(3), { className: r, children: i } = t, o;
|
|
23
|
+
return n[0] !== i || n[1] !== r ? (o = /* @__PURE__ */ e("button", {
|
|
24
|
+
className: r,
|
|
25
|
+
children: i
|
|
26
|
+
}), n[0] = i, n[1] = r, n[2] = o) : o = n[2], o;
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
export { o as default };
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-900:oklch(39.6% .141 25.723);--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.grid{display:grid}.inline{display:inline}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.bg-red-900{background-color:var(--color-red-900)}.p-4{padding:calc(var(--spacing) * 4)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
|
3
|
+
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,89 +1,51 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "munza-x-data-grid",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "3.0.0-beta.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
],
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"react": "^
|
|
39
|
-
"react
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"lucide-react": "^1.23.0",
|
|
53
|
-
"next-themes": "^0.4.6",
|
|
54
|
-
"radix-ui": "^1.6.2",
|
|
55
|
-
"react-day-picker": "^10.0.1",
|
|
56
|
-
"react-resizable-panels": "^4.12.1",
|
|
57
|
-
"recharts": "3.8.0",
|
|
58
|
-
"shadcn": "^4.13.0",
|
|
59
|
-
"sonner": "^2.0.7",
|
|
60
|
-
"tailwind-merge": "^3.6.0",
|
|
61
|
-
"tw-animate-css": "^1.4.0",
|
|
62
|
-
"vaul": "^1.1.2",
|
|
63
|
-
"zustand": "^5.0.14"
|
|
64
|
-
},
|
|
65
|
-
"devDependencies": {
|
|
66
|
-
"@babel/core": "^7.29.7",
|
|
67
|
-
"@eslint/js": "^10.0.1",
|
|
68
|
-
"@rolldown/plugin-babel": "^0.2.3",
|
|
69
|
-
"@tailwindcss/vite": "^4.3.2",
|
|
70
|
-
"@types/babel__core": "^7.20.5",
|
|
71
|
-
"@types/node": "^24.13.2",
|
|
72
|
-
"@types/react": "^19.2.17",
|
|
73
|
-
"@types/react-dom": "^19.2.3",
|
|
74
|
-
"@vitejs/plugin-react": "^6.0.3",
|
|
75
|
-
"babel-plugin-react-compiler": "^1.0.0",
|
|
76
|
-
"eslint": "^10.6.0",
|
|
77
|
-
"eslint-plugin-react-hooks": "^7.1.1",
|
|
78
|
-
"eslint-plugin-react-refresh": "^0.5.3",
|
|
79
|
-
"globals": "^17.7.0",
|
|
80
|
-
"react": "^19.2.7",
|
|
81
|
-
"react-dom": "^19.2.7",
|
|
82
|
-
"rollup-plugin-copy": "^3.5.0",
|
|
83
|
-
"tailwindcss": "^4.3.2",
|
|
84
|
-
"typescript": "~6.0.2",
|
|
85
|
-
"typescript-eslint": "^8.62.0",
|
|
86
|
-
"vite": "^8.1.1",
|
|
87
|
-
"vite-plugin-dts": "^5.0.3"
|
|
88
|
-
}
|
|
89
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "munza-x-data-grid",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "3.0.0-beta.7",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"main": "./dist/munza-x-data-grid.cjs.js",
|
|
10
|
+
"module": "./dist/munza-x-data-grid.es.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/munza-x-data-grid.es.js",
|
|
16
|
+
"require": "./dist/munza-x-data-grid.cjs.js"
|
|
17
|
+
},
|
|
18
|
+
"./style.css": "./dist/style.css"
|
|
19
|
+
},
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev": "vite",
|
|
22
|
+
"build": "tsc -b && vite build",
|
|
23
|
+
"lint": "eslint .",
|
|
24
|
+
"preview": "vite preview"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": "^18 || ^19",
|
|
28
|
+
"react-dom": "^18 || ^19"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@babel/core": "^7.29.7",
|
|
32
|
+
"@eslint/js": "^10.0.1",
|
|
33
|
+
"@rolldown/plugin-babel": "^0.2.3",
|
|
34
|
+
"@tailwindcss/vite": "^4.3.2",
|
|
35
|
+
"@types/babel__core": "^7.20.5",
|
|
36
|
+
"@types/node": "^24.13.2",
|
|
37
|
+
"@types/react": "^19.2.17",
|
|
38
|
+
"@types/react-dom": "^19.2.3",
|
|
39
|
+
"@vitejs/plugin-react": "^6.0.3",
|
|
40
|
+
"babel-plugin-react-compiler": "^1.0.0",
|
|
41
|
+
"eslint": "^10.6.0",
|
|
42
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
43
|
+
"eslint-plugin-react-refresh": "^0.5.3",
|
|
44
|
+
"globals": "^17.7.0",
|
|
45
|
+
"tailwindcss": "^4.3.2",
|
|
46
|
+
"typescript": "~6.0.2",
|
|
47
|
+
"typescript-eslint": "^8.62.0",
|
|
48
|
+
"vite": "^8.1.1",
|
|
49
|
+
"vite-plugin-dts": "^5.0.3"
|
|
50
|
+
}
|
|
51
|
+
}
|
package/dist/README.md
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
# React + TypeScript + Vite
|
|
2
|
-
|
|
3
|
-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
-
|
|
5
|
-
Currently, two official plugins are available:
|
|
6
|
-
|
|
7
|
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
9
|
-
|
|
10
|
-
## React Compiler
|
|
11
|
-
|
|
12
|
-
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
|
13
|
-
|
|
14
|
-
Note: This will impact Vite dev & build performances.
|
|
15
|
-
|
|
16
|
-
## Expanding the ESLint configuration
|
|
17
|
-
|
|
18
|
-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
19
|
-
|
|
20
|
-
```js
|
|
21
|
-
export default defineConfig([
|
|
22
|
-
globalIgnores(['dist']),
|
|
23
|
-
{
|
|
24
|
-
files: ['**/*.{ts,tsx}'],
|
|
25
|
-
extends: [
|
|
26
|
-
// Other configs...
|
|
27
|
-
|
|
28
|
-
// Remove tseslint.configs.recommended and replace with this
|
|
29
|
-
tseslint.configs.recommendedTypeChecked,
|
|
30
|
-
// Alternatively, use this for stricter rules
|
|
31
|
-
tseslint.configs.strictTypeChecked,
|
|
32
|
-
// Optionally, add this for stylistic rules
|
|
33
|
-
tseslint.configs.stylisticTypeChecked,
|
|
34
|
-
|
|
35
|
-
// Other configs...
|
|
36
|
-
],
|
|
37
|
-
languageOptions: {
|
|
38
|
-
parserOptions: {
|
|
39
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
40
|
-
tsconfigRootDir: import.meta.dirname,
|
|
41
|
-
},
|
|
42
|
-
// other options...
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
])
|
|
46
|
-
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
50
|
-
|
|
51
|
-
```js
|
|
52
|
-
// eslint.config.js
|
|
53
|
-
import reactX from 'eslint-plugin-react-x'
|
|
54
|
-
import reactDom from 'eslint-plugin-react-dom'
|
|
55
|
-
|
|
56
|
-
export default defineConfig([
|
|
57
|
-
globalIgnores(['dist']),
|
|
58
|
-
{
|
|
59
|
-
files: ['**/*.{ts,tsx}'],
|
|
60
|
-
extends: [
|
|
61
|
-
// Other configs...
|
|
62
|
-
// Enable lint rules for React
|
|
63
|
-
reactX.configs['recommended-typescript'],
|
|
64
|
-
// Enable lint rules for React DOM
|
|
65
|
-
reactDom.configs.recommended,
|
|
66
|
-
],
|
|
67
|
-
languageOptions: {
|
|
68
|
-
parserOptions: {
|
|
69
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
70
|
-
tsconfigRootDir: import.meta.dirname,
|
|
71
|
-
},
|
|
72
|
-
// other options...
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
])
|
|
76
|
-
|
|
77
|
-
```
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
5
|
-
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
-
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
7
|
-
asChild?: boolean;
|
|
8
|
-
}): React.JSX.Element;
|
|
9
|
-
export { Badge, badgeVariants };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
5
|
-
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
|
-
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
-
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
8
|
-
asChild?: boolean;
|
|
9
|
-
}): React.JSX.Element;
|
|
10
|
-
export { Button, buttonVariants };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Popover as PopoverPrimitive } from 'radix-ui';
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
|
|
4
|
-
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
|
|
5
|
-
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
|
|
6
|
-
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
|
|
7
|
-
declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
|
-
declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
9
|
-
declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
10
|
-
export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
|
|
3
|
-
declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
|
|
4
|
-
declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
|
|
5
|
-
declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
|
|
6
|
-
declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
|
|
7
|
-
declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
|
|
8
|
-
declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
|
|
9
|
-
declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
|
|
10
|
-
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export interface Vehicle {
|
|
2
|
-
driver: string;
|
|
3
|
-
vehicle: string;
|
|
4
|
-
vin: string;
|
|
5
|
-
type: 'Car' | 'Truck' | 'Van' | 'Trailer';
|
|
6
|
-
status: 'Active' | 'In Shop' | 'Out of Service' | 'Maintenance';
|
|
7
|
-
currentMeter: string;
|
|
8
|
-
fuel: string;
|
|
9
|
-
drivingTime: string;
|
|
10
|
-
license: string;
|
|
11
|
-
odometer: number;
|
|
12
|
-
}
|
|
13
|
-
export declare const dummyVehicles: Vehicle[];
|
package/dist/data-grid.cjs
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require("react");l=c(l,1);let u=require("@tanstack/react-table"),d=require("react/jsx-runtime"),f=require("clsx"),p=require("tailwind-merge");var m=o((e=>{var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){return t.H.useMemoCache(e)}})),h=o((e=>{process.env.NODE_ENV!==`production`&&(function(){var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){var n=t.H;return n===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
|
2
|
-
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
|
3
|
-
2. You might be breaking the Rules of Hooks
|
|
4
|
-
3. You might have more than one copy of React in the same app
|
|
5
|
-
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),n.useMemoCache(e)}})()})),g=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=m():t.exports=h()}))(),_=(0,l.createContext)(void 0),v=({children:e,payload:t,columns:n})=>{let r=(0,u.useReactTable)({data:t?.data??[],columns:n,getCoreRowModel:(0,u.getCoreRowModel)()});return(0,d.jsx)(_.Provider,{value:{table:r},children:e})};function y(){let e=(0,l.useContext)(_);if(!e)throw Error(`useGrid must be used within a GridContextProvider`);return e}function b(...e){return(0,p.twMerge)((0,f.clsx)(e))}function x(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`w-full caption-bottom text-sm`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`div`,{"data-slot":`table-container`,className:`relative w-full overflow-x-auto`,children:(0,d.jsx)(`table`,{"data-slot":`table`,className:i,...r})}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function S(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`[&_tr]:border-b`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`thead`,{"data-slot":`table-header`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function C(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`[&_tr:last-child]:border-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`tbody`,{"data-slot":`table-body`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function w(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`tr`,{"data-slot":`table-row`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function T(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`th`,{"data-slot":`table-head`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function E(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`td`,{"data-slot":`table-cell`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}var D=()=>{let e=(0,g.c)(11),{table:t}=y(),n;e[0]===t?n=e[1]:(n=t.getHeaderGroups().map(k),e[0]=t,e[1]=n);let r;e[2]===n?r=e[3]:(r=(0,d.jsx)(S,{className:`sticky top-0 z-10 bg-muted`,children:n}),e[2]=n,e[3]=r);let i;e[4]===t?i=e[5]:(i=t.getRowModel().rows.map(j),e[4]=t,e[5]=i);let a;e[6]===i?a=e[7]:(a=(0,d.jsx)(C,{children:i}),e[6]=i,e[7]=a);let o;return e[8]!==r||e[9]!==a?(o=(0,d.jsxs)(x,{children:[r,a]}),e[8]=r,e[9]=a,e[10]=o):o=e[10],o};function O(e){return(0,d.jsx)(T,{colSpan:e.colSpan,style:{width:e.getSize(),minWidth:e.getSize(),maxWidth:e.getSize()},children:e.isPlaceholder?null:(0,u.flexRender)(e.column.columnDef.header,e.getContext())},e.id)}function k(e){return(0,d.jsx)(w,{children:e.headers.map(O)},e.id)}function A(e){return(0,d.jsx)(E,{style:{width:e.column.getSize(),minWidth:e.column.getSize(),maxWidth:e.column.getSize()},children:(0,u.flexRender)(e.column.columnDef.cell,e.getContext())},e.id)}function j(e){return(0,d.jsx)(w,{"data-state":e.getIsSelected(),children:e.getVisibleCells().map(A)},e.id)}var M=e=>{let t=(0,g.c)(4),{columns:n,payload:r}=e,i;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(i=(0,d.jsx)(D,{}),t[0]=i):i=t[0];let a;return t[1]!==n||t[2]!==r?(a=(0,d.jsx)(v,{payload:r,columns:n,children:i}),t[1]=n,t[2]=r,t[3]=a):a=t[3],a};exports.Grid=M;
|
package/dist/data-grid.js
DELETED
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { createContext as e, useContext as t } from "react";
|
|
3
|
-
import { flexRender as n, getCoreRowModel as r, useReactTable as i } from "@tanstack/react-table";
|
|
4
|
-
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
|
-
import { clsx as s } from "clsx";
|
|
6
|
-
import { twMerge as c } from "tailwind-merge";
|
|
7
|
-
//#region \0rolldown/runtime.js
|
|
8
|
-
var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
|
|
9
|
-
if (typeof require < "u") return require.apply(this, arguments);
|
|
10
|
-
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
11
|
-
}), d = /* @__PURE__ */ l(((e) => {
|
|
12
|
-
var t = u("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
|
|
13
|
-
e.c = function(e) {
|
|
14
|
-
return t.H.useMemoCache(e);
|
|
15
|
-
};
|
|
16
|
-
})), f = /* @__PURE__ */ l(((e) => {
|
|
17
|
-
process.env.NODE_ENV !== "production" && (function() {
|
|
18
|
-
var t = u("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
|
|
19
|
-
e.c = function(e) {
|
|
20
|
-
var n = t.H;
|
|
21
|
-
return n === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), n.useMemoCache(e);
|
|
22
|
-
};
|
|
23
|
-
})();
|
|
24
|
-
})), p = (/* @__PURE__ */ l(((e, t) => {
|
|
25
|
-
process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
|
|
26
|
-
})))(), m = e(void 0), h = ({ children: e, payload: t, columns: n }) => {
|
|
27
|
-
let o = i({
|
|
28
|
-
data: t?.data ?? [],
|
|
29
|
-
columns: n,
|
|
30
|
-
getCoreRowModel: r()
|
|
31
|
-
});
|
|
32
|
-
return /* @__PURE__ */ a(m.Provider, {
|
|
33
|
-
value: { table: o },
|
|
34
|
-
children: e
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
function g() {
|
|
38
|
-
let e = t(m);
|
|
39
|
-
if (!e) throw Error("useGrid must be used within a GridContextProvider");
|
|
40
|
-
return e;
|
|
41
|
-
}
|
|
42
|
-
//#endregion
|
|
43
|
-
//#region src/lib/utils.ts
|
|
44
|
-
function _(...e) {
|
|
45
|
-
return c(s(e));
|
|
46
|
-
}
|
|
47
|
-
//#endregion
|
|
48
|
-
//#region src/components/ui/table.tsx
|
|
49
|
-
function v(e) {
|
|
50
|
-
let t = (0, p.c)(8), n, r;
|
|
51
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
52
|
-
let i;
|
|
53
|
-
t[3] === n ? i = t[4] : (i = _("w-full caption-bottom text-sm", n), t[3] = n, t[4] = i);
|
|
54
|
-
let o;
|
|
55
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("div", {
|
|
56
|
-
"data-slot": "table-container",
|
|
57
|
-
className: "relative w-full overflow-x-auto",
|
|
58
|
-
children: /* @__PURE__ */ a("table", {
|
|
59
|
-
"data-slot": "table",
|
|
60
|
-
className: i,
|
|
61
|
-
...r
|
|
62
|
-
})
|
|
63
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
64
|
-
}
|
|
65
|
-
function y(e) {
|
|
66
|
-
let t = (0, p.c)(8), n, r;
|
|
67
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
68
|
-
let i;
|
|
69
|
-
t[3] === n ? i = t[4] : (i = _("[&_tr]:border-b", n), t[3] = n, t[4] = i);
|
|
70
|
-
let o;
|
|
71
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("thead", {
|
|
72
|
-
"data-slot": "table-header",
|
|
73
|
-
className: i,
|
|
74
|
-
...r
|
|
75
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
76
|
-
}
|
|
77
|
-
function b(e) {
|
|
78
|
-
let t = (0, p.c)(8), n, r;
|
|
79
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
80
|
-
let i;
|
|
81
|
-
t[3] === n ? i = t[4] : (i = _("[&_tr:last-child]:border-0", n), t[3] = n, t[4] = i);
|
|
82
|
-
let o;
|
|
83
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("tbody", {
|
|
84
|
-
"data-slot": "table-body",
|
|
85
|
-
className: i,
|
|
86
|
-
...r
|
|
87
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
88
|
-
}
|
|
89
|
-
function x(e) {
|
|
90
|
-
let t = (0, p.c)(8), n, r;
|
|
91
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
92
|
-
let i;
|
|
93
|
-
t[3] === n ? i = t[4] : (i = _("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", n), t[3] = n, t[4] = i);
|
|
94
|
-
let o;
|
|
95
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("tr", {
|
|
96
|
-
"data-slot": "table-row",
|
|
97
|
-
className: i,
|
|
98
|
-
...r
|
|
99
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
100
|
-
}
|
|
101
|
-
function S(e) {
|
|
102
|
-
let t = (0, p.c)(8), n, r;
|
|
103
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
104
|
-
let i;
|
|
105
|
-
t[3] === n ? i = t[4] : (i = _("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", n), t[3] = n, t[4] = i);
|
|
106
|
-
let o;
|
|
107
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("th", {
|
|
108
|
-
"data-slot": "table-head",
|
|
109
|
-
className: i,
|
|
110
|
-
...r
|
|
111
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
112
|
-
}
|
|
113
|
-
function C(e) {
|
|
114
|
-
let t = (0, p.c)(8), n, r;
|
|
115
|
-
t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
|
|
116
|
-
let i;
|
|
117
|
-
t[3] === n ? i = t[4] : (i = _("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", n), t[3] = n, t[4] = i);
|
|
118
|
-
let o;
|
|
119
|
-
return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("td", {
|
|
120
|
-
"data-slot": "table-cell",
|
|
121
|
-
className: i,
|
|
122
|
-
...r
|
|
123
|
-
}), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
|
|
124
|
-
}
|
|
125
|
-
//#endregion
|
|
126
|
-
//#region src/package/table/TMain.tsx
|
|
127
|
-
var w = () => {
|
|
128
|
-
let e = (0, p.c)(11), { table: t } = g(), n;
|
|
129
|
-
e[0] === t ? n = e[1] : (n = t.getHeaderGroups().map(E), e[0] = t, e[1] = n);
|
|
130
|
-
let r;
|
|
131
|
-
e[2] === n ? r = e[3] : (r = /* @__PURE__ */ a(y, {
|
|
132
|
-
className: "sticky top-0 z-10 bg-muted",
|
|
133
|
-
children: n
|
|
134
|
-
}), e[2] = n, e[3] = r);
|
|
135
|
-
let i;
|
|
136
|
-
e[4] === t ? i = e[5] : (i = t.getRowModel().rows.map(O), e[4] = t, e[5] = i);
|
|
137
|
-
let s;
|
|
138
|
-
e[6] === i ? s = e[7] : (s = /* @__PURE__ */ a(b, { children: i }), e[6] = i, e[7] = s);
|
|
139
|
-
let c;
|
|
140
|
-
return e[8] !== r || e[9] !== s ? (c = /* @__PURE__ */ o(v, { children: [r, s] }), e[8] = r, e[9] = s, e[10] = c) : c = e[10], c;
|
|
141
|
-
};
|
|
142
|
-
function T(e) {
|
|
143
|
-
return /* @__PURE__ */ a(S, {
|
|
144
|
-
colSpan: e.colSpan,
|
|
145
|
-
style: {
|
|
146
|
-
width: e.getSize(),
|
|
147
|
-
minWidth: e.getSize(),
|
|
148
|
-
maxWidth: e.getSize()
|
|
149
|
-
},
|
|
150
|
-
children: e.isPlaceholder ? null : n(e.column.columnDef.header, e.getContext())
|
|
151
|
-
}, e.id);
|
|
152
|
-
}
|
|
153
|
-
function E(e) {
|
|
154
|
-
return /* @__PURE__ */ a(x, { children: e.headers.map(T) }, e.id);
|
|
155
|
-
}
|
|
156
|
-
function D(e) {
|
|
157
|
-
return /* @__PURE__ */ a(C, {
|
|
158
|
-
style: {
|
|
159
|
-
width: e.column.getSize(),
|
|
160
|
-
minWidth: e.column.getSize(),
|
|
161
|
-
maxWidth: e.column.getSize()
|
|
162
|
-
},
|
|
163
|
-
children: n(e.column.columnDef.cell, e.getContext())
|
|
164
|
-
}, e.id);
|
|
165
|
-
}
|
|
166
|
-
function O(e) {
|
|
167
|
-
return /* @__PURE__ */ a(x, {
|
|
168
|
-
"data-state": e.getIsSelected(),
|
|
169
|
-
children: e.getVisibleCells().map(D)
|
|
170
|
-
}, e.id);
|
|
171
|
-
}
|
|
172
|
-
//#endregion
|
|
173
|
-
//#region src/package/grid/index.tsx
|
|
174
|
-
var k = (e) => {
|
|
175
|
-
let t = (0, p.c)(4), { columns: n, payload: r } = e, i;
|
|
176
|
-
t[0] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ a(w, {}), t[0] = i) : i = t[0];
|
|
177
|
-
let o;
|
|
178
|
-
return t[1] !== n || t[2] !== r ? (o = /* @__PURE__ */ a(h, {
|
|
179
|
-
payload: r,
|
|
180
|
-
columns: n,
|
|
181
|
-
children: i
|
|
182
|
-
}), t[1] = n, t[2] = r, t[3] = o) : o = t[3], o;
|
|
183
|
-
};
|
|
184
|
-
//#endregion
|
|
185
|
-
export { k as Grid };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useIsMobile(): boolean;
|
package/dist/lib/utils.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ColumnDef, Table } from '@tanstack/react-table';
|
|
2
|
-
import { default as React } from 'react';
|
|
3
|
-
export interface GridContextProps<T> {
|
|
4
|
-
table: Table<T>;
|
|
5
|
-
}
|
|
6
|
-
interface GridContextProviderProps<T> {
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
payload?: {
|
|
9
|
-
data: T[];
|
|
10
|
-
total: number;
|
|
11
|
-
};
|
|
12
|
-
columns: ColumnDef<T>[];
|
|
13
|
-
}
|
|
14
|
-
export declare const GridContextProvider: <T>({ children, payload, columns, }: GridContextProviderProps<T>) => React.JSX.Element;
|
|
15
|
-
export declare function useGrid(): GridContextProps<unknown>;
|
|
16
|
-
export {};
|
package/dist/package/index.d.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* queryBuilder.ts
|
|
3
|
-
*
|
|
4
|
-
* Converts TanStack Table's client-side state (column filters, global filter,
|
|
5
|
-
* sorting, pagination) into a Mongoose/MongoDB-friendly query descriptor.
|
|
6
|
-
*
|
|
7
|
-
* Usage:
|
|
8
|
-
* const query = buildMongooseQuery({
|
|
9
|
-
* columnFilters,
|
|
10
|
-
* globalFilter,
|
|
11
|
-
* sorting,
|
|
12
|
-
* pagination,
|
|
13
|
-
* searchableFields: ["name", "email"],
|
|
14
|
-
* });
|
|
15
|
-
*
|
|
16
|
-
* // On the server:
|
|
17
|
-
* const docs = await Model.find(query.filter)
|
|
18
|
-
* .sort(query.sort)
|
|
19
|
-
* .skip(query.skip)
|
|
20
|
-
* .limit(query.limit);
|
|
21
|
-
*
|
|
22
|
-
* const total = await Model.countDocuments(query.filter);
|
|
23
|
-
*/
|
|
24
|
-
export interface ColumnFilter {
|
|
25
|
-
id: string;
|
|
26
|
-
value: unknown;
|
|
27
|
-
}
|
|
28
|
-
export type ColumnFiltersState = ColumnFilter[];
|
|
29
|
-
export interface SortingRule {
|
|
30
|
-
id: string;
|
|
31
|
-
desc: boolean;
|
|
32
|
-
}
|
|
33
|
-
export type SortingState = SortingRule[];
|
|
34
|
-
export interface PaginationState {
|
|
35
|
-
pageIndex: number;
|
|
36
|
-
pageSize: number;
|
|
37
|
-
}
|
|
38
|
-
export type FilterVariant = 'text' | 'exact' | 'range' | 'dateRange' | 'select' | 'multiSelect' | 'boolean';
|
|
39
|
-
export interface ColumnFilterConfig {
|
|
40
|
-
/** How this column's filter value should be interpreted. Defaults to "text". */
|
|
41
|
-
variant?: FilterVariant;
|
|
42
|
-
/**
|
|
43
|
-
* Override the field name used in the Mongo query if it differs from the
|
|
44
|
-
* column id (e.g. column id "authorName" -> field "author.name").
|
|
45
|
-
*/
|
|
46
|
-
field?: string;
|
|
47
|
-
/** Case-insensitive regex for "text" variant. Defaults to true. */
|
|
48
|
-
caseInsensitive?: boolean;
|
|
49
|
-
}
|
|
50
|
-
export interface QueryBuilderOptions {
|
|
51
|
-
columnFilters?: ColumnFiltersState;
|
|
52
|
-
globalFilter?: string;
|
|
53
|
-
sorting?: SortingState;
|
|
54
|
-
pagination?: PaginationState;
|
|
55
|
-
/**
|
|
56
|
-
* Per-column-id configuration controlling how each filter value is
|
|
57
|
-
* translated into a Mongo operator. Columns not listed here default to
|
|
58
|
-
* variant: "text".
|
|
59
|
-
*/
|
|
60
|
-
columnConfig?: Record<string, ColumnFilterConfig>;
|
|
61
|
-
/**
|
|
62
|
-
* Fields to search when `globalFilter` is set. Produces an $or of
|
|
63
|
-
* case-insensitive regex matches across these fields.
|
|
64
|
-
*/
|
|
65
|
-
searchableFields?: string[];
|
|
66
|
-
/** Map a sort column id to a different Mongo field name if needed. */
|
|
67
|
-
sortFieldMap?: Record<string, string>;
|
|
68
|
-
}
|
|
69
|
-
export interface MongooseQuery {
|
|
70
|
-
filter: Record<string, any>;
|
|
71
|
-
sort: Record<string, 1 | -1>;
|
|
72
|
-
skip: number;
|
|
73
|
-
limit: number;
|
|
74
|
-
}
|
|
75
|
-
export declare function buildMongooseQuery(options: QueryBuilderOptions): MongooseQuery;
|
|
76
|
-
export default buildMongooseQuery;
|