@theroutingcompany/components 0.0.18-alpha.1 → 0.0.18-alpha.10

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.
Files changed (22) hide show
  1. package/README.md +32 -4
  2. package/dist/trc-components.es.js +12171 -9462
  3. package/dist/trc-components.es.js.map +1 -1
  4. package/dist/trc-components.umd.js +1003 -847
  5. package/dist/trc-components.umd.js.map +1 -1
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/package.json +87 -83
  8. package/types/components/AlertDialog/AlertDialog.d.ts +2 -0
  9. package/types/components/Box/Box.d.ts +133 -0
  10. package/types/components/Checkbox/Checkbox.d.ts +3 -1
  11. package/types/components/Dialog/Dialog.d.ts +7 -3
  12. package/types/components/DropdownMenu/DropdownMenu.d.ts +19 -0
  13. package/types/components/FileUpload/FileUpload.d.ts +2 -2
  14. package/types/components/Flex/Flex.d.ts +73 -0
  15. package/types/components/IconButton/IconButton.d.ts +1 -1
  16. package/types/components/MultiSelect/MultiSelect.d.ts +10 -10
  17. package/types/components/Page/Page.d.ts +15 -1
  18. package/types/components/Popover/Popover.d.ts +1 -1
  19. package/types/components/index.d.ts +4 -0
  20. package/types/helpers/interactionStates.d.ts +6 -0
  21. package/types/helpers/tokenUtils.d.ts +19 -0
  22. package/types/helpers/typeHelpers.d.ts +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@theroutingcompany/components",
3
- "version": "0.0.18-alpha.1",
3
+ "version": "0.0.18-alpha.10",
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,75 @@
37
37
  "sideEffects": false,
38
38
  "license": "ISC",
39
39
  "dependencies": {
40
- "@internationalized/date": "3.0.3-nightly.3690",
40
+ "@internationalized/date": "3.1.0",
41
41
  "@material-ui/icons": "^4.11.3",
42
- "@radix-ui/react-accessible-icon": "^1.0.1",
43
- "@radix-ui/react-alert-dialog": "^1.0.2",
44
- "@radix-ui/react-checkbox": "^1.0.1",
45
- "@radix-ui/react-collapsible": "^1.0.1",
46
- "@radix-ui/react-dialog": "^1.0.2",
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
+ "@radix-ui/react-dropdown-menu": "^2.0.4",
47
48
  "@radix-ui/react-polymorphic": "^0.0.14",
48
- "@radix-ui/react-popover": "^1.0.3",
49
- "@radix-ui/react-radio-group": "^1.1.1",
50
- "@radix-ui/react-select": "^1.2.0",
51
- "@radix-ui/react-separator": "^1.0.1",
52
- "@radix-ui/react-switch": "^1.0.1",
53
- "@radix-ui/react-tabs": "^1.0.2",
54
- "@radix-ui/react-toast": "^1.1.2",
55
- "@radix-ui/react-toggle-group": "^1.0.2",
56
- "@radix-ui/react-tooltip": "^1.0.3",
57
- "@react-aria/breadcrumbs": "3.0.0-nightly.1990",
58
- "@react-aria/button": "3.0.0-nightly.1990",
59
- "@react-aria/combobox": "3.4.5-nightly.3690",
60
- "@react-aria/datepicker": "3.0.0-nightly.1990",
61
- "@react-aria/dnd": "3.0.2-nightly.3690",
62
- "@react-aria/focus": "3.0.0-nightly.1990",
63
- "@react-aria/i18n": "3.0.0-nightly.1990",
64
- "@react-aria/interactions": "3.0.0-nightly.1990",
65
- "@react-aria/label": "3.0.0-nightly.1990",
66
- "@react-aria/listbox": "3.7.3-nightly.3690",
67
- "@react-aria/menu": "3.7.2-nightly.3690",
68
- "@react-aria/numberfield": "3.0.0-nightly.1990",
69
- "@react-aria/overlays": "3.0.0-nightly.1990",
70
- "@react-aria/progress": "3.0.0-nightly.1990",
71
- "@react-aria/radio": "3.0.0-nightly.1990",
72
- "@react-aria/searchfield": "3.0.0-nightly.1990",
73
- "@react-aria/select": "3.8.5-nightly.3690",
74
- "@react-aria/selection": "3.0.0-nightly.1990",
75
- "@react-aria/textfield": "3.0.0-nightly.1990",
76
- "@react-aria/utils": "3.0.0-nightly.1990",
77
- "@react-stately/collections": "3.0.0-nightly.1990",
78
- "@react-stately/combobox": "3.3.2-nightly.3690",
79
- "@react-stately/datepicker": "3.0.0-nightly.1990",
80
- "@react-stately/list": "3.6.2-nightly.3690",
81
- "@react-stately/menu": "3.4.5-nightly.3690",
82
- "@react-stately/numberfield": "3.0.0-nightly.1990",
83
- "@react-stately/overlays": "3.4.5-nightly.3690",
84
- "@react-stately/radio": "3.0.0-nightly.1990",
85
- "@react-stately/searchfield": "3.0.0-nightly.1990",
86
- "@react-stately/select": "3.3.5-nightly.3690",
87
- "@react-stately/selection": "3.0.0-nightly.1990",
88
- "@react-types/combobox": "3.5.6-nightly.3690",
89
- "@react-types/overlays": "3.6.6-nightly.3690",
90
- "@react-types/select": "3.6.6-nightly.3690",
91
- "@tanstack/react-table": "^8.7.8",
49
+ "@radix-ui/react-popover": "^1.0.5",
50
+ "@radix-ui/react-radio-group": "^1.1.2",
51
+ "@radix-ui/react-select": "^1.2.1",
52
+ "@radix-ui/react-separator": "^1.0.2",
53
+ "@radix-ui/react-switch": "^1.0.2",
54
+ "@radix-ui/react-tabs": "^1.0.3",
55
+ "@radix-ui/react-toast": "^1.1.3",
56
+ "@radix-ui/react-toggle-group": "^1.0.3",
57
+ "@radix-ui/react-tooltip": "^1.0.4",
58
+ "@react-aria/breadcrumbs": "3.5.0",
59
+ "@react-aria/button": "3.7.0",
60
+ "@react-aria/combobox": "3.5.0",
61
+ "@react-aria/datepicker": "3.3.0",
62
+ "@react-aria/dnd": "3.1.0",
63
+ "@react-aria/focus": "3.11.0",
64
+ "@react-aria/i18n": "3.7.0",
65
+ "@react-aria/interactions": "3.14.0",
66
+ "@react-aria/label": "3.5.0",
67
+ "@react-aria/listbox": "3.8.0",
68
+ "@react-aria/menu": "3.8.0",
69
+ "@react-aria/numberfield": "3.4.0",
70
+ "@react-aria/overlays": "3.13.0",
71
+ "@react-aria/progress": "3.4.0",
72
+ "@react-aria/radio": "3.5.0",
73
+ "@react-aria/searchfield": "3.5.0",
74
+ "@react-aria/select": "3.9.0",
75
+ "@react-aria/selection": "3.13.0",
76
+ "@react-aria/textfield": "3.9.0",
77
+ "@react-aria/utils": "3.15.0",
78
+ "@react-stately/collections": "3.6.0",
79
+ "@react-stately/combobox": "3.4.0",
80
+ "@react-stately/datepicker": "3.3.0",
81
+ "@react-stately/list": "3.7.0",
82
+ "@react-stately/menu": "3.5.0",
83
+ "@react-stately/numberfield": "3.4.0",
84
+ "@react-stately/overlays": "3.5.0",
85
+ "@react-stately/radio": "3.7.0",
86
+ "@react-stately/searchfield": "3.4.0",
87
+ "@react-stately/select": "3.4.0",
88
+ "@react-stately/selection": "3.12.0",
89
+ "@react-types/combobox": "3.6.0",
90
+ "@react-types/overlays": "3.7.0",
91
+ "@react-types/select": "3.7.0",
92
+ "@tanstack/react-table": "^8.7.9",
92
93
  "@theroutingcompany/design-tokens": "^0.0.3",
93
- "styled-components": "^5.3.6"
94
+ "@types/react": "^18.0.0",
95
+ "csstype": "^3.1.1"
94
96
  },
95
97
  "peerDependencies": {
96
98
  "@material-ui/icons": "^4.11.3",
97
- "react": "^18.0.0",
98
- "react-dom": " ^18.0.0",
99
- "react-is": " ^18.0.0",
100
- "styled-components": "^5.3.6"
99
+ "@types/react": "^18.0.0",
100
+ "@types/react-dom": "^18.0.0",
101
+ "csstype": "^3.1.1",
102
+ "react": "^18.2.0",
103
+ "react-dom": "^18.2.0",
104
+ "react-is": "^18.2.0",
105
+ "styled-components": "^5.3.9"
101
106
  },
102
107
  "devDependencies": {
103
- "@babel/core": "^7.20.12",
108
+ "@babel/core": "^7.21.0",
104
109
  "@material-ui/core": "^4.12.4",
105
110
  "@rollup/plugin-node-resolve": "^15.0.1",
106
111
  "@rollup/plugin-typescript": "^11.0.0",
@@ -112,35 +117,34 @@
112
117
  "@storybook/react": "^7.0.0-beta.2",
113
118
  "@storybook/react-vite": "^7.0.0-alpha.25",
114
119
  "@storybook/testing-library": "^0.0.14-next.0",
115
- "@types/eslint": "^8.4.10",
120
+ "@types/eslint": "^8.21.1",
116
121
  "@types/prettier": "^2.7.2",
117
- "@types/react": "^18.0.0",
118
- "@types/react-dom": "^18.0.0",
119
- "@types/react-is": "^17.0.0",
122
+ "@types/react-dom": "^18.0.11",
123
+ "@types/react-is": "^17.0.3",
120
124
  "@types/styled-components": "^5.1.26",
121
- "@typescript-eslint/eslint-plugin": "^5.48.1",
122
- "@typescript-eslint/parser": "^5.48.1",
123
- "@vitejs/plugin-react": "^3.0.1",
124
- "chromatic": "^6.14.0",
125
- "csstype": "^3.1.1",
126
- "eslint": "^8.32.0",
125
+ "@typescript-eslint/eslint-plugin": "^5.54.0",
126
+ "@typescript-eslint/parser": "^5.54.0",
127
+ "@vitejs/plugin-react": "^3.1.0",
128
+ "chromatic": "^6.17.1",
129
+ "eslint": "^8.35.0",
127
130
  "eslint-config-prettier": "^8.6.0",
128
- "eslint-plugin-jsx-a11y": "^6.7.0",
129
- "eslint-plugin-react": "^7.32.0",
130
- "eslint-plugin-storybook": "^0.6.10",
131
- "postcss-styled-syntax": "^0.3.1",
132
- "prettier": "^2.8.3",
133
- "react": "^18.0.0",
134
- "react-dom": "^18.0.0",
135
- "react-is": "^18.0.0",
136
- "rimraf": "^3.0.2",
131
+ "eslint-plugin-jsx-a11y": "^6.7.1",
132
+ "eslint-plugin-react": "^7.32.2",
133
+ "eslint-plugin-storybook": "^0.6.11",
134
+ "postcss-styled-syntax": "^0.3.3",
135
+ "prettier": "^2.8.4",
136
+ "react": "^18.2.0",
137
+ "react-dom": "^18.2.0",
138
+ "react-is": "^18.2.0",
139
+ "rimraf": "^4.1.2",
137
140
  "storybook": "^7.0.0-beta.21",
138
- "stylelint": "^14.16.1",
139
- "stylelint-config-prettier": "^9.0.4",
140
- "stylelint-config-standard": "^29.0.0",
141
- "type-fest": "^3.5.1",
142
- "typescript": "^4.9.4",
143
- "vite": "^4.0.4",
144
- "vite-tsconfig-paths": "^4.0.3"
141
+ "styled-components": "^5.3.9",
142
+ "stylelint": "^15.2.0",
143
+ "stylelint-config-prettier": "^9.0.5",
144
+ "stylelint-config-standard": "^30.0.1",
145
+ "type-fest": "^3.6.1",
146
+ "typescript": "^4.9.5",
147
+ "vite": "^4.1.4",
148
+ "vite-tsconfig-paths": "^4.0.5"
145
149
  }
146
150
  }
package/types/components/AlertDialog/AlertDialog.d.ts CHANGED
@@ -15,4 +15,6 @@ export declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps
15
15
  export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
16
16
  export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
17
17
  export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
18
+ /** AlertDialog Cancel Button positioned in top right with × */
19
+ export declare const AlertDialogCancelButton: ({ children, ...buttonProps }: AlertDialogPrimitive.AlertDialogCancelProps) => JSX.Element;
18
20
  export {};
package/types/components/Box/Box.d.ts ADDED
@@ -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" | "block" | "inline-block" | "contents" | undefined;
70
+ position?: "inherit" | "fixed" | "static" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "sticky" | 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" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
78
+ /** min-width */
79
+ minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
80
+ /** max-width */
81
+ maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
82
+ /** height */
83
+ h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
84
+ /** min-height */
85
+ minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
86
+ /** max-height */
87
+ maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
88
+ /** margin */
89
+ m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
90
+ /** margin-top */
91
+ mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
92
+ /** margin-bottom */
93
+ mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
94
+ /** margin-left */
95
+ ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
96
+ /** margin-right */
97
+ mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
98
+ /** padding */
99
+ p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
100
+ /** padding-top */
101
+ pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
102
+ /** padding-right */
103
+ pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
104
+ /** padding-bottom */
105
+ pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
106
+ /** padding-left */
107
+ pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | 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" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | 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" | "scroll" | "visible" | undefined;
131
+ } & {
132
+ children?: import("react").ReactNode;
133
+ }, never>;
package/types/components/Checkbox/Checkbox.d.ts CHANGED
@@ -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 function Checkbox({ disabled, checked, invalid, onCheckedChange, ...props }: CheckboxProps): JSX.Element;
7
+ export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "defaultChecked"> & {
8
+ invalid?: boolean | undefined;
9
+ } & import("react").RefAttributes<HTMLButtonElement>>;
package/types/components/Dialog/Dialog.d.ts CHANGED
@@ -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 overlayShow: import("styled-components").Keyframes;
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,12 +10,17 @@ 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
- export declare const DialogCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
21
+ export declare const dialogCloseButtonStyles: import("styled-components").FlattenSimpleInterpolation;
22
+ /** Dialog Close Button positioned in top right with × */
23
+ export declare const DialogCloseButton: ({ children, ...buttonProps }: DialogPrimitive.DialogCloseProps) => JSX.Element;
20
24
  export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
21
25
  export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
22
26
  export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
package/types/components/DropdownMenu/DropdownMenu.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
3
+ export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemIndicatorProps, DropdownMenuLabelProps, MenuSubTriggerProps, MenuSubContentProps, MenuSeparatorProps, } from '@radix-ui/react-dropdown-menu';
4
+ export declare function DropdownMenuContent({ children, forceMount, ...props }: DropdownMenuPrimitive.DropdownMenuContentProps): JSX.Element;
5
+ export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
6
+ export declare const DropdownMenuPortal: import("react").FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
7
+ export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
8
+ export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
9
+ export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
10
+ export declare const DropdownMenuItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
11
+ export declare const DropdownMenuRadioItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
12
+ export declare const DropdownMenuCheckboxItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
13
+ export declare const DropdownMenuItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
14
+ export declare const DropdownMenuArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
15
+ export declare const DropdownMenuLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
16
+ export declare const DropdownMenuSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
17
+ export declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
18
+ export declare const DropdownMenuSubTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
19
+ export declare const DropdownMenuSubContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
package/types/components/FileUpload/FileUpload.d.ts CHANGED
@@ -4,10 +4,10 @@ export type FileDescription = {
4
4
  mime: `${string}/${string}`;
5
5
  };
6
6
  type DropTargetProps = {
7
- file: File | null;
7
+ file?: File | null | undefined;
8
8
  fileTypes: FileDescription[];
9
9
  onAddFile: (f: File) => void;
10
- onDeleteFile: () => void;
10
+ onDeleteFile?: (() => void) | undefined;
11
11
  };
12
12
  export declare const FileUpload: import("react").ForwardRefExoticComponent<DropTargetProps & import("react").RefAttributes<HTMLDivElement>>;
13
13
  export {};
package/types/components/Flex/Flex.d.ts ADDED
@@ -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" | "block" | "inline-block" | "contents" | undefined;
18
+ position?: "inherit" | "fixed" | "static" | "initial" | "revert" | "revert-layer" | "unset" | "absolute" | "relative" | "sticky" | 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" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
25
+ minW?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
26
+ maxW?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
27
+ h?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | undefined;
28
+ minH?: "0" | "auto" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
29
+ maxH?: "0" | "1000" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "none" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "intrinsic" | "max-content" | "min-content" | undefined;
30
+ m?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
31
+ mt?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
32
+ mb?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
33
+ ml?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
34
+ mr?: "0" | "auto" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
35
+ p?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
36
+ pt?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
37
+ pr?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
38
+ pb?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
39
+ pl?: "0" | "300" | "400" | "500" | "600" | (string & {}) | "inherit" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "initial" | "revert" | "revert-layer" | "unset" | 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" | "100" | "200" | "450" | "550" | "650" | "700" | "750" | "800" | "850" | "900" | "350" | "1100" | "1150" | "1200" | "1300" | "1350" | "1400" | "1500" | "initial" | "revert" | "revert-layer" | "unset" | "fit-content" | "max-content" | "min-content" | 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" | "scroll" | "visible" | 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>;
package/types/components/IconButton/IconButton.d.ts CHANGED
@@ -12,7 +12,7 @@ export type StyledIconButtonProps = AriaButtonProps & {
12
12
  shape?: Shape;
13
13
  disabled?: boolean;
14
14
  };
15
- /** Be sure to add add a `label` prop.
15
+ /** Be sure to add add a `label` prop. Note `aria-label` is already taken care of by the `label` prop.
16
16
  * ```jsx
17
17
  * <IconButton label="Add new item">
18
18
  * <AddIcon/>
package/types/components/MultiSelect/MultiSelect.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { CollectionChildren } from "@react-types/shared";
2
- import React from "react";
3
- import { useMultiSelectState } from "./useMultiSelectState";
4
- export { Item as MultiSelectItem, Section as MultiSelectSection } from "@react-stately/collections";
1
+ import type { CollectionChildren } from '@react-types/shared';
2
+ import React from 'react';
3
+ import { useMultiSelectState } from './useMultiSelectState';
4
+ export { Item as MultiSelectItem, Section as MultiSelectSection, } from '@react-stately/collections';
5
5
  export type OptionItem = {
6
6
  children?: never;
7
7
  id: string;
@@ -25,9 +25,9 @@ type MultiSelectProps = {
25
25
  /** Sets the default open state of the field (uncontrolled). */
26
26
  defaultOpen?: boolean;
27
27
  /** The initial selected keys in the collection (uncontrolled). */
28
- defaultSelectedKeys?: Parameters<typeof useMultiSelectState>["0"]["defaultSelectedKeys"];
28
+ defaultSelectedKeys?: Parameters<typeof useMultiSelectState>[number]['defaultSelectedKeys'];
29
29
  /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
30
- disabledKeys?: Parameters<typeof useMultiSelectState>["0"]["disabledKeys"];
30
+ disabledKeys?: Parameters<typeof useMultiSelectState>[number]['disabledKeys'];
31
31
  excludeFromTabOrder?: boolean;
32
32
  items: Option[];
33
33
  /** Whether the field can be emptied. */
@@ -43,13 +43,13 @@ type MultiSelectProps = {
43
43
  /** The content to display as the placeholder. */
44
44
  placeholder?: string;
45
45
  /** Handler that is called when the select's open state changes. */
46
- onOpenChange?: Parameters<typeof useMultiSelectState>["0"]["onOpenChange"];
46
+ onOpenChange?: Parameters<typeof useMultiSelectState>['0']['onOpenChange'];
47
47
  /** Handler that is called when the selection changes. */
48
- onSelectionChange?: Parameters<typeof useMultiSelectState>["0"]["onSelectionChange"];
48
+ onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
49
49
  /** The currently selected keys in the collection (controlled). */
50
- selectedKeys?: Parameters<typeof useMultiSelectState>["0"]["selectedKeys"];
50
+ selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
51
51
  /** The type of selection that is allowed in the collection. */
52
- selectionMode: "single" | "multiple";
52
+ selectionMode: 'single' | 'multiple';
53
53
  tooltipContent?: string;
54
54
  tooltipIcon?: string;
55
55
  };
package/types/components/Page/Page.d.ts CHANGED
@@ -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 |