dyvix-ui - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

src/components/label/dependencies/style/style.css

+.dyvix-label-wrapper {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  margin-bottom: 0.1rem;
+}
+.dyvix-label {
+  font-family: 'Geist', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: 0.025em;
+  user-select: none;
+  cursor: pointer;
+  transition:
+    color 0.15s ease-in-out,
+    opacity 0.15s ease-in-out;
+}

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

+.dyvix-label-lens {
+  font-family: 'Geist';
+  color: #b903e2;
+  text-shadow:
+    0 0 8px #b903e2,
+    0 0 20px rgba(185, 3, 226, 0.4);
+  transition:
+    color 0.3s ease-in-out,
+    text-shadow 0.3s ease-in-out;
+}
+.dyvix-label-lens:hover {
+  color: white;
+  text-shadow:
+    0 0 12px #b903e2,
+    0 0 30px rgba(185, 3, 226, 0.6);
+}
+.dyvix-label-industrial {
+  font-family: 'Geist';
+  color: #9ca3af;
+  border-bottom: 2px solid #374151;
+  padding-bottom: 2px;
+  transition:
+    color ease-in-out 0.3s,
+    border-color ease-in-out 0.3s;
+}
+.dyvix-label-industrial:hover {
+  color: #6a6a6a;
+  border-bottom-color: #6a6a6a;
+}
+.dyvix-label-ember {
+  font-family: 'Geist';
+  color: #ff4500;
+  text-shadow:
+    0px 4px 8px rgba(255, 69, 0, 0.73),
+    0px 0px 20px rgba(255, 69, 0, 0.3);
+  padding-bottom: 2px;
+  transition:
+    color ease-in-out 0.4s,
+    text-shadow ease-in-out 0.3s,
+    border-bottom ease-in-out 0.4s;
+}
+.dyvix-label-ember:hover {
+  color: #ff6b00;
+  text-shadow:
+    0px 4px 12px rgba(255, 69, 0, 0.9),
+    0px 0px 30px rgba(255, 69, 0, 0.5);
+}
+.dyvix-label-ocean {
+  font-family: 'Geist';
+  color: #e0f7ff;
+  text-shadow:
+    0 0 8px rgba(56, 189, 248, 0.55),
+    0 0 22px rgba(14, 165, 233, 0.35);
+  transition:
+    color 0.3s ease-in-out,
+    text-shadow 0.3s ease-in-out,
+    transform 0.3s ease-in-out;
+}
+.dyvix-label-ocean:hover {
+  color: #67e8f9;
+  text-shadow:
+    0 0 12px rgba(125, 211, 252, 0.75),
+    0 0 34px rgba(14, 165, 233, 0.55);
+  transform: translateY(-1px);
+}
+.dyvix-label-crimson {
+  font-family: 'Geist';
+  color: #dc143c;
+  text-shadow:
+    0px 4px 8px rgba(220, 20, 60, 0.73),
+    0px 0px 20px rgba(220, 20, 60, 0.3);
+  padding-bottom: 2px;
+  transition:
+    color ease-in-out 0.4s,
+    text-shadow ease-in-out 0.3s,
+    border-bottom ease-in-out 0.4s;
+}
+.dyvix-label-crimson:hover {
+  color: #ff4757;
+  text-shadow:
+    0px 4px 12px rgba(220, 20, 60, 0.9),
+    0px 0px 30px rgba(220, 20, 60, 0.5);
+}

src/components/label/dependencies/themes.json

+[
+  {
+    "theme": "Singularity",
+    "class": "dyvix-label-lens",
+    "default-animation": "bubble"
+  },
+  {
+    "theme": "Industrial",
+    "class": "dyvix-label-industrial",
+    "default-animation": "fade"
+  },
+  {
+    "theme": "Ember",
+    "class": "dyvix-label-ember",
+    "default-animation": "glitch"
+  },
+  {
+    "theme": "Ocean",
+    "class": "dyvix-label-ocean",
+    "default-animation": "flip"
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-label-crimson",
+    "default-animation": "float"
+  }
+]

src/components/label/label.jsx

