@trycourier/react-designer 0.2.0 → 0.3.0

package/dist/components/hooks/useBlockConfig.d.ts

@@ -0,0 +1,110 @@
+import { type BlockElementType, type BlockAttributes, type BlockPreset, type VisibleBlockItem, type PresetReference } from "../TemplateEditor/store";
+export interface UseBlockConfigResult {
+    /**
+     * Currently visible blocks in the sidebar.
+     * Can include both built-in block types and preset references.
+     */
+    visibleBlocks: VisibleBlockItem[];
+    /**
+     * Set which blocks are visible in the sidebar (and their order).
+     * Use strings for built-in blocks and { type, preset } for presets.
+     *
+     * @example
+     * setVisibleBlocks([
+     *   'text',
+     *   { type: 'button', preset: 'portal' },  // preset between text and image
+     *   'image',
+     *   'button',
+     * ]);
+     */
+    setVisibleBlocks: (blocks: VisibleBlockItem[]) => void;
+    /**
+     * Reset visible blocks to defaults
+     */
+    resetVisibleBlocks: () => void;
+    /**
+     * Default visible blocks for reference
+     */
+    defaultVisibleBlocks: VisibleBlockItem[];
+    /**
+     * Set default attributes for a block type.
+     * These defaults are applied when creating new blocks of this type.
+     */
+    setDefaults: (type: BlockElementType, defaults: BlockAttributes) => void;
+    /**
+     * Get default attributes for a block type
+     */
+    getDefaults: (type: BlockElementType) => BlockAttributes | undefined;
+    /**
+     * Clear defaults for a block type (revert to built-in defaults)
+     */
+    clearDefaults: (type: BlockElementType) => void;
+    /**
+     * Register a block preset (pre-configured variant of a block type)
+     */
+    registerPreset: (preset: BlockPreset) => void;
+    /**
+     * Unregister a preset by type and key
+     */
+    unregisterPreset: (type: BlockElementType, key: string) => void;
+    /**
+     * Get all registered presets
+     */
+    presets: BlockPreset[];
+    /**
+     * Get presets for a specific block type
+     */
+    getPresetsForType: (type: BlockElementType) => BlockPreset[];
+    /**
+     * Insert a block at the end of the document.
+     * If presetKey is provided, uses the preset's attributes.
+     * Otherwise, uses the type's defaults (if set).
+     */
+    insertBlock: (type: BlockElementType, presetKey?: string) => void;
+}
+/**
+ * Hook to configure and manage block elements in the editor.
+ *
+ * This hook provides a comprehensive API for:
+ * - Controlling which blocks appear in the sidebar and their order
+ * - Setting default attributes for block types
+ * - Creating and managing block presets (pre-configured variants)
+ * - Programmatically inserting blocks
+ *
+ * @returns Object containing all block configuration functions and state
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   visibleBlocks,
+ *   setVisibleBlocks,
+ *   setDefaults,
+ *   registerPreset,
+ *   insertBlock,
+ * } = useBlockConfig();
+ *
+ * // Register a preset first
+ * registerPreset({
+ *   type: 'button',
+ *   key: 'portal',
+ *   label: 'Go to Portal',
+ *   attributes: { href: 'https://portal.example.com', content: 'Go to Portal' }
+ * });
+ *
+ * // Control which blocks appear in sidebar (including presets)
+ * setVisibleBlocks([
+ *   'text',
+ *   { type: 'button', preset: 'portal' },  // Preset between text and image
+ *   'image',
+ *   'button',
+ * ]);
+ *
+ * // Set defaults for all new buttons
+ * setDefaults('button', { borderRadius: '4px', backgroundColor: '#007bff' });
+ *
+ * // Insert a block programmatically
+ * insertBlock('button', 'portal');
+ * ```
+ */
+export declare const useBlockConfig: () => UseBlockConfigResult;
+export type { BlockElementType, BlockAttributes, BlockPreset, VisibleBlockItem, PresetReference };

