UNPKG

@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 17.9 kB
{"version":3,"sources":["../../../src/components/card-informative/index.ts","../../../src/components/card-informative/card-informative.tsx","../../../src/utils/tv.ts","../../../src/components/card-informative/card-informative.styles.ts","../../../src/components/card-informative/components/card-informative-content/index.tsx","../../../src/components/card-informative/components/card-informative-title/card-informative-title.styles.ts","../../../src/components/card-informative/components/card-informative-title/index.tsx","../../../src/components/card-informative/components/card-informative-content/card-informative-content.styles.ts","../../../src/components/card-informative/components/card-informative-description/card-informative-description.styles.ts","../../../src/components/card-informative/components/card-informative-description/index.tsx","../../../src/components/card-informative/components/card-informative-icon/index.tsx","../../../src/components/icon/index.tsx","../../../src/hooks/use-theme.ts","../../../src/components/theme-provider/index.tsx","../../../src/components/card-informative/components/card-informative-icon/card-informative-icon.styles.ts"],"sourcesContent":["export { CardInformative } from './card-informative'\nexport type { CardInformativeProps } from './card-informative.types'\n","import { type Scope, createContextScope } from '@radix-ui/react-context'\nimport { CardInformativeRootVariants } from './card-informative.styles'\nimport type { CardInformativeProps } from './card-informative.types'\nimport { CardInformativeContent } from './components/card-informative-content'\nimport { CardInformativeDescription } from './components/card-informative-description'\nimport { CardInformativeIcon } from './components/card-informative-icon'\nimport { CardInformativeTitle } from './components/card-informative-title'\n\nexport const DISPLAY_NAME = 'CardInformative'\n\ntype CardInformativeRootProps = CardInformativeProps & {\n children: React.ReactNode\n}\n\nexport const CardInformativeRoot = (props: CardInformativeRootProps) => {\n const { children, type, variants, iconName, __scopeCardInformative } =\n props as CardInformativeScopedProps<CardInformativeRootProps>\n\n const cardInformativeProps = {\n type,\n variants,\n iconName,\n scope: __scopeCardInformative,\n } as CardInformativeProps & { scope: Scope }\n return (\n <CardInformativeProvider {...cardInformativeProps}>\n <div\n {...props}\n className={CardInformativeRootVariants({ variants, type })}\n >\n {type !== 'text' && <CardInformativeIcon />}\n {children}\n </div>\n </CardInformativeProvider>\n )\n}\n\nCardInformativeRoot.displayName = DISPLAY_NAME\n\n/*\n----------------------------------------------------------------\nScope Definition\n----------------------------------------------------------------\n*/\n\nexport type CardInformativeContext = CardInformativeProps & {}\n\nexport type CardInformativeScopedProps<P> = P & {\n __scopeCardInformative?: Scope\n}\n\nconst [createCardInformativeContext] = createContextScope(DISPLAY_NAME)\n\nexport const [CardInformativeProvider, useCardInformativeContext]: readonly [\n ProviderType<CardInformativeContext>,\n (consumerName: string, scope: Scope) => CardInformativeContext,\n] = createCardInformativeContext<CardInformativeContext>(DISPLAY_NAME)\n\n/*\n----------------------------------------------------------------\nComposition Export\n----------------------------------------------------------------\n*/\n\nexport const CardInformative = {\n Root: CardInformativeRoot,\n Content: CardInformativeContent,\n Title: CardInformativeTitle,\n Description: CardInformativeDescription,\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'\n\nexport const CardInformativeRootVariants = tv({\n base: `\n flex min-w-[16.25rem] border-none rounded-smallcontainer p-fourpulse justify-start items-center\n `,\n variants: {\n variants: {\n neutral: `\n bg-fill-neutral-alternative\n `,\n positive: `\n bg-fill-success\n `,\n informative: `\n bg-fill-informative\n `,\n warning: `\n bg-fill-warning\n `,\n negative: `\n bg-fill-danger\n `,\n },\n type: {\n icon: 'gap-threepulse',\n highlight: 'gap-fourpulse',\n text: '',\n },\n },\n})\n","import React from 'react'\nimport {\n type CardInformativeScopedProps,\n DISPLAY_NAME,\n useCardInformativeContext,\n} from '../../card-informative'\nimport { CardInformativeTitle } from '../card-informative-title'\nimport { CardInformativeContentVariants } from './card-informative-content.styles'\n\ntype CardInformativeContentProps = {\n children: React.ReactNode\n}\n\nexport const CardInformativeContent = (props: CardInformativeContentProps) => {\n const { children, __scopeCardInformative } =\n props as CardInformativeScopedProps<CardInformativeContentProps>\n const { type } = useCardInformativeContext(\n DISPLAY_NAME,\n __scopeCardInformative\n )\n\n return (\n <div {...props} className={CardInformativeContentVariants({})}>\n {React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child\n\n if (type !== 'highlight' && child.type === CardInformativeTitle) {\n return null\n }\n\n return child\n })}\n </div>\n )\n}\n","import { tv } from '~/utils/tv'\n\nexport const CardInformativeTitleVariants = tv({\n base: `\n text-text-neutral font-rdmodern font-bold text-threeandhalfpulse line-clamp-1\n `,\n variants: {},\n})\n","import { CardInformativeTitleVariants } from './card-informative-title.styles'\n\ntype CardInformativeTitleProps = {\n children: React.ReactNode\n}\n\nexport const CardInformativeTitle = (props: CardInformativeTitleProps) => {\n const { children } = props\n\n return (\n <p {...props} className={CardInformativeTitleVariants({})}>\n {children}\n </p>\n )\n}\n","import { tv } from '~/utils/tv'\n\nexport const CardInformativeContentVariants = tv({\n base: 'flex flex-col justify-center align-middle',\n variants: {},\n})\n","import { tv } from '~/utils/tv'\n\nexport const CardInformativeDescriptionVariants = tv({\n base: `\n text-text-neutral font-rdmodern font-regular text-threeandhalfpulse line-clamp-4\n `,\n variants: {},\n})\n","import { CardInformativeDescriptionVariants } from './card-informative-description.styles'\n\ntype CardInformativeDescriptionProps = {\n children: React.ReactNode\n}\nexport const CardInformativeDescription = (\n props: CardInformativeDescriptionProps\n) => {\n const { children } = props\n return (\n <p {...props} className={CardInformativeDescriptionVariants({})}>\n {children}\n </p>\n )\n}\n","import { useCallback } from 'react'\nimport { Icon, type TIconProps } from '~/components/icon'\nimport {\n type CardInformativeScopedProps,\n DISPLAY_NAME,\n useCardInformativeContext,\n} from '../../card-informative'\nimport { CardInformativeIconVariants } from './card-informative-icon.styles'\n\ntype CardInformativeIconProps = {}\n\nexport const CardInformativeIcon = (props: CardInformativeIconProps) => {\n const { __scopeCardInformative } =\n props as CardInformativeScopedProps<CardInformativeIconProps>\n\n const { type, iconName, variants } = useCardInformativeContext(\n DISPLAY_NAME,\n __scopeCardInformative\n )\n\n const mapper: Record<typeof variants, TIconProps['color']> = {\n positive: 'colorTextSuccessAlternative',\n informative: 'colorTextInformativeAlternative',\n warning: 'colorTextWarningAlternative',\n negative: 'colorTextDangerAlternative',\n neutral: 'colorTextNeutralAlternative',\n }\n\n const mapVariantColor = useCallback((): TIconProps['color'] => {\n return mapper[variants]\n }, [variants])\n\n return (\n <div {...props} className={CardInformativeIconVariants({ type })}>\n <Icon symbol={iconName} size=\"small\" color={mapVariantColor()} />\n </div>\n )\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 { tv } from '~/utils/tv'\n\nexport const CardInformativeIconVariants = tv({\n base: `\n flex items-center\n `,\n variants: {\n type: {\n text: '',\n icon: '',\n highlight:\n 'max-h-large min-h-large min-w-large max-w-large items-center justify-center rounded-pill bg-fill-neutral',\n },\n },\n})\n"],"mappings":"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","names":["card_informative_exports","__export","CardInformative","__toCommonJS","import_react_context","import_tailwind_variants","tv","CardInformativeRootVariants","tv","import_react","CardInformativeTitleVariants","tv","import_jsx_runtime","CardInformativeTitle","props","children","__spreadProps","__spreadValues","CardInformativeTitleVariants","CardInformativeContentVariants","tv","import_jsx_runtime","CardInformativeContent","props","children","__scopeCardInformative","type","useCardInformativeContext","DISPLAY_NAME","__spreadProps","__spreadValues","CardInformativeContentVariants","React","child","CardInformativeTitle","CardInformativeDescriptionVariants","tv","import_jsx_runtime","CardInformativeDescription","props","children","__spreadProps","__spreadValues","CardInformativeDescriptionVariants","import_react","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","CardInformativeIconVariants","tv","import_jsx_runtime","CardInformativeIcon","props","__scopeCardInformative","type","iconName","variants","useCardInformativeContext","DISPLAY_NAME","mapper","mapVariantColor","__spreadProps","__spreadValues","CardInformativeIconVariants","Icon","import_jsx_runtime","DISPLAY_NAME","CardInformativeRoot","props","children","type","variants","iconName","__scopeCardInformative","CardInformativeProvider","__spreadProps","__spreadValues","CardInformativeRootVariants","CardInformativeIcon","createCardInformativeContext","useCardInformativeContext","CardInformative","CardInformativeContent","CardInformativeTitle","CardInformativeDescription"]}