@theroutingcompany/components 0.0.17 → 0.0.18-alpha.2
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/README.md +22 -4
- package/dist/trc-components.es.js +11385 -9311
- package/dist/trc-components.es.js.map +1 -1
- package/dist/trc-components.umd.js +836 -804
- package/dist/trc-components.umd.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +83 -82
- package/types/components/Box/Box.d.ts +133 -0
- package/types/components/Checkbox/Checkbox.d.ts +3 -1
- package/types/components/Dialog/Dialog.d.ts +4 -2
- package/types/components/Flex/Flex.d.ts +73 -0
- package/types/components/FormControl/FormControl.d.ts +2 -2
- package/types/components/Page/Page.d.ts +15 -1
- package/types/helpers/tokenUtils.d.ts +19 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@theroutingcompany/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.18-alpha.2",
|
|
4
4
|
"description": "The Routing Company Components",
|
|
5
5
|
"main": "./dist/trc-components.umd.js",
|
|
6
6
|
"module": "./dist/trc-components.es.js",
|
|
@@ -37,70 +37,71 @@
|
|
|
37
37
|
"sideEffects": false,
|
|
38
38
|
"license": "ISC",
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@internationalized/date": "
|
|
40
|
+
"@internationalized/date": "3.1.0",
|
|
41
41
|
"@material-ui/icons": "^4.11.3",
|
|
42
|
-
"@radix-ui/react-accessible-icon": "^1.0.
|
|
43
|
-
"@radix-ui/react-alert-dialog": "^1.0.
|
|
44
|
-
"@radix-ui/react-checkbox": "^1.0.
|
|
45
|
-
"@radix-ui/react-collapsible": "^1.0.
|
|
46
|
-
"@radix-ui/react-dialog": "^1.0.
|
|
42
|
+
"@radix-ui/react-accessible-icon": "^1.0.2",
|
|
43
|
+
"@radix-ui/react-alert-dialog": "^1.0.3",
|
|
44
|
+
"@radix-ui/react-checkbox": "^1.0.3",
|
|
45
|
+
"@radix-ui/react-collapsible": "^1.0.2",
|
|
46
|
+
"@radix-ui/react-dialog": "^1.0.3",
|
|
47
47
|
"@radix-ui/react-polymorphic": "^0.0.14",
|
|
48
|
-
"@radix-ui/react-popover": "^1.0.
|
|
49
|
-
"@radix-ui/react-radio-group": "^1.1.
|
|
50
|
-
"@radix-ui/react-select": "^1.2.
|
|
51
|
-
"@radix-ui/react-separator": "^1.0.
|
|
52
|
-
"@radix-ui/react-switch": "^1.0.
|
|
53
|
-
"@radix-ui/react-tabs": "^1.0.
|
|
54
|
-
"@radix-ui/react-toast": "^1.1.
|
|
55
|
-
"@radix-ui/react-toggle-group": "^1.0.
|
|
56
|
-
"@radix-ui/react-tooltip": "^1.0.
|
|
57
|
-
"@react-aria/breadcrumbs": "
|
|
58
|
-
"@react-aria/button": "
|
|
59
|
-
"@react-aria/combobox": "
|
|
60
|
-
"@react-aria/datepicker": "
|
|
61
|
-
"@react-aria/dnd": "
|
|
62
|
-
"@react-aria/focus": "
|
|
63
|
-
"@react-aria/i18n": "
|
|
64
|
-
"@react-aria/interactions": "
|
|
65
|
-
"@react-aria/label": "
|
|
66
|
-
"@react-aria/listbox": "
|
|
67
|
-
"@react-aria/menu": "
|
|
68
|
-
"@react-aria/numberfield": "
|
|
69
|
-
"@react-aria/overlays": "
|
|
70
|
-
"@react-aria/progress": "
|
|
71
|
-
"@react-aria/radio": "
|
|
72
|
-
"@react-aria/searchfield": "
|
|
73
|
-
"@react-aria/select": "
|
|
74
|
-
"@react-aria/selection": "
|
|
75
|
-
"@react-aria/textfield": "
|
|
76
|
-
"@react-aria/utils": "
|
|
77
|
-
"@react-stately/collections": "
|
|
78
|
-
"@react-stately/combobox": "
|
|
79
|
-
"@react-stately/datepicker": "
|
|
80
|
-
"@react-stately/list": "
|
|
81
|
-
"@react-stately/menu": "
|
|
82
|
-
"@react-stately/numberfield": "
|
|
83
|
-
"@react-stately/overlays": "
|
|
84
|
-
"@react-stately/radio": "
|
|
85
|
-
"@react-stately/searchfield": "
|
|
86
|
-
"@react-stately/select": "
|
|
87
|
-
"@react-stately/selection": "
|
|
88
|
-
"@react-types/combobox": "
|
|
89
|
-
"@react-types/overlays": "
|
|
90
|
-
"@react-types/select": "
|
|
91
|
-
"@tanstack/react-table": "^8.7.
|
|
48
|
+
"@radix-ui/react-popover": "^1.0.5",
|
|
49
|
+
"@radix-ui/react-radio-group": "^1.1.2",
|
|
50
|
+
"@radix-ui/react-select": "^1.2.1",
|
|
51
|
+
"@radix-ui/react-separator": "^1.0.2",
|
|
52
|
+
"@radix-ui/react-switch": "^1.0.2",
|
|
53
|
+
"@radix-ui/react-tabs": "^1.0.3",
|
|
54
|
+
"@radix-ui/react-toast": "^1.1.3",
|
|
55
|
+
"@radix-ui/react-toggle-group": "^1.0.3",
|
|
56
|
+
"@radix-ui/react-tooltip": "^1.0.4",
|
|
57
|
+
"@react-aria/breadcrumbs": "3.5.0",
|
|
58
|
+
"@react-aria/button": "3.7.0",
|
|
59
|
+
"@react-aria/combobox": "3.5.0",
|
|
60
|
+
"@react-aria/datepicker": "3.3.0",
|
|
61
|
+
"@react-aria/dnd": "3.1.0",
|
|
62
|
+
"@react-aria/focus": "3.11.0",
|
|
63
|
+
"@react-aria/i18n": "3.7.0",
|
|
64
|
+
"@react-aria/interactions": "3.14.0",
|
|
65
|
+
"@react-aria/label": "3.5.0",
|
|
66
|
+
"@react-aria/listbox": "3.8.0",
|
|
67
|
+
"@react-aria/menu": "3.8.0",
|
|
68
|
+
"@react-aria/numberfield": "3.4.0",
|
|
69
|
+
"@react-aria/overlays": "3.13.0",
|
|
70
|
+
"@react-aria/progress": "3.4.0",
|
|
71
|
+
"@react-aria/radio": "3.5.0",
|
|
72
|
+
"@react-aria/searchfield": "3.5.0",
|
|
73
|
+
"@react-aria/select": "3.9.0",
|
|
74
|
+
"@react-aria/selection": "3.13.0",
|
|
75
|
+
"@react-aria/textfield": "3.9.0",
|
|
76
|
+
"@react-aria/utils": "3.15.0",
|
|
77
|
+
"@react-stately/collections": "3.6.0",
|
|
78
|
+
"@react-stately/combobox": "3.4.0",
|
|
79
|
+
"@react-stately/datepicker": "3.3.0",
|
|
80
|
+
"@react-stately/list": "3.7.0",
|
|
81
|
+
"@react-stately/menu": "3.5.0",
|
|
82
|
+
"@react-stately/numberfield": "3.4.0",
|
|
83
|
+
"@react-stately/overlays": "3.5.0",
|
|
84
|
+
"@react-stately/radio": "3.7.0",
|
|
85
|
+
"@react-stately/searchfield": "3.4.0",
|
|
86
|
+
"@react-stately/select": "3.4.0",
|
|
87
|
+
"@react-stately/selection": "3.12.0",
|
|
88
|
+
"@react-types/combobox": "3.6.0",
|
|
89
|
+
"@react-types/overlays": "3.7.0",
|
|
90
|
+
"@react-types/select": "3.7.0",
|
|
91
|
+
"@tanstack/react-table": "^8.7.9",
|
|
92
92
|
"@theroutingcompany/design-tokens": "^0.0.3",
|
|
93
|
-
"styled-components": "^5.3.
|
|
93
|
+
"styled-components": "^5.3.8"
|
|
94
94
|
},
|
|
95
95
|
"peerDependencies": {
|
|
96
96
|
"@material-ui/icons": "^4.11.3",
|
|
97
|
-
"react": "^18.0.0",
|
|
98
|
-
"react-dom": "
|
|
99
|
-
"react
|
|
100
|
-
"
|
|
97
|
+
"@types/react": "^18.0.0",
|
|
98
|
+
"@types/react-dom": "^18.0.0",
|
|
99
|
+
"react": "^18.2.0",
|
|
100
|
+
"react-dom": "^18.2.0",
|
|
101
|
+
"react-is": "^18.2.0"
|
|
101
102
|
},
|
|
102
103
|
"devDependencies": {
|
|
103
|
-
"@babel/core": "^7.
|
|
104
|
+
"@babel/core": "^7.21.0",
|
|
104
105
|
"@material-ui/core": "^4.12.4",
|
|
105
106
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
106
107
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
@@ -112,35 +113,35 @@
|
|
|
112
113
|
"@storybook/react": "^7.0.0-beta.2",
|
|
113
114
|
"@storybook/react-vite": "^7.0.0-alpha.25",
|
|
114
115
|
"@storybook/testing-library": "^0.0.14-next.0",
|
|
115
|
-
"@types/eslint": "^8.
|
|
116
|
+
"@types/eslint": "^8.21.1",
|
|
116
117
|
"@types/prettier": "^2.7.2",
|
|
117
|
-
"@types/react": "^18.0.
|
|
118
|
-
"@types/react-dom": "^18.0.
|
|
119
|
-
"@types/react-is": "^17.0.
|
|
118
|
+
"@types/react": "^18.0.28",
|
|
119
|
+
"@types/react-dom": "^18.0.11",
|
|
120
|
+
"@types/react-is": "^17.0.3",
|
|
120
121
|
"@types/styled-components": "^5.1.26",
|
|
121
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
122
|
-
"@typescript-eslint/parser": "^5.
|
|
123
|
-
"@vitejs/plugin-react": "^3.0
|
|
124
|
-
"chromatic": "^6.
|
|
122
|
+
"@typescript-eslint/eslint-plugin": "^5.54.0",
|
|
123
|
+
"@typescript-eslint/parser": "^5.54.0",
|
|
124
|
+
"@vitejs/plugin-react": "^3.1.0",
|
|
125
|
+
"chromatic": "^6.17.1",
|
|
125
126
|
"csstype": "^3.1.1",
|
|
126
|
-
"eslint": "^8.
|
|
127
|
+
"eslint": "^8.35.0",
|
|
127
128
|
"eslint-config-prettier": "^8.6.0",
|
|
128
|
-
"eslint-plugin-jsx-a11y": "^6.7.
|
|
129
|
-
"eslint-plugin-react": "^7.32.
|
|
130
|
-
"eslint-plugin-storybook": "^0.6.
|
|
131
|
-
"postcss-styled-syntax": "^0.3.
|
|
132
|
-
"prettier": "^2.8.
|
|
133
|
-
"react": "^18.
|
|
134
|
-
"react-dom": "^18.
|
|
135
|
-
"react-is": "^18.
|
|
136
|
-
"rimraf": "^
|
|
129
|
+
"eslint-plugin-jsx-a11y": "^6.7.1",
|
|
130
|
+
"eslint-plugin-react": "^7.32.2",
|
|
131
|
+
"eslint-plugin-storybook": "^0.6.11",
|
|
132
|
+
"postcss-styled-syntax": "^0.3.3",
|
|
133
|
+
"prettier": "^2.8.4",
|
|
134
|
+
"react": "^18.2.0",
|
|
135
|
+
"react-dom": "^18.2.0",
|
|
136
|
+
"react-is": "^18.2.0",
|
|
137
|
+
"rimraf": "^4.1.2",
|
|
137
138
|
"storybook": "^7.0.0-beta.21",
|
|
138
|
-
"stylelint": "^
|
|
139
|
-
"stylelint-config-prettier": "^9.0.
|
|
140
|
-
"stylelint-config-standard": "^
|
|
141
|
-
"type-fest": "^3.
|
|
142
|
-
"typescript": "^4.9.
|
|
143
|
-
"vite": "^4.
|
|
144
|
-
"vite-tsconfig-paths": "^4.0.
|
|
139
|
+
"stylelint": "^15.2.0",
|
|
140
|
+
"stylelint-config-prettier": "^9.0.5",
|
|
141
|
+
"stylelint-config-standard": "^30.0.1",
|
|
142
|
+
"type-fest": "^3.6.1",
|
|
143
|
+
"typescript": "^4.9.5",
|
|
144
|
+
"vite": "^4.1.4",
|
|
145
|
+
"vite-tsconfig-paths": "^4.0.5"
|
|
145
146
|
}
|
|
146
147
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import type { Property } from 'csstype';
|
|
2
|
+
import type { PropsWithChildren } from 'react';
|
|
3
|
+
import type { BorderRadiusToken, ElevationToken, RemoveVendorProperties, SizingToken, SpacingToken } from '../../helpers/tokenUtils';
|
|
4
|
+
export type BoxProps = PropsWithChildren<{
|
|
5
|
+
display?: 'block' | 'inline-block' | 'contents' | 'none' | 'inline';
|
|
6
|
+
position?: RemoveVendorProperties<Property.Position>;
|
|
7
|
+
top?: Property.Top<SpacingToken>;
|
|
8
|
+
bottom?: Property.Bottom<SpacingToken>;
|
|
9
|
+
left?: Property.Left<SpacingToken>;
|
|
10
|
+
right?: Property.Right<SpacingToken>;
|
|
11
|
+
zIndex?: Property.ZIndex;
|
|
12
|
+
/** width */
|
|
13
|
+
w?: RemoveVendorProperties<Property.Width<SizingToken>>;
|
|
14
|
+
/** min-width */
|
|
15
|
+
minW?: RemoveVendorProperties<Property.MinWidth<SizingToken>>;
|
|
16
|
+
/** max-width */
|
|
17
|
+
maxW?: RemoveVendorProperties<Property.MaxWidth<SizingToken>>;
|
|
18
|
+
/** height */
|
|
19
|
+
h?: RemoveVendorProperties<Property.Height<SizingToken>>;
|
|
20
|
+
/** min-height */
|
|
21
|
+
minH?: RemoveVendorProperties<Property.MinHeight<SizingToken>>;
|
|
22
|
+
/** max-height */
|
|
23
|
+
maxH?: RemoveVendorProperties<Property.MaxHeight<SizingToken>>;
|
|
24
|
+
/** margin */
|
|
25
|
+
m?: RemoveVendorProperties<Property.Margin<SpacingToken>>;
|
|
26
|
+
/** margin-top */
|
|
27
|
+
mt?: RemoveVendorProperties<Property.MarginTop<SpacingToken>>;
|
|
28
|
+
/** margin-bottom */
|
|
29
|
+
mb?: RemoveVendorProperties<Property.MarginBottom<SpacingToken>>;
|
|
30
|
+
/** margin-left */
|
|
31
|
+
ml?: RemoveVendorProperties<Property.MarginLeft<SpacingToken>>;
|
|
32
|
+
/** margin-right */
|
|
33
|
+
mr?: RemoveVendorProperties<Property.MarginRight<SpacingToken>>;
|
|
34
|
+
/** padding */
|
|
35
|
+
p?: RemoveVendorProperties<Property.Padding<SpacingToken>>;
|
|
36
|
+
/** padding-top */
|
|
37
|
+
pt?: RemoveVendorProperties<Property.PaddingTop<SpacingToken>>;
|
|
38
|
+
/** padding-right */
|
|
39
|
+
pr?: RemoveVendorProperties<Property.PaddingRight<SpacingToken>>;
|
|
40
|
+
/** padding-bottom */
|
|
41
|
+
pb?: RemoveVendorProperties<Property.PaddingBottom<SpacingToken>>;
|
|
42
|
+
/** padding-left */
|
|
43
|
+
pl?: RemoveVendorProperties<Property.PaddingLeft<SpacingToken>>;
|
|
44
|
+
borderRadius?: Property.BorderRadius<BorderRadiusToken>;
|
|
45
|
+
borderTopLeftRadius?: Property.BorderTopLeftRadius<BorderRadiusToken>;
|
|
46
|
+
borderTopRightRadius?: Property.BorderTopRightRadius<BorderRadiusToken>;
|
|
47
|
+
borderBottomLeftRadius?: Property.BorderBottomLeftRadius<BorderRadiusToken>;
|
|
48
|
+
borderBottomRightRadius?: Property.BorderBottomRightRadius<BorderRadiusToken>;
|
|
49
|
+
/** box-shadow */
|
|
50
|
+
elevation?: ElevationToken;
|
|
51
|
+
flexShrink?: RemoveVendorProperties<Property.FlexShrink>;
|
|
52
|
+
flexGrow?: RemoveVendorProperties<Property.FlexGrow>;
|
|
53
|
+
flexBasis?: RemoveVendorProperties<Property.FlexBasis<SizingToken>>;
|
|
54
|
+
flex?: Property.Flex<SizingToken>;
|
|
55
|
+
alignSelf?: Property.AlignSelf;
|
|
56
|
+
order?: Property.Order;
|
|
57
|
+
border?: Property.Border;
|
|
58
|
+
borderColor?: Property.BorderColor;
|
|
59
|
+
borderWidth?: Property.BorderWidth;
|
|
60
|
+
/** background */
|
|
61
|
+
bg?: Property.Background;
|
|
62
|
+
/** background-color */
|
|
63
|
+
bgColor?: Property.BackgroundColor;
|
|
64
|
+
opacity?: Property.Background;
|
|
65
|
+
color?: Property.Color;
|
|
66
|
+
overflow?: RemoveVendorProperties<Property.Overflow>;
|
|
67
|
+
}>;
|
|
68
|
+
export declare const Box: import("styled-components").StyledComponent<"div", any, {
|
|
69
|
+
display?: "none" | "inline" | "contents" | "block" | "inline-block" | undefined;
|
|
70
|
+
position?: "inherit" | "fixed" | "sticky" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "static" | undefined;
|
|
71
|
+
top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
72
|
+
bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
73
|
+
left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
74
|
+
right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
75
|
+
zIndex?: Property.ZIndex | undefined;
|
|
76
|
+
/** width */
|
|
77
|
+
w?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "min-intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
78
|
+
/** min-width */
|
|
79
|
+
minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "min-intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
80
|
+
/** max-width */
|
|
81
|
+
maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
82
|
+
/** height */
|
|
83
|
+
h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
84
|
+
/** min-height */
|
|
85
|
+
minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
86
|
+
/** max-height */
|
|
87
|
+
maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
88
|
+
/** margin */
|
|
89
|
+
m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
90
|
+
/** margin-top */
|
|
91
|
+
mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
92
|
+
/** margin-bottom */
|
|
93
|
+
mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
94
|
+
/** margin-left */
|
|
95
|
+
ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
96
|
+
/** margin-right */
|
|
97
|
+
mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
98
|
+
/** padding */
|
|
99
|
+
p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
100
|
+
/** padding-top */
|
|
101
|
+
pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
102
|
+
/** padding-right */
|
|
103
|
+
pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
104
|
+
/** padding-bottom */
|
|
105
|
+
pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
106
|
+
/** padding-left */
|
|
107
|
+
pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
108
|
+
borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
109
|
+
borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
110
|
+
borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
111
|
+
borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
112
|
+
borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
113
|
+
/** box-shadow */
|
|
114
|
+
elevation?: ElevationToken | undefined;
|
|
115
|
+
flexShrink?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
|
|
116
|
+
flexGrow?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
|
|
117
|
+
flexBasis?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "content" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
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
|
+
alignSelf?: Property.AlignSelf | undefined;
|
|
120
|
+
order?: Property.Order | undefined;
|
|
121
|
+
border?: Property.Border<0 | (string & {})> | undefined;
|
|
122
|
+
borderColor?: Property.BorderColor | undefined;
|
|
123
|
+
borderWidth?: Property.BorderWidth<0 | (string & {})> | undefined;
|
|
124
|
+
/** background */
|
|
125
|
+
bg?: Property.Background<0 | (string & {})> | undefined;
|
|
126
|
+
/** background-color */
|
|
127
|
+
bgColor?: Property.BackgroundColor | undefined;
|
|
128
|
+
opacity?: Property.Background<0 | (string & {})> | undefined;
|
|
129
|
+
color?: Property.Color | undefined;
|
|
130
|
+
overflow?: "auto" | "hidden" | (string & {}) | "inherit" | "clip" | "initial" | "revert" | "revert-layer" | "unset" | "visible" | "scroll" | undefined;
|
|
131
|
+
} & {
|
|
132
|
+
children?: import("react").ReactNode;
|
|
133
|
+
}, never>;
|
|
@@ -4,4 +4,6 @@ export type CheckedState = CheckboxPrimitive.CheckedState;
|
|
|
4
4
|
export type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'defaultChecked'> & {
|
|
5
5
|
invalid?: boolean;
|
|
6
6
|
};
|
|
7
|
-
export declare
|
|
7
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "defaultChecked"> & {
|
|
8
|
+
invalid?: boolean | undefined;
|
|
9
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
2
2
|
import type { ComponentPropsWithRef } from 'react';
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const contentShow: import("styled-components").Keyframes;
|
|
3
|
+
export declare const overlayStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
5
4
|
export declare const dialogWidths: {
|
|
6
5
|
readonly small: "360px";
|
|
7
6
|
readonly medium: "540px";
|
|
@@ -11,9 +10,12 @@ type DialogWidth = keyof typeof dialogWidths;
|
|
|
11
10
|
type StyledContentProps = {
|
|
12
11
|
size?: DialogWidth;
|
|
13
12
|
};
|
|
13
|
+
export declare const dialogContentStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
14
14
|
export type DialogContentProps = StyledContentProps & DialogPrimitive.DialogContentProps & ComponentPropsWithRef<'div'>;
|
|
15
15
|
export declare function DialogContent({ children, size, ...props }: DialogContentProps): JSX.Element;
|
|
16
|
+
export declare const dialogTitleStyles: string;
|
|
16
17
|
export declare const DialogTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
|
|
18
|
+
export declare const dialogDescriptionStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
17
19
|
export declare const DialogDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
|
|
18
20
|
export declare const DialogFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
|
|
19
21
|
export declare const DialogCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { type SpacingToken } from 'helpers/tokenUtils';
|
|
2
|
+
import type { Property } from 'csstype';
|
|
3
|
+
import type { PropsWithChildren } from 'react';
|
|
4
|
+
export type FlexProps = PropsWithChildren<{
|
|
5
|
+
display?: 'flex' | "inline-flex";
|
|
6
|
+
wrap?: Property.FlexWrap;
|
|
7
|
+
direction?: Property.FlexDirection;
|
|
8
|
+
alignItems?: Property.AlignItems;
|
|
9
|
+
alignContent?: Property.AlignContent;
|
|
10
|
+
justifyContent?: Property.JustifyContent;
|
|
11
|
+
flow?: Property.FlexFlow;
|
|
12
|
+
gap?: Property.Gap<SpacingToken>;
|
|
13
|
+
columnGap?: Property.ColumnGap<SpacingToken>;
|
|
14
|
+
rowGap?: Property.RowGap<SpacingToken>;
|
|
15
|
+
}>;
|
|
16
|
+
export declare const Flex: import("styled-components").StyledComponent<"div", any, {
|
|
17
|
+
display?: "none" | "inline" | "contents" | "block" | "inline-block" | undefined;
|
|
18
|
+
position?: "inherit" | "fixed" | "sticky" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "static" | undefined;
|
|
19
|
+
top?: Property.Top<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
20
|
+
bottom?: Property.Bottom<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
21
|
+
left?: Property.Left<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
22
|
+
right?: Property.Right<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
23
|
+
zIndex?: Property.ZIndex | undefined;
|
|
24
|
+
w?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "min-intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
25
|
+
minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "min-intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
26
|
+
maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
27
|
+
h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
28
|
+
minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
29
|
+
maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "intrinsic" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
30
|
+
m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
31
|
+
mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
32
|
+
mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
33
|
+
ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
34
|
+
mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
35
|
+
p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
36
|
+
pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
37
|
+
pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
38
|
+
pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
39
|
+
pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | undefined;
|
|
40
|
+
borderRadius?: Property.BorderRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
41
|
+
borderTopLeftRadius?: Property.BorderTopLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
42
|
+
borderTopRightRadius?: Property.BorderTopRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
43
|
+
borderBottomLeftRadius?: Property.BorderBottomLeftRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
44
|
+
borderBottomRightRadius?: Property.BorderBottomRightRadius<"0" | "400" | "circle" | "100" | "200" | "800" | "pill"> | undefined;
|
|
45
|
+
elevation?: import("helpers/tokenUtils").ElevationToken | undefined;
|
|
46
|
+
flexShrink?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
|
|
47
|
+
flexGrow?: (string & {}) | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | undefined;
|
|
48
|
+
flexBasis?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "content" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | undefined;
|
|
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
|
+
alignSelf?: Property.AlignSelf | undefined;
|
|
51
|
+
order?: Property.Order | undefined;
|
|
52
|
+
border?: Property.Border<0 | (string & {})> | undefined;
|
|
53
|
+
borderColor?: Property.BorderColor | undefined;
|
|
54
|
+
borderWidth?: Property.BorderWidth<0 | (string & {})> | undefined;
|
|
55
|
+
bg?: Property.Background<0 | (string & {})> | undefined;
|
|
56
|
+
bgColor?: Property.BackgroundColor | undefined;
|
|
57
|
+
opacity?: Property.Background<0 | (string & {})> | undefined;
|
|
58
|
+
color?: Property.Color | undefined;
|
|
59
|
+
overflow?: "auto" | "hidden" | (string & {}) | "inherit" | "clip" | "initial" | "revert" | "revert-layer" | "unset" | "visible" | "scroll" | undefined;
|
|
60
|
+
} & {
|
|
61
|
+
children?: import("react").ReactNode;
|
|
62
|
+
} & {
|
|
63
|
+
display?: "flex" | "inline-flex" | undefined;
|
|
64
|
+
wrap?: Property.FlexWrap | undefined;
|
|
65
|
+
direction?: Property.FlexDirection | undefined;
|
|
66
|
+
alignItems?: Property.AlignItems | undefined;
|
|
67
|
+
alignContent?: Property.AlignContent | undefined;
|
|
68
|
+
justifyContent?: Property.JustifyContent | undefined;
|
|
69
|
+
flow?: Property.FlexFlow | undefined;
|
|
70
|
+
gap?: Property.Gap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
71
|
+
columnGap?: Property.ColumnGap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
72
|
+
rowGap?: Property.RowGap<"0" | "300" | "400" | "500" | "600" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900"> | undefined;
|
|
73
|
+
}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PropsWithChildren, type ReactNode } from 'react';
|
|
2
|
-
import { type AriaFieldProps } from '@react-aria/label';
|
|
2
|
+
import { type AriaFieldProps, type FieldAria } from '@react-aria/label';
|
|
3
3
|
import type { AriaTextFieldProps } from '@react-aria/textfield';
|
|
4
4
|
import type { ComponentPropsWithoutStyles } from 'helpers/typeHelpers';
|
|
5
5
|
type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
|
|
@@ -7,7 +7,7 @@ type FormControlProps<FieldProps = AriaFieldProps> = PropsWithChildren<{
|
|
|
7
7
|
tooltipIcon?: ReactNode;
|
|
8
8
|
} & FieldProps>;
|
|
9
9
|
/** If in a `<FormControl/>`, read `fieldProps` generated by that FormControl's `useField` hook */
|
|
10
|
-
export declare function useFieldProps():
|
|
10
|
+
export declare function useFieldProps(): FieldAria['fieldProps'];
|
|
11
11
|
export declare function FormControl({ children, label, errorMessage, description, tooltipContent, tooltipIcon, validationState, id, ...props }: FormControlProps): JSX.Element;
|
|
12
12
|
export declare const TextFormControl: import("react").ForwardRefExoticComponent<{
|
|
13
13
|
tooltipContent?: string | undefined;
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
/** 12 column grid
|
|
1
|
+
/** 12 column grid with 2rem gapp
|
|
2
|
+
*
|
|
3
|
+
* | Description | CSS Variable | Default |
|
|
4
|
+
* |-------------------------|---------------------|---------|
|
|
5
|
+
* | Min width for columns | `--min-col-width` | 0 |
|
|
6
|
+
*/
|
|
2
7
|
export declare const PageGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
/** CSS for limiting page width
|
|
9
|
+
*
|
|
10
|
+
* | Description | CSS Variable | Default |
|
|
11
|
+
* |-------------|---------------------|---------|
|
|
12
|
+
* | Min. width | `--page-min-width` | 750px |
|
|
13
|
+
* | Ideal width | `--page-ideal-width`| 85% |
|
|
14
|
+
* | Max width | `--page-max-width` | 1600px |
|
|
15
|
+
*/
|
|
16
|
+
export declare const pageMinMaxWidth: import("styled-components").FlattenSimpleInterpolation;
|
|
3
17
|
/** Centered page container
|
|
4
18
|
*
|
|
5
19
|
* | Description | CSS Variable | Default |
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import nestedTokens from '@theroutingcompany/design-tokens/dist/json/tokens.json';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
3
|
+
export declare function filterDefined(obj: Record<PropertyKey, unknown> | CSSProperties | undefined): {
|
|
4
|
+
[k: string]: any;
|
|
5
|
+
} | undefined;
|
|
6
|
+
export type RemoveVendorProperties<P extends string | number> = P extends `-moz-${string}` | `-webkit-${string}` ? never : P;
|
|
7
|
+
type Spacing = (typeof nestedTokens)['spacing'];
|
|
8
|
+
export type SpacingToken = keyof Spacing;
|
|
9
|
+
export declare const getSpacingValue: (token: string) => string;
|
|
10
|
+
type Elevation = (typeof nestedTokens)['elevation'];
|
|
11
|
+
export type ElevationToken = `interactive_${keyof Elevation['interactive']}` | `static_${keyof Elevation['static']}`;
|
|
12
|
+
export declare const allElevations: (readonly [`interactive_${string}`, string] | readonly [`static_${string}`, string])[];
|
|
13
|
+
export declare const getElevation: (token: string) => string;
|
|
14
|
+
type BorderRadius = (typeof nestedTokens)['border-radius'];
|
|
15
|
+
export type BorderRadiusToken = keyof BorderRadius;
|
|
16
|
+
export declare const getBorderRadius: (token: string) => string;
|
|
17
|
+
export type SizingToken = keyof (typeof nestedTokens)['sizing'];
|
|
18
|
+
export declare const getSizingValue: (token: string) => string;
|
|
19
|
+
export {};
|