UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 4.31 kB
{"version":3,"file":"Blockquote.cjs","names":["createVarsResolver","parseThemeColor","rgba","getThemeColor","rem","getRadius","factory","useProps","useStyles","Box","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: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\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\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>((theme, { color, iconSize, radius }) => {\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 },\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 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"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAaC,0BAAAA,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;CAEF,MAAM,cAAcA,0BAAAA,gBAAgB;EAClC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiBC,aAAAA,KAAK,YAAY,OAAO,IAAK;EAC9C,gBAAgBA,aAAAA,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAWC,wBAAAA,cAAc,OAAO,MAAM;EACtC,kBAAkBC,YAAAA,IAAI,SAAS;EAC/B,eAAeC,iBAAAA,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUC,0BAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}