@sydsoft/base 1.4.0 → 1.5.0

package/dist/esm/form/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface Props {
+    checked: "0" | "1" | boolean;
+    ref?: React.Ref<any>;
+    name?: string;
+    label?: string;
+    className?: string;
+    disabled?: boolean;
+    onToogle?: (e: {
+        target: {
+            name?: string;
+            value: "0" | "1";
+        };
+    }) => void;
+    style?: React.CSSProperties;
+    styleCheckbox?: React.CSSProperties;
+    styleLabel?: React.CSSProperties;
+    tabIndex?: number;
+    required?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Checkbox: React.FC<Props>;
+export {};

package/dist/esm/form/Checkbox.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import styles from "./styles/Input.module.css";
+export var Checkbox = function (_a) {
+    var ref = _a.ref, children = _a.children, name = _a.name, label = _a.label, checked = _a.checked, className = _a.className, style = _a.style, styleCheckbox = _a.styleCheckbox, styleLabel = _a.styleLabel, onToogle = _a.onToogle, disabled = _a.disabled, tabIndex = _a.tabIndex, _b = _a.required, required = _b === void 0 ? false : _b;
+    var refMain = useRef(null);
+    // checked değerini boolean hâline getiriyoruz
+    var isChecked = checked === "1" || checked === true;
+    var handleChange = function (newChecked) {
+        if (disabled)
+            return;
+        onToogle === null || onToogle === void 0 ? void 0 : onToogle({
+            target: {
+                name: name,
+                value: newChecked ? "1" : "0"
+            }
+        });
+    };
+    var toggleCheck = function () {
+        handleChange(!isChecked);
+    };
+    return (_jsxs("div", { ref: refMain, className: "".concat(styles.checkbox, " ").concat(className || ""), style: style, tabIndex: tabIndex, onClick: toggleCheck, children: [_jsx("input", { ref: ref, type: "checkbox", name: name, onChange: function (e) { return handleChange(e.target.checked); }, checked: isChecked, required: required, style: styleCheckbox, disabled: disabled }), label && _jsx("label", { style: styleLabel, children: label }), children && _jsx("div", { children: children })] }));
+};

package/dist/esm/form/Dialog.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+export type propsDialog = {
+    message: any;
+    acceptButtonShow?: boolean;
+    cancelButtonShow?: boolean;
+    acceptButtonText?: string | ReactNode;
+    cancelButtonText?: string | ReactNode;
+    acceptButtonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    cancelButtonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    vertialAlign?: "flex-start" | "center" | "flex-end";
+    horizontalAlign?: "flex-start" | "center" | "flex-end";
+    hideBackdrop?: boolean;
+    hideEsc?: boolean;
+    styleMessage?: React.CSSProperties;
+    styleBox?: React.CSSProperties;
+    styleBoxFooter?: React.CSSProperties;
+    autoFocus?: "accept" | "cancel";
+};
+export declare const Dialog: (config: propsDialog) => Promise<unknown>;

package/dist/esm/form/Dialog.js

@@ -0,0 +1,40 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, BoxFooter } from "../box";
+import { Button } from "./Button";
+import { Modal } from "../modal";
+import { createRoot } from "react-dom/client";
+export var Dialog = function (config) {
+    return new Promise(function (resolve) {
+        if (typeof window === "undefined")
+            return false;
+        var mainDiv = document.getElementById("sdialog");
+        if (!mainDiv) {
+            var createDiv = document.createElement("div");
+            createDiv.setAttribute("id", "sdialog");
+            document.body.appendChild(createDiv);
+            mainDiv = createDiv;
+        }
+        var root = createRoot(mainDiv);
+        var settings = __assign({ acceptButtonShow: true, cancelButtonShow: true, acceptButtonText: "EVET", cancelButtonText: "HAYIR", acceptButtonClass: "danger", cancelButtonClass: "secondary", vertialAlign: "center", horizontalAlign: "center", hideBackdrop: true, hideEsc: true, styleMessage: {
+                fontSize: "1.2rem",
+                padding: "10px 20px"
+            }, styleBox: { padding: 0, margin: 0, minWidth: 250 }, styleBoxFooter: { padding: "8px 5px" }, autoFocus: "accept" }, config);
+        var close = function () {
+            if (mainDiv) {
+                root.unmount();
+                mainDiv.remove();
+            }
+        };
+        var onCancel = function () {
+            resolve(false);
+            close();
+        };
+        var onAccept = function () {
+            resolve(true);
+            close();
+        };
+        var Component = (_jsx(Modal, { open: true, keepMounted: false, close: onCancel, hideBackdrop: settings.hideBackdrop, hideEsc: settings.hideEsc, hideCloseButton: true, vertialAlign: settings.vertialAlign, horizontalAlign: settings.horizontalAlign, children: _jsxs(Box, { style: settings.styleBox, children: [_jsx("div", { className: "sbox_content", style: settings.styleMessage, dangerouslySetInnerHTML: { __html: settings.message } }), (settings.acceptButtonShow || settings.cancelButtonShow) && (_jsxs(BoxFooter, { style: settings.styleBoxFooter, children: [settings.cancelButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === "cancel", buttonClass: settings.cancelButtonClass, onClick: onCancel, children: settings.cancelButtonText })), settings.acceptButtonShow && (_jsx(Button, { autoFocus: settings.autoFocus === "accept", buttonClass: settings.acceptButtonClass, onClick: onAccept, children: settings.acceptButtonText }))] }))] }) }));
+        root.render(Component);
+    });
+};

