@ayseaistudio/ui-components 3.0.2 → 3.1.0

package/dist/ChipsButton/ChipsButton.d.ts

@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    size?: "large" | "medium" | "small";
+    status?: "pressing" | "disabled" | "hover" | "default";
+    className?: any;
+    leftIcon?: React.JSX.Element;
+    withButton?: boolean;
+    onClick?: () => void;
+}
+export declare const ChipsButton: {
+    ({ text, size, status, className, leftIcon, withButton, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withLeftIcon: PropTypes.Requireable<boolean>;
+        withText: PropTypes.Requireable<boolean>;
+        withButton: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ChipsButton/ChipsButton.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
+import { IconX } from "@tabler/icons-react";
+export const ChipsButton = ({ text, size, status, className, leftIcon, withButton, onClick, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        status: status || "default",
+    });
+    return (_jsxs("div", { className: `chips-button size-0-${state.size} status-0-${state.status} ${className}`, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, children: [leftIcon && (leftIcon), text && _jsx("div", { className: "button", children: text }), withButton && (_jsx(TertiaryButton, { className: `${state.status === "pressing" || (state.size === "large" && state.status === "hover") || (state.size === "small" && state.status === "hover") ? "class-5" : (state.status === "hover" && state.size === "medium") ? "class-6" : state.status === "disabled" && state.size === "medium" ? "class-7" : "class-8"}`, color: "black", leftIcon: _jsx(IconX, { size: 16, color: "#6D6D6D" }), size: state.size === "small" ? "x-small" : "small", status: "default", onClick: onClick }))] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            return {
+                ...state,
+                status: "hover",
+            };
+        case "mouse_leave":
+            return {
+                ...state,
+                status: "default",
+            };
+    }
+    return state;
+}
+ChipsButton.propTypes = {
+    text: PropTypes.string,
+    withLeftIcon: PropTypes.bool,
+    withText: PropTypes.bool,
+    withButton: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "medium", "small"]),
+    status: PropTypes.oneOf(["pressing", "disabled", "hover", "default"]),
+};

package/dist/ChipsButton/index.d.ts

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

package/dist/ChipsButton/index.js

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

package/dist/ChipsButton/style.css

@@ -0,0 +1,149 @@
+.chips-button {
+    align-items: center;
+    gap: 4px;
+    justify-content: center;
+    padding: 4px;
+    position: relative;
+  }
+  
+  .chips-button .class-2 {
+    height: 20px !important;
+    margin-left: -0.50px !important;
+    position: relative !important;
+    width: 20px !important;
+  }
+  
+  .chips-button .class-3 {
+    height: 16px !important;
+    position: relative !important;
+    width: 16px !important;
+  }
+  
+  .chips-button .class-4 {
+    height: 20px !important;
+    position: relative !important;
+    width: 20px !important;
+  }
+  
+  .chips-button .button {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    overflow: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .chips-button .class-5 {
+    flex: 0 0 auto !important;
+  }
+  
+  .chips-button .class-6 {
+    flex: 0 0 auto !important;
+    margin-right: -0.50px !important;
+  }
+  
+  .chips-button .class-7 {
+    flex: 0 0 auto !important;
+    margin-right: -0.50px !important;
+  }
+  
+  .chips-button .class-8 {
+    flex: 0 0 auto !important;
+  }
+  
+  .chips-button.size-0-large {
+    border-radius: 12px;
+    display: inline-flex;
+    height: 48px;
+    min-width: 44px;
+  }
+  
+  .chips-button.size-0-small {
+    border-radius: 8px;
+    display: flex;
+    height: 36px;
+    width: 107px;
+  }
+  
+  .chips-button.size-0-medium {
+    border-radius: 12px;
+    display: flex;
+    height: 40px;
+    width: 107px;
+  }
+  
+  .chips-button.status-0-pressing {
+    background-color: #2424241a;
+  }
+  
+  .chips-button.status-0-hover {
+    background-color: #2424241a;
+  }
+
+  .chips-button.size-0-large .button {
+    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);
+    height: 24px;
+    letter-spacing: var(--h6-medium-letter-spacing);
+    line-height: var(--h6-medium-line-height);
+  }
+  
+  .chips-button.size-0-small .button {
+    flex: 1;
+    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);
+    height: 20px;
+    letter-spacing: var(--b1-medium-letter-spacing);
+    line-height: var(--b1-medium-line-height);
+  }
+  
+  .chips-button.status-0-default .button {
+    color: #6d6d6d;
+    flex: 1;
+  }
+  
+  .chips-button.status-0-disabled .button {
+    color: #b0b0b0;
+  }
+  
+  .chips-button.size-0-medium .button {
+    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);
+  }
+  
+  .chips-button.status-0-pressing .button {
+    color: #3d3d3d;
+    flex: 1;
+  }
+  
+  .chips-button.status-0-hover .button {
+    color: #454545;
+  }
+  
+  .chips-button.size-0-medium.status-0-disabled .button {
+    width: fit-content;
+  }
+  
+  .chips-button.status-0-default.size-0-medium .button {
+    height: 20px;
+  }
+  
+  .chips-button.status-0-hover.size-0-medium .button {
+    width: fit-content;
+  }
+  
+  .chips-button.status-0-pressing.size-0-medium .button {
+    height: 20px;
+  }
+  

