shadcn_phlexcomponents 0.1.18 → 0.1.19

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 (128) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +321 -23
  3. data/app/javascript/controllers/accordion_controller.js +101 -90
  4. data/app/javascript/controllers/alert_dialog_controller.js +5 -4
  5. data/app/javascript/controllers/avatar_controller.js +12 -11
  6. data/app/javascript/controllers/checkbox_controller.js +26 -26
  7. data/app/javascript/controllers/collapsible_controller.js +35 -36
  8. data/app/javascript/controllers/combobox_controller.js +262 -231
  9. data/app/javascript/controllers/command_controller.js +205 -184
  10. data/app/javascript/controllers/date_picker_controller.js +252 -253
  11. data/app/javascript/controllers/date_range_picker_controller.js +189 -200
  12. data/app/javascript/controllers/dialog_controller.js +79 -78
  13. data/app/javascript/controllers/dropdown_menu_controller.js +229 -208
  14. data/app/javascript/controllers/dropdown_menu_sub_controller.js +111 -97
  15. data/app/javascript/controllers/form_field_controller.js +17 -16
  16. data/app/javascript/controllers/hover_card_controller.js +69 -71
  17. data/app/javascript/controllers/loading_button_controller.js +11 -10
  18. data/app/javascript/controllers/popover_controller.js +85 -78
  19. data/app/javascript/controllers/progress_controller.js +12 -11
  20. data/app/javascript/controllers/radio_group_controller.js +75 -74
  21. data/app/javascript/controllers/select_controller.js +247 -232
  22. data/app/javascript/controllers/sidebar_controller.js +26 -27
  23. data/app/javascript/controllers/sidebar_trigger_controller.js +12 -9
  24. data/app/javascript/controllers/slider_controller.js +74 -74
  25. data/app/javascript/controllers/switch_controller.js +23 -23
  26. data/app/javascript/controllers/tabs_controller.js +61 -61
  27. data/app/javascript/controllers/theme_switcher_controller.js +28 -27
  28. data/app/javascript/controllers/toast_container_controller.js +45 -31
  29. data/app/javascript/controllers/toast_controller.js +19 -18
  30. data/app/javascript/controllers/toggle_controller.js +17 -17
  31. data/app/javascript/controllers/toggle_group_controller.js +17 -17
  32. data/app/javascript/controllers/tooltip_controller.js +75 -77
  33. data/app/javascript/shadcn_phlexcomponents.js +27 -60
  34. data/app/javascript/utils/command.js +390 -334
  35. data/app/javascript/utils/floating_ui.js +139 -107
  36. data/app/javascript/utils/index.js +253 -190
  37. data/app/typescript/controllers/accordion_controller.ts +2 -0
  38. data/app/typescript/controllers/alert_dialog_controller.ts +2 -0
  39. data/app/typescript/controllers/avatar_controller.ts +2 -0
  40. data/app/typescript/controllers/checkbox_controller.ts +2 -0
  41. data/app/typescript/controllers/collapsible_controller.ts +2 -0
  42. data/app/typescript/controllers/combobox_controller.ts +2 -0
  43. data/app/typescript/controllers/command_controller.ts +2 -0
  44. data/app/typescript/controllers/date_picker_controller.ts +2 -0
  45. data/app/typescript/controllers/date_range_picker_controller.ts +2 -0
  46. data/app/typescript/controllers/dialog_controller.ts +2 -0
  47. data/app/typescript/controllers/dropdown_menu_controller.ts +2 -0
  48. data/app/typescript/controllers/dropdown_menu_sub_controller.ts +2 -0
  49. data/app/typescript/controllers/form_field_controller.ts +2 -0
  50. data/app/typescript/controllers/hover_card_controller.ts +2 -0
  51. data/app/typescript/controllers/loading_button_controller.ts +2 -0
  52. data/app/typescript/controllers/popover_controller.ts +2 -0
  53. data/app/typescript/controllers/progress_controller.ts +2 -0
  54. data/app/typescript/controllers/radio_group_controller.ts +2 -0
  55. data/app/typescript/controllers/select_controller.ts +2 -0
  56. data/app/typescript/controllers/slider_controller.ts +2 -0
  57. data/app/typescript/controllers/switch_controller.ts +2 -0
  58. data/app/typescript/controllers/tabs_controller.ts +2 -0
  59. data/app/typescript/controllers/theme_switcher_controller.ts +2 -0
  60. data/app/typescript/controllers/toast_container_controller.ts +2 -0
  61. data/app/typescript/controllers/toast_controller.ts +2 -0
  62. data/app/typescript/controllers/toggle_controller.ts +2 -0
  63. data/app/typescript/controllers/toggle_group_controller.ts +2 -0
  64. data/app/typescript/controllers/tooltip_controller.ts +2 -0
  65. data/app/typescript/shadcn_phlexcomponents.ts +27 -61
  66. data/app/typescript/utils/index.ts +7 -0
  67. data/lib/install/upgrade_shadcn_phlexcomponents.rb +28 -0
  68. data/lib/shadcn_phlexcomponents/components/accordion.rb +55 -12
  69. data/lib/shadcn_phlexcomponents/components/alert.rb +35 -16
  70. data/lib/shadcn_phlexcomponents/components/alert_dialog.rb +52 -12
  71. data/lib/shadcn_phlexcomponents/components/aspect_ratio.rb +33 -2
  72. data/lib/shadcn_phlexcomponents/components/avatar.rb +24 -7
  73. data/lib/shadcn_phlexcomponents/components/badge.rb +23 -18
  74. data/lib/shadcn_phlexcomponents/components/breadcrumb.rb +46 -6
  75. data/lib/shadcn_phlexcomponents/components/button.rb +32 -27
  76. data/lib/shadcn_phlexcomponents/components/card.rb +59 -10
  77. data/lib/shadcn_phlexcomponents/components/checkbox.rb +51 -30
  78. data/lib/shadcn_phlexcomponents/components/checkbox_group.rb +24 -4
  79. data/lib/shadcn_phlexcomponents/components/combobox.rb +212 -69
  80. data/lib/shadcn_phlexcomponents/components/command.rb +156 -52
  81. data/lib/shadcn_phlexcomponents/components/date_picker.rb +134 -48
  82. data/lib/shadcn_phlexcomponents/components/date_range_picker.rb +20 -42
  83. data/lib/shadcn_phlexcomponents/components/dialog.rb +80 -26
  84. data/lib/shadcn_phlexcomponents/components/dropdown_menu.rb +74 -25
  85. data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb +52 -24
  86. data/lib/shadcn_phlexcomponents/components/form/form_checkbox.rb +1 -1
  87. data/lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb +1 -1
  88. data/lib/shadcn_phlexcomponents/components/form/form_combobox.rb +1 -1
  89. data/lib/shadcn_phlexcomponents/components/form/form_date_picker.rb +1 -1
  90. data/lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb +1 -1
  91. data/lib/shadcn_phlexcomponents/components/form/form_error.rb +8 -1
  92. data/lib/shadcn_phlexcomponents/components/form/form_helpers.rb +3 -2
  93. data/lib/shadcn_phlexcomponents/components/form/form_hint.rb +8 -1
  94. data/lib/shadcn_phlexcomponents/components/form/form_input.rb +1 -1
  95. data/lib/shadcn_phlexcomponents/components/form/form_radio_group.rb +1 -1
  96. data/lib/shadcn_phlexcomponents/components/form/form_select.rb +1 -1
  97. data/lib/shadcn_phlexcomponents/components/form/form_slider.rb +1 -1
  98. data/lib/shadcn_phlexcomponents/components/form/form_switch.rb +1 -1
  99. data/lib/shadcn_phlexcomponents/components/form/form_textarea.rb +1 -1
  100. data/lib/shadcn_phlexcomponents/components/form.rb +22 -6
  101. data/lib/shadcn_phlexcomponents/components/hover_card.rb +48 -18
  102. data/lib/shadcn_phlexcomponents/components/input.rb +13 -8
  103. data/lib/shadcn_phlexcomponents/components/label.rb +9 -4
  104. data/lib/shadcn_phlexcomponents/components/link.rb +8 -1
  105. data/lib/shadcn_phlexcomponents/components/pagination.rb +34 -6
  106. data/lib/shadcn_phlexcomponents/components/popover.rb +43 -13
  107. data/lib/shadcn_phlexcomponents/components/progress.rb +37 -6
  108. data/lib/shadcn_phlexcomponents/components/radio_group.rb +41 -15
  109. data/lib/shadcn_phlexcomponents/components/select.rb +99 -42
  110. data/lib/shadcn_phlexcomponents/components/separator.rb +9 -4
  111. data/lib/shadcn_phlexcomponents/components/sheet.rb +87 -21
  112. data/lib/shadcn_phlexcomponents/components/skeleton.rb +8 -1
  113. data/lib/shadcn_phlexcomponents/components/switch.rb +45 -17
  114. data/lib/shadcn_phlexcomponents/components/table.rb +84 -17
  115. data/lib/shadcn_phlexcomponents/components/tabs.rb +36 -12
  116. data/lib/shadcn_phlexcomponents/components/textarea.rb +12 -7
  117. data/lib/shadcn_phlexcomponents/components/toast.rb +46 -20
  118. data/lib/shadcn_phlexcomponents/components/toast_container.rb +19 -14
  119. data/lib/shadcn_phlexcomponents/components/toggle.rb +28 -23
  120. data/lib/shadcn_phlexcomponents/components/tooltip.rb +49 -14
  121. data/lib/shadcn_phlexcomponents/configuration.rb +46 -0
  122. data/lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb +28 -0
  123. data/lib/shadcn_phlexcomponents/version.rb +1 -1
  124. data/lib/shadcn_phlexcomponents.rb +12 -1
  125. data/lib/tasks/upgrade.rake +10 -0
  126. metadata +15 -14
  127. data/app/typescript/controllers/sidebar_controller.ts +0 -39
  128. data/app/typescript/controllers/sidebar_trigger_controller.ts +0 -21
