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

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

@@ -0,0 +1,394 @@
+import { Control, FieldValues, Path, RegisterOptions } from 'react-hook-form';
+/**
+ * Represents a General Ledger account
+ */
+export interface GlAccount {
+    /**
+     * Unique identifier for the GL account
+     */
+    id: string;
+    /**
+     * Display name of the GL account
+     */
+    name: string;
+    /**
+     * Optional account code
+     */
+    code?: string;
+}
+/**
+ * Represents a single revenue distribution entry
+ */
+export interface Distribution {
+    /**
+     * Unique identifier for this distribution
+     */
+    id: string;
+    /**
+     * Amount allocated to this distribution
+     */
+    amount: number;
+    /**
+     * The GL account this distribution is allocated to
+     */
+    glAccount: GlAccount | null;
+    /**
+     * Whether this distribution is tax deductible
+     */
+    isTaxDeductible: boolean;
+}
+/**
+ * Labels for internationalization
+ */
+export interface RevenueDistributionLabels {
+    /**
+     * Label for amount field (e.g., "Amount")
+     */
+    amount?: string;
+    /**
+     * Label for GL account field (e.g., "GL Account")
+     */
+    glAccount?: string;
+    /**
+     * Label for tax deductible (e.g., "Tax Deductible")
+     */
+    taxDeductible?: string;
+    /**
+     * Placeholder for amount input (e.g., "0.00")
+     */
+    amountPlaceholder?: string;
+    /**
+     * Placeholder for GL account search (e.g., "Search GL Account")
+     */
+    glAccountPlaceholder?: string;
+    /**
+     * Message when no GL accounts found (e.g., "No GL Accounts found")
+     */
+    noGlAccountsFound?: string;
+    /**
+     * Message while searching (e.g., "Searching...")
+     */
+    searching?: string;
+    /**
+     * Tooltip content for Amount info icon
+     */
+    amountTooltip?: string;
+    /**
+     * Tooltip content for GL Account info icon
+     */
+    glAccountTooltip?: string;
+    /**
+     * Tooltip content for Tax Deductible info icon
+     */
+    taxDeductibleTooltip?: string;
+    /**
+     * Label for delete button (e.g., "Delete")
+     */
+    deleteButton?: string;
+    /**
+     * Currency symbol (e.g., "$")
+     */
+    currencySymbol?: string;
+}
+/**
+ * Labels for error state
+ */
+export interface RevenueDistributionErrorLabels {
+    /**
+     * Error title (e.g., "Error Loading Distributions")
+     */
+    title?: string;
+    /**
+     * Error description
+     */
+    description?: string;
+}
+/**
+ * Labels for empty state
+ */
+export interface RevenueDistributionEmptyLabels {
+    /**
+     * Empty state message (e.g., "No distributions configured")
+     */
+    message?: string;
+}
+/**
+ * Class names for styling RevenueDistributionCard
+ */
+export interface RevenueDistributionCardClassNames {
+    /**
+     * Class for the root element
+     */
+    base?: string;
+    /**
+     * Class for the card body
+     */
+    body?: string;
+    /**
+     * Class for the amount input container
+     */
+    amountContainer?: string;
+    /**
+     * Class for the amount input
+     */
+    amountInput?: string;
+    /**
+     * Class for the GL account container
+     */
+    glAccountContainer?: string;
+    /**
+     * Class for the GL account input
+     */
+    glAccountInput?: string;
+    /**
+     * Class for the tax deductible container
+     */
+    taxDeductibleContainer?: string;
+    /**
+     * Class for the tax deductible checkbox
+     */
+    taxDeductibleCheckbox?: string;
+    /**
+     * Class for the delete button container
+     */
+    deleteContainer?: string;
+    /**
+     * Class for the delete button
+     */
+    deleteButton?: string;
+    /**
+     * Class for labels
+     */
+    label?: string;
+}
+/**
+ * Class names for skeleton
+ */
+export interface RevenueDistributionSkeletonClassNames {
+    /**
+     * Class for the container
+     */
+    base?: string;
+    /**
+     * Class for each skeleton row
+     */
+    row?: string;
+}
+/**
+ * Class names for error state
+ */
+export interface RevenueDistributionErrorClassNames {
+    /**
+     * Class for the root element
+     */
+    base?: string;
+    /**
+     * Class for the alert
+     */
+    alert?: string;
+}
+/**
+ * Class names for empty state
+ */
+export interface RevenueDistributionEmptyClassNames {
+    /**
+     * Class for the root element
+     */
+    base?: string;
+    /**
+     * Class for the content
+     */
+    content?: string;
+    /**
+     * Class for the icon
+     */
+    icon?: string;
+    /**
+     * Class for the message
+     */
+    message?: string;
+}
+/**
+ * Props for the RevenueDistributionCard component
+ * Handles a SINGLE revenue distribution (not a list)
+ *
+ * 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 interface RevenueDistributionCardProps<TFieldValues extends FieldValues = FieldValues> {
+    /**
+     * A unique identifier for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * The single distribution data (controlled mode)
+     */
+    distribution?: Distribution;
+    /**
+     * Default distribution (uncontrolled mode)
+     */
+    defaultDistribution?: Distribution;
+    /**
+     * Available GL accounts for selection
+     */
+    glAccounts?: GlAccount[];
+    /**
+     * Whether GL accounts are loading
+     * @default false
+     */
+    isLoadingGlAccounts?: boolean;
+    /**
+     * Callback when user searches for GL accounts
+     */
+    onSearchGlAccounts?: (searchTerm: string) => void;
+    /**
+     * Callback when distribution changes
+     */
+    onDistributionChange?: (distribution: Distribution) => void;
+    /**
+     * Callback when amount changes
+     */
+    onAmountChange?: (amount: number) => void;
+    /**
+     * Callback when GL account changes
+     */
+    onGlAccountChange?: (glAccount: GlAccount | null) => void;
+    /**
+     * Callback when tax deductible changes
+     */
+    onTaxDeductibleChange?: (isTaxDeductible: boolean) => void;
+    /**
+     * Callback when delete button is clicked
+     */
+    onDelete?: () => void;
+    /**
+     * Whether the distribution can be deleted
+     * If false, the delete button is not rendered
+     * @default true
+     */
+    canDelete?: boolean;
+    /**
+     * Whether the tax deductible checkbox can be modified
+     * If false, the checkbox is rendered in disabled state
+     * @default true
+     */
+    canEditTaxDeductible?: boolean;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Currency code for formatting
+     * @default 'USD'
+     */
+    currency?: string;
+    /**
+     * Locale for formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Labels for internationalization
+     */
+    labels?: RevenueDistributionLabels;
+    /**
+     * Class names for styling
+     */
+    classNames?: RevenueDistributionCardClassNames;
+    /**
+     * React Hook Form control object
+     * When provided with `name`, enables native RHF integration
+     */
+    control?: Control<TFieldValues>;
+    /**
+     * Field name for React Hook Form
+     * Required when using `control` prop
+     */
+    name?: Path<TFieldValues>;
+    /**
+     * Validation rules for React Hook Form
+     * Applied when using control/name props
+     */
+    rules?: RegisterOptions<TFieldValues>;
+}
+/**
+ * Props for the RevenueDistributionSkeleton component
+ */
+export interface RevenueDistributionSkeletonProps {
+    /**
+     * Number of skeleton rows
+     * @default 1
+     */
+    rows?: number;
+    /**
+     * Whether to show inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+    /**
+     * Class names for styling
+     */
+    classNames?: RevenueDistributionSkeletonClassNames;
+}
+/**
+ * Props for the RevenueDistributionError component
+ */
+export interface RevenueDistributionErrorProps {
+    /**
+     * Custom error message
+     */
+    error?: string;
+    /**
+     * Labels for internationalization
+     */
+    labels?: RevenueDistributionErrorLabels;
+    /**
+     * 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
+     */
+    classNames?: RevenueDistributionErrorClassNames;
+}
+/**
+ * Props for the RevenueDistributionEmpty component
+ */
+export interface RevenueDistributionEmptyProps {
+    /**
+     * Custom message
+     * @default 'No distributions configured'
+     */
+    message?: string;
+    /**
+     * Iconify icon name
+     * @default 'solar:document-text-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
+     */
+    classNames?: RevenueDistributionEmptyClassNames;
+    /**
+     * Custom render function
+     */
+    renderEmpty?: () => React.ReactNode;
+}

package/dist/patterns/RevenueDistribution/utils/amount.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Utility functions for amount formatting and parsing
+ */
+/**
+ * Formats an amount with the specified number of decimal places.
+ * Shows integers without decimals, and numbers with decimals show up to 3 places.
+ *
+ * @param amount - The amount to format
+ * @param maxDecimals - Maximum decimal places to show (default: 3)
+ * @returns Formatted amount string
+ */
+export declare function formatAmount(amount: number, maxDecimals?: number): string;
+/**
+ * Formats a currency amount using Intl.NumberFormat.
+ *
+ * @param amount - The amount to format
+ * @param locale - The locale for formatting (default: 'en-US')
+ * @param currency - The currency code (default: 'USD')
+ * @returns Formatted currency string
+ */
+export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
+/**
+ * Gets the currency symbol for a given currency code.
+ *
+ * @param currency - The currency code (default: 'USD')
+ * @param locale - The locale for formatting (default: 'en-US')
+ * @returns The currency symbol
+ */
+export declare function getCurrencySymbol(currency?: string, locale?: string): string;
+/**
+ * Parses a currency string to a number.
+ *
+ * @param value - The string value to parse
+ * @returns The parsed number or null if invalid
+ */
+export declare function parseCurrency(value: string): number | null;
+/**
+ * Calculates the difference between a price and allocated amounts.
+ *
+ * @param price - The total price
+ * @param allocated - The total allocated amount
+ * @param threshold - The threshold for considering amounts equal (default: 0.001)
+ * @returns Object with difference info
+ */
+export declare function calculateAllocationDifference(price: number, allocated: number, threshold?: number): {
+    difference: number;
+    isBalanced: boolean;
+    isUnderAllocated: boolean;
+    isOverAllocated: boolean;
+};
+/**
+ * Generates a unique ID for a new distribution.
+ *
+ * @returns A unique string ID
+ */
+export declare function generateDistributionId(): string;

