react-toolkit-ultra 1.0.28 → 1.0.30

package/README.md

@@ -1,73 +1,8 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# React-Toolkit-Ultra
+
+```bash
+npm install react-toolkit-ultra
+# or
+yarn add react-toolkit-ultra
+# or
+pnpm add react-toolkit-ultra

package/dist/index.cjs

@@ -20,22 +20,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Switch: () => Switch
+  Switch: () => Switch,
+  SwitchLock: () => SwitchLock
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Switch/Switch.tsx
 var import_react = require("react");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Switch = ({
   checked = false,
-  onChange,
   disabled = false,
   width = 50,
   height = 24,
   bgColor = "#9835FF",
   inActiveColor = "#7a7a7ab3",
-  thumbColor = "white"
+  thumbColor = "white",
+  onChange
 }) => {
   const [isOn, setOn] = (0, import_react.useState)(checked);
   const safeWidth = Math.min(Math.max(width, 50), 100);
@@ -60,7 +62,7 @@ var Switch = ({
         width: safeWidth,
         borderRadius: "15px",
         position: "relative",
-        cursor: disabled ? "no-drop" : "pointer",
+        cursor: window.matchMedia("(hover: hover)").matches ? disabled ? "no-drop" : "pointer" : "default",
         transition: "background 0.3s ease"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -82,7 +84,98 @@ var Switch = ({
     }
   );
 };
+var SwitchLock = ({
+  checked = false,
+  disabled = false,
+  width = 55,
+  height = 24,
+  bgColor = "#9835FF",
+  inActiveColor = "#7a7a7ab3",
+  thumbColor = "#9835FF",
+  onChange
+}) => {
+  const [isON, setON] = (0, import_react.useState)(checked);
+  const safeWidth = Math.min(Math.max(width, 55), 100);
+  const safeHeight = Math.min(Math.max(height, 24), 30);
+  const thumSize = safeHeight - 3;
+  const toggle = () => {
+    if (disabled) return;
+    const newStatus = !isON;
+    setON(newStatus);
+    onChange?.(newStatus);
+  };
+  (0, import_react.useEffect)(() => {
+    setON(checked);
+  }, [checked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      onClick: toggle,
+      style: {
+        position: "relative",
+        height: safeHeight,
+        width: safeWidth,
+        borderRadius: "5px",
+        borderWidth: "2px",
+        borderStyle: "solid",
+        borderColor: isON ? bgColor : inActiveColor,
+        cursor: window.matchMedia("(hover: hover)").matches ? disabled ? "no-drop" : "pointer" : "default",
+        overflow: "hidden",
+        transition: "border 0.3s ease"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_lucide_react.LockKeyhole,
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: isON ? 2 : -100,
+              transform: "translateY(-50%)",
+              height: thumSize - 3,
+              width: thumSize - 3,
+              color: bgColor,
+              transition: "left 0.5s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: isON ? safeWidth - safeHeight : "2px",
+              transform: "translateY(-50%)",
+              background: isON ? thumbColor : inActiveColor,
+              height: thumSize,
+              width: thumSize,
+              borderRadius: "5px",
+              transition: "all 0.3s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_lucide_react.LockKeyholeOpen,
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              right: isON ? "-100px" : "2px",
+              transform: "translateY(-50%)",
+              height: thumSize - 3,
+              width: thumSize - 3,
+              color: inActiveColor,
+              transition: "right 0.5s ease"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Switch
+  Switch,
+  SwitchLock
 });

package/dist/index.d.cts

@@ -10,6 +10,7 @@ type SwitchProms = {
     inActiveColor?: string;
     thumbColor?: string;
 };
-declare const Switch: ({ checked, onChange, disabled, width, height, bgColor, inActiveColor, thumbColor, }: SwitchProms) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ checked, disabled, width, height, bgColor, inActiveColor, thumbColor, onChange, }: SwitchProms) => react_jsx_runtime.JSX.Element;
+declare const SwitchLock: ({ checked, disabled, width, height, bgColor, inActiveColor, thumbColor, onChange, }: SwitchProms) => react_jsx_runtime.JSX.Element;
 
-export { Switch };
+export { Switch, SwitchLock };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ type SwitchProms = {
     inActiveColor?: string;
     thumbColor?: string;
 };
-declare const Switch: ({ checked, onChange, disabled, width, height, bgColor, inActiveColor, thumbColor, }: SwitchProms) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ checked, disabled, width, height, bgColor, inActiveColor, thumbColor, onChange, }: SwitchProms) => react_jsx_runtime.JSX.Element;
+declare const SwitchLock: ({ checked, disabled, width, height, bgColor, inActiveColor, thumbColor, onChange, }: SwitchProms) => react_jsx_runtime.JSX.Element;
 
-export { Switch };
+export { Switch, SwitchLock };

package/dist/index.js

@@ -1,15 +1,16 @@
 // src/components/Switch/Switch.tsx
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Switch = ({
   checked = false,
-  onChange,
   disabled = false,
   width = 50,
   height = 24,
   bgColor = "#9835FF",
   inActiveColor = "#7a7a7ab3",
-  thumbColor = "white"
+  thumbColor = "white",
+  onChange
 }) => {
   const [isOn, setOn] = useState(checked);
   const safeWidth = Math.min(Math.max(width, 50), 100);
@@ -34,7 +35,7 @@ var Switch = ({
         width: safeWidth,
         borderRadius: "15px",
         position: "relative",
-        cursor: disabled ? "no-drop" : "pointer",
+        cursor: window.matchMedia("(hover: hover)").matches ? disabled ? "no-drop" : "pointer" : "default",
         transition: "background 0.3s ease"
       },
       children: /* @__PURE__ */ jsx(
@@ -56,6 +57,97 @@ var Switch = ({
     }
   );
 };
+var SwitchLock = ({
+  checked = false,
+  disabled = false,
+  width = 55,
+  height = 24,
+  bgColor = "#9835FF",
+  inActiveColor = "#7a7a7ab3",
+  thumbColor = "#9835FF",
+  onChange
+}) => {
+  const [isON, setON] = useState(checked);
+  const safeWidth = Math.min(Math.max(width, 55), 100);
+  const safeHeight = Math.min(Math.max(height, 24), 30);
+  const thumSize = safeHeight - 3;
+  const toggle = () => {
+    if (disabled) return;
+    const newStatus = !isON;
+    setON(newStatus);
+    onChange?.(newStatus);
+  };
+  useEffect(() => {
+    setON(checked);
+  }, [checked]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: toggle,
+      style: {
+        position: "relative",
+        height: safeHeight,
+        width: safeWidth,
+        borderRadius: "5px",
+        borderWidth: "2px",
+        borderStyle: "solid",
+        borderColor: isON ? bgColor : inActiveColor,
+        cursor: window.matchMedia("(hover: hover)").matches ? disabled ? "no-drop" : "pointer" : "default",
+        overflow: "hidden",
+        transition: "border 0.3s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          LockKeyhole,
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: isON ? 2 : -100,
+              transform: "translateY(-50%)",
+              height: thumSize - 3,
+              width: thumSize - 3,
+              color: bgColor,
+              transition: "left 0.5s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: isON ? safeWidth - safeHeight : "2px",
+              transform: "translateY(-50%)",
+              background: isON ? thumbColor : inActiveColor,
+              height: thumSize,
+              width: thumSize,
+              borderRadius: "5px",
+              transition: "all 0.3s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LockKeyholeOpen,
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              right: isON ? "-100px" : "2px",
+              transform: "translateY(-50%)",
+              height: thumSize - 3,
+              width: thumSize - 3,
+              color: inActiveColor,
+              transition: "right 0.5s ease"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  Switch
+  Switch,
+  SwitchLock
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-toolkit-ultra",
   "private": false,
-  "version": "1.0.28",
+  "version": "1.0.30",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -39,5 +39,8 @@
     "tsup": "^8.5.1",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0"
   }
 }