master-components-react-ts 2.5.18 → 2.6.1

package/README.md

@@ -1,8 +1,270 @@
-# React + Vite
+# Master Components React TypeScript
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A comprehensive React TypeScript component library featuring modern, accessible, and customizable UI components for building professional web applications.
 
-Currently, two official plugins are available:
+## 🚀 Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **20+ Production-Ready Components** - From basic inputs to complex data tables
+- **TypeScript Support** - Full type safety with comprehensive type definitions
+- **Modern Design System** - Consistent styling with SCSS modules
+- **Accessibility First** - Built with accessibility best practices
+- **Highly Customizable** - Extensive styling and behavior customization options
+- **Tree Shakeable** - Import only what you need
+- **React 18+ Compatible** - Built for modern React applications
+
+## 📦 Installation
+
+```bash
+npm install master-components-react-ts
+```
+
+## 🎯 Quick Start
+
+```tsx
+import React from 'react'
+import { MainButton, FormInput, Table, DatePicker } from 'master-components-react-ts'
+import 'master-components-react-ts/style.css'
+
+function App() {
+  return (
+    <div>
+      <FormInput 
+        label="Email" 
+        placeholder="Enter your email"
+        type="email"
+        required
+      />
+      <MainButton 
+        label="Submit" 
+        buttonType="primary"
+        onClick={() => console.log('Clicked!')}
+      />
+    </div>
+  )
+}
+```
+
+## 🧩 Components
+
+### Form Components
+- **FormInput** - Text input with validation states, slots, and multiple types
+- **Textarea** - Multi-line text input with character counting
+- **Checkbox** - Customizable checkbox with different styles
+- **Radio** - Radio button groups with custom styling
+- **Toggle** - Switch/toggle component with multiple sizes
+- **Dropdown** - Advanced dropdown with search, multiselect, and tree support
+- **DatePicker** - Date selection with range and dual picker modes
+- **TimePicker** - Time selection with range support
+- **Slider** - Range slider with single and dual handle support
+- **FileUploader** - Drag & drop file upload component
+
+### Layout & Navigation
+- **Table** - Feature-rich data table with sorting, pagination, and row actions
+- **TreeNode** - Hierarchical tree component with checkboxes
+- **Tabs** - Tab navigation component
+- **Popup** - Modal and drawer popup system
+- **ActionDropdown** - Context menu dropdown for actions
+
+### Feedback & Status
+- **MainButton** - Primary button component with loading states
+- **InlineLoading** - Loading indicators with success/error states
+- **Skeleton** - Content loading placeholders
+- **NotificationToast** - Toast notification system
+- **Tooltip** - Contextual help tooltips
+
+### Advanced Components
+- **FilterWithTags** - Advanced filtering interface with multiple input types
+- **DropdownPill** - Pill-style dropdown selector
+
+## 📚 Documentation
+
+For detailed documentation, examples, and API references, visit our documentation website:
+
+**🌐 [components.nebi.com](https://components.nebi.com)**
+
+The documentation includes:
+- Interactive component playground
+- Complete API documentation
+- Usage examples and best practices
+- Customization guides
+- Accessibility guidelines
+
+## 🎨 Styling
+
+The library uses SCSS modules for styling. Import the main CSS file to get started:
+
+```tsx
+import 'master-components-react-ts/style.css'
+```
+
+### Customization
+
+Components support extensive customization through props:
+
+```tsx
+<MainButton
+  label="Custom Button"
+  size="lg"
+  colorType="positive"
+  buttonType="secondary"
+  leftSlot={<Icon />}
+  buttonStyle={{ borderRadius: '8px' }}
+/>
+```
+
+## 🔧 TypeScript Support
+
+Full TypeScript support with comprehensive type definitions:
+
+```tsx
+import { 
+  FormInputProps, 
+  TableProps, 
+  DropdownItemType,
+  ColumnType 
+} from 'master-components-react-ts'
+
+interface MyComponentProps {
+  inputProps: FormInputProps
+  tableData: ColumnType[]
+}
+```
+
+## 📋 Component Examples
+
+### Advanced Table with Actions
+
+```tsx
+import { Table, ColumnType } from 'master-components-react-ts'
+
+const columns: ColumnType[] = [
+  { key: 'name', label: 'Name', visible: true },
+  { key: 'email', label: 'Email', visible: true },
+  { 
+    key: 'status', 
+    label: 'Status', 
+    visible: true,
+    render: (row) => (
+      <span className={`status-${row.status}`}>
+        {row.status}
+      </span>
+    )
+  }
+]
+
+<Table
+  uniqueKey="id"
+  columns={columns}
+  data={userData}
+  withSortIcons
+  showPagination
+  withSelectAll
+  actionButtons={[
+    { text: 'Delete', onClick: handleDelete },
+    { text: 'Edit', onClick: handleEdit }
+  ]}
+  onRowClick={handleRowClick}
+/>
+```
+
+### Form with Validation
+
+```tsx
+import { FormInput, MainButton, Checkbox } from 'master-components-react-ts'
+
+<FormInput
+  label="Email Address"
+  placeholder="Enter your email"
+  type="email"
+  required
+  helperText="We'll never share your email"
+  inputState={{ error: hasError }}
+  onChange={setEmail}
+/>
+
+<Checkbox
+  checked={agreeToTerms}
+  change={setAgreeToTerms}
+  label="I agree to the terms and conditions"
+/>
+
+<MainButton
+  label="Submit"
+  buttonType="primary"
+  loading={isSubmitting}
+  disabled={!isFormValid}
+  onClick={handleSubmit}
+/>
+```
+
+### Advanced Dropdown with Search
+
+```tsx
+import { Dropdown, DropdownItemType } from 'master-components-react-ts'
+
+const countryData: DropdownItemType[] = [
+  { id: 1, label: 'United States' },
+  { id: 2, label: 'Canada' },
+  { id: 3, label: 'United Kingdom' }
+]
+
+<Dropdown
+  label="Select Country"
+  placeholder="Choose a country"
+  data={countryData}
+  withInput
+  withMultiselect
+  withApply
+  onSelect={handleCountrySelect}
+  onApply={handleApply}
+/>
+```
+
+## 🎯 Key Features
+
+### Table Component
+- **Sorting** - Click headers to sort data
+- **Pagination** - Numbered and simple pagination styles
+- **Row Selection** - Single and multi-row selection
+- **Row Actions** - Custom actions per row
+- **Column Configuration** - Show/hide and reorder columns
+- **Custom Rendering** - Render custom content in cells
+- **Tooltips** - Row-level tooltips for additional information
+
+### Form Components
+- **Validation States** - Error, success, and loading states
+- **Custom Slots** - Left, right, and helper slots for icons/content
+- **Multiple Input Types** - Text, email, password, number, etc.
+- **Accessibility** - Full keyboard navigation and screen reader support
+
+### Styling System
+- **SCSS Modules** - Scoped styling to prevent conflicts
+- **CSS Custom Properties** - Easy theme customization
+- **Responsive Design** - Mobile-first responsive components
+- **Dark Mode Ready** - Components support dark theme variants
+
+## 🔄 Migration Guide
+
+If you're upgrading from a previous version, check the [migration guide](https://components.nebi.com/migration) on our documentation site.
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [contributing guidelines](https://components.nebi.com/contributing) for details.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🆘 Support
+
+- **Documentation**: [components.nebi.com](https://components.nebi.com)
+- **Issues**: Report bugs and request features on our documentation site
+- **Community**: Join our community discussions
+
+## 🏷️ Version
+
+Current version: **2.5.19**
+
+---
+
+Built with ❤️ for the React community. For the latest updates and announcements, visit [components.nebi.com](https://components.nebi.com).

package/dist/components/TimePicker/TimePicker.d.ts

@@ -1,7 +1,7 @@
 import { TimePickerProps } from './TimePicker.types';
 declare const TimePicker: {
-    ({ value, defaultTimeType, defaultAmPm, withConfirm, mode, closeOnScroll, onChange, onFocus, onBlur, ...rest }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
-    propKeys: readonly ["value", "defaultTimeType", "defaultAmPm", "withConfirm", "mode", "onChange", "onFocus", "onBlur", "closeOnScroll"];
+    ({ value, defaultTimeType, defaultAmPm, withConfirm, closeOnScroll, onChange, onFocus, onBlur, ...rest }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    propKeys: readonly ["value", "defaultTimeType", "defaultAmPm", "withConfirm", "onChange", "onFocus", "onBlur", "closeOnScroll"];
     displayName: string;
     description: string;
 };

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

@@ -3,7 +3,6 @@ export interface TimePickerProps extends FormInputProps {
     withConfirm?: boolean;
     defaultTimeType?: '12' | '24';
     defaultAmPm?: 'AM' | 'PM';
-    mode?: 'single' | 'range';
     closeOnScroll?: boolean;
     onChange?: (value: string) => void;
     onFocus?: () => void;