dyvix-ui - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

src/components/table/dependencies/style/style.css

+.dyvix-table-wrapper {
+  width: 95%;
+  margin: 0.3rem auto;
+  border-radius: 25px;
+}
+.dyvix-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  text-align: left;
+  font-family:
+    'Geist',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 25px;
+  background: #080808;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+table[style*='color'] th,
+table[style*='color'] td {
+  color: inherit;
+}
+
+.dyvix-table thead tr {
+  background: rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.dyvix-table th {
+  padding: 12px 25px;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: aliceblue;
+}
+.dyvix-table td {
+  padding: 12px 26px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.75);
+}
+.dyvix-table tbody tr {
+  transition: background 0.15s ease;
+}
+.dyvix-table tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+.dyvix-table thead tr:first-child th:first-child {
+  border-top-left-radius: 21px;
+}
+.dyvix-table thead tr:first-child th:last-child {
+  border-top-right-radius: 21px;
+}
+.dyvix-table tbody tr:last-child td:first-child {
+  border-bottom-left-radius: 21px;
+}
+.dyvix-table tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 21px;
+}
+@media (max-width: 640px) {
+  .dyvix-table-wrapper {
+    overflow-x: auto;
+  }
+}

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

+.dyvix-table-lens {
+  border-radius: 1rem;
+  font-family: 'Geist';
+  border: 4px solid #3c0349;
+  color: white;
+  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:
+    transform ease-in-out 0.7s,
+    box-shadow ease-in-out 0.6s,
+    border ease-in-out 0.3s,
+    background ease-in-out 0.2s;
+}
+.dyvix-table-lens:hover {
+  border: 4px solid #27032f;
+  background: radial-gradient(circle, #000000 0%, #1a1a1a 120%);
+  box-shadow: 0 0 50px #b903e2;
+  transform: scale(1.02);
+}
+.dyvix-table-crimson {
+  border-radius: 1rem;
+  font-family: 'Geist';
+  border: 2px solid #ff4d4d;
+  color: #ffd6d6;
+  background-color: #1a0000;
+  background: radial-gradient(circle, #1a0000 0%, #0d0000 100%);
+  box-shadow: 0 0 30px rgba(255, 77, 77, 0.25);
+  transition:
+    transform ease-in-out 0.7s,
+    box-shadow ease-in-out 0.6s,
+    border ease-in-out 0.3s,
+    background ease-in-out 0.2s;
+}
+.dyvix-table-crimson:hover {
+  background: radial-gradient(circle, #2a0000 0%, #0d0000 120%);
+  box-shadow: 0 0 50px rgba(255, 77, 77, 0.45);
+  transform: scale(1.009);
+}

src/components/table/dependencies/themes.json

+[
+  {
+    "theme": "Singularity",
+    "class": "dyvix-table-lens",
+    "default-animation": "bubble"
+  },
+  {
+    "theme": "Crimson",
+    "class": "dyvix-table-crimson",
+    "default-animation": "float"
+  }
+]

src/components/table/DyvixTableBody.jsx

+import './dependencies/style/style.css';
+
+function DyvixTableBody({ children, className = '', ...rest }) {
+  const tableClasses = `dyvix-table-body ${className}`.trim();
+
+  return (
+    <tbody className={tableClasses} {...rest}>
+      {children}
+    </tbody>
+  );
+}
+
+export default DyvixTableBody;

src/components/table/DyvixTableCell.jsx

+import './dependencies/style/style.css';
+
+function DyvixTableCell({ children, className = '', ...rest }) {
+  const tableClasses = `dyvix-table-cell ${className}`.trim();
+
+  return (
+    <td className={tableClasses} {...rest}>
+      {children}
+    </td>
+  );
+}
+
+export default DyvixTableCell;

src/components/table/DyvixTableHead.jsx

+import './dependencies/style/style.css';
+
+function DyvixTableHead({ children, className = '', ...rest }) {
+  const tableClasses = `dyvix-table-head ${className}`.trim();
+
+  return (
+    <th className={tableClasses} {...rest}>
+      {children}
+    </th>
+  );
+}
+
+export default DyvixTableHead;

src/components/table/DyvixTableHeader.jsx

+import './dependencies/style/style.css';
+
+function DyvixTableHeader({ children, className = '', ...rest }) {
+  const tableClasses = `dyvix-table-header ${className}`.trim();
+
+  return (
+    <thead className={tableClasses} {...rest}>
+      {children}
+    </thead>
+  );
+}
+
+export default DyvixTableHeader;

src/components/table/DyvixTableRow.jsx

+import './dependencies/style/style.css';
+
+function DyvixTableRow({ children, className = '', ...rest }) {
+  const tableClasses = `dyvix-table-row ${className}`.trim();
+
+  return (
+    <tr className={tableClasses} {...rest}>
+      {children}
+    </tr>
+  );
+}
+
+export default DyvixTableRow;

src/components/table/table.jsx

+import React from 'react';
+import './dependencies/style/style.css';
+import DyvixTableHeader from './DyvixTableHeader';
+import DyvixTableHead from './DyvixTableHead';
+import DyvixTableRow from './DyvixTableRow';
+import DyvixTableBody from './DyvixTableBody';
+import DyvixTableCell from './DyvixTableCell';
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+import { ValidateTable } from './validation';
+import { GuardStatus, EvaluateFailure } from '../../utils/DyvixGuard';
+import Version from '../../../package.json';
+
+/**
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - Composable mode content (DyvixTableHeader, DyvixTableBody, etc.)
+ * @param {string} [props.className] - Additional className
+ * @param {string} [props.animation] - Animation name, defaults to 'fade'
+ * @param {('Singularity'|'Crimson')} [props.theme] - Table theme
+ * @param {string} [props.background] - Custom background color
+ * @param {string} [props.color] - Custom text color
+ * @param {Array<{key: string, label: string}>} [props.columns] - Column definitions for config-driven mode
+ * @param {Array<Object>} [props.data] - Row data for config-driven mode, keys must match column keys
+ * @param {Object} [props.style] - Inline style overrides
+ */
+function DyvixTable({
+  children,
+  className = '',
+  animation = 'fade',
+  theme = '!/',
+  background,
+  color,
+  columns,
+  data,
+  style,
+  ...rest
+}) {
+  const instanceId = React.useId();
+  const [configs, SetConfig] = React.useState({});
+  const tableRef = React.useRef();
+  const [isValid, SetIsvalid] = React.useState(false);
+  const currentAnimation = animation ? configs['animation'] : null;
+  const currentTheme = theme !== '!/' ? configs['theme'] : null;
+  const tableClasses =
+    `dyvix-table  ${currentTheme?.class ?? ''} ${className}`.trim();
+
+  const props = {
+    className: tableClasses,
+    style: {
+      ...(background && { background: background }),
+      ...(color && { color: color }),
+      ...style
+    }
+  };
+
+  const ConstructTable = () => {
+    const bodyRows = data.map((row) => columns.map((col) => row[col.key]));
+    return (
+      <>
+        <DyvixTableHeader>
+          <DyvixTableRow>
+            {columns.map((col, i) => {
+              return (
+                <DyvixTableHead key={col.key || i}>
+                  {typeof col === 'string' ? col : col.label}
+                </DyvixTableHead>
+              );
+            })}
+          </DyvixTableRow>
+        </DyvixTableHeader>
+        <DyvixTableBody>
+          {bodyRows.map((row, i) => {
+            return (
+              <DyvixTableRow key={i}>
+                {row.map((col, j) => (
+                  <DyvixTableCell key={`${i}-${j}`}>{col}</DyvixTableCell>
+                ))}
+              </DyvixTableRow>
+            );
+          })}
+        </DyvixTableBody>
+      </>
+    );
+  };
+
+  React.useEffect(() => {
+    async function validate() {
+      const validator = await ValidateTable(
+        animation,
+        theme,
+        children,
+        columns,
+        data,
+        SetConfig,
+        instanceId
+      );
+
+      if (validator.status === GuardStatus.Error) {
+        SetIsvalid(false);
+        return EvaluateFailure(validator.error, validator.status);
+      } else {
+        SetIsvalid(true);
+      }
+    }
+
+    validate();
+    return () => {
+      const key = `DYVIX_${Version['version']}_Table_theme_${instanceId}`;
+      const ele = document.getElementById(key);
+      if (ele) ele.remove();
+    };
+  }, [animation, columns, data]);
+  useGSAP(() => {
+    if (!tableRef.current || !currentAnimation) return;
+
+    gsap.fromTo(tableRef.current, currentAnimation.from, {
+      ...currentAnimation.to,
+      duration: currentAnimation['default-duration'],
+      ease: currentAnimation.ease
+    });
+  }, [currentAnimation]);
+  const resultJSX = React.useMemo(
+    () => (columns && isValid ? ConstructTable() : null),
+    [columns, isValid]
+  );
+  children = children ? children : resultJSX;
+  return (
+    <div className="dyvix-table-wrapper" ref={tableRef}>
+      <table {...props}>{children}</table>
+    </div>
+  );
+}
+
+export default DyvixTable;

src/components/table/validation.jsx

+import {
+  EvaluateFailure,
+  GuardStatus,
+  allowsNull
+} from '../../utils/DyvixGuard';
+import { ValidatAndLoadJSON } from '../../utils/Smart Json Caching/SJCManager';
+
+const component = 'Table';
+const CacheMapping = {
+  theme: {
+    jsonpath: '../../components/table/dependencies/themes.json',
+    csspath: '../../components/table/dependencies/style/themes.css'
+  },
+  animation: {
+    jsonpath: '../../components/animations.json',
+    csspath: null
+  }
+};
+
+export async function ValidateTable(
+  animation,
+  theme,
+  children,
+  columns,
+  data,
+  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.'
+    };
+  }
+  if (!children) {
+    // Validate table columns when the user is using table config-mode.
+
+    if (!Array.isArray(columns)) {
+      return {
+        status: GuardStatus.Error,
+        error: 'columns prop must be a valid array.'
+      };
+    }
+    const isMalformed = columns.some(
+      (col) => typeof col !== 'object' || col === null || col.key === undefined
+    );
+
+    if (isMalformed) {
+      return {
+        status: GuardStatus.Error,
+        error: 'All column entries must be objects containing a unique key.'
+      };
+    }
+    const isDuplicateCol = checkDuplicates(columns, 'key');
+    if (isDuplicateCol?.status === GuardStatus.Error) {
+      return isDuplicateCol;
+    }
+
+    // Validate table data for table config-mode.
+
+    if (!Array.isArray(data)) {
+      return {
+        status: GuardStatus.Error,
+        error:
+          'data prop must be a valid array of objects of keys from column prop.'
+      };
+    }
+    if (data.length === 0) {
+      return {
+        status: GuardStatus.Error,
+        error: 'data prop cannot be empty.'
+      };
+    }
+    const hasNullRow = data.some(
+      (row) => row === null || typeof row !== 'object'
+    );
+
+    if (hasNullRow) {
+      return {
+        status: GuardStatus.Error,
+        error: 'All data entries must be valid objects.'
+      };
+    }
+
+    const availableKeys = columns.map((col) => col.key);
+    const isMismatch = data.some((row) =>
+      availableKeys.some((key) => !(key in row))
+    );
+
+    if (isMismatch) {
+      return {
+        status: GuardStatus.Error,
+        error: 'data keys do not match column keys.'
+      };
+    }
+  }
+  return { status: GuardStatus.Success };
+}
+
+function checkDuplicates(elements, field) {
+  let found = new Set();
+  for (const element of elements) {
+    const val = element[field];
+
+    if (val === '!/') continue;
+    if (found.has(val)) {
+      return {
+        status: GuardStatus.Error,
+        error: `The column ${field} "${val}" must be unique.`
+      };
+    }
+
+    found.add(val);
+  }
+
+  return { status: GuardStatus.Success };
+}

contributors.md

@@ -28,1 +28,5 @@ # Contributors
 - [@promptpolish-ai](https://github.com/promptpolish-ai)
+- [@behnamnba1900-art](https://github.com/behnamnba1900-art)
+- [@daveranola](https://github.com/daveranola)
+- [@GovindKurapati](https://github.com/GovindKurapati)
+- [@LuisOrlando-code](https://github.com/LuisOrlando-code)

package.json

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

@@ -10,4 +10,5 @@ <div align="center">
   <img src="https://img.shields.io/npm/v/dyvix-ui?color=bf5af2&style=flat-square" />
+  <a href="https://socket.dev/npm/package/dyvix-ui"><img src="https://socket.dev/api/badge/npm/package/dyvix-ui" /></a>
+  <img src="https://img.shields.io/github/stars/younisdev/dyvix-ui?color=ff6ac1&style=flat-square" />
   <img src="https://img.shields.io/npm/l/dyvix-ui?color=0ea5e9&style=flat-square" />
-  <img src="https://img.shields.io/github/stars/younisdev/dyvix-ui?color=ff6ac1&style=flat-square" />
 </p>
@@ -14,0 +15,0 @@

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

@@ -13,6 +13,9 @@ .dyvix-file-wrapper {
   display: flex;
-  padding: 1rem 0;
-  flex-direction: column;
+  padding: 0 0.5rem;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
-  gap: 1rem;
+  min-height: 42px;
+  height: 100%;
+  gap: 0.5rem;
   border: 3px dashed rgba(0, 0, 0, 0.3);
@@ -19,0 +22,0 @@ border-radius: 2rem;

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

@@ -48,2 +48,37 @@ .dyvix-label-lens {
 }
+.dyvix-label-frost {
+  font-family: 'Geist';
+  color: rgba(213, 255, 248, 1);
+  border-bottom: 2px groove #ffffff40;
+  padding-bottom: 2px;
+  text-shadow:
+    0 0 8px rgba(213, 255, 248, 0.65),
+    0 0 20px rgba(248, 248, 248, 0.25);
+  transition:
+    color 0.3s ease-in-out,
+    border-color 0.2s ease-in-out,
+    text-shadow 0.3s ease-in-out,
+    transform 0.3s ease-in-out;
+}
+.dyvix-label-frost:hover {
+  color: #f8f8f8;
+  border-bottom-color: #f8f8f840;
+  text-shadow:
+    0 0 12px rgba(213, 255, 248, 0.8),
+    0 0 30px rgba(248, 248, 248, 0.35);
+  transform: translateY(-1px);
+}
+.dyvix-label-blade {
+  font-family: 'Geist';
+  color: #e2e8f0;
+  border-bottom: 2px solid #ffffff20;
+  padding-bottom: 2px;
+  transition:
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+}
+.dyvix-label-blade:hover {
+  color: #ffffff;
+  border-bottom-color: #ffffff;
+}
 .dyvix-label-ocean {
@@ -85,1 +120,37 @@ font-family: 'Geist';
 }
+.dyvix-label-midnight {
+  font-family: 'Geist';
+  color: #7aaaff;
+  text-shadow:
+    0 0 8px rgba(112, 168, 247, 0.5),
+    0 0 22px rgba(99, 102, 241, 0.35);
+  transition:
+    color 0.3s ease-in-out,
+    text-shadow 0.3s ease-in-out,
+    transform 0.3s ease-in-out;
+}
+.dyvix-label-midnight:hover {
+  color: #a0c4ff;
+  text-shadow:
+    0 0 12px rgba(112, 168, 247, 0.7),
+    0 0 34px rgba(99, 102, 241, 0.55);
+  transform: translateY(-1px);
+}
+.dyvix-label-forest {
+  font-family: 'Geist';
+  color: #86a86b;
+  text-shadow:
+    0 0 8px rgba(163, 236, 101, 0.45),
+    0 0 20px rgba(75, 58, 42, 0.4);
+  transition:
+    color 0.3s ease-in-out,
+    text-shadow 0.3s ease-in-out,
+    transform 0.3s ease-in-out;
+}
+.dyvix-label-forest:hover {
+  color: #a3ec65;
+  text-shadow:
+    0 0 12px rgba(163, 236, 101, 0.75),
+    0 0 30px rgba(75, 58, 42, 0.6);
+  transform: translateY(-1px);
+}

src/components/label/dependencies/themes.json

@@ -18,2 +18,12 @@ [
   {
+    "theme": "Frost",
+    "class": "dyvix-label-frost",
+    "default-animation": "unfold"
+  },
+  {
+    "theme": "Blade",
+    "class": "dyvix-label-blade",
+    "default-animation": "Zoom"
+  },
+  {
     "theme": "Ocean",
@@ -27,3 +37,13 @@ "class": "dyvix-label-ocean",
     "default-animation": "float"
+  },
+  {
+    "theme": "Midnight",
+    "class": "dyvix-label-midnight",
+    "default-animation": "drift"
+  },
+  {
+    "theme": "Forest",
+    "class": "dyvix-label-forest",
+    "default-animation": "glide"
   }
 ]

src/components/label/label.jsx

@@ -14,5 +14,7 @@ import React from 'react';
  * @param {string} [props.animation] - Animation name
- * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight')} [props.theme] - Label theme
+ * @param {('Singularity'|'Industrial'|'Ember'|'Frost'|'Blade'|'Neon'|'Aurora'|'Sunset'|'Crimson'|'Midnight'|'Forest')} [props.theme] - Label theme
+ * @param {string} [props.background] - Label background color
+ * @param {string} [props.color] - Label color
  * @param {Object} [props.style] - Inline styles overrides
-*/
+ */
 function DyvixLabel({
@@ -24,2 +26,4 @@ children,
   theme = '!/',
+  background,
+  color,
   style,
@@ -71,3 +75,7 @@ ...rest
     ...(htmlFor && { htmlFor: htmlFor }),
-    style
+    style: {
+      ...(background && { background: background }),
+      ...(color && { color: color }),
+      ...style
+    }
   };
@@ -74,0 +82,0 @@

src/components/modal/dependencies/elements.json

 [
   {
     "element": "text",
-    "tag": "input",
+    "tag": "DyvixInput",
     "tag-type": "text",
@@ -23,3 +23,3 @@ "default-class": "modal-text",
     "supports_autocomplete": true,
-    "is_custom": false,
+    "is_custom": true,
     "requires-options": false,
@@ -26,0 +26,0 @@ "r-variant": true

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

@@ -33,6 +33,8 @@ .dyvix-modal-wrapper {
 }
-.grouped-elements input {
+.grouped-elements .dyvix-file-wrapper,
+.grouped-elements .modal-file {
   flex: 1;
   max-width: 15rem;
   min-width: 0;
+  width: 100%;
 }
@@ -44,7 +46,8 @@ .grouped-elements:first-of-type {
   width: 100%;
-  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  color: inherit;
   border-radius: 1rem;
   height: 25px;
   margin: 0 auto;
-  background: transparent;
   padding: 0.5rem 1rem;
@@ -56,2 +59,5 @@ box-sizing: border-box;
 }
+.modal:not([class*='dyvix-modal-']) .modal-element::placeholder{
+  color: #1a1a1a !important;
+}
 .modal-element:hover {
@@ -210,2 +216,3 @@ border-color: rgba(255, 255, 255, 0.5);
   height: auto;
+  max-height: 50px;
 }
@@ -217,2 +224,3 @@ .grouped-elements .dyvix-file-wrapper {
   width: 100%;
+  max-height: 50px;
 }
@@ -219,0 +227,0 @@ .modal-file .dyvix-file-ui p {

src/components/modal/InputValidation.jsx

@@ -111,3 +111,8 @@ import { validType, eleData, validRules } from './modal';
   );
-  if (theme !== '!/' && isTheme.status && animation === '!/' && preset === '!/') {
+  if (
+    theme !== '!/' &&
+    isTheme.status &&
+    animation === '!/' &&
+    preset === '!/'
+  ) {
     animation = isTheme.config.theme['default-animation'];
@@ -114,0 +119,0 @@ }

src/components/modal/modal.jsx

@@ -27,2 +27,3 @@ import elementsData from './dependencies/elements.json';
 import DyvixFile from '../file/file';
+import DyvixInput from '../input/input';
 import { values } from 'idb-keyval';
@@ -34,3 +35,7 @@
 export const eleData = elementsData;
-const componentsMap = { DynamicSelect: DynamicSelect, DyvixFile: DyvixFile };
+const componentsMap = {
+  DynamicSelect: DynamicSelect,
+  DyvixFile: DyvixFile,
+  DyvixInput: DyvixInput
+};
 
@@ -52,3 +57,3 @@ /**
  * @param {Object} [props.style] - Inline style overrides
-*/
+ */
 function Modal({
@@ -153,9 +158,8 @@ title = '!/',
     SetErrors(newErrors);
+    return newErrors;
   }
   function handleSubmit() {
-    const validation = handleValidation(data);
+    const newErrors = handleValidation(data);
     const allow =
-      Object.values(errors).every((val) => val === null) &&
-      Object.keys(errors).length > 0;
-
+      Object.values(newErrors).every((val) => val === null);
     if (typeof onSubmit === 'function' && allow) {
@@ -173,3 +177,5 @@ onSubmit(data);
   const serilaizedclassName =
-    className + `${currentTheme?.class ? ` ${currentTheme?.class}`: ''}` + ` ${currentType.class}`;
+    className +
+    `${currentTheme?.class ? ` ${currentTheme?.class}` : ''}` +
+    ` ${currentType.class}`;
   // Dynamicily calculate modal sizing and position
@@ -181,12 +187,11 @@ const heightMap = {
     4: '31rem',
-    5: '36rem',
+    5: '37rem',
     6: '41rem',
     7: '46rem',
-    8: '51rem',
-    9: '56rem'
+    8: '53rem',
+    9: '57rem'
   };
   let idealSize = heightMap[fields?.length] || '26rem';
-  const geometryBuffer = currentTheme?.radiused || !currentTheme
-    ? (2.5 * fields?.length) / 3
-    : 0;
+  const geometryBuffer =
+    currentTheme?.radiused || !currentTheme ? (2.5 * fields?.length) / 3 : 0;
   idealSize = `calc(${idealSize} + ${geometryBuffer}rem)`;
@@ -196,18 +201,18 @@ const isMobile = window.matchMedia('(max-width: 768px)').matches;
   const dynamicWidth = `min(${idealSize}, 95vw, 95vh)`;
-  const isCentered = fields?.length <= 5;
+  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 activeStyle = style || defaultStyle;
-const modalStyles = {
-  height: dynamicHeight,
-  width: dynamicWidth,
-  margin: dynamicMargin,
-  transition: 'all 0.3s ease-out',
-  ...activeStyle
-};
+
+  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) {
@@ -390,2 +395,3 @@ title = title !== '!/' ? title : currentPreset['default-title'];
                       name: name,
+                      theme: theme,
                       style: {
@@ -397,2 +403,3 @@ fontSize: fontSize,
                       ...(id && id !== '!/' && { id: id }),
+                      ...(elementDef['is_custom'] && {animation: null}),
                       ...(elementDef['supports-placeholder'] && {
@@ -420,8 +427,10 @@ placeholder: field.placeholder[j],
                         onChange: (e) => {
-                          console.log(Tag);
-                          const value = elementDef['is_custom']
-                            ? e
-                            : field.type === 'checkbox'
-                              ? e.target.checked
-                              : e.target.value;
+                          const value =
+                            elementDef.tag === 'DyvixInput'
+                              ? e.target.value
+                              : elementDef['is_custom']
+                                ? e
+                                : field.type === 'checkbox'
+                                  ? e.target.checked
+                                  : e.target.value;
                           handleInputChange(name, value);
@@ -433,3 +442,4 @@ }
                           handleInputChange(name, e);
-                        }
+                        },
+                        ...((theme === '!/' || !theme) && {background: "transparent"} )
                       })
@@ -476,4 +486,5 @@ };
                 className="modal-btn"
-                onClick={() => handleSubmit()}
+                onClick={handleSubmit}
                 theme={theme.toLowerCase()}
+                animation={null}
               >
@@ -480,0 +491,0 @@ {currentType.submitLabel}

src/index.jsx

@@ -10,1 +10,7 @@ export { default as Modal } from './components/modal/modal';
 export { default as DyvixLabel } from './components/label/label';
+export { default as DyvixTable } from './components/table/table';
+export { default as DyvixTableBody } from './components/table/DyvixTableBody';
+export { default as DyvixTableHeader } from './components/table/DyvixTableHeader';
+export { default as DyvixTableRow } from './components/table/DyvixTableRow';
+export { default as DyvixTableCell } from './components/table/DyvixTableCell';
+export { default as DyvixTableHead } from './components/table/DyvixTableHead';

src/utils/Smart Json Caching/SJCRegistry.js

@@ -14,2 +14,4 @@ import buttonThemesJSON from '../../components/button/dependencies/themes.json?raw';
 import labelThemesCSS from '../../components/label/dependencies/style/themes.css?raw';
+import tableThemesJSON from '../../components/table/dependencies/themes.json?raw';
+import tableThemesCSS from '../../components/table/dependencies/style/themes.css?raw';
 
@@ -24,3 +26,4 @@ export const JSON_LIBRARY = {
   '../../components/input/dependencies/themes.json': inputThemesJSON,
-  '../../components/label/dependencies/themes.json': labelThemesJSON
+  '../../components/label/dependencies/themes.json': labelThemesJSON,
+  '../../components/table/dependencies/themes.json': tableThemesJSON
 };
@@ -33,3 +36,4 @@
   '../../components/input/dependencies/style/themes.css': inputThemesCSS,
-  '../../components/label/dependencies/style/themes.css': labelThemesCSS
+  '../../components/label/dependencies/style/themes.css': labelThemesCSS,
+  '../../components/table/dependencies/style/themes.css': tableThemesCSS
 };

No alert changes

Improved metrics

Total package byte prevSize

176000

9.36%

Number of package files

64

18.52%

Lines of code

5876

10.49%

Number of lines in readme file

88

1.15%

No dependency changes