@emeraldemperaur/vector-sigma 1.4.24 → 1.4.26

package/README.md

@@ -96,7 +96,7 @@ const App = () => {
 
 <li><strong>🧩Exported UI Components</strong></br>
 <p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library.</p>
-<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle</em></p>
+<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan-1 (Render Matrix)</em></p>
 
 ```javascript
 import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } 

package/lib/index.cjs

@@ -12741,6 +12741,8 @@ const formatBytes = (bytes, decimals = 2) => {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
+({
+    optionid: crypto.randomUUID()});
 
 const ButtonInput = (_a) => {
     var { inputtype = 'button-outline', type = 'button', alias, readOnly, style, width, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "type", "alias", "readOnly", "style", "width", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
@@ -48522,7 +48524,7 @@ const Row = ({ children, className, gap = "4" }) => {
 };
 
 const AccordionContext = React.createContext({ design: 'outline' });
-const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, width = 12, newRow, className, style, children }) => {
+const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, titleColor, width = 12, newRow, className, style, children }) => {
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     React.useEffect(() => {
@@ -48540,9 +48542,9 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
         children
     };
     const accordionRoot = allowMultiple ? (React.createElement(Root2$4, Object.assign({ type: "multiple", defaultValue: defaultOpenId ? [defaultOpenId] : undefined }, sharedProps))) : (React.createElement(Root2$4, Object.assign({ type: "single", defaultValue: defaultOpenId || undefined, collapsible: true }, sharedProps)));
-    return (React.createElement(AccordionContext.Provider, { value: { design, brandcolor } },
+    return (React.createElement(AccordionContext.Provider, { value: { design, brandcolor, titleColor } },
         React.createElement(Column, { span: width, newLine: newRow },
-            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
+            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})), (titleColor ? { '--accordion-title-color': titleColor } : {})) },
                 React.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         @keyframes slideDown {
                             from { height: 0; opacity: 0; }
@@ -48565,14 +48567,15 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                         }
                         .v-accordion-chevron {
                             transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
-                            color: var(--gray-10);
+                            /* Inherit custom title color if provided, else fallback to gray */
+                            color: var(--accordion-title-color, var(--gray-10));
                         }
 
                         .v-accordion-root-outline {
                             border: 1px solid var(--gray-6);
                             border-radius: var(--radius-3);
                             background-color: transparent;
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-outline {
                             border-bottom: 1px solid var(--gray-6);
@@ -48585,7 +48588,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             border-radius: var(--radius-3);
                             background-color: var(--color-surface);
                             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-material {
                             border-bottom: 1px solid var(--gray-4);
@@ -48607,7 +48610,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             border-radius: 12px;
                             box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
                             transition: all 0.3s ease;
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-neumorphic[data-state='open'] {
                             box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
@@ -48623,7 +48626,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             cursor: pointer;
                             font-family: var(--default-font-family);
                             box-sizing: border-box;
-                            background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
+                            background-color: var(--accordion-header-bg, transparent); 
                         }
                         .v-accordion-trigger:disabled {
                             cursor: not-allowed;
@@ -48638,8 +48641,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
         React.createElement(Header, { style: { margin: 0 } },
             React.createElement(Trigger2, { className: "v-accordion-trigger" },
                 React.createElement(p$5, { align: "center", gap: "3" },
-                    icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
-                    React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--gray-12)' } }, title)),
+                    icon && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
+                    React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
                 React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
             React.createElement("div", { style: { padding: '0 16px 16px 16px' } },
@@ -53302,8 +53305,12 @@ const NestedQuerySchema = object({
     inputLabel: string(),
     inputPlaceholder: string(),
     defaultValue: any().optional(),
+    minValue: number().optional(),
+    maxValue: number().optional(),
+    stepValue: number().or(float64()).optional(),
     newRow: boolean(),
     inputWidth: number(),
+    inputHeight: number().optional(),
     isRequired: boolean(),
     isHinted: boolean(),
     hintText: string().nullish(),
@@ -53326,6 +53333,7 @@ const QuerySchema = object({
     stepValue: number().or(float64()).optional(),
     newRow: boolean(),
     inputWidth: number(),
+    inputHeight: number().optional(),
     isRequired: boolean(),
     isHinted: boolean(),
     hintText: string().nullable(),
@@ -53346,6 +53354,7 @@ const xFormSchema = object({
     uuid: uuid(),
     name: string(),
     logo: string().nullable(),
+    brandcolor: string().nullable(),
     logoPosition: string().nullable(),
     model: array(SectionSchema),
 });

package/lib/index.esm.js

@@ -12721,6 +12721,8 @@ const formatBytes = (bytes, decimals = 2) => {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
+({
+    optionid: crypto.randomUUID()});
 
 const ButtonInput = (_a) => {
     var { inputtype = 'button-outline', type = 'button', alias, readOnly, style, width, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "type", "alias", "readOnly", "style", "width", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
@@ -48502,7 +48504,7 @@ const Row = ({ children, className, gap = "4" }) => {
 };
 
 const AccordionContext = createContext({ design: 'outline' });
-const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, width = 12, newRow, className, style, children }) => {
+const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = false, brandcolor, titleColor, width = 12, newRow, className, style, children }) => {
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     useEffect(() => {
@@ -48520,9 +48522,9 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
         children
     };
     const accordionRoot = allowMultiple ? (React__default.createElement(Root2$4, Object.assign({ type: "multiple", defaultValue: defaultOpenId ? [defaultOpenId] : undefined }, sharedProps))) : (React__default.createElement(Root2$4, Object.assign({ type: "single", defaultValue: defaultOpenId || undefined, collapsible: true }, sharedProps)));
-    return (React__default.createElement(AccordionContext.Provider, { value: { design, brandcolor } },
+    return (React__default.createElement(AccordionContext.Provider, { value: { design, brandcolor, titleColor } },
         React__default.createElement(Column, { span: width, newLine: newRow },
-            React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})) },
+            React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), (brandcolor ? { '--accordion-header-bg': brandcolor } : {})), (titleColor ? { '--accordion-title-color': titleColor } : {})) },
                 React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         @keyframes slideDown {
                             from { height: 0; opacity: 0; }
@@ -48545,14 +48547,15 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                         }
                         .v-accordion-chevron {
                             transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
-                            color: var(--gray-10);
+                            /* Inherit custom title color if provided, else fallback to gray */
+                            color: var(--accordion-title-color, var(--gray-10));
                         }
 
                         .v-accordion-root-outline {
                             border: 1px solid var(--gray-6);
                             border-radius: var(--radius-3);
                             background-color: transparent;
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-outline {
                             border-bottom: 1px solid var(--gray-6);
@@ -48565,7 +48568,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             border-radius: var(--radius-3);
                             background-color: var(--color-surface);
                             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-material {
                             border-bottom: 1px solid var(--gray-4);
@@ -48587,7 +48590,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             border-radius: 12px;
                             box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
                             transition: all 0.3s ease;
-                            overflow: hidden; /* Clips the background color to the rounded corners */
+                            overflow: hidden; 
                         }
                         .v-accordion-item-neumorphic[data-state='open'] {
                             box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
@@ -48603,7 +48606,7 @@ const Accordion = ({ design = 'outline', defaultOpenId = "", allowMultiple = fal
                             cursor: pointer;
                             font-family: var(--default-font-family);
                             box-sizing: border-box;
-                            background-color: var(--accordion-header-bg, transparent); /* Applies the custom color */
+                            background-color: var(--accordion-header-bg, transparent); 
                         }
                         .v-accordion-trigger:disabled {
                             cursor: not-allowed;
@@ -48618,8 +48621,8 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
         React__default.createElement(Header, { style: { margin: 0 } },
             React__default.createElement(Trigger2, { className: "v-accordion-trigger" },
                 React__default.createElement(p$5, { align: "center", gap: "3" },
-                    icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accent-9)' } }, icon)),
-                    React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--gray-12)' } }, title)),
+                    icon && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', color: 'var(--accordion-title-color, var(--accent-9))' } }, icon)),
+                    React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
                 React__default.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React__default.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
             React__default.createElement("div", { style: { padding: '0 16px 16px 16px' } },
@@ -53282,8 +53285,12 @@ const NestedQuerySchema = object({
     inputLabel: string(),
     inputPlaceholder: string(),
     defaultValue: any().optional(),
+    minValue: number().optional(),
+    maxValue: number().optional(),
+    stepValue: number().or(float64()).optional(),
     newRow: boolean(),
     inputWidth: number(),
+    inputHeight: number().optional(),
     isRequired: boolean(),
     isHinted: boolean(),
     hintText: string().nullish(),
@@ -53306,6 +53313,7 @@ const QuerySchema = object({
     stepValue: number().or(float64()).optional(),
     newRow: boolean(),
     inputWidth: number(),
+    inputHeight: number().optional(),
     isRequired: boolean(),
     isHinted: boolean(),
     hintText: string().nullable(),
@@ -53326,6 +53334,7 @@ const xFormSchema = object({
     uuid: uuid(),
     name: string(),
     logo: string().nullable(),
+    brandcolor: string().nullable(),
     logoPosition: string().nullable(),
     model: array(SectionSchema),
 });

package/lib/types/layouts/accordion/accordion.d.ts

@@ -31,6 +31,13 @@ export interface AccordionProps {
      * brandcolor="var(--accent-3)"
      */
     brandcolor?: string;
+    /**
+     * * Option to specify the text and icon color of the AccordionItem headers.
+     * Useful when using a dark brandcolor to ensure legibility.
+     * * @example
+     * titleColor="#ffffff"
+     */
+    titleColor?: string;
     /**
      * * The required viewport column width for the Accordion component.
      * i.e. 1 - 12
@@ -91,5 +98,5 @@ export interface AccordionItemProps {
      */
     icon?: ReactNode;
 }
-export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ({ design, defaultOpenId, allowMultiple, brandcolor, titleColor, width, newRow, className, style, children }: AccordionProps) => React.JSX.Element;
 export declare const AccordionItem: ({ sectionId, title, children, disabled, icon }: AccordionItemProps) => React.JSX.Element;

package/lib/types/teletraan1.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { xForm } from 'utils/architect';
 export type teletraan1Display = 'accordion' | 'codice' | 'codex' | 'dual';
-export declare const teletraan1: (xFormModel: xForm, readOnlyMode: boolean, displayMode: teletraan1Display) => React.JSX.Element;
+export declare const teletraan1: (xFormModel: xForm, readOnlyMode: boolean, displayMode: teletraan1Display, brandColor?: string) => React.JSX.Element;

package/lib/types/utils/architect.d.ts

@@ -14,8 +14,12 @@ declare const NestedQuerySchema: z.ZodObject<{
     inputLabel: z.ZodString;
     inputPlaceholder: z.ZodString;
     defaultValue: z.ZodOptional<z.ZodAny>;
+    minValue: z.ZodOptional<z.ZodNumber>;
+    maxValue: z.ZodOptional<z.ZodNumber>;
+    stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
     newRow: z.ZodBoolean;
     inputWidth: z.ZodNumber;
+    inputHeight: z.ZodOptional<z.ZodNumber>;
     isRequired: z.ZodBoolean;
     isHinted: z.ZodBoolean;
     hintText: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -45,6 +49,7 @@ declare const QuerySchema: z.ZodObject<{
     stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
     newRow: z.ZodBoolean;
     inputWidth: z.ZodNumber;
+    inputHeight: z.ZodOptional<z.ZodNumber>;
     isRequired: z.ZodBoolean;
     isHinted: z.ZodBoolean;
     hintText: z.ZodNullable<z.ZodString>;
@@ -65,8 +70,12 @@ declare const QuerySchema: z.ZodObject<{
         inputLabel: z.ZodString;
         inputPlaceholder: z.ZodString;
         defaultValue: z.ZodOptional<z.ZodAny>;
+        minValue: z.ZodOptional<z.ZodNumber>;
+        maxValue: z.ZodOptional<z.ZodNumber>;
+        stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
         newRow: z.ZodBoolean;
         inputWidth: z.ZodNumber;
+        inputHeight: z.ZodOptional<z.ZodNumber>;
         isRequired: z.ZodBoolean;
         isHinted: z.ZodBoolean;
         hintText: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -103,6 +112,7 @@ declare const SectionSchema: z.ZodObject<{
         stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
         newRow: z.ZodBoolean;
         inputWidth: z.ZodNumber;
+        inputHeight: z.ZodOptional<z.ZodNumber>;
         isRequired: z.ZodBoolean;
         isHinted: z.ZodBoolean;
         hintText: z.ZodNullable<z.ZodString>;
@@ -123,8 +133,12 @@ declare const SectionSchema: z.ZodObject<{
             inputLabel: z.ZodString;
             inputPlaceholder: z.ZodString;
             defaultValue: z.ZodOptional<z.ZodAny>;
+            minValue: z.ZodOptional<z.ZodNumber>;
+            maxValue: z.ZodOptional<z.ZodNumber>;
+            stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
             newRow: z.ZodBoolean;
             inputWidth: z.ZodNumber;
+            inputHeight: z.ZodOptional<z.ZodNumber>;
             isRequired: z.ZodBoolean;
             isHinted: z.ZodBoolean;
             hintText: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -150,6 +164,7 @@ export declare const xFormSchema: z.ZodObject<{
     uuid: z.ZodUUID;
     name: z.ZodString;
     logo: z.ZodNullable<z.ZodString>;
+    brandcolor: z.ZodNullable<z.ZodString>;
     logoPosition: z.ZodNullable<z.ZodString>;
     model: z.ZodArray<z.ZodObject<{
         sectionId: z.ZodNumber;
@@ -167,6 +182,7 @@ export declare const xFormSchema: z.ZodObject<{
             stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
             newRow: z.ZodBoolean;
             inputWidth: z.ZodNumber;
+            inputHeight: z.ZodOptional<z.ZodNumber>;
             isRequired: z.ZodBoolean;
             isHinted: z.ZodBoolean;
             hintText: z.ZodNullable<z.ZodString>;
@@ -187,8 +203,12 @@ export declare const xFormSchema: z.ZodObject<{
                 inputLabel: z.ZodString;
                 inputPlaceholder: z.ZodString;
                 defaultValue: z.ZodOptional<z.ZodAny>;
+                minValue: z.ZodOptional<z.ZodNumber>;
+                maxValue: z.ZodOptional<z.ZodNumber>;
+                stepValue: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodFloat64]>>;
                 newRow: z.ZodBoolean;
                 inputWidth: z.ZodNumber;
+                inputHeight: z.ZodOptional<z.ZodNumber>;
                 isRequired: z.ZodBoolean;
                 isHinted: z.ZodBoolean;
                 hintText: z.ZodOptional<z.ZodNullable<z.ZodString>>;

package/lib/types/utils/vinci.d.ts

@@ -53,3 +53,12 @@ export interface InputOption {
     */
     optionurl?: string;
 }
+export declare const InputOptionsPlaceholder: {
+    optionid: `${string}-${string}-${string}-${string}-${string}`;
+    text: string;
+    optionvalue: string;
+    tag: string;
+    score: number;
+    note: string;
+    optionurl: string;
+};

package/package.json

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