@kushagradhawan/kookie-blocks 0.1.4 → 0.1.5

package/components.css

@@ -1,16 +1,21 @@
-/* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+/* Components CSS aggregator for Kookie Blocks */
 
 /* ============================================
    Code Block Component Styles
    ============================================ */
 
-/* Code block wrapper - constrain width in flex containers */
+/* Main docs code block wrapper */
 
-.code-block-wrapper {
-  min-width: 0;
-  max-width: 100%;
+.docs-code-block {
   width: 100%;
+}
+
+/* Code content area - handles expand/collapse */
+
+.code-content {
   overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  position: relative;
 }
 
 /* Code block content (the pre part, below the header) */
@@ -56,14 +61,18 @@
   height: 0 !important;
 }
 
-.code-block-wrapper pre,
-.code-block-wrapper .code-block-content pre {
-  overflow-x: visible; /* Let .code-block-content handle scrolling */
+/* Pre elements inside code content */
+
+.code-content pre,
+.code-block-content pre {
+  overflow-x: visible;
   max-width: 100%;
   min-width: 0;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 /* Ensure Shiki-generated pre elements fill width */
@@ -75,8 +84,8 @@
 
 /* Code elements inside pre */
 
-.code-block-wrapper pre code,
-.code-block-wrapper .code-block-content pre code {
+.code-content pre code,
+.code-block-content pre code {
   font-family: var(--font-mono);
   font-size: var(--font-size-2);
   line-height: 1.75;
@@ -89,8 +98,8 @@
 
 /* Shiki line spans */
 
-.code-block-wrapper pre code .line,
-.code-block-wrapper .code-block-content pre code .line {
+.code-content pre code .line,
+.code-block-content pre code .line {
   display: flex;
   align-items: center;
   gap: 0;
@@ -98,8 +107,8 @@
 
 /* Line numbers */
 
-.code-block-wrapper pre code .line::before,
-.code-block-wrapper .code-block-content pre code .line::before {
+.code-content pre code .line::before,
+.code-block-content pre code .line::before {
   counter-increment: line;
   content: counter(line);
   display: inline-block;
@@ -114,9 +123,41 @@
   margin-right: var(--space-4);
 }
 
+/* Scroll shadow overlay for collapsed state */
+
+.code-scroll-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--color-panel-solid), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1;
+}
+
+.code-scroll-shadow.visible {
+  opacity: 1;
+}
+
+/* Action buttons styling */
+
+.code-action-buttons {
+  flex-shrink: 0;
+}
+
+/* Chevron rotation animation */
+
+.code-chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
 /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
 
-.code-block-wrapper pre.shiki span {
+.code-block-content pre.shiki span,
+.code-content pre.shiki span {
   color: var(--shiki-light) !important;
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
@@ -126,9 +167,12 @@
 
 /* Override with dark theme colors when inside a dark context */
 
-.dark .code-block-wrapper pre.shiki span,
-.dark-theme .code-block-wrapper pre.shiki span,
-[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+.dark .code-block-content pre.shiki span,
+.dark-theme .code-block-content pre.shiki span,
+[data-appearance="dark"] .code-block-content pre.shiki span,
+.dark .code-content pre.shiki span,
+.dark-theme .code-content pre.shiki span,
+[data-appearance="dark"] .code-content pre.shiki span {
   color: var(--shiki-dark) !important;
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);

package/dist/cjs/components/code/CodeBlock.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CodeBlockProps } from "./types";
-export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element | null;
+export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element;
 //# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAM9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAwD9C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,GAChB,EAAE,cAAc,4BA6ChB"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyE,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAmV9C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,GAChB,EAAE,cAAc,qBAyBhB"}

package/dist/cjs/components/code/CodeBlock.js

@@ -1,2 +1,2 @@
-"use strict";var P=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var j=(o,t)=>{for(var e in t)l(o,e,{get:t[e],enumerable:!0})},f=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of h(t))!F.call(o,s)&&s!==e&&l(o,s,{get:()=>t[s],enumerable:!(r=b(t,s))||r.enumerable});return o};var w=(o,t,e)=>(e=o!=null?P(k(o)):{},f(t||!o||!o.__esModule?l(e,"default",{value:o,enumerable:!0}):e,o)),B=o=>f(l({},"__esModule",{value:!0}),o);var T={};j(T,{CodeBlock:()=>S});module.exports=B(T);var n=w(require("react")),a=require("@kushagradhawan/kookie-ui"),u=require("./SyntaxHighlighter"),d=require("./CopyButton"),g=require("./LanguageBadge"),y=require("./PreviewSection");function v(o){if(!o)return"text";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const p=(t.children.props?.className||"").match(/language-([\w-]+)/i);if(p)return p[1]}const r=(t?.className||"").match(/language-([\w-]+)/i);if(r)return r[1]}return"text"}function L(o){if(!o)return"";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const r=t.children.props?.children;if(typeof r=="string")return r}if(typeof t?.children=="string")return t.children}return typeof o=="string"?o:""}function S({children:o,code:t,language:e,preview:r,showCopy:s=!0,showLanguage:m=!0,lightTheme:p,darkTheme:x,background:C,backgroundProps:N}){let c=t,i=e;return o&&!t&&(c=L(o),i=e||v(o)),i||(i="text"),!c&&!o?null:n.default.createElement(a.Flex,{direction:"column",className:"code-block-wrapper",style:{minWidth:0},my:"2"},r&&n.default.createElement(y.PreviewSection,{background:C,backgroundProps:N},r),n.default.createElement(a.Card,{size:"2",variant:"soft"},n.default.createElement(a.Flex,{gap:"2",direction:"column"},n.default.createElement(a.Flex,{align:"start",justify:"between"},m&&n.default.createElement(g.LanguageBadge,{language:i}),s&&c&&n.default.createElement(d.CopyButton,{code:c})),t&&n.default.createElement(u.SyntaxHighlighter,{code:t,language:i,lightTheme:p,darkTheme:x}),o&&!t&&n.default.createElement("div",{className:"code-block-content"},o))))}
+"use strict";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var M=(o,t)=>{for(var r in t)b(o,r,{get:t[r],enumerable:!0})},w=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of B(t))!$.call(o,i)&&i!==r&&b(o,i,{get:()=>t[i],enumerable:!(s=j(t,i))||s.enumerable});return o};var _=(o,t,r)=>(r=o!=null?z(I(o)):{},w(t||!o||!o.__esModule?b(r,"default",{value:o,enumerable:!0}):r,o)),D=o=>w(b({},"__esModule",{value:!0}),o);var q={};M(q,{CodeBlock:()=>W});module.exports=D(q);var e=_(require("react")),n=require("@kushagradhawan/kookie-ui"),v=require("@hugeicons/react"),C=require("@hugeicons/core-free-icons"),H=require("shiki");const m=360,A="one-light",J="one-dark-pro";function G({children:o,background:t="none",backgroundProps:r={}}){const{dotSize:s=24,color:i="var(--gray-10)",backgroundColor:d="var(--gray-2)",height:a,width:l="100%",radius:c="3"}=r;if(t==="none")return e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{justify:"center",align:"center",py:"4"},e.default.createElement(n.Theme,{fontFamily:"sans"},o)));if(t==="dots"){const g={backgroundImage:`radial-gradient(circle, ${i} 1px, transparent 1px)`,borderRadius:`var(--radius-${c})`,backgroundSize:`${s}px ${s}px`,backgroundPosition:"center",backgroundColor:d,width:l,...a&&{height:a}};return e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:g},e.default.createElement(n.Theme,{fontFamily:"sans"},o)))}const p={backgroundImage:`url(${t})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${c})`,width:l,...a&&{height:a}};return e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:p},e.default.createElement(n.Theme,{fontFamily:"sans"},o)))}const O=(0,e.memo)(function({code:t,language:r,showCopy:s=!0,showLanguage:i=!0,lightTheme:d=A,darkTheme:a=J}){const[l,c]=(0,e.useState)(null),[p,g]=(0,e.useState)(!1),[u,h]=(0,e.useState)(m),[y,x]=(0,e.useState)(!1),S=(0,e.useRef)(null),f=(0,e.useRef)(null),T=u>m;(0,e.useEffect)(()=>{let P=!1;return(0,H.codeToHtml)(t,{lang:r,themes:{light:d,dark:a},defaultColor:!1}).then(E=>{P||c(E)}).catch(()=>{P||c(null)}),()=>{P=!0}},[t,r,d,a]),(0,e.useEffect)(()=>{S.current&&h(S.current.scrollHeight)},[l]),(0,e.useEffect)(()=>()=>{f.current&&clearTimeout(f.current)},[]);const N=(0,e.useCallback)(async()=>{if(t.trim())try{await navigator.clipboard.writeText(t),x(!0),f.current&&clearTimeout(f.current),f.current=setTimeout(()=>x(!1),2e3)}catch{}},[t]),L=r==="text"?"plaintext":r,F={maxHeight:p?`${u}px`:`${m}px`};return e.default.createElement(n.Box,{position:"relative"},e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{direction:"column",gap:"3"},e.default.createElement(n.Flex,{gap:"2",justify:"between",align:"start"},i&&e.default.createElement(n.Code,{size:"1",color:"gray",highContrast:!0},L),e.default.createElement(n.Flex,{align:"center",gap:"2",className:"code-action-buttons"},s&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",onClick:N,tooltip:y?"Copied!":"Copy","aria-label":y?"Copied!":"Copy code"},e.default.createElement(v.HugeiconsIcon,{icon:y?C.Tick01Icon:C.Copy01Icon})," Copy"))),e.default.createElement(n.Box,{ref:S,style:F,className:"code-content"},l?e.default.createElement(n.Box,{className:"code-block-content",width:"100%",style:{minWidth:0},dangerouslySetInnerHTML:{__html:l}}):e.default.createElement("pre",{className:"code-block-content"},e.default.createElement(n.Code,{size:"3"},t))),T&&!p&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))});function U(o){if(!o)return"";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const s=t.children.props?.children;if(typeof s=="string")return s}if(typeof t?.children=="string")return t.children}return typeof o=="string"?o:""}function k(o){if(!o)return"text";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const a=(t.children.props?.className||"").match(/language-([\w-]+)/i);if(a)return a[1]}const s=(t?.className||"").match(/language-([\w-]+)/i);if(s)return s[1]}return"text"}function X(o){return{tsx:"TSX",ts:"TS",jsx:"JSX",js:"JS",javascript:"JS",typescript:"TS",css:"CSS",html:"HTML",json:"JSON",bash:"SH",sh:"SH",shell:"SH",text:"plaintext"}[o.toLowerCase()]||o.toLowerCase()}const K=(0,e.memo)(function({children:t,showCopy:r=!0,showLanguage:s=!0}){const[i,d]=(0,e.useState)(!1),[a,l]=(0,e.useState)(m),[c,p]=(0,e.useState)(!1),g=(0,e.useRef)(null),u=(0,e.useRef)(null),h=U(t),y=k(t),x=X(y),S=a>m;(0,e.useEffect)(()=>{g.current&&l(g.current.scrollHeight)},[t]),(0,e.useEffect)(()=>()=>{u.current&&clearTimeout(u.current)},[]);const f=(0,e.useCallback)(async()=>{if(h.trim())try{await navigator.clipboard.writeText(h),p(!0),u.current&&clearTimeout(u.current),u.current=setTimeout(()=>p(!1),2e3)}catch{}},[h]),T={maxHeight:i?`${a}px`:`${m}px`};return e.default.createElement(n.Box,{position:"relative"},e.default.createElement(n.Card,{size:"1",variant:"soft"},e.default.createElement(n.Flex,{direction:"column",gap:"3"},e.default.createElement(n.Flex,{gap:"2",justify:"between",align:"start"},s&&e.default.createElement(n.Code,{size:"1",color:"gray",highContrast:!0},x),e.default.createElement(n.Flex,{align:"center",gap:"2",className:"code-action-buttons"},r&&e.default.createElement(n.Button,{size:"2",variant:"ghost",color:"gray",onClick:f,tooltip:c?"Copied!":"Copy","aria-label":c?"Copied!":"Copy code"},e.default.createElement(v.HugeiconsIcon,{icon:c?C.Tick01Icon:C.Copy01Icon})," Copy"))),e.default.createElement(n.Box,{ref:g,style:T,className:"code-content"},e.default.createElement("div",{className:"code-block-content"},t)),S&&!i&&e.default.createElement(n.Box,{className:"code-scroll-shadow visible"}))))});function W({children:o,code:t,language:r,preview:s,showCopy:i=!0,showLanguage:d=!0,lightTheme:a,darkTheme:l,background:c,backgroundProps:p}){const g=t||o&&e.default.Children.count(o)>0,u=r||k(o)||"text";return 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:c,backgroundProps:p},s),t&&e.default.createElement(O,{code:t,language:u,showCopy:i,showLanguage:d,lightTheme:a,darkTheme:l}),o&&!t&&e.default.createElement(K,{showCopy:i,showLanguage:d},o)))}
 //# sourceMappingURL=CodeBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/CodeBlock.tsx"],
-  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex } from \"@kushagradhawan/kookie-ui\";\nimport { SyntaxHighlighter } from \"./SyntaxHighlighter\";\nimport { CopyButton } from \"./CopyButton\";\nimport { LanguageBadge } from \"./LanguageBadge\";\nimport { PreviewSection } from \"./PreviewSection\";\nimport type { CodeBlockProps } from \"./types\";\n\nfunction extractLanguageFromChildren(children?: ReactNode): string {\n  if (!children) return \"text\";\n\n  // Try to extract language from pre > code className\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n\n    // If children is a <pre><code className=\"language-xxx\">\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const className = codeProps?.className || \"\";\n      const match = className.match(/language-([\\w-]+)/i);\n      if (match) return match[1];\n    }\n\n    // Direct className on children\n    const className = childProps?.className || \"\";\n    const match = className.match(/language-([\\w-]+)/i);\n    if (match) return match[1];\n  }\n\n  return \"text\";\n}\n\nfunction extractCodeFromChildren(children?: ReactNode): string {\n  if (!children) return \"\";\n\n  // Try to extract text from pre > code structure\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n\n    // If children is <pre><code>...</code></pre>\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const codeChildren = codeProps?.children;\n\n      if (typeof codeChildren === \"string\") {\n        return codeChildren;\n      }\n    }\n\n    // Direct text content\n    if (typeof childProps?.children === \"string\") {\n      return childProps.children;\n    }\n  }\n\n  if (typeof children === \"string\") {\n    return children;\n  }\n\n  return \"\";\n}\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme,\n  darkTheme,\n  background,\n  backgroundProps,\n}: CodeBlockProps) {\n  // Determine the code and language to display\n  let displayCode = code;\n  let displayLanguage = language;\n\n  // If children are provided (pre-highlighted from MDX), extract code and language\n  if (children && !code) {\n    displayCode = extractCodeFromChildren(children);\n    displayLanguage = language || extractLanguageFromChildren(children);\n  }\n\n  // Default language\n  if (!displayLanguage) {\n    displayLanguage = \"text\";\n  }\n\n  // If no code to display, render nothing\n  if (!displayCode && !children) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" className=\"code-block-wrapper\" style={{ minWidth: 0 }} my=\"2\">\n      {preview && (\n        <PreviewSection background={background} backgroundProps={backgroundProps}>\n          {preview}\n        </PreviewSection>\n      )}\n\n      <Card size=\"2\" variant=\"soft\">\n        <Flex gap=\"2\" direction=\"column\">\n          <Flex align=\"start\" justify=\"between\">\n            {showLanguage && <LanguageBadge language={displayLanguage} />}\n            {showCopy && displayCode && <CopyButton code={displayCode} />}\n          </Flex>\n\n          {/* If we have runtime code, use SyntaxHighlighter */}\n          {code && <SyntaxHighlighter code={code} language={displayLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />}\n\n          {/* If we have pre-highlighted children from MDX, render them */}\n          {children && !code && <div className=\"code-block-content\">{children}</div>}\n        </Flex>\n      </Card>\n    </Flex>\n  );\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBACtCC,EAA2B,qCAC3BC,EAAkC,+BAClCC,EAA2B,wBAC3BC,EAA8B,2BAC9BC,EAA+B,4BAG/B,SAASC,EAA4BC,EAA8B,CACjE,GAAI,CAACA,EAAU,MAAO,OAGtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMC,EAAcD,EAAiB,MAGrC,GAAIC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAGnE,MAAMC,GAFaD,EAAW,SAAiB,OAClB,WAAa,IAClB,MAAM,oBAAoB,EAClD,GAAIC,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAIA,MAAMA,GADYD,GAAY,WAAa,IACnB,MAAM,oBAAoB,EAClD,GAAIC,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAEA,MAAO,MACT,CAEA,SAASC,EAAwBH,EAA8B,CAC7D,GAAI,CAACA,EAAU,MAAO,GAGtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMC,EAAcD,EAAiB,MAGrC,GAAIC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAEnE,MAAMG,EADaH,EAAW,SAAiB,OACf,SAEhC,GAAI,OAAOG,GAAiB,SAC1B,OAAOA,CAEX,CAGA,GAAI,OAAOH,GAAY,UAAa,SAClC,OAAOA,EAAW,QAEtB,CAEA,OAAI,OAAOD,GAAa,SACfA,EAGF,EACT,CAEO,SAAST,EAAU,CACxB,SAAAS,EACA,KAAAK,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,gBAAAC,CACF,EAAmB,CAEjB,IAAIC,EAAcT,EACdU,EAAkBT,EActB,OAXIN,GAAY,CAACK,IACfS,EAAcX,EAAwBH,CAAQ,EAC9Ce,EAAkBT,GAAYP,EAA4BC,CAAQ,GAI/De,IACHA,EAAkB,QAIhB,CAACD,GAAe,CAACd,EACZ,KAIP,EAAAgB,QAAA,cAAC,QAAK,UAAU,SAAS,UAAU,qBAAqB,MAAO,CAAE,SAAU,CAAE,EAAG,GAAG,KAChFT,GACC,EAAAS,QAAA,cAAC,kBAAe,WAAYJ,EAAY,gBAAiBC,GACtDN,CACH,EAGF,EAAAS,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,IAAI,IAAI,UAAU,UACtB,EAAAA,QAAA,cAAC,QAAK,MAAM,QAAQ,QAAQ,WACzBP,GAAgB,EAAAO,QAAA,cAAC,iBAAc,SAAUD,EAAiB,EAC1DP,GAAYM,GAAe,EAAAE,QAAA,cAAC,cAAW,KAAMF,EAAa,CAC7D,EAGCT,GAAQ,EAAAW,QAAA,cAAC,qBAAkB,KAAMX,EAAM,SAAUU,EAAiB,WAAYL,EAAY,UAAWC,EAAW,EAGhHX,GAAY,CAACK,GAAQ,EAAAW,QAAA,cAAC,OAAI,UAAU,sBAAsBhB,CAAS,CACtE,CACF,CACF,CAEJ",
-  "names": ["CodeBlock_exports", "__export", "CodeBlock", "__toCommonJS", "import_react", "import_kookie_ui", "import_SyntaxHighlighter", "import_CopyButton", "import_LanguageBadge", "import_PreviewSection", "extractLanguageFromChildren", "children", "childProps", "match", "extractCodeFromChildren", "codeChildren", "code", "language", "preview", "showCopy", "showLanguage", "lightTheme", "darkTheme", "background", "backgroundProps", "displayCode", "displayLanguage", "React"]
+  "sourcesContent": ["import React, { useState, useRef, useEffect, useCallback, memo, type ReactNode } from \"react\";\nimport { Box, Card, Flex, Button, Code, Theme } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml } from \"shiki\";\nimport type { CodeBlockProps } from \"./types\";\n\nconst COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\n// ============================================\n// Preview Section\n// ============================================\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\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  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  const imageStyle: React.CSSProperties = {\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\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n\n// ============================================\n// Code Section (for runtime highlighting)\n// ============================================\n\ninterface CodeSectionProps {\n  code: string;\n  language: string;\n  showCopy?: boolean;\n  showLanguage?: boolean;\n  lightTheme?: string;\n  darkTheme?: string;\n}\n\nconst CodeSection = memo(function CodeSection({\n  code,\n  language,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme = DEFAULT_LIGHT_THEME,\n  darkTheme = DEFAULT_DARK_THEME,\n}: CodeSectionProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);\n  const [copied, setCopied] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;\n\n  useEffect(() => {\n    let cancelled = false;\n    codeToHtml(code, {\n      lang: language,\n      themes: { light: lightTheme, dark: darkTheme },\n      defaultColor: false,\n    })\n      .then((html) => {\n        if (!cancelled) setHighlighted(html);\n      })\n      .catch(() => {\n        if (!cancelled) setHighlighted(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, lightTheme, darkTheme]);\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  }, [highlighted]);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  const displayLanguage = language === \"text\" ? \"plaintext\" : language;\n\n  const contentStyle: React.CSSProperties = {\n    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,\n  };\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\" gap=\"3\">\n          <Flex gap=\"2\" justify=\"between\" align=\"start\">\n            {showLanguage && (\n              <Code size=\"1\" color=\"gray\" highContrast>\n                {displayLanguage}\n              </Code>\n            )}\n            <Flex align=\"center\" gap=\"2\" className=\"code-action-buttons\">\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} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={contentStyle} className=\"code-content\">\n            {highlighted ? (\n              <Box className=\"code-block-content\" width=\"100%\" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />\n            ) : (\n              <pre className=\"code-block-content\">\n                <Code size=\"3\">{code}</Code>\n              </pre>\n            )}\n          </Box>\n\n          {shouldShowToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\n// ============================================\n// Children Code Section (for pre-highlighted MDX)\n// ============================================\n\ninterface ChildrenCodeSectionProps {\n  children: ReactNode;\n  showCopy?: boolean;\n  showLanguage?: boolean;\n}\n\nfunction extractCodeFromChildren(children?: ReactNode): string {\n  if (!children) return \"\";\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const codeChildren = codeProps?.children;\n      if (typeof codeChildren === \"string\") return codeChildren;\n    }\n    if (typeof childProps?.children === \"string\") return childProps.children;\n  }\n  if (typeof children === \"string\") return children;\n  return \"\";\n}\n\nfunction extractLanguageFromChildren(children?: ReactNode): string {\n  if (!children) return \"text\";\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const className = codeProps?.className || \"\";\n      const match = className.match(/language-([\\w-]+)/i);\n      if (match) return match[1];\n    }\n    const className = childProps?.className || \"\";\n    const match = className.match(/language-([\\w-]+)/i);\n    if (match) return match[1];\n  }\n  return \"text\";\n}\n\nfunction formatLanguageLabel(lang: string): string {\n  const aliasMap: Record<string, string> = {\n    tsx: \"TSX\",\n    ts: \"TS\",\n    jsx: \"JSX\",\n    js: \"JS\",\n    javascript: \"JS\",\n    typescript: \"TS\",\n    css: \"CSS\",\n    html: \"HTML\",\n    json: \"JSON\",\n    bash: \"SH\",\n    sh: \"SH\",\n    shell: \"SH\",\n    text: \"plaintext\",\n  };\n  return aliasMap[lang.toLowerCase()] || lang.toLowerCase();\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({ children, showCopy = true, showLanguage = true }: ChildrenCodeSectionProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);\n  const [copied, setCopied] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const code = extractCodeFromChildren(children);\n  const language = extractLanguageFromChildren(children);\n  const displayLanguage = formatLanguageLabel(language);\n\n  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  }, [children]);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  const contentStyle: React.CSSProperties = {\n    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,\n  };\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\" gap=\"3\">\n          <Flex gap=\"2\" justify=\"between\" align=\"start\">\n            {showLanguage && (\n              <Code size=\"1\" color=\"gray\" highContrast>\n                {displayLanguage}\n              </Code>\n            )}\n            <Flex align=\"center\" gap=\"2\" className=\"code-action-buttons\">\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} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={contentStyle} className=\"code-content\">\n            <div className=\"code-block-content\">{children}</div>\n          </Box>\n\n          {shouldShowToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\n// ============================================\n// Main CodeBlock Component\n// ============================================\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme,\n  darkTheme,\n  background,\n  backgroundProps,\n}: CodeBlockProps) {\n  const hasCode = code || (children && React.Children.count(children) > 0);\n  const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n  return (\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          <CodeSection code={code} language={displayLanguage} showCopy={showCopy} showLanguage={showLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />\n        )}\n\n        {children && !code && (\n          <ChildrenCodeSection showCopy={showCopy} showLanguage={showLanguage}>\n            {children}\n          </ChildrenCodeSection>\n        )}\n      </Flex>\n    </Box>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["CodeBlock_exports", "__export", "CodeBlock", "__toCommonJS", "import_react", "import_kookie_ui", "import_core_free_icons", "import_shiki", "COLLAPSED_HEIGHT", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "React", "dotsStyle", "imageStyle", "CodeSection", "code", "language", "showCopy", "showLanguage", "lightTheme", "darkTheme", "highlighted", "setHighlighted", "isExpanded", "setIsExpanded", "contentHeight", "setContentHeight", "copied", "setCopied", "contentRef", "resetTimeoutRef", "shouldShowToggle", "cancelled", "html", "handleCopy", "displayLanguage", "contentStyle", "extractCodeFromChildren", "childProps", "codeChildren", "extractLanguageFromChildren", "match", "formatLanguageLabel", "lang", "ChildrenCodeSection", "preview", "hasCode"]
 }

package/dist/cjs/components/code/PreviewSection.js

@@ -1,2 +1,2 @@
-"use strict";var f=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},u=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of S(e))!v.call(r,i)&&i!==t&&s(r,i,{get:()=>e[i],enumerable:!(a=m(e,i))||a.enumerable});return r};var P=(r,e,t)=>(t=r!=null?f(b(r)):{},u(e||!r||!r.__esModule?s(t,"default",{value:r,enumerable:!0}):t,r)),h=r=>u(s({},"__esModule",{value:!0}),r);var C={};x(C,{PreviewSection:()=>k});module.exports=h(C);var o=P(require("react")),n=require("@kushagradhawan/kookie-ui");function k({children:r,background:e="none",backgroundProps:t={}}){const{dotSize:a=24,color:i="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:d="300px",width:g="100%",radius:c="3"}=t;if(e==="none")return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4"},o.default.createElement(n.Theme,{fontFamily:"sans"},r)));if(e==="dots"){const y={backgroundImage:`radial-gradient(circle, ${i} 1px, transparent 1px)`,borderRadius:`var(--radius-${c})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:l,height:d,width:g};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:y},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}const p={backgroundImage:`url(${e})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${c})`,height:d,width:g};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:p},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}
+"use strict";var f=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},u=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of S(e))!v.call(r,i)&&i!==t&&d(r,i,{get:()=>e[i],enumerable:!(a=m(e,i))||a.enumerable});return r};var h=(r,e,t)=>(t=r!=null?f(b(r)):{},u(e||!r||!r.__esModule?d(t,"default",{value:r,enumerable:!0}):t,r)),k=r=>u(d({},"__esModule",{value:!0}),r);var C={};P(C,{PreviewSection:()=>x});module.exports=k(C);var o=h(require("react")),n=require("@kushagradhawan/kookie-ui");function x({children:r,background:e="none",backgroundProps:t={}}){const{dotSize:a=24,color:i="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:s,width:g="100%",radius:c="3"}=t;if(e==="none")return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4"},o.default.createElement(n.Theme,{fontFamily:"sans"},r)));if(e==="dots"){const y={backgroundImage:`radial-gradient(circle, ${i} 1px, transparent 1px)`,borderRadius:`var(--radius-${c})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:l,width:g,...s&&{height:s}};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:y},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}const p={backgroundImage:`url(${e})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${c})`,width:g,...s&&{height:s}};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:p},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}
 //# sourceMappingURL=PreviewSection.js.map

