@kushagradhawan/kookie-blocks 0.1.18 → 0.1.19

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

@@ -4,4 +4,5 @@ export { DocsSidebar } from './docs-sidebar.js';
 export { DocsPageHeader } from './docs-page-header.js';
 export { DocsPage } from './docs-page.js';
 export { DocsShell } from './docs-shell.js';
+export { PreviewBlock } from './preview-block.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)a(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of m(o))!n.call(e,t)&&t!==r&&a(e,t,{get:()=>o[t],enumerable:!(s=D(o,t))||s.enumerable});return e};var v=e=>l(a({},"__esModule",{value:!0}),e);var C={};x(C,{DocsPage:()=>i.DocsPage,DocsPageHeader:()=>g.DocsPageHeader,DocsShell:()=>p.DocsShell,DocsSidebar:()=>f.DocsSidebar,TableOfContents:()=>c.TableOfContents});module.exports=v(C);var c=require("./table-of-contents.js"),f=require("./docs-sidebar.js"),g=require("./docs-page-header.js"),i=require("./docs-page.js"),p=require("./docs-shell.js");
+"use strict";var a=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var l=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},v=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of n(o))!x.call(e,r)&&r!==t&&a(e,r,{get:()=>o[r],enumerable:!(s=D(o,r))||s.enumerable});return e};var P=e=>v(a({},"__esModule",{value:!0}),e);var C={};l(C,{DocsPage:()=>p.DocsPage,DocsPageHeader:()=>i.DocsPageHeader,DocsShell:()=>g.DocsShell,DocsSidebar:()=>f.DocsSidebar,PreviewBlock:()=>m.PreviewBlock,TableOfContents:()=>c.TableOfContents});module.exports=P(C);var c=require("./table-of-contents.js"),f=require("./docs-sidebar.js"),i=require("./docs-page-header.js"),p=require("./docs-page.js"),g=require("./docs-shell.js"),m=require("./preview-block.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/docs/index.ts"],
-  "sourcesContent": ["// Types\nexport type {\n  DocsNavigationItem,\n  DocsNavigationGroup,\n  DocsNavigationConfig,\n  DocsPageMeta,\n  DocsLogoConfig,\n  TocItem,\n} from './types.js';\n\n// Components\nexport { TableOfContents } from './table-of-contents.js';\nexport { DocsSidebar } from './docs-sidebar.js';\nexport { DocsPageHeader } from './docs-page-header.js';\nexport { DocsPage } from './docs-page.js';\nexport { DocsShell } from './docs-shell.js';\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4KAAAE,EAAAF,GAWA,IAAAG,EAAgC,kCAChCC,EAA4B,6BAC5BC,EAA+B,iCAC/BC,EAAyB,0BACzBC,EAA0B",
-  "names": ["docs_exports", "__export", "__toCommonJS", "import_table_of_contents", "import_docs_sidebar", "import_docs_page_header", "import_docs_page", "import_docs_shell"]
+  "sourcesContent": ["// Types\nexport type {\n  DocsNavigationItem,\n  DocsNavigationGroup,\n  DocsNavigationConfig,\n  DocsPageMeta,\n  DocsLogoConfig,\n  TocItem,\n} from './types.js';\n\n// Components\nexport { TableOfContents } from './table-of-contents.js';\nexport { DocsSidebar } from './docs-sidebar.js';\nexport { DocsPageHeader } from './docs-page-header.js';\nexport { DocsPage } from './docs-page.js';\nexport { DocsShell } from './docs-shell.js';\nexport { PreviewBlock } from './preview-block.js';\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4MAAAE,EAAAF,GAWA,IAAAG,EAAgC,kCAChCC,EAA4B,6BAC5BC,EAA+B,iCAC/BC,EAAyB,0BACzBC,EAA0B,2BAC1BC,EAA6B",
+  "names": ["docs_exports", "__export", "__toCommonJS", "import_table_of_contents", "import_docs_sidebar", "import_docs_page_header", "import_docs_page", "import_docs_shell", "import_preview_block"]
 }

package/dist/cjs/components/docs/preview-block.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ReactNode } from "react";
+export interface PreviewBlockProps {
+    children: ReactNode;
+    /** Background style for the preview */
+    background?: "none" | "dots" | "grid";
+}
+/**
+ * PreviewBlock - displays a live preview of a component
+ *
+ * Use this component to showcase live examples of components in documentation.
+ * Shows only the rendered component, not the code.
+ *
+ * @example
+ * ```tsx
+ * <PreviewBlock background="dots">
+ *   <Button>Example Button</Button>
+ * </PreviewBlock>
+ * ```
+ */
+export declare function PreviewBlock({ children, background, }: PreviewBlockProps): React.JSX.Element;
+//# sourceMappingURL=preview-block.d.ts.map

