@ayseaistudio/ui-components 2.0.0 → 2.1.1

package/README.md

@@ -19,7 +19,9 @@ If you encounter a React version conflict, use:
 npm install @ayseaistudio/ui-components --legacy-peer-deps
 ```
 
----
+```bash
+npm list @ayseaistudio/ui-components
+```
 
 ## 🛠️ Development & Publishing Workflow
 

package/dist/InputField/InputField.d.ts

@@ -24,9 +24,11 @@ interface Props {
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    selectFromPopup?: boolean;
+    onRequestPopupOpen?: (anchorEl: HTMLElement | null) => void;
 }
 export declare const InputField: {
-    ({ withAlertIcon, withAlertMessage, leftIcon, rightIcon, defaultValue, alertText, clearable, text, headerText, withHeader, size, status, radius, className, frameClassName, isPassword, value, onChange, onClear, onFocus, onBlur, onKeyDown, }: Props): React.JSX.Element;
+    ({ withAlertIcon, withAlertMessage, leftIcon, rightIcon, defaultValue, alertText, clearable, text, headerText, withHeader, size, status, radius, className, frameClassName, isPassword, value, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup, onRequestPopupOpen, }: Props): React.JSX.Element;
     propTypes: {
         withAlertIcon: PropTypes.Requireable<boolean>;
         withAlertMessage: PropTypes.Requireable<boolean>;
@@ -51,6 +53,8 @@ export declare const InputField: {
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         clearable: PropTypes.Requireable<boolean>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        selectFromPopup: PropTypes.Requireable<boolean>;
+        onRequestPopupOpen: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export {};

package/dist/InputField/InputField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import React, { useReducer, useState } from "react";
+import React, { useReducer, useRef, useState } from "react";
 import "./style.css";
 import { IconEyeOff, IconEye, IconX, IconAlertSquareRounded } from "@tabler/icons-react";
 const initialState = (size, status, radius) => ({
@@ -21,13 +21,18 @@ const reducer = (state, action) => {
             return state;
     }
 };
-export const InputField = ({ withAlertIcon = true, withAlertMessage = true, leftIcon, rightIcon, defaultValue = "", alertText = "Doldurulması zorunlu alan.", clearable = false, text = "Placeholder", headerText = "Label", withHeader = true, size = "large", status = "default", radius = "small", className, frameClassName, isPassword = false, value, onChange, onClear, onFocus, onBlur, onKeyDown, }) => {
+export const InputField = ({ withAlertIcon = true, withAlertMessage = true, leftIcon, rightIcon, defaultValue = "", alertText = "Doldurulması zorunlu alan.", clearable = false, text = "Placeholder", headerText = "Label", withHeader = true, size = "large", status = "default", radius = "small", className, frameClassName, isPassword = false, value, onChange, onClear, onFocus, onBlur, onKeyDown, selectFromPopup = false, onRequestPopupOpen, }) => {
     const [state, dispatch] = useReducer(reducer, initialState(size, status, radius));
     const [inputValue, setInputValue] = useState(defaultValue);
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const containerRef = useRef(null);
     const isControlled = value !== undefined;
     const handleInputChange = (event) => {
         const newValue = event.target.value;
+        if (selectFromPopup) {
+            // typing is disabled in select-from-popup mode
+            return;
+        }
         if (isControlled) {
             onChange?.(event);
         }
@@ -44,7 +49,13 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
             setInputValue("");
         }
     };
-    return (_jsxs("div", { className: `input-field size-2-${state.size} ${className}`, onMouseLeave: () => dispatch("mouse_leave"), onMouseEnter: () => dispatch("mouse_enter"), onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status}`, children: [leftIcon && React.cloneElement(leftIcon, { color: state.status === "alert" ? "#FF6983" : "#888888" }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, className: `input-field-placeholder ${state.status === "alert" ? "alert" : ""}`, style: {
+    const toggleDropdown = () => {
+        if (!selectFromPopup)
+            return;
+        onRequestPopupOpen?.(containerRef.current);
+    };
+    // selection is handled by parent when using external popup
+    return (_jsxs("div", { className: `input-field size-2-${state.size} ${className}`, ref: containerRef, onMouseLeave: () => dispatch("mouse_leave"), onMouseEnter: () => dispatch("mouse_enter"), onClick: () => dispatch("click"), children: [withHeader && (_jsx("div", { className: `frame ${["active", "default", "disabled", "hover"].includes(state.status) ? frameClassName : ""}`, children: _jsx("div", { className: `label-2 ${state.status}`, children: headerText }) })), _jsxs("div", { className: `input-fields size-4-${state.size} status-0-${state.status}`, onClick: toggleDropdown, children: [leftIcon && React.cloneElement(leftIcon, { color: state.status === "alert" ? "#FF6983" : "#888888" }), _jsx("input", { type: isPassword ? (isPasswordVisible ? "text" : "password") : "text", placeholder: text, value: currentValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, className: `input-field-placeholder ${state.status === "alert" ? "alert" : ""}`, style: {
                             backgroundColor: "transparent",
                             border: "none",
                             color: state.status === "alert" ? "#FF6983" : "#888888",
@@ -52,7 +63,7 @@ export const InputField = ({ withAlertIcon = true, withAlertMessage = true, left
                             minWidth: 0,
                             outline: "none",
                             padding: "0",
-                        } }), clearable && !!currentValue && currentValue.length > 0 && (_jsx(IconX, { stroke: 1.5, className: "button-clear", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: handleClear })), rightIcon && isPassword && (isPasswordVisible ? (_jsx(IconEyeOff, { stroke: 1.5, className: "button-password-eye", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: () => setIsPasswordVisible(!isPasswordVisible) })) : (_jsx(IconEye, { stroke: 1.5, className: "button-password-eye", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: () => setIsPasswordVisible(!isPasswordVisible) }))), rightIcon && React.cloneElement(rightIcon, { color: state.status === "alert" ? "#FF6983" : "#888888" })] }), state.status === "alert" && withAlertMessage && (_jsxs("div", { className: "frame-2", children: [withAlertIcon && _jsx(IconAlertSquareRounded, { size: 20, stroke: 1.5 }), _jsx("div", { className: "doldurulmas-zorunlu", children: alertText })] }))] }));
+                        }, readOnly: selectFromPopup }), clearable && !!currentValue && currentValue.length > 0 && (_jsx(IconX, { stroke: 1.5, className: "button-clear", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: handleClear })), rightIcon && isPassword && (isPasswordVisible ? (_jsx(IconEyeOff, { stroke: 1.5, className: "button-password-eye", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: () => setIsPasswordVisible(!isPasswordVisible) })) : (_jsx(IconEye, { stroke: 1.5, className: "button-password-eye", color: state.status === "alert" ? "#FF6983" : "#888888", onClick: () => setIsPasswordVisible(!isPasswordVisible) }))), rightIcon && React.cloneElement(rightIcon, { color: state.status === "alert" ? "#FF6983" : "#888888" })] }), false, state.status === "alert" && withAlertMessage && (_jsxs("div", { className: "frame-2", children: [withAlertIcon && _jsx(IconAlertSquareRounded, { size: 20, stroke: 1.5 }), _jsx("div", { className: "doldurulmas-zorunlu", children: alertText })] }))] }));
 };
 InputField.propTypes = {
     withAlertIcon: PropTypes.bool,
@@ -78,4 +89,6 @@ InputField.propTypes = {
     onKeyDown: PropTypes.func,
     clearable: PropTypes.bool,
     onClear: PropTypes.func,
+    selectFromPopup: PropTypes.bool,
+    onRequestPopupOpen: PropTypes.func,
 };

package/dist/InputField/style.css

@@ -160,6 +160,7 @@
   height: 32px;
   padding: 6px;
   width: 100%;
+  border-radius: 8px;
 }
 
 .input-field .status-0-default {

package/dist/Label/Label.d.ts

@@ -13,9 +13,10 @@ interface Props {
     bold?: "off" | "on";
     spacing?: "off" | "on";
     className: any;
+    divClassName?: string;
 }
 export declare const Label: {
-    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, }: Props): React.JSX.Element;
+    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
@@ -28,6 +29,7 @@ export declare const Label: {
         stroke: PropTypes.Requireable<string>;
         bold: PropTypes.Requireable<string>;
         spacing: PropTypes.Requireable<string>;
+        divClassName: PropTypes.Requireable<string>;
     };
 };
 export {};

