@nuralyui/button 0.0.10 → 0.0.11

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 (43) hide show
  1. package/demo/{hy-buttons-demo.d.ts → nr-buttons-demo.d.ts} +3 -3
  2. package/demo/nr-buttons-demo.d.ts.map +1 -0
  3. package/demo/nr-buttons-demo.js +211 -0
  4. package/demo/nr-buttons-demo.js.map +1 -0
  5. package/index.d.ts +1 -1
  6. package/index.js +1 -1
  7. package/index.js.map +1 -1
  8. package/nr-button.component.d.ts +36 -0
  9. package/nr-button.component.d.ts.map +1 -0
  10. package/{hy-button.component.js → nr-button.component.js} +45 -19
  11. package/nr-button.component.js.map +1 -0
  12. package/nr-button.style.d.ts +19 -0
  13. package/nr-button.style.d.ts.map +1 -0
  14. package/{hy-button.style.js → nr-button.style.js} +220 -20
  15. package/nr-button.style.js.map +1 -0
  16. package/{hy-button.constants.d.ts → nr-button.types.d.ts} +2 -2
  17. package/nr-button.types.d.ts.map +1 -0
  18. package/nr-button.types.js +2 -0
  19. package/nr-button.types.js.map +1 -0
  20. package/package.json +11 -3
  21. package/react.d.ts +2 -2
  22. package/react.d.ts.map +1 -1
  23. package/react.js +4 -4
  24. package/react.js.map +1 -1
  25. package/test/nr-button_test.d.ts +2 -0
  26. package/test/nr-button_test.d.ts.map +1 -0
  27. package/test/{hy-button_test.js → nr-button_test.js} +15 -15
  28. package/test/nr-button_test.js.map +1 -0
  29. package/demo/hy-buttons-demo.d.ts.map +0 -1
  30. package/demo/hy-buttons-demo.js +0 -211
  31. package/demo/hy-buttons-demo.js.map +0 -1
  32. package/hy-button.component.d.ts +0 -21
  33. package/hy-button.component.d.ts.map +0 -1
  34. package/hy-button.component.js.map +0 -1
  35. package/hy-button.constants.d.ts.map +0 -1
  36. package/hy-button.constants.js +0 -2
  37. package/hy-button.constants.js.map +0 -1
  38. package/hy-button.style.d.ts +0 -2
  39. package/hy-button.style.d.ts.map +0 -1
  40. package/hy-button.style.js.map +0 -1
  41. package/test/hy-button_test.d.ts +0 -2
  42. package/test/hy-button_test.d.ts.map +0 -1
  43. package/test/hy-button_test.js.map +0 -1
package/{hy-button.style.js → nr-button.style.js} RENAMED
@@ -1,17 +1,35 @@
1
1
  import { css } from 'lit';
2
+ /**
3
+ * Button component styles for the Hybrid UI Library
4
+ *
5
+ * This file contains all the styling for the nr-button component, including:
6
+ * - Base button styles with CSS custom properties for theming
7
+ * - Multiple button variants (primary, secondary, ghost, danger)
8
+ * - Size variations (small, large)
9
+ * - State styles (hover, active, disabled, loading)
10
+ * - Dark theme support
11
+ * - Icon positioning and styling
12
+ * - Responsive design considerations
13
+ *
14
+ * The styling system uses CSS custom properties with fallbacks to allow
15
+ * for both global and local customization of button appearance.
16
+ */
2
17
  const buttonStyles = css `
18
+ /* Container for button content and icon positioning */
3
19
  #container {
4
20
  display: flex;
5
21
  justify-content: center;
6
22
  align-items: center;
7
- width:100%;
8
- height:100%;
23
+ width: 100%;
24
+ height: 100%;
9
25
  }
10
26
 
27
+ /* Icon positioned to the right of text when iconPosition='right' */
11
28
  :host([iconPosition='right']) #container {
12
29
  flex-direction: row-reverse;
13
30
  }
14
31
 
32
+ /* Icon styling within button */
15
33
  hy-icon {
16
34
  display: flex;
17
35
  justify-content: center;
@@ -19,55 +37,104 @@ const buttonStyles = css `
19
37
  padding: 2px;
20
38
  }
21
39
 
40
+ /*
41
+ * Base button element styles
42
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
43
+ * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}
44
+ */
45
+
46
+ /*
47
+ * Base button element styles
48
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
49
+ * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}
50
+ */
22
51
  button {
52
+ /* Dimensions */
23
53
  height: var(--hybrid-button-height,var(--hybrid-button-local-height));
24
54
  width: var(--hybrid-button-width,var(--hybrid-button-local-width));
55
+
56
+ /* Border properties - individual sides for granular control */
25
57
  border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));
