@pingux/astro 2.36.0-alpha.1 → 2.36.0-alpha.3
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/lib/cjs/components/Badge/Badge.d.ts +4 -0
- package/lib/cjs/components/Badge/Badge.js +5 -31
- package/lib/cjs/components/Badge/Badge.stories.js +1 -1
- package/lib/cjs/components/Badge/Badge.styles.d.ts +781 -0
- package/lib/cjs/components/Badge/Badge.test.d.ts +1 -0
- package/lib/cjs/components/Badge/index.d.ts +1 -0
- package/lib/cjs/components/Box/Box.stories.js +1 -1
- package/lib/cjs/components/Button/Button.stories.d.ts +51 -5
- package/lib/cjs/components/Button/Button.stories.js +89 -40
- package/lib/cjs/components/Button/Buttons.styles.d.ts +72 -1
- package/lib/cjs/components/Button/Buttons.styles.js +18 -1
- package/lib/cjs/components/Calendar/Calendar.stories.js +48 -19
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +16 -10
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumbUniversal.test.js +10 -0
- package/lib/cjs/context/BadgeContext/index.d.ts +2 -0
- package/lib/cjs/hooks/useColumnStyles/index.d.ts +1 -0
- package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts +11 -0
- package/lib/cjs/hooks/useColumnStyles/useColumnStyles.js +7 -3
- package/lib/cjs/hooks/useField/useField.d.ts +20 -20
- package/lib/cjs/hooks/useRockerButton/useRockerButton.d.ts +3 -3
- package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +2 -1
- package/lib/cjs/styles/ColorDocumentation.js +1 -1
- package/lib/cjs/styles/colors.d.ts +302 -0
- package/lib/cjs/types/badge.d.ts +27 -0
- package/lib/cjs/types/badge.js +6 -0
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +21 -10
- package/lib/cjs/utils/designUtils/figmaLinks.js +14 -2
- package/lib/components/Badge/Badge.js +5 -31
- package/lib/components/Badge/Badge.stories.js +1 -1
- package/lib/components/Box/Box.stories.js +1 -1
- package/lib/components/Button/Button.stories.js +83 -34
- package/lib/components/Button/Buttons.styles.js +18 -1
- package/lib/components/Calendar/Calendar.stories.js +45 -15
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +13 -7
- package/lib/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumbUniversal.test.js +8 -0
- package/lib/hooks/useColumnStyles/useColumnStyles.js +7 -3
- package/lib/styles/ColorDocumentation.js +1 -1
- package/lib/types/badge.js +1 -0
- package/lib/types/index.js +1 -0
- package/lib/utils/designUtils/figmaLinks.js +14 -2
- package/package.json +2 -1
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js +0 -7
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js +0 -4
|
@@ -118,6 +118,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
118
118
|
variant?: string | undefined;
|
|
119
119
|
as?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
|
|
120
120
|
style?: string | import("react").CSSProperties | undefined;
|
|
121
|
+
border?: import("theme-ui").StylePropertyValue<import("csstype").Property.Border<string | number> | undefined>;
|
|
121
122
|
grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
|
|
122
123
|
accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
|
|
123
124
|
alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
|
|
@@ -474,7 +475,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
474
475
|
animation?: import("theme-ui").StylePropertyValue<import("csstype").Property.Animation<string & {}> | undefined>;
|
|
475
476
|
background?: import("theme-ui").StylePropertyValue<import("csstype").Property.Background<string | number> | undefined>;
|
|
476
477
|
backgroundPosition?: import("theme-ui").StylePropertyValue<import("csstype").Property.BackgroundPosition<string | number> | undefined>;
|
|
477
|
-
border?: import("theme-ui").StylePropertyValue<import("csstype").Property.Border<string | number> | undefined>;
|
|
478
478
|
borderBlock?: import("theme-ui").StylePropertyValue<import("csstype").Property.BorderBlock<string | number> | undefined>;
|
|
479
479
|
borderBlockEnd?: import("theme-ui").StylePropertyValue<import("csstype").Property.BorderBlockEnd<string | number> | undefined>;
|
|
480
480
|
borderBlockStart?: import("theme-ui").StylePropertyValue<import("csstype").Property.BorderBlockStart<string | number> | undefined>;
|
|
@@ -846,12 +846,12 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
846
846
|
'aria-description'?: string | undefined;
|
|
847
847
|
'aria-details'?: string | undefined;
|
|
848
848
|
'aria-disabled'?: (boolean | "false" | "true") | undefined;
|
|
849
|
-
'aria-dropeffect'?: "link" | "
|
|
849
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
850
850
|
'aria-errormessage'?: string | undefined;
|
|
851
851
|
'aria-expanded'?: (boolean | "false" | "true") | undefined;
|
|
852
852
|
'aria-flowto'?: string | undefined;
|
|
853
853
|
'aria-grabbed'?: (boolean | "false" | "true") | undefined;
|
|
854
|
-
'aria-haspopup'?: boolean | "dialog" | "
|
|
854
|
+
'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
|
|
855
855
|
'aria-hidden'?: (boolean | "false" | "true") | undefined;
|
|
856
856
|
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
857
857
|
'aria-keyshortcuts'?: string | undefined;
|
|
@@ -868,7 +868,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
868
868
|
'aria-posinset'?: number | undefined;
|
|
869
869
|
'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
|
|
870
870
|
'aria-readonly'?: (boolean | "false" | "true") | undefined;
|
|
871
|
-
'aria-relevant'?: "
|
|
871
|
+
'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
872
872
|
'aria-required'?: (boolean | "false" | "true") | undefined;
|
|
873
873
|
'aria-roledescription'?: string | undefined;
|
|
874
874
|
'aria-rowcount'?: number | undefined;
|
|
@@ -1054,10 +1054,8 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1054
1054
|
statusClasses?: {
|
|
1055
1055
|
[className: string]: boolean;
|
|
1056
1056
|
} | undefined;
|
|
1057
|
+
key?: Key | null | undefined;
|
|
1057
1058
|
form?: string | undefined;
|
|
1058
|
-
slot?: string | undefined;
|
|
1059
|
-
style?: import("react").CSSProperties | undefined;
|
|
1060
|
-
title?: string | undefined;
|
|
1061
1059
|
role?: import("react").AriaRole | undefined;
|
|
1062
1060
|
className: string;
|
|
1063
1061
|
'aria-activedescendant'?: string | undefined;
|
|
@@ -1077,12 +1075,12 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1077
1075
|
'aria-description'?: string | undefined;
|
|
1078
1076
|
'aria-details'?: string | undefined;
|
|
1079
1077
|
'aria-disabled'?: (boolean | "false" | "true") | undefined;
|
|
1080
|
-
'aria-dropeffect'?: "link" | "
|
|
1078
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
1081
1079
|
'aria-errormessage'?: string | undefined;
|
|
1082
1080
|
'aria-expanded'?: (boolean | "false" | "true") | undefined;
|
|
1083
1081
|
'aria-flowto'?: string | undefined;
|
|
1084
1082
|
'aria-grabbed'?: (boolean | "false" | "true") | undefined;
|
|
1085
|
-
'aria-haspopup'?: boolean | "dialog" | "
|
|
1083
|
+
'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
|
|
1086
1084
|
'aria-hidden'?: (boolean | "false" | "true") | undefined;
|
|
1087
1085
|
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
1088
1086
|
'aria-keyshortcuts'?: string | undefined;
|
|
@@ -1099,7 +1097,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1099
1097
|
'aria-posinset'?: number | undefined;
|
|
1100
1098
|
'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
|
|
1101
1099
|
'aria-readonly'?: (boolean | "false" | "true") | undefined;
|
|
1102
|
-
'aria-relevant'?: "
|
|
1100
|
+
'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
1103
1101
|
'aria-required'?: (boolean | "false" | "true") | undefined;
|
|
1104
1102
|
'aria-roledescription'?: string | undefined;
|
|
1105
1103
|
'aria-rowcount'?: number | undefined;
|
|
@@ -1116,7 +1114,9 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1116
1114
|
color?: string | undefined;
|
|
1117
1115
|
content?: string | undefined;
|
|
1118
1116
|
translate?: "yes" | "no" | undefined;
|
|
1119
|
-
|
|
1117
|
+
style?: import("react").CSSProperties | undefined;
|
|
1118
|
+
slot?: string | undefined;
|
|
1119
|
+
title?: string | undefined;
|
|
1120
1120
|
defaultChecked?: boolean | undefined;
|
|
1121
1121
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1122
1122
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -1156,7 +1156,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1156
1156
|
results?: number | undefined;
|
|
1157
1157
|
security?: string | undefined;
|
|
1158
1158
|
unselectable?: "off" | "on" | undefined;
|
|
1159
|
-
inputMode?: "
|
|
1159
|
+
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
1160
1160
|
is?: string | undefined;
|
|
1161
1161
|
children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
|
|
1162
1162
|
dangerouslySetInnerHTML?: {
|
|
@@ -1369,10 +1369,8 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1369
1369
|
statusClasses?: {
|
|
1370
1370
|
[className: string]: boolean;
|
|
1371
1371
|
} | undefined;
|
|
1372
|
+
key?: Key | null | undefined;
|
|
1372
1373
|
form?: string | undefined;
|
|
1373
|
-
slot?: string | undefined;
|
|
1374
|
-
style?: import("react").CSSProperties | undefined;
|
|
1375
|
-
title?: string | undefined;
|
|
1376
1374
|
role?: import("react").AriaRole | undefined;
|
|
1377
1375
|
className: string;
|
|
1378
1376
|
'aria-activedescendant'?: string | undefined;
|
|
@@ -1392,12 +1390,12 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1392
1390
|
'aria-description'?: string | undefined;
|
|
1393
1391
|
'aria-details'?: string | undefined;
|
|
1394
1392
|
'aria-disabled'?: (boolean | "false" | "true") | undefined;
|
|
1395
|
-
'aria-dropeffect'?: "link" | "
|
|
1393
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
1396
1394
|
'aria-errormessage'?: string | undefined;
|
|
1397
1395
|
'aria-expanded'?: (boolean | "false" | "true") | undefined;
|
|
1398
1396
|
'aria-flowto'?: string | undefined;
|
|
1399
1397
|
'aria-grabbed'?: (boolean | "false" | "true") | undefined;
|
|
1400
|
-
'aria-haspopup'?: boolean | "dialog" | "
|
|
1398
|
+
'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
|
|
1401
1399
|
'aria-hidden'?: (boolean | "false" | "true") | undefined;
|
|
1402
1400
|
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
1403
1401
|
'aria-keyshortcuts'?: string | undefined;
|
|
@@ -1414,7 +1412,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1414
1412
|
'aria-posinset'?: number | undefined;
|
|
1415
1413
|
'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
|
|
1416
1414
|
'aria-readonly'?: (boolean | "false" | "true") | undefined;
|
|
1417
|
-
'aria-relevant'?: "
|
|
1415
|
+
'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
1418
1416
|
'aria-required'?: (boolean | "false" | "true") | undefined;
|
|
1419
1417
|
'aria-roledescription'?: string | undefined;
|
|
1420
1418
|
'aria-rowcount'?: number | undefined;
|
|
@@ -1431,7 +1429,9 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1431
1429
|
color?: string | undefined;
|
|
1432
1430
|
content?: string | undefined;
|
|
1433
1431
|
translate?: "yes" | "no" | undefined;
|
|
1434
|
-
|
|
1432
|
+
style?: import("react").CSSProperties | undefined;
|
|
1433
|
+
slot?: string | undefined;
|
|
1434
|
+
title?: string | undefined;
|
|
1435
1435
|
defaultChecked?: boolean | undefined;
|
|
1436
1436
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1437
1437
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -1471,7 +1471,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
|
|
|
1471
1471
|
results?: number | undefined;
|
|
1472
1472
|
security?: string | undefined;
|
|
1473
1473
|
unselectable?: "off" | "on" | undefined;
|
|
1474
|
-
inputMode?: "
|
|
1474
|
+
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
1475
1475
|
is?: string | undefined;
|
|
1476
1476
|
children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
|
|
1477
1477
|
dangerouslySetInnerHTML?: {
|
|
@@ -35,12 +35,12 @@ declare const useRockerButton: (props: RockerButtonProps, state: {
|
|
|
35
35
|
'aria-describedby'?: string | undefined;
|
|
36
36
|
'aria-description'?: string | undefined;
|
|
37
37
|
'aria-details'?: string | undefined;
|
|
38
|
-
'aria-dropeffect'?: "link" | "
|
|
38
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
39
39
|
'aria-errormessage'?: string | undefined;
|
|
40
40
|
'aria-expanded'?: (boolean | "false" | "true") | undefined;
|
|
41
41
|
'aria-flowto'?: string | undefined;
|
|
42
42
|
'aria-grabbed'?: (boolean | "false" | "true") | undefined;
|
|
43
|
-
'aria-haspopup'?: boolean | "dialog" | "
|
|
43
|
+
'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
|
|
44
44
|
'aria-hidden'?: (boolean | "false" | "true") | undefined;
|
|
45
45
|
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
46
46
|
'aria-keyshortcuts'?: string | undefined;
|
|
@@ -56,7 +56,7 @@ declare const useRockerButton: (props: RockerButtonProps, state: {
|
|
|
56
56
|
'aria-placeholder'?: string | undefined;
|
|
57
57
|
'aria-posinset'?: number | undefined;
|
|
58
58
|
'aria-readonly'?: (boolean | "false" | "true") | undefined;
|
|
59
|
-
'aria-relevant'?: "
|
|
59
|
+
'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
60
60
|
'aria-required'?: (boolean | "false" | "true") | undefined;
|
|
61
61
|
'aria-roledescription'?: string | undefined;
|
|
62
62
|
'aria-rowcount'?: number | undefined;
|
|
@@ -4,6 +4,7 @@ import { SelectState } from 'react-stately';
|
|
|
4
4
|
import { CollectionChildren } from '@react-types/shared';
|
|
5
5
|
import { LabelProps as ThemeUILabelProps } from 'theme-ui';
|
|
6
6
|
import { Axis, BoxProps, FocusableElement, PlacementAxis, ReactRef, StyleProps } from '../../types';
|
|
7
|
+
import { LabelMode } from '../useColumnStyles/useColumnStyles';
|
|
7
8
|
import { FieldControlInputProps } from '../useField/useField';
|
|
8
9
|
interface UseSelectFieldProps<T> {
|
|
9
10
|
children: CollectionChildren<T>;
|
|
@@ -34,7 +35,7 @@ interface UseSelectFieldProps<T> {
|
|
|
34
35
|
listBoxProps?: BoxProps;
|
|
35
36
|
labelProps?: ThemeUILabelProps;
|
|
36
37
|
containerProps?: BoxProps;
|
|
37
|
-
labelMode:
|
|
38
|
+
labelMode: LabelMode;
|
|
38
39
|
}
|
|
39
40
|
interface UseSelectFieldReturnProps {
|
|
40
41
|
columnStyleProps: StyleProps;
|
|
@@ -25,7 +25,7 @@ var _Box = _interopRequireDefault(require("../components/Box"));
|
|
|
25
25
|
var _SelectField = _interopRequireDefault(require("../components/SelectField"));
|
|
26
26
|
var _Text = _interopRequireDefault(require("../components/Text"));
|
|
27
27
|
var _TextField = _interopRequireDefault(require("../components/TextField"));
|
|
28
|
-
var _colors = require("./colors
|
|
28
|
+
var _colors = require("./colors");
|
|
29
29
|
var _react2 = require("@emotion/react");
|
|
30
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
31
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
export declare const active = "#4462ED";
|
|
2
|
+
export declare const critical: {
|
|
3
|
+
bright: string;
|
|
4
|
+
dark: string;
|
|
5
|
+
light: string;
|
|
6
|
+
primaryDark: string;
|
|
7
|
+
secondaryDark: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const success: {
|
|
10
|
+
bright: string;
|
|
11
|
+
dark: string;
|
|
12
|
+
light: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const warning: {
|
|
15
|
+
bright: string;
|
|
16
|
+
dark: string;
|
|
17
|
+
light: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const black = "#000";
|
|
20
|
+
export declare const white = "#fff";
|
|
21
|
+
export declare const neutral: {
|
|
22
|
+
10: string;
|
|
23
|
+
20: string;
|
|
24
|
+
30: string;
|
|
25
|
+
40: string;
|
|
26
|
+
50: string;
|
|
27
|
+
60: string;
|
|
28
|
+
70: string;
|
|
29
|
+
80: string;
|
|
30
|
+
90: string;
|
|
31
|
+
95: string;
|
|
32
|
+
};
|
|
33
|
+
export declare const accent: {
|
|
34
|
+
5: string;
|
|
35
|
+
10: string;
|
|
36
|
+
20: string;
|
|
37
|
+
30: string;
|
|
38
|
+
40: string;
|
|
39
|
+
50: string;
|
|
40
|
+
60: string;
|
|
41
|
+
70: string;
|
|
42
|
+
80: string;
|
|
43
|
+
90: string;
|
|
44
|
+
95: string;
|
|
45
|
+
99: string;
|
|
46
|
+
};
|
|
47
|
+
export declare const decorative: any[];
|
|
48
|
+
export declare const decorativeDark: string[];
|
|
49
|
+
export declare const decorativeLight: string[];
|
|
50
|
+
export declare const getDarkerColor: (color: string, percentage: number) => string;
|
|
51
|
+
export declare const focus: string;
|
|
52
|
+
export declare const button: {
|
|
53
|
+
primary: string;
|
|
54
|
+
border: string;
|
|
55
|
+
label: string;
|
|
56
|
+
hoverBorder: {
|
|
57
|
+
5: string;
|
|
58
|
+
10: string;
|
|
59
|
+
20: string;
|
|
60
|
+
30: string;
|
|
61
|
+
40: string;
|
|
62
|
+
50: string;
|
|
63
|
+
60: string;
|
|
64
|
+
70: string;
|
|
65
|
+
80: string;
|
|
66
|
+
90: string;
|
|
67
|
+
95: string;
|
|
68
|
+
99: string;
|
|
69
|
+
};
|
|
70
|
+
hoverLabel: {
|
|
71
|
+
5: string;
|
|
72
|
+
10: string;
|
|
73
|
+
20: string;
|
|
74
|
+
30: string;
|
|
75
|
+
40: string;
|
|
76
|
+
50: string;
|
|
77
|
+
60: string;
|
|
78
|
+
70: string;
|
|
79
|
+
80: string;
|
|
80
|
+
90: string;
|
|
81
|
+
95: string;
|
|
82
|
+
99: string;
|
|
83
|
+
};
|
|
84
|
+
hoverBackground: string;
|
|
85
|
+
focus: string;
|
|
86
|
+
};
|
|
87
|
+
export declare const line: {
|
|
88
|
+
regular: string;
|
|
89
|
+
light: string;
|
|
90
|
+
hairline: string;
|
|
91
|
+
};
|
|
92
|
+
export declare const text: {
|
|
93
|
+
primary: string;
|
|
94
|
+
secondary: string;
|
|
95
|
+
primaryLight: string;
|
|
96
|
+
secondaryLight: string;
|
|
97
|
+
button: string;
|
|
98
|
+
active: string;
|
|
99
|
+
};
|
|
100
|
+
export declare const shadow: string;
|
|
101
|
+
declare const allColors: {
|
|
102
|
+
black: string;
|
|
103
|
+
white: string;
|
|
104
|
+
neutral: {
|
|
105
|
+
10: string;
|
|
106
|
+
20: string;
|
|
107
|
+
30: string;
|
|
108
|
+
40: string;
|
|
109
|
+
50: string;
|
|
110
|
+
60: string;
|
|
111
|
+
70: string;
|
|
112
|
+
80: string;
|
|
113
|
+
90: string;
|
|
114
|
+
95: string;
|
|
115
|
+
};
|
|
116
|
+
accent: {
|
|
117
|
+
5: string;
|
|
118
|
+
10: string;
|
|
119
|
+
20: string;
|
|
120
|
+
30: string;
|
|
121
|
+
40: string;
|
|
122
|
+
50: string;
|
|
123
|
+
60: string;
|
|
124
|
+
70: string;
|
|
125
|
+
80: string;
|
|
126
|
+
90: string;
|
|
127
|
+
95: string;
|
|
128
|
+
99: string;
|
|
129
|
+
};
|
|
130
|
+
decorative: any[];
|
|
131
|
+
decorativeDark: string[];
|
|
132
|
+
decorativeLight: string[];
|
|
133
|
+
focus: string;
|
|
134
|
+
active: string;
|
|
135
|
+
critical: {
|
|
136
|
+
bright: string;
|
|
137
|
+
dark: string;
|
|
138
|
+
light: string;
|
|
139
|
+
primaryDark: string;
|
|
140
|
+
secondaryDark: string;
|
|
141
|
+
};
|
|
142
|
+
success: {
|
|
143
|
+
bright: string;
|
|
144
|
+
dark: string;
|
|
145
|
+
light: string;
|
|
146
|
+
};
|
|
147
|
+
text: {
|
|
148
|
+
primary: string;
|
|
149
|
+
secondary: string;
|
|
150
|
+
primaryLight: string;
|
|
151
|
+
secondaryLight: string;
|
|
152
|
+
button: string;
|
|
153
|
+
active: string;
|
|
154
|
+
};
|
|
155
|
+
line: {
|
|
156
|
+
regular: string;
|
|
157
|
+
light: string;
|
|
158
|
+
hairline: string;
|
|
159
|
+
};
|
|
160
|
+
button: {
|
|
161
|
+
primary: string;
|
|
162
|
+
border: string;
|
|
163
|
+
label: string;
|
|
164
|
+
hoverBorder: {
|
|
165
|
+
5: string;
|
|
166
|
+
10: string;
|
|
167
|
+
20: string;
|
|
168
|
+
30: string;
|
|
169
|
+
40: string;
|
|
170
|
+
50: string;
|
|
171
|
+
60: string;
|
|
172
|
+
70: string;
|
|
173
|
+
80: string;
|
|
174
|
+
90: string;
|
|
175
|
+
95: string;
|
|
176
|
+
99: string;
|
|
177
|
+
};
|
|
178
|
+
hoverLabel: {
|
|
179
|
+
5: string;
|
|
180
|
+
10: string;
|
|
181
|
+
20: string;
|
|
182
|
+
30: string;
|
|
183
|
+
40: string;
|
|
184
|
+
50: string;
|
|
185
|
+
60: string;
|
|
186
|
+
70: string;
|
|
187
|
+
80: string;
|
|
188
|
+
90: string;
|
|
189
|
+
95: string;
|
|
190
|
+
99: string;
|
|
191
|
+
};
|
|
192
|
+
hoverBackground: string;
|
|
193
|
+
focus: string;
|
|
194
|
+
};
|
|
195
|
+
warning: {
|
|
196
|
+
bright: string;
|
|
197
|
+
dark: string;
|
|
198
|
+
light: string;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
export default allColors;
|
|
202
|
+
export declare const flatColorList: any;
|
|
203
|
+
export declare const getBaseHexColor: (colorName: string) => string | {
|
|
204
|
+
black: string;
|
|
205
|
+
white: string;
|
|
206
|
+
neutral: {
|
|
207
|
+
10: string;
|
|
208
|
+
20: string;
|
|
209
|
+
30: string;
|
|
210
|
+
40: string;
|
|
211
|
+
50: string;
|
|
212
|
+
60: string;
|
|
213
|
+
70: string;
|
|
214
|
+
80: string;
|
|
215
|
+
90: string;
|
|
216
|
+
95: string;
|
|
217
|
+
};
|
|
218
|
+
accent: {
|
|
219
|
+
5: string;
|
|
220
|
+
10: string;
|
|
221
|
+
20: string;
|
|
222
|
+
30: string;
|
|
223
|
+
40: string;
|
|
224
|
+
50: string;
|
|
225
|
+
60: string;
|
|
226
|
+
70: string;
|
|
227
|
+
80: string;
|
|
228
|
+
90: string;
|
|
229
|
+
95: string;
|
|
230
|
+
99: string;
|
|
231
|
+
};
|
|
232
|
+
decorative: any[];
|
|
233
|
+
decorativeDark: string[];
|
|
234
|
+
decorativeLight: string[];
|
|
235
|
+
focus: string;
|
|
236
|
+
active: string;
|
|
237
|
+
critical: {
|
|
238
|
+
bright: string;
|
|
239
|
+
dark: string;
|
|
240
|
+
light: string;
|
|
241
|
+
primaryDark: string;
|
|
242
|
+
secondaryDark: string;
|
|
243
|
+
};
|
|
244
|
+
success: {
|
|
245
|
+
bright: string;
|
|
246
|
+
dark: string;
|
|
247
|
+
light: string;
|
|
248
|
+
};
|
|
249
|
+
text: {
|
|
250
|
+
primary: string;
|
|
251
|
+
secondary: string;
|
|
252
|
+
primaryLight: string;
|
|
253
|
+
secondaryLight: string;
|
|
254
|
+
button: string;
|
|
255
|
+
active: string;
|
|
256
|
+
};
|
|
257
|
+
line: {
|
|
258
|
+
regular: string;
|
|
259
|
+
light: string;
|
|
260
|
+
hairline: string;
|
|
261
|
+
};
|
|
262
|
+
button: {
|
|
263
|
+
primary: string;
|
|
264
|
+
border: string;
|
|
265
|
+
label: string;
|
|
266
|
+
hoverBorder: {
|
|
267
|
+
5: string;
|
|
268
|
+
10: string;
|
|
269
|
+
20: string;
|
|
270
|
+
30: string;
|
|
271
|
+
40: string;
|
|
272
|
+
50: string;
|
|
273
|
+
60: string;
|
|
274
|
+
70: string;
|
|
275
|
+
80: string;
|
|
276
|
+
90: string;
|
|
277
|
+
95: string;
|
|
278
|
+
99: string;
|
|
279
|
+
};
|
|
280
|
+
hoverLabel: {
|
|
281
|
+
5: string;
|
|
282
|
+
10: string;
|
|
283
|
+
20: string;
|
|
284
|
+
30: string;
|
|
285
|
+
40: string;
|
|
286
|
+
50: string;
|
|
287
|
+
60: string;
|
|
288
|
+
70: string;
|
|
289
|
+
80: string;
|
|
290
|
+
90: string;
|
|
291
|
+
95: string;
|
|
292
|
+
99: string;
|
|
293
|
+
};
|
|
294
|
+
hoverBackground: string;
|
|
295
|
+
focus: string;
|
|
296
|
+
};
|
|
297
|
+
warning: {
|
|
298
|
+
bright: string;
|
|
299
|
+
dark: string;
|
|
300
|
+
light: string;
|
|
301
|
+
};
|
|
302
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StylePropertyValue, ThemeUICSSObject } from 'theme-ui';
|
|
3
|
+
import { DOMAttributes } from './shared';
|
|
4
|
+
import { TextProps } from './text';
|
|
5
|
+
export interface BadgeProps extends DOMAttributes {
|
|
6
|
+
/** The text color of the badge. */
|
|
7
|
+
textColor?: string | object;
|
|
8
|
+
/** The background color of the box. */
|
|
9
|
+
bg?: StylePropertyValue<string | undefined>;
|
|
10
|
+
/** Provides a way to insert markup in specified places. */
|
|
11
|
+
slots?: {
|
|
12
|
+
/** The given node will be inserted into left side of the badge. */
|
|
13
|
+
leftIcon?: React.ReactNode;
|
|
14
|
+
};
|
|
15
|
+
/** The label of the badge. */
|
|
16
|
+
label?: React.ReactNode;
|
|
17
|
+
/** Props object that is spread directly into the text. */
|
|
18
|
+
textProps?: TextProps;
|
|
19
|
+
/** When true, display badge label as uppercase. */
|
|
20
|
+
isUppercase?: boolean;
|
|
21
|
+
/** Alignment of badge relative to parent container. */
|
|
22
|
+
align?: 'top' | 'right' | 'bottom' | 'left';
|
|
23
|
+
/** The styling variation of the element. */
|
|
24
|
+
variant?: string;
|
|
25
|
+
/** Inline styling prop for item */
|
|
26
|
+
sx?: ThemeUICSSObject;
|
|
27
|
+
}
|
package/lib/cjs/types/index.d.ts
CHANGED
package/lib/cjs/types/index.js
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
|
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10;
|
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
7
7
|
_Object$defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
+
var _badge = require("./badge");
|
|
11
|
+
_forEachInstanceProperty(_context = _Object$keys(_badge)).call(_context, function (key) {
|
|
12
|
+
if (key === "default" || key === "__esModule") return;
|
|
13
|
+
if (key in exports && exports[key] === _badge[key]) return;
|
|
14
|
+
_Object$defineProperty(exports, key, {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _badge[key];
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
});
|
|
10
21
|
var _box = require("./box");
|
|
11
|
-
_forEachInstanceProperty(
|
|
22
|
+
_forEachInstanceProperty(_context2 = _Object$keys(_box)).call(_context2, function (key) {
|
|
12
23
|
if (key === "default" || key === "__esModule") return;
|
|
13
24
|
if (key in exports && exports[key] === _box[key]) return;
|
|
14
25
|
_Object$defineProperty(exports, key, {
|
|
@@ -19,7 +30,7 @@ _forEachInstanceProperty(_context = _Object$keys(_box)).call(_context, function
|
|
|
19
30
|
});
|
|
20
31
|
});
|
|
21
32
|
var _button = require("./button");
|
|
22
|
-
_forEachInstanceProperty(
|
|
33
|
+
_forEachInstanceProperty(_context3 = _Object$keys(_button)).call(_context3, function (key) {
|
|
23
34
|
if (key === "default" || key === "__esModule") return;
|
|
24
35
|
if (key in exports && exports[key] === _button[key]) return;
|
|
25
36
|
_Object$defineProperty(exports, key, {
|
|
@@ -30,7 +41,7 @@ _forEachInstanceProperty(_context2 = _Object$keys(_button)).call(_context2, func
|
|
|
30
41
|
});
|
|
31
42
|
});
|
|
32
43
|
var _icon = require("./icon");
|
|
33
|
-
_forEachInstanceProperty(
|
|
44
|
+
_forEachInstanceProperty(_context4 = _Object$keys(_icon)).call(_context4, function (key) {
|
|
34
45
|
if (key === "default" || key === "__esModule") return;
|
|
35
46
|
if (key in exports && exports[key] === _icon[key]) return;
|
|
36
47
|
_Object$defineProperty(exports, key, {
|
|
@@ -41,7 +52,7 @@ _forEachInstanceProperty(_context3 = _Object$keys(_icon)).call(_context3, functi
|
|
|
41
52
|
});
|
|
42
53
|
});
|
|
43
54
|
var _item = require("./item");
|
|
44
|
-
_forEachInstanceProperty(
|
|
55
|
+
_forEachInstanceProperty(_context5 = _Object$keys(_item)).call(_context5, function (key) {
|
|
45
56
|
if (key === "default" || key === "__esModule") return;
|
|
46
57
|
if (key in exports && exports[key] === _item[key]) return;
|
|
47
58
|
_Object$defineProperty(exports, key, {
|
|
@@ -52,7 +63,7 @@ _forEachInstanceProperty(_context4 = _Object$keys(_item)).call(_context4, functi
|
|
|
52
63
|
});
|
|
53
64
|
});
|
|
54
65
|
var _loader = require("./loader");
|
|
55
|
-
_forEachInstanceProperty(
|
|
66
|
+
_forEachInstanceProperty(_context6 = _Object$keys(_loader)).call(_context6, function (key) {
|
|
56
67
|
if (key === "default" || key === "__esModule") return;
|
|
57
68
|
if (key in exports && exports[key] === _loader[key]) return;
|
|
58
69
|
_Object$defineProperty(exports, key, {
|
|
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_loader)).call(_context5, func
|
|
|
63
74
|
});
|
|
64
75
|
});
|
|
65
76
|
var _popoverContainer = require("./popoverContainer");
|
|
66
|
-
_forEachInstanceProperty(
|
|
77
|
+
_forEachInstanceProperty(_context7 = _Object$keys(_popoverContainer)).call(_context7, function (key) {
|
|
67
78
|
if (key === "default" || key === "__esModule") return;
|
|
68
79
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
|
69
80
|
_Object$defineProperty(exports, key, {
|
|
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_popoverContainer)).call(_cont
|
|
|
74
85
|
});
|
|
75
86
|
});
|
|
76
87
|
var _shared = require("./shared");
|
|
77
|
-
_forEachInstanceProperty(
|
|
88
|
+
_forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, function (key) {
|
|
78
89
|
if (key === "default" || key === "__esModule") return;
|
|
79
90
|
if (key in exports && exports[key] === _shared[key]) return;
|
|
80
91
|
_Object$defineProperty(exports, key, {
|
|
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_shared)).call(_context7, func
|
|
|
85
96
|
});
|
|
86
97
|
});
|
|
87
98
|
var _tableCell = require("./tableCell");
|
|
88
|
-
_forEachInstanceProperty(
|
|
99
|
+
_forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, function (key) {
|
|
89
100
|
if (key === "default" || key === "__esModule") return;
|
|
90
101
|
if (key in exports && exports[key] === _tableCell[key]) return;
|
|
91
102
|
_Object$defineProperty(exports, key, {
|
|
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_tableCell)).call(_context8, f
|
|
|
96
107
|
});
|
|
97
108
|
});
|
|
98
109
|
var _text = require("./text");
|
|
99
|
-
_forEachInstanceProperty(
|
|
110
|
+
_forEachInstanceProperty(_context10 = _Object$keys(_text)).call(_context10, function (key) {
|
|
100
111
|
if (key === "default" || key === "__esModule") return;
|
|
101
112
|
if (key in exports && exports[key] === _text[key]) return;
|
|
102
113
|
_Object$defineProperty(exports, key, {
|