@attrus-ds/core 0.2.0 → 0.3.1

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 (80) hide show
  1. package/LICENSE +27 -27
  2. package/dist/assets/flags/Brazil-rounded.svg +15 -15
  3. package/dist/assets/flags/Brazil-square.svg +16 -16
  4. package/dist/assets/flags/Chile-rounded.svg +10 -10
  5. package/dist/assets/flags/Chile-square.svg +10 -10
  6. package/dist/assets/flags/Colombia-rounded.svg +9 -9
  7. package/dist/assets/flags/Colombia-square.svg +9 -9
  8. package/dist/assets/flags/EUA-rounded.svg +10 -10
  9. package/dist/assets/flags/EUA-square.svg +10 -10
  10. package/dist/assets/flags/EUR-rounded.svg +8 -8
  11. package/dist/assets/flags/EUR-square.svg +8 -8
  12. package/dist/assets/flags/Mexico-rounded.svg +18 -18
  13. package/dist/assets/flags/Mexico-square.svg +18 -18
  14. package/dist/assets/icon-attrus-dark.svg +2 -2
  15. package/dist/assets/icon-attrus-light.svg +2 -2
  16. package/dist/assets/logo-attrus-dark.svg +7 -7
  17. package/dist/assets/logo-attrus-light.svg +7 -7
  18. package/dist/css/components/buttons.css +301 -301
  19. package/dist/css/components/callout.css +195 -195
  20. package/dist/css/components/cards.css +272 -272
  21. package/dist/css/components/combobox.css +319 -319
  22. package/dist/css/components/empty-states.css +61 -61
  23. package/dist/css/components/inputs.css +975 -975
  24. package/dist/css/components/number-input.css +138 -138
  25. package/dist/css/components/overlays.css +374 -374
  26. package/dist/css/components/primitives.css +314 -314
  27. package/dist/css/components/sidebar.css +179 -179
  28. package/dist/css/components/smart-search.css +91 -91
  29. package/dist/css/components/status-pills.css +207 -207
  30. package/dist/css/components/stepper.css +309 -309
  31. package/dist/css/components/table.css +602 -602
  32. package/dist/css/components/tabs.css +319 -319
  33. package/dist/css/components/toast.css +243 -243
  34. package/dist/css/components/tooltip.css +231 -231
  35. package/dist/css/components/topbar.css +148 -148
  36. package/dist/css/tokens.css +666 -666
  37. package/dist/react/AppSidebar/AppSidebar.d.ts +50 -50
  38. package/dist/react/AppSidebar/AppSidebar.tsx +197 -197
  39. package/dist/react/AppTopbar/AppTopbar.d.ts +58 -58
  40. package/dist/react/AppTopbar/AppTopbar.tsx +203 -203
  41. package/dist/react/Atoms/Atoms.d.ts +149 -149
  42. package/dist/react/Atoms/Atoms.tsx +407 -407
  43. package/dist/react/Button/Button.d.ts +25 -25
  44. package/dist/react/Button/Button.tsx +83 -83
  45. package/dist/react/Callout/Callout.d.ts +29 -29
  46. package/dist/react/Callout/Callout.tsx +98 -98
  47. package/dist/react/Card/Card.d.ts +38 -38
  48. package/dist/react/Card/Card.tsx +93 -93
  49. package/dist/react/Combobox/Combobox.d.ts +52 -52
  50. package/dist/react/Combobox/Combobox.tsx +254 -254
  51. package/dist/react/DataTable/DataTable.d.ts +81 -81
  52. package/dist/react/DataTable/DataTable.tsx +308 -308
  53. package/dist/react/Drawer/Drawer.d.ts +35 -35
  54. package/dist/react/Drawer/Drawer.tsx +226 -226
  55. package/dist/react/Input/Input.d.ts +155 -155
  56. package/dist/react/Input/Input.tsx +478 -478
  57. package/dist/react/Modal/Modal.d.ts +27 -27
  58. package/dist/react/Modal/Modal.tsx +173 -173
  59. package/dist/react/NumberInput/NumberInput.d.ts +25 -25
  60. package/dist/react/NumberInput/NumberInput.tsx +117 -117
  61. package/dist/react/Pill/Pill.d.ts +31 -31
  62. package/dist/react/Pill/Pill.tsx +104 -104
  63. package/dist/react/SearchPill/SearchPill.d.ts +14 -14
  64. package/dist/react/SearchPill/SearchPill.tsx +40 -40
  65. package/dist/react/SmartSearch/SmartSearch.d.ts +65 -65
  66. package/dist/react/SmartSearch/SmartSearch.tsx +271 -271
  67. package/dist/react/Stepper/Stepper.d.ts +25 -25
  68. package/dist/react/Stepper/Stepper.tsx +94 -94
  69. package/dist/react/Tabs/Tabs.d.ts +32 -32
  70. package/dist/react/Tabs/Tabs.tsx +147 -147
  71. package/dist/react/Toast/Toast.d.ts +30 -30
  72. package/dist/react/Toast/Toast.tsx +94 -94
  73. package/dist/react/Tooltip/Tooltip.d.ts +23 -23
  74. package/dist/react/Tooltip/Tooltip.tsx +80 -80
  75. package/dist/react/ZeroState/ZeroState.d.ts +17 -17
  76. package/dist/react/ZeroState/ZeroState.tsx +45 -45
  77. package/dist/react/index.ts +35 -35
  78. package/dist/tokens/attrus-tokens.flat.json +1234 -1234
  79. package/dist/tokens/attrus-tokens.json +1089 -1089
  80. package/package.json +64 -64
