@veevarts/design-system 0.1.16 → 0.1.18

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

@@ -1,28 +1,209 @@
+import { ButtonProps } from '@heroui/react';
+import { default as React } from 'react';
 /**
- * Stepper Pattern
- * TODO: Implement visual composition for step-by-step processes
- *
- * Requirements:
- * - Visual step indicators (completed, current, upcoming)
- * - Horizontal and vertical orientation
- * - Connecting lines between steps
- * - Clickable steps (optional)
- * - States: completed (green), current (blue), upcoming (gray)
- * - Show number or checkmark based on state
- * - Externally controlled state via props
- * - No business logic
- * - Strict TypeScript
+ * Props for the Stepper component
+ *
+ * @interface StepperProps
+ * @extends {React.HTMLAttributes<HTMLButtonElement>}
  */
-export interface Step {
-    id: string;
-    label: string;
-    description?: string;
-}
-export interface StepperProps {
-    steps: Step[];
-    currentStep: number;
-    orientation?: 'horizontal' | 'vertical';
-    onStepClick?: (stepIndex: number) => void;
-    allowStepClick?: boolean;
+export interface StepperProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Optional label displayed before the stepper to provide context.
+     *
+     * @example
+     * ```tsx
+     * <Stepper label="Step 2 of 4" stepsCount={4} />
+     * ```
+     */
+    label?: string;
+    /**
+     * Total number of steps in the sequence.
+     *
+     * @default 3
+     * @minimum 1
+     *
+     * @example
+     * ```tsx
+     * <Stepper stepsCount={5} /> // Creates 5 steps
+     * ```
+     */
+    stepsCount?: number;
+    /**
+     * The color theme for the stepper.
+     * Applies to active and completed steps.
+     *
+     * @default "primary"
+     *
+     * @example
+     * ```tsx
+     * <Stepper color="success" stepsCount={3} />
+     * ```
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The current active step index (zero-based).
+     * Use this prop for controlled mode.
+     *
+     * @controlled
+     *
+     * @example
+     * ```tsx
+     * const [step, setStep] = useState(0);
+     * <Stepper currentStep={step} onStepChange={setStep} />
+     * ```
+     */
+    currentStep?: number;
+    /**
+     * The initial step index for uncontrolled mode.
+     *
+     * @default 0
+     * @uncontrolled
+     *
+     * @example
+     * ```tsx
+     * <Stepper defaultStep={2} stepsCount={5} />
+     * ```
+     */
+    defaultStep?: number;
+    /**
+     * Whether to hide the connecting lines between steps.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <Stepper hideProgressBars stepsCount={4} /> // No progress bars
+     * ```
+     */
+    hideProgressBars?: boolean;
+    /**
+     * Custom CSS class for the stepper wrapper (ol element).
+     *
+     * @example
+     * ```tsx
+     * <Stepper className="gap-x-6" stepsCount={3} />
+     * ```
+     */
+    className?: string;
+    /**
+     * Custom CSS class applied to each individual step button.
+     *
+     * @example
+     * ```tsx
+     * <Stepper
+     *   stepClassName="hover:bg-gray-100"
+     *   stepsCount={3}
+     * />
+     * ```
+     */
+    stepClassName?: string;
+    /**
+     * Callback fired when the active step changes.
+     * Used in controlled mode.
+     *
+     * @param stepIndex - The new step index (zero-based)
+     *
+     * @example
+     * ```tsx
+     * <Stepper
+     *   onStepChange={(index) => console.log('Step:', index)}
+     *   stepsCount={4}
+     * />
+     * ```
+     */
+    onStepChange?: (stepIndex: number) => void;
 }
