كل حزم بيلاجيك UI

حزمة واحدة تضم كل شيء: مكونات لكل إطار، رسوم بيانية، ثلاثي الأبعاد، أيقونات، رسوم توضيحية، محرّك الثيمات والحركة والصوت. أُطر العمل اعتماديات اختيارية، فلا يُحمَّل إلا ما تستورده.

الإصدار

0.1.0

حجم التنزيل

624 kB

الحجم بعد التثبيت

2.8 MB

الرخصة

MIT

الاعتماديات المطلوبة

react · vue · @angular/core · svelte · astro · react-native · three · (all optional)

import 'pelagic/style.css';
import { Button, DataTable, swal } from 'pelagic/react';
import { SearchIcon } from 'pelagic/icons/react';
import { createTheme, applyCustomTheme } from 'pelagic/core/theme';

applyCustomTheme(createTheme({ primary: '#ff6a00' }));

مسارات التصدير

الكتالوج الكامل: النماذج، المدخلات المتقدمة، جدول البيانات، النوافذ، القوائم، الوسائط، الرسوم البيانية، الحركة، المعالج، التنبيهات والإشعارات. كل مكوّن يتبع نمط WAI-ARIA ومُختبر بـ axe.

الإصدار

0.1.0

حجم التنزيل

182 kB

الحجم بعد التثبيت

749 kB

الرخصة

MIT

الاعتماديات المطلوبة

react ^18 || ^19 · react-dom

import '@pelagic-ui/core/style.css';
import { Button, Input, toast, Toaster } from '@pelagic-ui/react';

export function App() {
  return (
    <>
      <Input label="Project name" defaultValue="pelagic-app" />
      <Button onClick={() => toast.success('Deployed')}>Deploy</Button>
      <Toaster />
    </>
  );
}

مسارات التصدير

مكونات مبنية على Composition API مع v-model في كل حقل، وخصائص مكتوبة الأنواع، وفتحات (slots) للخلايا والحالات الفارغة والتذييلات.

الإصدار

0.1.0

حجم التنزيل

17 kB

الحجم بعد التثبيت

93 kB

الرخصة

MIT

الاعتماديات المطلوبة

vue ^3.4

<script setup lang="ts">
import '@pelagic-ui/core/style.css';
import { ref } from 'vue';
import { Button, Input, Switch } from '@pelagic-ui/vue';
const name = ref('pelagic-app');
const previews = ref(true);
</script>

<template>
  <Input v-model="name" label="Project name" />
  <Switch v-model="previews" label="Preview deployments" />
  <Button>Deploy</Button>
</template>

مسارات التصدير

مكونات وموجّهات مستقلة مبنية على الإشارات (signals). الحقول تطبّق ControlValueAccessor فتعمل مع النماذج التفاعلية والقوالب.

الإصدار

0.1.0

حجم التنزيل

61 kB

الحجم بعد التثبيت

359 kB

الرخصة

MIT

الاعتماديات المطلوبة

@angular/core 20–22 · @angular/common · @angular/forms

import { Component } from '@angular/core';
import { PELAGIC_UI } from '@pelagic-ui/angular';

@Component({
  selector: 'app-deploy',
  imports: [PELAGIC_UI],
  template: `
    <pl-input label="Project name" [(value)]="name" />
    <button plButton (click)="deploy()">Deploy</button>`,
})
export class DeployComponent {
  name = 'pelagic-app';
  deploy() {}
}

مسارات التصدير

مكونات Svelte 5 مكتوبة بالـ runes. ‏bind:value في كل حقل، ومقاطع (snippets) للمحتوى المخصص، وإجراءات للتلميحات وحبس التركيز.

الإصدار

0.1.0

حجم التنزيل

13 kB

الحجم بعد التثبيت

42 kB

الرخصة

MIT

الاعتماديات المطلوبة

svelte ^5

<script lang="ts">
  import { Button, Input, Switch } from '@pelagic-ui/svelte';
  let name = $state('pelagic-app');
  let previews = $state(true);
</script>

<Input bind:value={name} label="Project name" />
<Switch bind:checked={previews} label="Preview deployments" />
<Button>Deploy</Button>

مسارات التصدير

مكونات تُعرض على الخادم ولا ترسل JavaScript إلا عند الحاجة. التبويبات والمفاتيح والنوافذ تعمل ببضع مئات من البايتات. هذا الموقع مبني بها.

الإصدار

0.1.0

حجم التنزيل

14 kB

الحجم بعد التثبيت

41 kB

الرخصة

MIT

الاعتماديات المطلوبة

astro ^5

---
import '@pelagic-ui/core/style.css';
import ThemeScript from '@pelagic-ui/astro/components/ThemeScript';
import Button from '@pelagic-ui/astro/components/Button';
---
<html lang="en">
  <head><ThemeScript /></head>
  <body><Button>Deploy</Button></body>
</html>

مسارات التصدير

مكونات أصلية بنفس أسماء وخصائص حزم الويب، وبنفس الرموز. أدوار قارئ الشاشة وأهداف لمس 48dp ودعم النص الكبير مدمجة.

الإصدار

0.1.0

حجم التنزيل

13 kB

الحجم بعد التثبيت

51 kB

الرخصة

MIT

الاعتماديات المطلوبة

react · react-native

import { PelagicProvider, Button, Input } from '@pelagic-ui/react-native';

export default function App() {
  return (
    <PelagicProvider mode="system" accent="violet">
      <Input label="Project name" defaultValue="pelagic-app" />
      <Button title="Deploy" onPress={deploy} />
    </PelagicProvider>
  );
}

مسارات التصدير

عناصر مولّدة من نفس مصدر الرموز للويب، فيبدو تطبيق Flutter وتطبيق الويب متطابقين. الدلالات وأهداف 48×48 وتقليل الحركة و RTL مدمجة.

الإصدار

0.1.0

حجم التنزيل

—

الحجم بعد التثبيت

194 kB

الرخصة

MIT

الاعتماديات المطلوبة

Flutter SDK ≥ 3.24 · Dart ≥ 3.5

import 'package:flutter/material.dart';
import 'package:pelagic_ui/pelagic_ui.dart';

void main() => runApp(const PelagicApp(title: 'Pelagic', home: Deploy()));

class Deploy extends StatelessWidget {
  const Deploy({super.key});
  @override
  Widget build(BuildContext context) => Column(children: [
        const PelagicInput(label: 'Project name'),
        PelagicButton(label: 'Deploy', onPressed: () {}),
      ]);
}

مسارات التصدير

مشاهد three.js تتبع الثيم: كرة أرضية، رسوم بيانية ثلاثية الأبعاد، جسيمات وعارض نماذج. تتوقف خارج الشاشة، وتعرض إطاراً ثابتاً عند تقليل الحركة، ولها بديل دون WebGL.

الإصدار

0.1.0

حجم التنزيل

13 kB

الحجم بعد التثبيت

46 kB

الرخصة

MIT

الاعتماديات المطلوبة

react · react-dom · three ≥ 0.160

import { Globe3D } from '@pelagic-ui/three';

<Globe3D
  label="Our offices"
  markers={[{ lat: 24.7, lng: 46.7, label: 'Riyadh' }]}
/>

مسارات التصدير

أيقونات أصلية على شبكة 24px بأنماط الخط والثنائي والمصمت. مكونات قابلة للتجزئة لكل إطار، ومكوّن ويب، وملف SVG مجمّع. الأسهم تنعكس في RTL.

الإصدار

0.1.0

حجم التنزيل

85 kB

الحجم بعد التثبيت

594 kB

الرخصة

MIT

الاعتماديات المطلوبة

react · vue · svelte · @angular/core · astro · react-native-svg (optional)

import { SearchIcon, BellIcon } from '@pelagic-ui/icons/react';

<SearchIcon />
<BellIcon variant="duotone" size={20} title="Notifications" />

مسارات التصدير

24 مشهداً أصلياً — لا بيانات، لا نتائج، غير متصل، 404، نجاح وغيرها — مرسومة بمتغيرات CSS فتتلوّن مع كل ثيم ولون علامة.

الإصدار

0.1.0

حجم التنزيل

27 kB

الحجم بعد التثبيت

197 kB

الرخصة

MIT

الاعتماديات المطلوبة

react · vue · svelte · @angular/core · react-native-svg (optional)

import { EmptyState } from '@pelagic-ui/react';
import { NoResultsIllustration } from '@pelagic-ui/illustrations/react';

<EmptyState
  illustration={<NoResultsIllustration />}
  title="No results"
  description="Try a different search."
/>

مسارات التصدير

الأساس المشترك لكل الحزم: رموز التصميم، CSS لكل المكونات، 21 ثيماً، createTheme() لألوان العلامة، أوضاع العرض لإمكانية الوصول، محرّك الحركة ومحرّك الصوت.

الإصدار

0.1.0

حجم التنزيل

202 kB

الحجم بعد التثبيت

666 kB

الرخصة

MIT

الاعتماديات المطلوبة

none

import '@pelagic-ui/core/style.css';
import { applyTheme, createTheme, applyCustomTheme } from '@pelagic-ui/core/theme';
import { applyA11yPrefs } from '@pelagic-ui/core/a11y-prefs';

applyTheme({ mode: 'dark', accent: 'teal', shape: 'round' });
applyCustomTheme(createTheme({ primary: '#ff6a00' }));
applyA11yPrefs({ fontScale: 1.25, motion: 'reduce' });

مسارات التصدير

مقارنة سريعة

أي حزمة تحتاج؟ اختر حسب منصّتك.

الأحجام مقيسة من بناء 0.1.0 باستخدام npm pack؛ حجم Flutter هو شيفرة Dart في lib/.