dyvix-ui - npm Package Compare versions

Comparing version 0.2.4 to 0.2.9

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

+.dyvix-file-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dyvix-file {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  padding: 1rem 0;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  border: 3px dashed rgba(0, 0, 0, 0.3);
+  border-radius: 2rem;
+  background-color: rgb(73, 220, 237);
+  transition:
+    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+.dyvix-file:hover {
+  transform: scale(1.03);
+  background-color: rgb(63, 210, 227);
+  border-color: rgba(0, 0, 0, 0.6);
+}
+.dyvix-file:active {
+  transform: scale(0.98);
+}
+.dyvix-file-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+  opacity: 0;
+}
+.dyvix-file-ui {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+.dyvix-file-ui p {
+  font-size: 1rem;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.8);
+}
+.dyvix-file-icon {
+  font-size: 2rem;
+  line-height: 1;
+}

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

+.dyvix-file-lens {
+  border: 4px dashed #3c0349;
+  background-color: #1f2937;
+  background: radial-gradient(circle, #000000 0%, #1a1a1a 100%);
+  box-shadow: 0 0 30px #b903e2;
+  -webkit-box-shadow: 0 0 30px #b903e2;
+  -moz-box-shadow: 0 0 30px #b903e2;
+  transition: border-color 0.2s ease-in-out,
+              background 0.3s ease-in-out,
+              transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.dyvix-file-lens p {
+  color: whitesmoke;
+  transition: color 0.2s ease;
+}
+.dyvix-file-lens:hover {
+  border-color: #6a2a7a; 
+  background: rgb(47, 4, 47);
+  transform: scale(1.02);
+}
+.dyvix-file-lens:hover p {
+  color: grey;
+}
+.dyvix-file-industrial {
+  border: 2px dashed #374151;
+  border-radius: 5px;
+  background-color: #0a1429;
+  transition: border-radius 0.2s ease,
+              background-color 0.3s ease,
+              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dyvix-file-industrial p {
+  font-family: 'Geist';
+  color: #9ca3af;
+  transition: color 0.2s ease;
+}
+.dyvix-file-industrial:hover {
+  border-radius: 10px;
+  background-color: #6b7280;  
+  transform: scale(1.03);
+}
+.dyvix-file-industrial:hover p {
+  color: #ffffff;
+}
+.dyvix-file-ember {
+  border-radius: 10px;
+  background-color: #0f0a08;
+  border-bottom: #ff4500 3px dashed;
+  box-shadow:
+    0px 17px 12px -9px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  -webkit-box-shadow:
+    0px 17px 12px -9px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  -moz-box-shadow:
+    0px 17px 12px -9px rgba(255, 69, 0, 0.73),
+    0px 0px 30px -10px rgba(255, 69, 0, 0.3);
+  transition:
+    transform 0.5s ease-in-out,
+    border-bottom 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-file-ember p {
+  color: rgba(255, 69, 0, 0.9);
+  transition: color 0.2s ease-in-out, transform 0.22s ease-in-out;
+}
+.dyvix-file-ember:hover {
+  background-color: #0f0a08;
+  border-bottom-color: #ff6b00;
+  transform: translateY(-2px) scale(1.002);
+  box-shadow:
+    0px 17px 20px -9px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+  -webkit-box-shadow:
+    0px 17px 20px -9px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+  -moz-box-shadow:
+    0px 17px 20px -9px rgba(255, 69, 0, 0.9),
+    0px 0px 40px -5px rgba(255, 69, 0, 0.5);
+}
+.dyvix-file-ember:hover p {
+  color: #ff6b00;
+  transform: scale(1.002);
+}
+.dyvix-file-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.4s cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 0.3s ease,
+              border-width 0.2s ease;
+}
+.dyvix-file-frost p {
+  color: rgba(213, 255, 248, 1);
+  transform: scale(1.01);
+  transition:
+  text-shadow 0.3s ease-in-out,
+  color 0.2s ease-in-out;
+}
+.dyvix-file-frost:hover {
+  background-color: #ffffff1a;
+  border: 8px groove #f8f8f840;
+  transform: scale(1.01);
+  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-file-frost:hover p {
+  color: #f8f8f840;
+  text-shadow: 0 0 8px rgba(213, 255, 248, 0.6);
+}
+.dyvix-file-blade {
+  background-color: #0a0a0a;
+  border-radius: 0px;
+  border-left: 3px solid #e2e8f0;
+  border-top: 3px solid #e2e8f0;
+  border-right: 1px solid #ffffff20;
+  border-bottom: 1px solid #ffffff20;
+  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.1s ease-in-out,
+    border-top 0.1s 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-file-blade p {
+  color: #e2e8f0;
+  transition: color 0.1s ease-in-out;
+}
+.dyvix-file-blade:hover {
+  background-color: #0a0a0a;
+  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-file-blade:hover p {
+  color: #ffffff;
+}
+.dyvix-file-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%
+  );
+  -webkit-box-shadow: 0px 0px 64px 0px rgba(252, 46, 255, 0.6);
+  -moz-box-shadow: 0px 0px 64px 0px rgba(252, 46, 255, 0.6);
+  box-shadow: 0px 0px 64px 0px rgba(252, 46, 255, 0.6);
+  border-radius: 4rem;
+  transition: border-radius 0.2s ease-in-out,
+              transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+              box-shadow 0.3s ease;
+}
+.dyvix-file-neon p {
+  color: #1b1d1d;
+  font-weight: 700;
+  transition: color 0.1s ease-in-out;
+}
+.dyvix-file-neon:hover {
+  transform: scale(1.05);
+  box-shadow: 0px 0px 80px 0px rgba(252, 46, 255, 0.8);
+}
+.dyvix-file-neon:hover p {
+  color: #ffffff;
+  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+}
+.dyvix-file-aurora {
+  background: #14e81e;
+  background: linear-gradient(
+    90deg,
+    rgba(20, 232, 30, 1) 0%,
+    rgba(0, 234, 141, 1) 21%,
+    rgba(1, 177, 179, 1) 46%,
+    rgba(1, 126, 213, 1) 76%,
+    rgba(181, 61, 255, 1) 100%
+  );
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: 0px 0px 15px 0px rgba(1, 176, 179, 0.9);
+  -moz-box-shadow: 0px 0px 15px 0px rgba(1, 176, 179, 0.9);
+  box-shadow: 0px 0px 15px 0px rgba(1, 176, 179, 0.9);
+  transition:
+    box-shadow 0.4s ease-in-out,
+    -webkit-box-shadow 0.4s ease-in-out,
+    -moz-box-shadow 0.4s ease-in-out,
+    transform 0.3s ease-in-out,
+    border-radius 0.2s ease-in-out;
+}
+.dyvix-file-aurora:hover {
+  border-radius: 3rem;
+  transform: scale(1.01);
+  background-size: 110% 110%;
+  -webkit-box-shadow: 0px 0px 15px 8px rgba(1, 176, 179, 1);
+  -moz-box-shadow: 0px 0px 15px 8px rgba(1, 176, 179, 1);
+  box-shadow: 0px 0px 15px 8px rgba(1, 176, 179, 1);
+}
+.dyvix-file-sunset {
+  background: #1a0a00;
+  background: linear-gradient(
+    135deg,
+    #1a0a00 0%,
+    #3d1a00 40%,
+    #6b2d00 70%,
+    #8b3a00 100%
+  );
+  border-radius: 20px;
+  border: 1px solid rgba(255, 198, 15, 0.1);
+  border-bottom: 5px solid #a84600;
+  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-file-sunset p {
+  color: #fad2b5;
+  font-weight: 200;
+  transition: color 0.1s ease-in-out;
+}
+.dyvix-file-sunset:hover {
+  transform: translateY(3px);
+  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: 15px;
+}
+.dyvix-file-sunset:hover p {
+  color: #ff6a00;
+}
+.dyvix-file-ocean {
+  background: linear-gradient(200deg, #001220, #023862);
+  border: 2px solid rgba(0, 150, 255, 0.3);
+  border-radius: 2rem;
+  box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  -webkit-box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  -moz-box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  transition:
+    box-shadow 0.3s ease-in-out,
+    border 0.2s ease-in-out,
+    transform 0.4s;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+.dyvix-file-ocean p {
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+  transition: color 0.1s ease-in-out;
+}
+.dyvix-file-ocean:hover {
+  border: 3px solid rgba(0, 150, 255, 0.6);
+  transform: perspective(1000px) rotateX(2deg);
+  box-shadow:
+    0 0 70px rgba(0, 100, 255, 0.25),
+    inset 0 0 40px rgba(0, 150, 255, 0.08);
+}
+.dyvix-file-ocean:hover p {
+  color: rgba(0, 150, 255, 0.9);
+}
+.dyvix-file-forest {
+  background: #1f3b2c;
+  background: radial-gradient(
+    circle,
+    rgba(31, 59, 44, 1) 14%,
+    rgba(31, 59, 44, 1) 24%,
+    rgba(75, 58, 42, 1) 71%
+  );
+  border: 3px double #86a86b;
+  border-radius: 5rem;
+  box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  -webkit-box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  -moz-box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  transition:
+    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    box-shadow 0.3s ease;
+}
+.dyvix-file-forest p {
+  color: rgba(163, 236, 101, 0.8);
+  transition: color 0.3s ease-in-out;
+}
+.dyvix-file-forest:hover {
+  transform: skewX(-5deg) scale(1.05);
+  box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+  -webkit-box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+  -moz-box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+}
+.dyvix-file-forest:hover p {
+  color: rgba(168, 238, 107, 0.5);
+}
+.dyvix-file-midnight {
+  background: radial-gradient(circle at center, #00024d 0%, #000000 100%);
+  border: 1px solid rgba(112, 168, 247, 0.3);
+  border-radius: 2.67rem;
+  box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  -webkit-box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  -moz-box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  transition: all 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.67);
+  backdrop-filter: blur(10px);
+}
+.dyvix-file-midnight p {
+  color: rgba(112, 168, 247, 0.7);
+  transition: color 0.3s ease-in-out;
+}
+.dyvix-file-midnight:hover {
+  background: radial-gradient(circle at 40% 40%, #000375 0%, #000000 100%);
+  border-color: rgba(112, 168, 247, 0.6);
+  box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -webkit-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -moz-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  transform: translateY(-3px) scale(1.04);
+}
+.dyvix-file-midnight:hover p {
+  color: rgba(137, 182, 246, 0.9);
+  transition: color 0.3s ease-in-out;
+}

src/components/file/dependencies/themes.json

+[
+  {
+    "theme": "Singularity",
+    "class": "dyvix-file-lens",
+    "default-animation": "bubble"
+  },
+  {
+    "theme": "Industrial",
+    "class": "dyvix-file-industrial",
+    "default-animation": "fade"
+  },
+  {
+    "theme": "Ember",
+    "class": "dyvix-file-ember",
+    "default-animation": "glitch"
+  },
+  {
+    "theme": "Frost",
+    "class": "dyvix-file-frost",
+    "default-animation": "unfold"
+  },
+  {
+    "theme": "Blade",
+    "class": "dyvix-file-blade",
+    "default-animation": "zoom"
+  },
+  {
+    "theme": "Neon",
+    "class": "dyvix-file-neon",
+    "default-animation": "pulse"
+  },
+  {
+    "theme": "Aurora",
+    "class": "dyvix-file-aurora",
+    "default-animation": "aurora"
+  },
+  {
+    "theme": "Sunset",
+    "class": "dyvix-file-sunset",
+    "default-animation": "drop"
+  },
+  {
+    "theme": "Ocean",
+    "class": "dyvix-file-ocean",
+    "default-animation": "flip"
+  },
+  {
+    "theme": "Forest",
+    "class": "dyvix-file-forest",
+    "default-animation": "glide"
+  },
+  {
+    "theme": "Midnight",
+    "class": "dyvix-file-midnight",
+    "default-animation": "drift"
+  }
+]

src/components/file/file.jsx

+import React from 'react';
+import './dependencies/style/style.css';
+import { EvaluateFailure, GaurdStatus } from '../../utils/DyvixGuard';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import Version from '../../../package.json';
+import { Validatefile } from './validation';
+
+function DyvixFile({
+  label = 'Upload File',
+  animation = '',
+  className = '',
+  theme = '',
+  background,
+  color,
+  multiple = false,
+  accept = "*/*",
+  onUpload,
+  style,
+  ...rest
+}) {
+  const [file, Setfile] = React.useState(null);
+  const fileRef = React.useRef(null);
+  const [configs, SetConfig] = React.useState({});
+  const instanceId = React.useId();
+
+  function handleFileChange(e) {
+    const files = e.target.files;
+    if (files && files[0]) {
+      let displayName;
+      if (files.length === 1) {
+        const [name, extension] = files[0].name.split('.');
+
+        const maxLength = 16;
+        const wordLimit = maxLength - (extension.length + 1);
+        if (name.length > wordLimit) {
+          displayName =
+            name.substring(0, wordLimit - 3) + '...' + '.' + extension;
+        } else {
+          displayName = name + '.' + extension;
+        }
+      } else {
+        displayName = files.length + ' files selected.';
+      }
+
+      Setfile(displayName);
+
+      if (typeof onUpload === 'function') {
+        onUpload(files.length == 1 ? files[0] : files);
+      }
+    }
+  }
+
+  const currentTheme = configs['theme'];
+  const currentAnimation = animation ? configs['animation'] : null;
+  React.useEffect(() => {
+    async function validate() {
+      const validator = await Validatefile(
+        animation,
+        theme,
+        SetConfig,
+        instanceId
+      );
+
+      if (validator.status === GaurdStatus.Error) {
+        return EvaluateFailure(validator.error, validator.status);
+      }
+    }
+
+    validate();
+    return () => {
+      const key = `DYVIX_${Version['version']}_File_theme_${instanceId}`;
+      const ele = document.getElementById(key);
+      if (ele) ele.remove();
+    };
+  }, [animation, theme]);
+
+  useGSAP(() => {
+    if (!fileRef.current || !currentAnimation) return;
+
+    gsap.fromTo(fileRef.current, currentAnimation.from, {
+      ...currentAnimation.to,
+      duration: currentAnimation['default-duration'],
+      ease: currentAnimation.ease
+    });
+  }, [currentAnimation]);
+  className = `dyvix-file${currentTheme ? ` ${currentTheme.class}` : ''}${className !== '' ? ` ${className}` : ''}`;
+  const props = {
+    className: className,
+    style: {
+      ...(background && { background: background }),
+      ...style
+    }
+  };
+  return (
+    <div className="dyvix-file-wrapper" ref={fileRef} {...rest}>
+      <label {...props} htmlFor="file-upload">
+        <div className="dyvix-file-ui">
+          <span className="dyvix-file-icon">📁</span>
+          <p style={{ color: color }}>{file !== null ? file : label}</p>
+        </div>
+        <input
+          type="file"
+          className="dyvix-file-hidden"
+          id="file-upload"
+          accept={accept}
+          onChange={(e) => handleFileChange(e)}
+          {...(multiple && { multiple })}
+        />
+      </label>
+    </div>
+  );
+}
+
+export default DyvixFile;

src/components/file/validation.jsx

+import {
+  EvaluateFailure,
+  GaurdStatus,
+  allowsNull
+} from '../../utils/DyvixGuard';
+import { ValidatAndLoadJSON } from '../../utils/Smart Json Caching/SJCManager';
+
+const component = 'File';
+const CacheMapping = {
+  theme: {
+    jsonpath: '../../components/file/dependencies/themes.json',
+    csspath: '../../components/file/dependencies/style/themes.css'
+  },
+  animation: {
+    jsonpath: '../../components/animations.json',
+    csspath: null
+  }
+};
+
+export async function Validatefile(animation, theme, callback, instance) {
+  const normalizedAnimation = animation?.trim().toLowerCase();
+  const normalizedTheme =
+    theme?.trim().charAt(0).toUpperCase() + theme.trim().slice(1);
+
+  const [isAnimation, isTheme] = await Promise.all([
+    ValidatAndLoadJSON(
+      CacheMapping,
+      normalizedAnimation,
+      callback,
+      'animation',
+      component
+    ),
+    ValidatAndLoadJSON(
+      CacheMapping,
+      normalizedTheme,
+      callback,
+      'theme',
+      component,
+      instance
+    )
+  ]);
+  if (normalizedAnimation !== '' && !isAnimation.status) {
+    return {
+      status: GaurdStatus.Error,
+      error: 'Please provide a valid animation.'
+    };
+  }
+
+  if (normalizedTheme !== '' && !isTheme.status) {
+    return {
+      status: GaurdStatus.Error,
+      error: 'Please provide a valid theme.'
+    };
+  }
+
+  return { status: GaurdStatus.Success };
+}

package.json

 {
   "name": "dyvix-ui",
-  "version": "0.2.4",
+  "version": "0.2.9",
   "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/button/button.jsx

@@ -9,2 +9,11 @@ import React from 'react';
 
+/**
+ * @param {Object} props
+ * @param {string} [props.animation] - Animation name, defaults to fade
+ * @param {string} [props.className] - Button className
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora')} props.theme - Modal theme
+ * @param {string} [props.background] - Button background color
+ * @param {string} [props.color] - Button color
+ * @param {Function} [props.onClick] - Click callback
+ */
 function DyvixButton({
@@ -26,5 +35,3 @@ children = 'Click Me',
   const currentTheme = configs['theme'];
-  const currentAnimation = animation
-    ? configs['animation']
-    : null;
+  const currentAnimation = animation ? configs['animation'] : null;
 
@@ -39,8 +46,13 @@ function handleClick() {
 
-  React.useEffect(()=>{
+  React.useEffect(() => {
     async function validate() {
-      const validator = await Validatebtn(animation, theme, SetConfig, instanceId);
+      const validator = await Validatebtn(
+        animation,
+        theme,
+        SetConfig,
+        instanceId
+      );
 
       if (validator.status === GaurdStatus.Error) {
-       return EvaluateFailure(validator.error, validator.status);
+        return EvaluateFailure(validator.error, validator.status);
       }
@@ -55,4 +67,3 @@ }
     };
- 
-  },[theme, animation]);
+  }, [theme, animation]);
   useGSAP(() => {
@@ -59,0 +70,0 @@ if (!btnRef.current || !currentAnimation) return;

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

@@ -18,2 +18,139 @@ .dyvix-button-lens {
 }
+.dyvix-button-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-button-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.05);
+  border-radius: 13px;
+}
+.dyvix-button-industrial:active {
+  border-color: #080808;
+  box-shadow:
+    inset 0 0 30px rgba(120, 110, 110, 0.1),
+    0 0 30px rgba(106, 106, 106, 0.15);
+  background-color: #101f39;
+  transform: scale(0.9);
+  border-radius: 5px;
+}
+.dyvix-button-ember {
+  border-radius: 10px;
+  background-color: #0f0a08;
+  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,
+    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-button-ember:hover {
+  border-bottom: #ff6b00 3.1px solid;
+  transform: scale(1.002);
+  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-button-ember:active {
+  border-bottom: #3c200d 2px solid;
+  transform: scale(0.9);
+  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-button-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-button-frost:hover {
+  border: 6px groove #f8f8f840;
+  transform: scale(1.07);
+  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-button-frost:active {
+  border: 2px groove #f8f8f840;
+  transform: scale(0.95);
+  box-shadow: -6px 2px 51px -13px rgb(172, 242, 230) inset;
+  -webkit-box-shadow: -6px 2px 51px -13px rgb(172, 242, 230) inset;
+  -moz-box-shadow: -6px 2px 51px -13px rgb(172, 242, 230) inset;
+}
+.dyvix-button-blade {
+  background-color: #0a0a0a;
+  border-radius: 0px;
+  border-left: 3px solid #e2e8f0;
+  border-top: 3px solid #e2e8f0;
+  border-right: 1px solid #ffffff20;
+  border-bottom: 1px solid #ffffff20;
+  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.1s ease-in-out,
+    border-top 0.1s 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-button-blade:hover {
+  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-button-blade:active {
+  border: none;
+  scale: 0.9;
+  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-button-neon {
@@ -32,5 +169,5 @@ background: #4deeea;
   border-radius: 4rem;
-  
-  transition: 
-    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
+
+  transition:
+    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
     border-radius 0.2s ease,
@@ -50,3 +187,3 @@ box-shadow 0.3s ease,
   );
-  box-shadow: 0px 0px 56px 4px rgba(252,61,255,1);
+  box-shadow: 0px 0px 56px 4px rgba(252, 61, 255, 1);
 }
@@ -92,3 +229,3 @@ .dyvix-button-neon:active {
     rgba(181, 61, 255, 1) 100%
-  ); 
+  );
   transform: scale(1.04);
@@ -110,2 +247,150 @@ box-shadow: 0px 0px 50px 10px rgba(1, 176, 179, 0.8);
   box-shadow: 0px 0px 5px 8px rgba(1, 176, 179, 1);
-}
+}
+.dyvix-button-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-button-sunset:hover {
+  background: #1a0a00;
+  background: linear-gradient(
+    140deg,
+    #1a0a00 0%,
+    #3d1a00 40%,
+    #6b2d00 70%,
+    #af4901 100%
+  );
+  transform: translateY(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-button-sunset:active {
+  background: #1a0a00;
+  transform: translateY(1px);
+  scale: 0.9;
+}
+.dyvix-button-ocean {
+  background: linear-gradient(200deg, #001220, #023862);
+  border: 2px solid rgba(0, 150, 255, 0.3);
+  border-radius: 2rem;
+  box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  -webkit-box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  -moz-box-shadow:
+    0 0 50px rgba(0, 100, 255, 0.15),
+    inset 0 0 30px rgba(0, 150, 255, 0.05);
+  transition:
+    box-shadow 0.3s ease-in-out,
+    border 0.2s ease-in-out,
+    transform 0.4s;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+.dyvix-button-ocean:hover {
+  border: 3px solid rgba(28, 92, 137, 0.6);
+  transform: perspective(5000px) rotateX(2deg);
+  box-shadow:
+    0 0 70px rgba(0, 100, 255, 0.25),
+    inset 0 0 40px rgba(0, 150, 255, 0.08);
+}
+.dyvix-button-ocean:active {
+  border: 3px solid rgba(0, 0, 0, 0.6);
+  transform: scale(0.9);
+  box-shadow:
+    0 0 70px rgba(190, 216, 255, 0.25),
+    inset 0 0 40px rgba(0, 99, 170, 0.08);
+}
+.dyvix-button-forest {
+  background: #1f3b2c;
+  background: radial-gradient(
+    circle,
+    rgba(31, 59, 44, 1) 14%,
+    rgba(31, 59, 44, 1) 24%,
+    rgba(75, 58, 42, 1) 71%
+  );
+  border: 3px double #86a86b;
+  border-radius: 5rem;
+  box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  -webkit-box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  -moz-box-shadow: inset 0px 0px 30px 10px rgba(163, 236, 101, 0.3);
+  transition:
+    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    box-shadow 0.3s ease;
+}
+.dyvix-button-forest:hover {
+  transform: skewX(-5deg) scale(1.05);
+  box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+  -webkit-box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+  -moz-box-shadow: inset 0px 0px 50px 15px rgba(163, 236, 101, 0.5);
+}
+.dyvix-button-forest:active {
+  transform: skewX(5deg) scale(0.9);
+  box-shadow: inset 0px 0px 50px 15px rgba(194, 250, 145, 0.5);
+  -webkit-box-shadow: inset 0px 0px 50px 15px rgba(194, 250, 145, 0.5);
+  -moz-box-shadow: inset 0px 0px 50px 15px rgba(194, 250, 145, 0.5);
+}
+.dyvix-button-midnight {
+  background: radial-gradient(circle at center, #00024d 0%, #000000 100%);
+  border: 1px solid rgba(112, 168, 247, 0.3);
+  border-radius: 3.67rem;
+  box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  -webkit-box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  -moz-box-shadow:
+    0 0 40px 5px rgba(99, 102, 241, 0.2),
+    inset 0 0 15px rgba(112, 168, 247, 0.1);
+  transition: all 0.5s cubic-bezier(0.17, 0.88, 0.3, 1.67);
+  backdrop-filter: blur(10px);
+}
+.dyvix-button-midnight:hover {
+  background: radial-gradient(circle at 40% 40%, #000375 0%, #000000 100%);
+  border-color: rgba(112, 168, 247, 0.6);
+  box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -webkit-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -moz-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  transform: translateY(-3px) scale(1.01);
+}
+.dyvix-button-midnight:active {
+  background: radial-gradient(circle at 40% 40%, #030544 0%, #004766 100%);
+  box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -webkit-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  -moz-box-shadow:
+    0 0 60px 10px rgba(99, 102, 241, 0.4),
+    inset 0 0 20px rgba(112, 168, 247, 0.2);
+  transform: translateY(3px) scale(0.9);
+}

src/components/button/dependencies/themes.json

@@ -8,2 +8,22 @@ [
   {
+    "theme": "Industrial",
+    "class": "dyvix-button-industrial",
+    "default-animation": "fade"
+  },
+  {
+    "theme": "Ember",
+    "class": "dyvix-button-ember",
+    "default-animation": "glitch"
+  },
+  {
+    "theme": "Frost",
+    "class": "dyvix-button-frost",
+    "default-animation": "unfold"
+  },
+  {
+    "theme": "Blade",
+    "class": "dyvix-button-blade",
+    "default-animation": "zoom"
+  },
+  {
     "theme": "Neon",
@@ -17,3 +37,23 @@ "class": "dyvix-button-neon",
     "default-animation": "aurora"
+  },
+  {
+    "theme": "Sunset",
+    "class": "dyvix-button-sunset",
+    "default-animation": "drop"
+  },
+  {
+    "theme": "Ocean",
+    "class": "dyvix-button-ocean",
+    "default-animation": "flip"
+  },
+  {
+    "theme": "Forest",
+    "class": "dyvix-button-forest",
+    "default-animation": "glide"
+  },
+  {
+    "theme": "Midnight",
+    "class": "dyvix-button-midnight",
+    "default-animation": "drift"
   }
 ]

src/components/button/validation.jsx

@@ -8,3 +8,3 @@ import {
 
-const component = "Button"
+const component = 'Button';
 const CacheMapping = {
@@ -26,3 +26,3 @@ theme: {
 
-    const [isAnimation, isTheme] = await Promise.all([
+  const [isAnimation, isTheme] = await Promise.all([
     ValidatAndLoadJSON(
@@ -43,7 +43,4 @@ CacheMapping,
     )
-    ]);
-  if (
-    normalizedAnimation !== null &&
-    !isAnimation.status
-  ) {
+  ]);
+  if (normalizedAnimation !== null && !isAnimation.status) {
     return {
@@ -50,0 +47,0 @@ status: GaurdStatus.Error,

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

@@ -109,15 +109,16 @@ .dyvix-modal-wrapper {
 }
-.modal-btn {
+.dyvix-btn-shared {
   width: 10rem;
   height: 2.8rem;
-  margin: 0 auto;
-  margin-top: auto;
-  margin-bottom: 2rem;
-  border: 1px solid black;
-  border-radius: 3rem;
-  background-color: #0ea5e9;
   flex: 0;
   min-width: 10rem;
   min-height: 2.8rem;
-  cursor: pointer;
+}
+.dyvix-modal-wrapper .modal .dyvix-btn-wrapper {
+  margin: auto auto 2rem auto;
+  width: 10rem;
+  height: 2.8rem;
+  flex: 0;
+  min-width: 10rem;
+  min-height: 2.8rem;
   transition:
@@ -128,11 +129,6 @@ transform 0.3s ease-in-out,
 }
-.modal-btn:hover {
-  transform: scale(1.03);
-  background-color: aquamarine;
-  border: 2px solid rgb(68, 85, 91);
+.modal-btn {
+  min-width: 10rem;
+  min-height: 2.8rem;
 }
-.modal-btn:active {
-  background-color: #0ea5e9;
-  transform: scale(1.05);
-}
 .modal-close-btn {
@@ -139,0 +135,0 @@ position: absolute;

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

@@ -63,4 +63,4 @@ .dyvix-modal-lens {
   transition:
-    trasform 0.5s ease-in-out,
-    0.4s ease-in-out,
+    transform 0.5s ease-in-out,
+    border-bottom 0.4s ease-in-out,
     box-shadow 0.3s ease-in-out,
@@ -187,5 +187,5 @@ -webkit-box-shadow 0.3s ease-in-out,
   );
-  border-bottom: 5px solid #a84600;
   border-radius: 20px;
   border: 1px solid rgba(255, 198, 15, 0.1);
+  border-bottom: 5px solid #a84600;
   box-shadow: 0px 15px 38px -10px rgba(255, 198, 15, 0.88);
@@ -192,0 +192,0 @@ -webkit-box-shadow: 0px 15px 38px -10px rgba(255, 198, 15, 0.88);

src/components/modal/modal.jsx

@@ -25,2 +25,3 @@ import elementsData from './dependencies/elements.json';
 import Version from '../../../package.json';
+import DyvixButton from '../button/button';
 
@@ -40,3 +41,3 @@ export const validType = typesData.map((e) => e.type);
  * @param {string} [props.Id] - modal id
- * @param {string} [props.class] - modal class
+ * @param {string} [props.className] - modal className
  * @param {Function} [props.onClose] - Close callback
@@ -55,3 +56,3 @@ * @param {Function} [props.onChange] - Change callback
   Id,
-  Class,
+  className,
   onSubmit,
@@ -129,4 +130,4 @@ onChange,
   const currentPreset = configs['preset'];
-  const serilaizedClass =
-    Class + ` ${currentTheme?.class}` + ` ${currentType.class}`;
+  const serilaizedclassName =
+    className + ` ${currentTheme?.class}` + ` ${currentType.class}`;
   // Dynamicily calculate modal sizing and position
@@ -173,3 +174,3 @@ const heightMap = {
         Id,
-        Class,
+        className,
         onSubmit,
@@ -239,3 +240,3 @@ SetConfig,
           <div
-            className={`modal ${serilaizedClass}`}
+            className={`modal ${serilaizedclassName}`}
             id={Id}
@@ -337,3 +338,3 @@ ref={modalRef}
                         animation: '!/',
-                        Class: 'modal-element'
+                        className: 'modal-element'
                       })
@@ -401,5 +402,9 @@ };
             {currentType.submit && (
-              <button className="modal-btn" onClick={() => handleSubmit()}>
+              <DyvixButton
+                className="modal-btn"
+                onClick={() => handleSubmit()}
+                theme={theme.toLowerCase()}
+              >
                 {currentType.submitLabel}
-              </button>
+              </DyvixButton>
             )}
@@ -406,0 +411,0 @@ </div>

src/components/select/SelectCompiler.jsx

@@ -17,3 +17,3 @@ import './dependencies/style/styles.css';
  * @param {string} [props.animation] - Animation name, defaults to fade
- * @param {string} [props.Class] - Select class
+ * @param {string} [props.className] - Select class
  * @param {string} [props.placeholder] - Select placeholder
@@ -26,3 +26,3 @@ */
   animation = 'fade',
-  Class,
+  className,
   placeholder = '',
@@ -153,3 +153,3 @@ ...props
   return (
-    <div className={`${Class} dyvix-select-wrapper`}>
+    <div className={`${className} dyvix-select-wrapper`}>
       <input
@@ -156,0 +156,0 @@ autoComplete="off"

src/components/toast/toast.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 export function DyvixToastItem({
-  Class,
+  className,
   message,
@@ -59,3 +59,3 @@ animation,
   return (
-    <div className={Class} ref={toastRef}>
+    <div className={className} ref={toastRef}>
       <span className={`dyvix-toast-title toast-${type.toLowerCase()}`}>
@@ -62,0 +62,0 @@ <span className="dyvix-toast-icon">{icons[type.toLowerCase()]}</span>{' '}

src/components/toast/toastContainer.jsx

@@ -64,3 +64,3 @@ import './dependencies/style/style.css';
             }
-            Class={currentclass}
+            className={currentclass}
             duration={duration}
@@ -67,0 +67,0 @@ animation={animation}

src/constants.js

 //AUTO GENERATED BY DYVIX UI ENGINE - DO NOT MANUALLY EDIT.
 
-export const DYVIX_MODAL_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'
-};
-export const DYVIX_MODAL_ELEMENT = {
-  TEXT: 'text',
-  EMAIL: 'email',
-  PASSWORD: 'password',
-  SEARCH: 'search',
-  URL: 'url',
-  TEL: 'tel',
-  SELECT: 'select',
-  D_SELECT: 'd-select',
-  AUTOCOMPLETE: 'autocomplete',
-  CHECKBOX: 'checkbox'
-};
+/**
+* @deprecated Use DYVIX_GLOBAL_THEME instead.
+* This will be removed in V0.3.0.
+*/
+export const DYVIX_MODAL_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_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"
+}
+export const DYVIX_MODAL_ELEMENT = 
+ {
+  "TEXT": "text",
+  "EMAIL": "email",
+  "PASSWORD": "password",
+  "SEARCH": "search",
+  "URL": "url",
+  "TEL": "tel",
+  "SELECT": "select",
+  "D_SELECT": "d-select",
+  "AUTOCOMPLETE": "autocomplete",
+  "CHECKBOX": "checkbox"
+}
+export const DYVIX_MODAL_PRESET = 
+ {
+  "REGISTER": "Register",
+  "LOGIN": "Login"
+}

src/index.jsx

@@ -7,1 +7,2 @@ export { default as Modal } from './components/modal/modal';
 export { default as DyvixButton } from './components/button/button';
+export { default as DyvixFile } from './components/file/file';

No alert changes

Improved metrics

Total package byte prevSize

115400

33.41%

Number of package files

41

13.89%

Lines of code

3822

34.72%

No dependency changes