package/dist/patterns/RevenueDistribution/utils/data.d.ts

@@ -0,0 +1,4 @@
+import { Distribution, GlAccount } from '../types';
+export declare const sampleGlAccounts: GlAccount[];
+export declare const sampleDistribution: Distribution;
+export declare const emptyDistribution: Distribution;

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

@@ -0,0 +1,5 @@
+/**
+ * RevenueDistribution Utilities
+ */
+export { formatAmount, formatCurrency, getCurrencySymbol, parseCurrency, calculateAllocationDifference, generateDistributionId, } from './amount';
+export { sampleGlAccounts, sampleDistribution, emptyDistribution } from './data';

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

@@ -1,5 +1,5 @@
 import { default as React, ComponentProps } from 'react';
-import { Textarea } from '@heroui/react';
+import { Textarea } from '../../../components';
 export type TextareaHeightChangeMeta = {
     rowHeight: number;
 };

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

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { Textarea } from '@heroui/react';
+import { Textarea } from '../../../components';
 import { JSONContent } from '@tiptap/core';
 import { ModifierIdentifier } from './modifiers';
 /**
@@ -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/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@heroui/react';
+import { ButtonProps } from '../../components';
 import { default as React } from 'react';
 /**
  * Props for the Stepper component

package/dist/patterns/index.d.ts

@@ -1,10 +1,14 @@
+export * from './EventDetails';
 export { Navbar } from './Navbar';
 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 { 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 { 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;

package/dist/templates/EventDetailsTemplate/EventDetailsTemplate.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { NavbarProps } from '../../patterns/Navbar';
 import { StepperProps } from '../../patterns/Stepper';
-import { FooterProps } from '../../patterns/Footer';
 export interface EventInfo {
     title: string;
     description: string;
@@ -16,7 +15,6 @@ export interface EventInfo {
 }
 export interface EventDetailsTemplateProps {
     navbar?: NavbarProps;
-    footer?: FooterProps;
     stepper?: StepperProps;
     event: EventInfo;
     primaryAction?: {

package/dist/theme/index.d.ts

@@ -10,12 +10,36 @@ export declare const theme: {
             readonly 200: "#fbd5c7";
             readonly 300: "#f7b79f";
             readonly 400: "#f18d68";
-            readonly 500: "#C14615";
+            readonly 500: {
+                readonly 50: "#fef5f1";
+                readonly 100: "#fde8e0";
+                readonly 200: "#fbd5c7";
+                readonly 300: "#f7b79f";
+                readonly 400: "#f18d68";
+                readonly 500: "#C14615";
+                readonly 600: "#a83b11";
+                readonly 700: "#8b2f0e";
+                readonly 800: "#73260d";
+                readonly 900: "#5f210c";
+                readonly DEFAULT: "#C14615";
+            };
             readonly 600: "#a83b11";
             readonly 700: "#8b2f0e";
             readonly 800: "#73260d";
             readonly 900: "#5f210c";
-            readonly DEFAULT: "#C14615";
+            readonly DEFAULT: {
+                readonly 50: "#fef5f1";
+                readonly 100: "#fde8e0";
+                readonly 200: "#fbd5c7";
+                readonly 300: "#f7b79f";
+                readonly 400: "#f18d68";
+                readonly 500: "#C14615";
+                readonly 600: "#a83b11";
+                readonly 700: "#8b2f0e";
+                readonly 800: "#73260d";
+                readonly 900: "#5f210c";
+                readonly DEFAULT: "#C14615";
+            };
         };
         readonly secondary: {
             readonly 50: "#f9fafb";