@veevarts/design-system 0.1.17 → 0.1.19

package/dist/patterns/RichText/RichText.d.ts

@@ -0,0 +1,105 @@
+import { RichTextAreaProps } from './types';
+/**
+ * @module RichTextArea
+ * @description A powerful WYSIWYG rich text editor built on TipTap/ProseMirror.
+ *
+ * The RichTextArea component provides a flexible and customizable rich text editing experience,
+ * allowing users to format content with various modifiers like bold, italic, headings, lists, and more.
+ * It's built with a modular architecture, type-safe modifiers, and integrates with HeroUI components.
+ *
+ * @component
+ *
+ * @features
+ * - **Modular architecture**: Easily enable/disable formatting options (modifiers).
+ * - **Type-safe modifiers**: Ensures correct usage and configuration of formatting tools.
+ * - **Extensible**: Built on TipTap, allowing for custom extensions and functionality.
+ * - **Controlled & uncontrolled modes**: Supports both controlled and uncontrolled usage patterns.
+ * - **Customizable UI**: Integrates with HeroUI for consistent styling and theming.
+ * - **Word and character count**: Optional display of content statistics.
+ * - **Zoom controls**: Adjust editor font size for better readability.
+ *
+ * @accessibility
+ * - Semantic HTML structure for editor content.
+ * - Keyboard navigation support for toolbar and editor content.
+ * - ARIA attributes for enhanced screen reader compatibility (inherited from TipTap/ProseMirror).
+ *
+ * @performance
+ * - Lazy loading of animations (if applicable, though not directly in this wrapper).
+ * - Efficient rendering due to TipTap's ProseMirror foundation.
+ * - Memoization for extension creation and other heavy computations.
+ *
+ * @example
+ * // Basic usage with default modifiers
+ * ```tsx
+ * <RichTextArea
+ *   label="Content"
+ *   placeholder="Start typing..."
+ * />
+ * ```
+ *
+ * @example
+ * // With specific modifiers
+ * ```tsx
+ * <RichTextArea
+ *   modifiers={['bold', 'italic', { type: 'heading', level: 2 }, 'bulletList']}
+ *   label="Blog Post"
+ *   placeholder="Write your blog post here..."
+ * />
+ * ```
+ *
+ * @example
+ * // Using a preset (e.g., for a blog)
+ * ```tsx
+ * import { RICH_TEXT_PRESETS } from '@veevarts/design-system';
+ *
+ * <RichTextArea
+ *   modifiers={RICH_TEXT_PRESETS.blog}
+ *   label="Article Body"
+ *   placeholder="Compose your article..."
+ * />
+ * ```
+ *
+ * @example
+ * // Controlled component
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { RichTextArea } from '@veevarts/design-system';
+ *
+ * function MyControlledEditor() {
+ *   const [content, setContent] = useState('<p>Hello <strong>world</strong>!</p>');
+ *
+ *   return (
+ *     <RichTextArea
+ *       content={content}
+ *       onContentChange={(editorContent) => setContent(editorContent.html)}
+ *       label="Controlled Content"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With word and character count
+ * ```tsx
+ * <RichTextArea
+ *   label="Description"
+ *   showWordCount
+ *   showCharacterCount
+ *   minRows={5}
+ * />
+ * ```
+ *
+ * @example
+ * // Read-only mode
+ * ```tsx
+ * <RichTextArea
+ *   isReadOnly
+ *   initialContent="<p>This is <strong>read-only</strong> content.</p>"
+ *   label="Preview"
+ * />
+ * ```
+ *
+ * @see {@link RichTextAreaProps} for all available props
+ * @see {@link https://tiptap.dev/docs/editor/api/editor Tiptap Editor API} for underlying editor functionality
+ */
+export declare const RichTextArea: import('react').ForwardRefExoticComponent<Omit<RichTextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/patterns/RichText/RichText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/RichText/TipTapArea/TipTapArea.d.ts

