ariadne_view_components 0.0.94.6 → 0.0.95

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 (94) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +7 -0
  3. data/app/assets/javascripts/ariadne_view_components.js +10 -10
  4. data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
  5. data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/stylesheets/ariadne_view_components.css +1 -1
  8. data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
  9. data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
  10. data/app/components/ariadne/behaviors/tooltipable.rb +62 -36
  11. data/app/components/ariadne/form/checkbox/component.html.erb +2 -2
  12. data/app/components/ariadne/form/checkbox/component.rb +17 -17
  13. data/app/components/ariadne/form/group/component.rb +11 -11
  14. data/app/components/ariadne/form/radio/component.html.erb +1 -1
  15. data/app/components/ariadne/form/radio/component.rb +9 -9
  16. data/app/components/ariadne/form/radio_button/component.html.erb +1 -1
  17. data/app/components/ariadne/form/radio_button/component.rb +11 -11
  18. data/app/components/ariadne/form/radio_button_group/component.html.erb +1 -1
  19. data/app/components/ariadne/form/radio_button_group/component.rb +9 -9
  20. data/app/components/ariadne/form/select/component.html.erb +1 -1
  21. data/app/components/ariadne/form/select/component.rb +45 -45
  22. data/app/components/ariadne/form/text_field/component.html.erb +2 -2
  23. data/app/components/ariadne/form/text_field/component.rb +55 -55
  24. data/app/components/ariadne/form/toggle/component.html.erb +1 -1
  25. data/app/components/ariadne/form/toggle/component.rb +30 -30
  26. data/app/components/ariadne/form/toggle_group/component.rb +7 -7
  27. data/app/components/ariadne/form/toggle_group/option/component.rb +7 -7
  28. data/app/components/ariadne/layout/grid/component.rb +6 -6
  29. data/app/components/ariadne/layout/grid/item/component.html.erb +2 -2
  30. data/app/components/ariadne/layout/grid/item/component.rb +6 -6
  31. data/app/components/ariadne/layout/label_block/component.html.erb +1 -1
  32. data/app/components/ariadne/layout/label_block/component.rb +2 -2
  33. data/app/components/ariadne/layout/narrow/component.html.erb +2 -2
  34. data/app/components/ariadne/layout/narrow/component.rb +8 -8
  35. data/app/components/ariadne/layout/nav_bar/component.html.erb +7 -7
  36. data/app/components/ariadne/layout/nav_bar/component.rb +26 -26
  37. data/app/components/ariadne/layout/section_block/component.html.erb +1 -1
  38. data/app/components/ariadne/layout/section_block/header/component.html.erb +2 -2
  39. data/app/components/ariadne/layout/two_panel/component.html.erb +4 -4
  40. data/app/components/ariadne/layout/two_panel/component.rb +12 -12
  41. data/app/components/ariadne/layout/wide/component.rb +6 -6
  42. data/app/components/ariadne/ui/accordion/component.html.erb +1 -1
  43. data/app/components/ariadne/ui/accordion/component.rb +4 -4
  44. data/app/components/ariadne/ui/accordion/item/component.html.erb +1 -1
  45. data/app/components/ariadne/ui/accordion/item/component.rb +12 -12
  46. data/app/components/ariadne/ui/avatar/component.rb +21 -21
  47. data/app/components/ariadne/ui/badge/component.rb +31 -31
  48. data/app/components/ariadne/ui/banner/component.html.erb +8 -8
  49. data/app/components/ariadne/ui/banner/component.rb +28 -28
  50. data/app/components/ariadne/ui/blankslate/component.html.erb +4 -4
  51. data/app/components/ariadne/ui/button/component.rb +80 -78
  52. data/app/components/ariadne/ui/card/body/component.rb +2 -2
  53. data/app/components/ariadne/ui/card/component.html.erb +1 -1
  54. data/app/components/ariadne/ui/card/component.rb +10 -10
  55. data/app/components/ariadne/ui/card/footer/component.rb +4 -4
  56. data/app/components/ariadne/ui/card/header/component.rb +8 -8
  57. data/app/components/ariadne/ui/clipboard_copy/component.html.erb +2 -2
  58. data/app/components/ariadne/ui/clipboard_copy/component.rb +20 -20
  59. data/app/components/ariadne/ui/color_dot/component.html.erb +1 -1
  60. data/app/components/ariadne/ui/color_dot/component.rb +13 -13
  61. data/app/components/ariadne/ui/combobox/component.html.erb +2 -2
  62. data/app/components/ariadne/ui/combobox/component.rb +12 -12
  63. data/app/components/ariadne/ui/dialog/component.html.erb +3 -3
  64. data/app/components/ariadne/ui/dialog/component.rb +21 -21
  65. data/app/components/ariadne/ui/dialog/footer/component.rb +5 -5
  66. data/app/components/ariadne/ui/heroicon/component.rb +5 -5
  67. data/app/components/ariadne/ui/image/component.rb +6 -6
  68. data/app/components/ariadne/ui/link/component.rb +35 -35
  69. data/app/components/ariadne/ui/list/component.html.erb +5 -5
  70. data/app/components/ariadne/ui/list/component.rb +23 -23
  71. data/app/components/ariadne/ui/list/component.ts +4 -4
  72. data/app/components/ariadne/ui/list/item/component.html.erb +1 -1
  73. data/app/components/ariadne/ui/list/item/component.rb +15 -15
  74. data/app/components/ariadne/ui/pagination/component.html.erb +1 -1
  75. data/app/components/ariadne/ui/pagination/component.rb +9 -9
  76. data/app/components/ariadne/ui/popover/component.rb +6 -6
  77. data/app/components/ariadne/ui/shortcut/component.html.erb +4 -4
  78. data/app/components/ariadne/ui/shortcut/component.rb +26 -22
  79. data/app/components/ariadne/ui/skeleton/component.rb +7 -7
  80. data/app/components/ariadne/ui/stats_panel/component.rb +6 -6
  81. data/app/components/ariadne/ui/stats_panel/item/component.html.erb +2 -2
  82. data/app/components/ariadne/ui/table/cell/component.rb +3 -3
  83. data/app/components/ariadne/ui/table/component.rb +12 -12
  84. data/app/components/ariadne/ui/table/footer/component.rb +8 -8
  85. data/app/components/ariadne/ui/table/header/component.rb +9 -9
  86. data/app/components/ariadne/ui/table/row/component.rb +4 -4
  87. data/app/components/ariadne/ui/typography/component.rb +42 -42
  88. data/app/frontend/controllers/tooltip_controller.ts +28 -11
  89. data/app/frontend/stylesheets/ariadne_view_components.css +10 -5
  90. data/app/frontend/stylesheets/scrollbar.css +7 -7
  91. data/app/frontend/stylesheets/theme.css +110 -74
  92. data/app/helpers/ariadne/color_helper.rb +104 -104
  93. data/lib/ariadne/view_components/version.rb +1 -1
  94. metadata +2 -2