package/dist/cjs/components/code/PreviewSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/PreviewSection.tsx"],
-  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\n}\n\nexport function PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n  const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height = \"300px\", width = \"100%\", radius = \"3\" } = backgroundProps;\n\n  // Render with no background (default card styling)\n  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with dots pattern background\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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      height,\n      width,\n    };\n\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with custom image background\n  const imageStyle: React.CSSProperties = {\n    backgroundImage: `url(${background})`,\n    backgroundSize: \"cover\",\n    backgroundPosition: \"center\",\n    backgroundRepeat: \"no-repeat\",\n    borderRadius: `var(--radius-${radius})`,\n    height,\n    width,\n  };\n\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBACtCC,EAAkC,qCAe3B,SAASH,EAAe,CAAE,SAAAI,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAS,QAAS,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAGtI,GAAID,IAAe,OACjB,OACE,EAAAQ,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvC,EAAAA,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMS,EAAiC,CACrC,gBAAiB,2BAA2BN,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,OAAAC,EACA,MAAAC,CACF,EAEA,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOC,GAClD,EAAAD,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMW,EAAkC,CACtC,gBAAiB,OAAOV,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,OAAAF,EACA,MAAAC,CACF,EAEA,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOE,GAClD,EAAAF,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ",
+  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\n}\n\nexport function 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  // Render with no background (default card styling)\n  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with dots pattern background\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with custom image background\n  const imageStyle: React.CSSProperties = {\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\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBACtCC,EAAkC,qCAe3B,SAASH,EAAe,CAAE,SAAAI,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAG5H,GAAID,IAAe,OACjB,OACE,EAAAQ,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvC,EAAAA,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMS,EAAiC,CACrC,gBAAiB,2BAA2BN,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,MAAAE,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,EAEA,OACE,EAAAG,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOC,GAClD,EAAAD,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMW,EAAkC,CACtC,gBAAiB,OAAOV,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,MAAAD,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,EAEA,OACE,EAAAG,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOE,GAClD,EAAAF,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ",
   "names": ["PreviewSection_exports", "__export", "PreviewSection", "__toCommonJS", "import_react", "import_kookie_ui", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "React", "dotsStyle", "imageStyle"]
 }

