@docpensieve/components 0.1.5 → 0.2.0-beta.1

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Juniors017/docpensieve/main/branding/logo.jpg" alt="DocPensieve — Documentation &amp; Magical Memory" width="180">
+</p>
+
 # @docpensieve/components
 
 > Global MDX components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docpensieve/components",
-  "version": "0.1.5",
+  "version": "0.2.0-beta.1",
   "description": "DocPensieve global MDX components, usable without import: Card, Columns, Tooltip, Tree, Skill, TimeTimer, LogoIcon, ScrollToTop",
   "type": "module",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "types"
   ],
   "dependencies": {
-    "@docpensieve/shared": "0.1.5"
+    "@docpensieve/shared": "0.2.0-beta.1"
   },
   "peerDependencies": {
     "react": "^19"
@@ -37,7 +37,7 @@
     "url": "git+https://github.com/Juniors017/docpensieve.git",
     "directory": "packages/components"
   },
-  "homepage": "https://github.com/Juniors017/docpensieve#readme",
+  "homepage": "https://docpensieve.com",
   "bugs": {
     "url": "https://github.com/Juniors017/docpensieve/issues"
   },

package/src/card.js

@@ -79,16 +79,20 @@ export const CardFooter = cardPart('cardFooter', 'CardFooter');
  *
  * @param {{
  *   className?: string, style?: object, src?: string,
- *   alt?: string, title?: string, srcSet?: string, sizes?: string,
+ *   alt?: string, title?: string, srcSet?: string, sizes?: string, loading?: 'lazy' | 'eager',
  * }} props `alt` defaults to the empty string: without that attribute, a
  *   screen reader would announce the file URL.
  */
-export function CardImage({ className, style, src, alt = '', ...rest }) {
+export function CardImage({ className, style, src, alt = '', loading = 'lazy', ...rest }) {
   return h('img', {
     className: classNames(cls('cardImage'), className),
     style,
     src: resolveUrl(src),
     alt,
+    // Lazy by default: a card image is rarely what the reader sees first,
+    // and React stops preloading an image loaded lazily.
+    loading,
+    decoding: 'async',
     ...rest,
   });
 }

package/types/card.d.ts

@@ -49,11 +49,11 @@ export declare const CardFooter: (props: PartProps) => any;
  *
  * @param {{
  *   className?: string, style?: object, src?: string,
- *   alt?: string, title?: string, srcSet?: string, sizes?: string,
+ *   alt?: string, title?: string, srcSet?: string, sizes?: string, loading?: 'lazy' | 'eager',
  * }} props `alt` defaults to the empty string: without that attribute, a
  *   screen reader would announce the file URL.
  */
-export declare function CardImage({ className, style, src, alt, ...rest }: {
+export declare function CardImage({ className, style, src, alt, loading, ...rest }: {
     className?: string;
     style?: object;
     src?: string;
@@ -61,6 +61,7 @@ export declare function CardImage({ className, style, src, alt, ...rest }: {
     title?: string;
     srcSet?: string;
     sizes?: string;
+    loading?: 'lazy' | 'eager';
 }): import("react").DetailedReactHTMLElement<{
     title?: string;
     srcSet?: string;
@@ -69,4 +70,6 @@ export declare function CardImage({ className, style, src, alt, ...rest }: {
     style: object | undefined;
     src: string | undefined;
     alt: string;
+    loading: "eager" | "lazy";
+    decoding: string;
 }, HTMLElement>;