@ayseaistudio/ui-components 3.3.0 → 3.4.0

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    three?: boolean;
+    one?: boolean;
+    two?: boolean;
+    four?: boolean;
+    property1: "two" | "one" | "three" | "four";
+    tertiaryButtonWithRightIcon?: boolean;
+    tertiaryButtonText?: string;
+    tertiaryButtonIcon?: React.JSX.Element;
+    labelText?: string;
+    labelIcon?: React.JSX.Element;
+    onTertiaryButtonClick?: () => void;
+    thirdLevelText?: string;
+    thirdLevelIcon?: React.JSX.Element;
+    secondLevelText?: string;
+    secondLevelIcon?: React.JSX.Element;
+    onSecondLevelClick?: () => void;
+}
+export declare const Breadcrumbs: {
+    ({ three, one, two, four, property1, tertiaryButtonWithRightIcon, tertiaryButtonText, tertiaryButtonIcon, labelText, labelIcon, onTertiaryButtonClick, thirdLevelText, thirdLevelIcon, secondLevelText, secondLevelIcon, onSecondLevelClick, }: Props): React.JSX.Element;
+    propTypes: {
+        three: PropTypes.Requireable<boolean>;
+        one: PropTypes.Requireable<boolean>;
+        two: PropTypes.Requireable<boolean>;
+        four: PropTypes.Requireable<boolean>;
+        property1: PropTypes.Requireable<string>;
+        tertiaryButtonWithRightIcon: PropTypes.Requireable<boolean>;
+        tertiaryButtonText: PropTypes.Requireable<string>;
+        labelText: PropTypes.Requireable<string>;
+        onTertiaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        thirdLevelText: PropTypes.Requireable<string>;
+        thirdLevelIcon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        secondLevelText: PropTypes.Requireable<string>;
+        secondLevelIcon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        onSecondLevelClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { IconChevronRight, IconLayoutDashboard, IconUser } from "@tabler/icons-react";
+import { TertiaryButton } from "../TertiaryButton";
+import { Label } from "../Label";
+export const Breadcrumbs = ({ three = true, one = true, two = true, four = true, property1, tertiaryButtonWithRightIcon, tertiaryButtonText = "Button", tertiaryButtonIcon = (_jsx(IconLayoutDashboard, { size: 16, color: "#6D6D6D" })), labelText = "Label", labelIcon = (_jsx(IconLayoutDashboard, { size: 18, color: "#5D5D5D" })), onTertiaryButtonClick, thirdLevelText, thirdLevelIcon, secondLevelText, secondLevelIcon, onSecondLevelClick, }) => {
+    return (_jsxs("div", { className: "breadcrumbs", children: [one && (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [["four", "three", "two"].includes(property1) && (_jsx(TertiaryButton, { className: "instance-node", color: "black", leftIcon: tertiaryButtonWithRightIcon ? tertiaryButtonIcon : undefined, size: "medium", status: "default", text: tertiaryButtonText, onClick: onTertiaryButtonClick })), property1 === "one" && (_jsx(Label, { bold: "on", className: "instance-node-bordered", color: "black", leftIcon: _jsx(IconLayoutDashboard, { size: 18, color: "#5D5D5D" }), size: "medium", spacing: "on", stroke: "on", text: "Label", version: "primary" }))] }) })), two && _jsx(IconChevronRight, { size: 16, color: "#5D5D5D" }), two && (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [["four", "one"].includes(property1) && (_jsx(TertiaryButton, { className: "instance-node", color: "black", leftIcon: _jsx(IconUser, { size: 16, color: "#6D6D6D" }), size: "medium", status: "default", text: "Button", onClick: onTertiaryButtonClick })), property1 === "three" && (_jsx(TertiaryButton, { className: "instance-node", color: "black", leftIcon: secondLevelIcon || _jsx(IconLayoutDashboard, { size: 16, color: "#6D6D6D" }), size: "medium", status: "default", text: secondLevelText || "Detay", onClick: onSecondLevelClick })), property1 === "two" && (_jsx(Label, { bold: "on", className: "instance-node-bordered", color: "black", leftIcon: labelIcon, size: "medium", spacing: "on", stroke: "on", text: labelText, version: "primary" }))] }) })), three && _jsx(IconChevronRight, { size: 16, color: "#5D5D5D" }), three && (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [["four", "one", "two"].includes(property1) && property1 !== "three" && (_jsx(TertiaryButton, { className: "instance-node", color: "black", leftIcon: _jsx(IconLayoutDashboard, { size: 16, color: "#6D6D6D" }), size: "medium", status: "default", text: "Button", onClick: onTertiaryButtonClick })), property1 === "three" && thirdLevelText && (_jsx(Label, { bold: "on", className: "instance-node-bordered", color: "black", leftIcon: thirdLevelIcon || _jsx(IconLayoutDashboard, { size: 18, color: "#5D5D5D" }), size: "medium", spacing: "on", stroke: "on", text: thirdLevelText, version: "primary" }))] }) })), four && _jsx(IconChevronRight, { size: 16, color: "#5D5D5D" }), four && (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [property1 === "four" && (_jsx(Label, { bold: "on", className: "instance-node", color: "black", leftIcon: _jsx(IconLayoutDashboard, { size: 18, color: "#5D5D5D" }), size: "medium", spacing: "on", stroke: "on", text: "Label", version: "primary" })), ["one", "two"].includes(property1) && (_jsx(TertiaryButton, { className: "instance-node", color: "black", leftIcon: _jsx(IconLayoutDashboard, { size: 16, color: "#6D6D6D" }), size: "medium", status: "default", text: "Button", onClick: onTertiaryButtonClick })), property1 === "three" && thirdLevelText && (_jsx(Label, { bold: "on", className: "instance-node-bordered", color: "black", leftIcon: thirdLevelIcon || _jsx(IconLayoutDashboard, { size: 18, color: "#5D5D5D" }), size: "medium", spacing: "on", stroke: "on", text: thirdLevelText, version: "primary" }))] }) }))] }));
+};
+Breadcrumbs.propTypes = {
+    three: PropTypes.bool,
+    one: PropTypes.bool,
+    two: PropTypes.bool,
+    four: PropTypes.bool,
+    property1: PropTypes.oneOf(["two", "one", "three", "four"]),
+    tertiaryButtonWithRightIcon: PropTypes.bool,
+    tertiaryButtonText: PropTypes.string,
+    labelText: PropTypes.string,
+    onTertiaryButtonClick: PropTypes.func,
+    thirdLevelText: PropTypes.string,
+    thirdLevelIcon: PropTypes.element,
+    secondLevelText: PropTypes.string,
+    secondLevelIcon: PropTypes.element,
+    onSecondLevelClick: PropTypes.func,
+};

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./Breadcrumbs";

