نظام التصميم

<Button variant="primary">حفظ</Button>
<Button variant="secondary">إلغاء</Button>
<Button variant="ghost">تخطّي</Button>
<Button variant="danger">حذف</Button>

<Button size="sm">صغير</Button>
<Button size="md">متوسط</Button>
<Button size="lg">كبير</Button>

import { Plus, Sparkles } from "lucide-react";

<Button><Plus className="w-4 h-4" />جديد</Button>
<Button variant="secondary"><Sparkles className="w-4 h-4" />تدقيق</Button>

<Button loading={true}>جارٍ الحفظ</Button>
<Button disabled>غير متاح</Button>

<Card>
  <CardHeader>
    <CardTitle>عنوان البطاقة</CardTitle>
  </CardHeader>
  <CardBody>
    محتوى البطاقة هنا — نصّ، نموذج، أو أي عنصر آخر.
  </CardBody>
</Card>

<Card className="card-hover cursor-pointer">
  <CardBody>...</CardBody>
</Card>

<Input placeholder="ابحث في المصادر..." />
<Input type="email" placeholder="example@domain.com" dir="ltr" />

<Textarea placeholder="اكتب ملاحظاتك..." rows={4} />

<Badge>افتراضي</Badge>
<Badge variant="teal">جديد</Badge>
<Badge variant="sand">رملي</Badge>
<Badge variant="rose">عاجل</Badge>
<Badge variant="ochre">مميّز</Badge>

import { useToast } from "@/lib/use-toast";

const toast = useToast();
toast.success("تم الحفظ", "حُفظت المسودة بنجاح");
toast.error("فشلت العملية", "تأكّد من اتصالك بالشبكة");
toast.info("معلومة", "هذه نسخة تجريبية");

import { confirm } from "@/components/ui/confirm-dialog";

const ok = await confirm({
  title: "حذف المسودة؟",
  description: "لا يمكن التراجع.",
  confirmLabel: "حذف",
  variant: "destructive",
});
if (ok) deleteDraft();

import { promptText } from "@/components/ui/confirm-dialog";

// نصّ عربي عادي
const name = await promptText({
  title: "ما اسمك؟",
  placeholder: "مثلًا: محمد العتيبي",
});

// رابط (LTR)
const url = await promptText({
  title: "إدراج رابط",
  inputType: "url",
  inputDir: "ltr",
  defaultValue: "https://",
});

<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-10 w-32 rounded-lg" />

<CardSkeleton />
<ListItemSkeleton />
<TextSkeleton lines={4} />

<EmptyState
  icon={<BookMarked className="w-8 h-8" />}
  title="لا توجد مصادر بعد"
  description="ابدأ بحفظ المصادر من مكتبة البحث."
  action={<Button><Search className="w-4 h-4" />ابدأ البحث</Button>}
/>

<EmptyState
  variant="compact"
  icon={<FileText className="w-6 h-6" />}
  title="لا توجد مسودات"
  description="ابدأ بكتابة مسودة جديدة."
/>