package/dist/esm/form/Form.d.ts

@@ -0,0 +1,10 @@
+import React, { FormEventHandler } from "react";
+interface Props {
+    children?: React.ReactNode;
+    encType?: React.FormHTMLAttributes<HTMLFormElement>["encType"];
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+    style?: React.CSSProperties;
+    disableOnEnterSubmit?: boolean;
+}
+export declare const Form: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/form/Form.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+export var Form = memo(function FunctionMemo(_a) {
+    var _b = _a.encType, encType = _b === void 0 ? "multipart/form-data" : _b, onSubmit = _a.onSubmit, style = _a.style, _c = _a.disableOnEnterSubmit, disableOnEnterSubmit = _c === void 0 ? false : _c, other = __rest(_a, ["encType", "onSubmit", "style", "disableOnEnterSubmit"]);
+    var onKeyDown = function (e) {
+        if (e.key === "Enter" && disableOnEnterSubmit) {
+            e.preventDefault();
+        }
+    };
+    return _jsx("form", __assign({ style: style, encType: encType, onSubmit: onSubmit, onKeyDown: onKeyDown }, other));
+});

package/dist/esm/form/FormOlustur.d.ts

@@ -0,0 +1,39 @@
+import { typeJustifyContent, typeSpacingValues } from "../grid";
+import React from "react";
+type gridValues = "auto" | "full" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type grid = {
+    xs?: gridValues;
+    sm?: gridValues;
+    md?: gridValues;
+    lg?: gridValues;
+    xl?: gridValues;
+    xxl?: gridValues;
+};
+export type PropsFormOgeler = {
+    label?: string | null;
+    noRender?: boolean;
+    fullComponent?: any;
+    component?: any;
+    propsComponent?: object;
+    propsRow?: object;
+    propsLabel?: object;
+    gridLabel?: grid;
+    gridInput?: grid;
+};
+interface Props {
+    form: {
+        [key: string | number]: any;
+    };
+    formOgeler: PropsFormOgeler[];
+    onChange: Function;
+    sabitGrid: {
+        label: grid;
+        input: grid;
+    };
+    formType: "label" | "noLabel";
+    justifyContent: typeJustifyContent;
+    rowSpacing?: typeSpacingValues;
+    colSpacing?: typeSpacingValues;
+}
+export declare const FormOlustur: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/form/FormOlustur.js

