@campxdev/react-blueprint 2.2.9 → 2.3.1

package/dist/esm/types/src/components/Navigation/Stepper/Stepper.d.ts

@@ -1,13 +1,49 @@
 import { SxProps } from '@mui/material';
 interface StepperProps {
+    /** Orientation of the stepper */
     orientation: 'vertical' | 'horizontal';
+    /** Current active step index (0-based) */
     activeStep: number;
+    /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
+    /** Additional styles for the container */
     containerSx: SxProps;
+    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    onStepClick?: (stepIndex: number) => void;
+    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    allowNavigation?: boolean;
 }
 interface StepItem {
+    /** The label text for the step */
     label: string;
+    /** Optional description text shown below the label */
     description?: string;
 }
-export declare const Stepper: ({ orientation, steps, activeStep, containerSx, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+export declare const Stepper: ({ orientation, steps, activeStep, containerSx, onStepClick, allowNavigation, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Navigation/Stepper/StepperComponents.d.ts

@@ -9,5 +9,7 @@ interface ConnectorProps {
     isVertical: boolean;
 }
 export declare const Connector: import("@mui/styled-engine").StyledComponent<import("@mui/material").StepConnectorProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ConnectorProps, {}, {}>;
-export declare function StepIcon(props: StepIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepIcon(props: StepIconProps & {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/stories/Navigation/Stepper.stories.d.ts

@@ -4,6 +4,9 @@ declare const meta: Meta<typeof Stepper>;
 export default meta;
 type Story = StoryObj<typeof Stepper>;
 export declare const VerticalStepper: Story;
+export declare const InteractiveVerticalStepper: Story;
 export declare const VerticalStepperWithNoDescription: Story;
 export declare const HorizontalStepper: Story;
+export declare const InteractiveHorizontalStepper: Story;
+export declare const NonNavigableStepper: Story;
 export declare const HorizontalStepperWithNoDescription: Story;

package/dist/index.d.ts

@@ -1432,16 +1432,52 @@ type PreviewFilesProps = {
 declare const PreviewFiles: ({ files, label, onChange, showDownload, hideDelete, sx, ...props }: PreviewFilesProps) => react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
+    /** Orientation of the stepper */
     orientation: 'vertical' | 'horizontal';
+    /** Current active step index (0-based) */
     activeStep: number;
+    /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
+    /** Additional styles for the container */
     containerSx: SxProps;
+    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    onStepClick?: (stepIndex: number) => void;
+    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    allowNavigation?: boolean;
 }
 interface StepItem {
+    /** The label text for the step */
     label: string;
+    /** Optional description text shown below the label */
     description?: string;
 }
-declare const Stepper: ({ orientation, steps, activeStep, containerSx, }: StepperProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+declare const Stepper: ({ orientation, steps, activeStep, containerSx, onStepClick, allowNavigation, }: StepperProps) => react_jsx_runtime.JSX.Element;
 
 interface CustomTabProps extends Omit<TabProps, 'component'> {
     key: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.2.9",
+  "version": "2.3.1",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Layout/PageContent/PageContent.tsx

@@ -20,6 +20,7 @@ const PageStepperContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   flexDirection: 'column',
   justifyContent: 'flex-start',
+  backgroundColor: theme.palette.surface.paperBackground,
   gap: '10px',
 }));
 

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -9,25 +9,70 @@ import {
 import { Connector, StepIcon, StyledStepContent } from './StepperComponents';
 
 interface StepperProps {
+  /** Orientation of the stepper */
   orientation: 'vertical' | 'horizontal';
+  /** Current active step index (0-based) */
   activeStep: number;
+  /** Array of step items with labels and optional descriptions */
   steps: StepItem[];
+  /** Additional styles for the container */
   containerSx: SxProps;
+  /** Callback function called when a step is clicked. Receives the step index as parameter */
+  onStepClick?: (stepIndex: number) => void;
+  /** Whether to allow navigation by clicking on steps. Defaults to true */
+  allowNavigation?: boolean;
 }
 
 interface StepItem {
+  /** The label text for the step */
   label: string;
+  /** Optional description text shown below the label */
   description?: string;
 }
 
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+
 export const Stepper = ({
   orientation,
   steps,
   activeStep = 0,
   containerSx,
+  onStepClick,
+  allowNavigation = true,
 }: StepperProps) => {
   const isVertical = orientation === 'vertical';
 
+  const handleStepClick = (stepIndex: number) => {
+    if (allowNavigation && onStepClick) {
+      onStepClick(stepIndex);
+    }
+  };
+
   return (
     <Box
       sx={{
@@ -43,7 +88,21 @@ export const Stepper = ({
       >
         {steps?.map((item, index) => (
           <Step key={index} expanded>
-            <StepLabel StepIconComponent={StepIcon}>{item?.label}</StepLabel>
+            <StepLabel
+              StepIconComponent={(props) => (
+                <StepIcon {...props} onClick={() => handleStepClick(index)} />
+              )}
+              onClick={() => handleStepClick(index)}
+              sx={{
+                cursor: allowNavigation && onStepClick ? 'pointer' : 'default',
+                '& .MuiStepLabel-label': {
+                  cursor:
+                    allowNavigation && onStepClick ? 'pointer' : 'default',
+                },
+              }}
+            >
+              {item?.label}
+            </StepLabel>
             <StyledStepContent
               isVertical={isVertical}
               activeStep={index < activeStep}

package/src/components/Navigation/Stepper/StepperComponents.tsx

@@ -40,14 +40,16 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
   ({ theme, isVertical }) => ({
     [`&.${stepConnectorClasses.active}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
+        [isVertical
+          ? 'borderLeft'
+          : 'border']: `1px solid ${theme.palette.primary.light}`,
       },
     },
     [`&.${stepConnectorClasses.completed}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
+        [isVertical
+          ? 'borderLeft'
+          : 'border']: `1px solid ${theme.palette.primary.light}`,
       },
     },
     ...(isVertical
@@ -66,8 +68,8 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
   }),
 );
 
-export function StepIcon(props: StepIconProps) {
-  const { active, completed, className } = props;
+export function StepIcon(props: StepIconProps & { onClick?: () => void }) {
+  const { active, completed, className, onClick } = props;
 
   const getIcon = () => {
     if (completed) return <CompletedStateIcon />;
@@ -75,12 +77,23 @@ export function StepIcon(props: StepIconProps) {
     return <UnCheckedRadioIcon />;
   };
 
-  return <StepIconRoot className={className}>{getIcon()}</StepIconRoot>;
+  return (
+    <StepIconRoot
+      className={className}
+      onClick={onClick}
+      sx={{
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      {getIcon()}
+    </StepIconRoot>
+  );
 }
 
-const StepIconRoot = styled('div')<{}>(({ theme }) => ({
+const StepIconRoot = styled('div')<{ sx?: any }>(({ theme, sx }) => ({
   width: 20,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  ...sx,
 }));

package/src/stories/Navigation/Stepper.stories.tsx

@@ -1,10 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react/*';
+import { useState } from 'react';
 import { Stepper } from '../../components/Navigation/Stepper/Stepper';
 
 const meta: Meta<typeof Stepper> = {
   title: 'Navigation/Stepper',
   component: Stepper,
-  argTypes: {},
+  argTypes: {
+    allowNavigation: {
+      control: 'boolean',
+      description: 'Allow clicking on steps to navigate',
+    },
+    onStepClick: {
+      action: 'step-clicked',
+      description: 'Callback when a step is clicked',
+    },
+  },
 };
 
 export default meta;
@@ -42,6 +52,30 @@ export const VerticalStepper: Story = {
     orientation: 'vertical',
     steps,
     activeStep: 2,
+    allowNavigation: true,
+  },
+};
+
+// Interactive Stepper with navigation
+export const InteractiveVerticalStepper: Story = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(0);
+
+    return (
+      <Stepper
+        {...args}
+        activeStep={activeStep}
+        onStepClick={(stepIndex) => {
+          setActiveStep(stepIndex);
+          args.onStepClick?.(stepIndex);
+        }}
+      />
+    );
+  },
+  args: {
+    orientation: 'vertical',
+    steps,
+    allowNavigation: true,
   },
 };
 
@@ -61,6 +95,39 @@ export const HorizontalStepper: Story = {
   },
 };
 
+// Interactive Horizontal Stepper with navigation
+export const InteractiveHorizontalStepper: Story = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(1);
+
+    return (
+      <Stepper
+        {...args}
+        activeStep={activeStep}
+        onStepClick={(stepIndex) => {
+          setActiveStep(stepIndex);
+          args.onStepClick?.(stepIndex);
+        }}
+      />
+    );
+  },
+  args: {
+    orientation: 'horizontal',
+    steps,
+    allowNavigation: true,
+  },
+};
+
+// Stepper with navigation disabled
+export const NonNavigableStepper: Story = {
+  args: {
+    orientation: 'vertical',
+    steps,
+    activeStep: 2,
+    allowNavigation: false,
+  },
+};
+
 export const HorizontalStepperWithNoDescription: Story = {
   args: {
     ...HorizontalStepper.args,