@agentpaid/paid-nextjs-client 0.3.0-test.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +246 -72
  2. package/dist/components/PaidActivityLog.d.ts +11 -24
  3. package/dist/components/PaidActivityLog.d.ts.map +1 -1
  4. package/dist/components/PaidActivityLog.js +53 -26
  5. package/dist/components/PaidActivityLog.js.map +1 -1
  6. package/dist/components/PaidContainer.d.ts +11 -24
  7. package/dist/components/PaidContainer.d.ts.map +1 -1
  8. package/dist/components/PaidContainer.js +18 -9
  9. package/dist/components/PaidContainer.js.map +1 -1
  10. package/dist/components/PaidInvoiceTable.d.ts +11 -24
  11. package/dist/components/PaidInvoiceTable.d.ts.map +1 -1
  12. package/dist/components/PaidInvoiceTable.js +57 -30
  13. package/dist/components/PaidInvoiceTable.js.map +1 -1
  14. package/dist/components/PaidPaymentsTable.d.ts +11 -24
  15. package/dist/components/PaidPaymentsTable.d.ts.map +1 -1
  16. package/dist/components/PaidPaymentsTable.js +58 -28
  17. package/dist/components/PaidPaymentsTable.js.map +1 -1
  18. package/dist/components/components/PaidActivityLog.js +98 -57
  19. package/dist/components/components/PaidContainer.js +42 -32
  20. package/dist/components/components/PaidInvoiceTable.js +103 -86
  21. package/dist/components/components/PaidPaymentsTable.js +107 -69
  22. package/dist/components/components/ui/Pagination.js +168 -0
  23. package/dist/components/ui/Pagination.d.ts +10 -0
  24. package/dist/components/ui/Pagination.d.ts.map +1 -0
  25. package/dist/components/ui/Pagination.js +111 -0
  26. package/dist/components/ui/Pagination.js.map +1 -0
  27. package/dist/index.d.ts +3 -1
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.js +3 -1
  30. package/dist/index.js.map +1 -1
  31. package/dist/styles/activity-log-table.css +94 -78
  32. package/dist/styles/paid-container.css +25 -16
  33. package/dist/styles/paid-invoice-table.css +135 -120
  34. package/dist/styles/paid-payments-table.css +65 -109
  35. package/dist/tsconfig.tsbuildinfo +1 -1
  36. package/dist/utils/cache.js +1 -1
  37. package/dist/utils/cache.js.map +1 -1
  38. package/package.json +1 -1
package/dist/styles/activity-log-table.css CHANGED
@@ -1,111 +1,127 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
2
2
 
3
- /* Container styles */
3
+ /* Activity Log Table Styles */
4
4
  .paid-activity-log-container {
5
- position: relative;
6
- min-width: 0;
7
- font-family: var(--paid-font-family, 'Roboto');
8
- width: 100%;
9
- box-sizing: border-box;
5
+ position: relative;
6
+ min-width: 0;
7
+ font-family: var(--paid-font-family, 'Roboto');
8
+ width: 100%;
9
+ max-width: 100%;
10
+ overflow: hidden;
11
+ box-sizing: border-box;
10
12
  }
11
13
 
