@guardian/stand 0.0.31 → 0.0.32

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 (30) hide show
  1. package/dist/components/date-picker/DatePicker.cjs +166 -0
  2. package/dist/components/date-picker/DatePicker.js +126 -0
  3. package/dist/components/date-picker/styles.cjs +199 -0
  4. package/dist/components/date-picker/styles.js +187 -0
  5. package/dist/components/form/types.cjs +2 -1
  6. package/dist/components/form/types.js +3 -2
  7. package/dist/components/select/Select.cjs +1 -1
  8. package/dist/components/select/Select.js +7 -1
  9. package/dist/date-picker.cjs +9 -0
  10. package/dist/date-picker.js +2 -0
  11. package/dist/index.cjs +2 -0
  12. package/dist/index.js +1 -0
  13. package/dist/styleD/build/css/component/datePicker.css +120 -0
  14. package/dist/styleD/build/css/component/templateComponent.css +8 -0
  15. package/dist/styleD/build/typescript/component/datePicker.cjs +185 -0
  16. package/dist/styleD/build/typescript/component/datePicker.js +183 -0
  17. package/dist/types/components/date-picker/DatePicker.d.ts +2 -0
  18. package/dist/types/components/date-picker/sandbox.d.ts +2 -0
  19. package/dist/types/components/date-picker/styles.d.ts +11 -0
  20. package/dist/types/components/date-picker/types.d.ts +21 -0
  21. package/dist/types/components/form/types.d.ts +1 -1
  22. package/dist/types/date-picker.d.ts +21 -0
  23. package/dist/types/index.d.ts +2 -0
  24. package/dist/types/styleD/build/typescript/component/datePicker.d.ts +185 -0
  25. package/dist/types/styleD/build/typescript/component/templateComponent.d.ts +10 -0
  26. package/dist/types/templates/component/TemplateComponent.d.ts +2 -0
  27. package/dist/types/templates/component/sandbox.d.ts +5 -0
  28. package/dist/types/templates/component/styles.d.ts +7 -0
  29. package/dist/types/templates/component/types.d.ts +5 -0
  30. package/package.json +17 -2
package/dist/components/form/types.js CHANGED
@@ -1,10 +1,11 @@
1
- import { TextField, Select, RadioGroup, CheckboxGroup } from 'react-aria-components';
1
+ import { TextField, Select, RadioGroup, CheckboxGroup, DatePicker } from 'react-aria-components';
2
2
 
3
3
  const ALLOWED_FORM_CONTAINERS = [
4
4
  TextField,
5
5
  Select,
6
6
  RadioGroup,
7
- CheckboxGroup
7
+ CheckboxGroup,
8
+ DatePicker
8
9
  ];
9
10
 
10
11
  export { ALLOWED_FORM_CONTAINERS };
package/dist/components/select/Select.cjs CHANGED
@@ -40,9 +40,9 @@ function Select({
40
40
  Form.FormInputContainer,
41
41
  {
42
42
  as: reactAriaComponents.Select,
43
- size: "md",
44
43
  isInvalid,
45
44
  ...props,
45
+ size: "md",
46
46
  children: [
47
47
  /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Button, { css: styles.buttonStyles(mergedTheme, isInvalid), children: [
48
48
  /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, {}),
package/dist/components/select/Select.js CHANGED
@@ -27,7 +27,13 @@ function ListBox({ children, theme = {} }) {
27
27
  }
28
28
  function Select({ isInvalid, theme = {}, children, ...props }) {
29
29
  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
30
- return jsxs(FormInputContainer, { as: Select$1, size: "md", isInvalid, ...props, children: [jsxs(Button, { css: buttonStyles(mergedTheme, isInvalid), children: [jsx(SelectValue, {}), jsx(Icon, { symbol: "keyboard_arrow_down", size: "lg" })] }), jsx(Popover, { css: popoverStyles(mergedTheme), children: jsx(ListBox, { children }) })] });
30
+ return jsxs(FormInputContainer, {
31
+ as: Select$1,
32
+ isInvalid,
33
+ ...props,
34
+ size: "md",
35
+ children: [jsxs(Button, { css: buttonStyles(mergedTheme, isInvalid), children: [jsx(SelectValue, {}), jsx(Icon, { symbol: "keyboard_arrow_down", size: "lg" })] }), jsx(Popover, { css: popoverStyles(mergedTheme), children: jsx(ListBox, { children }) })]
36
+ });
31
37
  }
32
38
 
33
39
  export { Option, Select };
package/dist/date-picker.cjs ADDED
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var DatePicker = require('./components/date-picker/DatePicker.cjs');
4
+ var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
5
+
6
+
7
+
8
+ exports.DatePicker = DatePicker.DatePicker;
9
+ exports.componentDatePicker = datePicker.componentDatePicker;
package/dist/date-picker.js ADDED
@@ -0,0 +1,2 @@
1
+ export { DatePicker } from './components/date-picker/DatePicker.js';
2
+ export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';
package/dist/index.cjs CHANGED
@@ -9,6 +9,7 @@ var avatar = require('./styleD/build/typescript/component/avatar.cjs');
9
9
  var button = require('./styleD/build/typescript/component/button.cjs');
10
10
  var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
11
11
  var favicon = require('./styleD/build/typescript/component/favicon.cjs');
12
+ var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
12
13
  var form = require('./styleD/build/typescript/component/form.cjs');
13
14
  var icon = require('./styleD/build/typescript/component/icon.cjs');
14
15
  var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
@@ -41,6 +42,7 @@ exports.componentAvatar = avatar.componentAvatar;
41
42
  exports.componentButton = button.componentButton;
42
43
  exports.componentCheckbox = checkbox.componentCheckbox;
43
44
  exports.componentFavicon = favicon.componentFavicon;
45
+ exports.componentDatePicker = datePicker.componentDatePicker;
44
46
  exports.componentForm = form.componentForm;
45
47
  exports.componentIcon = icon.componentIcon;
46
48
  exports.componentInlineMessage = inlineMessage.componentInlineMessage;
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
7
7
  export { componentButton } from './styleD/build/typescript/component/button.js';
8
8
  export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
9
9
  export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
10
+ export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';
10
11
  export { componentForm } from './styleD/build/typescript/component/form.js';
11
12
  export { componentIcon } from './styleD/build/typescript/component/icon.js';
12
13
  export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
package/dist/styleD/build/css/component/datePicker.css ADDED
@@ -0,0 +1,120 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --component-date-picker-picker-shared-display: flex;
7
+ --component-date-picker-picker-shared-width: 100%;
8
+ --component-date-picker-picker-shared-justify-content: space-between;
9
+ --component-date-picker-picker-shared-align-items: center;
10
+ --component-date-picker-picker-shared-height: 2.5rem;
11
+ --component-date-picker-picker-shared-border-radius: 0.25rem;
12
+ --component-date-picker-picker-shared-border: 0.0625rem solid #545454;
13
+ --component-date-picker-picker-shared-background-color: #ffffff;
14
+ --component-date-picker-picker-shared-gap: 0.5rem;
15
+ --component-date-picker-picker-shared-padding-top: 0;
16
+ --component-date-picker-picker-shared-padding-right: 0.25rem;
17
+ --component-date-picker-picker-shared-padding-bottom: 0;
18
+ --component-date-picker-picker-shared-padding-left: 0.75rem;
19
+ --component-date-picker-picker-shared-disabled-cursor: not-allowed;
20
+ --component-date-picker-picker-shared-disabled-background-color: #ededed;
21
+ --component-date-picker-picker-shared-disabled-color: #999999;
22
+ --component-date-picker-picker-shared-focus-visible-outline: 0.125rem solid
23
+ #0072a9;
24
+ --component-date-picker-picker-shared-invalid-border: 0.0625rem solid #b42a19;
25
+ --component-date-picker-picker-shared-button-flex: 1;
26
+ --component-date-picker-picker-shared-button-background-color: rgba(
27
+ 0,
28
+ 0,
29
+ 0,
30
+ 0
31
+ );
32
+ --component-date-picker-picker-shared-button-border: 0 solid transparent;
33
+ --component-date-picker-picker-shared-button-padding-top: 0;
34
+ --component-date-picker-picker-shared-button-padding-right: 0;
35
+ --component-date-picker-picker-shared-button-padding-bottom: 0;
36
+ --component-date-picker-picker-shared-button-padding-left: 0;
37
+ --component-date-picker-picker-shared-button-margin-top: 0;
38
+ --component-date-picker-picker-shared-button-margin-right: 0;
39
+ --component-date-picker-picker-shared-button-margin-bottom: 0;
40
+ --component-date-picker-picker-shared-button-margin-left: 0;
41
+ --component-date-picker-picker-shared-button-display: flex;
42
+ --component-date-picker-picker-shared-button-align-items: center;
43
+ --component-date-picker-picker-shared-button-justify-content: flex-end;
44
+ --component-date-picker-picker-shared-button-color: #545454;
45
+ --component-date-picker-picker-shared-button-cursor: pointer;
46
+ --component-date-picker-picker-shared-button-disabled-color: #999999;
47
+ --component-date-picker-picker-shared-button-disabled-cursor: not-allowed;
48
+ --component-date-picker-segment-shared-placeholder-color: #545454;
49
+ --component-date-picker-segment-shared-placeholder-focus-visible-outline: 0.125rem
50
+ solid #0072a9;
51
+ --component-date-picker-popover-shared-offset: 8;
52
+ --component-date-picker-popover-shared-container-padding: 0;
53
+ --component-date-picker-popover-shared-background-color: #ffffff;
54
+ --component-date-picker-popover-shared-padding-top: 0.25rem;
55
+ --component-date-picker-popover-shared-padding-right: 0.25rem;
56
+ --component-date-picker-popover-shared-padding-bottom: 0.25rem;
57
+ --component-date-picker-popover-shared-padding-left: 0.25rem;
58
+ --component-date-picker-popover-shared-box-shadow: 0 2px 6px 0
59
+ rgba(0, 0, 0, 0.3);
60
+ --component-date-picker-calendar-header-shared-display: flex;
61
+ --component-date-picker-calendar-header-shared-align-items: center;
62
+ --component-date-picker-calendar-header-shared-justify-content: space-between;
63
+ --component-date-picker-calendar-header-shared-typography-font: normal 700
64
+ 0.875rem/1.15 'Open Sans';
65
+ --component-date-picker-calendar-header-shared-typography-letter-spacing: -0.0125rem;
66
+ --component-date-picker-calendar-header-shared-typography-font-width: 95;
67
+ --component-date-picker-calendar-header-shared-button-background-color: rgba(
68
+ 0,
69
+ 0,
70
+ 0,
71
+ 0
72
+ );
73
+ --component-date-picker-calendar-header-shared-button-border: none;
74
+ --component-date-picker-calendar-header-shared-button-padding-top: 0;
75
+ --component-date-picker-calendar-header-shared-button-padding-right: 0;
76
+ --component-date-picker-calendar-header-shared-button-padding-bottom: 0;
77
+ --component-date-picker-calendar-header-shared-button-padding-left: 0;
78
+ --component-date-picker-calendar-header-shared-button-margin-top: 0;
79
+ --component-date-picker-calendar-header-shared-button-margin-right: 0;
80
+ --component-date-picker-calendar-header-shared-button-margin-bottom: 0;
81
+ --component-date-picker-calendar-header-shared-button-margin-left: 0;
82
+ --component-date-picker-calendar-header-shared-button-display: flex;
83
+ --component-date-picker-calendar-header-shared-button-align-items: center;
84
+ --component-date-picker-calendar-header-shared-button-justify-content: center;
85
+ --component-date-picker-calendar-header-shared-button-color: #545454;
86
+ --component-date-picker-calendar-header-shared-button-cursor: pointer;
87
+ --component-date-picker-calendar-header-shared-button-width: 2.5rem;
88
+ --component-date-picker-calendar-header-shared-button-height: 2.5rem;
89
+ --component-date-picker-calendar-header-shared-button-aspect-ratio: 1;
90
+ --component-date-picker-calendar-header-shared-button-hovered-background-color: #f6f6f6;
91
+ --component-date-picker-calendar-header-shared-button-pressed-background-color: #ededed;
92
+ --component-date-picker-calendar-header-shared-button-selected-background-color: #b8d8e7;
93
+ --component-date-picker-calendar-header-shared-button-focus-visible-outline: 0.125rem
94
+ solid #0072a9;
95
+ --component-date-picker-calendar-header-shared-button-disabled-cursor: not-allowed;
96
+ --component-date-picker-calendar-header-shared-button-disabled-color: #999999;
97
+ --component-date-picker-calendar-grid-shared-typography-font: normal 460
98
+ 0.875rem/1.3 'Open Sans';
99
+ --component-date-picker-calendar-grid-shared-typography-letter-spacing: 0;
100
+ --component-date-picker-calendar-grid-shared-typography-font-width: 95;
101
+ --component-date-picker-calendar-grid-shared-border-collapse: collapse;
102
+ --component-date-picker-calendar-grid-shared-border-spacing: 0;
103
+ --component-date-picker-calendar-grid-shared-th-width: 2.5rem;
104
+ --component-date-picker-calendar-grid-shared-th-height: 2.5rem;
105
+ --component-date-picker-calendar-grid-shared-th-vertical-align: middle;
106
+ --component-date-picker-calendar-cell-shared-width: 2.5rem;
107
+ --component-date-picker-calendar-cell-shared-aspect-ratio: 1;
108
+ --component-date-picker-calendar-cell-shared-display: flex;
109
+ --component-date-picker-calendar-cell-shared-align-items: center;
110
+ --component-date-picker-calendar-cell-shared-justify-content: center;
111
+ --component-date-picker-calendar-cell-shared-cursor: pointer;
112
+ --component-date-picker-calendar-cell-shared-outside-month-display: none;
113
+ --component-date-picker-calendar-cell-shared-hovered-background-color: #f6f6f6;
114
+ --component-date-picker-calendar-cell-shared-pressed-background-color: #ededed;
115
+ --component-date-picker-calendar-cell-shared-selected-background-color: #b8d8e7;
116
+ --component-date-picker-calendar-cell-shared-focus-visible-outline: 0.125rem
117
+ solid #0072a9;
118
+ --component-date-picker-calendar-cell-shared-disabled-cursor: not-allowed;
119
+ --component-date-picker-calendar-cell-shared-disabled-color: #999999;
120
+ }
package/dist/styleD/build/css/component/templateComponent.css ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --component-template-component-color-background: #b8d8e7;
7
+ --component-template-component-color-text: #ffffff;
8
+ }
package/dist/styleD/build/typescript/component/datePicker.cjs ADDED
@@ -0,0 +1,185 @@
1
+ 'use strict';
2
+
3
+ const componentDatePicker = {
4
+ picker: {
5
+ shared: {
6
+ display: "flex",
7
+ width: "100%",
8
+ justifyContent: "space-between",
9
+ alignItems: "center",
10
+ height: "2.5rem",
11
+ borderRadius: "0.25rem",
12
+ border: "0.0625rem solid #545454",
13
+ backgroundColor: "#ffffff",
14
+ gap: "0.5rem",
15
+ padding: {
16
+ top: "0",
17
+ right: "0.25rem",
18
+ bottom: "0",
19
+ left: "0.75rem"
20
+ },
21
+ disabled: {
22
+ cursor: "not-allowed",
23
+ backgroundColor: "#ededed",
24
+ color: "#999999"
25
+ },
26
+ focusVisible: {
27
+ outline: "0.125rem solid #0072a9"
28
+ },
29
+ invalid: {
30
+ border: "0.0625rem solid #b42a19"
31
+ },
32
+ button: {
33
+ flex: "1",
34
+ backgroundColor: "#00000000",
35
+ border: "0 solid transparent",
36
+ padding: {
37
+ top: "0",
38
+ right: "0",
39
+ bottom: "0",
40
+ left: "0"
41
+ },
42
+ margin: {
43
+ top: "0",
44
+ right: "0",
45
+ bottom: "0",
46
+ left: "0"
47
+ },
48
+ display: "flex",
49
+ alignItems: "center",
50
+ justifyContent: "flex-end",
51
+ color: "#545454",
52
+ cursor: "pointer",
53
+ disabled: {
54
+ color: "#999999",
55
+ cursor: "not-allowed"
56
+ }
57
+ }
58
+ }
59
+ },
60
+ segment: {
61
+ shared: {
62
+ placeholder: {
63
+ color: "#545454",
64
+ focusVisible: {
65
+ outline: "0.125rem solid #0072a9"
66
+ }
67
+ }
68
+ }
69
+ },
70
+ popover: {
71
+ shared: {
72
+ offset: 8,
73
+ containerPadding: 0,
74
+ backgroundColor: "#ffffff",
75
+ padding: {
76
+ top: "0.25rem",
77
+ right: "0.25rem",
78
+ bottom: "0.25rem",
79
+ left: "0.25rem"
80
+ },
81
+ boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.3)"
82
+ }
83
+ },
84
+ calendar: {
85
+ header: {
86
+ shared: {
87
+ display: "flex",
88
+ alignItems: "center",
89
+ justifyContent: "space-between",
90
+ typography: {
91
+ font: "normal 700 0.875rem/1.15 Open Sans",
92
+ letterSpacing: "-0.0125rem",
93
+ fontWidth: 95
94
+ },
95
+ button: {
96
+ backgroundColor: "#00000000",
97
+ border: "none",
98
+ padding: {
99
+ top: "0",
100
+ right: "0",
101
+ bottom: "0",
102
+ left: "0"
103
+ },
104
+ margin: {
105
+ top: "0",
106
+ right: "0",
107
+ bottom: "0",
108
+ left: "0"
109
+ },
110
+ display: "flex",
111
+ alignItems: "center",
112
+ justifyContent: "center",
113
+ color: "#545454",
114
+ cursor: "pointer",
115
+ width: "2.5rem",
116
+ height: "2.5rem",
117
+ aspectRatio: "1",
118
+ hovered: {
119
+ backgroundColor: "#f6f6f6"
120
+ },
121
+ pressed: {
122
+ backgroundColor: "#ededed"
123
+ },
124
+ selected: {
125
+ backgroundColor: "#b8d8e7"
126
+ },
127
+ focusVisible: {
128
+ outline: "0.125rem solid #0072a9"
129
+ },
130
+ disabled: {
131
+ cursor: "not-allowed",
132
+ color: "#999999"
133
+ }
134
+ }
135
+ }
136
+ },
137
+ grid: {
138
+ shared: {
139
+ typography: {
140
+ font: "normal 460 0.875rem/1.3 Open Sans",
141
+ letterSpacing: "0rem",
142
+ fontWidth: 95
143
+ },
144
+ borderCollapse: "collapse",
145
+ borderSpacing: "0",
146
+ th: {
147
+ width: "2.5rem",
148
+ height: "2.5rem",
149
+ verticalAlign: "middle"
150
+ }
151
+ }
152
+ },
153
+ cell: {
154
+ shared: {
155
+ width: "2.5rem",
156
+ aspectRatio: "1",
157
+ display: "flex",
158
+ alignItems: "center",
159
+ justifyContent: "center",
160
+ cursor: "pointer",
161
+ outsideMonth: {
162
+ display: "none"
163
+ },
164
+ hovered: {
165
+ backgroundColor: "#f6f6f6"
166
+ },
167
+ pressed: {
168
+ backgroundColor: "#ededed"
169
+ },
170
+ selected: {
171
+ backgroundColor: "#b8d8e7"
172
+ },
173
+ focusVisible: {
174
+ outline: "0.125rem solid #0072a9"
175
+ },
176
+ disabled: {
177
+ cursor: "not-allowed",
178
+ color: "#999999"
179
+ }
180
+ }
181
+ }
182
+ }
183
+ };
184
+
185
+ exports.componentDatePicker = componentDatePicker;
package/dist/styleD/build/typescript/component/datePicker.js ADDED
@@ -0,0 +1,183 @@
1
+ const componentDatePicker = {
2
+ picker: {
3
+ shared: {
4
+ display: "flex",
5
+ width: "100%",
6
+ justifyContent: "space-between",
7
+ alignItems: "center",
8
+ height: "2.5rem",
9
+ borderRadius: "0.25rem",
10
+ border: "0.0625rem solid #545454",
11
+ backgroundColor: "#ffffff",
12
+ gap: "0.5rem",
13
+ padding: {
14
+ top: "0",
15
+ right: "0.25rem",
16
+ bottom: "0",
17
+ left: "0.75rem"
18
+ },
19
+ disabled: {
20
+ cursor: "not-allowed",
21
+ backgroundColor: "#ededed",
22
+ color: "#999999"
23
+ },
24
+ focusVisible: {
25
+ outline: "0.125rem solid #0072a9"
26
+ },
27
+ invalid: {
28
+ border: "0.0625rem solid #b42a19"
29
+ },
30
+ button: {
31
+ flex: "1",
32
+ backgroundColor: "#00000000",
33
+ border: "0 solid transparent",
34
+ padding: {
35
+ top: "0",
36
+ right: "0",
37
+ bottom: "0",
38
+ left: "0"
39
+ },
40
+ margin: {
41
+ top: "0",
42
+ right: "0",
43
+ bottom: "0",
44
+ left: "0"
45
+ },
46
+ display: "flex",
47
+ alignItems: "center",
48
+ justifyContent: "flex-end",
49
+ color: "#545454",
50
+ cursor: "pointer",
51
+ disabled: {
52
+ color: "#999999",
53
+ cursor: "not-allowed"
54
+ }
55
+ }
56
+ }
57
+ },
58
+ segment: {
59
+ shared: {
60
+ placeholder: {
61
+ color: "#545454",
62
+ focusVisible: {
63
+ outline: "0.125rem solid #0072a9"
64
+ }
65
+ }
66
+ }
67
+ },
68
+ popover: {
69
+ shared: {
70
+ offset: 8,
71
+ containerPadding: 0,
72
+ backgroundColor: "#ffffff",
73
+ padding: {
74
+ top: "0.25rem",
75
+ right: "0.25rem",
76
+ bottom: "0.25rem",
77
+ left: "0.25rem"
78
+ },
79
+ boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.3)"
80
+ }
81
+ },
82
+ calendar: {
83
+ header: {
84
+ shared: {
85
+ display: "flex",
86
+ alignItems: "center",
87
+ justifyContent: "space-between",
88
+ typography: {
89
+ font: "normal 700 0.875rem/1.15 Open Sans",
90
+ letterSpacing: "-0.0125rem",
91
+ fontWidth: 95
92
+ },
93
+ button: {
94
+ backgroundColor: "#00000000",
95
+ border: "none",
96
+ padding: {
97
+ top: "0",
98
+ right: "0",
99
+ bottom: "0",
100
+ left: "0"
101
+ },
102
+ margin: {
103
+ top: "0",
104
+ right: "0",
105
+ bottom: "0",
106
+ left: "0"
107
+ },
108
+ display: "flex",
109
+ alignItems: "center",
110
+ justifyContent: "center",
111
+ color: "#545454",
112
+ cursor: "pointer",
113
+ width: "2.5rem",
114
+ height: "2.5rem",
115
+ aspectRatio: "1",
116
+ hovered: {
117
+ backgroundColor: "#f6f6f6"
118
+ },
119
+ pressed: {
120
+ backgroundColor: "#ededed"
121
+ },
122
+ selected: {
123
+ backgroundColor: "#b8d8e7"
124
+ },
125
+ focusVisible: {
126
+ outline: "0.125rem solid #0072a9"
127
+ },
128
+ disabled: {
129
+ cursor: "not-allowed",
130
+ color: "#999999"
131
+ }
132
+ }
133
+ }
134
+ },
135
+ grid: {
136
+ shared: {
137
+ typography: {
138
+ font: "normal 460 0.875rem/1.3 Open Sans",
139
+ letterSpacing: "0rem",
140
+ fontWidth: 95
141
+ },
142
+ borderCollapse: "collapse",
143
+ borderSpacing: "0",
144
+ th: {
145
+ width: "2.5rem",
146
+ height: "2.5rem",
147
+ verticalAlign: "middle"
148
+ }
149
+ }
150
+ },
151
+ cell: {
152
+ shared: {
153
+ width: "2.5rem",
154
+ aspectRatio: "1",
155
+ display: "flex",
156
+ alignItems: "center",
157
+ justifyContent: "center",
158
+ cursor: "pointer",
159
+ outsideMonth: {
160
+ display: "none"
161
+ },
162
+ hovered: {
163
+ backgroundColor: "#f6f6f6"
164
+ },
165
+ pressed: {
166
+ backgroundColor: "#ededed"
167
+ },
168
+ selected: {
169
+ backgroundColor: "#b8d8e7"
170
+ },
171
+ focusVisible: {
172
+ outline: "0.125rem solid #0072a9"
173
+ },
174
+ disabled: {
175
+ cursor: "not-allowed",
176
+ color: "#999999"
177
+ }
178
+ }
179
+ }
180
+ }
181
+ };
182
+
183
+ export { componentDatePicker };
package/dist/types/components/date-picker/DatePicker.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { DatePickerProps } from './types';
2
+ export declare function DatePicker({ isInvalid, locale, useMonthTextInput, theme, ...props }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/types/components/date-picker/sandbox.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const componentName = "DatePicker";
2
+ export declare const componentTsx = "import { CalendarDate } from '@internationalized/date';\nimport { DatePicker } from '@guardian/stand/date-picker';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Basic usage */}\n\t\t<DatePicker\n\t\t\tlabel=\"Date of birth\"\n\t\t\tdescription=\"Enter your date of birth (e.g. 15 April 1990)\"\n\t\t/>\n\n\t\t{/* With min/max constraints and a pre-selected date */}\n\t\t<DatePicker\n\t\t\tlabel=\"Select a date\"\n\t\t\tdescription=\"Choose a date within 2026\"\n\t\t\tvalue={new CalendarDate(2026, 4, 15)}\n\t\t\tminValue={new CalendarDate(2026, 1, 1)}\n\t\t\tmaxValue={new CalendarDate(2026, 12, 31)}\n\t\t/>\n\t</>\n);\n";
package/dist/types/components/date-picker/styles.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { SerializedStyles } from '@emotion/react';
2
+ import type { ComponentDatePicker } from '../../styleD/build/typescript/component/datePicker';
3
+ import type { Prettify } from '../../util/types';
4
+ export type DatePickerTheme = Prettify<ComponentDatePicker>;
5
+ export declare const defaultDatePickerTheme: DatePickerTheme;
6
+ export declare const datePickerStyles: (theme: DatePickerTheme) => SerializedStyles;
7
+ export declare const dateSegmentStyles: (theme: DatePickerTheme) => SerializedStyles;
8
+ export declare const datePickerPopoverStyles: (theme: DatePickerTheme) => SerializedStyles;
9
+ export declare const calendarHeaderStyles: (theme: DatePickerTheme) => SerializedStyles;
10
+ export declare const calendarGridStyles: (theme: DatePickerTheme) => SerializedStyles;
11
+ export declare const calendarCellStyles: (theme: DatePickerTheme) => SerializedStyles;
package/dist/types/components/date-picker/types.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import type { DateValue, CalendarProps as RACCalendarProps, DatePickerProps as RACDatePickerProps } from 'react-aria-components';
2
+ import type { DefaultProps } from '../../util/types';
3
+ import type { FormInputContainerDefaultProps } from '../form/types';
4
+ import type { DatePickerTheme } from './styles';
5
+ export interface DatePickerProps extends FormInputContainerDefaultProps<Omit<RACDatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
6
+ /**
7
+ * When true (default), the month segment displays full month names (e.g. "April") and
8
+ * supports typing the first letters of a month name to select it.
9
+ * Set to false to revert to React Aria's default numeric month behaviour.
10
+ */
11
+ useMonthTextInput?: boolean;
12
+ /**
13
+ * Locale to use for formatting the date. By default, it uses en-GB,
14
+ * you shouldn't need to set this prop in most scenarios,
15
+ * if you need low level control use this along with useMonthTextInput prop
16
+ *
17
+ * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale for more details on supported locales and formatting options.
18
+ */
19
+ locale?: string;
20
+ }
21
+ export type CalendarProps = DefaultProps<DatePickerTheme, RACCalendarProps<DateValue>['className']> & Omit<RACCalendarProps<DateValue>, 'className'>;
package/dist/types/components/form/types.d.ts CHANGED
@@ -36,5 +36,5 @@ export type FormInputContainerDefaultProps<ReactAriaInput extends {
36
36
  * The React Aria form container components FormInputContainer supports.
37
37
  * Add new components here
38
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, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
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, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T_1 extends import("react-aria-components").DateValue>(props: import("react-aria-components").DatePickerProps<T_1> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
40
40
  export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];
package/dist/types/date-picker.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * DatePicker component entry point
3
+ *
4
+ * Peer dependencies required to use these components:
5
+ * - `@emotion/react`
6
+ * - `react`
7
+ * - `react-dom`
8
+ * - `typescript`
9
+ * - `@internationalized/date`
10
+ * - `react-aria-components`
11
+ *
12
+ * See the `peerDependencies` section of package.json for compatible versions.
13
+ *
14
+ * If you only need the built CSS (./component/datePicker.css),
15
+ * you don't need to install these.
16
+ */
17
+ export { DatePicker } from './components/date-picker/DatePicker';
18
+ export type { DatePickerProps } from './components/date-picker/types';
19
+ export type { DatePickerTheme } from './components/date-picker/styles';
20
+ export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
21
+ export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
package/dist/types/index.d.ts CHANGED
@@ -26,6 +26,8 @@ export { componentCheckbox } from './styleD/build/typescript/component/checkbox'
26
26
  export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
27
27
  export { componentFavicon } from './styleD/build/typescript/component/favicon';
28
28
  export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
29
+ export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
30
+ export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
29
31
  export { componentForm } from './styleD/build/typescript/component/form';
30
32
  export type { ComponentForm } from './styleD/build/typescript/component/form';
31
33
  export { componentIcon } from './styleD/build/typescript/component/icon';