package/dist/cjs/components/docs/preview-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-block.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/preview-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAmB,GACpB,EAAE,iBAAiB,qBAmCnB"}

package/dist/cjs/components/docs/preview-block.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var c=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var a in e)i(r,a,{get:e[a],enumerable:!0})},g=(r,e,a,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!x.call(r,o)&&o!==a&&i(r,o,{get:()=>e[o],enumerable:!(d=p(e,o))||d.enumerable});return r};var k=(r,e,a)=>(a=r!=null?c(s(r)):{},g(e||!r||!r.__esModule?i(a,"default",{value:r,enumerable:!0}):a,r)),m=r=>g(i({},"__esModule",{value:!0}),r);var b={};u(b,{PreviewBlock:()=>y});module.exports=m(b);var t=k(require("react")),n=require("@kushagradhawan/kookie-ui");function y({children:r,background:e="dots"}){return t.default.createElement(n.Box,{my:"3"},t.default.createElement(n.Card,{size:"1",variant:"soft"},t.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",minHeight:"240px",style:e==="dots"?{backgroundImage:"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:e==="grid"?{backgroundImage:"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:void 0},t.default.createElement(n.Theme,{fontFamily:"sans"},r))))}
+//# sourceMappingURL=preview-block.js.map

package/dist/cjs/components/docs/preview-block.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/preview-block.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport React from \"react\";\nimport { Box, Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\nimport type { ReactNode } from \"react\";\n\nexport interface PreviewBlockProps {\n  children: ReactNode;\n  /** Background style for the preview */\n  background?: \"none\" | \"dots\" | \"grid\";\n}\n\n/**\n * PreviewBlock - displays a live preview of a component\n *\n * Use this component to showcase live examples of components in documentation.\n * Shows only the rendered component, not the code.\n *\n * @example\n * ```tsx\n * <PreviewBlock background=\"dots\">\n *   <Button>Example Button</Button>\n * </PreviewBlock>\n * ```\n */\nexport function PreviewBlock({\n  children,\n  background = \"dots\",\n}: PreviewBlockProps) {\n  const backgroundStyle =\n    background === \"dots\"\n      ? {\n          backgroundImage:\n            \"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)\",\n          backgroundSize: \"24px 24px\",\n          backgroundPosition: \"center\",\n          backgroundColor: \"var(--gray-2)\",\n        }\n      : background === \"grid\"\n        ? {\n            backgroundImage:\n              \"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)\",\n            backgroundSize: \"24px 24px\",\n            backgroundPosition: \"center\",\n            backgroundColor: \"var(--gray-2)\",\n          }\n        : undefined;\n\n  return (\n    <Box my=\"3\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex\n          justify=\"center\"\n          align=\"center\"\n          py=\"4\"\n          minHeight=\"240px\"\n          style={backgroundStyle}\n        >\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    </Box>\n  );\n}\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAkB,oBAClBC,EAAuC,qCAsBhC,SAASH,EAAa,CAC3B,SAAAI,EACA,WAAAC,EAAa,MACf,EAAsB,CAoBpB,OACE,EAAAC,QAAA,cAAC,OAAI,GAAG,KACN,EAAAA,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QACC,QAAQ,SACR,MAAM,SACN,GAAG,IACH,UAAU,QACV,MA1BND,IAAe,OACX,CACE,gBACE,8DACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACAA,IAAe,OACb,CACE,gBACE,kHACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACA,QAYA,EAAAC,QAAA,cAAC,SAAM,WAAW,QAAQF,CAAS,CACrC,CACF,CACF,CAEJ",
+  "names": ["preview_block_exports", "__export", "PreviewBlock", "__toCommonJS", "import_react", "import_kookie_ui", "children", "background", "React"]
+}

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

@@ -4,4 +4,5 @@ export { DocsSidebar } from './docs-sidebar.js';
 export { DocsPageHeader } from './docs-page-header.js';
 export { DocsPage } from './docs-page.js';
 export { DocsShell } from './docs-shell.js';
+export { PreviewBlock } from './preview-block.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -1,2 +1,2 @@
-import{TableOfContents as t}from"./table-of-contents.js";import{DocsSidebar as a}from"./docs-sidebar.js";import{DocsPageHeader as c}from"./docs-page-header.js";import{DocsPage as g}from"./docs-page.js";import{DocsShell as p}from"./docs-shell.js";export{g as DocsPage,c as DocsPageHeader,p as DocsShell,a as DocsSidebar,t as TableOfContents};
+import{TableOfContents as r}from"./table-of-contents.js";import{DocsSidebar as a}from"./docs-sidebar.js";import{DocsPageHeader as c}from"./docs-page-header.js";import{DocsPage as i}from"./docs-page.js";import{DocsShell as g}from"./docs-shell.js";import{PreviewBlock as D}from"./preview-block.js";export{i as DocsPage,c as DocsPageHeader,g as DocsShell,a as DocsSidebar,D as PreviewBlock,r as TableOfContents};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/docs/index.ts"],
-  "sourcesContent": ["// Types\nexport type {\n  DocsNavigationItem,\n  DocsNavigationGroup,\n  DocsNavigationConfig,\n  DocsPageMeta,\n  DocsLogoConfig,\n  TocItem,\n} from './types.js';\n\n// Components\nexport { TableOfContents } from './table-of-contents.js';\nexport { DocsSidebar } from './docs-sidebar.js';\nexport { DocsPageHeader } from './docs-page-header.js';\nexport { DocsPage } from './docs-page.js';\nexport { DocsShell } from './docs-shell.js';\n"],
-  "mappings": "AAWA,OAAS,mBAAAA,MAAuB,yBAChC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,wBAC/B,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB",
-  "names": ["TableOfContents", "DocsSidebar", "DocsPageHeader", "DocsPage", "DocsShell"]
+  "sourcesContent": ["// Types\nexport type {\n  DocsNavigationItem,\n  DocsNavigationGroup,\n  DocsNavigationConfig,\n  DocsPageMeta,\n  DocsLogoConfig,\n  TocItem,\n} from './types.js';\n\n// Components\nexport { TableOfContents } from './table-of-contents.js';\nexport { DocsSidebar } from './docs-sidebar.js';\nexport { DocsPageHeader } from './docs-page-header.js';\nexport { DocsPage } from './docs-page.js';\nexport { DocsShell } from './docs-shell.js';\nexport { PreviewBlock } from './preview-block.js';\n"],
+  "mappings": "AAWA,OAAS,mBAAAA,MAAuB,yBAChC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,wBAC/B,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB,kBAC1B,OAAS,gBAAAC,MAAoB",
+  "names": ["TableOfContents", "DocsSidebar", "DocsPageHeader", "DocsPage", "DocsShell", "PreviewBlock"]
 }

package/dist/esm/components/docs/preview-block.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ReactNode } from "react";
+export interface PreviewBlockProps {
+    children: ReactNode;
+    /** Background style for the preview */
+    background?: "none" | "dots" | "grid";
+}
+/**
+ * PreviewBlock - displays a live preview of a component
+ *
+ * Use this component to showcase live examples of components in documentation.
+ * Shows only the rendered component, not the code.
+ *
+ * @example
+ * ```tsx
+ * <PreviewBlock background="dots">
+ *   <Button>Example Button</Button>
+ * </PreviewBlock>
+ * ```
+ */
+export declare function PreviewBlock({ children, background, }: PreviewBlockProps): React.JSX.Element;
+//# sourceMappingURL=preview-block.d.ts.map

package/dist/esm/components/docs/preview-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-block.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/preview-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAmB,GACpB,EAAE,iBAAiB,qBAmCnB"}

package/dist/esm/components/docs/preview-block.js

@@ -0,0 +1,2 @@
+"use client";import r from"react";import{Box as n,Card as o,Flex as t,Theme as i}from"@kushagradhawan/kookie-ui";function p({children:a,background:e="dots"}){return r.createElement(n,{my:"3"},r.createElement(o,{size:"1",variant:"soft"},r.createElement(t,{justify:"center",align:"center",py:"4",minHeight:"240px",style:e==="dots"?{backgroundImage:"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:e==="grid"?{backgroundImage:"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:void 0},r.createElement(i,{fontFamily:"sans"},a))))}export{p as PreviewBlock};
+//# sourceMappingURL=preview-block.js.map

package/dist/esm/components/docs/preview-block.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/preview-block.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport React from \"react\";\nimport { Box, Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\nimport type { ReactNode } from \"react\";\n\nexport interface PreviewBlockProps {\n  children: ReactNode;\n  /** Background style for the preview */\n  background?: \"none\" | \"dots\" | \"grid\";\n}\n\n/**\n * PreviewBlock - displays a live preview of a component\n *\n * Use this component to showcase live examples of components in documentation.\n * Shows only the rendered component, not the code.\n *\n * @example\n * ```tsx\n * <PreviewBlock background=\"dots\">\n *   <Button>Example Button</Button>\n * </PreviewBlock>\n * ```\n */\nexport function PreviewBlock({\n  children,\n  background = \"dots\",\n}: PreviewBlockProps) {\n  const backgroundStyle =\n    background === \"dots\"\n      ? {\n          backgroundImage:\n            \"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)\",\n          backgroundSize: \"24px 24px\",\n          backgroundPosition: \"center\",\n          backgroundColor: \"var(--gray-2)\",\n        }\n      : background === \"grid\"\n        ? {\n            backgroundImage:\n              \"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)\",\n            backgroundSize: \"24px 24px\",\n            backgroundPosition: \"center\",\n            backgroundColor: \"var(--gray-2)\",\n          }\n        : undefined;\n\n  return (\n    <Box my=\"3\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex\n          justify=\"center\"\n          align=\"center\"\n          py=\"4\"\n          minHeight=\"240px\"\n          style={backgroundStyle}\n        >\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    </Box>\n  );\n}\n"],
+  "mappings": "aAEA,OAAOA,MAAW,QAClB,OAAS,OAAAC,EAAK,QAAAC,EAAM,QAAAC,EAAM,SAAAC,MAAa,4BAsBhC,SAASC,EAAa,CAC3B,SAAAC,EACA,WAAAC,EAAa,MACf,EAAsB,CAoBpB,OACEP,EAAA,cAACC,EAAA,CAAI,GAAG,KACND,EAAA,cAACE,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBF,EAAA,cAACG,EAAA,CACC,QAAQ,SACR,MAAM,SACN,GAAG,IACH,UAAU,QACV,MA1BNI,IAAe,OACX,CACE,gBACE,8DACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACAA,IAAe,OACb,CACE,gBACE,kHACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACA,QAYAP,EAAA,cAACI,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CACF,CAEJ",
+  "names": ["React", "Box", "Card", "Flex", "Theme", "PreviewBlock", "children", "background"]
+}

