@page-speed/forms 0.1.0

package/dist/core.d.cts

@@ -0,0 +1,143 @@
+import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-Cw5CeZP-.cjs';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-Cw5CeZP-.cjs';
+import * as React from 'react';
+
+/**
+ * useForm - High-performance form state management with field-level reactivity
+ *
+ * Built on @legendapp/state for optimal performance:
+ * - Field-level reactivity: Only re-render the specific field that changed
+ * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks
+ * - Tree-shakable: Only bundle what you use
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '', password: '' },
+ *   onSubmit: async (values) => {
+ *     await login(values);
+ *   },
+ *   validationSchema: {
+ *     email: (value) => !value ? 'Required' : undefined,
+ *     password: (value) => value.length < 8 ? 'Too short' : undefined,
+ *   },
+ * });
+ *
+ * return (
+ *   <form onSubmit={form.handleSubmit}>
+ *     <input {...form.getFieldProps('email')} />
+ *     {form.errors.email && <span>{form.errors.email}</span>}
+ *   </form>
+ * );
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/use-form
+ */
+declare function useForm<T extends FormValues = FormValues>(options: UseFormOptions<T>): UseFormReturn<T>;
+
+/**
+ * useField - Field-level reactive hook for form inputs
+ *
+ * Provides isolated reactivity for individual form fields.
+ * Only re-renders when the specific field changes, not when other fields update.
+ *
+ * Must be used within a FormContext (inside <Form> component).
+ *
+ * @example
+ * ```tsx
+ * function EmailInput() {
+ *   const { field, meta, helpers } = useField({ name: 'email' });
+ *
+ *   return (
+ *     <div>
+ *       <input {...field} type="email" />
+ *       {meta.touched && meta.error && <span>{meta.error}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/use-field
+ */
+declare function useField<T = any>(options: UseFieldOptions<T>): UseFieldReturn<T>;
+
+/**
+ * Form - Progressive enhancement form component
+ *
+ * Provides form context to child components and handles form submission.
+ * Supports progressive enhancement with server-side fallback.
+ *
+ * Features:
+ * - Provides FormContext for useField hook
+ * - Handles form submission with validation
+ * - Progressive enhancement support (works without JavaScript)
+ * - Accessible form semantics
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '' },
+ *   onSubmit: async (values) => {
+ *     await submitForm(values);
+ *   },
+ * });
+ *
+ * return (
+ *   <Form form={form} action="/api/submit" method="post">
+ *     <input {...form.getFieldProps('email')} />
+ *     <button type="submit">Submit</button>
+ *   </Form>
+ * );
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/form
+ */
+declare function Form<T extends FormValues = FormValues>({ form, children, className, action, method, noValidate, ...props }: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>): React.JSX.Element;
+declare namespace Form {
+    var displayName: string;
+}
+
+/**
+ * Field - Field wrapper component with label, description, and error display
+ *
+ * Provides a complete field UI with automatic error handling and accessibility.
+ * Uses useField hook internally for field-level reactivity.
+ *
+ * Features:
+ * - Automatic label association
+ * - Error display with accessibility
+ * - Optional description text
+ * - Render prop pattern for flexibility
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Field name="email" label="Email Address" description="We'll never share your email">
+ *   {({ field, meta }) => (
+ *     <input
+ *       {...field}
+ *       type="email"
+ *       className={meta.error && meta.touched ? 'error' : ''}
+ *     />
+ *   )}
+ * </Field>
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/field
+ */
+declare function Field({ name, label, description, children, showError, className, validate, }: FieldProps): React.JSX.Element;
+declare namespace Field {
+    var displayName: string;
+}
+
+/**
+ * FormContext - React context for providing form state to child components
+ *
+ * Allows useField hook to access form state without prop drilling.
+ * Automatically provided by the <Form> component.
+ *
+ * @internal
+ */
+declare const FormContext: React.Context<UseFormReturn<any> | null>;
+
+export { Field, FieldProps, Form, FormContext, FormProps, FormValues, UseFieldOptions, UseFieldReturn, UseFormOptions, UseFormReturn, useField, useForm };

package/dist/core.d.ts

