@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.56 kB
Source Map (JSON)
{"version":3,"file":"Blockquote.mjs","names":["classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n parseThemeColor,\n rem,\n rgba,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n root:\n | '--bq-bg-light'\n | '--bq-bg-dark'\n | '--bq-bd'\n | '--bq-icon-size'\n | '--bq-radius'\n | '--bq-text-wrap';\n};\n\nexport interface BlockquoteProps\n extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n /** Blockquote icon, displayed at the top left side */\n icon?: React.ReactNode;\n\n /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n iconSize?: number | string;\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Reference to a cited quote */\n cite?: React.ReactNode;\n\n /** Controls `text-wrap` CSS property */\n textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type BlockquoteFactory = Factory<{\n props: BlockquoteProps;\n ref: HTMLQuoteElement;\n stylesNames: BlockquoteStylesNames;\n vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>(\n (theme, { color, iconSize, radius, textWrap }) => {\n const darkParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'dark',\n });\n\n const lightParsed = parseThemeColor({\n color: color || theme.primaryColor,\n theme,\n colorScheme: 'light',\n });\n\n return {\n root: {\n '--bq-bg-light': rgba(lightParsed.value, 0.07),\n '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n '--bq-bd': getThemeColor(color, theme),\n '--bq-icon-size': rem(iconSize),\n '--bq-radius': getRadius(radius),\n '--bq-text-wrap': textWrap,\n },\n };\n }\n);\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n const props = useProps('Blockquote', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n icon,\n iconSize,\n cite,\n textWrap,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<BlockquoteFactory>({\n name: 'Blockquote',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n {icon && <span {...getStyles('icon')}>{icon}</span>}\n {children}\n {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n </Box>\n );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n export type Props = BlockquoteProps;\n export type StylesNames = BlockquoteStylesNames;\n export type CssVariables = BlockquoteCssVariables;\n export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,MAAM,eAAe,EACnB,UAAU,GACZ;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,UAAU,QAAQ,eAAe;CAChD,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;CACf,CAAC;CAQD,OAAO,EACL,MAAM;EACJ,iBAAiB,KARD,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;EACf,CAIoC,CAAC,CAAC,OAAO,GAAI;EAC7C,gBAAgB,KAAK,WAAW,OAAO,GAAI;EAC3C,WAAW,cAAc,OAAO,KAAK;EACrC,kBAAkB,IAAI,QAAQ;EAC9B,eAAe,UAAU,MAAM;EAC/B,kBAAkB;CACpB,EACF;AACF,CACF;AAEA,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,MAAM;EAAG,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;GACjD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,MAAM;cAAI;GAAW,CAAA;EAC/C;;AAET,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}