@kushagradhawan/kookie-blocks 0.1.3 → 0.1.4

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 (11) hide show
  1. package/components.css +37 -1
  2. package/dist/cjs/components/code/PreviewSection.d.ts.map +1 -1
  3. package/dist/cjs/components/code/PreviewSection.js +1 -1
  4. package/dist/cjs/components/code/PreviewSection.js.map +3 -3
  5. package/dist/esm/components/code/PreviewSection.d.ts.map +1 -1
  6. package/dist/esm/components/code/PreviewSection.js +1 -1
  7. package/dist/esm/components/code/PreviewSection.js.map +3 -3
  8. package/package.json +1 -1
  9. package/src/components/code/PreviewSection.tsx +49 -31
  10. package/src/components/index.css +35 -1
  11. package/styles.css +33 -1
package/components.css CHANGED
@@ -18,11 +18,47 @@
18
18
  .code-block-content {
19
19
  width: 100%;
20
20
  min-width: 0;
21
+ overflow-x: auto;
22
+ /* Hide scrollbars while keeping scroll functionality */
23
+ scrollbar-width: none; /* Firefox */
24
+ -ms-overflow-style: none; /* IE/Edge */
25
+ }
26
+
27
+ /* Hide scrollbars for webkit browsers */
28
+
29
+ .code-block-content::-webkit-scrollbar,
30
+ .code-block-content::-webkit-scrollbar-horizontal,
31
+ .code-block-content::-webkit-scrollbar-vertical,
32
+ .code-block-content::-webkit-scrollbar-track,
33
+ .code-block-content::-webkit-scrollbar-thumb,
34
+ .code-block-content::-webkit-scrollbar-corner {
35
+ display: none !important;
36
+ width: 0 !important;
37
+ height: 0 !important;
38
+ }
39
+
40
+ /* Also hide scrollbars on any pre/code elements inside code content */
41
+
42
+ .code-block-content pre::-webkit-scrollbar,
43
+ .code-block-content pre::-webkit-scrollbar-horizontal,
44
+ .code-block-content pre::-webkit-scrollbar-vertical,
45
+ .code-block-content pre::-webkit-scrollbar-track,
46
+ .code-block-content pre::-webkit-scrollbar-thumb,
47
+ .code-block-content pre::-webkit-scrollbar-corner,
48
+ .code-block-content code::-webkit-scrollbar,
49
+ .code-block-content code::-webkit-scrollbar-horizontal,
50
+ .code-block-content code::-webkit-scrollbar-vertical,
51
+ .code-block-content code::-webkit-scrollbar-track,
52
+ .code-block-content code::-webkit-scrollbar-thumb,
53
+ .code-block-content code::-webkit-scrollbar-corner {
54
+ display: none !important;
55
+ width: 0 !important;
56
+ height: 0 !important;
21
57
  }
22
58
 
23
59
  .code-block-wrapper pre,