package/dist/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./Breadcrumbs";

package/dist/Breadcrumbs/style.css

@@ -0,0 +1,14 @@
+.breadcrumbs {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.breadcrumbs .instance-node {
+  flex: 0 0 auto !important;
+}
+
+.breadcrumbs .instance-node-bordered {
+  border: 1px solid rgba(209, 209, 209, 1);
+  border-radius: 8px;
+}

package/dist/CallCenterTasks/CallCenterTasks.d.ts

@@ -3,16 +3,14 @@ import "./style.css";
 interface Props {
     status?: "warning" | "complete" | "default";
     className?: any;
-    icon?: React.ReactNode;
+    icon?: React.JSX.Element;
     divideVerticalDivideVertical?: string;
     strikethroughText?: string;
     labelText?: string;
-    strikethroughDivClassName?: any;
-    strikethroughIcon?: React.ReactNode;
     index?: number;
 }
 export declare const CallCenterTasks: {
-    ({ status, className, strikethroughText, labelText, strikethroughDivClassName, strikethroughIcon, index, }: Props): React.ReactNode;
+    ({ status, className, strikethroughText, labelText, index, }: Props): React.JSX.Element;
     propTypes: {
         status: PropTypes.Requireable<string>;
         strikethroughText: PropTypes.Requireable<string>;

package/dist/CallCenterTasks/CallCenterTasks.js

@@ -3,9 +3,7 @@ import PropTypes from "prop-types";
 import { Label } from "../Label";
 import { Strikethrough } from "../Strikethrough";
 import "./style.css";
-import { IconLayoutDashboard, IconCheck, IconX } from "@tabler/icons-react";
-export const CallCenterTasks = ({ status, className, strikethroughText = "Selamlaşma ve kendini tanıtma.", labelText, strikethroughDivClassName, strikethroughIcon = status === "complete" ? _jsx(IconCheck, { className: "icons-12", color: "#fff" }) :
-    status === "warning" ? _jsx(IconX, { className: "icons-12", color: "#fff" }) : _jsx(IconLayoutDashboard, { className: "icons-12", color: "#fff" }), index = 1, }) => {
+export const CallCenterTasks = ({ status, className, strikethroughText = "Selamlaşma ve kendini tanıtma.", labelText, index = 1, }) => {
     return (_jsxs("div", { className: `call-center-tasks ${className}`, children: [_jsx("div", { className: "frame-5", "data-status": status, children: _jsx("div", { className: `frame-6 status-4-${status}` }) }), _jsx(Label, { bold: "on", className: "label-2", color: status === "warning" ? "galliano" : "black", size: "medium", spacing: "on", stroke: "off", text: labelText || index.toString(), version: "primary" }), _jsx("div", { className: `frame-7 status-5-${status}`, children: _jsx(Strikethrough, { className: "strikethrough-checkbox", color: "black", size: "medium", status: status === "default" ? "default" : "selected", text: strikethroughText }) })] }));
 };
 CallCenterTasks.propTypes = {

package/dist/Label/style.css

@@ -58,11 +58,11 @@
   gap: 4px;
 }
 
-.label.on {
+.label.stroke-on {
   border: 1px solid;
 }
 
-.label.off {
+.label.stroke-off {
   border: none;
 }
 

package/dist/ProfileButton/ProfileButton.d.ts

@@ -14,9 +14,13 @@ interface Props {
     avatarLetter?: string;
     activitySize?: string;
     activityColor?: string;
+    hover?: boolean;
+    useInfoTooltip?: boolean;
+    tooltip?: string;
+    tooltipWithIcon?: boolean;
 }
 export declare const ProfileButton: {
-    ({ text, subtext, activity, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }: Props): React.JSX.Element;
+    ({ text, subtext, activity, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, hover, useInfoTooltip, tooltip, tooltipWithIcon, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         subtext: PropTypes.Requireable<string>;
@@ -29,6 +33,10 @@ export declare const ProfileButton: {
         avatarLetter: PropTypes.Requireable<string>;
         activitySize: PropTypes.Requireable<string>;
         activityColor: PropTypes.Requireable<string>;
+        hover: PropTypes.Requireable<boolean>;
+        useInfoTooltip: PropTypes.Requireable<boolean>;
+        tooltip: PropTypes.Requireable<string>;
+        tooltipWithIcon: PropTypes.Requireable<boolean>;
     };
 };
 export {};

package/dist/ProfileButton/ProfileButton.js

@@ -1,10 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./style.css";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Avatar } from "../Avatar";
 import { Activity } from "../Activity";
-export const ProfileButton = ({ text, subtext, activity = false, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }) => {
-    return (_jsxs("div", { className: `profile-button size-0-${size} status-0-${status} ${className}`, children: [_jsx(Avatar, { className: avatarSizeLargeColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: avatarStatus, version: "default" }), _jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }), activity && (_jsx(Activity, { className: `class`, color: activityColor, size: activitySize }))] }));
+import { InfoTooltip } from "../InfoTooltip";
+export const ProfileButton = ({ text, subtext, activity = false, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, hover = false, useInfoTooltip = false, tooltip = "", tooltipWithIcon = true, }) => {
+    const tooltipTimerRef = useRef(undefined);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const containerRef = useRef(null);
+    const [anchorPos, setAnchorPos] = useState({ left: 0, top: 0 });
+    useEffect(() => {
+        return () => {
+            if (tooltipTimerRef.current)
+                window.clearTimeout(tooltipTimerRef.current);
+        };
+    }, []);
+    const handleMouseEnter = () => {
+        const tooltipText = (tooltip && tooltip.trim().length > 0) ? tooltip : text;
+        if (!tooltipText)
+            return;
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+            setAnchorPos({ left: rect.left, top: rect.bottom });
+        }
+        tooltipTimerRef.current = window.setTimeout(() => {
+            setIsTooltipVisible(true);
+        }, 150);
+    };
+    const handleMouseLeave = () => {
+        if (tooltipTimerRef.current)
+            window.clearTimeout(tooltipTimerRef.current);
+        setIsTooltipVisible(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `profile-button size-0-${size} status-0-${status} ${className}`, onMouseEnter: hover ? handleMouseEnter : undefined, onMouseLeave: hover ? handleMouseLeave : undefined, ref: containerRef, style: { cursor: hover ? "pointer" : "default" }, children: [_jsx(Avatar, { className: avatarSizeLargeColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: avatarStatus, version: "default" }), _jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }), activity && (_jsx(Activity, { className: `class`, color: activityColor, size: activitySize }))] }), isTooltipVisible && useInfoTooltip
+                ? typeof document !== "undefined" &&
+                    createPortal(_jsx("div", { style: {
+                            position: "fixed",
+                            top: Math.min(anchorPos.top + 6, (typeof window !== "undefined" ? window.innerHeight : 0) - 100),
+                            left: Math.max(8, Math.min(anchorPos.left, (typeof window !== "undefined" ? window.innerWidth : 0) - 300)),
+                            zIndex: 9999,
+                            pointerEvents: "none",
+                        }, children: _jsx(InfoTooltip, { text: (tooltip && tooltip.trim().length > 0) ? tooltip : (text || ""), withIcon: tooltipWithIcon }) }), document.body)
+                : null] }));
 };
 ProfileButton.propTypes = {
     text: PropTypes.string,
@@ -18,4 +57,8 @@ ProfileButton.propTypes = {
     avatarLetter: PropTypes.string,
     activitySize: PropTypes.string,
     activityColor: PropTypes.string,
+    hover: PropTypes.bool,
+    useInfoTooltip: PropTypes.bool,
+    tooltip: PropTypes.string,
+    tooltipWithIcon: PropTypes.bool,
 };

package/dist/index.d.ts

@@ -39,3 +39,4 @@ export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
 export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
 export { ColorFlag } from "./ColorFlag/ColorFlag";
 export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";
+export { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";

package/dist/index.js

@@ -39,3 +39,4 @@ export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
 export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
 export { ColorFlag } from "./ColorFlag/ColorFlag";
 export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";
+export { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",