@emeraldemperaur/vector-sigma 1.4.46 → 1.4.48

package/README.md

@@ -343,19 +343,28 @@ import { useVectorSigma } from './hooks/useVectorSigma';
 
 <li><strong>🎨Theming Extensibilty</strong></br>
 <p align="justify">Customizable to fit seamlessly into an existing design system and allow developer control of the visual layer through standard CSS patterns.</p>
+<p>Radix UI <code>theme</code> {} passed into the <code>transfrom()</code> or <code>render()</code> method(s) as an <code>options</code> attribute can be leveraged to cleverly align the returned xForm style and appearance with an extant application design system.</p>
 
 ```javascript
-import { Theme, File, Dropdown } from '@emeraldemperaur/vector-sigma';
+import React from 'react';
+import { VectorSigma } from './VectorSigma';
 
-const App = () => {
-  return (
-    
-    <Theme>
-      <File/>
-      <Dropdown/>
-    </Theme>
-  );
-}
+const xForm97 = new VectorSigma(apiJSONData);
+
+return xForm97.render({
+    displayMode: 'codex',
+    // www.radix-ui.com/themes/docs/components/theme
+    theme: {
+        appearance: 'dark',  
+        accentColor: 'yellow',     
+        grayColor: 'slate',        
+        radius: 'none',            
+        scaling: '100%'            
+    },
+    onSubmit: async (values, actions, instance) => {
+        console.log(values);
+    }
+});
 ```
 </li>
 

package/lib/index.cjs

@@ -32044,30 +32044,30 @@ const getStyles = (design, layout) => {
             border: '1px solid var(--gray-6)',
         };
     }
-    return Object.assign(Object.assign({ borderRadius }, visualStyles), { position: 'relative', overflow: 'hidden', display: 'block' });
+    return Object.assign(Object.assign({ borderRadius }, visualStyles), { overflow: 'hidden', display: 'block' });
 };
-const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio = 16 / 9, height, width = '100%', className, style, onClick, }) => {
+const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio, height, width = '100%', className, style, onClick, }) => {
     const containerStyles = getStyles(design, layout);
     const iconColor = design === 'neumorphic' ? '#555' : 'var(--gray-9)';
-    const content = (React.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
-            width: '333px',
-            height: '333px',
-            objectFit: 'cover',
+    const content = (React.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width: '100%', maxWidth: 500, maxHeight: 500, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
+            width: '100%',
+            maxHeight: 500,
+            height: height ? '100%' : 'auto',
+            objectFit: 'contain',
             display: 'block',
         } })) : (React.createElement(p$5, { align: "center", justify: "center", style: {
             width: '100%',
-            height: '100%',
+            height: height || '150px',
             backgroundColor: design === 'neumorphic' ? 'transparent' : 'var(--gray-3)',
-            minHeight: height || '100%',
         } },
         React.createElement(p$5, { direction: "column", align: "center", gap: "2" },
             React.createElement(Icon, { name: 'image', width: "32", height: "32", color: iconColor, style: { opacity: 0.5 } }),
             React.createElement(p$d, { size: "1", color: "gray" }, "No Image"))))));
-    if (height) {
-        return content;
+    if (aspectratio && !height) {
+        return (React.createElement(p$8, { style: { width, maxWidth: 500 } },
+            React.createElement(i$9, { ratio: aspectratio }, content)));
     }
-    return (React.createElement(p$8, { style: { width } },
-        React.createElement(i$9, { ratio: aspectratio }, content)));
+    return (React.createElement(p$8, { style: { width, maxWidth: 500 } }, content));
 };
 
 const Input$1 = (_a) => {
@@ -57273,7 +57273,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case 'codex':
                 return (React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                    React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
+                    React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: () => onFinish }))))));
             case 'codice':
             default:
                 return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
