Latest repo

node_modules/@radix-ui/react-alert-dialog/src/AlertDialog.stories.tsx

@@ -0,0 +1,353 @@
+import * as React from 'react';
+import { css } from '../../../../stitches.config';
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+
+export default { title: 'Components/AlertDialog' };
+
+export const Styled = () => (
+  <AlertDialog.Root>
+    <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+    <AlertDialog.Portal>
+      <AlertDialog.Overlay className={overlayClass()} />
+      <AlertDialog.Content className={contentClass()}>
+        <AlertDialog.Title className={titleClass()}>Are you sure?</AlertDialog.Title>
+        <AlertDialog.Description className={descriptionClass()}>
+          This will do a very dangerous thing. Thar be dragons!
+        </AlertDialog.Description>
+        <AlertDialog.Action className={actionClass()}>yolo, do it</AlertDialog.Action>
+        <AlertDialog.Cancel className={cancelClass()}>maybe not</AlertDialog.Cancel>
+      </AlertDialog.Content>
+    </AlertDialog.Portal>
+  </AlertDialog.Root>
+);
+
+export const Controlled = () => {
+  const [open, setOpen] = React.useState(false);
+  const [housePurchased, setHousePurchased] = React.useState(false);
+
+  return (
+    <div>
+      <div>
+        <img src="https://i.ibb.co/K54hsKt/house.jpg" alt="a large white house with a red roof" />
+      </div>
+      <AlertDialog.Root open={open} onOpenChange={setOpen}>
+        <AlertDialog.Trigger
+          onClick={(e) => {
+            if (housePurchased) {
+              e.preventDefault();
+              setHousePurchased(false);
+            }
+          }}
+        >
+          {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
+        </AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={contentClass()}>
+            <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              Houses are very expensive and it looks like you only have €20 in the bank. Maybe
+              consult with a financial advisor?
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()} onClick={() => setHousePurchased(true)}>
+              buy it anyway
+            </AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>
+              good point, I'll reconsider
+            </AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+  );
+};
+
+export const Chromatic = () => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 1fr)',
+      gridTemplateRows: 'repeat(2, 1fr)',
+      height: '100vh',
+    }}
+  >
+    <div>
+      <h1>Uncontrolled</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: 0, bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '12%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Uncontrolled with reordered parts</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '25%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '37%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Controlled</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root open={false}>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root open>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '50%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '62%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>Controlled with reordered parts</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root open={false}>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayClass()} />
+          <AlertDialog.Content className={chromaticContentClass()}>
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root open>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay
+            className={overlayClass()}
+            style={{ left: '75%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialog.Content
+            className={chromaticContentClass()}
+            style={{ top: '25%', left: '88%' }}
+          >
+            <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+        <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
+      </AlertDialog.Root>
+    </div>
+
+    <div>
+      <h1>State attributes</h1>
+      <h2>Closed</h2>
+      <AlertDialog.Root>
+        <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayAttrClass()} />
+          <AlertDialog.Content className={contentAttrClass()}>
+            <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionAttrClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+
+      <h2>Open</h2>
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay className={overlayAttrClass()} style={{ top: '50%' }} />
+          <AlertDialog.Content className={contentAttrClass()} style={{ top: '75%' }}>
+            <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
+            <AlertDialog.Description className={descriptionAttrClass()}>
+              Description
+            </AlertDialog.Description>
+            <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
+            <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </div>
+  </div>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+const triggerClass = css({});
+
+const RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY: any = {
+  // ensures overlay is positionned correctly
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const overlayClass = css({
+  ...RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY,
+  backgroundColor: 'black',
+  opacity: 0.2,
+});
+
+const RECOMMENDED_CSS__ALERT_DIALOG__CONTENT: any = {
+  // ensures good default position for content
+  position: 'fixed',
+  top: 0,
+  left: 0,
+};
+
+const contentClass = css({
+  ...RECOMMENDED_CSS__ALERT_DIALOG__CONTENT,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  background: 'white',
+  minWidth: 300,
+  minHeight: 150,
+  padding: 50,
+  borderRadius: 10,
+  backgroundColor: 'white',
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',
+});
+
+const cancelClass = css({
+  appearance: 'none',
+  padding: 10,
+  border: 'none',
+  background: '$grey100',
+});
+
+const actionClass = css({
+  appearance: 'none',
+  padding: 10,
+  border: 'none',
+  backgroundColor: '$red',
+  color: '$white',
+});
+
+const titleClass = css({});
+
+const descriptionClass = css({});
+
+const chromaticContentClass = css(contentClass, {
+  padding: 10,
+  minWidth: 'auto',
+  minHeight: 'auto',
+});
+
+const styles = {
+  backgroundColor: 'rgba(0, 0, 255, 0.3)',
+  border: '2px solid blue',
+  padding: 10,
+
+  '&[data-state="closed"]': { borderColor: 'red' },
+  '&[data-state="open"]': { borderColor: 'green' },
+};
+const triggerAttrClass = css(styles);
+const overlayAttrClass = css(overlayClass, styles);
+const contentAttrClass = css(chromaticContentClass, styles);
+const cancelAttrClass = css(styles);
+const actionAttrClass = css(styles);
+const titleAttrClass = css(styles);
+const descriptionAttrClass = css(styles);

node_modules/@radix-ui/react-alert-dialog/src/AlertDialog.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { axe } from 'jest-axe';
+import { RenderResult } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+
+const OPEN_TEXT = 'Open';
+const CANCEL_TEXT = 'Cancel';
+const ACTION_TEXT = 'Do it';
+const TITLE_TEXT = 'Warning';
+const DESC_TEXT = 'This is a warning';
+const OVERLAY_TEST_ID = 'test-overlay';
+
+const DialogTest = (props: React.ComponentProps<typeof AlertDialog.Root>) => (
+  <AlertDialog.Root {...props}>
+    <AlertDialog.Trigger>{OPEN_TEXT}</AlertDialog.Trigger>
+    <AlertDialog.Overlay data-testid={OVERLAY_TEST_ID} />
+    <AlertDialog.Content>
+      <AlertDialog.Title>{TITLE_TEXT}</AlertDialog.Title>
+      <AlertDialog.Description>{DESC_TEXT}</AlertDialog.Description>
+      <AlertDialog.Cancel>{CANCEL_TEXT}</AlertDialog.Cancel>
+      <AlertDialog.Action>{ACTION_TEXT}</AlertDialog.Action>
+    </AlertDialog.Content>
+  </AlertDialog.Root>
+);
+
+describe('given a default Dialog', () => {
+  let rendered: RenderResult;
+  let title: HTMLElement;
+  let trigger: HTMLElement;
+  let cancelButton: HTMLElement;
+
+  beforeEach(() => {
+    rendered = render(<DialogTest />);
+    trigger = rendered.getByText(OPEN_TEXT);
+  });
+
+  it('should have no accessibility violations in default state', async () => {
+    expect(await axe(rendered.container)).toHaveNoViolations();
+  });
+
+  describe('after clicking the trigger', () => {
+    beforeEach(() => {
+      fireEvent.click(trigger);
+      title = rendered.getByText(TITLE_TEXT);
+      cancelButton = rendered.getByText(CANCEL_TEXT);
+    });
+
+    it('should open the content', () => {
+      expect(title).toBeVisible();
+    });
+
+    it('should have no accessibility violations when open', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should focus the cancel button', () => {
+      expect(cancelButton).toHaveFocus();
+    });
+  });
+});

node_modules/@radix-ui/react-alert-dialog/src/AlertDialog.tsx

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { createContextScope } from '@radix-ui/react-context';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createDialogScope } from '@radix-ui/react-dialog';
+import { composeEventHandlers } from '@radix-ui/primitive';
+import { Slottable } from '@radix-ui/react-slot';
+
+import type { Scope } from '@radix-ui/react-context';
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const ROOT_NAME = 'AlertDialog';
+
+type ScopedProps<P> = P & { __scopeAlertDialog?: Scope };
+const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
+  createDialogScope,
+]);
+const useDialogScope = createDialogScope();
+
+type DialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+interface AlertDialogProps extends Omit<DialogProps, 'modal'> {}
+
+const AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {
+  const { __scopeAlertDialog, ...alertDialogProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;
+};
+
+AlertDialog.displayName = ROOT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogTrigger
+ * -----------------------------------------------------------------------------------------------*/
+const TRIGGER_NAME = 'AlertDialogTrigger';
+
+type AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
+type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+interface AlertDialogTriggerProps extends DialogTriggerProps {}
+
+const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
+  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...triggerProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;
+  }
+);
+
+AlertDialogTrigger.displayName = TRIGGER_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogPortal
+ * -----------------------------------------------------------------------------------------------*/
+
+const PORTAL_NAME = 'AlertDialogPortal';
+
+type DialogPortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
+interface AlertDialogPortalProps extends DialogPortalProps {}
+
+const AlertDialogPortal: React.FC<AlertDialogPortalProps> = (
+  props: ScopedProps<AlertDialogPortalProps>
+) => {
+  const { __scopeAlertDialog, ...portalProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;
+};
+
+AlertDialogPortal.displayName = PORTAL_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogOverlay
+ * -----------------------------------------------------------------------------------------------*/
+
+const OVERLAY_NAME = 'AlertDialogOverlay';
+
+type AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;
+type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+interface AlertDialogOverlayProps extends DialogOverlayProps {}
+
+const AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(
+  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...overlayProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;
+  }
+);
+
+AlertDialogOverlay.displayName = OVERLAY_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogContent
+ * -----------------------------------------------------------------------------------------------*/
+
+const CONTENT_NAME = 'AlertDialogContent';
+
+type AlertDialogContentContextValue = {
+  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;
+};
+
+const [AlertDialogContentProvider, useAlertDialogContentContext] =
+  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);
+
+type AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+interface AlertDialogContentProps
+  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}
+
+const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
+  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {
+    const { __scopeAlertDialog, children, ...contentProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    const contentRef = React.useRef<AlertDialogContentElement>(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);
+
+    return (
+      <DialogPrimitive.WarningProvider
+        contentName={CONTENT_NAME}
+        titleName={TITLE_NAME}
+        docsSlug="alert-dialog"
+      >
+        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>
+          <DialogPrimitive.Content
+            role="alertdialog"
+            {...dialogScope}
+            {...contentProps}
+            ref={composedRefs}
+            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
+              event.preventDefault();
+              cancelRef.current?.focus({ preventScroll: true });
+            })}
+            onPointerDownOutside={(event) => event.preventDefault()}
+            onInteractOutside={(event) => event.preventDefault()}
+          >
+            {/**
+             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`
+             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.
+             * This is because we want the accessibility checks to run only once the content is actually
+             * open and that behaviour is already encapsulated in `DialogContent`.
+             */}
+            <Slottable>{children}</Slottable>
+            {process.env.NODE_ENV === 'development' && (
+              <DescriptionWarning contentRef={contentRef} />
+            )}
+          </DialogPrimitive.Content>
+        </AlertDialogContentProvider>
+      </DialogPrimitive.WarningProvider>
+    );
+  }
+);
+
+AlertDialogContent.displayName = CONTENT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogTitle
+ * -----------------------------------------------------------------------------------------------*/
+
+const TITLE_NAME = 'AlertDialogTitle';
+
+type AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
+type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+interface AlertDialogTitleProps extends DialogTitleProps {}
+
+const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
+  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...titleProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;
+  }
+);
+
+AlertDialogTitle.displayName = TITLE_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogDescription
+ * -----------------------------------------------------------------------------------------------*/
+
+const DESCRIPTION_NAME = 'AlertDialogDescription';
+
+type AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
+type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
+
+const AlertDialogDescription = React.forwardRef<
+  AlertDialogDescriptionElement,
+  AlertDialogDescriptionProps
+>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {
+  const { __scopeAlertDialog, ...descriptionProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;
+});
+
+AlertDialogDescription.displayName = DESCRIPTION_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogAction
+ * -----------------------------------------------------------------------------------------------*/
+
+const ACTION_NAME = 'AlertDialogAction';
+
+type AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;
+type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+interface AlertDialogActionProps extends DialogCloseProps {}
+
+const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
+  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...actionProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;
+  }
+);
+
+AlertDialogAction.displayName = ACTION_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogCancel
+ * -----------------------------------------------------------------------------------------------*/
+
+const CANCEL_NAME = 'AlertDialogCancel';
+
+type AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;
+interface AlertDialogCancelProps extends DialogCloseProps {}
+
+const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
+  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...cancelProps } = props;
+    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    const ref = useComposedRefs(forwardedRef, cancelRef);
+    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;
+  }
+);
+
+AlertDialogCancel.displayName = CANCEL_NAME;
+
+/* ---------------------------------------------------------------------------------------------- */
+
+type DescriptionWarningProps = {
+  contentRef: React.RefObject<AlertDialogContentElement>;
+};
+
+const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {
+  const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
+
+You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
+
+Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
+
+  React.useEffect(() => {
+    const hasDescription = document.getElementById(
+      contentRef.current?.getAttribute('aria-describedby')!
+    );
+    if (!hasDescription) console.warn(MESSAGE);
+  }, [MESSAGE, contentRef]);
+
+  return null;
+};
+
+const Root = AlertDialog;
+const Trigger = AlertDialogTrigger;
+const Portal = AlertDialogPortal;
+const Overlay = AlertDialogOverlay;
+const Content = AlertDialogContent;
+const Action = AlertDialogAction;
+const Cancel = AlertDialogCancel;
+const Title = AlertDialogTitle;
+const Description = AlertDialogDescription;
+
+export {
+  createAlertDialogScope,
+  //
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  //
+  Root,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Action,
+  Cancel,
+  Title,
+  Description,
+};
+export type {
+  AlertDialogProps,
+  AlertDialogTriggerProps,
+  AlertDialogPortalProps,
+  AlertDialogOverlayProps,
+  AlertDialogContentProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+};

node_modules/@radix-ui/react-alert-dialog/src/index.ts

@@ -0,0 +1,35 @@
+'use client';
+export {
+  createAlertDialogScope,
+  //
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  //
+  Root,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Action,
+  Cancel,
+  Title,
+  Description,
+} from './AlertDialog';
+export type {
+  AlertDialogProps,
+  AlertDialogTriggerProps,
+  AlertDialogPortalProps,
+  AlertDialogOverlayProps,
+  AlertDialogContentProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+} from './AlertDialog';