@kushagradhawan/kookie-blocks 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/components.css +98 -18
  2. package/dist/cjs/components/code/CodeBlock.d.ts +1 -1
  3. package/dist/cjs/components/code/CodeBlock.d.ts.map +1 -1
  4. package/dist/cjs/components/code/CodeBlock.js +1 -1
  5. package/dist/cjs/components/code/CodeBlock.js.map +3 -3
  6. package/dist/cjs/components/code/PreviewSection.d.ts.map +1 -1
  7. package/dist/cjs/components/code/PreviewSection.js +1 -1
  8. package/dist/cjs/components/code/PreviewSection.js.map +3 -3
  9. package/dist/esm/components/code/CodeBlock.d.ts +1 -1
  10. package/dist/esm/components/code/CodeBlock.d.ts.map +1 -1
  11. package/dist/esm/components/code/CodeBlock.js +1 -1
  12. package/dist/esm/components/code/CodeBlock.js.map +3 -3
  13. package/dist/esm/components/code/PreviewSection.d.ts.map +1 -1
  14. package/dist/esm/components/code/PreviewSection.js +1 -1
  15. package/dist/esm/components/code/PreviewSection.js.map +3 -3
  16. package/package.json +2 -2
  17. package/src/components/code/CodeBlock.tsx +335 -73
  18. package/src/components/code/PreviewSection.tsx +49 -31
  19. package/src/components/index.css +91 -18
  20. package/styles.css +84 -18
package/components.css CHANGED
@@ -1,16 +1,21 @@
1
- /* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
1
+ /* Components CSS aggregator for Kookie Blocks */
2
2
 
3
3
  /* ============================================
4
4
  Code Block Component Styles
5
5
  ============================================ */
6
6
 
7
- /* Code block wrapper - constrain width in flex containers */
7
+ /* Main docs code block wrapper */
8
8
 
