@sydsoft/base 1.4.0 → 1.5.0

package/README.md

@@ -0,0 +1,9 @@
+# Box
+
+global.css içinde .sbox, .sbox_header ve .sbox_footer ile müdahale edilebilir.
+
+---
+
+# Input
+## global.css ayarları
+.sInputComponent, .adornment_start, .adornment_end, .label, input, select, textarea

package/dist/esm/_lib/baseFunctions.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const isDev: boolean;
+export declare function tumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
+export declare function tumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
+export declare function seoCevirFunction(e: React.ChangeEvent<HTMLInputElement>): void;

package/dist/esm/_lib/baseFunctions.js

@@ -0,0 +1,38 @@
+export var isDev = !process.env.NODE_ENV || process.env.NODE_ENV === "development";
+export function tumuBuyukCevir(e) {
+    var _a;
+    if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
+        var start = e.target.selectionStart;
+        var end = e.target.selectionEnd;
+        e.target.value = e.target.value.toString().toLocaleUpperCase("tr");
+        e.target.setSelectionRange(start, end);
+    }
+}
+export function tumuKucukCevir(e) {
+    var _a;
+    if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
+        var start = e.target.selectionStart;
+        var end = e.target.selectionEnd;
+        e.target.value = e.target.value.toString().toLocaleLowerCase("tr");
+        e.target.setSelectionRange(start, end);
+    }
+}
+export function seoCevirFunction(e) {
+    var _a;
+    if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
+        var start = e.target.selectionStart;
+        var end = e.target.selectionEnd;
+        var string = e.target.value.toString().toLocaleLowerCase("tr");
+        var turkce = [" ", "-", "ş", "Ş", "ı", "ü", "Ü", "ö", "Ö", "ç", "Ç", "ş", "Ş", "ı", "ğ", "Ğ", "İ", "ö", "Ö", "Ç", "ç", "ü", "Ü", "â", "ê", "Â", "“", "”"];
+        var duzgun = ["-", "-", "s", "S", "i", "u", "U", "o", "O", "c", "C", "s", "S", "i", "g", "G", "I", "o", "O", "C", "c", "u", "U", "a", "ê", "a", "", ""];
+        for (var i = 0; i < turkce.length; i++) {
+            string = string.split(turkce[i]).join(duzgun[i]);
+        }
+        string = string.replace(/[^a-z0-9\-_şıüğçİŞĞÜÇ]+/gi, "_");
+        string = string.replace(/_+/g, "_");
+        string = string.replace(/^-/, "_");
+        string = string.replace(/-$/, "_");
+        e.target.value = string;
+        e.target.setSelectionRange(start, end);
+    }
+}

package/dist/esm/_lib/inputMask.d.ts

@@ -0,0 +1,7 @@
+export declare const applyInputMask: (inputElement: any, mask: string, options?: any) => {
+    destroy: () => void;
+    setValue: (value: any) => void;
+    getValue: () => any;
+    getCleanValue: () => string;
+    applyMask: (inputValue: any) => string;
+} | null;

package/dist/esm/_lib/inputMask.js

@@ -0,0 +1,228 @@
+import { isDev } from "./baseFunctions";
+// Mask işleme core fonksiyonları
+var createMaskCore = function () {
+    var defaultTranslation = {
+        "0": { pattern: /\d/ },
+        "9": { pattern: /\d/, optional: true },
+        "#": { pattern: /\d/, recursive: true },
+        A: { pattern: /[a-zA-Z0-9]/ },
+        S: { pattern: /[a-zA-Z]/ },
+        U: { pattern: /[a-zA-Z]/, transform: function (char) { return char.toUpperCase(); } },
+        L: { pattern: /[a-zA-Z]/, transform: function (char) { return char.toLowerCase(); } },
+        X: { pattern: /[0-9a-fA-F]/ }
+    };
+    var parseMask = function (maskString, translation) {
+        if (translation === void 0) { translation = defaultTranslation; }
+        var tokens = [];
+        var i = 0;
+        while (i < maskString.length) {
+            var char = maskString[i];
+            if (translation[char]) {
+                tokens.push({
+                    type: "input",
+                    pattern: translation[char].pattern,
+                    optional: translation[char].optional,
+                    recursive: translation[char].recursive,
+                    transform: translation[char].transform
+                });
+            }
+            else {
+                tokens.push({
+                    type: "literal",
+                    char: char
+                });
+            }
+            i++;
+        }
+        return tokens;
+    };
+    var applyMask = function (inputValue, maskTokens, reverse) {
+        if (reverse === void 0) { reverse = false; }
+        if (!maskTokens.length)
+            return inputValue;
+        var cleanValue = inputValue.replace(/[^\w\s]/g, "");
+        if (reverse) {
+            return applyReverseMask(cleanValue, maskTokens);
+        }
+        var result = "";
+        var valueIndex = 0;
+        var maskIndex = 0;
+        while (maskIndex < maskTokens.length && valueIndex < cleanValue.length) {
+            var token = maskTokens[maskIndex];
+            if (token.type === "literal") {
+                result += token.char;
+                maskIndex++;
+            }
+            else {
+                var char = cleanValue[valueIndex];
+                if (token.pattern.test(char)) {
+                    var transformedChar = token.transform ? token.transform(char) : char;
+                    result += transformedChar;
+                    valueIndex++;
+                    maskIndex++;
+                }
+                else if (token.optional) {
+                    maskIndex++;
+                }
+                else {
+                    valueIndex++;
+                }
+            }
+        }
+        while (maskIndex < maskTokens.length) {
+            var token = maskTokens[maskIndex];
+            if (token.type === "literal") {
+                result += token.char;
+            }
+            else if (!token.optional) {
+                break;
+            }
+            maskIndex++;
+        }
+        return result;
+    };
+    var applyReverseMask = function (inputValue, maskTokens) {
+        var reversedMask = maskTokens.slice().reverse();
+        var reversedValue = inputValue.split("").reverse().join("");
+        var result = "";
+        var valueIndex = 0;
+        var maskIndex = 0;
+        while (maskIndex < reversedMask.length && valueIndex < reversedValue.length) {
+            var token = reversedMask[maskIndex];
+            if (token.type === "literal") {
+                result = token.char + result;
+                maskIndex++;
+            }
+            else {
+                var char = reversedValue[valueIndex];
+                if (token.pattern.test(char)) {
+                    var transformedChar = token.transform ? token.transform(char) : char;
+                    result = transformedChar + result;
+                    valueIndex++;
+                    maskIndex++;
+                }
+                else if (token.optional) {
+                    maskIndex++;
+                }
+                else {
+                    valueIndex++;
+                }
+            }
+        }
+        return result;
+    };
+    var getCleanValue = function (maskedValue, maskTokens) {
+        if (!maskTokens.length)
+            return maskedValue;
+        var clean = "";
+        var valueIndex = 0;
+        var maskIndex = 0;
+        while (maskIndex < maskTokens.length && valueIndex < maskedValue.length) {
+            var token = maskTokens[maskIndex];
+            if (token.type === "literal") {
+                if (maskedValue[valueIndex] === token.char) {
+                    valueIndex++;
+                }
+                maskIndex++;
+            }
+            else {
+                clean += maskedValue[valueIndex];
+                valueIndex++;
+                maskIndex++;
+            }
+        }
+        return clean;
+    };
+    return {
+        parseMask: parseMask,
+        applyMask: applyMask,
+        getCleanValue: getCleanValue
+    };
+};
+// Fonksiyonel yaklaşım - herhangi bir input elementine mask uygula
+export var applyInputMask = function (inputElement, mask, options) {
+    if (options === void 0) { options = {}; }
+    if (!inputElement || !mask)
+        return null;
+    isDev && console.log("Input mask applied:", { inputElement: inputElement, mask: mask, options: options });
+    var translation = options.translation, _a = options.reverse, reverse = _a === void 0 ? false : _a, _b = options.clearIfNotMatch, clearIfNotMatch = _b === void 0 ? true : _b, _c = options.selectOnFocus, selectOnFocus = _c === void 0 ? false : _c, onChange = options.onChange;
+    var maskCore = createMaskCore();
+    var maskTokens = maskCore.parseMask(mask, translation);
+    var applyMaskToValue = function (inputValue) { return maskCore.applyMask(inputValue, maskTokens, reverse); };
+    var getCleanValue = function (maskedValue) { return maskCore.getCleanValue(maskedValue, maskTokens); };
+    var handleInputChange = function (e) {
+        var inputValue = e.target.value;
+        var maskedValue = applyMaskToValue(inputValue);
+        var cleanValue = getCleanValue(maskedValue);
+        e.target.value = maskedValue;
+        onChange === null || onChange === void 0 ? void 0 : onChange(maskedValue, cleanValue, e);
+    };
+    var handleKeyDown = function (e) {
+        var key = e.key, target = e.target;
+        var cursorStart = target.selectionStart;
+        var cursorEnd = target.selectionEnd;
+        if (key === "Backspace" || key === "Delete") {
+            e.preventDefault();
+            var newValue = target.value;
+            if (cursorStart !== cursorEnd) {
+                newValue = newValue.substring(0, cursorStart) + newValue.substring(cursorEnd);
+            }
+            else if (key === "Backspace" && cursorStart > 0) {
+                newValue = newValue.substring(0, cursorStart - 1) + newValue.substring(cursorStart);
+            }
+            else if (key === "Delete" && cursorStart < newValue.length) {
+                newValue = newValue.substring(0, cursorStart) + newValue.substring(cursorStart + 1);
+            }
+            var maskedValue = applyMaskToValue(newValue);
+            target.value = maskedValue;
+            var cleanValue = getCleanValue(maskedValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(maskedValue, cleanValue, e);
+            setTimeout(function () {
+                var newPos = key === "Backspace" ? Math.max(0, cursorStart - 1) : cursorStart;
+                target.setSelectionRange(newPos, newPos);
+            }, 0);
+        }
+    };
+    var handleFocus = function (e) {
+        if (selectOnFocus) {
+            setTimeout(function () {
+                e.target.select();
+            }, 0);
+        }
+    };
+    var handleBlur = function (e) {
+        if (clearIfNotMatch) {
+            var cleanValue = getCleanValue(e.target.value);
+            var expectedLength = maskTokens.filter(function (t) { return t.type === "input" && !t.optional; }).length;
+            if (cleanValue.length < expectedLength) {
+                e.target.value = "";
+                onChange === null || onChange === void 0 ? void 0 : onChange("", "", e);
+            }
+        }
+    };
+    // Event listener'ları ekle
+    inputElement.addEventListener("input", handleInputChange);
+    inputElement.addEventListener("keydown", handleKeyDown);
+    inputElement.addEventListener("focus", handleFocus);
+    inputElement.addEventListener("blur", handleBlur);
+    // Cleanup fonksiyonu
+    var destroy = function () {
+        inputElement.removeEventListener("input", handleInputChange);
+        inputElement.removeEventListener("keydown", handleKeyDown);
+        inputElement.removeEventListener("focus", handleFocus);
+        inputElement.removeEventListener("blur", handleBlur);
+    };
+    // Utility fonksiyonları
+    return {
+        destroy: destroy,
+        setValue: function (value) {
+            if (!value)
+                return;
+            var maskedValue = applyMaskToValue(value || "");
+            inputElement.value = maskedValue;
+        },
+        getValue: function () { return inputElement.value; },
+        getCleanValue: function () { return getCleanValue(inputElement.value); },
+        applyMask: applyMaskToValue
+    };
+};

package/dist/esm/box/Box.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    loading?: boolean;
+};
+export declare const Box: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/Box.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from "react";
+import styles from "./Box.module.css";
+export var Box = memo(function MemoFunction(_a) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.loading, loading = _b === void 0 ? false : _b;
+    var boxRef = useRef(null);
+    var _c = useState(false), hasContent = _c[0], setHasContent = _c[1];
+    useEffect(function () {
+        if (!boxRef.current)
+            return;
+        var found = boxRef.current.querySelector(".sbox_content");
+        setHasContent(!!found);
+    }, [children]);
+    return (_jsxs("div", { ref: boxRef, className: "sbox ".concat(styles.sbox, " ").concat(className || ""), style: style, children: [(hasContent && children) || _jsx("div", { className: styles.content, children: children }), loading && (_jsx("div", { className: styles.loading, children: _jsx("div", { className: styles.loading_spinner }) }))] }));
+});

