@veevarts/design-system 1.0.0-alpha.3 → 1.0.0-alpha.6

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/Navbar/Navbar.d.ts

@@ -1,4 +1,15 @@
-import { ReactNode } from 'react';
+/**
+ * Navbar Component
+ *
+ * A flexible, stateless navigation bar pattern for React apps.
+ *
+ * Features:
+ * - Logo on the left (image URL via `logo` prop)
+ * - Language selector dropdown with a globe icon (disabled if no languages)
+ * - Login/Logout button with user icon, fully controlled via props
+ * - All state and actions (login, logout, language change) are controlled by parent via props
+ * - Strictly typed with TypeScript
+ */
 export interface NavbarLink {
     label: string;
     href: string;
@@ -8,17 +19,22 @@ export interface NavbarLanguage {
     code: string;
     label: string;
 }
+export interface NavbarLabels {
+    login: string;
+    logout: string;
+    selectLanguage: string;
+}
 export interface NavbarProps {
-    logo?: ReactNode;
-    links?: NavbarLink[];
+    logo?: string;
     languages?: NavbarLanguage[];
     selectedLanguage?: string;
     onLanguageChange?: (languageCode: string) => void;
     isLoggedIn?: boolean;
-    userEmail?: string;
+    hasLanguages?: boolean;
+    hasAuth?: boolean;
     onLogin?: () => void;
     onLogout?: () => void;
-    loginLabel?: string;
-    logoutLabel?: string;
+    labels?: Partial<NavbarLabels>;
+    className?: string;
 }
-export declare function Navbar(_props: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Navbar({ logo, languages, selectedLanguage, onLanguageChange, isLoggedIn, onLogin, onLogout, hasLanguages, hasAuth, labels, className, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/patterns/index.d.ts

@@ -1,9 +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 { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';
+export type { ExpireCartTimerProps } from './ExpireCartTimer';

package/dist/tokens/colors.d.ts

@@ -6,13 +6,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": "1.0.0-alpha.3",
+    "version": "1.0.0-alpha.6",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -14,7 +14,7 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
-        "test": "vitest --project unit --run",
+        "test": "vitest --run",
         "test:watch": "vitest",
         "test:storybook": "vitest --project storybook --run",
         "test:unit": "vitest --project unit --run",
@@ -46,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"
     },
@@ -53,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",
@@ -64,16 +74,7 @@
         "@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/node": "^24.10.9",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
@@ -87,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",