@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,279 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { format as formatDate } from 'date-fns';
+import React, {
+  type ComponentPropsWithoutRef,
+  type PropsWithChildren,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { useTranslation } from '../../primitives';
+import { translationKey } from '../../translations';
+import { type ThemedClassName } from '../../util';
+import { Calendar, type DateRange } from '../Calendar';
+import { Icon } from '../Icon';
+import { Popover } from '../Popover';
+
+//
+// Public API.
+//
+// Wraps the new react-aria-components-backed `<Calendar>` (single + range) in a Radix Popover,
+// preserving the previous slot-style namespace: `<DatePicker.Root>`, `<DatePicker.Trigger>`,
+// `<DatePicker.Content>`, `<DatePicker.Calendar>`. Multi-select is no longer supported (no
+// in-repo consumers); use `<Calendar.Root>` directly with custom state if needed.
+//
+
+export type DatePickerMode = 'single' | 'range';
+
+type ValueByMode = {
+  single: Date | undefined;
+  range: DateRange | undefined;
+};
+
+type DatePickerContextValue = {
+  mode: DatePickerMode;
+  value: ValueByMode[DatePickerMode];
+  setValue: (next: ValueByMode[DatePickerMode]) => void;
+  withTime: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+const [DatePickerProvider, useDatePickerContext] = createContext<DatePickerContextValue>('DatePicker');
+
+//
+// Root.
+//
+
+export type DatePickerRootProps<M extends DatePickerMode = 'single'> = {
+  mode?: M;
+  value?: ValueByMode[M];
+  defaultValue?: ValueByMode[M];
+  onValueChange?: (value: ValueByMode[M]) => void;
+  /** Preserve hour/minute on the selected date(s) when picking a new day. */
+  withTime?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+const DatePickerRoot = <M extends DatePickerMode = 'single'>({
+  mode = 'single' as M,
+  value,
+  defaultValue,
+  onValueChange,
+  withTime = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: DatePickerRootProps<M>) => {
+  const [internalValue, setInternalValue] = useState<ValueByMode[M] | undefined>(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+
+  const controlled = value !== undefined || onValueChange !== undefined;
+  const resolvedValue = (controlled ? value : internalValue) as ValueByMode[DatePickerMode];
+
+  const setValue = useCallback(
+    (next: ValueByMode[DatePickerMode]) => {
+      if (!controlled) {
+        setInternalValue(next as ValueByMode[M] | undefined);
+      }
+      onValueChange?.(next as ValueByMode[M]);
+    },
+    [controlled, onValueChange],
+  );
+
+  const resolvedOpen = open ?? internalOpen;
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (open === undefined) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange],
+  );
+
+  return (
+    <DatePickerProvider
+      mode={mode as DatePickerMode}
+      value={resolvedValue}
+      setValue={setValue}
+      withTime={withTime}
+      open={resolvedOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <Popover.Root open={resolvedOpen} onOpenChange={handleOpenChange}>
+        {children}
+      </Popover.Root>
+    </DatePickerProvider>
+  );
+};
+
+//
+// Trigger.
+//
+
+const formatValue = (mode: DatePickerMode, value: unknown, fmt: string): string | undefined => {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  switch (mode) {
+    case 'single':
+      return formatDate(value as Date, fmt);
+    case 'range': {
+      const r = value as DateRange;
+      if (!r.from) {
+        return undefined;
+      }
+      return r.to ? `${formatDate(r.from, fmt)} – ${formatDate(r.to, fmt)}` : formatDate(r.from, fmt);
+    }
+  }
+};
+
+export type DatePickerTriggerProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'button'>, 'children'>> &
+  PropsWithChildren<{
+    format?: string;
+    placeholder?: string;
+    /** Show the leading calendar icon in the default trigger. Defaults to true. */
+    icon?: boolean;
+  }>;
+
+const DatePickerTrigger = forwardRef<HTMLButtonElement, DatePickerTriggerProps>(
+  ({ classNames, format: fmt = 'PPP', placeholder, icon = true, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { t } = useTranslation(translationKey);
+    const { mode, value } = useDatePickerContext('DatePickerTrigger');
+
+    const placeholderText = placeholder ?? (t(`date-picker.placeholder.${mode}.label`) as string);
+    const label = formatValue(mode, value, fmt) ?? placeholderText;
+    const hasValue = label !== placeholderText;
+
+    return (
+      <Popover.Trigger asChild>
+        <button
+          ref={forwardedRef}
+          type='button'
+          {...props}
+          className={tx('datePicker.trigger', { hasValue }, classNames) ?? undefined}
+        >
+          {children ?? (
+            <>
+              {icon && <Icon size={4} icon='ph--calendar--regular' />}
+              {label}
+            </>
+          )}
+        </button>
+      </Popover.Trigger>
+    );
+  },
+);
+
+DatePickerTrigger.displayName = 'DatePickerTrigger';
+
+//
+// Content.
+//
+
+export type DatePickerContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof Popover.Content>>;
+
+const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Popover.Portal>
+        <Popover.Content ref={forwardedRef} align='start' sideOffset={4} {...props}>
+          <div className={tx('datePicker.content', {}, classNames)}>{children}</div>
+        </Popover.Content>
+      </Popover.Portal>
+    );
+  },
+);
+
+DatePickerContent.displayName = 'DatePickerContent';
+
+//
+// Calendar — single or range, time-of-day preservation, auto-dismiss on completion.
+//
+
+const carryTime = (oldDate: Date | undefined, newDate: Date | undefined): Date | undefined => {
+  if (!newDate) {
+    return newDate;
+  }
+  if (!oldDate) {
+    return newDate;
+  }
+  const out = new Date(newDate);
+  out.setHours(oldDate.getHours(), oldDate.getMinutes(), 0, 0);
+  return out;
+};
+
+const DatePickerCalendar = ({ classNames }: { classNames?: string } = {}) => {
+  const { mode, value, setValue, withTime, onOpenChange } = useDatePickerContext('DatePickerCalendar');
+
+  if (mode === 'single') {
+    const date = value as Date | undefined;
+    return (
+      <Calendar.Root
+        mode='single'
+        classNames={classNames}
+        selected={date}
+        onSelect={(next) => {
+          const merged = withTime ? carryTime(date, next) : next;
+          setValue(merged);
+          if (next !== undefined) {
+            onOpenChange(false);
+          }
+        }}
+      />
+    );
+  }
+
+  const range = value as DateRange | undefined;
+  return (
+    <Calendar.Root
+      mode='range'
+      classNames={classNames}
+      selected={range}
+      onSelect={(next) => {
+        if (!next) {
+          setValue(undefined);
+          return;
+        }
+        const merged: DateRange = withTime
+          ? { from: carryTime(range?.from, next.from)!, to: carryTime(range?.to, next.to) }
+          : next;
+        setValue(merged);
+        if (merged.from && merged.to) {
+          onOpenChange(false);
+        }
+      }}
+    />
+  );
+};
+
+DatePickerCalendar.displayName = 'DatePickerCalendar';
+
+//
+// Public namespace.
+//
+
+export const DatePicker = {
+  Root: DatePickerRoot,
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent,
+  Calendar: DatePickerCalendar,
+};
+
+export { useDatePickerContext };
+
+export type { ValueByMode };

package/src/components/DatePicker/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './DatePicker';

package/src/components/Dialog/AlertDialog.tsx

@@ -6,18 +6,17 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
 import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
-import { type DialogSize } from '@dxos/ui-theme';
-
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 import {
   Dialog,
   type DialogHeaderProps,
   type DialogBodyProps,
   type DialogActionBarProps,
-  type DialogCloseIconButtonProps,
+  type DialogActionIconButtonProps,
 } from './Dialog';
 
 //
@@ -38,7 +37,7 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
 
 type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
 
-const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogPrimitive.Trigger;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 //
 // Portal
@@ -46,7 +45,7 @@ const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDial
 
 type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
 
-const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPrimitive.Portal;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 //
 // Cancel
@@ -54,7 +53,7 @@ const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialog
 
 type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
 
-const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogPrimitive.Cancel;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
 
 //
 // Action
@@ -62,7 +61,7 @@ const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialog
 
 type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
 
-const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogPrimitive.Action;
+const AlertDialogAction = AlertDialogPrimitive.Action;
 
 //
 // Context
@@ -70,8 +69,8 @@ const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialog
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
-const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
-const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
+const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialog.Overlay';
+const ALERT_DIALOG_CONTENT_NAME = 'AlertDialog.Content';
 
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
@@ -121,9 +120,6 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
     <AlertDialogPrimitive.Content
       {...props}
       className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
-      // NOTE: Radix warning unless set to undefined.
-      // https://www.radix-ui.com/primitives/docs/components/dialog#description
-      aria-describedby={undefined}
       ref={forwardedRef}
     >
       <Column.Root classNames='dx-expander' gutter='sm'>
@@ -189,7 +185,7 @@ export const AlertDialog = {
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
   ActionBar: Dialog.ActionBar,
-  CloseIconButton: Dialog.CloseIconButton,
+  ActionIconButton: Dialog.ActionIconButton,
   // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
@@ -209,5 +205,5 @@ export type {
   DialogHeaderProps as AlertDialogHeaderProps,
   DialogBodyProps as AlertDialogBodyProps,
   DialogActionBarProps as AlertDialogActionBarProps,
-  DialogCloseIconButtonProps as AlertDialogCloseIconButtonProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -38,7 +38,7 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
             <Dialog.Title>{title}</Dialog.Title>
             {closeTrigger && (
               <Dialog.Close asChild>
-                <Dialog.CloseIconButton />
+                <Dialog.ActionIconButton action='close' />
               </Dialog.Close>
             )}
           </Dialog.Header>
@@ -77,7 +77,7 @@ const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, b
             <Dialog.Title>{title}</Dialog.Title>
             {closeTrigger && (
               <Dialog.Close asChild>
-                <Dialog.CloseIconButton />
+                <Dialog.ActionIconButton action='close' />
               </Dialog.Close>
             )}
           </Dialog.Header>

package/src/components/Dialog/Dialog.theme.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeMap: Record<DialogSize, string> = {
+  sm: 'md:max-w-[24rem]',
+  md: 'md:max-w-[32rem]!',
+  lg: 'md:max-w-[40rem]!',
+  xl: 'md:max-w-[60rem]!',
+};
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+  size?: DialogSize;
+};
+
+const overlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+const content: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
+  return mx(
+    '@container',
+    'dx-dialog__content dx-focus-ring dx-modal-surface py-4',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    sizeMap[size],
+    ...etc,
+  );
+};
+
+const header: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
+
+const body: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
+
+const actionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2', withColumn.center(), ...etc);
+
+const title: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay,
+  content,
+  header,
+  body,
+  actionbar: actionBar,
+  title,
+  description,
+};

package/src/components/Dialog/Dialog.tsx

@@ -14,14 +14,15 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
-import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName, composableProps, slottable } from '../../util';
 import { IconButton } from '../Button';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 
 //
 // Root
@@ -40,13 +41,15 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+DialogRoot.displayName = 'Dialog.Root';
+
 //
 // Trigger
 //
 
 type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger;
 
 //
 // Portal
@@ -54,13 +57,13 @@ const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Tri
 
 type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal;
 
 //
 // Overlay
 //
 
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
+const DIALOG_OVERLAY_NAME = 'Dialog.Overlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
@@ -96,7 +99,7 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 // Content
 //
 
-const DIALOG_CONTENT_NAME = 'DialogContent';
+const DIALOG_CONTENT_NAME = 'Dialog.Content';
 
 type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
@@ -151,20 +154,35 @@ const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props },
   );
 });
 
+DialogHeader.displayName = 'Dialog.Header';
+
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-type DialogCloseIconButtonProps = { label?: string };
+type DialogActionIconButtonAction = 'close' | 'delete';
+
+type DialogActionIconButtonProps = { action: DialogActionIconButtonAction; label?: string };
+
+const DIALOG_ACTION_ICONS: Record<DialogActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const DIALOG_ACTION_LABEL_KEYS: Record<DialogActionIconButtonAction, string> = {
+  // Preserves the legacy `close-dialog.label` translation key for backward compat.
+  close: 'close-dialog.label',
+  delete: 'toolbar-delete.label',
+};
 
-const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
-  ({ label, ...props }, forwardedRef) => {
+const DialogActionIconButton = forwardRef<HTMLButtonElement, DialogActionIconButtonProps>(
+  ({ action, label, ...props }, forwardedRef) => {
     const { t } = useTranslation(osTranslations);
     return (
       <IconButton
         {...props}
-        label={label ?? t('close-dialog.label')}
-        icon='ph--x--regular'
+        label={label ?? t(DIALOG_ACTION_LABEL_KEYS[action])}
+        icon={DIALOG_ACTION_ICONS[action]}
         iconOnly
         size={4}
         variant='ghost'
@@ -174,6 +192,8 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
   },
 );
 
+DialogActionIconButton.displayName = 'Dialog.ActionIconButton';
+
 //
 // Body
 //
@@ -191,6 +211,8 @@ const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, f
   );
 });
 
+DialogBody.displayName = 'Dialog.Body';
+
 //
 // Title
 //
@@ -206,6 +228,8 @@ const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   },
 );
 
+DialogTitle.displayName = 'Dialog.Title';
+
 //
 // Description
 //
@@ -225,6 +249,8 @@ const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProp
   },
 );
 
+DialogDescription.displayName = 'Dialog.Description';
+
 //
 // ActionBar
 //
@@ -242,13 +268,15 @@ const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props
   );
 });
 
