anteriority-ui 1.1.1 → 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.
- package/.verify-bundle.css +212 -91
- package/.verify-bundle.js +1279 -782
- package/AnteriorityUI.md +34 -0
- package/index.js +78 -76
- package/package.json +1 -1
- package/screens/components/ColorPicker/ColorPickerPanel.js +307 -0
- package/screens/components/ColorPicker/constants.js +33 -0
- package/screens/components/ColorPicker/index.js +92 -0
- package/screens/components/ColorPicker/index.module.css +137 -0
- package/screens/components/ColorPicker/utils.js +100 -0
- package/screens/components/Input/NumericInput.js +4 -2
package/.verify-bundle.css
CHANGED
|
@@ -2131,6 +2131,218 @@
|
|
|
2131
2131
|
text-decoration: line-through;
|
|
2132
2132
|
}
|
|
2133
2133
|
|
|
2134
|
+
/* dist/screens/components/Input/index.module.css */
|
|
2135
|
+
.Input_inputGroup {
|
|
2136
|
+
display: flex;
|
|
2137
|
+
flex-direction: column;
|
|
2138
|
+
gap: 0.2rem;
|
|
2139
|
+
}
|
|
2140
|
+
.Input_label {
|
|
2141
|
+
font-size: 0.85rem;
|
|
2142
|
+
font-weight: 700;
|
|
2143
|
+
color: #000000;
|
|
2144
|
+
}
|
|
2145
|
+
.Input_input {
|
|
2146
|
+
width: 100%;
|
|
2147
|
+
padding: 0.5rem 0.5rem;
|
|
2148
|
+
background-color: #ffffff;
|
|
2149
|
+
border: 1.5px solid #000000;
|
|
2150
|
+
border-radius: 2px;
|
|
2151
|
+
font-size: 0.85rem;
|
|
2152
|
+
font-weight: 500;
|
|
2153
|
+
color: #000000;
|
|
2154
|
+
outline: none;
|
|
2155
|
+
box-sizing: border-box;
|
|
2156
|
+
font-family: inherit;
|
|
2157
|
+
transition: box-shadow 0.2s;
|
|
2158
|
+
}
|
|
2159
|
+
.Input_input::placeholder {
|
|
2160
|
+
color: #000000;
|
|
2161
|
+
font-weight: 500;
|
|
2162
|
+
opacity: 1;
|
|
2163
|
+
}
|
|
2164
|
+
.Input_input:focus {
|
|
2165
|
+
box-shadow: 0 0 0 1px #000000;
|
|
2166
|
+
}
|
|
2167
|
+
.Input_inputError {
|
|
2168
|
+
border-color: #ff0000;
|
|
2169
|
+
}
|
|
2170
|
+
.Input_errorText {
|
|
2171
|
+
color: #ff0000;
|
|
2172
|
+
font-size: 0.75rem;
|
|
2173
|
+
margin-top: 0.1rem;
|
|
2174
|
+
}
|
|
2175
|
+
.Input_required {
|
|
2176
|
+
margin-left: 4px;
|
|
2177
|
+
}
|
|
2178
|
+
.Input_numericPopover {
|
|
2179
|
+
display: flex;
|
|
2180
|
+
flex-direction: column;
|
|
2181
|
+
gap: 2px;
|
|
2182
|
+
padding: 4px;
|
|
2183
|
+
background-color: var(--numeric-popover-bg, #ffffff);
|
|
2184
|
+
border-radius: 8px;
|
|
2185
|
+
}
|
|
2186
|
+
.Input_numericStep {
|
|
2187
|
+
display: flex;
|
|
2188
|
+
align-items: center;
|
|
2189
|
+
justify-content: center;
|
|
2190
|
+
width: 100%;
|
|
2191
|
+
height: 24px;
|
|
2192
|
+
border: none;
|
|
2193
|
+
border-radius: 6px;
|
|
2194
|
+
background: transparent;
|
|
2195
|
+
color: var(--numeric-popover-icon, #0f172a);
|
|
2196
|
+
cursor: pointer;
|
|
2197
|
+
transition: background-color 0.15s;
|
|
2198
|
+
}
|
|
2199
|
+
.Input_numericStep:hover {
|
|
2200
|
+
background-color: rgba(128, 128, 128, 0.2);
|
|
2201
|
+
}
|
|
2202
|
+
.Input_numericOption {
|
|
2203
|
+
min-width: 72px;
|
|
2204
|
+
height: 28px;
|
|
2205
|
+
border: none;
|
|
2206
|
+
border-radius: 6px;
|
|
2207
|
+
background: transparent;
|
|
2208
|
+
color: var(--numeric-popover-icon, #0f172a);
|
|
2209
|
+
font: inherit;
|
|
2210
|
+
font-size: 0.9rem;
|
|
2211
|
+
cursor: pointer;
|
|
2212
|
+
transition: background-color 0.15s;
|
|
2213
|
+
}
|
|
2214
|
+
.Input_numericOption:hover:not(:disabled) {
|
|
2215
|
+
background-color: rgba(128, 128, 128, 0.2);
|
|
2216
|
+
}
|
|
2217
|
+
.Input_numericOption:disabled {
|
|
2218
|
+
cursor: default;
|
|
2219
|
+
}
|
|
2220
|
+
.Input_numericOptionActive {
|
|
2221
|
+
font-weight: 700;
|
|
2222
|
+
background-color: rgba(128, 128, 128, 0.25);
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
/* dist/screens/components/ColorPicker/index.module.css */
|
|
2226
|
+
.ColorPicker_root {
|
|
2227
|
+
display: inline-flex;
|
|
2228
|
+
flex-direction: column;
|
|
2229
|
+
gap: 0.25rem;
|
|
2230
|
+
}
|
|
2231
|
+
.ColorPicker_label {
|
|
2232
|
+
font-size: 0.85rem;
|
|
2233
|
+
font-weight: 700;
|
|
2234
|
+
color: var(--cp-text, var(--color-text, #1e293b));
|
|
2235
|
+
}
|
|
2236
|
+
.ColorPicker_trigger {
|
|
2237
|
+
display: inline-flex;
|
|
2238
|
+
align-items: center;
|
|
2239
|
+
gap: 0.6rem;
|
|
2240
|
+
padding: 0.4rem 0.7rem;
|
|
2241
|
+
background: var(--cp-bg, #ffffff);
|
|
2242
|
+
color: var(--cp-text, var(--color-text, #1e293b));
|
|
2243
|
+
border: 1px solid var(--cp-border, var(--color-border, #e2e8f0));
|
|
2244
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
2245
|
+
font-family: inherit;
|
|
2246
|
+
font-size: 0.85rem;
|
|
2247
|
+
cursor: pointer;
|
|
2248
|
+
transition: border-color 0.15s;
|
|
2249
|
+
}
|
|
2250
|
+
.ColorPicker_trigger:hover:not(:disabled),
|
|
2251
|
+
.ColorPicker_trigger[aria-expanded=true] {
|
|
2252
|
+
border-color: var(--cp-accent, var(--color-primary, #1717ff));
|
|
2253
|
+
}
|
|
2254
|
+
.ColorPicker_trigger:disabled {
|
|
2255
|
+
opacity: 0.55;
|
|
2256
|
+
cursor: not-allowed;
|
|
2257
|
+
}
|
|
2258
|
+
.ColorPicker_swatch,
|
|
2259
|
+
.ColorPicker_preview {
|
|
2260
|
+
flex-shrink: 0;
|
|
2261
|
+
width: 1.5rem;
|
|
2262
|
+
height: 1.5rem;
|
|
2263
|
+
border-radius: 50%;
|
|
2264
|
+
background-color: var(--swatch-color);
|
|
2265
|
+
border: 1px solid rgba(128, 128, 128, 0.4);
|
|
2266
|
+
}
|
|
2267
|
+
.ColorPicker_hexText {
|
|
2268
|
+
font-variant-numeric: tabular-nums;
|
|
2269
|
+
}
|
|
2270
|
+
.ColorPicker_popover {
|
|
2271
|
+
width: 240px;
|
|
2272
|
+
padding: 0.75rem;
|
|
2273
|
+
background: var(--cp-bg, #ffffff);
|
|
2274
|
+
color: var(--cp-text, var(--color-text, #1e293b));
|
|
2275
|
+
border: 1px solid var(--cp-border, var(--color-border, #e2e8f0));
|
|
2276
|
+
border-radius: var(--radius-lg, 0.75rem);
|
|
2277
|
+
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
|
|
2278
|
+
font-family: inherit;
|
|
2279
|
+
}
|
|
2280
|
+
.ColorPicker_panel {
|
|
2281
|
+
display: flex;
|
|
2282
|
+
flex-direction: column;
|
|
2283
|
+
gap: 0.75rem;
|
|
2284
|
+
}
|
|
2285
|
+
.ColorPicker_saturationArea {
|
|
2286
|
+
position: relative;
|
|
2287
|
+
height: 140px;
|
|
2288
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
2289
|
+
cursor: crosshair;
|
|
2290
|
+
touch-action: none;
|
|
2291
|
+
outline-offset: 2px;
|
|
2292
|
+
}
|
|
2293
|
+
.ColorPicker_saturationThumb,
|
|
2294
|
+
.ColorPicker_hueThumb {
|
|
2295
|
+
position: absolute;
|
|
2296
|
+
width: 14px;
|
|
2297
|
+
height: 14px;
|
|
2298
|
+
border: 2px solid #ffffff;
|
|
2299
|
+
border-radius: 50%;
|
|
2300
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
|
|
2301
|
+
transform: translate(-50%, -50%);
|
|
2302
|
+
pointer-events: none;
|
|
2303
|
+
}
|
|
2304
|
+
.ColorPicker_saturationThumb {
|
|
2305
|
+
background-color: var(--swatch-color);
|
|
2306
|
+
}
|
|
2307
|
+
.ColorPicker_hueTrack {
|
|
2308
|
+
position: relative;
|
|
2309
|
+
height: 12px;
|
|
2310
|
+
border-radius: 6px;
|
|
2311
|
+
cursor: pointer;
|
|
2312
|
+
touch-action: none;
|
|
2313
|
+
outline-offset: 2px;
|
|
2314
|
+
}
|
|
2315
|
+
.ColorPicker_hueThumb {
|
|
2316
|
+
top: 50%;
|
|
2317
|
+
background-color: #ffffff;
|
|
2318
|
+
}
|
|
2319
|
+
.ColorPicker_formatRow {
|
|
2320
|
+
display: flex;
|
|
2321
|
+
gap: 0.25rem;
|
|
2322
|
+
}
|
|
2323
|
+
.ColorPicker_valueRow {
|
|
2324
|
+
display: flex;
|
|
2325
|
+
align-items: center;
|
|
2326
|
+
gap: 0.5rem;
|
|
2327
|
+
}
|
|
2328
|
+
.ColorPicker_channelsRow {
|
|
2329
|
+
display: flex;
|
|
2330
|
+
flex: 1;
|
|
2331
|
+
gap: 0.4rem;
|
|
2332
|
+
}
|
|
2333
|
+
.ColorPicker_channelField {
|
|
2334
|
+
display: flex;
|
|
2335
|
+
flex: 1;
|
|
2336
|
+
flex-direction: column;
|
|
2337
|
+
align-items: center;
|
|
2338
|
+
gap: 0.15rem;
|
|
2339
|
+
min-width: 0;
|
|
2340
|
+
}
|
|
2341
|
+
.ColorPicker_error {
|
|
2342
|
+
font-size: 0.75rem;
|
|
2343
|
+
color: var(--color-danger, #ea1f1f);
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2134
2346
|
/* dist/screens/components/Container/index.module.css */
|
|
2135
2347
|
.Container_containerCard {
|
|
2136
2348
|
position: relative;
|
|
@@ -2897,97 +3109,6 @@
|
|
|
2897
3109
|
}
|
|
2898
3110
|
}
|
|
2899
3111
|
|
|
2900
|
-
/* dist/screens/components/Input/index.module.css */
|
|
2901
|
-
.Input_inputGroup {
|
|
2902
|
-
display: flex;
|
|
2903
|
-
flex-direction: column;
|
|
2904
|
-
gap: 0.2rem;
|
|
2905
|
-
}
|
|
2906
|
-
.Input_label {
|
|
2907
|
-
font-size: 0.85rem;
|
|
2908
|
-
font-weight: 700;
|
|
2909
|
-
color: #000000;
|
|
2910
|
-
}
|
|
2911
|
-
.Input_input {
|
|
2912
|
-
width: 100%;
|
|
2913
|
-
padding: 0.5rem 0.5rem;
|
|
2914
|
-
background-color: #ffffff;
|
|
2915
|
-
border: 1.5px solid #000000;
|
|
2916
|
-
border-radius: 2px;
|
|
2917
|
-
font-size: 0.85rem;
|
|
2918
|
-
font-weight: 500;
|
|
2919
|
-
color: #000000;
|
|
2920
|
-
outline: none;
|
|
2921
|
-
box-sizing: border-box;
|
|
2922
|
-
font-family: inherit;
|
|
2923
|
-
transition: box-shadow 0.2s;
|
|
2924
|
-
}
|
|
2925
|
-
.Input_input::placeholder {
|
|
2926
|
-
color: #000000;
|
|
2927
|
-
font-weight: 500;
|
|
2928
|
-
opacity: 1;
|
|
2929
|
-
}
|
|
2930
|
-
.Input_input:focus {
|
|
2931
|
-
box-shadow: 0 0 0 1px #000000;
|
|
2932
|
-
}
|
|
2933
|
-
.Input_inputError {
|
|
2934
|
-
border-color: #ff0000;
|
|
2935
|
-
}
|
|
2936
|
-
.Input_errorText {
|
|
2937
|
-
color: #ff0000;
|
|
2938
|
-
font-size: 0.75rem;
|
|
2939
|
-
margin-top: 0.1rem;
|
|
2940
|
-
}
|
|
2941
|
-
.Input_required {
|
|
2942
|
-
margin-left: 4px;
|
|
2943
|
-
}
|
|
2944
|
-
.Input_numericPopover {
|
|
2945
|
-
display: flex;
|
|
2946
|
-
flex-direction: column;
|
|
2947
|
-
gap: 2px;
|
|
2948
|
-
padding: 4px;
|
|
2949
|
-
background-color: var(--numeric-popover-bg, #ffffff);
|
|
2950
|
-
border-radius: 8px;
|
|
2951
|
-
}
|
|
2952
|
-
.Input_numericStep {
|
|
2953
|
-
display: flex;
|
|
2954
|
-
align-items: center;
|
|
2955
|
-
justify-content: center;
|
|
2956
|
-
width: 100%;
|
|
2957
|
-
height: 24px;
|
|
2958
|
-
border: none;
|
|
2959
|
-
border-radius: 6px;
|
|
2960
|
-
background: transparent;
|
|
2961
|
-
color: var(--numeric-popover-icon, #0f172a);
|
|
2962
|
-
cursor: pointer;
|
|
2963
|
-
transition: background-color 0.15s;
|
|
2964
|
-
}
|
|
2965
|
-
.Input_numericStep:hover {
|
|
2966
|
-
background-color: rgba(128, 128, 128, 0.2);
|
|
2967
|
-
}
|
|
2968
|
-
.Input_numericOption {
|
|
2969
|
-
min-width: 72px;
|
|
2970
|
-
height: 28px;
|
|
2971
|
-
border: none;
|
|
2972
|
-
border-radius: 6px;
|
|
2973
|
-
background: transparent;
|
|
2974
|
-
color: var(--numeric-popover-icon, #0f172a);
|
|
2975
|
-
font: inherit;
|
|
2976
|
-
font-size: 0.9rem;
|
|
2977
|
-
cursor: pointer;
|
|
2978
|
-
transition: background-color 0.15s;
|
|
2979
|
-
}
|
|
2980
|
-
.Input_numericOption:hover:not(:disabled) {
|
|
2981
|
-
background-color: rgba(128, 128, 128, 0.2);
|
|
2982
|
-
}
|
|
2983
|
-
.Input_numericOption:disabled {
|
|
2984
|
-
cursor: default;
|
|
2985
|
-
}
|
|
2986
|
-
.Input_numericOptionActive {
|
|
2987
|
-
font-weight: 700;
|
|
2988
|
-
background-color: rgba(128, 128, 128, 0.25);
|
|
2989
|
-
}
|
|
2990
|
-
|
|
2991
3112
|
/* dist/screens/components/MarkdownEditor/index.module.css */
|
|
2992
3113
|
.MarkdownEditor_editorContainer {
|
|
2993
3114
|
display: flex;
|