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

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

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { OfferCardProps } from './types';
+/**
+ * OfferCard component displays a single offer with quantity selection controls.
+ * Provides visual feedback for sold out status and maximum ticket limits.
+ * Supports slot-based customization for all rendered elements.
+ */
+export declare const OfferCard: {
+    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, classNames, "data-testid": dataTestId, selectedColor, }: OfferCardProps): JSX.Element;
+    displayName: string;
+};
+export default OfferCard;

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

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

package/dist/patterns/OfferCard/OfferCardEmpty.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { OfferCardEmptyProps } from './types';
+/**
+ * OfferCardEmpty component renders a visually informative empty state
+ * when there are no offers to display. It includes an icon and a message
+ * that can be customized via props.
+ */
+export declare const OfferCardEmpty: {
+    ({ message, icon, iconSize, showCard, classNames, renderEmpty, }: OfferCardEmptyProps): JSX.Element;
+    displayName: string;
+};
+export default OfferCardEmpty;

package/dist/patterns/OfferCard/OfferCardError.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { OfferCardErrorProps } from './types';
+/**
+ * OfferCardError component renders an alert with error information
+ * when the offers cannot be loaded. Supports custom error messages
+ * and color variants for different error severity levels.
+ */
+export declare const OfferCardError: {
+    ({ error, labels: customLabels, showCard, color, classNames, }: OfferCardErrorProps): JSX.Element;
+    displayName: string;
+};
+export default OfferCardError;

package/dist/patterns/OfferCard/OfferCardList.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { OfferCardListProps } from './types';
+/**
+ * OfferCardList component displays a collection of offer cards in a responsive grid.
+ * It manages selection state internally or accepts external control via props.
+ * When animated is true, cards animate in/out using Framer Motion variants.
+ */
+export declare const OfferCardList: {
+    ({ offers, selection: selectionProp, defaultSelection, onSelectionChange, onQuantityChange, currency, locale, labels, slots, isDisabled, buttonVariant, buttonColor, showCard, animated, gap, classNames, }: OfferCardListProps): JSX.Element;
+    displayName: string;
+};
+export default OfferCardList;

package/dist/patterns/OfferCard/OfferCardSkeleton.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { OfferCardSkeletonProps } from './types';
+/**
+ * OfferCardSkeleton component renders placeholder cards with animated skeletons
+ * that mimic the structure of actual offer cards. This provides visual feedback
+ * to users while content is loading.
+ */
+export declare const OfferCardSkeleton: {
+    ({ quantity, gap, classNames }: OfferCardSkeletonProps): JSX.Element;
+    displayName: string;
+};
+export default OfferCardSkeleton;

package/dist/patterns/OfferCard/animations.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @description Variants for the offer list animation.
+ * This includes the initial hidden state and the final visible state.
+ */
+export declare const offerListVariants: {
+    hidden: {
+        opacity: number;
+    };
+    show: {
+        opacity: number;
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+};
+/**
+ * @description Variants for the offer card animation.
+ * This includes the initial hidden state, the final visible state, and the exit state.
+ */
+export declare const offerCardVariants: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    show: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    exit: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

package/dist/patterns/OfferCard/examples/CustomQuantitySelectorExample.d.ts

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

package/dist/patterns/OfferCard/examples/ListWithEurosCurrencyExample.d.ts

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

package/dist/patterns/OfferCard/examples/ListWithoutAnimationExample.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './CustomQuantitySelectorExample';
+export * from './ListWithEurosCurrencyExample';
+export * from './ListWithoutAnimationExample';

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

@@ -0,0 +1,14 @@
+/**
+ * OfferCard Pattern
+ *
+ * A complete pattern for displaying offers with quantity selection,
+ * price formatting, and various states (loading, error, empty).
+ */
+export { OfferCard, default as OfferCardDefault } from './OfferCard';
+export { OfferCardList } from './OfferCardList';
+export { OfferCardSkeleton } from './OfferCardSkeleton';
+export { OfferCardError } from './OfferCardError';
+export { OfferCardEmpty } from './OfferCardEmpty';
+export type { Offer, OfferSelection, OfferCardLabels, OfferCardErrorLabels, OfferCardClassNames, OfferCardListClassNames, OfferCardSkeletonClassNames, OfferCardErrorClassNames, OfferCardEmptyClassNames, OfferCardSlots, OfferCardProps, OfferCardListProps, OfferCardSkeletonProps, OfferCardErrorProps, OfferCardEmptyProps, } from './types';
+export { offerListVariants, offerCardVariants } from './animations';
+export { formatCurrency, parseCurrency } from './utils/currency';