analytica-frontend-lib 1.0.45 → 1.0.46

package/dist/Stepper/index.mjs

@@ -0,0 +1,354 @@
+// src/components/Text/Text.tsx
+import { jsx } from "react/jsx-runtime";
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/Stepper/Stepper.tsx
+import { Check } from "phosphor-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  small: {
+    container: "gap-2",
+    // 8px gap as specified in CSS
+    stepWidth: "w-[58px]",
+    // exact 58px from CSS
+    stepHeight: "h-[38px]",
+    // exact 38px from CSS
+    indicator: "w-5 h-5",
+    // 20px as specified
+    progressBar: "h-0.5",
+    // 2px as specified
+    indicatorTextSize: "2xs",
+    // 10px as specified
+    labelTextSize: "xs",
+    // 12px as specified
+    iconSize: "w-3 h-3"
+    // 12px
+  },
+  medium: {
+    container: "gap-3",
+    // 12px (8px + 4px progression)
+    stepWidth: "w-[110px]",
+    // 110px (increased from 90px to fit "Endereço Residencial")
+    stepHeight: "h-[48px]",
+    // 48px (increased from 46px for better proportion)
+    indicator: "w-6 h-6",
+    // 24px (20px + 4px progression)
+    progressBar: "h-0.5",
+    // 2px maintained for consistency
+    indicatorTextSize: "2xs",
+    // 10px maintained for readability
+    labelTextSize: "xs",
+    // 12px maintained
+    iconSize: "w-3.5 h-3.5"
+    // 14px
+  },
+  large: {
+    container: "gap-4",
+    // 16px (12px + 4px progression)
+    stepWidth: "w-[160px]",
+    // 160px (increased from 140px to fit "Endereço Residencial")
+    stepHeight: "h-[58px]",
+    // 58px (increased from 54px for better proportion)
+    indicator: "w-7 h-7",
+    // 28px (24px + 4px progression)
+    progressBar: "h-1",
+    // 4px (increased for better visibility)
+    indicatorTextSize: "xs",
+    // 12px (increased for larger size)
+    labelTextSize: "sm",
+    // 14px (increased for larger size)
+    iconSize: "w-4 h-4"
+    // 16px
+  },
+  extraLarge: {
+    container: "gap-5",
+    // 20px (16px + 4px progression)
+    stepWidth: "w-[200px]",
+    // 200px (increased from 180px to ensure "Endereço Residencial" fits)
+    stepHeight: "h-[68px]",
+    // 68px (increased from 62px for better proportion)
+    indicator: "w-8 h-8",
+    // 32px (28px + 4px progression)
+    progressBar: "h-1",
+    // 4px maintained
+    indicatorTextSize: "xs",
+    // 12px maintained for readability
+    labelTextSize: "sm",
+    // 14px maintained
+    iconSize: "w-[18px] h-[18px]"
+    // 18px
+  }
+};
+var STATE_CLASSES = {
+  pending: {
+    progressBar: "bg-text-400",
+    // #A3A3A3
+    indicator: "bg-text-400",
+    // #A3A3A3
+    indicatorText: "text-white",
+    // Branco para contraste com background cinza
+    label: "text-text-400"
+    // #A3A3A3
+  },
+  current: {
+    progressBar: "bg-primary-800",
+    // #1C61B2 usando classe Tailwind padrão
+    indicator: "bg-primary-800",
+    // #1C61B2 usando classe Tailwind padrão
+    indicatorText: "text-white",
+    // Branco usando classe Tailwind padrão
+    label: "text-primary-800"
+    // #1C61B2 usando classe Tailwind padrão
+  },
+  completed: {
+    progressBar: "bg-primary-400",
+    // #48A0E8 para barra quando checked (completed)
+    indicator: "bg-primary-400",
+    // #48A0E8 para corresponder à barra de progresso
+    indicatorText: "text-white",
+    // Branco usando classe Tailwind padrão
+    label: "text-primary-400"
+    // #48A0E8 para corresponder à barra de progresso
+  }
+};
+var Step = ({
+  step,
+  index,
+  size: _size,
+  sizeClasses,
+  stateClasses,
+  isLast: _isLast,
+  className = ""
+}) => {
+  const stepNumber = index + 1;
+  const isCompleted = step.state === "completed";
+  const getAriaLabel = () => {
+    let suffix = "";
+    if (step.state === "completed") {
+      suffix = " (conclu\xEDdo)";
+    } else if (step.state === "current") {
+      suffix = " (atual)";
+    }
+    return `${step.label}${suffix}`;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        flex flex-col justify-center items-center pb-2 gap-2
+        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}
+        flex-none flex-grow
+        ${className}
+        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none
+        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none
+        overflow-visible
+      `,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: `
+          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}
+          rounded-sm flex-none
+        `
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `
+          flex flex-col sm:flex-row items-center
+          gap-1 sm:gap-2 w-full sm:w-auto
+          h-auto sm:h-5 flex-none
+          overflow-visible
+        `,
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: `
+            ${sizeClasses.indicator} ${stateClasses.indicator}
+            rounded-full flex items-center justify-center relative
+            flex-none transition-all duration-300 ease-out
+            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6
+          `,
+                  "aria-label": getAriaLabel(),
+                  children: isCompleted ? /* @__PURE__ */ jsx2(
+                    Check,
+                    {
+                      weight: "bold",
+                      className: `
+                ${stateClasses.indicatorText}
+                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5
+              `
+                    }
+                  ) : /* @__PURE__ */ jsx2(
+                    Text_default,
+                    {
+                      size: sizeClasses.indicatorTextSize,
+                      weight: "medium",
+                      color: "",
+                      className: `${stateClasses.indicatorText} leading-none text-2xs sm:text-xs`,
+                      children: stepNumber
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Text_default,
+                {
+                  size: sizeClasses.labelTextSize,
+                  weight: "medium",
+                  color: "",
+                  className: `
+            ${stateClasses.label} leading-tight flex-none
+            text-center sm:text-left break-words
+            px-1 sm:px-0 max-w-full
+            text-2xs sm:text-xs md:text-xs lg:text-sm
+            whitespace-normal
+          `,
+                  children: step.label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var calculateStepStates = (steps, currentStep) => {
+  return steps.map((step, index) => {
+    let stepState;
+    if (index < currentStep) {
+      stepState = "completed";
+    } else if (index === currentStep) {
+      stepState = "current";
+    } else {
+      stepState = "pending";
+    }
+    return {
+      ...step,
+      state: stepState
+    };
+  });
+};
+var getProgressText = (currentStep, totalSteps, customText) => {
+  if (customText) return customText;
+  return `Etapa ${currentStep + 1} de ${totalSteps}`;
+};
+var Stepper = ({
+  steps: initialSteps,
+  size = "medium",
+  currentStep,
+  className = "",
+  stepClassName = "",
+  showProgress = false,
+  progressText,
+  responsive = true
+}) => {
+  const sizeClasses = SIZE_CLASSES[size];
+  const steps = currentStep !== void 0 ? calculateStepStates(initialSteps, currentStep) : initialSteps;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: `flex flex-col gap-4 sm:gap-5 md:gap-6 ${className} border-0 p-0 m-0`,
+      children: [
+        /* @__PURE__ */ jsx2("legend", { className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", children: "Stepper de formul\xE1rio" }),
+        showProgress && currentStep !== void 0 && /* @__PURE__ */ jsx2(
+          Text_default,
+          {
+            size: "sm",
+            weight: "medium",
+            className: "text-text-600 text-center sm:text-left text-xs sm:text-sm",
+            children: getProgressText(currentStep, steps.length, progressText)
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: `
+          flex items-center
+          ${sizeClasses.container}
+          ${responsive ? "flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center" : "flex-row justify-center"}
+          px-2 sm:px-4 md:px-6 lg:px-0
+          max-w-full min-w-0
+          gap-2 sm:gap-3 md:gap-4 lg:gap-4
+        `,
+            role: "tablist",
+            "aria-label": "Progress steps",
+            children: steps.map((step, index) => {
+              const stateClasses = STATE_CLASSES[step.state];
+              return /* @__PURE__ */ jsx2(
+                Step,
+                {
+                  step,
+                  index,
+                  size,
+                  sizeClasses,
+                  stateClasses,
+                  isLast: index === steps.length - 1,
+                  className: stepClassName
+                },
+                step.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+var Stepper_default = Stepper;
+export {
+  Step,
+  Stepper_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Stepper/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n","// ReactNode removed as it's not used in this component\nimport Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n  /** Unique identifier for the step */\n  id: string;\n  /** Label text for the step */\n  label: string;\n  /** Current state of the step */\n  state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'gap-2', // 8px gap as specified in CSS\n    stepWidth: 'w-[58px]', // exact 58px from CSS\n    stepHeight: 'h-[38px]', // exact 38px from CSS\n    indicator: 'w-5 h-5', // 20px as specified\n    progressBar: 'h-0.5', // 2px as specified\n    indicatorTextSize: '2xs', // 10px as specified\n    labelTextSize: 'xs', // 12px as specified\n    iconSize: 'w-3 h-3', // 12px\n  },\n  medium: {\n    container: 'gap-3', // 12px (8px + 4px progression)\n    stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n    indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n    progressBar: 'h-0.5', // 2px maintained for consistency\n    indicatorTextSize: '2xs', // 10px maintained for readability\n    labelTextSize: 'xs', // 12px maintained\n    iconSize: 'w-3.5 h-3.5', // 14px\n  },\n  large: {\n    container: 'gap-4', // 16px (12px + 4px progression)\n    stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n    stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n    indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n    progressBar: 'h-1', // 4px (increased for better visibility)\n    indicatorTextSize: 'xs', // 12px (increased for larger size)\n    labelTextSize: 'sm', // 14px (increased for larger size)\n    iconSize: 'w-4 h-4', // 16px\n  },\n  extraLarge: {\n    container: 'gap-5', // 20px (16px + 4px progression)\n    stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n    stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n    indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n    progressBar: 'h-1', // 4px maintained\n    indicatorTextSize: 'xs', // 12px maintained for readability\n    labelTextSize: 'sm', // 14px maintained\n    iconSize: 'w-[18px] h-[18px]', // 18px\n  },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n  pending: {\n    progressBar: 'bg-text-400', // #A3A3A3\n    indicator: 'bg-text-400', // #A3A3A3\n    indicatorText: 'text-white', // Branco para contraste com background cinza\n    label: 'text-text-400', // #A3A3A3\n  },\n  current: {\n    progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n  },\n  completed: {\n    progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n    indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n    indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n    label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n  },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n  step: StepData;\n  index: number;\n  size: StepperSize;\n  sizeClasses: SizeClassType;\n  stateClasses: StateClassType;\n  isLast: boolean;\n  className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n  step,\n  index,\n  size: _size,\n  sizeClasses,\n  stateClasses,\n  isLast: _isLast,\n  className = '',\n}: StepProps) => {\n  const stepNumber = index + 1;\n  const isCompleted = step.state === 'completed';\n\n  // Generate accessible aria-label based on step state\n  const getAriaLabel = () => {\n    let suffix = '';\n    if (step.state === 'completed') {\n      suffix = ' (concluído)';\n    } else if (step.state === 'current') {\n      suffix = ' (atual)';\n    }\n    return `${step.label}${suffix}`;\n  };\n\n  return (\n    <div\n      className={`\n        flex flex-col justify-center items-center pb-2 gap-2\n        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n        flex-none flex-grow\n        ${className}\n        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n        overflow-visible\n      `}\n    >\n      {/* Progress Bar - Full width at top with responsive scaling */}\n      <div\n        className={`\n          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n          rounded-sm flex-none\n        `}\n      />\n\n      {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n      <div\n        className={`\n          flex flex-col sm:flex-row items-center\n          gap-1 sm:gap-2 w-full sm:w-auto\n          h-auto sm:h-5 flex-none\n          overflow-visible\n        `}\n      >\n        {/* Step Indicator Circle with responsive sizing */}\n        <div\n          className={`\n            ${sizeClasses.indicator} ${stateClasses.indicator}\n            rounded-full flex items-center justify-center relative\n            flex-none transition-all duration-300 ease-out\n            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n          `}\n          aria-label={getAriaLabel()}\n        >\n          {isCompleted ? (\n            <Check\n              weight=\"bold\"\n              className={`\n                ${stateClasses.indicatorText}\n                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n              `}\n            />\n          ) : (\n            <Text\n              size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n              weight=\"medium\"\n              color=\"\"\n              className={`${stateClasses.indicatorText} leading-none text-2xs sm:text-xs`}\n            >\n              {stepNumber}\n            </Text>\n          )}\n        </div>\n\n        {/* Step Label with full responsive text sizing, no vertical overflow */}\n        <Text\n          size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n          weight=\"medium\"\n          color=\"\"\n          className={`\n            ${stateClasses.label} leading-tight flex-none\n            text-center sm:text-left break-words\n            px-1 sm:px-0 max-w-full\n            text-2xs sm:text-xs md:text-xs lg:text-sm\n            whitespace-normal\n          `}\n        >\n          {step.label}\n        </Text>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n  /** Array of step data */\n  steps: StepData[];\n  /** Size variant of the stepper */\n  size?: StepperSize;\n  /** Current active step index */\n  currentStep?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Step container CSS classes */\n  stepClassName?: string;\n  /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n  showProgress?: boolean;\n  /** Custom progress text */\n  progressText?: string;\n  /** Make stepper responsive (vertical on mobile) */\n  responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n  steps: StepData[],\n  currentStep: number\n): StepData[] => {\n  return steps.map((step, index) => {\n    let stepState: StepState;\n\n    if (index < currentStep) {\n      stepState = 'completed';\n    } else if (index === currentStep) {\n      stepState = 'current';\n    } else {\n      stepState = 'pending';\n    }\n\n    return {\n      ...step,\n      state: stepState,\n    };\n  });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n  currentStep: number,\n  totalSteps: number,\n  customText?: string\n): string => {\n  if (customText) return customText;\n  return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n  steps: initialSteps,\n  size = 'medium',\n  currentStep,\n  className = '',\n  stepClassName = '',\n  showProgress = false,\n  progressText,\n  responsive = true,\n}: StepperProps) => {\n  const sizeClasses = SIZE_CLASSES[size];\n\n  // Calculate steps with states if currentStep is provided\n  const steps =\n    currentStep !== undefined\n      ? calculateStepStates(initialSteps, currentStep)\n      : initialSteps;\n\n  return (\n    <fieldset\n      className={`flex flex-col gap-4 sm:gap-5 md:gap-6 ${className} border-0 p-0 m-0`}\n    >\n      <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n        Stepper de formulário\n      </legend>\n      {/* Progress indicator with responsive text */}\n      {showProgress && currentStep !== undefined && (\n        <Text\n          size=\"sm\"\n          weight=\"medium\"\n          className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n        >\n          {getProgressText(currentStep, steps.length, progressText)}\n        </Text>\n      )}\n\n      {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n      <div\n        className={`\n          flex items-center\n          ${sizeClasses.container}\n          ${\n            responsive\n              ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n              : 'flex-row justify-center'\n          }\n          px-2 sm:px-4 md:px-6 lg:px-0\n          max-w-full min-w-0\n          gap-2 sm:gap-3 md:gap-4 lg:gap-4\n        `}\n        role=\"tablist\"\n        aria-label=\"Progress steps\"\n      >\n        {steps.map((step, index) => {\n          const stateClasses = STATE_CLASSES[step.state];\n\n          return (\n            <Step\n              key={step.id}\n              step={step}\n              index={index}\n              size={size}\n              sizeClasses={sizeClasses}\n              stateClasses={stateClasses}\n              isLast={index === steps.length - 1}\n              className={stepClassName}\n            />\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n};\n\nexport default Stepper;\n"],"mappings":"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","names":["jsx"]}