@ohhwells/bridge 0.1.15 → 0.1.16-next.8

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 (7) hide show
  1. package/README.md +198 -70
  2. package/dist/index.cjs +94 -16
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +90 -12
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +112 -88
  7. package/package.json +3 -1
package/dist/styles.css CHANGED
@@ -8,52 +8,25 @@
8
8
  --text-xs--line-height: 16px;
9
9
  --text-sm: 14px;
10
10
  --text-sm--line-height: 20px;
11
- --text-base: 16px;
12
- --text-base--line-height: 24px;
13
- --text-lg: 18px;
14
- --text-lg--line-height: 28px;
15
- --text-xl: 20px;
16
- --text-xl--line-height: 28px;
17
- --text-2xl: 24px;
18
- --text-2xl--line-height: 32px;
19
- --text-3xl: 30px;
20
- --text-3xl--line-height: 36px;
21
- --text-4xl: 36px;
22
- --text-4xl--line-height: 40px;
23
- --text-5xl: 48px;
24
- --text-5xl--line-height: 1;
25
- --text-6xl: 60px;
26
- --text-6xl--line-height: 1;
27
- --text-7xl: 72px;
28
- --text-7xl--line-height: 1;
29
- --text-8xl: 96px;
30
- --text-8xl--line-height: 1;
31
- --text-9xl: 128px;
32
- --text-9xl--line-height: 1;
33
11
  --font-weight-medium: 500;
12
+ --font-weight-semibold: 600;
34
13
  --radius-md: 6px;
35
14
  --default-transition-duration: 150ms;
