@guardian/stand 0.0.19 → 0.0.20

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 (34) hide show
  1. package/dist/TopBar.cjs +2 -0
  2. package/dist/TopBar.js +1 -1
  3. package/dist/components/form/Form.cjs +47 -0
  4. package/dist/components/form/Form.js +17 -0
  5. package/dist/components/form/styles.cjs +49 -0
  6. package/dist/components/form/styles.js +35 -0
  7. package/dist/components/form/types.cjs +7 -0
  8. package/dist/components/form/types.js +5 -0
  9. package/dist/components/select/Select.cjs +6 -15
  10. package/dist/components/select/Select.js +5 -5
  11. package/dist/components/select/styles.cjs +30 -55
  12. package/dist/components/select/styles.js +31 -53
  13. package/dist/form.cjs +7 -0
  14. package/dist/form.js +1 -0
  15. package/dist/index.cjs +2 -0
  16. package/dist/index.js +1 -0
  17. package/dist/styleD/build/css/component/form.css +28 -0
  18. package/dist/styleD/build/css/component/select.css +37 -46
  19. package/dist/styleD/build/typescript/component/form.cjs +57 -0
  20. package/dist/styleD/build/typescript/component/form.js +55 -0
  21. package/dist/styleD/build/typescript/component/select.cjs +50 -69
  22. package/dist/styleD/build/typescript/component/select.js +50 -69
  23. package/dist/types/TopBar.d.ts +1 -1
  24. package/dist/types/components/form/Form.d.ts +5 -0
  25. package/dist/types/components/form/styles.d.ts +15 -0
  26. package/dist/types/components/form/types.d.ts +40 -0
  27. package/dist/types/components/select/Select.d.ts +1 -1
  28. package/dist/types/components/select/styles.d.ts +0 -3
  29. package/dist/types/components/select/types.d.ts +2 -14
  30. package/dist/types/form.d.ts +8 -0
  31. package/dist/types/index.d.ts +2 -0
  32. package/dist/types/styleD/build/typescript/component/form.d.ts +57 -0
  33. package/dist/types/styleD/build/typescript/component/select.d.ts +46 -65
  34. package/package.json +20 -11
package/dist/styleD/build/css/component/select.css CHANGED
@@ -3,55 +3,46 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --component-select-shared-display: flex;
7
- --component-select-shared-flex-direction: column;
8
- --component-select-shared-gap: 0.25rem;
9
- --component-select-shared-max-width: 333px;
6
+ --component-select-shared-max-width: 320px;
10
7
  --component-select-shared-width: 100%;
11
8
  --component-select-shared-hover-background-color: #f6f6f6;
12
9
  --component-select-shared-hover-outline: none; /** Override outline focus styles on hover */
13
10
  --component-select-shared-pressed-background-color: #ededed;
14
- --component-select-label-color: #000000;
15
- --component-select-label-typography-font: normal 700 1rem/1.15 'Open Sans';
16
- --component-select-label-typography-letter-spacing: -0.03125rem;
17
- --component-select-label-typography-font-width: 95;
18
- --component-select-help-text-color: #545454;
19
- --component-select-help-text-typography-font: normal 460 0.875rem/1.3
11
+ --component-select-shared-button-display: flex;
12
+ --component-select-shared-button-justify-content: space-between;
13
+ --component-select-shared-button-align-items: center;
14
+ --component-select-shared-button-margin-top: 0.25rem;
15
+ --component-select-shared-button-background-color: #ffffff;
16
+ --component-select-shared-button-border: 0.0625rem solid #545454;
17
+ --component-select-shared-button-border-radius: 0.25rem;
18
+ --component-select-shared-button-height: 2.5rem;
19
+ --component-select-shared-button-padding-left: 0.75rem;
20
+ --component-select-shared-button-padding-right: 0.25rem;
21
+ --component-select-shared-button-color: #545454;
22
+ --component-select-shared-button-typography-font: normal 460 1rem/1.3
20
23
  'Open Sans';