9
- .code-block-wrapper {
10
- min-width: 0;
11
- max-width: 100%;
9
+ .docs-code-block {
12
10
  width: 100%;
11
+ }
12
+
13
+ /* Code content area - handles expand/collapse */
14
+
15
+ .code-content {
13
16
  overflow: hidden;
17
+ transition: max-height 0.3s ease-in-out;
18
+ position: relative;
14
19
  }
15
20
 
16
21
  /* Code block content (the pre part, below the header) */
@@ -18,16 +23,56 @@
18
23
  .code-block-content {
19
24
  width: 100%;
20
25
  min-width: 0;
26
+ overflow-x: auto;
27
+ /* Hide scrollbars while keeping scroll functionality */
28
+ scrollbar-width: none; /* Firefox */
29
+ -ms-overflow-style: none; /* IE/Edge */
21
30
  }
22
31
 
23
- .code-block-wrapper pre,
24
- .code-block-wrapper .code-block-content pre {
25
- overflow-x: auto;
32
+ /* Hide scrollbars for webkit browsers */
33
+
34
+ .code-block-content::-webkit-scrollbar,
35
+ .code-block-content::-webkit-scrollbar-horizontal,
36
+ .code-block-content::-webkit-scrollbar-vertical,
37
+ .code-block-content::-webkit-scrollbar-track,
38
+ .code-block-content::-webkit-scrollbar-thumb,
39
+ .code-block-content::-webkit-scrollbar-corner {
40
+ display: none !important;
41
+ width: 0 !important;
42
+ height: 0 !important;
43
+ }
44
+
45
+ /* Also hide scrollbars on any pre/code elements inside code content */
46
+
47
+ .code-block-content pre::-webkit-scrollbar,
48
+ .code-block-content pre::-webkit-scrollbar-horizontal,
49
+ .code-block-content pre::-webkit-scrollbar-vertical,
50
+ .code-block-content pre::-webkit-scrollbar-track,
51
+ .code-block-content pre::-webkit-scrollbar-thumb,
52
+ .code-block-content pre::-webkit-scrollbar-corner,
53
+ .code-block-content code::-webkit-scrollbar,
54
+ .code-block-content code::-webkit-scrollbar-horizontal,
55
+ .code-block-content code::-webkit-scrollbar-vertical,
56
+ .code-block-content code::-webkit-scrollbar-track,
57
+ .code-block-content code::-webkit-scrollbar-thumb,
58
+ .code-block-content code::-webkit-scrollbar-corner {
59
+ display: none !important;
60
+ width: 0 !important;
61
+ height: 0 !important;
62
+ }
63
+
64
+ /* Pre elements inside code content */
65
+
66
+ .code-content pre,
67
+ .code-block-content pre {
68
+ overflow-x: visible;
26
69
  max-width: 100%;
27
70
  min-width: 0;
28
71
  margin: 0;
29
72
  width: 100%;
30
73
  box-sizing: border-box;
74
+ scrollbar-width: none;
75
+ -ms-overflow-style: none;
31
76
  }
32
77
 
33
78
  /* Ensure Shiki-generated pre elements fill width */
@@ -39,8 +84,8 @@
39
84
 
40
85
  /* Code elements inside pre */
41
86
 
42
- .code-block-wrapper pre code,
43
- .code-block-wrapper .code-block-content pre code {
87
+ .code-content pre code,
88
+ .code-block-content pre code {
44
89
  font-family: var(--font-mono);
45
90
  font-size: var(--font-size-2);
46
91
  line-height: 1.75;
@@ -53,8 +98,8 @@
53
98
 
54
99
  /* Shiki line spans */
55
100
 
56
- .code-block-wrapper pre code .line,
57
- .code-block-wrapper .code-block-content pre code .line {
101
+ .code-content pre code .line,
102
+ .code-block-content pre code .line {
58
103
  display: flex;
59
104
  align-items: center;
60
105
  gap: 0;
@@ -62,8 +107,8 @@
62
107
 
63
108
  /* Line numbers */
64
109
 
65
- .code-block-wrapper pre code .line::before,
66
- .code-block-wrapper .code-block-content pre code .line::before {
110
+ .code-content pre code .line::before,
111
+ .code-block-content pre code .line::before {
67
112
  counter-increment: line;
68
113
  content: counter(line);
69
114
  display: inline-block;
@@ -78,9 +123,41 @@
78
123
  margin-right: var(--space-4);
79
124
  }
80
125
 
126
+ /* Scroll shadow overlay for collapsed state */
127
+
128
+ .code-scroll-shadow {
129
+ position: absolute;
130
+ bottom: 0;
131
+ left: 0;
132
+ right: 0;
133
+ height: 80px;
134
+ background: linear-gradient(to top, var(--color-panel-solid), transparent);
135
+ pointer-events: none;
136
+ opacity: 0;
137
+ transition: opacity 0.2s ease-in-out;
138
+ z-index: 1;
139
+ }
140
+
141
+ .code-scroll-shadow.visible {
142
+ opacity: 1;
143
+ }
144
+
145
+ /* Action buttons styling */
146
+
147
+ .code-action-buttons {
148
+ flex-shrink: 0;
149
+ }
150
+
151
+ /* Chevron rotation animation */
152
+
153
+ .code-chevron {
154
+ transition: transform 0.2s ease-in-out;
155
+ }
156
+
81
157
  /* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
82
158
 
83
- .code-block-wrapper pre.shiki span {
159
+ .code-block-content pre.shiki span,
160
+ .code-content pre.shiki span {
84
161
  color: var(--shiki-light) !important;
85
162
  font-style: var(--shiki-light-font-style);
86
163
  font-weight: var(--shiki-light-font-weight);
@@ -90,9 +167,12 @@
90
167
 
91
168
  /* Override with dark theme colors when inside a dark context */
92
169
 
93
- .dark .code-block-wrapper pre.shiki span,
94
- .dark-theme .code-block-wrapper pre.shiki span,
95
- [data-appearance="dark"] .code-block-wrapper pre.shiki span {
170
+ .dark .code-block-content pre.shiki span,
171
+ .dark-theme .code-block-content pre.shiki span,
172
+ [data-appearance="dark"] .code-block-content pre.shiki span,
173
+ .dark .code-content pre.shiki span,
174
+ .dark-theme .code-content pre.shiki span,
175
+ [data-appearance="dark"] .code-content pre.shiki span {
96
176
  color: var(--shiki-dark) !important;
97
177
  font-style: var(--shiki-dark-font-style);
98
178
  font-weight: var(--shiki-dark-font-weight);
package/dist/cjs/components/code/CodeBlock.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { CodeBlockProps } from "./types";
3
- export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element | null;
3
+ export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element;
4
4
  //# sourceMappingURL=CodeBlock.d.ts.map
package/dist/cjs/components/code/CodeBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,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"}
1
+ {"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 CHANGED
@@ -1,2 +1,2 @@
1
- "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))))}
1
+ "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)))}
2
2
  //# sourceMappingURL=CodeBlock.js.map
package/dist/cjs/components/code/CodeBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/CodeBlock.tsx"],
4
- "sourcesContent": ["import React, { 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"],
5
- "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",
6
- "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"]
4
+ "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"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsF,oBACtFC,EAAqD,qCACrDD,EAA8B,4BAC9BE,EAAuC,sCACvCC,EAA2B,iBAG3B,MAAMC,EAAmB,IACnBC,EAAsB,YACtBC,EAAqB,eAmB3B,SAASC,EAAe,CAAE,SAAAC,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CACpG,KAAM,CAAE,QAAAC,EAAU,GAAI,MAAAC,EAAQ,iBAAkB,gBAAAC,EAAkB,gBAAiB,OAAAC,EAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAE5H,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,EAIJ,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,CAEA,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,CAeA,MAAMY,KAAc,QAAK,SAAqB,CAC5C,KAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,WAAAC,EAAapB,EACb,UAAAqB,EAAYpB,CACd,EAAqB,CACnB,KAAM,CAACqB,EAAaC,CAAc,KAAI,YAAwB,IAAI,EAC5D,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5C,CAACC,EAAeC,CAAgB,KAAI,YAAS5B,CAAgB,EAC7D,CAAC6B,EAAQC,CAAS,KAAI,YAAS,EAAK,EACpCC,KAAa,UAAuB,IAAI,EACxCC,KAAkB,UAA6C,IAAI,EAEnEC,EAAmBN,EAAgB3B,KAEzC,aAAU,IAAM,CACd,IAAIkC,EAAY,GAChB,uBAAWjB,EAAM,CACf,KAAMC,EACN,OAAQ,CAAE,MAAOG,EAAY,KAAMC,CAAU,EAC7C,aAAc,EAChB,CAAC,EACE,KAAMa,GAAS,CACTD,GAAWV,EAAeW,CAAI,CACrC,CAAC,EACA,MAAM,IAAM,CACND,GAAWV,EAAe,IAAI,CACrC,CAAC,EACI,IAAM,CACXU,EAAY,EACd,CACF,EAAG,CAACjB,EAAMC,EAAUG,EAAYC,CAAS,CAAC,KAE1C,aAAU,IAAM,CACVS,EAAW,SACbH,EAAiBG,EAAW,QAAQ,YAAY,CAEpD,EAAG,CAACR,CAAW,CAAC,KAEhB,aAAU,IACD,IAAM,CACPS,EAAgB,SAAS,aAAaA,EAAgB,OAAO,CACnE,EACC,CAAC,CAAC,EAEL,MAAMI,KAAa,eAAY,SAAY,CACzC,GAAKnB,EAAK,KAAK,EACf,GAAI,CACF,MAAM,UAAU,UAAU,UAAUA,CAAI,EACxCa,EAAU,EAAI,EACVE,EAAgB,SAAS,aAAaA,EAAgB,OAAO,EACjEA,EAAgB,QAAU,WAAW,IAAMF,EAAU,EAAK,EAAG,GAAI,CACnE,MAAQ,CAER,CACF,EAAG,CAACb,CAAI,CAAC,EAEHoB,EAAkBnB,IAAa,OAAS,YAAcA,EAEtDoB,EAAoC,CACxC,UAAWb,EAAa,GAAGE,CAAa,KAAO,GAAG3B,CAAgB,IACpE,EAEA,OACE,EAAAa,QAAA,cAAC,OAAI,SAAS,YACZ,EAAAA,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,KAC3B,EAAAA,QAAA,cAAC,QAAK,IAAI,IAAI,QAAQ,UAAU,MAAM,SACnCO,GACC,EAAAP,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCwB,CACH,EAEF,EAAAxB,QAAA,cAAC,QAAK,MAAM,SAAS,IAAI,IAAI,UAAU,uBACpCM,GACC,EAAAN,QAAA,cAAC,UACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,QAASuB,EACT,QAASP,EAAS,UAAY,OAC9B,aAAYA,EAAS,UAAY,aAEjC,EAAAhB,QAAA,cAAC,iBAAc,KAAMgB,EAAS,aAAa,aAAY,EAAE,OAC3D,CAEJ,CACF,EAEA,EAAAhB,QAAA,cAAC,OAAI,IAAKkB,EAAY,MAAOO,EAAc,UAAU,gBAClDf,EACC,EAAAV,QAAA,cAAC,OAAI,UAAU,qBAAqB,MAAM,OAAO,MAAO,CAAE,SAAU,CAAE,EAAG,wBAAyB,CAAE,OAAQU,CAAY,EAAG,EAE3H,EAAAV,QAAA,cAAC,OAAI,UAAU,sBACb,EAAAA,QAAA,cAAC,QAAK,KAAK,KAAKI,CAAK,CACvB,CAEJ,EAECgB,GAAoB,CAACR,GAAc,EAAAZ,QAAA,cAAC,OAAI,UAAU,6BAA6B,CAClF,CACF,CACF,CAEJ,CAAC,EAYD,SAAS0B,EAAwBnC,EAA8B,CAC7D,GAAI,CAACA,EAAU,MAAO,GACtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMoC,EAAcpC,EAAiB,MACrC,GAAIoC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAEnE,MAAMC,EADaD,EAAW,SAAiB,OACf,SAChC,GAAI,OAAOC,GAAiB,SAAU,OAAOA,CAC/C,CACA,GAAI,OAAOD,GAAY,UAAa,SAAU,OAAOA,EAAW,QAClE,CACA,OAAI,OAAOpC,GAAa,SAAiBA,EAClC,EACT,CAEA,SAASsC,EAA4BtC,EAA8B,CACjE,GAAI,CAACA,EAAU,MAAO,OACtB,GAAI,OAAOA,GAAa,UAAYA,IAAa,MAAQ,UAAWA,EAAU,CAC5E,MAAMoC,EAAcpC,EAAiB,MACrC,GAAIoC,GAAY,UAAY,OAAOA,EAAW,UAAa,SAAU,CAGnE,MAAMG,GAFaH,EAAW,SAAiB,OAClB,WAAa,IAClB,MAAM,oBAAoB,EAClD,GAAIG,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAEA,MAAMA,GADYH,GAAY,WAAa,IACnB,MAAM,oBAAoB,EAClD,GAAIG,EAAO,OAAOA,EAAM,CAAC,CAC3B,CACA,MAAO,MACT,CAEA,SAASC,EAAoBC,EAAsB,CAgBjD,MAfyC,CACvC,IAAK,MACL,GAAI,KACJ,IAAK,MACL,GAAI,KACJ,WAAY,KACZ,WAAY,KACZ,IAAK,MACL,KAAM,OACN,KAAM,OACN,KAAM,KACN,GAAI,KACJ,MAAO,KACP,KAAM,WACR,EACgBA,EAAK,YAAY,CAAC,GAAKA,EAAK,YAAY,CAC1D,CAEA,MAAMC,KAAsB,QAAK,SAA6B,CAAE,SAAA1C,EAAU,SAAAe,EAAW,GAAM,aAAAC,EAAe,EAAK,EAA6B,CAC1I,KAAM,CAACK,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5C,CAACC,EAAeC,CAAgB,KAAI,YAAS5B,CAAgB,EAC7D,CAAC6B,EAAQC,CAAS,KAAI,YAAS,EAAK,EACpCC,KAAa,UAAuB,IAAI,EACxCC,KAAkB,UAA6C,IAAI,EAEnEf,EAAOsB,EAAwBnC,CAAQ,EACvCc,EAAWwB,EAA4BtC,CAAQ,EAC/CiC,EAAkBO,EAAoB1B,CAAQ,EAE9Ce,EAAmBN,EAAgB3B,KAEzC,aAAU,IAAM,CACV+B,EAAW,SACbH,EAAiBG,EAAW,QAAQ,YAAY,CAEpD,EAAG,CAAC3B,CAAQ,CAAC,KAEb,aAAU,IACD,IAAM,CACP4B,EAAgB,SAAS,aAAaA,EAAgB,OAAO,CACnE,EACC,CAAC,CAAC,EAEL,MAAMI,KAAa,eAAY,SAAY,CACzC,GAAKnB,EAAK,KAAK,EACf,GAAI,CACF,MAAM,UAAU,UAAU,UAAUA,CAAI,EACxCa,EAAU,EAAI,EACVE,EAAgB,SAAS,aAAaA,EAAgB,OAAO,EACjEA,EAAgB,QAAU,WAAW,IAAMF,EAAU,EAAK,EAAG,GAAI,CACnE,MAAQ,CAER,CACF,EAAG,CAACb,CAAI,CAAC,EAEHqB,EAAoC,CACxC,UAAWb,EAAa,GAAGE,CAAa,KAAO,GAAG3B,CAAgB,IACpE,EAEA,OACE,EAAAa,QAAA,cAAC,OAAI,SAAS,YACZ,EAAAA,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,KAC3B,EAAAA,QAAA,cAAC,QAAK,IAAI,IAAI,QAAQ,UAAU,MAAM,SACnCO,GACC,EAAAP,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCwB,CACH,EAEF,EAAAxB,QAAA,cAAC,QAAK,MAAM,SAAS,IAAI,IAAI,UAAU,uBACpCM,GACC,EAAAN,QAAA,cAAC,UACC,KAAK,IACL,QAAQ,QACR,MAAM,OACN,QAASuB,EACT,QAASP,EAAS,UAAY,OAC9B,aAAYA,EAAS,UAAY,aAEjC,EAAAhB,QAAA,cAAC,iBAAc,KAAMgB,EAAS,aAAa,aAAY,EAAE,OAC3D,CAEJ,CACF,EAEA,EAAAhB,QAAA,cAAC,OAAI,IAAKkB,EAAY,MAAOO,EAAc,UAAU,gBACnD,EAAAzB,QAAA,cAAC,OAAI,UAAU,sBAAsBT,CAAS,CAChD,EAEC6B,GAAoB,CAACR,GAAc,EAAAZ,QAAA,cAAC,OAAI,UAAU,6BAA6B,CAClF,CACF,CACF,CAEJ,CAAC,EAMM,SAASnB,EAAU,CACxB,SAAAU,EACA,KAAAa,EACA,SAAAC,EACA,QAAA6B,EACA,SAAA5B,EAAW,GACX,aAAAC,EAAe,GACf,WAAAC,EACA,UAAAC,EACA,WAAAjB,EACA,gBAAAC,CACF,EAAmB,CACjB,MAAM0C,EAAU/B,GAASb,GAAY,EAAAS,QAAM,SAAS,MAAMT,CAAQ,EAAI,EAChEiC,EAAkBnB,GAAYwB,EAA4BtC,CAAQ,GAAK,OAE7E,OACE,EAAAS,QAAA,cAAC,OAAI,UAAU,kBAAkB,GAAG,IAAI,GAAG,KACzC,EAAAA,QAAA,cAAC,QAAK,UAAU,SAAS,IAAI,KAC1BkC,GACC,EAAAlC,QAAA,cAACV,EAAA,CAAe,WAAYE,EAAY,gBAAiBC,GACtDyC,CACH,EAGD9B,GACC,EAAAJ,QAAA,cAACG,EAAA,CAAY,KAAMC,EAAM,SAAUoB,EAAiB,SAAUlB,EAAU,aAAcC,EAAc,WAAYC,EAAY,UAAWC,EAAW,EAGnJlB,GAAY,CAACa,GACZ,EAAAJ,QAAA,cAACiC,EAAA,CAAoB,SAAU3B,EAAU,aAAcC,GACpDhB,CACH,CAEJ,CACF,CAEJ",
6
+ "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"]
7
7
  }
package/dist/cjs/components/code/PreviewSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewSection.d.ts","sourceRoot":"","sources":["../../../../src/components/code/PreviewSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,eAAoB,EAAE,EAAE,mBAAmB,qBAkC1G"}
1
+ {"version":3,"file":"PreviewSection.d.ts","sourceRoot":"","sources":["../../../../src/components/code/PreviewSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,eAAoB,EAAE,EAAE,mBAAmB,qBAqD1G"}
package/dist/cjs/components/code/PreviewSection.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var b=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var S=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},d=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of x(e))!k.call(r,t)&&t!==o&&i(r,t,{get:()=>e[t],enumerable:!(n=m(e,t))||n.enumerable});return r};var P=(r,e,o)=>(o=r!=null?b(h(r)):{},d(e||!r||!r.__esModule?i(o,"default",{value:r,enumerable:!0}):o,r)),f=r=>d(i({},"__esModule",{value:!0}),r);var w={};S(w,{PreviewSection:()=>v});module.exports=f(w);var a=P(require("react")),c=require("@kushagradhawan/kookie-ui");function v({children:r,background:e="none",backgroundProps:o={}}){const{dotSize:n=2,color:t="#d4d4d8",backgroundColor:s="transparent",height:g="auto",width:u="100%",radius:p="var(--radius-3)"}=o,l=e==="dots"?{backgroundImage:`radial-gradient(circle, ${t} ${n}px, ${s} ${n}px)`,backgroundSize:"20px 20px"}:e!=="none"?{backgroundImage:`url(${e})`,backgroundSize:"cover",backgroundPosition:"center"}:{};return a.default.createElement(c.Box,{p:"4",style:{...l,height:g,width:u,borderRadius:p,display:"flex",alignItems:"center",justifyContent:"center",minHeight:"200px"}},r)}
1
+ "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)))}
2
2
  //# sourceMappingURL=PreviewSection.js.map
package/dist/cjs/components/code/PreviewSection.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/PreviewSection.tsx"],
4
- "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Box } 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 = 2, color = \"#d4d4d8\", backgroundColor = \"transparent\", height = \"auto\", width = \"100%\", radius = \"var(--radius-3)\" } = backgroundProps;\n\n const backgroundStyle =\n background === \"dots\"\n ? {\n backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, ${backgroundColor} ${dotSize}px)`,\n backgroundSize: \"20px 20px\",\n }\n : background !== \"none\"\n ? {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n }\n : {};\n\n return (\n <Box\n p=\"4\"\n style={{\n ...backgroundStyle,\n height,\n width,\n borderRadius: radius,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"200px\",\n }}\n >\n {children}\n </Box>\n );\n}\n\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBACtCC,EAAoB,qCAeb,SAASH,EAAe,CAAE,SAAAI,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,EAAG,MAAAC,EAAQ,UAAW,gBAAAC,EAAkB,cAAe,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,iBAAkB,EAAIN,EAEnIO,EACJR,IAAe,OACX,CACE,gBAAiB,2BAA2BG,CAAK,IAAID,CAAO,OAAOE,CAAe,IAAIF,CAAO,MAC7F,eAAgB,WAClB,EACAF,IAAe,OACb,CACE,gBAAiB,OAAOA,CAAU,IAClC,eAAgB,QAChB,mBAAoB,QACtB,EACA,CAAC,EAET,OACE,EAAAS,QAAA,cAAC,OACC,EAAE,IACF,MAAO,CACL,GAAGD,EACH,OAAAH,EACA,MAAAC,EACA,aAAcC,EACd,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,UAAW,OACb,GAECR,CACH,CAEJ",
6
- "names": ["PreviewSection_exports", "__export", "PreviewSection", "__toCommonJS", "import_react", "import_kookie_ui", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle", "React"]
4
+ "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"],
5
+ "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",
6
+ "names": ["PreviewSection_exports", "__export", "PreviewSection", "__toCommonJS", "import_react", "import_kookie_ui", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "React", "dotsStyle", "imageStyle"]
7
7
  }
package/dist/esm/components/code/CodeBlock.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { CodeBlockProps } from "./types";
3
- export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element | null;
3
+ export declare function CodeBlock({ children, code, language, preview, showCopy, showLanguage, lightTheme, darkTheme, background, backgroundProps, }: CodeBlockProps): React.JSX.Element;
4
4
  //# sourceMappingURL=CodeBlock.d.ts.map
package/dist/esm/components/code/CodeBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,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"}
1
+ {"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 CHANGED
@@ -1,2 +1,2 @@
1
- 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};
1
+ 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};
2
2
  //# sourceMappingURL=CodeBlock.js.map
package/dist/esm/components/code/CodeBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/CodeBlock.tsx"],
4
- "sourcesContent": ["import React, { 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"],
5
- "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",
6
- "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"]
4
+ "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"],
5
+ "mappings": "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",
6
+ "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"]
7
7
  }
