better_ui 0.6.0 → 0.7.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 (198) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +257 -212
  3. data/Rakefile +11 -2
  4. data/app/components/better_ui/action_messages_component/action_messages_component.html.erb +48 -0
  5. data/app/components/better_ui/action_messages_component.rb +544 -0
  6. data/app/components/better_ui/application_component.rb +66 -0
  7. data/app/components/better_ui/button_component/button_component.html.erb +31 -0
  8. data/app/components/better_ui/button_component.rb +307 -0
  9. data/app/components/better_ui/card_component/card_component.html.erb +17 -0
  10. data/app/components/better_ui/card_component.rb +460 -0
  11. data/app/components/better_ui/drawer/header_component/header_component.html.erb +24 -0
  12. data/app/components/better_ui/drawer/header_component.rb +238 -0
  13. data/app/components/better_ui/drawer/layout_component/layout_component.html.erb +44 -0
  14. data/app/components/better_ui/drawer/layout_component.rb +270 -0
  15. data/app/components/better_ui/drawer/nav_group_component/nav_group_component.html.erb +10 -0
  16. data/app/components/better_ui/drawer/nav_group_component.rb +155 -0
  17. data/app/components/better_ui/drawer/nav_item_component/nav_item_component.html.erb +13 -0
  18. data/app/components/better_ui/drawer/nav_item_component.rb +225 -0
  19. data/app/components/better_ui/drawer/sidebar_component/sidebar_component.html.erb +17 -0
  20. data/app/components/better_ui/drawer/sidebar_component.rb +263 -0
  21. data/app/components/better_ui/forms/base_component.rb +450 -0
  22. data/app/components/better_ui/forms/checkbox_component/checkbox_component.html.erb +28 -0
  23. data/app/components/better_ui/forms/checkbox_component.rb +419 -0
  24. data/app/components/better_ui/forms/checkbox_group_component/checkbox_group_component.html.erb +40 -0
  25. data/app/components/better_ui/forms/checkbox_group_component.rb +363 -0
  26. data/app/components/better_ui/forms/number_input_component/number_input_component.html.erb +40 -0
  27. data/app/components/better_ui/forms/number_input_component.rb +320 -0
  28. data/app/components/better_ui/forms/password_input_component/password_input_component.html.erb +71 -0
  29. data/app/components/better_ui/forms/password_input_component.rb +206 -0
  30. data/app/components/better_ui/forms/text_input_component/text_input_component.html.erb +40 -0
  31. data/app/components/better_ui/forms/text_input_component.rb +258 -0
  32. data/app/components/better_ui/forms/textarea_component/textarea_component.html.erb +40 -0
  33. data/app/components/better_ui/forms/textarea_component.rb +329 -0
  34. data/app/form_builders/better_ui/ui_form_builder.rb +467 -0
  35. data/app/helpers/better_ui/application_helper.rb +325 -58
  36. data/app/views/layouts/better_ui/application.html.erb +1 -1
  37. data/config/routes.rb +1 -0
  38. data/lib/better_ui/engine.rb +34 -5
  39. data/lib/better_ui/version.rb +1 -1
  40. data/lib/better_ui.rb +32 -5
  41. data/lib/generators/better_ui/install/USAGE +44 -0
  42. data/lib/generators/better_ui/install/install_generator.rb +87 -0
  43. data/lib/generators/better_ui/install/templates/better_ui_theme.css.tt +280 -0
  44. data/lib/tasks/better_ui_tasks.rake +39 -4
  45. metadata +52 -200
  46. data/app/components/better_ui/application/card/component.html.erb +0 -20
  47. data/app/components/better_ui/application/card/component.rb +0 -214
  48. data/app/components/better_ui/application/main/component.html.erb +0 -9
  49. data/app/components/better_ui/application/main/component.rb +0 -123
  50. data/app/components/better_ui/application/navbar/component.html.erb +0 -92
  51. data/app/components/better_ui/application/navbar/component.rb +0 -136
  52. data/app/components/better_ui/application/sidebar/component.html.erb +0 -249
  53. data/app/components/better_ui/application/sidebar/component.rb +0 -187
  54. data/app/components/better_ui/general/accordion/component.html.erb +0 -5
  55. data/app/components/better_ui/general/accordion/component.rb +0 -92
  56. data/app/components/better_ui/general/accordion/item_component.html.erb +0 -12
  57. data/app/components/better_ui/general/accordion/item_component.rb +0 -176
  58. data/app/components/better_ui/general/alert/component.html.erb +0 -32
  59. data/app/components/better_ui/general/alert/component.rb +0 -242
  60. data/app/components/better_ui/general/avatar/component.html.erb +0 -20
  61. data/app/components/better_ui/general/avatar/component.rb +0 -301
  62. data/app/components/better_ui/general/badge/component.html.erb +0 -23
  63. data/app/components/better_ui/general/badge/component.rb +0 -248
  64. data/app/components/better_ui/general/breadcrumb/component.html.erb +0 -15
  65. data/app/components/better_ui/general/breadcrumb/component.rb +0 -187
  66. data/app/components/better_ui/general/button/component.html.erb +0 -34
  67. data/app/components/better_ui/general/button/component.rb +0 -214
  68. data/app/components/better_ui/general/divider/component.html.erb +0 -10
  69. data/app/components/better_ui/general/divider/component.rb +0 -226
  70. data/app/components/better_ui/general/dropdown/component.html.erb +0 -28
  71. data/app/components/better_ui/general/dropdown/component.rb +0 -192
  72. data/app/components/better_ui/general/dropdown/divider_component.html.erb +0 -1
  73. data/app/components/better_ui/general/dropdown/divider_component.rb +0 -41
  74. data/app/components/better_ui/general/dropdown/item_component.html.erb +0 -6
  75. data/app/components/better_ui/general/dropdown/item_component.rb +0 -119
  76. data/app/components/better_ui/general/field/component.html.erb +0 -27
  77. data/app/components/better_ui/general/field/component.rb +0 -37
  78. data/app/components/better_ui/general/grid/cell_component.html.erb +0 -3
  79. data/app/components/better_ui/general/grid/cell_component.rb +0 -390
  80. data/app/components/better_ui/general/grid/component.html.erb +0 -3
  81. data/app/components/better_ui/general/grid/component.rb +0 -301
  82. data/app/components/better_ui/general/heading/component.html.erb +0 -22
  83. data/app/components/better_ui/general/heading/component.rb +0 -257
  84. data/app/components/better_ui/general/icon/component.html.erb +0 -7
  85. data/app/components/better_ui/general/icon/component.rb +0 -240
  86. data/app/components/better_ui/general/input/checkbox/component.html.erb +0 -5
  87. data/app/components/better_ui/general/input/checkbox/component.rb +0 -238
  88. data/app/components/better_ui/general/input/datetime/component.html.erb +0 -5
  89. data/app/components/better_ui/general/input/datetime/component.rb +0 -223
  90. data/app/components/better_ui/general/input/pin/component.html.erb +0 -1
  91. data/app/components/better_ui/general/input/pin/component.rb +0 -201
  92. data/app/components/better_ui/general/input/radio/component.html.erb +0 -5
  93. data/app/components/better_ui/general/input/radio/component.rb +0 -230
  94. data/app/components/better_ui/general/input/rating/component.html.erb +0 -4
  95. data/app/components/better_ui/general/input/rating/component.rb +0 -272
  96. data/app/components/better_ui/general/input/select/component.html.erb +0 -78
  97. data/app/components/better_ui/general/input/select/component.rb +0 -249
  98. data/app/components/better_ui/general/input/select/select_component.html.erb +0 -5
  99. data/app/components/better_ui/general/input/select/select_component.rb +0 -37
  100. data/app/components/better_ui/general/input/text/component.html.erb +0 -5
  101. data/app/components/better_ui/general/input/text/component.rb +0 -171
  102. data/app/components/better_ui/general/input/textarea/component.html.erb +0 -5
  103. data/app/components/better_ui/general/input/textarea/component.rb +0 -166
  104. data/app/components/better_ui/general/input/toggle/component.html.erb +0 -5
  105. data/app/components/better_ui/general/input/toggle/component.rb +0 -242
  106. data/app/components/better_ui/general/link/component.html.erb +0 -18
  107. data/app/components/better_ui/general/link/component.rb +0 -258
  108. data/app/components/better_ui/general/modal/component.html.erb +0 -5
  109. data/app/components/better_ui/general/modal/component.rb +0 -47
  110. data/app/components/better_ui/general/modal/modal_component.html.erb +0 -52
  111. data/app/components/better_ui/general/modal/modal_component.rb +0 -160
  112. data/app/components/better_ui/general/pagination/component.html.erb +0 -85
  113. data/app/components/better_ui/general/pagination/component.rb +0 -216
  114. data/app/components/better_ui/general/panel/component.html.erb +0 -28
  115. data/app/components/better_ui/general/panel/component.rb +0 -249
  116. data/app/components/better_ui/general/progress/component.html.erb +0 -11
  117. data/app/components/better_ui/general/progress/component.rb +0 -160
  118. data/app/components/better_ui/general/spinner/component.html.erb +0 -35
  119. data/app/components/better_ui/general/spinner/component.rb +0 -93
  120. data/app/components/better_ui/general/table/component.html.erb +0 -5
  121. data/app/components/better_ui/general/table/component.rb +0 -217
  122. data/app/components/better_ui/general/table/tbody_component.html.erb +0 -3
  123. data/app/components/better_ui/general/table/tbody_component.rb +0 -30
  124. data/app/components/better_ui/general/table/td_component.html.erb +0 -3
  125. data/app/components/better_ui/general/table/td_component.rb +0 -44
  126. data/app/components/better_ui/general/table/tfoot_component.html.erb +0 -3
  127. data/app/components/better_ui/general/table/tfoot_component.rb +0 -28
  128. data/app/components/better_ui/general/table/th_component.html.erb +0 -6
  129. data/app/components/better_ui/general/table/th_component.rb +0 -51
  130. data/app/components/better_ui/general/table/thead_component.html.erb +0 -3
  131. data/app/components/better_ui/general/table/thead_component.rb +0 -28
  132. data/app/components/better_ui/general/table/tr_component.html.erb +0 -3
  133. data/app/components/better_ui/general/table/tr_component.rb +0 -30
  134. data/app/components/better_ui/general/tabs/component.html.erb +0 -11
  135. data/app/components/better_ui/general/tabs/component.rb +0 -120
  136. data/app/components/better_ui/general/tabs/panel_component.html.erb +0 -3
  137. data/app/components/better_ui/general/tabs/panel_component.rb +0 -37
  138. data/app/components/better_ui/general/tabs/tab_component.html.erb +0 -13
  139. data/app/components/better_ui/general/tabs/tab_component.rb +0 -111
  140. data/app/components/better_ui/general/tag/component.html.erb +0 -3
  141. data/app/components/better_ui/general/tag/component.rb +0 -104
  142. data/app/components/better_ui/general/text/component.html.erb +0 -1
  143. data/app/components/better_ui/general/text/component.rb +0 -194
  144. data/app/components/better_ui/general/tooltip/component.html.erb +0 -7
  145. data/app/components/better_ui/general/tooltip/component.rb +0 -239
  146. data/app/helpers/better_ui/application/components/card/card_helper.rb +0 -96
  147. data/app/helpers/better_ui/application/components/card.rb +0 -11
  148. data/app/helpers/better_ui/application/components/main/main_helper.rb +0 -64
  149. data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb +0 -77
  150. data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb +0 -51
  151. data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb +0 -73
  152. data/app/helpers/better_ui/general/components/alert/alert_helper.rb +0 -57
  153. data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb +0 -29
  154. data/app/helpers/better_ui/general/components/badge/badge_helper.rb +0 -53
  155. data/app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb +0 -37
  156. data/app/helpers/better_ui/general/components/button/button_helper.rb +0 -65
  157. data/app/helpers/better_ui/general/components/container/container_helper.rb +0 -60
  158. data/app/helpers/better_ui/general/components/divider/divider_helper.rb +0 -63
  159. data/app/helpers/better_ui/general/components/dropdown/divider_helper.rb +0 -32
  160. data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb +0 -88
  161. data/app/helpers/better_ui/general/components/dropdown/item_helper.rb +0 -68
  162. data/app/helpers/better_ui/general/components/field/field_helper.rb +0 -26
  163. data/app/helpers/better_ui/general/components/grid/grid_helper.rb +0 -145
  164. data/app/helpers/better_ui/general/components/heading/heading_helper.rb +0 -72
  165. data/app/helpers/better_ui/general/components/icon/icon_helper.rb +0 -16
  166. data/app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb +0 -81
  167. data/app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb +0 -91
  168. data/app/helpers/better_ui/general/components/input/pin/pin_helper.rb +0 -76
  169. data/app/helpers/better_ui/general/components/input/radio/radio_helper.rb +0 -79
  170. data/app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb +0 -124
  171. data/app/helpers/better_ui/general/components/input/rating/rating_helper.rb +0 -70
  172. data/app/helpers/better_ui/general/components/input/select/select_helper.rb +0 -86
  173. data/app/helpers/better_ui/general/components/input/text/text_helper.rb +0 -138
  174. data/app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb +0 -73
  175. data/app/helpers/better_ui/general/components/input/toggle/toggle_helper.rb +0 -77
  176. data/app/helpers/better_ui/general/components/link/link_helper.rb +0 -89
  177. data/app/helpers/better_ui/general/components/modal/modal_helper.rb +0 -85
  178. data/app/helpers/better_ui/general/components/pagination/pagination_helper.rb +0 -82
  179. data/app/helpers/better_ui/general/components/panel/panel_helper.rb +0 -83
  180. data/app/helpers/better_ui/general/components/progress/progress_helper.rb +0 -53
  181. data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb +0 -19
  182. data/app/helpers/better_ui/general/components/table/table_helper.rb +0 -53
  183. data/app/helpers/better_ui/general/components/table/tbody_helper.rb +0 -13
  184. data/app/helpers/better_ui/general/components/table/td_helper.rb +0 -19
  185. data/app/helpers/better_ui/general/components/table/tfoot_helper.rb +0 -13
  186. data/app/helpers/better_ui/general/components/table/th_helper.rb +0 -19
  187. data/app/helpers/better_ui/general/components/table/thead_helper.rb +0 -13
  188. data/app/helpers/better_ui/general/components/table/tr_helper.rb +0 -13
  189. data/app/helpers/better_ui/general/components/tabs/panel_helper.rb +0 -62
  190. data/app/helpers/better_ui/general/components/tabs/tab_helper.rb +0 -55
  191. data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb +0 -95
  192. data/app/helpers/better_ui/general/components/tag/tag_helper.rb +0 -26
  193. data/app/helpers/better_ui/general/components/text/text_helper.rb +0 -83
  194. data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb +0 -60
  195. data/app/jobs/better_ui/application_job.rb +0 -4
  196. data/app/mailers/better_ui/application_mailer.rb +0 -6
  197. data/config/initializers/lookbook.rb +0 -23
  198. data/lib/better_ui/railtie.rb +0 -20
