@ngstarter-ui/components 1.0.45 → 1.0.46

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 (2) hide show
  1. package/README.md +213 -0
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -0,0 +1,213 @@
1
+ # NgStarter UI
2
+
3
+ NgStarter UI is an Angular component kit for admin panels and product dashboards. The
4
+ component package is published as `@ngstarter-ui/components` and is organized around
5
+ secondary entry points such as `@ngstarter-ui/components/button`,
6
+ `@ngstarter-ui/components/dialog`, and `@ngstarter-ui/components/table`.
7
+
8
+ ## Installation
9
+
10
+ For a new Angular 21 project, create the app with SCSS and add NgStarter UI:
11
+
12
+ ```bash
13
+ npx @angular/cli@21 new project-name --style=scss
14
+ cd project-name
15
+ npx ng add @ngstarter-ui/components
16
+ ```
17
+
18
+ For an existing Angular 21 app, run the same schematic from your project root:
19
+
20
+ ```bash
21
+ npx ng add @ngstarter-ui/components
22
+ ```
23
+
24
+ NgStarter components are standalone Angular components. Import each component from its
25
+ secondary entry point:
26
+
27
+ ```ts
28
+ import { Button } from '@ngstarter-ui/components/button';
29
+ import { Dialog } from '@ngstarter-ui/components/dialog';
30
+ import { Input } from '@ngstarter-ui/components/input';
31
+ ```
32
+
33
+ ## Theming
34
+
35
+ Import one theme stylesheet once in your app styles:
36
+
37
+ ```scss
38
+ @use '@ngstarter-ui/components/styles/themes/default';
39
+ ```
40
+
41
+ Other presets are available for faster admin styling:
42
+
43
+ ```scss
44
+ @use '@ngstarter-ui/components/styles/themes/enterprise';
45
+ @use '@ngstarter-ui/components/styles/themes/modern';
46
+ @use '@ngstarter-ui/components/styles/themes/compact';
47
+ ```
48
+
49
+ Themes are driven by `--ngs-*` design tokens. The main layers are:
50
+
51
+ - primitive tokens: spacing, radius, font sizes, shadows
52
+ - semantic tokens: `--ngs-color-primary`, `--ngs-color-surface`, `--ngs-color-danger`
53
+ - component tokens: `--ngs-button-height`, `--ngs-field-radius`, `--ngs-table-row-height`
54
+
55
+ You can switch theme, density, radius, and color scheme at runtime:
56
+
57
+ ```ts
58
+ import { provideNgsTheme } from '@ngstarter-ui/components/core';
59
+
60
+ export const appConfig = {
61
+ providers: [
62
+ provideNgsTheme({
63
+ theme: 'enterprise',
64
+ colorScheme: 'auto',
65
+ density: 'compact',
66
+ radius: 'small',
67
+ primaryColor: '#155eef',
68
+ }),
69
+ ],
70
+ };
71
+ ```
72
+
73
+ For user preferences or tenant branding, inject `ThemeManagerService`:
74
+
75
+ ```ts
76
+ themeManager.setTheme('modern');
77
+ themeManager.setDensity('spacious');
78
+ themeManager.setRadius('large');
79
+ themeManager.setPrimaryColor('#7c3aed');
80
+ themeManager.changeColorScheme('dark');
81
+ ```
82
+
83
+ The same values can be controlled with document attributes:
84
+
85
+ ```html
86
+ <html data-ngs-theme="enterprise" data-ngs-density="compact" data-ngs-radius="small">
87
+ ```
88
+
89
+ ## Component Demos
90
+
91
+ The documentation site includes live demos and API examples for each component:
92
+
93
+ - [Documentation](https://ngstarter.com)
94
+ - [Installation](https://ngstarter.com/installation)
95
+ - [AI component registry](https://ngstarter.com/ai/component-registry.json)
96
+
97
+ ### Forms
98
+
99
+ - [Autocomplete](https://ngstarter.com/forms/autocomplete)
100
+ - [Button](https://ngstarter.com/forms/buttons)
101
+ - [Button Toggle](https://ngstarter.com/forms/button-toggle)
102
+ - [Checkbox](https://ngstarter.com/forms/checkbox)
103
+ - [Country Select](https://ngstarter.com/forms/country)
104
+ - [Currency Select](https://ngstarter.com/forms/currency-select)
105
+ - [Date Format Select](https://ngstarter.com/forms/date-format-select)
106
+ - [Form Renderer](https://ngstarter.com/forms/form-renderer)
107
+ - [Inline Text Edit](https://ngstarter.com/forms/inline-text-edit)
108
+ - [Input](https://ngstarter.com/forms/input)
109
+ - [Input Mask](https://ngstarter.com/forms/input-mask)
110
+ - [Input Validator](https://ngstarter.com/forms/input-validator)
111
+ - [Number Input](https://ngstarter.com/forms/number-input)
112
+ - [Password Strength](https://ngstarter.com/forms/password-strength)
113
+ - [Phone Input](https://ngstarter.com/forms/phone-input)
114
+ - [Pin Input](https://ngstarter.com/forms/pin-input)
115
+ - [Radio](https://ngstarter.com/forms/radio)
116
+ - [Segmented](https://ngstarter.com/forms/segmented)
117
+ - [Select](https://ngstarter.com/forms/select)
118
+ - [Slide Toggle](https://ngstarter.com/forms/slide-toggle)
119
+ - [Timezone Select](https://ngstarter.com/forms/timezone)
120
+
121
+ ### Navigation
122
+
123
+ - [Breadcrumbs](https://ngstarter.com/navigation/breadcrumbs)
124
+ - [Navigation](https://ngstarter.com/navigation/navigation)
125
+ - [Rail Navigation](https://ngstarter.com/navigation/rail-nav)
126
+ - [Sidebar](https://ngstarter.com/navigation/sidebar)
127
+ - [Side Panel](https://ngstarter.com/navigation/side-panel)
128
+ - [Tab Panel](https://ngstarter.com/navigation/tab-panel)
129
+
130
+ ### Data, Layout, And Libraries
131
+
132
+ - [Content Editor](https://ngstarter.com/libraries/content-editor)
133
+ - [Data View](https://ngstarter.com/libraries/data-view)
134
+ - [Image Designer](https://ngstarter.com/libraries/image-designer)
135
+ - [Kanban Board](https://ngstarter.com/libraries/kanban-board)
136
+ - [Micro Charts](https://ngstarter.com/micro-charts)
137
+ - [Video Player](https://ngstarter.com/libraries/video-player)
138
+ - [Visual Builder](https://ngstarter.com/libraries/visual-builder)
139
+
140
+ ### Components
141
+
142
+ - [Action Required](https://ngstarter.com/components/action-required)
143
+ - [Alert](https://ngstarter.com/components/alert)
144
+ - [Announcement](https://ngstarter.com/components/announcement)
145
+ - [Avatar](https://ngstarter.com/components/avatar)
146
+ - [Badge](https://ngstarter.com/components/badge)
147
+ - [Block Loader](https://ngstarter.com/components/block-loader)
148
+ - [Bottom Sheet](https://ngstarter.com/components/bottom-sheet)
149
+ - [Card](https://ngstarter.com/components/card)
150
+ - [Card Overlay](https://ngstarter.com/components/card-overlay)
151
+ - [Carousel](https://ngstarter.com/components/carousel)
152
+ - [Chips](https://ngstarter.com/components/chips)
153
+ - [Code Highlighter](https://ngstarter.com/components/code-highlighter)
154
+ - [Color Picker](https://ngstarter.com/components/color-picker)
155
+ - [Color Switcher](https://ngstarter.com/components/color-switcher)
156
+ - [Command Bar](https://ngstarter.com/components/command-bar)
157
+ - [Comment Editor](https://ngstarter.com/components/comment-editor)
158
+ - [Comparison Slider](https://ngstarter.com/components/comparison-slider)
159
+ - [Confirm](https://ngstarter.com/components/confirm)
160
+ - [Content Fade](https://ngstarter.com/components/content-fade)
161
+ - [Cookie Popup](https://ngstarter.com/components/cookie-popup)
162
+ - [Crop](https://ngstarter.com/components/crop)
163
+ - [Datepicker](https://ngstarter.com/components/datepicker)
164
+ - [Dialog](https://ngstarter.com/components/dialog)
165
+ - [Divider](https://ngstarter.com/components/divider)
166
+ - [Drawer](https://ngstarter.com/components/drawer)
167
+ - [Emoji Picker](https://ngstarter.com/components/emoji-picker)
168
+ - [Empty State](https://ngstarter.com/components/empty-state)
169
+ - [Expand](https://ngstarter.com/components/expand)
170
+ - [Expansion Panel](https://ngstarter.com/components/expansion-panel)
171
+ - [Filter Builder](https://ngstarter.com/components/filter-builder)
172
+ - [Gauge](https://ngstarter.com/components/gauge)
173
+ - [Grid](https://ngstarter.com/components/grid)
174
+ - [Guided Tour](https://ngstarter.com/components/guided-tour)
175
+ - [Icon](https://ngstarter.com/components/icon)
176
+ - [Image Placeholder](https://ngstarter.com/components/image-placeholder)
177
+ - [Image Resizer](https://ngstarter.com/components/image-resizer)
178
+ - [Image Viewer](https://ngstarter.com/components/image-viewer)
179
+ - [Image Zoom Viewer](https://ngstarter.com/components/image-zoom-viewer)
180
+ - [Incidents](https://ngstarter.com/components/incidents)
181
+ - [Kbd](https://ngstarter.com/components/kbd)
182
+ - [Layout](https://ngstarter.com/components/layout)
183
+ - [List](https://ngstarter.com/components/list)
184
+ - [Marquee](https://ngstarter.com/components/marquee)
185
+ - [Menu](https://ngstarter.com/components/menu)
186
+ - [Notifications](https://ngstarter.com/components/notifications)
187
+ - [Paginator](https://ngstarter.com/components/paginator)
188
+ - [Panel](https://ngstarter.com/components/panel)
189
+ - [Popover](https://ngstarter.com/components/popover)
190
+ - [Progress Bar](https://ngstarter.com/components/progress-bar)
191
+ - [Progress Spinner](https://ngstarter.com/components/progress-spinner)
192
+ - [Resizable Container](https://ngstarter.com/components/resizable-container)
193
+ - [Screen Loader](https://ngstarter.com/components/screen-loader)
194
+ - [Sidenav](https://ngstarter.com/components/sidenav)
195
+ - [Signature Pad](https://ngstarter.com/components/signature-pad)
196
+ - [Skeleton](https://ngstarter.com/components/skeleton)
197
+ - [Slider](https://ngstarter.com/components/slider)
198
+ - [Snack Bar](https://ngstarter.com/components/snackbar)
199
+ - [Split Pane](https://ngstarter.com/components/split-pane)
200
+ - [Stepper](https://ngstarter.com/components/stepper)
201
+ - [Suggestions](https://ngstarter.com/components/suggestions)
202
+ - [Table](https://ngstarter.com/components/table)
203
+ - [Tabs](https://ngstarter.com/components/tabs)
204
+ - [Text Editor](https://ngstarter.com/components/text-editor)
205
+ - [Thumbnail Maker](https://ngstarter.com/components/thumbnail-maker)
206
+ - [Tiles](https://ngstarter.com/components/tiles)
207
+ - [Timeline](https://ngstarter.com/components/timeline)
208
+ - [Timepicker](https://ngstarter.com/components/timepicker)
209
+ - [Toolbar](https://ngstarter.com/components/toolbar)
210
+ - [Tooltip](https://ngstarter.com/components/tooltip)
211
+ - [Tree](https://ngstarter.com/components/tree)
212
+ - [Upload](https://ngstarter.com/components/upload)
213
+ - [Video Viewer](https://ngstarter.com/components/video-viewer)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ngstarter-ui/components",
3
3
  "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
4
- "version": "1.0.45",
4
+ "version": "1.0.46",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/elementarlabsdev/ngstarter.git"