@rdsaude/pulso-react-components
Version:
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.
1 lines • 14.1 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/components/tag/index.ts","../../../src/components/tag/tag.tsx","../../../src/components/icon/index.tsx","../../../src/hooks/use-theme.ts","../../../src/components/theme-provider/index.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 data-testid=\"tag-root\" className={TagRootVariants({ variants })}>\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 * as React from 'react'\n\nimport type { RDSAUDESISTEMAS_TOKENS } from '@raiadrogasil/pulso-design-tokens'\nimport type { IconName } from '@raiadrogasil/pulso-icons'\n\nimport { useTheme } from '~/hooks/use-theme'\n\ntype IconVisualSize = 'tiny' | 'extra-small' | 'small' | 'medium'\ntype DesignTokens = typeof RDSAUDESISTEMAS_TOKENS\n\ntype TokenColorKeys = {\n [K in keyof DesignTokens as K extends `color${string}`\n ? K\n : never]: DesignTokens[K]\n}\n\n/**\n * Propriedades do componente Icon.\n */\nexport type IconProps = React.ComponentProps<'i'> & {\n /**\n * Define o ícone a ser exibido, com base na lista de nomes disponíveis em `@raiadrogasil/pulso-icons`.\n *\n * @default 'rdicon-default'\n */\n symbol?: IconName\n\n /**\n * Define o tamanho visual do ícone, controlando o `font-size` com base nos tokens de espaçamento.\n *\n * Valores possíveis: 'tiny', 'extra-small', 'small', 'medium'.\n *\n * @default 'small'\n */\n size?: IconVisualSize\n\n /**\n * Define a cor do ícone usando uma chave de token de cor do design system.\n * A cor é aplicada via `style.color`.\n *\n * @default 'colorActionFillBrandPrimaryEnabled'\n */\n color?: keyof TokenColorKeys\n}\n\nexport function Icon({\n symbol = 'rdicon-default',\n size = 'small',\n color = 'colorActionFillBrandPrimaryEnabled',\n ...props\n}: IconProps) {\n const theme = useTheme()\n\n const resolvedFontSizes = React.useMemo(() => {\n return {\n tiny: theme.sizingTiny,\n 'extra-small': theme.sizingExtrasmall,\n small: theme.sizingSmall,\n medium: theme.sizingMedium,\n }\n }, [])\n\n return (\n <i\n {...props}\n className={symbol}\n style={{\n fontSize: resolvedFontSizes[size],\n color: theme[color],\n display: 'inline-flex',\n }}\n />\n )\n}\n\nIcon.displayName = 'Icon'\n\nexport * from './deprecated'\n","import * as React from 'react'\n\nimport {\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 { ThemeContext } from '~/components/theme-provider'\n\ntype ThemeTokens = typeof RDSAUDESISTEMAS_TOKENS & typeof GLOBALS_TOKENS\n\nexport function useTheme(): ThemeTokens {\n const mappedTheme = React.useMemo(() => {\n return {\n rdsaudesistemas: RDSAUDESISTEMAS_TOKENS,\n drogasil: DROGASIL_TOKENS,\n raia: RAIA_TOKENS,\n subscription: SUBSCRIPTION_TOKENS,\n prime: PRIME_TOKENS,\n }\n }, [])\n\n const context = React.useContext(ThemeContext)\n\n if (!context) {\n throw new Error(\n '[Pulso] useTheme precisa estar dentro de um <ThemeProvider>. Verifique se o provedor está corretamente configurado na raiz da aplicação.'\n )\n }\n\n const { currentTheme } = context\n\n const result = {\n ...GLOBALS_TOKENS,\n ...mappedTheme[currentTheme],\n } as ThemeTokens\n\n return result\n}\n","import * as React from 'react'\n\nimport type { Themes } from '@raiadrogasil/pulso-design-tokens'\n\nexport const ThemeContext = React.createContext({\n currentTheme: 'rdsaudesistemas',\n} as {\n currentTheme: Themes\n})\n\ntype ThemeProviderProps = {\n children: React.ReactNode\n theme?: Themes\n}\n\nexport function ThemeProvider({\n children,\n theme = 'rdsaudesistemas',\n}: ThemeProviderProps) {\n if (typeof window !== 'undefined') {\n document.documentElement.setAttribute('class', theme)\n }\n\n return (\n <ThemeContext.Provider\n value={{\n currentTheme: theme,\n }}\n >\n {children}\n </ThemeContext.Provider>\n )\n}\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 stix: 'colorLabelingTextStixDefault',\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 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 { 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 variants: {\n onSale: 'text-labelling-text-onsale',\n principal: 'text-labelling-text-principal',\n secondary: 'text-labelling-text-secondary',\n clubeRaia: 'text-labelling-text-clube',\n clubeDrogasil: 'text-labelling-text-clube',\n assinatura: 'text-labelling-text-assinatura',\n medicamentoGeladeira: 'text-labelling-text-refrigerate',\n receitaObrigatoria: 'text-labelling-text-prescription',\n generico: 'text-labelling-text-generico',\n referencia: 'text-labelling-text-referencia',\n similar: 'text-labelling-text-similar',\n stix: 'text-labelling-text-stix',\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 variants: {\n onSale: 'bg-labelling-fill-onsale',\n principal: 'bg-labelling-fill-principal',\n secondary: 'bg-labelling-fill-secondary',\n clubeRaia: 'bg-labelling-fill-clube',\n clubeDrogasil: 'bg-labelling-fill-clube',\n assinatura: 'bg-labelling-fill-assinatura',\n medicamentoGeladeira: 'bg-labelling-fill-refrigerate',\n receitaObrigatoria: 'bg-labelling-fill-prescription',\n generico: 'bg-labelling-fill-generico',\n referencia: 'bg-labelling-fill-referencia',\n similar: 'bg-labelling-fill-similar',\n stix: 'bg-labelling-fill-stix',\n },\n },\n})\n"],"mappings":"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","names":["tag_exports","__export","Tag","__toCommonJS","import_react_context","React","React","import_pulso_design_tokens","React","import_jsx_runtime","ThemeContext","useTheme","mappedTheme","context","ThemeContext","currentTheme","__spreadValues","import_jsx_runtime","Icon","_a","_b","symbol","size","color","props","__objRest","theme","useTheme","resolvedFontSizes","__spreadProps","__spreadValues","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"]}