+import React from 'react';
+import './dependencies/style/style.css';
+import { EvaluateFailure, GuardStatus } from '../../utils/DyvixGuard';
+import { Validatelbl } from './validation';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import Version from '../../../package.json';
+
+/**
+ * @param {Object} props
+ * @param {string} [props.className] - Label className
+ * @param {string} [props.htmlFor] - Links the label to a form associated element
+ * @param {string} [props.animation] - Animation name
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} [props.theme] - Label theme
+ * @param {Object} [props.style] - Inline styles overrides
+*/
+function DyvixLabel({
+  children,
+  className = '',
+  htmlFor,
+  animation = 'fade',
+  theme = '!/',
+  style,
+  ...rest
+}) {
+  const lblRef = React.useRef(null);
+  const [configs, SetConfig] = React.useState({});
+  const instanceId = React.useId();
+  const currentAnimation = animation ? configs['animation'] : null;
+  const currentTheme = theme !== '!/' ? configs['theme'] : null;
+
+  className = `dyvix-label ${currentTheme?.class ?? ''} ${className}`.trim();
+
+  React.useEffect(() => {
+    async function validate() {
+      const validator = await Validatelbl(
+        animation,
+        theme,
+        SetConfig,
+        instanceId
+      );
+
+      if (validator.status === GuardStatus.Error) {
+        return EvaluateFailure(validator.error, validator.status);
+      }
+    }
+
+    validate();
+    return () => {
+      const key = `DYVIX_${Version['version']}_Label_theme_${instanceId}`;
+      const ele = document.getElementById(key);
+      if (ele) ele.remove();
+    };
+  }, [animation, theme]);
+
+  useGSAP(() => {
+    if (!lblRef.current || !currentAnimation) return;
+
+    gsap.fromTo(lblRef.current, currentAnimation.from, {
+      ...currentAnimation.to,
+      duration: currentAnimation['default-duration'],
+      ease: currentAnimation.ease
+    });
+  }, [currentAnimation]);
+
+  const props = {
+    className: className,
+    ...(htmlFor && { htmlFor: htmlFor }),
+    style
+  };
+
+  return (
+    <div className="dyvix-label-wrapper" ref={lblRef} {...rest}>
+      <label {...props}>{children}</label>
+    </div>
+  );
+}
+
+export default DyvixLabel;

src/components/label/validation.jsx

+import {
+  EvaluateFailure,
+  GuardStatus,
+  allowsNull
+} from '../../utils/DyvixGuard';
+import { ValidatAndLoadJSON } from '../../utils/Smart Json Caching/SJCManager';
+
+const component = 'Label';
+const CacheMapping = {
+  theme: {
+    jsonpath: '../../components/label/dependencies/themes.json',
+    csspath: '../../components/label/dependencies/style/themes.css'
+  },
+  animation: {
+    jsonpath: '../../components/animations.json',
+    csspath: null
+  }
+};
+
+export async function Validatelbl(animation, theme, callback, instance) {
+  let normalizedAnimation = animation?.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 = await ValidatAndLoadJSON(
+    CacheMapping,
+    normalizedAnimation,
+    callback,
+    'animation',
+    component
+  );
+  if (!isAnimation.status && !allowsNull(normalizedAnimation)) {
+    return {
+      status: GuardStatus.Error,
+      error: 'Please provide a valid animation.'
+    };
+  }
+
+  return { status: GuardStatus.Success };
+}

contributors.md

