@umami/react-zen 0.63.0 → 0.65.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/dist/index.css +162 -140
- package/dist/index.d.ts +30 -10
- package/dist/index.js +5466 -4712
- package/dist/index.mjs +3854 -3100
- package/package.json +19 -13
- package/styles.css +162 -140
package/dist/index.css
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
/* virtual-css:css:fd9059b0b8139e56f974f8291736b4c8 */
|
|
2
|
-
.
|
|
2
|
+
.Icon_icon__NzNmN {
|
|
3
3
|
display: inline-block;
|
|
4
|
+
flex-shrink: 0;
|
|
4
5
|
}
|
|
5
|
-
.
|
|
6
|
+
.Icon_xs__MDhiY {
|
|
6
7
|
width: 12px;
|
|
7
8
|
height: 12px;
|
|
8
9
|
}
|
|
9
|
-
.
|
|
10
|
+
.Icon_sm__ZWU0N {
|
|
10
11
|
width: 16px;
|
|
11
12
|
height: 16px;
|
|
12
13
|
}
|
|
13
|
-
.
|
|
14
|
+
.Icon_md__YTY3Y {
|
|
14
15
|
width: 24px;
|
|
15
16
|
height: 24px;
|
|
16
17
|
}
|
|
17
|
-
.
|
|
18
|
+
.Icon_lg__ZGJlZ {
|
|
18
19
|
width: 32px;
|
|
19
20
|
height: 32px;
|
|
20
21
|
}
|
|
21
|
-
.
|
|
22
|
+
.Icon_xl__MDU3Y {
|
|
22
23
|
width: 48px;
|
|
23
24
|
height: 48px;
|
|
24
25
|
}
|
|
@@ -2236,7 +2237,7 @@
|
|
|
2236
2237
|
}
|
|
2237
2238
|
|
|
2238
2239
|
/* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
|
|
2239
|
-
.
|
|
2240
|
+
.Button_button__ZTY3M {
|
|
2240
2241
|
display: flex;
|
|
2241
2242
|
align-items: center;
|
|
2242
2243
|
justify-content: center;
|
|
@@ -2255,85 +2256,85 @@
|
|
|
2255
2256
|
line-height: 1.5;
|
|
2256
2257
|
--button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
|
|
2257
2258
|
}
|
|
2258
|
-
.
|
|
2259
|
+
.Button_button__ZTY3M:disabled {
|
|
2259
2260
|
color: var(--font-color-muted);
|
|
2260
2261
|
pointer-events: none;
|
|
2261
2262
|
}
|
|
2262
|
-
.
|
|
2263
|
+
.Button_button__ZTY3M:hover {
|
|
2263
2264
|
background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
|
|
2264
2265
|
}
|
|
2265
|
-
.
|
|
2266
|
+
.Button_button__ZTY3M[data-pressed] {
|
|
2266
2267
|
background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
|
|
2267
2268
|
}
|
|
2268
|
-
.
|
|
2269
|
+
.Button_button__ZTY3M.Button_primary__YzkyZ {
|
|
2269
2270
|
color: var(--primary-font-color) !important;
|
|
2270
2271
|
background: var(--primary-color);
|
|
2271
2272
|
}
|
|
2272
|
-
.
|
|
2273
|
+
.Button_button__ZTY3M.Button_primary__YzkyZ:hover {
|
|
2273
2274
|
background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
|
|
2274
2275
|
}
|
|
2275
|
-
.
|
|
2276
|
+
.Button_button__ZTY3M.Button_primary__YzkyZ[data-pressed] {
|
|
2276
2277
|
background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
|
|
2277
2278
|
}
|
|
2278
|
-
.
|
|
2279
|
+
.Button_button__ZTY3M.Button_primary__YzkyZ:disabled {
|
|
2279
2280
|
color: var(--primary-font-color);
|
|
2280
2281
|
background: var(--base-color-9);
|
|
2281
2282
|
}
|
|
2282
|
-
.
|
|
2283
|
-
background:
|
|
2283
|
+
.Button_button__ZTY3M.Button_outline__OGU2Z {
|
|
2284
|
+
background: var(--background-color);
|
|
2284
2285
|
border: var(--border);
|
|
2285
2286
|
box-shadow: var(--box-shadow-1);
|
|
2286
2287
|
}
|
|
2287
|
-
.
|
|
2288
|
-
|
|
2288
|
+
.Button_button__ZTY3M.Button_outline__OGU2Z:hover {
|
|
2289
|
+
border-color: var(--border-color-3);
|
|
2289
2290
|
}
|
|
2290
|
-
.
|
|
2291
|
-
background:
|
|
2291
|
+
.Button_button__ZTY3M.Button_outline__OGU2Z[data-pressed] {
|
|
2292
|
+
background: var(--highlight-color);
|
|
2292
2293
|
}
|
|
2293
|
-
.
|
|
2294
|
+
.Button_button__ZTY3M.Button_quiet__ZTliZ {
|
|
2294
2295
|
background: transparent;
|
|
2295
2296
|
}
|
|
2296
|
-
.
|
|
2297
|
+
.Button_button__ZTY3M.Button_quiet__ZTliZ:hover {
|
|
2297
2298
|
background: var(--highlight-color);
|
|
2298
2299
|
}
|
|
2299
|
-
.
|
|
2300
|
+
.Button_button__ZTY3M.Button_quiet__ZTliZ[data-pressed] {
|
|
2300
2301
|
background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
|
|
2301
2302
|
}
|
|
2302
|
-
.
|
|
2303
|
+
.Button_button__ZTY3M.Button_danger__ZDc1M {
|
|
2303
2304
|
color: var(--light-color);
|
|
2304
2305
|
background: var(--danger-color);
|
|
2305
2306
|
}
|
|
2306
|
-
.
|
|
2307
|
+
.Button_button__ZTY3M.Button_danger__ZDc1M:hover {
|
|
2307
2308
|
background: color-mix(in srgb, var(--danger-color), 6% black);
|
|
2308
2309
|
}
|
|
2309
|
-
.
|
|
2310
|
+
.Button_button__ZTY3M.Button_danger__ZDc1M[data-pressed] {
|
|
2310
2311
|
background: color-mix(in srgb, var(--danger-color), 12% black);
|
|
2311
2312
|
}
|
|
2312
|
-
.
|
|
2313
|
+
.Button_button__ZTY3M.Button_danger__ZDc1M:disabled {
|
|
2313
2314
|
color: var(--primary-font-color);
|
|
2314
2315
|
background: var(--base-color-8);
|
|
2315
2316
|
}
|
|
2316
|
-
.
|
|
2317
|
+
.Button_button__ZTY3M.Button_sm__NzRiZ {
|
|
2317
2318
|
font-size: calc(0.9 * var(--font-size));
|
|
2318
2319
|
padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
|
|
2319
2320
|
min-height: calc(0.9 * var(--button-height));
|
|
2320
2321
|
}
|
|
2321
|
-
.
|
|
2322
|
+
.Button_button__ZTY3M.Button_md__ZTZiM {
|
|
2322
2323
|
font-size: var(--font-size);
|
|
2323
2324
|
padding: var(--padding);
|
|
2324
2325
|
min-height: var(--button-height);
|
|
2325
2326
|
}
|
|
2326
|
-
.
|
|
2327
|
+
.Button_button__ZTY3M.Button_lg__ODE0Z {
|
|
2327
2328
|
font-size: calc(1.25 * var(--font-size));
|
|
2328
2329
|
padding: var(--padding-y) calc(1.25 * var(--padding-x));
|
|
2329
2330
|
min-height: calc(1.25 * var(--button-height));
|
|
2330
2331
|
}
|
|
2331
|
-
.
|
|
2332
|
+
.Button_button__ZTY3M.Button_xl__NzE0M {
|
|
2332
2333
|
font-size: calc(1.5 * var(--font-size));
|
|
2333
2334
|
padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
|
|
2334
2335
|
min-height: calc(1.5 * var(--button-height));
|
|
2335
2336
|
}
|
|
2336
|
-
body a.
|
|
2337
|
+
body a.Button_button__ZTY3M {
|
|
2337
2338
|
color: inherit;
|
|
2338
2339
|
text-decoration: none;
|
|
2339
2340
|
}
|
|
@@ -2601,15 +2602,17 @@ body a.Button_button__NmQ1Z {
|
|
|
2601
2602
|
}
|
|
2602
2603
|
|
|
2603
2604
|
/* virtual-css:css:642a816d71e0e4e5346089e7fb2bf78b */
|
|
2604
|
-
.
|
|
2605
|
+
.Block_block__MmJiM {
|
|
2605
2606
|
display: flex;
|
|
2606
2607
|
flex-direction: row;
|
|
2607
2608
|
align-items: center;
|
|
2608
2609
|
font-size: var(--font-size);
|
|
2609
2610
|
gap: var(--gap);
|
|
2610
2611
|
padding: var(--padding);
|
|
2612
|
+
border: 1px solid transparent;
|
|
2611
2613
|
border-radius: var(--border-radius);
|
|
2612
2614
|
line-height: 1.5;
|
|
2615
|
+
min-height: calc((1.5 * var(--font-size)) + (2 * var(--padding-y)));
|
|
2613
2616
|
}
|
|
2614
2617
|
|
|
2615
2618
|
/* virtual-css:css:24928f94983bde06afba78ec92a4df4b */
|
|
@@ -2949,19 +2952,19 @@ body a.Button_button__NmQ1Z {
|
|
|
2949
2952
|
}
|
|
2950
2953
|
|
|
2951
2954
|
/* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
|
|
2952
|
-
.
|
|
2955
|
+
.input_field__NGM0Z {
|
|
2953
2956
|
position: relative;
|
|
2954
2957
|
min-width: 240px;
|
|
2955
2958
|
}
|
|
2956
|
-
.
|
|
2957
|
-
.
|
|
2959
|
+
.input_field__NGM0Z,
|
|
2960
|
+
.input_row__NjY4Y {
|
|
2958
2961
|
position: relative;
|
|
2959
2962
|
}
|
|
2960
|
-
.
|
|
2961
|
-
.
|
|
2963
|
+
.input_field__NGM0Z[data-readonly] .input_input__MjUyM,
|
|
2964
|
+
.input_field__NGM0Z[data-disabled] .input_input__MjUyM {
|
|
2962
2965
|
background: var(--base-color-4);
|
|
2963
2966
|
}
|
|
2964
|
-
.
|
|
2967
|
+
.input_input__MjUyM {
|
|
2965
2968
|
font-size: var(--font-size);
|
|
2966
2969
|
color: var(--font-color);
|
|
2967
2970
|
border: var(--border);
|
|
@@ -2972,37 +2975,36 @@ body a.Button_button__NmQ1Z {
|
|
|
2972
2975
|
line-height: 1.5rem;
|
|
2973
2976
|
width: 100%;
|
|
2974
2977
|
}
|
|
2975
|
-
.
|
|
2978
|
+
.input_input__MjUyM:focus {
|
|
2976
2979
|
border-color: transparent;
|
|
2977
2980
|
outline: var(--outline);
|
|
2978
2981
|
}
|
|
2979
|
-
.
|
|
2982
|
+
.input_input__MjUyM::placeholder {
|
|
2980
2983
|
color: var(--font-color-muted);
|
|
2981
2984
|
}
|
|
2982
|
-
.
|
|
2985
|
+
.input_input__MjUyM:disabled {
|
|
2983
2986
|
color: var(--font-color-muted);
|
|
2984
2987
|
}
|
|
2985
|
-
.
|
|
2986
|
-
.
|
|
2988
|
+
.input_input__MjUyM::-webkit-search-cancel-button,
|
|
2989
|
+
.input_input__MjUyM::-webkit-search-decoration {
|
|
2987
2990
|
-webkit-appearance: none;
|
|
2988
2991
|
}
|
|
2989
|
-
.
|
|
2992
|
+
.input_icon__ZjY5O {
|
|
2990
2993
|
color: var(--font-color-muted);
|
|
2991
|
-
background: var(--background-color);
|
|
2992
2994
|
}
|
|
2993
|
-
.
|
|
2995
|
+
.input_icon__ZjY5O:hover {
|
|
2994
2996
|
color: var(--font-color);
|
|
2995
2997
|
cursor: pointer;
|
|
2996
2998
|
}
|
|
2997
2999
|
|
|
2998
3000
|
/* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
|
|
2999
|
-
.
|
|
3001
|
+
.TextField_allowCopy__Y2RhY {
|
|
3000
3002
|
padding-right: 32px;
|
|
3001
3003
|
}
|
|
3002
|
-
.
|
|
3004
|
+
.TextField_icon__MWVlN {
|
|
3003
3005
|
position: absolute;
|
|
3004
|
-
top: var(--
|
|
3005
|
-
right: var(--
|
|
3006
|
+
top: calc(var(--padding-y) + 4px);
|
|
3007
|
+
right: var(--padding-x);
|
|
3006
3008
|
background: none;
|
|
3007
3009
|
}
|
|
3008
3010
|
|
|
@@ -3083,7 +3085,7 @@ body a.Button_button__NmQ1Z {
|
|
|
3083
3085
|
}
|
|
3084
3086
|
|
|
3085
3087
|
/* virtual-css:css:e66162403f9946d7217dc462fee28120 */
|
|
3086
|
-
.
|
|
3088
|
+
.Dots_dots__YzQxM {
|
|
3087
3089
|
position: relative;
|
|
3088
3090
|
display: inline-flex;
|
|
3089
3091
|
justify-content: center;
|
|
@@ -3091,21 +3093,21 @@ body a.Button_button__NmQ1Z {
|
|
|
3091
3093
|
min-height: 50px;
|
|
3092
3094
|
gap: 8px;
|
|
3093
3095
|
}
|
|
3094
|
-
.
|
|
3095
|
-
width:
|
|
3096
|
-
height:
|
|
3096
|
+
.Dots_dot__ZDdiZ {
|
|
3097
|
+
width: 8px;
|
|
3098
|
+
height: 8px;
|
|
3097
3099
|
border-radius: 100%;
|
|
3098
3100
|
background: color-mix(in srgb, var(--font-color), 50% transparent);
|
|
3099
|
-
animation: Dots_dots-
|
|
3101
|
+
animation: Dots_dots-blink__NDE3Y 1.2s infinite;
|
|
3100
3102
|
animation-fill-mode: both;
|
|
3101
3103
|
}
|
|
3102
|
-
.
|
|
3104
|
+
.Dots_dot__ZDdiZ:nth-child(2) {
|
|
3103
3105
|
animation-delay: 0.2s;
|
|
3104
3106
|
}
|
|
3105
|
-
.
|
|
3107
|
+
.Dots_dot__ZDdiZ:nth-child(3) {
|
|
3106
3108
|
animation-delay: 0.4s;
|
|
3107
3109
|
}
|
|
3108
|
-
@keyframes Dots_dots-
|
|
3110
|
+
@keyframes Dots_dots-blink__NDE3Y {
|
|
3109
3111
|
0% {
|
|
3110
3112
|
opacity: 0.2;
|
|
3111
3113
|
}
|
|
@@ -3117,6 +3119,75 @@ body a.Button_button__NmQ1Z {
|
|
|
3117
3119
|
}
|
|
3118
3120
|
}
|
|
3119
3121
|
|
|
3122
|
+
/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
|
|
3123
|
+
.Tooltip_tooltip__YmY4Z {
|
|
3124
|
+
forced-color-adjust: none;
|
|
3125
|
+
outline: none;
|
|
3126
|
+
}
|
|
3127
|
+
.Tooltip_bubble__MWE0N {
|
|
3128
|
+
color: var(--light-color);
|
|
3129
|
+
background: rgba(0, 0, 0, 0.8);
|
|
3130
|
+
padding: var(--padding);
|
|
3131
|
+
border-radius: var(--border-radius);
|
|
3132
|
+
}
|
|
3133
|
+
.Tooltip_tooltip__YmY4Z[data-placement=top] {
|
|
3134
|
+
margin-bottom: 8px;
|
|
3135
|
+
--origin: translateY(4px);
|
|
3136
|
+
}
|
|
3137
|
+
.Tooltip_tooltip__YmY4Z[data-placement=bottom] {
|
|
3138
|
+
margin-top: 8px;
|
|
3139
|
+
--origin: translateY(-4px);
|
|
3140
|
+
}
|
|
3141
|
+
.Tooltip_tooltip__YmY4Z[data-placement=bottom] .Tooltip_arrow__OGM1M svg {
|
|
3142
|
+
transform: rotate(180deg);
|
|
3143
|
+
}
|
|
3144
|
+
.Tooltip_tooltip__YmY4Z[data-placement=right] {
|
|
3145
|
+
margin-left: 8px;
|
|
3146
|
+
--origin: translateX(-4px);
|
|
3147
|
+
}
|
|
3148
|
+
.Tooltip_tooltip__YmY4Z[data-placement=right] .Tooltip_arrow__OGM1M svg {
|
|
3149
|
+
transform: rotate(90deg);
|
|
3150
|
+
}
|
|
3151
|
+
.Tooltip_tooltip__YmY4Z[data-placement=left] {
|
|
3152
|
+
margin-right: 8px;
|
|
3153
|
+
--origin: translateX(4px);
|
|
3154
|
+
}
|
|
3155
|
+
.Tooltip_tooltip__YmY4Z[data-placement=left] .Tooltip_arrow__OGM1M svg {
|
|
3156
|
+
transform: rotate(-90deg);
|
|
3157
|
+
}
|
|
3158
|
+
.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M {
|
|
3159
|
+
width: 8px;
|
|
3160
|
+
height: 8px;
|
|
3161
|
+
}
|
|
3162
|
+
.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M svg {
|
|
3163
|
+
display: block;
|
|
3164
|
+
fill: rgba(0, 0, 0, 0.8);
|
|
3165
|
+
}
|
|
3166
|
+
.Tooltip_tooltip__YmY4Z[data-entering] {
|
|
3167
|
+
animation: Tooltip_slide__MGVmY 200ms;
|
|
3168
|
+
}
|
|
3169
|
+
.Tooltip_tooltip__YmY4Z[data-exiting] {
|
|
3170
|
+
animation: Tooltip_slide__MGVmY 200ms reverse ease-in;
|
|
3171
|
+
}
|
|
3172
|
+
@keyframes Tooltip_slide__MGVmY {
|
|
3173
|
+
from {
|
|
3174
|
+
transform: var(--origin);
|
|
3175
|
+
opacity: 0;
|
|
3176
|
+
}
|
|
3177
|
+
to {
|
|
3178
|
+
transform: translateY(0);
|
|
3179
|
+
opacity: 1;
|
|
3180
|
+
}
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
/* virtual-css:css:a37d08939f4c2e286eced2d454e614ea */
|
|
3184
|
+
.FloatingTooltip_floating__ZjM4N {
|
|
3185
|
+
position: fixed;
|
|
3186
|
+
pointer-events: none;
|
|
3187
|
+
z-index: 9999;
|
|
3188
|
+
transform: translate(-50%, calc(-100% - 10px));
|
|
3189
|
+
}
|
|
3190
|
+
|
|
3120
3191
|
/* virtual-css:css:94870e251b7b77526d8ae103079be601 */
|
|
3121
3192
|
.Heading_heading__MGIyZ {
|
|
3122
3193
|
color: var(--heading-color);
|
|
@@ -3589,111 +3660,64 @@ body a.Button_button__NmQ1Z {
|
|
|
3589
3660
|
cursor: pointer;
|
|
3590
3661
|
}
|
|
3591
3662
|
|
|
3592
|
-
/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
|
|
3593
|
-
.Tooltip_tooltip__NDBjM {
|
|
3594
|
-
font-size: var(--font-size);
|
|
3595
|
-
color: var(--light-color);
|
|
3596
|
-
background: rgba(0, 0, 0, 0.8);
|
|
3597
|
-
forced-color-adjust: none;
|
|
3598
|
-
outline: none;
|
|
3599
|
-
padding: var(--padding);
|
|
3600
|
-
border-radius: var(--border-radius);
|
|
3601
|
-
max-width: 150px;
|
|
3602
|
-
transform: translate3d(0, 0, 0);
|
|
3603
|
-
}
|
|
3604
|
-
.Tooltip_tooltip__NDBjM[data-placement=top] {
|
|
3605
|
-
margin-bottom: 8px;
|
|
3606
|
-
--origin: translateY(4px);
|
|
3607
|
-
}
|
|
3608
|
-
.Tooltip_tooltip__NDBjM[data-placement=bottom] {
|
|
3609
|
-
margin-top: 8px;
|
|
3610
|
-
--origin: translateY(-4px);
|
|
3611
|
-
}
|
|
3612
|
-
.Tooltip_tooltip__NDBjM[data-placement=bottom] .Tooltip_arrow__NzM4M svg {
|
|
3613
|
-
transform: rotate(180deg);
|
|
3614
|
-
}
|
|
3615
|
-
.Tooltip_tooltip__NDBjM[data-placement=right] {
|
|
3616
|
-
margin-left: 8px;
|
|
3617
|
-
--origin: translateX(-4px);
|
|
3618
|
-
}
|
|
3619
|
-
.Tooltip_tooltip__NDBjM[data-placement=right] .Tooltip_arrow__NzM4M svg {
|
|
3620
|
-
transform: rotate(90deg);
|
|
3621
|
-
}
|
|
3622
|
-
.Tooltip_tooltip__NDBjM[data-placement=left] {
|
|
3623
|
-
margin-right: 8px;
|
|
3624
|
-
--origin: translateX(4px);
|
|
3625
|
-
}
|
|
3626
|
-
.Tooltip_tooltip__NDBjM[data-placement=left] .Tooltip_arrow__NzM4M svg {
|
|
3627
|
-
transform: rotate(-90deg);
|
|
3628
|
-
}
|
|
3629
|
-
.Tooltip_tooltip__NDBjM .Tooltip_arrow__NzM4M svg {
|
|
3630
|
-
display: block;
|
|
3631
|
-
fill: rgba(0, 0, 0, 0.8);
|
|
3632
|
-
}
|
|
3633
|
-
.Tooltip_tooltip__NDBjM[data-entering] {
|
|
3634
|
-
animation: Tooltip_slide__NzNkY 200ms;
|
|
3635
|
-
}
|
|
3636
|
-
.Tooltip_tooltip__NDBjM[data-exiting] {
|
|
3637
|
-
animation: Tooltip_slide__NzNkY 200ms reverse ease-in;
|
|
3638
|
-
}
|
|
3639
|
-
@keyframes Tooltip_slide__NzNkY {
|
|
3640
|
-
from {
|
|
3641
|
-
transform: var(--origin);
|
|
3642
|
-
opacity: 0;
|
|
3643
|
-
}
|
|
3644
|
-
to {
|
|
3645
|
-
transform: translateY(0);
|
|
3646
|
-
opacity: 1;
|
|
3647
|
-
}
|
|
3648
|
-
}
|
|
3649
|
-
|
|
3650
3663
|
/* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
|
|
3651
|
-
.
|
|
3664
|
+
.SideNav_sidenav__NTNmY {
|
|
3652
3665
|
height: 100%;
|
|
3653
3666
|
font-size: var(--font-size);
|
|
3654
3667
|
background-color: var(--base-color-1);
|
|
3655
3668
|
border-right: 1px solid var(--border-color);
|
|
3656
3669
|
width: 200px;
|
|
3670
|
+
transition: width 0.1s ease-out;
|
|
3671
|
+
overflow: hidden;
|
|
3657
3672
|
}
|
|
3658
|
-
.
|
|
3673
|
+
.SideNav_header__NzhjN {
|
|
3659
3674
|
display: flex;
|
|
3660
3675
|
align-items: center;
|
|
3661
3676
|
gap: var(--gap);
|
|
3662
3677
|
padding: var(--padding);
|
|
3663
3678
|
}
|
|
3664
|
-
.
|
|
3679
|
+
.SideNav_name__ZWUxM {
|
|
3665
3680
|
font-weight: var(--font-weight-bold);
|
|
3666
3681
|
}
|
|
3667
|
-
.
|
|
3682
|
+
.SideNav_section__MmE3N {
|
|
3668
3683
|
padding: var(--spacing-3);
|
|
3684
|
+
overflow: hidden;
|
|
3669
3685
|
}
|
|
3670
|
-
.
|
|
3686
|
+
.SideNav_title__N2Y0O {
|
|
3671
3687
|
font-weight: var(--font-weight-bold);
|
|
3672
3688
|
}
|
|
3673
|
-
.
|
|
3689
|
+
.SideNav_content__MzA2M {
|
|
3674
3690
|
display: grid;
|
|
3691
|
+
min-height: 40px;
|
|
3675
3692
|
gap: var(--gap);
|
|
3693
|
+
overflow: hidden;
|
|
3676
3694
|
}
|
|
3677
|
-
.
|
|
3695
|
+
.SideNav_item__OGU5M {
|
|
3678
3696
|
display: flex;
|
|
3679
3697
|
align-items: center;
|
|
3680
3698
|
justify-content: flex-start;
|
|
3681
3699
|
width: 100%;
|
|
3700
|
+
min-height: 40px;
|
|
3682
3701
|
color: var(--font-color-muted);
|
|
3683
3702
|
gap: var(--gap);
|
|
3684
3703
|
padding: var(--padding);
|
|
3685
3704
|
cursor: pointer;
|
|
3705
|
+
white-space: nowrap;
|
|
3706
|
+
overflow: hidden;
|
|
3686
3707
|
}
|
|
3687
|
-
.
|
|
3708
|
+
.SideNav_item__OGU5M:hover {
|
|
3688
3709
|
color: var(--font-color);
|
|
3689
3710
|
background-color: var(--base-color-2);
|
|
3690
3711
|
}
|
|
3691
|
-
.
|
|
3692
|
-
|
|
3712
|
+
.SideNav_label__NjFiY {
|
|
3713
|
+
transition: opacity 0.3s;
|
|
3693
3714
|
}
|
|
3694
|
-
.
|
|
3695
|
-
|
|
3696
|
-
|
|
3715
|
+
.SideNav_collapsed__NTBlM .SideNav_label__NjFiY {
|
|
3716
|
+
opacity: 0;
|
|
3717
|
+
}
|
|
3718
|
+
.SideNav_collapsed__NTBlM {
|
|
3719
|
+
width: 68px;
|
|
3720
|
+
transition: width 0.2s ease-in-out;
|
|
3697
3721
|
}
|
|
3698
3722
|
|
|
3699
3723
|
/* virtual-css:css:02d4c53a13519acb012573b18f89110d */
|
|
@@ -3788,34 +3812,32 @@ body a.Button_button__NmQ1Z {
|
|
|
3788
3812
|
}
|
|
3789
3813
|
|
|
3790
3814
|
/* virtual-css:css:25b38ea4838450cf917453747a735c4a */
|
|
3791
|
-
.
|
|
3792
|
-
font-size: var(--font-size);
|
|
3793
|
-
color: var(--font-color);
|
|
3815
|
+
.StatusLight_statuslight__MTliM {
|
|
3794
3816
|
display: inline-flex;
|
|
3795
3817
|
align-items: center;
|
|
3796
3818
|
gap: 12px;
|
|
3797
3819
|
}
|
|
3798
|
-
.
|
|
3799
|
-
.
|
|
3820
|
+
.StatusLight_status__MDNmO,
|
|
3821
|
+
.StatusLight_bg__MjVjN {
|
|
3800
3822
|
width: 10px;
|
|
3801
3823
|
height: 10px;
|
|
3802
3824
|
border-radius: 100%;
|
|
3803
3825
|
background: #fff;
|
|
3804
3826
|
position: relative;
|
|
3805
3827
|
}
|
|
3806
|
-
.
|
|
3828
|
+
.StatusLight_status__MDNmO.StatusLight_success__ZWI1N {
|
|
3807
3829
|
background: var(--success-color);
|
|
3808
3830
|
}
|
|
3809
|
-
.
|
|
3831
|
+
.StatusLight_status__MDNmO.StatusLight_warning__YWRmM {
|
|
3810
3832
|
background: var(--warning-color);
|
|
3811
3833
|
}
|
|
3812
|
-
.
|
|
3834
|
+
.StatusLight_status__MDNmO.StatusLight_error__NjdjM {
|
|
3813
3835
|
background: var(--danger-color);
|
|
3814
3836
|
}
|
|
3815
|
-
.
|
|
3837
|
+
.StatusLight_status__MDNmO.StatusLight_active__NGZiY {
|
|
3816
3838
|
background: var(--active-color);
|
|
3817
3839
|
}
|
|
3818
|
-
.
|
|
3840
|
+
.StatusLight_status__MDNmO.StatusLight_inactive__NDI0Z {
|
|
3819
3841
|
background: var(--inactive-color);
|
|
3820
3842
|
}
|
|
3821
3843
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
// ../../react-hook-form
|
|
6
6
|
// ../../@/lib/types
|
|
7
7
|
// ../../@/components/toast/Toaster
|
|
8
|
+
// ../../@/components/Tooltip
|
|
8
9
|
// ../../@/components/Block
|
|
9
10
|
|
|
10
11
|
declare module '@umami/react-zen' {
|
|
11
|
-
import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider } from 'react-aria-components';
|
|
12
|
+
import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider, Focusable, Pressable } from 'react-aria-components';
|
|
12
13
|
import { Form } from '@umami/react-zen/forms/Form';
|
|
13
14
|
import { FormButtons } from '@umami/react-zen/forms/FormButtons';
|
|
14
15
|
import { FormField } from '@umami/react-zen/forms/FormField';
|
|
@@ -39,6 +40,7 @@ declare module '@umami/react-zen' {
|
|
|
39
40
|
import { DataTable, DataColumn } from '@umami/react-zen/DataTable';
|
|
40
41
|
import { Dots } from '@umami/react-zen/Dots';
|
|
41
42
|
import { Flexbox } from '@umami/react-zen/Flexbox';
|
|
43
|
+
import { FloatingTooltip } from '@umami/react-zen/FloatingTooltip';
|
|
42
44
|
import { Grid } from '@umami/react-zen/Grid';
|
|
43
45
|
import { Heading } from '@umami/react-zen/Heading';
|
|
44
46
|
import { HoverTrigger } from '@umami/react-zen/HoverTrigger';
|
|
@@ -75,9 +77,9 @@ declare module '@umami/react-zen' {
|
|
|
75
77
|
import { ThemeButton } from '@umami/react-zen/ThemeButton';
|
|
76
78
|
import { Toggle } from '@umami/react-zen/Toggle';
|
|
77
79
|
import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
|
|
78
|
-
import { Tooltip } from '@umami/react-zen/Tooltip';
|
|
80
|
+
import { Tooltip, TooltipBubble } from '@umami/react-zen/Tooltip';
|
|
79
81
|
import { ZenProvider } from '@umami/react-zen/ZenProvider';
|
|
80
|
-
export { useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Block, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Form, FormButtons, FormField, FormResetButton, FormSubmitButton, Grid, NavBar, NavBarItem, Heading, HoverTrigger, Icon, Icons, Image, InlineEditField, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Modal, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, RouterProvider, SearchField, Select, SideNav, SideNavHeader, SideNavItem, SideNavSection, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toast, Toaster, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
|
|
82
|
+
export { useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Block, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, FloatingTooltip, Focusable, Form, FormButtons, FormField, FormResetButton, FormSubmitButton, Grid, NavBar, NavBarItem, Heading, HoverTrigger, Icon, Icons, Image, InlineEditField, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Modal, PasswordField, Popover, Pressable, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, RouterProvider, SearchField, Select, SideNav, SideNavHeader, SideNavItem, SideNavSection, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toast, Toaster, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, TooltipTrigger, ZenProvider, };
|
|
81
83
|
}
|
|
82
84
|
|
|
83
85
|
declare module '@umami/react-zen/forms/Form' {
|
|
@@ -280,11 +282,13 @@ declare module '@umami/react-zen/Blockquote' {
|
|
|
280
282
|
|
|
281
283
|
declare module '@umami/react-zen/Box' {
|
|
282
284
|
import { HTMLAttributes } from 'react';
|
|
283
|
-
import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor } from '@/lib/types';
|
|
285
|
+
import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor, FontSize, FontWeight } from '@/lib/types';
|
|
284
286
|
interface BoxProps extends HTMLAttributes<HTMLElement> {
|
|
285
287
|
display?: Responsive<Display>;
|
|
286
288
|
color?: FontColor;
|
|
287
289
|
backgroundColor?: BackgroundColor;
|
|
290
|
+
fontSize?: Responsive<FontSize>;
|
|
291
|
+
fontWeight?: Responsive<FontWeight>;
|
|
288
292
|
borderSize?: Responsive<BorderSize>;
|
|
289
293
|
borderRadius?: Responsive<BorderRadius>;
|
|
290
294
|
shadow?: Responsive<BoxShadow>;
|
|
@@ -329,7 +333,7 @@ declare module '@umami/react-zen/Box' {
|
|
|
329
333
|
as?: string;
|
|
330
334
|
asChild?: boolean;
|
|
331
335
|
}
|
|
332
|
-
function Box({ display, color, backgroundColor, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
|
|
336
|
+
function Box({ display, color, backgroundColor, fontSize, fontWeight, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
|
|
333
337
|
export { Box };
|
|
334
338
|
export type { BoxProps };
|
|
335
339
|
}
|
|
@@ -485,6 +489,13 @@ declare module '@umami/react-zen/Flexbox' {
|
|
|
485
489
|
export function Flexbox({ display, direction, wrap, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, className, style, children, ...props }: FlexboxProps): import("react").JSX.Element;
|
|
486
490
|
}
|
|
487
491
|
|
|
492
|
+
declare module '@umami/react-zen/FloatingTooltip' {
|
|
493
|
+
import { TooltipBubbleProps } from '@/components/Tooltip';
|
|
494
|
+
export interface FloatingTooltipProps extends TooltipBubbleProps {
|
|
495
|
+
}
|
|
496
|
+
export function FloatingTooltip({ className, style, children, ...props }: FloatingTooltipProps): import("react").JSX.Element;
|
|
497
|
+
}
|
|
498
|
+
|
|
488
499
|
declare module '@umami/react-zen/Grid' {
|
|
489
500
|
import { GridDisplay, GridAutoFlow, Responsive, Spacing, GridTemplateRows, GridTemplateColumns, GridTemplateAreas, AlignContent, AlignItems, JustifyContent, JustifyItems } from '@/lib/types';
|
|
490
501
|
import { BoxProps } from '@umami/react-zen/Box';
|
|
@@ -586,6 +597,7 @@ declare module '@umami/react-zen/Image' {
|
|
|
586
597
|
declare module '@umami/react-zen/InlineEditField' {
|
|
587
598
|
import { ReactNode } from 'react';
|
|
588
599
|
interface InlineEditFieldProps {
|
|
600
|
+
name?: string;
|
|
589
601
|
value: string;
|
|
590
602
|
defaultEdit?: boolean;
|
|
591
603
|
onChange?: (value: string) => void;
|
|
@@ -594,7 +606,7 @@ declare module '@umami/react-zen/InlineEditField' {
|
|
|
594
606
|
className?: string;
|
|
595
607
|
children?: ReactNode;
|
|
596
608
|
}
|
|
597
|
-
function InlineEditField({ value: defaultValue, defaultEdit, className, children, onChange, onCommit, onCancel, ...props }: InlineEditFieldProps): import("react").JSX.Element;
|
|
609
|
+
function InlineEditField({ name, value: defaultValue, defaultEdit, className, children, onChange, onCommit, onCancel, ...props }: InlineEditFieldProps): import("react").JSX.Element;
|
|
598
610
|
export { InlineEditField };
|
|
599
611
|
export type { InlineEditFieldProps };
|
|
600
612
|
}
|
|
@@ -959,10 +971,18 @@ declare module '@umami/react-zen/ToggleGroup' {
|
|
|
959
971
|
}
|
|
960
972
|
|
|
961
973
|
declare module '@umami/react-zen/Tooltip' {
|
|
962
|
-
import {
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
974
|
+
import { HTMLAttributes } from 'react';
|
|
975
|
+
import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
|
|
976
|
+
interface TooltipProps extends AriaTooltipProps {
|
|
977
|
+
showArrow?: boolean;
|
|
978
|
+
}
|
|
979
|
+
function Tooltip({ children, className, showArrow, ...props }: TooltipProps): import("react").JSX.Element;
|
|
980
|
+
interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
|
|
981
|
+
showArrow?: boolean;
|
|
982
|
+
}
|
|
983
|
+
function TooltipBubble({ showArrow, children, ...props }: TooltipBubbleProps): import("react").JSX.Element;
|
|
984
|
+
export { Tooltip, TooltipBubble };
|
|
985
|
+
export type { TooltipProps, TooltipBubbleProps };
|
|
966
986
|
}
|
|
967
987
|
|
|
968
988
|
declare module '@umami/react-zen/ZenProvider' {
|