@@ -57587,7 +57587,8 @@ class VectorSigma {
         const sanitizedData = normalizeXForm(this.formObject);
         const { initialValues, validationSchema } = this.buildFormikConfig(sanitizedData);
         const isCodexMode = (options === null || options === void 0 ? void 0 : options.displayMode) === 'codex';
-        return (React.createElement(R, null,
+        const themeConfig = Object.assign({ appearance: 'inherit', accentColor: 'blue', radius: 'medium' }, options === null || options === void 0 ? void 0 : options.theme);
+        return (React.createElement(R, Object.assign({}, themeConfig),
             React.createElement(formik.Formik, { initialValues: initialValues, validationSchema: validationSchema, onSubmit: (values, actions) => __awaiter(this, void 0, void 0, function* () {
                     try {
                         this.statusCode = 2;
@@ -57598,7 +57599,7 @@ class VectorSigma {
                             yield options.onSubmit(values, actions, this);
                         }
                         if (options === null || options === void 0 ? void 0 : options.onFinish) {
-                            options.onFinish();
+                            options.onFinish(values, actions, this);
                         }
                     }
                     catch (error) {

package/lib/index.esm.js

@@ -32023,30 +32023,30 @@ const getStyles = (design, layout) => {
             border: '1px solid var(--gray-6)',
         };
     }
-    return Object.assign(Object.assign({ borderRadius }, visualStyles), { position: 'relative', overflow: 'hidden', display: 'block' });
+    return Object.assign(Object.assign({ borderRadius }, visualStyles), { overflow: 'hidden', display: 'block' });
 };
-const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio = 16 / 9, height, width = '100%', className, style, onClick, }) => {
+const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio, height, width = '100%', className, style, onClick, }) => {
     const containerStyles = getStyles(design, layout);
     const iconColor = design === 'neumorphic' ? '#555' : 'var(--gray-9)';
-    const content = (React__default.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
-            width: '333px',
-            height: '333px',
-            objectFit: 'cover',
+    const content = (React__default.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width: '100%', maxWidth: 500, maxHeight: 500, height: height || 'auto' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
+            width: '100%',
+            maxHeight: 500,
+            height: height ? '100%' : 'auto',
+            objectFit: 'contain',
             display: 'block',
         } })) : (React__default.createElement(p$5, { align: "center", justify: "center", style: {
             width: '100%',
-            height: '100%',
+            height: height || '150px',
             backgroundColor: design === 'neumorphic' ? 'transparent' : 'var(--gray-3)',
-            minHeight: height || '100%',
         } },
         React__default.createElement(p$5, { direction: "column", align: "center", gap: "2" },
             React__default.createElement(Icon, { name: 'image', width: "32", height: "32", color: iconColor, style: { opacity: 0.5 } }),
             React__default.createElement(p$d, { size: "1", color: "gray" }, "No Image"))))));
-    if (height) {
-        return content;
+    if (aspectratio && !height) {
+        return (React__default.createElement(p$8, { style: { width, maxWidth: 500 } },
+            React__default.createElement(i$9, { ratio: aspectratio }, content)));
     }
-    return (React__default.createElement(p$8, { style: { width } },
-        React__default.createElement(i$9, { ratio: aspectratio }, content)));
+    return (React__default.createElement(p$8, { style: { width, maxWidth: 500 } }, content));
 };
 
 const Input$1 = (_a) => {
@@ -57252,7 +57252,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case 'codex':
                 return (React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, subtitleDescription: formsection.subtitle ? formsection.subtitle : undefined, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                    React__default.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
+                    React__default.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: () => onFinish }))))));
             case 'codice':
             default:
                 return (React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
@@ -57566,7 +57566,8 @@ class VectorSigma {
         const sanitizedData = normalizeXForm(this.formObject);
         const { initialValues, validationSchema } = this.buildFormikConfig(sanitizedData);
         const isCodexMode = (options === null || options === void 0 ? void 0 : options.displayMode) === 'codex';
-        return (React__default.createElement(R, null,
+        const themeConfig = Object.assign({ appearance: 'inherit', accentColor: 'blue', radius: 'medium' }, options === null || options === void 0 ? void 0 : options.theme);
+        return (React__default.createElement(R, Object.assign({}, themeConfig),
             React__default.createElement(Formik, { initialValues: initialValues, validationSchema: validationSchema, onSubmit: (values, actions) => __awaiter(this, void 0, void 0, function* () {
                     try {
                         this.statusCode = 2;
@@ -57577,7 +57578,7 @@ class VectorSigma {
                             yield options.onSubmit(values, actions, this);
                         }
                         if (options === null || options === void 0 ? void 0 : options.onFinish) {
-                            options.onFinish();
+                            options.onFinish(values, actions, this);
                         }
                     }
                     catch (error) {

package/lib/types/components/image/image.d.ts

@@ -38,8 +38,6 @@ export interface ImageDisplayProps {
     layout?: ImageLayout & {};
     /**
     * * The aspect ratio of the ImageOutput component.
-    * Default: 16 / 9
-    * Variants: 16 / 9, 4 / 3, 1.
     * * @example
     * aspectratio={ 16 / 9 || 4 / 3 }
     */

package/lib/types/teletraan1.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { XFormType } from 'utils/voltron';
+import { FormikHelpers } from 'formik';
+import { VectorSigma } from 'vectorSigma';
 export type teletraan1Display = 'accordion' | 'codice' | 'codex' | 'dual';
 export interface Teletraan1Props {
     /**
@@ -49,6 +51,6 @@ export interface Teletraan1Props {
      * * @example
      * onFinish={console.log("Teletraan-1 Codex :: onFinish()")}
      */
-    onFinish?: () => void;
+    onFinish?: (values: any, actions: FormikHelpers<any>, instance: VectorSigma<any>) => void | Promise<any>;
 }
 export declare const Teletraan1: ({ xFormModel, readOnlyMode, displayMode, brandColor, onPrev, onNext, onFinish }: Teletraan1Props) => React.JSX.Element;

package/lib/types/tests/builds/orion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/tests/builds/pax.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/tests/components/components.countryselect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/vectorSigma.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { XFormType, XFormQuery, SectionSchema } from './utils/voltron';
 import { Teletraan1Props } from './teletraan1';
 import { z } from "zod";
+import { ThemeProps } from '@radix-ui/themes';
 import { FormikHelpers } from 'formik';
 import './styles/main.scss';
 export interface VectorSigmaRenderProps<T extends Record<string, any> = Record<string, any>> extends Omit<Teletraan1Props, 'xFormModel'> {
@@ -20,6 +21,15 @@ export interface VectorSigmaRenderProps<T extends Record<string, any> = Record<s
     }}
      */
     onSubmit?: (values: T, actions: FormikHelpers<T>, instance: VectorSigma<T>) => void | Promise<any>;
+    /**
+     * * Optional Radix UI Theme configuration.
+     * Enables developer theming extensibility to align xForm appearance with an extant application design system.
+     *
+     * https://www.radix-ui.com/themes/docs/components/theme
+     * @example
+     * theme={{ appearance: 'dark', accentColor: 'ruby', radius: 'large' }}
+     */
+    theme?: Omit<ThemeProps, 'children'>;
 }
 export declare class VectorSigma<T extends Record<string, any> = Record<string, any>> {
     isValid: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.4.46",
+  "version": "1.4.48",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",