formik-form-components 2.0.0 → 2.0.2

package/README.md

@@ -1,32 +1,28 @@
 # Formik Form Components
 
-> **Zero-config React form components** with Tailwind CSS and Formik - ready to use out of the box! 
+> **React form components** with Tailwind CSS and Formik - ready to use out of the box!
 
 A complete, production-ready form component library that requires **zero configuration**. Just install and start building beautiful forms instantly. All Tailwind CSS styles are precompiled and bundled, so you don't need to configure anything.
 
 ## ✨ Features
 
 - 🎨 **Zero Configuration** - No Tailwind setup, no config files, just install and use
-- 📦 **Tiny Bundle Size** - Optimized and tree-shakable (stays in KBs, not MBs)
 - 🔥 **18+ Form Components** - Complete form library with all common input types
 - 💅 **Pre-styled with Tailwind** - Beautiful, modern design out of the box
 - 🎯 **Formik Integration** - Seamless integration with Formik for form state management
-- 📱 **Fully Responsive** - Mobile-first design that works on all screen sizes
-- ♿ **Accessible** - WCAG compliant with keyboard navigation support
 - 🔧 **TypeScript Support** - Full TypeScript definitions included
-- 🎭 **Animated** - Smooth animations with Framer Motion
 - 🌐 **International** - Phone input with country codes
 
 ## 📦 Installation
 
 ```bash
-npm install @your-org/formik-form-components
+npm install formik-form-components
 ```
 
 Or with yarn:
 
 ```bash
-yarn add @your-org/formik-form-components
+yarn add formik-form-components
 ```
 
 ## 🚀 Quick Start
@@ -35,41 +31,35 @@ No configuration needed! Import and use:
 
 ```tsx
 import React from 'react';
-import { Formik, Form } from 'formik';
-import { AppInputField, AppTextArea, SubmitButton } from '@your-org/formik-form-components';
+import { Form, AppInputField, AppTextArea } from "formik-form-components";
 
 function MyForm() {
-  return (
-    <Formik
-      initialValues={{ name: '', email: '', message: '' }}
-      onSubmit={(values) => console.log(values)}
+   <Form
+      initialValues={{ name: "", email: "", message: "" }}
+      onSubmit={(values: any) => console.log(values)}
     >
-      <Form>
-        <AppInputField 
-          name="name" 
-          label="Your Name" 
-          placeholder="John Doe"
-          required 
-        />
-        
-        <AppInputField 
-          name="email" 
-          label="Email Address" 
-          type="email"
-          placeholder="john@example.com"
-          required 
-        />
-        
-        <AppTextArea 
-          name="message" 
-          label="Message" 
-          rows={4}
-          placeholder="Your message here..."
-        />
-        
-        <SubmitButton>Submit Form</SubmitButton>
-      </Form>
-    </Formik>
+      <AppInputField
+        name="name"
+        label="Your Name"
+        placeholder="John Doe"
+        required
+      />
+
+      <AppInputField
+        name="email"
+        label="Email Address"
+        type="email"
+        placeholder="john@example.com"
+        required
+      />
+
+      <AppTextArea
+        name="message"
+        label="Message"
+        rows={4}
+        placeholder="Your message here..."
+      />
+    </Form>
   );
 }
 
@@ -110,41 +100,41 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 ### Text Input with Password Toggle
 
 ```tsx
-<AppInputField 
-  name="password" 
-  label="Password" 
+<AppInputField
+  name="password"
+  label="Password"
   type="password"
   placeholder="Enter your password"
-  required 
+  required
 />
 ```
 
 ### Phone Number Input
 
 ```tsx
-<AppPhoneNoInput 
-  name="phone" 
+<AppPhoneNoInput
+  name="phone"
   label="Phone Number"
   placeholder="Enter your phone number"
-  required 
+  required
 />
 ```
 
 ### Date Picker
 
 ```tsx
-<AppDatePicker 
-  name="birthdate" 
+<AppDatePicker
+  name="birthdate"
   label="Date of Birth"
-  disableFuture 
+  disableFuture
 />
 ```
 
 ### Multi-Select
 
 ```tsx
