shadcn-ui-react 0.2.8 → 0.3.1

package/dist/index.cjs

@@ -576,10 +576,11 @@ var BreadcrumbEllipsis = (_a) => {
 };
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
-// src/components/button.tsx
+// src/components/Button/button.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
 var React5 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority3.cva)(
   "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)(
 );
 var Button = React5.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    var _b = _a, {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      loaderClassName,
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "size",
+      "asChild",
+      "loading",
+      "loaderClassName",
+      "children"
+    ]);
     const Comp = asChild ? import_react_slot2.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Comp,
-      __spreadValues({
-        className: cn(buttonVariants({ variant, size, className })),
-        ref
-      }, props)
+      __spreadProps(__spreadValues({
+        className: cn(
+          buttonVariants({ variant, size }),
+          className,
+          loading && "relative"
+        ),
+        ref,
+        disabled: loading || props.disabled
+      }, props), {
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Loader2, { className: cn(loaderClassName, "animate-spin mr-2") }) : null,
+          children
+        ]
+      })
     );
   }
 );
@@ -5646,7 +5673,7 @@ var import_class_variance_authority4 = require("class-variance-authority");
 var React41 = __toESM(require("react"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority4.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
 );
 var Label3 = React41.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -5685,6 +5712,7 @@ var Input = React42.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormFieldContext = import_react33.default.createContext(
   null
@@ -5695,11 +5723,11 @@ var FormField = (_a) => {
     control,
     label,
     placeholder,
-    required,
+    requiredLabel,
     className = "px-4 py-6 shadow-inner drop-shadow-xl",
-    classNameLabel,
-    classNameMessage,
-    classNameRequired,
+    labelClassName,
+    messageClassName,
+    requiredLabelClassName,
     rules,
     shouldUnregister,
     defaultValue,
@@ -5709,11 +5737,11 @@ var FormField = (_a) => {
     "control",
     "label",
     "placeholder",
-    "required",
+    "requiredLabel",
     "className",
-    "classNameLabel",
-    "classNameMessage",
-    "classNameRequired",
+    "labelClassName",
+    "messageClassName",
+    "requiredLabelClassName",
     "rules",
     "shouldUnregister",
     "defaultValue",
@@ -5733,9 +5761,17 @@ var FormField = (_a) => {
       shouldUnregister,
       defaultValue,
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormItem, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: classNameLabel, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormLabel, { className: cn("flex items-center self-center gap-0", labelClassName), children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-red-500", classNameRequired), children: "*" })
+          requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_lucide_react2.Asterisk,
+            {
+              className: cn(
+                "h-3 w-3 text-red-500 ml-[1px]",
+                requiredLabelClassName
+              )
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Input,
@@ -5745,11 +5781,10 @@ var FormField = (_a) => {
               onChange == null ? void 0 : onChange(e.target.value);
             },
             placeholder,
-            required,
             className
           })
         ) }),
-        fieldError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormMessage, { className: classNameMessage, children: fieldError })
+        fieldError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormMessage, { className: messageClassName, children: fieldError })
       ] })
     }
   ) });
@@ -5875,35 +5910,35 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/icons.tsx
 var icon = __toESM(require("lucide-react"), 1);
