التثبيت

متطلبات البيئة

• React ^18.0.0 أو ^19.0.0
• TypeScript >= 5.0 (اختياري لكن يُوصى به)

الاعتماد الزمني الوحيد لـ @lh-ui/react هو @lh-ui/share —— الطبقة المشتركة المستقلة عن الإطار في العائلة (منطق المكوّنات، الأنماط، السمات، النصوص). والاعتمادات النظيرة (peer) هي react وreact-dom فقط.

التثبيت عبر مدير الحزم

pnpm add @lh-ui/react

npm install @lh-ui/react

yarn add @lh-ui/react

bun add @lh-ui/react

استيراد الأنماط

يعتمد @lh-ui/react استراتيجية الاستيراد عند الحاجة (موافقة لـ @lh-ui/vue2): لا يُحقِن مدخل الحزمة أي نمط، وتُستورَد متغيّرات السمة وأنماط المكوّنات كلٌ على حدة.

// متغيّرات السمة (مطلوبة): رموز التصميم ومتغيّرات الوضع الداكن
import '@lh-ui/react/theme.css'

// أنماط المكوّنات (عند الحاجة): استورِد سطرًا لكل مكوّن تستخدمه
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

أسماء أصناف CSS للسمة وأنماط المكوّنات متطابقة تمامًا، لذا يمكنك أيضًا استيراد المصدر SCSS نفسه مباشرةً من @lh-ui/share وترجمته بنفسك:

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';

لماذا لا يُحقَن كل شيء دفعة واحدة

الاستيراد عند الحاجة هو السائد في منظومة React، والآثار الجانبية الكاملة للأنماط تُفسِد tree-shaking. وبتسليم مداخل الأنماط للمستخدم يستطيع المجمع (bundler) اقتطاع أنماط المكوّنات غير المستخدمة بدقة.

الوضع الداكن

توجد متغيّرات الوضع الداكن في theme-dark.css، وهي حصرية مع theme.css (أحدهما فقط)، أو يمكن التبديل وقت التشغيل عبر useLhTheme / useLhPresetTheme:

import { useLhTheme } from '@lh-ui/react'

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? 'التبديل إلى النهار' : 'التبديل إلى الليل'}</button>
}

دعم المتصفحات

المتصفحات الحديثة (آخر إصدارين مستقرين من Chrome / Edge / Firefox / Safari). وتستخدم المكوّنات بكثرة خصائص CSS المخصَّصة (var(--lh-*))، ولا يدعم IE.