@@ -2,19 +2,20 @@
2
2
 
3
3
  module ShadcnPhlexcomponents
4
4
  class Table < Base
5
- class_variants(base: "w-full caption-bottom text-sm")
5
+ class_variants(
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.table&.dig(:root) ||
8
+ {
9
+ base: "w-full caption-bottom text-sm",
10
+ }
11
+ ),
12
+ )
6
13
 
7
14
  def initialize(**attributes)
8
15
  @columns = []
9
16
  super(**attributes)
10
17
  end
11
18
 
12
- def view_template(&)
13
- div(class: "relative w-full overflow-x-auto") do
14
- table(**@attributes, &)
15
- end
16
- end
17
-
18
19
  def caption(**attributes, &)
19
20
  TableCaption(**attributes, &)
20
21
  end
@@ -73,10 +74,23 @@ module ShadcnPhlexcomponents
73
74
  @columns << { header:, head_class:, cell_class:, content: }
74
75
  nil
75
76
  end
77
+
78
+ def view_template(&)
79
+ TableContainer do
80
+ table(**@attributes, &)
81
+ end
82
+ end
76
83
  end
77
84
 
78
85
  class TableCaption < Base
79
- class_variants(base: "text-muted-foreground mt-4 text-sm")
86
+ class_variants(
87
+ **(
88
+ ShadcnPhlexcomponents.configuration.table&.dig(:caption) ||
89
+ {
90
+ base: "text-muted-foreground mt-4 text-sm",
91
+ }
92
+ ),
93
+ )
80
94
 
