@veevarts/design-system 0.1.16 → 0.1.18

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

@@ -0,0 +1,33 @@
+import { RichTextAreaProps } from './types';
+/**
+ * RichTextArea Component
+ *
+ * A powerful WYSIWYG rich text editor built on TipTap/ProseMirror.
+ *
+ * @example
+ * // Simple usage
+ * <RichTextArea
+ *   modifiers={['bold', 'italic', 'underline']}
+ *   label="Content"
+ *   placeholder="Start typing..."
+ * />
+ *
+ * @example
+ * // With heading levels
+ * <RichTextArea
+ *   modifiers={[
+ *     'bold',
+ *     { type: 'heading', level: 2 },
+ *     { type: 'heading', level: 3 },
+ *   ]}
+ * />
+ *
+ * @example
+ * // Using presets
+ * import { RICH_TEXT_PRESETS } from '@veevarts/design-system';
+ *
+ * <RichTextArea modifiers={RICH_TEXT_PRESETS.blog} />
+ */
+declare const RichTextArea: import('react').ForwardRefExoticComponent<Omit<RichTextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default RichTextArea;
+export type { RichTextAreaProps };

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 { default as RichTextArea } from './RichText';
+export type { RichTextAreaProps } from './RichText';
+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;

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

@@ -0,0 +1,35 @@
+/**
+ * Rich Text Editor - Zoom Controls Component
+ *
+ * Zoom in/out controls for editor content.
+ * Separated from editor state for clean architecture.
+ */
+export interface ZoomControlsProps {
+    /**
+     * Current zoom level (percentage)
+     */
+    zoom: number;
+    /**
+     * Callback when zoom changes
+     */
+    onZoomChange: (zoom: number) => void;
+    /**
+     * Minimum zoom level
+     * @default 50
+     */
+    min?: number;
+    /**
+     * Maximum zoom level
+     * @default 200
+     */
+    max?: number;
+    /**
+     * Zoom step increment
+     * @default 10
+     */
+    step?: number;
+}
+/**
+ * Zoom in/out controls with percentage display
+ */
+export declare function ZoomControls({ zoom, onZoomChange, min, max, step, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+/**
+ * Rich Text Editor - Toolbar Components Exports
+ */
+export { ToolbarButton } from './ToolbarButton';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export { HeadingDropdown } from './HeadingDropdown';
+export type { HeadingDropdownProps } from './HeadingDropdown';
+export { ListDropdown } from './ListDropdown';
+export type { ListDropdownProps } from './ListDropdown';
+export { ColorPalette } from './ColorPalette';
+export type { ColorPaletteProps } from './ColorPalette';
+export { CustomColorInput } from './CustomColorInput';
+export type { CustomColorInputProps } from './CustomColorInput';
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps } from './ColorPicker';
+export { ZoomControls } from './ZoomControls';
+export type { ZoomControlsProps } from './ZoomControls';

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

@@ -0,0 +1,6 @@
+/**
+ * Rich Text Editor - Toolbar Hooks Exports
+ */
+export { useToolbarState, getModifierState } from './useToolbarState';
+export { useToolbarCommands } from './useToolbarCommands';
+export { useZoomState } from './useZoomState';