package/dist/Label/Label.js

@@ -32,11 +32,11 @@ const getIconClassName = (size) => {
     };
     return sizeClassMap[size] || "";
 };
-export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, }) => {
+export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, }) => {
     return (_jsxs("div", { className: `label ${size} ${stroke} ${spacing} ${color} ${className}`, title: title, children: [leftIcon && (React.cloneElement(leftIcon, {
                 className: getIconClassName(size),
                 color: getIconColor(version, color)
-            })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
+            })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
                 className: getIconClassName(size),
                 color: getIconColor(version, color)
             }))] }));
@@ -64,4 +64,5 @@ Label.propTypes = {
     stroke: PropTypes.oneOf(["off", "on"]),
     bold: PropTypes.oneOf(["off", "on"]),
     spacing: PropTypes.oneOf(["off", "on"]),
+    divClassName: PropTypes.string,
 };

package/dist/ProfileButton/ProfileButton.d.ts

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    subtext?: string;
+    activity?: boolean;
+    size?: "large" | "x-small" | "medium" | "small";
+    status?: "pressing" | "default";
+    className?: any;
+    avatarLetter?: string;
+    avatarColor?: string;
+    activityColor?: string;
+}
+export declare const ProfileButton: {
+    ({ text, subtext, activity, size, status, avatarLetter, avatarColor, className, activityColor, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withText: PropTypes.Requireable<boolean>;
+        subtext: PropTypes.Requireable<string>;
+        withSubtext: PropTypes.Requireable<boolean>;
+        withAllText: PropTypes.Requireable<boolean>;
+        activity: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ProfileButton/ProfileButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { Avatar } from "../Avatar";
+import { Activity } from "../Activity";
+export const ProfileButton = ({ text, subtext, activity = false, size, status, avatarLetter = "AB", avatarColor = "grey", className, activityColor = "black", }) => {
+    return (_jsxs("div", { className: `profile-button size-0-${size} ${status} ${className}`, children: [_jsx(Avatar, { className: "avatar-instance", color: avatarColor, letter: avatarLetter, size: size === "medium"
+                    ? "medium"
+                    : size === "small"
+                        ? "small"
+                        : size === "x-small"
+                            ? "x-small"
+                            : "large", status: "default", 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: `${size === "medium" ? "class" : (size === "small") ? "class-2" : size === "x-small" ? "class-3" : "class-4"}`, color: activityColor === "black" || activityColor === "green" || activityColor === "galliano" || activityColor === "red" ? activityColor : undefined, size: "x-small" }))] }));
+};
+ProfileButton.propTypes = {
+    text: PropTypes.string,
+    withText: PropTypes.bool,
+    subtext: PropTypes.string,
+    withSubtext: PropTypes.bool,
+    withAllText: PropTypes.bool,
+    activity: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    status: PropTypes.oneOf(["pressing", "default"]),
+};

package/dist/ProfileButton/index.d.ts

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

package/dist/ProfileButton/index.js

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

package/dist/ProfileButton/style.css

@@ -0,0 +1,176 @@
+.profile-button {
+  align-items: center;
+  display: inline-flex;
+  padding: 4px;
+  position: relative;
+}
+
+.profile-button .frame {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.profile-button .text {
+  -webkit-box-orient: vertical;
+  color: #5d5d5d;
+  display: -webkit-box;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.profile-button .subtext {
+  align-self: stretch;
+  color: #5d5d5d;
+  position: relative;
+}
+
+.profile-button .class {
+  left: 29px !important;
+  position: absolute !important;
+  top: 2px !important;
+}
+
+.profile-button .class-2 {
+  left: 24px !important;
+  position: absolute !important;
+  top: 2px !important;
+}
+
+.profile-button .class-3 {
+  left: 20px !important;
+  position: absolute !important;
+  top: 2px !important;
+}
+
+.profile-button .class-4 {
+  left: 48px !important;
+  position: absolute !important;
+  top: 2px !important;
+}
+
+.profile-button.size-0-large {
+  border-radius: 16px;
+  gap: 8px;
+  top: 12px;
+}
+
+.profile-button.size-0-small {
+  border-radius: 12px;
+  gap: 6px;
+}
+
+.profile-button.size-0-medium {
+  border-radius: 12px;
+  gap: 6px;
+}
+
+.profile-button.size-0-x-small {
+  border-radius: 8px;
+  gap: 6px;
+}
+
+.profile-button.pressing {
+  background-color: #2424240d;
+}
+.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);
+  font-size: var(--b2-bold-font-size);
+  font-style: var(--b2-bold-font-style);
+  font-weight: var(--b2-bold-font-weight);
+  height: 14px;
+  letter-spacing: var(--b2-bold-letter-spacing);
+  line-height: var(--b2-bold-line-height);
+  margin-top: -3.00px;
+  white-space: nowrap;
+}
+
+.profile-button.size-0-large .text {
+  -webkit-line-clamp: 0;
+  font-family: var(--h5-bold-font-family);
+  font-size: var(--h5-bold-font-size);
+  font-style: var(--h5-bold-font-style);
+  font-weight: var(--h5-bold-font-weight);
+  letter-spacing: var(--h5-bold-letter-spacing);
+  line-height: var(--h5-bold-line-height);
+  margin-top: -1.00px;
+}
+
+.profile-button.size-0-medium .text {
+  -webkit-line-clamp: 1;
+  font-family: var(--b1-bold-font-family);
+  font-size: var(--b1-bold-font-size);
+  font-style: var(--b1-bold-font-style);
+  font-weight: var(--b1-bold-font-weight);
+  letter-spacing: var(--b1-bold-letter-spacing);
+  line-height: var(--b1-bold-line-height);
+  margin-top: -1.00px;
+}
+
+.profile-button.size-0-small .text {
+  -webkit-line-clamp: 1;
+  font-family: var(--b2-bold-font-family);
+  font-size: var(--b2-bold-font-size);
+  font-style: var(--b2-bold-font-style);
+  font-weight: var(--b2-bold-font-weight);
+  letter-spacing: var(--b2-bold-letter-spacing);
+  line-height: var(--b2-bold-line-height);
+  margin-top: -3.00px;
+}
+
+.profile-button.size-0-x-small .subtext {
+  font-family: var(--b3-medium-font-family);
+  font-size: var(--b3-medium-font-size);
+  font-style: var(--b3-medium-font-style);
+  font-weight: var(--b3-medium-font-weight);
+  height: 14px;
+  letter-spacing: var(--b3-medium-letter-spacing);
+  line-height: var(--b3-medium-line-height);
+  margin-bottom: -1.00px;
+  white-space: nowrap;
+}
+
+.profile-button.size-0-large .subtext {
+  font-family: var(--b1-medium-font-family);
+  font-size: var(--b1-medium-font-size);
+  font-style: var(--b1-medium-font-style);
+  font-weight: var(--b1-medium-font-weight);
+  letter-spacing: var(--b1-medium-letter-spacing);
+  line-height: var(--b1-medium-line-height);
+}
+
+.profile-button.size-0-medium .subtext {
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+}
+
+.profile-button.size-0-small .subtext {
+  font-family: var(--b3-medium-font-family);
+  font-size: var(--b3-medium-font-size);
+  font-style: var(--b3-medium-font-style);
+  font-weight: var(--b3-medium-font-weight);
+  letter-spacing: var(--b3-medium-letter-spacing);
+  line-height: var(--b3-medium-line-height);
+  margin-bottom: -1.00px;
+}

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export { Page } from "./Page/Page";
 export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
 export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
 export { SingleSlider } from "./SingleSlider/SingleSlider";
+export { ProfileButton } from "./ProfileButton/ProfileButton";

package/dist/index.js

@@ -14,3 +14,4 @@ export { Page } from "./Page/Page";
 export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
 export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
 export { SingleSlider } from "./SingleSlider/SingleSlider";
+export { ProfileButton } from "./ProfileButton/ProfileButton";

package/package.json

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