rw-elements-tools 1.2.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 (185) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +1333 -0
  3. package/bin/cli.js +213 -0
  4. package/build-properties.js +654 -0
  5. package/build-shared-hooks.js +253 -0
  6. package/config.js +148 -0
  7. package/controls/Animations/AnimationEffects.js +111 -0
  8. package/controls/Animations/AnimationSettings.js +437 -0
  9. package/controls/Animations/Reveals.js +168 -0
  10. package/controls/Animations/ScrollAnimation_Opacity.js +15 -0
  11. package/controls/Animations/ScrollAnimation_Rotate.js +17 -0
  12. package/controls/Animations/ScrollAnimation_Scale.js +18 -0
  13. package/controls/Animations/ScrollAnimation_Translate.js +31 -0
  14. package/controls/Background/Background.js +66 -0
  15. package/controls/Background/BackgroundButton.js +69 -0
  16. package/controls/Background/BackgroundColor.js +28 -0
  17. package/controls/Background/BackgroundContainer.js +73 -0
  18. package/controls/Background/BackgroundGradient.js +149 -0
  19. package/controls/Background/BackgroundImage.js +108 -0
  20. package/controls/Background/BackgroundOnlyColor.js +53 -0
  21. package/controls/Background/BackgroundTransparent.js +66 -0
  22. package/controls/Background/BackgroundVideo.js +9 -0
  23. package/controls/Background/Color.js +52 -0
  24. package/controls/Background/Gradient.js +263 -0
  25. package/controls/Background/GradientContainer.js +263 -0
  26. package/controls/Background/Image.js +269 -0
  27. package/controls/Background/Image_CMS.js +305 -0
  28. package/controls/Background/SVG.js +235 -0
  29. package/controls/Background/Video.js +29 -0
  30. package/controls/Borders/Border.js +114 -0
  31. package/controls/Borders/BorderColor.js +25 -0
  32. package/controls/Borders/BorderRadius.js +19 -0
  33. package/controls/Borders/BorderStyle.js +26 -0
  34. package/controls/Borders/BorderWidth.js +20 -0
  35. package/controls/Borders/Borders.js +69 -0
  36. package/controls/Borders/BordersContainer.js +90 -0
  37. package/controls/Borders/BordersInput.js +107 -0
  38. package/controls/Borders/Outline.js +100 -0
  39. package/controls/Borders/OutlineColor.js +25 -0
  40. package/controls/Borders/OutlineOffset.js +13 -0
  41. package/controls/Borders/OutlineStyle.js +26 -0
  42. package/controls/Borders/OutlineWidth.js +13 -0
  43. package/controls/Effects/BackdropBlur.js +11 -0
  44. package/controls/Effects/Blur.js +11 -0
  45. package/controls/Effects/BoxShadow.js +15 -0
  46. package/controls/Effects/Brightness.js +11 -0
  47. package/controls/Effects/DropShadow.js +14 -0
  48. package/controls/Effects/Effects.js +71 -0
  49. package/controls/Effects/Filters.js +114 -0
  50. package/controls/Effects/Opacity.js +14 -0
  51. package/controls/Effects/Saturate.js +11 -0
  52. package/controls/Layout/AspectRatio.js +53 -0
  53. package/controls/Layout/Container.js +24 -0
  54. package/controls/Layout/Hidden.js +9 -0
  55. package/controls/Layout/Inset.js +15 -0
  56. package/controls/Layout/Isolation.js +25 -0
  57. package/controls/Layout/Layout.js +38 -0
  58. package/controls/Layout/Overflow.js +33 -0
  59. package/controls/Layout/Position.js +37 -0
  60. package/controls/Layout/TopRightBottomLeft.js +90 -0
  61. package/controls/Layout/Visibility.js +25 -0
  62. package/controls/Layout/ZIndex.js +36 -0
  63. package/controls/Overlay/Color.js +52 -0
  64. package/controls/Overlay/Gradient.js +298 -0
  65. package/controls/Overlay/Image.js +226 -0
  66. package/controls/Overlay/Overlay.js +66 -0
  67. package/controls/Sizing/Height.js +18 -0
  68. package/controls/Sizing/MaxHeight.js +17 -0
  69. package/controls/Sizing/MaxWidth.js +17 -0
  70. package/controls/Sizing/MinHeight.js +18 -0
  71. package/controls/Sizing/MinWidth.js +18 -0
  72. package/controls/Sizing/Sizing.js +66 -0
  73. package/controls/Sizing/SizingContainer.js +122 -0
  74. package/controls/Sizing/SizingImage.js +75 -0
  75. package/controls/Sizing/SizingInput.js +71 -0
  76. package/controls/Sizing/SizingSVG.js +74 -0
  77. package/controls/Sizing/Width.js +18 -0
  78. package/controls/Spacing/Margin.js +17 -0
  79. package/controls/Spacing/Padding.js +17 -0
  80. package/controls/Spacing/Spacing.js +23 -0
  81. package/controls/Spacing/SpacingButton.js +42 -0
  82. package/controls/Spacing/SpacingContainer.js +32 -0
  83. package/controls/Spacing/SpacingInput.js +42 -0
  84. package/controls/Transforms/Rotate.js +13 -0
  85. package/controls/Transforms/Scale.js +13 -0
  86. package/controls/Transforms/Skew.js +25 -0
  87. package/controls/Transforms/TransformOrigin.js +12 -0
  88. package/controls/Transforms/Transforms.js +98 -0
  89. package/controls/Transforms/Translate.js +26 -0
  90. package/controls/Transitions/Delay.js +13 -0
  91. package/controls/Transitions/Duration.js +13 -0
  92. package/controls/Transitions/Property.js +42 -0
  93. package/controls/Transitions/TimingFunction.js +44 -0
  94. package/controls/Transitions/Transitions.js +20 -0
  95. package/controls/alignment/AlignContent.js +48 -0
  96. package/controls/alignment/AlignItems.js +64 -0
  97. package/controls/alignment/AlignSelf.js +34 -0
  98. package/controls/alignment/JustifyContent.js +44 -0
  99. package/controls/alignment/JustifyItems.js +32 -0
  100. package/controls/alignment/JustifySelf.js +34 -0
  101. package/controls/core/CSSClasses.js +11 -0
  102. package/controls/core/ControlType.js +25 -0
  103. package/controls/core/HTMLTag.js +80 -0
  104. package/controls/core/HoverGroup.js +38 -0
  105. package/controls/core/ID.js +12 -0
  106. package/controls/core/Image.js +95 -0
  107. package/controls/core/MenuItem.js +187 -0
  108. package/controls/core/ObjectFit.js +32 -0
  109. package/controls/core/ObjectPosition.js +65 -0
  110. package/controls/grid-flex/ActAsGridOrFlexItem.js +54 -0
  111. package/controls/grid-flex/ColEnd.js +28 -0
  112. package/controls/grid-flex/ColStart.js +27 -0
  113. package/controls/grid-flex/Columns.js +38 -0
  114. package/controls/grid-flex/FlexDirection.js +27 -0
  115. package/controls/grid-flex/FlexItem.js +106 -0
  116. package/controls/grid-flex/GridItem.js +41 -0
  117. package/controls/grid-flex/Order.js +45 -0
  118. package/controls/grid-flex/RowEnd.js +28 -0
  119. package/controls/grid-flex/RowStart.js +27 -0
  120. package/controls/grid-flex/Rows.js +38 -0
  121. package/controls/index.js +187 -0
  122. package/controls/interactive/ButtonFontAndTextStyles.js +208 -0
  123. package/controls/interactive/Filter.js +54 -0
  124. package/controls/interactive/InputFontAndTextStyles.js +156 -0
  125. package/controls/interactive/Link.js +13 -0
  126. package/controls/typography/HeadingColor.js +112 -0
  127. package/controls/typography/TextColor.js +51 -0
  128. package/controls/typography/TextDecoration.js +99 -0
  129. package/controls/typography/TextFontsAndTextStyles.js +243 -0
  130. package/controls/typography/TextSimple.js +55 -0
  131. package/controls/typography/TextStyles.js +55 -0
  132. package/controls/typography/Typography.js +13 -0
  133. package/index.js +19 -0
  134. package/package.json +55 -0
  135. package/properties/BackgroundType.js +18 -0
  136. package/properties/ButtonSize.js +19 -0
  137. package/properties/ContainerHeights.js +23 -0
  138. package/properties/ContainerWidths.js +27 -0
  139. package/properties/FontWeight.js +16 -0
  140. package/properties/GradientDirection.js +39 -0
  141. package/properties/LetterSpacing.js +13 -0
  142. package/properties/LineHeight.js +13 -0
  143. package/properties/RevealAnimations.js +12 -0
  144. package/properties/Slider.js +10 -0
  145. package/properties/TextAlign.js +23 -0
  146. package/properties/TransformOrigins.js +43 -0
  147. package/properties/TransitionNames.js +20 -0
  148. package/properties/index.js +13 -0
  149. package/shared-hooks/animations/globalAnimations.js +141 -0
  150. package/shared-hooks/animations/globalReveal.js +48 -0
  151. package/shared-hooks/background/globalBackground.js +306 -0
  152. package/shared-hooks/background/globalBgImageFetchPriority.js +34 -0
  153. package/shared-hooks/borders/globalBorders.js +85 -0
  154. package/shared-hooks/borders/globalOutline.js +39 -0
  155. package/shared-hooks/core/addPrefixToTailwindClasses.js +24 -0
  156. package/shared-hooks/core/advancedClasses.js +5 -0
  157. package/shared-hooks/core/classnames.js +92 -0
  158. package/shared-hooks/core/getHoverPrefix.js +21 -0
  159. package/shared-hooks/core/globalHTMLTag.js +17 -0
  160. package/shared-hooks/core/injectPrefixOnDarkModeColors.js +6 -0
  161. package/shared-hooks/effects/globalEffects.js +45 -0
  162. package/shared-hooks/effects/globalFilters.js +80 -0
  163. package/shared-hooks/effects/globalOverlay.js +166 -0
  164. package/shared-hooks/interactive/globalFilter.js +24 -0
  165. package/shared-hooks/interactive/globalLink.js +23 -0
  166. package/shared-hooks/layout/globalActAsGridOrFlexItem.js +66 -0
  167. package/shared-hooks/layout/globalLayout.js +50 -0
  168. package/shared-hooks/navigation/globalMenuItem.js +35 -0
  169. package/shared-hooks/navigation/globalNavItems.js +60 -0
  170. package/shared-hooks/navigation/globalNavTitle.js +23 -0
  171. package/shared-hooks/sizing/aspectRatioClasses.js +20 -0
  172. package/shared-hooks/sizing/globalSizing.js +19 -0
  173. package/shared-hooks/sizing/globalSizingContainer.js +40 -0
  174. package/shared-hooks/sizing/objectClasses.js +9 -0
  175. package/shared-hooks/spacing/globalSpacing.js +13 -0
  176. package/shared-hooks/spacing/globalSpacingMargin.js +11 -0
  177. package/shared-hooks/spacing/globalSpacingPadding.js +11 -0
  178. package/shared-hooks/transforms/globalTransforms.js +78 -0
  179. package/shared-hooks/transitions/getAlpineTransitionAttributesDesktop.js +111 -0
  180. package/shared-hooks/transitions/getAlpineTransitionAttributesMobile.js +110 -0
  181. package/shared-hooks/transitions/globalTransitions.js +48 -0
  182. package/shared-hooks/typography/globalButtonFontAndTextStyles.js +65 -0
  183. package/shared-hooks/typography/globalHeadingColor.js +69 -0
  184. package/shared-hooks/typography/globalInputFontAndTextStyles.js +40 -0
  185. package/shared-hooks/typography/globalTextFontsAndTextStyles.js +47 -0
