@veevarts/design-system 0.1.22 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ import { default as React } from 'react';
2
+ import { DonationAmountsProps } from './types';
3
+ /**
4
+ * DonationAmounts component for selecting donation values
5
+ */
6
+ export declare const DonationAmounts: React.FC<DonationAmountsProps>;
7
+ export default DonationAmounts;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * DonationAmounts Component Tests
3
+ */
4
+ export {};
@@ -0,0 +1,9 @@
1
+ /**
2
+ * DonationAmounts Pattern
3
+ *
4
+ * A component for selecting donation amounts with preset options and custom input.
5
+ * Ensures exclusive selection (preset OR custom).
6
+ */
7
+ export { DonationAmounts } from './DonationAmounts';
8
+ export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, } from './types';
9
+ export { formatCurrency, parseCurrency } from './utils/currency';
@@ -0,0 +1,145 @@
1
+ /**
2
+ * DonationAmounts - Type Definitions
3
+ */
4
+ /**
5
+ * Represents a preset donation amount option
6
+ */
7
+ export interface DonationAmount {
8
+ /**
9
+ * Unique identifier for the amount
10
+ */
11
+ id: string;
12
+ /**
13
+ * The numerical value of the donation
14
+ */
15
+ amount: number;
16
+ /**
17
+ * Optional label to display instead of the amount
18
+ * If not provided, the formatted currency will be used
19
+ */
20
+ label?: string;
21
+ }
22
+ /**
23
+ * Selected donation value (can be preset or custom)
24
+ */
25
+ export interface SelectedDonation {
26
+ /**
27
+ * The selected amount
28
+ */
29
+ amount: number;
30
+ /**
31
+ * Whether this is a custom amount
32
+ */
33
+ isCustom: boolean;
34
+ /**
35
+ * ID of the preset (if not custom)
36
+ */
37
+ presetId?: string;
38
+ }
39
+ /**
40
+ * Labels for internationalization
41
+ */
42
+ export interface DonationLabels {
43
+ /**
44
+ * Title text (e.g., "Donation Amount")
45
+ */
46
+ title?: string;
47
+ /**
48
+ * Placeholder for custom amount input
49
+ */
50
+ customAmountPlaceholder?: string;
51
+ /**
52
+ * Aria label for custom amount input
53
+ */
54
+ customAmountAriaLabel?: string;
55
+ }
56
+ /**
57
+ * Props for DonationAmounts component
58
+ */
59
+ export interface DonationAmountsProps {
60
+ /**
61
+ * Array of preset donation amounts to display as buttons
62
+ * @default [100, 250, 500, 1000, 2000]
63
+ */
64
+ presetAmounts?: DonationAmount[];
65
+ /**
66
+ * Currently selected donation (controlled mode)
67
+ */
68
+ selectedDonation?: SelectedDonation | null;
69
+ /**
70
+ * Default selected donation (uncontrolled mode)
71
+ */
72
+ defaultSelectedDonation?: SelectedDonation | null;
73
+ /**
74
+ * Callback fired when donation selection changes
75
+ */
76
+ onChange?: (donation: SelectedDonation | null) => void;
77
+ /**
78
+ * Currency code (ISO 4217)
79
+ * @default 'USD'
80
+ */
81
+ currency?: string;
82
+ /**
83
+ * Locale for currency formatting
84
+ * @default 'en-US'
85
+ */
86
+ locale?: string;
87
+ /**
88
+ * Whether to show the custom amount input
89
+ * @default true
90
+ */
91
+ showCustomAmount?: boolean;
92
+ /**
93
+ * Minimum allowed custom amount
94
+ * @default 0.5
95
+ */
96
+ minCustomAmount?: number;
97
+ /**
98
+ * Maximum allowed custom amount
99
+ * @default 1000000
100
+ */
101
+ maxCustomAmount?: number;
102
+ /**
103
+ * Labels for internationalization
104
+ */
105
+ labels?: DonationLabels;
106
+ /**
107
+ * Number of columns for preset buttons on mobile
108
+ * @default 2
109
+ */
110
+ mobileColumns?: 2 | 3;
111
+ /**
112
+ * Number of columns for preset buttons on desktop
113
+ * @default 3
114
+ */
115
+ desktopColumns?: 3 | 4 | 5 | 6;
116
+ /**
117
+ * Whether the component is disabled
118
+ * @default false
119
+ */
120
+ isDisabled?: boolean;
121
+ /**
122
+ * Button variant for preset amounts
123
+ * @default 'bordered'
124
+ */
125
+ buttonVariant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost';
126
+ /**
127
+ * Button color for preset amounts
128
+ * @default 'default'
129
+ */
130
+ buttonColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
131
+ /**
132
+ * Input variant for custom amount
133
+ * @default 'bordered'
134
+ */
135
+ inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
136
+ /**
137
+ * Additional CSS classes
138
+ */
139
+ className?: string;
140
+ /**
141
+ * Whether to show the component inside a Card
142
+ * @default true
143
+ */
144
+ showCard?: boolean;
145
+ }
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Currency formatting utilities
3
+ */
4
+ /**
5
+ * Formats a number as currency
6
+ * @param amount - The amount to format
7
+ * @param locale - The locale to use for formatting (e.g., 'en-US', 'es-ES')
8
+ * @param currency - The currency code (ISO 4217, e.g., 'USD', 'EUR')
9
+ * @returns Formatted currency string
10
+ *
11
+ * @example
12
+ * formatCurrency(1000, 'en-US', 'USD') // "$1,000.00"
13
+ * formatCurrency(1000, 'es-ES', 'EUR') // "1.000,00 €"
14
+ */
15
+ export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
16
+ /**
17
+ * Parses a currency string to a number
18
+ * @param value - The currency string to parse
19
+ * @returns Parsed number or null if invalid
20
+ *
21
+ * @example
22
+ * parseCurrency('$1,000.00') // 1000
23
+ * parseCurrency('1.000,00 €') // 1000
24
+ */
25
+ export declare function parseCurrency(value: string): number | null;
@@ -3,6 +3,8 @@ export { Stepper } from './Stepper';
3
3
  export { Footer } from './Footer';
4
4
  export type { RichTextAreaProps } from './RichText';
5
5
  export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
6
+ export { DonationAmounts } from './DonationAmounts';
6
7
  export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
7
8
  export type { StepperProps } from './Stepper';
8
9
  export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';
10
+ export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@veevarts/design-system",
3
3
  "private": false,
4
- "version": "0.1.22",
4
+ "version": "0.1.23",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -22,7 +22,12 @@
22
22
  "test:coverage": "vitest --coverage --run",
23
23
  "storybook": "storybook dev -p 6006",
24
24
  "build-storybook": "storybook build",
25
- "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
25
+ "deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod",
26
+ "prepublishOnly": "npm run test && npm run lint && npm run build",
27
+ "publish:patch": "npm version patch && npm publish && git push origin main --tags",
28
+ "publish:minor": "npm version minor && npm publish && git push origin main --tags",
29
+ "publish:major": "npm version major && npm publish && git push origin main --tags",
30
+ "publish:beta": "npm version prerelease --preid=beta && npm publish --tag beta && git push origin main --tags"
26
31
  },
27
32
  "peerDependencies": {
28
33
  "@heroui/react": ">=2.7.0",