ar-design 0.2.97 → 0.2.99

package/README.md

@@ -0,0 +1,223 @@
+# AR Design
+
+[![Version](https://img.shields.io/npm/v/ar-design.svg)](https://www.npmjs.com/package/ar-design)
+[![License](https://img.shields.io/npm/l/ar-design.svg)](https://github.com/kaancetin-f/ar-design/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.5.4-blue.svg)](https://www.typescriptlang.org/)
+
+AR Design, React ve Next.js uygulamaları için geliştirilmiş modern, esnek ve kullanıcı dostu bir UI kütüphanesidir. TypeScript ile yazılmış olup, kapsamlı bileşen koleksiyonu ve özelleştirilebilir tasarım sistemi sunar.
+
+## 🚀 Özellikler
+
+- **Modern Tasarım**: Güncel tasarım trendlerine uygun, temiz ve minimal arayüz
+- **TypeScript Desteği**: Tam TypeScript desteği ile tip güvenliği
+- **Responsive Tasarım**: Tüm cihazlarda mükemmel görünüm
+- **Özelleştirilebilir**: CSS değişkenleri ile kolay özelleştirme
+- **Erişilebilirlik**: WCAG standartlarına uygun bileşenler
+- **Performans**: Optimize edilmiş bundle boyutu ve hızlı render
+- **Modüler Yapı**: İhtiyacınız olan bileşenleri ayrı ayrı import edebilme
+
+## 📦 Kurulum
+
+```bash
+npm install ar-design
+```
+
+veya
+
+```bash
+yarn add ar-design
+```
+
+## 🔧 Gereksinimler
+
+- React >= 18.0.0
+- React DOM >= 18.0.0
+
+## 🎯 Hızlı Başlangıç
+
+```tsx
+import { Button, Input, Card } from 'ar-design';
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <Input placeholder="Adınızı girin" />
+        <Button variant="filled" color="primary">
+          Gönder
+        </Button>
+      </Card>
+    </div>
+  );
+}
+```
+
+## 📚 Bileşenler
+
+### Form Elemanları
+
+- **Button** - Çoklu varyant ve boyut seçenekleri
+- **ButtonAction** - Aksiyon butonları
+- **ButtonGroup** - Buton grupları
+- **Checkbox** - Onay kutuları
+- **DatePicker** - Tarih seçici
+- **Input** - Metin giriş alanları
+- **InputTag** - Etiket giriş alanları
+- **Radio** - Radyo butonları
+- **Select** - Açılır liste
+- **Switch** - Anahtar düğmeleri
+- **TextEditor** - Zengin metin editörü
+- **Upload** - Dosya yükleme
+
+### Veri Görüntüleme
+
+- **Card** - Kart bileşenleri
+- **Chip** - Etiket bileşenleri
+- **Divider** - Ayırıcı çizgiler
+- **DnD** - Sürükle-bırak
+- **Paper** - Kağıt bileşenleri
+- **SyntaxHighlighter** - Kod vurgulayıcı
+- **Table** - Tablo bileşenleri
+- **Tabs** - Sekme bileşenleri
+- **Typography** - Tipografi bileşenleri
+
+### Geri Bildirim
+
+- **Alert** - Uyarı mesajları
+- **Drawer** - Çekmece bileşenleri
+- **Modal** - Modal pencereler
+- **Popover** - Açılır ipuçları
+- **Progress** - İlerleme çubukları
+- **Tooltip** - İpucu balonları
+
+### Navigasyon
+
+- **Breadcrumb** - Gezinti kırıntıları
+- **Menu** - Menü bileşenleri
+- **Steps** - Adım göstergeleri
+
+### Düzen
+
+- **Layout** - Sayfa düzeni
+- **Grid** - Izgara sistemi
+
+## 📖 Detaylı Kullanım Kılavuzu
+
+Bileşenlerin detaylı kullanım örnekleri için aşağıdaki dokümantasyon dosyalarını inceleyin:
+
+- [Form Bileşenleri](./docs/form-components.md) - Button, Input, Select, DatePicker vb.
+- [Veri Görüntüleme Bileşenleri](./docs/data-display-components.md) - Table, Card, Typography vb.
+- [Geri Bildirim Bileşenleri](./docs/feedback-components.md) - Alert, Modal, Progress vb.
+- [Navigasyon Bileşenleri](./docs/navigation-components.md) - Menu, Breadcrumb, Steps vb.
+- [Düzen Bileşenleri](./docs/layout-components.md) - Layout, Grid vb.
+- [Grafik Bileşenleri](./docs/chart-components.md) - Pie Chart vb.
+- [Ortak Özellikler](./docs/common-properties.md) - Varyantlar, renkler, boyutlar vb.
+
+## 🎨 Tema ve Özelleştirme
+
+AR Design, CSS değişkenleri kullanarak kolay özelleştirme imkanı sunar:
+
+```css
+:root {
+  --primary: #007bff;
+  --secondary: #6c757d;
+  --success: #28a745;
+  --warning: #ffc107;
+  --danger: #dc3545;
+  --border-radius: 0.5rem;
+}
+```
+
+## 🔧 Geliştirme
+
+### Projeyi Klonlama
+
+```bash
+git clone https://github.com/kaancetin-f/ar-design.git
+cd ar-design
+npm install
+```
+
+### Build İşlemi
+
+```bash
+npm run build
+```
+
+### CSS Loader
+
+```bash
+npm run css-loader
+```
+
+## 📦 Modüler Import
+
+AR Design, modüler import desteği sunar:
+
+```tsx
+// Tüm bileşenler
+import { Button, Input, Card } from 'ar-design';
+
+// Sadece belirli kategoriler
+import { Button, Input } from 'ar-design';
+
+// Servis ve yardımcı fonksiyonlar
+import { Api } from 'ar-design/@service';
+import { Config } from 'ar-design/@config';
+import { useNotification } from 'ar-design/@hooks';
+
+// Stil dosyaları
+import 'ar-design/@styles';
+```
+
+## 🌍 Çoklu Dil Desteği
+
+AR Design, çoklu dil desteği sunar:
+
+```tsx
+import { LanguageProvider } from 'ar-design/@config';
+
+function App() {
+  return (
+    <LanguageProvider language="tr">
+      {/* Uygulama içeriği */}
+    </LanguageProvider>
+  );
+}
+```
+
+## 📄 Lisans
+
+Bu proje [MIT Lisansı](LICENSE) altında lisanslanmıştır.
+
+## 👨‍💻 Geliştirici
+
+**Kaan ÇETİN**
+
+- GitHub: [@kaancetin-f](https://github.com/kaancetin-f)
+- NPM: [ar-design](https://www.npmjs.com/package/ar-design)
+
+## 🤝 Katkıda Bulunma
+
+1. Bu repository'yi fork edin
+2. Feature branch oluşturun (`git checkout -b feature/amazing-feature`)
+3. Değişikliklerinizi commit edin (`git commit -m 'Add some amazing feature'`)
+4. Branch'inizi push edin (`git push origin feature/amazing-feature`)
+5. Pull Request oluşturun
+
+## 📝 Changelog
+
+Detaylı değişiklik geçmişi için [CHANGELOG.md](CHANGELOG.md) dosyasını inceleyin.
+
+## 🐛 Hata Bildirimi
+
+Hata bildirimi için [GitHub Issues](https://github.com/kaancetin-f/ar-design/issues) sayfasını kullanın.
+
+## 📞 Destek
+
+Sorularınız için:
+- GitHub Issues: [Issues](https://github.com/kaancetin-f/ar-design/issues)
+
+---
+
+⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!

package/dist/assets/css/components/data-display/diagram/styles.css

@@ -0,0 +1,113 @@
+.ar-diagram {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+
+  > .content {
+    position: absolute;
+    inset: 0;
+    background-color: var(--gray-100);
+    background-image: radial-gradient(circle, var(--gray-400) 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-repeat: repeat;
+    height: 100%;
+    border: 1px solid var(--gray-200);
+    cursor: grab;
+    overflow: hidden;
+    z-index: 1;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    > .nodes-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      > .edges {
+        position: absolute;
+        inset: 0;
+
+        > .edge,
+        .edge-temp {
+          position: absolute;
+          overflow: visible;
+        }
+      }
+
+      > .nodes {
+        .node {
+          position: absolute;
+          background-color: var(--white);
+          padding: 0.5rem 1rem;
+          border-radius: var(--border-radius-sm);
+          box-shadow: 0px 10px 5px -5px rgba(var(--black-rgb), 0.1);
+          cursor: grab;
+          user-select: none;
+
+          &:active {
+            cursor: grabbing;
+          }
+
+          > .port {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--white);
+            width: 0.5rem;
+            height: 0.5rem;
+            border: solid 1px var(--purple-500);
+            border-radius: var(--border-radius-pill);
+            z-index: 2;
+            cursor: crosshair;
+
+            &.top {
+              top: -5px;
+            }
+
+            &.bottom {
+              bottom: -5px;
+            }
+          }
+
+          > span {
+            color: var(--gray-700);
+            font-family: var(--system);
+            text-wrap: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  > .zoom-buttons {
+    position: absolute;
+    right: 2rem;
+    bottom: 2rem;
+    background-color: var(--white);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--border-radius-sm);
+    box-shadow: 0px 10px 5px -5px rgba(var(--black-rgb), 0.1);
+    z-index: 5;
+    user-select: none;
+
+    .zoom-percent {
+      background-color: var(--gray-100);
+      padding: 0.4rem 0;
+      width: 3rem;
+      border-radius: var(--border-radius-sm);
+      font-family: var(--system);
+      text-align: center;
+    }
+  }
+}
+
+@keyframes moveLine {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 0;
+  }
+}

package/dist/assets/css/components/feedback/tooltip/styles.css

@@ -22,6 +22,7 @@
   gap: 0.5rem;
   color: var(--white);
   font-size: 0.75rem;
+  font-family: var(--system);
   text-wrap: nowrap;
 }
 .ar-tooltip > .text > .bullet {

package/dist/assets/css/core/variants/borderless.css

@@ -1,7 +1,7 @@
 /* #region BLUE */
 .borderless:not(.disabled) {
   &.blue {
-    color: var(--blue-500);
+    color: var(--blue-500-500);
 
     &.active {
       animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
@@ -14,16 +14,15 @@ iframe.borderless:not(.disabled) {
   &.blue {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.blue { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--blue-500);
       color: var(--white)
     }
@@ -35,7 +34,7 @@ button.borderless:not(.disabled) {
 /* #region PURPLE */
 .borderless:not(.disabled) {
   &.purple {
-    color: var(--purple-500);
+    color: var(--purple-500-500);
 
     &.active {
       animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
@@ -48,16 +47,15 @@ iframe.borderless:not(.disabled) {
   &.purple {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.purple { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--purple-500);
       color: var(--white)
     }
@@ -69,7 +67,7 @@ button.borderless:not(.disabled) {
 /* #region PINK */
 .borderless:not(.disabled) {
   &.pink {
-    color: var(--pink-500);
+    color: var(--pink-500-500);
 
     &.active {
       animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
@@ -82,16 +80,15 @@ iframe.borderless:not(.disabled) {
   &.pink {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.pink { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--pink-500);
       color: var(--white)
     }
@@ -103,7 +100,7 @@ button.borderless:not(.disabled) {
 /* #region RED */
 .borderless:not(.disabled) {
   &.red {
-    color: var(--red-500);
+    color: var(--red-500-500);
 
     &.active {
       animation: clicked-red ease-in-out 750ms 0s 1 normal both;
@@ -116,16 +113,15 @@ iframe.borderless:not(.disabled) {
   &.red {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.red { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--red-500);
       color: var(--white)
     }
@@ -137,7 +133,7 @@ button.borderless:not(.disabled) {
 /* #region ORANGE */
 .borderless:not(.disabled) {
   &.orange {
-    color: var(--orange-500);
+    color: var(--orange-500-500);
 
     &.active {
       animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
@@ -150,16 +146,15 @@ iframe.borderless:not(.disabled) {
   &.orange {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.orange { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--orange-500);
       color: var(--white)
     }
@@ -171,7 +166,7 @@ button.borderless:not(.disabled) {
 /* #region YELLOW */
 .borderless:not(.disabled) {
   &.yellow {
-    color: var(--yellow-500);
+    color: var(--yellow-500-500);
 
     &.active {
       animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
@@ -184,16 +179,15 @@ iframe.borderless:not(.disabled) {
   &.yellow {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.yellow { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--yellow-500);
       color: var(--white)
     }
@@ -205,7 +199,7 @@ button.borderless:not(.disabled) {
 /* #region GREEN */
 .borderless:not(.disabled) {
   &.green {
-    color: var(--green-500);
+    color: var(--green-500-500);
 
     &.active {
       animation: clicked-green ease-in-out 750ms 0s 1 normal both;
@@ -218,16 +212,15 @@ iframe.borderless:not(.disabled) {
   &.green {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.green { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--green-500);
       color: var(--white)
     }
@@ -239,7 +232,7 @@ button.borderless:not(.disabled) {
 /* #region TEAL */
 .borderless:not(.disabled) {
   &.teal {
-    color: var(--teal-500);
+    color: var(--teal-500-500);
 
     &.active {
       animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
@@ -252,16 +245,15 @@ iframe.borderless:not(.disabled) {
   &.teal {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.teal { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--teal-500);
       color: var(--white)
     }
@@ -273,7 +265,7 @@ button.borderless:not(.disabled) {
 /* #region CYAN */
 .borderless:not(.disabled) {
   &.cyan {
-    color: var(--cyan-500);
+    color: var(--cyan-500-500);
 
     &.active {
       animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
@@ -286,16 +278,15 @@ iframe.borderless:not(.disabled) {
   &.cyan {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.cyan { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--cyan-500);
       color: var(--white)
     }
@@ -307,7 +298,7 @@ button.borderless:not(.disabled) {
 /* #region GRAY */
 .borderless:not(.disabled) {
   &.gray {
-    color: var(--gray-500);
+    color: var(--gray-500-500);
 
     &.active {
       animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
@@ -320,16 +311,15 @@ iframe.borderless:not(.disabled) {
   &.gray {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--white);
+      box-shadow: 0 0 0 3.5px rgba(var(--white-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.gray { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--gray-500);
       color: var(--white)
     }
@@ -341,7 +331,7 @@ button.borderless:not(.disabled) {
 /* #region LIGHT */
 .borderless:not(.disabled) {
   &.light {
-    color: var(--light-500);
+    color: var(--gray-700-500);
 
     &.active {
       animation: clicked-light ease-in-out 750ms 0s 1 normal both;
@@ -354,18 +344,17 @@ iframe.borderless:not(.disabled) {
   &.light {
     &:focus,
     &.focused {
-      border-color: var(--);
-      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+      border-color: var(--gray-700);
+      box-shadow: 0 0 0 3.5px rgba(var(--gray-700-rgb), 0.25);
     }
   }
 }
 
 button.borderless:not(.disabled) {
   &.light { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--light-500);
-      color: var(--white)
+      color: var(--gray-700)
     }
   }
 }