@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc03

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +71 -46
  2. package/dist/css/main.css +614 -123
  3. package/package.json +1 -1
  4. package/snippets/callouts.html +129 -0
  5. package/snippets/profile.html +217 -11
  6. package/src/scss/_base-css-variables.scss +77 -3
  7. package/src/scss/_core.scss +6 -0
  8. package/src/scss/core-components/_callouts.scss +139 -0
  9. package/src/scss/core-components/_cards.scss +2 -2
  10. package/src/scss/core-components/_profile.scss +125 -41
  11. package/src/scss/core-components/_scrollbars.scss +41 -0
  12. package/src/scss/core-components/_statistics.scss +3 -3
  13. package/src/scss/core-components/_tables.scss +0 -13
  14. package/src/scss/core-components/_tabs.scss +2 -2
  15. package/src/scss/core-components/_utilities.scss +53 -0
  16. package/src/scss/utilities.scss +63 -84
  17. package/src/scss/variables/_base.scss +185 -61
  18. package/src/scss/variables/_colors.scss +177 -108
  19. package/src/scss/variables/_components.scss +12 -6
  20. package/src/scss/variables/_index.scss +9 -3
  21. package/src/scss/variables/_layout.scss +2 -2
package/README.md CHANGED
@@ -24,8 +24,14 @@ import '@keenmate/pure-admin-core/dist/css/main.css';
24
24
 
25
25
  ### Using a Theme
26
26
 
27
+ Themes are separate packages. Install and import:
28
+
29
+ ```bash
30
+ npm install @keenmate/pure-admin-theme-audi
31
+ ```
32
+
27
33
  ```html
28
- <link rel="stylesheet" href="node_modules/@keenmate/pure-admin-core/dist/css/themes/audi.css">
34
+ <link rel="stylesheet" href="node_modules/@keenmate/pure-admin-theme-audi/dist/audi.css">
29
35
  ```
30
36
 
31
37
  ### SCSS Customization
@@ -39,63 +45,64 @@ $btn-primary-bg: #your-button-color;
39
45
  @import '@keenmate/pure-admin-core/src/scss/main';
