neogestify-ui-components 1.2.18 → 1.2.19

package/src/components/html/Input.tsx

@@ -1,137 +1,137 @@
-import { type InputHTMLAttributes, type FC, type ReactNode } from 'react';
-
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string | ReactNode;
-  error?: string;
-  helperText?: string;
-}
-
-export const Input: FC<InputProps> = ({
-  label,
-  error,
-  helperText,
-  className = '',
-  id,
-  type,
-  ...props
-}) => {
-  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
-
-  // ── Default text input ────────────────────────────────────────────────────
-  const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
-  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
-  const classes = `${baseClasses} ${errorClasses} ${className}`;
-
-  // ── Checkbox ──────────────────────────────────────────────────────────────
-  const checkboxBaseClasses = 'h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer';
-  const checkboxErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : '';
-  const checkboxClasses = `${checkboxBaseClasses} ${checkboxErrorClasses}`.trim();
-
-  // ── File input ────────────────────────────────────────────────────────────
-  const fileBaseClasses = 'block w-full sm:text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer';
-  const fileErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-600';
-  const fileClasses = `${fileBaseClasses} ${fileErrorClasses} ${className}`.trim();
-
-  const hasHidden = Boolean(className && /\bhidden\b/.test(className));
-  const wrapperBase = 'space-y-1 w-full';
-  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
-
-  if (type === 'checkbox') {
-    return (
-      <div className={wrapperClasses}>
-        <div className="flex items-center space-x-2">
-          <input
-            id={inputId}
-            type="checkbox"
-            className={checkboxClasses}
-            {...props}
-          />
-          {label && typeof label === 'string' ? (
-            <label
-              htmlFor={inputId}
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >
-              {label}
-            </label>
-          ) : (
-            label
-          )}
-        </div>
-        {error && (
-          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-            {error}
-          </p>
-        )}
-        {helperText && !error && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {helperText}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  if (type === 'file') {
-    return (
-      <div className={wrapperClasses}>
-        {label && typeof label === 'string' ? (
-          <label
-            htmlFor={inputId}
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            {label}
-          </label>
-        ) : (
-          label
-        )}
-        <input
-          id={inputId}
-          type="file"
-          className={fileClasses}
-          {...props}
-        />
-        {error && (
-          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-            {error}
-          </p>
-        )}
-        {helperText && !error && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {helperText}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className={wrapperClasses}>
-      {label && typeof label === 'string' ? (
-        <label
-          htmlFor={inputId}
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          {label}
-        </label>
-      ) : (
-        label
-      )}
-      <input
-        id={inputId}
-        className={classes}
-        type={type}
-        {...props}
-      />
-      {error && (
-        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-          {error}
-        </p>
-      )}
-      {helperText && !error && (
-        <p className="text-sm text-gray-500 dark:text-gray-400">
-          {helperText}
-        </p>
-      )}
-    </div>
-  );
+import { type InputHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string | ReactNode;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input: FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  className = '',
+  id,
+  type,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  // ── Default text input ────────────────────────────────────────────────────
+  const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
+  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
+  const classes = `${baseClasses} ${errorClasses} ${className}`;
+
+  // ── Checkbox ──────────────────────────────────────────────────────────────
+  const checkboxBaseClasses = 'h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer';
+  const checkboxErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : '';
+  const checkboxClasses = `${checkboxBaseClasses} ${checkboxErrorClasses}`.trim();
+
+  // ── File input ────────────────────────────────────────────────────────────
+  const fileBaseClasses = 'block w-full sm:text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer';
+  const fileErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-600';
+  const fileClasses = `${fileBaseClasses} ${fileErrorClasses} ${className}`.trim();
+
+  const hasHidden = Boolean(className && /\bhidden\b/.test(className));
+  const wrapperBase = 'space-y-1 w-full';
+  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
+
+  if (type === 'checkbox') {
+    return (
+      <div className={wrapperClasses}>
+        <div className="flex items-center space-x-2">
+          <input
+            id={inputId}
+            type="checkbox"
+            className={checkboxClasses}
+            {...props}
+          />
+          {label && typeof label === 'string' ? (
+            <label
+              htmlFor={inputId}
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              {label}
+            </label>
+          ) : (
+            label
+          )}
+        </div>
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  if (type === 'file') {
+    return (
+      <div className={wrapperClasses}>
+        {label && typeof label === 'string' ? (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+          >
+            {label}
+          </label>
+        ) : (
+          label
+        )}
+        <input
+          id={inputId}
+          type="file"
+          className={fileClasses}
+          {...props}
+        />
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      {label && typeof label === 'string' ? (
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <input
+        id={inputId}
+        className={classes}
+        type={type}
+        {...props}
+      />
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
 };

package/src/components/html/Loading.tsx

@@ -1,104 +1,104 @@
-import { type FC } from 'react';
-
-interface LoadingProps {
-  variant?: 'spinner' | 'dots' | 'pulse' | 'bars' | 'ring' | 'cube';
-  size?: 'small' | 'medium' | 'large' | 'xl';
-  color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
-  label?: string;
-  className?: string;
-}
-
-export const Loading: FC<LoadingProps> = ({
-  variant = 'spinner',
-  size = 'medium',
-  color = 'primary',
-  label,
-  className = '',
-}) => {
-  const sizeClasses = {
-    small: 'h-4 w-4',
-    medium: 'h-8 w-8',
-    large: 'h-12 w-12',
-    xl: 'h-16 w-16',
-  };
-
-  const colorClasses = {
-    primary: 'text-indigo-600 dark:text-indigo-400',
-    white: 'text-white',
-    gray: 'text-gray-500 dark:text-gray-400',
-    success: 'text-green-600 dark:text-green-400',
-    danger: 'text-red-600 dark:text-red-400',
-    warning: 'text-yellow-600 dark:text-yellow-400',
-  };
-
-  const renderIcon = () => {
-    const commonClass = `${sizeClasses[size]} ${colorClasses[color]}`;
-
-    switch (variant) {
-      case 'dots':
-        const dotSize = size === 'small' ? 'h-1 w-1' : size === 'medium' ? 'h-2 w-2' : size === 'large' ? 'h-3 w-3' : 'h-4 w-4';
-        return (
-          <div className={`flex space-x-1 ${colorClasses[color]}`}>
-            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0s' }}></div>
-            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.15s' }}></div>
-            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.3s' }}></div>
-          </div>
-        );
-      
-      case 'bars':
-        return (
-          <div className={`flex items-end space-x-1 ${sizeClasses[size]} ${colorClasses[color]}`}>
-             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0s' }}></div>
-             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '100%', animationDelay: '0.2s' }}></div>
-             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0.4s' }}></div>
-          </div>
-        );
-
-      case 'pulse':
-        return (
-          <span className={`relative flex ${commonClass}`}>
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-current"></span>
-            <span className="relative inline-flex rounded-full h-full w-full bg-current"></span>
-          </span>
-        );
-
-      case 'cube':
-        return (
-            <div className={`${commonClass} grid grid-cols-2 gap-1`}>
-                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0s' }}></div>
-                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0.5s' }}></div>
-                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1.5s' }}></div>
-                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1s' }}></div>
-            </div>
-        );
-
-      case 'ring':
-        return (
-          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-        );
-
-      case 'spinner':
-      default:
-        return (
-          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
-          </svg>
-        );
-    }
-  };
-
-  return (
-    <div className={`flex flex-col items-center justify-center w-full h-full min-h-[inherit] ${className}`} role="status">
-      {renderIcon()}
-      {label && (
-        <span className={`mt-3 text-sm font-medium ${colorClasses[color]}`}>
-          {label}
-        </span>
-      )}
-    </div>
-  );
-};
+import { type FC } from 'react';
+
+interface LoadingProps {
+  variant?: 'spinner' | 'dots' | 'pulse' | 'bars' | 'ring' | 'cube';
+  size?: 'small' | 'medium' | 'large' | 'xl';
+  color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
+  label?: string;
+  className?: string;
+}
+
+export const Loading: FC<LoadingProps> = ({
+  variant = 'spinner',
+  size = 'medium',
+  color = 'primary',
+  label,
+  className = '',
+}) => {
+  const sizeClasses = {
+    small: 'h-4 w-4',
+    medium: 'h-8 w-8',
+    large: 'h-12 w-12',
+    xl: 'h-16 w-16',
+  };
+
+  const colorClasses = {
+    primary: 'text-indigo-600 dark:text-indigo-400',
+    white: 'text-white',
+    gray: 'text-gray-500 dark:text-gray-400',
+    success: 'text-green-600 dark:text-green-400',
+    danger: 'text-red-600 dark:text-red-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+  };
+
+  const renderIcon = () => {
+    const commonClass = `${sizeClasses[size]} ${colorClasses[color]}`;
+
+    switch (variant) {
+      case 'dots':
+        const dotSize = size === 'small' ? 'h-1 w-1' : size === 'medium' ? 'h-2 w-2' : size === 'large' ? 'h-3 w-3' : 'h-4 w-4';
+        return (
+          <div className={`flex space-x-1 ${colorClasses[color]}`}>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0s' }}></div>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.15s' }}></div>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.3s' }}></div>
+          </div>
+        );
+      
+      case 'bars':
+        return (
+          <div className={`flex items-end space-x-1 ${sizeClasses[size]} ${colorClasses[color]}`}>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0s' }}></div>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '100%', animationDelay: '0.2s' }}></div>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0.4s' }}></div>
+          </div>
+        );
+
+      case 'pulse':
+        return (
+          <span className={`relative flex ${commonClass}`}>
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-current"></span>
+            <span className="relative inline-flex rounded-full h-full w-full bg-current"></span>
+          </span>
+        );
+
+      case 'cube':
+        return (
+            <div className={`${commonClass} grid grid-cols-2 gap-1`}>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0.5s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1.5s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1s' }}></div>
+            </div>
+        );
+
+      case 'ring':
+        return (
+          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        );
+
+      case 'spinner':
+      default:
+        return (
+          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <div className={`flex flex-col items-center justify-center w-full h-full min-h-[inherit] ${className}`} role="status">
+      {renderIcon()}
+      {label && (
+        <span className={`mt-3 text-sm font-medium ${colorClasses[color]}`}>
+          {label}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/html/Modal.tsx

@@ -1,80 +1,80 @@
-import { Button } from './Button';
-import { CloseIcon } from '../icons/icons';
-import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
-
-interface ModalProps {
-    onClose: () => void;
-    title: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    maxWidth?: string;
-    showCloseButton?: boolean;
-    zIndex?: number;
-}
-
-export interface ModalRef {
-    handleClose: () => void;
-}
-
-export const Modal = forwardRef<ModalRef, ModalProps>(({
-    onClose,
-    title,
-    children,
-    footer,
-    maxWidth = 'max-w-2xl',
-    showCloseButton = true,
-    zIndex = 50
-}, ref) => {
-    const [show, setShow] = useState(false);
-
-    useEffect(() => {
-        setShow(true);
-    }, []);
-
-    const handleClose = () => {
-        setShow(false);
-        setTimeout(() => {
-            onClose();
-        }, 300);
-    };
-
-    useImperativeHandle(ref, () => ({
-        handleClose
-    }));
-
-    return (
-        <dialog
-            open={show}
-            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && 'opacity-100'} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`}
-            style={{ zIndex: zIndex - 10 }}
-        >
-            <article
-                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`}
-                style={{ zIndex }}
-            >
-                <header className="shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
-                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
-                    {showCloseButton && (
-                        <Button
-                            variant='icon'
-                            onClick={handleClose}
-                            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                        >
-                            <CloseIcon className="w-5 h-5" />
-                        </Button>
-                    )}
-                </header>
-                <div className="flex-1 overflow-y-auto p-6">
-                    {children}
-                </div>
-                {footer && (
-                    <footer className="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end gap-3">
-                        {footer}
-                    </footer>
-                )}
-            </article>
-        </dialog>
-    );
-});
-
+import { Button } from './Button';
+import { CloseIcon } from '../icons/icons';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+
+interface ModalProps {
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    showCloseButton?: boolean;
+    zIndex?: number;
+}
+
+export interface ModalRef {
+    handleClose: () => void;
+}
+
+export const Modal = forwardRef<ModalRef, ModalProps>(({
+    onClose,
+    title,
+    children,
+    footer,
+    maxWidth = 'max-w-2xl',
+    showCloseButton = true,
+    zIndex = 50
+}, ref) => {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setShow(true);
+    }, []);
+
+    const handleClose = () => {
+        setShow(false);
+        setTimeout(() => {
+            onClose();
+        }, 300);
+    };
+
+    useImperativeHandle(ref, () => ({
+        handleClose
+    }));
+
+    return (
+        <dialog
+            open={show}
+            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && 'opacity-100'} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`}
+            style={{ zIndex: zIndex - 10 }}
+        >
+            <article
+                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`}
+                style={{ zIndex }}
+            >
+                <header className="shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
+                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
+                    {showCloseButton && (
+                        <Button
+                            variant='icon'
+                            onClick={handleClose}
+                            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        >
+                            <CloseIcon className="w-5 h-5" />
+                        </Button>
+                    )}
+                </header>
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+                {footer && (
+                    <footer className="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end gap-3">
+                        {footer}
+                    </footer>
+                )}
+            </article>
+        </dialog>
+    );
+});
+
 Modal.displayName = 'Modal';