21
- --component-select-help-text-typography-letter-spacing: 0;
22
- --component-select-help-text-typography-font-width: 95;
23
- --component-select-button-display: flex;
24
- --component-select-button-justify-content: space-between;
25
- --component-select-button-align-items: center;
26
- --component-select-button-margin-top: 0.25rem;
27
- --component-select-button-background-color: #ffffff;
28
- --component-select-button-border: 0.0625rem solid #545454;
29
- --component-select-button-border-radius: 0.25rem;
30
- --component-select-button-height: 2.5rem;
31
- --component-select-button-padding-left: 0.75rem;
32
- --component-select-button-padding-right: 0.25rem;
33
- --component-select-button-color: #545454;
34
- --component-select-button-typography-font: normal 460 1rem/1.3 'Open Sans';
35
- --component-select-button-typography-letter-spacing: 0;
36
- --component-select-button-typography-font-width: 95;
37
- --component-select-button-focused-outline: 0.125rem solid #0072a9;
38
- --component-select-button-focused-outline-offset: 0.125rem;
39
- --component-select-button-disabled-background-color: #ffffff;
40
- --component-select-button-disabled-cursor: not-allowed;
41
- --component-select-button-disabled-color: #999999;
42
- --component-select-button-disabled-border: 0.0625rem solid #dcdcdc;
43
- --component-select-button-error-border: 0.0625rem solid #b42a19;
44
- --component-select-option-padding-left: 1rem;
45
- --component-select-option-padding-right: 1rem;
46
- --component-select-option-padding-top: 0.75rem;
47
- --component-select-option-padding-bottom: 0.75rem;
48
- --component-select-option-focused-outline: 0.125rem solid #0072a9;
49
- --component-select-option-focused-outline-offset: 0;
50
- --component-select-option-focused-background-color: inherit;
51
- --component-select-list-box-typography-font: normal 460 1rem/1.3 'Open Sans';
52
- --component-select-list-box-typography-letter-spacing: 0;
53
- --component-select-list-box-typography-font-width: 95;
54
- --component-select-list-box-border: 0.0625rem solid #cccccc;
55
- --component-select-list-box-background-color: #ffffff;
56
- --component-select-list-box-shadow: 0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3);
24
+ --component-select-shared-button-typography-letter-spacing: 0;
25
+ --component-select-shared-button-typography-font-width: 95;
26
+ --component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
27
+ --component-select-shared-button-focused-outline-offset: 0.125rem;
28
+ --component-select-shared-button-disabled-background-color: #ffffff;
29
+ --component-select-shared-button-disabled-cursor: not-allowed;
30
+ --component-select-shared-button-disabled-color: #999999;
31
+ --component-select-shared-button-disabled-border: 0.0625rem solid #dcdcdc;
32
+ --component-select-shared-button-error-border: 0.0625rem solid #b42a19;
33
+ --component-select-shared-option-padding-left: 1rem;
34
+ --component-select-shared-option-padding-right: 1rem;
35
+ --component-select-shared-option-padding-top: 0.75rem;
36
+ --component-select-shared-option-padding-bottom: 0.75rem;
37
+ --component-select-shared-option-focused-outline: 0.125rem solid #0072a9;
38
+ --component-select-shared-option-focused-outline-offset: 0;
39
+ --component-select-shared-option-focused-background-color: inherit;
40
+ --component-select-shared-list-box-typography-font: normal 460 1rem/1.3
41
+ 'Open Sans';
42
+ --component-select-shared-list-box-typography-letter-spacing: 0;
43
+ --component-select-shared-list-box-typography-font-width: 95;
44
+ --component-select-shared-list-box-border: 0.0625rem solid #cccccc;
45
+ --component-select-shared-list-box-background-color: #ffffff;
46
+ --component-select-shared-list-box-shadow: 0 0.125rem 0.375rem 0
47
+ rgb(0% 0% 0% / 0.3);
57
48
  }
package/dist/styleD/build/typescript/component/form.cjs ADDED
@@ -0,0 +1,57 @@
1
+ 'use strict';
2
+
3
+ const componentForm = {
4
+ input: {
5
+ shared: {
6
+ container: {
7
+ display: "flex",
8
+ "flex-direction": "column",
9
+ gap: "0.25rem",
10
+ width: "100%"
11
+ },
12
+ label: {
13
+ color: "#000000",
14
+ disabled: {
15
+ color: "#999999"
16
+ }
17
+ },
18
+ description: {
19
+ color: "#545454",
20
+ typography: {
21
+ font: "normal 460 0.875rem/1.3 Open Sans",
22
+ letterSpacing: "0rem",
23
+ fontWidth: 95
24
+ },
25
+ disabled: {
26
+ color: "#999999"
27
+ }
28
+ }
29
+ },
30
+ sm: {
31
+ container: {
32
+ "max-width": "200px"
33
+ },
34
+ label: {
35
+ typography: {
36
+ font: "normal 700 0.875rem/1.15 Open Sans",
37
+ letterSpacing: "-0.0125rem",
38
+ fontWidth: 95
39
+ }
40
+ }
41
+ },
42
+ md: {
43
+ container: {
44
+ "max-width": "320px"
45
+ },
46
+ label: {
47
+ typography: {
48
+ font: "normal 700 1rem/1.15 Open Sans",
49
+ letterSpacing: "-0.03125rem",
50
+ fontWidth: 95
51
+ }
52
+ }
53
+ }
54
+ }
55
+ };
56
+
57
+ exports.componentForm = componentForm;
package/dist/styleD/build/typescript/component/form.js ADDED
@@ -0,0 +1,55 @@
1
+ const componentForm = {
2
+ input: {
3
+ shared: {
4
+ container: {
5
+ display: "flex",
6
+ "flex-direction": "column",
7
+ gap: "0.25rem",
8
+ width: "100%"
9
+ },
10
+ label: {
11
+ color: "#000000",
12
+ disabled: {
13
+ color: "#999999"
14
+ }
15
+ },
16
+ description: {
17
+ color: "#545454",
18
+ typography: {
19
+ font: "normal 460 0.875rem/1.3 Open Sans",
20
+ letterSpacing: "0rem",
21
+ fontWidth: 95
22
+ },
23
+ disabled: {
24
+ color: "#999999"
25
+ }
26
+ }
27
+ },
28
+ sm: {
29
+ container: {
30
+ "max-width": "200px"
31
+ },
32
+ label: {
33
+ typography: {
34
+ font: "normal 700 0.875rem/1.15 Open Sans",
35
+ letterSpacing: "-0.0125rem",
36
+ fontWidth: 95
37
+ }
38
+ }
39
+ },
40
+ md: {
41
+ container: {
42
+ "max-width": "320px"
43
+ },
44
+ label: {
45
+ typography: {
46
+ font: "normal 700 1rem/1.15 Open Sans",
47
+ letterSpacing: "-0.03125rem",
48
+ fontWidth: 95
49
+ }
50
+ }
51
+ }
52
+ }
53
+ };
54
+
55
+ export { componentForm };
package/dist/styleD/build/typescript/component/select.cjs CHANGED
@@ -2,10 +2,7 @@
2
2
 
3
3
  const componentSelect = {
4
4
  shared: {
5
- display: "flex",
6
- flexDirection: "column",
7
- gap: "0.25rem",
8
- maxWidth: "333px",
5
+ maxWidth: "320px",
9
6
  width: "100%",
10
7
  hover: {
11
8
  backgroundColor: "#f6f6f6",
@@ -13,75 +10,59 @@ const componentSelect = {
13
10
  },
14
11
  pressed: {
15
12
  backgroundColor: "#ededed"
16
- }
17
- },
18
- label: {
19
- color: "#000000",
20
- typography: {
21
- font: "normal 700 1rem/1.15 Open Sans",
22
- letterSpacing: "-0.03125rem",
23
- fontWidth: 95
24
- }
25
- },
26
- helpText: {
27
- color: "#545454",
28
- typography: {
29
- font: "normal 460 0.875rem/1.3 Open Sans",
30
- letterSpacing: "0rem",
31
- fontWidth: 95
32
- }
33
- },
34
- button: {
35
- display: "flex",
36
- justifyContent: "space-between",
37
- alignItems: "center",
38
- marginTop: "0.25rem",
39
- backgroundColor: "#ffffff",
40
- border: "0.0625rem solid #545454",
41
- borderRadius: "0.25rem",
42
- height: "2.5rem",
43
- paddingLeft: "0.75rem",
44
- paddingRight: "0.25rem",
45
- color: "#545454",
46
- typography: {
47
- font: "normal 460 1rem/1.3 Open Sans",
48
- letterSpacing: "0rem",
49
- fontWidth: 95
50
- },
51
- focused: {
52
- outline: "0.125rem solid #0072a9",
53
- "outline-offset": "0.125rem"
54
13
  },
55
- disabled: {
14
+ button: {
15
+ display: "flex",
16
+ justifyContent: "space-between",
17
+ alignItems: "center",
18
+ marginTop: "0.25rem",
56
19
  backgroundColor: "#ffffff",
57
- cursor: "not-allowed",
58
- color: "#999999",
59
- border: "0.0625rem solid #dcdcdc"
20
+ border: "0.0625rem solid #545454",
21
+ borderRadius: "0.25rem",
22
+ height: "2.5rem",
23
+ paddingLeft: "0.75rem",
24
+ paddingRight: "0.25rem",
25
+ color: "#545454",
26
+ typography: {
27
+ font: "normal 460 1rem/1.3 Open Sans",
28
+ letterSpacing: "0rem",
29
+ fontWidth: 95
30
+ },
31
+ focused: {
32
+ outline: "0.125rem solid #0072a9",
33
+ "outline-offset": "0.125rem"
34
+ },
35
+ disabled: {
36
+ backgroundColor: "#ffffff",
37
+ cursor: "not-allowed",
38
+ color: "#999999",
39
+ border: "0.0625rem solid #dcdcdc"
40
+ },
41
+ error: {
42
+ border: "0.0625rem solid #b42a19"
43
+ }
60
44
  },
61
- error: {
62
- border: "0.0625rem solid #b42a19"
63
- }
64
- },
65
- option: {
66
- paddingLeft: "1rem",
67
- paddingRight: "1rem",
68
- paddingTop: "0.75rem",
69
- paddingBottom: "0.75rem",
70
- focused: {
71
- outline: "0.125rem solid #0072a9",
72
- "outline-offset": "0",
73
- backgroundColor: "inherit"
74
- }
75
- },
76
- listBox: {
77
- typography: {
78
- font: "normal 460 1rem/1.3 Open Sans",
79
- letterSpacing: "0rem",
80
- fontWidth: 95
45
+ option: {
46
+ paddingLeft: "1rem",
47
+ paddingRight: "1rem",
48
+ paddingTop: "0.75rem",
49
+ paddingBottom: "0.75rem",
50
+ focused: {
51
+ outline: "0.125rem solid #0072a9",
52
+ "outline-offset": "0",
53
+ backgroundColor: "inherit"
54
+ }
81
55
  },
82
- border: "0.0625rem solid #cccccc",
83
- backgroundColor: "#ffffff",
84
- shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
56
+ listBox: {
57
+ typography: {
58
+ font: "normal 460 1rem/1.3 Open Sans",
59
+ letterSpacing: "0rem",
60
+ fontWidth: 95
61
+ },
62
+ border: "0.0625rem solid #cccccc",
63
+ backgroundColor: "#ffffff",
64
+ shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
65
+ }
85
66
  }
86
67
  };
87
68
 
package/dist/styleD/build/typescript/component/select.js CHANGED
@@ -1,9 +1,6 @@
1
1
  const componentSelect = {
2
2
  shared: {
3
- display: "flex",
4
- flexDirection: "column",
5
- gap: "0.25rem",
6
- maxWidth: "333px",
3
+ maxWidth: "320px",
7
4
  width: "100%",
8
5
  hover: {
9
6
  backgroundColor: "#f6f6f6",
@@ -11,75 +8,59 @@ const componentSelect = {
11
8
  },
12
9
  pressed: {
13
10
  backgroundColor: "#ededed"
14
- }
15
- },
16
- label: {
17
- color: "#000000",
18
- typography: {
19
- font: "normal 700 1rem/1.15 Open Sans",
20
- letterSpacing: "-0.03125rem",
21
- fontWidth: 95
22
- }
23
- },
24
- helpText: {
25
- color: "#545454",
26
- typography: {
27
- font: "normal 460 0.875rem/1.3 Open Sans",
28
- letterSpacing: "0rem",
29
- fontWidth: 95
30
- }
31
- },
32
- button: {
33
- display: "flex",
34
- justifyContent: "space-between",
35
- alignItems: "center",
36
- marginTop: "0.25rem",
37
- backgroundColor: "#ffffff",
38
- border: "0.0625rem solid #545454",
39
- borderRadius: "0.25rem",
40
- height: "2.5rem",
41
- paddingLeft: "0.75rem",
42
- paddingRight: "0.25rem",
43
- color: "#545454",
44
- typography: {
45
- font: "normal 460 1rem/1.3 Open Sans",
46
- letterSpacing: "0rem",
47
- fontWidth: 95
48
- },
49
- focused: {
50
- outline: "0.125rem solid #0072a9",
51
- "outline-offset": "0.125rem"
52
11
  },
53
- disabled: {
12
+ button: {
13
+ display: "flex",
14
+ justifyContent: "space-between",
15
+ alignItems: "center",
16
+ marginTop: "0.25rem",
54
17
  backgroundColor: "#ffffff",
55
- cursor: "not-allowed",
56
- color: "#999999",
57
- border: "0.0625rem solid #dcdcdc"
18
+ border: "0.0625rem solid #545454",
19
+ borderRadius: "0.25rem",
20
+ height: "2.5rem",
21
+ paddingLeft: "0.75rem",
22
+ paddingRight: "0.25rem",
23
+ color: "#545454",
24
+ typography: {
25
+ font: "normal 460 1rem/1.3 Open Sans",
26
+ letterSpacing: "0rem",
27
+ fontWidth: 95
28
+ },
29
+ focused: {
30
+ outline: "0.125rem solid #0072a9",
31
+ "outline-offset": "0.125rem"
32
+ },
33
+ disabled: {
34
+ backgroundColor: "#ffffff",
35
+ cursor: "not-allowed",
36
+ color: "#999999",
37
+ border: "0.0625rem solid #dcdcdc"
38
+ },
39
+ error: {
40
+ border: "0.0625rem solid #b42a19"
41
+ }
58
42
  },
59
- error: {
60
- border: "0.0625rem solid #b42a19"
61
- }
62
- },
63
- option: {
64
- paddingLeft: "1rem",
65
- paddingRight: "1rem",
66
- paddingTop: "0.75rem",
67
- paddingBottom: "0.75rem",
68
- focused: {
69
- outline: "0.125rem solid #0072a9",
70
- "outline-offset": "0",
71
- backgroundColor: "inherit"
72
- }
73
- },
74
- listBox: {
75
- typography: {
76
- font: "normal 460 1rem/1.3 Open Sans",
77
- letterSpacing: "0rem",
78
- fontWidth: 95
43
+ option: {
44
+ paddingLeft: "1rem",
45
+ paddingRight: "1rem",
46
+ paddingTop: "0.75rem",
47
+ paddingBottom: "0.75rem",
48
+ focused: {
49
+ outline: "0.125rem solid #0072a9",
50
+ "outline-offset": "0",
51
+ backgroundColor: "inherit"
52
+ }
79
53
  },
80
- border: "0.0625rem solid #cccccc",
81
- backgroundColor: "#ffffff",
82
- shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
54
+ listBox: {
55
+ typography: {
56
+ font: "normal 460 1rem/1.3 Open Sans",
57
+ letterSpacing: "0rem",
58
+ fontWidth: 95
59
+ },
60
+ border: "0.0625rem solid #cccccc",
61
+ backgroundColor: "#ffffff",
62
+ shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
63
+ }
83
64
  }
84
65
  };
85
66
 
package/dist/types/TopBar.d.ts CHANGED
@@ -23,6 +23,6 @@ export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './co
23
23
  export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
24
24
  export type { TopBarItemProps } from './components/topbar/topBarItem/types';
25
25
  export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
26
- export { TopBar } from './components/topbar/TopBar';
26
+ export { TopBar, TopBarContainerLeft, TopBarContainerRight, } from './components/topbar/TopBar';
27
27
  export type { TopBarProps } from './components/topbar/types';
28
28
  export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';
package/dist/types/components/form/Form.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { ComponentPropsWithRef } from 'react';
2
+ import type { AllowedContainer, FormInputContainerDefaultProps } from './types';
3
+ export declare function FormInputContainer<C extends AllowedContainer>({ as: Component, size, label, description, error, isDisabled, theme, formInputContainerTheme, cssOverrides, children, ...props }: FormInputContainerDefaultProps<ComponentPropsWithRef<C>> & {
4
+ as: C;
5
+ }): import("@emotion/react/jsx-runtime").JSX.Element | null;
package/dist/types/components/form/styles.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { SerializedStyles } from '@emotion/react';
2
+ import type { ComponentForm } from '../../styleD/build/typescript/component/form';
3
+ import type { Prettify } from '../../util/types';
4
+ export type FormInputContainerTheme = Prettify<ComponentForm['input']>;
5
+ export declare const defaultFormInputContainerTheme: FormInputContainerTheme;
6
+ export declare const formInputContainerStyles: (theme: FormInputContainerTheme, { size, }: {
7
+ size: keyof Omit<FormInputContainerTheme, 'shared'>;
8
+ }) => SerializedStyles;
9
+ export declare const formInputLabelStyles: (theme: FormInputContainerTheme, { isDisabled, size, }: {
10
+ size: keyof Omit<FormInputContainerTheme, 'shared'>;
11
+ isDisabled?: boolean | undefined;
12
+ }) => SerializedStyles;
13
+ export declare const formInputDescriptionStyles: (theme: FormInputContainerTheme, { isDisabled, }: {
14
+ isDisabled?: boolean | undefined;
15
+ }) => SerializedStyles;
package/dist/types/components/form/types.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { DeepPartial, DefaultProps } from '../../util/types';
3
+ import type { FormInputContainerTheme } from './styles';
4
+ export type FormInputContainerDefaultProps<ReactAriaInput extends {
5
+ className?: unknown;
6
+ }, ComponentTheme = FormInputContainerTheme> = DefaultProps<ComponentTheme, ReactAriaInput['className']> & Omit<ReactAriaInput, 'children' | 'className'> & {
7
+ /**
8
+ * The size of the form input, 'md' (default) or 'sm'.
9
+ */
10
+ size?: keyof Omit<ComponentTheme, 'shared'>;
11
+ /**
12
+ * The label text for the form field
13
+ */
14
+ label?: string;
15
+ /**
16
+ * The description text for the form field
17
+ */
18
+ description?: string;
19
+ /**
20
+ * Validation error message
21
+ */
22
+ error?: string;
23
+ /**
24
+ * Theme overrides for the FormInputContainer container, label, and description styles.
25
+ * Use this when the component has its own `theme` prop for component-specific styles.
26
+ */
27
+ formInputContainerTheme?: DeepPartial<FormInputContainerTheme>;
28
+ /**
29
+ * The content of the form field (e.g. Input, Button, Popover) should always be plain React nodes.
30
+ * RAC render-prop children (present on Select etc.) are intentionally excluded to
31
+ * preserve React 18/19 compatibility where functions are not assignable to ReactNode.
32
+ */
33
+ children?: ReactNode;
34
+ };
35
+ /**
36
+ * The React Aria form container components FormInputContainer supports.
37
+ * Add new components here
38
+ */
39
+ export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
40
+ export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];
package/dist/types/components/select/Select.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import type { OptionProps, SelectProps } from './types';
2
2
  export declare function Option({ children, theme }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export declare function Select({ children, label, contextualHelpText, theme, cssOverrides, className, isInvalid, errorMessage, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
+ export declare function Select({ isInvalid, theme, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/types/components/select/styles.d.ts CHANGED
@@ -4,10 +4,7 @@ import type { DeepPartial, Prettify } from '../../util/types';
4
4
  export type SelectTheme = Prettify<ComponentSelect>;
5
5
  export type PartialSelectTheme = DeepPartial<SelectTheme>;
6
6
  export declare const defaultSelectTheme: SelectTheme;
7
- export declare const selectStyles: (theme: SelectTheme) => SerializedStyles;
8
7
  export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
9
8
  export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;
10
9
  export declare const listBoxStyles: (theme: SelectTheme) => SerializedStyles;
11
- export declare const labelStyles: (theme: SelectTheme) => SerializedStyles;
12
- export declare const helpTextStyles: (theme: SelectTheme) => SerializedStyles;
13
10
  export declare const buttonStyles: (theme: SelectTheme, isInvalid?: boolean) => SerializedStyles;
package/dist/types/components/select/types.d.ts CHANGED
@@ -1,21 +1,9 @@
1
1
  import type { ListBoxItemProps as RACListBoxItemProps, ListBoxProps as RACListBoxProps, SelectProps as RACSelectProps } from 'react-aria-components';
2
2
  import type { DefaultPropsWithChildren } from '../../util/types';
3
+ import type { FormInputContainerDefaultProps } from '../form/types';
3
4
  import type { SelectTheme } from './styles';
4
5
  export interface OptionProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxItemProps['className']>, Omit<RACListBoxItemProps, 'children'> {
5
6
  }
6
7
  export interface ListBoxProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxProps<object>['className']>, Omit<RACListBoxProps<object>, 'children'> {
7
8
  }
8
- export interface SelectProps extends DefaultPropsWithChildren<SelectTheme, RACSelectProps<object>['className']>, Omit<RACSelectProps<object>, 'children'> {
9
- /**
10
- * The label text of the select box
11
- */
12
- label: string;
13
- /**
14
- * Validation error message
15
- */
16
- errorMessage?: string;
17
- /**
18
- * Optional contextual help text
19
- */
20
- contextualHelpText?: string;
21
- }
9
+ export type SelectProps = FormInputContainerDefaultProps<RACSelectProps<object, 'single' | 'multiple'>, SelectTheme>;
package/dist/types/form.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Shared form components entry point
3
+ *
4
+ * If you only need the built CSS (./component/form.css),
5
+ * you don't need to install these.
6
+ */
7
+ export { componentForm } from './styleD/build/typescript/component/form';
8
+ export type { ComponentForm } from './styleD/build/typescript/component/form';
package/dist/types/index.d.ts CHANGED
@@ -34,6 +34,8 @@ export { componentMenu } from './styleD/build/typescript/component/menu';
34
34
  export type { ComponentMenu } from './styleD/build/typescript/component/menu';
35
35
  export { componentTopBar } from './styleD/build/typescript/component/TopBar';
36
36
  export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
37
+ export { componentForm } from './styleD/build/typescript/component/form';
38
+ export type { ComponentForm } from './styleD/build/typescript/component/form';
37
39
  /**
38
40
  * style dictionary exports - base
39
41
  */