docs: update pagination

Author: segunadebayo

packages/react/src/components/pagination/examples/page-size-control.tsx

@@ -2,7 +2,7 @@ import { Pagination } from '@ark-ui/react/pagination'
 
 export const PageSizeControl = () => {
   return (
-    <Pagination.Root count={100} pageSize={10}>
+    <Pagination.Root count={100} defaultPageSize={10}>
       <Pagination.Context>
         {(pagination) => (
           <div>

packages/solid/src/components/pagination/examples/page-size-control.tsx

@@ -3,7 +3,7 @@ import { For } from 'solid-js'
 
 export const PageSizeControl = () => {
   return (
-    <Pagination.Root count={100} pageSize={10}>
+    <Pagination.Root count={100} defaultPageSize={10}>
       <Pagination.Context>
         {(api) => (
           <div>

packages/svelte/src/lib/components/pagination/examples/page-size-control.svelte

@@ -2,7 +2,7 @@
   import { Pagination } from '@ark-ui/svelte/pagination'
 </script>
 
-<Pagination.Root count={100} pageSize={10}>
+<Pagination.Root count={100} defaultPageSize={10}>
   <Pagination.Context>
     {#snippet render(pagination)}
       <div>

packages/vue/src/components/pagination/examples/page-size-control.vue

@@ -3,7 +3,7 @@ import { Pagination } from '@ark-ui/vue/pagination'
 </script>
 
 <template>
-  <Pagination.Root :count="100" :pageSize="10">
+  <Pagination.Root :count="100" :defaultPageSize="10">
     <Pagination.Context v-slot="pagination">
       <div>
         <div>

website/src/content/pages/components/pagination.mdx

@@ -61,6 +61,9 @@ Display the current page range information using the `pageRange` property. This
 Control the number of items per page dynamically using `setPageSize()`. This example shows how to integrate a native
 select element to change the page size.
 
+> **Note:** For uncontrolled behavior, use `defaultPageSize` to set the initial value. For controlled behavior, use
+> `pageSize` and `onPageSizeChange` to programmatically manage the page size.
+
 <Example id="page-size-control" />
 
 ### Link Pagination