@mindlogic-ai/logician-ui 3.0.0-alpha.31 → 3.0.0-alpha.32

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAOtD,eAAO,MAAM,IAAI;;;kDA4BhB,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,IAAI;;;kDA2BhB,CAAC"}
@@ -4,14 +4,13 @@
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var React = require('react');
6
6
  var react = require('@chakra-ui/react');
7
- var mergeCss = require('../../utils/mergeCss.js');
8
7
  var Card_styles = require('./Card.styles.js');
9
8
 
10
- const Card = React.forwardRef(({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
9
+ const Card = React.forwardRef(({ clickable, variant = 'default', _hover, ...rest }, ref) => {
11
10
  const mergedHover = clickable
12
11
  ? { ...Card_styles.clickableStyles._hover, ..._hover }
13
12
  : _hover;
14
- return (jsxRuntime.jsx(react.Card.Root, { ref: ref, position: "relative", bg: "white", color: "inherit", boxShadow: "none", border: "1px solid", borderColor: "gray.200", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: Card_styles.clickableStyles.cursor } : {}), ...Card_styles.variantStyles[variant], ...rest, css: mergeCss.mergeCss(Card_styles.cardStyles, css), _hover: mergedHover }));
13
+ return (jsxRuntime.jsx(react.Card.Root, { ref: ref, position: "relative", bg: "white", color: "inherit", boxShadow: "none", border: "1px solid", borderColor: "gray.200", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: Card_styles.clickableStyles.cursor } : {}), ...Card_styles.variantStyles[variant], ...rest, _hover: mergedHover }));
15
14
  });
16
15
  Card.displayName = 'Card';
17
16
 
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["forwardRef","clickableStyles","_jsx","ChakraCard","variantStyles","mergeCss","cardStyles"],"mappings":";;;;;;;;;AAQO,MAAM,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAChE,MAAM,WAAW,GAAG;UAChB,EAAE,GAAGC,2BAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;IAEV,QACEC,eAACC,UAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAEF,2BAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAA,GACrDG,yBAAa,CAAC,OAAO,CAAC,KACtB,IAAI,EACR,GAAG,EAAEC,iBAAQ,CAACC,sBAAU,EAAE,GAAG,CAAC,EAC9B,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["forwardRef","clickableStyles","_jsx","ChakraCard","variantStyles"],"mappings":";;;;;;;;MAMa,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAGC,2BAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEC,cAAA,CAACC,UAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAEF,2BAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAA,GACrDG,yBAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
@@ -2,14 +2,13 @@
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from 'react';
4
4
  import { Card as Card$1 } from '@chakra-ui/react';
5
- import { mergeCss } from '../../utils/mergeCss.mjs';
6
- import { clickableStyles, variantStyles, cardStyles } from './Card.styles.mjs';
5
+ import { clickableStyles, variantStyles } from './Card.styles.mjs';
7
6
 
8
- const Card = forwardRef(({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
7
+ const Card = forwardRef(({ clickable, variant = 'default', _hover, ...rest }, ref) => {
9
8
  const mergedHover = clickable
10
9
  ? { ...clickableStyles._hover, ..._hover }
11
10
  : _hover;
12
- return (jsx(Card$1.Root, { ref: ref, position: "relative", bg: "white", color: "inherit", boxShadow: "none", border: "1px solid", borderColor: "gray.200", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: clickableStyles.cursor } : {}), ...variantStyles[variant], ...rest, css: mergeCss(cardStyles, css), _hover: mergedHover }));
11
+ return (jsx(Card$1.Root, { ref: ref, position: "relative", bg: "white", color: "inherit", boxShadow: "none", border: "1px solid", borderColor: "gray.200", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: clickableStyles.cursor } : {}), ...variantStyles[variant], ...rest, _hover: mergedHover }));
13
12
  });
14
13
  Card.displayName = 'Card';
15
14
 
@@ -1 +1 @@
1
- {"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCard"],"mappings":";;;;;;;AAQO,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAChE,MAAM,WAAW,GAAG;UAChB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;IAEV,QACEA,IAACC,MAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAA,GACrD,aAAa,CAAC,OAAO,CAAC,KACtB,IAAI,EACR,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAC9B,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
1
+ {"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCard"],"mappings":";;;;;;MAMa,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEA,GAAA,CAACC,MAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAA,GACrD,aAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
@@ -1,21 +1,10 @@
1
1
  /**
2
2
  * Card styles using the Golden Ratio color system.
3
3
  */
4
- export declare const cardStyles: {
5
- '.card-image': {
6
- transitionProperty: string;
7
- transitionDuration: string;
8
- transitionTimingFunction: string;
9
- };
10
- };
11
4
  export declare const clickableStyles: {
12
5
  cursor: string;
13
6
  _hover: {
14
7
  boxShadow: string;
15
- '.card-image': {
16
- transform: string;
17
- backgroundSize: string;
18
- };
19
8
  };
20
9
  };
