@page-speed/forms 0.5.2 → 0.5.4

package/dist/core.js

@@ -1,718 +1,5 @@
-import * as React4 from 'react';
-import { useRef, useCallback, useContext } from 'react';
-import { useObservable, useSelector } from '@legendapp/state/react';
-import { useMap } from '@opensite/hooks/useMap';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
-import { Label as Label$1, Slot } from 'radix-ui';
-
-// src/core/useForm.ts
-function useForm(options) {
-  const {
-    initialValues,
-    validationSchema,
-    validateOn = "onBlur",
-    revalidateOn = "onChange",
-    onSubmit,
-    onError,
-    debug = false
-  } = options;
-  const state$ = useObservable({
-    values: initialValues,
-    errors: {},
-    touched: {},
-    isSubmitting: false,
-    status: "idle",
-    initialValues: { ...initialValues },
-    // Create a copy to prevent reference sharing
-    hasValidated: {}
-  });
-  const validationInProgress = useRef(/* @__PURE__ */ new Set());
-  const [, fieldMetadataActions] = useMap();
-  const validateField = useCallback(
-    async (field) => {
-      const validators = validationSchema?.[field];
-      if (!validators) return void 0;
-      const fieldKey = String(field);
-      validationInProgress.current.add(fieldKey);
-      const currentMeta = fieldMetadataActions.get(fieldKey) || {
-        validationCount: 0
-      };
-      fieldMetadataActions.set(fieldKey, {
-        lastValidated: Date.now(),
-        validationCount: currentMeta.validationCount + 1
-      });
-      try {
-        const value = state$.values[field].get();
-        const allValues = state$.values.get();
-        const validatorArray = Array.isArray(validators) ? validators : [validators];
-        for (const validator of validatorArray) {
-          const error = await validator(value, allValues);
-          if (error) {
-            state$.errors[field].set(error);
-            validationInProgress.current.delete(fieldKey);
-            return error;
-          }
-        }
-        state$.errors[field].set(void 0);
-        validationInProgress.current.delete(fieldKey);
-        return void 0;
-      } catch (error) {
-        validationInProgress.current.delete(fieldKey);
-        const errorMessage = error instanceof Error ? error.message : "Validation error";
-        state$.errors[field].set(errorMessage);
-        return errorMessage;
-      }
-    },
-    [validationSchema, state$, fieldMetadataActions]
-  );
-  const validateForm = useCallback(async () => {
-    if (!validationSchema) return {};
-    const fields = Object.keys(validationSchema);
-    const errors2 = {};
-    await Promise.all(
-      fields.map(async (field) => {
-        const error = await validateField(field);
-        if (error) {
-          errors2[field] = error;
-        }
-      })
-    );
-    state$.errors.set(errors2);
-    return errors2;
-  }, [validationSchema, validateField, state$]);
-  const setFieldValue = useCallback(
-    (field, value) => {
-      state$.values[field].set(value);
-      const shouldRevalidate = revalidateOn === "onChange" && state$.hasValidated[String(field)].get();
-      if (shouldRevalidate && validationSchema?.[field]) {
-        validateField(field);
-      }
-      if (debug) {
-        console.log("[useForm] setFieldValue:", { field, value });
-      }
-    },
-    [state$, revalidateOn, validationSchema, validateField, debug]
-  );
-  const setFieldTouched = useCallback(
-    (field, touched2) => {
-      state$.touched[field].set(touched2);
-      if (touched2 && validateOn === "onBlur" && validationSchema?.[field]) {
-        state$.hasValidated[String(field)].set(true);
-        validateField(field);
-      }
-      if (debug) {
-        console.log("[useForm] setFieldTouched:", { field, touched: touched2 });
-      }
-    },
-    [state$, validateOn, validationSchema, validateField, debug]
-  );
-  const resetForm = useCallback(() => {
-    state$.values.set(state$.initialValues.get());
-    state$.errors.set({});
-    state$.touched.set({});
-    state$.isSubmitting.set(false);
-    state$.status.set("idle");
-    state$.hasValidated.set({});
-    fieldMetadataActions.clear();
-    if (debug) {
-      console.log("[useForm] Form reset");
-    }
-  }, [state$, fieldMetadataActions, debug]);
-  const handleSubmit = useCallback(
-    async (e) => {
-      e?.preventDefault();
-      if (debug) {
-        console.log("[useForm] handleSubmit started");
-      }
-      state$.isSubmitting.set(true);
-      state$.status.set("submitting");
-      try {
-        const errors2 = await validateForm();
-        const hasErrors = Object.keys(errors2).length > 0;
-        if (hasErrors) {
-          state$.status.set("error");
-          onError?.(errors2);
-          if (debug) {
-            console.log("[useForm] Validation errors:", errors2);
-          }
-          return;
-        }
-        const helpers = {
-          setValues: (values2) => {
-            if (typeof values2 === "function") {
-              state$.values.set(values2(state$.values.get()));
-            } else {
-              state$.values.set(values2);
-            }
-          },
-          setFieldValue,
-          setErrors: (errors3) => state$.errors.set(errors3),
-          setFieldError: (field, error) => state$.errors[field].set(error),
-          setTouched: (touched2) => state$.touched.set(touched2),
-          setFieldTouched,
-          setSubmitting: (submitting) => state$.isSubmitting.set(submitting),
-          resetForm
-        };
-        await onSubmit(state$.values.get(), helpers);
-        state$.status.set("success");
-        if (debug) {
-          console.log("[useForm] Submit successful");
-        }
-      } catch (error) {
-        state$.status.set("error");
-        if (debug) {
-          console.error("[useForm] Submit error:", error);
-        }
-        throw error;
-      } finally {
-        state$.isSubmitting.set(false);
-      }
-    },
-    [
-      state$,
-      validateForm,
-      onSubmit,
-      onError,
-      setFieldValue,
-      setFieldTouched,
-      resetForm,
-      debug
-    ]
-  );
-  const getFieldProps = useCallback(
-    (field) => {
-      return {
-        name: String(field),
-        value: state$.values[field].get(),
-        onChange: (value) => setFieldValue(field, value),
-        onBlur: () => setFieldTouched(field, true)
-      };
-    },
-    [state$, setFieldValue, setFieldTouched]
-  );
-  const getFieldMeta = useCallback(
-    (field) => {
-      const fieldKey = String(field);
-      const metadata = fieldMetadataActions.get(fieldKey);
-      return {
-        error: state$.errors[field].get(),
-        touched: state$.touched[field].get() ?? false,
-        isDirty: state$.values[field].get() !== state$.initialValues[field].get(),
-        isValidating: validationInProgress.current.has(fieldKey),
-        // Additional metadata from @opensite/hooks
-        validationCount: metadata?.validationCount,
-        lastValidated: metadata?.lastValidated
-      };
-    },
-    [state$, fieldMetadataActions]
-  );
-  const values = useSelector(() => state$.values.get());
-  const errors = useSelector(() => state$.errors.get());
-  const touched = useSelector(() => state$.touched.get());
-  const isSubmitting = useSelector(() => state$.isSubmitting.get());
-  const status = useSelector(() => state$.status.get());
-  const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);
-  const isDirty = useSelector(() => {
-    const currentValues = state$.values.get();
-    const initialValues2 = state$.initialValues.get();
-    return Object.keys(currentValues).some(
-      (key) => currentValues[key] !== initialValues2[key]
-    );
-  });
-  return {
-    // State
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    isValid,
-    isDirty,
-    status,
-    // Actions
-    handleSubmit,
-    setValues: (values2) => {
-      if (typeof values2 === "function") {
-        state$.values.set(values2(state$.values.get()));
-      } else {
-        state$.values.set(values2);
-      }
-    },
-    setFieldValue,
-    setErrors: (errors2) => state$.errors.set(errors2),
-    setFieldError: (field, error) => state$.errors[field].set(error),
-    setTouched: (touched2) => state$.touched.set(touched2),
-    setFieldTouched,
-    validateForm,
-    validateField,
-    resetForm,
-    getFieldProps,
-    getFieldMeta
-  };
-}
-var FormContext = React4.createContext(null);
-FormContext.displayName = "FormContext";
-
-// src/core/useField.ts
-function useField(options) {
-  const { name, validate, transform } = options;
-  const form = useContext(FormContext);
-  if (!form) {
-    throw new Error(
-      "useField must be used within a FormContext. Wrap your component with <Form> or use useForm's getFieldProps instead."
-    );
-  }
-  const baseFieldProps = form.getFieldProps(name);
-  const field = {
-    ...baseFieldProps,
-    value: baseFieldProps.value,
-    onChange: (value) => {
-      const transformedValue = transform ? transform(value) : value;
-      baseFieldProps.onChange(transformedValue);
-      if (validate) {
-        const result = validate(transformedValue, form.values);
-        if (result instanceof Promise) {
-          result.then((error) => {
-            if (error !== void 0) {
-              form.setFieldError(name, error);
-            }
-          });
-        } else if (result !== void 0) {
-          form.setFieldError(name, result);
-        }
-      }
-    }
-  };
-  const meta = form.getFieldMeta(name);
-  const helpers = {
-    setValue: useCallback(
-      (value) => {
-        const transformedValue = transform ? transform(value) : value;
-        form.setFieldValue(name, transformedValue);
-      },
-      [name, transform, form]
-    ),
-    setTouched: useCallback(
-      (touched) => {
-        form.setFieldTouched(name, touched);
-      },
-      [name, form]
-    ),
-    setError: useCallback(
-      (error) => {
-        form.setFieldError(name, error);
-      },
-      [name, form]
-    )
-  };
-  return {
-    field,
-    meta,
-    helpers
-  };
-}
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/core/form-feedback.tsx
-function renderMessage(message, fallbackClassName, className) {
-  if (typeof message === "string") {
-    return /* @__PURE__ */ React4.createElement(
-      "p",
-      {
-        className: cn(
-          "text-sm font-medium text-center text-balance",
-          className
-        )
-      },
-      message
-    );
-  }
-  return /* @__PURE__ */ React4.createElement("div", { className: cn(fallbackClassName, className) }, message);
-}
-function FormFeedback({
-  successMessage,
-  submissionError,
-  successMessageClassName,
-  errorMessageClassName
-}) {
-  if (!successMessage && !submissionError) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, successMessage ? /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      className: cn(
-        "rounded-md border border-primary bg-primary px-4 py-3 shadow-sm",
-        successMessageClassName
-      ),
-      role: "status",
-      "aria-live": "polite"
-    },
-    renderMessage(
-      successMessage,
-      "text-primary-foreground",
-      "text-primary-foreground"
-    )
-  ) : null, submissionError ? /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      className: cn(
-        "rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm",
-        errorMessageClassName
-      ),
-      role: "alert",
-      "aria-live": "assertive"
-    },
-    renderMessage(
-      submissionError,
-      "text-destructive-foreground",
-      "text-destructive-foreground"
-    )
-  ) : null);
-}
-FormFeedback.displayName = "FormFeedback";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ React4.createElement(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
-// src/core/Form.tsx
-function Form({
-  form,
-  children,
-  className,
-  action,
-  method,
-  noValidate = true,
-  submissionConfig,
-  successMessage,
-  submissionError,
-  successMessageClassName,
-  errorMessageClassName,
-  onNewSubmission,
-  notificationConfig,
-  styleConfig,
-  formConfig,
-  ...props
-}) {
-  const handleFormSubmit = React4.useCallback(
-    async (e) => {
-      try {
-        await form.handleSubmit(e);
-      } catch {
-      }
-    },
-    [form]
-  );
-  const resolvedClassName = className ?? styleConfig?.formClassName;
-  const resolvedAction = action ?? formConfig?.endpoint;
-  const resolvedMethod = method ?? formConfig?.method ?? "post";
-  const resolvedSubmissionConfig = submissionConfig ?? formConfig?.submissionConfig;
-  const resolvedSuccessMessage = successMessage ?? notificationConfig?.successMessage;
-  const resolvedSubmissionError = submissionError ?? notificationConfig?.submissionError;
-  const resolvedSuccessMessageClassName = successMessageClassName ?? styleConfig?.successMessageClassName;
-  const resolvedErrorMessageClassName = errorMessageClassName ?? styleConfig?.errorMessageClassName;
-  const behavior = resolvedSubmissionConfig?.behavior || "showConfirmation";
-  const shouldManageSubmissionUi = resolvedSubmissionConfig !== void 0 || resolvedSuccessMessage !== void 0 || resolvedSuccessMessageClassName !== void 0 || resolvedErrorMessageClassName !== void 0 || resolvedSubmissionError != null || onNewSubmission !== void 0;
-  const hasSubmissionError = Boolean(resolvedSubmissionError);
-  const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
-  const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
-  const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;
-  const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(resolvedSubmissionConfig?.customComponent);
-  const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
-  const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
-  const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
-  const handleNewSubmission = React4.useCallback(() => {
-    form.resetForm();
-    onNewSubmission?.();
-  }, [form, onNewSubmission]);
-  return /* @__PURE__ */ React4.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React4.createElement(
-    "form",
-    {
-      onSubmit: handleFormSubmit,
-      action: resolvedAction,
-      method: resolvedMethod,
-      noValidate,
-      className: resolvedClassName,
-      ...props
-    },
-    isSubmissionSuccessful ? /* @__PURE__ */ React4.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React4.createElement(
-      FormFeedback,
-      {
-        successMessage: finalSuccessMessage,
-        successMessageClassName: resolvedSuccessMessageClassName
-      }
-    ), showNewSubmissionAction ? /* @__PURE__ */ React4.createElement(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        onClick: handleNewSubmission
-      },
-      newSubmissionLabel
-    ) : null) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, children, resolvedSubmissionError ? /* @__PURE__ */ React4.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React4.createElement(
-      FormFeedback,
-      {
-        submissionError: resolvedSubmissionError,
-        errorMessageClassName: resolvedErrorMessageClassName
-      }
-    )) : null)
-  ));
-}
-Form.displayName = "Form";
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ React4.createElement(
-    Label$1.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
-    }
-  );
-}
-
-// src/components/ui/field.tsx
-var Field = React4.forwardRef(
-  ({ className, orientation = "vertical", invalid = false, ...props }, ref) => {
-    return /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        ref,
-        "data-slot": "field",
-        "data-orientation": orientation,
-        "data-invalid": invalid || void 0,
-        className: cn(
-          "flex",
-          orientation === "horizontal" ? "items-center gap-2" : "flex-col gap-1.5",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Field.displayName = "Field";
-var FieldGroup = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      ref,
-      "data-slot": "field-group",
-      className: cn("flex flex-col gap-4", className),
-      ...props
-    }
-  );
-});
-FieldGroup.displayName = "FieldGroup";
-var FieldLabel = React4.forwardRef(({ className, required, children, ...props }, ref) => {
-  return /* @__PURE__ */ React4.createElement(
-    Label,
-    {
-      ref,
-      "data-slot": "field-label",
-      className: cn(
-        "text-sm font-medium leading-none select-none",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    },
-    children,
-    required && /* @__PURE__ */ React4.createElement("span", { className: "text-destructive ml-1" }, "*")
-  );
-});
-FieldLabel.displayName = "FieldLabel";
-var FieldDescription = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React4.createElement(
-    "p",
-    {
-      ref,
-      "data-slot": "field-description",
-      className: cn("text-sm opacity-70", className),
-      ...props
-    }
-  );
-});
-FieldDescription.displayName = "FieldDescription";
-var FieldError = React4.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React4.createElement(
-    "p",
-    {
-      ref,
-      "data-slot": "field-error",
-      role: "alert",
-      "aria-live": "polite",
-      className: cn("text-sm text-destructive", className),
-      ...props
-    }
-  );
-});
-FieldError.displayName = "FieldError";
-
-// src/core/field-feedback.tsx
-var FieldFeedback = ({
-  errorId,
-  errorClassName,
-  error,
-  shouldRenderError
-}) => {
-  const errorText = Array.isArray(error) ? error.join(", ") : error;
-  if (!errorText || !shouldRenderError) return null;
-  return /* @__PURE__ */ React4.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
-};
-var LabelGroup = ({
-  labelHtmlFor,
-  required = false,
-  variant = "label",
-  secondaryId,
-  secondary,
-  primary,
-  primaryClassName,
-  secondaryClassName
-}) => {
-  const primaryClasses = cn(
-    "text-sm font-medium leading-snug",
-    variant === "legend" ? "mb-1.5" : "mb-1 block",
-    primaryClassName
-  );
-  const requiredIndicator = required && variant !== "label" ? /* @__PURE__ */ React4.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
-  let primaryElement = null;
-  if (primary) {
-    if (variant === "label") {
-      primaryElement = /* @__PURE__ */ React4.createElement(
-        FieldLabel,
-        {
-          htmlFor: labelHtmlFor,
-          required,
-          className: primaryClasses
-        },
-        primary
-      );
-    } else if (variant === "legend") {
-      primaryElement = /* @__PURE__ */ React4.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
-    } else {
-      primaryElement = /* @__PURE__ */ React4.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
-    }
-  }
-  const secondaryElement = secondary ? /* @__PURE__ */ React4.createElement(
-    FieldDescription,
-    {
-      id: secondaryId,
-      className: cn("leading-normal font-normal", secondaryClassName)
-    },
-    secondary
-  ) : null;
-  if (!primaryElement && !secondaryElement) return null;
-  if (variant === "legend") {
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, primaryElement, secondaryElement);
-  }
-  return /* @__PURE__ */ React4.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
-};
-
-// src/core/Field.tsx
-function Field2({
-  name,
-  label,
-  description,
-  children,
-  showError = true,
-  className,
-  errorClassName,
-  required = false,
-  validate
-}) {
-  const fieldState = useField({ name, validate });
-  const { meta } = fieldState;
-  const hasError = React4.useMemo(() => {
-    return showError && meta.touched && meta.error ? true : false;
-  }, [meta?.touched, meta?.error, showError]);
-  const errorId = `${name}-error`;
-  const descriptionId = `${name}-description`;
-  return /* @__PURE__ */ React4.createElement(
-    Field,
-    {
-      className,
-      "data-field": name,
-      invalid: hasError
-    },
-    /* @__PURE__ */ React4.createElement(
-      LabelGroup,
-      {
-        labelHtmlFor: name,
-        required,
-        variant: "label",
-        secondaryId: descriptionId,
-        secondary: description,
-        primary: label
-      }
-    ),
-    /* @__PURE__ */ React4.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
-    /* @__PURE__ */ React4.createElement(
-      FieldFeedback,
-      {
-        errorId,
-        errorClassName,
-        shouldRenderError: hasError,
-        error: meta.error
-      }
-    )
-  );
-}
-Field2.displayName = "Field";
-
-export { Field2 as Field, Form, FormContext, FormFeedback, useField, useForm };
+export { Form, FormFeedback } from './chunk-VLGZG2VP.js';
+export { Field, FormContext, useField, useForm } from './chunk-24RPM43T.js';
+import './chunk-232KNGJI.js';
 //# sourceMappingURL=core.js.map
 //# sourceMappingURL=core.js.map