@erpsquad/common 1.8.81 → 1.8.82

package/src/styles/README.md

@@ -1,287 +1,287 @@
-# ERP UI Library - Styles
-
-This directory contains all the SCSS/CSS styles for the ERP UI Library.
-
-## Structure
-
-```
-styles/
-├── sass/                  # Core SCSS files
-│   ├── _variables.scss   # Color palette, fonts, and design tokens
-│   ├── _mixins.scss      # Reusable SCSS mixins (flexbox, media queries, etc.)
-│   ├── _utils.scss       # Utility classes (spacing, layout, typography)
-│   ├── _animations.scss  # Keyframe animations
-│   └── main.scss         # Main entry point that imports all core files
-├── css/
-│   └── reset.css         # CSS reset (imports normalize.css)
-├── variables.scss        # Export file for variables
-├── mixins.scss          # Export file for mixins
-├── utils.scss           # Export file for utilities
-├── animations.scss      # Export file for animations
-├── all.scss             # Export file for all SCSS features
-└── index.ts             # TypeScript entry point that bundles all styles
-```
-
-## Usage in Consuming Applications
-
-### 1. Import Compiled CSS
-
-The simplest way to use the library styles:
-
-```typescript
-// In your main application file (e.g., main.tsx or App.tsx)
-import '@erpforce/common/style.css';
-```
-
-This imports the complete bundled CSS with all component styles and utilities.
-
-### 2. Use SCSS Variables in Your Application
-
-If you want to use the same design tokens (colors, fonts, etc.) in your SCSS files:
-
-```scss
-// In your .scss file
-@import '@erpforce/common/styles/variables';
-
-.my-component {
-  background-color: $primary-500;
-  color: $neutral-900;
-  font-family: $main_font;
-}
-```
-
-### 3. Use SCSS Mixins
-
-Access responsive breakpoints and other mixins:
-
-```scss
-// In your .scss file
-@import '@erpforce/common/styles/mixins';
-
-.my-responsive-component {
-  display: flex;
-  
-  @include media-md {
-    flex-direction: column;
-  }
-  
-  @include flex(center, space-between, row);
-}
-```
-
-### 4. Use Utility Classes
-
-The library includes Bootstrap-like utility classes:
-
-```scss
-// In your .scss file
-@import '@erpforce/common/styles/utils';
-```
-
-Then in your JSX:
-
-```tsx
-<div className="d-flex justify-content-center align-items-center mb-2">
-  <span className="s2 bold">Hello World</span>
-</div>
-```
-
-### 5. Use Animations
-
-Access predefined animations:
-
-```scss
-// In your .scss file
-@import '@erpforce/common/styles/animations';
-
-.my-animated-element {
-  animation: textfadein 0.3s ease-in;
-}
-```
-
-### 6. Import Everything
-
-If you need access to all SCSS features:
-
-```scss
-// In your .scss file
-@import '@erpforce/common/styles/all';
-```
-
-## Available Design Tokens
-
-### Color Palette
-
-- **Primary Colors**: `$primary-100` to `$primary-1000`
-- **Green Colors**: `$green-100` to `$green-1000`
-- **Light Green**: `$lightGreen-100` to `$lightGreen-1000`
-- **Olive**: `$olive-100` to `$olive-1000`
-- **Magenta**: `$magenta-100` to `$magenta-1000`
-- **Blue**: `$blue-100` to `$blue-1000`
-- **Neutral**: `$neutral-100` to `$neutral-1000`
-- **Red**: `$red-100` to `$red-1000`
-- **Error**: `$error-100` to `$error-1000`
-
-### Typography
-
-- **Fonts**: `$main_font`, `$secondary_font`, `$tertiary_font`
-
-## Available Mixins
-
-### Flexbox
-
-```scss
-@include flex($align, $justify, $direction);
-```
-
-### Transitions
-
-```scss
-@include transition($time, $motion);
-```
-
-### Animations
-
-```scss
-@include animate($time, $motion, $delay, $count, $direction, $fillmode, $state, $name);
-```
-
-### Center Element
-
-```scss
-@include center; // Absolutely centers element
-```
-
-### Disable Scrollbar
-
-```scss
-@include disableScroll;
-```
-
-### Responsive Breakpoints
-
-- `@include media-xss` - max-width: 320px
-- `@include media-ss` - max-width: 360px
-- `@include media-sm` - max-width: 395px
-- `@include media-sl` - max-width: 450px
-- `@include media-md` - max-width: 812px
-- `@include media-ml` - max-width: 1112px
-- `@include media-l` - max-width: 1440px
-- `@include media-xl` - max-width: 1600px
-- `@include media-xxl` - max-width: 1920px
-
-## Utility Classes
-
-### Spacing
-
-**Padding:**
-- `.p-0`, `.pt-0`, `.pb-0`, `.pl-0`, `.pr-0` (0px)
-- `.pt-1`, `.pb-1`, `.pl-1`, `.pr-1` (0.625rem / 10px)
-- `.pb-2`, `.pr-2`, `.pl-2` (1.25rem / 20px)
-
-**Margin:**
-- `.m-0`, `.mt-0`, `.mb-0`, `.ml-0`, `.mr-0` (0px)
-- `.mt-1`, `.mb-1`, `.ml-1`, `.mr-1` (0.625rem / 10px)
-- `.mt-2`, `.mb-2`, `.mr-2` (1.25rem / 20px)
-
-### Display & Flexbox
-
-- `.d-flex` - display: flex
-- `.justify-content-center`, `.jc-start`, `.jc-end`, `.jc-space-between`
-- `.align-items-center`, `.ai-start`, `.ai-center`
-- `.flex-direction-column`, `.fd-col`, `.fd-column`
-
-### Text Alignment
-
-- `.text-center`
-- `.text-left`
-- `.text-right`
-
-### Width & Height
-
-- `.w-25`, `.w-40`, `.w-50`, `.w-60`, `.w-100`
-- `.h-100`, `.vh-100`
-
-### Grid System
-
-- `.row`
-- `.col`, `.col-3`, `.col-4`, `.col-5`, `.col-6`, `.col-7`, `.col-8`, `.col-9`
-
-### Typography
-
-**Headings:**
-- `.h1` (1.75rem / 28px)
-- `.h2` (1.5rem / 24px)
-- `.h3` (1.25rem / 20px)
-- `.h4` (1.125rem / 18px)
-- `.h5` (1rem / 16px)
-
-**Body Text:**
-- `.s1` (1.125rem / 18px)
-- `.s2` (1rem / 16px)
-- `.s3` (0.875rem / 14px)
-- `.s4` (0.8125rem / 13px)
-- `.s5` (0.75rem / 12px)
-
-**Font Weight:**
-- `.normal` (400)
-- `.medium` (500)
-- `.bold` (600)
-
-### States
-
-- `.edisabled` - Makes element non-interactive with reduced opacity
-
-## Animations
-
-Available keyframe animations:
-
-- `cardswipe`, `cardreverseswipe`
-- `cardrotate`, `cardreverserotate`
-- `tabletreversemoveup`
-- `textfadein`
-- `navbarexpand`, `navbarshrink`
-
-Usage example:
-
-```scss
-.my-element {
-  animation: textfadein 0.5s ease-out;
-}
-```
-
-## Best Practices
-
-1. **Import Only What You Need**: Instead of importing `all.scss`, import specific files to reduce bundle size
-2. **Use Utility Classes**: Leverage the utility classes for quick styling instead of writing custom CSS
-3. **Follow Design System**: Use the provided color tokens and typography scale for consistency
-4. **Responsive Design**: Use the provided media query mixins for consistent breakpoints
-5. **Component-Specific Styles**: Keep component-specific styles in their respective component files
-
-## Development
-
-When adding new styles:
-
-1. Add shared variables to `sass/_variables.scss`
-2. Add reusable mixins to `sass/_mixins.scss`
-3. Add utility classes to `sass/_utils.scss`
-4. Add animations to `sass/_animations.scss`
-5. Component-specific styles go in their respective component folders
-6. Update `index.ts` if adding new component style files
-
-## Build Process
-
-The styles are processed during the build:
-
-1. SCSS files are compiled to CSS
-2. All component styles are bundled together
-3. A single `style.css` file is output to `dist/`
-4. Individual SCSS files remain available for import in consuming applications
-
-## Notes
-
-- The library uses `normalize.css` for consistent cross-browser styling
-- All SCSS files use the Dart Sass syntax
-- Media queries are mobile-first where applicable
-- Colors follow a 100-1000 scale for consistent gradation
-
+# ERP UI Library - Styles
+
+This directory contains all the SCSS/CSS styles for the ERP UI Library.
+
+## Structure
+
+```
+styles/
+├── sass/                  # Core SCSS files
+│   ├── _variables.scss   # Color palette, fonts, and design tokens
+│   ├── _mixins.scss      # Reusable SCSS mixins (flexbox, media queries, etc.)
+│   ├── _utils.scss       # Utility classes (spacing, layout, typography)
+│   ├── _animations.scss  # Keyframe animations
+│   └── main.scss         # Main entry point that imports all core files
+├── css/
+│   └── reset.css         # CSS reset (imports normalize.css)
+├── variables.scss        # Export file for variables
+├── mixins.scss          # Export file for mixins
+├── utils.scss           # Export file for utilities
+├── animations.scss      # Export file for animations
+├── all.scss             # Export file for all SCSS features
+└── index.ts             # TypeScript entry point that bundles all styles
+```
+
+## Usage in Consuming Applications
+
+### 1. Import Compiled CSS
+
+The simplest way to use the library styles:
+
+```typescript
+// In your main application file (e.g., main.tsx or App.tsx)
+import '@erpforce/common/style.css';
+```
+
+This imports the complete bundled CSS with all component styles and utilities.
+
+### 2. Use SCSS Variables in Your Application
+
+If you want to use the same design tokens (colors, fonts, etc.) in your SCSS files:
+
+```scss
+// In your .scss file
+@import '@erpforce/common/styles/variables';
+
+.my-component {
+  background-color: $primary-500;
+  color: $neutral-900;
+  font-family: $main_font;
+}
+```
+
+### 3. Use SCSS Mixins
+
+Access responsive breakpoints and other mixins:
+
+```scss
+// In your .scss file
+@import '@erpforce/common/styles/mixins';
+
+.my-responsive-component {
+  display: flex;
+  
+  @include media-md {
+    flex-direction: column;
+  }
+  
+  @include flex(center, space-between, row);
+}
+```
+
+### 4. Use Utility Classes
+
+The library includes Bootstrap-like utility classes:
+
+```scss
+// In your .scss file
+@import '@erpforce/common/styles/utils';
+```
+
+Then in your JSX:
+
+```tsx
+<div className="d-flex justify-content-center align-items-center mb-2">
+  <span className="s2 bold">Hello World</span>
+</div>
+```
+
+### 5. Use Animations
+
+Access predefined animations:
+
+```scss
+// In your .scss file
+@import '@erpforce/common/styles/animations';
+
+.my-animated-element {
+  animation: textfadein 0.3s ease-in;
+}
+```
+
+### 6. Import Everything
+
+If you need access to all SCSS features:
+
+```scss
+// In your .scss file
+@import '@erpforce/common/styles/all';
+```
+
+## Available Design Tokens
+
+### Color Palette
+
+- **Primary Colors**: `$primary-100` to `$primary-1000`
+- **Green Colors**: `$green-100` to `$green-1000`
+- **Light Green**: `$lightGreen-100` to `$lightGreen-1000`
+- **Olive**: `$olive-100` to `$olive-1000`
+- **Magenta**: `$magenta-100` to `$magenta-1000`
+- **Blue**: `$blue-100` to `$blue-1000`
+- **Neutral**: `$neutral-100` to `$neutral-1000`
+- **Red**: `$red-100` to `$red-1000`
+- **Error**: `$error-100` to `$error-1000`
+
+### Typography
+
+- **Fonts**: `$main_font`, `$secondary_font`, `$tertiary_font`
+
+## Available Mixins
+
+### Flexbox
+
+```scss
+@include flex($align, $justify, $direction);
+```
+
+### Transitions
+
+```scss
+@include transition($time, $motion);
+```
+
+### Animations
+
+```scss
+@include animate($time, $motion, $delay, $count, $direction, $fillmode, $state, $name);
+```
+
+### Center Element
+
+```scss
+@include center; // Absolutely centers element
+```
+
+### Disable Scrollbar
+
+```scss
+@include disableScroll;
+```
+
+### Responsive Breakpoints
+
+- `@include media-xss` - max-width: 320px
+- `@include media-ss` - max-width: 360px
+- `@include media-sm` - max-width: 395px
+- `@include media-sl` - max-width: 450px
+- `@include media-md` - max-width: 812px
+- `@include media-ml` - max-width: 1112px
+- `@include media-l` - max-width: 1440px
+- `@include media-xl` - max-width: 1600px
+- `@include media-xxl` - max-width: 1920px
+
+## Utility Classes
+
+### Spacing
+
+**Padding:**
+- `.p-0`, `.pt-0`, `.pb-0`, `.pl-0`, `.pr-0` (0px)
+- `.pt-1`, `.pb-1`, `.pl-1`, `.pr-1` (0.625rem / 10px)
+- `.pb-2`, `.pr-2`, `.pl-2` (1.25rem / 20px)
+
+**Margin:**
+- `.m-0`, `.mt-0`, `.mb-0`, `.ml-0`, `.mr-0` (0px)
+- `.mt-1`, `.mb-1`, `.ml-1`, `.mr-1` (0.625rem / 10px)
+- `.mt-2`, `.mb-2`, `.mr-2` (1.25rem / 20px)
+
+### Display & Flexbox
+
+- `.d-flex` - display: flex
+- `.justify-content-center`, `.jc-start`, `.jc-end`, `.jc-space-between`
+- `.align-items-center`, `.ai-start`, `.ai-center`
+- `.flex-direction-column`, `.fd-col`, `.fd-column`
+
+### Text Alignment
+
+- `.text-center`
+- `.text-left`
+- `.text-right`
+
+### Width & Height
+
+- `.w-25`, `.w-40`, `.w-50`, `.w-60`, `.w-100`
+- `.h-100`, `.vh-100`
+
+### Grid System
+
+- `.row`
+- `.col`, `.col-3`, `.col-4`, `.col-5`, `.col-6`, `.col-7`, `.col-8`, `.col-9`
+
+### Typography
+
+**Headings:**
+- `.h1` (1.75rem / 28px)
+- `.h2` (1.5rem / 24px)
+- `.h3` (1.25rem / 20px)
+- `.h4` (1.125rem / 18px)
+- `.h5` (1rem / 16px)
+
+**Body Text:**
+- `.s1` (1.125rem / 18px)
+- `.s2` (1rem / 16px)
+- `.s3` (0.875rem / 14px)
+- `.s4` (0.8125rem / 13px)
+- `.s5` (0.75rem / 12px)
+
+**Font Weight:**
+- `.normal` (400)
+- `.medium` (500)
+- `.bold` (600)
+
+### States
+
+- `.edisabled` - Makes element non-interactive with reduced opacity
+
+## Animations
+
+Available keyframe animations:
+
+- `cardswipe`, `cardreverseswipe`
+- `cardrotate`, `cardreverserotate`
+- `tabletreversemoveup`
+- `textfadein`
+- `navbarexpand`, `navbarshrink`
+
+Usage example:
+
+```scss
+.my-element {
+  animation: textfadein 0.5s ease-out;
+}
+```
+
+## Best Practices
+
+1. **Import Only What You Need**: Instead of importing `all.scss`, import specific files to reduce bundle size
+2. **Use Utility Classes**: Leverage the utility classes for quick styling instead of writing custom CSS
+3. **Follow Design System**: Use the provided color tokens and typography scale for consistency
+4. **Responsive Design**: Use the provided media query mixins for consistent breakpoints
+5. **Component-Specific Styles**: Keep component-specific styles in their respective component files
+
+## Development
+
+When adding new styles:
+
+1. Add shared variables to `sass/_variables.scss`
+2. Add reusable mixins to `sass/_mixins.scss`
+3. Add utility classes to `sass/_utils.scss`
+4. Add animations to `sass/_animations.scss`
+5. Component-specific styles go in their respective component folders
+6. Update `index.ts` if adding new component style files
+
+## Build Process
+
+The styles are processed during the build:
+
+1. SCSS files are compiled to CSS
+2. All component styles are bundled together
+3. A single `style.css` file is output to `dist/`
+4. Individual SCSS files remain available for import in consuming applications
+
+## Notes
+
+- The library uses `normalize.css` for consistent cross-browser styling
+- All SCSS files use the Dart Sass syntax
+- Media queries are mobile-first where applicable
+- Colors follow a 100-1000 scale for consistent gradation
+