26
58
  border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));
27
59
  border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));
28
60
  border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));
61
+
62
+ /* Border radius - individual corners for design flexibility */
29
63
  border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;
30
64
  border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));
31
65
  border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));
32
66
  border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));
67
+
68
+ /* Colors */
33
69
  background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));
34
70
  color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
71
+
72
+ /* Typography */
35
73
  font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
36
74
  font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));
37
75
  text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));
76
+
77
+ /* Spacing */
38
78
  padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
39
- margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));
79
+ margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));
40
80
  padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
41
81
  padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
42
82
  padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
43
83
  font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
44
84
  }
85
+
86
+ /* Icon styling within button - inherits text color and size */
45
87
  button hy-icon {
46
88
  --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
47
89
  --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));
48
90
  --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));
49
-
50
91
  }
51
92
 
93
+ /*
94
+ * Hover state styles
95
+ * Applied when button is hovered but not disabled
96
+ */
97
+
98
+ /*
99
+ * Hover state styles
100
+ * Applied when button is hovered but not disabled
101
+ */
52
102
  button:hover:not(:disabled) {
53
103
  cursor: pointer;
54
104
  border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));
55
105
  background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));
56
106
  color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
57
107
  }
108
+
109
+ /* Icon color on hover */
58
110
  button:hover:not(:disabled) hy-icon {
59
111
  --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
60
112
  }
61
113
 
114
+ /*
115
+ * Active state styles
116
+ * Applied when button is being clicked/pressed but not disabled
117
+ */
62
118
  button:active:not(:disabled) {
63
119
  outline: none;
64
120
  border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));
65
121
  color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
66
122
  }
123
+
124
+ /* Icon color on active state */
67
125
  button:active:not(:disabled) hy-icon {
68
126
  --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
69
127
  }
70
128
 
129
+ /*
130
+ * Disabled state styles
131
+ * Applied when button is disabled - removes interactivity and applies muted colors
132
+ */
133
+
134
+ /*
135
+ * Disabled state styles
136
+ * Applied when button is disabled - removes interactivity and applies muted colors
137
+ */
71
138
  button:disabled {
72
139
  cursor: auto;
73
140
  background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));
@@ -75,6 +142,13 @@ const buttonStyles = css `
75
142
  border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));
76
143
  }
77
144
 
145
+ /* ========================================
146
+ * SIZE VARIATIONS
147
+ * ======================================== */
148
+
149
+ /* Small button size variant */
150
+
151
+ /* Small button size variant */
78
152
  button[data-size='small'] {
79
153
  padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
80
154
  padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
@@ -83,6 +157,7 @@ const buttonStyles = css `
83
157
  font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));
84
158
  }
85
159
 
160
+ /* Large button size variant */
86
161
  button[data-size='large'] {
87
162
  padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
88
163
  padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
@@ -91,9 +166,23 @@ const buttonStyles = css `
91
166
  font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));
92
167
  }
93
168
 
169
+ /* ========================================
170
+ * BUTTON STATES
171
+ * ======================================== */
172
+
173
+ /* Loading state - reduces opacity to indicate processing */
94
174
  button[data-state='loading'] {
95
175
  opacity: 0.5;
96
176
  }
177
+
178
+ /* ========================================
179
+ * BUTTON TYPE VARIANTS
180
+ * ======================================== */
181
+
182
+ /* DANGER BUTTON VARIANT */
183
+ /* DANGER BUTTON VARIANT */
184
+
185
+ /* Danger button base styles and icon */
97
186
  button[data-type='danger'] hy-icon {
98
187
  --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
99
188
  }
@@ -102,15 +191,20 @@ const buttonStyles = css `
102
191
  background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));
103
192
  color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
104
193
  }
194
+
195
+ /* Danger button with dashed border variant */
105
196
  button[data-type='danger'].button-dashed {
106
197
  border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));
107
198
  }
199
+
200
+ /* Danger button disabled state */
108
201
  button[data-type='danger']:disabled {
109
202
  border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));
110
203
  background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));
111
204
  color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));
112
205
  }
113
206
 
207
+ /* Danger button hover state */
114
208
  button[data-type='danger']:hover:not(:disabled) {
115
209
  background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));
116
210
  border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));
