shadcn-ui-react 0.2.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +186 -58
  2. package/dist/index.cjs +98 -61
  3. package/dist/index.d.cts +11 -6
  4. package/dist/index.d.ts +11 -6
  5. package/dist/index.js +150 -113
  6. package/dist/style.css +15 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,70 +1,161 @@
1
- # shadcn-ui-react
1
+ # 🧩 shadcn-ui-react
2
2
 
3
- A simple wrapper for [shadcn/ui](https://github.com/shadcn-ui/ui)
3
+ A simple wrapper for [shadcn/ui](https://github.com/shadcn-ui/ui) to build modern, accessible, and customizable UIs in React with minimal setup.
4
4
 
5
- ## Install
5
+ ---
6
6
 
7
- ```sh
8
- pnpm add shadcn-ui-react
9
- # or
7
+ ## 📦 Installation
8
+
9
+ Install via your preferred package manager:
10
+
11
+ ```bash
10
12
  npm install shadcn-ui-react
11
13
  # or
12
14
  yarn add shadcn-ui-react
15
+ # or
16
+ pnpm add shadcn-ui-react
13
17
  ```
14
18
 
15
- ## Usage
19
+ ---
20
+
21
+ ## 🚀 Getting Started
16
22
 
17
- Import `style.css` in the App root:
23
+ ### 1. Import Global Styles
24
+
25
+ In your `main.tsx` or `App.tsx`:
18
26
 
19
27
  ```tsx
20
28
  import "shadcn-ui-react/dist/style.css";
21
29
  ```
22
30
 
23
- Then use the components:
31
+ ### 2. Use Components
24
32
 
25
33
  ```tsx
26
34
  import { Button } from "shadcn-ui-react";
27
35
 
28
- export default function MyComponent() {
29
- return <Button>Hello world</Button>;
30
- }
31
- ```
32
-
33
- ```tsx
34
- import { Card } from "shadcn-ui-react";
35
-
36
- export default function MyComponent() {
36
+ export default function App() {
37
37
  return (
38
- <Card>
39
- <h1>Hello World</h1>
40
- </Card>
38
+ <div className="p-4">
39
+ <Button variant="default">Click me</Button>
40
+ <Button loading className="ml-2">Loading</Button>
41
+ </div>
41
42
  );
42
43
  }
43
44
  ```
44
45
 
46
+ ---
47
+
48
+ ## 🧱 Available Components
49
+
50
+ ### 📦 UI Primitives
51
+
52
+ - `Accordion`
53
+ - `Alert`
54
+ - `Avatar`
55
+ - `Badge`
56
+ - `Breadcrumb`
57
+ - `Button`
58
+ - `Calendar`
59
+ - `Card`
60
+ - `Carousel`
61
+ - `Checkbox`
62
+ - `Collapsible`
63
+ - `Command`
64
+ - `ContextMenu`
65
+ - `Dialog`
66
+ - `Drawer`
67
+ - `DropdownMenu`
68
+ - `HoverCard`
69
+ - `Input`
70
+ - `InputOtp`
71
+ - `Label`
72
+ - `Menubar`
73
+ - `Modal`
74
+ - `NavigationMenu`
75
+ - `Pagination`
76
+ - `Popover`
77
+ - `Progress`
78
+ - `RadioGroup`
79
+ - `Resizable`
80
+ - `ScrollArea`
81
+ - `Select`
82
+ - `Separator`
83
+ - `Sheet`
84
+ - `Skeleton`
85
+ - `Slider`
86
+ - `Sonner`
87
+ - `Switch`
88
+ - `Table`
89
+ - `Tabs`
90
+ - `Textarea`
91
+ - `Toast`
92
+ - `Toggle`
93
+ - `ToggleGroup`
94
+ - `Tooltip`
95
+
96
+ ---
97
+
98
+ ### 🧠 Forms
99
+
100
+ - `Form`
101
+ - `FormField`
102
+
103
+ ---
104
+
105
+ ### 🔍 Inputs
106
+
107
+ - `SearchInput`
108
+
109
+ ---
110
+
111
+ ### 🧩 Utilities
112
+
113
+ - `UseToast`
114
+ - `Icons`
115
+
116
+ ---
117
+
118
+ ### 🛠 Shared Components
119
+
120
+ - `AlertModal`
121
+ - `Breadcrumbs`
122
+ - `DataTable` (with pagination)
123
+ - `DataTableSkeleton`
124
+ - `FileUpload`
125
+ - `Heading`
126
+ - `PageHead`
127
+ - `PaginationSection`
128
+
129
+ ---
130
+
131
+ ## ✨ Examples
132
+
133
+ ### 🔘 Button
134
+
45
135
  ```tsx
46
- import React, { useState } from "react";
47
- import { SearchInput } from "./components/search-input";
136
+ <Button variant="default">Default</Button>
137
+ <Button variant="outline">Outline</Button>
138
+ <Button loading>Loading...</Button>
139
+ ```
48
140
 
49
- export default function MyComponent() {
50
- const [searchTerm, setSearchTerm] = useState("");
141
+ ### 🪄 Accordion
51
142
 
52
- const handleSearch = (term?: string) => {
53
- setSearchTerm(term);
54
- console.log("Search term:", term);
55
- };
143
+ ```tsx
144
+ <Accordion type="single" collapsible>
145
+ <AccordionItem value="item-1">
146
+ <AccordionTrigger>Click me</AccordionTrigger>
147
+ <AccordionContent>Hidden content revealed!</AccordionContent>
148
+ </AccordionItem>
149
+ </Accordion>
150
+ ```
56
151
 
57
- return (
58
- <SearchInput
59
- placeholder="Search"
60
- value={searchTerm}
61
- onSearch={handleSearch}
62
- />
63
- );
64
- }
152
+ ### ⚠️ Alert
153
+
154
+ ```tsx
155
+ <Alert>This is an alert message</Alert>
65
156
  ```
66
157
 
67
- ## Example of a login form
158
+ ### 🧾 Form
68
159
 
69
160
  ```tsx
70
161
  import { zodResolver } from "@hookform/resolvers/zod";
@@ -82,7 +173,7 @@ import {
82
173
  import * as z from "zod";
83
174
 
84
175
  const formSchema = z.object({
85
- email: z.string().email({ message: "Enter a valid email address" }),
176
+ email: z.string({required_error: "Email is required"}).email({ message: "Enter a valid email address" }),
86
177
  password: z
87
178
  .string()
88
179
  .min(8, { message: "Password must be at least 8 characters" }),
@@ -106,10 +197,9 @@ export default function UserAuthForm() {
106
197
  <FormField
107
198
  control={form.control}
108
199
  name="email"
200
+ type="email"
109
201
  placeholder="Enter your email"
110
- onChange={(e) => {
111
- form.setValue("firstname", e.target.value);
112
- }}
202
+ label="Email"
113
203
  />
114
204
  <Button className="ml-auto w-full" type="submit">
115
205
  Log In
@@ -119,20 +209,20 @@ export default function UserAuthForm() {
119
209
  }
120
210
  ```
121
211
 
122
- ## Example of a data table
212
+ ### 📊 DataTable
123
213
 
124
214
  ```tsx
125
215
  import React, { useState } from "react";
126
216
  import { DataTable } from "shadcn-ui-react";
127
217
  import { ColumnDef } from "@tanstack/react-table";
128
218
 
129
- type Data = {
219
+ type User = {
130
220
  id: number;
131
221
  name: string;
132
- age: number;
222
+ email: string;
133
223
  };
134
224
 
135
- const columns: ColumnDef<Data, any>[] = [
225
+ const columns: ColumnDef<User, any>[] = [
136
226
  {
137
227
  accessorKey: "id",
138
228
  header: "ID",
@@ -142,38 +232,55 @@ const columns: ColumnDef<Data, any>[] = [
142
232
  header: "Name",
143
233
  },
144
234
  {
145
- accessorKey: "age",
146
- header: "Age",
235
+ accessorKey: "email",
236
+ header: "Email",
147
237
  },
148
238
  ];
149
239
 
150
- const data: Data[] = [
151
- { id: 1, name: "John Doe", age: 28 },
152
- { id: 2, name: "Jane Smith", age: 34 },
153
- { id: 3, name: "Sam Johnson", age: 45 },
240
+ const data: User[] = [
241
+ { id: 1, name: "John Doe", email: "john@example.com" },
242
+ { id: 2, name: "Jane Smith", email: "jane@example.com" },
243
+ { id: 3, name: "Sam Johnson", email: "sam@example.com" },
244
+ { id: 4, name: "Alice Brown", email: "alice@example.com" },
245
+ { id: 5, name: "Bob White", email: "bob@example.com" },
246
+ { id: 6, name: "Charlie Black", email: "charlie@example.com" },
247
+ { id: 7, name: "Diana Green", email: "diana@example.com" },
248
+ { id: 8, name: "Eve Blue", email: "eve@example.com" },
249
+ { id: 9, name: "Frank Yellow", email: "frank@example.com" },
250
+ { id: 10, name: "Grace Red", email: "grace@example.com" },
154
251
  ];
155
252
 
156
253
  const Example = () => {
157
254
  const [page, setPage] = useState(1);
255
+ const [perPage, setPerPage] = useState(5);
256
+
257
+ const paginatedData = data.slice((page - 1) * perPage, page * perPage);
158
258
 
159
259
  const handlePageChange = (newPage: number) => {
160
260
  setPage(newPage);
161
261
  };
162
262
 
163
- const handleRowClick = (row: Data) => {
164
- console.log("Row clicked:", row);
263
+ const handlePageSizeChange = (newPageSize: number) => {
264
+ setPerPage(newPageSize);
265
+ setPage(1); // Reset to the first page when page size changes
165
266
  };
166
267
 
167
268
  return (
168
269
  <div>
169
- <h1>Data Table Example</h1>
270
+ <h1 className="text-xl font-bold mb-4">Data Table with Pagination</h1>
170
271
  <DataTable
171
272
  columns={columns}
172
- data={data}
173
- pageCount={3}
273
+ data={paginatedData}
274
+ pageCount={Math.ceil(data.length / perPage)}
174
275
  page={page}
276
+ perPage={perPage}
175
277
  onPageChange={handlePageChange}
176
- onClick={handleRowClick}
278
+ onPageSizeChange={handlePageSizeChange}
279
+ rowPerPageLabel="Rows per page"
280
+ pageLabel="Page"
281
+ ofLabel="of"
282
+ rowsSelectedLabel="rows selected"
283
+ emptyData={<div>No data available</div>}
177
284
  />
178
285
  </div>
179
286
  );
@@ -181,3 +288,24 @@ const Example = () => {
181
288
 
182
289
  export default Example;
183
290
  ```
291
+
292
+ ---
293
+
294
+ ## 💅 Theming & Styling
295
+
296
+ - Built with **Tailwind CSS**
297
+ - Override styles using your own CSS/Tailwind classes
298
+ - Component APIs are designed to be extensible
299
+
300
+ ---
301
+
302
+ ## 🧪 Example Projects
303
+
304
+ - Vite + React + Tailwind
305
+ - Next.js + TypeScript + shadcn-ui-react
306
+
307
+ ---
308
+
309
+ ## 📝 License
310
+
311
+ Licensed under the [MIT license](https://github.com/blencm/shadcn-ui-react/blob/main/LICENSE).
package/dist/index.cjs CHANGED
@@ -576,10 +576,11 @@ var BreadcrumbEllipsis = (_a) => {
576
576
  };
577
577
  BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
578
578
 
579
- // src/components/button.tsx
579
+ // src/components/Button/button.tsx
580
580
  var import_react_slot2 = require("@radix-ui/react-slot");
581
581
  var import_class_variance_authority3 = require("class-variance-authority");
582
582
  var React5 = __toESM(require("react"), 1);
583
+ var import_lucide_react = require("lucide-react");
583
584
  var import_jsx_runtime6 = require("react/jsx-runtime");
584
585
  var buttonVariants = (0, import_class_variance_authority3.cva)(
585
586
  "inline-flex items-center justify-center 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",
@@ -608,14 +609,40 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
608
609
  );
609
610
  var Button = React5.forwardRef(
610
611
  (_a, ref) => {
611
- var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
612
+ var _b = _a, {
613
+ className,
614
+ variant,
615
+ size,
616
+ asChild = false,
617
+ loading = false,
618
+ loaderClassName,
619
+ children
620
+ } = _b, props = __objRest(_b, [
621
+ "className",
622
+ "variant",
623
+ "size",
624
+ "asChild",
625
+ "loading",
626
+ "loaderClassName",
627
+ "children"
628
+ ]);
612
629
  const Comp = asChild ? import_react_slot2.Slot : "button";
613
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
630
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
614
631
  Comp,
615
- __spreadValues({
616
- className: cn(buttonVariants({ variant, size, className })),
617
- ref
618
- }, props)
632
+ __spreadProps(__spreadValues({
633
+ className: cn(
634
+ buttonVariants({ variant, size }),
635
+ className,
636
+ loading && "relative"
637
+ ),
638
+ ref,
639
+ disabled: loading || props.disabled
640
+ }, props), {
641
+ children: [
642
+ loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Loader2, { className: cn(loaderClassName, "animate-spin mr-2") }) : null,
643
+ children
644
+ ]
645
+ })
619
646
  );
620
647
  }
621
648
  );
@@ -5697,9 +5724,9 @@ var FormField = (_a) => {
5697
5724
  placeholder,
5698
5725
  required,
5699
5726
  className = "px-4 py-6 shadow-inner drop-shadow-xl",
5700
- classNameLabel,
5701
- classNameMessage,
5702
- classNameRequired,
5727
+ labelClassName,
5728
+ messageClassName,
5729
+ requiredClassName,
5703
5730
  rules,
5704
5731
  shouldUnregister,
5705
5732
  defaultValue,
@@ -5711,9 +5738,9 @@ var FormField = (_a) => {
5711
5738
  "placeholder",
5712
5739
  "required",
5713
5740
  "className",
5714
- "classNameLabel",
5715
- "classNameMessage",
5716
- "classNameRequired",
5741
+ "labelClassName",
5742
+ "messageClassName",
5743
+ "requiredClassName",
5717
5744
  "rules",
5718
5745
  "shouldUnregister",
5719
5746
  "defaultValue",
@@ -5733,9 +5760,9 @@ var FormField = (_a) => {
5733
5760
  shouldUnregister,
5734
5761
  defaultValue,
5735
5762
  render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormItem, { children: [
5736
- label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: classNameLabel, children: [
5763
+ label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: labelClassName, children: [
5737
5764
  label,
5738
- required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-red-500", classNameRequired), children: "*" })
5765
+ required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-red-500", requiredClassName), children: "*" })
5739
5766
  ] }),
5740
5767
  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
5741
5768
  Input,
@@ -5749,7 +5776,7 @@ var FormField = (_a) => {
5749
5776
  className
5750
5777
  })
5751
5778
  ) }),
5752
- fieldError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormMessage, { className: classNameMessage, children: fieldError })
5779
+ fieldError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormMessage, { className: messageClassName, children: fieldError })
5753
5780
  ] })
5754
5781
  }
5755
5782
  ) });
@@ -5875,35 +5902,35 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
5875
5902
 
5876
5903
  // src/components/icons.tsx
5877
5904
  var icon = __toESM(require("lucide-react"), 1);
5878
- var import_lucide_react = require("lucide-react");
5905
+ var import_lucide_react2 = require("lucide-react");
5879
5906
  var IconsApp = __spreadValues({
5880
- dashboard: import_lucide_react.LayoutDashboardIcon,
5881
- logo: import_lucide_react.Command,
5882
- login: import_lucide_react.LogIn,
5883
- close: import_lucide_react.X,
5884
- profile: import_lucide_react.User2Icon,
5885
- spinner: import_lucide_react.Loader2,
5886
- kanban: import_lucide_react.CircuitBoardIcon,
5887
- chevronLeft: import_lucide_react.ChevronLeft,
5888
- chevronRight: import_lucide_react.ChevronRight,
5889
- trash: import_lucide_react.Trash,
5890
- employee: import_lucide_react.UserX2Icon,
5891
- post: import_lucide_react.FileText,
5892
- page: import_lucide_react.File,
5893
- media: import_lucide_react.Image,
5894
- settings: import_lucide_react.Settings,
5895
- billing: import_lucide_react.CreditCard,
5896
- ellipsis: import_lucide_react.MoreVertical,
5897
- add: import_lucide_react.Plus,
5898
- warning: import_lucide_react.AlertTriangle,
5899
- user: import_lucide_react.User,
5900
- arrowRight: import_lucide_react.ArrowRight,
5901
- help: import_lucide_react.HelpCircle,
5902
- pizza: import_lucide_react.Pizza,
5903
- sun: import_lucide_react.SunMedium,
5904
- moon: import_lucide_react.Moon,
5905
- laptop: import_lucide_react.Laptop,
5906
- check: import_lucide_react.Check
5907
+ dashboard: import_lucide_react2.LayoutDashboardIcon,
5908
+ logo: import_lucide_react2.Command,
5909
+ login: import_lucide_react2.LogIn,
5910
+ close: import_lucide_react2.X,
5911
+ profile: import_lucide_react2.User2Icon,
5912
+ spinner: import_lucide_react2.Loader2,
5913
+ kanban: import_lucide_react2.CircuitBoardIcon,
5914
+ chevronLeft: import_lucide_react2.ChevronLeft,
5915
+ chevronRight: import_lucide_react2.ChevronRight,
5916
+ trash: import_lucide_react2.Trash,
5917
+ employee: import_lucide_react2.UserX2Icon,
5918
+ post: import_lucide_react2.FileText,
5919
+ page: import_lucide_react2.File,
5920
+ media: import_lucide_react2.Image,
5921
+ settings: import_lucide_react2.Settings,
5922
+ billing: import_lucide_react2.CreditCard,
5923
+ ellipsis: import_lucide_react2.MoreVertical,
5924
+ add: import_lucide_react2.Plus,
5925
+ warning: import_lucide_react2.AlertTriangle,
5926
+ user: import_lucide_react2.User,
5927
+ arrowRight: import_lucide_react2.ArrowRight,
5928
+ help: import_lucide_react2.HelpCircle,
5929
+ pizza: import_lucide_react2.Pizza,
5930
+ sun: import_lucide_react2.SunMedium,
5931
+ moon: import_lucide_react2.Moon,
5932
+ laptop: import_lucide_react2.Laptop,
5933
+ check: import_lucide_react2.Check
5907
5934
  }, icon);
5908
5935
  var Icons = IconsApp;
5909
5936
 
@@ -6288,7 +6315,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
6288
6315
  // src/components/pagination.tsx
6289
6316
  var import_react_icons12 = require("@radix-ui/react-icons");
6290
6317
  var React48 = __toESM(require("react"), 1);
6291
- var import_lucide_react2 = require("lucide-react");
6318
+ var import_lucide_react3 = require("lucide-react");
6292
6319
  var import_jsx_runtime25 = require("react/jsx-runtime");
6293
6320
  var Pagination = (_a) => {
6294
6321
  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -6357,7 +6384,7 @@ var PaginationPreviousLast = (_a) => {
6357
6384
  className: cn("gap-1 pl-2.5", className)
6358
6385
  }, props), {
6359
6386
  children: [
6360
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react2.ChevronLeft, { className: "h-4 w-4" }),
6387
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react3.ChevronLeft, { className: "h-4 w-4" }),
6361
6388
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Previous Last" })
6362
6389
  ]
6363
6390
  })
@@ -6421,7 +6448,7 @@ var PaginationNextLast = (_a) => {
6421
6448
  }, props), {
6422
6449
  children: [
6423
6450
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Next Last" }),
6424
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react2.ChevronRight, { className: "h-4 w-4" })
6451
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react3.ChevronRight, { className: "h-4 w-4" })
6425
6452
  ]
6426
6453
  })
6427
6454
  );
@@ -7531,13 +7558,13 @@ var AlertModal = ({
7531
7558
  };
7532
7559
 
7533
7560
  // src/shared/breadcrumbs.tsx
7534
- var import_lucide_react3 = require("lucide-react");
7561
+ var import_lucide_react4 = require("lucide-react");
7535
7562
  var import_react35 = require("react");
7536
7563
  var import_jsx_runtime47 = require("react/jsx-runtime");
7537
7564
  function Breadcrumbs({ items, className, classNameList }) {
7538
7565
  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Breadcrumb, { className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react35.Fragment, { children: [
7539
7566
  index !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbLink, { href: item.link, children: item.title }) }),
7540
- index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react3.Slash, {}) }),
7567
+ index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react4.Slash, {}) }),
7541
7568
  index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbPage, { children: item.title })
7542
7569
  ] }, item.title)) }) });
7543
7570
  }
@@ -7546,7 +7573,7 @@ function Breadcrumbs({ items, className, classNameList }) {
7546
7573
  var import_react36 = __toESM(require("react"), 1);
7547
7574
  var import_react_icons18 = require("@radix-ui/react-icons");
7548
7575
  var import_react_table = require("@tanstack/react-table");
7549
- var import_lucide_react4 = require("lucide-react");
7576
+ var import_lucide_react5 = require("lucide-react");
7550
7577
  var import_jsx_runtime48 = require("react/jsx-runtime");
7551
7578
  function DataTable({
7552
7579
  columns,
@@ -7558,6 +7585,8 @@ function DataTable({
7558
7585
  rowPerPageLabel = "Rows per page",
7559
7586
  ofLabel = "of",
7560
7587
  pageLabel = "Page",
7588
+ isRowsSelected = true,
7589
+ rowsSelectedLabel = "row(s) selected",
7561
7590
  className,
7562
7591
  emptyData,
7563
7592
  bodyClassName,
@@ -7566,7 +7595,8 @@ function DataTable({
7566
7595
  rowClassName,
7567
7596
  tableClassName,
7568
7597
  onPageChange,
7569
- onClick
7598
+ onClick,
7599
+ onPageSizeChange
7570
7600
  }) {
7571
7601
  const [pagination, setPagination] = import_react36.default.useState({
7572
7602
  pageIndex: Math.max(page - 1, 0),
@@ -7591,9 +7621,9 @@ function DataTable({
7591
7621
  };
7592
7622
  (0, import_react36.useEffect)(() => {
7593
7623
  if (onPageChange) {
7594
- onPageChange(pagination.pageIndex);
7624
+ onPageChange(pagination.pageIndex + 1);
7595
7625
  }
7596
- }, [pagination, setPagination]);
7626
+ }, [pagination]);
7597
7627
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
7598
7628
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
7599
7629
  ScrollArea,
@@ -7635,21 +7665,28 @@ function DataTable({
7635
7665
  ),
7636
7666
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col items-center justify-end gap-2 space-x-2 py-4 sm:flex-row", children: [
7637
7667
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
7638
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
7668
+ isRowsSelected ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
7639
7669
  table.getFilteredSelectedRowModel().rows.length,
7640
7670
  " ",
7641
7671
  ofLabel,
7642
7672
  " ",
7643
7673
  table.getFilteredRowModel().rows.length,
7644
- " row(s) selected."
7645
- ] }),
7674
+ " " + rowsSelectedLabel
7675
+ ] }) : null,
7646
7676
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center space-x-2", children: [
7647
7677
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
7648
7678
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
7649
7679
  Select2,
7650
7680
  {
7651
7681
  value: `${pagination.pageSize}`,
7652
- onValueChange: (value) => setPagination(__spreadProps(__spreadValues({}, pagination), { pageSize: Number(value) })),
7682
+ onValueChange: (value) => {
7683
+ const newSize = Number(value);
7684
+ setPagination(__spreadProps(__spreadValues({}, pagination), {
7685
+ pageSize: newSize,
7686
+ pageIndex: 0
7687
+ }));
7688
+ if (onPageSizeChange) onPageSizeChange(newSize);
7689
+ },
7653
7690
  children: [
7654
7691
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pagination.pageSize }) }),
7655
7692
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
@@ -7690,7 +7727,7 @@ function DataTable({
7690
7727
  pageIndex: pagination.pageIndex - 1
7691
7728
  })),
7692
7729
  disabled: pagination.pageIndex === 0,
7693
- children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.ChevronLeftIcon, { className: "h-4 w-4" })
7730
+ children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.ChevronLeftIcon, { className: "h-4 w-4" })
7694
7731
  }
7695
7732
  ),
7696
7733
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7703,7 +7740,7 @@ function DataTable({
7703
7740
  pageIndex: pagination.pageIndex + 1
7704
7741
  })),
7705
7742
  disabled: pagination.pageIndex + 1 >= pageCount,
7706
- children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.ChevronRightIcon, { className: "h-4 w-4" })
7743
+ children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.ChevronRightIcon, { className: "h-4 w-4" })
7707
7744
  }
7708
7745
  ),
7709
7746
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7765,7 +7802,7 @@ function DataTableSkeleton({
7765
7802
 
7766
7803
  // src/shared/fileupload.tsx
7767
7804
  var import_react_icons19 = require("@radix-ui/react-icons");
7768
- var import_lucide_react5 = require("lucide-react");
7805
+ var import_lucide_react6 = require("lucide-react");
7769
7806
  var import_react37 = require("react");
7770
7807
  var import_react_dropzone = require("react-dropzone");
7771
7808
  var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -7797,7 +7834,7 @@ function FileUpload({
7797
7834
  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", __spreadValues({}, getInputProps())),
7798
7835
  value && !!value.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ImagePreview, { file: value[0] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons19.AvatarIcon, { className: "h-36 w-36 text-gray-100" }),
7799
7836
  /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "absolute -bottom-5 left-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center bg-gray-300 bg-opacity-50 py-1 text-xs font-normal text-muted-foreground ", children: [
7800
- /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react5.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
7837
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react6.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
7801
7838
  label
7802
7839
  ] })
7803
7840
  ] }))