@lastbrain/ai-ui-react 1.0.6 → 1.0.7

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 (4) hide show
  1. package/dist/styles.css +52 -28
  2. package/dist/styles.d.ts +3 -3
  3. package/package.json +1 -1
  4. package/src/styles.css +52 -28
package/dist/styles.css CHANGED
@@ -82,30 +82,35 @@
82
82
  right: 0;
83
83
  z-index: 1000;
84
84
  min-width: 200px;
85
- padding: 8px;
86
- background: var(--ai-bg);
87
- border: 1px solid var(--ai-border);
85
+ padding: 16px;
86
+ background: #ffffff;
87
+ border: 1px solid #e5e7eb;
88
88
  border-radius: var(--ai-radius);
89
- box-shadow: var(--ai-shadow-lg);
89
+ box-shadow:
90
+ 0 20px 25px -5px rgb(0 0 0 / 0.1),
91
+ 0 8px 10px -6px rgb(0 0 0 / 0.1);
90
92
  font-size: 12px;
91
93
  animation: fadeIn 0.2s;
94
+ color: #1f2937;
92
95
  }
93
96
 
94
97
  .ai-tooltip--status {
95
- min-width: 280px;
98
+ min-width: 320px;
99
+ max-width: 400px;
96
100
  }
97
101
 
98
102
  .ai-tooltip__header {
99
103
  font-weight: 600;
100
- font-size: 14px;
101
- padding-bottom: 8px;
102
- margin-bottom: 8px;
103
- border-bottom: 1px solid var(--ai-border);
104
+ font-size: 16px;
105
+ padding-bottom: 12px;
106
+ margin-bottom: 12px;
107
+ border-bottom: 1px solid #e5e7eb;
108
+ color: #111827;
104
109
  }
105
110
 
106
111
  .ai-tooltip__section {
107
- padding: 8px 0;
108
- border-top: 1px solid var(--ai-border);
112
+ padding: 12px 0;
113
+ border-top: 1px solid #f3f4f6;
109
114
  }
110
115
 
111
116
  .ai-tooltip__section:first-child {
@@ -114,29 +119,39 @@
114
119
  }
115
120
 
116
121
  .ai-tooltip__subtitle {
117
- font-weight: 500;
118
- margin-bottom: 4px;
119
- font-size: 11px;
122
+ font-weight: 600;
123
+ margin-bottom: 8px;
124
+ font-size: 12px;
125
+ color: #111827;
126
+ text-transform: uppercase;
127
+ letter-spacing: 0.05em;
120
128
  }
121
129
 
122
130
  .ai-tooltip__row {
123
131
  display: flex;
124
132
  justify-content: space-between;
125
- gap: 12px;
126
- margin-bottom: 4px;
133
+ gap: 16px;
134
+ margin-bottom: 6px;
135
+ align-items: center;
127
136
  }
128
137
 
129
138
  .ai-tooltip__label {
130
- color: var(--ai-text-secondary);
139
+ color: #6b7280;
140
+ font-size: 12px;
131
141
  }
132
142
 
133
143
  .ai-tooltip__value {
134
- font-family: monospace;
135
- font-size: 11px;
144
+ font-family:
145
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
146
+ "Courier New", monospace;
147
+ font-size: 12px;
148
+ color: #111827;
149
+ font-weight: 500;
136
150
  }
137
151
 
138
152
  .ai-tooltip__value--bold {
139
- font-weight: 600;
153
+ font-weight: 700;
154
+ color: #111827;
140
155
  }
141
156
 
142
157
  .ai-tooltip__value--capitalize {
@@ -144,33 +159,42 @@
144
159
  }
145
160
 
146
161
  .ai-tooltip__value--success {
147
- color: var(--ai-success);
162
+ color: #10b981;
163
+ font-weight: 600;
148
164
  }
149
165
 
150
166
  .ai-tooltip__value--warning {
151
- color: var(--ai-warning);
167
+ color: #f59e0b;
168
+ font-weight: 600;
152
169
  }
153
170
 
154
171
  .ai-tooltip__actions {
155
172
  display: flex;
156
173
  gap: 8px;
157
174
  justify-content: space-between;
158
- padding-top: 8px;
175
+ padding-top: 12px;
176
+ margin-top: 8px;
177
+ border-top: 1px solid #f3f4f6;
159
178
  }
160
179
 
161
180
  .ai-tooltip__link {
162
181
  flex: 1;
163
182
  text-align: center;
164
- padding: 4px 8px;
165
- color: var(--ai-primary);
183
+ padding: 6px 12px;
184
+ color: #3b82f6;
166
185
  text-decoration: none;
167
- border-radius: 4px;
168
- transition: background 0.2s;
186
+ border-radius: 6px;
187
+ transition: all 0.2s;
169
188
  font-size: 11px;
189
+ font-weight: 500;
190
+ background: #eff6ff;
191
+ border: 1px solid #dbeafe;
170
192
  }
171
193
 
172
194
  .ai-tooltip__link:hover {
173
- background: var(--ai-bg-hover);
195
+ background: #dbeafe;
196
+ border-color: #3b82f6;
197
+ transform: translateY(-1px);
174
198
  }
175
199
 