81
95
  def view_template(&)
82
96
  caption(**@attributes, &)
@@ -84,7 +98,14 @@ module ShadcnPhlexcomponents
84
98
  end
85
99
 
86
100
  class TableHeader < Base
87
- class_variants(base: "[&_tr]:border-b")
101
+ class_variants(
102
+ **(
103
+ ShadcnPhlexcomponents.configuration.table&.dig(:header) ||
104
+ {
105
+ base: "[&_tr]:border-b",
106
+ }
107
+ ),
108
+ )
88
109
 
89
110
  def view_template(&)
90
111
  thead(**@attributes, &)
@@ -92,7 +113,14 @@ module ShadcnPhlexcomponents
92
113
  end
93
114
 
94
115
  class TableRow < Base
95
- class_variants(base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors")
116
+ class_variants(
117
+ **(
118
+ ShadcnPhlexcomponents.configuration.table&.dig(:row) ||
119
+ {
120
+ base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
121
+ }
122
+ ),
123
+ )
96
124
 
97
125
  def view_template(&)
98
126
  tr(**@attributes, &)
@@ -101,10 +129,15 @@ module ShadcnPhlexcomponents
101
129
 
102
130
  class TableHead < Base
103
131
  class_variants(
104
- base: <<~HEREDOC,
105
- text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0
106
- [&>[role=checkbox]]:translate-y-[2px]"
107
- HEREDOC
132
+ **(
133
+ ShadcnPhlexcomponents.configuration.table&.dig(:head) ||
134
+ {
135
+ base: <<~HEREDOC,
136
+ text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0
137
+ [&>[role=checkbox]]:translate-y-[2px]"
138
+ HEREDOC
139
+ }
140
+ ),
108
141
  )
109
142
 
110
143
  def view_template(&)
@@ -113,7 +146,14 @@ module ShadcnPhlexcomponents
113
146
  end
114
147
 
115
148
  class TableBody < Base
116
- class_variants(base: "[&_tr:last-child]:border-0")
149
+ class_variants(
150
+ **(
151
+ ShadcnPhlexcomponents.configuration.table&.dig(:body) ||
152
+ {
153
+ base: "[&_tr:last-child]:border-0",
154
+ }
155
+ ),
156
+ )
117
157
 
118
158
  def view_template(&)
119
159
  tbody(**@attributes, &)
@@ -122,7 +162,12 @@ module ShadcnPhlexcomponents
122
162
 
123
163
  class TableCell < Base
124
164
  class_variants(
125
- base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
165
+ **(
166
+ ShadcnPhlexcomponents.configuration.table&.dig(:cell) ||
167
+ {
168
+ base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
169
+ }
170
+ ),
126
171
  )
127
172
 
128
173
  def view_template(&)
@@ -131,10 +176,32 @@ module ShadcnPhlexcomponents
131
176
  end
132
177
 
133
178
  class TableFooter < Base
134
- class_variants(base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0")
179
+ class_variants(
180
+ **(
181
+ ShadcnPhlexcomponents.configuration.table&.dig(:footer) ||
182
+ {
183
+ base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
184
+ }
185
+ ),
186
+ )
135
187
 
136
188
  def view_template(&)
137
189
  tfoot(**@attributes, &)
138
190
  end
139
191
  end
192
+
193
+ class TableContainer < Base
194
+ class_variants(
195
+ **(
196
+ ShadcnPhlexcomponents.configuration.table&.dig(:container) ||
197
+ {
198
+ base: "relative w-full overflow-x-auto",
199
+ }
200
+ ),
201
+ )
202
+
203
+ def view_template(&)
204
+ div(**@attributes, &)
205
+ end
206
+ end
140
207
  end
@@ -2,7 +2,14 @@
2
2
 
3
3
  module ShadcnPhlexcomponents
4
4
  class Tabs < Base
5
- class_variants(base: "flex flex-col gap-2")
5
+ class_variants(
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.tabs&.dig(:root) ||
8
+ {
9
+ base: "flex flex-col gap-2",
10
+ }
11
+ ),
12
+ )
6
13
 
7
14
  def initialize(value: nil, dir: "ltr", **attributes)
8
15
  @dir = dir
@@ -40,7 +47,12 @@ module ShadcnPhlexcomponents
40
47
 
41
48
  class TabsList < Base
42
49
  class_variants(
43
- base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
50
+ **(
51
+ ShadcnPhlexcomponents.configuration.tabs&.dig(:list) ||
52
+ {
53
+ base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
54
+ }
55
+ ),
44
56
  )
45
57
 
46
58
  def view_template(&)
@@ -60,15 +72,20 @@ module ShadcnPhlexcomponents
60
72
 
61
73
  class TabsTrigger < Base
62
74
  class_variants(
63
- base: <<~HEREDOC,
64
- data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
65
- focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
66
- dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)]
67
- flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm
68
- font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
69
- disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
70
- [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
71
- HEREDOC
75
+ **(
76
+ ShadcnPhlexcomponents.configuration.tabs&.dig(:trigger) ||
77
+ {
78
+ base: <<~HEREDOC,
79
+ data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
80
+ focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
81
+ dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)]
82
+ flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm
83
+ font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
84
+ disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
85
+ [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
86
+ HEREDOC
87
+ }
88
+ ),
72
89
  )
