@emeraldemperaur/vector-sigma 1.4.21 → 1.4.22

package/lib/index.cjs

@@ -48800,6 +48800,40 @@ const CodexItem = ({ stepId, children, }) => {
     return (React.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
 };
 
+const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onNext, onPrev, onFinish }) => {
+    const { setActiveStepId } = useStepper();
+    const handlePrev = () => {
+        if (onPrev)
+            onPrev();
+        if (prevStepId)
+            setActiveStepId(prevStepId);
+    };
+    const handleNext = () => {
+        if (nextStepId) {
+            if (onNext)
+                onNext();
+            setActiveStepId(nextStepId);
+        }
+        else {
+            if (onFinish)
+                onFinish();
+        }
+    };
+    return (React.createElement(p$5, { gap: "3", mt: "6", justify: "between", align: "center", style: { borderTop: '1px solid var(--gray-5)', paddingTop: '20px', width: '100%' } },
+        prevStepId ? (React.createElement(o$a, { variant: "soft", color: "gray", onClick: handlePrev, style: { cursor: 'pointer' } },
+            prevIcon ? React.createElement(React.Fragment, null,
+                React.createElement(Icon, { name: prevIcon }),
+                "\u00A0") : null,
+            prevLabel)) : (React.createElement("div", null)),
+        React.createElement(o$a, { variant: "solid", color: nextStepId ? "blue" : "green", onClick: handleNext, style: { cursor: 'pointer' } },
+            nextStepId && nextIcon ? React.createElement(React.Fragment, null,
+                React.createElement(Icon, { name: nextIcon }),
+                "\u00A0") : React.createElement(React.Fragment, null,
+                React.createElement(Icon, { name: finishIcon }),
+                "\u00A0"),
+            nextStepId ? nextLabel : finishLabel)));
+};
+
 /** A special constant with type `never` */
 function $constructor(name, initializer, params) {
     function init(inst, def) {
@@ -53322,6 +53356,7 @@ exports.ButtonInput = ButtonInput;
 exports.CURRENCIES = CURRENCIES;
 exports.CheckboxGroupInput = CheckboxGroupInput;
 exports.Codex = Codex;
+exports.CodexControls = CodexControls;
 exports.CodexItem = CodexItem;
 exports.Column = Column;
 exports.ConditionalTrigger = ConditionalTrigger;

package/lib/index.esm.js

@@ -48780,6 +48780,40 @@ const CodexItem = ({ stepId, children, }) => {
     return (React__default.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
 };
 
+const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onNext, onPrev, onFinish }) => {
+    const { setActiveStepId } = useStepper();
+    const handlePrev = () => {
+        if (onPrev)
+            onPrev();
+        if (prevStepId)
+            setActiveStepId(prevStepId);
+    };
+    const handleNext = () => {
+        if (nextStepId) {
+            if (onNext)
+                onNext();
+            setActiveStepId(nextStepId);
+        }
+        else {
+            if (onFinish)
+                onFinish();
+        }
+    };
+    return (React__default.createElement(p$5, { gap: "3", mt: "6", justify: "between", align: "center", style: { borderTop: '1px solid var(--gray-5)', paddingTop: '20px', width: '100%' } },
+        prevStepId ? (React__default.createElement(o$a, { variant: "soft", color: "gray", onClick: handlePrev, style: { cursor: 'pointer' } },
+            prevIcon ? React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Icon, { name: prevIcon }),
+                "\u00A0") : null,
+            prevLabel)) : (React__default.createElement("div", null)),
+        React__default.createElement(o$a, { variant: "solid", color: nextStepId ? "blue" : "green", onClick: handleNext, style: { cursor: 'pointer' } },
+            nextStepId && nextIcon ? React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Icon, { name: nextIcon }),
+                "\u00A0") : React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Icon, { name: finishIcon }),
+                "\u00A0"),
+            nextStepId ? nextLabel : finishLabel)));
+};
+
 /** A special constant with type `never` */
 function $constructor(name, initializer, params) {
     function init(inst, def) {
@@ -53295,4 +53329,4 @@ const parseUuidFormat = (input) => {
     return numbers;
 };
 
-export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, useStepper, vectorSigma, xFormSchema };
+export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, useStepper, vectorSigma, xFormSchema };

package/lib/types/index.d.ts

@@ -33,6 +33,7 @@ export * from './layouts/column/column';
 export * from './layouts/row/row';
 export * from './layouts/accordion/accordion';
 export * from './layouts/codex/codex';
+export * from './layouts/codex/codexcontrols';
 export * from './utils/architect';
 export * from './utils/uuidparser';
 export * from './utils/currencyconfig';

package/lib/types/layouts/codex/codexcontrols.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import '../../styles/main.scss';
+export interface CodexControlsProps {
+    /**
+     * * The ID of the step to navigate to when 'Next' is clicked.
+     * If omitted, the primary button becomes a 'Finish' button.
+     * * @example
+     * nextStepId="step-3"
+     */
+    nextStepId?: string;
+    /**
+     * * The ID of the step to navigate to when 'Back' is clicked.
+     * If omitted, the 'Back' button is hidden.
+     * * @example
+     * prevStepId="step-1"
+     */
+    prevStepId?: string;
+    /**
+     * * Custom text for the Next button.
+     * Default: "Continue"
+     */
+    nextLabel?: string;
+    /**
+    * * Custom icon for the Next button.
+    * Default: "Continue"
+    */
+    nextIcon?: string;
+    /**
+     * * Custom text for the Previous button.
+     * Default: "Back"
+     */
+    prevLabel?: string;
+    /**
+     * * Custom icon name for the Previous button.
+     * Default: "Back"
+     */
+    prevIcon?: string;
+    /**
+     * * Custom text for the Finish button (rendered when nextStepId undefined).
+     * Default: "Complete Setup"
+     */
+    finishLabel?: string;
+    /**
+     * * Custom icon name for the Finish button (rendered when no nextStepId undefined).
+     * Default: "flag"
+     */
+    finishIcon?: string;
+    /**
+     * * Optional callback triggered before navigating to the next step.
+     * Useful for triggering form validation.
+     */
+    onNext?: () => void;
+    /**
+     * * Optional callback triggered before navigating to the previous step.
+     */
+    onPrev?: () => void;
+    /**
+     * * Optional callback triggered when the Finish button is clicked.
+     */
+    onFinish?: () => void;
+}
+export declare const CodexControls: ({ nextStepId, prevStepId, nextLabel, prevLabel, finishLabel, prevIcon, nextIcon, finishIcon, onNext, onPrev, onFinish }: CodexControlsProps) => React.JSX.Element;

package/package.json

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