-<AppMultiSelector 
-  name="skills" 
+<AppMultiSelector
+  name="skills"
   label="Your Skills"
   options={[
     { label: 'React', value: 'react' },
@@ -159,8 +149,8 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 ### File Upload with Preview
 
 ```tsx
-<AppUploadFile 
-  name="documents" 
+<AppUploadFile
+  name="documents"
   label="Upload Documents"
   multiple
   accept={{ 'image/*': ['.png', '.jpg', '.jpeg'], 'application/pdf': ['.pdf'] }}
@@ -170,23 +160,23 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 ### Radio Group
 
 ```tsx
-<AppRadioGroup 
-  name="gender" 
+<AppRadioGroup
+  name="gender"
   label="Gender"
   options={[
     { label: 'Male', value: 'male' },
     { label: 'Female', value: 'female' },
     { label: 'Other', value: 'other' }
   ]}
-  required 
+  required
 />
 ```
 
 ### Rating Component
 
 ```tsx
-<AppRating 
-  name="rating" 
+<AppRating
+  name="rating"
   label="Rate this product"
   helperText="Your rating helps us improve"
 />
@@ -195,8 +185,8 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 ### Tags Creator
 
 ```tsx
-<AppTagsCreator 
-  name="tags" 
+<AppTagsCreator
+  name="tags"
   label="Tags"
   placeholder="Type and press Enter"
   options={['React', 'JavaScript', 'CSS']}
@@ -206,8 +196,8 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 ### Autocomplete
 
 ```tsx
-<AppAutoCompleter 
-  name="country" 
+<AppAutoCompleter
+  name="country"
   label="Country"
   placeholder="Search countries..."
   options={['USA', 'Canada', 'Mexico', 'UK', 'Germany']}
@@ -219,8 +209,8 @@ That's it! No Tailwind setup, no configuration files. Everything just works.
 All components come pre-styled with Tailwind CSS. You can customize them by passing a `className` prop:
 
 ```tsx
-<AppInputField 
-  name="email" 
+<AppInputField
+  name="email"
   label="Email"
   className="mb-6"
 />
@@ -243,70 +233,35 @@ const validationSchema = Yup.object({
   age: Yup.number().min(18, 'Must be 18+').required('Age is required')
 });
 
-<Formik
+<Form
   initialValues={{ name: '', email: '', age: '' }}
   validationSchema={validationSchema}
   onSubmit={(values) => console.log(values)}
 >
-  <Form>
-    {/* Your form fields */}
-  </Form>
-</Formik>
+   <AppInputField name="email" label="Email" />
+</Form>
 ```
 
 ### Submit Button with Loading State
 
 ```tsx
-<Formik
+<Form
   initialValues={{ email: '' }}
   onSubmit={async (values) => {
     await api.submit(values);
   }}
 >
   {({ isSubmitting }) => (
-    <Form>
+    <div>
       <AppInputField name="email" label="Email" />
       <SubmitButton loading={isSubmitting}>
         {isSubmitting ? 'Submitting...' : 'Submit'}
       </SubmitButton>
-    </Form>
+    </div>
   )}
-</Formik>
-```
-
-## 🎭 TypeScript Support
-
-Full TypeScript support with type definitions:
-
-```tsx
-import type { FormProps, UploadProps, CustomFile } from '@your-org/formik-form-components';
-
-// Use types in your components
-const MyForm: React.FC = () => {
-  const handleUpload = (files: CustomFile[]) => {
-    console.log('Uploaded:', files);
-  };
-  
-  return (
-    // Your form here
-  );
-};
+</Form>
 ```
 
-## 📦 What's Included
-
-When you install this package, you get:
-
-✅ **All form components** - 18+ production-ready components  
-✅ **Precompiled Tailwind CSS** - No setup required  
-✅ **TypeScript definitions** - Full type safety  
-✅ **Formik integration** - Built-in form state management  
-✅ **Validation support** - Works with Yup and custom validators  
-✅ **Icons** - Heroicons included  
-✅ **Animations** - Framer Motion for smooth transitions  
-✅ **File upload** - React Dropzone integration  
-✅ **Phone input** - International phone numbers  
-
 ## 🤝 Peer Dependencies
 
 This package requires:
@@ -332,7 +287,7 @@ These will be installed automatically if not present.
 
 ### After (This Package)
 
-1. `npm install @your-org/formik-form-components`
+1. `npm install formik-form-components`
 2. Import and use components
 3. Done! ✨
 
@@ -344,23 +299,4 @@ MIT
 
 Contributions are welcome! Please read our contributing guidelines before submitting PRs.
 
-## 💬 Support
-
-- 📧 Email: support@yourorg.com
-- 🐛 Issues: [GitHub Issues](https://github.com/your-username/formik-form-components/issues)
-- 📖 Docs: [Full Documentation](https://your-docs-site.com)
-
-## 🙏 Acknowledgments
-
-Built with:
-- [React](https://reactjs.org/)
-- [Formik](https://formik.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Headless UI](https://headlessui.dev/)
-- [Framer Motion](https://www.framer.com/motion/)
-- [React Dropzone](https://react-dropzone.js.org/)
-- [Heroicons](https://heroicons.com/)
-
----
-
 Made with ❤️ for the React community