@kushagradhawan/kookie-blocks 0.1.1 → 0.1.3

package/components.css

@@ -1 +1,101 @@
 /* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+
+/* ============================================
+   Code Block Component Styles
+   ============================================ */
+
+/* Code block wrapper - constrain width in flex containers */
+
+.code-block-wrapper {
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Code block content (the pre part, below the header) */
+
+.code-block-content {
+  width: 100%;
+  min-width: 0;
+}
+
+.code-block-wrapper pre,
+.code-block-wrapper .code-block-content pre {
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure Shiki-generated pre elements fill width */
+
+.code-block-content > pre {
+  width: 100% !important;
+  min-width: 0;
+}
+
+/* Code elements inside pre */
+
+.code-block-wrapper pre code,
+.code-block-wrapper .code-block-content pre code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-2);
+  line-height: 1.75;
+  background: none !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  counter-reset: line;
+}
+
+/* Shiki line spans */
+
+.code-block-wrapper pre code .line,
+.code-block-wrapper .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 {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
+  font-size: var(--font-size-1);
+  color: var(--gray-a9);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  margin-right: var(--space-4);
+}
+
+/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
+
+.code-block-wrapper pre.shiki span {
+  color: var(--shiki-light) !important;
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  -webkit-text-decoration: var(--shiki-light-text-decoration);
+          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 {
+  color: var(--shiki-dark) !important;
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  -webkit-text-decoration: var(--shiki-dark-text-decoration);
+          text-decoration: var(--shiki-dark-text-decoration);
+}

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

@@ -0,0 +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;
+//# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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))))}
+//# sourceMappingURL=CodeBlock.js.map

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

@@ -0,0 +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"]
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface CopyButtonProps {
+    code: string;
+}
+export declare function CopyButton({ code }: CopyButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,qBAoCnD"}

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

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(t,o)=>{for(var e in o)u(t,e,{get:o[e],enumerable:!0})},p=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of m(o))!y.call(t,i)&&i!==e&&u(t,i,{get:()=>o[i],enumerable:!(n=l(o,i))||n.enumerable});return t};var d=(t,o,e)=>(e=t!=null?f(C(t)):{},p(o||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),B=t=>p(u({},"__esModule",{value:!0}),t);var b={};T(b,{CopyButton:()=>g});module.exports=B(b);var r=d(require("react")),a=require("@kushagradhawan/kookie-ui"),s=require("@hugeicons/react"),c=require("@hugeicons/core-free-icons");function g({code:t}){const[o,e]=(0,r.useState)(!1),n=(0,r.useRef)(null);(0,r.useEffect)(()=>()=>{n.current&&clearTimeout(n.current)},[]);const i=(0,r.useCallback)(async()=>{if(t.trim())try{await navigator.clipboard.writeText(t),e(!0),n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{e(!1)},2e3)}catch{}},[t]);return r.default.createElement(a.Button,{size:"2",tooltip:o?"Copied":"Copy code",variant:"ghost",onClick:i,"aria-label":o?"Copied":"Copy code"},r.default.createElement(s.HugeiconsIcon,{icon:o?c.Tick01Icon:c.Copy01Icon})," Copy")}
+//# sourceMappingURL=CopyButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/CopyButton.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon } from \"@hugeicons/core-free-icons\";\n\ninterface CopyButtonProps {\n  code: string;\n}\n\nexport function CopyButton({ code }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n\n      resetTimeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  return (\n    <Button size=\"2\" tooltip={copied ? \"Copied\" : \"Copy code\"} variant=\"ghost\" onClick={handleCopy} aria-label={copied ? \"Copied\" : \"Copy code\"}>\n      <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy\n    </Button>\n  );\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAgE,oBAChEC,EAAuB,qCACvBD,EAA8B,4BAC9BE,EAAuC,sCAMhC,SAASJ,EAAW,CAAE,KAAAK,CAAK,EAAoB,CACpD,KAAM,CAACC,EAAQC,CAAS,KAAI,YAAS,EAAK,EACpCC,KAAkB,UAA6C,IAAI,KAEzE,aAAU,IACD,IAAM,CACPA,EAAgB,SAClB,aAAaA,EAAgB,OAAO,CAExC,EACC,CAAC,CAAC,EAEL,MAAMC,KAAa,eAAY,SAAY,CACzC,GAAKJ,EAAK,KAAK,EAEf,GAAI,CACF,MAAM,UAAU,UAAU,UAAUA,CAAI,EACxCE,EAAU,EAAI,EAEVC,EAAgB,SAClB,aAAaA,EAAgB,OAAO,EAGtCA,EAAgB,QAAU,WAAW,IAAM,CACzCD,EAAU,EAAK,CACjB,EAAG,GAAI,CACT,MAAQ,CAER,CACF,EAAG,CAACF,CAAI,CAAC,EAET,OACE,EAAAK,QAAA,cAAC,UAAO,KAAK,IAAI,QAASJ,EAAS,SAAW,YAAa,QAAQ,QAAQ,QAASG,EAAY,aAAYH,EAAS,SAAW,aAC9H,EAAAI,QAAA,cAAC,iBAAc,KAAMJ,EAAS,aAAa,aAAY,EAAE,OAC3D,CAEJ",
+  "names": ["CopyButton_exports", "__export", "CopyButton", "__toCommonJS", "import_react", "import_kookie_ui", "import_core_free_icons", "code", "copied", "setCopied", "resetTimeoutRef", "handleCopy", "React"]
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface LanguageBadgeProps {
+    language: string;
+}
+export declare function LanguageBadge({ language }: LanguageBadgeProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=LanguageBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/code/LanguageBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAkBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAQ7D"}

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

@@ -0,0 +1,2 @@
+"use strict";var u=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var l=(a,t)=>{for(var e in t)n(a,e,{get:t[e],enumerable:!0})},o=(a,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of c(t))!h.call(a,g)&&g!==e&&n(a,g,{get:()=>t[g],enumerable:!(r=p(t,g))||r.enumerable});return a};var f=(a,t,e)=>(e=a!=null?u(d(a)):{},o(t||!a||!a.__esModule?n(e,"default",{value:a,enumerable:!0}):e,a)),L=a=>o(n({},"__esModule",{value:!0}),a);var y={};l(y,{LanguageBadge:()=>x});module.exports=L(y);var s=f(require("react")),i=require("@kushagradhawan/kookie-ui");function m(a){return{js:"JS",jsx:"JSX",ts:"TS",tsx:"TSX",py:"Python",rb:"Ruby",sh:"Shell",bash:"Bash",text:"plaintext"}[a.toLowerCase()]||a}function x({language:a}){const t=m(a);return s.default.createElement(i.Code,{size:"1",color:"gray",highContrast:!0},t)}
+//# sourceMappingURL=LanguageBadge.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\ninterface LanguageBadgeProps {\n  language: string;\n}\n\nfunction formatLanguage(lang: string): string {\n  const languageMap: Record<string, string> = {\n    js: \"JS\",\n    jsx: \"JSX\",\n    ts: \"TS\",\n    tsx: \"TSX\",\n    py: \"Python\",\n    rb: \"Ruby\",\n    sh: \"Shell\",\n    bash: \"Bash\",\n    text: \"plaintext\",\n  };\n\n  return languageMap[lang.toLowerCase()] || lang;\n}\n\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n  const displayLanguage = formatLanguage(language);\n\n  return (\n    <Code size=\"1\" color=\"gray\" highContrast>\n      {displayLanguage}\n    </Code>\n  );\n}\n\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkB,oBAClBC,EAAqB,qCAMrB,SAASC,EAAeC,EAAsB,CAa5C,MAZ4C,CAC1C,GAAI,KACJ,IAAK,MACL,GAAI,KACJ,IAAK,MACL,GAAI,SACJ,GAAI,OACJ,GAAI,QACJ,KAAM,OACN,KAAM,WACR,EAEmBA,EAAK,YAAY,CAAC,GAAKA,CAC5C,CAEO,SAASL,EAAc,CAAE,SAAAM,CAAS,EAAuB,CAC9D,MAAMC,EAAkBH,EAAeE,CAAQ,EAE/C,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCD,CACH,CAEJ",
+  "names": ["LanguageBadge_exports", "__export", "LanguageBadge", "__toCommonJS", "import_react", "import_kookie_ui", "formatLanguage", "lang", "language", "displayLanguage", "React"]
+}

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

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from "react";
+interface PreviewSectionProps {
+    children: ReactNode;
+    background?: "none" | "dots" | string;
+    backgroundProps?: {
+        dotSize?: number;
+        color?: string;
+        backgroundColor?: string;
+        height?: string;
+        width?: string;
+        radius?: string;
+    };
+}
+export declare function PreviewSection({ children, background, backgroundProps }: PreviewSectionProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PreviewSection.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/PreviewSection.tsx"],
+  "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"],
+  "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",
+  "names": ["PreviewSection_exports", "__export", "PreviewSection", "__toCommonJS", "import_react", "import_kookie_ui", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle", "React"]
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface SyntaxHighlighterProps {
+    code: string;
+    language: string;
+    lightTheme?: string;
+    darkTheme?: string;
+}
+export declare function SyntaxHighlighter({ code, language, lightTheme, darkTheme }: SyntaxHighlighterProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SyntaxHighlighter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/code/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAgC,EAAE,SAA8B,EAAE,EAAE,sBAAsB,qBAuC7I"}

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

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!H.call(t,r)&&r!==n&&o(t,r,{get:()=>e[r],enumerable:!(l=m(e,r))||l.enumerable});return t};var T=(t,e,n)=>(n=t!=null?f(p(t)):{},a(e||!t||!t.__esModule?o(n,"default",{value:t,enumerable:!0}):n,t)),_=t=>a(o({},"__esModule",{value:!0}),t);var k={};E(k,{SyntaxHighlighter:()=>S});module.exports=_(k);var i=T(require("react")),c=require("shiki"),s=require("@kushagradhawan/kookie-ui");const x="one-light",y="one-dark-pro";function S({code:t,language:e,lightTheme:n=x,darkTheme:l=y}){const[r,h]=(0,i.useState)(null);return(0,i.useEffect)(()=>{let g=!1;return(0,c.codeToHtml)(t,{lang:e,themes:{light:n,dark:l},defaultColor:!1}).then(d=>{g||h(d)}).catch(()=>{g||h(null)}),()=>{g=!0}},[t,e,n,l]),r?i.default.createElement(s.Box,{className:"code-block-content",width:"100%",style:{minWidth:0},dangerouslySetInnerHTML:{__html:r}}):i.default.createElement("pre",{className:"code-block-content"},i.default.createElement(s.Code,{size:"3"},t))}
+//# sourceMappingURL=SyntaxHighlighter.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/SyntaxHighlighter.tsx"],
+  "sourcesContent": ["import React, { useEffect, useState } from \"react\";\nimport { codeToHtml } from \"shiki\";\nimport { Box, Code } from \"@kushagradhawan/kookie-ui\";\n\ninterface SyntaxHighlighterProps {\n  code: string;\n  language: string;\n  lightTheme?: string;\n  darkTheme?: string;\n}\n\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\nexport function SyntaxHighlighter({ code, language, lightTheme = DEFAULT_LIGHT_THEME, darkTheme = DEFAULT_DARK_THEME }: SyntaxHighlighterProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    codeToHtml(code, {\n      lang: language,\n      themes: {\n        light: lightTheme,\n        dark: darkTheme,\n      },\n      defaultColor: false,\n    })\n      .then((html) => {\n        if (!cancelled) {\n          setHighlighted(html);\n        }\n      })\n      .catch(() => {\n        if (!cancelled) {\n          setHighlighted(null);\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, lightTheme, darkTheme]);\n\n  if (!highlighted) {\n    return (\n      <pre className=\"code-block-content\">\n        <Code size=\"3\">{code}</Code>\n      </pre>\n    );\n  }\n\n  return <Box className=\"code-block-content\" width=\"100%\" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />;\n}\n\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA2C,oBAC3CC,EAA2B,iBAC3BC,EAA0B,qCAS1B,MAAMC,EAAsB,YACtBC,EAAqB,eAEpB,SAASN,EAAkB,CAAE,KAAAO,EAAM,SAAAC,EAAU,WAAAC,EAAaJ,EAAqB,UAAAK,EAAYJ,CAAmB,EAA2B,CAC9I,KAAM,CAACK,EAAaC,CAAc,KAAI,YAAwB,IAAI,EA6BlE,SA3BA,aAAU,IAAM,CACd,IAAIC,EAAY,GAEhB,uBAAWN,EAAM,CACf,KAAMC,EACN,OAAQ,CACN,MAAOC,EACP,KAAMC,CACR,EACA,aAAc,EAChB,CAAC,EACE,KAAMI,GAAS,CACTD,GACHD,EAAeE,CAAI,CAEvB,CAAC,EACA,MAAM,IAAM,CACND,GACHD,EAAe,IAAI,CAEvB,CAAC,EAEI,IAAM,CACXC,EAAY,EACd,CACF,EAAG,CAACN,EAAMC,EAAUC,EAAYC,CAAS,CAAC,EAErCC,EAQE,EAAAI,QAAA,cAAC,OAAI,UAAU,qBAAqB,MAAM,OAAO,MAAO,CAAE,SAAU,CAAE,EAAG,wBAAyB,CAAE,OAAQJ,CAAY,EAAG,EAN9H,EAAAI,QAAA,cAAC,OAAI,UAAU,sBACb,EAAAA,QAAA,cAAC,QAAK,KAAK,KAAKR,CAAK,CACvB,CAKN",
+  "names": ["SyntaxHighlighter_exports", "__export", "SyntaxHighlighter", "__toCommonJS", "import_react", "import_shiki", "import_kookie_ui", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "code", "language", "lightTheme", "darkTheme", "highlighted", "setHighlighted", "cancelled", "html", "React"]
+}

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

@@ -0,0 +1,3 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},s=(e,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of k(o))!l.call(e,p)&&p!==r&&t(e,p,{get:()=>o[p],enumerable:!(c=f(o,p))||c.enumerable});return e};var x=e=>s(t({},"__esModule",{value:!0}),e);var y={};m(y,{CodeBlock:()=>d.CodeBlock});module.exports=x(y);var d=require("./CodeBlock");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/index.ts"],
+  "sourcesContent": ["// Public API - only CodeBlock is exported\nexport { CodeBlock } from \"./CodeBlock\";\nexport type { CodeBlockProps } from \"./types\";\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4CAAAE,EAAAF,GACA,IAAAG,EAA0B",
+  "names": ["code_exports", "__export", "__toCommonJS", "import_CodeBlock"]
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface CodeBlockProps {
+    children?: ReactNode;
+    code?: string;
+    language?: string;
+    preview?: ReactNode;
+    showCopy?: boolean;
+    showLanguage?: boolean;
+    file?: string;
+    collapsible?: boolean;
+    collapsedHeight?: number;
+    background?: "none" | "dots" | string;
+    backgroundProps?: {
+        dotSize?: number;
+        color?: string;
+        backgroundColor?: string;
+        height?: string;
+        width?: string;
+        radius?: string;
+    };
+    lightTheme?: string;
+    darkTheme?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/code/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,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;IAGF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,2 @@
+"use strict";var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!s.call(o,r)&&r!==i&&t(o,r,{get:()=>e[r],enumerable:!(n=g(e,r))||n.enumerable});return o};var l=o=>d(t({},"__esModule",{value:!0}),o);var c={};module.exports=l(c);
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/types.ts"],
+  "sourcesContent": ["import type { ReactNode } from \"react\";\n\nexport interface CodeBlockProps {\n  // Content modes (mutually exclusive)\n  children?: ReactNode; // Pre-highlighted HTML from build-time (MDX)\n  code?: string; // Raw code to highlight at runtime\n  language?: string; // Language for runtime highlighting\n\n  // Optional features\n  preview?: ReactNode; // Preview component (for docs)\n  showCopy?: boolean; // Default: true\n  showLanguage?: boolean; // Default: true\n  file?: string; // File path label\n  collapsible?: boolean; // Enable expand/collapse\n  collapsedHeight?: number; // Default: 360px\n\n  // Preview styling (for kookie-ui docs)\n  background?: \"none\" | \"dots\" | string; // Background type\n  backgroundProps?: {\n    dotSize?: number;\n    color?: string;\n    backgroundColor?: string;\n    height?: string;\n    width?: string;\n    radius?: string;\n  };\n\n  // Theme\n  lightTheme?: string; // Default: 'one-light'\n  darkTheme?: string; // Default: 'one-dark-pro'\n}\n\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './code';
 export * from './hero';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/cjs/components/index.js

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("./hero"),module.exports);
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var t=(r,o,p,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of c(o))!d.call(r,m)&&m!==p&&a(r,m,{get:()=>o[m],enumerable:!(x=b(o,m))||x.enumerable});return r},f=(r,o,p)=>(t(r,o,"default"),p&&t(p,o,"default"));var g=r=>t(a({},"__esModule",{value:!0}),r);var e={};module.exports=g(e);f(e,require("./code"),module.exports);f(e,require("./hero"),module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export * from './hero';\n"],
-  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,kBAAd",
+  "sourcesContent": ["export * from './code';\nexport * from './hero';\n"],
+  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,kBAAd,gBACAE,EAAAF,EAAc,kBADd",
   "names": ["components_exports", "__toCommonJS", "__reExport"]
 }

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

