refactor: modal radix components

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@renderui/core",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"private": false,
 	"sideEffects": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",

src/components/_shared/components/modal-description/modal-description.tsx

@@ -1,15 +1,15 @@
-import { Text } from '@/components/text/components/text'
-import type { TextProps } from '@/components/text/types/text'
 import { cx } from '@renderui/utils'
 
-const ModalDescription = (props: TextProps) => {
-	const { className, size = 'sm', ...restProps } = props
+import { DialogTitle } from '@radix-ui/react-dialog'
+import type { ComponentPropsWithRef } from 'react'
+
+const ModalDescription = (props: ComponentPropsWithRef<typeof DialogTitle>) => {
+	const { className, ...restProps } = props
 
 	return (
-		<Text
+		<DialogTitle
 			data-slot='description'
-			size={size}
-			className={cx('render-ui-modal-description text-muted', className)}
+			className={cx('render-ui-modal-description text-muted text-sm', className)}
 			{...restProps}
 		/>
 	)

src/components/_shared/components/modal-header/modal-header.tsx

@@ -1,14 +1,13 @@
-import { Grid } from '@/components/grid/components/grid'
 import type { GridProps } from '@/components/grid/types/grid'
 import { cx } from '@renderui/utils'
 
 const ModalHeader = (props: GridProps) => {
 	const { className, ...restProps } = props
 
 	return (
-		<Grid
+		<header
 			data-slot='header'
-			className={cx('render-ui-modal-header gap-0.5 pb-4', className)}
+			className={cx('render-ui-modal-header grid gap-0.5 pb-4', className)}
 			{...restProps}
 		/>
 	)

src/components/_shared/components/modal-title/modal-title.tsx

@@ -1,17 +1,15 @@
 import { cx } from '@renderui/utils'
-import React, { type ComponentProps } from 'react'
+import type { ComponentPropsWithRef } from 'react'
 
 import { DialogTitle } from '@radix-ui/react-dialog'
 
-const ModalTitle = (props: ComponentProps<typeof DialogTitle>) => {
-	const { ref, className, color = 'mode-contrast', ...restProps } = props
+const ModalTitle = (props: ComponentPropsWithRef<typeof DialogTitle>) => {
+	const { className, ...restProps } = props
 
 	return (
 		<DialogTitle
-			ref={ref}
-			color={color}
 			data-slot='title'
-			className={cx('render-ui-modal-title font-semibold', className)}
+			className={cx('render-ui-modal-title font-semibold text-mode-contrast', className)}
 			{...restProps}
 		/>
 	)