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

package/dist/components/Card/Card.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/Card/Card.js

@@ -4,14 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
-var mergeCss = require('../../utils/mergeCss.js');
 var Card_styles = require('./Card.styles.js');
 
-const Card = React.forwardRef(({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
+const Card = React.forwardRef(({ clickable, variant = 'default', _hover, ...rest }, ref) => {
     const mergedHover = clickable
         ? { ...Card_styles.clickableStyles._hover, ..._hover }
         : _hover;
-    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 }));
+    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 }));
 });
 Card.displayName = 'Card';
 

package/dist/components/Card/Card.js.map

@@ -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;;;;"}
+{"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;;;;"}

package/dist/components/Card/Card.mjs

@@ -2,14 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Card as Card$1 } from '@chakra-ui/react';
-import { mergeCss } from '../../utils/mergeCss.mjs';
-import { clickableStyles, variantStyles, cardStyles } from './Card.styles.mjs';
+import { clickableStyles, variantStyles } from './Card.styles.mjs';
 
-const Card = forwardRef(({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
+const Card = forwardRef(({ clickable, variant = 'default', _hover, ...rest }, ref) => {
     const mergedHover = clickable
         ? { ...clickableStyles._hover, ..._hover }
         : _hover;
-    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 }));
+    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 }));
 });
 Card.displayName = 'Card';
 

package/dist/components/Card/Card.mjs.map

@@ -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;;;;"}
+{"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;;;;"}

package/dist/components/Card/Card.styles.d.ts

@@ -1,21 +1,10 @@
 /**
  * Card styles using the Golden Ratio color system.
  */
-export declare const cardStyles: {
-    '.card-image': {
-        transitionProperty: string;
-        transitionDuration: string;
-        transitionTimingFunction: string;
-    };
-};
 export declare const clickableStyles: {
     cursor: string;
     _hover: {
         boxShadow: string;
-        '.card-image': {
-            transform: string;
-            backgroundSize: string;
-        };
     };
 };
 export declare const variantStyles: {

package/dist/components/Card/Card.styles.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/Card/Card.styles.js

@@ -4,21 +4,10 @@
 /**
  * Card styles using the Golden Ratio color system.
  */
-const cardStyles = {
-    '.card-image': {
-        transitionProperty: 'common',
-        transitionDuration: 'normal',
-        transitionTimingFunction: 'ease',
-    },
-};
 const clickableStyles = {
     cursor: 'pointer',
     _hover: {
         boxShadow: 'lg',
-        '.card-image': {
-            transform: 'scale(1.05)',
-            backgroundSize: '105%',
-        },
     },
 };
 const variantStyles = {
@@ -30,7 +19,6 @@ const variantStyles = {
     },
 };
 
-exports.cardStyles = cardStyles;
 exports.clickableStyles = clickableStyles;
 exports.variantStyles = variantStyles;
 //# sourceMappingURL=Card.styles.js.map

package/dist/components/Card/Card.styles.js.map

@@ -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;;;;;;;"}
+{"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;;;;;;"}

package/dist/components/Card/Card.styles.mjs

@@ -2,21 +2,10 @@
 /**
  * Card styles using the Golden Ratio color system.
  */
-const cardStyles = {
-    '.card-image': {
-        transitionProperty: 'common',
-        transitionDuration: 'normal',
-        transitionTimingFunction: 'ease',
-    },
-};
 const clickableStyles = {
     cursor: 'pointer',
     _hover: {
         boxShadow: 'lg',
-        '.card-image': {
-            transform: 'scale(1.05)',
-            backgroundSize: '105%',
-        },
     },
 };
 const variantStyles = {
@@ -28,5 +17,5 @@ const variantStyles = {
     },
 };
 
-export { cardStyles, clickableStyles, variantStyles };
+export { clickableStyles, variantStyles };
 //# sourceMappingURL=Card.styles.mjs.map

package/dist/components/Card/Card.styles.mjs.map

@@ -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;;;;;"}
+{"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;;;;;"}

package/dist/components/Code/Code.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/Code/Code.js

@@ -2,8 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var react = require('@chakra-ui/react');
+var useTranslate = require('../../hooks/useTranslate.js');
 var index = require('../Icon/index.js');
+var IconButton = require('../IconButton/IconButton.js');
+require('../IconButton/IconButton.styles.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var shikiAdapter = require('./shikiAdapter.js');
 
 const Code = ({ children, language: languageProp, onCopy, hideHeader = false, showLineNumbers, containerProps, ...rest }) => {
@@ -20,12 +25,50 @@ const Code = ({ children, language: languageProp, onCopy, hideHeader = false, sh
             ...(showLineNumbers !== undefined && { showLineNumbers }),
         }
         : undefined;
+    const translate = useTranslate.useTranslate();
+    const [isCopied, setIsCopied] = React.useState(false);
+    const [isTooltipOpen, setIsTooltipOpen] = React.useState(undefined);
+    const copyResetTimerRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (copyResetTimerRef.current) {
+            clearTimeout(copyResetTimerRef.current);
+        }
+    }, []);
+    const showHeader = !hideHeader && language;
+    const showOverlayCopy = !showHeader && Boolean(onCopy);
     const handleCopy = () => {
         onCopy?.(children);
     };
-    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]
+    const handleOverlayCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(children);
+        }
+        catch {
+            const textArea = document.createElement('textarea');
+            textArea.value = children;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+        onCopy?.(children);
+        setIsCopied(true);
+        setIsTooltipOpen(true);
+        if (copyResetTimerRef.current) {
+            clearTimeout(copyResetTimerRef.current);
+        }
+        copyResetTimerRef.current = setTimeout(() => {
+            setIsCopied(false);
+            setIsTooltipOpen(undefined);
+            copyResetTimerRef.current = null;
+        }, 1500);
+    };
+    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;
+    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]
                 .filter(Boolean)
