@opensite/ui 2.1.9 → 2.2.2

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.
@@ -1,241 +1,9 @@
1
- import * as React from 'react';
2
- import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
3
- import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
4
- import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
1
+ export { a as ContactDark, b as ContactDarkProps } from './contact-dark-VpMwwNkH.cjs';
2
+ import 'react';
3
+ import '@page-speed/forms/integration';
4
+ import './community-initiatives-Bz_A5vLU.cjs';
5
5
  import 'react/jsx-runtime';
6
+ import './blocks-Cohq4eio.cjs';
6
7
  import 'class-variance-authority';
7
8
  import './button-variants-lRElsmTc.cjs';
8
9
  import 'class-variance-authority/types';
9
-
10
- interface ContactDarkOption {
11
- /**
12
- * Icon name for the contact option
13
- */
14
- icon: string;
15
- /**
16
- * Contact information text
17
- */
18
- info: string;
19
- /**
20
- * Optional href for the contact option
21
- */
22
- href?: string;
23
- }
24
- interface ContactDarkSocialLink {
25
- /**
26
- * Icon name for the social platform
27
- */
28
- icon: string;
29
- /**
30
- * Link href
31
- */
32
- href: string;
33
- /**
34
- * Accessible label for the link
35
- */
36
- label: string;
37
- }
38
- interface ContactDarkProps {
39
- /**
40
- * Main heading content
41
- */
42
- heading?: React.ReactNode;
43
- /**
44
- * Description text below the heading
45
- */
46
- description?: React.ReactNode;
47
- /**
48
- * Contact information heading
49
- */
50
- contactHeading?: React.ReactNode;
51
- /**
52
- * Contact information description
53
- */
54
- contactDescription?: React.ReactNode;
55
- /**
56
- * Submit button text
57
- */
58
- buttonText?: string;
59
- /**
60
- * Submit button icon (displayed before text)
61
- */
62
- buttonIcon?: React.ReactNode;
63
- /**
64
- * Array of action configurations for additional buttons
65
- */
66
- actions?: ActionConfig[];
67
- /**
68
- * Custom slot for rendering actions (overrides actions array and default submit)
69
- */
70
- actionsSlot?: React.ReactNode;
71
- /**
72
- * Contact options to display
73
- */
74
- contactOptions?: ContactDarkOption[];
75
- /**
76
- * Custom slot for rendering contact options (overrides contactOptions array)
77
- */
78
- contactOptionsSlot?: React.ReactNode;
79
- /**
80
- * Social media links to display
81
- */
82
- socialLinks?: ContactDarkSocialLink[];
83
- /**
84
- * Custom slot for rendering social links (overrides socialLinks array)
85
- */
86
- socialLinksSlot?: React.ReactNode;
87
- /**
88
- * Array of form field configurations
89
- * If not provided, defaults to: firstName, lastName, email, message
90
- */
91
- formFields?: FormFieldConfig[];
92
- /**
93
- * Success message to display after form submission
94
- * @default "Thank you! Your message has been sent successfully."
95
- */
96
- successMessage?: React.ReactNode;
97
- /**
98
- * Additional CSS classes for the section
99
- */
100
- className?: string;
101
- /**
102
- * Additional CSS classes for the container
103
- */
104
- containerClassName?: string;
105
- /**
106
- * Additional CSS classes for the header wrapper
107
- */
108
- headerClassName?: string;
109
- /**
110
- * Additional CSS classes for the heading
111
- */
112
- headingClassName?: string;
113
- /**
114
- * Additional CSS classes for the description
115
- */
116
- descriptionClassName?: string;
117
- /**
118
- * Additional CSS classes for the card
119
- */
120
- cardClassName?: string;
121
- /**
122
- * Additional CSS classes for the form panel
123
- */
124
- formPanelClassName?: string;
125
- /**
126
- * Additional CSS classes for the form
127
- */
128
- formClassName?: string;
129
- /**
130
- * Additional CSS classes for the submit button
131
- */
132
- submitClassName?: string;
133
- /**
134
- * Additional CSS classes for the info panel
135
- */
136
- infoPanelClassName?: string;
137
- /**
138
- * Additional CSS classes for the contact options container
139
- */
140
- contactOptionsClassName?: string;
141
- /**
142
- * Additional CSS classes for the social links container
143
- */
144
- socialLinksClassName?: string;
145
- /**
146
- * Additional CSS classes for the success message
147
- */
148
- successMessageClassName?: string;
149
- /**
150
- * Additional CSS classes for the error message
151
- */
152
- errorMessageClassName?: string;
153
- /**
154
- * Background style for the section
155
- */
156
- background?: SectionBackground;
157
- /**
158
- * Vertical spacing for the section
159
- */
160
- spacing?: SectionSpacing;
161
- /**
162
- * Optional background pattern name or URL
163
- */
164
- pattern?: PatternName | undefined;
165
- /**
166
- * Pattern overlay opacity (0-1)
167
- */
168
- patternOpacity?: number;
169
- /**
170
- * Optional form submission configuration.
171
- *
172
- * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
173
- * and the form will submit to it in JSON format.
174
- *
175
- * @example
176
- * // Works with any API
177
- * formConfig={{ endpoint: "https://api.mysite.com/contact", format: "json" }}
178
- *
179
- * @example
180
- * // With custom headers (e.g., authentication)
181
- * formConfig={{
182
- * endpoint: "/api/contact",
183
- * headers: { "Authorization": "Bearer token123" }
184
- * }}
185
- *
186
- * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
187
- * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
188
- * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
189
- *
190
- * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
191
- */
192
- formConfig?: PageSpeedFormConfig;
193
- /**
194
- * Optional custom submission handler for maximum flexibility.
195
- *
196
- * Use this when you need complete control over the submission logic,
197
- * such as custom API calls, analytics tracking, or multi-step workflows.
198
- *
199
- * Can be used alone or in combination with `formConfig` for hybrid approaches.
200
- *
201
- * @example
202
- * onSubmit={async (values) => {
203
- * await fetch("/api/contact", {
204
- * method: "POST",
205
- * body: JSON.stringify(values)
206
- * });
207
- * }}
208
- */
209
- onSubmit?: (values: Record<string, any>) => void | Promise<void>;
210
- /**
211
- * Optional success callback invoked after successful submission.
212
- *
213
- * Called after `formConfig` submission and/or `onSubmit` completes successfully.
214
- * Use for showing success messages, redirecting, analytics tracking, etc.
215
- */
216
- onSuccess?: (data: unknown) => void;
217
- /**
218
- * Optional error callback invoked if submission fails.
219
- *
220
- * Receives the error object for custom error handling, logging, or user notifications.
221
- */
222
- onError?: (error: Error) => void;
223
- }
224
- /**
225
- * ContactDark - A dark-themed contact form with split layout featuring a form
226
- * on one side and contact information with social links on a dark background.
227
- * Perfect for modern, high-contrast designs.
228
- *
229
- * @example
230
- * ```tsx
231
- * <ContactDark
232
- * heading="Contact Us"
233
- * description="Any questions or remarks? Just write us a message!"
234
- * buttonText="Send Message"
235
- * formConfig={{ endpoint: "/api/contact", format: "json" }}
236
- * />
237
- * ```
238
- */
239
- declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
240
-
241
- export { ContactDark, type ContactDarkProps };
@@ -1,241 +1,9 @@
1
- import * as React from 'react';
2
- import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
3
- import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
4
- import { A as ActionConfig } from './blocks-k17uluAz.js';
1
+ export { a as ContactDark, b as ContactDarkProps } from './contact-dark-tweUQnN1.js';
2
+ import 'react';
3
+ import '@page-speed/forms/integration';
4
+ import './community-initiatives-Bi_ClKrO.js';
5
5
  import 'react/jsx-runtime';