36
15
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
16
+ --color-primary: var(--ohw-primary, #0885FE);
17
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
37
18
  --color-background: var(--ohw-background, #ffffff);
38
19
  --color-foreground: var(--ohw-foreground, #020617);
20
+ --color-secondary: var(--ohw-secondary, #f1f5f9);
21
+ --color-secondary-foreground: var(--ohw-secondary-foreground, #0f172a);
39
22
  --color-muted: var(--ohw-muted, #f1f5f9);
40
23
  --color-muted-foreground: var(--ohw-muted-foreground, #64748b);
41
24
  --color-accent: var(--ohw-accent, #f1f5f9);
42
25
  --color-accent-foreground: var(--ohw-accent-foreground, #0f172a);
43
26
  --color-destructive: var(--ohw-destructive, #dc2626);
27
+ --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
44
28
  --color-input: var(--ohw-input, #e2e8f0);
45
29
  --color-ring: var(--ohw-ring, #64748b);
46
- --text-9xl--letter-spacing: -0.025em;
47
- --text-8xl--letter-spacing: -0.025em;
48
- --text-7xl--letter-spacing: -0.025em;
49
- --text-6xl--letter-spacing: -0.025em;
50
- --text-5xl--letter-spacing: -0.025em;
51
- --text-4xl--letter-spacing: -0.025em;
52
- --text-3xl--letter-spacing: -0.025em;
53
- --text-2xl--letter-spacing: -0.025em;
54
- --text-xl--letter-spacing: -0.025em;
55
- --text-lg--letter-spacing: 0em;
56
- --text-base--letter-spacing: 0em;
57
30
  --text-sm--letter-spacing: 0em;
58
31
  --text-xs--letter-spacing: 0em;
59
32
  }
@@ -82,6 +55,12 @@
82
55
  .sticky {
83
56
  position: sticky;
84
57
  }
58
+ .left-0 {
59
+ left: calc(var(--spacing) * 0);
60
+ }
61
+ .z-2147483646 {
62
+ z-index: 2147483646;
63
+ }
85
64
  .z-2147483647 {
86
65
  z-index: 2147483647;
87
66
  }
@@ -139,12 +118,21 @@
139
118
  .min-h-screen {
140
119
  min-height: 100vh;
141
120
  }
121
+ .w-full {
122
+ width: 100%;
123
+ }
142
124
  .min-w-8 {
143
125
  min-width: calc(var(--spacing) * 8);
144
126
  }
145
127
  .min-w-10 {
146
128
  min-width: calc(var(--spacing) * 10);
147
129
  }
130
+ .flex-1 {
131
+ flex: 1;
132
+ }
133
+ .shrink-0 {
134
+ flex-shrink: 0;
135
+ }
148
136
  .grow {
149
137
  flex-grow: 1;
150
138
  }
@@ -169,6 +157,9 @@
169
157
  .gap-2 {
170
158
  gap: calc(var(--spacing) * 2);
171
159
  }
160
+ .rounded-full {
161
+ border-radius: calc(infinity * 1px);
162
+ }
172
163
  .rounded-md {
173
164
  border-radius: var(--radius-md);
174
165
  }
@@ -183,9 +174,21 @@
183
174
  .border-input {
184
175
  border-color: var(--color-input);
185
176
  }
177
+ .border-transparent {
178
+ border-color: transparent;
179
+ }
180
+ .bg-destructive {
181
+ background-color: var(--color-destructive);
182
+ }
186
183
  .bg-muted {
187
184
  background-color: var(--color-muted);
188
185
  }
186
+ .bg-primary {
187
+ background-color: var(--color-primary);
188
+ }
189
+ .bg-secondary {
190
+ background-color: var(--color-secondary);
191
+ }
189
192
  .bg-transparent {
190
193
  background-color: transparent;
191
194
  }
@@ -201,72 +204,23 @@
201
204
  .px-2\.5 {
202
205
  padding-inline: calc(var(--spacing) * 2.5);
203
206
  }
207
+ .px-8 {
208
+ padding-inline: calc(var(--spacing) * 8);
209
+ }
210
+ .py-0\.5 {
211
+ padding-block: calc(var(--spacing) * 0.5);
212
+ }
204
213
  .py-1 {
205
214
  padding-block: calc(var(--spacing) * 1);
206
215
  }
207
216
  .font-sans {
208
217
  font-family: var(--font-sans);
209
218
  }
210
- .text-2xl {
211
- font-size: var(--text-2xl);
212
- line-height: var(--tw-leading, var(--text-2xl--line-height));
213
- letter-spacing: var(--tw-tracking, var(--text-2xl--letter-spacing));
214
- }
215
- .text-3xl {
216
- font-size: var(--text-3xl);
217
- line-height: var(--tw-leading, var(--text-3xl--line-height));
218
- letter-spacing: var(--tw-tracking, var(--text-3xl--letter-spacing));
219
- }
220
- .text-4xl {
221
- font-size: var(--text-4xl);
222
- line-height: var(--tw-leading, var(--text-4xl--line-height));
223
- letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
224
- }
225
- .text-5xl {
226
- font-size: var(--text-5xl);
227
- line-height: var(--tw-leading, var(--text-5xl--line-height));
228
- letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
229
- }
230
- .text-6xl {
231
- font-size: var(--text-6xl);
232
- line-height: var(--tw-leading, var(--text-6xl--line-height));
233
- letter-spacing: var(--tw-tracking, var(--text-6xl--letter-spacing));
234
- }
235
- .text-7xl {
236
- font-size: var(--text-7xl);
237
- line-height: var(--tw-leading, var(--text-7xl--line-height));
238
- letter-spacing: var(--tw-tracking, var(--text-7xl--letter-spacing));
239
- }
240
- .text-8xl {
241
- font-size: var(--text-8xl);
242
- line-height: var(--tw-leading, var(--text-8xl--line-height));
243
- letter-spacing: var(--tw-tracking, var(--text-8xl--letter-spacing));
244
- }
245
- .text-9xl {
246
- font-size: var(--text-9xl);
247
- line-height: var(--tw-leading, var(--text-9xl--line-height));
248
- letter-spacing: var(--tw-tracking, var(--text-9xl--letter-spacing));
249
- }
250
- .text-base {
251
- font-size: var(--text-base);
252
- line-height: var(--tw-leading, var(--text-base--line-height));
253
- letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
254
- }
255
- .text-lg {
256
- font-size: var(--text-lg);
257
- line-height: var(--tw-leading, var(--text-lg--line-height));
258
- letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
259
- }
260
219
  .text-sm {
261
220
  font-size: var(--text-sm);
262
221
  line-height: var(--tw-leading, var(--text-sm--line-height));
263
222
  letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
264
223
  }
265
- .text-xl {
266
- font-size: var(--text-xl);
267
- line-height: var(--tw-leading, var(--text-xl--line-height));
268
- letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
269
- }
270
224
  .text-xs {
271
225
  font-size: var(--text-xs);
272
226
  line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -276,12 +230,25 @@
276
230
  --tw-font-weight: var(--font-weight-medium);
277
231
  font-weight: var(--font-weight-medium);
278
232
  }
233
+ .font-semibold {
234
+ --tw-font-weight: var(--font-weight-semibold);
235
+ font-weight: var(--font-weight-semibold);
236
+ }
279
237
  .whitespace-nowrap {
280
238
  white-space: nowrap;
281
239
  }
240
+ .text-destructive-foreground {
241
+ color: var(--color-destructive-foreground);
242
+ }
282
243
  .text-foreground {
283
244
  color: var(--color-foreground);
284
245
  }
246
+ .text-primary-foreground {
247
+ color: var(--color-primary-foreground);
248
+ }
249
+ .text-secondary-foreground {
250
+ color: var(--color-secondary-foreground);
251
+ }
285
252
  .italic {
286
253
  font-style: italic;
287
254
  }
@@ -308,6 +275,11 @@
308
275
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
309
276
  transition-duration: var(--tw-duration, var(--default-transition-duration));
310
277
  }
278
+ .transition-colors {
279
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
280
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
281
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
282
+ }
311
283
  .outline-none {
312
284
  --tw-outline-style: none;
313
285
  outline-style: none;
@@ -319,6 +291,16 @@
319
291
  }
320
292
  }
321
293
  }
294
+ .hover\:bg-destructive\/80 {
295
+ &:hover {
296
+ @media (hover: hover) {
297
+ background-color: var(--color-destructive);
298
+ @supports (color: color-mix(in lab, red, red)) {
299
+ background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
300
+ }
301
+ }
302
+ }
303
+ }
322
304
  .hover\:bg-muted {
323
305
  &:hover {
324
306
  @media (hover: hover) {
@@ -326,6 +308,23 @@
326
308
  }
327
309
  }
328
310
  }
311
+ .hover\:bg-primary {
312
+ &:hover {
313
+ @media (hover: hover) {
314
+ background-color: var(--color-primary);
315
+ }
316
+ }
317
+ }
318
+ .hover\:bg-secondary\/80 {
319
+ &:hover {
320
+ @media (hover: hover) {
321
+ background-color: var(--color-secondary);
322
+ @supports (color: color-mix(in lab, red, red)) {
323
+ background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
324
+ }
325
+ }
326
+ }
327
+ }
329
328
  .hover\:bg-transparent {
330
329
  &:hover {
331
330
  @media (hover: hover) {
@@ -354,6 +353,29 @@
354
353
  }
355
354
  }
356
355
  }
356
+ .focus\:ring-2 {
357
+ &:focus {
358
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
359
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
360
+ }
361
+ }
362
+ .focus\:ring-ring {
363
+ &:focus {
364
+ --tw-ring-color: var(--color-ring);
365
+ }
366
+ }
367
+ .focus\:ring-offset-2 {
368
+ &:focus {
369
+ --tw-ring-offset-width: 2px;
370
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
371
+ }
372
+ }
373
+ .focus\:outline-none {
374
+ &:focus {
375
+ --tw-outline-style: none;
376
+ outline-style: none;
377
+ }
378
+ }
357
379
  .focus-visible\:border-ring {
358
380
  &:focus-visible {
359
381
  border-color: var(--color-ring);
@@ -448,6 +470,8 @@
448
470
  }
449
471
  }
450
472
  [data-ohw-bridge-root] {
473
+ --ohw-primary: #0885FE;
474
+ --ohw-primary-foreground: #FAFAF9;
451
475
  --ohw-background: #ffffff;
452
476
  --ohw-foreground: #020617;
453
477
  --ohw-card: #ffffff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.15",
3
+ "version": "0.1.16-next.8",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -27,10 +27,12 @@
27
27
  "react-dom": ">=18"
28
28
  },
29
29
  "dependencies": {
30
+ "@radix-ui/react-slot": "^1.3.0",
30
31
  "radix-ui": "^1.4.3"
31
32
  },
32
33
  "devDependencies": {
33
34
  "@tailwindcss/postcss": "^4",
35
+ "@types/node": "^26.0.0",
34
36
  "@types/react": "^18",
35
37
  "@types/react-dom": "^18",
36
38
  "autoprefixer": "^10.4.0",