feat(component): add support to customize the default and active classes in button

Author: fabiobiondi

apps/website/src/routes/docs/tailwind/(components)/pagination/index.tsx

@@ -119,6 +119,24 @@ export default component$(() => {
           boundaryCount={boundaryCount.value}
         />
       </div>
+
+      <div class="flex flex-col gap-8">
+        <Pagination
+          pages={pages.value}
+          page={page.value}
+          onPaging$={(newValue: number) => {
+            page.value = newValue;
+          }}
+          showFirstButton={showFirstButton.value}
+          showLastButton={showLastButton.value}
+          hideNextButton={hideNextButton.value}
+          hidePrevButton={hidePrevButton.value}
+          siblingCount={siblingCount.value}
+          boundaryCount={boundaryCount.value}
+          activeClass="!bg-cyan-500"
+          defaultClass="bg-cyan-200"
+        />
+      </div>
     </div>
   );
 });

packages/kit-headless/src/components/pagination/pagination.tsx

@@ -14,7 +14,7 @@ import { Button as HeadlessButton } from '@qwik-ui/primitives';
  * variant: outlined (show border without bg)
  * shape: rounded | square
  * size: 'sm' | 'md' | 'lg'
- * customArrowIcons: { previous, next }
+ * customArrowTexts: { previous, next }
  * paginationRange (see https://mui.com/material-ui/react-pagination/#pagination-ranges)
  *
  * EVENTS
@@ -36,6 +36,8 @@ export interface IRenderPaginationItemProps {
   'aria-current'?: boolean;
   value: TPaginationItemValue;
   key?: string | number;
+  activeClass?: string;
+  defaultClass?: string;
 }
 
 export type TPaginationItemValue =
@@ -75,6 +77,8 @@ export interface IGetPaginationItemsOptions {
   hideNextButton?: boolean;
   showFirstButton?: boolean;
   showLastButton?: boolean;
+  activeClass?: string;
+  defaultClass?: string;
 }
 
 export const getPaginationItems = (
@@ -179,6 +183,8 @@ export const Pagination = component$(
     onPaging$,
     page,
     pages,
+    activeClass,
+    defaultClass,
     ...rest
   }: IPaginationProps) => {
     const pagi = getPaginationItems(page, pages, rest);
@@ -197,6 +203,8 @@ export const Pagination = component$(
                 <RenderDivider key={i} />
               ) : (
                 <RenderItem
+                  activeClass={activeClass}
+                  defaultClass={defaultClass}
                   key={i}
                   onClick$={() =>
                     _onPaging$(

packages/kit-tailwind/src/components/pagination/pagination.tsx

@@ -30,6 +30,8 @@ export const RenderPaginationItem = component$(
     onClick$,
     key,
     value,
+    activeClass,
+    defaultClass,
   }: IRenderPaginationItemProps) => {
     return (
       <Button
@@ -40,6 +42,7 @@ export const RenderPaginationItem = component$(
         key={key}
         active={ariaCurrent}
         circle
+        class={ariaCurrent ? activeClass : defaultClass}
       >
         {value === 'prev' ? '‹' : value === 'next' ? '›' : value}
       </Button>