@veevarts/design-system 0.1.23 → 1.0.0-alpha.4

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

@@ -5,5 +5,5 @@
  * Ensures exclusive selection (preset OR custom).
  */
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, } from './types';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps } from './types';
 export { formatCurrency, parseCurrency } from './utils/currency';

package/dist/patterns/EventDetails/EventDetails.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'react';
+/**
+ * @interface EventDetailsProps
+ * @description Defines the properties required to render event details in a card layout.
+ */
+export interface EventDetailsProps {
+    /** @property {string} name - The name/title of the event. */
+    name: string;
+    /** @property {string} [imageUrl] - Optional URL for the event's background image. */
+    imageUrl?: string;
+    /** @property {string} eventDate - The date of the event (e.g., 'July 10, 2025'). */
+    eventDate: string;
+    /** @property {string} [eventTime] - Optional time of the event (e.g., '10:00 AM'). */
+    eventTime?: string;
+    /** @property {string} [location] - Optional location where the event takes place. */
+    location?: string;
+    /** @property {string} [description] - Optional description or details about the event. */
+    description?: string;
+    /** @property {string} [classes] - Optional Tailwind CSS utility classes for custom styling. */
+    classes?: string;
+    /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
+    showImage?: boolean;
+    /** @property {string} [showMoreButtonClassName] - Optional Tailwind CSS utility classes for the 'Show more/less' button. */
+    showMoreButtonClassName?: string;
+    /** @property {Object} labels - Labels for the event details, used for localization. */
+    labels: {
+        eventInformation: string;
+        showMore?: string;
+        showLess?: string;
+    };
+}
+/**
+ * @function EventDetails
+ * @description Displays a card with event information such as name, image, date, time, location, and description.
+ */
+declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export default EventDetails;

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

@@ -0,0 +1,2 @@
+export { default } from './EventDetails';
+export * from './EventDetails';

package/dist/patterns/ExpireCartTimer/ExpireCartTimer.d.ts