-export declare function Stepper(_props: StepperProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Stepper - A horizontal progress indicator for multi-step processes.
+ *
+ * @description
+ * The Stepper component displays a sequence of numbered steps that indicate progress
+ * through a multi-step workflow. Each step can be clicked to navigate between steps,
+ * and completed steps are marked with a checkmark.
+ *
+ * @component
+ *
+ * @features
+ * - **Three step states**: inactive (upcoming), active (current), complete (finished)
+ * - **Interactive navigation**: Click any step to jump to it
+ * - **Animated transitions**: Smooth color and checkmark animations
+ * - **Progress indicators**: Optional connecting lines show completion progress
+ * - **Controlled & uncontrolled**: Works in both modes
+ * - **Customizable colors**: Supports all HeroUI color variants
+ * - **Accessible**: Full ARIA support and keyboard navigation
+ *
+ * @accessibility
+ * - Uses semantic HTML (`<nav>`, `<ol>`, `<li>`)
+ * - Includes `aria-label="Progress"` on navigation
+ * - Active step marked with `aria-current="step"`
+ * - All steps are keyboard accessible via tab navigation
+ *
+ * @performance
+ * - Lazy loads Framer Motion animations
+ * - Memoizes color calculations
+ * - Uses CSS variables for theming
+ *
+ * @example
+ * **Basic uncontrolled stepper**
+ * ```tsx
+ * <Stepper stepsCount={4} defaultStep={0} />
+ * ```
+ *
+ * @example
+ * **Controlled stepper with callback**
+ * ```tsx
+ * function MyForm() {
+ *   const [currentStep, setCurrentStep] = useState(0);
+ *
+ *   return (
+ *     <Stepper
+ *       currentStep={currentStep}
+ *       onStepChange={setCurrentStep}
+ *       stepsCount={4}
+ *       color="primary"
+ *       label={`Step ${currentStep + 1} of 4`}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * **With validation (prevent forward navigation)**
+ * ```tsx
+ * function ValidatedStepper() {
+ *   const [step, setStep] = useState(0);
+ *   const [completed, setCompleted] = useState<number[]>([]);
+ *
+ *   const handleStepChange = (newStep: number) => {
+ *     // Only allow navigation to completed steps or current step
+ *     if (newStep <= step || completed.includes(newStep)) {
+ *       setStep(newStep);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <Stepper
+ *       currentStep={step}
+ *       onStepChange={handleStepChange}
+ *       stepsCount={5}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * **Custom styling**
+ * ```tsx
+ * <Stepper
+ *   stepsCount={3}
+ *   color="success"
+ *   className="gap-x-8"
+ *   stepClassName="hover:bg-gray-50 rounded-xl"
+ *   hideProgressBars
+ * />
+ * ```
+ *
+ * @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>>;

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

@@ -0,0 +1,4 @@
+/**
+ * Stepper Component Tests
+ */
+export {};

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

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

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

@@ -0,0 +1,2 @@
+import { StepperProps } from '../Stepper';
+export declare function InteractiveStepper(args: StepperProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,3 @@
+export { InteractiveStepper } from './InteractiveStepper';
+export { FormExampleStepper } from './FormExampleStepper';
+export { ValidationStepper } from './ValidationStepper';

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

@@ -1,2 +1,2 @@
 export { Stepper } from './Stepper';
-export type { StepperProps, Step } from './Stepper';
+export type { StepperProps } from './Stepper';

package/dist/patterns/index.d.ts

@@ -1,6 +1,8 @@
 export { Navbar } from './Navbar';
 export { Stepper } from './Stepper';
 export { Footer } from './Footer';
+export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
 export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
-export type { StepperProps, Step } from './Stepper';
+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.16",
+    "version": "0.1.18",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -14,6 +14,12 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
+        "test": "vitest --run",
+        "test:watch": "vitest",
+        "test:unit": "vitest --project unit --run",
+        "test:unit:watch": "vitest --project unit",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest --coverage --run",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
@@ -25,21 +31,33 @@
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "vite-plugin-dts": "latest",
-        "vite-plugin-css-injected-by-js": "latest"
+        "@tiptap/extension-color": "^2.12.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.12.0",
+        "@tiptap/react": "^2.12.0",
+        "@tiptap/starter-kit": "^2.12.0",
+        "lucide-react": "^0.562.0",
+        "vite-plugin-css-injected-by-js": "latest",
+        "vite-plugin-dts": "latest"
     },
     "devDependencies": {
-        "@heroui/react": "^2.8.7",
-        "framer-motion": "^11.15.0",
-        "react": "19.2.3",
-        "react-dom": "19.2.3",
         "@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",
         "@storybook/addon-vitest": "^10.0.8",
         "@storybook/react-vite": "^10.0.8",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -51,9 +69,13 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "eslint-plugin-storybook": "^10.0.8",
+        "framer-motion": "^11.15.0",
         "globals": "^16.5.0",
+        "jsdom": "^27.4.0",
         "playwright": "^1.56.1",
         "postcss": "^8.5.6",
+        "react": "19.2.3",
+        "react-dom": "19.2.3",
         "storybook": "^10.0.8",
         "tailwindcss": "^3.4.19",
         "typescript": "~5.9.3",