@attrus-ds/core 0.1.1 → 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 (82) hide show
  1. package/LICENSE +27 -27
  2. package/README.md +63 -9
  3. package/dist/assets/flags/Brazil-rounded.svg +15 -15
  4. package/dist/assets/flags/Brazil-square.svg +16 -16
  5. package/dist/assets/flags/Chile-rounded.svg +10 -10
  6. package/dist/assets/flags/Chile-square.svg +10 -10
  7. package/dist/assets/flags/Colombia-rounded.svg +9 -9
  8. package/dist/assets/flags/Colombia-square.svg +9 -9
  9. package/dist/assets/flags/EUA-rounded.svg +10 -10
  10. package/dist/assets/flags/EUA-square.svg +10 -10
  11. package/dist/assets/flags/EUR-rounded.svg +8 -8
  12. package/dist/assets/flags/EUR-square.svg +8 -8
  13. package/dist/assets/flags/Mexico-rounded.svg +18 -18
  14. package/dist/assets/flags/Mexico-square.svg +18 -18
  15. package/dist/assets/icon-attrus-dark.svg +2 -2
  16. package/dist/assets/icon-attrus-light.svg +2 -2
  17. package/dist/assets/logo-attrus-dark.svg +7 -7
  18. package/dist/assets/logo-attrus-light.svg +7 -7
  19. package/dist/css/components/buttons.css +301 -301
  20. package/dist/css/components/callout.css +195 -195
  21. package/dist/css/components/cards.css +272 -272
  22. package/dist/css/components/combobox.css +319 -303
  23. package/dist/css/components/empty-states.css +61 -61
  24. package/dist/css/components/inputs.css +975 -1027
  25. package/dist/css/components/number-input.css +138 -138
  26. package/dist/css/components/overlays.css +374 -405
  27. package/dist/css/components/primitives.css +314 -305
  28. package/dist/css/components/sidebar.css +179 -179
  29. package/dist/css/components/smart-search.css +91 -0
  30. package/dist/css/components/status-pills.css +207 -207
  31. package/dist/css/components/stepper.css +309 -309
  32. package/dist/css/components/table.css +602 -600
  33. package/dist/css/components/tabs.css +319 -319
  34. package/dist/css/components/toast.css +243 -239
  35. package/dist/css/components/tooltip.css +231 -226
  36. package/dist/css/components/topbar.css +148 -148
  37. package/dist/css/index.css +1 -0
  38. package/dist/css/tokens.css +666 -666
  39. package/dist/react/AppSidebar/AppSidebar.d.ts +50 -0
  40. package/dist/react/AppSidebar/AppSidebar.tsx +197 -0
  41. package/dist/react/AppTopbar/AppTopbar.d.ts +58 -0
  42. package/dist/react/AppTopbar/AppTopbar.tsx +203 -0
  43. package/dist/react/Atoms/Atoms.d.ts +149 -0
  44. package/dist/react/Atoms/Atoms.tsx +407 -0
  45. package/dist/react/Button/Button.d.ts +25 -0
  46. package/dist/react/Button/Button.tsx +83 -0
  47. package/dist/react/Callout/Callout.d.ts +29 -0
  48. package/dist/react/Callout/Callout.tsx +98 -0
  49. package/dist/react/Card/Card.d.ts +38 -0
  50. package/dist/react/Card/Card.tsx +93 -0
  51. package/dist/react/Combobox/Combobox.d.ts +52 -0
  52. package/dist/react/Combobox/Combobox.tsx +254 -0
  53. package/dist/react/DataTable/DataTable.d.ts +81 -0
  54. package/dist/react/DataTable/DataTable.tsx +308 -0
  55. package/dist/react/Drawer/Drawer.d.ts +35 -0
  56. package/dist/react/Drawer/Drawer.tsx +226 -0
  57. package/dist/react/Input/Input.d.ts +155 -0
  58. package/dist/react/Input/Input.tsx +478 -0
  59. package/dist/react/Modal/Modal.d.ts +27 -0
  60. package/dist/react/Modal/Modal.tsx +173 -0
  61. package/dist/react/NumberInput/NumberInput.d.ts +25 -0
  62. package/dist/react/NumberInput/NumberInput.tsx +117 -0
  63. package/dist/react/Pill/Pill.d.ts +31 -0
  64. package/dist/react/Pill/Pill.tsx +104 -0
  65. package/dist/react/SearchPill/SearchPill.d.ts +14 -0
  66. package/dist/react/SearchPill/SearchPill.tsx +40 -0
  67. package/dist/react/SmartSearch/SmartSearch.d.ts +65 -0
  68. package/dist/react/SmartSearch/SmartSearch.tsx +271 -0
  69. package/dist/react/Stepper/Stepper.d.ts +25 -0
  70. package/dist/react/Stepper/Stepper.tsx +94 -0
  71. package/dist/react/Tabs/Tabs.d.ts +32 -0
  72. package/dist/react/Tabs/Tabs.tsx +147 -0
  73. package/dist/react/Toast/Toast.d.ts +30 -0
  74. package/dist/react/Toast/Toast.tsx +94 -0
  75. package/dist/react/Tooltip/Tooltip.d.ts +23 -0
  76. package/dist/react/Tooltip/Tooltip.tsx +80 -0
  77. package/dist/react/ZeroState/ZeroState.d.ts +17 -0
  78. package/dist/react/ZeroState/ZeroState.tsx +45 -0
  79. package/dist/react/index.ts +35 -0
  80. package/dist/tokens/attrus-tokens.flat.json +1234 -1234
  81. package/dist/tokens/attrus-tokens.json +1089 -1089
  82. package/package.json +64 -54
package/dist/css/components/empty-states.css CHANGED
@@ -1,61 +1,61 @@
1
- /* ============================================================
2
- EMPTY STATES — production component CSS
3
- Used by empty-states.html and any product surface that needs
4
- a zero-data placeholder. All values resolve to design tokens.
5
- ============================================================ */
6
-
7
- .empty {
8
- display: flex;
9
- flex-direction: column;
10
- align-items: center;
11
- text-align: center;
12
- gap: 14px;
13
- padding: 56px 24px;
14
- border-radius: var(--radius-md);
15
- background: transparent;
16
- border: 0;
17
- }
18
- .empty.empty-default { padding: 56px 24px; gap: 14px; }
19
- .empty.empty-compact { padding: 28px 20px; gap: 10px; }
20
-
21
- .empty-illo {
22
- display: inline-flex;
23
- align-items: center;
24
- justify-content: center;
25
- }
26
- .empty-illo svg { display: block; }
27
-
28
- .empty h4 {
29
- font-family: var(--font-sans);
30
- font-size: var(--fs-lg);
31
- font-weight: var(--w-bold);
32
- letter-spacing: -.01em;
33
- color: var(--color-foreground-default);
34
- margin: 0;
35
- max-width: 360px;
36
- }
37
- .empty.empty-compact h4 { font-size: var(--fs-md); }
38
-
39
- .empty p {
40
- font-family: var(--font-sans);
41
- font-size: var(--fs-sm);
42
- color: var(--color-foreground-secondary);
43
- line-height: var(--lh-relaxed);
44
- margin: 0;
45
- max-width: 360px;
46
- text-wrap: pretty;
47
- }
48
-
49
- .empty-actions {
50
- display: flex;
51
- gap: var(--space-2);
52
- margin-top: var(--space-1);
53
- flex-wrap: wrap;
54
- justify-content: center;
55
- }
56
-
57
- /* ---- tone: warning ---- */
58
- .empty.empty-warning {
59
- background: var(--color-feedback-warning-background);
60
- border: 1px solid var(--color-feedback-warning-border);
61
- }
1
+ /* ============================================================
2
+ EMPTY STATES — production component CSS
3
+ Used by empty-states.html and any product surface that needs
4
+ a zero-data placeholder. All values resolve to design tokens.
5
+ ============================================================ */
6
+
7
+ .empty {
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ text-align: center;
12
+ gap: 14px;
13
+ padding: 56px 24px;
14
+ border-radius: var(--radius-md);
15
+ background: transparent;
16
+ border: 0;
17
+ }
18
+ .empty.empty-default { padding: 56px 24px; gap: 14px; }
19
+ .empty.empty-compact { padding: 28px 20px; gap: 10px; }
20
+
21
+ .empty-illo {
22
+ display: inline-flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ }
26
+ .empty-illo svg { display: block; }
27
+
28
+ .empty h4 {
29
+ font-family: var(--font-sans);
30
+ font-size: var(--fs-lg);
31
+ font-weight: var(--w-bold);
32
+ letter-spacing: -.01em;
33
+ color: var(--color-foreground-default);
34
+ margin: 0;
35
+ max-width: 360px;
36
+ }
37
+ .empty.empty-compact h4 { font-size: var(--fs-md); }
38
+
39
+ .empty p {
40
+ font-family: var(--font-sans);
41
+ font-size: var(--fs-sm);
42
+ color: var(--color-foreground-secondary);
43
+ line-height: var(--lh-relaxed);
44
+ margin: 0;
45
+ max-width: 360px;
46
+ text-wrap: pretty;
47
+ }
48
+
49
+ .empty-actions {
50
+ display: flex;
51
+ gap: var(--space-2);
52
+ margin-top: var(--space-1);
53
+ flex-wrap: wrap;
54
+ justify-content: center;
55
+ }
56
+
57
+ /* ---- tone: warning ---- */
58
+ .empty.empty-warning {
59
+ background: var(--color-feedback-warning-background);
60
+ border: 1px solid var(--color-feedback-warning-border);
61
+ }