@ayseaistudio/ui-components 2.3.1 → 3.0.0

package/dist/Switch/Switch.d.ts

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

package/dist/Switch/Switch.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+export const Switch = ({ size, status, color, className, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        status: status || "off",
+        color: color || "black",
+    });
+    return (_jsx("div", { className: `switch ${state.size} ${state.status} ${state.color} ${className || ""}`, onClick: () => {
+            dispatch("click");
+        }, children: _jsx("div", { className: "switch-button" }) }));
+};
+function reducer(state, action) {
+    const type = typeof action === "string" ? action : action?.type;
+    switch (type) {
+        case "click":
+            return {
+                ...state,
+                status: state.status === "on" ? "off" : "on",
+            };
+        default:
+            return state;
+    }
+}
+Switch.propTypes = {
+    size: PropTypes.oneOf(["large", "medium", "small"]),
+    status: PropTypes.oneOf(["off", "on"]),
+    color: PropTypes.oneOf(["black", "blue", "lime", "mauve"]),
+};

package/dist/Switch/index.d.ts

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

package/dist/Switch/index.js

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

package/dist/Switch/style.css

@@ -0,0 +1,151 @@
+.switch {
+    align-items: center;
+    border-radius: 96px;
+    display: flex;
+    padding: 4px;
+    position: relative;
+    border: 1px solid transparent;
+}
+
+.switch * {
+    cursor: pointer;
+}
+
+.switch .switch-button {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translate(0, -50%);
+    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
+}
+
+.switch.large {
+    width: 56px;
+    height: 32px;
+}
+
+.switch.off {
+    border: 1px solid transparent;
+    box-shadow: inset 0px 0px 4px 0px #0000001a;
+}
+
+/* Smooth background transitions on track */
+.switch {
+    transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
+}
+
+.switch.small {
+    width: 32px;
+    height: 320px;
+}
+
+.switch.medium {
+    width: 40px;
+    height: 24px;
+}
+
+.switch.on {
+    box-shadow: inset 0px 0px 4px #0000001a;
+    border-color: transparent;
+}
+
+.switch.on.black {
+    background-color: #454545;
+}
+
+.switch.mauve.off {
+    background-color: #a931ec1a;
+    border-color: #a931ec0d;
+}
+
+.switch.blue.on {
+    background-color: #8361f1;
+}
+
+.switch.black.off {
+    background-color: #e7e7e7;
+    border-color: #2424240d;
+}
+
+.switch.lime.on {
+    background-color: #98d317;
+}
+
+.switch.mauve.on {
+    background-color: #bc53f9;
+}
+
+.switch.blue.off {
+    background-color: #7240e71a;
+    border-color: #7240e70d;
+}
+
+.switch.lime.off {
+    background-color: #71a30d1a;
+    border-color: #71a30d0d;
+}
+
+.switch.large .switch-button {
+    border-radius: 12px;
+    height: 24px;
+    width: 24px;
+}
+
+/* Slide distances for each size */
+.switch.large.on .switch-button {
+    transform: translate(24px, -50%);
+}
+
+.switch.small .switch-button {
+    border-radius: 6px;
+    height: 12px;
+    width: 12px;
+}
+
+.switch.small.on .switch-button {
+    transform: translate(12px, -50%);
+}
+
+.switch.black .switch-button {
+    background-color: #f1f1f1;
+}
+
+.switch.medium .switch-button {
+    border-radius: 8px;
+    height: 16px;
+    width: 16px;
+}
+
+.switch.medium.on .switch-button {
+    transform: translate(16px, -50%);
+}
+
+.switch.mauve.off .switch-button {
+    background-color: #bc53f9;
+}
+
+.switch.blue.on .switch-button {
+    background-color: #f4f3ff;
+}
+
+.switch.black.off .switch-button {
+    border: 1px solid;
+    border-color: #2424240d;
+    box-shadow: var(--drop-shadow-low);
+}
+
+.switch.lime.on .switch-button {
+    background-color: #f9fee7;
+}
+
+.switch.mauve.on .switch-button {
+    background-color: #fbf5ff;
+}
+
+.switch.blue.off .switch-button {
+    background-color: #8361f1;
+}
+
+.switch.lime.off .switch-button {
+    background-color: #98d317;
+}