package/dist/css/components/number-input.css CHANGED
@@ -1,138 +1,138 @@
1
- /* ============================================================
2
- NUMBER INPUT — numeric field with − / + accelerator buttons
3
- For bounded quantities: counts, percentages, days, seats.
4
- All values from tokens.
5
-
6
- Renamed from .stepper (Nov 2025) to free the "Stepper" name
7
- for the multi-step flow indicator component. See stepper.css.
8
- ============================================================ */
9
-
10
- .number-input {
11
- display: inline-flex;
12
- align-items: stretch;
13
- height: 40px;
14
- background: var(--color-background-surface);
15
- border: 1px solid var(--color-border-default);
16
- border-radius: var(--radius-sm);
17
- font-family: var(--font-sans);
18
- transition: var(--transition-fast);
19
- overflow: hidden;
20
- }
21
- .number-input:hover { border-color: var(--color-border-strong); }
22
- .number-input:focus-within {
23
- border-color: var(--color-foreground-accent);
24
- box-shadow: var(--shadow-focus);
25
- }
26
-
27
- .number-input-btn {
28
- display: inline-flex;
29
- align-items: center;
30
- justify-content: center;
31
- width: 36px;
32
- background: transparent;
33
- border: none;
34
- color: var(--color-foreground-secondary);
35
- cursor: pointer;
36
- flex-shrink: 0;
37
- transition: var(--transition-fast);
38
- }
39
- .number-input-btn:hover {
40
- background: var(--color-background-hover);
41
- color: var(--color-foreground-default);
42
- }
43
- .number-input-btn:focus-visible { outline: none; background: var(--color-background-hover); }
44
- .number-input-btn:disabled,
45
- .number-input-btn[aria-disabled="true"] {
46
- color: var(--color-foreground-muted);
47
- cursor: not-allowed;
48
- background: transparent;
49
- }
50
- .number-input-btn i, .number-input-btn svg {
51
- width: 14px; height: 14px;
52
- stroke-width: 2.4;
53
- }
54
-
55
- .number-input-field {
56
- flex: 1;
57
- min-width: 0;
58
- width: 80px;
59
- padding: 0 var(--space-2);
60
- background: transparent;
61
- border: none;
62
- border-left: 1px solid var(--color-border-subtle);
63
- border-right: 1px solid var(--color-border-subtle);
64
- font-family: var(--font-mono);
65
- font-size: var(--fs-sm);
66
- font-weight: var(--w-medium);
67
- color: var(--color-foreground-default);
68
- text-align: center;
69
- -moz-appearance: textfield;
70
- }
71
- .number-input-field::-webkit-outer-spin-button,
72
- .number-input-field::-webkit-inner-spin-button {
73
- -webkit-appearance: none; margin: 0;
74
- }
75
- .number-input-field:focus { outline: none; }
76
-
77
- /* Sizes */
78
- .number-input-sm { height: 32px; }
79
- .number-input-sm .number-input-btn { width: 28px; }
80
- .number-input-sm .number-input-btn i, .number-input-sm .number-input-btn svg { width: 12px; height: 12px; }
81
- .number-input-sm .number-input-field { font-size: var(--fs-xs); width: 56px; }
82
-
83
- .number-input-lg { height: 48px; }
84
- .number-input-lg .number-input-btn { width: 44px; }
85
- .number-input-lg .number-input-btn i, .number-input-lg .number-input-btn svg { width: 16px; height: 16px; }
86
- .number-input-lg .number-input-field { font-size: var(--fs-md); width: 96px; }
87
-
88
- /* With suffix (currency, unit) */
89
- .number-input-suffix {
90
- display: inline-flex;
91
- align-items: center;
92
- padding: 0 var(--space-3);
93
- font-family: var(--font-mono);
94
- font-size: var(--fs-xs);
95
- font-weight: var(--w-semibold);
96
- letter-spacing: var(--ls-caps);
97
- text-transform: uppercase;
98
- color: var(--color-foreground-muted);
99
- border-left: 1px solid var(--color-border-subtle);
100
- background: var(--color-background-subtle);
101
- }
102
-
103
- .number-input-prefix {
104
- display: inline-flex;
105
- align-items: center;
106
- padding: 0 var(--space-3);
107
- font-family: var(--font-mono);
108
- font-size: var(--fs-sm);
109
- font-weight: var(--w-semibold);
110
- color: var(--color-foreground-muted);
111
- border-right: 1px solid var(--color-border-subtle);
112
- background: var(--color-background-subtle);
113
- }
114
-
115
- /* States */
116
- .number-input.is-disabled,
117
- .number-input:has(.number-input-field:disabled) {
118
- background: var(--color-background-subtle);
119
- border-color: var(--color-border-subtle);
120
- cursor: not-allowed;
121
- }
122
- .number-input.is-disabled .number-input-field,
123
- .number-input-field:disabled {
124
- color: var(--color-foreground-muted);
125
- cursor: not-allowed;
126
- }
127
-
128
- .number-input.is-invalid {
129
- border-color: var(--color-feedback-danger-border);
130
- }
131
- .number-input.is-invalid:focus-within {
132
- box-shadow: 0 0 0 3px var(--color-feedback-danger-background);
133
- }
134
-
135
- /* Reduced motion */
136
- @media (prefers-reduced-motion: reduce) {
137
- .number-input, .number-input-btn { transition: none; }
138
- }
1
+ /* ============================================================
2
+ NUMBER INPUT — numeric field with − / + accelerator buttons
3
+ For bounded quantities: counts, percentages, days, seats.
4
+ All values from tokens.
5
+
6
+ Renamed from .stepper (Nov 2025) to free the "Stepper" name
7
+ for the multi-step flow indicator component. See stepper.css.
8
+ ============================================================ */
9
+
10
+ .number-input {
11
+ display: inline-flex;
12
+ align-items: stretch;
13
+ height: 40px;
14
+ background: var(--color-background-surface);
15
+ border: 1px solid var(--color-border-default);
16
+ border-radius: var(--radius-sm);
17
+ font-family: var(--font-sans);
18
+ transition: var(--transition-fast);
19
+ overflow: hidden;
20
+ }
21
+ .number-input:hover { border-color: var(--color-border-strong); }
22
+ .number-input:focus-within {
23
+ border-color: var(--color-foreground-accent);
24
+ box-shadow: var(--shadow-focus);
25
+ }
26
+
27
+ .number-input-btn {
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ width: 36px;
32
+ background: transparent;
33
+ border: none;
34
+ color: var(--color-foreground-secondary);
35
+ cursor: pointer;
36
+ flex-shrink: 0;
37
+ transition: var(--transition-fast);
38
+ }
39
+ .number-input-btn:hover {
40
+ background: var(--color-background-hover);
41
+ color: var(--color-foreground-default);
42
+ }
43
+ .number-input-btn:focus-visible { outline: none; background: var(--color-background-hover); }
44
+ .number-input-btn:disabled,
45
+ .number-input-btn[aria-disabled="true"] {
46
+ color: var(--color-foreground-muted);
47
+ cursor: not-allowed;
48
+ background: transparent;
49
+ }
50
+ .number-input-btn i, .number-input-btn svg {
51
+ width: 14px; height: 14px;
52
+ stroke-width: 2.4;
53
+ }
54
+
55
+ .number-input-field {
56
+ flex: 1;
57
+ min-width: 0;
58
+ width: 80px;
59
+ padding: 0 var(--space-2);
60
+ background: transparent;
61
+ border: none;
62
+ border-left: 1px solid var(--color-border-subtle);
63
+ border-right: 1px solid var(--color-border-subtle);
64
+ font-family: var(--font-mono);
65
+ font-size: var(--fs-sm);
66
+ font-weight: var(--w-medium);
67
+ color: var(--color-foreground-default);
68
+ text-align: center;
69
+ -moz-appearance: textfield;
70
+ }
71
+ .number-input-field::-webkit-outer-spin-button,
72
+ .number-input-field::-webkit-inner-spin-button {
73
+ -webkit-appearance: none; margin: 0;
74
+ }
75
+ .number-input-field:focus { outline: none; }
76
+
77
+ /* Sizes */
78
+ .number-input-sm { height: 32px; }
79
+ .number-input-sm .number-input-btn { width: 28px; }
80
+ .number-input-sm .number-input-btn i, .number-input-sm .number-input-btn svg { width: 12px; height: 12px; }
81
+ .number-input-sm .number-input-field { font-size: var(--fs-xs); width: 56px; }
82
+
83
+ .number-input-lg { height: 48px; }
84
+ .number-input-lg .number-input-btn { width: 44px; }
85
+ .number-input-lg .number-input-btn i, .number-input-lg .number-input-btn svg { width: 16px; height: 16px; }
86
+ .number-input-lg .number-input-field { font-size: var(--fs-md); width: 96px; }
87
+
88
+ /* With suffix (currency, unit) */
89
+ .number-input-suffix {
90
+ display: inline-flex;
91
+ align-items: center;
92
+ padding: 0 var(--space-3);
93
+ font-family: var(--font-mono);
94
+ font-size: var(--fs-xs);
95
+ font-weight: var(--w-semibold);
96
+ letter-spacing: var(--ls-caps);
97
+ text-transform: uppercase;
98
+ color: var(--color-foreground-muted);
99
+ border-left: 1px solid var(--color-border-subtle);
100
+ background: var(--color-background-subtle);
101
+ }
102
+
103
+ .number-input-prefix {
104
+ display: inline-flex;
105
+ align-items: center;
106
+ padding: 0 var(--space-3);
107
+ font-family: var(--font-mono);
108
+ font-size: var(--fs-sm);
109
+ font-weight: var(--w-semibold);
110
+ color: var(--color-foreground-muted);
111
+ border-right: 1px solid var(--color-border-subtle);
112
+ background: var(--color-background-subtle);
113
+ }
114
+
115
+ /* States */
116
+ .number-input.is-disabled,
117
+ .number-input:has(.number-input-field:disabled) {
118
+ background: var(--color-background-subtle);
119
+ border-color: var(--color-border-subtle);
120
+ cursor: not-allowed;
121
+ }
122
+ .number-input.is-disabled .number-input-field,
123
+ .number-input-field:disabled {
124
+ color: var(--color-foreground-muted);
125
+ cursor: not-allowed;
126
+ }
127
+
128
+ .number-input.is-invalid {
129
+ border-color: var(--color-feedback-danger-border);
130
+ }
131
+ .number-input.is-invalid:focus-within {
132
+ box-shadow: 0 0 0 3px var(--color-feedback-danger-background);
133
+ }
134
+
135
+ /* Reduced motion */
136
+ @media (prefers-reduced-motion: reduce) {
137
+ .number-input, .number-input-btn { transition: none; }
138
+ }