pixelon 0.3.25 → 0.3.26

package/dist/components/organisms/lumi/DashboardWorkspace/types(1).d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+/**
+ * Props del organismo DashboardWorkspace
+ */
+export interface DashboardWorkspaceProps {
+    /**
+     * Contenido del workspace
+     */
+    children: ReactNode;
+    /**
+     * Si habilita el botón "volver arriba"
+     * @default true
+     */
+    enableScrollToTop?: boolean;
+    /**
+     * Altura del navbar en píxeles (para calcular altura disponible)
+     * @default 64
+     */
+    navbarHeight?: number;
+    /**
+     * Threshold de scroll para mostrar el botón (en píxeles)
+     * @default 200
+     */
+    scrollThreshold?: number;
+    /**
+     * Comportamiento del scroll al ir arriba
+     * @default 'smooth'
+     */
+    scrollBehavior?: ScrollBehavior;
+    /**
+     * Callback cuando cambia la posición del scroll
+     */
+    onScroll?: (scrollTop: number) => void;
+    /**
+     * Callback cuando se hace clic en el botón "volver arriba"
+     */
+    onScrollToTop?: () => void;
+    /**
+     * Color de fondo del workspace
+     * @default '#fafafa'
+     */
+    backgroundColor?: string;
+    /**
+     * Padding del contenido
+     * @default { mobile: '16px', tablet: '20px', desktop: '24px' }
+     */
+    padding?: string | {
+        mobile?: string;
+        tablet?: string;
+        desktop?: string;
+    };
+    /**
+     * Clase CSS adicional
+     */
+    className?: string;
+    /**
+     * Test ID para testing
+     */
+    'data-testid'?: string;
+}

package/dist/components/organisms/lumi/DashboardWorkspace/types(2).d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+/**
+ * Props del organismo DashboardWorkspace
+ */
+export interface DashboardWorkspaceProps {
+    /**
+     * Contenido del workspace
+     */
+    children: ReactNode;
+    /**
+     * Si habilita el botón "volver arriba"
+     * @default true
+     */
+    enableScrollToTop?: boolean;
+    /**
+     * Altura del navbar en píxeles (para calcular altura disponible)
+     * @default 64
+     */
+    navbarHeight?: number;
+    /**
+     * Threshold de scroll para mostrar el botón (en píxeles)
+     * @default 200
+     */
+    scrollThreshold?: number;
+    /**
+     * Comportamiento del scroll al ir arriba
+     * @default 'smooth'
+     */
+    scrollBehavior?: ScrollBehavior;
+    /**
+     * Callback cuando cambia la posición del scroll
+     */
+    onScroll?: (scrollTop: number) => void;
+    /**
+     * Callback cuando se hace clic en el botón "volver arriba"
+     */
+    onScrollToTop?: () => void;
+    /**
+     * Color de fondo del workspace
+     * @default '#fafafa'
+     */
+    backgroundColor?: string;
+    /**
+     * Padding del contenido
+     * @default { mobile: '16px', tablet: '20px', desktop: '24px' }
+     */
+    padding?: string | {
+        mobile?: string;
+        tablet?: string;
+        desktop?: string;
+    };
+    /**
+     * Clase CSS adicional
+     */
+    className?: string;
+    /**
+     * Test ID para testing
+     */
+    'data-testid'?: string;
+}

package/dist/components/organisms/lumi/DynamicForm/DynamicForm(1).d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { DynamicFormProps } from "./types";
+import "./DynamicForm.scss";
+/**
+ * DynamicForm - Organismo de Lumi
+ *
+ * Formulario dinámico que renderiza campos basados en una configuración.
+ * Integrado con React Hook Form para manejo de estado y Yup para validación.
+ *
+ * @example
+ * ```tsx
+ * <DynamicForm
+ *   fields={serviceFields}
+ *   validationSchema={serviceSchema}
+ *   onSubmit={handleSubmit}
+ *   onChange={(data) => console.log('Cambio en tiempo real:', data)}
+ *   columns={2}
+ * />
+ * ```
+ */
+export declare const DynamicForm: React.FC<DynamicFormProps>;

package/dist/components/organisms/lumi/DynamicForm/helpers/fieldMapper(1).d.ts

