@ayseaistudio/ui-components 3.11.4 → 3.11.6

package/dist/CallCenterTasks/CallCenterTasks.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { Label } from "../Label";
-import { Strikethrough } from "../Strikethrough";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Label } from "../Label/Label";
 import "./style.css";
+import { IconCheck, IconX } from "@tabler/icons-react";
 export const CallCenterTasks = ({ status, className, strikethroughText = "Selamlaşma ve kendini tanıtma.", labelText, index = 1, }) => {
-    return (_jsxs("div", { className: `call-center-tasks ${className}`, children: [_jsx("div", { className: "frame-5", "data-status": status, children: _jsx("div", { className: `frame-6 status-4-${status}` }) }), _jsx(Label, { bold: "on", className: "label-2", color: status === "warning" ? "galliano" : "black", size: "medium", spacing: "on", stroke: "off", text: labelText || index.toString(), version: "primary" }), _jsx("div", { className: `frame-7 status-5-${status}`, children: _jsx(Strikethrough, { className: "strikethrough-checkbox", color: "black", size: "medium", status: status === "default" ? "default" : "selected", text: strikethroughText }) })] }));
+    return (_jsxs("div", { className: `call-center-tasks ${className}`, children: [_jsx("div", { className: "frame-5", "data-status": status, children: _jsx("div", { className: `frame-6 status-4-${status}` }) }), _jsx(Label, { bold: "on", className: "label-2", color: status === "warning" ? "galliano" : "black", size: "medium", spacing: "on", stroke: "off", text: labelText || index.toString(), version: "primary" }), _jsx("div", { className: `frame-7 status-5-${status}`, children: _jsx(Checkbox, { className: "strikethrough-checkbox", color: status === "warning" ? "galliano" : "black", size: "medium", status: status === "default" ? "default" : "selected", text: strikethroughText, icon: status === "warning" ? _jsx(IconX, { size: 16, color: "rgba(241, 241, 241, 1)" }) : _jsx(IconCheck, { size: 16, color: "rgba(241, 241, 241, 1)" }) }) })] }));
 };
 CallCenterTasks.propTypes = {
     status: PropTypes.oneOf(["warning", "complete", "default"]),

package/dist/CallCenterTasks/style.css

@@ -23,7 +23,7 @@
   right: 5px;
   top: 0;
   bottom: 0;
-  width: 1px;
+  width: 2px;
   background-image: repeating-linear-gradient(to bottom, #b0b0b0 0px, #b0b0b0 4px, transparent 4px, transparent 8px);
 }
 
@@ -46,14 +46,12 @@
 
 .call-center-tasks .label-2 {
   flex: 0 0 auto !important;
-  width: 24px !important;
+  
 }
 
 .call-center-tasks .divide-vertical-2 {
   height: 24px !important;
-  left: unset !important;
   position: relative !important;
-  top: unset !important;
 }
 
 .call-center-tasks .frame-7 {
@@ -74,6 +72,9 @@
   display: flex !important;
   flex: 0 0 auto !important;
   width: 100% !important;
+  background-color: transparent !important;
+  border: none !important;
+
 }
 
 .call-center-tasks .merhaba-iyi-g-nler-wrapper {
@@ -115,7 +116,7 @@
   width: 16px !important;
 }
 
-.call-center-tasks .status-4-warning {
+.call-center-tasks .status-4-warning .field {
   background-color: #d7af1b;
 }
 
@@ -151,5 +152,5 @@
 }
 
 .call-center-tasks .frame-7.status-5-default .merhaba-iyi-g-nler {
-  color: rgba(136, 136, 136, 1);
+  color: #5d5d5d;
 }

package/dist/Checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { type ReactNode } from "react";
 import "./style.css";
 interface Props {
     text?: string;
@@ -7,16 +8,18 @@ interface Props {
     color?: "mauve" | "lime" | "black" | "blue" | "galliano" | "red";
     className?: string;
     fieldClassName?: string;
+    icon?: ReactNode;
     onClick?: () => void;
     onChange?: () => void;
 }
 export declare const Checkbox: {
-    ({ text, size, status, color, className, fieldClassName, onClick, onChange, }: Props): React.JSX.Element;
+    ({ text, size, status, color, className, fieldClassName, icon, onClick, onChange, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
 };
 export {};

package/dist/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { useReducer, useEffect } from "react";
 import "./style.css";
 import { IconCheck } from "@tabler/icons-react";
-export const Checkbox = ({ text, size, status, color, className = "", fieldClassName = "", onClick, onChange, }) => {
+export const Checkbox = ({ text, size, status, color, className = "", fieldClassName = "", icon, onClick, onChange, }) => {
     const [state, dispatch] = useReducer(reducer, {
         size: size ?? "large",
         status: status ?? "default",
@@ -25,11 +25,11 @@ export const Checkbox = ({ text, size, status, color, className = "", fieldClass
             }
             onClick?.();
             onChange?.();
-        }, children: [_jsx("div", { className: `field ${fieldClassName}`, 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 })] }));
+        }, children: [_jsx("div", { className: `field ${fieldClassName}`, children: state.status === "selected" && (_jsx(_Fragment, { children: icon ?? (_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) {
     if (typeof action === "object" && action.type === "sync") {
@@ -51,4 +51,5 @@ Checkbox.propTypes = {
     size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
     status: PropTypes.oneOf(["default", "selected", "hover"]),
     color: PropTypes.oneOf(["mauve", "lime", "black", "blue", "galliano", "red"]),
+    icon: PropTypes.node,
 };

package/dist/Checkbox/style.css

@@ -11,29 +11,23 @@
 
 .checkbox .field {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .checkbox .class {
   height: 20px !important;
-  left: calc(50.00% - 10px) !important;
-  position: absolute !important;
-  top: calc(50.00% - 10px) !important;
   width: 20px !important;
 }
 
 .checkbox .class-2 {
   height: 12px !important;
-  left: calc(50.00% - 6px) !important;
-  position: absolute !important;
-  top: calc(50.00% - 6px) !important;
   width: 12px !important;
 }
 
 .checkbox .class-3 {
   height: 16px !important;
-  left: calc(50.00% - 8px) !important;
-  position: absolute !important;
-  top: calc(50.00% - 8px) !important;
   width: 16px !important;
 }
 

package/package.json

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