@campxdev/react-blueprint 2.2.9 → 2.3.1

package/dist/cjs/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/cjs/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/cjs/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;