@veevarts/design-system 0.1.22 → 1.0.0-alpha.10

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { DonationAmountsProps } from './types';
+/**
+ * DonationAmounts component for selecting donation values
+ */
+export declare const DonationAmounts: React.FC<DonationAmountsProps>;
+export default DonationAmounts;

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * DonationAmounts Pattern
+ *
+ * A component for selecting donation amounts with preset options and custom input.
+ * Ensures exclusive selection (preset OR custom).
+ */
+export { DonationAmounts } from './DonationAmounts';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps } from './types';
+export { formatCurrency, parseCurrency } from './utils/currency';

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

@@ -0,0 +1,145 @@
+/**
+ * DonationAmounts - Type Definitions
+ */
+/**
+ * Represents a preset donation amount option
+ */
+export interface DonationAmount {
+    /**
+     * Unique identifier for the amount
+     */
+    id: string;
+    /**
+     * The numerical value of the donation
+     */
+    amount: number;
+    /**
+     * Optional label to display instead of the amount
+     * If not provided, the formatted currency will be used
+     */
+    label?: string;
+}
+/**
+ * Selected donation value (can be preset or custom)
+ */
+export interface SelectedDonation {
+    /**
+     * The selected amount
+     */
+    amount: number;
+    /**
+     * Whether this is a custom amount
+     */
+    isCustom: boolean;
+    /**
+     * ID of the preset (if not custom)
+     */
+    presetId?: string;
+}
+/**
+ * Labels for internationalization
+ */
+export interface DonationLabels {
+    /**
+     * Title text (e.g., "Donation Amount")
+     */
+    title?: string;
+    /**
+     * Placeholder for custom amount input
+     */
+    customAmountPlaceholder?: string;
+    /**
+     * Aria label for custom amount input
+     */
+    customAmountAriaLabel?: string;
+}
+/**
+ * Props for DonationAmounts component
+ */
+export interface DonationAmountsProps {
+    /**
+     * Array of preset donation amounts to display as buttons
+     * @default [100, 250, 500, 1000, 2000]
+     */
+    presetAmounts?: DonationAmount[];
+    /**
+     * Currently selected donation (controlled mode)
+     */
+    selectedDonation?: SelectedDonation | null;
+    /**
+     * Default selected donation (uncontrolled mode)
+     */
+    defaultSelectedDonation?: SelectedDonation | null;
+    /**
+     * Callback fired when donation selection changes
+     */
+    onChange?: (donation: SelectedDonation | null) => void;
+    /**
+     * Currency code (ISO 4217)
+     * @default 'USD'
+     */
+    currency?: string;
+    /**
+     * Locale for currency formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Whether to show the custom amount input
+     * @default true
+     */
+    showCustomAmount?: boolean;
+    /**
+     * Minimum allowed custom amount
+     * @default 0.5
+     */
+    minCustomAmount?: number;
+    /**
+     * Maximum allowed custom amount
+     * @default 1000000
+     */
+    maxCustomAmount?: number;
+    /**
+     * Labels for internationalization
+     */
+    labels?: DonationLabels;
+    /**
+     * Number of columns for preset buttons on mobile
+     * @default 2
+     */
+    mobileColumns?: 2 | 3;
+    /**
+     * Number of columns for preset buttons on desktop
+     * @default 3
+     */
+    desktopColumns?: 3 | 4 | 5 | 6;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Button variant for preset amounts
+     * @default 'bordered'
+     */
+    buttonVariant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost';
+    /**
+     * Button color for preset amounts
+     * @default 'default'
+     */
+    buttonColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Input variant for custom amount
+     * @default 'bordered'
+     */
+    inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to show the component inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+}

package/dist/patterns/DonationAmounts/utils/currency.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Currency formatting utilities
+ */
+/**
+ * Formats a number as currency
+ * @param amount - The amount to format
+ * @param locale - The locale to use for formatting (e.g., 'en-US', 'es-ES')
+ * @param currency - The currency code (ISO 4217, e.g., 'USD', 'EUR')
+ * @returns Formatted currency string
+ *
+ * @example
+ * formatCurrency(1000, 'en-US', 'USD') // "$1,000.00"
+ * formatCurrency(1000, 'es-ES', 'EUR') // "1.000,00 €"
+ */
+export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
+/**
+ * Parses a currency string to a number
+ * @param value - The currency string to parse
+ * @returns Parsed number or null if invalid
+ *
+ * @example
+ * parseCurrency('$1,000.00') // 1000
+ * parseCurrency('1.000,00 €') // 1000
+ */
+export declare function parseCurrency(value: string): number | null;

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.
+ */
+export 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;