73
90
 
74
91
  def initialize(value: nil, aria_id: nil, **attributes)
@@ -105,7 +122,14 @@ module ShadcnPhlexcomponents
105
122
  end
106
123
 
107
124
  class TabsContent < Base
108
- class_variants(base: "flex-1 outline-none")
125
+ class_variants(
126
+ **(
127
+ ShadcnPhlexcomponents.configuration.tabs&.dig(:content) ||
128
+ {
129
+ base: "flex-1 outline-none",
130
+ }
131
+ ),
132
+ )
109
133
 
110
134
  def initialize(value: nil, aria_id: nil, **attributes)
111
135
  @value = value
@@ -3,13 +3,18 @@
3
3
  module ShadcnPhlexcomponents
4
4
  class Textarea < Base
5
5
  class_variants(
6
- base: <<~HEREDOC,
7
- border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50
8
- aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
9
- dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
10
- text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
11
- disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
12
- HEREDOC
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.textarea ||
8
+ {
9
+ base: <<~HEREDOC,
10
+ border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50
11
+ aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
12
+ dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
13
+ text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
14
+ disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
15
+ HEREDOC
16
+ }
17
+ ),
13
18
  )
14
19
 
15
20
  def initialize(value: nil, **attributes)
@@ -3,23 +3,28 @@
3
3
  module ShadcnPhlexcomponents
