@ayseaistudio/ui-components 2.3.1 → 3.0.0

package/dist/Radio/style.css

@@ -0,0 +1,215 @@
+.radio {
+  align-items: center;
+  display: inline-flex;
+  gap: 4px;
+  padding: 6px 8px 6px 6px;
+  position: relative;
+}
+
+
+.radio * {
+  cursor: pointer;
+}
+
+.radio .field {
+  border-radius: 96px;
+  box-shadow: inset 0px 0px 4px #0000001a;
+  position: relative;
+}
+
+.radio .ellipse {
+  position: relative;
+}
+
+.radio .text {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.radio.large .field {
+  height: 30px;
+  width: 30px;
+}
+
+.radio.blue .field {
+  background-color: #7240e71a;
+}
+
+.radio.small .field {
+  height: 22px;
+  width: 22px;
+}
+
+.radio.lime .field {
+  background-color: #71a30d1a;
+}
+
+.radio.default .field {
+  border: 1px solid;
+}
+
+.radio.medium .field {
+  height: 24px;
+  width: 24px;
+}
+
+.radio.selected .field {
+  overflow: hidden;
+}
+
+.radio.hover .field {
+  border: 1px solid;
+}
+
+.radio.x-small .field {
+  aspect-ratio: 1;
+  height: 18px;
+  width: 18px;
+}
+
+.radio.mauve .field {
+  background-color: #a931ec1a;
+}
+
+.radio.lime.default .field {
+  border-color: #71a30d66;
+}
+
+.radio.hover.black .field {
+  background-color: #d1d1d1;
+  border-color: #b0b0b0;
+}
+
+.radio.default.mauve .field {
+  border-color: #a931ec33;
+}
+
+.radio.default.black .field {
+  background-color: #e7e7e7;
+  border-color: #d1d1d1;
+}
+
+.radio.default.blue .field {
+  border-color: #7240e733;
+}
+
+.radio.lime.hover .field {
+  border-color: #71a30d99;
+}
+
+.radio.black.selected .field {
+  background-color: #d1d1d1;
+}
+
+.radio.hover.blue .field {
+  border-color: #7240e74c;
+}
+
+.radio.hover.mauve .field {
+  border-color: #a931ec66;
+}
+
+.radio.large .ellipse {
+  border-radius: 10px;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  height: 20px;
+  left: 5px;
+  top: 5px;
+  width: 20px;
+}
+
+.radio.blue .ellipse {
+  background-color: #8361f1;
+}
+
+.radio.small .ellipse {
+  border-radius: 7px;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  height: 14px;
+  left: 4px;
+  top: 4px;
+  width: 14px;
+}
+
+.radio.lime .ellipse {
+  background-color: #b1e635;
+}
+
+.radio.black .ellipse {
+  background-color: #454545;
+}
+
+.radio.medium .ellipse {
+  border-radius: 8px;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+  width: 16px;
+}
+
+.radio.x-small .ellipse {
+  border-radius: 7px;
+  height: 14px;
+  width: 14px;
+  top: 2px;
+  left: 2px;
+}
+
+.radio.mauve .ellipse {
+  background-color: #cf82fe;
+}
+
+.radio.large .text {
+  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);
+}
+
+.radio.small .text {
+  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);
+}
+
+.radio.default .text {
+  color: #888888;
+}
+
+.radio.medium .text {
+  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);
+}
+
+.radio.selected .text {
+  color: #3d3d3d;
+}
+
+.radio.x-small .text {
+  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;
+}
+
+.radio.hover .text {
+  color: #5d5d5d;
+}

package/dist/SingleSlider/SingleSlider.d.ts