package/src/styles/all.scss

@@ -1,7 +1,7 @@
-// Complete SCSS bundle for external use
-// Import this file to get all variables, mixins, utilities, and animations
-@import './sass/variables';
-@import './sass/mixins';
-@import './sass/animations';
-@import './sass/utils';
-
+// Complete SCSS bundle for external use
+// Import this file to get all variables, mixins, utilities, and animations
+@import './sass/variables';
+@import './sass/mixins';
+@import './sass/animations';
+@import './sass/utils';
+

package/src/styles/animations.scss

@@ -1,5 +1,5 @@
-// Re-export animations for external use
-// This file can be imported in consuming applications to access animations
-@import './sass/mixins';
-@import './sass/animations';
-
+// Re-export animations for external use
+// This file can be imported in consuming applications to access animations
+@import './sass/mixins';
+@import './sass/animations';
+

package/src/styles/css/reset.css

@@ -1 +1 @@
-@import "normalize.css";
+@import "normalize.css";

package/src/styles/index.d.ts

@@ -1 +1 @@
-export * from './themes';
+export * from './themes';

package/src/styles/index.ts

@@ -1 +1 @@
-export * from './themes';
+export * from './themes';

package/src/styles/mixins.scss

@@ -1,5 +1,5 @@
-// Re-export mixins for external use
-// This file can be imported in consuming applications to access SCSS mixins
-@import './sass/variables';
-@import './sass/mixins';
-
+// Re-export mixins for external use
+// This file can be imported in consuming applications to access SCSS mixins
+@import './sass/variables';
+@import './sass/mixins';
+

