🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

dyvix-ui

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dyvix-ui - npm Package Compare versions

Comparing version
0.3.6
 to
0.3.7
+54
src/themeRegistry/themes.json
[
{
"theme": "Singularity",
"default-animation": "bubble"
},
{
"theme": "Industrial",
"default-animation": "fade"
},
{
"theme": "Ember",
"default-animation": "glitch"
},
{
"theme": "Frost",
"default-animation": "unfold"
},
{
"theme": "Blade",
"default-animation": "zoom"
},
{
"theme": "Neon",
"default-animation": "pulse"
},
{
"theme": "Aurora",
"default-animation": "aurora"
},
{
"theme": "Sunset",
"default-animation": "drop"
},
{
"theme": "Ocean",
"default-animation": "flip"
},
{
"theme": "Forest",
"default-animation": "glide"
},
{
"theme": "Midnight",
"default-animation": "drift"
},
{
"theme": "Crimson",
"default-animation": "float"
},
{
"theme": "Obsidian",
"default-animation": "fade"
}
]
+15
-0
contributors.md

@@ -38,1 +38,16 @@ # Contributors

- [@uttam12331](https://github.com/uttam12331)
- [@punyajain312](https://github.com/punyajain312)
- [@MaxwellM34](https://github.com/MaxwellM34)
- [@serkancakmakk](https://github.com/serkancakmakk)
- [@omar2004khaled](https://github.com/omar2004khaled)
- [@subhakartadimalla](https://github.com/subhakartadimalla)
- [@siddhigrg1201](https://github.com/siddhigrg1201)
- [@gargshambhavi0802-pixel](https://github.com/gargshambhavi0802-pixel)
- [@priyan923](https://github.com/priyan923)
- [@shrutig-blip](https://github.com/shrutig-blip)
- [@Mahnoor-Zaffar](https://github.com/Mahnoor-Zaffar)
- [@amna-sehgal](https://github.com/amna-sehgal)
- [@saumyabaranwal](https://github.com/saumyabaranwal)
- [@harshita-777](https://github.com/harshita-777)
- [@devthedevil](https://github.com/devthedevil)
- [@mysterio-Apoorva](https://github.com/mysterio-Apoorva)
+3
-2
package.json
{
"name": "dyvix-ui",
"version": "0.3.6",
"version": "0.3.7",
"description": "Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.",

@@ -46,3 +46,4 @@ "main": "src/index.jsx",

"docs:preview": "vitepress preview docs",
"dyvix:build": "node dev-engine/scripts/generate-constants.js"
"dyvix:build": "node dev-engine/scripts/generate-constants.js",
"dyvix:chktheme": "node dev-engine/scripts/check-themes.js"
},

@@ -49,0 +50,0 @@ "overrides": {

+114
-34
README.md

@@ -21,9 +21,15 @@ <div align="center">

- 🎨 **Multiple themes** - Singularity, Blade, Neon, Aurora, Sunset, Ocean, Forest, Midnight.
- 🎨 **13 global themes** - `Singularity`, `Industrial`, `Ember`, `Frost`, `Blade`, `Neon`, `Aurora`, `Sunset`, `Ocean`, `Forest`, `Midnight`, `Crimson`, `Obsidian` (Component coverage varies between releases).
- ⚡ **Smart JSON Caching (SJC)** - Multi-tier (L1, L2, L3) system for near-zero latency delivery.
- ✨ **Rich animations** - bubble, fade, zoom, unfold, glitch.
- 🔧 **Config-driven components** - Flexible props for forms, modals, toasts
- ♿ **Accessible** - Built with accessibility in mind
- 📦 **Lightweight** - Minimal dependencies
- ✨ **13 animation presets** - `fade`, `bubble`, `zoom`, `unfold`, `glitch`, `pulse`, `aurora`, `drop`, `flip`, `glide`, `drift`, `float`, `swing`.
- 🔧 **Config-driven & composable APIs** - Dual mode support where it makes sense.
- 🗂️ **Sortable tables** - Multi-column sorting.
- 🧩 **Modal engine** - JSON-driven with validation, presets, file upload, radio, and more.
- ♿ **Accessible** - ARIA attributes and keyboard navigation throughout.
- 📦 **37.9 kB packed** - Lean, headless-first architecture with zero bloat.
## Why Dyvix?
Unlike traditional component libraries, Dyvix focuses on config-driven workflows where they provide the most value, with optional animation and theme systems that can be customized without rewriting component logic.
# React

@@ -37,35 +43,55 @@

### Form Modal Engine
```jsx
import { Modal } from 'dyvix-ui'
import { Modal } from 'dyvix-ui';
function ModalExample()
{
return(
<Modal
title="Register"
type="form"
animation="bubble" // bubble | fade | zoom | unfold | glitch
Id="register-modal"
className="modal"
theme='Singularity' // Singularity | Industrial | Ember | Frost | Blade
elements={[
{ type: "text", placeholder: ["First Name", "Last Name"], id: "name", name: ["firstName", "lastName"], amount: 2 },
{ type: "email", placeholder: "Email", validation: ["email"], id: "email", name: "email", amount: 1 },
{ type: "password", placeholder: "Password", validation: ["password"], id: "password", name: "password", amount: 1 },
]}
onSubmit={(data) => console.log(data)}
/>
)
function ModalExample() {
return (
<Modal
title="Register"
type="form"
animation="bubble" // bubble | fade | zoom | unfold | glitch | pulse | aurora | drop | flip | glide | drift | float | swing
Id="register-modal"
className="modal"
theme="Singularity" // Singularity | Industrial | Ember | Frost | Blade | Neon | Aurora | Sunset | Ocean | Forest | Midnight | Crimson | Obsidian
elements={[
{
type: 'text',
placeholder: ['First Name', 'Last Name'],
id: 'name',
name: ['firstName', 'lastName'],
amount: 2
},
{
type: 'email',
placeholder: 'Email',
validation: ['email'],
id: 'email',
name: 'email',
amount: 1
},
{
type: 'password',
placeholder: 'Password',
validation: ['password'],
id: 'password',
name: 'password',
amount: 1
}
]}
onSubmit={(data) => console.log(data)}
/>
);
}
````
```
### Global Notifications
```jsx
import { DyvixToastContainer, dyvixToast } from 'dyvix-ui';
function ToastExample()
{
function notify()
{
dyvixToast.success('This a new message');
function ToastExample() {
function notify() {
dyvixToast.success('This is a new message');
}

@@ -75,9 +101,63 @@

<>
<DyvixToastContainer position='top-right' duration={5000} animation='fade'/>
<DyvixToastContainer
position="top-right"
duration={5000}
animation="fade"
/>
<button onClick={notify}>Notify</button>
</>
)
);
}
```
### Dual-API Table support
Config-driven table mode includes an exclusive realtime multi-column sorting.
```jsx
import {
DyvixTable,
DyvixTableHeader,
DyvixTableBody,
DyvixTableRow,
DyvixTableHead,
DyvixTableCell
} from 'dyvix-ui';
function Dual_API_Table_Example() {
return (
<>
{/* Config-driven Mode */}
<DyvixTable
theme="Crimson"
columns={[
{ key: 'name', label: 'Name', sortable: true },
{ key: 'type', label: 'Type' }
]}
data={[
{ name: 'Lion', type: 'Wild' },
{ name: 'Hawk', type: 'Bird' }
]}
/>
{/* Composable Mode */}
<DyvixTable>
<DyvixTableHeader>
<DyvixTableRow>
<DyvixTableHead>Name</DyvixTableHead>
<DyvixTableHead>Type</DyvixTableHead>
</DyvixTableRow>
</DyvixTableHeader>
<DyvixTableBody>
<DyvixTableRow>
<DyvixTableCell>Lion</DyvixTableCell>
<DyvixTableCell>Wild</DyvixTableCell>
</DyvixTableRow>
</DyvixTableBody>
</DyvixTable>
</>
);
}
```
Full Documentation & Live Demos: [dyvix-ui.vercel.app](https://dyvix-ui.vercel.app/)

@@ -87,5 +167,5 @@

Feel free to open meaningful issues and prs. Check our [contributing guide](CONTRIBUTING.md) and open contribution trackers:
Feel free to open meaningful issues and PRs. Check our [contributing guide](CONTRIBUTING.md) and open contribution trackers:
- Add new [themes](https://github.com/younisdev/dyvix-ui/issues/14)
- Add new [animations](https://github.com/younisdev/dyvix-ui/issues/15)
+16
-0
src/components/animations.json

@@ -98,3 +98,19 @@ [

"to": { "y": 0, "opacity": 1, "scale": 1 }
},
{
"animation": "swing",
"type": "in",
"default-duration": 1.1,
"ease": "back.out(2)",
"from": {
"rotation": -15,
"y": -40,
"opacity": 0
},
"to": {
"rotation": 0,
"y": 0,
"opacity": 1
}
}
]
+3
-3
src/components/button/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-button-lens {
.dyvix-button-singularity {
background: radial-gradient(circle, #000000 0%, #1a1a1a 100%);

@@ -10,7 +10,7 @@ box-shadow: 0 0 30px #b903e2;

}
.dyvix-button-lens:hover {
.dyvix-button-singularity:hover {
border: #000000 3px double;
transform: scale(1.09);
}
.dyvix-button-lens:active {
.dyvix-button-singularity:active {
border: #000000 5px double;

@@ -17,0 +17,0 @@ transform: scale(1.09);

+1
-1
src/components/button/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-button-lens",
"class": "dyvix-button-singularity",
"default-animation": "bubble"

@@ -6,0 +6,0 @@ },

+4
-4
src/components/file/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-file-lens {
.dyvix-file-singularity {
border: 4px dashed #3c0349;

@@ -13,7 +13,7 @@ background-color: #1f2937;

}
.dyvix-file-lens p {
.dyvix-file-singularity p {
color: whitesmoke;
transition: color 0.2s ease;
}
.dyvix-file-lens:hover {
.dyvix-file-singularity:hover {
border-color: #6a2a7a;

@@ -23,3 +23,3 @@ background: rgb(47, 4, 47);

}
.dyvix-file-lens:hover p {
.dyvix-file-singularity:hover p {
color: grey;

@@ -26,0 +26,0 @@ }

+1
-1
src/components/file/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-file-lens",
"class": "dyvix-file-singularity",
"default-animation": "bubble"

@@ -6,0 +6,0 @@ },

+4
-4
src/components/input/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-input-lens {
.dyvix-input-singularity {
background: radial-gradient(circle, #000000 0%, #1a1a1a 100%);

@@ -11,3 +11,3 @@ color: #b903e2;

}
.dyvix-input-lens:hover {
.dyvix-input-singularity:hover {
border-color: #6a0368;

@@ -17,6 +17,6 @@ box-shadow: 0 0 50px #b903e2;

}
.dyvix-input-lens::placeholder {
.dyvix-input-singularity::placeholder {
color: whitesmoke;
}
.dyvix-input-lens:focus {
.dyvix-input-singularity:focus {
border-color: #b903e2;

@@ -23,0 +23,0 @@ box-shadow:

+1
-1
src/components/input/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-input-lens",
"class": "dyvix-input-singularity",
"default-animation": "bubble"

@@ -6,0 +6,0 @@ },

+20
-2
src/components/label/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-label-lens {
.dyvix-label-singularity {
font-family: 'Geist';

@@ -11,3 +11,3 @@ color: #b903e2;

}
.dyvix-label-lens:hover {
.dyvix-label-singularity:hover {
color: white;

@@ -195,1 +195,19 @@ text-shadow:

}
.dyvix-label-sunset {
color: #8b3a00;
text-shadow:
0 0 8px rgba(255, 126, 95, 0.55),
0 0 23px rgba(254, 180, 123, 0.35);
transition:
color 0.3s ease-in-out,
text-shadow 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.dyvix-label-sunset:hover {
color: #ff6b6b;
text-shadow:
0 0 12px rgba(255, 126, 95, 0.75),
0 0 34px rgba(254, 180, 123, 0.55);
transform: translateY(-1px);
}
+6
-1
src/components/label/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-label-lens",
"class": "dyvix-label-singularity",
"default-animation": "bubble"

@@ -56,3 +56,8 @@ },

"default-animation": "aurora"
},
{
"theme": "Sunset",
"class": "dyvix-label-sunset",
"default-animation": "sunset"
}
]
+2
-2
src/components/modal/dependencies/elements.json

@@ -59,4 +59,4 @@ [

"element": "d-select",
"tag": "DynamicSelect",
"default-class": "modal-DynamicSelect",
"tag": "DyvixSelect",
"default-class": "modal-dyvix-select",
"aria": {

@@ -63,0 +63,0 @@ "role": "combobox",

+34
-3
src/components/modal/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-modal-lens {
.dyvix-modal-singularity {
font-family: 'Geist';

@@ -18,3 +18,3 @@ border: 4px solid #3c0349;

}
.dyvix-modal-lens:hover {
.dyvix-modal-singularity:hover {
border: 4px solid #27032f;

@@ -25,3 +25,3 @@ background: radial-gradient(circle, #000000 0%, #1a1a1a 120%);

}
.dyvix-modal-lens > div > .modal-text {
.dyvix-modal-singularity > div > .modal-text {
color: white;

@@ -305,1 +305,32 @@ }

}
.dyvix-modal-obsidian {
background: radial-gradient(
circle at top,
#2a2a2a 0%,
#151515 45%,
#050505 100%
);
border-radius: 1.75rem;
color: #f3f4f6;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
border: 2px solid rgba(160, 130, 255, 0.4);
box-shadow:
inset 0 0 40px rgba(255, 255, 255, 0.04),
0 0 50px rgba(120, 90, 255, 0.18);
}
.dyvix-modal-obsidian:hover {
transform: translateY(-2px);
box-shadow:
inset 0 0 30px rgba(255, 255, 255, 0.05),
0 0 75px rgba(130, 100, 255, 0.25);
border-color: rgba(180, 150, 255, 0.7);
}
.dyvix-modal-obsidian > div > .modal-text {
color: #e5edff;
}
+7
-1
src/components/modal/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-modal-lens",
"class": "dyvix-modal-singularity",
"default-animation": "bubble",

@@ -73,3 +73,9 @@ "radiused": true

"radiused": false
},
{
"theme": "Obsidian",
"class": "dyvix-modal-obsidian",
"default-animation": "fade",
"radiused": false
}
]
+36
-25
src/components/modal/modal.jsx
import elementsData from './dependencies/elements.json';
import DynamicSelect from '../select/SelectCompiler';
import DyvixSelect from '../select/SelectCompiler';
import validationData from './dependencies/validator/validators.json';

@@ -35,3 +35,3 @@ import typesData from './dependencies/types.json';

const componentsMap = {
DynamicSelect: DynamicSelect,
DyvixSelect: DyvixSelect,
DyvixFile: DyvixFile,

@@ -191,31 +191,43 @@ DyvixInput: DyvixInput

`${currentTheme?.class ? ` ${currentTheme?.class}` : ''}` +
` ${currentType.class}`;
`${currentType?.class ? ` ${currentType.class}` : ''}`;
// Dynamicily calculate modal sizing and position
const heightMap = {
1: '19rem',
2: '24rem',
3: '26rem',
4: '31rem',
5: '37rem',
6: '41rem',
7: '46rem',
8: '53rem',
9: '57rem'
// text row height seem to be suitable for other elements
// Add more mapping keys if other elements started spacing weird
const ROW_HEIGHT = {
text: 56
};
let idealSize = heightMap[fields?.length] || '26rem';
const ROW_GAP = 25;
const BASEHEIGHT = 200; // Ceiling space + Floor space combined
let TOTAL_HEIGHT =
BASEHEIGHT +
fields?.reduce((acc, field, index) => {
const type = field.type;
const gap = index < fields.length - 1 ? ROW_GAP : 0;
return acc + (ROW_HEIGHT[type] || ROW_HEIGHT.text) + gap;
}, 0);
const geometryBuffer =
currentTheme?.radiused || !currentTheme ? (2.5 * fields?.length) / 3 : 0;
idealSize = `calc(${idealSize} + ${geometryBuffer}rem)`;
TOTAL_HEIGHT += geometryBuffer * 16;
const isMobile = window.matchMedia('(max-width: 768px)').matches;
const dynamicHeight = isMobile ? `min(${idealSize}, 95vh)` : idealSize;
const dynamicWidth = `min(${idealSize}, 95vw, 95vh)`;
const dynamicHeight = isMobile
? `min(${TOTAL_HEIGHT}px, 95vh)`
: `${TOTAL_HEIGHT}px`;
const dynamicWidth = `min(${TOTAL_HEIGHT}px, 95vw, 95vh)`;
const isCentered = fields?.length <= 4;
const dynamicMargin = isCentered ? '12vh auto' : '1.5rem auto';
const defaultStyle = {
...(!currentTheme && { background: background || 'white' }),
fontFamily: 'Geist, sans-serif',
borderRadius: '2rem'
const defaultStyle = !currentTheme
? {
...(!currentTheme && { background: background || 'white' }),
fontFamily: 'Geist, sans-serif',
borderRadius: '2rem'
}
: {};
let activeStyle = style || defaultStyle;
activeStyle = {
...activeStyle,
...(fields?.length > 7 && currentTheme?.radiused && { borderRadius: '47%' })
};
const activeStyle = style || defaultStyle;
const modalStyles = {

@@ -323,3 +335,2 @@ height: dynamicHeight,

id={Id}
ref={modalRef}
style={modalStyles}

@@ -395,3 +406,3 @@ >

const options =
Tag === 'select' || elementDef.tag === 'DynamicSelect'
Tag === 'select' || elementDef.tag === 'DyvixSelect'
? Array.isArray(field.options[0])

@@ -432,3 +443,3 @@ ? field.options[j]

}),
...(elementDef.tag === 'DynamicSelect' && {
...(elementDef.tag === 'DyvixSelect' && {
elements: options,

@@ -435,0 +446,0 @@ animation: '!/',

+1
-1
src/components/select/dependencies/style/styles.css

@@ -59,3 +59,3 @@ .dyvix-select-wrapper {

border-radius: 8px;
background: whitesmoke;
background: var(--dyvix-select-dropdown-color, whitesmoke);
border: 1px solid #e2e8f0;

@@ -62,0 +62,0 @@ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

+169
-9
src/components/select/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-select-lens .dyvix-select-input-lens {
.dyvix-select-singularity .dyvix-select-input-singularity {
border: 2px solid #3c0349;

@@ -8,7 +8,7 @@ background: radial-gradient(circle, #000000 0%, #1a1a1a 100%);

}
.dyvix-select-lens .dyvix-select-input-lens:hover {
.dyvix-select-singularity .dyvix-select-input-singularity:hover {
border-color: #7a0499;
box-shadow: 0 0 20px rgba(185, 3, 226, 0.45);
}
.dyvix-select-lens .dyvix-select-input-lens:focus {
.dyvix-select-singularity .dyvix-select-input-singularity:focus {
border-color: #b903e2;

@@ -18,7 +18,7 @@ box-shadow: 0 0 25px rgba(185, 3, 226, 0.6);

}
.dyvix-select-lens .dyvix-select-input-lens::placeholder {
.dyvix-select-singularity .dyvix-select-input-singularity::placeholder {
color: rgba(185, 3, 226, 0.4);
}
.dyvix-select-lens .dyvix-select-dropdown-lens {
background: #0d0d0d;
.dyvix-select-singularity .dyvix-select-dropdown-singularity {
background: var(--dyvix-select-dropdown-color, #0d0d0d);
border: 1px solid rgba(185, 3, 226, 0.3);

@@ -30,3 +30,3 @@ border-radius: 8px;

}
.dyvix-select-lens .dyvix-select-dropdown-lens li {
.dyvix-select-singularity .dyvix-select-dropdown-singularity li {
background: transparent;

@@ -36,8 +36,168 @@ color: rgba(255, 255, 255, 0.85);

}
.dyvix-select-lens .dyvix-select-dropdown-lens li:hover {
.dyvix-select-singularity .dyvix-select-dropdown-singularity li:hover {
background: rgba(185, 3, 226, 0.15);
color: white;
}
.dyvix-select-lens .dyvix-select-dropdown-lens::-webkit-scrollbar-thumb {
.dyvix-select-singularity
.dyvix-select-dropdown-singularity::-webkit-scrollbar-thumb {
background: rgba(185, 3, 226, 0.6);
}
/* Industrial Theme */
.dyvix-select-industrial .dyvix-select-input-industrial {
background: #0a1429;
border: 2px solid #374151;
font-family: 'Geist';
color: #ffffff;
border-radius: 0px;
}
.dyvix-select-industrial .dyvix-select-dropdown-industrial {
background: var(--dyvix-select-dropdown-color, #2c3e50);
border: 1px solid #374151;
border-radius: 0px;
}
.dyvix-select-industrial .dyvix-select-dropdown-industrial li {
color: #ffffff;
}
.dyvix-select-industrial
.dyvix-select-dropdown-industrial::-webkit-scrollbar-thumb {
background: #0a1429;
}
/* Blade Theme */
.dyvix-select-blade .dyvix-select-input-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);
transition:
border-left 0.1s ease-in-out,
border-top 0.1s ease-in-out,
box-shadow 0.2s ease-in-out;
}
.dyvix-select-blade .dyvix-select-input-blade:hover {
border-left: 3.5px solid #ffffff;
border-top: 3.5px solid #ffffff;
box-shadow: -6px -6px 30px rgba(255, 255, 255, 0.1);
}
.dyvix-select-blade .dyvix-select-input-blade::placeholder {
color: #e2e8f0;
}
.dyvix-select-blade .dyvix-select-dropdown-blade {
background: var(--dyvix-select-dropdown-color, #0a0a0a);
box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.05);
--dyvix-select-active-bg: #ffffff;
--dyvix-select-active-text: #0a0a0a;
}
.dyvix-select-blade .dyvix-select-dropdown-blade li {
background: #0a0a0a;
color: #ffffff;
}
.dyvix-select-blade .dyvix-select-dropdown-blade::-webkit-scrollbar-thumb {
background: #ffffff;
}
/* Ember Theme */
.dyvix-select-ember .dyvix-select-input-ember {
background: #0f0a08;
border: none;
border-bottom: 3px solid #ff4500;
color: #ffffff;
border-radius: 10px;
box-shadow:
0px 8px 12px -6px rgba(255, 69, 0, 0.6),
0px 0px 20px -8px rgba(255, 69, 0, 0.3);
transition:
border-bottom 0.3s ease-in-out,
box-shadow 0.3s ease-in-out,
transform 0.2s ease-in-out;
}
.dyvix-select-ember .dyvix-select-input-ember:hover {
border-bottom-color: #ff6b00;
box-shadow:
0px 10px 18px -6px rgba(255, 69, 0, 0.8),
0px 0px 30px -6px rgba(255, 69, 0, 0.45);
}
.dyvix-select-ember .dyvix-select-input-ember:focus {
border-bottom-color: #ff6b00;
outline: none;
}
.dyvix-select-ember .dyvix-select-input-ember::placeholder {
color: rgba(255, 160, 122, 0.6);
}
.dyvix-select-ember .dyvix-select-dropdown-ember {
background: var(--dyvix-select-dropdown-color, #0f0a08);
border: 1px solid rgba(255, 69, 0, 0.35);
border-radius: 10px;
box-shadow: 0px 0px 25px rgba(255, 69, 0, 0.2);
--dyvix-select-active-bg: #ff4500;
--dyvix-select-active-text: #ffffff;
}
.dyvix-select-ember .dyvix-select-dropdown-ember li {
color: #ffffff;
}
.dyvix-select-ember .dyvix-select-dropdown-ember li:hover {
background: rgba(255, 69, 0, 0.15);
}
.dyvix-select-ember .dyvix-select-dropdown-ember::-webkit-scrollbar-thumb {
background: rgba(255, 69, 0, 0.6);
}
/* Neon Theme */
.dyvix-select-neon .dyvix-select-input-neon {
border: 2px solid rgba(252, 46, 255, 0.4);
background: radial-gradient(
circle,
rgba(77, 238, 234, 1) 0%,
rgba(112, 186, 239, 1) 43%,
rgba(240, 0, 255, 1) 100%
);
color: #ffffff;
box-shadow: 0px 0px 24px rgba(252, 46, 255, 0.5);
border-radius: 2rem;
transition:
border-radius 0.2s ease-in-out,
transform 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
}
.dyvix-select-neon .dyvix-select-input-neon:hover {
border-radius: 1rem;
transform: scale(1.01);
box-shadow: 0px 0px 40px rgba(252, 46, 255, 0.7);
}
.dyvix-select-neon .dyvix-select-input-neon:focus {
border-color: rgba(252, 46, 255, 0.8);
outline: none;
}
.dyvix-select-neon .dyvix-select-input-neon::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.dyvix-select-neon .dyvix-select-dropdown-neon {
background: var(--dyvix-select-dropdown-color, #0d0d0d);
border: 1px solid rgba(252, 46, 255, 0.4);
border-radius: 1rem;
box-shadow: 0px 0px 30px rgba(252, 46, 255, 0.3);
--dyvix-select-active-bg: #f02eff;
--dyvix-select-active-text: #ffffff;
}
.dyvix-select-neon .dyvix-select-dropdown-neon li {
background: transparent;
color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(252, 46, 255, 0.15);
}
.dyvix-select-neon .dyvix-select-dropdown-neon li:hover {
background: rgba(252, 46, 255, 0.2);
color: white;
}
.dyvix-select-neon .dyvix-select-dropdown-neon::-webkit-scrollbar-thumb {
background: rgba(252, 46, 255, 0.6);
}
+31
-3
src/components/select/dependencies/themes.json
[
{
"theme": "Singularity",
"class": "dyvix-select-lens",
"input-class": "dyvix-select-input-lens",
"dropdown-class": "dyvix-select-dropdown-lens",
"class": "dyvix-select-singularity",
"input-class": "dyvix-select-input-singularity",
"dropdown-class": "dyvix-select-dropdown-singularity",
"default-animation": "bubble"
},
{
"theme": "Industrial",
"class": "dyvix-select-industrial",
"input-class": "dyvix-select-input-industrial",
"dropdown-class": "dyvix-select-dropdown-industrial",
"default-animation": "fade"
},
{
"theme": "Blade",
"class": "dyvix-select-blade",
"input-class": "dyvix-select-input-blade",
"dropdown-class": "dyvix-select-dropdown-blade",
"default-animation": "drift"
},
{
"theme": "Ember",
"class": "dyvix-select-ember",
"input-class": "dyvix-select-input-ember",
"dropdown-class": "dyvix-select-dropdown-ember",
"default-animation": "glitch"
},
{
"theme": "Neon",
"class": "dyvix-select-neon",
"input-class": "dyvix-select-input-neon",
"dropdown-class": "dyvix-select-dropdown-neon",
"default-animation": "pulse"
}
]
+7
-1
src/components/select/SelectCompiler.jsx

@@ -25,2 +25,4 @@ import './dependencies/style/styles.css';

theme = '!/',
background,
dropdownBackground,
className,

@@ -178,3 +180,5 @@ placeholder = '',

className: className,
style: style
style: {
...style
}
};

@@ -189,2 +193,3 @@ const inputProps = {

type: 'text',
...(background && { style: { background: background } }),
...rest,

@@ -218,2 +223,3 @@ ref: selectRef,

ref: dropdownSelectRef,
...(dropdownBackground && { background: dropdownBackground }),
...(dropdownThemeClass && { className: dropdownThemeClass }),

@@ -220,0 +226,0 @@ controller: SetSelect,

+4
-1
src/components/select/SelectEngine.jsx

@@ -19,2 +19,3 @@ import './dependencies/style/styles.css';

type,
background,
className

@@ -75,3 +76,2 @@ },

}, [activeIndex]);
return (

@@ -84,2 +84,5 @@ <>

ref={ref}
style={{
...(background && { '--dyvix-select-dropdown-color': background })
}}
>

@@ -86,0 +89,0 @@ {is_open &&

+167
-3
src/components/table/dependencies/style/themes.css

@@ -1,2 +0,2 @@

.dyvix-table-lens {
.dyvix-table-singularity {
border-radius: 1rem;

@@ -17,3 +17,4 @@ font-family: 'Geist';

}
.dyvix-table-lens:hover {
.dyvix-table-singularity:hover {
border: 4px solid #27032f;

@@ -39,2 +40,3 @@ background: radial-gradient(circle, #000000 0%, #1a1a1a 120%);

}
.dyvix-table-crimson:hover {

@@ -67,2 +69,3 @@ background: radial-gradient(circle, #2a0000 0%, #0d0000 120%);

}
.dyvix-table-midnight:hover {

@@ -103,2 +106,3 @@ background: radial-gradient(circle at 40% 40%, #000375 0%, #000000 100%);

}
.dyvix-table-forest:hover {

@@ -148,2 +152,3 @@ border-color: #a3ec65;

}
.dyvix-table-ocean {

@@ -266,2 +271,3 @@ border-radius: 1rem;

}
.dyvix-table-blade:hover {

@@ -275,5 +281,14 @@ border-left: 4px solid #ffffff;

}
.dyvix-table-aurora {
font-family: 'Geist';
background: linear-gradient(90deg, #14e81e 0%, #00ea8d 21%, #01b1b3 46%, #017ed5 76%, #b53dff 100%) border-box;
background: linear-gradient(
90deg,
#14e81e 0%,
#00ea8d 21%,
#01b1b3 46%,
#017ed5 76%,
#b53dff 100%
)
border-box;
color: #e6fffb;

@@ -298,2 +313,3 @@ border-image: linear-gradient(

}
.dyvix-table-aurora:hover {

@@ -305,1 +321,149 @@ box-shadow: 0px 0px 55px 0px rgba(1, 176, 179, 0.55);

}
.dyvix-table-industrial {
border-radius: 0.75rem;
font-family: 'Geist';
background-color: #0a1429;
color: #e5e7eb;
border: 4px solid #6a6a6a;
box-shadow:
inset 0 0 20px rgba(106, 106, 106, 0.1),
0 0 20px rgba(106, 106, 106, 0.15);
transition:
box-shadow 0.3s ease,
border-color 0.3s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
/* HEADER ROW */
.dyvix-table-industrial thead tr {
background: #1b2435;
}
/* HEADER CELLS */
.dyvix-table-industrial th {
color: #f3f4f6;
border-bottom: 2px solid #374151;
}
/* BODY CELLS */
.dyvix-table-industrial td {
color: #d1d5db;
border-bottom: 1px solid #374151;
}
/* BODY ROW */
.dyvix-table-industrial tbody tr {
background: #0a1429;
}
/* ROW HOVER */
.dyvix-table-industrial tbody tr:hover {
background: #16233c;
}
.dyvix-table-industrial:hover {
border-color: #9ca3af;
background-color: #101f39;
box-shadow:
inset 0 0 30px rgba(106, 106, 106, 0.15),
0 0 30px rgba(106, 106, 106, 0.2);
transform: translateY(-2px) scale(1.005);
}
.dyvix-table-ember {
border-radius: 10px;
background-color: #0f0a08;
border-bottom: #ff4500 3px solid;
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-table-ember:hover {
border-bottom: #ff6b00 3.1px solid;
transform: 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-table-frost {
font-family: 'Geist';
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-table-frost:hover {
border: 5.5px 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-table-obsidian {
border-radius: 1rem;
font-family: 'Geist';
background: radial-gradient(
circle at top,
#2a2a2a 0%,
#151515 45%,
#050505 100%
);
color: #f3f4f6;
border: 2px solid rgba(160, 130, 255, 0.4);
box-shadow:
inset 0 0 40px rgba(255, 255, 255, 0.04),
0 0 50px rgba(120, 90, 255, 0.18);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.dyvix-table-obsidian:hover {
transform: translateY(-2px);
box-shadow:
inset 0 0 30px rgba(255, 255, 255, 0.05),
0 0 75px rgba(130, 100, 255, 0.25);
border-color: rgba(180, 150, 255, 0.7);
}
+1
-47
src/components/table/dependencies/themes.json

@@ -1,47 +0,1 @@

[
{
"theme": "Singularity",
"class": "dyvix-table-lens",
"default-animation": "bubble"
},
{
"theme": "Crimson",
"class": "dyvix-table-crimson",
"default-animation": "float"
},
{
"theme": "Midnight",
"class": "dyvix-table-midnight",
"default-animation": "drift"
},
{
"theme": "Forest",
"class": "dyvix-table-forest",
"default-animation": "glide"
},
{
"theme": "Sunset",
"class": "dyvix-table-sunset",
"default-animation": "drop"
},
{
"theme": "Ocean",
"class": "dyvix-table-ocean",
"default-animation": "flip"
},
{
"theme": "Neon",
"class": "dyvix-table-neon",
"default-animation": "pulse"
},
{
"theme": "Blade",
"class": "dyvix-table-blade",
"default-animation": "drift"
},
{
"theme": "Aurora",
"class": "dyvix-table-aurora",
"default-animation": "aurora"
}
]
[]
+1
-1
src/components/table/table.jsx

@@ -22,3 +22,3 @@ import React from 'react';

* @param {string} [props.color] - Custom text color
* @param {Array<{key: string, label: string}>} [props.columns] - Column definitions for config-driven mode
* @param {Array<{key: string, label: string, sortable?: boolean}>} [props.columns] - Column definitions for config-driven mode
* @param {Array<Object>} [props.data] - Row data for config-driven mode, keys must match column keys

@@ -25,0 +25,0 @@ * @param {Object} [props.style] - Inline style overrides

+4
-2
src/constants.js

@@ -15,3 +15,4 @@ //AUTO GENERATED BY DYVIX UI ENGINE - DO NOT MANUALLY EDIT.

MIDNIGHT: 'Midnight',
CRIMSON: 'Crimson'
CRIMSON: 'Crimson',
OBSIDIAN: 'Obsidian'
};

@@ -34,3 +35,4 @@ export const DYVIX_MODAL_TYPE = {

DRIFT: 'drift',
FLOAT: 'float'
FLOAT: 'float',
SWING: 'swing'
};

@@ -37,0 +39,0 @@ export const DYVIX_MODAL_VALIDATION_PRESET = {

+27
-0
src/utils/Smart Json Caching/SJCManager.js

@@ -90,3 +90,9 @@ import { EvaluateFailure, GuardStatus } from '../DyvixGuard';

}
jsonResult = JsonArray.find((e) => e[utility] === jsonKey);
if (utility === 'theme') {
jsonResult = await resolveTheme(jsonResult, jsonKey, component);
}
let value = {

@@ -188,2 +194,3 @@ ...(rawCSS !== null && { CSS: rawCSS }),

const entry = cachedData[jsonKey];
if (!entry) return null;

@@ -241,2 +248,22 @@

async function resolveTheme(localTheme, themeName, component) {
if (localTheme) return localTheme;
const rawGlobalThemes = await extractFile('../../themeRegistry/themes.json');
const globalThemes =
typeof rawGlobalThemes === 'string'
? JSON.parse(rawGlobalThemes)
: rawGlobalThemes;
const theme = globalThemes.find((e) => e.theme === themeName);
if (!theme) return null;
return {
...theme,
class: `dyvix-${component.toLowerCase()}-${themeName.toLowerCase()}`
};
}
async function extractCSSClass(classname, Csspath = null, cssblock = null) {

@@ -243,0 +270,0 @@ let rawCSS = null;

+3
-1
src/utils/Smart Json Caching/SJCRegistry.js

@@ -18,2 +18,3 @@ import buttonThemesJSON from '../../components/button/dependencies/themes.json?raw';

import selectThemesCSS from '../../components/select/dependencies/style/themes.css?raw';
import globalThemesJSON from '../../themeRegistry/themes.json?raw';

@@ -30,3 +31,4 @@ export const JSON_LIBRARY = {

'../../components/table/dependencies/themes.json': tableThemesJSON,
'../../components/select/dependencies/themes.json': selectThemesJSON
'../../components/select/dependencies/themes.json': selectThemesJSON,
'../../themeRegistry/themes.json': globalThemesJSON
};

@@ -33,0 +35,0 @@