package/dist/components/hooks/useVariables.d.ts

@@ -0,0 +1,40 @@
+import type { ChannelType } from "@/store";
+export interface UseVariablesResult {
+    /**
+     * All available variables from the editor configuration
+     */
+    availableVariables: string[];
+    /**
+     * Variables that are actually used in the channel's content
+     */
+    usedVariables: string[];
+    /**
+     * Current variable values (for preview/testing)
+     */
+    variableValues: Record<string, string>;
+    /**
+     * Update a variable's value
+     */
+    addVariableValue: (key: string, value: string) => void;
+    /**
+     * Clear all variable values (reset to empty object)
+     */
+    clearAllVariableValues: () => void;
+}
+/**
+ * Hook to access and manage variables for a specific channel
+ *
+ * @param channelType - The channel to get variables for (e.g., 'email', 'sms', 'slack')
+ * @returns Object containing available variables, used variables, current values, and update function
+ *
+ * @example
+ * ```tsx
+ * const { availableVariables, usedVariables, variableValues, addVariableValue } = useVariables('email');
+ *
+ * // availableVariables = ['user.name', 'user.email', 'orderTotal']
+ * // usedVariables = ['user.name', 'orderTotal']
+ *
+ * addVariableValue('user.name', 'John Doe');
+ * ```
+ */
+export declare const useVariables: (channelType?: ChannelType) => UseVariablesResult;

package/dist/components/ui/Blocks/ColumnBlock/ColumnBlock.d.ts