@@ -0,0 +1,60 @@
+import { default as React, ComponentProps } from 'react';
+import { Textarea } from '@heroui/react';
+export type TextareaHeightChangeMeta = {
+    rowHeight: number;
+};
+export interface RichTextAreaProps extends Omit<ComponentProps<typeof Textarea>, 'children'> {
+    /**
+     * Whether the textarea should automatically grow vertically to accomodate content.
+     * @default false
+     */
+    disableAutosize?: boolean;
+    /**
+     * Minimum number of rows to show for textarea
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * @default 8
+     */
+    maxRows?: number;
+    /**
+     * Reuse previously computed measurements when computing height of textarea.
+     * @default false
+     */
+    cacheMeasurements?: boolean;
+    /**
+     * Function invoked on textarea height change, with height as first argument.
+     * The second function argument is an object containing additional information that
+     * might be useful for custom behaviors. Current options include `{ rowHeight: number }`.
+     *
+     * @param height - The height of the textarea
+     * @param meta - Additional information about the height change
+     */
+    onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
+    /**
+     * Active formatting modifiers to show in toolbar
+     */
+    activeModifiers?: string[];
+    /**
+     * Show character count below editor
+     * @default false
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Show word count below editor
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * Maximum character limit
+     */
+    maxCharacters?: number;
+    /**
+     * Maximum word limit
+     */
+    maxWords?: number;
+}
+export declare const TipTapArea: React.ForwardRefExoticComponent<Omit<RichTextAreaProps, "ref"> & React.RefAttributes<unknown>>;
+export default TipTapArea;

package/dist/patterns/RichText/commands/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Rich Text Editor - Commands Exports
+ */
+export { commandRegistry, getCommand, hasCommand } from './registry';
+export type { CommandRegistry, CommandDefinition, CommandContext, CommandFunction } from '../types';

package/dist/patterns/RichText/commands/registry.d.ts

@@ -0,0 +1,14 @@
+import { CommandRegistry } from '../types';
+/**
+ * Complete command registry
+ * Each modifier maps to execute, canExecute, and isActive functions
+ */
+export declare const commandRegistry: CommandRegistry;
+/**
+ * Get command definition for a modifier type
+ */
+export declare function getCommand(modifierType: string): import('.').CommandDefinition | undefined;
+/**
+ * Check if a command exists for a modifier type
+ */
+export declare function hasCommand(modifierType: string): boolean;

package/dist/patterns/RichText/config/colors.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Rich Text Editor - Color Configuration
+ *
+ * Predefined color palettes for text color and highlight/background.
+ */
+/**
+ * Text color palette
+ * Professional color set for text formatting
+ */
+export declare const TEXT_COLORS: readonly ["#000000", "#374151", "#6B7280", "#EF4444", "#F59E0B", "#10B981", "#3B82F6", "#8B5CF6", "#EC4899", "#14B8A6", "#F97316", "#A855F7"];
+/**
+ * Highlight/background color palette
+ * Light colors suitable for text highlighting
+ */
+export declare const HIGHLIGHT_COLORS: readonly ["#FEF3C7", "#DBEAFE", "#D1FAE5", "#FCE7F3", "#E0E7FF", "#FED7AA", "#F3E8FF", "#CCFBF1", "#FEE2E2", "#E5E7EB", "#FAE8FF", "#BFDBFE"];
+/**
+ * Type-safe text color
+ */
+export type TextColor = (typeof TEXT_COLORS)[number];
+/**
+ * Type-safe highlight color
+ */
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number];
+/**
+ * Check if a color is in the text colors palette
+ */
+export declare function isTextColor(color: string): color is TextColor;
+/**
+ * Check if a color is in the highlight colors palette
+ */
+export declare function isHighlightColor(color: string): color is HighlightColor;
+/**
+ * Validate hex color format
+ */
+export declare function isValidHexColor(color: string): boolean;
+/**
+ * Get contrasting text color (black or white) for a background color
+ */
+export declare function getContrastColor(hexColor: string): '#000000' | '#FFFFFF';

package/dist/patterns/RichText/config/defaults.d.ts