package/dist/esm/components/code/PreviewSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewSection.d.ts","sourceRoot":"","sources":["../../../../src/components/code/PreviewSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,eAAoB,EAAE,EAAE,mBAAmB,qBAkC1G"}
1
+ {"version":3,"file":"PreviewSection.d.ts","sourceRoot":"","sources":["../../../../src/components/code/PreviewSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,eAAoB,EAAE,EAAE,mBAAmB,qBAqD1G"}
package/dist/esm/components/code/PreviewSection.js CHANGED
@@ -1,2 +1,2 @@
1
- import g from"react";import{Box as u}from"@kushagradhawan/kookie-ui";function b({children:o,background:r="none",backgroundProps:t={}}){const{dotSize:e=2,color:n="#d4d4d8",backgroundColor:i="transparent",height:d="auto",width:a="100%",radius:c="var(--radius-3)"}=t,s=r==="dots"?{backgroundImage:`radial-gradient(circle, ${n} ${e}px, ${i} ${e}px)`,backgroundSize:"20px 20px"}:r!=="none"?{backgroundImage:`url(${r})`,backgroundSize:"cover",backgroundPosition:"center"}:{};return g.createElement(u,{p:"4",style:{...s,height:d,width:a,borderRadius:c,display:"flex",alignItems:"center",justifyContent:"center",minHeight:"200px"}},o)}export{b as PreviewSection};
1
+ 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};
2
2
  //# sourceMappingURL=PreviewSection.js.map