@@ -0,0 +1,17 @@
+import type { FormFieldConfig } from '../types';
+/**
+ * Transforma los valores de entrada según transformOnReceive
+ */
+export declare const transformIncomingValues: (values: Record<string, unknown>, fields: FormFieldConfig[]) => Record<string, unknown>;
+/**
+ * Transforma los valores de salida según transformOnSubmit
+ */
+export declare const transformOutgoingValues: (values: Record<string, unknown>, fields: FormFieldConfig[]) => Record<string, unknown>;
+/**
+ * Filtra y ordena los campos según showIf y order
+ */
+export declare const filterAndSortFields: (fields: FormFieldConfig[], formValues: Record<string, unknown>) => FormFieldConfig[];
+/**
+ * Obtiene los valores por defecto de los campos
+ */
+export declare const getDefaultValuesFromFields: (fields: FormFieldConfig[]) => Record<string, unknown>;

package/dist/components/organisms/lumi/DynamicForm/helpers/fieldMapper(2).d.ts

@@ -0,0 +1,17 @@
+import type { FormFieldConfig } from '../types';
+/**
+ * Transforma los valores de entrada según transformOnReceive
+ */
+export declare const transformIncomingValues: (values: Record<string, unknown>, fields: FormFieldConfig[]) => Record<string, unknown>;
+/**
+ * Transforma los valores de salida según transformOnSubmit
+ */
+export declare const transformOutgoingValues: (values: Record<string, unknown>, fields: FormFieldConfig[]) => Record<string, unknown>;
+/**
+ * Filtra y ordena los campos según showIf y order
+ */
+export declare const filterAndSortFields: (fields: FormFieldConfig[], formValues: Record<string, unknown>) => FormFieldConfig[];
+/**
+ * Obtiene los valores por defecto de los campos
+ */
+export declare const getDefaultValuesFromFields: (fields: FormFieldConfig[]) => Record<string, unknown>;

package/dist/components/organisms/lumi/DynamicForm/helpers/fieldRenderer(1).d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { FieldRendererProps } from '../types';
+/**
+ * Renderiza la molécula correspondiente según el tipo de campo
+ */
+export declare const renderField: ({ field, control, mode, disabled, }: FieldRendererProps) => React.ReactElement;

package/dist/components/organisms/lumi/DynamicForm/helpers/fieldRenderer(2).d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { FieldRendererProps } from '../types';
+/**
+ * Renderiza la molécula correspondiente según el tipo de campo
+ */
+export declare const renderField: ({ field, control, mode, disabled, }: FieldRendererProps) => React.ReactElement;

package/dist/components/organisms/lumi/DynamicForm/index(1).d.ts

@@ -0,0 +1,2 @@
+export { DynamicForm } from './DynamicForm';
+export type { DynamicFormProps, FormFieldConfig, MoleculeType, SelectOption, } from './types';

package/dist/components/organisms/lumi/DynamicForm/index(2).d.ts

@@ -0,0 +1,2 @@
+export { DynamicForm } from './DynamicForm';
+export type { DynamicFormProps, FormFieldConfig, MoleculeType, SelectOption, } from './types';

package/dist/components/organisms/lumi/DynamicForm/types(1).d.ts