@@ -0,0 +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;
+//# sourceMappingURL=CodeBlock.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"]
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface CopyButtonProps {
+    code: string;
+}
+export declare function CopyButton({ code }: CopyButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../../src/components/code/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,qBAoCnD"}

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

@@ -0,0 +1,2 @@
+import n,{useCallback as u,useEffect as c,useRef as p,useState as a}from"react";import{Button as s}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as f}from"@hugeicons/react";import{Copy01Icon as l,Tick01Icon as m}from"@hugeicons/core-free-icons";function B({code:o}){const[e,r]=a(!1),t=p(null);c(()=>()=>{t.current&&clearTimeout(t.current)},[]);const i=u(async()=>{if(o.trim())try{await navigator.clipboard.writeText(o),r(!0),t.current&&clearTimeout(t.current),t.current=setTimeout(()=>{r(!1)},2e3)}catch{}},[o]);return n.createElement(s,{size:"2",tooltip:e?"Copied":"Copy code",variant:"ghost",onClick:i,"aria-label":e?"Copied":"Copy code"},n.createElement(f,{icon:e?m:l})," Copy")}export{B as CopyButton};
+//# sourceMappingURL=CopyButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/CopyButton.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@kushagradhawan/kookie-ui\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Copy01Icon, Tick01Icon } from \"@hugeicons/core-free-icons\";\n\ninterface CopyButtonProps {\n  code: string;\n}\n\nexport function CopyButton({ code }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n\n      resetTimeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, 2000);\n    } catch {\n      // Silently fail\n    }\n  }, [code]);\n\n  return (\n    <Button size=\"2\" tooltip={copied ? \"Copied\" : \"Copy code\"} variant=\"ghost\" onClick={handleCopy} aria-label={copied ? \"Copied\" : \"Copy code\"}>\n      <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy\n    </Button>\n  );\n}\n"],
+  "mappings": "AAAA,OAAOA,GAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAChE,OAAS,UAAAC,MAAc,4BACvB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,cAAAC,EAAY,cAAAC,MAAkB,6BAMhC,SAASC,EAAW,CAAE,KAAAC,CAAK,EAAoB,CACpD,KAAM,CAACC,EAAQC,CAAS,EAAIR,EAAS,EAAK,EACpCS,EAAkBV,EAA6C,IAAI,EAEzED,EAAU,IACD,IAAM,CACPW,EAAgB,SAClB,aAAaA,EAAgB,OAAO,CAExC,EACC,CAAC,CAAC,EAEL,MAAMC,EAAab,EAAY,SAAY,CACzC,GAAKS,EAAK,KAAK,EAEf,GAAI,CACF,MAAM,UAAU,UAAU,UAAUA,CAAI,EACxCE,EAAU,EAAI,EAEVC,EAAgB,SAClB,aAAaA,EAAgB,OAAO,EAGtCA,EAAgB,QAAU,WAAW,IAAM,CACzCD,EAAU,EAAK,CACjB,EAAG,GAAI,CACT,MAAQ,CAER,CACF,EAAG,CAACF,CAAI,CAAC,EAET,OACEV,EAAA,cAACK,EAAA,CAAO,KAAK,IAAI,QAASM,EAAS,SAAW,YAAa,QAAQ,QAAQ,QAASG,EAAY,aAAYH,EAAS,SAAW,aAC9HX,EAAA,cAACM,EAAA,CAAc,KAAMK,EAASH,EAAaD,EAAY,EAAE,OAC3D,CAEJ",
+  "names": ["React", "useCallback", "useEffect", "useRef", "useState", "Button", "HugeiconsIcon", "Copy01Icon", "Tick01Icon", "CopyButton", "code", "copied", "setCopied", "resetTimeoutRef", "handleCopy"]
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface LanguageBadgeProps {
+    language: string;
+}
+export declare function LanguageBadge({ language }: LanguageBadgeProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=LanguageBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/code/LanguageBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAkBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAQ7D"}

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

@@ -0,0 +1,2 @@
+import e from"react";import{Code as g}from"@kushagradhawan/kookie-ui";function n(a){return{js:"JS",jsx:"JSX",ts:"TS",tsx:"TSX",py:"Python",rb:"Ruby",sh:"Shell",bash:"Bash",text:"plaintext"}[a.toLowerCase()]||a}function s({language:a}){const t=n(a);return e.createElement(g,{size:"1",color:"gray",highContrast:!0},t)}export{s as LanguageBadge};
+//# sourceMappingURL=LanguageBadge.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/LanguageBadge.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Code } from \"@kushagradhawan/kookie-ui\";\n\ninterface LanguageBadgeProps {\n  language: string;\n}\n\nfunction formatLanguage(lang: string): string {\n  const languageMap: Record<string, string> = {\n    js: \"JS\",\n    jsx: \"JSX\",\n    ts: \"TS\",\n    tsx: \"TSX\",\n    py: \"Python\",\n    rb: \"Ruby\",\n    sh: \"Shell\",\n    bash: \"Bash\",\n    text: \"plaintext\",\n  };\n\n  return languageMap[lang.toLowerCase()] || lang;\n}\n\nexport function LanguageBadge({ language }: LanguageBadgeProps) {\n  const displayLanguage = formatLanguage(language);\n\n  return (\n    <Code size=\"1\" color=\"gray\" highContrast>\n      {displayLanguage}\n    </Code>\n  );\n}\n\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAClB,OAAS,QAAAC,MAAY,4BAMrB,SAASC,EAAeC,EAAsB,CAa5C,MAZ4C,CAC1C,GAAI,KACJ,IAAK,MACL,GAAI,KACJ,IAAK,MACL,GAAI,SACJ,GAAI,OACJ,GAAI,QACJ,KAAM,OACN,KAAM,WACR,EAEmBA,EAAK,YAAY,CAAC,GAAKA,CAC5C,CAEO,SAASC,EAAc,CAAE,SAAAC,CAAS,EAAuB,CAC9D,MAAMC,EAAkBJ,EAAeG,CAAQ,EAE/C,OACEL,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,MAAM,OAAO,aAAY,IACrCK,CACH,CAEJ",
+  "names": ["React", "Code", "formatLanguage", "lang", "LanguageBadge", "language", "displayLanguage"]
+}

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

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from "react";
+interface PreviewSectionProps {
+    children: ReactNode;
+    background?: "none" | "dots" | string;
+    backgroundProps?: {
+        dotSize?: number;
+        color?: string;
+        backgroundColor?: string;
+        height?: string;
+        width?: string;
+        radius?: string;
+    };
+}
+export declare function PreviewSection({ children, background, backgroundProps }: PreviewSectionProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PreviewSection.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/PreviewSection.tsx"],
+  "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"],
+  "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",
+  "names": ["React", "Box", "PreviewSection", "children", "background", "backgroundProps", "dotSize", "color", "backgroundColor", "height", "width", "radius", "backgroundStyle"]
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface SyntaxHighlighterProps {
+    code: string;
+    language: string;
+    lightTheme?: string;
+    darkTheme?: string;
+}
+export declare function SyntaxHighlighter({ code, language, lightTheme, darkTheme }: SyntaxHighlighterProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SyntaxHighlighter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/code/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAgC,EAAE,SAA8B,EAAE,EAAE,sBAAsB,qBAuC7I"}

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

@@ -0,0 +1,2 @@
+import n,{useEffect as h,useState as a}from"react";import{codeToHtml as c}from"shiki";import{Box as d,Code as f}from"@kushagradhawan/kookie-ui";const m="one-light",u="one-dark-pro";function T({code:t,language:r,lightTheme:i=m,darkTheme:l=u}){const[o,s]=a(null);return h(()=>{let e=!1;return c(t,{lang:r,themes:{light:i,dark:l},defaultColor:!1}).then(g=>{e||s(g)}).catch(()=>{e||s(null)}),()=>{e=!0}},[t,r,i,l]),o?n.createElement(d,{className:"code-block-content",width:"100%",style:{minWidth:0},dangerouslySetInnerHTML:{__html:o}}):n.createElement("pre",{className:"code-block-content"},n.createElement(f,{size:"3"},t))}export{T as SyntaxHighlighter};
+//# sourceMappingURL=SyntaxHighlighter.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/SyntaxHighlighter.tsx"],
+  "sourcesContent": ["import React, { useEffect, useState } from \"react\";\nimport { codeToHtml } from \"shiki\";\nimport { Box, Code } from \"@kushagradhawan/kookie-ui\";\n\ninterface SyntaxHighlighterProps {\n  code: string;\n  language: string;\n  lightTheme?: string;\n  darkTheme?: string;\n}\n\nconst DEFAULT_LIGHT_THEME = \"one-light\";\nconst DEFAULT_DARK_THEME = \"one-dark-pro\";\n\nexport function SyntaxHighlighter({ code, language, lightTheme = DEFAULT_LIGHT_THEME, darkTheme = DEFAULT_DARK_THEME }: SyntaxHighlighterProps) {\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    codeToHtml(code, {\n      lang: language,\n      themes: {\n        light: lightTheme,\n        dark: darkTheme,\n      },\n      defaultColor: false,\n    })\n      .then((html) => {\n        if (!cancelled) {\n          setHighlighted(html);\n        }\n      })\n      .catch(() => {\n        if (!cancelled) {\n          setHighlighted(null);\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, lightTheme, darkTheme]);\n\n  if (!highlighted) {\n    return (\n      <pre className=\"code-block-content\">\n        <Code size=\"3\">{code}</Code>\n      </pre>\n    );\n  }\n\n  return <Box className=\"code-block-content\" width=\"100%\" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />;\n}\n\n"],
+  "mappings": "AAAA,OAAOA,GAAS,aAAAC,EAAW,YAAAC,MAAgB,QAC3C,OAAS,cAAAC,MAAkB,QAC3B,OAAS,OAAAC,EAAK,QAAAC,MAAY,4BAS1B,MAAMC,EAAsB,YACtBC,EAAqB,eAEpB,SAASC,EAAkB,CAAE,KAAAC,EAAM,SAAAC,EAAU,WAAAC,EAAaL,EAAqB,UAAAM,EAAYL,CAAmB,EAA2B,CAC9I,KAAM,CAACM,EAAaC,CAAc,EAAIZ,EAAwB,IAAI,EA6BlE,OA3BAD,EAAU,IAAM,CACd,IAAIc,EAAY,GAEhB,OAAAZ,EAAWM,EAAM,CACf,KAAMC,EACN,OAAQ,CACN,MAAOC,EACP,KAAMC,CACR,EACA,aAAc,EAChB,CAAC,EACE,KAAMI,GAAS,CACTD,GACHD,EAAeE,CAAI,CAEvB,CAAC,EACA,MAAM,IAAM,CACND,GACHD,EAAe,IAAI,CAEvB,CAAC,EAEI,IAAM,CACXC,EAAY,EACd,CACF,EAAG,CAACN,EAAMC,EAAUC,EAAYC,CAAS,CAAC,EAErCC,EAQEb,EAAA,cAACI,EAAA,CAAI,UAAU,qBAAqB,MAAM,OAAO,MAAO,CAAE,SAAU,CAAE,EAAG,wBAAyB,CAAE,OAAQS,CAAY,EAAG,EAN9Hb,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACK,EAAA,CAAK,KAAK,KAAKI,CAAK,CACvB,CAKN",
+  "names": ["React", "useEffect", "useState", "codeToHtml", "Box", "Code", "DEFAULT_LIGHT_THEME", "DEFAULT_DARK_THEME", "SyntaxHighlighter", "code", "language", "lightTheme", "darkTheme", "highlighted", "setHighlighted", "cancelled", "html"]
+}

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

@@ -0,0 +1,3 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+import{CodeBlock as p}from"./CodeBlock";export{p as CodeBlock};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/index.ts"],
+  "sourcesContent": ["// Public API - only CodeBlock is exported\nexport { CodeBlock } from \"./CodeBlock\";\nexport type { CodeBlockProps } from \"./types\";\n"],
+  "mappings": "AACA,OAAS,aAAAA,MAAiB",
+  "names": ["CodeBlock"]
+}