1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18

import { Pagination } from "@gunkin/uiify";

export default function Example() {
  return (
    <Pagination.Root
      className=""
      count={20}
      defaultPage={5}
      slotProps={{
        list: { className: "" },
        item: { className: "" },
        link: { className: " " },
        control: { className: " " },
        ellipsis: { className: "" },
      }}
    />
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60

@layer components {
  [data-uiify-pagination] ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  [data-uiify-pagination] li {
    display: grid;
    place-items: center;
  }

  /* Page links and the previous/next controls are Button-skinned (`ghost`); the current
     page is the selected one. Links stay links, so only the pointer is restored here. */
  [data-uiify-pagination] [data-type="ellipsis"] {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--control-md);
    color: var(--muted-foreground);
  }
  [data-uiify-pagination] span[data-uiify-button]:not([data-disabled]) {
    cursor: default;
  }

  /* Previous/next chevron: a rotated corner of a bordered box on the empty control's
     ::before (the ghost Button leaves it free). Mirrors in RTL through --turn. */
  [data-uiify-pagination] :is([data-type="previous"], [data-type="next"]):empty {
    --uiify-pagination-turn: 1;

    &:dir(rtl) {
      --uiify-pagination-turn: -1;
    }

    &::before {
      all: unset;
      content: "";
      box-sizing: border-box;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      border: 0 solid currentcolor;
      rotate: calc(-45deg * var(--uiify-pagination-turn));
    }

    &[data-type="previous"]::before {
      border-block-start-width: 2px;
      border-inline-start-width: 2px;
      translate: calc(0.14rem * var(--uiify-pagination-turn));
    }

    &[data-type="next"]::before {
      border-block-end-width: 2px;
      border-inline-end-width: 2px;
      translate: calc(-0.14rem * var(--uiify-pagination-turn));
    }
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

import { Pagination } from "@gunkin/uiify";

export default function Example() {
  return (
    <Pagination.Root
      className=""
      count={20}
      defaultPage={5}
      slotProps={{
        list: { className: "flex flex-wrap items-center justify-center [gap:0.25rem] list-none p-0 m-0" },
        item: { className: "grid place-items-center" },
        link: {
          className:
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[length:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-transparent text-foreground before:content-none after:content-none hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] ",
        },
        control: {
          className:
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[length:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-transparent text-foreground before:content-none after:content-none hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] not-data-[disabled]:cursor-default [--uiify-pagination-turn:1] rtl:[--uiify-pagination-turn:-1] empty:before:[all:unset] empty:before:content-[''] empty:before:box-border empty:before:[inline-size:0.5rem] empty:before:[block-size:0.5rem] empty:before:[border:0_solid_currentcolor] empty:before:[rotate:calc(-45deg*var(--uiify-pagination-turn))] data-[type=previous]:empty:before:[border-block-start-width:2px] data-[type=previous]:empty:before:[border-inline-start-width:2px] data-[type=previous]:empty:before:[translate:calc(0.14rem*var(--uiify-pagination-turn))] data-[type=next]:empty:before:[border-block-end-width:2px] data-[type=next]:empty:before:[border-inline-end-width:2px] data-[type=next]:empty:before:[translate:calc(-0.14rem*var(--uiify-pagination-turn))]",
        },
        ellipsis: {
          className: "inline-grid place-items-center [min-inline-size:var(--control-md)] " + "text-muted-foreground",
        },
      }}
    />
  );
}