@ayseaistudio/ui-components 1.0.2 → 2.0.0

package/dist/Activity/Activity.d.ts

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size?: "large" | "x-small" | "medium" | "small";
+    color?: "black" | "red" | "green" | "galliano";
+    className?: any;
+}
+export declare const Activity: {
+    ({ size, color, className }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Activity/Activity.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const Activity = ({ size, color, className }) => {
+    return (_jsx("div", { className: `activity ${color} ${size} ${className}`, children: _jsx("div", { className: "ellipse" }) }));
+};
+Activity.propTypes = {
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    color: PropTypes.oneOf(["black", "red", "green", "galliano"]),
+};

package/dist/Activity/index.d.ts

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

package/dist/Activity/index.js

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

package/dist/Activity/style.css

@@ -0,0 +1,84 @@
+.activity {
+  align-items: center;
+  border-radius: 37.5px;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+.activity .ellipse {
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  position: relative;
+}
+
+.activity.galliano {
+  background-color: #b9891533;
+}
+
+.activity.large {
+  padding: 8px;
+}
+
+.activity.small {
+  padding: 4px;
+}
+
+.activity.black {
+  background-color: #24242433;
+}
+
+.activity.medium {
+  padding: 6px;
+}
+
+.activity.red {
+  background-color: #ed151533;
+}
+
+.activity.x-small {
+  padding: 4px;
+}
+
+.activity.green {
+  background-color: #28914033;
+}
+
+.activity.galliano .ellipse {
+  background-color: #d7af1b;
+}
+
+.activity.large .ellipse {
+  border-radius: 14px;
+  height: 28px;
+  width: 28px;
+}
+
+.activity.small .ellipse {
+  border-radius: 8px;
+  height: 16px;
+  width: 16px;
+}
+
+.activity.black .ellipse {
+  background-color: #454545;
+}
+
+.activity.medium .ellipse {
+  border-radius: 10px;
+  height: 20px;
+  width: 20px;
+}
+
+.activity.red .ellipse {
+  background-color: #ff3737;
+}
+
+.activity.x-small .ellipse {
+  border-radius: 3px;
+  height: 6px;
+  width: 6px;
+}
+
+.activity.green .ellipse {
+  background-color: #36b151;
+}

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    letter?: string;
+    size?: "large" | "x-small" | "medium" | "small";
+    color?: "mauve" | "lime" | "zest" | "grey" | "blue" | "green" | "galliano" | "orange" | "red";
+    status?: "active" | "default";
+    version?: "half" | "default";
+    className?: any;
+}
+export declare const Avatar: {
+    ({ letter, size, color, status, version, className, }: Props): React.JSX.Element;
+    propTypes: {
+        letter: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Avatar/Avatar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const Avatar = ({ letter = "AB", size, color, status, version, className, }) => {
+    return (_jsxs("div", { className: `avatar ${size} ${status} ${version} ${color} ${className}`, children: [version === "half" && _jsx("div", { className: "rectangle" }), _jsx("div", { className: "AB", children: letter })] }));
+};
+Avatar.propTypes = {
+    letter: PropTypes.string,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    color: PropTypes.oneOf([
+        "mauve",
+        "lime",
+        "zest",
+        "grey",
+        "blue",
+        "green",
+        "galliano",
+        "orange",
+        "red",
+    ]),
+    status: PropTypes.oneOf(["active", "default"]),
+    version: PropTypes.oneOf(["half", "default"]),
+};

package/dist/Avatar/index.d.ts

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

package/dist/Avatar/index.js

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

package/dist/Avatar/style.css

@@ -0,0 +1,324 @@
+.avatar {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.avatar .rectangle {
+  position: absolute;
+}
+
+.avatar .AB {
+  align-items: center;
+  color: #242424b2;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.avatar.large {
+  border-radius: 12px;
+  height: 56px;
+  width: 56px;
+}
+
+.avatar.small {
+  border-radius: 8px;
+  height: 28px;
+  width: 28px;
+}
+
+.avatar.medium {
+  border-radius: 8px;
+  height: 36px;
+  width: 36px;
+}
+
+.avatar.active {
+  border: 1px solid;
+}
+
+.avatar.half {
+  -webkit-backdrop-filter: blur(5px) brightness(100%);
+  backdrop-filter: blur(5px) brightness(100%);
+  background-color: #f8f8f84c;
+  overflow: hidden;
+}
+
+.avatar.x-small {
+  border-radius: 6px;
+  height: 24px;
+  width: 24px;
+}
+
+.avatar.default {
+  box-shadow: inset 0px 0px 10px #ffffff40;
+}
+
+.avatar.blue.default {
+  background-color: #dbd7fd;
+}
+
+.avatar.blue.active {
+  border-color: #7240e74c;
+}
+
+.avatar.green.default {
+  background-color: #c3efcc;
+}
+
+.avatar.lime.default {
+  background-color: #caf264;
+}
+
+.avatar.galliano.default {
+  background-color: #f4eb94;
+}
+
+.avatar.galliano.active {
+  border-color: #b989154c;
+}
+
+.avatar.mauve.default {
+  background-color: #eed4ff;
+}
+
+.avatar.grey.default {
+  background-color: #d1d1d1;
+}
+
+.avatar.red.default {
+  background-color: #ffc5c5;
+}
+
+.avatar.active.green {
+  border-color: #2891404c;
+}
+
+.avatar.zest.active {
+  border-color: #cd65124c;
+}
+
+.avatar.lime.active {
+  border-color: #71a30d4c;
+}
+
+.avatar.zest.default {
+  background-color: #f6d991;
+}
+
+.avatar.orange.default {
+  background-color: #fccdac;
+}
+
+.avatar.active.orange {
+  border-color: #e440124c;
+}
+
+.avatar.grey.active {
+  border-color: #24242433;
+}
+
+.avatar.red.active {
+  border-color: #ed15154c;
+}
+
+.avatar.mauve.active {
+  border-color: #a931ec4c;
+}
+
+.avatar.galliano .rectangle {
+  background-color: #f4eb94;
+}
+
+.avatar.large .rectangle {
+  left: 0;
+  width: 28px;
+}
+
+.avatar.small .rectangle {
+  width: 14px;
+}
+
+.avatar.blue .rectangle {
+  background-color: #dbd7fd;
+}
+
+.avatar.lime .rectangle {
+  background-color: #caf264;
+}
+
+.avatar.zest .rectangle {
+  background-color: #f6d991;
+}
+
+.avatar.orange .rectangle {
+  background-color: #fccdac;
+}
+
+.avatar.medium .rectangle {
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 18px;
+}
+
+.avatar.grey .rectangle {
+  background-color: #d1d1d1;
+  left: 0;
+}
+
+.avatar.red .rectangle {
+  background-color: #ffc5c5;
+}
+
+.avatar.x-small .rectangle {
+  height: 24px;
+  left: 0;
+  top: calc(50.00% - 12px);
+  width: 12px;
+}
+
+.avatar.green .rectangle {
+  background-color: #c3efcc;
+}
+
+.avatar.mauve .rectangle {
+  background-color: #eed4ff;
+}
+
+.avatar.galliano.small .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.mauve.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.small.blue .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.red.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.galliano.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.blue.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.grey.small .rectangle {
+  height: 28px;
+  top: calc(50.00% - 14px);
+}
+
+.avatar.lime.small .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.zest.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.small.green .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.small.orange .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.small.mauve .rectangle {
+  height: 100%;
+
+}
+
+.avatar.red.small .rectangle {
+  height: 100%;
+}
+
+.avatar.lime.large .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.zest.small .rectangle {
+  height: 100%;
+  left: 1px;
+  top: 0;
+}
+
+.avatar.large.green .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.large.orange .rectangle {
+  height: 100%;
+  top: 0;
+}
+
+.avatar.grey.large .rectangle {
+  height: 56px;
+  top: calc(50.00% - 28px);
+}
+
+.avatar.x-small .AB {
+  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);
+}
+
+.avatar.large .AB {
+  font-family: var(--h4-black-font-family);
+  font-size: var(--h4-black-font-size);
+  font-style: var(--h4-black-font-style);
+  font-weight: var(--h4-black-font-weight);
+  letter-spacing: var(--h4-black-letter-spacing);
+  line-height: var(--h4-black-line-height);
+}
+
+.avatar.medium .AB {
+  font-family: var(--b1-black-font-family);
+  font-size: var(--b1-black-font-size);
+  font-style: var(--b1-black-font-style);
+  font-weight: var(--b1-black-font-weight);
+  letter-spacing: var(--b1-black-letter-spacing);
+  line-height: var(--b1-black-line-height);
+}
+
+.avatar.small .AB {
+  font-family: var(--b2-black-font-family);
+  font-size: var(--b2-black-font-size);
+  font-style: var(--b2-black-font-style);
+  font-weight: var(--b2-black-font-weight);
+  letter-spacing: var(--b2-black-letter-spacing);
+  line-height: var(--b2-black-line-height);
+}

package/dist/Dot/Dot.d.ts

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size?: "large" | "small";
+    stroke?: "ON" | "OFF";
+    className?: any;
+}
+export declare const Dot: {
+    ({ size, stroke, className }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        stroke: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Dot/Dot.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const Dot = ({ size, stroke, className }) => {
+    return _jsx("div", { className: `dot ${stroke} ${size} ${className}` });
+};
+Dot.propTypes = {
+    size: PropTypes.oneOf(["large", "small"]),
+    stroke: PropTypes.oneOf(["ON", "OFF"]),
+};

package/dist/Dot/index.d.ts

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

package/dist/Dot/index.js

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

package/dist/Dot/style.css

@@ -0,0 +1,24 @@
+.dot {
+  position: relative;
+}
+
+.dot.OFF {
+  background-color: #d1d1d1;
+}
+
+.dot.large {
+  border-radius: 3px;
+  height: 6px;
+  width: 6px;
+}
+
+.dot.ON {
+  border: 1px solid;
+  border-color: #24242433;
+}
+
+.dot.small {
+  border-radius: 2px;
+  height: 4px;
+  width: 4px;
+}

package/dist/InputField/InputField.d.ts

@@ -0,0 +1,56 @@
+import PropTypes from "prop-types";
+import React, { ChangeEvent } from "react";
+import "./style.css";
+interface Props {
+    withAlertIcon?: boolean;
+    withAlertMessage?: boolean;
+    defaultValue?: string;
+    alertText?: string;
+    rightIcon?: React.JSX.Element;
+    leftIcon?: React.JSX.Element;
+    clearable?: boolean;
+    text?: string;
+    headerText?: string;
+    withHeader?: boolean;
+    size?: "large" | "with-password-eye" | "medium" | "small" | "with-button";
+    status?: "active" | "default" | "hover" | "alert" | "disabled";
+    radius?: "small" | "ninety-six-px" | "eight-px";
+    className?: string;
+    frameClassName?: string;
+    isPassword?: boolean;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClear?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => 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;
+    propTypes: {
+        withAlertIcon: PropTypes.Requireable<boolean>;
+        withAlertMessage: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<string>;
+        withLeftIcon: PropTypes.Requireable<boolean>;
+        alertText: PropTypes.Requireable<string>;
+        withRightIcon: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<string>;
+        headerText: PropTypes.Requireable<string>;
+        withHeader: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        radius: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        frameClassName: PropTypes.Requireable<string>;
+        isPassword: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        clearable: PropTypes.Requireable<boolean>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

package/dist/InputField/InputField.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import React, { useReducer, useState } from "react";
+import "./style.css";
+import { IconEyeOff, IconEye, IconX, IconAlertSquareRounded } from "@tabler/icons-react";
+const initialState = (size, status, radius) => ({
+    size,
+    status,
+    radius,
+});
+const reducer = (state, action) => {
+    const { size, radius } = state;
+    switch (action) {
+        case "mouse_enter":
+            return { size, radius, status: "hover" };
+        case "click":
+            return { size, radius, status: "active" };
+        case "mouse_leave":
+            return { ...state, status: "default" };
+        default:
+            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, }) => {
+    const [state, dispatch] = useReducer(reducer, initialState(size, status, radius));
+    const [inputValue, setInputValue] = useState(defaultValue);
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const isControlled = value !== undefined;
+    const handleInputChange = (event) => {
+        const newValue = event.target.value;
+        if (isControlled) {
+            onChange?.(event);
+        }
+        else {
+            setInputValue(newValue);
+        }
+    };
+    const currentValue = isControlled ? value : inputValue;
+    const handleClear = () => {
+        if (isControlled) {
+            onClear?.();
+        }
+        else {
+            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: {
+                            backgroundColor: "transparent",
+                            border: "none",
+                            color: state.status === "alert" ? "#FF6983" : "#888888",
+                            flex: 1,
+                            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 })] }))] }));
+};
+InputField.propTypes = {
+    withAlertIcon: PropTypes.bool,
+    withAlertMessage: PropTypes.bool,
+    defaultValue: PropTypes.string,
+    withLeftIcon: PropTypes.bool,
+    alertText: PropTypes.string,
+    withRightIcon: PropTypes.bool,
+    text: PropTypes.string,
+    headerText: PropTypes.string,
+    withHeader: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "with-password-eye", "medium", "small", "with-button"]),
+    status: PropTypes.oneOf(["active", "default", "hover", "alert", "disabled"]),
+    radius: PropTypes.oneOf(["small", "ninety-six-px", "eight-px"]),
+    className: PropTypes.string,
+    frameClassName: PropTypes.string,
+    isPassword: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    icon: PropTypes.element,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    clearable: PropTypes.bool,
+    onClear: PropTypes.func,
+};

package/dist/InputField/index.d.ts

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

package/dist/InputField/index.js

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