21
10
  export declare const variantStyles: {
@@ -1 +1 @@
1
- {"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;CAS3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC"}
1
+ {"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,eAAe;;;;;CAK3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC"}
@@ -4,21 +4,10 @@
4
4
  /**
5
5
  * Card styles using the Golden Ratio color system.
6
6
  */
7
- const cardStyles = {
8
- '.card-image': {
9
- transitionProperty: 'common',
10
- transitionDuration: 'normal',
11
- transitionTimingFunction: 'ease',
12
- },
13
- };
14
7
  const clickableStyles = {
15
8
  cursor: 'pointer',
16
9
  _hover: {
17
10
  boxShadow: 'lg',
18
- '.card-image': {
19
- transform: 'scale(1.05)',
20
- backgroundSize: '105%',
21
- },
22
11
  },
23
12
  };
24
13
  const variantStyles = {
@@ -30,7 +19,6 @@ const variantStyles = {
30
19
  },
31
20
  };
32
21
 
33
- exports.cardStyles = cardStyles;
34
22
  exports.clickableStyles = clickableStyles;
35
23
  exports.variantStyles = variantStyles;
36
24
  //# sourceMappingURL=Card.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Card.styles.js","sources":["../../../src/components/Card/Card.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;AAEG;AAEI,MAAM,UAAU,GAAG;AACxB,IAAA,aAAa,EAAE;AACb,QAAA,kBAAkB,EAAE,QAAQ;AAC5B,QAAA,kBAAkB,EAAE,QAAQ;AAC5B,QAAA,wBAAwB,EAAE,MAAM;AACjC,KAAA;;AAGI,MAAM,eAAe,GAAG;AAC7B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,aAAa,EAAE;AACb,YAAA,SAAS,EAAE,aAAa;AACxB,YAAA,cAAc,EAAE,MAAM;AACvB,SAAA;AACF,KAAA;;AAGI,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,mDAAmD;AACvD,QAAA,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,UAAU;AACxB,KAAA;;;;;;;"}
1
+ {"version":3,"file":"Card.styles.js","sources":["../../../src/components/Card/Card.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;AAEG;AAEI,MAAM,eAAe,GAAG;AAC7B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA;;AAGI,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,mDAAmD;AACvD,QAAA,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,UAAU;AACxB,KAAA;;;;;;"}
@@ -2,21 +2,10 @@
2
2
  /**
3
3
  * Card styles using the Golden Ratio color system.
4
4
  */
5
- const cardStyles = {
6
- '.card-image': {
7
- transitionProperty: 'common',
8
- transitionDuration: 'normal',
9
- transitionTimingFunction: 'ease',
10
- },
11
- };
12
5
  const clickableStyles = {
13
6
  cursor: 'pointer',
14
7
  _hover: {
15
8
  boxShadow: 'lg',
16
- '.card-image': {
17
- transform: 'scale(1.05)',
18
- backgroundSize: '105%',
19
- },
20
9
  },
21
10
  };
22
11
  const variantStyles = {
@@ -28,5 +17,5 @@ const variantStyles = {
28
17
  },
29
18
  };
30
19
 
31
- export { cardStyles, clickableStyles, variantStyles };
20
+ export { clickableStyles, variantStyles };
32
21
  //# sourceMappingURL=Card.styles.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Card.styles.mjs","sources":["../../../src/components/Card/Card.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;AAEG;AAEI,MAAM,UAAU,GAAG;AACxB,IAAA,aAAa,EAAE;AACb,QAAA,kBAAkB,EAAE,QAAQ;AAC5B,QAAA,kBAAkB,EAAE,QAAQ;AAC5B,QAAA,wBAAwB,EAAE,MAAM;AACjC,KAAA;;AAGI,MAAM,eAAe,GAAG;AAC7B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,aAAa,EAAE;AACb,YAAA,SAAS,EAAE,aAAa;AACxB,YAAA,cAAc,EAAE,MAAM;AACvB,SAAA;AACF,KAAA;;AAGI,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,mDAAmD;AACvD,QAAA,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,UAAU;AACxB,KAAA;;;;;"}
1
+ {"version":3,"file":"Card.styles.mjs","sources":["../../../src/components/Card/Card.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;AAEG;AAEI,MAAM,eAAe,GAAG;AAC7B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA;;AAGI,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,mDAAmD;AACvD,QAAA,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,UAAU;AACxB,KAAA;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/components/Code/Code.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,eAAO,MAAM,IAAI,GAAI,oGAQlB,SAAS,4CA4EX,CAAC"}
1
+ {"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/components/Code/Code.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,eAAO,MAAM,IAAI,GAAI,oGAQlB,SAAS,4CA4JX,CAAC"}
@@ -2,8 +2,13 @@
2
2
  'use strict';
3
3
 
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
+ var React = require('react');
5
6
  var react = require('@chakra-ui/react');
7
+ var useTranslate = require('../../hooks/useTranslate.js');
6
8
  var index = require('../Icon/index.js');
9
+ var IconButton = require('../IconButton/IconButton.js');
10
+ require('../IconButton/IconButton.styles.js');
11
+ var Tooltip = require('../Tooltip/Tooltip.js');
7
12
  var shikiAdapter = require('./shikiAdapter.js');
8
13
 
9
14
  const Code = ({ children, language: languageProp, onCopy, hideHeader = false, showLineNumbers, containerProps, ...rest }) => {
@@ -20,12 +25,50 @@ const Code = ({ children, language: languageProp, onCopy, hideHeader = false, sh
20
25
  ...(showLineNumbers !== undefined && { showLineNumbers }),
21
26
  }
22
27
  : undefined;
28
+ const translate = useTranslate.useTranslate();
29
+ const [isCopied, setIsCopied] = React.useState(false);
30
+ const [isTooltipOpen, setIsTooltipOpen] = React.useState(undefined);
31
+ const copyResetTimerRef = React.useRef(null);
32
+ React.useEffect(() => () => {
33
+ if (copyResetTimerRef.current) {
34
+ clearTimeout(copyResetTimerRef.current);
35
+ }
36
+ }, []);
37
+ const showHeader = !hideHeader && language;
38
+ const showOverlayCopy = !showHeader && Boolean(onCopy);
23
39
  const handleCopy = () => {
24
40
  onCopy?.(children);
25
41
  };
26
- return (jsxRuntime.jsx(react.CodeBlock.AdapterProvider, { value: shikiAdapter.shikiAdapter, children: jsxRuntime.jsxs(react.CodeBlock.Root, { code: children, language: language, textStyle: "Body", overflow: "hidden", borderColor: "gray.300", ...containerPropsRest, ...restWithoutMeta, meta: mergedMeta, onCopy: handleCopy, className: ['ml-code', containerProps?.className]
42
+ const handleOverlayCopy = async () => {
43
+ try {
44
+ await navigator.clipboard.writeText(children);
45
+ }
46
+ catch {
47
+ const textArea = document.createElement('textarea');
48
+ textArea.value = children;
49
+ document.body.appendChild(textArea);
50
+ textArea.select();
51
+ document.execCommand('copy');
52
+ document.body.removeChild(textArea);
53
+ }
54
+ onCopy?.(children);
55
+ setIsCopied(true);
56
+ setIsTooltipOpen(true);
57
+ if (copyResetTimerRef.current) {
58
+ clearTimeout(copyResetTimerRef.current);
59
+ }
60
+ copyResetTimerRef.current = setTimeout(() => {
61
+ setIsCopied(false);
62
+ setIsTooltipOpen(undefined);
63
+ copyResetTimerRef.current = null;
64
+ }, 1500);
65
+ };
66
+ const headerCopyTrigger = onCopy ? (jsxRuntime.jsx(react.CodeBlock.CopyTrigger, { "aria-label": "Copy code", color: "gray.600", cursor: "pointer", children: jsxRuntime.jsx(react.CodeBlock.CopyIndicator, { copied: jsxRuntime.jsx(index.FaCheck, { color: "success.main", boxSize: "xs" }) }) })) : null;
67
+ return (jsxRuntime.jsx(react.CodeBlock.AdapterProvider, { value: shikiAdapter.shikiAdapter, children: jsxRuntime.jsxs(react.CodeBlock.Root, { code: children, language: language, textStyle: "Body", position: "relative", overflow: "hidden", borderColor: "gray.300", ...containerPropsRest, ...restWithoutMeta, meta: mergedMeta, onCopy: handleCopy, className: ['ml-code', containerProps?.className]
27
68
  .filter(Boolean)
28
- .join(' '), children: [!hideHeader && language && (jsxRuntime.jsxs(react.CodeBlock.Header, { className: "ml-code-header", px: 4, py: 2, bgColor: "white", zIndex: 2, children: [jsxRuntime.jsx(react.CodeBlock.Title, { fontFamily: "mono", fontWeight: "bold", color: "gray.1200", children: language }), jsxRuntime.jsx(react.CodeBlock.Control, { children: onCopy && (jsxRuntime.jsx(react.CodeBlock.CopyTrigger, { "aria-label": "Copy code", color: "gray.600", cursor: "pointer", children: jsxRuntime.jsx(react.CodeBlock.CopyIndicator, { copied: jsxRuntime.jsx(index.FaCheck, { color: "success.main", boxSize: "xs" }) }) })) })] })), jsxRuntime.jsx(react.CodeBlock.Content, { children: jsxRuntime.jsx(react.CodeBlock.Code, { children: jsxRuntime.jsx(react.CodeBlock.CodeText, {}) }) })] }) }));
69
+ .join(' '), children: [showHeader && (jsxRuntime.jsxs(react.CodeBlock.Header, { className: "ml-code-header", px: 4, py: 2, bgColor: "white", zIndex: 2, children: [jsxRuntime.jsx(react.CodeBlock.Title, { fontFamily: "mono", fontWeight: "bold", color: "gray.1200", children: language }), jsxRuntime.jsx(react.CodeBlock.Control, { children: headerCopyTrigger })] })), showOverlayCopy && (jsxRuntime.jsx(Tooltip.Tooltip, { content: isCopied ? translate('copied') : translate('copy'), placement: "top", open: isTooltipOpen, children: jsxRuntime.jsx(IconButton.IconButton, { className: "ml-code-copy", position: "absolute", top: 2, right: 3, zIndex: 2, "aria-label": isCopied
70
+ ? String(translate('copied'))
71
+ : String(translate('copy')), size: "sm", colorPalette: "neutral", variant: "ghost", color: "gray.800", onClick: handleOverlayCopy, children: isCopied ? (jsxRuntime.jsx(index.FaCheck, { color: "success.main", boxSize: "xs" })) : (jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" })) }) })), jsxRuntime.jsx(react.CodeBlock.Content, { children: jsxRuntime.jsx(react.CodeBlock.Code, { children: jsxRuntime.jsx(react.CodeBlock.CodeText, {}) }) })] }) }));
29
72
  };
30
73
 
31
74
  exports.Code = Code;
@@ -1 +1 @@
1
- {"version":3,"file":"Code.js","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCodeBlock","shikiAdapter","_jsxs","FaCheck"],"mappings":";;;;;;;;AAWO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,cAAc,EACd,GAAG,IAAI,EACG,KAAI;AACd,IAAA,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,GAAG,YAAY,GAAG,YAAY;AAEpE,IAAA,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE,GAAG,cAAc,IAAI,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,IAAI;AAEnD,IAAA,MAAM,OAAO,GACX,OAAO,CAAC,aAAa,CAAC;QACtB,OAAO,CAAC,QAAQ,CAAC;QACjB,eAAe,KAAK,SAAS;IAC/B,MAAM,UAAU,GAA8B;AAC5C,UAAE;AACE,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,QAAQ;YACX,IAAI,eAAe,KAAK,SAAS,IAAI,EAAE,eAAe,EAAE,CAAC;AAC1D;UACD,SAAS;IAEb,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,MAAM,GAAG,QAAQ,CAAC;AACpB,IAAA,CAAC;IAED,QACEA,cAAA,CAACC,eAAe,CAAC,eAAe,IAAC,KAAK,EAAEC,yBAAY,EAAA,QAAA,EAClDC,eAAA,CAACF,eAAe,CAAC,IAAI,EAAA,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,UAAU,EAAA,GAClB,kBAAkB,EAAA,GAClB,eAAe,EACnB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS;iBAC7C,MAAM,CAAC,OAAO;iBACd,IAAI,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAEX,CAAC,UAAU,IAAI,QAAQ,KACtBE,eAAA,CAACF,eAAe,CAAC,MAAM,EAAA,EACrB,SAAS,EAAC,gBAAgB,EAC1B,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,CAAC,EAAA,QAAA,EAAA,CAETD,cAAA,CAACC,eAAe,CAAC,KAAK,EAAA,EACpB,UAAU,EAAC,MAAM,EACjB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAC,WAAW,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACa,EACxBD,cAAA,CAACC,eAAe,CAAC,OAAO,EAAA,EAAA,QAAA,EACrB,MAAM,KACLD,cAAA,CAACC,eAAe,CAAC,WAAW,EAAA,EAAA,YAAA,EACf,WAAW,EACtB,KAAK,EAAC,UAAU,EAChB,MAAM,EAAC,SAAS,EAAA,QAAA,EAEhBD,cAAA,CAACC,eAAe,CAAC,aAAa,EAAA,EAC5B,MAAM,EAAED,cAAA,CAACI,aAAO,EAAA,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACrD,EAAA,CAC0B,CAC/B,EAAA,CACuB,CAAA,EAAA,CACH,CAC1B,EACDJ,cAAA,CAACC,eAAe,CAAC,OAAO,EAAA,EAAA,QAAA,EACtBD,cAAA,CAACC,eAAe,CAAC,IAAI,EAAA,EAAA,QAAA,EACnBD,cAAA,CAACC,eAAe,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,CACP,EAAA,CACC,CAAA,EAAA,CACL,EAAA,CACS;AAEtC;;;;"}
1
+ {"version":3,"file":"Code.js","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":[null],"names":["useTranslate","useState","useRef","useEffect","_jsx","ChakraCodeBlock","FaCheck","shikiAdapter","_jsxs","Tooltip","IconButton","FaRegCopy"],"mappings":"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"}
@@ -1,7 +1,12 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import { useState, useRef, useEffect } from 'react';
3
4
  import { CodeBlock } from '@chakra-ui/react';
4
- import { FaCheck } from '../Icon/index.mjs';
5
+ import { useTranslate } from '../../hooks/useTranslate.mjs';
6
+ import { FaCheck, FaRegCopy } from '../Icon/index.mjs';
7
+ import { IconButton } from '../IconButton/IconButton.mjs';
8
+ import '../IconButton/IconButton.styles.mjs';
9
+ import { Tooltip } from '../Tooltip/Tooltip.mjs';
5
10
  import { shikiAdapter } from './shikiAdapter.mjs';
6
11
 
7
12
  const Code = ({ children, language: languageProp, onCopy, hideHeader = false, showLineNumbers, containerProps, ...rest }) => {
@@ -18,12 +23,50 @@ const Code = ({ children, language: languageProp, onCopy, hideHeader = false, sh
18
23
  ...(showLineNumbers !== undefined && { showLineNumbers }),
19
24
  }
20
25
  : undefined;
26
+ const translate = useTranslate();
27
+ const [isCopied, setIsCopied] = useState(false);
28
+ const [isTooltipOpen, setIsTooltipOpen] = useState(undefined);
29
+ const copyResetTimerRef = useRef(null);
30
+ useEffect(() => () => {
31
+ if (copyResetTimerRef.current) {
32
+ clearTimeout(copyResetTimerRef.current);
33
+ }
34
+ }, []);
35
+ const showHeader = !hideHeader && language;
36
+ const showOverlayCopy = !showHeader && Boolean(onCopy);
21
37
  const handleCopy = () => {
22
38
  onCopy?.(children);
23
39
  };
24
- return (jsx(CodeBlock.AdapterProvider, { value: shikiAdapter, children: jsxs(CodeBlock.Root, { code: children, language: language, textStyle: "Body", overflow: "hidden", borderColor: "gray.300", ...containerPropsRest, ...restWithoutMeta, meta: mergedMeta, onCopy: handleCopy, className: ['ml-code', containerProps?.className]
40
+ const handleOverlayCopy = async () => {
41
+ try {
42
+ await navigator.clipboard.writeText(children);
43
+ }
44
+ catch {
45
+ const textArea = document.createElement('textarea');
46
+ textArea.value = children;
47
+ document.body.appendChild(textArea);
48
+ textArea.select();
49
+ document.execCommand('copy');
50
+ document.body.removeChild(textArea);
51
+ }
52
+ onCopy?.(children);
53
+ setIsCopied(true);
54
+ setIsTooltipOpen(true);
55
+ if (copyResetTimerRef.current) {
56
+ clearTimeout(copyResetTimerRef.current);
57
+ }
58
+ copyResetTimerRef.current = setTimeout(() => {
59
+ setIsCopied(false);
60
+ setIsTooltipOpen(undefined);
61
+ copyResetTimerRef.current = null;
62
+ }, 1500);
63
+ };
64
+ const headerCopyTrigger = onCopy ? (jsx(CodeBlock.CopyTrigger, { "aria-label": "Copy code", color: "gray.600", cursor: "pointer", children: jsx(CodeBlock.CopyIndicator, { copied: jsx(FaCheck, { color: "success.main", boxSize: "xs" }) }) })) : null;
65
+ return (jsx(CodeBlock.AdapterProvider, { value: shikiAdapter, children: jsxs(CodeBlock.Root, { code: children, language: language, textStyle: "Body", position: "relative", overflow: "hidden", borderColor: "gray.300", ...containerPropsRest, ...restWithoutMeta, meta: mergedMeta, onCopy: handleCopy, className: ['ml-code', containerProps?.className]
25
66
  .filter(Boolean)
26
- .join(' '), children: [!hideHeader && language && (jsxs(CodeBlock.Header, { className: "ml-code-header", px: 4, py: 2, bgColor: "white", zIndex: 2, children: [jsx(CodeBlock.Title, { fontFamily: "mono", fontWeight: "bold", color: "gray.1200", children: language }), jsx(CodeBlock.Control, { children: onCopy && (jsx(CodeBlock.CopyTrigger, { "aria-label": "Copy code", color: "gray.600", cursor: "pointer", children: jsx(CodeBlock.CopyIndicator, { copied: jsx(FaCheck, { color: "success.main", boxSize: "xs" }) }) })) })] })), jsx(CodeBlock.Content, { children: jsx(CodeBlock.Code, { children: jsx(CodeBlock.CodeText, {}) }) })] }) }));
67
+ .join(' '), children: [showHeader && (jsxs(CodeBlock.Header, { className: "ml-code-header", px: 4, py: 2, bgColor: "white", zIndex: 2, children: [jsx(CodeBlock.Title, { fontFamily: "mono", fontWeight: "bold", color: "gray.1200", children: language }), jsx(CodeBlock.Control, { children: headerCopyTrigger })] })), showOverlayCopy && (jsx(Tooltip, { content: isCopied ? translate('copied') : translate('copy'), placement: "top", open: isTooltipOpen, children: jsx(IconButton, { className: "ml-code-copy", position: "absolute", top: 2, right: 3, zIndex: 2, "aria-label": isCopied
68
+ ? String(translate('copied'))
69
+ : String(translate('copy')), size: "sm", colorPalette: "neutral", variant: "ghost", color: "gray.800", onClick: handleOverlayCopy, children: isCopied ? (jsx(FaCheck, { color: "success.main", boxSize: "xs" })) : (jsx(FaRegCopy, { boxSize: "xs" })) }) })), jsx(CodeBlock.Content, { children: jsx(CodeBlock.Code, { children: jsx(CodeBlock.CodeText, {}) }) })] }) }));
27
70
  };
28
71
 
29
72
  export { Code };
@@ -1 +1 @@
1
- {"version":3,"file":"Code.mjs","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCodeBlock","_jsxs"],"mappings":";;;;;;AAWO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,cAAc,EACd,GAAG,IAAI,EACG,KAAI;AACd,IAAA,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,GAAG,YAAY,GAAG,YAAY;AAEpE,IAAA,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE,GAAG,cAAc,IAAI,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,IAAI;AAEnD,IAAA,MAAM,OAAO,GACX,OAAO,CAAC,aAAa,CAAC;QACtB,OAAO,CAAC,QAAQ,CAAC;QACjB,eAAe,KAAK,SAAS;IAC/B,MAAM,UAAU,GAA8B;AAC5C,UAAE;AACE,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,QAAQ;YACX,IAAI,eAAe,KAAK,SAAS,IAAI,EAAE,eAAe,EAAE,CAAC;AAC1D;UACD,SAAS;IAEb,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,MAAM,GAAG,QAAQ,CAAC;AACpB,IAAA,CAAC;IAED,QACEA,GAAA,CAACC,SAAe,CAAC,eAAe,IAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAClDC,IAAA,CAACD,SAAe,CAAC,IAAI,EAAA,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAC,QAAQ,EACjB,WAAW,EAAC,UAAU,EAAA,GAClB,kBAAkB,EAAA,GAClB,eAAe,EACnB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS;iBAC7C,MAAM,CAAC,OAAO;iBACd,IAAI,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAEX,CAAC,UAAU,IAAI,QAAQ,KACtBC,IAAA,CAACD,SAAe,CAAC,MAAM,EAAA,EACrB,SAAS,EAAC,gBAAgB,EAC1B,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,CAAC,EAAA,QAAA,EAAA,CAETD,GAAA,CAACC,SAAe,CAAC,KAAK,EAAA,EACpB,UAAU,EAAC,MAAM,EACjB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAC,WAAW,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACa,EACxBD,GAAA,CAACC,SAAe,CAAC,OAAO,EAAA,EAAA,QAAA,EACrB,MAAM,KACLD,GAAA,CAACC,SAAe,CAAC,WAAW,EAAA,EAAA,YAAA,EACf,WAAW,EACtB,KAAK,EAAC,UAAU,EAChB,MAAM,EAAC,SAAS,EAAA,QAAA,EAEhBD,GAAA,CAACC,SAAe,CAAC,aAAa,EAAA,EAC5B,MAAM,EAAED,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,CACrD,EAAA,CAC0B,CAC/B,EAAA,CACuB,CAAA,EAAA,CACH,CAC1B,EACDA,GAAA,CAACC,SAAe,CAAC,OAAO,EAAA,EAAA,QAAA,EACtBD,GAAA,CAACC,SAAe,CAAC,IAAI,EAAA,EAAA,QAAA,EACnBD,GAAA,CAACC,SAAe,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAA,CACP,EAAA,CACC,CAAA,EAAA,CACL,EAAA,CACS;AAEtC;;;;"}
1
+ {"version":3,"file":"Code.mjs","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCodeBlock","_jsxs"],"mappings":"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"}
@@ -1,2 +1,4 @@
1
+ import type { BundledLanguage } from 'shiki';
2
+ export declare const BUNDLED_LANGUAGES: BundledLanguage[];
1
3
  export declare const shikiAdapter: import("@chakra-ui/react").CodeBlockAdapter;
2
4
  //# sourceMappingURL=shikiAdapter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"shikiAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/Code/shikiAdapter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,6CAwCvB,CAAC"}
1
+ {"version":3,"file":"shikiAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/Code/shikiAdapter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAoC,MAAM,OAAO,CAAC;AAE/E,eAAO,MAAM,iBAAiB,EAAE,eAAe,EA6B9C,CAAC;AAEF,eAAO,MAAM,YAAY,6CAWvB,CAAC"}
@@ -3,45 +3,47 @@
3
3
 
4
4
  var react = require('@chakra-ui/react');
5
5
 
6
+ const BUNDLED_LANGUAGES = [
7
+ 'bash',
8
+ 'c',
9
+ 'csharp',
10
+ 'css',
11
+ 'dart',
12
+ 'dockerfile',
13
+ 'go',
14
+ 'html',
15
+ 'java',
16
+ 'javascript',
17
+ 'json',
18
+ 'jsx',
19
+ 'kotlin',
20
+ 'lua',
21
+ 'markdown',
22
+ 'matlab',
23
+ 'mermaid',
24
+ 'python',
25
+ 'r',
26
+ 'ruby',
27
+ 'rust',
28
+ 'shell',
29
+ 'sql',
30
+ 'toml',
31
+ 'tsx',
32
+ 'typescript',
33
+ 'xml',
34
+ 'yaml',
35
+ ];
6
36
  const shikiAdapter = react.createShikiAdapter({
7
37
  async load() {
8
38
  const { createHighlighter } = await Promise.resolve().then(function () { return require('../../node_modules/shiki/dist/index.js'); });
9
39
  return createHighlighter({
10
- langs: [
11
- 'bash',
12
- 'c',
13
- 'csharp',
14
- 'css',
15
- 'dart',
16
- 'dockerfile',
17
- 'go',
18
- 'html',
19
- 'java',
20
- 'javascript',
21
- 'json',
22
- 'jsx',
23
- 'kotlin',
24
- 'lua',
25
- 'markdown',
26
- 'matlab',
27
- 'mermaid',
28
- 'python',
29
- 'r',
30
- 'ruby',
31
- 'rust',
32
- 'shell',
33
- 'sql',
34
- 'toml',
35
- 'tsx',
36
- 'typescript',
37
- 'xml',
38
- 'yaml',
39
- ],
40
+ langs: BUNDLED_LANGUAGES,
40
41
  themes: ['github-dark'],
41
42
  });
42
43
  },
43
44
  theme: 'github-dark',
44
45
  });
45
46
 
47
+ exports.BUNDLED_LANGUAGES = BUNDLED_LANGUAGES;
46
48
  exports.shikiAdapter = shikiAdapter;
47
49
  //# sourceMappingURL=shikiAdapter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"shikiAdapter.js","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":["createShikiAdapter"],"mappings":";;;;;AAGO,MAAM,YAAY,GAAGA,wBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,oDAAO,wCAAO,KAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE;gBACL,MAAM;gBACN,GAAG;gBACH,QAAQ;gBACR,KAAK;gBACL,MAAM;gBACN,YAAY;gBACZ,IAAI;gBACJ,MAAM;gBACN,MAAM;gBACN,YAAY;gBACZ,MAAM;gBACN,KAAK;gBACL,QAAQ;gBACR,KAAK;gBACL,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,QAAQ;gBACR,GAAG;gBACH,MAAM;gBACN,MAAM;gBACN,OAAO;gBACP,KAAK;gBACL,MAAM;gBACN,KAAK;gBACL,YAAY;gBACZ,KAAK;gBACL,MAAM;AACP,aAAA;YACD,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;"}
1
+ {"version":3,"file":"shikiAdapter.js","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":["createShikiAdapter"],"mappings":";;;;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAGD,MAAM,YAAY,GAAGA,wBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,oDAAO,wCAAO,KAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;;"}
@@ -1,45 +1,46 @@
1
1
  "use client";
2
2
  import { createShikiAdapter } from '@chakra-ui/react';
3
3
 
4
+ const BUNDLED_LANGUAGES = [
5
+ 'bash',
6
+ 'c',
7
+ 'csharp',
8
+ 'css',
9
+ 'dart',
10
+ 'dockerfile',
11
+ 'go',
12
+ 'html',
13
+ 'java',
14
+ 'javascript',
15
+ 'json',
16
+ 'jsx',
17
+ 'kotlin',
18
+ 'lua',
19
+ 'markdown',
20
+ 'matlab',
21
+ 'mermaid',
22
+ 'python',
23
+ 'r',
24
+ 'ruby',
25
+ 'rust',
26
+ 'shell',
27
+ 'sql',
28
+ 'toml',
29
+ 'tsx',
30
+ 'typescript',
31
+ 'xml',
32
+ 'yaml',
33
+ ];
4
34
  const shikiAdapter = createShikiAdapter({
5
35
  async load() {
6
36
  const { createHighlighter } = await import('../../node_modules/shiki/dist/index.mjs');
7
37
  return createHighlighter({
8
- langs: [
9
- 'bash',
10
- 'c',
11
- 'csharp',
12
- 'css',
13
- 'dart',
14
- 'dockerfile',
15
- 'go',
16
- 'html',
17
- 'java',
18
- 'javascript',
19
- 'json',
20
- 'jsx',
21
- 'kotlin',
22
- 'lua',
23
- 'markdown',
24
- 'matlab',
25
- 'mermaid',
26
- 'python',
27
- 'r',
28
- 'ruby',
29
- 'rust',
30
- 'shell',
31
- 'sql',
32
- 'toml',
33
- 'tsx',
34
- 'typescript',
35
- 'xml',
36
- 'yaml',
37
- ],
38
+ langs: BUNDLED_LANGUAGES,
38
39
  themes: ['github-dark'],
39
40
  });
40
41
  },
41
42
  theme: 'github-dark',
42
43
  });
43
44
 
44
- export { shikiAdapter };
45
+ export { BUNDLED_LANGUAGES, shikiAdapter };
45
46
  //# sourceMappingURL=shikiAdapter.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"shikiAdapter.mjs","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGO,MAAM,YAAY,GAAG,kBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,OAAO,yCAAO,CAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE;gBACL,MAAM;gBACN,GAAG;gBACH,QAAQ;gBACR,KAAK;gBACL,MAAM;gBACN,YAAY;gBACZ,IAAI;gBACJ,MAAM;gBACN,MAAM;gBACN,YAAY;gBACZ,MAAM;gBACN,KAAK;gBACL,QAAQ;gBACR,KAAK;gBACL,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,QAAQ;gBACR,GAAG;gBACH,MAAM;gBACN,MAAM;gBACN,OAAO;gBACP,KAAK;gBACL,MAAM;gBACN,KAAK;gBACL,YAAY;gBACZ,KAAK;gBACL,MAAM;AACP,aAAA;YACD,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;"}
1
+ {"version":3,"file":"shikiAdapter.mjs","sources":["../../../src/components/Code/shikiAdapter.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGO,MAAM,iBAAiB,GAAsB;IAClD,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,MAAM;IACN,YAAY;IACZ,IAAI;IACJ,MAAM;IACN,MAAM;IACN,YAAY;IACZ,MAAM;IACN,KAAK;IACL,QAAQ;IACR,KAAK;IACL,UAAU;IACV,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,GAAG;IACH,MAAM;IACN,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;IACN,KAAK;IACL,YAAY;IACZ,KAAK;IACL,MAAM;;AAGD,MAAM,YAAY,GAAG,kBAAkB,CAE5C;AACA,IAAA,MAAM,IAAI,GAAA;QACR,MAAM,EAAE,iBAAiB,EAAE,GAAG,MAAM,OAAO,yCAAO,CAAC;AACnD,QAAA,OAAO,iBAAiB,CAAC;AACvB,YAAA,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,CAAC,aAAa,CAAC;AACxB,SAAA,CAAC;IACJ,CAAC;AACD,IAAA,KAAK,EAAE,aAAa;AACrB,CAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindlogic-ai/logician-ui",
3
- "version": "3.0.0-alpha.31",
3
+ "version": "3.0.0-alpha.32",
4
4
  "description": "A comprehensive React design system built on Chakra UI",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -2,22 +2,10 @@
2
2
  * Card styles using the Golden Ratio color system.
3
3
  */
4
4
 
5
- export const cardStyles = {
6
- '.card-image': {
7
- transitionProperty: 'common',
8
- transitionDuration: 'normal',
9
- transitionTimingFunction: 'ease',
10
- },
11
- };
12
-
13
5
  export const clickableStyles = {
14
6
  cursor: 'pointer',
15
7
  _hover: {
16
8
  boxShadow: 'lg',
17
- '.card-image': {
18
- transform: 'scale(1.05)',
19
- backgroundSize: '105%',
20
- },
21
9
  },
22
10
  };
23
11
 
@@ -1,13 +1,11 @@
1
1
  import { forwardRef } from 'react';
2
2
  import { Card as ChakraCard } from '@chakra-ui/react';
3
3
 
4
- import { mergeCss } from '@/utils/mergeCss';
5
-
6
- import { cardStyles, clickableStyles, variantStyles } from './Card.styles';
4
+ import { clickableStyles, variantStyles } from './Card.styles';
7
5
  import { CardProps } from './Card.types';
8
6
 
9
7
  export const Card = forwardRef<HTMLDivElement, CardProps>(
10
- ({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
8
+ ({ clickable, variant = 'default', _hover, ...rest }, ref) => {
11
9
  const mergedHover = clickable
12
10
  ? { ...clickableStyles._hover, ..._hover }
13
11
  : _hover;
@@ -29,7 +27,6 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
29
27
  {...(clickable ? { cursor: clickableStyles.cursor } : {})}
30
28
  {...variantStyles[variant]}
31
29
  {...rest}
32
- css={mergeCss(cardStyles, css)}
33
30
  _hover={mergedHover}
34
31
  />
35
32
  );
@@ -1,6 +1,7 @@
1
1
  import { Meta, StoryObj } from '@storybook/react';
2
2
 
3
3
  import { Code } from './Code';
4
+ import { BUNDLED_LANGUAGES } from './shikiAdapter';
4
5
 
5
6
  const meta = {
6
7
  title: 'Components/Code',
@@ -8,6 +9,12 @@ const meta = {
8
9
  args: {
9
10
  children: `const t = 'test';`,
10
11
  },
12
+ argTypes: {
13
+ language: {
14
+ control: 'select',
15
+ options: BUNDLED_LANGUAGES,
16
+ },
17
+ },
11
18
  } satisfies Meta<typeof Code>;
12
19
 
13
20
  export default meta;
@@ -20,16 +27,6 @@ export const Basic: Story = {
20
27
  },
21
28
  };
22
29
 
23
- export const Copyable: Story = {
24
- args: {
25
- children: `const t = 'test';`,
26
- onCopy: (str) => {
27
- navigator.clipboard.writeText(str);
28
- console.log(str);
29
- },
30
- },
31
- };
32
-
33
30
  export const WithCopyButton: Story = {
34
31
  args: {
35
32
  language: 'typescript',
@@ -50,18 +47,6 @@ export const Example = () => (
50
47
  },
51
48
  };
52
49
 
53
- export const JavaScript: Story = {
54
- args: {
55
- language: 'javascript',
56
- children: `function greet(name) {
57
- return \`Hello, \${name}!\`;
58
- }
59
-
60
- const message = greet('world');
61
- console.log(message);`,
62
- },
63
- };
64
-
65
50
  export const TypeScript: Story = {
66
51
  args: {
67
52
  language: 'typescript',
@@ -78,36 +63,6 @@ const getUser = async (id: string): Promise<User> => {
78
63
  },
79
64
  };
80
65
 
81
- export const TSX: Story = {
82
- args: {
83
- language: 'tsx',
84
- children: `import { Button } from '@mindlogic-ai/logician-ui';
85
-
86
- type Props = {
87
- onClick: () => void;
88
- };
89
-
90
- export const SubmitButton = ({ onClick }: Props) => (
91
- <Button variant="primary" onClick={onClick}>
92
- Submit
93
- </Button>
94
- );`,
95
- },
96
- };
97
-
98
- export const Python: Story = {
99
- args: {
100
- language: 'python',
101
- children: `def fibonacci(n: int) -> list[int]:
102
- seq = [0, 1]
103
- while len(seq) < n:
104
- seq.append(seq[-1] + seq[-2])
105
- return seq[:n]
106
-
107
- print(fibonacci(10))`,
108
- },
109
- };
110
-
111
66
  export const JSON: Story = {
112
67
  args: {
113
68
  language: 'json',
@@ -135,114 +90,6 @@ yarn build`,
135
90
  },
136
91
  };
137
92
 
138
- export const SQL: Story = {
139
- args: {
140
- language: 'sql',
141
- children: `SELECT u.id, u.name, COUNT(o.id) AS order_count
142
- FROM users u
143
- LEFT JOIN orders o ON o.user_id = u.id
144
- WHERE u.created_at > '2025-01-01'
145
- GROUP BY u.id, u.name
146
- ORDER BY order_count DESC
147
- LIMIT 10;`,
148
- },
149
- };
150
-
151
- export const HTML: Story = {
152
- args: {
153
- language: 'html',
154
- children: `<!DOCTYPE html>
155
- <html lang="en">
156
- <head>
157
- <meta charset="UTF-8" />
158
- <title>Logician UI</title>
159
- </head>
160
- <body>
161
- <main id="root"></main>
162
- </body>
163
- </html>`,
164
- },
165
- };
166
-
167
- export const CSS: Story = {
168
- args: {
169
- language: 'css',
170
- children: `.ml-code {
171
- border-radius: 0;
172
- overflow: hidden;
173
- }
174
-
175
- .ml-code-header {
176
- padding: 8px 16px;
177
- background-color: white;
178
- border-bottom: 1px solid var(--chakra-colors-primary-light);
179
- }`,
180
- },
181
- };
182
-
183
- export const Go: Story = {
184
- args: {
185
- language: 'go',
186
- children: `package main
187
-
188
- import "fmt"
189
-
190
- func main() {
191
- names := []string{"Alice", "Bob", "Carol"}
192
- for i, name := range names {
193
- fmt.Printf("%d: Hello, %s!\\n", i, name)
194
- }
195
- }`,
196
- },
197
- };
198
-
199
- export const Rust: Story = {
200
- args: {
201
- language: 'rust',
202
- children: `fn main() {
203
- let numbers = vec![1, 2, 3, 4, 5];
204
- let sum: i32 = numbers.iter().sum();
205
- println!("Sum: {}", sum);
206
- }`,
207
- },
208
- };
209
-
210
- export const YAML: Story = {
211
- args: {
212
- language: 'yaml',
213
- children: `name: CI
214
- on:
215
- push:
216
- branches: [main, dev]
217
- jobs:
218
- test:
219
- runs-on: ubuntu-latest
220
- steps:
221
- - uses: actions/checkout@v4
222
- - run: yarn install
223
- - run: yarn type-check`,
224
- },
225
- };
226
-
227
- export const Markdown: Story = {
228
- args: {
229
- language: 'markdown',
230
- children: `# Logician UI
231
-
232
- A React component library built on **Chakra UI**.
233
-
234
- ## Installation
235
-
236
- \`\`\`bash
237
- yarn add @mindlogic-ai/logician-ui
238
- \`\`\`
239
-
240
- - Accessible
241
- - Themeable
242
- - TypeScript-first`,
243
- },
244
- };
245
-
246
93
  export const JsAlias: Story = {
247
94
  args: {
248
95
  language: 'js',
@@ -260,6 +107,24 @@ export const HiddenHeader: Story = {
260
107
  },
261
108
  };
262
109
 
110
+ export const HiddenHeaderWithCopy: Story = {
111
+ args: {
112
+ language: 'typescript',
113
+ hideHeader: true,
114
+ onCopy: (str) => navigator.clipboard.writeText(str),
115
+ children: `type User = {
116
+ id: string;
117
+ name: string;
118
+ email: string;
119
+ };
120
+
121
+ const getUser = async (id: string): Promise<User> => {
122
+ const res = await fetch(\`/api/users/\${id}\`);
123
+ return res.json();
124
+ };`,
125
+ },
126
+ };
127
+
263
128
  export const NoLanguage: Story = {
264
129
  args: {
265
130
  children: `Plain text without syntax highlighting.
@@ -316,6 +181,7 @@ export const WithLineNumbers: Story = {
316
181
  args: {
317
182
  language: 'typescript',
318
183
  showLineNumbers: true,
184
+ onCopy: (str) => navigator.clipboard.writeText(str),
319
185
  children: `type User = {
320
186
  id: string;
321
187
  name: string;
@@ -329,21 +195,6 @@ const getUser = async (id: string): Promise<User> => {
329
195
  },
330
196
  };
331
197
 
332
- export const WithLineNumbersAndCopy: Story = {
333
- args: {
334
- language: 'tsx',
335
- showLineNumbers: true,
336
- onCopy: (str) => navigator.clipboard.writeText(str),
337
- children: `import { Code } from '@mindlogic-ai/logician-ui';
338
-
339
- export const Example = () => (
340
- <Code language="tsx" showLineNumbers>
341
- {'const greeting = "hello";'}
342
- </Code>
343
- );`,
344
- },
345
- };
346
-
347
198
  export const CustomContainer: Story = {
348
199
  args: {
349
200
  language: 'typescript',
@@ -1,9 +1,14 @@
1
+ import { useEffect, useRef, useState } from 'react';
1
2
  import {
2
3
  CodeBlock as ChakraCodeBlock,
3
4
  CodeBlockRootProps,
4
5
  } from '@chakra-ui/react';
5
6
 
6
- import { FaCheck } from '../Icon';
7
+ import { useTranslate } from '@/hooks/useTranslate';
8
+
9
+ import { FaCheck, FaRegCopy } from '../Icon';
10
+ import { IconButton } from '../IconButton';
11
+ import { Tooltip } from '../Tooltip';
7
12
  import { CodeProps } from './Code.types';
8
13
  import { shikiAdapter } from './shikiAdapter';
9
14
 
@@ -35,16 +40,75 @@ export const Code = ({
35
40
  }
36
41
  : undefined;
37
42
 
43
+ const translate = useTranslate();
44
+ const [isCopied, setIsCopied] = useState(false);
45
+ const [isTooltipOpen, setIsTooltipOpen] = useState<boolean | undefined>(
46
+ undefined
47
+ );
48
+ const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
49
+
50
+ useEffect(
51
+ () => () => {
52
+ if (copyResetTimerRef.current) {
53
+ clearTimeout(copyResetTimerRef.current);
54
+ }
55
+ },
56
+ []
57
+ );
58
+
59
+ const showHeader = !hideHeader && language;
60
+ const showOverlayCopy = !showHeader && Boolean(onCopy);
61
+
38
62
  const handleCopy = () => {
39
63
  onCopy?.(children);
40
64
  };
41
65
 
66
+ const handleOverlayCopy = async () => {
67
+ try {
68
+ await navigator.clipboard.writeText(children);
69
+ } catch {
70
+ const textArea = document.createElement('textarea');
71
+ textArea.value = children;
72
+ document.body.appendChild(textArea);
73
+ textArea.select();
74
+ document.execCommand('copy');
75
+ document.body.removeChild(textArea);
76
+ }
77
+
78
+ onCopy?.(children);
79
+
80
+ setIsCopied(true);
81
+ setIsTooltipOpen(true);
82
+
83
+ if (copyResetTimerRef.current) {
84
+ clearTimeout(copyResetTimerRef.current);
85
+ }
86
+ copyResetTimerRef.current = setTimeout(() => {
87
+ setIsCopied(false);
88
+ setIsTooltipOpen(undefined);
89
+ copyResetTimerRef.current = null;
90
+ }, 1500);
91
+ };
92
+
93
+ const headerCopyTrigger = onCopy ? (
94
+ <ChakraCodeBlock.CopyTrigger
95
+ aria-label="Copy code"
96
+ color="gray.600"
97
+ cursor="pointer"
98
+ >
99
+ <ChakraCodeBlock.CopyIndicator
100
+ copied={<FaCheck color="success.main" boxSize="xs" />}
101
+ />
102
+ </ChakraCodeBlock.CopyTrigger>
103
+ ) : null;
104
+
42
105
  return (
43
106
  <ChakraCodeBlock.AdapterProvider value={shikiAdapter}>
44
107
  <ChakraCodeBlock.Root
45
108
  code={children}
46
109
  language={language}
47
110
  textStyle="Body"
111
+ position="relative"
48
112
  overflow="hidden"
49
113
  borderColor="gray.300"
50
114
  {...containerPropsRest}
@@ -55,7 +119,7 @@ export const Code = ({
55
119
  .filter(Boolean)
56
120
  .join(' ')}
57
121
  >
58
- {!hideHeader && language && (
122
+ {showHeader && (
59
123
  <ChakraCodeBlock.Header
60
124
  className="ml-code-header"
61
125
  px={4}
@@ -71,20 +135,41 @@ export const Code = ({
71
135
  {language}
72
136
  </ChakraCodeBlock.Title>
73
137
  <ChakraCodeBlock.Control>
74
- {onCopy && (
75
- <ChakraCodeBlock.CopyTrigger
76
- aria-label="Copy code"
77
- color="gray.600"
78
- cursor="pointer"
79
- >
80
- <ChakraCodeBlock.CopyIndicator
81
- copied={<FaCheck color="success.main" boxSize="xs" />}
82
- />
83
- </ChakraCodeBlock.CopyTrigger>
84
- )}
138
+ {headerCopyTrigger}
85
139
  </ChakraCodeBlock.Control>
86
140
  </ChakraCodeBlock.Header>
87
141
  )}
142
+ {showOverlayCopy && (
143
+ <Tooltip
144
+ content={isCopied ? translate('copied') : translate('copy')}
145
+ placement="top"
146
+ open={isTooltipOpen}
147
+ >
148
+ <IconButton
149
+ className="ml-code-copy"
150
+ position="absolute"
151
+ top={2}
152
+ right={3}
153
+ zIndex={2}
154
+ aria-label={
155
+ isCopied
156
+ ? String(translate('copied'))
157
+ : String(translate('copy'))
158
+ }
159
+ size="sm"
160
+ colorPalette="neutral"
161
+ variant="ghost"
162
+ color="gray.800"
163
+ onClick={handleOverlayCopy}
164
+ >
165
+ {isCopied ? (
166
+ <FaCheck color="success.main" boxSize="xs" />
167
+ ) : (
168
+ <FaRegCopy boxSize="xs" />
169
+ )}
170
+ </IconButton>
171
+ </Tooltip>
172
+ )}
88
173
  <ChakraCodeBlock.Content>
89
174
  <ChakraCodeBlock.Code>
90
175
  <ChakraCodeBlock.CodeText />
@@ -1,42 +1,44 @@
1
1
  import { createShikiAdapter } from '@chakra-ui/react';
2
2
  import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
3
3
 
4
+ export const BUNDLED_LANGUAGES: BundledLanguage[] = [
5
+ 'bash',
6
+ 'c',
7
+ 'csharp',
8
+ 'css',
9
+ 'dart',
10
+ 'dockerfile',
11
+ 'go',
12
+ 'html',
13
+ 'java',
14
+ 'javascript',
15
+ 'json',
16
+ 'jsx',
17
+ 'kotlin',
18
+ 'lua',
19
+ 'markdown',
20
+ 'matlab',
21
+ 'mermaid',
22
+ 'python',
23
+ 'r',
24
+ 'ruby',
25
+ 'rust',
26
+ 'shell',
27
+ 'sql',
28
+ 'toml',
29
+ 'tsx',
30
+ 'typescript',
31
+ 'xml',
32
+ 'yaml',
33
+ ];
34
+
4
35
  export const shikiAdapter = createShikiAdapter<
5
36
  HighlighterGeneric<BundledLanguage, BundledTheme>
6
37
  >({
7
38
  async load() {
8
39
  const { createHighlighter } = await import('shiki');
9
40
  return createHighlighter({
10
- langs: [
11
- 'bash',
12
- 'c',
13
- 'csharp',
14
- 'css',
15
- 'dart',
16
- 'dockerfile',
17
- 'go',
18
- 'html',
19
- 'java',
20
- 'javascript',
21
- 'json',
22
- 'jsx',
23
- 'kotlin',
24
- 'lua',
25
- 'markdown',
26
- 'matlab',
27
- 'mermaid',
28
- 'python',
29
- 'r',
30
- 'ruby',
31
- 'rust',
32
- 'shell',
33
- 'sql',
34
- 'toml',
35
- 'tsx',
36
- 'typescript',
37
- 'xml',
38
- 'yaml',
39
- ],
41
+ langs: BUNDLED_LANGUAGES,
40
42
  themes: ['github-dark'],
41
43
  });
42
44
  },