@kushagradhawan/kookie-blocks 0.1.8 → 0.1.9

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 (13) hide show
  1. package/dist/cjs/components/code/CodeBlock.d.ts.map +1 -1
  2. package/dist/cjs/components/code/CodeBlock.js +1 -1
  3. package/dist/cjs/components/code/CodeBlock.js.map +2 -2
  4. package/dist/cjs/components/code/LanguageBadge.js +1 -1
  5. package/dist/cjs/components/code/LanguageBadge.js.map +2 -2
  6. package/dist/esm/components/code/CodeBlock.d.ts.map +1 -1
  7. package/dist/esm/components/code/CodeBlock.js +1 -1
  8. package/dist/esm/components/code/CodeBlock.js.map +2 -2
  9. package/dist/esm/components/code/LanguageBadge.js +1 -1
  10. package/dist/esm/components/code/LanguageBadge.js.map +2 -2
  11. package/package.json +1 -1
  12. package/src/components/code/CodeBlock.tsx +0 -2
  13. package/src/components/code/LanguageBadge.tsx +2 -2
package/dist/cjs/components/code/CodeBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwF,MAAM,OAAO,CAAC;AAK7G,OAAO,KAAK,EAAE,cAAc,EAAuC,MAAM,SAAS,CAAC;AA6RnF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,UAAU,EACV,eAAe,EACf,WAAkB,EAClB,eAA0C,EAC1C,IAAI,GACL,EAAE,cAAc,qBA2ChB;AAED,wBAAgB,mBAAmB,YAElC"}
1
+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwF,MAAM,OAAO,CAAC;AAK7G,OAAO,KAAK,EAAE,cAAc,EAAuC,MAAM,SAAS,CAAC;AA2RnF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,UAAU,EACV,eAAe,EACf,WAAkB,EAClB,eAA0C,EAC1C,IAAI,GACL,EAAE,cAAc,qBA2ChB;AAED,wBAAgB,mBAAmB,YAElC"}
package/dist/cjs/components/code/CodeBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var I=Object.create;var w=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)w(r,t,{get:o[t],enumerable:!0})},L=(r,o,t,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!D.call(r,s)&&s!==t&&w(r,s,{get:()=>o[s],enumerable:!(l=A(o,s))||l.enumerable});return r};var M=(r,o,t)=>(t=r!=null?I(z(r)):{},L(o||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),W=r=>L(w({},"__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"),k=require("@hugeicons/react"),f=require("@hugeicons/core-free-icons"),v=require("shiki"),x=require("./types"),T=require("./useCodeCard"),N=require("./LanguageBadge");const P=(0,e.createContext)(!1),O=360,U="one-light",j="one-dark-pro";function G({children:r,background:o="none",backgroundProps:t={}}){const{dotSize:l=24,color:s="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, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${d})`,backgroundSize:`${l}px ${l}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,s,c,l,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 B=(0,e.memo)(function({code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:a=!1,children:h}){const{isExpanded:g,shouldShowToggle:C,copied:p,contentRef:y,contentMaxHeight:m,handleToggle:b,handleCopy:H}=(0,T.useCodeCard)({code:o,collapsedHeight:u}),S=i&&C,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"},s&&e.default.createElement(N.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"},S&&e.default.createElement(n.IconButton,{size:"2",variant:"ghost",color:"gray",highContrast:!0,onClick:b,tooltip:g?"Collapse":"Expand","aria-label":g?"Collapse code":"Expand code"},e.default.createElement(k.HugeiconsIcon,{icon:f.ArrowDown01Icon,style:{transform:E},className:"code-chevron",strokeWidth:1.75})),l&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",highContrast:!0,onClick:H,tooltip:p?"Copied!":"Copy","aria-label":p?"Copied!":"Copy code"},e.default.createElement(k.HugeiconsIcon,{icon:p?f.Tick01Icon:f.Copy01Icon,strokeWidth:1.75})," Copy"))),e.default.createElement(n.Box,{ref:y,style:{maxHeight:i?`${m}px`:void 0},className:F},e.default.createElement(n.ScrollArea,{type:"auto",scrollbars:"horizontal"},a?e.default.createElement(K,null):h)),S&&!g&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))}),V=(0,e.memo)(function({code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,shikiConfig:a}){const[h,g]=(0,e.useState)(null),[C,p]=(0,e.useState)(!0),y=(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 p(!0),(0,v.codeToHtml)(o,y).then(b=>{m||(g(b),p(!1))}).catch(b=>{m||(g(null),p(!1))}),()=>{m=!0}},[o,y]),e.default.createElement(B,{code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:C},h?e.default.createElement(n.Box,{dangerouslySetInnerHTML:{__html:h}}):null)}),q=(0,e.memo)(function({children:o,showCopy:t,showLanguage:l,showLineNumbers:s,collapsible:c,collapsedHeight:i,file:u}){const d=(0,x.extractTextFromChildren)(o),a=(0,x.extractLanguageFromChildren)(o);return e.default.createElement(B,{code:d,language:a,showCopy:t,showLanguage:l,showLineNumbers:s,collapsible:c,collapsedHeight:i,file:u},o)});function J({children:r,code:o,language:t,preview:l,showCopy:s=!0,showLanguage:c=!0,showLineNumbers:i=!0,shikiConfig:u,background:d,backgroundProps:a,collapsible:h=!0,collapsedHeight:g=O,file:C}){const p=t||(0,x.extractLanguageFromChildren)(r)||"text";return e.default.createElement(P.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"},l&&e.default.createElement(G,{background:d,backgroundProps:a},l),o&&e.default.createElement(V,{code:o,language:p,showCopy:s,showLanguage:c,showLineNumbers:i,collapsible:h,collapsedHeight:g,file:C,shikiConfig:u}),r&&!o&&e.default.createElement(q,{showCopy:s,showLanguage:c,showLineNumbers:i,collapsible:h,collapsedHeight:g,file:C},r))))}function Q(){return(0,e.useContext)(P)}
1
+ "use strict";var I=Object.create;var w=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)w(r,t,{get:o[t],enumerable:!0})},L=(r,o,t,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!D.call(r,s)&&s!==t&&w(r,s,{get:()=>o[s],enumerable:!(l=A(o,s))||l.enumerable});return r};var M=(r,o,t)=>(t=r!=null?I(z(r)):{},L(o||!r||!r.__esModule?w(t,"default",{value:r,enumerable:!0}):t,r)),W=r=>L(w({},"__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"),k=require("@hugeicons/react"),f=require("@hugeicons/core-free-icons"),v=require("shiki"),x=require("./types"),T=require("./useCodeCard"),N=require("./LanguageBadge");const P=(0,e.createContext)(!1),O=360,U="one-light",j="one-dark-pro";function G({children:r,background:o="none",backgroundProps:t={}}){const{dotSize:l=24,color:s="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, ${s} 1px, transparent 1px)`,borderRadius:`var(--radius-${d})`,backgroundSize:`${l}px ${l}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,s,c,l,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 B=(0,e.memo)(function({code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:a=!1,children:h}){const{isExpanded:g,shouldShowToggle:C,copied:p,contentRef:y,contentMaxHeight:m,handleToggle:b,handleCopy:H}=(0,T.useCodeCard)({code:o,collapsedHeight:u}),S=i&&C,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"},s&&e.default.createElement(N.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"},S&&e.default.createElement(n.IconButton,{size:"2",variant:"ghost",color:"gray",onClick:b,tooltip:g?"Collapse":"Expand","aria-label":g?"Collapse code":"Expand code"},e.default.createElement(k.HugeiconsIcon,{icon:f.ArrowDown01Icon,style:{transform:E},className:"code-chevron",strokeWidth:1.75})),l&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",onClick:H,tooltip:p?"Copied!":"Copy","aria-label":p?"Copied!":"Copy code"},e.default.createElement(k.HugeiconsIcon,{icon:p?f.Tick01Icon:f.Copy01Icon,strokeWidth:1.75})," Copy"))),e.default.createElement(n.Box,{ref:y,style:{maxHeight:i?`${m}px`:void 0},className:F},e.default.createElement(n.ScrollArea,{type:"auto",scrollbars:"horizontal"},a?e.default.createElement(K,null):h)),S&&!g&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))}),V=(0,e.memo)(function({code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,shikiConfig:a}){const[h,g]=(0,e.useState)(null),[C,p]=(0,e.useState)(!0),y=(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 p(!0),(0,v.codeToHtml)(o,y).then(b=>{m||(g(b),p(!1))}).catch(b=>{m||(g(null),p(!1))}),()=>{m=!0}},[o,y]),e.default.createElement(B,{code:o,language:t,showCopy:l,showLanguage:s,showLineNumbers:c,collapsible:i,collapsedHeight:u,file:d,isLoading:C},h?e.default.createElement(n.Box,{dangerouslySetInnerHTML:{__html:h}}):null)}),q=(0,e.memo)(function({children:o,showCopy:t,showLanguage:l,showLineNumbers:s,collapsible:c,collapsedHeight:i,file:u}){const d=(0,x.extractTextFromChildren)(o),a=(0,x.extractLanguageFromChildren)(o);return e.default.createElement(B,{code:d,language:a,showCopy:t,showLanguage:l,showLineNumbers:s,collapsible:c,collapsedHeight:i,file:u},o)});function J({children:r,code:o,language:t,preview:l,showCopy:s=!0,showLanguage:c=!0,showLineNumbers:i=!0,shikiConfig:u,background:d,backgroundProps:a,collapsible:h=!0,collapsedHeight:g=O,file:C}){const p=t||(0,x.extractLanguageFromChildren)(r)||"text";return e.default.createElement(P.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"},l&&e.default.createElement(G,{background:d,backgroundProps:a},l),o&&e.default.createElement(V,{code:o,language:p,showCopy:s,showLanguage:c,showLineNumbers:i,collapsible:h,collapsedHeight:g,file:C,shikiConfig:u}),r&&!o&&e.default.createElement(q,{showCopy:s,showLanguage:c,showLineNumbers:i,collapsible:h,collapsedHeight:g,file:C},r))))}function Q(){return(0,e.useContext)(P)}
2
2
  //# sourceMappingURL=CodeBlock.js.map
package/dist/cjs/components/code/CodeBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/CodeBlock.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 \"./useCodeCard\";\nimport { LanguageBadge } from \"./LanguageBadge\";\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 highContrast\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 highContrast\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 const [isLoading, setIsLoading] = useState(true);\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 setIsLoading(true);\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n setIsLoading(false);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n setHighlighted(null);\n setIsLoading(false);\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 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={isLoading}\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"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,wBAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAqG,oBACrGC,EAAmF,qCACnFD,EAA8B,4BAC9BE,EAAwD,sCACxDC,EAAoE,iBAEpEC,EAAqE,mBACrEC,EAA4B,yBAC5BC,EAA8B,2BAE9B,MAAMC,KAAmB,iBAAuB,EAAK,EAE/CC,EAA2B,IAC3BC,EAAsB,YACtBC,EAAqB,eAQ3B,SAASC,EAAe,CAAE,SAAAC,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CACpG,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAEtHO,KAAkB,WAAQ,IAAuC,CACrE,GAAIR,IAAe,OAEnB,OAAIA,IAAe,OACV,CACL,gBAAiB,2BAA2BG,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,MAAAE,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,EAIK,CACL,gBAAiB,OAAOL,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,MAAAD,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,CACF,EAAG,CAACL,EAAYG,EAAOC,EAAiBF,EAASG,EAAQC,EAAOC,CAAM,CAAC,EAEvE,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOD,GAClD,EAAAC,QAAA,cAAC,SAAM,WAAW,QAAQV,CAAS,CACrC,CACF,CAEJ,CAeA,SAASW,GAAe,CAItB,OACE,EAAAD,QAAA,cAAC,OAAI,UAAU,iBAHE,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,EAI5C,IAAI,CAACH,EAAOK,IACtB,EAAAF,QAAA,cAAC,OAAI,IAAKE,EAAO,UAAU,qBAAqB,MAAO,CAAE,MAAAL,CAAM,EAAG,CACnE,CACH,CAEJ,CAEA,MAAMM,KAAW,QAAK,SAAkB,CACtC,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,KAAAC,EACA,UAAAC,EAAY,GACZ,SAAAtB,CACF,EAAkB,CAChB,KAAM,CAAE,WAAAuB,EAAY,iBAAAC,EAAkB,OAAAC,EAAQ,WAAAC,EAAY,iBAAAC,EAAkB,aAAAC,EAAc,WAAAC,CAAW,KAAI,eAAY,CACnH,KAAAf,EACA,gBAAAM,CACF,CAAC,EAEKU,EAAaX,GAAeK,EAC5BO,EAAkBR,EAAa,iBAAmB,eAClDS,EAAmBd,EAAkB,eAAiB,iCAE5D,OACE,EAAAR,QAAA,cAAC,OAAI,SAAS,YACZ,EAAAA,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,UAAU,UACd,EAAAA,QAAA,cAAC,QAAK,QAAQ,UAAU,MAAM,QAAQ,IAAI,KACxC,EAAAA,QAAA,cAAC,QAAK,MAAM,SAAS,IAAI,KACtBO,GAAgB,EAAAP,QAAA,cAAC,iBAAc,SAAUK,EAAU,EACnDM,GACC,EAAAX,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCW,CACH,CAEJ,EAEA,EAAAX,QAAA,cAAC,QAAK,MAAM,SAAS,UAAU,uBAC5BoB,GACC,EAAApB,QAAA,cAAC,cACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,aAAY,GACZ,QAASkB,EACT,QAASL,EAAa,WAAa,SACnC,aAAYA,EAAa,gBAAkB,eAE3C,EAAAb,QAAA,cAAC,iBAAc,KAAM,kBAAiB,MAAO,CAAE,UAAWqB,CAAgB,EAAG,UAAU,eAAe,YAAa,KAAM,CAC3H,EAEDf,GACC,EAAAN,QAAA,cAAC,UACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,aAAY,GACZ,QAASmB,EACT,QAASJ,EAAS,UAAY,OAC9B,aAAYA,EAAS,UAAY,aAEjC,EAAAf,QAAA,cAAC,iBAAc,KAAMe,EAAS,aAAa,aAAY,YAAa,KAAM,EAAE,OAC9E,CAEJ,CACF,EAEA,EAAAf,QAAA,cAAC,OAAI,IAAKgB,EAAY,MAAO,CAAE,UAAWP,EAAc,GAAGQ,CAAgB,KAAO,MAAU,EAAG,UAAWK,GACxG,EAAAtB,QAAA,cAAC,cAAW,KAAK,OAAO,WAAW,cAChCY,EAAY,EAAAZ,QAAA,cAACC,EAAA,IAAa,EAAKX,CAClC,CACF,EAEC8B,GAAc,CAACP,GAAc,EAAAb,QAAA,cAAC,OAAI,UAAU,6BAA6B,CAC5E,CACF,CACF,CAEJ,CAAC,EAcKuB,KAAqB,QAAK,SAA4B,CAC1D,KAAAnB,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,KAAAC,EACA,YAAAa,CACF,EAA4B,CAC1B,KAAM,CAACC,EAAaC,CAAc,KAAI,YAAwB,IAAI,EAC5D,CAACd,EAAWe,CAAY,KAAI,YAAS,EAAI,EAGzCC,KAAe,WAAQ,IAAM,CACjC,MAAMC,EAAaL,GAAa,QAAQ,OAASrC,EAC3C2C,EAAYN,GAAa,QAAQ,MAAQpC,EAE/C,MAAO,CACL,KAAMiB,EACN,OAAQ,CACN,MAAOwB,EACP,KAAMC,CACR,EACA,aAAc,GACd,UAAWN,GAAa,UACxB,aAAcA,GAAa,aAC3B,KAAMA,GAAa,KAAO,CAAE,MAAOA,EAAY,IAAK,EAAI,MAC1D,CACF,EAAG,CAACnB,EAAUmB,GAAa,QAAQ,MAAOA,GAAa,QAAQ,KAAMA,GAAa,UAAWA,GAAa,aAAcA,GAAa,IAAI,CAAC,EAE1I,sBAAU,IAAM,CACd,IAAIO,EAAY,GAChB,OAAAJ,EAAa,EAAI,KAEjB,cAAWvB,EAAMwB,CAAY,EAC1B,KAAMI,GAAS,CACTD,IACHL,EAAeM,CAAI,EACnBL,EAAa,EAAK,EAEtB,CAAC,EACA,MAAOM,GAAU,CACXF,IACHL,EAAe,IAAI,EACnBC,EAAa,EAAK,EAKtB,CAAC,EAEI,IAAM,CACXI,EAAY,EACd,CACF,EAAG,CAAC3B,EAAMwB,CAAY,CAAC,EAGrB,EAAA5B,QAAA,cAACG,EAAA,CACC,KAAMC,EACN,SAAUC,EACV,SAAUC,EACV,aAAcC,EACd,gBAAiBC,EACjB,YAAaC,EACb,gBAAiBC,EACjB,KAAMC,EACN,UAAWC,GAEVa,EAAc,EAAAzB,QAAA,cAAC,OAAI,wBAAyB,CAAE,OAAQyB,CAAY,EAAG,EAAK,IAC7E,CAEJ,CAAC,EAYKS,KAAsB,QAAK,SAA6B,CAC5D,SAAA5C,EACA,SAAAgB,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,KAAAC,CACF,EAA6B,CAC3B,MAAMP,KAAO,2BAAwBd,CAAQ,EACvCe,KAAW,+BAA4Bf,CAAQ,EAErD,OACE,EAAAU,QAAA,cAACG,EAAA,CACC,KAAMC,EACN,SAAUC,EACV,SAAUC,EACV,aAAcC,EACd,gBAAiBC,EACjB,YAAaC,EACb,gBAAiBC,EACjB,KAAMC,GAELrB,CACH,CAEJ,CAAC,EAEM,SAASf,EAAU,CACxB,SAAAe,EACA,KAAAc,EACA,SAAAC,EACA,QAAA8B,EACA,SAAA7B,EAAW,GACX,aAAAC,EAAe,GACf,gBAAAC,EAAkB,GAClB,YAAAgB,EACA,WAAAjC,EACA,gBAAAC,EACA,YAAAiB,EAAc,GACd,gBAAAC,EAAkBxB,EAClB,KAAAyB,CACF,EAAmB,CACjB,MAAMyB,EAAkB/B,MAAY,+BAA4Bf,CAAQ,GAAK,OAE7E,OACE,EAAAU,QAAA,cAACf,EAAiB,SAAjB,CAA0B,MAAO,IAChC,EAAAe,QAAA,cAAC,OAAI,UAAU,kBAAkB,GAAG,IAAI,GAAG,KACzC,EAAAA,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,KAC1BmC,GACC,EAAAnC,QAAA,cAACX,EAAA,CAAe,WAAYE,EAAY,gBAAiBC,GACtD2C,CACH,EAGD/B,GACC,EAAAJ,QAAA,cAACuB,EAAA,CACC,KAAMnB,EACN,SAAUgC,EACV,SAAU9B,EACV,aAAcC,EACd,gBAAiBC,EACjB,YAAaC,EACb,gBAAiBC,EACjB,KAAMC,EACN,YAAaa,EACf,EAGDlC,GAAY,CAACc,GACZ,EAAAJ,QAAA,cAACkC,EAAA,CACC,SAAU5B,EACV,aAAcC,EACd,gBAAiBC,EACjB,YAAaC,EACb,gBAAiBC,EACjB,KAAMC,GAELrB,CACH,CAEJ,CACF,CACF,CAEJ,CAEO,SAASd,GAAsB,CACpC,SAAO,cAAWS,CAAgB,CACpC",
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 \"./useCodeCard\";\nimport { LanguageBadge } from \"./LanguageBadge\";\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 const [isLoading, setIsLoading] = useState(true);\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 setIsLoading(true);\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n setIsLoading(false);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n setHighlighted(null);\n setIsLoading(false);\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 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={isLoading}\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"],
5
+ "mappings": "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",
6
6
  "names": ["CodeBlock_exports", "__export", "CodeBlock", "useCodeBlockContext", "__toCommonJS", "import_react", "import_kookie_ui", "import_core_free_icons", "import_shiki", "import_types", "import_useCodeCard", "import_LanguageBadge", "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", "setIsLoading", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "preview", "displayLanguage"]
7
7
  }