@@ -120,12 +214,18 @@ const buttonStyles = css `
120
214
  --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
121
215
  }
122
216
 
217
+ /* Danger button active state */
123
218
  button[data-type='danger']:active:not(:disabled) {
124
219
  background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));
125
220
  border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));
126
221
  outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));
127
222
  outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));
128
223
  }
224
+
225
+ /* PRIMARY BUTTON VARIANT */
226
+ /* PRIMARY BUTTON VARIANT */
227
+
228
+ /* Primary button base styles and icon */
129
229
  button[data-type='primary'] hy-icon {
130
230
  --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
131
231
  }
@@ -134,16 +234,20 @@ const buttonStyles = css `
134
234
  background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));
135
235
  color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
136
236
  }
237
+
238
+ /* Primary button with dashed border variant */
137
239
  button[data-type='primary'].button-dashed {
138
240
  border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));
139
241
  }
140
242
 
243
+ /* Primary button disabled state */
141
244
  button[data-type='primary']:disabled {
142
245
  border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));
143
246
  background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));
144
247
  color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));
145
248
  }
146
249
 
250
+ /* Primary button hover state */
147
251
  button[data-type='primary']:hover:not(:disabled) {
148
252
  background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));
149
253
  border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));
@@ -152,12 +256,19 @@ const buttonStyles = css `
152
256
  button[data-type='primary']:hover:not(:disabled) hy-icon {
153
257
  --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
154
258
  }
259
+
260
+ /* Primary button active state */
155
261
  button[data-type='primary']:active:not(:disabled) {
156
262
  border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));
157
263
  background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));
158
264
  outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));
159
265
  outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));
160
266
  }
267
+
268
+ /* GHOST BUTTON VARIANT */
269
+ /* GHOST BUTTON VARIANT */
270
+
271
+ /* Ghost button base styles and icon */
161
272
  button[data-type='ghost'] hy-icon {
162
273
  --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
163
274
  }
@@ -166,15 +277,20 @@ const buttonStyles = css `
166
277
  color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
167
278
  border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));
168
279
  }
280
+
281
+ /* Ghost button with dashed border variant */
169
282
  button[data-type='ghost'].button-dashed {
170
283
  border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));
171
284
  }
285
+
286
+ /* Ghost button disabled state */
172
287
  button[data-type='ghost']:disabled {
173
288
  background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));
174
289
  color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));
175
290
  border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));
176
291
  }
177
292
 
293
+ /* Ghost button hover state */
178
294
  button[data-type='ghost']:hover:not(:disabled) {
179
295
  background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));
180
296
  color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
@@ -183,10 +299,17 @@ const buttonStyles = css `
183
299
  button[data-type='ghost']:hover:not(:disabled) hy-icon {
184
300
  --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
185
301
  }
302
+
303
+ /* Ghost button active state */
186
304
  button[data-type='ghost']:active:not(:disabled) {
187
305
  background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));
188
306
  border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));
189
307
  }
308
+
309
+ /* SECONDARY BUTTON VARIANT */
310
+ /* SECONDARY BUTTON VARIANT */
311
+
312
+ /* Secondary button base styles and icon */
190
313
  button[data-type='secondary'] hy-icon {
191
314
  --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
192
315
  }
@@ -195,14 +318,20 @@ const buttonStyles = css `
195
318
  color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
196
319
  border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));
197
320
  }
321
+
322
+ /* Secondary button with dashed border variant */
198
323
  button[data-type='secondary'].button-dashed {
199
324
  border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));
200
325
  }
326
+
327
+ /* Secondary button disabled state */
201
328
  button[data-type='secondary']:disabled {
202
329
  background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));
203
330
  color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));
204
331
  border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));
205
332
  }
333
+
334
+ /* Secondary button hover state */
206
335
  button[data-type='secondary']:hover:not(:disabled) {
207
336
  background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));
208
337
  color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
@@ -212,17 +341,33 @@ const buttonStyles = css `
212
341
  --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
213
342
  }
214
343
 
344
+ /* Secondary button active state */
215
345
  button[data-type='secondary']:active:not(:disabled) {
216
346
  background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));
217
347
  border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));
218
348
  outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));
219
349
  outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));
220
350
  }
351
+
352
+ /* ========================================
353
+ * UTILITY CLASSES
354
+ * ======================================== */
355
+
356
+ /* Dashed border style modifier */
221
357
  .button-dashed {
222
358
  border-style: dashed;
223
359
  }
360
+
361
+ /* ========================================
362
+ * CSS CUSTOM PROPERTIES (Design Tokens)
363
+ * ======================================== */
364
+ /* ========================================
365
+ * CSS CUSTOM PROPERTIES (Design Tokens)
366
+ * ======================================== */
224
367
  :host {
225
- /* Default Button Style */
368
+ /* ----------------------------------------
369
+ * DEFAULT BUTTON STYLES
370
+ * ---------------------------------------- */
226
371
  --hybrid-button-local-border-top: 2px solid #d0d0d0;
227
372
  --hybrid-button-local-border-bottom: 2px solid #d0d0d0;
228
373
  --hybrid-button-local-border-left: 2px solid #d0d0d0;
@@ -247,10 +392,15 @@ const buttonStyles = css `
247
392
  --hybrid-button-local-width: auto;
