@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/components/Input/Input.stories.tsx

@@ -10,17 +10,23 @@ import { type MessageValence } from '@dxos/ui-types';
 import { withLayoutVariants, withTheme } from '../../testing';
 import {
   type CheckboxProps,
+  type DateInputProps,
+  type DateTimeInputProps,
   Input,
   type PinInputProps,
   type SwitchProps,
   type TextAreaProps,
   type TextInputProps,
+  type TimeProps,
 } from './Input';
 
 type VariantMap = {
   text: TextInputProps;
   pin: PinInputProps;
   textarea: TextAreaProps;
+  time: TimeProps;
+  date: DateInputProps;
+  datetime: DateTimeInputProps;
   checkbox: CheckboxProps;
   switch: SwitchProps;
 };
@@ -54,6 +60,9 @@ const DefaultStory = ({
       {kind === 'text' && <Input.TextInput {...props} />}
       {kind === 'pin' && <Input.PinInput {...props} />}
       {kind === 'textarea' && <Input.TextArea {...props} />}
+      {kind === 'time' && <Input.Time {...props} />}
+      {kind === 'date' && <Input.Date {...props} />}
+      {kind === 'datetime' && <Input.DateTime {...props} />}
       {kind === 'checkbox' && <Input.Checkbox {...props} />}
       {kind === 'switch' && <Input.Switch {...props} />}
 
@@ -76,34 +85,17 @@ export default meta;
 
 type Story = StoryObj<DefaultStoryProps & Variant>;
 
-export const DensityCoarse: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is an input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'coarse',
-  },
-};
-
-export const DensityFine: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is a density:fine input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'fine',
-  },
+export const Density: Story = {
+  render: () => (
+    <div className='flex flex-col gap-4'>
+      {(['lg', 'md', 'sm', 'xs'] as const).map((density) => (
+        <Input.Root key={density}>
+          <Input.Label>{`density="${density}"`}</Input.Label>
+          <Input.TextInput density={density} placeholder={`This is a density:${density} input`} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
 };
 
 export const Subdued: Story = {
@@ -186,10 +178,86 @@ export const PinInput: Story = {
     length: 6,
     description: 'Type in secret you received',
     pattern: '\\d*',
-    density: 'coarse',
+    density: 'lg',
   },
 };
 
+export const Time: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time',
+    defaultValue: '09:30',
+  },
+};
+
+export const TimeUncontrolled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (uncontrolled)',
+    defaultValue: '14:00',
+  },
+};
+
+export const TimeAmPm: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (12-hour, AM/PM)',
+    defaultValue: '14:00',
+    hourCycle: 12,
+  } as any,
+};
+
+export const TimeDisabled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (disabled)',
+    defaultValue: '12:00',
+    disabled: true,
+  },
+};
+
+export const Date: Story = {
+  args: {
+    kind: 'date',
+    label: 'Date',
+    defaultValue: '1990-05-12',
+  },
+};
+
+export const DateTime: Story = {
+  args: {
+    kind: 'datetime',
+    label: 'Date & time',
+    defaultValue: '2026-06-01T15:30',
+  },
+};
+
+export const DateWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.Date defaultValue='2026-06-01' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
+export const DateTimeWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date & time (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.DateTime defaultValue='2026-06-01T15:30' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
 export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
@@ -206,3 +274,38 @@ export const Switch: Story = {
     description: 'On or off',
   },
 };
+
+/**
+ * Native HTML input types. `Input.TextInput` accepts every standard
+ * `<input type="…">` value via its `type` prop; this story exercises the most
+ * commonly used ones so the rendering across themes/browsers can be
+ * inspected at a glance.
+ */
+const TEXT_INPUT_TYPES: { type: string; placeholder: string }[] = [
+  { type: 'text', placeholder: 'Plain text' },
+  { type: 'email', placeholder: 'name@example.com' },
+  { type: 'password', placeholder: '••••••••' },
+  { type: 'search', placeholder: 'Search…' },
+  { type: 'tel', placeholder: '+1 (555) 555-5555' },
+  { type: 'url', placeholder: 'https://example.com' },
+  { type: 'number', placeholder: '42' },
+  { type: 'date', placeholder: '' },
+  { type: 'time', placeholder: '' },
+  { type: 'datetime-local', placeholder: '' },
+  { type: 'month', placeholder: '' },
+  { type: 'week', placeholder: '' },
+  { type: 'color', placeholder: '' },
+];
+
+export const TextInputTypes: Story = {
+  render: () => (
+    <div className='flex flex-col gap-3 min-w-[24rem]'>
+      {TEXT_INPUT_TYPES.map(({ type, placeholder }) => (
+        <Input.Root key={type}>
+          <Input.Label>{`type="${type}"`}</Input.Label>
+          <Input.TextInput type={type} placeholder={placeholder} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
+};

package/src/components/Input/Input.theme.ts

@@ -0,0 +1,191 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { densityDimensions, staticDisabled } from '@dxos/ui-theme';
+import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '@dxos/ui-theme';
+import {
+  type ComponentFragment,
+  type ComponentFunction,
+  type Density,
+  type Elevation,
+  type MessageValence,
+  type Size,
+} from '@dxos/ui-types';
+
+import { inputTextLabel } from './constants';
+
+export type InputStyleProps = Partial<{
+  variant: 'default' | 'subdued' | 'static';
+  density: Density;
+  disabled: boolean;
+  elevation: Elevation;
+  focused: boolean;
+  validationValence: MessageValence;
+  size: Size;
+  checked: boolean;
+}>;
+
+export type InputMetaStyleProps = Partial<{
+  srOnly: boolean;
+  validationValence: MessageValence;
+}>;
+
+const textInputSurfaceFocus =
+  'transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator';
+
+const textInputSurfaceHover = 'hover:bg-focus-surface';
+
+const booleanInputSurface =
+  'shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-bg aria-[checked=mixed]:bg-accent-bg';
+
+const booleanInputSurfaceHover =
+  'hover:bg-un-accent-hover hover:aria-checked:bg-accent-bg-hover hover:aria-[checked=mixed]:bg-accent-bg-hover';
+
+// TODO(burdon): Replace with semantic tokens.
+const valence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return 'shadow-emerald-500/50 dark:shadow-emerald-600/50';
+    case 'info':
+      return 'shadow-cyan-500/50 dark:shadow-cyan-600/50';
+    case 'warning':
+      return 'shadow-amber-500/50 dark:shadow-amber-600/50';
+    case 'error':
+      return 'shadow-rose-500/50 dark:shadow-rose-600/50';
+  }
+};
+
+const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
+  'dx-focus-subdued',
+  densityDimensions(props.density),
+  props.disabled && staticDisabled,
+];
+
+const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-fg rounded-xs placeholder-placeholder',
+  textInputSurfaceFocus,
+  densityDimensions(props.density),
+  props.disabled ? staticDisabled : textInputSurfaceHover,
+];
+
+const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-fg rounded-xs placeholder-placeholder',
+  textInputSurfaceFocus,
+  textInputSurfaceHover,
+  props.focused && 'bg-attention-surface',
+  valence(props.validationValence),
+  props.disabled && staticDisabled,
+  props.focused && 'dx-focus-static',
+];
+
+const input: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  props.variant === 'subdued'
+    ? mx(...sharedSubduedInputStyles(props), ...etc)
+    : props.variant === 'static'
+      ? mx(...sharedStaticInputStyles(props), ...etc)
+      : mx(
+          ...sharedDefaultInputStyles(props),
+          !props.disabled && 'dx-focus-ring',
+          valence(props.validationValence),
+          ...etc,
+        );
+
+const textArea: ComponentFunction<InputStyleProps> = (props, ...etc) => input(props, ...etc);
+
+const checkbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
+
+const checkboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
+  mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
+
+const switchRoot: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
+  mx(
+    getHeight(size),
+    getWidth(snapSize(sizeValue(size) * 1.75, 9)),
+    booleanInputSurface,
+    !disabled && booleanInputSurfaceHover,
+    // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
+    'cursor-pointer shrink-0 rounded-full px-1 mx-1 relative',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const switchThumb: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx(
+    getSize(size === 'px' ? 'px' : ((size - 2) as Size)),
+    'block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]',
+    ...etc,
+  );
+
+const withSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'font-mono selection:bg-transparent mx-auto',
+    props.density === 'lg'
+      ? 'text-lg'
+      : props.density === 'sm'
+        ? 'text-sm'
+        : props.density === 'xs'
+          ? 'text-xs'
+          : 'text-base pointer-fine:text-sm',
+    props.disabled && 'cursor-not-allowed',
+    ...etc,
+  );
+
+const segment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'flex items-center justify-center font-mono',
+    props.density === 'lg'
+      ? 'size-12 rounded-xs'
+      : props.density === 'sm'
+        ? 'size-7 rounded-xs'
+        : props.density === 'xs'
+          ? 'size-6 rounded-xs'
+          : 'size-10 pointer-fine:size-8 rounded-xs',
+    'bg-input-surface text-base-fg transition-colors border border-separator',
+    'data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle',
+    'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle',
+    valence(props.validationValence),
+    props.disabled && staticDisabled,
+    ...etc,
+  );
+
+const label: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('block', inputTextLabel, props.srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('text-description', props.srOnly && 'sr-only', ...etc);
+
+const descriptionAndValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('leading-none my-1.5', props.srOnly && 'sr-only', ...etc);
+
+const validation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx(inputTextLabel, props.srOnly ? 'sr-only' : textValence(props.validationValence), ...etc);
+
+const triggerIcon: ComponentFunction<{}> = (_p, ...etc) =>
+  mx(
+    'shrink-0 inline-flex items-center justify-center size-7 rounded-xs',
+    'bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+export const inputTheme = {
+  input,
+  textArea,
+  inputWithSegments: withSegmentsInput,
+  segment,
+  checkbox,
+  checkboxIndicator,
+  label,
+  description,
+  switch: switchRoot,
+  switchThumb,
+  validation,
+  descriptionAndValidation,
+  triggerIcon,
+};

package/src/components/Input/Input.tsx

@@ -3,8 +3,18 @@
 //
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { createContext } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
 
 import {
   DescriptionAndValidation as DescriptionAndValidationPrimitive,
@@ -30,14 +40,130 @@ import {
 import { mx } from '@dxos/ui-theme';
 import { type Density, type Elevation, type Size } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton, IconButtonProps } from '../Button';
 import { Icon } from '../Icon';
+import {
+  SegmentedDate,
+  type SegmentedDateProps,
+  SegmentedDateTime,
+  type SegmentedDateTimeProps,
+  SegmentedTime,
+  type SegmentedTimeProps,
+} from './SegmentedInput';
 
 type InputVariant = 'default' | 'subdued';
 
 type InputSharedProps = Partial<{ density: Density; elevation: Elevation; variant: InputVariant }>;
 
+//
+// Trigger context — lets a sibling `Input.TriggerIcon` open a picker registered by a field inside
+// the same `Input.Root`. Each registered handler is keyed; the most recent registration wins.
+//
+
+type InputTriggerHandler = () => void;
+
+type InputTriggerContextValue = {
+  registerTrigger: (handler: InputTriggerHandler) => () => void;
+  trigger: () => void;
+  hasTrigger: boolean;
+};
+
+// Default context makes the trigger registry a no-op outside `Input.Root` (consumers opt in).
+const [InputTriggerProvider, useInputTriggerContext] = createContext<InputTriggerContextValue>(INPUT_NAME, {
+  registerTrigger: () => () => {},
+  trigger: () => {},
+  hasTrigger: false,
+});
+
+/**
+ * Field hook. Pass an opener function; while the field is mounted, an `Input.TriggerIcon`
+ * sibling will call this opener on press. Returns a no-op when used outside `Input.Root`.
+ */
+const useInputTrigger = (handler: InputTriggerHandler | undefined) => {
+  const ctx = useInputTriggerContext('useInputTrigger');
+  useEffect(() => {
+    if (!handler) {
+      return;
+    }
+    return ctx.registerTrigger(handler);
+  }, [ctx, handler]);
+};
+
+//
+// Root — wraps the @dxos/react-input primitive root with the trigger registry.
+//
+
+const Root = (props: InputRootProps) => {
+  const handlerRef = useRef<InputTriggerHandler | null>(null);
+  const [hasTrigger, setHasTrigger] = useState(false);
+
+  const registerTrigger = useCallback((handler: InputTriggerHandler) => {
+    handlerRef.current = handler;
+    setHasTrigger(true);
+    return () => {
+      if (handlerRef.current === handler) {
+        handlerRef.current = null;
+        setHasTrigger(false);
+      }
+    };
+  }, []);
+
+  const trigger = useCallback(() => {
+    handlerRef.current?.();
+  }, []);
+
+  return (
+    <InputTriggerProvider registerTrigger={registerTrigger} trigger={trigger} hasTrigger={hasTrigger}>
+      <InputRoot {...props} />
+    </InputTriggerProvider>
+  );
+};
+
+Root.displayName = 'Input.Root';
+
+//
+// TriggerIcon — sibling button that opens the picker of the registered field. Renders nothing
+// when no field in the surrounding `Input.Root` has registered an opener.
+//
+
+// `label` and `icon` have defaults below, so both are optional for callers (e.g. `<Input.TriggerIcon />`).
+// `onClick` is reserved — the trigger always opens the registered picker.
+type TriggerIconProps = Omit<IconButtonProps, 'label' | 'onClick'> & { label?: string };
+
+const TriggerIcon = forwardRef<HTMLButtonElement, TriggerIconProps>(
+  ({ classNames, icon = 'ph--calendar--regular', 'aria-label': ariaLabel, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const ctx = useInputTriggerContext('Input.TriggerIcon');
+    if (!ctx.hasTrigger) {
+      return null;
+    }
+
+    return (
+      <IconButton
+        ref={forwardedRef}
+        variant='ghost'
+        icon={icon}
+        iconOnly
+        classNames={classNames}
+        aria-label={ariaLabel}
+        label={label ?? ariaLabel ?? t('trigger-button.label')}
+        {...props}
+        onClick={ctx.trigger}
+      />
+    );
+  },
+);
+
+TriggerIcon.displayName = 'Input.TriggerIcon';
+
+//
+// Label
+//
+
 type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
 
 const Label = forwardRef<HTMLLabelElement, LabelProps>(({ classNames, children, srOnly, ...props }, forwardedRef) => {
@@ -49,6 +175,12 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(({ classNames, children,
   );
 });
 
+Label.displayName = 'Input.Label';
+
+//
+// Description
+//
+
 type DescriptionProps = ThemedClassName<DescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
@@ -62,6 +194,12 @@ const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
   },
 );
 
+Description.displayName = 'Input.Description';
+
+//
+// Validation
+//
+
 type ValidationProps = ThemedClassName<ValidationPrimitiveProps> & { srOnly?: boolean };
 
 const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>>(
@@ -80,6 +218,12 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
   },
 );
 
+Validation.displayName = 'Input.Validation';
+
+//
+// DescriptionAndValidation
+//
+
 type DescriptionAndValidationProps = ThemedClassName<DescriptionAndValidationPrimitiveProps> & { srOnly?: boolean };
 
 const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
@@ -97,6 +241,12 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
   },
 );
 
+DescriptionAndValidation.displayName = 'Input.DescriptionAndValidation';
+
+//
+// PinInput
+//
+
 type PinInputProps = ThemedClassName<InputSharedProps & Omit<PinInputPrimitiveProps, 'className' | 'segmentClassName'>>;
 
 const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
@@ -120,7 +270,12 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
   },
 );
 
+PinInput.displayName = 'Input.PinInput';
+
+//
+// TextInput
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
+//
 
 type AutoFillProps = {
   noAutoFill?: boolean;
@@ -162,6 +317,12 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
   },
 );
 
+TextInput.displayName = 'Input.TextInput';
+
+//
+// TextArea
+//
+
 type TextAreaProps = InputSharedProps & ThemedClassName<TextAreaPrimitiveProps>;
 
 const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>>(
@@ -193,6 +354,12 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
+TextArea.displayName = 'Input.TextArea';
+
+//
+// Checkbox
+//
+
 type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitive.CheckboxProps, 'children'>> & {
   size?: Size;
 };
@@ -246,6 +413,12 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   },
 );
 
+Checkbox.displayName = 'Input.Checkbox';
+
+//
+// Switch
+//
+
 type SwitchProps = ThemedClassName<
   Omit<ComponentPropsWithRef<'input'>, 'children' | 'onChange'> & { onCheckedChange?: (checked: boolean) => void }
 >;