@@ -0,0 +1,249 @@
+import { default as React, ComponentProps } from 'react';
+import { LucideIcon } from 'lucide-react';
+/**
+ * Props for the ExpireCartTimer component
+ *
+ * @interface ExpireCartTimerProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface ExpireCartTimerProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * The current time left in seconds (controlled mode).
+     * When provided, the component is controlled and will not manage its own state.
+     *
+     * @controlled
+     *
+     * @example
+     * ```tsx
+     * const [time, setTime] = useState(1200);
+     * <ExpireCartTimer timeLeft={time} onTimeChange={setTime} />
+     * ```
+     */
+    timeLeft?: number;
+    /**
+     * The initial time left in seconds (uncontrolled mode).
+     * Used when `timeLeft` is not provided.
+     *
+     * @default 1200 (20 minutes)
+     * @uncontrolled
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer defaultTimeLeft={600} /> // 10 minutes
+     * ```
+     */
+    defaultTimeLeft?: number;
+    /**
+     * Callback fired when the time left changes.
+     * Used in controlled mode to sync external state.
+     *
+     * @param seconds - The new time left in seconds
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer
+     *   timeLeft={time}
+     *   onTimeChange={(seconds) => {
+     *     setTime(seconds);
+     *     // Sync with server, localStorage, etc.
+     *   }}
+     * />
+     * ```
+     */
+    onTimeChange?: (seconds: number) => void;
+    /**
+     * Callback fired when the timer reaches zero.
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer
+     *   defaultTimeLeft={300}
+     *   onExpire={() => {
+     *     // Clear cart, redirect, show message, etc.
+     *     console.log('Time expired!');
+     *   }}
+     * />
+     * ```
+     */
+    onExpire?: () => void;
+    /**
+     * Visual variant of the timer.
+     * Affects the overall styling and semantic meaning.
+     *
+     * @default 'info'
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer variant="warning" /> // Warning style
+     * <ExpireCartTimer variant="error" /> // Error style
+     * ```
+     */
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    /**
+     * Color theme for the timer.
+     * Uses HeroUI color system.
+     *
+     * @default 'primary'
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer color="warning" /> // Orange/yellow theme
+     * <ExpireCartTimer color="danger" /> // Red theme
+     * ```
+     */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+    /**
+     * The message text displayed before the timer.
+     *
+     * @default "Your cart expires in:"
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer message="Limited offer ends in:" />
+     * ```
+     */
+    message?: string;
+    /**
+     * Whether to show the icon.
+     *
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer showIcon={false} />
+     * ```
+     */
+    showIcon?: boolean;
+    /**
+     * Custom icon component from Lucide React or custom SVG component.
+     * If not provided, a default clock icon based on variant will be used.
+     *
+     * @example
+     * ```tsx
+     * import { AlertCircle } from 'lucide-react';
+     * <ExpireCartTimer icon={AlertCircle} />
+     * ```
+     */
+    icon?: LucideIcon | React.ComponentType<ComponentProps<'svg'>>;
+    /**
+     * Position of the timer.
+     *
+     * @default 'fixed'
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer position="sticky" /> // Sticks to top when scrolling
+     * ```
+     */
+    position?: 'fixed' | 'sticky' | 'static';
+    /**
+     * Whether to automatically start the countdown.
+     * When false, the timer will not count down until manually started.
+     *
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer autoStart={false} defaultTimeLeft={300} />
+     * // Timer paused until user action
+     * ```
+     */
+    autoStart?: boolean;
+    /**
+     * Custom function to format the time display.
+     * Receives seconds and should return a formatted string.
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer
+     *   formatTime={(seconds) => {
+     *     const h = Math.floor(seconds / 3600);
+     *     const m = Math.floor((seconds % 3600) / 60);
+     *     const s = seconds % 60;
+     *     return `${h}h ${m}m ${s}s`;
+     *   }}
+     * />
+     * ```
+     */
+    formatTime?: (seconds: number) => string;
+    /**
+     * Custom CSS class for the timer container.
+     *
+     * @example
+     * ```tsx
+     * <ExpireCartTimer className="shadow-lg" />
+     * ```
+     */
+    className?: string;
+}
+/**
+ * ExpireCartTimer - A flexible countdown timer component.
+ *
+ * @description
+ * The ExpireCartTimer component displays a countdown timer with customizable appearance,
+ * behavior, and messaging. It supports both controlled and uncontrolled modes,
+ * making it suitable for various use cases like cart expiration, limited-time
+ * offers, or session timeouts.
+ *
+ * @component
+ *
+ * @features
+ * - **Controlled & Uncontrolled**: Works in both modes
+ * - **Customizable appearance**: Variants, colors, icons, and messages
+ * - **Flexible positioning**: Fixed, sticky, or static
+ * - **Auto-start control**: Pause/resume countdown
+ * - **Custom time formatting**: Format time display as needed
+ * - **Accessible**: ARIA labels and live regions
+ * - **Responsive**: Mobile-first design
+ *
+ * @accessibility
+ * - Uses `aria-live="polite"` for time announcements
+ * - Includes descriptive `role="banner"`
+ * - Time display is announced to screen readers
+ *
+ * @example
+ * **Basic uncontrolled timer**
+ * ```tsx
+ * <ExpireCartTimer defaultTimeLeft={1200} />
+ * ```
+ *
+ * @example
+ * **Controlled timer with expiration handler**
+ * ```tsx
+ * function CartTimer() {
+ *   const [timeLeft, setTimeLeft] = useState(1200);
+ *
+ *   return (
+ *     <ExpireCartTimer
+ *       timeLeft={timeLeft}
+ *       onTimeChange={setTimeLeft}
+ *       onExpire={() => {
+ *         // Clear cart or redirect
+ *         clearCart();
+ *       }}
+ *       variant="warning"
+ *       color="warning"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * **Custom formatting and styling**
+ * ```tsx
+ * <ExpireCartTimer
+ *   defaultTimeLeft={3600}
+ *   formatTime={(seconds) => {
+ *     const h = Math.floor(seconds / 3600);
+ *     const m = Math.floor((seconds % 60) / 60);
+ *     return `${h}h ${m}m remaining`;
+ *   }}
+ *   message="Sale ends in:"
+ *   variant="error"
+ *   color="danger"
+ * />
+ * ```
+ *
+ * @see {@link ExpireCartTimerProps} for all available props
+ */
+export declare const ExpireCartTimer: React.ForwardRefExoticComponent<Omit<ExpireCartTimerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1 @@
+export * from './ExpireCartTimer';