4
4
  class Toast < Base
5
5
  class_variants(
6
- base: <<~HEREDOC,
7
- p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
8
- data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
9
- HEREDOC
10
- variants: {
11
- variant: {
12
- default: "bg-popover text-popover-foreground",
13
- destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
14
- },
15
- side: {
16
- top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
17
- bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
18
- },
19
- },
20
- defaults: {
21
- variant: :default,
22
- },
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.toast&.dig(:root) ||
8
+ {
9
+ base: <<~HEREDOC,
10
+ p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
11
+ data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
12
+ HEREDOC
13
+ variants: {
14
+ variant: {
15
+ default: "bg-popover text-popover-foreground",
16
+ destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
17
+ },
18
+ side: {
19
+ top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
20
+ bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
21
+ },
22
+ },
23
+ defaults: {
24
+ variant: :default,
25
+ },
26
+ }
27
+ ),
23
28
  )
24
29
 
25
30
  def initialize(variant: :default, side: :top, duration: 5000, **attributes)
@@ -76,7 +81,14 @@ module ShadcnPhlexcomponents
76
81
  end
77
82
 
78
83
  class ToastContent < Base
79
- class_variants(base: "flex flex-col gap-0.5")
84
+ class_variants(
85
+ **(
86
+ ShadcnPhlexcomponents.configuration.toast&.dig(:content) ||
87
+ {
88
+ base: "flex flex-col gap-0.5",
89
+ }
90
+ ),
91
+ )
80
92
 
81
93
  def view_template(&)
82
94
  div(**@attributes, &)
@@ -84,7 +96,14 @@ module ShadcnPhlexcomponents
84
96
  end
85
97
 
86
98
  class ToastTitle < Base
87
- class_variants(base: "font-medium leading-[1.5]")
99
+ class_variants(
100
+ **(
101
+ ShadcnPhlexcomponents.configuration.toast&.dig(:title) ||
102
+ {
103
+ base: "font-medium leading-[1.5]",
104
+ }
105
+ ),
106
+ )
88
107
 
89
108
  def view_template(&)
90
109
  div(**@attributes, &)
@@ -92,7 +111,14 @@ module ShadcnPhlexcomponents
92
111
  end
93
112
 
94
113
  class ToastDescription < Base
95
- class_variants(base: "leading-[1.4] opacity-90")
114
+ class_variants(
115
+ **(
116
+ ShadcnPhlexcomponents.configuration.toast&.dig(:description) ||
117
+ {
118
+ base: "leading-[1.4] opacity-90",
119
+ }
120
+ ),
121
+ )
96
122
 
97
123
  def view_template(&)
98
124
  div(**@attributes, &)
@@ -3,20 +3,25 @@
3
3
  module ShadcnPhlexcomponents
4
4
  class ToastContainer < Base