data/app/components/ariadne/form/checkbox/component.rb CHANGED
@@ -49,22 +49,22 @@ module Ariadne
49
49
  style do
50
50
  base do
51
51
  [
52
- "ariadne-h-4",
53
- "ariadne-w-4",
54
- "ariadne-p-px",
55
- "ariadne-inline-flex",
56
- "ariadne-justify-center",
57
- "ariadne-rounded",
58
- "ariadne-border",
59
- "ariadne-border-solid",
60
- "ariadne-border-zinc-300",
61
- "dark:ariadne-border-zinc-700",
62
- "peer-checked:ariadne-border-transparent",
63
- "ariadne-bg-slate-50",
64
- "dark:ariadne-bg-foreground-dark",
65
- "peer-checked:ariadne-text-white",
66
- "peer-checked:ariadne-bg-indigo-600",
67
- "peer-checked:dark:ariadne-bg-indigo-500",
52
+ "ariadne:h-4",
53
+ "ariadne:w-4",
54
+ "ariadne:p-px",
55
+ "ariadne:inline-flex",
56
+ "ariadne:justify-center",
57
+ "ariadne:rounded",
58
+ "ariadne:border",
59
+ "ariadne:border-solid",
60
+ "ariadne:border-zinc-300",
61
+ "ariadne:dark:border-zinc-700",
62
+ "ariadne:peer-checked:border-transparent",
63
+ "ariadne:bg-slate-50",
64
+ "ariadne:dark:bg-foreground-dark",
65
+ "ariadne:peer-checked:text-white",
66
+ "ariadne:peer-checked:bg-indigo-600",
67
+ "ariadne:dark:peer-checked:bg-indigo-500",
68
68
  ]