@@ -9,9 +9,10 @@ interface Props {
     onChange?: (value: number) => void;
     className?: string;
     disabled?: boolean;
+    rightLabel?: React.ReactNode;
 }
 export declare const SingleSlider: {
-    ({ size, status, value, min, max, onChange, className, disabled, }: Props): React.JSX.Element;
+    ({ size, status, value, min, max, onChange, className, disabled, rightLabel, }: Props): React.JSX.Element;
     propTypes: {
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;

package/dist/SingleSlider/SingleSlider.js

@@ -1,12 +1,12 @@
 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, }) => {
+export const SingleSlider = ({ size, status, value = 0, min = 0, max = 100, onChange, className, disabled = false, rightLabel, }) => {
     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}%` } })] }));
+    return (_jsxs("div", { className: `single-slider ${size} ${status} ${className || ''}`, style: disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}, children: [rightLabel && (_jsx("div", { className: "slider-time", children: rightLabel })), _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"]),

package/dist/SingleSlider/style.css

@@ -15,6 +15,28 @@
   z-index: 2;
 }
 
+.slider-time {
+  position: absolute;
+  top: 9px;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #5D5D5D;
+}
+
+.slider-time .current-time {
+  font-family: var(--b2-medium-font-family, Arial);
+  font-size: var(--b2-medium-font-size, 12px);
+  font-weight: var(--b2-medium-font-weight, 500);
+}
+
+.slider-time .total-time {
+  font-family: var(--b2-bold-font-family, Arial);
+  font-size: var(--b2-bold-font-size, 12px);
+  font-weight: var(--b2-bold-font-weight, 700);
+}
+
 .slider-progress {
   position: absolute;
   height: 100%;

package/dist/Strikethrough/Strikethrough.d.ts

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

package/dist/Strikethrough/Strikethrough.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useReducer } from "react";
+import "./style.css";
+import { IconCheck } from "@tabler/icons-react";
+export const Strikethrough = ({ text, size, status, color, className, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        size: size || "large",
+        status: status || "default",
+        color: color || "black",
+    });
+    return (_jsxs("div", { className: `strikethrough ${state.size} ${state.status} ${state.color} ${className || ""}`, onMouseLeave: () => {
+            dispatch("mouse_leave");
+        }, onMouseEnter: () => {
+            dispatch("mouse_enter");
+        }, onClick: () => {
+            dispatch("click");
+        }, children: [_jsx("div", { className: "field", children: state.status === "selected" && (_jsx(IconCheck, { className: `${state.size === "large" ? "class" : (state.size === "x-small") ? "class-2" : "class-3"}`, color: ["lime", "mauve"].includes(state.color) ? "#3D3D3D" : "#F1F1F1" })) }), 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;
+    }
+}
+Strikethrough.propTypes = {
+    text: PropTypes.string,
+    withText: PropTypes.bool,
+    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    status: PropTypes.oneOf(["hover", "selected", "default"]),
+    color: PropTypes.oneOf(["mauve", "lime", "black", "blue", "red"]),
+};

package/dist/Strikethrough/index.d.ts

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

package/dist/Strikethrough/index.js

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

package/dist/Strikethrough/style.css

@@ -0,0 +1,366 @@
+.strikethrough {
+  align-items: center;
+  display: inline-flex;
+  padding: 6px 8px 6px 6px;
+  position: relative;
+}
+
+.strikethrough .field {
+  position: relative;
+}
+
+.strikethrough * {
+  cursor: pointer;
+}
+
+.strikethrough .class {
+  height: 20px !important;
+  left: calc(50.00% - 10px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 10px) !important;
+  width: 20px !important;
+}
+
+.strikethrough .class-2 {
+  height: 12px !important;
+  left: calc(50.00% - 6px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 6px) !important;
+  width: 12px !important;
+}
+
+.strikethrough .class-3 {
+  height: 16px !important;
+  left: calc(50.00% - 8px) !important;
+  position: absolute !important;
+  top: calc(50.00% - 8px) !important;
+  width: 16px !important;
+}
+
+.strikethrough .text {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.strikethrough.large {
+  border-radius: 16px;
+  gap: 4px;
+}
+
+.strikethrough.small {
+  border-radius: 16px;
+  gap: 4px;
+}
+
+.strikethrough.medium {
+  border-radius: 16px;
+  gap: 4px;
+}
+
+.strikethrough.x-small {
+  border-radius: 8px;
+  gap: 6px;
+}
+
+.strikethrough.large .field {
+  border-radius: 12px;
+  height: 30px;
+  width: 30px;
+}
+
+.strikethrough.small .field {
+  border-radius: 8px;
+  height: 22px;
+  width: 22px;
+}
+
+.strikethrough.default .field {
+  border: 1px solid;
+  box-shadow: inset 0px 0px 4px #0000001a;
+}
+
+.strikethrough.medium .field {
+  border-radius: 8px;
+  height: 24px;
+  width: 24px;
+}
+
+.strikethrough.selected .field {
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  overflow: hidden;
+}
+
+.strikethrough.hover .field {
+  border: 1px solid;
+  box-shadow: inset 0px 0px 4px #0000001a;
+}
+
+.strikethrough.x-small .field {
+  border-radius: 4px;
+  height: 18px;
+  width: 18px;
+}
+
+.strikethrough.lime.selected .field {
+  background-color: #b1e635;
+}
+
+.strikethrough.x-small.selected .field {
+  aspect-ratio: 1;
+}
+
+.strikethrough.lime.default .field {
+  background-color: #71a30d1a;
+  border-color: #71a30d66;
+}
+
+.strikethrough.hover.black .field {
+  background-color: #d1d1d1;
+  border-color: #b0b0b0;
+}
+
+.strikethrough.red.default .field {
+  background-color: #7240e71a;
+  border-color: #7240e733;
+}
+
+.strikethrough.default.mauve .field {
+  background-color: #a931ec1a;
+  border-color: #a931ec33;
+}
+
+.strikethrough.x-small.hover .field {
+  aspect-ratio: 1;
+}
+
+.strikethrough.blue.selected .field {
+  background-color: #8361f1;
+}
+
+.strikethrough.default.black .field {
+  background-color: #e7e7e7;
+  border-color: #d1d1d1;
+}
+
+.strikethrough.default.blue .field {
+  background-color: #7240e71a;
+  border-color: #7240e733;
+}
+
+.strikethrough.lime.hover .field {
+  background-color: #71a30d1a;
+}
+
+.strikethrough.black.selected .field {
+  background-color: #454545;
+}
+
+.strikethrough.mauve.selected .field {
+  background-color: #cf82fe;
+}
+
+.strikethrough.hover.blue .field {
+  background-color: #7240e71a;
+}
+
+.strikethrough.hover.mauve .field {
+  background-color: #a931ec1a;
+}
+
+.strikethrough.red.hover .field {
+  background-color: #7240e71a;
+}
+
+.strikethrough.red.selected .field {
+  background-color: #8361f1;
+}
+
+.strikethrough.lime.hover.x-small .field {
+  border-color: #71a30d66;
+}
+
+.strikethrough.x-small.hover.mauve .field {
+  border-color: #71a30d66;
+}
+
+.strikethrough.lime.hover.small .field {
+  border-color: #71a30d99;
+}
+
+.strikethrough.x-small.hover.blue .field {
+  border-color: #71a30d66;
+}
+
+.strikethrough.x-small.red.hover .field {
+  border-color: #71a30d66;
+}
+
+.strikethrough.hover.mauve.large .field {
+  border-color: #a931ec66;
+}
+
+.strikethrough.hover.red.large .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.lime.hover.large .field {
+  border-color: #71a30d99;
+}
+
+.strikethrough.hover.blue.medium .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.hover.small.blue .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.red.small.hover .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.hover.mauve.medium .field {
+  border-color: #a931ec66;
+}
+
+.strikethrough.hover.red.medium .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.lime.hover.medium .field {
+  border-color: #71a30d99;
+}
+
+.strikethrough.hover.blue.large .field {
+  border-color: #7240e74c;
+}
+
+.strikethrough.hover.small.mauve .field {
+  border-color: #a931ec66;
+}
+
+.strikethrough.default .text {
+  color: #888888;
+}
+
+.strikethrough.selected .text {
+  color: #888888;
+  text-decoration: line-through;
+}
+
+.strikethrough.x-small.selected .text {
+  font-family: var(--b2-strikethrough-font-family);
+  font-size: var(--b2-strikethrough-font-size);
+  font-style: var(--b2-strikethrough-font-style);
+  font-weight: var(--b2-strikethrough-font-weight);
+  letter-spacing: var(--b2-strikethrough-letter-spacing);
+  line-height: var(--b2-strikethrough-line-height);
+}
+
+.strikethrough.medium.selected .text {
+  font-family: var(--b1-strikethrough-font-family);
+  font-size: var(--b1-strikethrough-font-size);
+  font-style: var(--b1-strikethrough-font-style);
+  font-weight: var(--b1-strikethrough-font-weight);
+  letter-spacing: var(--b1-strikethrough-letter-spacing);
+  line-height: var(--b1-strikethrough-line-height);
+}
+
+.strikethrough.hover.small .text {
+  color: #5d5d5d;
+  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);
+}
+
+.strikethrough.hover.large .text {
+  color: #5d5d5d;
+  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);
+}
+
+.strikethrough.large.selected .text {
+  font-family: var(--b1-strikethrough-font-family);
+  font-size: var(--b1-strikethrough-font-size);
+  font-style: var(--b1-strikethrough-font-style);
+  font-weight: var(--b1-strikethrough-font-weight);
+  letter-spacing: var(--b1-strikethrough-letter-spacing);
+  line-height: var(--b1-strikethrough-line-height);
+}
+
+.strikethrough.x-small.hover .text {
+  color: #3d3d3d;
+  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);
+}
+
+.strikethrough.small.selected .text {
+  font-family: var(--b2-strikethrough-font-family);
+  font-size: var(--b2-strikethrough-font-size);
+  font-style: var(--b2-strikethrough-font-style);
+  font-weight: var(--b2-strikethrough-font-weight);
+  letter-spacing: var(--b2-strikethrough-letter-spacing);
+  line-height: var(--b2-strikethrough-line-height);
+}
+
+.strikethrough.default.medium .text {
+  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);
+}
+
+.strikethrough.default.large .text {
+  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);
+}
+
+.strikethrough.default.small .text {
+  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);
+}
+
+.strikethrough.hover.medium .text {
+  color: #5d5d5d;
+  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);
+}
+
+.strikethrough.x-small.default .text {
+  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);
+}