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

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

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

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