69
69
  end
70
70
  end
@@ -72,7 +72,7 @@ module Ariadne
72
72
  style :label do
73
73
  base do
74
74
  [
75
- "ariadne-block",
75
+ "ariadne:block",
76
76
  ]
77
77
  end
78
78
  end
data/app/components/ariadne/form/group/component.rb CHANGED
@@ -41,32 +41,32 @@ module Ariadne
41
41
  layout do
42
42
  vertical do
43
43
  [
44
- "ariadne-space-y-8",
44
+ "ariadne:space-y-8",
45
45
  ]
46
46
  end
47
47
 
48
48
  horizontal do
49
49
  [
50
- "ariadne-flex",
51
- "ariadne-flex-row",
52
- "ariadne-align-center",
53
- "ariadne-space-x-2",
50
+ "ariadne:flex",
51
+ "ariadne:flex-row",
52
+ "ariadne:align-center",
53
+ "ariadne:space-x-2",
54
54
  ]
55
55
  end
56
56
 
57
57
  relative do
58
58
  [
59
- "ariadne-relative",
59
+ "ariadne:relative",
60
60
  ]
61
61
  end
62
62
 
63
63
  right do
64
64
  [
65
- "ariadne-mt-6",
66
- "ariadne-flex",
67
- "ariadne-items-center",
68
- "ariadne-justify-end",
69
- "ariadne-gap-x-6",
65
+ "ariadne:mt-6",
66
+ "ariadne:flex",
67
+ "ariadne:items-center",
68
+ "ariadne:justify-end",
69
+ "ariadne:gap-x-6",
70
70
  ]
71
71
  end
72
72
  end
data/app/components/ariadne/form/radio/component.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <span>
2
- <input class="ariadne-sr-only ariadne-peer" type="radio" <%= html_attrs.to_html %>>
2
+ <input class="ariadne:sr-only ariadne:peer" type="radio" <%= html_attrs.to_html %>>
3
3
  <div class="<%= style %>" aria-hidden>
4
4
  <%= inline_svg_tag("checkbox.svg") %>
5
5
  </div>
data/app/components/ariadne/form/radio/component.rb CHANGED
@@ -8,15 +8,15 @@ module Ariadne
8
8
  style do
9
9
  base do
10
10
  [
11
- "ariadne-h-4",
12
- "ariadne-w-4",
13
- "ariadne-p-px",
14
- "ariadne-inline-flex",
15
- "ariadne-justify-center",
16
- "ariadne-invisible",
17
- "peer-checked:ariadne-visible",
18
- "peer-checked:ariadne-text-zinc-700",
19
- "peer-checked:dark:ariadne-text-zinc-300",
11
+ "ariadne:h-4",
12
+ "ariadne:w-4",
13
+ "ariadne:p-px",
14
+ "ariadne:inline-flex",
15
+ "ariadne:justify-center",
16
+ "ariadne:invisible",
17
+ "ariadne:peer-checked:visible",
18
+ "ariadne:peer-checked:text-zinc-700",
19
+ "ariadne:dark:peer-checked:text-zinc-300",
20
20
  ]
21
21
  end
22
22
  end
data/app/components/ariadne/form/radio_button/component.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= content_tag(:div, class: "ariadne-flex ariadne-items-center ariadne-space-x-3 ariadne-space-y-0", hidden: hidden?) do %>
1
+ <%= content_tag(:div, class: "ariadne:flex ariadne:items-center ariadne:space-x-3 ariadne:space-y-0", hidden: hidden?) do %>
2
2
  <input class="<%= input_styles %>" type="radio" <%= html_attributes %>>
3
3
  <label for="<%= id %>" class="<%= label_styles %>"><%= label %></label>
4
4
  <% end %>
data/app/components/ariadne/form/radio_button/component.rb CHANGED
@@ -37,11 +37,11 @@ module Ariadne
37
37
  style(:input) do
38
38
  base do
39
39
  [
40
- "ariadne-h-4",
41
- "ariadne-w-4",
42
- "ariadne-border-gray-300",
43
- "ariadne-text-indigo-600",
44
- "focus:ariadne-ring-indigo-600",
40
+ "ariadne:h-4",
41
+ "ariadne:w-4",
42
+ "ariadne:border-gray-300",
43
+ "ariadne:text-indigo-600",
44
+ "ariadne:focus:ring-indigo-600",
45
45
  ]
