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

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';

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

@@ -0,0 +1,483 @@
+import { default as React } from 'react';
+/**
+ * OfferCard - Type Definitions
+ */
+/**
+ * Represents an offer with its details
+ */
+export interface Offer {
+    /**
+     * Unique identifier for the offer
+     */
+    id: string;
+    /**
+     * Display name of the offer
+     */
+    name: string;
+    /**
+     * Optional description or details about the offer
+     */
+    description?: string;
+    /**
+     * Price of the offer (before or after tax based on your implementation)
+     */
+    price: number;
+    /**
+     * Maximum number of tickets allowed for this offer
+     * If not provided, unlimited tickets are assumed
+     */
+    ticketsAllowed?: number;
+    /**
+     * Total number of tickets already sold
+     * Used to calculate availability and sold out status
+     */
+    totalTicketsSold?: number | null;
+    /**
+     * Number of people included in the offer (e.g., for table tickets)
+     */
+    numberOfPeople?: number | null;
+    /**
+     * Position for sorting offers in a list
+     */
+    position?: number;
+}
+/**
+ * Selection state for offers (map of offer ID to quantity)
+ */
+export type OfferSelection = Record<string, number>;
+/**
+ * Labels for internationalization
+ */
+export interface OfferCardLabels {
+    /**
+     * Label for single person (e.g., "Person")
+     */
+    person?: string;
+    /**
+     * Label for multiple people (e.g., "People")
+     */
+    people?: string;
+    /**
+     * Label for tickets section (e.g., "Tickets:")
+     */
+    tickets?: string;
+    /**
+     * Label for sold out status (e.g., "Sold Out")
+     */
+    soldOut?: string;
+    /**
+     * Message when maximum tickets reached (e.g., "Maximum number of tickets allowed reached")
+     */
+    maxReached?: string;
+}
+/**
+ * Labels for error state
+ */
+export interface OfferCardErrorLabels {
+    /**
+     * Error title (e.g., "Error Fetching Offers")
+     */
+    title?: string;
+    /**
+     * Error description (e.g., "An error occurred while fetching offers.")
+     */
+    description?: string;
+}
+/**
+ * Class names for styling different parts of the OfferCard
+ */
+export interface OfferCardClassNames {
+    /**
+     * Class for the root/container element
+     */
+    base?: string;
+    /**
+     * Class for the card body
+     */
+    body?: string;
+    /**
+     * Class for the offer name
+     */
+    name?: string;
+    /**
+     * Class for the price display
+     */
+    price?: string;
+    /**
+     * Class for the description text
+     */
+    description?: string;
+    /**
+     * Class for the people count section
+     */
+    peopleCount?: string;
+    /**
+     * Class for the tickets label
+     */
+    ticketsLabel?: string;
+    /**
+     * Class for the quantity selector container
+     */
+    quantitySelector?: string;
+    /**
+     * Class for the sold out badge
+     */
+    soldOut?: string;
+    /**
+     * Class for the max reached alert
+     */
+    maxReachedAlert?: string;
+    /**
+     * Class for the card footer
+     */
+    footer?: string;
+}
+/**
+ * Class names for OfferCardList
+ */
+export interface OfferCardListClassNames {
+    /**
+     * Class for the list container
+     */
+    base?: string;
+    /**
+     * Class for each card wrapper (motion div)
+     */
+    cardWrapper?: string;
+    /**
+     * Class names passed to each OfferCard
+     */
+    card?: OfferCardClassNames;
+}
+/**
+ * Class names for OfferCardSkeleton
+ */
+export interface OfferCardSkeletonClassNames {
+    /**
+     * Class for the container
+     */
+    base?: string;
+    /**
+     * Class for each skeleton card
+     */
+    card?: string;
+}
+/**
+ * Class names for OfferCardError
+ */
+export interface OfferCardErrorClassNames {
+    /**
+     * Class for the root element
+     */
+    base?: string;
+    /**
+     * Class for the alert component
+     */
+    alert?: string;
+}
+/**
+ * Class names for OfferCardEmpty
+ */
+export interface OfferCardEmptyClassNames {
+    /**
+     * Class for the root element
+     */
+    base?: string;
+    /**
+     * Class for the content container
+     */
+    content?: string;
+    /**
+     * Class for the icon
+     */
+    icon?: string;
+    /**
+     * Class for the message text
+     */
+    message?: string;
+}
+/**
+ * Slot render functions for custom content
+ */
+export interface OfferCardSlots {
+    /**
+     * Custom render for the offer name
+     */
+    renderName?: (name: string, offer: Offer) => React.ReactNode;
+    /**
+     * Custom render for the price display
+     */
+    renderPrice?: (price: number, formattedPrice: string, offer: Offer) => React.ReactNode;
+    /**
+     * Custom render for the description
+     */
+    renderDescription?: (description: string, offer: Offer) => React.ReactNode;
+    /**
+     * Custom render for the people count
+     */
+    renderPeopleCount?: (count: number, label: string, offer: Offer) => React.ReactNode;
+    /**
+     * Custom render for the quantity selector
+     */
+    renderQuantitySelector?: (props: {
+        quantity: number;
+        onIncrement: () => void;
+        onDecrement: () => void;
+        isDecrementDisabled: boolean;
+        isIncrementDisabled: boolean;
+        isDisabled: boolean;
+    }) => React.ReactNode;
+    /**
+     * Custom render for sold out badge
+     */
+    renderSoldOut?: (label: string) => React.ReactNode;
+    /**
+     * Custom render for max reached alert
+     */
+    renderMaxReachedAlert?: (message: string) => React.ReactNode;
+}
+/**
+ * Props for the OfferCard component
+ */
+export interface OfferCardProps {
+    /**
+     * A unique identifier for testing purposes.
+     */
+    'data-testid'?: string;
+    /**
+     * The offer data to display
+     */
+    offer: Offer;
+    /**
+     * Currently selected quantity (controlled mode)
+     */
+    quantity?: number;
+    /**
+     * Default quantity (uncontrolled mode)
+     * @default 0
+     */
+    defaultQuantity?: number;
+    /**
+     * Callback fired when quantity changes
+     */
+    onQuantityChange?: (id: string, quantity: number) => void;
+    /**
+     * Currency code (ISO 4217)
+     * @default 'USD'
+     */
+    currency?: string;
+    /**
+     * Locale for currency and number formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Labels for internationalization
+     */
+    labels?: OfferCardLabels;
+    /**
+     * Slot render functions for custom content
+     */
+    slots?: OfferCardSlots;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Button variant for quantity controls
+     * @default 'bordered'
+     */
+    buttonVariant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost';
+    /**
+     * Button color for quantity controls
+     * @default 'default'
+     */
+    buttonColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Color for the selected/active state
+     * @default 'primary'
+     */
+    selectedColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Whether to show the component inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+    /**
+     * Whether to show the description
+     * @default true
+     */
+    showDescription?: boolean;
+    /**
+     * Whether to show the people count
+     * @default true
+     */
+    showPeopleCount?: boolean;
+    /**
+     * Whether to show the price
+     * @default true
+     */
+    showPrice?: boolean;
+    /**
+     * Class names for styling different parts of the component
+     */
+    classNames?: OfferCardClassNames;
+}
+/**
+ * Props for the OfferCardList component
+ */
+export interface OfferCardListProps {
+    /**
+     * Array of offers to display
+     */
+    offers: Offer[];
+    /**
+     * Currently selected quantities (controlled mode)
+     * Map of offer ID to quantity
+     */
+    selection?: OfferSelection;
+    /**
+     * Default selection (uncontrolled mode)
+     */
+    defaultSelection?: OfferSelection;
+    /**
+     * Callback fired when any quantity changes
+     */
+    onSelectionChange?: (selection: OfferSelection) => void;
+    /**
+     * Callback fired when a single offer quantity changes
+     */
+    onQuantityChange?: (id: string, quantity: number) => void;
+    /**
+     * Currency code (ISO 4217)
+     * @default 'USD'
+     */
+    currency?: string;
+    /**
+     * Locale for currency and number formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Labels for internationalization (applied to all cards)
+     */
+    labels?: OfferCardLabels;
+    /**
+     * Slot render functions (applied to all cards)
+     */
+    slots?: OfferCardSlots;
+    /**
+     * Whether all cards are disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Button variant for quantity controls
+     * @default 'bordered'
+     */
+    buttonVariant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost';
+    /**
+     * Button color for quantity controls
+     * @default 'default'
+     */
+    buttonColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Whether to show cards inside Card components
+     * @default true
+     */
+    showCard?: boolean;
+    /**
+     * Whether to animate the list
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Gap between cards
+     * @default 2
+     */
+    gap?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Class names for styling different parts of the component
+     */
+    classNames?: OfferCardListClassNames;
+}
+/**
+ * Props for the OfferCardSkeleton component
+ */
+export interface OfferCardSkeletonProps {
+    /**
+     * Number of skeleton cards to display
+     * @default 2
+     */
+    quantity?: number;
+    /**
+     * Gap between skeleton cards
+     * @default 4
+     */
+    gap?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Class names for styling different parts of the component
+     */
+    classNames?: OfferCardSkeletonClassNames;
+}
+/**
+ * Props for the OfferCardError component
+ */
+export interface OfferCardErrorProps {
+    /**
+     * Custom error message to display
+     */
+    error?: string;
+    /**
+     * Labels for internationalization
+     */
+    labels?: OfferCardErrorLabels;
+    /**
+     * Whether to show inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+    /**
+     * Alert color variant
+     * @default 'danger'
+     */
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Class names for styling different parts of the component
+     */
+    classNames?: OfferCardErrorClassNames;
+}
+/**
+ * Props for the OfferCardEmpty component
+ */
+export interface OfferCardEmptyProps {
+    /**
+     * Custom message to display
+     * @default 'No offers available.'
+     */
+    message?: string;
+    /**
+     * Iconify icon to display
+     * @default 'solar:ticket-sale-outline'
+     */
+    icon?: string;
+    /**
+     * Icon size in pixels
+     * @default 48
+     */
+    iconSize?: number;
+    /**
+     * Whether to show inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+    /**
+     * Class names for styling different parts of the component
+     */
+    classNames?: OfferCardEmptyClassNames;
+    /**
+     * Custom render function for the entire empty state
+     */
+    renderEmpty?: () => React.ReactNode;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Currency formatting utilities for OfferCard
+ */
+/**
+ * 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(25.00, 'en-US', 'USD') // "$25.00"
+ * formatCurrency(25.00, 'es-ES', 'EUR') // "25,00 €"
+ * formatCurrency(1000, 'de-DE', '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('$25.00') // 25
+ * parseCurrency('1.000,00 €') // 1000
+ */
+export declare function parseCurrency(value: string): number | null;

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

@@ -0,0 +1,2 @@
+export { formatCurrency, parseCurrency } from './currency';
+export * from './offers';

package/dist/patterns/OfferCard/utils/offers.d.ts

@@ -0,0 +1,3 @@
+import { Offer } from '../types';
+export declare const sampleOffer: Offer;
+export declare const sampleOffers: Offer[];

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

@@ -3,6 +3,13 @@ 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 { EventDetails } from './EventDetails';
+export { OfferCard, OfferCardList, OfferCardSkeleton, OfferCardError, OfferCardEmpty, offerListVariants, offerCardVariants, formatCurrency as formatOfferCurrency, parseCurrency as parseOfferCurrency, } from './OfferCard';
+export type { EventDetailsProps } from './EventDetails';
 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';
+export type { Offer, OfferSelection, OfferCardLabels, OfferCardErrorLabels, OfferCardClassNames, OfferCardListClassNames, OfferCardSkeletonClassNames, OfferCardErrorClassNames, OfferCardEmptyClassNames, OfferCardSlots, OfferCardProps, OfferCardListProps, OfferCardSkeletonProps, OfferCardErrorProps, OfferCardEmptyProps, } from './OfferCard';

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;