-                .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, {}) }) })] }) }));
+                .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
+                            ? String(translate('copied'))
+                            : 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, {}) }) })] }) }));
 };
 
 exports.Code = Code;

package/dist/components/Code/Code.js.map

@@ -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;;;;"}
+{"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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"}

package/dist/components/Code/Code.mjs

@@ -1,7 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { CodeBlock } from '@chakra-ui/react';
-import { FaCheck } from '../Icon/index.mjs';
+import { useTranslate } from '../../hooks/useTranslate.mjs';
+import { FaCheck, FaRegCopy } from '../Icon/index.mjs';
+import { IconButton } from '../IconButton/IconButton.mjs';
+import '../IconButton/IconButton.styles.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
 import { shikiAdapter } from './shikiAdapter.mjs';
 
 const Code = ({ children, language: languageProp, onCopy, hideHeader = false, showLineNumbers, containerProps, ...rest }) => {
@@ -18,12 +23,50 @@ const Code = ({ children, language: languageProp, onCopy, hideHeader = false, sh
             ...(showLineNumbers !== undefined && { showLineNumbers }),
         }
         : undefined;
+    const translate = useTranslate();
+    const [isCopied, setIsCopied] = useState(false);
+    const [isTooltipOpen, setIsTooltipOpen] = useState(undefined);
+    const copyResetTimerRef = useRef(null);
+    useEffect(() => () => {
+        if (copyResetTimerRef.current) {
+            clearTimeout(copyResetTimerRef.current);
+        }
+    }, []);
+    const showHeader = !hideHeader && language;
+    const showOverlayCopy = !showHeader && Boolean(onCopy);
     const handleCopy = () => {
         onCopy?.(children);
     };
-    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]
+    const handleOverlayCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(children);
+        }
+        catch {
+            const textArea = document.createElement('textarea');
+            textArea.value = children;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+        onCopy?.(children);
+        setIsCopied(true);
+        setIsTooltipOpen(true);
+        if (copyResetTimerRef.current) {
+            clearTimeout(copyResetTimerRef.current);
+        }
+        copyResetTimerRef.current = setTimeout(() => {
+            setIsCopied(false);
+            setIsTooltipOpen(undefined);
+            copyResetTimerRef.current = null;
+        }, 1500);
+    };
+    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;
+    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]
                 .filter(Boolean)
-                .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, {}) }) })] }) }));
+                .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
+                            ? String(translate('copied'))
+                            : 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, {}) }) })] }) }));
 };
 
 export { Code };

package/dist/components/Code/Code.mjs.map

@@ -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;;;;"}
+{"version":3,"file":"Code.mjs","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCodeBlock","_jsxs"],"mappings":"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"}

package/dist/components/Code/shikiAdapter.d.ts