-var import_lucide_react = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var IconsApp = __spreadValues({
-  dashboard: import_lucide_react.LayoutDashboardIcon,
-  logo: import_lucide_react.Command,
-  login: import_lucide_react.LogIn,
-  close: import_lucide_react.X,
-  profile: import_lucide_react.User2Icon,
-  spinner: import_lucide_react.Loader2,
-  kanban: import_lucide_react.CircuitBoardIcon,
-  chevronLeft: import_lucide_react.ChevronLeft,
-  chevronRight: import_lucide_react.ChevronRight,
-  trash: import_lucide_react.Trash,
-  employee: import_lucide_react.UserX2Icon,
-  post: import_lucide_react.FileText,
-  page: import_lucide_react.File,
-  media: import_lucide_react.Image,
-  settings: import_lucide_react.Settings,
-  billing: import_lucide_react.CreditCard,
-  ellipsis: import_lucide_react.MoreVertical,
-  add: import_lucide_react.Plus,
-  warning: import_lucide_react.AlertTriangle,
-  user: import_lucide_react.User,
-  arrowRight: import_lucide_react.ArrowRight,
-  help: import_lucide_react.HelpCircle,
-  pizza: import_lucide_react.Pizza,
-  sun: import_lucide_react.SunMedium,
-  moon: import_lucide_react.Moon,
-  laptop: import_lucide_react.Laptop,
-  check: import_lucide_react.Check
+  dashboard: import_lucide_react3.LayoutDashboardIcon,
+  logo: import_lucide_react3.Command,
+  login: import_lucide_react3.LogIn,
+  close: import_lucide_react3.X,
+  profile: import_lucide_react3.User2Icon,
+  spinner: import_lucide_react3.Loader2,
+  kanban: import_lucide_react3.CircuitBoardIcon,
+  chevronLeft: import_lucide_react3.ChevronLeft,
+  chevronRight: import_lucide_react3.ChevronRight,
+  trash: import_lucide_react3.Trash,
+  employee: import_lucide_react3.UserX2Icon,
+  post: import_lucide_react3.FileText,
+  page: import_lucide_react3.File,
+  media: import_lucide_react3.Image,
+  settings: import_lucide_react3.Settings,
+  billing: import_lucide_react3.CreditCard,
+  ellipsis: import_lucide_react3.MoreVertical,
+  add: import_lucide_react3.Plus,
+  warning: import_lucide_react3.AlertTriangle,
+  user: import_lucide_react3.User,
+  arrowRight: import_lucide_react3.ArrowRight,
+  help: import_lucide_react3.HelpCircle,
+  pizza: import_lucide_react3.Pizza,
+  sun: import_lucide_react3.SunMedium,
+  moon: import_lucide_react3.Moon,
+  laptop: import_lucide_react3.Laptop,
+  check: import_lucide_react3.Check
 }, icon);
 var Icons = IconsApp;
 
@@ -6288,7 +6323,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 // src/components/pagination.tsx
 var import_react_icons12 = require("@radix-ui/react-icons");
 var React48 = __toESM(require("react"), 1);
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Pagination = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -6357,7 +6392,7 @@ var PaginationPreviousLast = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react2.ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Previous Last" })
       ]
     })
@@ -6421,7 +6456,7 @@ var PaginationNextLast = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Next Last" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react2.ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" })
       ]
     })
   );
@@ -7531,13 +7566,13 @@ var AlertModal = ({
 };
 
 // src/shared/breadcrumbs.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_react35 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Breadcrumbs({ items, className, classNameList }) {
   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: [
     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 }) }),
-    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react3.Slash, {}) }),
+    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react5.Slash, {}) }),
     index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbPage, { children: item.title })
   ] }, item.title)) }) });
 }
