feat: add component dialog

Author: Ohh-889

packages/ui/package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-menu": "^2.1.15",

packages/ui/src/components/dialog/Dialog.tsx

@@ -0,0 +1,98 @@
+import type { Content } from '@radix-ui/react-dialog';
+import { Portal, Root, Trigger } from '@radix-ui/react-dialog';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import DialogClose from './DialogClose';
+import DialogContent from './DialogContent';
+import DialogDescription from './DialogDescription';
+import DialogFooter from './DialogFooter';
+import DialogHeader from './DialogHeader';
+import DialogOverlay from './DialogOverlay';
+import DialogTitle from './DialogTitle';
+import type { DialogProps } from './types';
+
+const Dialog = forwardRef<ComponentRef<typeof Content>, DialogProps>((props, ref) => {
+  const {
+    children,
+    className,
+    classNames,
+    defaultOpen,
+    description,
+    footer,
+    onOpenChange,
+    open,
+    size,
+    title,
+    trigger,
+    ...rest
+  } = props;
+
+  return (
+    <Root
+      data-slot="dialog-root"
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <Trigger
+        asChild
+        data-slot="dialog-trigger"
+      >
+        {trigger}
+      </Trigger>
+
+      <Portal data-slot="dialog-portal">
+        <DialogOverlay className={classNames?.overlay} />
+
+        <DialogContent
+          {...rest}
+          className={className || classNames?.content}
+          ref={ref}
+          size={size}
+        >
+          <DialogHeader
+            className={classNames?.header}
+            size={size}
+          >
+            <DialogTitle
+              className={classNames?.title}
+              size={size}
+            >
+              {title}
+            </DialogTitle>
+
+            {description && (
+              <DialogDescription
+                className={classNames?.description}
+                size={size}
+              >
+                {description}
+              </DialogDescription>
+            )}
+          </DialogHeader>
+
+          <DialogClose
+            className={classNames?.close}
+            size={size}
+          />
+
+          {children}
+
+          {footer && (
+            <DialogFooter
+              className={classNames?.footer}
+              size={size}
+            >
+              {footer}
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Portal>
+    </Root>
+  );
+});
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;

packages/ui/src/components/dialog/DialogClose.tsx

@@ -0,0 +1,38 @@
+import { Close as _Close } from '@radix-ui/react-dialog';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { ButtonIcon } from '../button';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogCloseProps } from './types';
+
+const DialogClose = forwardRef<ComponentRef<typeof _Close>, DialogCloseProps>((props, ref) => {
+  const { children, className, component: Close = _Close, size, ...rest } = props;
+
+  const { close } = dialogVariants({ size });
+
+  const mergedClass = cn(close(), className);
+  return (
+    <Close
+      {...rest}
+      asChild
+      className={children ? (className as string) : mergedClass}
+      data-slot="dialog-close"
+      ref={ref}
+    >
+      {children || (
+        <ButtonIcon
+          icon="lucide:x"
+          size={size}
+        />
+      )}
+    </Close>
+  );
+});
+
+DialogClose.displayName = 'DialogClose';
+
+export default DialogClose;

packages/ui/src/components/dialog/DialogContent.tsx

@@ -0,0 +1,28 @@
+import { Content as _Content } from '@radix-ui/react-dialog';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogContentProps } from './types';
+
+const DialogContent = forwardRef<ComponentRef<typeof _Content>, DialogContentProps>((props, ref) => {
+  const { className, component: Content = _Content, size, ...rest } = props;
+
+  const { content } = dialogVariants({ size });
+
+  const mergedClass = cn(content(), className);
+  return (
+    <Content
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-content"
+      ref={ref}
+    />
+  );
+});
+
+DialogContent.displayName = 'DialogContent';
+
+export default DialogContent;

packages/ui/src/components/dialog/DialogDescription.tsx

@@ -0,0 +1,28 @@
+import { Description as _Description } from '@radix-ui/react-dialog';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogDescriptionProps } from './types';
+
+const DialogDescription = forwardRef<ComponentRef<typeof _Description>, DialogDescriptionProps>((props, ref) => {
+  const { className, component: Description = _Description, size, ...rest } = props;
+
+  const { description } = dialogVariants({ size });
+
+  const mergedClass = cn(description(), className);
+  return (
+    <Description
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-description"
+      ref={ref}
+    />
+  );
+});
+
+DialogDescription.displayName = 'DialogDescription';
+
+export default DialogDescription;

packages/ui/src/components/dialog/DialogFooter.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogFooterProps } from './types';
+
+const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { footer } = dialogVariants({ size });
+
+  const mergedClass = cn(footer(), className);
+  return (
+    <footer
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-footer"
+      ref={ref}
+    />
+  );
+});
+
+DialogFooter.displayName = 'DialogFooter';
+
+export default DialogFooter;

