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

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

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { RevenueDistributionCardProps } from './types';
+/**
+ * RevenueDistributionCard displays a single distribution with
+ * amount input, GL account selector, tax deductible checkbox, and delete button.
+ *
+ * Supports two modes:
+ * 1. Standalone mode: Use distribution/onDistributionChange props
+ * 2. React Hook Form mode: Pass control and name props for native RHF integration
+ */
+export declare const RevenueDistributionCard: {
+    <TFieldValues extends FieldValues = FieldValues>({ distribution: distributionProp, defaultDistribution, glAccounts, isLoadingGlAccounts, onSearchGlAccounts, onDistributionChange, onAmountChange, onGlAccountChange, onTaxDeductibleChange, onDelete, canDelete, canEditTaxDeductible, isDisabled, labels: customLabels, classNames, "data-testid": dataTestId, control, name, rules, }: RevenueDistributionCardProps<TFieldValues>): JSX.Element;
+    displayName: string;
+};
+export default RevenueDistributionCard;

package/dist/patterns/RevenueDistribution/RevenueDistributionCard.test.d.ts

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

package/dist/patterns/RevenueDistribution/RevenueDistributionEmpty.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { RevenueDistributionEmptyProps } from './types';
+/**
+ * RevenueDistributionEmpty displays a placeholder when there are no
+ * distributions configured or available.
+ */
+export declare const RevenueDistributionEmpty: {
+    ({ message, icon, iconSize, showCard, classNames, renderEmpty, }: RevenueDistributionEmptyProps): JSX.Element;
+    displayName: string;
+};
+export default RevenueDistributionEmpty;

package/dist/patterns/RevenueDistribution/RevenueDistributionError.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { RevenueDistributionErrorProps } from './types';
+/**
+ * RevenueDistributionError displays an error alert when there's an issue
+ * loading or processing distributions.
+ */
+export declare const RevenueDistributionError: {
+    ({ error, labels: customLabels, showCard, color, classNames, }: RevenueDistributionErrorProps): JSX.Element;
+    displayName: string;
+};
+export default RevenueDistributionError;

package/dist/patterns/RevenueDistribution/RevenueDistributionSkeleton.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { RevenueDistributionSkeletonProps } from './types';
+/**
+ * RevenueDistributionSkeleton displays a loading placeholder
+ * matching the structure of RevenueDistributionCard.
+ */
+export declare const RevenueDistributionSkeleton: {
+    ({ rows, showCard, classNames, }: RevenueDistributionSkeletonProps): JSX.Element;
+    displayName: string;
+};
+export default RevenueDistributionSkeleton;

package/dist/patterns/RevenueDistribution/examples/InteractiveExample.d.ts

@@ -0,0 +1,8 @@
+/**
+ * InteractiveExample
+ *
+ * A stateful example component for the RevenueDistributionCard.
+ * Demonstrates controlled mode with GL account search.
+ */
+export declare const InteractiveExample: () => import("react/jsx-runtime").JSX.Element;
+export default InteractiveExample;

package/dist/patterns/RevenueDistribution/examples/MultipleDistributionsFormExample.d.ts

@@ -0,0 +1,10 @@
+/**
+ * MultipleDistributionsFormExample
+ *
+ * Example demonstrating multiple RevenueDistributionCard components
+ * managed with React Hook Form's useFieldArray.
+ *
+ * Uses native RHF integration via control/name props for validation.
+ */
+export declare const MultipleDistributionsFormExample: () => import("react/jsx-runtime").JSX.Element;
+export default MultipleDistributionsFormExample;

package/dist/patterns/RevenueDistribution/examples/WithGlAccountSearchExample.d.ts

@@ -0,0 +1,7 @@
+/**
+ * WithGlAccountSearchExample
+ *
+ * A stateful example demonstrating GL account search functionality.
+ */
+export declare const WithGlAccountSearchExample: () => import("react/jsx-runtime").JSX.Element;
+export default WithGlAccountSearchExample;

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

@@ -0,0 +1,9 @@
+/**
+ * RevenueDistribution Examples
+ *
+ * Stateful example components for Storybook stories.
+ * These are separated from stories to avoid using hooks directly in stories.
+ */
+export { InteractiveExample } from './InteractiveExample';
+export { WithGlAccountSearchExample } from './WithGlAccountSearchExample';
+export { MultipleDistributionsFormExample } from './MultipleDistributionsFormExample';

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

@@ -0,0 +1,14 @@
+/**
+ * RevenueDistribution Pattern
+ *
+ * A pattern for displaying and editing a single revenue distribution.
+ * Includes card component with amount input, GL account selector,
+ * tax deductible checkbox, and delete button.
+ */
+export { RevenueDistributionCard } from './RevenueDistributionCard';
+export { RevenueDistributionSkeleton } from './RevenueDistributionSkeleton';
+export { RevenueDistributionError } from './RevenueDistributionError';
+export { RevenueDistributionEmpty } from './RevenueDistributionEmpty';
+export type { GlAccount, Distribution, RevenueDistributionLabels, RevenueDistributionErrorLabels, RevenueDistributionEmptyLabels, RevenueDistributionCardClassNames, RevenueDistributionSkeletonClassNames, RevenueDistributionErrorClassNames, RevenueDistributionEmptyClassNames, RevenueDistributionCardProps, RevenueDistributionSkeletonProps, RevenueDistributionErrorProps, RevenueDistributionEmptyProps, } from './types';
+export { formatAmount, formatCurrency, getCurrencySymbol, parseCurrency, calculateAllocationDifference, generateDistributionId, } from './utils';
+export { InteractiveExample, WithGlAccountSearchExample, MultipleDistributionsFormExample } from './examples';