@sydsoft/base 1.58.0 → 2.0.0

package/dist/esm/popover/index.js

@@ -0,0 +1,343 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-11 18:50:06
+ */
+import { __assign, __rest } from "tslib";
+import { cloneElement, memo, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import styles from './index.module.css';
+export var Popover = memo(function MemoFunction(_a) {
+    var children = _a.children, component = _a.component, _b = _a.position, position = _b === void 0 ? 'top' : _b, _c = _a.arrow, arrow = _c === void 0 ? false : _c, _d = _a.distance, distance = _d === void 0 ? 5 : _d, _e = _a.removeWhenClickInside, removeWhenClickInside = _e === void 0 ? false : _e, _f = _a.hideBackdrop, hideBackdrop = _f === void 0 ? true : _f, _g = _a.fade, fade = _g === void 0 ? true : _g, _h = _a.arrowColor, arrowColor = _h === void 0 ? 'auto' : _h, _j = _a.hover, hover = _j === void 0 ? false : _j, _k = _a.hoverCloseDelay, hoverCloseDelay = _k === void 0 ? 120 : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, other = __rest(_a, ["children", "component", "position", "arrow", "distance", "removeWhenClickInside", "hideBackdrop", "fade", "arrowColor", "hover", "hoverCloseDelay", "keepMounted"]);
+    var refComponent = useRef(null);
+    var closeTimer = useRef(null);
+    var hoverCloseTimer = useRef(null);
+    var popoverRef = useRef(null);
+    var rootRef = useRef(null);
+    var zIndexRef = useRef(null);
+    useEffect(function () {
+        if (typeof window === 'undefined')
+            return;
+        return function () {
+            popoverSil(false);
+        };
+    }, []);
+    var checkHideBackDrop = function (e) {
+        var spopover = popoverRef.current;
+        if (!spopover)
+            return;
+        if (!((e === null || e === void 0 ? void 0 : e.target) instanceof Node)) {
+            popoverSil();
+            return;
+        }
+        if (!spopover.contains(e.target))
+            popoverSil();
+    };
+    var popoverEkle = function (e) {
+        var _a, _b;
+        if (popoverRef.current && keepMounted) {
+            var popover_1 = popoverRef.current;
+            var target_1 = e.currentTarget;
+            var wasVisible = popover_1.classList.contains(styles.visible);
+            (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.call(_a, children);
+            applyArrowColor(popover_1);
+            popoverPosition({ target: target_1, position: position });
+            popover_1.style.zIndex = String(nextPopoverZIndex());
+            popover_1.classList.remove(styles.closing);
+            popover_1.classList.add(styles.visible);
+            if (!wasVisible) {
+                if (hideBackdrop) {
+                    window.addEventListener('mousedown', checkHideBackDrop);
+                    window.addEventListener('blur', checkHideBackDrop);
+                }
+                if (removeWhenClickInside)
+                    popover_1.addEventListener('mouseup', popoverGecikmeliSil);
+                if (hover) {
+                    popover_1.addEventListener('mouseenter', clearHoverClose);
+                    popover_1.addEventListener('mouseleave', scheduleHoverClose);
+                }
+                incrementBodyPopover();
+            }
+            return;
+        }
+        popoverSil(false);
+        var popover = document.createElement('div');
+        popover.classList.add('spopover', styles.popover);
+        var zIndex = nextPopoverZIndex();
+        zIndexRef.current = zIndex;
+        document.body.appendChild(popover);
+        // ReactDOM.render(children, popover)
+        var root = createRoot(popover);
+        root.render(children);
+        popoverRef.current = popover;
+        rootRef.current = root;
+        var target = e.currentTarget;
+        refComponent.current && refComponent.current.classList.add('spopover_active');
+        setTimeout(function () {
+            var _a;
+            applyArrowColor(popover);
+            popoverPosition({ target: target, position: position });
+            popover.style.zIndex = String((_a = zIndexRef.current) !== null && _a !== void 0 ? _a : zIndex);
+            popover.classList.add(styles.visible);
+        }, 100);
+        if (hideBackdrop) {
+            window.addEventListener('mousedown', checkHideBackDrop);
+            window.addEventListener('blur', checkHideBackDrop);
+        }
+        if (removeWhenClickInside)
+            popover.addEventListener('mouseup', popoverGecikmeliSil);
+        if (hover) {
+            popover.addEventListener('mouseenter', clearHoverClose);
+            popover.addEventListener('mouseleave', scheduleHoverClose);
+        }
+        incrementBodyPopover();
+    };
+    var popoverSil = function (animate) {
+        if (animate === void 0) { animate = true; }
+        refComponent.current && refComponent.current.classList.remove('spopover_active');
+        var check = popoverRef.current;
+        var wasVisible = !!(check === null || check === void 0 ? void 0 : check.classList.contains(styles.visible));
+        if (check) {
+            if (removeWhenClickInside)
+                check.removeEventListener('mouseup', popoverGecikmeliSil);
+            if (hover) {
+                check.removeEventListener('mouseenter', clearHoverClose);
+                check.removeEventListener('mouseleave', scheduleHoverClose);
+            }
+            if (closeTimer.current)
+                window.clearTimeout(closeTimer.current);
+            if (hoverCloseTimer.current)
+                window.clearTimeout(hoverCloseTimer.current);
+            if (!fade || !animate) {
+                if (!keepMounted) {
+                    var root_1 = rootRef.current;
+                    window.setTimeout(function () {
+                        var _a;
+                        (_a = root_1 === null || root_1 === void 0 ? void 0 : root_1.unmount) === null || _a === void 0 ? void 0 : _a.call(root_1);
+                    }, 0);
+                    check.remove();
+                    popoverRef.current = null;
+                    rootRef.current = null;
+                }
+                else {
+                    check.classList.remove(styles.visible);
+                    check.classList.remove(styles.closing);
+                }
+            }
+            else if (!check.classList.contains(styles.closing)) {
+                check.classList.add(styles.closing);
+                closeTimer.current = window.setTimeout(function () {
+                    var _a;
+                    if (!keepMounted) {
+                        var root = rootRef.current;
+                        (_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
+                        check.remove();
+                        popoverRef.current = null;
+                        rootRef.current = null;
+                    }
+                    else {
+                        check.classList.remove(styles.visible);
+                        check.classList.remove(styles.closing);
+                    }
+                }, FADE_DURATION);
+            }
+        }
+        if (hideBackdrop) {
+            window.removeEventListener('mousedown', checkHideBackDrop);
+            window.removeEventListener('blur', checkHideBackDrop);
+        }
+        if (wasVisible)
+            decrementBodyPopover();
+    };
+    var popoverGecikmeliSil = function () { return setTimeout(function () { return popoverSil(); }, 100); };
+    var clearHoverClose = function () {
+        if (hoverCloseTimer.current)
+            window.clearTimeout(hoverCloseTimer.current);
+        hoverCloseTimer.current = null;
+    };
+    var scheduleHoverClose = function () {
+        clearHoverClose();
+        hoverCloseTimer.current = window.setTimeout(function () { return popoverSil(); }, hoverCloseDelay);
+    };
+    var popoverPosition = function (_a) {
+        var target = _a.target, position = _a.position;
+        var popover = popoverRef.current;
+        if (popover) {
+            var arrowMargin = arrow ? 5 : 0;
+            var margin = distance + arrowMargin;
+            var _b = normalizePosition(position), preferredSide = _b.side, preferredAlign = _b.align;
+            var targetPosition = target.getBoundingClientRect();
+            var popoverPosition_1 = popover.getBoundingClientRect();
+            var style = [];
+            var side = preferredSide;
+            if (side === 'top' && targetPosition.top - popoverPosition_1.height - margin < 0)
+                side = 'bottom';
+            if (side === 'bottom' && targetPosition.bottom + popoverPosition_1.height + margin > window.innerHeight)
+                side = 'top';
+            if (side === 'left' && targetPosition.left - popoverPosition_1.width - margin < 0)
+                side = 'right';
+            if (side === 'right' && targetPosition.right + popoverPosition_1.width + margin > window.innerWidth)
+                side = 'left';
+            if (side === 'top')
+                style.push('top:' + (targetPosition.top - popoverPosition_1.height - margin) + 'px');
+            if (side === 'bottom')
+                style.push('top:' + (targetPosition.bottom + margin) + 'px');
+            if (side === 'left')
+                style.push('left:' + (targetPosition.left - popoverPosition_1.width - margin) + 'px');
+            if (side === 'right')
+                style.push('left:' + (targetPosition.right + margin) + 'px');
+            var alignClass = 'center';
+            if (side === 'top' || side === 'bottom') {
+                var _c = resolveHorizontalAlign(preferredAlign, targetPosition, popoverPosition_1), left = _c.left, resolvedAlign = _c.alignClass;
+                alignClass = resolvedAlign;
+                style.push('left:' + left + 'px');
+            }
+            else {
+                var _d = resolveVerticalAlign(preferredAlign, targetPosition, popoverPosition_1), top_1 = _d.top, resolvedAlign = _d.alignClass;
+                alignClass = resolvedAlign;
+                style.push('top:' + top_1 + 'px');
+            }
+            var classNames = ['spopover', styles.popover, arrow ? styles.arrow : '', fade ? '' : styles.noFade, sideClass[side], alignClassMap[alignClass]].filter(Boolean);
+            popover.className = classNames.join(' ');
+            popover.setAttribute('style', style.join(';'));
+            applyArrowColor(popover);
+        }
+    };
+    function applyArrowColor(popoverEl) {
+        var _a;
+        if (!arrowColor) {
+            popoverEl.style.removeProperty('--popover-arrow-color');
+            return;
+        }
+        if (arrowColor === 'auto') {
+            var targetEl = (_a = popoverEl.firstElementChild) !== null && _a !== void 0 ? _a : popoverEl;
+            var bg = window.getComputedStyle(targetEl).backgroundColor;
+            if (bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') {
+                var parent_1 = targetEl.parentElement;
+                if (parent_1)
+                    bg = window.getComputedStyle(parent_1).backgroundColor;
+            }
+            if (bg)
+                popoverEl.style.setProperty('--popover-arrow-color', bg);
+            return;
+        }
+        popoverEl.style.setProperty('--popover-arrow-color', arrowColor);
+    }
+    function incrementBodyPopover() {
+        var body = document.body;
+        var count = Number(body.dataset.spopoverCount || '0') + 1;
+        body.dataset.spopoverCount = String(count);
+        if (count > 0)
+            body.classList.add('spopover_open');
+    }
+    function decrementBodyPopover() {
+        var body = document.body;
+        var count = Math.max(0, Number(body.dataset.spopoverCount || '0') - 1);
+        if (count === 0) {
+            delete body.dataset.spopoverCount;
+            body.classList.remove('spopover_open');
+        }
+        else {
+            body.dataset.spopoverCount = String(count);
+        }
+    }
+    function nextPopoverZIndex() {
+        var body = document.body;
+        var current = Number(body.dataset.spopoverZIndex || '10000');
+        var next = current + 1;
+        body.dataset.spopoverZIndex = String(next);
+        return next;
+    }
+    var componentProps = __assign({ ref: refComponent, onClick: function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            popoverEkle(e);
+        } }, other);
+    if (hover) {
+        componentProps.onMouseEnter = function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            clearHoverClose();
+            popoverEkle(e);
+        };
+        componentProps.onMouseLeave = function (e) {
+            var _a, _b;
+            (_b = (_a = component.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            scheduleHoverClose();
+        };
+    }
+    return cloneElement(component, componentProps);
+});
+var sideClass = {
+    top: styles.top,
+    bottom: styles.bottom,
+    left: styles.left,
+    right: styles.right
+};
+var alignClassMap = {
+    start: styles.alignStart,
+    center: styles.alignCenter,
+    end: styles.alignEnd
+};
+var FADE_DURATION = 160;
+var normalizePosition = function (position) {
+    var _a = position.split('-'), side = _a[0], rawAlign = _a[1];
+    if (side === 'top' || side === 'bottom') {
+        var align_1 = rawAlign === 'left' || rawAlign === 'right' ? rawAlign : 'center';
+        return { side: side, align: align_1 };
+    }
+    var align = rawAlign === 'top' || rawAlign === 'bottom' ? rawAlign : 'center';
+    return { side: side, align: align };
+};
+var resolveHorizontalAlign = function (align, target, popover) {
+    var clamp = 2;
+    var left = 0;
+    var alignClass = 'center';
+    if (align === 'left') {
+        left = target.left;
+        alignClass = 'start';
+    }
+    else if (align === 'right') {
+        left = target.right - popover.width;
+        alignClass = 'end';
+    }
+    else {
+        left = target.left + target.width / 2 - popover.width / 2;
+        alignClass = 'center';
+    }
+    if (left < clamp) {
+        left = clamp;
+        alignClass = 'start';
+    }
+    else if (left + popover.width > window.innerWidth - clamp) {
+        left = window.innerWidth - popover.width - clamp;
+        alignClass = 'end';
+    }
+    return { left: left, alignClass: alignClass };
+};
+var resolveVerticalAlign = function (align, target, popover) {
+    var clamp = 2;
+    var top = 0;
+    var alignClass = 'center';
+    if (align === 'top') {
+        top = target.top;
+        alignClass = 'start';
+    }
+    else if (align === 'bottom') {
+        top = target.bottom - popover.height;
+        alignClass = 'end';
+    }
+    else {
+        top = target.top + target.height / 2 - popover.height / 2;
+        alignClass = 'center';
+    }
+    if (top < clamp) {
+        top = clamp;
+        alignClass = 'start';
+    }
+    else if (top + popover.height > window.innerHeight - clamp) {
+        top = window.innerHeight - popover.height - clamp;
+        alignClass = 'end';
+    }
+    return { top: top, alignClass: alignClass };
+};

package/dist/esm/popover/index.module.css

@@ -0,0 +1,95 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-11 18:49:45
+ */
+
+.popover {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 160ms ease;
+}
+
+.noFade {
+    transition: none;
+}
+
+.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.closing {
+    opacity: 0;
+}
+
+.arrow::after {
+    content: "";
+    position: absolute;
+    border-width: 5px;
+    border-style: solid;
+    width: 0;
+    height: 0;
+    border-color: var(--popover-arrow-color, #757575);
+}
+
+.arrow.top::after {
+    top: 100%;
+    border-color: var(--popover-arrow-color, #757575) transparent transparent transparent;
+}
+
+.arrow.bottom::after {
+    bottom: 100%;
+    border-color: transparent transparent var(--popover-arrow-color, #757575) transparent;
+}
+
+.arrow.left::after {
+    left: 100%;
+    margin-left: -1px;
+    border-color: transparent transparent transparent var(--popover-arrow-color, #757575);
+}
+
+.arrow.right::after {
+    right: 100%;
+    margin-right: -1px;
+    border-color: transparent var(--popover-arrow-color, #757575) transparent transparent;
+}
+
+.arrow.top.alignStart::after,
+.arrow.bottom.alignStart::after {
+    left: 12px;
+}
+
+.arrow.top.alignCenter::after,
+.arrow.bottom.alignCenter::after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.arrow.top.alignEnd::after,
+.arrow.bottom.alignEnd::after {
+    right: 12px;
+}
+
+.arrow.left.alignStart::after,
+.arrow.right.alignStart::after {
+    top: 12px;
+}
+
+.arrow.left.alignCenter::after,
+.arrow.right.alignCenter::after {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.arrow.left.alignEnd::after,
+.arrow.right.alignEnd::after {
+    bottom: 12px;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:23:07
+ */
+import React, { ReactElement } from "react";
+export type typeTooltipPosition = "top" | "bottom" | "left" | "right";
+interface Props {
+    children: ReactElement;
+    title: string;
+    position?: typeTooltipPosition;
+    arrow?: boolean;
+    distance?: number;
+}
+export declare const Tooltip: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/tooltip/index.js

@@ -0,0 +1,124 @@
+/**
+ * @author    : izzetseydaoglu
+ * @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
+ * @version   : 2026-02-10 20:23:07
+ */
+import { __assign, __rest } from "tslib";
+import React, { memo, useEffect } from "react";
+export var Tooltip = memo(function MemoFunction(_a) {
+    var children = _a.children, title = _a.title, _b = _a.position, position = _b === void 0 ? "top" : _b, _c = _a.arrow, arrow = _c === void 0 ? false : _c, _d = _a.distance, distance = _d === void 0 ? 5 : _d, other = __rest(_a, ["children", "title", "position", "arrow", "distance"]);
+    useEffect(function () {
+        if (typeof window === "undefined")
+            return null;
+        var cssCheck = document.getElementsByClassName("stooltip_css")[0];
+        if (!cssCheck) {
+            var head = document.getElementsByTagName('head')[0];
+            var s = document.createElement('style');
+            s.setAttribute('type', 'text/css');
+            s.classList.add("stooltip_css");
+            s.appendChild(document.createTextNode(tooltipCss));
+            head.appendChild(s);
+        }
+        return function () { return tooltipSil(); };
+    }, []);
+    var tooltipEkle = function (e) {
+        tooltipSil();
+        var tooltip = document.createElement("div");
+        tooltip.innerHTML = title;
+        tooltip.classList.add("stooltip");
+        document.body.appendChild(tooltip);
+        tooltipPosition({ target: e.currentTarget, position: position });
+    };
+    var tooltipSil = function () {
+        var check = document.body.getElementsByClassName("stooltip")[0];
+        if (check)
+            check.remove();
+    };
+    var tooltipPosition = function (_a) {
+        var target = _a.target, position = _a.position;
+        var tooltip = document.body.getElementsByClassName("stooltip")[0];
+        if (tooltip) {
+            var arrowMargin = (arrow) ? 5 : 0;
+            var margin = distance + arrowMargin;
+            if (arrow)
+                tooltip.classList.add("arrow");
+            var targetPosition = target.getBoundingClientRect();
+            var tooltipPosition_1 = tooltip.getBoundingClientRect();
+            var style = [];
+            if (position === "top" || position === "bottom") {
+                if (position === "top") {
+                    if ((targetPosition.top - tooltipPosition_1.height - margin) < 0) {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    }
+                    else {
+                        style.push("top:" + (targetPosition.top - tooltipPosition_1.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    }
+                }
+                if (position === "bottom") {
+                    if ((targetPosition.bottom + tooltipPosition_1.height + margin) > window.innerHeight) {
+                        style.push("top:" + (targetPosition.top - tooltipPosition_1.height - margin) + "px");
+                        tooltip.classList.add("top");
+                    }
+                    else {
+                        style.push("top:" + (targetPosition.bottom + margin) + "px");
+                        tooltip.classList.add("bottom");
+                    }
+                }
+                // if ((targetPosition.left - tooltipPosition.width) < 0) {
+                if ((targetPosition.left + (targetPosition.width / 2) - (tooltipPosition_1.width / 2)) < 0) {
+                    style.push("left:2px");
+                    tooltip.classList.add("start");
+                }
+                else if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition_1.width) > window.innerWidth) {
+                    style.push("right:2px");
+                    tooltip.classList.add("end");
+                }
+                else {
+                    style.push("left:" + (targetPosition.left + (targetPosition.width / 2)) + "px");
+                    style.push("transform:translate(-50%,0)");
+                    tooltip.classList.add("center");
+                }
+            }
+            if (position === "left" || position === "right") {
+                if (position === "left") {
+                    if ((targetPosition.left - tooltipPosition_1.width - margin) < 0) {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    }
+                    else {
+                        style.push("left:" + (targetPosition.left - tooltipPosition_1.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    }
+                }
+                if (position === "right") {
+                    if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition_1.width + margin) > window.innerWidth) {
+                        style.push("left:" + (targetPosition.left - tooltipPosition_1.width - margin) + "px");
+                        tooltip.classList.add("left");
+                    }
+                    else {
+                        style.push("left:" + (targetPosition.right + margin) + "px");
+                        tooltip.classList.add("right");
+                    }
+                }
+                if ((targetPosition.top + (targetPosition.height / 2) - (tooltipPosition_1.height / 2)) < 0) {
+                    style.push("top:2px");
+                    tooltip.classList.add("start");
+                }
+                else if ((targetPosition.top + (targetPosition.height / 2) + (tooltipPosition_1.height / 2)) > window.innerHeight) {
+                    style.push("bottom:2px");
+                    tooltip.classList.add("end");
+                }
+                else {
+                    style.push("top:" + (targetPosition.top + (targetPosition.height / 2)) + "px");
+                    style.push("transform:translate(0,-50%)");
+                    tooltip.classList.add("center");
+                }
+            }
+            tooltip.setAttribute("style", style.join(";"));
+        }
+    };
+    return React.cloneElement(children, __assign({ onMouseEnter: tooltipEkle, onMouseLeave: tooltipSil, onMouseDown: tooltipSil }, other));
+});
+var tooltipCss = "\n.stooltip {\n    position: fixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #1a1a1a;\n    color: rgba(255,255,255,0.9);\n    text-align: center;\n    font-size: 0.9rem;\n    font-weight:400;\n    padding: 5px 10px;\n    border-radius: 8px;\n    z-index: 1000000;\n    opacity: 0.9;\n    pointer-events: none;\n    /*transition: all 0.1s;*/\n    white-space:pre-line;\n    max-width: 300px;\n    animation: stooltip_fadein 0.7s;\n}\n\n.stooltip.arrow:after {\n    content: \"\";\n    position: absolute;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n}\n\n.stooltip.arrow.top:after {\n    top: 100%;\n    border-color: #1a1a1a transparent transparent transparent;\n}\n\n.stooltip.arrow.top.start:after { left: 15px;}\n\n.stooltip.arrow.top.center:after { left: 50%;}\n\n.stooltip.arrow.top.end:after { right: 15px;}\n\n\n.stooltip.arrow.bottom:after {\n    bottom: 100%;\n    border-color: transparent transparent #1a1a1a transparent;\n}\n\n.stooltip.arrow.bottom.start:after { left: 15px;}\n\n.stooltip.arrow.bottom.center:after { left: 50%;}\n\n.stooltip.bottom.end:after { right: 15px;}\n\n.stooltip.arrow.left:after {\n    margin-left: -1px;\n    left: 100%;\n    border-color: transparent transparent transparent #1a1a1a;\n}\n\n.stooltip.arrow.left.start:after { top: 5px;}\n\n.stooltip.arrow.left.center:after { top: 50%; margin-top: -5px;}\n\n.stooltip.arrow.left.end:after { bottom: 15px;}\n\n.stooltip.arrow.right:after {\n    margin-right: -1px;\n    right: 100%;\n    border-color: transparent #1a1a1a transparent transparent;\n}\n\n.stooltip.arrow.right.start:after { top: 5px;}\n\n.stooltip.arrow.right.center:after { top: 50%; margin-top: -5px;}\n\n.stooltip.arrow.right.end:after { bottom: 15px;}\n\n@keyframes stooltip_fadein {\n    from { opacity: 0; }\n    to   { opacity: 0.85; }\n}\n";

package/package.json

@@ -1,20 +1,23 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.58.0",
-    "main": "../dist/cjs/index.js",
-    "module": "../dist/esm/index.js",
-    "types": "../dist/esm/index.d.ts",
+    "version": "2.0.0",
+    "main": "./dist/esm/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/esm/index.d.ts",
     "files": [
-        "../dist/",
+        "./dist/",
         "README.md"
     ],
     "scripts": {
-        "clean": "rm -rf ../dist",
+        "clean": "rm -rf ./dist",
         "test": "rm -rf ../*.tgz && rm -rf ../.next && npm run build && npm pack --pack-destination ../ && cd ../ && npm uninstall @sydsoft/base && npm install *.tgz && npm run dev",
-        "copyFiles": "find . -name \"*.css\" -not -path \"../dist/*\" -exec sh -c 'for f do mkdir -p \"../dist/esm/$(dirname \"$f\")\"; cp \"$f\" \"../dist/esm/$f\"; done' sh {} +",
+        "copyFiles": "find . -name \"*.css\" -not -path \"./dist/*\" -exec sh -c 'for f do mkdir -p \"./dist/esm/$(dirname \"$f\")\"; cp \"$f\" \"./dist/esm/$f\"; done' sh {} +",
         "build": "npm run clean && tsc && npm run copyFiles",
-        "publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public && npm run clean"
+        "publish:patch": "npm run build && npm version patch && npm publish --access public && npm run clean",
+        "publish:minor": "npm run build && npm version minor && npm publish --access public && npm run clean",
+        "publish:major": "npm run build && npm version major && npm publish --access public && npm run clean",
+        "publish:test": "npm run build && npm publish --dry-run && npm run clean"
     },
     "publishConfig": {
         "access": "public"
@@ -30,6 +33,7 @@
     "peerDependencies": {
         "react": ">=18",
         "react-dom": ">=18",
+        "next": ">=13",
         "nookies": "^2.5.2"
     },
     "devDependencies": {