package/dist/esm/components/code/CodeBlock.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CodeBlockProps } from "./types";
-export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element | null;
+export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element;
 //# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAM9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAwD9C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,GAChB,EAAE,cAAc,4BA6ChB"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyE,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAmV9C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAe,EACf,YAAmB,EACnB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,GAChB,EAAE,cAAc,qBAyBhB"}

package/dist/esm/components/code/CodeBlock.js

@@ -1,2 +1,2 @@
-import e from"react";import{Card as d,Flex as p}from"@kushagradhawan/kookie-ui";import{SyntaxHighlighter as g}from"./SyntaxHighlighter";import{CopyButton as y}from"./CopyButton";import{LanguageBadge as x}from"./LanguageBadge";import{PreviewSection as C}from"./PreviewSection";function N(o){if(!o)return"text";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const a=(t.children.props?.className||"").match(/language-([\w-]+)/i);if(a)return a[1]}const r=(t?.className||"").match(/language-([\w-]+)/i);if(r)return r[1]}return"text"}function P(o){if(!o)return"";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const r=t.children.props?.children;if(typeof r=="string")return r}if(typeof t?.children=="string")return t.children}return typeof o=="string"?o:""}function B({children:o,code:t,language:s,preview:r,showCopy:c=!0,showLanguage:l=!0,lightTheme:a,darkTheme:m,background:f,backgroundProps:u}){let i=t,n=s;return o&&!t&&(i=P(o),n=s||N(o)),n||(n="text"),!i&&!o?null:e.createElement(p,{direction:"column",className:"code-block-wrapper",style:{minWidth:0},my:"2"},r&&e.createElement(C,{background:f,backgroundProps:u},r),e.createElement(d,{size:"2",variant:"soft"},e.createElement(p,{gap:"2",direction:"column"},e.createElement(p,{align:"start",justify:"between"},l&&e.createElement(x,{language:n}),c&&i&&e.createElement(y,{code:i})),t&&e.createElement(g,{code:t,language:n,lightTheme:a,darkTheme:m}),o&&!t&&e.createElement("div",{className:"code-block-content"},o))))}export{B as CodeBlock};
+import e,{useState as C,useRef as v,useEffect as b,useCallback as L,memo as F}from"react";import{Box as g,Card as T,Flex as u,Button as E,Code as H,Theme as N}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as z}from"@hugeicons/react";import{Copy01Icon as j,Tick01Icon as B}from"@hugeicons/core-free-icons";import{codeToHtml as A}from"shiki";const h=360,J="one-light",G="one-dark-pro";function O({children:o,background:t="none",backgroundProps:s={}}){const{dotSize:n=24,color:a="var(--gray-10)",backgroundColor:d="var(--gray-2)",height:r,width:c="100%",radius:i="3"}=s;if(t==="none")return e.createElement(T,{size:"1",variant:"soft"},e.createElement(u,{justify:"center",align:"center",py:"4"},e.createElement(N,{fontFamily:"sans"},o)));if(t==="dots"){const f={backgroundImage:`radial-gradient(circle, ${a} 1px, transparent 1px)`,borderRadius:`var(--radius-${i})`,backgroundSize:`${n}px ${n}px`,backgroundPosition:"center",backgroundColor:d,width:c,...r&&{height:r}};return e.createElement(T,{size:"1",variant:"soft"},e.createElement(u,{justify:"center",align:"center",py:"4",style:f},e.createElement(N,{fontFamily:"sans"},o)))}const p={backgroundImage:`url(${t})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${i})`,width:c,...r&&{height:r}};return e.createElement(T,{size:"1",variant:"soft"},e.createElement(u,{justify:"center",align:"center",py:"4",style:p},e.createElement(N,{fontFamily:"sans"},o)))}const U=F(function({code:t,language:s,showCopy:n=!0,showLanguage:a=!0,lightTheme:d=J,darkTheme:r=G}){const[c,i]=C(null),[p,f]=C(!1),[l,y]=C(h),[S,P]=C(!1),x=v(null),m=v(null),w=l>h;b(()=>{let k=!1;return A(t,{lang:s,themes:{light:d,dark:r},defaultColor:!1}).then(D=>{k||i(D)}).catch(()=>{k||i(null)}),()=>{k=!0}},[t,s,d,r]),b(()=>{x.current&&y(x.current.scrollHeight)},[c]),b(()=>()=>{m.current&&clearTimeout(m.current)},[]);const $=L(async()=>{if(t.trim())try{await navigator.clipboard.writeText(t),P(!0),m.current&&clearTimeout(m.current),m.current=setTimeout(()=>P(!1),2e3)}catch{}},[t]),M=s==="text"?"plaintext":s,_={maxHeight:p?`${l}px`:`${h}px`};return e.createElement(g,{position:"relative"},e.createElement(T,{size:"1",variant:"soft"},e.createElement(u,{direction:"column",gap:"3"},e.createElement(u,{gap:"2",justify:"between",align:"start"},a&&e.createElement(H,{size:"1",color:"gray",highContrast:!0},M),e.createElement(u,{align:"center",gap:"2",className:"code-action-buttons"},n&&e.createElement(E,{size:"2",variant:"ghost",color:"gray",onClick:$,tooltip:S?"Copied!":"Copy","aria-label":S?"Copied!":"Copy code"},e.createElement(z,{icon:S?B:j})," Copy"))),e.createElement(g,{ref:x,style:_,className:"code-content"},c?e.createElement(g,{className:"code-block-content",width:"100%",style:{minWidth:0},dangerouslySetInnerHTML:{__html:c}}):e.createElement("pre",{className:"code-block-content"},e.createElement(H,{size:"3"},t))),w&&!p&&e.createElement(g,{className:"code-scroll-shadow visible"}))))});function X(o){if(!o)return"";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const n=t.children.props?.children;if(typeof n=="string")return n}if(typeof t?.children=="string")return t.children}return typeof o=="string"?o:""}function I(o){if(!o)return"text";if(typeof o=="object"&&o!==null&&"props"in o){const t=o.props;if(t?.children&&typeof t.children=="object"){const r=(t.children.props?.className||"").match(/language-([\w-]+)/i);if(r)return r[1]}const n=(t?.className||"").match(/language-([\w-]+)/i);if(n)return n[1]}return"text"}function K(o){return{tsx:"TSX",ts:"TS",jsx:"JSX",js:"JS",javascript:"JS",typescript:"TS",css:"CSS",html:"HTML",json:"JSON",bash:"SH",sh:"SH",shell:"SH",text:"plaintext"}[o.toLowerCase()]||o.toLowerCase()}const W=F(function({children:t,showCopy:s=!0,showLanguage:n=!0}){const[a,d]=C(!1),[r,c]=C(h),[i,p]=C(!1),f=v(null),l=v(null),y=X(t),S=I(t),P=K(S),x=r>h;b(()=>{f.current&&c(f.current.scrollHeight)},[t]),b(()=>()=>{l.current&&clearTimeout(l.current)},[]);const m=L(async()=>{if(y.trim())try{await navigator.clipboard.writeText(y),p(!0),l.current&&clearTimeout(l.current),l.current=setTimeout(()=>p(!1),2e3)}catch{}},[y]),w={maxHeight:a?`${r}px`:`${h}px`};return e.createElement(g,{position:"relative"},e.createElement(T,{size:"1",variant:"soft"},e.createElement(u,{direction:"column",gap:"3"},e.createElement(u,{gap:"2",justify:"between",align:"start"},n&&e.createElement(H,{size:"1",color:"gray",highContrast:!0},P),e.createElement(u,{align:"center",gap:"2",className:"code-action-buttons"},s&&e.createElement(E,{size:"2",variant:"ghost",color:"gray",onClick:m,tooltip:i?"Copied!":"Copy","aria-label":i?"Copied!":"Copy code"},e.createElement(z,{icon:i?B:j})," Copy"))),e.createElement(g,{ref:f,style:w,className:"code-content"},e.createElement("div",{className:"code-block-content"},t)),x&&!a&&e.createElement(g,{className:"code-scroll-shadow visible"}))))});function R({children:o,code:t,language:s,preview:n,showCopy:a=!0,showLanguage:d=!0,lightTheme:r,darkTheme:c,background:i,backgroundProps:p}){const f=t||o&&e.Children.count(o)>0,l=s||I(o)||"text";return e.createElement(g,{className:"docs-code-block",mt:"6",mb:"8"},e.createElement(u,{direction:"column",gap:"2"},n&&e.createElement(O,{background:i,backgroundProps:p},n),t&&e.createElement(U,{code:t,language:l,showCopy:a,showLanguage:d,lightTheme:r,darkTheme:c}),o&&!t&&e.createElement(W,{showCopy:a,showLanguage:d},o)))}export{R as CodeBlock};
 //# sourceMappingURL=CodeBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/CodeBlock.tsx"],