248
393
  --hybrid-button-local-padding-y: 0.5rem;
249
394
  --hybrid-button-local-padding-x: 0.6rem;
250
- --hybrid-button-local-icon-width:18px;
251
- --hybrid-button-local-icon-height:14px;
395
+ --hybrid-button-local-icon-width: 18px;
396
+ --hybrid-button-local-icon-height: 14px;
252
397
 
253
- /* Primary Button Style */
398
+ /* ----------------------------------------
399
+ * PRIMARY BUTTON STYLES
400
+ * ---------------------------------------- */
401
+ /* ----------------------------------------
402
+ * PRIMARY BUTTON STYLES
403
+ * ---------------------------------------- */
254
404
  --hybrid-button-local-primary-border-color: #0f62fe;
255
405
  --hybrid-button-local-primary-background-color: #0f62fe;
256
406
  --hybrid-button-local-primary-text-color: #ffffff;
@@ -265,7 +415,12 @@ const buttonStyles = css `
265
415
  --hybrid-button-local-primary-disabled-border-color: #c6c6c6;
266
416
  --hybrid-button-local-primary-dashed-border-color: #ffffff;
267
417
 
268
- /* Danger button style */
418
+ /* ----------------------------------------
419
+ * DANGER BUTTON STYLES
420
+ * ---------------------------------------- */
421
+ /* ----------------------------------------
422
+ * DANGER BUTTON STYLES
423
+ * ---------------------------------------- */
269
424
  --hybrid-button-local-danger-background-color: #da1e28;
270
425
  --hybrid-button-local-danger-text-color: #ffffff;
271
426
  --hybrid-button-local-danger-border-color: #da1e28;
@@ -280,7 +435,12 @@ const buttonStyles = css `
280
435
  --hybrid-button-local-danger-disabled-border-color: #c6c6c6;
281
436
  --hybrid-button-local-danger-dashed-border-color: #ffffff;
282
437
 
283
- /* Ghost button style */
438
+ /* ----------------------------------------
439
+ * GHOST BUTTON STYLES
440
+ * ---------------------------------------- */
441
+ /* ----------------------------------------
442
+ * GHOST BUTTON STYLES
443
+ * ---------------------------------------- */
284
444
  --hybrid-button-local-ghost-background-color: #ffffff;
285
445
  --hybrid-button-local-ghost-text-color: #0f62fe;
286
446
  --hybrid-button-local-ghost-border-color: #ffffff;
@@ -295,8 +455,13 @@ const buttonStyles = css `
295
455
  --hybrid-button-local-ghost-disabled-border-color: #ffffff;
296
456
  --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
297
457
 
298
- /* Secondary button style */
458
+ /* ----------------------------------------
459
+ * SECONDARY BUTTON STYLES
460
+ * ---------------------------------------- */
299
461
 
462
+ /* ----------------------------------------
463
+ * SECONDARY BUTTON STYLES
464
+ * ---------------------------------------- */
300
465
  --hybrid-button-local-secondary-background-color: #393939;
301
466
  --hybrid-button-local-secondary-border-color: #393939;
302
467
  --hybrid-button-local-secondary-text-color: #ffffff;
@@ -311,20 +476,38 @@ const buttonStyles = css `
311
476
  --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;
312
477
  --hybrid-button-local-secondary-dashed-border-color: #ffffff;
313
478
 
314
- /* Sizes */
479
+ /* ----------------------------------------
480
+ * SIZE VARIANTS
481
+ * ---------------------------------------- */
315
482
 
483
+ /* ----------------------------------------
484
+ * SIZE VARIANTS
485
+ * ---------------------------------------- */
486
+ /* Large button sizing */
316
487
  --hybrid-large-button-local-padding-y: 0.5rem;
317
488
  --hybrid-large-button-local-padding-x: 0.9rem;
318
489
  --hybrid-large-button-local-font-size: 1rem;
319
490
 
491
+ /* Small button sizing */
320
492
  --hybrid-small-button-local-padding-y: 0.5rem;
321
493
  --hybrid-small-button-local-padding-x: 0.4rem;
322
494
  --hybrid-small-button-local-font-size: 0.7rem;
323
495
  }
324
496
 
