@san-siva/blogkit 1.1.0 → 1.1.2

package/dist/esm/staticComponents/BlogHeaderStatic.js

@@ -0,0 +1,9 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import styles from '../styles/BlogHeader.module.scss.js';
+
+const renderLineBreaks = (array) => array.map((element, index, array) => (jsxs(Fragment$1, { children: [element, index === array.length - 1 ? null : jsx("br", {})] }, element)));
+const BlogHeader = ({ title, desc, isDescCite = true }) => (jsxs(Fragment, { children: [jsx("h1", { className: `${styles['blog-header']}`, children: renderLineBreaks(title) }), isDescCite ? (jsx("cite", { className: `${styles['blog-date']}`, children: renderLineBreaks(desc) })) : (jsx("p", { className: `${styles['blog-date']}`, children: renderLineBreaks(desc) }))] }));
+
+export { BlogHeader as default };
+//# sourceMappingURL=BlogHeaderStatic.js.map

package/dist/esm/staticComponents/BlogHeaderStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogHeaderStatic.js","sources":["../../../src/staticComponents/BlogHeaderStatic.tsx"],"sourcesContent":["import { Fragment } from 'react';\n\nimport styles from '../styles/BlogHeader.module.scss';\n\ninterface BlogProperties {\n\ttitle: string[];\n\tdesc: string[];\n\tisDescCite?: boolean;\n}\n\nconst renderLineBreaks = (array: string[]) =>\n\tarray.map((element, index, array) => (\n\t\t<Fragment key={element}>\n\t\t\t{element}\n\t\t\t{index === array.length - 1 ? null : <br />}\n\t\t</Fragment>\n\t));\n\nconst BlogHeader = ({ title, desc, isDescCite = true }: BlogProperties) => (\n\t\t<>\n\t\t\t<h1 className={`${styles['blog-header']}`}>{renderLineBreaks(title)}</h1>\n\t\t\t{isDescCite ? (\n\t\t\t\t<cite className={`${styles['blog-date']}`}>\n\t\t\t\t\t{renderLineBreaks(desc)}\n\t\t\t\t</cite>\n\t\t\t) : (\n\t\t\t\t<p className={`${styles['blog-date']}`}>{renderLineBreaks(desc)}</p>\n\t\t\t)}\n\t\t</>\n\t);\n\nexport default BlogHeader;\n"],"names":["_jsxs","Fragment","_jsx","_Fragment"],"mappings":";;;;AAUA,MAAM,gBAAgB,GAAG,CAAC,KAAe,KACxC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,MAC/BA,IAAA,CAACC,UAAQ,eACP,OAAO,EACP,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,GAAGC,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,KAF7B,OAAO,CAGX,CACX,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAkB,MACpEF,IAAA,CAAAG,QAAA,EAAA,EAAA,QAAA,EAAA,CACCD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,EAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,KAAK,CAAC,EAAA,CAAM,EACxE,UAAU,IACVA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EACvC,gBAAgB,CAAC,IAAI,CAAC,EAAA,CACjB,KAEPA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,CAAC,CAAA,CAAE,EAAA,QAAA,EAAG,gBAAgB,CAAC,IAAI,CAAC,EAAA,CAAK,CACpE,CAAA,EAAA,CACC;;;;"}