package/dist/Flag/Flag.d.ts

@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    withClose?: boolean;
+    text?: string;
+    header?: string;
+    color?: "black" | "green" | "galliano" | "red" | "disabled";
+    className?: any;
+    textSpaceClassName?: any;
+    icon?: React.JSX.Element;
+}
+export declare const Flag: {
+    ({ withClose, text, header, color, className, textSpaceClassName, icon, }: Props): React.JSX.Element;
+    propTypes: {
+        withClose: PropTypes.Requireable<boolean>;
+        withIcon: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<string>;
+        header: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Flag/Flag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
+export const Flag = ({ withClose = true, text, header, color, className, textSpaceClassName, icon, }) => {
+    return (_jsxs("div", { className: `flag ${color} ${className}`, children: [_jsxs("div", { className: `text-space ${textSpaceClassName}`, children: [text && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flag-header", children: header }), _jsx(_Fragment, { children: text && _jsx("p", { className: "i-will-auto-dismiss", children: text }) })] })), header && _jsx(_Fragment, { children: header })] }), withClose && (_jsx(TertiaryButton, { className: "button-tertiary-instance", color: "black", leftIcon: icon, size: "small", status: "default" }))] }));
+};
+Flag.propTypes = {
+    withClose: PropTypes.bool,
+    withIcon: PropTypes.bool,
+    text: PropTypes.string,
+    header: PropTypes.string,
+    color: PropTypes.oneOf(["black", "green", "galliano", "red", "disabled"]),
+    description: PropTypes.oneOf(["off", "on"]),
+};

package/dist/Flag/index.d.ts

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

package/dist/Flag/index.js

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

package/dist/Flag/style.css

@@ -0,0 +1,159 @@
+.flag {
+  border: 1px solid;
+  border-radius: 12px;
+  gap: 8px;
+  padding: 8px;
+  position: relative;
+}
+
+.flag .icons-2 {
+  height: 24px !important;
+  position: relative !important;
+  width: 24px !important;
+}
+
+.flag .text-space {
+  flex: 1;
+  position: relative;
+}
+
+.flag .flag-header {
+  align-self: stretch;
+  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;
+  position: relative;
+}
+
+.flag .i-will-auto-dismiss {
+  align-self: stretch;
+  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);
+  position: relative;
+}
+
+.flag .button-tertiary-instance {
+  flex: 0 0 auto !important;
+}
+
+.flag.black {
+  border-color: #2424241a;
+  display: flex;
+  width: 309px;
+}
+
+.flag.red {
+  border-color: #ed151533;
+  display: flex;
+  width: 309px;
+}
+
+.flag.galliano {
+  border-color: rgba(170, 70, 19, 0.2);
+}
+
+.flag.disabled {
+  border-color: #2424241a;
+}
+
+.flag.green {
+  border-color: #28914033;
+}
+
+.flag.green {
+  display: inline-flex;
+}
+
+.flag.galliano {
+  display: inline-flex;
+}
+
+.flag.disabled {
+  display: inline-flex;
+}
+
+.flag.text-space {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 6px;
+  justify-content: center;
+}
+
+.flag.text-space {
+  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);
+}
+
+.flag.red.text-space {
+  color: #ed1515;
+}
+
+.flag.galliano.text-space {
+  color: rgba(170, 70, 19, 1);
+}
+
+.flag.green.text-space {
+  color: #289140;
+}
+
+.flag.disabled.text-space {
+  color: #b0b0b0;
+}
+
+.flag.black.text-space {
+  color: #4f4f4f;
+}
+
+.flag.black .flag-header {
+  color: #4f4f4f;
+}
+
+.flag.red .flag-header {
+  color: #ed1515;
+}
+
+.flag.galliano .flag-header {
+  color: rgba(170, 70, 19, 1);
+}
+
+.flag.disabled .flag-header {
+  color: #b0b0b0;
+}
+
+.flag.green .flag-header {
+  color: #289140;
+}
+
+.flag.black .i-will-auto-dismiss {
+  color: #4f4f4f;
+}
+
+.flag.red .i-will-auto-dismiss {
+  color: #4f4f4f;
+}
+
+.flag.galliano .i-will-auto-dismiss {
+  color: #4f4f4f;
+}
+
+.flag.disabled .i-will-auto-dismiss {
+  color: #b0b0b0;
+}
+
+.flag.green .i-will-auto-dismiss {
+  color: #4f4f4f;
+}

package/dist/MessageInput/MessageInput.d.ts

@@ -0,0 +1,18 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    status?: "hover" | "active" | "default";
+    version?: "with-file" | "default";
+    className?: any;
+    chipsButtonIcon?: React.JSX.Element;
+}
+export declare const MessageInput: {
+    ({ text, status, version, className, chipsButtonIcon, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/MessageInput/MessageInput.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer, useRef, useState } from "react";
+import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
+import { ChipsButton } from "../ChipsButton";
+import { IconPaperclip, IconSend } from "@tabler/icons-react";
+import "./style.css";
+export const MessageInput = ({ text = "Buraya isteğinizi belirtin.", status, version, className, chipsButtonIcon, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        status: status || "default",
+        version: version || "default",
+    });
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const fileInputRef = useRef(null);
+    const [messageText, setMessageText] = useState("");
+    const shouldShowPrimary = selectedFiles.length > 0 || messageText.trim().length > 0;
+    return (_jsxs("div", { className: `message-input status-1-${state.status} version-${state.version} ${className}`, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onClick: () => {
+            dispatch("click_111");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, children: [selectedFiles.length > 0 && (_jsx("div", { className: "chips-container", children: selectedFiles.map((file, index) => (_jsx(ChipsButton, { className: "chips-button-instance", leftIcon: chipsButtonIcon, size: "medium", status: "default", text: file.name, withButton: true, onClick: () => {
+                        setSelectedFiles((prev) => {
+                            const next = prev.filter((_, i) => i !== index);
+                            if (next.length === 0) {
+                                dispatch("set_default");
+                            }
+                            return next;
+                        });
+                    } }, `${file.name}-${file.size}-${file.lastModified}-${index}`))) })), _jsxs("div", { className: "section", children: [_jsx(TertiaryButton, { className: "tertiary-button-instance", color: "black", leftIcon: _jsx(IconPaperclip, { size: 20, color: "#6D6D6D" }), onClick: () => {
+                            fileInputRef.current?.click();
+                        }, size: "large", status: "default" }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, style: { display: "none" }, onChange: (e) => {
+                            const filesList = e.target.files ? Array.from(e.target.files) : [];
+                            if (filesList.length > 0) {
+                                setSelectedFiles((prev) => {
+                                    const prevKeys = new Set(prev.map((f) => `${f.name}-${f.size}-${f.lastModified}`));
+                                    const uniqueNew = filesList.filter((f) => !prevKeys.has(`${f.name}-${f.size}-${f.lastModified}`));
+                                    const next = [...prev, ...uniqueNew];
+                                    return next;
+                                });
+                                dispatch("set_with_file");
+                            }
+                            else {
+                                dispatch("set_default");
+                            }
+                            if (e.target) {
+                                e.target.value = "";
+                            }
+                        } }), _jsx("input", { type: "text", className: "buraya-iste-inizi", placeholder: text, value: messageText, onChange: (e) => {
+                            const next = e.target.value;
+                            setMessageText(next);
+                            if (next.trim().length === 0 && selectedFiles.length === 0) {
+                                dispatch("set_default");
+                            }
+                            else {
+                                if (state.status !== "active") {
+                                    dispatch("click_111");
+                                }
+                            }
+                        } }), shouldShowPrimary && (_jsx(PrimaryButton, { className: `${state.status === "active" || state.version === "with-file" ? "tertiary-button-instance" : "class-2"}`, color: "lime", leftIcon: _jsx(IconSend, { size: 20, color: "rgba(61, 61, 61, 1)" }), size: "medium", status: "default" }))] })] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            if (state.version === "default" && state.status === "default") {
+                return {
+                    status: "hover",
+                    version: state.version,
+                };
+            }
+            return state;
+        case "mouse_leave":
+            if (state.version === "default" && state.status === "hover") {
+                return {
+                    status: "default",
+                    version: state.version,
+                };
+            }
+            return state;
+        case "click_111":
+            if (state.status !== "active") {
+                return {
+                    status: "active",
+                    version: state.version,
+                };
+            }
+            return state;
+        case "click":
+            if (state.version === "default") {
+                return {
+                    status: "active",
+                    version: "with-file",
+                };
+            }
+            return {
+                status: state.status,
+                version: "default",
+            };
+        case "set_with_file":
+            return {
+                status: "active",
+                version: "with-file",
+            };
+        case "set_default":
+            return {
+                status: "default",
+                version: "default",
+            };
+        default:
+            return state;
+    }
+}
+MessageInput.propTypes = {
+    text: PropTypes.string,
+    status: PropTypes.oneOf(["hover", "active", "default"]),
+    version: PropTypes.oneOf(["with-file", "default"]),
+};

package/dist/MessageInput/index.d.ts

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

package/dist/MessageInput/index.js

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

package/dist/MessageInput/style.css

@@ -0,0 +1,102 @@
+.message-input {
+  align-items: flex-start;
+  border: 1px solid;
+  border-radius: 12px;
+  box-shadow: var(--drop-shadow-low);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 6px;
+  position: relative;
+  border: none;
+}
+
+.message-input .chips-button-instance {
+  align-self: flex-start !important;
+}
+
+.message-input .chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+}
+
+.message-input .section {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 4px;
+  position: relative;
+  width: 100%;
+}
+
+.message-input .tertiary-button-instance {
+  flex: 0 0 auto !important;
+}
+
+.message-input .buraya-iste-inizi {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  align-items: center;
+  align-self: stretch;
+  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);
+  justify-content: center;
+  letter-spacing: var(--h6-medium-letter-spacing);
+  line-height: var(--h6-medium-line-height);
+  margin-top: -1.00px;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.message-input .icon-instance-node {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.message-input.status-1-default {
+  background-color: #f7f7f7;
+  border-color: #2424241a;
+}
+
+.message-input.status-1-active {
+  background-color: rgba(231, 231, 231, 1);
+  border-color: #2424244c;
+}
+
+.message-input.version-with-file {
+  gap: 6px;
+}
+
+.message-input.version-default {
+  gap: 4px;
+}
+
+.message-input.status-1-hover {
+  background-color: #f7f7f7;
+  border-color: #2424241a;
+}
+
+.message-input.status-1-default .buraya-iste-inizi {
+  color: #b0b0b0;
+}
+
+.message-input.status-1-active .buraya-iste-inizi {
+  color: #303030;
+}
+
+.message-input.status-1-hover .buraya-iste-inizi {
+  color: #888888;
+}

package/dist/MessageInputField/MessageInputField.d.ts

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import React from "react";
+import "./style.css";
+interface Props {
+    text?: string;
+    enter?: boolean;
+    richTextFormattingTools?: boolean;
+    property1?: "default";
+    className?: string;
+    placeholder?: string;
+    withPicture?: boolean;
+    withEmoji?: boolean;
+    withBold?: boolean;
+    withItalic?: boolean;
+    withUnderline?: boolean;
+    withStrikethrough?: boolean;
+    withHash?: boolean;
+}
+export declare const MessageInputField: {
+    ({ text, enter, richTextFormattingTools, className, placeholder, withPicture, withEmoji, withBold, withItalic, withUnderline, withStrikethrough, withHash, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        enter: PropTypes.Requireable<boolean>;
+        richTextFormattingTools: PropTypes.Requireable<boolean>;
+        property1: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        withPicture: PropTypes.Requireable<boolean>;
+        withEmoji: PropTypes.Requireable<boolean>;
+        withBold: PropTypes.Requireable<boolean>;
+        withItalic: PropTypes.Requireable<boolean>;
+        withUnderline: PropTypes.Requireable<boolean>;
+        withStrikethrough: PropTypes.Requireable<boolean>;
+        withHash: PropTypes.Requireable<boolean>;
+    };
+};
+export {};

package/dist/MessageInputField/MessageInputField.js

@@ -0,0 +1,87 @@
+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";
+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, }) => {
+    const editorRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [showEmoji, setShowEmoji] = useState(false);
+    const emojiTriggerRef = useRef(null);
+    const emojiPanelRef = useRef(null);
+    const [isEmpty, setIsEmpty] = useState(true);
+    useEffect(() => {
+        if (editorRef.current) {
+            const hasInitial = (text ?? "").length > 0;
+            if (!editorRef.current.textContent && hasInitial) {
+                editorRef.current.textContent = text;
+            }
+            setIsEmpty(!editorRef.current.textContent || editorRef.current.textContent.trim().length === 0);
+        }
+    }, [text]);
+    useEffect(() => {
+        if (!showEmoji)
+            return;
+        const onDocClick = (e) => {
+            const t = e.target;
+            if (emojiTriggerRef.current &&
+                (emojiTriggerRef.current.contains(t) || (emojiPanelRef.current && emojiPanelRef.current.contains(t)))) {
+                return;
+            }
+            setShowEmoji(false);
+        };
+        document.addEventListener("mousedown", onDocClick);
+        return () => document.removeEventListener("mousedown", onDocClick);
+    }, [showEmoji]);
+    const focusEditor = () => {
+        editorRef.current?.focus();
+    };
+    const onIconMouseDown = (e) => {
+        e.preventDefault();
+    };
+    const exec = (command, value) => {
+        focusEditor();
+        document.execCommand(command, false, value);
+        // update empty state after command
+        if (editorRef.current) {
+            setIsEmpty(!editorRef.current.textContent || editorRef.current.textContent.trim().length === 0);
+        }
+    };
+    const handleInsertImage = (file) => {
+        const url = URL.createObjectURL(file);
+        exec("insertImage", url);
+    };
+    const EMOJIS = [
+        "😀", "😁", "😂", "🤣", "😊", "😍", "🤔", "😎", "😅", "🙃",
+        "👍", "🙏", "🎉", "🔥", "💡", "✅", "❌", "⚠️", "🚀", "❤️"
+    ];
+    return (_jsxs("div", { className: `message-input-field ${className ?? ""}`, children: [_jsxs("div", { className: "frame", children: [_jsx("div", { ref: editorRef, className: `m-teri-sat-raporlar ${isEmpty ? "is-empty" : ""}`, contentEditable: true, suppressContentEditableWarning: true, tabIndex: 0, "data-placeholder": placeholder, onInput: () => {
+                            if (editorRef.current) {
+                                setIsEmpty(!editorRef.current.textContent || editorRef.current.textContent.trim().length === 0);
+                            }
+                        } }), enter && (_jsx("div", { className: "primary-button-wrapper", children: _jsx(PrimaryButton, { className: "primary-button-instance", color: "black", leftIcon: _jsx(IconArrowDown, { className: "icon-instance-node" }), size: "large", status: "default" }) }))] }), richTextFormattingTools && (_jsx("div", { className: "content", children: _jsxs("div", { className: "primary-feature", children: [_jsxs("div", { className: "text-feature", children: [withBold && _jsx(IconBold, { className: "icon-instance-node toolbar-icon", color: "#3D3D3D", size: 20, strokeWidth: 1.5, onMouseDown: onIconMouseDown, onClick: () => exec("bold") }), withItalic && _jsx(IconItalic, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("italic") }), withUnderline && _jsx(IconUnderline, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("underline") }), withStrikethrough && _jsx(IconStrikethrough, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("strikeThrough") })] }), _jsx("div", { className: "divide-vertical" }), _jsxs("div", { className: "text-feature", children: [withHash && _jsx(IconHash, { className: "icon-instance-node toolbar-icon", strokeWidth: 1.5, size: 20, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => exec("insertText", "#") }), _jsxs("div", { className: "text-feature", children: [withPicture && _jsx(IconPhoto, { className: "icon-instance-node toolbar-icon", size: 20, strokeWidth: 1.5, color: "#3D3D3D", onMouseDown: onIconMouseDown, onClick: () => fileInputRef.current?.click() }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden-file-input", onChange: (e) => {
+                                                const file = e.target.files?.[0];
+                                                if (file)
+                                                    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: () => {
+                                                        exec("insertText", e);
+                                                        setShowEmoji(false);
+                                                    }, className: "emoji-btn", children: e }, e))) }) }))] })] })] }) }))] }));
+};
+MessageInputField.propTypes = {
+    text: PropTypes.string,
+    enter: PropTypes.bool,
+    richTextFormattingTools: PropTypes.bool,
+    property1: PropTypes.oneOf(["default"]),
+    placeholder: PropTypes.string,
+    withPicture: PropTypes.bool,
+    withEmoji: PropTypes.bool,
+    withBold: PropTypes.bool,
+    withItalic: PropTypes.bool,
+    withUnderline: PropTypes.bool,
+    withStrikethrough: PropTypes.bool,
+    withHash: PropTypes.bool,
+};