@@ -0,0 +1,3 @@
+import { type BlockBaseProps } from "../Block";
+export declare const ColumnBlockIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnBlock: ({ draggable }: Pick<BlockBaseProps, "draggable">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Blocks/ColumnBlock/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnBlock";

package/dist/components/ui/Blocks/CustomCodeBlock/index.d.ts

@@ -1 +1 @@
-export { CustomCodeBlock } from "./CustomCodeBlock";
+export * from "./CustomCodeBlock";

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

@@ -1,6 +1,7 @@
 export * from "./Block";
 export * from "./BlockquoteBlock";
 export * from "./ButtonBlock";
+export * from "./ColumnBlock";
 export * from "./CustomCodeBlock";
 export * from "./DividerBlock";
 export * from "./HeadingBlock";

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

@@ -6,3 +6,4 @@ export declare const ImageElementIcon: ({ ...props }: IconProps) => import("reac
 export declare const DividerElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const VariableElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CustomCodeElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnElementIcon: ({ ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import React from "react";
+type UniqueIdentifier = string | number;
+interface DraggableItemProps {
+    id: UniqueIdentifier;
+    children: React.ReactNode;
+    dragType?: string;
+    type?: "sidebar" | "editor";
+    index?: number;
+    className?: string;
+    disabled?: boolean;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    renderDragPreview?: () => React.ReactElement;
+}
+export declare const DraggableItem: ({ id, children, dragType, type, index, className, disabled, onDragStart, onDragEnd, renderDragPreview, }: DraggableItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { DraggableItem } from "./DraggableItem";

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

@@ -0,0 +1,5 @@
+interface DropIndicatorPlaceholderProps {
+    type?: string | null;
+}
+export declare const DropIndicatorPlaceholder: React.FC<DropIndicatorPlaceholderProps>;
+export {};

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

@@ -0,0 +1 @@
+export { DropIndicatorPlaceholder } from "./DropIndicatorPlaceholder";

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

@@ -1,5 +1,6 @@
 interface FormHeaderProps {
-    type: "text" | "image" | "spacer" | "divider" | "button" | "blockquote" | "heading" | "customCode";
+    type: "text" | "image" | "spacer" | "divider" | "button" | "blockquote" | "heading" | "customCode" | "column";
+    label?: string;
 }
 export declare const FormHeader: ({ type }: FormHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,6 @@ export interface MainLayoutProps extends HTMLAttributes<HTMLDivElement> {
     isLoading?: boolean;
     SideBar?: React.ReactNode;
     Header?: React.ReactNode;
-    dataMode?: "light" | "dark";
+    colorScheme?: "light" | "dark";
 }
 export declare const MainLayout: import("react").ForwardRefExoticComponent<MainLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,26 +1,29 @@
-import type { DraggableSyntheticListeners } from "@dnd-kit/core";
-import type { Transform } from "@dnd-kit/utilities";
 import type { Editor, NodeViewWrapperProps } from "@tiptap/react";
-import React from "react";
+import React, { type HTMLAttributes } from "react";
+import { type Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 export interface SortableItemWrapperProps extends NodeViewWrapperProps {
     children: React.ReactNode;
     id: string;
     className?: string;
     editor: Editor;
+    getPos?: (() => number) | boolean;
 }
-export declare const SortableItemWrapper: ({ children, id, className, ...props }: SortableItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SortableItemWrapper: ({ children, id, className, editor, getPos: _getPos, ...props }: SortableItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export interface SortableItemProps {
     children: React.ReactNode;
     id?: string;
     dragOverlay?: boolean;
     disabled?: boolean;
     dragging?: boolean;
-    handleProps?: Record<string, unknown>;
+    closestEdge?: Edge | null;
+    dragType?: string | null;
+    handleRef?: React.RefObject<HTMLButtonElement>;
+    contentRef?: React.RefObject<HTMLDivElement>;
     fadeIn?: boolean;
-    transform?: Transform | null;
-    listeners?: DraggableSyntheticListeners;
-    transition?: string | null;
     className?: string;
     editor: Editor;
 }
+export interface NodeViewWrapperComponentProps extends HTMLAttributes<HTMLDivElement> {
+    dragging?: never;
+}
 export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 export interface TextInputProps extends Omit<React.ComponentProps<"input">, "as" | "onChange"> {
     as?: "Input" | "Textarea";
-    variables?: string[];
     autoResize?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/dist/components/ui/TextMenu/config.d.ts

@@ -2,6 +2,21 @@ export type TextMenuItemState = "enabled" | "disabled" | "hidden";
 export interface TextMenuItem {
     state: TextMenuItemState;
 }
+export interface ConditionalRule {
+    id: string;
+    trigger: {
+        type: "node";
+        name: string;
+        active: boolean;
+    };
+    conditions: {
+        activeItems: Array<keyof TextMenuConfig>;
+    };
+    action: {
+        type: "toggle_off";
+        targets: Array<keyof TextMenuConfig>;
+    };
+}
 export interface TextMenuConfig {
     contentType?: TextMenuItem;
     bold?: TextMenuItem;
@@ -15,6 +30,7 @@ export interface TextMenuConfig {
     quote?: TextMenuItem;
     link?: TextMenuItem;
     variable?: TextMenuItem;
+    conditionalRules?: ConditionalRule[];
 }
 export declare const defaultTextMenuConfig: TextMenuConfig;
 export declare const getTextMenuConfigForNode: (nodeName: string, hasTextSelection?: boolean) => TextMenuConfig;

package/dist/components/ui/TextMenu/hooks/useConditionalRules.d.ts

@@ -0,0 +1,18 @@
+import type { Editor } from "@tiptap/react";
+import type { TextMenuConfig } from "../config";
+interface TextMenuStates {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isStrike: boolean;
+    isQuote: boolean;
+    isAlignLeft: boolean;
+    isAlignCenter: boolean;
+    isAlignRight: boolean;
+    isAlignJustify: boolean;
+    isLink: boolean;
+}
+export declare const useConditionalRules: (config: TextMenuConfig | undefined, editor: Editor | null, states: TextMenuStates | undefined) => {
+    getRuleForItem: (itemKey: keyof TextMenuConfig) => import("../config").ConditionalRule | undefined;
+} | null;
+export {};

package/dist/components/ui/TextMenu/hooks/useTextmenuCommands.d.ts

@@ -1,5 +1,18 @@
 import type { Editor } from "@tiptap/react";
-export declare const useTextmenuCommands: (editor: Editor) => {
+import type { TextMenuConfig } from "../config";
+interface TextMenuStates {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isStrike: boolean;
+    isQuote: boolean;
+    isAlignLeft: boolean;
+    isAlignCenter: boolean;
+    isAlignRight: boolean;
+    isAlignJustify: boolean;
+    isLink: boolean;
+}
+export declare const useTextmenuCommands: (editor: Editor, config?: TextMenuConfig, states?: TextMenuStates) => {
     onBold: () => boolean;
     onItalic: () => boolean;
     onStrike: () => boolean;
@@ -12,3 +25,4 @@ export declare const useTextmenuCommands: (editor: Editor) => {
     onQuote: () => void;
     resetButtonFormatting: () => boolean;
 };
+export {};

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

@@ -0,0 +1,35 @@
+import React from "react";
+export declare const MAX_VARIABLE_LENGTH = 50;
+export declare const MAX_DISPLAY_LENGTH = 24;
+export interface VariableColors {
+    bgColor: string;
+    borderColor: string;
+    iconColor: string;
+    textColor: string;
+}
+export interface VariableChipBaseProps {
+    /** The variable name/id */
+    variableId: string;
+    /** Whether the variable is currently invalid */
+    isInvalid: boolean;
+    /** Called when attributes should be updated */
+    onUpdateAttributes: (attrs: {
+        id: string;
+        isInvalid: boolean;
+    }) => void;
+    /** Called when the node should be deleted */
+    onDelete: () => void;
+    /** Icon component to render */
+    icon: React.ReactNode;
+    /** Optional value to display (e.g., for variables with known values) */
+    value?: string;
+    /** Whether to use single-click (true) or double-click (false) to edit */
+    singleClickToEdit?: boolean;
+    /** Additional class names for the outer span */
+    className?: string;
+    /** Override text color (e.g., for button context) */
+    textColorOverride?: string;
+    /** 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>;

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

@@ -0,0 +1,15 @@
+import type { Editor } from "@tiptap/react";
+export interface VariableEditorToolbarProps {
+    editor: Editor | null;
+    className?: string;
+}
+/**
+ * A minimal bubble menu for VariableInput and VariableTextarea
+ * that shows only the variable insertion button.
+ * Reuses the existing TextMenu component with a variable-only config.
+ *
+ * Important: This component keeps the BubbleMenu mounted and controls
+ * visibility through shouldShow callback to avoid DOM cleanup issues
+ * when the editor's editable state changes.
+ */
+export declare const VariableEditorToolbar: React.FC<VariableEditorToolbarProps>;

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariableEditorBaseProps } from "./shared";
+export interface VariableInputProps extends VariableEditorBaseProps {
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Whether to show the variable toolbar */
+    showToolbar?: 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,11 @@
+import * as React from "react";
+import { type VariableEditorBaseProps } from "./shared";
+export interface VariableTextareaProps extends VariableEditorBaseProps {
+    /** Whether to show the variable toolbar */
+    showToolbar?: boolean;
+}
+/**
+ * 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,8 @@
+export { VariableTextarea } from "./VariableTextarea";
+export type { VariableTextareaProps } from "./VariableTextarea";
+export { VariableInput } from "./VariableInput";
+export type { VariableInputProps } from "./VariableInput";
+export { VariableEditorToolbar } from "./VariableEditorToolbar";
+export type { VariableEditorToolbarProps } from "./VariableEditorToolbar";
+export { parseStringToContent, contentToString, SimpleVariableNode, SimpleVariableView, VariableChipIcon, } from "./shared";
+export type { VariableEditorBaseProps } from "./shared";

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

@@ -0,0 +1,47 @@
+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 with editing support
+ * Used in VariableInput and VariableTextarea components
+ */
+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;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Called when the input gains focus */
+    onFocus?: () => void;
+    /** Called when the input loses focus */
+    onBlur?: () => void;
+}

package/dist/components/ui-kit/Icon/EmailIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "./Icon";
+export declare const EmailIcon: ({ color, width, height, viewBox, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default EmailIcon;

package/dist/components/ui-kit/Icon/MSTeamsIcon.d.ts

@@ -1,3 +1,3 @@
 import type { IconProps } from "./Icon";
-export declare const MSTeamsIcon: ({ color, width, height, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MSTeamsIcon: ({ color, width, height, viewBox, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default MSTeamsIcon;

package/dist/components/ui-kit/Icon/PushIcon.d.ts

@@ -1,3 +1,3 @@
 import type { IconProps } from "./Icon";
-export declare const PushIcon: ({ color, width, height, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PushIcon: ({ width, height, viewBox, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default PushIcon;

package/dist/components/ui-kit/Icon/VariableIcon.d.ts

@@ -1,3 +1,3 @@
 import type { IconProps } from "./Icon";
-export declare const VariableIcon: ({ color, active, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VariableIcon: ({ width, height, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableIcon;

package/dist/components/ui-kit/Icon/index.d.ts

@@ -13,6 +13,7 @@ export { DesktopIcon } from "./DesktopIcon";
 export { DistributeIcon } from "./DistributeIcon";
 export { DownIcon } from "./DownIcon";
 export { DuplicateIcon } from "./DuplicateIcon";
+export { EmailIcon } from "./EmailIcon";
 export { ExpandIcon } from "./ExpandIcon";
 export { FacebookIcon } from "./FacebookIcon";
 export { FontSizeIcon } from "./FontSizeIcon";

package/dist/components/ui-kit/ThemeProvider/ThemeProvider.d.ts

@@ -3,7 +3,7 @@ import type { Theme } from "./ThemeProvider.types";
 interface ThemeProviderProps {
     children: ReactNode;
     theme?: Theme | string;
-    dataMode?: "light" | "dark";
+    colorScheme?: "light" | "dark";
     className?: string;
 }
 export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui-kit/Toggle/Toggle.d.ts

@@ -2,11 +2,11 @@ import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Toggle, toggleVariants };

package/dist/components/ui-kit/ToggleGroup/ToggleGroup.d.ts

@@ -2,11 +2,11 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

package/dist/components/utils/extractVariablesFromContent.d.ts

@@ -0,0 +1,13 @@
+import type { ElementalNode } from "../../types/elemental.types";
+/**
+ * Extracts all variable names used in the content in the format {{variableName}}
+ * Supports nested dot notation like {{user.profile.name}}
+ *
+ * Extracts variables from:
+ * - Text content (content properties)
+ * - Element attributes (href, src, alt_text, etc.)
+ * - Channel raw properties (subject, title, text)
+ * - Conditional logic (if, loop properties)
+ * - Localized content and attributes
+ */
+export declare const extractVariablesFromContent: (elements?: ElementalNode[]) => string[];

package/dist/components/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from "./generateNodeIds";
 export * from "./createOrDuplicateNode";
 export * from "./multipleContainersKeyboardCoordinates";
 export * from "./safeGetPos";
+export * from "./validateVariableName";

package/dist/components/utils/multipleContainersKeyboardCoordinates.d.ts

@@ -1,2 +1 @@
-import type { KeyboardCoordinateGetter } from "@dnd-kit/core";
-export declare const coordinateGetter: KeyboardCoordinateGetter;
+export declare const coordinateGetter: () => undefined;

package/dist/components/utils/validateVariableName.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Validates a variable name according to JSON property name rules
+ * Valid: user.firstName, company.address.street, _private, user123
+ * Invalid: user. firstName (space), user. (trailing dot), user..name (double dot), 123invalid (starts with digit)
+ *
+ * @param variableName - The variable name to validate (without curly braces)
+ * @returns true if the variable name is valid, false otherwise
+ */
+export declare function isValidVariableName(variableName: string): boolean;