@@ -0,0 +1,96 @@
+import type { UseFormReturn, Control, FieldValues } from 'react-hook-form';
+/**
+ * Tipos de moléculas soportadas por DynamicForm
+ */
+export type MoleculeType = 'INPUT' | 'INPUT_NUMBER' | 'INPUT_EMAIL' | 'INPUT_PASSWORD' | 'INPUT_PHONE' | 'INPUT_CURRENCY' | 'TEXTAREA' | 'SELECT' | 'SELECT_MULTI' | 'DATE_INPUT' | 'TIME_INPUT' | 'DATETIME_INPUT' | 'CHECKBOX' | 'SWITCH' | 'RADIO_GROUP' | 'CUSTOM';
+/**
+ * Opción para Select, Select Multi, Radio Group
+ */
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Configuración de un campo del formulario
+ */
+export interface FormFieldConfig {
+    /** Key del campo (debe coincidir con la key en defaultValues) */
+    name: string;
+    /** Label del campo */
+    label: string;
+    /** Tipo de molécula a renderizar (OBLIGATORIO) */
+    moleculeType: MoleculeType;
+    /** Si el campo es requerido */
+    required?: boolean;
+    /** Si el campo es de solo lectura */
+    readOnly?: boolean;
+    /** Placeholder del campo */
+    placeholder?: string;
+    /** Descripción o help text del campo */
+    description?: string;
+    /** Valor por defecto */
+    defaultValue?: unknown;
+    /** Ancho del campo en el grid (1-12) */
+    gridSpan?: number;
+    /** Props específicas de la molécula */
+    uiProps?: Record<string, unknown>;
+    /** Función de transformación al enviar */
+    transformOnSubmit?: (value: unknown) => unknown;
+    /** Función de transformación al recibir */
+    transformOnReceive?: (value: unknown) => unknown;
+    /** Condición para mostrar el campo (dependencia de otros campos) */
+    showIf?: (formValues: Record<string, unknown>) => boolean;
+    /** Opciones para SELECT, SELECT_MULTI */
+    options?: SelectOption[];
+    /** Orden de renderizado */
+    order?: number;
+}
+/**
+ * Props del componente DynamicForm
+ */
+export interface DynamicFormProps {
+    /** Configuración de campos del formulario */
+    fields: FormFieldConfig[];
+    /** Valores iniciales del formulario */
+    defaultValues?: Record<string, unknown>;
+    /** Callback al enviar el formulario (después de validación) */
+    onSubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    /** Callback al cancelar */
+    onCancel?: () => void;
+    /** Callback que se ejecuta cuando cambia cualquier valor del formulario (en tiempo real) */
+    onChange?: (data: Record<string, unknown>) => void;
+    /** Esquema de validación Yup (OBLIGATORIO) */
+    validationSchema: unknown;
+    /** Modo del formulario */
+    mode?: 'create' | 'edit' | 'view';
+    /** Mostrar botones de submit y cancel */
+    showActions?: boolean;
+    /** Texto del botón submit */
+    submitText?: string;
+    /** Texto del botón cancel */
+    cancelText?: string;
+    /** Estado de loading al enviar */
+    loading?: boolean;
+    /** Deshabilitar todo el formulario */
+    disabled?: boolean;
+    /** Layout de columnas (1, 2, 3, etc.) */
+    columns?: 1 | 2 | 3 | 4;
+    /** Espaciado entre campos */
+    spacing?: 'small' | 'medium' | 'large';
+    /** Instancia de react-hook-form (opcional, para control externo) */
+    formInstance?: UseFormReturn;
+    /** Clase CSS adicional */
+    className?: string;
+    /** Test ID */
+    'data-testid'?: string;
+}
+/**
+ * Props internas para el FieldRenderer
+ */
+export interface FieldRendererProps {
+    field: FormFieldConfig;
+    control: Control<FieldValues>;
+    mode: 'create' | 'edit' | 'view';
+    disabled: boolean;
+}

package/dist/components/organisms/lumi/DynamicForm/types(2).d.ts