-  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex } from \"@kushagradhawan/kookie-ui\";\nimport { SyntaxHighlighter } from \"./SyntaxHighlighter\";\nimport { CopyButton } from \"./CopyButton\";\nimport { LanguageBadge } from \"./LanguageBadge\";\nimport { PreviewSection } from \"./PreviewSection\";\nimport type { CodeBlockProps } from \"./types\";\n\nfunction extractLanguageFromChildren(children?: ReactNode): string {\n  if (!children) return \"text\";\n\n  // Try to extract language from pre > code className\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n\n    // If children is a <pre><code className=\"language-xxx\">\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const className = codeProps?.className || \"\";\n      const match = className.match(/language-([\\w-]+)/i);\n      if (match) return match[1];\n    }\n\n    // Direct className on children\n    const className = childProps?.className || \"\";\n    const match = className.match(/language-([\\w-]+)/i);\n    if (match) return match[1];\n  }\n\n  return \"text\";\n}\n\nfunction extractCodeFromChildren(children?: ReactNode): string {\n  if (!children) return \"\";\n\n  // Try to extract text from pre > code structure\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n\n    // If children is <pre><code>...</code></pre>\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const codeChildren = codeProps?.children;\n\n      if (typeof codeChildren === \"string\") {\n        return codeChildren;\n      }\n    }\n\n    // Direct text content\n    if (typeof childProps?.children === \"string\") {\n      return childProps.children;\n    }\n  }\n\n  if (typeof children === \"string\") {\n    return children;\n  }\n\n  return \"\";\n}\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme,\n  darkTheme,\n  background,\n  backgroundProps,\n}: CodeBlockProps) {\n  // Determine the code and language to display\n  let displayCode = code;\n  let displayLanguage = language;\n\n  // If children are provided (pre-highlighted from MDX), extract code and language\n  if (children && !code) {\n    displayCode = extractCodeFromChildren(children);\n    displayLanguage = language || extractLanguageFromChildren(children);\n  }\n\n  // Default language\n  if (!displayLanguage) {\n    displayLanguage = \"text\";\n  }\n\n  // If no code to display, render nothing\n  if (!displayCode && !children) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" className=\"code-block-wrapper\" style={{ minWidth: 0 }} my=\"2\">\n      {preview && (\n        <PreviewSection background={background} backgroundProps={backgroundProps}>\n          {preview}\n        </PreviewSection>\n      )}\n\n      <Card size=\"2\" variant=\"soft\">\n        <Flex gap=\"2\" direction=\"column\">\n          <Flex align=\"start\" justify=\"between\">\n            {showLanguage && <LanguageBadge language={displayLanguage} />}\n            {showCopy && displayCode && <CopyButton code={displayCode} />}\n          </Flex>\n\n          {/* If we have runtime code, use SyntaxHighlighter */}\n          {code && <SyntaxHighlighter code={code} language={displayLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />}\n\n          {/* If we have pre-highlighted children from MDX, render them */}\n          {children && !code && <div className=\"code-block-content\">{children}</div>}\n        </Flex>\n      </Card>\n    </Flex>\n  );\n}\n"],
-  "mappings": "AAAA,OAAOA,MAA+B,QACtC,OAAS,QAAAC,EAAM,QAAAC,MAAY,4BAC3B,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,cAAAC,MAAkB,eAC3B,OAAS,iBAAAC,MAAqB,kBAC9B,OAAS,kBAAAC,MAAsB,mBAG/B,SAASC,EAA4BC,EAA8B,CACjE,GAAI,CAACA,EAAU,MAAO,OAGtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMC,EAAcD,EAAiB,MAGrC,GAAIC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAGnE,MAAMC,GAFaD,EAAW,SAAiB,OAClB,WAAa,IAClB,MAAM,oBAAoB,EAClD,GAAIC,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAIA,MAAMA,GADYD,GAAY,WAAa,IACnB,MAAM,oBAAoB,EAClD,GAAIC,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAEA,MAAO,MACT,CAEA,SAASC,EAAwBH,EAA8B,CAC7D,GAAI,CAACA,EAAU,MAAO,GAGtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMC,EAAcD,EAAiB,MAGrC,GAAIC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAEnE,MAAMG,EADaH,EAAW,SAAiB,OACf,SAEhC,GAAI,OAAOG,GAAiB,SAC1B,OAAOA,CAEX,CAGA,GAAI,OAAOH,GAAY,UAAa,SAClC,OAAOA,EAAW,QAEtB,CAEA,OAAI,OAAOD,GAAa,SACfA,EAGF,EACT,CAEO,SAASK,EAAU,CACxB,SAAAL,EACA,KAAAM,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,gBAAAC,CACF,EAAmB,CAEjB,IAAIC,EAAcT,EACdU,EAAkBT,EActB,OAXIP,GAAY,CAACM,IACfS,EAAcZ,EAAwBH,CAAQ,EAC9CgB,EAAkBT,GAAYR,EAA4BC,CAAQ,GAI/DgB,IACHA,EAAkB,QAIhB,CAACD,GAAe,CAACf,EACZ,KAIPR,EAAA,cAACE,EAAA,CAAK,UAAU,SAAS,UAAU,qBAAqB,MAAO,CAAE,SAAU,CAAE,EAAG,GAAG,KAChFc,GACChB,EAAA,cAACM,EAAA,CAAe,WAAYe,EAAY,gBAAiBC,GACtDN,CACH,EAGFhB,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,IAAI,IAAI,UAAU,UACtBF,EAAA,cAACE,EAAA,CAAK,MAAM,QAAQ,QAAQ,WACzBgB,GAAgBlB,EAAA,cAACK,EAAA,CAAc,SAAUmB,EAAiB,EAC1DP,GAAYM,GAAevB,EAAA,cAACI,EAAA,CAAW,KAAMmB,EAAa,CAC7D,EAGCT,GAAQd,EAAA,cAACG,EAAA,CAAkB,KAAMW,EAAM,SAAUU,EAAiB,WAAYL,EAAY,UAAWC,EAAW,EAGhHZ,GAAY,CAACM,GAAQd,EAAA,cAAC,OAAI,UAAU,sBAAsBQ,CAAS,CACtE,CACF,CACF,CAEJ",
-  "names": ["React", "Card", "Flex", "SyntaxHighlighter", "CopyButton", "LanguageBadge", "PreviewSection", "extractLanguageFromChildren", "children", "childProps", "match", "extractCodeFromChildren", "codeChildren", "CodeBlock", "code", "language", "preview", "showCopy", "showLanguage", "lightTheme", "darkTheme", "background", "backgroundProps", "displayCode", "displayLanguage"]
+  "sourcesContent": ["import React, { useState, useRef, useEffect, useCallback, memo, type ReactNode } from \"react\";\nimport { Box, Card, Flex, Button, Code, Theme } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon } from \"@hugeicons/core-free-icons\";\nimport { codeToHtml } from \"shiki\";\nimport type { CodeBlockProps } from \"./types\";\n\nconst COLLAPSED_HEIGHT = 360;\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\n// ============================================\n// Preview Section\n// ============================================\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\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  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  const imageStyle: React.CSSProperties = {\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\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n\n// ============================================\n// Code Section (for runtime highlighting)\n// ============================================\n\ninterface CodeSectionProps {\n  code: string;\n  language: string;\n  showCopy?: boolean;\n  showLanguage?: boolean;\n  lightTheme?: string;\n  darkTheme?: string;\n}\n\nconst CodeSection = memo(function CodeSection({\n  code,\n  language,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme = DEFAULT_LIGHT_THEME,\n  darkTheme = DEFAULT_DARK_THEME,\n}: CodeSectionProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);\n  const [copied, setCopied] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;\n\n  useEffect(() => {\n    let cancelled = false;\n    codeToHtml(code, {\n      lang: language,\n      themes: { light: lightTheme, dark: darkTheme },\n      defaultColor: false,\n    })\n      .then((html) => {\n        if (!cancelled) setHighlighted(html);\n      })\n      .catch(() => {\n        if (!cancelled) setHighlighted(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, lightTheme, darkTheme]);\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  }, [highlighted]);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  const displayLanguage = language === \"text\" ? \"plaintext\" : language;\n\n  const contentStyle: React.CSSProperties = {\n    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,\n  };\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\" gap=\"3\">\n          <Flex gap=\"2\" justify=\"between\" align=\"start\">\n            {showLanguage && (\n              <Code size=\"1\" color=\"gray\" highContrast>\n                {displayLanguage}\n              </Code>\n            )}\n            <Flex align=\"center\" gap=\"2\" className=\"code-action-buttons\">\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} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={contentStyle} className=\"code-content\">\n            {highlighted ? (\n              <Box className=\"code-block-content\" width=\"100%\" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />\n            ) : (\n              <pre className=\"code-block-content\">\n                <Code size=\"3\">{code}</Code>\n              </pre>\n            )}\n          </Box>\n\n          {shouldShowToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\n// ============================================\n// Children Code Section (for pre-highlighted MDX)\n// ============================================\n\ninterface ChildrenCodeSectionProps {\n  children: ReactNode;\n  showCopy?: boolean;\n  showLanguage?: boolean;\n}\n\nfunction extractCodeFromChildren(children?: ReactNode): string {\n  if (!children) return \"\";\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const codeChildren = codeProps?.children;\n      if (typeof codeChildren === \"string\") return codeChildren;\n    }\n    if (typeof childProps?.children === \"string\") return childProps.children;\n  }\n  if (typeof children === \"string\") return children;\n  return \"\";\n}\n\nfunction extractLanguageFromChildren(children?: ReactNode): string {\n  if (!children) return \"text\";\n  if (typeof children === \"object\" && children !== null && \"props\" in children) {\n    const childProps = (children as any).props;\n    if (childProps?.children && typeof childProps.children === \"object\") {\n      const codeProps = (childProps.children as any).props;\n      const className = codeProps?.className || \"\";\n      const match = className.match(/language-([\\w-]+)/i);\n      if (match) return match[1];\n    }\n    const className = childProps?.className || \"\";\n    const match = className.match(/language-([\\w-]+)/i);\n    if (match) return match[1];\n  }\n  return \"text\";\n}\n\nfunction formatLanguageLabel(lang: string): string {\n  const aliasMap: Record<string, string> = {\n    tsx: \"TSX\",\n    ts: \"TS\",\n    jsx: \"JSX\",\n    js: \"JS\",\n    javascript: \"JS\",\n    typescript: \"TS\",\n    css: \"CSS\",\n    html: \"HTML\",\n    json: \"JSON\",\n    bash: \"SH\",\n    sh: \"SH\",\n    shell: \"SH\",\n    text: \"plaintext\",\n  };\n  return aliasMap[lang.toLowerCase()] || lang.toLowerCase();\n}\n\nconst ChildrenCodeSection = memo(function ChildrenCodeSection({ children, showCopy = true, showLanguage = true }: ChildrenCodeSectionProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);\n  const [copied, setCopied] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const code = extractCodeFromChildren(children);\n  const language = extractLanguageFromChildren(children);\n  const displayLanguage = formatLanguageLabel(language);\n\n  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;\n\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  }, [children]);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  const contentStyle: React.CSSProperties = {\n    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,\n  };\n\n  return (\n    <Box position=\"relative\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex direction=\"column\" gap=\"3\">\n          <Flex gap=\"2\" justify=\"between\" align=\"start\">\n            {showLanguage && (\n              <Code size=\"1\" color=\"gray\" highContrast>\n                {displayLanguage}\n              </Code>\n            )}\n            <Flex align=\"center\" gap=\"2\" className=\"code-action-buttons\">\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} /> Copy\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n\n          <Box ref={contentRef} style={contentStyle} className=\"code-content\">\n            <div className=\"code-block-content\">{children}</div>\n          </Box>\n\n          {shouldShowToggle && !isExpanded && <Box className=\"code-scroll-shadow visible\" />}\n        </Flex>\n      </Card>\n    </Box>\n  );\n});\n\n// ============================================\n// Main CodeBlock Component\n// ============================================\n\nexport function CodeBlock({\n  children,\n  code,\n  language,\n  preview,\n  showCopy = true,\n  showLanguage = true,\n  lightTheme,\n  darkTheme,\n  background,\n  backgroundProps,\n}: CodeBlockProps) {\n  const hasCode = code || (children && React.Children.count(children) > 0);\n  const displayLanguage = language || extractLanguageFromChildren(children) || \"text\";\n\n  return (\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          <CodeSection code={code} language={displayLanguage} showCopy={showCopy} showLanguage={showLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />\n        )}\n\n        {children && !code && (\n          <ChildrenCodeSection showCopy={showCopy} showLanguage={showLanguage}>\n            {children}\n          </ChildrenCodeSection>\n        )}\n      </Flex>\n    </Box>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useState", "useRef", "useEffect", "useCallback", "memo", "Box", "Card", "Flex", "Button", "Code", "Theme", "HugeiconsIcon", "Copy01Icon", "Tick01Icon", "codeToHtml", "COLLAPSED_HEIGHT", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "dotsStyle", "imageStyle", "CodeSection", "code", "language", "showCopy", "showLanguage", "lightTheme", "darkTheme", "highlighted", "setHighlighted", "isExpanded", "setIsExpanded", "contentHeight", "setContentHeight", "copied", "setCopied", "contentRef", "resetTimeoutRef", "shouldShowToggle", "cancelled", "html", "handleCopy", "displayLanguage", "contentStyle", "extractCodeFromChildren", "childProps", "codeChildren", "extractLanguageFromChildren", "match", "formatLanguageLabel", "lang", "ChildrenCodeSection", "CodeBlock", "preview", "hasCode"]
 }