@@ -0,0 +1,280 @@
1
+ /**
2
+ * BetterUi Theme Configuration
3
+ *
4
+ * This file defines the design tokens for the BetterUi component library.
5
+ * Colors are defined using OKLCH color space for better perceptual uniformity.
6
+ *
7
+ * Customize these values to match your brand:
8
+ * - Primary: Main brand color (default: blue)
9
+ * - Secondary: Supporting brand color (default: purple)
10
+ * - Accent: Highlight color (default: pink)
11
+ * - Success: Positive actions (default: green)
12
+ * - Danger: Destructive actions (default: red)
13
+ * - Warning: Caution states (default: amber)
14
+ * - Info: Informational (default: sky)
15
+ * - Light: Light theme elements (default: slate)
16
+ * - Dark: Dark theme elements (default: slate)
17
+ */
18
+
19
+ @theme inline {
20
+ /* ============================================
21
+ COLOR SYSTEM - OKLCH Format
22
+ ============================================ */
23
+
24
+ /* Primary - Blue */
25
+ --color-primary-50: oklch(0.97 0.01 250);
26
+ --color-primary-100: oklch(0.94 0.03 250);
27
+ --color-primary-200: oklch(0.88 0.06 250);
28
+ --color-primary-300: oklch(0.80 0.12 250);
29
+ --color-primary-400: oklch(0.70 0.18 250);
30
+ --color-primary-500: oklch(0.60 0.22 250);
31
+ --color-primary-600: oklch(0.50 0.24 250);
32
+ --color-primary-700: oklch(0.42 0.22 250);
33
+ --color-primary-800: oklch(0.34 0.18 250);
34
+ --color-primary-900: oklch(0.28 0.12 250);
35
+ --color-primary-950: oklch(0.18 0.08 250);
36
+
37
+ /* Secondary - Purple */
38
+ --color-secondary-50: oklch(0.97 0.01 290);
39
+ --color-secondary-100: oklch(0.94 0.04 290);
40
+ --color-secondary-200: oklch(0.88 0.08 290);
41
+ --color-secondary-300: oklch(0.80 0.14 290);
42
+ --color-secondary-400: oklch(0.70 0.20 290);
43
+ --color-secondary-500: oklch(0.60 0.24 290);
44
+ --color-secondary-600: oklch(0.50 0.26 290);
45
+ --color-secondary-700: oklch(0.42 0.24 290);
46
+ --color-secondary-800: oklch(0.34 0.20 290);
47
+ --color-secondary-900: oklch(0.28 0.14 290);
48
+ --color-secondary-950: oklch(0.18 0.10 290);
49
+
50
+ /* Accent - Pink */
51
+ --color-accent-50: oklch(0.97 0.01 340);
52
+ --color-accent-100: oklch(0.94 0.04 340);
53
+ --color-accent-200: oklch(0.88 0.08 340);
54
+ --color-accent-300: oklch(0.80 0.14 340);
55
+ --color-accent-400: oklch(0.72 0.20 340);
56
+ --color-accent-500: oklch(0.64 0.24 340);
57
+ --color-accent-600: oklch(0.54 0.26 340);
58
+ --color-accent-700: oklch(0.44 0.24 340);
59
+ --color-accent-800: oklch(0.36 0.20 340);
60
+ --color-accent-900: oklch(0.30 0.14 340);
61
+ --color-accent-950: oklch(0.20 0.10 340);
62
+
63
+ /* Success - Green */
64
+ --color-success-50: oklch(0.97 0.01 150);
65
+ --color-success-100: oklch(0.94 0.03 150);
66
+ --color-success-200: oklch(0.88 0.08 150);
67
+ --color-success-300: oklch(0.80 0.14 150);
68
+ --color-success-400: oklch(0.72 0.18 150);
69
+ --color-success-500: oklch(0.64 0.20 150);
70
+ --color-success-600: oklch(0.54 0.20 150);
71
+ --color-success-700: oklch(0.44 0.18 150);
72
+ --color-success-800: oklch(0.36 0.14 150);
73
+ --color-success-900: oklch(0.30 0.10 150);
74
+ --color-success-950: oklch(0.20 0.06 150);
75
+
76
+ /* Danger - Red */
77
+ --color-danger-50: oklch(0.97 0.01 20);
78
+ --color-danger-100: oklch(0.94 0.04 20);
79
+ --color-danger-200: oklch(0.88 0.08 20);
80
+ --color-danger-300: oklch(0.80 0.14 20);
81
+ --color-danger-400: oklch(0.70 0.20 20);
82
+ --color-danger-500: oklch(0.62 0.24 20);
83
+ --color-danger-600: oklch(0.52 0.24 20);
84
+ --color-danger-700: oklch(0.44 0.22 20);
85
+ --color-danger-800: oklch(0.36 0.18 20);
86
+ --color-danger-900: oklch(0.30 0.14 20);
87
+ --color-danger-950: oklch(0.20 0.10 20);
88
+
89
+ /* Warning - Amber */
90
+ --color-warning-50: oklch(0.97 0.01 85);
91
+ --color-warning-100: oklch(0.94 0.04 85);
92
+ --color-warning-200: oklch(0.90 0.08 85);
93
+ --color-warning-300: oklch(0.84 0.14 85);
94
+ --color-warning-400: oklch(0.76 0.18 85);
95
+ --color-warning-500: oklch(0.68 0.20 85);
96
+ --color-warning-600: oklch(0.58 0.20 85);
97
+ --color-warning-700: oklch(0.48 0.18 85);
98
+ --color-warning-800: oklch(0.40 0.14 85);
99
+ --color-warning-900: oklch(0.34 0.10 85);
100
+ --color-warning-950: oklch(0.24 0.06 85);
101
+
102
+ /* Info - Sky */
103
+ --color-info-50: oklch(0.97 0.01 220);
104
+ --color-info-100: oklch(0.94 0.03 220);
105
+ --color-info-200: oklch(0.88 0.06 220);
106
+ --color-info-300: oklch(0.80 0.12 220);
107
+ --color-info-400: oklch(0.70 0.16 220);
108
+ --color-info-500: oklch(0.62 0.18 220);
109
+ --color-info-600: oklch(0.52 0.18 220);
110
+ --color-info-700: oklch(0.44 0.16 220);
111
+ --color-info-800: oklch(0.36 0.12 220);
112
+ --color-info-900: oklch(0.30 0.08 220);
113
+ --color-info-950: oklch(0.20 0.05 220);
114
+
115
+ /* Light - Slate (Light backgrounds) */
116
+ --color-light-50: oklch(0.99 0.00 240);
117
+ --color-light-100: oklch(0.97 0.00 240);
118
+ --color-light-200: oklch(0.95 0.01 240);
119
+ --color-light-300: oklch(0.92 0.01 240);
120
+ --color-light-400: oklch(0.88 0.01 240);
121
+ --color-light-500: oklch(0.82 0.02 240);
122
+ --color-light-600: oklch(0.72 0.02 240);
123
+ --color-light-700: oklch(0.62 0.02 240);
124
+ --color-light-800: oklch(0.48 0.02 240);
125
+ --color-light-900: oklch(0.36 0.02 240);
126
+ --color-light-950: oklch(0.24 0.02 240);
127
+
128
+ /* Dark - Slate (Dark backgrounds) */
129
+ --color-dark-50: oklch(0.97 0.00 240);
130
+ --color-dark-100: oklch(0.94 0.01 240);
131
+ --color-dark-200: oklch(0.88 0.01 240);
132
+ --color-dark-300: oklch(0.78 0.02 240);
133
+ --color-dark-400: oklch(0.62 0.02 240);
134
+ --color-dark-500: oklch(0.48 0.02 240);
135
+ --color-dark-600: oklch(0.38 0.02 240);
136
+ --color-dark-700: oklch(0.30 0.02 240);
137
+ --color-dark-800: oklch(0.22 0.02 240);
138
+ --color-dark-900: oklch(0.16 0.02 240);
139
+ --color-dark-950: oklch(0.10 0.02 240);
140
+
141
+ /* ============================================
142
+ TYPOGRAPHY
143
+ ============================================ */
144
+
145
+ --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
146
+ --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
147
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
148
+
149
+ /* ============================================
150
+ SPACING & SIZING
151
+ ============================================ */
152
+
153
+ --spacing-0: 0;
154
+ --spacing-1: 0.25rem;
155
+ --spacing-2: 0.5rem;
156
+ --spacing-3: 0.75rem;
157
+ --spacing-4: 1rem;
158
+ --spacing-5: 1.25rem;
159
+ --spacing-6: 1.5rem;
160
+ --spacing-8: 2rem;
161
+ --spacing-10: 2.5rem;
162
+ --spacing-12: 3rem;
163
+ --spacing-16: 4rem;
164
+ --spacing-20: 5rem;
165
+ --spacing-24: 6rem;
166
+
167
+ /* ============================================
168
+ BORDER RADIUS
169
+ ============================================ */
170
+
171
+ --radius-none: 0;
172
+ --radius-sm: 0.125rem;
173
+ --radius-base: 0.25rem;
174
+ --radius-md: 0.375rem;
175
+ --radius-lg: 0.5rem;
176
+ --radius-xl: 0.75rem;
177
+ --radius-2xl: 1rem;
178
+ --radius-3xl: 1.5rem;
179
+ --radius-full: 9999px;
180
+
181
+ /* ============================================
182
+ SHADOWS
183
+ ============================================ */
184
+
185
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
186
+ --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
187
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
188
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
189
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
190
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
191
+ }
192
+
193
+ /* ============================================
194
+ UTILITY CLASSES
195
+ ============================================ */
196
+
197
+ @layer utilities {
198
+ /* Heading text colors for each variant */
199
+ .text-heading-primary {
200
+ @apply text-primary-700 dark:text-primary-300;
201
+ }
202
+
203
+ .text-heading-secondary {
204
+ @apply text-secondary-700 dark:text-secondary-300;
205
+ }
206
+
207
+ .text-heading-accent {
208
+ @apply text-accent-700 dark:text-accent-300;
209
+ }
210
+
211
+ .text-heading-success {
212
+ @apply text-success-700 dark:text-success-300;
213
+ }
214
+
215
+ .text-heading-danger {
216
+ @apply text-danger-700 dark:text-danger-300;
217
+ }
218
+
219
+ .text-heading-warning {
220
+ @apply text-warning-700 dark:text-warning-300;
221
+ }
222
+
223
+ .text-heading-info {
224
+ @apply text-info-700 dark:text-info-300;
225
+ }
226
+
227
+ .text-heading-light {
228
+ @apply text-light-700 dark:text-light-300;
229
+ }
230
+
231
+ .text-heading-dark {
232
+ @apply text-dark-700 dark:text-dark-300;
233
+ }
234
+
235
+ /* Hide number input spinners */
236
+ .no-spinner::-webkit-inner-spin-button,
237
+ .no-spinner::-webkit-outer-spin-button {
238
+ -webkit-appearance: none;
239
+ margin: 0;
240
+ }
241
+
242
+ .no-spinner {
243
+ -moz-appearance: textfield;
244
+ appearance: textfield;
245
+ }
246
+
247
+ /* Focus ring utilities */
248
+ .focus-ring {
249
+ @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
250
+ }
251
+
252
+ .focus-ring-inset {
253
+ @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500;
254
+ }
255
+
256
+ /* Smooth scrolling */
257
+ .scroll-smooth {
258
+ scroll-behavior: smooth;
259
+ }
260
+
261
+ /* Truncate text */
262
+ .truncate {
263
+ overflow: hidden;
264
+ text-overflow: ellipsis;
265
+ white-space: nowrap;
266
+ }
267
+
268
+ /* Glass morphism effect */
269
+ .glass {
270
+ background: rgba(255, 255, 255, 0.7);
271
+ backdrop-filter: blur(10px);
272
+ -webkit-backdrop-filter: blur(10px);
273
+ }
274
+
275
+ .glass-dark {
276
+ background: rgba(0, 0, 0, 0.5);
277
+ backdrop-filter: blur(10px);
278
+ -webkit-backdrop-filter: blur(10px);
279
+ }
280
+ }
@@ -1,4 +1,39 @@
1
- # desc "Explaining what the task does"
2
- # task :better_ui do
3
- # # Task goes here
4
- # end
1
+ # frozen_string_literal: true
2
+
3
+ namespace :better_ui do
4
+ desc "Sync npm package version with gem version"
5
+ task :sync_version do
6
+ require_relative "../better_ui/version"
7
+
8
+ package_json_path = File.expand_path("../../assets/package.json", __dir__)
9
+
10
+ unless File.exist?(package_json_path)
11
+ puts "Error: assets/package.json not found at #{package_json_path}"
12
+ exit 1
13
+ end
14
+
15
+ require "json"
16
+ package_json = JSON.parse(File.read(package_json_path))
17
+ old_version = package_json["version"]
18
+ package_json["version"] = BetterUi::VERSION
19
+
20
+ File.write(package_json_path, JSON.pretty_generate(package_json) + "\n")
21
+
22
+ puts "Synced npm package version: #{old_version} -> #{BetterUi::VERSION}"
23
+ end
24
+
25
+ desc "Build npm package (run from gem root)"
26
+ task :build_npm do
27
+ assets_dir = File.expand_path("../../assets", __dir__)
28
+
29
+ Dir.chdir(assets_dir) do
30
+ puts "Installing dependencies..."
31
+ system("yarn install") || abort("Failed to install dependencies")
32
+
33
+ puts "Building npm package..."
34
+ system("yarn build") || abort("Failed to build npm package")
35
+
36
+ puts "npm package built successfully in assets/dist/"
37
+ end
38
+ end
39
+ end
metadata CHANGED
@@ -1,72 +1,62 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: better_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.0
4
+ version: 0.7.0
5
5
  platform: ruby
