@san-siva/blogkit 1.1.30 → 1.1.32

package/dist/esm/staticComponents/BlogSectionStatic.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from '../styles/BlogSection.module.scss.js';
-import { generateIdForBlogTitle } from '../utils/index.js';
+import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils/index.js';
 
 const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
-    const titleWithCategory = category ? `${category} - ${title}` : title;
+    const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
+    const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
     const id = generateIdForBlogTitle(titleWithCategory);
-    return (jsxs("div", { className: styles['blog-section'], "data-title": title, "data-id": id, children: [title ? (jsx("h3", { className: styles['blog-section__title'], children: title })) : null, children] }));
+    return (jsxs("div", { className: styles['blog-section'], "data-title": titleString, "data-id": id, children: [title ? (jsx("h3", { className: styles['blog-section__title'], children: title })) : null, children] }));
 };
 
 export { BlogSectionStatic as default };

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

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleWithCategory = category ? `${category} - ${title}` : title;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={title} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACrE,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,KAAK,aAAW,EAAE,EAAA,QAAA,EAAA,CACpE,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}
+{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={titleString} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,wBAAwB,CAAC,KAAK,CAAC;AACvF,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,GAAG,WAAW;AACjF,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,WAAW,aAAW,EAAE,EAAA,QAAA,EAAA,CAC1E,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}