@@ -0,0 +1,96 @@
+import type { UseFormReturn, Control, FieldValues } from 'react-hook-form';
+/**
+ * Tipos de moléculas soportadas por DynamicForm
+ */
+export type MoleculeType = 'INPUT' | 'INPUT_NUMBER' | 'INPUT_EMAIL' | 'INPUT_PASSWORD' | 'INPUT_PHONE' | 'INPUT_CURRENCY' | 'TEXTAREA' | 'SELECT' | 'SELECT_MULTI' | 'DATE_INPUT' | 'TIME_INPUT' | 'DATETIME_INPUT' | 'CHECKBOX' | 'SWITCH' | 'RADIO_GROUP' | 'CUSTOM';
+/**
+ * Opción para Select, Select Multi, Radio Group
+ */
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Configuración de un campo del formulario
+ */
+export interface FormFieldConfig {
+    /** Key del campo (debe coincidir con la key en defaultValues) */
+    name: string;
+    /** Label del campo */
+    label: string;
+    /** Tipo de molécula a renderizar (OBLIGATORIO) */
+    moleculeType: MoleculeType;
+    /** Si el campo es requerido */
+    required?: boolean;
+    /** Si el campo es de solo lectura */
+    readOnly?: boolean;
+    /** Placeholder del campo */
+    placeholder?: string;
+    /** Descripción o help text del campo */
+    description?: string;
+    /** Valor por defecto */
+    defaultValue?: unknown;
+    /** Ancho del campo en el grid (1-12) */
+    gridSpan?: number;
+    /** Props específicas de la molécula */
+    uiProps?: Record<string, unknown>;
+    /** Función de transformación al enviar */
+    transformOnSubmit?: (value: unknown) => unknown;
+    /** Función de transformación al recibir */
+    transformOnReceive?: (value: unknown) => unknown;
+    /** Condición para mostrar el campo (dependencia de otros campos) */
+    showIf?: (formValues: Record<string, unknown>) => boolean;
+    /** Opciones para SELECT, SELECT_MULTI */
+    options?: SelectOption[];
+    /** Orden de renderizado */
+    order?: number;
+}
+/**
+ * Props del componente DynamicForm
+ */
+export interface DynamicFormProps {
+    /** Configuración de campos del formulario */
+    fields: FormFieldConfig[];
+    /** Valores iniciales del formulario */
+    defaultValues?: Record<string, unknown>;
+    /** Callback al enviar el formulario (después de validación) */
+    onSubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    /** Callback al cancelar */
+    onCancel?: () => void;
+    /** Callback que se ejecuta cuando cambia cualquier valor del formulario (en tiempo real) */
+    onChange?: (data: Record<string, unknown>) => void;
+    /** Esquema de validación Yup (OBLIGATORIO) */
+    validationSchema: unknown;
+    /** Modo del formulario */
+    mode?: 'create' | 'edit' | 'view';
+    /** Mostrar botones de submit y cancel */
+    showActions?: boolean;
+    /** Texto del botón submit */
+    submitText?: string;
+    /** Texto del botón cancel */
+    cancelText?: string;
+    /** Estado de loading al enviar */
+    loading?: boolean;
+    /** Deshabilitar todo el formulario */
+    disabled?: boolean;
+    /** Layout de columnas (1, 2, 3, etc.) */
+    columns?: 1 | 2 | 3 | 4;
+    /** Espaciado entre campos */
+    spacing?: 'small' | 'medium' | 'large';
+    /** Instancia de react-hook-form (opcional, para control externo) */
+    formInstance?: UseFormReturn;
+    /** Clase CSS adicional */
+    className?: string;
+    /** Test ID */
+    'data-testid'?: string;
+}
+/**
+ * Props internas para el FieldRenderer
+ */
+export interface FieldRendererProps {
+    field: FormFieldConfig;
+    control: Control<FieldValues>;
+    mode: 'create' | 'edit' | 'view';
+    disabled: boolean;
+}

package/dist/components/organisms/lumi/FormDrawer/FormDrawer(1).d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FormDrawerProps } from "./types";
+import "./FormDrawer.scss";
+export declare const FormDrawer: React.FC<FormDrawerProps>;
+export default FormDrawer;

package/dist/components/organisms/lumi/FormDrawer/index(1).d.ts

@@ -0,0 +1,3 @@
+export { FormDrawer, default } from "./FormDrawer";
+export type { FormDrawerProps, FormDrawerMode } from "./types";
+export { DEFAULT_TITLES } from "./types";