@@ -0,0 +1,34 @@
+import { ModifierIdentifier } from '../types';
+/**
+ * Default editor props
+ */
+export declare const DEFAULT_EDITOR_PROPS: {
+    readonly adapter: "tiptap";
+    readonly variant: "bordered";
+    readonly minRows: 3;
+    readonly maxRows: 8;
+    readonly disableAutosize: false;
+    readonly showToolbar: true;
+    readonly showCharacterCount: false;
+    readonly showWordCount: false;
+};
+/**
+ * Default modifiers (minimal editing capability)
+ */
+export declare const DEFAULT_MODIFIERS: ModifierIdentifier[];
+/**
+ * Zoom configuration
+ */
+export declare const ZOOM_CONFIG: {
+    readonly min: 50;
+    readonly max: 200;
+    readonly step: 10;
+    readonly default: 100;
+};
+/**
+ * Editor height configuration (pixels per row)
+ */
+export declare const EDITOR_HEIGHT_CONFIG: {
+    readonly lineHeight: 24;
+    readonly toolbarHeight: 60;
+};

package/dist/patterns/RichText/config/icons.d.ts

@@ -0,0 +1,26 @@
+import { LucideIcon } from 'lucide-react';
+import { ModifierType } from '../types';
+/**
+ * Icon map for all modifier types
+ */
+export declare const MODIFIER_ICONS: Record<ModifierType, LucideIcon>;
+/**
+ * Alignment-specific icons
+ */
+export declare const ALIGNMENT_ICONS: {
+    readonly left: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    readonly center: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    readonly right: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    readonly justify: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+};
+/**
+ * Zoom control icons
+ */
+export declare const ZOOM_ICONS: {
+    readonly in: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    readonly out: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+};
+/**
+ * Get icon for a modifier type
+ */
+export declare function getModifierIcon(modifier: ModifierType): LucideIcon;

package/dist/patterns/RichText/config/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rich Text Editor - Configuration Exports
+ */
+export { TEXT_COLORS, HIGHLIGHT_COLORS, isTextColor, isHighlightColor, isValidHexColor, getContrastColor, } from './colors';
+export type { TextColor, HighlightColor } from './colors';
+export { DEFAULT_EDITOR_PROPS, DEFAULT_MODIFIERS, ZOOM_CONFIG, EDITOR_HEIGHT_CONFIG } from './defaults';
+export { MODIFIER_ICONS, ALIGNMENT_ICONS, ZOOM_ICONS, getModifierIcon } from './icons';

package/dist/patterns/RichText/core/TipTapEditor.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { TipTapEditorProps } from '../types';
+/**
+ * TipTap Editor Component (Refactored)
+ */
+export declare const TipTapEditor: React.ForwardRefExoticComponent<Omit<TipTapEditorProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TipTapEditor;

package/dist/patterns/RichText/core/TipTapEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/patterns/RichText/examples/ControlledExample.d.ts