package/dist/cjs/components/code/LanguageBadge.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var p=Object.create;var a=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var L=(s,t)=>{for(var e in t)a(s,e,{get:t[e],enumerable:!0})},n=(s,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of c(t))!u.call(s,r)&&r!==e&&a(s,r,{get:()=>t[r],enumerable:!(o=S(t,r))||o.enumerable});return s};var d=(s,t,e)=>(e=s!=null?p(h(s)):{},n(t||!s||!s.__esModule?a(e,"default",{value:s,enumerable:!0}):e,s)),m=s=>n(a({},"__esModule",{value:!0}),s);var C={};L(C,{LanguageBadge:()=>x,formatLanguageForDisplay:()=>i});module.exports=m(C);var l=d(require("react")),g=require("@kushagradhawan/kookie-ui");const y={js:"JS",javascript:"JS",jsx:"JSX",ts:"TS",typescript:"TS",tsx:"TSX",py:"Python",python:"Python",rb:"Ruby",ruby:"Ruby",sh:"Shell",bash:"Shell",shell:"Shell",zsh:"Shell",css:"CSS",scss:"SCSS",sass:"Sass",less:"Less",html:"HTML",xml:"XML",json:"JSON",yaml:"YAML",yml:"YAML",md:"Markdown",markdown:"Markdown",mdx:"MDX",sql:"SQL",graphql:"GraphQL",gql:"GraphQL",go:"Go",rust:"Rust",rs:"Rust",swift:"Swift",kotlin:"Kotlin",java:"Java",cpp:"C++",c:"C",cs:"C#",csharp:"C#",php:"PHP",vue:"Vue",svelte:"Svelte",astro:"Astro",dockerfile:"Docker",docker:"Docker",text:"Text",plaintext:"Text",txt:"Text"};function i(s){const t=s.toLowerCase().trim();return y[t]||s.toUpperCase()}function x({language:s}){const t=i(s);return l.default.createElement(g.Code,{size:"1",color:"gray",highContrast:!0},t)}
1
+ "use strict";var p=Object.create;var a=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var L=(s,t)=>{for(var e in t)a(s,e,{get:t[e],enumerable:!0})},n=(s,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of c(t))!u.call(s,r)&&r!==e&&a(s,r,{get:()=>t[r],enumerable:!(o=S(t,r))||o.enumerable});return s};var d=(s,t,e)=>(e=s!=null?p(h(s)):{},n(t||!s||!s.__esModule?a(e,"default",{value:s,enumerable:!0}):e,s)),m=s=>n(a({},"__esModule",{value:!0}),s);var C={};L(C,{LanguageBadge:()=>x,formatLanguageForDisplay:()=>i});module.exports=m(C);var l=d(require("react")),g=require("@kushagradhawan/kookie-ui");const y={js:"JS",javascript:"JS",jsx:"JSX",ts:"TS",typescript:"TS",tsx:"TSX",py:"Python",python:"Python",rb:"Ruby",ruby:"Ruby",sh:"Shell",bash:"Shell",shell:"Shell",zsh:"Shell",css:"CSS",scss:"SCSS",sass:"Sass",less:"Less",html:"HTML",xml:"XML",json:"JSON",yaml:"YAML",yml:"YAML",md:"Markdown",markdown:"Markdown",mdx:"MDX",sql:"SQL",graphql:"GraphQL",gql:"GraphQL",go:"Go",rust:"Rust",rs:"Rust",swift:"Swift",kotlin:"Kotlin",java:"Java",cpp:"C++",c:"C",cs:"C#",csharp:"C#",php:"PHP",vue:"Vue",svelte:"Svelte",astro:"Astro",dockerfile:"Docker",docker:"Docker",text:"Text",plaintext:"Text",txt:"Text"};function i(s){const t=s.toLowerCase().trim();return y[t]||s.toUpperCase()}function x({language:s}){const t=i(s);return l.default.createElement(g.Code,{size:"1",color:"gray",variant:"ghost"},t.toLowerCase())}
2
2
  //# sourceMappingURL=LanguageBadge.js.map
