@ayseaistudio/ui-components 1.0.2 → 2.0.0

package/dist/InputField/style.css

@@ -0,0 +1,239 @@
+.input-field {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  margin:4px;
+}
+
+.input-field .frame {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  padding: 0px 8px;
+  position: relative;
+}
+
+.input-field .label-2 {
+  flex: 1;
+  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);
+  margin-top: -1.00px;
+  position: relative;
+}
+
+.input-field .input-fields {
+  align-items: center;
+  border-radius: 12px;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+}
+
+.input-field .class-5 {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.input-field .class-6 {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.input-field .placeholder {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 0;
+  display: -webkit-box;
+  flex: 1;
+  font-family: var(--h6-medium-font-family);
+  font-size: var(--h6-medium-font-size);
+  font-style: var(--h6-medium-font-style);
+  font-weight: var(--h6-medium-font-weight);
+  letter-spacing: var(--h6-medium-letter-spacing);
+  line-height: var(--h6-medium-line-height);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.input-field .button-password-eye {
+  height: 28px !important;
+  position: relative !important;
+  width: 28px !important;
+}
+
+.input-field .button-clear {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+  cursor: pointer;
+}
+
+.input-field .frame-2 {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 4px;
+  position: relative;
+}
+
+.input-field .icons-1019 {
+  height: 12px !important;
+  position: relative !important;
+  width: 12px !important;
+}
+
+.input-field .doldurulmas-zorunlu {
+  color: #ff6983;
+  font-family: var(--b3-bold-font-family);
+  font-size: var(--b3-bold-font-size);
+  font-style: var(--b3-bold-font-style);
+  font-weight: var(--b3-bold-font-weight);
+  letter-spacing: var(--b3-bold-letter-spacing);
+  line-height: var(--b3-bold-line-height);
+  margin-top: -1.00px;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.input-field.size-2-with-password-eye {
+  display: inline-flex;
+}
+
+.input-field.size-2-large {
+  display: flex;
+}
+
+.input-field.size-2-medium {
+  display: flex;
+}
+
+.input-field.size-2-small {
+  display: flex;
+}
+
+.input-field .default {
+  color: #5d5d5d;
+}
+
+.input-field .disabled {
+  color: #b0b0b0;
+}
+
+.input-field .active {
+  color: #454545;
+}
+
+.input-field .hover {
+  color: #454545;
+}
+
+.input-field .alert {
+  color: #ff6983;
+}
+
+.input-field .size-4-large {
+  align-self: stretch;
+  height: 48px;
+  padding: 12px;
+  width: 100%;
+}
+
+.input-field .status-0-alert {
+  background-color: #f8f8f833;
+  border: 1px solid;
+  border-color: #ed114733;
+}
+
+.input-field .size-4-small {
+  align-self: stretch;
+  height: 32px;
+  padding: 6px;
+  width: 100%;
+}
+
+.input-field .status-0-default {
+  background-color: #f8f8f833;
+  border: 1px solid;
+  border-color: #2424241a;
+}
+
+.input-field .status-0-disabled {
+  background-color: #e7e7e7;
+  border-color: #2424241a;
+}
+
+.input-field .status-0-active {
+  background-color: #2424240d;
+  border: 1px solid;
+  border-color: #2424244c;
+}
+
+.input-field .size-4-medium {
+  align-self: stretch;
+  height: 36px;
+  padding: 8px;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.input-field .size-4-with-password-eye {
+  height: 48px;
+  padding: 8px;
+  width: 241px;
+}
+
+.input-field .status-0-hover {
+  background-color: #2424240d;
+  border: 1px solid;
+  border-color: #2424241a;
+}
+
+.input-field.size-2-with-password-eye .frame {
+  width: 241px;
+}
+
+.input-field.size-2-large .frame {
+  align-self: stretch;
+  width: 100%;
+}
+
+.input-field.size-2-medium .frame {
+  align-self: stretch;
+  width: 100%;
+}
+
+.input-field.size-2-small .frame {
+  align-self: stretch;
+  width: 100%;
+}
+
+.input-field .input-fields.status-0-default .placeholder {
+  color: #b0b0b0;
+}
+
+.input-field .input-fields.status-0-disabled .placeholder {
+  color: #b0b0b0;
+}
+
+.input-field .input-fields.status-0-active .placeholder {
+  color: #d1d1d1;
+}
+
+.input-field .input-fields.status-0-hover .placeholder {
+  color: #888888;
+}
+
+.input-field .input-fields.status-0-alert .placeholder {
+  color: #ff6983;
+}

package/dist/Label/style.css

@@ -3,6 +3,7 @@
   display: inline-flex;
   justify-content: center;
   position: relative;
+  cursor: default;
 }
 
 .label .class {
@@ -38,6 +39,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: fit-content;
+  cursor: default;
 }
 
 .label.large {

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.css';
+interface LoaderProps {
+    size?: number;
+    className?: string;
+}
+export declare const Loader: React.FC<LoaderProps>;
+export {};

package/dist/Loader/Loader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './style.css';
+export const Loader = ({ size = 40, className = '' }) => {
+    return (_jsx("div", { className: `loader ${className}`, style: {
+            width: `${size}px`,
+            height: `${size}px`
+        }, children: _jsx("div", { className: "loader-spinner" }) }));
+};

package/dist/Loader/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/Loader/index.js

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/Loader/style.css

@@ -0,0 +1,21 @@
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+}
+
+.loader-spinner {
+  width: 100%;
+  height: 100%;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid rgba(177, 230, 53, 1);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+} 

package/dist/LoginInput/LoginInput.d.ts

@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import React from "react";
+import "./style.css";
+interface Props {
+    withIcon?: boolean;
+    placeholder?: string;
+    status?: "alert" | "hover" | "active" | "default" | "selected";
+    className?: string;
+    icon?: React.JSX.Element;
+    value?: string;
+    inputType?: string;
+    version?: "username" | "password";
+    onChange?: (value: string) => void;
+    singleChar?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const LoginInput: {
+    ({ withIcon, placeholder, status, className, icon, value, onChange, inputType, version, singleChar, inputRef, onKeyDown, }: Props): React.JSX.Element;
+    propTypes: {
+        withIcon: PropTypes.Requireable<boolean>;
+        placeholder: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        value: PropTypes.Requireable<string>;
+        inputType: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        singleChar: PropTypes.Requireable<boolean>;
+    };
+};
+export {};

package/dist/LoginInput/LoginInput.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useEffect, useReducer, useState } from "react";
+import "./style.css";
+import { IconLayoutDashboard, IconUser, IconPassword } 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 finalIcon = icon;
+    let finalPlaceholder = placeholder;
+    let finalInputType = inputType;
+    if (version === "username") {
+        finalIcon = _jsx(IconUser, { size: 20, color: "#B0B0B0" });
+        finalPlaceholder = "Kullanıcı Adı";
+        finalInputType = "text";
+    }
+    else if (version === "password") {
+        finalIcon = _jsx(IconPassword, { size: 20, color: "#B0B0B0" });
+        finalPlaceholder = "Şifre";
+        finalInputType = "password";
+    }
+    const [state, dispatch] = useReducer(reducer, { status });
+    const [isFocused, setIsFocused] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const [actualType, setActualType] = useState("text");
+    useEffect(() => {
+        if (version === "password") {
+            const timer = setTimeout(() => {
+                setActualType("password");
+            }, 100); // DOM renderlandıktan kısa süre sonra değiştir
+            return () => clearTimeout(timer);
+        }
+    }, [version]);
+    useEffect(() => {
+        // Sync internal state when external value changes
+        setInputValue(value || "");
+    }, [value]);
+    const handleInputChange = (e) => {
+        const rawValue = e.target.value;
+        const nextValue = singleChar ? rawValue.slice(0, 1) : rawValue;
+        setInputValue(nextValue);
+        if (onChange)
+            onChange(nextValue);
+        if (nextValue) {
+            dispatch("input");
+        }
+        else if (!isFocused) {
+            dispatch("blur");
+        }
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        dispatch("focus");
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        if (!inputValue)
+            dispatch("blur");
+    };
+    return (_jsxs("div", { className: `login-input ${state.status} ${className}`, onMouseLeave: () => {
+            if (state.status !== "selected")
+                dispatch("mouse_leave");
+        }, onMouseEnter: () => {
+            if (state.status !== "selected")
+                dispatch("mouse_enter");
+        }, children: [_jsxs("div", { className: `placeholder-container ${isFocused || inputValue ? "active" : ""}`, children: [withIcon && _jsx("span", { className: "icon-container", children: finalIcon }), _jsx("label", { className: "placeholder", htmlFor: "login-input", children: finalPlaceholder })] }), _jsx("input", { id: `login-input-${version}`, className: "input-field", type: version === "password" ? actualType : finalInputType, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", name: `input-${version}-${Math.random().toString(36).substring(2, 15)}`, maxLength: singleChar ? 1 : undefined, ref: inputRef })] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            if (state.status === "selected")
+                return state;
+            return { ...state, status: "hover" };
+        case "mouse_leave":
+            if (state.status === "selected")
+                return state;
+            return { ...state, status: "default" };
+        case "focus":
+            return { ...state, status: "selected" };
+        case "blur":
+            return { ...state, status: "default" };
+        case "input":
+            return { ...state, status: "selected" };
+        default:
+            return state;
+    }
+}
+LoginInput.propTypes = {
+    withIcon: PropTypes.bool,
+    placeholder: PropTypes.string,
+    status: PropTypes.oneOf(["alert", "hover", "active", "default", "selected"]),
+    className: PropTypes.string,
+    icon: PropTypes.element,
+    value: PropTypes.string,
+    inputType: PropTypes.string,
+    version: PropTypes.oneOf(["username", "password"]),
+    onChange: PropTypes.func,
+    singleChar: PropTypes.bool,
+};

package/dist/LoginInput/index.d.ts

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

package/dist/LoginInput/index.js

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

package/dist/LoginInput/style.css

@@ -0,0 +1,109 @@
+.login-input {
+  font-family: 'Inter', sans-serif;
+  border: 1px solid rgba(36, 36, 36, 0.1);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  position: relative;
+  width: 100%;
+  background-color: #f8f8f8;
+  transition: border-color 0.3s ease, background-color 0.3s ease;
+  height: 60px;
+  caret-color: rgba(136, 136, 136, 1); /* Cursor rengi mavi olarak değiştirildi */
+
+}
+
+.login-input:hover {
+  border-color: rgba(36, 36, 36, 0.3);
+  background-color: rgba(36, 36, 36, 0.05);
+}
+
+.placeholder-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  top: 50%;
+  left: 16px; /* Placeholder biraz sağdan başlat */
+  transform: translateY(-50%);
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.placeholder-container.active {
+  top: -0.5px; /* Placeholder yukarı kaydırıldı */
+  left: 8px;
+  transform: translateY(0);
+}
+
+.placeholder-container .icons {
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.placeholder-container.active .icons {
+  font-size: 6px; /* İkon boyutu küçültüldü */
+}
+
+.placeholder {
+  font-size: 16px;
+  color: #b0b0b0;
+  transition: all 0.3s ease;
+}
+
+.placeholder-container.active .placeholder {
+  font-size: 12px; /* Placeholder yazı boyutu küçültüldü */
+  color: #888888;
+}
+
+.input-field {
+  font-family: 'Inter', sans-serif;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  width: 100%;
+  background-color: transparent;
+  color: #242424;
+  margin: 0; /* Varsayılan margin'i kaldır */
+}
+
+.input-field::placeholder {
+  color: rgba(136, 136, 136, 1);
+}
+
+.input-field:focus {
+  caret-color: rgba(136, 136, 136, 1);
+}
+
+.login-input.active {
+  border-color: #242424;
+}
+
+.login-input.selected {
+  border-color: rgba(36, 36, 36, 0.3); /* Hover durumunda aynı kal */
+  background-color: rgba(36, 36, 36, 0.05);
+  caret-color: rgba(36, 36, 36, 0.3);
+}
+
+.login-input.selected:hover {
+  border-color: rgba(36, 36, 36, 0.3); /* Hover durumunda aynı kal */
+  background-color: rgba(36, 36, 36, 0.05);
+  caret-color: rgba(36, 36, 36, 1);
+}
+
+
+.input-field:focus {
+  caret-color: rgba(36, 36, 36, 1);
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+  transform: scale(1); /* Başlangıç ölçeği */
+}
+
+.placeholder-container.active .icon-container {
+  transform: scale(0.7) translateY(-1px); /* Küçültüp yukarı taşı */
+}

package/dist/Page/Page.d.ts

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    page?: string;
+    type?: "default" | "current";
+    current?: boolean;
+    dateClassName?: string;
+    icon?: React.JSX.Element;
+    notClickable?: boolean;
+    onClick?: () => void;
+}
+export declare const Page: {
+    ({ page, type, current, dateClassName, icon, notClickable, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        page: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        current: PropTypes.Requireable<boolean>;
+    };
+};
+export {};

package/dist/Page/Page.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const Page = ({ page = "0", type, current = false, dateClassName, icon, notClickable = false, onClick, }) => {
+    const handleClick = () => {
+        if (!notClickable && onClick) {
+            onClick();
+        }
+    };
+    return (_jsx("div", { className: `page ${current ? 'current' : ''} ${notClickable ? 'not-clickable' : ''}`, onClick: handleClick, children: icon ? (_jsx("div", { className: "page-icon", children: icon })) : (_jsx("div", { className: `date ${dateClassName}`, children: page })) }));
+};
+Page.propTypes = {
+    page: PropTypes.string,
+    type: PropTypes.oneOf(["default", "current"]),
+    current: PropTypes.bool,
+};

package/dist/Page/index.d.ts

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

package/dist/Page/index.js

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

package/dist/Page/style.css

@@ -0,0 +1,65 @@
+.page {
+  align-items: center;
+  background-color: #ffffff;
+  border: 1px solid;
+  border-color: #f1f1f1;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 32px;
+  justify-content: center;
+  position: relative;
+  width: 32px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.page.not-clickable {
+  cursor: default;
+}
+
+.page .date {
+  color: #5d5d5d;
+  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);
+  margin-bottom: -3.00px;
+  margin-top: -5.00px;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.page:hover {
+  background-color: #f1f1f1;
+}
+
+.page.current {
+  background-color: rgba(177, 230, 53, 1);
+}
+
+.date {
+  font-size: 14px;
+  color: #333;
+}
+
+.date.current {
+  color: rgba(177, 230, 53, 1);
+  font-weight: 600;
+}
+
+.page img {
+  width: 16px;
+  height: 16px;
+}
+
+.page-icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin: auto;
+}

package/dist/PlatformSelector/PlatformSelector.d.ts

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    icon: React.JSX.Element;
+    text: string;
+    className: any;
+    onClick?: () => void;
+}
+export declare const PlatformSelector: {
+    ({ icon, text, className, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        property1: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

package/dist/PlatformSelector/PlatformSelector.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { IconSelector } from '@tabler/icons-react';
+export const PlatformSelector = ({ icon, text, className, onClick, }) => {
+    return (_jsxs("div", { className: `platform-selector ${className}`, onClick: onClick, style: { cursor: 'pointer' }, children: [_jsxs("div", { className: "frame-platform-selector", children: [_jsx("div", { className: "icon-agent", children: icon }), _jsx("div", { className: "text-wrapper", children: text })] }), _jsx(IconSelector, { className: "icons" })] }));
+};
+PlatformSelector.propTypes = {
+    property1: PropTypes.oneOf(["agentmaker"]),
+    onClick: PropTypes.func,
+};

package/dist/PlatformSelector/index.d.ts

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

package/dist/PlatformSelector/index.js

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