@ohhwells/bridge 0.1.34 → 0.1.36

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-xs: 20rem;
     --container-md: 28rem;
     --text-xs: 12px;
     --text-xs--line-height: 16px;
@@ -38,6 +42,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);
@@ -107,6 +112,9 @@
 .top-\[calc\(100\%\+4px\)\] {
   top: calc(100% + 4px);
 }
+.top-full {
+  top: 100%;
+}
 .right-0 {
   right: calc(var(--spacing) * 0);
 }
@@ -119,6 +127,9 @@
 .bottom-0 {
   bottom: calc(var(--spacing) * 0);
 }
+.bottom-full {
+  bottom: 100%;
+}
 .left-0 {
   left: calc(var(--spacing) * 0);
 }
@@ -170,9 +181,15 @@
 .mt-0\.5 {
   margin-top: calc(var(--spacing) * 0.5);
 }
+.mt-2 {
+  margin-top: calc(var(--spacing) * 2);
+}
 .mr-\[-1px\] {
   margin-right: -1px;
 }
+.mb-2 {
+  margin-bottom: calc(var(--spacing) * 2);
+}
 .mb-4 {
   margin-bottom: calc(var(--spacing) * 4);
 }
@@ -200,6 +217,13 @@
 .inline-flex {
   display: inline-flex;
 }
+.size-4 {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
+.h-6 {
+  height: calc(var(--spacing) * 6);
+}
 .h-7 {
   height: calc(var(--spacing) * 7);
 }
@@ -236,6 +260,9 @@
 .max-h-48 {
   max-height: calc(var(--spacing) * 48);
 }
+.max-h-\[30px\] {
+  max-height: 30px;
+}
 .max-h-\[calc\(100\%-32px\)\] {
   max-height: calc(100% - 32px);
 }
@@ -251,6 +278,9 @@
 .w-2 {
   width: calc(var(--spacing) * 2);
 }
+.w-4 {
+  width: calc(var(--spacing) * 4);
+}
 .w-7 {
   width: calc(var(--spacing) * 7);
 }
@@ -273,6 +303,9 @@
 .w-full {
   width: 100%;
 }
+.w-px {
+  width: 1px;
+}
 .max-w-\[483px\] {
   max-width: 483px;
 }
@@ -285,6 +318,9 @@
 .max-w-\[calc\(100vw-16px\)\] {
   max-width: calc(100vw - 16px);
 }
+.max-w-xs {
+  max-width: var(--container-xs);
+}
 .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
@@ -313,6 +349,10 @@
   --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.-translate-x-\[calc\(100\%\+7px\)\] {
+  --tw-translate-x: calc(calc(100% + 7px) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .-translate-y-1\/2 {
   --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -323,6 +363,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-grab {
+  cursor: grab;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -400,6 +443,9 @@
 .overflow-x-auto {
   overflow-x: auto;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-\[10px\] {
   border-radius: 10px;
 }
@@ -491,9 +537,15 @@
     background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
   }
 }
+.bg-border {
+  background-color: var(--color-border);
+}
 .bg-destructive {
   background-color: var(--color-destructive);
 }
+.bg-foreground {
+  background-color: var(--color-foreground);
+}
 .bg-muted {
   background-color: var(--color-muted);
 }
@@ -718,6 +770,9 @@
 .text-\[\#0A0A0A\] {
   color: #0A0A0A;
 }
+.text-background {
+  color: var(--color-background);
+}
 .text-card-foreground {
   color: var(--color-card-foreground);
 }
@@ -742,6 +797,9 @@
 .text-secondary-foreground {
   color: var(--color-secondary-foreground);
 }
+.text-stone-500 {
+  color: var(--color-stone-500);
+}
 .italic {
   font-style: italic;
 }
@@ -768,10 +826,18 @@
   --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--ohw-primary));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.shadow-\[0px_2px_4px_-2px_rgba\(0\,0\,0\,0\.1\)\,0px_4px_6px_-1px_rgba\(0\,0\,0\,0\.1\)\] {
+  --tw-shadow: 0px 2px 4px -2px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 4px 6px -1px var(--tw-shadow-color, rgba(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-lg {
   --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);
@@ -813,11 +879,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;
@@ -830,6 +905,107 @@
     color: var(--color-muted-foreground);
   }
 }
+.before\:pointer-events-none {
+  &::before {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
+}
+.before\:absolute {
+  &::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+}
+.before\:top-0 {
+  &::before {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 0);
+  }
+}
+.before\:top-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    top: calc(1 / 2 * 100%);
+  }
+}
+.before\:right-0 {
+  &::before {
+    content: var(--tw-content);
+    right: calc(var(--spacing) * 0);
+  }
+}
+.before\:bottom-0 {
+  &::before {
+    content: var(--tw-content);
+    bottom: calc(var(--spacing) * 0);
+  }
+}
+.before\:left-0 {
+  &::before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+}
+.before\:left-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    left: calc(1 / 2 * 100%);
+  }
+}
+.before\:size-2 {
+  &::before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+}
+.before\:-translate-x-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.before\:translate-x-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.before\:-translate-y-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.before\:translate-y-1\/2 {
+  &::before {
+    content: var(--tw-content);
+    --tw-translate-y: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.before\:rotate-45 {
+  &::before {
+    content: var(--tw-content);
+    rotate: 45deg;
+  }
+}
+.before\:bg-foreground {
+  &::before {
+    content: var(--tw-content);
+    background-color: var(--color-foreground);
+  }
+}
+.before\:content-\[\"\"\] {
+  &::before {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+}
 .hover\:bg-accent {
   &:hover {
     @media (hover: hover) {
@@ -978,6 +1154,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;
@@ -988,11 +1236,31 @@
     cursor: not-allowed;
   }
 }
+.disabled\:text-muted-foreground {
+  &:disabled {
+    color: var(--color-muted-foreground);
+  }
+}
+.disabled\:text-stone-950 {
+  &:disabled {
+    color: var(--color-stone-950);
+  }
+}
+.disabled\:opacity-40 {
+  &:disabled {
+    opacity: 40%;
+  }
+}
 .disabled\:opacity-50 {
   &:disabled {
     opacity: 50%;
   }
 }
+.disabled\:opacity-60 {
+  &:disabled {
+    opacity: 60%;
+  }
+}
 .aria-invalid\:border-destructive {
   &[aria-invalid="true"] {
     border-color: var(--color-destructive);
@@ -1127,8 +1395,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;
@@ -1287,6 +1557,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;
@@ -1502,6 +1773,15 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  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 {
@@ -1545,6 +1825,8 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
+      --tw-content: "";
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohhwells/bridge",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "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": {