@opensite/ui 1.9.8 → 2.0.0

package/dist/contact-emergency.cjs

@@ -3,15 +3,13 @@
 
 var React = require('react');
 var forms = require('@page-speed/forms');
-var inputs = require('@page-speed/forms/inputs');
+var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var LabelPrimitive = require('@radix-ui/react-label');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var reactSlot = require('@radix-ui/react-slot');
-var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,12 +30,9 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 // components/blocks/contact/contact-emergency.tsx
-var TextInput = inputs.TextInput;
-var TextArea = inputs.TextArea;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -587,22 +582,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function Separator({
   className,
   orientation = "horizontal",
@@ -1050,13 +1029,66 @@ var PRIORITIES = [
     response: "24 hours"
   }
 ];
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "priority",
+    type: "radio",
+    label: "Priority Level",
+    required: true,
+    columnSpan: 12,
+    options: PRIORITIES.map((p) => ({ value: p.value, label: p.label }))
+  },
+  {
+    name: "name",
+    type: "text",
+    label: "Name",
+    placeholder: "Your name",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "you@company.com",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone (Optional)",
+    placeholder: "+1 (555) 000-0000",
+    required: false,
+    columnSpan: 12
+  },
+  {
+    name: "subject",
+    type: "text",
+    label: "Subject",
+    placeholder: "Brief summary of the issue",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "description",
+    type: "textarea",
+    label: "Description",
+    placeholder: "Describe the issue, what you've tried, and the impact...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
+];
 function ContactEmergency({
   heading,
   description,
-  buttonText,
+  buttonText = "Submit Emergency Request",
   buttonIcon,
   actions,
   actionsSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  successMessage = "Thank you! Your emergency request has been received.",
   className,
   headerClassName,
   headingClassName,
@@ -1065,6 +1097,8 @@ function ContactEmergency({
   cardContentClassName,
   formClassName,
   submitClassName,
+  successMessageClassName,
+  errorMessageClassName,
   spacing = "py-8 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   background,
@@ -1075,60 +1109,32 @@ function ContactEmergency({
   onSuccess,
   onError
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      priority: "normal",
-      name: "",
-      email: "",
-      phone: "",
-      subject: "",
-      description: ""
-    },
-    validationSchema: {
-      priority: (value) => !value ? "Priority is required" : void 0,
-      name: (value) => !value ? "Name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      subject: (value) => !value ? "Subject is required" : void 0,
-      description: (value) => !value ? "Description is required" : void 0
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+    onError,
+    resetOnSuccess: formConfig?.resetOnSuccess !== false,
+    uploadTokens
   });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+  const priorityField = formFields.find((f) => f.name === "priority");
+  const otherFields = formFields.filter((f) => f.name !== "priority");
   PRIORITIES.find(
     (p) => p.value === form.values.priority
   );
-  const actionsContent = React__namespace.useMemo(() => {
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -1185,16 +1191,27 @@ function ContactEmergency({
           forms.Form,
           {
             form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            className: formClassName,
+            notificationConfig: {
+              submissionError,
+              successMessage
+            },
+            styleConfig: {
+              formClassName,
+              successMessageClassName,
+              errorMessageClassName
+            },
+            formConfig: {
+              endpoint: formConfig?.endpoint,
+              method: formMethod,
+              submissionConfig: formConfig?.submissionConfig
+            },
+            onNewSubmission: () => {
+              resetUpload();
+              resetSubmissionState();
+            },
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b p-6 md:border-b-0 md:border-r", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/alert-triangle", size: 20 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Priority Level" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "priority", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: PRIORITIES.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                priorityField && /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "priority", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: PRIORITIES.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "label",
                   {
                     htmlFor: `priority-${item.value}`,
@@ -1218,17 +1235,24 @@ function ContactEmergency({
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.label }),
-                          /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              DynamicIcon,
-                              {
-                                name: "lucide/clock",
-                                size: 12,
-                                className: "mr-1"
-                              }
-                            ),
-                            item.response
-                          ] })
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            Badge,
+                            {
+                              variant: "secondary",
+                              className: "text-xs",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: "lucide/clock",
+                                    size: 12,
+                                    className: "mr-1"
+                                  }
+                                ),
+                                item.response
+                              ]
+                            }
+                          )
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: item.description })
                       ] })
