ar-design 0.2.61 → 0.2.63

package/dist/components/feedback/popover/IProps.d.ts

@@ -1,11 +1,79 @@
 import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps extends IChildren {
+    /**
+     * Popover başlığı.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover title="Onay Gerekiyor" />
+     * ```
+     */
     title?: string;
+    /**
+     * Popover içinde gösterilecek mesaj metni.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover message="İşlemi onaylıyor musunuz?" />
+     * ```
+     */
     message?: string;
+    /**
+     * Popover içeriği olarak gösterilecek özel React JSX elementi.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover content={<CustomContent />} />
+     * ```
+     */
     content?: React.JSX.Element;
+    /**
+     * Onay veya iptal durumunda tetiklenen geri çağırma fonksiyonu.
+     *
+     * @param confirm - Kullanıcı onay verdiyse true, iptal ettiyse false.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover onConfirm={(confirm) => console.log(confirm)} />
+     * ```
+     */
     onConfirm?: (confirm: boolean) => void;
+    /**
+     * Popover açıkken sayfa dışında bir yere tıklandığında açık kalsın mı?
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover windowBlur={true} />
+     * ```
+     */
     windowBlur?: boolean;
+    /**
+     * Popover genişliği tam genişlikte mi olacak?
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover fullWidth={true} />
+     * ```
+     */
     fullWidth?: boolean;
+    /**
+     * Buton yapılandırmaları.
+     *
+     * - `okButton`: Onay butonunda gösterilecek metin.
+     * - `cancelButton`: (Opsiyonel) İptal butonunda gösterilecek metin.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Popover config={{ buttons: { okButton: "...", cancelButton: "..." } }} />
+     * ```
+     */
     config?: {
         buttons: {
             okButton: string;

package/dist/components/feedback/progress/IProps.d.ts

@@ -1,6 +1,36 @@
 interface IProps {
+    /**
+     * İlerleme çubuğunun mevcut değeri.
+     * Genellikle 0 ile 100 arasında bir sayı olmalıdır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Progress value={75} />
+     * ```
+     */
     value: number;
+    /**
+     * İlerleme çubuğunun ters yönde dolmasını sağlar.
+     * Varsayılan olarak false'tur.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Progress value={50} reverse={true} />
+     * ```
+     */
     reverse?: boolean;
+    /**
+     * İlerleme değerinin görünür olup olmadığını belirler.
+     * Varsayılan olarak true olabilir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Progress value={30} isVisibleValue={false} />
+     * ```
+     */
     isVisibleValue?: boolean;
 }
 export default IProps;

package/dist/components/feedback/tooltip/IProps.d.ts

@@ -1,6 +1,31 @@
 import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps extends IChildren {
+    /**
+     * Gösterilecek metin veya metinler.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Tooltip text="..."><Component>...</Component></Tooltip>
+     * <Tooltip text={["...", "..."]}><Component>...</Component></Tooltip>
+     * ```
+     */
     text: string | string[];
+    /**
+     * Tooltip'in hangi yönde görüneceği.
+     *
+     * Geçerli değerler:
+     * - `top`: Üstte
+     * - `right`: Sağda
+     * - `left`: Solda
+     * - `bottom`: Altta
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Tooltip text="Bilgi" direction="right"><Component>...</Component></Tooltip>
+     * ```
+     */
     direction?: "top" | "right" | "left" | "bottom";
 }
 export default IProps;

package/dist/components/form/button/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IBorder, IIcon, ISize, IStatus, IUpperCase, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Bileşenin şekil varyantını belirtir ve genellikle sadece ikon için kullanılmalıdır.
      * İki seçenekten biri olabilir: "circle" veya "square".
@@ -16,14 +16,67 @@ interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Re
      * ```
      */
     shape?: "circle" | "square";
+    /**
+     * Bileşene açıklayıcı bir bilgi balonu (tooltip) eklemek için kullanılır.
+     *
+     * - `text`: Tooltip içerisinde gösterilecek açıklama metni.
+     * - `direction`: Tooltip’in hangi yönde görüneceğini belirtir. Varsayılan yön kullanılabilir.
+     *   - `top`: Tooltip yukarıda görünür.
+     *   - `right`: Tooltip sağda görünür.
+     *   - `left`: Tooltip solda görünür.
+     *   - `bottom`: Tooltip aşağıda görünür.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Component
+     *   tooltip={{
+     *     text: "Bu bir açıklamadır.",
+     *     direction: "top"
+     *   }}
+     * />
+     * ```
+     */
     tooltip?: {
         text: string;
         direction?: "top" | "right" | "left" | "bottom";
     };
+    /**
+     * Bileşenin konumlandırmasını belirlemek için kullanılır.
+     *
+     * - `type`: CSS `position` özelliği.
+     *   - `fixed`: Sayfa boyunca sabit konum.
+     *   - `absolute`: Üst öğeye göre konumlandırma.
+     * - `inset`: Bileşenin konumlanacağı kenar(lar).
+     *   - Örn: `["top", "left"]` => üstten ve soldan hizalanır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Component
+     *   position={{
+     *     type: "absolute",
+     *     inset: ["top", "left"]
+     *   }}
+     * />
+     * ```
+     */
     position?: {
         type: "fixed" | "absolute";
         inset: ("top" | "right" | "bottom" | "left")[];
     };
+    /**
+     * Bileşenin yatayda tam genişlikte olup olmayacağını belirtir.
+     *
+     * - `true`: Bileşen bulunduğu kapsayıcının tüm genişliğini kaplar.
+     * - `false` veya belirtilmemişse: İçeriğe göre genişlik alır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Component fullWidth />
+     * ```
+     */
     fullWidth?: boolean;
 }
 export default IProps;

package/dist/components/form/checkbox/IProps.d.ts

@@ -1,6 +1,16 @@
-import React from "react";
-import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "icon" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
+import { IBorder, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
+    /**
+     * Bileşenin başlığı veya etiket metnidir.
+     *
+     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Checkbox label="Kullanıcı Adı" />
+     * ```
+     */
     label?: string;
 }
 export default IProps;

package/dist/components/form/date-picker/Props.d.ts

@@ -1,8 +1,41 @@
-import React from "react";
-import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
+import { IBorder, ISize, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
+    /**
+     * Bileşenin başlığı veya etiket metnidir.
+     *
+     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <DatePicker label="Başlangıç Saati" />
+     * ```
+     */
     label?: string;
+    /**
+     * Bileşenin yanında bir saat (clock/time picker) bileşeni olup olmadığını belirtir.
+     *
+     * - `true`: Saat bileşeninide ekleyerek davranır.
+     * - `false` veya belirtilmemişse: Standart davranış sergiler.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <DatePicker isClock />
+     * ```
+     */
     isClock?: boolean;
+    /**
+     * Bileşenin değerinde bir değişiklik olduğunda tetiklenen olaydır.
+     *
+     * - `value`: Güncel değeri temsil eder. Genellikle string türündedir (örneğin tarih veya tarih, saat).
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <DatePicker onChange={(value) => console.log(value)} />
+     * ```
+     */
     onChange: (value: string) => void;
-} & Omit<IGlobalProps, "children" | "icon" | "upperCase" | "disabled"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size"> & IValidation;
+} & IVariant & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size">;
 export default Props;

package/dist/components/form/input/IProps.d.ts

@@ -1,14 +1,41 @@
-import React from "react";
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IGlobalProps, ISizes, IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
+import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+    /**
+     * Bileşene entegre bir buton özelliği eklemek için kullanılır.
+     *
+     * `IButtonProps` tipi ile tanımlanır ve butonun davranışlarını, metnini, tıklama olaylarını vs. içerir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Input
+     *   button={{
+     *     text: "Gönder",
+     *     onClick: () => console.log("Tıklandı"),
+     *   }}
+     * />
+     * ```
+     */
     button?: IButtonProps;
+    /**
+     * Bileşenin başına (`before`) veya sonuna (`after`) yardımcı içerikler (ek öğeler) eklemek için kullanılır.
+     *
+     * - `variant`: Stil türünü belirtir ("filled" | "outlined" | "dashed" | "borderless").
+     * - `before`: Bileşenin soluna içerik ekler (örneğin ₺, %, vb.).
+     * - `after`: Bileşenin sağına içerik ekler.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Input addon={{ variant: "outlined", before: "₺", after: "KDV" }} />
+     * ```
+     */
     addon?: {
         variant?: Variants;
         before?: string | number;
         after?: string | number;
     };
-    upperCase?: boolean;
 }
 export default IProps;

