react-form-ux 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sayan Paul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,188 @@
 # react-form-ux
 
-UX helpers for React forms.
+Fix common React form UX problems in seconds.
 
-Features:
+`react-form-ux` is a lightweight utility library that improves the **user experience of React forms** by handling common UX tasks like:
 
-- Focus first invalid field
-- Scroll to first error
-- Accessible error summaries
+- focusing the first invalid field
+- scrolling to validation errors
+- generating accessible error summaries
 
-Work in progress.
+The library is **headless and framework-agnostic**, so it works with any React form solution.
+
+---
+
+## ✨ Features
+
+- Focus the **first invalid input automatically**
+- Scroll to validation errors in long forms
+- Generate **accessible error summaries**
+- Works with **React Hook Form, Formik, or custom forms**
+- Tiny bundle size
+- Headless API (bring your own UI)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-form-ux
+```
+
+or
+
+```bash
+yarn add react-form-ux
+```
+
+---
+
+## ⚡Quick Example
+
+```javascript
+import { useFormUX } from "react-form-ux";
+
+function MyForm({ errors }) {
+  const { focusFirstError } = useFormUX({ errors });
+
+  const handleSubmit = () => {
+    if (Object.keys(errors).length > 0) {
+      focusFirstError();
+    }
+  };
+
+  return <form onSubmit={handleSubmit}>{/* form inputs */}</form>;
+}
+```
+
+---
+
+## 🧠 The Problem
+
+Most React form libraries focus on **form state and validation**, but developers still need to manually implement UX behaviors such as:
+
+- focusing the first invalid input after submit
+- scrolling long forms to the first error
+- showing accessible error summaries
+- guiding the user to fix validation issues
+
+Example of common ad-hoc code developers write repeatedly:
+
+```javascript
+const firstError = document.querySelector("[aria-invalid='true']");
+firstError?.focus();
+```
+
+This logic gets duplicated across projects.
+
+`react-form-ux` provides **reusable UX primitives** so you don’t have to rewrite it.
+
+---
+
+## 🛠 Usage
+
+Basic usage with any form library:
+
+```javascript
+import { useFormUX } from "react-form-ux";
+
+const { focusFirstError, scrollToError } = useFormUX({
+  errors,
+});
+```
+
+Available helpers:
+
+| Function          | Description                                   |
+| ----------------- | --------------------------------------------- |
+| focusFirstError() | Focus the first invalid input field           |
+| scrollToError()   | Scroll smoothly to the first validation error |
+| getErrorFields()  | Get a list of fields with validation errors   |
+
+---
+
+## 📋 ErrorSummary Component
+
+You can also display a summary of validation errors.
+
+```javascript
+import { ErrorSummary } from "react-form-ux";
+
+<ErrorSummary errors={errors} />
+```
+
+This improves accessibility and helps users quickly identify issues in long forms.
+
+---
+
+## 🔗 Example with React Hook Form
+
+```javascript
+import { useForm } from "react-hook-form";
+import { useFormUX } from "react-form-ux";
+
+function SignupForm() {
+  const { register, handleSubmit, formState } = useForm();
+
+  const { focusFirstError } = useFormUX({
+    errors: formState.errors
+  });
+
+  const onSubmit = () => {};
+
+  const onError = () => {
+    focusFirstError();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <input {...register("email")} />
+      <input {...register("password")} />
+
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+---
+
+## ⚙️ Compatibility
+
+`react-form-ux` works with:
+
+- React 18+
+- React Hook Form
+- Formik
+- Custom React forms
+
+The library does not depend on any specific form framework.
+
+---
+
+## 🚧 Status
+
+Early development.
+
+Current features:
+
+- `focusFirstError`
+- `scrollToError`
+- `getErrorFields`
+- `ErrorSummary` component
+
+More improvements coming soon.
+
+---
+
+## 📜 License
+
+MIT License
+
+---
+
+## 🤝 Contributing
+
+Contributions and ideas are welcome.
+
+If you find a bug or have a feature suggestion, please open an issue.

package/dist/index.cjs

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ErrorSummary: () => ErrorSummary,
+  useFormUX: () => useFormUX
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/getErrorFields.ts
+function getErrorFields(errors, parent = "") {
+  const fields = [];
+  for (const key in errors) {
+    const value = errors[key];
+    const path = parent ? `${parent}.${key}` : key;
+    if (value && typeof value === "object" && !value.message) {
+      fields.push(...getErrorFields(value, path));
+    } else {
+      fields.push(path);
+    }
+  }
+  return fields;
+}
+
+// src/utils/focusFirstError.ts
+function focusFirstError(errors) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return;
+  const firstField = fields[0];
+  const element = document.querySelector(
+    `[name="${firstField}"]`
+  );
+  element == null ? void 0 : element.focus();
+}
+
+// src/utils/scrollToError.ts
+function scrollToError(errors) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return;
+  const firstField = fields[0];
+  const element = document.querySelector(
+    `[name="${firstField}"]`
+  );
+  element == null ? void 0 : element.scrollIntoView({
+    behavior: "smooth",
+    block: "center"
+  });
+}
+
+// src/hooks/useFormUX.ts
+function useFormUX(options) {
+  const { errors } = options;
+  return {
+    focusFirstError: () => focusFirstError(errors),
+    scrollToError: () => scrollToError(errors),
+    getErrorFields: () => getErrorFields(errors)
+  };
+}
+
+// src/components/ErrorSummary.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ErrorSummary({
+  errors,
+  title = "Please fix the following errors:"
+}) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: fields.map((field) => {
+      var _a, _b;
+      const message = (_b = (_a = errors == null ? void 0 : errors[field]) == null ? void 0 : _a.message) != null ? _b : "Invalid field";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const element = document.querySelector(
+              `[name="${field}"]`
+            );
+            element == null ? void 0 : element.focus();
+          },
+          children: message
+        }
+      ) }, field);
+    }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorSummary,
+  useFormUX
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/utils/getErrorFields.ts","../src/utils/focusFirstError.ts","../src/utils/scrollToError.ts","../src/hooks/useFormUX.ts","../src/components/ErrorSummary.tsx"],"sourcesContent":["export * from \"./hooks/useFormUX\"\r\nexport * from \"./components/ErrorSummary\"","export function getErrorFields(\r\n  errors: Record<string, any>,\r\n  parent = \"\"\r\n): string[] {\r\n  const fields: string[] = []\r\n\r\n  for (const key in errors) {\r\n    const value = errors[key]\r\n\r\n    const path = parent ? `${parent}.${key}` : key\r\n\r\n    if (value && typeof value === \"object\" && !value.message) {\r\n      fields.push(...getErrorFields(value, path))\r\n    } else {\r\n      fields.push(path)\r\n    }\r\n  }\r\n\r\n  return fields\r\n}","import { getErrorFields } from \"./getErrorFields\"\r\n\r\nexport function focusFirstError(errors: Record<string, unknown>) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return\r\n\r\n  const firstField = fields[0]\r\n\r\n  const element = document.querySelector(\r\n    `[name=\"${firstField}\"]`\r\n  ) as HTMLElement | null\r\n\r\n  element?.focus()\r\n}","import { getErrorFields } from \"./getErrorFields\"\r\n\r\nexport function scrollToError(errors: Record<string, unknown>) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return\r\n\r\n  const firstField = fields[0]\r\n\r\n  const element = document.querySelector(\r\n    `[name=\"${firstField}\"]`\r\n  )\r\n\r\n  element?.scrollIntoView({\r\n    behavior: \"smooth\",\r\n    block: \"center\"\r\n  })\r\n}","import { UseFormUXOptions, UseFormUXReturn } from \"../types/formUX.types\"\r\nimport { focusFirstError } from \"../utils/focusFirstError\"\r\nimport { scrollToError } from \"../utils/scrollToError\"\r\nimport { getErrorFields } from \"../utils/getErrorFields\"\r\n\r\nexport function useFormUX(options: UseFormUXOptions): UseFormUXReturn {\r\n  const { errors } = options\r\n\r\n  return {\r\n    focusFirstError: () => focusFirstError(errors),\r\n    scrollToError: () => scrollToError(errors),\r\n    getErrorFields: () => getErrorFields(errors)\r\n  }\r\n}","import React from \"react\"\r\nimport { ErrorSummaryProps } from \"../types/formUX.types\"\r\nimport { getErrorFields } from \"../utils/getErrorFields\"\r\n\r\nexport function ErrorSummary({\r\n  errors,\r\n  title = \"Please fix the following errors:\"\r\n}: ErrorSummaryProps) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return null\r\n\r\n  return (\r\n    <div role=\"alert\" aria-live=\"assertive\">\r\n      <strong>{title}</strong>\r\n\r\n      <ul>\r\n        {fields.map((field) => {\r\n          const message = errors?.[field]?.message ?? \"Invalid field\"\r\n\r\n          return (\r\n            <li key={field}>\r\n              <button\r\n                type=\"button\"\r\n                onClick={() => {\r\n                  const element = document.querySelector(\r\n                    `[name=\"${field}\"]`\r\n                  ) as HTMLElement | null\r\n\r\n                  element?.focus()\r\n                }}\r\n              >\r\n                {message}\r\n              </button>\r\n            </li>\r\n          )\r\n        })}\r\n      </ul>\r\n    </div>\r\n  )\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,eACd,QACA,SAAS,IACC;AACV,QAAM,SAAmB,CAAC;AAE1B,aAAW,OAAO,QAAQ;AACxB,UAAM,QAAQ,OAAO,GAAG;AAExB,UAAM,OAAO,SAAS,GAAG,MAAM,IAAI,GAAG,KAAK;AAE3C,QAAI,SAAS,OAAO,UAAU,YAAY,CAAC,MAAM,SAAS;AACxD,aAAO,KAAK,GAAG,eAAe,OAAO,IAAI,CAAC;AAAA,IAC5C,OAAO;AACL,aAAO,KAAK,IAAI;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AACT;;;ACjBO,SAAS,gBAAgB,QAAiC;AAC/D,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ;AAEpB,QAAM,aAAa,OAAO,CAAC;AAE3B,QAAM,UAAU,SAAS;AAAA,IACvB,UAAU,UAAU;AAAA,EACtB;AAEA,qCAAS;AACX;;;ACZO,SAAS,cAAc,QAAiC;AAC7D,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ;AAEpB,QAAM,aAAa,OAAO,CAAC;AAE3B,QAAM,UAAU,SAAS;AAAA,IACvB,UAAU,UAAU;AAAA,EACtB;AAEA,qCAAS,eAAe;AAAA,IACtB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;;;ACZO,SAAS,UAAU,SAA4C;AACpE,QAAM,EAAE,OAAO,IAAI;AAEnB,SAAO;AAAA,IACL,iBAAiB,MAAM,gBAAgB,MAAM;AAAA,IAC7C,eAAe,MAAM,cAAc,MAAM;AAAA,IACzC,gBAAgB,MAAM,eAAe,MAAM;AAAA,EAC7C;AACF;;;ACAI;AATG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AACV,GAAsB;AACpB,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ,QAAO;AAE3B,SACE,6CAAC,SAAI,MAAK,SAAQ,aAAU,aAC1B;AAAA,gDAAC,YAAQ,iBAAM;AAAA,IAEf,4CAAC,QACE,iBAAO,IAAI,CAAC,UAAU;AAjB/B;AAkBU,YAAM,WAAU,4CAAS,WAAT,mBAAiB,YAAjB,YAA4B;AAE5C,aACE,4CAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM;AACb,kBAAM,UAAU,SAAS;AAAA,cACvB,UAAU,KAAK;AAAA,YACjB;AAEA,+CAAS;AAAA,UACX;AAAA,UAEC;AAAA;AAAA,MACH,KAZO,KAaT;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UseFormUXOptions {
+    errors: Record<string, unknown>;
+}
+interface UseFormUXReturn {
+    focusFirstError: () => void;
+    scrollToError: () => void;
+    getErrorFields: () => string[];
+}
+interface ErrorSummaryProps {
+    errors: Record<string, any>;
+    title?: string;
+}
+
+declare function useFormUX(options: UseFormUXOptions): UseFormUXReturn;
+
+declare function ErrorSummary({ errors, title }: ErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
+
+export { ErrorSummary, useFormUX };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UseFormUXOptions {
+    errors: Record<string, unknown>;
+}
+interface UseFormUXReturn {
+    focusFirstError: () => void;
+    scrollToError: () => void;
+    getErrorFields: () => string[];
+}
+interface ErrorSummaryProps {
+    errors: Record<string, any>;
+    title?: string;
+}
+
+declare function useFormUX(options: UseFormUXOptions): UseFormUXReturn;
+
+declare function ErrorSummary({ errors, title }: ErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
+
+export { ErrorSummary, useFormUX };

package/dist/index.mjs

@@ -0,0 +1,84 @@
+// src/utils/getErrorFields.ts
+function getErrorFields(errors, parent = "") {
+  const fields = [];
+  for (const key in errors) {
+    const value = errors[key];
+    const path = parent ? `${parent}.${key}` : key;
+    if (value && typeof value === "object" && !value.message) {
+      fields.push(...getErrorFields(value, path));
+    } else {
+      fields.push(path);
+    }
+  }
+  return fields;
+}
+
+// src/utils/focusFirstError.ts
+function focusFirstError(errors) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return;
+  const firstField = fields[0];
+  const element = document.querySelector(
+    `[name="${firstField}"]`
+  );
+  element == null ? void 0 : element.focus();
+}
+
+// src/utils/scrollToError.ts
+function scrollToError(errors) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return;
+  const firstField = fields[0];
+  const element = document.querySelector(
+    `[name="${firstField}"]`
+  );
+  element == null ? void 0 : element.scrollIntoView({
+    behavior: "smooth",
+    block: "center"
+  });
+}
+
+// src/hooks/useFormUX.ts
+function useFormUX(options) {
+  const { errors } = options;
+  return {
+    focusFirstError: () => focusFirstError(errors),
+    scrollToError: () => scrollToError(errors),
+    getErrorFields: () => getErrorFields(errors)
+  };
+}
+
+// src/components/ErrorSummary.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ErrorSummary({
+  errors,
+  title = "Please fix the following errors:"
+}) {
+  const fields = getErrorFields(errors);
+  if (!fields.length) return null;
+  return /* @__PURE__ */ jsxs("div", { role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsx("strong", { children: title }),
+    /* @__PURE__ */ jsx("ul", { children: fields.map((field) => {
+      var _a, _b;
+      const message = (_b = (_a = errors == null ? void 0 : errors[field]) == null ? void 0 : _a.message) != null ? _b : "Invalid field";
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const element = document.querySelector(
+              `[name="${field}"]`
+            );
+            element == null ? void 0 : element.focus();
+          },
+          children: message
+        }
+      ) }, field);
+    }) })
+  ] });
+}
+export {
+  ErrorSummary,
+  useFormUX
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/getErrorFields.ts","../src/utils/focusFirstError.ts","../src/utils/scrollToError.ts","../src/hooks/useFormUX.ts","../src/components/ErrorSummary.tsx"],"sourcesContent":["export function getErrorFields(\r\n  errors: Record<string, any>,\r\n  parent = \"\"\r\n): string[] {\r\n  const fields: string[] = []\r\n\r\n  for (const key in errors) {\r\n    const value = errors[key]\r\n\r\n    const path = parent ? `${parent}.${key}` : key\r\n\r\n    if (value && typeof value === \"object\" && !value.message) {\r\n      fields.push(...getErrorFields(value, path))\r\n    } else {\r\n      fields.push(path)\r\n    }\r\n  }\r\n\r\n  return fields\r\n}","import { getErrorFields } from \"./getErrorFields\"\r\n\r\nexport function focusFirstError(errors: Record<string, unknown>) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return\r\n\r\n  const firstField = fields[0]\r\n\r\n  const element = document.querySelector(\r\n    `[name=\"${firstField}\"]`\r\n  ) as HTMLElement | null\r\n\r\n  element?.focus()\r\n}","import { getErrorFields } from \"./getErrorFields\"\r\n\r\nexport function scrollToError(errors: Record<string, unknown>) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return\r\n\r\n  const firstField = fields[0]\r\n\r\n  const element = document.querySelector(\r\n    `[name=\"${firstField}\"]`\r\n  )\r\n\r\n  element?.scrollIntoView({\r\n    behavior: \"smooth\",\r\n    block: \"center\"\r\n  })\r\n}","import { UseFormUXOptions, UseFormUXReturn } from \"../types/formUX.types\"\r\nimport { focusFirstError } from \"../utils/focusFirstError\"\r\nimport { scrollToError } from \"../utils/scrollToError\"\r\nimport { getErrorFields } from \"../utils/getErrorFields\"\r\n\r\nexport function useFormUX(options: UseFormUXOptions): UseFormUXReturn {\r\n  const { errors } = options\r\n\r\n  return {\r\n    focusFirstError: () => focusFirstError(errors),\r\n    scrollToError: () => scrollToError(errors),\r\n    getErrorFields: () => getErrorFields(errors)\r\n  }\r\n}","import React from \"react\"\r\nimport { ErrorSummaryProps } from \"../types/formUX.types\"\r\nimport { getErrorFields } from \"../utils/getErrorFields\"\r\n\r\nexport function ErrorSummary({\r\n  errors,\r\n  title = \"Please fix the following errors:\"\r\n}: ErrorSummaryProps) {\r\n  const fields = getErrorFields(errors)\r\n\r\n  if (!fields.length) return null\r\n\r\n  return (\r\n    <div role=\"alert\" aria-live=\"assertive\">\r\n      <strong>{title}</strong>\r\n\r\n      <ul>\r\n        {fields.map((field) => {\r\n          const message = errors?.[field]?.message ?? \"Invalid field\"\r\n\r\n          return (\r\n            <li key={field}>\r\n              <button\r\n                type=\"button\"\r\n                onClick={() => {\r\n                  const element = document.querySelector(\r\n                    `[name=\"${field}\"]`\r\n                  ) as HTMLElement | null\r\n\r\n                  element?.focus()\r\n                }}\r\n              >\r\n                {message}\r\n              </button>\r\n            </li>\r\n          )\r\n        })}\r\n      </ul>\r\n    </div>\r\n  )\r\n}"],"mappings":";AAAO,SAAS,eACd,QACA,SAAS,IACC;AACV,QAAM,SAAmB,CAAC;AAE1B,aAAW,OAAO,QAAQ;AACxB,UAAM,QAAQ,OAAO,GAAG;AAExB,UAAM,OAAO,SAAS,GAAG,MAAM,IAAI,GAAG,KAAK;AAE3C,QAAI,SAAS,OAAO,UAAU,YAAY,CAAC,MAAM,SAAS;AACxD,aAAO,KAAK,GAAG,eAAe,OAAO,IAAI,CAAC;AAAA,IAC5C,OAAO;AACL,aAAO,KAAK,IAAI;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AACT;;;ACjBO,SAAS,gBAAgB,QAAiC;AAC/D,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ;AAEpB,QAAM,aAAa,OAAO,CAAC;AAE3B,QAAM,UAAU,SAAS;AAAA,IACvB,UAAU,UAAU;AAAA,EACtB;AAEA,qCAAS;AACX;;;ACZO,SAAS,cAAc,QAAiC;AAC7D,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ;AAEpB,QAAM,aAAa,OAAO,CAAC;AAE3B,QAAM,UAAU,SAAS;AAAA,IACvB,UAAU,UAAU;AAAA,EACtB;AAEA,qCAAS,eAAe;AAAA,IACtB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;;;ACZO,SAAS,UAAU,SAA4C;AACpE,QAAM,EAAE,OAAO,IAAI;AAEnB,SAAO;AAAA,IACL,iBAAiB,MAAM,gBAAgB,MAAM;AAAA,IAC7C,eAAe,MAAM,cAAc,MAAM;AAAA,IACzC,gBAAgB,MAAM,eAAe,MAAM;AAAA,EAC7C;AACF;;;ACAI,SACE,KADF;AATG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AACV,GAAsB;AACpB,QAAM,SAAS,eAAe,MAAM;AAEpC,MAAI,CAAC,OAAO,OAAQ,QAAO;AAE3B,SACE,qBAAC,SAAI,MAAK,SAAQ,aAAU,aAC1B;AAAA,wBAAC,YAAQ,iBAAM;AAAA,IAEf,oBAAC,QACE,iBAAO,IAAI,CAAC,UAAU;AAjB/B;AAkBU,YAAM,WAAU,4CAAS,WAAT,mBAAiB,YAAjB,YAA4B;AAE5C,aACE,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM;AACb,kBAAM,UAAU,SAAS;AAAA,cACvB,UAAU,KAAK;AAAA,YACjB;AAEA,+CAAS;AAAA,UACX;AAAA,UAEC;AAAA;AAAA,MACH,KAZO,KAaT;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/package.json

@@ -1,20 +1,49 @@
 {
   "name": "react-form-ux",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "UX helpers for React forms (focus errors, scroll to validation, error summaries).",
-  "main": "index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
+  },
+  "peerDependencies": {
+    "react": ">=18"
   },
   "keywords": [
     "react",
-    "forms",
     "react-hook-form",
-    "formik",
-    "ux",
-    "validation"
+    "forms",
+    "form-validation",
+    "form-ux",
+    "frontend",
+    "react-forms",
+    "validation",
+    "accessibility"
   ],
   "author": "Sayan Paul",
   "license": "MIT",
-  "type": "commonjs"
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "jsdom": "^28.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
 }

package/index.js

@@ -1,2 +0,0 @@
-// Placeholder package
-module.exports = {}