@@ -1254,76 +1278,23 @@ function ContactEmergency({
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Describe Your Issue" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "name", children: "Name" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TextInput,
-                        {
-                          ...field,
-                          id: "name",
-                          placeholder: "Your name",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Name"
-                        }
-                      )
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TextInput,
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-4", children: otherFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: integration.getColumnSpanClass(field.columnSpan),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        integration.DynamicFormField,
                         {
-                          ...field,
-                          id: "email",
-                          type: "email",
-                          placeholder: "you@company.com",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Email"
+                          field,
+                          uploadProgress,
+                          onFileUpload: uploadFiles,
+                          onFileRemove: removeFile,
+                          isUploading
                         }
                       )
-                    ] }) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone (Optional)" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "phone",
-                        type: "tel",
-                        placeholder: "+1 (555) 000-0000",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Phone"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "subject", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "subject", children: "Subject" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "subject",
-                        placeholder: "Brief summary of the issue",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Subject"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "description", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "description", children: "Description" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextArea,
-                      {
-                        ...field,
-                        id: "description",
-                        placeholder: "Describe the issue, what you've tried, and the impact...",
-                        rows: 4,
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Description"
-                      }
-                    )
-                  ] }) }),
+                    },
+                    field.name
+                  )) }),
                   /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,

package/dist/contact-emergency.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
@@ -7,14 +7,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-interface EmergencyFormValues {
-    priority: string;
-    name: string;
-    email: string;
-    phone: string;
-    subject: string;
-    description: string;
-}
 interface ContactEmergencyProps {
     /**
      * Main heading text
@@ -40,6 +32,16 @@ interface ContactEmergencyProps {
      * Custom slot for rendering actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Array of form field configurations
+     * If not provided, defaults to: priority, name, email, phone, subject, description
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your emergency request has been received."
+     */
+    successMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -75,7 +77,16 @@ interface ContactEmergencyProps {
     /**
      * Additional CSS classes for the submit button
      */
-    submitClassName?: string; /**
+    submitClassName?: string;
+    /**
+     * Additional CSS classes for the success message
+     */
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -98,7 +109,7 @@ interface ContactEmergencyProps {
     /**
      * Custom submit handler
      */
-    onSubmit?: (values: EmergencyFormValues) => void | Promise<void>;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
     /**
      * Success callback
      */
@@ -120,6 +131,6 @@ interface ContactEmergencyProps {
  * />
  * ```
  */
-declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
+declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
 
 export { ContactEmergency, type ContactEmergencyProps };

package/dist/contact-emergency.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
@@ -7,14 +7,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface EmergencyFormValues {
-    priority: string;
-    name: string;
-    email: string;
-    phone: string;
-    subject: string;
-    description: string;
-}
 interface ContactEmergencyProps {
     /**
      * Main heading text
@@ -40,6 +32,16 @@ interface ContactEmergencyProps {
      * Custom slot for rendering actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Array of form field configurations
+     * If not provided, defaults to: priority, name, email, phone, subject, description
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your emergency request has been received."
+     */
+    successMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -75,7 +77,16 @@ interface ContactEmergencyProps {
     /**
      * Additional CSS classes for the submit button
      */
-    submitClassName?: string; /**
+    submitClassName?: string;
+    /**
+     * Additional CSS classes for the success message
+     */
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -98,7 +109,7 @@ interface ContactEmergencyProps {
     /**
      * Custom submit handler
      */
-    onSubmit?: (values: EmergencyFormValues) => void | Promise<void>;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
     /**
      * Success callback
      */
@@ -120,6 +131,6 @@ interface ContactEmergencyProps {
  * />
  * ```
  */
-declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
+declare function ContactEmergency({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactEmergencyProps): React.JSX.Element;
 
 export { ContactEmergency, type ContactEmergencyProps };