@rdsaude/pulso-react-components/dist/components/tag/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/tag/index.ts","../../../src/components/tag/tag.tsx","../../../src/hooks/use-theme.ts","../../../src/components/theme-provider/theme-provider.tsx","../../../src/components/icon/utils/get-icon-color.ts","../../../src/components/icon/utils/get-icon-size.ts","../../../src/components/icon/icon.tsx","../../../src/components/tag/components/tag-icon/index.tsx","../../../src/utils/tv.ts","../../../src/components/tag/components/tag-label/tag-label.styles.ts","../../../src/components/tag/components/tag-label/index.tsx","../../../src/components/tag/tag.styles.ts"],"sourcesContent":["export { Tag } from './tag'\nexport type { TagProps } from './tag.types'\n","import { type Scope, createContextScope } from '@radix-ui/react-context'\nimport { TagIcon } from './components/tag-icon'\nimport { TagLabel } from './components/tag-label'\nimport { TagRootVariants } from './tag.styles'\nimport type { TagContext, TagProps, TagScopedProps } from './tag.types'\n\nexport const DISPLAY_NAME = 'Tag'\n\ntype TagRootProps = TagProps\n\nconst TagRoot = (props: TagRootProps) => {\n  const { children, variants, __scopeTag } =\n    props as TagScopedProps<TagRootProps>\n\n  return (\n    <TagProvider variants={variants} scope={__scopeTag}>\n      <div\n        data-testid=\"tag-root\"\n        className={TagRootVariants({\n          variants,\n        })}\n        style={\n          {\n            '--color-labeling-fill-onSale-default': '#2A8352',\n            '--color-labeling-fill-principal-default': '#303030',\n            '--color-labeling-fill-secondary-default': '#E6E6E6',\n            '--color-labeling-fill-clubeRaia-default': '#FCE6CF',\n            '--color-labeling-fill-clubeDrogasil-default': '#FCE6CF',\n            '--color-labeling-fill-assinatura-default': '#F1E9FE',\n            '--color-labeling-fill-medicamentoGeladeira-default': '#E6F3FE',\n            '--color-labeling-fill-receitaObrigatoria-default': '#E6F3FE',\n            '--color-labeling-fill-generico-default': '#FEFAA4',\n            '--color-labeling-fill-referencia-default': '#E6E6E6',\n            '--color-labeling-fill-similar-default': '#CFE8FC',\n\n            '--color-labeling-text-onSale-default': '#FFF',\n            '--color-labeling-text-principal-default': '#F2F2F2',\n            '--color-labeling-text-secondary-default': '#424242',\n            '--color-labeling-text-clubeRaia-default': '#9F540F',\n            '--color-labeling-text-clubeDrogasil-default': '#9F540F',\n            '--color-labeling-text-assinatura-default': '#5F28BD',\n            '--color-labeling-text-medicamentoGeladeira-default': '#3471A2',\n            '--color-labeling-text-receitaObrigatoria-default': '#3471A2',\n            '--color-labeling-text-generico-default': '#7A4D0B',\n            '--color-labeling-text-referencia-default': '#424242',\n            '--color-labeling-text-similar-default': '#204664',\n          } as Record<string, string>\n        }\n      >\n        {children}\n      </div>\n    </TagProvider>\n  )\n}\n\nconst [createTagContext] = createContextScope(DISPLAY_NAME)\n\nexport const [TagProvider, useTagContext]: readonly [\n  ProviderType<TagContext>,\n  (consumerName: string, scope: Scope) => TagContext,\n] = createTagContext<TagContext>(DISPLAY_NAME)\n\n/*\n----------------------------------------------------------------\nComposition Export\n----------------------------------------------------------------\n*/\n\nexport const Tag = {\n  Root: TagRoot,\n  Label: TagLabel,\n  Icon: TagIcon,\n}\n","import {\n  DROGASIL_TOKENS,\n  GLOBALS_TOKENS,\n  PRIME_TOKENS,\n  RAIA_TOKENS,\n  RDSAUDESISTEMAS_TOKENS,\n  SUBSCRIPTION_TOKENS,\n} from '@raiadrogasil/pulso-design-tokens'\n\nimport { useContext } from 'react'\n\nimport { ThemeContext } from '~/components/theme-provider/theme-provider'\n\nexport function useTheme() {\n  const { currentTheme } = useContext(ThemeContext)\n\n  const themes = {\n    rdsaudesistemas: RDSAUDESISTEMAS_TOKENS,\n    drogasil: DROGASIL_TOKENS,\n    raia: RAIA_TOKENS,\n    subscription: SUBSCRIPTION_TOKENS,\n    prime: PRIME_TOKENS,\n  }\n\n  return {\n    ...themes[currentTheme],\n    ...GLOBALS_TOKENS,\n  }\n}\n","import { createContext, useEffect } from 'react'\n\nimport type { Themes } from '@raiadrogasil/pulso-design-tokens'\n\ntype TThemeContextData = {\n  currentTheme: Themes\n}\n\ninterface IThemeProviderProps {\n  children: React.ReactNode\n  theme: Themes\n}\n\nexport const ThemeContext = createContext({} as TThemeContextData)\n\nexport function ThemeProvider({ children, theme }: IThemeProviderProps) {\n  useEffect(() => {\n    if (theme && document) {\n      document?.documentElement?.classList?.add(theme)\n    }\n\n    return () => {\n      document?.documentElement?.classList?.remove(theme)\n    }\n  }, [theme])\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        currentTheme: theme,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n","import type { TIconColors } from '../icon.types'\n\nimport { useTheme } from '~/hooks/use-theme'\n\nexport function getColorIcon(color: keyof TIconColors) {\n  const theme = useTheme()\n  const allTokens = Object.keys(theme)\n\n  const colorTokens = allTokens.reduce((acc, tokenKey) => {\n    if (tokenKey.includes('color')) {\n      const colorToken = tokenKey as keyof TIconColors\n      acc[colorToken] = theme[colorToken]\n    }\n\n    return acc\n  }, {} as TIconColors)\n\n  return colorTokens[color]\n}\n","export const getIconSize = {\n  tiny: 'var(--sizing-tiny)',\n  'extra-small': 'var(--sizing-extrasmall)',\n  small: 'var(--sizing-small)',\n  medium: 'var(--sizing-medium)',\n}\n","import type { TIconProps } from './icon.types'\n\nimport { getColorIcon } from './utils/get-icon-color'\nimport { getIconSize } from './utils/get-icon-size'\n\nexport function Icon({\n  symbol = 'rdicon-default',\n  size = 'small',\n  color = 'colorActionFillBrandPrimaryEnabled',\n  ...props\n}: TIconProps) {\n  const symbolName = symbol.replace('rdicon', '').trim()\n\n  return (\n    <i\n      {...props}\n      title={symbolName}\n      className={symbol}\n      style={{\n        fontSize: getIconSize[size],\n        color: getColorIcon(color),\n      }}\n    />\n  )\n}\n\nexport type { TIconProps }\n","import { Icon, type TIconProps } from '~/components/icon'\nimport { DISPLAY_NAME, useTagContext } from '../../tag'\nimport type { TagScopedProps } from '../../tag.types'\n\ntype TagIconProps = TIconProps\n\nexport const TagIcon = (props: TagIconProps) => {\n  const { symbol, __scopeTag } = props as TagScopedProps<TagIconProps>\n  const { variants } = useTagContext(DISPLAY_NAME, __scopeTag)\n\n  const mapVariantColor: Record<string, TIconProps['color']> = {\n    principal: 'colorLabelingTextPrincipalDefault',\n    secondary: 'colorLabelingTextSecondaryDefault',\n    onSale: 'colorLabelingTextOnsaleDefault',\n    clubeDrogasil: 'colorLabelingTextClubeDefault',\n    clubeRaia: 'colorLabelingTextClubeDefault',\n    assinatura: 'colorLabelingTextAssinaturaDefault',\n    medicamentoGeladeira: 'colorLabelingTextRefrigerateDefault',\n    receitaObrigatoria: 'colorLabelingTextPrescriptionDefault',\n    generico: 'colorLabelingTextGenericoDefault',\n    referencia: 'colorLabelingTextReferenciaDefault',\n    similar: 'colorLabelingTextSimilarDefault',\n  }\n\n  const renderIconSymbol = () => {\n    if (variants === 'onSale') {\n      return 'rdicon-arrow-down'\n    }\n    return symbol\n  }\n\n  return (\n    <Icon\n      symbol={renderIconSymbol()}\n      color={mapVariantColor[variants]}\n      size=\"tiny\"\n      data-testid=\"tag-icon\"\n    />\n  )\n}\n","import { type VariantProps, createTV } from 'tailwind-variants'\n\nexport const tv = createTV({\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 { tv } from '~/utils/tv'\nexport const TagLabelVariants = tv({\n  base: `\n    h-extrasmall font-semibold text-threepulse font-rdmodern\n    leading-medium text-center whitespace-nowrap truncate\n  `,\n  variants: {\n    // @TODO adicionar os tokens quando eles forem atualizados\n    variants: {\n      onSale: 'text-[var(--color-labeling-text-onSale-default)]',\n      principal: 'text-[var(--color-labeling-text-principal-default)]',\n      secondary: 'text-[var(--color-labeling-text-secondary-default)]',\n      clubeRaia: 'text-[var(--color-labeling-text-clubeRaia-default)]',\n      clubeDrogasil: 'text-[var(--color-labeling-text-clubeDrogasil-default)]',\n      assinatura: 'text-[var(--color-labeling-text-assinatura-default)]',\n      medicamentoGeladeira:\n        'text-[var(--color-labeling-text-medicamentoGeladeira-default)]',\n      receitaObrigatoria:\n        'text-[var(--color-labeling-text-receitaObrigatoria-default)]',\n      generico: 'text-[var(--color-labeling-text-generico-default)]',\n      referencia: 'text-[var(--color-labeling-text-referencia-default)]',\n      similar: 'text-[var(--color-labeling-text-similar-default)]',\n    },\n  },\n})\n","import { DISPLAY_NAME, useTagContext } from '../../tag'\nimport type { TagScopedProps } from '../../tag.types'\n\nimport { TagLabelVariants } from './tag-label.styles'\n\ntype TagLabelProps = {\n  children: React.ReactNode\n}\n\nexport const TagLabel = (props: TagLabelProps) => {\n  const { children, __scopeTag } = props as TagScopedProps<TagLabelProps>\n  const { variants } = useTagContext(DISPLAY_NAME, __scopeTag)\n\n  const labelText = children?.toString() ?? ''\n\n  let percentage = 0\n\n  const regexPattern = /\\d+/g\n\n  if (variants === 'onSale' && regexPattern.test(labelText)) {\n    const [stringfiyPercentageValue] = labelText.match(regexPattern) ?? []\n    const percentageValue = Number(stringfiyPercentageValue)\n\n    if (percentageValue >= 0 && percentageValue <= 100) {\n      percentage = percentageValue\n    }\n  }\n\n  return (\n    <p className={TagLabelVariants({ variants })} data-testid=\"tag-label\">\n      {variants === 'onSale' ? `${percentage}%` : labelText}\n    </p>\n  )\n}\n","import { tv } from '~/utils/tv'\n\nexport const TagRootVariants = tv({\n  base: `\n  flex items-center justify-center h-small min-w-small rounded-pill px-twopulse gap-halfpulse max-w-[16rem]\n  `,\n  variants: {\n    // @TODO adicionar os tokens quando eles forem atualizados\n    variants: {\n      onSale: 'bg-[var(--color-labeling-fill-onSale-default)]',\n      principal: 'bg-[var(--color-labeling-fill-principal-default)]',\n      secondary: 'bg-[var(--color-labeling-fill-secondary-default)]',\n      clubeRaia: 'bg-[var(--color-labeling-fill-clubeRaia-default)]',\n      clubeDrogasil: 'bg-[var(--color-labeling-fill-clubeDrogasil-default)]',\n      assinatura: 'bg-[var(--color-labeling-fill-assinatura-default)]',\n      medicamentoGeladeira:\n        'bg-[var(--color-labeling-fill-medicamentoGeladeira-default)]',\n      receitaObrigatoria:\n        'bg-[var(--color-labeling-fill-receitaObrigatoria-default)]',\n      generico: 'bg-[var(--color-labeling-fill-generico-default)]',\n      referencia: 'bg-[var(--color-labeling-fill-referencia-default)]',\n      similar: 'bg-[var(--color-labeling-fill-similar-default)]',\n    },\n  },\n})\n"],"mappings":"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","names":["tag_exports","__export","Tag","__toCommonJS","import_react_context","import_pulso_design_tokens","import_react","import_react","import_jsx_runtime","ThemeContext","useTheme","currentTheme","ThemeContext","__spreadValues","getColorIcon","color","theme","useTheme","acc","tokenKey","colorToken","getIconSize","import_jsx_runtime","Icon","_a","_b","symbol","size","color","props","__objRest","symbolName","__spreadProps","__spreadValues","getIconSize","getColorIcon","import_jsx_runtime","TagIcon","props","symbol","__scopeTag","variants","useTagContext","DISPLAY_NAME","mapVariantColor","Icon","import_tailwind_variants","tv","TagLabelVariants","tv","import_jsx_runtime","TagLabel","props","_a","_b","children","__scopeTag","variants","useTagContext","DISPLAY_NAME","labelText","percentage","regexPattern","stringfiyPercentageValue","percentageValue","TagLabelVariants","TagRootVariants","tv","import_jsx_runtime","DISPLAY_NAME","TagRoot","props","children","variants","__scopeTag","TagProvider","TagRootVariants","createTagContext","useTagContext","Tag","TagLabel","TagIcon"]}