@emeraldemperaur/vector-sigma 1.4.18 → 1.4.20

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

@@ -3,16 +3,77 @@ import type { ButtonProps } from '@radix-ui/themes';
 import '../../styles/main.scss';
 export type ToggleDesign = 'toggle' | 'toggle-material' | 'toggle-outline' | 'toggle-neumorphic';
 interface ToggleProps extends ButtonProps {
-    inputtype?: ToggleDesign & {};
+    /**
+       * * The required unique identifier for the Toggle input field in useFormikContext().
+       * Alias referenced as `name` attribute and Formik state key.
+       * * @example
+       * alias="numberOfRentalRooms"
+       */
     alias: string;
+    /**
+       * * The design variation of the Toggle input field.
+       * Default: 'slider-outline'
+       * Variants: 'slider', 'slider-outline', 'slider-material', 'slider-neumorphic'.
+       * * @example
+       * inputtype="slider-neumorphic"
+       */
+    inputtype?: ToggleDesign & {};
+    /**
+       * * The optional input label or description for the Toggle input field.
+       * * @example
+       * inputLabel="Enable VΣ AI Insights"
+       */
     inputLabel?: string;
+    /**
+       * * The required viewport column width for the Toggle input field.
+       * i.e. 1 - 12
+       * * @example
+       * width={5}
+       */
     width: number;
+    /**
+       * * Option to render Toggle input field on new row.
+       * * @example
+       * newRow
+       */
     newRow?: boolean;
+    /**
+       * * Option to disable edits for Toggle input field.
+       * * @example
+       * readOnly
+       */
     readOnly?: boolean;
+    /**
+         * * Option to enable a hint for Toggle input field.
+         * * @example
+         * isHinted
+         */
     isHinted?: boolean;
+    /**
+       * * Option to specify hint text for Toggle input field.
+       * * @example
+       * hintText="This is a hint for a VΣ Toggle input"
+       */
     hintText?: string;
+    /**
+       * * Option to specify a hint url reference or resource for Toggle input field.
+       * * @example
+       * hintUrl="https://www.mekaegwim.ca"
+       */
     hintUrl?: string;
+    /**
+       * * Option to specify an Icon name for Toggle input field.
+       * e.g. `sun`, `moon`
+       * Defaults to `stack` icon if `name` not provided
+       * * @example
+       * icon="star"
+       */
     icon?: string;
+    /**
+       * * Option to specify the isRequired error text for the Toggle input field.
+       * * @example
+       * errorText="A toggled selection is required"
+       */
     errorText?: ReactNode | string | null;
 }
 export declare const Toggle: ({ inputtype, alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, errorText, icon, ...props }: ToggleProps) => React.JSX.Element;

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

@@ -1,19 +1,91 @@
 import React from "react";
 import '../../styles/main.scss';
 interface TitleProps {
+    /**
+     * * The required title text for the SectionTitle component.
+     * * @example
+     * title="VΣ User Questionnaire"
+     */
     title: string;
+    /**
+     * * The required viewport column width for the Toggle input field.
+     * i.e. 1 - 12
+     * * @example
+     * width={5}
+     */
     width?: number;
+    /**
+     * * Option to render Toggle input field on new row.
+     * * @example
+     * newRow
+     */
     newRow?: boolean;
+    /**
+     * * Option to specify a title font size.
+     * * @example
+     * size="2"
+     */
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
-    subsize?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+    /**
+    * * Option to specify a subtitle text for the SectionTitle component.
+    * * @example
+    * subTitle="VΣ AI Reserch Group"
+    */
     subTitle?: string;
+    /**
+     * * Option to specify a subtitle font size.
+     * * @example
+     * subsize="1"
+     */
+    subsize?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+    /**
+     * * Option to specify a title text alignment for the SectionTitle component.
+     * Default: "left"
+     * * @example
+     * align="right"
+     */
     align?: "left" | "center" | "right";
+    /**
+    * * Option to render a bottom visual separator for the SectionTitle component.
+    * * @example
+    * withSeparator
+    */
     withSeparator?: boolean;
+    /**
+     * * Option to specify the .scss class selector for the SectionTitle component.
+     * * @example
+     * className="teletraan-1-sectiontitle"
+     */
     className?: string;
+    /**
+     * * Option to specify the background color for the SectionTitle component.
+     * * @example
+     * backgroundColor="#800020"
+     */
     backgroundColor?: string;
+    /**
+   * * Option to render SectionTitle component with icon passed as a ReactNode {}.
+   * * @example
+   * icon={<Icon name="stack"/>}
+   */
     icon?: React.ReactNode;
+    /**
+     * * Option to specify the title text color for the SectionTitle component.
+     * * @example
+     * titleColor="#ffffff"
+     */
     titleColor?: string;
+    /**
+     * * Option to specify the subtitle text color for the SectionTitle component.
+     * * @example
+     * subtitleColor="#ffffff"
+     */
     subtitleColor?: string;
+    /**
+     * * Option to specify the title and subtitle text letter spacing (em) for the SectionTitle component.
+     * * @example
+     * letterSpacing="0.13em"
+     */
     letterSpacing?: string;
 }
 export declare const SectionTitle: ({ title, width, newRow, size, subsize, subTitle, align, letterSpacing, withSeparator, className, backgroundColor, icon, titleColor, subtitleColor }: TitleProps) => React.JSX.Element;

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

