automoby-kit 1.0.65 → 1.0.67

package/README.md

@@ -1,312 +1,312 @@
-# Automoby Kit
-
-A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.
-
-![npm version](https://img.shields.io/badge/version-1.0.64-blue.svg)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)
-![React](https://img.shields.io/badge/React-19.1.0-blue)
-
-## ✨ Features
-
-- 🎨 **15+ Production-Ready Components** - Comprehensive UI library for modern React applications
-- 📱 **Mobile-First Design** - Built-in mobile detection and responsive behavior
-- 🎯 **TypeScript Native** - Full type safety with complete TypeScript definitions
-- 🌳 **Tree-Shakeable** - Import only what you need for optimal bundle size
-- 🎨 **Tailwind CSS** - Styled with Tailwind for easy customization
-- ♿ **Accessible** - ARIA-compliant components following best practices
-- 🚀 **Modern React 19** - Built for the latest React features
-
-## 🚀 Installation
-
-```bash
-npm install automoby-kit
-```
-
-### Peer Dependencies
-
-Make sure you have these installed:
-
-```bash
-npm install react react-dom clsx lucide-react tailwindcss ua-parser-js
-```
-
-## 📦 Usage
-
-### Import All Components
-
-```typescript
-import { 
-  Button, 
-  Typography, 
-  Input, 
-  Tabs,
-  Dialog,
-  Select
-} from 'automoby-kit';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">Welcome to Automoby Kit</Typography>
-      <Button variant="primary" size="lg">
-        Click me!
-      </Button>
-      <Input placeholder="Enter text..." />
-    </div>
-  );
-}
-```
-
-### Import Individual Components (Tree-Shaking)
-
-For better bundle optimization, import components individually:
-
-```typescript
-import { Button } from 'automoby-kit/Button';
-import { Typography } from 'automoby-kit/Typography';
-import { Input } from 'automoby-kit/Input';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">Optimized Bundle</Typography>
-      <Button variant="primary">Click me!</Button>
-      <Input placeholder="Type here..." />
-    </div>
-  );
-}
-```
-
-## 🧩 Available Components
-
-### Form Components
-- **Input** - Advanced input fields with label, error states, and various types
-- **Select** - Dropdown select with keyboard navigation and accessibility
-- **RadioGroup** - Radio button groups with customizable options
-
-### Navigation Components
-- **Breadcrumb** - Navigation breadcrumbs for showing page hierarchy
-- **Menu** - Context menus and dropdowns with nested support
-- **Tabs** - Tabbed interfaces for organizing content
-- **Pagination** - Page navigation with mobile and desktop variants
-
-### Display Components
-- **Typography** - Text rendering with various heading and body styles
-- **Button** - Interactive buttons with multiple variants and sizes
-- **Chips** - Tag-like elements for categories or filters
-- **Divider** - Visual separators for content sections
-- **Accordion** - Collapsible content sections
-
-### Overlay Components
-- **Dialog** - Modal dialogs with customizable content and actions
-- **Drawer** - Slide-out panels from any direction
-- **Backdrop** - Overlay backgrounds for modals
-
-## 🏗️ TypeScript Support
-
-All components come with full TypeScript support and exported types:
-
-```typescript
-import { 
-  ButtonProps, 
-  ButtonVariant, 
-  ButtonSize,
-  TypographyProps,
-  TypographyVariant,
-  InputProps,
-  DialogProps,
-  SelectProps,
-  SelectOption
-} from 'automoby-kit';
-
-// Use types in your components
-const MyButton: React.FC<ButtonProps> = (props) => {
-  return <Button {...props} />;
-};
-
-// Define variants with type safety
-const variant: ButtonVariant = 'primary';
-const size: ButtonSize = 'lg';
-```
-
-## 📱 Mobile Context
-
-The library includes a mobile detection context for responsive behavior:
-
-```typescript
-import { MobileProvider, useMobile } from 'automoby-kit';
-
-function App() {
-  return (
-    <MobileProvider userAgent={navigator.userAgent}>
-      <MyComponent />
-    </MobileProvider>
-  );
-}
-
-function MyComponent() {
-  const isMobile = useMobile();
-  
-  return (
-    <div>
-      {isMobile ? (
-        <p>Mobile View</p>
-      ) : (
-        <p>Desktop View</p>
-      )}
-    </div>
-  );
-}
-```
-
-## 🎨 Component Examples
-
-### Dialog
-
-```typescript
-import { Dialog, DialogButton } from 'automoby-kit';
-import { useState } from 'react';
-
-function MyDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      title="Confirm Action"
-      content={<p>Are you sure you want to proceed?</p>}
-      buttons={
-        <>
-          <DialogButton variant="primary" onClick={() => setIsOpen(false)}>
-            Confirm
-          </DialogButton>
-          <DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
-            Cancel
-          </DialogButton>
-        </>
-      }
-    />
-  );
-}
-```
-
-### Select
-
-```typescript
-import { Select } from 'automoby-kit';
-
-function MySelect() {
-  const options = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-  ];
-
-  return (
-    <Select
-      label="Choose an option"
-      placeholder="Select..."
-      options={options}
-      onChange={(value) => console.log('Selected:', value)}
-    />
-  );
-}
-```
-
-### Pagination
-
-```typescript
-import { Pagination } from 'automoby-kit';
-
-function MyPagination() {
-  return (
-    <Pagination
-      currentPage={1}
-      totalPages={10}
-      onPageChange={(page) => console.log('Page:', page)}
-    />
-  );
-}
-```
-
-## 🎯 Available Exports
-
-### Components
-`Button`, `Typography`, `Input`, `Tabs`, `Drawer`, `Backdrop`, `Breadcrumb`, `Pagination`, `Accordion`, `Divider`, `RadioGroup`, `Chips`, `Menu`, `Dialog`, `DialogButton`, `Select`
-
-### Context Providers
-`MobileProvider`, `useMobile`
-
-### Utilities
-`cn` (classname utility from `automoby-kit/utils`)
-
-### Types
-All component props and variants are exported for TypeScript users.
-
-## 🛠️ Peer Dependencies
-
-```json
-{
-  "react": "^19.1.0",
-  "react-dom": "^19.1.0",
-  "clsx": "^2.1.1",
-  "lucide-react": "^0.522.0",
-  "tailwindcss": "^4.1.10",
-  "typescript": "^5.8.3",
-  "ua-parser-js": "^2.0.4"
-}
-```
-
-## 📦 Bundle Formats
-
-This package ships with multiple bundle formats:
-
-- **ESM** - `dist/esm` - ES Modules for modern bundlers
-- **CommonJS** - `dist/cjs` - CommonJS for Node.js compatibility
-- **TypeScript Definitions** - `dist/types` - Complete type definitions
-
-## 🔧 Configuration
-
-If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):
-
-```typescript
-'use client';
-
-import { Button } from 'automoby-kit';
-```
-
-## 🌟 Why Automoby Kit?
-
-- **Battle-Tested** - Built during production demands
-- **Developer Experience** - Intuitive API with excellent TypeScript support
-- **Performance** - Optimized bundle size with tree-shaking support
-- **Modern Stack** - Built with latest React 19 and TypeScript 5.8
-- **Accessible** - WCAG compliant components
-- **Customizable** - Easy to theme with Tailwind CSS
-
-## 🆘 Support
-
-If you encounter any issues:
-
-1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues)
-2. Submit a detailed issue report
-3. Provide a minimal reproduction example
-
-## 👥 Authors
-
-- **Ghazal Kordi** - Co-creator
-- **Alireza Mirzaee** - Co-creator
-
-## 📄 License
-
-ISC
-
-## 🔄 Version History
-
-- **1.0.64** - Current stable release
-- **1.0.0** - Initial release
-
----
-
+# Automoby Kit
+
+A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.
+
+![npm version](https://img.shields.io/badge/version-1.0.64-blue.svg)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)
+![React](https://img.shields.io/badge/React-19.1.0-blue)
+
+## ✨ Features
+
+- 🎨 **15+ Production-Ready Components** - Comprehensive UI library for modern React applications
+- 📱 **Mobile-First Design** - Built-in mobile detection and responsive behavior
+- 🎯 **TypeScript Native** - Full type safety with complete TypeScript definitions
+- 🌳 **Tree-Shakeable** - Import only what you need for optimal bundle size
+- 🎨 **Tailwind CSS** - Styled with Tailwind for easy customization
+- ♿ **Accessible** - ARIA-compliant components following best practices
+- 🚀 **Modern React 19** - Built for the latest React features
+
+## 🚀 Installation
+
+```bash
+npm install automoby-kit
+```
+
+### Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+npm install react react-dom clsx lucide-react tailwindcss ua-parser-js
+```
+
+## 📦 Usage
+
+### Import All Components
+
+```typescript
+import { 
+  Button, 
+  Typography, 
+  Input, 
+  Tabs,
+  Dialog,
+  Select
+} from 'automoby-kit';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">Welcome to Automoby Kit</Typography>
+      <Button variant="primary" size="lg">
+        Click me!
+      </Button>
+      <Input placeholder="Enter text..." />
+    </div>
+  );
+}
+```
+
+### Import Individual Components (Tree-Shaking)
+
+For better bundle optimization, import components individually:
+
+```typescript
+import { Button } from 'automoby-kit/Button';
+import { Typography } from 'automoby-kit/Typography';
+import { Input } from 'automoby-kit/Input';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">Optimized Bundle</Typography>
+      <Button variant="primary">Click me!</Button>
+      <Input placeholder="Type here..." />
+    </div>
+  );
+}
+```
+
+## 🧩 Available Components
+
+### Form Components
+- **Input** - Advanced input fields with label, error states, and various types
+- **Select** - Dropdown select with keyboard navigation and accessibility
+- **RadioGroup** - Radio button groups with customizable options
+
+### Navigation Components
+- **Breadcrumb** - Navigation breadcrumbs for showing page hierarchy
+- **Menu** - Context menus and dropdowns with nested support
+- **Tabs** - Tabbed interfaces for organizing content
+- **Pagination** - Page navigation with mobile and desktop variants
+
+### Display Components
+- **Typography** - Text rendering with various heading and body styles
+- **Button** - Interactive buttons with multiple variants and sizes
+- **Chips** - Tag-like elements for categories or filters
+- **Divider** - Visual separators for content sections
+- **Accordion** - Collapsible content sections
+
+### Overlay Components
+- **Dialog** - Modal dialogs with customizable content and actions
+- **Drawer** - Slide-out panels from any direction
+- **Backdrop** - Overlay backgrounds for modals
+
+## 🏗️ TypeScript Support
+
+All components come with full TypeScript support and exported types:
+
+```typescript
+import { 
+  ButtonProps, 
+  ButtonVariant, 
+  ButtonSize,
+  TypographyProps,
+  TypographyVariant,
+  InputProps,
+  DialogProps,
+  SelectProps,
+  SelectOption
+} from 'automoby-kit';
+
+// Use types in your components
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+
+// Define variants with type safety
+const variant: ButtonVariant = 'primary';
+const size: ButtonSize = 'lg';
+```
+
+## 📱 Mobile Context
+
+The library includes a mobile detection context for responsive behavior:
+
+```typescript
+import { MobileProvider, useMobile } from 'automoby-kit';
+
+function App() {
+  return (
+    <MobileProvider userAgent={navigator.userAgent}>
+      <MyComponent />
+    </MobileProvider>
+  );
+}
+
+function MyComponent() {
+  const isMobile = useMobile();
+  
+  return (
+    <div>
+      {isMobile ? (
+        <p>Mobile View</p>
+      ) : (
+        <p>Desktop View</p>
+      )}
+    </div>
+  );
+}
+```
+
+## 🎨 Component Examples
+
+### Dialog
+
+```typescript
+import { Dialog, DialogButton } from 'automoby-kit';
+import { useState } from 'react';
+
+function MyDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="Confirm Action"
+      content={<p>Are you sure you want to proceed?</p>}
+      buttons={
+        <>
+          <DialogButton variant="primary" onClick={() => setIsOpen(false)}>
+            Confirm
+          </DialogButton>
+          <DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
+            Cancel
+          </DialogButton>
+        </>
+      }
+    />
+  );
+}
+```
+
+### Select
+
+```typescript
+import { Select } from 'automoby-kit';
+
+function MySelect() {
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label="Choose an option"
+      placeholder="Select..."
+      options={options}
+      onChange={(value) => console.log('Selected:', value)}
+    />
+  );
+}
+```
+
+### Pagination
+
+```typescript
+import { Pagination } from 'automoby-kit';
+
+function MyPagination() {
+  return (
+    <Pagination
+      currentPage={1}
+      totalPages={10}
+      onPageChange={(page) => console.log('Page:', page)}
+    />
+  );
+}
+```
+
+## 🎯 Available Exports
+
+### Components
+`Button`, `Typography`, `Input`, `Tabs`, `Drawer`, `Backdrop`, `Breadcrumb`, `Pagination`, `Accordion`, `Divider`, `RadioGroup`, `Chips`, `Menu`, `Dialog`, `DialogButton`, `Select`
+
+### Context Providers
+`MobileProvider`, `useMobile`
+
+### Utilities
+`cn` (classname utility from `automoby-kit/utils`)
+
+### Types
+All component props and variants are exported for TypeScript users.
+
+## 🛠️ Peer Dependencies
+
+```json
+{
+  "react": "^19.1.0",
+  "react-dom": "^19.1.0",
+  "clsx": "^2.1.1",
+  "lucide-react": "^0.522.0",
+  "tailwindcss": "^4.1.10",
+  "typescript": "^5.8.3",
+  "ua-parser-js": "^2.0.4"
+}
+```
+
+## 📦 Bundle Formats
+
+This package ships with multiple bundle formats:
+
+- **ESM** - `dist/esm` - ES Modules for modern bundlers
+- **CommonJS** - `dist/cjs` - CommonJS for Node.js compatibility
+- **TypeScript Definitions** - `dist/types` - Complete type definitions
+
+## 🔧 Configuration
+
+If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):
+
+```typescript
+'use client';
+
+import { Button } from 'automoby-kit';
+```
+
+## 🌟 Why Automoby Kit?
+
+- **Battle-Tested** - Built during production demands
+- **Developer Experience** - Intuitive API with excellent TypeScript support
+- **Performance** - Optimized bundle size with tree-shaking support
+- **Modern Stack** - Built with latest React 19 and TypeScript 5.8
+- **Accessible** - WCAG compliant components
+- **Customizable** - Easy to theme with Tailwind CSS
+
+## 🆘 Support
+
+If you encounter any issues:
+
+1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues)
+2. Submit a detailed issue report
+3. Provide a minimal reproduction example
+
+## 👥 Authors
+
+- **Ghazal Kordi** - Co-creator
+- **Alireza Mirzaee** - Co-creator
+
+## 📄 License
+
+ISC
+
+## 🔄 Version History
+
+- **1.0.64** - Current stable release
+- **1.0.0** - Initial release
+
+---
+
 Built with ❤️ in 2025