docthub-core-components 2.97.0 → 2.98.0

package/README.md

@@ -1,255 +1,256 @@
-# docthub-core-components
-
-A modern, reusable React component library built with TypeScript and Vite. Includes accessible, customizable UI components for rapid development.
-
-## ✨ Features
-
-- **🚀 Modern Stack**: Built with React 18, TypeScript, and Vite
-- **📦 Tree-shakable**: Lightweight and optimized bundle
-- **🎨 Comprehensive**: 30+ components including buttons, inputs, dialogs, pickers, and more
-- **♿ Accessible**: WCAG compliant with proper ARIA attributes
-- **🎯 Customizable**: Easy theming with CSS variables and Tailwind CSS
-- **📚 Well-documented**: Comprehensive API documentation and Storybook examples
-- **🧪 Tested**: Full test suite using Vitest and Testing Library
-- **📊 Optimized**: Bundle size analysis and performance monitoring
-
-## 📖 Documentation
-
-For comprehensive API documentation, examples, and usage instructions, see:
-
-**[📚 API Documentation](./API_DOCUMENTATION.md)**
-
-The API documentation covers:
-- All 30+ components with detailed props and examples
-- TypeScript interfaces and type definitions
-- Best practices and patterns
-- Accessibility guidelines
-- Theming and customization
-- Migration guides
-
-## 📦 Installation
-
-```bash
-npm install docthub-core-components
-# or
-yarn add docthub-core-components
-```
-
-### Peer Dependencies
-
-```bash
-npm install react@^18.0.0 react-dom@^18.0.0
-```
-
-## 🌀 Usage with Tailwind CSS
-
-To ensure all Tailwind classes (including arbitrary values like `text-['#002830']`) work with `docthub-core-components`, follow these steps:
-
-1. **Do NOT import `docthub-core-components/dist/docthub-core-components.css`** unless you only want base styles. Let your app's Tailwind build generate all needed utilities.
-2. **Add the library to your `tailwind.config.js` content array:**
-
-   ```js
-   module.exports = {
-     content: [
-       "./node_modules/docthub-core-components/dist/**/*.js",
-       "./pages/**/*.{ts,tsx,js,jsx}",
-       "./components/**/*.{ts,tsx,js,jsx}",
-       "./app/**/*.{ts,tsx,js,jsx}",
-       "./src/**/*.{ts,tsx,js,jsx}",
-     ],
-     // ...rest of config
-   }
-   ```
-
-This ensures all Tailwind classes used in your app and in the component library are available, including arbitrary values.
-
-## 🚀 Quick Start
-
-```tsx
-import { 
-  DoctButton, 
-  DoctTypography, 
-  LabeledInput,
-  SearchInput,
-  DatePickerField 
-} from 'docthub-core-components';
-
-function App() {
-  return (
-    <div className="p-6 space-y-4">
-      <DoctTypography variant="h1" weight="bold">
-        Welcome to DocthHub Components
-      </DoctTypography>
-      
-      <SearchInput 
-        placeholder="Search anything..." 
-        size="large"
-      />
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <LabeledInput
-          label="Email"
-          type="email"
-          placeholder="Enter your email"
-          required
-        />
-        
-        <DatePickerField
-          label="Date of Birth"
-          placeholder="Select date"
-        />
-      </div>
-      
-      <div className="flex gap-2">
-        <DoctButton variant="outline">
-          Cancel
-        </DoctButton>
-        <DoctButton variant="primary" size="large">
-          Get Started
-        </DoctButton>
-      </div>
-    </div>
-  );
-}
-```
-
-## 🧩 Component Categories
-
-### Core Components
-- **DoctButton** - Flexible button with multiple variants and icon support
-- **DoctTypography** - Comprehensive typography system
-- **DoctAnimationLoader** - Loading states
-
-### Input Components
-- **LabeledInput** - Input with integrated label and validation
-- **PasswordInput** - Password field with show/hide toggle
-- **OtpInput** - One-time password input
-- **TextareaField** - Multi-line text input
-- **CurrencyInput** - Currency-specific input formatting
-
-### Picker Components
-- **DatePickerField** - Calendar date picker
-- **SelectField** - Dropdown with search functionality
-
-### Search Components
-- **SearchInput** - Search field with icon
-- **AutoComplete** - Autocomplete with suggestions
-- **DoctAutocomplete** - Enhanced autocomplete
-
-### Display Components
-- **DoctChip** - Tags and labels
-- **ExpandableCard** - Collapsible content cards
-
-### Composed Components
-- **SearchFilterSection** - Complete search and filter UI
-- **UserRegistrationSection** - Full registration form
-- **AddressFormSection** - Address input form
-- **ContactFormSection** - Contact information form
-
-### Base UI Components
-- **Alert, Avatar, Checkbox, Dialog, Drawer, DropdownMenu**
-- **Popover, RadioGroup, Tabs, Toast, Tooltip**
-- And more foundational components
-
-## 🎨 Theming
-
-Components support theming via CSS custom properties:
-
-```css
-:root {
-  --customBlue: #3b82f6;
-  --foreground: #000000;
-  --background: #ffffff;
-  --muted-foreground: #6b7280;
-  --destructive: #ef4444;
-  /* ... customize as needed */
-}
-```
-
-## 🛠️ Development
-
-### Setup
-```bash
-git clone <repository>
-cd docthub-core-components
-npm install
-```
-
-### Available Scripts
-```bash
-npm run dev          # Start development server
-npm run build        # Build for production
-npm run storybook    # Start Storybook
-npm test            # Run test suite
-npm run analyze     # Bundle size analysis
-```
-
-## 📚 Storybook
-
-Explore all components interactively:
-
-```bash
-npm run storybook
-```
-
-View component examples, props, and interactive demos at `http://localhost:6006`
-
-## 🧪 Testing
-
-Comprehensive test suite with Vitest and Testing Library:
-
-```bash
-npm test            # Run all tests
-npm test -- --watch # Watch mode
-npm test -- --coverage # Coverage report
-```
-
-**Note**: Some Radix UI Select component tests are skipped due to [JSDOM limitations](https://github.com/radix-ui/primitives/issues/1822).
-
-## 📊 Bundle Analysis
-
-Analyze bundle size and dependencies (local development only):
-
-```bash
-npm run analyze
-```
-
-Opens `dist/bundle-visualizer.html` with detailed treemap visualization.
-
-**Note**: Bundle analysis uses a separate configuration to prevent deployment issues in cloud environments like Vercel. Use `npm run build` for production builds.
-
-## 🔗 Peer Dependencies
-
-- `react` ^18.0.0
-- `react-dom` ^18.0.0
-
-## 📝 TypeScript
-
-Fully typed with TypeScript. Export interfaces for custom implementations:
-
-```tsx
-import type { 
-  DoctButtonProps, 
-  LabeledInputProps,
-  SearchInputProps 
-} from 'docthub-core-components';
-```
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Follow the existing code style
-4. Add tests for new components
-5. Update documentation
-6. Submit a pull request
-
-See [API Documentation](./API_DOCUMENTATION.md#contributing) for detailed guidelines.
-
-## 📄 License
-
-MIT License - see [LICENSE](./LICENSE) file for details.
-
----
-
-**[📚 View Full API Documentation](./API_DOCUMENTATION.md)**
+# docthub-core-components
+
+A modern, reusable React component library built with TypeScript and Vite. Includes accessible, customizable UI components for rapid development.
+
+## ✨ Features
+
+- **🚀 Modern Stack**: Built with React 19, TypeScript, and Vite
+- **📦 Tree-shakable**: Lightweight and optimized bundle
+- **🎨 Comprehensive**: 30+ components including buttons, inputs, dialogs, pickers, and more
+- **♿ Accessible**: WCAG compliant with proper ARIA attributes
+- **🎯 Customizable**: Easy theming with CSS variables and Tailwind CSS
+- **📚 Well-documented**: Comprehensive API documentation and Storybook examples
+- **🧪 Tested**: Full test suite using Vitest and Testing Library
+- **📊 Optimized**: Bundle size analysis and performance monitoring
+
+## 📖 Documentation
+
+For comprehensive API documentation, examples, and usage instructions, see:
+
+**[📚 API Documentation](./API_DOCUMENTATION.md)**
+
+The API documentation covers:
+- All 30+ components with detailed props and examples
+- TypeScript interfaces and type definitions
+- Best practices and patterns
+- Accessibility guidelines
+- Theming and customization
+- Migration guides
+
+## 📦 Installation
+
+```bash
+npm install docthub-core-components
+# or
+yarn add docthub-core-components
+```
+
+### Peer Dependencies
+
+```bash
+npm install react@^19.0.0 react-dom@^19.0.0
+```
+
+## 🌀 Usage with Tailwind CSS
+
+To ensure all Tailwind classes (including arbitrary values like `text-['#002830']`) work with `docthub-core-components`, follow these steps:
+
+1. **Do NOT import `docthub-core-components/dist/docthub-core-components.css`** unless you only want base styles. Let your app's Tailwind build generate all needed utilities.
+2. **Add the library to your `tailwind.config.js` content array:**
+
+   ```js
+   module.exports = {
+     content: [
+       "./node_modules/docthub-core-components/dist/**/*.js",
+       "./pages/**/*.{ts,tsx,js,jsx}",
+       "./components/**/*.{ts,tsx,js,jsx}",
+       "./app/**/*.{ts,tsx,js,jsx}",
+       "./src/**/*.{ts,tsx,js,jsx}",
+     ],
+     // ...rest of config
+   }
+   ```
+
+This ensures all Tailwind classes used in your app and in the component library are available, including arbitrary values.
+
+## 🚀 Quick Start
+
+```tsx
+import { 
+  DoctButton, 
+  DoctTypography, 
+  DoctLabeledInput,
+  DoctSearchInput,
+  DoctDatePickerField 
+} from 'docthub-core-components';
+
+function App() {
+  return (
+    <div className="p-6 space-y-4">
+      <DoctTypography variant="h1" weight="bold">
+        Welcome to DocthHub Components
+      </DoctTypography>
+      
+      <DoctSearchInput 
+        placeholder="Search anything..." 
+        size="large"
+      />
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <DoctLabeledInput
+          label="Email"
+          type="email"
+          placeholder="Enter your email"
+          required
+        />
+        
+        <DoctDatePickerField
+          label="Date of Birth"
+          placeholder="Select date"
+        />
+      </div>
+      
+      <div className="flex gap-2">
+        <DoctButton variant="outline">
+          Cancel
+        </DoctButton>
+        <DoctButton variant="primary" size="large">
+          Get Started
+        </DoctButton>
+      </div>
+    </div>
+  );
+}
+```
+
+## 🧩 Component Categories
+
+### Core Components
+- **DoctButton** - Flexible button with multiple variants and icon support
+- **DoctTypography** - Comprehensive typography system
+- **DoctAnimationLoader** - Loading states
+
+### Input Components
+- **DoctLabeledInput** - Input with integrated label and validation
+- **DoctPasswordInput** - Password field with show/hide toggle
+- **DoctOtpInput** - One-time password input
+- **DoctTextareaField** - Multi-line text input
+- **DoctCurrencyInput** - Currency-specific input formatting
+
+### Picker Components
+- **DoctDatePickerField** - Calendar date picker
+- **DoctDateRangePickerField** - Date range picker with manual mode
+- **DoctSelectField** - Dropdown with search functionality
+
+### Search Components
+- **DoctSearchInput** - Search field with icon
+- **DoctAutoComplete** - Autocomplete with suggestions
+- **DoctAutocomplete** - Enhanced autocomplete
+
+### Display Components
+- **DoctChip** - Tags and labels
+- **DoctExpandableCard** - Collapsible content cards
+
+### Composed Components
+- **DoctSearchFilterSection** - Complete search and filter UI
+- **DoctUserRegistrationSection** - Full registration form
+- **DoctAddressFormSection** - Address input form
+- **DoctContactFormSection** - Contact information form
+
+### Base UI Components
+- **Alert, Avatar, Checkbox, Dialog, Drawer, DropdownMenu**
+- **Popover, RadioGroup, Tabs, Toast, Tooltip**
+- And more foundational components
+
+## 🎨 Theming
+
+Components support theming via CSS custom properties:
+
+```css
+:root {
+  --customBlue: #3b82f6;
+  --foreground: #000000;
+  --background: #ffffff;
+  --muted-foreground: #6b7280;
+  --destructive: #ef4444;
+  /* ... customize as needed */
+}
+```
+
+## 🛠️ Development
+
+### Setup
+```bash
+git clone <repository>
+cd docthub-core-components
+npm install
+```
+
+### Available Scripts
+```bash
+npm run dev          # Start development server
+npm run build        # Build for production
+npm run storybook    # Start Storybook
+npm test            # Run test suite
+npm run analyze     # Bundle size analysis
+```
+
+## 📚 Storybook
+
+Explore all components interactively:
+
+```bash
+npm run storybook
+```
+
+View component examples, props, and interactive demos at `http://localhost:6006`
+
+## 🧪 Testing
+
+Comprehensive test suite with Vitest and Testing Library:
+
+```bash
+npm test            # Run all tests
+npm test -- --watch # Watch mode
+npm test -- --coverage # Coverage report
+```
+
+**Note**: The library uses Base UI primitives; JSDOM-based tests may need `PointerEvent` support in test setup for certain interaction flows.
+
+## 📊 Bundle Analysis
+
+Analyze bundle size and dependencies (local development only):
+
+```bash
+npm run analyze
+```
+
+Opens `dist/bundle-visualizer.html` with detailed treemap visualization.
+
+**Note**: Bundle analysis uses a separate configuration to prevent deployment issues in cloud environments like Vercel. Use `npm run build` for production builds.
+
+## 🔗 Peer Dependencies
+
+- `react` ^19.0.0
+- `react-dom` ^19.0.0
+
+## 📝 TypeScript
+
+Fully typed with TypeScript. Export interfaces for custom implementations:
+
+```tsx
+import type { 
+  DoctFooterProps,
+  DoctNavigationMenuProps,
+  DoctPhoneInputProps 
+} from 'docthub-core-components';
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Follow the existing code style
+4. Add tests for new components
+5. Update documentation
+6. Submit a pull request
+
+See [API Documentation](./API_DOCUMENTATION.md#contributing) for detailed guidelines.
+
+## 📄 License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+---
+
+**[📚 View Full API Documentation](./API_DOCUMENTATION.md)**