chore: Datepicker Widget

app/client/packages/design-system/widgets/src/components/Calender/index.tsx

@@ -0,0 +1 @@
+export * from "./src";

app/client/packages/design-system/widgets/src/components/Calender/src/Calendar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type {
+  DateValue,
+  CalendarProps as HeadlessCalendarProps,
+} from "react-aria-components";
+import {
+  CalendarGrid as HeadlessCalendarGrid,
+  CalendarGridBody as HeadlessCalendarGridBody,
+  CalendarGridHeader as HeadlessCalendarGridHeader,
+  Calendar as HeadlessCalendar,
+} from "react-aria-components";
+import { Flex, IconButton } from "@appsmith/wds";
+
+import styles from "./styles.module.css";
+import { CalendarCell } from "./CalendarCell";
+import { CalendarHeading } from "./CalendarHeading";
+import { CalendarHeaderCell } from "./CalendarHeaderCell";
+
+type CalendarProps<T extends DateValue> = HeadlessCalendarProps<T>;
+
+export const Calendar = <T extends DateValue>(props: CalendarProps<T>) => {
+  return (
+    <HeadlessCalendar {...props} className={styles.calendar}>
+      <Flex alignItems="center" justifyContent="space-between" width="100%">
+        <IconButton icon="chevron-left" slot="previous" variant="ghost" />
+        <CalendarHeading size="subtitle" />
+        <IconButton icon="chevron-right" slot="next" variant="ghost" />
+      </Flex>
+      <HeadlessCalendarGrid>
+        <HeadlessCalendarGridHeader>
+          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
+        </HeadlessCalendarGridHeader>
+        <HeadlessCalendarGridBody>
+          {(date) => <CalendarCell date={date} />}
+        </HeadlessCalendarGridBody>
+      </HeadlessCalendarGrid>
+    </HeadlessCalendar>
+  );
+};

app/client/packages/design-system/widgets/src/components/Calender/src/CalendarCell.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text } from "@appsmith/wds";
+import { CalendarCell as HeadlessCalendarCell } from "react-aria-components";
+
+import styles from "./styles.module.css";
+import type { CalendarCellProps } from "./types";
+
+function CalendarCell(props: CalendarCellProps) {
+  const { date } = props;
+
+  return (
+    <HeadlessCalendarCell {...props} className={styles["calendar-cell"]}>
+      <Text>{date.day}</Text>
+    </HeadlessCalendarCell>
+  );
+}
+
+export { CalendarCell };

app/client/packages/design-system/widgets/src/components/Calender/src/CalendarHeaderCell.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Text } from "@appsmith/wds";
+import { CalendarHeaderCell as HeadlessCalendarHeaderCell } from "react-aria-components";
+
+import type { CalendarHeaderCellProps } from "./types";
+
+function CalendarHeaderCell(props: CalendarHeaderCellProps) {
+  const { children } = props;
+
+  return (
+    <HeadlessCalendarHeaderCell {...props}>
+      <Text color="neutral" fontWeight={700} textAlign="center">
+        {children}
+      </Text>
+    </HeadlessCalendarHeaderCell>
+  );
+}
+
+export { CalendarHeaderCell };

app/client/packages/design-system/widgets/src/components/Calender/src/CalendarHeading.tsx

@@ -0,0 +1,21 @@
+import { Text, type TextProps } from "@appsmith/wds";
+import React, { forwardRef, type ForwardedRef } from "react";
+import { HeadingContext, useContextProps } from "react-aria-components";
+
+function CalendarHeading(
+  props: TextProps,
+  ref: ForwardedRef<HTMLHeadingElement>,
+) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  const { children, ...domProps } = props;
+
+  return (
+    <Text {...domProps} color="neutral" ref={ref}>
+      {children}
+    </Text>
+  );
+}
+
+const _CalendarHeading = forwardRef(CalendarHeading);
+
+export { _CalendarHeading as CalendarHeading };

app/client/packages/design-system/widgets/src/components/Calender/src/index.ts

@@ -0,0 +1,4 @@
+export { Calendar } from "./Calendar";
+export { CalendarCell } from "./CalendarCell";
+export { CalendarHeading } from "./CalendarHeading";
+export { CalendarHeaderCell } from "./CalendarHeaderCell";

app/client/packages/design-system/widgets/src/components/Calender/src/styles.module.css

@@ -0,0 +1,66 @@
+.calendar {
+  padding: var(--outer-spacing-3);
+}
+
+.calendar table {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.calendar thead tr {
+  display: flex;
+  justify-content: space-around;
+  padding-block-start: var(--inner-spacing-1);
+}
+
+.calendar tbody tr {
+  display: flex;
+  justify-content: space-between;
+}
+
+.calendar thead th {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sizing-9);
+  block-size: var(--sizing-9);
+}
+
+.calendar tbody td {
+  padding: var(--inner-spacing-1);
+}
+
+.calendar tbody [role="button"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sizing-9);
+  block-size: var(--sizing-9);
+  border-radius: var(--border-radius-elevation-3);
+  border: var(--border-width-2) solid transparent;
+  text-align: center;
+}
+
+.calendar tbody [role="button"][data-disabled] {
+  opacity: var(--opacity-disabled);
+}
+
+.calendar tbody [role="button"][data-hovered] {
+  background-color: var(--color-bg-accent-subtle-hover);
+  cursor: pointer;
+}
+
+.calendar tbody [role="button"][data-pressed] {
+  background-color: var(--color-bg-accent-subtle-active);
+}
+
+.calendar tbody [role="button"][data-selected] {
+  background-color: var(--color-bg-accent);
+  color: var(--color-fg-on-accent);
+}
+
+.calendar tbody [role="button"][data-focus-visible],
+.calendar tbody [role="button"][data-focused] {
+  border-color: var(--color-bd-accent);
+}

app/client/packages/design-system/widgets/src/components/Calender/src/types.ts

@@ -0,0 +1,10 @@
+import {
+  type CalendarCellProps as HeadlessCalendarCellProps,
+  type CalendarHeaderCellProps as HeadlessCalendarHeaderCellProps,
+} from "react-aria-components";
+
+export type CalendarCellProps = HeadlessCalendarCellProps &
+  React.RefAttributes<HTMLTableCellElement>;
+
+export type CalendarHeaderCellProps = HeadlessCalendarHeaderCellProps &
+  React.RefAttributes<HTMLTableCellElement>;

app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css

@@ -31,6 +31,18 @@
   padding-inline: var(--inner-spacing-2);
 }
 
+.input:is([data-date-input]) {
+  display: flex;
+  gap: calc(var(--inner-spacing-1) / 2);
+  align-items: center;
+}
+
+.input:is([data-date-input]) [data-focused="true"] {
+  background-color: var(--color-bg-accent);
+  color: var(--color-fg-on-accent);
+  box-shadow: 0 0 0 1px var(--color-bd-focus);
+}
+
 .inputWrapper:has([data-hovered]) {
   background-color: var(--color-bg-neutral-subtle-hover);
   box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle-hover);

app/client/packages/design-system/widgets/src/components/DatePicker/index.ts

@@ -0,0 +1 @@
+export * from "./src";

app/client/packages/design-system/widgets/src/components/DatePicker/src/DatePicker.tsx

@@ -0,0 +1,70 @@
+import {
+  FieldError,
+  FieldDescription,
+  FieldLabel,
+  FieldCalenderPopover,
+  Button,
+} from "@appsmith/wds";
+import { getTypographyClassName } from "@appsmith/wds-theming";
+import clsx from "clsx";
+import React from "react";
+import {
+  DateInput,
+  DateSegment,
+  Group,
+  DatePicker as HeadlessDatePicker,
+} from "react-aria-components";
+
+import type { DatePickerProps } from "./types";
+import styles from "../../ComboBox/src/styles.module.css";
+
+export const DatePicker = (props: DatePickerProps) => {
+  const {
+    contextualHelp,
+    description,
+    errorMessage,
+    isLoading,
+    isRequired,
+    label,
+    size = "medium",
+    ...rest
+  } = props;
+
+  return (
+    <HeadlessDatePicker
+      aria-label={Boolean(label) ? undefined : "DatePicker"}
+      className={styles.formField}
+      data-size={size}
+      isRequired={isRequired}
+      {...rest}
+    >
+      {({ isInvalid }) => (
+        <>
+          <FieldLabel
+            contextualHelp={contextualHelp}
+            isRequired={isRequired}
+            text={label}
+          />
+          <Group className={styles.inputWrapper}>
+            <DateInput
+              className={clsx(styles.input, getTypographyClassName("body"))}
+              data-date-input
+            >
+              {(segment) => <DateSegment segment={segment} />}
+            </DateInput>
+            <Button
+              color={Boolean(isLoading) ? "neutral" : "accent"}
+              icon="calendar-month"
+              isLoading={isLoading}
+              size={size === "medium" ? "small" : "xSmall"}
+              variant={Boolean(isLoading) ? "ghost" : "filled"}
+            />
+          </Group>
+          <FieldError errorMessage={errorMessage} />
+          <FieldDescription description={description} isInvalid={isInvalid} />
+          <FieldCalenderPopover />
+        </>
+      )}
+    </HeadlessDatePicker>
+  );
+};

app/client/packages/design-system/widgets/src/components/DatePicker/src/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker";
+export type { DateValue } from "./types";

app/client/packages/design-system/widgets/src/components/DatePicker/src/types.ts

@@ -0,0 +1,29 @@
+import type {
+  DateValue,
+  DatePickerProps as SpectrumDatePickerProps,
+  ValidationResult,
+} from "react-aria-components";
+import type { SIZES } from "@appsmith/wds";
+
+export interface DatePickerProps
+  extends Omit<SpectrumDatePickerProps<DateValue>, "slot" | "placeholder"> {
+  /** The content to display as the label. */
+  label?: string;
+  /** The content to display as the description. */
+  description?: string;
+  /** The content to display as the error message. */
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  /** size of the select
+   *
+   * @default medium
+   */
+  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
+  /** loading state for the input */
+  isLoading?: boolean;
+  /** A ContextualHelp element to place next to the label. */
+  contextualHelp?: string;
+  /** The content to display as the placeholder. */
+  placeholder?: string;
+}
+
+export type { DateValue };