packages/ui/src/components/dialog/DialogHeader.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogHeaderProps } from './types';
+
+const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { header } = dialogVariants({ size });
+
+  const mergedClass = cn(header(), className);
+  return (
+    <header
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-header"
+      ref={ref}
+    />
+  );
+});
+
+DialogHeader.displayName = 'DialogHeader';
+
+export default DialogHeader;

packages/ui/src/components/dialog/DialogOverlay.tsx

@@ -0,0 +1,27 @@
+import { Overlay as _Overlay } from '@radix-ui/react-dialog';
+import { type ComponentRef, forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogOverlayProps } from './types';
+
+const DialogOverlay = forwardRef<ComponentRef<typeof _Overlay>, DialogOverlayProps>((props, ref) => {
+  const { className, component: Overlay = _Overlay, size, ...rest } = props;
+
+  const { overlay } = dialogVariants({ size });
+
+  const mergedClass = cn(overlay(), className);
+  return (
+    <Overlay
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-overlay"
+      ref={ref}
+    />
+  );
+});
+
+DialogOverlay.displayName = 'DialogOverlay';
+
+export default DialogOverlay;

packages/ui/src/components/dialog/DialogTitle.tsx

@@ -0,0 +1,27 @@
+import { Title as _Title } from '@radix-ui/react-dialog';
+import { type ComponentRef, forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { dialogVariants } from './dialog-variants';
+import type { DialogTitleProps } from './types';
+
+const DialogTitle = forwardRef<ComponentRef<typeof _Title>, DialogTitleProps>((props, ref) => {
+  const { className, component: Title = _Title, size, ...rest } = props;
+
+  const { title } = dialogVariants({ size });
+
+  const mergedClass = cn(title(), className);
+  return (
+    <Title
+      {...rest}
+      className={mergedClass}
+      data-slot="dialog-title"
+      ref={ref}
+    />
+  );
+});
+
+DialogTitle.displayName = 'DialogTitle';
+
+export default DialogTitle;

packages/ui/src/components/dialog/dialog-variants.ts

@@ -0,0 +1,78 @@
+import { tv } from 'tailwind-variants';
+
+export const dialogVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    close: `absolute`,
+    content: [
+      `fixed left-[50%] top-[50%] z-50 flex flex-col w-full border bg-background shadow-lg translate-x-[-50%] translate-y-[-50%] md:w-full duration-200 sm:rounded-lg`,
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]`
+    ],
+    description: `text-muted-foreground`,
+    footer: `flex flex-col-reverse sm:flex-row sm:justify-end`,
+    header: `flex flex-col text-center sm:text-left`,
+    overlay: [
+      `fixed inset-0 z-50 bg-black/80`,
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0`
+    ],
+    title: `flex items-center font-semibold leading-none tracking-tight`
+  },
+  variants: {
+    size: {
+      '2xl': {
+        close: 'right-6 top-6',
+        content: `gap-y-6 max-w-3xl px-7 py-6 text-xl`,
+        description: 'text-xl',
+        footer: 'gap-6',
+        header: 'gap-y-6',
+        title: 'gap-x-3.5 text-2xl'
+      },
+      lg: {
+        close: 'right-4 top-4',
+        content: `gap-y-4 max-w-xl px-5 py-4 text-base`,
+        description: 'text-base',
+        footer: 'gap-4',
+        header: 'gap-y-4',
+        title: 'gap-x-2.5 text-lg'
+      },
+      md: {
+        close: 'right-3 top-3',
+        content: `gap-y-3 max-w-lg px-4 py-3 text-sm`,
+        description: 'text-sm',
+        footer: 'gap-3',
+        header: 'gap-y-3',
+        title: 'gap-x-2 text-base'
+      },
+      sm: {
+        close: 'right-2 top-2',
+        content: `gap-y-2 max-w-md px-3 py-2 text-xs`,
+        description: 'text-xs',
+        footer: 'gap-2',
+        header: 'gap-y-2',
+        title: 'gap-x-1.75 text-sm'
+      },
+      xl: {
+        close: 'right-5 top-5',
+        content: `gap-y-5 max-w-2xl px-6 py-5 text-lg`,
+        description: 'text-lg',
+        footer: 'gap-5',
+        header: 'gap-y-5',
+        title: 'gap-x-3 text-xl'
+      },
+      xs: {
+        close: 'right-1.5 top-1.5',
+        content: `gap-y-1.5 max-w-md px-2 py-1.5 text-2xs`,
+        description: 'text-2xs',
+        footer: 'gap-1.5',
+        header: 'gap-y-1.5',
+        title: 'gap-x-1.5 text-xs'
+      }
+    }
+  }
+});
+
+export type DialogSlots = keyof typeof dialogVariants.slots;