@dsbtek/component-library 1.0.0 → 1.0.2

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 CHANGED
@@ -1,17 +1,340 @@
1
- # SFT Advanced Components
1
+ # @dsbtek/component-library
2
2
 
3
- This package provides advanced React components built on top of shadcn/ui.
3
+ A collection of advanced React components built with shadcn/ui.
4
+
5
+ ## Table of Contents
6
+
7
+ - [Installation](#installation)
8
+ - [Components](#components)
9
+ - [AdvancedCombobox](#advancedcombobox)
10
+ - [AdvancedDataTable](#advanceddatatable)
11
+ - [Styling](#styling)
12
+ - [Contributing](#contributing)
13
+ - [License](#license)
4
14
 
5
15
  ## Installation
6
16
 
17
+ 1. Install the package and its peer dependencies:
18
+
19
+ ```bash
20
+ # Install the component library
21
+ npm install @dsbtek/component-library
22
+
23
+ # Install peer dependencies
24
+ npm install @radix-ui/react-popover cmdk class-variance-authority clsx lucide-react tailwind-merge
25
+ ```
26
+
27
+ 2. Set up Tailwind CSS in your project:
28
+
7
29
  ```bash
8
- npm install @smartflowtech/component-library
30
+ # Install Tailwind CSS and its dependencies
31
+ npm install -D tailwindcss postcss autoprefixer tailwindcss-animate
32
+ ```
33
+
34
+ 3. Initialize Tailwind CSS if you haven't already:
35
+
36
+ ```bash
37
+ npx tailwindcss init -p
38
+ ```
39
+
40
+ 4. Update your `tailwind.config.js`:
41
+
42
+ ```javascript
43
+ /** @type {import('tailwindcss').Config} */
44
+ module.exports = {
45
+ darkMode: ['class'],
46
+ content: [
47
+ './src/**/*.{js,ts,jsx,tsx}',
48
+ './node_modules/@dsbtek/component-library/**/*.{js,ts,jsx,tsx}',
49
+ ],
50
+ theme: {
51
+ extend: {
52
+ colors: {
53
+ border: 'hsl(var(--border))',
54
+ input: 'hsl(var(--input))',
55
+ ring: 'hsl(var(--ring))',
56
+ background: 'hsl(var(--background))',
57
+ foreground: 'hsl(var(--foreground))',
58
+ primary: {
59
+ DEFAULT: 'hsl(var(--primary))',
60
+ foreground: 'hsl(var(--primary-foreground))',
61
+ },
62
+ secondary: {
63
+ DEFAULT: 'hsl(var(--secondary))',
64
+ foreground: 'hsl(var(--secondary-foreground))',
65
+ },
66
+ destructive: {
67
+ DEFAULT: 'hsl(var(--destructive))',
68
+ foreground: 'hsl(var(--destructive-foreground))',
69
+ },
70
+ muted: {
71
+ DEFAULT: 'hsl(var(--muted))',
72
+ foreground: 'hsl(var(--muted-foreground))',
73
+ },
74
+ accent: {
75
+ DEFAULT: 'hsl(var(--accent))',
76
+ foreground: 'hsl(var(--accent-foreground))',
77
+ },
78
+ popover: {
79
+ DEFAULT: 'hsl(var(--popover))',
80
+ foreground: 'hsl(var(--popover-foreground))',
81
+ },
82
+ card: {
83
+ DEFAULT: 'hsl(var(--card))',
84
+ foreground: 'hsl(var(--card-foreground))',
85
+ },
86
+ },
87
+ borderRadius: {
88
+ lg: `var(--radius)`,
89
+ md: `calc(var(--radius) - 2px)`,
90
+ sm: 'calc(var(--radius) - 4px)',
91
+ },
92
+ },
93
+ },
94
+ plugins: [require('tailwindcss-animate')],
95
+ };
9
96
  ```
10
97
 
11
- ## Usage
98
+ 5. Add the following CSS variables to your global CSS file:
12
99
 
13
- ```jsx
14
- import { AdvancedCombobox } from '@smartflowtech/component-library';
100
+ ```css
101
+ @tailwind base;
102
+ @tailwind components;
103
+ @tailwind utilities;
15
104
 
16
- // ... rest of the documentation
105
+ @layer base {
106
+ :root {
107
+ --background: 0 0% 100%;
108
+ --foreground: 222.2 84% 4.9%;
109
+ --card: 0 0% 100%;
110
+ --card-foreground: 222.2 84% 4.9%;
111
+ --popover: 0 0% 100%;
112
+ --popover-foreground: 222.2 84% 4.9%;
113
+ --primary: 222.2 47.4% 11.2%;
114
+ --primary-foreground: 210 40% 98%;
115
+ --secondary: 210 40% 96.1%;
116
+ --secondary-foreground: 222.2 47.4% 11.2%;
117
+ --muted: 210 40% 96.1%;
118
+ --muted-foreground: 215.4 16.3% 46.9%;
119
+ --accent: 210 40% 96.1%;
120
+ --accent-foreground: 222.2 47.4% 11.2%;
121
+ --destructive: 0 84.2% 60.2%;
122
+ --destructive-foreground: 210 40% 98%;
123
+ --border: 214.3 31.8% 91.4%;
124
+ --input: 214.3 31.8% 91.4%;
125
+ --ring: 222.2 84% 4.9%;
126
+ --radius: 0.5rem;
127
+ }
128
+ }
17
129
  ```
130
+
131
+ ## Components
132
+
133
+ ### AdvancedCombobox
134
+
135
+ A searchable dropdown component with single or multiple selection support.
136
+
137
+ #### Features
138
+
139
+ - Single or multiple item selection
140
+ - Search functionality with fuzzy matching
141
+ - Keyboard navigation support (↑↓ to navigate, Enter to select)
142
+ - Clear selection option
143
+ - Customizable styling
144
+ - Accessible by default (WAI-ARIA compliant)
145
+
146
+ #### Props
147
+
148
+ | Prop | Type | Default | Description |
149
+ | ----------- | ----------------------------------------- | -------- | ------------------------------------------ |
150
+ | items | `Array<{ value: string, label: string }>` | Required | Array of items to display in the dropdown |
151
+ | placeholder | `string` | Required | Placeholder text when no item is selected |
152
+ | onSelect | `(value: string) => void` | Required | Callback function when an item is selected |
153
+ | multiple | `boolean` | `false` | Enable multiple item selection |
154
+ | searchable | `boolean` | `true` | Enable search functionality |
155
+ | className | `string` | - | Additional CSS classes |
156
+
157
+ #### Keyboard Shortcuts
158
+
159
+ - `↑/↓`: Navigate through items
160
+ - `Enter`: Select highlighted item
161
+ - `Esc`: Close dropdown
162
+ - `Backspace`: Clear selection (when input is empty)
163
+ - `Type`: Search items (when searchable is true)
164
+
165
+ #### Example Usage
166
+
167
+ ```tsx
168
+ import { AdvancedCombobox } from '@dsbtek/component-library';
169
+
170
+ // Single Selection with Search
171
+ function SingleSelectExample() {
172
+ return (
173
+ <AdvancedCombobox
174
+ items={[
175
+ { value: '1', label: 'Option 1' },
176
+ { value: '2', label: 'Option 2' },
177
+ { value: '3', label: 'Option 3' },
178
+ ]}
179
+ placeholder="Select an option"
180
+ onSelect={(value) => console.log('Selected:', value)}
181
+ />
182
+ );
183
+ }
184
+
185
+ // Multiple Selection
186
+ function MultipleSelectExample() {
187
+ return (
188
+ <AdvancedCombobox
189
+ items={[
190
+ { value: 'react', label: 'React' },
191
+ { value: 'vue', label: 'Vue' },
192
+ { value: 'angular', label: 'Angular' },
193
+ ]}
194
+ placeholder="Select frameworks"
195
+ onSelect={(value) => console.log('Selected:', value)}
196
+ multiple={true}
197
+ />
198
+ );
199
+ }
200
+ ```
201
+
202
+ ### AdvancedDataTable
203
+
204
+ A feature-rich data table component with sorting, filtering, and pagination.
205
+
206
+ #### Features
207
+
208
+ - Column sorting (click column headers)
209
+ - Text filtering
210
+ - Pagination with customizable page sizes
211
+ - Row selection with checkboxes
212
+ - Responsive design
213
+ - Customizable styling
214
+ - Loading states
215
+ - Empty state handling
216
+
217
+ #### Props
218
+
219
+ | Prop | Type | Default | Description |
220
+ | ------------------- | ---------------------------------------------------- | ------------ | -------------------------------------------------- |
221
+ | columns | `Array<Column<T>>` | Required | Array of column definitions |
222
+ | fetchData | `(params: FetchParams) => Promise<FetchResponse<T>>` | Required | Function to fetch data with pagination and sorting |
223
+ | itemsPerPageOptions | `number[]` | `[10,20,50]` | Available options for items per page |
224
+ | className | `string` | - | Additional CSS classes |
225
+
226
+ #### Column Definition
227
+
228
+ | Property | Type | Default | Description |
229
+ | ---------- | ------------------------------------------- | -------- | ---------------------------------------- |
230
+ | accessor | `keyof T \| ((item: T) => React.ReactNode)` | Required | Key or function to access the cell value |
231
+ | header | `string` | Required | Column header text |
232
+ | sortable | `boolean` | `false` | Enable column sorting |
233
+ | filterable | `boolean` | `false` | Enable column filtering |
234
+ | cell | `(value: any, item: T) => React.ReactNode` | - | Custom cell renderer |
235
+
236
+ #### FetchParams Type
237
+
238
+ ```typescript
239
+ interface FetchParams {
240
+ page: number;
241
+ perPage: number;
242
+ sortBy?: string;
243
+ sortOrder?: 'asc' | 'desc';
244
+ filters?: Record<string, string>;
245
+ }
246
+ ```
247
+
248
+ #### FetchResponse Type
249
+
250
+ ```typescript
251
+ interface FetchResponse<T> {
252
+ data: T[];
253
+ meta: {
254
+ current_page: number;
255
+ last_page: number;
256
+ per_page: number;
257
+ total: number;
258
+ };
259
+ }
260
+ ```
261
+
262
+ #### Example Usage
263
+
264
+ ```tsx
265
+ import { AdvancedDataTable } from '@dsbtek/component-library';
266
+
267
+ function TableExample() {
268
+ const columns = [
269
+ {
270
+ accessor: 'name',
271
+ header: 'Name',
272
+ sortable: true,
273
+ filterable: true,
274
+ },
275
+ {
276
+ accessor: 'email',
277
+ header: 'Email',
278
+ sortable: true,
279
+ },
280
+ {
281
+ accessor: 'status',
282
+ header: 'Status',
283
+ cell: (value) => (
284
+ <span className={`status-${value.toLowerCase()}`}>{value}</span>
285
+ ),
286
+ },
287
+ ];
288
+
289
+ const fetchData = async (params) => {
290
+ const response = await fetch(
291
+ '/api/users?' +
292
+ new URLSearchParams({
293
+ page: params.page.toString(),
294
+ perPage: params.perPage.toString(),
295
+ sortBy: params.sortBy,
296
+ sortOrder: params.sortOrder,
297
+ ...params.filters,
298
+ }),
299
+ );
300
+ return response.json();
301
+ };
302
+
303
+ return (
304
+ <AdvancedDataTable
305
+ columns={columns}
306
+ fetchData={fetchData}
307
+ itemsPerPageOptions={[5, 10, 20, 50]}
308
+ />
309
+ );
310
+ }
311
+ ```
312
+
313
+ ## Styling
314
+
315
+ All components use Tailwind CSS for styling and can be customized using Tailwind classes. The components also respect the theme variables defined in your CSS.
316
+
317
+ ### Custom Styling Example
318
+
319
+ ```tsx
320
+ <AdvancedCombobox
321
+ className="w-[300px] rounded-lg"
322
+ items={items}
323
+ placeholder="Custom styled combobox"
324
+ onSelect={handleSelect}
325
+ />
326
+
327
+ <AdvancedDataTable
328
+ className="border rounded-lg shadow-sm"
329
+ columns={columns}
330
+ fetchData={fetchData}
331
+ />
332
+ ```
333
+
334
+ ## Contributing
335
+
336
+ [Add contribution guidelines here]
337
+
338
+ ## License
339
+
340
+ MIT
package/dist/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
+ import { DateRange } from 'react-day-picker';
3
4
 
4
5
  interface Column<T> {
5
6
  accessor: keyof T | ((item: T) => React.ReactNode);
@@ -42,4 +43,14 @@ interface AdvancedComboboxProps {
42
43
  }
43
44
  declare function AdvancedCombobox({ items, placeholder, onSelect, multiple, searchable, }: AdvancedComboboxProps): react_jsx_runtime.JSX.Element;
44
45
 
45
- export { AdvancedCombobox, AdvancedDataTable };
46
+ interface DateTimePickerProps {
47
+ mode: 'single' | 'range';
48
+ selected: Date | DateRange | undefined;
49
+ onSelect: (date: Date | DateRange | undefined) => void;
50
+ disabledDates?: Date[];
51
+ fromDate?: Date;
52
+ toDate?: Date;
53
+ }
54
+ declare function DateTimePicker({ mode, selected, onSelect, disabledDates, fromDate, toDate, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
55
+
56
+ export { AdvancedCombobox, AdvancedDataTable, DateTimePicker };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
+ import { DateRange } from 'react-day-picker';
3
4
 
4
5
  interface Column<T> {
5
6
  accessor: keyof T | ((item: T) => React.ReactNode);
@@ -42,4 +43,14 @@ interface AdvancedComboboxProps {
42
43
  }
43
44
  declare function AdvancedCombobox({ items, placeholder, onSelect, multiple, searchable, }: AdvancedComboboxProps): react_jsx_runtime.JSX.Element;
44
45
 
45
- export { AdvancedCombobox, AdvancedDataTable };
46
+ interface DateTimePickerProps {
47
+ mode: 'single' | 'range';
48
+ selected: Date | DateRange | undefined;
49
+ onSelect: (date: Date | DateRange | undefined) => void;
50
+ disabledDates?: Date[];
51
+ fromDate?: Date;
52
+ toDate?: Date;
53
+ }
54
+ declare function DateTimePicker({ mode, selected, onSelect, disabledDates, fromDate, toDate, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
55
+
56
+ export { AdvancedCombobox, AdvancedDataTable, DateTimePicker };
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var y=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),reactSlot=require('@radix-ui/react-slot'),classVarianceAuthority=require('class-variance-authority'),i=require('@radix-ui/react-select'),lucideReact=require('lucide-react'),V=require('@radix-ui/react-checkbox'),P=require('@radix-ui/react-avatar'),w=require('@radix-ui/react-tooltip'),cmdk=require('cmdk'),c=require('@radix-ui/react-dialog'),g=require('@radix-ui/react-popover');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var y__namespace=/*#__PURE__*/_interopNamespace(y);var i__namespace=/*#__PURE__*/_interopNamespace(i);var V__namespace=/*#__PURE__*/_interopNamespace(V);var P__namespace=/*#__PURE__*/_interopNamespace(P);var w__namespace=/*#__PURE__*/_interopNamespace(w);var c__namespace=/*#__PURE__*/_interopNamespace(c);var g__namespace=/*#__PURE__*/_interopNamespace(g);function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var Q=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("div",{className:"relative w-full overflow-auto",children:jsxRuntime.jsx("table",{ref:o,className:a("w-full caption-bottom text-sm",e),...t})}));Q.displayName="Table";var Y=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("thead",{ref:o,className:a("[&_tr]:border-b",e),...t}));Y.displayName="TableHeader";var Z=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tbody",{ref:o,className:a("[&_tr:last-child]:border-0",e),...t}));Z.displayName="TableBody";var ze=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tfoot",{ref:o,className:a("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",e),...t}));ze.displayName="TableFooter";var I=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tr",{ref:o,className:a("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",e),...t}));I.displayName="TableRow";var O=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("th",{ref:o,className:a("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));O.displayName="TableHead";var M=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("td",{ref:o,className:a("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));M.displayName="TableCell";var Ve=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("caption",{ref:o,className:a("mt-4 text-sm text-muted-foreground",e),...t}));Ve.displayName="TableCaption";var Ge=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),_=y__namespace.forwardRef(({className:e,variant:t,size:o,asChild:n=false,...f},L)=>jsxRuntime.jsx(n?reactSlot.Slot:"button",{className:a(Ge({variant:t,size:o,className:e})),ref:L,...f}));_.displayName="Button";var j=y__namespace.forwardRef(({className:e,type:t,...o},n)=>jsxRuntime.jsx("input",{type:t,className:a("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:n,...o}));j.displayName="Input";var fe=i__namespace.Root;var Je=y__namespace.forwardRef(({className:e,children:t,...o},n)=>jsxRuntime.jsxs(i__namespace.Trigger,{ref:n,className:a("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",e),...o,children:[t,jsxRuntime.jsx(i__namespace.Icon,{asChild:true,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4 opacity-50"})})]}));Je.displayName=i__namespace.Trigger.displayName;var ue=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.ScrollUpButton,{ref:o,className:a("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronUp,{className:"h-4 w-4"})}));ue.displayName=i__namespace.ScrollUpButton.displayName;var ge=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.ScrollDownButton,{ref:o,className:a("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4"})}));ge.displayName=i__namespace.ScrollDownButton.displayName;var Ke=y__namespace.forwardRef(({className:e,children:t,position:o="popper",...n},f)=>jsxRuntime.jsx(i__namespace.Portal,{children:jsxRuntime.jsxs(i__namespace.Content,{ref:f,className:a("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...n,children:[jsxRuntime.jsx(ue,{}),jsxRuntime.jsx(i__namespace.Viewport,{className:a("p-1",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:t}),jsxRuntime.jsx(ge,{})]})}));Ke.displayName=i__namespace.Content.displayName;var Qe=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.Label,{ref:o,className:a("px-2 py-1.5 text-sm font-semibold",e),...t}));Qe.displayName=i__namespace.Label.displayName;var Ye=y__namespace.forwardRef(({className:e,children:t,...o},n)=>jsxRuntime.jsxs(i__namespace.Item,{ref:n,className:a("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...o,children:[jsxRuntime.jsx("span",{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:jsxRuntime.jsx(i__namespace.ItemIndicator,{children:jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"})})}),jsxRuntime.jsx(i__namespace.ItemText,{children:t})]}));Ye.displayName=i__namespace.Item.displayName;var Ze=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.Separator,{ref:o,className:a("-mx-1 my-1 h-px bg-muted",e),...t}));Ze.displayName=i__namespace.Separator.displayName;var G=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(V__namespace.Root,{ref:o,className:a("peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",e),...t,children:jsxRuntime.jsx(V__namespace.Indicator,{className:a("flex items-center justify-center text-current"),children:jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"})})}));G.displayName=V__namespace.Root.displayName;var be=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(P__namespace.Root,{ref:o,className:a("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",e),...t}));be.displayName=P__namespace.Root.displayName;var Re=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(P__namespace.Image,{ref:o,className:a("aspect-square h-full w-full",e),...t}));Re.displayName=P__namespace.Image.displayName;var ye=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(P__namespace.Fallback,{ref:o,className:a("flex h-full w-full items-center justify-center rounded-full bg-muted",e),...t}));ye.displayName=P__namespace.Fallback.displayName;classVarianceAuthority.cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",outline:"text-foreground"}},defaultVariants:{variant:"default"}});var Ce=y__namespace.forwardRef(({className:e,sideOffset:t=4,...o},n)=>jsxRuntime.jsx(w__namespace.Portal,{children:jsxRuntime.jsx(w__namespace.Content,{ref:n,sideOffset:t,className:a("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...o})}));Ce.displayName=w__namespace.Content.displayName;function at({columns:e,fetchData:t,itemsPerPageOptions:o=[10,20,50]}){let[n,f]=y.useState([]),[L,A]=y.useState(true),[v,k]=y.useState(1),[x,q]=y.useState(o[0]),[W,X]=y.useState(null),[H,s]=y.useState("asc"),[D,J]=y.useState({}),[z,K]=y.useState(new Set),[b,De]=y.useState(null);y.useEffect(()=>{Ee();},[t,v,x,W,H,D]);let Ee=async()=>{A(true);try{let r=await t({page:v,perPage:x,sortBy:W,sortOrder:H,filters:D});f(r.data),De(r.meta);}catch(r){console.error("Error fetching data:",r);}finally{A(false);}},Le=r=>{W===r?s(H==="asc"?"desc":"asc"):(X(r),s("asc"));},Ae=(r,l)=>{J(_e=>({..._e,[r]:l})),k(1);},He=r=>{let l=new Set(z);l.has(r)?l.delete(r):l.add(r),K(l);},Ie=()=>{z.size===n.length?K(new Set):K(new Set(n.map(r=>r.id)));},Me=(r,l)=>l.cell?l.cell(r[l.accessor],r):typeof l.accessor=="function"?l.accessor(r):r[l.accessor];return jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between mb-4",children:[jsxRuntime.jsx("div",{className:"flex space-x-2",children:e.filter(r=>r.filterable).map(r=>jsxRuntime.jsx(j,{placeholder:`Filter ${r.header}`,value:D[r.accessor]||"",onChange:l=>Ae(r.accessor,l.target.value),className:"w-40"},r.accessor))}),jsxRuntime.jsx(fe,{value:x.toString(),onValueChange:r=>{q(Number(r)),k(1);},children:o.map(r=>jsxRuntime.jsxs("option",{value:r.toString(),children:[r," per page"]},r))})]}),jsxRuntime.jsxs(Q,{children:[jsxRuntime.jsx(Y,{children:jsxRuntime.jsxs(I,{children:[jsxRuntime.jsx(O,{className:"w-[50px]",children:jsxRuntime.jsx(G,{checked:z.size===n.length,onCheckedChange:Ie})}),e.map(r=>jsxRuntime.jsx(O,{className:r.sortable?"cursor-pointer":"",onClick:()=>r.sortable&&Le(r.accessor),children:jsxRuntime.jsxs("div",{className:"flex items-center",children:[r.header,r.sortable&&jsxRuntime.jsx(lucideReact.ArrowUpDown,{className:"ml-2 h-4 w-4"})]})},r.accessor))]})}),jsxRuntime.jsx(Z,{children:L?jsxRuntime.jsx(I,{children:jsxRuntime.jsx(M,{colSpan:e.length+1,className:"h-24 text-center",children:"Loading..."})}):n.length===0?jsxRuntime.jsx(I,{children:jsxRuntime.jsx(M,{colSpan:e.length+1,className:"h-24 text-center",children:"No results found."})}):n.map(r=>jsxRuntime.jsxs(I,{className:z.has(r.id)?"bg-muted":"",children:[jsxRuntime.jsx(M,{children:jsxRuntime.jsx(G,{checked:z.has(r.id),onCheckedChange:()=>He(r.id)})}),e.map(l=>jsxRuntime.jsx(M,{children:Me(r,l)},l.accessor))]},r.id))})]}),b&&jsxRuntime.jsxs("div",{className:"flex justify-between items-center mt-4",children:[jsxRuntime.jsxs("div",{children:["Showing ",(b.current_page-1)*b.per_page+1," to"," ",Math.min(b.current_page*b.per_page,b.total)," of ",b.total," entries"]}),jsxRuntime.jsxs("div",{className:"flex space-x-2",children:[jsxRuntime.jsx(_,{onClick:()=>k(r=>Math.max(r-1,1)),disabled:v===1,children:"Previous"}),jsxRuntime.jsx(_,{onClick:()=>k(r=>Math.min(r+1,b.last_page)),disabled:v===b.last_page,children:"Next"})]})]})]})}var it=c__namespace.Portal;var xe=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(c__namespace.Overlay,{ref:o,className:a("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));xe.displayName=c__namespace.Overlay.displayName;var Te=y__namespace.forwardRef(({className:e,children:t,...o},n)=>jsxRuntime.jsxs(it,{children:[jsxRuntime.jsx(xe,{}),jsxRuntime.jsxs(c__namespace.Content,{ref:n,className:a("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",e),...o,children:[t,jsxRuntime.jsxs(c__namespace.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",children:[jsxRuntime.jsx(lucideReact.X,{className:"h-4 w-4"}),jsxRuntime.jsx("span",{className:"sr-only",children:"Close"})]})]})]}));Te.displayName=c__namespace.Content.displayName;var lt=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(c__namespace.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));lt.displayName=c__namespace.Title.displayName;var mt=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(c__namespace.Description,{ref:o,className:a("text-sm text-muted-foreground",e),...t}));mt.displayName=c__namespace.Description.displayName;var re=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",e),...t}));re.displayName=cmdk.Command.displayName;var ie=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsxs("div",{className:"flex items-center border-b px-3","cmdk-input-wrapper":"",children:[jsxRuntime.jsx(lucideReact.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),jsxRuntime.jsx(cmdk.Command.Input,{ref:o,className:a("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",e),...t})]}));ie.displayName=cmdk.Command.Input.displayName;var dt=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.List,{ref:o,className:a("max-h-[300px] overflow-y-auto overflow-x-hidden",e),...t}));dt.displayName=cmdk.Command.List.displayName;var ne=y__namespace.forwardRef((e,t)=>jsxRuntime.jsx(cmdk.Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));ne.displayName=cmdk.Command.Empty.displayName;var se=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Group,{ref:o,className:a("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",e),...t}));se.displayName=cmdk.Command.Group.displayName;var pt=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Separator,{ref:o,className:a("-mx-1 h-px bg-border",e),...t}));pt.displayName=cmdk.Command.Separator.displayName;var le=y__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Item,{ref:o,className:a("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...t}));le.displayName=cmdk.Command.Item.displayName;var Se=g__namespace.Root,ke=g__namespace.Trigger;var me=y__namespace.forwardRef(({className:e,align:t="center",sideOffset:o=4,...n},f)=>jsxRuntime.jsx(g__namespace.Portal,{children:jsxRuntime.jsx(g__namespace.Content,{ref:f,align:t,sideOffset:o,className:a("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...n})}));me.displayName=g__namespace.Content.displayName;function bt({items:e,placeholder:t,onSelect:o,multiple:n=false,searchable:f=true}){var H;let[L,A]=y__namespace.useState(false),[v,k]=y__namespace.useState([]),[x,q]=y__namespace.useState(""),W=y__namespace.useMemo(()=>!f||!x?e:e.filter(s=>s.label.toLowerCase().includes(x.toLowerCase())||s.value.toLowerCase().includes(x.toLowerCase())),[e,x,f]),X=s=>{n?k(D=>D.includes(s)?D.filter(J=>J!==s):[...D,s]):(k([s]),A(false)),o(s);};return jsxRuntime.jsxs(Se,{open:L,onOpenChange:A,children:[jsxRuntime.jsx(ke,{asChild:true,children:jsxRuntime.jsxs(_,{variant:"outline",role:"combobox","aria-expanded":L,className:"w-[200px] justify-between",children:[v.length>0?n?`${v.length} selected`:(H=e.find(s=>s.value===v[0]))==null?void 0:H.label:t,jsxRuntime.jsx(lucideReact.ChevronsUpDown,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),jsxRuntime.jsx(me,{className:"w-[200px] p-0",children:jsxRuntime.jsxs(re,{children:[f&&jsxRuntime.jsx(ie,{placeholder:`Search ${t.toLowerCase()}...`,onValueChange:q}),jsxRuntime.jsx(ne,{children:"No item found."}),jsxRuntime.jsx(se,{children:W.map(s=>jsxRuntime.jsxs(le,{onSelect:()=>X(s.value),children:[jsxRuntime.jsx(lucideReact.Check,{className:a("mr-2 h-4 w-4",v.includes(s.value)?"opacity-100":"opacity-0")}),s.label]},s.value))})]})})]})}exports.AdvancedCombobox=bt;exports.AdvancedDataTable=at;//# sourceMappingURL=index.js.map
1
+ 'use strict';var k=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),reactSlot=require('@radix-ui/react-slot'),classVarianceAuthority=require('class-variance-authority'),i=require('@radix-ui/react-select'),lucideReact=require('lucide-react'),te=require('@radix-ui/react-checkbox'),L=require('@radix-ui/react-avatar'),W=require('@radix-ui/react-tooltip'),cmdk=require('cmdk'),u=require('@radix-ui/react-dialog'),S=require('@radix-ui/react-popover'),dateFns=require('date-fns'),useDebounce=require('use-debounce'),reactDayPicker=require('react-day-picker'),Ne=require('@radix-ui/react-label'),re=require('@radix-ui/react-switch');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var k__namespace=/*#__PURE__*/_interopNamespace(k);var i__namespace=/*#__PURE__*/_interopNamespace(i);var te__namespace=/*#__PURE__*/_interopNamespace(te);var L__namespace=/*#__PURE__*/_interopNamespace(L);var W__namespace=/*#__PURE__*/_interopNamespace(W);var u__namespace=/*#__PURE__*/_interopNamespace(u);var S__namespace=/*#__PURE__*/_interopNamespace(S);var Ne__namespace=/*#__PURE__*/_interopNamespace(Ne);var re__namespace=/*#__PURE__*/_interopNamespace(re);function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var fe=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("div",{className:"relative w-full overflow-auto",children:jsxRuntime.jsx("table",{ref:o,className:a("w-full caption-bottom text-sm",e),...t})}));fe.displayName="Table";var ue=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("thead",{ref:o,className:a("[&_tr]:border-b",e),...t}));ue.displayName="TableHeader";var ge=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tbody",{ref:o,className:a("[&_tr:last-child]:border-0",e),...t}));ge.displayName="TableBody";var et=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tfoot",{ref:o,className:a("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",e),...t}));et.displayName="TableFooter";var J=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("tr",{ref:o,className:a("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",e),...t}));J.displayName="TableRow";var ie=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("th",{ref:o,className:a("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));ie.displayName="TableHead";var K=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("td",{ref:o,className:a("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",e),...t}));K.displayName="TableCell";var tt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx("caption",{ref:o,className:a("mt-4 text-sm text-muted-foreground",e),...t}));tt.displayName="TableCaption";var ne=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),H=k__namespace.forwardRef(({className:e,variant:t,size:o,asChild:s=false,...d},x)=>jsxRuntime.jsx(s?reactSlot.Slot:"button",{className:a(ne({variant:t,size:o,className:e})),ref:x,...d}));H.displayName="Button";var $=k__namespace.forwardRef(({className:e,type:t,...o},s)=>jsxRuntime.jsx("input",{type:t,className:a("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:s,...o}));$.displayName="Input";var Le=i__namespace.Root;var lt=k__namespace.forwardRef(({className:e,children:t,...o},s)=>jsxRuntime.jsxs(i__namespace.Trigger,{ref:s,className:a("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",e),...o,children:[t,jsxRuntime.jsx(i__namespace.Icon,{asChild:true,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4 opacity-50"})})]}));lt.displayName=i__namespace.Trigger.displayName;var Ee=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.ScrollUpButton,{ref:o,className:a("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronUp,{className:"h-4 w-4"})}));Ee.displayName=i__namespace.ScrollUpButton.displayName;var _e=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.ScrollDownButton,{ref:o,className:a("flex cursor-default items-center justify-center py-1",e),...t,children:jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4"})}));_e.displayName=i__namespace.ScrollDownButton.displayName;var mt=k__namespace.forwardRef(({className:e,children:t,position:o="popper",...s},d)=>jsxRuntime.jsx(i__namespace.Portal,{children:jsxRuntime.jsxs(i__namespace.Content,{ref:d,className:a("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...s,children:[jsxRuntime.jsx(Ee,{}),jsxRuntime.jsx(i__namespace.Viewport,{className:a("p-1",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:t}),jsxRuntime.jsx(_e,{})]})}));mt.displayName=i__namespace.Content.displayName;var ct=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.Label,{ref:o,className:a("px-2 py-1.5 text-sm font-semibold",e),...t}));ct.displayName=i__namespace.Label.displayName;var dt=k__namespace.forwardRef(({className:e,children:t,...o},s)=>jsxRuntime.jsxs(i__namespace.Item,{ref:s,className:a("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",e),...o,children:[jsxRuntime.jsx("span",{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:jsxRuntime.jsx(i__namespace.ItemIndicator,{children:jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"})})}),jsxRuntime.jsx(i__namespace.ItemText,{children:t})]}));dt.displayName=i__namespace.Item.displayName;var pt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(i__namespace.Separator,{ref:o,className:a("-mx-1 my-1 h-px bg-muted",e),...t}));pt.displayName=i__namespace.Separator.displayName;var se=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(te__namespace.Root,{ref:o,className:a("peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",e),...t,children:jsxRuntime.jsx(te__namespace.Indicator,{className:a("flex items-center justify-center text-current"),children:jsxRuntime.jsx(lucideReact.Check,{className:"h-4 w-4"})})}));se.displayName=te__namespace.Root.displayName;var Ie=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(L__namespace.Root,{ref:o,className:a("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",e),...t}));Ie.displayName=L__namespace.Root.displayName;var Me=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(L__namespace.Image,{ref:o,className:a("aspect-square h-full w-full",e),...t}));Me.displayName=L__namespace.Image.displayName;var Be=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(L__namespace.Fallback,{ref:o,className:a("flex h-full w-full items-center justify-center rounded-full bg-muted",e),...t}));Be.displayName=L__namespace.Fallback.displayName;classVarianceAuthority.cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",outline:"text-foreground"}},defaultVariants:{variant:"default"}});var ze=k__namespace.forwardRef(({className:e,sideOffset:t=4,...o},s)=>jsxRuntime.jsx(W__namespace.Portal,{children:jsxRuntime.jsx(W__namespace.Content,{ref:s,sideOffset:t,className:a("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...o})}));ze.displayName=W__namespace.Content.displayName;function bt({columns:e,fetchData:t,itemsPerPageOptions:o=[10,20,50]}){let[s,d]=k.useState([]),[x,c]=k.useState(true),[w,n]=k.useState(1),[T,Z]=k.useState(o[0]),[I,b]=k.useState(null),[M,m]=k.useState("asc"),[B,G]=k.useState({}),[U,j]=k.useState(new Set),[C,l]=k.useState(null);k.useEffect(()=>{h();},[t,w,T,I,M,B]);let h=async()=>{c(true);try{let r=await t({page:w,perPage:T,sortBy:I,sortOrder:M,filters:B});d(r.data),l(r.meta);}catch(r){console.error("Error fetching data:",r);}finally{c(false);}},ee=r=>{I===r?m(M==="asc"?"desc":"asc"):(b(r),m("asc"));},y=(r,p)=>{G(Ye=>({...Ye,[r]:p})),n(1);},R=r=>{let p=new Set(U);p.has(r)?p.delete(r):p.add(r),j(p);},Ke=()=>{U.size===s.length?j(new Set):j(new Set(s.map(r=>r.id)));},Qe=(r,p)=>p.cell?p.cell(r[p.accessor],r):typeof p.accessor=="function"?p.accessor(r):r[p.accessor];return jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:"flex justify-between mb-4",children:[jsxRuntime.jsx("div",{className:"flex space-x-2",children:e.filter(r=>r.filterable).map(r=>jsxRuntime.jsx($,{placeholder:`Filter ${r.header}`,value:B[r.accessor]||"",onChange:p=>y(r.accessor,p.target.value),className:"w-40"},r.accessor))}),jsxRuntime.jsx(Le,{value:T.toString(),onValueChange:r=>{Z(Number(r)),n(1);},children:o.map(r=>jsxRuntime.jsxs("option",{value:r.toString(),children:[r," per page"]},r))})]}),jsxRuntime.jsxs(fe,{children:[jsxRuntime.jsx(ue,{children:jsxRuntime.jsxs(J,{children:[jsxRuntime.jsx(ie,{className:"w-[50px]",children:jsxRuntime.jsx(se,{checked:U.size===s.length,onCheckedChange:Ke})}),e.map(r=>jsxRuntime.jsx(ie,{className:r.sortable?"cursor-pointer":"",onClick:()=>r.sortable&&ee(r.accessor),children:jsxRuntime.jsxs("div",{className:"flex items-center",children:[r.header,r.sortable&&jsxRuntime.jsx(lucideReact.ArrowUpDown,{className:"ml-2 h-4 w-4"})]})},r.accessor))]})}),jsxRuntime.jsx(ge,{children:x?jsxRuntime.jsx(J,{children:jsxRuntime.jsx(K,{colSpan:e.length+1,className:"h-24 text-center",children:"Loading..."})}):s.length===0?jsxRuntime.jsx(J,{children:jsxRuntime.jsx(K,{colSpan:e.length+1,className:"h-24 text-center",children:"No results found."})}):s.map(r=>jsxRuntime.jsxs(J,{className:U.has(r.id)?"bg-muted":"",children:[jsxRuntime.jsx(K,{children:jsxRuntime.jsx(se,{checked:U.has(r.id),onCheckedChange:()=>R(r.id)})}),e.map(p=>jsxRuntime.jsx(K,{children:Qe(r,p)},p.accessor))]},r.id))})]}),C&&jsxRuntime.jsxs("div",{className:"flex justify-between items-center mt-4",children:[jsxRuntime.jsxs("div",{children:["Showing ",(C.current_page-1)*C.per_page+1," to"," ",Math.min(C.current_page*C.per_page,C.total)," of ",C.total," entries"]}),jsxRuntime.jsxs("div",{className:"flex space-x-2",children:[jsxRuntime.jsx(H,{onClick:()=>n(r=>Math.max(r-1,1)),disabled:w===1,children:"Previous"}),jsxRuntime.jsx(H,{onClick:()=>n(r=>Math.min(r+1,C.last_page)),disabled:w===C.last_page,children:"Next"})]})]})]})}var ht=u__namespace.Portal;var Fe=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(u__namespace.Overlay,{ref:o,className:a("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));Fe.displayName=u__namespace.Overlay.displayName;var Oe=k__namespace.forwardRef(({className:e,children:t,...o},s)=>jsxRuntime.jsxs(ht,{children:[jsxRuntime.jsx(Fe,{}),jsxRuntime.jsxs(u__namespace.Content,{ref:s,className:a("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",e),...o,children:[t,jsxRuntime.jsxs(u__namespace.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",children:[jsxRuntime.jsx(lucideReact.X,{className:"h-4 w-4"}),jsxRuntime.jsx("span",{className:"sr-only",children:"Close"})]})]})]}));Oe.displayName=u__namespace.Content.displayName;var xt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(u__namespace.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));xt.displayName=u__namespace.Title.displayName;var wt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(u__namespace.Description,{ref:o,className:a("text-sm text-muted-foreground",e),...t}));wt.displayName=u__namespace.Description.displayName;var Re=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",e),...t}));Re.displayName=cmdk.Command.displayName;var Pe=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsxs("div",{className:"flex items-center border-b px-3","cmdk-input-wrapper":"",children:[jsxRuntime.jsx(lucideReact.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),jsxRuntime.jsx(cmdk.Command.Input,{ref:o,className:a("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",e),...t})]}));Pe.displayName=cmdk.Command.Input.displayName;var Tt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.List,{ref:o,className:a("max-h-[300px] overflow-y-auto overflow-x-hidden",e),...t}));Tt.displayName=cmdk.Command.List.displayName;var xe=k__namespace.forwardRef((e,t)=>jsxRuntime.jsx(cmdk.Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));xe.displayName=cmdk.Command.Empty.displayName;var we=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Group,{ref:o,className:a("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",e),...t}));we.displayName=cmdk.Command.Group.displayName;var Nt=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Separator,{ref:o,className:a("-mx-1 h-px bg-border",e),...t}));Nt.displayName=cmdk.Command.Separator.displayName;var Ce=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(cmdk.Command.Item,{ref:o,className:a("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...t}));Ce.displayName=cmdk.Command.Item.displayName;var me=S__namespace.Root,ce=S__namespace.Trigger;var ae=k__namespace.forwardRef(({className:e,align:t="center",sideOffset:o=4,...s},d)=>jsxRuntime.jsx(S__namespace.Portal,{children:jsxRuntime.jsx(S__namespace.Content,{ref:d,align:t,sideOffset:o,className:a("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...s})}));ae.displayName=S__namespace.Content.displayName;function Lt({items:e,placeholder:t,onSelect:o,multiple:s=false,searchable:d=true}){var M;let[x,c]=k__namespace.useState(false),[w,n]=k__namespace.useState([]),[T,Z]=k__namespace.useState(""),I=k__namespace.useMemo(()=>!d||!T?e:e.filter(m=>m.label.toLowerCase().includes(T.toLowerCase())||m.value.toLowerCase().includes(T.toLowerCase())),[e,T,d]),b=m=>{s?n(B=>B.includes(m)?B.filter(G=>G!==m):[...B,m]):(n([m]),c(false)),o(m);};return jsxRuntime.jsxs(me,{open:x,onOpenChange:c,children:[jsxRuntime.jsx(ce,{asChild:true,children:jsxRuntime.jsxs(H,{variant:"outline",role:"combobox","aria-expanded":x,className:"w-[200px] justify-between",children:[w.length>0?s?`${w.length} selected`:(M=e.find(m=>m.value===w[0]))==null?void 0:M.label:t,jsxRuntime.jsx(lucideReact.ChevronsUpDown,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),jsxRuntime.jsx(ae,{className:"w-[200px] p-0",children:jsxRuntime.jsxs(Re,{children:[d&&jsxRuntime.jsx(Pe,{placeholder:`Search ${t.toLowerCase()}...`,onValueChange:Z}),jsxRuntime.jsx(xe,{children:"No item found."}),jsxRuntime.jsx(we,{children:I.map(m=>jsxRuntime.jsxs(Ce,{onSelect:()=>b(m.value),children:[jsxRuntime.jsx(lucideReact.Check,{className:a("mr-2 h-4 w-4",w.includes(m.value)?"opacity-100":"opacity-0")}),m.label]},m.value))})]})})]})}function pe({className:e,classNames:t,showOutsideDays:o=true,...s}){return jsxRuntime.jsx(reactDayPicker.DayPicker,{showOutsideDays:o,className:a("p-3",e),classNames:{months:"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",month:"space-y-4",caption:"flex justify-center pt-1 relative items-center",caption_label:"text-sm font-medium",nav:"space-x-1 flex items-center",nav_button:a(ne({variant:"outline"}),"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),nav_button_previous:"absolute left-1",nav_button_next:"absolute right-1",table:"w-full border-collapse space-y-1",head_row:"flex",head_cell:"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",row:"flex w-full mt-2",cell:"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",day:a(ne({variant:"ghost"}),"h-9 w-9 p-0 font-normal aria-selected:opacity-100"),day_range_end:"day-range-end",day_selected:"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",day_today:"bg-accent text-accent-foreground",day_outside:"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",day_disabled:"text-muted-foreground opacity-50",day_range_middle:"aria-selected:bg-accent aria-selected:text-accent-foreground",day_hidden:"invisible",...t},components:{IconLeft:({className:d,...x})=>jsxRuntime.jsx(lucideReact.ChevronLeft,{className:a("h-4 w-4",d),...x}),IconRight:({className:d,...x})=>jsxRuntime.jsx(lucideReact.ChevronRight,{className:a("h-4 w-4",d),...x})},...s})}pe.displayName="Calendar";var Mt=classVarianceAuthority.cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),Y=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(Ne__namespace.Root,{ref:o,className:a(Mt(),e),...t}));Y.displayName=Ne__namespace.Root.displayName;var Se=k__namespace.forwardRef(({className:e,...t},o)=>jsxRuntime.jsx(re__namespace.Root,{className:a("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",e),...t,ref:o,children:jsxRuntime.jsx(re__namespace.Thumb,{className:a("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0")})}));Se.displayName=re__namespace.Root.displayName;function Gt({mode:e,selected:t,onSelect:o,disabledDates:s,fromDate:d,toDate:x}){let[c,w]=k__namespace.useState(e==="single"?t:void 0),[n,T]=k__namespace.useState(e==="range"?t:void 0),[Z,I]=k__namespace.useState(false),[b,M]=k__namespace.useState(false),[m]=useDebounce.useDebounce(l=>{o(l);},300);k__namespace.useEffect(()=>{e==="single"&&!c&&w(new Date);},[e,c,w]);let G=(l,h=false)=>{let ee=l.target.value,y=C(ee);if(y)if(e==="range"&&n&&"from"in n){let R=new Date(h?n.to||n.from||new Date:n.from||new Date);R.setHours(y.getHours(),y.getMinutes(),y.getSeconds()),m({from:h?n.from:R,to:h?R:n.to});}else if(c instanceof Date){let R=new Date(c);R.setHours(y.getHours(),y.getMinutes(),y.getSeconds()),m(R);}else {let R=new Date;R.setHours(y.getHours(),y.getMinutes(),y.getSeconds()),m(R);}},U=l=>{if(!l)return "";if(e==="range"&&n&&"from"in n){let h=n.from?dateFns.format(n.from,"PP"):"",ee=n.to?dateFns.format(n.to,"PP"):"",y=n.from?dateFns.format(n.from,b?"HH:mm:ss":"HH:mm"):"",R=n.to?dateFns.format(n.to,b?"HH:mm:ss":"HH:mm"):"";return `${h}${y?` ${y}`:""} - ${ee}${R?` ${R}`:""}`}return l instanceof Date?dateFns.format(l,e==="single"?b?"HH:mm:ss":"HH:mm":"PP"):""},j=()=>{o(e==="range"?{from:void 0,to:void 0}:void 0);},C=l=>{let h=dateFns.parse(l,b?"HH:mm:ss":"HH:mm",new Date);return dateFns.isValid(h)?h:null};return jsxRuntime.jsxs(me,{open:Z,onOpenChange:I,children:[jsxRuntime.jsx(ce,{asChild:true,children:jsxRuntime.jsxs(H,{variant:"outline",className:a("w-full justify-start text-left font-normal h-9 bg-card",!c&&"text-muted-foreground"),children:[e==="single"?jsxRuntime.jsx(lucideReact.Clock,{className:"mr-2 h-4 w-4"}):jsxRuntime.jsx(lucideReact.CalendarIcon,{className:"mr-2 h-4 w-4"}),c?U(c):e==="single"?"Select time":"Select date",e==="single"&&c&&jsxRuntime.jsx(H,{variant:"ghost",size:"sm",className:"ml-auto h-6 w-6 p-0",onClick:l=>{l.stopPropagation(),j();},children:jsxRuntime.jsx(lucideReact.X,{className:"h-4 w-4"})})]})}),jsxRuntime.jsxs(ae,{className:"w-auto p-0",align:"start",children:[e==="single"?jsxRuntime.jsx(pe,{mode:"single",selected:c,onSelect:l=>w(l),disabled:s,fromDate:d,toDate:x,initialFocus:true}):jsxRuntime.jsx(pe,{mode:"range",selected:n,onSelect:l=>T(l),disabled:s,fromDate:d,toDate:x,initialFocus:true}),(e==="single"||e==="range")&&jsxRuntime.jsxs("div",{className:"p-3 border-t",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between mb-2",children:[jsxRuntime.jsx(Y,{htmlFor:"showSeconds",className:"text-sm",children:"Show seconds"}),jsxRuntime.jsx(Se,{id:"showSeconds",checked:b,onCheckedChange:M})]}),jsxRuntime.jsx("div",{className:"flex justify-between items-end",children:e==="range"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx(Y,{htmlFor:"startTime",className:"text-sm mb-1",children:"Start Time"}),jsxRuntime.jsx($,{id:"startTime",type:"time",step:b?1:60,onChange:G,value:n&&"from"in n&&n.from?dateFns.format(n.from,b?"HH:mm:ss":"HH:mm"):""})]}),jsxRuntime.jsx(lucideReact.Clock,{className:"mx-2 h-4 w-4 text-muted-foreground"}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[jsxRuntime.jsx(Y,{htmlFor:"endTime",className:"text-sm mb-1",children:"End Time"}),jsxRuntime.jsx($,{id:"endTime",type:"time",step:b?1:60,onChange:l=>G(l,true),value:n&&"from"in n&&n.to?dateFns.format(n.to,b?"HH:mm:ss":"HH:mm"):""})]})]}):jsxRuntime.jsxs("div",{className:"flex flex-col w-full",children:[jsxRuntime.jsx(Y,{htmlFor:"time",className:"text-sm mb-1",children:"Time"}),jsxRuntime.jsx($,{id:"time",type:"time",step:b?1:60,onChange:G,value:c instanceof Date?dateFns.format(c,b?"HH:mm:ss":"HH:mm"):""})]})})]})]})]})}exports.AdvancedCombobox=Lt;exports.AdvancedDataTable=bt;exports.DateTimePicker=Gt;//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map