package/dist/components/organisms/lumi/FormDrawer/types(1).d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { FormFieldConfig } from "../DynamicForm/types";
+/**
+ * Modo del FormDrawer
+ */
+export type FormDrawerMode = "create" | "edit" | "view";
+/**
+ * Props del componente FormDrawer
+ */
+export interface FormDrawerProps {
+    /** Si el drawer está abierto */
+    isOpen: boolean;
+    /** Callback al cerrar el drawer */
+    onClose: () => void;
+    /** Modo del formulario */
+    mode: FormDrawerMode;
+    /** Configuración de campos del formulario */
+    fields: FormFieldConfig[];
+    /** Valores iniciales del formulario */
+    defaultValues?: Record<string, unknown>;
+    /** Callback al enviar el formulario */
+    onSubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    /** Callback que se ejecuta cuando cambia cualquier valor del formulario (en tiempo real) */
+    onChange?: (data: Record<string, unknown>) => void;
+    /** Esquema de validación Yup */
+    validationSchema: unknown;
+    /** Título del drawer */
+    title?: string;
+    /** Subtítulo o descripción */
+    subtitle?: string;
+    /** Estado de loading al enviar */
+    loading?: boolean;
+    /** Ancho del drawer */
+    width?: number | string;
+    /** Texto del botón submit */
+    submitText?: string;
+    /** Texto del botón cancel */
+    cancelText?: string;
+    /** Layout de columnas del formulario */
+    columns?: 1 | 2 | 3 | 4;
+    /** Espaciado entre campos */
+    spacing?: "small" | "medium" | "large";
+    /** Tamaño de los campos del formulario */
+    fieldSize?: "small" | "medium" | "large";
+    /** Contenido adicional en el footer (además de los botones) */
+    footerExtra?: ReactNode;
+    /** Cerrar drawer al hacer clic en overlay (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Cerrar drawer al presionar Escape (default: true) */
+    closeOnEscape?: boolean;
+    /** Callback cuando se intenta cerrar (puede prevenir el cierre) */
+    onBeforeClose?: () => boolean | Promise<boolean>;
+    /** Clase CSS adicional */
+    className?: string;
+    /** Test ID */
+    "data-testid"?: string;
+}
+/**
+ * Títulos por defecto según el modo
+ */
+export declare const DEFAULT_TITLES: Record<FormDrawerMode, string>;

package/dist/components/organisms/lumi/FormDrawer/types(2).d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { FormFieldConfig } from "../DynamicForm/types";
+/**
+ * Modo del FormDrawer
+ */
+export type FormDrawerMode = "create" | "edit" | "view";
+/**
+ * Props del componente FormDrawer
+ */
+export interface FormDrawerProps {
+    /** Si el drawer está abierto */
+    isOpen: boolean;
+    /** Callback al cerrar el drawer */
+    onClose: () => void;
+    /** Modo del formulario */
+    mode: FormDrawerMode;
+    /** Configuración de campos del formulario */
+    fields: FormFieldConfig[];
+    /** Valores iniciales del formulario */
+    defaultValues?: Record<string, unknown>;
+    /** Callback al enviar el formulario */
+    onSubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    /** Callback que se ejecuta cuando cambia cualquier valor del formulario (en tiempo real) */
+    onChange?: (data: Record<string, unknown>) => void;
+    /** Esquema de validación Yup */
+    validationSchema: unknown;
+    /** Título del drawer */
+    title?: string;
+    /** Subtítulo o descripción */
+    subtitle?: string;
+    /** Estado de loading al enviar */
+    loading?: boolean;
+    /** Ancho del drawer */
+    width?: number | string;
+    /** Texto del botón submit */
+    submitText?: string;
+    /** Texto del botón cancel */
+    cancelText?: string;
+    /** Layout de columnas del formulario */
+    columns?: 1 | 2 | 3 | 4;
+    /** Espaciado entre campos */
+    spacing?: "small" | "medium" | "large";
+    /** Tamaño de los campos del formulario */
+    fieldSize?: "small" | "medium" | "large";
+    /** Contenido adicional en el footer (además de los botones) */
+    footerExtra?: ReactNode;
+    /** Cerrar drawer al hacer clic en overlay (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Cerrar drawer al presionar Escape (default: true) */
+    closeOnEscape?: boolean;
+    /** Callback cuando se intenta cerrar (puede prevenir el cierre) */
+    onBeforeClose?: () => boolean | Promise<boolean>;
+    /** Clase CSS adicional */
+    className?: string;
+    /** Test ID */
+    "data-testid"?: string;
+}
+/**
+ * Títulos por defecto según el modo
+ */
+export declare const DEFAULT_TITLES: Record<FormDrawerMode, string>;

package/dist/components/organisms/lumi/Stepper/StepIndicator(1).d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { StepIndicatorProps } from './types';
+export declare const StepIndicator: React.FC<StepIndicatorProps>;
+export default StepIndicator;