24
60
  .code-block-wrapper .code-block-content pre {
25
- overflow-x: auto;
61
+ overflow-x: visible; /* Let .code-block-content handle scrolling */
26
62
  max-width: 100%;
27
63
  min-width: 0;
28
64
  margin: 0;
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 s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},u=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of S(e))!v.call(r,i)&&i!==t&&s(r,i,{get:()=>e[i],enumerable:!(a=m(e,i))||a.enumerable});return r};var P=(r,e,t)=>(t=r!=null?f(b(r)):{},u(e||!r||!r.__esModule?s(t,"default",{value:r,enumerable:!0}):t,r)),h=r=>u(s({},"__esModule",{value:!0}),r);var C={};x(C,{PreviewSection:()=>k});module.exports=h(C);var o=P(require("react")),n=require("@kushagradhawan/kookie-ui");function k({children:r,background:e="none",backgroundProps:t={}}){const{dotSize:a=24,color:i="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:d="300px",width:g="100%",radius:c="3"}=t;if(e==="none")return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4"},o.default.createElement(n.Theme,{fontFamily:"sans"},r)));if(e==="dots"){const y={backgroundImage:`radial-gradient(circle, ${i} 1px, transparent 1px)`,borderRadius:`var(--radius-${c})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:l,height:d,width:g};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:y},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}const p={backgroundImage:`url(${e})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${c})`,height:d,width:g};return o.default.createElement(n.Card,{size:"1",variant:"soft"},o.default.createElement(n.Flex,{justify:"center",align:"center",py:"4",style:p},o.default.createElement(n.Theme,{fontFamily:"sans"},r)))}
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 = \"300px\", width = \"100%\", radius = \"3\" } = backgroundProps;\n\n // Render with no background (default card styling)\n if (background === \"none\") {\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\">\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n }\n\n // Render with dots pattern background\n if (background === \"dots\") {\n const dotsStyle: React.CSSProperties = {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n height,\n width,\n };\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n }\n\n // Render with custom image background\n const imageStyle: React.CSSProperties = {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n height,\n width,\n };\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n"],
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,EAAS,QAAS,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAGtI,GAAID,IAAe,OACjB,OACE,EAAAQ,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvC,EAAAA,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMS,EAAiC,CACrC,gBAAiB,2BAA2BN,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,OAAAC,EACA,MAAAC,CACF,EAEA,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOC,GAClD,EAAAD,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMW,EAAkC,CACtC,gBAAiB,OAAOV,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,OAAAF,EACA,MAAAC,CACF,EAEA,OACE,EAAAE,QAAA,cAAC,QAAK,KAAK,IAAI,QAAQ,QACrB,EAAAA,QAAA,cAAC,QAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOE,GAClD,EAAAF,QAAA,cAAC,SAAM,WAAW,QAAQT,CAAS,CACrC,CACF,CAEJ",
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/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 t,Flex as o,Theme as i}from"@kushagradhawan/kookie-ui";function S({children:e,background:n="none",backgroundProps:c={}}){const{dotSize:a=24,color:u="var(--gray-10)",backgroundColor:l="var(--gray-2)",height:s="300px",width:d="100%",radius:g="3"}=c;if(n==="none")return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4"},r.createElement(i,{fontFamily:"sans"},e)));if(n==="dots"){const y={backgroundImage:`radial-gradient(circle, ${u} 1px, transparent 1px)`,borderRadius:`var(--radius-${g})`,backgroundSize:`${a}px ${a}px`,backgroundPosition:"center",backgroundColor:l,height:s,width:d};return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4",style:y},r.createElement(i,{fontFamily:"sans"},e)))}const p={backgroundImage:`url(${n})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:`var(--radius-${g})`,height:s,width:d};return r.createElement(t,{size:"1",variant:"soft"},r.createElement(o,{justify:"center",align:"center",py:"4",style:p},r.createElement(i,{fontFamily:"sans"},e)))}export{S as PreviewSection};
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 = \"300px\", width = \"100%\", radius = \"3\" } = backgroundProps;\n\n // Render with no background (default card styling)\n if (background === \"none\") {\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\">\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n }\n\n // Render with dots pattern background\n if (background === \"dots\") {\n const dotsStyle: React.CSSProperties = {\n backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,\n borderRadius: `var(--radius-${radius})`,\n backgroundSize: `${dotSize}px ${dotSize}px`,\n backgroundPosition: \"center\",\n backgroundColor,\n height,\n width,\n };\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={dotsStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n }\n\n // Render with custom image background\n const imageStyle: React.CSSProperties = {\n backgroundImage: `url(${background})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n borderRadius: `var(--radius-${radius})`,\n height,\n width,\n };\n\n return (\n <Card size=\"1\" variant=\"soft\">\n <Flex justify=\"center\" align=\"center\" py=\"4\" style={imageStyle}>\n <Theme fontFamily=\"sans\">{children}</Theme>\n </Flex>\n </Card>\n );\n}\n"],
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,EAAS,QAAS,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,GAAI,EAAIN,EAGtI,GAAID,IAAe,OACjB,OACEN,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,KACvCF,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,EAKJ,GAAIC,IAAe,OAAQ,CACzB,MAAMQ,EAAiC,CACrC,gBAAiB,2BAA2BL,CAAK,yBACjD,aAAc,gBAAgBI,CAAM,IACpC,eAAgB,GAAGL,CAAO,MAAMA,CAAO,KACvC,mBAAoB,SACpB,gBAAAE,EACA,OAAAC,EACA,MAAAC,CACF,EAEA,OACEZ,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOY,GAClDd,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ,CAGA,MAAMU,EAAkC,CACtC,gBAAiB,OAAOT,CAAU,IAClC,eAAgB,QAChB,mBAAoB,SACpB,iBAAkB,YAClB,aAAc,gBAAgBO,CAAM,IACpC,OAAAF,EACA,MAAAC,CACF,EAEA,OACEZ,EAAA,cAACC,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBD,EAAA,cAACE,EAAA,CAAK,QAAQ,SAAS,MAAM,SAAS,GAAG,IAAI,MAAOa,GAClDf,EAAA,cAACG,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CAEJ",
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.4",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
package/src/components/code/PreviewSection.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { type ReactNode } from "react";
2
- import { Box } from "@kushagradhawan/kookie-ui";
2
+ import { Card, Flex, Theme } from "@kushagradhawan/kookie-ui";
3
3
 
