From 5d65cecf52b526f1c975c2282a7f1e23e699884a Mon Sep 17 00:00:00 2001
From: unkn0wn <louis1.potevin1@gmail.com>
Date: Thu, 18 Jun 2026 13:51:31 +0200
Subject: [PATCH] feat: add Pagination and PaginationNumber components with
 styles and integration into index page

---
 src/components/index.ts                       |  6 ++--
 src/components/pagination/_pagination.scss    |  6 ++++
 .../pagination/_paginationNumber.scss         | 26 ++++++++++++++
 src/components/pagination/pagination.astro    | 36 +++++++++++++++++++
 .../pagination/paginationNumber.astro         | 20 +++++++++++
 src/pages/index.astro                         | 14 ++++++++
 6 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 src/components/pagination/_pagination.scss
 create mode 100644 src/components/pagination/_paginationNumber.scss
 create mode 100644 src/components/pagination/pagination.astro
 create mode 100644 src/components/pagination/paginationNumber.astro

diff --git a/src/components/index.ts b/src/components/index.ts
index 37b14e3..f4197a6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,3 @@
-// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
-
 export * from './Icons/index.ts';
 export { default as Notification } from './Notifications/notification.astro';
 export { default as Toggle }       from './Toggle/toggle.astro';
@@ -16,4 +14,6 @@ export { default as NumericStepper } from './numericStepper/numericStepper.astro
 export { default as Avatar } from './Avatar/avatar.astro';
 export { default as Select } from './Select/select.astro';
 export { default as SelectOption } from './Select/selectOption.astro';
-export { default as TextField } from './textField/textField.astro';
\ No newline at end of file
+export { default as TextField } from './textField/textField.astro';
+export { default as Pagination } from './pagination/pagination.astro';
+export { default as PaginationNumber } from './pagination/paginationNumber.astro';
\ No newline at end of file
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
new file mode 100644
index 0000000..cb6fd0b
--- /dev/null
+++ b/src/components/pagination/_pagination.scss
@@ -0,0 +1,6 @@
+@use '../../styles/tokens/typography' as *;
+
+.pagination {
+    display: flex;
+    gap: var(--nds-spacing-sm);
+}
\ No newline at end of file
diff --git a/src/components/pagination/_paginationNumber.scss b/src/components/pagination/_paginationNumber.scss
new file mode 100644
index 0000000..b78cb97
--- /dev/null
+++ b/src/components/pagination/_paginationNumber.scss
@@ -0,0 +1,26 @@
+@use '../../styles/tokens/typography' as *;
+
+.pagination-number {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--nds-radius-full);
+  &:hover:not(.pagination-number__disabled):not(.pagination-number__selected) {
+    background-color: var(--nds-secondary);
+    cursor: pointer;
+  }
+  &:active:not(.pagination-number__disabled):not(.pagination-number__selected) {
+    background-color: var(--nds-accent);
+    cursor: pointer;
+  }
+  &__disabled {
+    background-color: var(--nds-disabled);
+    cursor: not-allowed;
+  }
+  &__selected {
+    background-color: var(--nds-primary);
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/components/pagination/pagination.astro b/src/components/pagination/pagination.astro
new file mode 100644
index 0000000..dd0778a
--- /dev/null
+++ b/src/components/pagination/pagination.astro
@@ -0,0 +1,36 @@
+---
+export interface Props {
+  defaultPage?: number;
+}
+
+const { defaultPage = 1 } = Astro.props;
+---
+
+<div class="pagination" data-current={defaultPage}>
+  <slot/>
+</div>
+
+<script>
+  const pagination = document.querySelector('.pagination');
+  const numbers = pagination?.querySelectorAll('.pagination-number');
+
+  numbers?.forEach((el) => {
+    if (
+      !el.classList.contains('pagination-number__disabled') &&
+      el.textContent?.trim() === pagination?.getAttribute('data-current')
+    ) {
+      el.classList.add('pagination-number__selected');
+    }
+
+    el.addEventListener('click', () => {
+      if (el.classList.contains('pagination-number__disabled')) return;
+      numbers.forEach(n => n.classList.remove('pagination-number__selected'));
+      el.classList.add('pagination-number__selected');
+      pagination?.setAttribute('data-current', el.textContent?.trim() ?? '');
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './pagination';
+</style>
\ No newline at end of file
diff --git a/src/components/pagination/paginationNumber.astro b/src/components/pagination/paginationNumber.astro
new file mode 100644
index 0000000..64118e3
--- /dev/null
+++ b/src/components/pagination/paginationNumber.astro
@@ -0,0 +1,20 @@
+---
+export interface Props {
+  disabled?: boolean;
+}
+
+const { disabled } = Astro.props;
+
+const classes = [
+  'pagination-number',
+  disabled ? 'pagination-number__disabled' : ''
+].filter(Boolean).join(' ');
+---
+
+<div class={classes}>
+  <slot/>
+</div>
+
+<style lang="scss">
+@use './paginationNumber';
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 211f441..7342858 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,6 +16,8 @@ import Avatar from '../components/Avatar/avatar.astro';
 import Select from '../components/Select/select.astro';
 import SelectOption from '../components/Select/selectOption.astro';
 import TextField from '../components/textField/textField.astro';
+import Pagination from '../components/pagination/pagination.astro';
+import PaginationNumber from '../components/pagination/paginationNumber.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -30,6 +32,18 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Pagination</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Pagination defaultPage={3}>
+          <PaginationNumber>1</PaginationNumber>
+          <PaginationNumber>2</PaginationNumber>
+          <PaginationNumber>3</PaginationNumber>
+          <PaginationNumber>4</PaginationNumber>
+          <PaginationNumber disabled>5</PaginationNumber>
+        </Pagination>
+      </div>
+    </section>
     <section>
       <h2>TextField</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">