package/controls/Background/Gradient.js ADDED
@@ -0,0 +1,263 @@
1
+ const Gradient = [
2
+ {
3
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
4
+ title: "Direction",
5
+ id: "globalBgGradientDirection",
6
+ select: {
7
+ use: "GradientDirection",
8
+ },
9
+ },
10
+ {
11
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
12
+ heading: {},
13
+ title: "From",
14
+ },
15
+ {
16
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
17
+ title: "Color",
18
+ id: "globalBgGradientFromColor",
19
+ format: "from-{{value}}/[--bgGradientFromOpacity]",
20
+ themeColor: {
21
+ default: {
22
+ name: "brand",
23
+ brightness: 200,
24
+ },
25
+ },
26
+ },
27
+ {
28
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
29
+ title: "Opacity",
30
+ id: "globalBgGradientFromOpacity",
31
+ format: "[--bgGradientFromOpacity:{{value}}%]",
32
+ responsive: false,
33
+ slider: {
34
+ use: "Slider",
35
+ units: "%",
36
+ default: 100,
37
+ },
38
+ },
39
+ {
40
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
41
+ title: "Position",
42
+ id: "globalBgGradientFromPosition",
43
+ format: "from-[{{value}}%]",
44
+ responsive: false,
45
+ slider: {
46
+ use: "Slider",
47
+ units: "%",
48
+ default: 0,
49
+ },
50
+ },
51
+ {
52
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
53
+ divider: {},
54
+ },
55
+ {
56
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
57
+ title: "Add Via",
58
+ id: "globalBgGradientViaEnabled",
59
+ switch: {
60
+ default: false,
61
+ },
62
+ },
63
+ {
64
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
65
+ heading: {},
66
+ title: "Via",
67
+ },
68
+ {
69
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
70
+ title: "Color",
71
+ id: "globalBgGradientViaColor",
72
+ format: "via-{{value}}/[--bgGradientViaOpacity]",
73
+ themeColor: {
74
+ default: {
75
+ name: "brand",
76
+ brightness: 400,
77
+ },
78
+ },
79
+ },
80
+ {
81
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
82
+ title: "Opacity",
83
+ id: "globalBgGradientViaOpacity",
84
+ format: "[--bgGradientViaOpacity:{{value}}%]",
85
+ responsive: false,
86
+ slider: {
87
+ use: "Slider",
88
+ units: "%",
89
+ default: 100,
90
+ },
91
+ },
92
+ {
93
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
94
+ title: "Position",
95
+ id: "globalBgGradientViaPosition",
96
+ format: "via-[{{value}}%]",
97
+ responsive: false,
98
+ slider: {
99
+ default: 50,
100
+ use: "Slider",
101
+ units: "%",
102
+ },
103
+ },
104
+ {
105
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
106
+ divider: {},
107
+ },
108
+ {
109
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
110
+ heading: {},
111
+ title: "To",
112
+ },
113
+ {
114
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
115
+ title: "Color",
116
+ id: "globalBgGradientToColor",
117
+ format: "to-{{value}}/[--bgGradientToOpacity]",
118
+ themeColor: {
119
+ default: {
120
+ name: "brand",
121
+ brightness: 500,
122
+ },
123
+ },
124
+ },
125
+ {
126
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
127
+ title: "Opacity",
128
+ id: "globalBgGradientToOpacity",
129
+ format: "[--bgGradientToOpacity:{{value}}%]",
130
+ responsive: false,
131
+ slider: {
132
+ use: "Slider",
133
+ units: "%",
134
+ default: 100,
135
+ },
136
+ },
137
+ {
138
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
139
+ title: "Position",
140
+ id: "globalBgGradientToPosition",
141
+ format: "to-[{{value}}%]",
142
+ responsive: false,
143
+ slider: {
144
+ use: "Slider",
145
+ units: "%",
146
+ default: 100,
147
+ },
148
+ },
149
+ {
150
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
151
+ title: "Direction",
152
+ id: "globalBgGradientDirectionEnd",
153
+ format: "hover:{{value}}",
154
+ select: {
155
+ use: "GradientDirection",
156
+ },
157
+ },
158
+ {
159
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
160
+ title: "From",
161
+ heading: {}
162
+ },
163
+ {
164
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
165
+ title: "Color",
166
+ id: "globalBgGradientFromColorEnd",
167
+ format: "hover:from-{{value}}/[--bgGradientFromOpacityEnd]",
168
+ themeColor: {
169
+ default: {
170
+ name: "brand",
171
+ brightness: 200,
172
+ },
173
+ },
174
+ },
175
+ {
176
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
177
+ title: "Opacity",
178
+ id: "globalBgGradientFromOpacityEnd",
179
+ format: "hover:[--bgGradientFromOpacityEnd:{{value}}%]",
180
+ responsive: false,
181
+ slider: {
182
+ use: "Slider",
183
+ units: "%",
184
+ default: 100,
185
+ },
186
+ },
187
+ {
188
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
189
+ divider: {},
190
+ },
191
+ {
192
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
193
+ title: "Add Via",
194
+ id: "globalBgGradientViaEnabledEnd",
195
+ switch: {
196
+ default: false,
197
+ },
198
+ },
199
+ {
200
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
201
+ heading: {},
202
+ title: "Via",
203
+ },
204
+ {
205
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
206
+ title: "Color",
207
+ id: "globalBgGradientViaColorEnd",
208
+ format: "hover:via-{{value}}/[--bgGradientViaOpacityEnd]",
209
+ themeColor: {
210
+ default: {
211
+ name: "brand",
212
+ brightness: 400,
213
+ },
214
+ },
215
+ },
216
+ {
217
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
218
+ title: "Opacity",
219
+ id: "globalBgGradientViaOpacityEnd",
220
+ format: "hover:[--bgGradientViaOpacityEnd:{{value}}%]",
221
+ responsive: false,
222
+ slider: {
223
+ use: "Slider",
224
+ units: "%",
225
+ default: 100,
226
+ },
227
+ },
228
+ {
229
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
230
+ divider: {},
231
+ },
232
+ {
233
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
234
+ heading: {},
235
+ title: "To",
236
+ },
237
+ {
238
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
239
+ title: "Color",
240
+ id: "globalBgGradientToColorEnd",
241
+ format: "hover:to-{{value}}/[--bgGradientToOpacityEnd]",
242
+ themeColor: {
243
+ default: {
244
+ name: "brand",
245
+ brightness: 500,
246
+ },
247
+ },
248
+ },
249
+ {
250
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
251
+ title: "Opacity",
252
+ id: "globalBgGradientToOpacityEnd",
253
+ format: "hover:[--bgGradientToOpacityEnd:{{value}}%]",
254
+ responsive: false,
255
+ slider: {
256
+ use: "Slider",
257
+ units: "%",
258
+ default: 100,
259
+ },
260
+ },
261
+ ];
262
+
263
+ export default Gradient;
package/controls/Background/GradientContainer.js ADDED
@@ -0,0 +1,263 @@
1
+ const GradientContainer = [
2
+ {
3
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
4
+ title: "Direction",
5
+ id: "globalBgGradientDirection",
6
+ select: {
7
+ use: "GradientDirection",
8
+ },
9
+ },
10
+ {
11
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
12
+ heading: {},
13
+ title: "From",
14
+ },
15
+ {
16
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
17
+ title: "Color",
18
+ id: "globalBgGradientFromColor",
19
+ format: "from-{{value}}/[--bgGradientFromOpacity]",
20
+ themeColor: {
21
+ default: {
22
+ name: "brand",
23
+ brightness: 200,
24
+ },
25
+ },
26
+ },
27
+ {
28
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
29
+ title: "Opacity",
30
+ id: "globalBgGradientFromOpacity",
31
+ format: "[--bgGradientFromOpacity:{{value}}%]",
32
+ responsive: false,
33
+ slider: {
34
+ use: "Slider",
35
+ units: "%",
36
+ default: 100,
37
+ },
38
+ },
39
+ {
40
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
41
+ title: "Position",
42
+ id: "globalBgGradientFromPosition",
43
+ format: "from-[{{value}}%]",
44
+ responsive: false,
45
+ slider: {
46
+ use: "Slider",
47
+ units: "%",
48
+ default: 0,
49
+ },
50
+ },
51
+ {
52
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
53
+ divider: {},
54
+ },
55
+ {
56
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
57
+ title: "Add Via",
58
+ id: "globalBgGradientViaEnabled",
59
+ switch: {
60
+ default: false,
61
+ },
62
+ },
63
+ {
64
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
65
+ heading: {},
66
+ title: "Via",
67
+ },
68
+ {
69
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
70
+ title: "Color",
71
+ id: "globalBgGradientViaColor",
72
+ format: "via-{{value}}/[--bgGradientViaOpacity]",
73
+ themeColor: {
74
+ default: {
75
+ name: "brand",
76
+ brightness: 400,
77
+ },
78
+ },
79
+ },
80
+ {
81
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
82
+ title: "Opacity",
83
+ id: "globalBgGradientViaOpacity",
84
+ format: "[--bgGradientViaOpacity:{{value}}%]",
85
+ responsive: false,
86
+ slider: {
87
+ use: "Slider",
88
+ units: "%",
89
+ default: 100,
90
+ },
91
+ },
92
+ {
93
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient') && globalBgGradientViaEnabled == true",
94
+ title: "Position",
95
+ id: "globalBgGradientViaPosition",
96
+ format: "via-[{{value}}%]",
97
+ responsive: false,
98
+ slider: {
99
+ default: 50,
100
+ use: "Slider",
101
+ units: "%",
102
+ },
103
+ },
104
+ {
105
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
106
+ divider: {},
107
+ },
108
+ {
109
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
110
+ heading: {},
111
+ title: "To",
112
+ },
113
+ {
114
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
115
+ title: "Color",
116
+ id: "globalBgGradientToColor",
117
+ format: "to-{{value}}/[--bgGradientToOpacity]",
118
+ themeColor: {
119
+ default: {
120
+ name: "brand",
121
+ brightness: 500,
122
+ },
123
+ },
124
+ },
125
+ {
126
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
127
+ title: "Opacity",
128
+ id: "globalBgGradientToOpacity",
129
+ format: "[--bgGradientToOpacity:{{value}}%]",
130
+ responsive: false,
131
+ slider: {
132
+ use: "Slider",
133
+ units: "%",
134
+ default: 100,
135
+ },
136
+ },
137
+ {
138
+ visible: "globalControlTypeBg == 'static' && globalBgType == 'gradient' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'gradient')",
139
+ title: "Position",
140
+ id: "globalBgGradientToPosition",
141
+ format: "to-[{{value}}%]",
142
+ responsive: false,
143
+ slider: {
144
+ use: "Slider",
145
+ units: "%",
146
+ default: 100,
147
+ },
148
+ },
149
+ {
150
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
151
+ title: "Direction",
152
+ id: "globalBgGradientDirectionEnd",
153
+ format: "hover:{{value}}",
154
+ select: {
155
+ use: "GradientDirection",
156
+ },
157
+ },
158
+ {
159
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
160
+ title: "From",
161
+ heading: {}
162
+ },
163
+ {
164
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
165
+ title: "Color",
166
+ id: "globalBgGradientFromColorEnd",
167
+ format: "hover:from-{{value}}/[--bgGradientFromOpacityEnd]",
168
+ themeColor: {
169
+ default: {
170
+ name: "brand",
171
+ brightness: 200,
172
+ },
173
+ },
174
+ },
175
+ {
176
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
177
+ title: "Opacity",
178
+ id: "globalBgGradientFromOpacityEnd",
179
+ format: "hover:[--bgGradientFromOpacityEnd:{{value}}%]",
180
+ responsive: false,
181
+ slider: {
182
+ use: "Slider",
183
+ units: "%",
184
+ default: 100,
185
+ },
186
+ },
187
+ {
188
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
189
+ divider: {},
190
+ },
191
+ {
192
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
193
+ title: "Add Via",
194
+ id: "globalBgGradientViaEnabledEnd",
195
+ switch: {
196
+ default: false,
197
+ },
198
+ },
199
+ {
200
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
201
+ heading: {},
202
+ title: "Via",
203
+ },
204
+ {
205
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
206
+ title: "Color",
207
+ id: "globalBgGradientViaColorEnd",
208
+ format: "hover:via-{{value}}/[--bgGradientViaOpacityEnd]",
209
+ themeColor: {
210
+ default: {
211
+ name: "brand",
212
+ brightness: 400,
213
+ },
214
+ },
215
+ },
216
+ {
217
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient') && globalBgGradientViaEnabledEnd == true",
218
+ title: "Opacity",
219
+ id: "globalBgGradientViaOpacityEnd",
220
+ format: "hover:[--bgGradientViaOpacityEnd:{{value}}%]",
221
+ responsive: false,
222
+ slider: {
223
+ use: "Slider",
224
+ units: "%",
225
+ default: 100,
226
+ },
227
+ },
228
+ {
229
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
230
+ divider: {},
231
+ },
232
+ {
233
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
234
+ heading: {},
235
+ title: "To",
236
+ },
237
+ {
238
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
239
+ title: "Color",
240
+ id: "globalBgGradientToColorEnd",
241
+ format: "hover:to-{{value}}/[--bgGradientToOpacityEnd]",
242
+ themeColor: {
243
+ default: {
244
+ name: "brand",
245
+ brightness: 500,
246
+ },
247
+ },
248
+ },
249
+ {
250
+ visible: "(globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'gradient')",
251
+ title: "Opacity",
252
+ id: "globalBgGradientToOpacityEnd",
253
+ format: "hover:[--bgGradientToOpacityEnd:{{value}}%]",
254
+ responsive: false,
255
+ slider: {
256
+ use: "Slider",
257
+ units: "%",
258
+ default: 100,
259
+ },
260
+ },
261
+ ];
262
+
263
+ export default GradientContainer;