feat(dialog): update @halvaradop/ui-dialog package

- Resolve inconsistency by `Modal` component and `innerDialogVariants`
- Rename `Modal` to `Dialog`
- Rename `innerDialogVariants` to `modalVariants`

* chore(docs): update `README.md` file

Author: halvaradop

packages/ui-dialog/README.md

@@ -1,6 +1,6 @@
 # @halvaradop/ui-dialog
 
-The `@halvaradop/ui-dialog` is an accessible, reusable, and customizable `Modal` component that is part of the `@halvaradop/ui` library for React. Built with `React` and styled using `TailwindCSS`, it provides a set of pre-styled components designed to streamline and accelerate the development of user interfaces.
+The `@halvaradop/ui-dialog` is an accessible, reusable, and customizable `Dialog` component that is part of the `@halvaradop/ui` library for React. Built with `React` and styled using `TailwindCSS`, it provides a set of pre-styled components designed to streamline and accelerate the development of user interfaces.
 
 ## Installation
 
@@ -28,13 +28,13 @@ pnpm add @halvaradop/ui-dialog@beta
 
 ## Usage
 
-The `Modal` component offers two additional props for customization: `variant` and `size`. Import the `Modal` component as shown below:
+The `Dialog` component does not accept any props; it simply applies default styles. Import the `Dialog` component as shown below:
 
 ```tsx
 "use client"
 import { useRef } from "react"
 import { Button } from "@halvaradop/ui-button"
-import { Modal, innerDialogVariants } from "@halvaradop/ui-dialog"
+import { Dialog, modalVariants } from "@halvaradop/ui-dialog"
 
 export default function App() {
   const modalRef = useRef<HTMLDialogElement>(null)
@@ -50,23 +50,23 @@ export default function App() {
   return (
     <>
       <Button onClick={() => handleToggleModal(true)}>Open</Button>
-      <Modal ref={modalRef}>
-        <div className={innerDialogVariants({ variant: "fixed" })}>
+      <Dialog ref={modalRef}>
+        <div className={modalVariants({ variant: "fixed" })}>
           <div>Modal content</div>
           <Button className="mt-4" onClick={() => handleToggleModal(false)}>
             Close
           </Button>
         </div>
-      </Modal>
+      </Dialog>
     </>
   )
 }
 ```
 
 > [!TIP]
-> The `Modal` component represents the dialog HTML tag to create the window at the top layer. The `innerDialogVariants` function contains the styles for the content within the `Modal` component.
+> The `Dialog` component represents the dialog HTML tag to create the window at the top layer. The `modalVariants` function contains the styles for the content within the `Dialog` component or just known as `modal`, the function exports a set of styles based in two variants called `variant` and `size`, this variants are similars that the receive like other components like `Button`, `Form`, `Input` and more.
 
-### Prop Values
+### Variant Values
 
 | Prop    | Values                   | Default |
 | ------- | ------------------------ | ------- |
@@ -93,7 +93,7 @@ export default config
 
 ### Customizing with CSS Variables
 
-The `Modal` component supports CSS variables to customize its styles based on your design system. To set the CSS variables, define the required variables in your project's `.css` file. Then, extend the `colors` field in the `tailwind.config.ts` file to create new color names using the values of the previously defined CSS variables.
+The `Dialog` component supports CSS variables to customize its styles based on your design system. To set the CSS variables, define the required variables in your project's `.css` file. Then, extend the `colors` field in the `tailwind.config.ts` file to create new color names using the values of the previously defined CSS variables.
 
 Below are some of the CSS variables used by the `@halvaradop/ui-dialog` component. For a complete list of CSS variables, refer to the [index.css](https://github.com/halvaradop/ui/blob/master/index.css) file:
 

packages/ui-dialog/package.json

@@ -2,7 +2,7 @@
   "name": "@halvaradop/ui-dialog",
   "version": "0.2.0-beta.1",
   "private": false,
-  "description": "A customizable dialog component for @halvaradop/ui library with Tailwind CSS styling.",
+  "description": "A customizable Dialog component for @halvaradop/ui library with Tailwind CSS styling.",
   "type": "module",
   "scripts": {
     "dev": "tsup --watch",

packages/ui-dialog/src/dialog.stories.tsx

@@ -1,14 +1,17 @@
 import { useRef } from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Modal, innerDialogVariants } from "./index.js"
-import { Button } from "../../ui-button/src/index.js"
+import { Dialog, modalVariants } from "./index.js"
+import { Button } from "@halvaradop/ui-button"
 import { decorator } from "@halvaradop/ui-utils/decorator"
 import { DocsPage } from "@halvaradop/ui-utils/docs-page"
+import type { VariantProps } from "class-variance-authority"
+
+type ModalProps = VariantProps<typeof modalVariants>
 
 const meta: Meta = {
     title: "ui-dialog",
     tags: ["autodocs"],
-    component: Modal,
+    component: Dialog as any,
     args: {
         size: "base",
         variant: "base",
@@ -51,7 +54,7 @@ const meta: Meta = {
         },
     },
     decorators: [decorator],
-} satisfies Meta<typeof Modal>
+} satisfies Meta<ModalProps>
 
 type Story = StoryObj<typeof meta>
 
@@ -73,14 +76,18 @@ export const Base: Story = {
         return (
             <>
                 <Button onClick={() => handleToggleModal(true)}>Open</Button>
-                <Modal ref={modalRef}>
-                    <div className={innerDialogVariants({ size, variant })}>
-                        <div>Modal content</div>
+                <Dialog ref={modalRef}>
+                    <div className={modalVariants({ size, variant })}>
+                        <div className="text-center">
+                            <h1 className="font-medium">Modal Content</h1>
+                            <span className="block">size: {size}</span>
+                            <span className="block">variant: {variant}</span>
+                        </div>
                         <Button className="mt-4" onClick={() => handleToggleModal(false)}>
                             Close
                         </Button>
                     </div>
-                </Modal>
+                </Dialog>
             </>
         )
     },

packages/ui-dialog/src/index.tsx

@@ -1,9 +1,9 @@
-import { merge, type ComponentProps, type WithChildrenProps, type ArgsFunction } from "@halvaradop/ui-core"
-import { cva, type VariantProps } from "class-variance-authority"
+import { merge, type ComponentProps, type WithChildrenProps } from "@halvaradop/ui-core"
+import { cva } from "class-variance-authority"
 
-export type DialogProps<T extends ArgsFunction> = VariantProps<T> & WithChildrenProps<ComponentProps<"dialog">>
+export type DialogProps = WithChildrenProps<ComponentProps<"dialog">>
 
-export const innerDialogVariants = cva("flex items-center justify-center", {
+export const modalVariants = cva("flex items-center justify-center", {
     variants: {
         variant: {
             base: "flex-col shadow bg-modal",
@@ -23,7 +23,7 @@ export const innerDialogVariants = cva("flex items-center justify-center", {
     },
 })
 
-export const Modal = ({ className, children, ref, ...props }: DialogProps<typeof innerDialogVariants>) => {
+export const Dialog = ({ className, children, ref, ...props }: DialogProps) => {
     return (
         <dialog
             className={merge(
@@ -38,4 +38,4 @@ export const Modal = ({ className, children, ref, ...props }: DialogProps<typeof
     )
 }
 
-Modal.displayName = "Dialog"
+Dialog.displayName = "Dialog"