@trycourier/react-designer 0.0.0-canary-20251210153829 → 0.0.0-canary-20251211163746

package/dist/cjs/styles.css

@@ -985,6 +985,9 @@ body {
 .courier-top-\[50\%\] {
   top: 50%;
 }
+.courier-top-px {
+  top: 1px;
+}
 .-courier-z-10 {
   z-index: -10;
 }
@@ -1027,10 +1030,6 @@ body {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-.courier-mx-0\.5 {
-  margin-left: 0.125rem;
-  margin-right: 0.125rem;
-}
 .courier-mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1047,6 +1046,10 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+.courier-my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .courier-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1246,6 +1249,9 @@ body {
 .courier-h-\[25px\] {
   height: 25px;
 }
+.courier-h-\[28px\] {
+  height: 28px;
+}
 .courier-h-\[300px\] {
   height: 300px;
 }
@@ -2075,6 +2081,9 @@ body {
 .courier-pb-0 {
   padding-bottom: 0px;
 }
+.courier-pb-0\.5 {
+  padding-bottom: 0.125rem;
+}
 .courier-pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2090,9 +2099,6 @@ body {
 .courier-pb-6 {
   padding-bottom: 1.5rem;
 }
-.courier-pb-px {
-  padding-bottom: 1px;
-}
 .courier-pl-0 {
   padding-left: 0px;
 }
@@ -2132,6 +2138,9 @@ body {
 .courier-pt-0 {
   padding-top: 0px;
 }
+.courier-pt-0\.5 {
+  padding-top: 0.125rem;
+}
 .courier-pt-2 {
   padding-top: 0.5rem;
 }
@@ -2150,9 +2159,6 @@ body {
 .courier-text-center {
   text-align: center;
 }
-.courier-align-middle {
-  vertical-align: middle;
-}
 .courier-font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2214,6 +2220,9 @@ body {
 .courier-uppercase {
   text-transform: uppercase;
 }
+.courier-leading-\[28px\] {
+  line-height: 28px;
+}
 .courier-leading-none {
   line-height: 1;
 }
@@ -3037,10 +3046,15 @@ body {
 .ProseMirror > .react-renderer.node-divider {
   justify-content: center;
 }
-.ProseMirror > .react-renderer.node-variable {
-  margin: 0px;
+.ProseMirror > .react-renderer .node-variable {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.ProseMirror > .react-renderer .node-variable {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
 }
-.ProseMirror > .react-renderer.node-variable {
+.ProseMirror > .react-renderer .node-variable {
   display: inline-block;
 }
 .ProseMirror > .react-renderer.node-dragPlaceholder {
@@ -4447,6 +4461,90 @@ body {
       font-size: 0.8rem;
       padding: 0;
     }
+.courier-variable-chip {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding-right: 0.375rem;
+  padding-left: 1.5rem;
+
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+}
+/* Default state - yellow/warning (no value) */
+.courier-variable-chip:before {
+    content: "";
+  }
+.courier-variable-chip:before {
+  position: absolute;
+}
+.courier-variable-chip:before {
+  left: 0px;
+}
+.courier-variable-chip:before {
+  top: 1px;
+}
+.courier-variable-chip:before {
+  height: 100%;
+}
+.courier-variable-chip:before {
+  width: 100%;
+}
+.courier-variable-chip:before {
+  border-radius: 0.25rem;
+}
+.courier-variable-chip:before {
+  border-width: 1px;
+}
+.courier-variable-chip:before {
+    background-color: #fffbeb;
+    border-color: #fde68a;
+  }
+/* Icon container - absolutely positioned */
+.courier-variable-chip > span:first-child {
+  position: absolute;
+}
+.courier-variable-chip > span:first-child {
+  left: 0.25rem;
+}
+.courier-variable-chip > span:first-child {
+  top: 50%;
+}
+.courier-variable-chip > span:first-child {
+  z-index: 10;
+}
+.courier-variable-chip > span:first-child {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+/* Text span */
+.courier-variable-chip > span:last-child {
+  position: relative;
+}
+.courier-variable-chip > span:last-child {
+  z-index: 10;
+}
+.courier-variable-chip > span:last-child {
+    color: #92400e;
+  }
+/* Has value state - blue */
+.courier-variable-chip.courier-variable-chip-has-value:before {
+      background-color: #eff6ff;
+      border-color: #bfdbfe;
+    }
+.courier-variable-chip.courier-variable-chip-has-value > span:last-child {
+      color: #1e40af;
+    }
+/* Invalid state - reddish */
+.courier-variable-chip.courier-variable-chip-invalid:before {
+      background-color: #fef2f2;
+      border-color: #fecaca;
+    }
+.courier-variable-chip.courier-variable-chip-invalid > span:last-child {
+      color: #991b1b;
+    }
 /* Variable Textarea placeholder styles */
 .variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
 .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
@@ -4457,14 +4555,45 @@ body {
   height: 0;
 }
 /* Variable Input placeholder styles */
-.variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
-.variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--muted-foreground);
-  pointer-events: none;
-  height: 0;
+.variable-input-placeholder .ProseMirror {
+  width: 100%;
 }
+.variable-input-placeholder .ProseMirror {
+  padding: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  margin: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  height: 28px;
+}
+.variable-input-placeholder .ProseMirror p {
+  width: 100%;
+}
+.variable-input-placeholder .ProseMirror p {
+  cursor: text;
+}
+.variable-input-placeholder .ProseMirror p {
+  border-style: none;
+}
+.variable-input-placeholder .ProseMirror p {
+  padding: 0px;
+}
+.variable-input-placeholder .ProseMirror p {
+  line-height: 28px;
+}
+.variable-input-placeholder .ProseMirror p {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.variable-input-placeholder .ProseMirror p.is-editor-empty:first-child::before,
+      .variable-input-placeholder .ProseMirror p.is-empty:first-child::before {
+        content: attr(data-placeholder);
+        float: left;
+        color: var(--muted-foreground);
+        pointer-events: none;
+        height: 0;
+      }
 .file\:courier-border-0::file-selector-button {
   border-width: 0px;
 }
@@ -4971,15 +5100,9 @@ body {
 .\[\&\>svg\]\:courier-shrink-0>svg {
   flex-shrink: 0;
 }
-.\[\&_\.ProseMirror\]\:courier-h-\[25px\] .ProseMirror {
-  height: 25px;
-}
 .\[\&_\.ProseMirror\]\:courier-min-h-\[20px\] .ProseMirror {
   min-height: 20px;
 }
-.\[\&_\.ProseMirror\]\:courier-flex-1 .ProseMirror {
-  flex: 1 1 0%;
-}
 .\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
   border-style: none;
 }

package/dist/components/ui/VariableEditor/VariableChipBase.d.ts

@@ -29,7 +29,7 @@ export interface VariableChipBaseProps {
     className?: string;
     /** Override text color (e.g., for button context) */
     textColorOverride?: string;
-    /** Custom color getter function */
+    /** Custom color getter function (kept for API compatibility, colors handled by CSS) */
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
 }
 export declare const VariableChipBase: React.FC<VariableChipBaseProps>;