@opensite/ui 1.9.4 → 1.9.6

package/dist/contact-consultation.cjs

@@ -7,7 +7,6 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var inputs = require('@page-speed/forms/inputs');
 var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
@@ -377,7 +376,6 @@ var Pressable = React__namespace.forwardRef(
       rel,
       linkType,
       isInternal,
-      isExternal,
       handleClick
     } = navigation;
     const shouldRenderLink = normalizedHref && linkType !== "none";
@@ -476,208 +474,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function DynamicFormField({
-  field,
-  className,
-  uploadProgress = {},
-  onFileUpload,
-  onFileRemove,
-  isUploading = false
-}) {
-  const fieldId = field.name;
-  const usesGroupLegend = field.type === "radio" || field.type === "checkbox-group";
-  const usesInlineCheckboxLabel = field.type === "checkbox";
-  const shouldRenderFieldLabel = !usesGroupLegend && !usesInlineCheckboxLabel;
-  const checkboxLabel = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    field.label,
-    field.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    forms.Field,
-    {
-      name: field.name,
-      label: shouldRenderFieldLabel ? field.label : void 0,
-      description: shouldRenderFieldLabel ? field.description : void 0,
-      required: field.required,
-      className: cn("space-y-2", className),
-      children: ({ field: formField, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.TextInput,
-          {
-            ...formField,
-            id: fieldId,
-            type: field.type,
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "number" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.TextInput,
-          {
-            ...formField,
-            id: fieldId,
-            type: "text",
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.TextArea,
-          {
-            ...formField,
-            id: fieldId,
-            placeholder: field.placeholder,
-            rows: field.rows || 4,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.Select,
-          {
-            ...formField,
-            id: fieldId,
-            options: field.options,
-            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "multi-select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.MultiSelect,
-          {
-            ...formField,
-            id: fieldId,
-            options: field.options,
-            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "radio" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.Radio,
-          {
-            ...formField,
-            id: fieldId,
-            options: field.options,
-            label: field.label,
-            description: field.description,
-            required: field.required,
-            disabled: field.disabled,
-            layout: field.layout || "stacked",
-            error: meta.touched && !!meta.error,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.Checkbox,
-          {
-            ...formField,
-            id: fieldId,
-            value: formField.value === true || formField.value === "true",
-            onChange: (checked) => formField.onChange(checked),
-            label: checkboxLabel,
-            description: field.description,
-            disabled: field.disabled,
-            required: field.required,
-            error: meta.touched && !!meta.error,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "checkbox-group" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.CheckboxGroup,
-          {
-            ...formField,
-            id: fieldId,
-            options: field.options,
-            label: field.label,
-            description: field.description,
-            required: field.required,
-            disabled: field.disabled,
-            layout: field.layout || "stacked",
-            error: meta.touched && !!meta.error,
-            "aria-label": field.label
-          }
-        ),
-        (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.DatePicker,
-          {
-            ...formField,
-            id: fieldId,
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "date-range" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.DateRangePicker,
-          {
-            ...formField,
-            id: fieldId,
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "time" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.TimePicker,
-          {
-            ...formField,
-            id: fieldId,
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "file" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.FileInput,
-          {
-            ...formField,
-            id: fieldId,
-            accept: field.accept,
-            maxSize: field.maxSize || 5 * 1024 * 1024,
-            maxFiles: field.maxFiles || 1,
-            multiple: field.multiple || false,
-            placeholder: field.placeholder || "Choose file(s)...",
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled || isUploading,
-            showProgress: true,
-            uploadProgress,
-            onChange: (files) => {
-              formField.onChange(files);
-              if (files.length > 0 && onFileUpload) {
-                onFileUpload(files);
-              }
-            },
-            onFileRemove,
-            "aria-label": field.label
-          }
-        ),
-        field.type === "rich-text" && /* @__PURE__ */ jsxRuntime.jsx(
-          inputs.RichTextEditor,
-          {
-            ...formField,
-            id: fieldId,
-            placeholder: field.placeholder,
-            error: meta.touched && !!meta.error,
-            disabled: field.disabled,
-            "aria-label": field.label
-          }
-        )
-      ] })
-    }
-  );
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -783,299 +579,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/form-field-types.ts
-function generateInitialValues(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      if (field.type === "checkbox") {
-        acc[field.name] = false;
-      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
-        acc[field.name] = [];
-      } else if (field.type === "file") {
-        acc[field.name] = [];
-      } else if (field.type === "date-range") {
-        acc[field.name] = { start: null, end: null };
-      } else {
-        acc[field.name] = "";
-      }
-      return acc;
-    },
-    {}
-  );
-}
-function generateValidationSchema(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      acc[field.name] = (value, allValues) => {
-        if (field.required) {
-          if (!value || typeof value === "string" && !value.trim()) {
-            return `${field.label} is required`;
-          }
-        }
-        if (field.type === "email" && value) {
-          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-            return "Please enter a valid email address";
-          }
-        }
-        if (field.type === "url" && value) {
-          try {
-            new URL(value);
-          } catch {
-            return "Please enter a valid URL";
-          }
-        }
-        if (field.validator) {
-          return field.validator(value, allValues);
-        }
-        return void 0;
-      };
-      return acc;
-    },
-    {}
-  );
-}
-var columnSpanClasses = {
-  1: "col-span-12 md:col-span-1",
-  2: "col-span-12 md:col-span-2",
-  3: "col-span-12 md:col-span-3",
-  4: "col-span-12 md:col-span-4",
-  5: "col-span-12 md:col-span-5",
-  6: "col-span-12 md:col-span-6",
-  7: "col-span-12 md:col-span-7",
-  8: "col-span-12 md:col-span-8",
-  9: "col-span-12 md:col-span-9",
-  10: "col-span-12 md:col-span-10",
-  11: "col-span-12 md:col-span-11",
-  12: "col-span-12"
-};
-function getColumnSpanClass(span) {
-  if (!span || span === 12) return "col-span-12";
-  const clamped = Math.max(1, Math.min(span, 12));
-  return columnSpanClasses[clamped] || "col-span-12";
-}
-function useContactForm(options) {
-  const {
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess,
-    onError,
-    resetOnSuccess = true,
-    uploadTokens = []
-  } = options;
-  const [submissionError, setSubmissionError] = React.useState(null);
-  const submissionConfig = formConfig?.submissionConfig;
-  const redirectUrl = submissionConfig?.redirectUrl;
-  const redirectNavigation = useNavigation({ href: redirectUrl });
-  const resetSubmissionState = React.useCallback(() => {
-    setSubmissionError(null);
-  }, []);
-  const performRedirect = React.useCallback(() => {
-    if (!redirectUrl || typeof window === "undefined") {
-      return;
-    }
-    const navigate = () => {
-      if (redirectNavigation.shouldUseRouter && redirectNavigation.normalizedHref) {
-        const handler = window.__opensiteNavigationHandler;
-        if (typeof handler === "function") {
-          try {
-            const handled = handler(redirectNavigation.normalizedHref, void 0);
-            if (handled !== false) {
-              return;
-            }
-          } catch (error) {
-            console.error("Internal redirect handler failed:", error);
-          }
-        }
-      }
-      const destination = redirectNavigation.normalizedHref || redirectUrl;
-      window.location.assign(destination);
-    };
-    window.setTimeout(navigate, 150);
-  }, [redirectNavigation, redirectUrl]);
-  const form = forms.useForm({
-    initialValues: React.useMemo(
-      () => generateInitialValues(formFields),
-      [formFields]
-    ),
-    validationSchema: React.useMemo(
-      () => generateValidationSchema(formFields),
-      [formFields]
-    ),
-    onSubmit: async (values, helpers) => {
-      resetSubmissionState();
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        const submissionValues = {
-          ...values,
-          ...uploadTokens.length > 0 && {
-            contact_form_upload_tokens: uploadTokens
-          }
-        };
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(submissionValues, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(submissionValues);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          try {
-            await submissionConfig?.handleFormSubmission?.({
-              formData: submissionValues,
-              responseData: result
-            });
-          } catch (callbackError) {
-            console.error("handleFormSubmission callback failed:", callbackError);
-          }
-          if (resetOnSuccess) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-          if (submissionConfig?.behavior === "redirect" && submissionConfig.redirectUrl) {
-            performRedirect();
-          }
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        const errorMessage = error instanceof Error ? error.message : "Form submission failed";
-        setSubmissionError(errorMessage);
-        onError?.(error);
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  return {
-    form,
-    isSubmitted: form.status === "success",
-    submissionError,
-    formMethod,
-    resetSubmissionState
-  };
-}
-
-// lib/forms.ts
-var PageSpeedFormSubmissionError = class extends Error {
-  constructor(message, options = {}) {
-    super(message);
-    this.name = "PageSpeedFormSubmissionError";
-    this.formErrors = options.formErrors;
-    this.status = options.status;
-  }
-};
-function buildUrlWithParams(endpoint, values) {
-  const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
-  const url = new URL(endpoint, base);
-  Object.entries(values).forEach(([key, value]) => {
-    if (value === void 0 || value === null) {
-      return;
-    }
-    if (Array.isArray(value)) {
-      value.forEach((item) => {
-        if (item !== void 0 && item !== null) {
-          url.searchParams.append(key, String(item));
-        }
-      });
-      return;
-    }
-    url.searchParams.set(key, String(value));
-  });
-  return url.toString();
-}
-function normalizeMethod(method) {
-  return (method || "post").toUpperCase();
-}
-function resolveFormat(config) {
-  if (config?.format) {
-    return config.format;
-  }
-  return config?.apiKey ? "rails" : "json";
-}
-function mergeValues(values, config) {
-  return {
-    ...config?.values ?? {},
-    ...values
-  };
-}
-async function submitPageSpeedForm(values, config) {
-  if (!config?.endpoint) {
-    return null;
-  }
-  const payload = mergeValues(values, config);
-  const method = normalizeMethod(config.method);
-  const format = resolveFormat(config);
-  const headers = { ...config.headers ?? {} };
-  if (format === "rails") {
-    if (!config.apiKey) {
-      throw new PageSpeedFormSubmissionError(
-        "Missing apiKey for Rails form submission."
-      );
-    }
-    const railsConfig = {
-      apiKey: config.apiKey,
-      contactCategoryToken: config.contactCategoryToken,
-      locationId: config.locationId,
-      websiteId: config.websiteId,
-      websiteFormAssignmentId: config.websiteFormAssignmentId,
-      visitorIpAddress: config.visitorIpAddress
-    };
-    const serialized = integration.serializeForRails(payload, railsConfig);
-    if (serialized.contact.contact_form_upload_tokens) {
-      serialized.contact.contact_form_upload_tokens = serialized.contact.contact_form_upload_tokens.map((token) => token.replace(/^upload_/, ""));
-    }
-    headers["Content-Type"] ?? (headers["Content-Type"] = "application/json");
-    const response2 = await fetch(config.endpoint, {
-      method,
-      headers,
-      body: JSON.stringify(serialized)
-    });
-    const data2 = await response2.json().catch(() => null);
-    if (!response2.ok || data2 && data2.errors) {
-      const errorResponse = {
-        errors: data2?.errors ?? { base: ["Form submission failed"] },
-        status: data2?.status ?? response2.status
-      };
-      const formErrors = integration.deserializeErrors(errorResponse);
-      throw new PageSpeedFormSubmissionError("Form submission failed.", {
-        formErrors,
-        status: errorResponse.status
-      });
-    }
-    return data2;
-  }
-  if (method === "GET") {
-    const url = buildUrlWithParams(config.endpoint, payload);
-    const response2 = await fetch(url, { method, headers });
-    const data2 = await response2.json().catch(() => null);
-    if (!response2.ok) {
-      throw new PageSpeedFormSubmissionError(
-        data2?.message || "Form submission failed.",
-        { status: response2.status }
-      );
-    }
-    return data2;
-  }
-  headers["Content-Type"] ?? (headers["Content-Type"] = "application/json");
-  const response = await fetch(config.endpoint, {
-    method,
-    headers,
-    body: JSON.stringify(payload)
-  });
-  const data = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new PageSpeedFormSubmissionError(
-      data?.message || "Form submission failed.",
-      { status: response.status }
-    );
-  }
-  return data;
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1583,7 +1086,7 @@ function ContactConsultation({
     () => formFields || DEFAULT_FORM_FIELDS,
     [formFields]
   );
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
     formFields: fields,
     formConfig,
     onSubmit,
@@ -1666,7 +1169,7 @@ function ContactConsultation({
             onNewSubmission: resetSubmissionState,
             className: cn("space-y-6", formClassName),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: getColumnSpanClass(field.columnSpan), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicFormField, { field }) }, field.name)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: integration.getColumnSpanClass(field.columnSpan), children: /* @__PURE__ */ jsxRuntime.jsx(integration.DynamicFormField, { field }) }, field.name)) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                 Pressable,
                 {

package/dist/contact-consultation.d.cts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { F as FormFieldConfig } from './form-field-types-BTyCq8Hy.cjs';
-import { P as PageSpeedFormConfig } from './forms-CStlFhnh.cjs';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
-import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
-import '@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';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactConsultationProps {

package/dist/contact-consultation.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { F as FormFieldConfig } from './form-field-types-BTyCq8Hy.js';
-import { P as PageSpeedFormConfig } from './forms-CStlFhnh.js';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
-import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
-import '@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';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactConsultationProps {