@bvs-tech/material 0.0.1 → 0.0.4

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.
@@ -0,0 +1,234 @@
1
+ // ============================================================
2
+ // PRIMITIVE COLORS
3
+ // ============================================================
4
+
5
+ @use 'sass:map';
6
+
7
+ // Primary Palette (Blues)
8
+ $palette-primary: (
9
+ '50': #eff6ff,
10
+ '100': #dbeafe,
11
+ '200': #bfdbfe,
12
+ '300': #93c5fd,
13
+ '400': #60a5fa,
14
+ '500': #3b82f6,
15
+ '600': #2563eb,
16
+ '700': #1d4ed8,
17
+ '800': #1e40af,
18
+ '900': #1e3a8a,
19
+ );
20
+
21
+ // Secondary/Accent (Purples)
22
+ $palette-secondary: (
23
+ '50': #f5f3ff,
24
+ '100': #ede9fe,
25
+ '200': #ddd6fe,
26
+ '300': #c4b5fd,
27
+ '400': #a78bfa,
28
+ '500': #8b5cf6,
29
+ '600': #7c3aed,
30
+ '700': #6d28d9,
31
+ '800': #5b21b6,
32
+ '900': #4c1d95,
33
+ );
34
+
35
+ // Neutrals (Slate/Greys)
36
+ $palette-neutral: (
37
+ '0': #ffffff,
38
+ '50': #f8fafc,
39
+ '100': #f1f5f9,
40
+ '200': #e2e8f0,
41
+ '300': #cbd5e1,
42
+ '400': #94a3b8,
43
+ '500': #64748b,
44
+ '600': #475569,
45
+ '700': #334155,
46
+ '800': #1e293b,
47
+ '900': #0f172a,
48
+ '950': #090d16,
49
+ '1000': #000000,
50
+ );
51
+
52
+ // Success (Greens)
53
+ $palette-success: (
54
+ 'light': #d1fae5,
55
+ 'base': #10b981,
56
+ 'dark': #065f46,
57
+ );
58
+
59
+ // Warning (Ambers)
60
+ $palette-warning: (
61
+ 'light': #fef3c7,
62
+ 'base': #f59e0b,
63
+ 'dark': #92400e,
64
+ );
65
+
66
+ // Error (Reds)
67
+ $palette-error: (
68
+ 'light': #fee2e2,
69
+ 'base': #ef4444,
70
+ 'dark': #991b1b,
71
+ );
72
+
73
+ // Info (Sky/Cyans)
74
+ $palette-info: (
75
+ 'light': #e0f2fe,
76
+ 'base': #0ea5e9,
77
+ 'dark': #075985,
78
+ );
79
+
80
+ // ============================================================
81
+ // SEMANTIC COLOR MAPS (5 Brands, Light & Dark)
82
+ // ============================================================
83
+
84
+ // 1. Default (Corporate Blue)
85
+ $theme-default-light: (
86
+ 'brand': map.get($palette-primary, '600'),
87
+ 'brand-hover': map.get($palette-primary, '700'),
88
+ 'brand-active': map.get($palette-primary, '800'),
89
+ 'surface': map.get($palette-neutral, '0'),
90
+ 'surface-subtle': map.get($palette-neutral, '50'),
91
+ 'surface-muted': map.get($palette-neutral, '100'),
92
+ 'text-primary': map.get($palette-neutral, '900'),
93
+ 'text-secondary': map.get($palette-neutral, '600'),
94
+ 'text-disabled': map.get($palette-neutral, '400'),
95
+ 'border': map.get($palette-neutral, '200'),
96
+ 'border-strong': map.get($palette-neutral, '400'),
97
+ );
98
+
99
+ $theme-default-dark: (
100
+ 'brand': map.get($palette-primary, '400'),
101
+ 'brand-hover': map.get($palette-primary, '300'),
102
+ 'brand-active': map.get($palette-primary, '200'),
103
+ 'surface': map.get($palette-neutral, '950'),
104
+ 'surface-subtle': map.get($palette-neutral, '900'),
105
+ 'surface-muted': map.get($palette-neutral, '800'),
106
+ 'text-primary': map.get($palette-neutral, '50'),
107
+ 'text-secondary': map.get($palette-neutral, '400'),
108
+ 'text-disabled': map.get($palette-neutral, '600'),
109
+ 'border': map.get($palette-neutral, '900'),
110
+ 'border-strong': map.get($palette-neutral, '700'),
111
+ );
112
+
113
+ // 2. Emerald (Green/Finance)
114
+ $theme-emerald-light: (
115
+ 'brand': map.get($palette-success, 'base'),
116
+ 'brand-hover': map.get($palette-success, 'dark'),
117
+ 'brand-active': #044331,
118
+ 'surface': map.get($palette-neutral, '0'),
119
+ 'surface-subtle': map.get($palette-neutral, '50'),
120
+ 'surface-muted': map.get($palette-neutral, '100'),
121
+ 'text-primary': map.get($palette-neutral, '900'),
122
+ 'text-secondary': map.get($palette-neutral, '600'),
123
+ 'text-disabled': map.get($palette-neutral, '400'),
124
+ 'border': map.get($palette-neutral, '200'),
125
+ 'border-strong': map.get($palette-neutral, '400'),
126
+ );
127
+
128
+ $theme-emerald-dark: (
129
+ 'brand': #34d399,
130
+ 'brand-hover': map.get($palette-success, 'base'),
131
+ 'brand-active': map.get($palette-success, 'dark'),
132
+ 'surface': #03100b,
133
+ 'surface-subtle': #061f17,
134
+ 'surface-muted': #0c2d22,
135
+ 'text-primary': map.get($palette-neutral, '50'),
136
+ 'text-secondary': #a7f3d0,
137
+ 'text-disabled': #065f46,
138
+ 'border': #0a261d,
139
+ 'border-strong': map.get($palette-success, 'dark'),
140
+ );
141
+
142
+ // 3. Sunset (Orange/Energy)
143
+ $theme-sunset-light: (
144
+ 'brand': #ea580c,
145
+ // Orange 600
146
+ 'brand-hover': #c2410c,
147
+ // Orange 700
148
+ 'brand-active': #9a3412,
149
+ // Orange 800
150
+ 'surface': map.get($palette-neutral, '0'),
151
+ 'surface-subtle': map.get($palette-neutral, '50'),
152
+ 'surface-muted': map.get($palette-neutral, '100'),
153
+ 'text-primary': map.get($palette-neutral, '900'),
154
+ 'text-secondary': map.get($palette-neutral, '600'),
155
+ 'text-disabled': map.get($palette-neutral, '400'),
156
+ 'border': map.get($palette-neutral, '200'),
157
+ 'border-strong': map.get($palette-neutral, '400'),
158
+ );
159
+
160
+ $theme-sunset-dark: (
161
+ 'brand': #f97316,
162
+ // Orange 500
163
+ 'brand-hover': #fb923c,
164
+ // Orange 400
165
+ 'brand-active': #fdba74,
166
+ // Orange 300
167
+ 'surface': #120905,
168
+ 'surface-subtle': #27140c,
169
+ 'surface-muted': #3d1d11,
170
+ 'text-primary': map.get($palette-neutral, '50'),
171
+ 'text-secondary': #fed7aa,
172
+ 'text-disabled': #9a3412,
173
+ 'border': #2b140b,
174
+ 'border-strong': #9a3412,
175
+ );
176
+
177
+ // 4. Amethyst (Purple/Premium)
178
+ $theme-amethyst-light: (
179
+ 'brand': map.get($palette-secondary, '600'),
180
+ 'brand-hover': map.get($palette-secondary, '700'),
181
+ 'brand-active': map.get($palette-secondary, '800'),
182
+ 'surface': map.get($palette-neutral, '0'),
183
+ 'surface-subtle': map.get($palette-neutral, '50'),
184
+ 'surface-muted': map.get($palette-neutral, '100'),
185
+ 'text-primary': map.get($palette-neutral, '900'),
186
+ 'text-secondary': map.get($palette-neutral, '600'),
187
+ 'text-disabled': map.get($palette-neutral, '400'),
188
+ 'border': map.get($palette-neutral, '200'),
189
+ 'border-strong': map.get($palette-neutral, '400'),
190
+ );
191
+
192
+ $theme-amethyst-dark: (
193
+ 'brand': map.get($palette-secondary, '400'),
194
+ 'brand-hover': map.get($palette-secondary, '300'),
195
+ 'brand-active': map.get($palette-secondary, '200'),
196
+ 'surface': #0d0717,
197
+ 'surface-subtle': #1e1135,
198
+ 'surface-muted': #2e1b4e,
199
+ 'text-primary': map.get($palette-neutral, '50'),
200
+ 'text-secondary': map.get($palette-secondary, '200'),
201
+ 'text-disabled': map.get($palette-secondary, '700'),
202
+ 'border': #201138,
203
+ 'border-strong': map.get($palette-secondary, '600'),
204
+ );
205
+
206
+ // 5. Ruby (Red/Alert)
207
+ $theme-ruby-light: (
208
+ 'brand': map.get($palette-error, 'base'),
209
+ 'brand-hover': map.get($palette-error, 'dark'),
210
+ 'brand-active': #7f1d1d,
211
+ 'surface': map.get($palette-neutral, '0'),
212
+ 'surface-subtle': map.get($palette-neutral, '50'),
213
+ 'surface-muted': map.get($palette-neutral, '100'),
214
+ 'text-primary': map.get($palette-neutral, '900'),
215
+ 'text-secondary': map.get($palette-neutral, '600'),
216
+ 'text-disabled': map.get($palette-neutral, '400'),
217
+ 'border': map.get($palette-neutral, '200'),
218
+ 'border-strong': map.get($palette-neutral, '400'),
219
+ );
220
+
221
+ $theme-ruby-dark: (
222
+ 'brand': #f87171,
223
+ // Red 400
224
+ 'brand-hover': map.get($palette-error, 'base'),
225
+ 'brand-active': map.get($palette-error, 'dark'),
226
+ 'surface': #140505,
227
+ 'surface-subtle': #2d0c0c,
228
+ 'surface-muted': #471515,
229
+ 'text-primary': map.get($palette-neutral, '50'),
230
+ 'text-secondary': #fecaca,
231
+ 'text-disabled': #991b1b,
232
+ 'border': #360f0f,
233
+ 'border-strong': #991b1b,
234
+ );
@@ -0,0 +1,67 @@
1
+ // ============================================================
2
+ // SHADOWS & ELEVATIONS
3
+ // ============================================================
4
+
5
+ $shadows: (
6
+ 'sm': (
7
+ 0 1px 2px 0 rgba(0, 0, 0, 0.05),
8
+ ),
9
+ 'base': (
10
+ 0 1px 3px 0 rgba(0, 0, 0, 0.1),
11
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1),
12
+ ),
13
+ 'md': (
14
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
15
+ 0 2px 4px -2px rgba(0, 0, 0, 0.1),
16
+ ),
17
+ 'lg': (
18
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
19
+ 0 4px 6px -4px rgba(0, 0, 0, 0.1),
20
+ ),
21
+ 'xl': (
22
+ 0 20px 25px -5px rgba(0, 0, 0, 0.1),
23
+ 0 8px 10px -6px rgba(0, 0, 0, 0.1),
24
+ ),
25
+ );
26
+
27
+ $radius: (
28
+ 'none': 0,
29
+ 'sm': 0.125rem,
30
+ // 2px
31
+ 'base': 0.25rem,
32
+ // 4px
33
+ 'md': 0.375rem,
34
+ // 6px
35
+ 'lg': 0.5rem,
36
+ // 8px
37
+ 'xl': 0.75rem,
38
+ // 12px
39
+ '2xl': 1rem,
40
+ // 16px
41
+ 'full': 9999px,
42
+ );
43
+
44
+ $breakpoints: (
45
+ 'sm': 640px,
46
+ 'md': 768px,
47
+ 'lg': 1024px,
48
+ 'xl': 1280px,
49
+ '2xl': 1536px,
50
+ );
51
+
52
+ $z-index: (
53
+ 'dropdown': 1000,
54
+ 'sticky': 1020,
55
+ 'fixed': 1030,
56
+ 'modal': 1040,
57
+ 'popover': 1050,
58
+ 'tooltip': 1060,
59
+ 'toast': 1070,
60
+ );
61
+
62
+ $transitions: (
63
+ 'fast': 150ms ease-in-out,
64
+ 'base': 200ms ease-in-out,
65
+ 'slow': 300ms ease-in-out,
66
+ 'slower': 500ms ease-in-out,
67
+ );
@@ -0,0 +1,30 @@
1
+ // ============================================================
2
+ // SPACING SCALE (8pt Grid System)
3
+ // ============================================================
4
+
5
+ $spacing: (
6
+ '0': 0,
7
+ '1': 0.25rem,
8
+ // 4px
9
+ '2': 0.5rem,
10
+ // 8px
11
+ '3': 0.75rem,
12
+ // 12px
13
+ '4': 1rem,
14
+ // 16px
15
+ '5': 1.25rem,
16
+ // 20px
17
+ '6': 1.5rem,
18
+ // 24px
19
+ '8': 2rem,
20
+ // 32px
21
+ '10': 2.5rem,
22
+ // 40px
23
+ '12': 3rem,
24
+ // 48px
25
+ '16': 4rem,
26
+ // 64px
27
+ '20': 5rem,
28
+ // 80px
29
+ '24': 6rem, // 96px
30
+ );
@@ -0,0 +1,52 @@
1
+ // ============================================================
2
+ // TYPOGRAPHY SYSTEM
3
+ // ============================================================
4
+
5
+ $font-families: (
6
+ 'sans': (
7
+ 'Inter',
8
+ -apple-system,
9
+ BlinkMacSystemFont,
10
+ 'Segoe UI',
11
+ Roboto,
12
+ sans-serif,
13
+ ),
14
+ 'mono': (
15
+ 'JetBrains Mono',
16
+ 'Fira Code',
17
+ 'Courier New',
18
+ monospace,
19
+ ),
20
+ );
21
+
22
+ $font-sizes: (
23
+ 'xs': 0.75rem,
24
+ // 12px
25
+ 'sm': 0.875rem,
26
+ // 14px
27
+ 'base': 1rem,
28
+ // 16px
29
+ 'lg': 1.125rem,
30
+ // 18px
31
+ 'xl': 1.25rem,
32
+ // 20px
33
+ '2xl': 1.5rem,
34
+ // 24px
35
+ '3xl': 1.875rem,
36
+ // 30px
37
+ '4xl': 2.25rem, // 36px
38
+ );
39
+
40
+ $font-weights: (
41
+ 'light': 300,
42
+ 'regular': 400,
43
+ 'medium': 500,
44
+ 'semibold': 600,
45
+ 'bold': 700,
46
+ );
47
+
48
+ $line-heights: (
49
+ 'tight': 1.25,
50
+ 'normal': 1.5,
51
+ 'loose': 1.75,
52
+ );
@@ -1,4 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
+ import { EventEmitter } from '@angular/core';
2
3
 
3
4
  interface CustomThemeConfig {
4
5
  brand: string;
@@ -97,13 +98,13 @@ type InputSize = 'sm' | 'md' | 'lg';
97
98
  */
98
99
  declare class InputComponent {
99
100
  /** Semantic variant. */
100
- variant: InputVariant;
101
+ variant: i0.InputSignal<InputVariant>;
101
102
  /** Size variant. */
102
- size: InputSize;
103
+ size: i0.InputSignal<InputSize>;
103
104
  /** Whether the input takes full width. */
104
- block: boolean;
105
+ block: i0.InputSignal<boolean>;
105
106
  static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
106
- static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "input[bvs-input], textarea[bvs-input]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "block": { "alias": "block"; "required": false; }; }, {}, never, never, true, never>;
107
+ static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "input[bvs-input], textarea[bvs-input], select[bvs-input]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
107
108
  }
108
109
 
109
110
  /**
@@ -119,6 +120,33 @@ declare class FormFieldComponent {
119
120
  static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "bvs-form-field", never, { "label": { "alias": "label"; "required": true; }; "forId": { "alias": "forId"; "required": false; }; }, {}, never, ["*"], true, never>;
120
121
  }
121
122
 
123
+ interface BvsStep {
124
+ label: string;
125
+ description?: string;
126
+ }
127
+ /**
128
+ * Stepper molecule — displays progress through a sequence of steps.
129
+ */
130
+ declare class StepperComponent {
131
+ /** The list of steps to display. */
132
+ steps: i0.InputSignal<BvsStep[]>;
133
+ /** The 0-based index of the active step. */
134
+ activeStepIndex: i0.InputSignal<number>;
135
+ /** Emits when a step is clicked. */
136
+ stepChange: EventEmitter<number>;
137
+ /**
138
+ * Handles clicking on a step.
139
+ * Only allows navigating to already completed steps or the next immediately available step
140
+ * to ensure structured progression, or any step if desired by parent. We emit the index.
141
+ */
142
+ onStepClick(index: number): void;
143
+ isCompleted(index: number): boolean;
144
+ isActive(index: number): boolean;
145
+ isPending(index: number): boolean;
146
+ static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
147
+ static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "bvs-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "activeStepIndex": { "alias": "activeStepIndex"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; }, never, never, true, never>;
148
+ }
149
+
122
150
  /**
123
151
  * Navbar organism — generic and reusable header component.
124
152
  * Provides content slots for brand and actions.
@@ -128,5 +156,5 @@ declare class NavbarComponent {
128
156
  static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "bvs-navbar", never, {}, {}, never, ["[navbar-brand]", "[navbar-actions]"], true, never>;
129
157
  }
130
158
 
131
- export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, FormFieldComponent, InputComponent, MessageComponent, NavbarComponent, ThemeService };
132
- export type { BadgeColor, BadgeSize, ButtonSize, ButtonVariant, ColorScheme, CustomThemeConfig, InputSize, InputVariant, MessageColor, PresetBrand };
159
+ export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, FormFieldComponent, InputComponent, MessageComponent, NavbarComponent, StepperComponent, ThemeService };
160
+ export type { BadgeColor, BadgeSize, ButtonSize, ButtonVariant, BvsStep, ColorScheme, CustomThemeConfig, InputSize, InputVariant, MessageColor, PresetBrand };