+DialogActionBar.displayName = 'Dialog.ActionBar';
+
 //
 // Close
 //
 
 type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -266,7 +294,7 @@ export const Dialog = {
   Description: DialogDescription,
   ActionBar: DialogActionBar,
   Close: DialogClose,
-  CloseIconButton: DialogCloseIconButton,
+  ActionIconButton: DialogActionIconButton,
 };
 
 export type {
@@ -281,5 +309,6 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
-  DialogCloseIconButtonProps,
+  DialogActionIconButtonAction,
+  DialogActionIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -7,6 +7,10 @@ import { type FallbackProps } from 'react-error-boundary';
 
 import { safeStringify } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
+import { useTranslation } from '../../primitives';
+import { IconButton } from '../Button';
 import { ErrorStack } from './ErrorStack';
 
 export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
@@ -15,6 +19,7 @@ export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'>
  * Themed fallback component for `ErrorBoundary`.
  */
 export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const { t } = useTranslation(translationKey);
   const isDev = process.env.NODE_ENV === 'development';
   const message = error instanceof Error ? error.message : String(error);
 
@@ -55,14 +60,15 @@ const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: strin
   return (
     <div className='flex flex-col gap-1'>
       {onClick && (
-        <button
-          type='button'
-          onClick={onClick}
-          className='flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors'
-          title={`Copy ${title}`}
-        >
-          <h2 className='text-xs uppercase text-subdued'>{title}</h2>
-        </button>
+        <div>
+          <IconButton
+            classNames='text-xs uppercase'
+            label={title ?? 'Copy'}
+            icon='ph--clipboard-text--regular'
+            size={5}
+            onClick={onClick}
+          />
+        </div>
       )}
       {children}
     </div>