@c2-markdown-ui/react 0.4.4 → 0.4.5

package/README.md

@@ -1,4 +1,4 @@
-# @markdown-ui/react
+# @c2-markdown-ui/react
 **Transform Markdown into interactive React components—instantly.**
 
 Turn static docs into live experiences users can click, select, and submit.
@@ -8,14 +8,14 @@ Turn static docs into live experiences users can click, select, and submit.
 ## Get started in 30 seconds
 
 ```bash
-npm install @markdown-ui/react @markdown-ui/marked-ext marked
+npm install @c2-markdown-ui/react @c2-markdown-ui/marked-ext marked
 ```
 
 ```tsx
-import { MarkdownUI } from '@markdown-ui/react';
-import '@markdown-ui/react/widgets.css';
+import { MarkdownUI } from '@c2-markdown-ui/react';
+import '@c2-markdown-ui/react/widgets.css';
 import { Marked } from 'marked';
-import { markedUiExtension } from '@markdown-ui/marked-ext';
+import { markedUiExtension } from '@c2-markdown-ui/marked-ext';
 
 const marked = new Marked();
 marked.use(markedUiExtension);
@@ -74,6 +74,24 @@ const handleWidgetEvent = (event) => {
   const { id, value } = event.detail;
   // That's it - perfect event data
 };
+
+// Form submit (fires after validation passes)
+const handleSubmit = (event) => {
+  const { id, value } = event.detail; // value = full form data (visible fields only)
+};
+
+// Form field stats (fires on every field change)
+const handleFormChange = (event) => {
+  const { visibleCount, filledCount, values } = event.detail.stats;
+  // e.g. "3/5 fields filled" - perfect for progress indicators
+};
+
+<MarkdownUI
+  html={html}
+  onWidgetEvent={handleWidgetEvent}
+  onSubmit={handleSubmit}
+  onFormChange={handleFormChange}
+/>
 ```
 
 ## TypeScript ready
@@ -86,7 +104,7 @@ Full type safety out of the box. All components and events are properly typed fo
 
 ```tsx
 // Just import and use - SSR handled automatically
-import { MarkdownUI } from '@markdown-ui/react';
+import { MarkdownUI } from '@c2-markdown-ui/react';
 ```
 
 **Compatibility:** React 18+, Next.js, Remix, Create React App, Vite, and all modern React frameworks.