package/dist/esm/components/code/PreviewSection.js

@@ -1,2 +1,2 @@
-import r from"react";import{Card as t,Flex as o,Theme as i}from"@kushagradhawan/kookie-ui";function S({children:e,background:n="none",backgroundProps:c={}}){const{dotSize:a=24,color:u="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:s="300px",width:d="100%",radius:g="3"}=c;if(n==="none")return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4"},r.createElement(i,{fontFamily:"sans"},e)));if(n==="dots"){const y={backgroundImage:`radial-gradient(circle, ${u} 1px, transparent 1px)`,borderRadius:`var(--radius-${g})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:l,height:s,width:d};return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4",style:y},r.createElement(i,{fontFamily:"sans"},e)))}const p={backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${g})`,height:s,width:d};return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4",style:p},r.createElement(i,{fontFamily:"sans"},e)))}export{S as PreviewSection};
+import r from"react";import{Card as o,Flex as i,Theme as a}from"@kushagradhawan/kookie-ui";function S({children:n,background:t="none",backgroundProps:c={}}){const{dotSize:s=24,color:u="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:e,width:d="100%",radius:g="3"}=c;if(t==="none")return r.createElement(o,{size:"1",variant:"soft"},r.createElement(i,{justify:"center",align:"center",py:"4"},r.createElement(a,{fontFamily:"sans"},n)));if(t==="dots"){const y={backgroundImage:`radial-gradient(circle, ${u} 1px, transparent 1px)`,borderRadius:`var(--radius-${g})`,backgroundSize:`${s}px ${s}px`,backgroundPosition:"center",backgroundColor:l,width:d,...e&&{height:e}};return r.createElement(o,{size:"1",variant:"soft"},r.createElement(i,{justify:"center",align:"center",py:"4",style:y},r.createElement(a,{fontFamily:"sans"},n)))}const p={backgroundImage:`url(${t})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${g})`,width:d,...e&&{height:e}};return r.createElement(o,{size:"1",variant:"soft"},r.createElement(i,{justify:"center",align:"center",py:"4",style:p},r.createElement(a,{fontFamily:"sans"},n)))}export{S as PreviewSection};
 //# sourceMappingURL=PreviewSection.js.map

package/dist/esm/components/code/PreviewSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/code/PreviewSection.tsx"],
-  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\n}\n\nexport function PreviewSection({ children, background = \"none\", backgroundProps = {} }: PreviewSectionProps) {\n  const { dotSize = 24, color = \"var(--gray-10)\", backgroundColor = \"var(--gray-2)\", height = \"300px\", width = \"100%\", radius = \"3\" } = backgroundProps;\n\n  // Render with no background (default card styling)\n  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with dots pattern background\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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      height,\n      width,\n    };\n\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with custom image background\n  const imageStyle: React.CSSProperties = {\n    backgroundImage: `url(${background})`,\n    backgroundSize: \"cover\",\n    backgroundPosition: \"center\",\n    backgroundRepeat: \"no-repeat\",\n    borderRadius: `var(--radius-${radius})`,\n    height,\n    width,\n  };\n\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n"],
-  "mappings": "AAAA,OAAOA,MAA+B,QACtC,OAAS,QAAAC,EAAM,QAAAC,EAAM,SAAAC,MAAa,4BAe3B,SAASC,EAAe,CAAE,SAAAC,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAS,QAAS,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAGtI,GAAID,IAAe,OACjB,OACEN,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvCF,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMQ,EAAiC,CACrC,gBAAiB,2BAA2BL,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,OAAAC,EACA,MAAAC,CACF,EAEA,OACEZ,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOY,GAClDd,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMU,EAAkC,CACtC,gBAAiB,OAAOT,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,OAAAF,EACA,MAAAC,CACF,EAEA,OACEZ,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOa,GAClDf,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ",
+  "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\n\ninterface PreviewSectionProps {\n  children: ReactNode;\n  background?: \"none\" | \"dots\" | string;\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\n}\n\nexport function 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  // Render with no background (default card styling)\n  if (background === \"none\") {\n    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\">\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with dots pattern background\n  if (background === \"dots\") {\n    const dotsStyle: React.CSSProperties = {\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    return (\n      <Card size=\"1\" variant=\"soft\">\n        <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    );\n  }\n\n  // Render with custom image background\n  const imageStyle: React.CSSProperties = {\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\n  return (\n    <Card size=\"1\" variant=\"soft\">\n      <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n        <Theme fontFamily=\"sans\">{children}</Theme>\n      </Flex>\n    </Card>\n  );\n}\n"],
+  "mappings": "AAAA,OAAOA,MAA+B,QACtC,OAAS,QAAAC,EAAM,QAAAC,EAAM,SAAAC,MAAa,4BAe3B,SAASC,EAAe,CAAE,SAAAC,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAG5H,GAAID,IAAe,OACjB,OACEN,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvCF,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMQ,EAAiC,CACrC,gBAAiB,2BAA2BL,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,MAAAE,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,EAEA,OACEX,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOY,GAClDd,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMU,EAAkC,CACtC,gBAAiB,OAAOT,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,MAAAD,EACA,GAAID,GAAU,CAAE,OAAAA,CAAO,CACzB,EAEA,OACEX,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOa,GAClDf,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ",
   "names": ["React", "Card", "Flex", "Theme", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "dotsStyle", "imageStyle"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
@@ -93,10 +93,10 @@
   "dependencies": {
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
-    "@kushagradhawan/kookie-ui": "latest",
     "shiki": "^1.24.2"
   },
   "peerDependencies": {
+    "@kushagradhawan/kookie-ui": ">=0.1.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/src/components/code/CodeBlock.tsx

@@ -1,64 +1,346 @@
-import React, { type ReactNode } from "react";
-import { Card, Flex } from "@kushagradhawan/kookie-ui";
-import { SyntaxHighlighter } from "./SyntaxHighlighter";
-import { CopyButton } from "./CopyButton";
-import { LanguageBadge } from "./LanguageBadge";
-import { PreviewSection } from "./PreviewSection";
+import React, { useState, useRef, useEffect, useCallback, memo, type ReactNode } from "react";
+import { Box, Card, Flex, Button, Code, Theme } from "@kushagradhawan/kookie-ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Copy01Icon, Tick01Icon } from "@hugeicons/core-free-icons";
+import { codeToHtml } from "shiki";
 import type { CodeBlockProps } from "./types";
 
-function extractLanguageFromChildren(children?: ReactNode): string {
-  if (!children) return "text";
+const COLLAPSED_HEIGHT = 360;
+const DEFAULT_LIGHT_THEME = "one-light";
+const DEFAULT_DARK_THEME = "one-dark-pro";
+
+// ============================================
+// Preview Section
+// ============================================
+
+interface PreviewSectionProps {
+  children: ReactNode;
+  background?: "none" | "dots" | string;
+  backgroundProps?: {
+    dotSize?: number;
+    color?: string;
+    backgroundColor?: string;
+    height?: string;
+    width?: string;
+    radius?: string;
+  };
+}
+
+function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
+  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height, width = "100%", radius = "3" } = backgroundProps;
+
+  if (background === "none") {
+    return (
+      <Card size="1" variant="soft">
+        <Flex justify="center" align="center" py="4">
+          <Theme fontFamily="sans">{children}</Theme>
+        </Flex>
+      </Card>
+    );
+  }
+
+  if (background === "dots") {
+    const dotsStyle: React.CSSProperties = {
+      backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
+      borderRadius: `var(--radius-${radius})`,
+      backgroundSize: `${dotSize}px ${dotSize}px`,
+      backgroundPosition: "center",
+      backgroundColor,
+      width,
+      ...(height && { height }),
+    };
+
+    return (
+      <Card size="1" variant="soft">
+        <Flex justify="center" align="center" py="4" style={dotsStyle}>
+          <Theme fontFamily="sans">{children}</Theme>
+        </Flex>
+      </Card>
+    );
+  }
+
+  const imageStyle: React.CSSProperties = {
+    backgroundImage: `url(${background})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    borderRadius: `var(--radius-${radius})`,
+    width,
+    ...(height && { height }),
+  };
+
+  return (
+    <Card size="1" variant="soft">
+      <Flex justify="center" align="center" py="4" style={imageStyle}>
+        <Theme fontFamily="sans">{children}</Theme>
+      </Flex>
+    </Card>
+  );
+}
+
+// ============================================
+// Code Section (for runtime highlighting)
+// ============================================
 
-  // Try to extract language from pre > code className
+interface CodeSectionProps {
+  code: string;
+  language: string;
+  showCopy?: boolean;
+  showLanguage?: boolean;
+  lightTheme?: string;
+  darkTheme?: string;
+}
+
+const CodeSection = memo(function CodeSection({
+  code,
+  language,
+  showCopy = true,
+  showLanguage = true,
+  lightTheme = DEFAULT_LIGHT_THEME,
+  darkTheme = DEFAULT_DARK_THEME,
+}: CodeSectionProps) {
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);
+  const [copied, setCopied] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;
+
+  useEffect(() => {
+    let cancelled = false;
+    codeToHtml(code, {
+      lang: language,
+      themes: { light: lightTheme, dark: darkTheme },
+      defaultColor: false,
+    })
+      .then((html) => {
+        if (!cancelled) setHighlighted(html);
+      })
+      .catch(() => {
+        if (!cancelled) setHighlighted(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, lightTheme, darkTheme]);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [highlighted]);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    if (!code.trim()) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Silently fail
+    }
+  }, [code]);
+
+  const displayLanguage = language === "text" ? "plaintext" : language;
+
+  const contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
+
+  return (
+    <Box position="relative">
+      <Card size="1" variant="soft">
+        <Flex direction="column" gap="3">
+          <Flex gap="2" justify="between" align="start">
+            {showLanguage && (
+              <Code size="1" color="gray" highContrast>
+                {displayLanguage}
+              </Code>
+            )}
+            <Flex align="center" gap="2" className="code-action-buttons">
+              {showCopy && (
+                <Button
+                  size="2"
+                  variant="ghost"
+                  color="gray"
+                  onClick={handleCopy}
+                  tooltip={copied ? "Copied!" : "Copy"}
+                  aria-label={copied ? "Copied!" : "Copy code"}
+                >
+                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy
+                </Button>
+              )}
+            </Flex>
+          </Flex>
+
+          <Box ref={contentRef} style={contentStyle} className="code-content">
+            {highlighted ? (
+              <Box className="code-block-content" width="100%" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />
+            ) : (
+              <pre className="code-block-content">
+                <Code size="3">{code}</Code>
+              </pre>
+            )}
+          </Box>
+
+          {shouldShowToggle && !isExpanded && <Box className="code-scroll-shadow visible" />}
+        </Flex>
+      </Card>
+    </Box>
+  );
+});
+
+// ============================================
+// Children Code Section (for pre-highlighted MDX)
+// ============================================
+
+interface ChildrenCodeSectionProps {
+  children: ReactNode;
+  showCopy?: boolean;
+  showLanguage?: boolean;
+}
+
+function extractCodeFromChildren(children?: ReactNode): string {
+  if (!children) return "";
   if (typeof children === "object" && children !== null && "props" in children) {
     const childProps = (children as any).props;
+    if (childProps?.children && typeof childProps.children === "object") {
+      const codeProps = (childProps.children as any).props;
+      const codeChildren = codeProps?.children;
+      if (typeof codeChildren === "string") return codeChildren;
+    }
+    if (typeof childProps?.children === "string") return childProps.children;
+  }
+  if (typeof children === "string") return children;
+  return "";
+}
 
-    // If children is a <pre><code className="language-xxx">
+function extractLanguageFromChildren(children?: ReactNode): string {
+  if (!children) return "text";
+  if (typeof children === "object" && children !== null && "props" in children) {
+    const childProps = (children as any).props;
     if (childProps?.children && typeof childProps.children === "object") {
       const codeProps = (childProps.children as any).props;
       const className = codeProps?.className || "";
       const match = className.match(/language-([\w-]+)/i);
       if (match) return match[1];
     }
-
-    // Direct className on children
     const className = childProps?.className || "";
     const match = className.match(/language-([\w-]+)/i);
     if (match) return match[1];
   }
-
   return "text";
 }
 
-function extractCodeFromChildren(children?: ReactNode): string {
-  if (!children) return "";
+function formatLanguageLabel(lang: string): string {
+  const aliasMap: Record<string, string> = {
+    tsx: "TSX",
+    ts: "TS",
+    jsx: "JSX",
+    js: "JS",
+    javascript: "JS",
+    typescript: "TS",
+    css: "CSS",
+    html: "HTML",
+    json: "JSON",
+    bash: "SH",
+    sh: "SH",
+    shell: "SH",
+    text: "plaintext",
+  };
+  return aliasMap[lang.toLowerCase()] || lang.toLowerCase();
+}
 
-  // Try to extract text from pre > code structure
-  if (typeof children === "object" && children !== null && "props" in children) {
-    const childProps = (children as any).props;
+const ChildrenCodeSection = memo(function ChildrenCodeSection({ children, showCopy = true, showLanguage = true }: ChildrenCodeSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [contentHeight, setContentHeight] = useState(COLLAPSED_HEIGHT);
+  const [copied, setCopied] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // If children is <pre><code>...</code></pre>
-    if (childProps?.children && typeof childProps.children === "object") {
-      const codeProps = (childProps.children as any).props;
-      const codeChildren = codeProps?.children;
+  const code = extractCodeFromChildren(children);
+  const language = extractLanguageFromChildren(children);
+  const displayLanguage = formatLanguageLabel(language);
+
+  const shouldShowToggle = contentHeight > COLLAPSED_HEIGHT;
 
-      if (typeof codeChildren === "string") {
-        return codeChildren;
-      }
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
     }
+  }, [children]);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+    };
+  }, []);
 
-    // Direct text content
-    if (typeof childProps?.children === "string") {
-      return childProps.children;
+  const handleCopy = useCallback(async () => {
+    if (!code.trim()) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Silently fail
     }
-  }
+  }, [code]);
 
-  if (typeof children === "string") {
-    return children;
-  }
+  const contentStyle: React.CSSProperties = {
+    maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,
+  };
 
-  return "";
-}
+  return (
+    <Box position="relative">
+      <Card size="1" variant="soft">
+        <Flex direction="column" gap="3">
+          <Flex gap="2" justify="between" align="start">
+            {showLanguage && (
+              <Code size="1" color="gray" highContrast>
+                {displayLanguage}
+              </Code>
+            )}
+            <Flex align="center" gap="2" className="code-action-buttons">
+              {showCopy && (
+                <Button
+                  size="2"
+                  variant="ghost"
+                  color="gray"
+                  onClick={handleCopy}
+                  tooltip={copied ? "Copied!" : "Copy"}
+                  aria-label={copied ? "Copied!" : "Copy code"}
+                >
+                  <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy
+                </Button>
+              )}
+            </Flex>
+          </Flex>
+
+          <Box ref={contentRef} style={contentStyle} className="code-content">
+            <div className="code-block-content">{children}</div>
+          </Box>
+
+          {shouldShowToggle && !isExpanded && <Box className="code-scroll-shadow visible" />}
+        </Flex>
+      </Card>
+    </Box>
+  );
+});
+
+// ============================================
+// Main CodeBlock Component
+// ============================================
 
 export function CodeBlock({
   children,
@@ -72,48 +354,28 @@ export function CodeBlock({
   background,
   backgroundProps,
 }: CodeBlockProps) {
-  // Determine the code and language to display
-  let displayCode = code;
-  let displayLanguage = language;
-
-  // If children are provided (pre-highlighted from MDX), extract code and language
-  if (children && !code) {
-    displayCode = extractCodeFromChildren(children);
-    displayLanguage = language || extractLanguageFromChildren(children);
-  }
-
-  // Default language
-  if (!displayLanguage) {
-    displayLanguage = "text";
-  }
-
-  // If no code to display, render nothing
-  if (!displayCode && !children) {
-    return null;
-  }
+  const hasCode = code || (children && React.Children.count(children) > 0);
+  const displayLanguage = language || extractLanguageFromChildren(children) || "text";
 
   return (
-    <Flex direction="column" className="code-block-wrapper" style={{ minWidth: 0 }} my="2">
-      {preview && (
-        <PreviewSection background={background} backgroundProps={backgroundProps}>
-          {preview}
-        </PreviewSection>
-      )}
-
-      <Card size="2" variant="soft">
-        <Flex gap="2" direction="column">
-          <Flex align="start" justify="between">
-            {showLanguage && <LanguageBadge language={displayLanguage} />}
-            {showCopy && displayCode && <CopyButton code={displayCode} />}
-          </Flex>
+    <Box className="docs-code-block" mt="6" mb="8">
+      <Flex direction="column" gap="2">
+        {preview && (
+          <PreviewSection background={background} backgroundProps={backgroundProps}>
+            {preview}
+          </PreviewSection>
+        )}
 
-          {/* If we have runtime code, use SyntaxHighlighter */}
-          {code && <SyntaxHighlighter code={code} language={displayLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />}
+        {code && (
+          <CodeSection code={code} language={displayLanguage} showCopy={showCopy} showLanguage={showLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />
+        )}
 
-          {/* If we have pre-highlighted children from MDX, render them */}
-          {children && !code && <div className="code-block-content">{children}</div>}
-        </Flex>
-      </Card>
-    </Flex>
+        {children && !code && (
+          <ChildrenCodeSection showCopy={showCopy} showLanguage={showLanguage}>
+            {children}
+          </ChildrenCodeSection>
+        )}
+      </Flex>
+    </Box>
   );
 }

package/src/components/code/PreviewSection.tsx

@@ -15,7 +15,7 @@ interface PreviewSectionProps {
 }
 
 export function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
-  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height = "300px", width = "100%", radius = "3" } = backgroundProps;
+  const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height, width = "100%", radius = "3" } = backgroundProps;
 
   // Render with no background (default card styling)
   if (background === "none") {
@@ -36,8 +36,8 @@ export function PreviewSection({ children, background = "none", backgroundProps
       backgroundSize: `${dotSize}px ${dotSize}px`,
       backgroundPosition: "center",
       backgroundColor,
-      height,
       width,
+      ...(height && { height }),
     };
 
     return (
@@ -56,8 +56,8 @@ export function PreviewSection({ children, background = "none", backgroundProps
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
     borderRadius: `var(--radius-${radius})`,
-    height,
     width,
+    ...(height && { height }),
   };
 
   return (

package/src/components/index.css

@@ -1,15 +1,19 @@
-/* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+/* Components CSS aggregator for Kookie Blocks */
 
 /* ============================================
    Code Block Component Styles
    ============================================ */
 
-/* Code block wrapper - constrain width in flex containers */
-.code-block-wrapper {
-  min-width: 0;
-  max-width: 100%;
+/* Main docs code block wrapper */
+.docs-code-block {
   width: 100%;
+}
+
+/* Code content area - handles expand/collapse */
+.code-content {
   overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  position: relative;
 }
 
 /* Code block content (the pre part, below the header) */
@@ -52,14 +56,17 @@
   height: 0 !important;
 }
 
-.code-block-wrapper pre,
-.code-block-wrapper .code-block-content pre {
-  overflow-x: visible; /* Let .code-block-content handle scrolling */
+/* Pre elements inside code content */
+.code-content pre,
+.code-block-content pre {
+  overflow-x: visible;
   max-width: 100%;
   min-width: 0;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 /* Ensure Shiki-generated pre elements fill width */
@@ -69,8 +76,8 @@
 }
 
 /* Code elements inside pre */
-.code-block-wrapper pre code,
-.code-block-wrapper .code-block-content pre code {
+.code-content pre code,
+.code-block-content pre code {
   font-family: var(--font-mono);
   font-size: var(--font-size-2);
   line-height: 1.75;
@@ -82,16 +89,16 @@
 }
 
 /* Shiki line spans */
-.code-block-wrapper pre code .line,
-.code-block-wrapper .code-block-content pre code .line {
+.code-content pre code .line,
+.code-block-content pre code .line {
   display: flex;
   align-items: center;
   gap: 0;
 }
 
 /* Line numbers */
-.code-block-wrapper pre code .line::before,
-.code-block-wrapper .code-block-content pre code .line::before {
+.code-content pre code .line::before,
+.code-block-content pre code .line::before {
   counter-increment: line;
   content: counter(line);
   display: inline-block;
@@ -104,8 +111,37 @@
   margin-right: var(--space-4);
 }
 
+/* Scroll shadow overlay for collapsed state */
+.code-scroll-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--color-panel-solid), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1;
+}
+
+.code-scroll-shadow.visible {
+  opacity: 1;
+}
+
+/* Action buttons styling */
+.code-action-buttons {
+  flex-shrink: 0;
+}
+
+/* Chevron rotation animation */
+.code-chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
 /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
-.code-block-wrapper pre.shiki span {
+.code-block-content pre.shiki span,
+.code-content pre.shiki span {
   color: var(--shiki-light) !important;
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
@@ -113,9 +149,12 @@
 }
 
 /* Override with dark theme colors when inside a dark context */
-.dark .code-block-wrapper pre.shiki span,
-.dark-theme .code-block-wrapper pre.shiki span,
-[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+.dark .code-block-content pre.shiki span,
+.dark-theme .code-block-content pre.shiki span,
+[data-appearance="dark"] .code-block-content pre.shiki span,
+.dark .code-content pre.shiki span,
+.dark-theme .code-content pre.shiki span,
+[data-appearance="dark"] .code-content pre.shiki span {
   color: var(--shiki-dark) !important;
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);

package/styles.css

@@ -1,14 +1,17 @@
 /* Kookie Blocks base styles. Keep minimal; rely on Kookie UI tokens/utilities. */
-/* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+/* Components CSS aggregator for Kookie Blocks */
 /* ============================================
    Code Block Component Styles
    ============================================ */
-/* Code block wrapper - constrain width in flex containers */
-.code-block-wrapper {
-  min-width: 0;
-  max-width: 100%;
+/* Main docs code block wrapper */
+.docs-code-block {
   width: 100%;
+}
+/* Code content area - handles expand/collapse */
+.code-content {
   overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  position: relative;
 }
 /* Code block content (the pre part, below the header) */
 .code-block-content {
@@ -47,14 +50,17 @@
   width: 0 !important;
   height: 0 !important;
 }
-.code-block-wrapper pre,
-.code-block-wrapper .code-block-content pre {
-  overflow-x: visible; /* Let .code-block-content handle scrolling */
+/* Pre elements inside code content */
+.code-content pre,
+.code-block-content pre {
+  overflow-x: visible;
   max-width: 100%;
   min-width: 0;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 /* Ensure Shiki-generated pre elements fill width */
 .code-block-content > pre {
@@ -62,8 +68,8 @@
   min-width: 0;
 }
 /* Code elements inside pre */
-.code-block-wrapper pre code,
-.code-block-wrapper .code-block-content pre code {
+.code-content pre code,
+.code-block-content pre code {
   font-family: var(--font-mono);
   font-size: var(--font-size-2);
   line-height: 1.75;
@@ -74,15 +80,15 @@
   counter-reset: line;
 }
 /* Shiki line spans */
-.code-block-wrapper pre code .line,
-.code-block-wrapper .code-block-content pre code .line {
+.code-content pre code .line,
+.code-block-content pre code .line {
   display: flex;
   align-items: center;
   gap: 0;
 }
 /* Line numbers */
-.code-block-wrapper pre code .line::before,
-.code-block-wrapper .code-block-content pre code .line::before {
+.code-content pre code .line::before,
+.code-block-content pre code .line::before {
   counter-increment: line;
   content: counter(line);
   display: inline-block;
@@ -96,8 +102,33 @@
   flex-shrink: 0;
   margin-right: var(--space-4);
 }
+/* Scroll shadow overlay for collapsed state */
+.code-scroll-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to top, var(--color-panel-solid), transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1;
+}
+.code-scroll-shadow.visible {
+  opacity: 1;
+}
+/* Action buttons styling */
+.code-action-buttons {
+  flex-shrink: 0;
+}
+/* Chevron rotation animation */
+.code-chevron {
+  transition: transform 0.2s ease-in-out;
+}
 /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
-.code-block-wrapper pre.shiki span {
+.code-block-content pre.shiki span,
+.code-content pre.shiki span {
   color: var(--shiki-light) !important;
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
@@ -105,9 +136,12 @@
           text-decoration: var(--shiki-light-text-decoration);
 }
 /* Override with dark theme colors when inside a dark context */
-.dark .code-block-wrapper pre.shiki span,
-.dark-theme .code-block-wrapper pre.shiki span,
-[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+.dark .code-block-content pre.shiki span,
+.dark-theme .code-block-content pre.shiki span,
+[data-appearance="dark"] .code-block-content pre.shiki span,
+.dark .code-content pre.shiki span,
+.dark-theme .code-content pre.shiki span,
+[data-appearance="dark"] .code-content pre.shiki span {
   color: var(--shiki-dark) !important;
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);