analytica-frontend-lib 1.0.45 → 1.0.47

package/dist/Stepper/index.d.mts

@@ -0,0 +1,169 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Stepper size variants
+ */
+type StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * Step state variants
+ */
+type StepState = 'pending' | 'current' | 'completed';
+/**
+ * Individual step data interface
+ */
+interface StepData {
+    /** Unique identifier for the step */
+    id: string;
+    /** Label text for the step */
+    label: string;
+    /** Current state of the step */
+    state: StepState;
+}
+/**
+ * Size configurations - Following design system pattern from CSS specifications
+ * Small size based on exact CSS: width 58px, height 38px, gap 8px
+ */
+declare const SIZE_CLASSES: {
+    readonly small: {
+        readonly container: "gap-2";
+        readonly stepWidth: "w-[58px]";
+        readonly stepHeight: "h-[38px]";
+        readonly indicator: "w-5 h-5";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3 h-3";
+    };
+    readonly medium: {
+        readonly container: "gap-3";
+        readonly stepWidth: "w-[110px]";
+        readonly stepHeight: "h-[48px]";
+        readonly indicator: "w-6 h-6";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3.5 h-3.5";
+    };
+    readonly large: {
+        readonly container: "gap-4";
+        readonly stepWidth: "w-[160px]";
+        readonly stepHeight: "h-[58px]";
+        readonly indicator: "w-7 h-7";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly extraLarge: {
+        readonly container: "gap-5";
+        readonly stepWidth: "w-[200px]";
+        readonly stepHeight: "h-[68px]";
+        readonly indicator: "w-8 h-8";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-[18px] h-[18px]";
+    };
+};
+/**
+ * State configurations using exact colors from CSS specs
+ * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)
+ * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido
+ * completed: #1C61B2 = primary-800 (etapa concluída)
+ * text color: #FEFEFF = text
+ */
+declare const STATE_CLASSES: {
+    readonly pending: {
+        readonly progressBar: "bg-text-400";
+        readonly indicator: "bg-text-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-text-400";
+    };
+    readonly current: {
+        readonly progressBar: "bg-primary-800";
+        readonly indicator: "bg-primary-800";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-800";
+    };
+    readonly completed: {
+        readonly progressBar: "bg-primary-400";
+        readonly indicator: "bg-primary-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-400";
+    };
+};
+/**
+ * Type for size classes
+ */
+type SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];
+/**
+ * Type for state classes
+ */
+type StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];
+/**
+ * Props for individual step component
+ */
+interface StepProps {
+    step: StepData;
+    index: number;
+    size: StepperSize;
+    sizeClasses: SizeClassType;
+    stateClasses: StateClassType;
+    isLast: boolean;
+    className?: string;
+}
+/**
+ * Individual Step component - Based on exact design specifications
+ * Layout: flex-column with progress bar at top, then icon+label row
+ * Fully responsive for mobile, tablets, and laptops
+ */
+declare const Step: ({ step, index, size: _size, sizeClasses, stateClasses, isLast: _isLast, className, }: StepProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stepper component props interface
+ */
+type StepperProps = {
+    /** Array of step data */
+    steps: StepData[];
+    /** Size variant of the stepper */
+    size?: StepperSize;
+    /** Current active step index */
+    currentStep?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Step container CSS classes */
+    stepClassName?: string;
+    /** Progress indicator (e.g., "Etapa 2 de 4") */
+    showProgress?: boolean;
+    /** Custom progress text */
+    progressText?: string;
+    /** Make stepper responsive (vertical on mobile) */
+    responsive?: boolean;
+};
+/**
+ * Stepper component for Analytica Ensino platforms
+ *
+ * A progress stepper component that displays a sequence of steps with different states.
+ * Follows the exact design specifications with proper spacing, colors, and layout.
+ * Fully responsive for mobile, tablets, and laptops.
+ *
+ * Design specifications:
+ * - Based on exact CSS specifications from Figma design
+ * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)
+ * - Progressive sizing with responsive breakpoints that adapt to device type
+ * - Consistent gaps that scale with screen size and device capabilities
+ * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)
+ * - Responsive design with overflow scroll on smaller devices
+ * - Optimized text sizing and layout for each device category
+ *
+ * @example
+ * ```tsx
+ * // Basic stepper - automatically responsive for all devices
+ * <Stepper steps={steps} currentStep={1} />
+ *
+ * // Custom styling with full responsive behavior
+ * <Stepper steps={steps} size="medium" showProgress responsive />
+ * ```
+ */
+declare const Stepper: ({ steps: initialSteps, size, currentStep, className, stepClassName, showProgress, progressText, responsive, }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+export { Step, type StepData, type StepperProps, Stepper as default };

package/dist/Stepper/index.d.ts

@@ -0,0 +1,169 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Stepper size variants
+ */
+type StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * Step state variants
+ */
+type StepState = 'pending' | 'current' | 'completed';
+/**
+ * Individual step data interface
+ */
+interface StepData {
+    /** Unique identifier for the step */
+    id: string;
+    /** Label text for the step */
+    label: string;
+    /** Current state of the step */
+    state: StepState;
+}
+/**
+ * Size configurations - Following design system pattern from CSS specifications
+ * Small size based on exact CSS: width 58px, height 38px, gap 8px
+ */
+declare const SIZE_CLASSES: {
+    readonly small: {
+        readonly container: "gap-2";
+        readonly stepWidth: "w-[58px]";
+        readonly stepHeight: "h-[38px]";
+        readonly indicator: "w-5 h-5";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3 h-3";
+    };
+    readonly medium: {
+        readonly container: "gap-3";
+        readonly stepWidth: "w-[110px]";
+        readonly stepHeight: "h-[48px]";
+        readonly indicator: "w-6 h-6";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3.5 h-3.5";
+    };
+    readonly large: {
+        readonly container: "gap-4";
+        readonly stepWidth: "w-[160px]";
+        readonly stepHeight: "h-[58px]";
+        readonly indicator: "w-7 h-7";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly extraLarge: {
+        readonly container: "gap-5";
+        readonly stepWidth: "w-[200px]";
+        readonly stepHeight: "h-[68px]";
+        readonly indicator: "w-8 h-8";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-[18px] h-[18px]";
+    };
+};
+/**
+ * State configurations using exact colors from CSS specs
+ * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)
+ * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido
+ * completed: #1C61B2 = primary-800 (etapa concluída)
+ * text color: #FEFEFF = text
+ */
+declare const STATE_CLASSES: {
+    readonly pending: {
+        readonly progressBar: "bg-text-400";
+        readonly indicator: "bg-text-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-text-400";
+    };
+    readonly current: {
+        readonly progressBar: "bg-primary-800";
+        readonly indicator: "bg-primary-800";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-800";
+    };
+    readonly completed: {
+        readonly progressBar: "bg-primary-400";
+        readonly indicator: "bg-primary-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-400";
+    };
+};
+/**
+ * Type for size classes
+ */
+type SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];
+/**
+ * Type for state classes
+ */
+type StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];
+/**
+ * Props for individual step component
+ */
+interface StepProps {
+    step: StepData;
+    index: number;
+    size: StepperSize;
+    sizeClasses: SizeClassType;
+    stateClasses: StateClassType;
+    isLast: boolean;
+    className?: string;
+}
+/**
+ * Individual Step component - Based on exact design specifications
+ * Layout: flex-column with progress bar at top, then icon+label row
+ * Fully responsive for mobile, tablets, and laptops
+ */
+declare const Step: ({ step, index, size: _size, sizeClasses, stateClasses, isLast: _isLast, className, }: StepProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stepper component props interface
+ */
+type StepperProps = {
+    /** Array of step data */
+    steps: StepData[];
+    /** Size variant of the stepper */
+    size?: StepperSize;
+    /** Current active step index */
+    currentStep?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Step container CSS classes */
+    stepClassName?: string;
+    /** Progress indicator (e.g., "Etapa 2 de 4") */
+    showProgress?: boolean;
+    /** Custom progress text */
+    progressText?: string;
+    /** Make stepper responsive (vertical on mobile) */
+    responsive?: boolean;
+};
+/**
+ * Stepper component for Analytica Ensino platforms
+ *
+ * A progress stepper component that displays a sequence of steps with different states.
+ * Follows the exact design specifications with proper spacing, colors, and layout.
+ * Fully responsive for mobile, tablets, and laptops.
+ *
+ * Design specifications:
+ * - Based on exact CSS specifications from Figma design
+ * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)
+ * - Progressive sizing with responsive breakpoints that adapt to device type
+ * - Consistent gaps that scale with screen size and device capabilities
+ * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)
+ * - Responsive design with overflow scroll on smaller devices
+ * - Optimized text sizing and layout for each device category
+ *
+ * @example
+ * ```tsx
+ * // Basic stepper - automatically responsive for all devices
+ * <Stepper steps={steps} currentStep={1} />
+ *
+ * // Custom styling with full responsive behavior
+ * <Stepper steps={steps} size="medium" showProgress responsive />
+ * ```
+ */
+declare const Stepper: ({ steps: initialSteps, size, currentStep, className, stepClassName, showProgress, progressText, responsive, }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+export { Step, type StepData, type StepperProps, Stepper as default };