npm - @kushagradhawan/kookie-blocks - Versions diffs - 0.1.8 → 0.1.10 - Mend

@kushagradhawan/kookie-blocks 0.1.8 → 0.1.10

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

package/dist/cjs/components/code/CodeBlock.d.ts.map CHANGED Viewed

	@@ -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 Viewed

@@ -1,2 +1,2 @@
-"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)}
+"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("./useCodeCard"),T=require("./LanguageBadge");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)}
 //# sourceMappingURL=CodeBlock.js.map

package/dist/cjs/components/code/CodeBlock.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/CodeBlock.tsx"],
-  "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"],
-  "mappings": "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",
-  "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"]
+  "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\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"],
+  "mappings": "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",
+  "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", "shikiOptions", "lightTheme", "darkTheme", "cancelled", "html", "error", "ChildrenCodeSection", "preview", "displayLanguage"]
 }

package/dist/cjs/components/code/LanguageBadge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"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)}
+"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())}
 //# sourceMappingURL=LanguageBadge.js.map

package/dist/cjs/components/code/LanguageBadge.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
-  "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"],
-  "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",
+  "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"],
+  "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",
   "names": ["LanguageBadge_exports", "__export", "LanguageBadge", "formatLanguageForDisplay", "__toCommonJS", "import_react", "import_kookie_ui", "LANGUAGE_DISPLAY_MAP", "lang", "normalized", "language", "displayLanguage", "React"]
 }

package/dist/esm/components/code/CodeBlock.d.ts.map CHANGED Viewed

	@@ -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 Viewed

@@ -1,2 +1,2 @@
-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};
+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"./useCodeCard";import{LanguageBadge as V}from"./LanguageBadge";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};
 //# sourceMappingURL=CodeBlock.js.map

package/dist/esm/components/code/CodeBlock.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/CodeBlock.tsx"],
-  "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"],
-  "mappings": "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",
-  "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"]
+  "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\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"],
+  "mappings": "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",
+  "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"]
 }

package/dist/esm/components/code/LanguageBadge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+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};
 //# sourceMappingURL=LanguageBadge.js.map

package/dist/esm/components/code/LanguageBadge.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
-  "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"],
-  "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",
+  "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"],
+  "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",
   "names": ["React", "Code", "LANGUAGE_DISPLAY_MAP", "formatLanguageForDisplay", "lang", "normalized", "LanguageBadge", "language", "displayLanguage"]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"

package/src/components/code/CodeBlock.tsx CHANGED Viewed

@@ -126,7 +126,6 @@ const CodeCard = memo(function CodeCard({
                   size="2"
                   variant="ghost"
                   color="gray"
-                  highContrast
                   onClick={handleToggle}
                   tooltip={isExpanded ? "Collapse" : "Expand"}
                   aria-label={isExpanded ? "Collapse code" : "Expand code"}
@@ -139,7 +138,6 @@ const CodeCard = memo(function CodeCard({
                   size="2"
                   variant="ghost"
                   color="gray"
-                  highContrast
                   onClick={handleCopy}
                   tooltip={copied ? "Copied!" : "Copy"}
                   aria-label={copied ? "Copied!" : "Copy code"}
@@ -187,7 +185,6 @@ const RuntimeCodeSection = memo(function RuntimeCodeSection({
   shikiConfig,
 }: RuntimeCodeSectionProps) {
   const [highlighted, setHighlighted] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   // Memoize Shiki config to prevent unnecessary re-highlights
   const shikiOptions = useMemo(() => {
@@ -209,19 +206,16 @@ const RuntimeCodeSection = memo(function RuntimeCodeSection({
   useEffect(() => {
     let cancelled = false;
-    setIsLoading(true);
     codeToHtml(code, shikiOptions)
       .then((html) => {
         if (!cancelled) {
           setHighlighted(html);
-          setIsLoading(false);
         }
       })
       .catch((error) => {
         if (!cancelled) {
-          setHighlighted(null);
-          setIsLoading(false);
+          // Keep previous highlighted content on error (stale while revalidate)
           if (process.env.NODE_ENV === "development") {
             console.error("[CodeBlock] Shiki highlighting failed:", error);
           }
@@ -233,6 +227,10 @@ const RuntimeCodeSection = memo(function RuntimeCodeSection({
     };
   }, [code, shikiOptions]);
+  // Only show loading skeleton on initial render (no highlighted content yet)
+  // During updates, keep showing previous highlighted content (stale while revalidate)
+  const isInitialLoading = highlighted === null;
   return (
     <CodeCard
       code={code}
@@ -243,7 +241,7 @@ const RuntimeCodeSection = memo(function RuntimeCodeSection({
       collapsible={collapsible}
       collapsedHeight={collapsedHeight}
       file={file}
-      isLoading={isLoading}
+      isLoading={isInitialLoading}
     >
       {highlighted ? <Box dangerouslySetInnerHTML={{ __html: highlighted }} /> : null}
     </CodeCard>

package/src/components/code/LanguageBadge.tsx CHANGED Viewed

@@ -73,8 +73,8 @@ export function LanguageBadge({ language }: LanguageBadgeProps) {
   const displayLanguage = formatLanguageForDisplay(language);
   return (
-    <Code size="1" color="gray" highContrast>
-      {displayLanguage}
+    <Code size="1" color="gray" variant="ghost">
+      {displayLanguage.toLowerCase()}
     </Code>
   );
 }