package/dist/esm/box/Box.module.css

@@ -0,0 +1,152 @@
+.sbox {
+    position: relative;
+    max-width: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    overflow-y: auto;
+}
+
+.sbox h1,
+.sbox h2,
+.sbox h3,
+.sbox h4,
+.sbox h5,
+.sbox h6 {
+    margin: 0;
+    padding: 0;
+}
+
+.content {
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.header,
+.footer {
+    z-index: 1;
+    position: sticky;
+    padding: 12px 16px;
+    background: inherit;
+}
+.header {
+    top: 0;
+    border-bottom: 1px solid #00000020;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    /* margin: 10px 0 5px 0; */
+}
+.footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    bottom: 0;
+    border-top: 1px solid #00000020;
+    background-color: #f7f7f7;
+}
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    text-align: center;
+    
+}
+
+.title {
+    flex: 1;
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+.menu {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+}
+.menu > * {
+    margin: 0 3px;
+}
+
+.loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f7faa6;
+    overflow: hidden;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loading::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgb(183 190 199 / 2%) 0, rgb(182 190 198 / 19%) 20%, rgb(183 190 199 / 2%) 60%, rgb(184 192 200 / 1%));
+    animation: shimmer 2s infinite;
+    content: "";
+}
+
+.loading_spinner {
+    position: relative;
+    margin: 6px;
+    width: 24px;
+    height: 24px;
+}
+.loading_spinner:before {
+    position: absolute;
+    display: block;
+    content: "";
+    z-index: 12;
+    top: 3px;
+    left: 3px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #fff;
+}
+
+.loading_spinner:after {
+    position: absolute;
+    display: block;
+    content: "";
+    z-index: 11;
+    width: 18px;
+    height: 18px;
+    border-radius: 200px 0 0;
+    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(69, 154, 215, 1) 50%, rgba(69, 154, 215, 1) 100%);
+    animation: loading_spinner 0.5s linear infinite;
+}
+
+@keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+@keyframes loading_spinner {
+    0% {
+        transform-origin: 100% 100%;
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform-origin: 100% 100%;
+        transform: rotate(360deg);
+    }
+}

