refactor: datepicker required

Author: segunadebayo

.changeset/date-picker-required-invalid-props.md

@@ -0,0 +1,10 @@
+---
+"@zag-js/date-picker": patch
+---
+
+Add support for `required` and `invalid` props in date-picker
+
+- Add `required` prop to mark the date picker as required for form validation
+- Add `invalid` prop to mark the date picker as invalid
+- Both props are now properly passed to the input element with appropriate ARIA attributes
+- Exposed `disabled` and `invalid` in the date picker API for better state access

packages/machines/date-picker/src/date-picker.connect.ts

@@ -64,8 +64,9 @@ export function connect<T extends PropTypes>(
   const hoveredValue = context.get("hoveredValue")
   const hoveredRangeValue = hoveredValue ? adjustStartAndEndDate([selectedValue[0], hoveredValue]) : []
 
-  const disabled = prop("disabled")
-  const readOnly = prop("readOnly")
+  const disabled = Boolean(prop("disabled"))
+  const readOnly = Boolean(prop("readOnly"))
+  const invalid = Boolean(prop("invalid"))
   const interactive = computed("isInteractive")
 
   const min = prop("min")
@@ -243,6 +244,8 @@ export function connect<T extends PropTypes>(
   return {
     focused,
     open,
+    disabled,
+    invalid,
     inline: !!prop("inline"),
     view: context.get("view"),
     getRangePresetValue(preset) {
@@ -790,6 +793,9 @@ export function connect<T extends PropTypes>(
         "data-state": open ? "open" : "closed",
         readOnly,
         disabled,
+        required: prop("required"),
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
         placeholder: prop("placeholder") || getInputPlaceholder(locale),
         defaultValue: computed("valueAsString")[index],
         onBeforeInput(event) {

packages/machines/date-picker/src/date-picker.props.ts

@@ -22,6 +22,7 @@ export const props = createProps<DatePickerProps>()([
   "id",
   "ids",
   "inline",
+  "invalid",
   "isDateUnavailable",
   "locale",
   "max",
@@ -36,6 +37,7 @@ export const props = createProps<DatePickerProps>()([
   "defaultOpen",
   "positioning",
   "readOnly",
+  "required",
   "selectionMode",
   "startOfWeek",
   "timeZone",

packages/machines/date-picker/src/date-picker.types.ts

@@ -116,6 +116,14 @@ export interface DatePickerProps extends DirectionProperty, CommonProperties {
    * Whether the calendar is read-only.
    */
   readOnly?: boolean | undefined
+  /**
+   * Whether the date picker is required
+   */
+  required?: boolean | undefined
+  /**
+   * Whether the date picker is invalid
+   */
+  invalid?: boolean | undefined
   /**
    * Whether day outside the visible range can be selected.
    * @default false
@@ -504,6 +512,14 @@ export interface DatePickerApi<T extends PropTypes = PropTypes> {
    * Whether the date picker is open
    */
   open: boolean
+  /**
+   * Whether the date picker is disabled
+   */
+  disabled: boolean
+  /**
+   * Whether the date picker is invalid
+   */
+  invalid: boolean
   /**
    * Whether the date picker is rendered inline
    */