Update the number formater in docs

.changeset/frank-camels-raise.md

@@ -0,0 +1,5 @@
+---
+'shimmer-from-structure': minor
+---
+
+Lock dependencies

docs/app/components/Header.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { ThemeToggle } from './ThemeToggle';
+import { formatCompactNumber } from '@/lib/formatNumber';
 
 export function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -78,7 +79,7 @@ export function Header() {
                   <svg viewBox="0 0 16 16" className="w-3 h-3 fill-yellow-500" aria-hidden="true">
                     <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
                   </svg>
-                  <span>{stars.toLocaleString()}</span>
+                  <span>{formatCompactNumber(stars)}</span>
                 </div>
               )}
             </a>
@@ -162,7 +163,7 @@ export function Header() {
                   <svg viewBox="0 0 16 16" className="w-3 h-3 fill-yellow-500" aria-hidden="true">
                     <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
                   </svg>
-                  <span>{stars.toLocaleString()}</span>
+                  <span>{formatCompactNumber(stars)}</span>
                 </div>
               )}
             </a>

docs/lib/formatNumber.ts

@@ -0,0 +1,21 @@
+/**
+ * Formats a number into a compact string representation
+ * @param num - The number to format
+ * @returns Formatted string (e.g., 1000 -> "1k", 1234 -> "1.2k", 999 -> "999")
+ */
+export function formatCompactNumber(num: number): string {
+  if (num < 1000) {
+    return num.toString();
+  }
+
+  const thousands = num / 1000;
+  const rounded = Math.round(thousands * 10) / 10;
+
+  // If the rounded value is a whole number, show without decimal
+  if (rounded % 1 === 0) {
+    return `${Math.round(rounded)}k`;
+  }
+
+  // Otherwise show one decimal place
+  return `${rounded}k`;
+}

packages/shimmer-from-structure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shimmer-from-structure",
-  "version": "2.5.0",
+  "version": "2.4.5",
   "description": "Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.",
   "main": "index.js",
   "types": "index.d.ts",