@trycourier/react-designer 0.0.0-canary-20251205102447 → 0.0.0-canary-20251205172857

package/dist/cjs/styles.css

@@ -1228,6 +1228,9 @@ body {
 .courier-h-\[1px\] {
   height: 1px;
 }
+.courier-h-\[25px\] {
+  height: 25px;
+}
 .courier-h-\[300px\] {
   height: 300px;
 }
@@ -1270,6 +1273,9 @@ body {
 .courier-min-h-\[120px\] {
   min-height: 120px;
 }
+.courier-min-h-\[20px\] {
+  min-height: 20px;
+}
 .courier-min-h-\[44px\] {
   min-height: 44px;
 }
@@ -1676,9 +1682,6 @@ body {
 .courier-border-dotted {
   border-style: dotted;
 }
-.\!courier-border-none {
-  border-style: none !important;
-}
 .courier-border-none {
   border-style: none;
 }
@@ -2051,6 +2054,9 @@ body {
 .courier-pb-0 {
   padding-bottom: 0px;
 }
+.courier-pb-1 {
+  padding-bottom: 0.25rem;
+}
 .courier-pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2063,6 +2069,9 @@ body {
 .courier-pb-6 {
   padding-bottom: 1.5rem;
 }
+.courier-pb-px {
+  padding-bottom: 1px;
+}
 .courier-pl-0 {
   padding-left: 0px;
 }
@@ -2184,6 +2193,9 @@ body {
 .courier-leading-none {
   line-height: 1;
 }
+.courier-leading-normal {
+  line-height: 1.5;
+}
 .courier-leading-relaxed {
   line-height: 1.625;
 }
@@ -4332,6 +4344,24 @@ body {
       font-size: 0.8rem;
       padding: 0;
     }
+/* 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 {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--muted-foreground);
+  pointer-events: none;
+  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;
+}
 .file\:courier-border-0::file-selector-button {
   border-width: 0px;
 }
@@ -4366,12 +4396,6 @@ body {
 .last\:courier-mt-0:last-child {
   margin-top: 0px;
 }
-.read-only\:courier-cursor-default:read-only {
-  cursor: default;
-}
-.read-only\:courier-border-transparent:read-only {
-  border-color: transparent;
-}
 .hover\:courier-border-accent-foreground:hover {
   border-color: var(--accent-foreground);
 }
@@ -4811,6 +4835,38 @@ body {
 .\[\&\>svg\]\:courier-shrink-0>svg {
   flex-shrink: 0;
 }
+.\[\&_\.ProseMirror\]\:courier-flex .ProseMirror {
+  display: flex;
+}
+.\[\&_\.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-items-end .ProseMirror {
+  align-items: flex-end;
+}
+.\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
+  border-style: none;
+}
+.\[\&_\.ProseMirror\]\:courier-p-0 .ProseMirror {
+  padding: 0px;
+}
+.\[\&_\.ProseMirror\]\:courier-outline-none .ProseMirror {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.\[\&_\.tiptap\]\:courier-border-none .tiptap {
+  border-style: none;
+}
+.\[\&_\.tiptap\]\:courier-outline-none .tiptap {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .\[\&_svg\]\:courier-pointer-events-none svg {
   pointer-events: none;
 }

package/dist/components/ui/VariableInput/VariableInput.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface VariableInputProps {
+    /** The current value with {{variable}} syntax */
+    value?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** List of available variable names for autocomplete */
+    variables?: string[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Whether to disable variable autocomplete suggestions */
+    disableVariableAutocomplete?: boolean;
+    /** Called when the input gains focus */
+    onFocus?: () => void;
+    /** Called when the input loses focus */
+    onBlur?: () => void;
+}
+/**
+ * A single-line input that renders {{variable}} patterns as styled chips.
+ * Uses a minimal TipTap editor under the hood for rich content rendering.
+ */
+export declare const VariableInput: React.ForwardRefExoticComponent<VariableInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/VariableInput/index.d.ts

@@ -0,0 +1,2 @@
+export { VariableInput } from "./VariableInput";
+export type { VariableInputProps } from "./VariableInput";

package/dist/components/ui/VariableTextarea/VariableTextarea.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface VariableTextareaProps {
+    /** The current value with {{variable}} syntax */
+    value?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** List of available variable names for autocomplete */
+    variables?: string[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to disable variable autocomplete suggestions */
+    disableVariableAutocomplete?: boolean;
+    /** Called when the input gains focus */
+    onFocus?: () => void;
+    /** Called when the input loses focus */
+    onBlur?: () => void;
+}
+/**
+ * A textarea-like input that renders {{variable}} patterns as styled chips.
+ * Uses a minimal TipTap editor under the hood for rich content rendering.
+ */
+export declare const VariableTextarea: React.ForwardRefExoticComponent<VariableTextareaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/VariableTextarea/index.d.ts

@@ -0,0 +1,2 @@
+export { VariableTextarea } from "./VariableTextarea";
+export type { VariableTextareaProps } from "./VariableTextarea";