@@ -1,2 +1,4 @@
+import type { BundledLanguage } from 'shiki';
+export declare const BUNDLED_LANGUAGES: BundledLanguage[];
 export declare const shikiAdapter: import("@chakra-ui/react").CodeBlockAdapter;
 //# sourceMappingURL=shikiAdapter.d.ts.map

package/dist/components/Code/shikiAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shikiAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/Code/shikiAdapter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,6CA6BvB,CAAC"}
+{"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"}

package/dist/components/Code/shikiAdapter.js

@@ -3,34 +3,47 @@
 
 var react = require('@chakra-ui/react');
 
+const BUNDLED_LANGUAGES = [
+    'bash',
+    'c',
+    'csharp',
+    'css',
+    'dart',
+    'dockerfile',
+    'go',
+    'html',
+    'java',
+    'javascript',
+    'json',
+    'jsx',
+    'kotlin',
+    'lua',
+    'markdown',
+    'matlab',
+    'mermaid',
+    'python',
+    'r',
+    'ruby',
+    'rust',
+    'shell',
+    'sql',
+    'toml',
+    'tsx',
+    'typescript',
+    'xml',
+    'yaml',
+];
 const shikiAdapter = react.createShikiAdapter({
     async load() {
         const { createHighlighter } = await Promise.resolve().then(function () { return require('../../node_modules/shiki/dist/index.js'); });
         return createHighlighter({
-            langs: [
-                'bash',
-                'css',
-                'go',
-                'html',
-                'java',
-                'javascript',
-                'json',
-                'jsx',
-                'markdown',
-                'python',
-                'rust',
-                'shell',
-                'sql',
-                'tsx',
-                'typescript',
-                'xml',
-                'yaml',
-            ],
+            langs: BUNDLED_LANGUAGES,
             themes: ['github-dark'],
         });
     },
     theme: 'github-dark',
 });
 
+exports.BUNDLED_LANGUAGES = BUNDLED_LANGUAGES;
 exports.shikiAdapter = shikiAdapter;
 //# sourceMappingURL=shikiAdapter.js.map

package/dist/components/Code/shikiAdapter.js.map

@@ -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,KAAK;gBACL,IAAI;gBACJ,MAAM;gBACN,MAAM;gBACN,YAAY;gBACZ,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,QAAQ;gBACR,MAAM;gBACN,OAAO;gBACP,KAAK;gBACL,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;;;;"}
+{"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;;;;;"}

package/dist/components/Code/shikiAdapter.mjs

@@ -1,34 +1,46 @@
 "use client";
 import { createShikiAdapter } from '@chakra-ui/react';
 
+const BUNDLED_LANGUAGES = [
+    'bash',
+    'c',
+    'csharp',
+    'css',
+    'dart',
+    'dockerfile',
+    'go',
+    'html',
+    'java',
+    'javascript',
+    'json',
+    'jsx',
+    'kotlin',
+    'lua',
+    'markdown',
+    'matlab',
+    'mermaid',
+    'python',
+    'r',
+    'ruby',
+    'rust',
+    'shell',
+    'sql',
+    'toml',
+    'tsx',
+    'typescript',
+    'xml',
+    'yaml',
+];
 const shikiAdapter = createShikiAdapter({
     async load() {
         const { createHighlighter } = await import('../../node_modules/shiki/dist/index.mjs');
         return createHighlighter({
-            langs: [
-                'bash',
-                'css',
-                'go',
-                'html',
-                'java',
-                'javascript',
-                'json',
-                'jsx',
-                'markdown',
-                'python',
-                'rust',
-                'shell',
-                'sql',
-                'tsx',
-                'typescript',
-                'xml',
-                'yaml',
-            ],
+            langs: BUNDLED_LANGUAGES,
             themes: ['github-dark'],
         });
     },
     theme: 'github-dark',
 });
 
-export { shikiAdapter };
+export { BUNDLED_LANGUAGES, shikiAdapter };
 //# sourceMappingURL=shikiAdapter.mjs.map

package/dist/components/Code/shikiAdapter.mjs.map

@@ -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,KAAK;gBACL,IAAI;gBACJ,MAAM;gBACN,MAAM;gBACN,YAAY;gBACZ,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,QAAQ;gBACR,MAAM;gBACN,OAAO;gBACP,KAAK;gBACL,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;;;;"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.0-alpha.32",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Card/Card.styles.ts