package/dist/SwitchButton/SwitchButton.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    size: "large" | "medium" | "small";
+    color: "black" | "blue" | "lime" | "mauve";
+    switch1: "ON" | "OFF";
+    className: any;
+    text?: string;
+    onClick?: () => void;
+}
+export declare const SwitchButton: {
+    ({ size, color, switch1, className, text, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        switch1: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/SwitchButton/SwitchButton.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { Switch } from "../Switch/Switch";
+import { Label } from "../Label/Label";
+export const SwitchButton = ({ size, color, switch1, className, text, onClick, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        color: color || "black",
+        switch2: switch1 || "OFF",
+        hovered: false,
+    });
+    return (_jsxs("div", { className: `switch-button size-2-${state.size} ${state.switch2} color-0-${state.color} ${className || ""}`, onClick: () => {
+            onClick && onClick();
+            dispatch("click");
+        }, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, children: [_jsx(Switch, { className: "switch-instance", color: state.color === "lime"
+                    ? "lime"
+                    : state.color === "mauve"
+                        ? "mauve"
+                        : state.color === "blue"
+                            ? "blue"
+                            : "black", size: state.size === "medium"
+                    ? "medium"
+                    : state.size === "small"
+                        ? "small"
+                        : "large", status: state.switch2 === "ON" ? "on" : "off" }), text && (_jsx(Label, { bold: "off", className: "label-instance", color: "black", size: state.size === "medium"
+                    ? "medium"
+                    : state.size === "small"
+                        ? "small"
+                        : "large", spacing: "on", stroke: "off", text: text, version: state.switch2 === "ON" ? "primary" : "secondary" }))] }));
+};
+function reducer(state, action) {
+    const type = typeof action === "string" ? action : action?.type;
+    switch (type) {
+        case "click":
+            return {
+                ...state,
+                switch2: state.switch2 === "ON" ? "OFF" : "ON",
+            };
+        case "mouse_enter":
+            return {
+                ...state,
+                hovered: true,
+            };
+        case "mouse_leave":
+            return {
+                ...state,
+                hovered: false,
+            };
+        default:
+            return state;
+    }
+}
+SwitchButton.propTypes = {
+    size: PropTypes.oneOf(["large", "medium", "small"]),
+    color: PropTypes.oneOf(["black", "blue", "lime", "mauve"]),
+    switch1: PropTypes.oneOf(["ON", "OFF"]),
+};

package/dist/SwitchButton/index.d.ts

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

package/dist/SwitchButton/index.js

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

package/dist/SwitchButton/style.css

@@ -0,0 +1,17 @@
+.switch-button {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.switch-button * {
+  cursor: pointer;
+}
+
+.switch-button .label-instance {
+  flex: 0 0 auto !important;
+}
+
+.switch-button.size-2-large {
+  gap: 4px;
+}

package/dist/TabButton/TabButton.d.ts

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    text: string;
+    leftIcon?: React.JSX.Element;
+    rightIcon?: React.JSX.Element;
+    size: "large" | "medium" | "small";
+    status: "selected" | "default";
+    align: "left-align" | "center-align";
+    version: "no-background";
+    className: any;
+    onClick: () => void;
+}
+export declare const TabButton: {
+    ({ text, size, status, align, version, className, leftIcon, rightIcon, onClick, }: Props): React.JSX.Element;
+    propTypes: {
+        text: PropTypes.Requireable<string>;
+        withLeftIcon: PropTypes.Requireable<boolean>;
+        withText: PropTypes.Requireable<boolean>;
+        withRightIcon: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        align: PropTypes.Requireable<string>;
+        version: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/TabButton/TabButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import "./style.css";
+export const TabButton = ({ text, size, status, align, version, className, leftIcon, rightIcon, onClick, }) => {
+    const [isSelected, setIsSelected] = useState(status === "selected");
+    useEffect(() => {
+        setIsSelected(status === "selected");
+    }, [status]);
+    const currentStatus = isSelected ? "selected" : "default";
+    return (_jsxs("div", { className: `tab-button ${size} ${align} ${currentStatus} ${version} ${className}`, onMouseEnter: () => setIsSelected(true), onMouseLeave: () => setIsSelected(false), onClick: onClick, children: [leftIcon && (_jsx("span", { className: `${size === "medium" ? "class" : (size === "small") ? "class-2" : "class-3"}`, style: { color: currentStatus === "selected" ? "#3D3D3D" : "#6D6D6D" }, children: leftIcon })), text && _jsx("div", { className: "button", children: text }), rightIcon && (_jsx("span", { className: `${size === "large" ? "class-3" : (size === "small" && align === "center-align") ? "class-2" : align === "left-align" && size === "medium" ? "class-4" : align === "left-align" && size === "small" ? "class-5" : "class"}`, style: { color: currentStatus === "selected" ? "#3D3D3D" : "#6D6D6D" }, children: rightIcon }))] }));
+};
+TabButton.propTypes = {
+    text: PropTypes.string,
+    withLeftIcon: PropTypes.bool,
+    withText: PropTypes.bool,
+    withRightIcon: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "medium", "small"]),
+    status: PropTypes.oneOf(["selected", "default"]),
+    align: PropTypes.oneOf(["left-align", "center-align"]),
+    version: PropTypes.oneOf(["no-background"]),
+};

package/dist/TabButton/index.d.ts

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

package/dist/TabButton/index.js

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

package/dist/TabButton/style.css

@@ -0,0 +1,134 @@
+.tab-button {
+  align-items: center;
+  position: relative;
+}
+
+.tab-button .class {
+  height: 20px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.tab-button .class-2 {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.tab-button .class-3 {
+  height: 24px !important;
+  position: relative !important;
+  width: 24px !important;
+}
+
+.tab-button .button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-top: -1.00px;
+  position: relative;
+}
+
+.tab-button .class-4 {
+  height: 20px !important;
+  margin-right: -1.00px !important;
+  position: relative !important;
+  width: 20px !important;
+}
+
+.tab-button .class-5 {
+  height: 16px !important;
+  margin-right: -1.00px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.tab-button.large {
+  display: inline-flex;
+  gap: 6px;
+  justify-content: center;
+  min-width: 44px;
+  padding: 12px;
+}
+
+.tab-button.center-align {
+  display: inline-flex;
+  justify-content: center;
+}
+
+.tab-button.small {
+  gap: 4px;
+  padding: 6px;
+}
+
+.tab-button.medium {
+  gap: 4px;
+  padding: 8px;
+}
+
+.tab-button.medium.left-align {
+  display: flex;
+  top: 272px;
+  width: 107px;
+}
+
+.tab-button.small.left-align {
+  display: flex;
+  width: 95px;
+}
+
+.tab-button.large .button {
+  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);
+}
+
+.tab-button.center-align .button {
+  text-align: center;
+}
+
+.tab-button.small .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);
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.tab-button.default .button {
+  color: #6d6d6d;
+}
+
+.tab-button.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);
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.tab-button.selected .button {
+  color: #3d3d3d;
+}
+
+.tab-button.default.left-align .button {
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.tab-button.large.selected .button {
+  flex: 1;
+}
+
+.tab-button.center-align.large .button {
+  flex: 1;
+}

package/dist/index.d.ts

@@ -21,3 +21,12 @@ export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
 export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
+export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
+export { ChatMessageRight } from "./ChatMessageRight/ChatMessageRight";
+export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
+export { Player } from "./Player/Player";
+export { Radio } from "./Radio/Radio";
+export { Strikethrough } from "./Strikethrough/Strikethrough";
+export { Switch } from "./Switch/Switch";
+export { SwitchButton } from "./SwitchButton/SwitchButton";
+export { TabButton } from "./TabButton/TabButton";

package/dist/index.js

@@ -21,3 +21,12 @@ export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
 export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
+export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
+export { ChatMessageRight } from "./ChatMessageRight/ChatMessageRight";
+export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
+export { Player } from "./Player/Player";
+export { Radio } from "./Radio/Radio";
+export { Strikethrough } from "./Strikethrough/Strikethrough";
+export { Switch } from "./Switch/Switch";
+export { SwitchButton } from "./SwitchButton/SwitchButton";
+export { TabButton } from "./TabButton/TabButton";

package/package.json

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