package/dist/MessageInputField/index.d.ts

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

package/dist/MessageInputField/index.js

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

package/dist/MessageInputField/style.css

@@ -0,0 +1,178 @@
+.message-input-field {
+    align-items: flex-start;
+    background-color: #2424240d;
+    border: 1px solid;
+    border-color: #2424241a;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    position: relative;
+  }
+  
+  .message-input-field .frame {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 12px;
+    position: relative;
+    width: 100%;
+  }
+  
+  .message-input-field .m-teri-sat-raporlar {
+    flex: 1;
+    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);
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    min-height: 80px;
+    max-height: 80px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .message-input-field .m-teri-sat-raporlar.is-empty:before {
+    content: attr(data-placeholder);
+    color: rgba(176, 176, 176, 1);
+    pointer-events: none;
+  }
+
+  /* Hidden file input */
+  .message-input-field .hidden-file-input {
+    display: none;
+  }
+  
+  .message-input-field .primary-button-wrapper {
+    align-items: flex-end;
+    align-self: stretch;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: center;
+    position: relative;
+    width: 40px;
+  }
+  
+  .message-input-field .primary-button-instance {
+    aspect-ratio: 1 !important;
+    border: 1px solid !important;
+    border-color: #3d3d3d !important;
+    border-radius: 24px !important;
+    display: flex !important;
+    height: 40px !important;
+    padding: 12px 6px !important;
+    width: 40px !important;
+  }
+  
+  .message-input-field .content {
+    align-items: flex-start;
+    align-self: stretch;
+    border: 1px solid;
+    border-color: #d1d1d1;
+    border-radius: 8px;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 12px;
+    margin-bottom: -1.00px;
+    margin-left: -1.00px;
+    margin-right: -1.00px;
+    position: relative;
+    width: 100%;
+  }
+  
+  .message-input-field .primary-feature {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: 12px;
+    padding: 6px 8px;
+    position: relative;
+  }
+  
+  .message-input-field .text-feature {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    position: relative;
+  }
+  
+  .message-input-field .icon-instance-node {
+    height: 20px !important;
+    position: relative !important;
+    width: 20px !important;
+  }
+  
+  .message-input-field .divider {
+    align-self: stretch;
+    position: relative;
+    width: 1px;
+  }
+  
+  .message-input-field .line-icons-arrow-down-filled-icons-default {
+    height: 20px !important;
+    margin-bottom: -2.00px !important;
+    margin-top: -2.00px !important;
+    position: relative !important;
+    width: 20px !important;
+  }
+  
+  /* Toolbar clickable icons */
+  .message-input-field .toolbar-icon {
+    cursor: pointer;
+  }
+  
+  /* Emoji trigger wrapper */
+  .message-input-field .emoji-trigger {
+    position: relative;
+    display: inline-block;
+    height: 20px;
+  }
+  
+  /* Emoji panel overlay */
+  .message-input-field .emoji-panel {
+    position: absolute;
+    top: 28px;
+    right: 0;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    padding: 8px;
+    width: 195px;
+    z-index: 1000;
+    overflow-y: scroll;
+  }
+  
+  /* Emoji grid */
+  .message-input-field .emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 6px;
+    max-height: 180px;
+    overflow-y: auto;
+  }
+  
+  /* Emoji button */
+  .message-input-field .emoji-btn {
+    font-size: 18px;
+    line-height: 24px;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+  

package/dist/TimeSelector/TimeSelector.d.ts

@@ -0,0 +1,12 @@
+import "./style.css";
+type TimeSelectorProps = {
+    value?: string;
+    onChange: (value: string) => void;
+    onClose?: () => void;
+    hourMin?: number;
+    hourMax?: number;
+    wrapHours?: boolean;
+    adjustHourOnMinuteWrap?: boolean;
+};
+export declare function TimeSelector({ value, onChange, onClose, hourMin, hourMax, wrapHours, adjustHourOnMinuteWrap }: TimeSelectorProps): React.JSX.Element;
+export {};

package/dist/TimeSelector/TimeSelector.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Label } from "../Label/Label";
+import { TertiaryButton } from "../TertiaryButton/TertiaryButton";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import "./style.css";
+function clampToRange(value, min, max) {
+    if (value < min)
+        return min;
+    if (value > max)
+        return max;
+    return value;
+}
+function format2(n) {
+    return n.toString().padStart(2, "0");
+}
+export function TimeSelector({ value = "00:00", onChange, onClose, hourMin = 0, hourMax = 23, wrapHours = true, adjustHourOnMinuteWrap = false }) {
+    const initial = useMemo(() => {
+        const [h, m] = value.split(":").map((v) => parseInt(v || "0", 10));
+        const minutes = m === 30 ? 30 : 0; // restrict to 00 or 30
+        const safeHour = isNaN(h) ? hourMin : clampToRange(h, hourMin, hourMax);
+        return { hour: safeHour, minutes };
+    }, [value, hourMin, hourMax]);
+    const [hour, setHour] = useState(initial.hour);
+    const [minutes, setMinutes] = useState(initial.minutes);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose?.();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onClose]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                onClose?.();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [onClose]);
+    const applyChange = (h, m) => {
+        onChange(`${format2(h)}:${format2(m)}`);
+    };
+    const incHour = () => {
+        let next = hour + 1;
+        if (next > hourMax) {
+            next = wrapHours ? hourMin : hourMax;
+        }
+        setHour(next);
+        applyChange(next, minutes);
+    };
+    const decHour = () => {
+        let next = hour - 1;
+        if (next < hourMin) {
+            next = wrapHours ? hourMax : hourMin;
+        }
+        setHour(next);
+        applyChange(next, minutes);
+    };
+    const incMinutes = () => {
+        // 00 -> 30, 30 -> 00 (+inc hour if configured)
+        if (minutes === 0) {
+            setMinutes(30);
+            applyChange(hour, 30);
+        }
+        else {
+            setMinutes(0);
+            if (adjustHourOnMinuteWrap) {
+                // increment hour respecting bounds/wrap
+                let nextHour = hour + 1;
+                if (nextHour > hourMax)
+                    nextHour = wrapHours ? hourMin : hourMax;
+                setHour(nextHour);
+                applyChange(nextHour, 0);
+            }
+            else {
+                applyChange(hour, 0);
+            }
+        }
+    };
+    const decMinutes = () => {
+        // 30 -> 00, 00 -> 30 (-dec hour if configured)
+        if (minutes === 30) {
+            setMinutes(0);
+            applyChange(hour, 0);
+        }
+        else {
+            setMinutes(30);
+            if (adjustHourOnMinuteWrap) {
+                // decrement hour respecting bounds/wrap
+                let nextHour = hour - 1;
+                if (nextHour < hourMin)
+                    nextHour = wrapHours ? hourMax : hourMin;
+                setHour(nextHour);
+                applyChange(nextHour, 30);
+            }
+            else {
+                applyChange(hour, 30);
+            }
+        }
+    };
+    return (_jsxs("div", { className: `time-selector`, ref: containerRef, children: [_jsxs("div", { className: "frame", children: [_jsx(TertiaryButton, { className: "tertiary-button-instance", color: "black", leftIcon: _jsx(IconChevronUp, { className: "icons-instance", color: "#6D6D6D" }), size: "x-small", status: "default", onClick: incHour }), _jsx(Label, { bold: "on", className: "label-instance", color: "black", size: "medium", spacing: "off", stroke: "off", text: format2(hour), version: "primary" }), _jsx(TertiaryButton, { className: "tertiary-button-instance", color: "black", leftIcon: _jsx(IconChevronDown, { className: "icons-instance", color: "#6D6D6D" }), size: "x-small", status: "default", onClick: decHour })] }), _jsx(Label, { bold: "on", className: "design-component-instance-node", color: "black", divClassName: "label-2", size: "medium", spacing: "off", stroke: "off", text: ":", version: "primary" }), _jsxs("div", { className: "frame", children: [_jsx(TertiaryButton, { className: "tertiary-button-instance", color: "black", leftIcon: _jsx(IconChevronUp, { className: "icons-instance", color: "#6D6D6D" }), size: "x-small", status: "default", onClick: incMinutes }), _jsx(Label, { bold: "on", className: "label-instance", color: "black", size: "medium", spacing: "off", stroke: "off", text: format2(minutes), version: "primary" }), _jsx(TertiaryButton, { className: "tertiary-button-instance", color: "black", leftIcon: _jsx(IconChevronDown, { className: "icons-instance", color: "#6D6D6D" }), size: "x-small", status: "default", onClick: decMinutes })] })] }));
+}