@@ -21,1 +21,8 @@ # Contributors
 - [@Anuragp22](https://github.com/Anuragp22)
+- [@nanookclaw](https://github.com/nanookclaw)
+- [@rishipandey2](https://github.com/rishipandey2)
+- [@PrettyFox0](https://github.com/PrettyFox0)
+- [@ded-furby](https://github.com/ded-furby)
+- [@colord](https://github.com/colord)
+- [@skyswordw](https://github.com/skyswordw)
+- [@promptpolish-ai](https://github.com/promptpolish-ai)

package.json

 {
   "name": "dyvix-ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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",

README.md

@@ -47,3 +47,3 @@ <div align="center">
           Id="register-modal"
-          Class="modal"
+          className="modal"
           theme='Singularity' // Singularity | Industrial | Ember | Frost | Blade
@@ -50,0 +50,0 @@ elements={[

src/components/animations.json

@@ -90,3 +90,11 @@ [
     "to": { "opacity": 1, "scale": 1, "y": 0 }
+  },
+  {
+    "animation": "float",
+    "type": "in",
+    "default-duration": 1,
+    "ease": "power2.out",
+    "from": { "y": 40, "opacity": 0, "scale": 0.95 },
+    "to": { "y": 0, "opacity": 1, "scale": 1 }
   }
 ]

src/components/button/button.jsx

 import React from 'react';
 import './dependencies/style/style.css';
-import { EvaluateFailure, GaurdStatus } from '../../utils/DyvixGuard';
+import { EvaluateFailure, GuardStatus } from '../../utils/DyvixGuard';
 import gsap from 'gsap';
@@ -13,3 +13,3 @@ import { useGSAP } from '@gsap/react';
  * @param {string} [props.className] - Button className
- * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora')} props.theme - Modal theme
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} props.theme - Button theme
  * @param {string} [props.background] - Button background color
@@ -53,3 +53,3 @@ * @param {string} [props.color] - Button color
 
-      if (validator.status === GaurdStatus.Error) {
+      if (validator.status === GuardStatus.Error) {
         return EvaluateFailure(validator.error, validator.status);
@@ -56,0 +56,0 @@ }

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

@@ -392,1 +392,27 @@ .dyvix-button-lens {
 }
+.dyvix-button-crimson {
+  background: #1a0000;
+  color: #ffd6d6;
+  border: 1px solid #ff4d4d;
+  border-radius: 10px;
+  box-shadow: 0 0 18px rgba(255, 77, 77, 0.25);
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.2s ease,
+    box-shadow 0.25s ease;
+}
+
+.dyvix-button-crimson:hover {
+  background: #2a0000;
+  border-color: #ff6666;
+  transform: scale(1.02);
+  box-shadow: 0 0 28px rgba(255, 77, 77, 0.45);
+}
+
+.dyvix-button-crimson:active {
+  transform: scale(0.98);
+  background: #140000;
+  border-color: #ff8080;
+  box-shadow: 0 0 14px rgba(255, 77, 77, 0.3);
+}

src/components/button/dependencies/themes.json

@@ -56,3 +56,8 @@ [
     "default-animation": "drift"
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-button-crimson",
+    "default-animation": "float"
   }
 ]

src/components/button/validation.jsx

 import {
   EvaluateFailure,
-  GaurdStatus,
+  GuardStatus,
   allowsNull
@@ -45,3 +45,3 @@ } from '../../utils/DyvixGuard';
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid animation.'
@@ -52,3 +52,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid theme.'
@@ -58,3 +58,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }

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

@@ -355,1 +355,27 @@ .dyvix-file-lens {
 }
+.dyvix-file-crimson {
+  background: #1a0000;
+  border: 1px solid #ff4d4d;
+  border-radius: 10px;
+  box-shadow: 0 0 18px rgba(255, 77, 77, 0.25);
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.2s ease,
+    box-shadow 0.25s ease;
+}
+
+.dyvix-file-crimson p {
+  color: #ffd6d6;
+}
+
+.dyvix-file-crimson:hover {
+  background: #2a0000;
+  border-color: #ff6666;
+  transform: scale(1.01);
+  box-shadow: 0 0 26px rgba(255, 77, 77, 0.4);
+}
+
+.dyvix-file-crimson:hover p {
+  color: #ffffff;
+}

src/components/file/dependencies/themes.json

@@ -56,3 +56,8 @@ [
     "default-animation": "drift"
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-file-crimson",
+    "default-animation": "float"
   }
 ]

src/components/file/file.jsx

 import React from 'react';
 import './dependencies/style/style.css';
-import { EvaluateFailure, GaurdStatus } from '../../utils/DyvixGuard';
+import { EvaluateFailure, GuardStatus } from '../../utils/DyvixGuard';
 import gsap from 'gsap';
@@ -9,2 +9,15 @@ import { useGSAP } from '@gsap/react';
 
+/**
+ * @param {Object} props
+ * @param {string} [props.label] - Label text displayed on the file picker, defaults to 'Upload File'
+ * @param {string} [props.animation] - Animation name
+ * @param {string} [props.className] - Label className
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} [props.theme] - File theme
+ * @param {string} [props.background] - Label background color
+ * @param {string} [props.color] - Label text color
+ * @param {boolean} [props.multiple] - Allow multiple file selection, defaults to false
+ * @param {string} [props.accept] - Accepted file types, defaults to '*\/*'
+ * @param {function} [props.onUpload] - Callback fired with the uploaded File or FileList
+ * @param {Object} [props.style] - Inline styles overrides
+ */
 function DyvixFile({
@@ -74,3 +87,3 @@ label = 'Upload File',
 
-      if (validator.status === GaurdStatus.Error) {
+      if (validator.status === GuardStatus.Error) {
         return EvaluateFailure(validator.error, validator.status);
@@ -77,0 +90,0 @@ }

src/components/file/validation.jsx

 import {
   EvaluateFailure,
-  GaurdStatus,
+  GuardStatus,
   allowsNull
@@ -46,3 +46,3 @@ } from '../../utils/DyvixGuard';
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid animation.'
@@ -54,3 +54,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid theme.'
@@ -60,3 +60,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }

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

@@ -313,1 +313,162 @@ .dyvix-input-lens {
 }
+.dyvix-input-ocean {
+  background: #031b2f;
+  background: linear-gradient(
+    135deg,
+    #02131f 0%,
+    #05314b 35%,
+    #0b6c91 70%,
+    #38bdf8 100%
+  );
+  color: #e0f7ff;
+  border: 2px solid rgba(125, 211, 252, 0.55);
+  border-radius: 2rem;
+  box-shadow:
+    0px 0px 18px rgba(56, 189, 248, 0.45),
+    0px 0px 42px rgba(14, 165, 233, 0.35),
+    inset 0px 0px 18px rgba(186, 230, 253, 0.14);
+  -webkit-box-shadow:
+    0px 0px 18px rgba(56, 189, 248, 0.45),
+    0px 0px 42px rgba(14, 165, 233, 0.35),
+    inset 0px 0px 18px rgba(186, 230, 253, 0.14);
+  -moz-box-shadow:
+    0px 0px 18px rgba(56, 189, 248, 0.45),
+    0px 0px 42px rgba(14, 165, 233, 0.35),
+    inset 0px 0px 18px rgba(186, 230, 253, 0.14);
+  transition:
+    transform 0.35s 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-color 0.25s ease-in-out,
+    background 0.35s ease-in-out;
+}
+.dyvix-input-ocean:hover {
+  background: linear-gradient(
+    135deg,
+    #04243a 0%,
+    #065f86 40%,
+    #0ea5e9 75%,
+    #67e8f9 100%
+  );
+  border-color: rgba(186, 230, 253, 0.85);
+  transform: translateY(-1px) scale(1.01);
+  box-shadow:
+    0px 0px 24px rgba(56, 189, 248, 0.65),
+    0px 0px 60px rgba(14, 165, 233, 0.5),
+    inset 0px 0px 24px rgba(186, 230, 253, 0.2);
+  -webkit-box-shadow:
+    0px 0px 24px rgba(56, 189, 248, 0.65),
+    0px 0px 60px rgba(14, 165, 233, 0.5),
+    inset 0px 0px 24px rgba(186, 230, 253, 0.2);
+  -moz-box-shadow:
+    0px 0px 24px rgba(56, 189, 248, 0.65),
+    0px 0px 60px rgba(14, 165, 233, 0.5),
+    inset 0px 0px 24px rgba(186, 230, 253, 0.2);
+}
+.dyvix-input-ocean:focus {
+  outline: none;
+  border-color: #bae6fd;
+  transform: scale(1.015);
+  box-shadow:
+    0px 0px 0px 2px rgba(125, 211, 252, 0.28),
+    0px 0px 30px rgba(56, 189, 248, 0.75),
+    0px 0px 70px rgba(14, 165, 233, 0.6),
+    inset 0px 0px 28px rgba(224, 247, 255, 0.24);
+  -webkit-box-shadow:
+    0px 0px 0px 2px rgba(125, 211, 252, 0.28),
+    0px 0px 30px rgba(56, 189, 248, 0.75),
+    0px 0px 70px rgba(14, 165, 233, 0.6),
+    inset 0px 0px 28px rgba(224, 247, 255, 0.24);
+  -moz-box-shadow:
+    0px 0px 0px 2px rgba(125, 211, 252, 0.28),
+    0px 0px 30px rgba(56, 189, 248, 0.75),
+    0px 0px 70px rgba(14, 165, 233, 0.6),
+    inset 0px 0px 28px rgba(224, 247, 255, 0.24);
+}
+.dyvix-input-ocean::placeholder {
+  color: rgba(224, 247, 255, 0.72);
+}
+.dyvix-input-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-input-forest:hover {
+  transform: skewX(-5deg) scale(1.02);
+  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-input-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-input-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(-2px) scale(1.01);
+}
+.dyvix-input-crimson {
+  background: #1a0000;
+  color: #ffd6d6;
+  border: 1px solid #ff4d4d;
+  border-radius: 10px;
+  box-shadow: 0 0 18px rgba(255, 77, 77, 0.25);
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease,
+    transform 0.2s ease,
+    background-color 0.25s ease;
+}
+.dyvix-input-crimson:hover {
+  background: #2a0000;
+  border-color: #ff6666;
+  box-shadow: 0 0 24px rgba(255, 77, 77, 0.4);
+  transform: scale(1.01);
+}
+.dyvix-input-crimson:focus {
+  outline: none;
+  background: #2a0000;
+  border-color: #ff8080;
+  box-shadow:
+    0 0 28px rgba(255, 77, 77, 0.55),
+    0 0 0 2px rgba(255, 77, 77, 0.18);
+}
+
+.dyvix-input-crimson::placeholder {
+  color: rgba(255, 214, 214, 0.7);
+}

src/components/input/dependencies/themes.json

@@ -41,3 +41,23 @@ [
     "default-animation": "drop"
+  },
+  {
+    "theme": "Ocean",
+    "class": "dyvix-input-ocean",
+    "default-animation": "flip"
+  },
+  {
+    "theme": "Forest",
+    "class": "dyvix-input-forest",
+    "default-animation": "glide"
+  },
+  {
+    "theme": "Midnight",
+    "class": "dyvix-input-midnight",
+    "default-animation": "drift"
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-input-crimson",
+    "default-animation": "float"
   }
 ]

src/components/input/input.jsx

@@ -16,2 +16,3 @@ import gsap from 'gsap';
  * @param {string} [props.animation] - Animation name, defaults to fade
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} props.theme - Input theme
  * @param {string} [props.className] - Input className
@@ -18,0 +19,0 @@ * @param {string} [props.name] - Input name

src/components/input/validation.jsx

 import {
   EvaluateFailure,
-  GaurdStatus,
+  GuardStatus,
   allowsNull
@@ -67,3 +67,3 @@ } from '../../utils/DyvixGuard';
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid animation.'
@@ -74,3 +74,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid type.'
@@ -81,3 +81,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid theme.'
@@ -87,3 +87,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }

src/components/modal/dependencies/presets.json

@@ -29,4 +29,4 @@ [
     ],
-    "default-animation": "fade",
-    "default-theme": "Neon",
+    "default-animation": "bubble",
+    "default-theme": "Singularity",
     "default-title": "Register"
@@ -54,3 +54,3 @@ },
     "default-animation": "fade",
-    "default-theme": "Neon",
+    "default-theme": "Industrial",
     "default-title": "Login"
@@ -70,4 +70,4 @@ },
     ],
-    "default-animation": "fade",
-    "default-theme": "Neon",
+    "default-animation": "aurora",
+    "default-theme": "Frost",
     "default-title": "Forgot Password"
@@ -95,4 +95,4 @@ },
     ],
-    "default-animation": "fade",
-    "default-theme": "Neon",
+    "default-animation": "flip",
+    "default-theme": "Aurora",
     "default-title": "Reset Password"
@@ -128,6 +128,6 @@ },
     ],
