@veevarts/design-system 0.1.18 → 0.1.21

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

@@ -1,33 +1,105 @@
 import { RichTextAreaProps } from './types';
 /**
- * RichTextArea Component
+ * @module RichTextArea
+ * @description A powerful WYSIWYG rich text editor built on TipTap/ProseMirror.
  *
- * 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
- * // Simple usage
+ * // Basic usage with default modifiers
+ * ```tsx
  * <RichTextArea
- *   modifiers={['bold', 'italic', 'underline']}
  *   label="Content"
  *   placeholder="Start typing..."
  * />
+ * ```
  *
  * @example
- * // With heading levels
+ * // With specific modifiers
+ * ```tsx
  * <RichTextArea
- *   modifiers={[
- *     'bold',
- *     { type: 'heading', level: 2 },
- *     { type: 'heading', level: 3 },
- *   ]}
+ *   modifiers={['bold', 'italic', { type: 'heading', level: 2 }, 'bulletList']}
+ *   label="Blog Post"
+ *   placeholder="Write your blog post here..."
  * />
+ * ```
  *
  * @example
- * // Using presets
+ * // Using a preset (e.g., for a blog)
+ * ```tsx
  * import { RICH_TEXT_PRESETS } from '@veevarts/design-system';
  *
- * <RichTextArea modifiers={RICH_TEXT_PRESETS.blog} />
+ * <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
  */
-declare const RichTextArea: import('react').ForwardRefExoticComponent<Omit<RichTextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
-export default RichTextArea;
-export type { RichTextAreaProps };
+export declare const RichTextArea: import('react').ForwardRefExoticComponent<Omit<RichTextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,5 +1,7 @@
-import { Extensions } from '@tiptap/react';
+import { Extension, Node, Mark } from '@tiptap/core';
 import { ModifierIdentifier, ModifierType } from '../types';
+type AnyExtension = Extension<unknown, unknown> | Node<unknown, unknown> | Mark<unknown, unknown>;
+type Extensions = AnyExtension[];
 /**
  * Creates TipTap extensions array from modifier identifiers
  *

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

@@ -1,8 +1,8 @@
 /**
  * Rich Text Editor - Public API Exports
  */
-export { default as RichTextArea } from './RichText';
-export type { RichTextAreaProps } from './RichText';
+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';

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

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { Textarea } from '@heroui/react';
+import { JSONContent } from '@tiptap/core';
 import { ModifierIdentifier } from './modifiers';
-import { ToolbarConfig } from './toolbar';
 /**
  * Editor content configuration props
  */
@@ -67,7 +67,7 @@ export interface EditorContent {
     /**
      * JSON representation of content (ProseMirror document)
      */
-    json: any;
+    json: JSONContent;
     /**
      * Plain text content (stripped of formatting)
      */
@@ -115,11 +115,6 @@ export interface RichTextAreaProps extends Omit<ComponentProps<typeof Textarea>,
      * modifiers={RICH_TEXT_PRESETS.blog}
      */
     modifiers?: ModifierIdentifier[];
-    /**
-     * Toolbar configuration (optional custom layout)
-     * If not provided, a default layout will be generated from modifiers
-     */
-    toolbarConfig?: ToolbarConfig;
     /**
      * Whether to show the toolbar
      * @default true

package/dist/patterns/Stepper/Stepper.d.ts

@@ -6,7 +6,7 @@ import { default as React } from 'react';
  * @interface StepperProps
  * @extends {React.HTMLAttributes<HTMLButtonElement>}
  */
-export interface StepperProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Optional label displayed before the stepper to provide context.
      *
@@ -206,4 +206,4 @@ export interface StepperProps extends React.HTMLAttributes<HTMLButtonElement> {
  * @see {@link StepperProps} for all available props
  * @see {@link https://storybook.heroui.com Storybook} for interactive examples
  */
-export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;

package/dist/patterns/index.d.ts

@@ -1,8 +1,8 @@
 export { Navbar } from './Navbar';
 export { Stepper } from './Stepper';
 export { Footer } from './Footer';
+export type { RichTextAreaProps } from './RichText';
 export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
 export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
 export type { StepperProps } from './Stepper';
 export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';
-export type { RichTextAreaProps } from './RichText';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "0.1.18",
+    "version": "0.1.21",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -26,12 +26,31 @@
     },
     "peerDependencies": {
         "@heroui/react": ">=2.7.0",
+        "@tiptap/extension-color": "^2.27.0",
+        "@tiptap/extension-highlight": "^2.27.0",
+        "@tiptap/extension-link": "^2.27.0",
+        "@tiptap/extension-placeholder": "^2.27.0",
+        "@tiptap/extension-task-item": "^2.27.0",
+        "@tiptap/extension-task-list": "^2.27.0",
+        "@tiptap/extension-text-align": "^2.27.0",
+        "@tiptap/extension-underline": "^2.27.0",
+        "@tiptap/pm": "^2.27.0",
+        "@tiptap/react": "^2.27.0",
+        "@tiptap/starter-kit": "^2.27.0",
         "framer-motion": ">=11.5.6",
+        "lucide-react": "^0.562.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "@tiptap/extension-color": "^2.12.0",
+        "vite-plugin-css-injected-by-js": "3.5.2",
+        "vite-plugin-dts": "4.5.4"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^4.1.3",
+        "@eslint/js": "^9.39.1",
+        "@heroui/react": "^2.8.7",
+        "@tiptap/extension-color": "^2.27.0",
         "@tiptap/extension-highlight": "^2.27.2",
         "@tiptap/extension-link": "^2.27.2",
         "@tiptap/extension-placeholder": "^2.27.2",
@@ -39,17 +58,10 @@
         "@tiptap/extension-task-list": "^2.27.2",
         "@tiptap/extension-text-align": "^2.27.2",
         "@tiptap/extension-underline": "^2.27.2",
-        "@tiptap/pm": "^2.12.0",
-        "@tiptap/react": "^2.12.0",
-        "@tiptap/starter-kit": "^2.12.0",
+        "@tiptap/pm": "^2.27.0",
+        "@tiptap/react": "^2.27.0",
+        "@tiptap/starter-kit": "^2.27.0",
         "lucide-react": "^0.562.0",
-        "vite-plugin-css-injected-by-js": "latest",
-        "vite-plugin-dts": "latest"
-    },
-    "devDependencies": {
-        "@chromatic-com/storybook": "^4.1.3",
-        "@eslint/js": "^9.39.1",
-        "@heroui/react": "^2.8.7",
         "@storybook/addon-a11y": "^10.0.8",
         "@storybook/addon-docs": "^10.0.8",
         "@storybook/addon-onboarding": "^10.0.8",