@trycourier/react-designer 0.3.0 → 0.4.0

package/dist/esm/styles.css

@@ -1000,6 +1000,9 @@ body {
 .courier-z-50 {
   z-index: 50;
 }
+.courier-z-\[9999\] {
+  z-index: 9999;
+}
 .courier-z-\[999\] {
   z-index: 999;
 }
@@ -1276,6 +1279,9 @@ body {
 .courier-h-px {
   height: 1px;
 }
+.courier-max-h-60 {
+  max-height: 15rem;
+}
 .courier-max-h-\[88px\] {
   max-height: 88px;
 }
@@ -4645,6 +4651,10 @@ body {
 .hover\:courier-bg-card:hover {
   background-color: var(--card);
 }
+.hover\:courier-bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .hover\:courier-bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
@@ -4686,12 +4696,20 @@ body {
 .focus\:courier-bg-accent:focus {
   background-color: var(--accent);
 }
+.focus\:courier-bg-gray-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .focus\:courier-text-accent-foreground:focus {
   color: var(--accent-foreground);
 }
 .focus\:courier-text-foreground:focus {
   color: var(--foreground);
 }
+.focus\:courier-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus-visible\:courier-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4913,6 +4931,14 @@ body {
 .dark\:courier-bg-foreground:is(.courier-dark *) {
   background-color: var(--foreground);
 }
+.dark\:courier-bg-gray-700:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+.dark\:courier-bg-gray-800:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
 .dark\:courier-bg-neutral-700:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
@@ -4981,6 +5007,10 @@ body {
 .dark\:courier-outline-neutral-300:is(.courier-dark *) {
   outline-color: #d4d4d4;
 }
+.dark\:hover\:courier-bg-gray-700:hover:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
 .dark\:hover\:courier-bg-neutral-600:hover:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
@@ -5022,6 +5052,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+.dark\:focus\:courier-bg-gray-700:focus:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
 .dark\:active\:courier-bg-neutral-700:active:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from "./components/TemplateEditor";
 export * from "./components/BrandEditor";
 export * from "./components/Providers";
 export * from "./components/hooks";
+export type { VariableValidationConfig } from "./types/validation.types";
 export * from "./lib/utils/errors";
 export * from "./components/ui-kit/ErrorBoundary";

package/dist/styles.css

@@ -1000,6 +1000,9 @@ body {
 .courier-z-50 {
   z-index: 50;
 }
+.courier-z-\[9999\] {
+  z-index: 9999;
+}
 .courier-z-\[999\] {
   z-index: 999;
 }
@@ -1276,6 +1279,9 @@ body {
 .courier-h-px {
   height: 1px;
 }
+.courier-max-h-60 {
+  max-height: 15rem;
+}
 .courier-max-h-\[88px\] {
   max-height: 88px;
 }
@@ -4645,6 +4651,10 @@ body {
 .hover\:courier-bg-card:hover {
   background-color: var(--card);
 }
+.hover\:courier-bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .hover\:courier-bg-neutral-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
@@ -4686,12 +4696,20 @@ body {
 .focus\:courier-bg-accent:focus {
   background-color: var(--accent);
 }
+.focus\:courier-bg-gray-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .focus\:courier-text-accent-foreground:focus {
   color: var(--accent-foreground);
 }
 .focus\:courier-text-foreground:focus {
   color: var(--foreground);
 }
+.focus\:courier-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus-visible\:courier-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4913,6 +4931,14 @@ body {
 .dark\:courier-bg-foreground:is(.courier-dark *) {
   background-color: var(--foreground);
 }
+.dark\:courier-bg-gray-700:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+.dark\:courier-bg-gray-800:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
 .dark\:courier-bg-neutral-700:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
@@ -4981,6 +5007,10 @@ body {
 .dark\:courier-outline-neutral-300:is(.courier-dark *) {
   outline-color: #d4d4d4;
 }
+.dark\:hover\:courier-bg-gray-700:hover:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
 .dark\:hover\:courier-bg-neutral-600:hover:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
@@ -5022,6 +5052,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+.dark\:focus\:courier-bg-gray-700:focus:is(.courier-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
 .dark\:active\:courier-bg-neutral-700:active:is(.courier-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./tiptap.types";
 export * from "./elemental.types";
 export * from "./elemental.schema";
+export * from "./validation.types";

package/dist/types/validation.types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Configuration for custom variable validation in the editor.
+ * Allows consumers to restrict which variable names are allowed and
+ * define the behavior when validation fails.
+ */
+export interface VariableValidationConfig {
+    /**
+     * Custom validator function that runs AFTER built-in format validation passes
+     * (unless `overrideFormatValidation` is true).
+     *
+     * @param variableName - The variable name to validate (without curly braces)
+     * @returns true if the variable is allowed, false otherwise
+     *
+     * @example
+     * ```tsx
+     * // Only allow variables from a predefined list
+     * validate: (name) => ['user.name', 'user.email', 'order.total'].includes(name)
+     * ```
+     */
+    validate?: (variableName: string) => boolean;
+    /**
+     * Behavior when validation fails.
+     * - 'mark': Keep the chip with invalid styling (default, shows red styling)
+     * - 'remove': Delete the chip entirely
+     *
+     * @default 'mark'
+     */
+    onInvalid?: "mark" | "remove";
+    /**
+     * Message to show as a toast notification when validation fails.
+     * Can be a static string or a function that receives the variable name
+     * for dynamic messages.
+     *
+     * @example
+     * ```tsx
+     * // Static message
+     * invalidMessage: "This variable is not available"
+     *
+     * // Dynamic message
+     * invalidMessage: (name) => `Variable "${name}" is not in the allowed list`
+     * ```
+     */
+    invalidMessage?: string | ((variableName: string) => string);
+    /**
+     * If true, bypasses the built-in format validation entirely.
+     * Only the custom `validate` function will be used for validation.
+     *
+     * Use with caution - invalid formats may cause issues with downstream processing.
+     *
+     * @default false
+     */
+    overrideFormatValidation?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",