40
46
  ```
41
47
 
42
- ### JavaScript Utilities
43
-
44
- ```js
45
- import { createToast, openModal, closeModal } from '@pure-admin/core';
46
-
47
- // Show a success toast
48
- createToast('top-right', 'success', 'Success!', 'Operation completed');
49
-
50
- // Open a modal
51
- openModal('myModal');
52
- ```
53
-
54
48
  ## Using HTML Snippets
55
49
 
56
50
  The `snippets/` directory contains clean HTML patterns for all components:
57
51
 
58
- - `snippets/buttons.html` - All button variants and patterns
59
- - `snippets/alerts.html` - Alert components
60
- - `snippets/badges.html` - Badge and composite badge patterns
61
- - `snippets/cards.html` - Card layouts
62
- - `snippets/forms.html` - Form elements and validation
63
- - `snippets/modals.html` - Modal dialogs
64
- - `snippets/toasts.html` - Toast notifications
65
- - `snippets/tables.html` - Table variants
66
- - `snippets/loaders.html` - Loading spinners and animations
52
+ - `alerts.html` - Alert components
53
+ - `badges.html` - Badge and composite badge patterns
54
+ - `buttons.html` - All button variants and patterns
55
+ - `callouts.html` - Documentation-style callouts with left border accent
56
+ - `cards.html` - Card layouts
57
+ - `checkbox-lists.html` - Checkbox list patterns
58
+ - `code.html` - Code display blocks
59
+ - `command-palette.html` - Command palette (Ctrl+K)
60
+ - `comparison.html` - Comparison tables
61
+ - `customization.html` - Theme customization examples
62
+ - `forms.html` - Form elements and validation
63
+ - `grid.html` - Grid system layouts
64
+ - `layout.html` - Page layout structure
65
+ - `lists.html` - Styled lists (ul, ol, dl)
66
+ - `loaders.html` - Loading spinners and animations
67
+ - `modal-dialogs.html` - Confirmation dialogs
68
+ - `modals.html` - Modal windows
69
+ - `popconfirm.html` - Popconfirm component
70
+ - `profile.html` - Profile panel with tabs and favorites
71
+ - `tables.html` - Table variants
72
+ - `tabs.html` - Tab components
73
+ - `timeline.html` - Timeline components
74
+ - `toasts.html` - Toast notifications
75
+ - `tooltips.html` - Tooltips and popovers
76
+ - `typography.html` - Typography styles and headings
77
+ - `utilities.html` - Utility classes
78
+ - `virtual-scroll.html` - Virtual scrolling
79
+ - `web-daterangepicker.html` - Date range picker web component
80
+ - `web-multiselect.html` - Multiselect web component
67
81
 
68
82
  These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
69
83
 
70
- ## Framework Integration
71
-
72
- ### Svelte
73
-
74
- See `@pure-admin/svelte` package for Svelte component wrappers.
75
-
76
- ### React
77
-
78
- See `@pure-admin/react` package for React component wrappers.
84
+ ## Themes
79
85
 
80
- ### Vue
86
+ Themes are available as separate npm packages:
81
87
 
82
- See `@pure-admin/vue` package for Vue component wrappers.
88
+ | Theme | Package | Description |
89
+ |-------|---------|-------------|
90
+ | Audi | `@keenmate/pure-admin-theme-audi` | Audi red with Fira Sans Condensed |
91
+ | Corporate | `@keenmate/pure-admin-theme-corporate` | Professional blue/gray |
92
+ | Dark | `@keenmate/pure-admin-theme-dark` | Dark mode with color variants |
93
+ | Express | `@keenmate/pure-admin-theme-express` | Bold yellow/red logistics |
94
+ | Minimal | `@keenmate/pure-admin-theme-minimal` | Clean minimal design |
83
95
 
84
- ## Themes
96
+ ### Theme Modes & Variants
85
97
 
86
- All themes are included in this package:
98
+ Themes support light/dark modes via CSS classes on `<body>`:
99
+ - `.pa-mode-light` - Force light mode
100
+ - `.pa-mode-dark` - Force dark mode
87
101
 
88
- | Theme | File | Description |
89
- |-------|------|-------------|
90
- | Corporate | `main.css` or `themes/corporate.css` | Professional blue/gray (default) |
91
- | Audi | `themes/audi.css` | Audi red with Fira Sans Condensed |
92
- | Audi Light | `themes/audi-light.css` | Light variant of Audi |
93
- | Express | `themes/express.css` | Bold yellow/red logistics |
94
- | Dark | `themes/dark.css` | Dark mode base |
95
- | Dark Blue | `themes/dark-blue.css` | Dark with blue accent |
96
- | Dark Green | `themes/dark-green.css` | Dark with green accent |
97
- | Dark Red | `themes/dark-red.css` | Dark with red accent |
98
- | Minimal | `themes/minimal.css` | Clean minimal design |
102
+ The Dark theme supports color accent variants:
103
+ - `.pa-color-blue` - Blue accent
104
+ - `.pa-color-green` - Green accent
105
+ - `.pa-color-red` - Red accent
99
106
 
100
107
  ## Component Classes
101
108
 
@@ -137,6 +144,14 @@ All themes are included in this package:
137
144
  - `.pa-alert--primary/success/danger/warning/info` - Variants
138
145
  - `.pa-alert--dismissible` - Closeable alerts
139
146
 
147
+ ### Callouts
148
+ - `.pa-callout` - Base callout (documentation-style with left border)
149
+ - `.pa-callout--primary/secondary/success/danger/warning/info` - Variants
150
+ - `.pa-callout--sm/lg` - Sizes
151
+ - `.pa-callout__icon` - Icon container
152
+ - `.pa-callout__heading` - Callout heading
153
+ - `.pa-callout__content` - Content wrapper (for icon + text layout)
154
+
140
155
  ### Modals
141
156
  - `.pa-modal` - Base modal
142
157
  - `.pa-modal__container--sm/md/lg/xl/xxl` - Sizes
@@ -156,6 +171,16 @@ All themes are included in this package:
156
171
  - `.pa-popover--sm/md/lg` - Sizes
157
172
  - **JavaScript Required**: Popovers require `tooltips-popovers.js` and Floating UI library for positioning
158
173
 
174
+ ### Profile Panel
175
+ - `.pa-profile-panel` - Slide-in profile panel
176
+ - `.pa-profile-panel--open` - Open state
177
+ - `.pa-profile-panel__header` - Header with avatar and user info
178
+ - `.pa-profile-panel__header--no-avatar` - Header variant without avatar (for corporate apps)
179
+ - `.pa-profile-panel__tabs` - Tab navigation (Profile/Favorites)
180
+ - `.pa-profile-panel__nav-item` - Navigation link
181
+ - `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
182
+ - `.pa-profile-panel__actions` - Action buttons (Sign Out, etc.)
183
+
159
184
  ## SCSS Variables
160
185
 
161
186
  All components use SCSS variables with `!default` flags, making them fully customizable: