@mantine/code-highlight 7.0.0-alpha.17 → 7.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/cjs/CodeHighlight.js +1 -1
  2. package/cjs/CodeHighlight.js.map +1 -1
  3. package/cjs/CodeHighlight.module.css.js +1 -1
  4. package/cjs/CodeHighlight.theme.module.css.js +1 -1
  5. package/cjs/CodeHighlightTabs.js +8 -1
  6. package/cjs/CodeHighlightTabs.js.map +1 -1
  7. package/cjs/FileIcon.js +3 -3
  8. package/cjs/FileIcon.js.map +1 -1
  9. package/cjs/InlineCodeHighlight.js.map +1 -1
  10. package/cjs/index.css +79 -67
  11. package/esm/CodeHighlight.js +1 -1
  12. package/esm/CodeHighlight.js.map +1 -1
  13. package/esm/CodeHighlight.module.css.js +1 -1
  14. package/esm/CodeHighlight.theme.module.css.js +1 -1
  15. package/esm/CodeHighlightTabs.js +8 -1
  16. package/esm/CodeHighlightTabs.js.map +1 -1
  17. package/esm/FileIcon.js +3 -3
  18. package/esm/FileIcon.js.map +1 -1
  19. package/esm/InlineCodeHighlight.js.map +1 -1
  20. package/esm/index.css +79 -67
  21. package/lib/CodeHighlight.d.ts +0 -3
  22. package/lib/CodeHighlightTabs.d.ts +1 -2
  23. package/lib/FileIcon.d.ts +3 -1
  24. package/lib/InlineCodeHighlight.d.ts +0 -1
  25. package/lib/index.d.ts +3 -3
  26. package/package.json +4 -5
  27. package/src/CodeHighlight.module.css +12 -0
  28. package/src/CodeHighlight.story.tsx +6 -0
  29. package/src/CodeHighlight.tsx +1 -3
  30. package/src/CodeHighlightTabs.tsx +8 -3
  31. package/src/FileIcon.tsx +13 -3
  32. package/src/InlineCodeHighlight.tsx +0 -1
  33. package/src/index.ts +0 -3
  34. package/tsconfig.build.tsbuildinfo +1 -1
package/esm/CodeHighlightTabs.js CHANGED
@@ -137,7 +137,14 @@ const CodeHighlightTabs = factory((_props, ref) => {
137
137
  mod: { active: index === value },
138
138
  onClick: () => setValue(index)
139
139
  }),
140
- /* @__PURE__ */ React.createElement(FileIcon, { fileIcon: node.icon, getFileIcon, fileName: node.fileName }),
140
+ /* @__PURE__ */ React.createElement(
141
+ FileIcon,
142
+ __spreadValues({
143
+ fileIcon: node.icon,
144
+ getFileIcon,
145
+ fileName: node.fileName
146
+ }, getStyles("fileIcon"))
147
+ ),
141
148
  /* @__PURE__ */ React.createElement("span", null, node.fileName)
142
149
  ));
143
150
  return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), { ref }), others), { dir: "ltr" }), withHeader && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("header")), /* @__PURE__ */ React.createElement(ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false }, /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("files")), files)), /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("controls")), withExpandButton && /* @__PURE__ */ React.createElement(
package/esm/CodeHighlightTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeHighlightTabs.js","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files';\n\nexport type CodeHighlightTabsVariant = string;\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\n\n /** Default active tab index */\n defaultActiveTab?: number;\n\n /** Index of controlled active tab state */\n activeTab?: number;\n\n /** Called when tab changes */\n onTabChange?(tab: number): void;\n\n /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?(fileName: string): React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?(expanded: boolean): void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n const [value, setValue] = useUncontrolled({\n defaultValue: defaultActiveTab,\n value: activeTab,\n finalValue: 0,\n onChange: onTabChange,\n });\n\n const [_expanded, setExpanded] = useUncontrolled({\n defaultValue: defaultExpanded,\n value: expanded,\n finalValue: true,\n onChange: onExpandedChange,\n });\n\n const nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('control')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n Expand code\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CodeHighlightTabs.js","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files'\n | 'fileIcon';\n\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\n\n /** Default active tab index */\n defaultActiveTab?: number;\n\n /** Index of controlled active tab state */\n activeTab?: number;\n\n /** Called when tab changes */\n onTabChange?(tab: number): void;\n\n /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?(fileName: string): React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?(expanded: boolean): void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n const [value, setValue] = useUncontrolled({\n defaultValue: defaultActiveTab,\n value: activeTab,\n finalValue: 0,\n onChange: onTabChange,\n });\n\n const [_expanded, setExpanded] = useUncontrolled({\n defaultValue: defaultExpanded,\n value: expanded,\n finalValue: true,\n onChange: onExpandedChange,\n });\n\n const nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon\n fileIcon={node.icon}\n getFileIcon={getFileIcon}\n fileName={node.fileName}\n {...getStyles('fileIcon')}\n />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('control')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n Expand code\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAuBF,MAAM,OAAO,GAAG,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAC7G,MAAM,YAAY,GAAG;AACrB,EAAE,UAAU,EAAE,IAAI;AAClB,EAAE,SAAS,EAAE,WAAW;AACxB,EAAE,WAAW,EAAE,QAAQ;AACvB,EAAE,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC;AACjC,EAAE,eAAe,EAAE,aAAa;AAChC,EAAE,iBAAiB,EAAE,eAAe;AACpC,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,kBAAkB,EAAE,MAAM;AACxE,EAAE,IAAI,EAAE,EAAE,2BAA2B,EAAE,GAAG,CAAC,kBAAkB,CAAC,EAAE;AAChE,CAAC,CAAC,CAAC,CAAC;AACQ,MAAC,iBAAiB,GAAG,OAAO,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK;AAC1D,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,mBAAmB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;AACpE,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE;AACpB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,oBAAoB;AACxB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB;AACrB,IAAI,mBAAmB;AACvB,IAAI,kBAAkB;AACtB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,SAAS,GAAG,SAAS,CAAC;AAC9B,IAAI,IAAI,EAAE,mBAAmB;AAC7B,IAAI,KAAK;AACT,IAAI,OAAO;AACX,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,YAAY;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC5C,IAAI,YAAY,EAAE,gBAAgB;AAClC,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,UAAU,EAAE,CAAC;AACjB,IAAI,QAAQ,EAAE,WAAW;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC;AACnD,IAAI,YAAY,EAAE,eAAe;AACjC,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;AACpD,EAAE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;AAC9D,IAAI,QAAQ,EAAE,WAAW,CAAC,QAAQ;AAClC,GAAG,CAAC,CAAC,KAAK,CAAC;AACX,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa;AAC9E,IAAI,cAAc;AAClB,IAAI,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE;AACzD,MAAM,GAAG,EAAE,IAAI,CAAC,QAAQ;AACxB,MAAM,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,KAAK,KAAK,EAAE;AACtC,MAAM,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;AACpC,KAAK,CAAC;AACN,oBAAoB,KAAK,CAAC,aAAa;AACvC,MAAM,QAAQ;AACd,MAAM,cAAc,CAAC;AACrB,QAAQ,QAAQ,EAAE,IAAI,CAAC,IAAI;AAC3B,QAAQ,WAAW;AACnB,QAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ;AAC/B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;AAC/B,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;AACpE,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,gBAAgB,oBAAoB,KAAK,CAAC,aAAa;AAC3lB,IAAI,OAAO;AACX,IAAI;AACJ,MAAM,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,eAAe;AAC5D,MAAM,EAAE,EAAE,IAAI;AACd,MAAM,QAAQ,EAAE,MAAM;AACtB,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa;AACvC,MAAM,UAAU;AAChB,MAAM,cAAc,CAAC;AACrB,QAAQ,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,SAAS,CAAC;AAC9C,QAAQ,OAAO,EAAE,MAAM;AACvB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;AAC9B,sBAAsB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAC9E,KAAK;AACL,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,qBAAqB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa;AAC95B,IAAI,cAAc;AAClB,IAAI,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE;AACnE,MAAM,GAAG,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChC,MAAM,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC;AACtC,KAAK,CAAC;AACN,IAAI,aAAa;AACjB,GAAG,CAAC,CAAC;AACL,CAAC,EAAE;AACH,iBAAiB,CAAC,WAAW,GAAG,iCAAiC;;;;"}
package/esm/FileIcon.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
 
3
- function FileIcon({ fileIcon, fileName, getFileIcon }) {
3
+ function FileIcon({ fileIcon, fileName, getFileIcon, className, style }) {
4
4
  if (fileIcon) {
5
- return /* @__PURE__ */ React.createElement(React.Fragment, null, fileIcon);
5
+ return /* @__PURE__ */ React.createElement("span", { className, style }, fileIcon);
6
6
  }
7
7
  if (getFileIcon && fileName) {
8
- return /* @__PURE__ */ React.createElement(React.Fragment, null, getFileIcon(fileName));
8
+ return /* @__PURE__ */ React.createElement("span", { className, style }, getFileIcon(fileName));
9
9
  }
10
10
  return null;
11
11
  }
package/esm/FileIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileIcon.js","sources":["../src/FileIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FileIconProps {\n fileName: string | undefined;\n getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;\n fileIcon: React.ReactNode | undefined;\n}\n\nexport function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps) {\n if (fileIcon) {\n return <>{fileIcon}</>;\n }\n\n if (getFileIcon && fileName) {\n return <>{getFileIcon(fileName)}</>;\n }\n\n return null;\n}\n"],"names":[],"mappings":";;AACO,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE;AAC9D,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/E,GAAG;AACH,EAAE,IAAI,WAAW,IAAI,QAAQ,EAAE;AAC/B,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5F,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd;;;;"}
1
+ {"version":3,"file":"FileIcon.js","sources":["../src/FileIcon.tsx"],"sourcesContent":["import React from 'react';\n\ninterface FileIconProps {\n fileName: string | undefined;\n getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;\n fileIcon: React.ReactNode | undefined;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps) {\n if (fileIcon) {\n return (\n <span className={className} style={style}>\n {fileIcon}\n </span>\n );\n }\n\n if (getFileIcon && fileName) {\n return (\n <span className={className} style={style}>\n {getFileIcon(fileName)}\n </span>\n );\n }\n\n return null;\n}\n"],"names":[],"mappings":";;AACO,SAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;AAChF,EAAE,IAAI,QAAQ,EAAE;AAChB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;AACvF,GAAG;AACH,EAAE,IAAI,WAAW,IAAI,QAAQ,EAAE;AAC/B,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AACpG,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd;;;;"}
package/esm/InlineCodeHighlight.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\nexport type InlineCodeHighlightVariant = string;\n\nexport interface InlineCodeHighlightProps\n extends BoxProps,\n StylesApiProps<InlineCodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n props: InlineCodeHighlightProps;\n ref: HTMLElement;\n stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n const props = useProps('InlineCodeHighlight', defaultProps, _props);\n const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n const getStyles = useStyles<InlineCodeHighlightFactory>({\n name: 'InlineCodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n rootSelector: 'code',\n });\n\n const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n return (\n <Box\n {...getStyles('code')}\n component=\"code\"\n ref={ref}\n {...others}\n dangerouslySetInnerHTML={{ __html: highlighted }}\n />\n );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"InlineCodeHighlight.js","sources":["../src/InlineCodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n Factory,\n} from '@mantine/core';\nimport hljs from 'highlight.js';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };\n\nexport type InlineCodeHighlightStylesNames = 'code';\n\nexport interface InlineCodeHighlightProps\n extends BoxProps,\n StylesApiProps<InlineCodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n}\n\nexport type InlineCodeHighlightFactory = Factory<{\n props: InlineCodeHighlightProps;\n ref: HTMLElement;\n stylesNames: InlineCodeHighlightStylesNames;\n}>;\n\nconst defaultProps: Partial<InlineCodeHighlightProps> = {\n language: 'tsx',\n};\n\nexport const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {\n const props = useProps('InlineCodeHighlight', defaultProps, _props);\n const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;\n\n const getStyles = useStyles<InlineCodeHighlightFactory>({\n name: 'InlineCodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n rootSelector: 'code',\n });\n\n const highlighted = hljs.highlight(code.trim(), { language: language! }).value;\n\n return (\n <Box\n {...getStyles('code')}\n component=\"code\"\n ref={ref}\n {...others}\n dangerouslySetInnerHTML={{ __html: highlighted }}\n />\n );\n});\n\nInlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';\n"],"names":[],"mappings":"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"}
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- .mantine-XIBJZDt {
1
+ .m-5caae6d3 {
2
2
  display: inline-block;
3
3
  padding: calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale));
4
4
  font-size: calc(0.8125rem * var(--mantine-scale));
@@ -7,27 +7,27 @@
7
7
  font-family: var(--mantine-font-family-monospace);
8
8
  }
9
9
 
10
- .mantine-RDvBcjB {
10
+ .m-2c47c4fd {
11
11
  display: block;
12
12
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
13
13
  margin: 0;
14
14
  --_code-line-height: 1.7;
15
15
  }
16
16
 
17
- .mantine-cmEtjrV {
17
+ .m-e58679f3 {
18
18
  display: flex;
19
19
  align-items: flex-start;
20
20
  justify-content: space-between;
21
21
  }
22
22
 
23
- .mantine-059sM-t {
23
+ .m-be7e9c9c {
24
24
  display: flex;
25
25
  margin-top: calc(0.4375rem * var(--mantine-scale));
26
26
  margin-right: calc(0.4375rem * var(--mantine-scale));
27
27
  }
28
28
 
29
- .mantine-tB-P5PD,
30
- .mantine-NTm-nGn {
29
+ .m-5caae85b,
30
+ .m-d498bab7 {
31
31
  background-color: transparent;
32
32
  opacity: 0.8;
33
33
  margin: 0;
@@ -35,34 +35,34 @@
35
35
 
36
36
  @media (hover: hover) {
37
37
 
38
- .mantine-tB-P5PD:hover, .mantine-NTm-nGn:hover {
38
+ .m-5caae85b:hover, .m-d498bab7:hover {
39
39
  opacity: 1;
40
40
  }
41
41
  }
42
42
 
43
43
  @media (hover: none) {
44
44
 
45
- .mantine-tB-P5PD:active, .mantine-NTm-nGn:active {
45
+ .m-5caae85b:active, .m-d498bab7:active {
46
46
  opacity: 1;
47
47
  }
48
48
  }
49
49
 
50
50
  @media (max-width: 40em) {
51
51
 
52
- .mantine-tB-P5PD,
53
- .mantine-NTm-nGn {
52
+ .m-5caae85b,
53
+ .m-d498bab7 {
54
54
  display: none
55
55
  }
56
56
  }
57
57
 
58
- .mantine-tB-P5PD {
58
+ .m-5caae85b {
59
59
  position: absolute;
60
60
  top: calc(0.3125rem * var(--mantine-scale));
61
61
  right: calc(0.3125rem * var(--mantine-scale));
62
62
  z-index: 1;
63
63
  }
64
64
 
65
- .mantine-PBrPXnu {
65
+ .m-5cac2e62 {
66
66
  display: flex;
67
67
  align-items: center;
68
68
  justify-content: center;
@@ -80,67 +80,68 @@
80
80
  color: var(--_file-color);
81
81
  opacity: var(--_file-opacity);
82
82
  background-color: var(--_file-bg);
83
+ white-space: nowrap;
83
84
  }
84
85
 
85
86
  @media (hover: hover) {
86
87
 
87
- .mantine-PBrPXnu:hover {
88
+ .m-5cac2e62:hover {
88
89
  --_file-opacity: 1;
89
90
  }
90
91
  }
91
92
 
92
93
  @media (hover: none) {
93
94
 
94
- .mantine-PBrPXnu:active {
95
+ .m-5cac2e62:active {
95
96
  --_file-opacity: 1;
96
97
  }
97
98
  }
98
99
 
99
- .mantine-PBrPXnu:last-of-type {
100
+ .m-5cac2e62:last-of-type {
100
101
  border-bottom-right-radius: var(--mantine-radius-sm);
101
102
  }
102
103
 
103
- .mantine-PBrPXnu:only-child {
104
+ .m-5cac2e62:only-child {
104
105
  --_file-cursor: default;
105
106
  }
106
107
 
107
- .mantine-PBrPXnu[data-active] {
108
+ .m-5cac2e62[data-active] {
108
109
  --_file-opacity: 1;
109
110
  --_file-color: var(--_file-active-color) !important;
110
111
  --_file-bg: var(--_file-active-bg);
111
112
  }
112
113
 
113
- .mantine-PBrPXnu {
114
+ .m-5cac2e62 {
114
115
 
115
116
  --_file-opacity: 0.8;
116
117
  --_file-cursor: pointer;
117
118
  }
118
119
 
119
- [data-mantine-color-scheme='light'] .mantine-PBrPXnu {
120
+ [data-mantine-color-scheme='light'] .m-5cac2e62 {
120
121
  --_file-color: var(--mantine-color-gray-8);
121
122
  --_file-bd: var(--mantine-color-gray-2);
122
123
  --_file-active-bg: var(--mantine-color-white);
123
124
  --_file-active-color: var(--mantine-color-black);
124
125
  }
125
126
 
126
- [data-mantine-color-scheme='dark'] .mantine-PBrPXnu {
127
+ [data-mantine-color-scheme='dark'] .m-5cac2e62 {
127
128
  --_file-color: var(--mantine-color-dark-0);
128
129
  --_file-bd: var(--mantine-color-dark-4);
129
130
  --_file-active-bg: var(--mantine-color-dark-6);
130
131
  --_file-active-color: var(--mantine-color-white);
131
132
  }
132
133
 
133
- .mantine-IvOddiX {
134
+ .m-38d99e51 {
134
135
  display: flex;
135
136
  }
136
137
 
137
- .mantine-YfYyOiA {
138
+ .m-9f507240 {
138
139
  max-height: var(--ch-max-collapsed-height);
139
140
  overflow: hidden;
140
141
  position: relative;
141
142
  }
142
143
 
143
- .mantine-YfYyOiA::before {
144
+ .m-9f507240::before {
144
145
  content: '';
145
146
  z-index: 100;
146
147
  position: absolute;
@@ -150,15 +151,15 @@
150
151
  border-radius: calc(var(--mantine-radius-md) - calc(0.0625rem * var(--mantine-scale)));
151
152
  }
152
153
 
153
- .mantine-YfYyOiA[data-expanded] {
154
+ .m-9f507240[data-expanded] {
154
155
  max-height: none;
155
156
  }
156
157
 
157
- .mantine-YfYyOiA[data-expanded]::before {
158
+ .m-9f507240[data-expanded]::before {
158
159
  display: none;
159
160
  }
160
161
 
161
- .mantine-haNyFRC {
162
+ .m-c9378bc2 {
162
163
  position: absolute;
163
164
  bottom: 0;
164
165
  left: 50%;
@@ -172,21 +173,32 @@
172
173
  padding-bottom: var(--mantine-spacing-xs);
173
174
  }
174
175
 
175
- .mantine-haNyFRC[data-hidden] {
176
+ .m-c9378bc2[data-hidden] {
176
177
  display: none;
177
178
  }
178
179
 
179
- .mantine-k6OJW8l {
180
+ .m-5cb1b9c8 {
180
181
  margin-top: 0;
181
182
  position: relative;
182
183
  }
183
184
 
184
- .mantine-h-DP-Yw {
185
+ .m-b46cddfb {
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ flex: 0 1;
190
+ }
191
+
192
+ .m-b46cddfb > svg {
193
+ display: block;
194
+ }
195
+
196
+ .m-1f5e827e {
185
197
  color: var(--_color);
186
198
  background: var(--_background);
187
199
  }
188
200
 
189
- [data-mantine-color-scheme='light'] .mantine-h-DP-Yw {
201
+ [data-mantine-color-scheme='light'] .m-1f5e827e {
190
202
  --_color: var(--mantine-color-gray-7);
191
203
  --_background: var(--mantine-color-gray-0);
192
204
  --code-comment-color: var(--mantine-color-gray-6);
@@ -198,7 +210,7 @@
198
210
  --code-class-color: var(--mantine-color-orange-9);
199
211
  }
200
212
 
201
- [data-mantine-color-scheme='dark'] .mantine-h-DP-Yw {
213
+ [data-mantine-color-scheme='dark'] .m-1f5e827e {
202
214
  --_color: var(--mantine-color-dark-1);
203
215
  --_background: var(--mantine-color-dark-8);
204
216
  --code-comment-color: var(--mantine-color-dark-3);
@@ -210,69 +222,69 @@
210
222
  --code-class-color: var(--mantine-color-orange-5);
211
223
  }
212
224
 
213
- .mantine-h-DP-Yw .hljs-comment,
214
- .mantine-h-DP-Yw .hljs-quote {
225
+ .m-1f5e827e .hljs-comment,
226
+ .m-1f5e827e .hljs-quote {
215
227
  font-style: italic;
216
228
  color: var(--code-comment-color);
217
229
  }
218
230
 
219
- .mantine-h-DP-Yw .hljs-doctag,
220
- .mantine-h-DP-Yw .hljs-formula,
221
- .mantine-h-DP-Yw .hljs-keyword {
231
+ .m-1f5e827e .hljs-doctag,
232
+ .m-1f5e827e .hljs-formula,
233
+ .m-1f5e827e .hljs-keyword {
222
234
  color: var(--code-keyword-color);
223
235
  }
224
236
 
225
- .mantine-h-DP-Yw .hljs-deletion,
226
- .mantine-h-DP-Yw .hljs-name,
227
- .mantine-h-DP-Yw .hljs-section,
228
- .mantine-h-DP-Yw .hljs-selector-tag,
229
- .mantine-h-DP-Yw .hljs-subst {
237
+ .m-1f5e827e .hljs-deletion,
238
+ .m-1f5e827e .hljs-name,
239
+ .m-1f5e827e .hljs-section,
240
+ .m-1f5e827e .hljs-selector-tag,
241
+ .m-1f5e827e .hljs-subst {
230
242
  color: var(--code-tag-color);
231
243
  }
232
244
 
233
- .mantine-h-DP-Yw .hljs-literal {
245
+ .m-1f5e827e .hljs-literal {
234
246
  color: var(--code-literal-color);
235
247
  }
236
248
 
237
- .mantine-h-DP-Yw .hljs-addition,
238
- .mantine-h-DP-Yw .hljs-attribute,
239
- .mantine-h-DP-Yw .hljs-meta .hljs-string,
240
- .mantine-h-DP-Yw .hljs-regexp,
241
- .mantine-h-DP-Yw .hljs-string {
249
+ .m-1f5e827e .hljs-addition,
250
+ .m-1f5e827e .hljs-attribute,
251
+ .m-1f5e827e .hljs-meta .hljs-string,
252
+ .m-1f5e827e .hljs-regexp,
253
+ .m-1f5e827e .hljs-string {
242
254
  color: var(--code-string-color);
243
255
  }
244
256
 
245
- .mantine-h-DP-Yw .hljs-attr,
246
- .mantine-h-DP-Yw .hljs-number,
247
- .mantine-h-DP-Yw .hljs-selector-attr,
248
- .mantine-h-DP-Yw .hljs-selector-class,
249
- .mantine-h-DP-Yw .hljs-selector-pseudo,
250
- .mantine-h-DP-Yw .hljs-template-variable,
251
- .mantine-h-DP-Yw .hljs-type,
252
- .mantine-h-DP-Yw .hljs-variable {
257
+ .m-1f5e827e .hljs-attr,
258
+ .m-1f5e827e .hljs-number,
259
+ .m-1f5e827e .hljs-selector-attr,
260
+ .m-1f5e827e .hljs-selector-class,
261
+ .m-1f5e827e .hljs-selector-pseudo,
262
+ .m-1f5e827e .hljs-template-variable,
263
+ .m-1f5e827e .hljs-type,
264
+ .m-1f5e827e .hljs-variable {
253
265
  color: var(--code-variable-color);
254
266
  }
255
267
 
256
- .mantine-h-DP-Yw .hljs-bullet,
257
- .mantine-h-DP-Yw .hljs-link,
258
- .mantine-h-DP-Yw .hljs-meta,
259
- .mantine-h-DP-Yw .hljs-selector-id,
260
- .mantine-h-DP-Yw .hljs-symbol,
261
- .mantine-h-DP-Yw .hljs-title,
262
- .mantine-h-DP-Yw .hljs-built_in,
263
- .mantine-h-DP-Yw .hljs-class .hljs-title,
264
- .mantine-h-DP-Yw .hljs-title.class_ {
268
+ .m-1f5e827e .hljs-bullet,
269
+ .m-1f5e827e .hljs-link,
270
+ .m-1f5e827e .hljs-meta,
271
+ .m-1f5e827e .hljs-selector-id,
272
+ .m-1f5e827e .hljs-symbol,
273
+ .m-1f5e827e .hljs-title,
274
+ .m-1f5e827e .hljs-built_in,
275
+ .m-1f5e827e .hljs-class .hljs-title,
276
+ .m-1f5e827e .hljs-title.class_ {
265
277
  color: var(--code-class-color);
266
278
  }
267
279
 
268
- .mantine-h-DP-Yw .hljs-emphasis {
280
+ .m-1f5e827e .hljs-emphasis {
269
281
  font-style: italic;
270
282
  }
271
283
 
272
- .mantine-h-DP-Yw .hljs-strong {
284
+ .m-1f5e827e .hljs-strong {
273
285
  font-weight: 700;
274
286
  }
275
287
 
276
- .mantine-h-DP-Yw .hljs-link {
288
+ .m-1f5e827e .hljs-link {
277
289
  text-decoration: underline;
278
290
  }
package/lib/CodeHighlight.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
2
2
  export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
3
- export type CodeHighlightVariant = string;
4
3
  export interface CodeHighlightProps extends BoxProps, StylesApiProps<CodeHighlightFactory>, ElementProps<'div'> {
5
4
  /** Code to highlight */
6
5
  code: string;
@@ -19,11 +18,9 @@ export type CodeHighlightFactory = Factory<{
19
18
  props: CodeHighlightProps;
20
19
  ref: HTMLDivElement;
21
20
  stylesNames: CodeHighlightStylesNames;
22
- variant: CodeHighlightVariant;
23
21
  }>;
24
22
  export declare const CodeHighlight: import("@mantine/core").MantineComponent<{
25
23
  props: CodeHighlightProps;
26
24
  ref: HTMLDivElement;
27
25
  stylesNames: CodeHighlightStylesNames;
28
- variant: CodeHighlightVariant;
29
26
  }>;
package/lib/CodeHighlightTabs.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
3
- export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files';
4
- export type CodeHighlightTabsVariant = string;
3
+ export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files' | 'fileIcon';
5
4
  export type CodeHighlightTabsCssVariables = {
6
5
  root: '--ch-max-collapsed-height';
7
6
  };
package/lib/FileIcon.d.ts CHANGED
@@ -3,6 +3,8 @@ interface FileIconProps {
3
3
  fileName: string | undefined;
4
4
  getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
5
5
  fileIcon: React.ReactNode | undefined;
6
+ className?: string;
7
+ style?: React.CSSProperties;
6
8
  }
7
- export declare function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps): JSX.Element | null;
9
+ export declare function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps): JSX.Element | null;
8
10
  export {};
package/lib/InlineCodeHighlight.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
2
2
  export type InlineCodeHighlightStylesNames = 'code';
3
- export type InlineCodeHighlightVariant = string;
4
3
  export interface InlineCodeHighlightProps extends BoxProps, StylesApiProps<InlineCodeHighlightFactory>, ElementProps<'div'> {
5
4
  /** Code to highlight */
6
5
  code: string;
package/lib/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { CodeHighlightTabs } from './CodeHighlightTabs';
2
2
  export { CodeHighlight } from './CodeHighlight';
3
3
  export { InlineCodeHighlight } from './InlineCodeHighlight';
4
- export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsVariant, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
5
- export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, CodeHighlightVariant, } from './CodeHighlight';
6
- export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, InlineCodeHighlightVariant, } from './InlineCodeHighlight';
4
+ export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
5
+ export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight';
6
+ export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './InlineCodeHighlight';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mantine/code-highlight",
3
3
  "description": "Code highlight with Mantine theme",
4
- "version": "7.0.0-alpha.17",
4
+ "version": "7.0.0-alpha.19",
5
5
  "types": "./lib/index.d.ts",
6
6
  "exports": {
7
7
  ".": {
@@ -37,15 +37,14 @@
37
37
  "syntax-highlight"
38
38
  ],
39
39
  "peerDependencies": {
40
- "@mantine/core": "7.0.0-alpha.17",
41
- "@mantine/hooks": "7.0.0-alpha.17",
40
+ "@mantine/core": "7.0.0-alpha.19",
41
+ "@mantine/hooks": "7.0.0-alpha.19",
42
42
  "react": ">=18.0.0",
43
43
  "react-dom": ">=18.0.0"
44
44
  },
45
45
  "dependencies": {
46
46
  "highlight.js": "^11.7.0",
47
- "clsx": "1.1.1",
48
- "tslib": "^2.5.2"
47
+ "clsx": "1.1.1"
49
48
  },
50
49
  "devDependencies": {}
51
50
  }
package/src/CodeHighlight.module.css CHANGED
@@ -66,6 +66,7 @@
66
66
  color: var(--_file-color);
67
67
  opacity: var(--_file-opacity);
68
68
  background-color: var(--_file-bg);
69
+ white-space: nowrap;
69
70
 
70
71
  @mixin hover {
71
72
  --_file-opacity: 1;
@@ -153,3 +154,14 @@
153
154
  margin-top: 0;
154
155
  position: relative;
155
156
  }
157
+
158
+ .fileIcon {
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ flex: 0;
163
+
164
+ & > svg {
165
+ display: block;
166
+ }
167
+ }
package/src/CodeHighlight.story.tsx CHANGED
@@ -194,6 +194,12 @@ export function Tabs() {
194
194
  code={[
195
195
  { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
196
196
  { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
197
+ {
198
+ code: cssCode,
199
+ language: 'css',
200
+ icon: <CSSIcon />,
201
+ fileName: 'Long-file-name-that-will-break-to-another-line.css',
202
+ },
197
203
  ]}
198
204
  defaultExpanded={false}
199
205
  >
package/src/CodeHighlight.tsx CHANGED
@@ -22,7 +22,6 @@ import themeClasses from './CodeHighlight.theme.module.css';
22
22
  const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };
23
23
 
24
24
  export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
25
- export type CodeHighlightVariant = string;
26
25
 
27
26
  export interface CodeHighlightProps
28
27
  extends BoxProps,
@@ -51,7 +50,6 @@ export type CodeHighlightFactory = Factory<{
51
50
  props: CodeHighlightProps;
52
51
  ref: HTMLDivElement;
53
52
  stylesNames: CodeHighlightStylesNames;
54
- variant: CodeHighlightVariant;
55
53
  }>;
56
54
 
57
55
  const defaultProps: Partial<CodeHighlightProps> = {
@@ -111,7 +109,7 @@ export const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {
111
109
  </CopyButton>
112
110
  )}
113
111
 
114
- <ScrollArea type="auto" dir="ltr" offsetScrollbars={false}>
112
+ <ScrollArea type="hover" dir="ltr" offsetScrollbars={false}>
115
113
  <pre {...getStyles('pre')}>
116
114
  <code {...getStyles('code')} {...getCodeProps()} />
117
115
  </pre>
package/src/CodeHighlightTabs.tsx CHANGED
@@ -37,9 +37,9 @@ export type CodeHighlightTabsStylesNames =
37
37
  | 'control'
38
38
  | 'header'
39
39
  | 'file'
40
- | 'files';
40
+ | 'files'
41
+ | 'fileIcon';
41
42
 
42
- export type CodeHighlightTabsVariant = string;
43
43
  export type CodeHighlightTabsCssVariables = {
44
44
  root: '--ch-max-collapsed-height';
45
45
  };
@@ -189,7 +189,12 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
189
189
  mod={{ active: index === value }}
190
190
  onClick={() => setValue(index)}
191
191
  >
192
- <FileIcon fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />
192
+ <FileIcon
193
+ fileIcon={node.icon}
194
+ getFileIcon={getFileIcon}
195
+ fileName={node.fileName}
196
+ {...getStyles('fileIcon')}
197
+ />
193
198
  <span>{node.fileName}</span>
194
199
  </UnstyledButton>
195
200
  ));