@ohhwells/bridge 0.1.30 → 0.1.31-next.30

package/dist/styles.css

@@ -4,9 +4,13 @@
   :root, :host {
     --font-sans: Figtree, sans-serif;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-stone-200: oklch(92.3% 0.003 48.717);
+    --color-stone-500: #78716C;
+    --color-stone-950: #0C0A09;
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
     --text-xs: 12px;
     --text-xs--line-height: 16px;
     --text-sm: 14px;
@@ -37,6 +41,7 @@
     --font-body: 'Red Hat Display', system-ui, sans-serif;
     --color-primary: var(--ohw-primary, #0885FE);
     --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
+    --color-primary-50: var(--ohw-primary-50, #EFF6FF);
     --color-background: var(--ohw-background, #ffffff);
     --color-foreground: var(--ohw-foreground, #020617);
     --color-card-foreground: var(--ohw-card-foreground, #020617);
@@ -103,6 +108,9 @@
 .top-\[9px\] {
   top: 9px;
 }
+.top-\[calc\(100\%\+4px\)\] {
+  top: calc(100% + 4px);
+}
 .right-0 {
   right: calc(var(--spacing) * 0);
 }
@@ -133,6 +141,9 @@
 .z-2147483647 {
   z-index: 2147483647;
 }
+.z-\[2147483646\] {
+  z-index: 2147483646;
+}
 .z-\[2147483647\] {
   z-index: 2147483647;
 }
@@ -193,6 +204,10 @@
 .inline-flex {
   display: inline-flex;
 }
+.size-4 {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
 .h-7 {
   height: calc(var(--spacing) * 7);
 }
@@ -205,6 +220,9 @@
 .h-10 {
   height: calc(var(--spacing) * 10);
 }
+.h-20 {
+  height: calc(var(--spacing) * 20);
+}
 .h-\[70px\] {
   height: 70px;
 }
@@ -223,6 +241,15 @@
 .h-screen {
   height: 100vh;
 }
+.max-h-48 {
+  max-height: calc(var(--spacing) * 48);
+}
+.max-h-\[calc\(100\%-32px\)\] {
+  max-height: calc(100% - 32px);
+}
+.max-h-\[calc\(100vh-32px\)\] {
+  max-height: calc(100vh - 32px);
+}
 .min-h-dvh {
   min-height: 100dvh;
 }
@@ -232,6 +259,9 @@
 .w-2 {
   width: calc(var(--spacing) * 2);
 }
+.w-4 {
+  width: calc(var(--spacing) * 4);
+}
 .w-7 {
   width: calc(var(--spacing) * 7);
 }
@@ -244,9 +274,6 @@
 .w-14 {
   width: calc(var(--spacing) * 14);
 }
-.w-\[483px\] {
-  width: 483px;
-}
 .w-\[var\(--radix-popover-trigger-width\)\] {
   width: var(--radix-popover-trigger-width);
 }
@@ -257,9 +284,15 @@
 .w-full {
   width: 100%;
 }
+.max-w-\[483px\] {
+  max-width: 483px;
+}
 .max-w-\[1280px\] {
   max-width: 1280px;
 }
+.max-w-\[calc\(100\%-16px\)\] {
+  max-width: calc(100% - 16px);
+}
 .max-w-\[calc\(100vw-16px\)\] {
   max-width: calc(100vw - 16px);
 }
@@ -301,6 +334,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-grab {
+  cursor: grab;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -331,6 +367,9 @@
 .justify-end {
   justify-content: flex-end;
 }
+.gap-0 {
+  gap: calc(var(--spacing) * 0);
+}
 .gap-1 {
   gap: calc(var(--spacing) * 1);
 }
@@ -460,6 +499,12 @@
     background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
   }
 }
+.bg-black\/50 {
+  background-color: color-mix(in srgb, #000 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+  }
+}
 .bg-destructive {
   background-color: var(--color-destructive);
 }
@@ -711,6 +756,9 @@
 .text-secondary-foreground {
   color: var(--color-secondary-foreground);
 }
+.text-stone-500 {
+  color: var(--color-stone-500);
+}
 .italic {
   font-style: italic;
 }
@@ -741,6 +789,10 @@
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .shadow-none {
   --tw-shadow: 0 0 #0000;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -782,11 +834,20 @@
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.transition-all {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .transition-colors {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
 .outline-none {
   --tw-outline-style: none;
   outline-style: none;
@@ -947,6 +1008,78 @@
     }
   }
 }
+.enabled\:hover\:border {
+  &:enabled {
+    &:hover {
+      @media (hover: hover) {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+      }
+    }
+  }
+}
+.enabled\:hover\:border-stone-200 {
+  &:enabled {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-stone-200);
+      }
+    }
+  }
+}
+.enabled\:hover\:text-stone-950 {
+  &:enabled {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-stone-950);
+      }
+    }
+  }
+}
+.enabled\:active\:cursor-grabbing {
+  &:enabled {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+.enabled\:active\:border {
+  &:enabled {
+    &:active {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+}
+.enabled\:active\:border-primary {
+  &:enabled {
+    &:active {
+      border-color: var(--color-primary);
+    }
+  }
+}
+.enabled\:active\:bg-primary-50 {
+  &:enabled {
+    &:active {
+      background-color: var(--color-primary-50);
+    }
+  }
+}
+.enabled\:active\:text-stone-950 {
+  &:enabled {
+    &:active {
+      color: var(--color-stone-950);
+    }
+  }
+}
+.enabled\:active\:shadow {
+  &:enabled {
+    &:active {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+}
 .disabled\:pointer-events-none {
   &:disabled {
     pointer-events: none;
@@ -957,6 +1090,16 @@
     cursor: not-allowed;
   }
 }
+.disabled\:text-stone-950 {
+  &:disabled {
+    color: var(--color-stone-950);
+  }
+}
+.disabled\:opacity-40 {
+  &:disabled {
+    opacity: 40%;
+  }
+}
 .disabled\:opacity-50 {
   &:disabled {
     opacity: 50%;
@@ -1072,6 +1215,11 @@
     letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
   }
 }
+.md\:w-md {
+  @media (width >= 48rem) {
+    width: var(--container-md);
+  }
+}
 .\[\&_svg\]\:pointer-events-none {
   & svg {
     pointer-events: none;
@@ -1091,8 +1239,10 @@
 [data-ohw-bridge-root] {
   --color-primary: var(--ohw-primary, #0885FE);
   --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
+  --color-primary-50: var(--ohw-primary-50, #EFF6FF);
   --ohw-primary: #0885FE;
   --ohw-primary-foreground: #FAFAF9;
+  --ohw-primary-50: #EFF6FF;
   --ohw-background: #ffffff;
   --ohw-foreground: #020617;
   --ohw-card: #ffffff;
@@ -1123,6 +1273,20 @@
   --ohw-success: #16a34a;
   --ohw-hover-success: #15803d;
 }
+[data-ohw-visible-viewport] {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+  z-index: 2147483645;
+  overflow: hidden;
+}
+[data-ohw-visible-viewport] [data-slot="dialog-overlay"] {
+  pointer-events: auto;
+}
+[data-ohw-link-page-dropdown] {
+  pointer-events: auto;
+}
 [data-ohw-link-modal-root],
 [data-ohw-link-popover-root] {
   --ohw-background: #ffffff;
@@ -1237,6 +1401,7 @@
   --ohw-popover-foreground: #f8fafc;
   --ohw-primary: #f8fafc;
   --ohw-primary-foreground: #0f172a;
+  --ohw-primary-50: #1e3a5f;
   --ohw-hover-primary: #f1f5f9;
   --ohw-secondary: #1e293b;
   --ohw-secondary-foreground: #f8fafc;
@@ -1452,6 +1617,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1495,6 +1664,7 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohhwells/bridge",
-  "version": "0.1.30",
+  "version": "0.1.31-next.30",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.3.0",
+    "lucide-react": "^1.23.0",
     "radix-ui": "^1.4.3"
   },
   "devDependencies": {