5
5
  class_variants(
6
- base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
7
- variants: {
8
- side: {
9
- top_center: "top-6 left-1/2 -translate-x-1/2",
10
- top_left: "top-6 left-6",
11
- top_right: "top-6 right-6",
12
- bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
13
- bottom_left: "bottom-6 left-6",
14
- bottom_right: "right-6 bottom-6",
15
- },
16
- },
17
- defaults: {
18
- side: :top_center,
19
- },
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.toast_container ||
8
+ {
9
+ base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
10
+ variants: {
11
+ side: {
12
+ top_center: "top-6 left-1/2 -translate-x-1/2",
13
+ top_left: "top-6 left-6",
14
+ top_right: "top-6 right-6",
15
+ bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
16
+ bottom_left: "bottom-6 left-6",
17
+ bottom_right: "right-6 bottom-6",
18
+ },
19
+ },
20
+ defaults: {
21
+ side: :top_center,
22
+ },
23
+ }
24
+ ),
20
25
  )
21
26
 
22
27
  def initialize(side: :top_center, **attributes)
@@ -3,29 +3,34 @@
3
3
  module ShadcnPhlexcomponents
4
4
  class Toggle < Base
5
5
  class_variants(
6
- base: <<~HEREDOC,
7
- inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
8
- hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
9
- data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
10
- [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
11
- transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
12
- aria-invalid:border-destructive whitespace-nowrap
13
- HEREDOC
14
- variants: {
15
- variant: {
16
- default: "bg-transparent",
17
- outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
18
- },
19
- size: {
20
- default: "h-9 px-2 min-w-9",
21
- sm: "h-8 px-1.5 min-w-8",
22
- lg: "h-10 px-2.5 min-w-10",
23
- },
24
- },
25
- defaults: {
26
- variant: :default,
27
- size: :default,
28
- },
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.toggle ||
8
+ {
9
+ base: <<~HEREDOC,
10
+ inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
11
+ hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
12
+ data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
13
+ [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
14
+ transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
15
+ aria-invalid:border-destructive whitespace-nowrap
16
+ HEREDOC
17
+ variants: {
18
+ variant: {
19
+ default: "bg-transparent",
20
+ outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
21
+ },
22
+ size: {
23
+ default: "h-9 px-2 min-w-9",
24
+ sm: "h-8 px-1.5 min-w-8",
25
+ lg: "h-10 px-2.5 min-w-10",
26
+ },
27
+ },
28
+ defaults: {
29
+ variant: :default,
30
+ size: :default,
31
+ },
32
+ }
33
+ ),
29
34
  )
30
35
 
31
36
  def initialize(variant: :default, size: :default, on: false, **attributes)
@@ -2,7 +2,14 @@
2
2
 
3
3
  module ShadcnPhlexcomponents
4
4
  class Tooltip < Base
5
- class_variants(base: "inline-flex max-w-fit")
5
+ class_variants(
6
+ **(
7
+ ShadcnPhlexcomponents.configuration.tooltip&.dig(:root) ||
8
+ {
9
+ base: "inline-flex max-w-fit",
10
+ }
11
+ ),
12
+ )
6
13
 
7
14
  def initialize(open: false, **attributes)
8
15
  @open = open
@@ -76,12 +83,17 @@ module ShadcnPhlexcomponents
76
83
 
77
84
  class TooltipContent < Base
78
85
  class_variants(
79
- base: <<~HEREDOC,
80
- bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
81
- data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2
82
- data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
83
- z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
84
- HEREDOC
86
+ **(
87
+ ShadcnPhlexcomponents.configuration.tooltip&.dig(:content) ||
88
+ {
89
+ base: <<~HEREDOC,
90
+ bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
91
+ data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2
92
+ data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
93
+ z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
94
+ HEREDOC
95
+ }
96
+ ),
85
97
  )
86
98
 
87
99
  def initialize(side: :top, align: :center, aria_id: nil, **attributes)
@@ -100,13 +112,7 @@ module ShadcnPhlexcomponents
100
112
  div(**@attributes) do
101
113
  yield
102
114
 
103
- span(data: { tooltip_target: "arrow" }) do
104
- raw(safe(
105
- '<svg class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
106
- <polygon points="0,0 30,0 15,10"></polygon>
107
- </svg>',
108
- ))
109
- end
115
+ TooltipArrow()
110
116
 
111
117
  span(
112
118
  id: "#{@aria_id}-content",
@@ -129,4 +135,33 @@ module ShadcnPhlexcomponents
129
135
  }
130
136
  end
131
137
  end
138
+
139
+ class TooltipArrow < Base
140
+ class_variants(
141
+ **(
142
+ ShadcnPhlexcomponents.configuration.tooltip&.dig(:arrow) ||
143
+ {
144
+ base: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
145
+ }
146
+ ),
147
+ )
148
+
149
+ def default_attributes
150
+ {
151
+ width: 10,
152
+ height: 5,
153
+ viewBox: "0 0 30 10",
154
+ preserveAspectRatio: "none",
155
+ }
156
+ end
157
+
158
+ def view_template
159
+ span(data: { tooltip_target: "arrow" }) do
160
+ svg(**@attributes) do
161
+ # Weird bug with phlex where it's throwing a undefined method "polygon"
162
+ raw(safe('<polygon points="0,0 30,0 15,10"></polygon>'))
163
+ end
164
+ end
165
+ end
166
+ end
132
167
  end
@@ -0,0 +1,46 @@
1
+ # frozen_string_literal: true
2
+
3
+ module ShadcnPhlexcomponents
4
+ class Configuration
5
+ attr_accessor :accordion,
6
+ :alert_dialog,
7
+ :alert,
8
+ :aspect_ratio,
9
+ :avatar,
10
+ :badge,
11
+ :breadcrumb,
12
+ :button,
13
+ :card,
14
+ :checkbox_group,
15
+ :checkbox,
16
+ :combobox,
17
+ :command,
18
+ :date_picker,
19
+ :date_range_picker,
20
+ :dialog,
21
+ :dropdown_menu_sub,
22
+ :dropdown_menu,
23
+ :form,
24
+ :hover_card,
25
+ :input,
26
+ :label,
27
+ :link,
28
+ :pagination,
29
+ :popover,
30
+ :progress,
31
+ :radio_group,
32
+ :select,
33
+ :separator,
34
+ :sheet,
35
+ :skeleton,
36
+ :switch,
37
+ :table,
38
+ :tabs,
39
+ :textarea,
40
+ :theme_switcher,
41
+ :toast_container,
42
+ :toast,
43
+ :toggle,
44
+ :tooltip
45
+ end
46
+ end
@@ -4,6 +4,34 @@ module ShadcnPhlexcomponents
4
4
  extend Phlex::Kit
5
5
  end
6
6
 
7
+ # Configure your components here.
8
+ # ShadcnPhlexcomponents.configure do |config|
9
+ # config.alert = {
10
+ # root: {
11
+ # base: <<~HEREDOC,
12
+ # relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
13
+ # grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
14
+ # [&>svg]:text-current
15
+ # HEREDOC
16
+ # variants: {
17
+ # variant: {
18
+ # default: "bg-card text-card-foreground",
19
+ # destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
20
+ # },
21
+ # },
22
+ # defaults: {
23
+ # variant: :default,
24
+ # },
25
+ # },
26
+ # title: {
27
+ # base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
28
+ # },
29
+ # description: {
30
+ # base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
31
+ # },
32
+ # }
33
+ # end
34
+
7
35
  # Require base.rb first
8
36
  require Rails.root.join("vendor/shadcn_phlexcomponents/components/base.rb")
9
37
 
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ShadcnPhlexcomponents
4
- VERSION = "0.1.18"
4
+ VERSION = "0.1.19"
5
5
  end
@@ -2,8 +2,19 @@
2
2
 
3
3
  require_relative "shadcn_phlexcomponents/version"
4
4
  require_relative "shadcn_phlexcomponents/engine"
5
+ require_relative "shadcn_phlexcomponents/configuration"
5
6
 
6
7
  module ShadcnPhlexcomponents
7
8
  class Error < StandardError; end
8
- # Your code goes here...
9
+
10
+ class << self
11
+ def configure
12
+ self.configuration ||= Configuration.new
13
+ yield(configuration)
14
+ end
15
+
16
+ def configuration
17
+ @configuration ||= Configuration.new
18
+ end
19
+ end
9
20
  end
@@ -0,0 +1,10 @@
1
+ # frozen_string_literal: true
2
+
3
+ namespace :shadcn_phlexcomponents do
4
+ desc "Upgrade shadcn_phlexcomponents"
5
+ task :upgrade do
6
+ system "ENVIRONMENT=#{ENV["ENVIRONMENT"]} #{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path(
7
+ "../install/upgrade_shadcn_phlexcomponents.rb", __dir__
8
+ )}"
9
+ end
10
+ end