@emeraldemperaur/vector-sigma 1.4.22 → 1.4.23

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, Codex, 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</em></p>
 
 ```javascript
 import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider } 

package/lib/index.cjs

@@ -48649,7 +48649,7 @@ const CodexContext = React.createContext({
     design: 'outline'
 });
 const useStepper = () => React.useContext(CodexContext);
-const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, className, style, children }) => {
+const Codex = ({ design = 'outline', defaultStepId, brandColor, width = 12, newRow, className, style, children }) => {
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const steps = React.Children.toArray(children)
@@ -48680,9 +48680,9 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
         }
     }, [design]);
     const activeIndex = steps.findIndex(s => s.id === activeStepId);
-    return (React.createElement(CodexContext.Provider, { value: { activeStepId, setActiveStepId, design } },
+    return (React.createElement(CodexContext.Provider, { value: { activeStepId, setActiveStepId, design, brandColor } },
         React.createElement(Column, { span: width, newLine: newRow },
-            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
+            React.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), { '--codex-brand': brandColor || 'var(--accent-9)' }) },
                 React.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         .v-step-circle {
                             width: 40px;
@@ -48710,42 +48710,45 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                             to { opacity: 1; transform: translateY(0); }
                         }
 
+                        /* --- OUTLINE --- */
                         .v-stepper-outline .v-step-circle.pending {
                             border: 2px solid var(--gray-6);
                             background: transparent;
                             color: var(--gray-10);
                         }
                         .v-stepper-outline .v-step-circle.active {
-                            border: 2px solid var(--accent-9);
+                            border: 2px solid var(--codex-brand);
                             background: var(--accent-2);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-outline .v-step-circle.completed {
-                            border: 2px solid var(--accent-9);
-                            background: var(--accent-9);
+                            border: 2px solid var(--codex-brand);
+                            background: var(--codex-brand);
                             color: white;
                         }
                         .v-stepper-outline .v-step-line.pending { background-color: var(--gray-5); }
-                        .v-stepper-outline .v-step-line.completed { background-color: var(--accent-9); }
+                        .v-stepper-outline .v-step-line.completed { background-color: var(--codex-brand); }
 
+                        /* --- MATERIAL --- */
                         .v-stepper-material .v-step-circle.pending {
                             background: var(--color-surface);
                             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                             color: var(--gray-10);
                         }
                         .v-stepper-material .v-step-circle.active {
-                            background: var(--accent-9);
+                            background: var(--codex-brand);
                             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                             color: white;
                             transform: scale(1.1);
                         }
                         .v-stepper-material .v-step-circle.completed {
-                            background: var(--accent-9);
+                            background: var(--codex-brand);
                             color: white;
                         }
                         .v-stepper-material .v-step-line.pending { background-color: var(--gray-5); }
-                        .v-stepper-material .v-step-line.completed { background-color: var(--accent-9); }
+                        .v-stepper-material .v-step-line.completed { background-color: var(--codex-brand); }
 
+                        /* --- NEUMORPHIC --- */
                         .v-stepper-neumorphic .v-step-circle {
                             background: var(--neu-bg);
                             border: none;
@@ -48756,19 +48759,19 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                         }
                         .v-stepper-neumorphic .v-step-circle.active {
                             box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-neumorphic .v-step-circle.completed {
                             box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-neumorphic .v-step-line.pending {
                             background-color: transparent;
                             box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
                         }
                         .v-stepper-neumorphic .v-step-line.completed {
-                            background-color: var(--accent-9);
-                            box-shadow: 0 0 4px var(--accent-9);
+                            background-color: var(--codex-brand);
+                            box-shadow: 0 0 4px var(--codex-brand);
                         }
                     ` } }),
                 React.createElement(p$8, { className: `v-stepper-${design}`, style: { paddingBottom: '60px', paddingTop: '10px' } },
@@ -48776,6 +48779,8 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                         const isCompleted = index < activeIndex;
                         const isActive = index === activeIndex;
                         const statusClass = isActive ? 'active' : isCompleted ? 'completed' : 'pending';
+                        const isFirst = index === 0;
+                        const isLast = index === steps.length - 1;
                         return (React.createElement(React.Fragment, { key: step.id },
                             React.createElement(p$8, { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                                 React.createElement("div", { className: `v-step-circle ${statusClass}`, onClick: () => setActiveStepId(step.id) }, isCompleted ? (React.createElement(Icon, { name: "check", width: "20", height: "20" })) : (step.icon ? step.icon : React.createElement("span", null, index + 1))),
@@ -48784,8 +48789,11 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                                         top: '100%',
                                         marginTop: '12px',
                                         width: '120px',
-                                        textAlign: 'center',
-                                        cursor: 'pointer'
+                                        cursor: 'pointer',
+                                        left: isFirst ? '0' : isLast ? 'auto' : '50%',
+                                        right: isLast ? '0' : 'auto',
+                                        transform: (!isFirst && !isLast) ? 'translateX(-50%)' : 'none',
+                                        textAlign: isFirst ? 'left' : isLast ? 'right' : 'center',
                                     }, onClick: () => setActiveStepId(step.id) },
                                     React.createElement(p$d, { size: "2", weight: isActive ? "bold" : "regular", style: { color: isActive ? 'var(--gray-12)' : 'var(--gray-10)', display: 'block', lineHeight: 1.2 } }, step.title),
                                     step.description && (React.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
@@ -48801,7 +48809,7 @@ const CodexItem = ({ stepId, children, }) => {
 };
 
 const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onNext, onPrev, onFinish }) => {
-    const { setActiveStepId } = useStepper();
+    const { setActiveStepId, brandColor } = useStepper();
     const handlePrev = () => {
         if (onPrev)
             onPrev();
@@ -48821,17 +48829,19 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
     };
     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,
+            prevIcon && (React.createElement(React.Fragment, null,
                 React.createElement(Icon, { name: prevIcon }),
-                "\u00A0") : null,
+                "\u00A0")),
             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(o$a, { variant: "solid", color: brandColor ? undefined : (nextStepId ? "blue" : "green"), onClick: handleNext, style: Object.assign({ cursor: 'pointer' }, (brandColor ? { backgroundColor: 'var(--codex-brand)', color: '#fff' } : {})) }, nextStepId ? (React.createElement(React.Fragment, null,
+            nextIcon && React.createElement(React.Fragment, null,
                 React.createElement(Icon, { name: nextIcon }),
-                "\u00A0") : React.createElement(React.Fragment, null,
+                "\u00A0"),
+            nextLabel)) : (React.createElement(React.Fragment, null,
+            finishIcon && React.createElement(React.Fragment, null,
                 React.createElement(Icon, { name: finishIcon }),
                 "\u00A0"),
-            nextStepId ? nextLabel : finishLabel)));
+            finishLabel)))));
 };
 
 /** A special constant with type `never` */

