@veevarts/design-system 0.1.17 → 0.1.19

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

@@ -0,0 +1,151 @@
+import { ComponentProps } from 'react';
+import { Textarea } from '@heroui/react';
+import { ModifierIdentifier } from './modifiers';
+/**
+ * Editor content configuration props
+ */
+export interface EditorContentProps {
+    /**
+     * Whether the textarea should automatically grow vertically to accommodate content
+     * @default false
+     */
+    disableAutosize?: boolean;
+    /**
+     * Minimum number of rows to show for textarea
+     * @default 10
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * @default 30
+     */
+    maxRows?: number;
+    /**
+     * Reuse previously computed measurements when computing height of textarea
+     * @default false
+     */
+    cacheMeasurements?: boolean;
+    /**
+     * Function invoked on textarea height change
+     */
+    onHeightChange?: (height: number, meta: {
+        rowHeight: number;
+    }) => void;
+}
+/**
+ * Editor counter configuration props
+ */
+export interface EditorCounterProps {
+    /**
+     * 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;
+}
+/**
+ * Editor content data structure
+ */
+export interface EditorContent {
+    /**
+     * HTML representation of content
+     */
+    html: string;
+    /**
+     * JSON representation of content (ProseMirror document)
+     */
+    json: any;
+    /**
+     * Plain text content (stripped of formatting)
+     */
+    text: string;
+    /**
+     * Character count
+     */
+    characters: number;
+    /**
+     * Word count
+     */
+    words: number;
+}
+/**
+ * Main RichTextArea props interface
+ * This is a breaking change from the old API
+ */
+export interface RichTextAreaProps extends Omit<ComponentProps<typeof Textarea>, 'children'>, EditorContentProps, EditorCounterProps {
+    /**
+     * Editor adapter (future-proofing for other adapters)
+     * @default 'tiptap'
+     */
+    adapter?: 'tiptap';
+    /**
+     * Active modifiers configuration (type-safe)
+     * Replaces the old `activeModifiers` string array
+     *
+     * @default RICH_TEXT_PRESETS.full (all modifiers enabled)
+     *
+     * @example
+     * // Simple modifiers
+     * modifiers={['bold', 'italic', 'underline']}
+     *
+     * @example
+     * // Complex modifiers with configuration
+     * modifiers={[
+     *   'bold',
+     *   { type: 'heading', level: 2 },
+     *   { type: 'textColor', color: '#FF0000' }
+     * ]}
+     *
+     * @example
+     * // Using presets
+     * import { RICH_TEXT_PRESETS } from '@veevarts/design-system';
+     * modifiers={RICH_TEXT_PRESETS.blog}
+     */
+    modifiers?: ModifierIdentifier[];
+    /**
+     * Whether to show the toolbar
+     * @default true
+     */
+    showToolbar?: boolean;
+    /**
+     * Callback when content changes
+     * Provides HTML, JSON, and text representations
+     */
+    onContentChange?: (content: EditorContent) => void;
+    /**
+     * Initial content (HTML or JSON)
+     * Replaces `defaultValue` and `value` with a unified prop
+     */
+    initialContent?: string | object;
+    /**
+     * Controlled content value (HTML)
+     * For controlled component usage
+     */
+    content?: string;
+    /**
+     * Callback when editor content changes (controlled mode)
+     */
+    onUpdate?: (content: EditorContent) => void;
+}
+/**
+ * Internal TipTap editor props (for core/TipTapEditor.tsx)
+ */
+export interface TipTapEditorProps extends RichTextAreaProps {
+    /**
+     * Editor variant style
+     * @default 'bordered'
+     */
+    variant?: 'flat' | 'bordered' | 'faded' | 'underlined';
+}

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

@@ -0,0 +1,88 @@
+import { ModifierIdentifier, ModifierType } from './modifiers';
+/**
+ * Toolbar section configuration
+ * Groups related modifiers together in the toolbar
+ */
+export interface ToolbarSectionConfig {
+    /**
+     * Unique section identifier
+     */
+    id: string;
+    /**
+     * Modifiers to display in this section
+     */
+    modifiers: ModifierIdentifier[];
+    /**
+     * Whether to show a divider after this section
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * Optional section label (for accessibility)
+     */
+    label?: string;
+}
+/**
+ * Complete toolbar configuration
+ */
+export interface ToolbarConfig {
+    /**
+     * Toolbar sections in order
+     */
+    sections: ToolbarSectionConfig[];
+    /**
+     * Whether to show zoom controls
+     * @default false
+     */
+    showZoom?: boolean;
+    /**
+     * Whether toolbar should stick to top on scroll
+     * @default true
+     */
+    stickyPosition?: boolean;
+    /**
+     * Custom toolbar class names
+     */
+    className?: string;
+}
+/**
+ * Individual toolbar button state
+ */
+export interface ToolbarButtonState {
+    /**
+     * Whether the button represents an active state
+     * (e.g., bold is active when cursor is in bold text)
+     */
+    isActive: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the command can be executed
+     */
+    canExecute: boolean;
+}
+/**
+ * Complete toolbar state for all modifiers
+ */
+export type ToolbarState = Record<ModifierType, ToolbarButtonState>;
+/**
+ * Toolbar layout preset names
+ */
+export type ToolbarPreset = 'simple' | 'blog' | 'documentation' | 'comment' | 'full';
+/**
+ * Default toolbar section IDs
+ */
+export declare const TOOLBAR_SECTION_IDS: {
+    readonly TEXT_FORMATTING: "text-formatting";
+    readonly COLOR: "color";
+    readonly BLOCK_TYPE: "block-type";
+    readonly HEADING: "heading";
+    readonly ALIGNMENT: "alignment";
+    readonly LIST: "list";
+    readonly INSERT: "insert";
+    readonly HISTORY: "history";
+    readonly VIEW: "view";
+};
+export type ToolbarSectionId = (typeof TOOLBAR_SECTION_IDS)[keyof typeof TOOLBAR_SECTION_IDS];

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,6 +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';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "0.1.17",
+    "version": "0.1.19",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -31,8 +31,20 @@
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "vite-plugin-css-injected-by-js": "latest",
-        "vite-plugin-dts": "latest"
+        "@tiptap/extension-color": "^2.27.0",
+        "@tiptap/extension-highlight": "^2.27.2",
+        "@tiptap/extension-link": "^2.27.2",
+        "@tiptap/extension-placeholder": "^2.27.2",
+        "@tiptap/extension-task-item": "^2.27.2",
+        "@tiptap/extension-task-list": "^2.27.2",
+        "@tiptap/extension-text-align": "^2.27.2",
+        "@tiptap/extension-underline": "^2.27.2",
+        "@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": "3.5.2",
+        "vite-plugin-dts": "4.5.4"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^4.1.3",