@san-siva/blogkit 1.1.32 → 1.1.34

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../../../src/components/CheckList.tsx"],"names":[],"mappings":"AAAA,OAAwB,EACvB,KAAK,aAAa,EAClB,MAAM,qCAAqC,CAAC;AAE7C,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,4CAQrB,CAAC;AAEF,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAC9B,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.32",
+	"version": "1.1.34",
 	"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",
@@ -41,7 +41,7 @@
 	"author": "Santhosh Siva",
 	"license": "MIT",
 	"dependencies": {
-		"@san-siva/stylekit": "^1.0.12",
+		"@san-siva/stylekit": "^1.0.13",
 		"schema-dts": "^1.1.5"
 	},
 	"peerDependencies": {

package/src/components/CheckList.tsx

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

package/src/styles/CheckList.module.scss

@@ -8,7 +8,7 @@
 	&__item {
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: flex-start;
 
 		&__input {
@@ -17,6 +17,7 @@
 			border: 1px solid stylekit.$color--grey-medium;
 			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
 			margin-right: stylekit.space(1);
+			margin-top: stylekit.rem(6);
 			flex-shrink: 0;
 
 			&--checked {
@@ -30,7 +31,6 @@
 		}
 
 		> p {
-			font-size: stylekit.$font-size--small;
 			margin: 0;
 		}
 	}

package/src/styles/CodeBlock.module.scss

@@ -83,7 +83,6 @@ $code-block-background-color: #282a36;
 		&__title {
 			font-size: stylekit.$font-size--small;
 			color: stylekit.$color--code;
-			text-transform: capitalize;
 		}
 
 		&__copy {
@@ -119,6 +118,6 @@ $code-block-background-color: #282a36;
 
 .code-block--static code {
 	color: stylekit.$color--base !important;
-  font-family: stylekit.$font-family--code !important;
-  font-size: stylekit.$font-size--small !important;
+	font-family: stylekit.$font-family--code !important;
+	font-size: stylekit.$font-size--small !important;
 }

package/src/dynamicComponents/CheckListDynamic.tsx

@@ -1,66 +0,0 @@
-'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;