@ayseaistudio/ui-components 3.11.1 → 3.11.3

package/dist/LoginInput/LoginInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import React, { useEffect, useReducer, useState } from "react";
 import "./style.css";
-import { IconLayoutDashboard, IconUser, IconPassword, IconEye, IconEyeOff } from "@tabler/icons-react";
+import { IconLayoutDashboard, IconUser, IconEye, IconEyeOff, IconLock } from "@tabler/icons-react";
 export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status = "default", className = "", icon = _jsx(IconLayoutDashboard, { size: 20, color: "#B0B0B0" }), value = "", onChange, inputType = "text", version, singleChar = false, inputRef, onKeyDown, }) => {
     let finalPlaceholder = placeholder;
     let finalInputType = inputType;
@@ -37,7 +37,7 @@ export const LoginInput = ({ withIcon = true, placeholder = "Enter text", status
         finalIcon = _jsx(IconUser, { size: 20, color: iconColor });
     }
     else if (version === "password") {
-        finalIcon = _jsx(IconPassword, { size: 20, color: iconColor });
+        finalIcon = _jsx(IconLock, { size: 20, color: iconColor });
     }
     else if (icon && React.isValidElement(icon) && icon.type === IconLayoutDashboard) {
         finalIcon = _jsx(IconLayoutDashboard, { size: 20, color: iconColor });

package/dist/MessageInputField/MessageInputField.js

@@ -2,15 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import "./style.css";
-import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+import { IconArrowDown, IconBold, IconHash, IconItalic, IconMoodSmile, IconPhoto, IconStrikethrough, IconUnderline, } from "@tabler/icons-react";
 export const MessageInputField = ({ text = "", enter = true, richTextFormattingTools = true, className, placeholder = "Mesaj yazın...", withPicture = true, withEmoji = true, withBold = true, withItalic = true, withUnderline = true, withStrikethrough = true, withHash = true, value, onChange, onKeyDown, onValueChange, onEnter, }) => {
     const editorRef = useRef(null);
     const fileInputRef = useRef(null);
     const [showEmoji, setShowEmoji] = useState(false);
+    const [emojiPanelAbove, setEmojiPanelAbove] = useState(false);
     const emojiTriggerRef = useRef(null);
     const emojiPanelRef = useRef(null);
     const [isEmpty, setIsEmpty] = useState(true);
+    /** Approximate height of emoji panel (content + padding) for viewport check */
+    const EMOJI_PANEL_HEIGHT = 220;
+    const EMOJI_PANEL_GAP = 8;
     useEffect(() => {
         if (editorRef.current) {
             const hasInitial = (text ?? "").length > 0;
@@ -90,7 +94,17 @@ export const MessageInputField = ({ text = "", enter = true, richTextFormattingT
                                                     handleInsertImage(file);
                                                 if (fileInputRef.current)
                                                     fileInputRef.current.value = "";
-                                            } })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => setShowEmoji((s) => !s) }), withEmoji && showEmoji && (_jsx("div", { ref: emojiPanelRef, className: "emoji-panel", children: _jsx("div", { className: "emoji-grid", children: EMOJIS.map((e) => (_jsx("button", { type: "button", onMouseDown: (evt) => evt.preventDefault(), onClick: () => {
+                                            } })] }), _jsxs("div", { ref: emojiTriggerRef, className: "emoji-trigger", children: [withEmoji && _jsx(IconMoodSmile, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => {
+                                                if (!showEmoji) {
+                                                    const trigger = emojiTriggerRef.current;
+                                                    if (trigger) {
+                                                        const rect = trigger.getBoundingClientRect();
+                                                        const spaceBelow = typeof window !== "undefined" ? window.innerHeight - rect.bottom : EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP;
+                                                        setEmojiPanelAbove(spaceBelow < EMOJI_PANEL_HEIGHT + EMOJI_PANEL_GAP);
+                                                    }
+                                                }
+                                                setShowEmoji((s) => !s);
+                                            } }), withEmoji && showEmoji && (_jsx("div", { ref: emojiPanelRef, className: `emoji-panel ${emojiPanelAbove ? "emoji-panel--above" : ""}`, children: _jsx("div", { className: "emoji-grid", children: EMOJIS.map((e) => (_jsx("button", { type: "button", onMouseDown: (evt) => evt.preventDefault(), onClick: () => {
                                                         exec("insertText", e);
                                                         setShowEmoji(false);
                                                     }, className: "emoji-btn", children: e }, e))) }) }))] })] })] }) }))] }));

package/dist/ProfileButton/style.css

@@ -140,18 +140,10 @@
   line-height: var(--b2-black-line-height);
 }
 
-.profile-button.size-0-x-small .frame {
-  height: 24px;
-}
-
 .profile-button.size-0-large .frame {
   gap: 6px;
 }
 
-.profile-button.size-0-small .frame {
-  height: 28px;
-}
-
 .profile-button.size-0-x-small .text {
   -webkit-line-clamp: 0;
   font-family: var(--b2-bold-font-family);

package/dist/Tags/Tags.d.ts

@@ -9,9 +9,10 @@ interface Props {
     disabled?: "off" | "on";
     className?: any;
     icon?: React.JSX.Element;
+    bold?: boolean;
 }
 export declare const Tags: {
-    ({ text, size, colors, version, disabled, className, icon, }: Props): React.JSX.Element;
+    ({ text, size, colors, version, disabled, className, icon, bold, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         withText: PropTypes.Requireable<boolean>;
@@ -20,6 +21,7 @@ export declare const Tags: {
         colors: PropTypes.Requireable<string>;
         version: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<string>;
+        bold: PropTypes.Requireable<boolean>;
     };
 };
 export {};

package/dist/Tags/Tags.js

@@ -21,11 +21,11 @@ const getIconColor = (colors, disabled) => {
     }
     return undefined;
 };
-export const Tags = ({ text, size, colors, version, disabled, className, icon, }) => {
+export const Tags = ({ text, size, colors, version, disabled, className, icon, bold, }) => {
     return (_jsxs("div", { className: `tags ${colors} ${size} ${version} ${className}`, children: [icon && (React.cloneElement(icon, {
                 className: `${["small", "x-small"].includes(size) ? "class" : "class-2"}`,
                 color: getIconColor(colors, disabled)
-            })), text && (_jsx("div", { className: `text size-${size} ${disabled} version-${version} colors-${colors}`, children: text }))] }));
+            })), text && (_jsx("div", { className: `text size-${size} ${disabled} version-${version} colors-${colors} ${bold ? "bold" : ""}`, children: text }))] }));
 };
 Tags.propTypes = {
     text: PropTypes.string,
@@ -44,4 +44,5 @@ Tags.propTypes = {
     ]),
     version: PropTypes.oneOf(["vertical", "horizontal"]),
     disabled: PropTypes.oneOf(["off", "on"]),
+    bold: PropTypes.bool,
 };

package/dist/Tags/style.css

@@ -171,3 +171,7 @@
 .tags .colors-lime.off {
   color: #567c0f;
 }
+
+.tags .text.bold {
+  font-weight: bold;
+}

package/package.json

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