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

package/dist/patterns/DonationAmounts/DonationAmounts.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { DonationAmountsProps } from './types';
+/**
+ * DonationAmounts component for selecting donation values
+ */
+export declare const DonationAmounts: React.FC<DonationAmountsProps>;
+export default DonationAmounts;

package/dist/patterns/DonationAmounts/DonationAmounts.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * DonationAmounts Component Tests
+ */
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * DonationAmounts Pattern
+ *
+ * A component for selecting donation amounts with preset options and custom input.
+ * Ensures exclusive selection (preset OR custom).
+ */
+export { DonationAmounts } from './DonationAmounts';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps } from './types';
+export { formatCurrency, parseCurrency } from './utils/currency';

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

@@ -0,0 +1,145 @@
+/**
+ * DonationAmounts - Type Definitions
+ */
+/**
+ * Represents a preset donation amount option
+ */
+export interface DonationAmount {
+    /**
+     * Unique identifier for the amount
+     */
+    id: string;
+    /**
+     * The numerical value of the donation
+     */
+    amount: number;
+    /**
+     * Optional label to display instead of the amount
+     * If not provided, the formatted currency will be used
+     */
+    label?: string;
+}
+/**
+ * Selected donation value (can be preset or custom)
+ */
+export interface SelectedDonation {
+    /**
+     * The selected amount
+     */
+    amount: number;
+    /**
+     * Whether this is a custom amount
+     */
+    isCustom: boolean;
+    /**
+     * ID of the preset (if not custom)
+     */
+    presetId?: string;
+}
+/**
+ * Labels for internationalization
+ */
+export interface DonationLabels {
+    /**
+     * Title text (e.g., "Donation Amount")
+     */
+    title?: string;
+    /**
+     * Placeholder for custom amount input
+     */
+    customAmountPlaceholder?: string;
+    /**
+     * Aria label for custom amount input
+     */
+    customAmountAriaLabel?: string;
+}
+/**
+ * Props for DonationAmounts component
+ */
+export interface DonationAmountsProps {
+    /**
+     * Array of preset donation amounts to display as buttons
+     * @default [100, 250, 500, 1000, 2000]
+     */
+    presetAmounts?: DonationAmount[];
+    /**
+     * Currently selected donation (controlled mode)
+     */
+    selectedDonation?: SelectedDonation | null;
+    /**
+     * Default selected donation (uncontrolled mode)
+     */
+    defaultSelectedDonation?: SelectedDonation | null;
+    /**
+     * Callback fired when donation selection changes
+     */
+    onChange?: (donation: SelectedDonation | null) => void;
+    /**
+     * Currency code (ISO 4217)
+     * @default 'USD'
+     */
+    currency?: string;
+    /**
+     * Locale for currency formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Whether to show the custom amount input
+     * @default true
+     */
+    showCustomAmount?: boolean;
+    /**
+     * Minimum allowed custom amount
+     * @default 0.5
+     */
+    minCustomAmount?: number;
+    /**
+     * Maximum allowed custom amount
+     * @default 1000000
+     */
+    maxCustomAmount?: number;
+    /**
+     * Labels for internationalization
+     */
+    labels?: DonationLabels;
+    /**
+     * Number of columns for preset buttons on mobile
+     * @default 2
+     */
+    mobileColumns?: 2 | 3;
+    /**
+     * Number of columns for preset buttons on desktop
+     * @default 3
+     */
+    desktopColumns?: 3 | 4 | 5 | 6;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Button variant for preset amounts
+     * @default 'bordered'
+     */
+    buttonVariant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost';
+    /**
+     * Button color for preset amounts
+     * @default 'default'
+     */
+    buttonColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Input variant for custom amount
+     * @default 'bordered'
+     */
+    inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to show the component inside a Card
+     * @default true
+     */
+    showCard?: boolean;
+}

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

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

package/dist/patterns/Footer/Footer.d.ts

@@ -1,21 +1,4 @@
-import { ReactNode } from 'react';
-export interface FooterLink {
-    label: string;
-    href: string;
-}
-export interface FooterSection {
-    title: string;
-    links: FooterLink[];
-}
-export interface SocialLink {
-    platform: string;
-    href: string;
-    icon?: ReactNode;
-}
-export interface FooterProps {
-    sections?: FooterSection[];
-    socialLinks?: SocialLink[];
-    copyrightText?: string;
-    logo?: ReactNode;
-}
-export declare function Footer(_props: FooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Footer Component
+ */
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/Footer/Footer.test.d.ts

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

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

@@ -1,2 +1 @@
 export { Footer } from './Footer';
-export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';

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

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/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "0.1.22",
+    "version": "1.0.0-alpha.3",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -14,15 +14,17 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
-        "test": "vitest --run",
+        "test": "vitest --project unit --run",
         "test:watch": "vitest",
+        "test:storybook": "vitest --project storybook --run",
         "test:unit": "vitest --project unit --run",
         "test:unit:watch": "vitest --project unit",
         "test:ui": "vitest --ui",
         "test:coverage": "vitest --coverage --run",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
-        "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
+        "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod",
+        "prepublishOnly": "npm run test && npm run lint && npm run build"
     },
     "peerDependencies": {
         "@heroui/react": ">=2.7.0",