package/dist/components/form/input-tag/IProps.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { IGlobalProps, ISizes, IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
+import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
 }
 export default IProps;

package/dist/components/form/radio/IProps.d.ts

@@ -1,8 +1,29 @@
-import React from "react";
-import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 import { Status } from "../../../libs/types";
-interface IProps extends Omit<IGlobalProps, "children">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+    /**
+     * Bileşenin başlığı veya etiket metnidir.
+     *
+     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Radio label="Kullanıcı Adı" />
+     * ```
+     */
     label?: string;
+    /**
+     * Bileşenin izlenebilir bir durum göstergesi (trace) olup olmadığını belirtir.
+     *
+     * - `color`: İzleme durumunu belirtmek için kullanılır. `Status` tipiyle tanımlanır (örneğin "success", "error", "warning" gibi).
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Radio trace={{ color: "success" }} />
+     * ```
+     */
     trace?: {
         color: Status;
     };

package/dist/components/form/select/Props.d.ts

@@ -1,6 +1,28 @@
 import { Variants, Option, Status } from "../../../libs/types";
-import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
-interface IMultiple {
+import { IBorder, IDisabled, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+export interface IMultiple {
+    /**
+     * Bileşenin durum (status) ayarlarını belirtir.
+     *
+     * - `color`: Genel durum rengini belirler. `Status` tipi ile tanımlanır (örneğin "success", "error" vb.).
+     * - `selected`: Seçili öğelerin görünümüyle ilgili ayarlar.
+     *   - `variant`: Seçili öğenin stil varyantı (`Variants` tipi).
+     *   - `color`: Seçili öğenin durumu için renk (`Status` tipi).
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select
+     *   status={{
+     *     color: "warning",
+     *     selected: {
+     *       variant: "outlined",
+     *       color: "success",
+     *     },
+     *   }}
+     * />
+     * ```
+     */
     status?: {
         color?: Status;
         selected?: {
@@ -8,23 +30,112 @@ interface IMultiple {
             color?: Status;
         };
     };
+    /**
+     * Bileşenin seçtiği değerlerin listesi.
+     *
+     * Çoklu seçim için `Option` tipinden bir dizi kullanılır.
+     */
     value: Option[];
+    /**
+     * Seçimler değiştiğinde çağrılan olaydır.
+     *
+     * Yeni seçili seçenekler `Option[]` olarak parametreye geçer.
+     */
     onChange: (option: Option[]) => void;
+    /**
+     * Bileşenin çoklu seçim modunda olduğunu belirtir.
+     *
+     * Sabit `true` değeri ile tanımlanır.
+     */
     multiple: true;
 }
-interface ISingle {
+export interface ISingle {
+    /**
+     * Bileşenin durumunu belirtir.
+     *
+     * `Status` tipi ile tanımlanır (örneğin "success", "error", "warning" vb.).
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select status="success" />
+     * ```
+     */
     status?: Status;
+    /**
+     * Bileşenin seçili değeri.
+     *
+     * Tekli seçimde, `Option` tipi ya da seçilmemişse `undefined` olabilir.
+     */
     value: Option | undefined;
+    /**
+     * Seçim değiştiğinde tetiklenen olaydır.
+     *
+     * Yeni seçilen değer `Option` tipi ya da seçilmemişse `undefined` olarak gelir.
+     */
     onChange: (option: Option | undefined) => void;
+    /**
+     * Bileşenin çoklu seçim modunda olmadığını belirtir.
+     *
+     * `false` veya belirtilmemiş olabilir.
+     */
     multiple?: false;
 }
 export type Props = {
+    /**
+     * Seçilebilir seçeneklerin listesi.
+     *
+     * `Option` tipi elemanlardan oluşan bir dizi olmalıdır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select options={[{label: "...", value: "..."}]} />
+     * ```
+     */
     options: Option[];
+    /**
+     * Arama alanına bir metin girildiğinde tetiklenen olaydır.
+     *
+     * - `searchText`: Kullanıcının yazdığı arama metni.,
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select onSearch={(searchText) => console.log(searchText)} />
+     * ```
+     */
     onSearch?: (searchText: string) => void;
+    /**
+     * Bileşen üzerine tıklandığında tetiklenen olaydır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select onClick={() => {...}} />
+     * ```
+     */
     onClick?: () => void;
+    /**
+     * Yeni bir seçenek oluşturulduğunda tetiklenen olaydır.
+     *
+     * - `option`: Oluşturulan yeni `Option` nesnesi.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select onCreate={(option) => console.log(option)} />
+     * ```
+     */
     onCreate?: (option: Option) => void;
+    /**
+     * Bileşenin içinde gösterilecek yer tutucu (placeholder) metni.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Select placeholder="..." />
+     * ```
+     */
     placeholder?: string;
-    upperCase?: boolean;
-    disabled?: boolean;
-} & (IMultiple | ISingle) & Omit<IGlobalProps, "status"> & IValidation;
-export {};
+} & (IMultiple | ISingle) & IVariant & IStatus & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;

package/dist/components/form/switch/IProps.d.ts

@@ -1,5 +1,16 @@
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IBorder, IDisabled, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, IDisabled, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+    /**
+     * Bileşenin başlığı veya etiket metnidir.
+     *
+     * Genellikle input, buton gibi öğelerin ne amaçla kullanıldığını belirtmek için görüntülenir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Switch label="Kullanıcı Adı" />
+     * ```
+     */
     label?: string;
 }
 export default IProps;

package/dist/components/form/text-editor/IProps.d.ts

@@ -1,18 +1,99 @@
 import { IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps<T> extends IValidation {
+export interface IProps<T> extends IValidation {
+    /**
+     * Bileşenin isim (name) değeridir.
+     *
+     * Formlarda veya bileşenlerde tanımlayıcı olarak kullanılır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <TextEditor name="email" />
+     * ```
+     */
     name?: string;
+    /**
+     * Bileşenin mevcut değeridir.
+     */
     value?: string;
+    /**
+     * Değer değiştiğinde çağrılan fonksiyon.
+     *
+     * - `value`: Yeni değer. `string` veya `undefined` olabilir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <TextEditor onChange={(value)=> console.log(value)} />
+     * ```
+     */
     onChange: (value?: string) => void;
+    /**
+     * Bileşenin yüksekliği (piksel cinsinden).
+     */
+    height?: number;
+    /**
+     * Dinamik liste özellikleri.
+     *
+     * - `render.display`: Listede gösterilecek `T` tipindeki nesnenin hangi alanının gösterileceği.
+     * - `render.items`: Gösterilecek öğeler dizisi.
+     * - `triggerKey`: (Opsiyonel) Dinamik listenin tetiklenmesini sağlayan tuş.
+     * - `onTagged`: (Opsiyonel) Etiketlenen öğeler seçildiğinde çağrılan fonksiyon.
+     *
+     * Örnek kullanım:
+     *
+     * ```tsx
+     * interface IUser {
+     *   id: number;
+     *   name: string;
+     *   email: string;
+     * }
+     *
+     * const users: IUser[] = [
+     *   { id: 1, name: "Kaan", email: "kaan@example.com" },
+     * ];
+     *
+     * function handleTagged(taggedItems: IUser[]) {
+     *   console.log("Seçilen öğeler:", taggedItems);
+     * }
+     *
+     * const dynamicListProps = {
+     *   render: {
+     *     display: "name" as keyof IUser,
+     *     items: users,
+     *   },
+     *   triggerKey: "@",
+     *   onTagged: handleTagged,
+     * };
+     *
+     * <TextEditor dynamicList={dynamicListProps} />
+     * ```
+     *
+     * Açıklamalar:
+     *
+     * - `render.display`: Öğe listesinden kullanıcıya gösterilecek alanı belirtir.
+     * - `render.items`: Dinamik listede gösterilecek öğelerin dizisidir.
+     * - `triggerKey`: Bu karakter yazıldığında dinamik liste açılır.
+     * - `onTagged`: Kullanıcı bir öğeyi seçip etiketlediğinde çağrılır ve seçilen öğeleri parametre olarak alır.
+     */
     dynamicList?: {
         render: {
             display: keyof T;
             items: T[];
         };
         triggerKey?: string;
-        onTagged?: (tagged: any[]) => void;
+        onTagged: (tagged: any[]) => void;
     };
-    placeholder?: string;
-    height?: number;
+    /**
+     * Çoklu dil desteğinin aktif olup olmadığını belirtir.
+     *
+     * - `true`: Çoklu dil desteği aktif.
+     * - `false` veya belirtilmemişse: Devre dışı.
+     */
     multilang?: boolean;
+    /**
+     * Bileşenin placeholder (yer tutucu) metnidir.
+     */
+    placeholder?: string;
 }
 export default IProps;