46
46
  end
47
47
  end
@@ -49,12 +49,12 @@ module Ariadne
49
49
  style(:label) do
50
50
  base do
51
51
  [
52
- "ariadne-ml-3",
53
- "ariadne-block",
54
- "ariadne-text-sm",
55
- "ariadne-font-medium",
56
- "ariadne-leading-6",
57
- "ariadne-text-gray-900",
52
+ "ariadne:ml-3",
53
+ "ariadne:block",
54
+ "ariadne:text-sm",
55
+ "ariadne:font-medium",
56
+ "ariadne:leading-6",
57
+ "ariadne:text-gray-900",
58
58
  ]
59
59
  end
60
60
  end
data/app/components/ariadne/form/radio_button_group/component.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <div class="ariadne-space-y-3">
1
+ <div class="ariadne:space-y-3">
2
2
  <%= content_tag(:fieldset, class: style(:group), **input_arguments) do %>
3
3
  <% if label %>
4
4
  <label class="<%= style(:label) %>"><%= label %></label>
data/app/components/ariadne/form/radio_button_group/component.rb CHANGED
@@ -34,10 +34,10 @@ module Ariadne
34
34
  style :group do
35
35
  base do
36
36
  [
37
- "ariadne-gap-2",
38
- "ariadne-flex",
39
- "ariadne-flex-col",
40
- "ariadne-space-y-1",
37
+ "ariadne:gap-2",
38
+ "ariadne:flex",
39
+ "ariadne:flex-col",
40
+ "ariadne:space-y-1",
41
41
  ]
42
42
  end
43
43
  end
@@ -45,11 +45,11 @@ module Ariadne
45
45
  style :label do
46
46
  base do
47
47
  [
48
- "ariadne-text-sm",
49
- "ariadne-font-medium",
50
- "ariadne-leading-none",
51
- "peer-disabled:ariadne-cursor-not-allowed",
52
- "peer-disabled:ariadne-opacity-70",
48
+ "ariadne:text-sm",
49
+ "ariadne:font-medium",
50
+ "ariadne:leading-none",
51
+ "ariadne:peer-disabled:cursor-not-allowed",
52
+ "ariadne:peer-disabled:opacity-70",
53
53
  ]
54
54
  end
55
55
  end
data/app/components/ariadne/form/select/component.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <div class="ariadne-space-y-3">
1
+ <div class="ariadne:space-y-3">
2
2
  <% if label %>
3
3
  <label class="<%= style(:label) %>"><%= label %></label>
4
4
  <% end %>
data/app/components/ariadne/form/select/component.rb CHANGED
@@ -59,22 +59,22 @@ module Ariadne
59
59
  style :select do
60
60
  base do
61
61
  [
62
- "ariadne-rounded-md",
63
- "ariadne-block",
64
- "ariadne-w-full",
65
- "ariadne-border",
66
- "ariadne-border-input",
67
- "ariadne-bg-panel",
68
- "dark:ariadne-bg-panel-dark",
69
- "ariadne-text-sm",
70
- "ariadne-ring-offset-background",
71
- "placeholder:ariadne-text-muted-foreground",
72
- "focus:ariadne-outline-none",
73
- "focus:ariadne-ring-2",
74
- "focus:ariadne-ring-ring",
75
- "focus:ariadne-ring-offset-2",
76
- "disabled:ariadne-cursor-not-allowed",
77
- "disabled:ariadne-opacity-50",
62
+ "ariadne:rounded-md",
63
+ "ariadne:block",
64
+ "ariadne:w-full",
65
+ "ariadne:border",
66
+ "ariadne:border-input",
67
+ "ariadne:bg-panel",
68
+ "ariadne:dark:bg-panel-dark",
69
+ "ariadne:text-sm",
70
+ "ariadne:ring-offset-background",
71
+ "ariadne:placeholder:text-muted-foreground",
72
+ "ariadne:focus:outline-hidden",
73
+ "ariadne:focus:ring-2",
74
+ "ariadne:focus:ring-ring",
75
+ "ariadne:focus:ring-offset-2",
76
+ "ariadne:disabled:cursor-not-allowed",
77
+ "ariadne:disabled:opacity-50",
78
78
  ]
79
79
  end
80
80
  end
