@ayseaistudio/ui-components 2.3.2 → 3.0.0

package/dist/ChatMessageLeft/ChatMessageLeft.d.ts

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    className?: any;
+    timestamp?: string;
+    highlighted?: boolean;
+}
+export declare const ChatMessageLeft: {
+    ({ text, className, timestamp, highlighted, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        timestamp: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ChatMessageLeft/ChatMessageLeft.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { Label } from "../Label/Label";
+export const ChatMessageLeft = ({ text, className, timestamp, highlighted, }) => {
+    return (_jsx("div", { className: `chat-message-left ${highlighted ? "highlighted" : ""} ${className}`, children: _jsxs(_Fragment, { children: [_jsx("p", { className: "hafta-sonu-i-in-bir-2", children: text }), _jsx(_Fragment, { children: _jsx("div", { className: "timestamp-wrapper", children: timestamp && (_jsx(Label, { bold: "off", className: "instance-node-2", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" })) }) })] }) }));
+};
+ChatMessageLeft.propTypes = {
+    text: PropTypes.string,
+    timestamp: PropTypes.string,
+};

package/dist/ChatMessageLeft/index.d.ts

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

package/dist/ChatMessageLeft/index.js

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

package/dist/ChatMessageLeft/style.css

@@ -0,0 +1,69 @@
+.chat-message-left {
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  gap: 4px;
+  padding: 12px;
+  position: relative;
+  width: 80%;
+  cursor: pointer;
+  background-color: rgba(241, 241, 241, 1);
+}
+
+.chat-message-left.highlighted {
+  background-color: rgba(113, 163, 13, 0.05);
+  border-color: rgba(152, 211, 23, 1);
+}
+
+.chat-message-left *{
+  cursor: pointer;
+}
+
+.chat-message-left .hafta-sonu-i-in-bir-2 {
+  color: #3d3d3d;
+  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);
+  position: relative;
+}
+
+.chat-message-left .instance-node-2 {
+  padding: 0px;
+}
+
+.chat-message-left .hafta-sonu-i-in-bir-3 {
+  align-self: stretch;
+  color: #3d3d3d;
+  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);
+  margin-top: -1.00px;
+  position: relative;
+}
+
+.chat-message-left .frame-10 {
+  align-items: flex-end;
+  align-self: stretch;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.chat-message-left .timestamp-wrapper {
+  justify-content: flex-end;
+  align-items: center;
+  display: inline-flex;
+  height: 100% !important;
+  flex-direction: column;
+  position: relative;
+}

package/dist/ChatMessageRight/ChatMessageRight.d.ts

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    className?: any;
+    divClassName?: any;
+    text?: string;
+    frameClassName?: any;
+    avatarColor?: "grey" | "lime" | "mauve" | "zest" | "blue" | "green" | "galliano" | "orange" | "red";
+    timestamp?: string;
+    avatarLetter?: string;
+    highlighted?: boolean;
+}
+export declare const ChatMessageRight: {
+    ({ className, divClassName, text, frameClassName, avatarColor, timestamp, avatarLetter, highlighted, }: Props): React.JSX.Element;
+    propTypes: {
+        hasDiv: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<string>;
+        avatarColor: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ChatMessageRight/ChatMessageRight.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { Avatar } from "../Avatar/Avatar";
+import { Label } from "../Label/Label";
+export const ChatMessageRight = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, highlighted, }) => {
+    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [_jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), _jsxs("div", { className: `frame-22 ${frameClassName}`, children: [_jsx(Avatar, { color: avatarColor, letter: avatarLetter, size: "medium", status: "default", version: "default" }), _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" })] })] }));
+};
+ChatMessageRight.propTypes = {
+    hasDiv: PropTypes.bool,
+    text: PropTypes.string,
+    avatarColor: PropTypes.string,
+};

package/dist/ChatMessageRight/index.d.ts

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

package/dist/ChatMessageRight/index.js

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

package/dist/ChatMessageRight/style.css

@@ -0,0 +1,87 @@
+.chat-message-right {
+  align-items: flex-start;
+  background-color: #f7f7f7;
+  border: 1px solid;
+  border-color: #e7e7e7;
+  border-radius: 16px;
+  display: flex;
+  gap: 8px;
+  max-width: 560px;
+  padding: 12px;
+  position: relative;
+  width: 80%;
+}
+
+.chat-message-right.highlighted {
+  background-color: rgba(113, 163, 13, 0.05);
+  border-color: rgba(152, 211, 23, 1);
+}
+
+.chat-message-right .message-baloon {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+  gap: 12px;
+  position: relative;
+}
+
+.chat-message-right .message {
+  align-items: flex-end;
+  align-self: stretch;
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+  gap: 4px;
+  justify-content: flex-end;
+  position: relative;
+}
+
+.chat-message-right .frame-21 {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 6px;
+  position: relative;
+}
+
+.chat-message-right .text-wrapper-3 {
+  align-self: stretch;
+  color: #3d3d3d;
+  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;
+}
+
+.chat-message-right .p {
+  align-self: stretch;
+  color: #3d3d3d;
+  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);
+  position: relative;
+}
+
+.chat-message-right .frame-22 {
+  align-items: flex-end;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 6px;
+  justify-content: center;
+  position: relative;
+}
+
+.chat-message-right .label-9 {
+  padding: 0px;
+}

package/dist/LabelCheckbox/LabelCheckbox.d.ts

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import { ReactNode } from "react";
+import "./style.css";
+interface Props {
+    label?: string;
+    size?: "large" | "medium";
+    status?: "hover" | "selected" | "default";
+    color?: "black";
+    className?: string;
+    icon?: ReactNode;
+    withCheckbox?: boolean;
+}
+export declare const LabelCheckbox: {
+    ({ label, size, status, color, className, icon, withCheckbox, }: Props): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        withCheckbox: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/LabelCheckbox/LabelCheckbox.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { Checkbox } from "../Checkbox/Checkbox";
+export const LabelCheckbox = ({ label, size, status, color, className = "", icon, withCheckbox = true, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        status: status || "default",
+        color: color || "black",
+    });
+    return (_jsxs("div", { className: `label-checkbox ${state.size} status-1-${state.status} ${className}`, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onClick: () => {
+            dispatch("click");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, children: [icon && _jsx("span", { className: "icons", children: icon }), label && _jsx("div", { className: "label", children: label }), withCheckbox &&
+                _jsx(Checkbox, { className: "checkbox-instance", color: "lime", size: "x-small", status: "default" })] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            return state.status === "default" ? { ...state, status: "hover" } : state;
+        case "mouse_leave":
+            return state.status === "hover" ? { ...state, status: "default" } : state;
+        case "click":
+            if (state.status === "hover")
+                return { ...state, status: "selected" };
+            if (state.status === "selected")
+                return { ...state, status: "default" };
+            return state;
+        default:
+            return state;
+    }
+}
+LabelCheckbox.propTypes = {
+    label: PropTypes.string,
+    icon: PropTypes.node,
+    size: PropTypes.oneOf(["large", "medium"]),
+    status: PropTypes.oneOf(["hover", "selected", "default"]),
+    color: PropTypes.oneOf(["black"]),
+    withCheckbox: PropTypes.bool,
+    className: PropTypes.string,
+};

package/dist/LabelCheckbox/index.d.ts

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

package/dist/LabelCheckbox/index.js

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

package/dist/LabelCheckbox/style.css

@@ -0,0 +1,94 @@
+.label-checkbox {
+  align-items: center;
+  border: 1px solid;
+  border-radius: 12px;
+  display: flex;
+  gap: 6px;
+  position: relative;
+  width: 130px;
+  cursor: pointer;
+}
+.label-checkbox * {
+  cursor: pointer;
+}
+
+.label-checkbox .icons {
+  height: 24px !important;
+  position: relative !important;
+  width: 24px !important;
+}
+
+.label-checkbox .label {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  align-items: center;
+  display: -webkit-box;
+  flex: 1;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.label-checkbox .checkbox-instance {
+  background-color: unset !important;
+  border: unset !important;
+  border-color: unset !important;
+  display: flex !important;
+  padding: unset !important;
+  width: 18px !important;
+}
+
+.label-checkbox.large {
+  padding: 12px;
+}
+
+.label-checkbox.status-1-default {
+  background-color: #f7f7f7;
+  border-color: #e7e7e7;
+}
+
+.label-checkbox.medium {
+  padding: 8px;
+}
+
+.label-checkbox.status-1-selected {
+  background-color: #e7e7e7;
+  border-color: #d1d1d1;
+}
+
+.label-checkbox.status-1-hover {
+  background-color: #f7f7f7;
+  border-color: #e7e7e7;
+}
+
+.label-checkbox.large .label {
+  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);
+  margin-top: -1.00px;
+}
+
+.label-checkbox.status-1-default .label {
+  color: #888888;
+}
+
+.label-checkbox.medium .label {
+  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);
+}
+
+.label-checkbox.status-1-selected .label {
+  color: #3d3d3d;
+}
+
+.label-checkbox.status-1-hover .label {
+  color: #5d5d5d;
+}

package/dist/Player/Player.d.ts

@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    withButton: boolean;
+    size: "large";
+    status: "play" | "pause";
+    direction: "horizontal";
+    isPlaying?: boolean;
+    togglePlayPause?: () => void;
+    className: any;
+    audioUrl?: string;
+    audioReference: React.Ref<HTMLAudioElement | null>;
+}
+export declare const Player: {
+    ({ withButton, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
+    propTypes: {
+        withButton: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        direction: PropTypes.Requireable<string>;
+        audioUrl: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Player/Player.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { SingleSlider } from "../SingleSlider";
+import "./style.css";
+import { IconPlayerPlayFilled, IconPlayerPauseFilled } from "@tabler/icons-react";
+import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+import { useState, useEffect, useRef } from "react";
+export const Player = ({ withButton = true, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }) => {
+    const [volume, setVolume] = useState(100);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const audioRef = useRef(null);
+    const setAudioInstance = (instance) => {
+        audioRef.current = instance;
+        if (typeof audioReference === "function") {
+            audioReference(instance);
+        }
+        else if (audioReference && "current" in audioReference) {
+            audioReference.current = instance;
+        }
+    };
+    const formatTime = (seconds) => {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+    };
+    const handleSeekChange = (value) => {
+        if (audioRef.current) {
+            audioRef.current.currentTime = value;
+            setCurrentTime(value);
+        }
+    };
+    useEffect(() => {
+        if (audioUrl) {
+            fetch(audioUrl)
+                .then((res) => res.blob())
+                .then((blob) => {
+                const blobUrl = URL.createObjectURL(blob);
+                setAudioInstance(new Audio(blobUrl));
+                audioRef.current?.addEventListener("loadedmetadata", () => {
+                    setDuration(audioRef.current?.duration || 0);
+                });
+                audioRef.current?.addEventListener("timeupdate", () => {
+                    setCurrentTime(audioRef.current?.currentTime || 0);
+                });
+                // Ses seviyesi ayarı
+                if (audioRef.current) {
+                    audioRef.current.volume = 1.0;
+                }
+            })
+                .catch((err) => {
+                console.error("Ses dosyası alınamadı:", err);
+            });
+        }
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+            }
+            setAudioInstance(null);
+        };
+    }, [audioUrl]);
+    return (_jsxs("div", { className: `player ${className}`, children: [withButton && (_jsx(PrimaryButton, { className: "primary-button", leftIcon: isPlaying ?
+                    _jsx(IconPlayerPauseFilled, { size: 20, color: "#F1F1F1" }) :
+                    _jsx(IconPlayerPlayFilled, { size: 20, color: "#F1F1F1" }), color: "black", onClick: togglePlayPause })), _jsx("div", { className: "player-controls", children: _jsx(SingleSlider, { className: "seek-slider", size: "large", status: "zero", value: currentTime, min: 0, max: duration, onChange: handleSeekChange, rightLabel: _jsxs("span", { className: "slider-time", children: [_jsx("span", { className: "current-time", children: formatTime(currentTime) }), _jsx("span", { children: " / " }), _jsx("span", { className: "total-time", children: formatTime(duration || 0) })] }) }) })] }));
+};
+Player.propTypes = {
+    withButton: PropTypes.bool,
+    size: PropTypes.oneOf(["large"]),
+    status: PropTypes.oneOf(["play"]),
+    direction: PropTypes.oneOf(["horizontal"]),
+    audioUrl: PropTypes.string,
+};

package/dist/Player/index.d.ts

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

package/dist/Player/index.js

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

package/dist/Player/style.css

@@ -0,0 +1,32 @@
+.player {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.player-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.time-display {
+  font-size: 14px;
+  color: #303030;
+  min-width: 80px;
+  text-align: center;
+}
+
+
+
+.player .primary-button {
+  border-radius: 50% !important;
+  width: 44px !important;
+  height: 44px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-shadow: none !important;
+}

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    size?: "large" | "x-small" | "medium" | "small";
+    status?: "hover" | "selected" | "default";
+    color?: "black" | "blue" | "lime" | "mauve";
+    className?: string;
+}
+export declare const Radio: {
+    ({ text, size, status, color, className, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Radio/Radio.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+export const Radio = ({ text, size, status, color, className, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        status: status || "default",
+        color: color || "black",
+    });
+    return (_jsxs("div", { className: `radio ${state.status} ${state.size} ${state.color} ${className || ""}`, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, onClick: () => {
+            dispatch("click");
+        }, children: [_jsx("div", { className: "field", children: state.status === "selected" && _jsx("div", { className: "ellipse" }) }), text && _jsx("div", { className: "text", children: text })] }));
+};
+function reducer(state, action) {
+    const type = typeof action === "string" ? action : action?.type;
+    switch (type) {
+        case "mouse_enter":
+            return {
+                ...state,
+                status: state.status === "selected" ? "selected" : "hover",
+            };
+        case "mouse_leave":
+            return {
+                ...state,
+                status: state.status === "selected" ? "selected" : "default",
+            };
+        case "click":
+            return {
+                ...state,
+                status: state.status === "selected" ? "default" : "selected",
+            };
+        default:
+            return state;
+    }
+}
+Radio.propTypes = {
+    text: PropTypes.string,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    status: PropTypes.oneOf(["hover", "selected", "default"]),
+    color: PropTypes.oneOf(["black", "blue", "lime", "mauve"]),
+};

package/dist/Radio/index.d.ts

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

package/dist/Radio/index.js

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