♻️(react) make datefield inputs reusable

Refactor the date field input to ensure the inclusion of two identical
and reusable date field inputs in the future DateRangePicker component.
By factoring out the common logic and structure, we can create a more efficient
and easily reusable component for selecting date ranges.

packages/react/src/components/Forms/DatePicker/DateField.tsx

@@ -12,8 +12,7 @@ import {
 } from "@react-stately/datepicker";
 import { createCalendar, DateValue } from "@internationalized/date";
 import classNames from "classnames";
-import { Button } from ":/components/Button";
-import { useCunningham } from ":/components/Provider";
+import { LabelledBox, Props } from ":/components/Forms/LabelledBox";
 
 interface DateSegmentProps {
   currentSegment: DateSegment;
@@ -21,7 +20,7 @@ interface DateSegmentProps {
   state: DateFieldState;
 }
 
-export const DateSegmentInput = ({
+const DateSegmentInput = ({
   currentSegment,
   previousSegment,
   state,
@@ -43,7 +42,7 @@ export const DateSegmentInput = ({
   );
 };
 
-export const DateField = (props: AriaDatePickerProps<DateValue>) => {
+const DateField = (props: AriaDatePickerProps<DateValue>) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -66,3 +65,21 @@ export const DateField = (props: AriaDatePickerProps<DateValue>) => {
     </div>
   );
 };
+
+interface DateFieldBoxProps
+  extends Props,
+    Omit<AriaDatePickerProps<DateValue>, "label"> {}
+
+const DateFieldBox = ({ ...props }: DateFieldBoxProps) => (
+  <LabelledBox {...props}>
+    <div
+      className={classNames("c__date-picker__inner", {
+        "c__date-picker__inner--collapsed": props.labelAsPlaceholder,
+      })}
+    >
+      <DateField {...props} />
+    </div>
+  </LabelledBox>
+);
+
+export default DateFieldBox;

packages/react/src/components/Forms/DatePicker/index.scss

@@ -39,6 +39,17 @@
     user-select: none;
     min-width: 0;
 
+    &--collapsed {
+      clip: rect(1px, 1px, 1px, 1px);
+      clip-path: inset(50%);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute
+    }
+
     &--clickable {
       cursor: pointer;
     }