@ohhwells/bridge 0.1.17 → 0.1.19

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.
package/dist/styles.css CHANGED
@@ -3,23 +3,54 @@
3
3
  @layer ohw-theme {
4
4
  :root, :host {
5
5
  --font-sans: Figtree, sans-serif;
6
+ --color-black: #000;
7
+ --color-white: #fff;
6
8
  --spacing: 0.25rem;
9
+ --text-xs: 12px;
10
+ --text-xs--line-height: 16px;
7
11
  --text-sm: 14px;
8
12
  --text-sm--line-height: 20px;
13
+ --text-base: 16px;
14
+ --text-base--line-height: 24px;
15
+ --text-lg: 18px;
16
+ --text-lg--line-height: 28px;
17
+ --text-xl: 20px;
18
+ --text-xl--line-height: 28px;
19
+ --text-5xl: 48px;
20
+ --text-5xl--line-height: 1;
21
+ --font-weight-normal: 400;
9
22
  --font-weight-medium: 500;
23
+ --font-weight-semibold: 600;
24
+ --font-weight-bold: 700;
10
25
  --radius-md: 6px;
26
+ --radius-lg: 0.5rem;
11
27
  --default-transition-duration: 150ms;
12
28
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
+ --font-display: 'Instrument Serif', 'Times New Roman', serif;
30
+ --font-body: 'Red Hat Display', system-ui, sans-serif;
31
+ --color-primary: var(--ohw-primary, #0885FE);
32
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
13
33
  --color-background: var(--ohw-background, #ffffff);
14
34
  --color-foreground: var(--ohw-foreground, #020617);
35
+ --color-secondary: var(--ohw-secondary, #f1f5f9);
36
+ --color-secondary-foreground: var(--ohw-secondary-foreground, #0f172a);
15
37
  --color-muted: var(--ohw-muted, #f1f5f9);
16
38
  --color-muted-foreground: var(--ohw-muted-foreground, #64748b);
17
39
  --color-accent: var(--ohw-accent, #f1f5f9);
18
40
  --color-accent-foreground: var(--ohw-accent-foreground, #0f172a);
19
41
  --color-destructive: var(--ohw-destructive, #dc2626);
42
+ --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
20
43
  --color-input: var(--ohw-input, #e2e8f0);
21
44
  --color-ring: var(--ohw-ring, #64748b);
45
+ --text-5xl--letter-spacing: -0.025em;
46
+ --text-xl--letter-spacing: -0.025em;
47
+ --text-lg--letter-spacing: 0em;
48
+ --text-base--letter-spacing: 0em;
22
49
  --text-sm--letter-spacing: 0em;
50
+ --text-xs--letter-spacing: 0em;
51
+ --text-body: 18px;
52
+ --text-body--line-height: 1.5;
53
+ --tracking-display-tight: -0.030em;
23
54
  }
24
55
  }
25
56
  .pointer-events-auto {
@@ -46,6 +77,18 @@
46
77
  .sticky {
47
78
  position: sticky;
48
79
  }
80
+ .inset-0 {
81
+ inset: calc(var(--spacing) * 0);
82
+ }
83
+ .left-0 {
84
+ left: calc(var(--spacing) * 0);
85
+ }
86
+ .z-10 {
87
+ z-index: 10;
88
+ }
89
+ .z-2147483646 {
90
+ z-index: 2147483646;
91
+ }
49
92
  .z-2147483647 {
50
93
  z-index: 2147483647;
51
94
  }
@@ -67,6 +110,15 @@
67
110
  max-width: 96rem;
68
111
  }
69
112
  }
113
+ .m-0 {
114
+ margin: calc(var(--spacing) * 0);
115
+ }
116
+ .mx-auto {
117
+ margin-inline: auto;
118
+ }
119
+ .box-border {
120
+ box-sizing: border-box;
121
+ }
70
122
  .block {
71
123
  display: block;
72
124
  }
@@ -88,12 +140,24 @@
88
140
  .h-8 {
89
141
  height: calc(var(--spacing) * 8);
90
142
  }
143
+ .h-9 {
144
+ height: calc(var(--spacing) * 9);
145
+ }
91
146
  .h-10 {
92
147
  height: calc(var(--spacing) * 10);
93
148
  }
149
+ .h-\[70px\] {
150
+ height: 70px;
151
+ }
152
+ .h-\[264px\] {
153
+ height: 264px;
154
+ }
94
155
  .h-dvh {
95
156
  height: 100dvh;
96
157
  }
158
+ .h-px {
159
+ height: 1px;
160
+ }
97
161
  .h-screen {
98
162
  height: 100vh;
99
163
  }
@@ -103,36 +167,129 @@
103
167
  .min-h-screen {
104
168
  min-height: 100vh;
105
169
  }
170
+ .w-10 {
171
+ width: calc(var(--spacing) * 10);
172
+ }
173
+ .w-14 {
174
+ width: calc(var(--spacing) * 14);
175
+ }
176
+ .w-\[72px\] {
177
+ width: 72px;
178
+ }
179
+ .w-\[120px\] {
180
+ width: 120px;
181
+ }
182
+ .w-\[200px\] {
183
+ width: 200px;
184
+ }
185
+ .w-full {
186
+ width: 100%;
187
+ }
188
+ .max-w-\[1280px\] {
189
+ max-width: 1280px;
190
+ }
191
+ .min-w-0 {
192
+ min-width: calc(var(--spacing) * 0);
193
+ }
106
194
  .min-w-8 {
107
195
  min-width: calc(var(--spacing) * 8);
108
196
  }
109
197
  .min-w-10 {
110
198
  min-width: calc(var(--spacing) * 10);
111
199
  }
200
+ .min-w-max {
201
+ min-width: -moz-max-content;
202
+ min-width: max-content;
203
+ }
204
+ .flex-1 {
205
+ flex: 1;
206
+ }
207
+ .flex-none {
208
+ flex: none;
209
+ }
210
+ .shrink-0 {
211
+ flex-shrink: 0;
212
+ }
112
213
  .grow {
113
214
  flex-grow: 1;
114
215
  }
115
216
  .transform {
116
217
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
117
218
  }
219
+ .cursor-default {
220
+ cursor: default;
221
+ }
118
222
  .cursor-pointer {
119
223
  cursor: pointer;
120
224
  }
121
225
  .resize {
122
226
  resize: both;
123
227
  }
228
+ .flex-col {
229
+ flex-direction: column;
230
+ }
124
231
  .items-center {
125
232
  align-items: center;
126
233
  }
234
+ .items-end {
235
+ align-items: flex-end;
236
+ }
237
+ .items-stretch {
238
+ align-items: stretch;
239
+ }
240
+ .justify-between {
241
+ justify-content: space-between;
242
+ }
127
243
  .justify-center {
128
244
  justify-content: center;
129
245
  }
130
246
  .gap-1 {
131
247
  gap: calc(var(--spacing) * 1);
132
248
  }
249
+ .gap-1\.5 {
250
+ gap: calc(var(--spacing) * 1.5);
251
+ }
133
252
  .gap-2 {
134
253
  gap: calc(var(--spacing) * 2);
135
254
  }
255
+ .gap-3 {
256
+ gap: calc(var(--spacing) * 3);
257
+ }
258
+ .gap-4 {
259
+ gap: calc(var(--spacing) * 4);
260
+ }
261
+ .gap-6 {
262
+ gap: calc(var(--spacing) * 6);
263
+ }
264
+ .gap-10 {
265
+ gap: calc(var(--spacing) * 10);
266
+ }
267
+ .gap-16 {
268
+ gap: calc(var(--spacing) * 16);
269
+ }
270
+ .gap-\[60px\] {
271
+ gap: 60px;
272
+ }
273
+ .gap-px {
274
+ gap: 1px;
275
+ }
276
+ .truncate {
277
+ overflow: hidden;
278
+ text-overflow: ellipsis;
279
+ white-space: nowrap;
280
+ }
281
+ .overflow-x-auto {
282
+ overflow-x: auto;
283
+ }
284
+ .rounded-\[10px\] {
285
+ border-radius: 10px;
286
+ }
287
+ .rounded-full {
288
+ border-radius: calc(infinity * 1px);
289
+ }
290
+ .rounded-lg {
291
+ border-radius: var(--radius-lg);
292
+ }
136
293
  .rounded-md {
137
294
  border-radius: var(--radius-md);
138
295
  }
@@ -144,18 +301,68 @@
144
301
  border-style: var(--tw-border-style);
145
302
  border-width: 0px;
146
303
  }
304
+ .border-2 {
305
+ border-style: var(--tw-border-style);
306
+ border-width: 2px;
307
+ }
308
+ .border-dashed {
309
+ --tw-border-style: dashed;
310
+ border-style: dashed;
311
+ }
312
+ .border-\[\#E7E5E4\] {
313
+ border-color: #E7E5E4;
314
+ }
147
315
  .border-input {
148
316
  border-color: var(--color-input);
149
317
  }
318
+ .border-transparent {
319
+ border-color: transparent;
320
+ }
321
+ .bg-\(--color-light\,\#FEFFF0\) {
322
+ background-color: var(--color-light,#FEFFF0);
323
+ }
324
+ .bg-\[\#F5F5F4\] {
325
+ background-color: #F5F5F4;
326
+ }
327
+ .bg-\[\#FAFAF9\] {
328
+ background-color: #FAFAF9;
329
+ }
330
+ .bg-black\/20 {
331
+ background-color: color-mix(in srgb, #000 20%, transparent);
332
+ @supports (color: color-mix(in lab, red, red)) {
333
+ background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
334
+ }
335
+ }
336
+ .bg-destructive {
337
+ background-color: var(--color-destructive);
338
+ }
150
339
  .bg-muted {
151
340
  background-color: var(--color-muted);
152
341
  }
342
+ .bg-primary {
343
+ background-color: var(--color-primary);
344
+ }
345
+ .bg-secondary {
346
+ background-color: var(--color-secondary);
347
+ }
153
348
  .bg-transparent {
154
349
  background-color: transparent;
155
350
  }
351
+ .bg-white {
352
+ background-color: var(--color-white);
353
+ }
156
354
  .p-1 {
157
355
  padding: calc(var(--spacing) * 1);
158
356
  }
357
+ .p-10 {
358
+ padding: calc(var(--spacing) * 10);
359
+ }
360
+ .p-12 {
361
+ padding: calc(var(--spacing) * 12);
362
+ }
363
+ .px-1 {
364
+ padding-inline: calc(var(--spacing) * 1);
365
+ }
159
366
  .px-1\.5 {
160
367
  padding-inline: calc(var(--spacing) * 1.5);
161
368
  }
@@ -165,33 +372,144 @@
165
372
  .px-2\.5 {
166
373
  padding-inline: calc(var(--spacing) * 2.5);
167
374
  }
375
+ .px-3 {
376
+ padding-inline: calc(var(--spacing) * 3);
377
+ }
378
+ .px-5 {
379
+ padding-inline: calc(var(--spacing) * 5);
380
+ }
381
+ .px-8 {
382
+ padding-inline: calc(var(--spacing) * 8);
383
+ }
384
+ .px-16 {
385
+ padding-inline: calc(var(--spacing) * 16);
386
+ }
387
+ .py-0\.5 {
388
+ padding-block: calc(var(--spacing) * 0.5);
389
+ }
168
390
  .py-1 {
169
391
  padding-block: calc(var(--spacing) * 1);
170
392
  }
393
+ .py-1\.5 {
394
+ padding-block: calc(var(--spacing) * 1.5);
395
+ }
396
+ .py-4 {
397
+ padding-block: calc(var(--spacing) * 4);
398
+ }
399
+ .py-8 {
400
+ padding-block: calc(var(--spacing) * 8);
401
+ }
402
+ .py-20 {
403
+ padding-block: calc(var(--spacing) * 20);
404
+ }
405
+ .py-\[10px\] {
406
+ padding-block: 10px;
407
+ }
408
+ .text-center {
409
+ text-align: center;
410
+ }
411
+ .font-body {
412
+ font-family: var(--font-body);
413
+ }
414
+ .font-display {
415
+ font-family: var(--font-display);
416
+ }
171
417
  .font-sans {
172
418
  font-family: var(--font-sans);
173
419
  }
420
+ .text-5xl {
421
+ font-size: var(--text-5xl);
422
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
423
+ letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
424
+ }
425
+ .text-base {
426
+ font-size: var(--text-base);
427
+ line-height: var(--tw-leading, var(--text-base--line-height));
428
+ letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
429
+ }
430
+ .text-lg {
431
+ font-size: var(--text-lg);
432
+ line-height: var(--tw-leading, var(--text-lg--line-height));
433
+ letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
434
+ }
174
435
  .text-sm {
175
436
  font-size: var(--text-sm);
176
437
  line-height: var(--tw-leading, var(--text-sm--line-height));
177
438
  letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
178
439
  }
440
+ .text-xl {
441
+ font-size: var(--text-xl);
442
+ line-height: var(--tw-leading, var(--text-xl--line-height));
443
+ letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
444
+ }
445
+ .text-xs {
446
+ font-size: var(--text-xs);
447
+ line-height: var(--tw-leading, var(--text-xs--line-height));
448
+ letter-spacing: var(--tw-tracking, var(--text-xs--letter-spacing));
449
+ }
450
+ .text-body {
451
+ font-size: var(--text-body);
452
+ line-height: var(--tw-leading, var(--text-body--line-height));
453
+ }
454
+ .font-bold {
455
+ --tw-font-weight: var(--font-weight-bold);
456
+ font-weight: var(--font-weight-bold);
457
+ }
179
458
  .font-medium {
180
459
  --tw-font-weight: var(--font-weight-medium);
181
460
  font-weight: var(--font-weight-medium);
182
461
  }
462
+ .font-normal {
463
+ --tw-font-weight: var(--font-weight-normal);
464
+ font-weight: var(--font-weight-normal);
465
+ }
466
+ .font-semibold {
467
+ --tw-font-weight: var(--font-weight-semibold);
468
+ font-weight: var(--font-weight-semibold);
469
+ }
470
+ .tracking-display-tight {
471
+ --tw-tracking: var(--tracking-display-tight);
472
+ letter-spacing: var(--tracking-display-tight);
473
+ }
183
474
  .whitespace-nowrap {
184
475
  white-space: nowrap;
185
476
  }
477
+ .text-\(--color-accent\,\#A89B83\) {
478
+ color: var(--color-accent,#A89B83);
479
+ }
480
+ .text-\(--color-dark\,\#200C02\) {
481
+ color: var(--color-dark,#200C02);
482
+ }
483
+ .text-\[\#0A0A0A\] {
484
+ color: #0A0A0A;
485
+ }
486
+ .text-destructive-foreground {
487
+ color: var(--color-destructive-foreground);
488
+ }
186
489
  .text-foreground {
187
490
  color: var(--color-foreground);
188
491
  }
492
+ .text-primary-foreground {
493
+ color: var(--color-primary-foreground);
494
+ }
495
+ .text-secondary-foreground {
496
+ color: var(--color-secondary-foreground);
497
+ }
189
498
  .italic {
190
499
  font-style: italic;
191
500
  }
192
501
  .underline {
193
502
  text-decoration-line: underline;
194
503
  }
504
+ .opacity-50 {
505
+ opacity: 50%;
506
+ }
507
+ .opacity-80 {
508
+ opacity: 80%;
509
+ }
510
+ .opacity-100 {
511
+ opacity: 100%;
512
+ }
195
513
  .shadow-popover {
196
514
  --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0px 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
197
515
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -212,6 +530,11 @@
212
530
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
213
531
  transition-duration: var(--tw-duration, var(--default-transition-duration));
214
532
  }
533
+ .transition-colors {
534
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
535
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
536
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
537
+ }
215
538
  .outline-none {
216
539
  --tw-outline-style: none;
217
540
  outline-style: none;
@@ -223,6 +546,16 @@
223
546
  }
224
547
  }
225
548
  }
549
+ .hover\:bg-destructive\/80 {
550
+ &:hover {
551
+ @media (hover: hover) {
552
+ background-color: var(--color-destructive);
553
+ @supports (color: color-mix(in lab, red, red)) {
554
+ background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
555
+ }
556
+ }
557
+ }
558
+ }
226
559
  .hover\:bg-muted {
227
560
  &:hover {
228
561
  @media (hover: hover) {
@@ -230,6 +563,23 @@
230
563
  }
231
564
  }
232
565
  }
566
+ .hover\:bg-primary {
567
+ &:hover {
568
+ @media (hover: hover) {
569
+ background-color: var(--color-primary);
570
+ }
571
+ }
572
+ }
573
+ .hover\:bg-secondary\/80 {
574
+ &:hover {
575
+ @media (hover: hover) {
576
+ background-color: var(--color-secondary);
577
+ @supports (color: color-mix(in lab, red, red)) {
578
+ background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
579
+ }
580
+ }
581
+ }
582
+ }
233
583
  .hover\:bg-transparent {
234
584
  &:hover {
235
585
  @media (hover: hover) {
@@ -258,6 +608,29 @@
258
608
  }
259
609
  }
260
610
  }
611
+ .focus\:ring-2 {
612
+ &:focus {
613
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
614
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
615
+ }
616
+ }
617
+ .focus\:ring-ring {
618
+ &:focus {
619
+ --tw-ring-color: var(--color-ring);
620
+ }
621
+ }
622
+ .focus\:ring-offset-2 {
623
+ &:focus {
624
+ --tw-ring-offset-width: 2px;
625
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
626
+ }
627
+ }
628
+ .focus\:outline-none {
629
+ &:focus {
630
+ --tw-outline-style: none;
631
+ outline-style: none;
632
+ }
633
+ }
261
634
  .focus-visible\:border-ring {
262
635
  &:focus-visible {
263
636
  border-color: var(--color-ring);
@@ -352,14 +725,16 @@
352
725
  }
353
726
  }
354
727
  [data-ohw-bridge-root] {
728
+ --color-primary: var(--ohw-primary, #0885FE);
729
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
730
+ --ohw-primary: #0885FE;
731
+ --ohw-primary-foreground: #FAFAF9;
355
732
  --ohw-background: #ffffff;
356
733
  --ohw-foreground: #020617;
357
734
  --ohw-card: #ffffff;
358
735
  --ohw-card-foreground: #020617;
359
736
  --ohw-popover: #ffffff;
360
737
  --ohw-popover-foreground: #020617;
361
- --ohw-primary: #0f172a;
362
- --ohw-primary-foreground: #f8fafc;
363
738
  --ohw-hover-primary: #1e293b;
364
739
  --ohw-secondary: #f1f5f9;
365
740
  --ohw-secondary-foreground: #0f172a;
@@ -462,6 +837,10 @@
462
837
  syntax: "*";
463
838
  inherits: false;
464
839
  }
840
+ @property --tw-tracking {
841
+ syntax: "*";
842
+ inherits: false;
843
+ }
465
844
  @property --tw-shadow {
466
845
  syntax: "*";
467
846
  inherits: false;
@@ -595,6 +974,7 @@
595
974
  --tw-skew-y: initial;
596
975
  --tw-border-style: solid;
597
976
  --tw-font-weight: initial;
977
+ --tw-tracking: initial;
598
978
  --tw-shadow: 0 0 #0000;
599
979
  --tw-shadow-color: initial;
600
980
  --tw-shadow-alpha: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.17",
3
+ "version": "0.1.19",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -27,6 +27,7 @@
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": {