@trycourier/react-designer 0.0.0-canary-20251205150115 → 0.0.0-canary-20251207101348

package/dist/cjs/styles.css

@@ -1015,6 +1015,10 @@ body {
 .courier-m-6 {
   margin: 1.5rem;
 }
+.\!courier-my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
 .-courier-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1228,6 +1232,9 @@ body {
 .courier-h-\[1px\] {
   height: 1px;
 }
+.courier-h-\[25px\] {
+  height: 25px;
+}
 .courier-h-\[300px\] {
   height: 300px;
 }
@@ -1270,6 +1277,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 +1686,6 @@ body {
 .courier-border-dotted {
   border-style: dotted;
 }
-.\!courier-border-none {
-  border-style: none !important;
-}
 .courier-border-none {
   border-style: none;
 }
@@ -2051,6 +2058,9 @@ body {
 .courier-pb-0 {
   padding-bottom: 0px;
 }
+.courier-pb-1 {
+  padding-bottom: 0.25rem;
+}
 .courier-pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2063,6 +2073,9 @@ body {
 .courier-pb-6 {
   padding-bottom: 1.5rem;
 }
+.courier-pb-px {
+  padding-bottom: 1px;
+}
 .courier-pl-0 {
   padding-left: 0px;
 }
@@ -2184,6 +2197,9 @@ body {
 .courier-leading-none {
   line-height: 1;
 }
+.courier-leading-normal {
+  line-height: 1.5;
+}
 .courier-leading-relaxed {
   line-height: 1.625;
 }
@@ -4332,6 +4348,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 +4400,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 +4839,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/VariableEditor/VariableInput.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariableEditorBaseProps } from "./shared";
+export interface VariableInputProps extends VariableEditorBaseProps {
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+}
+/**
+ * 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/VariableEditor/VariableTextarea.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariableEditorBaseProps } from "./shared";
+export interface VariableTextareaProps extends VariableEditorBaseProps {
+}
+/**
+ * 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/VariableEditor/index.d.ts

@@ -0,0 +1,6 @@
+export { VariableTextarea } from "./VariableTextarea";
+export type { VariableTextareaProps } from "./VariableTextarea";
+export { VariableInput } from "./VariableInput";
+export type { VariableInputProps } from "./VariableInput";
+export { parseStringToContent, contentToString, SimpleVariableNode, SimpleVariableView, VariableChipIcon, } from "./shared";
+export type { VariableEditorBaseProps } from "./shared";

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

@@ -0,0 +1,51 @@
+import { Node } from "@tiptap/core";
+import type { Content, JSONContent } from "@tiptap/core";
+import type { NodeViewProps } from "@tiptap/react";
+import * as React from "react";
+/**
+ * Simple variable icon for the chip
+ */
+export declare const VariableChipIcon: React.FC<{
+    color?: string;
+}>;
+/**
+ * Standalone variable view component
+ * Does not depend on external jotai stores
+ */
+export declare const SimpleVariableView: React.FC<NodeViewProps>;
+/**
+ * Custom VariableNode that uses SimpleVariableView
+ * Used in VariableInput and VariableTextarea components
+ */
+export declare const SimpleVariableNode: Node<any, any>;
+/**
+ * Parses a string with {{variable}} syntax into TipTap JSON content
+ */
+export declare function parseStringToContent(text: string): Content;
+/**
+ * Converts TipTap JSON content back to string with {{variable}} syntax
+ */
+export declare function contentToString(doc: JSONContent): string;
+/**
+ * Base props shared between VariableInput and VariableTextarea
+ */
+export interface VariableEditorBaseProps {
+    /** 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;
+}