@@ -0,0 +1,143 @@
+import { b as FormValues, U as UseFormOptions, c as UseFormReturn, d as UseFieldOptions, e as UseFieldReturn, f as FormProps, g as FieldProps } from './types-Cw5CeZP-.js';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, k as FormState, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-Cw5CeZP-.js';
+import * as React from 'react';
+
+/**
+ * useForm - High-performance form state management with field-level reactivity
+ *
+ * Built on @legendapp/state for optimal performance:
+ * - Field-level reactivity: Only re-render the specific field that changed
+ * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks
+ * - Tree-shakable: Only bundle what you use
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '', password: '' },
+ *   onSubmit: async (values) => {
+ *     await login(values);
+ *   },
+ *   validationSchema: {
+ *     email: (value) => !value ? 'Required' : undefined,
+ *     password: (value) => value.length < 8 ? 'Too short' : undefined,
+ *   },
+ * });
+ *
+ * return (
+ *   <form onSubmit={form.handleSubmit}>
+ *     <input {...form.getFieldProps('email')} />
+ *     {form.errors.email && <span>{form.errors.email}</span>}
+ *   </form>
+ * );
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/use-form
+ */
+declare function useForm<T extends FormValues = FormValues>(options: UseFormOptions<T>): UseFormReturn<T>;
+
+/**
+ * useField - Field-level reactive hook for form inputs
+ *
+ * Provides isolated reactivity for individual form fields.
+ * Only re-renders when the specific field changes, not when other fields update.
+ *
+ * Must be used within a FormContext (inside <Form> component).
+ *
+ * @example
+ * ```tsx
+ * function EmailInput() {
+ *   const { field, meta, helpers } = useField({ name: 'email' });
+ *
+ *   return (
+ *     <div>
+ *       <input {...field} type="email" />
+ *       {meta.touched && meta.error && <span>{meta.error}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/use-field
+ */
+declare function useField<T = any>(options: UseFieldOptions<T>): UseFieldReturn<T>;
+
+/**
+ * Form - Progressive enhancement form component
+ *
+ * Provides form context to child components and handles form submission.
+ * Supports progressive enhancement with server-side fallback.
+ *
+ * Features:
+ * - Provides FormContext for useField hook
+ * - Handles form submission with validation
+ * - Progressive enhancement support (works without JavaScript)
+ * - Accessible form semantics
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '' },
+ *   onSubmit: async (values) => {
+ *     await submitForm(values);
+ *   },
+ * });
+ *
+ * return (
+ *   <Form form={form} action="/api/submit" method="post">
+ *     <input {...form.getFieldProps('email')} />
+ *     <button type="submit">Submit</button>
+ *   </Form>
+ * );
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/form
+ */
+declare function Form<T extends FormValues = FormValues>({ form, children, className, action, method, noValidate, ...props }: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>): React.JSX.Element;
+declare namespace Form {
+    var displayName: string;
+}
+
+/**
+ * Field - Field wrapper component with label, description, and error display
+ *
+ * Provides a complete field UI with automatic error handling and accessibility.
+ * Uses useField hook internally for field-level reactivity.
+ *
+ * Features:
+ * - Automatic label association
+ * - Error display with accessibility
+ * - Optional description text
+ * - Render prop pattern for flexibility
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Field name="email" label="Email Address" description="We'll never share your email">
+ *   {({ field, meta }) => (
+ *     <input
+ *       {...field}
+ *       type="email"
+ *       className={meta.error && meta.touched ? 'error' : ''}
+ *     />
+ *   )}
+ * </Field>
+ * ```
+ *
+ * @see https://opensite.ai/developers/page-speed/forms/field
+ */
+declare function Field({ name, label, description, children, showError, className, validate, }: FieldProps): React.JSX.Element;
+declare namespace Field {
+    var displayName: string;
+}
+
+/**
+ * FormContext - React context for providing form state to child components
+ *
+ * Allows useField hook to access form state without prop drilling.
+ * Automatically provided by the <Form> component.
+ *
+ * @internal
+ */
+declare const FormContext: React.Context<UseFormReturn<any> | null>;
+
+export { Field, FieldProps, Form, FormContext, FormProps, FormValues, UseFieldOptions, UseFieldReturn, UseFormOptions, UseFormReturn, useField, useForm };

package/dist/core.js

@@ -0,0 +1,3 @@
+export { Field, Form, FormContext, useField, useForm } from './chunk-A3UV7BIN.js';
+//# sourceMappingURL=core.js.map
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"core.js"}

package/dist/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var chunkZQCPEOB6_cjs = require('./chunk-ZQCPEOB6.cjs');
+
+
+
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () { return chunkZQCPEOB6_cjs.Field; }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () { return chunkZQCPEOB6_cjs.Form; }
+});
+Object.defineProperty(exports, "FormContext", {
+  enumerable: true,
+  get: function () { return chunkZQCPEOB6_cjs.FormContext; }
+});
+Object.defineProperty(exports, "useField", {
+  enumerable: true,
+  get: function () { return chunkZQCPEOB6_cjs.useField; }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function () { return chunkZQCPEOB6_cjs.useForm; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { Field, Form, FormContext, useField, useForm } from './core.cjs';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-Cw5CeZP-.cjs';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Field, Form, FormContext, useField, useForm } from './core.js';
+export { E as ErrorHandler, m as FieldInputProps, n as FieldMeta, g as FieldProps, F as FieldValidator, l as FormActions, h as FormErrors, i as FormHelpers, f as FormProps, k as FormState, b as FormValues, I as InputProps, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, d as UseFieldOptions, e as UseFieldReturn, U as UseFormOptions, c as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-Cw5CeZP-.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Field, Form, FormContext, useField, useForm } from './chunk-A3UV7BIN.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}