@san-siva/blogkit 1.1.43 → 1.1.44

package/dist/cjs/components/Checkbox.js

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var CheckList_module = require('../styles/CheckList.module.scss.js');
+
+const Checkbox = ({ isChecked = false, onClick }) => {
+    return (jsxRuntime.jsx("div", { className: `${CheckList_module.default['check-list__item__input']} ${isChecked ? CheckList_module.default['check-list__item__input--checked'] : ''}`, onClick: onClick, role: onClick ? 'checkbox' : undefined, "aria-checked": onClick ? isChecked : undefined, tabIndex: onClick ? 0 : undefined }));
+};
+
+exports.default = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport styles from '../styles/CheckList.module.scss';\n\ninterface CheckboxProperties {\n\tisChecked?: boolean;\n\tonClick?: () => void;\n}\n\nconst Checkbox = ({ isChecked = false, onClick }: CheckboxProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\tisChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t}`}\n\t\t\tonClick={onClick}\n\t\t\trole={onClick ? 'checkbox' : undefined}\n\t\t\taria-checked={onClick ? isChecked : undefined}\n\t\t\ttabIndex={onClick ? 0 : undefined}\n\t\t/>\n\t);\n};\n\nexport default Checkbox;\n"],"names":["_jsx","styles"],"mappings":";;;;;;;AASA,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAsB,KAAI;AACvE,IAAA,QACCA,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,SAAS,GAAGA,wBAAM,CAAC,kCAAkC,CAAC,GAAG,EAC1D,CAAA,CAAE,EACF,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,EAAA,cAAA,EACxB,OAAO,GAAG,SAAS,GAAG,SAAS,EAC7C,QAAQ,EAAE,OAAO,GAAG,CAAC,GAAG,SAAS,EAAA,CAChC;AAEJ;;;;"}

package/dist/cjs/components/WidthModeToggle.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var WidthModeContext = require('../context/WidthModeContext.js');
+
+const WidthModeToggle = () => {
+    const widthMode = WidthModeContext.useWidthMode();
+    if (!widthMode)
+        return null;
+    const { increasedWidthMode, setIncreasedWidthMode } = widthMode;
+    return (jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: increasedWidthMode, onChange: event => setIncreasedWidthMode(event.target.checked) }), "Increased width mode"] }));
+};
+
+exports.default = WidthModeToggle;
+//# sourceMappingURL=WidthModeToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeToggle.js","sources":["../../../src/components/WidthModeToggle.tsx"],"sourcesContent":["'use client';\n\nimport { useWidthMode } from '../context/WidthModeContext';\n\nconst WidthModeToggle = () => {\n\tconst widthMode = useWidthMode();\n\tif (!widthMode) return null;\n\n\tconst { increasedWidthMode, setIncreasedWidthMode } = widthMode;\n\n\treturn (\n\t\t<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={increasedWidthMode}\n\t\t\t\tonChange={event => setIncreasedWidthMode(event.target.checked)}\n\t\t\t/>\n\t\t\tIncreased width mode\n\t\t</label>\n\t);\n};\n\nexport default WidthModeToggle;\n"],"names":["useWidthMode","_jsxs","_jsx"],"mappings":";;;;;;;AAIA,MAAM,eAAe,GAAG,MAAK;AAC5B,IAAA,MAAM,SAAS,GAAGA,6BAAY,EAAE;AAChC,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,IAAI;AAE3B,IAAA,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,GAAG,SAAS;IAE/D,QACCC,2BAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACrEC,cAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,KAAK,IAAI,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAA,CAC7D,EAAA,sBAAA,CAAA,EAAA,CAEK;AAEV;;;;"}

package/dist/cjs/context/WidthModeContext.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const STORAGE_KEY = 'blogkit:increased-width-mode';
+const WidthModeContext = react.createContext(null);
+const WidthModeProvider = ({ children }) => {
+    const [increasedWidthMode, setIncreasedWidthMode] = react.useState(false);
+    react.useEffect(() => {
+        setIncreasedWidthMode(localStorage.getItem(STORAGE_KEY) === 'true');
+    }, []);
+    react.useEffect(() => {
+        localStorage.setItem(STORAGE_KEY, String(increasedWidthMode));
+    }, [increasedWidthMode]);
+    return (jsxRuntime.jsx(WidthModeContext.Provider, { value: { increasedWidthMode, setIncreasedWidthMode }, children: children }));
+};
+const useWidthMode = () => react.useContext(WidthModeContext);
+
+exports.WidthModeProvider = WidthModeProvider;
+exports.useWidthMode = useWidthMode;
+//# sourceMappingURL=WidthModeContext.js.map

package/dist/cjs/context/WidthModeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeContext.js","sources":["../../../src/context/WidthModeContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nconst STORAGE_KEY = 'blogkit:increased-width-mode';\n\ninterface WidthModeContextValue {\n\tincreasedWidthMode: boolean;\n\tsetIncreasedWidthMode: (value: boolean) => void;\n}\n\nconst WidthModeContext = createContext<WidthModeContextValue | null>(null);\n\ninterface WidthModeProviderProperties {\n\tchildren: ReactNode;\n}\n\nexport const WidthModeProvider = ({ children }: WidthModeProviderProperties) => {\n\tconst [increasedWidthMode, setIncreasedWidthMode] = useState(false);\n\n\tuseEffect(() => {\n\t\tsetIncreasedWidthMode(localStorage.getItem(STORAGE_KEY) === 'true');\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlocalStorage.setItem(STORAGE_KEY, String(increasedWidthMode));\n\t}, [increasedWidthMode]);\n\n\treturn (\n\t\t<WidthModeContext.Provider\n\t\t\tvalue={{ increasedWidthMode, setIncreasedWidthMode }}\n\t\t>\n\t\t\t{children}\n\t\t</WidthModeContext.Provider>\n\t);\n};\n\nexport const useWidthMode = () => useContext(WidthModeContext);\n"],"names":["createContext","useState","useEffect","_jsx","useContext"],"mappings":";;;;;AAKA,MAAM,WAAW,GAAG,8BAA8B;AAOlD,MAAM,gBAAgB,GAAGA,mBAAa,CAA+B,IAAI,CAAC;MAM7D,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAA+B,KAAI;IAC9E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAEnEC,eAAS,CAAC,MAAK;QACd,qBAAqB,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,MAAM,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC;IAENA,eAAS,CAAC,MAAK;QACd,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC9D,IAAA,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAExB,IAAA,QACCC,cAAA,CAAC,gBAAgB,CAAC,QAAQ,IACzB,KAAK,EAAE,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,YAEnD,QAAQ,EAAA,CACkB;AAE9B;AAEO,MAAM,YAAY,GAAG,MAAMC,gBAAU,CAAC,gBAAgB;;;;;"}

package/dist/cjs/index.js

@@ -9,6 +9,7 @@ var Mermaid = require('./components/Mermaid.js');
 var BlogLink = require('./components/BlogLink.js');
 var Table = require('./components/Table.js');
 var CheckList = require('./components/CheckList.js');
+var Checkbox = require('./components/Checkbox.js');
 var index = require('./utils/index.js');
 
 
@@ -22,6 +23,7 @@ exports.Mermaid = Mermaid.default;
 exports.BlogLink = BlogLink.default;
 exports.Table = Table.default;
 exports.CheckList = CheckList.default;
+exports.Checkbox = Checkbox.default;
 exports.generateIdForBlogTitle = index.generateIdForBlogTitle;
 exports.generateUrlForBlogTitle = index.generateUrlForBlogTitle;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/staticComponents/CheckListStatic.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var Checkbox = require('../components/Checkbox.js');
 var CheckList_module = require('../styles/CheckList.module.scss.js');
 
 const CheckListStatic = ({ items, hasMarginUp = false, hasMarginDown = false, }) => {
-    return (jsxRuntime.jsx("div", { className: `${CheckList_module.default['check-list']} ${hasMarginUp ? CheckList_module.default['margin-top--1'] : ''} ${hasMarginDown ? CheckList_module.default['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxRuntime.jsxs("div", { className: CheckList_module.default['check-list__item'], "data-id": item.id, children: [jsxRuntime.jsx("div", { className: `${CheckList_module.default['check-list__item__input']} ${item.isChecked ? CheckList_module.default['check-list__item__input--checked'] : ''}` }), item.children] }, item.id))) }));
+    return (jsxRuntime.jsx("div", { className: `${CheckList_module.default['check-list']} ${hasMarginUp ? CheckList_module.default['margin-top--1'] : ''} ${hasMarginDown ? CheckList_module.default['margin-bottom--2'] : ''}`, children: items.map((item) => (jsxRuntime.jsxs("div", { className: CheckList_module.default['check-list__item'], "data-id": item.id, children: [jsxRuntime.jsx(Checkbox.default, { isChecked: item.isChecked, onClick: item.onClick }), item.children] }, item.id))) }));
 };
 
 exports.default = CheckListStatic;

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

@@ -1 +1 @@
-{"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","styles","_jsxs"],"mappings":";;;;;;;AAgBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;IACzB,QACCA,wBACC,SAAS,EAAE,GAAGC,wBAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAGA,wBAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAGA,wBAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,EAAE,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,eAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAED,wBAAM,CAAC,kBAAkB,CAAC,aAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,IAAI,CAAC,SAAS,GAAGA,wBAAM,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;;;;"}
+{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\n\nimport Checkbox from '../components/Checkbox';\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tisChecked?: boolean;\n\tonClick?: () => void;\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<Checkbox isChecked={item.isChecked} onClick={item.onClick} />\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","styles","_jsxs","Checkbox"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;AACzB,IAAA,QACCA,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAGA,wBAAM,CAAC,eAAe,CAAC,GAAG,EAAE,IAC/E,aAAa,GAAGA,wBAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACfC,eAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAED,wBAAM,CAAC,kBAAkB,CAAC,aAAW,IAAI,CAAC,EAAE,EAAA,QAAA,EAAA,CACzED,cAAA,CAACG,gBAAQ,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EAC7D,IAAI,CAAC,QAAQ,CAAA,EAAA,EAFL,IAAI,CAAC,EAAE,CAGX,CACN,CAAC,EAAA,CACG;AAER;;;;"}

