@guardian/stand 0.0.31 → 0.0.32

package/dist/components/date-picker/DatePicker.cjs

@@ -0,0 +1,166 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Form = require('../form/Form.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const SEGMENT_PLACEHOLDERS = {
+  day: "DD",
+  month: "MMMM",
+  year: "YYYY"
+};
+const CLEAR_BUFFER_DELAY_MS = 1e3;
+const MonthTextInputContext = React.createContext(true);
+function DateSegment(props) {
+  const useMonthTextInput = React.useContext(MonthTextInputContext);
+  const state = React.useContext(reactAriaComponents.DateFieldStateContext);
+  const stateRef = React.useRef(state);
+  React.useEffect(() => {
+    stateRef.current = state;
+  });
+  const bufferRef = React.useRef("");
+  const clearTimerRef = React.useRef(null);
+  const segmentRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!useMonthTextInput || props.segment.type !== "month") {
+      return;
+    }
+    const el = segmentRef.current;
+    if (!el) {
+      return;
+    }
+    const handleKeyDown = (e) => {
+      const currentState = stateRef.current;
+      if (!currentState || !/^[a-zA-Z]$/.test(e.key)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+      }
+      bufferRef.current += e.key.toLowerCase();
+      const match = MONTHS.findIndex(
+        (m) => m.toLowerCase().startsWith(bufferRef.current)
+      );
+      if (match !== -1) {
+        currentState.setSegment("month", match + 1);
+        const uniqueMatch = MONTHS.filter((m) => m.toLowerCase().startsWith(bufferRef.current)).length === 1;
+        if (uniqueMatch) {
+          bufferRef.current = "";
+          if (clearTimerRef.current) {
+            clearTimeout(clearTimerRef.current);
+          }
+          const yearSegment = el.parentElement?.querySelector('[data-type="year"]');
+          yearSegment?.focus();
+        }
+      }
+      clearTimerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, CLEAR_BUFFER_DELAY_MS);
+    };
+    el.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      el.removeEventListener("keydown", handleKeyDown, true);
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+      }
+    };
+  }, [props.segment.type, useMonthTextInput]);
+  if (useMonthTextInput && props.segment.type === "literal") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " " });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DateSegment, { ...props, ref: segmentRef, children: (renderProps) => {
+    if (useMonthTextInput && renderProps.type === "month" && renderProps.value != null) {
+      return MONTHS[renderProps.value - 1];
+    }
+    if (useMonthTextInput && renderProps.isPlaceholder && renderProps.type in SEGMENT_PLACEHOLDERS) {
+      return SEGMENT_PLACEHOLDERS[renderProps.type];
+    }
+    return renderProps.text;
+  } });
+}
+function DateInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DateInput, { ...props });
+}
+function CalendarCell(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarCell, { ...props });
+}
+function CalendarGrid(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarGrid, { ...props });
+}
+function Calendar({ theme = {}, ...props }) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultDatePickerTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Calendar, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { css: styles.calendarHeaderStyles(mergedTheme), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "previous", "aria-label": "Previous Month", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "chevron_left", size: "lg" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "next", "aria-label": "Next Month", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "chevron_right", size: "lg" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { css: styles.calendarGridStyles(mergedTheme), children: (date) => /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { css: styles.calendarCellStyles(mergedTheme), date }) })
+  ] });
+}
+function DatePicker({
+  isInvalid,
+  locale = "en-GB",
+  useMonthTextInput = true,
+  theme = {},
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultDatePickerTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.DatePicker,
+      isInvalid,
+      firstDayOfWeek: "mon",
+      shouldForceLeadingZeros: true,
+      ...props,
+      size: "md",
+      granularity: "day",
+      hideTimeZone: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Group, { css: styles.datePickerStyles(mergedTheme), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MonthTextInputContext.Provider, { value: useMonthTextInput, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, { children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(
+            DateSegment,
+            {
+              css: styles.dateSegmentStyles(mergedTheme),
+              segment
+            }
+          ) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Open Date Picker", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "calendar_month", size: "lg" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Popover,
+          {
+            css: styles.datePickerPopoverStyles(mergedTheme),
+            offset: mergedTheme.popover.shared.offset,
+            containerPadding: mergedTheme.popover.shared.containerPadding,
+            shouldFlip: false,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { theme: mergedTheme })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.DatePicker = DatePicker;

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { createContext, useContext, useRef, useEffect } from 'react';
+import { DatePicker as DatePicker$1, Group, I18nProvider, Button, Popover, DateInput as DateInput$1, DateFieldStateContext, DateSegment as DateSegment$1, Calendar as Calendar$1, Heading, CalendarGrid as CalendarGrid$1, CalendarCell as CalendarCell$1 } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { FormInputContainer } from '../form/Form.js';
+import { Icon } from '../icon/Icon.js';
+import { dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, defaultDatePickerTheme, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const SEGMENT_PLACEHOLDERS = {
+  day: "DD",
+  month: "MMMM",
+  year: "YYYY"
+};
+const CLEAR_BUFFER_DELAY_MS = 1e3;
+const MonthTextInputContext = createContext(true);
+function DateSegment(props) {
+  const useMonthTextInput = useContext(MonthTextInputContext);
+  const state = useContext(DateFieldStateContext);
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  });
+  const bufferRef = useRef("");
+  const clearTimerRef = useRef(null);
+  const segmentRef = useRef(null);
+  useEffect(() => {
+    if (!useMonthTextInput || props.segment.type !== "month") {
+      return;
+    }
+    const el = segmentRef.current;
+    if (!el) {
+      return;
+    }
+    const handleKeyDown = (e) => {
+      const currentState = stateRef.current;
+      if (!currentState || !/^[a-zA-Z]$/.test(e.key)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+      }
+      bufferRef.current += e.key.toLowerCase();
+      const match = MONTHS.findIndex((m) => m.toLowerCase().startsWith(bufferRef.current));
+      if (match !== -1) {
+        currentState.setSegment("month", match + 1);
+        const uniqueMatch = MONTHS.filter((m) => m.toLowerCase().startsWith(bufferRef.current)).length === 1;
+        if (uniqueMatch) {
+          bufferRef.current = "";
+          if (clearTimerRef.current) {
+            clearTimeout(clearTimerRef.current);
+          }
+          const yearSegment = el.parentElement?.querySelector('[data-type="year"]');
+          yearSegment?.focus();
+        }
+      }
+      clearTimerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, CLEAR_BUFFER_DELAY_MS);
+    };
+    el.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      el.removeEventListener("keydown", handleKeyDown, true);
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+      }
+    };
+  }, [props.segment.type, useMonthTextInput]);
+  if (useMonthTextInput && props.segment.type === "literal") {
+    return jsx("span", { "aria-hidden": "true", children: " " });
+  }
+  return jsx(DateSegment$1, { ...props, ref: segmentRef, children: (renderProps) => {
+    if (useMonthTextInput && renderProps.type === "month" && renderProps.value != null) {
+      return MONTHS[renderProps.value - 1];
+    }
+    if (useMonthTextInput && renderProps.isPlaceholder && renderProps.type in SEGMENT_PLACEHOLDERS) {
+      return SEGMENT_PLACEHOLDERS[renderProps.type];
+    }
+    return renderProps.text;
+  } });
+}
+function DateInput(props) {
+  return jsx(DateInput$1, { ...props });
+}
+function CalendarCell(props) {
+  return jsx(CalendarCell$1, { ...props });
+}
+function CalendarGrid(props) {
+  return jsx(CalendarGrid$1, { ...props });
+}
+function Calendar({ theme = {}, ...props }) {
+  const mergedTheme = mergeDeep(defaultDatePickerTheme, theme);
+  return jsxs(Calendar$1, { ...props, children: [jsxs("header", { css: calendarHeaderStyles(mergedTheme), children: [jsx(Button, { slot: "previous", "aria-label": "Previous Month", children: jsx(Icon, { symbol: "chevron_left", size: "lg" }) }), jsx(Heading, {}), jsx(Button, { slot: "next", "aria-label": "Next Month", children: jsx(Icon, { symbol: "chevron_right", size: "lg" }) })] }), jsx(CalendarGrid, { css: calendarGridStyles(mergedTheme), children: (date) => jsx(CalendarCell, { css: calendarCellStyles(mergedTheme), date }) })] });
+}
+function DatePicker({ isInvalid, locale = "en-GB", useMonthTextInput = true, theme = {}, ...props }) {
+  const mergedTheme = mergeDeep(defaultDatePickerTheme, theme);
+  return jsxs(FormInputContainer, {
+    as: DatePicker$1,
+    isInvalid,
+    // set default values for specific props that shouldn't depend on users locale, and should only be explicitly overridden if needed
+    firstDayOfWeek: "mon",
+    shouldForceLeadingZeros: true,
+    ...props,
+    size: "md",
+    granularity: "day",
+    hideTimeZone: true,
+    children: [jsxs(Group, { css: datePickerStyles(mergedTheme), children: [jsx(MonthTextInputContext.Provider, { value: useMonthTextInput, children: jsx(I18nProvider, { locale, children: jsx(DateInput, { children: (segment) => jsx(DateSegment, { css: dateSegmentStyles(mergedTheme), segment }) }) }) }), jsx(Button, { "aria-label": "Open Date Picker", children: jsx(Icon, { symbol: "calendar_month", size: "lg" }) })] }), jsx(Popover, { css: datePickerPopoverStyles(mergedTheme), offset: mergedTheme.popover.shared.offset, containerPadding: mergedTheme.popover.shared.containerPadding, shouldFlip: false, children: jsx(Calendar, { theme: mergedTheme }) })]
+  });
+}
+
+export { DatePicker };

package/dist/components/date-picker/styles.cjs

@@ -0,0 +1,199 @@
+'use strict';
+
+var react = require('@emotion/react');
+var datePicker = require('../../styleD/build/typescript/component/datePicker.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultDatePickerTheme = datePicker.componentDatePicker;
+const datePickerStyles = (theme) => {
+  return react.css`
+		display: ${theme.picker.shared.display};
+		width: ${theme.picker.shared.width};
+		justify-content: ${theme.picker.shared.justifyContent};
+		align-items: ${theme.picker.shared.alignItems};
+		height: ${theme.picker.shared.height};
+		border-radius: ${theme.picker.shared.borderRadius};
+		border: ${theme.picker.shared.border};
+		background-color: ${theme.picker.shared.backgroundColor};
+		gap: ${theme.picker.shared.gap};
+		padding-left: ${theme.picker.shared.padding.left};
+		padding-right: ${theme.picker.shared.padding.right};
+		padding-top: ${theme.picker.shared.padding.top};
+		padding-bottom: ${theme.picker.shared.padding.bottom};
+
+		button {
+			flex: ${theme.picker.shared.button.flex};
+			background-color: ${theme.picker.shared.button.backgroundColor};
+			border: ${theme.picker.shared.button.border};
+			padding-left: ${theme.picker.shared.button.padding.left};
+			padding-right: ${theme.picker.shared.button.padding.right};
+			padding-top: ${theme.picker.shared.button.padding.top};
+			padding-bottom: ${theme.picker.shared.button.padding.bottom};
+			margin-left: ${theme.picker.shared.button.margin.left};
+			margin-right: ${theme.picker.shared.button.margin.right};
+			margin-top: ${theme.picker.shared.button.margin.top};
+			margin-bottom: ${theme.picker.shared.button.margin.bottom};
+			display: ${theme.picker.shared.button.display};
+			align-items: ${theme.picker.shared.button.alignItems};
+			justify-content: ${theme.picker.shared.button.justifyContent};
+			color: ${theme.picker.shared.button.color};
+			cursor: ${theme.picker.shared.button.cursor};
+
+			&[data-disabled] {
+				cursor: ${theme.picker.shared.button.disabled.cursor};
+				color: ${theme.picker.shared.button.disabled.color};
+			}
+
+			&[data-focus-visible] {
+				outline: ${theme.picker.shared.focusVisible.outline};
+			}
+		}
+
+		&[data-invalid] {
+			border: ${theme.picker.shared.invalid.border};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.picker.shared.disabled.cursor};
+			color: ${theme.picker.shared.disabled.color};
+			background-color: ${theme.picker.shared.disabled.backgroundColor};
+		}
+	`;
+};
+const dateSegmentStyles = (theme) => {
+  return react.css`
+		&[data-placeholder] {
+			color: ${theme.segment.shared.placeholder.color};
+		}
+
+		&[data-focus-visible],
+		&[data-focused] {
+			outline: ${theme.segment.shared.placeholder.focusVisible.outline};
+		}
+	`;
+};
+const datePickerPopoverStyles = (theme) => {
+  return react.css`
+		background-color: ${theme.popover.shared.backgroundColor};
+		padding: ${theme.popover.shared.padding.top}
+			${theme.popover.shared.padding.right}
+			${theme.popover.shared.padding.bottom}
+			${theme.popover.shared.padding.left};
+		box-shadow: ${theme.popover.shared.boxShadow};
+	`;
+};
+const calendarHeaderStyles = (theme) => {
+  return react.css`
+		display: ${theme.calendar.header.shared.display};
+		align-items: ${theme.calendar.header.shared.alignItems};
+		justify-content: ${theme.calendar.header.shared.justifyContent};
+		${typography.convertTypographyToEmotionStringStyle(
+    theme.calendar.header.shared.typography
+  )}
+
+		button {
+			background-color: ${theme.calendar.header.shared.button.backgroundColor};
+			border: ${theme.calendar.header.shared.button.border};
+			padding: ${theme.calendar.header.shared.button.padding.top}
+				${theme.calendar.header.shared.button.padding.right}
+				${theme.calendar.header.shared.button.padding.bottom}
+				${theme.calendar.header.shared.button.padding.left};
+			margin: ${theme.calendar.header.shared.button.margin.top}
+				${theme.calendar.header.shared.button.margin.right}
+				${theme.calendar.header.shared.button.margin.bottom}
+				${theme.calendar.header.shared.button.margin.left};
+			display: ${theme.calendar.header.shared.button.display};
+			align-items: ${theme.calendar.header.shared.button.alignItems};
+			justify-content: ${theme.calendar.header.shared.button.justifyContent};
+			color: ${theme.calendar.header.shared.button.color};
+			cursor: ${theme.calendar.header.shared.button.cursor};
+			width: ${theme.calendar.header.shared.button.width};
+			height: ${theme.calendar.header.shared.button.height};
+			aspect-ratio: ${theme.calendar.header.shared.button.aspectRatio};
+
+			&[data-hovered] {
+				background-color: ${theme.calendar.header.shared.button.hovered.backgroundColor};
+			}
+
+			&[data-pressed] {
+				background-color: ${theme.calendar.header.shared.button.pressed.backgroundColor};
+			}
+
+			&[data-selected] {
+				background-color: ${theme.calendar.header.shared.button.selected.backgroundColor};
+			}
+
+			&[data-focus-visible] {
+				outline: ${theme.calendar.header.shared.button.focusVisible.outline};
+			}
+
+			&[data-disabled] {
+				cursor: ${theme.calendar.header.shared.button.disabled.cursor};
+				color: ${theme.calendar.header.shared.button.disabled.color};
+			}
+		}
+	`;
+};
+const calendarGridStyles = (theme) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(
+    theme.calendar.grid.shared.typography
+  )}
+
+		border-collapse: ${theme.calendar.grid.shared.borderCollapse};
+		border-spacing: ${theme.calendar.grid.shared.borderSpacing};
+
+		th {
+			width: ${theme.calendar.grid.shared.th.width};
+			height: ${theme.calendar.grid.shared.th.height};
+			vertical-align: ${theme.calendar.grid.shared.th.verticalAlign};
+		}
+	`;
+};
+const calendarCellStyles = (theme) => {
+  return react.css`
+		width: ${theme.calendar.cell.shared.width};
+		aspect-ratio: ${theme.calendar.cell.shared.aspectRatio};
+		display: ${theme.calendar.cell.shared.display};
+		align-items: ${theme.calendar.cell.shared.alignItems};
+		justify-content: ${theme.calendar.cell.shared.justifyContent};
+		cursor: ${theme.calendar.cell.shared.cursor};
+
+		&[data-outside-month] {
+			display: ${theme.calendar.cell.shared.outsideMonth.display};
+		}
+
+		&[data-hovered] {
+			background-color: ${theme.calendar.cell.shared.hovered.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.calendar.cell.shared.pressed.backgroundColor};
+		}
+
+		&[data-selected] {
+			background-color: ${theme.calendar.cell.shared.selected.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.calendar.cell.shared.focusVisible.outline};
+		}
+
+		&[data-today] {
+			/* TODO: design for indicating today's date, not yet in figma */
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.calendar.cell.shared.disabled.cursor};
+			color: ${theme.calendar.cell.shared.disabled.color};
+		}
+	`;
+};
+
+exports.calendarCellStyles = calendarCellStyles;
+exports.calendarGridStyles = calendarGridStyles;
+exports.calendarHeaderStyles = calendarHeaderStyles;
+exports.datePickerPopoverStyles = datePickerPopoverStyles;
+exports.datePickerStyles = datePickerStyles;
+exports.dateSegmentStyles = dateSegmentStyles;
+exports.defaultDatePickerTheme = defaultDatePickerTheme;

package/dist/components/date-picker/styles.js

@@ -0,0 +1,187 @@
+import { css } from '@emotion/react';
+import { componentDatePicker } from '../../styleD/build/typescript/component/datePicker.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultDatePickerTheme = componentDatePicker;
+const datePickerStyles = (theme) => {
+  return css`
+		display: ${theme.picker.shared.display};
+		width: ${theme.picker.shared.width};
+		justify-content: ${theme.picker.shared.justifyContent};
+		align-items: ${theme.picker.shared.alignItems};
+		height: ${theme.picker.shared.height};
+		border-radius: ${theme.picker.shared.borderRadius};
+		border: ${theme.picker.shared.border};
+		background-color: ${theme.picker.shared.backgroundColor};
+		gap: ${theme.picker.shared.gap};
+		padding-left: ${theme.picker.shared.padding.left};
+		padding-right: ${theme.picker.shared.padding.right};
+		padding-top: ${theme.picker.shared.padding.top};
+		padding-bottom: ${theme.picker.shared.padding.bottom};
+
+		button {
+			flex: ${theme.picker.shared.button.flex};
+			background-color: ${theme.picker.shared.button.backgroundColor};
+			border: ${theme.picker.shared.button.border};
+			padding-left: ${theme.picker.shared.button.padding.left};
+			padding-right: ${theme.picker.shared.button.padding.right};
+			padding-top: ${theme.picker.shared.button.padding.top};
+			padding-bottom: ${theme.picker.shared.button.padding.bottom};
+			margin-left: ${theme.picker.shared.button.margin.left};
+			margin-right: ${theme.picker.shared.button.margin.right};
+			margin-top: ${theme.picker.shared.button.margin.top};
+			margin-bottom: ${theme.picker.shared.button.margin.bottom};
+			display: ${theme.picker.shared.button.display};
+			align-items: ${theme.picker.shared.button.alignItems};
+			justify-content: ${theme.picker.shared.button.justifyContent};
+			color: ${theme.picker.shared.button.color};
+			cursor: ${theme.picker.shared.button.cursor};
+
+			&[data-disabled] {
+				cursor: ${theme.picker.shared.button.disabled.cursor};
+				color: ${theme.picker.shared.button.disabled.color};
+			}
+
+			&[data-focus-visible] {
+				outline: ${theme.picker.shared.focusVisible.outline};
+			}
+		}
+
+		&[data-invalid] {
+			border: ${theme.picker.shared.invalid.border};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.picker.shared.disabled.cursor};
+			color: ${theme.picker.shared.disabled.color};
+			background-color: ${theme.picker.shared.disabled.backgroundColor};
+		}
+	`;
+};
+const dateSegmentStyles = (theme) => {
+  return css`
+		&[data-placeholder] {
+			color: ${theme.segment.shared.placeholder.color};
+		}
+
+		&[data-focus-visible],
+		&[data-focused] {
+			outline: ${theme.segment.shared.placeholder.focusVisible.outline};
+		}
+	`;
+};
+const datePickerPopoverStyles = (theme) => {
+  return css`
+		background-color: ${theme.popover.shared.backgroundColor};
+		padding: ${theme.popover.shared.padding.top}
+			${theme.popover.shared.padding.right}
+			${theme.popover.shared.padding.bottom}
+			${theme.popover.shared.padding.left};
+		box-shadow: ${theme.popover.shared.boxShadow};
+	`;
+};
+const calendarHeaderStyles = (theme) => {
+  return css`
+		display: ${theme.calendar.header.shared.display};
+		align-items: ${theme.calendar.header.shared.alignItems};
+		justify-content: ${theme.calendar.header.shared.justifyContent};
+		${convertTypographyToEmotionStringStyle(theme.calendar.header.shared.typography)}
+
+		button {
+			background-color: ${theme.calendar.header.shared.button.backgroundColor};
+			border: ${theme.calendar.header.shared.button.border};
+			padding: ${theme.calendar.header.shared.button.padding.top}
+				${theme.calendar.header.shared.button.padding.right}
+				${theme.calendar.header.shared.button.padding.bottom}
+				${theme.calendar.header.shared.button.padding.left};
+			margin: ${theme.calendar.header.shared.button.margin.top}
+				${theme.calendar.header.shared.button.margin.right}
+				${theme.calendar.header.shared.button.margin.bottom}
+				${theme.calendar.header.shared.button.margin.left};
+			display: ${theme.calendar.header.shared.button.display};
+			align-items: ${theme.calendar.header.shared.button.alignItems};
+			justify-content: ${theme.calendar.header.shared.button.justifyContent};
+			color: ${theme.calendar.header.shared.button.color};
+			cursor: ${theme.calendar.header.shared.button.cursor};
+			width: ${theme.calendar.header.shared.button.width};
+			height: ${theme.calendar.header.shared.button.height};
+			aspect-ratio: ${theme.calendar.header.shared.button.aspectRatio};
+
+			&[data-hovered] {
+				background-color: ${theme.calendar.header.shared.button.hovered.backgroundColor};
+			}
+
+			&[data-pressed] {
+				background-color: ${theme.calendar.header.shared.button.pressed.backgroundColor};
+			}
+
+			&[data-selected] {
+				background-color: ${theme.calendar.header.shared.button.selected.backgroundColor};
+			}
+
+			&[data-focus-visible] {
+				outline: ${theme.calendar.header.shared.button.focusVisible.outline};
+			}
+
+			&[data-disabled] {
+				cursor: ${theme.calendar.header.shared.button.disabled.cursor};
+				color: ${theme.calendar.header.shared.button.disabled.color};
+			}
+		}
+	`;
+};
+const calendarGridStyles = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.calendar.grid.shared.typography)}
+
+		border-collapse: ${theme.calendar.grid.shared.borderCollapse};
+		border-spacing: ${theme.calendar.grid.shared.borderSpacing};
+
+		th {
+			width: ${theme.calendar.grid.shared.th.width};
+			height: ${theme.calendar.grid.shared.th.height};
+			vertical-align: ${theme.calendar.grid.shared.th.verticalAlign};
+		}
+	`;
+};
+const calendarCellStyles = (theme) => {
+  return css`
+		width: ${theme.calendar.cell.shared.width};
+		aspect-ratio: ${theme.calendar.cell.shared.aspectRatio};
+		display: ${theme.calendar.cell.shared.display};
+		align-items: ${theme.calendar.cell.shared.alignItems};
+		justify-content: ${theme.calendar.cell.shared.justifyContent};
+		cursor: ${theme.calendar.cell.shared.cursor};
+
+		&[data-outside-month] {
+			display: ${theme.calendar.cell.shared.outsideMonth.display};
+		}
+
+		&[data-hovered] {
+			background-color: ${theme.calendar.cell.shared.hovered.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.calendar.cell.shared.pressed.backgroundColor};
+		}
+
+		&[data-selected] {
+			background-color: ${theme.calendar.cell.shared.selected.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.calendar.cell.shared.focusVisible.outline};
+		}
+
+		&[data-today] {
+			/* TODO: design for indicating today's date, not yet in figma */
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.calendar.cell.shared.disabled.cursor};
+			color: ${theme.calendar.cell.shared.disabled.color};
+		}
+	`;
+};
+
+export { calendarCellStyles, calendarGridStyles, calendarHeaderStyles, datePickerPopoverStyles, datePickerStyles, dateSegmentStyles, defaultDatePickerTheme };

package/dist/components/form/types.cjs

@@ -6,7 +6,8 @@ const ALLOWED_FORM_CONTAINERS = [
   reactAriaComponents.TextField,
   reactAriaComponents.Select,
   reactAriaComponents.RadioGroup,
-  reactAriaComponents.CheckboxGroup
+  reactAriaComponents.CheckboxGroup,
+  reactAriaComponents.DatePicker
 ];
 
 exports.ALLOWED_FORM_CONTAINERS = ALLOWED_FORM_CONTAINERS;