package/dist/cjs/components/code/LanguageBadge.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\nconst LANGUAGE_DISPLAY_MAP: Record<string, string> = {\n js: \"JS\",\n javascript: \"JS\",\n jsx: \"JSX\",\n ts: \"TS\",\n typescript: \"TS\",\n tsx: \"TSX\",\n py: \"Python\",\n python: \"Python\",\n rb: \"Ruby\",\n ruby: \"Ruby\",\n sh: \"Shell\",\n bash: \"Shell\",\n shell: \"Shell\",\n zsh: \"Shell\",\n css: \"CSS\",\n scss: \"SCSS\",\n sass: \"Sass\",\n less: \"Less\",\n html: \"HTML\",\n xml: \"XML\",\n json: \"JSON\",\n yaml: \"YAML\",\n yml: \"YAML\",\n md: \"Markdown\",\n markdown: \"Markdown\",\n mdx: \"MDX\",\n sql: \"SQL\",\n graphql: \"GraphQL\",\n gql: \"GraphQL\",\n go: \"Go\",\n rust: \"Rust\",\n rs: \"Rust\",\n swift: \"Swift\",\n kotlin: \"Kotlin\",\n java: \"Java\",\n cpp: \"C++\",\n c: \"C\",\n cs: \"C#\",\n csharp: \"C#\",\n php: \"PHP\",\n vue: \"Vue\",\n svelte: \"Svelte\",\n astro: \"Astro\",\n dockerfile: \"Docker\",\n docker: \"Docker\",\n text: \"Text\",\n plaintext: \"Text\",\n txt: \"Text\",\n};\n\n/**\n * Formats a language identifier for display in the badge.\n * Converts technical identifiers to human-readable labels.\n */\nexport function formatLanguageForDisplay(lang: string): string {\n const normalized = lang.toLowerCase().trim();\n return LANGUAGE_DISPLAY_MAP[normalized] || lang.toUpperCase();\n}\n\ninterface LanguageBadgeProps {\n language: string;\n}\n\n/**\n * Displays the programming language as a small badge.\n * Uses Kookie UI's Code component with consistent styling.\n */\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n const displayLanguage = formatLanguageForDisplay(language);\n\n return (\n <Code size=\"1\" color=\"gray\" highContrast>\n {displayLanguage}\n </Code>\n );\n}\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,6BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAkB,oBAClBC,EAAqB,qCAErB,MAAMC,EAA+C,CACnD,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,SACJ,OAAQ,SACR,GAAI,OACJ,KAAM,OACN,GAAI,QACJ,KAAM,QACN,MAAO,QACP,IAAK,QACL,IAAK,MACL,KAAM,OACN,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,KAAM,OACN,KAAM,OACN,IAAK,OACL,GAAI,WACJ,SAAU,WACV,IAAK,MACL,IAAK,MACL,QAAS,UACT,IAAK,UACL,GAAI,KACJ,KAAM,OACN,GAAI,OACJ,MAAO,QACP,OAAQ,SACR,KAAM,OACN,IAAK,MACL,EAAG,IACH,GAAI,KACJ,OAAQ,KACR,IAAK,MACL,IAAK,MACL,OAAQ,SACR,MAAO,QACP,WAAY,SACZ,OAAQ,SACR,KAAM,OACN,UAAW,OACX,IAAK,MACP,EAMO,SAASJ,EAAyBK,EAAsB,CAC7D,MAAMC,EAAaD,EAAK,YAAY,EAAE,KAAK,EAC3C,OAAOD,EAAqBE,CAAU,GAAKD,EAAK,YAAY,CAC9D,CAUO,SAASN,EAAc,CAAE,SAAAQ,CAAS,EAAuB,CAC9D,MAAMC,EAAkBR,EAAyBO,CAAQ,EAEzD,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCD,CACH,CAEJ",
4
+ "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\nconst LANGUAGE_DISPLAY_MAP: Record<string, string> = {\n js: \"JS\",\n javascript: \"JS\",\n jsx: \"JSX\",\n ts: \"TS\",\n typescript: \"TS\",\n tsx: \"TSX\",\n py: \"Python\",\n python: \"Python\",\n rb: \"Ruby\",\n ruby: \"Ruby\",\n sh: \"Shell\",\n bash: \"Shell\",\n shell: \"Shell\",\n zsh: \"Shell\",\n css: \"CSS\",\n scss: \"SCSS\",\n sass: \"Sass\",\n less: \"Less\",\n html: \"HTML\",\n xml: \"XML\",\n json: \"JSON\",\n yaml: \"YAML\",\n yml: \"YAML\",\n md: \"Markdown\",\n markdown: \"Markdown\",\n mdx: \"MDX\",\n sql: \"SQL\",\n graphql: \"GraphQL\",\n gql: \"GraphQL\",\n go: \"Go\",\n rust: \"Rust\",\n rs: \"Rust\",\n swift: \"Swift\",\n kotlin: \"Kotlin\",\n java: \"Java\",\n cpp: \"C++\",\n c: \"C\",\n cs: \"C#\",\n csharp: \"C#\",\n php: \"PHP\",\n vue: \"Vue\",\n svelte: \"Svelte\",\n astro: \"Astro\",\n dockerfile: \"Docker\",\n docker: \"Docker\",\n text: \"Text\",\n plaintext: \"Text\",\n txt: \"Text\",\n};\n\n/**\n * Formats a language identifier for display in the badge.\n * Converts technical identifiers to human-readable labels.\n */\nexport function formatLanguageForDisplay(lang: string): string {\n const normalized = lang.toLowerCase().trim();\n return LANGUAGE_DISPLAY_MAP[normalized] || lang.toUpperCase();\n}\n\ninterface LanguageBadgeProps {\n language: string;\n}\n\n/**\n * Displays the programming language as a small badge.\n * Uses Kookie UI's Code component with consistent styling.\n */\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n const displayLanguage = formatLanguageForDisplay(language);\n\n return (\n <Code size=\"1\" color=\"gray\" variant=\"ghost\">\n {displayLanguage.toLowerCase()}\n </Code>\n );\n}\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,6BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAkB,oBAClBC,EAAqB,qCAErB,MAAMC,EAA+C,CACnD,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,SACJ,OAAQ,SACR,GAAI,OACJ,KAAM,OACN,GAAI,QACJ,KAAM,QACN,MAAO,QACP,IAAK,QACL,IAAK,MACL,KAAM,OACN,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,KAAM,OACN,KAAM,OACN,IAAK,OACL,GAAI,WACJ,SAAU,WACV,IAAK,MACL,IAAK,MACL,QAAS,UACT,IAAK,UACL,GAAI,KACJ,KAAM,OACN,GAAI,OACJ,MAAO,QACP,OAAQ,SACR,KAAM,OACN,IAAK,MACL,EAAG,IACH,GAAI,KACJ,OAAQ,KACR,IAAK,MACL,IAAK,MACL,OAAQ,SACR,MAAO,QACP,WAAY,SACZ,OAAQ,SACR,KAAM,OACN,UAAW,OACX,IAAK,MACP,EAMO,SAASJ,EAAyBK,EAAsB,CAC7D,MAAMC,EAAaD,EAAK,YAAY,EAAE,KAAK,EAC3C,OAAOD,EAAqBE,CAAU,GAAKD,EAAK,YAAY,CAC9D,CAUO,SAASN,EAAc,CAAE,SAAAQ,CAAS,EAAuB,CAC9D,MAAMC,EAAkBR,EAAyBO,CAAQ,EAEzD,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,QAAQ,SACjCD,EAAgB,YAAY,CAC/B,CAEJ",
6
6
  "names": ["LanguageBadge_exports", "__export", "LanguageBadge", "formatLanguageForDisplay", "__toCommonJS", "import_react", "import_kookie_ui", "LANGUAGE_DISPLAY_MAP", "lang", "normalized", "language", "displayLanguage", "React"]
7
7
  }