package/dist/components/organisms/lumi/Stepper/Stepper(1).d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { StepperProps } from './types';
+import './Stepper.scss';
+export declare const Stepper: React.FC<StepperProps>;
+export default Stepper;

package/dist/components/organisms/lumi/Stepper/index(1).d.ts

@@ -0,0 +1,3 @@
+export { Stepper, default } from './Stepper';
+export { StepIndicator } from './StepIndicator';
+export type { StepperProps, StepConfig, StepStatus, StepperHeaderRenderProps, StepperFooterRenderProps, StepIndicatorProps, } from './types';

package/dist/components/organisms/lumi/Stepper/types(1).d.ts

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+export type StepStatus = 'pending' | 'active' | 'completed' | 'error';
+export interface StepConfig {
+    /** Identificador único del paso */
+    id: string;
+    /** Título del paso (opcional, se muestra en tooltip) */
+    title?: string;
+    /** Descripción del paso (opcional) */
+    description?: string;
+    /** Icono personalizado para el paso (opcional) */
+    icon?: ReactNode;
+    /** Si el paso está deshabilitado */
+    disabled?: boolean;
+    /** Función de validación antes de avanzar al siguiente paso */
+    validate?: () => boolean | Promise<boolean>;
+    /** Callback cuando el paso se completa */
+    onComplete?: () => void;
+}
+export interface StepperProps {
+    /** Configuración de los pasos */
+    steps: StepConfig[];
+    /** Índice del paso actual (controlado) */
+    currentStep?: number;
+    /** Paso inicial (no controlado) */
+    defaultStep?: number;
+    /** Callback cuando cambia el paso */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /** Callback cuando se completan todos los pasos */
+    onComplete?: () => void;
+    /** Callback cuando se cancela el flujo */
+    onCancel?: () => void;
+    /** Contenido de cada paso (children como función o array) */
+    children: ReactNode | ((step: StepConfig, index: number) => ReactNode);
+    /** Orientación del stepper */
+    orientation?: 'horizontal' | 'vertical';
+    /** Tamaño de los indicadores */
+    size?: 'small' | 'medium' | 'large';
+    /** Variante de los indicadores */
+    variant?: 'circle' | 'dot' | 'number';
+    /** Si se permite navegación libre entre pasos completados */
+    allowNavigation?: boolean;
+    /** Si se muestra la línea conectora entre pasos */
+    showConnector?: boolean;
+    /** Texto del botón anterior */
+    prevButtonText?: string;
+    /** Texto del botón siguiente */
+    nextButtonText?: string;
+    /** Texto del botón finalizar */
+    finishButtonText?: string;
+    /** Texto del botón cancelar */
+    cancelButtonText?: string;
+    /** Si se muestra el botón cancelar */
+    showCancelButton?: boolean;
+    /** Si se ocultan los botones de navegación */
+    hideNavigation?: boolean;
+    /** Renderizado personalizado del header */
+    renderHeader?: (props: StepperHeaderRenderProps) => ReactNode;
+    /** Renderizado personalizado del footer */
+    renderFooter?: (props: StepperFooterRenderProps) => ReactNode;
+    /** Clase CSS adicional */
+    className?: string;
+    /** Si está cargando (deshabilita navegación) */
+    loading?: boolean;
+}
+export interface StepperHeaderRenderProps {
+    steps: StepConfig[];
+    currentStep: number;
+    goToStep: (index: number) => void;
+    getStepStatus: (index: number) => StepStatus;
+}
+export interface StepperFooterRenderProps {
+    currentStep: number;
+    totalSteps: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canGoNext: boolean;
+    canGoPrev: boolean;
+    goNext: () => void;
+    goPrev: () => void;
+    goToStep: (index: number) => void;
+    finish: () => void;
+    cancel: () => void;
+    loading: boolean;
+}
+export interface StepIndicatorProps {
+    step: StepConfig;
+    index: number;
+    status: StepStatus;
+    size: 'small' | 'medium' | 'large';
+    variant: 'circle' | 'dot' | 'number';
+    onClick?: () => void;
+    isClickable: boolean;
+    showConnector: boolean;
+    isLast: boolean;
+    orientation: 'horizontal' | 'vertical';
+}