maquina-components 0.5.1 → 0.6.0

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 (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +76 -2
  3. data/app/assets/stylesheets/alert.css +169 -135
  4. data/app/assets/stylesheets/badge.css +143 -138
  5. data/app/assets/stylesheets/breadcrumbs.css +183 -166
  6. data/app/assets/stylesheets/calendar.css +219 -206
  7. data/app/assets/stylesheets/card.css +126 -120
  8. data/app/assets/stylesheets/combobox.css +208 -191
  9. data/app/assets/stylesheets/date_picker.css +144 -134
  10. data/app/assets/stylesheets/drawer.css +158 -125
  11. data/app/assets/stylesheets/dropdown_menu.css +203 -190
  12. data/app/assets/stylesheets/empty.css +125 -117
  13. data/app/assets/stylesheets/form.css +625 -525
  14. data/app/assets/stylesheets/header.css +63 -47
  15. data/app/assets/stylesheets/menu_button.css +121 -98
  16. data/app/assets/stylesheets/pagination.css +130 -125
  17. data/app/assets/stylesheets/separator.css +23 -11
  18. data/app/assets/stylesheets/sidebar.css +447 -401
  19. data/app/assets/stylesheets/stats.css +77 -67
  20. data/app/assets/stylesheets/table.css +184 -166
  21. data/app/assets/stylesheets/toast.css +287 -278
  22. data/app/assets/stylesheets/toggle_group.css +132 -139
  23. data/app/assets/tailwind/maquina_components_engine/engine.css +54 -15
  24. data/app/assets/tailwind/maquina_components_engine/tokens.css +101 -0
  25. data/app/helpers/maquina_components/combobox_helper.rb +32 -24
  26. data/app/helpers/maquina_components/components_helper.rb +30 -6
  27. data/app/helpers/maquina_components/dropdown_menu_helper.rb +12 -12
  28. data/app/helpers/maquina_components/icons_helper.rb +26 -2
  29. data/app/javascript/controllers/drawer_trigger_controller.js +24 -3
  30. data/app/views/components/_label.html.erb +14 -0
  31. data/app/views/components/_table.html.erb +2 -2
  32. data/app/views/components/calendar/_week.html.erb +4 -12
  33. data/app/views/components/drawer/_close.html.erb +1 -1
  34. data/app/views/components/drawer/_description.html.erb +6 -0
  35. data/app/views/components/drawer/_header.html.erb +1 -1
  36. data/app/views/components/drawer/_provider.html.erb +13 -4
  37. data/app/views/components/drawer/_section.html.erb +7 -0
  38. data/app/views/components/drawer/_separator.html.erb +11 -0
  39. data/app/views/components/drawer/_title.html.erb +6 -0
  40. data/app/views/components/drawer/_trigger.html.erb +24 -7
  41. data/app/views/components/sidebar/_group_action.html.erb +26 -0
  42. data/app/views/components/sidebar/_menu_action.html.erb +28 -0
  43. data/app/views/components/sidebar/_menu_badge.html.erb +10 -0
  44. data/app/views/components/sidebar/_menu_button.html.erb +3 -2
  45. data/app/views/components/sidebar/_menu_link.html.erb +3 -2
  46. data/app/views/components/sidebar/_separator.html.erb +12 -0
  47. data/lib/generators/maquina_components/install/install_generator.rb +36 -1
  48. data/lib/generators/maquina_components/install/templates/maquina_components_helper.rb.tt +5 -0
  49. data/lib/generators/maquina_components/install/templates/shape_state_tokens.css.tt +76 -0
  50. data/lib/generators/maquina_components/install/templates/theme.css.tt +10 -3
  51. data/lib/maquina-components.rb +29 -1
  52. data/lib/maquina_components/doctor.rb +280 -0
  53. data/lib/maquina_components/version.rb +1 -1
  54. data/lib/tasks/maquina_components_tasks.rake +16 -4
  55. metadata +14 -2
data/app/assets/stylesheets/empty.css CHANGED
@@ -11,123 +11,131 @@
11
11
  * - title (heading)
12
12
  * - description (explanatory text)
13
13
  * - content (action buttons/links)
14
+ *
15
+ * Cascade order in this file (full contract documented in form.css):
16
+ * 1. base [data-component="empty"], [data-empty-part="…"]
17
+ * 2. sizes […]:where([data-size="compact"])
18
+ * 3. variants […]:where([data-variant="…"])
19
+ * 4. states […]:where(:hover)
20
+ * 5. dark — none; dark-mode differences are tokens (see tokens.css)
21
+ * Every rule is flattened to 0,1,0 with :where() and lives in
22
+ * @layer components, so a caller's utility class wins and source order is
23
+ * the only tie-breaker. (Rules whose target is a bare element read 0,1,1 — an
24
+ * element selector cannot be zeroed away.)
14
25
  */
15
26
 
16
- /* ===== Root Container ===== */
17
- [data-component="empty"] {
18
- display: flex;
19
- flex-direction: column;
20
- align-items: center;
21
- justify-content: center;
22
- text-align: center;
23
- @apply px-6 py-12;
24
- }
25
-
26
- /* ===== Size Variants ===== */
27
- [data-component="empty"][data-size="compact"] {
28
- @apply px-6 py-8;
29
- }
30
-
31
- /* ===== Visual Variants ===== */
32
- [data-component="empty"][data-variant="default"] {
33
- /* No additional styles for default */
34
- }
35
-
36
- [data-component="empty"][data-variant="outline"] {
37
- @apply rounded-lg;
38
- border: 1px dashed var(--border);
39
- }
40
-
41
- /* ===== Header ===== */
42
- [data-empty-part="header"] {
43
- display: flex;
44
- flex-direction: column;
45
- align-items: center;
46
- @apply gap-2;
47
- }
48
-
49
- /* ===== Media (Icon/Avatar Container) ===== */
50
- [data-empty-part="media"] {
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- color: var(--muted-foreground);
55
- @apply mb-2;
56
- }
57
-
58
- /* Icon variant */
59
- [data-empty-part="media"][data-variant="icon"] {
60
- @apply opacity-60;
61
- }
62
-
63
- [data-empty-part="media"][data-variant="icon"] svg {
64
- @apply size-12;
65
- }
66
-
67
- /* Compact size adjustments */
68
- [data-component="empty"][data-size="compact"] [data-empty-part="media"][data-variant="icon"] svg {
69
- @apply size-8;
70
- }
71
-
72
- /* Avatar variant */
73
- [data-empty-part="media"][data-variant="avatar"] {
74
- @apply size-16 rounded-full overflow-hidden;
75
- background-color: var(--muted);
76
- }
77
-
78
- [data-empty-part="media"][data-variant="avatar"] img {
79
- @apply size-full object-cover;
80
- }
81
-
82
- /* ===== Title ===== */
83
- [data-empty-part="title"] {
84
- color: var(--foreground);
85
- @apply text-base font-medium;
86
- }
87
-
88
- /* Compact size */
89
- [data-component="empty"][data-size="compact"] [data-empty-part="title"] {
90
- @apply text-sm;
91
- }
92
-
93
- /* ===== Description ===== */
94
- [data-empty-part="description"] {
95
- color: var(--muted-foreground);
96
- @apply text-sm mt-1 max-w-md;
97
- }
98
-
99
- /* Links in description */
100
- [data-empty-part="description"] a {
101
- color: var(--primary);
102
- text-decoration: underline;
103
- text-underline-offset: 4px;
104
- }
105
-
106
- [data-empty-part="description"] a:hover {
107
- @apply opacity-80;
108
- }
109
-
110
- /* ===== Content (Actions) ===== */
111
- [data-empty-part="content"] {
112
- display: flex;
113
- flex-direction: column;
114
- align-items: center;
115
- @apply mt-6 gap-3;
116
- }
117
-
118
- /* Compact size */
119
- [data-component="empty"][data-size="compact"] [data-empty-part="content"] {
120
- @apply mt-4;
27
+ @layer components {
28
+ /* ===== Root Container ===== */
29
+ [data-component="empty"] {
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ justify-content: center;
34
+ text-align: center;
35
+ @apply px-6 py-12;
36
+ }
37
+
38
+ /* ===== Size Variants ===== */
39
+ [data-component="empty"]:where([data-size="compact"]) {
40
+ @apply px-6 py-8;
41
+ }
42
+
43
+ /* ===== Visual Variants ===== */
44
+ [data-component="empty"]:where([data-variant="default"]) {
45
+ /* No additional styles for default */
46
+ }
47
+
48
+ [data-component="empty"]:where([data-variant="outline"]) {
49
+ border-radius: var(--empty-radius, var(--surface-radius, 0.5rem));
50
+ border: 1px dashed var(--border);
51
+ }
52
+
53
+ /* ===== Header ===== */
54
+ [data-empty-part="header"] {
55
+ display: flex;
56
+ flex-direction: column;
57
+ align-items: center;
58
+ @apply gap-2;
59
+ }
60
+
61
+ /* ===== Media (Icon/Avatar Container) ===== */
62
+ [data-empty-part="media"] {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ color: var(--muted-foreground);
67
+ @apply mb-2;
68
+ }
69
+
70
+ /* Icon variant */
71
+ [data-empty-part="media"]:where([data-variant="icon"]) {
72
+ @apply opacity-60;
73
+ }
74
+
75
+ [data-empty-part="media"]:where([data-variant="icon"]) svg {
76
+ @apply size-12;
77
+ }
78
+
79
+ /* Compact size adjustments */
80
+ :where([data-component="empty"][data-size="compact"]) [data-empty-part="media"]:where([data-variant="icon"]) svg {
81
+ @apply size-8;
82
+ }
83
+
84
+ /* Avatar variant */
85
+ [data-empty-part="media"]:where([data-variant="avatar"]) {
86
+ @apply size-16 overflow-hidden;
87
+ border-radius: var(--pill-radius, calc(infinity * 1px));
88
+ background-color: var(--muted);
89
+ }
90
+
91
+ [data-empty-part="media"]:where([data-variant="avatar"]) img {
92
+ @apply size-full object-cover;
93
+ }
94
+
95
+ /* ===== Title ===== */
96
+ [data-empty-part="title"] {
97
+ color: var(--foreground);
98
+ @apply text-base;
99
+ font-weight: var(--label-weight, 500);
100
+ }
101
+
102
+ /* Compact size */
103
+ :where([data-component="empty"][data-size="compact"]) [data-empty-part="title"] {
104
+ @apply text-sm;
105
+ }
106
+
107
+ /* ===== Description ===== */
108
+ [data-empty-part="description"] {
109
+ color: var(--muted-foreground);
110
+ @apply text-sm mt-1 max-w-md;
111
+ }
112
+
113
+ /* Links in description */
114
+ [data-empty-part="description"] a {
115
+ color: var(--primary);
116
+ text-decoration: underline;
117
+ text-underline-offset: 4px;
118
+ }
119
+
120
+ [data-empty-part="description"] a:where(:hover) {
121
+ @apply opacity-80;
122
+ }
123
+
124
+ /* ===== Content (Actions) ===== */
125
+ [data-empty-part="content"] {
126
+ display: flex;
127
+ flex-direction: column;
128
+ align-items: center;
129
+ @apply mt-6 gap-3;
130
+ }
131
+
132
+ /* Compact size */
133
+ :where([data-component="empty"][data-size="compact"]) [data-empty-part="content"] {
134
+ @apply mt-4;
135
+ }
136
+
137
+ /* Flex container for multiple buttons */
138
+ :where([data-empty-part="content"]) > .flex {
139
+ @apply gap-2;
140
+ }
121
141
  }
122
-
123
- /* Flex container for multiple buttons */
124
- [data-empty-part="content"] > .flex {
125
- @apply gap-2;
126
- }
127
-
128
- /* ===== Dark Mode ===== */
129
- /*
130
- * Dark mode is handled automatically through CSS variables.
131
- * The theme variables change based on the .dark class on html/body.
132
- * No additional dark mode styles needed here.
133
- */