package/lib/index.esm.js

@@ -48629,7 +48629,7 @@ const CodexContext = createContext({
     design: 'outline'
 });
 const useStepper = () => useContext(CodexContext);
-const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, className, style, children }) => {
+const Codex = ({ design = 'outline', defaultStepId, brandColor, width = 12, newRow, className, style, children }) => {
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const steps = React__default.Children.toArray(children)
@@ -48660,9 +48660,9 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
         }
     }, [design]);
     const activeIndex = steps.findIndex(s => s.id === activeStepId);
-    return (React__default.createElement(CodexContext.Provider, { value: { activeStepId, setActiveStepId, design } },
+    return (React__default.createElement(CodexContext.Provider, { value: { activeStepId, setActiveStepId, design, brandColor } },
         React__default.createElement(Column, { span: width, newLine: newRow },
-            React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign({ width: '100%' }, style), neuVars) },
+            React__default.createElement("div", { ref: containerRef, className: className, style: Object.assign(Object.assign(Object.assign({ width: '100%' }, style), neuVars), { '--codex-brand': brandColor || 'var(--accent-9)' }) },
                 React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         .v-step-circle {
                             width: 40px;
@@ -48690,42 +48690,45 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                             to { opacity: 1; transform: translateY(0); }
                         }
 
+                        /* --- OUTLINE --- */
                         .v-stepper-outline .v-step-circle.pending {
                             border: 2px solid var(--gray-6);
                             background: transparent;
                             color: var(--gray-10);
                         }
                         .v-stepper-outline .v-step-circle.active {
-                            border: 2px solid var(--accent-9);
+                            border: 2px solid var(--codex-brand);
                             background: var(--accent-2);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-outline .v-step-circle.completed {
-                            border: 2px solid var(--accent-9);
-                            background: var(--accent-9);
+                            border: 2px solid var(--codex-brand);
+                            background: var(--codex-brand);
                             color: white;
                         }
                         .v-stepper-outline .v-step-line.pending { background-color: var(--gray-5); }
-                        .v-stepper-outline .v-step-line.completed { background-color: var(--accent-9); }
+                        .v-stepper-outline .v-step-line.completed { background-color: var(--codex-brand); }
 
+                        /* --- MATERIAL --- */
                         .v-stepper-material .v-step-circle.pending {
                             background: var(--color-surface);
                             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                             color: var(--gray-10);
                         }
                         .v-stepper-material .v-step-circle.active {
-                            background: var(--accent-9);
+                            background: var(--codex-brand);
                             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                             color: white;
                             transform: scale(1.1);
                         }
                         .v-stepper-material .v-step-circle.completed {
-                            background: var(--accent-9);
+                            background: var(--codex-brand);
                             color: white;
                         }
                         .v-stepper-material .v-step-line.pending { background-color: var(--gray-5); }
-                        .v-stepper-material .v-step-line.completed { background-color: var(--accent-9); }
+                        .v-stepper-material .v-step-line.completed { background-color: var(--codex-brand); }
 
+                        /* --- NEUMORPHIC --- */
                         .v-stepper-neumorphic .v-step-circle {
                             background: var(--neu-bg);
                             border: none;
@@ -48736,19 +48739,19 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                         }
                         .v-stepper-neumorphic .v-step-circle.active {
                             box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-neumorphic .v-step-circle.completed {
                             box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
-                            color: var(--accent-9);
+                            color: var(--codex-brand);
                         }
                         .v-stepper-neumorphic .v-step-line.pending {
                             background-color: transparent;
                             box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
                         }
                         .v-stepper-neumorphic .v-step-line.completed {
-                            background-color: var(--accent-9);
-                            box-shadow: 0 0 4px var(--accent-9);
+                            background-color: var(--codex-brand);
+                            box-shadow: 0 0 4px var(--codex-brand);
                         }
                     ` } }),
                 React__default.createElement(p$8, { className: `v-stepper-${design}`, style: { paddingBottom: '60px', paddingTop: '10px' } },
@@ -48756,6 +48759,8 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                         const isCompleted = index < activeIndex;
                         const isActive = index === activeIndex;
                         const statusClass = isActive ? 'active' : isCompleted ? 'completed' : 'pending';
+                        const isFirst = index === 0;
+                        const isLast = index === steps.length - 1;
                         return (React__default.createElement(React__default.Fragment, { key: step.id },
                             React__default.createElement(p$8, { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                                 React__default.createElement("div", { className: `v-step-circle ${statusClass}`, onClick: () => setActiveStepId(step.id) }, isCompleted ? (React__default.createElement(Icon, { name: "check", width: "20", height: "20" })) : (step.icon ? step.icon : React__default.createElement("span", null, index + 1))),
@@ -48764,8 +48769,11 @@ const Codex = ({ design = 'outline', defaultStepId, width = 12, newRow, classNam
                                         top: '100%',
                                         marginTop: '12px',
                                         width: '120px',
-                                        textAlign: 'center',
-                                        cursor: 'pointer'
+                                        cursor: 'pointer',
+                                        left: isFirst ? '0' : isLast ? 'auto' : '50%',
+                                        right: isLast ? '0' : 'auto',
+                                        transform: (!isFirst && !isLast) ? 'translateX(-50%)' : 'none',
+                                        textAlign: isFirst ? 'left' : isLast ? 'right' : 'center',
                                     }, onClick: () => setActiveStepId(step.id) },
                                     React__default.createElement(p$d, { size: "2", weight: isActive ? "bold" : "regular", style: { color: isActive ? 'var(--gray-12)' : 'var(--gray-10)', display: 'block', lineHeight: 1.2 } }, step.title),
                                     step.description && (React__default.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
@@ -48781,7 +48789,7 @@ const CodexItem = ({ stepId, children, }) => {
 };
 
 const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onNext, onPrev, onFinish }) => {
-    const { setActiveStepId } = useStepper();
+    const { setActiveStepId, brandColor } = useStepper();
     const handlePrev = () => {
         if (onPrev)
             onPrev();
@@ -48801,17 +48809,19 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
     };
     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,
+            prevIcon && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Icon, { name: prevIcon }),
-                "\u00A0") : null,
+                "\u00A0")),
             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(o$a, { variant: "solid", color: brandColor ? undefined : (nextStepId ? "blue" : "green"), onClick: handleNext, style: Object.assign({ cursor: 'pointer' }, (brandColor ? { backgroundColor: 'var(--codex-brand)', color: '#fff' } : {})) }, nextStepId ? (React__default.createElement(React__default.Fragment, null,
+            nextIcon && React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Icon, { name: nextIcon }),
-                "\u00A0") : React__default.createElement(React__default.Fragment, null,
+                "\u00A0"),
+            nextLabel)) : (React__default.createElement(React__default.Fragment, null,
+            finishIcon && React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Icon, { name: finishIcon }),
                 "\u00A0"),
-            nextStepId ? nextLabel : finishLabel)));
+            finishLabel)))));
 };
 
 /** A special constant with type `never` */

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

@@ -5,6 +5,7 @@ interface CodexContextProps {
     activeStepId: string;
     setActiveStepId: (id: string) => void;
     design: CodexDesign;
+    brandColor?: string;
 }
 export declare const useStepper: () => CodexContextProps;
 export interface CodexProps {
@@ -12,40 +13,34 @@ 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
+     * * Option to pass a custom hex, rgb, or css variable to color the active
+     * step lines, icons, circles, and navigation buttons.
      * * @example
-     * width={12}
+     * brandColor="#800020"
+     */
+    brandColor?: string;
+    /**
+     * * The required viewport column width for the Codex component.
      */
     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" }}
+     * * Option to inject custom CSS to the Codex wrapper.
      */
     style?: React.CSSProperties;
     /**
@@ -54,35 +49,12 @@ export interface CodexProps {
     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 Codex: ({ design, defaultStepId, brandColor, 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/codex/codexcontrols.d.ts

@@ -22,7 +22,7 @@ export interface CodexControlsProps {
     nextLabel?: string;
     /**
     * * Custom icon for the Next button.
-    * Default: "Continue"
+    * Default: "doublearrowright"
     */
     nextIcon?: string;
     /**
@@ -32,17 +32,17 @@ export interface CodexControlsProps {
     prevLabel?: string;
     /**
      * * Custom icon name for the Previous button.
-     * Default: "Back"
+     * Default: "doublearrowleft"
      */
     prevIcon?: string;
     /**
      * * Custom text for the Finish button (rendered when nextStepId undefined).
-     * Default: "Complete Setup"
+     * Default: "Submit"
      */
     finishLabel?: string;
     /**
      * * Custom icon name for the Finish button (rendered when no nextStepId undefined).
-     * Default: "flag"
+     * Default: "paperplane"
      */
     finishIcon?: string;
     /**

package/package.json

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