4
4
  interface PreviewSectionProps {
5
5
  children: ReactNode;
@@ -15,38 +15,56 @@ interface PreviewSectionProps {
15
15
  }
16
16
 
17
17
  export function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
18
- const { dotSize = 2, color = "#d4d4d8", backgroundColor = "transparent", height = "auto", width = "100%", radius = "var(--radius-3)" } = backgroundProps;
18
+ const { dotSize = 24, color = "var(--gray-10)", backgroundColor = "var(--gray-2)", height = "300px", width = "100%", radius = "3" } = backgroundProps;
19
19
 
20
- const backgroundStyle =
21
- background === "dots"
22
- ? {
23
- backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, ${backgroundColor} ${dotSize}px)`,
24
- backgroundSize: "20px 20px",
25
- }
26
- : background !== "none"
27
- ? {
28
- backgroundImage: `url(${background})`,
29
- backgroundSize: "cover",
30
- backgroundPosition: "center",
31
- }
32
- : {};
20
+ // Render with no background (default card styling)
21
+ if (background === "none") {
22
+ return (
23
+ <Card size="1" variant="soft">
24
+ <Flex justify="center" align="center" py="4">
25
+ <Theme fontFamily="sans">{children}</Theme>
26
+ </Flex>
27
+ </Card>
28
+ );
29
+ }
30
+
31
+ // Render with dots pattern background
32
+ if (background === "dots") {
33
+ const dotsStyle: React.CSSProperties = {
34
+ backgroundImage: `radial-gradient(circle, ${color} 1px, transparent 1px)`,
35
+ borderRadius: `var(--radius-${radius})`,
36
+ backgroundSize: `${dotSize}px ${dotSize}px`,
37
+ backgroundPosition: "center",
38
+ backgroundColor,
39
+ height,
40
+ width,
41
+ };
42
+
43
+ return (
44
+ <Card size="1" variant="soft">
45
+ <Flex justify="center" align="center" py="4" style={dotsStyle}>
46
+ <Theme fontFamily="sans">{children}</Theme>
47
+ </Flex>
48
+ </Card>
49
+ );
50
+ }
51
+
52
+ // Render with custom image background
53
+ const imageStyle: React.CSSProperties = {
54
+ backgroundImage: `url(${background})`,
55
+ backgroundSize: "cover",
56
+ backgroundPosition: "center",
57
+ backgroundRepeat: "no-repeat",
58
+ borderRadius: `var(--radius-${radius})`,
59
+ height,
60
+ width,
61
+ };
33
62
 
34
63
  return (
35
- <Box
36
- p="4"
37
- style={{
38
- ...backgroundStyle,
39
- height,
40
- width,
41
- borderRadius: radius,
42
- display: "flex",
43
- alignItems: "center",
44
- justifyContent: "center",
45
- minHeight: "200px",
46
- }}
47
- >
48
- {children}
49
- </Box>
64
+ <Card size="1" variant="soft">
65
+ <Flex justify="center" align="center" py="4" style={imageStyle}>
66
+ <Theme fontFamily="sans">{children}</Theme>
67
+ </Flex>
68
+ </Card>
50
69
  );
51
70
  }
52
-
package/src/components/index.css CHANGED
@@ -16,11 +16,45 @@
16
16
  .code-block-content {
17
17
  width: 100%;
18
18
  min-width: 0;
19
+ overflow-x: auto;
20
+ /* Hide scrollbars while keeping scroll functionality */
21
+ scrollbar-width: none; /* Firefox */
22
+ -ms-overflow-style: none; /* IE/Edge */
23
+ }
24
+
25
+ /* Hide scrollbars for webkit browsers */
26
+ .code-block-content::-webkit-scrollbar,
27
+ .code-block-content::-webkit-scrollbar-horizontal,
28
+ .code-block-content::-webkit-scrollbar-vertical,
29
+ .code-block-content::-webkit-scrollbar-track,
30
+ .code-block-content::-webkit-scrollbar-thumb,
31
+ .code-block-content::-webkit-scrollbar-corner {
32
+ display: none !important;
33
+ width: 0 !important;
34
+ height: 0 !important;
35
+ }
36
+
37
+ /* Also hide scrollbars on any pre/code elements inside code content */
38
+ .code-block-content pre::-webkit-scrollbar,
39
+ .code-block-content pre::-webkit-scrollbar-horizontal,
40
+ .code-block-content pre::-webkit-scrollbar-vertical,
41
+ .code-block-content pre::-webkit-scrollbar-track,
42
+ .code-block-content pre::-webkit-scrollbar-thumb,
43
+ .code-block-content pre::-webkit-scrollbar-corner,
44
+ .code-block-content code::-webkit-scrollbar,
45
+ .code-block-content code::-webkit-scrollbar-horizontal,
46
+ .code-block-content code::-webkit-scrollbar-vertical,
47
+ .code-block-content code::-webkit-scrollbar-track,
48
+ .code-block-content code::-webkit-scrollbar-thumb,
49
+ .code-block-content code::-webkit-scrollbar-corner {
50
+ display: none !important;
51
+ width: 0 !important;
52
+ height: 0 !important;
19
53
  }
20
54
 
21
55
  .code-block-wrapper pre,
22
56
  .code-block-wrapper .code-block-content pre {
23
- overflow-x: auto;
57
+ overflow-x: visible; /* Let .code-block-content handle scrolling */
24
58
  max-width: 100%;
25
59
  min-width: 0;
26
60
  margin: 0;
package/styles.css CHANGED
@@ -14,10 +14,42 @@
14
14
  .code-block-content {
15
15
  width: 100%;
16
16
  min-width: 0;
17
+ overflow-x: auto;
18
+ /* Hide scrollbars while keeping scroll functionality */
19
+ scrollbar-width: none; /* Firefox */
20
+ -ms-overflow-style: none; /* IE/Edge */
21
+ }
22
+ /* Hide scrollbars for webkit browsers */
23
+ .code-block-content::-webkit-scrollbar,
24
+ .code-block-content::-webkit-scrollbar-horizontal,
25
+ .code-block-content::-webkit-scrollbar-vertical,
26
+ .code-block-content::-webkit-scrollbar-track,
27
+ .code-block-content::-webkit-scrollbar-thumb,
28
+ .code-block-content::-webkit-scrollbar-corner {
29
+ display: none !important;
30
+ width: 0 !important;
31
+ height: 0 !important;
32
+ }
33
+ /* Also hide scrollbars on any pre/code elements inside code content */
34
+ .code-block-content pre::-webkit-scrollbar,
35
+ .code-block-content pre::-webkit-scrollbar-horizontal,
36
+ .code-block-content pre::-webkit-scrollbar-vertical,
37
+ .code-block-content pre::-webkit-scrollbar-track,
38
+ .code-block-content pre::-webkit-scrollbar-thumb,
39
+ .code-block-content pre::-webkit-scrollbar-corner,
40
+ .code-block-content code::-webkit-scrollbar,
41
+ .code-block-content code::-webkit-scrollbar-horizontal,
42
+ .code-block-content code::-webkit-scrollbar-vertical,
43
+ .code-block-content code::-webkit-scrollbar-track,
44
+ .code-block-content code::-webkit-scrollbar-thumb,
45
+ .code-block-content code::-webkit-scrollbar-corner {
46
+ display: none !important;
47
+ width: 0 !important;
48
+ height: 0 !important;
17
49
  }
18
50
  .code-block-wrapper pre,
19
51
  .code-block-wrapper .code-block-content pre {
20
- overflow-x: auto;
52
+ overflow-x: visible; /* Let .code-block-content handle scrolling */
21
53
  max-width: 100%;
22
54
  min-width: 0;
23
55
  margin: 0;