@@ -0,0 +1 @@
+export declare function ControlledExample(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/examples/FormWithValidationExample.d.ts

@@ -0,0 +1 @@
+export declare function FormWithValidationExample(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/extensions/index.d.ts

@@ -0,0 +1,22 @@
+import { Extensions } from '@tiptap/react';
+import { ModifierIdentifier, ModifierType } from '../types';
+/**
+ * Creates TipTap extensions array from modifier identifiers
+ *
+ * @param modifiers - Array of modifier identifiers to enable
+ * @returns Configured array of TipTap extensions
+ *
+ * @example
+ * const extensions = createExtensions(['bold', 'italic', { type: 'heading', level: 2 }]);
+ */
+export declare function createExtensions(modifiers: ModifierIdentifier[]): Extensions;
+/**
+ * Get all available modifier types that have extensions installed
+ */
+export declare function getAvailableModifiers(): ModifierType[];
+/**
+ * Check if a modifier is available (extension installed)
+ */
+export declare function isModifierAvailable(modifierType: ModifierType): boolean;
+export { getExtensionConfig, hasExtension } from './registry';
+export { extensionRegistry, helperExtensions } from './registry';

package/dist/patterns/RichText/extensions/registry.d.ts

@@ -0,0 +1,19 @@
+import { ExtensionRegistry } from '../types';
+/**
+ * Complete extension registry
+ * Maps each modifier type to its TipTap extension configuration
+ */
+export declare const extensionRegistry: ExtensionRegistry;
+/**
+ * Helper extensions that are always required
+ * These are fundamental to the editor but not exposed as modifiers
+ */
+export declare const helperExtensions: (import('@tiptap/core').Node<any, any> | import('@tiptap/core').Extension<any, any> | import('@tiptap/core').Mark<import('@tiptap/extension-text-style').TextStyleOptions, any>)[];
+/**
+ * Get extension config for a modifier type
+ */
+export declare function getExtensionConfig(modifierType: string): import('../types').ExtensionConfig<any> | undefined;
+/**
+ * Check if a modifier has an extension configured
+ */
+export declare function hasExtension(modifierType: string): boolean;

package/dist/patterns/RichText/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Rich Text Editor - Public API Exports
+ */
+export { RichTextArea } from './RichText';
+export type { RichTextAreaProps, EditorContentProps, EditorCounterProps, TipTapEditorProps } from './types';
+export { RICH_TEXT_PRESETS, getPreset } from './presets';
+export type { PresetName } from './presets';
+export type { ModifierIdentifier, ModifierType, HeadingLevel, TextAlignment, HeadingModifier, TextAlignModifier, TextColorModifier, HighlightModifier, LinkModifier, EditorContent, } from './types';
+export { isHeadingModifier, isTextAlignModifier, isTextColorModifier, isHighlightModifier, isLinkModifier, getModifierType, } from './types';
+export { TEXT_COLORS, HIGHLIGHT_COLORS } from './config';
+export type { TextColor, HighlightColor } from './config';

package/dist/patterns/RichText/presets.d.ts

@@ -0,0 +1,36 @@
+import { ModifierIdentifier } from './types';
+/**
+ * Preset configurations for common editor use cases
+ */
+export declare const RICH_TEXT_PRESETS: {
+    /**
+     * Simple editor with basic formatting
+     * Includes: bold, italic, lists, undo/redo
+     */
+    readonly simple: ModifierIdentifier[];
+    /**
+     * Blog post editor with essential formatting
+     * Includes: text formatting, headings (H2, H3), alignment, lists, links, quotes, undo/redo
+     */
+    readonly blog: ModifierIdentifier[];
+    /**
+     * Documentation editor with ALL features
+     * Includes: all formatting options (same as full preset)
+     */
+    readonly documentation: ModifierIdentifier[];
+    /**
+     * Comment editor with minimal formatting
+     * Includes: bold, italic, link, undo/redo
+     */
+    readonly comment: ModifierIdentifier[];
+    /**
+     * Full editor with all features
+     * Includes: all formatting options
+     */
+    readonly full: ModifierIdentifier[];
+};
+export type PresetName = keyof typeof RICH_TEXT_PRESETS;
+/**
+ * Get preset configuration by name
+ */
+export declare function getPreset(name: PresetName): ModifierIdentifier[];

package/dist/patterns/RichText/toolbar/Toolbar.d.ts

@@ -0,0 +1,34 @@
+import { Editor } from '@tiptap/react';
+import { ModifierIdentifier } from '../types';
+export interface ToolbarProps {
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor | null;
+    /**
+     * Active modifiers
+     */
+    modifiers: ModifierIdentifier[];
+    /**
+     * Current zoom level
+     */
+    zoom?: number;
+    /**
+     * Callback when zoom changes
+     */
+    onZoomChange?: (zoom: number) => void;
+    /**
+     * Whether toolbar should stick to top
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Main toolbar component
+ * Renders all toolbar sections based on active modifiers
+ */
+export declare function Toolbar({ editor, modifiers, zoom, onZoomChange, sticky, className }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/patterns/RichText/toolbar/ToolbarDivider.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Rich Text Editor - Toolbar Divider Component
+ *
+ * Visual separator between toolbar sections.
+ */
+export interface ToolbarDividerProps {
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Vertical divider for toolbar sections
+ */
+export declare function ToolbarDivider({ className }: ToolbarDividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/ToolbarSection.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ToolbarSectionProps {
+    /**
+     * Section content (toolbar buttons)
+     */
+    children: React.ReactNode;
+    /**
+     * Section identifier (for accessibility)
+     */
+    id?: string;
+    /**
+     * Optional section label (for screen readers)
+     */
+    label?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Whether to wrap buttons in a ButtonGroup
+     * @default true
+     */
+    useButtonGroup?: boolean;
+}
+/**
+ * Toolbar section component
+ * Groups related buttons together
+ */
+export declare function ToolbarSection({ children, id, label, className, useButtonGroup }: ToolbarSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/ColorPalette.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Rich Text Editor - Color Palette Component
+ *
+ * Grid of color circles for quick color selection.
+ */
+export interface ColorPaletteProps {
+    /**
+     * Array of hex color codes to display
+     */
+    colors: readonly string[];
+    /**
+     * Currently selected color (optional)
+     */
+    selectedColor?: string;
+    /**
+     * Callback when a color is selected
+     */
+    onColorSelect: (color: string) => void;
+    /**
+     * Number of columns in the grid
+     * @default 4
+     */
+    columns?: number;
+}
+/**
+ * Color palette with circular color swatches
+ */
+export declare function ColorPalette({ colors, selectedColor, onColorSelect, columns }: ColorPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/ColorPicker.d.ts

@@ -0,0 +1,29 @@
+import { Editor } from '@tiptap/react';
+export interface ColorPickerProps {
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor;
+    /**
+     * Color type (text color or highlight)
+     */
+    type: 'textColor' | 'highlight';
+    /**
+     * Whether to allow custom color input
+     * @default true
+     */
+    allowCustomColor?: boolean;
+    /**
+     * Button label
+     */
+    label: string;
+    /**
+     * Whether the button is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * Hybrid color picker component
+ * Combines predefined palette with custom color input
+ */
+export declare function ColorPicker({ editor, type, allowCustomColor, label, isDisabled }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/CustomColorInput.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Rich Text Editor - Custom Color Input Component
+ *
+ * Input field for entering custom hex color codes.
+ */
+export interface CustomColorInputProps {
+    /**
+     * Current color value
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Callback when color is applied
+     */
+    onApply: (color: string) => void;
+    /**
+     * Placeholder text
+     * @default '#000000'
+     */
+    placeholder?: string;
+}
+/**
+ * Custom color input with hex validation
+ */
+export declare function CustomColorInput({ value, onChange, onApply, placeholder }: CustomColorInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/HeadingDropdown.d.ts

@@ -0,0 +1,21 @@
+import { Editor } from '@tiptap/react';
+import { HeadingLevel } from '../../types';
+export interface HeadingDropdownProps {
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor;
+    /**
+     * Available heading levels to show
+     * @default [1, 2, 3, 4, 5, 6]
+     */
+    levels?: HeadingLevel[];
+    /**
+     * Whether the dropdown is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * Heading level selector dropdown
+ */
+export declare function HeadingDropdown({ editor, levels, isDisabled }: HeadingDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/ListDropdown.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from '@tiptap/react';
+export interface ListDropdownProps {
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor;
+    /**
+     * Available list types to show
+     * @default ['bulletList', 'orderedList', 'taskList']
+     */
+    types?: Array<'bulletList' | 'orderedList' | 'taskList'>;
+    /**
+     * Whether the dropdown is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * List type selector dropdown
+ */
+export declare function ListDropdown({ editor, types, isDisabled, }: ListDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/RichText/toolbar/components/ToolbarButton.d.ts

@@ -0,0 +1,40 @@
+import { LucideIcon } from 'lucide-react';
+export interface ToolbarButtonProps {
+    /**
+     * Icon component to display
+     */
+    icon: LucideIcon;
+    /**
+     * Button label (used for tooltip and accessibility)
+     */
+    label: string;
+    /**
+     * Whether the button represents an active state
+     */
+    isActive?: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick: () => void;
+    /**
+     * Optional keyboard shortcut to display in tooltip
+     */
+    shortcut?: string;
+    /**
+     * Icon size in pixels
+     * @default 16
+     */
+    iconSize?: number;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Standard toolbar button component
+ */
+export declare function ToolbarButton({ icon: Icon, label, isActive, isDisabled, onClick, shortcut, iconSize, className, }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;