@rdsaude/pulso-react-components/dist/components/progress-indicator/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/progress-indicator/index.ts","../../../src/components/progress-indicator/progress-indicator.tsx","../../../src/utils/cn.ts","../../../src/utils/tv.ts","../../../src/components/progress-indicator/hooks/use-handler-progress.ts"],"sourcesContent":["export { ProgressIndicator } from './progress-indicator'\nexport type { ProgressIndicatorProps } from './progress-indicator'\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 { 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 { 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":["progress_indicator_exports","__export","ProgressIndicator","__toCommonJS","import_react","import_clsx","import_tailwind_merge","cn","input","import_tailwind_variants","tv","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"]}