package/dist/esm/staticComponents/CheckListStatic.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import styles from '../styles/CheckList.module.scss.js';
 
 const CheckListStatic = ({ items, hasMarginUp = false, hasMarginDown = false, }) => {
-    return (jsx("div", { className: `${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxs("div", { className: styles['check-list__item'], "data-id": item.id, children: [jsx("div", { className: `${styles['check-list__item__input']} ${item.isChecked ? styles['check-list__item__input--checked'] : ''}` }), jsx("div", { children: item.children })] }, item.id))) }));
+    return (jsx("div", { className: `${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${hasMarginDown ? styles['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxs("div", { className: styles['check-list__item'], "data-id": item.id, children: [jsx("div", { className: `${styles['check-list__item__input']} ${item.isChecked ? styles['check-list__item__input--checked'] : ''}` }), item.children] }, item.id))) }));
 };
 
 export { CheckListStatic as default };

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

@@ -1 +1 @@
-{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactNode;\n\tisChecked?: boolean;\n}\n\ninterface CheckListProperties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CheckListStatic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CheckListProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<div key={item.id} className={styles['check-list__item']} data-id={item.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\t\t\t\titem.isChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>{item.children}</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default CheckListStatic;\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCA,aACC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,YAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAA,SAAA,EAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC/D,CAAA,CAAE,EAAA,CACD,EACFA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,IAAI,CAAC,QAAQ,EAAA,CAAO,CAAA,EAAA,EANjB,IAAI,CAAC,EAAE,CAOX,CACN,CAAC,EAAA,CACG;AAER;;;;"}
+{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\n\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tisChecked?: boolean;\n}\n\ninterface CheckListProperties {\n\titems: CheckListItem[];\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nconst CheckListStatic = ({\n\titems,\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: CheckListProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<div key={item.id} className={styles['check-list__item']} data-id={item.id}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\t\t\t\titem.isChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t\t\t\t}`}\n\t\t\t\t\t/>\n\t\t\t\t\t{item.children}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default CheckListStatic;\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCA,aACC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,EAAE,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,aAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC/D,CAAA,CAAE,EAAA,CACD,EACD,IAAI,CAAC,QAAQ,CAAA,EAAA,EANL,IAAI,CAAC,EAAE,CAOX,CACN,CAAC,EAAA,CACG;AAER;;;;"}

package/dist/esm/utils/index.js

@@ -1,6 +1,19 @@
+import { isValidElement } from 'react';
+
+const extractTextFromReactNode = (node) => {
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return '';
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (isValidElement(node))
+        return extractTextFromReactNode(node.props.children);
+    if (Array.isArray(node))
+        return node.map(extractTextFromReactNode).join('');
+    return '';
+};
 const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
 const generateSectionHref = (id) => `?section=${id}`;
 
-export { generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
+export { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":"MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const extractTextFromReactNode = (node: ReactNode): string => {\n\tif (node === null || node === undefined || typeof node === 'boolean') return '';\n\tif (typeof node === 'string' || typeof node === 'number') return String(node);\n\tif (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);\n\tif (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');\n\treturn '';\n};\n\nexport const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,GAAG,CAAC,IAAe,KAAY;IACnE,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE;IAC/E,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IAC7E,IAAI,cAAc,CAAC,IAAI,CAAC;QAAE,OAAO,wBAAwB,CAAE,IAAI,CAAC,KAAkC,CAAC,QAAQ,CAAC;AAC5G,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E,IAAA,OAAO,EAAE;AACV;MAEa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}

package/dist/types/components/BlogSection.d.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
 export type { ForwardedReference };
 interface BlogSectionProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

package/dist/types/components/BlogSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogSection.d.ts","sourceRoot":"","sources":["../../../src/components/BlogSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAMnC,UAAU,qBAAqB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,sHA8BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSection.d.ts","sourceRoot":"","sources":["../../../src/components/BlogSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAMnC,UAAU,qBAAqB;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,sHA8BhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/components/CheckList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAAA,OAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAE1F,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,wCAIhB,mBAAmB,4CAIrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAI1F,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,wCAIhB,mBAAmB,4CAUrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}

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

@@ -1,7 +1,7 @@
-import type { ReactNode, RefAttributes } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 import type { ForwardedReference } from './BlogDynamic';
 interface BlogProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAYA,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;CACrB;AAED,QAAA,MAAM,WAAW,+FAmFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BlogSectionDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIpF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,UAAU,cAAc;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,+FAoFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/dynamicComponents/CheckListDynamic.d.ts

@@ -0,0 +1,9 @@
+import type { CheckListItem } from '../staticComponents/CheckListStatic';
+interface Properties {
+    items: CheckListItem[];
+    hasMarginUp?: boolean;
+    hasMarginDown?: boolean;
+}
+declare const CheckListDynamic: ({ items, hasMarginUp, hasMarginDown, }: Properties) => import("react/jsx-runtime").JSX.Element;
+export default CheckListDynamic;
+//# sourceMappingURL=CheckListDynamic.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/CheckListDynamic.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAGzE,UAAU,UAAU;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAKD,QAAA,MAAM,gBAAgB,GAAI,wCAIvB,UAAU,4CA2CZ,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 interface BlogSectionStaticProperties {
-    title?: string;
+    title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     category?: string;
     children?: ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BlogSectionStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,2BAA2B;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,gCAIxB,2BAA2B,4CAY7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"BlogSectionStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,UAAU,2BAA2B;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,gCAIxB,2BAA2B,4CAa7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 export interface CheckListItem {
     id: string;
-    children: ReactNode;
+    children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     isChecked?: boolean;
 }
 interface CheckListProperties {

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

@@ -1 +1 @@
-{"version":3,"file":"CheckListStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,GAAI,wCAItB,mBAAmB,4CAmBrB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CheckListStatic.d.ts","sourceRoot":"","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1D,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,GAAI,wCAItB,mBAAmB,4CAmBrB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/utils/index.d.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+export declare const extractTextFromReactNode: (node: ReactNode) => string;
 export declare const generateIdForBlogTitle: (title: string) => string;
 export declare const generateUrlForBlogTitle: (title: string) => string;
 export declare const generateSectionHref: (id: string) => string;

package/dist/types/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,WAAiD,CAAC;AAEtG,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAAoE,CAAC;AAE1H,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,wBAAwB,GAAI,MAAM,SAAS,KAAG,MAM1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,WAAiD,CAAC;AAEtG,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAAoE,CAAC;AAE1H,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAAqB,CAAC"}

package/dist/types/utils/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/types/utils/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/utils/index.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.30",
+	"version": "1.1.32",
 	"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",
@@ -24,6 +24,7 @@
 	"scripts": {
 		"build": "rollup -c && tsc --emitDeclarationOnly --outDir dist/types && cp -r src/assets dist/",
 		"dev": "rollup -c -w",
+		"test": "vitest run",
 		"lint": "tsc --noEmit",
 		"prepublishOnly": "npm ci && npm run lint && npm run build"
 	},
@@ -70,6 +71,7 @@
 		"rollup-plugin-url": "^3.0.1",
 		"sass": "^1.77.8",
 		"tslib": "^2.8.1",
-		"typescript": "^5.7.2"
+		"typescript": "^5.7.2",
+		"vitest": "^4.1.2"
 	}
 }

package/src/components/BlogSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, lazy, Suspense } from 'react';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import BlogSectionStatic from '../staticComponents/BlogSectionStatic';
 import type { ForwardedReference } from '../dynamicComponents/BlogDynamic';
 export type { ForwardedReference };
@@ -11,7 +11,7 @@ const BlogSectionDynamic = lazy(
 );
 
 interface BlogSectionProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }

package/src/components/CheckList.tsx

@@ -1,5 +1,10 @@
+'use client';
+
+import { lazy, Suspense } from 'react';
 import CheckListStatic, { type CheckListItem } from '../staticComponents/CheckListStatic';
 
+const CheckListDynamic = lazy(() => import('../dynamicComponents/CheckListDynamic'));
+
 interface CheckListProperties {
 	items: CheckListItem[];
 	hasMarginUp?: boolean;
@@ -12,7 +17,13 @@ const CheckList = ({
 	hasMarginDown = false,
 }: CheckListProperties) => {
 	return (
-		<CheckListStatic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+		<Suspense
+			fallback={
+				<CheckListStatic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+			}
+		>
+			<CheckListDynamic items={items} hasMarginUp={hasMarginUp} hasMarginDown={hasMarginDown} />
+		</Suspense>
 	);
 };
 

package/src/dynamicComponents/BlogSectionDynamic.tsx

@@ -10,15 +10,15 @@ import {
 	useRef,
 } from 'react';
 
-import type { ReactNode, RefAttributes } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
 
 import styles from '../styles/BlogSection.module.scss';
 
 import type { ForwardedReference } from './BlogDynamic';
-import { generateIdForBlogTitle, generateSectionHref } from '../utils';
+import { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';
 
 interface BlogProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }
@@ -28,7 +28,8 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 		{ title = '', category = '', children = null }: BlogProperties,
 		forwardedReference
 	) => {
-		const titleWithCategory = category ? `${category} - ${title}` : title;
+		const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
+		const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 		const id = generateIdForBlogTitle(titleWithCategory);
 
 		const parentReference = useRef<ForwardedReference['parentRef']>(null);
@@ -78,7 +79,7 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
 		return (
 			<div
 				className={styles['blog-section']}
-				data-title={title}
+				data-title={titleString}
 				data-id={id}
 				ref={parentReference}
 			>

package/src/dynamicComponents/CheckListDynamic.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { CheckListItem } from '../staticComponents/CheckListStatic';
+import styles from '../styles/CheckList.module.scss';
+
+interface Properties {
+	items: CheckListItem[];
+	hasMarginUp?: boolean;
+	hasMarginDown?: boolean;
+}
+
+const CHECKBOX_SIZE = 12;
+const P_TAG_FONT_SIZE = 16;
+
+const CheckListDynamic = ({
+	items,
+	hasMarginUp = false,
+	hasMarginDown = false,
+}: Properties) => {
+	const [checkboxMarginTop, setCheckboxMarginTop] = useState(0);
+	const measureRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!measureRef.current) return;
+		const p = measureRef.current.querySelector('p');
+		if (!p) return;
+		const rawLineHeight = getComputedStyle(p).lineHeight;
+		const lineHeight =
+			rawLineHeight === 'normal'
+				? P_TAG_FONT_SIZE * 1.2
+				: parseFloat(rawLineHeight);
+		if (!isNaN(lineHeight)) {
+			setCheckboxMarginTop(Math.max(0, (lineHeight - CHECKBOX_SIZE) / 2));
+		}
+	}, []);
+
+	return (
+		<div
+			className={`${styles['check-list']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
+				hasMarginDown ? styles['margin-bottom--2'] : ''
+			}`}
+		>
+			{items.map((item, index) => (
+				<div
+					key={item.id}
+					className={styles['check-list__item']}
+					style={{ alignItems: 'flex-start' }}
+					data-id={item.id}
+					ref={index === 0 ? measureRef : undefined}
+				>
+					<div
+						className={`${styles['check-list__item__input']} ${
+							item.isChecked ? styles['check-list__item__input--checked'] : ''
+						}`}
+						style={{ marginTop: `${checkboxMarginTop}px` }}
+					/>
+					{item.children}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default CheckListDynamic;

package/src/staticComponents/BlogSectionStatic.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import styles from '../styles/BlogSection.module.scss';
-import { generateIdForBlogTitle } from '../utils';
+import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';
 
 interface BlogSectionStaticProperties {
-	title?: string;
+	title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	category?: string;
 	children?: ReactNode;
 }
@@ -13,11 +13,12 @@ const BlogSectionStatic = ({
 	category = '',
 	children = null,
 }: BlogSectionStaticProperties) => {
-	const titleWithCategory = category ? `${category} - ${title}` : title;
+	const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
+	const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
 	const id = generateIdForBlogTitle(titleWithCategory);
 
 	return (
-		<div className={styles['blog-section']} data-title={title} data-id={id}>
+		<div className={styles['blog-section']} data-title={titleString} data-id={id}>
 			{title ? (
 				<h3 className={styles['blog-section__title']}>{title}</h3>
 			) : null}

package/src/staticComponents/CheckListStatic.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 
 import styles from '../styles/CheckList.module.scss';
 
 export interface CheckListItem {
 	id: string;
-	children: ReactNode;
+	children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	isChecked?: boolean;
 }
 
@@ -32,7 +32,7 @@ const CheckListStatic = ({
 							item.isChecked ? styles['check-list__item__input--checked'] : ''
 						}`}
 					/>
-					<div>{item.children}</div>
+					{item.children}
 				</div>
 			))}
 		</div>

package/src/styles/BlogSection.module.scss

@@ -16,11 +16,15 @@
 	}
 
 	&__title-link {
-		color: inherit;
-		text-decoration: none;
-		font-size: inherit;
-		font-weight: inherit;
-		font-family: inherit;
+		&,
+		> p,
+		> p > * {
+			color: inherit;
+			text-decoration: none;
+			font-size: inherit;
+			font-weight: inherit;
+			font-family: inherit;
+		}
 
 		&:hover {
 			color: stylekit.$color--dark;

package/src/utils/index.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest';
+import { createElement } from 'react';
+import { extractTextFromReactNode } from './index';
+
+describe('extractTextFromReactNode', () => {
+	it('returns empty string for null', () => {
+		expect(extractTextFromReactNode(null)).toBe('');
+	});
+
+	it('returns empty string for undefined', () => {
+		expect(extractTextFromReactNode(undefined)).toBe('');
+	});
+
+	it('returns empty string for boolean', () => {
+		expect(extractTextFromReactNode(true)).toBe('');
+		expect(extractTextFromReactNode(false)).toBe('');
+	});
+
+	it('returns string as-is', () => {
+		expect(extractTextFromReactNode('Hello')).toBe('Hello');
+	});
+
+	it('converts number to string', () => {
+		expect(extractTextFromReactNode(42)).toBe('42');
+	});
+
+	it('extracts text from a simple element', () => {
+		const node = createElement('p', null, 'Section title');
+		expect(extractTextFromReactNode(node)).toBe('Section title');
+	});
+
+	it('extracts text from nested elements', () => {
+		const node = createElement('p', null,
+			'Hello ',
+			createElement('strong', null, 'world'),
+		);
+		expect(extractTextFromReactNode(node)).toBe('Hello world');
+	});
+
+	it('extracts text from deeply nested elements', () => {
+		const node = createElement('p', null,
+			createElement('em', null,
+				createElement('strong', null, 'deep'),
+			),
+		);
+		expect(extractTextFromReactNode(node)).toBe('deep');
+	});
+
+	it('extracts text from an array of nodes', () => {
+		const nodes = ['foo', ' ', createElement('span', null, 'bar')];
+		expect(extractTextFromReactNode(nodes)).toBe('foo bar');
+	});
+
+	it('handles mixed content with numbers and elements', () => {
+		const node = createElement('p', null, 'Step ', 3, ': done');
+		expect(extractTextFromReactNode(node)).toBe('Step 3: done');
+	});
+
+	it('returns empty string for element with no children', () => {
+		const node = createElement('p', null);
+		expect(extractTextFromReactNode(node)).toBe('');
+	});
+});

package/src/utils/index.ts

@@ -1,3 +1,14 @@
+import { isValidElement } from 'react';
+import type { ReactNode } from 'react';
+
+export const extractTextFromReactNode = (node: ReactNode): string => {
+	if (node === null || node === undefined || typeof node === 'boolean') return '';
+	if (typeof node === 'string' || typeof node === 'number') return String(node);
+	if (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);
+	if (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');
+	return '';
+};
+
 export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\w\d]/g, '-');
 
 export const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());