@@ -2,22 +2,10 @@
  * Card styles using the Golden Ratio color system.
  */
 
-export const cardStyles = {
-  '.card-image': {
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
-    transitionTimingFunction: 'ease',
-  },
-};
-
 export const clickableStyles = {
   cursor: 'pointer',
   _hover: {
     boxShadow: 'lg',
-    '.card-image': {
-      transform: 'scale(1.05)',
-      backgroundSize: '105%',
-    },
   },
 };
 

package/src/components/Card/Card.tsx

@@ -1,13 +1,11 @@
 import { forwardRef } from 'react';
 import { Card as ChakraCard } from '@chakra-ui/react';
 
-import { mergeCss } from '@/utils/mergeCss';
-
-import { cardStyles, clickableStyles, variantStyles } from './Card.styles';
+import { clickableStyles, variantStyles } from './Card.styles';
 import { CardProps } from './Card.types';
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ clickable, variant = 'default', _hover, css, ...rest }, ref) => {
+  ({ clickable, variant = 'default', _hover, ...rest }, ref) => {
     const mergedHover = clickable
       ? { ...clickableStyles._hover, ..._hover }
       : _hover;
@@ -29,7 +27,6 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
         {...(clickable ? { cursor: clickableStyles.cursor } : {})}
         {...variantStyles[variant]}
         {...rest}
-        css={mergeCss(cardStyles, css)}
         _hover={mergedHover}
       />
     );

package/src/components/Code/Code.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Code } from './Code';
+import { BUNDLED_LANGUAGES } from './shikiAdapter';
 
 const meta = {
   title: 'Components/Code',
@@ -8,6 +9,12 @@ const meta = {
   args: {
     children: `const t = 'test';`,
   },
+  argTypes: {
+    language: {
+      control: 'select',
+      options: BUNDLED_LANGUAGES,
+    },
+  },
 } satisfies Meta<typeof Code>;
 
 export default meta;
@@ -20,16 +27,6 @@ export const Basic: Story = {
   },
 };
 
