@bspk/ui 1.1.12 → 1.1.13

package/dist/Skeleton.d.ts

@@ -2,13 +2,13 @@ import './skeleton.scss';
 import { TxtVariant } from './utils/txtVariants';
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton.
+     * The variant of the skeleton that best hints the content being loaded.
      *
      * @default text
      */
     variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
     /**
-     * The size of the text. This is only used when variant is 'text'.
+     * The variant of the text being loaded. This is only used when variant is 'text'.
      *
      * @default body-base
      */
@@ -35,6 +35,28 @@ export type SkeletonProps = {
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
 declare function Skeleton({ width, height, textLines, textVariant: textSize, variant, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Skeleton.js

@@ -9,6 +9,28 @@ styleAdd(`[data-bspk=skeleton]{/*!
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
 function Skeleton({ width = 100, height = 100, textLines, textVariant: textSize, variant = 'rectangular', }) {

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsCzB;;;;GAIG;AACH,SAAS,QAAQ,CAAC,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,OAAO,GAAG,aAAa,GACX;IACZ,OAAO,CACH,2BACc,UAAU,kBACN,OAAO,EACrB,KAAK,EACD;YACI,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,eAAe,EAAE,SAAS,QAAQ,QAAQ;YAC1C,eAAe,EAAE,cAAc,QAAQ,yBAAyB,QAAQ,SAAS;YACjF,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC7C,YAGrB,OAAO,KAAK,MAAM;YACf,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GAC1F,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsCzB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,QAAQ,CAAC,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,OAAO,GAAG,aAAa,GACX;IACZ,OAAO,CACH,2BACc,UAAU,kBACN,OAAO,EACrB,KAAK,EACD;YACI,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,eAAe,EAAE,SAAS,QAAQ,QAAQ;YAC1C,eAAe,EAAE,cAAc,QAAQ,yBAAyB,QAAQ,SAAS;YACjF,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC7C,YAGrB,OAAO,KAAK,MAAM;YACf,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GAC1F,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/meta-types.ts

@@ -6,11 +6,11 @@ export type BaseMeta = {
     name: string;
     description?: string;
     file?: string;
+    example?: string;
 };
 
 export type TypeMeta = BaseMeta & {
     id: string;
-    example?: string;
     references?: string[];
     properties?: TypeProperty[];
 };
@@ -35,12 +35,15 @@ export type ComponentMeta = BaseMeta & {
     modified: string;
     css: string;
     hasTouchTarget: boolean;
+    usage?: {
+        code: string;
+        description?: string;
+    };
 };
 
 export type UtilityMeta = BaseMeta & {
     param?: string;
     returns?: string;
-    example?: string;
 };
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/meta.ts

@@ -169,6 +169,13 @@ function generateComponentMeta({
 
     const css = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, { encoding: 'utf-8' }) : '';
 
+    const usage = componentDoc.example
+        ? {
+              code: componentDoc.example,
+              description: componentDoc.exampleDescription,
+          }
+        : undefined;
+
     return {
         description: componentDoc.description,
         file: componentFile.split(componentsDir)[1],
@@ -176,6 +183,7 @@ function generateComponentMeta({
         slug,
         dependencies,
         modified: stats.mtime.toISOString(),
+        usage,
         css,
         hasTouchTarget: css.includes('data-touch-target'),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/Skeleton.tsx

@@ -5,13 +5,13 @@ import { TxtVariant } from './utils/txtVariants';
 
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton.
+     * The variant of the skeleton that best hints the content being loaded.
      *
      * @default text
      */
     variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
     /**
-     * The size of the text. This is only used when variant is 'text'.
+     * The variant of the text being loaded. This is only used when variant is 'text'.
      *
      * @default body-base
      */
@@ -39,6 +39,28 @@ export type SkeletonProps = {
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
 function Skeleton({