6
6
  authors:
7
- - alessiobussolari
8
- - umberto_peserico
9
- autorequire:
7
+ - Umberto Peserico
10
8
  bindir: bin
11
9
  cert_chain: []
12
- date: 2025-06-07 00:00:00.000000000 Z
10
+ date: 1980-01-02 00:00:00.000000000 Z
13
11
  dependencies:
14
12
  - !ruby/object:Gem::Dependency
15
13
  name: rails
16
14
  requirement: !ruby/object:Gem::Requirement
17
15
  requirements:
18
- - - ">="
16
+ - - "~>"
19
17
  - !ruby/object:Gem::Version
20
- version: 7.0.0
21
- type: :runtime
22
- prerelease: false
23
- version_requirements: !ruby/object:Gem::Requirement
24
- requirements:
18
+ version: '8.1'
25
19
  - - ">="
26
20
  - !ruby/object:Gem::Version
27
- version: 7.0.0
28
- - !ruby/object:Gem::Dependency
29
- name: view_component
30
- requirement: !ruby/object:Gem::Requirement
31
- requirements:
32
- - - "~>"
33
- - !ruby/object:Gem::Version
34
- version: '3.22'
21
+ version: 8.1.1
35
22
  type: :runtime
36
23
  prerelease: false
37
24
  version_requirements: !ruby/object:Gem::Requirement
38
25
  requirements:
39
26
  - - "~>"
40
27
  - !ruby/object:Gem::Version
41
- version: '3.22'
28
+ version: '8.1'
29
+ - - ">="
30
+ - !ruby/object:Gem::Version
31
+ version: 8.1.1
42
32
  - !ruby/object:Gem::Dependency
43
- name: redcarpet
33
+ name: view_component
44
34
  requirement: !ruby/object:Gem::Requirement
45
35
  requirements:
46
36
  - - "~>"
47
37
  - !ruby/object:Gem::Version
48
- version: '3.6'
38
+ version: '4.1'
49
39
  type: :runtime
50
40
  prerelease: false
51
41
  version_requirements: !ruby/object:Gem::Requirement
52
42
  requirements:
53
43
  - - "~>"
54
44
  - !ruby/object:Gem::Version
55
- version: '3.6'
45
+ version: '4.1'
56
46
  - !ruby/object:Gem::Dependency
57
- name: coderay
47
+ name: tailwind_merge
58
48
  requirement: !ruby/object:Gem::Requirement
59
49
  requirements:
60
50
  - - "~>"
61
51
  - !ruby/object:Gem::Version
62
- version: '1.1'
52
+ version: '0.12'
63
53
  type: :runtime
64
54
  prerelease: false