@@ -82,16 +82,16 @@ module Ariadne
82
82
  style :label do
83
83
  base do
84
84
  [
85
- "ariadne-text-sm",
86
- "ariadne-font-medium",
87
- "ariadne-leading-none",
88
- "peer-disabled:ariadne-cursor-not-allowed",
89
- "peer-disabled:ariadne-opacity-70",
90
- "ariadne-block",
91
- "ariadne-mb-2",
92
- "ariadne-text-sm",
93
- "ariadne-font-medium",
94
- "ariadne-text-gray-900",
85
+ "ariadne:text-sm",
86
+ "ariadne:font-medium",
87
+ "ariadne:leading-none",
88
+ "ariadne:peer-disabled:cursor-not-allowed",
89
+ "ariadne:peer-disabled:opacity-70",
90
+ "ariadne:block",
91
+ "ariadne:mb-2",
92
+ "ariadne:text-sm",
93
+ "ariadne:font-medium",
94
+ "ariadne:text-gray-900",
95
95
  "ariadne-dark:text-white",
96
96
  ]
97
97
  end
@@ -100,26 +100,26 @@ module Ariadne
100
100
  style :wrapper do
101
101
  base do
102
102
  [
103
- "ariadne-group",
104
- "ariadne-relative",
105
- "ariadne-block",
103
+ "ariadne:group",
104
+ "ariadne:relative",
105
+ "ariadne:block",
106
106
  "before:ariadneabsolute",
107
- "before:ariadne-inset-px",
108
- "before:ariadne-rounded-md",
109
- "before:ariadne-bg-white",
110
- "before:ariadne-shadow",
111
- "dark:before:ariadne-hidden",
112
- "after:ariadne-pointer-events-none",
113
- "after:ariadne-absolute",
114
- "after:ariadne-inset-0",
115
- "after:ariadne-rounded-md",
116
- "after:ariadne-ring-inset",
117
- "after:ariadne-ring-transparent",
118
- "after:focus:ariadne-ring-2",
119
- "after:focus:ariadne-ring-blue-500",
120
- "disabled:ariadne-opacity-50",
121
- "before:disabled:ariadne-bg-zinc-950/5",
122
- "before:disabled:ariadne-shadow-none",
107
+ "ariadne:before:inset-px",
108
+ "ariadne:before:rounded-md",
109
+ "ariadne:before:bg-white",
110
+ "ariadne:before:shadow",
111
+ "ariadne:dark:before:hidden",
112
+ "ariadne:after:pointer-events-none",
113
+ "ariadne:after:absolute",
114
+ "ariadne:after:inset-0",
115
+ "ariadne:after:rounded-md",
116
+ "ariadne:after:ring-inset",
117
+ "ariadne:after:ring-transparent",
118
+ "ariadne:focus:after:ring-2",
119
+ "ariadne:focus:after:ring-blue-500",
120
+ "ariadne:disabled:opacity-50",
121
+ "ariadne:disabled:before:bg-zinc-950/5",
122
+ "ariadne:disabled:before:shadow-none",
123
123
  ]
124
124
  end
125
125
  end
data/app/components/ariadne/form/text_field/component.html.erb CHANGED
@@ -5,8 +5,8 @@
5
5
  <% if required? %>
6
6
  <span aria-hidden="true">*</span>
7
7
  <% end %>
8
- <div class="ariadne-relative">
9
- <div class="ariadne-pointer-events-none ariadne-absolute ariadne-inset-y-0 ariadne-left-0 ariadne-flex ariadne-items-center ariadne-px-3">
8
+ <div class="ariadne:relative">
9
+ <div class="ariadne:pointer-events-none ariadne:absolute ariadne:inset-y-0 ariadne:left-0 ariadne:flex ariadne:items-center ariadne:px-3">
10
10
  <%= leading_visual if leading_visual? %>
11
11
  </div>