-export const Copyable: Story = {
-  args: {
-    children: `const t = 'test';`,
-    onCopy: (str) => {
-      navigator.clipboard.writeText(str);
-      console.log(str);
-    },
-  },
-};
-
 export const WithCopyButton: Story = {
   args: {
     language: 'typescript',
@@ -50,18 +47,6 @@ export const Example = () => (
   },
 };
 
-export const JavaScript: Story = {
-  args: {
-    language: 'javascript',
-    children: `function greet(name) {
-  return \`Hello, \${name}!\`;
-}
-
-const message = greet('world');
-console.log(message);`,
-  },
-};
-
 export const TypeScript: Story = {
   args: {
     language: 'typescript',
@@ -78,36 +63,6 @@ const getUser = async (id: string): Promise<User> => {
   },
 };
 
-export const TSX: Story = {
-  args: {
-    language: 'tsx',
-    children: `import { Button } from '@mindlogic-ai/logician-ui';
-
-type Props = {
-  onClick: () => void;
-};
-
-export const SubmitButton = ({ onClick }: Props) => (
-  <Button variant="primary" onClick={onClick}>
-    Submit
-  </Button>
-);`,
-  },
-};
-
-export const Python: Story = {
-  args: {
-    language: 'python',
-    children: `def fibonacci(n: int) -> list[int]:
-    seq = [0, 1]
-    while len(seq) < n:
-        seq.append(seq[-1] + seq[-2])
-    return seq[:n]
-
-print(fibonacci(10))`,
-  },
-};
-
 export const JSON: Story = {
   args: {
     language: 'json',
@@ -135,114 +90,6 @@ yarn build`,
   },
 };
 
-export const SQL: Story = {
-  args: {
-    language: 'sql',
-    children: `SELECT u.id, u.name, COUNT(o.id) AS order_count
-FROM users u
-LEFT JOIN orders o ON o.user_id = u.id
-WHERE u.created_at > '2025-01-01'
-GROUP BY u.id, u.name
-ORDER BY order_count DESC
-LIMIT 10;`,
-  },
-};
-
-export const HTML: Story = {
-  args: {
-    language: 'html',
-    children: `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Logician UI</title>
-  </head>
-  <body>
-    <main id="root"></main>
-  </body>
-</html>`,
-  },
-};
-
-export const CSS: Story = {
-  args: {
-    language: 'css',
-    children: `.ml-code {
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.ml-code-header {
-  padding: 8px 16px;
-  background-color: white;
-  border-bottom: 1px solid var(--chakra-colors-primary-light);
-}`,
-  },
-};
-
-export const Go: Story = {
-  args: {
-    language: 'go',
-    children: `package main
-
-import "fmt"
-
-func main() {
-	names := []string{"Alice", "Bob", "Carol"}
-	for i, name := range names {
-		fmt.Printf("%d: Hello, %s!\\n", i, name)
-	}
-}`,
-  },
-};
-
-export const Rust: Story = {
-  args: {
-    language: 'rust',
-    children: `fn main() {
-    let numbers = vec![1, 2, 3, 4, 5];
-    let sum: i32 = numbers.iter().sum();
-    println!("Sum: {}", sum);
-}`,
-  },
-};
-
-export const YAML: Story = {
-  args: {
-    language: 'yaml',
-    children: `name: CI
-on:
-  push:
-    branches: [main, dev]
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - run: yarn install
-      - run: yarn type-check`,
-  },
-};
-
-export const Markdown: Story = {
-  args: {
-    language: 'markdown',
-    children: `# Logician UI
-
-A React component library built on **Chakra UI**.
-
-## Installation
-
-\`\`\`bash
-yarn add @mindlogic-ai/logician-ui
-\`\`\`
-
-- Accessible
-- Themeable
-- TypeScript-first`,
-  },
-};
-
 export const JsAlias: Story = {
   args: {
     language: 'js',
@@ -260,6 +107,24 @@ export const HiddenHeader: Story = {
   },
 };
 
+export const HiddenHeaderWithCopy: Story = {
+  args: {
+    language: 'typescript',
+    hideHeader: true,
+    onCopy: (str) => navigator.clipboard.writeText(str),
+    children: `type User = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+const getUser = async (id: string): Promise<User> => {
+  const res = await fetch(\`/api/users/\${id}\`);
+  return res.json();
+};`,
+  },
+};
+
 export const NoLanguage: Story = {
   args: {
     children: `Plain text without syntax highlighting.
@@ -316,6 +181,7 @@ export const WithLineNumbers: Story = {
   args: {
     language: 'typescript',
     showLineNumbers: true,
+    onCopy: (str) => navigator.clipboard.writeText(str),
     children: `type User = {
   id: string;
   name: string;
@@ -329,21 +195,6 @@ const getUser = async (id: string): Promise<User> => {
   },
 };
 
-export const WithLineNumbersAndCopy: Story = {
-  args: {
-    language: 'tsx',
-    showLineNumbers: true,
-    onCopy: (str) => navigator.clipboard.writeText(str),
-    children: `import { Code } from '@mindlogic-ai/logician-ui';
-
-export const Example = () => (
-  <Code language="tsx" showLineNumbers>
-    {'const greeting = "hello";'}
-  </Code>
-);`,
-  },
-};
-
 export const CustomContainer: Story = {
   args: {
     language: 'typescript',

package/src/components/Code/Code.tsx

@@ -1,9 +1,14 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   CodeBlock as ChakraCodeBlock,
   CodeBlockRootProps,
 } from '@chakra-ui/react';
 
-import { FaCheck } from '../Icon';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { FaCheck, FaRegCopy } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Tooltip } from '../Tooltip';
 import { CodeProps } from './Code.types';
 import { shikiAdapter } from './shikiAdapter';
 
@@ -35,16 +40,75 @@ export const Code = ({
       }
     : undefined;
 
+  const translate = useTranslate();
+  const [isCopied, setIsCopied] = useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = useState<boolean | undefined>(
+    undefined
+  );
+  const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copyResetTimerRef.current) {
+        clearTimeout(copyResetTimerRef.current);
+      }
+    },
+    []
+  );
+
+  const showHeader = !hideHeader && language;
+  const showOverlayCopy = !showHeader && Boolean(onCopy);
+
   const handleCopy = () => {
     onCopy?.(children);
   };
 
+  const handleOverlayCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+    } catch {
+      const textArea = document.createElement('textarea');
+      textArea.value = children;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+    }
+
+    onCopy?.(children);
+
+    setIsCopied(true);
+    setIsTooltipOpen(true);
+
+    if (copyResetTimerRef.current) {
+      clearTimeout(copyResetTimerRef.current);
+    }
+    copyResetTimerRef.current = setTimeout(() => {
+      setIsCopied(false);
+      setIsTooltipOpen(undefined);
+      copyResetTimerRef.current = null;
+    }, 1500);
+  };
+
+  const headerCopyTrigger = onCopy ? (
+    <ChakraCodeBlock.CopyTrigger
+      aria-label="Copy code"
+      color="gray.600"
+      cursor="pointer"
+    >
+      <ChakraCodeBlock.CopyIndicator
+        copied={<FaCheck color="success.main" boxSize="xs" />}
+      />
+    </ChakraCodeBlock.CopyTrigger>
+  ) : null;
+
   return (
     <ChakraCodeBlock.AdapterProvider value={shikiAdapter}>
       <ChakraCodeBlock.Root
         code={children}
         language={language}
         textStyle="Body"
+        position="relative"
         overflow="hidden"
         borderColor="gray.300"
         {...containerPropsRest}
@@ -55,7 +119,7 @@ export const Code = ({
           .filter(Boolean)
           .join(' ')}
       >
-        {!hideHeader && language && (
+        {showHeader && (
           <ChakraCodeBlock.Header
             className="ml-code-header"
             px={4}
@@ -71,20 +135,41 @@ export const Code = ({
               {language}
             </ChakraCodeBlock.Title>
             <ChakraCodeBlock.Control>
-              {onCopy && (
-                <ChakraCodeBlock.CopyTrigger
-                  aria-label="Copy code"
-                  color="gray.600"
-                  cursor="pointer"
-                >
-                  <ChakraCodeBlock.CopyIndicator
-                    copied={<FaCheck color="success.main" boxSize="xs" />}
-                  />
-                </ChakraCodeBlock.CopyTrigger>
-              )}
+              {headerCopyTrigger}
             </ChakraCodeBlock.Control>
           </ChakraCodeBlock.Header>
         )}
+        {showOverlayCopy && (
+          <Tooltip
+            content={isCopied ? translate('copied') : translate('copy')}
+            placement="top"
+            open={isTooltipOpen}
+          >
+            <IconButton
+              className="ml-code-copy"
+              position="absolute"
+              top={2}
+              right={3}
+              zIndex={2}
+              aria-label={
+                isCopied
+                  ? String(translate('copied'))
+                  : String(translate('copy'))
+              }
+              size="sm"
+              colorPalette="neutral"
+              variant="ghost"
+              color="gray.800"
+              onClick={handleOverlayCopy}
+            >
+              {isCopied ? (
+                <FaCheck color="success.main" boxSize="xs" />
+              ) : (
+                <FaRegCopy boxSize="xs" />
+              )}
+            </IconButton>
+          </Tooltip>
+        )}
         <ChakraCodeBlock.Content>
           <ChakraCodeBlock.Code>
             <ChakraCodeBlock.CodeText />

package/src/components/Code/shikiAdapter.ts

@@ -1,31 +1,44 @@
 import { createShikiAdapter } from '@chakra-ui/react';
 import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
 
+export const BUNDLED_LANGUAGES: BundledLanguage[] = [
+  'bash',
+  'c',
+  'csharp',
+  'css',
+  'dart',
+  'dockerfile',
+  'go',
+  'html',
+  'java',
+  'javascript',
+  'json',
+  'jsx',
+  'kotlin',
+  'lua',
+  'markdown',
+  'matlab',
+  'mermaid',
+  'python',
+  'r',
+  'ruby',
+  'rust',
+  'shell',
+  'sql',
+  'toml',
+  'tsx',
+  'typescript',
+  'xml',
+  'yaml',
+];
+
 export const shikiAdapter = createShikiAdapter<
   HighlighterGeneric<BundledLanguage, BundledTheme>
 >({
   async load() {
     const { createHighlighter } = await import('shiki');
     return createHighlighter({
-      langs: [
-        'bash',
-        'css',
-        'go',
-        'html',
-        'java',
-        'javascript',
-        'json',
-        'jsx',
-        'markdown',
-        'python',
-        'rust',
-        'shell',
-        'sql',
-        'tsx',
-        'typescript',
-        'xml',
-        'yaml',
-      ],
+      langs: BUNDLED_LANGUAGES,
       themes: ['github-dark'],
     });
   },