65
55
  version_requirements: !ruby/object:Gem::Requirement
66
56
  requirements:
67
57
  - - "~>"
68
58
  - !ruby/object:Gem::Version
69
- version: '1.1'
59
+ version: '0.12'
70
60
  - !ruby/object:Gem::Dependency
71
61
  name: lookbook
72
62
  requirement: !ruby/object:Gem::Requirement
@@ -81,25 +71,10 @@ dependencies:
81
71
  - - "~>"
82
72
  - !ruby/object:Gem::Version
83
73
  version: '2.3'
84
- - !ruby/object:Gem::Dependency
85
- name: font-awesome-sass
86
- requirement: !ruby/object:Gem::Requirement
87
- requirements:
88
- - - "~>"
89
- - !ruby/object:Gem::Version
90
- version: '6.5'
91
- type: :runtime
92
- prerelease: false
93
- version_requirements: !ruby/object:Gem::Requirement
94
- requirements:
95
- - - "~>"
96
- - !ruby/object:Gem::Version
97
- version: '6.5'
98
74
  description: Better UI is a Rails gem that works as a mountable engine containing
99
75
  reusable UI components, built with ViewComponent and Tailwind CSS, following the
100
76
  BEM methodology. It includes documentation and interactive previews with Lookbook.
101
77
  email:
102
- - alessio.bussolari@pandev.it
103
78
  - umberto.peserico@pandev.it
104
79
  executables: []
105
80
  extensions: []
@@ -109,178 +84,56 @@ files:
109
84
  - README.md
110
85
  - Rakefile
111
86
  - app/assets/stylesheets/better_ui/application.css
112
- - app/components/better_ui/application/card/component.html.erb
113
- - app/components/better_ui/application/card/component.rb
114
- - app/components/better_ui/application/main/component.html.erb
115
- - app/components/better_ui/application/main/component.rb
116
- - app/components/better_ui/application/navbar/component.html.erb
117
- - app/components/better_ui/application/navbar/component.rb
118
- - app/components/better_ui/application/sidebar/component.html.erb
119
- - app/components/better_ui/application/sidebar/component.rb
120
- - app/components/better_ui/general/accordion/component.html.erb
121
- - app/components/better_ui/general/accordion/component.rb
122
- - app/components/better_ui/general/accordion/item_component.html.erb
123
- - app/components/better_ui/general/accordion/item_component.rb
124
- - app/components/better_ui/general/alert/component.html.erb
125
- - app/components/better_ui/general/alert/component.rb
126
- - app/components/better_ui/general/avatar/component.html.erb
127
- - app/components/better_ui/general/avatar/component.rb
128
- - app/components/better_ui/general/badge/component.html.erb
129
- - app/components/better_ui/general/badge/component.rb
130
- - app/components/better_ui/general/breadcrumb/component.html.erb
131
- - app/components/better_ui/general/breadcrumb/component.rb
132
- - app/components/better_ui/general/button/component.html.erb
133
- - app/components/better_ui/general/button/component.rb
134
- - app/components/better_ui/general/divider/component.html.erb
135
- - app/components/better_ui/general/divider/component.rb
136
- - app/components/better_ui/general/dropdown/component.html.erb
137
- - app/components/better_ui/general/dropdown/component.rb
138
- - app/components/better_ui/general/dropdown/divider_component.html.erb
139
- - app/components/better_ui/general/dropdown/divider_component.rb
140
- - app/components/better_ui/general/dropdown/item_component.html.erb
141
- - app/components/better_ui/general/dropdown/item_component.rb
142
- - app/components/better_ui/general/field/component.html.erb
143
- - app/components/better_ui/general/field/component.rb
144
- - app/components/better_ui/general/grid/cell_component.html.erb
145
- - app/components/better_ui/general/grid/cell_component.rb
146
- - app/components/better_ui/general/grid/component.html.erb
147
- - app/components/better_ui/general/grid/component.rb
148
- - app/components/better_ui/general/heading/component.html.erb
149
- - app/components/better_ui/general/heading/component.rb
150
- - app/components/better_ui/general/icon/component.html.erb
151
- - app/components/better_ui/general/icon/component.rb
152
- - app/components/better_ui/general/input/checkbox/component.html.erb
153
- - app/components/better_ui/general/input/checkbox/component.rb
154
- - app/components/better_ui/general/input/datetime/component.html.erb
155
- - app/components/better_ui/general/input/datetime/component.rb
156
- - app/components/better_ui/general/input/pin/component.html.erb
157
- - app/components/better_ui/general/input/pin/component.rb
158
- - app/components/better_ui/general/input/radio/component.html.erb
159
- - app/components/better_ui/general/input/radio/component.rb
160
- - app/components/better_ui/general/input/rating/component.html.erb
161
- - app/components/better_ui/general/input/rating/component.rb
162
- - app/components/better_ui/general/input/select/component.html.erb
163
- - app/components/better_ui/general/input/select/component.rb
164
- - app/components/better_ui/general/input/select/select_component.html.erb
165
- - app/components/better_ui/general/input/select/select_component.rb
166
- - app/components/better_ui/general/input/text/component.html.erb
167
- - app/components/better_ui/general/input/text/component.rb
168
- - app/components/better_ui/general/input/textarea/component.html.erb
169
- - app/components/better_ui/general/input/textarea/component.rb
170
- - app/components/better_ui/general/input/toggle/component.html.erb
171
- - app/components/better_ui/general/input/toggle/component.rb
172
- - app/components/better_ui/general/link/component.html.erb
173
- - app/components/better_ui/general/link/component.rb
174
- - app/components/better_ui/general/modal/component.html.erb
175
- - app/components/better_ui/general/modal/component.rb
176
- - app/components/better_ui/general/modal/modal_component.html.erb
177
- - app/components/better_ui/general/modal/modal_component.rb
178
- - app/components/better_ui/general/pagination/component.html.erb
179
- - app/components/better_ui/general/pagination/component.rb
180
- - app/components/better_ui/general/panel/component.html.erb
181
- - app/components/better_ui/general/panel/component.rb
182
- - app/components/better_ui/general/progress/component.html.erb
183
- - app/components/better_ui/general/progress/component.rb
184
- - app/components/better_ui/general/spinner/component.html.erb
185
- - app/components/better_ui/general/spinner/component.rb
186
- - app/components/better_ui/general/table/component.html.erb
187
- - app/components/better_ui/general/table/component.rb
188
- - app/components/better_ui/general/table/tbody_component.html.erb
189
- - app/components/better_ui/general/table/tbody_component.rb
190
- - app/components/better_ui/general/table/td_component.html.erb
191
- - app/components/better_ui/general/table/td_component.rb
192
- - app/components/better_ui/general/table/tfoot_component.html.erb
193
- - app/components/better_ui/general/table/tfoot_component.rb
194
- - app/components/better_ui/general/table/th_component.html.erb
195
- - app/components/better_ui/general/table/th_component.rb
196
- - app/components/better_ui/general/table/thead_component.html.erb
197
- - app/components/better_ui/general/table/thead_component.rb
198
- - app/components/better_ui/general/table/tr_component.html.erb
199
- - app/components/better_ui/general/table/tr_component.rb
200
- - app/components/better_ui/general/tabs/component.html.erb
201
- - app/components/better_ui/general/tabs/component.rb
202
- - app/components/better_ui/general/tabs/panel_component.html.erb
203
- - app/components/better_ui/general/tabs/panel_component.rb
204
- - app/components/better_ui/general/tabs/tab_component.html.erb
205
- - app/components/better_ui/general/tabs/tab_component.rb
206
- - app/components/better_ui/general/tag/component.html.erb
207
- - app/components/better_ui/general/tag/component.rb
208
- - app/components/better_ui/general/text/component.html.erb
209
- - app/components/better_ui/general/text/component.rb
210
- - app/components/better_ui/general/tooltip/component.html.erb
211
- - app/components/better_ui/general/tooltip/component.rb
87
+ - app/components/better_ui/action_messages_component.rb
88
+ - app/components/better_ui/action_messages_component/action_messages_component.html.erb
89
+ - app/components/better_ui/application_component.rb
90
+ - app/components/better_ui/button_component.rb
91
+ - app/components/better_ui/button_component/button_component.html.erb
92
+ - app/components/better_ui/card_component.rb
93
+ - app/components/better_ui/card_component/card_component.html.erb
94
+ - app/components/better_ui/drawer/header_component.rb
95
+ - app/components/better_ui/drawer/header_component/header_component.html.erb
96
+ - app/components/better_ui/drawer/layout_component.rb
97
+ - app/components/better_ui/drawer/layout_component/layout_component.html.erb
98
+ - app/components/better_ui/drawer/nav_group_component.rb
99
+ - app/components/better_ui/drawer/nav_group_component/nav_group_component.html.erb
100
+ - app/components/better_ui/drawer/nav_item_component.rb
101
+ - app/components/better_ui/drawer/nav_item_component/nav_item_component.html.erb
102
+ - app/components/better_ui/drawer/sidebar_component.rb
103
+ - app/components/better_ui/drawer/sidebar_component/sidebar_component.html.erb
104
+ - app/components/better_ui/forms/base_component.rb
105
+ - app/components/better_ui/forms/checkbox_component.rb
106
+ - app/components/better_ui/forms/checkbox_component/checkbox_component.html.erb
107
+ - app/components/better_ui/forms/checkbox_group_component.rb
108
+ - app/components/better_ui/forms/checkbox_group_component/checkbox_group_component.html.erb
109
+ - app/components/better_ui/forms/number_input_component.rb
110
+ - app/components/better_ui/forms/number_input_component/number_input_component.html.erb
111
+ - app/components/better_ui/forms/password_input_component.rb
112
+ - app/components/better_ui/forms/password_input_component/password_input_component.html.erb
113
+ - app/components/better_ui/forms/text_input_component.rb
114
+ - app/components/better_ui/forms/text_input_component/text_input_component.html.erb
115
+ - app/components/better_ui/forms/textarea_component.rb
116
+ - app/components/better_ui/forms/textarea_component/textarea_component.html.erb
212
117
  - app/controllers/better_ui/application_controller.rb