176
200
  @keyframes fadeIn {
package/dist/styles.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Import this file in your app entry point to load the default styles
3
- *
3
+ *
4
4
  * Example (Next.js app/layout.tsx):
5
5
  * import "@lastbrain/ai-ui-react/styles.css"
6
- *
6
+ *
7
7
  * Example (Vite/React main.tsx):
8
8
  * import "@lastbrain/ai-ui-react/styles.css"
9
- *
9
+ *
10
10
  * Example (Create React App App.tsx):
11
11
  * import "@lastbrain/ai-ui-react/styles.css"
12
12
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lastbrain/ai-ui-react",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Headless React components for LastBrain AI UI Kit",
5
5
  "private": false,
6
6
  "type": "module",
package/src/styles.css CHANGED
@@ -82,30 +82,35 @@
82
82
  right: 0;
83
83
  z-index: 1000;
84
84
  min-width: 200px;
85
- padding: 8px;
86
- background: var(--ai-bg);
87
- border: 1px solid var(--ai-border);
85
+ padding: 16px;
86
+ background: #ffffff;
87
+ border: 1px solid #e5e7eb;
88
88
  border-radius: var(--ai-radius);
89
- box-shadow: var(--ai-shadow-lg);
89
+ box-shadow:
90
+ 0 20px 25px -5px rgb(0 0 0 / 0.1),
91
+ 0 8px 10px -6px rgb(0 0 0 / 0.1);
90
92
  font-size: 12px;
91
93
  animation: fadeIn 0.2s;
94
+ color: #1f2937;
92
95
  }
93
96
 
94
97
  .ai-tooltip--status {
95
- min-width: 280px;
98
+ min-width: 320px;
99
+ max-width: 400px;
96
100
  }
97
101
 
98
102
  .ai-tooltip__header {
99
103
  font-weight: 600;
100
- font-size: 14px;
101
- padding-bottom: 8px;
102
- margin-bottom: 8px;
103
- border-bottom: 1px solid var(--ai-border);
104
+ font-size: 16px;
105
+ padding-bottom: 12px;
106
+ margin-bottom: 12px;
107
+ border-bottom: 1px solid #e5e7eb;
108
+ color: #111827;
104
109
  }
105
110
 
106
111
  .ai-tooltip__section {
107
- padding: 8px 0;
108
- border-top: 1px solid var(--ai-border);
112
+ padding: 12px 0;
113
+ border-top: 1px solid #f3f4f6;
109
114
  }
110
115
 
111
116
  .ai-tooltip__section:first-child {
@@ -114,29 +119,39 @@
114
119
  }
115
120
 
116
121
  .ai-tooltip__subtitle {
117
- font-weight: 500;
118
- margin-bottom: 4px;
119
- font-size: 11px;
122
+ font-weight: 600;
123
+ margin-bottom: 8px;
124
+ font-size: 12px;
125
+ color: #111827;
126
+ text-transform: uppercase;
127
+ letter-spacing: 0.05em;
120
128
  }
121
129
 
122
130
  .ai-tooltip__row {
123
131
  display: flex;
124
132
  justify-content: space-between;
125
- gap: 12px;
126
- margin-bottom: 4px;
133
+ gap: 16px;
134
+ margin-bottom: 6px;
135
+ align-items: center;
127
136
  }
128
137
 
129
138
  .ai-tooltip__label {
130
- color: var(--ai-text-secondary);
139
+ color: #6b7280;
140
+ font-size: 12px;
131
141
  }
132
142
 
133
143
  .ai-tooltip__value {
134
- font-family: monospace;
135
- font-size: 11px;
144
+ font-family:
145
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
146
+ "Courier New", monospace;
147
+ font-size: 12px;
148
+ color: #111827;
149
+ font-weight: 500;
136
150
  }
137
151
 
138
152
  .ai-tooltip__value--bold {
139
- font-weight: 600;
153
+ font-weight: 700;
154
+ color: #111827;
140
155
  }
141
156
 
142
157
  .ai-tooltip__value--capitalize {
@@ -144,33 +159,42 @@
144
159
  }
145
160
 
146
161
  .ai-tooltip__value--success {
147
- color: var(--ai-success);
162
+ color: #10b981;
163
+ font-weight: 600;
148
164
  }
149
165
 
150
166
  .ai-tooltip__value--warning {
151
- color: var(--ai-warning);
167
+ color: #f59e0b;
168
+ font-weight: 600;
152
169
  }
153
170
 
154
171
  .ai-tooltip__actions {
155
172
  display: flex;
156
173
  gap: 8px;
157
174
  justify-content: space-between;
158
- padding-top: 8px;
175
+ padding-top: 12px;
176
+ margin-top: 8px;
177
+ border-top: 1px solid #f3f4f6;
159
178
  }
160
179
 
161
180
  .ai-tooltip__link {
162
181
  flex: 1;
163
182
  text-align: center;
164
- padding: 4px 8px;
165
- color: var(--ai-primary);
183
+ padding: 6px 12px;
184
+ color: #3b82f6;
166
185
  text-decoration: none;
167
- border-radius: 4px;
168
- transition: background 0.2s;
186
+ border-radius: 6px;
187
+ transition: all 0.2s;
169
188
  font-size: 11px;
189
+ font-weight: 500;
190
+ background: #eff6ff;
191
+ border: 1px solid #dbeafe;
170
192
  }
171
193
 
172
194
  .ai-tooltip__link:hover {
173
- background: var(--ai-bg-hover);
195
+ background: #dbeafe;
196
+ border-color: #3b82f6;
197
+ transform: translateY(-1px);
174
198
  }
175
199
 
176
200
  @keyframes fadeIn {