12
14
  .paid-activity-log-table-wrapper {
13
- position: relative;
14
- background: var(--paid-wrapper-bg, #fff);
15
- border: var(--paid-wrapper-border, 1px solid #e5e7eb);
16
- border-radius: 12px;
17
- box-shadow: 0 2px 16px 0 rgba(16, 24, 40, 0.08);
18
- overflow-x: auto;
19
- transition: box-shadow 0.2s;
20
- font-family: var(--paid-font-family, 'Roboto');
21
- width: 100%;
22
- min-width: 0;
15
+ position: relative;
16
+ background: var(--paid-table-background-color, #ffffff);
17
+ border: 1px solid #e5e7eb;
18
+ border-radius: 12px;
19
+ box-shadow: 0 2px 16px 0 rgba(16, 24, 40, 0.08);
20
+ overflow-x: auto;
21
+ transition: box-shadow 0.2s;
22
+ font-family: var(--paid-font-family, 'Roboto');
23
+ width: 100%;
24
+ min-width: 0;
23
25
  }
26
+
24
27
  .paid-activity-log-table-wrapper:active {
25
- box-shadow: 0 4px 24px 0 rgba(16, 24, 40, 0.16);
28
+ box-shadow: 0 4px 24px 0 rgba(16, 24, 40, 0.16);
26
29
  }
27
30
 
28
- /* Header styles */
29
31
  .paid-activity-log-header {
30
- display: flex;
31
- justify-content: space-between;
32
- align-items: center;
33
- padding: 18px 24px;
34
- background: var(--paid-header-bg, #fff);
35
- border-bottom: var(--paid-header-border-bottom, 1px solid #e5e7eb);
36
- border-radius: 12px 12px 0 0;
37
- font-family: var(--paid-font-family, 'Roboto');
32
+ display: flex;
33
+ justify-content: space-between;
34
+ align-items: center;
35
+ padding: var(--paid-header-padding, 18px 24px);
36
+ background: var(--paid-container-background-color, #f8f9fa);
37
+ border-bottom: 1px solid #e5e7eb;
38
+ border-radius: 12px 12px 0 0;
39
+ font-family: var(--paid-font-family, 'Roboto');
38
40
  }
41
+
39
42
  .paid-activity-log-title {
40
- font-size: var(--paid-title-font-size, 1.1rem);
41
- font-weight: var(--paid-title-font-weight, 600);
42
- color: var(--paid-title-color, #1d2939);
43
- font-family: var(--paid-font-family, 'Roboto');
44
- }
45
- .paid-activity-log-toggle-btn {
46
- font-size: var(--paid-toggle-font-size, 0.95rem);
47
- font-weight: var(--paid-toggle-font-weight, 500);
48
- color: var(--paid-toggle-color, #2563eb);
49
- background: none;
50
- border: none;
51
- cursor: pointer;
52
- text-decoration: none;
53
- padding: 0;
54
- font-family: var(--paid-font-family, 'Roboto');
55
- }
56
-
57
- /* Table styles */
43
+ margin: 0;
44
+ font-size: var(--paid-h3-font-size, 1.1rem);
45
+ font-weight: 600;
46
+ color: var(--paid-primary-color, #1d2939);
47
+ font-family: var(--paid-font-family, 'Roboto');
48
+ }
49
+
58
50
  .paid-activity-log-table {
59
- width: 100%;
60
- min-width: 0;
61
- table-layout: auto;
62
- word-break: break-word;
63
- border-collapse: separate;
64
- border-spacing: 0;
65
- background: var(--paid-table-bg, #fff);
66
- font-family: var(--paid-font-family, 'Roboto');
51
+ width: 100%;
52
+ min-width: 0;
53
+ table-layout: fixed;
54
+ word-break: break-word;
55
+ border-collapse: separate;
56
+ border-spacing: 0;
57
+ background: var(--paid-table-background-color, #ffffff);
58
+ font-family: var(--paid-font-family, 'Roboto');
59
+ max-width: 100%;
60
+ box-sizing: border-box;
67
61
  }
62
+
68
63
  .paid-activity-log-table th,
69
64
  .paid-activity-log-table td {
70
- padding: 8px 8px;
71
- font-size: 0.95rem;
72
- white-space: normal;
73
- word-break: break-word;
65
+ padding: var(--paid-cell-padding, 8px 8px);
66
+ font-size: var(--paid-paragraph-font-size, 0.95rem);
67
+ white-space: normal;
68
+ word-break: break-word;
69
+ overflow: hidden;
70
+ text-overflow: ellipsis;
74
71
  }
72
+
75
73
  .paid-activity-log-table th {
76
- font-size: var(--paid-th-font-size, 1rem);
77
- font-weight: var(--paid-th-font-weight, 500);
78
- color: var(--paid-th-color, #667085);
79
- text-align: left;
80
- padding: 18px 24px;
81
- background: var(--paid-th-bg, #f9fafb);
82
- border-bottom: var(--paid-th-border-bottom, 1px solid #e5e7eb);
74
+ font-size: var(--paid-paragraph-font-size, 1rem);
75
+ font-weight: 500;
76
+ color: var(--paid-table-header-color, var(--paid-secondary-color, #667085));
77
+ text-align: left;
78
+ padding: var(--paid-header-padding, 18px 24px);
79
+ background: var(--paid-table-header-background-color, #f9fafb);
80
+ border-bottom: 1px solid #e5e7eb;
83
81
  }
82
+
84
83
  .paid-activity-log-table td {
85
- font-size: var(--paid-td-font-size, 0.97rem);
86
- font-weight: var(--paid-td-font-weight, normal);
87
- color: var(--paid-td-color, #1d2939);
88
- background: var(--paid-td-bg, transparent);
89
- padding: 16px 24px;
90
- border-bottom: var(--paid-td-border-bottom, 1px solid #f1f1f1);
84
+ font-size: var(--paid-paragraph-font-size, 0.97rem);
85
+ font-weight: normal;
86
+ color: var(--paid-table-cell-color, var(--paid-primary-color, #1d2939));
87
+ background: transparent;
88
+ padding: var(--paid-cell-padding, 16px 24px);
89
+ border-bottom: 1px solid #f1f1f1;
90
+ vertical-align: middle;
91
91
  }
92
+
92
93
  .paid-activity-log-table tr:last-child td {
93
- border-bottom: none;
94
+ border-bottom: none;
94
95
  }
95
- .paid-activity-log-table tr:hover td {
96
- background: var(--paid-row-hover-bg, #f3f4f6);
96
+
97
+ .paid-activity-log-table tbody tr:hover td {
98
+ background: var(--paid-table-hover-color, #f3f4f6);
97
99
  }
100
+
98
101
  .paid-activity-log-table th,
99
102
  .paid-activity-log-table td {
100
- white-space: nowrap;
103
+ white-space: nowrap;
101
104
  }
102
105
 
103
- /* Empty state */
106
+ /* Empty State */
104
107
  .paid-activity-log-empty {
105
- text-align: center;
106
- color: var(--paid-empty-color, #98a2b3);
107
- padding: 40px 0;
108
- font-size: 1rem;
108
+ text-align: center;
109
+ color: var(--paid-secondary-color, #98a2b3);
110
+ padding: 40px 0;
111
+ font-size: var(--paid-paragraph-font-size, 1rem);
112
+ }
113
+
114
+ /* Responsive Design */
115
+ @media (max-width: 768px) {
116
+ .paid-activity-log-table th,
117
+ .paid-activity-log-table td {
118
+ padding: var(--paid-cell-padding, 12px 16px);
119
+ font-size: var(--paid-paragraph-font-size, 0.8rem);
120
+ }
121
+
122
+ .paid-activity-log-table {
123
+ min-width: 600px;
124
+ }
109
125
  }
110
126
 
111
127
  /* Resize handles */
package/dist/styles/paid-container.css CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  .paid-container-wrapper {
13
13
  position: relative;
14
- background: #f8f9fa;
14
+ background: var(--paid-container-background-color, #f8f9fa);
15
15
  border: 1px solid #e9ecef;
16
16
  border-radius: 8px;
17
17
  overflow: hidden;
@@ -36,17 +36,17 @@
36
36
  }
37
37
 
38
38
  .paid-container-title {
39
- font-size: var(--paid-title-font-size, 1.5rem);
40
- font-weight: var(--paid-title-font-weight, 600);
41
- color: var(--paid-title-color, #1d2939);
39
+ font-size: var(--paid-h2-font-size, 1.5rem);
40
+ font-weight: 600;
41
+ color: var(--paid-primary-color, #1d2939);
42
42
  font-family: var(--paid-font-family, 'Roboto');
43
43
  margin: 0 0 8px 0;
44
44
  line-height: 1.3;
45
45
  }
46
46
 
47
47
  .paid-container-description {
48
- font-size: var(--paid-description-font-size, 0.95rem);
49
- color: var(--paid-description-color, #667085);
48
+ font-size: var(--paid-paragraph-font-size, 0.95rem);
49
+ color: var(--paid-secondary-color, #667085);
50
50
  font-family: var(--paid-font-family, 'Roboto');
51
51
  margin: 0;
52
52
  line-height: 1.4;
@@ -56,17 +56,17 @@
56
56
  .paid-container-tabs {
57
57
  display: flex;
58
58
  gap: 4px;
59
- background: #FAFAFB;
60
- border-radius: 12px;
59
+ background: var(--paid-tab-background-color, #e9ecef);
60
+ border-radius: 16px;
61
61
  min-height: 48px;
62
62
  position: relative;
63
63
  padding: 4px;
64
64
  }
65
65
 
66
66
  .paid-container-tab {
67
- font-size: var(--paid-toggle-font-size, 1rem);
67
+ font-size: var(--paid-paragraph-font-size, 1rem);
68
68
  font-weight: 500;
69
- color: #6B7280;
69
+ color: var(--paid-tab-text-color, var(--paid-secondary-color, #6B7280));
70
70
  background: none;
71
71
  border: none;
72
72
  border-radius: 12px;
@@ -88,20 +88,24 @@
88
88
  }
89
89
 
90
90
  .paid-container-tab:hover {
91
- background: white;
91
+ background: var(--paid-tab-hover-background-color, white);
92
92
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
93
+ color: var(--paid-tab-hover-text-color, var(--paid-hover-color, var(--paid-primary-color, #1d2939)));
93
94
  }
94
95
 
95
96
  .paid-container-tab.active {
96
- color: #1d2939;
97
+ color: var(--paid-tab-active-text-color, var(--paid-primary-color, #1d2939));
97
98
  font-weight: 600;
98
- background: white;
99
+ background: var(--paid-tab-active-background-color, white);
99
100
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
100
101
  }
101
102
 
102
103
  .paid-container-tab:focus {
103
104
  outline: none;
104
- box-shadow: 0 0 0 2px #2563eb;
105
+ }
106
+
107
+ .paid-container-tab:active {
108
+ color: var(--paid-pressed-color, var(--paid-primary-color, #1d2939));
105
109
  }
106
110
 
107
111
  /* Content styles */
@@ -110,6 +114,11 @@
110
114
  font-family: var(--paid-font-family, 'Roboto');
111
115
  }
112
116
 
117
+ /* Add extra spacing when no tabs are present */
118
+ .paid-container-header:not(:has(.paid-container-tabs)) + .paid-container-content {
119
+ padding-top: 24px;
120
+ }
121
+
113
122
  /* Responsive design */
114
123
  @media (max-width: 768px) {
115
124
  .paid-container-header {
@@ -130,10 +139,10 @@
130
139
  }
131
140
 
132
141
  .paid-container-title {
133
- font-size: var(--paid-title-font-size, 1.25rem);
142
+ font-size: var(--paid-h2-font-size, 1.25rem);
134
143
  }
135
144
 
136
145
  .paid-container-description {
137
- font-size: var(--paid-description-font-size, 0.875rem);
146
+ font-size: var(--paid-paragraph-font-size, 0.875rem);
138
147
  }
139
148
  }