trung-library 1.0.0

package/README.md

@@ -0,0 +1,264 @@
+# SevaTech 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/)
+[![Storybook](https://img.shields.io/badge/Storybook-8.6-FF69B4.svg)](https://core-sevago.github.io/sevatech-library)
+
+React component library with TypeScript and Material-UI.
+
+📖 **[View Storybook Documentation](https://core-sevago.github.io/sevatech-library)**
+
+---
+
+## 📦 Installation
+
+```bash
+npm install sevatech-library --force
+```
+
+or
+
+```bash
+yarn add sevatech-library
+```
+
+### Peer Dependencies
+
+Ensure you have the following peer dependencies installed:
+
+```json
+{
+  "react": "^18.0.0",
+  "react-dom": "^18.0.0",
+  "@mui/material": "^5.14.0",
+  "@emotion/react": "^11.11.0",
+  "@emotion/styled": "^11.11.0"
+}
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import React, { useState } from 'react';
+import { ButtonComponent, TextFieldComponent, ModalComponent } from 'sevatech-library';
+
+function App() {
+  const [email, setEmail] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <TextFieldComponent
+        label='Email Address'
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+        placeholder='Enter your email'
+        fullWidth
+      />
+
+      <ButtonComponent variant='solid' color='brand' onClick={() => setIsOpen(true)} sx={{ marginTop: 2 }}>
+        Open Modal
+      </ButtonComponent>
+
+      <ModalComponent
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        title='Welcome to SevaTech Library'
+        buttonRight={{
+          children: 'Get Started',
+          onClick: () => setIsOpen(false),
+        }}
+      >
+        <p>Start building amazing user interfaces with our comprehensive component library.</p>
+      </ModalComponent>
+    </div>
+  );
+}
+```
+
+---
+
+### Building Complex Forms
+
+Create forms with validation, error handling, and various input types:
+
+```tsx
+import {
+  TextFieldComponent,
+  DateFieldComponent,
+  DropdownFieldComponent,
+  CheckboxComponent,
+  ButtonComponent,
+} from 'sevatech-library';
+
+// Form with multiple input types
+<TextFieldComponent label='Name' value={name} onChange={setName} />
+<DateFieldComponent label='Birthday' value={date} onChange={setDate} />
+<DropdownFieldComponent options={options} value={selected} onChange={setSelected} />
+<CheckboxComponent label='Agree to terms' checked={agreed} onChange={setAgreed} />
+<ButtonComponent variant='solid' color='brand' onClick={handleSubmit}>
+  Submit
+</ButtonComponent>
+```
+
+### Creating Beautiful UI Components
+
+Use ready-made components to create professional interfaces:
+
+```tsx
+import {
+  AvatarComponent,
+  ChipComponent,
+  TypographyComponent,
+  TooltipComponent,
+} from 'sevatech-library';
+
+// Avatar with fallback
+<AvatarComponent name='John Doe' size='lg' color='brand' />
+
+// Chips with colors
+<ChipComponent label='New' color='success' />
+<ChipComponent label='Important' color='error' />
+
+// Typography with variants
+<TypographyComponent variant='h1'>Main Title</TypographyComponent>
+<TypographyComponent variant='body1'>Body text</TypographyComponent>
+
+// Tooltip
+<TooltipComponent title='Delete item'>
+  <IconButton><DeleteIcon /></IconButton>
+</TooltipComponent>
+```
+
+### Media Integration
+
+Embed videos and handle file uploads:
+
+```tsx
+import { VideoPlayerComponent, UploaderComponent } from 'sevatech-library';
+
+// Video player with YouTube support
+<VideoPlayerComponent
+  src='https://www.youtube.com/watch?v=VIDEO_ID'
+  width={600}
+  height={400}
+/>
+
+// File upload with drag & drop
+<UploaderComponent
+  onFilesSelected={files => console.log('Files:', files)}
+  accept='.jpg,.png,.pdf'
+  maxSize={5 * 1024 * 1024}
+/>
+```
+
+### Customizing Theme
+
+```tsx
+import { ThemeProvider, createTheme } from '@mui/material';
+import { ButtonComponent } from 'sevatech-library';
+
+const theme = createTheme({
+  palette: {
+    brand: {
+      main: '#your-brand-color',
+      light: '#lighter-shade',
+      dark: '#darker-shade',
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", "Roboto", sans-serif',
+  },
+});
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <ButtonComponent variant='solid' color='brand'>
+        Themed Button
+      </ButtonComponent>
+    </ThemeProvider>
+  );
+}
+```
+
+---
+
+## 📚 Components
+
+The library includes 30+ components organized into groups:
+
+- **Form Components**: Button, TextField, TextArea, Checkbox, Switch, Dropdown, Search, Date, Money, Rating, Slider, Picker, CheckboxGroup
+- **Layout Components**: Modal, Tabs, Grid
+- **Data Display**: Avatar, AvatarGroup, Chip, Typography, Tooltip
+- **Navigation**: Breadcrumbs, Link
+- **Utility**: Icon, Image, Uploader
+- **Media**: VideoPlayer
+
+View all components and examples at [Storybook](https://core-sevago.github.io/sevatech-library).
+
+---
+
+## 🛠️ Development
+
+### Setup
+
+```bash
+git clone https://github.com/golden-lotus-core-web/sevatech-library.git
+cd sevatech-library
+npm install
+```
+
+### Scripts
+
+```bash
+npm run dev          # Development server
+npm run build        # Build for production
+npm run storybook    # Run Storybook
+npm run lint         # Lint code
+npm run format       # Format code
+```
+
+---
+
+## 📖 API Reference
+
+All components support these common props:
+
+- `sx`: Material-UI sx prop for custom styling
+- `className`: CSS class name
+- `style`: Inline styles
+- `disabled`: Disable component
+- `loading`: Show loading state
+
+For detailed props of each component, see [Storybook](https://core-sevago.github.io/sevatech-library).
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Please:
+
+1. Fork repository
+2. Tạo feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit changes (`git commit -m 'Add amazing feature'`)
+4. Push to branch (`git push origin feature/amazing-feature`)
+5. Mở Pull Request
+
+---
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 📞 Support
+
+- **Documentation**: [Storybook](https://core-sevago.github.io/sevatech-library)
+- **Issues**: [GitHub Issues](https://github.com/golden-lotus-core-web/sevatech-library/issues)
+
+---
+
+Built with ❤️ by **SevaTech** team

package/dist/components/avatar/avatar-group.component.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { AvatarSize } from './avatar.constant';
+import { AvatarData } from './avatar.interface';
+interface AvatarGroupProps {
+    avatars: AvatarData[];
+    maxDisplay?: number;
+    size?: AvatarSize;
+    border?: boolean;
+    borderColor?: string;
+    borderWidth?: number;
+    onAddClick?: () => void;
+    overlap?: number;
+    icon?: string;
+    sxAvatar?: SxProps<Theme>;
+    sx?: SxProps<Theme>;
+}
+declare const AvatarGroupComponent: React.FC<AvatarGroupProps>;
+export { AvatarGroupComponent };
+//# sourceMappingURL=avatar-group.component.d.ts.map

package/dist/components/avatar/avatar-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-group.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAgB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,UAAU,gBAAgB;IACxB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwFpD,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/avatar/avatar-label-group.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { AvatarComponentProps } from './avatar.interface';
+interface AvatarLabelGroupProps extends AvatarComponentProps {
+    title?: string;
+    description?: string;
+    sxAvatar?: SxProps<Theme>;
+}
+declare const AvatarLabelGroupComponent: React.FC<AvatarLabelGroupProps>;
+export { AvatarLabelGroupComponent };
+//# sourceMappingURL=avatar-label-group.component.d.ts.map

package/dist/components/avatar/avatar-label-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-label-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-label-group.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG1D,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0C9D,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/avatar/avatar-profile.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AvatarComponentProps } from './avatar.interface';
+declare const AvatarProfileComponent: React.FC<AvatarComponentProps>;
+export { AvatarProfileComponent };
+//# sourceMappingURL=avatar-profile.component.d.ts.map

package/dist/components/avatar/avatar-profile.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-profile.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-profile.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyE1D,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/avatar/avatar-user.component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AvatarProps } from '@mui/material';
+interface AvatarUserProps extends Omit<AvatarProps, 'children'> {
+    title?: string;
+    description?: string;
+    descriptionHref?: string;
+    onDescriptionClick?: () => void;
+    titleColor?: string;
+    descriptionColor?: string;
+    url?: string;
+}
+declare const AvatarUserComponent: React.FC<AvatarUserProps>;
+export { AvatarUserComponent };
+//# sourceMappingURL=avatar-user.component.d.ts.map

package/dist/components/avatar/avatar-user.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-user.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-user.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAMzD,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDlD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/avatar/avatar.argtypes.d.ts

@@ -0,0 +1,19 @@
+type ArgType = {
+    control?: any;
+    description?: string;
+    options?: any[];
+    if?: any;
+    table?: {
+        category?: string;
+        defaultValue?: {
+            summary: string;
+        };
+        disable?: boolean;
+    };
+};
+export declare const avatarCoreArgTypes: Record<string, ArgType>;
+export declare const avatarLabelGroupArgTypes: Record<string, ArgType>;
+export declare const avatarGroupArgTypes: Record<string, ArgType>;
+export declare const avatarUserArgTypes: Record<string, ArgType>;
+export {};
+//# sourceMappingURL=avatar.argtypes.d.ts.map

package/dist/components/avatar/avatar.argtypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.argtypes.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.argtypes.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC;QACnC,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAqFtD,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAgB5D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAyDvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAmDtD,CAAC"}

package/dist/components/avatar/avatar.component.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AvatarSize } from './avatar.constant';
+import { AvatarComponentProps } from './avatar.interface';
+export declare const BadgeLive: ({ text, size }: {
+    text?: string;
+    size?: AvatarSize;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeNumber: ({ number, size }: {
+    number: number;
+    size?: AvatarSize;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeOnline: ({ size }: {
+    size?: AvatarSize;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeImage: ({ url, size }: {
+    url: string;
+    size?: AvatarSize;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarComponent: React.FC<AvatarComponentProps>;
+//# sourceMappingURL=avatar.component.d.ts.map

package/dist/components/avatar/avatar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,UAAU,EAIX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,SAAS,GAAI,gBAAgC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,4CAgB7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,kBAAyB;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,4CAoBzF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAiB;IAAE,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,4CAUjE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,eAAsB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,4CAelF,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkD1D,CAAC"}

package/dist/components/avatar/avatar.constant.d.ts

@@ -0,0 +1,35 @@
+import { BadgePositionStyles } from './avatar.interface';
+export declare const AVATAR_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+export declare const BADGE_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+export declare const BADGE_FONT_SIZES: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+export type AvatarSize = keyof typeof AVATAR_SIZES;
+export type BadgePosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export declare const getBadgePosition: (position: BadgePosition) => BadgePositionStyles;
+export declare enum AvatarColor {
+    BACKGROUND_COLOR_BADGE = "#000000",
+    COLOR_BADGE = "#FFFFFF",
+    COLOR_TITLE = "#414651",
+    COLOR_DESCRIPTION = "#535862"
+}
+//# sourceMappingURL=avatar.constant.d.ts.map

package/dist/components/avatar/avatar.constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.constant.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.constant.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC;AACF,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;CAO5B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;AAEvH,eAAO,MAAM,gBAAgB,GAAI,UAAU,aAAa,KAAG,mBAU1D,CAAC;AACF,oBAAY,WAAW;IACrB,sBAAsB,YAAY;IAClC,WAAW,YAAY;IACvB,WAAW,YAAY;IACvB,iBAAiB,YAAY;CAC9B"}

package/dist/components/avatar/avatar.interface.d.ts

@@ -0,0 +1,28 @@
+import { AvatarProps, SxProps, Theme } from '@mui/material';
+import { AvatarSize, BadgePosition } from './avatar.constant';
+import { ImageSizeType } from '../image';
+export interface AvatarData {
+    url?: string;
+    name?: string;
+    id?: string;
+}
+export interface AvatarComponentProps extends Omit<AvatarProps, 'children'> {
+    url?: string;
+    size?: AvatarSize;
+    border?: boolean;
+    borderColor?: string;
+    borderWidth?: number;
+    badge?: React.ReactNode;
+    badgePosition?: BadgePosition;
+    children?: React.ReactNode;
+    sizeType?: ImageSizeType;
+    sxProfile?: SxProps<Theme>;
+}
+export interface BadgePositionStyles {
+    top?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+    right?: string | number;
+    transform?: string;
+}
+//# sourceMappingURL=avatar.interface.d.ts.map

package/dist/components/avatar/avatar.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.interface.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.interface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,8 @@
+export { AvatarComponent, BadgeLive, BadgeNumber, BadgeOnline, BadgeImage } from './avatar.component';
+export { AvatarGroupComponent } from './avatar-group.component';
+export { AvatarLabelGroupComponent } from './avatar-label-group.component';
+export { AvatarProfileComponent } from './avatar-profile.component';
+export { AvatarUserComponent } from './avatar-user.component';
+export * from './avatar.constant';
+export * from './avatar.interface';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/components/bread-crumbs/bread-crumbs.argtypes.d.ts

@@ -0,0 +1,16 @@
+type ArgType = {
+    control?: any;
+    description?: string;
+    options?: any[];
+    table?: {
+        category?: string;
+        defaultValue?: {
+            summary: string;
+        };
+        disable?: boolean;
+    };
+    action?: string;
+};
+export declare const breadCrumbsArgTypes: Record<string, ArgType>;
+export {};
+//# sourceMappingURL=bread-crumbs.argtypes.d.ts.map

package/dist/components/bread-crumbs/bread-crumbs.argtypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bread-crumbs.argtypes.d.ts","sourceRoot":"","sources":["../../../src/components/bread-crumbs/bread-crumbs.argtypes.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC;QACnC,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CA8BvD,CAAC"}

package/dist/components/bread-crumbs/bread-crumbs.component.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+interface BreadcrumbItem {
+    id: string;
+    icon?: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsComponentProps {
+    items: BreadcrumbItem[];
+    separator?: '>' | '/';
+    maxItems?: number;
+    idSelect?: string;
+    sx?: SxProps<Theme>;
+    sxItem?: SxProps<Theme>;
+    onChange?: (id: string) => void;
+}
+declare const BreadcrumbsComponent: React.FC<BreadcrumbsComponentProps>;
+export { BreadcrumbsComponent };
+//# sourceMappingURL=bread-crumbs.component.d.ts.map

package/dist/components/bread-crumbs/bread-crumbs.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bread-crumbs.component.d.ts","sourceRoot":"","sources":["../../../src/components/bread-crumbs/bread-crumbs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAY/C,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,yBAAyB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8G7D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/bread-crumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { BreadcrumbsComponent } from './bread-crumbs.component';
+export * from './bread-crumbs.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/bread-crumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bread-crumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,cAAc,0BAA0B,CAAC"}

package/dist/components/button/button-bar.component.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode, CSSProperties } from 'react';
+type Layout = 'horizontal' | 'vertical';
+interface ButtonBarProps {
+    /** Layout: 'horizontal' (ngang) hoặc 'vertical' (dọc) */
+    layout: Layout;
+    /** Các button bên trong */
+    children: ReactNode;
+    /** Gap giữa các button (px) */
+    gap?: number;
+    /** Custom style cho container */
+    style?: CSSProperties;
+}
+declare const ButtonBarComponent: React.FC<ButtonBarProps>;
+export { ButtonBarComponent };
+//# sourceMappingURL=button-bar.component.d.ts.map

package/dist/components/button/button-bar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-bar.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-bar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAExD,KAAK,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAExC,UAAU,cAAc;IACtB,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAUhD,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/button/button.argtypes.d.ts

@@ -0,0 +1,16 @@
+type ArgType = {
+    control?: any;
+    description?: string;
+    options?: any[];
+    table?: {
+        category?: string;
+        defaultValue?: {
+            summary: string;
+        };
+        disable?: boolean;
+    };
+    action?: string;
+};
+export declare const buttonArgTypes: Record<string, ArgType>;
+export {};
+//# sourceMappingURL=button.argtypes.d.ts.map

package/dist/components/button/button.argtypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.argtypes.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.argtypes.ts"],"names":[],"mappings":"AAGA,KAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC;QACnC,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAOF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAyFlD,CAAC"}

package/dist/components/button/button.component.d.ts

@@ -0,0 +1,37 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { Variant, Color, Size } from './button.constants';
+export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'color' | 'size' | 'prefix' | 'suffix'> {
+    /** Kiểu hiển thị: solid (đầy), outline (viền), ghost (nền nhạt), text (chỉ chữ) */
+    variant?: Variant;
+    /** Màu sắc: brand, neutral, error, warning, success, accent, info */
+    color?: Color;
+    /** Shade của màu: light (100), main (500), dark (700) hoặc number (50-950) */
+    shade?: 'light' | 'main' | 'dark' | number;
+    /** Kích cỡ: xs, sm, md, lg, xl */
+    size?: Size;
+    /** Icon hoặc element hiển thị trước nội dung (ReactNode) */
+    prefix?: ReactNode;
+    /** Icon hoặc element hiển thị sau nội dung (ReactNode) */
+    suffix?: ReactNode;
+    /** Tên icon Material hiển thị trước (string) - ưu tiên hơn prefix */
+    prefixIcon?: string;
+    /** Tên icon Material hiển thị sau (string) - ưu tiên hơn suffix */
+    suffixIcon?: string;
+    /** Style CSS cho icon (áp dụng cho prefixIcon/suffixIcon) */
+    iconStyle?: CSSProperties;
+    /** Trạng thái loading - hiển thị spinner */
+    loading?: boolean;
+    /** Nội dung button */
+    children?: ReactNode;
+    /** Button chiếm full width container */
+    fullWidth?: boolean;
+    /** Vô hiệu hóa button */
+    disabled?: boolean;
+    /** Hiển thị dot nhỏ trước text để đánh dấu trạng thái active */
+    active?: boolean;
+    /** Màu của dot khi active (mặc định: #10b981 - xanh lá) */
+    activeDotColor?: string;
+}
+export declare const ButtonComponent: React.FC<ButtonProps>;
+//# sourceMappingURL=button.component.d.ts.map

package/dist/components/button/button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAuB,WAAW,IAAI,cAAc,EAAoB,MAAM,eAAe,CAAC;AACrG,OAAO,EACL,OAAO,EACP,KAAK,EAEL,IAAI,EAML,MAAM,oBAAoB,CAAC;AAwE5B,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3G,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,kCAAkC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmFjD,CAAC"}

package/dist/components/button/button.constants.d.ts

@@ -0,0 +1,33 @@
+/** Button component type definitions */
+export type Variant = 'solid' | 'outline' | 'ghost' | 'text';
+export type Color = 'brand' | 'neutral' | 'error' | 'warning' | 'success' | 'accent' | 'info';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ShadeType = 'light' | 'main' | 'dark';
+/** Shade values mapping */
+export declare const SHADE_VALUES: Record<ShadeType, number>;
+/** Button size configuration */
+export declare const SIZES: Record<Size, {
+    padding: string;
+    fontSize: string;
+    height: string;
+    width?: string;
+}>;
+/** Color palette mapping */
+export declare const COLORS: Record<Color, Record<number, string>>;
+/** Button UI constants */
+export declare const BUTTON_CONSTANTS: {
+    readonly ACTIVE_DOT_SIZE: 8;
+    readonly ACTIVE_DOT_MARGIN_RIGHT: 8;
+    readonly SPINNER_SIZE: 16;
+    readonly GAP: 12;
+    readonly BORDER_RADIUS: 8;
+    readonly TRANSITION_DURATION: "0.3s";
+};
+/** Accessibility constants */
+export declare const ACCESSIBILITY: {
+    readonly HOVER_TRANSLATE_Y: "-2px";
+    readonly ACTIVE_TRANSLATE_Y: "0";
+    readonly BOX_SHADOW: "0 4px 12px rgba(0, 0, 0, 0.15)";
+    readonly FOCUS_OFFSET: "2px";
+};
+//# sourceMappingURL=button.constants.d.ts.map

package/dist/components/button/button.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.constants.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.constants.ts"],"names":[],"mappings":"AAUA,wCAAwC;AACxC,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9F,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,2BAA2B;AAC3B,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIzC,CAAC;AAEX,gCAAgC;AAChC,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAM5F,CAAC;AAEX,4BAA4B;AAC5B,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQxD,CAAC;AAEF,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB;;;;;;;CAOnB,CAAC;AAEX,8BAA8B;AAC9B,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC"}