-    "default-animation": "fade",
-    "default-theme": "Neon",
+    "default-animation": "glide",
+    "default-theme": "Midnight",
     "default-title": "Change Password"
   }
 ]

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

@@ -14,2 +14,5 @@ .dyvix-modal-wrapper {
 }
+.modal:hover {
+  transform: scale(1.01);
+}
 #modal-header {
@@ -41,3 +44,3 @@ width: 100%;
   width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
   border-radius: 1rem;
@@ -44,0 +47,0 @@ height: 25px;

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

@@ -27,3 +27,2 @@ .dyvix-modal-lens {
 }
-
 .dyvix-modal-industrial {
@@ -287,1 +286,19 @@ font-family: 'Geist';
 }
+.dyvix-modal-crimson {
+  background: linear-gradient(135deg, #200000 0%, #4a0000 100%);
+  border: 2px solid rgba(255, 80, 80, 0.4);
+  border-radius: 2rem;
+  box-shadow:
+    0 0 40px rgba(255, 0, 0, 0.15),
+    inset 0 0 20px rgba(255, 100, 100, 0.08);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.dyvix-modal-crimson:hover {
+  transform: scale(1.01);
+  box-shadow:
+    0 0 60px rgba(255, 0, 0, 0.25),
+    inset 0 0 30px rgba(255, 100, 100, 0.12);
+}

src/components/modal/dependencies/themes.json

@@ -67,3 +67,9 @@ [
     "radiused": false
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-modal-crimson",
+    "default-animation": "float",
+    "radiused": false
   }
 ]

src/components/modal/InputValidation.jsx

 import { validType, eleData, validRules } from './modal';
 import {
   EvaluateFailure,
-  GaurdStatus,
+  GuardStatus,
   allowsNull
@@ -75,3 +75,3 @@ } from '../../utils/DyvixGuard';
 
-  if (validator.status === GaurdStatus.Error) {
+  if (validator.status === GuardStatus.Error) {
     return EvaluateFailure(validator.error, validator.status);
@@ -86,3 +86,3 @@ }
 
-  if (eleValidator.status === GaurdStatus.Error) {
+  if (eleValidator.status === GuardStatus.Error) {
     return EvaluateFailure(eleValidator.error, eleValidator.status);
@@ -113,3 +113,3 @@ }
   );
-  if (animation === '!/') {
+  if (theme !== '!/' && isTheme.status && animation === '!/' && preset === '!/') {
     animation = isTheme.config.theme['default-animation'];
@@ -131,3 +131,3 @@ }
       return {
-        status: GaurdStatus.Error,
+        status: GuardStatus.Error,
         error: 'Please provide a valid preset.'
@@ -140,10 +140,10 @@ };
     return {
-      status: GaurdStatus.Error,
-      error: 'Please provide a vaild animation.'
+      status: GuardStatus.Error,
+      error: 'Please provide a valid animation.'
     };
   }
-  if (!isTheme.status) {
+  if (!isTheme.status && preset === '!/' && theme !== '!/') {
     return {
-      status: GaurdStatus.Error,
-      error: 'Please provide a vaild theme.'
+      status: GuardStatus.Error,
+      error: 'Please provide a valid theme.'
     };
@@ -156,12 +156,12 @@ }
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'onSubmit should be provided as a function.'
     };
   }
-  if (preset !== '!/') return { status: GaurdStatus.Success };
+  if (preset !== '!/') return { status: GuardStatus.Success };
   if (title === '!/') {
-    return { status: GaurdStatus.Error, error: 'Please provide a title' };
+    return { status: GuardStatus.Error, error: 'Please provide a title' };
   }
   if (!validType.includes(type)) {
-    return { status: GaurdStatus.Error, error: 'Please provide a vaild type.' };
+    return { status: GuardStatus.Error, error: 'Please provide a valid type.' };
   }
@@ -173,3 +173,3 @@ if (
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Element should be provided as an array of objects.'
@@ -179,3 +179,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }
@@ -199,3 +199,3 @@ export function validateElements(elements) {
       return {
-        status: GaurdStatus.Error,
+        status: GuardStatus.Error,
         error: 'Elements should include a valid type.'
@@ -207,3 +207,3 @@ };
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error: `Field '${element.name}' requires an options array.`
@@ -219,3 +219,3 @@ };
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error: `Amount mismatch for '${element.name}'. Expected ${element.amount} option sets.`
@@ -227,3 +227,3 @@ };
       return {
-        status: GaurdStatus.Error,
+        status: GuardStatus.Error,
         error: 'Element amount should be positive and less than 3.'
@@ -237,3 +237,3 @@ };
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error:
@@ -248,3 +248,3 @@ 'Element placeholder should be provided as an array of the same length as the provided amount.'
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error:
@@ -261,3 +261,3 @@ 'Element name should be provided as an array of the same length as the provided amount.'
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error:
@@ -269,3 +269,3 @@ 'Element placeholder should be a string or an array of length 1.'
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error: 'Element name should be a string or an array of length 1.'
@@ -284,3 +284,3 @@ };
       return {
-        status: GaurdStatus.Error,
+        status: GuardStatus.Error,
         error: `Validation overflow: maximum of amount of ${element.amount} reached.`
@@ -299,3 +299,3 @@ };
           return {
-            status: GaurdStatus.Error,
+            status: GuardStatus.Error,
             error: `Invalid Regular Expression was provided.`
@@ -306,3 +306,3 @@ };
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error: `'${rule}' is not a recognized validator.`
@@ -322,3 +322,3 @@ };
           return {
-            status: GaurdStatus.Error,
+            status: GuardStatus.Error,
             error: `'${matchId}' is not a recognized target for matching.`
@@ -334,10 +334,10 @@ };
 
