formix-ui 0.0.3 → 0.0.5

package/README.md

@@ -1,4 +1,41 @@
-# 🚀 Formix UI
+# 🚀 FormixUI
+
+<!-- PROJECT_STATUS_START -->
+<div align="center">
+
+  <h3>🚀 Project Status: 27% Complete</h3>
+
+  <img src="https://progress-bar.dev/27/?scale=100&title=progress&width=600&color=00ff00&suffix=%25" alt="Progress Bar">
+
+  <br/>
+
+| 📦 Version | ✅ Completed | 🚧 In Progress | 🔄 Recurring | 📅 Upcoming |
+| :--------: | :----------: | :------------: | :----------: | :---------: |
+| **v0.0.2** |    **27**    |     **9**      |    **3**     |   **63**    |
+
+</div>
+
+<details open>
+<summary><h3>📅 Recent Activity & Roadmap</h3></summary>
+
+| **✨ Recently Completed** | **🚧 In Progress / Planned** |
+| :------------------------ | :--------------------------- |
+
+| <ul><li>✅ **Button**: Standard interactive button.</li>
+
+<li>✅ **Checkbox**: Binary selection control.</li>
+<li>✅ **Combobox (Autocomplete)**: Input with filtered suggestions.</li>
+<li>✅ **Date Picker**: Date selection interactive calendar.</li>
+<li>✅ **Date Range Picker**: Date range selection.</li></ul> | <ul><li>🚧 Locale switcher UI</li>
+<li>🚧 Week start UI</li>
+<li>🚧 Week number toggle UI</li>
+<li>🚧 Time step UI</li>
+<li>🚧 Focus trapping (modals)</li></ul> |
+
+</details>
+
+<br/>
+<!-- PROJECT_STATUS_END -->
 
 [![npm version](https://img.shields.io/npm/v/formix-ui.svg)](https://www.npmjs.com/package/formix-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -249,7 +286,7 @@ type ValidationRule =
 
 ## 🎨 Theming
 
-Formix UI uses Tailwind CSS 4.1 with CSS variables for theming:
+FormixUI uses Tailwind CSS 4.1 with CSS variables for theming:
 
 ```css
 @theme {
@@ -338,4 +375,4 @@ MIT © Adarsh A
 
 ---
 
-**Made with ❤️ by the Formix UI team**
+**Made with ❤️ by the FormixUI team**

package/dist/bin/index.js

@@ -10,7 +10,7 @@ import { fileURLToPath } from "url";
 import { registry, getComponent } from "./registry.js";
 // Tailwind v4 CSS Template
 const TAILWIND_V4_CSS = `@import "tailwindcss";
-@source "../node_modules/r-form-engine/dist";
+@source "../node_modules/formix-ui/dist";
 
 @variant dark (&:where(.dark, .dark *));
 
@@ -214,9 +214,9 @@ const generateLandingPageContent = (config, version) => {
     const componentToUse = formState === "formik" ? "FormikSchemaForm" : "SchemaForm";
     // Note: We use Tailwind v4 classes assuming it's configured.
     // We use standard React imports since the library handles the rest.
-    return `${isNext ? '"use client";\n' : ""}import { ${componentToUse}, ThemeProvider } from 'r-form-engine';
-import type { FormSchema } from 'r-form-engine';
-${isNext ? "import './globals.css';" : "import 'r-form-engine/styles';"}
+    return `${isNext ? '"use client";\n' : ""}import { ${componentToUse}, ThemeProvider } from 'formix-ui';
+import type { FormSchema } from 'formix-ui';
+${isNext ? "import './globals.css';" : "import 'formix-ui/styles';"}
 
 const schema: FormSchema = {
   title: "Welcome to FormEngine",
@@ -319,7 +319,7 @@ export default function ${isNext ? "Page" : "App"}() {
         </main>
 
         <footer className="mt-20 text-muted-foreground font-medium text-sm">
-          Built with r-form-engine • The modern form stack
+          Built with formix-ui • The modern form stack
         </footer>
       </div>
     </ThemeProvider>
@@ -342,14 +342,11 @@ const readPackageFile = (relativePath) => {
     throw new Error(`File not found in package: ${relativePath}`);
 };
 // Utility: Check if config exists
-const CONFIG_FILE = "r-form.json";
+const CONFIG_FILE = "formix.config.json";
 const hasConfig = () => fs.existsSync(path.resolve(process.cwd(), CONFIG_FILE));
 const getConfig = () => fs.readJSONSync(path.resolve(process.cwd(), CONFIG_FILE));
 const program = new Command();
-program
-    .name("r-form-engine")
-    .description("CLI for r-form-engine")
-    .version(getPackageParam("version"));
+program.name("formix-ui").description("CLI for formix-ui").version(getPackageParam("version"));
 program
     .command("add")
     .description("Add a component to your project")
@@ -364,14 +361,14 @@ program
             initial: true,
         });
         if (confirm.init) {
-            console.log(chalk.blue("Please run 'npx r-form-engine init' first."));
+            console.log(chalk.blue("Please run 'npx formix-ui init' first."));
             return;
         }
         return;
     }
     const config = getConfig();
     const componentsDir = config.paths?.components || "src/components/ui";
-    const coreDir = config.paths?.core || "src/components/r-form";
+    const coreDir = config.paths?.core || "src/components/formix";
     let componentsToAdd = componentName ? [componentName] : [];
     if (!componentName) {
         const res = await prompts({
@@ -529,7 +526,7 @@ program
     // For simplicity, we'll just re-run 'add' for everything in a single go
     const spinner = ora("Updating components...").start();
     const componentsDir = config.paths?.components || "src/components/ui";
-    const coreDir = config.paths?.core || "src/components/r-form";
+    const coreDir = config.paths?.core || "src/components/formix";
     const resolvedList = new Set();
     const resolveDeps = (name) => {
         if (resolvedList.has(name))
@@ -589,13 +586,13 @@ program
 });
 program
     .command("init")
-    .description("Initialize r-form-engine in your project")
+    .description("Initialize formix-ui in your project")
     .action(async () => {
-    console.log(chalk.blue.bold("\n🚀 Initializing r-form-engine...\n"));
+    console.log(chalk.blue.bold("\n🚀 Initializing formix-ui...\n"));
     const mode = await prompts({
         type: "select",
         name: "mode",
-        message: "How would you like to use r-form-engine?",
+        message: "How would you like to use formix-ui?",
         choices: [
             {
                 title: "Library (npm install)",
@@ -619,7 +616,7 @@ program
 });
 program
     .command("create")
-    .description("Create a new r-form-engine project")
+    .description("Create a new formix-ui project")
     .argument("[name]", "Project name")
     .action(async (projectName) => {
     let targetDir = projectName;
@@ -702,10 +699,10 @@ program
             args.push("--no-src-dir", "--app", "--import-alias", "@/*");
             await execa("npx", args, { stdio: "inherit" });
         }
-        console.log(chalk.green("\nProject scaffolded. Initializing r-form-engine..."));
+        console.log(chalk.green("\nProject scaffolded. Initializing formix-ui..."));
         process.chdir(projectPath);
-        const spinner = ora("Installing r-form-engine dependencies...").start();
-        const deps = ["r-form-engine"];
+        const spinner = ora("Installing formix-ui dependencies...").start();
+        const deps = ["formix-ui"];
         if (frameworkConfig.validationLib === "zod")
             deps.push("zod");
         if (frameworkConfig.validationLib === "yup")
@@ -816,7 +813,7 @@ async function runLibraryInit() {
             type: "text",
             name: "packageName",
             message: "What is the package name you are using?",
-            initial: "r-form-engine",
+            initial: "formix-ui",
         },
         {
             type: "confirm",
@@ -856,7 +853,7 @@ async function runLibraryInit() {
             name: "formState",
             message: "Which form state manager would you like to use?",
             choices: [
-                { title: "Standard (r-form-engine)", value: "standard" },
+                { title: "Standard (formix-ui)", value: "standard" },
                 { title: "Formik", value: "formik" },
                 { title: "React Hook Form", value: "rhf" },
             ],
@@ -943,7 +940,7 @@ async function runCopyInit() {
             type: "text",
             name: "packageName",
             message: "What is the package name you are using?",
-            initial: "r-form-engine",
+            initial: "formix-ui",
         },
         {
             type: "text",
@@ -955,7 +952,7 @@ async function runCopyInit() {
             type: "text",
             name: "coreDir",
             message: "Where should we place core files (theme, utils)?",
-            initial: (_, values) => values.framework === "next" ? "app/components/r-form" : "src/components/r-form",
+            initial: (_, values) => values.framework === "next" ? "app/components/formix" : "src/components/formix",
         },
         {
             type: "confirm",
@@ -1016,7 +1013,7 @@ async function runCopyInit() {
         }
         spinner.succeed("Configuration saved.");
         console.log(chalk.green("You are set up! Run this to install the core system:"));
-        console.log(chalk.cyan("npx r-form-engine add theme-core"));
+        console.log(chalk.cyan("npx formix-ui add theme-core"));
     }
     catch (e) {
         spinner.fail("Initialization failed");
@@ -1024,7 +1021,7 @@ async function runCopyInit() {
     }
 }
 async function configureTailwindInternal(version, localMode = false) {
-    const config = hasConfig() ? getConfig() : { packageName: "r-form-engine" };
+    const config = hasConfig() ? getConfig() : { packageName: "formix-ui" };
     // Locate CSS file
     const cssFiles = ["src/index.css", "src/globals.css", "src/App.css", "styles/globals.css"];
     const foundCss = cssFiles.find((f) => fs.existsSync(path.resolve(process.cwd(), f)));
@@ -1047,10 +1044,10 @@ async function configureTailwindInternal(version, localMode = false) {
         if (!foundCss) {
             let template = TAILWIND_V4_CSS;
             if (localMode) {
-                template = template.replace(`@source "../node_modules/r-form-engine/dist";`, "");
+                template = template.replace(`@source "../node_modules/formix-ui/dist";`, "");
             }
             else {
-                template = template.replace(`@source "../node_modules/r-form-engine/dist";`, `@source "../node_modules/${config.packageName}/dist";`);
+                template = template.replace(`@source "../node_modules/formix-ui/dist";`, `@source "../node_modules/${config.packageName}/dist";`);
             }
             fs.writeFileSync(cssPath, template);
         }

package/dist/components/pages/docs/CliGuidePage.d.ts

@@ -0,0 +1 @@
+export declare const CliGuidePage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/docs/ContributingPage.d.ts

@@ -0,0 +1 @@
+export declare const ContributingPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/docs/DocPages.d.ts

@@ -0,0 +1,5 @@
+export { CliGuidePage } from "./CliGuidePage";
+export { UsageGuidePage } from "./UsageGuidePage";
+export { TasksPage } from "./TasksPage";
+export { EcosystemPage } from "./EcosystemPage";
+export { ContributingPage } from "./ContributingPage";

package/dist/components/pages/docs/EcosystemPage.d.ts

@@ -0,0 +1 @@
+export declare const EcosystemPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/docs/TasksPage.d.ts

@@ -0,0 +1 @@
+export declare const TasksPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/docs/UsageGuidePage.d.ts

@@ -0,0 +1 @@
+export declare const UsageGuidePage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/theme/types.d.ts

@@ -20,6 +20,9 @@ export interface ComponentTheme {
     list?: StyleOrFn;
     item?: StyleOrFn;
     tag?: StyleOrFn;
+    calendarIcon?: StyleOrFn;
+    clearButton?: StyleOrFn;
+    popover?: StyleOrFn;
 }
 export interface FormTheme {
     global?: ComponentTheme;

package/dist/index.js

@@ -3317,8 +3317,8 @@ function kt(t) {
         path: w.path || n,
         spec: o.spec,
         disableStackTrace: w.disableStackTrace || l
-      }, k, w.params), u), H = new Ne(Ne.formatError(w.message || i, ee), r, ee.path, w.type || f, ee.disableStackTrace);
-      return H.params = ee, H;
+      }, k, w.params), u), U = new Ne(Ne.formatError(w.message || i, ee), r, ee.path, w.type || f, ee.disableStackTrace);
+      return U.params = ee, U;
     }
     const v = C ? d : p;
     let h = {
@@ -4864,9 +4864,9 @@ const Ba = (t) => {
     },
     wrapper: "relative",
     input: ({ error: t, variant: e }) => {
-      const r = "flex h-10 w-full rounded-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all";
+      const r = "block h-10 w-full rounded-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all bg-transparent";
       let n = "";
-      return e === "filled" ? n = "bg-muted border-transparent focus-visible:bg-background border-b-2 border-b-input focus-visible:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus-visible:ring-0 focus-visible:border-primary" : n = "border border-input bg-background", q(
+      return e === "filled" ? n = "bg-muted border-transparent focus-visible:bg-background border-b-2 border-b-input focus-visible:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus-visible:ring-0 focus-visible:border-primary" : n = "border border-input bg-transparent", q(
         r,
         n,
         t ? "border-destructive focus-visible:ring-destructive" : ""
@@ -4888,9 +4888,9 @@ const Ba = (t) => {
       );
     },
     input: ({ error: t, variant: e }) => {
-      const r = "flex min-h-[80px] w-full rounded-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all";
+      const r = "block min-h-[80px] w-full rounded-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all bg-transparent";
       let n = "";
-      return e === "filled" ? n = "bg-muted border-transparent focus-visible:bg-background border-b-2 border-b-input focus-visible:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus-visible:ring-0 focus-visible:border-primary" : n = "border border-input bg-background", q(
+      return e === "filled" ? n = "bg-muted border-transparent focus-visible:bg-background border-b-2 border-b-input focus-visible:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus-visible:ring-0 focus-visible:border-primary" : n = "border border-input bg-transparent", q(
         r,
         n,
         t ? "border-destructive focus-visible:ring-destructive" : ""
@@ -4912,9 +4912,9 @@ const Ba = (t) => {
       );
     },
     input: ({ error: t, variant: e }) => {
-      const r = "flex h-10 w-full appearance-none rounded-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all";
+      const r = "block h-10 w-full appearance-none rounded-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all bg-transparent";
       let n = "";
-      return e === "filled" ? n = "bg-muted border-transparent focus:bg-background border-b-2 border-b-input focus:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus:ring-0 focus:border-primary px-0" : n = "border border-input bg-background", q(r, n, t ? "border-destructive focus:ring-destructive" : "");
+      return e === "filled" ? n = "bg-muted border-transparent focus:bg-background border-b-2 border-b-input focus:border-b-primary" : e === "standard" ? n = "bg-transparent border-0 border-b-2 border-input rounded-none px-0 focus:ring-0 focus:border-primary px-0" : n = "border border-input bg-transparent", q(r, n, t ? "border-destructive focus:ring-destructive" : "");
     },
     errorText: "text-[0.8rem] font-medium text-destructive mt-1"
   },
@@ -4949,7 +4949,7 @@ const Ba = (t) => {
     label: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
     track: ({ checked: t }) => q(
       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      t ? "bg-primary" : "bg-input"
+      t ? "bg-primary" : "bg-control-default"
     ),
     thumb: ({ checked: t }) => q(
       "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform absolute top-0.5 left-0.5",
@@ -5009,7 +5009,7 @@ const Ba = (t) => {
     ),
     errorText: "text-[0.8rem] font-medium text-destructive mt-1"
   },
-  datePicker: {
+  dateTimePicker: {
     root: ({ variant: t }) => q("flex flex-col mb-4 relative", t === "floating" ? "relative pt-2" : "gap-1.5"),
     label: ({ focused: t, error: e, variant: r, value: n }) => {
       const a = r === "floating", s = n != null && n !== "";
@@ -5034,9 +5034,15 @@ const Ba = (t) => {
       );
     },
     input: "w-full h-full bg-transparent outline-none placeholder:text-muted-foreground",
+    calendarIcon: ({ disabled: t }) => q(
+      "focus:outline-none transition-colors",
+      t ? "text-muted-foreground cursor-not-allowed opacity-50" : "hover:text-primary cursor-pointer text-muted-foreground"
+    ),
+    clearButton: "text-muted-foreground hover:text-foreground transition-colors",
+    popover: "absolute top-full left-0 z-50 mt-1 min-w-full w-auto whitespace-nowrap shadow-xl rounded-lg animate-in fade-in zoom-in-95 duration-200 flex overflow-hidden ring-1 ring-black/5 bg-popover text-popover-foreground",
     errorText: "text-[0.8rem] font-medium text-destructive mt-1"
   },
-  dateRangePicker: {
+  datePicker: {
     root: ({ variant: t }) => q("flex flex-col mb-4 relative", t === "floating" ? "relative pt-2" : "gap-1.5"),
     label: ({ focused: t, error: e, variant: r, value: n }) => {
       const a = r === "floating", s = n != null && n !== "";
@@ -5063,7 +5069,7 @@ const Ba = (t) => {
     input: "w-full h-full bg-transparent outline-none placeholder:text-muted-foreground",
     errorText: "text-[0.8rem] font-medium text-destructive mt-1"
   },
-  dateTimePicker: {
+  dateRangePicker: {
     root: ({ variant: t }) => q("flex flex-col mb-4 relative", t === "floating" ? "relative pt-2" : "gap-1.5"),
     label: ({ focused: t, error: e, variant: r, value: n }) => {
       const a = r === "floating", s = n != null && n !== "";
@@ -5574,7 +5580,7 @@ const me = ({
   globalOverRide: u = !0,
   variant: g
 }) => {
-  const [v, h] = z(!1), [x, T] = z(""), [j, V] = z(-1), ne = ve(null), w = ve(null), ee = ve(null), H = As(), te = `${H}-listbox`, we = (D) => `${H}-option-${D}`, [U, K] = z([]), [L, Y] = z(!1), oe = eo(x, 500), he = S || L, W = C ? U : f, X = Xe(() => C || !x ? W : W.filter(
+  const [v, h] = z(!1), [x, T] = z(""), [j, V] = z(-1), ne = ve(null), w = ve(null), ee = ve(null), U = As(), te = `${U}-listbox`, we = (D) => `${U}-option-${D}`, [H, K] = z([]), [L, Y] = z(!1), oe = eo(x, 500), he = S || L, W = C ? H : f, X = Xe(() => C || !x ? W : W.filter(
     (D) => D.label.toLowerCase().includes(x.toLowerCase())
   ), [W, x, C]);
   be(() => {
@@ -5946,7 +5952,7 @@ const me = ({
     };
     return document.addEventListener("mousedown", K), () => document.removeEventListener("mousedown", K);
   }, []);
-  const H = Re(
+  const U = Re(
     "datePicker",
     {
       error: !!r,
@@ -5968,7 +5974,7 @@ const me = ({
       if (i && Y < new Date(i.setHours(0, 0, 0, 0)) || b && Y > new Date(b.setHours(0, 0, 0, 0))) return;
       m?.(Y);
     }
-  }, U = /* @__PURE__ */ c(
+  }, H = /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -6004,15 +6010,15 @@ const me = ({
     "div",
     {
       ref: j,
-      className: `${H.root} ${s || ""} ${p ? "w-full" : ""}`,
+      className: `${U.root} ${s || ""} ${p ? "w-full" : ""}`,
       children: [
-        !te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: H.label, children: [
+        !te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: U.label, children: [
           e,
           " ",
           n && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
         ] }),
-        /* @__PURE__ */ y("div", { className: H.wrapper, onClick: () => !a && g(!0), children: [
-          te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: H.label, children: [
+        /* @__PURE__ */ y("div", { className: U.wrapper, onClick: () => !a && g(!0), children: [
+          te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: U.label, children: [
             e,
             " ",
             n && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
@@ -6033,7 +6039,7 @@ const me = ({
               },
               disabled: a,
               placeholder: te && !v && !x ? "" : S,
-              className: H.input,
+              className: U.input,
               autoComplete: "off"
             }
           ),
@@ -6049,10 +6055,10 @@ const me = ({
                 children: "✕"
               }
             ),
-            d || U
+            d || H
           ] })
         ] }),
-        r && /* @__PURE__ */ c("span", { className: H.errorText, children: r }),
+        r && /* @__PURE__ */ c("span", { className: U.errorText, children: r }),
         u && !a && /* @__PURE__ */ c("div", { className: "absolute top-full left-0 z-50 mt-1 shadow-xl rounded-lg animate-in fade-in zoom-in-95 duration-200", children: /* @__PURE__ */ c(
           rn,
           {
@@ -6119,14 +6125,14 @@ const me = ({
   globalOverRide: l = !0,
   variant: u
 }) => {
-  const [g, v] = z(!1), [h, x] = z(!1), [T, j] = z(""), V = ve(null), [ne, w] = z(f), [ee, H] = z(N), [te, we] = z(C);
+  const [g, v] = z(!1), [h, x] = z(!1), [T, j] = z(""), V = ve(null), [ne, w] = z(f), [ee, U] = z(N), [te, we] = z(C);
   if (f !== ne || N !== ee || C !== te) {
-    w(f), H(N), we(C);
+    w(f), U(N), we(C);
     const W = C ? N.includes("HH:mm") ? N : `${N} HH:mm` : N, X = f?.start ? At(f.start, W) : "", fe = f?.end ? At(f.end, W) : "";
     let ke = "";
     X && fe ? ke = `${X} - ${fe}` : X && (ke = `${X} - `), j(ke);
   }
-  const [U, K] = z("start");
+  const [H, K] = z("start");
   be(() => {
     const W = (X) => {
       V.current && !V.current.contains(X.target) && v(!1);
@@ -6145,10 +6151,10 @@ const me = ({
     void 0,
     l
   ), Y = u === "floating", oe = (W) => {
-    if (U === "start" && f?.start) {
+    if (H === "start" && f?.start) {
       const X = new Date(f.start);
       X.setHours(W.getHours()), X.setMinutes(W.getMinutes()), m && m({ ...f, start: X });
-    } else if (U === "end" && f?.end) {
+    } else if (H === "end" && f?.end) {
       const X = new Date(f.end);
       X.setHours(W.getHours()), X.setMinutes(W.getMinutes()), m && m({ ...f, end: X });
     }
@@ -6271,7 +6277,7 @@ const me = ({
                   /* @__PURE__ */ c(
                     "button",
                     {
-                      className: `flex-1 py-2 text-xs font-semibold uppercase ${U === "start" ? "bg-gray-50 dark:bg-zinc-900/50 text-primary" : "text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-900"}`,
+                      className: `flex-1 py-2 text-xs font-semibold uppercase ${H === "start" ? "bg-gray-50 dark:bg-zinc-900/50 text-primary" : "text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-900"}`,
                       onClick: () => K("start"),
                       children: "Start Time"
                     }
@@ -6279,15 +6285,15 @@ const me = ({
                   /* @__PURE__ */ c(
                     "button",
                     {
-                      className: `flex-1 py-2 text-xs font-semibold uppercase ${U === "end" ? "bg-gray-50 dark:bg-zinc-900/50 text-primary" : "text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-900"}`,
+                      className: `flex-1 py-2 text-xs font-semibold uppercase ${H === "end" ? "bg-gray-50 dark:bg-zinc-900/50 text-primary" : "text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-900"}`,
                       onClick: () => K("end"),
                       children: "End Time"
                     }
                   )
                 ] }),
                 /* @__PURE__ */ y("div", { className: "flex-1 relative", children: [
-                  U === "start" && (f?.start ? /* @__PURE__ */ c(lr, { value: f.start, onChange: oe }) : /* @__PURE__ */ c("div", { className: "flex items-center justify-center h-full text-xs text-gray-400 px-4 text-center", children: "Select Start Date first" })),
-                  U === "end" && (f?.end ? /* @__PURE__ */ c(lr, { value: f.end, onChange: oe }) : /* @__PURE__ */ c("div", { className: "flex items-center justify-center h-full text-xs text-gray-400 px-4 text-center", children: "Select End Date first" }))
+                  H === "start" && (f?.start ? /* @__PURE__ */ c(lr, { value: f.start, onChange: oe }) : /* @__PURE__ */ c("div", { className: "flex items-center justify-center h-full text-xs text-gray-400 px-4 text-center", children: "Select Start Date first" })),
+                  H === "end" && (f?.end ? /* @__PURE__ */ c(lr, { value: f.end, onChange: oe }) : /* @__PURE__ */ c("div", { className: "flex items-center justify-center h-full text-xs text-gray-400 px-4 text-center", children: "Select End Date first" }))
                 ] })
               ] })
             ]
@@ -6323,7 +6329,7 @@ const me = ({
     };
     return document.addEventListener("mousedown", Y), () => document.removeEventListener("mousedown", Y);
   }, []);
-  const H = Re(
+  const U = Re(
     "dateTimePicker",
     {
       error: !!r,
@@ -6343,7 +6349,7 @@ const me = ({
       m?.(he);
     } else
       oe || m?.(null);
-  }, U = (Y) => {
+  }, H = (Y) => {
     const oe = new Date(Y);
     f ? (oe.setHours(f.getHours()), oe.setMinutes(f.getMinutes()), oe.setSeconds(f.getSeconds())) : oe.setHours(0, 0, 0, 0), m?.(oe);
   }, K = (Y) => {
@@ -6356,7 +6362,7 @@ const me = ({
         a || (Y.preventDefault(), g(!u));
       },
       disabled: a,
-      className: `focus:outline-none transition-colors ${a ? "text-muted-foreground cursor-not-allowed opacity-50" : "hover:text-primary cursor-pointer text-muted-foreground"}`,
+      className: U.calendarIcon,
       tabIndex: -1,
       children: /* @__PURE__ */ y(
         "svg",
@@ -6385,15 +6391,15 @@ const me = ({
     "div",
     {
       ref: j,
-      className: `${H.root} ${s || ""} ${p ? "w-full" : ""}`,
+      className: `${U.root} ${s || ""} ${p ? "w-full" : ""}`,
       children: [
-        !te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: H.label, children: [
+        !te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: U.label, children: [
           e,
           " ",
           n && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
         ] }),
-        /* @__PURE__ */ y("div", { className: H.wrapper, onClick: () => !a && g(!0), children: [
-          te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: H.label, children: [
+        /* @__PURE__ */ y("div", { className: U.wrapper, onClick: () => !a && g(!0), children: [
+          te && e && /* @__PURE__ */ y("label", { htmlFor: t, className: U.label, children: [
             e,
             " ",
             n && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
@@ -6414,7 +6420,7 @@ const me = ({
               },
               disabled: a,
               placeholder: te && !v && !x ? "" : S,
-              className: H.input,
+              className: U.input,
               autoComplete: "off"
             }
           ),
@@ -6426,16 +6432,16 @@ const me = ({
                 onClick: (Y) => {
                   Y.stopPropagation(), k(), T(""), m?.(null);
                 },
-                className: "text-muted-foreground hover:text-foreground",
+                className: U.clearButton,
                 children: "✕"
               }
             ),
             d || L
           ] })
         ] }),
-        r && /* @__PURE__ */ c("span", { className: H.errorText, children: r }),
-        u && !a && /* @__PURE__ */ y("div", { className: "absolute top-full left-0 z-50 mt-1 shadow-xl rounded-lg animate-in fade-in zoom-in-95 duration-200 flex overflow-hidden ring-1 ring-black/5 bg-white dark:bg-zinc-950", children: [
-          /* @__PURE__ */ c(rn, { value: f, onChange: U, minDate: i, maxDate: b }),
+        r && /* @__PURE__ */ c("span", { className: U.errorText, children: r }),
+        u && !a && /* @__PURE__ */ y("div", { className: U.popover, children: [
+          /* @__PURE__ */ c(rn, { value: f, onChange: H, minDate: i, maxDate: b }),
           /* @__PURE__ */ c(lr, { value: f, onChange: K })
         ] })
       ]
@@ -6463,10 +6469,10 @@ const me = ({
 }) => {
   const [C, l] = z(!1), [u, g] = z(!1), [v, h] = z(""), x = ve(null), [T, j] = z(f), [V, ne] = z(i);
   (f !== T || i !== V) && (j(f), ne(i), h(f ? At(f, i) : "")), be(() => {
-    const U = (K) => {
+    const H = (K) => {
       x.current && !x.current.contains(K.target) && l(!1);
     };
-    return document.addEventListener("mousedown", U), () => document.removeEventListener("mousedown", U);
+    return document.addEventListener("mousedown", H), () => document.removeEventListener("mousedown", H);
   }, []);
   const w = Re(
     "timePicker",
@@ -6479,17 +6485,17 @@ const me = ({
     },
     void 0,
     N
-  ), ee = S === "floating", H = (U) => {
-    h(U.target.value), U.target.value || m?.(null);
-  }, te = (U) => {
+  ), ee = S === "floating", U = (H) => {
+    h(H.target.value), H.target.value || m?.(null);
+  }, te = (H) => {
     const K = new Date(f || /* @__PURE__ */ new Date());
-    K.setHours(U.getHours()), K.setMinutes(U.getMinutes()), K.setSeconds(0), K.setMilliseconds(0), m?.(K);
+    K.setHours(H.getHours()), K.setMinutes(H.getMinutes()), K.setSeconds(0), K.setMilliseconds(0), m?.(K);
   }, we = /* @__PURE__ */ c(
     "button",
     {
       type: "button",
-      onClick: (U) => {
-        a || (U.preventDefault(), l(!C));
+      onClick: (H) => {
+        a || (H.preventDefault(), l(!C));
       },
       disabled: a,
       className: `focus:outline-none transition-colors ${a ? "text-muted-foreground cursor-not-allowed opacity-50" : "hover:text-primary cursor-pointer text-muted-foreground"}`,
@@ -6538,7 +6544,7 @@ const me = ({
               id: t,
               type: "text",
               value: v,
-              onChange: H,
+              onChange: U,
               onFocus: () => {
                 g(!0);
               },
@@ -6556,8 +6562,8 @@ const me = ({
               "button",
               {
                 type: "button",
-                onClick: (U) => {
-                  U.stopPropagation(), k(), h(""), m?.(null);
+                onClick: (H) => {
+                  H.stopPropagation(), k(), h(""), m?.(null);
                 },
                 className: "text-muted-foreground hover:text-foreground",
                 children: "✕"
@@ -6692,13 +6698,13 @@ const qr = rt(
       }
     }));
     const ne = (w) => {
-      const ee = Vr(w, S) && !w.hidden, H = pi(w, S, V.current), te = De(S, w.name);
-      if (H && te !== "" && te !== null && te !== void 0) {
+      const ee = Vr(w, S) && !w.hidden, U = pi(w, S, V.current), te = De(S, w.name);
+      if (U && te !== "" && te !== null && te !== void 0) {
         let L = "";
         w.type === "daterange" ? L = { start: null, end: null } : (w.type === "autocomplete" || w.type === "select") && w.multiple ? L = [] : w.type === "checkbox" || w.type === "switch" ? L = !1 : (w.type === "date" || w.type === "time" || w.type === "datetime" || w.type === "file") && (L = null), u(w.name, L);
       }
       if (!ee) return null;
-      const we = fi(w, S), U = {
+      const we = fi(w, S), H = {
         id: w.name,
         label: w.label,
         placeholder: w.placeholder,
@@ -6741,7 +6747,7 @@ const qr = rt(
             A,
             {
               type: w.type,
-              ...U,
+              ...H,
               onChange: K,
               onBlur: () => g(w.name),
               startAdornment: w.startAdornment,
@@ -6752,7 +6758,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             Bt,
             {
-              ...U,
+              ...H,
               onChange: K,
               onBlur: () => g(w.name),
               rows: w.rows,
@@ -6765,7 +6771,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             Wa,
             {
-              ...U,
+              ...H,
               checked: !!De(S, w.name),
               onChange: (L) => u(w.name, L.target.checked, w.validateOnChange)
             }
@@ -6774,7 +6780,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             pe,
             {
-              ...U,
+              ...H,
               checked: !!De(S, w.name),
               onChange: (L) => u(w.name, L.target.checked, w.validateOnChange)
             }
@@ -6783,7 +6789,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             Ga,
             {
-              ...U,
+              ...H,
               name: w.name,
               options: w.options || [],
               direction: w.direction,
@@ -6796,7 +6802,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             me,
             {
-              ...U,
+              ...H,
               options: w.options || [],
               multiple: w.multiple,
               loadOptions: w.asyncUrl ? async (L) => {
@@ -6814,16 +6820,16 @@ const qr = rt(
             }
           );
         case "date":
-          return /* @__PURE__ */ c(io, { ...U, format: w.format });
+          return /* @__PURE__ */ c(io, { ...H, format: w.format });
         case "time":
-          return /* @__PURE__ */ c(co, { ...U, format: w.format });
+          return /* @__PURE__ */ c(co, { ...H, format: w.format });
         case "datetime":
-          return /* @__PURE__ */ c(lo, { ...U, format: w.format });
+          return /* @__PURE__ */ c(lo, { ...H, format: w.format });
         case "daterange":
           return /* @__PURE__ */ c(
             oo,
             {
-              ...U,
+              ...H,
               format: w.format,
               showTime: w.format?.includes("HH") || w.format?.includes("mm")
             }
@@ -6833,7 +6839,7 @@ const qr = rt(
           return /* @__PURE__ */ c(
             Ja,
             {
-              ...U,
+              ...H,
               value: S[w.name],
               onChange: (L) => u(w.name, L, w.validateOnChange),
               multiple: w.multiple,
@@ -6846,7 +6852,7 @@ const qr = rt(
             A,
             {
               type: "text",
-              ...U,
+              ...H,
               onChange: (L) => u(w.name, L.target.value, w.validateOnChange),
               onBlur: () => g(w.name)
             }
@@ -7773,7 +7779,7 @@ function pd() {
         }
       }
     }
-    var h = p, x = f, T = d, j = o, V = e, ne = m, w = n, ee = N, H = b, te = r, we = s, U = a, K = k, L = !1;
+    var h = p, x = f, T = d, j = o, V = e, ne = m, w = n, ee = N, U = b, te = r, we = s, H = a, K = k, L = !1;
     function Y(I) {
       return L || (L = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), oe(I) || v(I) === p;
     }
@@ -7813,7 +7819,7 @@ function pd() {
     function _t(I) {
       return v(I) === k;
     }
-    ie.AsyncMode = h, ie.ConcurrentMode = x, ie.ContextConsumer = T, ie.ContextProvider = j, ie.Element = V, ie.ForwardRef = ne, ie.Fragment = w, ie.Lazy = ee, ie.Memo = H, ie.Portal = te, ie.Profiler = we, ie.StrictMode = U, ie.Suspense = K, ie.isAsyncMode = Y, ie.isConcurrentMode = oe, ie.isContextConsumer = he, ie.isContextProvider = W, ie.isElement = X, ie.isForwardRef = fe, ie.isFragment = ke, ie.isLazy = at, ie.isMemo = He, ie.isPortal = xt, ie.isProfiler = wt, ie.isStrictMode = st, ie.isSuspense = _t, ie.isValidElementType = g, ie.typeOf = v;
+    ie.AsyncMode = h, ie.ConcurrentMode = x, ie.ContextConsumer = T, ie.ContextProvider = j, ie.Element = V, ie.ForwardRef = ne, ie.Fragment = w, ie.Lazy = ee, ie.Memo = U, ie.Portal = te, ie.Profiler = we, ie.StrictMode = H, ie.Suspense = K, ie.isAsyncMode = Y, ie.isConcurrentMode = oe, ie.isContextConsumer = he, ie.isContextProvider = W, ie.isElement = X, ie.isForwardRef = fe, ie.isFragment = ke, ie.isLazy = at, ie.isMemo = He, ie.isPortal = xt, ie.isProfiler = wt, ie.isStrictMode = st, ie.isSuspense = _t, ie.isValidElementType = g, ie.typeOf = v;
   })()), ie;
 }
 var ma;
@@ -8086,7 +8092,7 @@ function xd(t) {
       });
       return ae;
     });
-  }, [i.validate, i.validationSchema, w, j, V]), H = $e(function(_) {
+  }, [i.validate, i.validationSchema, w, j, V]), U = $e(function(_) {
     return _ === void 0 && (_ = x.values), T({
       type: "SET_ISVALIDATING",
       payload: !0
@@ -8101,8 +8107,8 @@ function xd(t) {
     });
   });
   be(function() {
-    o && l.current === !0 && ot(b.current, i.initialValues) && H(b.current);
-  }, [o, H]);
+    o && l.current === !0 && ot(b.current, i.initialValues) && U(b.current);
+  }, [o, U]);
   var te = ue(function(_) {
     var O = _ && _.values ? _.values : b.current, M = _ && _.errors ? _.errors : N.current ? N.current : i.initialErrors || {}, P = _ && _.touched ? _.touched : S.current ? S.current : i.initialTouched || {}, G = _ && _.status ? _.status : C.current ? C.current : i.initialStatus;
     b.current = O, N.current = M, S.current = P, C.current = G;
@@ -8127,8 +8133,8 @@ function xd(t) {
       ae();
   }, [i.initialErrors, i.initialStatus, i.initialTouched, i.onReset]);
   be(function() {
-    l.current === !0 && !ot(b.current, i.initialValues) && f && (b.current = i.initialValues, te(), o && H(b.current));
-  }, [f, i.initialValues, te, o, H]), be(function() {
+    l.current === !0 && !ot(b.current, i.initialValues) && f && (b.current = i.initialValues, te(), o && U(b.current));
+  }, [f, i.initialValues, te, o, U]), be(function() {
     f && l.current === !0 && !ot(N.current, i.initialErrors) && (N.current = i.initialErrors || it, T({
       type: "SET_ERRORS",
       payload: i.initialErrors || it
@@ -8189,7 +8195,7 @@ function xd(t) {
         });
       });
     return Promise.resolve();
-  }), U = ue(function(_, O) {
+  }), H = ue(function(_, O) {
     var M = O.validate;
     u.current[_] = {
       validate: M
@@ -8202,7 +8208,7 @@ function xd(t) {
       payload: _
     });
     var M = O === void 0 ? a : O;
-    return M ? H(x.values) : Promise.resolve();
+    return M ? U(x.values) : Promise.resolve();
   }), Y = ue(function(_) {
     T({
       type: "SET_ERRORS",
@@ -8215,7 +8221,7 @@ function xd(t) {
       payload: M
     });
     var P = O === void 0 ? r : O;
-    return P ? H(M) : Promise.resolve();
+    return P ? U(M) : Promise.resolve();
   }), he = ue(function(_, O) {
     T({
       type: "SET_FIELD_ERROR",
@@ -8234,7 +8240,7 @@ function xd(t) {
       }
     });
     var G = M === void 0 ? r : M;
-    return G ? H(ct(x.values, _, P)) : Promise.resolve();
+    return G ? U(ct(x.values, _, P)) : Promise.resolve();
   }), X = ue(function(_, O) {
     var M = O, P = _, G;
     if (!Or(_)) {
@@ -8262,7 +8268,7 @@ function xd(t) {
       }
     });
     var P = M === void 0 ? a : M;
-    return P ? H(x.values) : Promise.resolve();
+    return P ? U(x.values) : Promise.resolve();
   }), at = ue(function(_, O) {
     _.persist && _.persist();
     var M = _.target, P = M.name, G = M.id, ae = M.outerHTML, ye = O || P || G;
@@ -8300,7 +8306,7 @@ function xd(t) {
   }, []), _t = $e(function() {
     return T({
       type: "SUBMIT_ATTEMPT"
-    }), H().then(function(_) {
+    }), U().then(function(_) {
       var O = _ instanceof Error, M = !O && Object.keys(_).length === 0;
       if (M) {
         var P;
@@ -8335,7 +8341,7 @@ function xd(t) {
     });
   }), _e = {
     resetForm: te,
-    validateForm: H,
+    validateForm: U,
     validateField: we,
     setErrors: Y,
     setFieldError: he,
@@ -8408,12 +8414,12 @@ function xd(t) {
     setTouched: L,
     setValues: oe,
     submitForm: _t,
-    validateForm: H,
+    validateForm: U,
     validateField: we,
     isValid: Ts,
     dirty: Mt,
     unregisterField: K,
-    registerField: U,
+    registerField: H,
     getFieldProps: It,
     getFieldMeta: le,
     getFieldHelpers: Oe,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formix-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -33,7 +33,8 @@
     "build:site": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json && npm run build:cli",
     "build:cli": "tsc -p tsconfig.cli.json",
-    "deploy": "gh-pages -d dist-site"
+    "deploy": "gh-pages -d dist-site",
+    "update-status": "node .agent/scripts/generate-status.js"
   },
   "bin": {
     "formix-ui": "dist/bin/index.js",
@@ -82,13 +83,12 @@
     "zod": ">=3.0.0"
   },
   "dependencies": {
-    "chalk": "^5.6.2",
     "commander": "^14.0.2",
     "date-fns": "^4.1.0",
     "execa": "^9.6.1",
-    "fs-extra": "^11.3.3",
     "ora": "^9.0.0",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -99,10 +99,12 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "chalk": "^5.6.2",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "formik": "^2.4.9",
+    "fs-extra": "^11.3.3",
     "gh-pages": "^6.3.0",
     "globals": "^16.5.0",
     "husky": "^9.1.7",

package/CHANGELOG.md

@@ -1,206 +0,0 @@
-# Changelog
-
-All notable changes to FormEngine will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [3.1.0] - 2026-01-17
-
-### 🎉 New Features & Breakthroughs
-
-#### **Themed Variant System**
-
-- **Unified Variants**: Full support for `outline`, `filled`, `standard`, and `floating` variants across all input components.
-- **Animated Notches**: Precision-engineered floating labels with a solid background notch effect.
-- **Enhanced Date/Time Pickers**: `DatePicker`, `DateRangePicker`, `DateTimePicker`, and `TimePicker` now support the full variant system natively.
-
-#### **CLI 3.0 Power Tools**
-
-- **Dynamic Package Names**: Users can now specify a custom `packageName` during `init` for highly tailored local installations.
-- **Component Tracking**: The new `r-form.json` config tracks every component installed in `copy` mode.
-- **`update` Command**: Introduced a powerful `update` command to automatically synchronize your local component source files with the latest upstream library versions.
-- **Intelligent Dependency Resolution**: The `add` and `update` commands now recursively manage internal dependencies (like `theme-core` and `date-utils`).
-
-#### **Core Enhancements**
-
-- **Native Implementation**: Fully transitioned from external UI libraries to high-performance, tailored native components for all Date/Time operations.
-- **Floating Labels for Selects**: Integrated floating label animations into `Select` and `Autocomplete` components.
-- **Library Exports**: Expanded the public API to export the complete suite of themed components.
-
-### 🔧 Technical Details
-
-- **Dependencies**: React 19.2, Tailwind CSS 4.1, Zod 4.3, date-fns 4.1.
-- **CLI Utilities**: Chalk, Commander, Execa, Fs-extra, Ora, Prompts.
-
-## [3.0.2] - 2026-01-13
-
-### 🎉 Initial Release
-
-#### Added
-
-**Core Features**
-
-- Schema-driven form rendering with 17 field types
-- Visual form builder with drag-and-drop
-- Comprehensive validation system (20+ validation types)
-- Conditional field visibility with AND/OR rules
-- Responsive 12-column grid layout
-- Dark mode support
-- TypeScript support
-
-**Field Types**
-
-- Text inputs: text, email, url, tel, password
-- Number input with min/max/step
-- Textarea with auto-grow and character count
-- Autocomplete with async support and multi-select
-- Native select with multi-select
-- Checkbox, Switch, Radio groups
-- File upload with preview modes
-- Date/Time pickers (Kendo UI integration)
-
-**Form Builder**
-
-- 60+ configurable properties per field
-- Smart field defaults by type
-- Schema import/export (JSON)
-- Copy to clipboard functionality
-- Real-time preview
-- Organized property panels
-- Icon-only button design
-
-**Validation**
-
-- Required, email, URL validation
-- Min/max length for text
-- Min/max value for numbers
-- Pattern/regex validation
-- File size and type validation
-- Date range validation
-- Custom validation functions
-- Debounced validation
-- Validate on blur/change
-
-**UI/UX**
-
-- Floating labels with notch effect
-- Error tooltips
-- Icon adornments (start/end)
-- Responsive design (mobile/tablet/desktop)
-- Accessibility (ARIA, keyboard navigation)
-- Premium animations and transitions
-
-**States Gallery**
-
-- Component state showcase
-- Smart state filtering by component type
-- Responsive grid layout (4-2-1 columns)
-- All field types with 7 states each
-
-**Developer Experience**
-
-- TypeScript definitions
-- Comprehensive documentation
-- Example schemas
-- Theme customization
-- Zod integration
-
-### 🔧 Technical Details
-
-**Dependencies**
-
-- React 19.2+
-- Tailwind CSS 4.1
-- Zod 4.3+
-- Kendo React UI 13.2 (optional)
-
-**Browser Support**
-
-- Chrome 90+
-- Firefox 88+
-- Safari 14+
-- Edge 90+
-
-### 📚 Documentation
-
-- README with quick start guide
-- API documentation
-- Contributing guidelines
-- MIT License
-- Changelog
-
----
-
-## [Unreleased]
-
-### Planned Features
-
-- [ ] Multi-step forms/wizard
-- [ ] Form templates library
-- [ ] Advanced file upload (drag-and-drop, crop)
-- [ ] Rich text editor field
-- [ ] Signature pad field
-- [ ] Geolocation field
-- [ ] Rating/star field
-- [ ] Color picker field
-- [ ] Slider/range field
-- [ ] Form analytics
-- [ ] A/B testing support
-- [ ] Internationalization (i18n)
-- [ ] Form versioning
-- [ ] Collaboration features
-- [ ] API integration templates
-- [ ] Webhook support
-- [ ] PDF export
-- [ ] Email notifications
-- [ ] Conditional sections
-- [ ] Repeatable field groups
-- [ ] Calculation fields
-- [ ] Lookup fields
-- [ ] Matrix/grid questions
-
----
-
-## Version History
-
-- **3.0.2** - Initial public release (2026-01-13)
-
----
-
-## Migration Guides
-
-### From 2.x to 3.0
-
-No migration needed - this is the initial public release!
-
----
-
-## Breaking Changes
-
-None yet - this is version 1.0.0!
-
----
-
-## Deprecations
-
-None yet.
-
----
-
-## Security
-
-### Reporting Security Issues
-
-Please report security vulnerabilities to adarshatl03@gmail.com
-
-### Security Updates
-
-- All dependencies are kept up-to-date
-- Regular security audits
-- Zod validation prevents injection attacks
-- XSS protection built-in
-
----
-
-**Note**: For detailed commit history, see [GitHub Releases](https://github.com/yourusername/form-engine/releases)