@sikka/hawa 0.11.16-next → 0.11.18-next

package/dist/index.d.mts

@@ -466,6 +466,7 @@ type DataTableProps<DataProps = {}> = {
     direction?: "rtl" | "ltr";
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
+    itemsPerPage?: any[];
     showCount?: boolean;
     condensed?: boolean;
     isLoading?: boolean;
@@ -541,6 +542,7 @@ type AccordionItem = {
 declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionRoot: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
 
 type SeparatorProps = {
     className?: string;
@@ -1607,4 +1609,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, StopPropagationWrapper, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, StopPropagationWrapper, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -466,6 +466,7 @@ type DataTableProps<DataProps = {}> = {
     direction?: "rtl" | "ltr";
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
+    itemsPerPage?: any[];
     showCount?: boolean;
     condensed?: boolean;
     isLoading?: boolean;
@@ -541,6 +542,7 @@ type AccordionItem = {
 declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionRoot: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
 
 type SeparatorProps = {
     className?: string;
@@ -1607,4 +1609,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, StopPropagationWrapper, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, StopPropagationWrapper, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -355,6 +355,9 @@ __export(components_exports, {
     AccordionItem: function() {
         return AccordionItem;
     },
+    AccordionRoot: function() {
+        return AccordionRoot;
+    },
     AccordionTrigger: function() {
         return AccordionTrigger;
     },
@@ -5083,7 +5086,7 @@ var DataTable = function(_param) {
         "columns",
         "data"
     ]);
-    var _props_texts, _table_getRowModel_rows, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7, _props_texts8, _props_texts9, _props_texts10;
+    var _props_texts, _props_itemsPerPage, _props_texts1, _table_getRowModel_rows, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6;
     var _React38_useState = _sliced_to_array(React38.useState([
         {
             id: props.defaultSort || "",
@@ -5118,12 +5121,19 @@ var DataTable = function(_param) {
             expanded: expanded
         }
     });
+    var pageText = ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.page) || "page";
+    var itemsPerPageOptions = (_props_itemsPerPage = props.itemsPerPage) === null || _props_itemsPerPage === void 0 ? void 0 : _props_itemsPerPage.map(function(item) {
+        return {
+            label: "".concat(item, " / ").concat(pageText),
+            value: item
+        };
+    });
     return /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4"
     }, /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-items-center"
     }, /* @__PURE__ */ React38.createElement(Input, {
-        placeholder: (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.searchPlaceholder,
+        placeholder: (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.searchPlaceholder,
         value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "",
         onChange: function(event) {
             return setGlobalFilter(event.target.value);
@@ -5161,38 +5171,38 @@ var DataTable = function(_param) {
     }) : /* @__PURE__ */ React38.createElement(TableRow, null, /* @__PURE__ */ React38.createElement(TableCell, {
         colSpan: columns.length,
         className: "hawa-h-24 hawa-text-center"
-    }, (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.noData))))), /* @__PURE__ */ React38.createElement("div", {
+    }, (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.noData))))), /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-items-center hawa-justify-between"
     }, !props.showCount && /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground"
     }), props.showCount && /* @__PURE__ */ React38.createElement("div", {
         className: "text-sm text-muted-foreground",
         dir: props.direction
-    }, /* @__PURE__ */ React38.createElement("span", null, (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.total), " ", /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length)), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", {
+    }, /* @__PURE__ */ React38.createElement("span", null, (_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.total), " ", /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 "
     }, /* @__PURE__ */ React38.createElement(DropdownMenu, {
         size: "sm",
-        width: "parent",
+        width: "sm",
         direction: props.direction,
-        items: [
+        items: itemsPerPageOptions || [
             {
-                label: "10 / ".concat((_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.page),
+                label: "10 / ".concat(pageText),
                 value: 10
             },
             {
-                label: "20 / ".concat((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.page),
+                label: "20 / ".concat(pageText),
                 value: 20
             },
             {
-                label: "30 / ".concat((_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.page),
+                label: "30 / ".concat(pageText),
                 value: 30
             },
             {
-                label: "40 / ".concat((_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.page),
+                label: "40 / ".concat(pageText),
                 value: 40
             },
             {
-                label: "50 / ".concat((_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.page),
+                label: "50 / ".concat(pageText),
                 value: 50
             }
         ],
@@ -5200,7 +5210,7 @@ var DataTable = function(_param) {
             variant: "outline",
             size: "icon",
             className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 "
-        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.page)),
+        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.page)),
         onItemSelect: function(e) {
             return table.setPageSize(Number(e));
         }
@@ -5208,13 +5218,14 @@ var DataTable = function(_param) {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  "
     }, /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-flex hawa-items-center hawa-gap-1"
-    }, /* @__PURE__ */ React38.createElement("div", null, (_props_texts9 = props.texts) === null || _props_texts9 === void 0 ? void 0 : _props_texts9.page), /* @__PURE__ */ React38.createElement("div", {
+    }, /* @__PURE__ */ React38.createElement("div", null, (_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.page), /* @__PURE__ */ React38.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-gap-1"
     }, /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-font-bold"
-    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, (_props_texts10 = props.texts) === null || _props_texts10 === void 0 ? void 0 : _props_texts10.of), /* @__PURE__ */ React38.createElement("span", {
+    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.of), /* @__PURE__ */ React38.createElement("span", {
         className: "hawa-font-bold"
     }, table.getPageCount())))), /* @__PURE__ */ React38.createElement(Button, {
+        "aria-label": "Previous Table Page",
         variant: "outline",
         size: "smallIcon",
         onClick: function() {
@@ -5234,6 +5245,7 @@ var DataTable = function(_param) {
         fillRule: "evenodd",
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
     }))), /* @__PURE__ */ React38.createElement(Button, {
+        "aria-label": "Next Table Page",
         variant: "outline",
         size: "smallIcon",
         onClick: function() {
@@ -5243,12 +5255,12 @@ var DataTable = function(_param) {
         className: cn(props.direction === "rtl" && "hawa-rotate-180")
     }, /* @__PURE__ */ React38.createElement("svg", {
         "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
         fill: "currentColor",
-        strokeWidth: "0",
-        viewBox: "0 0 16 16",
+        stroke: "currentColor",
+        width: "1em",
         height: "1em",
-        width: "1em"
+        strokeWidth: "0",
+        viewBox: "0 0 16 16"
     }, /* @__PURE__ */ React38.createElement("path", {
         fillRule: "evenodd",
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
@@ -5376,6 +5388,7 @@ var AccordionContent = React40.forwardRef(function(_param, ref) /* @__PURE__ */
     }, children));
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var AccordionRoot = AccordionPrimitive.Root;
 // components/elements/Separator.tsx
 var React41 = __toESM(require("react"));
 var Separator2 = function(_param) /* @__PURE__ */ {
@@ -9018,6 +9031,7 @@ function useTabs() {
     Accordion: Accordion,
     AccordionContent: AccordionContent,
     AccordionItem: AccordionItem,
+    AccordionRoot: AccordionRoot,
     AccordionTrigger: AccordionTrigger,
     ActionCard: ActionCard,
     AdCard: AdCard,

package/dist/index.mjs

@@ -4783,6 +4783,11 @@ var DataTable = ({
       expanded
     }
   });
+  const pageText = props.texts?.page || "page";
+  const itemsPerPageOptions = props.itemsPerPage?.map((item) => ({
+    label: `${item} / ${pageText}`,
+    value: item
+  }));
   return /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React38.createElement(
     Input,
     {
@@ -4840,19 +4845,19 @@ var DataTable = ({
     },
     /* @__PURE__ */ React38.createElement("span", null, props.texts?.total),
     " ",
-    /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length)
+    /* @__PURE__ */ React38.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
   ), table.getPageCount() !== 0 && /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, /* @__PURE__ */ React38.createElement(
     DropdownMenu,
     {
       size: "sm",
-      width: "parent",
+      width: "sm",
       direction: props.direction,
-      items: [
-        { label: `10 / ${props.texts?.page}`, value: 10 },
-        { label: `20 / ${props.texts?.page}`, value: 20 },
-        { label: `30 / ${props.texts?.page}`, value: 30 },
-        { label: `40 / ${props.texts?.page}`, value: 40 },
-        { label: `50 / ${props.texts?.page}`, value: 50 }
+      items: itemsPerPageOptions || [
+        { label: `10 / ${pageText}`, value: 10 },
+        { label: `20 / ${pageText}`, value: 20 },
+        { label: `30 / ${pageText}`, value: 30 },
+        { label: `40 / ${pageText}`, value: 40 },
+        { label: `50 / ${pageText}`, value: 50 }
       ],
       trigger: /* @__PURE__ */ React38.createElement(
         Button,
@@ -4868,6 +4873,7 @@ var DataTable = ({
   ), /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  " }, /* @__PURE__ */ React38.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React38.createElement("div", null, props.texts?.page), /* @__PURE__ */ React38.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React38.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React38.createElement("span", null, props.texts?.of), /* @__PURE__ */ React38.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React38.createElement(
     Button,
     {
+      "aria-label": "Previous Table Page",
       variant: "outline",
       size: "smallIcon",
       onClick: () => table.previousPage(),
@@ -4896,6 +4902,7 @@ var DataTable = ({
   ), /* @__PURE__ */ React38.createElement(
     Button,
     {
+      "aria-label": "Next Table Page",
       variant: "outline",
       size: "smallIcon",
       onClick: () => table.nextPage(),
@@ -4906,12 +4913,12 @@ var DataTable = ({
       "svg",
       {
         "aria-label": "Chevron Right Icon",
-        stroke: "currentColor",
         fill: "currentColor",
-        strokeWidth: "0",
-        viewBox: "0 0 16 16",
+        stroke: "currentColor",
+        width: "1em",
         height: "1em",
-        width: "1em"
+        strokeWidth: "0",
+        viewBox: "0 0 16 16"
       },
       /* @__PURE__ */ React38.createElement(
         "path",
@@ -5049,6 +5056,7 @@ var AccordionContent = React40.forwardRef(({ className, children, ...props }, re
   /* @__PURE__ */ React40.createElement("div", { className: "hawa-bg-background  hawa-border hawa-p-4" }, children)
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var AccordionRoot = AccordionPrimitive.Root;
 
 // components/elements/Separator.tsx
 import * as React41 from "react";
@@ -8915,6 +8923,7 @@ export {
   Accordion,
   AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
   ActionCard,
   AdCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.11.16-next",
+  "version": "0.11.18-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {