@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.66

package/src/chip/ChipRoot.tsx

@@ -0,0 +1,168 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ChipProvider } from './context';
+import type { IChipPressablePassthrough, IChipProps } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  alignSelf: 'flex-start' as const,
+};
+
+export interface ChipRootProps extends IChipProps {}
+
+export const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      disabled = false,
+      accessibilityRole,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      isDisabled: !isPressableRoot || disabled,
+    });
+    const isPressed = pressState.isPressed;
+    const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    const { hoverProps, isHovered } = useHover();
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+
+    const childDisabled =
+      asChildInteractive &&
+      !!(children as React.ReactElement<{ disabled?: boolean }>).props.disabled;
+    const resolvedDisabled = disabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [isPressableRoot, isHovered, isFocused, isPressed, resolvedDisabled, isFocusVisible],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyle, style],
+      };
+
+      // Only set onPress when we have a parent handler to compose. Slot merges this
+      // with the child's own onPress (child first, then ours). When there is no parent
+      // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Slot
+            ref={ref as React.Ref<View>}
+            {...(slotMergeProps as PressableProps)}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: false,
+                hover: false,
+                focus: false,
+                focusVisible: false,
+                disabled: resolvedDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Slot>
+        </ChipProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            accessibilityRole={accessibilityRole ?? 'button'}
+            {...(disabled && { accessibilityState: { disabled: true } })}
+            disabled={disabled}
+            style={[rowStyle, style]}
+            onPress={disabled ? undefined : onPress}
+            onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(onFocusProp, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(onBlurProp, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: isPressed,
+                hover: isHovered,
+                focus: isFocused,
+                focusVisible: isFocusVisible,
+                disabled,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ChipProvider>
+      );
+    }
+
+    return (
+      <ChipProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyle, style]}
+          {...mergeDataAttributes(
+            restProps,
+            disabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ChipProvider>
+    );
+  },
+);
+
+ChipRoot.displayName = 'ChipRoot';

package/src/chip/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+
+export const [ChipProvider, useChipContext] = createContext<InteractionState>('ChipContext');

package/src/chip/index.ts

@@ -1,18 +1,3 @@
-import type React from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
-import { createChipRoot } from './createChipRoot';
-import type { IChipComponentType } from './types';
-
-export type { IChipComponentType, IChipPressablePassthrough, IChipProps } from './types';
-
-export function createChip({
-  View,
-  Pressable,
-}: {
-  View: React.ComponentType<ViewProps>;
-  Pressable: React.ComponentType<PressableProps>;
-}) {
-  const Chip = createChipRoot(View, Pressable);
-  Chip.displayName = 'ChipPrimitive';
-  return Chip as IChipComponentType<ViewProps | PressableProps>;
-}
+export type { IChipPressablePassthrough, IChipProps, InterfaceChipProps } from './types';
+export { useChipContext } from './context';
+export { ChipRoot, type ChipRootProps } from './ChipRoot';

package/src/chip/types.ts

@@ -1,11 +1,10 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
 export type IChipPressablePassthrough = Partial<
   Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
 >;
 