package/src/styles/sass/main.scss

@@ -1,11 +1,11 @@
-// This file is no longer used as the main entry point.
-// All imports are now managed in ../index.ts for better control over CSS cascade order.
-// 
-// The order in index.ts is:
-// 1. normalize.css (third-party reset)
-// 2. Base styles (variables, mixins, animations)
-// 3. Component styles
-// 4. Utility classes (highest priority)
-//
-// This empty file is kept for backwards compatibility.
-
+// This file is no longer used as the main entry point.
+// All imports are now managed in ../index.ts for better control over CSS cascade order.
+// 
+// The order in index.ts is:
+// 1. normalize.css (third-party reset)
+// 2. Base styles (variables, mixins, animations)
+// 3. Component styles
+// 4. Utility classes (highest priority)
+//
+// This empty file is kept for backwards compatibility.
+

package/src/styles/utils.scss

@@ -1,5 +1,5 @@
-// Re-export utility classes for external use
-// This file can be imported in consuming applications to access utility classes
-@import './sass/variables';
-@import './sass/utils';
-
+// Re-export utility classes for external use
+// This file can be imported in consuming applications to access utility classes
+@import './sass/variables';
+@import './sass/utils';
+

package/src/styles/variables.scss

@@ -1,4 +1,4 @@
-// Re-export variables for external use
-// This file can be imported in consuming applications to access SCSS variables
-@import './sass/variables';
-
+// Re-export variables for external use
+// This file can be imported in consuming applications to access SCSS variables
+@import './sass/variables';
+