package/dist/TimeSelector/index.d.ts

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

package/dist/TimeSelector/index.js

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

package/dist/TimeSelector/style.css

@@ -0,0 +1,55 @@
+.time-selector {
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  display: inline-flex;
+  gap: 8px;
+  padding: 4px 12px;
+  width: 100%;
+  justify-content: center;
+}
+
+.time-selector .frame {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.time-selector .tertiary-button-instance {
+  align-self: stretch !important;
+  display: flex !important;
+  height: 24px !important;
+  left: unset !important;
+  top: unset !important;
+  width: 100% !important;
+}
+
+.time-selector .label-instance {
+  align-self: stretch !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  left: unset !important;
+  top: unset !important;
+  width: 100% !important;
+  justify-content: center !important;
+}
+
+.time-selector .design-component-instance-node {
+  flex: 0 0 auto !important;
+  left: unset !important;
+  top: unset !important;
+}
+
+.time-selector .label-2 {
+  text-align: center !important;
+}
+
+.time-selector .icons-instance {
+  height: 12px !important;
+  position: relative !important;
+  width: 12px !important;
+}
+
+

package/dist/index.d.ts

@@ -30,3 +30,5 @@ export { Strikethrough } from "./Strikethrough/Strikethrough";
 export { Switch } from "./Switch/Switch";
 export { SwitchButton } from "./SwitchButton/SwitchButton";
 export { TabButton } from "./TabButton/TabButton";
+export { ChipsButton } from "./ChipsButton/ChipsButton";
+export { MessageInput } from "./MessageInput/MessageInput";

package/dist/index.js

@@ -30,3 +30,5 @@ export { Strikethrough } from "./Strikethrough/Strikethrough";
 export { Switch } from "./Switch/Switch";
 export { SwitchButton } from "./SwitchButton/SwitchButton";
 export { TabButton } from "./TabButton/TabButton";
+export { ChipsButton } from "./ChipsButton/ChipsButton";
+export { MessageInput } from "./MessageInput/MessageInput";

package/package.json

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