package/dist/esm/box/BoxContent.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    padding?: number;
+    children?: ReactNode;
+}
+export declare const BoxContent: ({ className, style, padding, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/box/BoxContent.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Box.module.css";
+export var BoxContent = function (_a) {
+    var className = _a.className, style = _a.style, padding = _a.padding, children = _a.children;
+    return (_jsx("div", { className: "".concat(styles.content, " sbox_content ").concat(className || ""), style: __assign(__assign({}, style), { padding: padding }), children: children }));
+};

package/dist/esm/box/BoxFooter.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    marginTop?: number;
+    align?: "flex-start" | "center" | "flex-end" | "stretch";
+}
+export declare const BoxFooter: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/BoxFooter.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import styles from "./Box.module.css";
+export var BoxFooter = memo(function FunctionMemo(_a) {
+    var children = _a.children, className = _a.className, style = _a.style, align = _a.align, marginTop = _a.marginTop;
+    return (_jsx("div", { className: "sbox_footer ".concat(styles.footer, " ").concat(className || ""), style: __assign({ marginTop: marginTop, justifyContent: align }, style), children: children }));
+});

package/dist/esm/box/BoxHeader.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+interface Props {
+    children?: ReactNode;
+    className?: string;
+    title?: string | ReactNode;
+    icon?: ReactNode;
+    menu?: ReactNode;
+    mainStyle?: React.CSSProperties;
+    iconStyle?: React.CSSProperties;
+    titleStyle?: React.CSSProperties;
+    menuStyle?: React.CSSProperties;
+    component?: any;
+    marginBottom?: number;
+}
+export declare const BoxHeader: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/BoxHeader.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import styles from "./Box.module.css";
+export var BoxHeader = memo(function FunctionMemo(_a) {
+    var children = _a.children, className = _a.className, title = _a.title, icon = _a.icon, menu = _a.menu, mainStyle = _a.mainStyle, iconStyle = _a.iconStyle, titleStyle = _a.titleStyle, menuStyle = _a.menuStyle, marginBottom = _a.marginBottom, _b = _a.component, component = _b === void 0 ? "div" : _b;
+    var Comp = component;
+    return (_jsxs(Comp, { className: "sbox_header ".concat(styles.header, " ").concat(className || ""), style: __assign({ marginBottom: marginBottom }, mainStyle), children: [icon && (_jsx("div", { className: styles.icon, style: iconStyle, children: icon })), _jsx("div", { className: styles.title, style: titleStyle, children: children || title }), menu && (_jsx("div", { className: styles.menu, style: menuStyle, children: menu }))] }));
+});

package/dist/esm/box/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 02:41
+ */
+export * from "./Box";
+export * from './BoxContent';
+export * from './BoxFooter';
+export * from './BoxHeader';

package/dist/esm/box/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 02:41
+ */
+export * from "./Box";
+export * from './BoxContent';
+export * from './BoxFooter';
+export * from './BoxHeader';

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

@@ -0,0 +1,27 @@
+import { propsDialog } from "./Dialog";
+import React from "react";
+import { typeTooltipPosition } from "../tooltip";
+interface Props {
+    children?: React.ReactNode;
+    onlyIcon?: React.ReactNode;
+    buttonClass?: "default" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    buttonSize?: "small" | "medium" | "large";
+    autoFocus?: boolean;
+    hidden?: boolean;
+    component?: "button" | "a" | "div" | any;
+    className?: string;
+    type?: "submit" | "reset" | "button";
+    disabled?: boolean;
+    fullWidth?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    href?: string | undefined;
+    target?: string | undefined;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    titlePosition?: typeTooltipPosition;
+    titleArrow?: boolean;
+    dialog?: propsDialog;
+}
+export declare const Button: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/form/Button.js

@@ -0,0 +1,76 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from "./Dialog";
+import { memo, useCallback, useEffect, useState } from "react";
+import { Tooltip } from "../tooltip";
+import Link from "next/link";
+import styles from "./styles/Button.module.css";
+export var Button = memo(function MemoFunction(_a) {
+    var children = _a.children, _b = _a.component, component = _b === void 0 ? "button" : _b, className = _a.className, _c = _a.buttonClass, buttonClass = _c === void 0 ? "default" : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? "medium" : _d, style = _a.style, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, onlyIcon = _a.onlyIcon, onClick = _a.onClick, href = _a.href, target = _a.target, tabIndex = _a.tabIndex, title = _a.title, titlePosition = _a.titlePosition, titleArrow = _a.titleArrow, dialog = _a.dialog, autoFocus = _a.autoFocus, other = __rest(_a, ["children", "component", "className", "buttonClass", "buttonSize", "style", "type", "fullWidth", "onlyIcon", "onClick", "href", "target", "tabIndex", "title", "titlePosition", "titleArrow", "dialog", "autoFocus"]);
+    var Comp = component;
+    var ripple = function (e) {
+        var el = e.currentTarget;
+        var circle = document.createElement("span");
+        var diameter = Math.max(el.clientWidth, el.clientHeight);
+        circle.style.width = circle.style.height = "".concat(diameter, "px");
+        circle.classList.add(styles.ripple);
+        var ripple = el.getElementsByClassName(styles.ripple)[0];
+        if (ripple)
+            ripple.remove();
+        el.appendChild(circle);
+    };
+    var handleClick = function (e) {
+        ripple(e);
+        if (dialog) {
+            Dialog(dialog).then(function (result) {
+                if (result && onClick) {
+                    onClick(e);
+                }
+            });
+        }
+        else {
+            if (onClick)
+                onClick(e);
+        }
+    };
+    var createClassList = useCallback(function () {
+        var list = ["sbutton", styles.button];
+        if (buttonClass)
+            list.push(styles[buttonClass]);
+        if (className)
+            list.push(className);
+        if (onlyIcon)
+            list.push(styles.iconbutton);
+        if (fullWidth)
+            list.push(styles.fullwidth);
+        return list.join(" ");
+    }, [buttonClass, className, onlyIcon, fullWidth]);
+    var _g = useState(function () { return createClassList(); }), classList = _g[0], setClassList = _g[1];
+    useEffect(function () {
+        var newClassList = createClassList().split(" ").filter(Boolean);
+        if (href && typeof window !== "undefined" && window.location.pathname === href) {
+            newClassList.push("active");
+        }
+        setClassList(newClassList.join(" "));
+    }, [href, createClassList]);
+    var ortakProps = __assign({ className: classList, style: style, onClick: handleClick, tabIndex: tabIndex, autoFocus: autoFocus, "data-button-size": (!onlyIcon) ? buttonSize : null }, other);
+    var renderComponent;
+    if (href !== undefined) {
+        if (other === null || other === void 0 ? void 0 : other.hidden) {
+            renderComponent = null;
+        }
+        else {
+            var checkHref = (other === null || other === void 0 ? void 0 : other.disabled) ? "#" : href;
+            renderComponent = (_jsx(Link, { href: checkHref, target: (other === null || other === void 0 ? void 0 : other.disabled) ? "_self" : target, children: _jsx(Comp, __assign({}, ortakProps, { children: onlyIcon ? onlyIcon : children })) }));
+        }
+    }
+    else {
+        renderComponent = (_jsx(Comp, __assign({ type: type }, ortakProps, { children: onlyIcon ? onlyIcon : children })));
+    }
+    if (title && renderComponent) {
+        return (_jsx(Tooltip, { title: title, position: titlePosition, arrow: titleArrow, children: renderComponent }));
+    }
+    else {
+        return renderComponent;
+    }
+});