feat: Allow specifiying a time in a date input

packages/react/src/DateInput/DateInput.tsx

@@ -10,16 +10,18 @@ import type { ForwardedRef, InputHTMLAttributes } from 'react'
 export type DateInputProps = {
   /** Whether the value fails a validation rule. */
   invalid?: boolean
+  /** The kind of data that the user should provide. */
+  type?: 'date' | 'datetime-local'
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>
 
 export const DateInput = forwardRef(
-  ({ className, invalid, ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+  ({ className, invalid, type = 'date', ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
     <input
       {...restProps}
       aria-invalid={invalid || undefined}
       className={clsx('ams-date-input', className)}
       ref={ref}
-      type="date"
+      type={type}
     />
   ),
 )

storybook/src/components/DateInput/DateInput.docs.mdx

@@ -12,10 +12,47 @@ import README from "../../../../packages/css/src/components/date-input/README.md
 
 <Controls />
 
-## Invalid
+## Examples
+
+### Date and time
+
+To let the user select a specific time on a date, use the `datetime-local` type.
+Note that the control’s UI varies in general from browser to browser.
+
+The value represents a local date and time, not necessarily the user’s local date and time.
+In other words, the input allows any valid combination of year, month, day, hour, and minute — even if such a combination is invalid in the user’s local time zone.
+
+<Canvas of={DateInputStories.DateTime} />
+
+### Invalid
+
+Indicates that the input value does not meet the specified constraints.
+The border of an invalid input is red.
+An [Error Message](?path=/docs/components-forms-error-message--docs) must be displayed above the field.
+To highlight the error even more, the parent [Field](?path=/docs/components-forms-field--docs) component’s `invalid` prop must also be set.
 
 <Canvas of={DateInputStories.Invalid} />
 
-## Disabled
+### Disabled
+
+A field that can not (yet) be used is indicated with a grey border.
+It will not respond to interactions, e.g. with the mouse or keyboard.
+
+Avoid disabling input fields.
+They cause usability and accessibility problems.
+
+Disabled fields are often skipped by screen readers.
+This makes it hard for the user who rely on assistive technologies to understand the form’s content.
+They are not included in form submissions, which can lead to incomplete or missing data.
+
+Alternatives:
+
+1. Use the `readonly` attribute.
+   This makes a field uneditable but keeps it accessible and included in form submissions.
+2. Display data as plain text or within a non-input element like a `span` or `div`.
+3. Use conditional logic to hide or show fields based on user interaction.
+   This ensures all necessary fields are accessible and editable when needed.
+4. Use a label or text to explain why a field is not editable if you must disable it temporarily.
+   This helps the user understand the context.
 
 <Canvas of={DateInputStories.Disabled} />

storybook/src/components/DateInput/DateInput.stories.tsx

@@ -26,6 +26,12 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
+export const DateTime: Story = {
+  args: {
+    type: 'datetime-local',
+  },
+}
+
 export const Invalid: Story = {
   args: {
     invalid: true,