@ayseaistudio/ui-components 1.0.2 → 2.0.0

package/dist/PlatformSelector/style.css

@@ -0,0 +1,61 @@
+.platform-selector {
+  align-items: center;
+  border: 1px solid;
+  border-color: #e7e7e7;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  padding: 4px;
+  position: relative;
+  width: inherit;
+  height: 32px;
+}
+
+.platform-selector .frame-platform-selector {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 6px;
+  position: relative;
+}
+
+.platform-selector .icon-agent {
+  align-items: center;
+  background: linear-gradient(
+    225deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(218, 243, 159, 1) 48%,
+    rgba(177, 230, 53, 1) 100%
+  );
+  border-radius: 5px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  padding: 4px;
+  position: relative;
+}
+
+.platform-selector .icons {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.platform-selector .text-wrapper {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  color: #454545;
+  display: -webkit-box;
+  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);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: fit-content;
+}

package/dist/PlatformsButton/PlatformsButton.d.ts

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    titleText: string;
+    subtext: string;
+    property1: "hover" | "default";
+    className: any;
+    icon: React.JSX.Element;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+export declare const PlatformsButton: {
+    ({ titleText, subtext, property1, className, icon, onClick, disabled, }: Props): React.JSX.Element;
+    propTypes: {
+        titleText: PropTypes.Requireable<string>;
+        subtext: PropTypes.Requireable<string>;
+        property1: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/PlatformsButton/PlatformsButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+export const PlatformsButton = ({ titleText = "Agentmaker", subtext = "Create AI Agents", property1, className, icon = _jsx(IconLayoutDashboard, { className: "icons" }), onClick, disabled = false, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        property1: property1 || "default",
+    });
+    return (_jsxs("div", { className: `platforms-button ${state.property1} ${className} ${disabled ? "disabled" : ""}`, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onClick: disabled ? undefined : onClick, style: { cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1 }, children: [_jsx("div", { className: "icon-agent", children: icon }), _jsxs("div", { className: "frame", children: [_jsx("div", { className: "agentmaker", children: titleText }), _jsx("div", { className: "create-AI-agents", children: subtext })] })] }));
+};
+function reducer(state, action) {
+    switch (action) {
+        case "mouse_enter":
+            return {
+                ...state,
+                property1: "hover",
+            };
+        case "mouse_leave":
+            return {
+                ...state,
+                property1: "default",
+            };
+    }
+    return state;
+}
+PlatformsButton.propTypes = {
+    titleText: PropTypes.string,
+    subtext: PropTypes.string,
+    property1: PropTypes.oneOf(["hover", "default"]),
+};

package/dist/PlatformsButton/index.d.ts

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

package/dist/PlatformsButton/index.js

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

package/dist/PlatformsButton/style.css

@@ -0,0 +1,88 @@
+.platforms-button {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  padding: 6px;
+  position: relative;
+  width: 183px;
+  cursor: pointer;
+}
+
+.platforms-button .icon-agent {
+  align-items: center;
+  background: linear-gradient(
+    225deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(218, 243, 159, 1) 48%,
+    rgba(177, 230, 53, 1) 100%
+  );
+  border-radius: 4px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  justify-content: center;
+  padding: 6px;
+  position: relative;
+}
+
+.platforms-button .frame {
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.platforms-button .agentmaker {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 0;
+  color: #454545;
+  display: -webkit-box;
+  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);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.platforms-button .create-AI-agents {
+  align-self: stretch;
+  color: #888888;
+  font-family: var(--b3-medium-font-family);
+  font-size: var(--b3-medium-font-size);
+  font-style: var(--b3-medium-font-style);
+  font-weight: var(--b3-medium-font-weight);
+  height: 14px;
+  letter-spacing: var(--b3-medium-letter-spacing);
+  line-height: var(--b3-medium-line-height);
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.platforms-button .icons {
+  height: 22px !important;
+  position: relative !important;
+  width: 22px !important;
+}
+
+.platforms-button.hover {
+  background-color: #f1f1f1;
+  border-radius: 6px;
+}
+
+.platforms-button.hover .frame {
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+}
+
+.platforms-button.default .frame {
+  display: inline-flex;
+  flex: 0 0 auto;
+}

package/dist/SingleSlider/SingleSlider.d.ts

@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size: "large";
+    status: "zero";
+    value?: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const SingleSlider: {
+    ({ size, status, value, min, max, onChange, className, disabled, }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<number>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/SingleSlider/SingleSlider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+export const SingleSlider = ({ size, status, value = 0, min = 0, max = 100, onChange, className, disabled = false, }) => {
+    const handleChange = (e) => {
+        const newValue = parseFloat(e.target.value);
+        onChange?.(newValue);
+    };
+    return (_jsxs("div", { className: `single-slider ${size} ${status} ${className || ''}`, style: disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}, children: [_jsx("input", { type: "range", min: min, max: max, value: value, onChange: handleChange, className: "slider-input", disabled: disabled }), _jsx("div", { className: "slider-progress", style: { width: `${(value / max) * 100}%` } })] }));
+};
+SingleSlider.propTypes = {
+    size: PropTypes.oneOf(["large"]),
+    status: PropTypes.oneOf(["zero"]),
+    value: PropTypes.number,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};

package/dist/SingleSlider/index.d.ts

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

package/dist/SingleSlider/index.js

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

package/dist/SingleSlider/style.css

@@ -0,0 +1,54 @@
+.single-slider {
+  position: relative;
+  width: 100%;
+  height: 12px !important;
+  border-radius: 96px;
+  background-color: rgba(36, 36, 36, 0.2);
+}
+
+.slider-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.slider-progress {
+  position: absolute;
+  height: 100%;
+  background-color: #303030;
+  border-radius: 96px;
+  transition: width 0.1s ease;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #303030;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -6px;
+  z-index: 3;
+}
+
+.slider-input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: #303030;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  z-index: 3;
+}
+
+.slider-input::-ms-thumb {
+  width: 16px;
+  height: 16px;
+  background: #303030;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 3;
+}

package/dist/Tags/Tags.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text?: string;
+    size: "large" | "x-small" | "medium" | "small";
+    colors: "mauve" | "lime" | "black" | "blue" | "orange" | "galliano" | "green" | "red";
+    version?: "vertical" | "horizontal";
+    disabled?: "off" | "on";
+    className?: any;
+    icon?: React.JSX.Element;
+}
+export declare const Tags: {
+    ({ text, size, colors, version, disabled, className, icon, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withText: PropTypes.Requireable<boolean>;
+        withIcon: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        colors: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/Tags/Tags.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import PropTypes from "prop-types";
+import "./style.css";
+const getIconColor = (colors, disabled) => {
+    if (disabled === "on") {
+        return "#B0B0B0";
+    }
+    if (disabled === "off") {
+        const colorMap = {
+            black: "#3D3D3D",
+            lime: "#567C0F",
+            mauve: "#9320D0",
+            blue: "#7240E7",
+            red: "#ED1515",
+            orange: "#E44012",
+            galliano: "#B98915",
+            green: "#289140"
+        };
+        return colorMap[colors];
+    }
+    return undefined;
+};
+export const Tags = ({ text = "Text", size, colors, version, disabled, className, icon, }) => {
+    return (_jsxs("div", { className: `tags ${colors} ${size} ${version} ${className}`, children: [icon && (React.cloneElement(icon, {
+                className: `${["small", "x-small"].includes(size) ? "class" : "class-2"}`,
+                color: getIconColor(colors, disabled)
+            })), text && (_jsx("div", { className: `text size-${size} ${disabled} version-${version} colors-${colors}`, children: text }))] }));
+};
+Tags.propTypes = {
+    text: PropTypes.string,
+    withText: PropTypes.bool,
+    withIcon: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    colors: PropTypes.oneOf([
+        "mauve",
+        "lime",
+        "black",
+        "blue",
+        "orange",
+        "galliano",
+        "green",
+        "red",
+    ]),
+    version: PropTypes.oneOf(["vertical", "horizontal"]),
+    disabled: PropTypes.oneOf(["off", "on"]),
+};

package/dist/Tags/index.d.ts

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

package/dist/Tags/index.js

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

package/dist/Tags/style.css

@@ -0,0 +1,173 @@
+.tags {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+.tags .class {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.tags .class-2 {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.tags .text {
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.tags.mauve {
+  background-color: #a931ec1a;
+}
+
+.tags.large {
+  border-radius: 12px;
+  gap: 6px;
+}
+
+.tags.black {
+  background-color: #2424240d;
+}
+
+.tags.small {
+  border-radius: 8px;
+  gap: 4px;
+  padding: 6px;
+}
+
+.tags.red {
+  background-color: #ed15150d;
+}
+
+.tags.medium {
+  border-radius: 8px;
+  gap: 4px;
+  padding: 6px;
+}
+
+.tags.green {
+  background-color: #2891401a;
+}
+
+.tags.blue {
+  background-color: #7240e71a;
+}
+
+.tags.vertical {
+  flex-direction: column;
+}
+
+.tags.lime {
+  background-color: #71a30d1a;
+}
+
+.tags.orange {
+  background-color: #e440121a;
+}
+
+.tags.x-small {
+  border-radius: 8px;
+  gap: 4px;
+  padding: 4px;
+}
+
+.tags.galliano {
+  background-color: #b989150d;
+}
+
+.tags.horizontal.large {
+  padding: 8px;
+}
+
+.tags.vertical.large {
+  padding: 12px;
+}
+
+.tags .size-large {
+  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);
+}
+
+.tags .size-small {
+  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);
+}
+
+.tags .on {
+  color: #b0b0b0;
+}
+
+.tags .size-medium {
+  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);
+}
+
+.tags .size-x-small {
+  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);
+}
+
+.tags .version-horizontal {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  margin-top: -1.00px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tags .off.colors-red {
+  color: #ed1515;
+}
+
+.tags .colors-green.off {
+  color: #289140;
+}
+
+.tags .off.colors-galliano {
+  color: #b98915;
+}
+
+.tags .off.colors-mauve {
+  color: #9320d0;
+}
+
+.tags .off.colors-blue {
+  color: #7240e7;
+}
+
+.tags .colors-orange.off {
+  color: #e44012;
+}
+
+.tags .colors-black.off {
+  color: #3d3d3d;
+}
+
+.tags .colors-lime.off {
+  color: #567c0f;
+}

package/dist/index.d.ts

@@ -3,3 +3,14 @@ export { SecondaryButton } from "./SecondaryButton/SecondaryButton";
 export { TertiaryButton } from "./TertiaryButton/TertiaryButton";
 export { SelectionButton } from "./SelectionButton/SelectionButton";
 export { Label } from "./Label/Label";
+export { Tags } from "./Tags/Tags";
+export { Dot } from "./Dot/Dot";
+export { Activity } from "./Activity/Activity";
+export { Avatar } from "./Avatar/Avatar";
+export { InputField } from "./InputField/InputField";
+export { Loader } from "./Loader/Loader";
+export { LoginInput } from "./LoginInput/LoginInput";
+export { Page } from "./Page/Page";
+export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
+export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
+export { SingleSlider } from "./SingleSlider/SingleSlider";

package/dist/index.js

@@ -3,3 +3,14 @@ export { SecondaryButton } from "./SecondaryButton/SecondaryButton";
 export { TertiaryButton } from "./TertiaryButton/TertiaryButton";
 export { SelectionButton } from "./SelectionButton/SelectionButton";
 export { Label } from "./Label/Label";
+export { Tags } from "./Tags/Tags";
+export { Dot } from "./Dot/Dot";
+export { Activity } from "./Activity/Activity";
+export { Avatar } from "./Avatar/Avatar";
+export { InputField } from "./InputField/InputField";
+export { Loader } from "./Loader/Loader";
+export { LoginInput } from "./LoginInput/LoginInput";
+export { Page } from "./Page/Page";
+export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
+export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
+export { SingleSlider } from "./SingleSlider/SingleSlider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,6 +22,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@tabler/icons-react": "^3.35.0",
     "prop-types": "^15.8.1"
   }
 }