ali-mohammadi-design-system 2.0.2 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ali-mohammadi-design-system",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "description": "خنثی و dynamic Design System — tokens از پروژه میاد",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,6 +30,14 @@
     "react": ">=18 <20",
     "react-dom": ">=18 <20"
   },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": true
+    },
+    "@mui/system": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/src/components/Button/Button.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTokens } from '../../utils/useTokens.js';
+import { transitions } from '../../utils/animations.js';
 
 /**
  * Button Component - کامپوننت دکمه با پشتیبانی از تم
@@ -72,7 +73,7 @@ const Button = ({ variant = 'primary', size = 'md', children, className = '', ..
         fontFamily: typography('fontFamily'),
         fontWeight: '500',
         cursor: 'pointer',
-        transition: 'all 0.2s ease',
+        transition: transitions.standard({ duration: 200 }),
         ...variantStyles[variant],
         ...sizeStyles[size],
         ...props.style,

package/src/index.js

@@ -5,6 +5,10 @@ export * from './components/index.js';
 export { ThemeProvider, useTheme } from './theme/ThemeProvider.jsx';
 export { useTokens } from './utils/useTokens.js';
 
+// Export Animations و Transitions
+export { transitions, easing, duration, keyframes, createTransition, createAnimation, useTransition } from './utils/animations.js';
+export { useMUITransitions, useMUITheme } from './utils/useMUI.js';
+
 // Export توکن‌ها
 export { defaultTokens, baseTokens, createTokens, defaultColors } from './tokens/index.js';
 

package/src/utils/animations.js

@@ -0,0 +1,159 @@
+/**
+ * Utilities برای animations و transitions
+ * اگر MUI موجود باشد از آن استفاده می‌کند، وگرنه از CSS animations استفاده می‌کند
+ */
+
+// MUI به صورت optional است و در runtime بررسی می‌شود
+// در build time از CSS animations استفاده می‌کنیم
+
+/**
+ * Easing functions (مشابه MUI)
+ * این easing functions مشابه MUI هستند و بدون نیاز به MUI کار می‌کنند
+ */
+export const easing = {
+  // MUI-compatible easing functions
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
+};
+
+/**
+ * Duration values (مشابه MUI)
+ */
+export const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  standard: 300,
+  complex: 375,
+  enteringScreen: 225,
+  leavingScreen: 195,
+};
+
+/**
+ * ایجاد transition string برای CSS
+ * @param {string|string[]} props - ویژگی‌هایی که باید transition شوند
+ * @param {Object} options - گزینه‌های transition
+ * @returns {string} CSS transition string
+ */
+export function createTransition(props = 'all', options = {}) {
+  const {
+    duration: durationOption = duration.standard,
+    easing: easingOption = easing.easeInOut,
+    delay = 0,
+  } = options;
+
+  const properties = Array.isArray(props) ? props.join(', ') : props;
+  
+  return `${properties} ${durationOption}ms ${easingOption} ${delay}ms`;
+}
+
+/**
+ * Transition presets (مشابه MUI)
+ */
+export const transitions = {
+  // Standard transitions
+  create: createTransition,
+  
+  // Common transitions
+  easing,
+  duration,
+  
+  // Preset transitions
+  all: (options) => createTransition('all', options),
+  color: (options) => createTransition(['color', 'background-color', 'border-color'], options),
+  backgroundColor: (options) => createTransition('background-color', options),
+  opacity: (options) => createTransition('opacity', options),
+  transform: (options) => createTransition('transform', options),
+  boxShadow: (options) => createTransition('box-shadow', options),
+  
+  // Complex transitions
+  standard: (options) => createTransition('all', { 
+    duration: duration.standard, 
+    easing: easing.easeInOut,
+    ...options 
+  }),
+  
+  enter: (options) => createTransition('all', { 
+    duration: duration.enteringScreen, 
+    easing: easing.easeOut,
+    ...options 
+  }),
+  
+  leave: (options) => createTransition('all', { 
+    duration: duration.leavingScreen, 
+    easing: easing.easeIn,
+    ...options 
+  }),
+};
+
+/**
+ * Hook برای استفاده از transitions در کامپوننت‌ها
+ * @param {string|string[]} props - ویژگی‌هایی که باید transition شوند
+ * @param {Object} options - گزینه‌های transition
+ * @returns {string} CSS transition string
+ */
+export function useTransition(props = 'all', options = {}) {
+  return createTransition(props, options);
+}
+
+/**
+ * Animation keyframes (CSS-based)
+ */
+export const keyframes = {
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+  },
+  slideUp: {
+    from: { transform: 'translateY(20px)', opacity: 0 },
+    to: { transform: 'translateY(0)', opacity: 1 },
+  },
+  slideDown: {
+    from: { transform: 'translateY(-20px)', opacity: 0 },
+    to: { transform: 'translateY(0)', opacity: 1 },
+  },
+  scaleIn: {
+    from: { transform: 'scale(0.8)', opacity: 0 },
+    to: { transform: 'scale(1)', opacity: 1 },
+  },
+  scaleOut: {
+    from: { transform: 'scale(1)', opacity: 1 },
+    to: { transform: 'scale(0.8)', opacity: 0 },
+  },
+};
+
+/**
+ * ایجاد animation string برای CSS
+ * @param {string} name - نام animation
+ * @param {Object} options - گزینه‌های animation
+ * @returns {string} CSS animation string
+ */
+export function createAnimation(name, options = {}) {
+  const {
+    duration: durationOption = duration.standard,
+    easing: easingOption = easing.easeInOut,
+    delay = 0,
+    iterationCount = 1,
+    direction = 'normal',
+    fillMode = 'both',
+  } = options;
+
+  return `${name} ${durationOption}ms ${easingOption} ${delay}ms ${iterationCount} ${direction} ${fillMode}`;
+}
+
+export default {
+  transitions,
+  easing,
+  duration,
+  keyframes,
+  createTransition,
+  createAnimation,
+  useTransition,
+};
+