325
- /* Dark theme styles using data-theme attribute on button element */
326
- button[data-theme="dark"] {
327
-
497
+ /* ========================================
498
+ * DARK THEME OVERRIDES
499
+ * ======================================== */
500
+
501
+ /**
502
+ * Dark theme styles using data-theme attribute on button element
503
+ * These override the light theme defaults when data-theme="dark" is applied
504
+ */
505
+ /**
506
+ * Dark theme styles using data-theme attribute on button element
507
+ * These override the light theme defaults when data-theme="dark" is applied
508
+ */
509
+ button[data-theme="dark"] {
510
+ /* Default button dark theme overrides */
328
511
  --hybrid-button-local-background-color: #000000;
329
512
  --hybrid-button-local-text-color: #ffffff;
330
513
  --hybrid-button-local-hover-border-color: #6f6f6f;
@@ -333,7 +516,7 @@ const buttonStyles = css `
333
516
  --hybrid-button-local-active-color: #c6c6c6;
334
517
  --hybrid-button-local-disabled-background-color: #c6c6c6;
335
518
 
336
- /* Primary button style */
519
+ /* Primary button dark theme overrides */
337
520
  --hybrid-button-local-primary-outline: 1px solid black;
338
521
  --hybrid-button-local-primary-outline-offset: -3px;
339
522
  --hybrid-button-local-primary-active-border-color: #ffffff;
@@ -341,7 +524,7 @@ const buttonStyles = css `
341
524
  --hybrid-button-local-primary-disabled-background-color: #8d8d8d;
342
525
  --hybrid-button-local-primary-disabled-border-color: #8d8d8d;
343
526
 
344
- /* Secondary button style */
527
+ /* Secondary button dark theme overrides */
345
528
  --hybrid-button-local-secondary-background-color: #6f6f6f;
346
529
  --hybrid-button-local-secondary-border-color: #6f6f6f;
347
530
  --hybrid-button-local-secondary-text-color: #ffffff;
@@ -356,7 +539,7 @@ const buttonStyles = css `
356
539
  --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;
357
540
  --hybrid-button-local-secondary-dashed-border-color: #ffffff;
358
541
 
359
- /* Ghost button style */
542
+ /* Ghost button dark theme overrides */
360
543
  --hybrid-button-local-ghost-background-color: transparent;
361
544
  --hybrid-button-local-ghost-text-color: #78a9ff;
362
545
  --hybrid-button-local-ghost-border-color: transparent;
@@ -371,7 +554,7 @@ const buttonStyles = css `
371
554
  --hybrid-button-local-ghost-disabled-border-color: transparent;
372
555
  --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
373
556
 
374
- /* Danger button style */
557
+ /* Danger button dark theme overrides */
375
558
  --hybrid-button-local-danger-outline: 1px solid #000000;
376
559
  --hybrid-button-local-danger-outline-offset: -3px;
377
560
  --hybrid-button-local-danger-hover-background-color: #ba1b23;
@@ -384,5 +567,22 @@ const buttonStyles = css `
384
567
  --hybrid-button-local-danger-dashed-border-color: #ffffff;
385
568
  }
386
569
  `;
570
+ /**
571
+ * Exported styles for the nr-button component
572
+ *
573
+ * @description
574
+ * This export provides the complete styling system for the button component,
575
+ * including all variants, states, sizes, and theme support.
576
+ *
577
+ * @usage
578
+ * Import and use in the component's styles property:
579
+ * ```typescript
580
+ * import { styles } from './nr-button.style.ts';
581
+ *
582
+ * @Component({
583
+ * styles: styles
584
+ * })
585
+ * ```
586
+ */
387
587
  export const styles = [buttonStyles];
388
- //# sourceMappingURL=hy-button.style.js.map
588
+ //# sourceMappingURL=nr-button.style.js.map
package/nr-button.style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button.style.js","sourceRoot":"","sources":["../../../src/components/button/nr-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwiBvB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-button component, including:\n * - Base button styles with CSS custom properties for theming\n * - Multiple button variants (primary, secondary, ghost, danger)\n * - Size variations (small, large)\n * - State styles (hover, active, disabled, loading)\n * - Dark theme support\n * - Icon positioning and styling\n * - Responsive design considerations\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nconst buttonStyles = css`\n /* Container for button content and icon positioning */\n #container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n /* Icon positioned to the right of text when iconPosition='right' */\n :host([iconPosition='right']) #container {\n flex-direction: row-reverse;\n }\n\n /* Icon styling within button */\n hy-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2px;\n }\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n button {\n /* Dimensions */\n height: var(--hybrid-button-height,var(--hybrid-button-local-height));\n width: var(--hybrid-button-width,var(--hybrid-button-local-width));\n \n /* Border properties - individual sides for granular control */\n border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));\n border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));\n border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));\n border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));\n \n /* Border radius - individual corners for design flexibility */\n border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));\n \n /* Colors */\n background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));\n color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n \n /* Typography */\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));\n text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));\n \n /* Spacing */\n padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));\n padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n }\n \n /* Icon styling within button - inherits text color and size */\n button hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));\n --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));\n }\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n button:hover:not(:disabled) {\n cursor: pointer;\n border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));\n background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));\n color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n \n /* Icon color on hover */\n button:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n\n /* \n * Active state styles\n * Applied when button is being clicked/pressed but not disabled\n */\n button:active:not(:disabled) {\n outline: none;\n border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));\n color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n \n /* Icon color on active state */\n button:active:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n button:disabled {\n cursor: auto;\n background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));\n color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));\n border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));\n }\n\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Small button size variant */\n\n /* Small button size variant */\n button[data-size='small'] {\n padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));\n }\n\n /* Large button size variant */\n button[data-size='large'] {\n padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));\n }\n\n /* ========================================\n * BUTTON STATES\n * ======================================== */\n\n /* Loading state - reduces opacity to indicate processing */\n button[data-state='loading'] {\n opacity: 0.5;\n }\n\n /* ========================================\n * BUTTON TYPE VARIANTS\n * ======================================== */\n\n /* DANGER BUTTON VARIANT */\n /* DANGER BUTTON VARIANT */\n \n /* Danger button base styles and icon */\n button[data-type='danger'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger'] {\n border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));\n background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n \n /* Danger button with dashed border variant */\n button[data-type='danger'].button-dashed {\n border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));\n }\n \n /* Danger button disabled state */\n button[data-type='danger']:disabled {\n border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));\n background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));\n color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));\n }\n\n /* Danger button hover state */\n button[data-type='danger']:hover:not(:disabled) {\n background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));\n border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n\n /* Danger button active state */\n button[data-type='danger']:active:not(:disabled) {\n background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));\n border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));\n outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));\n outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));\n }\n\n /* PRIMARY BUTTON VARIANT */\n /* PRIMARY BUTTON VARIANT */\n \n /* Primary button base styles and icon */\n button[data-type='primary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary'] {\n border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));\n background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button with dashed border variant */\n button[data-type='primary'].button-dashed {\n border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));\n }\n\n /* Primary button disabled state */\n button[data-type='primary']:disabled {\n border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));\n background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));\n color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));\n }\n\n /* Primary button hover state */\n button[data-type='primary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));\n border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button active state */\n button[data-type='primary']:active:not(:disabled) {\n border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));\n background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));\n outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));\n outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));\n }\n\n /* GHOST BUTTON VARIANT */\n /* GHOST BUTTON VARIANT */\n \n /* Ghost button base styles and icon */\n button[data-type='ghost'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n }\n button[data-type='ghost'] {\n background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));\n color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));\n }\n \n /* Ghost button with dashed border variant */\n button[data-type='ghost'].button-dashed {\n border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));\n }\n \n /* Ghost button disabled state */\n button[data-type='ghost']:disabled {\n background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));\n color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));\n border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));\n }\n\n /* Ghost button hover state */\n button[data-type='ghost']:hover:not(:disabled) {\n background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));\n color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));\n }\n button[data-type='ghost']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n }\n \n /* Ghost button active state */\n button[data-type='ghost']:active:not(:disabled) {\n background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));\n border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));\n }\n\n /* SECONDARY BUTTON VARIANT */\n /* SECONDARY BUTTON VARIANT */\n \n /* Secondary button base styles and icon */\n button[data-type='secondary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n button[data-type='secondary'] {\n background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));\n }\n \n /* Secondary button with dashed border variant */\n button[data-type='secondary'].button-dashed {\n border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));\n }\n \n /* Secondary button disabled state */\n button[data-type='secondary']:disabled {\n background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));\n color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));\n border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));\n }\n \n /* Secondary button hover state */\n button[data-type='secondary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));\n }\n button[data-type='secondary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n\n /* Secondary button active state */\n button[data-type='secondary']:active:not(:disabled) {\n background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));\n border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));\n outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));\n outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));\n }\n\n /* ========================================\n * UTILITY CLASSES\n * ======================================== */\n\n /* Dashed border style modifier */\n .button-dashed {\n border-style: dashed;\n }\n\n /* ========================================\n * CSS CUSTOM PROPERTIES (Design Tokens)\n * ======================================== */\n /* ========================================\n * CSS CUSTOM PROPERTIES (Design Tokens)\n * ======================================== */\n :host {\n /* ----------------------------------------\n * DEFAULT BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-border-top: 2px solid #d0d0d0;\n --hybrid-button-local-border-bottom: 2px solid #d0d0d0;\n --hybrid-button-local-border-left: 2px solid #d0d0d0;\n --hybrid-button-local-border-right: 2px solid #d0d0d0;\n --hybrid-button-local-border-top-left-radius: 0px;\n --hybrid-button-local-border-top-right-radius: 0px;\n --hybrid-button-local-border-bottom-left-radius: 0px;\n --hybrid-button-local-border-bottom-right-radius: 0px;\n --hybrid-button-local-background-color: #f9f9f9;\n --hybrid-button-local-text-color: #393939;\n --hybrid-button-local-hover-border-color: #1677ff;\n --hybrid-button-local-hover-color: #1677ff;\n --hybrid-button-local-font-size: 0.9rem;\n --hybrid-button-local-font-weight: normal;\n --hybrid-button-local-text-transform: none;\n --hybrid-button-local-active-border-color: #1661b1;\n --hybrid-button-local-active-color: #184d86;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n --hybrid-button-local-disabled-text-color: #8d8d8d;\n --hybrid-button-local-disabled-border-color: #bbb;\n --hybrid-button-local-height: auto;\n --hybrid-button-local-width: auto;\n --hybrid-button-local-padding-y: 0.5rem;\n --hybrid-button-local-padding-x: 0.6rem;\n --hybrid-button-local-icon-width: 18px;\n --hybrid-button-local-icon-height: 14px;\n\n /* ----------------------------------------\n * PRIMARY BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * PRIMARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-primary-border-color: #0f62fe;\n --hybrid-button-local-primary-background-color: #0f62fe;\n --hybrid-button-local-primary-text-color: #ffffff;\n --hybrid-button-local-primary-outline: 1px solid white;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-hover-background-color: #0353e9;\n --hybrid-button-local-primary-hover-border-color: #0353e9;\n --hybrid-button-local-primary-active-background-color: #0f62fe;\n --hybrid-button-local-primary-active-border-color: #0f62fe;\n --hybrid-button-local-primary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-primary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * DANGER BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * DANGER BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-danger-background-color: #da1e28;\n --hybrid-button-local-danger-text-color: #ffffff;\n --hybrid-button-local-danger-border-color: #da1e28;\n --hybrid-button-local-danger-outline: 1px solid white;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #0f62fe;\n --hybrid-button-local-danger-disabled-background-color: #c6c6c6;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #c6c6c6;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * GHOST BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * GHOST BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-ghost-background-color: #ffffff;\n --hybrid-button-local-ghost-text-color: #0f62fe;\n --hybrid-button-local-ghost-border-color: #ffffff;\n --hybrid-button-local-ghost-active-background-color: #ffffff;\n --hybrid-button-local-ghost-active-text-color: #054ada;\n --hybrid-button-local-ghost-active-border-color: #0f62fe;\n --hybrid-button-local-ghost-hover-background-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-border-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-text-color: #054ada;\n --hybrid-button-local-ghost-disabled-background-color: #ffffff;\n --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;\n --hybrid-button-local-ghost-disabled-border-color: #ffffff;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* ----------------------------------------\n * SECONDARY BUTTON STYLES\n * ---------------------------------------- */\n\n /* ----------------------------------------\n * SECONDARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-secondary-background-color: #393939;\n --hybrid-button-local-secondary-border-color: #393939;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-outline: 1px solid white;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #4c4c4c;\n --hybrid-button-local-secondary-hover-border-color: #4c4c4c;\n --hybrid-button-local-secondary-active-background-color: #393939;\n --hybrid-button-local-secondary-active-border-color: #0f62fe;\n --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * SIZE VARIANTS\n * ---------------------------------------- */\n\n /* ----------------------------------------\n * SIZE VARIANTS\n * ---------------------------------------- */\n /* Large button sizing */\n --hybrid-large-button-local-padding-y: 0.5rem;\n --hybrid-large-button-local-padding-x: 0.9rem;\n --hybrid-large-button-local-font-size: 1rem;\n\n /* Small button sizing */\n --hybrid-small-button-local-padding-y: 0.5rem;\n --hybrid-small-button-local-padding-x: 0.4rem;\n --hybrid-small-button-local-font-size: 0.7rem;\n }\n\n /* ========================================\n * DARK THEME OVERRIDES\n * ======================================== */\n \n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n button[data-theme=\"dark\"] {\n /* Default button dark theme overrides */\n --hybrid-button-local-background-color: #000000;\n --hybrid-button-local-text-color: #ffffff;\n --hybrid-button-local-hover-border-color: #6f6f6f;\n --hybrid-button-local-hover-color: #6f6f6f;\n --hybrid-button-local-active-border-color: #c6c6c6;\n --hybrid-button-local-active-color: #c6c6c6;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n /* Primary button dark theme overrides */\n --hybrid-button-local-primary-outline: 1px solid black;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-active-border-color: #ffffff;\n --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n /* Secondary button dark theme overrides */\n --hybrid-button-local-secondary-background-color: #6f6f6f;\n --hybrid-button-local-secondary-border-color: #6f6f6f;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-active-border-color: #ffffff;\n --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n --hybrid-button-local-secondary-outline: 1px solid black;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #606060;\n --hybrid-button-local-secondary-hover-border-color: #606060;\n --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Ghost button dark theme overrides */\n --hybrid-button-local-ghost-background-color: transparent;\n --hybrid-button-local-ghost-text-color: #78a9ff;\n --hybrid-button-local-ghost-border-color: transparent;\n --hybrid-button-local-ghost-active-background-color: transparent;\n --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n --hybrid-button-local-ghost-active-border-color: #ffffff;\n --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n --hybrid-button-local-ghost-disabled-background-color: transparent;\n --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n --hybrid-button-local-ghost-disabled-border-color: transparent;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Danger button dark theme overrides */\n --hybrid-button-local-danger-outline: 1px solid #000000;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #ffffff;\n --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n }\n`;\n\n/**\n * Exported styles for the nr-button component\n * \n * @description\n * This export provides the complete styling system for the button component,\n * including all variants, states, sizes, and theme support.\n * \n * @usage\n * Import and use in the component's styles property:\n * ```typescript\n * import { styles } from './nr-button.style.ts';\n * \n * @Component({\n * styles: styles\n * })\n * ```\n */\nexport const styles = [buttonStyles];\n"]}
package/{hy-button.constants.d.ts → nr-button.types.d.ts} RENAMED
@@ -8,11 +8,11 @@ export declare const enum ButtonType {
8
8
  export declare const enum ButtonSize {
9
9
  Small = "small",
10
10
  Default = "default",
11
- Large = "Large"
11
+ Large = "large"
12
12
  }
13
13
  export declare const enum IconPosition {
14
14
  Left = "left",
15
15
  Right = "right"
16
16
  }
17
17
  export declare const EMPTY_STRING = "";
18
- //# sourceMappingURL=hy-button.constants.d.ts.map
18
+ //# sourceMappingURL=nr-button.types.d.ts.map
package/nr-button.types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/nr-button.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,UAAU;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,0BAAkB,YAAY;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/nr-button.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export const EMPTY_STRING = '';
2
+ //# sourceMappingURL=nr-button.types.js.map
package/nr-button.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button.types.js","sourceRoot":"","sources":["../../../src/components/button/nr-button.types.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Danger = 'danger',\n Ghost = 'ghost',\n Default = 'default',\n}\n\nexport const enum ButtonSize {\n Small = 'small',\n Default = 'default',\n Large = 'large',\n}\n\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\nexport const EMPTY_STRING = '';\n"]}
package/package.json CHANGED
@@ -1,12 +1,20 @@
1
1
  {
2
2
  "name": "@nuralyui/button",
3
- "version": "0.0.10",
4
- "description": "",
3
+ "version": "0.0.11",
4
+ "description": "Button component for NuralyUI library",
5
5
  "main": "index.js",
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "test": "echo \"Error: no test specified\" && exit 1"
9
9
  },
10
10
  "author": "Labidi Aymen",
11
- "license": "ISC"
11
+ "license": "ISC",
12
+ "nuralyui": {
13
+ "requiredComponents": [
14
+ "hy-icon"
15
+ ]
16
+ },
17
+ "peerDependencies": {
18
+ "@nuralyui/icon": "^0.0.1"
19
+ }
12
20
  }
package/react.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { HyButtonElement } from './hy-button.component.js';
2
- export declare const HyButton: import("@lit-labs/react").ReactWebComponent<HyButtonElement, {
1
+ import { NrButtonElement } from './nr-button.component.js';
2
+ export declare const NrButton: import("@lit-labs/react").ReactWebComponent<NrButtonElement, {
3
3
  click: string;
4
4
  }>;
5
5
  //# sourceMappingURL=react.d.ts.map
package/react.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,eAAO,MAAM,QAAQ;;EAOnB,CAAC"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,eAAO,MAAM,QAAQ;;EAOnB,CAAC"}