sevatech-library 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
-# SevagoTech Library
+# SevaTech Library
 
-[![npm version](https://badge.fury.io/js/sevagotech-library.svg)](https://badge.fury.io/js/sevagotech-library)
+[![npm version](https://badge.fury.io/js/SevaTech-library.svg)](https://badge.fury.io/js/SevaTech-library)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
 
@@ -19,13 +19,13 @@ A comprehensive, production-ready React component library built with TypeScript,
 ## 📦 Installation
 
 ```bash
-npm install sevagotech-library
+npm i sevatech-library --force
 ```
 
 or
 
 ```bash
-yarn add sevagotech-library
+yarn add sevatech-library
 ```
 
 ### Peer Dependencies
@@ -46,7 +46,7 @@ Ensure you have the following peer dependencies installed:
 
 ```tsx
 import React, { useState } from 'react';
-import { ButtonComponent, TextFieldComponent, ModalComponent } from 'sevagotech-library';
+import { ButtonComponent, TextFieldComponent, ModalComponent } from 'SevaTech-library';
 
 function App() {
   const [email, setEmail] = useState('');
@@ -74,7 +74,7 @@ function App() {
       <ModalComponent
         open={isOpen}
         onClose={() => setIsOpen(false)}
-        title="Welcome to SevagoTech Library"
+        title="Welcome to SevaTech Library"
         buttonRight={{
           children: 'Get Started',
           onClick: () => setIsOpen(false)
@@ -98,7 +98,7 @@ export default App;
 A versatile button component supporting multiple variants, colors, sizes, and icon integration.
 
 ```tsx
-import { ButtonComponent } from 'sevagotech-library';
+import { ButtonComponent } from 'SevaTech-library';
 
 // Basic usage
 <ButtonComponent variant="solid" color="brand" onClick={handleClick}>
@@ -125,7 +125,7 @@ import { ButtonComponent } from 'sevagotech-library';
 Advanced input field with validation states, icons, and accessibility features.
 
 ```tsx
-import { TextFieldComponent } from 'sevagotech-library';
+import { TextFieldComponent } from 'SevaTech-library';
 
 const [value, setValue] = useState('');
 
@@ -159,7 +159,7 @@ const [value, setValue] = useState('');
 Multi-line text input with customizable rows and validation.
 
 ```tsx
-import { TextAreaComponent } from 'sevagotech-library';
+import { TextAreaComponent } from 'SevaTech-library';
 
 const [description, setDescription] = useState('');
 
@@ -178,7 +178,7 @@ const [description, setDescription] = useState('');
 Custom-styled checkbox with label support.
 
 ```tsx
-import { CheckboxComponent } from 'sevagotech-library';
+import { CheckboxComponent } from 'SevaTech-library';
 
 const [agreed, setAgreed] = useState(false);
 
@@ -194,7 +194,7 @@ const [agreed, setAgreed] = useState(false);
 Toggle switch with smooth animations.
 
 ```tsx
-import { SwitchComponent } from 'sevagotech-library';
+import { SwitchComponent } from 'SevaTech-library';
 
 const [notifications, setNotifications] = useState(true);
 
@@ -210,7 +210,7 @@ const [notifications, setNotifications] = useState(true);
 Select dropdown with search and multi-select capabilities.
 
 ```tsx
-import { DropdownFieldComponent } from 'sevagotech-library';
+import { DropdownFieldComponent } from 'SevaTech-library';
 
 const options = [
   { label: 'Option 1', value: '1' },
@@ -232,7 +232,7 @@ const options = [
 Debounced search input with clear functionality.
 
 ```tsx
-import { SearchFieldComponent } from 'sevagotech-library';
+import { SearchFieldComponent } from 'SevaTech-library';
 
 const [searchTerm, setSearchTerm] = useState('');
 
@@ -250,7 +250,7 @@ const [searchTerm, setSearchTerm] = useState('');
 Date picker with customizable format and locale support.
 
 ```tsx
-import { DateFieldComponent } from 'sevagotech-library';
+import { DateFieldComponent } from 'SevaTech-library';
 import dayjs from 'dayjs';
 
 const [selectedDate, setSelectedDate] = useState(dayjs());
@@ -268,7 +268,7 @@ const [selectedDate, setSelectedDate] = useState(dayjs());
 Currency input with automatic formatting.
 
 ```tsx
-import { MoneyFieldComponent } from 'sevagotech-library';
+import { MoneyFieldComponent } from 'SevaTech-library';
 
 const [price, setPrice] = useState('');
 
@@ -288,7 +288,7 @@ const [price, setPrice] = useState('');
 Flexible modal dialog with customizable actions and content.
 
 ```tsx
-import { ModalComponent } from 'sevagotech-library';
+import { ModalComponent } from 'SevaTech-library';
 
 <ModalComponent
   open={isOpen}
@@ -310,7 +310,7 @@ import { ModalComponent } from 'sevagotech-library';
 Animated tabbed interface with icon support.
 
 ```tsx
-import { TabsComponent } from 'sevagotech-library';
+import { TabsComponent } from 'SevaTech-library';
 
 const tabs = [
   { id: 'tab1', name: 'Home', icon: 'home' },
@@ -330,7 +330,7 @@ const tabs = [
 Responsive grid system based on Material-UI's Grid.
 
 ```tsx
-import { Grid } from 'sevagotech-library';
+import { Grid } from 'SevaTech-library';
 
 <Grid container spacing={2}>
   <Grid item xs={12} sm={6} md={4}>
@@ -352,7 +352,7 @@ import { Grid } from 'sevagotech-library';
 User avatar with image and fallback support.
 
 ```tsx
-import { AvatarComponent } from 'sevagotech-library';
+import { AvatarComponent } from 'SevaTech-library';
 
 <AvatarComponent
   url="https://example.com/avatar.jpg"
@@ -372,7 +372,7 @@ import { AvatarComponent } from 'sevagotech-library';
 Grouped avatars with overflow indicators.
 
 ```tsx
-import { AvatarGroupComponent } from 'sevagotech-library';
+import { AvatarGroupComponent } from 'SevaTech-library';
 
 const avatars = [
   { id: '1', url: 'avatar1.jpg', name: 'User 1' },
@@ -391,7 +391,7 @@ const avatars = [
 Compact information display with optional delete action.
 
 ```tsx
-import { ChipComponent } from 'sevagotech-library';
+import { ChipComponent } from 'SevaTech-library';
 
 <ChipComponent label="New" color="success" />
 <ChipComponent label="Important" color="error" variant="outlined" />
@@ -406,7 +406,7 @@ import { ChipComponent } from 'sevagotech-library';
 Text styling with semantic variants.
 
 ```tsx
-import { TypographyComponent } from 'sevagotech-library';
+import { TypographyComponent } from 'SevaTech-library';
 
 <TypographyComponent variant="h1">Main Heading</TypographyComponent>
 <TypographyComponent variant="body1">
@@ -424,7 +424,7 @@ import { TypographyComponent } from 'sevagotech-library';
 Breadcrumb navigation with customizable separators.
 
 ```tsx
-import { BreadCumbsComponent } from 'sevagotech-library';
+import { BreadCumbsComponent } from 'SevaTech-library';
 
 const breadcrumbs = [
   { label: 'Home', href: '/' },
@@ -440,7 +440,7 @@ const breadcrumbs = [
 Styled navigation link with external link support.
 
 ```tsx
-import { LinkElement } from 'sevagotech-library';
+import { LinkElement } from 'SevaTech-library';
 
 <LinkElement href="/dashboard">Go to Dashboard</LinkElement>
 <LinkElement href="https://example.com" external>
@@ -455,7 +455,7 @@ import { LinkElement } from 'sevagotech-library';
 Material Icons integration with size and color options.
 
 ```tsx
-import { IconElement } from 'sevagotech-library';
+import { IconElement } from 'SevaTech-library';
 
 <IconElement icon="home" />
 <IconElement icon="search" size="large" />
@@ -467,7 +467,7 @@ import { IconElement } from 'sevagotech-library';
 Optimized image component with lazy loading and fallbacks.
 
 ```tsx
-import { ImageElement } from 'sevagotech-library';
+import { ImageElement } from 'SevaTech-library';
 
 <ImageElement
   url="https://example.com/image.jpg"
@@ -481,7 +481,7 @@ import { ImageElement } from 'sevagotech-library';
 File upload with drag-and-drop and progress tracking.
 
 ```tsx
-import { UploaderComponent } from 'sevagotech-library';
+import { UploaderComponent } from 'SevaTech-library';
 
 <UploaderComponent
   onFilesSelected={(files) => {
@@ -503,8 +503,8 @@ import { UploaderComponent } from 'sevagotech-library';
 
 1. Clone the repository:
 ```bash
-git clone https://github.com/your-username/sevagotech-library.git
-cd sevagotech-library
+git clone https://github.com/your-username/sevatech-library.git
+cd sevatech-library
 ```
 
 2. Install dependencies:
@@ -543,12 +543,12 @@ npm run types
 
 ## 🎨 Theming
 
-SevagoTech Library uses Material-UI's powerful theming system. Customize the theme to match your brand:
+SevaTech Library uses Material-UI's powerful theming system. Customize the theme to match your brand:
 
 ```tsx
 import React from 'react';
 import { ThemeProvider, createTheme } from '@mui/material';
-import { ButtonComponent } from 'sevagotech-library';
+import { ButtonComponent } from 'SevaTech-library';
 
 const theme = createTheme({
   palette: {
@@ -647,7 +647,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 ## 📞 Support
 
 - 📧 Email: 
-- 🐛 Issues: [GitHub Issues](https://github.com/your-username/sevagotech-library/issues)
+- 🐛 Issues: [GitHub Issues](https://github.com/your-username/SevaTech-library/issues)
 - 📚 Documentation: [Full Documentation](https://github.com/golden-lotus-core-web/sevatech-library)
 
 ---

package/dist/cjs/index.js

@@ -1530,6 +1530,46 @@ const CheckboxComponent = ({ checked = false, disabled = false, shape = 'square'
                 }, children: title })] }));
 };
 
+const CONTENT_TYPO = {
+    small: {
+        titleFontSize: 14,
+        titleFontWeight: 500,
+        contentFontSize: 14,
+        lineHeight: '20px',
+    },
+    medium: {
+        titleFontSize: 16,
+        titleFontWeight: 600,
+        contentFontSize: 16,
+        lineHeight: '24px',
+    },
+};
+const CheckboxContentComponent = ({ checked = false, disabled = false, title, content, size = 'medium', variant = 'filled', shape = 'square', iconType = 'check', onChange, sxCheckbox, sxLabel, sx, }) => {
+    const typo = CONTENT_TYPO[size];
+    const handleToggle = () => {
+        if (!disabled) {
+            onChange?.(!checked);
+        }
+    };
+    return (jsxRuntime.jsxs(material.Box, { onClick: handleToggle, sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: '12px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            width: 'fit-content',
+            ...sx,
+        }, children: [jsxRuntime.jsx(CheckboxComponent, { checked: checked, disabled: disabled, size: size, variant: variant, shape: shape, iconType: iconType, onChange: onChange, sxCheckbox: sxCheckbox }), jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { fontSize: typo.titleFontSize, fontWeight: typo.titleFontWeight, lineHeight: typo.lineHeight, sx: {
+                            userSelect: 'none',
+                            ...(disabled && { opacity: 0.6 }),
+                            ...sxLabel,
+                        }, children: title }), content && (jsxRuntime.jsx(material.Typography, { fontSize: typo.contentFontSize, lineHeight: typo.lineHeight, sx: {
+                            mt: '4px',
+                            userSelect: 'none',
+                            ...(disabled && { opacity: 0.6 }),
+                            ...sxLabel,
+                        }, children: content }))] })] }));
+};
+
 const CHIP_LABEL_PADDING = {
     WITH_ICON_LEFT: '4px 8px 4px 4px',
     WITH_ICON_RIGHT: '4px 4px 4px 8px',
@@ -3500,18 +3540,18 @@ const UploaderComponent = ({ onFilesSelected, accept = '*', multiple = true, chi
 
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.AvatarComponent = AvatarComponent;
-exports.AvatarGroup = AvatarGroupComponent;
-exports.AvatarLabelGroup = AvatarLabelGroupComponent;
-exports.AvatarProfile = AvatarProfileComponent;
-exports.AvatarUser = AvatarUserComponent;
+exports.AvatarGroupComponent = AvatarGroupComponent;
+exports.AvatarLabelGroupComponent = AvatarLabelGroupComponent;
+exports.AvatarProfileComponent = AvatarProfileComponent;
+exports.AvatarUserComponent = AvatarUserComponent;
 exports.BADGE_FONT_SIZES = BADGE_FONT_SIZES;
 exports.BADGE_SIZES = BADGE_SIZES;
 exports.BadgeImage = BadgeImage;
 exports.BadgeLive = BadgeLive;
 exports.BadgeNumber = BadgeNumber;
 exports.BadgeOnline = BadgeOnline;
-exports.Breadcrumbs = BreadcrumbsComponent;
-exports.ButtonBar = ButtonBarComponent;
+exports.BreadcrumbsComponent = BreadcrumbsComponent;
+exports.ButtonBarComponent = ButtonBarComponent;
 exports.ButtonComponent = ButtonComponent;
 exports.COLOR_ACCENT = COLOR_ACCENT;
 exports.COLOR_BRAND = COLOR_BRAND;
@@ -3521,23 +3561,24 @@ exports.COLOR_INFO = COLOR_INFO;
 exports.COLOR_NEUTRAL = COLOR_NEUTRAL;
 exports.COLOR_SUCCESS = COLOR_SUCCESS;
 exports.COLOR_WARNING = COLOR_WARNING;
-exports.Checkbox = CheckboxComponent;
-exports.Chip = ChipComponent;
-exports.DateField = DateFieldComponent;
-exports.DateRangePicker = DateRangePickerComponent;
+exports.CheckboxComponent = CheckboxComponent;
+exports.CheckboxContentComponent = CheckboxContentComponent;
+exports.ChipComponent = ChipComponent;
+exports.DateFieldComponent = DateFieldComponent;
+exports.DateRangePickerComponent = DateRangePickerComponent;
 exports.DialogWrapper = DialogWrapper;
-exports.DropdownField = DropdownFieldComponent;
+exports.DropdownFieldComponent = DropdownFieldComponent;
 exports.FONT_FAMILY = FONT_FAMILY;
 exports.FONT_SIZE = FONT_SIZE;
 exports.FONT_STYLE = FONT_STYLE;
 exports.FONT_WEIGHT = FONT_WEIGHT;
-exports.Grid = GridComponent;
+exports.GridComponent = GridComponent;
 exports.IconElement = IconElement;
 exports.ImageElement = ImageElement;
-exports.InputStepper = InputStepperComponent;
+exports.InputStepperComponent = InputStepperComponent;
 exports.LINE_HEIGHT = LINE_HEIGHT;
 exports.LinkElement = LinkElement;
-exports.LinkField = LinkFieldComponent;
+exports.LinkFieldComponent = LinkFieldComponent;
 exports.LinkInternalElement = LinkInternalElement;
 exports.MAP_SIZE = MAP_SIZE;
 exports.Modal = ModalComponent;
@@ -3545,21 +3586,21 @@ exports.ModalCard = ModalCardComponent;
 exports.ModalDescription = ModalDescription;
 exports.ModalIcon = ModalIcon;
 exports.ModalTitle = ModalTitle;
-exports.MoneyField = MoneyFieldComponent;
-exports.PIN = PINComponent;
-exports.PhoneField = PhoneNumberFieldComponent;
+exports.MoneyFieldComponent = MoneyFieldComponent;
+exports.PINComponent = PINComponent;
+exports.PhoneNumberFieldComponent = PhoneNumberFieldComponent;
 exports.SIZE_EXTRA_LARGE = SIZE_EXTRA_LARGE;
 exports.STYLE = style_constant;
-exports.SearchDropdown = SearchDropdownComponent;
-exports.SearchField = SearchFieldComponent;
-exports.Switch = SwitchComponent;
+exports.SearchDropdownComponent = SearchDropdownComponent;
+exports.SearchFieldComponent = SearchFieldComponent;
+exports.SwitchComponent = SwitchComponent;
 exports.TYPOGRAPHY = TYPOGRAPHY;
 exports.TYPOGRAPHY_STYLES = TYPOGRAPHY_STYLES;
-exports.Tabs = TabsComponent;
-exports.TextArea = TextAreaComponent;
-exports.TextField = TextFieldComponent;
+exports.TabsComponent = TabsComponent;
+exports.TextAreaComponent = TextAreaComponent;
+exports.TextFieldComponent = TextFieldComponent;
 exports.TypographyOneLine = TypographyOneLine;
-exports.Uploader = UploaderComponent;
+exports.UploaderComponent = UploaderComponent;
 exports.createTypography = createTypography;
 exports.getBadgePosition = getBadgePosition;
 //# sourceMappingURL=index.js.map