@@ -0,0 +1,88 @@
+import React, { ReactNode } from 'react';
+import '../../styles/main.scss';
+export type AccordionDesign = 'material' | 'outline' | 'neumorphic';
+export interface AccordionProps {
+    /**
+     * * The design variation of the Accordion.
+     * Default: 'outline'
+     * Variants: 'outline', 'material', 'neumorphic'.
+     * * @example
+     * design="neumorphic"
+     */
+    design?: AccordionDesign;
+    /**
+     * * The sectionId of the item that should be open by default.
+     * Renders all accordion sections in closed state if undefined.
+     * * @example
+     * defaultOpenId="section-1"
+     */
+    defaultOpenId?: string;
+    /**
+     * * Option to allow multiple sections to be open at the same time.
+     * Default: false (Limits open accordion items to only one)
+     * * @example
+     * allowMultiple={true}
+     */
+    allowMultiple?: boolean;
+    /**
+     * * The required viewport column width for the Accordion component.
+     * i.e. 1 - 12
+     * * @example
+     * width={12}
+     */
+    width?: number;
+    /**
+     * * Option to render Accordion component on a new row.
+     * * @example
+     * newRow
+     */
+    newRow?: boolean;
+    /**
+     * * Option to specify the .scss class selector for the Accordion.
+     * * @example
+     * className="teletraan-1-accordion"
+     */
+    className?: string;
+    /**
+     * * Option to inject custom CSS to the Accordion wrapper.
+     * * @example
+     * style={{ margin: "20px 0" }}
+     */
+    style?: React.CSSProperties;
+    /**
+     * * The AccordionItem child components.
+     */
+    children: ReactNode;
+}
+export interface AccordionItemProps {
+    /**
+     * * The unique identifier for this specific accordion section.
+     * * @example
+     * sectionId="faq-1"
+     */
+    sectionId: string;
+    /**
+     * * The header or trigger text for this accordion section.
+     * * @example
+     * title="What is the VΣ Protocol?"
+     */
+    title: ReactNode | string;
+    /**
+     * * The content revealed when the section is opened.
+     */
+    children: ReactNode;
+    /**
+     * * Option to disable an accordion item section.
+     * * @example
+     * disabled
+     */
+    disabled?: boolean;
+    /**
+     * * Option to append a custom icon to the left of the title.
+     * * @example
+     * icon={<Icon name="info" />}
+     */
+    icon?: ReactNode;
+}
+export declare const Accordion: ({ design, defaultOpenId, allowMultiple, 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/layouts/codex/codex.d.ts

@@ -0,0 +1,88 @@
+import React, { ReactNode } from 'react';
+import '../../styles/main.scss';
+export type CodexDesign = 'material' | 'outline' | 'neumorphic';
+interface CodexContextProps {
+    activeStepId: string;
+    setActiveStepId: (id: string) => void;
+    design: CodexDesign;
+}
+export declare const useStepper: () => CodexContextProps;
+export interface CodexProps {
+    /**
+     * * The design variation of the Codex component.
+     * Default: 'outline'
+     * Variants: 'outline', 'material', 'neumorphic'.
+     * * @example
+     * design="neumorphic"
+     */
+    design?: CodexDesign;
+    /**
+     * * The sectionId of the step that should be active on render.
+     * Defaults to the first child step when undefined.
+     * * @example
+     * defaultStepId="billing-info"
+     */
+    defaultStepId?: string;
+    /**
+     * * The required viewport column width for the Codex component.
+     * i.e. 1 - 12
+     * * @example
+     * width={12}
+     */
+    width?: number;
+    /**
+     * * Option to render Codex component on a new row.
+     * * @example
+     * newRow
+     */
+    newRow?: boolean;
+    /**
+     * * Option to specify the .scss class selector for the Codex component.
+     * * @example
+     * className="teletraan-1-codex"
+     */
+    className?: string;
+    /**
+     * * Option to inject custom CSS to the Stepper wrapper.
+     * * @example
+     * style={{ margin: "20px 0" }}
+     */
+    style?: React.CSSProperties;
+    /**
+     * * The CodexItem child components.
+     */
+    children: ReactNode;
+}
+export interface CodexItemProps {
+    /**
+     * * The unique identifier for the step item.
+     * * @example
+     * stepId="step-1"
+     */
+    stepId: string;
+    /**
+     * * The display title for the step header.
+     * * @example
+     * title="Account Setup"
+     */
+    title: string;
+    /**
+     * * An optional subtitle description displayed below the title.
+     * * @example
+     * description="Enter your details"
+     */
+    subtitleDescription?: string;
+    /**
+     * * The content revealed when this step is active.
+     */
+    children: ReactNode;
+    /**
+     * * Option to provide a custom icon for the step circle.
+     * * @example
+     * icon={<Icon name="user" />}
+     */
+    icon?: ReactNode;
+}
+export declare const Codex: ({ design, defaultStepId, width, newRow, className, style, children }: CodexProps) => React.JSX.Element;
+export declare const CodexItem: ({ stepId, children, }: CodexItemProps) => React.JSX.Element | null;
+export {};

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

@@ -2,13 +2,57 @@ import React from 'react';
 import { Box } from '@radix-ui/themes';
 type ColSize = number | "auto" | boolean;
 type ColProps = React.ComponentProps<typeof Box> & {
+    /**
+       * * Option to specify a span number for the Column component.
+       * i.e. 1 - 12
+       * * @example
+       * span={6}
+       */
     span?: number;
+    /**
+       * * Option to render Column component on a line.
+       * * @example
+       * newRow
+       */
     newLine?: boolean;
+    /**
+      * * Option to enable or specify `xs` viewport column size/breakpoint.
+      * * @example
+      * xs={3}
+      */
     xs?: ColSize;
+    /**
+       * * Option to enable or specify `sm` viewport column size/breakpoint.
+       * * @example
+       * sm={4}
+       */
     sm?: ColSize;
+    /**
+       * * Option to enable or specify `md` viewport column size/breakpoint.
+       * * @example
+       * md={5}
+       */
     md?: ColSize;
+    /**
+       * * Option to enable or specify `lg` viewport column size/breakpoint.
+       * * @example
+       * lg={6}
+       */
     lg?: ColSize;
+    /**
+       * * Option to enable or specify `xl` viewport column size/breakpoint.
+       * * @example
+       * xl={6}
+       */
     xl?: ColSize;
+    /**
+     * * Required Column child components.
+     * * @example
+     * children={
+     * <Text/>
+     * ......
+     * }
+     */
     children?: React.ReactNode;
 };
 export declare const Column: ({ newLine, span, xs, sm, md, lg, xl, children, ...props }: ColProps) => React.JSX.Element;

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

@@ -1,7 +1,22 @@
 import React from 'react';
 import type { ContainerProps as RadixContainerProps } from '@radix-ui/themes';
 interface ContainerProps extends RadixContainerProps {
+    /**
+       * * Option to enable fluid container width style for the Container component.
+       * i.e. 1 - 12
+       * * @example
+       * width={5}
+       */
     fluid?: boolean;
+    /**
+      * * Required Container child components.
+      * * @example
+      * children={
+      * <Row>
+      * <Col><Col>
+      * </Row>
+      * }
+      */
     children: React.ReactNode;
 }
 export declare const Container: ({ fluid, children, ...props }: ContainerProps) => React.JSX.Element;

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

@@ -1,7 +1,27 @@
 import React from 'react';
 interface RowProps {
+    /**
+       * * Required Row child components.
+       * * @example
+       * children={
+       * <Col>
+       * <Text/>
+       * </Col>
+       * }
+       */
     children: React.ReactNode;
+    /**
+      * * Option to specify the .scss class selector for the Row component.
+      * * @example
+      * className="teletraan-1-row"
+      */
     className?: string;
+    /**
+       * * Option to specify a buffer spacing for child elements in the Row component.
+       * Default: "4"
+       * * @example
+       * gap="6"
+       */
     gap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
 }
 export declare const Row: ({ children, className, gap }: RowProps) => React.JSX.Element;

package/lib/types/teletraan1.d.ts

@@ -1 +1,4 @@
-export declare const teletraan1: (name: String) => string;
+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;

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

@@ -13,6 +13,7 @@ declare const NestedQuerySchema: z.ZodObject<{
     inputAlias: z.ZodString;
     inputLabel: z.ZodString;
     inputPlaceholder: z.ZodString;
+    defaultValue: z.ZodOptional<z.ZodAny>;
     newRow: z.ZodBoolean;
     inputWidth: z.ZodNumber;
     isRequired: z.ZodBoolean;
@@ -30,6 +31,7 @@ declare const NestedQuerySchema: z.ZodObject<{
     }, z.core.$strip>>>>;
     toggledInput: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
     toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+    errorText: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 declare const QuerySchema: z.ZodObject<{
     queryId: z.ZodUnion<[z.ZodNumber, z.ZodUUID]>;
@@ -37,6 +39,7 @@ declare const QuerySchema: z.ZodObject<{
     inputAlias: z.ZodString;
     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]>>;
@@ -61,6 +64,7 @@ declare const QuerySchema: z.ZodObject<{
         inputAlias: z.ZodString;
         inputLabel: z.ZodString;
         inputPlaceholder: z.ZodString;
+        defaultValue: z.ZodOptional<z.ZodAny>;
         newRow: z.ZodBoolean;
         inputWidth: z.ZodNumber;
         isRequired: z.ZodBoolean;
@@ -78,8 +82,10 @@ declare const QuerySchema: z.ZodObject<{
         }, z.core.$strip>>>>;
         toggledInput: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
         toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+        errorText: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
     toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+    errorText: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 declare const SectionSchema: z.ZodObject<{
     sectionId: z.ZodNumber;
@@ -91,6 +97,7 @@ declare const SectionSchema: z.ZodObject<{
         inputAlias: z.ZodString;
         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]>>;
@@ -115,6 +122,7 @@ declare const SectionSchema: z.ZodObject<{
             inputAlias: z.ZodString;
             inputLabel: z.ZodString;
             inputPlaceholder: z.ZodString;
+            defaultValue: z.ZodOptional<z.ZodAny>;
             newRow: z.ZodBoolean;
             inputWidth: z.ZodNumber;
             isRequired: z.ZodBoolean;
@@ -132,8 +140,10 @@ declare const SectionSchema: z.ZodObject<{
             }, z.core.$strip>>>>;
             toggledInput: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
             toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+            errorText: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
         toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+        errorText: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export declare const xFormSchema: z.ZodObject<{
@@ -151,6 +161,7 @@ export declare const xFormSchema: z.ZodObject<{
             inputAlias: z.ZodString;
             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]>>;
@@ -175,6 +186,7 @@ export declare const xFormSchema: z.ZodObject<{
                 inputAlias: z.ZodString;
                 inputLabel: z.ZodString;
                 inputPlaceholder: z.ZodString;
+                defaultValue: z.ZodOptional<z.ZodAny>;
                 newRow: z.ZodBoolean;
                 inputWidth: z.ZodNumber;
                 isRequired: z.ZodBoolean;
@@ -192,8 +204,10 @@ export declare const xFormSchema: z.ZodObject<{
                 }, z.core.$strip>>>>;
                 toggledInput: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
                 toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+                errorText: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>>>;
             toggleTrigger: z.ZodOptional<z.ZodNullable<z.ZodAny>>;
+            errorText: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>;
     }, z.core.$strip>>;
 }, z.core.$strip>;

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

@@ -0,0 +1,24 @@
+export declare const avatarInputType: string[];
+export declare const buttonInputType: string[];
+export declare const checkboxInputType: string[];
+export declare const datePickerInputType: string[];
+export declare const dateRangePickerInputType: string[];
+export declare const dateTimePickerInputType: string[];
+export declare const dropdownInputType: string[];
+export declare const fileInputType: string[];
+export declare const fileMultipleInputType: string[];
+export declare const imageOutputType: string[];
+export declare const textInputType: string[];
+export declare const passwordInputType: string[];
+export declare const phoneInputType: string[];
+export declare const creditCardInputType: string[];
+export declare const currencyInputType: string[];
+export declare const stockInputType: string[];
+export declare const radioInputType: string[];
+export declare const selectInputType: string[];
+export declare const selectMultipleInputType: string[];
+export declare const sliderInputType: string[];
+export declare const rangeSliderInputType: string[];
+export declare const toggleInputType: string[];
+export declare const sectionTitleOutputType: string[];
+export declare const conditionalInputType: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",
@@ -28,7 +28,12 @@
     "prepublishOnly": "npm run build",
     "release-package": "npm run build && npx changeset publish",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:fast": "jest --runInBand",
+    "test:watch": "jest --watch",
+    "test:leaks": "jest --detectOpenHandles",
+    "test:changed": "jest --onlyChanged",
+    "test:bail": "jest --bail",
+    "test:ci": "jest --maxWorkers=50% --ci"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
@@ -53,7 +58,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rollup": "^4.17.2",
-    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-delete": "^3.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-typescript2": "^0.36.0",
@@ -73,6 +78,7 @@
     "yup": "^1.7.1"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.3.0",
     "@types/react-datepicker": "^6.2.0",
@@ -81,6 +87,9 @@
     "react-imask": "^7.6.1",
     "react-phone-number-input": "^3.4.14"
   },
+  "overrides": {
+    "minimatch": "^10.2.1"
+  },
   "publishConfig": {
     "access": "public"
   }