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

package/dist/patterns/EventDetails/EventDetails.d.ts

@@ -33,5 +33,5 @@ export interface EventDetailsProps {
  * @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;
+declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

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

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

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,3 +1,4 @@
+export * from './EventDetails';
 export { Navbar } from './Navbar';
 export { Stepper } from './Stepper';
 export { Footer } from './Footer';
@@ -5,9 +6,7 @@ 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 { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';

package/dist/tokens/colors.d.ts

@@ -55,6 +55,45 @@ export declare const colors: {
             readonly 900: "#000000";
             readonly DEFAULT: "#000000";
         };
+        readonly danger: {
+            readonly 50: "#fef2f2";
+            readonly 100: "#fee2e2";
+            readonly 200: "#fecaca";
+            readonly 300: "#fca5a5";
+            readonly 400: "#f87171";
+            readonly 500: "#B62214";
+            readonly 600: "#a31e12";
+            readonly 700: "#8b1a0f";
+            readonly 800: "#73160d";
+            readonly 900: "#5c120a";
+            readonly DEFAULT: "#B62214";
+        };
+        readonly success: {
+            readonly 50: "#ecfdf5";
+            readonly 100: "#d1fae5";
+            readonly 200: "#a7f3d0";
+            readonly 300: "#6ee7b7";
+            readonly 400: "#34d399";
+            readonly 500: "#057A54";
+            readonly 600: "#046c4a";
+            readonly 700: "#035e40";
+            readonly 800: "#025035";
+            readonly 900: "#01422b";
+            readonly DEFAULT: "#057A54";
+        };
+        readonly warning: {
+            readonly 50: "#fffbeb";
+            readonly 100: "#fef3c7";
+            readonly 200: "#fde68a";
+            readonly 300: "#fcd34d";
+            readonly 400: "#fbbf24";
+            readonly 500: "#F5A524";
+            readonly 600: "#d97706";
+            readonly 700: "#b45309";
+            readonly 800: "#92400e";
+            readonly 900: "#78350f";
+            readonly DEFAULT: "#F5A524";
+        };
     };
 };
 export type ColorToken = typeof colors;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.0.0-alpha.10",
+    "version": "1.0.0-alpha.12",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -47,6 +47,7 @@
     },
     "dependencies": {
         "@iconify/react": "^6.0.2",
+        "react-hook-form": "^7.56.4",
         "vite-plugin-css-injected-by-js": "3.5.2",
         "vite-plugin-dts": "4.5.4"
     },