@kushagradhawan/kookie-blocks 0.1.14 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/code/code-block.js +1 -1
  2. package/dist/cjs/components/code/code-block.js.map +1 -1
  3. package/dist/cjs/components/markdown/create-markdown-components.js +1 -1
  4. package/dist/cjs/components/markdown/create-markdown-components.js.map +1 -1
  5. package/dist/esm/components/code/code-block.js +1 -1
  6. package/dist/esm/components/code/code-block.js.map +1 -1
  7. package/dist/esm/components/markdown/create-markdown-components.js +1 -1
  8. package/dist/esm/components/markdown/create-markdown-components.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/code/code-block.tsx +1 -1
  11. package/src/components/markdown/create-markdown-components.tsx +6 -7
package/dist/cjs/components/code/code-block.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var I=Object.create;var y=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var $=(r,o)=>{for(var t in o)y(r,t,{get:o[t],enumerable:!0})},S=(r,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of _(o))!D.call(r,l)&&l!==t&&y(r,l,{get:()=>o[l],enumerable:!(s=A(o,l))||s.enumerable});return r};var M=(r,o,t)=>(t=r!=null?I(z(r)):{},S(o||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r)),W=r=>S(y({},"__esModule",{value:!0}),r);var X={};$(X,{CodeBlock:()=>J,useCodeBlockContext:()=>Q});module.exports=W(X);var e=M(require("react")),n=require("@kushagradhawan/kookie-ui"),w=require("@hugeicons/react"),f=require("@hugeicons/core-free-icons"),B=require("shiki"),x=require("./types"),v=require("./use-code-card"),T=require("./language-badge");const L=(0,e.createContext)(!1),O=360,U="one-light",j="one-dark-pro";function G({children:r,background:o="none",backgroundProps:t={}}){const{dotSize:s=24,color:l="var(--gray-10)",backgroundColor:c="var(--gray-2)",height:i,width:u="100%",radius:d="3"}=t,a=(0,e.useMemo)(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${l} 1px, transparent 1px)`,borderRadius:`var(--radius-${d})`,backgroundSize:`${s}px ${s}px`,backgroundPosition:"center",backgroundColor:c,width:u,...i&&{height:i}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${d})`,width:u,...i&&{height:i}}},[o,l,c,s,i,u,d]);return e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:a},e.default.createElement(n.Theme,{fontFamily:"sans"},r)))}function K(){return e.default.createElement(n.Box,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.default.createElement(n.Box,{key:t,className:"code-skeleton-line",style:{width:o}})))}const P=(0,e.memo)(function({code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:a=!1,children:p}){const{isExpanded:g,shouldShowToggle:h,copied:C,contentRef:m,contentMaxHeight:b,handleToggle:N,handleCopy:H}=(0,v.useCodeCard)({code:o,collapsedHeight:u}),k=i&&h,E=g?"rotate(180deg)":"rotate(0deg)",F=c?"code-content":"code-content hide-line-numbers";return e.default.createElement(n.Box,{position:"relative"},e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{direction:"column"},e.default.createElement(n.Flex,{justify:"between",align:"start",gap:"2"},e.default.createElement(n.Flex,{align:"center",gap:"2"},l&&e.default.createElement(T.LanguageBadge,{language:t}),d&&e.default.createElement(n.Text,{size:"1",color:"gray",highContrast:!0},d)),e.default.createElement(n.Flex,{align:"center",className:"code-action-buttons"},k&&e.default.createElement(n.IconButton,{size:"2",variant:"ghost",color:"gray",onClick:N,tooltip:g?"Collapse":"Expand","aria-label":g?"Collapse code":"Expand code"},e.default.createElement(w.HugeiconsIcon,{icon:f.ArrowDown01Icon,style:{transform:E},className:"code-chevron",strokeWidth:1.75})),s&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",onClick:H,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.default.createElement(w.HugeiconsIcon,{icon:C?f.Tick01Icon:f.Copy01Icon,strokeWidth:1.75})," Copy"))),e.default.createElement(n.Box,{ref:m,style:{maxHeight:i?`${b}px`:void 0},className:F},e.default.createElement(n.ScrollArea,{type:"auto",scrollbars:"horizontal"},a?e.default.createElement(K,null):p)),k&&!g&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))}),V=(0,e.memo)(function({code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,shikiConfig:a}){const[p,g]=(0,e.useState)(null),h=(0,e.useMemo)(()=>{const m=a?.themes?.light||U,b=a?.themes?.dark||j;return{lang:t,themes:{light:m,dark:b},defaultColor:!1,langAlias:a?.langAlias,transformers:a?.transformers,meta:a?.meta?{__raw:a.meta}:void 0}},[t,a?.themes?.light,a?.themes?.dark,a?.langAlias,a?.transformers,a?.meta]);return(0,e.useEffect)(()=>{let m=!1;return(0,B.codeToHtml)(o,h).then(b=>{m||g(b)}).catch(b=>{}),()=>{m=!0}},[o,h]),e.default.createElement(P,{code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:p===null},p?e.default.createElement(n.Box,{dangerouslySetInnerHTML:{__html:p}}):null)}),q=(0,e.memo)(function({children:o,showCopy:t,showLanguage:s,showLineNumbers:l,collapsible:c,collapsedHeight:i,file:u}){const d=(0,x.extractTextFromChildren)(o),a=(0,x.extractLanguageFromChildren)(o);return e.default.createElement(P,{code:d,language:a,showCopy:t,showLanguage:s,showLineNumbers:l,collapsible:c,collapsedHeight:i,file:u},o)});function J({children:r,code:o,language:t,preview:s,showCopy:l=!0,showLanguage:c=!0,showLineNumbers:i=!0,shikiConfig:u,background:d,backgroundProps:a,collapsible:p=!0,collapsedHeight:g=O,file:h}){const C=t||(0,x.extractLanguageFromChildren)(r)||"text";return e.default.createElement(L.Provider,{value:!0},e.default.createElement(n.Box,{className:"docs-code-block",mt:"6",mb:"8"},e.default.createElement(n.Flex,{direction:"column",gap:"2"},s&&e.default.createElement(G,{background:d,backgroundProps:a},s),o&&e.default.createElement(V,{code:o,language:C,showCopy:l,showLanguage:c,showLineNumbers:i,collapsible:p,collapsedHeight:g,file:h,shikiConfig:u}),r&&!o&&e.default.createElement(q,{showCopy:l,showLanguage:c,showLineNumbers:i,collapsible:p,collapsedHeight:g,file:h},r))))}function Q(){return(0,e.useContext)(L)}
1
+ "use strict";var I=Object.create;var y=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var $=(r,o)=>{for(var t in o)y(r,t,{get:o[t],enumerable:!0})},S=(r,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of _(o))!D.call(r,l)&&l!==t&&y(r,l,{get:()=>o[l],enumerable:!(s=A(o,l))||s.enumerable});return r};var M=(r,o,t)=>(t=r!=null?I(z(r)):{},S(o||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r)),W=r=>S(y({},"__esModule",{value:!0}),r);var X={};$(X,{CodeBlock:()=>J,useCodeBlockContext:()=>Q});module.exports=W(X);var e=M(require("react")),n=require("@kushagradhawan/kookie-ui"),w=require("@hugeicons/react"),f=require("@hugeicons/core-free-icons"),B=require("shiki"),x=require("./types"),v=require("./use-code-card"),T=require("./language-badge");const L=(0,e.createContext)(!1),O=360,U="one-light",j="one-dark-pro";function G({children:r,background:o="none",backgroundProps:t={}}){const{dotSize:s=24,color:l="var(--gray-10)",backgroundColor:c="var(--gray-2)",height:i,width:u="100%",radius:d="3"}=t,a=(0,e.useMemo)(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${l} 1px, transparent 1px)`,borderRadius:`var(--radius-${d})`,backgroundSize:`${s}px ${s}px`,backgroundPosition:"center",backgroundColor:c,width:u,...i&&{height:i}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${d})`,width:u,...i&&{height:i}}},[o,l,c,s,i,u,d]);return e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:a},e.default.createElement(n.Theme,{fontFamily:"sans"},r)))}function K(){return e.default.createElement(n.Box,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.default.createElement(n.Box,{key:t,className:"code-skeleton-line",style:{width:o}})))}const P=(0,e.memo)(function({code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:a=!1,children:p}){const{isExpanded:g,shouldShowToggle:h,copied:C,contentRef:m,contentMaxHeight:b,handleToggle:N,handleCopy:H}=(0,v.useCodeCard)({code:o,collapsedHeight:u}),k=i&&h,E=g?"rotate(180deg)":"rotate(0deg)",F=c?"code-content":"code-content hide-line-numbers";return e.default.createElement(n.Box,{position:"relative"},e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{direction:"column"},e.default.createElement(n.Flex,{justify:"between",align:"start",gap:"2"},e.default.createElement(n.Flex,{align:"center",gap:"2"},l&&e.default.createElement(T.LanguageBadge,{language:t}),d&&e.default.createElement(n.Text,{size:"1",color:"gray",highContrast:!0},d)),e.default.createElement(n.Flex,{align:"center",className:"code-action-buttons"},k&&e.default.createElement(n.IconButton,{size:"2",variant:"ghost",color:"gray",onClick:N,tooltip:g?"Collapse":"Expand","aria-label":g?"Collapse code":"Expand code"},e.default.createElement(w.HugeiconsIcon,{icon:f.ArrowDown01Icon,style:{transform:E},className:"code-chevron",strokeWidth:1.75})),s&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",onClick:H,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.default.createElement(w.HugeiconsIcon,{icon:C?f.Tick01Icon:f.Copy01Icon,strokeWidth:1.75})," Copy"))),e.default.createElement(n.Box,{ref:m,style:{maxHeight:i?`${b}px`:void 0},className:F},e.default.createElement(n.ScrollArea,{type:"auto",scrollbars:"horizontal"},a?e.default.createElement(K,null):p)),k&&!g&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))}),V=(0,e.memo)(function({code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,shikiConfig:a}){const[p,g]=(0,e.useState)(null),h=(0,e.useMemo)(()=>{const m=a?.themes?.light||U,b=a?.themes?.dark||j;return{lang:t,themes:{light:m,dark:b},defaultColor:!1,langAlias:a?.langAlias,transformers:a?.transformers,meta:a?.meta?{__raw:a.meta}:void 0}},[t,a?.themes?.light,a?.themes?.dark,a?.langAlias,a?.transformers,a?.meta]);return(0,e.useEffect)(()=>{let m=!1;return(0,B.codeToHtml)(o,h).then(b=>{m||g(b)}).catch(b=>{}),()=>{m=!0}},[o,h]),e.default.createElement(P,{code:o,language:t,showCopy:s,showLanguage:l,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:p===null},p?e.default.createElement(n.Box,{dangerouslySetInnerHTML:{__html:p}}):null)}),q=(0,e.memo)(function({children:o,showCopy:t,showLanguage:s,showLineNumbers:l,collapsible:c,collapsedHeight:i,file:u}){const d=(0,x.extractTextFromChildren)(o),a=(0,x.extractLanguageFromChildren)(o);return e.default.createElement(P,{code:d,language:a,showCopy:t,showLanguage:s,showLineNumbers:l,collapsible:c,collapsedHeight:i,file:u},o)});function J({children:r,code:o,language:t,preview:s,showCopy:l=!0,showLanguage:c=!0,showLineNumbers:i=!0,shikiConfig:u,background:d,backgroundProps:a,collapsible:p=!0,collapsedHeight:g=O,file:h}){const C=t||(0,x.extractLanguageFromChildren)(r)||"text";return e.default.createElement(L.Provider,{value:!0},e.default.createElement(n.Box,{className:"docs-code-block",mt:"2",mb:"4"},e.default.createElement(n.Flex,{direction:"column",gap:"2"},s&&e.default.createElement(G,{background:d,backgroundProps:a},s),o&&e.default.createElement(V,{code:o,language:C,showCopy:l,showLanguage:c,showLineNumbers:i,collapsible:p,collapsedHeight:g,file:h,shikiConfig:u}),r&&!o&&e.default.createElement(q,{showCopy:l,showLanguage:c,showLineNumbers:i,collapsible:p,collapsedHeight:g,file:h},r))))}function Q(){return(0,e.useContext)(L)}
2
2
  //# sourceMappingURL=code-block.js.map
package/dist/cjs/components/code/code-block.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/code-block.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n children: ReactNode;\n background?: \"none\" | \"dots\" | string;\n backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n if (background === \"none\") return undefined;\n\n if (background === \"dots\") {\n return {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n width,\n ...(height && { height }),\n };\n }\n\n // Image background\n return {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n width,\n ...(height && { height }),\n };\n }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n\ninterface CodeCardProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n isLoading?: boolean;\n children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n // Generate varied line widths for visual interest\n const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n return (\n <Box className=\"code-skeleton\">\n {lineWidths.map((width, index) => (\n <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n ))}\n </Box>\n );\n}\n\nconst CodeCard = memo(function CodeCard({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n isLoading = false,\n children,\n}: CodeCardProps) {\n const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n code,\n collapsedHeight,\n });\n\n const showToggle = collapsible && shouldShowToggle;\n const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n return (\n <Box position=\"relative\">\n <Card size=\"1\" variant=\"soft\">\n <Flex direction=\"column\">\n <Flex justify=\"between\" align=\"start\" gap=\"2\">\n <Flex align=\"center\" gap=\"2\">\n {showLanguage && <LanguageBadge language={language} />}\n {file && (\n <Text size=\"1\" color=\"gray\" highContrast>\n {file}\n </Text>\n )}\n </Flex>\n\n <Flex align=\"center\" className=\"code-action-buttons\">\n {showToggle && (\n <IconButton\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleToggle}\n tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n >\n <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n </IconButton>\n )}\n {showCopy && (\n <Button\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleCopy}\n tooltip={copied ? \"Copied!\" : \"Copy\"}\n aria-label={copied ? \"Copied!\" : \"Copy code\"}\n >\n <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n {isLoading ? <CodeSkeleton /> : children}\n </ScrollArea>\n </Box>\n\n {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n </Flex>\n </Card>\n </Box>\n );\n});\n\ninterface RuntimeCodeSectionProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n shikiConfig,\n}: RuntimeCodeSectionProps) {\n const [highlighted, setHighlighted] = useState<string | null>(null);\n\n // Memoize Shiki config to prevent unnecessary re-highlights\n const shikiOptions = useMemo(() => {\n const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n return {\n lang: language as BundledLanguage,\n themes: {\n light: lightTheme as BundledTheme,\n dark: darkTheme as BundledTheme,\n },\n defaultColor: false as const,\n langAlias: shikiConfig?.langAlias,\n transformers: shikiConfig?.transformers,\n meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n };\n }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n useEffect(() => {\n let cancelled = false;\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n // Keep previous highlighted content on error (stale while revalidate)\n if (process.env.NODE_ENV === \"development\") {\n console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, shikiOptions]);\n\n // Only show loading skeleton on initial render (no highlighted content yet)\n // During updates, keep showing previous highlighted content (stale while revalidate)\n const isInitialLoading = highlighted === null;\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n isLoading={isInitialLoading}\n >\n {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n </CodeCard>\n );\n});\n\ninterface ChildrenCodeSectionProps {\n children: ReactNode;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n children,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n}: ChildrenCodeSectionProps) {\n const code = extractTextFromChildren(children);\n const language = extractLanguageFromChildren(children);\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </CodeCard>\n );\n});\n\nexport function CodeBlock({\n children,\n code,\n language,\n preview,\n showCopy = true,\n showLanguage = true,\n showLineNumbers = true,\n shikiConfig,\n background,\n backgroundProps,\n collapsible = true,\n collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n file,\n}: CodeBlockProps) {\n const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n return (\n <CodeBlockContext.Provider value={true}>\n <Box className=\"docs-code-block\" mt=\"6\" mb=\"8\">\n <Flex direction=\"column\" gap=\"2\">\n {preview && (\n <PreviewSection background={background} backgroundProps={backgroundProps}>\n {preview}\n </PreviewSection>\n )}\n\n {code && (\n <RuntimeCodeSection\n code={code}\n language={displayLanguage}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n shikiConfig={shikiConfig}\n />\n )}\n\n {children && !code && (\n <ChildrenCodeSection\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </ChildrenCodeSection>\n )}\n </Flex>\n </Box>\n </CodeBlockContext.Provider>\n );\n}\n\nexport function useCodeBlockContext() {\n return useContext(CodeBlockContext);\n}\n"],
4
+ "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n children: ReactNode;\n background?: \"none\" | \"dots\" | string;\n backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n if (background === \"none\") return undefined;\n\n if (background === \"dots\") {\n return {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n width,\n ...(height && { height }),\n };\n }\n\n // Image background\n return {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n width,\n ...(height && { height }),\n };\n }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n\ninterface CodeCardProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n isLoading?: boolean;\n children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n // Generate varied line widths for visual interest\n const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n return (\n <Box className=\"code-skeleton\">\n {lineWidths.map((width, index) => (\n <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n ))}\n </Box>\n );\n}\n\nconst CodeCard = memo(function CodeCard({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n isLoading = false,\n children,\n}: CodeCardProps) {\n const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n code,\n collapsedHeight,\n });\n\n const showToggle = collapsible && shouldShowToggle;\n const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n return (\n <Box position=\"relative\">\n <Card size=\"1\" variant=\"soft\">\n <Flex direction=\"column\">\n <Flex justify=\"between\" align=\"start\" gap=\"2\">\n <Flex align=\"center\" gap=\"2\">\n {showLanguage && <LanguageBadge language={language} />}\n {file && (\n <Text size=\"1\" color=\"gray\" highContrast>\n {file}\n </Text>\n )}\n </Flex>\n\n <Flex align=\"center\" className=\"code-action-buttons\">\n {showToggle && (\n <IconButton\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleToggle}\n tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n >\n <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n </IconButton>\n )}\n {showCopy && (\n <Button\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleCopy}\n tooltip={copied ? \"Copied!\" : \"Copy\"}\n aria-label={copied ? \"Copied!\" : \"Copy code\"}\n >\n <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n {isLoading ? <CodeSkeleton /> : children}\n </ScrollArea>\n </Box>\n\n {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n </Flex>\n </Card>\n </Box>\n );\n});\n\ninterface RuntimeCodeSectionProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n shikiConfig,\n}: RuntimeCodeSectionProps) {\n const [highlighted, setHighlighted] = useState<string | null>(null);\n\n // Memoize Shiki config to prevent unnecessary re-highlights\n const shikiOptions = useMemo(() => {\n const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n return {\n lang: language as BundledLanguage,\n themes: {\n light: lightTheme as BundledTheme,\n dark: darkTheme as BundledTheme,\n },\n defaultColor: false as const,\n langAlias: shikiConfig?.langAlias,\n transformers: shikiConfig?.transformers,\n meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n };\n }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n useEffect(() => {\n let cancelled = false;\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n // Keep previous highlighted content on error (stale while revalidate)\n if (process.env.NODE_ENV === \"development\") {\n console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, shikiOptions]);\n\n // Only show loading skeleton on initial render (no highlighted content yet)\n // During updates, keep showing previous highlighted content (stale while revalidate)\n const isInitialLoading = highlighted === null;\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n isLoading={isInitialLoading}\n >\n {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n </CodeCard>\n );\n});\n\ninterface ChildrenCodeSectionProps {\n children: ReactNode;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n children,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n}: ChildrenCodeSectionProps) {\n const code = extractTextFromChildren(children);\n const language = extractLanguageFromChildren(children);\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </CodeCard>\n );\n});\n\nexport function CodeBlock({\n children,\n code,\n language,\n preview,\n showCopy = true,\n showLanguage = true,\n showLineNumbers = true,\n shikiConfig,\n background,\n backgroundProps,\n collapsible = true,\n collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n file,\n}: CodeBlockProps) {\n const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n return (\n <CodeBlockContext.Provider value={true}>\n <Box className=\"docs-code-block\" mt=\"2\" mb=\"4\">\n <Flex direction=\"column\" gap=\"2\">\n {preview && (\n <PreviewSection background={background} backgroundProps={backgroundProps}>\n {preview}\n </PreviewSection>\n )}\n\n {code && (\n <RuntimeCodeSection\n code={code}\n language={displayLanguage}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n shikiConfig={shikiConfig}\n />\n )}\n\n {children && !code && (\n <ChildrenCodeSection\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </ChildrenCodeSection>\n )}\n </Flex>\n </Box>\n </CodeBlockContext.Provider>\n );\n}\n\nexport function useCodeBlockContext() {\n return useContext(CodeBlockContext);\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": ["code_block_exports", "__export", "CodeBlock", "useCodeBlockContext", "__toCommonJS", "import_react", "import_kookie_ui", "import_core_free_icons", "import_shiki", "import_types", "import_use_code_card", "import_language_badge", "CodeBlockContext", "DEFAULT_COLLAPSED_HEIGHT", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle", "React", "CodeSkeleton", "index", "CodeCard", "code", "language", "showCopy", "showLanguage", "showLineNumbers", "collapsible", "collapsedHeight", "file", "isLoading", "isExpanded", "shouldShowToggle", "copied", "contentRef", "contentMaxHeight", "handleToggle", "handleCopy", "showToggle", "chevronRotation", "contentClassName", "RuntimeCodeSection", "shikiConfig", "highlighted", "setHighlighted", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "preview", "displayLanguage"]
7
7
  }
package/dist/cjs/components/markdown/create-markdown-components.js CHANGED
@@ -1,3 +1,3 @@
1
- "use strict";var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var t in i)a(o,t,{get:i[t],enumerable:!0})},p=(o,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of w(i))!k.call(o,e)&&e!==t&&a(o,e,{get:()=>i[e],enumerable:!(s=C(i,e))||s.enumerable});return o};var f=(o,i,t)=>(t=o!=null?u(y(o)):{},p(i||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>p(a({},"__esModule",{value:!0}),o);var B={};M(B,{createMarkdownComponents:()=>b});module.exports=P(B);var r=f(require("react")),n=require("@kushagradhawan/kookie-ui"),h=require("../code");function T(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function H(o){let i="";return o?(typeof o=="string"?i=o:Array.isArray(o)&&(i=o.map(t=>typeof t=="string"?t:"").join("")),i.replace(/^\n+|\n+$/g,"")):i}function b(o={}){const{codeBlockCollapsible:i=!1,imageComponent:t,inlineCodeHighContrast:s=!0}=o;return{h1:({children:e})=>r.default.createElement(n.Heading,{size:"8",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"5",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"4",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.default.createElement(n.Text,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:d,inline:m})=>{const l=H(d);return m===!0||m===void 0&&!e&&!l.includes(`
1
+ "use strict";var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var t in i)a(o,t,{get:i[t],enumerable:!0})},p=(o,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of w(i))!k.call(o,e)&&e!==t&&a(o,e,{get:()=>i[e],enumerable:!(s=C(i,e))||s.enumerable});return o};var f=(o,i,t)=>(t=o!=null?u(y(o)):{},p(i||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>p(a({},"__esModule",{value:!0}),o);var B={};M(B,{createMarkdownComponents:()=>b});module.exports=P(B);var r=f(require("react")),n=require("@kushagradhawan/kookie-ui"),h=require("../code");function T(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function H(o){let i="";return o?(typeof o=="string"?i=o:Array.isArray(o)&&(i=o.map(t=>typeof t=="string"?t:"").join("")),i.replace(/^\n+|\n+$/g,"")):i}function b(o={}){const{codeBlockCollapsible:i=!1,imageComponent:t,inlineCodeHighContrast:s=!0}=o;return{h1:({children:e})=>r.default.createElement(n.Heading,{size:"9",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"6",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"5",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"4",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"2",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.default.createElement(n.Text,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:d,inline:m})=>{const l=H(d);return m===!0||m===void 0&&!e&&!l.includes(`
2
2
  `)&&l.length<100?r.default.createElement(n.Code,{highContrast:s,size:"3"},l):r.default.createElement(n.Box,{my:"2",style:{minWidth:0}},r.default.createElement(h.CodeBlock,{code:l,language:T(e),collapsible:i}))},ul:({children:e})=>r.default.createElement("ul",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},e),ol:({children:e})=>r.default.createElement("ol",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},e),li:({children:e})=>r.default.createElement("li",{style:{marginBottom:"0.25rem",lineHeight:"1.6"}},e),blockquote:({children:e})=>r.default.createElement(n.Blockquote,null,e),a:({href:e,children:d})=>r.default.createElement("a",{href:e,style:{color:"var(--accent-9)",textDecoration:"underline"}},d),strong:({children:e})=>r.default.createElement(n.Text,{weight:"medium",style:{lineHeight:"1.6"}},e),em:({children:e})=>r.default.createElement(n.Text,{style:{lineHeight:"1.6",fontStyle:"italic"}},e),hr:()=>r.default.createElement("hr",{style:{color:"var(--gray-6)",marginTop:"0.5rem",marginBottom:"0.5rem",height:"1px",width:"100%",opacity:.5}}),pre:({children:e})=>r.default.createElement(r.default.Fragment,null,e),table:({children:e})=>r.default.createElement(n.Box,{my:"2",style:{overflowX:"auto"}},r.default.createElement(n.Table.Root,{size:"2",variant:"ghost"},e)),thead:({children:e})=>r.default.createElement(n.Table.Header,null,e),tbody:({children:e})=>r.default.createElement(n.Table.Body,null,e),tr:({children:e})=>r.default.createElement(n.Table.Row,null,e),th:({children:e})=>r.default.createElement(n.Table.ColumnHeaderCell,null,e),td:({children:e})=>r.default.createElement(n.Table.Cell,null,e),sub:({children:e})=>r.default.createElement("sub",null,e),sup:({children:e})=>r.default.createElement("sup",null,e),br:()=>r.default.createElement("br",null),img:t?e=>{const{src:d,alt:m,width:l,height:g}=e;return!d||typeof d!="string"?null:t({src:d,alt:m??"Image",width:l?String(l):void 0,height:g?String(g):void 0})}:void 0,details:({children:e})=>r.default.createElement("details",{style:{padding:"0.5rem 0"}},e),summary:({children:e})=>r.default.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},e)}}
3
3
  //# sourceMappingURL=create-markdown-components.js.map
package/dist/cjs/components/markdown/create-markdown-components.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/markdown/create-markdown-components.tsx"],
4
- "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"8\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n\n"],
4
+ "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy (9-6-5-4-3-2)\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"6\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"2\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n"],
5
5
  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,8BAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBAEtCC,EAAkE,qCAClEC,EAA0B,mBAM1B,SAASC,EAAgBC,EAA4B,CACnD,OAAKA,EAGSA,EAAU,MAAM,oBAAoB,IACnC,CAAC,GAAK,OAHZ,MAIX,CAKA,SAASC,EAAYC,EAA8B,CACjD,IAAIC,EAAO,GACX,OAAKD,GAGD,OAAOA,GAAa,SACtBC,EAAOD,EACE,MAAM,QAAQA,CAAQ,IAC/BC,EAAOD,EAAS,IAAKE,GAAW,OAAOA,GAAU,SAAWA,EAAQ,EAAG,EAAE,KAAK,EAAE,GAG3ED,EAAK,QAAQ,aAAc,EAAE,GAR3BA,CASX,CAyBO,SAAST,EAAyBW,EAAoC,CAAC,EAAe,CAC3F,KAAM,CAAE,qBAAAC,EAAuB,GAAO,eAAAC,EAAgB,uBAAAC,EAAyB,EAAK,EAAIH,EAExF,MAAO,CAEL,GAAI,CAAC,CAAE,SAAAH,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,MAAO,CAAE,UAAW,OAAQ,aAAc,QAAS,GAC1FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,UAAW,aAAc,QAAS,GAC7FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FP,CACH,EAIF,EAAG,CAAC,CAAE,SAAAA,CAAS,IACb,EAAAO,QAAA,cAAC,QAAK,KAAK,IAAI,GAAG,IAAI,MAAO,CAAE,WAAY,KAAM,GAC9CP,CACH,EAIF,KAAM,CAAC,CAAE,UAAAF,EAAW,SAAAE,EAAU,OAAAQ,CAAO,IAAsE,CACzG,MAAMP,EAAOF,EAAYC,CAAQ,EAMjC,OAFqBQ,IAAW,IAASA,IAAW,QAAa,CAACV,GAAa,CAACG,EAAK,SAAS;AAAA,CAAI,GAAKA,EAAK,OAAS,IAIjH,EAAAM,QAAA,cAAC,QAAK,aAAcD,EAAwB,KAAK,KAC9CL,CACH,EAKF,EAAAM,QAAA,cAAC,OAAI,GAAG,IAAI,MAAO,CAAE,SAAU,CAAE,GAC/B,EAAAA,QAAA,cAAC,aAAU,KAAMN,EAAM,SAAUJ,EAAgBC,CAAS,EAAG,YAAaM,EAAsB,CAClG,CAEJ,EAGA,GAAI,CAAC,CAAE,SAAAJ,CAAS,IACd,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,MAAO,GAAIP,CAAS,EAEzI,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,SAAU,GAAIP,CAAS,EAE5I,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,aAAc,UAAW,WAAY,KAAM,GAAIP,CAAS,EAGlH,WAAY,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,kBAAYP,CAAS,EAG3E,EAAG,CAAC,CAAE,KAAAS,EAAM,SAAAT,CAAS,IACnB,EAAAO,QAAA,cAAC,KAAE,KAAME,EAAM,MAAO,CAAE,MAAO,kBAAmB,eAAgB,WAAY,GAC3ET,CACH,EAIF,OAAQ,CAAC,CAAE,SAAAA,CAAS,IAClB,EAAAO,QAAA,cAAC,QAAK,OAAO,SAAS,MAAO,CAAE,WAAY,KAAM,GAC9CP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAK,MAAO,CAAE,WAAY,MAAO,UAAW,QAAS,GAAIP,CAAS,EAGhH,GAAI,IACF,EAAAO,QAAA,cAAC,MACC,MAAO,CACL,MAAO,gBACP,UAAW,SACX,aAAc,SACd,OAAQ,MACR,MAAO,OACP,QAAS,EACX,EACF,EAIF,IAAK,CAAC,CAAE,SAAAP,CAAS,IAA6B,EAAAO,QAAA,gBAAAA,QAAA,cAAGP,CAAS,EAG1D,MAAO,CAAC,CAAE,SAAAA,CAAS,IACjB,EAAAO,QAAA,cAAC,OAAI,GAAG,IAAI,MAAO,CAAE,UAAW,MAAO,GACrC,EAAAA,QAAA,cAAC,QAAM,KAAN,CAAW,KAAK,IAAI,QAAQ,SAC1BP,CACH,CACF,EAEF,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,OAAN,KAAcP,CAAS,EACxE,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,KAAN,KAAYP,CAAS,EACtE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,IAAN,KAAWP,CAAS,EAClE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,iBAAN,KAAwBP,CAAS,EAC/E,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,KAAN,KAAYP,CAAS,EAGnE,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAKP,CAAS,EAC7D,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAKP,CAAS,EAC7D,GAAI,IAAM,EAAAO,QAAA,cAAC,SAAG,EAGd,IAAKF,EACAK,GAAqD,CACpD,KAAM,CAAE,IAAAC,EAAK,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAAO,EAAIJ,EACpC,MAAI,CAACC,GAAO,OAAOA,GAAQ,SAAiB,KACrCN,EAAe,CACpB,IAAAM,EACA,IAAKC,GAAO,QACZ,MAAOC,EAAQ,OAAOA,CAAK,EAAI,OAC/B,OAAQC,EAAS,OAAOA,CAAM,EAAI,MACpC,CAAC,CACH,EACA,OAGJ,QAAS,CAAC,CAAE,SAAAd,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAQ,MAAO,CAAE,QAAS,UAAW,GAAIP,CAAS,EACrG,QAAS,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAQ,MAAO,CAAE,OAAQ,UAAW,WAAY,GAAI,GAAIP,CAAS,CACtH,CACF",
6
6
  "names": ["create_markdown_components_exports", "__export", "createMarkdownComponents", "__toCommonJS", "import_react", "import_kookie_ui", "import_code", "extractLanguage", "className", "extractCode", "children", "code", "child", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "React", "inline", "href", "props", "src", "alt", "width", "height"]
7
7
  }
package/dist/esm/components/code/code-block.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{useState as E,useEffect as F,useMemo as w,memo as x,createContext as I,useContext as A}from"react";import{Box as m,Card as k,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as S}from"@hugeicons/react";import{Copy01Icon as W,Tick01Icon as O,ArrowDown01Icon as U}from"@hugeicons/core-free-icons";import{codeToHtml as j}from"shiki";import{extractTextFromChildren as G,extractLanguageFromChildren as L}from"./types";import{useCodeCard as K}from"./use-code-card";import{LanguageBadge as V}from"./language-badge";const P=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:c,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:s="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:l="3"}=t,n=w(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${l})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:i,width:d,...r&&{height:r}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${l})`,width:d,...r&&{height:r}}},[o,s,i,a,r,d,l]);return e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},c)))}function Y(){return e.createElement(m,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.createElement(m,{key:t,className:"code-skeleton-line",style:{width:o}})))}const B=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:n=!1,children:g}){const{isExpanded:u,shouldShowToggle:p,copied:C,contentRef:h,contentMaxHeight:b,handleToggle:v,handleCopy:T}=K({code:o,collapsedHeight:d}),y=r&&p,N=u?"rotate(180deg)":"rotate(0deg)",H=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{direction:"column"},e.createElement(f,{justify:"between",align:"start",gap:"2"},e.createElement(f,{align:"center",gap:"2"},s&&e.createElement(V,{language:t}),l&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},l)),e.createElement(f,{align:"center",className:"code-action-buttons"},y&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",onClick:v,tooltip:u?"Collapse":"Expand","aria-label":u?"Collapse code":"Expand code"},e.createElement(S,{icon:U,style:{transform:N},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",onClick:T,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.createElement(S,{icon:C?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:h,style:{maxHeight:r?`${b}px`:void 0},className:H},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):g)),y&&!u&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,shikiConfig:n}){const[g,u]=E(null),p=w(()=>{const h=n?.themes?.light||J,b=n?.themes?.dark||Q;return{lang:t,themes:{light:h,dark:b},defaultColor:!1,langAlias:n?.langAlias,transformers:n?.transformers,meta:n?.meta?{__raw:n.meta}:void 0}},[t,n?.themes?.light,n?.themes?.dark,n?.langAlias,n?.transformers,n?.meta]);return F(()=>{let h=!1;return j(o,p).then(b=>{h||u(b)}).catch(b=>{}),()=>{h=!0}},[o,p]),e.createElement(B,{code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:g===null},g?e.createElement(m,{dangerouslySetInnerHTML:{__html:g}}):null)}),R=x(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d}){const l=G(o),n=L(o);return e.createElement(B,{code:l,language:n,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:c,code:o,language:t,preview:a,showCopy:s=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:l,backgroundProps:n,collapsible:g=!0,collapsedHeight:u=q,file:p}){const C=t||L(c)||"text";return e.createElement(P.Provider,{value:!0},e.createElement(m,{className:"docs-code-block",mt:"6",mb:"8"},e.createElement(f,{direction:"column",gap:"2"},a&&e.createElement(X,{background:l,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:C,showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p,shikiConfig:d}),c&&!o&&e.createElement(R,{showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p},c))))}function ce(){return A(P)}export{de as CodeBlock,ce as useCodeBlockContext};
1
+ import e,{useState as E,useEffect as F,useMemo as w,memo as x,createContext as I,useContext as A}from"react";import{Box as m,Card as k,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as S}from"@hugeicons/react";import{Copy01Icon as W,Tick01Icon as O,ArrowDown01Icon as U}from"@hugeicons/core-free-icons";import{codeToHtml as j}from"shiki";import{extractTextFromChildren as G,extractLanguageFromChildren as L}from"./types";import{useCodeCard as K}from"./use-code-card";import{LanguageBadge as V}from"./language-badge";const P=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:c,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:s="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:l="3"}=t,n=w(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${l})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:i,width:d,...r&&{height:r}}:{backgroundImage:`url(${o})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${l})`,width:d,...r&&{height:r}}},[o,s,i,a,r,d,l]);return e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},c)))}function Y(){return e.createElement(m,{className:"code-skeleton"},["85%","70%","90%","60%","75%","80%"].map((o,t)=>e.createElement(m,{key:t,className:"code-skeleton-line",style:{width:o}})))}const B=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:n=!1,children:g}){const{isExpanded:u,shouldShowToggle:p,copied:C,contentRef:h,contentMaxHeight:b,handleToggle:v,handleCopy:T}=K({code:o,collapsedHeight:d}),y=r&&p,N=u?"rotate(180deg)":"rotate(0deg)",H=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(k,{size:"1",variant:"soft"},e.createElement(f,{direction:"column"},e.createElement(f,{justify:"between",align:"start",gap:"2"},e.createElement(f,{align:"center",gap:"2"},s&&e.createElement(V,{language:t}),l&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},l)),e.createElement(f,{align:"center",className:"code-action-buttons"},y&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",onClick:v,tooltip:u?"Collapse":"Expand","aria-label":u?"Collapse code":"Expand code"},e.createElement(S,{icon:U,style:{transform:N},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",onClick:T,tooltip:C?"Copied!":"Copy","aria-label":C?"Copied!":"Copy code"},e.createElement(S,{icon:C?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:h,style:{maxHeight:r?`${b}px`:void 0},className:H},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):g)),y&&!u&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=x(function({code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,shikiConfig:n}){const[g,u]=E(null),p=w(()=>{const h=n?.themes?.light||J,b=n?.themes?.dark||Q;return{lang:t,themes:{light:h,dark:b},defaultColor:!1,langAlias:n?.langAlias,transformers:n?.transformers,meta:n?.meta?{__raw:n.meta}:void 0}},[t,n?.themes?.light,n?.themes?.dark,n?.langAlias,n?.transformers,n?.meta]);return F(()=>{let h=!1;return j(o,p).then(b=>{h||u(b)}).catch(b=>{}),()=>{h=!0}},[o,p]),e.createElement(B,{code:o,language:t,showCopy:a,showLanguage:s,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:l,isLoading:g===null},g?e.createElement(m,{dangerouslySetInnerHTML:{__html:g}}):null)}),R=x(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d}){const l=G(o),n=L(o);return e.createElement(B,{code:l,language:n,showCopy:t,showLanguage:a,showLineNumbers:s,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:c,code:o,language:t,preview:a,showCopy:s=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:l,backgroundProps:n,collapsible:g=!0,collapsedHeight:u=q,file:p}){const C=t||L(c)||"text";return e.createElement(P.Provider,{value:!0},e.createElement(m,{className:"docs-code-block",mt:"2",mb:"4"},e.createElement(f,{direction:"column",gap:"2"},a&&e.createElement(X,{background:l,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:C,showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p,shikiConfig:d}),c&&!o&&e.createElement(R,{showCopy:s,showLanguage:i,showLineNumbers:r,collapsible:g,collapsedHeight:u,file:p},c))))}function ce(){return A(P)}export{de as CodeBlock,ce as useCodeBlockContext};
2
2
  //# sourceMappingURL=code-block.js.map
package/dist/esm/components/code/code-block.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/code-block.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n children: ReactNode;\n background?: \"none\" | \"dots\" | string;\n backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n if (background === \"none\") return undefined;\n\n if (background === \"dots\") {\n return {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n width,\n ...(height && { height }),\n };\n }\n\n // Image background\n return {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n width,\n ...(height && { height }),\n };\n }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n\ninterface CodeCardProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n isLoading?: boolean;\n children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n // Generate varied line widths for visual interest\n const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n return (\n <Box className=\"code-skeleton\">\n {lineWidths.map((width, index) => (\n <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n ))}\n </Box>\n );\n}\n\nconst CodeCard = memo(function CodeCard({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n isLoading = false,\n children,\n}: CodeCardProps) {\n const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n code,\n collapsedHeight,\n });\n\n const showToggle = collapsible && shouldShowToggle;\n const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n return (\n <Box position=\"relative\">\n <Card size=\"1\" variant=\"soft\">\n <Flex direction=\"column\">\n <Flex justify=\"between\" align=\"start\" gap=\"2\">\n <Flex align=\"center\" gap=\"2\">\n {showLanguage && <LanguageBadge language={language} />}\n {file && (\n <Text size=\"1\" color=\"gray\" highContrast>\n {file}\n </Text>\n )}\n </Flex>\n\n <Flex align=\"center\" className=\"code-action-buttons\">\n {showToggle && (\n <IconButton\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleToggle}\n tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n >\n <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n </IconButton>\n )}\n {showCopy && (\n <Button\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleCopy}\n tooltip={copied ? \"Copied!\" : \"Copy\"}\n aria-label={copied ? \"Copied!\" : \"Copy code\"}\n >\n <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n {isLoading ? <CodeSkeleton /> : children}\n </ScrollArea>\n </Box>\n\n {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n </Flex>\n </Card>\n </Box>\n );\n});\n\ninterface RuntimeCodeSectionProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n shikiConfig,\n}: RuntimeCodeSectionProps) {\n const [highlighted, setHighlighted] = useState<string | null>(null);\n\n // Memoize Shiki config to prevent unnecessary re-highlights\n const shikiOptions = useMemo(() => {\n const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n return {\n lang: language as BundledLanguage,\n themes: {\n light: lightTheme as BundledTheme,\n dark: darkTheme as BundledTheme,\n },\n defaultColor: false as const,\n langAlias: shikiConfig?.langAlias,\n transformers: shikiConfig?.transformers,\n meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n };\n }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n useEffect(() => {\n let cancelled = false;\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n // Keep previous highlighted content on error (stale while revalidate)\n if (process.env.NODE_ENV === \"development\") {\n console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, shikiOptions]);\n\n // Only show loading skeleton on initial render (no highlighted content yet)\n // During updates, keep showing previous highlighted content (stale while revalidate)\n const isInitialLoading = highlighted === null;\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n isLoading={isInitialLoading}\n >\n {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n </CodeCard>\n );\n});\n\ninterface ChildrenCodeSectionProps {\n children: ReactNode;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n children,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n}: ChildrenCodeSectionProps) {\n const code = extractTextFromChildren(children);\n const language = extractLanguageFromChildren(children);\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </CodeCard>\n );\n});\n\nexport function CodeBlock({\n children,\n code,\n language,\n preview,\n showCopy = true,\n showLanguage = true,\n showLineNumbers = true,\n shikiConfig,\n background,\n backgroundProps,\n collapsible = true,\n collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n file,\n}: CodeBlockProps) {\n const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n return (\n <CodeBlockContext.Provider value={true}>\n <Box className=\"docs-code-block\" mt=\"6\" mb=\"8\">\n <Flex direction=\"column\" gap=\"2\">\n {preview && (\n <PreviewSection background={background} backgroundProps={backgroundProps}>\n {preview}\n </PreviewSection>\n )}\n\n {code && (\n <RuntimeCodeSection\n code={code}\n language={displayLanguage}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n shikiConfig={shikiConfig}\n />\n )}\n\n {children && !code && (\n <ChildrenCodeSection\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </ChildrenCodeSection>\n )}\n </Flex>\n </Box>\n </CodeBlockContext.Provider>\n );\n}\n\nexport function useCodeBlockContext() {\n return useContext(CodeBlockContext);\n}\n"],
4
+ "sourcesContent": ["import React, { useState, useEffect, useMemo, memo, createContext, useContext, type ReactNode } from \"react\";\nimport { Box, Card, Code, Flex, Button, Text, Theme, ScrollArea, IconButton } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon, ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml, type BundledLanguage, type BundledTheme } from \"shiki\";\nimport type { CodeBlockProps, ShikiConfig, PreviewBackgroundProps } from \"./types\";\nimport { extractTextFromChildren, extractLanguageFromChildren } from \"./types\";\nimport { useCodeCard } from \"./use-code-card\";\nimport { LanguageBadge } from \"./language-badge\";\n\nconst CodeBlockContext = createContext<boolean>(false);\n\nconst DEFAULT_COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\ninterface PreviewSectionProps {\n children: ReactNode;\n background?: \"none\" | \"dots\" | string;\n backgroundProps?: PreviewBackgroundProps;\n}\n\nfunction PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height, width = \"100%\", radius = \"3\" } = backgroundProps;\n\n const backgroundStyle = useMemo((): React.CSSProperties | undefined => {\n if (background === \"none\") return undefined;\n\n if (background === \"dots\") {\n return {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n width,\n ...(height && { height }),\n };\n }\n\n // Image background\n return {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n width,\n ...(height && { height }),\n };\n }, [background, color, backgroundColor, dotSize, height, width, radius]);\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={backgroundStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n\ninterface CodeCardProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n isLoading?: boolean;\n children: ReactNode;\n}\n\nfunction CodeSkeleton() {\n // Generate varied line widths for visual interest\n const lineWidths = [\"85%\", \"70%\", \"90%\", \"60%\", \"75%\", \"80%\"];\n\n return (\n <Box className=\"code-skeleton\">\n {lineWidths.map((width, index) => (\n <Box key={index} className=\"code-skeleton-line\" style={{ width }} />\n ))}\n </Box>\n );\n}\n\nconst CodeCard = memo(function CodeCard({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n isLoading = false,\n children,\n}: CodeCardProps) {\n const { isExpanded, shouldShowToggle, copied, contentRef, contentMaxHeight, handleToggle, handleCopy } = useCodeCard({\n code,\n collapsedHeight,\n });\n\n const showToggle = collapsible && shouldShowToggle;\n const chevronRotation = isExpanded ? \"rotate(180deg)\" : \"rotate(0deg)\";\n const contentClassName = showLineNumbers ? \"code-content\" : \"code-content hide-line-numbers\";\n\n return (\n <Box position=\"relative\">\n <Card size=\"1\" variant=\"soft\">\n <Flex direction=\"column\">\n <Flex justify=\"between\" align=\"start\" gap=\"2\">\n <Flex align=\"center\" gap=\"2\">\n {showLanguage && <LanguageBadge language={language} />}\n {file && (\n <Text size=\"1\" color=\"gray\" highContrast>\n {file}\n </Text>\n )}\n </Flex>\n\n <Flex align=\"center\" className=\"code-action-buttons\">\n {showToggle && (\n <IconButton\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleToggle}\n tooltip={isExpanded ? \"Collapse\" : \"Expand\"}\n aria-label={isExpanded ? \"Collapse code\" : \"Expand code\"}\n >\n <HugeiconsIcon icon={ArrowDown01Icon} style={{ transform: chevronRotation }} className=\"code-chevron\" strokeWidth={1.75} />\n </IconButton>\n )}\n {showCopy && (\n <Button\n size=\"2\"\n variant=\"ghost\"\n color=\"gray\"\n onClick={handleCopy}\n tooltip={copied ? \"Copied!\" : \"Copy\"}\n aria-label={copied ? \"Copied!\" : \"Copy code\"}\n >\n <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} strokeWidth={1.75} /> Copy\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Box ref={contentRef} style={{ maxHeight: collapsible ? `${contentMaxHeight}px` : undefined }} className={contentClassName}>\n <ScrollArea type=\"auto\" scrollbars=\"horizontal\">\n {isLoading ? <CodeSkeleton /> : children}\n </ScrollArea>\n </Box>\n\n {showToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n </Flex>\n </Card>\n </Box>\n );\n});\n\ninterface RuntimeCodeSectionProps {\n code: string;\n language: string;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n shikiConfig?: ShikiConfig;\n}\n\nconst RuntimeCodeSection = memo(function RuntimeCodeSection({\n code,\n language,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n shikiConfig,\n}: RuntimeCodeSectionProps) {\n const [highlighted, setHighlighted] = useState<string | null>(null);\n\n // Memoize Shiki config to prevent unnecessary re-highlights\n const shikiOptions = useMemo(() => {\n const lightTheme = shikiConfig?.themes?.light || DEFAULT_LIGHT_THEME;\n const darkTheme = shikiConfig?.themes?.dark || DEFAULT_DARK_THEME;\n\n return {\n lang: language as BundledLanguage,\n themes: {\n light: lightTheme as BundledTheme,\n dark: darkTheme as BundledTheme,\n },\n defaultColor: false as const,\n langAlias: shikiConfig?.langAlias,\n transformers: shikiConfig?.transformers,\n meta: shikiConfig?.meta ? { __raw: shikiConfig.meta } : undefined,\n };\n }, [language, shikiConfig?.themes?.light, shikiConfig?.themes?.dark, shikiConfig?.langAlias, shikiConfig?.transformers, shikiConfig?.meta]);\n\n useEffect(() => {\n let cancelled = false;\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n // Keep previous highlighted content on error (stale while revalidate)\n if (process.env.NODE_ENV === \"development\") {\n console.error(\"[CodeBlock] Shiki highlighting failed:\", error);\n }\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, shikiOptions]);\n\n // Only show loading skeleton on initial render (no highlighted content yet)\n // During updates, keep showing previous highlighted content (stale while revalidate)\n const isInitialLoading = highlighted === null;\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n isLoading={isInitialLoading}\n >\n {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}\n </CodeCard>\n );\n});\n\ninterface ChildrenCodeSectionProps {\n children: ReactNode;\n showCopy: boolean;\n showLanguage: boolean;\n showLineNumbers: boolean;\n collapsible: boolean;\n collapsedHeight: number;\n file?: string;\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({\n children,\n showCopy,\n showLanguage,\n showLineNumbers,\n collapsible,\n collapsedHeight,\n file,\n}: ChildrenCodeSectionProps) {\n const code = extractTextFromChildren(children);\n const language = extractLanguageFromChildren(children);\n\n return (\n <CodeCard\n code={code}\n language={language}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </CodeCard>\n );\n});\n\nexport function CodeBlock({\n children,\n code,\n language,\n preview,\n showCopy = true,\n showLanguage = true,\n showLineNumbers = true,\n shikiConfig,\n background,\n backgroundProps,\n collapsible = true,\n collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,\n file,\n}: CodeBlockProps) {\n const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n return (\n <CodeBlockContext.Provider value={true}>\n <Box className=\"docs-code-block\" mt=\"2\" mb=\"4\">\n <Flex direction=\"column\" gap=\"2\">\n {preview && (\n <PreviewSection background={background} backgroundProps={backgroundProps}>\n {preview}\n </PreviewSection>\n )}\n\n {code && (\n <RuntimeCodeSection\n code={code}\n language={displayLanguage}\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n shikiConfig={shikiConfig}\n />\n )}\n\n {children && !code && (\n <ChildrenCodeSection\n showCopy={showCopy}\n showLanguage={showLanguage}\n showLineNumbers={showLineNumbers}\n collapsible={collapsible}\n collapsedHeight={collapsedHeight}\n file={file}\n >\n {children}\n </ChildrenCodeSection>\n )}\n </Flex>\n </Box>\n </CodeBlockContext.Provider>\n );\n}\n\nexport function useCodeBlockContext() {\n return useContext(CodeBlockContext);\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": ["React", "useState", "useEffect", "useMemo", "memo", "createContext", "useContext", "Box", "Card", "Flex", "Button", "Text", "Theme", "ScrollArea", "IconButton", "HugeiconsIcon", "Copy01Icon", "Tick01Icon", "ArrowDown01Icon", "codeToHtml", "extractTextFromChildren", "extractLanguageFromChildren", "useCodeCard", "LanguageBadge", "CodeBlockContext", "DEFAULT_COLLAPSED_HEIGHT", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle", "CodeSkeleton", "index", "CodeCard", "code", "language", "showCopy", "showLanguage", "showLineNumbers", "collapsible", "collapsedHeight", "file", "isLoading", "isExpanded", "shouldShowToggle", "copied", "contentRef", "contentMaxHeight", "handleToggle", "handleCopy", "showToggle", "chevronRotation", "contentClassName", "RuntimeCodeSection", "shikiConfig", "highlighted", "setHighlighted", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "CodeBlock", "preview", "displayLanguage", "useCodeBlockContext"]
7
7
  }
package/dist/esm/components/markdown/create-markdown-components.js CHANGED
@@ -1,3 +1,3 @@
1
- import r from"react";import{Blockquote as u,Box as p,Code as C,Heading as d,Text as g,Table as l}from"@kushagradhawan/kookie-ui";import{CodeBlock as w}from"../code";function y(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function k(o){let n="";return o?(typeof o=="string"?n=o:Array.isArray(o)&&(n=o.map(s=>typeof s=="string"?s:"").join("")),n.replace(/^\n+|\n+$/g,"")):n}function H(o={}){const{codeBlockCollapsible:n=!1,imageComponent:s,inlineCodeHighContrast:h=!0}=o;return{h1:({children:e})=>r.createElement(d,{size:"8",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.createElement(d,{weight:"medium",size:"5",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.createElement(d,{weight:"medium",size:"4",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.createElement(d,{weight:"medium",size:"3",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.createElement(d,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.createElement(d,{weight:"medium",size:"3",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.createElement(g,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:i,inline:m})=>{const t=k(i);return m===!0||m===void 0&&!e&&!t.includes(`
1
+ import r from"react";import{Blockquote as u,Box as p,Code as C,Heading as d,Text as g,Table as l}from"@kushagradhawan/kookie-ui";import{CodeBlock as w}from"../code";function y(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function k(o){let n="";return o?(typeof o=="string"?n=o:Array.isArray(o)&&(n=o.map(s=>typeof s=="string"?s:"").join("")),n.replace(/^\n+|\n+$/g,"")):n}function H(o={}){const{codeBlockCollapsible:n=!1,imageComponent:s,inlineCodeHighContrast:h=!0}=o;return{h1:({children:e})=>r.createElement(d,{size:"9",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.createElement(d,{weight:"medium",size:"6",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.createElement(d,{weight:"medium",size:"5",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.createElement(d,{weight:"medium",size:"4",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.createElement(d,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.createElement(d,{weight:"medium",size:"2",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.createElement(g,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:i,inline:m})=>{const t=k(i);return m===!0||m===void 0&&!e&&!t.includes(`
2
2
  `)&&t.length<100?r.createElement(C,{highContrast:h,size:"3"},t):r.createElement(p,{my:"2",style:{minWidth:0}},r.createElement(w,{code:t,language:y(e),collapsible:n}))},ul:({children:e})=>r.createElement("ul",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},e),ol:({children:e})=>r.createElement("ol",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},e),li:({children:e})=>r.createElement("li",{style:{marginBottom:"0.25rem",lineHeight:"1.6"}},e),blockquote:({children:e})=>r.createElement(u,null,e),a:({href:e,children:i})=>r.createElement("a",{href:e,style:{color:"var(--accent-9)",textDecoration:"underline"}},i),strong:({children:e})=>r.createElement(g,{weight:"medium",style:{lineHeight:"1.6"}},e),em:({children:e})=>r.createElement(g,{style:{lineHeight:"1.6",fontStyle:"italic"}},e),hr:()=>r.createElement("hr",{style:{color:"var(--gray-6)",marginTop:"0.5rem",marginBottom:"0.5rem",height:"1px",width:"100%",opacity:.5}}),pre:({children:e})=>r.createElement(r.Fragment,null,e),table:({children:e})=>r.createElement(p,{my:"2",style:{overflowX:"auto"}},r.createElement(l.Root,{size:"2",variant:"ghost"},e)),thead:({children:e})=>r.createElement(l.Header,null,e),tbody:({children:e})=>r.createElement(l.Body,null,e),tr:({children:e})=>r.createElement(l.Row,null,e),th:({children:e})=>r.createElement(l.ColumnHeaderCell,null,e),td:({children:e})=>r.createElement(l.Cell,null,e),sub:({children:e})=>r.createElement("sub",null,e),sup:({children:e})=>r.createElement("sup",null,e),br:()=>r.createElement("br",null),img:s?e=>{const{src:i,alt:m,width:t,height:a}=e;return!i||typeof i!="string"?null:s({src:i,alt:m??"Image",width:t?String(t):void 0,height:a?String(a):void 0})}:void 0,details:({children:e})=>r.createElement("details",{style:{padding:"0.5rem 0"}},e),summary:({children:e})=>r.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},e)}}export{H as createMarkdownComponents};
3
3
  //# sourceMappingURL=create-markdown-components.js.map
package/dist/esm/components/markdown/create-markdown-components.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/markdown/create-markdown-components.tsx"],
4
- "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"8\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n\n"],
4
+ "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy (9-6-5-4-3-2)\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"6\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"2\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n"],
5
5
  "mappings": "AAAA,OAAOA,MAA+B,QAEtC,OAAS,cAAAC,EAAY,OAAAC,EAAK,QAAAC,EAAY,WAAAC,EAAS,QAAAC,EAAM,SAAAC,MAAa,4BAClE,OAAS,aAAAC,MAAiB,UAM1B,SAASC,EAAgBC,EAA4B,CACnD,OAAKA,EAGSA,EAAU,MAAM,oBAAoB,IACnC,CAAC,GAAK,OAHZ,MAIX,CAKA,SAASC,EAAYC,EAA8B,CACjD,IAAIC,EAAO,GACX,OAAKD,GAGD,OAAOA,GAAa,SACtBC,EAAOD,EACE,MAAM,QAAQA,CAAQ,IAC/BC,EAAOD,EAAS,IAAKE,GAAW,OAAOA,GAAU,SAAWA,EAAQ,EAAG,EAAE,KAAK,EAAE,GAG3ED,EAAK,QAAQ,aAAc,EAAE,GAR3BA,CASX,CAyBO,SAASE,EAAyBC,EAAoC,CAAC,EAAe,CAC3F,KAAM,CAAE,qBAAAC,EAAuB,GAAO,eAAAC,EAAgB,uBAAAC,EAAyB,EAAK,EAAIH,EAExF,MAAO,CAEL,GAAI,CAAC,CAAE,SAAAJ,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,MAAO,CAAE,UAAW,OAAQ,aAAc,QAAS,GAC1FO,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FO,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,UAAW,aAAc,QAAS,GAC7FO,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FO,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FO,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAACI,EAAA,CAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FO,CACH,EAIF,EAAG,CAAC,CAAE,SAAAA,CAAS,IACbX,EAAA,cAACK,EAAA,CAAK,KAAK,IAAI,GAAG,IAAI,MAAO,CAAE,WAAY,KAAM,GAC9CM,CACH,EAIF,KAAM,CAAC,CAAE,UAAAF,EAAW,SAAAE,EAAU,OAAAQ,CAAO,IAAsE,CACzG,MAAMP,EAAOF,EAAYC,CAAQ,EAMjC,OAFqBQ,IAAW,IAASA,IAAW,QAAa,CAACV,GAAa,CAACG,EAAK,SAAS;AAAA,CAAI,GAAKA,EAAK,OAAS,IAIjHZ,EAAA,cAACG,EAAA,CAAK,aAAce,EAAwB,KAAK,KAC9CN,CACH,EAKFZ,EAAA,cAACE,EAAA,CAAI,GAAG,IAAI,MAAO,CAAE,SAAU,CAAE,GAC/BF,EAAA,cAACO,EAAA,CAAU,KAAMK,EAAM,SAAUJ,EAAgBC,CAAS,EAAG,YAAaO,EAAsB,CAClG,CAEJ,EAGA,GAAI,CAAC,CAAE,SAAAL,CAAS,IACdX,EAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,MAAO,GAAIW,CAAS,EAEzI,GAAI,CAAC,CAAE,SAAAA,CAAS,IACdX,EAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,SAAU,GAAIW,CAAS,EAE5I,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAAC,MAAG,MAAO,CAAE,aAAc,UAAW,WAAY,KAAM,GAAIW,CAAS,EAGlH,WAAY,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACC,EAAA,KAAYU,CAAS,EAG3E,EAAG,CAAC,CAAE,KAAAS,EAAM,SAAAT,CAAS,IACnBX,EAAA,cAAC,KAAE,KAAMoB,EAAM,MAAO,CAAE,MAAO,kBAAmB,eAAgB,WAAY,GAC3ET,CACH,EAIF,OAAQ,CAAC,CAAE,SAAAA,CAAS,IAClBX,EAAA,cAACK,EAAA,CAAK,OAAO,SAAS,MAAO,CAAE,WAAY,KAAM,GAC9CM,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACK,EAAA,CAAK,MAAO,CAAE,WAAY,MAAO,UAAW,QAAS,GAAIM,CAAS,EAGhH,GAAI,IACFX,EAAA,cAAC,MACC,MAAO,CACL,MAAO,gBACP,UAAW,SACX,aAAc,SACd,OAAQ,MACR,MAAO,OACP,QAAS,EACX,EACF,EAIF,IAAK,CAAC,CAAE,SAAAW,CAAS,IAA6BX,EAAA,cAAAA,EAAA,cAAGW,CAAS,EAG1D,MAAO,CAAC,CAAE,SAAAA,CAAS,IACjBX,EAAA,cAACE,EAAA,CAAI,GAAG,IAAI,MAAO,CAAE,UAAW,MAAO,GACrCF,EAAA,cAACM,EAAM,KAAN,CAAW,KAAK,IAAI,QAAQ,SAC1BK,CACH,CACF,EAEF,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACM,EAAM,OAAN,KAAcK,CAAS,EACxE,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACM,EAAM,KAAN,KAAYK,CAAS,EACtE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACM,EAAM,IAAN,KAAWK,CAAS,EAClE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACM,EAAM,iBAAN,KAAwBK,CAAS,EAC/E,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAACM,EAAM,KAAN,KAAYK,CAAS,EAGnE,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAAC,WAAKW,CAAS,EAC7D,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAAC,WAAKW,CAAS,EAC7D,GAAI,IAAMX,EAAA,cAAC,SAAG,EAGd,IAAKiB,EACAI,GAAqD,CACpD,KAAM,CAAE,IAAAC,EAAK,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAAO,EAAIJ,EACpC,MAAI,CAACC,GAAO,OAAOA,GAAQ,SAAiB,KACrCL,EAAe,CACpB,IAAAK,EACA,IAAKC,GAAO,QACZ,MAAOC,EAAQ,OAAOA,CAAK,EAAI,OAC/B,OAAQC,EAAS,OAAOA,CAAM,EAAI,MACpC,CAAC,CACH,EACA,OAGJ,QAAS,CAAC,CAAE,SAAAd,CAAS,IAA6BX,EAAA,cAAC,WAAQ,MAAO,CAAE,QAAS,UAAW,GAAIW,CAAS,EACrG,QAAS,CAAC,CAAE,SAAAA,CAAS,IAA6BX,EAAA,cAAC,WAAQ,MAAO,CAAE,OAAQ,UAAW,WAAY,GAAI,GAAIW,CAAS,CACtH,CACF",
6
6
  "names": ["React", "Blockquote", "Box", "Code", "Heading", "Text", "Table", "CodeBlock", "extractLanguage", "className", "extractCode", "children", "code", "child", "createMarkdownComponents", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "inline", "href", "props", "src", "alt", "width", "height"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-blocks",
3
- "version": "0.1.14",
3
+ "version": "0.1.16",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
package/src/components/code/code-block.tsx CHANGED
@@ -305,7 +305,7 @@ export function CodeBlock({
305
305
 
306
306
  return (
307
307
  <CodeBlockContext.Provider value={true}>
308
- <Box className="docs-code-block" mt="6" mb="8">
308
+ <Box className="docs-code-block" mt="2" mb="4">
309
309
  <Flex direction="column" gap="2">
310
310
  {preview && (
311
311
  <PreviewSection background={background} backgroundProps={backgroundProps}>
package/src/components/markdown/create-markdown-components.tsx CHANGED
@@ -59,24 +59,24 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
59
59
  const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;
60
60
 
61
61
  return {
62
- // Headings with consistent visual hierarchy
62
+ // Headings with consistent visual hierarchy (9-6-5-4-3-2)
63
63
  h1: ({ children }: MarkdownChildrenProps) => (
64
- <Heading size="8" weight="medium" as="h1" style={{ marginTop: "1rem", marginBottom: "0.5rem" }}>
64
+ <Heading size="9" weight="medium" as="h1" style={{ marginTop: "1rem", marginBottom: "0.5rem" }}>
65
65
  {children}
66
66
  </Heading>
67
67
  ),
68
68
  h2: ({ children }: MarkdownChildrenProps) => (
69
- <Heading weight="medium" size="5" as="h2" style={{ marginTop: "0.875rem", marginBottom: "0.5rem" }}>
69
+ <Heading weight="medium" size="6" as="h2" style={{ marginTop: "0.875rem", marginBottom: "0.5rem" }}>
70
70
  {children}
71
71
  </Heading>
72
72
  ),
73
73
  h3: ({ children }: MarkdownChildrenProps) => (
74
- <Heading weight="medium" size="4" as="h3" style={{ marginTop: "0.75rem", marginBottom: "0.5rem" }}>
74
+ <Heading weight="medium" size="5" as="h3" style={{ marginTop: "0.75rem", marginBottom: "0.5rem" }}>
75
75
  {children}
76
76
  </Heading>
77
77
  ),
78
78
  h4: ({ children }: MarkdownChildrenProps) => (
79
- <Heading weight="medium" size="3" as="h4" style={{ marginTop: "0.625rem", marginBottom: "0.5rem" }}>
79
+ <Heading weight="medium" size="4" as="h4" style={{ marginTop: "0.625rem", marginBottom: "0.5rem" }}>
80
80
  {children}
81
81
  </Heading>
82
82
  ),
@@ -86,7 +86,7 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
86
86
  </Heading>
87
87
  ),
88
88
  h6: ({ children }: MarkdownChildrenProps) => (
89
- <Heading weight="medium" size="3" as="h6" style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}>
89
+ <Heading weight="medium" size="2" as="h6" style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}>
90
90
  {children}
91
91
  </Heading>
92
92
  ),
@@ -203,4 +203,3 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
203
203
  summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: "pointer", fontWeight: 500 }}>{children}</summary>,
204
204
  };
205
205
  }
206
-