12
12
  <%= content_tag(
data/app/components/ariadne/form/text_field/component.rb CHANGED
@@ -52,17 +52,17 @@ module Ariadne
52
52
  style do
53
53
  base do
54
54
  [
55
- "placeholder:ariadne-text-zinc-600",
56
- "dark:placeholder:ariadne-text-zinc-400",
55
+ "ariadne:placeholder:text-zinc-600",
56
+ "ariadne:dark:placeholder:text-zinc-400",
57
57
 
58
- "disabled:ariadne-bg-zinc-100",
59
- "disabled:ariadne-text-zinc-600",
60
- "dark:disabled:ariadne-bg-zinc-800",
61
- "dark:disabled:ariadne-text-zinc-600",
62
- "disabled:ariadne-cursor-not-allowed",
58
+ "ariadne:disabled:bg-zinc-100",
59
+ "ariadne:disabled:text-zinc-600",
60
+ "ariadne:dark:disabled:bg-zinc-800",
61
+ "ariadne:dark:disabled:text-zinc-600",
62
+ "ariadne:disabled:cursor-not-allowed",
63
63
 
64
- "ariadne-bg-slate-50",
65
- "dark:ariadne-bg-foreground-dark",
64
+ "ariadne:bg-slate-50",
65
+ "ariadne:dark:bg-foreground-dark",
66
66
  ]
67
67
  end
68
68
 
@@ -70,61 +70,61 @@ module Ariadne
70
70
  theme do
71
71
  primary do
72
72
  [
73
- "ariadne-border",
74
- "ariadne-border-solid",
75
- "ariadne-border-zinc-200",
76
- "dark:ariadne-border-zinc-700",
77
-
78
- "[&:not(:focus)]:enabled:hover:ariadne-border-zinc-300",
79
- "[&:not(:focus)]:enabled:hover:ariadne-bg-zinc-200/20",
80
- "[&:not(:focus)]:dark:enabled:hover:ariadne-border-zinc-600",
81
- "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-zinc-700/20",
82
-
83
- "focus:ariadne-border-blue-300",
84
- "focus:ariadne-bg-blue-300/20",
85
- "dark:focus:ariadne-border-blue-600",
86
- "dark:focus:ariadne-bg-blue-600/20",
73
+ "ariadne:border",
74
+ "ariadne:border-solid",
75
+ "ariadne:border-zinc-200",
76
+ "ariadne:dark:border-zinc-700",
77
+
78
+ "ariadne:not-focus:enabled:hover:border-zinc-300",
79
+ "ariadne:not-focus:enabled:hover:bg-zinc-200/20",
80
+ "ariadne:dark:not-focus:enabled:hover:border-zinc-600",
81
+ "ariadne:dark:not-focus:enabled:hover:bg-zinc-700/20",
82
+
83
+ "ariadne:focus:border-blue-300",
84
+ "ariadne:focus:bg-blue-300/20",
85
+ "ariadne:dark:focus:border-blue-600",
86
+ "ariadne:dark:focus:bg-blue-600/20",
87
87
  ]
88
88
  end
89
89
 
90
90
  error do
91
91
  [
92
- "ariadne-border",
93
- "ariadne-border-solid",
94
- "ariadne-border-red-600",
95
- "ariadne-bg-red-200",
96
- "dark:ariadne-bg-red-700",
97
- "[&:not(:focus)]:enabled:hover:ariadne-border-red-700",
98
- "[&:not(:focus)]:enabled:hover:ariadne-bg-red-300/80",
99
- "[&:not(:focus)]:dark:enabled:hover:ariadne-border-red-700",
100
- "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-red-700/80",
92
+ "ariadne:border",
93
+ "ariadne:border-solid",
94
+ "ariadne:border-red-600",
95
+ "ariadne:bg-red-200",
96
+ "ariadne:dark:bg-red-700",
97
+ "ariadne:not-focus:enabled:hover:border-red-700",
98
+ "ariadne:not-focus:enabled:hover:bg-red-300/80",
99
+ "ariadne:dark:not-focus:enabled:hover:border-red-700",
100
+ "ariadne:dark:not-focus:enabled:hover:bg-red-700/80",
101
101
  ]
102
102
  end
103
103
 
104
104
  nude do
105
105
  [
106
- "ariadne-bg-transparent",
107
- "[&:not(:focus)]:enabled:hover:ariadne-bg-zinc-200/20",
108
- "[&:not(:focus)]:ariadne-border-none",
109
- "disabled:!ariadne-bg-transparent",
106
+ "ariadne:bg-transparent",
107
+ "ariadne:not-focus:enabled:hover:bg-zinc-200/20",
108
+ "ariadne:not-focus:border-none",
109
+ "ariadne:disabled:bg-transparent!",
110
110
  ]
111
111
  end
112
112
  end
113
113
 
114
114
  size do
115
- sm { "ariadne-text-sm ariadne-px-1 ariadne-leading-5 ariadne-rounded" }
116
- base { "ariadne-text-base ariadne-px-1.5 ariadne-rounded-md" }
117
- lg { "ariadne-text-lg ariadne-leading-10 ariadne-px-2.5 ariadne-rounded-lg" }
115
+ sm { "ariadne:text-sm ariadne:px-1 ariadne:leading-5 ariadne:rounded" }
116
+ base { "ariadne:text-base ariadne:px-1.5 ariadne:rounded-md" }
117
+ lg { "ariadne:text-lg ariadne:leading-10 ariadne:px-2.5 ariadne:rounded-lg" }
118
118
  end
119
119
 
120
120
  width do
121
121
  narrow { "" }
122
- full { "ariadne-w-full" }
122
+ full { "ariadne:w-full" }
123
123
  end
124
124
 
125
125
  with_leading_item do
126
126
  no { "" }
127
- yes { "ariadne-py-1.5 ariadne-pl-10" }
127
+ yes { "ariadne:py-1.5 ariadne:pl-10" }
128
128
  end
129
129
  end
130
130
  end
@@ -132,21 +132,21 @@ module Ariadne
132
132
  style(:label) do
133
133
  base do
134
134
  [
135
- "ariadne-text-content",
136
- "dark:ariadne-text-content-dark",
137
- "peer-disabled:ariadne-cursor-not-allowed",
138
- "peer-disabled:ariadne-opacity-70",
139
- "ariadne-leading-none",
140
- "ariadne-font-medium",
135
+ "ariadne:text-content",
136
+ "ariadne:dark:text-content-dark",
137
+ "ariadne:peer-disabled:cursor-not-allowed",
138
+ "ariadne:peer-disabled:opacity-70",
139
+ "ariadne:leading-none",
140
+ "ariadne:font-medium",
141
141
  ]
142
142
  end
143
143
 
144
144
  variants do
145
145
  size do
146
- sm { "ariadne-px-1 ariadne-rounded" }
147
- base { "ariadne-px-1.5 ariadne-rounded-md" }
148
- md { "ariadne-px-1.5 ariadne-rounded-md" }
149
- lg { "ariadne-px-2.5 ariadne-rounded-lg" }
146
+ sm { "ariadne:px-1 ariadne:rounded" }
147
+ base { "ariadne:px-1.5 ariadne:rounded-md" }
148
+ md { "ariadne:px-1.5 ariadne:rounded-md" }
149
+ lg { "ariadne:px-2.5 ariadne:rounded-lg" }
150
150
  end
151
151
  end
152
152
  end
@@ -154,10 +154,10 @@ module Ariadne
154
154
  style(:caption) do
155
155
  base do
156
156
  [
157
- "ariadne-text-content",
158
- "dark:ariadne-text-content-dark",
159
- "ariadne-mt-2",
160
- "ariadne-text-sm",
157
+ "ariadne:text-content",
158
+ "ariadne:dark:text-content-dark",
159
+ "ariadne:mt-2",
160
+ "ariadne:text-sm",
161
161
  ]
162
162
  end
163
163
  end
data/app/components/ariadne/form/toggle/component.html.erb CHANGED
@@ -1,7 +1,7 @@
1
1
  <label class="<%= style(:label, reversed:) %>">
2
2
  <input type="checkbox" class="<%= html_attrs[:class] %>" <%= html_attributes %>>
3
3
  <span class="<%= style(size:) %>"></span>
4
- <span class="ariadne-text-sm ariadne-font-medium ariadne-text-gray-900 dark:ariadne-text-gray-300">
4
+ <span class="ariadne:text-sm ariadne:font-medium ariadne:text-gray-900 ariadne:dark:text-gray-300">
5
5
  <%= content %>
6
6
  </span>
7
7
  </label>
data/app/components/ariadne/form/toggle/component.rb CHANGED
@@ -22,7 +22,7 @@ module Ariadne
22
22
  option :enabled, default: proc { true }
23
23
 
24
24
  accepts_html_attributes do |html_attrs|
25
- html_attrs[:class] = merge_tailwind_classes(["ariadne-sr-only ariadne-peer", html_attrs[:class]].join(" "))
25
+ html_attrs[:class] = merge_tailwind_classes(["ariadne:sr-only ariadne:peer", html_attrs[:class]].join(" "))
26
26
 
27
27
  if @checked
28
28
  html_attrs[:checked] = @checked
@@ -63,22 +63,22 @@ module Ariadne
63
63
  style do
64
64
  base do
65
65
  [
66
- "ariadne-peer",
67
- "ariadne-relative",
68
- "ariadne-rounded-full",
69
- "peer-focus:ariadne-ring-2",
70
- "ariadne-bg-zinc-200",
71
- "dark:ariadne-bg-zinc-700",
72
- "peer-checked:ariadne-bg-indigo-500",
66
+ "ariadne:peer",
67
+ "ariadne:relative",
68
+ "ariadne:rounded-full",
69
+ "ariadne:peer-focus:ring-2",
70
+ "ariadne:bg-zinc-200",
71
+ "ariadne:dark:bg-zinc-700",
72
+ "ariadne:peer-checked:bg-indigo-500",
73
73
 
74
- "after:ariadne-absolute",
75
- "after:ariadne-content-['']",
76
- "after:ariadne-start-0.5",
77
- "after:ariadne-top-0.5",
78
- "after:ariadne-rounded-full",
79
- "after:ariadne-transition-all",
80
- "after:ariadne-bg-white",
81
- "peer-checked:after:ariadne-translate-x-full",
74
+ "ariadne:after:absolute",
75
+ "ariadne:after:content-['']",
76
+ "ariadne:after:start-0.5",
77
+ "ariadne:after:top-0.5",
78
+ "ariadne:after:rounded-full",
79
+ "ariadne:after:transition-all",
80
+ "ariadne:after:bg-white",
81
+ "ariadne:peer-checked:after:translate-x-full",
82
82
  ]
83
83
  end
84
84
 
@@ -86,18 +86,18 @@ module Ariadne
86
86
  size do
87
87
  sm do
88
88
  [
89
- "ariadne-w-7",
90
- "ariadne-h-4",
91
- "after:ariadne-h-3",
92
- "after:ariadne-w-3",
89
+ "ariadne:w-7",
90
+ "ariadne:h-4",
91
+ "ariadne:after:h-3",
92
+ "ariadne:after:w-3",
93
93
  ]
94
94
  end
95
95
  md do
96
96
  [
97
- "ariadne-w-9",
98
- "ariadne-h-5",
99
- "after:ariadne-h-4",
100
- "after:ariadne-w-4",
97
+ "ariadne:w-9",
98
+ "ariadne:h-5",
99
+ "ariadne:after:h-4",
100
+ "ariadne:after:w-4",
101
101
  ]
102
102
  end
103
103
  end
@@ -107,18 +107,18 @@ module Ariadne
107
107
  style(:label) do
108
108
  base do
109
109
  [
110
- "ariadne-relative",
111
- "ariadne-inline-flex",
112
- "ariadne-gap-3",
113
- "ariadne-items-center",
114
- "ariadne-cursor-pointer",
110
+ "ariadne:relative",
111
+ "ariadne:inline-flex",
112
+ "ariadne:gap-3",
113
+ "ariadne:items-center",
114
+ "ariadne:cursor-pointer",
115
115
  ]
116
116
  end
117
117
 
118
118
  variants do
119
119
  reversed do
120
120
  yes do
121
- ["ariadne-flex-row-reverse"]
121
+ ["ariadne:flex-row-reverse"]
122
122
  end
123
123
  no do
124
124
  end
data/app/components/ariadne/form/toggle_group/component.rb CHANGED
@@ -18,14 +18,14 @@ module Ariadne
18
18
  style do
19
19
  base do
20
20
  [
21
- "ariadne-inline-flex",
22
- "ariadne-gap-1",
23
- "ariadne-p-0.5",
24
- "ariadne-rounded-lg",
25
- "ariadne-text-md",
21
+ "ariadne:inline-flex",
22
+ "ariadne:gap-1",
23
+ "ariadne:p-0.5",
24
+ "ariadne:rounded-lg",
25
+ "ariadne:text-md",
26
26
  "font-medium",
27
- "ariadne-bg-zinc-300/10",
28
- "dark:ariadne-bg-zinc-700/20",
27
+ "ariadne:bg-zinc-300/10",
28
+ "ariadne:dark:bg-zinc-700/20",
29
29
  ]
30
30
  end
31
31
  end