ar-design 0.3.30 → 0.3.31

package/README.md

@@ -33,158 +33,69 @@ yarn add ar-design
 - 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
+### Data Display (Veri Görüntüleme)
 
-### Düzen
+[📖 Detaylı Kullanım Kılavuzu](./docs/data-display.md)
 
-- **Layout** - Sayfa düzeni
-- **Grid** - Izgara sistemi
+- **Card**
+- **Chip**
+- **Diagram**
+- **Divider**
+- **DnD (Drag and Drop)**
+- **Grid System**
+- **Kanban Board**
+- **Paper**
+- **Table**
+- **Tabs**
+- **Typography**
 
-## 📖 Detaylı Kullanım Kılavuzu
+### (Feedback) Geri Bildirim
 
-Bileşenlerin detaylı kullanım örnekleri için aşağıdaki dokümantasyon dosyalarını inceleyin:
+[📖 Detaylı Kullanım Kılavuzu](./docs/feedback-components.md)
 
-- [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.
+- **Alert**
+- **Drawer**
+- **Loading**
+- **Modal**
+- **Notification**
+- **Popover**
+- **Popup**
+- **Progress**
+- **Tooltip**
 
-## 🎨 Tema ve Özelleştirme
+### (Form) Form Elemanları
 
-AR Design, CSS değişkenleri kullanarak kolay özelleştirme imkanı sunar:
+[📖 Detaylı Kullanım Kılavuzu](./docs/form-components.md)
 
-```css
-:root {
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --border-radius: 0.5rem;
-}
-```
+- **Button**
+- **Button Action**
+- **Button Group**
+- **Checkbox**
+- **Date Picker**
+- **Input**
+- **Input Number**
+- **Input Tag**
+- **Radio**
+- **Select**
+- **Switch**
+- **TextEditor**
+- **Upload**
 
-## 🔧 Geliştirme
+### Layout (Düzen)
 
-### Projeyi Klonlama
+[📖 Detaylı Kullanım Kılavuzu](./docs/layout-components.md)
 
-```bash
-git clone https://github.com/kaancetin-f/ar-design.git
-cd ar-design
-npm install
-```
+- **Layout**
 
-### 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:
+### Navigasyon
 
-```tsx
-import { LanguageProvider } from 'ar-design/@config';
+[📖 Detaylı Kullanım Kılavuzu](./docs/navigation.md)
 
-function App() {
-  return (
-    <LanguageProvider language="tr">
-      {/* Uygulama içeriği */}
-    </LanguageProvider>
-  );
-}
-```
+- **Menu**
+- **Pagination**
+- **Steps**
 
 ## 📄 Lisans
 
@@ -205,10 +116,6 @@ Bu proje [MIT Lisansı](LICENSE) altında lisanslanmıştır.
 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.
@@ -216,6 +123,7 @@ Hata bildirimi için [GitHub Issues](https://github.com/kaancetin-f/ar-design/is
 ## 📞 Destek
 
 Sorularınız için:
+
 - GitHub Issues: [Issues](https://github.com/kaancetin-f/ar-design/issues)
 
 ---

package/dist/assets/css/components/data-display/dnd/dnd.css

@@ -4,6 +4,7 @@
   gap: 1rem 0;
 
   > .item {
+    display: flex;
     position: relative;
     min-width: 1px;
     cursor: move;

package/dist/assets/css/components/data-display/grid-system/column/styles.css

@@ -1,6 +1,21 @@
+.row > [class^="col"].left,
+.row > [class*="col"].left,
+.row > [class^="col"].center,
+.row > [class*="col"].center,
 .row > [class^="col"].right,
 .row > [class*="col"].right {
   position: relative;
   display: flex;
-  justify-content: right;
+}
+.row > [class^="col"].left,
+.row > [class*="col"].left {
+  justify-content: flex-start;
+}
+.row > [class^="col"].center,
+.row > [class*="col"].center {
+  justify-content: center;
+}
+.row > [class^="col"].right,
+.row > [class*="col"].right {
+  justify-content: flex-end;
 }

package/dist/components/data-display/card/IProps.d.ts

@@ -4,25 +4,7 @@ interface IProps extends IChildren, IVariant<{
 }>, IStatus<{
     component: "card";
 }> {
-    /**
-     * Kart başlığı.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Card title="Kullanıcı Bilgileri" />
-     * ```
-     */
     title?: string;
-    /**
-     * Kartın sağ üst köşesinde gösterilecek aksiyonlar (buton, menü vb.).
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Card actions={<button>Düzenle</button>} />
-     * ```
-     */
     actions?: React.JSX.Element;
 }
 export default IProps;

package/dist/components/data-display/chip/IProps.d.ts

@@ -1,14 +1,5 @@
 import { IBorder, IColors, IIcon, IVariant } from "../../../libs/types/IGlobalProps";
 interface IProps extends IVariant, IColors, IBorder, IIcon {
-    /**
-     * Bileşende gösterilecek metin.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Chip text="..." />
-     * ```
-     */
     text: string;
 }
 export default IProps;

package/dist/components/data-display/diagram/IProps.d.ts

@@ -1,48 +1,6 @@
-export type NodeData = {
-    id: number;
-    position: {
-        x: number;
-        y: number;
-    };
-    data: {
-        label: string;
-    };
-};
-type Port = "top" | "bottom";
-export type EdgeData = {
-    id: number;
-    from: {
-        id: number;
-        port: Port;
-    };
-    to: {
-        id: number;
-        port: Port;
-    };
-};
+import { EdgeData, NodeData } from "../../../libs/types";
 interface IProps {
-    /**
-     * Sürüklenebilir liste verisi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Diagram data={[{ id: 1, ... }, { id: 2, ... }]} />
-     * ```
-     */
     nodes: NodeData[];
-    /**
-     * Her bir öğenin nasıl render edileceğini tanımlar.
-     *
-     * - `item`: Mevcut öğe.
-     * - `index`: Öğenin listedeki sırası.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Diagram renderItem={(item) => <div>{item.label}</div>} />
-     * ```
-     */
     edges: EdgeData[];
 }
 export default IProps;

package/dist/components/data-display/dnd/IProps.d.ts

@@ -1,40 +1,8 @@
 import React from "react";
 interface IProps<T> {
-    /**
-     * Sürüklenebilir liste verisi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DnD data={[{ id: 1, ... }, { id: 2, ... }]} />
-     * ```
-     */
     data: T[];
-    /**
-     * Her bir öğenin nasıl render edileceğini tanımlar.
-     *
-     * - `item`: Mevcut öğe.
-     * - `index`: Öğenin listedeki sırası.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DnD renderItem={(item) => <div>{item.label}</div>} />
-     * ```
-     */
     renderItem: (item: T, index: number) => React.JSX.Element;
     columnKey?: string;
-    /**
-     * Sıralama değiştiğinde tetiklenen olay.
-     *
-     * - `data`: Yeni sıralanmış öğeler.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <DnD onChange={(data) => console.log("Yeni sıra:", data)} />
-     * ```
-     */
     onChange?: (data: T[]) => void;
     confing?: {
         isMoveIcon: boolean;

package/dist/components/data-display/dnd/index.js

@@ -26,7 +26,7 @@ const DnD = function ({ data, renderItem, columnKey, onChange, confing = { isMov
                     _fromColumn = columnKey ?? undefined;
                 }
                 // Korumaya başla.
-                if (_arDnD.current) {
+                if (_arDnD.current && columnKey && _fromColumn !== columnKey) {
                     _arDnD.current.childNodes.forEach((item) => {
                         const placeholder = document.createElement("div");
                         placeholder.setAttribute("data-id", "placeholder");

package/dist/components/data-display/grid-system/column/IProps.d.ts

@@ -1,33 +1,6 @@
+import { IChildren } from "../../../../libs/types/IGlobalProps";
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface IProps {
-    /**
-     * Kolon içinde gösterilecek içerik.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Column>
-     *   <p>İçerik</p>
-     * </Column>
-     * ```
-     */
-    children: React.ReactNode;
-    /**
-     * Kolon genişliğini belirler.
-     *
-     * - Sayı olarak verilirse tüm cihazlarda aynı genişlik uygulanır.
-     * - Obje olarak verilirse, farklı ekran boyutlarına göre özel kolon genişlikleri tanımlanabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Column size={6}>...</Column>
-     * ```
-     * veya
-     * ```jsx
-     * <Column size={{ xl: 3, md: 6, xs: 12 }}>...</Column>
-     * ```
-     */
+interface IProps extends IChildren {
     size?: {
         xl?: Column;
         lg?: Column;
@@ -35,19 +8,6 @@ interface IProps {
         sm?: Column;
         xs?: Column;
     } | number;
-    /**
-     * İçeriğin yatay hizalamasını belirler.
-     *
-     * - `left`: İçerik sola hizalanır.
-     * - `center`: İçerik yatayda ortalanır.
-     * - `right`: İçerik sağa hizalanır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Column align="center">...</Column>
-     * ```
-     */
     align?: "left" | "center" | "right";
 }
 export default IProps;

package/dist/components/data-display/kanban-board/IProps.d.ts

@@ -1,7 +1,7 @@
 import { KanbanBoardColumnType } from "../../../libs/types";
-interface IProps<T> {
+interface IProps<T, TColumnProperties> {
     trackBy: (item: T) => string;
-    columns: KanbanBoardColumnType<T>[];
-    onChange?: (item: T, columnKey: string, hoverIndex: number) => void;
+    columns: KanbanBoardColumnType<T, TColumnProperties>[];
+    onChange?: (item: T, columnKey: string, columnProperties: TColumnProperties, hoverIndex: number) => void;
 }
 export default IProps;

package/dist/components/data-display/kanban-board/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
-declare const KanbanBoard: <T>({ trackBy, columns, onChange }: IProps<T>) => React.JSX.Element;
+declare const KanbanBoard: <T, TColumnProperties>({ trackBy, columns, onChange }: IProps<T, TColumnProperties>) => React.JSX.Element;
 export default KanbanBoard;

package/dist/components/data-display/kanban-board/index.js

@@ -27,7 +27,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange }) {
                 const boardItems = [...board.items];
                 const safeIndex = Math.min(_hoverItemIndex.current ?? Infinity, boardItems.length); // son elemandan fazla olmasın.
                 boardItems.splice(safeIndex, 0, item);
-                onChange?.(item, board.key, safeIndex);
+                onChange?.(item, board.key, board.columnProperties, safeIndex);
                 return {
                     ...board,
                     items: boardItems,

package/dist/components/data-display/paper/IProps.d.ts

@@ -0,0 +1,6 @@
+import { IChildren } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren {
+    title?: string;
+    action?: React.ReactNode;
+}
+export default IProps;

package/dist/components/data-display/paper/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-display/paper/index.d.ts

@@ -1,8 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/data-display/paper/styles.css";
-declare const Paper: React.FC<{
-    children: React.ReactNode;
-    title?: string;
-    action?: React.ReactNode;
-}>;
+import IProps from "./IProps";
+declare const Paper: React.FC<IProps>;
 export default Paper;

package/dist/components/data-display/paper/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import Typography from "../typography";
 import "../../../assets/css/components/data-display/paper/styles.css";
 const { Title } = Typography;
-const Paper = ({ children, title, action, }) => {
+const Paper = ({ children, title, action }) => {
     return (React.createElement("div", { className: "ar-paper" },
         (title || action) && (React.createElement("div", { className: "header" },
             title && React.createElement(Title, { Level: "h3" }, title),

package/dist/components/data-display/table/IProps.d.ts

@@ -4,81 +4,33 @@ import { IChildren } from "../../../libs/types/IGlobalProps";
 import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
 export type Operator = "Contains" | "DoesNotContains" | "Equals" | "DoesNotEquals" | "BeginsWith" | "EndsWith" | "Blank" | "NotBlank";
 export type FilterValue = {
-    /**
-     * Filtre değeri olabilir: string, number veya boolean.
-     */
     value: string | number | boolean;
-    /**
-     * Uygulanacak filtre operatörü.
-     */
     operator: FilterOperator;
 };
 export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
 export type Config = {
-    /**
-     * Verilerin sunucu tarafında mı işlendiğini belirtir.
-     */
     isServerSide?: boolean;
-    /**
-     * Tablo içinde arama özelliğinin aktif olup olmadığı.
-     */
     isSearchable?: boolean;
-    /**
-     * Kaydırma özelliği ve maksimum yüksekliği.
-     */
     scroll?: {
-        /**
-         * Maksimum tablo yüksekliği (piksel cinsinden).
-         */
         maxHeight: number;
     };
-    /**
-     * Alt satır (subrow) özellikleri.
-     */
     subrow?: {
-        /**
-         * Alt satırın otomatik açılıp açılmayacağı.
-         */
         openAutomatically?: boolean;
-        /**
-         * Alt satırı açmak için seçici (CSS selector) tanımı.
-         */
         selector?: string;
-        /**
-         * Alt satır açma butonunun gösterilip gösterilmeyeceği.
-         */
         button?: boolean;
     };
     isTreeView?: boolean;
 };
 type ImportActionType = {
-    /**
-     * Import butonunun üzerine gelindiğinde gösterilecek açıklayıcı metin.
-     */
     tooltip: string;
     title?: string;
     message?: string;
     buttonText?: string;
-    /**
-     * Kabul edilen dosya türleri.
-     */
     allowedTypes?: MimeTypes[];
-    /**
-     * Butonun önünde gösterilecek içerik.
-     */
     prefixItem?: React.ReactNode;
-    /**
-     * Butonun arkasında gösterilecek içerik.
-     */
     suffixItem?: React.ReactNode;
-    /**
-     * Dosya import işlemi tetiklendiğinde çağrılan fonksiyon.
-     *
-     * @param formData - Dosyaları içeren FormData nesnesi (undefined olabilir).
-     * @param files - Seçilen dosyalar dizisi.
-     */
     onClick: (formData: FormData | undefined, files: File[], base64: string[]) => void;
 };
 type ExportActionType = {
@@ -89,13 +41,7 @@ type ExportActionType = {
     onClick: () => void;
 };
 type CreateActionType = {
-    /**
-     * Create butonunun üzerine gelindiğinde gösterilecek açıklayıcı metin.
-     */
     tooltip: string;
-    /**
-     * Butona tıklanıldığında tetiklenen fonksiyon.
-     */
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 type DeleteActionType = {
@@ -106,84 +52,25 @@ type DeleteActionType = {
 };
 interface IProps<T> extends IChildren {
     trackBy?: (item: T) => string;
-    /**
-     * Tablo başlığı.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Table title="..." />
-     * ```
-     */
     title?: string;
-    /**
-     * Tabloya ait açıklama veya alt metin.
-     */
     description?: string;
-    /**
-     * Tabloya verilecek veri dizisi.
-     */
     data: T[];
-    /**
-     * Tablo kolonlarının tanımı.
-     */
     columns: TableColumnType<T>[];
-    /**
-     * Tablo üzerindeki eylem butonları.
-     */
     actions?: {
-        /**
-         * Dosya import işlemi için buton ayarları.
-         */
         import?: ImportActionType;
         export?: ExportActionType;
-        /**
-         * Yeni kayıt oluşturma butonu ayarları.
-         */
         create?: CreateActionType;
         delete?: DeleteActionType;
     };
-    /**
-     * Seçili satırlar değiştiğinde çağrılan fonksiyon.
-     *
-     * @param selectionItems - Seçilen satırların dizisi.
-     */
     selections?: (selectionItems: T[]) => void;
-    /**
-     * Daha önce seçilmiş satırlar.
-     */
     previousSelections?: T[];
-    /**
-     * Arama parametreleri ve sorgu değiştiğinde çağrılan fonksiyon.
-     *
-     * @param params - Arama parametreleri veya null.
-     * @param query - Arama sorgu metni.
-     * @param operator - Kullanılan filtre operatörü.
-     */
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
     onEditable?: (item: T, index: number) => void;
-    /**
-     * Sayfalama ayarları.
-     */
     pagination?: {
-        /**
-         * Toplam kayıt sayısı.
-         */
         totalRecords: number;
-        /**
-         * Sayfa başına gösterilecek kayıt sayısı.
-         */
         perPage: number;
-        /**
-         * Sayfa değiştirildiğinde tetiklenen fonksiyon.
-         *
-         * @param currentPage - Yeni sayfa numarası.
-         */
         onChange?: (currentPage: number) => void;
     };
-    /**
-     * Tablo yapılandırma ayarları.
-     */
     config?: Config;
 }
 export default IProps;

package/dist/components/data-display/tabs/IProps.d.ts

@@ -1,58 +1,9 @@
 import { TabProps } from "../../../libs/types";
 interface IProps {
-    /**
-     * İsim benzersiz olmalıdır. Sayfa yenilenmesinde seçimin değişmemesi için kullanılmaktadır.
-     */
     name: string;
-    /**
-     * Tab'ları temsil eden dizi.
-     * Her bir eleman `TabProps` tipinde olmalıdır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Component
-     *   tabs={[
-     *     { title: "Ana Sayfa", content: <HomePage />, config: { canBeClosed: false } },
-     *     { title: "Profil", content: <Profile />, config: { canBeClosed: true } },
-     *   ]}
-     * />
-     * ```
-     */
     tabs: TabProps[];
-    /**
-     * Aktif olarak seçili olan tab'ın indeksi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Tabs activeTab={0} />
-     * ```
-     */
     activeTab?: number;
-    /**
-     * Tab değiştirildiğinde çağrılan fonksiyon.
-     *
-     * @param currentTab - Yeni seçilen tab'ın indeksi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Tabs onChange={(currentTab) => console.log(currentTab)} />
-     * ```
-     */
     onChange?: (currentTab: number) => void;
-    /**
-     * Tab kapatıldığında çağrılan fonksiyon.
-     *
-     * @param closeTab - Kapatılan tab'ın indeksi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Tabs onClose={(closeTab) => console.log(closeTab)} />
-     * ```
-     */
     onClose?: (closeTab: number) => void;
 }
 export default IProps;

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -1,31 +1,7 @@
 import { ParagraphColors, Status } from "../../../../libs/types";
 import { IChildren, ISize, IUpperCase } from "../../../../libs/types/IGlobalProps";
 interface IProps extends IChildren, ISize, IUpperCase {
-    /**
-     * Paragraf metninin rengi.
-     *
-     * `ParagraphColors` veya `Status` tipi değer alabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Paragraph color="error" />
-     * ```
-     */
     color?: ParagraphColors | Status;
-    /**
-     * Metnin yatay hizalamasını belirler.
-     *
-     * - `left`: Metin sola hizalanır.
-     * - `center`: Metin ortalanır.
-     * - `right`: Metin sağa hizalanır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Paragraph align="left" />
-     * ```
-     */
     align?: "left" | "center" | "right";
 }
 export default IProps;

package/dist/components/data-display/typography/title/IProps.d.ts

@@ -1,53 +1,7 @@
 import { IChildren, IUpperCase } from "../../../../libs/types/IGlobalProps";
 interface IProps extends IChildren, IUpperCase, React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * Başlığın HTML seviyesini belirler.
-     *
-     * - `h1` en büyük başlıktır, `h6` ise en küçük.
-     * - Semantik anlamda uygun başlık seviyeleri kullanılması önerilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Title Level="h2" />
-     * ```
-     */
     Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /**
-     * Başlık metninin yatay hizalamasını belirler.
-     *
-     * - `"left"`: Metin sola hizalanır.
-     * - `"center"`: Metin ortalanır.
-     * - `"right"`: Metin sağa hizalanır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Title align="center" />
-     * ```
-     */
     align?: "left" | "center" | "right";
-    /**
-     * Başlık metninin boyutunu belirler.
-     *
-     * Aşağıdaki CSS'e karşılık gelen değerleri destekler:
-     * - `"xx-small"` → Çok çok küçük
-     * - `"x-small"` → Çok küçük
-     * - `"small"` → Küçük
-     * - `"medium"` → Orta (varsayılan)
-     * - `"large"` → Büyük
-     * - `"x-large"` → Çok büyük
-     * - `"xx-large"` → Çok çok büyük
-     * - `"xxx-large"` → En büyük
-     * - `"smaller"` → Ebeveyn öğeye göre daha küçük
-     * - `"larger"` → Ebeveyn öğeye göre daha büyük
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Title size="x-large" />
-     * ```
-     */
     size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";
 }
 export default IProps;

package/dist/components/form/text-editor/index.js

@@ -213,7 +213,7 @@ validation, }) => {
     }, []);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
         React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
-        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Tooltip, { text: tooltip },
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }, index) => (React.createElement(Tooltip, { key: `${command}-${index}`, text: tooltip },
             React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "light", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
         validation?.text && React.createElement("span", { className: "validation" }, validation.text),

package/dist/libs/types/index.d.ts

@@ -58,9 +58,10 @@ export type TabProps = {
         canBeClosed: boolean;
     };
 };
-export type KanbanBoardColumnType<T> = {
+export type KanbanBoardColumnType<T, TColumnProperties> = {
     title: string;
     key: string;
+    columnProperties: TColumnProperties;
     items: T[];
     renderItem: (item: T, index: number) => React.JSX.Element;
 };
@@ -86,3 +87,26 @@ export type PieChartDataType = {
     value: number;
     text: string;
 };
+export type NodeData = {
+    id: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        label: string;
+    };
+};
+type Port = "top" | "bottom";
+export type EdgeData = {
+    id: number;
+    from: {
+        id: number;
+        port: Port;
+    };
+    to: {
+        id: number;
+        port: Port;
+    };
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",