catchup-library-web 2.6.3 → 2.6.4

package/dist/index.d.mts

@@ -282,7 +282,7 @@ interface IInputGroupProps {
     title?: string;
     defaultValue?: string;
     placeholder?: string;
-    value: string;
+    value: any;
     minValue?: string;
     maxValue?: string;
     onFocus?: (e: any) => void;
@@ -298,6 +298,8 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
     useMath?: boolean;
+    checked?: boolean;
+    description?: string;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -349,7 +351,7 @@ declare global {
         }
     }
 }
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, checked, description, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -282,7 +282,7 @@ interface IInputGroupProps {
     title?: string;
     defaultValue?: string;
     placeholder?: string;
-    value: string;
+    value: any;
     minValue?: string;
     maxValue?: string;
     onFocus?: (e: any) => void;
@@ -298,6 +298,8 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
     useMath?: boolean;
+    checked?: boolean;
+    description?: string;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -349,7 +351,7 @@ declare global {
         }
     }
 }
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, checked, description, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3844,6 +3844,7 @@ var import_react_katex2 = require("react-katex");
 
 // src/components/groups/InputGroup.tsx
 var import_react_select = __toESM(require("react-select"));
+var import_react_switch = __toESM(require("react-switch"));
 var import_react12 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var InputGroup = ({
@@ -3866,7 +3867,9 @@ var InputGroup = ({
   useMinHeight,
   disabled,
   limit,
-  useMath
+  useMath,
+  checked,
+  description
 }) => {
   const textAreaRef = (0, import_react12.useRef)(null);
   const latexTextAreaRef = (0, import_react12.useRef)(null);
@@ -4266,6 +4269,39 @@ var InputGroup = ({
       )
     ] });
   };
+  const SwitchInputGroup = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react_switch.default,
+          {
+            onChange: () => {
+              onClick && onClick(!checked);
+            },
+            checkedIcon: false,
+            offColor: "#e2e8f0",
+            onColor: "#57C2D3",
+            offHandleColor: "#57C2D3",
+            onHandleColor: "#e2e8f0",
+            uncheckedIcon: false,
+            checked: !!checked,
+            height: 20,
+            width: 40,
+            handleDiameter: 14,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "p",
+          {
+            className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
+            children: title
+          }
+        )
+      ] }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+    ] });
+  };
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -4281,6 +4317,8 @@ var InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [

package/dist/index.mjs

@@ -3610,6 +3610,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
+import Switch from "react-switch";
 import { useEffect as useEffect3, useRef, useState as useState12, useCallback } from "react";
 import { Fragment, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var InputGroup = ({
@@ -3632,7 +3633,9 @@ var InputGroup = ({
   useMinHeight,
   disabled,
   limit,
-  useMath
+  useMath,
+  checked,
+  description
 }) => {
   const textAreaRef = useRef(null);
   const latexTextAreaRef = useRef(null);
@@ -4032,6 +4035,39 @@ var InputGroup = ({
       )
     ] });
   };
+  const SwitchInputGroup = () => {
+    return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ jsx23(
+          Switch,
+          {
+            onChange: () => {
+              onClick && onClick(!checked);
+            },
+            checkedIcon: false,
+            offColor: "#e2e8f0",
+            onColor: "#57C2D3",
+            offHandleColor: "#57C2D3",
+            onHandleColor: "#e2e8f0",
+            uncheckedIcon: false,
+            checked: !!checked,
+            height: 20,
+            width: 40,
+            handleDiameter: 14,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          "p",
+          {
+            className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
+            children: title
+          }
+        )
+      ] }),
+      description ? /* @__PURE__ */ jsx23("p", { className: "text-sm text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+    ] });
+  };
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -4047,6 +4083,8 @@ var InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
   return /* @__PURE__ */ jsxs14(Fragment, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -24,7 +24,8 @@
     "react-loader-spinner": ">=5.0.0",
     "react-modal": "^3.16.0",
     "react-pdf": ">=7.0.0",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.0",
+    "react-switch": "^7.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
@@ -40,6 +41,7 @@
     "react-modal": "^3.16.3",
     "react-pdf": "^10.0.1",
     "react-select": "^5.10.0",
+    "react-switch": "^7.0.0",
     "tsup": "^8.3.6",
     "typescript": "^5.9.2"
   }

package/src/components/groups/InputGroup.tsx

@@ -1,4 +1,5 @@
 import Select from "react-select";
+import Switch from "react-switch";
 import i18n from "../../language/i18n";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { IInputGroupProps } from "../../properties/GroupProperties";
@@ -65,6 +66,8 @@ const InputGroup = ({
   disabled,
   limit,
   useMath,
+  checked,
+  description,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -534,6 +537,43 @@ const InputGroup = ({
     );
   };
 
+  const SwitchInputGroup = () => {
+    return (
+      <div className="flex flex-col my-1">
+        <div className="flex flex-row items-center">
+          <Switch
+            onChange={() => {
+              onClick && onClick(!checked);
+            }}
+            checkedIcon={false}
+            offColor={"#e2e8f0"}
+            onColor={"#57C2D3"}
+            offHandleColor={"#57C2D3"}
+            onHandleColor={"#e2e8f0"}
+            uncheckedIcon={false}
+            checked={!!checked}
+            height={20}
+            width={40}
+            handleDiameter={14}
+            disabled={disabled}
+          />
+          <p
+            className={`${
+              checked ? "font-bold" : "text-catchup-gray"
+            } px-2 transition-all duration-300`}
+          >
+            {title}
+          </p>
+        </div>
+        {description ? (
+          <p className="text-sm text-catchup-gray-300 mt-1 ml-12">
+            {description}
+          </p>
+        ) : null}
+      </div>
+    );
+  };
+
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -549,6 +589,8 @@ const InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
 

package/src/properties/GroupProperties.ts

@@ -3,7 +3,7 @@ export interface IInputGroupProps {
   title?: string;
   defaultValue?: string;
   placeholder?: string;
-  value: string;
+  value: any;
   minValue?: string;
   maxValue?: string;
   onFocus?: (e: any) => void;
@@ -19,6 +19,8 @@ export interface IInputGroupProps {
   disabled?: boolean;
   limit?: number;
   useMath?: boolean;
+  checked?: boolean;
+  description?: string;
 }
 
 export interface ILeftTextRightInputGroupProps {