panelui-native 0.44.0 → 0.49.0

package/src/components/color-picker/index.tsx

@@ -28,6 +28,28 @@
  * a control with no alpha is one that has no `ColorPicker.Alpha`, not one with
  * a prop turned off.
  *
+ * ## Folding it away
+ *
+ * A picker is a page's worth of controls in service of one value, and that
+ * value is read far more often than it is changed — so `presentation` puts the
+ * controls behind the row that reads it out:
+ *
+ * ```tsx
+ * <ColorPicker value={accent} onValueChange={setAccent} presentation="popover">
+ *   <ColorPicker.Trigger>
+ *     <ColorPicker.Field label="Accent" />
+ *   </ColorPicker.Trigger>
+ *   <ColorPicker.Content>
+ *     <ColorPicker.Area />
+ *     <ColorPicker.Hue />
+ *   </ColorPicker.Content>
+ * </ColorPicker>
+ * ```
+ *
+ * `Content` re-provides the picker's context around what it holds, because the
+ * panel is portalled above the rest of the screen and is therefore no longer
+ * below the picker in the tree by the time the parts inside it go looking.
+ *
  * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  */
 import {
@@ -40,6 +62,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ReactElement,
   type ReactNode,
 } from 'react';
 import {
@@ -81,7 +104,9 @@ import {
   type ColorFormat,
   type HsvaColor,
 } from '../../utils/color';
+import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
+import { Popover, type PopoverContentProps } from '../popover';
 
 /** Settles a thumb that was moved by something other than a finger. */
 const TIMING = { duration: 140 } as const;
@@ -206,6 +231,16 @@ function useColorPicker(part: string) {
 /** Where a picker starts when it is handed a value it cannot read. */
 const FALLBACK: HsvaColor = { h: 0, s: 1, v: 1, a: 1 };
 
+/** How the controls get onto the screen. */
+export type ColorPickerPresentation = 'inline' | 'popover' | 'bottom-sheet';
+
+/**
+ * Floor for the panel's width when it takes the trigger's. A swatch row is a
+ * narrow trigger, and a square you drag on is not a control that survives being
+ * squeezed to match one.
+ */
+const CONTENT_MIN_WIDTH = 268;
+
 export interface ColorPickerProps extends Omit<ColorPickerVariantProps, 'disabled'> {
   className?: string;
   /** Controlled colour. Leave unset and pass `defaultValue` to run uncontrolled. */
@@ -233,6 +268,19 @@ export interface ColorPickerProps extends Omit<ColorPickerVariantProps, 'disable
    * buzz proportional to speed.
    */
   haptics?: boolean;
+  /**
+   * How the controls get onto the screen.
+   *
+   * `inline` stacks them where they are written, and is the default. The other
+   * two put them behind a `ColorPicker.Trigger` and draw them in a
+   * `ColorPicker.Content` — which is the arrangement a colour usually wants,
+   * since a picker is a page's worth of controls in service of one value that
+   * is looked at far more often than it is changed.
+   */
+  presentation?: ColorPickerPresentation;
+  /** Controlled open state of the panel. Ignored by `inline`. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   /** The parts, in the order they should stack. */
   children: ReactNode;
 }
@@ -249,6 +297,9 @@ const ColorPickerRoot = forwardRef<View, ColorPickerProps>(
       disabled = false,
       haptics = false,
       size = 'md',
+      presentation = 'inline',
+      open,
+      onOpenChange,
       children,
     },
     ref
@@ -319,6 +370,16 @@ const ColorPickerRoot = forwardRef<View, ColorPickerProps>(
       [hue, saturation, brightness, opacity, emit, format, disabled, haptics, size]
     );
 
+    if (presentation !== 'inline') {
+      return (
+        <ColorPickerContext.Provider value={context}>
+          <Popover open={open} onOpenChange={onOpenChange} presentation={presentation}>
+            {children}
+          </Popover>
+        </ColorPickerContext.Provider>
+      );
+    }
+
     return (
       <ColorPickerContext.Provider value={context}>
         <View ref={ref} className={slots.root({ className })} collapsable={false}>
@@ -331,6 +392,64 @@ const ColorPickerRoot = forwardRef<View, ColorPickerProps>(
 
 ColorPickerRoot.displayName = 'ColorPicker';
 
+/* ------------------------------------------------------------------ *
+ * Trigger and Content — the picker folded away behind the value.
+ * ------------------------------------------------------------------ */
+
+export interface ColorPickerTriggerProps {
+  /** One element, cloned with an `onPress` that opens the panel. */
+  children: ReactElement<{ onPress?: (...args: unknown[]) => void }>;
+}
+
+/**
+ * What you press to open the picker. `ColorPicker.Field` is the obvious child —
+ * it already reads out the colour it would let you change — but anything that
+ * takes an `onPress` will do.
+ */
+function ColorPickerTrigger({ children }: ColorPickerTriggerProps) {
+  useColorPicker('ColorPicker.Trigger');
+  return <Popover.Trigger>{children}</Popover.Trigger>;
+}
+
+ColorPickerTrigger.displayName = 'ColorPicker.Trigger';
+
+export interface ColorPickerContentProps extends PopoverContentProps {}
+
+/**
+ * The panel the controls are drawn in.
+ *
+ * It re-provides the picker's context around its children, and has to: the
+ * panel is rendered through a portal, above everything else on the screen, so
+ * by the time the parts inside it look for the picker they are no longer
+ * anywhere below it in the tree. Without this the first `ColorPicker.Area`
+ * inside a popover would throw.
+ *
+ * Defaults to the trigger's width, floored, so a panel opened from a labelled
+ * strip lines up under it rather than announcing itself as a different object.
+ */
+function ColorPickerContent({
+  className,
+  width = 'trigger',
+  minWidth = CONTENT_MIN_WIDTH,
+  children,
+  ...props
+}: ColorPickerContentProps) {
+  const ctx = useColorPicker('ColorPicker.Content');
+
+  return (
+    <Popover.Content
+      width={width}
+      minWidth={minWidth}
+      className={cn('gap-3', className)}
+      {...props}
+    >
+      <ColorPickerContext.Provider value={ctx}>{children}</ColorPickerContext.Provider>
+    </Popover.Content>
+  );
+}
+
+ColorPickerContent.displayName = 'ColorPicker.Content';
+
 /* ------------------------------------------------------------------ *
  * The checkerboard behind anything translucent.
  * ------------------------------------------------------------------ */
@@ -1083,6 +1202,14 @@ export interface ColorPickerFieldProps {
   showValue?: boolean;
   /** Extra classes for the swatch. */
   swatchClassName?: string;
+  /**
+   * Makes the strip pressable, and a button to a screen reader.
+   *
+   * Mostly you do not pass this yourself: `ColorPicker.Trigger` clones the
+   * strip with one, which is what turns the row into the thing that opens the
+   * picker.
+   */
+  onPress?: (...args: unknown[]) => void;
   /** Anything to put after the swatch — a copy button, a reset. */
   children?: ReactNode;
 }
@@ -1095,7 +1222,7 @@ export interface ColorPickerFieldProps {
  * A drag through a hundred frames of the same hex costs one render.
  */
 const ColorPickerField = forwardRef<View, ColorPickerFieldProps>(
-  ({ className, label, showValue = true, swatchClassName, children }, ref) => {
+  ({ className, label, showValue = true, swatchClassName, onPress, children }, ref) => {
     const ctx = useColorPicker('ColorPicker.Field');
     const slots = colorPickerVariants({ size: ctx.size });
     const diameter = FIELD_SWATCH[ctx.size];
@@ -1145,13 +1272,21 @@ const ColorPickerField = forwardRef<View, ColorPickerFieldProps>(
       ),
     }));
 
+    // Pressable only when it has somewhere to go. A row that highlights under
+    // a finger and then does nothing is a worse lie than a row that does not
+    // react at all.
+    const Row = onPress ? Pressable : View;
+
     return (
-      <View
+      <Row
         ref={ref}
+        onPress={onPress}
+        disabled={onPress ? ctx.disabled : undefined}
         className={slots.field({ className })}
         // One thing being read out, not three: a label, a value and a swatch
         // announced separately are three stops that each say a third of it.
         accessible
+        accessibilityRole={onPress ? 'button' : undefined}
         accessibilityLabel={label ? `${label}, ${printed}` : printed}
       >
         {label ? <Text className={slots.fieldLabel()}>{label}</Text> : null}
@@ -1168,7 +1303,7 @@ const ColorPickerField = forwardRef<View, ColorPickerFieldProps>(
           <Animated.View style={[StyleSheet.absoluteFill, fillStyle]} />
         </View>
         {children}
-      </View>
+      </Row>
     );
   }
 );
@@ -1606,6 +1741,8 @@ const ColorPickerWheel = forwardRef<View, ColorPickerWheelProps>(
 ColorPickerWheel.displayName = 'ColorPicker.Wheel';
 
 export const ColorPicker = Object.assign(ColorPickerRoot, {
+  Trigger: ColorPickerTrigger,
+  Content: ColorPickerContent,
   Field: ColorPickerField,
   Area: ColorPickerArea,
   Wheel: ColorPickerWheel,

package/src/components/combobox/index.tsx

@@ -109,8 +109,14 @@ const comboboxVariants = tv({
      * have one (`h-6`) and two differently-sized boxes on a `items-center` row
      * centre to two different baselines. `py-0` clears the platform default,
      * which is not the same on iOS and Android.
+     *
+     * The size is a length rather than a `text-*` step for the reason Input
+     * gives: a step sets a size *and* a line height, and the extra leading
+     * lands above the glyphs, so inside a box of fixed height the text and the
+     * placeholder sit below its middle — a few pixels under the chips they are
+     * supposed to be level with. A length leaves the line box the font's own.
      */
-    input: 'h-7 min-w-24 flex-1 py-0 text-base font-normal text-foreground',
+    input: 'h-7 min-w-24 flex-1 py-0 text-[16px] font-normal text-foreground',
     action: 'h-6 w-6 items-center justify-center rounded-full',
     list: 'overflow-hidden rounded-xl border border-border bg-popover p-2 shadow-sm',
     item: 'flex-row items-center gap-2 rounded-lg px-3 py-3',

package/src/components/date-time-picker/index.tsx

@@ -0,0 +1,411 @@
+/**
+ * DateTimePicker — a day and a time of day, picked in one panel.
+ *
+ * ```tsx
+ * const [when, setWhen] = useState<Date>();
+ *
+ * <DateTimePicker value={when} onValueChange={setWhen} />
+ * ```
+ *
+ * ## Why it is one component and not two side by side
+ *
+ * A date field beside a time field is two decisions the reader has to make
+ * separately and then hold together — and the two halves can disagree, which is
+ * how a booking ends up on the right day at a time that has already passed. Here
+ * the calendar and the scale are the same panel over one `Date`, so what is on
+ * screen is the answer rather than two thirds of it.
+ *
+ * The layout follows from that: the calendar is the coarse choice and takes the
+ * room, the time sits under it behind a hairline, and one Done finishes both.
+ * The panel is a fixed width, which is what lets the two halves line up — a
+ * month grid and a time scale that measured themselves independently would be
+ * two boxes of slightly different widths stacked on each other.
+ *
+ * ## It does not close on the date
+ *
+ * `DatePicker` closes as soon as a single day is tapped, because at that point
+ * there is nothing left to say. Here there is: the day is half the value, and
+ * closing on it would hide the other half at the moment it became relevant. So
+ * the panel stays until Done, in every presentation including the popover — the
+ * one place `DatePicker` has no Done button at all.
+ *
+ * ## The time face
+ *
+ * `ruler` by default rather than the wheel. Under a month grid the panel is
+ * already tall, and the wheel is five rows of it; the ruler is one readout over
+ * a scale, reads at arm's length, and is the one face that fits under a calendar
+ * without the whole thing needing to scroll. The other two are a prop away.
+ *
+ * ## Picking the time before the day
+ *
+ * Allowed, and it means today. There has to be *some* day for a time to be a
+ * `Date` at all, and the day the reader is looking at is the only defensible
+ * guess — the alternative is refusing to emit a value until both halves have
+ * been touched, which is a form that silently does nothing when you use it in
+ * the order it did not expect.
+ */
+import {
+  useCallback,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { View } from 'react-native';
+import { CalendarIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { calendarShortDate, resolveCalendar, type CalendarSystem } from '../../utils/date';
+import {
+  clampTime,
+  formatTime,
+  roundToStep,
+  timeFromDate,
+  timeToDate,
+  type HourCycle,
+  type TimeValue,
+} from '../../utils/time';
+import { Button } from '../button';
+import { Calendar, type CalendarCaptionLayout, type CalendarDisabled } from '../calendar';
+import { Dialog } from '../dialog';
+import { Popover } from '../popover';
+import { TimePicker, type TimePickerLayout } from '../time-picker';
+
+/** What a closed picker shows when nothing has been chosen yet. */
+const DEFAULT_PLACEHOLDER = 'Pick a date and time';
+
+/**
+ * The width both halves are laid out at.
+ *
+ * Fixed rather than measured, and shared, because that is the whole reason they
+ * read as one panel: a month grid and a time scale each sized to their own
+ * content are two boxes of slightly different widths stacked on each other, and
+ * the seam is visible at any size.
+ */
+const PANEL_WIDTH = 308;
+
+/** How a `Date` is written on the closed trigger. */
+function describe(
+  value: Date,
+  system: 'gregory' | 'islamic',
+  hourCycle: HourCycle,
+  locale: string | undefined
+): string {
+  const day = calendarShortDate(value, system, locale);
+  const time = formatTime(timeFromDate(value), { hourCycle, locale });
+  return `${day} · ${time}`;
+}
+
+/** Where the panel is shown. `inline` renders it bare, for a Frame or a form. */
+export type DateTimePickerPresentation = 'popover' | 'bottom-sheet' | 'dialog' | 'inline';
+
+export interface DateTimePickerProps {
+  /** Controlled value. One `Date` carrying both halves. */
+  value?: Date;
+  /** Starting value when uncontrolled. */
+  defaultValue?: Date;
+  /**
+   * Fires on every change to either half, not on Done. Done closes the panel;
+   * it does not decide anything the caller has not already been told.
+   */
+  onValueChange?: (value: Date) => void;
+  /** Which face the time is picked on. `ruler` is the one that fits here. */
+  layout?: TimePickerLayout;
+  /** Anchored panel, a sheet, a dialog, or the panel with nothing around it. */
+  presentation?: DateTimePickerPresentation;
+  /** Controlled open state of the panel. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** `12` shows a meridiem, `24` does not. The value is 24-hour either way. */
+  hourCycle?: HourCycle;
+  /** Minutes between one selectable time and the next. */
+  minuteStep?: number;
+  /** Earliest selectable time of day, inclusive. */
+  minTime?: TimeValue;
+  /** Latest selectable time of day, inclusive. */
+  maxTime?: TimeValue;
+  /** What the trigger reads when nothing has been chosen. */
+  placeholder?: string;
+  /** Override how the chosen value is written on the trigger. */
+  format?: (value: Date) => string;
+  /** Stop the trigger opening it, and the panel from being used. */
+  disabled?: boolean;
+  /** Days that cannot be picked: a list, a span, or a rule. */
+  disabledDates?: CalendarDisabled;
+  /** Earliest selectable day. */
+  minDate?: Date;
+  /** Latest selectable day. */
+  maxDate?: Date;
+  /** `dropdown` swaps the month caption for month and year pickers. */
+  captionLayout?: CalendarCaptionLayout;
+  /** `0` is Sunday. */
+  weekStartsOn?: number;
+  /** BCP 47 tag for the month names, the time and the trigger's own text. */
+  locale?: string;
+  /** Which calendar the months and day numbers are counted in. */
+  calendar?: CalendarSystem;
+  /** Label on the button that closes the panel. */
+  doneLabel?: string;
+  /**
+   * What the time half of the panel is called, above its face. The date half
+   * names itself with the month it is showing; the time half has nothing that
+   * would say what it is otherwise.
+   */
+  timeLabel?: string;
+  className?: string;
+  /**
+   * A trigger of your own. Given one, it is cloned with an `onPress` that opens
+   * the panel — so a field row or an icon button can stand in for the default
+   * button without this component knowing what either looks like.
+   *
+   * Ignored by `presentation="inline"`, which has no trigger.
+   */
+  children?: ReactElement<{ onPress?: () => void }> | ReactNode;
+}
+
+function DateTimePickerRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  layout = 'ruler',
+  presentation = 'popover',
+  open: openProp,
+  onOpenChange,
+  hourCycle = 12,
+  minuteStep,
+  minTime,
+  maxTime,
+  placeholder = DEFAULT_PLACEHOLDER,
+  format,
+  disabled = false,
+  disabledDates,
+  minDate,
+  maxDate,
+  captionLayout = 'label',
+  weekStartsOn = 0,
+  locale,
+  calendar = 'gregory',
+  doneLabel = 'Done',
+  timeLabel = 'Time',
+  className,
+  children,
+}: DateTimePickerProps) {
+  // Resolved here as well as in the grid, because the trigger's text has to be
+  // written in the same calendar the cells were tapped in.
+  const system = useMemo(() => resolveCalendar(calendar, locale), [calendar, locale]);
+
+  const [internalValue, setInternalValue] = useState<Date | undefined>(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const isValueControlled = valueProp !== undefined;
+  const isOpenControlled = openProp !== undefined;
+  const value = isValueControlled ? valueProp : internalValue;
+  const open = isOpenControlled ? openProp : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+
+  const commit = useCallback(
+    (next: Date) => {
+      if (!isValueControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isValueControlled, onValueChange]
+  );
+
+  /*
+   * The time half, kept separately as well as inside the value.
+   *
+   * The value cannot hold it on its own: before a day is picked there is no
+   * `Date` to put a time in, and a time chosen first would be dropped on the
+   * way to the calendar. Held here, the two halves can be filled in either
+   * order and neither one loses the other.
+   */
+  const [draftTime, setDraftTime] = useState<TimeValue | undefined>(
+    defaultValue ? timeFromDate(defaultValue) : undefined
+  );
+  const time = value ? timeFromDate(value) : draftTime;
+
+  /** The time a day picked on its own is given: the top of the current hour. */
+  const fallbackTime = useMemo(
+    () =>
+      clampTime(
+        roundToStep({ hour: new Date().getHours(), minute: 0 }, minuteStep ?? 15),
+        minTime,
+        maxTime
+      ),
+    [minuteStep, minTime, maxTime]
+  );
+
+  const handleDay = useCallback(
+    (day: Date | undefined) => {
+      if (!day) return;
+      commit(timeToDate(time ?? fallbackTime, day));
+    },
+    [commit, time, fallbackTime]
+  );
+
+  const handleTime = useCallback(
+    (next: TimeValue) => {
+      setDraftTime(next);
+      // No day yet means today: a time is not a `Date` without one, and the day
+      // the reader is looking at is the only defensible guess.
+      commit(timeToDate(next, value ?? new Date()));
+    },
+    [commit, value]
+  );
+
+  const label = useMemo(() => {
+    if (!value) return null;
+    if (format) return format(value);
+    return describe(value, system, hourCycle, locale);
+  }, [format, value, system, hourCycle, locale]);
+
+  const panel = (
+    <View
+      style={{ width: PANEL_WIDTH, maxWidth: '100%' }}
+      className={cn('self-center', presentation === 'inline' ? className : undefined)}
+    >
+      {/*
+        Unbordered: the panel around it already draws one, and a card inside a
+        card is a seam. The calendar frames itself only when it is standing on
+        a page.
+      */}
+      <Calendar
+        bordered={false}
+        mode="single"
+        selected={value}
+        onSelect={handleDay}
+        disabled={disabledDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        startMonth={minDate}
+        endMonth={maxDate}
+        captionLayout={captionLayout}
+        weekStartsOn={weekStartsOn}
+        locale={locale}
+        calendar={calendar}
+      />
+      {/* A hairline, not a gap. The two halves are one answer, and space alone
+          between them reads as two controls that happen to be stacked — but
+          the same margin above and below it, so the rule sits between them
+          rather than clinging to the calendar. */}
+      <View className="mt-3 gap-3 border-t border-border pt-3">
+        {/*
+          The time half names itself and states its own value, because the
+          faces below it will not.
+
+          `readout="none"` takes the ruler's big centred number off the panel.
+          On its own that number is the answer and is sized like it; under a
+          month grid whose caption is 16pt and whose dates are 14pt, a 36pt
+          time is the largest thing on screen standing for the smaller half of
+          the value. Here it is a row instead: what it is on one edge, what it
+          currently says on the other, at a size that sits under the date
+          rather than over it.
+        */}
+        <View className="flex-row items-center justify-between gap-3">
+          <Text size="sm" muted>
+            {timeLabel}
+          </Text>
+          {/* Before either half is filled in there is still a time the panel
+              would commit — the same one a day picked on its own is given — so
+              the row states that rather than going blank. */}
+          <Text className="text-lg font-semibold tabular-nums text-foreground">
+            {formatTime(time ?? fallbackTime, { hourCycle, locale })}
+          </Text>
+        </View>
+        <TimePicker
+          presentation="inline"
+          layout={layout}
+          readout="none"
+          value={time}
+          onValueChange={handleTime}
+          hourCycle={hourCycle}
+          minuteStep={minuteStep}
+          minTime={minTime}
+          maxTime={maxTime}
+          locale={locale}
+          disabled={disabled}
+        />
+      </View>
+    </View>
+  );
+
+  if (presentation === 'inline') return panel;
+
+  const trigger = (
+    children ?? (
+      <Button
+        variant="outline"
+        disabled={disabled}
+        className={cn('justify-start gap-2', className)}
+      >
+        <CalendarIcon size={16} />
+        <Text className={label ? undefined : 'text-muted-foreground'}>
+          {label ?? placeholder}
+        </Text>
+      </Button>
+    )
+  ) as ReactElement<{ onPress?: () => void }>;
+
+  if (presentation === 'dialog') {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Trigger>{trigger}</Dialog.Trigger>
+        {/* Blurred rather than dimmed: a dialog is what you reach for when the
+            appointment *is* the decision on the screen. */}
+        <Dialog.Content blur className="items-center gap-0 p-4">
+          {panel}
+          <Dialog.Close>
+            <Button className="mt-3 w-full">{doneLabel}</Button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog>
+    );
+  }
+
+  const isSheet = presentation === 'bottom-sheet';
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      presentation={isSheet ? 'bottom-sheet' : 'popover'}
+    >
+      <Popover.Trigger>{trigger}</Popover.Trigger>
+      {/* The padding is on the inner view, not the panel: in sheet mode a
+          className on the panel is merged into the sheet's own padding and
+          would replace it. */}
+      <Popover.Content width={isSheet ? 'full' : 'content-fit'}>
+        <View className={isSheet ? 'w-full pb-2' : 'p-3'}>
+          {panel}
+          {/*
+            A Done button in the popover too, which `DatePicker` does not have.
+            There it is unnecessary — a single date finishes itself, and the
+            panel closes on the tap. Here the date is half the value, so
+            something has to say when both halves are settled, and tapping
+            outside is not that: it is how a popover is *abandoned*.
+          */}
+          <Popover.Close>
+            <Button
+              className="mt-3 w-full self-center"
+              style={isSheet ? undefined : { maxWidth: PANEL_WIDTH }}
+            >
+              {doneLabel}
+            </Button>
+          </Popover.Close>
+        </View>
+      </Popover.Content>
+    </Popover>
+  );
+}
+DateTimePickerRoot.displayName = 'DateTimePicker';
+
+export const DateTimePicker = Object.assign(DateTimePickerRoot, {
+  Trigger: Popover.Trigger,
+});