213
- - app/helpers/better_ui/application/components/card.rb
214
- - app/helpers/better_ui/application/components/card/card_helper.rb
215
- - app/helpers/better_ui/application/components/main/main_helper.rb
216
- - app/helpers/better_ui/application/components/navbar/navbar_helper.rb
217
- - app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb
118
+ - app/form_builders/better_ui/ui_form_builder.rb
218
119
  - app/helpers/better_ui/application_helper.rb
219
- - app/helpers/better_ui/general/components/accordion/accordion_helper.rb
220
- - app/helpers/better_ui/general/components/alert/alert_helper.rb
221
- - app/helpers/better_ui/general/components/avatar/avatar_helper.rb
222
- - app/helpers/better_ui/general/components/badge/badge_helper.rb
223
- - app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb
224
- - app/helpers/better_ui/general/components/button/button_helper.rb
225
- - app/helpers/better_ui/general/components/container/container_helper.rb
226
- - app/helpers/better_ui/general/components/divider/divider_helper.rb
227
- - app/helpers/better_ui/general/components/dropdown/divider_helper.rb
228
- - app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb
229
- - app/helpers/better_ui/general/components/dropdown/item_helper.rb
230
- - app/helpers/better_ui/general/components/field/field_helper.rb
231
- - app/helpers/better_ui/general/components/grid/grid_helper.rb
232
- - app/helpers/better_ui/general/components/heading/heading_helper.rb
233
- - app/helpers/better_ui/general/components/icon/icon_helper.rb
234
- - app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb
235
- - app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb
236
- - app/helpers/better_ui/general/components/input/pin/pin_helper.rb
237
- - app/helpers/better_ui/general/components/input/radio/radio_helper.rb
238
- - app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb
239
- - app/helpers/better_ui/general/components/input/rating/rating_helper.rb
240
- - app/helpers/better_ui/general/components/input/select/select_helper.rb
241
- - app/helpers/better_ui/general/components/input/text/text_helper.rb
242
- - app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb
243
- - app/helpers/better_ui/general/components/input/toggle/toggle_helper.rb
244
- - app/helpers/better_ui/general/components/link/link_helper.rb
245
- - app/helpers/better_ui/general/components/modal/modal_helper.rb
246
- - app/helpers/better_ui/general/components/pagination/pagination_helper.rb
247
- - app/helpers/better_ui/general/components/panel/panel_helper.rb
248
- - app/helpers/better_ui/general/components/progress/progress_helper.rb
249
- - app/helpers/better_ui/general/components/spinner/spinner_helper.rb
250
- - app/helpers/better_ui/general/components/table/table_helper.rb
251
- - app/helpers/better_ui/general/components/table/tbody_helper.rb
252
- - app/helpers/better_ui/general/components/table/td_helper.rb
253
- - app/helpers/better_ui/general/components/table/tfoot_helper.rb
254
- - app/helpers/better_ui/general/components/table/th_helper.rb
255
- - app/helpers/better_ui/general/components/table/thead_helper.rb
256
- - app/helpers/better_ui/general/components/table/tr_helper.rb
257
- - app/helpers/better_ui/general/components/tabs/panel_helper.rb
258
- - app/helpers/better_ui/general/components/tabs/tab_helper.rb
259
- - app/helpers/better_ui/general/components/tabs/tabs_helper.rb
260
- - app/helpers/better_ui/general/components/tag/tag_helper.rb
261
- - app/helpers/better_ui/general/components/text/text_helper.rb
262
- - app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb
263
- - app/jobs/better_ui/application_job.rb
264
- - app/mailers/better_ui/application_mailer.rb
265
120
  - app/models/better_ui/application_record.rb