@@ -7546,7 +7581,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 var import_react36 = __toESM(require("react"), 1);
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function DataTable({
   columns,
@@ -7558,6 +7593,8 @@ function DataTable({
   rowPerPageLabel = "Rows per page",
   ofLabel = "of",
   pageLabel = "Page",
+  isRowsSelected = true,
+  rowsSelectedLabel = "row(s) selected",
   className,
   emptyData,
   bodyClassName,
@@ -7566,7 +7603,8 @@ function DataTable({
   rowClassName,
   tableClassName,
   onPageChange,
-  onClick
+  onClick,
+  onPageSizeChange
 }) {
   const [pagination, setPagination] = import_react36.default.useState({
     pageIndex: Math.max(page - 1, 0),
@@ -7591,9 +7629,9 @@ function DataTable({
   };
   (0, import_react36.useEffect)(() => {
     if (onPageChange) {
-      onPageChange(pagination.pageIndex);
+      onPageChange(pagination.pageIndex + 1);
     }
-  }, [pagination, setPagination]);
+  }, [pagination]);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       ScrollArea,
@@ -7635,21 +7673,28 @@ function DataTable({
     ),
     /* @__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: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+        isRowsSelected ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
           table.getFilteredSelectedRowModel().rows.length,
           " ",
           ofLabel,
           " ",
           table.getFilteredRowModel().rows.length,
-          " row(s) selected."
-        ] }),
+          " " + rowsSelectedLabel
+        ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
             Select2,
             {
               value: `${pagination.pageSize}`,
-              onValueChange: (value) => setPagination(__spreadProps(__spreadValues({}, pagination), { pageSize: Number(value) })),
+              onValueChange: (value) => {
+                const newSize = Number(value);
+                setPagination(__spreadProps(__spreadValues({}, pagination), {
+                  pageSize: newSize,
+                  pageIndex: 0
+                }));
+                if (onPageSizeChange) onPageSizeChange(newSize);
+              },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pagination.pageSize }) }),
                 /* @__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 +7735,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex - 1
               })),
               disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.ChevronLeftIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7703,7 +7748,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex + 1
               })),
               disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react4.ChevronRightIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -7765,7 +7810,7 @@ function DataTableSkeleton({
 
 // src/shared/fileupload.tsx
 var import_react_icons19 = require("@radix-ui/react-icons");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_react37 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -7797,7 +7842,7 @@ function FileUpload({
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", __spreadValues({}, getInputProps())),
         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" }),
         /* @__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: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react5.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react7.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
           label
         ] })
       ] }))

package/dist/index.d.cts

@@ -92,6 +92,8 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    loading?: boolean;
+    loaderClassName?: string;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -314,14 +316,14 @@ type CustomFormFieldProps<TFieldValues extends FieldValues, TName extends FieldP
     control?: Control<TFieldValues, any, TFieldValues>;
     placeholder?: string;
     className?: string;
-    classNameLabel?: string;
-    classNameMessage?: string;
-    classNameRequired?: string;
+    labelClassName?: string;
+    messageClassName?: string;
+    requiredLabelClassName?: string;
     label?: string;
-    required?: boolean;
+    requiredLabel?: boolean;
     onChange?: (value: string) => void;
 } & React__default.InputHTMLAttributes<HTMLInputElement>;
-declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, required, className, classNameLabel, classNameMessage, classNameRequired, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, labelClassName, messageClassName, requiredLabelClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const FormItem: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const FormLabel: React__default.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const useFormField: () => {
@@ -517,7 +519,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => react_jsx_runtime.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -726,17 +728,20 @@ interface DataTableProps<TData, TValue> {
     page?: number;
     perPage?: number;
     onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
     onClick?: (row: TData) => void;
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     pageSizeOptions?: number[];
     pageCount: number;
+    isRowsSelected?: boolean;
+    rowsSelectedLabel?: string;
     rowPerPageLabel?: string;
     pageLabel?: string;
     ofLabel?: string;
     emptyData?: React__default.ReactNode;
 }
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;

package/dist/index.d.ts

@@ -92,6 +92,8 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    loading?: boolean;
+    loaderClassName?: string;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -314,14 +316,14 @@ type CustomFormFieldProps<TFieldValues extends FieldValues, TName extends FieldP
     control?: Control<TFieldValues, any, TFieldValues>;
     placeholder?: string;
     className?: string;
-    classNameLabel?: string;
-    classNameMessage?: string;
-    classNameRequired?: string;
+    labelClassName?: string;
+    messageClassName?: string;
+    requiredLabelClassName?: string;
     label?: string;
-    required?: boolean;
+    requiredLabel?: boolean;
     onChange?: (value: string) => void;
 } & React__default.InputHTMLAttributes<HTMLInputElement>;
-declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, required, className, classNameLabel, classNameMessage, classNameRequired, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, control, label, placeholder, requiredLabel, className, labelClassName, messageClassName, requiredLabelClassName, rules, shouldUnregister, defaultValue, onChange, ...inputProps }: CustomFormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const FormItem: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const FormLabel: React__default.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const useFormField: () => {
@@ -517,7 +519,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => react_jsx_runtime.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -726,17 +728,20 @@ interface DataTableProps<TData, TValue> {
     page?: number;
     perPage?: number;
     onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
     onClick?: (row: TData) => void;
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     pageSizeOptions?: number[];
     pageCount: number;
+    isRowsSelected?: boolean;
+    rowsSelectedLabel?: string;
     rowPerPageLabel?: string;
     pageLabel?: string;
     ofLabel?: string;
     emptyData?: React__default.ReactNode;
 }
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;