package/dist/esm/staticComponents/CalloutStatic.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from '../styles/Callout.module.scss.js';
+
+const Callout = ({ children, type = 'info', hasMarginUp = false, hasMarginDown = false }) => {
+    const className = `${styles.callout} ${styles[`callout--${type}`]} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;
+    return (jsxs("div", { className: className, children: [jsx("div", { className: styles.callout__icon }), jsx("div", { className: styles.callout__wrapper, children: children })] }));
+};
+
+export { Callout as default };
+//# sourceMappingURL=CalloutStatic.js.map

package/dist/esm/staticComponents/CalloutStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutStatic.js","sources":["../../../src/staticComponents/CalloutStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from '../styles/Callout.module.scss';\n\ninterface CalloutProperties {\n\tchildren?: ReactNode;\n\ttype: 'info' | 'warning' | 'error' | 'success';\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Callout = ({ children, type = 'info',\n\thasMarginUp = false,\n\thasMarginDown = false\n}: CalloutProperties) => {\n\tconst className = `${styles.callout} ${styles[`callout--${type}`]} ${\n\t\thasMarginUp ? styles['margin-top--1'] : ''\n\t} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`;\n\treturn (\n\t\t<div className={className}>\n\t\t\t<div className={styles.callout__icon}/>\n\t\t\t<div className={styles.callout__wrapper}>{children}</div>\n\t\t</div>\n\t);\n};\n\nexport default Callout;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAWA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,EACzC,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACF,KAAI;AACvB,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,CAAA,SAAA,EAAY,IAAI,EAAE,CAAC,CAAA,CAAA,EAChE,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EACzC,CAAA,CAAA,EAAI,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE;IACrD,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,aACxBC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAG,EACvCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CACpD;AAER;;;;"}

package/dist/esm/staticComponents/TableStatic.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from '../styles/Table.module.scss.js';
+
+const Table = ({ rows = [], headers = [], hasMarginUp = false, hasMarginDown = false, }) => {
+    const columnCount = headers.length;
+    return (jsxs("div", { className: `${styles.table}
+				${hasMarginUp ? styles['margin-top--1'] : ''}
+				${hasMarginDown ? styles['margin-bottom--2'] : ''}`, style: {
+            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+        }, children: [jsx("div", { className: `${styles['table__header']}`, children: headers.map((header, index) => (jsx("div", { className: `${styles['table__header__cell']}`, children: header }, typeof header === 'string' ? header : index))) }), rows.map((row, index) => (jsx("div", { className: `${styles['table__row']}`, children: row.map((cell, cellIndex) => (jsx("div", { className: `${styles['table__row__cell']}`, children: cell }, typeof cell === 'string' ? cell : cellIndex))) }, index)))] }));
+};
+
+export { Table as default };
+//# sourceMappingURL=TableStatic.js.map

package/dist/esm/staticComponents/TableStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatic.js","sources":["../../../src/staticComponents/TableStatic.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styles from '../styles/Table.module.scss';\n\ninterface TableProperties {\n\trows?: ReactNode[][];\n\theaders?: ReactNode[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst Table = ({\n\trows = [],\n\theaders = [],\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: TableProperties) => {\n\tconst columnCount = headers.length;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.table}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateColumns: `repeat(${columnCount}, 1fr)`,\n\t\t\t}}\n\t\t>\n\t\t\t<div className={`${styles['table__header']}`}>\n\t\t\t\t{headers.map((header, index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={typeof header === 'string' ? header : index}\n\t\t\t\t\t\tclassName={`${styles['table__header__cell']}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{header}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{rows.map((row, index) => (\n\t\t\t\t<div key={index} className={`${styles['table__row']}`}>\n\t\t\t\t\t{row.map((cell, cellIndex) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={typeof cell === 'string' ? cell : cellIndex}\n\t\t\t\t\t\t\tclassName={`${styles['table__row__cell']}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cell}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default Table;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUA,MAAM,KAAK,GAAG,CAAC,EACd,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACJ,KAAI;AACrB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM;AAElC,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,KAAK;MACvB,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE;AAC1C,IAAA,EAAA,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAA,CAAE,EACpD,KAAK,EAAE;YACN,mBAAmB,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,MAAA,CAAQ;SAClD,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,eAAe,CAAC,CAAA,CAAE,EAAA,QAAA,EAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,GAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,qBAAqB,CAAC,CAAA,CAAE,EAAA,QAAA,EAE5C,MAAM,EAAA,EAHF,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK,CAI3C,CACN,CAAC,EAAA,CACG,EACL,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACpBA,GAAA,CAAA,KAAA,EAAA,EAAiB,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAE,EAAA,QAAA,EACnD,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MACxBA,GAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,kBAAkB,CAAC,CAAA,CAAE,EAAA,QAAA,EAEzC,IAAI,EAAA,EAHA,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS,CAI3C,CACN,CAAC,EAAA,EARO,KAAK,CAST,CACN,CAAC,CAAA,EAAA,CACG;AAER;;;;"}

package/dist/types/dynamicComponents/BlogDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAc,SAAS,EAAiB,MAAM,OAAO,CAAC;AAIlE,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAkBD,QAAA,MAAM,IAAI,GAAI,qBAAyC,cAAc,4CAoNpE,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"BlogDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,SAAS,EAAiB,MAAM,OAAO,CAAC;AAIlE,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC5B;AAgBD,QAAA,MAAM,IAAI,GAAI,qBAAyC,cAAc,4CAkNpE,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/dynamicComponents/BlogSectionDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,+FA8DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,+FA8DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/staticComponents/BlogHeaderStatic.d.ts

@@ -0,0 +1,8 @@
+interface BlogProperties {
+    title: string[];
+    desc: string[];
+    isDescCite?: boolean;
+}
+declare const BlogHeader: ({ title, desc, isDescCite }: BlogProperties) => import("react/jsx-runtime").JSX.Element;
+export default BlogHeader;
+//# sourceMappingURL=BlogHeaderStatic.d.ts.map

package/dist/types/staticComponents/BlogHeaderStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogHeaderStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogHeaderStatic.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACvB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD,QAAA,MAAM,UAAU,GAAI,6BAAoC,cAAc,4CAWpE,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/types/staticComponents/CalloutStatic.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+interface CalloutProperties {
+    children?: ReactNode;
+    type: 'info' | 'warning' | 'error' | 'success';
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const Callout: ({ children, type, hasMarginUp, hasMarginDown }: CalloutProperties) => import("react/jsx-runtime").JSX.Element;
+export default Callout;
+//# sourceMappingURL=CalloutStatic.d.ts.map

package/dist/types/staticComponents/CalloutStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CalloutStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,iBAAiB;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,OAAO,GAAI,gDAGd,iBAAiB,4CAUnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/staticComponents/TableStatic.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface TableProperties {
+    rows?: ReactNode[][];
+    headers?: ReactNode[];
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const Table: ({ rows, headers, hasMarginUp, hasMarginDown, }: TableProperties) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=TableStatic.d.ts.map

package/dist/types/staticComponents/TableStatic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/TableStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,UAAU,eAAe;IACxB,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,KAAK,GAAI,gDAKZ,eAAe,4CAoCjB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@san-siva/blogkit",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/BlogHeader.tsx

@@ -1,4 +1,4 @@
-import BlogHeaderDynamic from '../dynamicComponents/BlogHeaderDynamic';
+import BlogHeaderStatic from '../staticComponents/BlogHeaderStatic';
 
 interface BlogHeaderProperties {
 	title: string[];
@@ -12,7 +12,7 @@ const BlogHeader = ({
 	isDescCite = true,
 }: BlogHeaderProperties) => {
 	return (
-		<BlogHeaderDynamic title={title} desc={desc} isDescCite={isDescCite} />
+		<BlogHeaderStatic title={title} desc={desc} isDescCite={isDescCite} />
 	);
 };
 

package/src/components/Callout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import CalloutDynamic from '../dynamicComponents/CalloutDynamic';
+import CalloutStatic from '../staticComponents/CalloutStatic';
 
 interface CalloutProperties {
 	children?: ReactNode;
@@ -15,13 +15,13 @@ const Callout = ({
 	hasMarginDown = false,
 }: CalloutProperties) => {
 	return (
-		<CalloutDynamic
+		<CalloutStatic
 			type={type}
 			hasMarginUp={hasMarginUp}
 			hasMarginDown={hasMarginDown}
 		>
 			{children}
-		</CalloutDynamic>
+		</CalloutStatic>
 	);
 };
 

package/src/components/Table.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import TableDynamic from '../dynamicComponents/TableDynamic';
+import TableStatic from '../staticComponents/TableStatic';
 
 interface TableProperties {
 	rows?: ReactNode[][];
@@ -15,7 +15,7 @@ const Table = ({
 	hasMarginDown = false,
 }: TableProperties) => {
 	return (
-		<TableDynamic
+		<TableStatic
 			rows={rows}
 			headers={headers}
 			hasMarginUp={hasMarginUp}

package/src/dynamicComponents/BlogDynamic.tsx

@@ -9,6 +9,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { useSpring, animated } from '@react-spring/web';
 
 import type { MouseEvent, ReactNode, RefAttributes } from 'react';
 
@@ -38,34 +39,22 @@ interface CategoryTitleValue extends SectionReferenceValue {
 
 type CategoryTitle = Map<string, CategoryTitleValue>;
 
-type AddPaddingTopTimerReference = ReturnType<typeof setTimeout> | null;
-
 const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
-	const addPaddingTopTimerReference = useRef<AddPaddingTopTimerReference>(null);
-	const highlightCategoryTimerReference =
-		useRef<AddPaddingTopTimerReference>(null);
-
-	const clearTimers = (
-		addPaddingTopTimerReference_: AddPaddingTopTimerReference,
-		highlightCategoryTimerReference_: AddPaddingTopTimerReference
-	) => {
-		if (addPaddingTopTimerReference_) {
-			clearTimeout(addPaddingTopTimerReference_);
-		}
-		if (highlightCategoryTimerReference_) {
-			clearTimeout(highlightCategoryTimerReference_);
-		}
-	};
-
 	const sectionReferences = useRef<SectionReference>(new Map());
 	const [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(
 		new Map()
 	);
 	const [visibleTitle, setVisibleTitle] = useState<string | null>(null);
+	const [showTOC, setShowTOC] = useState(false);
+
 	const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const showTOCTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	const sortByDomPosition = useCallback(
-		([, a]: [string, SectionReferenceValue], [, b]: [string, SectionReferenceValue]) => {
+		(
+			[, a]: [string, SectionReferenceValue],
+			[, b]: [string, SectionReferenceValue]
+		) => {
 			const position = a.el.compareDocumentPosition(b.el);
 			if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
 				return -1; // a comes before b
@@ -98,13 +87,14 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 			});
 		}
 
-		if (newCategoryTitles.size > 0) {
-			setCategoryTitles(newCategoryTitles);
-			if (!visibleTitle) {
-				setVisibleTitle(firstSectionId);
-			}
-		}
-	}, [visibleTitle, sortByDomPosition]);
+		if (newCategoryTitles.size === 0) return;
+
+		setCategoryTitles(newCategoryTitles);
+		if (!showTOC) setShowTOC(true);
+
+		if (visibleTitle) return;
+		setVisibleTitle(firstSectionId);
+	}, [visibleTitle, sortByDomPosition, showTOC, setShowTOC]);
 
 	const debounceUpdateCategoryTitles = useCallback(() => {
 		// Clear existing timer and set a new one to batch updates
@@ -113,7 +103,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		}
 		updateTimerRef.current = setTimeout(() => {
 			updateCategoryTitles();
-		}, 50);
+		}, 200);
 	}, [updateCategoryTitles]);
 
 	useEffect(() => {
@@ -142,51 +132,53 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 
 	useEffect(() => {
 		return () => {
-			clearTimers(
-				addPaddingTopTimerReference.current,
-				highlightCategoryTimerReference.current
-			);
 			if (updateTimerRef.current) {
 				clearTimeout(updateTimerRef.current);
 			}
+			if (showTOCTimerRef.current) {
+				clearTimeout(showTOCTimerRef.current);
+			}
 		};
 	}, []);
 
-	const handleSectionReference = useCallback((element: ForwardedReference) => {
-		if (!element) return;
-		const { parentRef, childRefs } = element;
-
-		// Add parent section reference
-		if (parentRef) {
-			const id = parentRef.dataset.id;
-			const title = parentRef.dataset.title;
-			if (id && title) {
-				sectionReferences.current.set(id, {
-					el: parentRef,
-					title,
-					isSubSection: false,
-				});
-			}
-		}
+	const handleSectionReference = useCallback(
+		(element: ForwardedReference) => {
+			if (!element) return;
+			const { parentRef, childRefs } = element;
 
-		// Add child section references
-		if (Array.isArray(childRefs)) {
-			for (const childRef of childRefs) {
-				if (!childRef) continue;
-				const id = childRef.dataset.id;
-				const title = childRef.dataset.title;
+			// Add parent section reference
+			if (parentRef) {
+				const id = parentRef.dataset.id;
+				const title = parentRef.dataset.title;
 				if (id && title) {
 					sectionReferences.current.set(id, {
-						el: childRef,
+						el: parentRef,
 						title,
-						isSubSection: true,
+						isSubSection: false,
 					});
 				}
 			}
-		}
 
-		debounceUpdateCategoryTitles();
-	}, [debounceUpdateCategoryTitles]);
+			// Add child section references
+			if (Array.isArray(childRefs)) {
+				for (const childRef of childRefs) {
+					if (!childRef) continue;
+					const id = childRef.dataset.id;
+					const title = childRef.dataset.title;
+					if (id && title) {
+						sectionReferences.current.set(id, {
+							el: childRef,
+							title,
+							isSubSection: true,
+						});
+					}
+				}
+			}
+
+			debounceUpdateCategoryTitles();
+		},
+		[debounceUpdateCategoryTitles]
+	);
 
 	const handleClickCategoryTitle = (
 		error: MouseEvent<HTMLParagraphElement>
@@ -210,6 +202,11 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 		}, 1000);
 	};
 
+	const sidebarStyle = useSpring({
+		opacity: showTOC ? 1 : 0,
+		transform: showTOC ? 'translateX(0)' : 'translateX(80px)',
+		config: { tension: 280, friction: 60 },
+	});
 
 	return (
 		<div className={styles.blog}>
@@ -221,7 +218,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 					} as RefAttributes<ForwardedReference>);
 				})}
 			</div>
-			<div className={styles['blog__sidebar']}>
+			<animated.div className={styles['blog__sidebar']} style={sidebarStyle}>
 				<p
 					className={`${styles['margin-bottom--3']} ${styles['category__header']}`}
 				>
@@ -249,7 +246,7 @@ const Blog = ({ children, title = 'In this article' }: BlogProperties) => {
 						);
 					}
 				)}
-			</div>
+			</animated.div>
 		</div>
 	);
 };

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
 	Children,
 	cloneElement,

package/src/styles/Blog.module.scss

@@ -21,11 +21,13 @@
 		top: calc(var(--topbar-height) + #{styles.space(6)});
 		padding: styles.space(6);
 		min-width: calc(
-			#{styles.rem(380)} - #{styles.space(6)} - #{styles.space(6)}
+			#{styles.rem(320)} - #{styles.space(6)} - #{styles.space(6)}
 		);
 		border-radius: styles.$border-radius--1;
 		background-color: styles.$color--code;
-    box-shadow: 0 0 0 1px styles.$color--border, 0 styles.space(1) styles.space(2) 0 styles.$color--border;
+		box-shadow:
+			0 0 0 1px styles.$color--border,
+			0 styles.space(1) styles.space(2) 0 styles.$color--border;
 
 		margin-left: styles.space(9);
 

package/src/styles/CodeBlock.module.scss

@@ -1,5 +1,7 @@
 @use '@san-siva/stylekit/index.module.scss' as stylekit;
 
+$code-block-background-color: #282a36;
+
 .code-block {
 	code {
 		font-size: unset;
@@ -8,7 +10,7 @@
 		padding: unset;
 	}
 
-	background-color: #282a36 !important;
+	background-color: $code-block-background-color !important;
 	filter: stylekit.$color--shadow-dark;
 	border-radius: stylekit.$border-radius;
 
@@ -26,6 +28,23 @@
 
 		overflow-x: auto;
 
+		// Custom scrollbar styling
+		scrollbar-width: thin;
+		scrollbar-color: stylekit.$color--grey-dark $code-block-background-color;
+
+		&::-webkit-scrollbar {
+			height: 8px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: $code-block-background-color;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: stylekit.$color--grey-dark;
+			border-radius: 4px;
+		}
+
 		padding-top: 0px;
 		padding-right: stylekit.rem(18);
 		padding-bottom: stylekit.rem(18);
@@ -101,5 +120,5 @@
 .code-block--static code {
 	color: stylekit.$color--base !important;
   font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--small !important;
+  font-size: stylekit.$font-size--p-small !important;
 }