@@ -291,11 +464,39 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   },
 );
 
+Switch.displayName = 'Input.Switch';
+
+//
+// Date / Time / DateTime — segmented react-aria-components fields with locale-aware ordering,
+// spinbutton semantics, and immutable separators. ISO string API:
+//   - Date     `YYYY-MM-DD`
+//   - Time     `HH:mm`
+//   - DateTime `YYYY-MM-DDTHH:mm`
+// Pair `Input.Date` or `Input.DateTime` with a sibling `Input.TriggerIcon` inside an
+// `Input.Root` to expose a calendar popover; `Input.Time` has no picker.
+//
+
+const Time = SegmentedTime;
+const Date = SegmentedDate;
+const DateTime = SegmentedDateTime;
+
+type TimeProps = SegmentedTimeProps;
+type DateInputProps = SegmentedDateProps;
+type DateTimeInputProps = SegmentedDateTimeProps;
+
+//
+// Input
+//
+
 export const Input = {
-  Root: InputRoot,
+  Root,
+  TriggerIcon,
   PinInput,
   TextInput,
   TextArea,
+  Time,
+  Date,
+  DateTime,
   Checkbox,
   Switch,
   Label,
@@ -304,6 +505,8 @@ export const Input = {
   DescriptionAndValidation,
 };
 
+export { useInputTrigger };
+
 export type {
   InputVariant,
   InputRootProps,
@@ -311,6 +514,9 @@ export type {
   PinInputProps,
   TextInputProps,
   TextAreaProps,
+  TimeProps,
+  DateInputProps,
+  DateTimeInputProps,
   CheckboxProps,
   SwitchProps,
   LabelProps,