-export interface IChipProps extends ViewProps, IChipPressablePassthrough {
+export interface InterfaceChipProps extends ViewProps, IChipPressablePassthrough {
   /**
    * When set (and `asChild` is not used with a valid element), root renders as pressable.
    */
@@ -13,11 +12,9 @@ export interface IChipProps extends ViewProps, IChipPressablePassthrough {
   /** Disables press handling when the root is pressable. */
   disabled?: boolean;
   /**
-   * Merge slot + interaction props onto a single child instead of rendering the default pressable root.
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
    */
   asChild?: boolean;
 }
 
-export type IChipComponentType<RootRef> = ForwardRefExoticComponent<
-  RefAttributes<RootRef> & IChipProps
->;
+export type IChipProps = InterfaceChipProps;

package/src/dialog/DialogClose.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useDialog } from './context';
+import type { IDialogCloseProps } from './types';
+
+export interface DialogCloseProps extends IDialogCloseProps {}
+
+export const DialogClose = forwardRef<ComponentRef<typeof Pressable>, DialogCloseProps>(
+  ({ asChild = false, children, onPress, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp ref={ref} {...(props as PressableProps)} onPress={handlePress}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogClose.displayName = 'DialogClose';

package/src/dialog/DialogPopup.tsx

@@ -0,0 +1,162 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogPopupProps } from './types';
+
+export interface DialogPopupProps extends IDialogPopupProps {
+  asChild?: boolean;
+  /**
+   * Class name applied to the internal dismiss-on-backdrop-press overlay
+   * Pressable. The styled layer passes its overlay variants string here so the
+   * primitive doesn't carry styling itself but still owns the overlay element
+   * (because the overlay's dismiss handler is wired by this primitive).
+   */
+  overlayClassName?: string;
+}
+
+export const DialogPopup = forwardRef<ComponentRef<typeof View>, DialogPopupProps>(
+  (
+    {
+      asChild,
+      children,
+      forceMount = false,
+      avoidKeyboard = true,
+      keyboardVerticalOffset = 0,
+      overlayClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, closeOnBackdropPress, closeOnEscKey, nativeID, role } = useDialog();
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose);
+
+    if (!(open || forceMount)) {
+      return null;
+    }
+
+    const overlayProps = {
+      ...(closeOnBackdropPress ? { onPress: handleClose } : {}),
+      accessible: false,
+      importantForAccessibility: 'no-hide-descendants' as const,
+      className: overlayClassName,
+      ...dataAttributes({ slot: 'dialog-overlay' }),
+    };
+
+    const ariaProps = {
+      role,
+      'aria-modal': true,
+      'aria-labelledby': `${nativeID}-title`,
+      'aria-describedby': `${nativeID}-description`,
+    };
+
+    const popupAttrs = mergeDataAttributes(
+      props,
+      dataAttributes({ state: open ? 'open' : 'closed' }),
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    if (Platform.OS === 'web' && createPortalFn) {
+      return createPortalFn(
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View
+            style={{
+              position: 'fixed' as any,
+              inset: 0 as any,
+              zIndex: 50,
+              display: 'flex' as any,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Pressable {...overlayProps} />
+            <Comp ref={ref} {...(props as ViewProps)} {...ariaProps} {...popupAttrs}>
+              {children}
+            </Comp>
+          </View>
+        </FocusScope>,
+        document.body,
+      );
+    }
+
+    // Native layout uses two layers to support both backdrop dismiss and
+    // scrollable body content. The overlay Pressable fills the Modal via
+    // absolute positioning and handles backdrop taps. A second flex layer with
+    // pointerEvents="box-none" centers the content panel — "box-none" lets taps
+    // outside the panel pass through to the overlay while allowing the panel and
+    // its children to receive touches normally.
+    //
+    // That centering layer is a KeyboardAvoidingView so the panel (including its
+    // footer/actions, which sit at the bottom of a centered, max-h-capped panel)
+    // shifts up to clear the on-screen keyboard. `behavior` is platform-specific
+    // and the layer is a no-op while no input is focused. The RN Modal renders in
+    // its own window, so this MUST live here — a KeyboardAvoidingView wrapping the
+    // <Dialog> at the usage level cannot reach this subtree. Web is unaffected
+    // (the browser handles focus scrolling; there is no occluding keyboard).
+    //
+    // Critically, the content panel must NOT claim the JS touch responder
+    // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
+    // blockNativeResponder, which suppresses the native UIScrollView /
+    // ScrollView pan gesture recognizer and breaks any ScrollView inside
+    // Dialog.Content.
+    //
+    // Static StyleSheet used here because these are structural layout concerns
+    // of the primitive's modal chrome — not themeable styles. They must remain
+    // stable regardless of the styled layer's className.
+    const keyboardBehavior = avoidKeyboard
+      ? Platform.select<'padding' | 'height'>({ ios: 'padding', default: 'height' })
+      : undefined;
+
+    return (
+      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View style={styles.fill}>
+            <Pressable {...overlayProps} />
+            <KeyboardAvoidingView
+              style={styles.center}
+              pointerEvents="box-none"
+              behavior={keyboardBehavior}
+              keyboardVerticalOffset={keyboardVerticalOffset}
+            >
+              <Comp ref={ref} {...(props as ViewProps)} {...ariaProps} {...popupAttrs}>
+                {children}
+              </Comp>
+            </KeyboardAvoidingView>
+          </View>
+        </FocusScope>
+      </Modal>
+    );
+  },
+);
+
+DialogPopup.displayName = 'DialogPopup';
+
+// Structural layout for the native Modal chrome. These are not themeable —
+// they position the overlay and centering layers that the primitive manages
+// internally. Matches the pattern in OverlayContainer.tsx.
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/dialog/DialogRoot.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, useCallback, useId, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { DialogProvider } from './context';
+import type { IDialogRootProps } from './types';
+
+export interface DialogRootProps extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps {
+  asChild?: boolean;
+}
+
+export const DialogRoot = forwardRef<ComponentRef<typeof View>, DialogRootProps>(
+  (
+    {
+      open: openProp,
+      onOpenChange,
+      defaultOpen = false,
+      closeOnBackdropPress = true,
+      closeOnEscKey = true,
+      role = 'dialog',
+      asChild,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const setOpen = useCallback(
+      (newOpen: boolean) => {
+        setOpenState(newOpen);
+      },
+      [setOpenState],
+    );
+
+    const id = useId();
+    const nativeID = `dialog-${id}`;
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        onOpenChange: setOpen,
+        closeOnBackdropPress,
+        closeOnEscKey,
+        nativeID,
+        role,
+      }),
+      [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <DialogProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          {...mergeDataAttributes(props, dataAttributes({ state: open ? 'open' : 'closed' }))}
+        >
+          {children}
+        </Comp>
+      </DialogProvider>
+    );
+  },
+);
+
+DialogRoot.displayName = 'DialogRoot';

package/src/dialog/DialogTrigger.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useDialog } from './context';
+import type { IDialogTriggerProps } from './types';
+
+export interface DialogTriggerProps extends IDialogTriggerProps {}
+
+export const DialogTrigger = forwardRef<ComponentRef<typeof Pressable>, DialogTriggerProps>(
+  ({ asChild = false, children, onPress, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(true));
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp ref={ref} {...(props as PressableProps)} onPress={handlePress}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogTrigger.displayName = 'DialogTrigger';

package/src/dialog/index.tsx

@@ -1,93 +1,12 @@
-import type React from 'react';
-import { createDialogRoot } from './createDialogRoot';
-import { createDialogTrigger } from './createDialogTrigger';
-import { createDialogPopup } from './createDialogPopup';
-import { createDialogHeader } from './createDialogHeader';
-import { createDialogTitle } from './createDialogTitle';
-import { createDialogDescription } from './createDialogDescription';
-import { createDialogContent } from './createDialogContent';
-import { createDialogFooter } from './createDialogFooter';
-import { createDialogClose } from './createDialogClose';
-import { DialogProvider, useDialog } from './context';
-import type { IDialogComponentType } from './types';
-
-export { DialogProvider, useDialog };
+export { DialogProvider, useDialog } from './context';
+export { DialogRoot, type DialogRootProps } from './DialogRoot';
+export { DialogTrigger, type DialogTriggerProps } from './DialogTrigger';
+export { DialogPopup, type DialogPopupProps } from './DialogPopup';
+export { DialogClose, type DialogCloseProps } from './DialogClose';
 export type {
   IDialogContextType,
   IDialogRootProps,
   IDialogTriggerProps,
   IDialogPopupProps,
-  IDialogOverlayProps,
-  IDialogHeaderProps,
-  IDialogTitleProps,
-  IDialogDescriptionProps,
-  IDialogContentProps,
-  IDialogFooterProps,
   IDialogCloseProps,
 } from './types';
-
-export function createDialog<
-  RootProps,
-  TriggerProps,
-  PopupProps,
-  OverlayProps,
-  HeaderProps,
-  TitleProps,
-  DescriptionProps,
-  ContentProps,
-  FooterProps,
-  CloseProps,
->(BaseComponents: {
-  Root: React.ComponentType<RootProps>;
-  Trigger: React.ComponentType<TriggerProps>;
-  Popup: React.ComponentType<PopupProps>;
-  Overlay: React.ComponentType<OverlayProps>;
-  Header: React.ComponentType<HeaderProps>;
-  Title: React.ComponentType<TitleProps>;
-  Description: React.ComponentType<DescriptionProps>;
-  Content: React.ComponentType<ContentProps>;
-  Footer: React.ComponentType<FooterProps>;
-  Close: React.ComponentType<CloseProps>;
-}) {
-  const Root = createDialogRoot(BaseComponents.Root);
-  const Trigger = createDialogTrigger(BaseComponents.Trigger);
-  const Popup = createDialogPopup(BaseComponents.Popup, BaseComponents.Overlay);
-  const Header = createDialogHeader(BaseComponents.Header);
-  const Title = createDialogTitle(BaseComponents.Title);
-  const Description = createDialogDescription(BaseComponents.Description);
-  const Content = createDialogContent(BaseComponents.Content);
-  const Footer = createDialogFooter(BaseComponents.Footer);
-  const Close = createDialogClose(BaseComponents.Close);
-
-  Root.displayName = 'DialogPrimitive.Root';
-  Trigger.displayName = 'DialogPrimitive.Trigger';
-  Popup.displayName = 'DialogPrimitive.Popup';
-  Header.displayName = 'DialogPrimitive.Header';
-  Title.displayName = 'DialogPrimitive.Title';
-  Description.displayName = 'DialogPrimitive.Description';
-  Content.displayName = 'DialogPrimitive.Content';
-  Footer.displayName = 'DialogPrimitive.Footer';
-  Close.displayName = 'DialogPrimitive.Close';
-
-  return Object.assign(Root, {
-    Root,
-    Trigger,
-    Popup,
-    Header,
-    Title,
-    Description,
-    Content,
-    Footer,
-    Close,
-  }) as IDialogComponentType<
-    RootProps,
-    TriggerProps,
-    PopupProps,
-    HeaderProps,
-    TitleProps,
-    DescriptionProps,
-    ContentProps,
-    FooterProps,
-    CloseProps
-  >;
-}

package/src/dialog/types.ts

@@ -1,5 +1,5 @@
-import type { PropsWithoutRef, RefAttributes } from 'react';
-import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type React from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 export interface IDialogContextType {
   readonly open: boolean;
@@ -39,61 +39,7 @@ export interface IDialogPopupProps extends ViewProps {
   readonly keyboardVerticalOffset?: number;
 }
 
-export interface IDialogOverlayProps extends PressableProps {}
-
-export interface IDialogHeaderProps extends ViewProps {}
-
-export interface IDialogTitleProps extends TextProps {}
-
-export interface IDialogDescriptionProps extends TextProps {}
-
-export interface IDialogContentProps extends ViewProps {}
-
-export interface IDialogFooterProps extends ViewProps {}
-
 export interface IDialogCloseProps extends PressableProps {
   readonly asChild?: boolean;
   readonly accessibilityLabel?: string;
 }
-
-export type IDialogComponentType<
-  RootProps,
-  TriggerProps,
-  PopupProps,
-  HeaderProps,
-  TitleProps,
-  DescriptionProps,
-  ContentProps,
-  FooterProps,
-  CloseProps,
-  PopupRef = unknown,
-  TriggerRef = unknown,
-  CloseRef = unknown,
-> = React.ForwardRefExoticComponent<
-  PropsWithoutRef<RootProps & IDialogRootProps> & RefAttributes<unknown>
-> & {
-  Trigger: React.ForwardRefExoticComponent<
-    PropsWithoutRef<TriggerProps & IDialogTriggerProps> & RefAttributes<TriggerRef>
-  >;
-  Popup: React.ForwardRefExoticComponent<
-    PropsWithoutRef<PopupProps & IDialogPopupProps> & RefAttributes<PopupRef>
-  >;
-  Header: React.ForwardRefExoticComponent<
-    PropsWithoutRef<HeaderProps & IDialogHeaderProps> & RefAttributes<unknown>
-  >;
-  Title: React.ForwardRefExoticComponent<
-    PropsWithoutRef<TitleProps & IDialogTitleProps> & RefAttributes<unknown>
-  >;
-  Description: React.ForwardRefExoticComponent<
-    PropsWithoutRef<DescriptionProps & IDialogDescriptionProps> & RefAttributes<unknown>
-  >;
-  Content: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<unknown>
-  >;
-  Footer: React.ForwardRefExoticComponent<
-    PropsWithoutRef<FooterProps & IDialogFooterProps> & RefAttributes<unknown>
-  >;
-  Close: React.ForwardRefExoticComponent<
-    PropsWithoutRef<CloseProps & IDialogCloseProps> & RefAttributes<CloseRef>
-  >;
-};