package/dist/patterns/Footer/Footer.d.ts

@@ -1,21 +1,4 @@
-import { ReactNode } from 'react';
-export interface FooterLink {
-    label: string;
-    href: string;
-}
-export interface FooterSection {
-    title: string;
-    links: FooterLink[];
-}
-export interface SocialLink {
-    platform: string;
-    href: string;
-    icon?: ReactNode;
-}
-export interface FooterProps {
-    sections?: FooterSection[];
-    socialLinks?: SocialLink[];
-    copyrightText?: string;
-    logo?: ReactNode;
-}
-export declare function Footer(_props: FooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Footer Component
+ */
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +1 @@
 export { Footer } from './Footer';
-export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';

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

@@ -103,3 +103,4 @@ import { RichTextAreaProps } from './types';
  * @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>>;
+export type { RichTextAreaProps };

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

@@ -26,9 +26,16 @@ export interface ToolbarProps {
      * Custom class name
      */
     className?: string;
+    /**
+     * Callback when a toolbar action is executed
+     */
+    onToolbarAction?: (action: {
+        type: string;
+        modifier: string;
+    }) => void;
 }
 /**
  * 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;
+export declare function Toolbar({ editor, modifiers, zoom, onZoomChange, sticky, className, onToolbarAction, }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -4,9 +4,13 @@ import { ModifierType, ModifierConfig } from '../../types';
  * Hook to execute toolbar commands
  *
  * @param editor - TipTap editor instance
+ * @param onToolbarAction - Optional callback for logging/analytics
  * @returns Command execution functions
  */
-export declare function useToolbarCommands(editor: Editor | null): {
+export declare function useToolbarCommands(editor: Editor | null, onToolbarAction?: (action: {
+    type: string;
+    modifier: string;
+}) => void): {
     executeCommand: (modifierType: ModifierType, config?: ModifierConfig) => void;
     toggleModifier: (modifierType: ModifierType) => void;
     canExecute: (modifierType: ModifierType, config?: ModifierConfig) => boolean;

package/dist/patterns/RichText/toolbar/sections/TextFormattingSection.d.ts

@@ -3,5 +3,9 @@ import { ModifierIdentifier } from '../../types';
 export interface TextFormattingSectionProps {
     editor: Editor | null;
     modifiers: ModifierIdentifier[];
+    onToolbarAction?: (action: {
+        type: string;
+        modifier: string;
+    }) => void;
 }
-export declare function TextFormattingSection({ editor, modifiers }: TextFormattingSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TextFormattingSection({ editor, modifiers, onToolbarAction }: TextFormattingSectionProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -139,6 +139,14 @@ export interface RichTextAreaProps extends Omit<ComponentProps<typeof Textarea>,
      * Callback when editor content changes (controlled mode)
      */
     onUpdate?: (content: EditorContent) => void;
+    /**
+     * Callback when a toolbar action is executed
+     * Useful for logging/analytics
+     */
+    onToolbarAction?: (action: {
+        type: string;
+        modifier: string;
+    }) => void;
 }
 /**
  * Internal TipTap editor props (for core/TipTapEditor.tsx)

package/dist/patterns/index.d.ts

@@ -1,10 +1,12 @@
+export * from './EventDetails';
 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 { DonationAmounts } from './DonationAmounts';
+export { ExpireCartTimer } from './ExpireCartTimer';
 export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
 export type { StepperProps } from './Stepper';
-export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';
 export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';
+export type { ExpireCartTimerProps } from './ExpireCartTimer';

package/dist/templates/ConfirmationPageTemplate/ConfirmationPageTemplate.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { NavbarProps } from '../../patterns/Navbar';
-import { FooterProps } from '../../patterns/Footer';
 export interface ConfirmationDetails {
     title: string;
     message: string;
@@ -12,7 +11,6 @@ export interface ConfirmationDetails {
 }
 export interface ConfirmationPageTemplateProps {
     navbar?: NavbarProps;
-    footer?: FooterProps;
     confirmation: ConfirmationDetails;
     primaryAction?: {
         label: string;

package/dist/templates/EventDetailsTemplate/EventDetailsTemplate.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { NavbarProps } from '../../patterns/Navbar';
 import { StepperProps } from '../../patterns/Stepper';
-import { FooterProps } from '../../patterns/Footer';
 export interface EventInfo {
     title: string;
     description: string;
@@ -16,7 +15,6 @@ export interface EventInfo {
 }
 export interface EventDetailsTemplateProps {
     navbar?: NavbarProps;
-    footer?: FooterProps;
     stepper?: StepperProps;
     event: EventInfo;
     primaryAction?: {

package/dist/theme/index.d.ts

@@ -23,12 +23,12 @@ export declare const theme: {
             readonly 200: "#e5e7eb";
             readonly 300: "#d1d5db";
             readonly 400: "#9ca3af";
-            readonly 500: "#000000";
+            readonly 500: any;
             readonly 600: "#000000";
             readonly 700: "#000000";
             readonly 800: "#000000";
             readonly 900: "#000000";
-            readonly DEFAULT: "#000000";
+            readonly DEFAULT: any;
         };
     };
 };

package/dist/tokens/colors.d.ts

@@ -5,14 +5,13 @@
 export declare const colors: {
     readonly brand: {
         readonly primary: "#C14615";
-        readonly secondary: "#000000";
-        readonly accent: "#F59E0B";
     };
     readonly semantic: {
-        readonly success: "#10B981";
-        readonly warning: "#F59E0B";
-        readonly error: "#EF4444";
-        readonly info: "#3B82F6";
+        readonly secondary: "#000000";
+        readonly success: "#057A54";
+        readonly warning: "#F5A524";
+        readonly danger: "#B62214";
+        readonly info: "#2563EB";
     };
     readonly neutral: {
         readonly white: "#FFFFFF";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "0.1.23",
+    "version": "1.0.0-alpha.4",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -16,6 +16,7 @@
         "preview": "vite preview",
         "test": "vitest --run",
         "test:watch": "vitest",
+        "test:storybook": "vitest --project storybook --run",
         "test:unit": "vitest --project unit --run",
         "test:unit:watch": "vitest --project unit",
         "test:ui": "vitest --ui",
@@ -23,11 +24,7 @@
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod",
-        "prepublishOnly": "npm run test && npm run lint && npm run build",
-        "publish:patch": "npm version patch && npm publish && git push origin main --tags",
-        "publish:minor": "npm version minor && npm publish && git push origin main --tags",
-        "publish:major": "npm version major && npm publish && git push origin main --tags",
-        "publish:beta": "npm version prerelease --preid=beta && npm publish --tag beta && git push origin main --tags"
+        "prepublishOnly": "npm run test && npm run lint && npm run build"
     },
     "peerDependencies": {
         "@heroui/react": ">=2.7.0",
@@ -49,6 +46,7 @@
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
+        "@iconify/react": "^6.0.2",
         "vite-plugin-css-injected-by-js": "3.5.2",
         "vite-plugin-dts": "4.5.4"
     },
@@ -56,6 +54,15 @@
         "@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",
+        "@tailwindcss/line-clamp": "^0.4.4",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
         "@tiptap/extension-color": "^2.27.0",
         "@tiptap/extension-highlight": "^2.27.2",
         "@tiptap/extension-link": "^2.27.2",
@@ -67,15 +74,6 @@
         "@tiptap/pm": "^2.27.0",
         "@tiptap/react": "^2.27.0",
         "@tiptap/starter-kit": "^2.27.0",
-        "lucide-react": "^0.562.0",
-        "@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",
@@ -90,6 +88,7 @@
         "framer-motion": "^11.15.0",
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
+        "lucide-react": "^0.562.0",
         "playwright": "^1.56.1",
         "postcss": "^8.5.6",
         "react": "19.2.3",

package/dist/components/Footer/Footer.d.ts

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

package/dist/components/Footer/index.d.ts

@@ -1 +0,0 @@
-export { Footer } from './Footer';