-  if (isDuplicateName?.status === GaurdStatus.Error) {
+  if (isDuplicateName?.status === GuardStatus.Error) {
     return isDuplicateName;
   }
-  if (isDuplicateId?.status === GaurdStatus.Error) {
+  if (isDuplicateId?.status === GuardStatus.Error) {
     return isDuplicateId;
   }
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }
@@ -366,3 +366,3 @@ export function normalizeElements(elements) {
         return {
-          status: GaurdStatus.Error,
+          status: GuardStatus.Error,
           error: `Element ${field} should be unique.`
@@ -376,3 +376,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }

src/components/modal/modal.jsx

@@ -23,3 +23,3 @@ import elementsData from './dependencies/elements.json';
 } from './InputValidation';
-import { GaurdStatus } from '../../utils/DyvixGuard';
+import { GuardStatus } from '../../utils/DyvixGuard';
 import Version from '../../../package.json';
@@ -38,13 +38,16 @@ import DyvixButton from '../button/button';
  * @param {Object} props
- * @param {string} props.title - Modal title
- * @param {('auth'|'form')} props.type - Modal type
- * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora')} props.theme - Modal theme
+ * @param {string} [props.title] - Modal title
+ * @param {('auth'|'form')} [props.type] - Modal type
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} [props.theme] - Modal theme
+ * @param {string} [props.preset] - Modal preset name
+ * @param {string} [props.background] - Modal background color
  * @param {string} [props.animation] - Animation name, defaults to theme default