@@ -0,0 +1,51 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Col, Row } from "../grid";
+import React, { memo, useEffect, useMemo } from "react";
+import { Label } from "./Label";
+import { isDev } from "../_lib/baseFunctions";
+export var FormOlustur = memo(function FunctionMemo(props) {
+    var form = props.form, formOgeler = props.formOgeler, onChange = props.onChange, formType = props.formType, sabitGrid = props.sabitGrid, justifyContent = props.justifyContent, rowSpacing = props.rowSpacing, colSpacing = props.colSpacing;
+    useEffect(function () {
+        if (formOgeler && onChange && form) {
+            formOgeler.forEach(function (formOgeler) {
+                var _a, _b, _c, _d, _e, _f;
+                if (formOgeler.noRender && ((_b = (_a = formOgeler === null || formOgeler === void 0 ? void 0 : formOgeler.component) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.name) && form[(_d = (_c = formOgeler === null || formOgeler === void 0 ? void 0 : formOgeler.component) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.name] != "") {
+                    isDev && console.log("noRenderGuncelle");
+                    if ((formOgeler === null || formOgeler === void 0 ? void 0 : formOgeler.component) && ((_f = (_e = formOgeler === null || formOgeler === void 0 ? void 0 : formOgeler.component) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.name)) {
+                        onChange({
+                            target: {
+                                name: formOgeler.component.props.name,
+                                value: ""
+                            }
+                        });
+                    }
+                }
+            });
+        }
+    }, [JSON.stringify(form), formOgeler]);
+    var result = useMemo(function () {
+        return formOgeler.map(function (_a, i) {
+            var noRender = _a.noRender, fullComponent = _a.fullComponent, component = _a.component, propsComponent = _a.propsComponent, propsRow = _a.propsRow, label = _a.label, propsLabel = _a.propsLabel, gridLabel = _a.gridLabel, gridInput = _a.gridInput;
+            if (noRender) {
+                return null;
+            }
+            if (fullComponent)
+                return React.cloneElement(fullComponent, { key: i });
+            var newProps = __assign({}, propsComponent);
+            if (onChange && component && !component.props.onChange) {
+                newProps = __assign(__assign({}, newProps), { onChange: onChange });
+            }
+            if (onChange && form && component.props.name && !component.props.value) {
+                newProps = __assign(__assign({}, newProps), { value: form[component.props.name] && form[component.props.name].length > 0 ? String(form[component.props.name]) : "" });
+            }
+            if (formType === "label")
+                newProps = __assign(__assign({}, newProps), { label: "" });
+            var detectLabel = label || component.props.label;
+            gridLabel = __assign(__assign({}, sabitGrid.label), gridLabel);
+            gridInput = __assign(__assign({}, sabitGrid.input), gridInput);
+            return (_jsxs(Row, __assign({ justifyContent: justifyContent, rowSpacing: rowSpacing, colSpacing: colSpacing }, propsRow, { children: [formType === "label" && detectLabel && (_jsx(Col, __assign({}, gridLabel, { children: _jsx(Label, __assign({ required: component.props.required }, propsLabel, { children: detectLabel })) }))), _jsx(Col, __assign({}, gridInput, { children: React.cloneElement(component, newProps) }))] }), i));
+        });
+    }, [form, formOgeler, onChange, formType, sabitGrid, justifyContent, rowSpacing, colSpacing]);
+    return _jsx(React.Fragment, { children: result });
+});

package/dist/esm/form/Input.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+type maskSettingsTranslation = {
+    [key: string]: {
+        pattern: any;
+        transform?: (value: string) => string;
+        optional?: boolean;
+        recursive?: boolean;
+    };
+};
+type maskSettings = {
+    clearIfNotMatch?: boolean;
+    reverse?: boolean;
+    translation?: maskSettingsTranslation;
+    selectOnFocus?: boolean;
+    onChange?: (maskedValue: string, cleanValue: string, targetInput: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export interface PropsInput {
+    componentRef?: any;
+    inputRef?: any;
+    className?: string;
+    id?: string;
+    name?: string;
+    value?: any;
+    defaultValue?: any;
+    label?: string;
+    loading?: boolean;
+    autoFocus?: boolean | undefined;
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    type?: "text" | "number" | "email" | "color" | "date" | "time" | "datetime-local" | "hidden" | "file" | "password" | "tel" | "search";
+    select?: any[];
+    ilkSec?: boolean;
+    valueKey?: string;
+    labelKey?: string;
+    multiline?: boolean;
+    rows?: number | undefined;
+    onChange?: Function;
+    onFocus?: Function;
+    onBlur?: Function;
+    onClick?: Function;
+    onKeyPress?: Function;
+    onKeyUp?: Function;
+    onKeyDown?: Function;
+    propsComponent?: object | any;
+    propsInput?: object;
+    startAdornment?: any;
+    endAdornment?: any;
+    sadeceYazi?: boolean;
+    sadeceSayi?: boolean;
+    tumuBuyuk?: boolean;
+    tumuKucuk?: boolean;
+    seoCevir?: boolean;
+    dosyaNoGiris?: boolean;
+    fileNameGiris?: boolean;
+    dateGecmisKontrol?: boolean;
+    autoSelectText?: boolean;
+    mask?: string;
+    maskSettings?: maskSettings;
+}
+export declare const Input: React.FC<PropsInput>;
+export {};

package/dist/esm/form/Input.js

@@ -0,0 +1,207 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { seoCevirFunction, tumuBuyukCevir, tumuKucukCevir } from "../_lib/baseFunctions";
+import { Dialog } from "./Dialog";
+import { alert_add } from "../alert";
+import { applyInputMask } from "../_lib/inputMask";
+import styles from "./styles/Input.module.css";
+export var Input = function (_a) {
+    var componentRef = _a.componentRef, inputRef = _a.inputRef, className = _a.className, propsComponent = _a.propsComponent, propsInput = _a.propsInput, id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, type = _a.type, label = _a.label, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, placeholder = _a.placeholder, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, disabled = _a.disabled, required = _a.required, loading = _a.loading, autoFocus = _a.autoFocus, select = _a.select, _b = _a.valueKey, valueKey = _b === void 0 ? "value" : _b, _c = _a.labelKey, labelKey = _c === void 0 ? "label" : _c, ilkSec = _a.ilkSec, multiline = _a.multiline, rows = _a.rows, sadeceYazi = _a.sadeceYazi, sadeceSayi = _a.sadeceSayi, tumuBuyuk = _a.tumuBuyuk, tumuKucuk = _a.tumuKucuk, seoCevir = _a.seoCevir, dosyaNoGiris = _a.dosyaNoGiris, fileNameGiris = _a.fileNameGiris, dateGecmisKontrol = _a.dateGecmisKontrol, autoSelectText = _a.autoSelectText, _d = _a.mask, mask = _d === void 0 ? "" : _d, _e = _a.maskSettings, maskSettings = _e === void 0 ? {
+        clearIfNotMatch: true,
+        reverse: false, //Tersten doldurmaya başla, fiyatlar için geçerli
+        selectOnFocus: false
+    } : _e;
+    var refMain = useRef(null);
+    var refInput = useRef(null);
+    var refLabel = useRef(null);
+    var _f = useState(value && value.toString().length > 0), inputFilled = _f[0], setInputFilled = _f[1];
+    var _g = useState(false), focus = _g[0], setFocus = _g[1];
+    useEffect(function () {
+        if (inputRef)
+            inputRef.current = refInput.current;
+        if (componentRef)
+            componentRef.current = refMain.current;
+    }, [componentRef, inputRef]);
+    useEffect(function () {
+        if (autoSelectText && !select && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
+            refInput.current.select();
+        }
+    }, [autoSelectText, select]);
+    useEffect(function () {
+        var _a, _b;
+        var filled = (String(value) && value.toString().length > 0) || (defaultValue && defaultValue.toString().length > 0);
+        setInputFilled(filled);
+        if (filled) {
+            (_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error);
+        }
+    }, [value, defaultValue]);
+    useEffect(function () {
+        // if (type === "number") sadeceSayi = true; //TODO: sadeceSayi burada değiştirelemez ki!!!
+        if (select && ilkSec && value.toString().length === 0) {
+            if (select.length) {
+                var ilkItem = select[0][valueKey] ? select[0][valueKey] : "";
+                onChange && onChange({ target: { name: name, value: ilkItem } });
+            }
+        }
+    }, [select]);
+    useEffect(function () {
+        var _a;
+        if (typeof window !== "undefined" && (mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
+            (_a = refInput.current) === null || _a === void 0 ? void 0 : _a.setAttribute("autocomplete", "off");
+        }
+        if ((mask === null || mask === void 0 ? void 0 : mask.length) > 0 && (refInput === null || refInput === void 0 ? void 0 : refInput.current)) {
+            var maskInstance_1 = applyInputMask(refInput.current, mask, __assign(__assign({}, maskSettings), { onChange: function (masked, clean, e) {
+                    if (onChange) {
+                        onChange({ target: { name: name, value: masked } });
+                    }
+                    if (maskSettings && maskSettings.onChange) {
+                        maskSettings.onChange(masked, clean, e);
+                    }
+                } }));
+            maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.setValue(value ? value : null);
+            return function () { return maskInstance_1 === null || maskInstance_1 === void 0 ? void 0 : maskInstance_1.destroy(); };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mask]);
+    var Change = useCallback(function (e) {
+        if (tumuBuyuk)
+            tumuBuyukCevir(e);
+        if (tumuKucuk)
+            tumuKucukCevir(e);
+        if (seoCevir)
+            seoCevirFunction(e);
+        setInputFilled(e.target.value.length > 0);
+        onChange ? onChange(e) : null;
+    }, [onChange, seoCevir, tumuBuyuk, tumuKucuk]);
+    var Focus = useCallback(function (e) {
+        var _a, _b;
+        onFocus ? onFocus(e) : null;
+        setFocus(true);
+        (_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(styles.error);
+    }, [onFocus]);
+    var Blur = useCallback(function (e) {
+        var _a, _b, _c, _d;
+        if (fileNameGiris && e.target.value !== "" && /[/\\?%*:|"'<>]/g.test(e.target.value)) {
+            e.target.value = e.target.value.replace(/[/\\?%*:|"'<>]/g, "-");
+            if (onChange)
+                onChange(e);
+            alert_add({ type: "warning", message: "Lütfen dosya adındaki özel karakter değiştirildi." });
+        }
+        if (dosyaNoGiris && e.target.value !== "" && !/^[1-2]\d{3}\/\d/.test(e.target.value)) {
+            e.target.value = "";
+            if (onChange)
+                onChange(e);
+            alert_add({ type: "error", message: "Lütfen doğru bir dosya numarası giriniz. Örn: 2022/123" });
+        }
+        if (dateGecmisKontrol && e.target.value !== "") {
+            var today = new Date().toISOString().slice(0, 10);
+            if (e.target.value < today) {
+                Dialog({
+                    message: "Geçmiş bir tarihi seçtiniz. Devam etmek istiyor musunuz?"
+                }).then(function (r) {
+                    if (!r) {
+                        e.target.value = "";
+                        if (onChange)
+                            onChange(e);
+                        e.target.focus();
+                    }
+                });
+            }
+        }
+        if (required) {
+            if (e.target.value === "") {
+                (_b = (_a = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(styles.error);
+            }
+            else {
+                (_d = (_c = refMain === null || refMain === void 0 ? void 0 : refMain.current) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove(styles.error);
+            }
+        }
+        if (value !== e.target.value) {
+            onChange && onChange({ target: { name: name, value: e.target.value } });
+        }
+        onBlur ? onBlur(e) : null;
+        setFocus(false);
+    }, [fileNameGiris, dosyaNoGiris, dateGecmisKontrol, required, value, onBlur, onChange, name]);
+    var Click = useCallback(function (e) { return (onClick ? onClick(e) : null); }, [onClick]);
+    var KeyPress = useCallback(function (e) {
+        if (sadeceYazi) {
+            var turkishLetters = /[ğüşıöçĞÜŞİÖÇ]/;
+            if (!(/[A-Za-z\s.]/.test(e.key) || turkishLetters.test(e.key))) {
+                e.preventDefault();
+                return;
+            }
+        }
+        if ((sadeceSayi || dosyaNoGiris) && (e.which < 48 || e.which > 57))
+            e.preventDefault();
+        if (dosyaNoGiris && e.which !== 8 && e.target.value.length === 4 && e.target.value.search("/") === -1) {
+            e.target.value = e.target.value + "/";
+        }
+        onKeyPress ? onKeyPress(e) : null;
+    }, [sadeceYazi, sadeceSayi, dosyaNoGiris, onKeyPress]);
+    var KeyUp = useCallback(function (e) { return (onKeyUp ? onKeyUp(e) : null); }, [onKeyUp]);
+    var KeyDown = useCallback(function (e) {
+        onKeyDown ? onKeyDown(e) : null;
+    }, [onKeyDown]);
+    var ortakProps = {
+        ref: refInput,
+        id: id,
+        name: name,
+        value: value,
+        defaultValue: defaultValue,
+        autoFocus: autoFocus,
+        disabled: disabled,
+        required: required,
+        placeholder: placeholder,
+        onChange: Change,
+        onFocus: Focus,
+        onBlur: Blur,
+        onClick: Click,
+        onKeyPress: KeyPress,
+        onKeyUp: KeyUp,
+        onKeyDown: KeyDown
+    };
+    var component;
+    if (select) {
+        component = (_jsxs("select", __assign({ className: "".concat(styles.input, " ").concat(styles.select) }, ortakProps, propsInput, { children: [ilkSec === false && _jsx("option", { value: "" }), select.map(function (item) {
+                    var value = item[valueKey];
+                    var label = item[labelKey];
+                    return (_jsx("option", { value: value, children: label ? label : value }, value));
+                })] })));
+    }
+    else if (multiline) {
+        component = _jsx("textarea", __assign({ className: "".concat(styles.input, " ").concat(styles.textarea), rows: rows }, ortakProps, propsInput));
+    }
+    else {
+        component = _jsx("input", __assign({ className: "".concat(styles.input), type: type }, ortakProps, propsInput));
+    }
+    var classList = useCallback(function () {
+        var list = ["sInputComponent", styles.component];
+        if (className)
+            list.push(className);
+        if (label) {
+            list.push(styles.hidePlaceHolder);
+        }
+        // if (props.required && (value.length === 0 || !value)) list.push("error");
+        return list.join(" ");
+    }, [value, className]);
+    useEffect(function () {
+        if (propsComponent && propsComponent.hasOwnProperty("style")) {
+            var background = propsComponent.style.background ? propsComponent.style.background : propsComponent.style.backgroundColor ? propsComponent.style.backgroundColor : null;
+            if (background && refLabel.current) {
+                refLabel.current.style.setProperty("--label-bg", background);
+            }
+        }
+    }, [propsComponent]);
+    return (_jsxs("div", __assign({ ref: refMain, className: classList(), "data-disabled": disabled }, propsComponent, { children: [startAdornment && _jsx("div", { className: "adornment_start ".concat(styles.adornment, " ").concat(styles.start), children: startAdornment }), _jsxs("div", { className: "".concat(styles.inputBase, " ").concat(inputFilled || focus || type == "date" ? styles.open : ""), children: [component, label && (_jsxs("div", { ref: refLabel, className: "label ".concat(styles.label), children: [label, required && _jsx("span", { className: styles.required, children: "*" })] }))] }), (endAdornment || loading) && (_jsxs("div", { className: "adornment_end ".concat(styles.adornment, " ").concat(styles.end), children: [endAdornment, loading && _jsx("div", { className: styles.loading })] }))] })));
+};
+Input.defaultProps = {
+    value: "",
+    disabled: false,
+    required: false,
+    ilkSec: false,
+    multiline: false,
+    rows: 2,
+    loading: false,
+    autoFocus: false
+};

package/dist/esm/form/Label.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    required?: boolean;
+}
+export declare const Label: React.FC<Props>;
+export {};

package/dist/esm/form/Label.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Tooltip } from "../tooltip";
+import styles from "./styles/Label.module.css";
+export var Label = memo(function FMemo(props) {
+    var required = props.required, children = props.children, other = __rest(props, ["required", "children"]);
+    return (_jsxs("label", __assign({ className: styles.label }, other, { children: [children, _jsx(Tooltip, { title: "Zorunlu Alan", children: _jsx("span", { className: styles.required, children: required && "*" }) })] })));
+});
+Label.defaultProps = {
+    required: false
+};

package/dist/esm/form/SearchableInput.d.ts

@@ -0,0 +1,35 @@
+import { PropsInput } from "./Input";
+import React from "react";
+type typeList = {
+    value?: string;
+    label?: string;
+    [key: string | number]: any;
+}[];
+interface Props extends PropsInput {
+    autoCompleteList?: typeList | any;
+    onChange?: Function;
+    value: string | number | undefined;
+    valueKey?: string;
+    labelKey?: string;
+    itemComponent?: any;
+    api?: boolean;
+    onText?: Function;
+    onSelect?: Function;
+    onLoad?: Function;
+    newCreate?: boolean;
+    refModal?: any;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    parentInputValue?: any;
+    listPositionRelative?: boolean;
+}
+type handle = {
+    open: () => void;
+    close: () => void;
+    checkByValue: (value: string, openList: boolean) => void;
+    setLoading: (loading: boolean) => void;
+    setAutoCompleteList: (list: typeList, value?: string | null) => void;
+    clear: (openList?: boolean, focusInput?: boolean) => void;
+};
+export declare const SearchableInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<handle>>;
+export {};