refactor(pagination): remove styles

Author: fabiobiondi

apps/website/src/routes/docs/headless/(components)/pagination/examples/basic.tsx

@@ -13,6 +13,19 @@ export default component$(() => {
         onPageChange$={(page) => {
           selectedPage.value = page;
         }}
+        class="flex gap-3"
+      />
+
+      <Pagination
+        selectedPage={selectedPage.value}
+        totalPages={totalPages.value}
+        onPageChange$={(page) => {
+          selectedPage.value = page;
+        }}
+        class="flex flex-col items-center gap-2 border border-sky-500"
+        defaultClass=""
+        selectedClass=""
+        dividerClass=""
       />
     </div>
   );

apps/website/src/routes/docs/headless/(components)/pagination/examples/styling.tsx

@@ -18,6 +18,18 @@ export default component$(() => {
         selectedClass="border-2 border-red-500 bg-red-500 p-4"
         dividerClass="p-4"
       />
+
+      <Pagination
+        selectedPage={selectedPage.value}
+        totalPages={totalPages.value}
+        onPageChange$={(page) => {
+          selectedPage.value = page;
+        }}
+        class="border-2 border-white p-2"
+        defaultClass="bg-cyan-400 w-8 h-8"
+        selectedClass="bg-red-500 w-8 h-8"
+        dividerClass="bg-red-300 h-8 px-2"
+      />
     </div>
   );
 });

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

@@ -17,7 +17,6 @@ export const Pagination = component$<PaginationProps>((props) => {
       next: nextButtonLabel = 'NEXT',
     } = {},
     class: _class,
-    gap = '10px',
     defaultClass,
     selectedClass,
     dividerClass,
@@ -39,9 +38,6 @@ export const Pagination = component$<PaginationProps>((props) => {
       data-testid="pagination"
       class={_class}
       style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap,
         pointerEvents: disabled ? 'none' : 'inherit',
       }}
     >