@ohhwells/bridge 0.1.14 → 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 +242 -65
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +238 -61
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +127 -72
  7. package/package.json +3 -1
package/dist/styles.css CHANGED
@@ -2,53 +2,41 @@
2
2
  @layer properties;
3
3
  @layer ohw-theme {
4
4
  :root, :host {
5
- --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
6
- 'Noto Color Emoji';
5
+ --font-sans: Figtree, sans-serif;
7
6
  --spacing: 0.25rem;
8
- --text-xs: 0.75rem;
9
- --text-xs--line-height: calc(1 / 0.75);
10
- --text-sm: 0.875rem;
11
- --text-sm--line-height: calc(1.25 / 0.875);
12
- --text-base: 1rem;
13
- --text-base--line-height: calc(1.5 / 1);
14
- --text-lg: 1.125rem;
15
- --text-lg--line-height: calc(1.75 / 1.125);
16
- --text-xl: 1.25rem;
17
- --text-xl--line-height: calc(1.75 / 1.25);
18
- --text-2xl: 1.5rem;
19
- --text-2xl--line-height: calc(2 / 1.5);
20
- --text-3xl: 1.875rem;
21
- --text-3xl--line-height: calc(2.25 / 1.875);
22
- --text-4xl: 2.25rem;
23
- --text-4xl--line-height: calc(2.5 / 2.25);
24
- --text-5xl: 3rem;
25
- --text-5xl--line-height: 1;
26
- --text-6xl: 3.75rem;
27
- --text-6xl--line-height: 1;
28
- --text-7xl: 4.5rem;
29
- --text-7xl--line-height: 1;
30
- --text-8xl: 6rem;
31
- --text-8xl--line-height: 1;
32
- --text-9xl: 8rem;
33
- --text-9xl--line-height: 1;
7
+ --text-xs: 12px;
8
+ --text-xs--line-height: 16px;
9
+ --text-sm: 14px;
10
+ --text-sm--line-height: 20px;
34
11
  --font-weight-medium: 500;
12
+ --font-weight-semibold: 600;
35
13
  --radius-md: 6px;
36
14
  --default-transition-duration: 150ms;
37
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);
38
18
  --color-background: var(--ohw-background, #ffffff);
39
19
  --color-foreground: var(--ohw-foreground, #020617);
20
+ --color-secondary: var(--ohw-secondary, #f1f5f9);
21
+ --color-secondary-foreground: var(--ohw-secondary-foreground, #0f172a);
40
22
  --color-muted: var(--ohw-muted, #f1f5f9);
41
23
  --color-muted-foreground: var(--ohw-muted-foreground, #64748b);
42
24
  --color-accent: var(--ohw-accent, #f1f5f9);
43
25
  --color-accent-foreground: var(--ohw-accent-foreground, #0f172a);
44
26
  --color-destructive: var(--ohw-destructive, #dc2626);
27
+ --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
45
28
  --color-input: var(--ohw-input, #e2e8f0);
46
29
  --color-ring: var(--ohw-ring, #64748b);
30
+ --text-sm--letter-spacing: 0em;
31
+ --text-xs--letter-spacing: 0em;
47
32
  }
48
33
  }
49
34
  .pointer-events-auto {
50
35
  pointer-events: auto;
51
36
  }
37
+ .pointer-events-none {
38
+ pointer-events: none;
39
+ }
52
40
  .visible {
53
41
  visibility: visible;
54
42
  }
@@ -67,6 +55,12 @@
67
55
  .sticky {
68
56
  position: sticky;
69
57
  }
58
+ .left-0 {
59
+ left: calc(var(--spacing) * 0);
60
+ }
61
+ .z-2147483646 {
62
+ z-index: 2147483646;
63
+ }
70
64
  .z-2147483647 {
71
65
  z-index: 2147483647;
72
66
  }
@@ -124,12 +118,21 @@
124
118
  .min-h-screen {
125
119
  min-height: 100vh;
126
120
  }
121
+ .w-full {
122
+ width: 100%;
123
+ }
127
124
  .min-w-8 {
128
125
  min-width: calc(var(--spacing) * 8);
129
126
  }
130
127
  .min-w-10 {
131
128
  min-width: calc(var(--spacing) * 10);
132
129
  }
130
+ .flex-1 {
131
+ flex: 1;
132
+ }
133
+ .shrink-0 {
134
+ flex-shrink: 0;
135
+ }
133
136
  .grow {
134
137
  flex-grow: 1;
135
138
  }
@@ -154,6 +157,9 @@
154
157
  .gap-2 {
155
158
  gap: calc(var(--spacing) * 2);
156
159
  }
160
+ .rounded-full {
161
+ border-radius: calc(infinity * 1px);
162
+ }
157
163
  .rounded-md {
158
164
  border-radius: var(--radius-md);
159
165
  }
@@ -168,9 +174,21 @@
168
174
  .border-input {
169
175
  border-color: var(--color-input);
170
176
  }
177
+ .border-transparent {
178
+ border-color: transparent;
179
+ }
180
+ .bg-destructive {
181
+ background-color: var(--color-destructive);
182
+ }
171
183
  .bg-muted {
172
184
  background-color: var(--color-muted);
173
185
  }
186
+ .bg-primary {
187
+ background-color: var(--color-primary);
188
+ }
189
+ .bg-secondary {
190
+ background-color: var(--color-secondary);
191
+ }
174
192
  .bg-transparent {
175
193
  background-color: transparent;
176
194
  }
@@ -186,74 +204,51 @@
186
204
  .px-2\.5 {
187
205
  padding-inline: calc(var(--spacing) * 2.5);
188
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
+ }
189
213
  .py-1 {
190
214
  padding-block: calc(var(--spacing) * 1);
191
215
  }
192
216
  .font-sans {
193
217
  font-family: var(--font-sans);
194
218
  }
195
- .text-2xl {
196
- font-size: var(--text-2xl);
197
- line-height: var(--tw-leading, var(--text-2xl--line-height));
198
- }
199
- .text-3xl {
200
- font-size: var(--text-3xl);
201
- line-height: var(--tw-leading, var(--text-3xl--line-height));
202
- }
203
- .text-4xl {
204
- font-size: var(--text-4xl);
205
- line-height: var(--tw-leading, var(--text-4xl--line-height));
206
- }
207
- .text-5xl {
208
- font-size: var(--text-5xl);
209
- line-height: var(--tw-leading, var(--text-5xl--line-height));
210
- }
211
- .text-6xl {
212
- font-size: var(--text-6xl);
213
- line-height: var(--tw-leading, var(--text-6xl--line-height));
214
- }
215
- .text-7xl {
216
- font-size: var(--text-7xl);
217
- line-height: var(--tw-leading, var(--text-7xl--line-height));
218
- }
219
- .text-8xl {
220
- font-size: var(--text-8xl);
221
- line-height: var(--tw-leading, var(--text-8xl--line-height));
222
- }
223
- .text-9xl {
224
- font-size: var(--text-9xl);
225
- line-height: var(--tw-leading, var(--text-9xl--line-height));
226
- }
227
- .text-base {
228
- font-size: var(--text-base);
229
- line-height: var(--tw-leading, var(--text-base--line-height));
230
- }
231
- .text-lg {
232
- font-size: var(--text-lg);
233
- line-height: var(--tw-leading, var(--text-lg--line-height));
234
- }
235
219
  .text-sm {
236
220
  font-size: var(--text-sm);
237
221
  line-height: var(--tw-leading, var(--text-sm--line-height));
238
- }
239
- .text-xl {
240
- font-size: var(--text-xl);
241
- line-height: var(--tw-leading, var(--text-xl--line-height));
222
+ letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
242
223
  }
243
224
  .text-xs {
244
225
  font-size: var(--text-xs);
245
226
  line-height: var(--tw-leading, var(--text-xs--line-height));
227
+ letter-spacing: var(--tw-tracking, var(--text-xs--letter-spacing));
246
228
  }
247
229
  .font-medium {
248
230
  --tw-font-weight: var(--font-weight-medium);
249
231
  font-weight: var(--font-weight-medium);
250
232
  }
233
+ .font-semibold {
234
+ --tw-font-weight: var(--font-weight-semibold);
235
+ font-weight: var(--font-weight-semibold);
236
+ }
251
237
  .whitespace-nowrap {
252
238
  white-space: nowrap;
253
239
  }
240
+ .text-destructive-foreground {
241
+ color: var(--color-destructive-foreground);
242
+ }
254
243
  .text-foreground {
255
244
  color: var(--color-foreground);
256
245
  }
246
+ .text-primary-foreground {
247
+ color: var(--color-primary-foreground);
248
+ }
249
+ .text-secondary-foreground {
250
+ color: var(--color-secondary-foreground);
251
+ }
257
252
  .italic {
258
253
  font-style: italic;
259
254
  }
@@ -280,6 +275,11 @@
280
275
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
281
276
  transition-duration: var(--tw-duration, var(--default-transition-duration));
282
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
+ }
283
283
  .outline-none {
284
284
  --tw-outline-style: none;
285
285
  outline-style: none;
@@ -291,6 +291,16 @@
291
291
  }
292
292
  }
293
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
+ }
294
304
  .hover\:bg-muted {
295
305
  &:hover {
296
306
  @media (hover: hover) {
@@ -298,6 +308,23 @@
298
308
  }
299
309
  }
300
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
+ }
301
328
  .hover\:bg-transparent {
302
329
  &:hover {
303
330
  @media (hover: hover) {
@@ -326,6 +353,29 @@
326
353
  }
327
354
  }
328
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
+ }
329
379
  .focus-visible\:border-ring {
330
380
  &:focus-visible {
331
381
  border-color: var(--color-ring);
@@ -420,6 +470,8 @@
420
470
  }
421
471
  }
422
472
  [data-ohw-bridge-root] {
473
+ --ohw-primary: #0885FE;
474
+ --ohw-primary-foreground: #FAFAF9;
423
475
  --ohw-background: #ffffff;
424
476
  --ohw-foreground: #020617;
425
477
  --ohw-card: #ffffff;
@@ -486,6 +538,9 @@
486
538
  --ohw-hover-success: #16a34a;
487
539
  }
488
540
  @layer base {
541
+ [data-ohw-bridge-root] {
542
+ font-family: var(--font-sans);
543
+ }
489
544
  [data-ohw-bridge-root] button {
490
545
  border: none;
491
546
  background: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.14",
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",