266
121
  - app/views/layouts/better_ui/application.html.erb
267
- - config/initializers/lookbook.rb
268
122
  - config/routes.rb
269
123
  - lib/better_ui.rb
270
124
  - lib/better_ui/engine.rb
271
- - lib/better_ui/railtie.rb
272
125
  - lib/better_ui/version.rb
126
+ - lib/generators/better_ui/install/USAGE
127
+ - lib/generators/better_ui/install/install_generator.rb
128
+ - lib/generators/better_ui/install/templates/better_ui_theme.css.tt
273
129
  - lib/tasks/better_ui_tasks.rake
274
130
  homepage: https://github.com/alessiobussolari/better_ui
275
131
  licenses:
276
132
  - MIT
277
133
  metadata:
278
134
  allowed_push_host: https://rubygems.org
279
- homepage_uri: https://github.com/alessiobussolari/better_ui
280
135
  source_code_uri: https://github.com/alessiobussolari/better_ui
281
136
  changelog_uri: https://github.com/alessiobussolari/better_ui/blob/main/CHANGELOG.md
282
- rubygems_mfa_required: 'true'
283
- post_install_message:
284
137
  rdoc_options: []
285
138
  require_paths:
286
139
  - lib
@@ -288,15 +141,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
288
141
  requirements:
289
142
  - - ">="
290
143
  - !ruby/object:Gem::Version
291
- version: '0'
144
+ version: 3.2.0
292
145
  required_rubygems_version: !ruby/object:Gem::Requirement
293
146
  requirements:
294
147
  - - ">="
295
148
  - !ruby/object:Gem::Version
296
149
  version: '0'
297
150
  requirements: []
298
- rubygems_version: 3.5.11
299
- signing_key:
151
+ rubygems_version: 3.7.2
300
152
  specification_version: 4
301
153
  summary: Elegant and reusable UI components for Rails with integrated documentation
302
154
  test_files: []