@rdsaude/pulso-react-components/dist/components/stepper/index.cjs.map

Biblioteca de componentes React do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da RDSaúde. Ideal para desenvolver aplicações modernas e acessíveis.

{"version":3,"sources":["../../../src/components/stepper/index.ts","../../../src/components/stepper/stepper.tsx","../../../src/utils/tv.ts","../../../src/components/progress-indicator/progress-indicator.tsx","../../../src/utils/cn.ts","../../../src/components/progress-indicator/hooks/use-handler-progress.ts"],"sourcesContent":["export { Stepper } from './stepper'\nexport type { StepperProps } from './stepper'\n","import { forwardRef } from 'react'\n\nimport type { VariantProps } from 'tailwind-variants'\n\nimport { tv } from '~/utils/tv'\n\nimport { ProgressIndicator } from '../progress-indicator'\n\ntype Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7\n\ntype StepperProps = React.ComponentPropsWithoutRef<'div'> &\n  VariantProps<typeof stepperStyles> & {\n    /**\n     * Representa o progresso dos Steps\n     */\n    steps: Steps\n    /**\n     * Representa o passo atual\n     */\n    completed?: number\n    /**\n     * Texto que será exibido acima do Stepper\n     */\n    label?: boolean\n  }\n\nconst TOTAL_MAXIMUM_STEPS = 7\nconst COMPLETE_STEP = 100\nconst INCOMPLETE_STEP = 2\n\nexport const stepperStyles = tv({\n  base: `\n    flex min-h-8 w-full max-w-[1280px] min-w-80 flex-col overflow-hidden p-none\n    font-semibold bg-[var(--color-fill-neutral-default)] border-[var(--color-none)]\n    py-2 px-4 rounded-[var(--border-radius-none)] text-text-neutral-placeholder\n    text-threepulse leading-[150%] tracking-none\n  `,\n  variants: {\n    size: {\n      // @TODO - Exchange for a semantic token\n      nano: 'h-1',\n      pico: 'h-[0.125rem]',\n    },\n  },\n  defaultVariants: {\n    size: 'nano',\n  },\n})\n\nexport const progressContentStyles = tv({\n  base: 'flex w-full flex-row items-start justify-between',\n})\n\nexport const progressStyles = tv({\n  variants: {\n    spacing: {\n      first: 'ml-0',\n      default: 'ml-[0.5rem]',\n    },\n    width: {\n      // @TODO - Exchange for a semantic token\n      3: 'min-w-[6.5rem]',\n      4: 'min-w-[4.75rem]',\n      5: 'min-w-[3.75rem]',\n      6: 'min-w-12',\n      7: 'min-w-10',\n      default: 'min-w-48',\n    },\n  },\n})\n\nconst Stepper = forwardRef<HTMLDivElement, StepperProps>(\n  ({ steps, completed = 0, size, label = false, ...props }, ref) => {\n    if (steps > TOTAL_MAXIMUM_STEPS) {\n      throw new Error('O valor de \"steps\" não pode ser maior que 7.')\n    }\n\n    function getClassKeyWidthByStep(activeStep: Steps) {\n      if (activeStep === 1 || activeStep === 2) return 'default'\n\n      return activeStep\n    }\n\n    function getPercentageByStep(activeStep: number) {\n      return activeStep < completed ? COMPLETE_STEP : INCOMPLETE_STEP\n    }\n\n    function renderProgressIndicator() {\n      const progressData = Array.from({ length: steps }, (_, index) => {\n        const spacing = index === 0 ? 'first' : 'default'\n\n        return {\n          id: `stepper-${index}`,\n          percentage: getPercentageByStep(index),\n          className: progressStyles({\n            spacing,\n            width: getClassKeyWidthByStep(steps),\n          }),\n        }\n      })\n\n      return progressData.map(item => (\n        <ProgressIndicator\n          key={item.id}\n          aria-label={item.id}\n          aria-labelledby={item.id}\n          variant=\"neutral\"\n          size={size}\n          percentage={item.percentage}\n          className={item.className}\n        />\n      ))\n    }\n\n    return (\n      <div\n        className={stepperStyles({\n          size,\n        })}\n        ref={ref}\n        {...props}\n      >\n        {label && (\n          <span className=\"mb-[0.125rem] text-left leading-[150%]\">\n            Passo {completed} de {steps}\n          </span>\n        )}\n\n        <div className={progressContentStyles()}>\n          {renderProgressIndicator()}\n        </div>\n      </div>\n    )\n  }\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n","import { type VariantProps, createTV } from 'tailwind-variants'\n\nexport const tv = createTV({\n  twMerge: true,\n  twMergeConfig: {\n    extend: {\n      classGroups: {\n        'font-size': [\n          {\n            text: ['threepulse', 'threeandhalfpulse'],\n          },\n        ],\n        'border-width': [\n          {\n            border: ['quarterpulse', 'halfpulse'],\n          },\n        ],\n        '--tw-ring-inset': [\n          {\n            ring: ['none', 'quarterpulse', 'halfpulse'],\n          },\n        ],\n      },\n    },\n  },\n})\n\nexport type { VariantProps }\n","import { forwardRef } from 'react'\n\nimport type { VariantProps } from 'tailwind-variants'\n\nimport { cn } from '~/utils/cn'\nimport { tv } from '~/utils/tv'\n\nimport { useHandlerProgress } from './hooks/use-handler-progress'\n\ntype ProgressIndicatorProps = React.ComponentPropsWithoutRef<'div'> &\n  VariantProps<typeof progressIndicatorStyles> & {\n    /**\n     * Representa o progresso atual em porcentagem (0 a 100).\n     */\n    percentage?: number\n    /**\n     * Define o tempo estimado (em milissegundos) para o progresso atingir 100%.\n     */\n    duration?: number\n    /**\n     * Indica se o fundo do indicador deve ser transparente.\n     */\n    bgTransparent?: boolean\n    /**\n     * Callback acionado ao final do progresso, quando percentage atinge 100%.\n     */\n    onComplete?(): void\n  }\n\nexport const progressIndicatorStyles = tv({\n  base: 'flex w-full min-w-48 overflow-hidden rounded-pill p-none',\n  variants: {\n    variant: {\n      brand: '*:bg-action-fill-brand-primary-enabled',\n      neutral: '*:bg-text-neutral',\n      'neutral-readonly': '*:bg-text-neutral-readonly',\n      inverse: '*:bg-text-neutral-inverse',\n      informative: '*:bg-text-informative-alternative',\n      success: '*:bg-text-success-alternative',\n      warning: '*:bg-text-warning-alternative',\n      danger: '*:bg-text-danger-alternative',\n    },\n    size: {\n      tiny: 'h-tiny',\n      // @TODO - Exchange for a semantic token\n      mini: 'h-3',\n      micro: 'h-2',\n      nano: 'h-1',\n      pico: 'h-[0.125rem]',\n    },\n  },\n  defaultVariants: {\n    variant: 'brand',\n    size: 'tiny',\n  },\n})\n\nconst ProgressIndicator = forwardRef<HTMLDivElement, ProgressIndicatorProps>(\n  (\n    {\n      variant,\n      size,\n      percentage = 0,\n      duration = 0,\n      onComplete,\n      bgTransparent,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    if (percentage > 0 && duration) {\n      throw new Error(\n        \"As propriedades 'percentage' e 'duration' são mutuamente exclusivas. Por favor, forneça apenas uma delas.\"\n      )\n    }\n\n    if (!props['aria-labelledby']) {\n      console.warn(\n        'A propriedade \"aria-labelledby\" é obrigatória para acessibilidade. Por favor, forneça um rótulo para o componente.'\n      )\n    }\n\n    const {\n      currentPercentage,\n      PROGRESS_INDICATOR_MIN_VALUE,\n      PROGRESS_INDICATOR_MAX_VALUE,\n    } = useHandlerProgress(percentage, duration, onComplete)\n\n    const classname = cn(\n      progressIndicatorStyles({\n        variant,\n        size,\n        className: bgTransparent\n          ? 'bg-transparent'\n          : 'bg-[--color-fill-neutral-fallback]',\n      }),\n      className\n    )\n\n    return (\n      <div\n        {...props}\n        role=\"meter\"\n        ref={ref}\n        className={classname}\n        style={\n          // @TODO - Exchange for a semantic token\n          {\n            '--color-fill-neutral-fallback': '#E6E6E6',\n            '--progress-width': `${currentPercentage}%`,\n          } as Record<string, string>\n        }\n        aria-valuenow={currentPercentage}\n        aria-valuemin={PROGRESS_INDICATOR_MIN_VALUE}\n        aria-valuemax={PROGRESS_INDICATOR_MAX_VALUE}\n      >\n        <span\n          className={cn(\n            'block h-full w-[--progress-width] rounded-tr-pill rounded-br-pill transition-transform ease-linear'\n          )}\n        />\n      </div>\n    )\n  }\n)\n\nProgressIndicator.displayName = 'ProgressIndicator'\n\nexport { ProgressIndicator }\nexport type { ProgressIndicatorProps }\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport const cn = (...input: ClassValue[]) => twMerge(clsx(...input))\n","import { useEffect, useState } from 'react'\n\nexport function useHandlerProgress(\n  percentage: number,\n  duration: number,\n  onComplete?: () => void\n) {\n  const PROGRESS_INDICATOR_MIN_VALUE = 0\n  const PROGRESS_INDICATOR_MAX_VALUE = 100\n\n  const [currentPercentage, setCurrentPercentage] = useState(\n    Math.min(\n      Math.max(percentage, PROGRESS_INDICATOR_MIN_VALUE),\n      PROGRESS_INDICATOR_MAX_VALUE\n    )\n  )\n\n  useEffect(() => {\n    setCurrentPercentage(\n      Math.min(\n        Math.max(percentage, PROGRESS_INDICATOR_MIN_VALUE),\n        PROGRESS_INDICATOR_MAX_VALUE\n      )\n    )\n\n    if (percentage === PROGRESS_INDICATOR_MAX_VALUE && onComplete) {\n      onComplete()\n    }\n  }, [percentage, onComplete])\n\n  useEffect(() => {\n    if (duration) {\n      const interval = duration / PROGRESS_INDICATOR_MAX_VALUE\n      let progress = PROGRESS_INDICATOR_MIN_VALUE\n\n      const intervalId = setInterval(() => {\n        progress += 1\n        setCurrentPercentage(prev =>\n          Math.min(Math.max(prev + 1, 0), PROGRESS_INDICATOR_MAX_VALUE)\n        )\n\n        if (progress >= PROGRESS_INDICATOR_MAX_VALUE) {\n          clearInterval(intervalId)\n          onComplete?.()\n        }\n      }, interval)\n\n      return () => clearInterval(intervalId)\n    }\n  }, [duration, onComplete])\n\n  return {\n    currentPercentage,\n    PROGRESS_INDICATOR_MIN_VALUE,\n    PROGRESS_INDICATOR_MAX_VALUE,\n  }\n}\n"],"mappings":"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","names":["stepper_exports","__export","Stepper","__toCommonJS","import_react","import_tailwind_variants","tv","import_react","import_clsx","import_tailwind_merge","cn","input","import_react","useHandlerProgress","percentage","duration","onComplete","currentPercentage","setCurrentPercentage","interval","progress","intervalId","prev","import_jsx_runtime","progressIndicatorStyles","tv","ProgressIndicator","_a","ref","_b","variant","size","percentage","duration","onComplete","bgTransparent","className","props","__objRest","currentPercentage","PROGRESS_INDICATOR_MIN_VALUE","PROGRESS_INDICATOR_MAX_VALUE","useHandlerProgress","classname","cn","__spreadProps","__spreadValues","import_jsx_runtime","TOTAL_MAXIMUM_STEPS","COMPLETE_STEP","INCOMPLETE_STEP","stepperStyles","tv","progressContentStyles","progressStyles","Stepper","_a","ref","_b","steps","completed","size","label","props","__objRest","getClassKeyWidthByStep","activeStep","getPercentageByStep","renderProgressIndicator","_","index","spacing","item","ProgressIndicator","__spreadProps","__spreadValues"]}