@mirohq/design-system-select 0.1.0-select.0 → 0.1.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/main.js +274 -23
- package/dist/main.js.map +1 -1
- package/dist/module.js +276 -25
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +147 -489
- package/package.json +7 -3
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
3
|
+
import { Booleanish } from '@mirohq/design-system-types';
|
|
3
4
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
5
|
import { StrictComponentProps } from '@mirohq/design-system-stitches';
|
|
5
6
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
6
7
|
import * as _radix_ui_react_select from '@radix-ui/react-select';
|
|
8
|
+
import { Value as Value$1 } from '@radix-ui/react-select';
|
|
7
9
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
8
10
|
import { CSSProperties } from '@stitches/react';
|
|
9
11
|
|
|
@@ -95,17 +97,26 @@ declare const StyledSelect: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
95
97
|
"background-neutrals-page"?: any;
|
|
96
98
|
"background-neutrals-page-subtle"?: any;
|
|
97
99
|
"background-neutrals-scrolls"?: any;
|
|
100
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
98
101
|
"background-neutrals-scrolls-hover"?: any;
|
|
102
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
103
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
99
104
|
"background-neutrals-subtle"?: any;
|
|
100
105
|
"background-neutrals-subtle-active"?: any;
|
|
101
106
|
"background-neutrals-subtle-hover"?: any;
|
|
102
107
|
"background-primary-prominent"?: any;
|
|
103
108
|
"background-primary-prominent-active"?: any;
|
|
109
|
+
"background-primary-prominent-expanded"?: any;
|
|
104
110
|
"background-primary-prominent-hover"?: any;
|
|
111
|
+
"background-primary-prominent-pressed"?: any;
|
|
112
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
105
113
|
"background-primary-prominent-selected"?: any;
|
|
106
114
|
"background-primary-subtle"?: any;
|
|
107
115
|
"background-primary-subtle-active"?: any;
|
|
116
|
+
"background-primary-subtle-expanded"?: any;
|
|
108
117
|
"background-primary-subtle-hover"?: any;
|
|
118
|
+
"background-primary-subtle-pressed"?: any;
|
|
119
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
109
120
|
"background-primary-subtle-selected"?: any;
|
|
110
121
|
"background-success"?: any;
|
|
111
122
|
"background-warning-prominent"?: any;
|
|
@@ -210,6 +221,7 @@ declare const StyledSelect: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
210
221
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
211
222
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
212
223
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
224
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
213
225
|
};
|
|
214
226
|
sizes: {
|
|
215
227
|
readonly number: string;
|
|
@@ -227,6 +239,7 @@ declare const StyledSelect: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
227
239
|
readonly 400: "32px";
|
|
228
240
|
readonly 500: "40px";
|
|
229
241
|
readonly 600: "48px";
|
|
242
|
+
readonly 700: "56px";
|
|
230
243
|
readonly 800: "64px";
|
|
231
244
|
readonly 1200: "96px";
|
|
232
245
|
readonly 1600: "128px";
|
|
@@ -278,8 +291,9 @@ declare const StyledSelect: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
278
291
|
};
|
|
279
292
|
'z-indices': {
|
|
280
293
|
readonly dropdownMenu: 100;
|
|
281
|
-
readonly
|
|
282
|
-
readonly
|
|
294
|
+
readonly select: 200;
|
|
295
|
+
readonly popover: 300;
|
|
296
|
+
readonly tooltip: 400;
|
|
283
297
|
};
|
|
284
298
|
}, {
|
|
285
299
|
readonly background: "colors";
|
|
@@ -556,17 +570,26 @@ declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
556
570
|
"background-neutrals-page"?: any;
|
|
557
571
|
"background-neutrals-page-subtle"?: any;
|
|
558
572
|
"background-neutrals-scrolls"?: any;
|
|
573
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
559
574
|
"background-neutrals-scrolls-hover"?: any;
|
|
575
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
576
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
560
577
|
"background-neutrals-subtle"?: any;
|
|
561
578
|
"background-neutrals-subtle-active"?: any;
|
|
562
579
|
"background-neutrals-subtle-hover"?: any;
|
|
563
580
|
"background-primary-prominent"?: any;
|
|
564
581
|
"background-primary-prominent-active"?: any;
|
|
582
|
+
"background-primary-prominent-expanded"?: any;
|
|
565
583
|
"background-primary-prominent-hover"?: any;
|
|
584
|
+
"background-primary-prominent-pressed"?: any;
|
|
585
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
566
586
|
"background-primary-prominent-selected"?: any;
|
|
567
587
|
"background-primary-subtle"?: any;
|
|
568
588
|
"background-primary-subtle-active"?: any;
|
|
589
|
+
"background-primary-subtle-expanded"?: any;
|
|
569
590
|
"background-primary-subtle-hover"?: any;
|
|
591
|
+
"background-primary-subtle-pressed"?: any;
|
|
592
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
570
593
|
"background-primary-subtle-selected"?: any;
|
|
571
594
|
"background-success"?: any;
|
|
572
595
|
"background-warning-prominent"?: any;
|
|
@@ -671,6 +694,7 @@ declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
671
694
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
672
695
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
673
696
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
697
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
674
698
|
};
|
|
675
699
|
sizes: {
|
|
676
700
|
readonly number: string;
|
|
@@ -688,6 +712,7 @@ declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
688
712
|
readonly 400: "32px";
|
|
689
713
|
readonly 500: "40px";
|
|
690
714
|
readonly 600: "48px";
|
|
715
|
+
readonly 700: "56px";
|
|
691
716
|
readonly 800: "64px";
|
|
692
717
|
readonly 1200: "96px";
|
|
693
718
|
readonly 1600: "128px";
|
|
@@ -739,8 +764,9 @@ declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
739
764
|
};
|
|
740
765
|
'z-indices': {
|
|
741
766
|
readonly dropdownMenu: 100;
|
|
742
|
-
readonly
|
|
743
|
-
readonly
|
|
767
|
+
readonly select: 200;
|
|
768
|
+
readonly popover: 300;
|
|
769
|
+
readonly tooltip: 400;
|
|
744
770
|
};
|
|
745
771
|
}, {
|
|
746
772
|
readonly background: "colors";
|
|
@@ -1021,17 +1047,26 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{}, never> &
|
|
|
1021
1047
|
"background-neutrals-page"?: any;
|
|
1022
1048
|
"background-neutrals-page-subtle"?: any;
|
|
1023
1049
|
"background-neutrals-scrolls"?: any;
|
|
1050
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
1024
1051
|
"background-neutrals-scrolls-hover"?: any;
|
|
1052
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
1053
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1025
1054
|
"background-neutrals-subtle"?: any;
|
|
1026
1055
|
"background-neutrals-subtle-active"?: any;
|
|
1027
1056
|
"background-neutrals-subtle-hover"?: any;
|
|
1028
1057
|
"background-primary-prominent"?: any;
|
|
1029
1058
|
"background-primary-prominent-active"?: any;
|
|
1059
|
+
"background-primary-prominent-expanded"?: any;
|
|
1030
1060
|
"background-primary-prominent-hover"?: any;
|
|
1061
|
+
"background-primary-prominent-pressed"?: any;
|
|
1062
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
1031
1063
|
"background-primary-prominent-selected"?: any;
|
|
1032
1064
|
"background-primary-subtle"?: any;
|
|
1033
1065
|
"background-primary-subtle-active"?: any;
|
|
1066
|
+
"background-primary-subtle-expanded"?: any;
|
|
1034
1067
|
"background-primary-subtle-hover"?: any;
|
|
1068
|
+
"background-primary-subtle-pressed"?: any;
|
|
1069
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
1035
1070
|
"background-primary-subtle-selected"?: any;
|
|
1036
1071
|
"background-success"?: any;
|
|
1037
1072
|
"background-warning-prominent"?: any;
|
|
@@ -1136,6 +1171,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{}, never> &
|
|
|
1136
1171
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
1137
1172
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
1138
1173
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
1174
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
1139
1175
|
};
|
|
1140
1176
|
sizes: {
|
|
1141
1177
|
readonly number: string;
|
|
@@ -1153,6 +1189,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{}, never> &
|
|
|
1153
1189
|
readonly 400: "32px";
|
|
1154
1190
|
readonly 500: "40px";
|
|
1155
1191
|
readonly 600: "48px";
|
|
1192
|
+
readonly 700: "56px";
|
|
1156
1193
|
readonly 800: "64px";
|
|
1157
1194
|
readonly 1200: "96px";
|
|
1158
1195
|
readonly 1600: "128px";
|
|
@@ -1204,8 +1241,9 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{}, never> &
|
|
|
1204
1241
|
};
|
|
1205
1242
|
'z-indices': {
|
|
1206
1243
|
readonly dropdownMenu: 100;
|
|
1207
|
-
readonly
|
|
1208
|
-
readonly
|
|
1244
|
+
readonly select: 200;
|
|
1245
|
+
readonly popover: 300;
|
|
1246
|
+
readonly tooltip: 400;
|
|
1209
1247
|
};
|
|
1210
1248
|
}, {
|
|
1211
1249
|
readonly background: "colors";
|
|
@@ -1500,17 +1538,26 @@ declare const StyledPortal: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
1500
1538
|
"background-neutrals-page"?: any;
|
|
1501
1539
|
"background-neutrals-page-subtle"?: any;
|
|
1502
1540
|
"background-neutrals-scrolls"?: any;
|
|
1541
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
1503
1542
|
"background-neutrals-scrolls-hover"?: any;
|
|
1543
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
1544
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1504
1545
|
"background-neutrals-subtle"?: any;
|
|
1505
1546
|
"background-neutrals-subtle-active"?: any;
|
|
1506
1547
|
"background-neutrals-subtle-hover"?: any;
|
|
1507
1548
|
"background-primary-prominent"?: any;
|
|
1508
1549
|
"background-primary-prominent-active"?: any;
|
|
1550
|
+
"background-primary-prominent-expanded"?: any;
|
|
1509
1551
|
"background-primary-prominent-hover"?: any;
|
|
1552
|
+
"background-primary-prominent-pressed"?: any;
|
|
1553
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
1510
1554
|
"background-primary-prominent-selected"?: any;
|
|
1511
1555
|
"background-primary-subtle"?: any;
|
|
1512
1556
|
"background-primary-subtle-active"?: any;
|
|
1557
|
+
"background-primary-subtle-expanded"?: any;
|
|
1513
1558
|
"background-primary-subtle-hover"?: any;
|
|
1559
|
+
"background-primary-subtle-pressed"?: any;
|
|
1560
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
1514
1561
|
"background-primary-subtle-selected"?: any;
|
|
1515
1562
|
"background-success"?: any;
|
|
1516
1563
|
"background-warning-prominent"?: any;
|
|
@@ -1615,6 +1662,7 @@ declare const StyledPortal: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
1615
1662
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
1616
1663
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
1617
1664
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
1665
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
1618
1666
|
};
|
|
1619
1667
|
sizes: {
|
|
1620
1668
|
readonly number: string;
|
|
@@ -1632,6 +1680,7 @@ declare const StyledPortal: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
1632
1680
|
readonly 400: "32px";
|
|
1633
1681
|
readonly 500: "40px";
|
|
1634
1682
|
readonly 600: "48px";
|
|
1683
|
+
readonly 700: "56px";
|
|
1635
1684
|
readonly 800: "64px";
|
|
1636
1685
|
readonly 1200: "96px";
|
|
1637
1686
|
readonly 1600: "128px";
|
|
@@ -1683,8 +1732,9 @@ declare const StyledPortal: react.ForwardRefExoticComponent<Omit<{}, never> & _s
|
|
|
1683
1732
|
};
|
|
1684
1733
|
'z-indices': {
|
|
1685
1734
|
readonly dropdownMenu: 100;
|
|
1686
|
-
readonly
|
|
1687
|
-
readonly
|
|
1735
|
+
readonly select: 200;
|
|
1736
|
+
readonly popover: 300;
|
|
1737
|
+
readonly tooltip: 400;
|
|
1688
1738
|
};
|
|
1689
1739
|
}, {
|
|
1690
1740
|
readonly background: "colors";
|
|
@@ -1881,7 +1931,11 @@ interface PortalProps extends StyledPortalProps {
|
|
|
1881
1931
|
}
|
|
1882
1932
|
declare const Portal: react__default.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & react__default.RefAttributes<never>>;
|
|
1883
1933
|
|
|
1884
|
-
declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
1934
|
+
declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
1935
|
+
size?: "medium" | "large" | undefined;
|
|
1936
|
+
}, "size"> & _stitches_react_types_styled_component.TransformProps<{
|
|
1937
|
+
size?: "medium" | "large" | undefined;
|
|
1938
|
+
}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "css"> & _stitches_react_types_styled_component.TransformProps<{}, {}> & {
|
|
1885
1939
|
css?: _stitches_react_types_css_util.CSS<{}, {
|
|
1886
1940
|
'border-widths': {
|
|
1887
1941
|
readonly none: 0;
|
|
@@ -1969,17 +2023,26 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
1969
2023
|
"background-neutrals-page"?: any;
|
|
1970
2024
|
"background-neutrals-page-subtle"?: any;
|
|
1971
2025
|
"background-neutrals-scrolls"?: any;
|
|
2026
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
1972
2027
|
"background-neutrals-scrolls-hover"?: any;
|
|
2028
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
2029
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1973
2030
|
"background-neutrals-subtle"?: any;
|
|
1974
2031
|
"background-neutrals-subtle-active"?: any;
|
|
1975
2032
|
"background-neutrals-subtle-hover"?: any;
|
|
1976
2033
|
"background-primary-prominent"?: any;
|
|
1977
2034
|
"background-primary-prominent-active"?: any;
|
|
2035
|
+
"background-primary-prominent-expanded"?: any;
|
|
1978
2036
|
"background-primary-prominent-hover"?: any;
|
|
2037
|
+
"background-primary-prominent-pressed"?: any;
|
|
2038
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
1979
2039
|
"background-primary-prominent-selected"?: any;
|
|
1980
2040
|
"background-primary-subtle"?: any;
|
|
1981
2041
|
"background-primary-subtle-active"?: any;
|
|
2042
|
+
"background-primary-subtle-expanded"?: any;
|
|
1982
2043
|
"background-primary-subtle-hover"?: any;
|
|
2044
|
+
"background-primary-subtle-pressed"?: any;
|
|
2045
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
1983
2046
|
"background-primary-subtle-selected"?: any;
|
|
1984
2047
|
"background-success"?: any;
|
|
1985
2048
|
"background-warning-prominent"?: any;
|
|
@@ -2084,6 +2147,7 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
2084
2147
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
2085
2148
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
2086
2149
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
2150
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
2087
2151
|
};
|
|
2088
2152
|
sizes: {
|
|
2089
2153
|
readonly number: string;
|
|
@@ -2101,6 +2165,7 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
2101
2165
|
readonly 400: "32px";
|
|
2102
2166
|
readonly 500: "40px";
|
|
2103
2167
|
readonly 600: "48px";
|
|
2168
|
+
readonly 700: "56px";
|
|
2104
2169
|
readonly 800: "64px";
|
|
2105
2170
|
readonly 1200: "96px";
|
|
2106
2171
|
readonly 1600: "128px";
|
|
@@ -2152,8 +2217,9 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
2152
2217
|
};
|
|
2153
2218
|
'z-indices': {
|
|
2154
2219
|
readonly dropdownMenu: 100;
|
|
2155
|
-
readonly
|
|
2156
|
-
readonly
|
|
2220
|
+
readonly select: 200;
|
|
2221
|
+
readonly popover: 300;
|
|
2222
|
+
readonly tooltip: 400;
|
|
2157
2223
|
};
|
|
2158
2224
|
}, {
|
|
2159
2225
|
readonly background: "colors";
|
|
@@ -2339,475 +2405,20 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
2339
2405
|
}> | undefined;
|
|
2340
2406
|
}> & {
|
|
2341
2407
|
children?: react.ReactNode;
|
|
2342
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
2408
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
2409
|
+
size?: "medium" | "large" | undefined;
|
|
2410
|
+
}, {}>;
|
|
2343
2411
|
declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
|
|
2344
2412
|
|
|
2345
2413
|
interface TriggerProps extends StyledTriggerProps {
|
|
2414
|
+
/**
|
|
2415
|
+
* The content.
|
|
2416
|
+
*/
|
|
2346
2417
|
children: react__default.ReactNode;
|
|
2347
2418
|
}
|
|
2348
2419
|
declare const Trigger: react__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
|
|
2349
2420
|
|
|
2350
|
-
declare
|
|
2351
|
-
css?: _stitches_react_types_css_util.CSS<{}, {
|
|
2352
|
-
'border-widths': {
|
|
2353
|
-
readonly none: 0;
|
|
2354
|
-
readonly sm: "1px";
|
|
2355
|
-
readonly md: "2px";
|
|
2356
|
-
readonly lg: "4px";
|
|
2357
|
-
};
|
|
2358
|
-
colors: {
|
|
2359
|
-
readonly black: any;
|
|
2360
|
-
readonly 'blue-100': any;
|
|
2361
|
-
readonly 'blue-200': any;
|
|
2362
|
-
readonly 'blue-300': any;
|
|
2363
|
-
readonly 'blue-400': any;
|
|
2364
|
-
readonly 'blue-500': any;
|
|
2365
|
-
readonly 'blue-600': any;
|
|
2366
|
-
readonly 'blue-700': any;
|
|
2367
|
-
readonly 'blue-800': any;
|
|
2368
|
-
readonly 'blue-900': any;
|
|
2369
|
-
readonly 'blue-1000': any;
|
|
2370
|
-
readonly 'gray-100': any;
|
|
2371
|
-
readonly 'gray-200': any;
|
|
2372
|
-
readonly 'gray-300': any;
|
|
2373
|
-
readonly 'gray-400': any;
|
|
2374
|
-
readonly 'gray-500': any;
|
|
2375
|
-
readonly 'gray-600': any;
|
|
2376
|
-
readonly 'gray-700': any;
|
|
2377
|
-
readonly 'gray-800': any;
|
|
2378
|
-
readonly 'gray-900': any;
|
|
2379
|
-
readonly 'green-100': any;
|
|
2380
|
-
readonly 'green-200': any;
|
|
2381
|
-
readonly 'green-300': any;
|
|
2382
|
-
readonly 'green-400': any;
|
|
2383
|
-
readonly 'green-500': any;
|
|
2384
|
-
readonly 'green-600': any;
|
|
2385
|
-
readonly 'green-700': any;
|
|
2386
|
-
readonly 'green-800': any;
|
|
2387
|
-
readonly 'green-900': any;
|
|
2388
|
-
readonly 'indigo-100': any;
|
|
2389
|
-
readonly 'indigo-200': any;
|
|
2390
|
-
readonly 'indigo-300': any;
|
|
2391
|
-
readonly 'indigo-400': any;
|
|
2392
|
-
readonly 'indigo-500': any;
|
|
2393
|
-
readonly 'indigo-600': any;
|
|
2394
|
-
readonly 'indigo-700': any;
|
|
2395
|
-
readonly 'indigo-800': any;
|
|
2396
|
-
readonly 'indigo-900': any;
|
|
2397
|
-
readonly 'red-100': any;
|
|
2398
|
-
readonly 'red-200': any;
|
|
2399
|
-
readonly 'red-300': any;
|
|
2400
|
-
readonly 'red-400': any;
|
|
2401
|
-
readonly 'red-500': any;
|
|
2402
|
-
readonly 'red-600': any;
|
|
2403
|
-
readonly 'red-700': any;
|
|
2404
|
-
readonly 'red-800': any;
|
|
2405
|
-
readonly 'red-900': any;
|
|
2406
|
-
readonly transparent: any;
|
|
2407
|
-
readonly white: any;
|
|
2408
|
-
readonly 'yellow-100': any;
|
|
2409
|
-
readonly 'yellow-200': any;
|
|
2410
|
-
readonly 'yellow-300': any;
|
|
2411
|
-
readonly 'yellow-400': any;
|
|
2412
|
-
readonly 'yellow-500': any;
|
|
2413
|
-
readonly 'yellow-600': any;
|
|
2414
|
-
readonly 'yellow-700': any;
|
|
2415
|
-
readonly 'yellow-800': any;
|
|
2416
|
-
readonly 'yellow-900': any;
|
|
2417
|
-
"background-alpha-active"?: any;
|
|
2418
|
-
"background-alpha-hover"?: any;
|
|
2419
|
-
"background-danger-prominent"?: any;
|
|
2420
|
-
"background-danger-prominent-active"?: any;
|
|
2421
|
-
"background-danger-prominent-hover"?: any;
|
|
2422
|
-
"background-danger-subtle"?: any;
|
|
2423
|
-
"background-danger-subtle-active"?: any;
|
|
2424
|
-
"background-danger-subtle-hover"?: any;
|
|
2425
|
-
"background-neutrals"?: any;
|
|
2426
|
-
"background-neutrals-active"?: any;
|
|
2427
|
-
"background-neutrals-container"?: any;
|
|
2428
|
-
"background-neutrals-controls-disabled"?: any;
|
|
2429
|
-
"background-neutrals-disabled"?: any;
|
|
2430
|
-
"background-neutrals-hover"?: any;
|
|
2431
|
-
"background-neutrals-inactive"?: any;
|
|
2432
|
-
"background-neutrals-inactive-hover"?: any;
|
|
2433
|
-
"background-neutrals-inverted"?: any;
|
|
2434
|
-
"background-neutrals-inverted-subtle"?: any;
|
|
2435
|
-
"background-neutrals-page"?: any;
|
|
2436
|
-
"background-neutrals-page-subtle"?: any;
|
|
2437
|
-
"background-neutrals-scrolls"?: any;
|
|
2438
|
-
"background-neutrals-scrolls-hover"?: any;
|
|
2439
|
-
"background-neutrals-subtle"?: any;
|
|
2440
|
-
"background-neutrals-subtle-active"?: any;
|
|
2441
|
-
"background-neutrals-subtle-hover"?: any;
|
|
2442
|
-
"background-primary-prominent"?: any;
|
|
2443
|
-
"background-primary-prominent-active"?: any;
|
|
2444
|
-
"background-primary-prominent-hover"?: any;
|
|
2445
|
-
"background-primary-prominent-selected"?: any;
|
|
2446
|
-
"background-primary-subtle"?: any;
|
|
2447
|
-
"background-primary-subtle-active"?: any;
|
|
2448
|
-
"background-primary-subtle-hover"?: any;
|
|
2449
|
-
"background-primary-subtle-selected"?: any;
|
|
2450
|
-
"background-success"?: any;
|
|
2451
|
-
"background-warning-prominent"?: any;
|
|
2452
|
-
"background-warning-subtle"?: any;
|
|
2453
|
-
"border-danger"?: any;
|
|
2454
|
-
"border-danger-active"?: any;
|
|
2455
|
-
"border-danger-hover"?: any;
|
|
2456
|
-
"border-focus-inner"?: any;
|
|
2457
|
-
"border-focus-middle"?: any;
|
|
2458
|
-
"border-focus-outer"?: any;
|
|
2459
|
-
"border-neutrals"?: any;
|
|
2460
|
-
"border-neutrals-active"?: any;
|
|
2461
|
-
"border-neutrals-controls"?: any;
|
|
2462
|
-
"border-neutrals-controls-disabled"?: any;
|
|
2463
|
-
"border-neutrals-disabled"?: any;
|
|
2464
|
-
"border-neutrals-hover"?: any;
|
|
2465
|
-
"border-neutrals-inverted"?: any;
|
|
2466
|
-
"border-neutrals-subtle"?: any;
|
|
2467
|
-
"border-neutrals-text"?: any;
|
|
2468
|
-
"border-neutrals-text-active"?: any;
|
|
2469
|
-
"border-neutrals-text-hover"?: any;
|
|
2470
|
-
"border-neutrals-text-subtle"?: any;
|
|
2471
|
-
"border-neutrals-text-subtle-active"?: any;
|
|
2472
|
-
"border-neutrals-text-subtle-hover"?: any;
|
|
2473
|
-
"border-neutrals-transparent"?: any;
|
|
2474
|
-
"border-primary"?: any;
|
|
2475
|
-
"border-primary-active"?: any;
|
|
2476
|
-
"border-primary-hover"?: any;
|
|
2477
|
-
"border-primary-inverted"?: any;
|
|
2478
|
-
"border-success"?: any;
|
|
2479
|
-
"border-warning"?: any;
|
|
2480
|
-
"icon-danger"?: any;
|
|
2481
|
-
"icon-danger-active"?: any;
|
|
2482
|
-
"icon-danger-hover"?: any;
|
|
2483
|
-
"icon-danger-inverted"?: any;
|
|
2484
|
-
"icon-neutrals"?: any;
|
|
2485
|
-
"icon-neutrals-disabled"?: any;
|
|
2486
|
-
"icon-neutrals-inactive"?: any;
|
|
2487
|
-
"icon-neutrals-inactive-hover"?: any;
|
|
2488
|
-
"icon-neutrals-inverted"?: any;
|
|
2489
|
-
"icon-neutrals-search"?: any;
|
|
2490
|
-
"icon-neutrals-subtle"?: any;
|
|
2491
|
-
"icon-neutrals-text"?: any;
|
|
2492
|
-
"icon-primary"?: any;
|
|
2493
|
-
"icon-primary-active"?: any;
|
|
2494
|
-
"icon-primary-hover"?: any;
|
|
2495
|
-
"icon-primary-inverted"?: any;
|
|
2496
|
-
"icon-primary-selected"?: any;
|
|
2497
|
-
"icon-success"?: any;
|
|
2498
|
-
"icon-success-inverted"?: any;
|
|
2499
|
-
"icon-warning"?: any;
|
|
2500
|
-
"icon-warning-prominent"?: any;
|
|
2501
|
-
"text-danger"?: any;
|
|
2502
|
-
"text-danger-active"?: any;
|
|
2503
|
-
"text-danger-hover"?: any;
|
|
2504
|
-
"text-danger-inverted"?: any;
|
|
2505
|
-
"text-neutrals"?: any;
|
|
2506
|
-
"text-neutrals-active"?: any;
|
|
2507
|
-
"text-neutrals-disabled"?: any;
|
|
2508
|
-
"text-neutrals-hover"?: any;
|
|
2509
|
-
"text-neutrals-inverted"?: any;
|
|
2510
|
-
"text-neutrals-placeholder"?: any;
|
|
2511
|
-
"text-neutrals-placeholder-only"?: any;
|
|
2512
|
-
"text-neutrals-subtle"?: any;
|
|
2513
|
-
"text-neutrals-subtle-active"?: any;
|
|
2514
|
-
"text-neutrals-subtle-hover"?: any;
|
|
2515
|
-
"text-primary"?: any;
|
|
2516
|
-
"text-primary-active"?: any;
|
|
2517
|
-
"text-primary-hover"?: any;
|
|
2518
|
-
"text-primary-inverted"?: any;
|
|
2519
|
-
"text-primary-inverted-subtle"?: any;
|
|
2520
|
-
"text-primary-selected"?: any;
|
|
2521
|
-
"text-success"?: any;
|
|
2522
|
-
"text-warning"?: any;
|
|
2523
|
-
};
|
|
2524
|
-
'font-sizes': {
|
|
2525
|
-
readonly 150: "0.75rem";
|
|
2526
|
-
readonly 175: "0.875rem";
|
|
2527
|
-
readonly 200: "1rem";
|
|
2528
|
-
readonly 225: "1.125rem";
|
|
2529
|
-
readonly 250: "1.25rem";
|
|
2530
|
-
readonly 300: "1.5rem";
|
|
2531
|
-
readonly 400: "2rem";
|
|
2532
|
-
readonly 500: "2.5rem";
|
|
2533
|
-
readonly 600: "3rem";
|
|
2534
|
-
readonly 800: "4rem";
|
|
2535
|
-
readonly 900: "4.5rem";
|
|
2536
|
-
};
|
|
2537
|
-
radii: {
|
|
2538
|
-
readonly none: 0;
|
|
2539
|
-
readonly half: "999em";
|
|
2540
|
-
readonly 25: "2px";
|
|
2541
|
-
readonly 50: "4px";
|
|
2542
|
-
readonly 75: "6px";
|
|
2543
|
-
readonly 100: "8px";
|
|
2544
|
-
readonly 200: "16px";
|
|
2545
|
-
};
|
|
2546
|
-
shadows: {
|
|
2547
|
-
readonly 50: "0 4px 16px #05003812";
|
|
2548
|
-
readonly 100: "0 8px 32px #05003808";
|
|
2549
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
2550
|
-
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
2551
|
-
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
2552
|
-
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
2553
|
-
};
|
|
2554
|
-
sizes: {
|
|
2555
|
-
readonly number: string;
|
|
2556
|
-
readonly 'icon-200': "16px";
|
|
2557
|
-
readonly 'icon-300': "24px";
|
|
2558
|
-
readonly 'icon-400': "32px";
|
|
2559
|
-
};
|
|
2560
|
-
space: {
|
|
2561
|
-
readonly 0: 0;
|
|
2562
|
-
readonly 50: "4px";
|
|
2563
|
-
readonly 100: "8px";
|
|
2564
|
-
readonly 150: "12px";
|
|
2565
|
-
readonly 200: "16px";
|
|
2566
|
-
readonly 300: "24px";
|
|
2567
|
-
readonly 400: "32px";
|
|
2568
|
-
readonly 500: "40px";
|
|
2569
|
-
readonly 600: "48px";
|
|
2570
|
-
readonly 800: "64px";
|
|
2571
|
-
readonly 1200: "96px";
|
|
2572
|
-
readonly 1600: "128px";
|
|
2573
|
-
};
|
|
2574
|
-
'space-gap': {
|
|
2575
|
-
readonly 0: any;
|
|
2576
|
-
readonly 50: any;
|
|
2577
|
-
readonly 100: any;
|
|
2578
|
-
readonly 200: any;
|
|
2579
|
-
readonly 300: any;
|
|
2580
|
-
};
|
|
2581
|
-
'space-inset': {
|
|
2582
|
-
readonly 0: any;
|
|
2583
|
-
readonly 50: any;
|
|
2584
|
-
readonly 100: any;
|
|
2585
|
-
readonly 150: any;
|
|
2586
|
-
readonly 200: any;
|
|
2587
|
-
readonly 300: any;
|
|
2588
|
-
readonly 400: any;
|
|
2589
|
-
readonly 600: any;
|
|
2590
|
-
readonly 800: any;
|
|
2591
|
-
readonly 1200: any;
|
|
2592
|
-
readonly 1600: any;
|
|
2593
|
-
};
|
|
2594
|
-
'space-offset': {
|
|
2595
|
-
readonly 0: any;
|
|
2596
|
-
readonly 50: any;
|
|
2597
|
-
readonly 100: any;
|
|
2598
|
-
readonly 150: any;
|
|
2599
|
-
readonly 200: any;
|
|
2600
|
-
readonly 300: any;
|
|
2601
|
-
readonly 400: any;
|
|
2602
|
-
readonly 600: any;
|
|
2603
|
-
readonly 800: any;
|
|
2604
|
-
readonly 1200: any;
|
|
2605
|
-
readonly 1600: any;
|
|
2606
|
-
readonly 'stacking-0': any;
|
|
2607
|
-
readonly 'stacking-100': any;
|
|
2608
|
-
readonly 'stacking-200': any;
|
|
2609
|
-
readonly 'stacking-300': any;
|
|
2610
|
-
readonly 'stacking-400': any;
|
|
2611
|
-
readonly 'stacking-500': any;
|
|
2612
|
-
readonly 'stacking-800': any;
|
|
2613
|
-
};
|
|
2614
|
-
'stroke-width': {
|
|
2615
|
-
readonly thin: "1.5px";
|
|
2616
|
-
readonly normal: "2px";
|
|
2617
|
-
readonly bold: "4px";
|
|
2618
|
-
};
|
|
2619
|
-
'z-indices': {
|
|
2620
|
-
readonly dropdownMenu: 100;
|
|
2621
|
-
readonly popover: 200;
|
|
2622
|
-
readonly tooltip: 300;
|
|
2623
|
-
};
|
|
2624
|
-
}, {
|
|
2625
|
-
readonly background: "colors";
|
|
2626
|
-
readonly backgroundColor: "colors";
|
|
2627
|
-
readonly backgroundImage: "colors";
|
|
2628
|
-
readonly blockSize: "sizes";
|
|
2629
|
-
readonly border: "colors";
|
|
2630
|
-
readonly borderBlock: "colors";
|
|
2631
|
-
readonly borderBlockEnd: "colors";
|
|
2632
|
-
readonly borderBlockStart: "colors";
|
|
2633
|
-
readonly borderBottom: "colors";
|
|
2634
|
-
readonly borderBottomColor: "colors";
|
|
2635
|
-
readonly borderBottomLeftRadius: "radii";
|
|
2636
|
-
readonly borderBottomRightRadius: "radii";
|
|
2637
|
-
readonly borderBottomStyle: "border-styles";
|
|
2638
|
-
readonly borderBottomWidth: "border-widths";
|
|
2639
|
-
readonly borderColor: "colors";
|
|
2640
|
-
readonly borderImage: "colors";
|
|
2641
|
-
readonly borderInline: "colors";
|
|
2642
|
-
readonly borderInlineEnd: "colors";
|
|
2643
|
-
readonly borderInlineStart: "colors";
|
|
2644
|
-
readonly borderLeft: "colors";
|
|
2645
|
-
readonly borderLeftColor: "colors";
|
|
2646
|
-
readonly borderLeftStyle: "border-styles";
|
|
2647
|
-
readonly borderLeftWidth: "border-widths";
|
|
2648
|
-
readonly borderRadius: "radii";
|
|
2649
|
-
readonly borderRight: "colors";
|
|
2650
|
-
readonly borderRightColor: "colors";
|
|
2651
|
-
readonly borderRightStyle: "border-styles";
|
|
2652
|
-
readonly borderRightWidth: "border-widths";
|
|
2653
|
-
readonly borderStyle: "border-styles";
|
|
2654
|
-
readonly borderTop: "colors";
|
|
2655
|
-
readonly borderTopColor: "colors";
|
|
2656
|
-
readonly borderTopLeftRadius: "radii";
|
|
2657
|
-
readonly borderTopRightRadius: "radii";
|
|
2658
|
-
readonly borderTopStyle: "border-styles";
|
|
2659
|
-
readonly borderTopWidth: "border-widths";
|
|
2660
|
-
readonly borderWidth: "border-widths";
|
|
2661
|
-
readonly bottom: "space";
|
|
2662
|
-
readonly boxShadow: "shadows";
|
|
2663
|
-
readonly caretColor: "colors";
|
|
2664
|
-
readonly color: "colors";
|
|
2665
|
-
readonly columnGap: "space-gap";
|
|
2666
|
-
readonly columnRuleColor: "colors";
|
|
2667
|
-
readonly fill: "colors";
|
|
2668
|
-
readonly flexBasis: "sizes";
|
|
2669
|
-
readonly fontFamily: "fonts";
|
|
2670
|
-
readonly fontSize: "font-sizes";
|
|
2671
|
-
readonly fontWeight: "font-weights";
|
|
2672
|
-
readonly gap: "space-gap";
|
|
2673
|
-
readonly gridColumnGap: "space-gap";
|
|
2674
|
-
readonly gridGap: "space-gap";
|
|
2675
|
-
readonly gridRowGap: "space-gap";
|
|
2676
|
-
readonly gridTemplateColumns: "sizes";
|
|
2677
|
-
readonly gridTemplateRows: "sizes";
|
|
2678
|
-
readonly height: "sizes";
|
|
2679
|
-
readonly inlineSize: "sizes";
|
|
2680
|
-
readonly inset: "space-inset";
|
|
2681
|
-
readonly insetBlock: "space-inset";
|
|
2682
|
-
readonly insetBlockEnd: "space-inset";
|
|
2683
|
-
readonly insetBlockStart: "space-inset";
|
|
2684
|
-
readonly insetInline: "space-inset";
|
|
2685
|
-
readonly insetInlineEnd: "space-inset";
|
|
2686
|
-
readonly insetInlineStart: "space-inset";
|
|
2687
|
-
readonly left: "space";
|
|
2688
|
-
readonly letterSpacing: "letter-spacings";
|
|
2689
|
-
readonly lineHeight: "line-heights";
|
|
2690
|
-
readonly margin: "space-offset";
|
|
2691
|
-
readonly marginBlock: "space-offset";
|
|
2692
|
-
readonly marginBlockEnd: "space-offset";
|
|
2693
|
-
readonly marginBlockStart: "space-offset";
|
|
2694
|
-
readonly marginBottom: "space-offset";
|
|
2695
|
-
readonly marginInline: "space-offset";
|
|
2696
|
-
readonly marginInlineEnd: "space-offset";
|
|
2697
|
-
readonly marginInlineStart: "space-offset";
|
|
2698
|
-
readonly marginLeft: "space-offset";
|
|
2699
|
-
readonly marginRight: "space-offset";
|
|
2700
|
-
readonly marginTop: "space-offset";
|
|
2701
|
-
readonly maxBlockSize: "sizes";
|
|
2702
|
-
readonly maxHeight: "sizes";
|
|
2703
|
-
readonly maxInlineSize: "sizes";
|
|
2704
|
-
readonly maxWidth: "sizes";
|
|
2705
|
-
readonly minBlockSize: "sizes";
|
|
2706
|
-
readonly minHeight: "sizes";
|
|
2707
|
-
readonly minInlineSize: "sizes";
|
|
2708
|
-
readonly minWidth: "sizes";
|
|
2709
|
-
readonly outline: "colors";
|
|
2710
|
-
readonly outlineColor: "colors";
|
|
2711
|
-
readonly padding: "space-inset";
|
|
2712
|
-
readonly paddingBlock: "space-inset";
|
|
2713
|
-
readonly paddingBlockEnd: "space-inset";
|
|
2714
|
-
readonly paddingBlockStart: "space-inset";
|
|
2715
|
-
readonly paddingBottom: "space-inset";
|
|
2716
|
-
readonly paddingInline: "space-inset";
|
|
2717
|
-
readonly paddingInlineEnd: "space-inset";
|
|
2718
|
-
readonly paddingInlineStart: "space-inset";
|
|
2719
|
-
readonly paddingLeft: "space-inset";
|
|
2720
|
-
readonly paddingRight: "space-inset";
|
|
2721
|
-
readonly paddingTop: "space-inset";
|
|
2722
|
-
readonly right: "space";
|
|
2723
|
-
readonly rowGap: "space-gap";
|
|
2724
|
-
readonly scrollMargin: "space-offset";
|
|
2725
|
-
readonly scrollMarginBlock: "space-offset";
|
|
2726
|
-
readonly scrollMarginBlockEnd: "space-offset";
|
|
2727
|
-
readonly scrollMarginBlockStart: "space-offset";
|
|
2728
|
-
readonly scrollMarginBottom: "space-offset";
|
|
2729
|
-
readonly scrollMarginInline: "space-offset";
|
|
2730
|
-
readonly scrollMarginInlineEnd: "space-offset";
|
|
2731
|
-
readonly scrollMarginInlineStart: "space-offset";
|
|
2732
|
-
readonly scrollMarginLeft: "space-offset";
|
|
2733
|
-
readonly scrollMarginRight: "space-offset";
|
|
2734
|
-
readonly scrollMarginTop: "space-offset";
|
|
2735
|
-
readonly scrollPadding: "space-inset";
|
|
2736
|
-
readonly scrollPaddingBlock: "space-inset";
|
|
2737
|
-
readonly scrollPaddingBlockEnd: "space-inset";
|
|
2738
|
-
readonly scrollPaddingBlockStart: "space-inset";
|
|
2739
|
-
readonly scrollPaddingBottom: "space-inset";
|
|
2740
|
-
readonly scrollPaddingInline: "space-inset";
|
|
2741
|
-
readonly scrollPaddingInlineEnd: "space-inset";
|
|
2742
|
-
readonly scrollPaddingInlineStart: "space-inset";
|
|
2743
|
-
readonly scrollPaddingLeft: "space-inset";
|
|
2744
|
-
readonly scrollPaddingRight: "space-inset";
|
|
2745
|
-
readonly scrollPaddingTop: "space-inset";
|
|
2746
|
-
readonly stroke: "colors";
|
|
2747
|
-
readonly strokeWidth: "stroke-width";
|
|
2748
|
-
readonly textDecorationColor: "colors";
|
|
2749
|
-
readonly textShadow: "shadows";
|
|
2750
|
-
readonly top: "space";
|
|
2751
|
-
readonly transition: "transitions";
|
|
2752
|
-
readonly width: "sizes";
|
|
2753
|
-
readonly zIndex: "z-indices";
|
|
2754
|
-
}, {
|
|
2755
|
-
paddingX: (value: {
|
|
2756
|
-
readonly [$$PropertyValue]: "padding";
|
|
2757
|
-
}) => {
|
|
2758
|
-
paddingLeft: {
|
|
2759
|
-
readonly [$$PropertyValue]: "padding";
|
|
2760
|
-
};
|
|
2761
|
-
paddingRight: {
|
|
2762
|
-
readonly [$$PropertyValue]: "padding";
|
|
2763
|
-
};
|
|
2764
|
-
};
|
|
2765
|
-
paddingY: (value: {
|
|
2766
|
-
readonly [$$PropertyValue]: "padding";
|
|
2767
|
-
}) => {
|
|
2768
|
-
paddingTop: {
|
|
2769
|
-
readonly [$$PropertyValue]: "padding";
|
|
2770
|
-
};
|
|
2771
|
-
paddingBottom: {
|
|
2772
|
-
readonly [$$PropertyValue]: "padding";
|
|
2773
|
-
};
|
|
2774
|
-
};
|
|
2775
|
-
marginX: (value: {
|
|
2776
|
-
readonly [$$PropertyValue]: "margin";
|
|
2777
|
-
}) => {
|
|
2778
|
-
marginLeft: {
|
|
2779
|
-
readonly [$$PropertyValue]: "margin";
|
|
2780
|
-
};
|
|
2781
|
-
marginRight: {
|
|
2782
|
-
readonly [$$PropertyValue]: "margin";
|
|
2783
|
-
};
|
|
2784
|
-
};
|
|
2785
|
-
marginY: (value: {
|
|
2786
|
-
readonly [$$PropertyValue]: "margin";
|
|
2787
|
-
}) => {
|
|
2788
|
-
marginTop: {
|
|
2789
|
-
readonly [$$PropertyValue]: "margin";
|
|
2790
|
-
};
|
|
2791
|
-
marginBottom: {
|
|
2792
|
-
readonly [$$PropertyValue]: "margin";
|
|
2793
|
-
};
|
|
2794
|
-
};
|
|
2795
|
-
square: (value: {
|
|
2796
|
-
readonly [$$PropertyValue]: "width";
|
|
2797
|
-
}) => {
|
|
2798
|
-
width: {
|
|
2799
|
-
readonly [$$PropertyValue]: "width";
|
|
2800
|
-
};
|
|
2801
|
-
height: {
|
|
2802
|
-
readonly [$$PropertyValue]: "width";
|
|
2803
|
-
};
|
|
2804
|
-
};
|
|
2805
|
-
}> | undefined;
|
|
2806
|
-
}> & {
|
|
2807
|
-
children?: react.ReactNode;
|
|
2808
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectValueProps & react.RefAttributes<HTMLSpanElement>>, {}, {}>;
|
|
2809
|
-
declare type StyledValueProps = StrictComponentProps<typeof StyledValue>;
|
|
2810
|
-
|
|
2421
|
+
declare type StyledValueProps = StrictComponentProps<typeof Value$1>;
|
|
2811
2422
|
interface ValueProps extends StyledValueProps {
|
|
2812
2423
|
/**
|
|
2813
2424
|
* The content that will be rendered inside the Select.Value when no value or
|
|
@@ -2909,17 +2520,26 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
2909
2520
|
"background-neutrals-page"?: any;
|
|
2910
2521
|
"background-neutrals-page-subtle"?: any;
|
|
2911
2522
|
"background-neutrals-scrolls"?: any;
|
|
2523
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
2912
2524
|
"background-neutrals-scrolls-hover"?: any;
|
|
2525
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
2526
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
2913
2527
|
"background-neutrals-subtle"?: any;
|
|
2914
2528
|
"background-neutrals-subtle-active"?: any;
|
|
2915
2529
|
"background-neutrals-subtle-hover"?: any;
|
|
2916
2530
|
"background-primary-prominent"?: any;
|
|
2917
2531
|
"background-primary-prominent-active"?: any;
|
|
2532
|
+
"background-primary-prominent-expanded"?: any;
|
|
2918
2533
|
"background-primary-prominent-hover"?: any;
|
|
2534
|
+
"background-primary-prominent-pressed"?: any;
|
|
2535
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
2919
2536
|
"background-primary-prominent-selected"?: any;
|
|
2920
2537
|
"background-primary-subtle"?: any;
|
|
2921
2538
|
"background-primary-subtle-active"?: any;
|
|
2539
|
+
"background-primary-subtle-expanded"?: any;
|
|
2922
2540
|
"background-primary-subtle-hover"?: any;
|
|
2541
|
+
"background-primary-subtle-pressed"?: any;
|
|
2542
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
2923
2543
|
"background-primary-subtle-selected"?: any;
|
|
2924
2544
|
"background-success"?: any;
|
|
2925
2545
|
"background-warning-prominent"?: any;
|
|
@@ -3024,6 +2644,7 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
3024
2644
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
3025
2645
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
3026
2646
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
2647
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
3027
2648
|
};
|
|
3028
2649
|
sizes: {
|
|
3029
2650
|
readonly number: string;
|
|
@@ -3041,6 +2662,7 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
3041
2662
|
readonly 400: "32px";
|
|
3042
2663
|
readonly 500: "40px";
|
|
3043
2664
|
readonly 600: "48px";
|
|
2665
|
+
readonly 700: "56px";
|
|
3044
2666
|
readonly 800: "64px";
|
|
3045
2667
|
readonly 1200: "96px";
|
|
3046
2668
|
readonly 1600: "128px";
|
|
@@ -3092,8 +2714,9 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
3092
2714
|
};
|
|
3093
2715
|
'z-indices': {
|
|
3094
2716
|
readonly dropdownMenu: 100;
|
|
3095
|
-
readonly
|
|
3096
|
-
readonly
|
|
2717
|
+
readonly select: 200;
|
|
2718
|
+
readonly popover: 300;
|
|
2719
|
+
readonly tooltip: 400;
|
|
3097
2720
|
};
|
|
3098
2721
|
}, {
|
|
3099
2722
|
readonly background: "colors";
|
|
@@ -3287,21 +2910,30 @@ declare type PointerDownOutsideEvent = CustomEvent<{
|
|
|
3287
2910
|
}>;
|
|
3288
2911
|
declare type Boundary = Element | null | Array<Element | null>;
|
|
3289
2912
|
declare type Side = 'top' | 'right' | 'bottom' | 'left';
|
|
2913
|
+
declare type Align = 'start' | 'center' | 'end';
|
|
3290
2914
|
declare type Padding = Partial<Record<Side, number>>;
|
|
3291
2915
|
declare type Overflow = 'auto' | 'visible';
|
|
2916
|
+
declare type Size = 'medium' | 'large';
|
|
2917
|
+
declare type Sticky = 'partial' | 'always';
|
|
3292
2918
|
|
|
3293
2919
|
type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
|
|
3294
2920
|
type types_Boundary = Boundary;
|
|
3295
2921
|
type types_Side = Side;
|
|
2922
|
+
type types_Align = Align;
|
|
3296
2923
|
type types_Padding = Padding;
|
|
3297
2924
|
type types_Overflow = Overflow;
|
|
2925
|
+
type types_Size = Size;
|
|
2926
|
+
type types_Sticky = Sticky;
|
|
3298
2927
|
declare namespace types {
|
|
3299
2928
|
export {
|
|
3300
2929
|
types_PointerDownOutsideEvent as PointerDownOutsideEvent,
|
|
3301
2930
|
types_Boundary as Boundary,
|
|
3302
2931
|
types_Side as Side,
|
|
2932
|
+
types_Align as Align,
|
|
3303
2933
|
types_Padding as Padding,
|
|
3304
2934
|
types_Overflow as Overflow,
|
|
2935
|
+
types_Size as Size,
|
|
2936
|
+
types_Sticky as Sticky,
|
|
3305
2937
|
};
|
|
3306
2938
|
}
|
|
3307
2939
|
|
|
@@ -3321,19 +2953,12 @@ interface ContentProps extends StyledContentProps {
|
|
|
3321
2953
|
* component. It can be prevented by calling event.preventDefault.
|
|
3322
2954
|
*/
|
|
3323
2955
|
onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
|
|
3324
|
-
/**
|
|
3325
|
-
* The positioning mode to use, item-aligned is the default and behaves
|
|
3326
|
-
* similarly to a native MacOS menu by positioning content relative to the
|
|
3327
|
-
* active item. popper positions content in the same way as our other
|
|
3328
|
-
* primitives, for example Popover or DropdownMenu.
|
|
3329
|
-
*/
|
|
3330
|
-
position?: 'item-aligned' | 'popper';
|
|
3331
2956
|
/**
|
|
3332
2957
|
* The preferred side of the anchor to render against when open. Will be
|
|
3333
2958
|
* reversed when collisions occur and avoidCollisions is enabled. Only
|
|
3334
2959
|
* available when position is set to popper.
|
|
3335
2960
|
*/
|
|
3336
|
-
side?:
|
|
2961
|
+
side?: Side;
|
|
3337
2962
|
/**
|
|
3338
2963
|
* The distance in pixels from the anchor. Only available when position is set
|
|
3339
2964
|
* to popper.
|
|
@@ -3343,7 +2968,7 @@ interface ContentProps extends StyledContentProps {
|
|
|
3343
2968
|
* The preferred alignment against the anchor. May change when collisions
|
|
3344
2969
|
* occur. Only available when position is set to popper.
|
|
3345
2970
|
*/
|
|
3346
|
-
align?:
|
|
2971
|
+
align?: Align;
|
|
3347
2972
|
/**
|
|
3348
2973
|
* An offset in pixels from the "start" or "end" alignment options. Only
|
|
3349
2974
|
* available when position is set to popper.
|
|
@@ -3373,7 +2998,7 @@ interface ContentProps extends StyledContentProps {
|
|
|
3373
2998
|
* "always" will keep the content in the boundary regardless. Only available
|
|
3374
2999
|
* when position is set to popper.
|
|
3375
3000
|
*/
|
|
3376
|
-
sticky?:
|
|
3001
|
+
sticky?: Sticky;
|
|
3377
3002
|
/**
|
|
3378
3003
|
* Whether to hide the content when the trigger becomes fully occluded. Only
|
|
3379
3004
|
* available when position is set to popper.
|
|
@@ -3487,17 +3112,26 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
3487
3112
|
"background-neutrals-page"?: any;
|
|
3488
3113
|
"background-neutrals-page-subtle"?: any;
|
|
3489
3114
|
"background-neutrals-scrolls"?: any;
|
|
3115
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
3490
3116
|
"background-neutrals-scrolls-hover"?: any;
|
|
3117
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
3118
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
3491
3119
|
"background-neutrals-subtle"?: any;
|
|
3492
3120
|
"background-neutrals-subtle-active"?: any;
|
|
3493
3121
|
"background-neutrals-subtle-hover"?: any;
|
|
3494
3122
|
"background-primary-prominent"?: any;
|
|
3495
3123
|
"background-primary-prominent-active"?: any;
|
|
3124
|
+
"background-primary-prominent-expanded"?: any;
|
|
3496
3125
|
"background-primary-prominent-hover"?: any;
|
|
3126
|
+
"background-primary-prominent-pressed"?: any;
|
|
3127
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
3497
3128
|
"background-primary-prominent-selected"?: any;
|
|
3498
3129
|
"background-primary-subtle"?: any;
|
|
3499
3130
|
"background-primary-subtle-active"?: any;
|
|
3131
|
+
"background-primary-subtle-expanded"?: any;
|
|
3500
3132
|
"background-primary-subtle-hover"?: any;
|
|
3133
|
+
"background-primary-subtle-pressed"?: any;
|
|
3134
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
3501
3135
|
"background-primary-subtle-selected"?: any;
|
|
3502
3136
|
"background-success"?: any;
|
|
3503
3137
|
"background-warning-prominent"?: any;
|
|
@@ -3602,6 +3236,7 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
3602
3236
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
3603
3237
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
3604
3238
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
3239
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
3605
3240
|
};
|
|
3606
3241
|
sizes: {
|
|
3607
3242
|
readonly number: string;
|
|
@@ -3619,6 +3254,7 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
3619
3254
|
readonly 400: "32px";
|
|
3620
3255
|
readonly 500: "40px";
|
|
3621
3256
|
readonly 600: "48px";
|
|
3257
|
+
readonly 700: "56px";
|
|
3622
3258
|
readonly 800: "64px";
|
|
3623
3259
|
readonly 1200: "96px";
|
|
3624
3260
|
readonly 1600: "128px";
|
|
@@ -3670,8 +3306,9 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<{}, never>
|
|
|
3670
3306
|
};
|
|
3671
3307
|
'z-indices': {
|
|
3672
3308
|
readonly dropdownMenu: 100;
|
|
3673
|
-
readonly
|
|
3674
|
-
readonly
|
|
3309
|
+
readonly select: 200;
|
|
3310
|
+
readonly popover: 300;
|
|
3311
|
+
readonly tooltip: 400;
|
|
3675
3312
|
};
|
|
3676
3313
|
}, {
|
|
3677
3314
|
readonly background: "colors";
|
|
@@ -3952,17 +3589,26 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<{}, nev
|
|
|
3952
3589
|
"background-neutrals-page"?: any;
|
|
3953
3590
|
"background-neutrals-page-subtle"?: any;
|
|
3954
3591
|
"background-neutrals-scrolls"?: any;
|
|
3592
|
+
"background-neutrals-scrolls-expanded"?: any;
|
|
3955
3593
|
"background-neutrals-scrolls-hover"?: any;
|
|
3594
|
+
"background-neutrals-scrolls-pressed"?: any;
|
|
3595
|
+
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
3956
3596
|
"background-neutrals-subtle"?: any;
|
|
3957
3597
|
"background-neutrals-subtle-active"?: any;
|
|
3958
3598
|
"background-neutrals-subtle-hover"?: any;
|
|
3959
3599
|
"background-primary-prominent"?: any;
|
|
3960
3600
|
"background-primary-prominent-active"?: any;
|
|
3601
|
+
"background-primary-prominent-expanded"?: any;
|
|
3961
3602
|
"background-primary-prominent-hover"?: any;
|
|
3603
|
+
"background-primary-prominent-pressed"?: any;
|
|
3604
|
+
"background-primary-prominent-pressed-hover"?: any;
|
|
3962
3605
|
"background-primary-prominent-selected"?: any;
|
|
3963
3606
|
"background-primary-subtle"?: any;
|
|
3964
3607
|
"background-primary-subtle-active"?: any;
|
|
3608
|
+
"background-primary-subtle-expanded"?: any;
|
|
3965
3609
|
"background-primary-subtle-hover"?: any;
|
|
3610
|
+
"background-primary-subtle-pressed"?: any;
|
|
3611
|
+
"background-primary-subtle-pressed-hover"?: any;
|
|
3966
3612
|
"background-primary-subtle-selected"?: any;
|
|
3967
3613
|
"background-success"?: any;
|
|
3968
3614
|
"background-warning-prominent"?: any;
|
|
@@ -4067,6 +3713,7 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<{}, nev
|
|
|
4067
3713
|
readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
|
|
4068
3714
|
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
4069
3715
|
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
3716
|
+
readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
|
|
4070
3717
|
};
|
|
4071
3718
|
sizes: {
|
|
4072
3719
|
readonly number: string;
|
|
@@ -4084,6 +3731,7 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<{}, nev
|
|
|
4084
3731
|
readonly 400: "32px";
|
|
4085
3732
|
readonly 500: "40px";
|
|
4086
3733
|
readonly 600: "48px";
|
|
3734
|
+
readonly 700: "56px";
|
|
4087
3735
|
readonly 800: "64px";
|
|
4088
3736
|
readonly 1200: "96px";
|
|
4089
3737
|
readonly 1600: "128px";
|
|
@@ -4135,8 +3783,9 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<{}, nev
|
|
|
4135
3783
|
};
|
|
4136
3784
|
'z-indices': {
|
|
4137
3785
|
readonly dropdownMenu: 100;
|
|
4138
|
-
readonly
|
|
4139
|
-
readonly
|
|
3786
|
+
readonly select: 200;
|
|
3787
|
+
readonly popover: 300;
|
|
3788
|
+
readonly tooltip: 400;
|
|
4140
3789
|
};
|
|
4141
3790
|
}, {
|
|
4142
3791
|
readonly background: "colors";
|
|
@@ -4377,11 +4026,20 @@ interface SelectProps extends StyledSelectProps {
|
|
|
4377
4026
|
* When true, prevents the user from interacting with select.
|
|
4378
4027
|
*/
|
|
4379
4028
|
disabled?: boolean;
|
|
4029
|
+
/**
|
|
4030
|
+
* When true, prevents the user from opening with select, while allowing focus and hover.
|
|
4031
|
+
*/
|
|
4032
|
+
'aria-disabled'?: Booleanish;
|
|
4380
4033
|
/**
|
|
4381
4034
|
* When true, indicates that the user must select a value before the owning
|
|
4382
4035
|
* form can be submitted.
|
|
4383
4036
|
*/
|
|
4384
4037
|
required?: boolean;
|
|
4038
|
+
/**
|
|
4039
|
+
* When true, indicates that the select value contains an error which have to be fixed before the owning
|
|
4040
|
+
* form can be submitted.
|
|
4041
|
+
*/
|
|
4042
|
+
invalid?: boolean;
|
|
4385
4043
|
}
|
|
4386
4044
|
declare const Select: react__default.ForwardRefExoticComponent<SelectProps> & Partials;
|
|
4387
4045
|
interface Partials {
|