package/dist/esm/components/Checkbox.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import styles from '../styles/CheckList.module.scss.js';
+
+const Checkbox = ({ isChecked = false, onClick }) => {
+    return (jsx("div", { className: `${styles['check-list__item__input']} ${isChecked ? styles['check-list__item__input--checked'] : ''}`, onClick: onClick, role: onClick ? 'checkbox' : undefined, "aria-checked": onClick ? isChecked : undefined, tabIndex: onClick ? 0 : undefined }));
+};
+
+export { Checkbox as default };
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport styles from '../styles/CheckList.module.scss';\n\ninterface CheckboxProperties {\n\tisChecked?: boolean;\n\tonClick?: () => void;\n}\n\nconst Checkbox = ({ isChecked = false, onClick }: CheckboxProperties) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['check-list__item__input']} ${\n\t\t\t\tisChecked ? styles['check-list__item__input--checked'] : ''\n\t\t\t}`}\n\t\t\tonClick={onClick}\n\t\t\trole={onClick ? 'checkbox' : undefined}\n\t\t\taria-checked={onClick ? isChecked : undefined}\n\t\t\ttabIndex={onClick ? 0 : undefined}\n\t\t/>\n\t);\n};\n\nexport default Checkbox;\n"],"names":["_jsx"],"mappings":";;;AASA,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAsB,KAAI;AACvE,IAAA,QACCA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA,CAAA,EAC9C,SAAS,GAAG,MAAM,CAAC,kCAAkC,CAAC,GAAG,EAC1D,CAAA,CAAE,EACF,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,EAAA,cAAA,EACxB,OAAO,GAAG,SAAS,GAAG,SAAS,EAC7C,QAAQ,EAAE,OAAO,GAAG,CAAC,GAAG,SAAS,EAAA,CAChC;AAEJ;;;;"}

package/dist/esm/components/WidthModeToggle.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useWidthMode } from '../context/WidthModeContext.js';
+
+const WidthModeToggle = () => {
+    const widthMode = useWidthMode();
+    if (!widthMode)
+        return null;
+    const { increasedWidthMode, setIncreasedWidthMode } = widthMode;
+    return (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [jsx("input", { type: "checkbox", checked: increasedWidthMode, onChange: event => setIncreasedWidthMode(event.target.checked) }), "Increased width mode"] }));
+};
+
+export { WidthModeToggle as default };
+//# sourceMappingURL=WidthModeToggle.js.map

package/dist/esm/components/WidthModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeToggle.js","sources":["../../../src/components/WidthModeToggle.tsx"],"sourcesContent":["'use client';\n\nimport { useWidthMode } from '../context/WidthModeContext';\n\nconst WidthModeToggle = () => {\n\tconst widthMode = useWidthMode();\n\tif (!widthMode) return null;\n\n\tconst { increasedWidthMode, setIncreasedWidthMode } = widthMode;\n\n\treturn (\n\t\t<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={increasedWidthMode}\n\t\t\t\tonChange={event => setIncreasedWidthMode(event.target.checked)}\n\t\t\t/>\n\t\t\tIncreased width mode\n\t\t</label>\n\t);\n};\n\nexport default WidthModeToggle;\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAIA,MAAM,eAAe,GAAG,MAAK;AAC5B,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,IAAI;AAE3B,IAAA,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,GAAG,SAAS;IAE/D,QACCA,gBAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACrEC,GAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,KAAK,IAAI,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAA,CAC7D,EAAA,sBAAA,CAAA,EAAA,CAEK;AAEV;;;;"}

package/dist/esm/context/WidthModeContext.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const STORAGE_KEY = 'blogkit:increased-width-mode';
+const WidthModeContext = createContext(null);
+const WidthModeProvider = ({ children }) => {
+    const [increasedWidthMode, setIncreasedWidthMode] = useState(false);
+    useEffect(() => {
+        setIncreasedWidthMode(localStorage.getItem(STORAGE_KEY) === 'true');
+    }, []);
+    useEffect(() => {
+        localStorage.setItem(STORAGE_KEY, String(increasedWidthMode));
+    }, [increasedWidthMode]);
+    return (jsx(WidthModeContext.Provider, { value: { increasedWidthMode, setIncreasedWidthMode }, children: children }));
+};
+const useWidthMode = () => useContext(WidthModeContext);
+
+export { WidthModeProvider, useWidthMode };
+//# sourceMappingURL=WidthModeContext.js.map

package/dist/esm/context/WidthModeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeContext.js","sources":["../../../src/context/WidthModeContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nconst STORAGE_KEY = 'blogkit:increased-width-mode';\n\ninterface WidthModeContextValue {\n\tincreasedWidthMode: boolean;\n\tsetIncreasedWidthMode: (value: boolean) => void;\n}\n\nconst WidthModeContext = createContext<WidthModeContextValue | null>(null);\n\ninterface WidthModeProviderProperties {\n\tchildren: ReactNode;\n}\n\nexport const WidthModeProvider = ({ children }: WidthModeProviderProperties) => {\n\tconst [increasedWidthMode, setIncreasedWidthMode] = useState(false);\n\n\tuseEffect(() => {\n\t\tsetIncreasedWidthMode(localStorage.getItem(STORAGE_KEY) === 'true');\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlocalStorage.setItem(STORAGE_KEY, String(increasedWidthMode));\n\t}, [increasedWidthMode]);\n\n\treturn (\n\t\t<WidthModeContext.Provider\n\t\t\tvalue={{ increasedWidthMode, setIncreasedWidthMode }}\n\t\t>\n\t\t\t{children}\n\t\t</WidthModeContext.Provider>\n\t);\n};\n\nexport const useWidthMode = () => useContext(WidthModeContext);\n"],"names":["_jsx"],"mappings":";;;AAKA,MAAM,WAAW,GAAG,8BAA8B;AAOlD,MAAM,gBAAgB,GAAG,aAAa,CAA+B,IAAI,CAAC;MAM7D,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAA+B,KAAI;IAC9E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEnE,SAAS,CAAC,MAAK;QACd,qBAAqB,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,MAAM,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACd,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC9D,IAAA,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAExB,IAAA,QACCA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,IACzB,KAAK,EAAE,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,YAEnD,QAAQ,EAAA,CACkB;AAE9B;AAEO,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,gBAAgB;;;;"}

package/dist/esm/index.js

@@ -7,5 +7,6 @@ export { default as Mermaid } from './components/Mermaid.js';
 export { default as BlogLink } from './components/BlogLink.js';
 export { default as Table } from './components/Table.js';
 export { default as CheckList } from './components/CheckList.js';
+export { default as Checkbox } from './components/Checkbox.js';
 export { generateIdForBlogTitle, generateUrlForBlogTitle } from './utils/index.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/staticComponents/CheckListStatic.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import Checkbox from '../components/Checkbox.js';
 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'] : ''}` }), 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(Checkbox, { isChecked: item.isChecked, onClick: item.onClick }), 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 { 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;;;;"}
+{"version":3,"file":"CheckListStatic.js","sources":["../../../src/staticComponents/CheckListStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\n\nimport Checkbox from '../components/Checkbox';\nimport styles from '../styles/CheckList.module.scss';\n\nexport interface CheckListItem {\n\tid: string;\n\tchildren: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tisChecked?: boolean;\n\tonClick?: () => void;\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<Checkbox isChecked={item.isChecked} onClick={item.onClick} />\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":";;;;AAkBA,MAAM,eAAe,GAAG,CAAC,EACxB,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACA,KAAI;AACzB,IAAA,QACCA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,IAC/E,aAAa,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,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,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EAC7D,IAAI,CAAC,QAAQ,CAAA,EAAA,EAFL,IAAI,CAAC,EAAE,CAGX,CACN,CAAC,EAAA,CACG;AAER;;;;"}

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

@@ -0,0 +1,7 @@
+interface CheckboxProperties {
+    isChecked?: boolean;
+    onClick?: () => void;
+}
+declare const Checkbox: ({ isChecked, onClick }: CheckboxProperties) => import("react").JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,GAAI,wBAAgC,kBAAkB,gCAYnE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/components/Checkbox.test.d.ts

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

package/dist/types/components/Checkbox.test.d.ts.map

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

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

@@ -0,0 +1,3 @@
+declare const WidthModeToggle: () => import("react").JSX.Element | null;
+export default WidthModeToggle;
+//# sourceMappingURL=WidthModeToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/WidthModeToggle.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,0CAgBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/context/WidthModeContext.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+interface WidthModeContextValue {
+    increasedWidthMode: boolean;
+    setIncreasedWidthMode: (value: boolean) => void;
+}
+interface WidthModeProviderProperties {
+    children: ReactNode;
+}
+export declare const WidthModeProvider: ({ children }: WidthModeProviderProperties) => import("react").JSX.Element;
+export declare const useWidthMode: () => WidthModeContextValue | null;
+export {};
+//# sourceMappingURL=WidthModeContext.d.ts.map

package/dist/types/context/WidthModeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidthModeContext.d.ts","sourceRoot":"","sources":["../../../src/context/WidthModeContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,qBAAqB;IAC9B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAID,UAAU,2BAA2B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,GAAI,cAAc,2BAA2B,gCAkB1E,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAqC,CAAC"}

package/dist/types/index.d.ts

@@ -7,5 +7,6 @@ export { default as Mermaid } from './components/Mermaid';
 export { default as BlogLink } from './components/BlogLink';
 export { default as Table } from './components/Table';
 export { default as CheckList, type CheckListItem } from './components/CheckList';
+export { default as Checkbox } from './components/Checkbox';
 export { generateIdForBlogTitle, generateUrlForBlogTitle } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlF,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -3,6 +3,7 @@ export interface CheckListItem {
     id: string;
     children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
     isChecked?: boolean;
+    onClick?: () => void;
 }
 interface CheckListProperties {
     items: CheckListItem[];

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,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,gCAmBrB,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;AAK1D,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;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;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,gCAerB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.43",
+	"version": "1.1.44",
 	"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/Checkbox.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import Checkbox from './Checkbox';
+
+describe('Checkbox', () => {
+	it('renders unchecked by default with no interactive attributes', () => {
+		const html = renderToStaticMarkup(<Checkbox />);
+		expect(html).not.toContain('role="checkbox"');
+		expect(html).not.toContain('tabindex');
+	});
+
+	it('adds role, aria-checked and tabIndex when onClick is provided', () => {
+		const html = renderToStaticMarkup(<Checkbox isChecked onClick={() => {}} />);
+		expect(html).toContain('role="checkbox"');
+		expect(html).toContain('aria-checked="true"');
+		expect(html).toContain('tabindex="0"');
+	});
+
+	it('renders a different className when checked vs unchecked', () => {
+		const uncheckedHtml = renderToStaticMarkup(<Checkbox isChecked={false} />);
+		const checkedHtml = renderToStaticMarkup(<Checkbox isChecked />);
+		expect(checkedHtml).not.toBe(uncheckedHtml);
+	});
+
+	it('wires the onClick prop through to the rendered element', () => {
+		const onClick = vi.fn();
+		const element = Checkbox({ onClick });
+		element.props.onClick();
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+});

package/src/components/Checkbox.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import styles from '../styles/CheckList.module.scss';
+
+interface CheckboxProperties {
+	isChecked?: boolean;
+	onClick?: () => void;
+}
+
+const Checkbox = ({ isChecked = false, onClick }: CheckboxProperties) => {
+	return (
+		<div
+			className={`${styles['check-list__item__input']} ${
+				isChecked ? styles['check-list__item__input--checked'] : ''
+			}`}
+			onClick={onClick}
+			role={onClick ? 'checkbox' : undefined}
+			aria-checked={onClick ? isChecked : undefined}
+			tabIndex={onClick ? 0 : undefined}
+		/>
+	);
+};
+
+export default Checkbox;

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as Mermaid } from './components/Mermaid';
 export { default as BlogLink } from './components/BlogLink';
 export { default as Table } from './components/Table';
 export { default as CheckList, type CheckListItem } from './components/CheckList';
+export { default as Checkbox } from './components/Checkbox';
 
 // Utilities
 export { generateIdForBlogTitle, generateUrlForBlogTitle } from './utils';

package/src/staticComponents/CheckListStatic.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import CheckListStatic from './CheckListStatic';
+
+describe('CheckListStatic', () => {
+	it('renders one item per entry', () => {
+		const html = renderToStaticMarkup(
+			<CheckListStatic
+				items={[
+					{ id: 'a', children: <p>A</p> },
+					{ id: 'b', children: <p>B</p> },
+				]}
+			/>
+		);
+		expect(html).toContain('data-id="a"');
+		expect(html).toContain('data-id="b"');
+	});
+
+	it("wires each item's onClick through to its Checkbox", () => {
+		const onClick = vi.fn();
+		const element = CheckListStatic({
+			items: [{ id: 'a', children: <p>A</p>, onClick }],
+		});
+		const checkbox = element.props.children[0].props.children[0];
+		checkbox.props.onClick();
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+});

package/src/staticComponents/CheckListStatic.tsx

@@ -1,11 +1,13 @@
 import type { HTMLAttributes, ReactElement } from 'react';
 
+import Checkbox from '../components/Checkbox';
 import styles from '../styles/CheckList.module.scss';
 
 export interface CheckListItem {
 	id: string;
 	children: ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
 	isChecked?: boolean;
+	onClick?: () => void;
 }
 
 interface CheckListProperties {
@@ -27,11 +29,7 @@ const CheckListStatic = ({
 		>
 			{items.map((item) => (
 				<div key={item.id} className={styles['check-list__item']} data-id={item.id}>
-					<div
-						className={`${styles['check-list__item__input']} ${
-							item.isChecked ? styles['check-list__item__input--checked'] : ''
-						}`}
-					/>
+					<Checkbox isChecked={item.isChecked} onClick={item.onClick} />
 					{item.children}
 				</div>
 			))}