package/src/utils/index.js

@@ -0,0 +1,4 @@
+export { useTokens } from './useTokens.js';
+export { transitions, easing, duration, keyframes, createTransition, createAnimation, useTransition } from './animations.js';
+export { useMUITransitions, useMUITheme, checkMUIAvailability } from './useMUI.js';
+

package/src/utils/useMUI.js

@@ -0,0 +1,77 @@
+/**
+ * Hook برای استفاده اختیاری از MUI
+ * اگر MUI موجود باشد از آن استفاده می‌کند، وگرنه fallback می‌کند
+ * 
+ * توجه: این hook فقط در runtime کار می‌کند و MUI باید در پروژه کاربر نصب شده باشد
+ */
+
+import { transitions } from './animations.js';
+
+/**
+ * Hook برای استفاده از MUI transitions (اگر موجود باشد)
+ * در runtime بررسی می‌کند که آیا MUI در window یا global موجود است
+ * 
+ * @param {Object} options - گزینه‌های transition
+ * @returns {Object} Transition utilities
+ */
+export function useMUITransitions(options = {}) {
+  // در runtime بررسی می‌کنیم
+  if (typeof window !== 'undefined') {
+    // اگر MUI در window موجود باشد (مثلاً از CDN)
+    if (window.MUI || window.mui) {
+      try {
+        // استفاده از MUI transitions
+        return {
+          create: window.MUI?.transitions?.create || transitions.create,
+          easing: window.MUI?.transitions?.easing || transitions.easing,
+          duration: window.MUI?.transitions?.duration || transitions.duration,
+          useMUI: true,
+        };
+      } catch {
+        // Fallback
+      }
+    }
+  }
+  
+  // Fallback به animations.js (همیشه کار می‌کند)
+  return {
+    ...transitions,
+    useMUI: false,
+  };
+}
+
+/**
+ * دریافت MUI theme (اگر موجود باشد)
+ * این hook فقط در runtime کار می‌کند
+ */
+export function useMUITheme() {
+  // در runtime بررسی می‌کنیم
+  if (typeof window !== 'undefined') {
+    // اگر MUI در window موجود باشد
+    if (window.MUI || window.mui) {
+      try {
+        // استفاده از MUI theme
+        return window.MUI?.theme || window.mui?.theme || null;
+      } catch {
+        return null;
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * بررسی اینکه آیا MUI در پروژه نصب شده است (برای documentation)
+ * این فقط یک helper است و در runtime کار نمی‌کند
+ */
+export function checkMUIAvailability() {
+  return { available: false, message: 'MUI باید در پروژه کاربر نصب شود' };
+}
+
+export default {
+  useMUITransitions,
+  useMUITheme,
+  checkMUIAvailability,
+};
+