docs: add pagination component

docs/src/components/Announcement.astro

@@ -2,8 +2,8 @@
 
 ---
 
-<a href="/docs/components/textarea" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
-  <span class="underline-offset-4 group-hover:underline"> New textarea component </span>
+<a href="/docs/components/pagination" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
+  <span class="underline-offset-4 group-hover:underline"> New pagination component </span>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

docs/src/components/CopyButton.astro

@@ -1,11 +1,11 @@
 ---
 import { cn } from '@/lib/utils'
-import { buttonVariants, type ButtonVariant } from '@/registry/new-york/ui/button'
+import { buttonVariants, type UbButtonVariant } from '@/registry/new-york/ui/button'
 
 export interface Props {
   class: string
   value: string
-  variant?: ButtonVariant
+  variant?: UbButtonVariant
 }
 
 const { value, class: className, variant = 'ghost' } = Astro.props

docs/src/config/docs.ts

@@ -146,18 +146,22 @@ export const docsConfig: TDocsConfig = {
         {
           title: 'Dialog',
           href: '/docs/components/dialog',
-          label: 'New',
           items: [],
         },
         {
           title: 'Input',
           href: '/docs/components/input',
           items: [],
         },
+        {
+          title: 'Pagination',
+          href: '/docs/components/pagination',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Progress',
           href: '/docs/components/progress',
-          label: 'New',
           items: [],
         },
         {
@@ -193,13 +197,11 @@ export const docsConfig: TDocsConfig = {
         {
           title: 'Textarea',
           href: '/docs/components/textarea',
-          label: 'New',
           items: [],
         },
         {
           title: 'Toggle',
           href: '/docs/components/toggle',
-          label: 'New',
           items: [],
         },
       ],

docs/src/content/docs/components/pagination.mdx

@@ -0,0 +1,80 @@
+---
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+---
+
+<ComponentPreview
+  name="pagination-demo"
+  description="A pagination with previous and next links."
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add pagination
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="pagination" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  UbPaginationContentDirective,
+  UbPaginationDirective,
+  UbPaginationEllipsisComponent,
+  UbPaginationItemDirective,
+  UbPaginationLinkDirective,
+  UbPaginationNextDirective,
+  UbPaginationPreviousDirective,
+} from "@/components/ui/pagination"
+```
+
+```html
+<nav ubPagination>
+  <ul ubPaginationContent>
+    <li ubPaginationItem>
+      <a href="#" ubPaginationPrevious></a>
+    </li>
+    <li ubPaginationItem>
+      <a ubPaginationLink href="#">1</a>
+    </li>
+    <li ubPaginationItem>
+      <a ubPaginationLink href="#" isActive>2</a>
+    </li>
+    <li ubPaginationItem>
+      <a ubPaginationLink href="#">3</a>
+    </li>
+    <li ubPaginationItem>
+      <ub-pagination-ellipsis />
+    </li>
+    <li ubPaginationItem>
+      <a href="#" ubPaginationNext></a>
+    </li>
+  </ul>
+</nav>
+```

docs/src/registry/default/example/pagination-demo.ts

@@ -0,0 +1,50 @@
+import {
+  UbPaginationContentDirective,
+  UbPaginationDirective,
+  UbPaginationEllipsisComponent,
+  UbPaginationItemDirective,
+  UbPaginationLinkDirective,
+  UbPaginationNextDirective,
+  UbPaginationPreviousDirective,
+} from '@/registry/default/ui/pagination'
+
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[pagination-demo-default]',
+  imports: [
+    UbPaginationContentDirective,
+    UbPaginationDirective,
+    UbPaginationEllipsisComponent,
+    UbPaginationItemDirective,
+    UbPaginationLinkDirective,
+    UbPaginationNextDirective,
+    UbPaginationPreviousDirective,
+  ],
+  template: `
+  <nav ubPagination>
+    <ul ubPaginationContent>
+      <li ubPaginationItem>
+        <a href="#" ubPaginationPrevious></a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#">1</a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#" isActive>2</a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#">3</a>
+      </li>
+      <li ubPaginationItem>
+        <ub-pagination-ellipsis />
+      </li>
+      <li ubPaginationItem>
+        <a href="#" ubPaginationNext></a>
+      </li>
+    </ul>
+  </nav>
+  `,
+})
+export default class PaginationDemoDefault { }

docs/src/registry/default/ui/pagination.ts

@@ -0,0 +1,136 @@
+import { cn } from '@/lib/utils'
+import { buttonVariants, type UbButtonSize } from '@/registry/default/ui/button'
+import { booleanAttribute, Component, computed, Directive, effect, inject, input } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide'
+
+@Directive({
+  standalone: true,
+  selector: 'nav[ubPagination]',
+  host: {
+    'role': 'navigation',
+    'aria-label': 'pagination',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbPaginationDirective {
+  class = input<string>()
+  computedClass = computed(() => cn('mx-auto flex w-full justify-center', this.class()))
+}
+
+@Directive({
+  standalone: true,
+  selector: 'ul[ubPaginationContent]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbPaginationContentDirective {
+  class = input<string>()
+  computedClass = computed(() => cn('flex flex-row items-center gap-1', this.class()))
+}
+
+@Directive({
+  standalone: true,
+  selector: 'li[ubPaginationItem]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbPaginationItemDirective {
+  class = input<string>()
+  computedClass = computed(() => cn('', this.class()))
+}
+
+@Directive({
+  standalone: true,
+  selector: '[ubPaginationLink]',
+  host: {
+    '[aria-current]': 'isActive() ? "page" : undefined',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbPaginationLinkDirective {
+  class = input<string>()
+  isActive = input(false, { transform: booleanAttribute })
+  size = input<UbButtonSize>('icon')
+  computedClass = computed(() => cn(
+    buttonVariants({
+      variant: this.isActive() ? 'outline' : 'ghost',
+      size: this.size(),
+    }),
+    this.class(),
+  ))
+}
+
+@Component({
+  standalone: true,
+  selector: '[ubPaginationPrevious]',
+  imports: [NgIcon],
+  hostDirectives: [UbPaginationLinkDirective],
+  host: {
+    '[class]': 'computedClass()',
+    'aria-label': 'Go to previous page',
+  },
+  providers: [provideIcons({ lucideChevronLeft })],
+  template: `
+  <ng-icon name="lucideChevronLeft" class="w-4 h-4"></ng-icon>
+  <span>Previous</span>
+  `,
+})
+export class UbPaginationPreviousDirective {
+  class = input<string>()
+  computedClass = computed(() => cn('gap-1 pl-2.5', this.class()))
+  protected size = input<UbButtonSize>('default')
+  private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
+
+  setConfig = effect(() => {
+    this.ubPaginationLinkDirective.size = this.size
+  })
+}
+
+@Component({
+  standalone: true,
+  selector: '[ubPaginationNext]',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronRight })],
+  hostDirectives: [UbPaginationLinkDirective],
+  host: {
+    '[class]': 'computedClass()',
+    'aria-label': 'Go to next page',
+  },
+  template: `
+  <span>Next</span>
+  <ng-icon name="lucideChevronRight" class="w-4 h-4"></ng-icon>
+  `,
+})
+export class UbPaginationNextDirective {
+  class = input<string>()
+  computedClass = computed(() => cn('gap-1 pr-2.5', this.class()))
+  protected size = input<UbButtonSize>('default')
+  private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
+
+  setConfig = effect(() => {
+    this.ubPaginationLinkDirective.size = this.size
+  })
+}
+
+@Component({
+  standalone: true,
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideEllipsis })],
+  selector: 'ub-pagination-ellipsis',
+  template: `
+  <span
+    aria-hidden="true"
+    [class]="computedClass()"
+  >
+    <ng-icon name="lucideEllipsis" class="w-4 h-4"></ng-icon>
+    <span class="sr-only">More pages</span>
+  </span>
+  `,
+})
+export class UbPaginationEllipsisComponent {
+  class = input<string>()
+  computedClass = computed(() => cn('flex h-9 w-9 items-center justify-center', this.class()))
+}

docs/src/registry/new-york/example/pagination-demo.ts

@@ -0,0 +1,50 @@
+import {
+  UbPaginationContentDirective,
+  UbPaginationDirective,
+  UbPaginationEllipsisComponent,
+  UbPaginationItemDirective,
+  UbPaginationLinkDirective,
+  UbPaginationNextDirective,
+  UbPaginationPreviousDirective,
+} from '@/registry/new-york/ui/pagination'
+
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[pagination-demo-new-york]',
+  imports: [
+    UbPaginationContentDirective,
+    UbPaginationDirective,
+    UbPaginationEllipsisComponent,
+    UbPaginationItemDirective,
+    UbPaginationLinkDirective,
+    UbPaginationNextDirective,
+    UbPaginationPreviousDirective,
+  ],
+  template: `
+  <nav ubPagination>
+    <ul ubPaginationContent>
+      <li ubPaginationItem>
+        <a href="#" ubPaginationPrevious></a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#">1</a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#" isActive>2</a>
+      </li>
+      <li ubPaginationItem>
+        <a ubPaginationLink href="#">3</a>
+      </li>
+      <li ubPaginationItem>
+        <ub-pagination-ellipsis />
+      </li>
+      <li ubPaginationItem>
+        <a href="#" ubPaginationNext></a>
+      </li>
+    </ul>
+  </nav>
+  `,
+})
+export default class PaginationDemoNewYork { }