package/package.json

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

package/src/components/docs/index.ts

@@ -14,3 +14,4 @@ export { DocsSidebar } from './docs-sidebar.js';
 export { DocsPageHeader } from './docs-page-header.js';
 export { DocsPage } from './docs-page.js';
 export { DocsShell } from './docs-shell.js';
+export { PreviewBlock } from './preview-block.js';

package/src/components/docs/preview-block.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { Box, Card, Flex, Theme } from "@kushagradhawan/kookie-ui";
+import type { ReactNode } from "react";
+
+export interface PreviewBlockProps {
+  children: ReactNode;
+  /** Background style for the preview */
+  background?: "none" | "dots" | "grid";
+}
+
+/**
+ * PreviewBlock - displays a live preview of a component
+ *
+ * Use this component to showcase live examples of components in documentation.
+ * Shows only the rendered component, not the code.
+ *
+ * @example
+ * ```tsx
+ * <PreviewBlock background="dots">
+ *   <Button>Example Button</Button>
+ * </PreviewBlock>
+ * ```
+ */
+export function PreviewBlock({
+  children,
+  background = "dots",
+}: PreviewBlockProps) {
+  const backgroundStyle =
+    background === "dots"
+      ? {
+          backgroundImage:
+            "radial-gradient(circle, var(--gray-6) 1px, transparent 1px)",
+          backgroundSize: "24px 24px",
+          backgroundPosition: "center",
+          backgroundColor: "var(--gray-2)",
+        }
+      : background === "grid"
+        ? {
+            backgroundImage:
+              "linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)",
+            backgroundSize: "24px 24px",
+            backgroundPosition: "center",
+            backgroundColor: "var(--gray-2)",
+          }
+        : undefined;
+
+  return (
+    <Box my="3">
+      <Card size="1" variant="soft">
+        <Flex
+          justify="center"
+          align="center"
+          py="4"
+          minHeight="240px"
+          style={backgroundStyle}
+        >
+          <Theme fontFamily="sans">{children}</Theme>
+        </Flex>
+      </Card>
+    </Box>
+  );
+}