package/dist/esm/components/code/PreviewSection.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/code/PreviewSection.tsx"],
4
- "sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport { Box } 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 = 2, color = \"#d4d4d8\", backgroundColor = \"transparent\", height = \"auto\", width = \"100%\", radius = \"var(--radius-3)\" } = backgroundProps;\n\n const backgroundStyle =\n background === \"dots\"\n ? {\n backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, ${backgroundColor} ${dotSize}px)`,\n backgroundSize: \"20px 20px\",\n }\n : background !== \"none\"\n ? {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n }\n : {};\n\n return (\n <Box\n p=\"4\"\n style={{\n ...backgroundStyle,\n height,\n width,\n borderRadius: radius,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"200px\",\n }}\n >\n {children}\n </Box>\n );\n}\n\n"],
5
- "mappings": "AAAA,OAAOA,MAA+B,QACtC,OAAS,OAAAC,MAAW,4BAeb,SAASC,EAAe,CAAE,SAAAC,EAAU,WAAAC,EAAa,OAAQ,gBAAAC,EAAkB,CAAC,CAAE,EAAwB,CAC3G,KAAM,CAAE,QAAAC,EAAU,EAAG,MAAAC,EAAQ,UAAW,gBAAAC,EAAkB,cAAe,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,iBAAkB,EAAIN,EAEnIO,EACJR,IAAe,OACX,CACE,gBAAiB,2BAA2BG,CAAK,IAAID,CAAO,OAAOE,CAAe,IAAIF,CAAO,MAC7F,eAAgB,WAClB,EACAF,IAAe,OACb,CACE,gBAAiB,OAAOA,CAAU,IAClC,eAAgB,QAChB,mBAAoB,QACtB,EACA,CAAC,EAET,OACEJ,EAAA,cAACC,EAAA,CACC,EAAE,IACF,MAAO,CACL,GAAGW,EACH,OAAAH,EACA,MAAAC,EACA,aAAcC,EACd,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,UAAW,OACb,GAECR,CACH,CAEJ",
6
- "names": ["React", "Box", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle"]
4
+ "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"],
5
+ "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",
6
+ "names": ["React", "Card", "Flex", "Theme", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "dotsStyle", "imageStyle"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-blocks",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
@@ -93,10 +93,10 @@
93
93
  "dependencies": {
94
94
  "@hugeicons/core-free-icons": "^2.0.0",
95
95
  "@hugeicons/react": "^1.1.1",
96
- "@kushagradhawan/kookie-ui": "latest",
97
96
  "shiki": "^1.24.2"
98
97
  },
99
98
  "peerDependencies": {
99
+ "@kushagradhawan/kookie-ui": ">=0.1.0",
100
100
  "react": "^18.0.0 || ^19.0.0",
101
101
  "react-dom": "^18.0.0 || ^19.0.0"
102
102
  },