@theroutingcompany/components 0.0.20-alpha.1 → 0.0.21
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/trc-components.es.js +9068 -10382
- package/dist/trc-components.es.js.map +1 -1
- package/dist/trc-components.umd.js +910 -896
- package/dist/trc-components.umd.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +62 -64
- package/types/components/AlertDialog/AlertDialog.d.ts +7 -8
- package/types/components/Badge/Badge.d.ts +29 -0
- package/types/components/Box/Box.d.ts +22 -22
- package/types/components/Dialog/Dialog.d.ts +1 -1
- package/types/components/Flex/Flex.d.ts +21 -21
- package/types/components/FormControl/FormControl.d.ts +1 -1
- package/types/components/ListBox/ListBox.d.ts +4 -4
- package/types/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/types/components/MultiSelect/MultiSelectPopover.d.ts +3 -2
- package/types/components/MultiSelect/useMultiSelect.d.ts +2 -2
- package/types/components/MultiSelect/useMultiSelectListState.d.ts +3 -3
- package/types/components/MultiSelect/useMultiSelectState.d.ts +2 -2
- package/types/components/ReactAriaButton/ReactAriaButton.d.ts +1 -1
- package/types/components/SegmentControl/SegmentControl.d.ts +3 -3
- package/types/components/Select/Select.d.ts +15 -15
- package/types/components/Text/Text.d.ts +1 -1
- package/types/components/index.d.ts +1 -0
- package/types/helpers/tokenUtils.d.ts +1 -1
- package/types/helpers/typeHelpers.d.ts +3 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@theroutingcompany/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "The Routing Company Components",
|
|
5
5
|
"main": "./dist/trc-components.umd.js",
|
|
6
6
|
"module": "./dist/trc-components.es.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"sideEffects": false,
|
|
38
38
|
"license": "UNLICENSED",
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@internationalized/date": "3.
|
|
40
|
+
"@internationalized/date": "^3.2.0",
|
|
41
41
|
"@material-ui/icons": "^4.11.3",
|
|
42
42
|
"@radix-ui/react-accessible-icon": "^1.0.2",
|
|
43
43
|
"@radix-ui/react-alert-dialog": "^1.0.3",
|
|
@@ -54,79 +54,77 @@
|
|
|
54
54
|
"@radix-ui/react-tabs": "^1.0.3",
|
|
55
55
|
"@radix-ui/react-toast": "^1.1.3",
|
|
56
56
|
"@radix-ui/react-toggle-group": "^1.0.3",
|
|
57
|
-
"@radix-ui/react-tooltip": "^1.0.
|
|
58
|
-
"@react-aria/breadcrumbs": "3.5.
|
|
59
|
-
"@react-aria/button": "3.7.
|
|
60
|
-
"@react-aria/combobox": "3.
|
|
61
|
-
"@react-aria/datepicker": "3.
|
|
62
|
-
"@react-aria/dnd": "3.
|
|
63
|
-
"@react-aria/focus": "3.
|
|
64
|
-
"@react-aria/i18n": "3.7.
|
|
65
|
-
"@react-aria/interactions": "3.
|
|
66
|
-
"@react-aria/label": "3.5.
|
|
67
|
-
"@react-aria/listbox": "3.
|
|
68
|
-
"@react-aria/menu": "3.
|
|
69
|
-
"@react-aria/numberfield": "3.
|
|
70
|
-
"@react-aria/overlays": "3.
|
|
71
|
-
"@react-aria/progress": "3.4.
|
|
72
|
-
"@react-aria/radio": "3.
|
|
73
|
-
"@react-aria/searchfield": "3.5.
|
|
74
|
-
"@react-aria/select": "3.
|
|
75
|
-
"@react-aria/selection": "3.
|
|
76
|
-
"@react-aria/textfield": "3.9.
|
|
77
|
-
"@react-aria/utils": "3.
|
|
78
|
-
"@react-stately/collections": "3.
|
|
79
|
-
"@react-stately/combobox": "3.
|
|
80
|
-
"@react-stately/datepicker": "3.
|
|
81
|
-
"@react-stately/list": "3.
|
|
82
|
-
"@react-stately/menu": "3.5.
|
|
83
|
-
"@react-stately/numberfield": "3.4.
|
|
84
|
-
"@react-stately/overlays": "3.5.
|
|
85
|
-
"@react-stately/radio": "3.
|
|
86
|
-
"@react-stately/searchfield": "3.4.
|
|
87
|
-
"@react-stately/select": "3.
|
|
88
|
-
"@react-stately/selection": "3.
|
|
89
|
-
"@react-types/combobox": "3.6.
|
|
90
|
-
"@react-types/overlays": "3.7.
|
|
91
|
-
"@react-types/select": "3.
|
|
92
|
-
"@tanstack/react-table": "^8.
|
|
57
|
+
"@radix-ui/react-tooltip": "^1.0.5",
|
|
58
|
+
"@react-aria/breadcrumbs": "^3.5.1",
|
|
59
|
+
"@react-aria/button": "^3.7.1",
|
|
60
|
+
"@react-aria/combobox": "^3.6.0",
|
|
61
|
+
"@react-aria/datepicker": "^3.4.0",
|
|
62
|
+
"@react-aria/dnd": "^3.2.0",
|
|
63
|
+
"@react-aria/focus": "^3.12.0",
|
|
64
|
+
"@react-aria/i18n": "^3.7.1",
|
|
65
|
+
"@react-aria/interactions": "^3.15.0",
|
|
66
|
+
"@react-aria/label": "^3.5.1",
|
|
67
|
+
"@react-aria/listbox": "^3.9.0",
|
|
68
|
+
"@react-aria/menu": "^3.9.0",
|
|
69
|
+
"@react-aria/numberfield": "^3.5.0",
|
|
70
|
+
"@react-aria/overlays": "^3.14.0",
|
|
71
|
+
"@react-aria/progress": "^3.4.1",
|
|
72
|
+
"@react-aria/radio": "^3.6.0",
|
|
73
|
+
"@react-aria/searchfield": "^3.5.1",
|
|
74
|
+
"@react-aria/select": "^3.10.0",
|
|
75
|
+
"@react-aria/selection": "^3.14.0",
|
|
76
|
+
"@react-aria/textfield": "^3.9.1",
|
|
77
|
+
"@react-aria/utils": "^3.16.0",
|
|
78
|
+
"@react-stately/collections": "^3.7.0",
|
|
79
|
+
"@react-stately/combobox": "^3.5.0",
|
|
80
|
+
"@react-stately/datepicker": "^3.4.0",
|
|
81
|
+
"@react-stately/list": "^3.8.0",
|
|
82
|
+
"@react-stately/menu": "^3.5.1",
|
|
83
|
+
"@react-stately/numberfield": "^3.4.1",
|
|
84
|
+
"@react-stately/overlays": "^3.5.1",
|
|
85
|
+
"@react-stately/radio": "^3.8.0",
|
|
86
|
+
"@react-stately/searchfield": "^3.4.1",
|
|
87
|
+
"@react-stately/select": "^3.5.0",
|
|
88
|
+
"@react-stately/selection": "^3.13.0",
|
|
89
|
+
"@react-types/combobox": "^3.6.1",
|
|
90
|
+
"@react-types/overlays": "^3.7.1",
|
|
91
|
+
"@react-types/select": "^3.8.0",
|
|
92
|
+
"@tanstack/react-table": "^8.8.5",
|
|
93
93
|
"@theroutingcompany/design-tokens": "^0.0.3",
|
|
94
|
-
"csstype": "^3.1.
|
|
94
|
+
"csstype": "^3.1.2"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|
|
97
97
|
"@material-ui/icons": "^4.11.3",
|
|
98
98
|
"@types/react": "^18.0.0",
|
|
99
99
|
"@types/react-dom": "^18.0.0",
|
|
100
|
-
"csstype": "^3.1.1",
|
|
101
100
|
"react": "^18.2.0",
|
|
102
101
|
"react-dom": "^18.2.0",
|
|
103
102
|
"react-is": "^18.2.0",
|
|
104
103
|
"styled-components": "^5.3.9"
|
|
105
104
|
},
|
|
106
105
|
"devDependencies": {
|
|
107
|
-
"@babel/core": "^7.21.0",
|
|
108
106
|
"@material-ui/core": "^4.12.4",
|
|
109
|
-
"@rollup/plugin-node-resolve": "^15.0.
|
|
110
|
-
"@rollup/plugin-typescript": "^11.
|
|
111
|
-
"@storybook/addon-a11y": "^7.0.
|
|
112
|
-
"@storybook/addon-actions": "^7.0.
|
|
113
|
-
"@storybook/addon-essentials": "^7.0.
|
|
114
|
-
"@storybook/addon-interactions": "^7.0.
|
|
115
|
-
"@storybook/addon-links": "^7.0.
|
|
116
|
-
"@storybook/react": "^7.0.
|
|
117
|
-
"@storybook/react-vite": "^7.0.
|
|
118
|
-
"@storybook/testing-library": "^0.
|
|
119
|
-
"@types/eslint": "^8.
|
|
107
|
+
"@rollup/plugin-node-resolve": "^15.0.2",
|
|
108
|
+
"@rollup/plugin-typescript": "^11.1.0",
|
|
109
|
+
"@storybook/addon-a11y": "^7.0.3",
|
|
110
|
+
"@storybook/addon-actions": "^7.0.3",
|
|
111
|
+
"@storybook/addon-essentials": "^7.0.3",
|
|
112
|
+
"@storybook/addon-interactions": "^7.0.3",
|
|
113
|
+
"@storybook/addon-links": "^7.0.3",
|
|
114
|
+
"@storybook/react": "^7.0.3",
|
|
115
|
+
"@storybook/react-vite": "^7.0.3",
|
|
116
|
+
"@storybook/testing-library": "^0.1.0",
|
|
117
|
+
"@types/eslint": "^8.37.0",
|
|
120
118
|
"@types/prettier": "^2.7.2",
|
|
121
|
-
"@types/react": "^18.0.
|
|
119
|
+
"@types/react": "^18.0.34",
|
|
122
120
|
"@types/react-dom": "^18.0.11",
|
|
123
121
|
"@types/react-is": "^17.0.3",
|
|
124
122
|
"@types/styled-components": "^5.1.26",
|
|
125
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
126
|
-
"@typescript-eslint/parser": "^5.
|
|
123
|
+
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
|
124
|
+
"@typescript-eslint/parser": "^5.58.0",
|
|
127
125
|
"@vitejs/plugin-react": "^3.1.0",
|
|
128
|
-
"chromatic": "^6.17.
|
|
129
|
-
"eslint": "^8.
|
|
126
|
+
"chromatic": "^6.17.3",
|
|
127
|
+
"eslint": "^8.38.0",
|
|
130
128
|
"eslint-config-prettier": "^8.8.0",
|
|
131
129
|
"eslint-plugin-jsx-a11y": "^6.7.1",
|
|
132
130
|
"eslint-plugin-react": "^7.32.2",
|
|
@@ -134,19 +132,19 @@
|
|
|
134
132
|
"eslint-plugin-simple-import-sort": "^10.0.0",
|
|
135
133
|
"eslint-plugin-storybook": "^0.6.11",
|
|
136
134
|
"postcss-styled-syntax": "^0.3.3",
|
|
137
|
-
"prettier": "^2.8.
|
|
135
|
+
"prettier": "^2.8.7",
|
|
138
136
|
"react": "^18.2.0",
|
|
139
137
|
"react-dom": "^18.2.0",
|
|
140
138
|
"react-is": "^18.2.0",
|
|
141
|
-
"rimraf": "^
|
|
142
|
-
"storybook": "^7.0.
|
|
139
|
+
"rimraf": "^5.0.0",
|
|
140
|
+
"storybook": "^7.0.3",
|
|
143
141
|
"styled-components": "^5.3.9",
|
|
144
142
|
"stylelint": "^15.2.0",
|
|
145
143
|
"stylelint-config-prettier": "^9.0.5",
|
|
146
|
-
"stylelint-config-standard": "^
|
|
144
|
+
"stylelint-config-standard": "^32.0.0",
|
|
147
145
|
"type-fest": "^3.6.1",
|
|
148
|
-
"typescript": "^
|
|
149
|
-
"vite": "^4.1
|
|
150
|
-
"vite-tsconfig-paths": "^4.0
|
|
146
|
+
"typescript": "^5.0.4",
|
|
147
|
+
"vite": "^4.2.1",
|
|
148
|
+
"vite-tsconfig-paths": "^4.1.0"
|
|
151
149
|
}
|
|
152
150
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
3
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
4
3
|
import { dialogWidths } from '../../components/Dialog/Dialog';
|
|
5
4
|
type DialogWidth = keyof typeof dialogWidths;
|
|
6
5
|
type StyledContentProps = {
|
|
@@ -8,13 +7,13 @@ type StyledContentProps = {
|
|
|
8
7
|
};
|
|
9
8
|
export type AlertDialogContentProps = StyledContentProps & AlertDialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
|
|
10
9
|
export declare function AlertDialogContent({ children, size, ...props }: AlertDialogContentProps): JSX.Element;
|
|
11
|
-
export declare const AlertDialogTitle: import("styled-components").StyledComponent<
|
|
12
|
-
export declare const AlertDialogDescription: import("styled-components").StyledComponent<
|
|
10
|
+
export declare const AlertDialogTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
|
|
11
|
+
export declare const AlertDialogDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
|
|
13
12
|
export declare const AlertDialogFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
|
|
14
|
-
export declare const AlertDialog:
|
|
15
|
-
export declare const AlertDialogTrigger:
|
|
16
|
-
export declare const AlertDialogAction:
|
|
17
|
-
export declare const AlertDialogCancel:
|
|
13
|
+
export declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
14
|
+
export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
15
|
+
export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
16
|
+
export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
18
17
|
/** AlertDialog Cancel Button positioned in top right with × */
|
|
19
18
|
export declare const AlertDialogCancelButton: ({ children, ...buttonProps }: AlertDialogPrimitive.AlertDialogCancelProps) => JSX.Element;
|
|
20
19
|
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { PropsWithChildren } from 'react';
|
|
2
|
+
declare const colors: {
|
|
3
|
+
readonly positive: {
|
|
4
|
+
readonly background: "hsl(143.1, 48%, 94.7%)";
|
|
5
|
+
readonly color: "hsl(155.68deg 88.1% 16.5%)";
|
|
6
|
+
};
|
|
7
|
+
readonly pending: {
|
|
8
|
+
readonly background: "hsl(29deg 74% 53% / 8%)";
|
|
9
|
+
readonly color: "hsl(29deg 74% 53%)";
|
|
10
|
+
};
|
|
11
|
+
readonly muted: {
|
|
12
|
+
readonly background: "hsl(0deg 0% 10% / 8%)";
|
|
13
|
+
readonly color: "hsl(0, 0%, 56%)";
|
|
14
|
+
};
|
|
15
|
+
readonly info: {
|
|
16
|
+
readonly background: "hsl(217.4deg 81.6% 51% / 8%)";
|
|
17
|
+
readonly color: "hsl(218deg 84% 45%)";
|
|
18
|
+
};
|
|
19
|
+
readonly negative: {
|
|
20
|
+
readonly background: "hsl(11deg 48% 85%)";
|
|
21
|
+
readonly color: "hsl(11deg 68% 55%)";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
type BadgeVariant = keyof typeof colors;
|
|
25
|
+
export type BadgeProps = PropsWithChildren<{
|
|
26
|
+
variant: BadgeVariant;
|
|
27
|
+
}>;
|
|
28
|
+
export declare function Badge({ children, variant }: BadgeProps): JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Property } from 'csstype';
|
|
2
1
|
import type { PropsWithChildren } from 'react';
|
|
2
|
+
import type { Property } from 'csstype';
|
|
3
3
|
import type { BorderRadiusToken, ElevationToken, RemoveVendorProperties, SizingToken, SpacingToken } from '../../helpers/tokenUtils';
|
|
4
4
|
export type BoxProps = PropsWithChildren<{
|
|
5
5
|
display?: 'block' | 'inline-block' | 'contents' | 'none' | 'inline';
|
|
@@ -67,44 +67,44 @@ export type BoxProps = PropsWithChildren<{
|
|
|
67
67
|
}>;
|
|
68
68
|
export declare const Box: import("styled-components").StyledComponent<"div", any, {
|
|
69
69
|
display?: "none" | "inline" | "block" | "inline-block" | "contents" | undefined;
|
|
70
|
-
position?:
|
|
70
|
+
position?: RemoveVendorProperties<Property.Position> | undefined;
|
|
71
71
|
top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
72
72
|
bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
73
73
|
left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
74
74
|
right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
75
75
|
zIndex?: Property.ZIndex | undefined;
|
|
76
76
|
/** width */
|
|
77
|
-
w?: "0" | "
|
|
77
|
+
w?: RemoveVendorProperties<Property.Width<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
78
78
|
/** min-width */
|
|
79
|
-
minW?: "0" | "
|
|
79
|
+
minW?: RemoveVendorProperties<Property.MinWidth<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
80
80
|
/** max-width */
|
|
81
|
-
maxW?: "0" | "1000" | "300" | "400" | "500" | "600" |
|
|
81
|
+
maxW?: RemoveVendorProperties<Property.MaxWidth<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
82
82
|
/** height */
|
|
83
|
-
h?: "0" | "
|
|
83
|
+
h?: RemoveVendorProperties<Property.Height<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
84
84
|
/** min-height */
|
|
85
|
-
minH?: "0" | "
|
|
85
|
+
minH?: RemoveVendorProperties<Property.MinHeight<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
86
86
|
/** max-height */
|
|
87
|
-
maxH?: "0" | "1000" | "300" | "400" | "500" | "600" |
|
|
87
|
+
maxH?: RemoveVendorProperties<Property.MaxHeight<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
88
88
|
/** margin */
|
|
89
|
-
m?: "0" | "
|
|
89
|
+
m?: RemoveVendorProperties<Property.Margin<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
90
90
|
/** margin-top */
|
|
91
|
-
mt?: "0" | "
|
|
91
|
+
mt?: RemoveVendorProperties<Property.MarginTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
92
92
|
/** margin-bottom */
|
|
93
|
-
mb?: "0" | "
|
|
93
|
+
mb?: RemoveVendorProperties<Property.MarginBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
94
94
|
/** margin-left */
|
|
95
|
-
ml?: "0" | "
|
|
95
|
+
ml?: RemoveVendorProperties<Property.MarginLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
96
96
|
/** margin-right */
|
|
97
|
-
mr?: "0" | "
|
|
97
|
+
mr?: RemoveVendorProperties<Property.MarginRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
98
98
|
/** padding */
|
|
99
|
-
p?: "0" | "300" | "400" | "500" | "600" |
|
|
99
|
+
p?: RemoveVendorProperties<Property.Padding<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
100
100
|
/** padding-top */
|
|
101
|
-
pt?: "0" | "300" | "400" | "500" | "600" |
|
|
101
|
+
pt?: RemoveVendorProperties<Property.PaddingTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
102
102
|
/** padding-right */
|
|
103
|
-
pr?: "0" | "300" | "400" | "500" | "600" |
|
|
103
|
+
pr?: RemoveVendorProperties<Property.PaddingRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
104
104
|
/** padding-bottom */
|
|
105
|
-
pb?: "0" | "300" | "400" | "500" | "600" |
|
|
105
|
+
pb?: RemoveVendorProperties<Property.PaddingBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
106
106
|
/** padding-left */
|
|
107
|
-
pl?: "0" | "300" | "400" | "500" | "600" |
|
|
107
|
+
pl?: RemoveVendorProperties<Property.PaddingLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
108
108
|
borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
109
109
|
borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
110
110
|
borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
@@ -112,9 +112,9 @@ export declare const Box: import("styled-components").StyledComponent<"div", any
|
|
|
112
112
|
borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
113
113
|
/** box-shadow */
|
|
114
114
|
elevation?: ElevationToken | undefined;
|
|
115
|
-
flexShrink?:
|
|
116
|
-
flexGrow?:
|
|
117
|
-
flexBasis?: "0" | "
|
|
115
|
+
flexShrink?: RemoveVendorProperties<Property.FlexShrink> | undefined;
|
|
116
|
+
flexGrow?: RemoveVendorProperties<Property.FlexGrow> | undefined;
|
|
117
|
+
flexBasis?: RemoveVendorProperties<Property.FlexBasis<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
118
118
|
flex?: Property.Flex<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500"> | undefined;
|
|
119
119
|
alignSelf?: Property.AlignSelf | undefined;
|
|
120
120
|
order?: Property.Order | undefined;
|
|
@@ -127,7 +127,7 @@ export declare const Box: import("styled-components").StyledComponent<"div", any
|
|
|
127
127
|
bgColor?: Property.BackgroundColor | undefined;
|
|
128
128
|
opacity?: Property.Background<0 | (string & {})> | undefined;
|
|
129
129
|
color?: Property.Color | undefined;
|
|
130
|
-
overflow?:
|
|
130
|
+
overflow?: RemoveVendorProperties<Property.Overflow> | undefined;
|
|
131
131
|
} & {
|
|
132
132
|
children?: import("react").ReactNode;
|
|
133
133
|
}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
2
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
3
3
|
export declare const overlayStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
4
4
|
export declare const dialogWidths: {
|
|
5
5
|
readonly small: "360px";
|
|
@@ -15,37 +15,37 @@ export type FlexProps = PropsWithChildren<{
|
|
|
15
15
|
}>;
|
|
16
16
|
export declare const Flex: import("styled-components").StyledComponent<"div", any, {
|
|
17
17
|
display?: "none" | "inline" | "block" | "inline-block" | "contents" | undefined;
|
|
18
|
-
position?: "
|
|
18
|
+
position?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Position> | undefined;
|
|
19
19
|
top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
20
20
|
bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
21
21
|
left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
22
22
|
right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
23
23
|
zIndex?: Property.ZIndex | undefined;
|
|
24
|
-
w?: "
|
|
25
|
-
minW?: "
|
|
26
|
-
maxW?: "0" | "1000" | "300" | "400" | "500" | "600" |
|
|
27
|
-
h?: "
|
|
28
|
-
minH?: "
|
|
29
|
-
maxH?: "0" | "1000" | "300" | "400" | "500" | "600" |
|
|
30
|
-
m?: "
|
|
31
|
-
mt?: "
|
|
32
|
-
mb?: "
|
|
33
|
-
ml?: "
|
|
34
|
-
mr?: "
|
|
35
|
-
p?: "0" | "300" | "400" | "500" | "600" |
|
|
36
|
-
pt?: "0" | "300" | "400" | "500" | "600" |
|
|
37
|
-
pr?: "0" | "300" | "400" | "500" | "600" |
|
|
38
|
-
pb?: "0" | "300" | "400" | "500" | "600" |
|
|
39
|
-
pl?: "0" | "300" | "400" | "500" | "600" |
|
|
24
|
+
w?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Width<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
25
|
+
minW?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MinWidth<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
26
|
+
maxW?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MaxWidth<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
27
|
+
h?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Height<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
28
|
+
minH?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MinHeight<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
29
|
+
maxH?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MaxHeight<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
30
|
+
m?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Margin<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
31
|
+
mt?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MarginTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
32
|
+
mb?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MarginBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
33
|
+
ml?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MarginLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
34
|
+
mr?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.MarginRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
35
|
+
p?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Padding<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
36
|
+
pt?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.PaddingTop<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
37
|
+
pr?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.PaddingRight<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
38
|
+
pb?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.PaddingBottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
39
|
+
pl?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.PaddingLeft<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900">> | undefined;
|
|
40
40
|
borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
41
41
|
borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
42
42
|
borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
43
43
|
borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
44
44
|
borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
45
45
|
elevation?: import("../../helpers/tokenUtils").ElevationToken | undefined;
|
|
46
|
-
flexShrink?: (
|
|
47
|
-
flexGrow?: (
|
|
48
|
-
flexBasis?: "
|
|
46
|
+
flexShrink?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.FlexShrink> | undefined;
|
|
47
|
+
flexGrow?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.FlexGrow> | undefined;
|
|
48
|
+
flexBasis?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.FlexBasis<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500">> | undefined;
|
|
49
49
|
flex?: Property.Flex<"0" | "1000" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500"> | undefined;
|
|
50
50
|
alignSelf?: Property.AlignSelf | undefined;
|
|
51
51
|
order?: Property.Order | undefined;
|
|
@@ -56,7 +56,7 @@ export declare const Flex: import("styled-components").StyledComponent<"div", an
|
|
|
56
56
|
bgColor?: Property.BackgroundColor | undefined;
|
|
57
57
|
opacity?: Property.Background<0 | (string & {})> | undefined;
|
|
58
58
|
color?: Property.Color | undefined;
|
|
59
|
-
overflow?: "
|
|
59
|
+
overflow?: import("../../helpers/tokenUtils").RemoveVendorProperties<Property.Overflow> | undefined;
|
|
60
60
|
} & {
|
|
61
61
|
children?: import("react").ReactNode;
|
|
62
62
|
} & {
|
|
@@ -26,6 +26,7 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
|
|
|
26
26
|
type?: "text" | (string & {}) | "search" | "tel" | "url" | "email" | "password" | undefined;
|
|
27
27
|
name?: string | undefined;
|
|
28
28
|
defaultValue?: string | undefined;
|
|
29
|
+
autoFocus?: boolean | undefined;
|
|
29
30
|
id?: string | undefined;
|
|
30
31
|
placeholder?: string | undefined;
|
|
31
32
|
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
@@ -51,7 +52,6 @@ export declare const TextAreaFormControl: import("react").ForwardRefExoticCompon
|
|
|
51
52
|
onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
|
|
52
53
|
onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
|
|
53
54
|
onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
|
|
54
|
-
autoFocus?: boolean | undefined;
|
|
55
55
|
disabled?: boolean | undefined;
|
|
56
56
|
value?: string | undefined;
|
|
57
57
|
autoComplete?: string | undefined;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import type { AriaListBoxOptions } from '@react-aria/listbox';
|
|
2
3
|
import type { AriaPopoverProps } from '@react-aria/overlays';
|
|
3
4
|
import type { ListState } from '@react-stately/list';
|
|
4
5
|
import type { OverlayTriggerState } from '@react-stately/overlays';
|
|
5
|
-
import
|
|
6
|
-
import { MultiSelectState } from 'components/MultiSelect/useMultiSelectState';
|
|
6
|
+
import type { MultiSelectState } from 'components/MultiSelect/useMultiSelectState';
|
|
7
7
|
interface ListBoxProps extends AriaListBoxOptions<unknown> {
|
|
8
8
|
listBoxRef?: React.RefObject<HTMLUListElement>;
|
|
9
9
|
state: ListState<unknown>;
|
|
@@ -14,10 +14,10 @@ interface MultiSelectListBoxProps extends AriaListBoxOptions<unknown> {
|
|
|
14
14
|
}
|
|
15
15
|
export declare function ListBox(props: ListBoxProps): JSX.Element;
|
|
16
16
|
export declare function MultiSelectListBox(props: MultiSelectListBoxProps): JSX.Element;
|
|
17
|
-
export declare function
|
|
17
|
+
export declare function OptionLabel({ children }: {
|
|
18
18
|
children: React.ReactNode;
|
|
19
19
|
}): JSX.Element;
|
|
20
|
-
export declare function
|
|
20
|
+
export declare function OptionDescription({ children }: {
|
|
21
21
|
children: React.ReactNode;
|
|
22
22
|
}): JSX.Element;
|
|
23
23
|
interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { CollectionChildren } from '@react-types/shared';
|
|
2
1
|
import React from 'react';
|
|
2
|
+
import type { CollectionChildren } from '@react-types/shared';
|
|
3
3
|
import { useMultiSelectState } from './useMultiSelectState';
|
|
4
4
|
export { Item as MultiSelectItem, Section as MultiSelectSection, } from '@react-stately/collections';
|
|
5
5
|
export type OptionItem = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
type PopoverProps = {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
className?: string;
|
|
@@ -6,5 +6,6 @@ type PopoverProps = {
|
|
|
6
6
|
onClose: () => void;
|
|
7
7
|
triggerRef: React.RefObject<HTMLButtonElement>;
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
/** Do we really need two different popovers */
|
|
10
|
+
export declare function Popover({ isOpen, onClose, children, className, triggerRef, }: PopoverProps): JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import type { HTMLAttributes, RefObject } from "react";
|
|
2
|
+
import type { AriaListBoxOptions } from "@react-aria/listbox";
|
|
3
3
|
import type { AriaButtonProps } from "@react-types/button";
|
|
4
4
|
import type { AriaSelectProps } from "@react-types/select";
|
|
5
5
|
import type { MultiSelectProps as MultiSelectStateProps, MultiSelectState } from "./useMultiSelectState";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import type { Key } from "react";
|
|
2
|
+
import { type ListState } from "@react-stately/list";
|
|
3
|
+
import type { CollectionBase, MultipleSelection, Node } from "@react-types/shared";
|
|
4
4
|
export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {
|
|
5
5
|
filter?: (nodes: Iterable<Node<T>>) => Iterable<Node<T>>;
|
|
6
6
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { MenuTriggerState } from "@react-stately/menu";
|
|
2
|
-
import { MultiSelectListState } from "./useMultiSelectListState";
|
|
1
|
+
import type { MenuTriggerState } from "@react-stately/menu";
|
|
3
2
|
import type { OverlayTriggerProps } from "@react-types/overlays";
|
|
4
3
|
import type { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from "@react-types/shared";
|
|
4
|
+
import type { MultiSelectListState } from "./useMultiSelectListState";
|
|
5
5
|
export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, "isReadOnly">, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
|
|
6
6
|
/**
|
|
7
7
|
* Whether the menu should automatically flip direction when space is limited.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type AriaButtonProps } from '@react-aria/button';
|
|
2
1
|
import { type ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { type AriaButtonProps } from '@react-aria/button';
|
|
3
3
|
export type ReactAriaButtonProps = AriaButtonProps & ComponentPropsWithoutRef<'button'>;
|
|
4
4
|
/** For internal use only! */
|
|
5
5
|
export declare function ReactAriaButton(props: ReactAriaButtonProps): JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
3
|
-
export declare const StyledSegmentControlRoot: import("styled-components").StyledComponent<
|
|
3
|
+
export declare const StyledSegmentControlRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps | ToggleGroup.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
export type SegmentControlRootProps = Omit<ToggleGroup.ToggleGroupSingleProps, 'type' | 'style' | 'className'> & {
|
|
5
5
|
size?: 'small' | 'large';
|
|
6
6
|
};
|
|
7
7
|
export declare const SegmentControlRoot: ({ children, size, ...props }: SegmentControlRootProps) => JSX.Element;
|
|
8
|
-
export declare const SegmentControlItem: import("styled-components").StyledComponent<
|
|
8
|
+
export declare const SegmentControlItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
|