dyvix-ui - npm Package Compare versions

Comparing version 0.3.1 to 0.3.3

src/components/input/dependencies/style/themes.css

+.dyvix-input-lens {
+  background: radial-gradient(circle, #000000 0%, #1a1a1a 100%);
+  color: #b903e2;
+  box-shadow: 0 0 30px #b903e2;
+  -webkit-box-shadow: 0 0 30px #b903e2;
+  -moz-box-shadow: 0 0 30px #b903e2;
+  border: #450343 3px double;
+  border-radius: 10rem;
+  transition: all 0.3s ease-in-out;
+}
+.dyvix-input-lens:hover {
+  border-color: #6a0368;
+  box-shadow: 0 0 50px #b903e2;
+  transform: scale(1.02);
+}
+.dyvix-input-lens::placeholder {
+  color: whitesmoke;
+}
+.dyvix-input-lens:focus {
+  border-color: #b903e2;
+  box-shadow:
+    0 0 50px #b903e2,
+    0 0 0 2px rgba(185, 3, 226, 0.3);
+}
+.dyvix-input-industrial {
+  font-family: 'Geist';
+  border: 4px solid #374151;
+  border-radius: 10px;
+  background-color: #0a1429;
+  padding: 0.6rem;
+  transition:
+    box-shadow ease-in-out 0.6s,
+    border-color ease-in-out 0.3s,
+    background-color ease-in-out 0.2s,
+    transform ease-in-out 0.1s,
+    border-radius ease-in-out 0.4s;
+}
+.dyvix-input-industrial:hover {
+  border-color: #6a6a6a;
+  box-shadow:
+    inset 0 0 30px rgba(106, 106, 106, 0.1),
+    0 0 20px rgba(106, 106, 106, 0.15);
+  background-color: #101f39;
+  transform: scale(1.01);
+  border-radius: 13px;
+}
+.dyvix-input-industrial:focus {
+  border-color: #9ca3af;
+  color: ghostwhite;
+  outline: none;
+  background-color: #101f39;
+  box-shadow:
+    inset 0 0 30px rgba(156, 163, 175, 0.15),
+    0 0 25px rgba(156, 163, 175, 0.25);
+}
+.dyvix-input-industrial:disabled {
+  border-color: #1f2937;
+  background-color: #050b14;
+  color: #4b5563;
+  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.5);
+}
+.dyvix-input-industrial:disabled::placeholder {
+  color: #374151;
+}
+.dyvix-input-ember {
+  border-radius: 10px;
+  background-color: #0f0a08;
+  border: none;
+  border-bottom: #ff4500 3px solid;
+  box-shadow:
+    0px 17px 12px -12px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  -webkit-box-shadow:
+    0px 17px 12px -12px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  -moz-box-shadow:
+    0px 17px 12px -12px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  transition:
+    transform 0.5s ease-in-out,
+    background-color 0.45 ease-in-out,
+    border-color 0.4s ease-in-out,
+    box-shadow 0.3s ease-in-out,
+    -webkit-box-shadow 0.3s ease-in-out,
+    -moz-box-shadow 0.3s ease-in-out;
+}
+.dyvix-input-ember:hover {
+  border: none;
+  border-bottom: #ff6b00 3.1px solid;
+  transform: scale(1.009);
+  box-shadow:
+    0px 17px 20px -12px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+  -webkit-box-shadow:
+    0px 17px 20px -12px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+  -moz-box-shadow:
+    0px 17px 20px -12px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+}
+.dyvix-input-ember:focus {
+  border: none;
+  border-bottom-color: #ff8c00;
+  box-shadow:
+    0px 17px 25px -10px rgba(255, 140, 0, 0.95),
+    0px 0px 45px -2px rgba(255, 69, 0, 0.6);
+}
+.dyvix-input-frost {
+  background-color: #ffffff1a;
+  border: 5px groove #ffffff40;
+  border-radius: 20px;
+  backdrop-filter: blur(50px);
+  box-shadow: -6px 2px 51px -7px rgba(213, 255, 248, 1) inset;
+  -webkit-box-shadow: -6px 2px 51px -7px rgba(213, 255, 248, 1) inset;
+  -moz-box-shadow: -6px 2px 51px -7px rgba(213, 255, 248, 1) inset;
+  transition:
+    transform 0.5s ease-in-out,
+    box-shadow 0.3s ease-in-out,
+    -webkit-box-shadow 0.3s ease-in-out,
+    -moz-box-shadow 0.3s ease-in-out,
+    border 0.2s ease-in-out;
+}
+.dyvix-input-frost:hover {
+  border: 6px groove #f8f8f840;
+  transform: scale(1.02);
+  box-shadow: -6px 2px 51px -23px rgba(213, 255, 248, 1) inset;
+  -webkit-box-shadow: -6px 2px 51px -23px rgba(213, 255, 248, 1) inset;
+  -moz-box-shadow: -6px 2px 51px -23px rgba(213, 255, 248, 1) inset;
+}
+.dyvix-input-blade {
+  font-family: 'Geist';
+  background-color: #0a0a0a;
+  border-radius: 0px;
+  color: #ffffff;
+  border-left: 3px solid #e2e8f0;
+  border-top: 3px solid #e2e8f0;
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.05);
+  -webkit-box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.05);
+  -moz-box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.05);
+  transition:
+    border-left 0.15s ease-in-out,
+    border-top 0.15s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    -webkit-box-shadow 0.2s ease-in-out,
+    -moz-box-shadow 0.2s ease-in-out;
+}
+.dyvix-input-blade:hover {
+  border: none;
+  border-left: 4px solid #ffffff;
+  border-top: 4px solid #ffffff;
+  box-shadow: -6px -6px 30px rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: -6px -6px 30px rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: -6px -6px 30px rgba(255, 255, 255, 0.1);
+}
+.dyvix-input-blade:focus {
+  border: none;
+  border-left: 2px solid #ffffff;
+  border-top: 2px solid #ffffff;
+  box-shadow: -3px -3px 15px rgba(255, 255, 255, 0.15);
+}
+.dyvix-input-blade::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+.dyvix-input-neon {
+  background: #4deeea;
+  background: radial-gradient(
+    circle,
+    rgba(77, 238, 234, 1) 0%,
+    rgba(112, 186, 239, 1) 43%,
+    rgba(240, 0, 255, 1) 100%
+  );
+
+  box-shadow: 0px 0px 20px 2px rgba(252, 46, 255, 0.4);
+  border: 0 solid transparent;
+  color: white;
+  font-weight: bold;
+  border-radius: 4rem;
+  transition:
+    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    border-radius 0.2s ease,
+    box-shadow 0.3s ease,
+    background-position 0.4s ease,
+    color 0.2s ease;
+}
+.dyvix-input-neon:hover {
+  border: none;
+  border-radius: 2rem;
+  transform: scale(1.01);
+  background: #1c4241;
+  background: radial-gradient(
+    circle,
+    rgba(112, 186, 239, 1) 0%,
+    rgba(77, 238, 234, 1) 43%,
+    rgba(240, 0, 255, 1) 90%
+  );
+  box-shadow: 0px 0px 56px 4px rgba(252, 61, 255, 1);
+}
+.dyvix-input-neon::placeholder {
+  color: whitesmoke;
+}
+.dyvix-input-neon:focus {
+  border: none;
+  transform: scale(1.015);
+  border-radius: 2rem;
+  color: #050e14;
+  box-shadow:
+    0px 0px 50px 6px rgba(252, 61, 255, 1),
+    inset 0px 0px 10px rgba(255, 255, 255, 0.8);
+}
+.dyvix-input-aurora {
+  background: #14e81e;
+  background: linear-gradient(
+    99deg,
+    rgba(20, 232, 30, 1) 0%,
+    rgba(0, 234, 141, 1) 21%,
+    rgba(1, 177, 179, 1) 46%,
+    rgba(1, 126, 213, 1) 67%,
+    rgba(181, 61, 255, 1) 100%
+  );
+  border-radius: 3rem;
+  border: 1px solid rgba(165, 164, 164, 0.1);
+  box-shadow: 0px 0px 75px 0px rgba(1, 176, 179, 0.9);
+  transition:
+    box-shadow 0.3s ease-in-out,
+    transform 0.3s ease-in-out,
+    border-radius 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    background 0.3s ease-in-out;
+}
+.dyvix-input-aurora:hover {
+  border: 1px solid transparent;
+  border-radius: 5rem;
+  background: #14e81e;
+  background: linear-gradient(
+    99deg,
+    rgb(93, 189, 98) 0%,
+    rgba(0, 234, 141, 1) 21%,
+    rgba(1, 177, 179, 1) 46%,
+    rgb(100, 187, 250) 67%,
+    rgba(181, 61, 255, 1) 100%
+  );
+  transform: scale(1.01);
+  box-shadow: 0px 0px 50px 10px rgba(1, 176, 179, 0.8);
+}
+.dyvix-input-aurora::placeholder {
+  color: white;
+}
+.dyvix-input-aurora:focus {
+  transform: scale(1.015);
+  border-radius: 5rem;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0px 0px 60px 12px rgba(1, 176, 179, 0.95);
+}
+.dyvix-input-sunset {
+  background: #1a0a00;
+  background: linear-gradient(
+    140deg,
+    #1a0a00 0%,
+    #3d1a00 40%,
+    #6b2d00 70%,
+    #8b3a00 100%
+  );
+  border-bottom: 5px solid #a84600;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 198, 15, 0.1);
+  box-shadow: 0px 15px 38px -10px rgba(255, 198, 15, 0.88);
+  -webkit-box-shadow: 0px 15px 38px -10px rgba(255, 198, 15, 0.88);
+  -moz-box-shadow: 0px 15px 38px -10px rgba(255, 198, 15, 0.88);
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.3s ease-in-out,
+    -webkit-box-shadow 0.3s ease-in-out,
+    -moz-box-shadow 0.3s ease-in-out,
+    border-radius 0.2s ease-in-out;
+}
+.dyvix-input-sunset:hover {
+  border: none;
+  background: #1a0a00;
+  background: linear-gradient(
+    140deg,
+    #1a0a00 0%,
+    #3d1a00 40%,
+    #6b2d00 70%,
+    #af4901 100%
+  );
+  transform: translateY(1.5px);
+  box-shadow: 0 20px 50px -10px rgba(255, 198, 15, 0.6);
+  -webkit-box-shadow: 0 20px 50px -10px rgba(255, 198, 15, 0.6);
+  -moz-box-shadow: 0 20px 50px -10px rgba(255, 198, 15, 0.6);
+  border-radius: 20px;
+}
+.dyvix-input-sunset:focus {
+  transform: translateY(1px);
+  border-left: 1px solid rgba(255, 198, 15, 0.4);
+  border-top: 1px solid rgba(255, 198, 15, 0.4);
+  border-right: 1px solid rgba(255, 198, 15, 0.4);
+  border-bottom: 2px solid #ffbc0f;
+  box-shadow:
+    0px 8px 30px -5px rgba(255, 198, 15, 0.7),
+    inset 0px 0px 12px rgba(255, 115, 0, 0.3);
+  -webkit-box-shadow:
+    0px 8px 30px -5px rgba(255, 198, 15, 0.7),
+    inset 0px 0px 12px rgba(255, 115, 0, 0.3);
+  -moz-box-shadow:
+    0px 8px 30px -5px rgba(255, 198, 15, 0.7),
+    inset 0px 0px 12px rgba(255, 115, 0, 0.3);
+}
+.dyvix-input-sunset::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}

