@opensite/ui 1.9.8 → 2.0.0

package/dist/contact-demo.js

@@ -1,19 +1,14 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
-import { useForm, Form, Field } from '@page-speed/forms';
-import { Select, TextInput as TextInput$1 } from '@page-speed/forms/inputs';
+import React__default, { useMemo } from 'react';
+import { Form } from '@page-speed/forms';
+import { useFileUpload, useContactForm, getColumnSpanClass, DynamicFormField } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { submitPageSpeedForm, PageSpeedFormSubmissionError } from '@page-speed/forms/integration';
 
 // components/blocks/contact/contact-demo.tsx
-var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -435,111 +430,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -563,66 +453,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Checkbox({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    {
-      "data-slot": "checkbox",
-      className: cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        CheckboxPrimitive.Indicator,
-        {
-          "data-slot": "checkbox-indicator",
-          className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 })
-        }
-      )
-    }
-  );
-}
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.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",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -998,36 +828,60 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var USE_CASES = [
-  { value: "automation", label: "Workflow Automation", icon: "lucide/zap" },
+var DEFAULT_FORM_FIELDS = [
   {
-    value: "analytics",
-    label: "Analytics & Reporting",
-    icon: "lucide/bar-chart-3"
+    name: "first_name",
+    type: "text",
+    label: "First Name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 6
   },
-  { value: "collaboration", label: "Team Collaboration", icon: "lucide/users" }
-];
-var TEAM_SIZES = [
-  { value: "1-10", label: "1-10" },
-  { value: "11-50", label: "11-50" },
-  { value: "51-200", label: "51-200" },
-  { value: "201-500", label: "201-500" },
-  { value: "500+", label: "500+" }
-];
-var TIMELINES = [
-  { value: "asap", label: "As soon as possible" },
-  { value: "this-week", label: "This week" },
-  { value: "this-month", label: "This month" },
-  { value: "exploring", label: "Just exploring" }
+  {
+    name: "last_name",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    placeholder: "Your message...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
 ];
 function ContactDemo({
   heading,
   description,
-  buttonText,
+  buttonText = "Submit",
   buttonIcon,
   actions,
   actionsSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  successMessage = "Thank you! Your message has been sent successfully.",
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1035,72 +889,38 @@ function ContactDemo({
   cardContentClassName,
   formClassName,
   submitClassName,
-  spacing = "py-8 md:py-32",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  background,
+  successMessageClassName,
+  errorMessageClassName,
+  background = "white",
+  spacing = "xl",
   pattern,
-  patternOpacity,
+  patternOpacity = 0.1,
   formConfig,
   onSubmit,
   onSuccess,
   onError
 }) {
-  const form = useForm({
-    initialValues: {
-      useCase: "",
-      teamSize: "",
-      timeline: "",
-      firstName: "",
-      lastName: "",
-      email: "",
-      company: "",
-      jobTitle: "",
-      updates: false
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    validationSchema: {
-      useCase: (value) => !value ? "Please select a use case" : void 0,
-      teamSize: (value) => !value ? "Please select team size" : void 0,
-      timeline: (value) => !value ? "Please select a timeline" : void 0,
-      firstName: (value) => !value ? "First name is required" : void 0,
-      lastName: (value) => !value ? "Last 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;
-      },
-      company: (value) => !value ? "Company is required" : void 0
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof 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 actionsContent = React.useMemo(() => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -1137,9 +957,9 @@ function ContactDemo({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn("py-12", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
@@ -1162,174 +982,57 @@ function ContactDemo({
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
           Form,
           {
             form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            className: cn("space-y-8", formClassName),
+            notificationConfig: {
+              submissionError,
+              successMessage
+            },
+            styleConfig: {
+              formClassName: cn("space-y-4", formClassName),
+              successMessageClassName,
+              errorMessageClassName
+            },
+            formConfig: {
+              endpoint: formConfig?.endpoint,
+              method: formMethod,
+              submissionConfig: formConfig?.submissionConfig
+            },
+            onNewSubmission: () => {
+              resetUpload();
+              resetSubmissionState();
+            },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "What's your primary use case?" }),
-                /* @__PURE__ */ jsx(Field, { name: "useCase", children: ({ field, meta }) => /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs(
-                  Select,
-                  {
-                    ...field,
-                    id: "use-case",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Use Case",
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: "Select a use case" }),
-                      USE_CASES.map((useCase) => /* @__PURE__ */ jsx("option", { value: useCase.value, children: useCase.label }, useCase.value))
-                    ]
-                  }
-                ) }) })
-              ] }),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsxs("div", { className: "grid gap-6 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsx(Field, { name: "teamSize", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "team-size", children: "Team Size" }),
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      ...field,
-                      id: "team-size",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Team Size",
-                      children: [
-                        /* @__PURE__ */ jsx("option", { value: "", children: "Select team size" }),
-                        TEAM_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size.value, children: size.label }, size.value))
-                      ]
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsx(Field, { name: "timeline", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "timeline", children: "When do you need this?" }),
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      ...field,
-                      id: "timeline",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Timeline",
-                      children: [
-                        /* @__PURE__ */ jsx("option", { value: "", children: "Select timeline" }),
-                        TIMELINES.map((time) => /* @__PURE__ */ jsx("option", { value: time.value, children: time.label }, time.value))
-                      ]
-                    }
-                  )
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Your Information" }),
-                /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsx(Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "first-name",
-                        placeholder: "John",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "First Name"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsx(Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "last-name",
-                        placeholder: "Doe",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Last Name"
-                      }
-                    )
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsx(Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Work Email" }),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "email",
-                      type: "email",
-                      placeholder: "john@company.com",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Work Email"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsx(Field, { name: "company", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "company", children: "Company" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "company",
-                        placeholder: "Acme Inc.",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Company"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsx(Field, { name: "jobTitle", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "job-title", children: "Job Title (Optional)" }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "job-title",
-                        placeholder: "Product Manager",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Job Title"
-                      }
-                    )
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsx(Field, { name: "updates", children: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      id: "updates",
-                      checked: field.value,
-                      onCheckedChange: (checked) => field.onChange(checked === true)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Label,
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsx(
+                    DynamicFormField,
                     {
-                      htmlFor: "updates",
-                      className: "cursor-pointer text-sm font-normal",
-                      children: "Send me product updates and announcements"
+                      field,
+                      uploadProgress,
+                      onFileUpload: uploadFiles,
+                      onFileRemove: removeFile,
+                      isUploading
                     }
                   )
-                ] }) })
-              ] }),
+                },
+                field.name
+              )) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                 Pressable,
                 {
                   componentType: "button",
                   type: "submit",
                   className: cn("w-full", submitClassName),
+                  size: "lg",
                   asButton: true,
                   disabled: form.isSubmitting,
                   children: [
-                    buttonIcon ?? /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/calendar",
-                        size: 16,
-                        className: "mr-2"
-                      }
-                    ),
+                    buttonIcon,
                     buttonText
                   ]
                 }