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/badge.css CHANGED
@@ -1,145 +1,150 @@
1
1
  /* ===== Badge Component Styles ===== */
2
- /*
2
+ /*
3
3
  * Badge component for status indicators, tags, counts, and labels.
4
4
  * Uses data attributes for styling to avoid inline utility classes.
5
5
  * Fully compatible with dark mode and supports icons.
6
+ *
7
+ * Cascade order in this file (full contract documented in form.css):
8
+ * 1. base [data-component="badge"]
9
+ * 2. sizes [data-component="badge"]:where([data-size="…"])
10
+ * 3. variants [data-component="badge"]:where([data-variant="…"])
11
+ * 4. states :where(:hover, :focus-visible, :active, :disabled)
12
+ * 5. dark — none; dark-mode differences are tokens (see tokens.css)
13
+ * Every rule is flattened to 0,1,0 with :where() and lives in
14
+ * @layer components, so a caller's utility class wins and source order is
15
+ * the only tie-breaker. (Rules whose target is a bare element or a
16
+ * pseudo-element read 0,1,1 — an element selector cannot be zeroed away.)
6
17
  */
7
18
 
8
- /* ===== Base Badge Styles ===== */
9
- [data-component="badge"] {
10
- /* Layout */
11
- display: inline-flex;
12
- align-items: center;
13
- white-space: nowrap;
14
- @apply gap-1 rounded-md border border-transparent font-medium leading-none;
15
-
16
- /* Transitions */
17
- @apply transition-[background-color,border-color,color,opacity] duration-150;
18
- }
19
-
20
- /* ===== Icon Support ===== */
21
- [data-component="badge"] svg {
22
- /* Scales with font size using em */
23
- width: 0.875em;
24
- height: 0.875em;
25
- @apply shrink-0 pointer-events-none;
26
- }
27
-
28
- /* ===== Size Variants ===== */
29
-
30
- /* Small size - compact badges for inline use */
31
- [data-component="badge"][data-size="sm"] {
32
- @apply text-xs px-2 py-0.5 h-5;
33
- }
34
-
35
- /* Medium size - default, balanced size */
36
- [data-component="badge"][data-size="md"] {
37
- @apply text-sm px-2.5 py-1 h-6;
38
- }
39
-
40
- /* Large size - prominent badges */
41
- [data-component="badge"][data-size="lg"] {
42
- @apply text-sm px-3 py-1.5 h-7;
43
- }
44
-
45
- /* ===== Visual Variants ===== */
46
-
47
- /* Default variant - muted appearance */
48
- [data-component="badge"][data-variant="default"] {
49
- background-color: var(--muted);
50
- color: var(--muted-foreground);
51
- }
52
-
53
- [data-component="badge"][data-variant="default"]:hover {
54
- @apply opacity-90;
55
- }
56
-
57
- /* Primary variant - brand color */
58
- [data-component="badge"][data-variant="primary"] {
59
- background-color: var(--primary);
60
- color: var(--primary-foreground);
61
- }
62
-
63
- [data-component="badge"][data-variant="primary"]:hover {
64
- @apply opacity-90;
65
- }
66
-
67
- /* Secondary variant - subtle appearance */
68
- [data-component="badge"][data-variant="secondary"] {
69
- background-color: var(--secondary);
70
- color: var(--secondary-foreground);
71
- }
72
-
73
- [data-component="badge"][data-variant="secondary"]:hover {
74
- @apply opacity-90;
75
- }
76
-
77
- /* Destructive variant - errors, deletions */
78
- [data-component="badge"][data-variant="destructive"] {
79
- background-color: var(--destructive);
80
- color: var(--destructive-foreground);
19
+ @layer components {
20
+ /* ===== Base Badge Styles ===== */
21
+ [data-component="badge"] {
22
+ /* Layout */
23
+ display: inline-flex;
24
+ align-items: center;
25
+ white-space: nowrap;
26
+ @apply gap-1 border border-transparent leading-none;
27
+ border-radius: var(--badge-radius, var(--control-radius, 0.375rem));
28
+ font-weight: var(--label-weight, 500);
29
+
30
+ /* Transitions */
31
+ @apply transition-[background-color,border-color,color,opacity] duration-150;
32
+ }
33
+
34
+ /* ===== Icon Support ===== */
35
+ [data-component="badge"] svg {
36
+ /* Scales with font size using em */
37
+ width: 0.875em;
38
+ height: 0.875em;
39
+ @apply shrink-0 pointer-events-none;
40
+ }
41
+
42
+ /* ===== Size Variants ===== */
43
+
44
+ /* Small size - compact badges for inline use */
45
+ [data-component="badge"]:where([data-size="sm"]) {
46
+ @apply text-xs px-2 py-0.5 h-5;
47
+ }
48
+
49
+ /* Medium size - default, balanced size */
50
+ [data-component="badge"]:where([data-size="md"]) {
51
+ @apply text-sm px-2.5 py-1 h-6;
52
+ }
53
+
54
+ /* Large size - prominent badges */
55
+ [data-component="badge"]:where([data-size="lg"]) {
56
+ @apply text-sm px-3 py-1.5 h-7;
57
+ }
58
+
59
+ /* ===== Visual Variants ===== */
60
+
61
+ /* Default variant - muted appearance */
62
+ [data-component="badge"]:where([data-variant="default"]) {
63
+ background-color: var(--muted);
64
+ color: var(--muted-foreground);
65
+ }
66
+
67
+ /* Primary variant - brand color */
68
+ [data-component="badge"]:where([data-variant="primary"]) {
69
+ background-color: var(--primary);
70
+ color: var(--primary-foreground);
71
+ }
72
+
73
+ /* Secondary variant - subtle appearance */
74
+ [data-component="badge"]:where([data-variant="secondary"]) {
75
+ background-color: var(--secondary);
76
+ color: var(--secondary-foreground);
77
+ }
78
+
79
+ /* Destructive variant - errors, deletions */
80
+ [data-component="badge"]:where([data-variant="destructive"]) {
81
+ background-color: var(--destructive);
82
+ color: var(--destructive-foreground);
83
+ }
84
+
85
+ /* Success variant - positive status */
86
+ [data-component="badge"]:where([data-variant="success"]) {
87
+ background-color: var(--success, oklch(0.627 0.194 149.214));
88
+ color: var(--success-foreground, oklch(0.985 0 0));
89
+ }
90
+
91
+ /* Warning variant - caution status */
92
+ [data-component="badge"]:where([data-variant="warning"]) {
93
+ background-color: var(--warning, oklch(0.769 0.188 70.08));
94
+ color: var(--warning-foreground, oklch(0.216 0.006 56.043));
95
+ }
96
+
97
+ /* Info variant - informational status.
98
+ --info has no engine default on purpose: undefined falls back to the neutral
99
+ default treatment, never to --primary (which would make an informational
100
+ badge read as a brand call to action). */
101
+ [data-component="badge"]:where([data-variant="info"]) {
102
+ background-color: var(--info, var(--muted));
103
+ color: var(--info-foreground, var(--muted-foreground));
104
+ }
105
+
106
+ /* Outline variant - transparent with border */
107
+ [data-component="badge"]:where([data-variant="outline"]) {
108
+ @apply bg-transparent;
109
+ color: var(--foreground);
110
+ border-color: var(--border);
111
+ }
112
+
113
+ /* ===== Interactive States (when used as link/button) ===== */
114
+
115
+ /* Hover - solid variants just soften */
116
+ [data-component="badge"]:where(
117
+ [data-variant="default"]:hover,
118
+ [data-variant="primary"]:hover,
119
+ [data-variant="secondary"]:hover,
120
+ [data-variant="destructive"]:hover,
121
+ [data-variant="success"]:hover,
122
+ [data-variant="warning"]:hover,
123
+ [data-variant="info"]:hover
124
+ ) {
125
+ @apply opacity-90;
126
+ }
127
+
128
+ /* Hover - the outline variant fills instead */
129
+ [data-component="badge"]:where([data-variant="outline"]:hover) {
130
+ background-color: var(--accent-hover, var(--accent));
131
+ color: var(--accent-foreground);
132
+ }
133
+
134
+ /* Focus state for keyboard navigation */
135
+ [data-component="badge"]:where(a:focus-visible, button:focus-visible) {
136
+ outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
137
+ var(--focus-ring-color, var(--ring));
138
+ outline-offset: var(--focus-ring-offset, 0px);
139
+ }
140
+
141
+ /* Active/pressed state */
142
+ [data-component="badge"]:where(a:active, button:active) {
143
+ @apply scale-[0.98];
144
+ }
145
+
146
+ /* Disabled state (if used as button) */
147
+ [data-component="badge"]:where(button:disabled) {
148
+ @apply opacity-50 cursor-not-allowed pointer-events-none;
149
+ }
81
150
  }
82
-
83
- [data-component="badge"][data-variant="destructive"]:hover {
84
- @apply opacity-90;
85
- }
86
-
87
- /* Success variant - positive status */
88
- [data-component="badge"][data-variant="success"] {
89
- background-color: var(--success);
90
- color: var(--success-foreground);
91
- }
92
-
93
- [data-component="badge"][data-variant="success"]:hover {
94
- @apply opacity-90;
95
- }
96
-
97
- /* Warning variant - caution status */
98
- [data-component="badge"][data-variant="warning"] {
99
- background-color: var(--warning);
100
- color: var(--warning-foreground);
101
- }
102
-
103
- [data-component="badge"][data-variant="warning"]:hover {
104
- @apply opacity-90;
105
- }
106
-
107
- /* Outline variant - transparent with border */
108
- [data-component="badge"][data-variant="outline"] {
109
- @apply bg-transparent;
110
- color: var(--foreground);
111
- border-color: var(--border);
112
- }
113
-
114
- [data-component="badge"][data-variant="outline"]:hover {
115
- background-color: var(--accent);
116
- color: var(--accent-foreground);
117
- }
118
-
119
- /* ===== Interactive States (when used as link/button) ===== */
120
-
121
- /* Focus state for keyboard navigation */
122
- a[data-component="badge"]:focus-visible,
123
- button[data-component="badge"]:focus-visible {
124
- @apply outline-none;
125
- box-shadow: 0 0 0 2px var(--background),
126
- 0 0 0 4px var(--border);
127
- }
128
-
129
- /* Active/pressed state */
130
- a[data-component="badge"]:active,
131
- button[data-component="badge"]:active {
132
- @apply scale-[0.98];
133
- }
134
-
135
- /* Disabled state (if used as button) */
136
- button[data-component="badge"]:disabled {
137
- @apply opacity-50 cursor-not-allowed pointer-events-none;
138
- }
139
-
140
- /* ===== Dark Mode ===== */
141
- /*
142
- * Dark mode is handled automatically through CSS variables.
143
- * The theme variables change based on the .dark class on html/body.
144
- * No additional dark mode styles needed here.
145
- */