- * @param {string} [props.Id] - modal id
- * @param {string} [props.className] - modal className
+ * @param {string} [props.Id] - Modal id
+ * @param {string} [props.className] - Modal className
  * @param {Function} [props.onClose] - Close callback
  * @param {Function} [props.onChange] - Change callback
  * @param {Function} [props.onSubmit] - Submit callback
- * @param {Array<Object>} props.elements - Array of element configs
- */
+ * @param {Array<Object>} [props.elements] - Array of element configs
+ * @param {Object} [props.style] - Inline style overrides
+*/
 function Modal({
@@ -55,3 +58,4 @@ title = '!/',
   preset = '!/',
-  theme = 'Singularity',
+  theme = '!/',
+  background,
   animation = '!/',
@@ -62,3 +66,4 @@ Id,
   onChange,
-  onClose
+  onClose,
+  style
 }) {
@@ -168,3 +173,3 @@ const [data, SetData] = React.useState({});
   const serilaizedclassName =
-    className + ` ${currentTheme?.class}` + ` ${currentType.class}`;
+    className + `${currentTheme?.class ? ` ${currentTheme?.class}`: ''}` + ` ${currentType.class}`;
   // Dynamicily calculate modal sizing and position
@@ -183,3 +188,3 @@ const heightMap = {
   let idealSize = heightMap[fields?.length] || '26rem';
-  const geometryBuffer = currentTheme?.radiused
+  const geometryBuffer = currentTheme?.radiused || !currentTheme
     ? (2.5 * fields?.length) / 3
@@ -193,11 +198,28 @@ : 0;
   const dynamicMargin = isCentered ? '12vh auto' : '1.5rem auto';
-  const modalStyles = {
-    height: dynamicHeight,
-    width: dynamicWidth,
-    margin: dynamicMargin,
-    transition: 'all 0.3s ease-out'
-  };
+  
+const defaultStyle = {
+  ...(!currentTheme && { background: background || 'white' }),
+  fontFamily: 'Geist, sans-serif',
+  borderRadius: '2rem'
+};
+const activeStyle = style || defaultStyle;
+const modalStyles = {
+  height: dynamicHeight,
+  width: dynamicWidth,
+  margin: dynamicMargin,
+  transition: 'all 0.3s ease-out',
+  ...activeStyle
+};
   if (currentPreset) {
     title = title !== '!/' ? title : currentPreset['default-title'];
+    animation =
+      animation !== '!/'
+        ? animation
+        : currentPreset['default-animation'] || 'fade';
+    theme =
+      theme !== '!/' ? theme : currentPreset['default-theme'] || 'Singularity';
+  } else {
+    theme = theme !== '!/' ? theme : '!/';
   }
+
   React.useEffect(() => {
@@ -396,3 +418,3 @@ async function GetFields() {
                         onChange: (e) => {
-                          console.log(Tag)
+                          console.log(Tag);
                           const value = elementDef['is_custom']
@@ -399,0 +421,0 @@ ? e

src/components/select/SelectCompiler.jsx

@@ -194,6 +194,6 @@ import './dependencies/style/styles.css';
   if (!supportedTypes.includes(type)) {
-    return { status: -1, error: 'Please provide a vaild select type.' };
+    return { status: -1, error: 'Please provide a valid select type.' };
   }
   if (animation !== '!/' && !validAnimations.includes(animation)) {
-    return { status: -1, error: 'Please provide a vaild animation.' };
+    return { status: -1, error: 'Please provide a valid animation.' };
   }
@@ -200,0 +200,0 @@ return { status: 1 };

src/components/toast/toastContainer.jsx

@@ -10,3 +10,3 @@ import './dependencies/style/style.css';
 import { ValidateContainer } from './validation';
-import { GaurdStatus, EvaluateFailure } from '../../utils/DyvixGuard';
+import { GuardStatus, EvaluateFailure } from '../../utils/DyvixGuard';
 
@@ -32,3 +32,3 @@ export const validPositions = positionData.map((e) => e.position);
 
-  if (validator.status === GaurdStatus.Error) {
+  if (validator.status === GuardStatus.Error) {
     return EvaluateFailure(validator.error, validator.status);
@@ -35,0 +35,0 @@ }

src/components/toast/validation.jsx

 import {
   EvaluateFailure,
-  GaurdStatus,
+  GuardStatus,
   allowsNull
@@ -11,3 +11,3 @@ } from '../../utils/DyvixGuard';
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid position.'
@@ -18,3 +18,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid duration that is greater than 0.'
@@ -25,3 +25,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a valid animation.'
@@ -32,3 +32,3 @@ };
     return {
-      status: GaurdStatus.Error,
+      status: GuardStatus.Error,
       error: 'Please provide a segment between 1 and 10.'
@@ -38,3 +38,3 @@ };
 
-  return { status: GaurdStatus.Success };
+  return { status: GuardStatus.Success };
 }

src/constants.js

@@ -14,3 +14,4 @@ //AUTO GENERATED BY DYVIX UI ENGINE - DO NOT MANUALLY EDIT.
   FOREST: 'Forest',
-  MIDNIGHT: 'Midnight'
+  MIDNIGHT: 'Midnight',
+  CRIMSON: 'Crimson'
 };
@@ -32,3 +33,4 @@ export const DYVIX_MODAL_TYPE = {
   GLIDE: 'glide',
-  DRIFT: 'drift'
+  DRIFT: 'drift',
+  FLOAT: 'float'
 };
@@ -35,0 +37,0 @@ export const DYVIX_MODAL_VALIDATION_PRESET = {

src/index.jsx

@@ -8,2 +8,3 @@ export { default as Modal } from './components/modal/modal';
 export { default as DyvixFile } from './components/file/file';
-export { default as DyvixInput } from './components//input/input';
+export { default as DyvixInput } from './components/input/input';
+export { default as DyvixLabel } from './components/label/label';

src/utils/DyvixGuard.js

@@ -1,2 +0,2 @@
-export const GaurdStatus = {
+export const GuardStatus = {
   Error: 'error',
@@ -13,9 +13,9 @@ Warn: 'warn',
   switch (status) {
-    case GaurdStatus.Error:
+    case GuardStatus.Error:
       console.error(formatedmsg);
       return null;
-    case GaurdStatus.Warn:
+    case GuardStatus.Warn:
       console.warn(formatedmsg);
       break;
-    case GaurdStatus.Log:
+    case GuardStatus.Log:
       console.log(formatedmsg);
@@ -22,0 +22,0 @@ }

src/utils/Smart Json Caching/SJCManager.js

@@ -1,2 +0,2 @@
-import { EvaluateFailure, GaurdStatus } from '../DyvixGuard';
+import { EvaluateFailure, GuardStatus } from '../DyvixGuard';
 import Version from '../../../package.json';
@@ -3,0 +3,0 @@ import { set, get } from 'idb-keyval';

src/utils/Smart Json Caching/SJCRegistry.js

@@ -12,2 +12,4 @@ import buttonThemesJSON from '../../components/button/dependencies/themes.json?raw';
 import inputThemesCSS from '../../components/input/dependencies/style/themes.css?raw';
+import labelThemesJSON from '../../components/label/dependencies/themes.json?raw';
+import labelThemesCSS from '../../components/label/dependencies/style/themes.css?raw';
 
@@ -21,3 +23,4 @@ export const JSON_LIBRARY = {
   '../../components/input/dependencies/types.json': inputTypesJSON,
-  '../../components/input/dependencies/themes.json': inputThemesJSON
+  '../../components/input/dependencies/themes.json': inputThemesJSON,
+  '../../components/label/dependencies/themes.json': labelThemesJSON
 };
@@ -29,3 +32,4 @@
   '../../components/file/dependencies/style/themes.css': fileThemesCSS,
-  '../../components/input/dependencies/style/themes.css': inputThemesCSS
+  '../../components/input/dependencies/style/themes.css': inputThemesCSS,
+  '../../components/label/dependencies/style/themes.css': labelThemesCSS
 };

No alert changes

Improved metrics

Total package byte prevSize

160942

12.46%

Number of package files

54

10.2%

Lines of code

5318

11.68%

No dependency changes