src/components/input/dependencies/themes.json

+[
+  {
+    "theme": "Singularity",
+    "class": "dyvix-input-lens",
+    "default-animation": "bubble"
+  },
+  {
+    "theme": "Industrial",
+    "class": "dyvix-input-industrial",
+    "default-animation": "fade"
+  },
+  {
+    "theme": "Ember",
+    "class": "dyvix-input-ember",
+    "default-animation": "glitch"
+  },
+  {
+    "theme": "Frost",
+    "class": "dyvix-input-frost",
+    "default-animation": "unfold"
+  },
+  {
+    "theme": "Blade",
+    "class": "dyvix-input-blade",
+    "default-animation": "zoom"
+  },
+  {
+    "theme": "Neon",
+    "class": "dyvix-input-neon",
+    "default-animation": "pulse"
+  },
+  {
+    "theme": "Aurora",
+    "class": "dyvix-input-aurora",
+    "default-animation": "aurora"
+  },
+  {
+    "theme": "Sunset",
+    "class": "dyvix-input-sunset",
+    "default-animation": "drop"
+  }
+]

contributors.md

@@ -18,1 +18,4 @@ # Contributors
 - [@SlncTrZ](https://github.com/SlncTrZ)
+- [@MFA-G](https://github.com/MFA-G)
+- [@JoshuaLutgendorff](https://github.com/JoshuaLutgendorff)
+- [@Anuragp22](https://github.com/Anuragp22)

package.json

 {
   "name": "dyvix-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.",
@@ -5,0 +5,0 @@ "main": "src/index.jsx",

src/components/file/dependencies/style/style.css

 .dyvix-file-wrapper {
   position: relative;
-  width: 100%;
-  max-width: 200px;
+  width: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  box-sizing: border-box;
 }
@@ -34,2 +34,3 @@ .dyvix-file {
 .dyvix-file-hidden {
+  display: none !important;
   position: absolute;
@@ -42,2 +43,5 @@ width: 1px;
   background-color: transparent;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+  white-space: nowrap;
   color: transparent;
@@ -44,0 +48,0 @@ border: none;

src/components/file/file.jsx

@@ -24,2 +24,3 @@ import React from 'react';
   const fileRef = React.useRef(null);
+  const fileInputRef = React.useRef(null);
   const [configs, SetConfig] = React.useState({});
@@ -55,2 +56,9 @@ const instanceId = React.useId();
 
+  function handleUiClick(e) {
+    e.stopPropagation();
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }
+
   const currentTheme = configs['theme'];
@@ -100,3 +108,3 @@ const currentAnimation = animation ? configs['animation'] : null;
       <label {...props} htmlFor="file-upload">
-        <div className="dyvix-file-ui">
+        <div className="dyvix-file-ui" onClick={handleUiClick}>
           <span className="dyvix-file-icon">📁</span>
@@ -106,5 +114,6 @@ <p style={{ color: color }}>{file !== null ? file : label}</p>
         <input
+          ref={fileInputRef}
           type="file"
           className="dyvix-file-hidden"
-          id="file-upload"
+          id={`file-upload-${instanceId}`}
           accept={accept}
@@ -111,0 +120,0 @@ onChange={(e) => handleFileChange(e)}

src/components/input/dependencies/style/style.css

@@ -29,2 +29,3 @@ .dyvix-input-wrapper {
     0 0 10px rgba(185, 247, 255, 0.15);
+  cursor: text;
 }
@@ -44,1 +45,12 @@ .dyvix-input:focus {
 }
+.dyvix-input:disabled {
+  background-color: rgba(255, 255, 255, 0.01);
+  border-color: rgb(40, 42, 43);
+  color: rgba(255, 255, 255, 0.25);
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+.dyvix-input:disabled::placeholder {
+  color: rgba(255, 255, 255, 0.1);
+}

src/components/input/input.jsx

@@ -6,2 +6,3 @@ import gsap from 'gsap';
 import { Validateinput } from './validation';
+import Version from '../../../package.json';
 
@@ -24,2 +25,4 @@ /**
  * @param {Function} [props.onChange] - Change event callback, receives the event object
+ * @param {Function} [props.onKeyDown] - KeyDown event callback, receives the event object
+ * @param {Function} [props.onKeyUp] - KeyUp event callback, receives the event object
  * @param {Object} [props.style] - Inline style overrides
@@ -34,2 +37,3 @@ */
   animation = 'fade',
+  theme = '!/',
   className = '',
@@ -43,2 +47,4 @@ name,
   onChange,
+  onKeyDown,
+  onKeyUp,
   style,
@@ -55,3 +61,3 @@ ...rest
         animation,
-        '',
+        theme,
         type,
@@ -64,8 +70,15 @@ SetConfig,
     GetFields();
-  }, [type, animation]);
+    return () => {
+      const key = `DYVIX_${Version['version']}_Input_theme_${instanceId}`;
+      const ele = document.getElementById(key);
+      if (ele) ele.remove();
+    };
+  }, [type, animation, theme]);
 
   const currentAnimation = animation ? configs['animation'] : null;
   const currentType = type ? configs['type'] : null;
+  const currentTheme = theme !== '!/' ? configs['theme'] : null;
+
   const inputClasses =
-    `dyvix-input ${currentType?.class ?? ''} ${className}`.trim();
+    `dyvix-input ${currentType?.class ?? ''} ${currentTheme?.class ?? ''} ${className}`.trim();
   const props = {
@@ -102,2 +115,12 @@ className: inputClasses,
   }
+  function handleKeyDown(e) {
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(e);
+    }
+  }
+  function handleKeyUp(e) {
+    if (typeof onKeyUp === 'function') {
+      onKeyUp(e);
+    }
+  }
 
@@ -121,2 +144,4 @@ useGSAP(() => {
         onChange={(e) => handleChange(e)}
+        onKeyDown={(e) => handleKeyDown(e)}
+        onKeyUp={(e) => handleKeyUp(e)}
       ></input>
@@ -123,0 +148,0 @@ </div>

src/components/input/validation.jsx

@@ -33,3 +33,17 @@ import {
   let normalizedType = type?.trim().toLowerCase();
+  const normalizedTheme =
+    theme?.trim().charAt(0).toUpperCase() + theme.trim().slice(1);
 
+  const isTheme = await ValidatAndLoadJSON(
+    CacheMapping,
+    normalizedTheme,
+    callback,
+    'theme',
+    component,
+    instance
+  );
+
+  if (normalizedAnimation === '!/' && isTheme?.config?.theme) {
+    normalizedAnimation = isTheme?.config?.theme['default-animation'];
+  }
   const [isAnimation, isType] = await Promise.all([
@@ -64,4 +78,10 @@ ValidatAndLoadJSON(
   }
+  if (normalizedTheme !== '!/' && !isTheme.status) {
+    return {
+      status: GaurdStatus.Error,
+      error: 'Please provide a valid theme.'
+    };
+  }
 
   return { status: GaurdStatus.Success };
 }

src/components/modal/dependencies/elements.json

@@ -88,3 +88,19 @@ [
     "r-variant": true
+  },
+  {
+    "element": "file",
+    "tag": "DyvixFile",
+    "default-class": "modal-file",
+    "aria": {
+      "role": "button",
+      "aria-label": "File upload"
+    },
+    "supports-placeholder": false,
+    "supports-label": true,
+    "supports_type": false,
+    "supports_autocomplete": false,
+    "is_custom": true,
+    "requires-options": false,
+    "r-variant": true
   }
 ]

src/components/modal/dependencies/style/elements.css

@@ -189,1 +189,26 @@ .dyvix-modal-wrapper {
 }
+.modal-file {
+  width: 100%;
+  flex: 1;
+  max-width: 15rem;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.grouped-elements:has(.dyvix-file-wrapper) {
+  flex-direction: row;
+  align-items: stretch;
+  width: 80%;
+  max-width: 100%;
+  min-height: 42px;
+  height: auto;
+}
+.grouped-elements .dyvix-file-wrapper {
+  flex: 1;
+  max-width: 15rem;
+  min-width: 0;
+  width: 100%;
+}
+.modal-file .dyvix-file-ui p {
+  font-size: 0.5rem;
+}

src/components/modal/InputValidation.jsx

@@ -40,3 +40,2 @@ import { validType, eleData, validRules } from './modal';
 
-
 let supportedTypes = null;
@@ -47,3 +46,3 @@ let config = null;
   const { DYVIX_MODAL_ELEMENT } = await import('../../constants.js');
-  return Object.values(DYVIX_MODAL_ELEMENT)
+  return Object.values(DYVIX_MODAL_ELEMENT);
 }
@@ -76,3 +75,3 @@ export async function SerializeData(
   );
-  supportedTypes= await getSupportedElements();
+  supportedTypes = await getSupportedElements();
 
@@ -79,0 +78,0 @@ if (validator.status === GaurdStatus.Error) {

src/components/modal/modal.jsx

@@ -26,2 +26,4 @@ import elementsData from './dependencies/elements.json';
 import DyvixButton from '../button/button';
+import DyvixFile from '../file/file';
+import { values } from 'idb-keyval';
 
@@ -32,3 +34,3 @@ export const validType = typesData.map((e) => e.type);
 export const eleData = elementsData;
-const componentsMap = { DynamicSelect: DynamicSelect };
+const componentsMap = { DynamicSelect: DynamicSelect, DyvixFile: DyvixFile };
 
@@ -167,11 +169,11 @@ /**
   const heightMap = {
-    1: '23rem',
-    2: '25rem',
+    1: '19rem',
+    2: '24rem',
     3: '26rem',
-    4: '30rem',
-    5: '34rem',
-    6: '40rem',
-    7: '43rem',
-    8: '48rem',
-    9: '53rem'
+    4: '31rem',
+    5: '36rem',
+    6: '41rem',
+    7: '46rem',
+    8: '51rem',
+    9: '56rem'
   };
@@ -372,2 +374,5 @@ let idealSize = heightMap[fields?.length] || '26rem';
                       }),
+                      ...(elementDef['supports-label'] && {
+                        label: field.placeholder[j]
+                      }),
                       ...(elementDef['supports_type'] && { type: field.type }),
@@ -385,2 +390,18 @@ ...(elementDef['supports_autocomplete'] && {
                         'aria-describedby': ErrorId
+                      }),
+                      ...(elementDef.tag !== 'DyvixFile' && {
+                        onChange: (e) => {
+                          console.log(Tag)
+                          const value = elementDef['is_custom']
+                            ? e
+                            : field.type === 'checkbox'
+                              ? e.target.checked
+                              : e.target.value;
+                          handleInputChange(name, value);
+                        }
+                      }),
+                      ...(elementDef.tag === 'DyvixFile' && {
+                        onUpload: (e) => {
+                          handleInputChange(name, e);
+                        }
                       })
@@ -392,10 +413,3 @@ };
                         {elementDef['requires-options'] && Tag === 'select' ? (
-                          <Tag
-                            defaultValue=""
-                            key={j}
-                            {...Tagprobs}
-                            onChange={(e) =>
-                              handleInputChange(name, e.target.value)
-                            }
-                          >
+                          <Tag defaultValue="" key={j} {...Tagprobs}>
                             <option disabled value="">
@@ -417,24 +431,7 @@ {field.placeholder[j]}
                           <label key={j} className="modal-checkbox-label">
-                            <Tag
-                              {...Tagprobs}
-                              onChange={(e) =>
-                                handleInputChange(
-                                  name,
-                                  elementDef['is_custom'] ? e : e.target.checked
-                                )
-                              }
-                            />
+                            <Tag {...Tagprobs} />
                             {field.placeholder?.[j]}
                           </label>
                         ) : (
-                          <Tag
-                            key={j}
-                            {...Tagprobs}
-                            onChange={(e) =>
-                              handleInputChange(
-                                name,
-                                elementDef['is_custom'] ? e : e.target.value
-                              )
-                            }
-                          />
+                          <Tag key={j} {...Tagprobs} />
                         )}
@@ -441,0 +438,0 @@ <span className="dyvix-error-text" id={ErrorId}>

src/constants.js

 //AUTO GENERATED BY DYVIX UI ENGINE - DO NOT MANUALLY EDIT.
 
-export const DYVIX_GLOBAL_THEME = 
- {
-  "SINGULARITY": "Singularity",
-  "INDUSTRIAL": "Industrial",
-  "EMBER": "Ember",
-  "FROST": "Frost",
-  "BLADE": "Blade",
-  "NEON": "Neon",
-  "AURORA": "Aurora",
-  "SUNSET": "Sunset",
-  "OCEAN": "Ocean",
-  "FOREST": "Forest",
-  "MIDNIGHT": "Midnight"
-}
-export const DYVIX_MODAL_TYPE = 
- {
-  "AUTH": "auth",
-  "FORM": "form"
-}
-export const DYVIX_GLOBAL_ANIMATION = 
- {
-  "FADE": "fade",
-  "BUBBLE": "bubble",
-  "ZOOM": "zoom",
-  "UNFOLD": "unfold",
-  "GLITCH": "glitch",
-  "PULSE": "pulse",
-  "AURORA": "aurora",
-  "DROP": "drop",
-  "FLIP": "flip",
-  "GLIDE": "glide",
-  "DRIFT": "drift"
-}
-export const DYVIX_MODAL_VALIDATION_PRESET = 
- {
-  "EMAIL": "email",
-  "PASSWORD": "password",
-  "NUMBER": "number",
-  "URL": "url",
-  "MANDATORY": "mandatory",
-  "DATE": "date"
-}
-export const DYVIX_MODAL_ELEMENT = 
- {
-  "TEXT": "text",
-  "EMAIL": "email",
-  "PASSWORD": "password",
-  "SEARCH": "search",
-  "URL": "url",
-  "TEL": "tel",
-  "TEXTAREA": "textarea",
-  "SELECT": "select",
-  "D_SELECT": "d-select",
-  "AUTOCOMPLETE": "autocomplete",
-  "CHECKBOX": "checkbox"
-}
-export const DYVIX_MODAL_PRESET = 
- {
-  "REGISTER": "Register",
-  "LOGIN": "Login",
-  "FORGOTPASSWORD": "ForgotPassword",
-  "RESETPASSWORD": "ResetPassword",
-  "CHANGEPASSWORD": "ChangePassword"
-}
+export const DYVIX_GLOBAL_THEME = {
+  SINGULARITY: 'Singularity',
+  INDUSTRIAL: 'Industrial',
+  EMBER: 'Ember',
+  FROST: 'Frost',
+  BLADE: 'Blade',
+  NEON: 'Neon',
+  AURORA: 'Aurora',
+  SUNSET: 'Sunset',
+  OCEAN: 'Ocean',
+  FOREST: 'Forest',
+  MIDNIGHT: 'Midnight'
+};
+export const DYVIX_MODAL_TYPE = {
+  AUTH: 'auth',
+  FORM: 'form'
+};
+export const DYVIX_GLOBAL_ANIMATION = {
+  FADE: 'fade',
+  BUBBLE: 'bubble',
+  ZOOM: 'zoom',
+  UNFOLD: 'unfold',
+  GLITCH: 'glitch',
+  PULSE: 'pulse',
+  AURORA: 'aurora',
+  DROP: 'drop',
+  FLIP: 'flip',
+  GLIDE: 'glide',
+  DRIFT: 'drift'
+};
+export const DYVIX_MODAL_VALIDATION_PRESET = {
+  EMAIL: 'email',
+  PASSWORD: 'password',
+  NUMBER: 'number',
+  URL: 'url',
+  MANDATORY: 'mandatory',
+  DATE: 'date'
+};
+export const DYVIX_MODAL_ELEMENT = {
+  TEXT: 'text',
+  EMAIL: 'email',
+  PASSWORD: 'password',
+  SEARCH: 'search',
+  URL: 'url',
+  TEL: 'tel',
+  TEXTAREA: 'textarea',
+  SELECT: 'select',
+  D_SELECT: 'd-select',
+  AUTOCOMPLETE: 'autocomplete',
+  CHECKBOX: 'checkbox',
+  FILE: 'file'
+};
+export const DYVIX_MODAL_PRESET = {
+  REGISTER: 'Register',
+  LOGIN: 'Login',
+  FORGOTPASSWORD: 'ForgotPassword',
+  RESETPASSWORD: 'ResetPassword',
+  CHANGEPASSWORD: 'ChangePassword'
+};

src/utils/Smart Json Caching/SJCRegistry.js

@@ -10,2 +10,4 @@ import buttonThemesJSON from '../../components/button/dependencies/themes.json?raw';
 import inputTypesJSON from '../../components/input/dependencies/types.json?raw';
+import inputThemesJSON from '../../components/input/dependencies/themes.json?raw';
+import inputThemesCSS from '../../components/input/dependencies/style/themes.css?raw';
 
@@ -18,3 +20,4 @@ export const JSON_LIBRARY = {
   '../../components/file/dependencies/themes.json': fileThemesJSON,
-  '../../components/input/dependencies/types.json': inputTypesJSON
+  '../../components/input/dependencies/types.json': inputTypesJSON,
+  '../../components/input/dependencies/themes.json': inputThemesJSON
 };
@@ -25,3 +28,4 @@
   '../../components/modal/dependencies/style/themes.css': modalThemesCSS,
-  '../../components/file/dependencies/style/themes.css': fileThemesCSS
+  '../../components/file/dependencies/style/themes.css': fileThemesCSS,
+  '../../components/input/dependencies/style/themes.css': inputThemesCSS
 };

No alert changes

Improved metrics

Total package byte prevSize

143113

9.63%

Number of package files

49

4.26%

Lines of code

4762

10.64%

No dependency changes