6
+ import './blocks-k17uluAz.js';
6
7
  import 'class-variance-authority';
7
8
  import './button-variants-lRElsmTc.js';
8
9
  import 'class-variance-authority/types';
9
-
10
- interface ContactDarkOption {
11
- /**
12
- * Icon name for the contact option
13
- */
14
- icon: string;
15
- /**
16
- * Contact information text
17
- */
18
- info: string;
19
- /**
20
- * Optional href for the contact option
21
- */
22
- href?: string;
23
- }
24
- interface ContactDarkSocialLink {
25
- /**
26
- * Icon name for the social platform
27
- */
28
- icon: string;
29
- /**
30
- * Link href
31
- */
32
- href: string;
33
- /**
34
- * Accessible label for the link
35
- */
36
- label: string;
37
- }
38
- interface ContactDarkProps {
39
- /**
40
- * Main heading content
41
- */
42
- heading?: React.ReactNode;
43
- /**
44
- * Description text below the heading
45
- */
46
- description?: React.ReactNode;
47
- /**
48
- * Contact information heading
49
- */
50
- contactHeading?: React.ReactNode;
51
- /**
52
- * Contact information description
53
- */
54
- contactDescription?: React.ReactNode;
55
- /**
56
- * Submit button text
57
- */
58
- buttonText?: string;
59
- /**
60
- * Submit button icon (displayed before text)
61
- */
62
- buttonIcon?: React.ReactNode;
63
- /**
64
- * Array of action configurations for additional buttons
65
- */
66
- actions?: ActionConfig[];
67
- /**
68
- * Custom slot for rendering actions (overrides actions array and default submit)
69
- */
70
- actionsSlot?: React.ReactNode;
71
- /**
72
- * Contact options to display
73
- */
74
- contactOptions?: ContactDarkOption[];
75
- /**
76
- * Custom slot for rendering contact options (overrides contactOptions array)
77
- */
78
- contactOptionsSlot?: React.ReactNode;
79
- /**
80
- * Social media links to display
81
- */
82
- socialLinks?: ContactDarkSocialLink[];
83
- /**
84
- * Custom slot for rendering social links (overrides socialLinks array)
85
- */
86
- socialLinksSlot?: React.ReactNode;
87
- /**
88
- * Array of form field configurations
89
- * If not provided, defaults to: firstName, lastName, email, message
90
- */
91
- formFields?: FormFieldConfig[];
92
- /**
93
- * Success message to display after form submission
94
- * @default "Thank you! Your message has been sent successfully."
95
- */
96
- successMessage?: React.ReactNode;
97
- /**
98
- * Additional CSS classes for the section
99
- */
100
- className?: string;
101
- /**
102
- * Additional CSS classes for the container
103
- */
104
- containerClassName?: string;
105
- /**
106
- * Additional CSS classes for the header wrapper
107
- */
108
- headerClassName?: string;
109
- /**
110
- * Additional CSS classes for the heading
111
- */
112
- headingClassName?: string;
113
- /**
114
- * Additional CSS classes for the description
115
- */
116
- descriptionClassName?: string;
117
- /**
118
- * Additional CSS classes for the card
119
- */
120
- cardClassName?: string;
121
- /**
122
- * Additional CSS classes for the form panel
123
- */
124
- formPanelClassName?: string;
125
- /**
126
- * Additional CSS classes for the form
127
- */
128
- formClassName?: string;
129
- /**
130
- * Additional CSS classes for the submit button
131
- */
132
- submitClassName?: string;
133
- /**
134
- * Additional CSS classes for the info panel
135
- */
136
- infoPanelClassName?: string;
137
- /**
138
- * Additional CSS classes for the contact options container
139
- */
140
- contactOptionsClassName?: string;
141
- /**
142
- * Additional CSS classes for the social links container
143
- */
144
- socialLinksClassName?: string;
145
- /**
146
- * Additional CSS classes for the success message
147
- */
148
- successMessageClassName?: string;
149
- /**
150
- * Additional CSS classes for the error message
151
- */
152
- errorMessageClassName?: string;
153
- /**
154
- * Background style for the section
155
- */
156
- background?: SectionBackground;
157
- /**
158
- * Vertical spacing for the section
159
- */
160
- spacing?: SectionSpacing;
161
- /**
162
- * Optional background pattern name or URL
163
- */
164
- pattern?: PatternName | undefined;
165
- /**
166
- * Pattern overlay opacity (0-1)
167
- */
168
- patternOpacity?: number;
169
- /**
170
- * Optional form submission configuration.
171
- *
172
- * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
173
- * and the form will submit to it in JSON format.
174
- *
175
- * @example
176
- * // Works with any API
177
- * formConfig={{ endpoint: "https://api.mysite.com/contact", format: "json" }}
178
- *
179
- * @example
180
- * // With custom headers (e.g., authentication)
181
- * formConfig={{
182
- * endpoint: "/api/contact",
183
- * headers: { "Authorization": "Bearer token123" }
184
- * }}
185
- *
186
- * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
187
- * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
188
- * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
189
- *
190
- * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
191
- */
192
- formConfig?: PageSpeedFormConfig;
193
- /**
194
- * Optional custom submission handler for maximum flexibility.
195
- *
196
- * Use this when you need complete control over the submission logic,
197
- * such as custom API calls, analytics tracking, or multi-step workflows.
198
- *
199
- * Can be used alone or in combination with `formConfig` for hybrid approaches.
200
- *
201
- * @example
202
- * onSubmit={async (values) => {
203
- * await fetch("/api/contact", {
204
- * method: "POST",
205
- * body: JSON.stringify(values)
206
- * });
207
- * }}
208
- */
209
- onSubmit?: (values: Record<string, any>) => void | Promise<void>;
210
- /**
211
- * Optional success callback invoked after successful submission.
212
- *
213
- * Called after `formConfig` submission and/or `onSubmit` completes successfully.
214
- * Use for showing success messages, redirecting, analytics tracking, etc.
215
- */
216
- onSuccess?: (data: unknown) => void;
217
- /**
218
- * Optional error callback invoked if submission fails.
219
- *
220
- * Receives the error object for custom error handling, logging, or user notifications.
221
- */
222
- onError?: (error: Error) => void;
223
- }
224
- /**
225
- * ContactDark - A dark-themed contact form with split layout featuring a form
226
- * on one side and contact information with social links on a dark background.
227
- * Perfect for modern, high-contrast designs.
228
- *
229
- * @example
230
- * ```tsx
231
- * <ContactDark
232
- * heading="Contact Us"
233
- * description="Any questions or remarks? Just write us a message!"
234
- * buttonText="Send Message"
235
- * formConfig={{ endpoint: "/api/contact", format: "json" }}
236
- * />
237
- * ```
238
- */
239
- declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, successMessageClassName, errorMessageClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
240
-
241
- export { ContactDark, type ContactDarkProps };