package/dist/esm/components/code/CodeBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwF,MAAM,OAAO,CAAC;AAK7G,OAAO,KAAK,EAAE,cAAc,EAAuC,MAAM,SAAS,CAAC;AA6RnF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,UAAU,EACV,eAAe,EACf,WAAkB,EAClB,eAA0C,EAC1C,IAAI,GACL,EAAE,cAAc,qBA2ChB;AAED,wBAAgB,mBAAmB,YAElC"}
1
+ {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwF,MAAM,OAAO,CAAC;AAK7G,OAAO,KAAK,EAAE,cAAc,EAAuC,MAAM,SAAS,CAAC;AA2RnF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,eAAsB,EACtB,WAAW,EACX,UAAU,EACV,eAAe,EACf,WAAkB,EAClB,eAA0C,EAC1C,IAAI,GACL,EAAE,cAAc,qBA2ChB;AAED,wBAAgB,mBAAmB,YAElC"}
package/dist/esm/components/code/CodeBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{useState as k,useEffect as F,useMemo as S,memo as y,createContext as I,useContext as A}from"react";import{Box as m,Card as L,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as P}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 B}from"./types";import{useCodeCard as K}from"./useCodeCard";import{LanguageBadge as V}from"./LanguageBadge";const v=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:u,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:l="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:s="3"}=t,n=S(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${l} 1px, transparent 1px)`,borderRadius:`var(--radius-${s})`,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-${s})`,width:d,...r&&{height:r}}},[o,l,i,a,r,d,s]);return e.createElement(L,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},u)))}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 T=y(function({code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,isLoading:n=!1,children:p}){const{isExpanded:c,shouldShowToggle:C,copied:g,contentRef:x,contentMaxHeight:h,handleToggle:b,handleCopy:N}=K({code:o,collapsedHeight:d}),w=r&&C,H=c?"rotate(180deg)":"rotate(0deg)",E=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(L,{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"},l&&e.createElement(V,{language:t}),s&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},s)),e.createElement(f,{align:"center",className:"code-action-buttons"},w&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",highContrast:!0,onClick:b,tooltip:c?"Collapse":"Expand","aria-label":c?"Collapse code":"Expand code"},e.createElement(P,{icon:U,style:{transform:H},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",highContrast:!0,onClick:N,tooltip:g?"Copied!":"Copy","aria-label":g?"Copied!":"Copy code"},e.createElement(P,{icon:g?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:x,style:{maxHeight:r?`${h}px`:void 0},className:E},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):p)),w&&!c&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=y(function({code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,shikiConfig:n}){const[p,c]=k(null),[C,g]=k(!0),x=S(()=>{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 g(!0),j(o,x).then(b=>{h||(c(b),g(!1))}).catch(b=>{h||(c(null),g(!1))}),()=>{h=!0}},[o,x]),e.createElement(T,{code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,isLoading:C},p?e.createElement(m,{dangerouslySetInnerHTML:{__html:p}}):null)}),R=y(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:l,collapsible:i,collapsedHeight:r,file:d}){const s=G(o),n=B(o);return e.createElement(T,{code:s,language:n,showCopy:t,showLanguage:a,showLineNumbers:l,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:u,code:o,language:t,preview:a,showCopy:l=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:s,backgroundProps:n,collapsible:p=!0,collapsedHeight:c=q,file:C}){const g=t||B(u)||"text";return e.createElement(v.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:s,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:g,showCopy:l,showLanguage:i,showLineNumbers:r,collapsible:p,collapsedHeight:c,file:C,shikiConfig:d}),u&&!o&&e.createElement(R,{showCopy:l,showLanguage:i,showLineNumbers:r,collapsible:p,collapsedHeight:c,file:C},u))))}function ce(){return A(v)}export{de as CodeBlock,ce as useCodeBlockContext};
1
+ import e,{useState as k,useEffect as F,useMemo as S,memo as y,createContext as I,useContext as A}from"react";import{Box as m,Card as L,Flex as f,Button as _,Text as z,Theme as D,ScrollArea as $,IconButton as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as P}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 B}from"./types";import{useCodeCard as K}from"./useCodeCard";import{LanguageBadge as V}from"./LanguageBadge";const v=I(!1),q=360,J="one-light",Q="one-dark-pro";function X({children:u,background:o="none",backgroundProps:t={}}){const{dotSize:a=24,color:l="var(--gray-10)",backgroundColor:i="var(--gray-2)",height:r,width:d="100%",radius:s="3"}=t,n=S(()=>{if(o!=="none")return o==="dots"?{backgroundImage:`radial-gradient(circle, ${l} 1px, transparent 1px)`,borderRadius:`var(--radius-${s})`,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-${s})`,width:d,...r&&{height:r}}},[o,l,i,a,r,d,s]);return e.createElement(L,{size:"1",variant:"soft"},e.createElement(f,{justify:"center",align:"center",py:"4",style:n},e.createElement(D,{fontFamily:"sans"},u)))}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 T=y(function({code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,isLoading:n=!1,children:p}){const{isExpanded:c,shouldShowToggle:C,copied:g,contentRef:x,contentMaxHeight:h,handleToggle:b,handleCopy:N}=K({code:o,collapsedHeight:d}),w=r&&C,H=c?"rotate(180deg)":"rotate(0deg)",E=i?"code-content":"code-content hide-line-numbers";return e.createElement(m,{position:"relative"},e.createElement(L,{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"},l&&e.createElement(V,{language:t}),s&&e.createElement(z,{size:"1",color:"gray",highContrast:!0},s)),e.createElement(f,{align:"center",className:"code-action-buttons"},w&&e.createElement(M,{size:"2",variant:"ghost",color:"gray",onClick:b,tooltip:c?"Collapse":"Expand","aria-label":c?"Collapse code":"Expand code"},e.createElement(P,{icon:U,style:{transform:H},className:"code-chevron",strokeWidth:1.75})),a&&e.createElement(_,{size:"2",variant:"ghost",color:"gray",onClick:N,tooltip:g?"Copied!":"Copy","aria-label":g?"Copied!":"Copy code"},e.createElement(P,{icon:g?O:W,strokeWidth:1.75})," Copy"))),e.createElement(m,{ref:x,style:{maxHeight:r?`${h}px`:void 0},className:E},e.createElement($,{type:"auto",scrollbars:"horizontal"},n?e.createElement(Y,null):p)),w&&!c&&e.createElement(m,{className:"code-scroll-shadow visible"}))))}),Z=y(function({code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,shikiConfig:n}){const[p,c]=k(null),[C,g]=k(!0),x=S(()=>{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 g(!0),j(o,x).then(b=>{h||(c(b),g(!1))}).catch(b=>{h||(c(null),g(!1))}),()=>{h=!0}},[o,x]),e.createElement(T,{code:o,language:t,showCopy:a,showLanguage:l,showLineNumbers:i,collapsible:r,collapsedHeight:d,file:s,isLoading:C},p?e.createElement(m,{dangerouslySetInnerHTML:{__html:p}}):null)}),R=y(function({children:o,showCopy:t,showLanguage:a,showLineNumbers:l,collapsible:i,collapsedHeight:r,file:d}){const s=G(o),n=B(o);return e.createElement(T,{code:s,language:n,showCopy:t,showLanguage:a,showLineNumbers:l,collapsible:i,collapsedHeight:r,file:d},o)});function de({children:u,code:o,language:t,preview:a,showCopy:l=!0,showLanguage:i=!0,showLineNumbers:r=!0,shikiConfig:d,background:s,backgroundProps:n,collapsible:p=!0,collapsedHeight:c=q,file:C}){const g=t||B(u)||"text";return e.createElement(v.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:s,backgroundProps:n},a),o&&e.createElement(Z,{code:o,language:g,showCopy:l,showLanguage:i,showLineNumbers:r,collapsible:p,collapsedHeight:c,file:C,shikiConfig:d}),u&&!o&&e.createElement(R,{showCopy:l,showLanguage:i,showLineNumbers:r,collapsible:p,collapsedHeight:c,file:C},u))))}function ce(){return A(v)}export{de as CodeBlock,ce as useCodeBlockContext};
2
2
  //# sourceMappingURL=CodeBlock.js.map
package/dist/esm/components/code/CodeBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/CodeBlock.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 \"./useCodeCard\";\nimport { LanguageBadge } from \"./LanguageBadge\";\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 highContrast\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 highContrast\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 const [isLoading, setIsLoading] = useState(true);\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 setIsLoading(true);\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n setIsLoading(false);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n setHighlighted(null);\n setIsLoading(false);\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 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={isLoading}\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"],
5
- "mappings": "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",
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 \"./useCodeCard\";\nimport { LanguageBadge } from \"./LanguageBadge\";\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 const [isLoading, setIsLoading] = useState(true);\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 setIsLoading(true);\n\n codeToHtml(code, shikiOptions)\n .then((html) => {\n if (!cancelled) {\n setHighlighted(html);\n setIsLoading(false);\n }\n })\n .catch((error) => {\n if (!cancelled) {\n setHighlighted(null);\n setIsLoading(false);\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 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={isLoading}\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"],
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", "setIsLoading", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "CodeBlock", "preview", "displayLanguage", "useCodeBlockContext"]
7
7
  }
package/dist/esm/components/code/LanguageBadge.js CHANGED
@@ -1,2 +1,2 @@
1
- import e from"react";import{Code as r}from"@kushagradhawan/kookie-ui";const a={js:"JS",javascript:"JS",jsx:"JSX",ts:"TS",typescript:"TS",tsx:"TSX",py:"Python",python:"Python",rb:"Ruby",ruby:"Ruby",sh:"Shell",bash:"Shell",shell:"Shell",zsh:"Shell",css:"CSS",scss:"SCSS",sass:"Sass",less:"Less",html:"HTML",xml:"XML",json:"JSON",yaml:"YAML",yml:"YAML",md:"Markdown",markdown:"Markdown",mdx:"MDX",sql:"SQL",graphql:"GraphQL",gql:"GraphQL",go:"Go",rust:"Rust",rs:"Rust",swift:"Swift",kotlin:"Kotlin",java:"Java",cpp:"C++",c:"C",cs:"C#",csharp:"C#",php:"PHP",vue:"Vue",svelte:"Svelte",astro:"Astro",dockerfile:"Docker",docker:"Docker",text:"Text",plaintext:"Text",txt:"Text"};function o(s){const t=s.toLowerCase().trim();return a[t]||s.toUpperCase()}function g({language:s}){const t=o(s);return e.createElement(r,{size:"1",color:"gray",highContrast:!0},t)}export{g as LanguageBadge,o as formatLanguageForDisplay};
1
+ import e from"react";import{Code as r}from"@kushagradhawan/kookie-ui";const a={js:"JS",javascript:"JS",jsx:"JSX",ts:"TS",typescript:"TS",tsx:"TSX",py:"Python",python:"Python",rb:"Ruby",ruby:"Ruby",sh:"Shell",bash:"Shell",shell:"Shell",zsh:"Shell",css:"CSS",scss:"SCSS",sass:"Sass",less:"Less",html:"HTML",xml:"XML",json:"JSON",yaml:"YAML",yml:"YAML",md:"Markdown",markdown:"Markdown",mdx:"MDX",sql:"SQL",graphql:"GraphQL",gql:"GraphQL",go:"Go",rust:"Rust",rs:"Rust",swift:"Swift",kotlin:"Kotlin",java:"Java",cpp:"C++",c:"C",cs:"C#",csharp:"C#",php:"PHP",vue:"Vue",svelte:"Svelte",astro:"Astro",dockerfile:"Docker",docker:"Docker",text:"Text",plaintext:"Text",txt:"Text"};function o(s){const t=s.toLowerCase().trim();return a[t]||s.toUpperCase()}function g({language:s}){const t=o(s);return e.createElement(r,{size:"1",color:"gray",variant:"ghost"},t.toLowerCase())}export{g as LanguageBadge,o as formatLanguageForDisplay};
2
2
  //# sourceMappingURL=LanguageBadge.js.map
package/dist/esm/components/code/LanguageBadge.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\nconst LANGUAGE_DISPLAY_MAP: Record<string, string> = {\n js: \"JS\",\n javascript: \"JS\",\n jsx: \"JSX\",\n ts: \"TS\",\n typescript: \"TS\",\n tsx: \"TSX\",\n py: \"Python\",\n python: \"Python\",\n rb: \"Ruby\",\n ruby: \"Ruby\",\n sh: \"Shell\",\n bash: \"Shell\",\n shell: \"Shell\",\n zsh: \"Shell\",\n css: \"CSS\",\n scss: \"SCSS\",\n sass: \"Sass\",\n less: \"Less\",\n html: \"HTML\",\n xml: \"XML\",\n json: \"JSON\",\n yaml: \"YAML\",\n yml: \"YAML\",\n md: \"Markdown\",\n markdown: \"Markdown\",\n mdx: \"MDX\",\n sql: \"SQL\",\n graphql: \"GraphQL\",\n gql: \"GraphQL\",\n go: \"Go\",\n rust: \"Rust\",\n rs: \"Rust\",\n swift: \"Swift\",\n kotlin: \"Kotlin\",\n java: \"Java\",\n cpp: \"C++\",\n c: \"C\",\n cs: \"C#\",\n csharp: \"C#\",\n php: \"PHP\",\n vue: \"Vue\",\n svelte: \"Svelte\",\n astro: \"Astro\",\n dockerfile: \"Docker\",\n docker: \"Docker\",\n text: \"Text\",\n plaintext: \"Text\",\n txt: \"Text\",\n};\n\n/**\n * Formats a language identifier for display in the badge.\n * Converts technical identifiers to human-readable labels.\n */\nexport function formatLanguageForDisplay(lang: string): string {\n const normalized = lang.toLowerCase().trim();\n return LANGUAGE_DISPLAY_MAP[normalized] || lang.toUpperCase();\n}\n\ninterface LanguageBadgeProps {\n language: string;\n}\n\n/**\n * Displays the programming language as a small badge.\n * Uses Kookie UI's Code component with consistent styling.\n */\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n const displayLanguage = formatLanguageForDisplay(language);\n\n return (\n <Code size=\"1\" color=\"gray\" highContrast>\n {displayLanguage}\n </Code>\n );\n}\n"],
5
- "mappings": "AAAA,OAAOA,MAAW,QAClB,OAAS,QAAAC,MAAY,4BAErB,MAAMC,EAA+C,CACnD,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,SACJ,OAAQ,SACR,GAAI,OACJ,KAAM,OACN,GAAI,QACJ,KAAM,QACN,MAAO,QACP,IAAK,QACL,IAAK,MACL,KAAM,OACN,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,KAAM,OACN,KAAM,OACN,IAAK,OACL,GAAI,WACJ,SAAU,WACV,IAAK,MACL,IAAK,MACL,QAAS,UACT,IAAK,UACL,GAAI,KACJ,KAAM,OACN,GAAI,OACJ,MAAO,QACP,OAAQ,SACR,KAAM,OACN,IAAK,MACL,EAAG,IACH,GAAI,KACJ,OAAQ,KACR,IAAK,MACL,IAAK,MACL,OAAQ,SACR,MAAO,QACP,WAAY,SACZ,OAAQ,SACR,KAAM,OACN,UAAW,OACX,IAAK,MACP,EAMO,SAASC,EAAyBC,EAAsB,CAC7D,MAAMC,EAAaD,EAAK,YAAY,EAAE,KAAK,EAC3C,OAAOF,EAAqBG,CAAU,GAAKD,EAAK,YAAY,CAC9D,CAUO,SAASE,EAAc,CAAE,SAAAC,CAAS,EAAuB,CAC9D,MAAMC,EAAkBL,EAAyBI,CAAQ,EAEzD,OACEP,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCO,CACH,CAEJ",
4
+ "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\nconst LANGUAGE_DISPLAY_MAP: Record<string, string> = {\n js: \"JS\",\n javascript: \"JS\",\n jsx: \"JSX\",\n ts: \"TS\",\n typescript: \"TS\",\n tsx: \"TSX\",\n py: \"Python\",\n python: \"Python\",\n rb: \"Ruby\",\n ruby: \"Ruby\",\n sh: \"Shell\",\n bash: \"Shell\",\n shell: \"Shell\",\n zsh: \"Shell\",\n css: \"CSS\",\n scss: \"SCSS\",\n sass: \"Sass\",\n less: \"Less\",\n html: \"HTML\",\n xml: \"XML\",\n json: \"JSON\",\n yaml: \"YAML\",\n yml: \"YAML\",\n md: \"Markdown\",\n markdown: \"Markdown\",\n mdx: \"MDX\",\n sql: \"SQL\",\n graphql: \"GraphQL\",\n gql: \"GraphQL\",\n go: \"Go\",\n rust: \"Rust\",\n rs: \"Rust\",\n swift: \"Swift\",\n kotlin: \"Kotlin\",\n java: \"Java\",\n cpp: \"C++\",\n c: \"C\",\n cs: \"C#\",\n csharp: \"C#\",\n php: \"PHP\",\n vue: \"Vue\",\n svelte: \"Svelte\",\n astro: \"Astro\",\n dockerfile: \"Docker\",\n docker: \"Docker\",\n text: \"Text\",\n plaintext: \"Text\",\n txt: \"Text\",\n};\n\n/**\n * Formats a language identifier for display in the badge.\n * Converts technical identifiers to human-readable labels.\n */\nexport function formatLanguageForDisplay(lang: string): string {\n const normalized = lang.toLowerCase().trim();\n return LANGUAGE_DISPLAY_MAP[normalized] || lang.toUpperCase();\n}\n\ninterface LanguageBadgeProps {\n language: string;\n}\n\n/**\n * Displays the programming language as a small badge.\n * Uses Kookie UI's Code component with consistent styling.\n */\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n const displayLanguage = formatLanguageForDisplay(language);\n\n return (\n <Code size=\"1\" color=\"gray\" variant=\"ghost\">\n {displayLanguage.toLowerCase()}\n </Code>\n );\n}\n"],
5
+ "mappings": "AAAA,OAAOA,MAAW,QAClB,OAAS,QAAAC,MAAY,4BAErB,MAAMC,EAA+C,CACnD,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,KACJ,WAAY,KACZ,IAAK,MACL,GAAI,SACJ,OAAQ,SACR,GAAI,OACJ,KAAM,OACN,GAAI,QACJ,KAAM,QACN,MAAO,QACP,IAAK,QACL,IAAK,MACL,KAAM,OACN,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,KAAM,OACN,KAAM,OACN,IAAK,OACL,GAAI,WACJ,SAAU,WACV,IAAK,MACL,IAAK,MACL,QAAS,UACT,IAAK,UACL,GAAI,KACJ,KAAM,OACN,GAAI,OACJ,MAAO,QACP,OAAQ,SACR,KAAM,OACN,IAAK,MACL,EAAG,IACH,GAAI,KACJ,OAAQ,KACR,IAAK,MACL,IAAK,MACL,OAAQ,SACR,MAAO,QACP,WAAY,SACZ,OAAQ,SACR,KAAM,OACN,UAAW,OACX,IAAK,MACP,EAMO,SAASC,EAAyBC,EAAsB,CAC7D,MAAMC,EAAaD,EAAK,YAAY,EAAE,KAAK,EAC3C,OAAOF,EAAqBG,CAAU,GAAKD,EAAK,YAAY,CAC9D,CAUO,SAASE,EAAc,CAAE,SAAAC,CAAS,EAAuB,CAC9D,MAAMC,EAAkBL,EAAyBI,CAAQ,EAEzD,OACEP,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,MAAM,OAAO,QAAQ,SACjCO,EAAgB,YAAY,CAC/B,CAEJ",
6
6
  "names": ["React", "Code", "LANGUAGE_DISPLAY_MAP", "formatLanguageForDisplay", "lang", "normalized", "LanguageBadge", "language", "displayLanguage"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-blocks",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
package/src/components/code/CodeBlock.tsx CHANGED
@@ -126,7 +126,6 @@ const CodeCard = memo(function CodeCard({
126
126
  size="2"
127
127
  variant="ghost"
128
128
  color="gray"
129
- highContrast
130
129
  onClick={handleToggle}
131
130
  tooltip={isExpanded ? "Collapse" : "Expand"}
132
131
  aria-label={isExpanded ? "Collapse code" : "Expand code"}
@@ -139,7 +138,6 @@ const CodeCard = memo(function CodeCard({
139
138
  size="2"
140
139
  variant="ghost"
141
140
  color="gray"
142
- highContrast
143
141
  onClick={handleCopy}
144
142
  tooltip={copied ? "Copied!" : "Copy"}
145
143
  aria-label={copied ? "Copied!" : "Copy code"}
package/src/components/code/LanguageBadge.tsx CHANGED
@@ -73,8 +73,8 @@ export function LanguageBadge({ language }: LanguageBadgeProps) {
73
73
  const displayLanguage = formatLanguageForDisplay(language);
74
74
 
75
75
  return (
76
- <Code size="1" color="gray" highContrast>
77
- {displayLanguage}
76
+ <Code size="1" color="gray" variant="ghost">
77
+ {displayLanguage.toLowerCase()}
78
78
  </Code>
79
79
  );
80
80
  }